@charset "UTF-8";
/* CSS Document */


body {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 14pt;
    margin-right: 0px;
    margin-left: 0px;
}

.slaB {font-family: 'Roboto Slab', serif;}    

.limpia {clear: both !important;}

#contenedorPrin {
    margin: 20px 0 0 0;
    background-image:url("../images/bg-1.png");
    background-repeat: no-repeat;
    background-position: top left;
}

#cabeza {
    margin: 0 50px 0px 300px;
    height: 52px;
    padding-bottom: 35px;
    background-image: url("../images/bg-cbz-1.png");
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: contain;
}

#cabezaInt {
    margin-right: 10px;
}

#cabezaInt .cb-img1, #cabezaInt .cb-img2, #cabezaInt .cb-img3, #cabezaInt .cb-img4, #cabezaInt .menuMin {
    float: right;
    width: 44px;
    height: 52px;
}

#cabezaInt .cb-img2 {
    width: 146px;
}

#cabezaInt .cb-img3 {
    width: 70px;
}

#cabezaInt .cb-img4 {
    width: 320px;
}

#menuShort{
    width: 54px; 
    margin-left: 30px;
    display: none;
}

#menuSec {
    margin: 50px 50px 0 50px; 
}

#menuSec ul {
    list-style: none;
    margin: 0px;
}

#menuSec ul li {
    display: inline-block;
    padding:0px 15px;
}

#menuBusq {
    margin: 18px 0 0 85px;
    background-color: #000000;
    background-image: url("../images/bg-menu.png");
    background-repeat: no-repeat;
    background-position: left;
    height: 40px;
    padding: 0 50px 0 0;
} 

#menuBusq div.mBL {
    display: inline-block;
    margin: 5px 0 5px 0;
}

#menuBusq div.mBL span{
    display:inline-block;
    padding: 0 20px;
}

#menuBusq form.bsq {
    display: inline;
    margin-left: 15px;
}

#menuBusq form.bsq input.txtBusq {
    font-size: 1em;
    opacity: 0.8;
    height: 24px;
    width: 220px;
    padding: 5px;
    margin: 0px;
}

div.categBarra-2 input.txtBusq {
    font-size: 0.9em;
    opacity: 0.8;
    height: 24px;
    width: 220px;
    padding: 5px;
    margin: 0px;
}

#menuBusq form.bsq button.bttBusq {
    height: 34px;
    width: 53px;
    background-image: url("../images/bt-bsq-up.png");
    border: none;
    border-radius: 0px;
    padding: 0px;
    cursor: pointer;
}

#menuBusq form.bsq button.bttBusq:hover {
    background-image: url("../images/bt-bsq-dw.png");
}


.fnd-blanco {
    background-color: #ffffff;
}


.contieneSlider {
    /*height: calc(70vh - 160px);*/
    margin: 5px 50px 0px 50px;
    display: flex;
    justify-content: center;
    align-items: center;  

}

.contieneSlider .base {
    display: flex;
    justify-content: center;
    align-items: center;
    top: -1px;
    background-color: #ffffff;
}

.contieneSlider:target {
   
}



.item-1 {
    box-sizing: border-box;
    width: auto;
}

.item-2 {
    box-sizing: border-box;
    width: calc(90vw - 46px);
    flex-basis: 90%;
    padding: 7%;
    display: flex;
    justify-content: center;
    align-items: center; 
}

.item-2 section.uno {
    width: 70%;
}

.item-2 section.dos {
    width: 30%;
    margin-left: 5%;
}

.item-2 section.dos img {
    width: 100%;
}

.item-3 {
    box-sizing: border-box;
    width: auto;
}

.noVe {visibility: hidden;}

.puntosNav {
    margin: 0 50px 20px 50px;;
    background-image: url("../images/bg-tarjetaInicio.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position:center;
    padding: 30px 0 10px 0;
    display: flex;
    justify-content: center; 
    z-index: 100;
}

.puntosNav  > div {
    width: 30px;
    text-align: center;
    font-size: 1.6em;
    text-shadow: 3px 3px 3px #ababab;
    cursor: pointer;
}

.puntosNav  > div a {
    color: #404140;
    text-decoration: none;
}

.puntosNav  > div a:hover {
    color: #a5a5a5;
}

.flexible {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}  

.flexibleNov {
    display: flex;
    justify-content: space-evenly;
}  

.bloque {
    margin: 0px 50px 30px 50px;
}

.bloquePadd {
    padding: 0 40px 0 100px;
}

.bloquePadd-Int {
    padding: 0 300px 0 80px;
    margin-top: 100px;
}

.bloqueTitulo {
    margin: 40px 0 0 10%;
}

.bloqueCateg {
    border-top: #000000 3px solid;
    position: relative;
}

.bloqueVTitulo{
    margin: 50px 10% 50px 5%;
}

.bloqueVVideo{
    margin: 10px 14% 10px 0;
}

.fnd-bv-In {background-color: #fbc900}
.fnd-bv-Fr {background-color: #ff2a00}
.fnd-bv-Al {background-color: #d9d8d6}

.bloqueVFicha{
    margin: 0 10% 50px 10%;
}

.bloquePalabra {
    margin: 30px 0 30px 0;
    padding: 30px 50px 30px 50px;
    background-position: left center;
    background-repeat: no-repeat;
}

.pest-indica-In {background-image: url( "../images/indica-In.svg");}
.pest-indica-Al {background-image: url( "../images/indica-Al.svg");}
.pest-indica-Fr {background-image: url( "../images/indica-Fr.svg");}

.bloqueMrgSup {margin-top: 100px !important;}

.identiVideo{
    margin-left: -450px;
    padding: 0 5% 2px 58%;
}

.despliegaVideo {
    margin: 0px 5% 0px 21%;
    text-align:center;
}

.despliegaVideo iframe{
    width:900px;
    height:506px;
} 

div.fichaVideo {
    margin: 20px 5% 0px 5%;
    padding: 5px 6% 25px 6% !important;
    box-shadow: 0px 6px 6px 3px #e0e0e0;
}


.fondoCateg {
    margin-left: 10%;
    padding: 100px 20% 100px 20px;
}

.color-fnd-Al { background-color: #e0dfde;}
.color-fnd-Fr { background-color: #f24405;}
.color-fnd-In { background-color: #f3cb04;}

.categBarra-1{
    width: 60%;
    padding: 5px 5px 5px 5%;
    position: absolute;
}

.barra1-fnd-Al { background-color: #fbc900;}
.barra1-fnd-Fr { background-color: #000c5d; color:#ffffff;}
.barra1-fnd-In { background-color: #91d7f2;}
.barra1-fnd-Nt { background-color: #000000; color:#ffffff;}

.categBarra-1 select, .categBarra-2 select {
    width: 100px;
    opacity: 0.7;
    font-size: .9em;
}

.contiene-Barra2 {
    height: 37px;
    width: 50%;
    position: absolute;
    margin-top: 35px; 
}

.categBarra-2{
    width: 60%;
    padding: 5px 5px 0px 10%;
    padding-left: 10% !important;
    height: 32px;
    display: inline-block;
}

.barra2-fnd-Al { background-color: #ff2d27;}
.barra2-fnd-Fr { background-color: #f1f1f1;}
.barra2-fnd-In { background-color: #ff0077;}
.barra2-fnd-Nt { background-color: #cfd2d3;}

.categBarra-2 form.bsq {
    display: inline;
}

 .categBarra-2 form.bsq input.txtBusq  {
    opacity: 0.7;
    height: 18px;
    width: 50%;
    padding: 5px;
    margin: 0px;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 1em;
}


.btBarra2 {
    display: inline-block !important;
    width:19%;
    height: 27px;
    margin-left: -4px;
    padding: 5px 0 5px 15px;
    font-family: 'Roboto Slab', serif;
    font-size: 1.1em;
    background-image: url("../images/bt-lupa.png");
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: contain;
    cursor: pointer;
}

.btBusq-Al {background-color: #0d0d0d; color:#ffffff;}
.btBusq-Fr {background-color: #ff7c62;}
.btBusq-In {background-color: #00dd0f;}
.btBusq-Nt {background-color: #00609c; color:#ffffff;}

.btBarra2:hover {
    background-color: #000000;
    color: #ffffff;
}

.indicadorCat {
    position: absolute;
    top: -1px;
    right: 50px;
    height: 75px;
    width: 75px;
    background-color: #000000;
    background-repeat: no-repeat;
    background-position: center center;
    z-index: 100;
}

.icat-1 { background-image: url("../images/categoria/cat1-Pq.png");}
.icat-2 { background-image: url("../images/categoria/cat2-Pq.png");}
.icat-3 { background-image: url("../images/categoria/cat3-Pq.png");}
.icat-4 { background-image: url("../images/categoria/cat4-Pq.png");}
.icat-5 { background-image: url("../images/categoria/cat5-Pq.png");}
.icat-6 { background-image: url("../images/categoria/cat6-Pq.png");}
.icat-7 { background-image: url("../images/categoria/cat7-Pq.png");}
.icat-8 { background-image: url("../images/categoria/cat8-Pq.png");}
.icat-9 { background-image: url("../images/categoria/cat9-Pq.png");}

.relativo { position: relative;}

.tarjetaNov1, .tarjetaNov2 {
    width: 43%;
    min-height: 212px;
    padding: 0;
    padding-bottom: 35px !important;
    box-shadow: 6px 6px 6px 3px #e0e0e0;
    margin: 20px 0 20px 3%;
    float: left;
}

.tarjetaNov2 {
    margin: 20px 3% 20px 0;
    float: right;
}

/* -------------- tarjeta grid tarjetas horizontal*/

.tarjetaHorizontal {
    width: 43%;
    min-height: 212px;
    padding: 0;
    padding-bottom: 35px !important;
    box-shadow: 6px 6px 6px 3px #e0e0e0;
}

.tarjetaHorizontal div.txtResumen {
    margin: 35px 35px 0 220px;
}


/* --------------- termina tarjeta grid tarjetas horizontal*/

.tarjetaLmas{
    width: 202px;
    padding: 0 25px 25px 25px !important;
    box-shadow: 0px 6px 6px 3px #e0e0e0;
    margin: 20px 0 20px 0;
    position: relative;
    background-color:rgba(255,255,255,.8);
}

.sinMrgD {margin-right: 0px;}

.tarjetaNov1 div.txtResumen, .tarjetaNov2 div.txtResumen {
    margin: 35px 35px 0 247px;
}

div.txtResumenCto {
    margin-top: 30px;
}



/* ---------------- inicia estilo para caja de la imagen del video ----------------------*/

div.fotoVideo {
    width: 194px;
    height: 194px;
    border: #000000 4px solid;
    margin-right: 15px;
    float: left;
    position: relative;
    cursor: pointer;
}

div.tarjetaLmas div.fotoVideo { float: none !important;}

div.Lmas  { margin:0;}

.imgVideo { background-image: url("../images/minVideo/video1.png");}
.imgVideo2 { background-image: url("../images/minVideo/video2.png");}

div.fotoVideo div.ply {
    width: 87px;
    height: 87px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -43px;
    margin-left: -43px;
    opacity: 0.6;
}

div.fotoVideo:hover div.ply {
    opacity: 1.0;
}

div.indicador {
    width: 50px;
    height: 80px;
    margin-left: 13px;
    position: absolute;
}

div.cat {
    width: 50px;
    height: 40px;
    background-position: center center;
    background-repeat: no-repeat;
}

.videoCat{
    display:inline-block;
    width: 50px;
    height: 40px;
    margin-left: -3px;
    margin-bottom: -13px;
    background-position: center center;
    background-repeat: no-repeat;
}

.cat-1 {background-image: url("../images/categoria/01-cauditiva.png")}
.cat-2 {background-image: url("../images/categoria/02-clectura.png")}
.cat-3 {background-image: url("../images/categoria/03-pescrita.png")}
.cat-4 {background-image: url("../images/categoria/04-poral.png")}
.cat-5 {background-image: url("../images/categoria/05-gramatica.png")}
.cat-6 {background-image: url("../images/categoria/06-vocabulario.png")}
.cat-7 {background-image: url("../images/categoria/07-fonetica.png")}
.cat-8 {background-image: url("../images/categoria/08-estrategias.png")}
.cat-9 {background-image: url("../images/categoria/09-sociolinguistica.png")}

.cat-Al {background-color: #f29f04;}
.cat-Fr {background-color: #f1836a;}
.cat-In {background-color: #57d943;}

div.niv {
    width: 50px;
    height: 35px;
    border-radius: 0 0 20px 0;
    text-align: center;
    font-family: 'Roboto Slab', serif;
    font-size: 1.1em;
    font-weight: normal;
    padding-top:5px;
}

.videoNiv {
    display: inline-block;
    width: 50px;
    height: 35px;
    text-align: center;
    font-family: 'Roboto Slab', serif;
    font-size: 1.1em;
    font-weight: normal;
    padding: 5px 0 0 0;
    margin-left: -3px;
}

div.niv span {
    margin: 0;
    padding: 0;
}

.niv-Al {background-color: #f3cb04;}
.niv-Fr {background-color: #f2f2f2;}
.niv-In {background-color: #91d7f2;}


div.bandera {
    width: 130px;
    height: 30px;
    padding: 5px 5px 0 0;
    text-align: right;
    color: #ffffff;
    font-family: 'Roboto Slab', serif;
    font-size: .9em;
    font-weight: normal;
    position: absolute;
    right: 0;
    bottom: 15px;
}

.videoBandera {
    display: inline-block;
    width: 130px;
    height: 35px;
    padding: 5px 0 0 0;
    text-align: center;
    color: #ffffff;
    font-family: 'Roboto Slab', serif;
    font-size: 1.1em;
    font-weight: normal;
}

.bnd-Al {background-color: rgba(13,13,13,.80);}
.bnd-Fr {background-color: rgba(3,15,89,.80);}
.bnd-In {background-color: rgba(242,48,120,.80);}

/* ---------------- termina estilo para caja de la imagen del video ----------------------*/


/* ---------------------inicio estilo grid categorias ----------*/

#reja-Categoria {
  width: auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  grid-gap: 10px;
  grid-row-gap: 4px;
}

#reja-Categoria .mosaicoCuadro {
    /*position:relative;*/
}

#reja-Categoria .mosaicoCuadro img {
    max-width: 100%;
	height: auto;
    cursor:pointer;
}

#reja-Categoria .mosaicoCuadro:hover img {
    filter: invert(100%); 
    opacity: .6;
}
/*#reja-Categoria .mosaicoCuadro span {
    display:block;
    width: 100%;
    position: absolute;
    top:50%;
    text-align: center;
    color: aqua;
    z-index: 100;
    font-size: 1.1em;
    transition: transform 1s ease-in-out;
    transform: scale(0);
}

#reja-Categoria .mosaicoCuadro:hover span {
    transform: scale(1);
}*/



#bloqueTit-Categ {
    margin: 0 0 10px 0;
}

div.separadorCentro {
    width:100%;
    height:14px;
    background-image: url("../images/sepasrador.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
/* ---------------------terminaestilo grid categorias ----------*/

footer {
    margin-top: 50px;
}

footer #parte1 {
    margin: 0px;
    height: 20px;  
    background-image: url("../images/bg-2.png");
    background-repeat: no-repeat;
    background-position: left;
}

footer #parte2 {
    margin: 0px;
    background-image: url("../images/bg-3.png");
    background-repeat: no-repeat;
    background-position: left top;
    background-color: #000000;
    padding: 40px 40px 30px 40px;
}

.mrgAbajo{
    display: block;
    margin-bottom: 10px;
}

#creditos {
    margin: 0px;
    background-color: #005e97;
    background-image: url("../images/bg-cred.png");
    background-repeat: no-repeat;
    background-position: top right;
    background-size: contain;
    position: relative;
    padding-left: 55px;
    padding-top: 55px;
}

.credFlt {float: left;}

#creditos #cierra{
    position: absolute;
    width: 70px;
    height: 70px;
    top: 65px;
    right: 25px;  
}

#creditos #cierra a{
    display: block;
    width: 70px;
    height: 70px;
    background-image: url("../images/bt-cerrar.png");
    opacity: 0.4;
    cursor: pointer;
}

#creditos #cierra a:hover{
    opacity: 0.7;
}