@import url(fonts/fontello-google/css/fontello-main-google.css);
@import url(fonts/Jumper/stylesheet.css);
@import url(fonts/KG-Happy/stylesheet.css);
@import url(fonts/fontello-user&key/css/fontello-main-user&key.css);
@import url(fonts/fontello-user/css/fontello-user.css);

*,*::after,*::before{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
}
*:visited{
    color: inherit;
}
body{
    background-image: url(images/lgn-bg-3-1400-900.jpg);
    width: 1400px;
    height: 800px;
}

/* =========================================== BODY END ============================== */

.backer-div{
    width: 421px;
    height: 281px;
    background-color: darkred;
    border: 2px solid darkorange;
    position: relative;
    left: 501px;
    top: 260px;
    text-align: left;
}
img{
    width: 200px;
    height: 270px;
    margin-left: 5px;
    margin-top: 5px;
}
.login-box{
    width: 200px;
    height: 277px;
    float: right;
    background-color: white;
    text-align: center;
    /* line-height: 277px; */
}
h1{
    /* font-size: 30px; */
    font-family: jumper;
    margin-top: 5px;
}
.l-user{
    text-align: left;
}
.f-a-1::before{
    content: '\e800  ';
    font-family: fontello-user;
    /* border-bottom: 2px solid darkred; */
}
.f-a-2::before{
    content: '\2d  ';
    font-family: fontello-keyNuser;
    /* border-bottom: 2px solid darkred; */
}
.username{
    border: none;
    border-bottom: 2px solid darkred;
    vertical-align: top;
    height: 20px;
}
.username:focus{
    background-color: lightslategrey;
    color: whitesmoke;
}

/* ================================================ BOXES END ================================ */


#remember-me{
    cursor: pointer;
}
.r-me{
    font-family: kg-happy;
}

button{
    border-radius: 30%;
    background-color: skyblue;
    padding: 2px;
    /* font-size: 10px; */
    cursor: pointer;
}
button:hover{
    border-color: red;
}
button:active{
    background-color: darkred;
    border-color: red;
}

















.or-hr{
    width: 200px;
    height: auto;
    text-align: center;
    /* vertical-align: middle; */
    margin-bottom: 5px;
}
.p-or{
    display: inline-block;
    font-size: 10px;
    vertical-align: text-bottom;
    color: rgba(128, 128, 128, 0.7);
}
.hr-left{
    display: inline-block;
    width: 80.4px;
    height: 2px;
    border: 1px solid rgba(128, 128, 128, 0.5);
    background-color: rgba(128, 128, 128, 0.5);
    border-radius: 50%;
}
.hr-right{
    display: inline-block;
    width: 80.4px;
    height: 2px;
    border: 1px solid rgba(128, 128, 128, 0.5);
    background-color: rgba(128, 128, 128, 0.5);
    border-radius: 50%;
}
.g-sign{
    color: blue;
}
.g-sign:hover{
    color: green;
}
.g-sign::before,.g-sign::after{
    content: ' \f1a0  ';
    font-family: fontello-google;
}

.last-line{
    font-size: 15px;
}
.cat{
    color: darkorange;
    font-size: 20px;
}
.here{
    font-size: 20px;
    color: red;
    text-decoration: underline;
    cursor: pointer;
}