*{
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
html, body{
	overflow: hidden;
}
li{
	list-style: none;
}
body{
	background: url('../images/bg.jpg') no-repeat center center;
	background-size: cover;
}
@font-face {
  font-family: 'bpgEsm';
  src: url('../fonts/bpg_extrasquare_mtavruli.eot');
  src: local('☺'), url('../fonts/bpg_extrasquare_mtavruli.woff') format('woff'), url('../fonts/bpg_extrasquare_mtavruli.ttf') format('truetype'), url('../fonts/bpg_extrasquare_mtavruli.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}
.logo{
	display: block;
	margin: 0 auto;
	text-align: center;
	margin-top: 5%;
}
.block{
	width: 420px; 
	height: 450px;
	background: #eff4f6;
	margin: 0 auto; 
	margin-top: 5%;    
	padding-top: 36px;
	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	position: relative;
	-webkit-box-shadow: 0px 10px 0px 0px rgba(27,27,27,0.17);
	-moz-box-shadow: 0px 10px 0px 0px rgba(27,27,27,0.17);
	box-shadow: 0px 10px 0px 0px rgba(27,27,27,0.17);
}
.how{
	display: block;
	position: absolute;
    top: 35px;
    left: 0;
    right: 0;
    margin: 0 auto;
}
.text{
	font-family: bpgEsm;
	font-size: 20.5px;
	color: #a4b65f;
	text-align: center;
    position: absolute;
    top: 139px;
    left: 0px;
    right: 0px;
    margin: 0 auto;
    z-index: 100;
}
.start{
	display: block;
	width: 219px;
	height: 65px;
	position: absolute;
	bottom: -37px;
	left: 0;
	right: 0;
	margin: 0 auto;
	text-align: center;
	font-family: bpgEsm;
	font-size: 17px;
	color: #fff;
	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	background: url('../images/startbg.jpg') repeat-x;
}
.start >  .over{
	width: 100%;
	height: 100%;
	padding: 0 4px;
	background: url('../images/arrow.png') no-repeat right 20px center;
}
.over > span{
	display: block;
	width: 100%;
	height: 7px;
	background-color: #d9e026;
	margin-top: 3px;
    margin-bottom: 16px;
}
@keyframes circle{
	from {
		transform: rotate(0deg);
	}
	to{
		transform: rotate(360deg);
	}
}
.circle{
    width: 79%;
    display: block;
    position: absolute;
    top: 140px;
    left: 0;
    right: 0;
    margin: 0 auto;
    animation: circle 20s linear infinite;
}
.tut{
    width: 38%;
	position: absolute;
    bottom: 80px;
    left: 39px;
    right: 0;
    margin: 0 auto;
}
.container {
	width:100%;
	height:100%;
	position:relative;
	background: none;
	padding: 0;
}
ul.scene{
	width:100%;
	height: 100%
}
.layer div {
	position:absolute;
}
.bubble1{
	bottom: 57px;
	left: -22px;
}
.bubble2{
	top: -66px;
    left: -43px;
}
.bubble3{
	top: -76px;
    left: -30px;
}
.bubble4{
    top: -72px;
    right: -50px;
}
.bubble5{
	top: -72px;
    right: -50px;
}
.bubble6{
	top: -103px;
    right: -37px;
}