@import url('../twentyseventeen/style.css');

/*
Theme Name:  Heng-Jin Park | Pianist
Theme URI:  http://www.hengjinpark.com
Description:  Heng-Jin Park | Pianist
Author:  ekiM
Version:  1.0
Template:  twentyseventeen
Tags:  one-column, no-sidebar, custom-header, custom-colors
*/

/*=== ANIMATIONS BEGIN  ===*/

/*=== Trigger  ===*/
.animate {
  -webkit-animation-duration: 0.4s;
  animation-duration: 0.4s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.one {
-webkit-animation-delay: 0.4s;
-moz-animation-delay: 0.4s;
animation-delay: 0.4s;
}

.two {
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
animation-delay: 1s;
}

/*=== FADE IN  ===*/
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
 
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
 
  to {
    opacity: 1;
  }
}
 
.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}
 
 
/*=== FADE IN DOWN ===*/
@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
 
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
 
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
 
.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}
 
/*==== FADE IN UP ===*/
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
 
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
 
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
 
.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}
 
/*=== FADE IN LEFT ===*/
@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
 
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
 
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
 
.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}
 
 
/*==== FADE IN RIGHT ===*/
@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
 
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
 
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
 
.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

/* make keyframes that tell the start state and the end state of our object */
 
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
 
.fade-in {
	opacity:0;  /* make things invisible upon start */
	-webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
	-moz-animation:fadeIn ease-in 1;
	animation:fadeIn ease-in 1;
 
	-webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
 
	-webkit-animation-duration:1s;
	-moz-animation-duration:1s;
	animation-duration:1s;
}
 
.fade-in.one {
	-webkit-animation-delay: 0.7s;
	-moz-animation-delay: 0.7s;
	animation-delay: 0.7s;
}

.fade-in.two {
	-webkit-animation-delay: 2s;
	-moz-animation-delay: 2s;
	animation-delay: 2s;
}

/* ----- ANIMATIONS END ------ */


/* ------ BEGIN TYPEFACES ------- */


@font-face { font-family: GaramondPremrPro-It; local(GaramondPremrPro-It), src: url(http://www.hengjinpark.com/wp-content/themes/twentyseventeen-hjp/fonts/GaramondPremrPro-It.otf); font-weight: normal; }

@font-face { font-family: GaramondPremrPro-SmbdIt; local(GaramondPremrPro-SmbdIt), src: url(http://www.hengjinpark.com/wp-content/themes/twentyseventeen-hjp/fonts/GaramondPremrPro-SmbdIt.otf); font-weight: normal; }

@font-face {
  font-family: 'Lato-Regular';
  src: local(Lato-Regular), url('http://www.hengjinpark.com/wp-content/themes/twentyseventeen-hjp/fonts/Lato-Regular.eot'); /* IE9 Compat Modes */
  src: local(Lato-Regular), url('http://www.hengjinpark.com/wp-content/themes/twentyseventeen-hjp/fonts/Lato-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       local(Lato-Regular), url('http://www.hengjinpark.com/wp-content/themes/twentyseventeen-hjp/fonts/Lato-Regular.woff2') format('woff2'), /* Super Modern Browsers */
       local(Lato-Regular), url('http://www.hengjinpark.com/wp-content/themes/twentyseventeen-hjp/fonts/Lato-Regular.woff') format('woff'), /* Pretty Modern Browsers */
       local(Lato-Regular), url('Lato-Regular.ttf')  format('truetype'), /* Safari, Android, iOS */
}

@font-face {
  font-family: 'Lato-Light';
  src: local(Lato-Light), url('http://www.hengjinpark.com/wp-content/themes/twentyseventeen-hjp/fonts/Lato-Light.eot'); /* IE9 Compat Modes */
  src: local(Lato-Light), url('http://www.heng jinpark.com/wp-content/themes/twentyseventeen-hjp/fonts/Lato-Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       local(Lato-Light), url('http://www.hengjinpark.com/wp-content/themes/twentyseventeen-hjp/fonts/Lato-Light.woff2') format('woff2'), /* Super Modern Browsers */
       local(Lato-Light), url('http://www.hengjinpark.com/wp-content/themes/twentyseventeen-hjp/fonts/Lato-Light.woff') format('woff'), /* Pretty Modern Browsers */
       local(Lato-Light), url('Lato-Lightt.ttf')  format('truetype'), /* Safari, Android, iOS */
}

@font-face {
  font-family: 'Lato-Thin';
  src: local(Lato-Thin), url('http://www.hengjinpark.com/wp-content/themes/twentyseventeen-hjp/fonts/Lato-Thin.eot'); /* IE9 Compat Modes */
  src: local(Lato-Thin), url('http://www.hengjinpark.com/wp-content/themes/twentyseventeen-hjp/fonts/Lato-Thin.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       local(Lato-Thin), url('http://www.hengjinpark.com/wp-content/themes/twentyseventeen-hjp/fonts/Lato-Thin.woff2') format('woff2'), /* Super Modern Browsers */
       local(Lato-Thin), url('http://www.hengjinpark.com/wp-content/themes/twentyseventeen-hjp/fonts/Lato-Thin.woff') format('woff'), /* Pretty Modern Browsers */
       local(Lato-Thin), url('Lato-Thin.ttf')  format('truetype'), /* Safari, Android, iOS */
}

em, input.wpcf7-form-control.wpcf7-submit { font-family: GaramondPremrPro-It; serif; }

em strong { font-family: GaramondPremrPro-SmbdIt; serif }

.event-title, .event-title a, .event-title-tight, .event-title-tight a, .event-title-two-line, .event-title-two-line a { font-family: Lato-Regular; sans-serif; }

body, h2, h3, h4, h5, h6, p, blockquote, li, a, .landing-page-content-mobi p, .landing-page-content-mobi a, .landing-page-content p, .landing-page-content p a { font-family: Lato-Light; sans-serif; }

h1, h1 a, .subheader-text { font-family: Lato-Thin; sans-serif; }


/* ------ END TYPEFACES ------- */

body.home.page-template-default.page.page-id-5.twentyseventeen-front-page.has-header-image.page-two-column.colors-light  { background: url(http://www.hengjinpark.com/wp-content/uploads/home_bground.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 100vh;
}

@media screen and (min-width:100vw) and (min-height:0vw) and (max-height:65vw) {

body.home.page-template-default.page.page-id-5.twentyseventeen-front-page.has-header-image.page-two-column.colors-light  { background: url(http://www.hengjinpark.com/wp-content/uploads/home_narrow_bground.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 100vh;
}

}

body.page-two-column:not(.archive) #primary .entry-content { height: 100vh; }

body.page-two-column:not(.archive) #primary .general-page-content .entry-content { height: auto; }

body { background: url(http://www.hengjinpark.com/wp-content/uploads/page_bground.jpg); background-repeat: no-repeat; height: auto; margin-top: 0; outline: none; -webkit-font-smoothing: subpixel-antialiased; !important; -moz-osx-font-smoothing: grayscale; min-height: 100%; font-size: 18px; line-height: 27px; color: #4d4d4d; }

.nav-bar, .nav-bar a { -webkit-font-smoothing: subpixel-antialiased; !important; -moz-osx-font-smoothing: grayscale; }

.entry-content a img, .widget a img { box-shadow: none; }

.entry-content a:focus, .entry-content a:hover, .entry-summary a:focus, .entry-summary a:hover, .widget a:focus, .widget a:hover, .site-footer .widget-area a:focus, .site-footer .widget-area a:hover, .posts-navigation a:focus, .posts-navigation a:hover, .comment-metadata a:focus, .comment-metadata a:hover, .comment-metadata a.comment-edit-link:focus, .comment-metadata a.comment-edit-link:hover, .comment-reply-link:focus, .comment-reply-link:hover, .widget_authors a:focus strong, .widget_authors a:hover strong, .entry-title a:focus, .entry-title a:hover, .entry-meta a:focus, .entry-meta a:hover, .page-links a:focus .page-number, .page-links a:hover .page-number, .entry-footer a:focus, .entry-footer a:hover, .entry-footer .cat-links a:focus, .entry-footer .cat-links a:hover, .entry-footer .tags-links a:focus, .entry-footer .tags-links a:hover, .post-navigation a:focus, .post-navigation a:hover, .pagination a:not(.prev):not(.next):focus, .pagination a:not(.prev):not(.next):hover, .comments-pagination a:not(.prev):not(.next):focus, .comments-pagination a:not(.prev):not(.next):hover,.logged-in-as a:focus, .logged-in-as a:hover, a:focus .nav-title, a:hover .nav-title, .edit-link a:focus, .edit-link a:hover, .site-info a:focus, .site-info a:hover, .widget .widget-title a:focus, .widget .widget-title a:hover, .widget ul li a:focus, .widget ul li a:hover { color: #b4b6b8; -webkit-box-shadow: none; box-shadow: none; }

a:link { text-decoration: none; box-shadow: none; -webkit-box-shadow: none; }
a:visited { text-decoration: none; box-shadow: none; -webkit-box-shadow: none; }
a:hover { text-decoration: none; box-shadow: none; -webkit-box-shadow: none; }
a:active { text-decoration: none; box-shadow: none; -webkit-box-shadow: none; }

html { outline: none; min-height: 100%; }

.panel-content .wrap { float: none; display: block; width: 100%; max-width: none; padding: 0; background: none; }

.page:not(.home) #content { padding-bottom: 0; }

.wrap { padding: 0; }

.wrap { max-width: none; }

body.page-two-column:not(.archive) #primary .entry-content { float: none; width: 100%; max-width: none; }

.site-content-contain { background: none; }

body:not(.custom-background-image):before, body:not(.custom-background-image):after { height: 0; }

::selection { background: #ff5bd3; }

.site-header { display: none; }

.site-title { display: none; }

footer.entry-footer { display: none; }

.site-content { padding: 0; } 

#secondary.sidebar.widget-area { display: none; }

#colophon.site-footer { display: none; }

.site-inner { width: 100%; max-width: none; }

.entry-content { margin: 0 }

p em { font-size: 21px; letter-spacing: .01em;  }

p strong em { font-size: 19px; letter-spacing: .05em; }

strong { font-weight: normal; }

em { font-style: normal; }

.site { background: none; width: 100%; position: relative; margin: 0 auto; }

.site::before { display: none; }

.entry-header { display: none; }

.header-main { display: none; }

a:-webkit-any-link { text-decoration: none; }

body:not(.search-results) article:not(.type-page) .entry-content { float: none; display: block; width: 100%; max-width: none; }

.content-area { width: 100%; max-width: none; }


/* ------ BEGIN GENERAL NAVIGATION ------- */


.navigation { float: right; display: inline; width: 184px; height: 112px; margin: 10px 25px 0 0; }

.nav-icon { float: left; display: inline; width: 61px; height: 56px; }


/* ------ END GENERAL NAVIGATION ------- */


/* ------ BEGIN LANDING PAGE ------- */


.entry-content { float: none; display: block; width: 100%; }

.header { float: left; display: inline; padding-left: 25px; }

.header h1 { float: left; font-size: 69px; color: #e9d1cb; font-weight: normal; margin-bottom: -12px; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale; }

.header .subheader { font-size: 48px;  color: #e9d1cb; font-weight: normal; text-align: center; letter-spacing: .02em; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale; }

.subheader-text { float: none; display: inline-block; transform: skewX(-12deg); }

.header .subheader .decorative-line { float: none; display: inline; width: 164px; }

.header .subheader .decorative-line img { float: none; display: inline; width: 164px; }

.landing-page-content-mobi { display: none; }

.landing-page-content { float: left; display: block; margin: 10vh 0 0 10%; text-align: center; font-size: 20px; line-height: 24px; color: #fae4e4; letter-spacing: 0; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale; }

.entry-content .landing-page-content p { margin-bottom: 17px; color: #e9d1cb; text-align: center; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale; }

.landing-page-content p a:link { color: #e9d1cb; border-bottom: 1px dotted #e9d1cb; text-decoration: none; box-shadow: none; }
.landing-page-content p a:visited { color: #e9d1cb; border-bottom: 1px dotted #e9d1cb; text-decoration: none; box-shadow: none; border: none; }
.landing-page-content p a:hover { color: #fff; border-bottom: 1px dotted #fff; border-top: none; border-right: none; border-left: none; text-decoration: none; box-shadow: none; }
.landing-page-content p a:active { color: #e9d1cb; border-bottom: 1px dotted #e9d1cb; text-decoration: none; box-shadow: none; border: none; }


/* ------ END LANDING PAGE ------- */


/* ------ BEGIN NEWS PAGE ------- */


.header-centered { float: none; display: block; }

.header-centered h1, .header-centered h1 a { float: none; font-size: 54px; color: #001491; text-align: center; margin: 8px auto -12px auto; }

.header-centered h1 a:link { color: #001491; }
.header-centered h1 a:visited { color: #001491; }
.header-centered h1 a:hover { color: #fc01c4; }
.header-centered h1 a:active { color: #001491; }

.header-centered .subheader { font-size: 37px;  color: #001491; font-weight: 100; text-align: center; letter-spacing: .02em; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale; }

.header-centered .subheader .decorative-line { float: none; display: inline; width: 133px; }

.header-centered .subheader .decorative-line img { float: none; display: inline; width: 133px; }

.navigation-centered { float: none; display: block; width: 366px; height: 56px; margin: 22px auto 0 auto; }

.general-page-content { float: none; position: relative; display: block; width: 90%; max-width: 1000px; margin: 26px auto; }

.general-page-content2 { float: none; position: relative; display: block; width: 90%; max-width: 1000px; margin: 40px auto 26px auto; }

.entry-content h2 { font-size: 38px; color: #fc01c4; letter-spacing: 2px; font-weight: normal; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale;

 margin: 20px auto; text-align: center; }

.entry-content h3 { float: left; display: block; padding: 0; width: 100%; color: #5e5e5e; font-size: 22px; line-height: 22px; }

.entry-content p { color: #5e5e5e; letter-spacing: 0; margin-bottom: 20px; text-align: justify; }

.entry-content p em, .entry-content p em strong { color: #5e5e5e; }

.entry-content blockquote { width: 85%; max-width: 850px; margin: 12px auto; text-align: justify; font-size: 18px; line-height: 27px; font-style: normal; }

p.bullet { text-indent: -14px; padding-left: 14px; line-height: 21px; text-align: left; }

p.news-info { text-indent: -12px; padding-left: 12px; line-height: 23px; text-align: left; }

.gardner-photo { float: none; display: block; width: 94%; max-width: 654px; margin: 0 auto 5px auto; text-align: center; line-height: 20px; }

.gardner-photo em { line-height: 20px; }

.gardner-photo img { margin-bottom: 3px; padding-top: 12px; }

.composer-and-performer { float: none; display: block; text-align: center; margin: 30px auto; }

.composer { float: none; display: inline-block; width: 260px; margin-right: 5px; text-align: left; }

.composer img { float: none; display: block; width: 260px; display: inline; margin-bottom: -5px;  }

.performer { float: none; display: inline-block; text-align: right; width: 384px; }

.performer img { float: none; display: block; width: 384px; height: 290px; margin-right: 5px; display: inline; margin-bottom: -5px; }

.piano-divider { text-align: center; margin: 10px 0 18px 0; }

.piano-divider img { float: none; display: block; width: 244px; margin: 0 auto; }


/* ------ END NEWS PAGE ------- */


/* ------ BEGIN BIO PAGE ------- */


.header-centered-pink { float: none; display: block; }

.header-centered-pink h1, .header-centered-pink h1 a { float: none; font-size: 54px; color: #fc07b1; text-align: center; margin: 8px auto -12px auto; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale; }

.header-centered-pink h1 a:link { color: #fc07b1; }
.header-centered-pink h1 a:visited { color: #fc07b1; }
.header-centered-pink h1 a:hover { color: #fff; }
.header-centered-pink h1 a:active { color: #fc07b1; }

.header-centered-pink .subheader { font-size: 37px;  color: #fc07b1; font-weight: 100; text-align: center; letter-spacing: .02em; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale; }

.header-centered-pink .subheader .decorative-line { float: none; display: inline; width: 133px; }

.header-centered-pink .subheader .decorative-line img { float: none; display: inline; width: 133px; }

.bio-photo { float: none; display: block; text-align: center; }

.bio-photo img { float: none; display: block; width: auto; margin: 8px auto 32px auto; }

.drop-cap { float: left; font-size: 66px; color: #f632ba; padding: 9px 10px 0 0; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale; }

.general-page-content p a:link, .general-page-content2 p a:link { color: #4d4d4d; text-decoration: none; box-shadow: none; border-bottom: 1px dotted #4d4d4d; }
.general-page-content p a:visited, .general-page-content2 p a:visited { color: #4d4d4d; text-decoration: none; box-shadow: none; border-bottom: 1px dotted #4d4d4d; }
.general-page-content p a:hover, .general-page-content2 p a:hover { color: #fc07b1; text-decoration: none; box-shadow: none; border-bottom: 1px dotted #fc07b1; }
.general-page-content p a:active, .general-page-content2 p a:active { color: #4d4d4d; text-decoration: none; box-shadow: none; border-bottom: 1px dotted #4d4d4d; }

.bio-links { float: none; display: block; text-align: center; margin: 35px auto; }

.bio-link { float: none; display: inline-block; width: auto; margin: 0 8px; }


/* ------ END BIO PAGE ------- */


/* ------ BEGIN PHOTOS PAGE ------- */

.download-instructions-mobi { display: none; }

.photos { float: none; display: block; width: 539px; margin: 30px auto; }

.photo1, .photo2, .photo3, .photo4, .photo5 { float: none; display: inline; }

.photo1 { margin: 0 20px 0 0 ; }

.photo1 img { height: 316px; margin-bottom: 20px; }

.photo2 { margin: 0 0 20px 0; }

.photo2 img { height: 316px; margin-bottom: 20px; }

.photo3 img { height: 362px; margin-bottom: 20px; }

.photo4 { margin-right: 26px; }


/* ------ END PHOTOS PAGE ------- */


/* ------ BEGIN CALENDAR PAGE ------- */


.event { padding: 17px 0 3px 100px; border-bottom: 1px solid #feb0e6; text-align: center; margin-top: -12px; }

.event-date { float: left; display: flex; justify-content: center; flex-direction: column; height: 118px; width: 118px; font-size: 19px; line-height: 22px; color: #eaebed; background: url(http://www.hengjinpark.com/wp-content/uploads/date_bground.png); margin: 0 20px; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale; }

.event-date-no-time { float: left; display: inline; padding-top: 33px; height: 118px; width: 118px; font-size: 19px; line-height: 22px; color: #eaebed; background: url(http://www.hengjinpark.com/wp-content/uploads/date_bground.png); margin: 0 20px; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale; }

.event-title { float: left; display: inline; padding-top: 18px; height: 118px; width: 50%; font-size: 24px; line-height: 25px; color: #5e5e5e; font-variant: small-caps; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale; }

.event-title-tight { float: left; display: inline; padding-top: 23px; height: 118px; width: 50%; font-size: 24px; line-height: 23px; color: #5e5e5e; font-variant: small-caps; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale; }

.event-title-two-line { float: left; display: inline; height: 118px; width: 50%; font-size: 24px; line-height: 27px; padding-top: 31px; color: #4d4d4d; font-variant: small-caps; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale; }

.event-venue { float: left; display: flex; justify-content: center; flex-direction: column; height: 118px; width: 30%; font-size: 20.7px; line-height: 25px; color: #62636d; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale; }

.event-preposition { float: none; display: inline-block; transform: skewX(-15deg); font-size: 20px; line-height: 12px; margin-bottom: 3px; }

.event-ital { float: none; display: inline-block; transform: skewX(-15deg); }

.event-date a:link { color: #eaebed; padding: 14px 0; }
.event-date a:visited { color: #eaebed; padding: 14px 0; }
.event-date a:hover { float: left; display: flex; justify-content: center; flex-direction: column; height: 118px; width: 118px; font-size: 19px; line-height: 22px; color: #fff; padding: 14px 0; background: url(http://www.hengjinpark.com/wp-content/uploads/date_bground_on.png); }
.event-date a:active { color: #eaebed; padding: 14px 0; } 

.event-date-no-time a:link { color: #eaebed; padding: 14px 0; }
.event-date-no-time a:visited { color: #eaebed; padding: 14px 0; }
.event-date-no-time a:hover { float: left; display: flex; justify-content: center; flex-direction: column; height: 118px; width: 118px; font-size: 19px; line-height: 22px; color: #fff; padding: 8px 0 14px 0; background: url(http://www.hengjinpark.com/wp-content/uploads/date_bground_on.png); margin-top: -34px; }
.event-date-no-time a:active { color: #eaebed; padding: 14px 0; } 

.event-title a:link, .event-title-tight a:link, .event-title-two-line a:link, .event-venue a:link { color: #5e5e5e; }
.event-title a:visited, .event-title-tight a:visited, .event-title-two-line a:visited, .event-venue a:visited { color: #5e5e5e; }
.event-title a:hover, .event-title-tight a:hover, .event-title-two-line a:hover, .event-venue a:hover { color: #fc07b1; }
.event-title a:active, .event-title-tight a:active, .event-title-two-line a:active, .event-venue a:active { color: #5e5e5e; }

.event-title-two-line a:link, .event-title-tight a:link, .event-title-two-line a:link, .event-venue a:link { color: #5e5e5e; }
.event-title-two-line a:visited, .event-title-tight a:visited, .event-title-two-line a:visited, .event-venue a:visited { color: #5e5e5e; }
.event-title-two-line a:hover, .event-title-tight a:hover, .event-title-two-line a:hover, .event-venue a:hover { color: #fc07b1; }
.event-title-two-line a:active, .event-title-tight a:active, .event-title-two-line a:active, .event-venue a:active { color: #5e5e5e; }

.heng-jin-bground-image { position: relative; height: 4vh; }

.heng-jin-bground-image img { position: absolute; bottom: 0; right: 0; z-index: -1000; }


/* ------ END CALENDAR PAGE ------- */


/* ------ BEGIN SAMPLES PAGE ------- */


.audio-samples { float: none; display: block; text-align: center; font-size: 18px; line-height: 24px; color: #5e5e5e; margin: 0 auto; }

.audio-samples em { color: #5e5e5e; font-size: 21px; }

.audio-sample-one-line { float: none; display: inline-block; width: 370px; height: 160px; vertical-align: top; margin: 0 15px; }

.audio-sample-two-line { float: none; display: inline-block; width: 370px; height: 160px; vertical-align: top; margin: 0 15px; }

.audio-sample-three-line { float: none; display: inline-block; width: 370px; height: 160px; vertical-align: top; margin: 0 15px; }

.audio-sample-four-line { float: none; display: inline-block; width: 370px; height: 178px; vertical-align: top; margin: 0 15px; }

.video-samples { float: none; display: block; text-align: center; font-size: 18px; line-height: 24px; color: #5e5e5e; }

.video-samples em { color: #6b6b6b; font-size: 21px; }

.video-sample { float: none; display: inline-block; width: 385px; height: 310px; vertical-align: top;  }

iframe { margin-bottom: 3px; }

.pipe { padding: 0 4px; color: #4d4d4d; }

.samples-text-small { font-size: 15px; display: block; margin-top: -21px; }

.samples-text-small-ital { font-size: 15px; display: inline-block; transform: skewX(-10deg) }

/* ------ NOTA BENE :: To modify audio controls, go to wp-includes > js > mediaelement > wp-mediaelement.min.css ------- */

.mejs-container { margin-bottom: -16px; }

.mejs-container, .mejs-embed, .mejs-embed body, .mejs-container .mejs-controls {
    background: #657cc0 !important; }
	
.mejs-container .mejs-controls { width: 70%; }

.mejs-controls .mejs-time-rail .mejs-time-total { background: #ddbcdb; }

.mejs-controls .mejs-time-rail .mejs-time-current {
    background: #ddbcdb;
}


/* ------ END SAMPLES PAGE ------- */


/* ------ BEGIN DISCOGRAPHY PAGE ------- */


.header-centered-white { float: none; display: block; }

.header-centered-white h1, .header-centered-white h1 a { float: none; font-size: 54px; color: #fff; text-align: center; margin: 8px auto -12px auto; -webkit-font-smoothing: antialiased !important; }

.header-centered-white h1 a:link { color: #fff; }
.header-centered-white h1 a:visited { color: #fff; }
.header-centered-white h1 a:hover { color: #8b8c8c; }
.header-centered-white h1 a:active { color: #fff; }

.header-centered-white .subheader { font-size: 37px;  color: #fff; font-weight: 100; text-align: center; letter-spacing: .02em; -webkit-font-smoothing: antialiased !important; }

.header-centered-white .subheader .decorative-line { float: none; display: inline; width: 133px; }

.header-centered-white .subheader .decorative-line img { float: none; display: inline; width: 133px; }

.recording, .recording-final { float: none; display: block; text-align: center; width: 690px; margin: 0 auto 30px auto; }

.recording-image { float: left; display: inline; }

.recording img, .recording-final img { float: left; margin-right: 25px; }

.recording-info { float: left; display: inline; height: 274px; padding-top: 6px; }

.recording-info p { margin-bottom: 11px; font-size: 19px; line-height: 23.3px; }

.general-page-content .recording p a:link { color: #4d4d4d; text-decoration: none; box-shadow: none; border-bottom: 1px dotted #4d4d4d; }
.general-page-content .recording p a:visited { color: #4d4d4d; text-decoration: none; box-shadow: none; border-bottom: 1px dotted #4d4d4d; }
.general-page-content .recording p a:hover { color: #0119b2; text-decoration: none; box-shadow: none; border-bottom: 1px dotted #0119b2; }
.general-page-content .recording p a:active { color: #4d4d4d; text-decoration: none; box-shadow: none; border-bottom: 1px dotted #4d4d4d; }

.recording-click p { font-size: 16px; line-height: 20px; text-indent: -12px; padding-left: 12px; }


/* ------ END DISCOGRAPHY PAGE ------- */


.footer { text-align: center; margin-bottom: 40px; }

.footer img { float: none; display: block; width: auto; margin: 0 auto; }

.footer-landing { float: none; display: block; position: absolute; bottom: 0; height: 65px; width: 100%; }

.footer-landing img { float: right; margin: 0 25px 0 0;}

.footer p a { border: none; }

.footer-divider-mobi { display: none; }

.footer-divider { margin-bottom: 20px; }

.clear-fix { clear: both; line-height: 1px; }


/* ------ BEGIN CONNECT PAGE ------- */

.connect-page-content { float: none; position: relative; display: block; width: 94%; max-width: 900px; margin: 35px auto 50px auto; text-align: center; }

.connect-intro-mobi { display: none; }

.connect-intro { float: none; display: block; text-align: center; font-size: 20px; line-height: 27px; color: #5e5e5e; margin: 20px auto 40px auto; }

.connect-intro em { font-size: 22px; }

.connect-photo-mobi { display: none; }

.connect-photo { float: left; display: inline; margin: 0 48px 0 0; }

.connect-form { float: left; display: inline; width: 480px; padding-top: 10px; }

input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required { height: 33px; background-color: #f2f2f2; color: #0220bb; border: 1px solid #b4bbe1; margin-bottom: 25px; border-radius: 6px; padding: 11px 15px; width: 70%; }

textarea.wpcf7-form-control.wpcf7-textarea { height: 248px; background-color: #f2f2f2; color: #0220bb; border: 1px solid #b4bbe1; border-radius: 6px; margin: 4px 0 14px 0; padding: 11px 15px; }

form.wpcf7-form p { margin-bottom: 2px; }

input.wpcf7-form-control.wpcf7-submit { float: right; background-color: #011a9d; font-size: 20px; letter-spacing: 3px; padding: 14px 18px 12px 21px; border-radius: 9px; text-align: center; -webkit-font-smoothing: antialiased !important; }

button:hover, button:focus, input[type="submit"]:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:focus, input[type="button"]:focus, input[type="reset"]:focus { background: #fc07b1; color: #fff; }

div.wpcf7-mail-sent-ok { border: 1px dotted #fc07b1; padding-bottom: 6px; }


/* ------ END CONNECT PAGE ------- */


/* =Mobile Structure ------------ */


@media screen and (min-width:0px) and (max-width:1200px) {
	
header { float: left; display: inline; padding-left: 25px; }

.header h1 { float: left; font-size: 52px; margin-bottom: -9px; }

.header .subheader { font-size: 39px; letter-spacing: .02em; }

.subheader-text { float: none; display: inline-block; transform: skewX(-12deg); }

.header .subheader .decorative-line { float: none; display: inline; width: 126px; }

.header .subheader .decorative-line img { width: 126px; }
	
.landing-page-content { margin: 2vh 0 0 5%; }

}

@media screen and (min-width:100vw) and (min-height:0vw) and (max-height:65vw) {

.header-centered .subheader { font-size: 37px; }

.header-centered .subheader .decorative-line img { width: 133px; }

.header-centered-pink .subheader { font-size: 37px; }

.header-centered-pink .subheader .decorative-line img { width: 133px; }

.header-centered-white .subheader { font-size: 37px; }

.header-centered-white .subheader .decorative-line img { width: 133px; }

}


@media screen and (min-width:0px) and (max-width:1000px) {

.entry-content blockquote { width: 85%; }

.event { width: 70%; padding: 0; border-bottom: 1px solid #feb0e6; text-align: center; margin: 0 auto; }

.event-date { float: none; display: block; justify-content: center; flex-direction: column; height: 118px; width: 118px; margin: 12px auto 0 auto; padding-top: 23px; }

.event-date-no-time { float: none; display: block; padding-top: 33px; height: 118px; width: 118px; font-size: 19px; line-height: 22px; color: #fff; margin: 12px auto 0 auto; }

.event-date a:link { color: #fff;  }
.event-date a:visited { color: #fff; }
.event-date a:hover { float: none; display: block; justify-content: center; flex-direction: column; height: 118px; width: 118px; margin: -23px 0 0 0; padding-top: 23px; }
.event-date a:active { color: #fff; }

.event-title { float: none; display: block; width: 100%; height: auto; margin: 0 auto 16px auto; padding-top: 5px; }

.event-title-tight { float: none; display: block; width: 100%; height: auto; margin: 0 auto 16px auto; padding-top: 5px; }

.event-title-two-line { float: none; display: block; width: 100%; height: auto; margin: 0 auto 16px auto; padding-top: 5px; }

.event-venue { float: none; display: block; height: auto; width: 100%; margin: 0 auto 18px auto; }

.audio-sample-one-line { float: none; display: inline-block; width: 370px; height: 130px; vertical-align: top; margin: 0 15px; }

.audio-sample-two-line { height: 128px; }

.audio-sample-three-line { float: none; display: inline-block; width: 370px; height: 130px; vertical-align: top; margin: 0 15px; }

.audio-sample-four-line { float: none; display: inline-block; width: 370px; height: 175px; vertical-align: top; margin: 0 15px; }

.video-samples { margin-top: 30px; }

.connect-page-content { text-aign: center; }

.connect-form { float: none; display: inline-block; width: 480px; padding: 0; margin: -20px auto 20px auto; }

.connect-photo { display: none; }

.connect-photo-mobi { float: none; display: block; margin: 25px auto 0 auto; }
	
}


@media screen and (min-width:0px) and (max-width:800px) {
	
.header { float: none; display: block; padding-left: 0; width: 386px; margin: 0 auto; }

.header .subheader .decorative-line { width: 125px; }

.header .subheader .decorative-line img { width: 125px; }

.navigation { float: left; display: block; width: 184px; height: 112px; margin: 30px 0 0 5%; }

.composer { text-align: center; margin-bottom: 15px; }

.performer { text-align: center; }
		
}

@media screen and (min-width:0px) and (max-width:700px) {

.event { width: 90%; }

.recording { float: none; display: block; width: 95%; text-align: center; margin: 0 auto 25px auto; border-bottom: 1px solid #d9d9d9; }

.recording-final { float: none; display: block; width: 95%; text-align: center; margin: 0 auto 25px auto; }

.recording-image { float: none; display: block; margin: 5px auto; text-align: center; }

.recording-image img { float: none; display: inline-block; margin: 0; }

.recording-info { float: none; display: inline-block; height: auto; margin: 0 auto 20px auto; text-align: center; }

.recording-info p { text-align: center; margin: 0 0 5px 0; }

.recording-click p { font-size: 14px; line-height: 17px; text-indent: -10px; padding-left: 10px; margin-top: 9px; }

.connect-page-content { margin-top: 20px; }

.connect-intro { margin-top: 0; }

}


@media screen and (min-width:0px) and (max-width:600px) {
	
.general-page-content { margin: 5px auto 26px auto; }

.general-page-content2 { margin: 20px auto 26px auto; }
	
.entry-content h2 { margin: 0 auto 20px auto; }
	
.navigation { float: left; display: block; width: 49px; height: 294px; margin: 30px 0 0 5%; }

.navigation-centered { width: 294px; }

.nav-icon { width: 49px; height: 45px; }

.nav-icon img { width: 49px; height: 45px; }

.landing-page-content { display: none; }

.landing-page-content-mobi { float: none; position: absolute; bottom: 0; display: block; width: 100%; text-align: center; font-size: 20px; line-height: 24px; color: #fae4e4; letter-spacing: 0; -webkit-font-smoothing: antialiased !important; background: rgba(93,37,42,.42); padding: 20px 0 24px 0; }

.landing-page-content-mobi .text-left { float: left; display: inline; height: 100%; width: 40%; }

.landing-page-content-mobi .text-right { float: left; display: inline; height: 100%; width: 60%; }

.landing-page-content-mobi p { color: #fae4e4; text-align: center; margin: 0; }

.landing-page-content-mobi a:link { color: #fae4e4; border-bottom: 1px dotted #fae4e4; }
.landing-page-content-mobi a:visited { color: #fae4e4; border-bottom: 1px dotted #fae4e4; }
.landing-page-content-mobi a:hover { color: #fff; border-bottom: 1px dotted #fff; }
.landing-page-content-mobi a:active { color: #fae4e4; border-bottom: 1px dotted #fae4e4; }

.entry-content h3 { float: none; text-align: center; }

.photos { float: none; display: block; width: 95%; margin: 30px auto; text-align: center; }

.photo1, .photo2, .photo3, .photo4, .photo5 { float: none; display: inline-block; }

.photo1 { margin: 0 0 12px 0; }

.photo1 img { margin: 0; }

.photo2 { margin-bottom: 12px; }

.photo2 img { margin: 0; }

.photo3 { margin-bottom: 12px; } 

.photo3 img { margin: 0; height: auto; }

.photo4 { margin: 0 0 12px 0; } 

.photo4 img { margin: 0; }

.event { width: 100%; }

.footer-landing { height: 152px; }

.footer-landing img { float: right; margin: 0 25px 0 0;}
		
}

@media screen and (min-width:0px) and (max-width:500px) {
	
.entry-content blockquote p { text-align: left; }

.connect-form { float: none; display: inline-block; width: 95%; padding: 0; margin: -20px auto 20px auto; }

.connect-intro { display: none; }

.connect-intro-mobi { float: none; display: block; text-align: center; font-size: 20px; line-height: 25px; color: #5e5e5e; margin: 20px auto 40px auto; }

.connect-intro-mobi em { font-size: 22px; }

.download-instructions { display: none; }

.download-instructions-mobi { display: block; }
	
}

@media screen and (min-width:0px) and (max-width:450px) {

.header-centered h1, .header-centered h1 a { float: none; font-size: 49px; margin: 8px auto -12px auto; }

.header-centered .subheader { font-size: 33px; }

.header-centered .subheader .decorative-line img { width: 127px; }

.header-centered-pink h1, .header-centered-pink h1 a { float: none; font-size: 49px; margin: 8px auto -12px auto; }
 
.header-centered-pink .subheader { font-size: 33px; }

.header-centered-pink .subheader .decorative-line img { width: 127px; }

.header-centered-white h1, .header-centered-white h1 a { float: none; font-size: 49px; margin: 8px auto -12px auto; }
 
.header-centered-white .subheader { font-size: 33px; }

.header-centered-white .subheader .decorative-line img { width: 127px; }

.performer { width: 90%; }

.performer img { width: 100%; max-width: 384px; height: auto; margin: 0; }

.entry-content blockquote { width: 100%; }

.footer-divider { display: none; }

.footer-divider-mobi { display: block; margin-bottom: 20px; }
	
}

@media screen and (min-width:0px) and (max-width:400px) {
	
.header h1 { float: none; font-size: 44px; margin: 8px auto -12px auto; text-align: center; }

.header-centered h1, .header-centered h1 a { float: none; font-size: 44px; margin: 8px auto -12px auto; }

.header .subheader { font-size: 30px; }

.header-centered .subheader { font-size: 30px; }

.header .subheader .decorative-line img { width: 115px; }

.header-centered .subheader .decorative-line img { width: 115px; }

.header-centered-pink h1, .header-centered-pink h1 a { float: none; font-size: 44px; margin: 8px auto -12px auto; }

.header-centered-pink .subheader { font-size: 30px; }

.header-centered-pink .subheader .decorative-line img { width: 115px; }

.header-centered-white h1, .header-centered-white h1 a { float: none; font-size: 44px; margin: 8px auto -12px auto; }

.header-centered-white .subheader { font-size: 30px; }

.header-centered-white .subheader .decorative-line img { width: 115px; }
	
.header { float: none; display: inline; padding-left: 0; text-align: center; }

.subheader-text { float: none; display: inline-block; transform: skewX(-12deg); }

.subheader .decorative-line { float: none; display: inline; width: 20px; }

.subheader .decorative-line img { width: 107px; }
	
.navigation { margin: 10px 0 0 3%; }
	
.landing-page-content-mobi { font-size: 17px; line-height: 21px; padding: 10px 0 15px 0; }

.bio-photo img { width: 90%; max-width: 360px; margin: 12px auto 32px auto; }

.bio-link { margin: 0; }

.audio-samples { font-size: 16px; line-height: 21px; margin: 20px auto 0 auto; }

.audio-samples em { font-size: 18px; }

.general-page-content .audio-samples { width: 100%; }

.audio-sample-one-line { width: 95%; margin: 0 auto; height: 115px; }

.audio-sample-two-line { width: 95%; margin: 0 auto; height: 115px; }

.audio-sample-three-line { width: 95%; margin: 0 auto; height: 120px; }

.audio-sample-four-line { width: 95%; margin: 0 auto; height: 160px; }

.video-samples { margin-top: 0; font-size: 16px; line-height: 21px;}

.video-samples em { font-size: 18px; }

.video-sample { width: 95%; height: 270px; margin: 8px auto; }

.recording-info p { font-size: 18px; line-height: 22px; }

.recording-info p em { font-size: 20px; line-height: 22px; }

input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required { width: 100%; margin-bottom: 15px; }

.footer-landing { height: 128px; }
	
}

@media screen and (min-width:0px) and (max-width:380px) {
	
.landing-page-content-mobi .text-left { float: none; display: block; height: 100%; width: 100%; }

.landing-page-content-mobi .text-right { float: none; display: block; height: 100%; width: 100%; margin-top: 12px; }

}

@media screen and (min-width:0px) and (max-width:360px) {
	
.bio-link img { width: 90%; max-width: 100px; height: auto; }

.footer-divider-mobi { width: 90%; margin: 0 auto 20px auto; }
	
}

@media screen and (min-width:0px) and (max-width:340px) {
	
.header h1, .header-centered h1, .header-centered h1 a { float: none; font-size: 40px; margin: 8px auto -12px auto; }

.header .subheader { font-size: 27px; }

.header .subheader .decorative-line img { width: 104px; }

.header-centered .subheader { font-size: 27px; }

.header-centered .subheader .decorative-line img { width: 104px; }
	
.header-centered-pink h1, .header-centered-pink h1 a { float: none; font-size: 40px; margin: 8px auto -12px auto; }

.header-centered-pink .subheader { font-size: 27px; }

.header-centered-pink .subheader .decorative-line img { width: 104px; }

.header-centered-white h1, .header-centered-white h1 a { float: none; font-size: 40px; margin: 8px auto -12px auto; }

.header-centered-white .subheader { font-size: 27px; }

.header-centered-white .subheader .decorative-line img { width: 104px; }

.recording-info p { font-size: 16px; line-height: 20px; }

.recording-info p em { font-size: 18px; line-height: 20px; }

}