.box {
	height: 628px; 
	position: relative; 
	width: 100%;  
	overflow-x:hidden;
}
.logo {
	width:244px; 
	height:37px; 
	position:absolute; 
	top:20px; 
	left:20px; 
	z-index:20;
	background:url(../images/logo.png) no-repeat;
}
.error {text-align:center !important;}
h1, h2 {text-shadow:none!important;}
.sun {
	background-image: url('../images/error/sun.png');
	width: 95px; 
	height: 90px; 
	position: absolute; 
	background-repeat: no-repeat; 
	top: 50px; 
	left: 700px; 
	animation-name: sun;
	-webkit-animation-name: sun;	
	animation-duration: 1.5s;	
	-webkit-animation-duration: 1.5s;	
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite; 
	z-index:5;}
.clouds {
	background-image: url("../images/error/clouds.png"); 
	height: 153px; 
	position: absolute; 
	top: 10%; 
	width: 100%; 
	-webkit-animation-timing-function: linear; 
	animation-timing-function: linear; 
	z-index:10;
	animation-name: clouds;	
	-webkit-animation-name: clouds;	
	animation-duration: 200s;	
	-webkit-animation-duration: 200s;	
	animation-iteration-count: infinite; 
	-webkit-animation-iteration-count: infinite; 
	opacity:0.8;
}
.boats {
	background-image: url('../images/error/boats.png'); 
	width: 100%; 
	height: 159px;
	position: absolute;  
	top: 440px; 
	-webkit-animation-name: boats; 
	animation-name: boats; 
	-webkit-animation-timing-function: linear; 
	animation-timing-function: linear; 
	-webkit-animation-duration: 120s; 
	animation-duration: 120s;
	z-index:15; 
	overflow:hidden;
}
.landscape {
	width:100%; 
	min-height:628px;
	background:url('../images/error/background.png') no-repeat;
}
/* Animation BOATS */
@keyframes boats {
	0% 		{transform: translateX(0%);}
	100% 	{transform: translateX(100%);}			
}
@-webkit-keyframes boats {
	0% 		{-webkit-transform: translateX(0%);}
	100% 	{-webkit-transform: translateX(100%);}			
}
/* Animation CLOUDS */
@keyframes clouds {
	0% 		{transform: translateX(0%);}
	100% 	{transform: translateX(50%);}			
}
@-webkit-keyframes clouds {
	0% 		{-webkit-transform: translateX(0%);}
	100% 	{-webkit-transform: translateX(50%);}			
}
/* Animation SUN */
@keyframes sun {
	0% 		{transform: scale(0.95);opacity: 0.85;}
	50% 	{transform: scale(1);opacity: 1;}	
	100% 	{transform: scale(0.95);opacity: 0.85;}			
}
@-webkit-keyframes sun {
	0% 		{-webkit-transform: scale(0.95); opacity: 0.85;}
	50% 	{-webkit-transform: scale(1);	opacity: 1;}	
	100% 	{-webkit-transform: scale(0.95);opacity: 0.85;	}			
}
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-width : 320px)
and (max-width : 480px) {
.box { height:100px; background:#2fa386;}
.logo {width:100%; position:absolute; top:20px; left:20px; z-index:20;}
.sun {display:none;}
.clouds {display:none;}
.boats {display:none;}
.landscape {display:none;}
.background-resp {display:none;}
}
/* Tablets (landscape) ----------- */
@media only screen
and (min-width : 768px)
and (max-width : 1024px)
{
.box { height:100px; background:#2fa386; }
.logo {width:100%; position:absolute; top:20px; left:20px; z-index:20;}
.sun {display:none;}
.clouds {display:none;}
.boats {display:none;}
.landscape {display:none;}
.background-resp {display:none;}
}