@charset "utf-8";
/* CSS Document */
* {margin:0; padding:0;}

html, body {width:100%;
			font-family: Geogrotesque, "Helvetica Neue", Helvetica, Arial, sans-serif;
			font-size:100%;
			height:100%;
			color: #FFF;
			font-weight:300;
			padding: 0;
			margin: 0}

html {
	scroll-behavior: smooth;
}

a {
	cursor: pointer;
}

@media screen and (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

img {max-width:100%;}
a {color:#FFF; text-decoration:none;}
a:focus {outline: 0 !important;color:#FFF; text-decoration:none;}
a:active {color:#FFF; text-decoration:none;}
a:visited {color:#FFF; text-decoration:none;}
a:hover {color:#FFF; text-decoration:underline;}

a.borda {color: #222; text-decoration: none;  background: #FFF; padding: 5px 10px; border: 3px solid #222; font-weight: bold; font-style: italic; border-radius: 10px}
a.borda:focus {color: #222; text-decoration: none;}
a.borda:active {color: #222; text-decoration: none;}
a.borda:visited {color: #222; text-decoration: none;}
a.borda:hover {color: #FFF; text-decoration: none; background: #222}

.esquerda {margin-left: 250px}

h1 {color: #FFF; font-size: 287.6%; font-style: italic; margin: 350px 0 0 0}
h1.maior {color: #FFF; font-size: 400%; font-style: italic; margin: 350px 0 0 0}

h1 span {color: #D65B40}
h2 {color: #FFF; font-size: 175%; font-style: italic; position: absolute; right: 100px; top: 70px}
h3 {font-size: 175%; font-style: italic; margin-bottom: 30px}
h3.titulo {font-size: 112.5%; margin-bottom: 0px; font-weight: bold; width: 100%; float: left; text-align: center}
h3.produtos {font-size: 125%; font-style: italic; margin: 0 0 40px 0; color: #000; padding: 0 0}
h3.produtos2 {font-size: 125%; font-style: italic; margin: 0 0; color: #000; padding: 0 0}
h3.contato {font-size: 175%; font-style: italic; margin-bottom: 0px}
h4 {font-size: 175%; font-style: italic; margin-bottom: 30px; color: #D65B40}
h4.produtos {font-size: 200%; font-style: italic; color: #FCB913; font-weight: bold; margin: 0 0 5px 0; padding: 0 0}
h5 {font-size: 125%; margin-bottom: 10px; color: #00813E; font-weight: bold}

@media (min-width:320px) {
	.titulo_menu {
		font-size: 100%;
		top: 26px;
		right: 10px !important;
		background-color: #000000bf;
    padding: 10px;
    border-radius: 20px;
	}
	.pure-toggle-label {margin-top: 0px; position: absolute; border: 0 !important; top:3px !important; height:0px !important; width:0px !important;}
	.pure-drawer li{list-style:none;}
	.pure-drawer a{	line-height:40px;	display:block;	transition: all .2s;	}
	.pure-toggle-label .pure-toggle-icon, 
	.pure-toggle-label .pure-toggle-icon:before, 
	.pure-toggle-label .pure-toggle-icon:after{	background:#FFF !important;	color: #FFF;	}
		
	.pure-toggle-label:hover{	background:#D65B40;	color: #D65B40;	}

	.pure-toggle-label[data-toggle-label='right'] {
		right: -70px !important;
	}
}

@media only screen and (min-width : 768px) {
	.titulo_menu {
		font-size: 175%;
		top: 40px;
		right: 10px;
		background-color: #000000bf;
    padding: 20px 10px;
    border-radius: 20px;
	}
	.pure-toggle-label {position: absolute; background:#D65B4080; border: 0 !important; top:-15px !important; height:0px !important; width:0px !important;}
	.pure-drawer li{list-style:none;}
	.pure-drawer a{	line-height:40px;	display:block;	transition: all .2s;	}
	.pure-toggle-label .pure-toggle-icon, 
	.pure-toggle-label .pure-toggle-icon:before, 
	.pure-toggle-label .pure-toggle-icon:after{	background:#FFF;	color: #FFF;	}
		
	.pure-toggle-label:hover{	background:#D65B40;	color: #D65B40;	}
	.pure-toggle-label[data-toggle-label='right'] {
		right: 28px !important;
	}
}

p {font-size: 112.5%;font-family: 'Geogrotesque';font-weight: normal;}

img.mobile {display: none}
img.desktop {display: block}

main {    overflow: hidden; /*remove a margem vinda de elementos interno, não pode ter height fixo*/    position: relative;    min-height: 100%;}

.quadrado-verde {border: 1px solid #21835A; width: 100%; height: 510px; float: left; padding: 30px 15px}

.carousel-indicators {bottom: 60px;}

header {width: 100%; float: left; position: absolute; top: 0; z-index: 9999}
@media (min-width:320px) {
	header .logo {float: left; margin: 30px 0 0 0;}
	header .logo img {max-width: 50px;}
}
@media only screen and (min-width : 768px) {
	header .logo {float: left; margin: 50px 0 0 0;}
	header .logo img {max-width: 150px;}
}

nav ul li {font-size: 175%; font-style: italic;}
nav ul li a {color: #FFF; text-decoration: none; width: 100%; float: left; text-align: center; margin-bottom: 20px}
nav ul li a:focus {outline: 0 !important; color: #FFF; text-decoration: none;}
nav ul li a:active {color: #FFF; text-decoration: none;}
nav ul li a:visited {color: #FFF; text-decoration: none;}
nav ul li a:hover {color: #D65B40; text-decoration: none;}

article {width: 100%; float: left; margin: 190px 0 0 0; padding: 20px 10px 20px 10px}
article.local {width: 100%; float: left; margin: 190px 0 0 0; padding: 20px 10px 20px 10px; background: none}
article.compactadores {color: #000; margin: 200px 0 0 0; background: none; padding: 0 0 40px 0}
article.compactadores p {margin: 0 0 20px 0; width: 100%; float: left}
article.compactadores .compactador {width: 100%; float: left}
article.compactadores .compactador p {margin: 20px 0; width: 100%; float: left}
article.compactadores .compactador span {width: 100%; float: left; text-align: center}
article.compactadores .compactador a {color: #222; text-decoration: none;  background: #FFF; padding: 5px 10px; border: 3px solid #222; font-weight: bold; font-style: italic; border-radius: 10px}
article.compactadores .compactador a:focus {color: #222; text-decoration: none;}
article.compactadores .compactador a:active {color: #222; text-decoration: none;}
article.compactadores .compactador a:visited {color: #222; text-decoration: none;}
article.compactadores .compactador a:hover {color: #FFF; text-decoration: none; background: #222}

@media (min-width:320px) {
	section.sobre {background:none; padding: 0px; color: #000}
	section.sobre h4 {text-align: center; margin-bottom: 70px;}
	section.sobre img {width: 200px}
	section.sobre img.direito {display: block; width: 100%}

}

@media only screen and (min-width : 768px) {
	section.sobre {background:none; padding: 0px; color: #000}
	section.sobre h4 {text-align: center; margin-bottom: 70px;}
	section.sobre img {width: 200px}
	section.sobre img.direito {display: block; width: 100%}
}

section.compactadores-home {width: 100%; float: left; background: url("../Arquivos/selo.jpg") no-repeat left top #000; padding: 75px 0}
section.compactadores-home h3 {color: #00813E;}
section.compactadores-home .atalho {float: left; width: 20%; text-align: center}
section.compactadores-home .atalho img {width: 95%; margin-bottom: 50px}
section.compactadores-home .atalho a {color: #00813E; border: 2px solid #00813E; padding: 5px 15px; text-decoration: none; border-radius: 15px; }
section.compactadores-home .atalho a:focus {outline: 0 !important; color: #00813E; text-decoration: none;}
section.compactadores-home .atalho a:active {color: #00813E; border: 2px solid #00813E;  text-decoration: none}
section.compactadores-home .atalho a:visited {color: #00813E; border: 2px solid #00813E;  text-decoration: none}
section.compactadores-home .atalho a:hover {color: #FFF; border: 2px solid #FFF;  text-decoration: none}

.beneficios_interno {background: url("../Arquivos/Fundo-beneficios.jpg"); background-position-y: center; color: #000;padding: 0 40px;align-items: center; background-repeat: no-repeat; background-size: cover}
section.beneficios { color: #000;}
section.beneficios h5 {color: #FFFFFF; font-size: 26px; font-weight: 700; margin-top: 200px}
section.beneficios h6 {color: #FFFFFF; font-size: 22px}
section.beneficios .item {width: 80%; float: right; margin-top: 20px}
section.beneficios .item .imagem {float: left; width: 15%; margin-top: 15px}
section.beneficios .item .imagem img {float: left; width: 100%}
section.beneficios .item .texto {float: right; width: 80%; font-size: 14px}
section.beneficios .item .texto p {margin: 0 0 }

section.suporte {background: url("../Arquivos/fundo-suporte.jpg") center bottom no-repeat}

section.contato {background: #000; padding: 80px 0}
section.contato h5 {font-size: 30px}
section.contato h5.representante {margin-bottom: 30px}

.barra {width: 100%; height: 50px; float: left}

section.topointerno {background: #00813F; padding: 50px 0px; text-align: center}
section.topointerno img {max-width: 100%}

section.pg-compactadores {padding: 0px 0px 50px 0px; color: #000}
section.pg-compactadores h4 {color: #000; margin: 30px 0px; font-size: 200%}
section.pg-compactadores h5 {color: #000; font-size: 150%;}
section.pg-compactadores h6 {color: #000; margin: 0px 0px; font-weight: bold; font-size: 115%}

form {width: 100%; float: left;}
form input, textarea {width: 100% ;height: auto; float: left; border: 0px; border-bottom: 2px solid #C8C8C8; background: none; padding: 15px 10px 15px 5px; margin: 0 0 10px 0; font-weight: bold; color:#00813E; font-size: 112.5% }
form button {float: right; background: #00813E !important; color: #FFF; padding: 5px 15px; border: none; cursor: pointer}
form button:hover {background: #000}


::-webkit-input-placeholder {color: #FFF; font-weight: normal; font-size: 87.5%}
:-moz-placeholder {color: #FFF; font-weight: normal; font-size: 87.5%}
::-moz-placeholder {color: #FFF; font-weight: normal; font-size: 87.5%}
:-ms-input-placeholder {color: #FFF; font-weight: normal; font-size: 87.5%}

.logo-menu {width: 100%; float: left; text-align: center; margin: 30px 0 100px 0}
.logo-menu img {width: 150px}



footer {   background: #222;   color: #fff; float: left;    width: 100%;
}

footer h6 {width: 100%; float: left; text-align: center; margin: 5px 0; padding: 0 0; font-size: 75%}


/* Estilo para tablet */
@media only screen and (min-width:992px) and (max-width:1199px) {
.esquerda {margin-left: 0px}
article {background: url(../img/bg.png); margin: 140px 0 0 0}
article.local {margin: 140px 0 0 0}
.quadrado-verde {height: 550px}
h3.produtos {font-size: 110%;}
h4.produtos {font-size: 150%;}
}

/* Estilo para tablet */
@media only screen and (min-width:768px) and (max-width:991px) {
.esquerda {margin-left: 0px}
h3.produtos {font-size: 70%;}
h3.produtos2 {font-size: 100%;}
h4.produtos {font-size: 100%;}
article {background: url(../img/bg.png); margin: 140px 0 0 0}
article.local {margin: 140px 0 0 0}	
article.compactadores .compactador p {font-size: 100%}
.quadrado-verde {height: 700px}
}

/* Estilo para tablet */
@media only screen and (min-width:481px) and (max-width:767px) {
.esquerda {margin-left: 0px}
h1 {font-size: 200%; margin: 130px 0 0 0}
h3.produtos2 {display: none}
h4.contato {margin-top: 40px} 
.quadrado-verde {height: auto}	
nav ul li {font-size: 125%;}
nav ul li a {margin-bottom: 10px}
.logo-menu {margin: 30px 0 10px 0}
	
article {background: url(../img/bg.png); margin: 160px 0 0 0 }
article.local {background: url(../img/bg.png); margin: 160px 0 0 0}
	
article.compactadores .compactador { border-bottom: 1px solid #CCC; padding: 0 0 60px 0; margin: 60px 0 0 0}
	
form {margin-bottom: 40px}
form textarea {height: 250px}
form button {margin-bottom: 50px}
}

/* Estilo para smartphone */
@media only screen and (min-width:0px) and (max-width:480px) {
.esquerda {margin-left: 0px}
h1 {margin: 250px 0 0 0}
h3.produtos2 {display: none}
h4.contato {margin-top: 40px} 

img.mobile {display: block}
img.desktop {display: none}
	
.carousel-indicators {bottom: 30px;}

article {background: url(../img/bg.png); margin: 160px 0 0 0}
article.local {background: url(../img/bg.png); margin: 160px 0 0 0}
	
article.compactadores .compactador { border-bottom: 1px solid #CCC; padding: 0 0 60px 0; margin: 60px 0 0 0}

section.compactadores-home {background:#000;}
section.compactadores-home .atalho {width: 50%; margin-bottom: 60px}
section.compactadores-home .atalho img {width: 80%; margin-bottom: 20px}
	
section.beneficios {background:#FFF; padding: 50px 0px 80px 0}
section.beneficios h5 {font-size: 26px; font-weight: 700; margin-top: 100px}
section.beneficios h6 {font-size: 22px}
section.beneficios .item {width: 100%; float: left; margin-top: 20px}
	
section.suporte {background:#FFF; padding-bottom: 20px}
	
form {margin-bottom: 40px}
form textarea {height: 250px}
form button {margin-bottom: 50px}

}