#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh; /* 100% da altura do ecrã */
  background-color: #000;
  z-index: 9999; /* Fica por cima de todos os outros elementos */

  /* Centra o conteúdo do preloader (o logo) */
  display: flex;
  justify-content: center;
  align-items: center;

  /* Propriedades para a transição de fade-out */
  opacity: 1;
  transition: opacity 0.75s ease-out;
}

/* Classe que será adicionada via JavaScript para esconder o preloader */
#preloader.hidden {
  opacity: 0;
  pointer-events: none; /* Impede cliques no preloader depois de escondido */
}

/* Estilo e animação para o logo dentro do preloader */
.preloader-logo {
  width: 150px; /* Ajuste o tamanho conforme necessário */
  animation: pulse 1.5s infinite ease-in-out;
}

/* Animação de pulsar para o logo */
@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.05);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0.8;
  }
}





/* ================================== */
/* ESTILOS DO COOKIE BANNER PERSONALIZADO  */
/* ================================== */

.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #1a1a1a;
  color: #fff;
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1000;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.5s ease, transform 0.5s ease;
  flex-wrap: wrap;
  gap: 15px;
}

.cookie-banner.show {
  opacity: 1;
  transform: translateY(0);
}

.cookie-banner p {
  margin: 0;
  flex-grow: 1;
}

.cookie-banner a {
  color: var(--glow-color);
  text-decoration: underline;
  cursor: pointer;
}

/* ALTERAÇÃO AQUI: Aumentamos o tamanho da letra base do botão */
#accept-cookies-btn {
  padding: 10px 20px;
  font-size: 1.1em; /* Aumentado para ser maior em ecrãs de computador */
  font-weight: bold; /* Adicionado para dar mais destaque */
  border: 0.15em solid var(--glow-color);
}

/* ... (o seu código do modal continua igual) ... */

/* ======================================================= */
/* ESTILOS RESPONSIVOS PARA O COOKIE BANNER E MODAL      */
/* ======================================================= */

/* --- Para Portáteis e Ecrãs Médios (até 1170px) --- */
@media (max-width: 1170px) {
  .modal-content {
    margin: 12% auto;
    background-color: #2b2b2b;
  }
}

/* --- Para Ecrãs de 1050px ou menos --- */
@media (max-width: 1050px) {
  .cookie-banner p {
    font-size: 0.95em;
  }

  /* ALTERAÇÃO ADICIONADA: Ajusta o tamanho do botão para esta resolução */
  #accept-cookies-btn {
    padding: 12px 22px;
    font-size: 1.15em; /* Tamanho intermédio para portáteis/tablets grandes */
  }

  .modal-content {
    width: 85%;
    margin: 15% auto;
  }
}

/* --- Para Tablets e Telemóveis (até 768px) --- */
@media (max-width: 768px) {
  .cookie-banner {
    flex-direction: column; 
    align-items: center;    
    text-align: center;     
    padding: 20px;          
  }

  .cookie-banner p {
    margin-bottom: 15px; 
    font-size: 1em;
  }

  #accept-cookies-btn {
    width: 80%; 
    max-width: 250px;
    padding: 14px;
    font-size: 1.2em; /* Tamanho maior para ser fácil de tocar */
  }

  .modal-content {
    width: 90%;             
    margin: 20% auto; 
    padding: 20px;
    font-size: 0.95em;      
    background-color: #2b2b2b;
  }
}

/* --- Para Telemóveis Pequenos (até 480px) --- */
@media (max-width: 480px) {
  .cookie-banner {
    padding: 15px;
    font-size: 0.9em;
  }

  #accept-cookies-btn {
    padding: 12px;
    font-size: 1.1em; /* Ligeiramente mais pequeno, mas ainda grande e legível */
  }

  .modal-content {
    width: 95%;
    margin: 25% auto;
    padding: 15px;
    font-size: 0.85em;
  }
}
/* ======================================================= */
/* Coreto Fest - ESTILOS OTIMIZADOS E RESPONSIVOS */
/* ======================================================= */

/* 1. ESTILOS BASE (PARA COMPUTADORES > 1170PX) */

/* Contentor para os botões do festival, usando Flexbox */
.botoes-festivais-container {
  display: flex;
  justify-content: center; /* Centra os botões lado a lado */
  gap: 20px;               /* Cria um espaço de 20px ENTRE os botões */
  margin: 20px 0;
}

/* Contentor para o botão "Voltar" (se for um elemento separado) */
.container-botao-voltar {
  display: flex;
  justify-content: center;
  margin-top: 2%;
}

/* Imagem principal da página do festival */
.divCoretofest1 img {
  display: block;
  margin: 0 auto; /* Forma abreviada e mais limpa de centrar */
  width: 33%;
}


/* ======================================================= */
/* 2. AJUSTES PARA PORTÁTEIS E TABLETS GRANDES (<= 1170px) */
/* ======================================================= */

@media only screen and (max-width: 1170px) {
  .divCoretofest1 img {
    width: 70%;
  }

  .container-botao-voltar {
    margin-top: 4%;
  }
  
  /* Aumenta o tamanho da letra dos botões do festival nestes ecrãs */
  .btncoreto {
    font-size: 2em; /* Ajustado para um valor mais equilibrado */
  }
}


/* ======================================================= */
/* 3. AJUSTES PARA TABLETS (<= 768px) */
/* ======================================================= */

@media (max-width: 768px) {
  /* Os botões do festival ficam em coluna */
  .botoes-festivais-container {
    flex-direction: column; /* Os botões ficam um em cima do outro */
    align-items: center;    /* Centra os botões na vertical */
    gap: 15px;              /* Espaço entre os botões na vertical */
  }

  .divCoretofest1 img {
    width: 80%; /* Aumentamos um pouco para melhor visibilidade */
  }

  .container-botao-voltar {
    margin-top: 5%;
  }
}


/* ======================================================= */
/* 4. AJUSTES PARA TELEMÓVEIS (<= 480px) */
/* ======================================================= */

@media (max-width: 480px) {
  /* No HTML para telemóveis, os botões já estarão em coluna devido à regra anterior (max-width: 768px) */

  .divCoretofest1 img {
    width: 95%; /* A imagem ocupa quase toda a largura */
  }

  .container-botao-voltar {
    margin-top: 8%;
  }

  .btncoreto {
    font-size: 1.2em; /* Ajusta o tamanho da letra para não ser demasiado grande */
    width: 90%;       /* Garante que o botão não ultrapassa o ecrã */
  }
}


/* Estilos para o body */
body {
  
  background-color: black;
  margin: 0;
  padding: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}




/* Estilos para o header */
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 10vh;
  background-color: #333;
  z-index: 100;
  background-image: url("img/headerBackground.png");
  background-repeat: no-repeat, no-repeat;
  background-size: 100%;
  text-align: center;
  align-items: center;
 
 
}

header .header-image {
  display: flex;
  
  align-items: center;
  width: 100%;
  height: 100%;
 
}


header .header-image button {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 22px;
  color: rgb(255, 255, 255);
  text-decoration: none;
  width: 50%;
  cursor: pointer;
  margin-left: 50px;
  margin-right: 50px;
}

/* Media Query for smaller screens */


/* Estilos para o footer */
/* footer { */
/*   position: fixed; */
/*   bottom: 0; */
/*   left: 0; */
/*   right: 0; */
/*   height: 5vh; */
/*   background-color: rgb(255, 255, 255); */
/*   z-index: 100; Ajustado para estar abaixo da divQuadrados */
/*   align-items: center; */
/*   background-image: url("img/footerBackground.png"); */
/*   background-repeat: no-repeat, repeat; */
/*   background-size: 100%; */
/*   text-align: center; */
/*   color: white; */
/*   align-items: center; */
  
  
/* } */

/* ================================== */
/* ESTILOS DO COOKIE BANNER PERSONALIZADO  */
/* ================================== */

.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #1a1a1a;
  color: #fff;
  padding: 15px;
  display: flex; /* Usamos flex para alinhar os itens */
  justify-content: space-between; /* Espaço entre o texto e o botão */
  align-items: center;
  z-index: 1000;
  opacity: 0; /* Começa invisível */
  transform: translateY(100%); /* Começa fora do ecrã */
  transition: opacity 0.5s ease, transform 0.5s ease;
  flex-wrap: wrap; /* Permite que quebre linha em ecrãs pequenos */
  gap: 15px;
}

.cookie-banner.show {
  opacity: 1;
  transform: translateY(0);
}

.cookie-banner p {
  margin: 0;
  flex-grow: 1; /* Faz o texto ocupar o espaço disponível */
}

.cookie-banner a {
  color: var(--glow-color); /* Usa a sua cor de "glow" */
  text-decoration: underline;
  cursor: pointer;
}

#accept-cookies-btn {
  padding: 8px 16px;
  font-size: 1.5em;
  /* Reutiliza o estilo do seu botão, mas sem a animação constante */
  border: 0.15em solid var(--glow-color);
}

/* Modal da Política de Cookies */
.modal {
  display: none; /* Começa escondido */
  position: fixed;
  z-index: 1001;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.7);
}

.modal-content {
  background-color: #1c1c1c;
  color: #fff;
  margin: 15% auto;
  padding: 25px;
  border: 1px solid var(--glow-color);
  border-radius: 10px;
  width: 80%;
  max-width: 600px;
  box-shadow: 0 0 20px var(--glow-color);
}

.close-modal-btn {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.close-modal-btn:hover {
  color: #fff;
}




/* Botoes dos Menus e a sua Animaçao*/

:root {
  --glow-color: rgb(128, 255, 128);
}
.glowing-btn3 {
  position: relative;
  color: var(--glow-color);
  cursor: pointer;
 
  border: 0 black;
  border-radius: 0.45em;
  background: none;
  perspective: 2em;
  
  font-size: 1em;
  font-weight: 900;
  

  
  animation: border-flicker 2s linear infinite;
}

.glowing-btn2 {
  position: relative;
  color: var(--glow-color);
 
 
  border: 0.15em solid var(--glow-color);
  border-radius: 0.45em;
  background: none;
  perspective: 1.5em;
  
  font-size: 1em;
  font-weight: 900;
  
	padding: 5px;
	
  -webkit-box-shadow: inset 0px 0px 0.5em 0px var(--glow-color),
    0px 0px 0.5em 0px var(--glow-color);
  -moz-box-shadow: inset 0px 0px 0.5em 0px var(--glow-color),
    0px 0px 0.5em 0px var(--glow-color);
  box-shadow: inset 0px 0px 0.5em 0px var(--glow-color),
    0px 0px 0.5em 0px var(--glow-color);
  animation: border-flicker 2s linear infinite;
}


.glowing-btn {
  position: relative;
  color: var(--glow-color);
  cursor: pointer;
 
  border: 0.15em solid var(--glow-color);
  border-radius: 0.45em;
  background: none;
  perspective: 2em;
  
  font-size: 1em;
  font-weight: 900;
  

  -webkit-box-shadow: inset 0px 0px 0.5em 0px var(--glow-color),
    0px 0px 0.5em 0px var(--glow-color);
  -moz-box-shadow: inset 0px 0px 0.5em 0px var(--glow-color),
    0px 0px 0.5em 0px var(--glow-color);
  box-shadow: inset 0px 0px 0.5em 0px var(--glow-color),
    0px 0px 0.5em 0px var(--glow-color);
  animation: border-flicker 2s linear infinite;
}

.glowing-txt {
 
 
  -webkit-text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3),
    0 0 0.45em var(--glow-color);
  -moz-text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3),
    0 0 0.45em var(--glow-color);
  text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3), 0 0 0.45em var(--glow-color);
  animation: text-flicker 3s linear infinite;
}

.faulty-letter {
  opacity: 0.5;
  animation: faulty-flicker 2s linear infinite;
}

.glowing-btn::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0.7;
  filter: blur(1em);
  transform: translateY(120%) rotateX(95deg) scale(1, 0.35);
  background: var(--glow-color);
  pointer-events: none;
}

.glowing-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  z-index: -1;
  background-color: var(--glow-color);
  box-shadow: 0 0 2em 0.2em var(--glow-color);
  transition: opacity 100ms linear;
}

.glowing-btn:hover {
  color: rgba(0, 0, 0, 0.8);
  text-shadow: none;
  animation: none;
}

.glowing-btn:hover .glowing-txt {
  animation: none;
}

.glowing-btn:hover .faulty-letter {
  animation: none;
  text-shadow: none;
  opacity: 1;
}

.glowing-btn:hover:before {
  filter: blur(1.5em);
  opacity: 1;
}

.glowing-btn:hover:after {
  opacity: 1;
}


.glowing-btn::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0.7;
  filter: blur(1em);
  transform: translateY(120%) rotateX(95deg) scale(1, 0.35);
  background: var(--glow-color);
  pointer-events: none;
}

.glowing-btn3::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  z-index: -1;
  background-color: var(--glow-color);
  box-shadow: 0 0 2em 0.2em var(--glow-color);
  transition: opacity 100ms linear;
}

.glowing-btn3:hover {
  color: rgba(0, 0, 0, 0.8);
  text-shadow: none;
  animation: none;
}

.glowing-btn3:hover .glowing-txt {
  animation: none;
}

.glowing-btn3:hover .faulty-letter {
  animation: none;
  text-shadow: none;
  opacity: 1;
}

.glowing-btn3:hover:before {
  filter: blur(1.5em);
  opacity: 1;
}

.glowing-btn3:hover:after {
  opacity: 1;
}

@keyframes faulty-flicker {
  0% {
    opacity: 0.1;
  }
  2% {
    opacity: 0.1;
  }
  4% {
    opacity: 0.5;
  }
  19% {
    opacity: 0.5;
  }
  21% {
    opacity: 0.1;
  }
  23% {
    opacity: 1;
  }
  80% {
    opacity: 0.5;
  }
  83% {
    opacity: 0.4;
  }

  87% {
    opacity: 1;
  }
}

@keyframes text-flicker {
  0% {
    opacity: 0.1;
  }

  2% {
    opacity: 1;
  }

  8% {
    opacity: 0.1;
  }

  9% {
    opacity: 1;
  }

  12% {
    opacity: 0.1;
  }
  20% {
    opacity: 1;
  }
  25% {
    opacity: 0.3;
  }
  30% {
    opacity: 1;
  }

  70% {
    opacity: 0.7;
  }
  72% {
    opacity: 0.2;
  }

  77% {
    opacity: 0.9;
  }
  100% {
    opacity: 0.9;
  }
}

@keyframes border-flicker {
  0% {
    opacity: 0.1;
  }
  2% {
    opacity: 1;
  }
  4% {
    opacity: 0.1;
  }

  8% {
    opacity: 1;
  }
  70% {
    opacity: 0.7;
  }
  100% {
    opacity: 1;
  }
}

@media only screen and (max-width: 600px) {
  .glowing-btn{
    font-size: 1em;
  }
}



/* Estilos para o Logotipo no meio do Header */

.divLogotipo button {
  display: flex;
  justify-content: center;
  align-items: center;
 
  margin-left: 50px;
  margin-right:50px;
 
  
}
.divLogotipo img {
  width: 100px; /* Aumente ou diminua conforme necessário */
  height: 30%; 
  /* Isso manterá a proporção da imagem */
}





.news-ticker {
  position: fixed;
  
  left: 0;
  right: 0;
  background-color: #333;
  color: white;
  font-size: 14px;
  padding: 5px 0;
  overflow: hidden;
  white-space: nowrap;
  
}

.news-ticker footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #333;
  color: white;
  font-size: 14px;
  padding: 5px 0;
  overflow: hidden;
  white-space: nowrap;
  /* ... outros estilos ... */
}

.news-ticker ul {
  list-style: none;
  padding: 0;
  margin: 0;
  overflow: visible;
  white-space: nowrap;
  animation: ticker 15s linear infinite;/* Aumente o valor do "20s" para tornar mais lento */
  width: 120%;
}

.news-ticker li {
  display: inline-block;
  margin-right: 75px;
  width: auto; /* Aumente o valor para adicionar mais espaço entre as notícias */
  padding: 0;
}

@-webkit-keyframes ticker {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes ticker {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}







.divBox2 {
  
  height: auto; /* Altura da divBox2 */
  display: flex;
  flex-direction: column; /* Alinha os elementos verticalmente */
  align-items: center;
  

  
  
  border-radius: 10px;
  max-width: 80%;
  margin-left: 10.5%;

   /* Altura inicial */
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;

  border-radius: 10px;
  color: rgb(0, 0, 0);
}
.divBox2 h1{
	color: white;
	
}


.divBox2 button {
  background-color: #3498db;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}


.news-list {
  
 background-color: rgb(128, 255, 128, 0.1);
  margin: 0 auto;
  padding: 20px;
  margin-top: 20px; /* Ajuste conforme necessário */
    border-radius: 5px;
   box-shadow: 5px 10px 18px 20px rgb(128, 255, 128, 0.1);
   
}

.news-item {
  background-color: #333;
  color: whitesmoke;
  margin-bottom: 20px;
   padding: 5px 15px 15px;
  border-radius: 5px;
  cursor: pointer;
  height: auto;
 
}

.news-list h1
{
	text-align: center;
}

.news-item h2,
.news-item h3 {
  margin-top: 0;
}

.news-item img {
  max-width: 80%;
  height: auto;
  margin-bottom: 10px;
  text-align: right;
}

.featured {
  background-color: #f7f7f7;
  width: 500px;
  height: auto;
  color: black;
}

.public.hidden {
      display: none;
    }

.public {
  background-color: #f7f7f7;
 	border: none;
}

.featured h2 {
  font-size: 24px;
  color: #333;
}

.featured h5 {
  font-size: 12px;
  color: #333;
  text-align: left;
}

.featured p {
  font-size: 16px;
  color: rgb(0, 0, 0);
}





.featured button
{
	float: right;
	background-color: green;
}




.streamsHHypers 
{

  max-width: 750px;
  margin: 0 auto;
  padding: 10px;
  text-align: center;
  
}
.streamsHHypers table
{
	color: white;
	text-align: center;
	margin: 0 auto; 
	 border-spacing: 0 40px;
	
  border-radius: 5px;
	 
  
}

.streamsHHypers td
{
	padding-right:40px;
	padding-left: 40px;

	
  
}
.streamsHHypers p
{
	font-size: 30px;
	margin: 0px;
}
.streamsHHypers h3
{
	color: white;
	font-size: 14px;
	text-align: center;
	
}

.streamsHHypers img 
{
	 border-radius: 50%;

   box-shadow: rgb(128, 255, 128, 0.5) 5px 5px, rgb(0, 0, 0, 0.05) 25px 25px;
}
.streamsHHypers img:hover
{
	
      transition: width 0.5s;
   border-radius: 50%;
   box-shadow: rgb(255, 255, 0) 3px 3px, rgb(255, 128, 0) 6px 6px, rgb(0, 0, 0, 0.05) 25px 25px;
}

 youtubeStreams:hover
 {
	  box-shadow: rgb(128, 255, 128, 0.5) 5px 5px, rgb(0, 0, 0, 0.05) 25px 25px;
 }



.fotosAds
{
	 width: 1900px;
	 padding-bottom: 10%;
	
	 border-radius: 0.5em;
	 color: white;
}







.campanhasAnuncios
{
	 width: 100%;
	 
	
	 border-radius: 0.5em;
 
 
  
}



.campanhasAnuncios h1
{
	
	color: white;
text-align: center;
}

.fotosAds h1{
	color: white;
text-align: center;
}


.campanhasAnuncios table {
  
   width: 100%; /* Defina a largura da galeria conforme necessário */
  margin: 0 auto;
}

/* Estilos para as células da tabela */
.campanhasAnuncios .quad-cell {
  width: 30%; /* Largura de cada célula */
 
  text-align: center;
  padding: 10px;
  box-sizing: border-box; /* Certifique-se de que a largura inclua o padding */
  background-image: linear-gradient( rgb(8, 8, 8), rgb(23, 23, 23), rgb(23, 23, 23),rgb(0, 9, 0));
   box-shadow:  rgb(128, 255, 128, 0.1) 20px 20px, rgb(0, 0, 0, 0.05) 25px 25px;
   margin-right: 50px;;
  
  
  
}

/* Estilos para as imagens na tabela */
.campanhasAnuncios img {
 display: block;
  margin-left: auto;
  margin-right: auto;
  width: 55%;
  height: auto;
  border-radius: 5px;
   box-shadow: rgb(128, 255, 128, 0.5) 5px 5px, rgb(128, 255, 128, 0.4) 10px 10px, rgb(128, 255, 128, 0.2) 15px 15px, rgb(128, 255, 128, 0.1) 20px 20px, rgb(0, 0, 0, 0.05) 25px 25px;
}
.campanhasAnuncios img:hover {
  
  height: auto;
  border-radius: 5px;
   box-shadow: rgb(255, 255, 0) 5px 5px, rgb(255, 128, 0) 10px 10px, rgb(128, 64, 0) 15px 15px, rgb(64, 0, 0) 20px 20px, rgb(0, 0, 0, 0.05) 25px 25px;
  
  
}

/* ------------------------------------ */
/* A partir daqui e o Main! */
/* ------------------------------------ */




/* Estilos para a divBox  */

/* A DIV QUE COBRE AS OUTRAS DIVS TODAS */



.divBox {
 
  height: auto; /* Leva em consideração o espaço do header e footer */
  
  flex-direction: row; /* Alinha os itens na horizontal */
  justify-content: space-between; /* Espaçamento uniforme entre os elementos */
  align-items: center;
  justify-content: center;
   
}

 .iframe-container {
      overflow: hidden;
    }

    .iframe-container iframe {
      border-radius: 12px;
      margin-top: 3%;
      width: 40%;
      height: 80px;
    }

.hidden {
      display: none;
    }
    
     #expandButtonPlaylist.maximized {
      margin-top: 3%;
     
    }
    
    
.HHL 
{
	
	color: #c4fbbb3d;
	margin-top:10%;
	text-align: center;
}

/* Estilos para a divSobre */
.divSobre {
 
  border-radius: 10px;
  max-width: 80%;
  margin-left: 10%;
   /* Ajuste conforme necessário */
  max-height: 0px; /* Altura inicial */
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
 
  border-radius: 10px;
  color: rgb(0, 0, 0);
  box-shadow: rgb(128, 255, 128, 0.5) 5px 5px, rgb(128, 255, 128, 0.4) 10px 10px, rgb(128, 255, 128, 0.2) 15px 15px, rgb(128, 255, 128, 0.1) 20px 20px, rgb(0, 0, 0, 0.05) 25px 25px;
}

.divSobre.expanded {
 max-height: none;
  overflow: visible;
}


.tableSobre td{
	max-width: 20px;
	
}

/* Estilos para a tabela */
.divSobre table {
  width: 100%;
  
  
}

/* Estilos para as células da tabela */
.divSobre .image-cell {
  width: 60%;
  text-align: center;
  vertical-align: middle;
    background-image: linear-gradient(to bottom right, rgb(0, 0, 0, 0.05),rgb(0, 9, 0));
  border-radius: 5px;
}

.divSobre .text-cell {
  width: 50%;
  padding-left: 20px;
  vertical-align: middle;
  background-color: black;
  color: white;
 
  border-radius: 5px;
 

}

/* Estilos para as imagens na tabela */
.divSobre img {
  max-width: 60%;
  height: auto;
}

/* Estilos para o texto na tabela */
.divSobre p {
  font-size: 20px;
}

.divSobre h1 {
  font-size: 20px;
  margin-top:5px;
  margin-bottom:50px;
}

/* Estilos para a divArts */
.divArts table {
  width: 100%;
 
}

/* Estilos para as células da tabela */
.divArts .quad-cell {
  width: 25%;
  text-align: center;
  vertical-align: middle;
  padding: 40px;
}

/* Estilos para as imagens na tabela */
.divArts img {
  max-width: 55%;
  height: auto;
  border-radius: 5px;
   box-shadow: rgb(128, 255, 128, 0.5) 5px 5px, rgb(128, 255, 128, 0.4) 10px 10px, rgb(128, 255, 128, 0.2) 15px 15px, rgb(128, 255, 128, 0.1) 20px 20px, rgb(0, 0, 0, 0.05) 25px 25px;
}
.divArts img:hover {
  max-width: 90%;
  height: auto;
  border-radius: 5px;
   box-shadow: rgb(255, 255, 0) 5px 5px, rgb(255, 128, 0) 10px 10px, rgb(128, 64, 0) 15px 15px, rgb(64, 0, 0) 20px 20px, rgb(0, 0, 0, 0.05) 25px 25px;
   
}

/* Estilos para a divServicos*/
.divServicos {
 
 
  border-radius: 10px;
  max-width: 80%;
  margin-left: 10%;
   /* Ajuste conforme necessário */
  max-height: 0px; /* Altura inicial */
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
 
  border-radius: 10px;
  color: rgb(0, 0, 0);
}



.divServicos.expanded {
  max-height: none;
  overflow: visible;
}


/* Estilos para a tabela */
.divServicos table {
  width: 100%;
 
}

/* Estilos para as células da tabela */
.divServicos .quad-cell {
  width: 25%;
  text-align: center;
  vertical-align: middle;
  padding: 40px;
}

/* Estilos para as imagens na tabela */
.divServicos img {
  max-width: 55%;
  height: auto;
  border-radius: 5px;
   box-shadow: rgb(128, 255, 128, 0.5) 5px 5px, rgb(128, 255, 128, 0.4) 10px 10px, rgb(128, 255, 128, 0.2) 15px 15px, rgb(128, 255, 128, 0.1) 20px 20px, rgb(0, 0, 0, 0.05) 25px 25px;
}
.divServicos img:hover {
  max-width: 90%;
  height: auto;
  border-radius: 5px;
   box-shadow: rgb(255, 255, 0) 5px 5px, rgb(255, 128, 0) 10px 10px, rgb(128, 64, 0) 15px 15px, rgb(64, 0, 0) 20px 20px, rgb(0, 0, 0, 0.05) 25px 25px;
   
}




/* Estilos para o texto na tabela */
.divServicos p {
  font-size: 14px;
  margin-top: 10px;
  color: black;
}

.divServicos h1 {
  font-size: 30px;
  margin-top:5px;
  margin-bottom:50px;
}

.divServicos h2{
	color: white;
	text-align: center;
	
}


/* Estilos para a divArtistas */
.divArtistas {
  
 
  border-radius: 10px;
  max-width: 80%;
  margin-left: 10%;
   /* Ajuste conforme necessário */
  max-height: 0px; /* Altura inicial */
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
 
  border-radius: 10px;
  color: rgb(0, 0, 0);
}

.divArtistas h2 {
	color: white;
	text-align: center;
	
}

.statement
{
	color: white;
	margin-left: 10px;
	font-size: 12px;
}

.statement2
{
	color: white;
	margin-left: 10px;
	font-size: 12px;
}
.hidden
{
	display: none;
}

.divArtistas.expanded {
  max-height: none;
  overflow: visible;
}


/* Estilos para a tabela */
.divArtistas table {
  width: 100%;
  margin-top:1%;
}

/* Estilos para as células da tabela */
.divArtistas .quad-cell {
  width: 25%;
  text-align: center;
  vertical-align: middle;
  padding: 10px;
}

/* Estilos para as imagens na tabela */
.divArtistas img {
  max-width: 100%;
  height: auto;
  border-radius: 5px;
}

/* Estilos para o texto na tabela */
.divArtistas p {
  font-size: 14px;
  margin-top: 10px;
  color: black;
}

.divArtistas h1 {
  font-size: 30px;
  margin-top:5px;
  margin-bottom:50px;
}



/* Estilos para a divContactos */

.divContactos {
  

  border-radius: 10px;
  max-width: 80%;
  margin-left: 8%;
  
 
  margin-left: 8%;
 padding-right: 20px;
 padding-bottom: 20px;
  
  max-height: 0px; /* Altura inicial */
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
  
  border-radius: 10px;
  color: rgb(255, 255, 255);
}



.divContactos.expanded {
  max-height: none;
  overflow: visible;
}


/* Estilos para a tabela */
.divContactos table {
  width: 100%;
  margin-top: 2%;
}

/* Estilos para as células da tabela */
.divContactos .image-cell {
  width: 25%;
  text-align: center;
  vertical-align: middle;
  padding: 80px;
  background-image: linear-gradient(to bottom right, rgb(0, 0, 0, 0.05),rgb(0, 9, 0));
  border-radius: 5px;

  
}


.divContactos .text-cell {
  width: 50%;
  padding-left: 20px;
  vertical-align: middle;
  background-color: black;
  color: white;
  
  border-radius: 5px;
  box-shadow: rgb(128, 255, 128, 0.5) 5px 5px, rgb(128, 255, 128, 0.4) 10px 10px, rgb(128, 255, 128, 0.2) 15px 15px, rgb(128, 255, 128, 0.1) 20px 20px, rgb(0, 0, 0, 0.05) 25px 25px;
}

/* Estilos para as imagens na tabela */
.divContactos img {
  max-width: 100%;
  height: auto;
  border-radius: 5px;
}

/* Estilos para o texto na tabela */
.divContactos p {
  font-size: 30px;
  margin-top: 10px;
  color: rgb(255, 255, 255);
}

.divContactos h1 {
  font-size: 30px;
  margin-top:5px;
  margin-bottom:50px;
}

/* Dropdown styles */

.dropdown {
  max-width: 13em;
  margin: 20px auto 0;
  position: relative;
  width: 100%;
}

.dropdown-btn {
  background: #1d1f24;
  font-size: 18px;
  width: 100%;
  border: none;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.7em 0.5em;
  border-radius: 0.5em;
  cursor: pointer;
}

.arrow {
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #fff;
  transition: transform ease-in-out 0.3s;
}

.dropdown-content {
  list-style: none;
  
  top: 3.2em;
  width: 100%;
  visibility: hidden;
 

  height: auto;
}

.dropdown-content li {
 
  border-radius: 0.5em;
  position: relative;
  left: 100%;
  transition: 0.5s;
  transition-delay: calc(60ms * var(--delay));
}

.dropdown-content.menu-open li {
  left: 0;
}

.dropdown-content.menu-open {
  visibility: visible;
}

.arrow.arrow-rotate {
  transform: rotate(180deg);
}

.dropdown-content li:hover {
  background: #1d1f24;
}

.dropdown-content li  {
  display: block;
  padding: 0.7em 0.5em;
  color: #fff;
  margin: 0.1em 0;
  text-decoration: none;
}
.dropdown-content button  {
  display: block;
  padding: 0.7em 0.5em;
  color: rgb(255, 255, 255);
  margin: 0.1em 0;
  text-decoration: none;
  width: 100%;
  height: 100%;
     box-shadow: rgb(128, 255, 128, 0.5) 5px 5px, rgb(128, 255, 128, 0.4) 10px 10px, rgb(128, 255, 128, 0.2) 15px 15px, rgb(128, 255, 128, 0.1) 20px 20px, rgb(0, 0, 0, 0.05) 25px 25px;
 background: #2f3238;
 border-radius: 0.5em;

}

.fotosAds
{
	 width: 1900px;
	 padding-bottom: 10%;
	
	 border-radius: 0.5em;
}



.gallery-cell2 {
  width: 33%; /* Largura de cada célula */
  display: block;
  text-align: center;
  
  box-sizing: border-box; /* Certifique-se de que a largura inclua o padding */

   margin-right: 300px;;
}

.gallery-cell2 img {
  width: 100%; /* Garante que as imagens não ultrapassem a largura das células */
  height: auto;
  display: block; /* Remove qualquer espaçamento extra sob as imagens */
  margin: 0 auto; /* Centraliza horizontalmente as imagens nas células */
  transition: width 0.5s;
  margin-top:20px;
  position: relative;
   box-shadow: rgb(128, 255, 128, 0.5) 5px 5px, rgb(128, 255, 128, 0.4) 10px 10px, rgb(128, 255, 128, 0.2) 15px 15px, rgb(128, 255, 128, 0.1) 20px 20px, rgb(0, 0, 0, 0.05) 25px 25px;
  
}

.gallery-cell2 img:hover {
   /* Aumenta a largura da imagem quando o mouse passa por cima */
  transition: width 0.5s;
 z-index: 1;
 box-shadow: rgb(255, 255, 0) 5px 5px, rgb(255, 128, 0) 10px 10px, rgb(128, 64, 0) 15px 15px, rgb(64, 0, 0) 20px 20px, rgb(0, 0, 0, 0.05) 25px 25px;
}

.gallery-cell3 {
   /* Largura de cada célula */
  display: block;
  text-align: center;
  width: 700px;
  box-sizing: border-box; /* Certifique-se de que a largura inclua o padding */
	margin-top: 5%;
   margin-right: 600px;;
}







    /* Estilos para a div principal */
    .perfil-icyDice {
      display: flex;
      flex-direction: column;
      align-items: center;
      
     
      margin: 20px;
      color: white;
      max-height: 0px; /* Altura inicial */
  		overflow: hidden;
  		transition: max-height 0.3s ease-in-out;
    }
    
     .perfil-icyDice.expanded {
  max-height: none;
  overflow: visible;
}


.perfil-SAMUCA {
      display: flex;
      flex-direction: column;
      align-items: center;
      
     
      margin: 20px;
      color: white;
      max-height: 0px; /* Altura inicial */
  		overflow: hidden;
  		transition: max-height 0.3s ease-in-out;
    }
    
     .perfil-SAMUCA.expanded {
  max-height: none;
  overflow: visible;
}


.perfil-MØDI {
      display: flex;
      flex-direction: column;
      align-items: center;
      
     
      margin: 20px;
      color: white;
      max-height: 0px; /* Altura inicial */
  		overflow: hidden;
  		transition: max-height 0.3s ease-in-out;
    }
    
     .perfil-MØDI.expanded {
  max-height: none;
  overflow: visible;
}

.perfil-DonQuixote {
      display: flex;
      flex-direction: column;
      align-items: center;
      
     
      margin: 20px;
      color: white;
      max-height: 0px; /* Altura inicial */
  		overflow: hidden;
  		transition: max-height 0.3s ease-in-out;
    }
    
     .perfil-DonQuixote.expanded {
  max-height: none;
  overflow: visible;
  
}


.perfil-Rez {
      display: flex;
      flex-direction: column;
      align-items: center;
      
     
      margin: 20px;
      color: white;
      max-height: 0px; /* Altura inicial */
  		overflow: hidden;
  		transition: max-height 0.3s ease-in-out;
    }
    
     .perfil-Rez.expanded {
  max-height: none;
  overflow: visible;
}


.perfil-MeanWill {
      display: flex;
      flex-direction: column;
      align-items: center;
      
     
      margin: 20px;
      color: white;
      max-height: 0px; /* Altura inicial */
  		overflow: hidden;
  		transition: max-height 0.3s ease-in-out;
    }
    
     .perfil-MeanWill.expanded {
  max-height: none;
  overflow: visible;
}

.perfil-Patrox {
      display: flex;
      flex-direction: column;
      align-items: center;
      
     
      margin: 20px;
      color: white;
      max-height: 0px; /* Altura inicial */
  		overflow: hidden;
  		transition: max-height 0.3s ease-in-out;
    }
    
     .perfil-Patrox.expanded {
  max-height: none;
  overflow: visible;
}




.perfil-ThanMC {
      display: flex;
      flex-direction: column;
      align-items: center;
      
     
      margin: 20px;
      color: white;
      max-height: 0px; /* Altura inicial */
  		overflow: hidden;
  		transition: max-height 0.3s ease-in-out;
    }
    
     .perfil-ThanMC.expanded {
  max-height: none;
  overflow: visible;
}


.perfil-DS2860 {
      display: flex;
      flex-direction: column;
      align-items: center;
      
     
      margin: 20px;
      color: white;
      max-height: 0px; /* Altura inicial */
  		overflow: hidden;
  		transition: max-height 0.3s ease-in-out;
    }
    
     .perfil-DS2860.expanded {
  max-height: none;
  overflow: visible;
}



.perfil-Lucious {
      display: flex;
      flex-direction: column;
      align-items: center;
      
     
      margin: 20px;
      color: white;
      max-height: 0px; /* Altura inicial */
  		overflow: hidden;
  		transition: max-height 0.3s ease-in-out;
    }
    
     .perfil-Lucious.expanded {
  max-height: none;
  overflow: visible;
}


.perfil-SULLEYMAN {
      display: flex;
      flex-direction: column;
      align-items: center;
      
     
      margin: 20px;
      color: white;
      max-height: 0px; /* Altura inicial */
  		overflow: hidden;
  		transition: max-height 0.3s ease-in-out;
    }
    
     .perfil-SULLEYMAN.expanded {
  max-height: none;
  overflow: visible;
}


.perfil-B1Felix {
      display: flex;
      flex-direction: column;
      align-items: center;
      
     
      margin: 20px;
      color: white;
      max-height: 0px; /* Altura inicial */
  		overflow: hidden;
  		transition: max-height 0.3s ease-in-out;
    }
    
     .perfil-B1Felix.expanded {
  max-height: none;
  overflow: visible;
}

.perfil-yghost {
      display: flex;
      flex-direction: column;
      align-items: center;
      
     
      margin: 20px;
      color: white;
      max-height: 0px; /* Altura inicial */
  		overflow: hidden;
  		transition: max-height 0.3s ease-in-out;
    }
    
     .perfil-yghost.expanded {
  max-height: none;
  overflow: visible;
}

    /* Estilos para o primeiro retângulo */
   .retangulo1 {
  display: flex;
  flex-direction: row;
  justify-content: space-between; /* Adicione esta linha para posicionar à direita */
  align-items: center;
  margin-bottom: 20px;
 
  
}



    .imagem-perfil {
      width: 300px;
      height: 300px;
      border-radius: 50%;
      background-color: #ccc; /* Cor de fundo temporária para a imagem de perfil */
      margin-right: 10px;
      background-image: url("img/artistas/1.png");
      background-repeat: no-repeat, no-repeat;
	  background-size: 100%;
	   box-shadow: rgb(128, 255, 128, 0.5) 5px 5px, rgb(0, 0, 0, 0.05) 25px 25px;
    }
    
    .imagem-perfil2 {
      width: 300px;
      height: 300px;
      border-radius: 50%;
      background-color: #ccc; /* Cor de fundo temporária para a imagem de perfil */
      margin-right: 10px;
      background-image: url("img/artistas/2.png");
      background-repeat: no-repeat, no-repeat;
	  background-size: 100%;
	  box-shadow: rgb(128, 255, 128, 0.5) 5px 5px, rgb(0, 0, 0, 0.05) 25px 25px;
    }
    
     .imagem-perfil3 {
      width: 300px;
      height: 300px;
      border-radius: 50%;
      background-color: #ccc; /* Cor de fundo temporária para a imagem de perfil */
      margin-right: 10px;
      background-image: url("img/artistas/3.png");
      background-repeat: no-repeat, no-repeat;
	  background-size: 100%;
	  box-shadow: rgb(128, 255, 128, 0.5) 5px 5px, rgb(0, 0, 0, 0.05) 25px 25px;
    }
         .imagem-perfil4 {
      width: 300px;
      height: 300px;
      border-radius: 50%;
      background-color: #ccc; /* Cor de fundo temporária para a imagem de perfil */
      margin-right: 10px;
      background-image: url("img/artistas/4.png");
      background-repeat: no-repeat, no-repeat;
	  background-size: 100%;
	  box-shadow: rgb(128, 255, 128, 0.5) 5px 5px, rgb(0, 0, 0, 0.05) 25px 25px;
    }
         .imagem-perfil5 {
      width: 300px;
      height: 300px;
      border-radius: 50%;
      background-color: #ccc; /* Cor de fundo temporária para a imagem de perfil */
      margin-right: 10px;
      background-image: url("img/artistas/5.png");
      background-repeat: no-repeat, no-repeat;
	  background-size: 100%;
	  box-shadow: rgb(128, 255, 128, 0.5) 5px 5px, rgb(0, 0, 0, 0.05) 25px 25px;
    }
         .imagem-perfil6 {
      width: 300px;
      height: 300px;
      border-radius: 50%;
      background-color: #ccc; /* Cor de fundo temporária para a imagem de perfil */
      margin-right: 10px;
      background-image: url("img/artistas/6.png");
      background-repeat: no-repeat, no-repeat;
	  background-size: 100%;
	  	  box-shadow: rgb(128, 255, 128, 0.5) 5px 5px, rgb(0, 0, 0, 0.05) 25px 25px;
    }
         .imagem-perfil7 {
      width: 300px;
      height: 300px;
      border-radius: 50%;
      background-color: #ccc; /* Cor de fundo temporária para a imagem de perfil */
      margin-right: 10px;
      background-image: url("img/artistas/7.png");
      background-repeat: no-repeat, no-repeat;
	  background-size: 100%;
	  	  box-shadow: rgb(128, 255, 128, 0.5) 5px 5px, rgb(0, 0, 0, 0.05) 25px 25px;
    }
         .imagem-perfil8 {
      width: 300px;
      height: 300px;
      border-radius: 50%;
      background-color: #ccc; /* Cor de fundo temporária para a imagem de perfil */
      margin-right: 10px;
      background-image: url("img/artistas/8.png");
      background-repeat: no-repeat, no-repeat;
	  background-size: 100%;
	  	  box-shadow: rgb(128, 255, 128, 0.5) 5px 5px, rgb(0, 0, 0, 0.05) 25px 25px;
    }
           .imagem-perfil9 {
      width: 300px;
      height: 300px;
      border-radius: 50%;
      background-color: #ccc; /* Cor de fundo temporária para a imagem de perfil */
      margin-right: 10px;
      background-image: url("img/artistas/9.png");
      background-repeat: no-repeat, no-repeat;
	  background-size: 100%;
	  	  box-shadow: rgb(128, 255, 128, 0.5) 5px 5px, rgb(0, 0, 0, 0.05) 25px 25px;
    }
    
         .imagem-perfil10 {
      width: 300px;
      height: 300px;
      border-radius: 50%;
      background-color: #ccc; /* Cor de fundo temporária para a imagem de perfil */
      margin-right: 10px;
      background-image: url("img/artistas/10.png");
      background-repeat: no-repeat, no-repeat;
	  background-size: 100%;
	  	  box-shadow: rgb(128, 255, 128, 0.5) 5px 5px, rgb(0, 0, 0, 0.05) 25px 25px;
    }
    
      .imagem-perfil11 {
      width: 300px;
      height: 300px;
      border-radius: 50%;
      background-color: #ccc; /* Cor de fundo temporária para a imagem de perfil */
      margin-right: 10px;
      background-image: url("img/artistas/11.png");
      background-repeat: no-repeat, no-repeat;
	  background-size: 100%;
	  	  box-shadow: rgb(128, 255, 128, 0.5) 5px 5px, rgb(0, 0, 0, 0.05) 25px 25px;
    }
    
    .imagem-perfil12 {
      width: 300px;
      height: 300px;
      border-radius: 50%;
      background-color: #ccc; /* Cor de fundo temporária para a imagem de perfil */
      margin-right: 10px;
      background-image: url("img/artistas/12.png");
      background-repeat: no-repeat, no-repeat;
	  background-size: 100%;
	  	  box-shadow: rgb(128, 255, 128, 0.5) 5px 5px, rgb(0, 0, 0, 0.05) 25px 25px;
    }
    
    .imagem-perfil13 {
      width: 300px;
      height: 300px;
      border-radius: 50%;
      background-color: #ccc; /* Cor de fundo temporária para a imagem de perfil */
      margin-right: 10px;
      background-image: url("img/artistas/13.png");
      background-repeat: no-repeat, no-repeat;
	  background-size: 100%;
	  	  box-shadow: rgb(128, 255, 128, 0.5) 5px 5px, rgb(0, 0, 0, 0.05) 25px 25px;
    }
    .imagem-perfil14 {
      width: 300px;
      height: 300px;
      border-radius: 50%;
      background-color: #ccc; /* Cor de fundo temporária para a imagem de perfil */
      margin-right: 10px;
      background-image: url("img/artistas/14.png");
      background-repeat: no-repeat, no-repeat;
	  background-size: 100%;
	  	  box-shadow: rgb(128, 255, 128, 0.5) 5px 5px, rgb(0, 0, 0, 0.05) 25px 25px;
    }
    
    .imagem-perfil15 {
      width: 300px;
      height: 300px;
      border-radius: 50%;
      background-color: #ccc; /* Cor de fundo temporária para a imagem de perfil */
      margin-right: 10px;
      background-image: url("img/artistas/15.png");
      background-repeat: no-repeat, no-repeat;
	  background-size: 100%;
	  	  box-shadow: rgb(128, 255, 128, 0.5) 5px 5px, rgb(0, 0, 0, 0.05) 25px 25px;
    }

    .nome-artista {
      font-size: 24px;
      font-weight: bold;
      margin-bottom: 30px;
    }

    .redes-sociais {
  display: flex;
  flex-direction: column;
  margin-top: 70px;
  margin-left: 20px;
   /* Altere 'align-items' para 'flex-end' para posicionar à direita */
}

.texto-rede-social {
  display: inline-block; /* Isso faz o texto ficar na mesma linha que a imagem */
  vertical-align: left; /* Isso alinha verticalmente o texto ao centro em relação à imagem */
  margin-right: 100px; /* Adicione uma margem à esquerda para separar a imagem do texto */
   box-shadow: rgb(128, 255, 128, 0.5) 5px 5px, rgb(128, 255, 128, 0.4) 10px 10px, rgb(128, 255, 128, 0.2) 15px 15px, rgb(128, 255, 128, 0.1) 20px 20px, rgb(0, 0, 0, 0.05) 25px 25px;
   -webkit-text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3),
    0 0 0.45em var(--glow-color);
  -moz-text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3),
    0 0 0.45em var(--glow-color);
  text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3), 0 0 0.45em var(--glow-color);
  animation: text-flicker 3s linear infinite;
}

    .icone-rede-social {
      width: 30px;
      height: 30px;
      margin-bottom: 10px;
     /* Cores temporárias para os ícones */
    }
    
    .icone-rede-social:hover {
      width: 40px;
      height: 40px;
      transition: width 0.5s;
      margin-left: 10px;
      padding: 1px;
     
    }
    .icone-rede-social img:hover {
      width: 40px;
      height: 40px;
      transition: width 0.5s;
       padding: 1px;
     
    }

    /* Estilos para o segundo retângulo */
    .retangulo2 {
		width: 60%;
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-bottom: 5px;
      background-color: rgb(35, 35, 35);
       border-radius: 0.45em;
        box-shadow:  rgb(128, 255, 128, 0.1) 20px 20px, rgb(0, 0, 0, 0.05) 25px 25px;
    }

    .texto-retangulo2 {
      flex: 1;
      font-size: 20px;
      margin-right: 20px;
      padding: 50px;
      text-align: justify;
      margin-bottom: 20px;
    }

    .imagem-grande {
      max-width: 100%;
      height: auto;
    }

    /* Estilos para o terceiro retângulo */
    .retangulo3 {
  display: flex;
  flex-direction: row; /* Altere 'column' para 'row' para posicionar na horizontal */
  align-items: center;
}

    .quadrado {
  width: 200px;
  height: 200px;
  background-color: #ccc; /* Cores temporárias para os quadrados */
  margin-right: 35px; /* Adicione margem direita para separar os quadrados */
    box-shadow:  rgb(128, 255, 128, 0.1) 20px 20px, rgb(0, 0, 0, 0.05) 25px 25px;
}
 .quadrado:hover {
  width: 300px;
  height: 300px;
  transition: width 0.5s;

}.quadrado img:hover {
  width: 300px;
  height: 300px;
  transition: width 0.5s;
  max-width: none;
  max-height: none;

}

.quadrado img
{
	max-width: 200px;
	max-height: 200px;
}



.fotos
{
	 width: 100%;
	 height: auto;
	
	 border-radius: 0.5em;
}

.gallery {
  width: 100%; /* Defina a largura da galeria conforme necessário */
  margin: 0 auto;
 
}

/* Estilos para as células do carrossel */
.gallery-cell {
  width: 30%; /* Largura de cada célula */
  display: block;
  text-align: center;
 
  box-sizing: border-box; /* Certifique-se de que a largura inclua o padding */
 
  
}

/* Estilos para as imagens dentro das células do carrossel */
.gallery-cell img {
  max-width: 100%; /* Garante que as imagens não ultrapassem a largura das células */
  height: auto;
  display: block; /* Remove qualquer espaçamento extra sob as imagens */
  margin: 0 auto; /* Centraliza horizontalmente as imagens nas células */
  transition: width 0.5s;
  
}

.gallery-cell img:hover {
  width: 90%; /* Aumenta a largura da imagem quando o mouse passa por cima */
  transition: width 0.5s;
}



 .retangulo5 {
  display: flex;
  flex-direction: column; /* Altere 'column' para 'row' para posicionar na horizontal */
  align-items: center;
  margin-top: 50px;
}

.retangulo5 h2
{
	color: rgb(255, 255, 255);
	 box-shadow: rgb(128, 255, 128, 0.5) 5px 5px, rgb(128, 255, 128, 0.4) 10px 10px, rgb(128, 255, 128, 0.2) 15px 15px, rgb(128, 255, 128, 0.1) 20px 20px, rgb(0, 0, 0, 0.05) 25px 25px;
   -webkit-text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3),
    0 0 0.45em var(--glow-color);
  -moz-text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3),
    0 0 0.45em var(--glow-color);
  text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3), 0 0 0.45em var(--glow-color);
  animation: text-flicker 3s linear infinite;
}


 .retangulo5 {
  display: flex;
  flex-direction: column; /* Altere 'column' para 'row' para posicionar na horizontal */
  align-items: center;
}






#timer {  
  font-size: 3em;
  font-weight: 100;
  color: white;
  text-shadow: 0 0 20px rgb(0, 255, 0);
  
  margin-bottom: 50px;
  }
  #timer div {
    display: inline-block;
    min-width: 90px;
    align-items: center;
    }
    
    #timer span {
      color: #B1CDF1;
      display: block;
      font-size: .35em;
      font-weight: 400;
    }
    
   

  






  /* TELEMOVEL */

@media only screen and (max-width: 1050px) {
	
	
	
	header {
		 height: 5vh;
	}
	
	

header .header-image button
{
	margin-left: 5px;
	margin-right: 5px;
	width: 95%;
	font-size: 34px;
	height: 75%;
}

header .glowing-btn3
{
	font-size: 3em;
}

.news-ticker
{
	font-size: 25px;
}

.iframe-container iframe
{
	width: 70%;
	height: 160px;
	
}


.divArtistas h2 {
    font-size: 20px;
  }

.featured 
{
	width: 650px;
}
  
  .featured p.featured-text
  {
	  font-size: 35px;
  }
  .featured h5.featured-text
  {
	  font-size: 18px;
  }
  .featured h3.featured-text
  {
	  font-size: 45px;
	   margin-top: 3%;
  }
  .featured h2.featured-text
  {
	  font-size: 45px;
	  margin-top: 3%;
  }
  
   .news-item h2, .news-item h3
  {
	  font-size: 40px;
  }
  
 
  
  .streamsHHypers table 
  {
	  font-size: 30px;
  }
  
  .streamsHHypers img
  {
	  width: 250px;
	  height: 250px;
  }  
 
  
  .fotosAds h1
  {
	  font-size: 40px;
  }
  .campanhasAnuncios h1
  {
	  font-size: 40px;
  }
  .gallery-cell2 img
  {
	  width: 650px;
	  height: 250px;
  }
  .campanhasAnuncios img
  {
	  width: 75%;
  }
  
  .divSobre 
  {
	  margin-top: 10%;
	  max-height: 0px;
  }
/* Estilos para a tabela */
.divSobre table {
  width: 100%;
  table-layout: fixed; /* Adicione essa propriedade para garantir largura igual das células */
}

/* Estilos para as células da tabela */
.divSobre tr {
  display: flex;
  flex-direction: column; /* Faça com que as células fiquem empilhadas verticalmente */
  align-items: center; /* Centralize horizontalmente o conteúdo das células */
}

.divSobre td {
  width: 100%;
 text-align: justify;
  vertical-align: middle;
  background-image: linear-gradient(to bottom right, rgb(0, 0, 0, 0.05), rgb(0, 9, 0));
  border-radius: 5px;
}

/* Estilos para as imagens na tabela */
.divSobre img {
  max-width: 90%; /* Ajuste conforme necessário */
  height: auto;
  margin: 0 auto; /* Centralize a imagem horizontalmente */
}

.divSobre .image-cell
{
	margin-top: 3%;
}
.divSobre .text-cell
{
	width: auto;
	margin-top: 4%;
	margin-right: 4%;
	margin-left: 4%;
	margin-bottom: 4%;
}
/* Estilos para o texto na tabela */
.divSobre p {
  font-size: 40px;
  margin: 10px 0; /* Adicione algum espaçamento entre os parágrafos, ajuste conforme necessário */
}


.divArts table {
  width: 100%;
  border-collapse: collapse; /* Adicionado para remover espaçamento entre células */
}

.divArts .quad-cell {
  width: 25%;
  text-align: center;
  padding: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.divArts img {
  max-width: 500px;
  
  height: auto;
  border-radius: 5px;
  box-shadow: rgb(128, 255, 128, 0.5) 5px 5px, rgb(128, 255, 128, 0.4) 10px 10px, rgb(128, 255, 128, 0.2) 15px 15px, rgb(128, 255, 128, 0.1) 20px 20px, rgb(0, 0, 0, 0.05) 25px 25px;
}

.divArts h2
{
	font-size: 30px;
}

.divArts img:hover {
  max-width: 600px;
  height: auto;
  border-radius: 5px;
  box-shadow: rgb(255, 255, 0) 5px 5px, rgb(255, 128, 0) 10px 10px, rgb(128, 64, 0) 15px 15px, rgb(64, 0, 0) 20px 20px, rgb(0, 0, 0, 0.05) 25px 25px;
}.divArts table {
  width: 100%;
  border-collapse: collapse; /* Adicionado para remover espaçamento entre células */
}

.divArts .quad-cell {
  width: 25%;
  text-align: center;
  padding: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.divArts img {
  max-width: 500px;
  
  height: auto;
  border-radius: 5px;
  box-shadow: rgb(128, 255, 128, 0.5) 5px 5px, rgb(128, 255, 128, 0.4) 10px 10px, rgb(128, 255, 128, 0.2) 15px 15px, rgb(128, 255, 128, 0.1) 20px 20px, rgb(0, 0, 0, 0.05) 25px 25px;
}

.divArts h2
{
	font-size: 30px;
}

.divArts img:hover {
  max-width: 600px;
  height: auto;
  border-radius: 5px;
  box-shadow: rgb(255, 255, 0) 5px 5px, rgb(255, 128, 0) 10px 10px, rgb(128, 64, 0) 15px 15px, rgb(64, 0, 0) 20px 20px, rgb(0, 0, 0, 0.05) 25px 25px;
}


.divServicos table {
  width: 100%;
  border-collapse: collapse; /* Adicionado para remover espaçamento entre células */
}

.divServicos .quad-cell {
  width: 25%;
  text-align: center;
  padding: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.divServicos img {
  max-width: 500px;
  
  height: auto;
  border-radius: 5px;
  box-shadow: rgb(128, 255, 128, 0.5) 5px 5px, rgb(128, 255, 128, 0.4) 10px 10px, rgb(128, 255, 128, 0.2) 15px 15px, rgb(128, 255, 128, 0.1) 20px 20px, rgb(0, 0, 0, 0.05) 25px 25px;
}

.divServicos h2
{
	font-size: 30px;
}

.divServicos img:hover {
  max-width: 600px;
  height: auto;
  border-radius: 5px;
  box-shadow: rgb(255, 255, 0) 5px 5px, rgb(255, 128, 0) 10px 10px, rgb(128, 64, 0) 15px 15px, rgb(64, 0, 0) 20px 20px, rgb(0, 0, 0, 0.05) 25px 25px;
}.divServicos table {
  width: 100%;
  border-collapse: collapse; /* Adicionado para remover espaçamento entre células */
}

.divServicos .quad-cell {
  width: 25%;
  text-align: center;
  padding: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.divServicos img {
  max-width: 500px;
  
  height: auto;
  border-radius: 5px;
  box-shadow: rgb(128, 255, 128, 0.5) 5px 5px, rgb(128, 255, 128, 0.4) 10px 10px, rgb(128, 255, 128, 0.2) 15px 15px, rgb(128, 255, 128, 0.1) 20px 20px, rgb(0, 0, 0, 0.05) 25px 25px;
}

.divServicos h2
{
	font-size: 30px;
}

.divServicos img:hover {
  max-width: 600px;
  height: auto;
  border-radius: 5px;
  box-shadow: rgb(255, 255, 0) 5px 5px, rgb(255, 128, 0) 10px 10px, rgb(128, 64, 0) 15px 15px, rgb(64, 0, 0) 20px 20px, rgb(0, 0, 0, 0.05) 25px 25px;
}


/* Estilos para a tabela */
.divContactos table {
  width: 100%;
  margin-top: 2%;
}

/* Estilos para as células da tabela */
.divContactos tr {
  display: flex;
  flex-wrap: wrap;
}

.divContactos .image-cell,
.divContactos .text-cell {
  width: 100%;
  box-sizing: border-box;
}

.divContactos .image-cell {
  text-align: center;
  vertical-align: middle;
  padding: 20px;
  background-image: linear-gradient(to bottom right, rgb(0, 0, 0, 0.05), rgb(0, 9, 0));
  border-radius: 5px;
  
}

.divContactos .text-cell {
	font-size: 24px;
  padding: 20px;
  background-color: black;
  color: white;
  border-radius: 5px;
  box-shadow: rgb(128, 255, 128, 0.5) 5px 5px, rgb(128, 255, 128, 0.4) 10px 10px, rgb(128, 255, 128, 0.2) 15px 15px, rgb(128, 255, 128, 0.1) 20px 20px, rgb(0, 0, 0, 0.05) 25px 25px;
}

/* Estilos para as imagens na tabela */
.divContactos iframe {
  max-width: 650px;
  width: 650px;
  height: 550px;
  border-radius: 5px;
}

/* Estilos para o texto na tabela */
.divContactos p {
  font-size: 40px;
  margin-top: 10px;
  color: rgb(255, 255, 255);
}

.divContactos h1 {
  font-size: 30px;
  margin-top: 5px;
  margin-bottom: 50px;
}

.dropdown-btn
{
	font-size: 35px;
	width: 100%;
}
.dropdown 
{
	max-width: 70%;
}

.dropdown-content button
{
	font-size: 30px;
}

.statement
{
	font-size: 25px;
}

.statement2
{
	font-size: 25px;
}





  
  .perfil .gallery {
  width: 100%; /* Ajuste conforme necessário */
  overflow: hidden; /* Impede scroll horizontal se o carrossel for maior que o contêiner */
}
  
/* Estilos para as imagens dentro das células do carrossel */
.gallery-cell img {
  max-width: 100%;
  width: auto;
  height: auto;
  display: block;
  margin: 0 auto;
  opacity: 0; /* Inicia a imagem com opacidade zero */
  transition: opacity 0.5s; /* Adiciona um efeito de transição de opacidade */
}

/* Exibe a primeira imagem inicialmente */
.gallery-cell:first-child img {
  opacity: 1; /* Torna a primeira imagem visível */
}

/* Estilos para as células do carrossel */
.gallery-cell {
  width: 100%; /* Usar largura relativa ao contêiner pai, pode ser ajustado conforme necessário */
  box-sizing: border-box;
  overflow: hidden; /* Remove a barra de rolagem horizontal e vertical */
}

/* Animação para transição de imagens */
@keyframes galleryAnimation {
  from {
    opacity: 0.9; /* Começa com opacidade zero */
  }
  to {
    opacity: 1; /* Termina com opacidade total */
  }
}

/* Adiciona a animação para todas as imagens */
.gallery-cell img {
  animation: galleryAnimation 3s ease-in-out infinite alternate; /* Altera a imagem a cada 3 segundos */
}


.gallery{
	user-select: none;
}

.imagem-perfil,.imagem-perfil2, .imagem-perfil3, .imagem-perfil4, .imagem-perfil5, .imagem-perfil6, .imagem-perfil7, .imagem-perfil8, .imagem-perfil9
{
	width: 400px;
	height: 400px;
}

.nome-artista
{
	font-size: 30px;
}
.icone-rede-social
{
	width: 80px;
	height: 80px;
}

.icone-rede-social img
{
	width: 80px;
	height: 80px;
}
 .icone-rede-social img:hover {
      width: 80px;
      height: 80px;
      transition: width 0.5s;
       padding: 1px;
       transition: width 0.5s;
  		box-shadow: rgb(238, 165, 13) 10px 10px, rgb(0, 0, 0, 0.05) 10px 25px;
     
    }
    
     .icone-rede-social:hover {
      width: 90px;
      height: 90px;
      transition: width 0.5s;
      margin-left: 10px;
      padding: 1px;
     
    }



.texto-rede-social
{
	font-size: 26px;
}

.retangulo2
{
	width: 85%;
}
.texto-retangulo2
{
	font-size: 32px;
}

.retangulo3 {
  display: flex;
  flex-wrap: wrap; /* Permite que os quadrados quebrem para a próxima linha quando não há espaço suficiente */
  justify-content: space-between; /* Distribui os quadrados uniformemente na linha */
  align-items: flex-start; /* Alinha os quadrados no topo da linha */
}

.quadrado {
  width: calc(25% - -30.5px); /* Calcula a largura para ocupar metade da linha com uma margem de 35px entre eles */
  height: 260px;
  background-color: #ccc; /* Cores temporárias para os quadrados */
  margin-bottom: 35px; /* Adiciona margem inferior para separar as linhas */
  box-shadow: rgb(128, 255, 128, 0.1) 20px 20px, rgb(0, 0, 0, 0.05) 25px 25px;
}

.quadrado:hover {
  width: calc(25% - -30.5px); /* Ajusta a largura ao aumentar o tamanho durante o hover */
  height: 280px;
  transition: width 0.5s;
  box-shadow: rgb(238, 165, 13) 20px 20px, rgb(0, 0, 0, 0.05) 25px 25px;
}

.quadrado img {
  width: 100%; /* Garante que a imagem ocupe 100% da largura do quadrado */
  height: 100%;
  max-width: none;
  max-height: none;
}
.retangulo3 .quadrado:last-child,
.retangulo3 .quadrado:nth-last-child(2) {
  margin-right: 10%;
  margin-left: 10%; /* Ajuste conforme necessário */
}
  
}



/* TELEMOVEL 950PX */
/* TABLET 900px */
@media only screen and (max-width: 900px) {

  header {
    height: 5vh;
  }

  header .header-image button {
    margin-left: 5px;
    margin-right: 5px;
    width: 95%;
    font-size: 30px; /* Ajuste conforme necessário */
    height: 75%;
  }
.divArtistas h2 {
    font-size: 24px;
  }
  header .glowing-btn3 {
    font-size: 2.5em; /* Ajuste conforme necessário */
  }

  .news-ticker {
    font-size: 20px; /* Ajuste conforme necessário */
  }

  .iframe-container iframe {
    width: 70%;
    height: 150px; /* Ajuste conforme necessário */
  }

  .featured {
    width: 600px; /* Ajuste conforme necessário */
  }

  .featured p.featured-text {
    font-size: 20px; /* Ajuste conforme necessário */
  }

  .featured h5.featured-text {
    font-size: 16px; /* Ajuste conforme necessário */
  }

  .featured h3.featured-text,
  .featured h2.featured-text {
    font-size: 40px; /* Ajuste conforme necessário */
    margin-top: 3%;
  }
   .news-item h2, .news-item h3
  {
	  font-size: 30px;
  }

  .streamsHHypers table {
    font-size: 25px; /* Ajuste conforme necessário */
  }

  .streamsHHypers img {
    width: 200px; /* Ajuste conforme necessário */
    height: 200px; /* Ajuste conforme necessário */
  }

 

  .fotosAds h1,
  .campanhasAnuncios h1 {
    font-size: 35px; /* Ajuste conforme necessário */
  }

  .gallery-cell2 img {
    width: 600px; /* Ajuste conforme necessário */
    height: 200px; /* Ajuste conforme necessário */
  }

  .campanhasAnuncios img {
    width: 100%; /* Ajuste conforme necessário */
  }

  .divSobre {
    margin-top: 10%; /* Ajuste conforme necessário */
    max-height: 0px;
  }

  .divSobre table {
    width: 100%;
    table-layout: fixed;
  }

  .divSobre tr {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .divSobre td {
    width: 100%;
    text-align: justify;
    vertical-align: middle;
    background-image: linear-gradient(to bottom right, rgb(0, 0, 0, 0.05), rgb(0, 9, 0));
    border-radius: 5px;
  }

  .divSobre img {
    max-width: 90%;
    height: auto;
    margin: 0 auto;
  }

  .divSobre .image-cell {
    margin-top: 3%;
  }

  .divSobre .text-cell {
    width: auto;
    margin-top: 4%;
    margin-right: 4%;
    margin-left: 4%;
    margin-bottom: 4%;
  }

  .divSobre p {
    font-size: 40px; /* Ajuste conforme necessário */
    margin: 10px 0;
  }

.divArts .quad-cell {
    width: 100%; /* Ajuste conforme necessário */
    text-align: center;
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
  }

  .divArts img {
    max-width: 100%; /* Ajuste conforme necessário */
    height: auto;
    border-radius: 5px;
    box-shadow: rgb(128, 255, 128, 0.5) 5px 5px, rgb(128, 255, 128, 0.4) 10px 10px, rgb(128, 255, 128, 0.2) 15px 15px, rgb(128, 255, 128, 0.1) 20px 20px, rgb(0, 0, 0, 0.05) 25px 25px;
  }

  .divArts h2 {
    font-size: 30px; /* Ajuste conforme necessário */
  }

  .divArts img:hover {
    max-width: 100%; /* Ajuste conforme necessário */
    height: auto;
    border-radius: 5px;
    box-shadow: rgb(255, 255, 0) 5px 5px, rgb(255, 128, 0) 10px 10px, rgb(128, 64, 0) 15px 15px, rgb(64, 0, 0) 20px 20px, rgb(0, 0, 0, 0.05) 25px 25px;
  }
  .divServicos .quad-cell {
    width: 100%; /* Ajuste conforme necessário */
    text-align: center;
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
  }

  .divServicos img {
    max-width: 100%; /* Ajuste conforme necessário */
    height: auto;
    border-radius: 5px;
    box-shadow: rgb(128, 255, 128, 0.5) 5px 5px, rgb(128, 255, 128, 0.4) 10px 10px, rgb(128, 255, 128, 0.2) 15px 15px, rgb(128, 255, 128, 0.1) 20px 20px, rgb(0, 0, 0, 0.05) 25px 25px;
  }

  .divServicos h2 {
    font-size: 30px; /* Ajuste conforme necessário */
  }

  .divServicos img:hover {
    max-width: 100%; /* Ajuste conforme necessário */
    height: auto;
    border-radius: 5px;
    box-shadow: rgb(255, 255, 0) 5px 5px, rgb(255, 128, 0) 10px 10px, rgb(128, 64, 0) 15px 15px, rgb(64, 0, 0) 20px 20px, rgb(0, 0, 0, 0.05) 25px 25px;
  }

  .divContactos .image-cell,
  .divContactos .text-cell {
    width: 100%;
    box-sizing: border-box;
  }

  .divContactos .image-cell {
    text-align: center;
    vertical-align: middle;
    padding: 20px;
    background-image: linear-gradient(to bottom right, rgb(0, 0, 0, 0.05), rgb(0, 9, 0));
    border-radius: 5px;
  }

  .divContactos .text-cell {
    font-size: 24px; /* Ajuste conforme necessário */
    padding: 20px;
    background-color: black;
    color: white;
    border-radius: 5px;
    box-shadow: rgb(128, 255, 128, 0.5) 5px 5px, rgb(128, 255, 128, 0.4) 10px 10px, rgb(128, 255, 128, 0.2) 15px 15px, rgb(128, 255, 128, 0.1) 20px 20px, rgb(0, 0, 0, 0.05) 25px 25px;
  }

  .divContactos iframe {
    max-width: 600px; /* Ajuste conforme necessário */
    width: 100%;
    height: 450px; /* Ajuste conforme necessário */
    border-radius: 5px;
  }

  .divContactos p {
    font-size: 40px; /* Ajuste conforme necessário */
    margin-top: 10px;
    color: rgb(255, 255, 255);
  }

  .divContactos h1 {
    font-size: 30px; /* Ajuste conforme necessário */
    margin-top: 5px;
    margin-bottom: 50px;
  }

  .dropdown-btn {
    font-size: 30px; /* Ajuste conforme necessário */
    width: 100%;
  }

  .dropdown {
    max-width: 60%; /* Ajuste conforme necessário */
  }

  .dropdown-content button {
    font-size: 25px; /* Ajuste conforme necessário */
  }

  .statement {
    font-size: 20px; /* Ajuste conforme necessário */
  }
   .statement2 {
    font-size: 20px; /* Ajuste conforme necessário */
  }

  .perfil .gallery {
    width: 100%;
    overflow: hidden;
  }

  .gallery-cell img {
    max-width: 100%;
    width: auto;
    height: auto;
    display: block;
    margin: 0 auto;
    opacity: 0;
    transition: opacity 0.5s;
  }

  .gallery-cell:first-child img {
    opacity: 1;
  }

  .gallery-cell {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }

  @keyframes galleryAnimation {
    from {
      opacity: 0.9;
    }
    to {
      opacity: 1;
    }
  }

  .gallery-cell img {
    animation: galleryAnimation 3s ease-in-out infinite alternate;
  }

  .gallery {
    user-select: none;
  }

  .imagem-perfil,
  .imagem-perfil2,
  .imagem-perfil3,
  .imagem-perfil4,
  .imagem-perfil5,
  .imagem-perfil6,
  .imagem-perfil7,
  .imagem-perfil8,
  .imagem-perfil9 {
    width: 100%; /* Ajuste conforme necessário */
    height: auto;
  }

  .nome-artista {
    font-size: 20px; /* Ajuste conforme necessário */
  }

  .icone-rede-social {
    width: 60px; /* Ajuste conforme necessário */
    height: 60px; /* Ajuste conforme necessário */
  }

  .icone-rede-social img {
    width: 60px; /* Ajuste conforme necessário */
    height: 60px; /* Ajuste conforme necessário */
  }

  .icone-rede-social img:hover {
    width: 60px;
    height: 60px;
    transition: width 0.5s;
    padding: 1px;
    transition: width 0.5s;
    box-shadow: rgb(238, 165, 13) 5px 5px, rgb(0, 0, 0, 0.05) 5px 15px;
  }

  .icone-rede-social:hover {
    width: 70px;
    height: 70px;
    transition: width 0.5s;
    margin-left: 10px;
    padding: 1px;
  }

  .texto-rede-social {
    font-size: 18px; /* Ajuste conforme necessário */
  }

  .retangulo2 {
    width: 80%;
  }

  .texto-retangulo2 {
    font-size: 30px; /* Ajuste conforme necessário */
  }

  .retangulo3 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
  }

  .quadrado {
    width: calc(50% - 35px);
    height: 220px; /* Ajuste conforme necessário */
    background-color: #ccc;
    margin-bottom: 35px;
    box-shadow: rgb(128, 255, 128, 0.1) 20px 20px, rgb(0, 0, 0, 0.05) 25px 25px;
  }

  .quadrado:hover {
    width: calc(50% - 35px);
    height: 240px; /* Ajuste conforme necessário */
    transition: width 0.5s;
    box-shadow: rgb(238, 165, 13) 20px 20px, rgb(0, 0, 0, 0.05) 25px 25px;
  }

  .quadrado img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
  }

  .retangulo3 .quadrado:last-child,
  .retangulo3 .quadrado:nth-last-child(2) {
    margin-right: 0;
    margin-left: 0;
  }
}

/* TELEMOVEL 800px */
/* TABLET 800px */
@media only screen and (max-width: 800px) {

  header {
    height: 5vh;
  }

  header .header-image button {
    margin-left: 5px;
    margin-right: 5px;
    width: 95%;
    font-size: 25px; /* Ajuste conforme necessário */
    height: 70%; /* Ajuste conforme necessário */
  }
	.divArtistas h2 {
    font-size: 28px;
  }
  header .glowing-btn3 {
    font-size: 2em; /* Ajuste conforme necessário */
  }

  .news-ticker {
    font-size: 18px; /* Ajuste conforme necessário */
  }

  .iframe-container iframe {
    width: 70%;
    height: 120px; /* Ajuste conforme necessário */
  }

  .featured {
    width: 500px; /* Ajuste conforme necessário */
  }

  .featured p.featured-text {
    font-size: 18px; /* Ajuste conforme necessário */
  }

  .featured h5.featured-text {
    font-size: 14px; /* Ajuste conforme necessário */
  }

  .featured h3.featured-text,
  .featured h2.featured-text {
    font-size: 35px; /* Ajuste conforme necessário */
    margin-top: 3%;
  }
   .news-item h2, .news-item h3
  {
	  font-size: 25px;
  }

  .streamsHHypers table {
    font-size: 20px; /* Ajuste conforme necessário */
  }

  .streamsHHypers img {
    width: 180px; /* Ajuste conforme necessário */
    height: 180px; /* Ajuste conforme necessário */
  }

 

  .fotosAds h1,
  .campanhasAnuncios h1 {
    font-size: 30px; /* Ajuste conforme necessário */
  }

  .gallery-cell2 img {
    width: 500px; /* Ajuste conforme necessário */
    height: 150px; /* Ajuste conforme necessário */
  }

  .campanhasAnuncios img {
    width: 60%; /* Ajuste conforme necessário */
  }

  .divSobre {
    margin-top: 10%; /* Ajuste conforme necessário */
    max-height: 0px;
  }

  .divSobre table {
    width: 100%;
    table-layout: fixed;
  }

  .divSobre tr {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .divSobre td {
    width: 100%;
    text-align: justify;
    vertical-align: middle;
    background-image: linear-gradient(to bottom right, rgb(0, 0, 0, 0.05), rgb(0, 9, 0));
    border-radius: 5px;
  }

  .divSobre img {
    max-width: 80%;
    height: auto;
    margin: 0 auto;
  }

  .divSobre .image-cell {
    margin-top: 3%;
  }

  .divSobre .text-cell {
    width: auto;
    margin-top: 4%;
    margin-right: 4%;
    margin-left: 4%;
    margin-bottom: 4%;
  }

  .divSobre p {
    font-size: 30px; /* Ajuste conforme necessário */
    margin: 10px 0;
  }
.divArts .quad-cell {
    width: 100%; /* Ajuste conforme necessário */
    text-align: center;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
  }

  .divArts img {
    max-width: 90%; /* Ajuste conforme necessário */
    height: auto;
    border-radius: 5px;
    box-shadow: rgb(128, 255, 128, 0.5) 5px 5px, rgb(128, 255, 128, 0.4) 10px 10px, rgb(128, 255, 128, 0.2) 15px 15px, rgb(128, 255, 128, 0.1) 20px 20px, rgb(0, 0, 0, 0.05) 25px 25px;
  }

  .divArts h2 {
    font-size: 25px; /* Ajuste conforme necessário */
  }

  .divArts img:hover {
    max-width: 95%; /* Ajuste conforme necessário */
    height: auto;
    border-radius: 5px;
    box-shadow: rgb(255, 255, 0) 5px 5px, rgb(255, 128, 0) 10px 10px, rgb(128, 64, 0) 15px 15px, rgb(64, 0, 0) 20px 20px, rgb(0, 0, 0, 0.05) 25px 25px;
  }
  .divServicos .quad-cell {
    width: 100%; /* Ajuste conforme necessário */
    text-align: center;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
  }

  .divServicos img {
    max-width: 90%; /* Ajuste conforme necessário */
    height: auto;
    border-radius: 5px;
    box-shadow: rgb(128, 255, 128, 0.5) 5px 5px, rgb(128, 255, 128, 0.4) 10px 10px, rgb(128, 255, 128, 0.2) 15px 15px, rgb(128, 255, 128, 0.1) 20px 20px, rgb(0, 0, 0, 0.05) 25px 25px;
  }

  .divServicos h2 {
    font-size: 25px; /* Ajuste conforme necessário */
  }

  .divServicos img:hover {
    max-width: 95%; /* Ajuste conforme necessário */
    height: auto;
    border-radius: 5px;
    box-shadow: rgb(255, 255, 0) 5px 5px, rgb(255, 128, 0) 10px 10px, rgb(128, 64, 0) 15px 15px, rgb(64, 0, 0) 20px 20px, rgb(0, 0, 0, 0.05) 25px 25px;
  }

  .divContactos .image-cell,
  .divContactos .text-cell {
    width: 100%;
    box-sizing: border-box;
  }

  .divContactos .image-cell {
    text-align: center;
    vertical-align: middle;
    padding: 15px;
    background-image: linear-gradient(to bottom right, rgb(0, 0, 0, 0.05), rgb(0, 9, 0));
    border-radius: 5px;
  }

  .divContactos .text-cell {
    font-size: 20px; /* Ajuste conforme necessário */
    padding: 15px;
    background-color: black;
    color: white;
    border-radius: 5px;
    box-shadow: rgb(128, 255, 128, 0.5) 5px 5px, rgb(128, 255, 128, 0.4) 10px 10px, rgb(128, 255, 128, 0.2) 15px 15px, rgb(128, 255, 128, 0.1) 20px 20px, rgb(0, 0, 0, 0.05) 25px 25px;
  }

  .divContactos iframe {
    max-width: 550px; /* Ajuste conforme necessário */
    width: 100%;
    height: 400px; /* Ajuste conforme necessário */
    border-radius: 5px;
  }

  .divContactos p {
    font-size: 30px; /* Ajuste conforme necessário */
    margin-top: 10px;
    color: rgb(255, 255, 255);
  }

  .divContactos h1 {
    font-size: 25px; /* Ajuste conforme necessário */
    margin-top: 5px;
    margin-bottom: 30px; /* Ajuste conforme necessário */
  }

  .dropdown-btn {
    font-size: 25px; /* Ajuste conforme necessário */
    width: 100%;
  }

  .dropdown {
    max-width: 50%; /* Ajuste conforme necessário */
  }

  .dropdown-content button {
    font-size: 20px; /* Ajuste conforme necessário */
  }

  .statement {
    font-size: 15px; /* Ajuste conforme necessário */
  }
  .statement2 {
    font-size: 15px; /* Ajuste conforme necessário */
  }

  .perfil .gallery {
    width: 100%;
    overflow: hidden;
  }

  .gallery-cell img {
    max-width: 100%;
    width: auto;
    height: auto;
    display: block;
    margin: 0 auto;
    opacity: 0;
    transition: opacity 0.5s;
  }

  .gallery-cell:first-child img {
    opacity: 1;
  }

  .gallery-cell {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }

  @keyframes galleryAnimation {
    from {
      opacity: 0.9;
    }
    to {
      opacity: 1;
    }
  }

  .gallery-cell img {
    animation: galleryAnimation 3s ease-in-out infinite alternate;
  }

  .gallery {
    user-select: none;
  }

  .imagem-perfil,
  .imagem-perfil2,
  .imagem-perfil3,
  .imagem-perfil4,
  .imagem-perfil5,
  .imagem-perfil6,
  .imagem-perfil7,
  .imagem-perfil8,
  .imagem-perfil9 {
    width: 100%;
    height: auto;
  }

  .nome-artista {
    font-size: 18px; /* Ajuste conforme necessário */
  }

  .icone-rede-social {
    width: 50px; /* Ajuste conforme necessário */
    height: 50px; /* Ajuste conforme necessário */
  }

  .icone-rede-social img {
    width: 50px; /* Ajuste conforme necessário */
    height: 50px; /* Ajuste conforme necessário */
  }

  .icone-rede-social img:hover {
    width: 50px;
    height: 50px;
    transition: width 0.5s;
    padding: 1px;
    transition: width 0.5s;
    box-shadow: rgb(238, 165, 13) 5px 5px, rgb(0, 0, 0, 0.05) 5px 15px;
  }

  .icone-rede-social:hover {
    width: 60px; /* Ajuste conforme necessário */
    height: 60px; /* Ajuste conforme necessário */
    transition: width 0.5s;
    margin-left: 10px;
    padding: 1px;
  }

  .texto-rede-social {
    font-size: 15px; /* Ajuste conforme necessário */
  }

  .retangulo2 {
    width: 70%; /* Ajuste conforme necessário */
  }

  .texto-retangulo2 {
    font-size: 25px; /* Ajuste conforme necessário */
  }

  .retangulo3 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
  }

  .quadrado {
    width: calc(50% - 30px); /* Ajuste conforme necessário */
    height: 180px; /* Ajuste conforme necessário */
    background-color: #ccc;
    margin-bottom: 30px; /* Ajuste conforme necessário */
    box-shadow: rgb(128, 255, 128, 0.1) 20px 20px, rgb(0, 0, 0, 0.05) 25px 25px;
  }

  .quadrado:hover {
    width: calc(50% - 30px);
    height: 200px; /* Ajuste conforme necessário */
    transition: width 0.5s;
    box-shadow: rgb(238, 165, 13) 20px 20px, rgb(0, 0, 0, 0.05) 25px 25px;
  }

  .quadrado img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
  }

  .retangulo3 .quadrado:last-child,
  .retangulo3 .quadrado:nth-last-child(2) {
    margin-right: 0;
    margin-left: 0;
  }
}


/* TELEMOVEL 650px */

/* SMARTPHONE 650px */
@media only screen and (max-width: 650px) {

  header {
    height: 5vh;
  }

  header .header-image button {
    margin-left: 5px;
    margin-right: 5px;
    width: 95%;
    font-size: 20px; /* Ajuste conforme necessário */
    height: 60%; /* Ajuste conforme necessário */
  }

  header .glowing-btn3 {
    font-size: 1.5em; /* Ajuste conforme necessário */
  }

  .news-ticker {
    font-size: 16px; /* Ajuste conforme necessário */
  }

  .iframe-container iframe {
    width: 80%;
    height: 100px; /* Ajuste conforme necessário */
  }

  .featured {
    width: 100%; /* Ajuste conforme necessário */
  }

  .featured p.featured-text {
    font-size: 14px; /* Ajuste conforme necessário */
  }

  .featured h5.featured-text {
    font-size: 12px; /* Ajuste conforme necessário */
  }

  .featured h3.featured-text,
  .featured h2.featured-text {
    font-size: 25px; /* Ajuste conforme necessário */
    margin-top: 3%;
  }
   .news-item h2, .news-item h3
  {
	  font-size: 18px;
  }

  .streamsHHypers table {
    font-size: 16px; /* Ajuste conforme necessário */
  }

  .streamsHHypers img {
    width: 120px; /* Ajuste conforme necessário */
    height: 120px; /* Ajuste conforme necessário */
  }

  

  .fotosAds h1,
  .campanhasAnuncios h1 {
    font-size: 20px; /* Ajuste conforme necessário */
  }

  .gallery-cell2 img {
    width: 100%; /* Ajuste conforme necessário */
    height: 100px; /* Ajuste conforme necessário */
  }

  .campanhasAnuncios img {
    width: 80%; /* Ajuste conforme necessário */
  }

  .divSobre {
    margin-top: 10%; /* Ajuste conforme necessário */
    max-height: 0px;
  }

  .divSobre table {
    width: 100%;
    table-layout: fixed;
  }

  .divSobre tr {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .divSobre td {
    width: 100%;
    text-align: justify;
    vertical-align: middle;
    background-image: linear-gradient(to bottom right, rgb(0, 0, 0, 0.05), rgb(0, 9, 0));
    border-radius: 5px;
  }

  .divSobre img {
    max-width: 90%;
    height: auto;
    margin: 0 auto;
  }

  .divSobre .image-cell {
    margin-top: 3%;
  }

  .divSobre .text-cell {
    width: auto;
    margin-top: 4%;
    margin-right: 4%;
    margin-left: 4%;
    margin-bottom: 4%;
  }

  .divSobre p {
    font-size: 20px; /* Ajuste conforme necessário */
    margin: 10px 0;
  }
.divArts .quad-cell {
    width: 100%; /* Ajuste conforme necessário */
    text-align: center;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
  }

  .divArts img {
    max-width: 90%; /* Ajuste conforme necessário */
    height: auto;
    border-radius: 5px;
    box-shadow: rgb(128, 255, 128, 0.5) 5px 5px, rgb(128, 255, 128, 0.4) 10px 10px, rgb(128, 255, 128, 0.2) 15px 15px, rgb(128, 255, 128, 0.1) 20px 20px, rgb(0, 0, 0, 0.05) 25px 25px;
  }

  .divArts h2 {
    font-size: 18px; /* Ajuste conforme necessário */
  }

  .divArts img:hover {
    max-width: 95%; /* Ajuste conforme necessário */
    height: auto;
    border-radius: 5px;
    box-shadow: rgb(255, 255, 0) 5px 5px, rgb(255, 128, 0) 10px 10px, rgb(128, 64, 0) 15px 15px, rgb(64, 0, 0) 20px 20px, rgb(0, 0, 0, 0.05) 25px 25px;
  }
  .divServicos .quad-cell {
    width: 100%; /* Ajuste conforme necessário */
    text-align: center;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
  }

  .divServicos img {
    max-width: 90%; /* Ajuste conforme necessário */
    height: auto;
    border-radius: 5px;
    box-shadow: rgb(128, 255, 128, 0.5) 5px 5px, rgb(128, 255, 128, 0.4) 10px 10px, rgb(128, 255, 128, 0.2) 15px 15px, rgb(128, 255, 128, 0.1) 20px 20px, rgb(0, 0, 0, 0.05) 25px 25px;
  }

  .divServicos h2 {
    font-size: 18px; /* Ajuste conforme necessário */
  }

  .divServicos img:hover {
    max-width: 95%; /* Ajuste conforme necessário */
    height: auto;
    border-radius: 5px;
    box-shadow: rgb(255, 255, 0) 5px 5px, rgb(255, 128, 0) 10px 10px, rgb(128, 64, 0) 15px 15px, rgb(64, 0, 0) 20px 20px, rgb(0, 0, 0, 0.05) 25px 25px;
  }

  .divContactos .image-cell,
  .divContactos .text-cell {
    width: 100%;
    box-sizing: border-box;
  }

  .divContactos .image-cell {
    text-align: center;
    vertical-align: middle;
    padding: 10px;
    background-image: linear-gradient(to bottom right, rgb(0, 0, 0, 0.05), rgb(0, 9, 0));
    border-radius: 5px;
  }

  .divContactos .text-cell {
    font-size: 16px; /* Ajuste conforme necessário */
    padding: 10px;
    background-color: black;
    color: white;
    border-radius: 5px;
    box-shadow: rgb(128, 255, 128, 0.5) 5px 5px, rgb(128, 255, 128, 0.4) 10px 10px, rgb(128, 255, 128, 0.2) 15px 15px, rgb(128, 255, 128, 0.1) 20px 20px, rgb(0, 0, 0, 0.05) 25px 25px;
  }

  .divContactos iframe {
    max-width: 500px; /* Ajuste conforme necessário */
    width: 100%;
    height: 300px; /* Ajuste conforme necessário */
    border-radius: 5px;
  }

  .divContactos p {
    font-size: 20px; /* Ajuste conforme necessário */
    margin-top: 10px;
    color: rgb(255, 255, 255);
  }

  .divContactos h1 {
    font-size: 18px; /* Ajuste conforme necessário */
    margin-top: 5px;
    margin-bottom: 30px; /* Ajuste conforme necessário */
  }

  .dropdown-btn {
    font-size: 25px; /* Ajuste conforme necessário */
    width: 100%;
  }

  .dropdown {
    max-width: 50%; /* Ajuste conforme necessário */
  }

  .dropdown-content button {
    font-size: 20px; /* Ajuste conforme necessário */
  }

  .statement {
    font-size: 15px; /* Ajuste conforme necessário */
  }
  .statement2 {
    font-size: 15px; /* Ajuste conforme necessário */
  }

  .perfil .gallery {
    width: 100%;
    overflow: hidden;
  }

  .gallery-cell img {
    max-width: 100%;
    width: auto;
    height: auto;
    display: block;
    margin: 0 auto;
    opacity: 0;
    transition: opacity 0.5s;
  }

  .gallery-cell:first-child img {
    opacity: 1;
  }

  .gallery-cell {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }

  @keyframes galleryAnimation {
    from {
      opacity: 0.9;
    }
    to {
      opacity: 1;
    }
  }

  .gallery-cell img {
    animation: galleryAnimation 3s ease-in-out infinite alternate;
  }

  .gallery {
    user-select: none;
  }

  .imagem-perfil,
  .imagem-perfil2,
  .imagem-perfil3,
  .imagem-perfil4,
  .imagem-perfil5,
  .imagem-perfil6,
  .imagem-perfil7,
  .imagem-perfil8,
  .imagem-perfil9 {
    width: 100%;
    height: auto;
  }

  .nome-artista {
    font-size: 18px; /* Ajuste conforme necessário */
  }

  .icone-rede-social {
    width: 40px; /* Ajuste conforme necessário */
    height: 40px; /* Ajuste conforme necessário */
  }

  .icone-rede-social img {
    width: 40px; /* Ajuste conforme necessário */
    height: 40px; /* Ajuste conforme necessário */
  }

  .icone-rede-social img:hover {
    width: 40px;
    height: 40px;
    transition: width 0.5s;
    padding: 1px;
    transition: width 0.5s;
    box-shadow: rgb(238, 165, 13) 5px 5px, rgb(0, 0, 0, 0.05) 5px 15px;
  }

  .icone-rede-social:hover {
    width: 45px; /* Ajuste conforme necessário */
    height: 45px; /* Ajuste conforme necessário */
    transition: width 0.5s;
    margin-left: 5px;
    padding: 1px;
  }

  .texto-rede-social {
    font-size: 14px; /* Ajuste conforme necessário */
  }

  .retangulo2 {
    width: 70%; /* Ajuste conforme necessário */
  }

  .texto-retangulo2 {
    font-size: 20px; /* Ajuste conforme necessário */
  }

  .retangulo3 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
  }

  .quadrado {
    width: calc(50% - 15px); /* Ajuste conforme necessário */
    height: 120px; /* Ajuste conforme necessário */
    background-color: #ccc;
    margin-bottom: 15px; /* Ajuste conforme necessário */
    box-shadow: rgb(128, 255, 128, 0.1) 10px 10px, rgb(0, 0, 0, 0.05) 15px 15px;
  }

  .quadrado:hover {
    width: calc(50% - 15px);
    height: 140px; /* Ajuste conforme necessário */
    transition: width 0.5s;
    box-shadow: rgb(238, 165, 13) 10px 10px, rgb(0, 0, 0, 0.05) 15px 15px;
  }

  .quadrado img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
  }

  .retangulo3 .quadrado:last-child,
  .retangulo3 .quadrado:nth-last-child(2) {
    margin-right: 0;
    margin-left: 0;
  }
}


/* 450PX */

/* SMARTPHONE 450px */
@media only screen and (max-width: 450px) {

  header {
    height: 5vh;
  }

  header .header-image button {
    margin-left: 5px;
    margin-right: 5px;
    width: 95%;
    font-size: 18px; /* Ajuste conforme necessário */
    height: 50%; /* Ajuste conforme necessário */
  }

  header .glowing-btn3 {
    font-size: 1.2em; /* Ajuste conforme necessário */
  }

  .news-ticker {
    font-size: 14px; /* Ajuste conforme necessário */
  }

  .iframe-container iframe {
    width: 90%;
    height: 80px; /* Ajuste conforme necessário */
  }

  .featured {
    width: 100%; /* Ajuste conforme necessário */
  }

  .featured p.featured-text {
    font-size: 12px; /* Ajuste conforme necessário */
  }

  .featured h5.featured-text {
    font-size: 10px; /* Ajuste conforme necessário */
  }

  .featured h3.featured-text,
  .featured h2.featured-text {
    font-size: 20px; /* Ajuste conforme necessário */
    margin-top: 3%;
  }
	 .news-item h2, .news-item h3
  {
	  font-size: 15px;
  }
  .streamsHHypers table {
    font-size: 14px; /* Ajuste conforme necessário */
  }

  .streamsHHypers img {
    width: 80px; /* Ajuste conforme necessário */
    height: 80px; /* Ajuste conforme necessário */
  }

  

  .fotosAds h1,
  .campanhasAnuncios h1 {
    font-size: 16px; /* Ajuste conforme necessário */
  }

  .gallery-cell2 img {
    width: 100%; /* Ajuste conforme necessário */
    height: 80px; /* Ajuste conforme necessário */
  }
  
 

  .campanhasAnuncios img {
    width: 70%; /* Ajuste conforme necessário */
  }

  .divSobre {
    margin-top: 10%; /* Ajuste conforme necessário */
    max-height: 0px;
  }

  .divSobre table {
    width: 100%;
    table-layout: fixed;
  }

  .divSobre tr {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .divSobre td {
    width: 100%;
    text-align: justify;
    vertical-align: middle;
    background-image: linear-gradient(to bottom right, rgb(0, 0, 0, 0.05), rgb(0, 9, 0));
    border-radius: 5px;
  }

  .divSobre img {
    max-width: 100%;
    height: auto;
    margin: 0 auto;
  }

  .divSobre .image-cell {
    margin-top: 3%;
    width: 90%;
    
  }

  .divSobre .text-cell {
    width: auto;
    margin-top: 4%;
    margin-right: 4%;
    margin-left: 4%;
    margin-bottom: 4%;
  }

  .divSobre p {
    font-size: 16px; /* Ajuste conforme necessário */
    margin: 10px 0;
  }
.divArts .quad-cell {
    width: 100%; /* Ajuste conforme necessário */
    text-align: center;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
  }

  .divArts img {
    max-width: 90%; /* Ajuste conforme necessário */
    height: auto;
    border-radius: 5px;
    box-shadow: rgb(128, 255, 128, 0.5) 5px 5px, rgb(128, 255, 128, 0.4) 10px 10px, rgb(128, 255, 128, 0.2) 15px 15px, rgb(128, 255, 128, 0.1) 20px 20px, rgb(0, 0, 0, 0.05) 25px 25px;
  }

  .divArts h2 {
    font-size: 14px; /* Ajuste conforme necessário */
  }

  .divArts img:hover {
    max-width: 95%; /* Ajuste conforme necessário */
    height: auto;
    border-radius: 5px;
    box-shadow: rgb(255, 255, 0) 5px 5px, rgb(255, 128, 0) 10px 10px, rgb(128, 64, 0) 15px 15px, rgb(64, 0, 0) 20px 20px, rgb(0, 0, 0, 0.05) 25px 25px;
  }
  .divServicos .quad-cell {
    width: 100%; /* Ajuste conforme necessário */
    text-align: center;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
  }

  .divServicos img {
    max-width: 90%; /* Ajuste conforme necessário */
    height: auto;
    border-radius: 5px;
    box-shadow: rgb(128, 255, 128, 0.5) 5px 5px, rgb(128, 255, 128, 0.4) 10px 10px, rgb(128, 255, 128, 0.2) 15px 15px, rgb(128, 255, 128, 0.1) 20px 20px, rgb(0, 0, 0, 0.05) 25px 25px;
  }

  .divServicos h2 {
    font-size: 14px; /* Ajuste conforme necessário */
  }

  .divServicos img:hover {
    max-width: 95%; /* Ajuste conforme necessário */
    height: auto;
    border-radius: 5px;
    box-shadow: rgb(255, 255, 0) 5px 5px, rgb(255, 128, 0) 10px 10px, rgb(128, 64, 0) 15px 15px, rgb(64, 0, 0) 20px 20px, rgb(0, 0, 0, 0.05) 25px 25px;
  }

  .divContactos .image-cell,
  .divContactos .text-cell {
    width: 100%;
    box-sizing: border-box;
  }

  .divContactos .image-cell {
    text-align: center;
    vertical-align: middle;
    padding: 5px;
    background-image: linear-gradient(to bottom right, rgb(0, 0, 0, 0.05), rgb(0, 9, 0));
    border-radius: 5px;
  }

  .divContactos .text-cell {
    font-size: 14px; /* Ajuste conforme necessário */
    padding: 5px;
    background-color: black;
    color: white;
    border-radius: 5px;
    box-shadow: rgb(128, 255, 128, 0.5) 5px 5px, rgb(128, 255, 128, 0.4) 10px 10px, rgb(128, 255, 128, 0.2) 15px 15px, rgb(128, 255, 128, 0.1) 20px 20px, rgb(0, 0, 0, 0.05) 25px 25px;
  }

  .divContactos iframe {
    max-width: 300px; /* Ajuste conforme necessário */
    width: 100%;
    height: 200px; /* Ajuste conforme necessário */
    border-radius: 5px;
  }

  .divContactos p {
    font-size: 16px; /* Ajuste conforme necessário */
    margin-top: 5px;
    color: rgb(255, 255, 255);
  }

  .divContactos h1 {
    font-size: 14px; /* Ajuste conforme necessário */
    margin-top: 5px;
    margin-bottom: 30px; /* Ajuste conforme necessário */
  }

  .dropdown-btn {
    font-size: 18px; /* Ajuste conforme necessário */
    width: 100%;
  }

  .dropdown {
    max-width: 60%; /* Ajuste conforme necessário */
  }

  .dropdown-content button {
    font-size: 14px; /* Ajuste conforme necessário */
  }

  .statement {
    font-size: 12px; /* Ajuste conforme necessário */
  }
  .statement2 {
    font-size: 12px; /* Ajuste conforme necessário */
  }

  .perfil .gallery {
    width: 100%;
    overflow: hidden;
  }

  .gallery-cell img {
    max-width: 100%;
    width: auto;
    height: auto;
    display: block;
    margin: 0 auto;
    opacity: 0;
    transition: opacity 0.5s;
  }

  .gallery-cell:first-child img {
    opacity: 1;
  }

  .gallery-cell {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }

  @keyframes galleryAnimation {
    from {
      opacity: 0.9;
    }
    to {
      opacity: 1;
    }
  }

  .gallery-cell img {
    animation: galleryAnimation 3s ease-in-out infinite alternate;
  }

  .gallery {
    user-select: none;
  }

  .imagem-perfil,
  .imagem-perfil2,
  .imagem-perfil3,
  .imagem-perfil4,
  .imagem-perfil5,
  .imagem-perfil6,
  .imagem-perfil7,
  .imagem-perfil8,
  .imagem-perfil9 {
    width: 100%;
    height: auto;
  }

  .nome-artista {
    font-size: 14px; /* Ajuste conforme necessário */
  }

  .icone-rede-social {
    width: 30px; /* Ajuste conforme necessário */
    height: 30px; /* Ajuste conforme necessário */
  }

  .icone-rede-social img {
    width: 30px; /* Ajuste conforme necessário */
    height: 30px; /* Ajuste conforme necessário */
  }

  .icone-rede-social img:hover {
    width: 30px;
    height: 30px;
    transition: width 0.5s;
    padding: 1px;
    transition: width 0.5s;
    box-shadow: rgb(238, 165, 13) 3px 3px, rgb(0, 0, 0, 0.05) 3px 10px;
  }

  .icone-rede-social:hover {
    width: 35px; /* Ajuste conforme necessário */
    height: 35px; /* Ajuste conforme necessário */
    transition: width 0.5s;
    margin-left: 5px;
    padding: 1px;
  }

  .texto-rede-social {
    font-size: 12px; /* Ajuste conforme necessário */
  }

  .retangulo2 {
    width: 50%; /* Ajuste conforme necessário */
  }

  .texto-retangulo2 {
    font-size: 16px; /* Ajuste conforme necessário */
  }

  .retangulo3 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
  }

  .quadrado {
    width: calc(50% - 10px); /* Ajuste conforme necessário */
    height: 80px; /* Ajuste conforme necessário */
    background-color: #ccc;
    margin-bottom: 10px; /* Ajuste conforme necessário */
    box-shadow: rgb(128, 255, 128, 0.1) 5px 5px, rgb(0, 0, 0, 0.05) 10px 10px;
  }

  .quadrado:hover {
    width: calc(50% - 10px);
    height: 100px; /* Ajuste conforme necessário */
    transition: width 0.5s;
    box-shadow: rgb(238, 165, 13) 5px 5px, rgb(0, 0, 0, 0.05) 10px 10px;
  }

  .quadrado img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
  }

  .retangulo3 .quadrado:last-child,
  .retangulo3 .quadrado:nth-last-child(2) {
    margin-right: 0;
    margin-left: 0;
  }
}


/* iPhone 12 */
@media only screen and (max-width: 1170px) {
  header {
    height: 5vh;
  }
  
  /* Estilo do Cookie Banner */
	

  

  header .header-image button {
    margin-left: 5px;
    margin-right: 5px;
    width: 95%;
    font-size: 26px;
    height: 80%;
  }

  header .glowing-btn3 {
    font-size: 2em;
  }

  .news-ticker {
    font-size: 26px;
  }
  
  .news-ticker li {
  display: inline-block;
  margin-right: 50px;
  width: auto; /* Aumente o valor para adicionar mais espaço entre as notícias */
}
  
  .news-ticker ul {
  list-style: none;
  padding: 0;
  margin: 0;
 
  white-space: nowrap;
  animation: ticker 15s linear infinite; /* Aumente o valor do "20s" para tornar mais lento */
 width: 130%;
}

@-webkit-keyframes ticker {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(-270%, 0, 0);
    transform: translate3d(-270%, 0, 0);
  }
}
@keyframes ticker {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(-270%, 0, 0);
    transform: translate3d(-270%, 0, 0);
  }
}

  .iframe-container iframe {
    width: 70%;
    height: 160px;
  }


	.news-item img 
	{
		max-width: 100%;
	}
  .featured {
    width: 700px;
  }

  .featured p.featured-text {
    font-size: 38px;
  }

  .featured h5.featured-text {
    font-size: 18px;
  }

  .featured h3.featured-text,
  .featured h2.featured-text {
    font-size: 45px;
    margin-top: 3%;
  }
  
   .news-item h2, .news-item h3
  {
	  font-size: 35px;
  }

  .streamsHHypers table {
    font-size: 30px;
  }

  .streamsHHypers img {
    width: 250px;
    height: 250px;
  }

 

  .fotosAds h1,
  .campanhasAnuncios h1 {
    font-size: 40px;
  }
  
  .gallery-cell2
  {
	  width: 50%;
  }

  .gallery-cell2 img {
    width: 700px;
    height: 340px;
  }

  .campanhasAnuncios img {
    width: 90%;
  }

  .divSobre {
    margin-top: 10%;
    max-height: 0px;
  }

  /* Estilos para a tabela */
  .divSobre table {
    width: 100%;
    table-layout: fixed;
  }

  /* Estilos para as células da tabela */
  .divSobre tr {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .divSobre td {
    width: 100%;
    text-align: justify;
    vertical-align: middle;
    background-image: linear-gradient(to bottom right, rgb(0, 0, 0, 0.05), rgb(0, 9, 0));
    border-radius: 5px;
  }

  /* Estilos para as imagens na tabela */
  .divSobre img {
    max-width: 90%;
    height: auto;
    margin: 0 auto;
  }

 .divSobre .image-cell {
    margin-top: 3%;
    width: 90%;
    
  }
  
  .divSobre h1
  {
	  font-size: 30px;
  }

  .divSobre .text-cell {
    width: auto;
    margin-top: 4%;
    margin-right: 4%;
    margin-left: 4%;
    margin-bottom: 4%;
  }

  /* Estilos para o texto na tabela */
  .divSobre p {
    font-size: 40px;
    margin: 10px 0;
  }
.divArts table {
    width: 100%;
    border-collapse: collapse;
  }

  .divArts .quad-cell {
    width: 25%;
    text-align: center;
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
  }
  .divServicos table {
    width: 100%;
    border-collapse: collapse;
  }

  .divServicos .quad-cell {
    width: 25%;
    text-align: center;
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
  }
  .divArtistas h2 {
    font-size: 30px;
  }
.divArts img {
    max-width: 700px;
    height: auto;
    border-radius: 5px;
    box-shadow: rgb(128, 255, 128, 0.5) 5px 5px, rgb(128, 255, 128, 0.4) 10px 10px, rgb(128, 255, 128, 0.2) 15px 15px, rgb(128, 255, 128, 0.1) 20px 20px, rgb(0, 0, 0, 0.05) 25px 25px;
  }

  .divArts h2 {
    font-size: 30px;
  }

  .divArts img:hover {
    max-width: 720px;
    height: auto;
    border-radius: 5px;
    box-shadow: rgb(255, 255, 0) 5px 5px, rgb(255, 128, 0) 10px 10px, rgb(128, 64, 0) 15px 15px, rgb(64, 0, 0) 20px 20px, rgb(0, 0, 0, 0.05) 25px 25px;
  }
  .divServicos img {
    max-width: 700px;
    height: auto;
    border-radius: 5px;
    box-shadow: rgb(128, 255, 128, 0.5) 5px 5px, rgb(128, 255, 128, 0.4) 10px 10px, rgb(128, 255, 128, 0.2) 15px 15px, rgb(128, 255, 128, 0.1) 20px 20px, rgb(0, 0, 0, 0.05) 25px 25px;
  }

  .divServicos h2 {
    font-size: 30px;
  }

  .divServicos img:hover {
    max-width: 720px;
    height: auto;
    border-radius: 5px;
    box-shadow: rgb(255, 255, 0) 5px 5px, rgb(255, 128, 0) 10px 10px, rgb(128, 64, 0) 15px 15px, rgb(64, 0, 0) 20px 20px, rgb(0, 0, 0, 0.05) 25px 25px;
  }

  /* Estilos para a tabela */
  .divContactos table {
    width: 100%;
    margin-top: 2%;
  }

  /* Estilos para as células da tabela */
  .divContactos tr {
    display: flex;
    flex-wrap: wrap;
  }

  .divContactos .image-cell,
  .divContactos .text-cell {
    width: 100%;
    box-sizing: border-box;
  }

  .divContactos .image-cell {
    text-align: center;
    vertical-align: middle;
    padding: 20px;
    background-image: linear-gradient(to bottom right, rgb(0, 0, 0, 0.05), rgb(0, 9, 0));
    border-radius: 5px;
  }

  .divContactos .text-cell {
    font-size: 24px;
    padding: 20px;
    background-color: black;
    color: white;
    border-radius: 5px;
    box-shadow: rgb(128, 255, 128, 0.5) 5px 5px, rgb(128, 255, 128, 0.4) 10px 10px, rgb(128, 255, 128, 0.2) 15px 15px, rgb(128, 255, 128, 0.1) 20px 20px, rgb(0, 0, 0, 0.05) 25px 25px;
  }

  /* Estilos para as imagens na tabela */
  .divContactos iframe {
    max-width: 650px;
    width: 650px;
    height: 550px;
    border-radius: 5px;
  }

  /* Estilos para o texto na tabela */
  .divContactos p {
    font-size: 40px;
    margin-top: 10px;
    color: rgb(255, 255, 255);
  }

  .divContactos h1 {
    font-size: 30px;
    margin-top: 5px;
    margin-bottom: 50px;
  }

  .dropdown-btn {
    font-size: 35px;
    width: 100%;
  }

  .dropdown {
    max-width: 70%;
  }

  .dropdown-content button {
    font-size: 30px;
  }

  .statement {
    font-size: 25px;
  }
  .statement2 {
    font-size: 25px;
  }

  .perfil .gallery {
    width: 100%;
    overflow: hidden;
  }

  /* Estilos para as imagens dentro das células do carrossel */
  .gallery-cell img {
    max-width: 100%;
    width: auto;
    height: auto;
    display: block;
    margin: 0 auto;
    opacity: 0;
    transition: opacity 0.5s;
  }

  /* Exibe a primeira imagem inicialmente */
  .gallery-cell:first-child img {
    opacity: 1;
  }

  /* Estilos para as células do carrossel */
  .gallery-cell {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }

  /* Animação para transição de imagens */
  @keyframes galleryAnimation {
    from {
      opacity: 0.9;
    }
    to {
      opacity: 1;
    }
  }

  /* Adiciona a animação para todas as imagens */
  .gallery-cell img {
    animation: galleryAnimation 3s ease-in-out infinite alternate;
  }

  .gallery {
    user-select: none;
  }

  .imagem-perfil,
  .imagem-perfil2,
  .imagem-perfil3,
  .imagem-perfil4,
  .imagem-perfil5,
  .imagem-perfil6,
  .imagem-perfil7,
  .imagem-perfil8,
  .imagem-perfil9,
  .imagem-perfil10,
  .imagem-perfil11,
  .imagem-perfil12 {
    width: 400px;
    height: 400px;
  }

  .nome-artista {
    font-size: 30px;
  }

  .icone-rede-social {
    width: 80px;
    height: 80px;
  }

  .icone-rede-social img {
    width: 80px;
    height: 80px;
  }

  .icone-rede-social img:hover {
    width: 80px;
    height: 80px;
    transition: width 0.5s;
    padding: 1px;
    transition: width 0.5s;
    box-shadow: rgb(238, 165, 13) 10px 10px, rgb(0, 0, 0, 0.05) 10px 25px;
  }

  .icone-rede-social:hover {
    width: 90px;
    height: 90px;
    transition: width 0.5s;
    margin-left: 10px;
    padding: 1px;
  }

  .texto-rede-social {
    font-size: 26px;
  }

  .retangulo2 {
    width: 85%;
  }

  .texto-retangulo2 {
    font-size: 32px;
  }

  .retangulo3 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
  }

  .quadrado {
    width: calc(25% - -30.5px);
    height: 260px;
    background-color: #ccc;
    margin-bottom: 35px;
    box-shadow: rgb(128, 255, 128, 0.1) 20px 20px, rgb(0, 0, 0, 0.05) 25px 25px;
  }

  .quadrado:hover {
    width: calc(25% - -30.5px);
    height: 280px;
    transition: width 0.5s;
    box-shadow: rgb(238, 165, 13) 20px 20px, rgb(0, 0, 0, 0.05) 25px 25px;
  }

  .quadrado img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
  }

  .retangulo3 .quadrado:last-child,
  .retangulo3 .quadrado:nth-last-child(2) {
    margin-right: 10%;
    margin-left: 10%;
  }
  
  
}