:root{
    /*colors*/
    --dark-gray-color: #888;
    --medium-gray-color: #B7B7B7;
    --medium-soft-gray-color:#c9c9c9;
    --light-gray-color:#EAEAEA;
    --light-gray-bg-color: #F3F2F2;
    --dark-blue-tag: #20195E;
    --dark-purple: #6E0B59;
    --white-first-bg: #F5F9FC;
    --font-principal-gray: #7A7A7A;
    --blue-literature-club: #500EA3;
    --orange-digital-journal: #EF5E00;
    --brown-academical-advice: #871109;
    --white-background: #FCFCFC;
    --p-font-principal: #202021;
    --blue-burguer-button: #0F0A3A;
    --light-blue: #17F0FE;
}

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

html{
    font-size: .625rem;
    background: var(--light-gray-bg-color);
    font-family: "Questrial", sans-serif;
    scroll-behavior: smooth;
}

h1,
h2,
h3,
h4,
h5,
h6{
    font-family: "Staatliches", sans-serif;
    font-weight: 400;
    font-style: normal;
}

p{
    font-size: 1.4rem;
    line-height: 1.8rem;
}

.header{
    background-color: var(--dark-blue-tag);
    height: 7.2rem;
    padding: 0rem 3.2rem;
    align-items: center;
    display: flex;
    justify-content: space-between;
    position: relative;
    overscroll-behavior-x: contain;
    overflow-x: clip;
}

.icon-container{
    height: 4.5rem;
    width: 9rem;
    display: block;    
}

.icon-container .icon-image{
    width: 9rem;
    height: 4.5rem;
}

.navbar-menu-tablet{
    display: none;
}

/*botón de hamburguesa*/

.header .button-burguer{
    height: 1.8rem;
    width: 2.1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    z-index: 3;
}

.header .button-burguer article{
    width: 100%;
    height: .3rem;
    background-color: var(--light-gray-color);
}

.header .button-burguer article:first-child{
    width: 100%;
}

.header .button-burguer .button-second-line{
    width: 66%;
    transition: transform .8s;
} 

.header .button-burguer .button-second-line-change{
    transform: translateX(-.7rem);
    transition: transform .8s;
    width: 66%;
}

.header .button-burguer .button-third-line{
    width: 33%;
    transition: transform .8s; 
}

.header .button-burguer .button-third-line-change{
    transform: translateX(-1.4rem);
    transition: transform .8s;
    width: 33%;
}

/*estilos nabvar*/

.navbar-menu{
    background-color: var(--blue-burguer-button);
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    left: 100vw;
    top: 0;
    z-index: 2;
    transition-duration: 1.2s;
}

.navbar-menu-movement{
    left: 0;
    transform: translateX(0);
    transition-duration: 1.2s;
}

.navbar-menu .navbar-menu-logo{
    height: 10rem;
    margin-top: 7.8rem;
}

.navbar-menu .navbar-menu-unordened-list{
    margin-top: 6.4rem;
    display: flex;
    flex-direction: column;
    color: var(--light-gray-bg-color);
    list-style: none;
    height: 18.3rem;
    justify-content: space-between;
}

.navbar-menu .navbar-menu-unordened-list li{
    font-family: "Staatliches", sans-serif;
    font-size: 1.8rem;
}

.navbar-menu .navbar-menu-unordened-list li a{
    display: block;
    color: var(--light-gray-bg-color);
    text-decoration: none;
}

/*estilos header*/

.main-portrait{
 display: flex;
 flex-direction: row;
 overflow: auto;
 white-space: nowrap;
 width: 100vw;
 height: 25.5rem;
 position: relative;
 left: 0;
 right: 0;
 overflow-y:hidden;
 overflow-x:auto;
 scroll-behavior:smooth;
}

.main-portrait figure{
display: inline-block;
width: 100vw;
scroll-snap-align: center;
min-width: 100vw;
position: relative;
}

.main-portrait figure img{
    width: 100%;
    height: 100%;
    margin: 0;
}

.main-portrait-container{
    display: flex;
    position: relative;
}
.main-portrait-container .navigation-button{
    display: flex;
    width: 11.2rem;
    height: 1rem;
    justify-content: space-between;
    margin: 0 auto;
    z-index: 1;
    position: absolute;
    top: 90%;
    left: calc( 50% - 5.6rem );
}

.white-button{
    background: var(--light-gray-bg-color);
    width: 1rem;
    height: 100%;
    border-radius: 50%;
    transition-duration: 1.2s;
}

.blue-button{
    background-color: var(--blue-burguer-button);
    border: 1px solid var(--light-gray-bg-color);
    width: 1rem;
    height: 100%;
    border-radius: 50%;
    transition-duration: 1.2s;
    transform: scale(1.1);
}

.lateral-scroll{
    display: none;
}

/*estilos seción pantalla de bienvenida*/

.introducing-part{
    padding-left: 3.2rem;
    padding-right: 3.2rem;
    margin-top: 1.2rem;
}

.introducing-part .introducing-part-title{
    color: var(--dark-purple);
    font-size: 2.4rem;
    line-height: auto;
    margin: 0 auto;
    text-align: justify;
}

.introducing-part .introducing-part-paragraph{
    text-align: left;
    font-size: 1.4rem;
}

/*estilos seción catálogo*/

.cathalog{
    padding-left: 3.2rem;
    padding-right: 3.2rem;
    background-color: var(--light-gray-color);
    height: 12rem;
}

.cathalog .cathalog-title{
    color: var(--orange-digital-journal);
    font-size: 2.4rem;
    line-height: auto;
    margin: 0 auto;
    text-align: justify;
    padding-top: .8rem;
}

.cathalog .cathalog-link{
    display: block;
    background-color: var(--dark-blue-tag);
    color: var(--light-gray-bg-color);    
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 1rem;
    width: 18.7rem;
    height: 3.2rem;
    border-radius: .3rem;
    margin: 0 auto;
    margin-top: 1.6rem;
    font-size: 1.4rem;
    text-decoration: none;
}

/*estilos talleres*/

/*estilos club de lectura*/
.workshops-information{
    padding-left: 3.2rem;
    padding-right: 3.2rem;
}

.workshops .workshops-title{
    color: var(--brown-academical-advice);
    font-size: 2.4rem;
    line-height: auto;
    margin: 0 auto;
    text-align: justify;
    padding-top: .8rem;
}

.workshops .workshops-little-paraghraph{
    color: var(--dark-gray-color);
    font-size: 1.2rem;
}

.workshops .workshop-slidebar{
    display: flex;
    flex-direction: row;
    overflow: auto;
    white-space: nowrap;
    width: 100vw;
    height: 25.5rem;
    position: relative;
    left: 0;
    right: 0;
    overflow-y: hidden;
    overflow-x: auto;
    scroll-behavior: smooth;
}

.workshop-slidebar figure{
    display: inline-block;
    width: 100vw;
    scroll-snap-align: center;
    min-width: 100vw;
    position: relative;
}
 
.workshop-slidebar figure:nth-child(3){
    min-width: 24rem;
}
.workshop-slidebar figure img{
    width: 100%;
    height: 100%;
    margin: 0;
}

.workshop-slidebar-container{
    display: flex;
    position: relative;
}

.workshop-slidebar-container .navigation-button{
    display: flex;
    width: 11.2rem;
    height: 1rem;
    justify-content: space-between;
    margin: 0 auto;
    z-index: 1;
    position: absolute;
    top: 90%;
    left: calc( 50% - 5.6rem );
}

/*taller de Inglés*/
.english-workshop{
    margin-top: .7rem;
}


.english-information{
    padding-left: 3.2rem;
    padding-right: 3.2rem;
}

.english-information .english-title{
    color: var(--blue-literature-club);
    font-size: 2.4rem;
    line-height: auto;
    margin: 0 auto;
    text-align: justify;
}

.english-information .english-little-paragraph{
    color: var(--dark-gray-color);
    font-size: 1.2rem;
}

.workshops .english-slidebar{
    display: flex;
    flex-direction: row;
    overflow: auto;
    white-space: nowrap;
    width: 100vw;
    height: 27.5rem;
    position: relative;
    left: 0;
    right: 0;
    overflow-y:hidden;
    overflow-x:auto;
    scroll-behavior:smooth;
    margin-top: .7rem;
}

.english-slidebar figure{
    display: inline-block;
    width: 100vw;
    scroll-snap-align: center;
    min-width: 100vw;
    position: relative;
}

.english-slidebar figure img{
    width: 100%;
    height: 100%;
    margin: 0;
}

.english-slidebar-container{
    display: flex;
    position: relative;
}

.english-slidebar-container .navigation-button{
    display: flex;
    width: 11.2rem;
    height: 1rem;
    justify-content: space-between;
    margin: 0 auto;
    z-index: 1;
    position: absolute;
    top: 90%;
    left: calc( 50% - 5.6rem );
}

/*estilos formulario*/
.form-container{
    background-color: var(--dark-blue-tag);
    color: var(--light-gray-color);
    padding-right: 3.2rem;
    padding-left: 3.2rem;
}

.form-container h1{
    font-size: 2.4rem;
    padding-top: 1.2rem;
}

.form{
    margin-top: 1.6rem;
    padding-bottom: 1.6rem;
}

.form span{
    display: block;
    font-size: 1.6rem;
    margin-top: 1.6rem;
} 

.form label{
    margin-top: .6rem;
}

.form input[type="text"]{
    width: 100%;
    margin-top: .6rem;
    background-color: #302873;
    color: var(--light-gray-bg-color);
    border: 0;
    height: 3.2rem;
    border-radius:.3rem;
}

.form input[type="date"]{
    background-color: #302873;
    color: var(--light-gray-bg-color);
    border: 0;
    height: 3.2rem;
    border-radius:.3rem;
    margin-top: .6rem;
    width: 50%;
    text-align: center;
}

.form input[type="radio"]{
    width: 1.2rem;
}

.form .input-radio-grid{
    display: grid;
    grid-template: 50% 50%/ auto 20px;
    width: 80%;
    height: 5.5rem;
    margin: 0 auto;
    margin-top: 2rem;
    align-items: center;
    justify-self: center;
}

.form .input-radio-grid span{
    margin: 0;
}

.form button{
    display: block;
    margin: 0 auto;
    margin-top: 1.6rem;
    width: 73%;
    height: 3.2rem;
    text-align: center;
    background-color: var(--blue-burguer-button);
    color: var(--light-gray-color);
    justify-content: center;
    border: 0;
    padding: 1rem;
    border-radius: .3rem;
}

/*estilos del footer y footer login*/
.footer, .footer-login{
    padding: 1.6rem 3.2rem;
    background-color: var(--blue-burguer-button);
    color: var(--light-gray-color);
    font-size: 1.6rem;
}

.footer-login{
    background-color: var(--light-gray-color);
    margin-top: 2rem;
}


.footer a, .footer-login a{
    display: block;
    color: var(--light-gray-color);
    text-decoration: none;
}

.footer-login a:first-child{
    color: var(--dark-blue-tag);
}

.footer-login a{
    color: var(--dark-gray-color);
}

.footer .footer-adress, .footer-login .footer-adress{
    font-size: 1.6rem;
}

.footer-login .footer-adress{
    color: var(--dark-blue-tag);
}


.footer .footer-libary-location, .footer-login .footer-libary-location{
    color: var(--medium-gray-color);
    font-size: 1.4rem;
    margin-top: .6rem;
}

.footer-login .footer-libary-location{
    color: var(--dark-gray-color);
}

.footer .footer-links, .footer-login .footer-links {
    display: flex;
    flex-direction: column;
    height: 16.3rem;
    justify-content: space-around;
} 

.footer-login .footer-links:first-child{
    color: var(--dark-blue-tag);
}

.footer-login .footer-links{
    color: var(--dark-gray-color);
}

.footer-credits{
    display: flex;
    flex-direction: column;
}

.footer-credits .footer-credits-library-image,.footer-credits .footer-credits-library-image-black{
    display: block;
    width: 12rem;
    height: 6rem;
    margin: 0 auto;
    margin-top: 1.6rem;
}

.footer-credits .footer-credits-library-image-black{
    width: 12rem;
    height: 4.3rem;
}

.footer-credits .link-developer{
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 15rem;
    margin: 0 auto;
    margin-top: 1rem;
}

.link-developer p, .link-developer-login p{
    color: var(--medium-gray-color);
    text-align: center;
    font-size: 1.6rem;
}

.link-developer-login p{
    color: var(--dark-gray-color);
}

.link-developer p + a, .link-developer-login p + a {
    color: var(--medium-gray-color);
    text-align: center;
    font-size: 1.4rem;
    margin-top: .6rem;
    text-decoration: none;
}


.link-developer-login p + a{
    color: var(--dark-gray-color);
}

.form{
    max-width: 36.5rem;
}

@media only screen and (orientation: landscape){
    .navbar-menu .navbar-menu-logo{
        width: 16rem;
        height: 8rem;
        margin-top: 4rem;
    }
    
    .navbar-menu .navbar-menu-unordened-list{
        margin-top: 2.1rem;
        height: 13.6rem;
    }

    .main-portrait figure,
    .workshop-slidebar figure,
    .english-slidebar figure
    {
        min-width: 100%;
    }

    .form{
        padding-right: 0;
        padding-left: 0;
        margin: 0 auto;
    } 
    .footer, .footer-login {
        padding-top: 1.6rem;
        padding-bottom: 1.6rem;
        padding-right: 3.2rem;
        padding-left: 3.2rem;
    }
}   

/*estilos libro*/
.cathalog-main{
    width: 90%;
    margin: 0 auto;
}

.cathalog-main .cathalog-gray-line{
    background-color: var(--medium-gray-color);
    height: 1px;
    margin-top: 1rem;
    width: 100%;

}

.cathalog-main .cathalog-main-title{
   margin-top: .8rem;
   color: var(--dark-purple);
   text-align: center;
}

.cathalog-main .cathalog-main-label{
    border: none;
    border-radius: .3rem;
    height: 3.2rem;
    filter:drop-shadow(0px 4px 4px rgba(0,0,0,0.25));
    display: block;
    position: relative;
    margin-bottom: 1.4rem;
}

.cathalog-main .cathalog-main-searcher{
    height: 100%;
    width: 100%;
    border: none;
    background-color: var(--light-gray-color);
    position: absolute;
    top: 0;
    left: 0;
}

.cathalog-main .cathalog-main-submit{
    width: 3.2rem;
    height: 100%;
    border-radius: .3rem;
    border: none;
    background-color: var(--dark-blue-tag);
    top: 0;
    right: 0;
    position: absolute;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.cathalog-main .cathalog-main-book{
    height: 24.3rem;
}


.cathalog-main .cathalog-main-grid{
    display: grid;
    grid-template: auto / 2rem 8.5rem auto;
    grid-template-areas:"cathalog-main-id cathalog-book-title cathalog-book-title"
                        "author author author-description"
                        "genre genre genre-description"
                        "year year year-description"
                        "editorial editorial editorial-description"
                        "book-type book-type book-type-description"
                        "cathalog-state cathalog-state cathalog-state";
    height: 24.3rem; 
    border-bottom: 1px solid var(--medium-gray-color);
}

.cathalog-main .cathalog-main-submit img{
    width: 2.4rem;
    height: 2.4rem;
}

.cathalog-main .cathalog-main-id{
    background-color: var(--blue-burguer-button);
    color: var(--light-gray-bg-color);
    font-family: "Staatliches", sans-serif;
    font-size: 1.2rem;
    height: 2rem;
    width: 2rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    grid-area: cathalog-main-id;
}

.cathalog-main .cathalog-book-title{
    margin-left: 1rem;
    color: var(--blue-burguer-button);
    font-size: 1.6rem;
    grid-area: cathalog-book-title;
}

.cathalog-main .genre{
    grid-area: genre;
    color: var(--blue-burguer-button);
}

.cathalog-main .genre-description{
    grid-area: genre-description;
    color: var(--p-font-principal);
}

.cathalog-main .author{
    grid-area: author;
    color: var(--blue-burguer-button);
}

.cathalog-main .author-description{
    grid-area: author-description;
    color: var(--p-font-principal);
}

.cathalog-main .year{
    grid-area: year;
    color: var(--blue-burguer-button);
}

.cathalog-main .year-description{
    grid-area: year-description;
    color: var(--p-font-principal);
}

.cathalog-main .editorial{
    grid-area: editorial;
    color: var(--blue-burguer-button);
}

.cathalog-main .editorial-description{
    grid-area: editorial-description;
    color: var(--p-font-principal);
}

.cathalog-main .book-type{
    grid-area: book-type;
    color: var(--blue-burguer-button);
}

.cathalog-main .book-type-description{
    grid-area: book-type-description;
    color: var(--p-font-principal);
}

.cathalog-main .cathalog-state{
    grid-area: cathalog-state;
    display: inline-flex;
    align-self: center;
    justify-self: center;
    font-size: 1.4rem;
    width: 20.6rem;
    justify-content: space-between;
}

.cathalog-state .cathalog-available{
    color: var(--medium-gray-color);
}

.cathalog-state .cathalog-loaned{
    color: var(--orange-digital-journal);
}

/*estilos no encontramos el libro que buscar*/

.missing-book{
    display: grid;
    grid-template: 5.6rem repeat(3,4.6rem) auto /4rem auto;
    grid-template-areas: "missing-book-icon missing-book-title"
                         "first-advert first-advert"
                         "second-advert second-advert"
                         "third-advert third-advert"
                         "la-montana-mag-logo la-montana-mag-logo";
    align-items: center;
    justify-items: center;
    height: 28rem;
}

.non-missing-book{
    display: none;
}

.missing-book .missing-book-icon{
    grid-area: missing-book-icon;
    justify-self: center;
}

.missing-book .missing-book-title{
    grid-area: missing-book-title;
    color: var(--dark-blue-tag);
    font-size: 2rem;
}

.missing-book .first-advert{
    grid-area: first-advert;
    justify-self: left;
    color: var(--dark-blue-tag);
    font-size: 1.6rem;
    margin-left: 1rem;
}

.missing-book .second-advert{
    grid-area: second-advert;
    justify-self: left;
    color: var(--dark-blue-tag);
    font-size: 1.6rem;
    margin-left: 1rem;
}

.missing-book .third-advert{
    grid-area: third-advert;
    justify-self: left;
    color: var(--dark-blue-tag);
    font-size: 1.6rem;
    margin-left: 1rem;
}

.missing-book .la-montana-mag-logo{
    grid-area: la-montana-mag-logo;
    width: 16rem;
}

/*estilos para el login*/

.login{
    padding-right: 3.2rem;
    padding-left: 3.2rem;
}

.login .login-title{
    color: var(--dark-purple);
    text-align: center;
    margin-top: 1rem;
}

.form-login label{
    width: 100%;
    display: flex;
    flex-direction: column;
}

.form-login label span{
    width: 100%;
    color: var(--dark-blue-tag);
    font-size: 1.6rem;
}

.form-login input[type="email"], 
.form-login input[type="password"]{
    width: 100%;
    margin-top: .6rem;
    background-color: var(--light-gray-color);
    border: 0;
    height: 3.2rem;
    border-radius: .3rem;
    margin-top: 1rem;
 }

 .form-login-password span{
    margin-top: 1rem;
 }

 .form-login .login-login,
 .form-login .login-register{
    display: block;
    background-color: var(--dark-blue-tag);
    color: var(--light-gray-bg-color);
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 1rem;
    width: 73%;
    height: 3.2rem;
    border-radius: .3rem;
    margin: 0 auto;
    margin-top: 1.6rem;
    font-size: 1.4rem;
    text-decoration: none;
    border: none;
 }

 .form-login .login-register{
    background-color: var(--dark-purple);
    margin-top: 1rem;
 }

 .form-login .login-or{
    width: 100%;
    display: inline-flex;
    align-items: center;
 }

 .login-or{
    margin-top: 1rem;
 }

 .login-or p{
    margin: 0 1rem;
 }

 .login-or hr{
    width: 100%;
    background-color: var(--medium-gray-color);
    height: .1rem;
 }