body {
    /* font-family: 'Nunito Sans', sans-serif; */
    font-family: 'Tinos', serif;
    background: rgb(255, 255, 255);  
}

p {
    font-size: 17px;
}

#more {display: none;}

.accesodirect {
    background-color: rgb(223, 219, 194); 
    color:black; 
    border: 0; 
    box-shadow: 0 0 5px black;
}

/* Argumentos de PRIMERA BARRA DE NAVEGACIÓN */
.navbar-uno {
    max-width: 1210px;
    margin-left: auto;
    margin-right: auto;
    /* rgb(26, 27, 26) */
    min-height: 120px;
    padding-left: 30;
    padding-right:18;
    top: 0;
    right: 0;
    left: 0;
}

.imagen-redes-menores{
    opacity: 0.6; 
    margin-top: 3px;
    width: 27px;
    height:27px;
}

.imagen-redes-mayores{
    width: 32px;
    height:32px;
}


@media screen and ( max-width: 450px ) {
    .imagen-redes-menores { width: 20px; height:20px; }
    .imagen-redes-mayores { width: 24px; height:24px; }
    .navbar-uno {
        padding-left: 15;
        padding-right: 6;
    }
}

@media(max-height: 470px) and (max-width:991px){
    @media(min-width:767px){
    .navscroll{
        overflow-y: scroll;
        max-height: 30vh;
    }
    }
    @media(max-width:767px){
    .navscroll{
        overflow-y: scroll;
        max-height: 60vh;
    }
    }
}

.compartir{
    margin-top: -20px;
    margin-bottom: 10px;
}
@media(max-width:767px){
    .compartir{
        margin-top: 0px;
        margin-bottom: 30px;
    }
}

.imagen-redes-compartir{
    margin-top: 6px;
    width: 27px;
    height:27px;
    opacity: 0.6;
}

@media screen and ( max-width: 500px ) {
    .imagen-redes-compartir { width: 22px; height:22px; }
}

.enunciadoLargo{
    display:block;
}
.enunciadoCorto{
    display:none;
}
@media(max-width:335px){
    .enunciadoLargo{
        display:none;
    }
    .enunciadoCorto{
        display:block;
    }
}

.pegar{
    top: 0;
    z-index:1030;
    position: sticky;
    background-color: rgb(0, 0, 0);
}

.pegar2{
    z-index:1000;
    position: sticky;
    top: 120px; 
    background-color: rgb(224, 215, 160);
}

.pegar3{
    top: 0;
    /* z-index:1030; */
    /* position: sticky; */
    /* background-color: rgb(0, 0, 0); */
}

.navbar-dos {
    max-width: 1630px;
    margin-left: auto;
    margin-right: auto;
    line-height: 16px;
    padding-top: 5;
    padding-bottom: 5;
    height: auto;
    overflow: hidden;
    font-size: 16px;
    right: 0;
    left: 0;
}

.carousel-background {
    background-color: rgba(155, 146, 89);
}

.carousel-custom {
    width: 100%;
    /* width: 850px */
    -webkit-transition: 10s ease-in-out left;
    -moz-transition: 10s ease-in-out left;
    -o-transition: 10s ease-in-out left;
    transition: 10s ease-in-out left;
    max-width: 1700px;
    margin-left: auto;
    margin-right: auto;
}

.imagensup {
    width: 100%;
    max-width: 1700px;
    margin-left: auto;
    margin-right: auto;
}

.ribetearriba{
    margin-top:15px; 
    padding-bottom:15px;
}

/* COLOR LETRA DE "BIENVENIDO" */
.tituloscolor{
    color:rgba(170, 160, 98, 0.904);
}

.tituloscolor2{
    color:rgba(170, 160, 98, 0.904);
    padding: 25px 0 0px 0
}

/* DECK DE CARTAS DE ABAJO */
.card-color{
    background-color:rgba(155, 146, 89);
}
.card-back {
    padding: 20px 0 20px 0;
    max-width: 1475px;
}

/* BOTÓN PARA IR HACIA ARRIBA */
.totop {
    /* padding: 10px 0 10px 50px; */
    margin: 5% 0px 5% 0px;
}

.direccion{
    margin-left: auto;
    margin-right: auto;
    max-width: 1680px;
}

.informa {
    margin-top: 30px;
    /* width: 100%; */
    /* Lo de arriba + el margin-top de "id=bienvenida" da la diferencia de 30px que quiero entre el mensaje y el carrousel
    En sí, los movimientos siempre son relativos respecto de lo anterior:
    id=bienvenida está a -120px del final del carrousel, el siguiente elemento, bienve, lo quiero a 30px del carrousel, 
    como su posicion es relativa con origen en id=bienvenida, hay que poner 150px para que esté 150px por debajo de
    id=bienvenida, es decir, 30 por debajo del carrousel */
    /* background: #f1f1f1; */
    /* padding: 40px 0 40px 0; */
    /* text-align: justify; */
    padding: 0px 0 30px 0;
    margin-left: 6%;
    margin-right: 6%;
    max-width: 1400px;
}

.informaLibro {
    margin-top: 20px;
    /* width: 100%; */
    /* Lo de arriba + el margin-top de "id=bienvenida" da la diferencia de 30px que quiero entre el mensaje y el carrousel
    En sí, los movimientos siempre son relativos respecto de lo anterior:
    id=bienvenida está a -120px del final del carrousel, el siguiente elemento, bienve, lo quiero a 30px del carrousel, 
    como su posicion es relativa con origen en id=bienvenida, hay que poner 150px para que esté 150px por debajo de
    id=bienvenida, es decir, 30 por debajo del carrousel */
    /* background: #f1f1f1; */
    /* padding: 40px 0 40px 0; */
    /* text-align: justify; */
    padding: 0px 0 30px 0;
    margin-left: 6%;
    margin-right: 6%;
    max-width: 1400px;
}

@media screen and ( min-width: 1600px ) {
    .informa { 
        margin-left: auto;
        margin-right: auto;
    }
    .informaLibro { 
        margin-left: auto;
        margin-right: auto;
    }
}

.colodirec{
    margin-top: 10px;
    margin-left: 7%;
    color:rgba(170, 160, 98, 0.904);
}

#pre1.btn.collapsed:before
{
    content:'\25c6' ;
    display:block;
    width:15px;
}
#pre1.btn:before
{
    content:'\25c8' ;
    display:block;
    width:15px;
}

.pre{
    text-align: justify;
    margin-top: -25px;
    margin-left: 25px;
}

.filtro {
    margin-top: 20px;
    overflow: hidden;
}

.filterDiv {
    float: left;
    /* background-color: black; */
    color: #000000;
    /* width: 100px; */
    /* line-height: 100px; */
    text-align: center;
    margin: 2px;
    margin-bottom: 30px;
    display: none;
}

.filtercard{
    background-color: rgb(223, 219, 194);
}
  
.show {
    display: block;
}

.dropdown-toggle-1:after, .dropdown-toggle-2:after, .dropdown-toggle-3:after{
    content:'\00a0 \00a0 \25BE';
    display:inline;
}

.dropdown-toggle-1, .dropdown-toggle-2, .dropdown-toggle-3{
    background-color: rgb(223, 219, 194); 
    color:black; 
    border: 0; 
    box-shadow: 0 0 5px black;
}

.btn:focus {
    outline: none;
    box-shadow: none;
}

.filterbtn {
    background-color: rgb(223, 219, 194); 
    color:black; 
    border: 0; 
    box-shadow: 0 0 5px black;
}

.filterbtn:focus {
    outline: none;
    box-shadow: 0 0 5px black;
  }

.btn1:focus {
    outline: none;
    box-shadow: 0 0 5px black;
} 

.eco{
    margin-bottom: 30px;
    margin-left:5%;
    margin-right:5%;
}

.btn2 {
    outline: none;
    box-shadow: 0 0 3px rgb(116, 114, 100);
} 

.noti-card{
    margin-left: 3%;
    margin-right: 3%;
    font-size: 17px;
}

.pie-card{
    margin-left: 3%;
    margin-right: 3%;
    font-size: 16px;
    padding-bottom: 10px;
    color:rgb(148, 135, 53);
}

.titulo-card{
    margin-left: 3%;
    margin-right: 3%;
    /* font-size: 28px; */
    padding-top: 10px;
    color:rgb(155, 146, 89);
}

/* Bottom left text */
.bannercuando {
    background-image: url("../images_inicio/Baner_fondo_Cuando_las_nubes_2.jpg");
    background-repeat: no-repeat;
    background-position: right;
    /* width: 100%; */
    /* height: 600px; */

    /* border: solid; */
    background-size: cover; 
}

.titulo-libros{
    margin-left: 3%;
    margin-right: 3%;
    /* font-size: 28px; */
    padding-top: 10px;
    color:rgb(0, 0, 0);
}

.filterwarning{
    background-color: rgb(189, 44, 44);
    color: white;
}

.projectfinish{
    background-color: rgb(45, 112, 212);
    color: white;
}

/* bg-success text-white EN VEZ DE PROJECT-ACTIVE y bg-warning EN VEZ DE PROJECT-IDEA*/

.projectsteady{
    background-color: rgb(251, 134, 0);
    color: black;
}

.table td{
    border: rgb(0, 0, 0) solid 1px;
}

.faseactual{
    border: rgb(0, 0, 0) solid 5px;
    font-weight: bold;
}

.respondeme-1{
    display:block;
}
.respondeme-2{
    display:none;
}
@media(max-width:371px){
    .respondeme-1{
        display:none;
    }
    .respondeme-2{
        display:block;
    }
}

@media screen and ( max-width: 521px ) {
    img.respondeme { width: 125px; }
    }
@media screen and ( max-width: 371px ) {
    img.respondeme { width: 55px; }
    }
@media screen and ( min-width: 521px) {
img.respondeme { width: 210px;}
}
img.respondeme {  height: auto; }

.portada-movil-1{
    display: block;
}
.portada-movil-2{
    display: none;
}

@media screen and ( max-width: 768px ) {
    .bannerlibro {
        background-image: url("../images_inicio/Cuando_las_nubes_invisible.jpg");
        /* background-size: 300px; */
        background-repeat: no-repeat;
        background-position: center;
        background-size: 30%; 
    }
    .selectores{
        display:none;
    }
    .portada-movil-1{
        display:none;
    }
    .portada-movil-2{
        display:block;
    }
}

@media screen and ( max-width: 660px ) {
    .bannerlibro {
        background-image: url("../images_inicio/Cuando_las_nubes_invisible.jpg");
        /* background-size: 300px; */
        background-repeat: no-repeat;
        background-position: center;
        background-size: 35%; 
    }
    .selectores{
        display:none;
    }
}

@media screen and ( max-width: 660px ) {
    .bannerlibro {
        background-image: url("../images_inicio/Cuando_las_nubes_invisible.jpg");
        /* background-size: 300px; */
        background-repeat: no-repeat;
        background-position: center;
        background-size: 35%; 
    }
    .selectores{
        display:none;
    }
}

@media screen and ( min-width: 768px) {
    .bannerlibro {
        background-image: url("../images_inicio/Baner_fondo_Cuando_las_nubes_1.jpg");
        background-repeat: no-repeat;
        background-position: left;
        background-size: cover; 
    }
}

@media screen and ( min-width: 1360px) {
    .bannerlibro {
        background-image: url("../images_inicio/Baner_fondo_Cuando_las_nubes_1.jpg");
        background-repeat: no-repeat;
        background-position: 50%;
        background-size: 1360px; 
    }
}

@media screen and (max-width: 1140px) {
    .bannersuperior {
       background-color:rgba(255, 255, 255, 0.678);
       border-radius: 10px;
    }
    .bannerinferior {
        background-color:rgba(255, 255, 255, 0.840); /*rgba(255, 255, 255, 0.808);*/
        border-radius: 10px;
    }
}

.sobrepie {
    display:none;
}

@media screen and (max-width: 975px) {
    .pietexto {
       display:none;
    }
    @media screen and (max-width: 760px) and (min-width:576px) {
        .pietitulo {
           font-size:14px;
        }
    }
    @media screen and (max-width: 575px){
        .card-deck{
            display:none;
        }
        .sobrepie{
            display:block;
            background-color:rgba(155, 146, 89, 0.945);
            justify-content: center;
        }
        .pietexto {
            display:block;
        }
    }
}

.sube{
    padding: 115px 0 0px 0px;
}

.baja{
    padding: 100px 0 0px 0;
}
@media screen and (max-width: 525px) {
    .baja {
        padding: 50px 0 0px 0;;
    }
    .sube {
        padding: 65px 0 0px 0;;
    }
}

.coloribete{
    background-color:   rgb(0, 0, 0);
}

.ribete{
    max-width: 1210px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 15px;
    padding-right:40;
    right: 0;
    text-align: right;
    color:rgb(255, 255, 255);
    /* rgb(26, 27, 26) */
    height: 120px;
}

@media screen and (max-width: 575px) {
    .ribete {
        text-align: center;
        padding-right:0;
        /* margin-bottom: 50px; */
    }
    @media screen and (max-width: 419px) {
        .ribete {
            /* text-align: center; */
            height: 170px;
            padding-right:0;
        }
}
}


@media screen and (max-width: 767px){
    .bordebiografia{
        padding-bottom:30px;
        border-bottom:2px solid rgba(170, 160, 98, 0.9);
    }
    .bordebiografia2{
        padding-top:30px;
    }
    .pegar {
        position: static;
    }
    .pegar2{
        top: 0px; 
    }
}

@media screen and (min-width: 767px){
    .bordebiografia{
        border-right:2px solid rgba(170, 160, 98, 0.9);
    }
}

.libros1{
    display:block;
}

.libros2{
    display:none;
}

.fotos1{
    display:block;
}

.fotos2{
    display:none;
}

.fotos3{
    display:none;
}

.fotosnot1{
    display:block;
}

.fotosnot2{
    display:none;
}

.fotosnot3{
    display:none;
}

.fotosnot4{
    display:none;
}

.columnainicialdelante{
    display:block;
}

.columnafinaldelante{
    display:none;
}

.columnainicial{
    display:block;
}

.columnafinal{
    display:none;
}

.logoinv{
    display:none;
}

.proyact1{
    display:block;
}
.proyact2{
    display:none;
}

@media screen and (max-width: 991px) {
    .logoinv{
        display:block;
    }
}

@media screen and (max-width: 992px){
    .columnainicial{
        display:none;
    }
    
    .columnafinal{
        display:block;
    }
}

@media screen and (max-width: 1250px){
    .fotos1{
        display:none;
    }
    
    .fotos2{
        display:block;
    }
    
    .fotos3{
        display:none;
    }

    .fotosnot1{
        display:none;
    }

    .fotosnot2{
        display:block;
    }

    .fotosnot3{
        display:none;
    }

    .fotosnot4{
        display:none;
    }
}

@media screen and (max-width: 768px){
    .fotos1{
        display:block;
    }
    
    .fotos2{
        display:none;
    }
    
    .fotos3{
        display:none;
    }

    .fotosnot1{
        display:none;
    }

    .fotosnot2{
        display:none;
    }

    .fotosnot3{
        display:block;
    }

    .fotosnot4{
        display:none;
    }

    .libros1{
        display:none;
    }
    
    .libros2{
        display:block;
    }

    .columnainicialdelante{
        display:none;
    }
    
    .columnafinaldelante{
        display:block;
    }
    .proyact1{
        display:none;
    }
    .proyact2{
        display:block;
    }
}

@media screen and (width: 768px){
    .fotos1{
        display:none;
    }
    
    .fotos2{
        display:block;
    }
    
    .fotos3{
        display:none;
    }

    .fotosnot1{
        display:none;
    }

    .fotosnot2{
        display:block;
    }

    .fotosnot3{
        display:none;
    }

    .fotosnot4{
        display:none;
    }

    .libros1{
        display:block;
    }
    
    .libros2{
        display:none;
    }

    .columnainicialdelante{
        display:block;
    }
    
    .columnafinaldelante{
        display:none;
    }
    .proyact1{
        display:block;
    }
    .proyact2{
        display:none;
    }
}

@media screen and (max-width: 426px){
    .fotos1{
        display:none;
    }
    
    .fotos2{
        display:none;
    }
    
    .fotos3{
        display:block;
    }

    .fotosnot1{
        display:none;
    }

    .fotosnot2{
        display:none;
    }

    .fotosnot3{
        display:none;
    }

    .fotosnot4{
        display:block;
    }
}

.mostrarcookies{
    display:none;
}

.hT{
    margin-bottom: 0.5rem;
    font-weight: 500;
    line-height: 1.2;
    font-size: 2.5rem;
    margin-top: 0;
}

.hTl1{
    margin-top: -165px;
    margin-bottom: 0.5rem;
    font-weight: 500;
    line-height: 1.2;
    font-size: 2.5rem;
}

.hTl2{
    margin-top: 165px;
    margin-bottom: 0.5rem;
    font-weight: 500;
    line-height: 1.2;
    font-size: 2.5rem;
}



@media screen and (max-width: 975px) {
    .hT{
        font-size:30px;
    }
    .hTl1{
        font-size:30px;
    }
    .hTl2{
        font-size:30px;
    }
    h1{
        font-size:30px;
    }
    h3 {
        font-size:24px;
    }
}

@media screen and (max-width: 767px) {
    .hTl1{
        margin-top: -40px;
    }
    .hTl2{
        margin-top: 40px;
    }
}

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
  }
  .videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

.tiktokborde{
    border: 3px solid rgba(170, 160, 98, 0.904);
    border-radius: 10px;
}

#mimapa {
    height: 400px; width: 600px;
}
@media screen and (max-width: 767px) {
    #mimapa {
        height: 370px; width: 90%;
    }
}

.mycluster{
    color:white;
    line-height: 29px;
    background-color: rgb(155,40,175);
    border-radius: 50%;
    display: inline-block;
    text-align: center;
    font-size: 14px;
    box-shadow: 0 0 0 5px rgba(155,40,175, 0.3);
}
.brmedium {
    display: block;
    margin-bottom: 0.3em;
}

.tamabut{
    width: 70%;
}

@media screen and (max-width: 991px) {
    .tamabut{
        width: 100%;
    }
}
@media screen and (max-width: 385px) {
    .tamabut{
        width: 80%;
    }
}


.ante625{
    display: block;
}
.tras625{
    display: none;
}
.tras350{
    display: none;
}

@media screen and (max-width: 680px) {
    .ante625{
        display: none;
    }
    .tras625{
        display: block;
    }
    .tras350{
        display: none;
    }
}

@media screen and (max-width: 385px) {
    .ante625{
        display: none;
    }
    .tras625{
        display: none;
    }
    .tras350{
        display: block;
    }
}