/* ==========================================================================
   Desktop
   ========================================================================== */
@media (min-width: 1000px) {
	div.mainsliderloopbox{position:relative; float:left;width:720px; height:540px; margin:0px 0px 50px 0px;}
	div.mainsliderloopmask{float:left;position:relative;width:100%;height:100%; overflow:hidden;}
	/*cannot add left:0px will cause bug*/
	div.mainsliderloopimg{position:absolute;top:0px;width:100%;height:100%;background-repeat:no-repeat;background-position:center center;background-size:cover;}
	
	/*With arrows*/
	div.mainsliderloopleftbtn{opacity:0;position:absolute; width:55px; height:70px;top:50%;left:0px; z-index:85; margin:-35px 0px 0px 0px; 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;transition: all 0.5s ease-out;}
	div.mainsliderlooprightbtn{opacity:0;position:absolute;width:55px; height:70px;top:50%;right:0px;z-index:85;margin:-35px 0px 0px 0px;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;transition: all 0.5s ease-out;}
	div.mainsliderloopbox:hover .mainsliderloopleftbtn,div.mainsliderloopbox:hover .mainsliderlooprightbtn{opacity:1; transition: opacity 0.5s ease-out;}
	div.mainsliderloopleftbtn:hover,div.mainsliderlooprightbtn:hover{ cursor:pointer; }
	
	/*Without arrow
	div.mainsliderloopleftbtn{display:block;position:absolute; width:20%; height:100%;top:0px;left:0px; z-index:81;-webkit-tap-highlight-color: transparent;}
	div.mainsliderlooprightbtn{display:block;position:absolute;width:20%; height:100%;top:0px;right:0px;z-index:81;-webkit-tap-highlight-color: transparent;}
	div.mainsliderloopleftbtn:hover,div.mainsliderlooprightbtn:hover{ cursor:pointer; }
	*/

	/*Version 1 - Menu inside the picture*/
	div.mainsliderloopimgmenu{position:absolute;bottom:0px;left:0px; width:100%; color:#FFF; background-image:url(../images/main_black_transparent_bg.png); z-index:85;}
	div.mainsliderloopimgtitle{float:left;font-size:14px;font-weight:bold;width:70%; padding:15px 20px 15px 20px;}
	div.mainsliderloopimgdescription{float:left;font-size:12px;font-weight:normal;width:70%;padding:0px 20px 20px 20px;}
	div.mainsliderloopimgmenunum{float:right;font-size:12px;text-align:right;width:20%;padding:15px 20px 15px 20px;}
	div.mainsliderloopimgdotmenu{position:absolute;width:100%; height:30px; left:0px;bottom:-40px; padding:5px 0px 5px 0px;text-align:center; z-index:80; }

	/*Version 2 - Menu outside the picture*/
	div.mainsliderloopboxoutside{position:relative;width:720px; height:540px; margin:0px 0px 50px 0px;}
	div.mainsliderloopimgmenuoutside{float:left; width:100%;}
	div.mainsliderloopimgtitleoutside{float:left;font-size:14px;font-weight:bold;width:70%; padding:15px 0px 15px 0px;}
	div.mainsliderloopimgdescriptionoutside{float:left;font-size:12px;font-weight:normal;line-height:1.4em; width:100%;padding:0px 0px 20px 0px;}
	div.mainsliderloopimgmenunumoutside{float:right;font-size:12px;text-align:right;width:20%;padding:15px 0px 15px 0px;}
	div.mainsliderloopimgdotmenuoutside{float:left; width:100%; height:30px; padding:5px 0px 5px 0px;text-align:center; }
	div.mainsliderloopboxoutside:hover .mainsliderloopleftbtn,div.mainsliderloopboxoutside:hover .mainsliderlooprightbtn{opacity:1; transition: opacity 0.5s ease-out;}


	a.mainsliderloopimgdot{width:10px; height:10px; display:inline-block; margin:0px 5px 0px 5px; background-color:#999999;border-radius: 10px;}
	a.mainsliderloopimgdot:hover{background-color:#333333;}
	a.mainsliderloopimgdoton{width:10px; height:10px; display:inline-block; margin:0px 5px 0px 5px; background-color:#333333;border-radius: 10px;}
}

/* ==========================================================================
   Mobile
   ========================================================================== */
@media (min-width: 0px) and (max-width: 999px){
	div.mainsliderloopbox{position:relative;float:left;width:100%;margin:0px 0px 30px 0px;}
	div.mainsliderloopmask{float:left;position:relative;width:100%; height:100%; overflow:hidden;}
	/*cannot add left:0px will cause bug*/
	div.mainsliderloopimg{position:absolute;top:0px;width:100%;height:100%;background-repeat:no-repeat;background-position:center center; background-size:cover;}
	
	/* With arrows*/
	div.mainsliderloopleftbtn{opacity:1;position:absolute; width:30px; height:50px;top:50%;left:0px; z-index:85; margin:-35px 0px 0px 0px; background-image:url(../images/mainimg_left_arrow_on.png); background-size:30px 50px; background-position:left center; background-repeat:no-repeat;-webkit-tap-highlight-color: transparent;transition: all 0.5s ease-out;}
	div.mainsliderlooprightbtn{opacity:1;position:absolute;width:30px; height:50px;top:50%;right:0px;z-index:85;margin:-35px 0px 0px 0px;background-image:url(../images/mainimg_right_arrow_on.png); background-size:30px 50px; background-position:right center; background-repeat:no-repeat;-webkit-tap-highlight-color: transparent;transition: all 0.5s ease-out;}
	div.mainsliderloopleftbtn:hover,div.mainsliderlooprightbtn:hover{ cursor:pointer; }
	
	/* Without arrow
	div.mainsliderloopleftbtn{display:block;position:absolute; width:20%; height:100%;top:0px;left:0px; z-index:80; -webkit-tap-highlight-color: transparent;}
	div.mainsliderlooprightbtn{display:block;position:absolute;width:20%; height:100%;top:0px;right:0px;z-index:80; -webkit-tap-highlight-color: transparent;}
	div.mainsliderloopleftbtn:hover,div.mainsliderlooprightbtn:hover{ cursor:pointer; }
	*/

	/*Version 1 - Menu inside the picture*/
	div.mainsliderloopimgmenu{position:absolute;bottom:0px;left:0px;width:100%;color:#FFF;z-index:85;background-image:url(../images/main_black_transparent_bg.png)}
	div.mainsliderloopimgtitle{float:left;font-size:14px;font-weight:bold;width:100%; padding:10px 20px 10px 20px;}
	div.mainsliderloopimgdescription{float:left;font-size:12px;line-height:1.2em;font-weight:normal;width:100%;padding:0px 20px 10px 20px;}
	div.mainsliderloopimgmenunum{display:none;}
	div.mainsliderloopimgdotmenu{position:absolute; width:100%; left:0px; bottom:-30px;text-align:center;}


	/*Version 2 - Menu outside the picture*/
	div.mainsliderloopboxoutside{position:relative;width:100%;margin:0px 0px 30px 0px;}
	div.mainsliderloopimgmenuoutside{float:left;width:100%;}
	div.mainsliderloopimgtitleoutside{float:left;font-size:14px;font-weight:bold;width:100%; padding:10px 0px 10px 0px;}
	div.mainsliderloopimgdescriptionoutside{float:left;font-size:12px;line-height:1.2em;font-weight:normal;width:100%;padding:0px 0px 10px 0px;}
	div.mainsliderloopimgmenunumoutside{display:none;}
	div.mainsliderloopimgdotmenuoutside{float:left; width:100%; left:0px; bottom:-30px;text-align:center;}

	div.mainsliderloopboxoutside:hover .mainsliderloopleftbtn,div.mainsliderloopboxoutside:hover .mainsliderlooprightbtn{opacity:1; transition: opacity 0.5s ease-out;}


	a.mainsliderloopimgdot{width:10px; height:10px; display:inline-block; margin:0px 5px 0px 5px; background-color:#999999;border-radius: 10px;}
	a.mainsliderloopimgdot:hover{background-color:#333333;}
	a.mainsliderloopimgdoton{width:10px; height:10px; display:inline-block; margin:0px 5px 0px 5px; background-color:#333333;border-radius: 10px;}
}

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

/*Main slider animation*/
/*Do not adjust the z-index.*/
div.mainsliderloopimgfocuscenter{z-index:82;transition: left 0.5s ;}
div.mainsliderloopimgfocusleft{z-index:81;transition: left 0.5s ;}
div.mainsliderloopimgfocusright{z-index:80;transition: left 0.5s ;}
/*For dot click*/
div.mainsliderloopimgfocuscentertoleft{z-index:83;transition: left 0.5s;}
div.mainsliderloopimgfocusfixedpos{z-index:82;transition: left 0.5s ;}