body{margin: 0; padding: 0;}
*{resize: none; outline: none; box-sizing: border-box;}
h1, h2, h3, h4, h5, h6{font-family: 'Open Sans Condensed', sans-serif; font-weight: normal;}
/*h1, h2, h3, h4, h5, h6{font-family: 'Poiret One', cursive; font-weight: normal;}*/
p, a{font-family: 'Archivo Narrow', sans-serif;}
a{text-decoration: none; color: inherit; -webkit-transition: all ease-out 300ms; transition: all ease-out 300ms;}

.branco::-webkit-input-placeholder{color: rgb(255, 255, 255);}

.container{width: 98%; max-width: 1200px; display: flex; flex-wrap: wrap; margin: 0 auto;}
.between{justify-content: space-between;}
.centerVertical{align-items: center}
.flex{display: flex;}
.wrap{flex-wrap: wrap;}

#topo{width: 100%; background: rgb(255, 255, 255); position: relative; z-index: 999;}
#logo{width: 100%; max-width: 260px; font: 52px 'Open Sans Condensed', sans-serif; color: rgb(51, 51, 51); text-align: center;  letter-spacing: -1px}
#logo img{display: block;}

.menu{width:60%;}
.menu select{width: 90%; font: 18px/50px 'Archivo Narrow', sans-serif; color: rgb(255, 255, 255); display: none; border: 0; border-radius: 3px; padding: 15px 5px;  margin: 10px auto; background: rgb(153, 225, 100);}
#mainmenu{width:100%; margin: 0; padding: 0; display: flex;}
#mainmenu li{flex: 1; list-style: none; text-align: center;}
#mainmenu li a{font: 19px/135px 'Open Sans Condensed', sans-serif; color: rgb(0, 0, 0); text-transform: uppercase; display: block;}
#mainmenu li a:hover{background: rgb(153, 225, 100); color: rgb(255, 255, 255);}

#banner{width: 100%; position: relative;}
#slogan{width: 98%; max-width: 1200px; margin: 0 auto; position: relative;  padding: 150px 0; display: flex; flex-wrap: wrap;}
#frases{width: 100%; position: relative; overflow: hidden; margin-top: 50px 0;}
#frases h2{width: 100%; color: rgb(255, 255, 255); background: rgba(0, 0, 0, .5); padding: 25px; margin: 0; text-transform: uppercase;}
#frases h2 span{display: block;}
#bottons{width: 100px; display: flex; align-self: flex-end; background: rgb(153, 225, 100);}
.arrows{width: 50px; font-size: 25px !important; line-height: 50px !important; background: rgb(153, 225, 100); color: rgb(255, 255, 255); text-align: center; cursor: pointer;}
.arrows:hover{background: rgba(0, 0, 0, .3);}
.fa-angle-left{border-right: 1px solid rgba(0, 0, 0, .2)}

#fotos{width: 100%; height: 100%; position: absolute; z-index:0;}
#fotos .slide{width: 100%; height: 100%; background-size: cover !important;}

.faixa{width: 100%; background: rgb(153, 225, 100); padding:30px 0; position: relative; z-index: 999;}
.faixa .busca{width:50%; display: flex;}
.faixa .busca input{width: 85%; border:0; background: rgba(0, 0, 0, .3); padding: 20px 10px; font: 16px 'Archivo Narrow', sans-serif; color: rgb(255, 255, 255);}
.faixa .busca button{width: 15%; border: 0;  background: rgba(0, 0, 0, .5); cursor: pointer;}
.faixa .busca button .fa-search{color: rgb(255, 255, 255); font-size: 25px !important;}

#redes{width: 190px; display: flex; justify-content: space-between; align-items: flex-start;}
#redes a{width: 60px; line-height: 60px !important; color: rgb(255, 255, 255); font-size: 25px !important; background: rgba(0, 0, 0, .3); text-align: center;}
#redes .fa-facebook:hover{background: rgb(72, 103, 170);}
#redes .fa-twitter:hover{background: rgb(0, 172, 237);}
#redes .fa-linkedin:hover{background: rgb(1, 119, 181);}

.inicial{width: 100%; background: rgb(238, 238, 238); padding:50px 0; position: relative; z-index: 999;}
.box{width: 33%; background: rgb(255, 255, 255); padding: 30px 0; margin-bottom: 8px; text-align: center;  -webkit-transition: all ease-out 300ms; transition: all ease-out 300ms;}
.box i{color: rgb(153, 225, 100); width: 100px; line-height: 100px !important; font-size: 50px !important; border-radius: 50%;}
.box .btn{width: 100px; font: 16px/40px 'Archivo Narrow', sans-serif; color: rgb(255, 255, 255); background: rgb(51, 51, 51); display: block; margin: 0 auto;}
.box .btn:hover{background: rgb(153, 225, 100);}
.box:hover{box-shadow: 0 0 5px rgb(212, 212, 212);}
.box h2{text-transform: uppercase;}

#conteudo{width: 98%; max-width: 1200px; margin: 0 auto;}
#conteudo h1{text-transform: uppercase; line-height: 70px; background: rgb(153, 225, 100);  color: rgb(255, 255, 255);}
#conteudo h1 i{padding: 0 20px;}
#conteudo ul li{font-family: 'Archivo Narrow', sans-serif;}

.acessorapido{padding: 30px 0;}
.acessorapido h2{color: rgb(153, 225, 100); width: 100%; font-size: 35px; text-transform: uppercase;}
.acessorapido ul{width: 19.5%; margin: 0; padding: 0;}
.acessorapido ul li{list-style: none;}
.acessorapido ul li a{font: 16px/50px 'Archivo Narrow', sans-serif; color: rgb(51, 51, 51); display: block; padding: 0 10px; border-bottom: 1px solid rgb(196, 192, 192);}
.acessorapido ul li a:hover{color: rgb(255, 255, 255); background: rgb(153, 225, 100); border-bottom: 1px solid rgb(255, 255, 255);}

.programacao{width: 48%; display: flex; flex-wrap: wrap; align-content: flex-start;}
.programacao h2{color: rgb(255, 255, 255); font-size: 32px; text-transform: uppercase; width: 100%;}
.slideNot{width: 100%; background: rgba(0, 0, 0, .3);  padding: 10px;}
.slideNot h3, .slideNot p, .slideNot a{color: rgb(255, 255, 255)}
.slideNot a{font: 16px 'Archivo Narrow', sans-serif;}
.slideNot a:hover{color: rgb(220, 220, 220);}
.programacao .midiaSystem{width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 20px;}
.programacao .midiaSystem input{width: 100%; background: rgba(0, 0, 0, .3); border:0; padding: 20px 10px; margin-bottom: 5px; font: 16px 'Archivo Narrow', sans-serif; color: rgb(255, 255, 255);}
.programacao .midiaSystem input[name="user_mail"], .programacao .midiaSystem input[name="user_senha"]{width: 49.5%;}
.programacao .midiaSystem button{width: 100px; font: 16px/40px 'Archivo Narrow', sans-serif; color: rgb(255, 255, 255); background: rgba(0, 0, 0, .3); cursor:pointer; border: 0;}
.programacao .midiaSystem button:hover{background: rgba(0, 0, 0, .6);}
.programacao .midiaSystem a{font: 16px/40px 'Archivo Narrow', sans-serif; color: rgb(255, 255, 255); margin-left: 10px;}
.programacao .midiaSystem a:hover{color: rgb(220, 220, 220);}
.programacao .links{width: 100%; font: 28px/70px 'Open Sans Condensed', sans-serif; color: rgb(255, 255, 255); background: rgba(0, 0, 0, .3); display: block; margin-bottom: 5px;}
.programacao .links i{width: 90px; line-height: 70px !important; background: rgba(0, 0, 0, .3); text-align: center;}
.programacao .links:hover{background: rgba(0, 0, 0, .6);}

#rodape{width: 100%; padding: 30px 0; background: rgb(51, 51, 51); text-align: center; position: relative; z-index: 999;}
#rodape h2{font: 47px 'Poiret One', cursive;}
#rodape h2, #rodape p{color: rgb(255, 255, 255);}
#rodape a{color: rgb(153, 225, 100);}

.img-serv{max-width: 800px; margin: 0 auto;}
.img-serv img{display: block;}

.video-box{max-width: 400px; flex: 1;}

.btn-news,.atual{font-family: 'Archivo Narrow', sans-serif; padding: 10px; background: rgb(153, 225, 100); color: rgb(255, 255, 255);}
.atual{background: rgb(61, 90, 40) !important;}

@media screen and (max-width:768px){
    #topo .container{justify-content: center;}
    .menu{width: 100%;}
    .box{width: 49.5%;}
    .acessorapido ul{width: 49%;}
    .programacao{width: 100%;}
}
@media screen and (max-width:475px){
    #mainmenu{display:none;}
	.menu select{display:block;}
    .faixa .busca{width:100%; margin-bottom: 20px;}
    #redes{margin: 0 auto;}
    .box, .programacao .links{width: 100%; margin-bottom: 10px;}
    .programacao .midiaSystem input{width: 100% !important;}
    .programacao .midiaSystem a{display: block;}
}
@media screen and (max-width:375px){
    #banner{padding: 75px 0;}
    #frases h2{font-size: 20px;}
    .acessorapido ul{width: 100%;}
}