@import url(fonts/fontello-mail/css/fontello-main-email.css);
@import url(fonts/fontello-right-arrows/css/fontello-main-right-arrows.css);
@import url(fonts/fontello-blink-face/css/fontell-main-blink-face.css);
@import url(fonts/fontello-user/css/fontello-main-user.css);
@import url(fonts/fontello-user&key/css/fontello-main-user&key.css);
@import url(fonts/fontello-cake/css/fontello-main-cake.css);
@import url(fonts/fontello-phone/css/fontello-main-phone.css);
@import url(fonts/fontello-man-woman/css/fontello-main-woman-man.css);

/* ======================================================= FONTS END =========================================== */

*,*::after,*::before{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
}
*:visited,a:link,a:any-link{
    color: inherit;
}

body{
    background: rgb(8,217,214);
    background: -moz-linear-gradient(45deg, rgba(8,217,214,1) 0%, rgba(37,42,52,1) 50%);
    background: -webkit-linear-gradient(45deg, rgba(8,217,214,1) 0%, rgba(37,42,52,1) 50%);
    background: linear-gradient(45deg, rgba(8,217,214,1) 0%, rgba(37,42,52,1) 50%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#08d9d6",endColorstr="#252a34",GradientType=1);
    width: 1400px;
    height: 800px;
}

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

.backer-div{
    width: 500px;
    height: 700px;
    background-color: darkred;
    border: 2px solid darkorange;
    /* border-radius: 5px; */
    position: relative;
    left: 450px;
    top: 50px;
    /* text-align: right; */
    /* line-height: 700px; */
}
img{
    width: 200px;
    height: 200px;
    /* margin-left: 5px; */
    /* margin-top: 5px; */
    position: absolute;
    bottom: 0px;
    right: 0px;
}

.r-b-box{
    text-align: center;
    width: 200px ;
    height: 500px;
    position: absolute;
    top: 0;
    right: 0px;
}
.r-b-h3{
    color: whitesmoke;
    font-size: 40px;
    margin: 20px auto 20px auto;
}
.r-b-p-1{
    color: darkorange;
    font-size: 30px;
    margin-bottom: 20px;
}
.r-b-p-1::after{
    content: '\e813';
    font-family: fontello-blink-face;
    color: darkslateblue;
}
.r-b-p-2{
    margin: auto 15px auto 15px;
    font-size: 20px;
}

/* ===================================================== RIGHT BOX END ================================================================== */

.left-box{
    width: 300px;
    height: 696px;
    background-color: #EAEAEA;
    text-align: center !important;
    /* line-height: 277px; */
    position: absolute;
    top: 0;
}
.s-w-g-b{
    width: 260px;
    height: 40px;
    background-color: steelblue;
    margin: 10px 20px 10px 20px;
    position: relative;
    border: 0.5px solid turquoise;
    border-radius: 20px;
}
.s-w-g-img-b {
    width: 40px;
    height: 40px;
    /* background-color: darkred; */
}
.s-w-g-img{
    width: 35px;
    height: 30px;
    position: absolute;
    left: 5px;
    top: 5px;
}
.s-w-g-p{
    width: 220px;
    height: 30px;
    text-align: center;
    position: absolute;
    right: 0px;
    top: 0px;
    line-height: 40px;
    font-size: 25px;
}
.s-w-g-p>a{
    color: blanchedalmond;
}
.s-w-g-p>a:visited{
    color: blanchedalmond;
}

/* ======================================================= SIGN with GOOGLE END ========================================= */

.or-hr{
    width: 300px;
    height: auto;
    text-align: center;
    /* vertical-align: middle; */
}
.p-or{
    display: inline-block;
    font-size: 15px;
    vertical-align: text-bottom;
    color: rgba(128, 128, 128, 0.7);
}
.hr-left{
    display: inline-block;
    width: 135px;
    height: 3px;
    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: 135px;
    height: 3px;
    border: 1px solid rgba(128, 128, 128, 0.5);
    background-color: rgba(128, 128, 128, 0.5);
    border-radius: 50%;
}

/* ================================================= OR HR END ========================================================= */

.name-box{
    width: 270px;
    height: auto;
    /* background-color: darksalmon; */
    margin: 20px auto 0;
}
.f-name{
    width: 105px;
    height: 20px;
    /* margin-top: 20px; */
    margin: 0px auto 0 auto;
    border: none;
    border-left: 2px solid darkred;
}
.f-name:focus{
    background-color: rgba(37,42,52,1);
    color: snow;
    border: 2px solid tan;
}
.name-i-f::before{
    content: '\e801';
    font-family: fontello-r-arrows;
    width: 30px;
    height: 30px;
    color: black;
    /* display: block; */
}
#f-name{
    margin-right: 20px;
}

/* ========================================================= Name Box END ================================================ */

.outer-fill-box-1{
    width: 300px;
    height: auto;
    /* background-color: darksalmon; */
    margin-top: 20px;
}
.fill-box{
    width: 200px;
    height: 20px;
    /* margin-top: 20px; */
    border: none;
    border-left: 2px solid darkred;
}
.fill-box:focus{
    background-color: rgba(37,42,52,1);
    color: snow;
    border: 2px solid tan;
}
.f-b-1-i-f::before{
    content: '\e800';
    font-family: fontello-user;
    width: 30px;
    height: 30px;
    color: black;
    /* display: block; */
}
#f-name{
    margin-right: 20px;
}

/* =================================================================== 1 END ==================================== */

.outer-fill-box-2{
    width: 300px;
    height: auto;
    /* background-color: darksalmon; */
    margin-top: 20px;
}
.fill-box{
    width: 200px;
    height: 20px;
    /* margin-top: 20px; */
    border: none;
    border-left: 2px solid darkred;
}
.fill-box:focus{
    background-color: rgba(37,42,52,1);
    color: snow;
    border: 2px solid tan;
}
.f-b-2-i-f::before{
    content: '\2d';
    font-family: fontello-keyNuser;
    width: 30px;
    height: 30px;
    color: black;
    /* display: block; */
}

/* ========================================================== 2 END ======================================= */

.outer-fill-box-3{
    width: 300px;
    height: auto;
    /* background-color: darksalmon; */
    margin-top: 20px;
}
.fill-box{
    width: 200px;
    height: 20px;
    border: none;
    border-left: 2px solid darkred;
}
.fill-box:focus{
    background-color: rgba(37,42,52,1);
    color: snow;
    border: 2px solid tan;
}
.f-b-3-i-f::before{
    content: '\f0e0';
    font-family: fontello-mail;
    width: 30px;
    height: 30px;
    color: black;
}

/* ========================================================= 3 END ======================================= */

.outer-fill-box-4{
    width: 300px;
    height: auto;
    /* background-color: darksalmon; */
    margin-top: 20px;
}
.fill-box-d{
    width: 200px;
    height: 20px;
    border: none;
    border-left: 2px solid darkred;
}
.fill-box-d:focus{
    background-color: deepskyblue;
    color: snow;
    border: 2px solid tan;
}
.f-b-4-i-f::before{
    content: '\f1fd';
    font-family: fontello-cake;
    width: 30px;
    height: 30px;
    color: black;
}

/* ========================================================= 4 END ===========================================  */

.outer-fill-box-5{
    width: 300px;
    height: auto;
    /* background-color: darksalmon; */
    margin-top: 20px;
}
.fill-box-t-u {
    width: 200px;
    height: 100px;
    border: none;
    border-left: 2px solid darkred;
}
.fill-box-t-u:focus{
    background-color: darkslategray;
    color: white;
    border: 2px solid tan;
}
.f-b-5-i-f::before{
    content: '\f0e0';
    font-family: fontello-mail;
    width: 30px;
    height: 30px;
    color: black;
}

/* ============================================================ 5 END =========================================== */

.outer-fill-box-6{
    width: 300px;
    height: auto;
    /* background-color: darksalmon; */
    margin-top: 20px;
}
.fill-box{
    width: 200px;
    height: 20px;
    border: none;
    border-left: 2px solid darkred;
}
.fill-box:focus{
    background-color: rgba(37,42,52,1);
    color: snow;
    border: 2px solid tan;
}
.f-b-6-i-f::before{
    content: '\e800';
    font-family: fontello-phone;
    width: 30px;
    height: 30px;
    color: black;
}

/* =============================================================== 6 END ================================================= */
/* ====================================================== GENDER SELECTOR ================================================== */

.outer-fill-box-7-m{
    width: 300px;
    height: auto;
    background-color: rgb(80, 80, 120);
    margin-top: 20px;
    line-height: 20px;
    /* border-bottom: 1px solid blanchedalmond; */
    /* margin-bottom: 1px; */
}
.fill-box{
    width: 200px;
    height: 20px;
    border: none;
    border-left: 2px solid darkred;
}
/* .fill-box:focus{
    background-color: deepskyblue;
    color: snow;
    border: 2px solid tan;
} */
.f-b-7-i-f-m::before{
    content: '\31';
    font-family: fontello;
    width: 30px;
    height: 30px;
    color: black;
}

/* ====== male end ====== */

.outer-fill-box-7-f{
    width: 300px;
    height: auto;
    background-color: rgb(80, 80, 120);
    /* margin-top: 20px; */
    line-height: 20px;
}
.fill-box{
    /* width: 200px; */
    /* height: 20px; */
    border: none;
    border-left: 2px solid darkred;
}
/* .fill-box:focus{
    background-color: deepskyblue;
    color: snow;
    border: 2px solid tan;
} */
.f-b-7-i-f-f::before{
    content: '\30';
    font-family: fontello;
    /* width: 30px; */
    /* height: 30px; */
    color: black;
}

/* ========================================= GENDER SELECTOR END ========================================================== */

button{
    border-radius: 5px;
    /* background-color: skyblue; */
    width: 70px;
    height: 40px;
    padding: 2px;
    /* font-size: 10px; */
    color: darkorange;
    cursor: pointer;
    background: rgb(234,234,234);
    background: -moz-linear-gradient(270deg, rgba(234,234,234,1) 10%, rgba(139,0,0,1) 100%);
    background: -webkit-linear-gradient(270deg, rgba(234,234,234,1) 10%, rgba(139,0,0,1) 100%);
    background: linear-gradient(270deg, rgba(234,234,234,1) 10%, rgba(139,0,0,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#eaeaea",endColorstr="#8b0000",GradientType=1);
}
button:hover{
    /* border-color: red; */
    background: rgb(234,234,234);
    background: -moz-linear-gradient(90deg, rgba(234,234,234,1) 10%, rgba(139,0,0,1) 100%);
    background: -webkit-linear-gradient(90deg, rgba(234,234,234,1) 10%, rgba(139,0,0,1) 100%);
    background: linear-gradient(90deg, rgba(234,234,234,1) 10%, rgba(139,0,0,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#eaeaea",endColorstr="#8b0000",GradientType=1);
}
button:active{
    /* background-color: #8b0000;
    border-color: red; */
    background: rgb(8,217,214);
    background: -moz-linear-gradient(45deg, rgba(8,217,214,1) 0%, rgba(37,42,52,1) 50%);
    background: -webkit-linear-gradient(45deg, rgba(8,217,214,1) 0%, rgba(37,42,52,1) 50%);
    background: linear-gradient(45deg, rgba(8,217,214,1) 0%, rgba(37,42,52,1) 50%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#08d9d6",endColorstr="#252a34",GradientType=1);
}







































/* ======================================================================================================================================= */

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;
}


.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;
}