body{
	background:#eef5fb;
	padding:0;
	margin:0;
	height:100vh;
	overflow: visible!important;
}
body.fullwindow{
	height: 100vh!important;
}
.loading {
  width: 100px;
  height: 102px;
  border-radius: 100%;
  position: fixed;
  top: 45%;
  left: calc(50% - 50px);
  z-index: 3;
}

.circle {
  width: 100%;
  height: 100%;
  position: absolute;
}
.circle .inner {
  width: 100%;
  height: 100%;
  border-radius: 100%;
  border: 5px solid #b5bb00;
  border-right: none;
  border-top: none;
  backgroudn-clip: padding;
  box-shadow: inset 0px 0px 10px rgba(181, 187, 0, 0.15);
}

@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.circle:nth-of-type(0) {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}
.circle:nth-of-type(0) .inner {
  -webkit-animation: spin 2s infinite linear;
          animation: spin 2s infinite linear;
}

.circle:nth-of-type(1) {
  -webkit-transform: rotate(70deg);
          transform: rotate(70deg);
}
.circle:nth-of-type(1) .inner {
  -webkit-animation: spin 2s infinite linear;
          animation: spin 2s infinite linear;
}

.circle:nth-of-type(2) {
  -webkit-transform: rotate(140deg);
          transform: rotate(140deg);
}
.circle:nth-of-type(2) .inner {
  -webkit-animation: spin 2s infinite linear;
          animation: spin 2s infinite linear;
}

.loading {
  -webkit-animation: spin 5s infinite linear;
          animation: spin 5s infinite linear;
}

.page{
	opacity:0;
	transition: opacity linear 0.3s;
	position: relative;
	z-index: 2;
}
.page.visible{
	opacity:1;
}
#cloud-1{
	position: fixed;
	top:24vh;
	width:23%;
	z-index: 1;
}
#cloud-2{
	position: fixed;
	top:27vh;
	width:19%;
	z-index: 1;
}

#cloud-3{
  position: fixed;
  width:15%;
  z-index: 6;
}
#cloud-4{
  position: fixed;
  width:22%;
  z-index: 6;
}


#plane-1{
	position: fixed;
	top:10vh;
	width:15%;
	z-index: 4;
}
#buildings-1{
	position: fixed;
	width:100%;
	left:0;
	z-index: 1;
}
#buildings-2{
	position: fixed;
	width:100%;
	left:0;
	z-index: 2;
}
#buildings-3{
	position: fixed;
	width:100%;
	left:0;
	z-index: 3;
}

#buildings-4{
	position: fixed;
	width:100%;
	left:0;
	z-index: 3;
}

.bridge-train{
	position: fixed;
	width:100%;
	left:0;
	z-index: 6;
}
.fake-base{
	position: absolute;
	top:100%;
	left:0;
	width:100%;
	background: #eef5fb;
	height:100vh;
}
#bridge{
	position: absolute;
	left:0;
	bottom:0;
	width:100%;
	z-index: 1;
}
#train{
	position: absolute;
  width: 109%;
  left: 0;
  z-index: 3;
  transform: translate(0,-345%);
}

#base{
	position: fixed;
	width:100%;
	height:100vh;
	background: #eef5fb;
	left:0;
	z-index: 5;
}
#base2{
	position: fixed;
	width:100%;
	left:0;
	z-index: 7;
}
#base3{
	position: fixed;
    width: 100%;
    left: 0%;
    z-index: 7;
}


#b11{
	position: fixed;
    width: 15%;
    left: 8%;
    z-index: 9;
}
#b12{
	position: fixed;
    width: 22%;
    left: 18.5%;
    z-index: 9;
}
#b13{
	position: fixed;
    width: 10%;
    left: 37.5%;
    z-index: 9;
}

#b14{
	position: fixed;
    width: 10%;
    left: 48.5%;
    z-index: 9;
}
#b15{
	position: fixed;
    width: 20%;
    left: 59%;
    z-index: 7;
}
#b16{
	position: fixed;
    width: 13%;
    left: 76%;
    z-index: 6;
}

#b21{
	position: fixed;
    width: 27%;
    bottom: 18%;
    z-index: 9;
}

#b22{
	position: fixed;
    width: 34%;
    bottom: 18%;
    z-index: 9;
}
#b23{
	position: fixed;
    width: 14%;
    bottom: 19%;
    z-index: 9;
}
#b24{
	position: fixed;
    width: 19%;
    bottom: 18%;
    z-index: 9;
}
#b25{
	position: fixed;
    width: 26%;
    bottom: 14%;
    z-index: 8;
}
#b26{
	position: fixed;
    width: 20%;
    bottom: 19%;
    z-index: 7;
}
#car_red {
	position: fixed;
    width: 20%;
    z-index: 10;
    left: 50%;
}
#car_yellow {
	position: fixed;
    width: 20%;
    z-index: 10;
    left: 25%;
}
.tree{
	position: fixed;
    width: 20%;
    z-index: 10;
    left: 6%;
    width: 3%;
    bottom: 14%;
}
#tree1{
    left: 6%;
}
#tree2{
    left: 25%;
}
#tree3{
    left: 45%;
}
#tree4{
    left: 63%;
}
#tree5{
    left: 80%;
}
#tree6{
    left: 94%;
}

.mouse{
	position: fixed;
	bottom: 50px;
	left:50%;
	transform: translate(-50%,0);
	background:url(../../img/animation/mouse-scroll.png);
	width:35px;
	height:55px;
	z-index: 15;
}
.mouse .arrow{
	position: absolute;
    bottom: -22px;
    left: 0;
    background: url(../../img/animation/mouse-scroll.png);
    width: 35px;
    height: 20px;
    background-position: 0px -56px;
    -moz-animation: bounce 2s infinite;
    -webkit-animation: bounce 2s infinite;
    animation: bounce 2s infinite;
}
.logo{
	position: fixed;
	left:50%;
	top:50%;
	transform: translate(-50%,-50%);
	width:206px;
	height: 52px;
	z-index: 5;
}
.logo .logo-border{
	position: absolute;
	top:0;
	left:0;
	width:206px;
	height: 52px;
	background: url(../../img/animation/logo-border.png) no-repeat;
}
.logo .logo-fill{
	position: absolute;
	bottom:0;
	left:0;
	width:206px;
	height: 0%;
	background: url(../../img/animation/logo-fill.png) center bottom no-repeat;
	overflow: hidden;
	z-index: 1;
}

@-moz-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(12px);
    transform: translateY(12px);
  }
  60% {
    -moz-transform: translateY(6px);
    transform: translateY(6px);
  }
}
@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(12px);
    transform: translateY(12px);
  }
  60% {
    -webkit-transform: translateY(6px);
    transform: translateY(6px);
  }
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(12px);
    -ms-transform: translateY(12px);
    -webkit-transform: translateY(12px);
    transform: translateY(12px);
  }
  60% {
    -moz-transform: translateY(6px);
    -ms-transform: translateY(6px);
    -webkit-transform: translateY(6px);
    transform: translateY(6px);
  }
}
.btn{
	position: fixed;
	left:50%;
	bottom:35%;
	z-index: 11;
	cursor: pointer;
}
#person{
	position: fixed;
    left: 59%;
    z-index: 9;
    cursor: pointer;
    width: 0.9%;
}
@media only screen and (max-width: 1023px) {
	.mouse{
		background: url(../../img/animation/hand-scroll.png);
	    width: 35px;
	    height: 55px;
	    background-size: cover;
	    bottom: 20px;
	    -moz-animation: bounce 2s infinite;
	    -webkit-animation: bounce 2s infinite;
	    animation: bounce 2s infinite;
	}
	.mouse .arrow{
		display: none;
	}
}
@media only screen and (max-width: 767px) {
	.logo{
		width:179px;
		height: 45px;
	}
	.logo .logo-border{
		width:179px;
		height: 45px;
		background-size: cover;
	}
	.logo .logo-fill{
		width:179px;
		background-size: cover;
	}
	.btn{
	    width: 30%;
	}
	.loading{
		width: 90px;
    	height: 92px;
 		top:38%;
 	}
	
}