@charset "UTF-8";
/* CSS Document */
/*Estilos generales
*/
*{
	margin: 0;
	padding: 0;
}
body {
	font-family: 'Lato', sans-serif;
}
h1, h2, h3
	{font-family: 'Merryweather', serif;
		padding: 1em 0 1em 0;
}
h1{
	font-size: 3em;	
}
p {
	margin-top: 2em;
	font-size: 1em;
}
/* Todos los enlacesde mi web no tendrán subrayado, a no ser que yo diga que lo quiero*/
a {text-decoration: none;
}
img{width:100%;}

/*Estilos del menú*/
nav{
	background-color: black;
}

ul {
	list-style-type: none; /*para no tener puntitos*/
	padding: 1% 0 2% 0;
	text-align: center; /* le dices a la lista que coloque sus li centrados*/
}

li{
	display: inline;
	padding: 1em; 
}

li:hover {
	background-color: aqua;
}

/* Todos los enlaces que están dentro del ul sean color blanco*/
ul a{
	color:white;
}
div{
	box-sizing: border-box;
}
/* Header*/
header{
	background-image: url(img/paisajebonito.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	text-align: center;
	/*También lo puedo hacer así y colocar el h1 con margen, height: 800px*/
}

header h1{
	padding: 15% 0 28% 0
}

/* Estilos de la section*/
.flotar{float:left;}
.clear{clear:both;}
.dos-columnas {width: 50%;}
.tres-columnas{width: 33%;}
.margenes-texto{padding:2em;}

/*estilos del footer*/
footer{
	background-color: black;
	color:yellow;
	text-align: center;
}
footer p{
	padding:3em 0em 2em 0em;
}

/*Estilos volver*/
.volver {
	padding: 2em;
	margin: 1em;
	background-color: yellow;
	text-align: center;
	float:right;
	border: 3px solid black;
}

.amarillo{
	background-color: yellow;
	padding: 0.25em;
	
}
.paddingtexto {
	padding: 1em 2em;
}

@media screen  and (orientation:portrait) {
	li {display: block;}
	.dos-columnas, .tres-columnas {width: 100%;}
	.volver {float: none;}

}
.main {
	width: 80%;
	margin: 0 auto;
}