/**/
@-webkit-keyframes sky {
    from {left: 110%}
    to {left: -30%;}
}

@keyframes sky {
    from {left: 110%}
    to {left: -30%;}
}
/**/
@-webkit-keyframes skyup {
    100% {top: -150%;}
}
/**/
@-webkit-keyframes airplane {
    0% {top: 60%; left:-30%;}
    50% {top:40%; left:50%;}
    100% {top:20%; left:150%;}
}



/*@keyframes airplane {
    0% {top: 40%; left:20%;}
    25% {top: 55%; left:40%;}
    75% {top:30%; left:10%;}
    100% {top:40%; left:20%;}
}*/

body {
	background-color:#52B3D9;
  overflow: hidden;
}
body .clouds,body .clouds:nth-of-type(2), body .clouds:nth-of-type(3) {
  -webkit-animation: skyup 3s;
}
.cloud {
	position: absolute;
	background-color: #C5EFF7;
	width:7em;
	height:7em;
	border-radius: 7em;
	left: 80%;
	top:5%;
	animation: sky 5s infinite;
	-webkit-animation: sky 5s infinite;
}

.human-air-flat {
  position: absolute;
  z-index: 99;
  width: 40px;
  /* background-size: contain; */
  height: 20px;
  background: url(../img/skydiver.png) no-repeat;
  background-size: contain;
  display: none;
}

.cloud::before {
	content:"";
	display: block;
	width:5em;
	height:5em;
	border-radius: 5em;
	background-color: #C5EFF7;
	margin-left: -2em;
}

.cloud::after {
	content: "";
	display: block;
	width: 7em;
	height: 7em;
	border-radius: 7em;
	background-color: #C5EFF7;
	margin-left: 4em;
	margin-top: -6em;
}

.cloud:nth-of-type(2) {
	background-color: #E4F1FE;
	left: 70%;
	top: 30%;
	transform: rotate(180deg) skew(-20deg);
	animation: sky 7s infinite;
	-webkit-animation: sky 7s infinite;
}

.cloud:nth-of-type(2)::before, .cloud:nth-of-type(2)::after {
	background-color: #E4F1FE;
}

.cloud:nth-of-type(3) {
	top: 70%;
	left: 80%;
	animation: sky 9s infinite;
	-webkit-animation: sky 9s infinite;
}

.cloud:nth-of-type(3)::before, .cloud:nth-of-type(3)::after {
	transform: rotate(60deg) skewY(-23deg);
	width: 6em;
	border-radius: 6em;
	height: 6em;
	margin-left: -4em;
}

.cloud:nth-of-type(3)::after {
	margin-left: -1em;
	margin-top: -9em;
}

.airplane {
  position: absolute;
    width: 500px;
    height: 200px;
    /* border-top: 100px solid transparent; */
    /* border-left: 150px solid #34495E; */
    /* border-bottom: 100px solid transparent; */
    z-index: 100;
    background: url(../img/smallplane.png) no-repeat;
    /* transform: rotate(-20deg) skew(10deg); */
    background-size: contain;
    top: 40%;
    left: 20%;
    animation: airplane 15s;
    -webkit-animation: airplane 15s;
}

/*
.airplane::before {
	border-bottom: 27px solid #4B77BC;
	border-left: 45px solid transparent;
	border-right: 2px solid transparent;
	border-radius: -11px;
	height: 0;
	width: 100px;
	content: "";
	position: absolute;
	z-index: 6;
	height: 0em;
	margin-left: -10em;
	margin-top: -5px;
	transform: rotate(182deg) skewX(-35deg);
}

.airplane::after {
	border-bottom: 26px solid #34495E;
	border-left: 33px solid transparent;
	border-right: 2px solid transparent;
	height: 0;
	width: 98px;
	content: "";
	position: absolute;
	z-index: 6;
	height: 0em;
	margin-left: -9.9em;
	margin-top: -2px;
	transform: rotate(182deg) skewX(-47deg);
}*/

/*Humans*/
@-webkit-keyframes human1 {
    0% {top:45%; left:60%;}
    100% {top:140%; left:50%;}
}
@-webkit-keyframes human2 {
    0% {top:43%; left:65%;}
    100% {top:140%; left:60%;}
}

@-webkit-keyframes human3 {
    0% {top:43%; left:63%;}
    100% {top:140%; left:55%;}
}
@-webkit-keyframes human4 {
    0% {top:40%; left:70%;}
    100% {top:140%; left:80%;}
}
@-webkit-keyframes human5 {
    0% {top:40%; left:70%;}
    100% {top:140%; left:60%;}
}
@-webkit-keyframes human6 {
    0% {top:40%; left:65%;}
    100% {top:140%; left:50%;}
}

#human1 {
  -webkit-animation: human1 10s;
}
#human2 {
  -webkit-animation: human2 10s;
}
#human3 {
  -webkit-animation: human3 10s;
}
#human4 {
  -webkit-animation: human4 10s;
}
#human5 {
  -webkit-animation: human5 10s;
}
#human6 {
  -webkit-animation: human6 10s;
}
/*LINE*/
@-webkit-keyframes line {
    100% {top:-150%;}
}
#white-line .line {
  top: 120%;
  left: 30%;
  position: absolute;
  background-color: white;
  width: 15px;
  height: 400px;
  display: none;
  -webkit-animation: line 4s;
}
#white-line .line:nth-of-type(2) {
  top: 154%;
  left: 13%;
}
#white-line .line:nth-of-type(3) {
  top: 105%;
  left: 66%;
}
#white-line .line:nth-of-type(4) {
  top: 115%;
  left: 78%;
}
#white-line .line:nth-of-type(5) {
  top: 165%;
  left: 50%;
}

/*HumanBig*/
@-webkit-keyframes human-p1 {
    0%{top: 215%;}
    100% {top:15%;}
}
@-webkit-keyframes human-p2 {
    0%{top: 205%;}
    100% {top:5%;}
}
@-webkit-keyframes human-p3 {
    0%{top: 245%;}
    100% {top:45%;}
}

@-webkit-keyframes human-p1-up {
    0%{top: 15%;}
    100% {top:-85%;}
}
@-webkit-keyframes human-p2-up {
    0%{top: 5%;}
    100% {top:-95%;}
}
@-webkit-keyframes human-p3-up {
    0%{top: 45%;}
    100% {top:-65%;}
}
@-webkit-keyframes knopka1-up {
    0%{top: 80%;}
    100% {top:-20%;}
}

@-webkit-keyframes human-p4 {
    0%{top: 240%;}
    100% {top:40%;}
}
@-webkit-keyframes human-p5 {
    0%{top: 205%;}
    100% {top:5%;}
}
@-webkit-keyframes human-p6 {
    0%{top: 240%;}
    100% {top:40%;}
}

@-webkit-keyframes human-p4-up {
    0%{top: 40%;}
    100% {top:-60%;}
}
@-webkit-keyframes human-p5-up {
    0%{top: 5%;}
    100% {top:-95%;}
}
@-webkit-keyframes human-p6-up {
    0%{top: 40%;}
    100% {top:-60%;}
}

@-webkit-keyframes knopka1 {
    0%{top: 280%;}
    100% {top:80%;}
}
.parashut-knopka {
  background: url('../img/strelka.png');
  background-size: contain;
  width: 100px;
  height: 100px;
  position: absolute;
  left: 45%;
  top: 80%;
  transform:rotate(90deg);
  -webkit-animation: knopka1 4s;
  cursor: pointer;
}
.parashut-knopka:hover{
  border-radius: 50%;
  border: solid 4px white;
}
.parashutist {
  width: 256px;
  height: 400px;
  background-size: contain;
  position: absolute;
  font-size: 25px;
  padding-top: -20px;
  text-align: center;
  color: white;
  font-family: "Verdana", sans-serif;
  cursor: pointer;
}

#parashutist1 .parashutist,#parashutist2 .parashutist, .parashut-knopka  {
  display: none;
}
#human-p1 {
  background-image: url('../img/parashut1.gif');
  top: 15%;
  left: 10%;
  -webkit-animation: human-p1 4s;
}
#human-p2 {
  background-image: url('../img/parashut2_test.gif');
  top: 5%;
  left: 45%;
  -webkit-animation: human-p2 4s;
}
#human-p3 {
  background-image: url('../img/parashut3.gif');
  top: 45%;
  left: 75%;
  -webkit-animation: human-p3 4s;
}
#human-p4 {
  background-image: url('../img/parashut4.gif');
  top: 40%;
  left: 15%;
  -webkit-animation: human-p4 4s;
}
#human-p5 {
  background-image: url('../img/parashut5.gif');
  top: 5%;
  left: 40%;
  -webkit-animation: human-p5 4s;
}
#human-p6 {
  background-image: url('../img/parashut6.gif');
  top: 40%;
  left: 75%;
  -webkit-animation: human-p6 4s;
}

/*Холм*/
@-webkit-keyframes holm {
    0% {bottom: -100%}
    100% {bottom: 0%;}
}
.holm {
  display: none;
  width: 2000px;
  height: 1200px;
  background: url('../img/holm.png') no-repeat;
  background-size: 100%;
  position: absolute;
  bottom: 0;
  z-index: 1000;
  left: 0;
  background-position-y: bottom;
  -webkit-animation: holm 4s;
}
.btn {
  border-radius: 8px;
  background-color: #26a69a;
  color: white;
  padding: 5px;
  position: relative;
  top: 30%;
  left: 50%;
  font-size: 14px;
  outline: 0;
  border: none;
  border-radius: 2px;
  display: inline-block;
  height: 36px;
  line-height: 36px;
  padding: 0 16px;
  text-transform: uppercase;
  cursor: pointer;
}