@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap');

@media screen and (max-width:760px) {
	
	body{
		margin:0px;
		padding:0px;
		background-color:#000;
	
	}	
	
	
	#topoprincipal{
		
	width:100%;
	height:60px;
	background-image: linear-gradient(to bottom, #000, #333, #000,#000,#333);
	}
	#topoprincipal2{
	
		width:100%;
		height:50px;
		background-image: linear-gradient(to bottom, #000, #333, #000,#000,#333);
	}
	
	#topo2{
	font-family:Arial;
	font-size:12px;
	text-align:center;
	
	width:100%;
	height:20px;
	line-height:20px;
	background-image: linear-gradient(to bottom, #d3af37, #efb810);
	border-bottom:groove 4px #d3af37;
	border-top:groove 4px #d3af37;
	}
a.kaka{
	width:90%;
	height:50px;
	line-height:50px;
	display:block;
	margin:auto;
	background-image: linear-gradient(#d3af37, #efb810);
	text-decoration:none;
	color: #fff;
	position:relative;
	top:20px;
	border:solid 3px #d3af00;
	border-radius:10px; 
	text-align:center;
	font-family:Arial;
	font-size:20px;
	
	background-image:url('../img/whats.png');
	background-repeat: no-repeat;
	background-size:10%,10%;
	background-position:36px;
	
}	

img.logo{
	width:20%;
	margin:auto;
	display:block;
	position:relative;
	top:15px;
	
}

video.ff{
	width:94%;
	height:auto;
	border:solid 4px #fff;
	
}

p.ola3{
	width:90%;
	margin:auto;

	font-size:20px;
	color:#efb810;
	text-align:center;
	font-weight:bold;
}


p.ola2{
	width:90%;
	margin:auto;

	font-size:30px;
	color:#efb810;
	text-align:center;
}
p.ola{
	width:90%;
	margin:auto;

	font-size:20px;
	color:#fff;
	text-align:center;
}

#corpo{
	width:98%;
	min-height:500px;
	height:auto;
	margin:auto;
	color:#fff;
	font-family:Arial;
	font-size:14px;

}
#corpo2{
	width:100%;
	min-height:200px;
	height:100px;
	margin:auto;
	color:#fff;
	font-family:Arial;
	font-size:14px;
	background-color:#ffd;
}

/*----  lado ---------*/
#lado1{
	width:99%;
	height:380px;
	margin:auto;
	color:#fff;
	text-align:center;
	
/*
background-image:url('../img/fone.png');
	background-repeat: no-repeat;
	background-image: url('../img/fone.png');
	background-size: contain;
	background-position:0px center;
*/	

}

#lado2{
	display:none;
}
#lado2a{
	width:99%;
	height:300px;
	margin:auto;
	color:#fff;
	text-align:center;
	
	background-image:url('../img/ela2.png');
	background-repeat: no-repeat;
	background-size: contain;
	background-position:center center;
	
}

/*------------------*/
#caixa1{
	width:99%;
	height:380px;
	margin:auto;
	color:#fff;
	text-align:left;

background-image:url('../img/fone.png');
	background-repeat: no-repeat;
	background-image: url('../img/fone.png');
	background-size: contain;
	background-position:0px center;
	

}

#caixa2{
	display:none;
}
#caixa2a{
	width:99%;
	height:300px;
	margin:auto;
	color:#fff;
	text-align:center;
	
	
}

#caixa3{
    width:100%;
    height:100px;
    line-height:100px;
    border-top:solid 10px #d3af37;
    border-bottom:solid 2px #d3af37;
    color:#fff;
    text-align:center;
    position: relative;
	top:-10px;
	/* necessário para posicionar a seta */
}

/* Seta para baixo */
#caixa3:after{
    content:"";
    position:absolute;
    bottom:-20px; /* distância que a seta desce */
    left:50%;
    transform:translateX(-50%);
    width:0;
    height:0;
    border-left:15px solid transparent;
    border-right:15px solid transparent;
    border-top:20px solid #d3af37; /* cor da seta */
}

/*LISTA DE AMOSTRAS MOBILE*/

/*---------------  ACORDION NO DICA 2 --------*/
#dica2 {
  display:none;
  
}

#dica2a {
  max-width: 96%;
  margin: 0 auto;
  font-family: Arial, sans-serif;
  color:#efefef;
  border:solid 1px #fff;
  border-radius:5px;
  padding:5px;
  
}

a{
	text-decoration:none;
}

.accordion-btn {
  width: 100%;
  padding: 15px;
  text-align: left;
  background: #eee;
  border: none;
  outline: none;
  cursor: pointer;
  font-size: 16px;
  margin-top: 5px;
  transition: 0.3s;
  font-weight:bold;
}

.accordion-btn:hover {
  background: #ddd;
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  background: #f9f9f9;
  padding: 0 15px;
  transition: max-height 0.3s ease;
  
}

.accordion-content p {
  padding: 10px 0;
  margin: 0;
  color:#000;
}



/*-----------------FIM DO ACORDION ------------*/
#dica1{
	width:98%;
	min-height:300px;
	height:auto;
	margin:auto;
	
	background-image:url('../img/dica.png');
	background-repeat: no-repeat;
	background-size: contain;
	background-position:center center;
}	



#amostras{
	width:90%;
	min-height:290px;
	height:auto;
	margin:auto;
	background: transparent;	
	
	
	//*border-top:solid 10px #8d52ea;
	border-bottom:solid 10px #8d52ea;
	*/
}

#dica{
	width:90%;
	min-height:300px;
	height:auto;
	background-color:#efd;
	
}

#rodape{
	
	width:100%;
	height:300px;
	background-image: linear-gradient(to bottom, #000, #333, #000,#000,#000,#333);
	border-top:solid 10px #d3af37;
	
	position:relative;
	top:50px;
}
.videos {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;

}

.videos ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.videos li {
  margin-bottom: 1rem;
   
}

.videos video {
  display: block;
  width: 100%;
  height: auto;
}


/*-------------------------*/
img.topo{
	width:98%;
	
	}

img.texto{
	width:99%;
	}

form.vem{
	width:90%;
	height:auto;
	margin:auto;
	border-radius:5px;
	border:groove 2px #333;
	
	background-image: linear-gradient(to bottom, #000, #333,#333);
	padding:10px;
}
input.btn{
	
	width:98%;
	height:50px;
	background-image: linear-gradient(to bottom, #000, #333, #000,#000,#333);
	border-radius:10px;
	color:#fff;
	font-size:20px;
	font-weight:bold;
}
input.bora{
	width:96%;
	height:30px;
	border:solid 2px #333;
	background-color:#040404;
	color:#fff;
	border-radius:10px;
	padding:5px;
	margin:auto;
}
textarea.bora{
	width:96%;
	height:60px;
	border:solid 2px #333;
	background-color:#040404;
	color:#fff;
	border-radius:10px;
	padding:5px;
	margin:auto;
}

a.botao{
	width:90%;
	height:40px;
	line-height:40px;
	margin:auto;
	display:block;
	background-image: linear-gradient(45deg, #d3af37, #efb810,#d3af37, #efb810, #f9db5c,#d3af37, #efb810,#efb810);
	border-bottom:groove 2px #d3af37;
	border-top:groove 2px #d3af37;
	border-radius:20px;
	text-shadow:0px 0px 5px #222;
	text-decoration:none;
	color:#fff;
	text-align:center;
	
	font-size:22px;
	font-weight:bold;
	
	padding-left:20px;
}

#linha{
	height:10px;
}
/*----- FIM LISTA DEPOIMENTOS ---------------*/



/*------------------------------------------------------------*/
/*-------------------- LIMITE --------------------------------*/	
}

/* --->>> VERSÃO DESKTOP <<---------------------------------------------*/

@media screen and (min-width:768px) {

body {
    margin: 0;
    padding: 0;
    background-color:#000;
}

	
	
	#topoprincipal{
	
		width:100%;
		height:100px;
		background-image: linear-gradient(to bottom, #000, #333, #000,#000,#333);
	}
	

#topo2{
	font-family:Arial;
	font-size:12px;
	text-align:center;
	width:100%;
	height:40px;
	line-height:20px;
	background-image: linear-gradient(45deg, #d3af37, #efb810,#d3af37, #efb810, #f9db5c,#d3af37, #efb810,#efb810);
	border-bottom:groove 4px #d3af37;
	border-top:groove 4px #d3af37;
	}
	
a.kaka{
	width:20%;
	height:50px;
	line-height:50px;
	display:block;
	margin:auto;
	background-image: linear-gradient(#d3af37, #efb810);
	text-decoration:none;
	color: #fff;
	position:relative;
	top:20px;
	border:solid 3px #d3af00;
	border-radius:10px; 
	text-align:center;
	font-family:Arial;
	font-size:20px;
	
	background-image:url('../img/whats.png');
	background-repeat: no-repeat;
	background-size:10%,10%;
	background-position:36px;
	
}	

img.logo{
	width:10%;
	margin:auto;
	display:block;
	position:relative;
	top:15px;
	
}
video.ff{
	width:82%;
	height:auto;
	border:solid 4px #fff;
	
}
p.ola3{
	width:90%;
	margin:auto;

	font-size:20px;
	color:#efb810;
	text-align:center;
	font-weight:bold;
}

p.ola2{
	width:90%;
	margin:auto;

	font-size:30px;
	color:#efb810;
	text-align:center;
}
p.ola{
	width:90%;
	margin:auto;

	font-size:20px;
	color:#fff;
	text-align:center;
}
#corpo{
	width:60%;
	min-height:500px;
	height:auto;
	margin:auto;
	color:#fff;
	font-family:Arial;
	font-size:14px;
	
}
#corpo2{
	width:100%;
	min-height:200px;
	height:100px;
	margin:auto;
	color:#fff;
	font-family:Arial;
	font-size:14px;
	background-color:#ffd;
}


#caixa1{
	width:50%;
	height:500px;
	/*border:solid 1px #222;*/
	border-radius:20px;
	color:#fff;
	text-align:left;
	float:right;
	

	background-repeat: no-repeat;
	background-image: url('../img/fone.png');
	background-size: contain;
	background-position:-50px center;
}

#lado1{
	width:50%;
	height:400px;
	color:#fff;
	text-align:left;
	float:right;
	
	/*
	background-image:url('../img/fone.png');
	background-repeat: no-repeat;
	background-image: url('../img/fone.png');
	background-size: contain;
	background-position:-50px center;*/
}
#caixa2a{display:none;}
#lado2a{display:none;}

#lado2{
	width:50%;
	height:400px;
	
	color:#fff;
	text-align:center;
	
	
	background-image:url('../img/ela1.png');
	background-repeat: no-repeat;
	background-size: contain;
	background-position:0px center;
}

#caixa2{
	width:60%;
	height:500px;
	
	color:#fff;
	text-align:center;
	
	/*
	background-image:url('../img/fundo1.png');
	background-repeat: no-repeat;
	background-size:100%,100%;
	background-position:center center;
	*/
}

#caixa3{
    width:100%;
    height:100px;
    line-height:100px;
    border-top:solid 10px #d3af37;
    border-bottom:solid 2px #d3af37;
    color:#fff;
    text-align:center;
    position: relative; /* necessário para posicionar a seta */
}

/* Seta para baixo */
#caixa3:after{
    content:"";
    position:absolute;
    bottom:-20px; /* distância que a seta desce */
    left:50%;
    transform:translateX(-50%);
    width:0;
    height:0;
    border-left:15px solid transparent;
    border-right:15px solid transparent;
    border-top:20px solid #d3af37; /* cor da seta */
}

	
/*LISTA DE AMOSTRA  DESKTOP*/


/*---------------  ACORDION NO DICA 2 --------*/
#roda{
	width:40%;
	height:auto;
	border:solid 1px #ff;
	margin:auto;	
}

#dica2a{display:none}
#dica2 {
  max-width: 46%;
  margin: 0 auto;
  font-family: Arial, sans-serif;
  float:right;
  color:#efefef;
  border:solid 1px #fff;
  border-radius:5px;
  padding:5px;
  
}

.accordion-btn {
  width: 100%;
  padding: 15px;
  text-align: left;
  background: #eee;
  border: none;
  outline: none;
  cursor: pointer;
  font-size: 16px;
  margin-top: 5px;
  transition: 0.3s;
  font-weight:bold;
}

.accordion-btn:hover {
  background: #ddd;
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  background: #f9f9f9;
  padding: 0 15px;
  transition: max-height 0.3s ease;
  
}

.accordion-content p {
  padding: 10px 0;
  margin: 0;
  color:#000;
}



/*-----------------FIM DO ACORDION ------------*/
#dica1{
	width:52%;
	min-height:370px;
	height:auto;
	
	background-image:url('../img/dica.png');
	background-repeat: no-repeat;
	background-size: contain;
	background-position:center center;
}	


#amostras{
	width:60%;
	min-height:290px;
	height:auto;
	margin:auto;
	background: transparent;	
	
	
	//*border-top:solid 10px #8d52ea;
	border-bottom:solid 10px #8d52ea;
	*/
}

#rodape{
	width:100%;
	height:300px;
	background-image: linear-gradient(to bottom, #000, #333, #000,#000,#000,#333);
	border-top:solid 10px #d3af37;
}

a{
	text-decoration:none;
}

/*-------- llista videos DEPOIMENTOS DESKTOP ---- */
.videos {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}

.videos ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex; /* Utilizando Flexbox para alinhar os vídeos */
  flex-wrap: wrap; /* Quebra de linha automática caso não caibam em uma linha */
}

.videos li {
  flex: 0 0 50%; /* Cada vídeo ocupa metade da largura disponível */
  margin-bottom: 1rem;
}

.videos video {
  display: block;
  width: 100%;
  height: auto;
}

/*--------------------*/


img.topo{
	width:98%;
	float:right;
}

img.texto{
	width:99%;
	}

form.vem{
	width:90%;
	height:auto;
	margin:auto;
	border-radius:5px;
	border:groove 2px #333;
	
	background-image: linear-gradient(to bottom, #000, #333,#333);
	padding:10px;
}
input.btn{
	
	width:98%;
	height:50px;
	background-image: linear-gradient(to bottom, #000, #333, #000,#000,#333);
	border-radius:10px;
	color:#fff;
	font-size:20px;
	font-weight:bold;
}

input.bora{
	width:96%;
	height:30px;
	border:solid 2px #333;
	background-color:#040404;
	color:#fff;
	border-radius:10px;
	padding:5px;
	margin:auto;
}

textarea.bora{
	width:96%;
	height:60px;
	border:solid 2px #333;
	background-color:#040404;
	color:#fff;
	border-radius:10px;
	padding:5px;
	margin:auto;
}

img.botao{
	
	float:left;
	
}
a.botao{
	width:80%;
	height:40px;
	line-height:40px;
	margin:auto;
	display:block;
	background-image: linear-gradient(45deg, #d3af37, #efb810,#d3af37, #efb810, #f9db5c,#d3af37, #efb810,#efb810);
	border-bottom:groove 2px #d3af37;
	border-top:groove 2px #d3af37;
	border-radius:20px;
	text-shadow:0px 0px 5px #222;
	text-decoration:none;
	color:#fff;
	text-align:center;
	
	font-size:22px;
	font-weight:bold;
	float:left;
	padding-left:20px;
}

#linha{
	height:10px;
}
/*------------------------------------------------------------*/
/*-------------------- LIMITE --------------------------------*/
}