/*---------------------------------------------------------------- 
NORMALIZE ////////////////////////////////////////////////////////
----------------------------------------------------------------*/

article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px
solid #c0c0c0;margin:0
2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,
html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}


/*---------------------------------------------------------------- 
GENERAL /////////////////////////////////////////////////////////
----------------------------------------------------------------*/


html, body {
	display:flex;
	flex-direction:row; 
	flex-wrap: wrap;
	justify-content:center;
	align-items:flex-start;
	font-family: 'Lato', sans-serif;
	font-weight:300;
	height: auto;
	min-height:100vh;
	line-height:1.3em;	
	position: relative;
	width:100%;
	}


html, body { 
	font-size:20px;
	}
	@media only screen and (max-width:1500px) {
	html, body {
	font-size:15px;
	}}


div.contenedor {
	padding:40px 0px;
	}


section {
	height: auto;
	}
	

article {
	height: auto;
	width:100%;
	}
	
aside{
	height: auto;
	}
	

h1, h2, h3, h4, h5, h6{
	font-family: 'Lato', sans-serif; /* Fuente secundaria */
	}


h1, h2, h3, h4, h5, h6 {
	font-weight:700;
	height:auto;
	margin:0px;
	padding:5px 0px;
	line-height:1.2em;
	width:100%;
	}


h1 {font-size:2em;}
h2 {font-size:1.8em;}
h3 {font-size:1.6em;}
h4 {font-size:1.4em;}
h5 {font-size:1.2em;}
h6 {font-size:1em;}


img{
	display:block;
	padding:0px;
	margin: 0px;
	max-width:100%;
	padding: 0px;
	}

a, a:visited{
	margin:0px;
	padding: 0px;
	text-decoration:none;
	}

a:hover {	
	text-decoration:none;
	}

p {
	color: inherit;
	height:auto;
	line-height:1.3em;
	margin: 0px;
	padding:20px 0px;
	text-align: justify;
	width:100%;
	}

p strong,
p b{
	font-weight:bold;
	}


ul, ol {
	float: none;
	height: auto;
	margin:15px 0px;
	padding-left:0px;
	width:100%;
	}

ul li, 
ol li{
	float: none;
	height: auto;
	line-height:1.4em;
	margin: 0px;
	padding: 0px;
	width:100%;
	}


ul li {
	list-style:none;
	}


ol li {
	list-style:decimal;
	}

hr {
	border:0px;
	padding:0px;
	margin:20px 0px;
	height:1px;
	width: 100%;
	}


* {
	box-sizing:border-box!important;
	float: none;
	overflow-wrap: break-word;
  word-wrap: break-word;
  -ms-word-break: break-all;
  word-break: break-all;
  word-break: break-word;
  /* -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;*/ 
	}


nav ul li a{
 	transition:all 0.12s;
 	}


/*---------------------------------------------------------------- 
ESTRUCTURA ///////////////////////////////////////////////////////
----------------------------------------------------------------*/
div.contenedor,
div.container,
div.top,
header,
section,
footer{
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:center;
	align-items:flex-start;
	height:auto;
	max-width:100%;
	overflow-x:hidden;
	width:100%;
	}


div.in{
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:flex-start;
	align-items:flex-start;
	height:auto;
	min-height:auto;
	max-height:auto;
	max-width:1800px;
	min-width:55%;
	position:relative;
	}


div.in{
	width:75%;
	}
	@media only screen and (max-width:1500px) {
	div.in{
	width:1000px;
	}}
	@media only screen and (max-width:1020px) {
	div.in{
	width:800px;
	}}
	@media only screen and (max-width:820px) {
	div.in{
	width:700px;
	}}
	@media only screen and (max-width:720px) {
	div.in{
	width:600px;
	}}
	@media only screen and (max-width:620px) {
	div.in{
	width:92%;
	}}


div.in.thin{
	width:60%;
	}
	@media only screen and (max-width:1500px) {
	div.in.thin{
	width:800px;
	}}
	@media only screen and (max-width:820px) {
	div.in.thin{
	width:700px;
	}}
	@media only screen and (max-width:720px) {
	div.in.thin{
	width:600px;
	}}
	@media only screen and (max-width:620px) {
	div.in.thin{
	width:92%;
	}}


div.in.full{
	width:94%;
	}
	@media only screen and (max-width:620px) {
	div.in.full{
	width:92%;
	}}


/*---------------------------------------------------------------- 
PATRONES ////////////////////////////////////////////////////////
----------------------------------------------------------------*/
/* BOX INFO  ----------------------------*/
.box-info {
	font-size:0.9em;
	height:auto;
	padding:20px;
	margin:5px 0px; /* set */
	width:100%;
	}


/* --------------------------------------------------------------- < HEADER > */
header {
	align-items:center;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:space-around;
	overflow:visible;/*necesary*/
	width:100%;
	z-index:100;
	}
	@media only screen and (max-width:820px) {
	header{
	justify-content:center;
	}}
	@media only screen and (max-width:620px) {
	header{
	justify-content:space-between!important;
	position:fixed;
	left:0px;
	top:0px;
	padding-left:4%;
	}}


/*----------*/
header div.in {
	align-items:center;
	justify-content:space-between;
	padding:0px;
	}
	@media only screen and (max-width:820px) {
	header div.in{
	justify-content:center;
	}}
	@media only screen and (max-width:620px) {
	header div.in{
	justify-content:space-between!important;
	}}


/*----------*/
header a.logotipo{
	display:block;
	height:auto;
	margin:10px 0px;
	padding:0px;
	width:180px;/* set */
	}
	@media only screen and (max-width:1500px) {
	header a.logotipo{
	width:240px;/* set */
	}}
	@media only screen and (max-width:820px) {
	header a.logotipo {
	width:200px;/* set */
	}}
	@media only screen and (max-width:620px) {
	header a.logotipo{
	width:180px;/* set */
	}}

header a.logotipo.movil:nth-child(2){
	display:none;
	}

header a.logotipo img{
	height:auto;
	margin:0px;
	padding:0px;
	width:100%;	
	}

header a.logotipo.movil {
	display:none;	
	}


/* --------------------------------------------------------------- < NAV > */
nav{
	display:flex;
	height:auto;
	font-family: 'Lato', sans-serif; /* Fuente secundaria */
	font-weight:400;
	font-size:0.9em;
	text-transform:uppercase;
	width:auto;
	}
	@media only screen and (max-width:720px) {
	nav {
	width:100%;
	}}


/*----------*/
nav ul,
nav ul li {
	padding:0px;
	list-style:none;
	margin:0px;	
	}

nav ul{
	display:flex;
	flex-direction:row;
	width:auto;
	}
	@media only screen and (max-width:820px) {
	nav ul{
	justify-content:space-around;
	width:100%;
	}}


/*----------*/
nav ul li{
	background-color:#fff; /* no necesary */
	margin-left:20px;
	text-align: center;
	width:auto;
	}
	@media only screen and (max-width:820px) {
	nav ul li{
	justify-content:space-around;
	margin-left:1px;
	}}

nav ul li:first-child{margin-left:0px;}

nav ul li a:hover{ color:#8f0202; }


/*----------*/
nav ul li > *{
	display:flex;
	cursor:pointer;
	height:90px;
	line-height:90px;
	text-decoration:none;
	padding:0px 20px;
	position:relative;
	width:auto!important;
	}
	@media only screen and (max-width:1500px) {
	nav ul li > *{
	padding:0px 16px;
	}}
	@media only screen and (max-width:920px) {
	nav ul li > *{
	padding:0px 10px;
	}}
	@media only screen and (max-width:820px) {
	nav ul li > *{
	padding:0px 16px;
	}}

nav ul li > *:hover{
	text-decoration:none;
	}


/*----------*/
	@media only screen and (max-width:620px) {
	header a.logotipo.movil{
	display:block;
	margin-bottom:40px;
	width:50%;
	}
	nav {
	align-items:center;
	background-color:#fff; /* set */
	flex-direction:column;
	justify-content: center;
	height:auto;
	margin-top:0px;
	min-height:100vh;
	position:fixed;
	bottom:auto;
	left:0px;
	top:0px;
	right:0px;
	padding:0px 0px 0px 0px;
	width:auto;
	visibility:hidden;
	opacity:0.0;
	transition:all 0.16s;
	}
	nav ul{
	justify-content:center;
	flex-direction:column;
	padding:0px 40px;
	width:100%;
	}
	nav ul li{
	border-bottom:1px solid #dedede; /* set */
	background-color:transparent; /* no necesary */
	margin-left:1px;
	}
	nav ul li:last-child{
	border-bottom:0px solid #fff; /* set */
	}
	nav ul li > *{
	height:60px!important;
	line-height:60px!important;
	padding:0px!important;
	justify-content:center;
	text-align:center!important;
	}
	nav ul li > *:hover{
	background-color:transparent!important;
	color:inherit!important;
	}
	}


/*---------------------------------
/// BANNER COVER  (#BA-COVER) ///
----------------------------------*/
.banner-cover{
	background-color: ;/*set*/
	height:25vh;
	position:relative;
	}
	@media only screen and (max-width:620px) {
	.banner-cover{
	height:18vh;
	}}

.banner-cover div.in {
	flex-wrap: wrap;
	align-items:flex-end; 
	justify-content:flex-end; 
	height:100%;
	z-index:10;
	}
	@media only screen and (max-width:620px) {
	.banner-cover div.in{
	justify-content:center; 
	}}

.banner-cover div.in h2{
	font-size: 1.5em;
	padding: 15px 0px 17px 0px;
	text-align: center;
	width: 35%;
	}
	@media only screen and (max-width:720px) {
	.banner-cover div.in h2{
	width: 45%;
	}}
	@media only screen and (max-width:620px) {
	.banner-cover div.in h2{
	width: 65%;
	}}

/*---------------------------------
/// INTERIORES ///
----------------------------------*/
body div.container div.in{
	flex-direction: row; 
	flex-wrap: wrap; 
	justify-content:space-between; 
	padding: 50px 0px;
	}
	@media only screen and (max-width:620px) {
	body div.container div.in{
	padding: 50px 0px 20px 0px;
	}}

body article{
	margin:0px;
	align-items: center;
	width: 70%;
	}
	@media only screen and (max-width:620px) {
	body article{
	width: 100%;
	}}

body aside{
	margin:0px;
	width: 25%;
	}
	@media only screen and (max-width:620px) {
	body aside{
	padding: 40px 0px 0px 0px;
	width: 100%;
	}}

/*---------------------------------
/// BANNER DATOS ///
----------------------------------*/

section.datos div.in{
	display: flex;
	align-items: center;
	flex-direction: row; 
	justify-content:space-around; 
	padding: 20px 0px;
	}
	@media only screen and (max-width:720px) {
	section.datos div.in{
	justify-content:center;
	}}
	@media only screen and (max-width:620px) {
	section.datos div.in{
	flex-direction: column;
	}}

section.datos p{
	width:auto;
	padding-right: 135px;
	}
	@media only screen and (max-width:1020px) {
	section.datos p{
	padding-right: 65px;
	}}
	@media only screen and (max-width:820px) {
	section.datos p{
	padding-right: 52px;
	font-size: 0.9em;
	}}
	@media only screen and (max-width:720px) {
	section.datos p{
	padding-right: 40px;
	}}
	@media only screen and (max-width:620px) {
	section.datos p{
	padding-right: 0px;
	text-align: center;
	width: 100%;
	}}


section.datos b{
	font-size: 0.9em;
	font-weight: 700;
	}

section div.logo-icono{
	-moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
	height: 80px;
	width: 80px;
	}
	@media only screen and (max-width:720px) {
	section.datos div.logo-icono{
	margin-bottom: 15px;
	}}
	@media only screen and (max-width:620px) {
	section.datos div.logo-icono{
	margin-top: 15px;
	}}

section div.logo-icono img{
	margin:10px 12px 12px 12px;
	height: 56px;
	width: 56px;
	}

/* --------------------------------------------------------------- < FOOTER > */
footer {
	font-size:0.8em;
	padding:10px 0px;
	}

footer div.in {	
	justify-content:space-between;
	}
	@media only screen and (max-width:720px) {
	footer div.in {
	justify-content:center;
	}}

footer p{
	width:45%;
	}
	@media only screen and (max-width:720px) {
	footer p{
	text-align: center;
	width:100%;
	}}


/*--------------------------------------------------------------------------- FIRMA */
a.firma,
a.firma:visited,
a.firma:hover{
	display:flex;
	flex-direction:row;
	font-size:0.8em;
	justify-content:center;
	cursor:text;
	float:none;
	height:auto;
	text-decoration:none;
	width:auto;
	margin-top: 30px;
	}
	@media only screen and (max-width:720px) {
	a.firma,
	a.firma:visited,
	a.firma:hover{
	flex-direction:column;
	text-align: center;
	}}



a.firma b{
	display:block;
	height:22px;
	line-height:20px;
	font-style:normal;
	font-weight:normal;
	width:auto;
	}


a.firma span{
	cursor:pointer;
	display:block;
	height:22px; /*set*/
	margin:0px 0px 0px 5px;
	width:auto;
	}

a.firma span img{
	height:100%;
	width:auto;
	}

/*---------------------------------------------------------------- 
INDEX  ///////////////////////////////////////////////////////////
----------------------------------------------------------------*/

/* Simple banner  ----------------------------*/
body#index section.banner-cover {
	height:62vh;
	z-index:9;
	}
	@media only screen and (max-width:620px) {
	body#index section.banner-cover {
	margin-top: 75px;
	height:80vh;
	}}

body#index section.banner-cover div.in.full{
	flex-direction:column;
	justify-content:center;
	align-items:center;
	}

body#index section.banner-cover picture{
	height:auto;
	position:absolute;
	bottom:0px;
	left:0px;
	right:0px;
	top:0px;
	width:auto;
	}

body#index section.banner-cover picture img{
	height:100%;
	width:100%;
	object-fit:cover;
	}

body#index section.banner-cover h1{
	background-color:rgba( 82, 5, 5, 0.6);
	height:auto;
	font-size: 1.7em;
	line-height: 1.5em;
	padding:30px;
	text-align: center;
	text-transform: uppercase;
	text-shadow: 2px 2px 4px #000000;
	width:800px;
	}
	@media only screen and (max-width:1500px) {
	body#index section.banner-cover h1{
	width:800px;
	}}
	@media only screen and (max-width:820px) {
	body#index section.banner-cover h1{
	font-size:1.6em;
	width: 100%;
	}}
	@media only screen and (max-width:720px) {
	body#index section.banner-cover h1{
	font-size:1.4em;
	}}
	@media only screen and (max-width:620px) {
	body#index section.banner-cover h1{
	font-size:1.4em;
	margin-top:40px;
	padding:30px;
	}}


/* Section Bienvenida  ---------------------------------*/
.index-bienvenida{
	flex-direction:column;
	justify-content:center;
	align-items:center;
	padding: 45px 0px;
	}

.index-bienvenida h3{
	text-align: center;
	}

.index-bienvenida p{
	text-align: center;
	}


/* Section Paneles  ------------------------------------*/
section.index-paneles{
	display: flex;
	height: 420px;
	position:relative;
	z-index:10;
	}
	@media only screen and (max-width:1020px) {
	section.index-paneles{
	height: 350px;
	}}
	@media only screen and (max-width:820px) {
	section.index-paneles{
	height: 340px;
	}}
	@media only screen and (max-width:720px) {
	section.index-paneles{
	height: 310px;
	}}
	@media only screen and (max-width:620px) {
	section.index-paneles{
	height: auto;
	}}

section#panel-2{
	margin-top: -155px;
	}
	@media only screen and (max-width:1020px) {
	section#panel-2{
	margin-top: -130px;
	}}
	@media only screen and (max-width:820px) {
	section#panel-2{
	margin-top: -140px;
	}}
	@media only screen and (max-width:620px) {
	section#panel-2{
	margin-top: -80px;
	}}

section#panel-3{
	margin-top: -155px;
	}
	@media only screen and (max-width:1020px) {
	section#panel-3{
	margin-top: -130px;
	}}
	@media only screen and (max-width:820px) {
	section#panel-3{
	margin-top: -140px;
	}}
	@media only screen and (max-width:620px) {
	section#panel-3{
	margin-top: -80px;
	}}

section.index-paneles div.in{
	align-items:stretch;
	padding:130px 0px;
	}
	@media only screen and (max-width:1020px) {
	section.index-paneles div.in{
	padding:100px 0px;
	}}
	@media only screen and (max-width:620px) {
	section.index-paneles div.in{
	padding:40px 0px;
	}}

section#panel-1 div.in{
	justify-content:space-between;
	}

section#panel-2 div.in,
section#panel-3 div.in{
	justify-content:center;
	}


section.index-paneles div.in a{
	align-items:center;
	display:flex;
	flex-direction:column;
	height:auto; 
	margin:0px 16px;
	padding:0px 0px;
	text-decoration:none;
	width:30%;
	}
	@media only screen and (max-width:1020px) {
	section.index-paneles div.in a{
	margin:0px 13px;
	}}
	@media only screen and (max-width:820px) {
	section.index-paneles div.in a{
	margin:0px 11px;
	}}
	@media only screen and (max-width:720px) {
	section.index-paneles div.in a{
	margin:0px 10px;
	}}
	@media only screen and (max-width:620px) {
	section.index-paneles div.in a{
	width: 100%;
	margin:10px 0px;
	}}


section.index-paneles div.in a #hexagono{
	align-items:center;
	display:flex;
	flex-direction:column;
	height: 155px;
	position: relative;
	z-index: 9;
	width: 300px;
	}
	@media only screen and (max-width:1020px) {
	section.index-paneles div.in a #hexagono{
	height: 145px;
	width: 250px;
	}}
	@media only screen and (max-width:820px) {
	section.index-paneles div.in a #hexagono{
	height: 135px;
	width: 220px;
	}}
	@media only screen and (max-width:720px) {
	section.index-paneles div.in a #hexagono{
	height: 110px;
	width: 190px;
	}}
	@media only screen and (max-width:620px) {
	section.index-paneles div.in a #hexagono{
	height: auto;
	width: 100%;
	}}



section.index-paneles div.in a #hexagono:hover{
	background-color: #f3e7e7;
	}


section.index-paneles div.in a #hexagono::before{
	border-left: 150px solid transparent;
	border-right: 150px solid transparent;
	border-bottom: 80px solid #e8d1d1;
	content: "";
	height: 0;
	left: 0;
	position: absolute;
	top: -80px;
	width: 0;
	}
	@media only screen and (max-width:1020px) {
	section.index-paneles div.in a #hexagono::before{
	border-left: 125px solid transparent;
	border-right: 125px solid transparent;
	border-bottom: 60px solid #e8d1d1;
	top: -60px;
	}}
	@media only screen and (max-width:820px) {
	section.index-paneles div.in a #hexagono::before{
	border-left: 110px solid transparent;
	border-right: 110px solid transparent;
	border-bottom: 50px solid #e8d1d1;
	top: -50px;
	}}
	@media only screen and (max-width:720px) {
	section.index-paneles div.in a #hexagono::before{
	border-left: 95px solid transparent;
	border-right: 95px solid transparent;
	border-bottom: 50px solid #e8d1d1;
	top: -50px;
	}}
	@media only screen and (max-width:620px) {
	section.index-paneles div.in a #hexagono::before{
	border-left: 0px solid transparent;
	border-right: 0px solid transparent;
	border-bottom: 0px solid #e8d1d1;
	top: 0px;
	}}

section.index-paneles div.in a:hover #hexagono::before {
	border-bottom: 80px solid #f3e7e7;
	}
	@media only screen and (max-width:1020px) {
	section.index-paneles div.in a:hover #hexagono::before{
	border-bottom: 60px solid #f3e7e7;
	}}
	@media only screen and (max-width:820px) {
	section.index-paneles div.in a:hover #hexagono::before{
	border-bottom: 50px solid #f3e7e7;
	}}
	@media only screen and (max-width:620px) {
	section.index-paneles div.in a:hover #hexagono::before{
	border-bottom: 0px solid #f3e7e7;
	}}

section.index-paneles div.in a #hexagono::after{
	border-left: 150px solid transparent;
	border-right: 150px solid transparent;
	border-top: 80px solid #e8d1d1;
	bottom: -80px;
	content: "";
	height: 0;
	left: 0;
	position: absolute;
	width: 0;
	}
	@media only screen and (max-width:1020px) {
	section.index-paneles div.in a #hexagono::after{
	border-left: 125px solid transparent;
	border-right: 125px solid transparent;
	border-top: 60px solid #e8d1d1;
	bottom: -60px;
	}}
	@media only screen and (max-width:820px) {
	section.index-paneles div.in a #hexagono::after{
	border-left: 110px solid transparent;
	border-right: 110px solid transparent;
	border-top: 50px solid #e8d1d1;
	bottom: -50px;
	}}
	@media only screen and (max-width:720px) {
	section.index-paneles div.in a #hexagono::after{
	border-left: 95px solid transparent;
	border-right: 95px solid transparent;
	border-top: 50px solid #e8d1d1;
	bottom: -50px;
	}}
	@media only screen and (max-width:620px) {
	section.index-paneles div.in a #hexagono::after{
	border-left: 0px solid transparent;
	border-right: 0px solid transparent;
	border-top: 0px solid #e8d1d1;
	bottom: 0px;
	}}

section.index-paneles div.in a:hover #hexagono::after {
	border-top: 80px solid #f3e7e7;
	}
	@media only screen and (max-width:1020px) {
	section.index-paneles div.in a:hover #hexagono::after {
	border-top: 60px solid #f3e7e7;
	}}
	@media only screen and (max-width:820px) {
	section.index-paneles div.in a:hover #hexagono::after {
	border-top: 50px solid #f3e7e7;
	}}
	@media only screen and (max-width:620px) {
	section.index-paneles div.in a:hover #hexagono::after {
	border-top: 0px solid #f3e7e7;
	}}


section.index-paneles div.in a h2,
section.index-paneles div.in a p{
	text-align:center;
	}


section.index-paneles div.in a h2{
	font-size:1.4em;
	font-weight:600;
	margin-top: 50px;
	padding:0px;
	}
	@media only screen and (max-width:1500px) {
	section.index-paneles div.in a h2{
	font-size:1.3em;
	}}
	@media only screen and (max-width:820px) {
	section.index-paneles div.in a h2{
	font-size:1.2em;
	}}
	@media only screen and (max-width:720px) {
	section.index-paneles div.in a h2{
	margin-top: 25px;
	font-size:1.3em;
	}}

section.index-paneles div.in a p{
	font-size:1em;
	font-family: 'Lato', sans-serif;
	font-weight:300;
	padding:15px 25px;
	}
	@media only screen and (max-width:1500px) {
	section.index-paneles div.in a p{
	font-size:1.1em;
	}}
	@media only screen and (max-width:1020px) {
	section.index-paneles div.in a p{
	padding:15px 20px;
	font-size:1em;
	}}
	@media only screen and (max-width:820px) {
	section.index-paneles div.in a p{
	font-size:0.95em;
	padding:10px 15px;
	}}
	@media only screen and (max-width:720px) {
	section.index-paneles div.in a p{
	display: none;
	}}
	@media only screen and (max-width:620px) {
	section.index-paneles div.in a p{
	}}


section.index-paneles div.in a p.ver,
section.index-paneles div.in a p.ver-todos {
	font-size: 0.9em;
	font-weight: 400;
	margin-top: 0px;
	}
	@media only screen and (max-width:820px) {
	section.index-paneles div.in a p.ver,
	section.index-paneles div.in a p.ver-todos{
	font-size: 0.8em;
	margin-top: -6px;
	}}
	@media only screen and (max-width:720px) {
	section.index-paneles div.in a p.ver,
	section.index-paneles div.in a p.ver-todos{
	font-size: 0.75em;
	display: block;
	padding-top: 20px;
	}}
	@media only screen and (max-width:620px) {
	section.index-paneles div.in a p.ver,
	section.index-paneles div.in a p.ver-todos{
	margin-bottom: 20px
	}}

section.index-paneles div.in a span {
	margin-top: 40px;
	font-size: 1.4em;
	}
	@media only screen and (max-width:720px) {
	section.index-paneles div.in a span {
	margin-top: 25px;
	}}

section.index-paneles div.in a span.arrow img{
	height:auto;
	margin:0px;
	width:100%;
	}


/* Section Biodiesel  ---------------------------------*/
body#index section.index-biodiesel{
	background-image: url(../images/biodiesel.jpg);
	background-size: auto 130%;
	background-position: center right;
	background-repeat: no-repeat;
	align-items: center;
	display: flex;
	min-height: 300px;
	position:relative;
	z-index:10;
	}
	@media only screen and (max-width:1020px) {
	body#index section.index-biodiesel{
	background-size: auto 100%;
	}}
	@media only screen and (max-width:820px) {
	body#index section.index-biodiesel{
	background-image: url(../images/biodiesel-small.jpg);
	}}
	@media only screen and (max-width:620px) {
	body#index section.index-biodiesel{
	background-image: url(../images/biodiesel-movil.jpg);
	background-size: auto 140%;
	background-position: center right;
	min-height: 350px;
	}}

	@media only screen and (max-width:620px) {
	body#index section.index-biodiesel h3{
	text-align: center;
	margin-top: 80px;
	}}

body#index section.index-biodiesel h4{
	font-weight:400;
	}
	@media only screen and (max-width:620px) {
	body#index section.index-biodiesel h4{
	text-align: center;
	}}

body#index section.index-biodiesel p{
	margin-right: 50%;
	width: 50%;
	}
	@media only screen and (max-width:620px) {
	body#index section.index-biodiesel p{
	text-align: center;
	margin-right: 0%;
	width: 100%;
	}}

body#index section.index-biodiesel a{
	text-align: right;
	font-size: 0.9em;
	font-weight: 400;
	width: 160px;
	}
	@media only screen and (max-width:620px) {
	body#index section.index-biodiesel a{
	text-align: center;
	margin-bottom: 40px;
	width: 100%;
	}}

body#index section.index-biodiesel a span{
	margin-left: 8px;
	line-height: 1.5em;
	font-size: 1.4em;
	}


/* Section Contacto  ---------------------------------*/
body#index section.index-contacto{
	background-image: url(../images/index-contacto.png);
	background-size: auto 100%;
	background-position: center left;
	background-repeat: no-repeat;
	align-items: center;
	display: flex
	min-height: 400px;
	position:relative;
	z-index:10;
	}
	@media only screen and (max-width:620px) {
	body#index section.index-contacto{
	background-image: url(../images/index-contacto-movil.png);
	background-size: 100% auto;
	background-position: center top;
	}}


body#index section.index-contacto div.in{
	display: flex;
	flex-direction: row-reverse; /* ← */
	align-items:center; /* middle */
	}
	@media only screen and (max-width:620px) {
	body#index section.index-contacto div.in{
	padding: 80px 0px 0px 0px;
	}}
	

body#index section.index-contacto div.formulario{
	padding: 40px 0px;
	}

body#index section.index-contacto div.formulario h3{
	text-align: right;
	padding-bottom: 30px;
	}
	@media only screen and (max-width:620px) {
	body#index section.index-contacto div.formulario h3{
	text-align: left;
	}}

/*---------------------------------------------------------------- 
QUIENES SOMOS  ///////////////////////////////////////////////////
----------------------------------------------------------------*/
body#quienes section.banner-cover{
	background-color: #e7ce9e;
	background-image: url(../images/quienes-banner.png);
	background-size: auto 150%;
	background-position: top left;
	background-repeat: no-repeat;
	}
	@media only screen and (max-width:620px) {
	body#quienes section.banner-cover{
	margin-top:75px;
	background-size: auto 180%;
	}}

aside div.logo-icono{
	width: 90%;
	margin: 0px 5%;
	}

/*---------------------------------------------------------------- 
PRODUCTOS  ///////////////////////////////////////////////////////
----------------------------------------------------------------*/
body#productos section.banner-cover{
	background-color: #e7ce9e;
	background-image: url(../images/productos-banner.png);
	background-size: auto 170%;
	background-position: bottom left;
	background-repeat: no-repeat;
	}
	@media only screen and (max-width:620px) {
	body#productos section.banner-cover{
	margin-top:75px;
	background-size: auto 180%;	
	}}


	@media only screen and (max-width:620px) {
	body#productos div.container div.in{
	flex-direction:column-reverse; 
	}}
	@media only screen and (max-width:620px) {
	body#productos div.container div.in aside{
	padding: 60px 0px 20px 0px
	}}

aside ul.menu{
	margin:0px;
	padding: 0px;
	display: flex;
	flex-direction: column; /* ↓ */
	min-height: 100px;
	}
	
aside ul.menu li{
	height:35px;
	line-height:35px;
	text-align: center;
	border-bottom: 2px solid #fff;
	width:100%;
	}

aside ul.menu li.extremo{
	height:40px;
	line-height:40px;
	font-size: 1.1em;
	}	

aside ul.menu li a{
	cursor: pointer;
	display: block;
	height:35px;
	line-height:35px;
	border-bottom: 2px solid #fff;
	width: 100%;
	}

article h3,
article h1{
	display: flex;
	font-size:1.6em;
	line-height: 35px;
	}
	@media only screen and (max-width:720px) {
	article h3,
	article h1{
	justify-content:center;
	text-align: center;
	}}

article h3 div.logo-icono,
article h1 div.logo-icono{
	height: 30px;
	margin-right: 15px;
	width: 30px;
	}

article p.right{
	border-bottom: 5px solid #e8d1d1;
	padding: 0px 0px 10px 0px ;
	margin: -10px 0px 10px 0px;
	text-align: right;
	width: 100%;
	}
	@media only screen and (max-width:720px) {
	article p.right{
	text-align: center;
	margin-top: 10px;
	}}

article p.caracteristica{
	border-bottom: 1px solid #e8d1d1;
	width: 100%;
	padding: 10px 4%;
	}

article p.ultima{
	width: 100%;
	padding: 10px 4%;
	}

article p.bottom{
	text-align: center;
	font-size: 0.8em;
	border-top: 5px solid #e8d1d1;
	width: 100%;
	padding: 20px 4%;
	margin-top: 10px;
	}

article a.seguridad{
	text-align: center;
	display:block;
	margin: 20px 15% 0px 15%;
	padding: 8px 20px;
	width: 70%;
	}

/*---------------------------------------------------------------- 
CONTACTO  ///////////////////////////////////////////////////////
----------------------------------------------------------------*/
body#contacto section.banner-cover{
	background-color: #e7ce9e;
	background-image: url(../images/contacto-banner.png);
	background-size: auto 170%;
	background-position: center left;
	background-repeat: no-repeat;
	}
	@media only screen and (max-width:620px) {
	body#contacto section.banner-cover{
	margin-top:75px;
	background-size: auto 185%;	
	}}

body#contacto aside p{
	text-align: right;
	width: 100%;
	}
	@media only screen and (max-width:620px) {
	body#contacto aside p{
	display: none;
	}}



body#contacto article{
	width:55%;
	}
body#contacto aside{
	width:40%;
	}
	@media only screen and (max-width:720px) {
	body#contacto article{
	width:100%;
	}
	body#contacto aside{
	width:100%;
	}}



/*---------------------------------------------------------------- 
BOTONES
----------------------------------------------------------------*/
ul.actions {
	color:#fff;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:flex-start;
	font-weight:300;
	text-transform:uppercase;
	font-size:0.8em;
	letter-spacing:1px;
	height: auto;
	margin:15px 0px;
	padding:0px;
	width:100%;
	}

ul.actions li {
	list-style:none;
	padding: 0px;
	margin:0px;
	margin-right:8px;
	margin-bottom:8px;
	position:relative;
	width:auto;
	}
	@media only screen and (max-width:620px) {
	ul.actions li{
	margin-right:0px;
	margin-bottom:10px;
	text-align: center;
	width:100%; 
	}}

ul.actions li:last-child{
	margin-right: 0px;
	}


ul.actions li label {
	margin:0px!important;
	padding:0px!important;
	color:inherit;
	}



ul.actions li > *,
ul.actions li label > *{
	display: block;
	border-radius:4px;
	color:inherit;
	cursor: pointer;
	font-size:1em;
	height:36px;
	line-height:36px;
	margin: 0px;
	padding:0px 16px; 
	position: relative;
	text-decoration: none;
	width:auto;
	}
	@media only screen and (max-width:1500px) {
	ul.actions li > *,
	ul.actions li label > *{
	height:36px;
	line-height:36px;
	}}
	@media only screen and (max-width:620px) {
	ul.actions li > *,
	ul.actions li label > *{
	height:50px;
	line-height:50px;
	padding:0px 0px; 
	text-align: center;
	width:100%; 
	}}


ul.actions li input[type="file"],
ul.actions li input[type="submit"]{
	visibility: hidden;
	display:none;
	}


ul.actions li a:hover,
ul.actions li span:hover{
	color:#fff!important;
	}





/*---------------------------------------------------------------- 
VARIOS ///////////////////////////////////////////////////////////
----------------------------------------------------------------*/
.hide {display: none;}

.first {
	}
	@media only screen and (max-width:620px) {
	.first{
	margin-top:62px;
	}}


.txt-small {
	font-size:0.8em;
	}


/*--------------------------------------------------------------------------- GUIA (delete) */

.flex-container {
	display: flex;

	/* Dirección de items */
	flex-direction: row; /* → */
	flex-direction: row-reverse; /* ← */
	flex-direction: column; /* ↓ */
	flex-direction: column-reverse; /* ↑ */

	/* Envolvente */
	flex-wrap: wrap; /* Respeta tamaño de flex-items al llegar a limite de espacio*/
	flex-wrap: nowrap; /* Reduce flex-items conforme se reduce wrap al llegar a limite de espacio*/
	flex-wrap: wrap-reverse; /* Reduce flex-items conforme se reduce wrap y los invierte en orden  al llegar a limite de espacio*/

	/* Justificación */
	justify-content:flex-start; /* 1 2 3 4 - - - - - - - */
	justify-content:flex-end; /* - - - - - - -  1 2 3 4 */
	justify-content:center; /* - - - 1 2 3 4 - - - */
	justify-content:space-between; /* 1 - - - 2 - - - 3 - - - 4 */
	justify-content:space-around; /* - 1 - - 2 - - 3 - - 4 - */
	justify-content:space-evenly; /* - 1 - 2 - 3 - 4 - */


	/* Alineación (vertical )*/
	align-items:flex-start; /* top */
	align-items:flex-end; /* bottom */
	align-items:center; /* middle */
	align-items:stretch; /* Modifica altura de .flex-items para adaptarlos a todo lo alto */
	align-items:baseline; /* ???  */
	}	



.flex-items{
	order:1; /* default 0, orden de items  */
	}