/*
	Evitar usar nombres de colores porque hay funciones que trabajan con rgb o hexa.
*/

body { font-family: "Josefin Sans", helvetica, sans-serif; }

div { margin:0; box-sizing: border-box; font:inherit; vertical-align: middle; /*overflow:hidden;*/}
button,input,select,textarea,optgroup{font:inherit;margin:0}
html{overflow-x:hidden}

ul { list-style-position: outside; margin: 8px; padding: 0;}

.relativo {position: relative;}

/* input */
.campo {display:block;max-width:100%;margin:4px 0;padding:8px 8px 4px;border:none;border-bottom:solid 1px LightGray;width:100% !important;}

.mitad { display: inline-block; width: 50%; min-width: 360px; }
.tercio { display: inline-block; width: 33.3%; /*min-width: 240px;*/ }
.cuarto { display: inline-block; width: 25%; min-width: 180px; }
.quinto { display: inline-block; width: 20%; min-width: 144px; }

.dostercios { display: inline-block; width: 66.6%; }
.trescuartos { display: inline-block; width: 75%; }
.cuatroquintos { display: inline-block; width: 80%; }

.mitad_margen_1 { display: inline-block; width: 46vw; margin: 2vw; min-width: 360px; }


.barra_botones {display: block; position: relative; padding:0px;}
.barra_botones > div {display:inline-block; padding:16px 24px; 
	text-align:center; cursor: pointer;}


.SECCION {display: block; position: relative; vertical-align: top;}
.FILTRO_FONDO { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.CUADRO {display: inline-block; position: relative; vertical-align: top;}

.seccion_0 {display: block; position: relative;}
.seccion_0 div { display: inline-block; }

.seccion_1 {display: block; position: relative;}
/* primer div: filtro del fondo */
.seccion_1 > div:nth-child(1) { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 0;}
/* segundo div: panel */
.seccion_1 > div:nth-child(2) { display: inline-block; width: 100%; padding: 24px 32px }
.seccion_1 > div:nth-child(2) > div {display: inline-block; padding: 24px 32px;}


.seccion_2 {display: block; position: relative;}
.seccion_2 > div {display: inline-block; vertical-align:top; padding: 0px;}
.seccion_2 > div > div {padding: 24px 32px;}	/* cuadros interiores */

/* primer div: filtro del fondo */
.seccion_2 > div:nth-child(1) { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 0;}

/* paneles */
.seccion_2 > div:nth-child(2) { width: 50%; min-width: 360px; padding: 24px 16px 24px 32px;}
.seccion_2 > div:nth-child(3) { width: 50%; min-width: 360px; padding: 24px 32px 24px 16px;}


.seccion_3 {display: block; position: relative;}
.seccion_3 > div {display: inline-block; vertical-align:top; padding: 0px;}
.seccion_3 > div > div {padding: 24px 32px;}	/* cuadros interiores */

/* primer div: filtro del fondo */
.seccion_3 > div:nth-child(1) { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 0;}

/* paneles */
.seccion_3 > div:nth-child(2) { width: 33.3%; min-width: 240px; padding: 24px 16px 24px 32px;}
.seccion_3 > div:nth-child(3) { width: 33.3%; min-width: 240px; padding: 24px 16px;}
.seccion_3 > div:nth-child(4) { width: 33.3%; min-width: 240px; padding: 24px 32px 24px 16px;}


.seccion_4 {display: block; position: relative;}
.seccion_4 > div {display: inline-block; vertical-align:top; padding: 0px;}
.seccion_4 > div > div {padding: 24px 32px;}	/* cuadros interiores */

/* primer div: filtro del fondo */
.seccion_4 > div:nth-child(1) { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 0;}

/* paneles */
.seccion_4 > div:nth-child(2) { width: 25%; min-width: 180px; padding: 24px 16px 24px 32px;}
.seccion_4 > div:nth-child(3) { width: 25%; min-width: 180px; padding: 24px 16px;}
.seccion_4 > div:nth-child(4) { width: 25%; min-width: 180px; padding: 24px 16px;}
.seccion_4 > div:nth-child(5) { width: 25%; min-width: 180px; padding: 24px 32px 24px 16px;}


.seccion_5 {display: block; position: relative;}
.seccion_5 > div {display: inline-block; vertical-align:top; padding: 0px;}
.seccion_5 > div > div {padding: 24px 32px;}	/* cuadros interiores */

/* primer div: filtro del fondo */
.seccion_5 > div:nth-child(1) { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 0;}

/* paneles */
.seccion_5 > div:nth-child(2) { width: 20%; min-width: 144px; padding: 24px 16px 24px 32px;}
.seccion_5 > div:nth-child(3) { width: 20%; min-width: 144px; padding: 24px 16px;}
.seccion_5 > div:nth-child(4) { width: 20%; min-width: 144px; padding: 24px 16px;}
.seccion_5 > div:nth-child(5) { width: 20%; min-width: 144px; padding: 24px 16px;}
.seccion_5 > div:nth-child(6) { width: 20%; min-width: 144px; padding: 24px 32px 24px 16px;}


.margen_chico { margin: 4px !important; }
.margen_medio { margin: 24px 32px !important; }
.margen_sup,.margen_1 {margin-top:24px !important;}
.margen_inf,.margen_3 {margin-bottom:24px !important;}
.margen_izq,.margen_4 {margin-left:24px !important;}
.margen_der,.margen_2 {margin-right:24px !important;}
.sinmargen { margin: none !important; }

.relleno_1 { padding: 8px 12px 6px !important; }
.relleno_2 { padding: 24px 32px !important; }
.relleno_3 { padding: 40px 48px !important; }
.relleno_4 { padding: 48px 60px !important; }
.sinrelleno { padding: 0px !important; }

.bloque { display: block !important; position: relative; }
.enlinea, .inline { display: inline-block; }
.oculto{display:none;}
.visible{display:initial;}

.bordes { border:solid 1px LightGray; }
.borde_sup { border-top:solid 1px LightGray; }
.borde_der { border-right:solid 1px LightGray; }
.borde_inf { border-bottom:solid 1px LightGray; }
.borde_izq { border-left:solid 1px LightGray; }
.borde_blanco{border-color:white !important;}
.borde_negro{border-color:black !important;}

.borde_2 {border-width:2px !important;}
.borde_3 {border-width:3px !important;}
.borde_4 {border-width:4px !important;}
.borde_6 {border-width:6px !important;}

.sinbordes { border:none; }

/*.sombra,.sombra1 { box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12) }*/
.sombra { box-shadow:4px 4px 4px 0 rgba(0,0,0,0.4) }
.sombra_1 { box-shadow:3px 3px 8px 0 rgba(0,0,0,0.4) }
.sombra_2 { box-shadow:4px 4px 10px 0 rgba(0,0,0,0.4) }
.sombra_3 { box-shadow:2px 2px 32px 8px rgba(0,0,0,0.3) }
.sombra_h { box-shadow:0 4px 8px 0 rgba(0,0,0,0.3); margin-bottom: 16px; }

.letra_chiquita { font-size: 14px !important; }
.letra_chica { font-size: 18px !important; }
.letra_media { font-size: 20px !important; }
.letra_mediamas { font-size: 24px !important; }
.letra_grande { font-size: 28px !important; }
.letra_grandemas { font-size: 36px !important; }
.letra_muygrande { font-size: 48px !important; }

.izquierda { text-align: left !important; }
.centro { text-align: center !important; }
.derecha { text-align: right !important; }
.justificado { text-align: justify !important; }

.nowrap { white-space: nowrap; }

.transparente { background: transparent; }
.transparencia_1 { opacity: 0.8; }
.transparencia_2 { opacity: 0.6; }
.transparencia_3 { opacity: 0.4; }
.transparencia_4 { opacity: 0.2; }

.boton { display: inline-block; cursor:pointer; line-height:1;
	margin: 0px; padding: 24px 32px; 
	text-align: center; vertical-align:top;
	overflow:hidden; text-decoration:none;
	background-color: #DCDCDC; color: Black;
}
.boton:hover {background-color: #B0B0B0; color: White;}

.boton_ico { display: inline-block; cursor:pointer; line-height:1;
	margin: 0px; padding: 4px; font-size: 44px;
	text-align: center; vertical-align:top;
	overflow:hidden; text-decoration:none;
	background-color: #404040; color: #A0A0A0;
}
.boton_ico:hover {background-color: #A0A0A0; color: #404040;}


.hover_oscuro:hover {background-color:rgba(0,0,0,0.15)}
.hover_claro:hover {background-color:rgba(255,255,255,0.15)}
.hover_texto_claro:hover {color:rgba(255,255,255,0.8)}


.anima_izq{position:relative;animation:animateleft 0.4s}@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}


.parallax {
  /* The image used */
	/*background-image: url("img_parallax.jpg");*/

  /* Full height */
  height: 100%;

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;	/* contain cover */
  
/*  perspective: 1px;*/
}

/* COLORES DE FONDO GENÉRICOS EXTRA A PALETA */
.blanco { background-color: #FFFFFF; color: Black !important; }
.gris_1 { background-color: #F5F5F5; color: Black; }/*WhiteSmoke*/
.gris_2 { background-color: #DCDCDC; color: Black; }/*Gainsboro*/
.gris_3 { background-color: #D3D3D3; color: Black; }/*LightGray*/
.gris_4 { background-color: #C0C0C0; color: Black; }/*Silver*/
.gris_5 { background-color: #B0B0B0; color: White; }
.gris_6 { background-color: #A0A0A0; color: White; }
.gris_7 { background-color: #808080; color: White !important; }/*Gray*/
.gris_8 { background-color: #606060; color: White !important; }
.gris_9 { background-color: #404040; color: White !important; }
.negro { background-color: #000000; color: White !important; }
.texto_blanco {color: #FFF !important;}
.texto_gris_1 { color: #F5F5F5;}/*WhiteSmoke*/
.texto_gris_2 { color: #DCDCDC !important; }/*Gainsboro*/
.texto_gris_3 { color: #D3D3D3 !important; }/*LightGray*/
.texto_gris_4 { color: #C0C0C0 !important; }/*Silver*/
.texto_gris_5 { color: #B0B0B0 !important; }
.texto_gris_6 { color: #A0A0A0 !important; }
.texto_gris_7 { color: #808080 !important; }/*Gray*/
.texto_gris_8 { color: #606060 !important; }
.texto_gris_9 { color: #404040 !important; }
.texto_negro { color: #000000; }
.texto_tan {color:Tan !important;}

@media screen and (max-width: 720px)
{
	.mitad { width: 100%; }
	.tercio { width: 100%; }
	.cuarto { width: 100%; }
	.quinto { width: 100%; }
	
	/*.seccion_2 > div { display: block; width: 100%; padding: 16px 24px;}*/
	.seccion_2 > div:nth-child(2) { width: 100%; padding: 16px 16px 8px;}
	.seccion_2 > div:nth-child(3) { width: 100%; padding: 8px 16px 16px;}
	
	.seccion_3 > div:nth-child(2) { display: block; width: 100%; padding: 16px 16px 8px;}
	.seccion_3 > div:nth-child(3) { display: block; width: 100%; padding: 16px 16px 8px;}
	.seccion_3 > div:nth-child(4) { display: block; width: 100%; padding: 8px 16px 16px;}
}