@charset "utf-8" ;
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* REGLAS PARA CELULAR */


*{
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
    }

body {   
    background-color: #F3F3F3;
    font-family: 'Raleway', sans-serif;
    font-weight: 500;
         }



    /* navbar comienzo */

    .navbar {
    display: none;
    }

    /* navbar fin */









/* PANTALLA INDEX */
/* HEADER */
#headerindex{
    margin: 1em;
     display: flex;
     align-items: center;
     flex-wrap: nowrap;
     justify-content: space-between;
     align-items: center;
 }
 
 #izquierda{
     width: 50%;
 }
 
 #derecha{
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: space-around;
     width: 30%;
 }
 

 #headerindex #izquierda #h1{
    text-decoration: none;
    color: #6DBD92;
    font-size: 1em;
    font-weight: 600;
}
 
 #headerindex div h2{
     color: #204243;
     font-size: 1em;
 }
 
 #headerindex div img{
     width: 4em;
     margin: 0 0.2em 0 0.2em;
 }
 
 #headerindex input{
     width: 5em;
 }








  /* MENU HAMBURGUESA*/

#menuhamburguesa #menu-btn {
    display: none;
    margin: 1em;
    z-index: 9999;
}

#menuhamburguesa{
    display: flex;
}

#menuhamburguesa .hamburguesa {
    z-index: 9999;
    position: relative;
    font-size: 1.3em;
    color: #204243;
   
}


#menuhamburguesa .hamburguesa:hover {
    cursor: pointer;
    padding: 0.3em;
    z-index: 9999;
    position: relative;
}

.menu {
    position:fixed;
    right: -100%;
    transition: 0.5s;
    background-color: #fffffff2;
    z-index: 8000;
    top: 0%;
    width: 50%;
    height: 100%;
    padding-top: 5em;
}

.menu li{
    display: block;
    padding: 1em;
    text-align: right;
}

.menu li a {
    font-size: 18px;
    color:#658573;
    font-weight: 600;
    text-decoration: none;
}

#menu-btn:checked ~ .menu{
    right: 0;
}










         


/* BARRA */
main #barra{
    padding: 0.5em;
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: scroll;
    display: flex;
}

#barraescritorio{
    display: none;
}

#barra h2{
    display: none;
}         


/* DESAFIO */
#desafio {
    text-align: center;
    margin: 0.5em;
    min-width: 17em;
    min-height: 9em;
    background-image:url(../img/desafiooctubre.png);
    background-size: cover;
    padding: 1em;
    border-radius: 1em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    box-shadow: 0.1em 0.2em 0.6em rgb(136, 136, 136);
    font-family: 'Raleway', sans-serif;
    position: relative;
    overflow: hidden;
}

#desafio h3{
    color: white;
    margin-top: 0.3em;
}

#desafio h4{
    color: rgb(220, 233, 243);
}


h5{
    color:whitesmoke;
    font-size: 0.9em;
    padding: 0em 3em 1em 3em;
}

.epigrafe{
    position: absolute;
    width: 100%;
    top:70%;
    background-color: rgba(0,60,60,.5);
    transition: all .6s ease;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.epigrafe:hover{
    position: absolute;
    top:0%;
    height: 100%;
    width: 100%;
    transition: all .3s ease;
}


/* LECTOR */
#lector {
    text-align: center;
    margin: 0.5em;
    min-width: 17em;
    height: 9em;
    background-image:url(../img/lectoroctubre.png);
    background-size: cover;
    padding: 1em ;
    border-radius: 1em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    box-shadow: 0.1em 0.2em 0.6em rgb(136, 136, 136);
    font-family: 'Raleway', sans-serif;
    position: relative;
    overflow: hidden;
}

#lector h3{
    color: white;
    margin-top: 0.3em;
}

#lector h4{
    color: rgb(220, 233, 243);
}


h5{
    color:whitesmoke;
    font-size: 0.9em;
    padding: 0em 3em 1em 3em;
}

.epigrafe{
    position: absolute;
    width: 100%;
    top:70%;
    background-color: rgba(0,60,60,.5);
    transition: all .6s ease;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.epigrafe:hover{
    position: absolute;
    top:0%;
    height: 100%;
    width: 100%;
    transition: all .3s ease;
}



/* ENCUENTRO */
#encuentro {
    text-align: center;
    margin: 0.5em;
    width: 17em;
    height: 9em;
    background-image:url(../img/encuentrooctubre.png);
    background-size: cover;
    padding: 1em ;
    border-radius: 1em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    box-shadow: 0.1em 0.2em 0.6em rgb(136, 136, 136);
    font-family: 'Raleway', sans-serif;
    position: relative;
    overflow: hidden;
}

#encuentro h3{
    color: white;
    margin-top: 0.3em;
}

#encuentro h4{
    color: rgb(220, 233, 243);
}

h5{
    color:whitesmoke;
    font-size: 0.9em;
    padding: 0em 3em 1em 3em;
}

.epigrafe{
    position: absolute;
    width: 100%;
    top:70%;
    background-color: rgba(0,60,60,.5);
    transition: all .6s ease;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.epigrafe:hover{
    position: absolute;
    top:0%;
    height: 100%;
    width: 100%;
    transition: all .3s ease;
}



/* ICONOS */
#iconos ul{
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    margin-top: 2em;
}

#iconos ul li{
    border-radius: 0.5em;
    padding: 0.5em;
    margin-bottom: 1em;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 9em;
    width: 9em;
    background-color: white;
    list-style: none;
    box-shadow: 0.1em 0.2em 0.9em rgb(136, 136, 136);
}

#iconos ul li a{
    color: #658573;
    text-decoration: none;
}

#artes{
    background-image:url(../img/articon.png);
    background-size:contain;
}

#foto{
    background-image:url(../img/fotoicon.png);
    background-size:contain;
}

#cine{
    background-image:url(../img/cineicon.png);
    background-size:contain;
}

#diseno{
    background-image:url(../img/compicon.png);
    background-size:contain;
}


/* SE VA */
.sobras {
    display: none;
}

footer{
    display: none;
}

#video{
    display: none;
}

#headerescritoriousuario{
    display: none;
}

#barraescritorio{
    display: none;
}




















         





/* PANTALLA USUARIO */
/* HEADER */

#headermobileusuario{
    margin: 1em;
     display: flex;
     align-items: center;
     flex-wrap: nowrap;
     justify-content: space-between;
     align-items: center;
 }
 
 #izquierda{
     width: 50%;
 }
 
 #derecha{
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: space-around;
     width: 30%;
 }
 

 #headermobileusuario div #h1{
    text-decoration: none;
    color: #6DBD92;
    font-size: 1em;
    font-weight: 600;
}
 
 #headermobileusuario div h2{
     color: #204243;
     font-size: 1em;
 }
 
 #headermobileusuario div img{
     width: 4em;
     margin: 0 0.2em 0 0.2em;
 }
 
 #headermobileusuario input{
     width: 5em;
 }





/* MAIN */

.mainusuario h2{
    color:cadetblue;
    padding-top: 0.6em;
    margin-left: 0.7em;
    margin-right: 0.7em;
    border-top: 2px solid rgb(50, 68, 78);
}

.mainusuario .nivel{
    color:cadetblue;
    margin-left: 1em;
    font-weight: 400;
}

.descripcion{
    font-weight:300;
    margin: 1em;
}

#elementosusuario {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    margin-top: 2em;
}

#elementosusuario #fotomisdesafios{
    border-radius: 0.5em;
    padding: 0.5em;
    margin-bottom: 1em;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 3em;
    width: 9em;
    background-color:cadetblue;
    list-style: none;
    box-shadow: 0.1em 0.2em 0.9em rgb(136, 136, 136);
}

#elementosusuario #fotomisdesafios a{
    color:#F3F3F3;
    text-decoration: none;
    margin: auto;
}

#elementosusuario #fotomibiblioteca{
    border-radius: 0.5em;
    padding: 0.5em;
    margin-bottom: 1em;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 3em;
    width: 9em;
    background-color:cadetblue;
    list-style: none;
    box-shadow: 0.1em 0.2em 0.9em rgb(136, 136, 136);
}

#elementosusuario #fotomibiblioteca a{
    color:#F3F3F3;
    text-decoration: none;
    margin: auto;
}





.temasusuario{
    font-size: 1em;
    font-weight:700;
    margin: 2em 1em 1em 1em;
    color: #6DBD92;
    text-transform: uppercase;
}

.deslizar{
    margin: 1em 0em 1em 1em;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: scroll;
}


/* LIBROS */
.libros {
    margin: 0.5em;
    min-width: 9em;
    height: 12em;
    border-radius: 2em;
    display: flex;
    box-shadow: 0.1em 0.2em 0.6em rgb(136, 136, 136);
    font-family: 'Raleway', sans-serif;
    position: relative;
    overflow: hidden;
}

.libros h3{
    color: white;
    display: none;
}

.libros h4{
    color: rgb(220, 233, 243);
    font-size: 1.4em;
    text-align: center;
}

h5{
    color:whitesmoke;
    font-size: 0.9em;
    text-align: center;
}

.epigrafe{
    position: absolute;
    width: 100%;
    top:80% ;
    background-color: rgba(0,60,60,.5);
    transition: all .6s ease;
    
}

.epigrafe:hover{
    position: absolute;
    top:0%;
    height: 100%;
    width: 100%;
    transition: all .3s ease;
}

.libros .epigrafe h4{
    font-size: 1.1em;
    font-weight: 600;
    margin-top: 0.6em;
}

.libros .epigrafe h5{
    font-weight: 600;
    margin-top: 1em;
    padding: 0em 0.3em 0.2em 0.3em;
    text-transform: uppercase;
}

.libros .epigrafe h6{
    font-weight: 400;
    padding: 0em 0.3em 0.3em 0.3em;
    text-align: center;
    color: #F3F3F3;
}

/* IMAGENES LIBROS */

#libro1{
    background-image:url(../img/libro4.jpg);
    background-size: cover;
}

#libro2{
    background-image:url(../img/libro5.jpg);
    background-size: cover;
}

#libro3{
    background-image:url(../img/libro6.jpg);
    background-size: cover;
}

#libro4{
    background-image:url(../img/libro7.jpeg);
    background-size: cover;
}

#libro5{
    background-image:url(../img/libro1.png);
    background-size: cover;
}

#libro6{
    background-image:url(../img/libro9.jpg);
    background-size: cover;
}

#libro7{
    background-image:url(../img/libro10.jpg);
    background-size: cover;
}

#libro8{
    background-image:url(../img/libro11.png);
    background-size: cover;
}

#libro9{
    background-image:url(../img/libro12.jpeg);
    background-size: cover;
}

#libro10{
    background-image:url(../img/libro13.jpg);
    background-size: cover;
}

#libro11{
    background-image:url(../img/libro14.jpg);
    background-size: cover;
}

#libro12{
    background-image:url(../img/libro15.jpg);
    background-size: cover;
}














         











         


/* PANTALLA DESAFIOS */
/* HEADER */

#headermobileusuario{
    margin: 1em;
     display: flex;
     align-items: center;
     flex-wrap: nowrap;
     justify-content: space-between;
     align-items: center;
 }
 
 #izquierda{
     width: 50%;
 }
 
 #derecha{
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: space-around;
     width: 30%;
 }
 

 #headermobileusuario div #h1{
    text-decoration: none;
    color: #6DBD92;
    font-size: 1em;
    font-weight: 600;
}
 
 #headermobileusuario div h2{
     color: #204243;
     font-size: 1em;
 }
 
 #headermobileusuario div img{
     width: 4em;
     margin: 0 0.2em 0 0.2em;
 }
 
 #headermobileusuario input{
     width: 5em;
 }







/* MAIN */

#desafioscompletados{
    display: flex;
    flex-direction: column;
    align-items: center;
}

#desafioscompletados h3{
    color:#204243;
    font-size: 1.5em;
}

#desafioscompletados h4{
    text-align: center;
    color:#204243;
    font-size: 1em;
    font-weight: 400;
    margin: 0.3em 2em 0.3em 2em;
}

#desafioscompletados div{
    display: flex;
    justify-content: center;
}

#porcentaje{
    width: 60%;
}









/* DESAFIOS */
.desafios {
    margin: 1.3em;
    min-width: 9em;
    height: 12em;
    border-radius: 2em;
    display: flex;
    box-shadow: 0.1em 0.2em 0.6em rgb(136, 136, 136);
    font-family: 'Raleway', sans-serif;
    position: relative;
    overflow: hidden;
}

.desafios h3{
    color: white;
    display: none;
}

.desafios h4{
    color: rgb(220, 233, 243);
    font-size: 1.4em;
    text-align: center;
}

h5{
    color:whitesmoke;
    font-size: 0.9em;
    text-align: center;
}







/* EPIGRAFE SI */

.epigrafesi{
    position: absolute;
    width: 100%;
    top:80% ;
    background-color: #6DBD9290;
    transition: all .6s ease;
    
}

.epigrafesi:hover{
    position: absolute;
    top:40%;
    height: 100%;
    width: 100%;
    transition: all .3s ease;
}

.desafios .epigrafesi h4{
    color: white;
    font-size: 1.3em;
    font-weight: 600;
    margin-top: 0.4em;
}

.desafios .epigrafesi h5{
    font-weight: 600;
    margin-top: 1em;
    padding: 0em 0.3em 0.2em 0.3em;
    text-transform: uppercase;
}

.desafios .epigrafesi h6{
    font-size: 1.1em;
    font-style: oblique;
    text-decoration: underline;
    font-weight: 400;
    padding: 0em 0.3em 0.3em 0.3em;
    text-align: center;
    color: #F3F3F3;
}





/* EPIGRAFE NO */

.epigrafeno{
    position: absolute;
    width: 100%;
    top:80% ;
    background-color: #17171790;
    transition: all .6s ease;
    
}

.epigrafeno:hover{
    position: absolute;
    top:40%;
    height: 100%;
    width: 100%;
    transition: all .3s ease;
}

.desafios .epigrafeno h4{
    color: rgb(215, 215, 215);
    font-size: 1.3em;
    font-weight: 600;
    margin-top: 0.4em;
}

.desafios .epigrafeno h5{
    font-weight: 600;
    margin-top: 1em;
    padding: 0em 0.3em 0.2em 0.3em;
    text-transform: uppercase;
}

.desafios .epigrafeno h6{
    font-size: 1.1em;
    font-style: oblique;
    text-decoration: underline;
    font-weight: 400;
    padding: 0em 0.3em 0.3em 0.3em;
    text-align: center;
    color: #F3F3F3;
}








/* FOTOS DESAFIOS */


#desafiooct{
    background-image:url(../img/desafiooctubre.png);
    background-size: cover;
}

#desafiosept{
    background-image:url(../img/desafioseptiembre.png);
    background-size: cover;
}

#desafioagos{
    background-image:url(../img/deasfioagosto.png);
    background-size: cover;
}

#desafiojul{
    background-image:url(../img/desafiojulio.png);
    background-size: cover;
}

#desafiojun{
    background-image:url(../img/desafiojunio.png);
    background-size: cover;
}


#desafiomay{
    background-image:url(../img/deasfiomayo.png);
    background-size: cover;
}



/* checkbox */


.checkboxdesafio {
    padding: 3px;
    height: 8vh;
    display: flex;
     flex-direction: column;
    justify-content: center;
    align-items: center;
}


.checkboxdesafio .contenedorcheck {
    padding: 0px 1px;
    margin: 5px;

}


input[type="checkbox"]{
    appearance: none;
    -webkit-appearance: none;
    height: 15px;
    width: 15px;
    background-color: #d5d5d5;
    border-radius: 2px;
    cursor: pointer;
    outline: none;
    
    } 


 label{

        color:#204243;
        font-size: 1em;
        font-weight: 400;
        cursor: pointer;
    }


input[type="checkbox"]:after {
        font-family: "Font Awesome 5 Free";
        font-weight: 700;
    content: "\f00c";
    color:#204243;
    display: none;
    }   
    
    
    
input[type="checkbox"]:hover{
        background-color: #a5a5a5;
    }
    



 input[type="checkbox"]:checked{
        background-color:#6DBD9290 ;
    
    }
    
    
    
    
    
input[type="checkbox"]:checked:after{
        display: block;
    }
    
    
    












         




/* PANTALLA CINE */

/* IMAGEN DE FONDO */

.portada {
    background-image: url(../img/portadacine.jpg);
    background-size:cover;
    background-position:center;
    height: 150px;
    width: 99.9%;
}

/* REFERENTES */


.temascine {
    font-size: 1em;
    font-weight:700;
    margin: 2em 1em 1em 1em;
    color: #6DBD92;
    text-transform: uppercase;

    
}

.deslizar{
    margin: 1em 0em 1em 1em;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: scroll;
}


.referente {
    margin: 0.5em;
    min-width: 9em;
    height: 12em;
    border-radius: 2em;
    display: flex;
    box-shadow: 0.1em 0.2em 0.6em rgb(136, 136, 136);
    font-family: 'Raleway', sans-serif;
    position: relative;
    overflow: hidden;
}

.referente h3{
    color: white;
    display: none;
}

.referente h4{
    color: rgb(220, 233, 243);
    font-size: 1em;
    text-align: center;
}

h5{
    color:whitesmoke;
    font-size: 0.9em;
    text-align: center;
}

.epigrafe{
    position: absolute;
    width: 100%;
    top:80% ;
    background-color: rgba(0,60,60,.5);
    transition: all .6s ease;
    
}

.epigrafe:hover{
    position: absolute;
    top:0%;
    height: 100%;
    width: 100%;
    transition: all .3s ease;
}

.referente .epigrafe h4{
    font-size: 0.9em;
    font-weight: 600;
    margin-top: 0.4em;
}

.referente .epigrafe h5{
    font-weight: 600;
    margin-top: 1em;
    padding: 0em 0.3em 0.2em 0.3em;
    text-transform: uppercase;
}


/* IMAGENES LIBROS */

#referente1{
    background-image:url(../img/Alastair\ Fothergill.jpg);
    background-size: cover;
}

#referente2{
    background-image:url(../img/Werner\ Herzog.jpg);
    background-size: cover;
}

#referente3{
    background-image:url(../img/Yann\ Arthus-Bertrand.jpg);
    background-size: cover;
}

#sugeridos1 {
    background-image: url(../img/libros-14.jpg);
    background-size: cover;
}

#sugeridos2 {
    background-image: url(../img/libros-13.jpg);
    background-size: cover;
}

#sugeridos3 {
    background-image: url(../img/libros-12.jpg);
    background-size: cover;
}

/* LO QUE NO QUIERO QUE SE VEA */

.cinecont {
    display: none;
}
.cinevos {
    display: none;
}
 .cinedesta {
    display: none;
}

.cineref{
    display: none;
}

#navcine {
    display: none;
}

.cinevolver {
    display: none;
}








/* PANTALLA FOTOGRAFIA */

/* IMAGEN FONDO */

.portadafotografia {
    background-image: url(../img/portadafoto.jpg);
    background-size: cover;
    background-position: center;
        height: 150px;
        width: 99.9%;
}

/* REFERENTES + LIBROS */

.temasfoto {
    font-size: 1em;
    font-weight:700;
    margin: 2em 1em 1em 1em;
    color: #6DBD92;
    text-transform: uppercase;

    
}

.deslizar{
    margin: 1em 0em 1em 1em;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: scroll;
}


.foto {
    margin: 0.5em;
    min-width: 9em;
    height: 12em;
    border-radius: 2em;
    display: flex;
    box-shadow: 0.1em 0.2em 0.6em rgb(136, 136, 136);
    font-family: 'Raleway', sans-serif;
    position: relative;
    overflow: hidden;
}

.foto h3{
    color: white;
    display: none;
}

.foto h4{
    color: rgb(220, 233, 243);
    font-size: 1em;
    text-align: center;
}

h5{
    color:whitesmoke;
    font-size: 0.9em;
    text-align: center;
}

.epigrafe{
    position: absolute;
    width: 100%;
    top:80% ;
    background-color: rgba(0,60,60,.5);
    transition: all .6s ease;
    
}

.epigrafe:hover{
    position: absolute;
    top:0%;
    height: 100%;
    width: 100%;
    transition: all .3s ease;
}

.foto .epigrafe h4{
    font-size: 0.9em;
    font-weight: 600;
    margin-top: 0.4em;
}

.foto .epigrafe h5{
    font-weight: 600;
    margin-top: 1em;
    padding: 0em 0.3em 0.2em 0.3em;
    text-transform: uppercase;
}


/* IMAGENES LIBROS */

#referentes1{
    background-image:url(../img/AndoniCanela.jpg);
    background-size: cover;
}

#referentes2{
    background-image:url(../img/PaulNicken.jpg);
    background-size: cover;
}

#referentes3{
    background-image:url(../img/JoseBenitezRuiz.jpg);
    background-size: cover;
}

#sugerido1 {
    background-image: url(../img/librocinco.jpg);
    background-size: cover;
}

#sugerido2 {
    background-image: url(../img/librocuatro.jpg);
    background-size: cover;
}

#sugerido3 {
    background-image: url(../img/librodos.jpg);
    background-size: cover;
}

/* LO QUE NO QUIERO QUE SE VEA */

.fotocont {
    display: none;
}
.fotovos {
    display: none;
}
 .fotodesta {
    display: none;
}

.fotoref{
    display: none;
}

#navfoto {
    display: none;
}

.fotovolver{
    display: none;
}

















/* PANTALLA ARTES PLASTICAS */

/* IMAGEN FONDO */

.portadaarte {
    background-image: url(../img/portadaartes.jpg);
    background-size: cover;
    background-position: center;
        height: 150px;
        width: 99.9%;
}

/* REFERENTES + LIBROS */

.temasarte {
    font-size: 1em;
    font-weight:700;
    margin: 2em 1em 1em 1em;
    color: #6DBD92;
    text-transform: uppercase;

    
}

.deslizar{
    margin: 1em 0em 1em 1em;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: scroll;
}


.arte {
    margin: 0.5em;
    min-width: 9em;
    height: 12em;
    border-radius: 2em;
    display: flex;
    box-shadow: 0.1em 0.2em 0.6em rgb(136, 136, 136);
    font-family: 'Raleway', sans-serif;
    position: relative;
    overflow: hidden;
}

.arte h3{
    color: white;
    display: none;
}

.arte h4{
    color: rgb(220, 233, 243);
    font-size: 1em;
    text-align: center;

}



.arte a{
    
        color: rgb(220, 233, 243);
        font-size: 0.8em;
        text-align: center;
    }


h5{
    color:whitesmoke;
    font-size: 0.9em;
    text-align: center;
}

.epigrafe{
    position: absolute;
    width: 100%;
    top:80% ;
    background-color: rgba(0,60,60,.5);
    transition: all .6s ease;
    
}

.epigrafe:hover{
    position: absolute;
    top:0%;
    height: 100%;
    width: 100%;
    transition: all .3s ease;
}

.arte .epigrafe h4{
    font-size: 0.9em;
    font-weight: 600;
    margin-top: 0.4em;
}

.arte .epigrafe h5{
    font-weight: 600;
    margin-top: 1em;
    padding: 0em 0.3em 0.2em 0.3em;
    text-transform: uppercase;
}


/* IMAGENES LIBROS */

#referentes10{
    background-image:url(../img/dali.png);
    background-size: cover;
}

#referentes20{
    background-image:url(../img/pablo.png);
    background-size: cover;
}

#referentes30{
    background-image:url(../img/marta.png);
    background-size: cover;
}

#sugeridos10 {
    background-image: url(../img/libro1.png);
    background-size: cover;
}

#sugeridos20 {
    background-image: url(../img/libro2.png);
    background-size: cover;
}

#sugeridos30 {
    background-image: url(../img/libro3.png);
    background-size: cover;
}


/* LO QUE NO QUIERO QUE SE VEA */

.artecont {
    display: none;
}

.artevos {
    display: none;
}
 .artedesta {
    display: none;
}

.arteref{
    display: none;
}

#navarte {
    display: none;
}

#navartep {
    display: none;
}

.artevolver{
    display: none;
}

















/* PANTALLA DISEÑO GRAFICO */

/* IMAGEN FONDO */

.portadadiseno {
    background-image: url(../img/portadadg.jpg);
    background-position: center;
    background-size: cover;
        height: 150px;
        width: 99.9%;
}

/* REFERENTES + LIBROS */

.temasdis {
    font-size: 1em;
    font-weight:700;
    margin: 2em 1em 1em 1em;
    color: #6DBD92;
    text-transform: uppercase;

    
}

.deslizar{
    margin: 1em 0em 1em 1em;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: scroll;
}


.dis {
    margin: 0.5em;
    min-width: 9em;
    height: 12em;
    border-radius: 2em;
    display: flex;
    box-shadow: 0.1em 0.2em 0.6em rgb(136, 136, 136);
    font-family: 'Raleway', sans-serif;
    position: relative;
    overflow: hidden;
}

.dis h3{
    color: white;
    display: none;
}

.dis h4{
    color: rgb(220, 233, 243);
    font-size: 1em;
    text-align: center;
}

h5{
    color:whitesmoke;
    font-size: 0.9em;
    text-align: center;
}

.epigrafe{
    position: absolute;
    width: 100%;
    top:80% ;
    background-color: rgba(0,60,60,.5);
    transition: all .6s ease;
    
}

.epigrafe:hover{
    position: absolute;
    top:0%;
    height: 100%;
    width: 100%;
    transition: all .3s ease;
}

.dis .epigrafe h4{
    font-size: 0.9em;
    font-weight: 600;
    margin-top: 0.4em;
}

.dis .epigrafe h5{
    font-weight: 600;
    margin-top: 1em;
    padding: 0em 0.3em 0.2em 0.3em;
    text-transform: uppercase;
}


/* IMAGENES LIBROS */

#referente100{
    background-image:url(../img/alex\ trochut.jpg);
    background-size: cover;
}

#referente200{
    background-image:url(../img/Andreas\ Preis.jpg);
    background-size: cover;
}

#referente300{
    background-image:url(../img/dr.\ alderete.jpg);
    background-size: cover;
}

#sugerido100 {
    background-image: url(../img/libros-18.jpg);
    background-size: cover;
}

#sugerido200 {
    background-image: url(../img/libros-19.jpg);
    background-size: cover;
}

#sugerido300 {
    background-image: url(../img/libros-20.jpg);
    background-size: cover;
}

/* LO QUE NO QUIERO QUE SE VEA */

.continuar {
    display: none;
}

.vos {
    display: none;
}
 .desta {
    display: none;
}

.ref{
    display: none;
}

#navdis {
    display: none;
}

.disenovolver{
    display: none;
}












/* Bibliotecas Artes Mobile */

/* LO QUE NO SE VE */

#navartelibro {
    display: none;
}

.grilla {
    text-align: center;
    padding: 40px;
}

.articulos {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.articulo {
    padding: 20px;
    background-color: #d5d5d5;
    margin: 0.5em;
    border-radius: 0.8em;
    box-shadow: 0.1em 0.2em 0.6em rgb(136, 136, 136);
}

.article-img {
    width: 150px;
    box-shadow: 0.1em 0.2em 0.6em rgb(136, 136, 136);
}

.category {
    text-align: center;
    color: #658573;
    margin-top: 0.5em;
}

.art {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.art img {
    width: 300px;
    margin-top: 0%;
}

div.img {
    margin: 1em;
}

div.info {
    padding: 15px;
    margin: 0em 1em 0em 1em;
    color:#204243;
}

.author {
    color: #6DBD92;
    font-size: 24px;
    padding-bottom: 10px;
}

.title {
    font-weight: bold;
    font-size: 36px;
    padding-bottom: 10px;
    color:#204243;
}

.bullets {
    padding: 10px 0;
}

.items {
    color:#6DBD92;
    font-size: 16px;
    padding: 2px 0;
}

.readmore {
    color:#204243;
    text-decoration: none;
}

.reseñas {
    display: flex;
    flex-wrap: wrap;
}

.reseña {
    background-color: rgb(241, 244, 247);
    margin-top: 0.6em;
    margin-right: 0.6em;
    padding: 20px;
    border: 1px solid;
    border-radius: 10px;
    box-shadow: 0.1em 0.2em 0.6em rgb(136, 136, 136);
}

.art-info {
    height: 26em;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#book-info {
    text-align: center;
    font-weight: 600;
    color: #65ad82;
    display: block;
    padding: 15px;
    margin:0.5em;
}


 













/*REFERENTES */






.temasartedelmes {
    text-align: center;
    font-size: 1em;
    font-weight:800;
    margin: 0.3em 1em 1em 1em;
    color: #6DBD92;
    text-transform: uppercase;

    
}







.artdelmes {
    position: relative;
    
    margin: 1.3em;
    margin-top: 1.5em;
    min-width: 9em;
    height: 12em;
    
   background-image: url(../img/ref1marianne\ north.jpg);
   background-size: cover;
   background-repeat: no-repeat ;
   background-position: center center ;
   border-radius: 2em;
   display: flex;
   align-items: center;
   justify-content: center;
   max-width: none ;

   }

  


 .referentesartedelmes{
       
   }




 .nombrerefe {
    color: #204243;
    margin-left: 1em;
    margin-top: 1em;
}
 





.refeprofesion {
    margin-left: 1.3em;
    color:#4c6162;
}





.descripcionrefe {margin-left: 1.5em;
    margin-top: 1em;
    font-weight:300;
    width: 90%;
    color: #204243;
    
}



.contenedorrefedelmes{
    background-color: rgb(186, 208, 188);
    padding: 1em;
    margin: 1em;
    border-radius: 2em;
    box-shadow: 0.1em 0.2em 0.6em rgb(136, 136, 136);
}


.contenedorrefedelmes .temasartedelmes{

    color: white;
}




/* otros refes */
.refes {
    margin: 0.5em;
    min-width: 9em;
    height: 12em;
    border-radius: 2em;
    display: flex;
    box-shadow: 0.1em 0.2em 0.6em rgb(136, 136, 136);
    font-family: 'Raleway', sans-serif;
    position: relative;
    overflow: hidden;
}

.refes h3{
    color: white;
    display: none;
}

.refes h4{
    color: rgb(220, 233, 243);
    font-size: 1em;
    text-align: center;
}

.refes a {
    color: rgb(220, 233, 243);
    font-size: 0.8em;
    text-align: center;
}

h5{
    color:whitesmoke;
    font-size: 0.9em;
    text-align: center;
}

.epigrafe{
    position: absolute;
    width: 100%;
    top:80% ;
    background-color: rgba(0,60,60,.5);
    transition: all .6s ease;
    
}

.epigrafe:hover{
    position: absolute;
    top:0%;
    height: 100%;
    width: 100%;
    transition: all .3s ease;
}

.refes .epigrafe h4{
    font-size: 1.1em;
    font-weight: 600;
    margin-top: 0.4em;
}

.refes .epigrafe h5{
    font-weight: 600;
    margin-top: 1em;
    padding: 0em 0.3em 0.2em 0.3em;
    text-transform: uppercase;
}

.refes .epigrafe h6{
    font-weight: 400;
    padding: 0em 0.3em 0.3em 0.3em;
    text-align: center;
    color: #F3F3F3;
}




/* imagenes refes */


#refe1{
    background-image:url(../img/librosMN34.jpg);
    background-size: cover;
}

#refe2{
    background-image:url(../img/librosMN35.jpg);
    background-size: cover;
}

#refe3{
    background-image:url(../img/librosMN36.jpg);
    background-size: cover;
}

#refe4{
    background-image:url(../img/librosMN37.jpg);
    background-size: cover;
}

#refe5{
    background-image:url(../img/librosMN38.jpg);
    background-size: cover;
}









/*TOCO REFERENTES */



.artbio{
    margin: 1.3em;
    min-width: 9em;
    height: 30em ;
    border-radius: 2em;
    position: relative;

    background-image: url(../img/referentes31.png) ;
    background-size: cover;
    background-repeat: no-repeat ;
    background-position: center center ;


    display: flex;
    align-items: center;
    justify-content: center;
}








.nacimientorefe {margin-left: 1.5em;
    margin-top: 1em;
}

.fallecimientorefe {margin-left: 1.5em;
    margin-top: 1em;
}

.descripcionacimi {margin-left: 1.5em;
    margin-top: 0.5em;
    font-weight:300;
}


.descripcionfalle {margin-left: 1.5em;
    margin-top: 0.5em;
    font-weight:300;
}



.temasarterefe {
    font-size: 1em;
    font-weight:700;
    margin: 2em 1em 1em 1em;
    color: #6DBD92;
    text-transform: uppercase;

    
}




/*toco referente dali */


.artbiodali{
    margin: 1.3em;
    min-width: 9em;
    height: 30em ;
    border-radius: 2em;
    position: relative;

    background-image: url(../img/dalirefe43.jpg) ;
    background-size: cover;
    background-repeat: no-repeat ;
    background-position: center center ;


    display: flex;
    align-items: center;
    justify-content: center;
}










/*algunas obras */







.refesbio {
    margin: 0.5em;
    min-width: 9em;
    height: 12em;
    border-radius: 2em;
    display: flex;
    box-shadow: 0.1em 0.2em 0.6em rgb(136, 136, 136);
    font-family: 'Raleway', sans-serif;
    position: relative;
    overflow: hidden;
}

.refesbio h3{
    color: white;
    display: none;
}

.refesbio h4{
    color: rgb(220, 233, 243);
    font-size: 1em;
    text-align: center;
}

h5{
    color:whitesmoke;
    font-size: 0.9em;
    text-align: center;
}

.epigrafe{
    position: absolute;
    width: 100%;
    top:80% ;
    background-color: rgba(0,60,60,.5);
    transition: all .6s ease;
    
}

.epigrafe:hover{
    position: absolute;
    top:0%;
    height: 100%;
    width: 100%;
    transition: all .3s ease;
}

.refesbio .epigrafe h4{
    font-size: 1.1em;
    font-weight: 600;
    margin-top: 0.4em;
}

.refesbio .epigrafe h5{
    font-weight: 600;
    margin-top: 1em;
    padding: 0em 0.3em 0.2em 0.3em;
    text-transform: uppercase;
}

.refesbio .epigrafe h6{
    font-weight: 400;
    padding: 0em 0.3em 0.3em 0.3em;
    text-align: center;
    color: #F3F3F3;
}





/* imagenes refes - algunas obras */




#refeobra1{
    background-image:url(../img/librosrefes-32.png);
    background-size: cover;
}

#refeobra2{
    background-image:url(../img/librosrefes-33.png);
    background-size: cover;
}



/* imagenes refes - algunas obras dale */



#refeobradali1{
    background-image:url(../img/librosdali40.jpg);
    background-size: cover;
}

#refeobradali2{
    background-image:url(../img/librosdali41.jpg);
    background-size: cover;
}























         





























 
















/* ESCRITORIO */
@media screen and (min-width: 700px) {
    *{
        margin: 0;
        padding: 0;
        border: 0;
        box-sizing: border-box;
        }
    
    body {   
        background-color: #F3F3F3;
        font-family: 'Raleway', sans-serif;
        font-weight: 500;
             }




         














/* PANTALLA INDEX */
/* HEADER */

#headerindex{
    margin: 2em;
     display: flex;
     align-items: center;
     flex-wrap: nowrap;
     justify-content: space-between;
     align-items: center;
 }
 
 #izquierda{
     width: 50%
 }

 #derecha{
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: flex-end;
     width: 40%;
 }
 
 #headerindex #izquierda #h1{
    color: #6DBD92;
    font-size: 2.1em;
    font-weight:bolder;
 }
 
 #headerindex #izquierda h2{
     color: #204243;
     font-size: 2em;
 }
 
 #headerindex #derecha img{
     width: 4em;
 }
 
 #headerindex input{
     width: 10em;
     height: 2em;
     border-radius: 1em;
     font-family: 'Raleway', sans-serif;
     font-size: 0.8em;
 }


/* BARRA DE NAVEGACION */
    #barraescritorio {
        display: flex;
        justify-content: center;
    }

    #barraescritorio ul {
        background-color: #6DBD92;
        display: flex;
        box-shadow: 0.1em 0.2em 0.9em rgb(136, 136, 136);
        width: auto;
        padding: 0.2em;
    }

    #barraescritorio ul li {
        background-color:#6DBD92;
        width: auto;
        height: auto;
        margin: 0.3em;
        margin-right: 0.7em;
        margin-left: 0.7em;
        box-shadow: 0em 0em 0em;
        list-style: none;
    }

    #barraescritorio ul li a{
        color:white ;
        font-size: 1.3em;
        text-decoration: none;
        list-style: none;
    }

    #barraescritorio ul li a:hover {
        color:  #204243;
    }


/* SCROLLS */

    main #barra{
        width: 100%;
        display: flex;
        flex-direction: column;
        margin: 1em;
        
    }

   #barra h2{
        margin-top: 1.5em;
        font-size: 1.4em;
        display: inline;
    }
    
.todos{
    display: flex;
    flex-wrap: nowrap;
    overflow-x: scroll;
}


/* DESAFIOS */
#desafio {
        min-width: 18em;
        height: 9em;
        background-image:url(../img/desafiooctubre.png);
        background-size: cover;
        border-radius: 2em;
        display: flex;
        box-shadow: 0.1em 0.2em 0.6em rgb(136, 136, 136);
        font-family: 'Raleway', sans-serif;
        position: relative;
        overflow: hidden;
}
    
    #desafio h3{
        display: none;
    }
    
    #desafio h4{
        color: rgb(220, 233, 243);
        font-size: 1.4em;
    }
    
    h5{
        color:whitesmoke;
        font-size: 0.9em;
        text-align: center;
    }
    
    .epigrafe{
        position: absolute;
        width: 100%;
        top:80% ;
        background-color: rgba(0,60,60,.5);
        transition: all .6s ease;
        
    }
    
    .epigrafe:hover{
        position: absolute;
        top:0%;
        height: 100%;
        width: 100%;
        transition: all .3s ease;
    }
    
    

    #desafiosept{
        background-image:url(../img/desafioseptiembre.png);
        background-size: cover;
    }

    #desafioagos{
        background-image:url(../img/deasfioagosto.png);
        background-size: cover;
    }

    #desafiojul{
        background-image:url(../img/desafiojulio.png);
        background-size: cover;
    }

    #desafiojun{
        background-image:url(../img/desafiojunio.png);
        background-size: cover;
    }


    #desafiomay{
        background-image:url(../img/deasfiomayo.png);
        background-size: cover;
    }


/* LECTORES */
    #lector {
        min-width: 18em;
        height: 9em;
        background-image:url(../img/lectoroctubre.png);
        background-size: cover;
        padding: 1em;
        border-radius: 2em;
        box-shadow: 0.1em 0.2em 0.6em rgb(136, 136, 136);
        font-family: 'Raleway', sans-serif;
        position: relative;
        overflow: hidden;
    }
    
    #lector h3{
        color: white;
        display: none;
    }
    
    #lector h4{
        color: rgb(220, 233, 243);
        font-size: 1.4em;
    }
    
    h5{
        color:whitesmoke;
        font-size: 0.9em;
        text-align: center;
    }
    
    .epigrafe{
        position: absolute;
        width: 100%;
        top:80% ;
        background-color: rgba(0,60,60,.5);
        transition: all .6s ease;
        
    }
    
    .epigrafe:hover{
        position: absolute;
        top:0%;
        height: 100%;
        width: 100%;
        transition: all .3s ease;
    }

    
    
    #lectorsept{
        background-image:url(../img/lectorseptiembre.png);
        background-size: cover;
    }

    #lectoragos{
        background-image:url(../img//lectoragosto.png);
        background-size: cover;
    }

    #lectorjul{
        background-image:url(../img/lectorjulio.png);
        background-size: cover;
    }

    #lectorjun{
        background-image:url(../img/lectorjunio.png);
        background-size: cover;
    }


    #lectormay{
        background-image:url(../img/lectormayo.png);
        background-size: cover;
    }
    

    /* ENCUENTROS */
    #encuentro {
        min-width: 18em;
        height: 9em;
        background-image:url(../img/encuentrooctubre.png);
        background-size: cover;
        padding: 1em;
        border-radius: 2em;
        box-shadow: 0.1em 0.2em 0.6em rgb(136, 136, 136);
        font-family: 'Raleway', sans-serif;
        position: relative;
        overflow: hidden;
    }
    
    #encuentro h3{
        color: white;
        display: none;
    }
    
    #encuentro h4{
        color: rgb(220, 233, 243);
        font-size: 1.4em;
    }
    
    h5{
        color:whitesmoke;
        font-size: 0.9em;
        text-align: center;
    }
    
    .epigrafe{
        position: absolute;
        width: 100%;
        top:80% ;
        background-color: rgba(0,60,60,.5);
        transition: all .6s ease;
        
    }
    
    .epigrafe:hover{
        position: absolute;
        top:0%;
        height: 100%;
        width: 100%;
        transition: all .3s ease;
    }
    
   
    #encuentrosep{
        background-image:url(../img/encuentroseptiembre.png);
        background-size: cover;
    }

    #encuentroagos{
        background-image:url(../img/encuentroagosto.png);
        background-size: cover;
    }

    #encuentrojul{
        background-image:url(../img/encuentrojulio.png);
        background-size: cover;
    }

    #encuentrojun{
        background-image:url(../img/encuentrojunio.png);
        background-size: cover;
    }


    #encuentromay{
        background-image:url(../img/encuentromayo.png);
        background-size: cover;
    }



    /* SOBRAS */
.sobras {
    margin: 0.5em;
    min-width: 18em;
    height: 9em;
    border-radius: 2em;
    display: block;
    box-shadow: 0.1em 0.2em 0.6em rgb(136, 136, 136);
    font-family: 'Raleway', sans-serif;
    position: relative;
    overflow: hidden;
}

.sobras h3{
    color: white;
    display: none;
}

.sobras h4{
    color: rgb(220, 233, 243);
    font-size: 1.4em;
    text-align: center;
}

h5{
    color:whitesmoke;
    font-size: 0.9em;
    text-align: center;
}

.epigrafe{
    position: absolute;
    width: 100%;
    top:80% ;
    background-color: rgba(0,60,60,.5);
    transition: all .6s ease;
    
}

.epigrafe:hover{
    position: absolute;
    top:0%;
    height: 100%;
    width: 100%;
    transition: all .3s ease;
}





/* VIDEO */
#video{
    display: flex;
    margin-top: 4em;
    margin-left: 1em;
    flex-direction: column;
    align-items: center;
}

#titulovideo{
    margin-bottom: 1em;
    color: #6DBD92;
    font-weight:bolder;
}




/* FOOTER */
footer{
    display: block;
    background-color:gainsboro;
    font-size: 80%;
    margin-top: 4em;
    color: dimgrey;
    text-align: center;
    padding: 1em;
         }
     

/* SE VA */

#iconos, #artes, #foto, #cine, #diseno, #headermobileusuario, #menuhamburguesa {
    display: none;
}





         
















/* PANTALLA USUARIO */
/* HEADER */

#headerescritoriousuario{
    margin: 2em;
     display: flex;
     align-items: center;
     flex-wrap: nowrap;
     justify-content: space-between;
     align-items: center;
 }
 
 #izquierda{
     width: 50%
 }

 #derecha{
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: flex-end;
     width: 40%;
 }
 
 #headerescritoriousuario #izquierda h1{
     color: #6DBD92;
     font-size: 2.1em;
     font-weight:bolder;
 }
 
 #headerescritoriousuario #izquierda h2{
     color: #204243;
     font-size: 2em;
 }
 
 #headerescritoriousuario #derecha img{
     width: 4em;
 }
 
 #headerescritoriousuario input{
     width: 10em;
     height: 2em;
     border-radius: 1em;
     font-family: 'Raleway', sans-serif;
     font-size: 0.8em;
 }



/* MAIN */
.mainusuario h2{
    display: block;
    color:cadetblue;
    margin: 1.3em 1em 0em 1em;
    font-size: 2em;
}

.mainusuario .nivel{
    display: block;
    margin: 1em 0em 1em 2em;
    font-size: 1em;
}

.mainusuario .descripcion{
    color: #204243;
    margin-left: 1.8em;
    font-size: 1em;
}

#elementosusuario{
    margin: 2em 1.5em 0em 1.5em;
    display: flex;
    justify-content: flex-start;
}

#elementosusuario #fotomisdesafios{
    margin-right: 0.8em;
    height: 2em;
    background-color: #efefef;
    background-size: cover;
    display: none;
}

#elementosusuario #fotomisdesafios a{
    color:#658573;
    text-align: center;
    margin: auto;
    display: none;
}

#elementosusuario #fotomibiblioteca{
    height: 2em;
    background-color: #efefef;
    background-size: cover;
    display: none;
}

#elementosusuario #fotomibiblioteca a{
    color: #658573;
    text-align: center;
    margin: auto;
    display: none;
}


.deslizar{
    width: 45vw;
}

#cosasusuario{
    margin: 0em 1.7em 1em 1em;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

}

.cosasusuario .librosusuario{
    position: absolute;
    width: 100%;
    top:80% ;
    background-color: rgba(0,60,60,.5);
    transition: all .6s ease;
    
}

.cosasusuario .librosusuario:hover{
    top:20%;
    width: 100%;
    transition: all .3s ease;
}

.cosasusuario .librosusuario h3{
    color: white;
    display: none;
}

.cosasusuario .librosusuario h4{
    color: rgb(220, 233, 243);
    text-align: center;
    font-size: 1.1em;
    font-weight: 600;
    margin-top: 0.4em;
}

.cosasusuario .librosusuario h5{
    color:whitesmoke;
    font-size: 0.9em;
    text-align: center;
    font-weight: 600;
    margin-top: 1em;
    padding: 0em 0.3em 0.2em 0.3em;
    text-transform: uppercase;
}

.cosasusuario .librosusuario h6{
    font-weight: 400;
    padding: 0em 0.3em 0.3em 0.3em;
    text-align: center;
    color: #F3F3F3;
}










         















/* PANTALLA DESAFIOS */
/* MAIN */

#desafioscompletados{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

#desafioscompletados h3{
    padding-bottom: 0.2em;
    color:#204243;
    margin: 0.8em 1.3em 0.4em 1.3em;
    font-size: 1.5em;
    border-bottom: 2px solid rgb(50, 68, 78);
}

#desafioscompletados h4{
    text-align: center;
    color:#204243;
    font-size: 1em;
    font-weight: 400;
    margin: 0em 2em 0.3em 2em;
}

#desafioscompletados div{
    margin: 1em;
    display: flex;
    justify-content:flex-start;
}

#porcentaje{
    width: 30%;
}



/* DESAFIOS */
.desafios {
    margin: 1.3em;
    min-width: 15em;
    height: 12em;
    display: flex;
    border-radius: 2em;
    box-shadow: 0.1em 0.2em 0.6em rgb(136, 136, 136);
    font-family: 'Raleway', sans-serif;
    position: relative;
    overflow: hidden;
}

.desafios h3{
    color: white;
    display: none;
}

.desafios h4{
    color: rgb(220, 233, 243);
    font-size: 1.4em;
    text-align: center;
}

h5{
    color:whitesmoke;
    font-size: 0.9em;
    text-align: center;
}



/* EPIGRAFE SI */

.epigrafesi{
    position: absolute;
    width: 100%;
    top:80% ;
    background-color: #6DBD9290;
    transition: all .6s ease;
    
}

.epigrafesi:hover{
    position: absolute;
    top:30%;
    height: 100%;
    width: 100%;
    transition: all .3s ease;
}

.desafios .epigrafesi h4{
    color: white;
    font-size: 1.3em;
    font-weight: 600;
    margin-top: 0.4em;
}

.desafios .epigrafesi h5{
    font-weight: 600;
    margin-top: 1em;
    padding: 0em 0.3em 0.2em 0.3em;
    text-transform: uppercase;
}

.desafios .epigrafesi h6{
    font-size: 1.1em;
    font-style: oblique;
    text-decoration: underline;
    font-weight: 400;
    padding: 0em 0.3em 0.3em 0.3em;
    text-align: center;
    color: #F3F3F3;
}



/* EPIGRAFE NO */

.epigrafeno{
    position: absolute;
    width: 100%;
    top:80% ;
    background-color: #17171790;
    transition: all .6s ease;
    
}

.epigrafeno:hover{
    position: absolute;
    top:30%;
    height: 100%;
    width: 100%;
    transition: all .3s ease;
}

.desafios .epigrafeno h4{
    color: rgb(215, 215, 215);
    font-size: 1.3em;
    font-weight: 600;
    margin-top: 0.4em;
}

.desafios .epigrafeno h5{
    font-weight: 600;
    margin-top: 1em;
    padding: 0em 0.3em 0.2em 0.3em;
    text-transform: uppercase;
}

.desafios .epigrafeno h6{
    font-size: 1.1em;
    font-style: oblique;
    text-decoration: underline;
    font-weight: 400;
    padding: 0em 0.3em 0.3em 0.3em;
    text-align: center;
    color: #F3F3F3;
}



/* FOTOS DESAFIOS */


#desafiooct{
    background-image:url(../img/desafiooctubre.png);
    background-size: cover;
}

#desafiosept{
    background-image:url(../img/desafioseptiembre.png);
    background-size: cover;
}

#desafioagos{
    background-image:url(../img/deasfioagosto.png);
    background-size: cover;
}

#desafiojul{
    background-image:url(../img/desafiojulio.png);
    background-size: cover;
}

#desafiojun{
    background-image:url(../img/desafiojunio.png);
    background-size: cover;
}


#desafiomay{
    background-image:url(../img/deasfiomayo.png);
    background-size: cover;
}







/* checkbox */

.checkboxdesafio {
    padding: 3px;
    height: 8vh;
    display: flex;
     flex-direction: column;
    justify-content: center;
    align-items: center;

     
}




.checkboxdesafio .contenedorcheck {
    padding: 0px 1px;
    margin: 5px;

}






#boxoctubre{
    display: flex;
    flex-direction: column;
}







input[type="checkbox"]{
appearance: none;
-webkit-appearance: none;
height: 15px;
width: 15px;
background-color: #d5d5d5;
border-radius: 2px;
cursor: pointer;
outline: none;

} 







label{

    color:#204243;
    font-size: 1em;
    font-weight: 400;
    cursor: pointer;
}






input[type="checkbox"]:after {
    font-family: "Font Awesome 5 Free";
    font-weight: 700;
content: "\f00c";
color:#204243;
display: none;
}






input[type="checkbox"]:hover{
    background-color: #a5a5a5;
}





input[type="checkbox"]:checked{
    background-color:#6DBD9290 ;

}






input[type="checkbox"]:checked:after{
    display: block;
}

















/* PANTALLA CINE */

/* LO QUE NO SE VE */

.referentescine { display: none;
}


.portada { display: none;
}
 

/* LO QUE SE VE */

#cinecontinuar {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
   
}

#cinecont1 {
    display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: baseline;
        margin: 0.2em 0.4em 0.2em 1.5em;
    }
#cinecont2 {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: baseline;
        margin: 0.5em 1em 1em 1.5em;
    }

.cinecont { display: block;
}

.cinevos { display: block;
}

.cinedesta{ display: block;
}

.cineref { display: block;
}

.cinevolver { display: block;
}

#navcine {
    display: block; 
    font-size: 1em;
    display: flex;
    justify-content: baseline;
}

#navcine ul { 
    display: flex;
    flex-wrap: wrap;
    margin: 3em 1em 0.5em 2em;
}

#navcine ul li {
    text-decoration: none;
    list-style: none; 
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.20em; 
    
}

#navcine ul li:hover{
    background-color: none;
}

#navcine ul li a {
    text-decoration: none;
    color: #195033;
    padding: 0.5em;
}


.temacontinuar {
    font-size: 1em;
    font-weight:700;
    margin: 0.5em 1em 1em 1em;
    color: #6DBD92;
    text-transform: uppercase;
      
}

.deslizar{
    margin: 1em 0em 1em 1em;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: scroll;
}

.deslizar5{
    margin: 1em 0em 1em 1em;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: scroll;
    width: 81em;
}


.voscine {
    margin: 0.5em;
    min-width: 9em;
    height: 12em;
    border-radius: 2em;
    display: flex;
    box-shadow: 0.1em 0.2em 0.6em rgb(136, 136, 136);
    font-family: 'Raleway', sans-serif;
    position: relative;
    overflow: hidden;
}

.voscine h3{
    color: white;
    display: none;
}

.voscine h4{
    color: rgb(220, 233, 243);
    font-size: 1em;
    text-align: center;
}

h5{
    color:whitesmoke;
    font-size: 0.9em;
    text-align: center;
}

.epigrafe{
    position: absolute;
    width: 100%;
    top:80% ;
    background-color: rgba(0,60,60,.5);
    transition: all .6s ease;
    
}

.epigrafe:hover{
    position: absolute;
    top:0%;
    height: 100%;
    width: 100%;
    transition: all .3s ease;
}

.voscine .epigrafe h4{
    font-size: 0.9em;
    font-weight: 600;
    margin-top: 0.4em;
}

.voscine .epigrafe h5{
    font-weight: 600;
    margin-top: 1em;
    padding: 0em 0.3em 0.2em 0.3em;
    text-transform: uppercase;
}

.voscine1 {
    margin: 0.5em;
    min-width: 9em;
    height: 13em;
    border-radius: 1em;
    box-shadow: 0.1em 0.2em 0.6em rgb(136, 136, 136);
    font-family: 'Raleway', sans-serif;
    position:relative;
    overflow:hidden;
}

.voscine1 h3{
    color: white;
    display: none;
}

.voscine1 h4{
    color: rgb(220, 233, 243);
    font-size: 1em;
    text-align: center;
}

.voscine1 h5{
    color:whitesmoke;
    font-size: 0.9em;
    text-align: center;
    padding: auto;
}

.voscine1 h6 {
    color:rgb(81, 209, 147);
    font-size: 0.9em;
    text-align: center;
    padding: 1em;
    text-transform: uppercase;
}

.epigrafe{
    position: absolute;
    width: 100%;
    top:80% ;
    background-color: rgba(0,60,60,.5);
    transition: all .6s ease;
    
}

.epigrafe:hover{
    position: absolute;
    top:0%;
    height: 100%;
    width: 100%;
    transition: all .3s ease;
}

.voscine1 .epigrafe h4{
    font-size: 0.9em;
    font-weight: 600;
    margin-top: 0.4em;
}

.voscine1 .epigrafe h5{
    font-weight: 600;
    margin-top: 1em;
    padding: 0em 0.3em 0.2em 0.3em;
    text-transform: uppercase;
}


/* IMAGENES  */

#continuarcine10{
    background-image:url(../img/cinelibrro.jpg);
    background-size: cover;
}

#continuar20{
    background-image:url(../img/cinelibro2.jpg);
    background-size: cover;
}

#continuar30{
    background-image:url(../img/cinelibro3.jpg);
    background-size: cover;
}

#continuar40 {
    background-image: url(../img/cinelibro4.jpg);
    background-size: cover;
}

#continuar50 {
    background-image: url(../img/cinelibro10.png);
    background-size: cover;
}

#continuar60 {
    background-image: url(../img/cinelibro12.png);
    background-size: cover;
}

#continuar70 {
    background-image: url(../img/cinelibro13.jpg);
    background-size: cover;
}

#continuar80 {
    background-image: url(../img/cinelibro14.jpg);
    background-size: cover;
}

#continuar100 {
    background-image: url(../img/cinelibro21.jpg);
    background-size: cover;
}

#vos10 {
    background-image: url(../img/cinelibro4.jpg);
    background-size: cover;
}

#vos20 {
    background-image: url(../img/cinelibro5.jpg);
    background-size: cover;
}

#vos30 {
    background-image: url(../img/cinelibro6.jpg);
    background-size: cover;
}

#vos40 {
    background-image: url(../img/cinelibro8.jpg);
    background-size: cover;
}

#vos50 {
    background-image: url(../img/cinelibro9.jpg);
    background-size: cover;
}

#referenteA {
    background-image: url(../img/WalterMurch.jpg);
    background-size: cover;
}

#referenteB {
    background-image: url(../img/Alastair\ Fothergill.jpg);
    background-size: cover;
}

#referenteC {
    background-image: url(../img/Hitchcock\,_Alfredjpg.jpg);
    background-size: cover;
}

#referenteD {
    background-image: url(../img/Werner\ Herzog.jpg);
    background-size: cover;
}

#referenteE {
    background-image: url(../img/Yann\ Arthus-Bertrand.jpg);
    background-size: cover;
}

#dest10 {
    background-image: url(../img/cinelibro7.jpg);
    background-size: cover;
}

#dest20 {
    background-image: url(../img/libros-14.jpg);
    background-size: cover;
}

#dest30 {
    background-image: url(../img/cinelibro9.jpg);
    background-size: cover;
}

#dest40 {
    background-image: url(../img/libros-12.jpg);
    background-size: cover;
}

#dest50 {
    background-image: url(../img/cinelibro11.jpg);
    background-size: cover;
}

#volver1 {
    background-image: url(../img/cinelibro15.jpg);
    background-size: cover;
}

#volver2 {
    background-image: url(../img/cinelibro16.jpg);
    background-size: cover;
}

#volver3 {
    background-image: url(../img/cinelibro17.jpg);
    background-size: cover;
}

#volver4 {
    background-image: url(../img/cinelibro18.jpg);
    background-size: cover;
}

#volver5 {
    background-image: url(../img/cinelibro19.jpg);
    background-size: cover;
}

























/* PANTANLLA DISEÑO GRÁFICO */

/* LO QUE NO SE VE */

.referentesdis { display: none;
}

.librosdis { display: none;
}

.portadadiseno { display: none;
}
 

/* LO QUE SE VE */

#cosascontinuar {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
   
}

#cosascont1 {
    display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: baseline;
        margin: 0.2em 0.4em 0.2em 1.5em;
    }
#cosascont2 {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: baseline;
        margin: 0.5em 1em 1em 1.5em;
    }


.continuar { display: block;
}

.vos { display: block;
}

.desta{ display: block;
}

.ref { display: block;
}

.disenovolver { display: block;
}

#navdis {
    display: block; 
    font-size: 1em;
    display: flex;
    justify-content: baseline;
}

#navdis ul { 
    display: flex;
    flex-wrap: wrap;
    margin: 3em 1em 0.5em 2em;
}

#navdis ul li {
    text-decoration: none;
    list-style: none;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.20em; 
    
}

#navdis ul li:hover{
    background-color: none;
}

#navdis ul li a {
    text-decoration: none;
    color: #195033;
    padding: 0.5em;
}
.temascontinuar {
    font-size: 1em;
    font-weight:700;
    margin: 0.5em 1em 1em 1em;
    color: #6DBD92;
    text-transform: uppercase;
      
}

.deslizar{
    margin: 1em 0em 1em 1em;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: scroll;
}

.deslizar4{
    margin: 1em 0em 1em 1em;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: scroll;
    width: 80em;
}

.cont {
    margin: 0.5em;
    min-width: 9em;
    height: 12em;
    border-radius: 2em;
    display: flex;
    box-shadow: 0.1em 0.2em 0.6em rgb(136, 136, 136);
    font-family: 'Raleway', sans-serif;
    position: relative;
    overflow: hidden;
}

.cont h3{
    color: white;
    display: none;
}

.cont h4{
    color: rgb(220, 233, 243);
    font-size: 1em;
    text-align: center;
}

h5{
    color:whitesmoke;
    font-size: 0.9em;
    text-align: center;
}

.epigrafe{
    position: absolute;
    width: 100%;
    top:80% ;
    background-color: rgba(0,60,60,.5);
    transition: all .6s ease;
    
}

.epigrafe:hover{
    position: absolute;
    top:0%;
    height: 100%;
    width: 100%;
    transition: all .3s ease;
}

.cont .epigrafe h4{
    font-size: 0.9em;
    font-weight: 600;
    margin-top: 0.4em;
}

.cont .epigrafe h5{
    font-weight: 600;
    margin-top: 1em;
    padding: 0em 0.3em 0.2em 0.3em;
    text-transform: uppercase;
}

.cont1 {
    margin: 0.5em;
    min-width: 9em;
    height: 13em;
    border-radius: 1em;
    box-shadow: 0.1em 0.2em 0.6em rgb(136, 136, 136);
    font-family: 'Raleway', sans-serif;
    position:relative;
    overflow:hidden;
}

.cont1 h3{
    color: white;
    display: none;
}

.cont1 h4{
    color: rgb(220, 233, 243);
    font-size: 1em;
    text-align: center;
}

.cont1 h5{
    color:whitesmoke;
    font-size: 0.9em;
    text-align: center;
    padding: auto;
}

.cont1 h6 {
    color:rgb(81, 209, 147);
    font-size: 0.9em;
    text-align: center;
    padding: 1em;
    text-transform: uppercase;
}

.epigrafe{
    position: absolute;
    width: 100%;
    top:80% ;
    background-color: rgba(0,60,60,.5);
    transition: all .6s ease;
    
}

.epigrafe:hover{
    position: absolute;
    top:0%;
    height: 100%;
    width: 100%;
    transition: all .3s ease;
}

.cont1 .epigrafe h4{
    font-size: 0.9em;
    font-weight: 600;
    margin-top: 0.4em;
}

.cont1 .epigrafe h5{
    font-weight: 600;
    margin-top: 1em;
    padding: 0em 0.3em 0.2em 0.3em;
    text-transform: uppercase;
}




/* IMAGENES  */

#continuar1{
    background-image:url(../img/disenolibro1.jpg);
    background-size: cover;
}

#continuar2{
    background-image:url(../img/disenolibro2.jpg);
    background-size: cover;
}

#continuar3{
    background-image:url(../img/disenolibro3.jpg);
    background-size: cover;
}

#continuar4 {
    background-image: url(../img/disenolibro4.jpg);
    background-size: cover;
}

#continuar5 {
    background-image: url(../img/disenolibro5.jpg);
    background-size: cover;
}

#continuar6 {
    background-image: url(../img/disenolibro10}.jpg);
    background-size: cover;
}

#continuar7 {
    background-image: url(../img/disenolibro11.jpg);
    background-size: cover;
}

#continuar8 {
    background-image: url(../img/disenolibro12.jpg);
    background-size: cover;
}

#continuar9 {
    background-image: url(../img/disenolibro19.jpg);
    background-size: cover;
}

#continuar10 {
    background-image: url(../img/disenolibro18.jpg);
    background-size: cover;
}

#vos1 {
    background-image: url(../img/libros-18.jpg);
    background-size: cover;
}

#vos2 {
    background-image: url(../img/libros-19.jpg);
    background-size: cover;
}

#vos3 {
    background-image: url(../img/disenolibro6.jpg);
    background-size: cover;
}

#vos4 {
    background-image: url(../img/libros-20.jpg);
    background-size: cover;
}

#vos5 {
    background-image: url(../img/disenolibro7.jpg);
    background-size: cover;
}

#referente400 {
    background-image: url(../img/Milton\ Glaser.jpg);
    background-size: cover;
}

#dest1 {
    background-image: url(../img/disenolibro5.jpg);
    background-size: cover;
}

#dest2 {
    background-image: url(../img/disenolibro1.jpg);
    background-size: cover;
}

#dest3 {
    background-image: url(../img/libros-20.jpg);
    background-size: cover;
}

#dest4 {
    background-image: url(../img/disenolibro8.jpg);
    background-size: cover;
}

#dest5 {
    background-image: url(../img/disenolibro9.jpg);
    background-size: cover;
}

#disenovolver1 {
    background-image: url(../img/disenolibro13.jpg);
    background-size: cover;
}

#disenovolver2 {
    background-image: url(../img/disenolibro14.jpg);
    background-size: cover;
}

#disenovolver3 {
    background-image: url(../img/disenolibro15.jpg);
    background-size: cover;
}

#disenovolver4 {
    background-image: url(../img/disenolibro16.jpg);
    background-size: cover;
}

#disenovolver5 {
    background-image: url(../img/disenolibro17.jpg);
    background-size: cover;
}















/* PANTALLA FOTOGRAFÍA */

/* LO QUE NO SE VE */

.referentesfoto { display: none;
}

.portadafotografia { display: none;
}
 

/* LO QUE SE VE */

#fotocontinuar {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
   
}

#fotocont1 {
    display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: baseline;
        margin: 0.2em 0.4em 0.2em 1.5em;
    }
#fotocont2 {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: baseline;
        margin: 0.5em 1em 1em 1.5em;
    }

.fotocont { display: block;
}

.fotovos { display: block;
}

.fotodesta{ display: block;
}

.fotoref { display: block;
}

.fotovolver { display: block;
}

#navfoto {
    display: block; 
    font-size: 1em;
    display: flex;
    justify-content: baseline;
}

#navfoto ul { 
    display: flex;
    flex-wrap: wrap;
    margin: 3em 1em 0.5em 2em;
}

#navfoto ul li {
    text-decoration: none;
    list-style: none;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.20em; 
    
}

#navfoto ul li:hover{
    background-color: none;
}

#navfoto ul li a {
    text-decoration: none;
    color: #195033;
    padding: 0.5em;
}




.continuarfoto {
    font-size: 1em;
    font-weight:700;
    margin: 0.5em 1em 1em 1em;
    color: #6DBD92;
    text-transform: uppercase;
      
}

.deslizar{
    margin: 1em 0em 1em 1em;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: scroll;
}

.deslizar2{
    margin: 1em 0em 1em 1em;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: scroll;
    width: 80em;
}


.vosfoto {
    margin: 0.5em;
    min-width: 9em;
    height: 12em;
    border-radius: 2em;
    display: flex;
    box-shadow: 0.1em 0.2em 0.6em rgb(136, 136, 136);
    font-family: 'Raleway', sans-serif;
    position: relative;
    overflow: hidden;
}

.vosfoto h3{
    color: white;
    display: none;
}

.vosfoto h4{
    color: rgb(220, 233, 243);
    font-size: 1em;
    text-align: center;
}

h5{
    color:whitesmoke;
    font-size: 0.9em;
    text-align: center;
}

.epigrafe{
    position: absolute;
    width: 100%;
    top:80% ;
    background-color: rgba(0,60,60,.5);
    transition: all .6s ease;
    
}

.epigrafe:hover{
    position: absolute;
    top:0%;
    height: 100%;
    width: 100%;
    transition: all .3s ease;
}

.vosfoto .epigrafe h4{
    font-size: 0.9em;
    font-weight: 600;
    margin-top: 0.4em;
}

.vosfoto .epigrafe h5{
    font-weight: 600;
    margin-top: 1em;
    padding: 0em 0.3em 0.2em 0.3em;
    text-transform: uppercase;
}


.vosfoto1 {
    margin: 0.5em;
    min-width: 9em;
    height: 13em;
    border-radius: 1em;
    box-shadow: 0.1em 0.2em 0.6em rgb(136, 136, 136);
    font-family: 'Raleway', sans-serif;
    position:relative;
    overflow:hidden;
}

.vosfoto1 h3{
    color: white;
    display: none;
}

.vosfoto1 h4{
    color: rgb(220, 233, 243);
    font-size: 1em;
    text-align: center;
}

.vosfoto1 h5{
    color:whitesmoke;
    font-size: 0.9em;
    text-align: center;
    padding: auto;
}

.vosfoto1 h6 {
    color:rgb(81, 209, 147);
    font-size: 0.9em;
    text-align: center;
    padding: 1em;
    text-transform: uppercase;
}

.epigrafe{
    position: absolute;
    width: 100%;
    top:80% ;
    background-color: rgba(0,60,60,.5);
    transition: all .6s ease;
    
}

.epigrafe:hover{
    position: absolute;
    top:0%;
    height: 100%;
    width: 100%;
    transition: all .3s ease;
}

.vosfoto1 .epigrafe h4{
    font-size: 0.9em;
    font-weight: 600;
    margin-top: 0.4em;
}

.vosfoto1 .epigrafe h5{
    font-weight: 600;
    margin-top: 1em;
    padding: 0em 0.3em 0.2em 0.3em;
    text-transform: uppercase;
}




/* IMAGENES  */

#conti10{
    background-image:url(../img/fotolibro7.jpg);
    background-size: cover;
}

#conti20{
    background-image:url(../img/fotolibro2.jpg);
    background-size: cover;
}

#conti30{
    background-image:url(../img/fotolibro3.jpg);
    background-size: cover;
}

#conti40 {
    background-image: url(../img/fotolibro8.jpg);
    background-size: cover;
}

#conti50 {
    background-image: url(../img/fotolibro5.jpg);
    background-size: cover;
}

#conti60 {
    background-image: url(../img/fotolibro13.jpg);
    background-size: cover;
}

#conti70 {
    background-image: url(../img/fotolibro14.jpg);
    background-size: cover;
}

#conti80 {
    background-image: url(../img/fotolibro15.jpg);
    background-size: cover;
}

#conti90 {
    background-image: url(../img/fotolibro21.jpg);
    background-size: cover;
}

#conti100 {
    background-image: url(../img/fotolibro22.jpg);
    background-size: cover;
}

#vosfoto10 {
    background-image: url(../img/fotolibro6.jpg);
    background-size: cover;
}

#vosfoto20 {
    background-image: url(../img/fotolibro5.jpg);
    background-size: cover;
}

#vosfoto30 {
    background-image: url(../img/fotolibro9.png);
    background-size: cover;
}

#vosfoto40 {
    background-image: url(../img/fotolibro10.jpg);
    background-size: cover;
}

#vosfoto50 {
    background-image: url(../img/fotolibro11.jpg);
    background-size: cover;
}

#refA {
    background-image: url(../img/AndoniCanela.jpg);
    background-size: cover;
}

#refB {
    background-image: url(../img/PaulNicken.jpg);
    background-size: cover;
}

#refC {
    background-image: url(../img/JoseBenitezRuiz.jpg);
    background-size: cover;
}

#refD {
    background-image: url(../img/Dani\ Yako.jpg);
    background-size: cover;
}

#refE {
    background-image: url(../img/Rodrigo.jpg);
    background-size: cover;
}

#destfoto10 {
    background-image: url(../img/fotolibro10.jpg);
    background-size: cover;
}

#destfoto20 {
    background-image: url(../img/fotolibro12.jpg);
    background-size: cover;
}

#destfoto30 {
    background-image: url(../img/librodos.jpg);
    background-size: cover;
}

#destfoto40 {
    background-image: url(../img/fotolibro4.jpg);
    background-size: cover;
}

#destfoto50 {
    background-image: url(../img/fotolibro6.jpg);
    background-size: cover;
}

#fotovolver1 {
    background-image: url(../img/fotolibro16.jpg);
    background-size: cover;
}

#fotovolver2 {
    background-image: url(../img/fotolibro17.jpg);
    background-size: cover;
}

#fotovolver3 {
    background-image: url(../img/fotolibro18.jpg);
    background-size: cover;
}

#fotovolver4 {
    background-image: url(../img/fotolibro19.jpg);
    background-size: cover;
}

#fotovolver5 {
    background-image: url(../img/fotolibro20.jpg);
    background-size: cover;
}











/* PANTALLA ARTES PLÁSTICAS */

/* LO QUE NO SE VE */

.referentesarte { display: none;
}

.portadaarte { display: none;
}
 

/* LO QUE SE VE */

#artescontinuar {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
   
}

#artescont1 {
display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: baseline;
    margin: 0.5em 1em 1em 1.5em;
}

  

.artecont { display: block;
}

.artevos { display: block;
}

.artedesta{ display: block;
}

.arteref { display: block;
}

.artevolver { display: block;
}

#navartep {
    display: block; 
    font-size: 1em;
    display: flex;
    justify-content: baseline;
}

#navartep ul { 
    display: flex;
    flex-wrap: wrap;
    margin: 3em 1em 0.5em 2em;
}

#navartep ul li {
    text-decoration: none;
    list-style: none;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.20em; 
    
}

#navartep ul li:hover{
    background-color: none;
}

#navartep ul li a {
    text-decoration: none;
    color: #195033;
    padding: 0.5em;
}



.continuararte {
    font-size: 1em;
    font-weight:700;
    margin: 0.5em 1em 1em 1em;
    color: #6DBD92;
    text-transform: uppercase;
      
}

.deslizar{
    margin: 1em 0em 1em 1em;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: scroll;
}

.deslizar3{
    margin: 1em 0em 1em 1em;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: scroll;
    width: 80em;
}


.vosarte1 {
    margin: 0.5em;
    min-width: 9em;
    height: 13em;
    border-radius: 1em;
    box-shadow: 0.1em 0.2em 0.6em rgb(136, 136, 136);
    font-family: 'Raleway', sans-serif;
    position:relative;
    overflow:hidden;
}

.vosarte1 h3{
    color: white;
    display: none;
}

.vosarte1 h4{
    color: rgb(220, 233, 243);
    font-size: 1em;
    text-align: center;
}

.vosarte1 h5{
    color:whitesmoke;
    font-size: 0.9em;
    text-align: center;
    padding: auto;
}

.vosarte1 h6 {
    color:rgb(81, 209, 147);
    font-size: 0.9em;
    text-align: center;
    padding: 1em;
    text-transform: uppercase;
}

.epigrafe{
    position: absolute;
    width: 100%;
    top:80% ;
    background-color: rgba(0,60,60,.5);
    transition: all .6s ease;
    
}

.epigrafe:hover{
    position: absolute;
    top:0%;
    height: 100%;
    width: 100%;
    transition: all .3s ease;
}

.vosarte1 .epigrafe h4{
    font-size: 0.9em;
    font-weight: 600;
    margin-top: 0.4em;
}

.vosarte1 .epigrafe h5{
    font-weight: 600;
    margin-top: 1em;
    padding: 0em 0.3em 0.2em 0.3em;
    text-transform: uppercase;
}
 /* --- */

#contarte2 {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: baseline;
    margin: 0.5em 1em 1em 1.5em;
}

 .vosarte2 {
    margin: 0.5em;
    min-width: 9em;
    height: 12em;
    border-radius: 2em;
    box-shadow: 0.1em 0.2em 0.6em rgb(136, 136, 136);
    font-family: 'Raleway', sans-serif;
    position: relative;
    overflow: hidden;
}

.vosarte2 h3{
    color: white;
    display: none;
}

.vosarte2 h4{
    color: rgb(220, 233, 243);
    font-size: 1em;
    text-align: center;
}

.vosarte2 h5{
    color:whitesmoke;
    font-size: 0.9em;
    text-align: center;
    padding: auto;
}

.vosarte2 h6 {
    color:rgb(81, 209, 147);
    font-size: 0.9em;
    text-align: center;
    padding: 1em;
    text-transform: uppercase;
}

.epigrafe{
    position: absolute;
    width: 100%;
    top:80% ;
    background-color: rgba(0,60,60,.5);
    transition: all .6s ease;
    
}

.epigrafe:hover{
    position: absolute;
    top:0%;
    height: 100%;
    width: 100%;
    transition: all .3s ease;
}

.vosarte2 .epigrafe h4{
    font-size: 0.9em;
    font-weight: 600;
    margin-top: 0.4em;
}

.vosarte2 .epigrafe h5{
    font-weight: 600;
    margin-top: 1em;
    padding: 0em 0.3em 0.2em 0.3em;
    text-transform: uppercase;
}


.continuararte1 {
    font-size: 1em;
    font-weight:700;
    margin: 0.5em 1em 1em 1em;
    color: #65ad82;
    text-transform: uppercase;
    display: flex;
    flex-wrap: nowrap;
      
}



.vosarte {
    margin: 0.5em;
    min-width: 9em;
    height: 12em;
    border-radius: 2em;
    display: flex;
    box-shadow: 0.1em 0.2em 0.6em rgb(136, 136, 136);
    font-family: 'Raleway', sans-serif;
    position: relative;
    overflow: hidden;
}

.vosarte h3{
    color: white;
    display: none;
}

.vosarte h4{
    color: rgb(220, 233, 243);
    font-size: 1em;
    text-align: center;
}


.vosarte a{
    color: rgb(220, 233, 243);
    font-size: 0.8em;
    text-align: center;
}

h5{
    color:whitesmoke;
    font-size: 0.9em;
    text-align: center;
    padding: auto;
}

h6 {
    color:rgb(81, 209, 147);
    font-size: 0.9em;
    text-align: center;
    padding: 1em;
    text-transform: uppercase;
}

.epigrafe{
    position: absolute;
    width: 100%;
    top:80% ;
    background-color: rgba(0,60,60,.5);
    transition: all .6s ease;
    
}

.epigrafe:hover{
    position: absolute;
    top:0%;
    height: 100%;
    width: 100%;
    transition: all .3s ease;
}

.vosarte .epigrafe h4{
    font-size: 0.9em;
    font-weight: 600;
    margin-top: 0.4em;
}

.vosarte .epigrafe h5{
    font-weight: 600;
    margin-top: 1em;
    padding: 0em 0.3em 0.2em 0.3em;
    text-transform: uppercase;
}




/* IMAGENES  */

#contin1{
    background-image:url(../img/artelibro8.jpg);
    background-size: cover;
}

#contin2{
    background-image:url(../img/artelibro2.jpg);
    background-size: cover;
}

#contin3{
    background-image:url(../img/artelibro3.jpg);
    background-size: cover;
}

#contin4 {
    background-image: url(../img/artelibro4.jpg);
    background-size: cover;
}

#contin5 {
    background-image: url(../img/artelibro12.gif);
    background-size: cover;
}

#contin6 {
    background-image: url(../img/artelibro14.jpg);
    background-size: cover;
}

#contin7 {
    background-image: url(../img/artelibro15.jpg);
    background-size: cover;
}

#contin8 {
    background-image: url(../img/artelibro16.jpg);
    background-size: cover;
}

#contin9 {
    background-image: url(../img/artelibro22.jpg);
    background-size: cover;
}

#contin10 {
    background-image: url(../img/artelibro23.jpg);
    background-size: cover;
}

#vosarte10 {
    background-image: url(../img/artelibro6.jpg);
    background-size: cover;
}

#vosarte20 {
    background-image: url(../img/artelibre7.jpg);
    background-size: cover;
}

#vosarte30 {
    background-image: url(../img/artelibro8.jpg);
    background-size: cover;
}

#vosarte40 {
    background-image: url(../img/artelibro1.jpg);
    background-size: cover;
}

#vosarte50 {
    background-image: url(../img/artelibro9.jpg);
    background-size: cover;
}

#refA1 {
    background-image: url(../img/dali.png);
    background-size: cover;
}

#refB1 {
    background-image: url(../img/pablo.png);
    background-size: cover;
}

#refC1 {
    background-image: url(../img/marta.png);
    background-size: cover;
}

#refD1 {
    background-image: url(../img/Frida.jpg);
    background-size: cover;
}

#refs1 {
    background-image: url(../img/Nikhist.jpg);
    background-size: cover;
}

#destarte10 {
    background-image: url(../img/artelibro9.jpg);
    background-size: cover;
}

#destarte20 {
    background-image: url(../img/artelibro10.jpg);
    background-size: cover;
}

#destarte30 {
    background-image: url(../img/artelibro11.jpg);
    background-size: cover;
}

#destarte40 {
    background-image: url(../img/artelibro12.gif);
    background-size: cover;
}

#destarte50 {
    background-image: url(../img/artelibro13.jpg);
    background-size: cover;
}

#artvolver1 {
    background-image: url(../img/artelibro21.jpg);
    background-size: cover;
}

#artvolver2 {
    background-image: url(../img/artelibro20.jpg);
    background-size: cover;
}

#artvolver3 {
    background-image: url(../img/artelibro19.jpg);
    background-size: cover;
}

#artvolver4 {
    background-image: url(../img/artelibro18.jpg);
    background-size: cover;
}

#artvolver5 {
    background-image: url(../img/artelibro17.png);
    background-size: cover;
}














/* Bibliotecas Artes Desktop */

#navarte {
    display: block; 
    font-size: 1em;
    display: flex;
    justify-content: baseline;
}

#navarte ul { 
    display: flex;
    flex-wrap: wrap;
    margin: 1em 0em 0em 2em;
}

#navarte ul li {
    text-decoration: none;
    list-style: none;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.20em; 
    
}

#navarte ul li:hover{
    background-color: none;
}

#navarte ul li a {
    text-decoration: none;
    color: #195033;
    padding: 0.5em;
}
.grilla {
    display: block;
    padding: 40px;
}

.articulos {
    display: flex;
    justify-content: left;
    flex-wrap: wrap;
}

.art {
    flex-wrap: nowrap;
}

.articulo {
    margin: 0.7em;
    background-color: #d5d5d5;
    padding: 1em;
    box-shadow: 0.1em 0.2em 0.6em rgb(136, 136, 136);

}

.articulo:hover {
    background-color:#F3F3F3;

}

.article-img {
    width: 180px;
}

.category {
    text-align: left;
    color: #658573;
}

.reseñas {
    display: flex;
    flex-wrap: nowrap;
}

.art-info {
    display: flex;
    text-align: left;
    height: auto;
}

.art-info:hover #book-info {
    display: inline-block;
}


.art-items {
    color:#204243;
}

.art-author {
    color:#204243;
    font-weight: bold;
}

.art-title {
    color:#204243;
    font-weight: bold;
    font-size: 20px;
}

#book-info {
    padding: 15px;
    margin:0 10px;
    display: none;
}

#navartelibro {
    display: block; 
    font-size: 1em;
    display: flex;
    justify-content: baseline;
}

#navartelibro ul { 
    display: flex;
    flex-wrap: wrap;
    margin: 3em 1em 0em 2em;
}

#navartelibro ul li {
    text-decoration: none;
    list-style: none;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.20em; 
    
}

#navartelibro ul li:hover{
    background-color: none;
}

#navartelibro ul li a {
    text-decoration: none;
    color: #195033;
    padding: 0.5em;
}


 /* navbar comienzo */

 

 .navbar {
    display: block;
    width: fit-content;
    margin: 0 auto;
    overflow: hidden;
    background-color: #6DBD92;
    box-shadow: 0.1em 0.2em 0.6em rgb(136, 136, 136);
  }
  
  .navbar a {
    float: left;
    font-size: 22px;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }

  .navbar a:hover {
    color:#204243;
  }
  
  .dropdown {
    float: left;
    overflow: hidden;
  }
  
  .dropdown .dropbtn {
    font-size: 22px;
    font-weight: 500;  
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
  }
  
  .navbar a:hover, .dropdown:hover .dropbtn {
    background-color: #6DBD92;
  }
  
  .dropdown-content {
      border-radius: 0.5em;
    display: none;
    position: absolute;
    background-color: #f9f9f9e1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  
  .dropdown-content a {
    float: none;
    color:#204243;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
  }
  
  .dropdown-content a:hover {
    color: white;
    background-color: #6DBD92;
  }
  
  .dropdown:hover .dropdown-content {
    display: block;
  }

  /* navbar fin */






  
 
 
 
 
 
 
 
 
 
 
 
  /*REFERENTES */



  #cosasreferentesartemes {
    margin: 0em 1.7em 1em 1em;
    display: flex;
    flex-wrap: nowrap;
}



#deslizarreferentes{
    display: flex;
    flex-direction: column;
}


.referentesartedelmes {width: 50%;}






.contenedorrefedelmes{
    min-width: 45vw;
    margin: 1em;
    background-color: rgb(159, 196, 198);
    padding: 1em;
    border-radius: 2em;

}













.temasartedelmes {
    text-align: left;
    width: 20em;
    font-size: 1em;
    font-weight:700;
    color: #6DBD92;
    text-transform: uppercase;

    
}

.contenedorrefedelmes .temasartedelmes{

    color: white;
}





.artdelmes {
    position: relative;
    
    margin: 1.3em;
    margin-top: 1.5em;
    min-width: 9em;
    height: 20em;
    
   background-image: url(../img/ref1marianne\ north.jpg);
   background-size: cover;
   background-repeat: no-repeat ;
   background-position: center center ;
   border-radius: 2em;
   display: flex;
   align-items: center;
   justify-content: center;
   ;

   }

  




 .referentesartedelmes{
       
   }




 

.nombrerefe {
    color: #204243;
    margin-left: 1em;
    margin-top: 1em;
}
 




.refeprofesion {margin-left: 1.5em;
}






.descripcionrefe {margin-left: 1.5em;
    margin-top: 1em;
    font-weight:300;
    width: 90%;
    color: white;
    
}







/* otros refes */
.refes {
    margin: 0.5em;
    min-width: 9em;
    height: 12em;
    border-radius: 2em;
    display: flex;
    box-shadow: 0.1em 0.2em 0.6em rgb(136, 136, 136);
    font-family: 'Raleway', sans-serif;
    position: relative;
    overflow: hidden;
}

.refes h3{
    color: white;
    display: none;
}

.refes h4{
    color: rgb(220, 233, 243);
    font-size: 1em;
    text-align: center;
}

h5{
    color:whitesmoke;
    font-size: 0.9em;
    text-align: center;
}

.epigrafe{
    position: absolute;
    width: 100%;
    top:80% ;
    background-color: rgba(0,60,60,.5);
    transition: all .6s ease;
    
}

.epigrafe:hover{
    position: absolute;
    top:0%;
    height: 100%;
    width: 100%;
    transition: all .3s ease;
}

.refes .epigrafe h4{
    font-size: 1.1em;
    font-weight: 600;
    margin-top: 0.4em;
}

.refes .epigrafe h5{
    font-weight: 600;
    margin-top: 1em;
    padding: 0em 0.3em 0.2em 0.3em;
    text-transform: uppercase;
}

.refes .epigrafe h6{
    font-weight: 400;
    padding: 0em 0.3em 0.3em 0.3em;
    text-align: center;
    color: #F3F3F3;
}




/* imagenes refes */


#refe1{
    background-image:url(../img/librosMN34.jpg);
    background-size: cover;
}

#refe2{
    background-image:url(../img/librosMN35.jpg);
    background-size: cover;
}

#refe3{
    background-image:url(../img/librosMN36.jpg);
    background-size: cover;
}

#refe4{
    background-image:url(../img/librosMN37.jpg);
    background-size: cover;
}

#refe5{
    background-image:url(../img/librosMN38.jpg);
    background-size: cover;
}











/*TOCO REFERENTES */



.artbio{
    margin: 1.3em;
    min-width: 9em;
    height: 38em ;
    border-radius: 2em;
    position: relative;
    background-image: url(../img/referentes31.png) ;
    background-size: cover;
    background-repeat: no-repeat ;
    background-position: center center ;

}






#cosasreferentesbio {
    margin: 0em 1.7em 1em 1em;
    display: flex;
    justify-content: space-around;

}







.inforefeernst{
    width: 50vw;
    margin-top: 1em;
    background-color:#6DBD92;
    border-radius: 2em;
    padding: 1em;
}
















.nacimientorefe {margin-left: 1.5em;
    margin-top: 1em;
}

.fallecimientorefe {margin-left: 1.5em;
    margin-top: 1em;
}

.descripcionacimi {margin-left: 1.5em;
    margin-top: 0.5em;
    font-weight:300;
    color: white;
}


.descripcionfalle {margin-left: 1.5em;
    margin-top: 0.5em;
    font-weight:300;
    color: white;
}



.temasarterefe {
    font-size: 1em;
    font-weight:700;
    margin: 2em 1em 1em 1em;
    color: #6DBD92;
    text-transform: uppercase;

    
}






/*toco referente dali */


.artbiodali{
    min-width: 40vw;
    height: 38em ;
    border-radius: 2em;

    background-image: url(../img/dalirefe43.jpg) ;
    background-size: cover;
    background-repeat: no-repeat ;
    background-position: center center ;


  
}










/*algunas obras */



#cosasreferentesbio {
    display: flex;
    flex-wrap: nowrap;
}









.refesbio {
    margin: 0.5em;
    min-width: 9em;
    height: 12em;
    border-radius: 2em;
    display: flex;
    box-shadow: 0.1em 0.2em 0.6em rgb(136, 136, 136);
    font-family: 'Raleway', sans-serif;
    position: relative;
    overflow: hidden;
}

.refesbio h3{
    color: white;
    display: none;
}

.refesbio h4{
    color: rgb(220, 233, 243);
    font-size: 1em;
    text-align: center;
}

h5{
    color:whitesmoke;
    font-size: 0.9em;
    text-align: center;
}

.epigrafe{
    position: absolute;
    width: 100%;
    top:80% ;
    background-color: rgba(0,60,60,.5);
    transition: all .6s ease;
    
}

.epigrafe:hover{
    position: absolute;
    top:0%;
    height: 100%;
    width: 100%;
    transition: all .3s ease;
}

.refesbio .epigrafe h4{
    font-size: 1.1em;
    font-weight: 600;
    margin-top: 0.4em;
}

.refesbio .epigrafe h5{
    font-weight: 600;
    margin-top: 1em;
    padding: 0em 0.3em 0.2em 0.3em;
    text-transform: uppercase;
}

.refesbio .epigrafe h6{
    font-weight: 400;
    padding: 0em 0.3em 0.3em 0.3em;
    text-align: center;
    color: #F3F3F3;
}





/* imagenes refes - algunas obras */




#refeobra1{
    background-image:url(../img/librosrefes-32.png);
    background-size: cover;
}

#refeobra2{
    background-image:url(../img/librosrefes-33.png);
    background-size: cover;
}

}