@charset "UTF-8";
/* CSS Document */
#f4.In #logo{
	background:url(logo.png);
	width:115px;
	height:14px;
	left:201px;
	-webkit-transform:scale(1.2,1.2);
	   -moz-transform:scale(1.2,1.2);
	   		transform:scale(1.2,1.2);
	top:122px;
}
#spotlight{
	background: -moz-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
	background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); 
	background: radial-gradient(ellipse at center,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
	background-blend-mode:overlay;
	display:block;
	height:700px;
	left:-350px;
	opacity:.1;
	position:absolute;
	top:-350px;
	width:700px;
	z-index:200;
}

/*******************blur on bricks**********/
#content{
	background:#27496F url(bricks.jpg);
	height:250px;
	left:0;
	position:absolute;
	-webkit-transition:all 1s;
	   -moz-transition:all 1s;
			transition:all 1s;
	width:1200px;
}
#content div{
	margin:0;
	padding:0;
	position:absolute;
}

#content .frame{height:500px;width:600px;}

.section{height:250px;width:300px;}

#content .On{
	-webkit-animation-name:flicker;
	-webkit-animation-duration:1s;
	-webkit-animation-fill-mode:both;
	   -moz-animation:flicker 1s both;		
			animation:flicker 1s both;
	-webkit-transform:translateZ(0);
	opacity:1;
}

.white.On{
	-webkit-filter:drop-shadow(0 0 5px #fff);
	filter:drop-shadow(0 0 5px #fff);
}
.orange.On,.f3o>div>div.On{
	-webkit-filter:drop-shadow(0 0 5px #ff7e00);
	filter:drop-shadow(0 0 5px #ff7e00);	
}

.blue.On{
	-webkit-filter:drop-shadow(0 0 5px #1e73e9);
	filter:drop-shadow(0 0 5px #1e73e9);	
}

.bg{height:250px;top:125px;width:300px;}

#f1{top:-19px;}
#f1:after{
	background:url(bg1.png) bottom;
	content:'';
	display:block;
	height:50px;
	position:absolute;
	top:250px;
	width:300px;
}

#f1 .bg{background:url(bg1.png);top:0px;}
#f1 .white{top:125px;}

#f2{top:125px;}
#f2 .bg{background:url(bg2.png);left:28px;top:0;}


#f3{
	left:190px;
	top:150px;
	-webkit-transform:scale(.86,.86);
	   -moz-transform:scale(.86,.86);
			transform:scale(.86,.86);
	width:300px;
}
#f3 .bg{
	background:url(bg3.png);
	left:25px;
	top:0;
	width:250px;
}
#text{
	color:#bbb;
	font-size:20.5px;
	font-weight:400;
	left:70px;
	opacity:0;
	top:228px;
	-webkit-transition:all 1s ;
	   -moz-transition:all 1s ;
			transition:all 1s ;
}
#text.In{opacity:1}

#f3.In:before{
	-webkit-animation-name:flicker;
	-webkit-animation-duration:1s;
	-webkit-animation-fill-mode:both;
	   -moz-animation:flicker 1s both;		
			animation:flicker 1s both;
	background:url(could.png) no-repeat;
	content:'';
	display:block;
	height:24px;
	left:80px;
	position:absolute;
	width:137px;
}
#f4{
	left:300px;
	top:-125px;
	-webkit-transform:scale(1,1);
	   -moz-transform:scale(1,1);
			transform:scale(1,1);
	-webkit-transition:all 2s;
	   -moz-transition:all 2s;
			transition:all 2s;
}
#f4.In{
	-webkit-transform:scale(.75,.75) translateZ(0);
	   -moz-transform:scale(.75,.75);
			transform:scale(.75,.75);
	top:-143px;
}

.f1w, .f3b, .f3w, .f2o, .f3o, 
.f2b, .f2b2, .f2w, .f2w2{ 
	display: inline-block; 
	background: url('sprites.png') no-repeat; 
	opacity:0; 
	overflow: hidden; 
	text-indent: -9999px; 
	text-align: left; 
}
#content .f1w div,#content .f3b div,#content .f3w div,#content .f2o div,#content .f3o div, 
#content .f2b div,#content .f2b2 div,#content .f2w div,#content .f2w2 div,{
	background-image:url(sprites.png);
	position:absolute;
	-webkit-filter:blur(1px);
		filter:blur(1px);
	top:0;
	left:0;
	-webkit-transform:none;
	   -moz-transform:none;
			transform:none;
}
.f1w, .f1w>div{ background-position: -0px -0px; width: 286px; height: 37px; left:9px;top:103px;}
.f2o, .f2o>div{ background-position: -0px -351px; width: 163px; height: 210px; left:69px;top:23px;}
.f2b, .f2b>div{ background-position: -164px -162px; width: 98px; height: 101px; left:97px;top:33px;}
.f2b2, .f2b2>div{ background-position: -164px -263px; width: 98px; height: 101px; left:97px;top:33px;}
.f2w, .f2w>div{ background-position: -163px -364px; width: 79px; height: 133px; left:125px;top:94px;}
.f2w2, .f2w2>div{ background-position: -163px -497px; width: 79px; height: 133px; left:125px;top:94px;}
#content #f3 .f3o,#content #f3 .f3o>div{ background:none; left:34px;top:10px;}
	#f3 .f3o>div>div{background-image:url(sprites.png);left:0;opacity:0;position:absolute;top:0;}
	#f3 .f3o>div>div.On{opacity:1}
	#f3 .f3o>div>div:nth-child(1){background-position: -0px -561px; width: 159px; height: 96px; left:2px;}
	#f3 .f3o>div>div:nth-child(2){background-position: -0px -661px; width: 35px; height: 96px; top:100px;}
	#f3 .f3o>div>div:nth-child(3){background-position: -45px -661px; width: 35px; height: 96px; left:45px;top:100px;}
	#f3 .f3o>div>div:nth-child(4){background-position: -86px -661px; width: 41px; height: 96px; left:86px;top:100px;}
	#f3 .f3o>div>div:nth-child(5){background-position: -131px -661px; width: 47px; height: 96px; left:130px;top:100px;}
.f3b, .f3b>div{ background-position: -0px -37px; width: 224px; height: 125px; left:36px;top:106px;}
.f3w, .f3w>div{ background-position: -0px -162px; width: 164px; height: 189px; left:67px;top:33px;}


/* animation */
@keyframes flicker{
	0%	{opacity:0}
	5%	{opacity:1}
	20%	{opacity:.2}
	21%	{opacity:1}
	65%	{opacity:1}
	70%	{opacity:.8}
	80%	{opacity:1}
	90%	{opacity:.8}
	100%{opacity:1}
}