*{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: '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;}
.flex{display: flex; flex-wrap: wrap; justify-content: space-between;}

#topo{position: relative;}

#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 rgb(112, 40, 41); }
#banner:before{position: absolute; content: " "; width: 100%; height: 100%; background: rgba(0,0,0, .1); top: 0; left: 0;}
#banner .largura-site{ display: flex; justify-content: center; 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: 100%; max-width: 350px; margin: 0 auto; z-index: 999; margin-top: 50px;}
.logo img{display: block; width: 100%; height: auto;}

.frases{width: 100%;}
.frases p{font:38px 'Comfortaa', cursive; color:rgb(255,255,255); text-align:center; text-shadow:2px 2px 2px rgb(45,45,45); 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( 255, 255, 255, 0.5); cursor: pointer; z-index: 999; position: relative; margin: 10px;}
.slogan_pag span:hover, .slogan_pag span.cycle-pager-active { background: rgb(255,255,255) !important;}

#fixa-menu{position: fixed; z-index: 9999; 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); transition: all 300ms; -webkit-transition:all 300ms;}
#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;}

#home{margin: 20px auto;}
#home .colunas{width: 49%; padding: 10px 0;}
#home h1{color:rgb(112, 40, 41); 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;}
#home h3 span{color:rgb(112, 40, 41); font-size: 60%; display: block;}
#home p{font-size: 13px; color:rgb(77,77,77); text-align: justify; margin: 0;}
#home p a{color:rgb(112, 40, 41);}
#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 .titulo{font:20px 'Raleway', sans-serif; color:rgb(112, 40, 41); text-transform: uppercase; margin-bottom: 10px; }
.colorido01{background-image: linear-gradient( to right, rgb(112, 40, 41), rgb(182, 88, 86));}
.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; height:173px;}
.coluna-txt-blocos .img02{background:url(imgs/home02.jpg) center; 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: 20px 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: rgb(112, 40, 41); 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:rgb(112, 40, 41); 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: rgb(112, 40, 41); 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: rgb(112, 40, 41); padding: 15px; font:16px 'Raleway', sans-serif; font-weight: 400; text-transform: uppercase; color:rgb(255,255,255); margin: 0; display: block;}
.img-qdd{position: relative; overflow: hidden; max-height: 350px}
.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: 60px 10px;}
.espaco-programacoes h1{color:rgb(112, 40, 41); 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: 49%; background: rgb(45,45,45); margin: 5px 0;}


.prog .arrow{width: 50px; background: rgb(112, 40, 41); border:none; color:rgb(255,255,255); font-size: 30px; position: relative; cursor: pointer; padding: 30px 0; z-index: 999; text-align: center;} 
.prog .arrow:before{width: 0; height: 100%; top:0; left: 0; position: absolute; content: ""; background: rgb(45,45,45); transition: all 300ms; -webkit-transition:all 300ms; z-index: -1;}
.prog:hover .arrow:before{width: 100%;}

.prog .arrow{z-index: 999; position: relative;}

.prog .txtprog{width: calc(100% - 50px); text-align: center;}
.prog .titprog{font:20px 'Raleway', sans-serif; color:rgb(255, 255, 255); text-transform: uppercase; }
.prog .titprog span{font-size: 70%; color:rgb(255,255,255); display: block; margin: 10px 0; text-transform:lowercase;}

.msystem{padding: 100px 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: 14px;}
.txtrod span{display: block; margin-top: 5px; font-size: 12px;}
.redes a{color: rgba(255,255,255,0.2); font-size: 26px; 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: rgb(112, 40, 41); 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; }

.tit_interno{color: rgb(159, 72, 71) !important; margin: 10px 0 !important; padding: 0 !important;}

@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:767px){
    #home .colunas{width: 100%; padding: 10px;}
    .prog{width: 100%; margin: 10px 0;}
}

@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: 400px;}
    #menu {height: auto;}
}