/* ==========================================================================
   ipad landscape mode
   ========================================================================== */
@media (min-width: 1025px) {
	/*Banner with fixed width and height*/
	div.mainbannerwrapper{position:relative;width:1200px; height:600px;left:50% ; margin:-12px 0px 20px -600px; }
	div.mainbannerinitioff{position:absolute;width:100%;height:100%;background-repeat:no-repeat;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;cursor:pointer;}
	div.mainbanneroff{position:absolute;width:100%;height:100%;background-repeat:no-repeat;background-size:cover;opacity: 0;transition: opacity  1s ease-out;}

	 /*background-size:100% 100%,background-size:120% 120%*/
	div.mainbannerwrapper:hover .mainbannerleftarrow,div.mainbannerwrapper:hover .mainbannerrightarrow{opacity:1; transition: opacity 0.5s ease-out;}

	/* Straight Arrow*/
	div.mainbannerleftarrow{position:absolute;left:0px;top:50%;  margin-top:-56px;z-index:82; opacity:0; transition: opacity 0.5s ease-out;}
	div.mainbannerleftarrow a {display:block;width:102px;height:112px;background:url(/images/mainimg_left_arrow_on.png) center center;background-size: 100% 100%; opacity:0.4;transition: opacity 0.5s ease-out;}
	div.mainbannerleftarrow a:hover {opacity:1;transition: opacity 0.5s ease-out;}
	div.mainbannerrightarrow{position:absolute;right:0px;top:50%; margin-top:-56px;z-index:82;opacity:0; transition: opacity 0.5s ease-out; }
	div.mainbannerrightarrow a {display:block;width:102px;height:112px;background:url(/images/mainimg_right_arrow_on.png) center center ;background-size: 100% 100%;opacity:0.4;transition: opacity 0.5s ease-out;}
	div.mainbannerrightarrow a:hover {opacity:1;transition: opacity 0.5s ease-out;}
	
	div.mainbannertextbg{ position:relative; width:100%; height:100%;background-image:url(/images/main_banner_text_black_gradient_vertical_bg.png); background-repeat:repeat-x; background-position:bottom;}
	div.mainbannercenterbox{position:relative; width:1000px; height:100%; margin:0 auto;}
	div.mainbannertext{position:relative; width:1000px; height:100%; margin:0 auto;}
	div.mainbannertexttitle{position:absolute; bottom:80px; left:0px; color: #FFFFFF; font-weight:bold; width:340px; font-size:70px; line-height:0.9em; }
	div.mainbannertextdesc{position:absolute; bottom:80px; right:0px;color: #FFFFFF; font-size:20px;}
	div.mainbannerinsertimg{position:absolute; width:100%; height:100%; bottom:0px; left:0px; background-repeat:no-repeat; background-position:bottom center; background-size:contain;}
}

/* ==========================================================================
   Desktop
   ========================================================================== */
@media (min-width: 1000px) and (max-width: 1024px){
	/*Banner with fixed width and height*/
	div.mainbannerwrapper{position:relative;float:left;width:100%;height:380px;margin:-20px 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;cursor:pointer;}
	div.mainbanneroff{position:absolute;width:100%;height:100%;background-repeat:no-repeat;background-size:cover;opacity: 0;transition: opacity 0.5s ease-out;}
	
	 /*background-size:100% 100%,background-size:120% 120%*/
	div.mainbannerwrapper:hover .mainbannerleftarrow,div.mainbannerwrapper:hover .mainbannerrightarrow{opacity:1; transition: opacity 0.5s ease-out;}

	/* Straight Arrow*/
	div.mainbannerleftarrow{position:absolute;left:0px;top:50%;  margin-top:-56px;z-index:82; opacity:0; transition: opacity 0.5s ease-out;}
	div.mainbannerleftarrow a {display:block;width:102px;height:112px;background:url(/images/mainimg_left_arrow_on.png) center center;background-size: 100% 100%; opacity:0.4;transition: opacity 0.5s ease-out;}
	div.mainbannerleftarrow a:hover {opacity:1;transition: opacity 0.5s ease-out;}
	div.mainbannerrightarrow{position:absolute;right:0px;top:50%; margin-top:-56px;z-index:82;opacity:0; transition: opacity 0.5s ease-out; }
	div.mainbannerrightarrow a {display:block;width:102px;height:112px;background:url(/images/mainimg_right_arrow_on.png) center center ;background-size: 100% 100%;opacity:0.4;transition: opacity 0.5s ease-out;}
	div.mainbannerrightarrow a:hover {opacity:1;transition: opacity 0.5s ease-out;}

	div.mainbannertextbg{ position:relative; width:100%; height:100%;background-image:url(/images/main_banner_text_black_gradient_vertical_bg.png); background-repeat:repeat-x; background-position:bottom;}
	div.mainbannercenterbox{position:relative; width:1000px; height:100%; margin:0 auto;}
	div.mainbannertext{position:relative; width:1000px; height:100%; margin:0 auto;}
	div.mainbannertexttitle{position:absolute; bottom:80px; left:0px; color: #FFFFFF; font-weight:bold; width:340px; font-size:70px; line-height:0.9em; }
	div.mainbannertextdesc{position:absolute; bottom:80px; right:0px;color: #FFFFFF; font-size:20px;}
	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){
	/*Full width banner*/
	
	div.mainbannerwrapper{position:relative;float:left;width:100%;height:380px;margin:8px 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;cursor:pointer;}
	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 */
	div.mainbannerleftarrow{position:absolute;top:50%; margin-top:-30px;left:0px;z-index:82; }
	div.mainbannerleftarrow a {display:block;width:40px;height:60px;background:url(/images/mainimg_left_arrow_on.png);background-repeat:no-repeat;background-position:center left;background-size:contain;opacity:0.4;transition: opacity 0.5s ease-out;}
	div.mainbannerleftarrow a:hover {opacity:1;transition: opacity 0.5s ease-out;}
	div.mainbannerrightarrow{position:absolute;right:0px;top:50%; margin-top:-30px;z-index:82;}
	div.mainbannerrightarrow a {display:block;width:40px;height:60px;background:url(/images/mainimg_right_arrow_on.png);background-repeat:no-repeat;background-position:center left;background-size:contain;opacity:0.4;transition: opacity 0.5s ease-out;}
	div.mainbannerrightarrow a: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:15px; z-index:85; background-image:url(/images/main_black_gradient_vertical_bg.png); background-repeat:repeat-x; }
	div.mainbannertexttitle{color: #FFFFFF; font-size:28px; font-weight:bold; line-height:1em;}
	div.mainbannertextdesc{color: #FFFFFF; font-size:14px;}
	div.mainbannerinsertimg{position:absolute; width:100%; height:100%; bottom:0px; left:0px; background-repeat:no-repeat; background-position:top center; background-size:contain;}

}

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

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