*{padding: 0px; margin: 0px; list-style: none; border: 0px; -o-box-sizing: border-box; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -khtml-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-user-modify: read-only; outline: none; -webkit-tap-highlight-color: rgba(0,0,0,0); font-style: normal;} /* geral */ img{border: none;} a{text-decoration: none;} a:hover{text-decoration: underline;} .limite{width: 1020px; margin: auto;} .corte{clear: both;} /* ===================================== */ .produtosMobile{display: none;} .menuMobile{display: none;} #modal{display: none;} /* =========================================== Style do alert ========================================= */ #modalProduto{display: block; background: rgba(0, 0, 0, 0.6); position: absolute; width: 100%; height: 100%; top: 0px; z-index: 999999; visibility: hidden;} #alertBoxProduto{width: 380px; border-radius: 4px; background: #fff; top: 20%; left: 50%; margin-left: -190px; padding: 28px;} #modalProduto, #alertBoxProduto {position:fixed;} #alertBoxProduto #txtProduto{font-family: 'Roboto'; font-size: 15px; color: #444444; line-height: 25px;} #alertBoxProduto #closeBtnProduto {font-size: 15px; width: 40px; height: 40px; text-align: center; color: #FFF; background: #b31116; border-radius: 100px 100px 100px 100px; bottom: -15px; right: -15px; z-index: 999; position: absolute; cursor: pointer;} /* ========================================================================================================= */ body{} #header{width: 1015px; margin: auto; border-top: #b31116 solid 8px;} #header h1{float: left; margin: 15px 40px;} #header #menu{float: right;} #header #menu ul li{float: left; margin: 45px 40px; font-family: 'Roboto'; font-size: 20px;} #header #menu ul li a{color: #be0e15;} #header #menu ul li a:hover{color: #444444;} .banner{margin-bottom: 50px; position: relative;} .banner ul li{height: 674px; background: url('../images/banner.jpg') no-repeat center center;} .banner ul li span{position: absolute; top: 220px; right: 10%; display: block; font-size: 38px; color: #ffffff; font-family: 'Muli'; width: 550px; text-align: center; line-height: 45px;} #quemsomos{width: 1050px; margin: auto auto 60px; background: url('../images/bgQuemSomos.jpg') no-repeat right 15px;} #quemsomos h2{height: 172px; text-transform: uppercase; color: #b31116; font-size: 38px; font-family: 'Roboto'; letter-spacing: 3px; margin-bottom: 30px;} #quemsomos h2 img{float: left; margin-right: 20px;} #quemsomos h2 span{display: block; padding-top: 45px;} #quemsomos .texto{color: #222222; font-family: 'Muli'; font-size: 18px; width: 500px; line-height: 28px; margin-left: 75px} #quemsomos .btredes{height: 50px; text-align: center; margin-top: 50px;} #quemsomos .btredes a{margin: 0 10px;} #produtos{background: url('../images/bgProdutos.jpg') no-repeat center 85px;} #produtos .box{width: 1050px; margin: auto; padding-bottom: 150px} #produtos .imgIcone{float: right;} #produtos h2{text-transform: uppercase; color: #b31116; font-size: 38px; font-family: 'Roboto'; letter-spacing: 3px; margin-bottom: 30px; text-align: center;} #produtos .carrossel{width: 730px; margin: auto; padding-top: 80px;} #produtos .carrossel .swiper-wrapper{height: 400px !important;} #produtos .carrossel ul li{margin: 0; width: 160px; text-align: center; text-transform: uppercase; font-family: 'Muli';} #produtos .carrossel ul li img{width: 160px; height: 300px;} #produtos .carrossel .btTodos{display: block; color: #fff; font-family: 'Roboto'; text-align: center; border-radius: 50px; padding: 12px 0; background: #b31116; width: 300px; margin: 50px auto 0; cursor: pointer; text-decoration: none;} #catalogo{background: url('../images/bgCatalogo.jpg') no-repeat center; margin-bottom: 100px;} #catalogo .box{width: 963px; height: 593px; margin: auto; background: url('../images/bgBannerCatalogo.jpg') no-repeat center center} #catalogo .box .texto{font-size: 35px; color: #ffffff; font-family: 'Muli'; width: 550px; position: relative; top: 150px; left: 140px; letter-spacing: 1px;} #catalogo .box .texto a{background: #fff; font-size: 18px; color: #222222; font-family: 'Roboto'; padding: 15px 40px; border-radius: 50px; text-decoration: none;} .topoProdutos ul li{height: 410px;} .topoProdutos ul li span{position: absolute; top: 280px; display: block; font-size: 45px; font-weight: bold; color: #ffffff; font-family: 'Muli'; width: 100%; text-align: center;} #pageProdutos{background: #fcfaf8; padding: 60px 0; margin-bottom: 50px;} #pageProdutos .box{width: 1000px; margin: auto auto 50px;} #pageProdutos h2{text-transform: uppercase; color: #444444; font-size: 36px; font-family: 'Roboto'; letter-spacing: 2px; margin-bottom: 30px; text-align: center;} #pageProdutos .carrossel{width: 1000px; margin: auto;} #pageProdutos .carrossel ul li{float: left; margin: 0 15px; width: 170px; text-align: center; text-transform: uppercase; color: #444444; font-size: 14px; font-family: 'Muli'; cursor: pointer;} #pageProdutos .carrossel ul li span{display: block; width: 170px; height: 100px; border: 1px solid #b31116; text-align: center; vertical-align: middle; display: table-cell;} #pageProdutos .carrossel ul li span:hover{color: #b31116; border: 1px solid #b31116;} #pageProdutos .carrossel ul li img{width: 150px;} #footer{} #footer iframe{float: left; width: calc(50% - 150px);} #footer .contato{float: right; width: calc(50% + 70px); color: #222222; font-size: 15px; font-family: 'Muli';} #footer .contato img{margin-bottom: 40px;} #footer .contato .campos{width: 520px; background: #e8e8e8; padding: 12px 10px; margin: 5px 0 10px; font-size: 15px; color: #555555;} #footer .contato .campoText{max-width: 480px; min-width: 520px;} #footer .contato .btContact{background: #ffffff; border: 1px solid #dddddd; padding: 12px; font-size: 15px; color: #222222; cursor: pointer; margin: 5px 0 0 373px;} #footer .creditos{background: #333333; color: #f5f5f5; font-size: 16px; font-family: 'Muli'; padding: 30px 0; } #footer .creditos ul{width: 880px; margin: auto;} #footer .creditos ul .left{float: left; margin-top: 5px;} #footer .creditos ul .right{float: right;} @media only screen and (min-width: 360px) and (max-width: 768px){ #alertBoxProduto{width: 360px; top: 20%; left: 50%; margin-left: -180px;} /* =========================================== Style do alert ========================================= */ #modal{display: block; background: rgba(0, 0, 0, 0.6); position: absolute; width: 100%; height: 100%; top: 0px; z-index: 999999; visibility: hidden;} #alertBox {width: 80%; border-radius: 4px; background: #fff; top: 20%; left: 50%; margin-left: -40%; padding: 28px 25px 5px;} #modal, #alertBox {position:fixed;} #alertBox #menuPrinc li{margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid #dddddd; font-family: 'Roboto'; font-size: 18px; color: #666666; text-align: center;} #alertBox #menuPrinc li a{color: #333333; text-decoration: none;} #alertBox #closeBtn {font-size: 15px; width: 40px; height: 40px; text-align: center; color: #FFF; background: #b31116; border-radius: 100px 100px 100px 100px; bottom: -15px; right: -15px; z-index: 999; position: absolute;} /* ========================================================================================================= */ .menuMobile{display: block; position: absolute; top: 30px; right: 20px;} #header{width: 100%; margin: auto; border-top: #b31116 solid 4px;} #header h1{float: none; text-align: center; margin: 10px 0 15px;} #header #menu{display: none; float: right;} #header #menu ul li{float: left; margin: 45px 40px; font-family: 'Roboto'; font-size: 20px;} #header #menu ul li a{color: #be0e15;} #header #menu ul li a:hover{color: #444444;} .banner{margin-bottom: 50px; position: relative;} .banner ul li{height: 450px; background: url('../images/banner.jpg') no-repeat center center; padding: 0 10px;} .banner ul li span{position: absolute; top: 150px; right: 0; display: block; font-size: 28px; color: #ffffff; font-family: 'Muli'; width: 100%; text-align: center; line-height: 40px;} #quemsomos{width: 100%; margin: auto auto 50px; background: none; } #quemsomos h2{height: auto; text-align: center; text-transform: uppercase; color: #b31116; font-size: 32px; font-family: 'Roboto'; letter-spacing: 2px; margin-bottom: 30px;} #quemsomos h2 img{display: none;} #quemsomos h2 span{display: block; padding-top: 0;} #quemsomos .texto{color: #222222; font-family: 'Muli'; font-size: 18px; width: 100%; line-height: 25px; margin-left: 0; text-align: center; padding: 0 15px;} #quemsomos .btredes{height: 50px; text-align: center; margin-top: 50px;} #quemsomos .btredes a{display: block; margin: 0 0 10px;} #produtos{background: none; padding: 50px 0;} #produtos .box{width: 100%; margin: auto; padding-bottom: 0} #produtos .imgIcone{display: none;} #produtos h2{text-transform: uppercase; color: #b31116; font-size: 35px; font-family: 'Roboto'; letter-spacing: 2px; margin-bottom: 30px; text-align: center;} #produtos .carrossel{width: 100%; margin: auto; padding-top: 20px;} #produtos .carrossel .swiper-wrapper{height: 380px !important;} #produtos .carrossel ul li{margin: 0; width: 100%; text-align: center; text-transform: uppercase; font-family: 'Muli';} #produtos .carrossel ul li img{width: 160px;} #produtos .carrossel .btTodos{display: block; color: #fff; font-family: 'Roboto'; text-align: center; border-radius: 50px; padding: 12px 0; background: #b31116; width: 300px; margin: 40px auto 0; cursor: pointer; text-decoration: none;} #catalogo{background: url('../images/bgCatalogo.jpg') no-repeat center center; margin-bottom: 100px;} #catalogo .box{width: 100%; height: 500px; margin: auto; background: url('../images/bgBannerCatalogo.jpg') no-repeat center center} #catalogo .box .texto{font-size: 30px; color: #ffffff; font-family: 'Muli'; width: 100%; position: relative; top: 100px; left: 0; letter-spacing: 1px; text-align: center;} #catalogo .box .texto a{background: #fff; font-size: 18px; color: #222222; font-family: 'Roboto'; padding: 15px 40px; border-radius: 50px; text-decoration: none;} .topoProdutos ul li{height: 410px;} .topoProdutos ul li span{position: absolute; top: 280px; display: block; font-size: 45px; font-weight: bold; color: #ffffff; font-family: 'Muli'; width: 100%; text-align: center;} #pageProdutos{background: #fcfaf8; padding: 50px 0; margin-bottom: 30px;} #pageProdutos .box{width: 100%; margin: auto auto 30px; padding: 0 5px;} #pageProdutos h2{text-transform: uppercase; color: #444444; font-size: 35px; font-family: 'Roboto'; letter-spacing: 1px; margin-bottom: 20px; text-align: center;} #pageProdutos .carrossel{width: 100%; margin: auto;} #pageProdutos .carrossel ul li{float: left; margin: 10px 0; width: 50%; text-align: center; text-transform: uppercase; color: #444444; font-size: 14px; font-family: 'Muli'; cursor: pointer; padding: 0 5px;} #pageProdutos .carrossel ul li span{display: block; width: 100%; height: 80px; text-align: center; vertical-align: middle; display: table-cell;} #pageProdutos .carrossel ul li span:hover{color: #b31116;} #pageProdutos .carrossel ul li img{width: 150px;} #footer{} #footer iframe{float: none; width: 100%;} #footer .contato{float: none; width: 100%; color: #222222; font-size: 15px; font-family: 'Muli'; padding: 0 20px;} #footer .contato img{margin-bottom: 40px; width: 100%;} #footer .contato .campos{width: 100%; background: #e8e8e8; padding: 12px 10px; margin: 5px 0 10px; font-size: 15px; color: #555555;} #footer .contato .campoText{max-width: 100%; min-width: 100%;} #footer .contato .btContact{background: #ffffff; border: 1px solid #dddddd; padding: 12px; font-size: 15px; color: #222222; cursor: pointer; margin: 5px 0 50px 0; width: 100%} #footer .creditos{background: #333333; color: #f5f5f5; font-size: 16px; font-family: 'Muli'; padding: 30px 0; } #footer .creditos ul{width: 100%; margin: auto;} #footer .creditos ul .left{float: none; margin-top: 0; margin-bottom: 10px; text-align: center;} #footer .creditos ul .right{float: none; text-align: center;} }