*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
 font-size: 62.5%;
background: url(../Photos/san_francisco_bridge_hd_wallpaper.jpg) no-repeat fixed;
/*background: linear-gradient(116deg,#1b2566,#a899d2);*/
padding:20px;
height:917px;
background-size:cover;

}
.main-container{
  margin:0 auto;
  max-width:800px;
  
   
}
.main-login-con {
    margin-top:50px;
    border-radius:5px;
    height:335px;
    background:rgba(234,234,234,0.4);
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.2);
}
.login-aside{
   /*padding-top:100px;*/ 
    
}

.login-container{
  border: 1px solid rgba(225,225,225,0.7);
  box-shadow: 0 5px 10px 0 rgba(0,0,0,0.15), 0 0 2px 0 rgba(0,0,0,0.2);
  border-radius: 5px;
  background-color:rgba(0,0,0,0.5);
  transform:scale(1, 1.15);
  margin:0;
  padding:25px 25px 80px 25px;
  transition-property:transform, padding, margin, position, background, display, max-width;
  transition-duration:0.7s;
}
.logo{
    font-weight:bold;
    font-style:italic;
    color:white;
    font-family: 'Antic', sans-serif;
    margin-top:20px;
    font-size:30px;
}
.logo-loginA, .logo-loginB, .logo-loginM{
    font-family: 'Antic', sans-serif;
    font-size:15px;
    padding:5px 10px;
    border-radius:3px;
    color:white;
    margin:20px 0;
    cursor:pointer;
    font-weight:bolder;
}
/*.logo-loginA{
    background: #1b2566;
}
.logo-loginB{
     background: #8d96d0;
}
.logo-loginM{
     background: #265d86;
}*/
.form-head{
    display:block;
    font-family: 'Antic', sans-serif;
    padding:5px;
    margin:0px;
    font-size:20px;
    color:white;
}
.form-head-p{
    display:block;
    font-family: 'Antic', sans-serif;
    padding:5px;
    margin:0;
    font-size:15px;
    color:white;
}
.label{
    font-family: 'Antic', sans-serif;
    color:white;
    display:block;
    font-size:15px;
    text-align:left;
    padding:5px;
    width:150px;
}
.userid, .password{
  font-family: 'Antic', sans-serif;
   font-size: 15px;
  color: #58666e;
  display: block;
  padding: 5px;
  border: 1px solid gray;
  border-radius: 3px;
  width: 97%;
  margin:5px;
 
  background-color: white;

}
.userid::-webkit-input-placeholder, .password::-webkit-input-placeholder{
  color:#58666e;
  font-family: 'Antic', sans-serif;
}
.submit{
  font-family: 'Antic', sans-serif;
  font-size: 15px;
  color:white;
  display: block;
  padding: 5px 20px;
  border: 1px solid rgba(225,225,225,0.7);
  border-radius: 2px;
  margin: 20px auto;
  width: 120px;
  background-color: #286772;
  text-align:center;
}
.submit:hover{
    color:white;
    text-decoration:none;

}
.userid:hover, .password:hover, .userid:focus, .password:focus{
   border: 1px solid #7266ba;
  border-radius: 5px;
  outline: none;
}
.login-err-msz{
    color:red;
    text-align:center;
    font-size:15px;
    padding-bottom:10px;
}
@media only screen and (max-width: 900px) {
    .logo {
        font-size:30px;
    }
   
}
@media only screen and (max-width: 767px) {
    .login-container{
        max-width:350px;
        margin:0 auto;
    }
   
}
@media only screen and (max-width: 420px) {
    .userid, .password{
        width: 96%;
    }
    .main-login-con{
       
    }
   
}
@media only screen and (max-width: 400px) {
    .userid, .password{
        width: 96%;
    }
    
}
@media only screen and (max-width: 350px) {
    .userid, .password{
        width: 96%;
        margin:5px;
    }
    .label{
        padding:5px;
    }
   
}