@import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Ubuntu&display=swap');
html{scroll-behavior: smooth}
:target {scroll-margin-top: .8em;}
body {margin: 0; padding: 0; font-family: 'Open Sans', sans-serif; font-size: 62.5%;}
header {background: #3d3a3a; padding-top: 1%; padding-bottom: 1%;}
a.logo {float: left; padding-top: 5px;}
a.logo img {height: 90px; width: auto;}
.container {width: 70%; margin: 0 auto;}
nav {margin: 0 auto; font-size: 20px; padding-top: 3%; padding-bottom: 26px}
nav span {display: none;}
.closebtn {display: none;}
ul.menu {list-style:none; padding:0; margin:0 auto;position: relative;}
ul.menu li {display:inline-block; margin-left:18px;}
ul.menu a {font-weight: 500; text-decoration: none; margin-left: 22px; padding: 5px 8px; text-transform: uppercase; color: #fff;}
ul.menu a:hover, ul.menu a:active, ul.menu a:focus {background: #F99C35; color: #fff; }
ul.menu li.icon {display: none;}
ul.menu li ul {position:absolute; display:none; background: #3D3A3A; padding: 0; margin: 0; z-index: 99; transition: border 0.3s, box-shadow 0.3s; margin-left: 30px; margin-top: 5px;}   
ul.menu li ul li {float: none; display: block; margin-left: 0;}
ul.menu li:hover ul, .menu li.over ul {display:block;}
ul.menu li ul li {display:block; text-transform: none !important;}	
ul.menu li ul li a {text-transform: none; padding: 10px 12px; display: block; margin-left: 0; text-align: left;}	
h2 {color: #504037; font-weight: 600; font-size: 42px; text-align: center; margin-bottom: 63px; margin-top: 82px;}
.capa {width:100%; height: 88vh; background: url(../img/capa.jpg) no-repeat center #000; position: relative;}
.texto-capa {color: #fff; width: 60%; position: absolute; margin-top: 10%; left: 50%; margin-left: -30%; text-align: center;}
.texto-capa img {width: 12%; height: auto; margin-bottom: 10%;}
.texto-capa h1 {font-size: 7em; text-align: center; margin: 0; padding: 0; margin-bottom: 10%; font-weight: 700; line-height: 1em; text-transform: uppercase;}
.texto-capa span {font-size: 1.6em; font-weight: 100; display: block; margin-bottom: 5%;}
.texto-capa a {color: #fff; font-size: 2.5em; font-weight: bold; padding: 15px 20px; cursor: pointer; text-decoration: none; background: #ff6c0d; }
.texto-capa a:hover {background: #bf3809;}
.container {margin: 0 auto; width: 1187px;}
.bl01 {width: 100%; margin-bottom: 5%;}
.bl01 h2 {font-family: 'Ubuntu', sans-serif; font-size: 5.5em; color: #000;}
.bl01 p {font-size: 1.8em; color: #777777; text-align: center;}
.bl01 ul {margin: 0; padding: 0; list-style: none;}
.bl01 ul li {display: inline-block; width: 49%;}
.bl01 ul li img {width: 100%; height: auto;}
.bl-destaque {width: 100%; padding-top: 4%; padding-bottom: 6%; background: #bf3809; text-align: center; margin-bottom: 5%; color: #fff;}
.bl-destaque h2 {font-size: 3.5em; color: #fff; margin: 0; padding: 0; font-family: 'Ubuntu', sans-serif; margin-bottom: 4%; text-transform: uppercase;}
.bl-destaque p {color: #726f6f; font-size: 2.2em; text-transform: uppercase; color: #fff;}
.videos {padding:0; margin: 0; width: 65%; margin: 0 auto;}
.videos iframe {height: 50vh;}
.bl02 {width: 100%;}
.bl02 h3 {font-size: 4.5em; color: #000; margin: 0; padding: 0; font-family: 'Ubuntu', sans-serif; margin-bottom: 8%;}
.bl02 p {color: #726f6f; font-size: 1.8em; }
.bl02 div div {float: right; width: 47%;}
.bl02 a {background: #ff6c0d; padding: 15px 10px; font-size: 2.2em; color: #fff; text-decoration: none; margin-top: 16%; width: 30%; display: block; text-align: center;}
.bl02 .foto-bl02 {float: left; width: 47.5%; height: auto;}

footer {width: 100%; margin-top: 5%; padding-top: 5%; padding-bottom: 2%; background: #ff8e31; color: #fff; font-size: 1.8em; text-align: center;}
footer a {text-decoration: none; color: #fff;}
footer a:hover {text-decoration: underline;}
footer div {display: block; margin-bottom: 4%;}
footer .fa {padding: 20px; font-size: 30px; width: 30px; text-align: center; text-decoration: none; margin: 5px 2px; border-radius: 50%; color: #ff8e31; background: #fff;}
footer .fa:hover {text-decoration: none;}

.polygon {height: 100px; width: 100%; position: absolute; bottom: 9.7vh; right: 0;}
.polygon svg {width: 100%; height: 20vh; }
.polygon path {fill: #FF7739;}
.lista-topo {position: absolute; bottom: 3vh; width: 45%; left: 50%; margin-left: -22.5%;}
.item-lista-topo {text-align: center;}
.img-lista-topo img {border-radius: 50%;}
.item-lista-topo a {font-size: 2.2em; color: #fff; text-decoration: none; font-family: 'Ubuntu', sans-serif;}

.parallax {background-attachment: fixed; background-position: center; background-repeat: no-repeat;}

.bar-shop {position: fixed; right: 0; top: 35%; transition: border 0.3s, box-shadow 0.3s;}
.bar-shop a {text-decoration: none; padding: 20px 18px; background-color: #3D3A3A; color: #fff; font-size: 4.2em; display: block; text-align: center;}
.bar-shop a:hover {background-color: #F99C35;}

.interna {font-size: 2.2em; line-height: 1.2em;}
.interna a {color: #000; font-weight: bold; text-decoration: none;}
.interna a:hover {text-decoration: underline;}
.banner-interna {background: url(/img/capa.jpg) no-repeat center, linear-gradient(to right, #010101 , #444); width: 100%; margin-bottom: 98px; text-align: center; height: 22vh; padding-top: 8vh; margin-bottom: 80px; text-align: center;}
.banner-interna h1 {color: #fff; font-size: 3.5em; width: 70%; line-height: 1.2em; margin: 0 auto;}
.banner-interna table, th, td {border: 1px solid black; border-collapse: collapse;}

#frmcontato {width: 100%}
#frmcontato input[type=text], input[type=email] {width: 100%; padding: 12px 20px;  margin: 8px 0; box-sizing: border-box; border: 1px solid #ccc;}
#frmcontato textarea {width: 100%; height: 150px; padding: 12px 20px; box-sizing: border-box; border: 1px solid #ccc; border-radius: 4px; resize: none;}
#frmcontato select {width: 100%;  padding: 12px 20px;  border-radius: 4px; border: 1px solid #ccc;}
#frmcontato button {background-color: #424242; border: none; color: white; padding: 16px 32px; text-decoration: none;  margin: 4px 2px; cursor: pointer; width: 100%}
#frmcontato button:hover {background-color: #bf3809}
.endereco-contato {float: right; width: 450px}
.endereco-contato h2 {margin-top: 0; margin-bottom: 0}
.endereco-contato h3 {margin-top: 0; width: 80%}

.form-group {display: block; margin-bottom: 15px;}

#cookie {display: none; position: fixed; bottom: 0; background: #C14500; color: #fff; width: 100%; padding-top: 1.5%; padding-bottom: 1.5%; font-size: 2em;transition: 0.5s;}
#cookie div div {width: 75%; float: left;}
#cookie a {color: #fff}
#cookie button {background: #424242; color: #fff; border: 1px solid #424242; border-radius: 5px; float: right; font-size: 1.2em; width: 24%; padding-top: 1%; padding-bottom: 1%}

.col01 {width: 45%; display: inline-block; vertical-align: top; padding-right: 4.5%;}

a.bt-destaque {color: #fff; font-size: 1.8em; font-weight: bold; padding: 12px 15px; cursor: pointer; text-decoration: none; background: #ff6c0d; }
a.bt-destaque:hover {background: #bf3809;}

@media (max-height: 900px) and (min-width: 680px) {
	.texto-capa {margin-top: 6%}
	.texto-capa img {width: 12%; height: auto; margin-bottom: 10%;}
	.texto-capa h1 {font-size: 6em; margin-bottom: 6%;}
	.texto-capa a {font-size: 2.2em}
	.polygon {height: 100px; width: 100%; position: absolute; bottom: 4.7vh; right: 0;}
	.polygon svg {width: 100%; height: 20vh; }
	.polygon path {fill: #FF7739;}
	.lista-topo {position: absolute; bottom: 1vh;}
	.item-lista-topo a {font-size: 1.8em}
}


@media screen and (max-width: 680px) {
	html, body { overflow-x: hidden; }
	.container {width: 95%; margin: 0 auto; max-width: 100%;}
	nav {max-width: 100%; position: absolute; float: right; top: 25px; background-color: #000; padding: 2px 6px; border-radius: 5px; right: 15px; }
	nav span {font-size: 1.8em; color: #fff; display: inline;}
	.closebtn {display: inline;}
	.sidenav {width: 0; position: fixed; z-index: 999; top: 0; left: 0; background-color: #3D3A3A; overflow-x: hidden; transition: 0.5s; padding-top: 65px; height: 100%; overflow-y: auto;}
	.sidenav .closebtn {top: 0; right: 0; font-size: 3.6em; float: left; position: absolute; text-decoration: none; margin-right: 2%; color: #fff;}

	.texto-capa {width: 70%; margin-top: 35%; left: 50%; margin-left: -40%}
	.texto-capa h1 {font-size: 4.5em; margin-bottom: 25%; line-height: 1em}
	.texto-capa span {font-size: 1.4em; margin-bottom: 35%;}
	.texto-capa a {font-size: 2.2em; }

	.polygon {height: 90px; bottom: 5vh;}
	.lista-topo {bottom: 0; width: 90%; left: 50%; margin-left: -45%}

	ul.menu {list-style:none; z-index: 999 }	
	ul.menu li {position:relative; display: block; width: 100%;}
	ul.menu a {font-size: 1.6em !important; padding: 8px 6px; display:block;}
	ul.menu li ul li a {font-size: 1.4em !important; padding: 6px 3px;}	

	.bl01 {width: 100%; margin-bottom: 4%;}
	.bl01 h2 {font-family: 'Ubuntu', sans-serif; font-size: 3.5em; color: #000;}
	.bl01 p {font-size: 1.8em; color: #777777;}
	.bl01 ul {margin: 0; padding: 0; list-style: none;}
	.bl01 ul li {display: inline-block; width: 49%;}
	.bl01 ul li img {width: 100%; height: auto;}
	.bl-destaque {padding-top: 6%; margin-bottom: 6%;}
	.videos {width: 80%;}
	.bl02 {width: 100%;}
	.bl02 h3 {font-size: 3.8em; margin-bottom: 8%;}
	.bl02 .foto-bl02 {float: none; width: 100%; height: auto; display: block; margin-bottom: 3%;}
	.bl02 div div {float: none; width: 100%;}
	.bl02 div div img {width: 18%; height: auto;}
	.bl02 a {background: #ff6c0d; padding: 15px 10px; font-size: 2.2em; color: #fff; text-decoration: none; width: 50%; display: block; text-align: center; margin: 0 auto; margin-top: 15%;}

	h2 {margin-bottom: 33px; margin-top: 42px;}
	.bl01 ul li {display: block; padding: 0; width: 100%; text-align: center; margin-bottom: 3%;}

	.bar-shop {bottom: 0; right: initial; left: 0; top: initial; width: 100%; background-color: #3D3A3A; height: 10%;}
	.bar-shop a {padding: 0; font-size: 4.2em; display: inline-block; width: 32%; padding-top: 2%;}

	footer {padding-bottom: 20%;}

	.interna {font-size: 1.8em; line-height: 1.6em; margin-bottom: 20%;}
	.banner-interna {height: 16vh; padding-top: 7vh; margin-bottom: 60px; text-align: center; max-width: 100%;}
	.banner-interna h1 {font-size: 2em; width: 100%; line-height: 1.2em; margin: 0 auto; max-width: 100%;}
	.interna img {max-width: 100%; height: auto; width: auto}
	.col01 {width: 100%; display: block; padding-right: 0; margin-bottom: 10%;}
}