body {
          font-family: "Helvetica", sans-serif;
      }



      .main-head{
          height: 150px;
          background: #FFF;
         
      }

      .sidenav {
          height: 100%;
          background-color: #041E41;
          overflow-x: hidden;
          padding-top: 20px;
      }


      .main {
          padding: 0px 10px;
      }

      .texto-ingreso{
        text-align: center;
        text-transform: uppercase;
        padding-bottom: 2rem;
      }

      .texto-ingreso h5{
        font-weight: 200;
        font-size: 32px;
        font-family: "Helvetica", sans-serif;
      }

      .btn-negro-ingresar-align{
        text-align: center;
        padding-bottom: 1rem;
      }
      .btn-negro-ingresar{
        text-decoration: none ;
        padding: 10px 35% 10px 35%;
        font-weight: 100;
        font-size: 20px;
        color: #ffffff;
        background-color: #041E41;
        
        border: 1px solid #041E41;
        transition: all 0.5s;
      }
      .btn-negro-ingresar:hover{
        text-decoration: none ;
        color: #fff;
        background-color: #0083CB;
        border: 1px solid #0083CB;
        transition: all 0.5s;
      }

      .btn-gris-registrar-align{
        text-align: center;
      }
      .btn-gris-registrar{
        text-decoration: none !important;
        padding: 10px 35% 10px 35%;
        font-weight: 100;
        font-size: 20px;
        color: #ffffff;
        background-color: #343a40;
        
        border: 1px solid #343a40;
        transition: all 0.5s;
      }
      .btn-gris-registrar:hover{
        text-decoration: none !important;
        color: #fff;
        background-color: #6c757d;
        border: 1px solid #6c757d;
        transition: all 0.5s;
      }

      a:hover{
        
        color:#000;
        cursor: pointer;
      }
      

      @media screen and (max-height: 450px) {
          .sidenav {padding-top: 15px;}
      }

      @media screen and (max-width: 450px) {
          .login-form{
              margin-top: 10%;
          }

          .register-form{
              margin-top: 10%;
          }
      }



      @media screen and (min-width: 768px){
          .main{
            margin-left: 45%;
            margin-right: 15%; 
          }

          .sidenav{
            overflow: hidden;
              width: 30%;
              position: fixed;
              z-index: 1;
              top: 0;
              left: 0;
          }

          .login-form{
              margin-top: -5%;
          }

          .register-form{
              margin-top: 20%;
          }

          .img-log-responsive{
            visibility: hidden;
          }
          

          
      }

      @media screen and (max-width: 766px){
          .main{
              margin-left: 0%; 
          }

          .sidenav{
              display: none;
          }

          .login-form{
              margin-top: 35%;
          }

          .register-form{
              margin-top: 20%;
          }

      }
      @media screen and (max-width: 425px){
          .main{
              margin-left: 0%; 
          }

          .sidenav{
              display: none;
          }

          .login-form{
              margin-top: 15%;
          }

          .register-form{
              margin-top: 20%;
          }

          .texto-ingreso h5{
            font-weight: 200;
            font-size: 20px;
            font-family: "Helvetica", sans-serif;
          }
      }
      @media screen and (max-width: 375px){
          .main{
              margin-left: 0%; 
          }

          .sidenav{
              display: none;
          }

          .login-form{
              margin-top: 15%;
          }

          .register-form{
              margin-top: 20%;
          }

          .texto-ingreso h5{
            font-weight: 200;
            font-size: 20px;
            font-family: "Helvetica", sans-serif;
          }

          .btn-negro-ingresar-align{
            text-align: center;
            padding-bottom: 1rem;
            margin-left: -5px;
            margin-right: -5px;
          }

          .btn-negro-ingresar{
              text-decoration: none ;
              padding: 10px 35% 10px 35%;
              font-weight: 100;
              font-size: 18px;
              color: #ffffff;
              background-color: #041E41;
              
              border: 1px solid #041E41;
              transition: all 0.5s;
            }

          .btn-gris-registrar-align{
            text-align: center;
            margin-right: 24px;
          }
          .btn-gris-registrar{
            text-decoration: none !important;
            padding: 10px 35% 10px 35%;
            font-weight: 100;
            font-size: 18px;
            color: #ffffff;
            background-color: #343a40;
            
            border: 1px solid #343a40;
            transition: all 0.5s;
          }
      }
      @media screen and (max-width: 320px){
          .main{
              margin-left: 0%; 
          }

          .sidenav{
              display: none;
          }

          .login-form{
              margin-top: 40%;
          }

          .register-form{
              margin-top: 20%;
          }

          .btn-negro-ingresar{
              text-decoration: none ;
              padding: 10px 35% 10px 35%;
              font-weight: 100;
              font-size: 20px;
              color: #ffffff;
              background-color: #041E41;
              
              border: 1px solid #041E41;
              transition: all 0.5s;
            }

          
      }


      .login-main-text{
        bottom: 0;
        padding: 60px 60px 5px;
        color: #fff;
        margin-top: 166%;
      }

      .login-main-text p{
          font-size: 12px
      }
      .img-logo{
        margin-top: -304%;
      }

      .btn-black{
          background-color: #000 !important;
          color: #fff;
      }


      /*Mostrar contraseña*/
        .position-relative{
          position: relative !important;
        }
        .show-password{
          position: absolute;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 22px;
            cursor: pointer;
        }
/*Termina mostrar contraseña*/