html{
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
	overflow-x: hidden;
	overflow-y: hidden; 
}
body{
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
	text-rendering: optimizeLegibility;
  	-webkit-font-smoothing: antialiased;

	background: #e7f0f4;
/*	background: -moz-linear-gradient(top, #1f8aab 0%, #d3e4eb 54%, #d3e4eb 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, #1f8aab), color-stop(54%, #d3e4eb), color-stop(100%, #d3e4eb));
	background: -webkit-linear-gradient(top, #1f8aab 0%, #d3e4eb 54%, #d3e4eb 100%);
	background: -o-linear-gradient(top, #1f8aab 0%, #d3e4eb 54%, #d3e4eb 100%);
	background: -ms-linear-gradient(top, #1f8aab 0%, #d3e4eb 54%, #d3e4eb 100%);
	background: linear-gradient(to bottom, #1f8aab 0%, #d3e4eb 54%, #d3e4eb 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1f8aab', endColorstr='#d3e4eb', GradientType=0 );*/
	background-image: url(back.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100% auto; /* width and height, can be %, px or whatever. */
}

@keyframes animatedBackground {
	25% { background-position: 50% 0%; }
	75% { background-position: -50% -7%; }
}
@-webkit-keyframes animatedBackground {
	25% { background-position: 50% 0%; }
	75% { background-position: -50% -7%; }
}
@-ms-keyframes animatedBackground {
	25% { background-position: 50% 0%; }
	75% { background-position: -50% -7%; }
}
@-moz-keyframes animatedBackground {
	25% { background-position: 50% 0%; }
	75% { background-position: -50% -7%; }
}

@keyframes animationNotFound {
	0% { bottom: 50px; }
	50% { bottom: 75px;  }
}
@-webkit-keyframes animationNotFound {
	0% { bottom: 50px; }
	50% { bottom: 75px;  }
}
@-ms-keyframes animationNotFound {
	0% { bottom: 50px; }
	50% { bottom: 75px;  }
}
@-moz-keyframes animationNotFound {
	0% { bottom: 50px; }
	50% { bottom: 75px;  }
}

.wave{
	background-image: url(waves.png);
	background-position: 0px 0px;
	position: absolute;
	width: 100%;
	left: 0;
	height: 91px;
	background-repeat: repeat-x;
	animation: animatedBackground 20s ease-in-out infinite;
	-ms-animation: animatedBackground 20s ease-in-out infinite;
	-moz-animation: animatedBackground 20s ease-in-out infinite;
 	-webkit-animation: animatedBackground 20s ease-in-out infinite;
}

#wave1{
	bottom: 0;
}
#wave2{
	background-image: url(waves2.png);
	bottom: 25px;
	background-size: auto 60px;
	animation: animatedBackground 30s 1s ease-in-out infinite;
	-ms-animation: animatedBackground 30s 1s ease-in-out infinite;
	-moz-animation: animatedBackground 30s 1s ease-in-out infinite;
	-webkit-animation: animatedBackground 30s 1s ease-in-out infinite;
}
#wave3{
	background-image: url(waves3.png);
	bottom: 40px;
	background-size: auto 40px;
	animation: animatedBackground 40s 2s ease-in-out infinite;
	-ms-animation: animatedBackground 40s 2s ease-in-out infinite;
	-moz-animation: animatedBackground 40s 2s ease-in-out infinite;
	-webkit-animation: animatedBackground 40s 2s ease-in-out infinite;
}
#wave4{
	background-image: url(waves4.png);
	bottom: 45px;
	background-size: auto 20px;
	animation: animatedBackground 40s 2s ease-in-out infinite;
	-ms-animation: animatedBackground 40s 2s ease-in-out infinite;
	-moz-animation: animatedBackground 40s 2s ease-in-out infinite;
	-webkit-animation: animatedBackground 50s 3s ease-in-out infinite;
}
#text{
	position: absolute;
	background-image: url(404.png);
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: auto 190px;
	height: 500px;
	width: 420px;
	color: #fff;
	bottom: 50px;
	left: 40%;
	font-size: 1000%;
	font-weight: bold;
	-webkit-transform: rotate(346deg);
	-moz-transform: rotate(346deg);
	-o-transform: rotate(346deg);
	writing-mode: lr-tb;
	text-shadow: 0px 0px 2px rgba(0, 0, 0, 1);
	text-decoration: underline;
	animation: animationNotFound 20s ease infinite;
	-ms-animation: animationNotFound 20s ease infinite;
	-moz-animation: animationNotFound 20s ease infinite;
 	-webkit-animation: animationNotFound 20s ease infinite;
}

@keyframes clouds {
	0% { background-position: 0% 0%; }
	100% { background-position: 100% 0%;}
}
@-webkit-keyframes clouds {
	from { background-position: 0% 0%;}
	to { background-position: 2000px 0%;}
}
@-ms-keyframes clouds {
	0% { background-position: 0% 0%;}
	100% { background-position: 100% 0%;}
}
@-moz-keyframes clouds {
	0% { background-position: 0% 0%;}
	100% { background-position: 100% 0%;}
}

.clouds{
	background-image: url(cloud.png);
	background-position: 0px 0px;
	background-size: auto 200px;
	position: absolute;
	top: 0;
	left: 0;
	height: 200px;
	width: 100%;
	background-repeat: repeat-x;
	animation: clouds 60s linear infinite;
	-ms-animation: clouds 60s linear infinite;
	-moz-animation: clouds 60s linear infinite;
 	-webkit-animation: clouds 60s linear infinite;
}
.clouds2{
	background-image: url(cloud2.png);
	background-size: auto 200px;
	top: -50px;
	animation: clouds 90s linear infinite;
	-ms-animation: clouds 90s linear infinite;
	-moz-animation: clouds 90s linear infinite;
 	-webkit-animation: clouds 90s linear infinite;
}
.clouds3{
	background-image: url(cloud2.png);
	background-size: auto 150px;
	top: 50px;
	animation: clouds 120s linear infinite;
	-ms-animation: clouds 120s linear infinite;
	-moz-animation: clouds 120s linear infinite;
 	-webkit-animation: clouds 120s linear infinite;
}
.clouds4{
	background-image: url(cloud2.png);
	background-size: auto 100px;
	top: 130px;
	animation: clouds 120s linear infinite;
	-ms-animation: clouds 120s linear infinite;
	-moz-animation: clouds 120s linear infinite;
 	-webkit-animation: clouds 120s linear infinite;
}
.isle{
	background-image: url(isle.png);
	background-repeat: no-repeat;
	background-position: center bottom;
	position: absolute;
	background-size: 250px auto;
	left: 10%;
	bottom: 90px;
	height: 500px;
	width: 350px;
}
@media screen and (max-width: 600px) {
	#text{
		background-size: auto 150px;
		height: 500px;
		width: 400px;
		color: #fff;
		bottom: 50px;
		left: 0%;
	}

	body{
		background-size: auto 100%; /* width and height, can be %, px or whatever. */
	}
}