.first {
	display:block;
	width:258px;
	height:258px;
	position:absolute;
	left:20%;
	top:50%;
	transform:translate(-50%,-50%);
}
.second {
	display:block;
	width:258px;
	height:258px;
	position:absolute;
	left:80%;
	top:50%;
	transform:translate(-50%,-50%);
}
.tree {
	fill: green
}  
.circle-mask {
	transform-origin: 50% 90%;
	animation: scale 5s;
}  
@keyframes scale {
	0%{
	  transform: scale(0.0);
	}
	10%{
	  transform: scale(0.2);
	}
	30%{
		transform: scale(0.4);
	}
	50% {
	  transform: scale(0.6);
	}
	70%{
		transform: scale(0.8);
	}
	100% {
		transform: scale(1);
	}
}

@keyframes view {
	0%{
		opacity: 0.2;
	}
	10%{
		opacity: 0.4;
	}
	30%{
		opacity: 0.6;
	}
	50% {
		opacity: 0.8;
	}
	70%{
		opacity: 0.9;
	}
	100% {
		opacity: 1;
	}
}

.earth_img{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	animation: view 5s ease-in-out;
}

.cloud{
	
	width: 150px;
}

.cloud_one{
	position: absolute;
	top: 20%;
	left: 25%;
	animation: one 2s;
}

@keyframes one{
	0%{
		left: 0%;
	}
	100%{
		left: 25%;
		opacity: 1;
	}
}

.cloud_two{
	position: absolute;
	top: 20%;
	left: 64%;
	animation: two 2s;
}

@keyframes two{
	0%{
		left: 100%;
	}
	100%{
		left: 64%;
		opacity: 1;
	}
}

@media screen and (max-width: 800px) {
	.second, .earth_img, .cloud{
		display: none;
	}
	.first{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: (-50%, -50%);
	}
	h1{
		text-align: center;
	}
}
@media screen and (min-width: 800px) {
	h1{
		display: none;
	}
}