html, body{background:#121314; color: #fff; width:100%; margin:0 auto; padding:0; box-sizing:border-box; font-family: "roboto",Arial,sans-serif; font-size: 14px; line-height: 1.6;}
*, :before, :after {margin: 0;}
ul, li{margin:0; padding:0; list-style-type:none;}
a, a:focus{color:#fff; text-decoration:none; outline:none;}
a:hover, a:active{color:#1ecd02; text-decoration:none;}
a.greenlight,.greenlight {color:#1ecd02 !important;}
span{border-radius:0 !important; }
p{margin:0 0 27px;}
.pos-rel{position:relative;}
h1, h2, h4, h5{
    font-family: "robotomedium",Arial,sans-serif;
    font-weight: normal;
	letter-spacing: 1px; 
    margin: 0 0 21px;
}
h1 {
    
    font-size: 26px;
    line-height: 1.2;
}
h2{
	font-size: 24px; 
}
h4 {
    font-size: 20px;
    line-height: 1.2;
}
h5 {
    font-size: 18px;
    line-height: 1.2;
}

/*=====================Body====================*/
#wrapper{width:100%; position:relative;}
#header{background:#222326; height:100px; position:relative;}
#header .logo{display:inline-block; width:160px; padding:20px; background:#222326; position:absolute; left:50%; transform: translate(-50%, 0);}
#header .logo img{width: 100%;}
#header:before{content:''; background:#303030; position:absolute; top:40%; left:0; width:100%; height:2px;}

#content{background:#121314; padding:40px 50px; width:100%; height:calc(100% - 150px); position:relative; float:left; clear:both;}
#content .side{background-size:cover; background-position:center bottom; background-repeat:no-repeat; padding:40px; min-height:499px;}
#content .side.left{background-image:url('https://www.9tro.com/images/9tro-landing-left.jpg'); position:relative;}
#content .side.left:after{content:''; position:absolute; width:2px; height:70%; background:#fff; right:-1px; top:50%; transform: translate(0, -50%);}
#content .side.right{background-image:url('https://www.9tro.com/images/9tro-landing-right.jpg');}

#content .form{text-align:center; margin:0 auto;}/*max-width:350px;*/
#content .form .logo-white{height:110px; margin-bottom:50px;}
#content .form .logo-white.height{margin-bottom:30px;}

.form-controls .text-danger{margin-top:5px; display:block; text-align:left;}
.form-controls .login{margin-top:30px;}
.form-controls .signup{text-transform:uppercase; margin:40px 0 0 0;}
.form-controls .forgot{font-size:16px; border-radius:50%; border:1px solid #ccc; right:15px; top:10px; padding-top:1px; font-weight:bold; width:31px; height:30px; position:absolute; z-index:999;}
.form-controls .forgot:hover{color:#fff;}
.form-controls .signup a{font-weight:bold; margin-left:5px;}
.form-controls input[type='email'], .form-controls input[type='password']{background:none; border:none; border-bottom:1px solid #a4a5a6; display:block; width:100%; padding:15px 60px 15px 15px; font-size:15px;}
.form-controls input::placeholder{text-transform:uppercase;}
.form-controls .btn{text-transform:uppercase; border:1px solid #e8e8e8; background:none; border-radius:0; color:#fff; letter-spacing:7px; width:180px; padding:12px 0;}
.form-controls .btn:hover{color:#e8e8e8;}

.btn_social{text-align:center; display:inline-block; width:100%; max-width:300px; margin:0 auto; margin-bottom:20px;}
.btn_social .fa{float:left; font-size:27px; padding:9px 16px; min-width:60px;}
.btn_social .btn_text{font-size:16px; font-family: "roboto",Arial,sans-serif; font-weight:bold; padding:10px 0; display:block;}

.btn_social.google{background:#cf4332;; color:#fff;}
.btn_social.google .fa{background:#af3222;}

.btn_social.facebook{background:#4064ad; color:#fff;}
.btn_social.facebook .fa{background:#39569a;}

.form-controls .remember {text-align:right; margin-top:5px;}
.form-controls .remember label{color:#e8e8e8; text-transform:uppercase; font-weight:300;}
.form-controls [type="checkbox"]:not(:checked), .form-controls [type="checkbox"]:checked {position: absolute; left: -9999px;}
.form-controls [type="checkbox"]:not(:checked) + label, .form-controls [type="checkbox"]:checked + label {position: relative; padding-right: 30px; cursor: pointer;}
.form-controls [type="checkbox"]:not(:checked) + label:after, .form-controls [type="checkbox"]:checked + label:after {content: ''; position: absolute; right: 0; top:4px; width:15px; height: 15px; border:1px solid #e8e8e8;}
.form-controls [type="checkbox"]:not(:checked) + label:before, .form-controls [type="checkbox"]:checked + label:before {content: '✔'; position: absolute; top:6px; right:2px; font-size: 13px; line-height: 0.8; color: #1ecd02 !important; transition: all .2s;}
.form-controls [type="checkbox"]:not(:checked) + label:before {opacity: 0; transform: scale(0);}
.form-controls [type="checkbox"]:checked + label:before {opacity: 1; transform: scale(1);}

#footer{background:#222326; text-align:center; padding:15px 0 5px 0; display:inline-block; width:100%;}
.socials{display:inline-block;}
.socials li{float:left; padding:0 20px;}
.socials li img{height:19px; width: auto !important;}
.socials li img:hover{transform: scale(1.3); -webkit-transform: scale(1.3); -moz-transform: scale(1.3);}

@media (max-width: 992px)
{
    #content{height:auto;}
    #content .side{min-height:250px; height:auto;}
    #content .side.left:after{display:none;}
    
    #content .form .logo-white{height:50px; margin-bottom:30px;}
}

@media (max-width: 768px)
{
    #header{height:60px;}
    #header .logo{width:100px; padding:10px;}
    #header:before{display:none;}
    
    #content{padding:40px 0 0; height:auto; display:inline-block;}
    #content .side{min-height:300px;}
    #content .side.left:after{display:none;}
    
    #content .form .logo-white{height:80px; margin-bottom:30px; margin-top:30px;}
    
    .form-controls .signup{margin-top:20px;}
    .form-controls .forgot{top:5px;}
    .form-controls input[type='email'], .form-controls input[type='password']{padding:11px 60px 11px 11px}
    .form-controls .btn{width:160px; padding:7px 0; font-size:12px;}
    
    #footer{background:none; padding-top:10px;}
}

@media (max-width: 576px)
{
    #content .side{min-height:calc(50vh - 120px);}
    
    #content .form .logo-white{height:50px; margin-top:0;}
}