*{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; font-weight: 300;}
a{text-decoration: none;}

button, a, .links, .prog {transition: all 300ms; -webkit-transition:all 300ms;}

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

#fd-topo{background: #fff;}
#topo{padding: 10px 0; align-items: center;}
.logo {width: 40%; max-width: 225px;}
.lateral-topo{width: 60%;}

#menu{padding: 0; }
#menu li{list-style: none; text-align: center; flex-grow: 1; }
#menu li a{color: #666; font-family: 'Oswald', sans-serif; font-weight: 300; font-size: 18px; display: block; padding: 15px 0;}
#menu li a:hover{background: #FD1E19; border-radius: 5px; color: #fff;}
nav{width:100% !important;}

#control-nav{display: none;}
.control-nav{display: none;}
.control-nav-close{display: none;}

#end-topo{text-align: center; margin-top: 20px;}
#end-topo p{text-align: center; font-family: 'Oswald', sans-serif; font-weight: 300; font-size: 16px; color: #666; margin: 0; line-height: 25px;}
#end-topo p a{color: #FD1E19; padding: 0 5px; border-radius: 2px;}
#end-topo p a:hover{color: #fff; background: #FD1E19;}

.banner{width:100%; border-top: 2px solid #999999; border-bottom: 2px solid #999999; display: flex; align-items: center; z-index: 0; position: relative;}
.banner img{width:100%; height: auto;}
.slogan{width: 50%; min-width: 500px; background: rgba(255,255,255,.9); z-index: 999; position: absolute; padding: 5px; text-align: right;}
.slogan p{font-family: 'Oswald', sans-serif; font-weight: 300; font-size: 28px; color: #222222; margin: 0;}
.slogan p span{color: #FD1E19; display: block;}

.degrade{background-image: linear-gradient(#a9a9a9, #D9D9D9);}

.fd-utilitarios{padding: 15px 0;}
.utilit{width: 23%;}
.utilit h3{color:#222222; text-transform: uppercase; width: 100%; margin: 0; text-align: center; font-weight: 400;}
.cont-utilit{align-items: center; margin-bottom: 25px;}
.utilit p{font-size: 13px; width: calc(100% - 60px);}
.utilit i{font-size: 30px; color: #666666; background: rgba(255,255,255,0.3); width: 50px; height: 50px; line-height: 50px; text-align: center; border-radius: 50%;}
.utilit a{background: #222222; color: #FD1E19; border-radius: 8px; text-align: center; font-family: 'Oswald', sans-serif; font-weight: 300; font-size: 16px;  display: block; padding: 8px 0;}
.utilit a:hover{background: #383838; color: #ffffff;}

#home{padding: 20px 0;}
#home .bemvindo{color: #FD1E19; width: 100%;}
#txt-home{width: 70%;}
#txt-home img{float: left; margin-right: 15px;}
#txt-home p{font-size: 13px; color: #222222;}

#links{align-items: center; width: 100%;}
.links{width: 49%; background: #dadada; border-radius: 5px; margin-top: 10px; padding:20px 15px; display: flex; align-items: center; flex-wrap: wrap; cursor:pointer;}
.links:hover{background: #cccccc;}
.links h2{color: #222222; margin: 0; flex:1; padding: 0;}
.links small{display: block; font-size: 65%;}
.links i{font-size: 38px; margin-right: 15px; color: #333333;}

#conteudo{padding: 20px 0;}
#conteudo .tit-conteudo{color: #FD1E19; width: 100%;}
#conteudo p, #conteudo ul{font-size: 13px; color: #222222; text-align: justify;}
#conteudo p a, #conteudo ul a{color: #222222;}
#conteudo p a:hover, #conteudo ul a:hover{color: #FD1E19;}
#conteudo .colunas{width: 49%;}

#noticias{width: 28%;}
.botao-not{color: #222222; border: 1px solid #dadada; padding: 15px; margin-top: 20px; width: 100%; text-align: center; font-family: 'Oswald', sans-serif; font-weight: 300; font-size: 18px; border-radius: 5px;}
.botao-not:hover{border: 1px solid #333333;}
#noticias .titulo{margin: 12px 0; line-height: 18px; font-weight: bold;}
#noticias p{font-size: 12px; margin: 5px;}
#noticias a{color: #222222;}
.espaco-not{border-bottom: 1px dotted #666666;}

#fd-ms{padding: 20px 0;}
.msystem h2{width: 100%; color:#222222; text-transform: uppercase;}
.msystem input{width: 49.5%; margin: 5px 0; border: 1px solid #dadada; padding: 15px; background: #ffffff; color: #222222;}
.msystem input::-webkit-input-placeholder{color: #222222;}
.msystem .bot{width: 49.5%; margin: 5px 0;}
.msystem button{width: 25%; border:none; cursor:pointer; padding: 15px 2px; background: #222222; color: #ffffff;}
.msystem button:hover, .msystem button.adm:hover{background: #383838; color: #ffffff;}
.msystem button.adm{width: 46%; background: #222222; color: #FD1E19;}

#programacoes{padding: 10px 0; margin: 25px auto;}
.prog{width: 49.5%; padding: 15px; color: #ffffff; font-family: 'Oswald', sans-serif; font-weight: 300; font-size: 20px; background: #222222; text-align: center;}
.prog:hover{background: #383838;}
.prog span{font-size: 80%; display: block; color: #FD1E19;}

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

#formcontato { width: 100%; }
#formcontato input, #formcontato textarea { width: 100%; resize: none; padding: 10px; margin: 2px 0; border-radius: 3px; border: 1px solid rgba(0,0,0, .2); color: rgb(45,45,45); }
#formcontato input:focus, #formcontato textarea:focus { color: #222222; }
#formcontato button{width: 150px; border:none; cursor:pointer; padding: 15px 2px; background: #FD1E19; color: #ffffff; margin-top: 10px; }
#formcontato button:hover { background: #222222; }
#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{padding: 50px 0; background: #222222; margin: 0; color: #ffffff; text-align: center; font-family: 'Oswald', sans-serif; font-weight: 300; font-size: 16px;}

@media screen and (max-width:1023px){
    #txt-home{width: 100%;}
    #noticias{width: 100%;}
    .links{min-height: 124px;}
}


@media screen and (max-width:890px){
    .utilit{width: 48%; margin-top: 15px;}
}

@media screen and (max-width:767px){
    .logo {width: 100%; margin: 0 auto;}
    .lateral-topo{width: 100%;}  
    .slogan{width: 100%; text-align: center;}
    #conteudo .colunas{width: 100%;}
}

@media screen and (max-width:675px){
    #txt-home img{display: none;}
    .links{width: 100%;}
}

@media screen and (max-width:599px){
    .slogan{display: none;}
    .utilit{width: 100%;}
    .msystem .bot, .msystem input{width: 100%;}
    .prog{width: 100%; margin: 5px auto;}

    nav{width: 100%; height: 100%; position: fixed; z-index: 999; top: 0; right: 0; display: flex; justify-content: center; align-items: center; background: rgba(0, 0, 0, .9); -webkit-transform: translate(100%, 0); transform: translate(100%, 0);  -webkit-transition: all ease-out 300ms; transition: all ease-out 300ms;}
    #menu {width: 50%; flex-direction: column; position: relative; z-index: 10000; background: none;}
    #menu li a{text-transform: uppercase; padding: 15px 0 !important; }
    .espaco-menu{ padding-right: 10px; align-items: center; justify-content: space-between; width: 100%;}
    .control-nav {display: block; cursor: pointer; color: rgb(255,255,255); margin-bottom: 0 !important; text-align: center;}
    .control-nav-close {width: 100%; height: 100%; padding: 20px; position: absolute; top: 0; left: 0; color: rgb(255, 255, 255); opacity: 0; -webkit-transition: all ease-out 300ms; transition: all ease-out 300ms;}
    #control-nav:checked ~ .control-nav{-webkit-transform: translate(0, 0); transform: translate(0, 0);}
    #control-nav:checked ~ nav .control-nav-close{opacity: 1; z-index: 998; display: block;}
    #control-nav:checked ~ nav{-webkit-transform: translate(0, 0); transform: translate(0, 0);}       
}

@media screen and (max-width:480px){
    .msystem button{width: 49%;}
    .msystem button.adm{width: 100%; margin-top: 10px;}
}