﻿#modalVideo {
	width:100%;
    height: 100%;
	margin-left:auto;
	margin-right:auto;
	padding: 5px;
	border: solid 1px #e4e3e1;
	background-color:#fff;
	z-index:90001; /* places the modal dialog on top of everything else */
	position:fixed;
	top:0;
	left:0;
	display:none; 
}
#modalVideo h1 {
	text-align:center;
}


.screen-reader-offscreen {
	position:absolute;
	left:-999px;
	width:1px;
	height:1px;
	top:auto;
}



#modalOverlayVideo {
	width:100%;
	height:100%;
	z-index:90000; /* places the modal overlay between the main page and the modal dialog*/
	background-color:#000;
	opacity:.90;
	position:fixed;
	top:0;
	left:0;
	display:none;
	margin:0;
	padding:0;
}

#modalVideo {
	width:100%;
    height: 100%;
	margin-left:auto;
	margin-right:auto;
	padding:1em;
	border: 0;
	background: transparent;
	z-index:90003; /* places the modal dialog on top of everything else */
	position:fixed;
	top:0;
	left:0%;
	display:none;
}

#modalVideo > div {height: 100%;}

#modalVideo h1 {
	text-align:center;
}

#modalVideo div.linkClose {position: absolute; top: 0; right: 0; z-index: 9009;}
#modalVideo div.linkClose a {padding-top: .50em; font-size: 1.5em; color: #fa841a;}
#modalVideo div.linkClose a span.text {width: 1px; height: 1px; overflow: hidden; display:block; left: -9999em;}
#modalVideo div.linkClose a:before {content: 'X'; font-size: 1em; font-weight: bold; float: right; display: inline-block;}
#modalVideo div.linkClose a:hover, .header ul.navGlobal li.linkClose a:active, .header ul.navGlobal li.linkClose a:focus {color: #272a68;}


#modalVideo .galleryWrap {height: 100%; position: relative;}

#modalVideo .sliderContainer {}

a.galleryCaptionWrap {width: 100%; height: 100%; display: block; position: absolute; left: 0; bottom: 0; }
a.galleryCaptionWrap .galleryCaption {width: 100%; height: 50%; position: absolute; bottom: 0; text-align: center;}
a.galleryCaptionWrap .galleryCaption .caption {/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+50&0.5+0,1+100 */
background: -moz-linear-gradient(left,  rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.75) 50%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.75) 50%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.75) 50%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80000000', endColorstr='#000000',GradientType=1 ); /* IE6-9 */
width: 50%; margin: 0 25%; position: absolute; bottom: 1em;
padding: 1em; color: #fff; opacity: 0;-webkit-transition: all 0.5s ease; transition: all 0.5s ease;}

a.galleryCaptionWrap:hover .galleryCaption .caption, 
a.galleryCaptionWrap:active .galleryCaption .caption, 
a.galleryCaptionWrap:focus .galleryCaption .caption {opacity: 1;}

/* 600 and below */

@media only screen
and (max-width:600px) {

#modalVideo {width: 100%; margin: 0; top: 0; left: 0;}
}


/* 1024 and below and landscape */

@media only screen
and (max-width: 1024px) 
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape)  {

#modalVideo {width: 100%; margin: 0; top: 0; left: 0;}


}


