:root{
      --negro: #141414;
      --gris: #f2f2f2;
      --blanco: #ffffff;
      --rojo: #E50914;
      --colorado: #d6121c;
      --verde: #11DA45;
      --naranja: #F8871D;
      --link: #3671ED;
      --gris-oscuro: #d1d1d1;
     }

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

body{
     background: var(--negro);
     font-family: 'Open Sans', sans-serif;
    }

a{
  text-decoration: none;
  font-weight: 400;
  font-size: 1rem;
}

.link{
      text-decoration: none;
      color: var(--link);
      font-weight: bold;
     }

.h2-frontend{
             width: 95%;
             font-weight: 600;
             font-size: 2.12em;
             margin-bottom: 0.4em;
             text-align: justify;
             margin-left: 5%;
             text-decoration: underline;
             float: left;
            }

.h2-frontend-secciones{
  width: 100%;
  font-weight: 600;
  font-size: 2.12em;
  margin-bottom: 0.4em;
  text-align: center;
  text-decoration: underline;
  float: left;
}

h3.h3-ayuda{
             width: 100%;
             height: auto;
             float: left;
             text-align: justify;
             margin-left: 5%;
             text-decoration: underline;
           }

.contenedor{
            width: 100%;
            height: auto;
            float: left;
            margin: auto;
           }

.contenedor-parrafos{
                      width: 80%;
                      float: left;
                      margin-left: 10%;
                      margin-right: 10%;
                      margin-top: 5%;
                      margin-bottom: 5%;
                      padding: 5px;
                      background: var(--blanco);
                      border-radius: 16px;
                    }

header{
       width: 100%;
       height: auto;
       float: left;
       padding: 30px 0px;
       background: var(--negro);
       border-bottom: 5px solid var(--colorado);
      }

header .contenedor{
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                  }

header .logotipo{
                 font-family: 'Bebas Neue', cursive;
                 font-weight: normal;
                 color: var(--rojo);
                 width: 30%;
                 height: auto;
                }

header .logotipo img{
                     width: auto;
                     height: 60px;
                     margin-left: 5%;
                     float: left;
                    }

header nav a{
            background: var(--colorado);
            color: var(--blanco);
            text-decoration: none;
            margin-right: 20px;
            line-height: normal;
            padding: 10px 20px;
            font-weight: bold;
            font-size: 1rem;
            float: right;
            text-transform: uppercase;
            border-radius: 0.31em;
            border: 1px solid var(--rojo);
            }

header nav a:hover{
                   background: var(--rojo);
                  }

/*------ Fondo libros------*/
.fondo-libros{
              width: 100%;
              height: auto;
              float: left;
              color: var(--blanco);
              font-size: 16px;
              min-height: 40.62em;
              background: linear-gradient(rgba(0, 0, 0, .50) 0%, rgba(0,0,0, .50) 100%), url("../img/fondo-libros.jpg");
              background-position: center center;
              background-size: cover;
              display: flex;
              align-items: end;
             }

.fondo-libros .contenedor{
                          margin-bottom: 15.25em;
                          margin-top: 6.25em;
                         }

.fondo-libros .titulo{
                      width: 85%;
                      font-weight: 600;
                      font-size: 2.50em;
                      margin-bottom: 0.9em;
                      text-align: right;
                      float: left;
                      margin-left: 100px;
                      margin-top: 100px;
                      align-items: center;
                      font-family: 'Carter One', cursive;
                     }

.fondo-libros .descripcion{
                           width: 70%;
                           margin-left: 30%;
                           margin-right: 0%;
                           font-weight: normal;
                           font-size: 1em;
                           margin-bottom: 0em;
                           float: left;
                           text-align: center;
                           align-items: center;
                          }

.fondo-libros .registro-index{
                              width: 63%;
                              height: auto;
                              margin-left: 37%;
                              margin-right: 0%;
                              padding: 10px;
                              float: left;
                              border:none;
                              display: block;
                              position: static;
                              align-items: center;
                             }

.fondo-libros .registro-index input[type='email']{
                                                   width: 65%;
                                                   height: auto;
                                                   padding: 0.93em 1.0em;
                                                   border:none;
                                                   font-size: 1.12em;
                                                   background-position: center center;
                                                   float: left;
                                                   display: block;
                                                  }

.fondo-libros .registro-index .boton{
                                     background: var(--colorado);
                                     color: var(--blanco);
                                     border:none;
                                     padding: 0.93em 1.0em;
                                     cursor: pointer;
                                     transition: .3s ease all;
                                     font-size: 1.12em;
                                    }

.fondo-libros .registro-index .boton:hover{
                                           background: var(--rojo);
                                          }


.fondo-libros .registro-index .boton img{
                                          float: right;
                                          display: block;
                                          margin-top: -2px;
                                          margin-left: 2px;
                                        }

.registro-referido{
                   width: 60%;
                   height: auto;
                   float: left;
                   margin-left: 20%;
                   margin-right: 20%;
                   line-height: normal;
                   background: linear-gradient(to bottom, var(--gris), white);
                   border-radius: 16px;
                   margin-top: 5%;
                   padding: 15px;
                   border: 1px solid var(--blanco);
                  }

.registro-referido img{
                       width: 10%;
                       height: auto;
                       float: left;
                       text-align: center;
                       align-items: center;
                       margin-left: 45%;
                      }

/*--Sección contenedor--*/
.seccion-contenedor{
                    width: 100%;
                    height: auto;
                    float: left;
                    color: var(--negro);
                    font-size: 16px;
                    min-height: 40.62em;
                    background-position: center center;
                    background-size: cover;
                    display: flex;
                    align-items: end;
                    background: linear-gradient(to bottom, var(--gris), white);
                   }

.seccion-contenedor .contenedor{

                               }

.seccion-contenedor .titulo-frontend{
                                     width: 100%;
                                     font-weight: 600;
                                     font-size: 3.12em;
                                     margin-bottom: 0.4em;
                                     text-align: center;
                                     font-family: 'Carter One', cursive;
                                    }

.seccion-contenedor .descripcion-frontend{
                                          width: 90%;
                                          font-weight: normal;
                                          font-size: 1em;
                                          margin-top: 1em;
                                          margin-left: 5%;
                                          margin-right: 5%;
                                          margin-bottom: 1em;
                                          text-align: justify;
                                          float: left;
                                          text-align-last: inherit;
                                         }

.seccion-contenedor .descripcion-frontend-contacto{
  width: 90%;
  font-weight: normal;
  font-size: 1em;
  margin-top: 1em;
  margin-left: 5%;
  margin-right: 5%;
  margin-bottom: 1em;
  text-align: center;
  float: left;
  text-align-last: inherit;
}

.registro{
          width: 40%;
          height: auto;
          margin-left: 30%;
          margin-right: 30%;
          float: left;
          margin-bottom: 5%;
         }

.registro input{
                width: 100%;
                height: 40px;
                border:none;
                padding: 15px;
                font-size: large;
                float: left;
                margin-bottom: 5px;
                border: 1px solid var(--gris-oscuro);
               }

.registro select{
                 width: 100%;
                 height: 40px;
                 border: none;
                 font-size: large;
                 float: left;
                 border: 1px solid var(--gris-oscuro);
                }

.registro select.soy{
                     width: 100%;
                     float: left;
                     margin-bottom: 5px;
                     border: 1px solid var(--gris-oscuro);
                     }

.registro label{
                width: 100%;
                background: var(--transparent);
                color: var(--negro);
                font-weight: bold;
                font-size: 13px;
                padding: 5px;
                float: left;
                display: block;
                text-align: left;
                border-top-left-radius: 5px;
                border-top-right-radius: 5px;
                margin-top: 10px;
               }

.registro label img{
                    float: left;
                    margin-top: -5px;
                    margin-left: 2px;
                    margin-right: 5px;
                   }

.registro .boton{
                 width: 100%;
                 height: auto;
                 background: var(--colorado);
                 color: var(--blanco);
                 border:none;
                 border-radius: 0.31em;
                 padding: 0.93em 1.87em;
                 margin-right: 1.25em;
                 cursor: pointer;
                 transition: .3s ease all;
                 font-size: 1.12em;
                 margin-top: 5px;
                 float: left;
                 border:1px solid var(--rojo);
                }

.registro .boton:hover{
                       background: var(--rojo);
                      }

/*Login*/
.login{
       width: 30%;
       height: auto;
       margin-left: 35%;
       margin-right: 35%;
       float: left;
      }

.login input.correo{
                    width: 100%;
                    height: 40px;
                    border:none;
                    padding: 15px;
                    font-size: large;
                    float: left;
                    margin-bottom: 5px;
                    border: 1px solid var(--gris-oscuro);
                   }

.login input.pass{
                  width: 90%;
                  height: 40px;
                  border:none;
                  padding: 15px;
                  font-size: large;
                  float: left;
                  margin-bottom: 5px;
                  border: 1px solid var(--gris-oscuro);
                 }

.ver-pass{
          width: 10%;
          height: 40px;
          align-items: center;
          background-color: #d1d1d1;
          color: #353535;
          border: none;
          display: block;
          position: static;
          float: right;
         }

.ver-pass:hover{
                cursor: pointer;
               }

.login .boton{
              width: 100%;
              background: var(--colorado);
              color: var(--blanco);
              border:none;
              border-radius: 0.31em;
              padding: 0.93em 1.87em;
              margin-right: 1.25em;
              cursor: pointer;
              transition: .3s ease all;
              font-size: 1.12em;
              margin-top: 5px;
              float: left;
              border:1px solid var(--rojo);
             }

.login .boton:hover{
                    background: var(--rojo);
                   }

/*Mensajes*/
.mensaje-error{
               width: 90%;
               height:auto;
               margin-left: 5%;
               margin-right: 5%;
              padding: 10px;
               color: var(--blanco);
               font-size: 1.00em;
               text-align: center;
               float: left;
               position:static;
               font-weight: bold;
               display: block;
               border: solid 2px var(--negro);
              }

.mensaje-error p{
                 width: 100%;
                 text-align: center;
                 float: left;
                 color: var(--negro);
                 background: var(--blanco);
                }

.mensaje-error p img{
                      float: left;
                    }

.mensaje-error img.img-1{
                     float: left;
                     margin-left: 10%;
                     margin-right: 1%;
                    }

.mensaje-error img.img-2{
                     margin-left: 1%;
                     margin-right: 1%;
                    }

.mensaje-exitoso{
                 width: 90%;
                 height:auto;
                 margin-left: 5%;
                 margin-right: 5%;
                 padding: 10px;
                 float: left;
                 background: var(--blanco);
                 color: var(--negro);
                 font-size: 1.80em;
                 text-align: center;
                 font-weight: bold;
                 position: static;
                 display: block;
                 border: solid 2px var(--negro);
                }

.mensaje-exitoso img{
                     width: 30px;
                     height: 30px;
                     margin: 5px auto;
                     float: left;
                    }

.mensaje-advertencia{
                     width: 60%;
                     height:auto;
                     margin-left: 20%;
                     margin-right: 20%;
                     padding: 10px;
                     float: left;
                     background: var(--naranja);
                     color: var(--blanco);
                     font-size: 1.00em;
                     text-align: center;
                     position: static;
                     display: block;
                     border: solid 2px var(--negro);
                    }

.mensaje-advertencia img{
  padding: 1px;
  float: left;
}

.regresar{
          width: 60%;
          height:auto;
          margin-left: 20%;
          margin-right: 20%;
          float: left;
          text-align: center;
          margin-top: 20px;
          font-size: 1.00em;
          font-weight: bold;
         }

.seccion-respuesta{
                    width: 100%;
                    height: auto;
                    float: left;
                    margin-top: 1%;
                    margin-bottom: 1%;
                  }

/*---Footer---*/
footer{
       width: 100%;
       height: auto;
       float: left;
       border-top: 5px solid var(--rojo);
       padding: 20px;
       background: var(--negro);
      }


footer nav a{
              width: 12.5%;
              float: left;
             color: var(--blanco);
             text-align: center;
             text-decoration: none;
             line-height: normal;
             padding: 7px 17px;
             font-weight: 600;
             font-size: 1em;
            }

footer nav a:hover{
                   color: var(--colorado);
                   cursor: pointer;
                   border-radius: 40px;
                   text-decoration: underline;
                  }

footer p{
         width: 100%;
         color: var(--blanco);
         text-decoration: none;
         line-height: normal;
         font-size: 13px;
         font-weight: bold;
         float: left;
         padding: 5px;
         margin-top: 3%;
         text-align: center;
        }

/*--Media Queries--*/

@media screen and (max-width: 1200px){
header .logotipo{
                width: 60%;
                margin-left: 00%;
                margin-right: 20%;
                 margin-bottom: 10px;
                }

header .logotipo img{
                     width: auto;
                     height: 50px;
                    }

header .contenedor{
                    width: 100%;
                    height: auto;
                    float: left;
                   flex-direction: column;
                   text-align: center;
                  }

.fondo-libros{
              font-size: 14px;
              margin-bottom: 1.12em;
             }

.fondo-libros .titulo{
                      width: 100%;
                      font-size: 2.00em;
                      text-align: center;
                      font-weight: 600;
                      margin-bottom: 0.9em;
                      text-align: center;
                      margin-left: 0px;
                      float: left;
                      margin-top: 50px;
                      align-items: center;
                      font-family: 'Carter One', cursive;
                     }

.fondo-libros .descripcion{
                           width: 80%;
                           max-width: 80%;
                           margin-left: 10%;
                           margin-right: 10%;
                           text-align: left;
                           font-size: 1.10em;
                          }

.fondo-libros .registro-index{
                              width: 80%;
                              margin-left: 10%;
                              margin-right: 10%;
                             }

.fondo-libros .registro-index input[type='email']{
                                                  width: 100%;
                                                  }
.fondo-libros .registro-index .boton{
                                     width: 100%;
                                     margin-top: 5px;
                                    }

.registro{
          width: 100%;
          margin-left: 0%;
          margin-right: 0%;
         }

.login{
       width: 80%;
       margin-left: 10%;
       margin-right: 10%;
      }

.seccion-contenedor .titulo-frontend{
                                     width: 100%;
                                     font-weight: 600;
                                     font-size: 2em;
                                     margin-bottom: 0px;
                                    }

.registro .boton{
                 font-size: 0.8em;
                }

.login .boton{
              font-size: 0.8em;
             }

.seccion-contenedor{
                    margin-bottom: 0px;
                   }

footer nav a{
             font-size: 13px;
             padding: 7px 1px;
            }
}

@media screen and (max-width: 780px){
.h2-frontend{
             font-size: 1.0em;
            }

.contenedor-parrafos{
  width: 90%;
  margin-left: 5%;
  margin-right: 5%;
}

.link{
      font-size: 13px;
     }

.seccion-contenedor .descripcion-frontend{
                                          font-size: 13px;
                                         }

.mensaje-exitoso{
                 width: 100%;
                 margin-left: 0%;
                 margin-right: 0%;
                }

.mensaje-advertencia{
                     width: 100%;
                     margin-left: 0%;
                     margin-right: 0%;
                    }

.mensaje-error{
               width: 100%;
               margin-left: 0%;
               margin-right: 0%;
              }

.registro-referido img{
                        width: 20%;
                        margin-left: 40%;
                      }

footer nav a{
   width: 50%;
}

}

.no-hay-notificaciones{
 width: 100%;
 text-align: center;
 padding: 5px;
}

.h-captcha{
  width: 80%;
  margin-left: 10%;
  margin-right: 10%;
  margin-top: 1%;
  margin-bottom: 1%;
  float: left;
  display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column-reverse;
}