@font-face {
    font-family: 'Poppins-Regular';
    src: url('../fonts/Poppins-Regular.eot');
    src: url('../fonts/Poppins-Regular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Poppins-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body, html{
  margin:0;
  height:100%;
  font-family: 'Poppins-Regular';
}
.top{
    height: 40px;
    background: #896937;
}
.header{
    margin-bottom: 25px;
}
.footer{
    background: #896937;
    height: 40px;
    text-align: center;
    color: #fff;
    line-height: 40px;
    bottom: 0;
    position: absolute;
    width: 100%;
    font-size: .8em;
}
.footer p{
    margin:0;
}
.container{
    position: absolute;
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    border: 1px solid #cacaca;
    -webkit-box-shadow: 3px 3px 5px 0px #c1c1c1;
    box-shadow: 3px 3px 5px 0px #c1c1c1;
}
h4{
    font-size: 25px;
    letter-spacing: 2px;
}
.user i, .pass i{
    font-size: 20px;
    color: #896937;    
}
.user input, .pass input{
    width: 90%;
    height: 30px;
    border: 1px solid #e8e8e8;
    margin-left: 10px;
    padding-left: 10px;
    font-family: 'Poppins-Regular';
    color: #393939;
    border-left: 4px solid #F5CA7C;
    font-size: 14px;
}
.user, .pass{
    margin-bottom: 10px;
}
.user:hover i, .pass:hover i{
    color:#bc9658;
}
.pass .fa-eye{
    position: absolute;
    right: 30px;
    cursor: pointer;
    padding: 7px 10px;    
}
#btn_login{
    background: rgb(245,202,124);
    background: linear-gradient(180deg, rgba(245,202,124,1) 0%, rgba(235,193,119,1) 50%, rgba(201,165,100,1) 100%);
    font-weight: bold;
    border: none;
    padding: 10px 40px;
    float: right;
    color: #73603f;
    letter-spacing: 1px;
    font-family: 'Poppins-Regular';
    font-size: 15px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    margin-right: 5px;
}  
#btn_login:hover{
    background: rgb(245,202,124);
    background: linear-gradient(360deg, rgba(245,202,124,1) 0%, rgba(235,193,119,1) 50%, rgba(201,165,100,1) 100%);   
}
input:focus{
    background: #f0f0f0;
    outline: none;
}
button:focus{
    outline: #896937;    
}
.cf-turnstile{
    width: 93%;
    float: right;
    padding: 0 5px;
}
/**************************RESPONSIVO*************************************/
@media screen and (max-width: 736px) {
 .logo-img img{
     width:100%;
 } 
 .container{
     width:80%;
 }
 .user input, .pass input{
     width:85%;
 }
 .pass .fa-eye{
     right:55px;
 }
}
@media screen and (max-width: 500px) {
    .user input, .pass input{
         width:80%;
     }
}