body{margin: 0; padding: 0; background: rgb(65, 65, 67); font-family: 'Archivo Narrow', sans-serif;}
*{box-sizing: border-box; resize: none; outline: none;}
a{text-decoration: none; color: inherit; -webkit-transition: all ease-out 300ms; transition: all ease-out 300ms;}
h1, h2, h3{font-family: 'Josefin Sans', sans-serif; font-weight: normal;}

.container{width: 98%; max-width: 1200px; margin: 0 auto; background: rgb(255, 255, 255);}
.flex{display: flex; flex-wrap: wrap;}
.between{justify-content: space-between;}
.around{justify-content: space-around;}

.data{width: 100%; background: rgb(51, 51, 51); padding: 5px 10px; align-items: center;}
#data{color: rgb(200, 200, 200);}

.sociais{width: 133px;}
.redes{width: 30px; line-height: 30px !important; background: rgb(100, 100, 100); text-align: center; color: rgb(255, 255, 255);}
.fa-facebook:hover{background: rgb(72, 103, 170);}
.fa-twitter:hover{background: rgb(29, 161, 242);}
.fa-google-plus:hover{background:rgb(222, 82, 69);}
.fa-instagram:hover{background:rgb(50, 92, 134);}

.topo{width: 95%; margin: 0 auto; align-items: center;}

.logo{max-width: 180px; padding: 10px 0;}

.menu{width: 40%;}
.menu select{width: 100%; font: 18px/50px 'Oswald', sans-serif; color: rgb(255, 255, 255); display: none; border: 0; border-radius: 3px; padding: 15px 5px; margin: 10px auto; background: rgb(72, 34, 119);}
.mainmenu{flex-grow: 1; margin: 0; padding: 0;}
.mainmenu li{flex-grow: 1; text-align: center; list-style: none;}
.mainmenu li a:hover{color: rgb(255, 13, 5);}

#banner{width: 95%; margin: 0 auto; overflow: hidden; position: relative; border: 10px solid rgb(33, 11, 57);}
#faixa-banner{width: 100%; background: url(imagens/fundo-titulo.jpg) center; height: 150px; position: relative; z-index: 9999; justify-content: center;}
#fotos{width: 100%; overflow: hidden;}
.logo-banner{max-width: 320px;}

.inicial{width: 95%; margin: 0 auto; padding: 50px 0;}
.lateral{width: 30%;}
.lateral .box{width: 100%; border: 1px solid rgb(200, 200, 200); padding: 10px; display: block; margin-bottom: 10px;}
.lateral .box h2{color: rgb(255, 10, 9);}
.lateral .box h2, .lateral .box p{margin: 0;}
.lateral .box:hover{background: rgb(220, 220, 220);}

.textos{width: 68%;}
.textos .blocos{border: 1px solid rgb(200, 200, 200); text-align: center; width: 49%;}
.textos .blocos i, .textos .blocos h2{color: rgb(255, 10, 9);}

.conteudo{width: 95%; margin: 0 auto; padding: 50px 0;}
.conteudo p{text-align: justify;}
.conteudo ul{margin: 0; padding: 0; list-style: none;}
.conteudo h1{background: url(imagens/fundo-titulo.jpg); line-height: 150px; color: rgb(255, 255, 255); padding: 0 10px; width: 100%;}

.clientes{border: 1px solid rgb(200, 200, 200); margin: 10px;}

.contato{background: rgb(72, 34, 119); padding: 20px 0;}
.contato-container{width: 95%; margin: 0 auto; color: rgb(255, 255, 255);}
.contato-container i{line-height: 100px !important; border-right: 1px solid rgba(255, 255, 255, .3); width: 15%; text-align: center;}
.contato-container h2{width: 80%;}
.contato-container:hover{background: rgba(0, 0, 0, .3);}

.rodape{background: rgb(51, 51, 51); padding: 30px 0;}
.rodape-conteudo{width: 95%; margin: 0 auto;}
.rodape-conteudo h2{width: 100%; color: rgb(255, 255, 255); margin: 0;}
.listas ul{margin: 0; padding: 0; list-style: none;}
.listas ul li a{color: rgb(255, 255, 255); line-height: 25px;}
.listas ul li a:hover{color: rgb(255, 10, 9);}

.caixa p{color: rgb(255, 255, 255);}

.redes-rodape{width: 50px; line-height: 50px !important; text-align: center; color: rgb(255, 255, 255); background: rgba(255, 255, 255, .1);}


@media screen and (max-width: 768px){
    .topo{justify-content: center;}
    .menu{width: 100%; margin: 20px 0;}
    .mainmenu{display:none;}
	.menu select{display:block;}
    .lateral{width: 100%; order: 2;}
    .textos{width: 100%; order: 1; margin-bottom: 20px;}
    .listas{width: 100%; margin-bottom: 20px;}
    .textos .blocos{width: 100%; margin-bottom: 10px;}
    .contato i{display: none;}
    .contato h2{width: 100%; padding: 10px;}
    
}

@media screen and (max-width: 425px){
    .conteudo p span{display: block;}
    .listas ul{width: 100%;}
}