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

/* JANELA MODAL */
#popup { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; position: fixed; z-index: 9999; top: 0; left: 0; background: rgba(0, 0, 0, .6);}
#popup .popup { position: relative; z-index: 9999;}
#popup .popup img { display: block; width: 90%; height: auto; max-width: 700px; margin: 0 auto;}

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

h1, h2, h3, h4, h5, h6{font-family: 'Raleway', sans-serif;}
a{text-decoration: none; color: inherit;}

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

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

#topo{position: relative; justify-content: center; display: flex; z-index: 9998;}

#banner{width: 100%; height: 580px; background-image: url(banner/banner01.jpg); background-position: center; display: flex; align-items: center; position: relative; border-bottom: 4px solid #a52627; }
#banner:before{position: absolute; content: " "; width: 100%; height: 100%; background: rgba(255,255,255,0.6); top: 0; left: 0;}
#banner .largura-site{ display: flex; justify-content: space-around; flex-wrap: wrap;}

.slide { position: absolute; z-index: -1; top:0; left:0; width:100%; height:100%;}
.fotos { width:100%; height:100%; background-size: cover; background-repeat: no-repeat;}

.logo{width: 350px; z-index: 999;}
.logo img{width: 100%; height: auto;}
.contato-topo {text-align: right; z-index: 999; position: absolute; right: 0; top: 0;}
.contato-topo p {margin: 0;}

.frases{width: 100%;}
.frases p{font:38px 'Comfortaa', cursive; color:rgb(66,66,66); text-align:center; text-shadow:0 0 4px rgba(255,255,255,1); width: 100%;}
.frases p small{font-size: 60%; font-weight: normal;}

.slogan_pag span { font-size: 0; width: 15px; height: 15px; border-radius: 50%; display: inline-block; background: rgba( 0, 0, 0, 0.5); cursor: pointer; z-index: 999; position: relative; margin: 10px;}
.slogan_pag span:hover, .slogan_pag span.cycle-pager-active { background: rgb(0,0,0) !important;}

#fixa-menu{position: fixed; z-index: 99999; width: 100%;}
.home-m{border:none; width: 100px; height: 76px; display: flex; align-items: center; justify-content: center; cursor: pointer;}
.home-m i{color:rgb(255,255,255); font-size: 35px; }
.espaco-menu{display: flex; background: rgb(77,77,77);}
#menu{width: 100%; padding: 0; }
#menu li{list-style: none; text-align: center; flex-grow: 1; }
#menu li a{color: rgb(255,255,255); font:14px 'Raleway', sans-serif; font-weight: 400; display: block; padding: 30px 0;}
#menu li a:hover{background: rgb(45,45,45);}
nav{width:100% !important;}

.small.largura-site{width: 100% !important; max-width: 100%; transition: all 300ms; -webkit-transition:all 300ms;}

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

.topo {align-items: center; width: 100%; justify-content: space-around !important;}
#home{margin: 20px auto;}
#home .colunas{width: 49%; padding: 10px 0;}
#home h1{color:#a52627; text-transform: uppercase; font-weight: 400; margin: 0; width: 100%;}
#home h1 span{color:rgb(77,77,77); font-size: 60%; display: block;}
#home h2 {color:rgb(255,255,255); padding: 20px 10px; margin: 0; font-weight: 400; width: 100%; align-self: flex-start;}
#home h2 span{font-size: 50%; display: block;}
#home h3{color:rgb(77,77,77); font-weight: 400; margin-top: 40px;}
#home h3 span{color:#a52627; font-size: 60%; display: block;}
#home p{font-size: 14px; color:rgb(77,77,77); text-align: justify; margin: 0;}
#home p a{color:#a52627;}
#home p a:hover{color:rgb(77,77,77);}
#home .textosite{margin-top: 25px; width: 100%;}
#home .textosite p{margin: 20px 0;}
#home .textosite ul{font-size: 13px; color:rgb(77,77,77);}
#home .textolink a { display: block; max-width: 400px; padding: 10px; margin-bottom: 3px; border-bottom: solid 1px #a52627; }
#home .textolink a:hover {color: #FFF; background: #b83738;}
#home .titulo{font:20px 'Raleway', sans-serif; color:#a52627; text-transform: uppercase; margin-bottom: 10px; }

.recuo { text-indent:4em }

.img-empresa {border: 3px solid #FFF; box-shadow: 2px 2px 6px rgba(0,0,0, .4); max-width: 250px; height: 250px; object-fit: cover; }
.img-contato {border: 3px solid #FFF; box-shadow: 2px 2px 6px rgba(0,0,0, .4); max-width: 150px; height: 150px; object-fit: cover; }
.img-parceiros {border: 3px solid #FFF; box-shadow: 2px 2px 6px rgba(0,0,0, .4); max-width: 250px; height: auto; margin: 5px; }
.colorido01{background-image: linear-gradient( to right, #a52627, #b83738);}
.colorido02{background: rgb(45,45,45);}
.coluna-txt{margin: 25px 0;}
.coluna-txt-blocos{width: 48%; margin: 15px 0;  border-bottom: 1px dotted rgb(77,77,77);}
.coluna-txt-blocos:last-child, .coluna-txt-blocos:first-child{border-bottom: none;}
.coluna-txt-blocos .img01{background:url(imgs/home01.jpg) center; background-size: cover; height:173px;}
.coluna-txt-blocos .img02{background:url(imgs/home02.jpg) center; background-size: cover; height:173px;}

.colunas-links-home{width: 49%;}
.colunas ul{list-style: none; padding: 0; margin: 0; width: 100%; display: flex; flex-wrap: wrap;}
.colunas ul li:nth-child(odd){background: rgb(221,221,221);}
.colunas ul li:nth-child(even){background: rgb(238,238,238);}
.colunas ul li:before{width: 0; height: 100%; top:0; left: 0; position: absolute; content: ""; background: rgb(77,77,77); transition: all 300ms; -webkit-transition:all 300ms;}
.colunas ul li:hover:before{width: 100%;}
.colunas ul li{position: relative; width: 100%; display: flex; align-items: center}
.colunas ul li a{width: 100%; display: block; padding: 17px 10px; font:13px 'Raleway', sans-serif; text-transform: uppercase; position: relative; z-index:1;}
.colunas ul li a:before{font:15px 'FontAwesome'; content:"\f101"; color: #a52627; margin-right: 15px;}
.colunas ul li a:hover:before{width: 100%;}
.colunas ul li a:hover{color:rgb(238,238,238);}

.noticias{margin: 40px auto;}
.noticias h1{color:#a52627; text-transform: uppercase; font-weight: 400; margin: 0;}
.noticias h1 span{color:rgb(77,77,77); font-size: 60%; display: block;}
#noticias_slide h4{color:rgb(77,77,77); margin: 0;}
#noticias_slide p{font-size: 13px; color:rgb(77,77,77); margin-bottom: 30px;}
#noticias_slide .botao {color: rgb(255,255,255); background: #a52627; font-size: 13px; padding: 10px 20px;}
#noticias_slide .botao:hover { background: rgb(77,77,77); color: rgb(255,255,255);}
#noticias_slide div {margin: 10px 0;}
.owl-theme .owl-controls .owl-page span { width: 15px !important; height: 15px !important; margin: 0 2px !important; border-radius: 50% !important; background: #999999 !important; opacity: .3 !important;}

.owl-theme .owl-controls .owl-page.active span, .owl-theme .owl-controls.clickable .owl-page:hover span { opacity: 1 !important;}

.utilitarios{margin: 20px auto;}
.util{width: 25%; align-items: flex-start; text-align: center;}
.util:hover .efeito-escuro{bottom: 0;}
.util:hover .tit-util{background: rgb(45,45,45);}
.util .tit-util{width: 100%; background: #a52627; padding: 15px; font:16px 'Raleway', sans-serif; font-weight: 400; text-transform: uppercase; color:rgb(255,255,255); margin: 0; margin-top: -5px; display: block;}
.img-qdd{position: relative; overflow: hidden; max-height: 350px; }
.img-qdd img{width: 100%; height: auto;}
.img-qdd .efeito-escuro{width: 100%; height: 100%; position: absolute; background: rgba(0,0,0,.5); bottom: -100%; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
.img-qdd .efeito-escuro p{color:rgb(255,255,255); width: 90%; line-height: 30px;}
.img-qdd .efeito-escuro a{color:rgb(255,255,255); border:1px solid rgb(255,255,255); padding: 20px;}
.img-qdd .efeito-escuro a:hover{background:rgba(255,255,255,.5); }

.espaco-programacoes{background: rgb(238,238,238); padding-bottom: 10px; }
.espaco-programacoes h1{color:#a52627; text-transform: uppercase; font-weight: 400; text-align: center;}
.espaco-programacoes h1 span{color:rgb(45,45,45); font-size: 50%; display: block; margin: 15px 0;}
.prog{width: 100%; background: rgb(45,45,45); margin: 5px 0;}
.prog button{width: 50px; background: #a52627; border:none; color:rgb(255,255,255); font-size: 30px; position: relative; cursor: pointer;} 
.prog button:before{width: 0; height: 100%; top:0; left: 0; position: absolute; content: ""; background: rgb(45,45,45); transition: all 300ms; -webkit-transition:all 300ms;}
.prog button:hover:before{width: 100%;}
.prog button i{z-index: 999; position: relative;}
.prog .txtprog{width: calc(100% - 50px); text-align: center;}
.prog .titprog{font:20px 'Raleway', sans-serif; color:#a52627; text-transform: uppercase; }
.prog .titprog span{font-size: 70%; color:rgb(255,255,255); display: block; margin: 10px 0; text-transform:lowercase;}

.msystem{padding: 50px 0;}
.msystem h1{width: 100%; color:rgb(238,238,238); text-transform: uppercase; font-weight: 400;}
.msystem h1 span{font-size: 50%; display: block; padding-top: 15px; text-transform:none;}
.msystem .ms{width: 49.5%; align-items: center; display: flex;}
.msystem input{width: 49.5%; margin: 5px 0; border: 1px solid rgba(255,255,255, .5); padding: 15px; background: rgba(255,255,255,.2); color: rgb(255, 255, 255);}
.msystem input::-webkit-input-placeholder{color: rgb(255, 255, 255);}
.msystem .bot{width: 49.5%; margin: 5px 0;}
.msystem button{width: 25%; border:none; cursor:pointer; padding: 15px 2px; background: rgb(45,45,45); color: rgb(255,255,255);}
.msystem button:hover{background: rgb(255,255,255); color: rgb(45,45,45);}
.msystem button.adm{width: 46%;}

.rodape{background: rgb(45,45,45); padding: 20px 0;}
.cont-rodape{align-items: center;}
.txtrod{color:rgb(255,255,255); font-size: 16px;}
.txtrod span{display: block; margin-top: 5px; font-size: 12px;}
.redes a{font-size: 32px; margin: 0 4px;}
.redes a:hover{color: rgb(255,255,255);}

.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: rgb(45,45,45); }
#formcontato button{width: 150px; border:none; cursor:pointer; padding: 15px 2px; background: #a52627; color: rgb(255,255,255); margin-top: 10px; }
#formcontato button:hover { background: rgb(45,45,45); }
#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; }

#newsletter { padding: 5px 0 0 0; margin-bottom: 30px;}
#newsletter { padding: 5px 0 0 0; margin-bottom: 30px;}
#newsletter i { font-size: 28px;}
#newsletter input, #newsletter button { margin: 2px;}
#newsletter input, textarea { width: 100%; padding: 15px;  }
#newsletter input, textarea, button { margin: 1px; font-size: inherit; border-radius: 2px; outline: none; border: none; resize: none; transition: all 250ms;}
#newsletter button, .botao { margin: 2px; cursor: pointer; background: #a52627; color: #FFF; padding: 10px 20px; border-radius: 3px; text-align: center; vertical-align: middle; transition: all 250ms;}
#newsletter button:hover, .botao:hover { background: #000;}

@media screen and (max-width:1023px){
    .colunas-links-home{width: 100%; display: flex; flex-wrap: wrap;}
    .coluna-txt-blocos{width: 100%;}
    .coluna-txt{margin: 20px 0 0 0;}
    .coluna-txt-blocos .img01{height:300px;}
    .coluna-txt-blocos .img02{height:300px;} 
    .msystem{padding: 30px 0;}
    .msystem .ms, .msystem .ms form{width: 100%;} 
    .coluna-txt-blocos{border-bottom: none;}
    .util{width: 50%;}    
}

@media screen and (max-width:768px){
    #home .colunas{width: 100%; padding: 10px;}
    .prog{width: 100%; margin: 10px 0;}
    #banner {height: 650px;}
    .contato-topo {text-align: center; width: 100% !important; margin-top: 20px; position: relative; }

@media screen and (max-width:599px){
    .slogan_pag span{display: none;}
    .msystem input, .msystem .bot{width: 100%;}
    .txtrod, .redes{width: 100%; text-align: center;}
    .noticias{text-align: center;}
    .util{width: 100%;}   
    

    nav{width: 100%; height: 100%; position: fixed; z-index: 10000; 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: 1000000; 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;}
    .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: 100000; display: block;}
    #control-nav:checked ~ nav{-webkit-transform: translate(0, 0); transform: translate(0, 0);}    
}

@media screen and (max-width:479px){
    .frases{display: none;}
    #banner{width: 100%; height: 480px;}
    #menu {height: auto;}
    
}