/* ==========================================================================
   Desktop
   ========================================================================== */

@media (min-width: 1000px) {
	div.maingalleryleftarrow{opacity:0.5;position:absolute; left:0px; top:0px; width:50%; height:100%; background-image:url(/images/mainimg_left_arrow_on.png); background-size:55px 70px; background-position:left center; background-repeat:no-repeat;-webkit-tap-highlight-color: transparent; }
	div.maingalleryrightarrow{opacity:0.5;position:absolute; right:0px; top:0px;width:50%; height:100%; background-image:url(/images/mainimg_right_arrow_on.png); background-size:55px 70px; background-position:right center; background-repeat:no-repeat;-webkit-tap-highlight-color: transparent;}
	div.maingalleryleftarrow:hover,div.maingalleryrightarrow:hover{cursor:pointer;}

	div.maingalleryvideobox{float:left; width:19%; height:170px; margin:0px 1% 25px 0px; font-size:12px; line-height:1.2em; overflow:hidden; }
	div.maingalleryvideobox:hover{cursor:pointer;}
	div.maingallerynvideothumbnail{float:left; width:100%; height:130px; overflow:hidden; margin:0px 0px 10px 0px; background-repeat:no-repeat; background-position:center top; background-size:cover;}
	
}



/* ==========================================================================
   Mobile
   ========================================================================== */
@media (min-width: 0px) and (max-width: 999px){
	div.maingalleryleftarrow{opacity:0.5;position:absolute; left:0px; top:0px; width:50%; height:100%; background-image:url(/images/mainimg_left_arrow_on.png); background-size:30px 44px; background-position:left 45%; background-repeat:no-repeat;-webkit-tap-highlight-color: transparent; }
	div.maingalleryrightarrow{opacity:0.5;position:absolute; right:0px; top:0px;width:50%; height:100%; background-image:url(/images/mainimg_right_arrow_on.png); background-size:30px 44px;background-position:right 45%; background-repeat:no-repeat;-webkit-tap-highlight-color: transparent;}
	div.maingalleryleftarrow:hover,div.maingalleryrightarrow:hover{cursor:pointer;}

	div.maingalleryvideobox{float:left; width:47%; height:165px; margin:0px 3% 15px 0px; font-size:12px; line-height:1.2em; overflow:hidden;}
		div.maingalleryvideobox:hover{cursor:pointer;}
	div.maingallerynvideothumbnail{float:left; width:100%; height:130px; margin:0px 0px 6px 0px;  background-repeat:no-repeat; background-position:center top; background-size:cover;}

}

/* ==========================================================================
   Share CSS
   ========================================================================== */
div.maingallerywrap{float:left; position:relative; border:solid 1px #666; width:100%; height:720px; background-image:url(/images/mainloading_gif.gif); background-position:center center; background-repeat:no-repeat;}
div.maingallerypict{position:absolute; width:100%; height:85%; margin-top:20px; background-position:center center; background-size:contain; background-repeat:no-repeat;}

div.maingallerydes{position:absolute; width:100%;  bottom:35px; left:0px; font-weight:bold; font-size:14px; text-align:center; background-color:#FFF;}
div.maingallerynum{position:absolute; width:100%;  bottom:15px; left:0px; font-weight:bold; font-size:14px; text-align:center; background-color:#FFF;}

div.maingallerythumbnail{float:left; width:100%; margin:20px 0px 20px 0px;}
div.maingallerythumbnail img{width:100px; height:auto; float:left; margin:0px 10px 10px 0px;}

/*Overlay*/
div.maingallerywrapoverlay{position:absolute; width:100%; height:100%; background-image:url(/images/mainloading_gif.gif); background-position:center center; background-repeat:no-repeat;}

/*Youtube Embedded Full Width Responsive for video overlay
How this works: 
 - The container element is given a zero height and a percentage bottom padding. 
 - The percentage bottom padding is a percentage of the container width, so that gives it a fixed aspect ratio. 
 - But in order to get the iframe to show up inside the zero-height container, you need to make the container relative and the iframe absolute, positioned inside the div.
*/
.mainyoutubewrap{position:absolute; width:100%; height:100%;}
.mainyoutubeiframebox {position:absolute;width:100%;height:0; padding-bottom: 56.25%; margin-top:-27%; top:50%;}
.mainyoutubevideoclass {position:absolute;top:0;left: 0;width: 100%;height: 100%; }