/************************************ RESET ************************************************/
* {margin: 0; padding: 0; border: 0; outline: 0; list-style: none; box-sizing: border-box; text-decoration: none;}
img {max-width: 100%; height: auto;}




/************************************ FORMATO ************************************************/
.alignleft {float: left; margin: 0 20px 20px 0;}
.alignright {float: right; margin: 0 0 20px 20px;}
.aligncenter {display: block; margin: 0 0 20px 0; text-align: center;}

.columnas {display: flex; flex-wrap: wrap; margin: 0 -15px;}
.columnas > div {flex: 1 1 300px; padding: 0 15px 30px;}
.columnas > div.columna25 {width: 25%;}
.columnas > div.columna50 {width: 50%;}
.columnas > div.columna33 {width: 33.3333%;}
.columnas > div.columna66 {width: 66.6666%;}
.columnas > div.columna75 {width: 75%;}




/****************************** ESTILOS DE TEXTO ******************************/
html {background: #f3f3f3;}
body {max-width: 1200px; padding: 0 15px; margin: 0 auto; font-family: 'Muli', sans-serif; font-size: medium; color: #555; overflow-x: hidden;}
header {margin: 0 calc(-50vw + 50%); padding: 20px calc(50vw - 50%); text-align: center; border-top: 5px solid #3088b3; background: white;}
section {margin: 0 calc(-50vw + 50%); padding: 80px calc(-50% + 50vw); border-top: 1px solid #ddd;}
section:nth-of-type(odd) {background: white;}
footer {margin: 0 calc(-50vw + 50%); padding: 50px calc(50vw - 50%);}

h1 {font-size: 220%; margin: 0 auto 30px; font-weight: normal; text-align: center; color: #3088b3;}
h2 {font-size: 220%; margin: 0 auto 10px; font-weight: normal; text-align: center; color: #3088b3;}
h3 {font-size: 130%; margin: 0 auto 30px; font-weight: normal; text-align: center;}
h4 {font-size: 130%; font-weight: normal; text-align: center; padding: 15px;}

hr {display: block; width: 60px; border-bottom: 2px solid #3088b3; margin: 30px auto;}

p {margin-bottom: 30px; line-height: 150%;}
small {font-size: 85%;}
img {max-width: 100%;}
sup {font-size: 50%;}
a {color: #3088b3;}

.banner {margin: 0 calc(-50vw + 50%); background: url(images/cabecera_fondo.jpg) repeat-x 0 0 white; background-size: 100% 100%; text-align: center;}
.banner img {max-width: 100vw;}
.antesydespues {border-radius: 6px; margin-bottom: 15px; box-shadow: 0 15px 15px -15px rgba(0,0,0,.5);}
.carta {height: 100%; background: white; box-shadow: 0 15px 15px -15px rgba(0,0,0,.5);}
.carta div {padding: 30px;}
.carta h3 {text-transform: uppercase;}

.desplegar {cursor: pointer;}
.desplegable {display: none;}

footer img {vertical-align: baseline; margin-right: 30px;}



/****************************** FORM ******************************/
form {margin: 0 calc(-50vw + 50%); padding: 100px calc(50vw - 50%); background: #333; color: #ccc;}
form h2 {color: white;}
label {display: block; margin-bottom: 6px;}
textarea {height: 210px; resize: none;}

input[type=text], input[type=email], textarea {
	display: block;
	width: 98%;
	padding: 8px 15px;
	font-family: inherit;
	font-size: inherit;
	font-style: italic;
	border: 1px solid #ccc;
	margin-bottom: 6px;
	color: #333;
	background: #ddd;
	transition: .2s;
	border-radius: 5px;
}
input[type=text]:focus, input[type=email]:focus, textarea:focus {
	background: white;
}
input[type=submit], .button {
	display: inline-block;
	padding: 10px 30px;
	color: #fff;
	background: #3088b3;
	font-size: 120%;
	font-family: inherit;
	text-transform: uppercase;
	cursor: pointer;
	border-radius: 99px;
	transition: .2s;
}
input[type=submit]:hover, .button:hover {
	opacity: .8;
	padding: 10px 33px;
}




/****************************** GRACIAS ******************************/
.gracias {margin: 0 auto; text-align: center; margin-top: 20%;}




/****************************** MEDIA QUERIES ******************************/
@media all and (max-width: 768px){
	h1, h2 {font-size: 1.6rem; line-height: normal;}
	h1 br, h2 br {display: none;}
	section {padding-top: 50px; padding-bottom: 50px;}
}