@charset "utf-8";

/* CSS Document */
*{margin:0;
  padding:0;
}

html{background-color:#509597;
}

body{
font-family:"WWF", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
background:url(../img/bg_reforestacion_low.jpg) no-repeat top;
/*background-repeat:repeat-y;*/
/*height:100%;*/
}		
	
#logo {position:absolute;
top:0%;
left:1%;
width:8%;
}
		
#container{
	width:250px;
	margin:5% auto;
	padding:40px;
	background:rgba(255,255,255,0.8);
	border-radius:8px;
	border:thin solid #CCC;
	text-align:center;
	}	
	
h1{
	font-family:WWF, Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size:22px;
	margin-bottom:20px;
	font-weight:lighter;
	}
input{
	border:none;
	padding:3px;
	width:100%;
	box-sizing: border-box;
	margin-bottom:10px;
	border-radius:2px;
	font-family: 'WWF';
    font-size: x-large;
	}
input:focus{
	background:#FFC;
	}		
input[type="submit"]{
	width:60%;
	background:#f09848;
	color:#FFF;
	border-radius:2px;
	font-family: 'WWF';
    font-size: xx-large;
    padding: 0 4px 5px 4px;
	transition:0.5s;
	border: 1px solid black;
}
	
input[type=submit]:hover {
    background:#da7112;	    
	}
.boton{
	width:30%;
	background:#333;
	color:#FFF;
	border-radius:2px;
	display:block;
	text-align:center;
	line-height:22px;
	height:22px;
	}		
.boton:hover {
	background:#f89840;
	color:black;
	}			
a{
	font-size:14px;
	color:#FFF;
	text-decoration:none;
	}		
	
@media (max-width: 890px) 
{
#logo {top:30px;
width:80px;
left:5%;
}
}
	
@media (max-width: 690px)
{  
#logo {top:-60px;
left:5%;
}
}

@media (max-width: 790px)
{  
#logo {top:30px;
left:5%;
}
}
 		
@media (max-width: 659px)
{
#logo {top:30px;
width:60px;	
left:5%;	
}
#container {margin:140px auto;
}
}		
		
@media (max-width: 479px)
{
#logo {top:5%;
width:60px;	
left:8%;	
}
#container {margin:160px auto;
}
}