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

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

@-webkit-keyframes plane {
    0%  {top: 0px; left:-320px; }
    50%  {top: 10%; left: 50%;}
    100% {top: 35%; left:100%;}
}

@-moz-keyframes plane {
   0%  {top: 0px; left:-320px; }
    50%  {top: 10%; left: 50%;}
    100% {top: 35%; left:100%;}
}

@keyframes plane {
     0%  {top: 0px; left:-320px; }
    50%  {top: 10%; left: 50%;}
    100% {top: 35%; left:100%;}
}

/*
body {
	background-color:#52B3D9;
}
*/
.cloud {
	position: absolute;
	background-color: #C5EFF7;
	width:7em;
	height:7em;
	border-radius: 7em;
	left: 80%;
	top:5%;
	animation: sky 8s infinite;
	-webkit-animation: sky 8s infinite;
	z-index: -1;
}


.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 12s infinite;
	-webkit-animation: sky 12s 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 18s infinite;
	-webkit-animation: sky 18s 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;
}

.plane {
  background-image: url("../images/heartplane08.png");
  width: 400px; 
  height: 500px; 
  background-repeat: no-repeat;
  position: absolute;  
  animation: plane 25s infinite;
  -webkit-animation: plane 25s infinite;
  -moz-animation: plane 25s infinite;
}