@charset "UTF-8";
/* CSS Document */

@font-face {
    font-family: 'st_marie_thinthin';
    src: url('../fonts/StMarie-Thin-webfont.eot');
    src: url('../fonts/StMarie-Thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/StMarie-Thin-webfont.woff') format('woff'),
         url('../fonts/StMarie-Thin-webfont.ttf') format('truetype'),
         url('../fonts/StMarie-Thin-webfont.svg#st_marie_thinthin') format('svg');
    font-weight: normal;
    font-style: normal;
}

html{
	margin:0;
	border:0;
	height:100%;
	width:100%;
	overflow: auto;
}
body{
	width:100%;
	height: 100%;
	padding: 0px;
	margin:0px;
	border:0;
	font-family:'st_marie_thinthin', serif;
	color:#000;
	-webkit-text-size-adjust: 100%;
	background-color: #F2F2F2;
	-webkit-overflow-scrolling: touch;

}

*{
	box-sizing: border-box; 
	-moz-box-sizing: border-box; 
	-webkit-box-sizing: border-box; 
}
		
img{
	margin:0;
	border:0;
	display:block;
}
#loader-container{
	position:absolute;
	display:none;
	opacity:0;
}
#logo{
	position:fixed;
	top:20px;
	right:40px;
	cursor: url(../img/mouse.png) 50 50, crosshair;
}

#controller{
	position: fixed;
	right:10px;
	top:50%;
	margin-top:-93px;
	padding-top:9px;
	width:32px;
	height:186px;
	background: url(../img/controller.png);
	z-index:200;
}
	#ball{
		display: block;
		position: absolute;
		top:0px;
		margin-top:9px;
	}
		#ball-holder{
			top:0;
		}
		.ball-link{
			position: relative;
			top:0;
			margin-top:0;
			height:19px;
			cursor:pointer;
		}
			.ball-link img{
				display:none;
			}
			.ball-link:hover img{
				display:block;
			}

.next{
	position: absolute;
	left:50%;
	bottom:10px;
	margin-left:-30px;
	cursor:pointer;
}	

.scrollblock{
	width:100%;
	height: 100%;
	overflow: visible;
	position: relative;
	background-size:cover;
	background-position:center center;
	background-repeat:no-repeat;
	cursor: url(../img/mouse.png) 50 50, crosshair;

}
.scrollblock-bg{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height: 100%;
	background-size:auto 140%;
	background-position:top center;
	background-repeat:no-repeat;
}

.icecream{
	position: absolute;
	width:100%;
	height:100%;
	background-repeat:no-repeat;
	background-position: center;
	background-attachment: fixed; 
	background-size:auto 50%;
}
#loader{
	position: absolute;
	top:50%;
	left:50%;
	width:100px;
	height:100px;
	margin:-50px 0 0 -50px;
}	
h1{
	position:absolute;
	font-size:90px;
	color:#fff;
	top:30px;
	line-height:90px;
	margin:0 30px;
	font-weight: normal;
	z-index:100;
}


	#section1{
		background-color: #f92b2f;
		background-image:url(../img/bg/01.jpg);
	}
		#section1 .scrollblock-bg{
			background-image:url(../img/bg/00.png);
		}
		#section1 .icecream{
			background-image:url(../img/0.png);
		}
		
		#section1 h1{
			width:100%;
			left:0;
			text-align: center;
			margin-left:-10px;
		}
		
	#section2{
		background-color: #1bbee3;
		background-image:url(../img/bg/02.jpg);
	}
		#section2 .scrollblock-bg{
			background-image:url(../img/bg/01.png);
		}
		#section2 .icecream{
			background-image:url(../img/2.png);
		}
		
		#section2 h1{
			width:100%;
			left:0;
			text-align: center;
			margin-left:-10px;
		}
		
	#section3{
		background-color: #d6cd16;
		background-image:url(../img/bg/02.jpg);
	}
		#section3 .scrollblock-bg{
			background-image:url(../img/bg/02.png);
		}
		#section3 .icecream{
			background-image:url(../img/3.png);
		}
		
		#section3 h1{
			width:100%;
			left:0;
			text-align: center;
			margin-left:-10px;
		}



	#section9{
		background-color: #e6ffa1;
		background-image:url(../img/wallpaper.background.jpg);
		background-attachment: scroll;
		background-repeat: no-repeat;
		background-size:auto auto !important;
		cursor:default;
	}
		
		#section9 h1{
			color:#808080;
			width:100%;
			left:0;
			text-align: center;
			margin-left:-10px;
			margin-top:-380px;
			font-size:100px;
			top:50% !important;
		}


	
	
	#enter_website{
		display:block;
		position:absolute;
		color:#808080;
		top:27%;
		left:50%;
		margin-left:-156px;
		margin-top:70px;
		padding-bottom:50px;
		min-width:312px;
		min-height:200px;
		text-align: center;
		font-size:25px;
		overflow: visible;
		font-family:'st_marie_thinthin', serif;
		box-sizing: content-box; 
		-moz-box-sizing: content-box; 
		-webkit-box-sizing: content-box;
	}

		#enter_website a.site{
			border-top:1px solid #231F20;
			border-bottom:1px solid #231F20;
			padding:10px 0;
			margin-top:-200px;
			color:#1A171B;
			text-decoration:none;
		}
		
			#enter_website a.site:hover{
				border-top:1px solid #c8ff00;
				border-bottom:1px solid #c8ff00;
				color:#c8ff00;
			}	
			
				
	
	#footer{
		position:absolute;
		color:#1A171B;
		top:78%;
		left:50%;
		margin-left:-156px;
		margin-bottom:100px;
		background:url(../img/logo-footer.png) bottom center no-repeat;
		background-size: auto;
		min-width:312px;
		min-height:200px;
		text-align: center;
		font-size:18px;
		overflow: visible;
		font-family:'st_marie_thinthin', serif;
		box-sizing: content-box; 
		-moz-box-sizing: content-box; 
		-webkit-box-sizing: content-box;
	}

		#footer a.site{
			color:#1A171B;
			padding:10px 0;
			margin-top:-200px;
			text-decoration:none;
		}
		
			#footer a.site:hover{
				color:#c8ff00;
			}
				
		
@media only screen and (max-device-width: 768px) {
	h1{
		font-size:72px;
	}
	.scrollblock-bg, .icecream{
		background-attachment: scroll;
	}
		
	.scrollblock-bg{
		background-size:auto 100%;
	}
	.scrollblock h1{
		top:30px !important;
	}

	.ball-link:hover img{
		display:none;
	}
	
}

@media only screen and (max-device-width: 768px) and (orientation:portrait) {
	#section9 h1{
		font-size:90px;
	}
}

@media only screen and (max-device-width: 768px) and (orientation:landscape){
	.scrollblock-bg{
		background-size:80% auto;
		background-position: center center;
	}
}

@media only screen and (max-device-width: 320px) {
	.next{
		left:10px;
		margin-left:0;
		width:40px;
		height:40px;
	}
	#logo{
		width:40px;
		height:40px;
		right:10px;
		top:10px;
	}
	#loader{
		width:50px;
		height:50px;
		margin:-25px 0 0 -25px;
	}
		#loader img{
			width:50px;
			height:50px;
		}

	.scrollblock-bg{
		background-size:auto 140%;
		background-position: center 50%;
	}
	.scrollblock h1{
		top:10px !important;
		font-size:40px;
		line-height:38px;
		margin:0 10px;
	}
	#section9{
		background-position:top 100px !important;
		background-size:auto auto !important;
		min-height:240px;
	}
		#section9 h1{
			margin-top:-120px;
			font-size:30px;
		}


	#enter_website{
		font-size:20px;
		background-size:50%;
		min-width:200px;
		margin-left:-100px;
		margin-top:-30px;
		min-height:120px;
	}
	
		#enter_website a.site{
			padding:5px 0;
			margin-top:100px;
		}
		#enter_website a.like{
			right:35px;
			top:-20px;
		}	
			#enter_website a.like img{
				width:50px;
				height:50px;
			}
		
}

@media only screen and (max-device-width: 320px) and (orientation:landscape) {
  /* For portrait layouts only */
  .scrollblock-bg{
		background-size:80% auto;
		background-position: center center;
	}
	
  #section9{
	  background-position:0 bottom !important;
  }
  
  
	#enter_website{
		min-height:130px;
	}
	
}

@media only screen and (max-device-width: 320px) and (orientation:portrait) {
  /* For portrait layouts only */
  #section9{
	  background-position:-100px bottom !important;
  }
  	#section9 h1{
		margin-top:-140px;
	}
  	
}