@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap');
/* CSS Document */
body, html{
  height: 100%;
	background: #000000;
	margin: 0;
}
p {
	color: white;
	text-align: center;
	font-family: verdana;
	font-size: 14px;
	line-height: 26px;
}
#main {
	width: 100%;
	height: 100%;
}
.conteudo {
	width: 1200px;
	margin: 0 auto;
}
.titulos {
	display: table;
	margin: 0 auto;
	padding: 0px 5px 2px 5px;
  font-size: 54px;
	text-align: center;
	letter-spacing: -0.05em;
	font-family: 'Archivo Black', sans-serif;
  background-color: #f3ec78;
	text-transform: uppercase;
    background-image: linear-gradient(90deg, #8d6628, #8d6628, #fae2ae, #8d6628, #8d6628);
    background-size: 100%;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent; 
    -moz-text-fill-color: transparent;
}
.menor {
	font-size: 30px;
	margin-top: -10px;
}
.seta {
	width: 100%;
	margin-top: 20px;
}
.seta img{
	display: block;
	margin: 0 auto;
}
.linha {
	width: 100%;
	height: 5px;
	position: absolute;
	z-index: 9;
	background: #9f7928;
	
}
.menu {
	width: 100%;
	height: 53px;
	background: #13100d;
	position: absolute;
	box-shadow: 0px 0px 15px black;
	
}
.menu2 {
	width: 1200px;
	height: 45px;
	margin: 0 auto;
}
.menu-esq {
	width:  40%;
	float: left;
	height: 15px;
}
.menu-esq ul {
	padding:0px;
    margin:0px;
    list-style:none;
}
.menu-esq ul li {
	display: inline;
	float: right;
}
.menu-esq ul li a {
    padding: 14px 20px;
    display: inline-block;

    /* visual do link */
	font-family: 'Archivo Black', sans-serif;
	text-transform: uppercase;
	font-size: 20px;
    color: #9f7928;
    text-decoration: none;
}
.menu-dir {
	width:  40%;
	float: left;
	height: 15px;
}
.menu-dir ul {
	padding:0px;
    margin:0px;
    list-style:none;
}
.menu-dir ul li {
	display: inline;
	float: left;
}
.menu-dir ul li a {
    padding: 14px 20px;
    display: inline-block;

    /* visual do link */
	font-family: 'Archivo Black', sans-serif;
	text-transform: uppercase;
	font-size: 20px;
    color: #9f7928;
    text-decoration: none;
}

.logo {
	width: 20%;
	height: 250px;
	top: -26px;
	float: left;
	position: relative;
	margin: 0 auto;
	background-color: transparent;
	background: url("../imagens/fundologo.png") center top no-repeat;
	
}
.logo-img {
	margin: 0 auto;
}

#centro {
position:absolute;
top:32%;
left:30%;
margin-top:-50px;
margin-left:-50px;
}
.banners {
	width: 100%;
	height: 735px;
	background: url("../imagens/banners/1.jpg") center top;
}
#qrcode {
	width: 100%;
	height: auto;
	overflow: hidden;
	background: url("../imagens/fundoqrcode.jpg") center top;
	background-size: cover;
}
.qrcode-esquerdo {
	display: block;
	width: 50%;
	height: 100%;
	float: left;
	position: relative;
}
.qrcode-esquerdo img {
	position: relative;
	bottom: 0;
	left: 20%;
	margin-top: 90px;
}
.produto-esquerdo {
	display: block;
	width: 50%;
	height: 100%;
	float: left;
	position: relative;
}
.produto-esquerdo img {
	position: relative;
	bottom: 0;
	left: 50%;
	margin-top: 150px;
}
.qrcode-direito {
	width: 50%;
	height: 100%;
	float: right;
	position: relative;
}
.contato-direito {
	width: 50%;
	height: 100%;
	float: right;
	position: relative;
}
.qrcode-texto {
	margin-top: 110px;
	width: 600px;
	float: left;
}
.qrcode-texto2 {
	margin-top: 150px;
	margin-bottom: 150px;
	width: 600px;
	float: left;
}
.qrcode-titulo {
	display: table;
	margin: 0 auto;
}
.qrcode-descricao {
	width: 100%;
	height: 70%;
}
.produtos {
	width: 100%;
	padding-top: 50px;
}
.itens {
	width: 25%;
	float: left;
	margin-top: 50px;
	
}
.itens img {
	display: block;
	margin: 0 auto;
	
}
.nome-produto {
	font-size: 26px;
	text-transform: uppercase;
	color: #ffffff;
	text-align: center;
	font-family: 'Archivo Black', sans-serif;
	
}
.contato {
	width: 100%;
	background: url("../imagens/fundo-contato.jpg") center;
	background-size: cover;
	height: auto;
	position: relative;
	float: left;
	margin-top: 100px;
}
.contato-esquerdo {
	width: 50%;
	height: 100%;
	float: left;
	position: relative;
}
.contato-texto {
	margin-top: 110px;
	width: 600px;
	float: right;
}
.campos {
	width: 90%;
	padding-left: 15px;
	margin-top: 20px;
	height: 35px;
	border-radius: 5px;
	border: solid 1px #EEE;
}
.campos-texto {
	width: 90%;
	padding-left: 15px;
	padding-top: 10px;
	margin-top: 20px;
	height: 135px;
	border-radius: 5px;
	border: solid 1px #EEE;
}
.formulario {
	width: 600px;
	margin: 120px 0px 0px 50px;
}
a {
  text-decoration: none;
  color: #8d6628;
  opacity:1;
  font-family: 'Archivo Black', sans-serif;
  font-size: 1.5em;
  font-weight: 400;
  transition: 200ms;
	text-transform: uppercase;
	font-size: 19px;
	
}
a:hover {
  opacity:0.5;
}
ul {
  padding: 0;
  list-style-type: none;
}



.container {
  margin-top: 50px; 
  Display: flex;
  justify-content: center;
  align-items: center;
}
.phone {
  background-color: #36383F;
  border-radius: 40px;
  width: 300px;
  height: 600px;
  Display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 30px 50px 100px #85888C;
}
.content {
  border: 1px solid #36383F;
  border-radius: 20px;
  width: 94%;
  height: 91%;
  background-color: #F5F6FA;
  overflow: hidden;
}
nav {
  height: 0px;
}


#menuToggle {
	width: 50%;
  display: none;
  flex-direction: column;
  position: relative;
  top: 25px;
  left: 25px;
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle input
{
  display: flex;
  width: 40px;
  height: 32px;
  position: absolute;
  cursor: pointer;
  opacity: 0;
  z-index: 2;
}

#menuToggle span
{
  display: flex;
  width: 29px;
  height: 2px;
  margin-bottom: 5px;
  position: relative;
  background: #8d6628;
  border-radius: 3px;
  z-index: 1;
  transform-origin: 5px 0px;
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-3px, -1px);
  background: #36383F;
}
#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

#menuToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(0, -1px);
}

#menu
{
  position: absolute;
  width: 180px;
  height: 700px;
  box-shadow: 0 0 10px #000;
  margin: -50px 0 0 -50px;
  padding: 50px;
  padding-top: 125px;
  background: url("../imagens/fundomenu.jpg") center top no-repeat;
	background-size: cover;
  -webkit-font-smoothing: antialiased;
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menu li
{
  padding: 18px 0;
  transition-delay: 2s;
}

#menuToggle input:checked ~ ul
{
  transform: none;
	background: url("../imagens/fundomenu.jpg") center top no-repeat;
	background-size: cover;
}
.qrcode-mobile {
	display: none;
}



@media screen and (max-width: 1024px) {
	.itens {
		width: 100%;
	}
	.conteudo {
		width: 100%;
	}
	.qrcode-esquerdo {
		display: none;
	}
	.qrcode-direito {
		width: 100%;

	}
	.formulario {
		width: 90%;
	}
	.menu-esq {
		display: none;
	}
	.menu-dir {
		display: none;
	}
	.qrcode-mobile {
	display: block;
}
	.qrcode-mobile img {
	position: relative;
		max-width: 97%;
		height: auto;
}
	.itens {
		width: 50%;
	}
	.itens img {
		max-width: 80%;
		height: auto;
	}
	.nome-produto {
		font-size: 16px;
		margin-top: 10px;
	}
	.logo {
		width: 100%;
	}
	.banners {
		height: 606px;
		background-size: cover;
	}
	#menuToggle {
  display: flex;
	}
	.qrcode-texto {
		width: 100%;
	}
	#centro {
		top: 30%;
		left: 38%;
		margin-top: -12%;
		margin-left: -50px;
	}
	.contato-direito {
	width: 90%;
		float: inherit;
	
}
	.contato-esquerdo {
		width: 100%;
	}
	.contato-texto {
		width: 100%;
	}
	.titulos {
		font-size: 50px;
	}
	.formulario {
		margin: 0px 0px 88px 41px;
	}
	.produto-esquerdo {
		width: 100%;
	}
	.produto-esquerdo img {
		left: 17%;
		margin-top: 250px;
	}
	.qrcode-texto2 {
		width: 100%;
		margin-top: 50px;
	}
	.menor {
		font-size: 20px;
	}
	
}


@media (min-width : 992px) {
  .offcanvas {
    visibility      : visible;
    position        : relative;
    background      : none;
    border          : none;
    justify-content : end;
    color           : red;
  }
}

@media (max-width : 992px) {
  .offcanvas {
    width : 250px !important;
  }

  .offcanvas-start-lg {
    top          : 0;
    left         : 0;
    border-right : 1px solid rgba(0, 0, 0, .2);
    transform    : translateX(-100%);
  }

}

.navbar-nav li a {
color: white !important;
}