/****** FILE: themes/gamry/css/pages/VideoGalleryPage.css *****/
.ui-tabs .ui-tabs-nav li 		{ font-size:85%; }

#tabs h2 						{ margin-top: 50px; color: #003F69; font-size: 36px; border-bottom: solid 1px #003F69; }

.videos							{ list-style:none; margin:0; padding:0; }
.videos:after					{ content:" "; display:block; height:0; clear:both; zoom:1; visibility:hidden; }
.videos li						{ margin:2% 0 0 2%; padding:10px; width:32%; float:left; border:1px solid #ddd; }
.videos li *					{ max-width:100%; }
.videos li a.yt-img				{ display:block; position:relative; box-shadow:0 0 3px 0 rgba(0,0,0,0.5); }
.videos li a.yt-img:before		{ display:block; position:absolute; content:''; top:0; right:0; bottom:0; left:0; z-index:1; background:rgba(0,0,0,0.2) url(/themes/gamry/images/play-icon.png) center center no-repeat; background-size:20% auto; 
	-webkit-transition: background 200ms ease;
	-moz-transition: background 200ms ease;
	-ms-transition: background 200ms ease;
	-o-transition: background 200ms ease;
	transition: background 200ms ease; }
.videos li a.yt-img:hover		{ text-decoration:none; }
.videos li a.yt-img:hover:before { background-color:rgba(0,0,0,0); }
.videos li .content p:last-child	{ margin:0; }
.videos li .yt-content				{ display:none; }

#video_popup 						{ max-width:100%; width:800px; }
#video_popup .yt-content			{ padding:20px 20px 0; }
#video_popup .yt-content:empty		{ display:none; }
#video_popup h3						{ }
#video_popup .video-holder			{ position:relative; }
#video_popup .video-holder:before	{ display:block; content:''; padding-top:56.25%; }
#video_popup iframe					{ width:100% !important; height:100% !important; display:block; position:absolute; z-index:1; top:0; left:0; }

@media(min-width:901px){
	.videos li:nth-child(3n+1) 		{ margin-left:0; clear:both; }	
}

@media (max-width:900px){
	.videos li					{ width:49%; }
	.videos li:nth-child(2n+1) 		{ margin-left:0; clear:both; }	
}

@media (max-width:549px){
	.videos li					{ margin-left:0; width:100%; clear:both; height:auto !important; }
}

.embedded_video 				{ width: 100%; max-width: 560px; float: left; margin-right: 20px; margin-bottom: 25px; box-shadow: 3px 3px 5px 1px rgba(0,0,0,0.7); overflow: hidden; }
.video-transcription 			{ clear: both; }

@media (max-width:1200px){
	.content 				{ clear: both; }
	.embedded_video			{ max-width:100%; }

}

.video-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.video-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}