@charset "utf-8";
/*hoja de estilos*/
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;700&display=swap');
/*light300,regular400,bold700*/

html {
    height: -webkit-fill-available;
}

/*-----------------------------------------------------------------------------------------------------
------------Pantalla celular primaria o Mobile First---------------------------------------------------
-----------------------------------------------------------------------------------------------------*/


body {
    margin: 0;
    background-color: #eaf9f4;
    color: #12466d;
    font-family: 'Raleway', sans-serif;
    font-size: 1em;
    height: 100vh;
}

header {
    background-color: #3493a9;
    padding: 0em 0.5em 0em 1em;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1
}

header section {
    
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center
    
}

#menuhamburguesa {
    width: 2.5em;
    height: auto;
}


.menu{
    
    margin-top:1.2em;

}

.ocultar-menu{
    
    display: none;
    
}

#logocelular {
    width: 4.5em;
    height: auto;
}

#logoacumar {
    width: 5em;
    height: auto;
}

.menu img {
   
    display: none;
}


.menu ul li {
    
    list-style: none;
    padding:1em;
    
    
}


.menu ul li a{
    
    color:#fff;
    text-decoration:none;
}




main {
    padding: 3em 0em;
}

#maindeindex {
    background-color: #b0eee3;
}

h1 {
    text-align: center;
    font-size: 1.8em;
}

h1 em {
    text-align: center;
    font-style: normal
}

#portada {
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("https://1.bp.blogspot.com/-abvMcpG8jyo/XwTgZ-6lOSI/AAAAAAAAC0A/b8KBk6ikw-gxVeX703bSH5KsyoWiDon3QCNcBGAsYHQ/s1600/5_8_de_julio_dia_de_la_cuenca_matanza_riachuelo%2B2.jpg");
    background-repeat: no-repeat;
    padding: 1em;
    display: block;
    background-size: cover;
    font-weight: light;
    text-align: center;
    color: white
}

#portada  p {
    text-align: center;
    font-size: 0.9em;
    padding: 2em 1em 0 2em
}

h2 {
    font-size: 0.8em;
    padding: 0 2em 0 2em;
    font-style: regular;
    text-align: center
}


article {
    height: auto;
    margin: 0;
    padding: 0;
    text-align: left;
    font-size: 0.5em;
}


article p {
    text-align: justify;
    font-size: 100%;
    font-size: 2em
}

#cajacatalogo {
    background-color: #eaf9f4;
    padding: 0 0 5em 0
}

#catalogo {
    padding: 1.5em 0em 1em 4em;
}

#scrollhorizontal {
    max-height: 330px;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
}

#scrollhorizontal::-webkit-scrollbar {
     width: 0
}

.libro {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    min-width: 200px;
    height: 400px;
}

.libro p {
    display: block;
    text-align: center;
    color: #ef7700;
    font-weight: bold
}

.libro p small {
    color: #3493a9;
}

.portadalibro {
    max-width: 90%;
    height: auto;
    border-radius: 1em
}

#botoncentrado {
    display: flex;
    justify-content: center;
    align-items: center;
}

h3 {
    font-size: 2.2em
}

h3 br {
    display: none
}

#introbibliotecas {
    display: block;
    padding: 0em 4em 5em 4em;
}

#cajamapa {
    position: relative;
    border-radius: 1em;
    border: #3493a9 solid 1px;
}

#mapa {
    max-width: 100%;
    border-radius: 1em;
    height: auto;
}

#infomapa {
    display: float;
    float: left;
    background-color: #eaf9f4;
    width: 100%;
    position: absolute;
    box-sizing: border-box;
    border-radius: 1em;
    padding: 1em 3em 1em 3em;
    bottom: 0;
    box-shadow: 0px -2px 5px #9c9c9c;
}

#textoinfomapa {
    font-size: 70%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: row;
    font-weight: bold;
}

#textoinfomapa p {
    text-align: center;
}

.boton {
    display: inline-block;
    font-size: 1.5em;
    color: #ef7700;
    padding: 0.5em 2em 0.5em 2em;
    text-decoration: none;
    border: #ef7700 solid 1px;
    border-radius: 1em;
    box-shadow: 0.5px 0px 3px #9c9c9c;
    text-align: center
}

.boton:hover {
    background: #ffffff
}

#donacion {
    padding: 0.5em 0.5em 0em 0;
    text-align: center;
}

#donacion img {
    width: 40%;
    padding: 2.5em
}

#donacion a {
    font-size: 2em;
    background-color: #ef7700;
    font-weight: bold;
    color: #ffffff;
    padding: 0.5em 2em 0.5em 2em;
    text-decoration: none;
    border: #fff solid 3px;
    border-radius: 1em;
    box-shadow: 0.5px 0px 3px #9c9c9c;
    text-align: center;
    text-decoration: none;
}

footer {
    bottom: 0;
}

footer section {
    background-color: #3493a9;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1em 0em 1em 0em;
    text-align: center;
}

footer section a {
    color: white;
    font-style: normal;
    font-size: 100%;
    text-decoration: none
}

#logotw {
    width: 1.5em;
    height: auto;
}

#logoyt {
    width: 1.5em;
    height: auto;
    padding: 0em 2em
}

#logoig {
    width: 1.5em;
    height: auto;
}

hr {
    height: 1px;
    background-color: white;
}

        body #Intro {
                     justify-content: center;  
                     text-align: center; 
                     margin-top: 5em;
                     margin-left: auto; 
                     margin-right: auto;   
                      display: block;
                                      }
        #Intro h3 {text-align: center;
                   font-size: 2em,  }
        .datoslibros article { justify-content: center; 
                             color: #12466d; 
                             font-size: 1em; 
                             margin-left: 2.5em;margin-right: 2.5em;} 
        .datoslibros article h4 {
                                color: #d45a00;
                                font-size: 1em; }   
        .datoslibros p {
                          font-size: 1em; }
        
        #favoritos h3  {text-align: center;}
        #losmuertosdelriachuelo p {text-align: left;}
        #elcolordelrio p {text-align: left;}
        #novelas h3 {text-align: center;}
        #mobydick  p {text-align: left;}
        #mobydick a:hover {
          background-color: #fff;
          border: #ef7700 solid 6px;
          color: #ef7700;
          box-shadow: 2px 2px 5px #9c9c9c;}
        #veintemilleguas p {text-align: left;}
        #veintemilleguas a:hover {
          background-color: #fff;
          border: #ef7700 solid 6px;
          color: #ef7700;
          box-shadow: 2px 2px 5px #9c9c9c;}
        #Academicos h3 {text-align: center;}
        #vidamarina  p {text-align: left;}
        #elriachueloylaciudad  p {text-align: left;}
        #infantiles h3 {text-align: center;}
        #chachoyelmar p {text-align: left;}
        #aventurasdeunagotadeagua  p {text-align: left;}
        #busquedalibro {
                        display: flex; 
                        width:20em; align-content:center;
                        background-color: white;
                        padding: 2em;
                        border-radius: 1em;
                        border: 0;
                        margin-left: auto; margin-right: auto;
}
        #libro {
                padding: 2em;
                align-content: center;
                justify-content: center;
                text-align: center;
}

         #libro h3 {
                color: #d45a00; 
                font-size: 1.3em;}

         #sedeyfecha { 
                   width: 80%;
                   padding: 10px 15px;
                    margin: 10px;
                   border: none;
                  text-align: center;
                   border-radius: 0.2em;
                   font: 'Raleway';
                   background-color: #3493a9;
                   color: #ffffff; 
                   justify-content: center;  }
        #botondereserva {display: flex;
                        flex-direction: column;
                        align-items: center;}
        #botondereserva a {padding: 10px 15px;
                    margin: 10px;
                   border: none;
                  text-align: center;
                   border-radius: 0.2em;
                   font: 'Raleway';
                   background-color: #3493a9;
                   color: #ffffff; 
                   justify-content: center;
                  ;text-decoration: none;}
         #botondereserva img {width: 20em;} 
         #libroelegido {justify-content: center;}
         #imagenytexto {display: flex; flex-direction: column; align-items: center; }


/*-----------------------------------------------------------------------------------------------------
------------Pantalla laptop----------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------*/

@media screen and (min-width: 768px) {

    header {
        opacity: 100%
    }

    header img {
        display: none
    }

    .menu img {
        display: block;
        width: 6em;
        height: auto
    }

    .menu {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 0
    }

    .menu ul {
        margin: 0;
        list-style: none;
        display: flex;
        justify-content: flex-end;
        align-items: center
    }
    
    .menu li {
        flex-grow: 3em;
    }
    
    .menu li:hover {
        background: rgba(0, 0, 0, 0.3);
        border-radius: 0.2em
    }
    
    .menu li a {
        display: block;
        color: white;
        text-decoration: none;
        padding: 0.5em 1em 0.5em 1em;
        font-size: 0.8em
    }

    main {
        padding: 3em 0em;
    }

    #portada {
        background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://1.bp.blogspot.com/-abvMcpG8jyo/XwTgZ-6lOSI/AAAAAAAAC0A/b8KBk6ikw-gxVeX703bSH5KsyoWiDon3QCNcBGAsYHQ/s1600/5_8_de_julio_dia_de_la_cuenca_matanza_riachuelo%2B2.jpg");
        background-repeat: no-repeat;
        padding: 3em 3em 2em 3em;
        display: block;
        background-size: cover;
    }

    #portada p {
        text-align: center;
        font-size: 1em;
        padding: 0 2em 0 2em;
        opacity: 100%;
    }

    h1 {
        font-weight: 100%;
        text-align: center;
        font-size: 3em;
    }
    
    h1 em {
        font-style: normal;
        font-size: 1.5em;
    }
    
    
    h2 {
        font-weight: 100%;
        font-size: 1.5em;
    }

    article {
        height: auto;
        margin: 0;
        padding: 0em 6em 4em 6em;
        text-align: left;
        font-size: 0.5em;
    }
    
    article p {
        text-align: justify;
        font-size: 100%;
        font-size: 3em
    }

    h3 {
        font-size: 5em
    }

    h3 br {
        display: inline
    }

    #introbibliotecas {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: row;
        padding: 2em 6em 5em 6em;
    }
    
    #cajamapa {
        width: 50%;
        position: relative;
        border-radius: 1em;
        border: #3493a9 solid 1px;
        z-index: 0
    }
    
    #mapa {
        max-width: 100%;
        border-radius: 1em;
        height: auto;
    }
    
    #infomapa {
        display: float;
        float: left;
        background-color: #eaf9f4;
        width: 100%;
        position: absolute;
        box-sizing: border-box;
        border-radius: 1em;
        padding: 1em 3em 1em 3em;
        bottom: 0;
        box-shadow: 0px -2px 5px #9c9c9c;
    }
    
    #textoinfomapa {
        font-size: 55%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-direction: row;
        font-weight: bold;
    }
    
    #textoinfomapa p {
        text-align: center;
    }
    
    .boton {
        display: inline-block;
        font-size: 3em;
        color: #ef7700;
        padding: 0.5em 2em 0.5em 2em;
        text-decoration: none;
        border: #ef7700 solid 1px;
        border-radius: 1em;
        box-shadow: 0.5px 0px 3px #9c9c9c;
        text-align: center
    }
    
    .boton:hover {
        background: #ffffff
    }

    #catalogo {
        padding: 1.5em 0em 1em 6em;
    }
    
    .libro p {
        display: inline-block;
        text-align: center;
        color: #ef7700;
        font-weight: bold;
        font-size: 1.5em
    }
    
    #donacion {
        padding: 1em 1em 0em 0;
        text-align: center;
    }
    
    #donacion img {
        width: 30%;
        padding: 4em
    }
    
    #donacion a {
        font-size: 4em;
        background-color: #ef7700;
        font-weight: bold;
        color: #fff;
        padding: 0.5em 2em 0.5em 2em;
        text-decoration: none;
        border: #fff solid 5px;
        border-radius: 1em;
        box-shadow: 0.5px 0px 3px #9c9c9c;
        text-align: center;
        text-decoration: none;
    }
    
    #donacion a:hover {
        background-color: #fff;
        border: #ef7700 solid 5px;
        border-radius: 1em;
        color: #ef7700;
        box-shadow: 2px 2px 5px #9c9c9c;
    }
    
    footer {
        bottom: 0;
        opacity: 100%
    }
    
    footer section {
        background-color: #3493a9;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 1em 0em 1em 0em;
        text-align: center;
    }
    
    footer section a {
        color: white;
        font-style: normal;
        font-size: 100%;
        text-decoration: none
    }
    
    #logotw {
        width: 1.5em;
        height: auto;
    }
    
    #logoyt {
        width: 1.5em;
        height: auto;
        padding: 0em 2em
    }
    
    #logoig {
        width: 1.5em;
        height: auto;
    }
    
    hr {
        height: 1px;
        background-color: white;
    }
    
}




/*-----------------------------------------------------------------------------------------------------
------------Pantalla computadora-----------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------*/

@media screen and (min-width: 992px) {

    header img {
        display: none
    }

    .menu img {
        display: block;
        width: 6em;
        height: auto
    }

    .menu {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 0
    }

    .menu ul {
        margin: 0;
        list-style: none;
        display: flex;
        justify-content: flex-end;
        align-items: center
    }
    
    .menu li {
        flex-grow: 3em;
    }
    
    .menu li:hover {
        background: rgba(0, 0, 0, 0.3);
        border-radius: 0.2em
    }
    
    .menu li a {
        display: block;
        color: white;
        text-decoration: none;
        padding: 0.5em 1em 0.5em 1em;
        font-size: 0.8em
    }
    
    .ocultar-menu{
        
        display: flex;
    }

    main {
        padding: 3em 0em;
    }

    #portada {
        background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://1.bp.blogspot.com/-abvMcpG8jyo/XwTgZ-6lOSI/AAAAAAAAC0A/b8KBk6ikw-gxVeX703bSH5KsyoWiDon3QCNcBGAsYHQ/s1600/5_8_de_julio_dia_de_la_cuenca_matanza_riachuelo%2B2.jpg");
        background-repeat: no-repeat;
        padding: 3em 5em 2em 5em;
        display: block;
        background-size: cover;
    }

    #portada p {
        text-align: center;
        font-size: 1em;
        padding: 0 2em 0 2em;
        opacity: 100%;
    }

    #portada h1 {
        opacity: 100%
    }

    #portada h2 {
        opacity: 100%;
    }

    main {
        padding: 3em 0em;
    }

    h1 {
        font-weight: 100%;
        text-align: center;
        font-size: 3em;
    }
    
    h1 em {
        font-style: normal;
        font-size: 1.5em;
    }
    
    
    h2 {
        font-weight: 100%;
        font-size: 1.5em;
    }

    article {
        height: auto;
        margin: 0;
        padding: 0em 6em 4em 6em;
        text-align: left;
        font-size: 0.5em;
    }
    
    article p {
        text-align: justify;
        font-size: 100%;
        font-size: 3em
    }

    h3 {
        font-size: 5em
    }

    h3 br {
        display: inline
    }

    #introbibliotecas {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        flex-direction: row;
        padding: 2em 4em 5em 4em;
    }
    
    #cajamapa {
        width: 30%;
        position: relative;
        border-radius: 1em;
        border: #3493a9 solid 1px;
    }
    
    #mapa {
        max-width: 100%;
        border-radius: 1em;
        height: auto;
    }
    
    #infomapa {
        display: float;
        float: left;
        background-color: #eaf9f4;
        width: 100%;
        position: absolute;
        box-sizing: border-box;
        border-radius: 1em;
        padding: 1em 3em 1em 3em;
        bottom: 0;
        box-shadow: 0px -2px 5px #9c9c9c;
    }
    
    #textoinfomapa {
        font-size: 55%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-direction: row;
        font-weight: bold;
    }
    
    #textoinfomapa p {
        text-align: center;
    }
    
    .boton {
        display: inline-block;
        font-size: 3em;
        color: #ef7700;
        padding: 0.5em 2em 0.5em 2em;
        text-decoration: none;
        border: #ef7700 solid 1px;
        border-radius: 1em;
        box-shadow: 0.5px 0px 3px #9c9c9c;
        text-align: center
    }
    
    .boton:hover {
        background: #ffffff
    }

    #cajacatalogo {
        background-color: #eaf9f4;
    }
    
    #catalogo {
        padding: 2em 10em 5em 0em;
    }

    #catalogo h3 {
        padding: 0 0 0 2.5em
    }

    button {
        background: #eaf9f4;
        border: #ef7700 solid 1px;
        color: #eaf9f4;
        border-radius: 3em;
        box-shadow: 0.5px 0px 3px #9c9c9c;
        cursor: pointer;
    }

    .slick-next.slick-arrow:hover {
        background: white;
    }

    #scrollhorizontal {
        max-height: 800px;
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0 0 0 5em
    }
    
    #scrollhorizontal::-webkit-scrollbar {
         width: 0
    }

    #scrollhorizontal button {
        background: #eaf9f4;
        border: #ef7700 solid 1px;
        color: #eaf9f4;
        border-radius: 3em;
        box-shadow: 0.5px 0px 3px #9c9c9c;
        cursor: pointer;
        width: 3%;
   }

    .libro {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        min-width: 200px;
        height: 800px;
    }

    .libro p {
        display: inline;
        text-align: center;
        color: #ef7700;
    }
    
    .libro p small {
        color: #3493a9;
    }

    .libro p:before {
        content:'| '
    }

    .portadalibro {
        max-width: 65%;
        height: auto;
        border-radius: 2em;
        padding: 0 0 1em 0
    }

    #botoncentrado {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #donacion {
        padding: 1em 1em 0em 0;
        text-align: center;
    }
    
    #donacion img {
        width: 15%;
        padding: 4em
    }
    
    #donacion a {
        font-size: 4em;
        background-color: #ef7700;
        font-weight: bold;
        color: #fff;
        padding: 0.5em 2em 0.5em 2em;
        text-decoration: none;
        border: #fff solid 5px;
        border-radius: 1em;
        box-shadow: 0.5px 0px 3px #9c9c9c;
        text-align: center;
        text-decoration: none;
    }
    
    #donacion a:hover {
        background-color: #fff;
        border: #ef7700 solid 5px;
        border-radius: 1em;
        color: #ef7700;
        box-shadow: 2px 2px 5px #9c9c9c;
    }

    footer {
        bottom: 0;
    }
    
    footer section {
        background-color: #3493a9;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 1em 0em 1em 0em;
        text-align: center;
    }
    
    footer section a {
        color: white;
        font-style: normal;
        font-size: 100%;
        text-decoration: none
    }
    
    #logotw {
        width: 1.5em;
        height: auto;
    }
    
    #logoyt {
        width: 1.5em;
        height: auto;
        padding: 0em 2em
    }
    
    #logoig {
        width: 1.5em;
        height: auto;
    }
    
    hr {
        height: 1px;
        background-color: white;
    }
    
    input {
        align-content: center;
        text-align: center;
        font-family: 'Raleway', sans-serif;
    }
    
    input[type=text] {
        width: 80%;
        padding: 10px 15px;
        margin: 10px;
        border: none;
        border-bottom: 2px solid black;
        background-color: #eaf9f4
    }
    
    input[type=file] {
        width: 20%;
        margin: 10px;
        border: none;
    }
    
    select {
        width: 20%;
        padding: 10px 15px;
        margin: 10px;
        border: none;
        text-align: center;
        border-radius: 0.2em;
        font: 'Raleway';
        background-color: #3493a9;
        color: #ffffff;
    }
    
    input[type=submit] {
        width: 20%;
        padding: 10px 15px;
        margin: 10px;
        border: none;
        border-radius: 0.2em;
        background-color: #3493a9;
        border-radius: 0.2em;
        border: none;
        color: #ffffff;
    }
    
     input[type=reset] {
        width: 20%;
        padding: 10px 15px;
        margin: 10px;
        border: none;
        border-radius: 0.2em;
        background-color: #3493a9;
        border-radius: 0.2em;
        border: none;
        color: #ffffff;
    }
    
        
    input[type=submit]:hover {
        background: rgba(0, 0, 0, 0.3);
        border-radius: 0.2em;
        border: none;
        color: #ffffff;
    }
    
    input[type=reset]:hover {
        background: rgba(0, 0, 0, 0.3);
        border-radius: 0.2em;
        border: none;
        color: #ffffff;
    }
    
    #biografia {
        font: 'Raleway';
        font-size: 1em;
        align-items: center;
        justify-content: center;
        align-content: center;
        text-align: center;
    }
    
    #fotousuario {
        margin-top: 40px;
    }
    
    #mislibros {
        align-content: center;
        align-items: center;
        display: flex;
    }
    
    #iradonarlibro {
        width: 20%;
        padding: 10px 15px;
        border: none;
        border-radius: 0.2em;
        background-color: #3493a9;
        border-radius: 0.2em;
        border: none;
        color: #ffffff;
        align-content: center;
        align-items: center;
        text-align: center;
        font-size: 12px;
        justify-content: center;
        margin: auto;
    }
    
    #iradonarlibro:hover {
        background: rgba(0, 0, 0, 0.3);
        border-radius: 0.2em;
        border: none;
        color: #ffffff;
        align-content: center;
        align-items: center;
        text-align: center;
        justify-content: center;
        margin: auto;
    }
    
    #mapaiframe {
        align-content: center;
        align-items: center;
        margin: auto;
        margin-top: 30px;
        justify-content: center;
        width: 80%;
    }
    
    #mapainfo {
        font-size: 14px;
    }
    
    
    button[type=button] {
                width: 20%;
                padding: 10px 15px;
                margin: 10px;
                border: none;
                text-align: center;
                border-radius: 0.2em;
                font: 'Raleway';
                background-color: #3493a9;
                color: #ffffff;
       }
    
           button[type=button]:hover {
                background: rgba(0, 0, 0, 0.3);
                border-radius: 0.2em;
                border: none;
                color: #ffffff;
           }
    body #Intro {
                      justify-content: center;  
                      text-align: center; 
                      margin-top: 5em;
                      margin-left: auto; margin-right: auto;}
        #Intro h3 {text-align: center;
                   font-size: 4em; 
                   }
        #busquedalibro {
                        display: flex; 
                        width:20em; 
                        align-content:center;
                        background-color: white;
                        border-radius: 1em;
                        border: 0;
                        margin-left: auto; margin-right: auto;
                        }
         .datoslibros article { justify-content: center; 
                         color: #12466d; 
                         font-size: 1em; } 
          .datoslibros article h4 {
                                color: #d45a00;
                                font-size: 1em; }   
          .datoslibros p {
                          font-size: 1em; }
            #favoritos {
                        display: flex;
                        flex-direction: column;
                        width: 35em; 
                        justify-content: center;
                        margin-left: auto; margin-right: auto;}
            #favoritos h3 {
                           text-align: center; font-size: 2.8em; }    
         #losmuertosdelriachuelo {
                                  display: flex;
                                  justify-content: center;
                                 flex-direction: column;
                                  align-items: center;
                                 }
         #losmuertosdelriachuelo p {text-align: left;}
          #elcolordelrio {
                          display: flex;
                          justify-content: center;
                          flex-direction: column; 
                           align-items: center; }
          #elcolordelrio p {text-align: left;}
          #novelas {
                     display: flex;
                     flex-direction: column;; 
                     width: 35em; 
                     justify-content: center;
                     margin-left: auto; margin-right: auto;}
          #novelas h3 {
                       text-align: center;
                      font-size: 2.8em }  
          #mobydick {
                      display: flex;
                      justify-content: center;
                      flex-direction: column; 
                      align-items: center;}
          #mobydick  p {text-align: left;}
          #mobydick a:hover {
          background-color: #fff;
          border: #ef7700 solid 6px;
          color: #ef7700;
          box-shadow: 2px 2px 5px #9c9c9c;}
          #veintemilleguas  {
           display: flex;
           justify-content: center;
           flex-direction: column;
          align-items: center; } 
          #veintemilleguas a:hover {
          background-color: #fff;
          border: #ef7700 solid 6px;
          color: #ef7700;
          box-shadow: 2px 2px 5px #9c9c9c;}
          #veintemilleguas a {
                               justify-content: center;}
           #veintemilleguas p {text-align: left;} 
           #infantiles {
                        display: flex;
                        flex-direction: column; 
                        width: 35em; 
                        justify-content: center;
                         margin-left: auto; margin-right: auto;}
          #infantiles h3 {
                          text-align: center;
                          font-size: 2.8em}  
          #chachoyelmar {
                         display: flex;
                         justify-content: center;
                         flex-direction: column;
                         align-items: center;}
          #chachoyelmar p {text-align: left;}
          #aventurasdeunagotadeagua {
                                     display: flex;
                                     justify-content: center;
                                     flex-direction: column;
                                     align-items: center;}
          #aventurasdeunagotadeagua  p {text-align: left;}
          #Academicos {
                        display: flex;
                        flex-direction: column; 
                        width: 35em;
                        justify-content: center;
                        margin-left: auto; margin-right: auto;}
          #Academicos h3 {
                          text-align: center;
                          font-size: 2.8em}  
          #vidamarina {
                        display: flex;
                        justify-content: center;
                        flex-direction: column;
                         align-items: center;} 
          #vidamarina  p {text-align: left;}
          #elriachueloylaciudad {
                                 display: flex;
                                 justify-content: center;
                                 flex-direction: column;
                                 align-items: center;}
           #elriachueloylaciudad  p {text-align: left;}
          .librosalineados {display: flex; align-items: baseline; justify-content: center;
    } 
    
          #libro { 
                   text-align: center; 
                   margin-top: 5em; 
                   margin-left: auto;
                   margin-right: auto;
    }
    
          #libro h3 {
                      color: #d45a00; 
                      font-size: 1.5em;}
          
         #libroelegido { 
                         padding-top: 1em;} 
         #sedeyfecha { 
                   width: 20%;
                   padding: 10px 15px;
                    margin: 10px;
                   border: none;
                   text-align: center;
                   border-radius: 0.2em;
                   font: 'Raleway';
                   background-color: #3493a9;
                   color: #ffffff; 
                   justify-content: center;    }
        #botondereserva {display: flex;
                    flex-direction: column;
                    align-items: center;}
        #botondereserva a {padding: 10px 15px;
                    margin: 10px;
                   border: none;
                   text-align: center;
                   border-radius: 0.2em;
                   font: 'Raleway';
                   background-color: #3493a9;
                   color: #ffffff; 
                   justify-content: center;
                  ;text-decoration: none;}
/*-----------------------------------------------------------------------------------------------------
------------CAMBIOS GUARDADOS----------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------*/

 /*--Mobile first--*/
                    
                @media screen and (min-width: 320px) {
              
                    .cambiosguardados {
                 align-content: center;
                 align-items: center;
                 align-self: center;
                 text-align: center;
                 justify-content: center;
                 margin-top: 8em;
                 height: 200px;
             }
             
             h4#h4-cambiosguardados {
                 font-size: 1.2em; 
                 font-weight: 500;
             }
             
             .botonesvolveracuenta {
                 align-content: center;
                 align-items: center;
                 align-self: center;
                 text-align: center;
                 justify-content: center;
                 width: 100%;
                 margin: auto;
             }
             
             a#botonusuario {
                 display: flex;
                 width: 50%;
                 align-content: center;
                 align-items: center;
                 align-self: center;
                 text-align: center;
                 justify-content: center;
                 background-color: #3493a9;
                 border: none;
                 padding: 1em 3em 1em 3em;
                 margin: auto;
                 font-family: 'Raleway', sans-serif;
                 border-radius: 1em;
                 color: #ffffff;
                 text-decoration: none;
             }
                    
                    a#botonusuario:hover {
                    background: rgba(0, 0, 0, 0.3);
                        border-radius: 1em;
                    }
                    
                    
             }
             
             /*--Tablet 768px--*/
                    
                @media screen and (min-width: 481px) {
              
                    .cambiosguardados {
                 align-content: center;
                 align-items: center;
                 align-self: center;
                 text-align: center;
                 justify-content: center;
                 margin-top: 13em;
                 height: 220px;
             }
             
             h4#h4-cambiosguardados {
                 font-size: 1.2em; 
                 font-weight: 500;
             }
             
             .botonesvolveracuenta {
                 align-content: center;
                 align-items: center;
                 align-self: center;
                 text-align: center;
                 justify-content: center;
                 width: 100%;
                 margin: auto;
             }
             
             a#botonusuario {
                 display: flex;
                 width: 50%;
                 align-content: center;
                 align-items: center;
                 align-self: center;
                 text-align: center;
                 justify-content: center;
                 background-color: #3493a9;
                 border: none;
                 padding: 1em 3em 1em 3em;
                 margin: auto;
                 font-family: 'Raleway', sans-serif;
                 border-radius: 1em;
                 color: #ffffff;
                 text-decoration: none;
             }
                    
                    a#botonusuario:hover {
                    background: rgba(0, 0, 0, 0.3);
                        border-radius: 1em;
                    }
                    
             }
             
              /*--Laptop 769-1024px--*/
                    
                @media screen and (min-width: 769px) {
              
                    .cambiosguardados {
                 align-content: center;
                 align-items: center;
                 align-self: center;
                 text-align: center;
                 justify-content: center;
                 margin-top: 13.7em;
                 height: 220px;
             }
             
             h4#h4-cambiosguardados {
                 font-size: 1.7em; 
                 font-weight: 500;
             }
             
             .botonesvolveracuenta {
                 align-content: center;
                 align-items: center;
                 align-self: center;
                 text-align: center;
                 justify-content: center;
                 width: 100%;
                 margin: auto;
             }
             
             a#botonusuario {
                 display: flex;
                 width: 30%;
                 align-content: center;
                 align-items: center;
                 align-self: center;
                 text-align: center;
                 justify-content: center;
                 background-color: #3493a9;
                 border: none;
                 padding: 1em 3em 1em 3em;
                 margin: auto;
                 font-family: 'Raleway', sans-serif;
                 border-radius: 1em;
                 color: #ffffff;
                 text-decoration: none;
             }
                    
                    a#botonusuario:hover {
                    background: rgba(0, 0, 0, 0.3);
                        border-radius: 1em;
                    }
         }
         
             /*--Desktop 1025-1200px--*/
                    
                @media screen and (min-width: 1025px) {
             
             .cambiosguardados {
                 align-content: center;
                 align-items: center;
                 align-self: center;
                 text-align: center;
                 justify-content: center;
                 margin-top: 13.7em;
                 height: 220px;
             }
             
             h4#h4-cambiosguardados {
                 font-size: 1.7em; 
                 font-weight: 500;
             }
             
             .botonesvolveracuenta {
                 align-content: center;
                 align-items: center;
                 align-self: center;
                 text-align: center;
                 justify-content: center;
                 width: 100%;
                 margin: auto;
             }
             
             a#botonusuario {
                 display: flex;
                 width: 30%;
                 align-content: center;
                 align-items: center;
                 align-self: center;
                 text-align: center;
                 justify-content: center;
                 background-color: #3493a9;
                 border: none;
                 padding: 1em 3em 1em 3em;
                 margin: auto;
                 font-family: 'Raleway', sans-serif;
                 border-radius: 1em;
                 color: #ffffff;
                 text-decoration: none;
             }
             
                    a#botonusuario:hover {
                    background: rgba(0, 0, 0, 0.3);
                        border-radius: 1em;
                    }
         }

/*-----------------------------------------------------------------------------------------------------
------------FIN CAMBIOS GUARDADOS----------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------------------------------
------------DONACION----------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------*/

form#donacionform {
                        background-color: #b0eee3;
                        padding-top: 20px;
                    }
                    
                    #donacionenviar {
                        margin: auto;
                    }
                    
                    /*--Mobile first--*/
                    
                @media screen and (min-width: 320px) {
                    
                    form#donacionform {
                        margin-top: 50px;
                        align-content: center;
                        align-items: center;
                        align-self: center;
                        text-align: center;
                    }
                    
                    h4#donacionbajada-h4 {
                        margin-top: 5px;
                        margin-bottom: 0;
                    }
                    
                    h3#donalibros-h3 {
                        margin-top: 50px;
                        margin-bottom: auto;
                    }
                    
                    main#donacionlibromain {
                        margin-top: auto;
                        margin-bottom: 10px;
                        align-content: center;
                        align-items: center;
                        align-self: center;
                        text-align: center;
                    }
                    
                    #calendariodonacion {
                        display: flex;
                        align-items: center;
                        text-align: center;
                        justify-content: center;
                        align-self: center;
                        box-sizing: border-box;
                        width: 75%;
                        flex-shrink: 1;
                        flex-grow: 1;
                        margin: auto;
                        padding: auto;
                    }
                    
                    .columnasdonacionhtml {
                        display: flex;
                        justify-content: center;
                        align-content: center;
                        justify-items: center;
                        align-self: center;
                        height: auto;
                        width: 100%;
                        flex-direction: column;
                        flex-wrap: wrap;
                    }        
                    
                    #columna1donacion, #columna2donacion {
                        flex-shrink: 1;
                        flex-grow: 1;
                        height: auto;
                        box-sizing: border-box;
                        align-content: center;
                        align-items: center;
                        text-align: center;
                        justify-content: center;
                        flex-direction: column;
                        font-size: 1em;
                        font: 'Raleway', sans-serif;
                        font-family: 'Raleway', sans-serif;
                        padding: auto;
                        width: 75%;
                    }
                    
                    input[type=file] {
                        width: auto;
                    }
                    
                    a#donaciongraciasboton {
                        width: 50%;
                        border: none;
                        border-radius: 1em;
                        background-color: #3493a9;
                        color: #ffffff;
                        align-content: center;
                        align-items: center;
                        text-align: center;
                        align-self: center;
                        font-size: 12px;
                        margin-top: 0;
                        margin-bottom: 0;
                        padding: 1em 3em 3em 3em;
                        font: 'Raleway', sans-serif;
                    }

                    a#donaciongraciasboton:hover {
                        background: rgba(0, 0, 0, 0.3);
                        border-radius: 1em;
                        color: #ffffff;
                    }
                    
                    input[type=reset]#resetdonacion {
                        width: 50%;
                        border: none;
                        border-radius: 1em;
                        background-color: #3493a9;
                        color: #ffffff;
                        align-content: center;
                        align-items: center;
                        text-align: center;
                        align-self: center;
                        font-size: 12px;
                        margin-top: 0;
                        margin-bottom: 0;
                        padding: 1em 3em 1em 3em;
                        font: 'Raleway', sans-serif;
                        font-family: 'Raleway', sans-serif;
                    }

                    input[type=reset]#resetdonacion:hover {
                        background: rgba(0, 0, 0, 0.3);
                        color: #ffffff;
                        border-radius: 1em;
                    }

                     #columna1donacion > input.input-textdonacion {
                         align-content: center;
                         align-items: center;
                         align-self: center;
                         margin: auto;
                    }
                    
                    #columna1donacion > select#sedeselectdonacion {
                        align-content: center;
                         align-items: center;
                         align-self: center;
                        font: 'Raleway', sans-serif;
                        font-family: 'Raleway', sans-serif;
                    }
                    
                    select#sedeselectdonacion {
                        width: 75%;
                        border: none;
                        border-radius: 1em;
                        background-color: #3493a9;
                        color: #ffffff;
                        align-content: center;
                        align-items: center;
                        text-align: center;
                        font-size: 12px;
                        margin-top: 5px;
                        margin-bottom: 5px;
                        padding: 1em 3em 1em 3em;
                        font: 'Raleway', sans-serif;
                        font-family: 'Raleway', sans-serif;
                    }
                    
                    #columna2donacion > #calendariodonacion {
                         align-content: center;
                         align-items: center;
                         align-self: center;
                         margin: auto;
                    }
                    
                    input[type=text].input-textdonacion {
                        display: flex;
                        width: 75%;
                        align-content: center;
                        border: 2px solid black;
                        border-color: #3493a9;
                        background-color: #eaf9f4;
                        text-align: center;
                        font: 'Raleway', sans-serif;
                        font-family: 'Raleway', sans-serif;
                        border-radius: 1em;
                        align-items: center;
                        padding: 1em 3em 1em 3em;
                        margin: auto;
                        align-self: center
                    }
                    
                    input[type=checkbox]#donaranonimo {
                        margin-top: 30px;
                        margin-bottom: 50px;
                    }
            }
                    
                    /*--Tablet 768px--*/
                    
                @media screen and (min-width: 481px) {
                    
                    form#donacionform {
                        margin-top: 50px;
                        align-content: center;
                        align-items: center;
                        align-self: center;
                        text-align: center;
                    }
                    
                    h4#donacionbajada-h4 {
                        margin-top: 5px;
                        margin-bottom: 0;
                    }
                    
                    h3#donalibros-h3 {
                        margin-top: 50px;
                        margin-bottom: auto;
                    }
                    
                    main#donacionlibromain {
                        margin-top: auto;
                        margin-bottom: 10px;
                        align-content: center;
                        align-items: center;
                        align-self: center;
                        text-align: center;
                    }
                    
                    #calendariodonacion {
                        display: flex;
                        align-items: center;
                        text-align: center;
                        justify-content: center;
                        align-self: center;
                        box-sizing: border-box;
                        width: 75%;
                        flex-shrink: 1;
                        flex-grow: 1;
                        margin: auto;
                        padding: auto;
                    }
                    
                    .columnasdonacionhtml {
                        display: flex;
                        justify-content: center;
                        align-content: center;
                        justify-items: center;
                        align-self: center;
                        height: auto;
                        width: 100%;
                        flex-direction: column;
                        flex-wrap: wrap;
                    }        
                    
                    #columna1donacion, #columna2donacion {
                        flex-shrink: 1;
                        flex-grow: 1;
                        height: auto;
                        box-sizing: border-box;
                        align-content: center;
                        align-items: center;
                        text-align: center;
                        justify-content: center;
                        flex-direction: column;
                        font-size: 1em;
                        font: 'Raleway', sans-serif;
                        padding: auto;
                        width: 75%;
                    }
                    
                    input[type=file] {
                        width: auto;
                    }
                    
                    a#donaciongraciasboton {
                        width: 30%;
                        border: none;
                        border-radius: 1em;
                        background-color: #3493a9;
                        color: #ffffff;
                        align-content: center;
                        align-items: center;
                        text-align: center;
                        align-self: center;
                        font-size: 12px;
                        margin-top: 0;
                        margin-bottom: 0;
                        padding: 1em 3em 1em 3em;
                        font: 'Raleway', sans-serif;
                    }

                    a#donaciongraciasboton:hover {
                        background: rgba(0, 0, 0, 0.3);
                        border-radius: 1em;
                        color: #ffffff;
                    }
                    
                    input[type=reset]#resetdonacion {
                        width: 30%;
                        border: none;
                        border-radius: 1em;
                        background-color: #3493a9;
                        color: #ffffff;
                        align-content: center;
                        align-items: center;
                        text-align: center;
                        align-self: center;
                        font-size: 12px;
                        margin-top: 0;
                        margin-bottom: 0;
                        padding: 1em 3em 1em 3em;
                        font: 'Raleway', sans-serif;
                        font-family: 'Raleway', sans-serif;
                    }

                    input[type=reset]#resetdonacion:hover {
                        background: rgba(0, 0, 0, 0.3);
                        color: #ffffff;
                        border-radius: 1em;
                    }

                     #columna1donacion > input.input-textdonacion {
                         align-content: center;
                         align-items: center;
                         align-self: center;
                         margin: auto;
                    }
                    
                    #columna1donacion > select#sedeselectdonacion {
                        align-content: center;
                         align-items: center;
                         align-self: center;
                    }
                    
                    select#sedeselectdonacion {
                        width: 75%;
                        border: none;
                        border-radius: 1em;
                        background-color: #3493a9;
                        color: #ffffff;
                        align-content: center;
                        align-items: center;
                        text-align: center;
                        font-size: 12px;
                        margin-top: 5px;
                        margin-bottom: 5px;
                        padding: 1em 3em 1em 3em;
                    }
                    
                    #columna2donacion > #calendariodonacion {
                         align-content: center;
                         align-items: center;
                         align-self: center;
                         margin: auto;
                    }
                    
                    input[type=text].input-textdonacion {
                        display: flex;
                        width: 75%;
                        align-content: center;
                        border: 2px solid black;
                        border-color: #3493a9;
                        background-color: #eaf9f4;
                        text-align: center;
                        font: 'Raleway', sans-serif;
                        border-radius: 1em;
                        align-items: center;
                        padding: 1em 3em 1em 3em;
                        margin: auto;
                        align-self: center
                    }
                    
                    input[type=checkbox]#donaranonimo {
                        margin-top: 30px;
                        margin-bottom: 50px;
                    }
                
            }
                    
                    
                    /*--Laptop 769-1024px--*/
                    
                @media screen and (min-width: 769px) {
                    
                    form#donacionform {
                        margin-top: 50px;
                        align-content: center;
                        align-items: center;
                        align-self: center;
                        text-align: center;
                    }
                    
                    h4#donacionbajada-h4 {
                        margin-top: 5px;
                        margin-bottom: 0;
                    }
                    
                    h3#donalibros-h3 {
                        margin-top: 50px;
                        margin-bottom: auto;
                    }
                    
                    main#donacionlibromain {
                        margin-top: auto;
                        margin-bottom: 10px;
                        align-content: center;
                        align-items: center;
                        align-self: center;
                        text-align: center;
                    }
                    
                    #calendariodonacion {
                        display: flex;
                        align-items: center;
                        text-align: center;
                        justify-content: center;
                        align-self: center;
                        box-sizing: border-box;
                        width: 75%;
                        flex-shrink: 1;
                        flex-grow: 1;
                        margin: auto;
                        padding: auto;
                    }
                    
                    .columnasdonacionhtml {
                        display: flex;
                        justify-content: center;
                        align-content: center;
                        justify-items: center;
                        align-self: center;
                        height: auto;
                        width: 100%;
                        flex-direction: row;
                        flex-wrap: wrap;
                    }        
                    
                    #columna1donacion, #columna2donacion {
                        flex-shrink: 1;
                        flex-grow: 1;
                        height: auto;
                        box-sizing: border-box;
                        align-content: center;
                        align-items: center;
                        text-align: center;
                        flex-direction: column;
                        font-size: 1em;
                        font: 'Raleway', sans-serif;
                        padding: auto;
                        width: 50%;
                    }
                    
                    input[type=file] {
                        width: auto;
                        font: 'Raleway', sans-serif;
                    }
                    
                    #enviar {
                        width: 20%;
                        padding: 10px 15px;
                        border: none;
                        border-radius: 1em;
                        background-color: #3493a9;
                        color: #ffffff;
                        align-content: center;
                        align-items: center;
                        text-align: center;
                        font-size: 12px;
                        margin: auto;
                    }

                    #enviar:hover {
                        background: rgba(0, 0, 0, 0.3);
                        border-radius: 1em;
                        color: #ffffff;
                    }
                    
                    input[type=reset]#resetdonacion {
                        width: 50%;
                        border: none;
                        border-radius: 1em;
                        background-color: #3493a9;
                        color: #ffffff;
                        align-content: center;
                        align-items: center;
                        text-align: center;
                        align-self: center;
                        font-size: 12px;
                        margin-top: 0;
                        margin-bottom: 0;
                        padding: 1em 3em 1em 3em;
                        font: 'Raleway', sans-serif;
                    }

                    input[type=reset]#resetdonacion:hover {
                        background: rgba(0, 0, 0, 0.3);
                        color: #ffffff;
                        border-radius: 1em;
                    }

                     #columna1donacion > input.input-textdonacion {
                         align-content: center;
                         align-items: center;
                         align-self: center;
                         margin: auto;
                         font: 'Raleway', sans-serif;
                    }
                    
                    #columna1donacion > select#sedeselectdonacion {
                        align-content: center;
                         align-items: center;
                         align-self: center;
                        font: 'Raleway', sans-serif;
                    }
                    
                    select#sedeselectdonacion {
                        width: 75%;
                        border: none;
                        border-radius: 1em;
                        background-color: #3493a9;
                        color: #ffffff;
                        align-content: center;
                        align-items: center;
                        text-align: center;
                        font-size: 12px;
                        margin-top: 5px;
                        margin-bottom: 5px;
                        padding: 1em 3em 1em 3em;
                        font: 'Raleway', sans-serif;
                    }
                    
                    #columna2donacion > #calendariodonacion {
                         align-content: center;
                         align-items: center;
                         align-self: center;
                         margin: auto;
                    }
                    
                    input[type=text].input-textdonacion {
                        display: flex;
                        width: 75%;
                        align-content: center;
                        border: 2px solid black;
                        border-color: #3493a9;
                        background-color: #eaf9f4;
                        text-align: center;
                        font: 'Raleway', sans-serif;
                        border-radius: 1em;
                        align-items: center;
                        padding: 1em 3em 1em 3em;
                        margin: auto;
                        align-self: center
                    }
                    
                    input[type=checkbox]#donaranonimo {
                        margin-top: 30px;
                        margin-bottom: 50px;
                        font: 'Raleway', sans-serif;
                    }
                
                    a#donaciongraciasboton {
                        width: 20%;
                        padding: 10px 15px;
                        border: none;
                        border-radius: 1em;
                        background-color: #3493a9;
                        color: #ffffff;
                        align-content: center;
                        align-items: center;
                        text-align: center;
                        font-size: 12px;
                        margin: auto;
                    }

                    a#donaciongraciasboton:hover {
                        background: rgba(0, 0, 0, 0.3);
                        border-radius: 1em;
                        color: #ffffff;
                    }
                    
                    /*--Desktop 1025-1200px--*/
                    
                @media screen and (min-width: 1025px) {
                    
                    form#donacionform {
                        margin-top: 50px;
                        align-content: center;
                        align-items: center;
                        align-self: center;
                        text-align: center;
                    }
                    
                    h4#donacionbajada-h4 {
                        margin-top: 5px;
                        margin-bottom: 0;
                    }
                    
                    h3#donalibros-h3 {
                        margin-top: 50px;
                        margin-bottom: auto;
                    }
                    
                    main#donacionlibromain {
                        margin-top: auto;
                        margin-bottom: 10px;
                        align-content: center;
                        align-items: center;
                        align-self: center;
                        text-align: center;
                    }
                    
                    #calendariodonacion {
                        display: flex;
                        align-items: center;
                        text-align: center;
                        justify-content: center;
                        align-self: center;
                        box-sizing: border-box;
                        width: 80%;
                        flex-shrink: 1;
                        flex-grow: 1;
                        margin: auto;
                        padding: auto;
                    }
                    
                    .columnasdonacionhtml {
                        display: flex;
                        align-content: center;
                        align-self: center;
                        align-items: center;
                        height: auto;
                        width: 100%;
                    }        
                    
                    #columna1donacion, #columna2donacion {
                        flex-shrink: 1;
                        flex-grow: 1;
                        height: auto;
                        box-sizing: border-box;
                        align-content: center;
                        align-items: center;
                        text-align: center;
                        justify-content: center;
                        flex-direction: column;
                        font-size: 1em;
                        font: 'Raleway', sans-serif;
                        padding: auto;
                        width: 50%;
                    }
                    
                    input[type=file] {
                        width: auto;
                    }

                    a#donaciongraciasboton {
                        width: 30%;
                        border: none;
                        border-radius: 1em;
                        background-color: #3493a9;
                        color: #ffffff;
                        align-content: center;
                        align-items: center;
                        text-align: center;
                        align-self: center;
                        font-size: 12px;
                        margin-top: 0;
                        margin-bottom: 0;
                        padding: 1em 3em 1em 3em;
                        font: 'Raleway', sans-serif;
                    }

                    a#donaciongraciasboton:hover {
                        background: rgba(0, 0, 0, 0.3);
                        border-radius: 1em;
                        color: #ffffff;
                    }
                    
                    input[type=reset]#resetdonacion {
                        width: 30%;
                        border: none;
                        border-radius: 1em;
                        background-color: #3493a9;
                        color: #ffffff;
                        align-content: center;
                        align-items: center;
                        text-align: center;
                        align-self: center;
                        font-size: 12px;
                        margin-top: 0;
                        margin-bottom: 0;
                        padding: 1em 3em 1em 3em;
                        font: 'Raleway', sans-serif;
                    }

                    input[type=reset]#resetdonacion:hover {
                        background: rgba(0, 0, 0, 0.3);
                        color: #ffffff;
                        border-radius: 1em;
                    }

                     #columna1donacion > input.input-textdonacion {
                         align-content: center;
                         align-items: center;
                         align-self: center;
                         margin: auto;
                    }
                    
                    #columna1donacion > select#sedeselectdonacion {
                        align-content: center;
                         align-items: center;
                         align-self: center;
                    }
                    
                    select#sedeselectdonacion {
                        width: 75%;
                        border: none;
                        border-radius: 1em;
                        background-color: #3493a9;
                        color: #ffffff;
                        align-content: center;
                        align-items: center;
                        text-align: center;
                        font-size: 12px;
                        margin-top: 5px;
                        margin-bottom: 5px;
                        padding: 1em 3em 1em 3em;
                    }
                    
                    #columna2donacion > #calendariodonacion {
                         align-content: center;
                         align-items: center;
                         align-self: center;
                         margin: auto;
                    }
                    
                    input[type=text].input-textdonacion {
                        display: flex;
                        width: 75%;
                        align-content: center;
                        border: 2px solid black;
                        border-color: #3493a9;
                        background-color: #eaf9f4;
                        text-align: center;
                        font: 'Raleway', sans-serif;
                        border-radius: 1em;
                        align-items: center;
                        padding: 1em 3em 1em 3em;
                        margin: auto;
                        align-self: center
                    }
                    
                    input[type=checkbox]#donaranonimo {
                        margin-top: 30px;
                        margin-bottom: 50px;
                    }
                
            }
                    
/*-----------------------------------------------------------------------------------------------------
------------FIN DONACION----------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------*/
                    
/*-----------------------------------------------------------------------------------------------------
------------DONACION GRACIAS----------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------*/
                    
                    /*--Mobile first--*/
                    
                @media screen and (min-width: 320px) {
                    
                    #donaciongracias {
                    align-content: center;
                    align-items: center;
                    align-self: center;
                    text-align: center;
                    justify-content: center;
                    margin-top: 0em;
                    margin-bottom: 5em;
                    }
                
                h3#h3-donaciongracias {
                        margin-bottom: auto;
                        font-size: 3em;
                    }
                    
                    h4#h4-donaciongracias {
                        font-size: 2em;
                    }
                    
                    .botonesdonaciongracias {
                        display: flex;
                        width: 100%;
                        flex-direction: column;
                        align-content: center;
                        align-items: center;
                        align-self: center;
                        text-align: center;
                    }
                    
                    #donaciongraciascolumna1, #donaciongraciascolumna2, #donaciongraciascolumna3, #donaciongraciascolumna4 {
                        display: flex;
                        width: 50%;
                        flex-direction: column;
                        align-content: center;
                        align-items: center;
                        align-self: center;
                        text-align: center;
                        margin: auto;
                    }
                    
                    a.botondonaciongracias {
                        width: 100%;
                        border: none;
                        border-radius: 1em;
                        background-color: #3493a9;
                        color: #ffffff;
                        align-content: center;
                        align-items: center;
                        text-align: center;
                        align-self: center;
                        font-size: 12px;
                        margin-top: 10px;
                        margin-bottom: 10px;
                        padding: 1em 3em 1em 3em;
                        font: 'Raleway', sans-serif;
                        text-decoration: none;
                    }
                   
                    a.botondonaciongracias:hover {
                        background: rgba(0, 0, 0, 0.3);
                        border-radius: 1em;
                    }
                
                }
                
                
            /*--Tablet 768px--*/
                

            @media screen and (min-width: 481px) {
                
                #donaciongracias {
                    align-content: center;
                    align-items: center;
                    align-self: center;
                    text-align: center;
                    justify-content: center;
                    margin-bottom: 5em;
                    }
                
                h3#h3-donaciongracias {
                        margin-bottom: auto;
                        font-size: 3em;
                    }
                    
                    h4#h4-donaciongracias {
                        font-size: 2em;
                    }
                    
                    .botonesdonaciongracias {
                        display: flex !important;
                        width: 100%;
                        flex-direction: column;
                        align-content: center;
                        align-items: center;
                        align-self: center;
                        text-align: center;
                    }
                    
                    #donaciongraciascolumna1, #donaciongraciascolumna2, #donaciongraciascolumna3, #donaciongraciascolumna4 {
                        display: flex;
                        width: 50%;
                        flex-direction: column;
                        align-content: center;
                        align-items: center;
                        align-self: center;
                        text-align: center;
                        margin: auto;
                    }
                    
                    a.botondonaciongracias {
                        width: 100%;
                        border: none;
                        border-radius: 1em;
                        background-color: #3493a9;
                        color: #ffffff;
                        align-content: center;
                        align-items: center;
                        text-align: center;
                        align-self: center;
                        font-size: 12px;
                        margin-top: 10px;
                        margin-bottom: 10px;
                        padding: 1em 3em 1em 3em;
                        font: 'Raleway', sans-serif;
                        text-decoration: none;
                    }
                   
                    a.botondonaciongracias:hover {
                        background: rgba(0, 0, 0, 0.3);
                        border-radius: 1em;
                    }
                
                }
                
                
            /*--Laptop 769-1024px--*/
                    
                    @media screen and (min-width: 769px) {
                    
                    h3#h3-donaciongracias {
                        margin-bottom: auto;
                        font-size: 3em;
                    }
                    
                    h4#h4-donaciongracias {
                        font-size: 2em;
                    }
                    
                    .botonesdonaciongracias {
                        display: flex; 
                        width: 75%;
                        flex-direction: row;
                        align-content: center;
                        align-items: center;
                        align-self: center;
                        text-align: center;
                        justify-content: center;
                        justify-items: center;
                        margin: auto;
                        grid-gap: 15px;
                    }
                    
                    #donaciongraciascolumna1, #donaciongraciascolumna2, #donaciongraciascolumna3, #donaciongraciascolumna4 {
                        display: flex;
                        width: 30%;
                        flex-direction: row;
                        align-content: center;
                        align-items: center;
                        align-self: center;
                        text-align: center;
                        margin: auto;
                    }
                    
                    a.botondonaciongracias {
                        width: 100%;
                        border: none;
                        border-radius: 1em;
                        background-color: #3493a9;
                        color: #ffffff;
                        align-content: center;
                        align-items: center;
                        text-align: center;
                        align-self: center;
                        font-size: 12px;
                        margin-top: 0;
                        margin-bottom: 0;
                        padding: 1em 3em 1em 3em;
                        font: 'Raleway', sans-serif;
                        text-decoration: none;    
                    }
                   
                    a.botondonaciongracias:hover {
                        background: rgba(0, 0, 0, 0.3);
                        border-radius: 1em;
                    }
                    
            }
                
                
        /*--Desktop 1025-1200px--*/
                    
                @media screen and (min-width: 1025px) {
                    
                    #donaciongracias {
                    align-content: center;
                    align-items: center;
                    align-self: center;
                    text-align: center;
                    justify-content: center;
                    margin-top: 10em;
                    margin-bottom: 5em;
                    }
                    
                    h3#h3-donaciongracias {
                        margin-bottom: auto;
                        font-size: 3em;
                    }
                    
                    h4#h4-donaciongracias {
                        font-size: 2em;
                    }
                    
                    .botonesdonaciongracias {
                        display: flex;
                        width: 75%;
                        flex-direction: row;
                        align-content: center;
                        align-items: center;
                        align-self: center;
                        text-align: center;
                        justify-content: center;
                        justify-items: center;
                        margin: auto;
                    }
                    
                    #donaciongraciascolumna1, #donaciongraciascolumna2, #donaciongraciascolumna3, #donaciongraciascolumna4 {
                        display: flex;
                        width: 20%;
                        flex-direction: row;
                        align-content: center;
                        align-items: center;
                        align-self: center;
                        text-align: center;
                        margin: auto;
                    }
                    
                    a.botondonaciongracias {
                        width: 100%;
                        border: none;
                        border-radius: 1em;
                        background-color: #3493a9;
                        color: #ffffff;
                        align-content: center;
                        align-items: center;
                        text-align: center;
                        align-self: center;
                        font-size: 12px;
                        margin-top: 0;
                        margin-bottom: 0;
                        padding: 1em 3em 1em 3em;
                        font: 'Raleway', sans-serif;
                        text-decoration: none;    
                    }
                   
                    a.botondonaciongracias:hover {
                        background: rgba(0, 0, 0, 0.3);
                        border-radius: 1em;
                    }
                    
            }
                    
/*-----------------------------------------------------------------------------------------------------
------------FIN DONACION GRACIAS----------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------*/
                    
/*-----------------------------------------------------------------------------------------------------
-----------HISTORIAL----------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------*/
                    
                    /*--Mobile first--*/
                    
                @media screen and (min-width: 320px) {
             
                   #historialtitulo {
                margin-top: 0.5em;
                margin-bottom: 1.5em;
            }
            
            #div-historialvista {
                display: flex;
                width: 100%;
                align-content: center;
                align-items: center;
                text-align: center;
                align-self: center;
                justify-content: center;
                grid-gap: 15px;
                padding-top: 30px;
                padding-bottom: 30px;
                background-color: #b0eee3;
                flex-direction: column;
                
            }
                
            #historial-bloque {
                display: flex;
                background-color: #eaf9f4;
                width: 40%;
                height: auto;
                border-radius: 2em;
                padding: 1em 3em 1em 3em;
                box-shadow: 0px -2px 5px #9c9c9c;
                align-content: center;
                align-items: center;
                text-align: center;
                align-self: center;
                flex-direction: column;
                font-size: auto;
            }
            
            h3#h3-historial {
                font-size: 2em;
                margin: auto;
                justify-content: center;
                
            }
            
            h4#h4-historial {
                font-size: 1.5em;
                margin: auto;
                font-weight: 500;
                justify-content: center;
            }
            
            h5#h5-historial {
                font-size: 2.4em;
                margin: auto;
                justify-content: center;
            }
            
            a#botonusuario.button {
                display: block;
                width: 40%;
                padding: 10px 15px;
                margin: auto;
                border: none;
                align-items: center;
                align-content: center;
                align-self: center;
                text-align: center;
                border-radius: 1em;
                font: 'Raleway';
                font-size: 14px;
                background-color: #3493a9;
                color: #ffffff;
                text-decoration: none;
                flex-direction: column;
            }
                    
            a#botonusuario.button:hover {
                background: rgba(0, 0, 0, 0.3);
                    border-radius: 1em;
                }
            
            #recordatoriohistorial {
                align-items: center;
                align-content: center;
                align-self: center;
                text-align: center;
                justify-content: center;
                width: 80%;
                margin: auto;
                margin-top: 10px;
            }
            
            h5#h5-recordatoriohistorial {
                font-size: 1.2em;
                align-items: center;
                align-content: center;
                align-self: center;
                text-align: center;
                justify-content: center;
                font-weight: 500;
                margin: auto;
            } 
                    
            }
            
            /*--Tablet 768px--*/
                    
                @media screen and (min-width: 481px) {
             
                    #historialtitulo {
                margin-top: 0.5em;
                margin-bottom: 1.5em;
            }
            
            #div-historialvista {
                display: flex;
                width: 100%;
                align-content: center;
                align-items: center;
                text-align: center;
                align-self: center;
                justify-content: center;
                grid-gap: 15px;
                padding-top: 30px;
                padding-bottom: 30px;
                background-color: #b0eee3;
                flex-direction: column;
                
            }
                
            #historial-bloque {
                display: flex;
                background-color: #eaf9f4;
                width: 40%;
                height: auto;
                border-radius: 2em;
                padding: 1em 3em 1em 3em;
                box-shadow: 0px -2px 5px #9c9c9c;
                align-content: center;
                align-items: center;
                text-align: center;
                align-self: center;
                flex-direction: column;
                font-size: auto;
            }
            
            h3#h3-historial {
                font-size: 3em;
                margin: auto;
                
            }
            
            h4#h4-historial {
                font-size: 2em;
                margin: auto;
                font-weight: 500;
            }
            
            h5#h5-historial {
                font-size: 2.4em;
                margin: auto;
            }
            
            a#botonusuario.button {
                display: block;
                width: 30%;
                padding: 10px 15px;
                margin: auto;
                border: none;
                align-items: center;
                align-content: center;
                align-self: center;
                text-align: center;
                border-radius: 1em;
                font: 'Raleway';
                font-size: 14px;
                background-color: #3493a9;
                color: #ffffff;
                text-decoration: none;
                flex-direction: column;
            }
                    
                    a#botonusuario.button:hover {
                    background: rgba(0, 0, 0, 0.3);
                        border-radius: 1em;
                    }
            
            #recordatoriohistorial {
                align-items: center;
                align-content: center;
                align-self: center;
                text-align: center;
                justify-content: center;
                width: 70%;
                margin: auto;
                margin-top: 10px;
            }
            
            h5#h5-recordatoriohistorial {
                font-size: 1.4em;
                align-items: center;
                align-content: center;
                align-self: center;
                text-align: center;
                justify-content: center;
                font-weight: 500;
                margin: auto;
            }
                    
        }
            
             
                /*--Laptop 769-1024px--*/
                    
                @media screen and (min-width: 769px) {
             
                    #historialtitulo {
                margin-top: 2em;
                margin-bottom: 1.5em;
            }
            
            #div-historialvista {
                display: flex;
                flex-direction: row;
                width: 100%;
                align-content: center;
                align-items: center;
                text-align: center;
                align-self: center;
                justify-content: center;
                grid-gap: 15px;
                padding-top: 30px;
                padding-bottom: 30px;
                background-color: #b0eee3;
                
            }
                
            #historial-bloque {
                display: block;
                background-color: #eaf9f4;
                width: 20%;
                height: auto;
                border-radius: 2em;
                padding: 1em 3em 1em 3em;
                box-shadow: 0px -2px 5px #9c9c9c;
                align-content: center;
                align-items: center;
                text-align: center;
                align-self: center;
                flex-direction: column;
                font-size: auto;
            }
            
            h3#h3-historial {
                font-size: 4em;
                margin: auto;
                
            }
            
            h4#h4-historial {
                font-size: 2em;
                margin: auto;
                font-weight: 500;
            }
            
            h5#h5-historial {
                font-size: 2.4em;
                margin: auto;
            }
            
            a#botonusuario.button {
                display: block;
                width: 20%;
                padding: 10px 15px;
                margin: auto;
                border: none;
                align-items: center;
                align-content: center;
                align-self: center;
                text-align: center;
                border-radius: 1em;
                font: 'Raleway';
                font-size: 14px;
                background-color: #3493a9;
                color: #ffffff;
                text-decoration: none;
                    }
                    
                    a#botonusuario.button:hover {
                    background: rgba(0, 0, 0, 0.3);
                        border-radius: 1em;
                    }
            
            #recordatoriohistorial {
                align-items: center;
                align-content: center;
                align-self: center;
                text-align: center;
                justify-content: center;
                width: 70%;
                margin: auto;
                margin-top: 10px;
            }
            
            h5#h5-recordatoriohistorial {
                font-size: 2em;
                align-items: center;
                align-content: center;
                align-self: center;
                text-align: center;
                justify-content: center;
                font-weight: 500;
                margin: auto;
            }
                    
                    
            }
            
                /*--Desktop 1025-1200px--*/
                    
                @media screen and (min-width: 1025px) {
            
            #historialtitulo {
                margin-top: 2em;
                margin-bottom: 1.5em;
            }
            
            #div-historialvista {
                display: flex;
                width: 100%;
                flex-direction: row;
                align-content: center;
                align-items: center;
                text-align: center;
                align-self: center;
                justify-content: center;
                grid-gap: 15px;
                padding-top: 30px;
                padding-bottom: 30px;
                background-color: #b0eee3;
                
            }
                
            #historial-bloque {
                display: block;
                background-color: #eaf9f4;
                width: 20%;
                height: auto;
                border-radius: 2em;
                padding: 1em 3em 1em 3em;
                box-shadow: 0px -2px 5px #9c9c9c;
                align-content: center;
                align-items: center;
                text-align: center;
                align-self: center;
                flex-direction: column;
                font-size: auto;
            }
            
            h3#h3-historial {
                font-size: 4em;
                margin: auto;
                
            }
            
            h4#h4-historial {
                font-size: 2em;
                margin: auto;
                font-weight: 500;
            }
            
            h5#h5-historial {
                font-size: 2.4em;
                margin: auto;
            }
            
            a#botonusuario.button {
                display: block;
                width: 20%;
                padding: 10px 15px;
                margin: auto;
                border: none;
                align-items: center;
                align-content: center;
                align-self: center;
                text-align: center;
                border-radius: 1em;
                font: 'Raleway';
                font-size: 14px;
                background-color: #3493a9;
                color: #ffffff;
                text-decoration: none;
            }
                    
                    a#botonusuario.button:hover {
                    background: rgba(0, 0, 0, 0.3);
                        border-radius: 1em;
                    }
            
            #recordatoriohistorial {
                align-items: center;
                align-content: center;
                align-self: center;
                text-align: center;
                justify-content: center;
                width: 70%;
                margin: auto;
                margin-top: 10px;
            }
            
            h5#h5-recordatoriohistorial {
                font-size: 2em;
                align-items: center;
                align-content: center;
                align-self: center;
                text-align: center;
                justify-content: center;
                font-weight: 500;
                margin: auto;
            }
                    
        }
                    
/*-----------------------------------------------------------------------------------------------------
-----------FIN HISTORIAL----------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------*/
                    
/*-----------------------------------------------------------------------------------------------------
-----------INICIO SESION----------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------*/
                    
                      /*--Mobile first--*/
                    
                @media screen and (min-width: 320px) {
            
             main#main-iniciosesion {
                        margin-bottom: 0;
                        align-content: center;
                        align-items: center;
                        align-self: center;
                        text-align: center;
                        padding-bottom: 0;
                    }
                    
                    #portada-iniciosesion-img {
                        width: 250px;
                    }
                    
                    .iniciosesion-section {
                        display: flex;
                        align-content: center;
                        align-items: center;
                        align-self: center;
                        text-align: center;
                        width: 100%;
                        height: auto;
                        margin-bottom: 0;
                        flex-direction: column;
                    }
                    
                    .bloque-iniciosesion1 {
                        display: block;
                        background-color: #12466d;
                        width: 100%;
                        margin-top: 5em;
                        margin: auto;
                        align-content: center;
                        align-items: center;
                        align-self: center;
                        text-align: center;
                        padding-top: 0;
                        padding-bottom: 0px;
                        display: none;
                    }
                    
                    #iniciosesion-texto1 {
                        color: #ffffff;
                        font-size: 1.4em;
                        font-weight: bold;
                        display: none;
                    }
                    
                    #iniciosesion-texto2 {
                        color: #ffffff;
                        font-size: 2.7em;
                        font-weight: bold;
                        display: none;
                    }
                    
                    #iniciosesion-texto3 {
                        color: #ffffff;
                        font-size: 0.8em;
                        display: none;
                    }
                    
        
                    .bloque-iniciosesion2 {
                        display: block;
                        background-color: #b0eee3;
                        width: 100%;
                        margin: auto;
                        align-content: center;
                        align-items: center;
                        align-self: center;
                        text-align: center;
                        justify-content: center;
                        height: 400px;
                        padding-top: 50px;
                    }

                    #iniciodesesion {
                        align-content: center;
                        align-items: center;
                        align-self: center;
                        text-align: center;
                        padding-bottom: 5px;
                        font-size: 2em;
                        font-weight: bold;

                    }
                    
                    input[type=text]#usuarioiniciosesion, input[type=password]#usuarioiniciosesion  {
                        display: flex;
                        width: 60%;
                        align-content: center;
                        border: 2px solid black;
                        border-color: #3493a9;
                        background-color: #eaf9f4;
                        text-align: center;
                        font: 'Raleway', sans-serif;
                        border-radius: 1em;
                        align-items: center;
                        padding: 1em 3em 1em 3em;
                        margin: auto;
                        align-self: center;
                        font-family: 'Raleway', sans-serif;
                        
                    }
                    
                    a#link-usuario {
                        color: #12466d;
                        font-weight: bold;
                        text-decoration: none;
                    }
                    
                    #entrar-usuario {
                        width: 100%;
                        align-content: center;
                        align-items: center;
                        text-align: center;
                        align-self: center;
                        margin-top: 15px;
                    }
                    
                    
                   a#entrar-iniciosesion.button {
                        width: 100%;
                        border: none;
                        border-radius: 1em;
                        background-color: #3493a9;
                        color: #ffffff;
                        align-content: center;
                        align-items: center;
                        text-align: center;
                        align-self: center;
                        font-size: 12px;
                        margin-top: 10px;
                        margin-bottom: 10px;
                        padding: 1em 3em 1em 3em;
                        font: 'Raleway', sans-serif;
                        text-decoration: none;
                    }
                   
                    a#entrar-iniciosesion.button:hover {
                        background: rgba(0, 0, 0, 0.3);
                        border-radius: 1em;
                    }
            
            }
            
            
            /*--Tablet 768px--*/
                    
                @media screen and (min-width: 481px) {
            
             main#main-iniciosesion {
                        margin-bottom: 0;
                        align-content: center;
                        align-items: center;
                        align-self: center;
                        text-align: center;
                        padding-bottom: 0;
                    }
                    
                    #portada-iniciosesion-img {
                        width: 250px;
                    }
                    
                    .iniciosesion-section {
                        display: flex;
                        align-content: center;
                        align-items: center;
                        align-self: center;
                        text-align: center;
                        width: 100%;
                        height: auto;
                        margin-bottom: 0;
                        flex-direction: column;
                    }
                    
                    .bloque-iniciosesion1 {
                        display: block;
                        background-color: #12466d;
                        width: 100%;
                        margin-top: 5em;
                        margin: auto;
                        align-content: center;
                        align-items: center;
                        align-self: center;
                        text-align: center;
                        padding-top: 0;
                        padding-bottom: 0px;
                        display: none;
                    }
                    
                    #iniciosesion-texto1 {
                        color: #ffffff;
                        font-size: 1.4em;
                        font-weight: bold;
                        display: none;
                    }
                    
                    #iniciosesion-texto2 {
                        color: #ffffff;
                        font-size: 2.7em;
                        font-weight: bold;
                        display: none;
                    }
                    
                    #iniciosesion-texto3 {
                        color: #ffffff;
                        font-size: 0.8em;
                        display: none;
                    }
                    
        
                    .bloque-iniciosesion2 {
                        display: block;
                        background-color: #b0eee3;
                        width: 100%;
                        margin: auto;
                        align-content: center;
                        align-items: center;
                        align-self: center;
                        text-align: center;
                        justify-content: center;
                        height: 400px;
                        padding-top: 50px;
                    }

                    #iniciodesesion {
                        align-content: center;
                        align-items: center;
                        align-self: center;
                        text-align: center;
                        padding-bottom: 5px;
                        font-size: 3em;
                        font-weight: bold;

                    }
                    
                    input[type=text]#usuarioiniciosesion, input[type=password]#usuarioiniciosesion  {
                        display: flex;
                        width: 60%;
                        align-content: center;
                        border: 2px solid black;
                        border-color: #3493a9;
                        background-color: #eaf9f4;
                        text-align: center;
                        font: 'Raleway', sans-serif;
                        border-radius: 1em;
                        align-items: center;
                        padding: 1em 3em 1em 3em;
                        margin: auto;
                        align-self: center;
                        font-family: 'Raleway', sans-serif;
                        
                    }
                    
                    a#link-usuario {
                        color: #12466d;
                        font-weight: bold;
                        text-decoration: none;
                    }
                    
                    #entrar-usuario {
                        width: 100%;
                        align-content: center;
                        align-items: center;
                        text-align: center;
                        align-self: center;
                        margin-top: 15px;
                    }
                    
                    
                    a#entrar-iniciosesion.button {
                        width: 100%;
                        border: none;
                        border-radius: 1em;
                        background-color: #3493a9;
                        color: #ffffff;
                        align-content: center;
                        align-items: center;
                        text-align: center;
                        align-self: center;
                        font-size: 12px;
                        margin-top: 10px;
                        margin-bottom: 10px;
                        padding: 1em 3em 1em 3em;
                        font: 'Raleway', sans-serif;
                        text-decoration: none;
                    }
                   
                    a#entrar-iniciosesion.button:hover {
                        background: rgba(0, 0, 0, 0.3);
                        border-radius: 1em;
                    }
            
            }
            
            /*--Laptop 769-1024px--*/
                    
                @media screen and (min-width: 769px) {
            
            main#main-iniciosesion {
                        margin-bottom: 0;
                        align-content: center;
                        align-items: center;
                        align-self: center;
                        text-align: center;
                        padding-bottom: 0;
                    }
                    
                    #portada-iniciosesion-img {
                        width: 250px;
                    }
                    
                    .iniciosesion-section {
                        display: flex;
                        align-content: center;
                        align-items: center;
                        align-self: center;
                        text-align: center;
                        width: 100%;
                        height: auto;
                        margin-bottom: 0;
                        flex-direction: row;
                    }
                    
                    .bloque-iniciosesion1 {
                        display: block;
                        background-color: #12466d;
                        width: 40%;
                        margin-top: 5em;
                        margin: auto;
                        align-content: center;
                        align-items: center;
                        align-self: center;
                        text-align: center;
                        height: 400px;
                        padding-top: 50px;
                    }
                    
                    #iniciosesion-texto1 {
                        color: #ffffff;
                        font-size: 1.4em;
                        font-weight: bold;
                        display: contents;
                    }
                    
                    #iniciosesion-texto2 {
                        color: #ffffff;
                        font-size: 2.7em;
                        font-weight: bold;
                        display: contents;
                    }
                    
                    #iniciosesion-texto3 {
                        color: #ffffff;
                        font-size: 0.8em;
                        display: contents;
                    }
                    
        
                    .bloque-iniciosesion2 {
                        display: block;
                        background-color: #b0eee3;
                        width: 60%;
                        margin: auto;
                        align-content: center;
                        align-items: center;
                        align-self: center;
                        text-align: center;
                        justify-content: center;
                        height: 400px;
                        padding-top: 50px;
                    }

                    #iniciodesesion {
                        align-content: center;
                        align-items: center;
                        align-self: center;
                        text-align: center;
                        padding-bottom: 5px;
                        font-size: 3em;
                        font-weight: bold;

                    }
                    
                    input[type=text]#usuarioiniciosesion, input[type=password]#usuarioiniciosesion  {
                        display: flex;
                        width: 60%;
                        align-content: center;
                        border: 2px solid black;
                        border-color: #3493a9;
                        background-color: #eaf9f4;
                        text-align: center;
                        font: 'Raleway', sans-serif;
                        border-radius: 1em;
                        align-items: center;
                        padding: 1em 3em 1em 3em;
                        margin: auto;
                        align-self: center;
                        font-family: 'Raleway', sans-serif;
                        
                    }
                    
                    a#link-usuario {
                        color: #12466d;
                        font-weight: bold;
                        text-decoration: none;
                    }
                    
                    #entrar-usuario {
                        width: 100%;
                        align-content: center;
                        align-items: center;
                        text-align: center;
                        align-self: center;
                        margin-top: 15px;
                    }
                    
                    
                   a#entrar-iniciosesion.button {
                        width: 100%;
                        border: none;
                        border-radius: 1em;
                        background-color: #3493a9;
                        color: #ffffff;
                        align-content: center;
                        align-items: center;
                        text-align: center;
                        align-self: center;
                        font-size: 12px;
                        margin-top: 10px;
                        margin-bottom: 10px;
                        padding: 1em 3em 1em 3em;
                        font: 'Raleway', sans-serif;
                        text-decoration: none;
                    }
                   
                    a#entrar-iniciosesion.button:hover {
                        background: rgba(0, 0, 0, 0.3);
                        border-radius: 1em;
                    }
            
            }
            
            
            /*--Desktop 1025-1200px--*/
                    
                @media screen and (min-width: 1025px) {
                    
                    main#main-iniciosesion {
                        margin-bottom: 0;
                        align-content: center;
                        align-items: center;
                        align-self: center;
                        text-align: center;
                        padding-bottom: 0;
                    }
                    
                    #portada-iniciosesion-img {
                        width: 250px;
                    }
                    
                    .iniciosesion-section {
                        display: flex;
                        align-content: center;
                        align-items: center;
                        align-self: center;
                        text-align: center;
                        width: 100%;
                        height: auto;
                        margin-bottom: 0;
                    }
                    
                    .bloque-iniciosesion1 {
                        display: block;
                        background-color: #12466d;
                        width: 40%;
                        margin-top: 5em;
                        margin: auto;
                        align-content: center;
                        align-items: center;
                        align-self: center;
                        text-align: center;
                        height: 400px;
                        padding-top: 50px;
                    }
                    
                    #iniciosesion-texto1 {
                        color: #ffffff;
                        font-size: 2em;
                        font-weight: bold;
                    }
                    
                    #iniciosesion-texto2 {
                        color: #ffffff;
                        font-size: 3.5em;
                        font-weight: bold;
                    }
                    
                    #iniciosesion-texto3 {
                        color: #ffffff;
                        font-size: 1em;
                    }
                    
        
                    .bloque-iniciosesion2 {
                        display: block;
                        background-color: #b0eee3;
                        width: 60%;
                        margin: auto;
                        align-content: center;
                        align-items: center;
                        align-self: center;
                        text-align: center;
                        justify-content: center;
                        height: 400px;
                        padding-top: 50px;
                    }

                    #iniciodesesion {
                        align-content: center;
                        align-items: center;
                        align-self: center;
                        text-align: center;
                        padding-bottom: 5px;
                        font-size: 4em;
                        font-weight: bold;

                    }
                    
                    input[type=text]#usuarioiniciosesion, input[type=password]#usuarioiniciosesion  {
                        display: flex;
                        width: 75%;
                        align-content: center;
                        border: 2px solid black;
                        border-color: #3493a9;
                        background-color: #eaf9f4;
                        text-align: center;
                        font: 'Raleway', sans-serif;
                        border-radius: 1em;
                        align-items: center;
                        padding: 1em 3em 1em 3em;
                        margin: auto;
                        align-self: center
                        
                    }
                    
                    a#link-usuario {
                        color: #12466d;
                        font-weight: bold;
                        text-decoration: none;
                    }
                    
                    #entrar-usuario {
                        width: 100%;
                        align-content: center;
                        align-items: center;
                        text-align: center;
                        align-self: center;
                        margin-top: 15px;
                    }
                    
                    
                       a#entrar-iniciosesion.button {
                        width: 100%;
                        border: none;
                        border-radius: 1em;
                        background-color: #3493a9;
                        color: #ffffff;
                        align-content: center;
                        align-items: center;
                        text-align: center;
                        align-self: center;
                        font-size: 12px;
                        margin-top: 10px;
                        margin-bottom: 10px;
                        padding: 1em 3em 1em 3em;
                        font: 'Raleway', sans-serif;
                        text-decoration: none;
                    }
                   
                    a#entrar-iniciosesion.button:hover {
                        background: rgba(0, 0, 0, 0.3);
                        border-radius: 1em;
                    }
            
        }
/*-----------------------------------------------------------------------------------------------------
-----------FIN INICIO SESION----------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------*/
                    
/*-----------------------------------------------------------------------------------------------------
-----------MAPA----------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------*/
                    
                     h3#h3-mapa {
                    color: #12466d;
                }
                
                /*--Mobile first--*/
                    
                @media screen and (min-width: 320px) {
                
                .columnasmapahtml {
                        display: flex;
                        width: 100%;
                        flex-direction: column;
                        align-content: center;
                        align-items: center;
                        align-self: center;
                        text-align: center;
                    }
                    
                    #columnamapa1, #columnamapa2 {
                        flex-shrink: 1;
                        flex-grow: 1;
                        height: auto;
                        box-sizing: border-box;
                        align-content: center;
                        align-items: center;
                        align-self: center;
                        text-align: center;
                        flex-direction: column;
                        font-size: 1em;
                        font: 'Raleway', sans-serif;
                        padding: auto;
                        width: 100%;
                    }
                    
                
             #cuencamatanzamapa {
                width: 80%;
                display: flex;
                align-items: center;
                margin: auto;
                text-align: center;
            }
            
            select#mapaselecthtml {
                width: 80%;
                padding: 10px 15px;
                margin: 10px;
                border: none;
                align-items: center;
                align-content: center;
                align-self: center;
                text-align: center;
                border-radius: 1em;
                font: 'Raleway', sans-serif;
                font-family: 'Raleway', sans-serif;
                background-color: #3493a9;
                color: #ffffff;
            }   
                
                }
                
                
                                
                /*--Tablet 768px--*/

                @media screen and (min-width: 481px) {
                    
                    .columnasmapahtml {
                        display: flex;
                        width: 100%;
                        flex-direction: column;
                        align-content: center;
                        align-items: center;
                        align-self: center;
                        text-align: center;
                    }
                    
                    #columnamapa1, #columnamapa2 {
                        flex-shrink: 1;
                        flex-grow: 1;
                        height: auto;
                        box-sizing: border-box;
                        align-content: center;
                        align-items: center;
                        align-self: center;
                        text-align: center;
                        flex-direction: column;
                        font-size: 1em;
                        font: 'Raleway', sans-serif;
                        padding: auto;
                        width: 100%;
                    }
                    
                
             #cuencamatanzamapa {
                width: 80%;
                display: flex;
                align-items: center;
                margin: auto;
                text-align: center;
            }
            
            select#mapaselecthtml {
                width: 80%;
                padding: 10px 15px;
                margin: 10px;
                border: none;
                align-items: center;
                align-content: center;
                align-self: center;
                text-align: center;
                border-radius: 1em;
                font: 'Raleway', sans-serif;
                font-family: 'Raleway', sans-serif;
                background-color: #3493a9;
                color: #ffffff;
            }
                    
                }
                
                
                /*--Laptop 769-1024px--*/
                    
                @media screen and (min-width: 769px) {
                
                .columnasmapahtml {
                        display: flex;
                        width: 100%;
                        flex-direction: row;
                        align-content: center;
                        align-items: center;
                        align-self: center;
                        text-align: center;
                    }
                    
                    #columnamapa1, #columnamapa2 {
                        flex-shrink: 1;
                        flex-grow: 1;
                        height: auto;
                        box-sizing: border-box;
                        align-content: center;
                        align-items: center;
                        align-self: center;
                        text-align: center;
                        flex-direction: column;
                        font-size: 1em;
                        font: 'Raleway', sans-serif;
                        padding: auto;
                        width: 50%;
                    }
                    
                
             #cuencamatanzamapa {
                width: 80%;
                display: flex;
                align-items: center;
                margin: auto;
                text-align: center;
            }
            
            select#mapaselecthtml {
                width: 80%;
                padding: 10px 15px;
                margin: 10px;
                border: none;
                align-items: center;
                align-content: center;
                align-self: center;
                text-align: center;
                border-radius: 1em;
                font: 'Raleway', sans-serif;
                font-family: 'Raleway', sans-serif;
                background-color: #3493a9;
                color: #ffffff;
            }
                
                
                }
                
                /*--Desktop 1025-1200px--*/
                    
                @media screen and (min-width: 1025px) {
                    
                    .columnasmapahtml {
                        display: flex;
                        width: 100%;
                        flex-direction: row;
                        align-content: center;
                        align-items: center;
                        align-self: center;
                        text-align: center;
                    }
                    
                    #columnamapa1, #columnamapa2 {
                        flex-shrink: 1;
                        flex-grow: 1;
                        height: auto;
                        box-sizing: border-box;
                        align-content: center;
                        align-items: center;
                        align-self: center;
                        text-align: center;
                        flex-direction: column;
                        font-size: 1em;
                        font: 'Raleway', sans-serif;
                        padding: auto;
                        width: 50%;
                    }
                    
                
             #cuencamatanzamapa {
                width: 80%;
                display: flex;
                align-items: center;
                margin: auto;
                text-align: center;
            }
            
            select#mapaselecthtml {
                width: 80%;
                padding: 10px 15px;
                margin: 10px;
                border: none;
                align-items: center;
                align-content: center;
                align-self: center;
                text-align: center;
                border-radius: 1em;
                font: 'Raleway', sans-serif;
                font-family: 'Raleway', sans-serif;
                background-color: #3493a9;
                color: #ffffff;
            }
                    
        }
                    
/*-----------------------------------------------------------------------------------------------------
-----------FIN MAPA----------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------*/
                    
/*-----------------------------------------------------------------------------------------------------
-----------REGISTRO----------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------*/
                    
                     /*--Mobile first--*/
                    
                @media screen and (min-width: 320px) {
            
                     section.registro-section {
                        margin: auto;
                        margin-top: 2em;
                        align-content: center;
                        align-items: center;
                        align-self: center;
                        text-align: center;
                        padding-bottom: 0;
                    }
                    
                    #registroform {
                        width: 100%;
                        display: flex;
                        flex-direction: column;
                        grid-gap: 15px;
                    }
                    
                    .bloque-registro {
                        display: flex;
                        width: 70%;
                        background-color: #b0eee3;
                        flex-direction: column;
                        border-radius: 2em;
                        align-content: center;
                        align-items: center;
                        align-self: center;
                        text-align: center;
                        margin: auto;
                        margin-top: 0;
                        margin-bottom: 20px;
                        padding-top: 30px;
                        padding-bottom: 30px;
                        padding-left: 30px;
                        padding-right: 30px;

                    }
                    
                    .columna1registro, .columna2registro {
                        width: 100%;
                    }

                    #registrotexto {
                        align-content: center;
                        align-items: center;
                        align-self: center;
                        text-align: center;
                        font-size: 2em;
                        font-weight: bold;
                        margin-bottom: 0.5em;

                    }
                    
                    input[type=text]#input-text-registro, input[type=password]#input-text-registro  {
                        display: flex;
                        width: 65%;
                        align-content: center;
                        border: 2px solid black;
                        border-color: #3493a9;
                        background-color: #eaf9f4;
                        text-align: center;
                        font: 'Raleway', sans-serif;
                        font-family: 'Raleway', sans-serif;
                        border-radius: 1em;
                        align-items: center;
                        padding: 1em 3em 1em 3em;
                        margin: auto;
                        align-self: center
                        
                    }
                    
                    select#select-registro {
                        display: flex;
                        width: 91%;
                        background-color: #3493a9;
                        border-radius: 1em;
                        font: 'Raleway', sans-serif;
                        font-family: 'Raleway', sans-serif;
                        margin: auto;
                        padding: 1em 3em 1em 3em;
                        color: #ffffff;
                    }
                    
                    a#link-usuario {
                        color: #12466d;
                        font-weight: bold;
                        text-decoration: none;
                    }
                    
                    #entrar-usuario {
                        width: 100%;
                        align-content: center;
                        align-items: center;
                        text-align: center;
                        align-self: center;
                        margin-top: 15px;
                    }
                    
                    
                    a#entrar-registro.button {
                        width: 100%;
                        border: none;
                        border-radius: 1em;
                        background-color: #3493a9;
                        color: #ffffff;
                        align-content: center;
                        align-items: center;
                        text-align: center;
                        align-self: center;
                        font-size: 12px;
                        margin-top: 10px;
                        margin-bottom: 10px;
                        padding: 1em 3em 1em 3em;
                        font: 'Raleway', sans-serif;
                        text-decoration: none;
                    }
                   
                    a#entrar-registro.button:hover {
                        background: rgba(0, 0, 0, 0.3);
                        border-radius: 1em;
                    }
            
            }
            
            /*--Tablet 768px--*/
                    
                @media screen and (min-width: 481px) {
            
            section.registro-section {
                        margin: auto;
                        margin-top: 4em;
                        align-content: center;
                        align-items: center;
                        align-self: center;
                        text-align: center;
                        padding-bottom: 0;
                    }
                    
                    #registroform {
                        width: 100%;
                        display: flex;
                        flex-direction: column;
                        grid-gap: 15px;
                    }
                    
                    .bloque-registro {
                        display: flex;
                        width: 70%;
                        background-color: #b0eee3;
                        flex-direction: column;
                        border-radius: 3em;
                        align-content: center;
                        align-items: center;
                        align-self: center;
                        text-align: center;
                        margin: auto;
                        margin-top: 0;
                        margin-bottom: 20px;
                        padding-top: 30px;
                        padding-bottom: 30px;
                        padding-left: 30px;
                        padding-right: 30px;

                    }
                    
                    .columna1registro, .columna2registro {
                        width: 100%;
                    }

                    #registrotexto {
                        align-content: center;
                        align-items: center;
                        align-self: center;
                        text-align: center;
                        padding-bottom: 5px;
                        font-size: 4em;
                        font-weight: bold;
                        margin-top; 3em;

                    }
                    
                    input[type=text]#input-text-registro, input[type=password]#input-text-registro  {
                        display: flex;
                        width: 65%;
                        align-content: center;
                        border: 2px solid black;
                        border-color: #3493a9;
                        background-color: #eaf9f4;
                        text-align: center;
                        font: 'Raleway', sans-serif;
                        font-family: 'Raleway', sans-serif;
                        border-radius: 1em;
                        align-items: center;
                        padding: 1em 3em 1em 3em;
                        margin: auto;
                        align-self: center
                        
                    }
                    
                    select#select-registro {
                        display: flex;
                        width: 91%;
                        background-color: #3493a9;
                        border-radius: 1em;
                        font: 'Raleway', sans-serif;
                        font-family: 'Raleway', sans-serif;
                        margin: auto;
                        padding: 1em 3em 1em 3em;
                        color: #ffffff;
                    }
                    
                    a#link-usuario {
                        color: #12466d;
                        font-weight: bold;
                        text-decoration: none;
                    }
                    
                    #entrar-usuario {
                        width: 100%;
                        align-content: center;
                        align-items: center;
                        text-align: center;
                        align-self: center;
                        margin-top: 15px;
                    }
                    
                    
                    a#entrar-registro.button {
                        width: 100%;
                        border: none;
                        border-radius: 1em;
                        background-color: #3493a9;
                        color: #ffffff;
                        align-content: center;
                        align-items: center;
                        text-align: center;
                        align-self: center;
                        font-size: 12px;
                        margin-top: 10px;
                        margin-bottom: 10px;
                        padding: 1em 3em 1em 3em;
                        font: 'Raleway', sans-serif;
                        text-decoration: none;
                    }
                   
                    a#entrar-registro.button:hover {
                        background: rgba(0, 0, 0, 0.3);
                        border-radius: 1em;
                    }
            
            }
            
            
            
            /*--Laptop 769-1024px--*/
                    
                @media screen and (min-width: 769px) {
            
                section.registro-section {
                        margin: auto;
                        margin-top: 4em;
                        align-content: center;
                        align-items: center;
                        align-self: center;
                        text-align: center;
                        padding-bottom: 0;
                    }
                    
                    #registroform {
                        width: 100%;
                        display: flex;
                        flex-direction: row;
                    }
                    
                    .bloque-registro {
                        display: flex;
                        width: 85%;
                        background-color: #b0eee3;
                        flex-direction: row;
                        border-radius: 3em;
                        align-content: center;
                        align-items: center;
                        align-self: center;
                        text-align: center;
                        margin: auto;
                        margin-top: 20px;
                        margin-bottom: 20px;
                        padding-top: 30px;
                        padding-bottom: 30px;
                        padding-left: 30px;
                        padding-right: 30px;

                    }
                    
                    .columna1registro, .columna2registro {
                        width: 50%;
                    }

                    #registrotexto {
                        align-content: center;
                        align-items: center;
                        align-self: center;
                        text-align: center;
                        padding-bottom: 5px;
                        font-size: 4em;
                        font-weight: bold;
                        margin-top; 3em;

                    }
                    
                    input[type=text]#input-text-registro, input[type=password]#input-text-registro  {
                        display: flex;
                        width: 65%;
                        align-content: center;
                        border: 2px solid black;
                        border-color: #3493a9;
                        background-color: #eaf9f4;
                        text-align: center;
                        font: 'Raleway', sans-serif;
                        font-family: 'Raleway', sans-serif;
                        border-radius: 1em;
                        align-items: center;
                        padding: 1em 3em 1em 3em;
                        margin: auto;
                        align-self: center
                        
                    }
                    
                    select#select-registro {
                        display: flex;
                        width: 91%;
                        background-color: #3493a9;
                        border-radius: 1em;
                        font: 'Raleway', sans-serif;
                        font-family: 'Raleway', sans-serif;
                        margin: auto;
                        padding: 1em 3em 1em 3em;
                        color: #ffffff;
                    }
                    
                    a#link-usuario {
                        color: #12466d;
                        font-weight: bold;
                        text-decoration: none;
                    }
                    
                    #entrar-usuario {
                        width: 100%;
                        align-content: center;
                        align-items: center;
                        text-align: center;
                        align-self: center;
                        margin-top: 15px;
                    }
                    
                    
                    a#entrar-registro.button {
                        width: 100%;
                        border: none;
                        border-radius: 1em;
                        background-color: #3493a9;
                        color: #ffffff;
                        align-content: center;
                        align-items: center;
                        text-align: center;
                        align-self: center;
                        font-size: 12px;
                        margin-top: 10px;
                        margin-bottom: 10px;
                        padding: 1em 3em 1em 3em;
                        font: 'Raleway', sans-serif;
                        text-decoration: none;
                    }
                   
                    a#entrar-registro.button:hover {
                        background: rgba(0, 0, 0, 0.3);
                        border-radius: 1em;
                    }
            
            }
            
            
            
            /*--Desktop 1025-1200px--*/
                    
                @media screen and (min-width: 1025px) {
                    
                    section.registro-section {
                        margin: auto;
                        margin-top: 4em;
                        align-content: center;
                        align-items: center;
                        align-self: center;
                        text-align: center;
                        padding-bottom: 0;
                    }
                    
                    #registroform {
                        width: 100%;
                        display: flex;
                        flex-direction: row;
                    }
                    
                    .bloque-registro {
                        display: flex;
                        width: 75%;
                        background-color: #b0eee3;
                        flex-direction: row;
                        border-radius: 3em;
                        align-content: center;
                        align-items: center;
                        align-self: center;
                        text-align: center;
                        margin: auto;
                        margin-top: 20px;
                        margin-bottom: 20px;
                        padding-top: 30px;
                        padding-bottom: 30px;
                        padding-left: 30px;
                        padding-right: 30px;

                    }
                    
                    .columna1registro, .columna2registro {
                        width: 50%;
                    }

                    #registrotexto {
                        align-content: center;
                        align-items: center;
                        align-self: center;
                        text-align: center;
                        padding-bottom: 5px;
                        font-size: 4em;
                        font-weight: bold;
                        margin-top; 3em;

                    }
                    
                    input[type=text]#input-text-registro, input[type=password]#input-text-registro  {
                        display: flex;
                        width: 75%;
                        align-content: center;
                        border: 2px solid black;
                        border-color: #3493a9;
                        background-color: #eaf9f4;
                        text-align: center;
                        font: 'Raleway', sans-serif;
                        border-radius: 1em;
                        align-items: center;
                        padding: 1em 3em 1em 3em;
                        margin: auto;
                        align-self: center
                        
                    }
                    
                    select#select-registro {
                        display: flex;
                        width: 91%;
                        background-color: #3493a9;
                        border-radius: 1em;
                        font: 'Raleway', sans-serif;
                        font-family: 'Raleway', sans-serif;
                        margin: auto;
                        padding: 1em 3em 1em 3em;
                    }
                    
                    a#link-usuario {
                        color: #12466d;
                        font-weight: bold;
                        text-decoration: none;
                    }
                    
                    #entrar-usuario {
                        width: 100%;
                        align-content: center;
                        align-items: center;
                        text-align: center;
                        align-self: center;
                        margin-top: 15px;
                    }
                    
                    
                    a#entrar-registro.button {
                        width: 100%;
                        border: none;
                        border-radius: 1em;
                        background-color: #3493a9;
                        color: #ffffff;
                        align-content: center;
                        align-items: center;
                        text-align: center;
                        align-self: center;
                        font-size: 12px;
                        margin-top: 10px;
                        margin-bottom: 10px;
                        padding: 1em 3em 1em 3em;
                        font: 'Raleway', sans-serif;
                        text-decoration: none;
                    }
                   
                    a#entrar-registro.button:hover {
                        background: rgba(0, 0, 0, 0.3);
                        border-radius: 1em;
                    }
            
        }
                    
                    
/*-----------------------------------------------------------------------------------------------------
-----------FIN REGISTRO----------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------*/
                    
/*-----------------------------------------------------------------------------------------------------
-----------USUARIO----------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------*/
                    
                     
                /*--Mobile first--*/
                    
                @media screen and (min-width: 320px) {
                
                    
                    .usuariobackground {
                    background-color: #b0eee3;
                    padding-top: 20px;
                    padding-bottom: 20px;
                    align-content: center;
                    align-items: center;
                    align-self: center;
                    text-align: center;
                }
                
                .usuariosection {
                    align-content: center;
                    align-items: center;
                    align-self: center;
                    text-align: center;
                }
                
                h4#h4-datosusuario {
                    font: 'Raleway', sans-serif;
                    font-size: 25px;
                    margin: auto;
                    text-align: center;
                    align-content: center;
                    justify-content: center;
                    align-items: center;
                    align-self: center;
                }
                
                
                h3#h3-nombreusuario {
                    font: 'Raleway', sans-serif;
                    font-size: 2.3em;
                    margin: auto;
                    margin-top: 0;
                }
                
                #file-fotousuario {
                    margin-top: 0;
                    margin-bottom: 0;
                    width: 150px;
                }
                    
                    #fotousuario-file {
                        margin: auto;
                        margin-bottom: 30px;
                        margin-top: 30px;
                        font: 'Raleway', sans-serif;
                        width: auto;
                        align-content: center;
                        align-items: center;
                        align-self: center;
                        text-align: center;
                    }
                            
                        .datosusuario {
                            display: flex;
                            align-content: center;
                            align-items: center;
                            align-self: center;
                            text-align: center;
                            width: 100%;
                            flex-direction: column;
                            flex-wrap: wrap;
                            grid-gap: 20px;
                            flex-shrink: 1;
                            flex-grow: 1;
                            margin: auto;
                        }
                
                        #datousuario-bloque {
                            display: block;
                            background-color: #eaf9f4;
                            width: 50%;
                            height: auto;
                            border-radius: 1em;
                            padding: 1em 3em 1em 3em;
                            box-shadow: 0px -2px 5px #9c9c9c;
                            align-content: center;
                            align-items: center;
                            text-align: center;
                            align-self: center;
                            flex-direction: column;
                            font-size: auto;
                        }
                
                    .botonesusuario {
                        display: flex;
                        flex-shrink: 1;
                        flex-grow: 1;
                        height: auto;
                        box-sizing: border-box;
                        align-content: center;
                        align-items: center;
                        align-self: center;
                        text-align: center;
                        flex-direction: column;
                        font-size: 1em;
                        font: 'Raleway', sans-serif;
                        padding: auto;
                        width: 100%;
                        margin: auto;
                        margin-top: 30px;
                        margin-bottom: 10px;
                        grid-gap: 15px;
                    }
                
                        a#botonusuario.button {
                            display: block;
                            width: 45%;
                            padding: 10px 15px;
                            margin: auto;
                            border: none;
                            align-items: center;
                            align-content: center;
                            align-self: center;
                            text-align: center;
                            border-radius: 1em;
                            font: 'Raleway';
                            font-size: 14px;
                            background-color: #3493a9;
                            color: #ffffff;
                            text-decoration: none;
                        }
                    
                     a#botonusuario.button:hover {
                    background: rgba(0, 0, 0, 0.3);
                        border-radius: 1em;
                    }
                }
                
                
                /*--Tablet 768px--*/
                    
                @media screen and (min-width: 481px) {
                 
                .usuariobackground {
                    background-color: #b0eee3;
                    padding-top: 20px;
                    padding-bottom: 20px;
                    align-content: center;
                    align-items: center;
                    align-self: center;
                    text-align: center;
                }
                
                .usuariosection {
                    align-content: center;
                    align-items: center;
                    align-self: center;
                    text-align: center;
                }
                
                h4#h4-datosusuario {
                    font: 'Raleway', sans-serif;
                    font-size: 25px;
                    margin: auto;
                    text-align: center;
                    align-content: center;
                    justify-content: center;
                    align-items: center;
                    align-self: center;
                }
                
                
                h3#h3-nombreusuario {
                    font: 'Raleway', sans-serif;
                    font-size: 2.7em;
                    margin: auto;
                    margin-top: 0;
                }
                
                #file-fotousuario {
                    margin-top: 1.5em;
                    margin-bottom: 0.5em;
                    width: 150px;
                }
                    
                    #fotousuario-file {
                        margin: auto;
                        margin-bottom: 30px;
                        margin-top: 30px;
                        font: 'Raleway', sans-serif;
                    }
                            
                        .datosusuario {
                            display: flex;
                            align-content: center;
                            align-items: center;
                            align-self: center;
                            text-align: center;
                            width: 90%;
                            flex-direction: column;
                            flex-wrap: wrap;
                            grid-gap: 20px;
                            flex-shrink: 1;
                            flex-grow: 1;
                            margin: auto;
                        }
                
                        #datousuario-bloque {
                            display: block;
                            background-color: #eaf9f4;
                            width: 75%;
                            height: auto;
                            border-radius: 1em;
                            padding: 1em 3em 1em 3em;
                            box-shadow: 0px -2px 5px #9c9c9c;
                            align-content: center;
                            align-items: center;
                            text-align: center;
                            align-self: center;
                            flex-direction: column;
                            font-size: auto;
                        }
                
                    .botonesusuario {
                        display: flex;
                        flex-shrink: 1;
                        flex-grow: 1;
                        height: auto;
                        box-sizing: border-box;
                        align-content: center;
                        align-items: center;
                        align-self: center;
                        text-align: center;
                        flex-direction: column;
                        font-size: 1em;
                        font: 'Raleway', sans-serif;
                        padding: auto;
                        width: 100%;
                        margin: auto;
                        margin-top: 30px;
                        margin-bottom: 10px;
                        grid-gap: 15px;
                    }
                
                        a#botonusuario.button {
                            display: block;
                            width: 45%;
                            padding: 10px 15px;
                            margin: auto;
                            border: none;
                            align-items: center;
                            align-content: center;
                            align-self: center;
                            text-align: center;
                            border-radius: 1em;
                            font: 'Raleway';
                            font-size: 14px;
                            background-color: #3493a9;
                            color: #ffffff;
                            text-decoration: none;
                        }
                
                a#botonusuario.button:hover {
                    background: rgba(0, 0, 0, 0.3);
                        border-radius: 1em;
                    }
                
            }
                
                
                /*--Laptop 769-1024px--*/
                    
                @media screen and (min-width: 769px) {
                
                .usuariobackground {
                    background-color: #b0eee3;
                    padding-top: 20px;
                    padding-bottom: 20px;
                }
                
                .usuariosection {
                    align-content: center;
                    align-items: center;
                    align-self: center;
                    text-align: center;
                }
                
                h4#h4-datosusuario {
                    font: 'Raleway', sans-serif;
                    font-size: 25px;
                    margin: 0.1em;
                }
                
                
                h3#h3-nombreusuario {
                    font: 'Raleway', sans-serif;
                    font-size: 5em;
                    margin: auto;
                    margin-top: 0;
                }
                
                #file-fotousuario {
                    margin-top: 2.5em;
                    margin-bottom: 1.5em;
                    width: 250px;
                }
                    
                    #fotousuario-file {
                        margin: auto;
                        margin-bottom: 30px;
                        font-family: 'Raleway', sans-serif;
                    }
                            
                        .datosusuario {
                            display: flex;
                            align-content: center;
                            align-items: center;
                            align-self: center;
                            text-align: center;
                            justify-content: center;
                            width: 90%;
                            flex-direction: row;
                            flex-wrap: wrap;
                            grid-gap: 20px;
                            flex-shrink: 1;
                            flex-grow: 1;
                            margin: auto;
                        }
                
                        #datousuario-bloque {
                            display: block;
                            background-color: #eaf9f4;
                            width: 20%;
                            height: auto;
                            border-radius: 1em;
                            padding: 1em 3em 1em 3em;
                            box-shadow: 0px -2px 5px #9c9c9c;
                            align-content: center;
                            align-items: center;
                            text-align: center;
                            flex-direction: row;
                            font-size: 2em;
                        }
                
                    .botonesusuario {
                        display: flex;
                        flex-shrink: 1;
                        flex-grow: 1;
                        height: auto;
                        box-sizing: border-box;
                        align-content: center;
                        align-items: center;
                        align-self: center;
                        text-align: center;
                        flex-direction: row;
                        font-size: 1em;
                        font: 'Raleway', sans-serif;
                        padding: auto;
                        width: 75%;
                        margin: auto;
                        margin-top: 30px;
                        margin-bottom: 30px;
                        grid-gap: 0;
                    }
                
                        a#botonusuario.button {
                            display: block;
                            width: 25%;
                            padding: 10px 15px;
                            margin: auto;
                            border: none;
                            align-items: center;
                            align-content: center;
                            align-self: center;
                            text-align: center;
                            border-radius: 1em;
                            font: 'Raleway';
                            font-size: 14px;
                            background-color: #3493a9;
                            color: #ffffff;
                            text-decoration: none;
                        }
                
                a#botonusuario.button:hover {
                    background: rgba(0, 0, 0, 0.3);
                        border-radius: 1em;
                    }
                
                
                }
                
                
                /*--Desktop 1025-1200px--*/
                    
                @media screen and (min-width: 1025px) {
                
                .usuariobackground {
                    background-color: #b0eee3;
                    padding-top: 20px;
                    padding-bottom: 20px;
                }
                
                .usuariosection {
                    align-content: center;
                    align-items: center;
                    align-self: center;
                    text-align: center;
                }
                
                h4#h4-datosusuario {
                    font: 'Raleway', sans-serif;
                    font-size: 25px;
                    margin: 0.1em;
                }
                
                
                h3#h3-nombreusuario {
                    font: 'Raleway', sans-serif;
                    font-size: 5em;
                    margin: auto;
                    margin-top: 0;
                }
                
                #fotousuario {
                    margin-top: 2.5em;
                    margin-bottom: 1.5em;
                }
                            
                        .datosusuario {
                            display: flex;
                            align-content: center;
                            align-items: center;
                            align-self: center;
                            text-align: center;
                            justify-content: center;
                            width: 90%;
                            flex-direction: row;
                            flex-wrap: wrap;
                            grid-gap: 20px;
                            flex-shrink: 1;
                            flex-grow: 1;
                            margin: auto;
                        }
                
                        #datousuario-bloque {
                            display: block;
                            background-color: #eaf9f4;
                            width: auto;
                            height: auto;
                            border-radius: 1em;
                            padding: 1em 3em 1em 3em;
                            box-shadow: 0px -2px 5px #9c9c9c;
                            align-content: center;
                            align-items: center;
                            text-align: center;
                            flex-direction: row;
                            font-size: 2em;
                        }
                
                    .botonesusuario {
                        display: flex;
                        flex-shrink: 1;
                        flex-grow: 1;
                        height: auto;
                        box-sizing: border-box;
                        align-content: center;
                        align-items: center;
                        align-self: center;
                        text-align: center;
                        flex-direction: row;
                        font-size: 1em;
                        font: 'Raleway', sans-serif;
                        padding: auto;
                        width: 60%;
                        margin: auto;
                        margin-top: 30px;
                        margin-bottom: 30px;
                        grid-gap: 0;
                    }
                
                        a#botonusuario.button {
                            display: block;
                            width: 25%;
                            padding: 10px 15px;
                            margin: auto;
                            border: none;
                            align-items: center;
                            align-content: center;
                            align-self: center;
                            text-align: center;
                            border-radius: 1em;
                            font: 'Raleway';
                            font-size: 14px;
                            background-color: #3493a9;
                            color: #ffffff;
                            text-decoration: none;
                        }
                
                a#botonusuario.button:hover {
                    background: rgba(0, 0, 0, 0.3);
                        border-radius: 1em;
                    }
                    
            }
                    
                    #libro {
                        display:flex;
                        flex-direction: column;
                        align-items: center;
                        margin-bottom: auto;
                        margin: 2em;
                        width: auto;
                        align-content: center;
                         
                    }
                    
              
                    }
                    
                    .botones{
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                
                    }
                    
                    .botoncito {
                        margin: 1em;
                        padding: 1em;
                        width: 70%;
                        border: none;
                        border-radius: 1em;
                        background-color: #3493a9;
                        color: #ffffff;
                        align-content: center;
                        align-items: center;
                        text-align: center;
                        align-self: center;
                        font-size: 12px;
                        margin-top: 10px;
                        margin-bottom: 10px;
                        padding: 1em 3em 1em 3em;
                        font: 'Raleway', sans-serif;
                        text-decoration: none;
                        
                    
                    }
/*-----------------------------------------------------------------------------------------------------
-----------FIN USUARIO----------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------*/