*{box-sizing:border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; margin:0; padding:0;}
a img{border:0;}
form *{outline:none;}

body{background:#FAFAFA; color:#000; font:16px 'Poppins', sans-serif; overflow-x:hidden;}
.container{margin:0 auto; width:95%;}

#header{border:1px solid #eee; height:100%; left:0; padding:40px 35px; position:fixed; top:0; width:244px;}
#header .logo{display:block; margin:0 auto 40px;}
#header .usuario{color:#6F6F6F; font-size:18px; margin:0 0 40px;}
#header .usuario strong{color:#B6B6B6; display:block; font-weight:normal; margin:4px 0 0;}

#header ul{margin:0 0 40px;}
#header ul li{list-style:none; margin:0 0 2px;}
#header ul li a{background:url(imagem/icone_menu.png) 16px center no-repeat; border-radius:15px; color:#B6B6B6; display:block; padding:14px 15px 14px 45px; text-decoration:none; transition:all 0.3s;}
#header ul li a.ativo{background:url(imagem/icone_menu_a.png) 16px center no-repeat #162976; color:#fff;}
#header ul li a:hover{background:url(imagem/icone_menu_a.png) 16px center no-repeat #e01a22; color:#fff;}

#header .sair{background:url(imagem/icone_sair.png) 0 center no-repeat; color:#B6B6B6; display:block; padding:14px 0 14px 35px; text-decoration:none;}

#main{float:right; padding:40px 0;}

.voltar{background:#e01a22; border-radius:4px; color:#fff; display:block; font-size:13px; font-weight:bold; height:32px; line-height:32px; margin:0 0 35px; text-align:center; text-decoration:none; text-transform:uppercase; width:120px;}

#busca{margin:0 0 50px;}
#busca input.text{background:url(imagem/lupa.png) 26px center no-repeat #fff; border-radius:15px; border:1px solid #F0F0F0; display:block; font:16px/50px 'Poppins', sans-serif; height:50px; padding:0 20px 0 60px; width:100%;}

#arquivos li{background:#fff; border:1px solid #ECECEC; border-radius: 25px; display:inline-block; list-style:none; margin:0 22px 24px 0; padding:25px; vertical-align:top; width:200px;}
#arquivos li h2{color:#5C5C5C; font-size:15px; font-weight:normal; margin:0 0 20px;}
#arquivos li a.botao{background:url(imagem/icone_download.png) 15px center no-repeat #162976; border-radius:10px; color:#fff; display:block; font-size: 14px; height:35px; line-height:35px; padding:0 0 0 40px; text-decoration:none; transition:all 0.3s;}
#arquivos li a.botao:hover{background-color:#e01a22;}

.msg{background:#33BE3F; border:0; border-radius:6px; color:#fff; font-size:14px; font-weight:700; margin:0 0 20px; padding:7px 15px;}
.erro{background:#CB3D38; border:0; border-radius:6px; color:#fff; font-size:14px; font-weight:700; margin:0 0 20px; padding:7px 15px;}

#login{max-width:350px; margin:0 auto; padding:150px 0 0; text-align:center;}
#login .logo{display:block; margin:0 auto 40px;}
#login .wrap_input{margin:0 0 15px;}
#login .wrap_input input{background:#fff; border:1px solid #f0f0f0; border-radius:15px; color:#333; display:block; font:15px/50px 'Poppins', sans-serif; height:50px; padding:0 20px 0 50px; width:100%;}
#login .wrap_input input#email{background:url(imagem/email.png) 16px center no-repeat #fff}
#login .wrap_input input#senha{background:url(imagem/senha.png) 18px center no-repeat #fff}
#login .wrap_input input:focus{box-shadow:0 0 5px #b8d0f1;}
#login .botao{background:#162976; border:0; border-radius:15px; color:#fff; cursor:pointer; display:block; font:15px/50px 'Poppins', sans-serif; height:50px; margin:30px 0 0; text-align:center; width:100%;}

@media all and (max-width:1024px) {
    #header{align-items:center; display:flex; height:auto; justify-content:space-between; padding:20px 25px; position:static; width:100%;}
    #header .logo{margin:0; width:60px;}
    #header .usuario{margin:0;}
    #header .usuario strong{display:inline-block;}
    #header .sair{padding:0 0 0 35px;}

    #main{float:none; width:100%;}
    #arquivos ul{display:flex; flex-wrap:wrap; justify-content:space-between;}
    #arquivos li{display:block; margin:0 1% 2%; width:31%}

}

@media all and (max-width:725px) {
    #arquivos li{width:48%}
}

@media all and (max-width:480px) {
    #arquivos li{width:100%}
}