/*
Template Name: impressive-login
File Name: style.css
Author Name: ThemeVault
Author URI: http://www.themevault.net/
Licence URI: http://www.themevault.net/license/
*/

html {
    margin: 0;
    padding: 0;
}
body {
    font-family: 'PT Sans', sans-serif !important;
    margin: 0;
    padding: 100px 0;
    color: #000;
    font-size:100%;
    letter-spacing: 1px;
}
.content{
    background: rgba(0, 0, 0, 0) url("../images/bg_banner.jpg") no-repeat fixed center center / cover;
    text-align: center;
}
a, a:focus, a:hover{
    text-decoration: none !important;
    color:#fff !important;
}
.placeholder-fix:focus::-webkit-input-placeholder  {color:transparent !important; }
.placeholder-fix:focus::-moz-placeholder   {color:transparent !important;}
.placeholder-fix:-moz-placeholder   {color:transparent !important;}
.loginpage {
    margin: 0 auto;
}
.loginpage .form-control{
    width:100%;
}
.logo img {
    width: 100%;
    margin: auto;
    max-width: 350px;
    padding: 60px;
}
.logo h2 {
    color: #fff;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 2px;
    margin: 0;
    text-transform: uppercase;
    padding-bottom: 60px;
}
.loginpage input:first-child{
    background: url(../images/user.png);
    background-repeat: no-repeat;
    background-position: right center;
    background-origin: content-box;
    background-color: rgba(255, 255, 255, 0.5);
    border: medium none;
    height: 60px;
    margin: 0 0 5px;
    width: 100%;
    color: #403055;
    font-weight: 600;
    border-radius: 5px 5px 0 0;
}
.loginpage input:last-child{
    background: url(../images/lock.png);
    background-repeat: no-repeat;
    background-position: right center;
    background-origin: content-box;
    background-color: rgba(255, 255, 255, 0.5);
    border: medium none;
    height: 60px;
    margin: 0 0 5px;
    width: 100%;
    color: #403055;
    font-weight: 600;
    border-radius: 0 0 5px 5px;
}
.form-control::-moz-placeholder {
    color: #403055 !important;
    font-weight: 600;
    letter-spacing: 1px;
}
.form-control::-webkit-input-placeholder{
    color: #403055 !important; 
    font-weight: 600;
    letter-spacing: 1px;    
}
.form-control:focus {
    border-color: transparent;
    box-shadow: none!important;
    outline: 0 none;
}
.action-button .btn-block {
    background-color: rgb(98, 116, 137);
    border: medium none;
    color: #f6f6f5;
    font-size: 20px;
    font-weight: 600;
    height: 60px;
    margin-top: 15px;
    border-radius: 5px;
    width: 100%;
}
.page-links {
    padding: 0;
    text-align: center;
    padding: 30px 0;
}
.page-links li{
    display: inline-block;
}
.page-links a {
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    margin-right: 50px;
} 
.social-button {
    text-align: center;
}
.social-button > a {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    margin-right: 20px;
    padding: 12px 39px;
    border-radius: 4px;
}
.social-button a:first-child{
    background-color: rgba(56,83,141,0.6);
}
.social-button a:last-child{
    background-color: rgba(214,34,33,0.6);
    margin-right: 0px;
}
.social-button img {
    vertical-align: middle;
    margin-right: 10px;
}
.copyright {
    color: #fff;
    font-size: 16px;
    margin-top: 50px;
}
.copyright a, .copyright a:hover{
    color:rgb(182, 8, 45);
    text-decoration: none;
}
/*media query*/
@media (max-width: 1199px){
    .social-button > a {
        padding: 12px 22px;
    } 
    .page-links a {
        margin-right: 40px;
    }
}
@media (max-width: 991px){
    .social-button > a {
        padding: 12px 35px;
    }  
}
@media (max-width: 767px){
    body {
        padding: 50px 0;
    }
    .logo h2 {
        padding-bottom: 40px;
    }
    .loginpage input:first-child, .loginpage input:last-child, .action-button .btn-block{
        height: 45px;
    }
    .social-button > a {
        padding: 10px 21px;
    }
}
@media (max-width: 500px){
    .width-100{
        width:100% !important;
        margin: 0 !important;
    }
}