body {margin: 0 auto; padding: 0;} header {background: url(../images/header.jpg) no-repeat center fixed; width: 100%;height: 80%; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;} .highlight {font-weight: 900;} .clearfix {clear: both;} #header-tel {font-family: 'Lato'; color: #00627A;display: table; background-color: #eee; height: 30px; width: 140px; text-align: center; border-radius: 0px 0px 30px 5px; padding-top: 10px; margin-left: 5%;} #header-tel h1 {font-size: 15px;} #logo {padding-top: 15%; } #logo h1 {font-family: 'Lato', sans-serif; font-weight: 900;color: #fff; text-transform: uppercase; font-size: 8em; letter-spacing: -6px; line-height: 1px; text-align: center; text-shadow: 1px 2px #000;} #logo h2 {font-family: 'Lato', sans-serif; font-weight: 300;color: #fff; text-transform: uppercase; font-size: 30px;letter-spacing: 2px; line-height: 1px; text-align: center;text-shadow: 1px 2px #000;} nav ul {width: 450px; float: right; text-decoration: none; list-style: none; color: #fff;font-family: 'Lato', sans-serif; font-weight: 300; padding-top: 2%; text-transform: uppercase; cursor: pointer; z-index: 10;} nav ul li {display: inline-block; margin-right: 2%; text-shadow: 1px 2px #000;} nav a {color: #fff; text-decoration: none;} nav a:hover {color: #000;} /* empresa */ #container-empresa {width: 100%; margin: 0 auto; height: auto; padding-top: 90px; text-align: center; margin-bottom: 5%;} #container-empresa h1 {font-family: 'Lato', sans-serif; font-weight: 900;color: #000; text-transform: uppercase; text-align: center;line-height: 17px;} #container-empresa h2 {font-family: 'Lato', sans-serif; font-weight: 300;color: #000; text-transform: uppercase; font-size: 20px;letter-spacing: 2px; text-align: center; line-height: 5px;} #container-empresa h3 {font-family: 'Lato', sans-serif; font-weight: 300;color: #000; text-transform: uppercase; font-size: 20px;letter-spacing: 1px; text-align: center; line-height: 25px; width: 300px; margin: 0 auto;} #container-empresa article { width: 5%%; height: 400px; text-align: center; display: inline-table; } .chart {position: relative;display: inline-block;margin: 20px 10px;color: #999;font-size: 14px;text-align: center; font-family: 'Lato', sans-serif; font-weight: 300;} .chart canvas {position: absolute;top: 0;left: 0;} /* historico */ #imagem-empresa {background: url(../images/empresa.jpg) no-repeat top fixed; height: 450px; background-size: cover;margin-bottom: 5%; text-indent: -9999;} #container-historico {width: 1000px;margin: 0 auto; padding-top: 80px;} #container-historico p {font-family: 'Lato', sans-serif; font-weight: 300; text-align: justify;line-height: 30px; letter-spacing: 1px; font-size: 17px;} #container-historico h1 {text-align: center; padding-top: 75px; line-height: 15px; font-family: 'Lato', sans-serif; font-weight: 900; font-style: italic; } #container-historico h2 {text-align: center; line-height: 8px;font-family: 'Lato', sans-serif; font-weight: 100; font-size: 20px;} /* ibama */ #ibama {padding-top: 70px; background: url(../images/ibama.jpg) no-repeat fixed top ; height: 600px;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover; margin-top: 5%;} #ibama article {text-align: center; word-spacing: 3px; opacity: 0.8;filter: alpha(opacity=80);width: 800px; margin: 0 auto; height:250px; background-color: #808080; padding: 50px;font-family: 'Lato', sans-serif; font-weight: 100; color: #fff;font-size: 30px;} #logo-ibama {background: url(../images/logo-ibama.png) no-repeat center; width: 171px; height: 145px; margin: 0 auto; padding-top: 80px;} /* institucional */ .video-container {max-width: 1000px; margin: 0 auto;} #institucional {background-color: #00627A; height: auto; text-align: center; padding-top: 100px;} /*#institucional iframe {width: 1000px; height: 563px;}*/ #institucional article {max-width: 1000px; margin: 0 auto;font-family: 'Lato', sans-serif; font-weight: 100; font-size: 18px; color: #fff;letter-spacing: 1px; text-align: left;} #institucional section { width: 1000px; margin: 0 auto; padding-top: 40px;} #institucional img {text-align: center;margin-right: 5px;margin-bottom: 10%;} /* Produtos */ #container-produtos {width: 100%; margin: 0 auto; height: auto; padding-top: 90px; text-align: center; margin-bottom: 5%;} #container-produtos h1 {font-family: 'Lato', sans-serif; font-weight: 900;color: #000; text-transform: uppercase; text-align: center;line-height: 37px;} #container-produtos h2 {font-family: 'Lato', sans-serif; font-weight: 300;color: #000; font-size: 20px;text-align: center; line-height: 25px; width: 80%; margin: 0 auto; margin-bottom: 5%; } #container-produtos h3 {font-family: 'Lato', sans-serif; font-weight: 400;color: #000; text-transform: uppercase; font-size: 18px;letter-spacing: 0px; text-align: left; line-height: 5px; padding-left: 5px; width: 250px; margin: 0 auto; padding-top: 10px;} #container-produtos p {font-family: 'Lato', sans-serif; font-weight: 300;color: #000; font-size: 18px; text-align: left; line-height: 26px; width: 250px; padding-left: 5px; margin: 0 auto; padding-top: 8px;} #container-produtos article { width: 5%%; height: 350px; text-align: center; display: inline-table; margin-bottom: 2%; padding: 5px; } #container-produtos img {width: 250px; } .descricao-madeira { display: table; height: 200px; margin: -5px; display: none; } .descricao-madeira img {float: left; margin-right: 20px;margin-left: 5px; margin-top: 2px; width: 500px;} .descricao-madeira h3 {text-align: left;font-family: 'Lato', sans-serif; font-weight: 900; line-height: 4px; text-transform: uppercase; padding-top: 23px;} .descricao-madeira p {text-align: left;font-family: 'Lato', sans-serif; font-weight: 300; text-transform: none;margin-top: 10; margin-right: 15px;line-height: 26px; font-size: 22px;} /* Contato */ #contato {background-color: #00627A; height: 1200px; margin-top: 150px; } #container-contato {width: 1000px; margin: 0 auto; padding-top: 150px;} #container-contato h1 {font-family: 'Lato', sans-serif; font-weight: 900; line-height: 24px; font-size: 90px; text-align: center; color: #fff;} #container-contato p {font-family: 'Lato', sans-serif; font-weight: 100; line-height: 40px; font-size: 30px; text-align: center; color: #fff; width: 1000px; margin: 0 auto; word-spacing: 3px;} #left-icon {float: left; width: 230px; text-align: left; margin-left: 70px; padding-top: 60px; padding-left: 40px; } #left-icon i {font-size: 60px; color: #fff; float: left; padding-right: 15px;} #left-icon h2 {font-family: 'Lato', sans-serif; font-weight: 900; color: #fff;} #right-icon {float: right; width: 600px; text-align: left; padding-top: 60px; padding-left: 40px; } #right-icon i {font-size: 60px; color: #fff; float: left; padding-right: 15px;} #right-icon h2 {font-family: 'Lato', sans-serif; font-weight: 900; color: #fff;} #container-contato input, textarea {-moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px; -khtml-border-radius: 4px; border: 0px; margin: 6px; font-family: 'Lato', sans-serif; font-weight: 300; font-size: 18px; padding: 10px;} #mensagem {width: 990px; height: 200px;} #nome {width: 488px; float: left; height: 40px;} #email {width: 488px; float: left;height: 40px;} #telefone {width: 488px; float: left;height: 40px;} #cidade {width: 488px; float: left;height: 40px;} #btn-enviar {width: 990px; height: 40px; background-color: green; font-family: 'Lato', sans-serif; font-weight: 900 !important; color: #fff; cursor: pointer;} #btn-enviar:hover {background-color: gray;} /* footer */ #sub-footer {background-color: #002B47; height: 400px; padding: 10%;} #sub-footer article {margin: 0 auto; width: 100%; text-align: center;} #sub-footer h1 {font-family: 'Lato', sans-serif; font-weight: 900; color: #fff; font-size: 28px; text-transform: uppercase; letter-spacing: 2px; line-height: 1px;} #sub-footer p {font-family: 'Lato', sans-serif; font-weight: 100; color: #fff; font-size: 18px; text-transform: none; letter-spacing: 1px;} footer {background-color: #000; height: 60px;} footer p {font-family: 'Lato', sans-serif; font-weight: 300; color: #fff; margin: 0; padding-top: 22px; padding-right: 25px; float: right;} /* menu */ #menu-fullscreen {display: none;width: 100%;height: 100%;position: fixed;top: 0;left: 0;background: #1abc9c; z-index: 2;} #menu-fullscreen ul {position: absolute;transform: translate(-50%, -50%); top: 50%;left: 50%; } #menu-fullscreen ul li {list-style-type: none;margin: 20px 0;font-size: 26px;text-transform: uppercase;transition: all 0.2s ease;cursor: pointer; &:hover {transform: translateX(-10px);}} .open-menu {cursor: pointer;} #close-menu {font-size: 68px;display: none;right: 10%; position: fixed;z-index:1;cursor: pointer; color: #de8686; z-index: 3;} #close-menu:hover {color: red;} #item-menu {text-align: center; line-height: 40px; margin: 0; padding: 0; font-family: 'Lato', sans-serif; font-weight: 900; color: #fff; } #item-menu a { font-weight: 400; color: #fff; font-size: 40px; text-transform: uppercase; text-decoration: none; } #item-menu a:hover { color: #000;} #menu-float {width: 100%; display: none; position: fixed; left: 0%; top: 2%; font-size: 45px; text-shadow:none; z-index: 11; padding-left: 5%; } #menu-float a {color: #000; } #menu-float a:hover {color: #eee; } /* validate */ /* mobile */ @media only screen and (max-width: 768px) and (max-width: 1024px) { body {margin: 0; padding: 0} header {background: url(../images/header.jpg) no-repeat top fixed; width: 100%;height: 70%; margin: 0;} #logo {padding-top: 20%; position: relative;} #logo h1 {font-size: 60px; letter-spacing: 1px;} #logo h2 {font-size: 20px; letter-spacing: 1px;} nav {display: none;} #container-empresa {width: 100%; margin-bottom: 15%;} #container-empresa h1 {font-size: 2em; line-height: 32px;} #container-empresa h2 {font-size: 0.9em; letter-spacing: 1px; padding-bottom: 25px;} /*#dados-empresa {width: 100%; margin: 0 auto; padding:0; display: table; } #dados-empresa article {width: 30%; margin: 0 auto; padding: 0; float: left; display:inline-block;} #dados-empresa h3 {width: 100%;margin: 0 auto; font-size: 1em; padding: 0;}*/ #imagem-empresa {min-height:75px;min-width: 75px; background: url(../images/empresa.jpg) no-repeat;background-size:cover; text-indent: -9999;} #container-historico {width: 100%; margin: 0; padding: 0;} #container-historico p {width: 93%; margin: 0 auto; padding: 0;} #ibama {min-height:75px;min-width: 75px; background: url(../images/ibama.jpg) no-repeat;background-size:cover; height: auto; margin-top: 15%; } /*#ibama {width: 100%; height: auto; padding: 0; }*/ #ibama article {width: 100%; margin: 0; padding:0; height: auto; padding-bottom: 5px; } #ibama p {margin: 20px; padding-top: 20px; } .video-container {width: 90%;} #institucional article {width: 90%;} #institucional p {margin: 15px;} #institucional img {margin-top: 5px;} #institucional section {width: 100%;'} .descricao-madeira {} .descricao-madeira img {float: left; width: 30%; height: auto;margin: 8px; padding: 0; margin-bottom:7%;} .descricao-madeira h3 {font-size: 1em; float: left; text-align: left; margin-bottom: 10%; position: relative; } .descricao-madeira p { float: right; position: relative; line-height: 1.4em; margin-left: 3%;} #contato {} #container-contato {width: 100%; margin: 0 auto; padding: 0;} #container-contato h1 {width: 100%; padding: 0;font-size: 3em; padding-top: 20%;} #container-contato p {width: 90%; margin: 0 auto; padding:0; font-size: 1.4em; line-height: 1.3em; } #left-icon {width: 100%;padding: 0px; margin: 0 auto!important; position: relative; padding-top: 5%;} #left-icon i {float: none; margin: 0 auto; position: relative; width: 100%; padding: 0; text-align: center;} #left-icon h2 {text-align: center; font-size: 1.2em;} #right-icon {width: 100%;padding: 0px; margin: 0 auto!important; position: relative; padding-top: 5%;} #right-icon i {float: none; margin: 0 auto; position: relative; width: 100%; padding: 0; text-align: center;} #right-icon h2 {text-align: center; font-size: 1.2em; width: 80%; margin: 0 auto; margin-bottom: 8%;} #container-contato form { width: 80%; height: auto; margin: 0 auto; padding: 0;} #container-contato input, textarea {margin: 0; margin-top: 3%;} #container-contato a {text-decoration: none;color: #fff;} #mensagem {width: 100%; height: 10%;} #nome {width: 100%; } #email {width: 100%;} #telefone {width: 100%;} #cidade {width: 100%;} #btn-enviar {width: 100%; -webkit-appearance: none; } #sub-footer {height: auto;} #sub-footer h1 {font-size: 20px; line-height: 20px;} #sub-footer p {font-size: 12px;} footer p {font-size: 10px; text-align: center; float: none; margin: 0 auto;} #menu-fullscreen ul {position: absolute;transform: translate(-50%, -50%); top: 50%;left: 50%; } #item-menu a { font-weight: 400; color: #fff; font-size: 30px; text-transform: uppercase; text-decoration: none; margin: 0 auto;} #menu-float {display: block; background-color:#1abc9c; padding-top: 5px; padding-bottom: 5px; top: 0; } #menu-float a {color: #fff;}} #header-tel a {text-decoration: none; color: #00627A;} @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) { header {background: url(../images/header.jpg) no-repeat top fixed; width: 100%;height: 70%; margin: 0;} #ibama {min-height:75px;min-width: 75px; background: url(../images/ibama.jpg) no-repeat;background-size:cover; height: auto; margin-top: 15%; } #imagem-empresa {min-height:75px;min-width: 75px; background: url(../images/empresa.jpg) no-repeat;background-size:cover; text-indent: -9999;} #btn-enviar {width: 100%; -webkit-appearance: none;} #container-contato a {text-decoration: none; color: #fff;} a {text-decoration: none; color: #fff;} #menu-float {width: 100%; display: none; position: fixed; left: 0%; top: 2%; font-size: 45px; text-shadow:none; z-index: 11; padding-left: 5%; background-color:transparent; } #menu-float a {color: #000; } #menu-float a:hover {color: #eee; } #header-tel a {text-decoration: none; color: #00627A;} } /* Portrait and Landscape */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) { header {background: url(../images/header.jpg) no-repeat top fixed; width: 100%;height: 70%; margin: 0;} #ibama {min-height:75px;min-width: 75px; background: url(../images/ibama.jpg) no-repeat;background-size:cover; height: auto; margin-top: 15%; } #imagem-empresa {min-height:75px;min-width: 75px; background: url(../images/empresa.jpg) no-repeat;background-size:cover; text-indent: -9999;} #btn-enviar {width: 100%; -webkit-appearance: none;} #container-contato a {text-decoration: none; color: #fff;} a {text-decoration: none; color: #fff;} #menu-float {width: 100%; display: none; position: fixed; left: 0%; top: 2%; font-size: 45px; text-shadow:none; z-index: 11; padding-left: 5%; background-color:transparent; } #menu-float a {color: #000; } #menu-float a:hover {color: #eee; } #header-tel a {text-decoration: none; color: #00627A;} }