@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600,700');

html, body {
	padding: 0;
	margin: 0;
}
body {
	font-family: 'Montserrat',sans-serif;
	font-size: 13px;
	line-height: 0%;
	color: #282F42;
    background-image: url('../../images/bg-login.jpg');
    background-size: cover;

}

body::before{
    content: '';
    display: block;
    background-color: #000;
    position: absolute;
    opacity: .7;
    height: 100vh;
    width: 100%;
    z-index: -1;
}


/* ------------------------------------------------------------------------------------------------------------------ */

.ac{text-align:center}
.ar{text-align:right}
.df{display:flex}
.flex-column{flex-direction:column}
.outline{outline:none}
.input{border-color:#bbb;border-width:1px;border-style:solid;padding:0 15px;outline:none;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;-ms-border-radius:5px}

body{font-size:14px;background-color:#000;color:#666}

.container{width:1280px;margin:0 auto 0}
.container .row{display:flex; justify-content: center;}
.container .col-login, .container .col-img{flex-basis:50%;max-width:50%;box-sizing:border-box}
.container .col-login{display:flex;justify-content:center;flex-wrap:wrap;align-items:center;}
.container .col-img{min-height:455px;background:url('../../img/backend/img-login.jpg') no-repeat center center;background-size:contain}

header{position:relative;top:0;right:0;bottom:0;left:0;width:100%;height:60px;background-color:#fff;box-shadow:0 1px 5px 0 #e1e1e1;-moz-box-shadow:0 1px 5px 0 #e1e1e1;-webkit-box-shadow:0 1px 5px 0 #e1e1e1}
header nav{width:100%;height:55px;display:flex;align-items:center;justify-content:flex-end;padding-right:35px;box-sizing:border-box}
header li{display:inline-block;align-items:center;margin-left:20px}
header a{color:#666;text-decoration:none;transition:.3s all ease-out;-moz-transition:.3s all ease-out;-webkit-transition:.3s all ease-out;-ms-transition:.3s all ease-out}
header a:hover{color:#161616}
header .icon-support{position:relative;width:24px;height:19px;top:3px;left:0;margin-right:5px;background:url('../../img/backend/ico-duvidas.png') no-repeat 0 0;display:inline-block;}

section{box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;display:flex;justify-content:center;flex-wrap:wrap;align-items:center;padding:30px 0;height:calc(100vh - 60px)}

.box{width:100%;max-width:527px;max-height:473px;float:right}

.logo{width:113px;height:93px;float:left; margin-top: 11px;}
h1{float:right;height:86px;display:flex;justify-content:center;flex-wrap:wrap;align-items:center;font-size:25px;color:#fff;font-weight:400;margin:0;position:relative;}
h1:before{content:'';width:70px;height:4px;background:#C55B11;position:absolute;bottom:18px;left:0;}



.login{float:right;margin-top:16px;width:527px;background-color:#fff;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;padding:44px 56px 56px;border-radius: 4px;}
.login input{border-color:#bbb;border-width:1px;border-style:solid;padding:3px 15px 0;outline:none;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;-ms-border-radius:5px;width:100%;height:52px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;margin-top:12px;color:#333}
.login input[type=submit]{width:100%;height:52px;line-height:50px;font-size:20px;font-weight:700;color:white;background-color:#C55B11;border:none;outline:none;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;-ms-border-radius:5px;transition:.3s all ease-out;-moz-transition:.3s all ease-out;-webkit-transition:.3s all ease-out;-ms-transition:.3s all ease-out;cursor:pointer;}
.login input[type=submit]:hover{background-color:#ED8339;}
.login a{color:#C55B11;text-decoration:none;display:flex;justify-content:center;flex-wrap:wrap;align-items:center;margin-top:30px}
.login #form-senha{display:none}
.login b {float:left;width:100%;color:#CC3300;font-size:12px;text-align:center;font-weight:600;line-height:1.5;font-size:15px;padding-bottom:5px;}

::-webkit-input-placeholder{color:#999;}
::-moz-placeholder{color:#999;}
:-ms-input-placeholder{color:#999;}
:-moz-placeholder {color:#999;}

.copy{text-align:right;float:right;font-size:12px;margin-top:25px}

.topo{width:calc(100% - 70px);float:right;background-color:#fff;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;padding:20px 25px}

.sidebar{width:70px;height:1200px;background-color:#000;float:left}
.sidebar .logo-mini{margin:15px auto;width:46px;height:26px}

.mainblock{background-color:#fff;margin:25px;width:100%;max-width:calc(100% - 120px);padding:40px 35px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;float:right}
.mainblock h2{font-size:20px;font-weight:700;margin-bottom:30px}
.mainblock p{font-size:14px;font-weight:300;margin-top:30px}
.mainblock form{display:flex;justify-content:space-between;flex-wrap:wrap}
.mainblock .red{color:#D80000}
.mainblock input[type=text]{padding:15px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;width:49%;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;-ms-border-radius:5px;border-color:#bbb;border-width:1px;border-style:solid}
.mainblock .bt-salvar{width:100%;border-top-color:#bbb;border-top-width:1px;border-top-style:solid;padding-top:35px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;margin-top:70px}
.mainblock input[type=submit]{width:355px;height:52px;background-color:#ff4000;color:#fff;font-weight:700;font-size:20px;border:none;float:right}
.mainblock input[type=submit]:hover{cursor:pointer}


@media screen and (max-width:1023px){
    .container .col-login{flex-basis:100%;max-width:100%}
    .container .col-img{display:none}
}

@media screen and (max-width:600px){
    header{height:auto}
    header .container-fluid{padding:0}
    header nav{
        height:auto;
        padding: 0 20px;
    }

    header ul{
        width:100%;
        -webkit-padding-start: 0;
        display: flex;
        justify-content: flex-end;
    }
    header li{float:left;display:flex;margin:0;width:50%;font-size:12px;padding:5px 0;justify-content:center}
    header li i:before{margin-left:5px !important}
    header .flaticon-people,header .flaticon-support{top:0}

    .login{margin:0;width:100%;padding:25px}
    .box{display:flex;max-width:100%;flex-basis:100%;flex-flow:column;align-items:center}
    .container{margin:0;width:94%}
}

@media screen and (max-width:480px){
    /* .logo{width:230px;height:74px} */
    h1 {
        font-size: 22px;
    }
}

@media screen and (max-height:650px){
    .container .col-img{min-height:500px}
}

@media screen and (max-height:580px){
    section{height:auto}
}