body{margin: 0; padding: 0; height: 100%; font-family: 'Archivo Narrow', sans-serif;  font-size: 16px; position: relative;}
html{height: 100%;}
*{box-sizing: border-box; resize: none; outline: none; font-family: inherit; font-size: inherit;}
a{text-decoration: none; color: inherit; font-size: inherit; -webkit-transition: all ease-out 300ms; transition: all ease-out 300ms;}
a:hover, a:focus{text-decoration: none; color: inherit;}
h1, h2, h3, h4, h5, h6{font-family: 'Yanone Kaffeesatz', sans-serif;}
h2{font-size: 38px; text-transform: uppercase; font-weight: 700;}

.inside{width: 98%; max-width: 1200px; margin: 0 auto; position: relative; z-index: 999;}
.flex{display: flex;}
.wrap{flex-wrap: wrap;}
.between{justify-content: space-between;}
.start{justify-content: flex-start;}
.center{justify-content: center;}
.vert{align-items: center;}

.btn-blue{color: rgb(255, 255, 255) !important; padding: 6px 12px; text-align: center; background: #530a28; border-radius: 2px;}
.btn-blue:hover{color: rgb(240, 240, 240) !important; background: rgb(142, 57, 51);}

.title-principal{font-size: 42px; text-transform: uppercase; width: 100%;}
.title-center{text-align: center; color: rgb(100, 100, 100);}
.title-center small{display: block; font-size: 20px; font-weight: 300;}


/*========BANNER BACKGROUND========*/
.banner{width: 100%; height: 100%; position: fixed; object-fit: cover;}
.slide{width: 100%; height: 100%; background-size: cover; background-position: center; position: relative; top: -50px;}
.slide:before{content: ''; position: absolute; width: 100%; height: 100%; background: black url(imagens/dots.png); z-index: 0; opacity: .5;}


/*========TOPO========*/
.topo{width: 100%; min-height: 600px; position: relative; z-index: 1000;}
.logo{max-width: 500px; /*border: 3px solid rgb(255, 255, 255); padding: 5px;*/}

.zone{width: 100%; background: rgb(255, 255, 255); padding: 30px; z-index: 1000; box-shadow: 0 2px 2px rgb(200, 200, 200); position: relative; align-self: flex-end;}
.zone .logo2{ opacity: 0; left: -100%; position: relative; height: 0; max-width: 0;}

.small{position: fixed !important; top: 0; left: 0; padding: 5px 30px !important;}
.small .logo2{opacity: 1; max-width: 180px; left: 0; height: auto; -webkit-transition: all ease-out 500ms; transition: all ease-out 500ms; margin-right: 20px;}
/* .small .logo2 img{filter: invert(70%);} */

.menu{align-self: center;}
.mainmenu{width: 100%; margin: 0; padding: 0; align-items: center;}
.mainmenu li{padding: 10px 15px; border-right: 1px solid rgb(230, 230, 230); list-style: none; text-align: center;}
.mainmenu li a{color: rgb(100, 100, 100); text-transform: uppercase; font-size: 14px; white-space: nowrap;}
.mainmenu li a:hover{color: #530a28;}
.mainmenu li:last-child{border-right: none;}

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

.redes .fa{width: 40px; line-height: 40px !important; text-align: center; border: 1px solid rgb(200, 200, 200); color: rgb(200, 200, 200); border-radius: 50%; font-size: 18px;}
.redes .fa:hover{color: rgb(255, 255, 255);}
.redes .fa-facebook:hover{border-color: rgb(72, 103, 170); background: rgb(72, 103, 170);}
.redes .fa-twitter:hover{border-color: rgb(29, 161, 242); background: rgb(29, 161, 242);}
.redes .fa-instagram:hover{border-color: rgb(55, 90, 130); background: rgb(55, 90, 130);}
.redes .fa-linkedin:hover{border-color: rgb(0, 123, 182); background: rgb(0, 123, 182);}


/*========FAIXAS========*/
.ctn-white{background: rgb(255, 255, 255); width: 100%; position: relative; z-index: 999; padding: 65px 0;}
.gray{background: rgb(244, 244, 244);}


/*========CONTEUDO HOME========*/
.text-home{flex: 1 420px; margin: 20px; text-align: justify;}
.text-home h2{ border-left: 1px solid rgb(200, 200, 200); color: rgb(100, 100, 100); padding: 15px; margin-bottom: 40px; margin-top: 0; text-align: justify;}
.text-home h2 small{display: block; font-size: 20px; font-weight: 300;}


/*========CONTEUDO PÁGINAS========*/
.text h1{font-weight: 700; color: rgb(100, 100, 100);}
.text h1 small{display: block;}

/*========PROGRAMAÇÕES========*/
.prog h2{width: 100%;}
.box-prog{flex: 1 270px; padding: 10px 20px; margin: 10px; position: relative;}
.box-prog h3{font-size: 28px;}
.box-prog h3 span{display: block; font-weight: 700; font-size: 58px;}
.box-prog:before{position: absolute; content: ""; opacity: .3; bottom: 0; left: 0; width: 50px; height: 2px; background: #530a28;  -webkit-transition: all ease-out 300ms; transition: all ease-out 300ms;}
.box-prog:hover:before{width: 100%; opacity: 1;}


/*========UTILITARIOS========*/
.ctn-picture{width: 100%; position: relative;  z-index: 999;}
.box-picture{flex: 1 340px; padding: 100px 65px; text-align: center; background-size: cover; background-position: center; background-repeat: no-repeat; outline: 1px solid transparent;}
.box-picture h2{color: rgb(255, 255, 255); text-transform: uppercase; font-size: 35px; }
.box-picture p{color: rgb(255, 255, 255);}
.box-picture:hover{outline-offset: -50px; outline: 1px solid rgb(255, 255, 255);}

/*========NOTÍCIAS========*/
.notUni{flex: 1 472px; margin: 30px 10px;}
.notUni .tituloNot{font-family: 'Yanone Kaffeesatz', sans-serif; font-size: 20px; font-weight: 700; font-size: 24px;}
.notUni .data{background: rgb(244, 244, 244); color: rgb(0, 0, 0); padding: 20px; margin-right: 10px; font-weight: 300;}
.notUni .descricao{color: rgb(51, 51, 51);}

/*========FAIXA VERMELHA========*/
.zone-blue{background-image: linear-gradient( to right, #530a28, rgb(173, 52, 43)); padding: 30px 0; position: relative; z-index: 999;}
.zone-blue h2{color: rgb(255, 255, 255); text-align: center; font-weight: 300;}

/*========CONSULTAS========*/
.consultas h2{width: 100%;}
.box-consultas{flex: 1 300px; margin: 10px; position: relative;}
.box-consultas h3{font-size: 28px;}
.box-consultas:before{position: absolute; content: ""; opacity: .3; bottom: 0; left: 0; width: 50px; height: 2px; background: #530a28;  -webkit-transition: all ease-out 300ms; transition: all ease-out 300ms;}
.box-consultas:hover:before{width: 60%; opacity: 1;}

/*========LOCALIZAÇÃO========*/
.place{position: relative; z-index: 999; background: rgb(255, 255, 255);}
.contact{flex: 2;}
.contact h2{color: rgb(100, 100, 100);}
.contact h2 small{display: block; font-size: 20px; font-weight: 300;}
.contact:last-child{padding: 10px 50px 0 50px; flex: 1;}
.contact .fa{color: #530a28 !important;}
.contact p span{margin-left: 15px;}
.contact .formulario{width: 100%; margin-top: 30px;}
.contact .formulario input, .contact .formulario textarea{width: 100%; padding: 10px; margin-bottom: 5px; border: 1px solid rgb(220, 220, 220);}
.contact .formulario input[name="palavra"]{padding: 14px; margin-bottom: 0; width: 100% !important;}
.contact .formulario .btn-blue{padding: 15px 20px;}

/*========RODAPÉ========*/
.rodape{background: rgb(33, 33, 33); padding: 65px 0; position: relative; z-index: 999;}
.rodape h3{margin: 0; color: rgb(244, 244, 244); border-bottom: 1px solid rgb(100, 100, 100); margin-bottom: 15px; font-weight: 700;}
.rodape .ctn-list{flex: 1; margin-left: 180px;}
.rodape .list{padding: 0; margin: 0; list-style: none; flex: 1; margin-left: 40px;}
.rodape .list li a{color: rgb(150, 150, 150); line-height: 28px; display: block;}
.rodape .list li a:hover{color: rgb(255, 255, 255);}
.rodape .search h3{border: 0;}
.rodape .search p{color: rgb(150, 150, 150); margin-top: 20px;}
.rodape .search input{width: 80%; border: 0; background: rgba(255, 255, 255, .2); padding: 10px; color: rgb(255, 255, 255);}
.rodape .search .btn-search{margin: 0; padding: 10px; border: 0;}

.corpo-juridico {border: 1px solid rgba(100, 100, 100, .1); padding: 20px; margin: 5px; flex: 1; text-align: center;}
.corpo-juridico h2 {color: rgb(100, 100, 100);}
.corpo-juridico p {color: rgb(100, 100, 100);}
.corpo-juridico-container {flex: 1;}

@media screen and (max-width: 1024px){
    .small{padding: 5px !important;}
    .rodape .ctn-list{margin-left: 0;}
    .rodape .list{margin-left: 20px;}
}

@media screen and (max-width: 768px){
    .small .logo2{opacity: 1; max-width: 180px; left: 0; height: auto; -webkit-transition: all ease-out 500ms; transition: all ease-out 500ms; margin-right: 20px;}
    .menu{position: fixed; z-index: 999; height: 100%; top: 0; right: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .8); -webkit-transform: translate(100%, 0); transform: translate(100%, 0);  -webkit-transition: all ease-out 300ms; transition: all ease-out 300ms;}
    .mainmenu{width: 50%; height: 100%; margin: 0 auto; position: relative; display: flex; justify-content: center; align-items: center; flex-direction: column;}
    .mainmenu li{border-bottom: 1px solid rgba(220 ,220, 220, .5); border-right: 0; flex: 1; align-items: center; display: flex;}
    .mainmenu li a{color: rgb(255, 255, 255); text-transform: uppercase; display: block;}
    
    .control-nav {display: block; cursor: pointer; color: rgb(100, 100, 100); align-self: center; margin-bottom: 0 !important;}
    .control-nav-close {width: 50px; height: 100%; text-align: center; position: fixed; right: 0; top: 20px; bottom: 0; left: 20px;  display: none; 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); -ms-transform: translate(0, 0); transform: translate(0, 0);}
    #control-nav:checked ~ .control-nav-close{opacity: 1; z-index: 100000; display: block;}
    #control-nav:checked ~ .menu{-webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0);}
    
    .box-prog{flex: 1 768px; text-align: center;}
    .box-prog:before{opacity: .3 ;width: 100%;}
    .box-picture{flex: 1 768px;}
    .contact{flex: 1 100%;}
    .contact:last-child{order: 1; padding: 20px;}
    .contact:first-child{order: 2;}
    .rodape .ctn-list{order: 1 !important; flex: 1 100%; margin-left: 0; margin-bottom: 30px;}
    .rodape .list{flex: 1 100%; margin-left: 0; margin-bottom: 20px;}
    .rodape .search{order: 2 !important; flex: 1 100%;}
}

@media screen and (max-width: 475px){
    .small{justify-content: center;}
    .small .redes{display: none;}
    .small .menu-container{width: 100%; justify-content: space-between; margin-bottom: 10px;}
    .zone-blue h2 span{display: block;}
    .notUni .tituloNot{flex-direction: column;}
    .notUni .data{width: 100%;}
    .notUni .data br{display: none;}
    .rodape .search input{width: 85%;}
}

@media screen and (max-width: 375px){
    .contact p span{display: block; margin-left: 0;}
    .rodape .search input{width: 80%;}
}

@media screen and (max-width: 320px){
    .rodape .search input{width: 75%;}
    h2 span{display: block;}
}