@charset "utf-8";

/* Videos width:549px; width:564px; */
.video-home {width:560px; margin:0 auto;}
.video-wrapper {width:80%; margin:20px auto;}

.video-gallery {display:grid; grid-template-columns: auto auto auto; justify-items:stretch; grid-gap:20px 10px; width:80%; margin:20px auto 30px;}
.video-gallery div {text-align:center;}
.video-album div, .video-preview div {display:inline-block; padding:6%; margin:0 auto; border:#CCC 1px solid; height:90%;}
.video-album p, .video-preview p {margin:4px auto;}
.video-album img, .video-preview img {border:1px solid #CCC;}

.video-album div {width:122px;}
.video-album img {width:120px; height:120px;}

.video-preview div {width:142px;}
.video-preview img {width:140px; height:78px;}

.video-play {margin:20px auto; padding:8px 10px; text-align:center;}
.video-play iframe {width:80%;}
.video-dscr {margin:6px auto 20px; width:80%;}

@media screen and (max-width:640px)  {
    .video-gallery {grid-template-columns: auto auto; width:90%;}
    .video-preview div {width:120px;}
    .video-preview img {width:120px; height:67px;}
    .video-play iframe, .video-play video {width:90%; height:auto;}
    .video-dscr {width:90%;}
}

.video-text { text-align: left; text-indent: 20px; font-size: 14px; margin: 10px 0 20px; padding: 20px; font-family :  verdana, arial, geneva, sans-serif; background-color:#EEE; border:#CCC 1px solid;border-top:#CCC 6px solid; border-radius: 0 0 16px 16px; }
.video-clear { clear:both; }

/* ================= carousel ================= */
.video-carousel-wrapper {display:grid; grid-template-columns:32px auto 32px; justify-items:center; align-items:center; margin:8px auto 30px; padding:6px;}
.video-carousel { width:578px; padding:12px 8px 8px; background-color:#EEE; border-radius:6px; box-shadow: 0 0 10px rgba(0,0,0,0.5);}
.video-carousel div { overflow: hidden; padding:0; margin:0 auto; }
.video-carousel ul { margin:0; padding:0; margin-left:0px;
	-webkit-transition: margin-left 0.5s linear;
    -moz-transition: margin-left 0.5s linear;
    -o-transition: margin-left 0.5s linear;
    -ms-transition: margin-left 0.5s linear; 
	transition: margin-left 0.5s linear; }
.video-carousel li { float:left; display:block; margin:0; padding:0; font-size:12px; text-align:center; vertical-align:top; }
.video-carousel li p.prst { font-size:10px; color:#666; margin:0; text-indent:14px;}
.video-carousel li img { border:#CCC 2px solid; }
.video-carousel li img.video-carousel-on { border:#F00 2px solid;}
.video-carousel li p.exp { padding:2px 6px; }
.video-carousel-wrapper .startGo, .video-carousel-wrapper .stopGo { cursor: pointer; 
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease; 
	transition: all 0.5s ease; }
.video-carousel-wrapper .startGo {opacity:1; visibility:visible;}
.video-carousel-wrapper .stopGo {opacity:0; visibility:hidden;}
@media screen and (max-width:640px)  {
    .video-carousel-wrapper {display:none;}
}