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

.container{width: 98%; max-width: 1200px; margin: 0 auto;}
.flex{display: flex; flex-wrap: wrap;}
.between{justify-content: space-between;}
.around{justify-content: space-around;}
.vert{align-items: center;}
.btn{display: inline-block; width: 200px; line-height: 50px; color: rgb(255, 255, 255); background: rgb(71, 82, 106); text-align: center; border-radius: 2px; margin-bottom: 5px;}
.btn:hover{background: rgb(51, 60, 81);}

.topo{width: 100%; background: rgb(255, 255, 255); border-bottom: 3px solid rgb(240, 240, 240); position: fixed; z-index: 999;}
.logo{max-width: 280px; flex-grow: 1;}

.small .logo{max-width: 200px;}

.menu{flex-grow: 1;}
.menu select{width: 100%; font-family: 'Roboto', sans-serif; font-weight: 300; font-size: 22px; color: rgb(255, 255, 255); display: none; border: 0; padding: 20px 5px;  margin: 10px auto; background: rgb(66, 77, 99);}
.mainmenu{margin: 0; padding: 0;}
.mainmenu li{list-style: none; flex-grow: 1; text-align: center;  padding: 0 20px;}
.mainmenu li a{text-transform: uppercase; font-size: 14px; color: rgb(122, 122, 122);}
.mainmenu li a:hover{color: rgb(71, 82, 106);}

.endereco p{margin: 3px 0; color: rgb(120, 120, 120); flex-grow: 1;}
.endereco p i{margin-right: 5px; color: rgb(71, 82, 106);}
.endereco p a:hover{color: rgb(71, 82, 106);}

.banner{width: 100%; top: 95px; position: relative; overflow: hidden; margin-bottom: 195px; background: url(imagens/img-01.jpg) no-repeat; background-size: 100%;}
.slogan{text-align: center; margin: 150px 0;}
.slogan h2{color: rgb(255, 255, 255); font-size: 42px; margin: 0; text-shadow: 1px 1px 3px rgb(51, 51, 51);}
.slogan h2 small{display: block; font-size: 22px;}
.slogan a{display: inline-block; width: 200px; line-height: 50px; color: rgb(255, 255, 255); border: 1px solid rgb(255, 255, 255); text-align: center; margin-top: 20px; border-radius: 2px;}
.slogan a:hover{background: rgb(71, 82, 106); border: 1px solid rgb(71, 82, 106);}

.utilitarios{background: rgba(71, 82, 106, .5);}
.utilitarios .container .box{flex: 1 250px; color: rgb(255, 255, 255); padding: 15px; margin: 10px 0;}
.utilitarios .container .box h2, .utilitarios .container .box p{margin: 0;}
.utilitarios .container .box:hover{background: rgba(0, 0, 0, .3);}

.home{margin: 100px auto; padding: 20px 0;}
.home .blocos{flex: 1 450px}
.home .blocos h2{color:  rgb(71, 82, 106); text-transform: uppercase; margin: 0;}
.home .blocos h2 small{font-size: 18px; display: block; text-transform: none;}
.home .blocos p{color: rgb(120, 120, 120); text-align: justify;}

.text{width: 100%; top: 95px; position: relative; margin-bottom: 195px; padding: 50px 0;}
.text .titulo-principal{color: rgb(71, 82, 106); text-transform: uppercase;}
.text .titulo-secundario{background: rgb(220, 220, 220); padding: 10px; font-size: 22px;}

.ct_image{max-width: 768px; margin: 0 auto;}

.links{background: rgb(245, 245, 245); padding: 50px 0;}
.links .bt-links{flex: 1 300px; text-align: center; padding: 10px; border-right: 1px solid rgb(215, 215, 215);}
.links .bt-links i{background: rgb(71, 82, 106); color: rgb(255, 255, 255); margin-bottom: 20px; width: 50px; line-height: 50px !important; border: 1px solid rgb(71, 82, 106); border-radius: 50%; text-align: center;}
.links .bt-links h2{color: rgb(71, 82, 106); margin: 0;}
.links .bt-links p{margin: 0;}
.links .bt-links:hover{background: rgb(220, 220, 220);}
.links .bt-links:last-child{border: none;}

.curriculos{padding: 50px 0; text-align: center;}
.curriculos h2{color: rgb(71, 82, 106);}
.curriculos p{color: rgb(120, 120, 120);}

.comentarios{padding: 50px 0; background: rgb(245, 245, 245);}
.comentarios>h2{width: 100%; text-align: center; text-transform: uppercase;}
.comentarios-box{flex: 1 490px; border: 1px solid rgb(255, 255, 255); padding: 10px; background: rgba(255, 255, 255, .5); margin: 5px; justify-content: flex-end; }
.comentarios-box h2{width: 100%; margin: 0;}
.comentarios-box .perfil{width: 100px; height: 100px; border-radius: 50%; background-position: center; background-size: cover; border: 2px solid rgb(190, 190, 190);}

.esc-virtual{width: 100%; background: rgb(71, 82, 106); padding: 50px 0;}
.esc-virtual h2{width: 100%; color: rgb(255, 255, 255); margin-top: 0; text-transform: uppercase;}
.esc-virtual .ct_input{flex: 1;}
.esc-virtual form label{padding: 13px 20px; background: rgb(240, 240, 240); color: rgb(155, 155, 155); border-right: 1px solid rgb(220, 220, 220);}
.esc-virtual form input{padding: 15px 10px; flex: 1; border: 0; margin-right: 5px; font-size: 14px; text-transform: uppercase;}
.esc-virtual form button{padding: 14px 20px; border: 0; background: rgba(0, 0, 0, .5); color: rgb(255, 255, 255); cursor: pointer; font-size: 14px; text-transform: uppercase;}

.rodape{background: rgb(51, 51, 51); padding-top: 80px;}
.rodape h3{color: rgb(200, 200, 200); width: 100%; margin-top: 0;}
.container-lista{flex-grow: 2;}
.container-lista .lista{margin: 0; padding: 0; list-style: none; flex-grow: 1; margin-right: 15px;}
.container-lista .lista li{color: rgb(200, 200, 200); border-bottom: 1px solid rgb(72, 72, 72);}
.container-lista .lista li a{display: block; padding: 5px;}
.container-lista .lista li a:hover{background: rgb(30, 30, 30);}

.redes{flex-grow: 2; margin-right: 80px;}
.redes .icones{width: 50px; line-height: 50px; text-align: center; color: rgb(255, 255, 255); border-radius: 50%; background: rgb(30, 30, 30);}
.redes .fa-facebook:hover{background: rgb(72, 103, 170);}
.redes .fa-twitter:hover{background: rgb(29, 161, 242);}
.redes .fa-linkedin:hover{background: rgb(1, 119, 181);}

.fx{background: rgb(20, 20, 20); padding: 10px; margin-top: 40px; color: rgb(255, 255, 255); font-size: 14px;}


@media screen and (max-width: 1024px){
    .small .logo{max-width: 280px;}
    .topo{position: relative;}
    .topo .container{flex-direction: column;}
    .menu{width: 100%; margin-top: 40px;}
    .endereco{width: 100%; display: flex; margin-top: 20px; flex-wrap: wrap; background: rgb(220, 220, 220); padding: 15px 10px;}
    .slogan{margin: 125px 0;}
    .banner, .text{top: 0; margin-bottom: 0;}
    .home .blocos:first-child{display: none;}
    .redes{margin:0 0 30px 0;}
    .links{flex-direction: column;}
}

@media screen and (max-width: 768px){
    .slogan{margin: 75px 0;}
}

@media screen and (max-width: 600px){
    .slogan{margin: 166px 0 0 0; background: rgba(71, 82, 106, .5); padding: 50px 0;}
}

@media screen and (max-width: 475px){
    .mainmenu{display:none;}
	.menu select{display:block;}
    
    .utilitarios{background: rgb(71, 82, 106);}
    .esc-virtual .ct_input{flex: 1 100%; margin-bottom: 5px;}
}

@media screen and (max-width: 320px){
    .slogan{margin: 125px 0 0 0;}
}