@import '../fuentes/stylesheet.css';

.login-page::before{
    content: "";
    position: absolute;
    
    left: 0;
    top: 0;
    width:30%;
    height:100%;
    background: #EEEEEE;
  }

  .login-page .cohete{
    display: inline-block;
    position: absolute;
    bottom: 0;
    right: 0;
    max-width: 100%;
    max-height: 100%;
    margin-right: -160px;
    margin-top: 40px;
  }
  .login-page .titulos{
    text-align: left;
    position: absolute;
    width: 30%;
    height: 100%;
    top: 0;
    left: 0;
    padding: 30px;
    padding-bottom: 0;
    display: flex;
    justify-content:left;
    align-items: flex-start;
  }
  .login-page .formulario{
    text-align: right;
    position: absolute;
    width: 70%;
    height: 100%;
    top: 0;
    right: 0;
    padding: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .login-page .titulos h1{
    font-family: 'gotham';
    margin:0;
    color: #29417f;
    font-weight: 700;
    font-size: 25px;
  }
  .login-page .titulos h2{
    font-family: 'gotham';
    margin:0;
    color: #29417f;
    
  }

  .login-page .titulos h3{
    color: #e97922;
    font-family: 'gotham';
    font-weight: bold;
    font-size: 40px;
    margin:0;
  }
  .login-page .formulario form{
    display: inline-block;
    font-family: 'gotham';
    width: 400px;
    text-align: left;
    font-size: 17px;
    
  }
  .login-page .formulario h2{
    font-family: 'gotham';
    font-weight: bold;
    margin-top: 30px;
    margin-bottom: 30px;
  }
  .login-page .formulario label{
    font-weight: 300;
    color: #29417f;
  }

  .login-page .formulario .form-control{
    padding: 20px;
    font-size: 16px;
    font-family: 'gotham';
    font-weight: 300;
    border-radius: 5em;
  }
  .login-page .formulario a{
    color: #666;
  }

  .login-page .btn-naranja{
    background: #e97922;
    color: #FFF;
    padding: 10px;
    border-radius: 5em;
    padding-right: 20px;
    padding-left: 20px;
    font-size: 18px;
  }

  .login-page .formulario a.enlace-naranja{
    color: #e97922;
  }

@media (max-width: 1300px) {
    .login-page .titulos,.login-page::before{
        width: 40%;
    }
    .login-page .formulario{
        width: 60%;
    }
    .login-page .cohete{
        right: auto;
        left: 0;
        margin-right: 0;
    }
}
@media (max-width: 700px) {
    .login-page .titulos,.login-page::before{
        display: none;
    }
    .login-page .formulario{
        width: 100%;
    }

}
@media (max-width: 500px) {
    .login-page .formulario form{
        width: 300px;
    }
}