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




/************************************ FORMATO ************************************************/
html {background: black;}
body {display: block; position: relative; width: 1200px; max-width: 90%; margin: 0 auto; overflow-x: hidden;}
body {font-family: 'Roboto', sans-serif; font-size: large; color: #fff;}

.columnas {display: flex; margin: 0 -15px; flex-wrap: wrap}
.columna {flex: 1 1 auto; padding: 0 15px;}
.columna_25 {width: 25%;}
.columna_33 {width: 33.3333%;}
.columna_40 {width: 40%;}
.columna_50 {width: 50%;}
.columna_60 {width: 60%;}
.columna_66 {width: 66.6666%;}
.columna_75 {width: 75%;}



/****************************** HEADER ******************************/
header {}

.logo {vertical-align: middle; max-width: 85%;}




/****************************** ARTICLE ******************************/
article {}

.fullsize {position: relative; display: flex; flex-direction:column; justify-content: center; padding: 100px calc(50vw - 50%); margin: 0 calc(-50vw + 50%); min-height: 100vh; background: no-repeat center left; background-size: contain;}
.portada {background-image: url("images/fondo-cabecera.jpg"); background-position: left top; text-align: center;}
.quienes_somos {background-image: url("images/fondo-equipo.jpg"); background-position: center top;}
.que_hacemos {background-image: url("images/fondo-mision.jpg"); background-position: right top;}
.ayuda {padding: 15%; margin: 100px 0; background-color: white; color: black; text-align: center; border-radius: 10px;}

h1, h2 {font-size: 4rem; font-weight: normal; text-transform: uppercase; line-height: 1.1em; margin: 3rem 0; letter-spacing: -.03em;}
h2 {margin-top: 0;}
h3 {font-size: 1.25rem; line-height: 1.8rem; font-weight: bold; text-transform: uppercase; padding: 0; margin: 0;}
p {margin-bottom: 2rem; line-height: 1.8rem; max-width: 500px;}
small {display: inline-block; font-size: small; color: #acacac;}

.subrayado{display: inline-block; box-shadow: inset 0 -.5em 0 0px red;}
.numero {font-size: 6rem; margin: 0 0 10px; line-height: 100%; font-weight: bold;}
.centrado {display: block; margin: 0 auto 50px; text-align: center;}

.logos {margin-top: 30px;}
.logos img {height: 100px; margin: 15px 30px; vertical-align: middle;}

.ventajas {padding: 3rem; border-radius: 6px; transition: all 0.2s ease; cursor: help; background: white; color: black;}
.ventajas:hover{transform: translateY(-10px); background-color: #fff;}
.ventajas h3 {margin-bottom: 1em; font-size: 2.5rem; line-height: 1.2em; font-weight: normal;}
.ventajas p {margin-bottom: 2rem; line-height: normal;}
.ventajas-item {display: flex; align-items: center; padding: 1em 1.5em; margin-top: 4px; border-radius: 10px; background: #f0f0f0;}
.ventajas-item img {width: 75px; height: 75px; margin: 0 1.5em 0 0;}
.ventajas-item p {margin: 0;}

.boton {display: inline-block; padding: .8em 1.4em; margin: 0 8px 4px; color: #fff; background: red; border: 3px solid red; font-family: 'Roboto', sans-serif; font-weight: bold; font-size: 1.2rem; letter-spacing: 0.5px; text-transform: uppercase; cursor: pointer; transition: .2s; border-radius: 999px;}
.boton:hover {background: red; border-color: white;}
.boton-chico {font-size: 1rem; padding: .5em 1.2em; margin: 15px 0;}

.yosoy {margin: 0 auto;}

.texto_chat {max-width: 650px; margin: 0 auto; font-size: medium; line-height: normal;}
.texto_chat h2 {font-size: 2rem;}
.texto_chat p {color: gray;}
.texto_chat p strong {color: white;}




/****************************** FORM ******************************/
label {display: block; margin: 30px 0; cursor: pointer}
input[type=text], input[type=email], textarea, select {transition: all 0.2s ease; display: block; width: 100%; padding: .5em .7em; font: medium 'Roboto', sans-serif; background: #999; border-radius: 5px; margin: 15px 0;}
input[type=text]:focus, input[type=email]:focus, textarea:focus {background: white;} 
textarea {height: 200px; resize: none; margin-bottom: 30px;}
section.form::before {content: ""; width: 50px; height: 50px; transform: rotate(45deg); position: absolute; top: -25px; right: 0; left: 0; margin: 0 auto; border-bottom-right-radius: 8px; background-color: #171717;}




/****************************** FOOTER ******************************/
footer {text-align: center;}
footer h3 {color: #333;}
footer hr {margin: 50px 0; border-top: 3px dotted #333;}
footer .logos img {height: 60px; margin: 0 10px;}

.social {padding: 30px 15px; margin-top: -50px;}
.social img {display: inline-block; margin: 0 0 0 5px; vertical-align: middle; transition: .2s;}
.social img:hover {opacity: .5;}




/****************************** GRACIAS ******************************/
.gracias {text-align: center;}
.gracias .logo {width: 200px;}
.gracias p {max-width: none;}
.gracias .boton {position: relative; top: -20px;}




/************************************ ANIMACIONES ************************************************/
@keyframes animation_fadeIn{
	from {transform: translateY(40px); opacity: 0;}
	to {transform: translateY(0); opacity: 1;}
}
.fadeIn {animation: animation_fadeIn 2s ease 1s; opacity: 0; animation-fill-mode: forwards;}




/****************************** MEDIA QUERIES ******************************/
@media all and (max-width: 992px){
	body {font-size: medium;}
	nav {display: none; text-align: center; padding-top: 10px;}
	h1 {font-size: 1.5rem; margin: 2rem 0 1em;}
	h2 {font-size: 2.5rem;}
	.columna {width: 100% !important;}
	.fullsize {background-size: 200vw auto; padding-top: 50px; padding-bottom: 50px;}
	.desktop {display: none;}
	.ventajas {font-size: small; padding: 1.5em; margin: 15px 0;}
	.ventajas h3 {font-size: 1.5rem; font-weight: bold; margin: 10px 0 15px;}
	.ventajas-item {padding: 1em;}
	.ventajas-item img {width: 60px; height: 60px; margin-right: 1em;}
	.ventajas-item p {text-align: left;}
	.boton {font-size: 1rem;}
	footer {text-align: center;}
	footer h3 {margin-top: 50px;}
	footer .logos img {margin: 5px 10px; height: 50px;}
}
@media all and (max-width: 768px){
}
@media all and (max-width: 480px){
}