.main-section{
    margin:0 auto;
    margin-top: 40px;
    padding: 0;
    margin-bottom: 4%;
    width: 100%;
}

.modal-content{
    width: 35%;
    margin: auto;
    margin-top: 25px;
    background-color: #3b4652;
    opacity: .95;
    padding: 0 20px;
    box-shadow: 0px 0px 3px #848484;
}
.user-img{
    margin-top: -50px;
    margin-bottom: 35px;
}

.user-img img{
    width: 100xp;
    height: 100px;
    box-shadow: 0px 0px 3px #848484;
    border-radius: 50%;
}

.input-group input{
    height: 42px;
    font-size: 18px;
    border:0;
    border-radius: 5px;
    margin: 5px 0;
}

button{
    width: 50%;
}
.botones{
    margin: 20px 0;

}

.input-group i{
    font-size: 30px;
    color: white;
    margin-right: 5px;
    margin-top: 5px;
}

.row{
    background: url('../img/sit1.jpg');
    background-size: cover;
}
  
  /* 
    ##Dispositivo = Tablets de baja resolucion y telefnos Mobiles (horizontal)
    ##Resolucion = B/w 481px to 767px
  */
  
  @media (min-width: 560px) and (max-width: 810px) {
    .modal-content{
        width: 60%;
    }
    button{
        width: 40%;
    }
    .botones{
        margin: 15px 0;
        font-size: 16px;
    
    }
    
  }
  
  /* 
    ##Dispositivo = Mayoria de telefonos moviles (vertical)
    ##Resolucion = B/w 320px to 479px
  */
  
  @media (min-width: 400px) and (max-width: 559px) {
    .modal-content{
        width: 80%;
        margin-top: 20px;
    }
    button{
        width: 50%;
    }
    .botones{
        margin: 10px 0;
    }

    .botones a{
        font-size: 13px;
    }
    .botones button{
        font-size: 13px;
    }
    
  }

  @media(max-width: 399px) {
      .modal-content{
          width: 96%;
          margin-top: 20px;
          background-color: #97a7b8;
      }
      button{
        width: 50%;
    }
    .botones{
        margin: 10px 0;
    }

    .botones a{
        font-size: 12px;
    }
    .botones button{
        font-size: 12px;
    }
  }