@charset "UTF-8";

/* Seletores e Classes Universais */

body {background: #ffffd8; margin: 0; font-size: 16px; font-family: Franklin Gothic Book, Arial, sans-serif; background-image: url(../imagens/website-bg.jpg); background-repeat: no-repeat; background-position: center top; background-attachment: fixed; color: #c7413a;}
ul,ol,h1,h2,h3,h4,h5,h6,form,p {margin: 0; padding: 0; list-style: none;}
a {color: #c7413a;}
a:hover {color: #830600;}
.clear {clear: both;}


/* Elementos Gerais */

  .clipping img {margin: 15px 0;}
  .clipping-info {text-align: left;}
  
  .newsletter {background: url(../imagens/newsletter.jpg) no-repeat; width: 218px; height: 69px; padding: 26px;}
  .newsletter-titulo {font-size: 13px; font-weight: normal; margin: 5px 0 15px 0;}
  .newsletter-campo {border: solid 1px #c6c6b1; border-right: none; float: left; background: url(../imagens/newsletter-icon.png) no-repeat 5px center; padding: 5px 5px 5px 35px; font-size: 13px; color: #c7413a; width: 130px;}
  .newsletter .inativo {color: #999; font-style: italic;}
  .newsletter-botao {border: none; float: right; background: #ce5a53; padding: 3px 0; font-size: 16px; color: #ffffdc; width: 47px; text-align: center; font-weight: bold;}
  
  .rodape-op {background: #c34528; color: #ffffd3; width: 100%; padding: 40px 0;}
  .rodape-creditos {background: #d54d37; color: #ffffd3; width: 100%; padding: 15px 0; font-size: 13px;}

  .supernova-creditos {float: left;}
  .traco-creditos {float: right;}
  .rodape-creditos a {color: #ffffd1; text-decoration: none;}
  .rodape-creditos a:hover {text-decoration: underline;}
  
  .rodape-logo {float: left; margin: 5px 0;}
  
  .rodape-menu {float: right; width: 324px; background: url(../imagens/menu-line.png) repeat-x center 34px; height: 40px;}
  .rodape-menu li {float: left; display: block;}
  .rodape-menu li a {text-decoration: none; display: block; padding: 5px 0; width: 81px; text-align: center; height: 36px; font-size: 14px; color: #ffffd1;}
  .rodape-menu li a:hover {background: url(../imagens/rodape-menu.png) no-repeat center bottom;}
  

/* Resoluções de 1024x768 ou maiores */
@media only screen and (min-width: 970px) {

  .container {width: 970px; margin: 0 auto;}
  .header {width: 970px; padding: 35px 0 0 0; height: 110px; position: fixed; z-index: 10; top: 0; background-image: url(../imagens/website-bg.jpg); background-repeat: no-repeat; background-position: center top;}
  #header-imagem {display: none;}
  .logo {float: left; border: none; margin-left: 100px;}
  .menu {float: right; width: 484px; background: url(../imagens/menu-line.png) repeat-x center 50px; height: 100px;}
  .menu li {float: left; display: block;}
  .menu li a {text-decoration: none; display: block; padding: 5px 0; width: 121px; text-align: center; height: 36px; font-size: 19px;}
  .menu .select {width: 100%; height: 21px;}
  .menu .item-select {width: 121px; height: 21px;}
  
  .conteudo {width: 970px; margin-top: 200px;}
  .conteudo-sessao {width: 100%; border-bottom: dotted 2px #ccccb5; padding-bottom: 40px; margin-bottom: 40px;}
  .info-sessao {float: left; width: 55%;}
  .titulo-sessao {font-family: Arial Black, Arial, sans-serif; font-size: 35px; line-height: 39px; margin-bottom: 15px;}
  .subtitulo-sessao {font-family: Arial Black, Arial, sans-serif; font-size: 20px; margin-bottom: 5px;}
  .texto-sessao {line-height: 23px;}
  
  .area-clientes {background: #f4f4ce; border: dotted 3px #ffffdc; width: 35%; height: 160px; float: right; padding: 3%;}
  .clientes-titulo {float: right; font-size: 19px; font-family: Arial Black, Arial, sans-serif; margin-bottom: 0;}
  .clientes-campo {background: #c6c6b1; color: #f4f4ce; padding: 5px; border: none; font-size: 16px; width: 98%; margin: 10px 0;}
  .area-clientes .inativo {color: #777; font-style: italic;}
  .clientes-botao {float: right;}
  .area-clientes a {float: left; padding: 5px; margin: 5px 5px 0 0; display: block; font-size: 14px;}
  
  .supernova-empresa {float: right;}
  
  .clipping li,.fale-conosco li {float: left; display: block; width: 290px; margin-right: 50px; margin-bottom: 30px; text-align: center; height: 330px;}
  .clipping li.last,.fale-conosco li.last {margin-right: 0;}
  .clipping-titulo {background: url(../imagens/seta.png) no-repeat left center; padding: 10px 0 10px 12px; text-align: left; font-size: 20px;}
  
  .fale-conosco {margin: 50px 0;}
  .fale-conosco li {text-align: left; height: 200px;}
  .contato-logo {width: 190px;}
  .contato-info {margin: 10px 0;}
  
  .rodape-op-container,.rodape-creditos-container {width: 970px; margin: 0 auto;}

}


/* Resoluções para Tablets (Retrato) */
@media only screen and (min-width: 768px) and (max-width: 969px) {
  body { background: #ffffd8; }

  .container {width: 767px; margin: 0 auto;}
  .header {width: 767px; padding: 35px 0 0 0; background: #ffffd8; height: 90px; position: fixed; z-index: 10; top: 0;}
  #header-imagem {display: none;}
  .logo {float: left; border: none; width: 230px;}
  .menu {float: right; width: 484px; background: url(../imagens/menu-line.png) repeat-x center 50px; height: 100px;}
  .menu li {float: left; display: block;}
  .menu li a {text-decoration: none; display: block; padding: 5px 0; width: 121px; text-align: center; height: 36px; font-size: 19px;}
  .menu .select {width: 100%; height: 21px;}
  .menu .item-select {width: 121px; height: 21px;}
  
  .conteudo {width: 767px; margin-top: 150px;}
  .conteudo-sessao {width: 100%; border-bottom: dotted 2px #ccccb5; padding-bottom: 50px; margin-bottom: 50px;}
  .info-sessao {float: left; width: 55%;}
  .titulo-sessao {font-family: Arial Black, Arial, sans-serif; font-size: 25px; line-height: 30px; margin-bottom: 15px;}
  .subtitulo-sessao {font-family: Arial Black, Arial, sans-serif; font-size: 17px; margin-bottom: 5px;}
  .texto-sessao {font-size: 16px; line-height: 19px;}
  
  .area-clientes {background: #f4f4ce; border: dotted 3px #ffffdc; width: 35%; height: 170px; float: right; padding: 3%;}
  .clientes-titulo {float: right; font-size: 19px; font-family: Arial Black, Arial, sans-serif; margin-bottom: 8px;}
  .clientes-campo {background: #c6c6b1; color: #f4f4ce; padding: 5px; border: none; font-size: 16px; width: 98%; margin: 10px 0;}
  .area-clientes .inativo {color: #777; font-style: italic;}
  .clientes-botao {float: right;}
  .area-clientes a {float: left; padding: 5px; margin: 5px 2px 0 0; display: block; font-size: 12px;}
  
  .supernova-empresa {float: right; width: 310px;}
  
  .clipping li,.fale-conosco li {float: left; display: block; width: 225px; margin-right: 25px; margin-bottom: 30px; text-align: center; height: 330px;}
  .clipping li.last,.fale-conosco li.last {margin-right: 0;}
  .clipping li img {height: 160px;}
  .clipping-titulo {background: url(../imagens/seta.png) no-repeat left center; padding: 10px 0 10px 12px; text-align: left; font-size: 20px;}
  
  .fale-conosco {margin: 50px 0 30px 0;}
  .fale-conosco li {text-align: left; height: 180px;}
  .fale-conosco li img {width: 220px;}
  .contato-info {margin: 10px 0;}
  
  .rodape-op,.rodape-creditos {display: none;}

}


/* Resoluções para Mobile (Paisagem) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
  body { background: #ffffd8; }

  .container {width: 484px; margin: 0 auto;}
  .header {width: 484px; padding: 20px 0 20px 0; background: #ffffd8; height: 100px; position: fixed; z-index: 10; top: 0;}
  #header-imagem {display: none;}
  .logo {float: none; border: none; margin: 0 auto; display: block; width: 200px;}
  .menu {float: right; width: 484px; background: url(../imagens/menu-line.png) repeat-x center 40px; height: 100px; margin-top: 5px;}
  .menu li {float: left; display: block;}
  .menu li a {text-decoration: none; display: block; padding: 5px 0; width: 121px; text-align: center; height: 27px; font-size: 17px;}
  .menu .select {width: 100%; height: 21px;}
  .menu .item-select {width: 121px; height: 21px;}
  
  .conteudo {width: 474px; margin-top: 140px; padding: 5px;}
  .conteudo-sessao {width: 100%; border-bottom: dotted 2px #ccccb5; padding-bottom: 50px; margin-bottom: 50px;}
  .info-sessao {float: none; width: 95%; margin-bottom: 20px;}
  .titulo-sessao {font-family: Arial Black, Arial, sans-serif; font-size: 25px; line-height: 30px; margin: 15px 0;}
  .subtitulo-sessao {font-family: Arial Black, Arial, sans-serif; font-size: 17px; margin-bottom: 5px;}
  .texto-sessao {font-size: 13px; line-height: 19px; text-align: center;}
  
  .area-clientes {background: #f4f4ce; border: dotted 3px #ffffdc; width: 92.5%; height: 170px; float: none; padding: 3%;}
  .clientes-titulo {float: right; font-size: 19px; font-family: Arial Black, Arial, sans-serif; margin-bottom: 8px;}
  .clientes-campo {background: #c6c6b1; color: #f4f4ce; padding: 5px; border: none; font-size: 16px; width: 98%; margin: 10px 0;}
  .area-clientes .inativo {color: #777; font-style: italic;}
  .clientes-botao {float: right;}
  .area-clientes a {float: left; padding: 5px; margin: 5px 2px 0 0; display: block; font-size: 12px;}
  
  .supernova-empresa {float: none; display: block; margin: 0 auto;}
  
  .clipping li,.fale-conosco li {float: left; display: block; width: 205px; margin-right: 27px; margin-bottom: 30px; text-align: center; height: 330px;}
  .clipping li.last,.fale-conosco li.last {margin-right: 27px;}
  .clipping li img {width: 180px;}
  .clipping-titulo {background: url(../imagens/seta.png) no-repeat left center; padding: 10px 0 10px 12px; text-align: left; font-size: 20px;}
  
  .fale-conosco {margin: 50px 0 30px 0;}
  .fale-conosco li {text-align: left; height: 180px;}
  .fale-conosco li img {width: 220px;}
  .contato-info {margin: 10px 0;}
  
  .rodape-op,.rodape-creditos {display: none;}

}


/* Resoluções para Mobile (Retrato) */
@media only screen and (max-width: 479px) {
  body { background: #ffffd8; }

  .container {width: 305px; margin: 0 auto;}
  .header {width: 305px; padding: 0 0 25px 0; background: #ffffd8; height: 230px; position: fixed; z-index: 10; top: 0; }
  #header-imagem {display: block; background: #ffffd8 url(../imagens/header-imagem.jpg) no-repeat; height: 135px; width: 200px; margin: 0 auto;}
  .logo {float: none; border: none; margin: 10px auto; display: block; width: 200px;}
  .menu {float: none; width: 288px; background: url(../imagens/menu-line.png) repeat-x center 28px; height: 80px; margin: 0 auto;}
  .menu li {float: left; display: block;}
  .menu li a {text-decoration: none; display: block; padding: 5px 0; width: 72px; text-align: center; height: 16px; font-size: 13px;}
  .menu .select {width: 100%; height: 21px;}
  .menu .item-select {width: 72px;}
  
  .conteudo {width: 305px; margin-top: 260px;}
  .conteudo-sessao {width: 96%; border-bottom: dotted 2px #ccccb5; padding: 0 5px 30px 5px; margin-bottom: 30px;}
  .info-sessao {float: none; width: auto; margin-bottom: 20px;}
  .titulo-sessao {font-family: Arial Black, Arial, sans-serif; font-size: 20px; line-height: 25px; margin: 10px 0;}
  .subtitulo-sessao {font-family: Arial Black, Arial, sans-serif; font-size: 15px; margin-bottom: 5px;}
  .texto-sessao {font-size: 14px; line-height: 17px; text-align: center;}
  
  .area-clientes {background: #f4f4ce; border: dotted 3px #ffffdc; width: 94%; height: 120px; float: none; padding: 3%;}
  .clientes-titulo {float: right; font-size: 16px; font-family: Arial Black, Arial, sans-serif; margin-bottom: 0;}
  .clientes-campo {background: #c6c6b1; color: #f4f4ce; padding: 3px; border: none; font-size: 14px; width: 98%; margin: 5px 0;}
  .area-clientes .inativo {color: #777; font-style: italic;}
  .clientes-botao {float: right; width: 40px;}
  .area-clientes a {float: left; padding: 5px; margin: 0 2px 0 0; display: block; font-size: 12px;}
  
  .supernova-empresa {float: none; display: block; margin: 0 auto; width: 290px;}
  
  .clipping li,.fale-conosco li {float: none; display: block; width: 300px; margin-right: 15px; margin-bottom: 10px; text-align: center; height: 300px; font-size: 14px;}
  .clipping li.last {margin-right: 37px;}
  .clipping li img {height: auto;}
  .clipping-titulo {background: url(../imagens/seta.png) no-repeat left center; padding: 5px 0 5px 12px; text-align: left; font-size: 15px;}
  
  .fale-conosco {margin: 50px 0 30px 0;}
  .fale-conosco li {height: 180px;}
  .fale-conosco li.last {display: none;}
  .fale-conosco li img {width: 220px;}
  .contato-info {margin: 10px 0;}
  
  .newsletter {display: none;}
  
  .rodape-op,.rodape-creditos {display: none;}

}