*{resize:none; box-sizing:border-box; outline:none; font-family: inherit;}

body{margin:0; padding:0; font-family: 'Arial', sans-serif; font-weight: normal;}

h1, h2, h3, h4, h5, h6{font-family: 'Oswald', sans-serif;}
p, ul, a{font-size: 13px;}
a{text-decoration: none; color: inherit;}

button, a, .util-qdd, .efeito-escuro, .prog{transition: all 300ms; -webkit-transition:all 300ms;}

.largura-site{width: 98%; max-width: 1200px; margin: 0 auto; position: relative; z-index: 2;}
.flex{display: flex; flex-wrap: wrap; justify-content: space-between;}

.topo { position:fixed; bottom:0; right:10px; z-index:9999; width:50px; height:50px; cursor:pointer; display:none; font:20px/50px 'FontAwesome'; color:#ffffff; background:#F03933; text-align:center; }

#topo{padding: 20px 0; align-items: center;}
.logo{max-width: 400px;}
.end-topo p {font-family: 'Oswald', sans-serif; color:#333333; font-weight: 300;}
.end-topo p i{color:#F03933; font-size: 20px; margin:0 15px;}
.end-topo p a:hover{color:#25279E;}

nav{width:100%;}
nav select{width: 98%; color: #333333; font:16px 'Oswald', sans-serif; font-weight: 300; padding: 25px 0; display: none; border: 0; border-radius: 3px; padding: 15px 5px;  margin: 10px auto; background: #f4f4f4;}

.menu{padding: 0; background: #f4f4f4; border-top: 4px solid #dddddd; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom: 4px solid #25279E;}
.menu li{list-style: none; text-align: center; flex: 1;}
.menu li a{color: #333333; font:14px 'Oswald', sans-serif; font-weight: 400; display: block; padding: 25px 0;}
.menu li a:hover{background: #dddddd;}
.menu li:first-child a:hover{border-top-left-radius: 5px; }
.menu li:last-child a:hover{border-top-right-radius: 5px; }

#banner{padding: 70px 0; background: url(banner/banner02.jpg) center; background-size: cover;  display: flex; align-items: center; position: relative;}
#banner:before{position: absolute; content:""; width: 100%; height: 100%; background: rgba(0,0,0,.2); top:0; left: 0;}
#banner .largura-site{ display: flex; flex-direction: column;}
.setas{ display: flex; justify-content: center;}

.proximo, .anterior{text-align:center; cursor:pointer; color:#ffffff; margin:0 10px; font:40px/40px 'FontAwesome';}
.proximo:hover, .anterior:hover{color:#F03933;}
.proximo:before{content:"\f0da"; }
.anterior:before{content:"\f0d9"; }

.frases{width: 100%; text-align: center; margin: 60px 0 0 0;}
.frases p{font: 40px 'Josefin Sans', sans-serif; font-weight: 600; color:#ffffff; text-shadow:2px 2px 2px #333333; width: 100%; margin: 0;}
.frases p small{font-size: 60%; font-weight: 400;}

.msystem{width: 90%; margin: 20px auto 0; background: #f4f4f4; outline-offset: -8px; outline: 1px solid #cccccc; padding: 10px; position: relative; bottom: -30px; }
.msystem h2{color:#25279E; text-align: center; font-weight: 400;}
.msystem h2 i{color:#25279E; font-size: 30px; margin-right: 15px;}
.msystem form{width: 100%;}
.msystem input{width:calc(50% - 4px); border-radius: 3px; border: 1px solid #dddddd; padding:10px; color:#333333; margin:2px; font:14px 'Oswald', sans-serif; font-weight: 300;}
.msystem button{width:calc(50% / 3 - 4px); background:#dddddd; color:#333333; cursor:pointer; border-radius:3px; margin:2px; padding:10px 5px; font:14px 'Oswald', sans-serif; font-weight: 300; border:none;}
.msystem button:hover{background:#cccccc;}
.msystem button.adm{background:#F03933; color:#ffffff;}
.msystem button.adm:hover{background:#333333; }
.msystem button.adm:before{ font: 14px 'FontAwesome'; content:"\f13e"; margin-right:15px;}

.utilitarios{margin: 20px auto 40px;}
.util{width: 32%; align-items: flex-start; position: relative; text-align: center}
.util-qdd{width: 90%; margin: 0 auto; background: #f4f4f4; outline-offset: -8px; outline: 1px solid #cccccc; padding: 15px; position: relative; top:-50px; margin-bottom: -50px; min-height: 155px;}
.util-qdd h3{color:#F03933; font-weight: 400;}
.img-qdd{position: relative; overflow: hidden; max-height: 223px}
.efeito-escuro{width: 100%; height: 100%; position: absolute; background: rgba(0,0,0,.5); bottom: -100%; display: flex; justify-content: center; align-items: center;}
.efeito-escuro a{color:#ffffff; display: inline-block; width: 100px; line-height: 30px; border: 1px solid #ffffff;}
.efeito-escuro a:hover{background: #ffffff; color: #333333;}
.util:hover .efeito-escuro{bottom: 0;}

.conteudo{margin: 50px auto;}
.conteudo h2{font-weight: 400; color:#333333; text-transform: uppercase;}
.conteudo p{color:#333333; text-align: justify;}
.conteudo p a{color:#25279E;}
.conteudo ul{color:#333333; list-style: none; padding: 0;}

.programacoes{background: #333333; padding: 80px 0;}
.prog{background: #ffffff; flex:1; text-align: center; display: flex; flex-wrap:wrap; margin: 10px; cursor: pointer;}
.prog:hover{background: #25279E;}
.prog:hover.prog h2{color: #ffffff;}

.prog-icone{background: #25279E; padding: 30px; margin-right: 15px; display: flex; align-items: center;}
.prog-icone i{color: #ffffff; text-align: center; font-size: 30px; }
.prog-desc{text-align: left; display: flex; align-items: center;}
.prog h2{color:#333333; font-weight: 400; margin: 0;}
.prog h2 span{display: block; font-size: 80%; font-weight: 300;}

.consultas-cont {margin: 50px auto;}
.consultas-cont h2 {width: 100%; color:#25279E; text-align: center; font-weight: 400; border-bottom: 1px dotted #dddddd; padding: 15px 0; text-transform: uppercase;}
.consultas{width: 24.5%; text-align: center;}
.consultas a{color: #333333; display: block; font:16px 'Oswald', sans-serif; font-weight: 300; padding: 15px 20px; text-align: right;}
.consultas a:nth-child(odd){background: #dddddd;}
.consultas a:nth-child(even){background: #eeeeee;}
.consultas a:before{content: "\f101"; font:20px 'FontAwesome'; float: left; color:#25279E;}
.consultas a:hover{background: #333333; color:#ffffff;}

.txt-rodape{background: #333333; padding: 80px 0;}
.txt-rodape .largura-site{ align-items: center;}
.txt-rodape .frase{font: 30px 'Josefin Sans', sans-serif; font-weight: 600; color:#cccccc;}
.txt-rodape .redes{text-align: right;}

.txt-rodape .redes a{background: rgba(255,255,255,.1); text-align: center; color:#ffffff; font-size: 25px; padding: 15px 25px; }
.txt-rodape .redes a:hover{background: rgba(255,255,255,.3);}

.divformulario { font-family: sans-serif; }
.divformulario *:not(.fa) { font-family: inherit; }

#formcontato { width: 100%; }
#formcontato input, #formcontato textarea { width: 100%; resize: none; border-radius: 3px; border: 1px solid #dddddd; padding:10px; color:#333333; margin:2px; font:14px 'Oswald', sans-serif; font-weight: 300}
#formcontato input:focus, #formcontato textarea:focus { color: #333333; }
#formcontato button { width:150px; background:#dddddd; color:#333333; cursor:pointer; border-radius:3px; margin:10px 2px; padding:10px 5px; font:14px 'Oswald', sans-serif; font-weight: 300; border:none; }
#formcontato button:hover { background: #f5f5f5; }
#formcontato #loading { font-size: 12px; }

#result { padding: 15px; margin: 20px 0; display: none; border-radius: 3px; }
.error { color: #a94442; background-color: #f2dede; border: 2px solid #ebccd1; }
.success { color: #3c763d; background-color: #dff0d8; border: 2px solid #d6e9c6; }

.rodape{background: #222222; padding: 10px 0;}
.rodape h4{font-weight: 300; color:#cccccc; text-align: center;}

@media screen and (max-width:1023px){
    .logo{width: 100%; margin: 0 auto;}
    .end-topo{width: 100%; text-align: center;}
    .txt-rodape .frase{width: 100%; text-align: center;}
    .txt-rodape .redes{text-align: center; width: 100%; max-width: 290px; margin: 30px auto 0;}    
    .consultas{width: 49.5%;}
}

@media screen and (max-width:767px){
    .util{width: 80%; margin: 15px auto;}
    .prog{flex:1 100%;}
    .msystem input{width:calc(100% - 4px);}
    .msystem button{width:calc(100% / 3 - 4px);}
    .end-topo span{display: block;}
}

@media screen and (max-width:599px){
    nav select{display: block;}
    .menu li {display: none;}
    .menu{border:none;}
}

@media screen and (max-width:479px){
    .prog-icone{width: 100%; margin: 0 auto; justify-content: center;}
    .prog-desc{width: 100%; justify-content: center; text-align: center; padding: 10px 0;}
    .consultas{width: 98%; margin: 0 auto;}
    .msystem button{width:calc(100% / 2 - 4px);}
    .msystem button.adm{width: 100%;}
    .frases, .proximo, .anterior{display: none;}
    #banner{min-height: 250px;}
}