@import url(http://fonts.googleapis.com/css?family=Raleway:500,700,900,400,300);
@import url(http://fonts.googleapis.com/css?family=Roboto:400,300,500,900,700);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800);

/*CSS Site SOS Pneus
**WDesign e Associadoss
**Desenvolvido por Willian Santos */

/*GERAL*/
html { background: url(../images/fundo-body.jpg); color: #FFF; font-family: 'Open Sans', sans-serif; }

/*HEADER*/
.header { display: block; background: url(../images/fundo-header.jpg) center center; height: 553px;}
.logo { margin-top: 25%; }
.menu { width: 100%; display: block; margin-top: 25%; font-family: 'Raleway', sans-serif; }
.menuul { width: 100%; text-align: right;}
.menuli { display: inline-block; width: 15%; text-align: right; }
.menuli a { text-decoration: none; color: #FFF; text-transform: uppercase; }
.titleheader { font-weight: 900; text-align: right; margin-top: 25%; font-size: 2em; font-family: 'Roboto', sans-serif;}

/*BODY*/
.title { width: ; background: url(../images/title.png) no-repeat; height: 50px; color: #FFF; margin-bottom: 50px;  }
.title h2 { font-size: 1.7em; font-weight: 500; line-height: 50px; margin-left: 30px; text-transform: uppercase; }
.continental { background: url(../images/continental.jpg); width: 480px; height: 341px; }
.trell { background: url(../images/trelleborg.jpg); width: 480px; height: 341px; }
.ulprod { width: 50%; float: left; margin: 130px 0 0 50px; list-style: none; font-family: 'Roboto', sans-serif; }
.ulprod li { background: #2e2e2e; margin: 3px; padding: 10px; }
.ulprod li a { text-decoration: none; color: #FFF; }
.seta-baixo:before { content: "";  display: inline-block;  vertical-align: middle;  margin-right: 10px;  width: 0;   height: 0;   border-left: 5px solid transparent;  border-right: 5px solid transparent;  border-top: 5px solid #fff; }
ul.accordion { display: none; list-style: none; width: 90%; margin: 0; padding: 0  }
ul.accordion2 { display: none; list-style: none; width: 100%; margin: 0; padding: 0  }
ul.accordion li { background: #666; color: #FFF; }
ul.accordion { text-decoration: none; padding: 10px; }

/*FOOTER*/
.footer { background: url(../images/bg-rodape.jpg); }
.textfooter { color: #FFF; font-size: .8em; margin-top: 30px; font-family: 'Open Sans', sans-serif; }

/*HEADER PÁGINA DE CONTATO*/
.header-contato { display: block; background: url(../images/header-contato.jpg)center center; height: 553px; }

/*CONTEÚDO PÁGINA DE CONTATO*/

input[type="text"] { width: 100%; }
input[type="tel"] { width: 100%; }
input[type="email"] { width: 100%; }
input.inp { width: 49%; }
input.inp2 { width: 49%; margin-left: 2%; }
.mensagem { width: 100%; resize: none; height: auto; }
.fale { background: #000; color: #FFF; padding: 20px; border-radius: 5px; width: 100%; }
.fale h3 { text-transform: uppercase; font-size: 1.5em; }
.fale p { font-size: .9em; }
.submit { margin-top: 53%; color: #FFF; background: #000; border: none; }

/*HEADER PÁGINA EMPRESA*/
.header-empresa { display: block; background: url(../images/header-empresa.jpg)center center; height: 553px; }

/*CONTEÚDO PÁGINA EMPRESA*/
.box { background: rgba( 0,0,0,0.5); min-height: 800px; color: #FFF; width: 100%; margin-bottom: 50px; }
.box img { max-width: 100%; }
.box p { padding: 10px 35px; text-align: left; font-family: 'Roboto', sans-serif; }

/*HEADER PÁGINA PRODUTOS*/
.header-produtos { display: block; background: url(../images/header-produtos.jpg)center center; height: 553px; }

/*CONTEÚDO PÁGINA PRODUTOS*/
.title-produtos { width: ; background: url(../images/title.png) #FFF no-repeat; height: 50px; color: #FFF; }
.title-produtos h2 { font-size: 1.7em; font-weight: 500; line-height: 50px; margin-left: 30px; text-transform: uppercase; }
.backprod { background: #FFF; }
.esquerda { background: #e6e7e8; padding: 35px 0; }
.esquerda .ulprod2 { width: 100%; float: left; list-style: none; display: block; background: #FFF; padding: 0; margin: 0; font-family: 'Roboto', sans-serif; }
.esquerda .ulprod2 li { padding: 10px 0 0 10px; background: #FFF display: block; margin: 0;  border-bottom: 1px solid #999; }
.esquerda .ulprod2 li a { text-decoration: none; color: #000; display: block; }
.esquerda .ulprod2 li ul li { background: #e6e7e8; margin-left: -10px; width: 100%; display: block; border-bottom: 1px solid #999;  }
.esquerda img { max-width: 100%; padding: 0; }
.prodcenter {  padding: 45px 0; }
.prodcenter img { max-width: 100%; }
.prodcenter h2 { font-weight: bold; color: #F00; font-size: 2em; }
.direita { padding: 45px 4% 4% 4%; }
.direita img { max-width: 100%; border: 1px solid #000; box-sizing:border-box; }
.direita .download { width: 50%; display: inline-block; height: 50px; background: #F00; font-family: 'Roboto', sans-serif; text-transform: uppercase; font-size: .8em; padding-top: 15px }
.direita .orcamento { width: 50%; display: inline-block; height: 50px; background: #333; font-family: 'Roboto', sans-serif; text-transform: uppercase; font-size: .8em; padding-top: 15px;}
.direita a { text-decoration: none; color: #FFF; text-align: center; font-weight: bold; }