html{ box-sizing: border-box}*,*:before,*:after { box-sizing:inherit }
html {overflow-x:hidden}
body {margin:0 auto; background: url(../ilustraciones/fondo3.png) }

html,body {font-family: "Open Sans", sans-serif; font-size:16px;line-height:1.5; color: #212121}

h1 {font-size:36px } 
h2 {font-size:30px }
h3 {font-size:24px }
h4 {font-size:20px }
h5 {font-size:18px }
h6 {font-size:16px }

h1,h2,h3,h4,h5,h6 {font-weight:400;margin:10px 0}

a { color:inherit; text-decoration: none; }
/* a:hover {font-weight: bold } */

img { max-width:100%; height: auto } 
.img_centro {display: block; margin-left: auto; margin-right: auto;}

/*****************************************************************************************************/
/*   B O T O N E S  ,  M A R B E T E S y  L I S T O N E S */ /*acción de desplegar: completar códigos*/
/*******************************************************************************************************/

.btn,.botn { border:none; padding:8px 16px; vertical-align: middle;  text-align:center; cursor:pointer;  }

.btn:hover { box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); }   /*con sombrita*/
.botn:hover{ color:#000!important; background-color:#fff!important ; }                    /*sin sombrita*/

.marbecirc, .marberect { background-color:#000; color:red; display:inline-block; padding-left:8px;padding-right:8px; text-align:center}

.marbecirc { border-radius: 100%  }

.tarjeta { position: relative; overflow: hidden; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); }

/* B A R R A S  D E    D E   N A V E G A C I O N */
.listón  { width:100%; overflow:hidden; }
.listón .listón_ítem { padding:14px 14px; float: left; width: auto; border: none; display:block }
.listón:before, .listón:after { content:""; display:table; clear:both}

.listón_bloque .listón_ítem { width:100%; display:block; padding:1rem 0 ; text-align:center; }
.listón_lateral { height:100%; width:100%;opacity: 0.9; position:fixed!important; z-index:2; display: none; }


/***************************************************************************************************/
/*   C U E R P O   D E   F I L A S   Y    C O L UM N A S    */
/***************************************************************************************************/

.tope { top:0 }
.fondo { bottom:0 }
.tope,.fondo { position:fixed; width:100%; z-index:1}

.ext_980 { max-width: 980px; margin:auto }                                                         /* el ancho del cuerpo de trabajo */
.contenedor { padding: 0.01rem 1rem; }                                                             /* el padding lateral genérico por defecto */
.contenedor:after,.contenedor:before { content:""; display:table; clear:both}

.fila {  margin: 0 auto; }
.fila:after, fila:before {  content: ""; display: table; clear: both; }                                 

.col,.semi,.tercio,.dostercios,.trescuartos,.cuarto { float:left; width:100% }

.col_xs1{width:8.33333%}
.col_xs2{width:16.66666%}
.col_xs3{width:24.99999%}
.col_xs4{width:33.33333%}
.col_xs5{width:41.66666%}
.col_xs6{width:49.99999%}
.col_xs7{width:58.33333%}
.col_xs8{width:66.66666%}
.col_xs9{width:74.99999%}
.col_xs10{width:83.33333%}
.col_xs11{width:91.66666%}
.col_xs12{width:99.99999%}

/**** chico ****/
@media (min-width:600px) {
    .col_s1{width:8.33333%}
    .col_s2{width:16.66666%}
    .col_s3{width:24.99999%}
    .col_s4{width:33.33333%}
    .col_s5{width:41.66666%}
    .col_s6{width:49.99999%}
    .col_s7{width:58.33333%}
    .col_s8{width:66.66666%}
    .col_s9{width:74.99999%}
    .col_s10{width:83.33333%}
    .col_s11{width:91.66666%}
    .col_s12{width:99.99999%}
}
/****mediano****/
@media (min-width:700px) {
    .col_m1 { width:8.33333% }
    .col_m2 { width:16.66666% }
    .col_m3,
    .cuarto { width:24.99999% }
    .col_m4, 
    .tercio { width:33.33333%}
    
    .col_m5 { width:41.66666%}
    .col_m6,
    .semi { width:49.99999%}
    .col_m7 { width:58.33333%}
    .col_m8, 
    .dostercios { width:66.66666% }
    .col_m9,
    .trescuartos { width:74.99999% }
    .col_m10{width:83.33333%}
    .col_m11{width:91.66666%}
    .col_m12{width:99.99999%}
}
/****grande ****/
@media (min-width:993px){
    .col_g1{width:8.33333%}
    .col_g2{width:16.66666%}
    .col_g3{width:24.99999%}
    .col_g4{width:33.33333%}
    .col_g5{width:41.66666%}
    .col_g6{width:49.99999%}
    .col_g7{width:58.33333%}
    .col_g8{width:66.66666%}
    .col_g9{width:74.99999%}
    .col_g10{width:83.33333%}
    .col_g11{width:91.66666%}
    .col_g12{width:99.99999%}
}
@media (max-width:600px) { .ocultarpeque{ display: none!important }  }

@media (max-width:992px) and (min-width:601px){ .ocultarmedio { display:none!important } }

@media (min-width:993px) { .ocultargde{display:none!important } }



.pie-grilla { 
    display: grid;  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); grid-gap: 20px; text-align: center;}



/********************************************************************/
    /* POSICIONAMIENTO y alineamiento de cajas  y elementos  */
/********************************************************************/
.pos1    { position: absolute; left: 4rem; top:  1rem; }

.aizq    { float: left!important }
.ader    { float: right!important }

.centrado { margin: 0; position: absolute; top: 50%;  left: 50%; transform: translate(-50%, -50%); }

.bloque  { display: block; width:100% }   
.ocultar { display: none!important}
.mostrar { display: block!important  /*JS*/ } 






/* LISTAS */
.ul { list-style-type:none; padding:0; margin:0 }
.ul li { padding: 8px 16px; border-bottom: 1px solid #ddd }
.ul li:last-child { border-bottom:none }

/*******************************************/
/* M Á R G E N E S  Y  E S P A C I A D O S */
/*******************************************/

.margen { margin: 1rem!important }

.margensup { margin-top: 1rem!important }
.margeninf { margin-bottom: 1rem !important }

.margenizq { margin-left: 1rem!important }
.margender { margin-right: 1rem!important }

.margen_1 { margin-top: 1rem!important; margin-bottom: 1rem!important}



.paddincito  { padding: 0 8px!important; }      /*el padding para filas y columnas*/
.paddincitos  { padding: 0 4rem!important; }   

.padding     { padding: 8px 16px!important }

.padding_gde { padding: 12px 24px!important }
.padding_xgde { padding: 4rem }

.padding_izq { padding-left: 1rem }
.paddin_der  { padding-right: 1rem }
.padding_top2 { padding-top: 2rem; }
.padding_top4 {padding-top: 4rem}

.padding_fdo2 { padding-bottom: 2rem}
.padding_fdo4 { padding-bottom: 4rem}

.padding_1 {padding-top: 1rem!important; padding-bottom: 1rem!important}
.padding_15{padding-top:24px!important;padding-bottom:24px!important} 
.padding_2 { padding-top: 2rem!important; padding-bottom: 2rem!important}
.padding_3 { padding-top: 3rem!important; padding-bottom: 3rem!important}
.padding_4 { padding-top: 4rem!important; padding-bottom:4rem!important }

.padding_img {padding: 1.5rem 1rem 0rem 1rem}


/*interlineado*/
.interlineado_1 { line-height: 1; }
.interlineado_2 { line-height: 2;  }
.interlineado_3 { line-height: 3 ;}
.interlineado_4 { line-height: 4; }



/***********************/
/*    L E T R A S      */
/***********************/
.mini  { font-size: 10px!important }
.peque { font-size: 12px!important }
.medio { font-size: 15px!important }
.grande { font-size: 18px!important }
.xgrande { font-size: 24px!important }
.xxgrande { font-size: 36px!important }
.xxxgrande { font-size: 48px!important }
.jumbo {font-size: 64px!important }

.ancho { letter-spacing: 1px }
.ancho2 { letter-spacing: 2px }

.gordito { font-weight: bold }

.ajuste_izq  { text-align: left!important  }
.ajuste_der  { text-align: right!important }
.ajuste_bloque { text-align:justify!important }
.ajuste_centro { text-align:center!important }   

/*****************************************************/
/*     C O L O R E S   D E  F O N D O (y letra)      */
/*****************************************************/

.blanco, .flota_blanco:hover { background-color:#fff!important; color:#000!important; }
.negro,.flota_negro:hover { background-color:#000!important; color:#fff!important; }
.grisnegro,.flota_grisnegro:hover { background-color:#313131!important; color:#fff!important; }
.gris, .flota_gris:hover { background-color:#9e9e9e!important; color:#000!important; }
.grisclaro,.flota_grisclaro:hover { background-color:#f1f1f1!important; color:#000!important;}
.grisoscuro,.flota_grisoscuro:hover { background-color:#414141!important; color:#fff!important; }
.grisazul,.flota_grisazul:hover { background-color:#24272e!important; color:#fff!important; }

.amarillo,.flota_amarillo:hover { background-color:#ffeb3b!important; color:#000!important; }
.amlistón,.flota_amlistón:hover { background-color:#ffc107!important; color:#000!important;  }
.arena,.flota_arena:hover { color:#000!important; background-color:#fdf5e6!important }
.añil,.flota_añil:hover { color:#fff!important; background-color:#3f51b5!important }
.caqui,.flota_caqui:hover { color:#000!important; background-color:#f0e68c!important }
.celeste,.flota_celeste:hover { color:#000!important; background-color:#87CEEB!important }
.cian,.flota_cian:hover { color:#000!important; background-color:#00bcd4!important }
.dorado,.flota_dorado:hover{ color:#000!important; background-color:#ff9800!important }
.naranja,.flota_naranja:hover{color:#fff!important; background-color:#ff5722!important}
.marronosc,.flota_marronosc:hover { color:#fff!important; background-color:#341C09!important }

.pastelito {color:#000!important; background-color: #fff4f0 }
.pastelito1 {color:#000!important; background-color: #e5dbd8 }
.pastelverde,.flota_pastelverde:hover{color:#000!important; background-color:#ddffdd!important}
.pastelamarillo,.flota_pastelamarillo:hover{color:#000!important; background-color:#ffffcc!important}
.pastelazul,.flota_patelazul:hover{color:#fff!important; background-color:#2E4A62!important}


.rojo,.flota_rojo:hover{color:#fff!important; background-color:#f44336!important}
.rojoladrillo { color: #fff!important; background:#3C1414 }
.rosado,.flota-rosado:hover { color:#fff!important; background-color:#e91e63!important }
.rosaviejo,.rosaviejo:hover { color: #ffdddd!important }
.verde,.flota_verde:hover { color:#fff!important; background-color:#4CAF50!important }
.verdelima,.flota_verdelima:hover{color:#000!important; background-color:#cddc39!important}
.verdeseco,.flota_verdeseco:hover { color:#000!important; background-color:#8bc34a!important }
.verdezul,.flota_verdezuo:hover{color:#fff!important; background-color:#009688!important}
.violeta,.flota_violeta:hover{color:#fff!important; background-color: #341926!important}




/*****************************************************/
/*     C O L O R E S   D E   L E T R A  */
/*****************************************************/
.letra_blanca {color: #e6e6e6}

.letra_gris, .flotaletra_gris:hover { color :#757575!important }


/********************************************/
/*   B O R D E S  y   D I V I S O R E S    */
/*******************************************/

.borde-0 { border:0!important }
.borde { border:1px solid #fff!important }
.borde_tope { border-top:1px solid #ccc!important }

.borde_fondo { border-bottom:1px solid black!important }
.borde_izq { border-left:1px solid #ccc!important }
.borde_der{border-right:1px solid #ccc!important }

/* redondeamiento */
.redondo_min { border-radius:2px }
.redondo { border-radius: 4px } 
.redondo_med { border-radius:6px }
.redondo_gde { border-radius:10px }
.redondo_xgde { border-radius:16px }
.redondo_xxgde { border-radius:32px }
.circular { border-radius:50% }


/***************************************************/
   /*      E F E C T O S  Y   D E C O S         */
/****************************************************/
.sombreado { box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)}
.sombreado2,.flota_sombreado:hover { box-shadow:0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19)}

.filtrogris3, .flota_filtrogris3:hover { filter: grayscale(100%) }
.fitrogris2 { filter:grayscale(75%) }
.filtrogris1  { filter:grayscale(50%)}

.sepia, .flota_sepia:hover{filter:sepia(75%)}
.sepiafuerte { filter:sepia(100%) }
.sepiasuave { filter:sepia(50%) }

.opaco,.flota_opaco:hover { opacity:0.60 }
.opaco_max{ opacity: 0.25 }
.opaco_min{ opacity: 0.75 }
.opaco_off,.flota_opaco-off:hover{ opacity:1 }


/*** S I M B O L I T O S  ***/
.fa-heart {  color: #e84545; font-size: 11px; margin: 0 2px; }



/***************************************************/
/* la portada de la selección de idioma
/****************************************************/
.idiomas {
    height: 800px; 
    background: url(../ilustraciones/01.jpg) no-repeat 45%;
}



/*  A  N  I  M  A  menu  */
.salexizq{ position:relative; animation:salexizq 0.4s; }
@keyframes salexizq{  from{left:-300px;opacity:0} to{left:0;opacity:1} }