body { background-color: #012a1f; line-height:1.5; color: #fff;
		   overflow-x:hidden; height:1000px;}


/* Nav (Right hand-side dot)
*****************************************************************/

	nav#primary 	{ z-index:5; position:fixed; top:50%; right:16px; margin-top:-40px;}
	nav#primary li 	{ position:relative; height:20px;}
	nav#primary a 	{ display:block; width:20px; height:20px; text-indent:-9999px;
					  background: transparent url('images/nav-dot.png') 4px 4px no-repeat; }
	nav#primary a:hover, nav#primary a.active { background: transparent url('images/nav-dot.png') 4px -16px no-repeat;}
	nav#primary h1 { position:absolute; right:22px; top:-7px; display:none; padding:4px 20px 4px 7px; color:#fff; white-space:nowrap;
					 background:transparent url('images/nav-arrow.png') 100% 50% no-repeat;
					 text-transform: uppercase;}


/* Parallax
*****************************************************************/

	/* content */
	#content 			{ z-index:4; position:relative; width:100%; padding:0; margin:0 auto; line-height:1.7; font-family: 'Noto Sans', '      -Light';}
	#content article	{ width:100%;}
	#content h1 		{ margin:60px 0 25px 0;}
	#content .intro 	{ padding:0 10%; margin-bottom:5%}
	

	a .login { padding:1% 3%; font-size:30px; border:2px solid #fff; text-transform:uppercase; color:#fff;
			   transition:all 0.3s ease; margin: 0 auto}
	a:hover .login {
		 -webkit-transform: scale(0.95);
             -ms-transform: scale(0.95);
                 transform: scale(0.95);}

	input.blk-input { background-color:#333; border:none; outline:none; padding:10px 15px; margin-bottom:10px; color:#fff;
					  width:600px; height:30px;
					  font-family: Verdana, Arial, Helvetica, sans-serif; font-weight:normal; font-size:14px;}
	input:focus.blk-input {background-color:#000; transition:all 0.3s ease;}


	.close    { float:right; margin-right:90px; margin-top:20px}
	.close i  { font-size:30px; cursor:pointer; transition:all 0.3s ease;}
	.close i:hover { color:#fbcb5d;
	     -webkit-transform: scale(0.9);
             -ms-transform: scale(0.9);
                 transform: scale(0.9);}


    .login  { width:200px;}
    .submit { width:580px;}


    .login-blk { margin:0 auto; width:800px; text-align:center;}


    /* section */
	#section-a { position:absolute; top:100px;}

	#section-a .pos-general, #section-c .pos-general { width:980px; margin:0 auto; text-align:center}
	#section-b { padding-top:20px; text-align:center; position:absolute; top:830px; height:850px;
                    /*url('images/img-prize.jpg') no-repeat;
                    background-size:cover;
                    background-position:center center;*/}
	#section-b h1 { padding:0 30%}	
        
        #section-c { padding-top:20px; text-align:center; position:absolute; top:100px; min-height:750px;}

	#section-d { padding-top:90px; padding-bottom:350px;text-align:center; position:absolute; top:2880px;
				background-color:#333;}

	#section-d .share-intro   { padding:2% 10% 0 10%; color:#fff;}
	#section-d .icon-blk { margin:30px 0;}
	#section-d .icon-blk a i 	   { padding:0 1%;  color:#666; font-size:80px; transition:all 0.3s ease;}
	#section-d .icon-blk a i:hover { color:#fbcb5d; 
									     -webkit-transform: scale(1.1);
								             -ms-transform: scale(1.1);
								                 transform: scale(1.1);}



	/* foreground (ballons/landscape) */
	#parallax-bg3 { z-index:3; position:fixed; left:50%; /* align left edge with center of viewport */
					top:0; /*width: 980px;*/ width: 980px;
					margin-left: -470px; /* move left by half element's width */; }


	/* Balloon background */
	#bg3-1 { position:absolute; top:100px;  left:30px;}
	#bg3-2 { position:absolute; top:812px;  left:321px;}
	#bg3-3 { position:absolute; top:2580px; left:180px;}

	/* Balloon background  */
	#parallax-bg1 { z-index:1; position:fixed; left:50%; /* align left edge with center of viewport */
					top:0; width:1200px; margin-left:-600px; /* move left by half element's width */}
	#bg1-1 { position:absolute; top:50px;  left:-270px;}
	#bg1-2 { position:absolute; top:300px; left:795px;}
	#bg1-3 { position:absolute; top:500px; left:-20px;}
	#bg1-4 { position:absolute; top:960px; left:600px;}

	/* Balloon background  */
	#parallax-bg2 { z-index:2; position:fixed; left:50%; /* align left edge with center of viewport */
					top:0; width:1200px; margin-left:-600px; /* move left by half element's width */ }
	
	#bg2-1 { position:absolute; top:80px;  left:200px;}
	#bg2-2 { position:absolute; top:300px; left:900px;}
	#bg2-3 { position:absolute; top:203px; left:200px;}
	#bg2-4 { position:absolute; top:700px; left:1200px;}
	#bg2-5 { position:absolute; top:900px; left:890px;}



/* ==========================================================================
	ipad
============================================================================= */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)  { 
	body { height: auto;}
        #section-a { top:100px; height:300px;}
	#section-b { top:900px; height:900px;}
        #section-c { top:100px; height:1000px;}
	#section-d { top:2900px;height:100px}
        nav#primary { display:none;}
}

/* ==========================================================================
	Mobile
============================================================================= */

@media only screen and (min-device-width : 480px) and (max-device-width : 768px)  { 
	.daao-logo { margin-top:100px;z-index:100000;}

}

@media only screen and (max-device-width: 480px) {

	body { height: auto}
	#section-b { top:800px; height:600px;}
        #section-c { top:100px; height:1000px;}
	#section-b h1 { padding:0 10%}	
	#section-d { top:3100px; height:100px;}
	.daao-logo { margin-top:120px;}

}