/*  Theme 64 Full HD
Media: YouTube, Google Calendar, Picture Style
********************  */



/* YouTube Frame */
.YouTubeFrame { margin: 10px auto; padding:0 auto; text-align: center; }
.YouTubeFrame:after { display: table; content: ""; line-height: 0; clear: both; }
.YouTubeFrame iframe { overflow: auto; }
.YouTubeFrame .YouTubeFrame-img { margin-top: -700px; opacity: 0; }
.YouTubeFrame .YouTubeFrame-item iframe,
.YouTubeFrame .YouTubeFrame-img img { width: 80%; max-height: 700px; height: 37vw; }

.span9 .YouTubeFrame .YouTubeFrame-img { margin-top: -588px; }
.span9 .YouTubeFrame .YouTubeFrame-item iframe, .span9 .YouTubeFrame .YouTubeFrame-img img { width: 90%; max-height: 588px; height: 31vw; }
/*  END YouTube Frame */

/* YouTube Frame */
.youtube-frame { margin: 0 auto; padding:0 auto; text-align: center; }
.youtube-frame iframe { overflow: auto; }
.youtube-frame .youtube-frame-full iframe { width: 90%; max-height: 550px; height: 50vw; }
.youtube-frame .youtube-frame-center iframe { width: 90%; max-height: 400px; height: 37vw; }
.youtube-frame .youtube-frame-right iframe { width: 100%; }
/*  END YouTube Frame */

/* Google Calendar Frame */
.googlecal-frame { margin: 0 auto; padding:0 auto; text-align: center; }
.googlecal-frame iframe { width: 100%; height: 290px; overflow: auto; }
/*  END Google Calendar Frame */

/* Fix Social Share */
.social-share { padding-top: 5px; border-top: 1px solid #EFEFEF; }
.social-share li { display: inline;}
.social-share .share-label { font-weight: bold; }
/* END Fix Social Share */

/* ------------------------------------------ Image Style ------------------------------------------ */

/* Images Style */
#img-respon { margin: 0; }
.img-respon-img img { z-index: 50; margin: 2px; border-radius: 10px; width: 99%; border: 1px solid #CCC; box-shadow: 0 0 9px #bbb; }
.img-respon-img img:hover { -webkit-transition: all .4s; }
.title-respon { margin: 5px; padding: 5px; font-size: 150%; font-weight: bold; line-height: 125%; color: #008b46; text-align: center; }
.detial-respon { margin: 5px auto; padding: 10px; width: 95%; font-size: 100%; color: #333; border: 1px solid #ccc; border-top: 5px solid #CCCC99; background: #F5F5F5; box-shadow: 3px 3px 3px #CCC; border-radius: 15px; }
.img-respon-st { width: 99.427%; }
.img-respon-nd-hz img, .img-respon-vt-c1, .img-respon-vt-c2, .img-respon-vt-c1v2, .img-respon-rd img { float: left; }
.img-respon-vt-c1 { width: 47%; /* 46.15%; */ }
.img-respon-vt-c2 { width: 52.25%; /* 52.074%; */ }
.img-respon-vt-c1v2 {	width: 65.65%; }
.img-respon-nd-hz img { width: 48.75%; }
.img-respon-rd img { width: 32.25%; }
/* END Images Style */

/* ------------------------------------------ END Image Style ------------------------------------------ */

/* ------------------------------------------ Page Staff ------------------------------------------ */

/* Page Staffs */
.Page-Staffs { margin: 0 auto; padding: 5px; border-top: 1px solid #FFF; border-left: 5px solid #EFEFEF; border-bottom: 1px solid #cfcfcf; background: #fcfcfc; }
.Page-Staffs:nth-child(even) { background: #f5f5f5; border-left: 5px solid #7dd0b6; /* #ccc; */ }
.Page-Staffs:hover { background: #EEE; }
.Page-Staffs .Page-Staffs-Image { float: left; padding: 5px; min-width: 18.75%; text-align: center; }
.Page-Staffs .Page-Staffs-Image img { padding: 2px; width: 125px; border: 1px solid #FFF; box-shadow: 0 0 9px #CCC; }
.Page-Staffs:hover .Page-Staffs-Image img { box-shadow: 0 0 9px #7dd0b6; }
.Page-Staffs .Page-Staffs-Detials { float: left; padding: 5px; width: 77%;  }
.Page-Staffs .Page-Staffs-Name { padding: 5px; width: 99%; font-size: 150%; line-height: 100%; font-weight: bold; color: #555; /* rgb(0, 140, 180); */ border-bottom: 3px solid #7dd0b6; /* rgb(0, 140, 180); */ }
.Page-Staffs .Page-Staffs-Position { padding: 5px; width: 99%; font-size: 125%; line-height: 125%; font-weight: bold; color: #555; }
.Page-Staffs .Page-Staffs-Desc { padding: 5px 5px 2px 5px; width: 100%; font-size: 90%; color: #333; }
.Page-Staffs .Page-Staffs-Title { font-size: 100%; font-weight: bold; color: #000; }
.Page-Staffs .ClearBoth-I { clear: both; height: 1px; }
.Page-Staffs .Image-Curve img { border-radius: 10%; }
.Page-Staffs .Image-CurveII img { border-radius: 20px 0 20px 0; }
.Page-Staffs .Image-CurveIII img { border-radius: 50%; }
/* END Page Staffs */

/* ------------------------------------------ END Page Staff ------------------------------------------ */

/* Image and Caption */
.img-caption-Container { margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; }
.img-caption-item { float:left; position: relative; margin: 20px 40px; width: 43%; }
.img-caption-item .img-caption-img img { width: 100%; border: 1px solid #FFFFFF; border-radius: 9px; overflow: hidden; box-shadow: 0 0 3px #dddddd; }
.img-caption-item .img-caption-txt { margin: 0; padding: 10px 5px; font-size: 100%; text-align: center; color: #444; line-height: 100% !important; text-shadow: 1px 1px 1px #bbb; }
.img-caption-item .img-caption-txt a, .img-caption-item .img-caption-txt a:visited { color: #333333; text-decoration: none; }

.three-col > .img-caption-item { margin: 20px 30px; width: 28%; }

.span9 .img-caption-item { width: 42.75%; }
.span9 .three-col > .img-caption-item { margin: 20px 30px; width: 28.05%; }
/* END Image and Caption */



@media only screen and (min-width: 1680px) {}

@media only screen and (min-width: 1441px) and (max-width: 1680px) {

/* YouTube Frame */
.YouTubeFrame .YouTubeFrame-img { margin-top: -680px; }
.YouTubeFrame .YouTubeFrame-item iframe,
.YouTubeFrame .YouTubeFrame-img img { width: 80%; max-height: 680px; height: 44vw; }

.span9 .YouTubeFrame .YouTubeFrame-img { margin-top: -630px; }
.span9 .YouTubeFrame .YouTubeFrame-item iframe, .span9 .YouTubeFrame .YouTubeFrame-img img { width: 97%; max-height: 630px; height: 36vw; }
/*  END YouTube Frame */

/* Image and Caption */
.img-caption-item, .span9 .img-caption-item { width: 41.7%; }
.three-col > .img-caption-item, .span9 .three-col > .img-caption-item { margin: 20px 30px; width: 27%; }
/* END Image and Caption */

}

@media only screen and (min-width: 1281px) and (max-width: 1440px) {

/* YouTube Frame */
.YouTubeFrame .YouTubeFrame-img { margin-top: -700px; }
.YouTubeFrame .YouTubeFrame-item iframe,
.YouTubeFrame .YouTubeFrame-img img { width: 85%; max-height: 700px; height: 44vw; }

.span9 .YouTubeFrame .YouTubeFrame-img { margin-top: -590px; }
.span9 .YouTubeFrame .YouTubeFrame-item iframe, .span9 .YouTubeFrame .YouTubeFrame-img img { width: 97%; max-height: 590px; height: 37vw; }
/*  END YouTube Frame */

/* Image and Caption */
.img-caption-item, .span9 .img-caption-item { width: 40.75%; }
.three-col > .img-caption-item { margin: 20px 30px; width: 27%; }
.span9 .three-col > .img-caption-item { margin: 20px 30px; width: 26.9%; }
/* END Image and Caption */

}

@media only screen and (min-width: 1025px) and (max-width: 1280px) {

/* YouTube Frame */
.YouTubeFrame .YouTubeFrame-img { margin-top: -49vw; }
.YouTubeFrame .YouTubeFrame-item iframe,
.YouTubeFrame .YouTubeFrame-img img { width: 80%; max-height: 630px; height: 40vw; }

.span9 .YouTubeFrame .YouTubeFrame-img { margin-top: -45vw; }
.span9 .YouTubeFrame .YouTubeFrame-item iframe, .span9 .YouTubeFrame .YouTubeFrame-img img { width: 97%; max-height: 570px; height: 36vw; }
/*  END YouTube Frame */

/* Image and Caption */
.img-caption-item, .span9 .img-caption-item, .span9 .three-col > .img-caption-item { margin: 20px; width: 44%; }
.three-col > .img-caption-item { margin: 20px; width: 29%; }
/* END Image and Caption */

}

@media only screen and (min-width: 769px) and (max-width: 1024px) {

/* YouTube Frame */
.YouTubeFrame .YouTubeFrame-img { margin-top: -63vw; }
.YouTubeFrame .YouTubeFrame-item iframe,
.YouTubeFrame .YouTubeFrame-img img { width: 97%; max-height: 650px; height: 52vw; }

.span9 .YouTubeFrame .YouTubeFrame-img { margin-top: -47vw; }
.span9 .YouTubeFrame .YouTubeFrame-item iframe, .span9 .YouTubeFrame .YouTubeFrame-img img { width: 97%; max-height: 485px; height: 39vw; }
/*  END YouTube Frame */

/* Image and Caption */
.img-caption-item, .span9 .img-caption-item, .span9 .three-col > .img-caption-item { margin: 20px; width: 42%; }
.three-col > .img-caption-item { margin: 20px; width: 27%; }
/* END Image and Caption */

}

@media only screen and (min-width: 1200px) { }

@media (max-width: 1199px) { }

@media only screen and (min-width: 769px) and (max-width: 823px) {}

@media only screen and (min-width: 769px) and (max-width: 979px) {

/* YouTube Frame */
.YouTubeFrame .YouTubeFrame-img { margin-top: -48vw; }
.YouTubeFrame .YouTubeFrame-item iframe,
.YouTubeFrame .YouTubeFrame-img img { width: 75%; max-height: 470px; height: 41vw; }

.span9 .YouTubeFrame .YouTubeFrame-img { margin-top: -47vw; }
.span9 .YouTubeFrame .YouTubeFrame-item iframe, .span9 .YouTubeFrame .YouTubeFrame-img img { width: 97%; max-height: 460px; height: 39vw; }
/* END YouTube Frame */

/* ------------------------------------------ Image Style ------------------------------------------ */

/* Images Style */
.img-respon-rd img { width: 32.15%; }
/* END Images Style */

/* ------------------------------------------ END Image Style ------------------------------------------ */

}

@media (max-width: 768px) { }

@media only screen and (min-width: 481px) and (max-width: 768px) {

/* YouTube Frame */
.youtube-frame .youtube-frame-full iframe,
.youtube-frame .youtube-frame-center iframe,
.youtube-frame .youtube-frame-right iframe { /* max-width: 480px;  min-height: 360px; */ max-width: 75%; max-height: 360px; height: 47vw; }
/* END YouTube Frame */

/* Google Calendar Frame */
.googlecal-frame iframe { max-width: 90%; min-height: 400px; }
/* END Google Calendar Frame */

/* YouTube Frame */
.span9 .YouTubeFrame .YouTubeFrame-img, .YouTubeFrame .YouTubeFrame-img { margin-top: -47.6vw; }
.span9 .YouTubeFrame .YouTubeFrame-item iframe, .YouTubeFrame .YouTubeFrame-item iframe,
.span9 .YouTubeFrame .YouTubeFrame-img img, .YouTubeFrame .YouTubeFrame-img img { max-width: 75%; max-height: 360px; height: 47vw; }
/* END YouTube Frame */

/* ------------------------------------------ Image Style ------------------------------------------ */

/* Images Style */
.img-respon-nd-hz img { width: 48.5%; }
.img-respon-rd img { width: 32%; }
/* END Images Style */

/* ------------------------------------------ END Image Style ------------------------------------------ */

/* ------------------------------------------ Page Staff ------------------------------------------ */

/* Page Staffs */
.Page-Staffs .Page-Staffs-Detials { float: left; padding: 5px; width: 71%; }
/* END Page Staffs */

/* ------------------------------------------ END Page Staff ------------------------------------------ */

/* Image and Caption */
.img-caption-item, .span9 .img-caption-item, .span9 .three-col > .img-caption-item { margin: 20px; width: 42%; }
.three-col > .img-caption-item { margin: 20px; width: 44%; }
/* END Image and Caption */

}

@media only screen and (min-width: 668px) and (max-width: 768px) { }

@media only screen and (min-width: 481px) and (max-width: 667px) {

/* Image and Caption */
.img-caption-item, .three-col > .img-caption-item, .span9 .img-caption-item, .span9 .three-col > .img-caption-item { margin: 20px; width: 41%; }
/* END Image and Caption */

}

@media only screen and (max-width: 480px) {

/* YouTube Frame */
.youtube-frame .youtube-frame-full iframe,
.youtube-frame .youtube-frame-center iframe,
.youtube-frame .youtube-frame-right iframe { width: 90%; /* height: 240px; */ max-height: 240px; height: 51vw; }
/* END YouTube Frame */

/* Google Calendar Frame */
.googlecal-frame { display: none;}
/* END Google Calendar Frame */

/* YouTube Frame */
.YouTubeFrame .YouTubeFrame-img, .span9 .YouTubeFrame .YouTubeFrame-img { margin-top: -51.25vw; }
.YouTubeFrame .YouTubeFrame-item iframe, .span9 .YouTubeFrame .YouTubeFrame-item iframe,
.YouTubeFrame .YouTubeFrame-img img, .span9 .YouTubeFrame .YouTubeFrame-img img { width: 90%; max-height: 240px; height: 51vw; }
/* END YouTube Frame */

/* ------------------------------------------ Image Style ------------------------------------------ */

/* Images Style */
#img-respon { margin: 0 10px; }
.img-respon-nd-hz img, .img-respon-vt-c1, .img-respon-vt-c2, .img-respon-rd img { float: none; }
.img-respon-vt-c1 { width: 100%; }
.img-respon-vt-c2 { width: 100%; }
.img-respon-vt-c1v2 { width: 100%; }
.img-respon-nd-hz img { width: 99%; }
.img-respon-rd img { width: 99%; }
.detial-respon { width: 92%; }
/* END Images Style */

/* ------------------------------------------ END Image Style ------------------------------------------ */

/* ------------------------------------------ Page Staff ------------------------------------------ */

/* Page Staffs */
.Page-Staffs, .Page-Staffs:nth-child(even) { border-left: none; }
.Page-Staffs .Page-Staffs-Image img { width: 150px; }
.Page-Staffs .Page-Staffs-Image, .Page-Staffs .Page-Staffs-Detials { float: none; width: 96%; }
.Page-Staffs .Page-Staffs-Detials .Page-Staffs-Name, .Page-Staffs .Page-Staffs-Detials .Page-Staffs-Position { text-align: center; }
/* END Page Staffs */

/* ------------------------------------------ END Page Staff ------------------------------------------ */

/* Image and Caption */
.img-caption-item, .three-col > .img-caption-item, .span9 .img-caption-item, .span9 .three-col > .img-caption-item { margin: 8px; width: 96%; }
.img-caption-item .img-caption-item-txt { font-size: 100%; min-height: 60px; }
/* END Image and Caption */

}

@media only screen and (max-width: 360px) {

/* Image and Caption */
.img-caption-item, .three-col > .img-caption-item, .span9 .img-caption-item, .span9 .three-col > .img-caption-item { margin: 8px; width: 89%; }
.img-caption-item .img-caption-txt { font-size: 100%; min-height: 60px; }
/* END Image and Caption */

}