*{margin: 0; padding: 0; list-style: none; font-family: Arial, Helvetica, sans-serif;}
html,body{width: 100%; height: 100%;}
.wrapper{max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: 10px; padding-right: 10px;}

#header{width: 100%; height: 180px; border-top: 8px #800d11 solid;}
#header .wrapper{position: relative;}
#header img.logotipo{position: absolute; left: 10px; top: 40px;}
#header ul.menu{position: absolute; right: 10px; top: 60px;}
#header ul.menu li{display: inline-block;}
#header ul.menu li a{padding: 16px 19px; text-transform: uppercase; font-size: 16px;}
#header ul.menu li a:hover{background-color: #231f20;}
#header .menuSecundario{margin-top: 0; display: none; width: 100%; top: 0; z-index: 99999999; background-color: #ffffff; height: 70px; -webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.5); box-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);}
#header .menuSecundario ul.menu{position: absolute; right: 10px; top: 26px;}
#header .menuSecundario a.logotipo{position: absolute; left: 10px; top: 10px;}

#intro{padding-bottom: 60px;}
#intro .wrapper img{width: 100%;}
#intro .marketing{max-width: 580px; float: right; margin-bottom: 110px;}
#intro .marketing h1{text-transform: uppercase; color: #d02127; font-size: 30px; font-weight: 700; margin-bottom: 20px;}
#intro .marketing h1 span{color: #231f20;}
#intro .marketing p{color: #929292; font-size: 14px; font-weight: 700;}

#quem-somos{border-top: 8px #d02127 solid; border-bottom: 8px #d02127 solid; background-color: #860b0f; padding-bottom: 60px;}
#quem-somos .wrapper{position: relative;display: block;}
#quem-somos h1{text-transform: uppercase; color: #ffffff; font-size: 30px; font-weight: 700; margin-bottom: 35px; margin-top: 35px;}
#quem-somos .imagens{float: left; width: 15%; height: auto;}
#quem-somos .imagens ul{}
#quem-somos .imagens ul li{}
#quem-somos .imagens ul li img{width: 100%}
#quem-somos .apresentacao{float: right; width: 80%; padding-right: 10px;}
#quem-somos .apresentacao p{font-size: 14px; color: #ffffff; margin-bottom: 30px; line-height: 25px; text-align: justify;}

#servicos{padding-bottom: 60px; padding-top: 30px;}
#servicos h1{text-transform: uppercase; color: #d02127; font-size: 30px; font-weight: 700; margin-bottom: 35px; margin-top: 35px;}
#servicos .imagens{float: left; width: 25%; height: auto; padding-left: 10px;}
#servicos .imagens img{width: 100%}
#servicos .apresentacao{float: right; width: 70%; padding-right: 10px;}
#servicos .apresentacao p{font-size: 14px; color: #929292; margin-bottom: 30px; line-height: 25px; text-align: justify;}

#contato{background-color: #3b3b3b; padding-bottom: 30px; border-bottom: 8px #800d11 solid;}
#contato h1{text-transform: uppercase; color: #ffffff; font-size: 30px; font-weight: 700; margin-bottom: 35px; margin-top: 20px;}
#contato .esquerda{width: 35%; float: left;}
#contato form{width: 100%;}
#contato form input[type=text]{width: 93%; padding: 15px; background-color: #464646; font-size: 14px; color: #ffffff; font-style: italic; border: none; margin-bottom: 10px;}
#contato form input[type=email]{width: 93%; padding: 15px; background-color: #464646; font-size: 14px; color: #ffffff; font-style: italic; border: none; margin-bottom: 10px;}
#contato form input[type=image]{float: right; cursor: pointer;}
#contato form textarea{width: 93%; padding: 15px; background-color: #464646; font-size: 14px; color: #ffffff; font-style: italic; border: none; margin-bottom: 10px;}
#contato form h2{color: #ffffff; font-size: 24px; font-weight: 400; margin-bottom: 10px;}
#contato img.imgContato{width: 100%; height: auto; border-top: 8px #606060 solid; border-bottom: 8px #606060 solid;}
#contato p{font-size: 14px; color: #929292; margin-bottom: 30px; line-height: 25px; text-align: justify;}
#contato span{font-size: 14px; color: #929292; text-align: justify; line-height: 20px;}
#contato .endereco{width: 60%; float: right;}
#contato .endereco .mapa{width: 100%; height: 340px;}
#contato .endereco .mapa #map-canvas,#content .conteudo .mapa #map_canvas{height: 100%;}
#contato .endereco .mapa #panel{position: absolute; top: 5px; left: 50%; margin-left: -180px; z-index: 5; background-color: #fff; padding: 5px; border: 1px solid #999;}
#contato .endereco .colunaE{width: 45%; margin-top: 25px; text-align: left; float: left;}
#contato .endereco .colunaD{width: 45%; margin-top: 25px; float: right; margin-top: 55px;}
#contato .endereco .colunaD ul{padding-left: 22px; background-image: url(../img/listaFooter.jpg); background-position: left top; background-repeat: no-repeat;}
#contato .endereco .colunaD ul li{font-size: 14px; color: #929292; text-align: justify; line-height: 22px;}
#contato .endereco .colunaD ul li a{font-size: 14px; color: #929292; text-align: justify; text-decoration: none;}
#contato .endereco .colunaD ul li a:hover{text-decoration: underline;}

.mensagem-sucesso {color: #468847; background: #dff0d8; border: 1px solid #d6e9c6; border-radius: 2px; font-size: 14px; margin: 15px 0 0; padding: 10px}
.mensagem-erro {color: #b94a48; background: #f2dede; border: 1px solid #eed3d7; border-radius: 2px; font-size: 14px; margin: 15px 0 0; padding: 10px}


@media all and (min-width: 481px) and (max-width: 900px){
    #header{height: 155px; position: fixed; top: 0; z-index: 999999; background-color: #ffffff; -webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.5); box-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);}
    #header img.logotipo{top: 8px; height: 140px;}
    #intro .marketing{max-width: 100%; float: none; margin-bottom: 30px; margin-top: 185px;}
    #quem-somos .imagens{float: none; width: 100%; height: auto;}
    #quem-somos .imagens ul{text-align: center;}
    #quem-somos .imagens ul li{display: inline-block; margin: 3%;}
    #quem-somos .apresentacao{float: none; width: 100%;}
    #contato .endereco{padding-left: 25px; padding-right: 10px; width: 56%;}
    #contato .endereco .mapa{display: none;}
    #contato .endereco .colunaE{width: 100%; float: none;}
    #contato .endereco .colunaD{width: 100%; float: none; margin-top: 0;}
}

@media(max-width:480px){
    body{width: 100%;}
    #header{position: relative; background-color: #ffffff; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;}
    #header ul.menu{display: none;}
    #header img.logotipo{position: relative; margin: 0 auto; width: 90%;}
    #intro .marketing{max-width: 90%; float: none; margin: 185px auto 10px auto;}
    #intro img{display: none;}
    #quem-somos .imagens{display: none;}
    #quem-somos .apresentacao{float: none; width: 100%;}
    #servicos .imagens{display: none;}
    #servicos .apresentacao{float: none; width: 90%; margin: 0 auto;}
    #contato form{display: none;}
    #contato h1{margin-bottom: 0;}
    #contato h2{display: none;}
    #contato p{display: none;}
    #contato .endereco{padding-left: 10px; padding-right: 10px; width: 100%;}
    #contato .endereco .mapa{display: none;}
    #contato .endereco .colunaE{width: 100%; float: none;}
    #contato .endereco .colunaD{width: 100%; float: none; margin-top: 0;}
}