/* ==========================================================================
   Desktop
   ========================================================================== */
@media (min-width: 1000px){
	/*Full width banner*/
	div.mainbannerwrapper{position:relative;float:left;width:100%;height:744px;margin:-20px 0px 20px 0px;}
	div.mainbannerinitioff{position:absolute;width:100%;height:100%;background-repeat:no-repeat;background-size:cover;opacity: 0;}
	div.mainbanner{position:absolute;width:100%;height:100%;background-repeat:no-repeat;background-size:cover;opacity: 1;transition: opacity 1s ease-out ;z-index:80;}
	div.mainbanneroff{position:absolute;width:100%;height:100%;background-repeat:no-repeat;background-size:cover;opacity: 0;transition: opacity  1s ease-out;}

	/* Straight Arrow*/
	a.mainbannerleftarrow {position:absolute;left:0px;top:50%;z-index:82; opacity:0.5; background-color:rgba(0,0,0,0.6); padding:15px 0px 15px 0px; display:block;width:30px;height:60px; margin:-30px 0px 0px 0px; background-image:url(/images_svg/main_icon_left_arrow_white.svg); background-position:-2px center; background-size: 28px 28px; background-repeat:no-repeat; transition: opacity 0.5s ease-out;}
	a.mainbannerrightarrow{position:absolute;right:0px;top:50%;z-index:82; opacity:0.5; background-color:rgba(0,0,0,0.6);padding:15px 0px 15px 0px; display:block;width:30px;height:60px; margin:-30px 0px 0px 0px;  background-image:url(/images_svg/main_icon_right_arrow_white.svg); background-position:2px center; background-size: 28px 28px; background-repeat:no-repeat; transition: opacity 0.5s ease-out;}
	div.mainbannerwrapper:hover a.mainbannerleftarrow,div.mainbannerwrapper:hover a.mainbannerrightarrow{opacity:1; transition: opacity 0.5s ease-out;}
	a.mainbannerleftarrow:focus ,a.mainbannerrightarrow:focus {opacity:1; transition: opacity 0.5s ease-out;}

	div.mainbannertextbg{ position:relative; width:100%; height:100%;background-image:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0.1), rgba(0,0,0,0.2), rgba(0,0,0,1));}
	div.mainbannercenterbox{position:relative; width:1000px; height:100%; margin:0 auto;}
	
	div.mainbannertext{position:relative; width:100%; height:100%; margin:0 auto; padding:40px 0px 60px 0px; display:flex; flex-wrap:wrap; align-content: flex-end;}
	div.mainbannertext a{color:#FFFFFF;}
	div.mainbannertexttitle{color: #FFFFFF; font-weight:bold; width:100%; font-size:50px; line-height:1.1em; margin:0px 0px 20px 0px;  }
	div.mainbannertexttitle a{text-decoration:none;}
	div.mainbannertexttitle a:hover{text-decoration:underline;}
	div.mainbannertextdesc{color: #FFFFFF; font-size:18px; line-height:1.4em;}
	div.mainbannerinsertimg{position:absolute; width:100%; height:100%; bottom:0px; left:0px; background-repeat:no-repeat; background-position:bottom center; background-size:contain;}
	

}

/* ==========================================================================
   Mobile
   ========================================================================== */
@media (min-width: 0px) and (max-width: 999px){
	div.mainbannerwrapper{position:relative;float:left;width:100%;min-height:500px;margin:0px 0px 0px 0px;}
	div.mainbannerinitioff{position:absolute;width:100%;height:100%;background-repeat:no-repeat;background-size:cover;opacity: 0;}
	div.mainbanner{position:absolute;width:100%;height:100%;background-repeat:no-repeat;background-size:cover;opacity: 1;transition: opacity 0.5s ease-out;z-index:80;}
	div.mainbanneroff{position:absolute;width:100%;height:100%;background-repeat:no-repeat;background-size:cover;opacity: 0;transition: opacity 0.5s ease-out;}

	/* Straight Arrow */
	a.mainbannerleftarrow{position:absolute; width:50%; height:45px; bottom:0px;left:0px;z-index:82; padding:10px 20px 10px 0px; display:block;background-color:rgba(0,0,0,0.2); background-image:url(/images_svg/main_icon_left_arrow_white.svg);background-repeat:no-repeat;background-position:90% center;background-size:25px 25px;opacity:0.6;transition: opacity 0.5s ease-out;}
	a.mainbannerleftarrow:hover {opacity:1;transition: opacity 0.5s ease-out;}
	a.mainbannerrightarrow {position:absolute;width:50%; height:45px; bottom:0px; right:0px;z-index:82; padding:10px 0px 10px 20px; display:block;background-color:rgba(0,0,0,0.2);  background-image:url(/images_svg/main_icon_right_arrow_white.svg);background-repeat:no-repeat;background-position:10% center;background-size:25px 25px;opacity:0.6;transition: opacity 0.5s ease-out;}
	a.mainbannerrightarrow:hover {opacity:1;transition: opacity 0.5s ease-out;}

	div.mainbannertext{position:absolute; bottom:0px; min-height:75px; left:0px; width:100%; font-size:14px; color:#FFF; padding:20px 20px 70px 20px; z-index:85; background-image:linear-gradient(180deg, rgba(0,0,0,0),  rgba(0,0,0,0.5), rgba(0,0,0,0.8), rgba(0,0,0,1)); }
	div.mainbannertext a{color:#FFFFFF;}
	div.mainbannertexttitle{color: #FFFFFF; font-size:28px; font-weight:bold; line-height:1.2em; margin:0px 0px 10px 0px;}
	div.mainbannertexttitle a{text-decoration:none;}
	div.mainbannertexttitle a:hover{text-decoration:underline;}
	div.mainbannertextdesc{color: #FFFFFF; font-size:14px; line-height:1.4em;}
	div.mainbannerinsertimg{position:absolute; width:100%; height:100%; bottom:0px; left:0px; background-repeat:no-repeat; background-position:bottom center; background-size:contain;}
}

/* ==========================================================================
   Share CSS
   ========================================================================== */
.mainbannerimgpos1{background-position:center center;} /*if change name, need to edit js file*/
.mainbannerimgpos2{background-position:center center;}
.mainbannerimgpos3{background-position:center center;}