@charset "utf-8";
/*------|| $CONTENIDO ||------*/

/**

 * Base.......................... Estilos CSS base y generales

 * Elementos..................... Elementos que se repiten (botones, paginación, etc)

 * Componentes................... Partes de una página que se repiten

 * Secciones..................... Estilos particulares para cada página

 * Misceláneas................... Otras reglas CSS

 */



/*------|| $FONTAWESOME ||------*/
@font-face{
	font-family: FEDRASANS-LIGHT;
	src: url(/fonts/Fedra/FedraSansAltPro-Light.otf);
}
@font-face{
	font-family: FEDRASANS-DEMI;
	src: url(/fonts/Fedra/FedraSansAltPro-Demi.otf);
}
@font-face{
	font-family: FEDRASANS-BOOK;
	src: url(/fonts/Fedra/FedraSansAltPro-Book.otf);
}
@font-face{
	font-family: FEDRASANS-BOLD;
	src: url(/fonts/Fedra/FedraSansAltPro-Bold.otf);
}
@font-face{
	font-family: FEDRASANS-MEDIUM;
	src: url(/fonts/Fedra/FedraSansAltPro-Medium.otf);
}
@font-face{
	font-family: FEDRASANS-HEAVY;
	src: url(/fonts/Fedra/FedraSansDisStd-Heavy.otf);
}
@font-face{
	font-family: 'FontAwesome';
	src: url('/fonts/Fedra/fontawesome-webfont.eot?v=4.6.3');
	src: url('/fonts/Fedra/fontawesome-webfont.eot?#iefix&v=4.6.3') format('embedded-opentype'), url('/fonts/Fedra/fontawesome-webfont.woff2?v=4.6.3') format('woff2'), url('/fonts/Fedra/fontawesome-webfont.woff?v=4.6.3') format('woff'), url('/fonts/Fedra/fontawesome-webfont.ttf?v=4.6.3') format('truetype'), url('/fonts/Fedra/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular') format('svg');
	font-weight: normal;
	font-style: normal;
}
.fa {
	display: inline-block;
	font: normal normal normal 14px/1 FontAwesome;
	font-size: inherit;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.fa-facebook:before {
	content: "\f09a";
}
.fa-twitter:before {
	content: "\f099";
}
.fa-linkedin:before {
	content: "\f0e1";
}
.fa-google-plus:before {
	content: "\f0d5";
}
.fa-youtube-play:before {
	content: "\f16a";
}





/*------|| $BASE ||------*/
body{
	font-family: 'Open Sans', sans-serif;
	font-size: 15px;
	line-height: 22px;
	color: #363E47;
	margin: 0;
	padding: 0;
	min-height: 100vh;
	background: #FFF;
}
	html,.container{
	  min-width: 320px;
	}
main{
}
a:link, a:visited, a:hover, a:active{
	text-decoration: none;
}
a,
input{
	-webkit-transition: all .20s ease-in-out;
	-moz-transition:    all .20s ease-in-out;
	-o-transition:      all .20s ease-in-out;
	-ms-transition:     all .20s ease-in-out;
	transition:         all .20s ease-in-out;
}
ol, ul, li{
	margin: 0;
	padding: 0;
	list-style: none;
}
h1{
	font-family: 'FEDRASANS-DEMI';
	font-size: 30px;
	line-height: 32px;
	text-transform: uppercase;
	color: #FFF;
	margin: 0 0 30px;
}
h2, .h2{
	font-family: 'FEDRASANS-DEMI';
	font-size: 20px;
	line-height: 24px;
	color: #333;
	margin: 0 0 25px;
}
h3, .h3{
}
h4, .h4{
}
h5, .h5{
}
h6, .h6{
}
p{
	margin: 0 0 30px;
}
	p a{
		color: #333;
	}
		p a:hover,
		p a:focus{
			color: #00BBC5;
			-webkit-transition: all .20s ease-in-out;
			-moz-transition:    all .20s ease-in-out;
			-o-transition:      all .20s ease-in-out;
			-ms-transition:     all .20s ease-in-out;
			transition:         all .20s ease-in-out;
		}
.destacado{
	font-size: 20px;
	line-height: 24px;
}
img,
.img-responsive{
	display: inline-block;
	margin: 0 auto;
}


/*------|| $ELEMENTOS ||------*/

/*Bandas*/
.banda{
	padding: 60px 0;
}
.gris{
	background: #F3F3F3;
}


/*Botón*/
.boton,
.hs-button{
	display: inline-block;
	font-size: 20px;
	font-weight: 700;
	line-height: 20px;
	text-align: center;
	text-transform: uppercase;
	color: #FFF;
	padding: 15px 40px;
	border-radius: 3px;
	background: #7AB51D;
	cursor: pointer;
}
	.boton:focus,
	.boton:hover,
	.hs-button:focus,
	.hs-button:hover{
		color: #FFF;
		background: #373E48;
		-webkit-transition: all .20s ease-in-out;
		-moz-transition:    all .20s ease-in-out;
		-o-transition:      all .20s ease-in-out;
		-ms-transition:     all .20s ease-in-out;
		transition:         all .20s ease-in-out;
	}

/*Formularios*/
.formulario{
	padding: 0 15px;
	margin: 0 0 20px;
}
	/*Form hubspot*/
	fieldset {
		max-width: 100% !important;
		margin: 0 0 5px !important;
	}
	legend{
		display: block;
		font-size: 16px;
		font-weight: 700;
		line-height: 18px;
		text-align: left !important;
		color: #363E47;
		margin-bottom: 10px;
		border: none;
	}
	label{
		display: block;
		font-size: 16px;
		font-weight: 400;
		line-height: 24px;
		text-align: left !important;
		color: #363E47;
		padding-top: 0;
		margin-bottom: 5px;
	}
	.hs-input{
		position: relative;
		display: block;
		width: 100%!important;
		height: 31px;
		font-size: 16px;
		font-weight: 400;
		line-height: 16px;
		color: #363E47;
		padding: 3px 5px;
		margin: 0;
		border: 1px solid #B1B5B9;
		border-radius: 5px;
		background-color: #FFF;
		-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
		box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
		-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
		-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
		transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
	}
		label span{
			display: inline-block;
			vertical-align: top;
		}
		.hs-form input[type="checkbox"]{
			display: inline-block;
			width: 20px !important;
			margin: 0 10px 0 0;
			vertical-align: top;
		}
		.hs-dependent-field .field{
			display: block;
			margin: 0 0 15px;
		}
		.hs-form-radio{
			display: inline-block;
			margin: 5px 10px;
			vertical-align: top;
		}
			.hs-form-radio input{
				width: 20px !important;
				height: 20px;
				border: none;
				box-shadow: none;
			}
	.hs-button {
		border: 0;
	}
	.hs-error-msgs label {
		color: red;
		font-size: 10px;
		margin: 0;
	}


/*------|| $COMPONENTES ||------*/

/*CABECERA*/
.cabecera{
	text-align: center;
	padding: 30px 0 50px;
	background: url('/images/landing/2020/tendencias/header.jpg') no-repeat center;
	background-size: cover;
}
	.cabecera__logo{
		display: block;
		margin: 0 0 35px;
	}
	.cabecera__tendencias{
		margin: 0 0 35px;
	}
	.cabecera p{
		font-size: 20px;
		line-height: 24px;
		color: #FFF;
	}

	

/* Pie */
.pie{
	padding: 80px 0 20px;
	background-color: #FFF;
}
	.pie__logo{
		display: block;
	}
	.pie small{
		display: block;
		font-family: Arial, sans-serif;
		font-size: 11px;
		line-height: 14px;
		color: #363E47;
		margin: 0 0 15px;
	}
	.empresas{
		display: block;
		font-family: Arial, sans-serif;
		font-weight: 700;
		font-size: 16px;
		line-height: 16px;
		color: #72787E;
		margin: 0 0 5px;
	}
		.empresas:hover,
		.empresas:focus{
			color: #30B6EB;
		}
.pie__redes{
	text-align: center;
}
	.pie__redes > ul > li{
		display: inline-block;
		padding: 0 15px 0 0;
	}
		.pie__redes > ul > li:last-of-type{
			padding-right: 0;
		}
		.pie__redes > ul > li > a{
			display: block;
			width: 28px;
			height: 28px;
			font-size: 16px;
			line-height: 28px;
			text-align: center;
			color: #FFF;
			border-radius: 50%;
			background: #72787E;
		}
			.pie__redes > ul > li > a span{
				display: none;
			}
			.pie__redes > ul > li > a:hover,
			.pie__redes > ul > li > a:focus{
			    color: #FFF;
			    background: #30B6EB;
			}


/*------|| $SECCIONES ||------*/
/*Home*/

.que-incluye{
	min-height: 520px;
	padding: 35px 55px;
	margin: 0 0 20px;
	background: url('/images/landing/2020/tendencias/que-incluye.gif') no-repeat center;
	background-size: cover;
	position: relative;
}
	.que-incluye:before{
		content: '';
		width: 21px;
		height: 43px;
		background: url('/images/landing/2020/tendencias/punta-turquesa.png') no-repeat center;
		background-size: cover;
		position: absolute;
		top: 15px;
		right: -21px;
	}
	.que-incluye h2{
		text-align: center;
		color: #FFF;
	}
	.que-incluye__lista{
		display: block;
		text-align: left;
	}
		.que-incluye__lista li{
			display: block;
			color: #FFF;
			padding-left: 20px;
			margin: 0 0 20px;
			position: relative;
		}
			.que-incluye__lista li:before{
				content: '';
				width: 18px;
				height: 16px;
				background: url('/images/landing/2020/tendencias/check.png') no-repeat center;
				background-size: cover;
				position: absolute;
				top: 6px;
				left: 0;
			}



@media (max-width: 1200px){
}
@media (max-width: 990px){
	h1{
		font-size: 28px;
		line-height: 32px;
		text-align: center;
	}
	.que-incluye{
		min-height: 10px;
	}
	.que-incluye:before{
		display: none;
	}
	.pie{
		text-align: center;
	}
	.pie__logo{
		margin: 0 0 20px;
	}
}
@media (max-width: 768px){
}