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

@media (min-width: 1000px) {
	/*Video*/
	a.mainvideothumbnail{float:left; width:320px; height:180px; margin:0px 10px 0px 0px;}
	a.mainvideothumbnail img{width:100%; height:auto;}

}

/* ==========================================================================
   Mobile
   ========================================================================== */
@media (min-width: 0px) and (max-width: 999px){
	/*Video*/
	a.mainvideothumbnail{float:left; width:calc(50% - 10px - 10px ); margin:10px 10px 10px 10px;}
	a.mainvideothumbnail img{width:100%; height:auto;}

}

/* ==========================================================================
   Share CSS
   ========================================================================== */


/*Videos in single page*/
div.mainvideobox{float:left; position:relative; width:100%; height:0px; padding-bottom:56.25%; background-repeat:no-repeat;background-size:cover; margin:20px 0px 20px 0px;} /*16:9 ratio*/
div.mainvideoplaybutton{position:absolute; width:100%; height:100%; display:flex;justify-content: center;align-items: center;}
div.mainvideoplaybutton img{width:80px; height:80px; opacity:0.7;}
div.mainvideoplaybutton img:hover{opacity:1;}
div.mainvideoloadcontent {position:absolute; width:100%; height:100%; display:none;}

div.mainvideooverlaybox{position:absolute; top:0px; left:0px; width:100%; height:calc(100% - 120px); }
div.mainvideooverlaydesc{position:absolute; bottom:65px; left:0px; font-size:15px; width:100%; text-align:center; }
a.mainvideoleftarrow{display:block;opacity:0.5;position:absolute; left:50%; bottom:15px; width:40px; height:40px; margin:0px 0px 0px -75px; border-radius:40px; background-color:rgba(0,0,0,0.6); background-color:rgba(0,0,0,0.5); background-image:url(/images_svg/main_icon_left_arrow_white.svg); background-size:20px 20px; background-position:8px center; background-repeat:no-repeat; transition: opacity 0.5s ease-out;}
a.mainvideorightarrow{display:block;opacity:0.5;position:absolute; right:50%; bottom:15px;width:40px; height:40px; margin:0px -75px 0px 0px;  border-radius:40px; background-color:rgba(0,0,0,0.6); background-color:rgba(0,0,0,0.5); background-image:url(/images_svg/main_icon_right_arrow_white.svg); background-size:20px 20px; background-position:12px center; background-repeat:no-repeat;transition: opacity 0.5s ease-out;}
a.mainvideoleftarrow:hover, a.mainvideorightarrow:hover{opacity:1; transition: opacity 0.5s ease-out;}
a.mainvideoleftarrow:focus ,a.mainvideorightarrow:focus {opacity:1; transition: opacity 0.5s ease-out;}
div.mainvideonum{position:absolute; left:50%; bottom:22px; width:50px; height:25px; margin:0px 0px 0px -25px; text-align:center; font-size:14px; }

/*Video and Photo mixture in video overlay*/
div.mainvideoloadphoto{position: absolute;top:0;left: 0;width: 100%;height: 100%; background-repeat:no-repeat; background-size:contain; background-position:center center;}