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

@media (min-width: 1000px) {
	
	/*Desktop Scroll and Fixed*/
	div.mainscrollleftcol{float:left; width:70%;}
	div.mainscrollrightcol {float:right; width:260px; }
	.mainscrollrightcolfixedpos{position:fixed; width:260px; top:30px; left:50%; margin-left:240px; z-index:85;transition: top 0.6s ease-out; }
	div.mainscrollrightsectbox{float:left; width:100%; background:#e5e5e5; padding:15px;border-radius: 10px; margin:0px 0px 12px 0px; }

	/*Desktop Scroll,Fixed & Scroll*/
	div.mainscrollsfsbox{position:relative; float:left; width:100%;border:#666 1px solid;}
	div.mainscrollsfsfixedmove{width:480px; height:250px; padding:10px; background-color:#06F; color:#FFF;}
	div.mainscrollsfsfixedmovestg1{position:absolute;top:0px; left:0px; }
	div.mainscrollsfsfixedmovestg2{position:fixed; top:20px; }
	div.mainscrollsfsfixedmovestg3{position:absolute;bottom:0px; left:0px;}
	div.mainscrollsfscontent{float:right;width:50%; padding:10px;}

	/*Desktop Scroll Dot*/
	div.mainscrolldotbox{position:fixed; top:180px; right:20px; width:30px;}
	a.mainscrolldotcircle{position:relative; display:block; width:15px; height:15px; overflow:hidden; border-radius:10px; background-color:#d3d3d3; margin:0px 0px 15px 0px; transition: all 0.5s ease;}
	a.mainscrolldotcircle:hover{background-color:#666666; color:#FFF;cursor:pointer; overflow:visible;transition: all 0.5s ease;}
	a.mainscrolldotcircle span{ opacity:0;float:left; margin:-7px 0px 0px -140px; width:120px;background-color:#666666; color:#FFF; padding:5px; text-align:right; font-size:12px; transition: all 0.5s ease;  }
	a.mainscrolldotcircle:hover span{opacity:1;}
	a.mainscrolldotcircleinpos{background-color:#666666;}
	
	/*Desktop Scroll Bottom bar*/
	div.mainscrollbottombarbox{position:fixed; width:100%; height:60px; bottom:20px; left:0px; z-index:85;transition: all 0.5s ease; }
	div.mainscrollbottombaroff{bottom:-70px !important;transition: all 0.5s ease; }
	div.mainscrollbottombarwrap{position:relative; margin:0 auto; width:1000px; height:30px; background-color:#494949; border-radius: 8px; overflow:hidden;  opacity:0.9;}
	a.mainscrollbottombarsect{float:left; display:block; text-decoration:none;padding:5px; height:30px; color:#ffffff; text-align:center; font-size:11px;  opacity:0.9;}
	a.mainscrollbottombarsect:hover{cursor:pointer;}
	div.mainscrollbottombarslider{position:absolute;top:0px;font-size:11px; color:#FFFFFF; padding:5px; text-align:center; background-color:#000; height:30px;border-radius: 8px; transition: all 0.5s ease; }
	
	/*Desktop Snap scroll*/
	div.mainsnapscrollfullscreen{float:left; width:100%; background-size:cover; background-repeat:no-repeat; }

	/*Desktop Scroll Layer*/
	div.mainscrolllayerwrap{position:relative;float:left; width:100%;}
	div.mainscrolllayerimg{width:100%; background-size:cover; background-repeat:no-repeat;background-position:center center;}
	div.mainscrolllayerimgstg1{position:absolute; top:0px; left:0px;}
	div.mainscrolllayerimgstg2{position:fixed; top:0px; left:0px;}
	div.mainscrolllayerimgstg3{position:absolute; bottom:0px; left:0px;}
	div.mainscrolllayergap{position:relative; top:0px; left:0px; width:100%;}
	div.mainscrolllayertext{position:relative; bottom:0px; left:50%; margin-left:-500px; padding:20px; width:1000px; color:#FFF; text-align: center;}
	div.mainscrolllayertext h1{font-size:50px;}

	/*Desktop Scroll Layer Fade*/
	div.mainscrolllayerfadewrap{position:relative;float:left; width:100%;}
	div.mainscrolllayerfadeimg{width:100%; background-size:cover; background-repeat:no-repeat;background-position:center center;opacity:1;transition: all 0.5s ease; }
	div.mainscrolllayerfadeimgstg1{position:absolute; top:0px; left:0px;}
	div.mainscrolllayerfadeimgstg2{position:fixed; top:0px; left:0px;}
	div.mainscrolllayerfadeimgstg3{position:absolute; bottom:0px; left:0px;}
	div.mainscrolllayerfadegap{position:relative; top:0px; left:0px; width:100%;}
	div.mainscrolllayerfadetext{position:relative; bottom:0px; left:50%; margin-left:-500px; padding:20px; width:1000px; color:#FFF; text-align: center;}
	div.mainscrolllayerfadetext h1{ font-size: 50px;}
	div.mainscrolllayerfadeout{opacity:0;transition: all 0.5s ease; }
	
	/*Desktop Mouse Scroll Animation*/
	div.mainscrollanimatestagetempspace{float:left; width:100%; background-color:#CCC; padding:20px;}
	div.mainscrollanimatestagewrap{position:relative; float:left;width:100%; height:900px; background-color:#000;}
	div.mainscrollanimatestageitem{ float:left; width:100%; height:300px; padding:20px; border:1px solid #CCC;}
	div.mainscrollanimatestagemove{position:absolute; top:20px; left:20px; background-color:#FFF; width:100px; height:100px; transition: all 0.5s ease;}
	
}

/* ==========================================================================
   Mobile
   ========================================================================== */
@media (min-width: 0px) and (max-width: 999px){
	/*Mobile Scroll and Fixed*/
	div.mainscrollleftcol{float:left; width:100%; margin:0px 0px 20px 0px;}
	div.mainscrollrightcol {float:right; width:100%;}
	.mainscrollrightcolfixedpos{ }
	div.mainscrollrightsectbox{float:left; width:100%; background:#e5e5e5; padding:15px;border-radius: 10px; margin:0px 0px 12px 0px; }
	
	/*Mobile Scroll,Fixed & Scroll*/
	div.mainscrollsfsbox{float:left; width:100%;border:#666 1px solid;}
	div.mainscrollsfsfixedmove{float:left;width:100%; height:250px; padding:10px; background-color:#06F; color:#FFF;}
	div.mainscrollsfsfixedmovestg1{}
	div.mainscrollsfsfixedmovestg2{}
	div.mainscrollsfsfixedmovestg3{}
	div.mainscrollsfscontent{float:left;width:100%; padding:10px;}

	/*Mobile Scroll Dot and Bottom scroll bar*/
	div.mainscrolldotbox{display:none;}
	div.mainscrollbottombarwrap{display:none;}

	/*Mobile Snap scroll*/
	div.mainsnapscrollfullscreen{float:left; width:100%; background-size:cover; background-repeat:no-repeat; background-position:center center;}

	/*Mobile Scroll Layer*/
	div.mainscrolllayerwrap{position:relative;float:left; width:100%;}
	div.mainscrolllayerimg{width:100%; background-size:cover; background-repeat:no-repeat;  background-position:center center;}
	div.mainscrolllayerimgstg1{position:absolute; top:0px; left:0px;}
	div.mainscrolllayerimgstg2{position:fixed; top:0px; left:0px;}
	div.mainscrolllayerimgstg3{position:absolute; bottom:0px; left:0px;}
	div.mainscrolllayergap{position:relative; top:0px; left:0px; width:100%;}
	div.mainscrolllayertext{position:relative; bottom:0px; width:100%; color:#FFF; padding:20px; background-color: rgba(0,0,0,0.6); }
	div.mainscrolllayertext h1{font-size:40px;}

	/*Mobile Scroll Layer Fade*/
	div.mainscrolllayerfadewrap{position:relative;float:left; width:100%;}
	div.mainscrolllayerfadeimg{width:100%; background-size:cover; background-repeat:no-repeat;background-position:center center;opacity:1;transition: all 0.5s ease;}
	div.mainscrolllayerfadeimgstg1{position:absolute; top:0px; left:0px;}
	div.mainscrolllayerfadeimgstg2{position:fixed; top:0px; left:0px;}
	div.mainscrolllayerfadeimgstg3{position:absolute; bottom:0px; left:0px;}
	div.mainscrolllayerfadegap{position:relative; top:0px; left:0px; width:100%; }
	div.mainscrolllayerfadetext{position:relative; bottom:0px; width:100%; padding:20px; color:#FFF;background-color: rgba(0,0,0,0.6); text-align: center; }
	div.mainscrolllayerfadetext h1{ font-size: 40px;}
	div.mainscrolllayerfadeout{opacity:0;transition: all 0.5s ease; }


}

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