/* USO GERAL */

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

body,
input,
button {
  font-family: "Ubuntu", sans-serif;
}

/* Light Color Scheme (Default + Override) */
/* Tema claro (padrão) */
:root,
:root[data-force-color-mode="light"] {
  --background-color: #F7F7F5;
  --text-color: #1B1B1B;
  --text-color2: #3d3d3d;
  --background-color-hee: rgba(216, 216, 216, 0.39);
  --background-color-bg-blu: #0783d6;
  --player-border: rgba(0, 0, 0, 0.1);
  
  /* Variáveis específicas do player */
  --player-bg: #ffffff;
  --player-text: #1B1B1B;
  --player-secondary: #666666;
  --player-hover: rgba(0, 0, 0, 0.05);
  --player-stats-bg: #f5f5f5;
  --player-button-bg: #00aae0;
  --player-button-text: #ffffff;

  --primary: #1bd760;
  --secondary: #00aae0;
  --heart: #e91e63;
  --dark: #121212;
  --dark-2: #181818;
  --dark-3: #282828;
  --gray: #b3b3b3;
  --gradient: linear-gradient(to right, rgba(209, 209, 209, 0.9), rgba(241, 241, 241, 0.171));

  /* Gradientes principais */
  --gradient-primary: linear-gradient(45deg, #FF0066, #ff0000);
  --gradient-stats: linear-gradient(45deg, #00F5A0, #00D9F5);
  --gradient-play: linear-gradient(45deg, #9333EA, #7C3AED);
  --gradient-download: linear-gradient(45deg, #0099FF, #00B4D8);
  
  /* Efeitos de brilho */
  --glow-primary: rgba(255, 0, 102, 0.25);
  --glow-stats: rgba(0, 245, 160, 0.4);
  --glow-play: rgba(147, 51, 234, 0.25);
  --gradient-purple: linear-gradient(45deg, #A742F5, #5B42F5);
  --gradient-pink: linear-gradient(45deg, #FF0066, #FF00CC);
  
  --button-primary: #FF0066;
  --button-hover: #CC0052;
  --stats-color: #00F5A0;
  
  /* Elementos específicos */
  --track-bg: #ffffff;
  --track-text: #1B1B1B;
  --track-hover: rgba(0, 0, 0, 0.05);
  --stats-value: #00aae0;
  --stats-label: #666666;

    /* artisk ou dj tomas*/
    --spotify-black: #f0f0f0;
    --spotify-dark: #e6e6e6;
    --spotify-darker: #cccccc;
    --spotify-green: linear-gradient(45deg, #FF0066, #ff0000); /* Verde pode permanecer o mesmo para o contraste */
    --spotify-white: #000000; /* Texto preto para contraste em tema claro */
    --spotify-light-gray: #666666;
    --spotify-hover: #d9d9d9;
    --spotify-gradient: linear-gradient(transparent 0, rgba(255, 255, 255, 0.5) 100%);
}
/* Tema escuro */
@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #141414;
    --text-color: #EDEDED;
    --text-color2: #b3b3b3;
    --background-color-hee: rgba(27, 27, 27, 0.8);
    --background-color-bg-blu: #5BBEF5;
    --player-border: rgba(255, 255, 255, 0.1);
    
    /* Variáveis específicas do player */
    --player-bg: #1b1b1b;
    --player-text: #EDEDED;
    --player-secondary: #b3b3b3;
    --player-hover: rgba(255, 255, 255, 0.05);
    --player-stats-bg: #1b1b1b;
    --player-button-bg: #00aae0;
    --player-button-text: #ffffff;

    --primary: #1bd760;
    --secondary: #00aae0;
    --heart: #e91e63;
    --dark: #121212;
    --dark-2: #181818;
    --dark-3: #282828;
    --gray: #b3b3b3;
    --gradient: linear-gradient(to right, rgba(0,0,0,0.9), rgba(0,0,0,0.4));

    /* Gradientes principais */
    --gradient-primary: linear-gradient(45deg, #FF0066, #ff0000);
    --gradient-stats: linear-gradient(45deg, #00F5A0, #00D9F5);
    --gradient-play: linear-gradient(45deg, #9333EA, #7C3AED);
    --gradient-download: linear-gradient(45deg, #0099FF, #00B4D8);
    
    /* Efeitos de brilho */
    --glow-primary: rgba(255, 0, 102, 0.25);
    --glow-stats: rgba(0, 245, 160, 0.4);
    --glow-play: rgba(147, 51, 234, 0.25);
    --gradient-purple: linear-gradient(45deg, #A742F5, #5B42F5);
    --gradient-pink: linear-gradient(45deg, #FF0066, #FF00CC);
    
    --button-primary: #FF0066;
    --button-hover: #CC0052;
    --stats-color: #00F5A0;
    
    /* Elementos específicos */
    --track-bg: #1b1b1b;
    --track-text: #EDEDED;
    --track-hover: rgba(255, 255, 255, 0.05);
    --stats-value: #5BBEF5;
    --stats-label: #b3b3b3;

      /* artisk ou dj tomas*/
      --spotify-black: #121212;
      --spotify-dark: #181818;
      --spotify-darker: #282828;
      --spotify-green: linear-gradient(45deg, #FF0066, #ff0000);
      --spotify-white: #FFFFFF;
      --spotify-light-gray: #B3B3B3;
      --spotify-hover: #282828;
      --spotify-gradient: linear-gradient(transparent 0,rgba(0,0,0,.5) 100%);
  }
}
:root[data-force-color-mode="dark"] {

  --background-color: #141414;
  --text-color: #EDEDED;
  --text-color2: #b3b3b3;
  --background-color-hee: rgba(27, 27, 27, 0.8);
  --background-color-bg-blu: #5BBEF5;
  --player-border: rgba(255, 255, 255, 0.1);
  
  /* Variáveis específicas do player */
  --player-bg: #1b1b1b;
  --player-text: #EDEDED;
  --player-secondary: #b3b3b3;
  --player-hover: rgba(255, 255, 255, 0.05);
  --player-stats-bg: #1b1b1b;
  --player-button-bg: #00aae0;
  --player-button-text: #ffffff;

  --primary: #1bd760;
  --secondary: #00aae0;
  --heart: #e91e63;
  --dark: #121212;
  --dark-2: #181818;
  --dark-3: #282828;
  --gray: #b3b3b3;
  --gradient: linear-gradient(to right, rgba(0,0,0,0.9), rgba(0,0,0,0.4));

  /* Gradientes principais */
  --gradient-primary: linear-gradient(45deg, #FF0066, #ff0000);
  --gradient-stats: linear-gradient(45deg, #00F5A0, #00D9F5);
  --gradient-play: linear-gradient(45deg, #9333EA, #7C3AED);
  --gradient-download: linear-gradient(45deg, #0099FF, #00B4D8);
  
  /* Efeitos de brilho */
  --glow-primary: rgba(255, 0, 102, 0.25);
  --glow-stats: rgba(0, 245, 160, 0.4);
  --glow-play: rgba(147, 51, 234, 0.25);
  --gradient-purple: linear-gradient(45deg, #A742F5, #5B42F5);
  --gradient-pink: linear-gradient(45deg, #FF0066, #FF00CC);
  
  --button-primary: #FF0066;
  --button-hover: #CC0052;
  --stats-color: #00F5A0;
  
  /* Elementos específicos */
  --track-bg: #1b1b1b;
  --track-text: #EDEDED;
  --track-hover: rgba(255, 255, 255, 0.05);
  --stats-value: #5BBEF5;
  --stats-label: #b3b3b3;

     /* artisk ou dj tomas*/
     --spotify-black: #121212;
     --spotify-dark: #181818;
     --spotify-darker: #282828;
     --spotify-green: linear-gradient(45deg, #FF0066, #ff0000);
     --spotify-white: #FFFFFF;
     --spotify-light-gray: #B3B3B3;
     --spotify-hover: #282828;
     --spotify-gradient: linear-gradient(transparent 0,rgba(0,0,0,.5) 100%);
}

/* Animação de brilho aprimorada */
@keyframes glow {
  from {
    text-shadow: 0 0 10px var(--glow-stats);
  }
  to {
    text-shadow: 0 0 20px var(--glow-stats),
                 0 0 30px var(--glow-stats);
  }
}

/* Dark Color Scheme (System Preference) */

body {
  font-family: 'Inter', sans-serif;
  background: var(--dark);
  color: var(--light);
  min-height: 100vh;

  line-height: 1.6;
	color: var(--text-color);
	background-color: var(--background-color);
  .feather {
    color: var(--text-color);
  }
  
}

.ajax-loading-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 9999;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.1);
}

.ajax-loading-bar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--gradient-primary);
  animation: gradient-loading 2s ease infinite;
  background-size: 200% 100%;
}

/* Animação principal de carregamento */
@keyframes gradient-loading {
  0% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}

/* Adicione um gradiente de brilho */
.ajax-loading-bar::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.2) 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.2) 75%,
    transparent 100%
  );
  animation: shine 1.5s linear infinite;
}

@keyframes shine {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(50%);
  }
}

/*GERAL*/
.container{float: left;width: 100%;}
.contenty{float: left;width: 96%; margin: 0 2%;}
.clear{clear: both;}
a{text-decoration: none;color: var(--text-color);}
.texto-ads {

    text-align: center;
    font-size: 13px;
    margin-top: 5px;
    font-style: italic;
    color: #a9a7a7;
}
.texto-adsx {

  text-align: center;
  font-size: 13px;
  margin-top: 5px;
  font-style: italic;
  color: #a9a7a7;
}
.texto-top {
font-family: "Lato", Arial, sans-serif;
    text-align: center;
    font-size: 2em;
    text-transform: uppercase;
    letter-spacing: 2px;
    border: 3px solid #FFF;
    position: absolute;
    top: 20%;
    left:1%;
    margin:5%;
    transform:transition(-40% -40%);
    padding: 1em 1em;


}

/*FONTE*/
.fontzero{font-size: 0;}

/*BORDER*/
.border0{border: 0 !important;}

.logo-2025{
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--text-color); /* Cor principal */
  text-transform: none; /* Mantém apenas o B e G maiúsculos */
  letter-spacing: 0.05em;
  text-decoration: none;
  transform: rotate(-2deg); /* Inclinação para cima */
}
.logo-2025:hover,
.logo-2025:focus,
.logo-2025:visited,
.logo-2025:active {
   
    text-decoration: none; /* Remove qualquer sublinhado em todos os estados */
}
.logo-2025 span.g4 {
  font-weight: 400; /* Peso mais leve */
  color: var(--text-color); /* Cor secundária */
  transform: rotate(-2deg); /* Inclinação para cima */
}
.logo-2025-2 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--text-color); /* Cor principal */
  text-transform: none; /* Mantém apenas o B e G maiúsculos */
  letter-spacing: 0.05em;
  text-decoration: none;
  transform: rotate(-2deg); /* Inclinação para cima */
}
.logo-2025-2 span.g4-2 {
  font-weight: 400; /* Peso mais leve */
  color: var(--text-color); /* Cor secundária */
  transform: rotate(-2deg); /* Inclinação para cima */
}
.logo-2025-2:hover,
.logo-2025-2:focus,
.logo-2025-2:visited,
.logo-2025-2:active {
   
    text-decoration: none; /* Remove qualquer sublinhado em todos os estados */
}
@media screen and (max-width: 768px) {
  .logo-2025{
    display: block; /* Mantém apenas o logo 2025 visível */
    font-size: 1.2rem; /* Ajusta o tamanho para mobile */
    margin: 10px auto;
    text-align: center;
    color: var(--text-color); /* Cor principal */
  }
  header #logo img{
    width: 25px;
    height: 25px;
  }
}
/*BACKGROUND COLOR*/
.bg-cinza{background-color: var(--background-color-hee); }
.bg-rosa{background-color: var(--background-color);
       
     
        position: relative;
        animation: change 10s ease-in-out infinite; width: 100%; height: 250px;}

   

/*HEADER 2023*/

a {
    color: #f4037b;
    outline: none;
    text-decoration: none;
  }
  a:hover {
    text-decoration: underline;
  }
  
  .overlay {
    display: none;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.285);
    z-index: 1001;
  }
  
  /* For Typography */
  .ul-base {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  
  /* -----------------------------------------------------
  Clearfix
  -------------------------------------------------------- */
  .clearfix {
    zoom:1;
  }
  .clearfix::after {
    content: "";
    display: table;
    line-height: 0;
    clear: both;
  }
  /*DARK 2*/

.thema-black{
  margin: 3px;
  background-color: rgba(128, 255, 0, 0);
 
 }
 .thema-black p{
  font-size: 11px;
  margin-bottom: 4px;
 
 }

/*DARK 2*/
/* Mode Switch Toggle */
#toggle-darkmode,
#toggle-darkmode:checked ~ .iconmode .moonmode,
.iconmode .sunmode {
  display: none;
}
.iconmode {
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  outline-offset: 5px;
}
.iconmode .moonmode {
  display: block;
  font-size: 18px;
  stroke-width: 2px;
  stroke: currentColor;
}
.iconmode .sunmode{
  fill: currentColor;
}
#toggle-darkmode:checked ~ .iconmode .sunmode {
  display: block;
  font-size: 18px;
}
/*dark 2023*/
   /* -----------------------------------------------------
  header novo
  -------------------------------------------------------- */
  header {
    width: 100%;
  overflow: hidden;
  color: #fff;
  background: var(--background-color-hee);
  animation: change 10s ease-in-out infinite;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 32px;
  height: 64px;
  position: sticky;
  top: 0;
  z-index: 1000;
  /* Opcional: adicionar uma sombra sutil quando fixado */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  /* Opcional: adicionar uma transição suave */
  transition: background 0.3s ease;
  }
.header-scrolled {
  background: rgba(var(--background-color-hee), 0.95);
  backdrop-filter: blur(10px);
  box-shadow: var(  --player-border);
}
header button:hover{
  background: rgba(255, 255, 255, 0.2);
}

header button {
  border-radius: 100%;
  height: 40px;
  width: 40px;
  border: none;
  outline: none;
  background: transparent;
  cursor: pointer;
  transition: 0.2s;
}

header button i {
  color: white;
  font-size: 1.4rem !important;
}

/* Garantir que elementos fixos fiquem abaixo do search panel */
header, nav {
  z-index: 100;
}

header #logo {
  display: flex;
  align-items: center;
}
header #logo img{
  width: 30px;
  height: 30px;
}

header .right {
  display: flex;
  align-items: center;
}



header .right #account-menu {
  position: absolute;
  padding: 8px 0px;
  background-color: var(--background-color);
  top: 80px;
  right: 32px;
  z-index: 9999;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

header .right #account-menu::before {
  content: "";
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid transparent;
  border-bottom: 10px solid var(--background-color);
  position: absolute;
  top: -20px;
  right: 10px;
}

.dropdown-menu {
  display: none;
  position: absolute;
    top: 100%;
    right: 0;
    background: var(--background-color, #fff);
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    min-width: 200px;
    z-index: 1000;
    display: none;
}
header .right #account-menu li {
  list-style: none;
}

header .right #account-menu li a {
  color: var(--text-color);
  text-decoration: none;
  padding: 8px 16px;
  display: block;
}

header .right #account-menu li a:hover {
  background: #eeeeee;
}

header #navby ul {
  display: flex;
  height: 64px;
}

header #navby ul li {
  list-style: none;
  height: 100%;
}

header #navby ul li a {
  text-decoration: none;
  display: flex;
  color: var(--text-color);
  justify-content: center;
  align-items: center;
  padding: 16px;
  height: 100%;
  border-bottom: 3px solid transparent;
  font-size: 1.1rem;
}

header #navby ul li.selected a {
  
}

header #close-menu {
  justify-content: flex-end;
  display: none;
}

header #navby ul li a:hover {
  background: rgba(255, 255, 255, 0.2);
}

header #close-menu button {
  height: 32px;
  width: 32px;
  margin: 24px 24px 0px;
  border-radius: 100%;
  border: none;
  cursor: pointer;
}

header #close-menu button i {
  font-size: 28px;
  color: #333;
}

header #toggle-menu {
  display: none;
  margin-right: 8px;
}
 /* -----------------------------------------------------
     Header nav
  -------------------------------------------------------- */

  header .nav-btn {
    cursor: pointer;
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 30px;
    margin: 8px 0;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
  }
  header .nav-btn i {
    margin-left:4px;
    font-size: 28px;
  
  }
  header .nav-btn.nav-slider {
    float: left;
  }
  header .nav-btn.search {
    display: none;
  }
  header .nav-btn i {
    vertical-align: middle;
  }
  /* -----------------------------------------------------
     Header velho
  -------------------------------------------------------- */
  .header-loging425 {
    display: flex;
    align-items: center;
}
.header-loging425 a{
  text-decoration: none;
}

.loging425-button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-color);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s;
}

.loging425-button:hover {
    background: rgba(255, 255, 255, 0.2);
}

.loging425-button i {
    font-size: 16px;
}

.loging425-profile {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px;
    padding-right: 16px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-color);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s;
}

.loging425-profile:hover {
    background: rgba(255, 255, 255, 0.2);
}

.loging425-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
}

.loging425-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
  /* -----------------------------------------------------
     Nav
  -------------------------------------------------------- */
  /* -----------------------------------------------------
   Nav
-------------------------------------------------------- */
nav {
  overflow-y: auto;
  position: fixed;
  top: 0px;
  left: -250px;
  width: 180px;
  height: 100%;
  color: var(--text-color);
  background-color: var(--background-color);
  transition: all 0.3s ease;
  opacity: 0.9;
  z-index: 1002;
}
nav .nav-header {
  display: block;
  background-color: var(--background-color);
  background-size: 400% 400%;
}
nav .nav-header .logo-wrap {
  padding: 1.7em 1em;
}
nav .nav-header .logo-wrap {
  padding: 1em 1em; /* Reduzido para um padding mais compacto */
  display: flex;
  align-items: center;
}

nav .nav-header .logo-wrap .logo-icon img {
  display: block;
  border-radius: 50%;
  width: 30px; /* Ajuste o tamanho conforme necessário */
  height: 30px; /* Ajuste o tamanho conforme necessário */
}
nav .nav-header .logo-wrap .logo-text {
  display: inline-block;
  color: var(--text-color);
  font-size: 1.2em;
  vertical-align: 12px;
  margin-left: 8px;
  text-decoration: none;
}
nav .nav-categories li {
  display: block;
  position: relative;
}
nav .nav-categories li a {
  display: block;
  width: 100%;
  font-size: 1rem;
  color: var(--text-color);
  padding: 0.625em 1.3em;
  text-decoration: none;
}
nav .nav-categories li a:hover {
  background-color: rgba(0, 0, 0, 0.1);
}
nav.open {
  left: 0px;
  box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.275);
  opacity: 1;
}
nav .nav-separator {
  width: 100%;
  height: 1px;
  margin: 7px 0;
  background-color: rgba(0, 0, 0, 0.175);
}
nav .nav-link-title {
  display: block;
  color: #3f51b5;
  font-size: 1rem;
  padding: 0.5em 1.3em;
}
nav .social {
  display: flex;
  margin: 4px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.155);
  border-bottom: 1px solid rgba(0, 0, 0, 0.155);
}
nav .social li {
  display: inline-block;
  position: relative;
  width: 25%;
  height: 28px;
  margin: 0;
  padding: 0;
  text-align: center;
  line-height: 28px;
  flex-direction: row;
  border-right: 1px solid rgba(0, 0, 0, 0.175);
}
nav .social li:last-child {
  border-right: 0;
}
nav .social li a {
  display: block;
  color: #5c5c5c;
  font-size: 15px;
  padding: 2px;
  text-decoration: none;
}
nav .social li a.twitter:hover {
  color: #00baf0;
}
nav .social li a.facebook:hover {
  color: #3b5997;
}
nav .social li a.google-plus:hover {
  color: #c43c2c;
}
nav .social li a.rss:hover {
  color: #ff6600;
}
nav .copyright {
  display: block;
  color: #5c5c5c;
  text-align: center;
  padding: 0.5em 0 1em;
}
nav .copyright span {
  display: block;
  width: 100%;
  font-size: 11px;
  margin-bottom: 4px;
}


/*==検索窓背景のエリア*/

#search-wrap{
  position:fixed;/*固定配置にして*/
top: 0;
  left: 0;
z-index: -1;/*最背面に設定*/
opacity: 0;/*透過を0に*/
transition: all 0.4s;/*transitionを使ってスムースに現れる*/
width:100%;
height: 100vh;
}

/*ボタンクリック後、JSで#search-wrapに panelactive クラスが付与された後の見た目*/
#search-wrap.panelactive{
opacity: 1;/*不透明に変更*/
 z-index: 3;/*全面に出現*/
 background:var(--background-color);
  /*中の要素を天地中央揃えにする設定*/
 display: flex;
 justify-content: center;
 position: relative;
 align-items: center;
}

/*==検索窓のエリア*/

#search-wrap .search-area{
display: none;/*検索窓のエリアは、はじめ非表示*/
}

/*ボタンクリック後、JSで#search-wrapに panelactive クラスが付与された後*/
#search-wrap.panelactive .search-area{
display: block;/*検索窓エリアを表示*/
width:80%;
position: relative;
z-index: 9999;
}

/*==検索フォームの設定*/

#search-wrap form{
position: relative;
height: 306px;
}

/*==テキスト入力とボタンinput共通設定*/
#search-wrap input{
-webkit-appearance:none;/*SafariやChromeのデフォルトの設定を無効*/
outline: none;
cursor: pointer;/*カーソルを指マークに*/
color: var(--background-color-hee);
}

/*テキスト入力input設定*/
#search-wrap input[type="text"] {
width: 100%;
padding: 20px;
border: none;
border-bottom:2px solid #66666685;
transition: all 0.5s;
letter-spacing: 0.05em;
}

#search-wrap input[type="text"]:focus {
background:#4444442d;
color:var(--text-color) ;
}

/*ボタンinput設定*/
#search-wrap input[type="submit"] {
position: absolute;
 top:0;
right:0px;
background:#f0005c url("https://www.baladag4.com.br/assets/icon_search.svg") no-repeat 15px center;/*虫眼鏡アイコンを背景に表示*/
background-size: 25px 25px;
width:60px;
height: 60px;
}

/*=======　閉じるための×ボタン　========*/
.close-btn{
position: absolute;
top:10px;
right:10px;
z-index: 2;
cursor: pointer;
  width: 60px;
  height:60px;
}

.close-btn span{
  display: inline-block;
  position: absolute;
  left: 14px;
  height: 3px;
  border-radius: 2px;
background-color:  var(--text-color);
}

/*×マーク*/
.close-btn span:nth-of-type(1) {
  top: 21px;
  left: 16px;
  transform: translateY(6px) rotate(-135deg);
  width: 50%;
}

.close-btn span:nth-of-type(2){
  top: 32px;
  left: 16px;
  transform: translateY(-6px) rotate(135deg);
  width: 50%;
}
/* category */

.catagories span{

 display: none;

}
.logo-icon-8 img {
  display: block;
  border-radius: 50%;
  width: 30px; /* Ajuste o tamanho conforme necessário */
  height: 30px; /* Ajuste o tamanho conforme necessário */
}
.logo-wrap8 {
  padding: 1.7em 1em;
}
.logo-wrap8 {
  padding: 1em 1em; /* Reduzido para um padding mais compacto */
  display: flex;
  align-items: center;
}
  /* -----------------------------------------------------
     Dropdown Menu
  -------------------------------------------------------- */
  li.dropdown {
    display: inline-block;
    position: relative;
  }
  li.dropdown a {
    display: block;
    height: 64px;
    padding: 0 35px;
    color: #fff;
    font-size: 17px;
    line-height: 64px;
    text-decoration: none;
  }
  li.dropdown a i {
    vertical-align: middle;
  }
  li.dropdown .dropdown-menu {
    display: none;

    position: absolute;
    top: 100%;
    left: 0px;
    min-width: 240px;
    margin: 2px 0;
    padding: 5px 0;
    text-align: left;
    border-radius: 2px;
    background: #009FFF;
    background: -webkit-linear-gradient(to right, #ff1b3d, #0387da);
    background: linear-gradient(to right, #e40347, #0376be);
    background-size: 400% 400%;
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
    z-index: 1000;
  }
  li.dropdown .dropdown-menu li {
    display: block;
  }
  li.dropdown .dropdown-menu li a {
    display: block;
    height: 40px;
    font-size: 1em;
    line-height: 40px;
    text-decoration: none;
  }
  li.dropdown.open .dropdown-menu {
    display: block;
  }

/*HEADER 2023*/

/* novo destaque baladag4 2024 */
.container7 {
  max-width: 1440px;
  margin: 0 auto;
}
.carousel {
  padding: 2px;
}
.carousel h2 {
  margin: 0;
}
.carousel a {
  text-decoration: none;
  color: #fff;
}
.carousel img {
  aspect-ratio: 1/1;
  width: 175px;
  height: 175px;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
  margin-bottom: 16px;
  border-radius: clamp(0px, ((100vw - 4px) - 100%) * 9999, 4px);
}
.carousel h3 {
  font-size: 16px;
  margin: 0;
  margin-bottom: 4px;
  color: var(--text-color);
}
.carousel span {
  color: #a7a7a7;
  font-size: 14px;
}
.carousel .dragging a {
  pointer-events: none;
}
.carousel .carousel__wrapper {
  position: relative;
  margin-bottom: 24px;
}
@media only screen and (min-width: 1180px) {
  .carousel .carousel__wrapper.has-arrows .carousel__content {
    justify-content: space-between;
  }
}
@media only screen and (min-width: 1180px) {
  .carousel .carousel__wrapper.has-arrows .carousel__arrows {
    display: flex;
  }
}
.carousel .carousel__header {
  display: grid;
  grid-auto-flow: column;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.carousel .carousel__content {
  overflow-y: hidden;
  overflow-x: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
  display: grid;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  padding: 0;
  margin: 0;
  grid-gap: 24px;
  grid-auto-flow: column;
  list-style: none;
}
.carousel .carousel__content::-webkit-scrollbar {
  display: none;
}
.carousel .carousel__item .carousel__description {
  width: 100%;
}
.carousel .carousel__item a {
  display: flex;
  justify-content: center;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  position: relative;
  user-select: none;
  margin: 10px 0px;
  padding: 16px;
  background-color: var(--background-color-hee);
  border-radius: clamp(0px, ((100vw - 4px) - 100%) * 9999, 8px);
  cursor: pointer;
}
.carousel .carousel__controls {
  display: grid;
  grid-auto-flow: column;
  grid-gap: 24px;
}
.carousel .carousel__arrow {
  padding: 0;
  background: transparent;
  box-shadow: none;
  border: 0;
}
.carousel .carousel__arrow:before {
  content: "";
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNSIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgMTUgOSI+Cgk8cGF0aCBmaWxsPSIjMzMzMzMzIiBkPSJNNy44NjcgOC41NzRsLTcuMjItNy4yMi43MDctLjcwOEw3Ljg2NyA3LjE2IDE0LjA1Ljk4bC43MDYuNzA3Ii8+Cjwvc3ZnPgo=");
  background-size: contain;
  filter: brightness(2);
  display: block;
  width: 18px;
  height: 12px;
  cursor: pointer;
}
.carousel .carousel__arrow.arrow-prev:before {
  transform: rotate(90deg);
}
.carousel .carousel__arrow.arrow-next:before {
  transform: rotate(-90deg);
}
.carousel .carousel__arrow.disabled::before {
  filter: brightness(2);
}
.disclaimer a {
  color: #fff;
}
/* novo destaque baladag4 2024 */

/*HEADER*/
.main_header{width: 100%;position: relative;float: left;padding: 5px 0; 
    color: #FFF;
        background: linear-gradient(-45deg, #EE7752, #E73C72, #23A6D5, #23D5AB);
        background-size:  400% 400%;
        position: relative;
        animation: change 10s ease-in-out infinite;}

.main_header .mobile{float: left;width: 20%;background: url(../img/icon-mobile.png) center center no-repeat;height: 58px;cursor: pointer;}
.main_header .logo{float: left;width: 60%;background: url(../img/logo-mobile.png) center center no-repeat;height: 58px;}
.main_header .search{float: left;width: 20%;background: url(../img/icon-search.png) center center no-repeat;height: 58px;}
     @keyframes change{
            0%{
                background-position: 0 50%;
            }
             50%{
                background-position: 100% 50%;
            }
             100%{
                background-position: 0 50%;
            }
        }
/* MENU :: NAVEGAÇÃO*/
.main_nav{float: left;width: 100%;
    position: relative;
    display: none;
    color: #FFF;
    background: linear-gradient(-45deg, #EE7752, #E73C72, #23A6D5, #23D5AB);
    background-size:  400% 400%;
    padding: 5px 10px; 
    animation: change 10s ease-in-out infinite;}
.main_nav ul{width: 100%; text-align: left;}
.main_nav ul li a{padding: 10px 0px;width: 50%;float: left;color:#000;}
.main_nav ul li a:hover{text-decoration: underline;}
.main_nav ul li:nth-last-of-type{margin-right:0;}
.main_nav .nav-reposivo-g4{display:block;}
@keyframes change{
            0%{
                background-position: 0 50%;
            }
             50%{
                background-position: 100% 50%;
            }
             100%{
                background-position: 0 50%;
            }
        }



.main_nav1{float: left;width: 100%;position: relative;display: block;
    color: #FFF;
        background: linear-gradient(-45deg, #EE7752, #E73C72, #23A6D5, #23D5AB);
        background-size:  400% 400%;
        position: relative;
        animation: change 10s ease-in-out infinite;
    padding: 0px 5px;}
.main_nav1 ul{width: 100%; text-align: center;}
.main_nav1 ul li a{width: 24.66666666666667%;float: left;color:#CCC;margin-right: 0%; text-align: center; font-size: 0.89em; }
.main_nav1 ul li a:hover{ text-decoration: none; background: #555555;}

/* MENU :: PESQUISA*/
.pesquisa{float: left;width: 100%;position: relative;display: none;background: #ECECEC;padding: 5px 10px;}
.pesquisa input[type="text"]{float: left;width: 78%;padding: 10px 5px;border: 0px solid #666666;border-radius: 5px 0px 0px 5px}
.pesquisa input[type="button"]{cursor: pointer;float: left;width: 19%;padding: 10px 5px;border: 0px solid #666666;border-radius:0px 5px 5px 0px;background: #ff007f url(../img/icon-search.png) center center no-repeat}
.pesquisa input[type="submit"]{cursor: pointer;float: left;width: 19%;padding: 10px 5px;border: 0px solid #666666;border-radius:0px 5px 5px 0px;background: #ff007f url(../img/icon-search.png) center center no-repeat}

.searchfull{display: none;}
.login{display: none;}

/*MKT*/
.mkt100{float: left;width: 100%;height: 90px; margin:10px;}
.mkt90{width:100%; height:70px;  display: block; margin:14px auto;}
.mkt90link{width:100%; height:15px;  display: block; margin:6px auto;}
.mkt970x250{width:100%; height:255px;  display: block; margin:7px auto;}
.mkt90a{width:320px; height:70px; display: block; margin:7px auto;}
.mkt90b{display: none;}
.mkt90c{display: none;}
.mkt90d{display: none;}
.mkt50{float: left;width: 45%;margin-right: 10%;height: 280px;}
.mkt50some{display:block;}
.mkt50:nth-of-type(2n+0){margin-right: 0;}
.mkt30{width: 100%;margin: 10px 0 7px 0;height: 90px;}
.mkt30some{display:block;}


/*BANNER*/
.banner{width: 100%;float: left;overflow: hidden;margin: 10px 0;height: 170px;}
.banner img{width: 100%;}

/*NEWSLETTER*/
.newsletter{width: 100%;padding: 10px;float: left;background: #ddd;display: none;}
.newsletter .title{width: 100%;text-align: center;margin-bottom: 10px;}
.newsletter .title span{font-weight: 400;font-size: 1.1em;}
.newsletter input[type="text"]{width: 65%;float: left;font-weight: bold;padding: 5px 6px;border: 0;background: #666666;}
.newsletter input[type="email"]{width: 65%;float: left;font-weight: bold;padding: 5px 6px;border: 0;background: #666666;}

.newsletter input[type="submit"]{width: 30%;float: right;background: #ff007f;color: #fff;font-weight: bold;height: 29px;border: 0;}
.newsletter input[type="submit"]:hover{background: #da007f;cursor: pointer;}


/*DESTAQUE :: ITEM*/
.main_destaque{float: left;position: relative;padding: 0px 10px;width: 100%;}
.main_destaque .item{float: left;width: 100%;margin: 10px 0 25px 0 ;cursor: pointer}
.main_destaque .escolhedestaque{width: 100%;padding: 10px 0; font-size: 1.1em;text-align: center;color: #d4007f;height: 50px;border-top: 5px solid #da007f;}
.main_destaque .text{font-size: 0.9em;text-transform: uppercase; color: var(--text-color);}
.main_destaque .text a{color: #000;}
.main_destaque .player{float: left;position: relative;width: 40%;background: url(../img/player.png) center left no-repeat;color: #e30630;margin-top: 10px;}
.main_destaque .player a{color: #e30630;}
.main_destaque .player:hover{cursor: pointer;text-decoration: underline; color: #e30630;}
.main_destaque .ouvir{font-weight: bold;margin-left: 30px;}
.main_destaque .ouvir a{ color:#e30630; }
.main_destaque .imgdestaque{float: left;width: 130px;margin-right: 10px;}
.main_destaque .imgdestaque img{width: 100%;}



/*NEWSLETTER FULL*/
.newsletterfull{width: 96%;margin: 0 2%;float: left;padding: 15px 0;text-align: center;}
.newsletterfull h1{font-size: 1.1em;color: #fff;float: left;width: 100%;padding: 5px 0;}
.newsletterfull input[type="text"]{padding: 5px 4px; border:0;width: 60%;}
.newsletterfull input[type="submit"]{padding: 5px 12px; border:0;float: right;min-width: 10%;background: #e30630;color: #fff;cursor: pointer;}
.newsletterfull input[type="submit"]:hover{background:  #da007f;}

/*TOP CARROSSEL*/
.box_carrossel{width: 100%; position: relative;padding: 4px 4px; background: #fff;overflow: hidden;}
.box_carrossel .nav{position: absolute; top: 0; padding: 0 5px; display: table; height: 150px; background: #ff007f; color: #fff; font-size: 1.3em; cursor: pointer;}
.box_carrossel .nav p{display: table-cell; vertical-align: middle;}
.box_carrossel .nav:hover{background: #d4007f;}
.box_carrossel .nav.back{left: 0;}
.box_carrossel .nav.forth{right: 0;}

/*TOP :: TITLE*/
.toptitle{float: left;width: 100%;text-align: center;border-top: 5px solid #555555;font-size: 1.3em;}
.toptitle .item{float: left;margin-right: 5%;width: 100%;padding: 10px 0 15px 0;}
.toptitle .item:nth-of-type(3n+0){margin-right: 0px; }

/*TOP ::ITEM*/
.box_carrossel .carrossel{list-style: none; float: left;width: 100%;}
.box_carrossel .carrossel .item-artistas{position: relative;float: left; width: 130px;background:none; margin: 0 40px;margin-bottom: 20px;}
.box_carrossel .carrossel .item-artistas .cantor{position: absolute;top: 0;left: 130px;font-size: 1.1em;font-weight: bold; margin:15px 0 0 0;}
.box_carrossel .carrossel .item-artistas .icon{position: absolute;right:20px;border-radius: 50% 50%;background: #ff007f;padding: 10px;color: #fff;}
.box_carrossel .carrossel .item-artistas img{ width:130px; height: 130px; border: 1px solid #ccc; padding: 4px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; -webkit-transition: all 150ms linear; -moz-transition: all 150ms linear; -o-transition: all 150ms linear; transition: all 150ms linear; margin:2px 0 0 0;
}
.box_carrossel .carrossel .item-artistas a{color:#000; font-size: 1.05em; }
.box_carrossel .carrossel .item-artistas p{position: absolute;top: 0;left: 130px;font-size: 0.80em; margin:40px 0 0 20px; color:#ccc;}

.box_carrossel .carrossel .item-lancamentos{height: 120px; width:100%;  }
.box_carrossel .carrossel .item-lancamentos img{float: left;width: 90px; max-height:90px;  -webkit-border-radius:8px; -moz-border-radius:8px;  border-radius:8px; margin:3px 6px 0 0;
                                                box-shadow: 2px 2px 2px #E8E8E8;
                                                -webkit-box-shadow: 2px 2px 2px #363636;
                                                -moz-box-shadow: 2px 2px 2px #363636;}
.box_carrossel .carrossel .item-lancamentos .artista{width:60%; float: left;}
.box_carrossel .carrossel .item-lancamentos .artista .cantor{float: left;  }
.box_carrossel .carrossel .item-lancamentos .artista .sendUp{float: left;font-size: 0.8em;}
.box_carrossel .carrossel .item-lancamentos a{color:#000; font-size: 1.05em;  }

.box_carrossel .carrossel .item-maisouvidas{height: 80px;}
.box_carrossel .carrossel .item-maisouvidas .mais{float: left;width: 100%;}
.box_carrossel .carrossel .item-maisouvidas .mais .cantor{float: left;width: 100%;}
.box_carrossel .carrossel .item-maisouvidas .mais .sendUp{float: left;font-size: 0.8em;}
.box_carrossel .carrossel .item-maisouvidas img{width: 10%;float: left;max-width: 38px;}
.box_carrossel .carrossel .item-maisouvidas .mais{float: left;width: 90%;}
.box_carrossel .carrossel .item-maisouvidas a{color:#000;  }

/*PAGINA CATEGORIA*/
.categoria{width: 100%;padding: 10px;margin: 10px 0;background-color: var(--background-color-hee);text-align: center;}
.categoria .titlecategoria{font-size: 1.5em;padding: 0 0 10px 0; color: var(--text-color);}
.categoria .textsubcategoria{font-size: 0.9em; color: var(--text-color);}
.categoria .social{width: 100%;}
.categoria .social .fb-like{padding: 15px;}

/*PAGINA CATEGORIA :: PROPAGANDA/SIDEBAR */
.categoriapropaganda{float: left;width: 100%;margin: 0;}
.categoriapropaganda .mkt50{float: left;width: 100%;height: 280px; margin:10px 5px 35px 5px;}
.sidebar{display: none;}

/*PAGINA CATEGORIA :: ARTISTAS */
.list-artistas{float: left;width: 100%;}
.list-artistas .item{position: relative;margin-bottom: 70px;padding: 15px 0;}
.list-artistas .item h1{font-size: 1.3em;margin-bottom: 20px;}
.list-artistas .item a{color: var(--text-color);}
.list-artistas .item .autor span{font-size: 0.9em;margin-right: 10px;}
.list-artistas .item .detalhes{float: left;font-size: 0.8em;margin-bottom: 10px;}
.list-artistas .item .detalhes ul{float: left;width: 100%;}
.list-artistas .item .detalhes ul li{float: left;margin-right: 5px; color: var(--text-color);}
.list-artistas .item .player{width: 100%;float: right;background-color: var(--background-color-hee);border-radius: 5px 5px;padding: 5px 20px 5px 20px;text-align: center;color: #e30630;cursor: pointer;}
.list-artistas .item .player img{margin-right: 5px;}

/*PAGINACAO*/
.pagination{width: 100%;float: left;}
.pagination .go:hover, .pagination .back:hover{background: #da007f;color: #fff;cursor: pointer;}
.pagination .back{float: left;max-width: 45%;padding: 10px 20px;border: 1px solid #ECECEC;}
.pagination a{color: var(--text-color);}
.pagination .go{float: right;max-width: 45%;padding: 10px 20px;border: 1px solid #ECECEC;}
.pagination ul{float: left;width: 80%;padding: 10px 0;text-align: center;display: none;}
.pagination ul li{float: left;width: 16.66666666666667%;cursor: pointer;}
.pagination ul li:hover{color: #e30630;}


/*PAGINA :: SINGLE CD*/
.single{float: left;width: 100%;margin: 20px 0 0 0;padding: 5px 0;}


/*PAGINA ::SINGLE-CD :: INTERACAO*/
.single .interacao{float: left;width: 100%;background-color: var(--background-color);padding: 5px 0;text-align: center;color: #B3B3B3;  border:1px solid #EEEEEE; }
.single .interacao .date{font-size: 0.9em;display: block;margin-bottom: 5px;}
.single .interacao .download{font-size: 0.9em;display: block;margin-bottom: 5px;}
.single .interacao .interatividade{cursor: pointer;}
.single .interacao .social{float: left;padding: 5px 0;background: none;margin-bottom: 10px;}
.single .interacao .like{float: left;width: 100%;margin: 0;margin: 5px 0;}
.single .interacao .like ul{width: 100%;border-top: 3px solid #00cc00;margin: 0;}
.single .interacao .like ul li{display: inline-block;margin-right: 10px;margin-top: 0px;cursor: pointer;width: 33%;}

/*SHAREBOX*/
.sharebox{float: left; width: 100%; padding: 0; text-align: center;}
.sharebox li{display: inline-block; background: #ccc; margin: 0; background-position: left 10px center; background-repeat: no-repeat; background-size: auto 60%;width: 100%;}
.sharebox a{float: left; padding: 10px 20px 10px 40px; color: #fff;}
.sharebox .count{float: right; background: rgba(0,0,0,0.5); padding: 10px 15px; color: #fff;}

.sharebox .facebook{background-image: url(boot/social/facebook_pix.png); background-color: #45619D;}
.sharebox .facebook:hover{background-color: #778FC4;}
.sharebox .google{background-image: url(boot/social/google_pix.png); background-color: #DD4B39;}
.sharebox .google:hover{background-color: #E77D72;}
.sharebox .twitter{background-image: url(boot/social/twitter_pix.png); background-color: #55ACEE;}
.sharebox .twitter:hover{background-color: #9ED0F5;}



 
  
    
    

/*PAGINA ::SINGLE-CD :: INFORMACOES*/
.single-info .mkt100{float: left;width: 336px; height:280px;  margin:10px 3px 35px 3px;}
.single-info .mkt100some{display:block; }
.single-info .text{margin-bottom: 20px;display: block;color: #B3B3B3;text-align: center; overflow: auto; height:80px;}
.single-info .player{width: 100%;text-align: center;}
.single-info .bt-large.ouvir{width: 100%;padding: 10px 15px;font-size: 1.5em;background: #ff007f;border: 0;color: #fff;cursor: pointer;border-radius: 10px 10px;display: block;margin-bottom: 25px;}
.single-info .bt-large.ouvir2{width: 100%;padding: 10px 15px;font-size: 1.5em;background: #ff007f;border: 0;color: #fff;cursor: pointer;border-radius: 10px 10px;display: block;margin-bottom: 25px; height:80px; text-align: center;}

.single-info .bt-large.baixar{width: 100%;padding: 10px 15px;font-size: 1.5em;background:#00b200;border: 0;color: #fff;cursor: pointer;border-radius: 10px 10px;display: block;}

/*PAGINA ::SINGLE-CD :: MUSIC*/
.single-music{float: left;width: 100%;background-color: var(--background-color-hee);padding: 20px 10px;  overflow: auto; }
.single-music h2{ color:#ff007f; font-weight: bold; }
.single-music a{ color:#ff007f; text-align: center; font-size: 1.40em;}
.single-music .single-relacio{text-align: center; font-size: 1.1em; color: #999999;}
.single-music .music span{font-size: 1.02em; color: var(--text-color);}
.single-music .music img{margin-bottom: -5px;margin-right: 5px;cursor: pointer;}
.single-music .music .controll{}
.single-music .music .controll .bt-small.baixar{width: 45%;padding: 3px 5px;font-size: 1em;background: #00b200;border: 0;color: #fff;cursor: pointer;border-radius: 10px 10px;display: inline-block;}
.single-music .music .controll .bt-small.ouvir{width: 45%;padding: 3px 5px;margin-right: 5%;font-size: 1em;background: #ff007f;border: 0;color: #fff;cursor: pointer;border-radius: 10px 10px;display: inline-block;margin-bottom: 5px;}

/*PAGINA ::SINGLE-CD :: LIKE*/
.single-like{float: left;width: 100%;padding: 15px 0;margin: 5px 0;text-align: center;}
.single-like h1{font-size: 1.8em;text-transform: uppercase;margin-bottom: 10px;}
.single-like h1 .black{color: var(--text-color);}
.single-like h1 .pink{color: #ff007f;}
.single-like h2{font-size: 1.4em;color: #777;}


/*PAGINA ::SINGLE-AUTOR*/
.single-autor{float: left;width: 100%; z-index: 888;margin-top: 15px;}
.single-autor .perfil{width: 100%;background: #333;text-align: center;padding-top: 10px;}
.single-autor .bg{display: none;}
.single-autor .perfil h1{font-size: 1.6em;color: #fff;margin-bottom: 5px;}
.single-autor .perfil h1 img{margin-left: 6px;}
.single-autor .perfil .follow{margin-bottom: 50px;}
.single-autor .perfil .follow .bt-small{float: left;width: 50%;margin-left: 15%;padding: 3px 5px;font-size: 1.1em;background: #ff007f;border: 0;color: #fff;cursor: pointer;border-radius: 10px 10px;display: inline-block;}
.single-autor .perfil .follow .count{float: left;width: 20%;background: url(../img/bg-count.png) center center no-repeat;height: 21px;margin-top: 4px;color: #fff;}

/*PAGINA ::SINGLE-AUTOR :: SEGUIDORES E ACESSOS*/
.single-autor .perfil .score{width: 100%;background: #111;color: #8A8A8A;padding: 1px 0;}
.single-autor .perfil .score .item{display: inline-block;margin: 5px 0px;padding-right: 10px;border-right: 3px solid #8A8A8A;}
.single-autor .perfil .score .item:nth-of-type(2n+0){border-right: 0px solid #333;padding-right:0px;margin-left: 10px;}
.single-autor .perfil .score .item b{font-size: 1.5em;display: block;}

/*PAGINA ::SINGLE-AUTOR :: SOCIAL*/
.single-autor .social{width: 100%;padding: 10px 15px;background: #666666;}
.single-autor .social ul{width: 100%;text-align: center;}
.single-autor .social .facebook{padding: 10px 20px;background: #1e2ed0;display: inline-block}
.single-autor .social .facebook:hover{cursor: pointer;background: #4081ff}
.single-autor .social .twitter{ padding: 10px 20px;background: #26c9ff;display: inline-block}
.single-autor .social .twitter:hover{cursor: pointer;background:#26acff }
.single-autor .social .googleplus{padding: 10px 15px;background: #ff9326;display: inline-block}
.single-autor .social .googleplus:hover{cursor: pointer;background: #ff7527}

/*PAGINA ::SINGLE-AUTOR :: ESCOLHER*/
.single-escolher{width: 100%;float: left;}
.single-escolher ul{text-align: center;padding: 15px 0;}
.single-escolher ul li{display: inline;margin-right: 20px;font-size: 1.1em;}
.single-escolher ul li.active{color: #ff007f;font-weight: bold;}
.single-escolher a{color: var(--text-color);font-weight: bold;}
.single-escolher .contratar{width: 90%;margin: 0 5% 15px 5%;float: left; padding: 15px 20px;background: #00b200;color: #fff;font-weight: bold;text-align: center;border-radius: 10px 10px;cursor: pointer;}

/*PAGINA ::SINGLE-AGENDA*/
.single-agenda{width: 100%;float: left;}
.single-agenda .date{float: left;width: 100%;}
.single-agenda .date .mes{width: 100%;background:#ff007f;font-size: 1.6em;color: #fff;text-align: center;}
.single-agenda .date .dia{width: 100%;font-size: 2.2em;text-align: center;background: #fff;}
.single-agenda .artista{float: left;width: 100%;border-bottom: 2px solid #aaa;margin-bottom: 15px;padding: 0 5px;}
.single-agenda .artista .cantor{font-size: 1.7em;}
.single-agenda .artista .evento{margin-bottom: 15px;color: #bbb;}
.single-agenda .artista .evento ul{}
.single-agenda .artista .evento ul li{display: inline;margin-right: 10px;}

/*PAGINA ::SINGLE-VIDEO*/
.single-video{float: left;width: 100%;}
.single-video .item{float: left;width: 100%;text-align: center;margin-bottom: 25px;}
.single-video .item img{width: 100%;max-width: 245px;}
.single-video a{color: #808080; }
.single-video .item span{font-size: 1.2em;display: block;color: #808080;}


 /*PAGINA ::SINGLE-CONTRATE*/
    .single-contrate{width: 100%; float: left;}
    .single-contrate h1{font-size: 1.1em; color: var(--text-color); margin:10px 0 0 0; text-align: center;}
    .single-contrate .item h2{font-size: 2.1em; color:#FF007F; margin:3px 0 0 0; text-align: center;}
    .single-contrate .item p{font-size: 1.30em; color: var(--text-color); margin:3px 0 4px 0; text-align: center;}
    .single-contrate .item33a p{font-size: 0.80em; color: var(--text-color); margin:3px 0 4px 0; text-align: center;
      line-height: 1.6;
      margin-bottom: 15px;}

/* CODIGO LARI *
/* Container principal dos top artistas LARI */
.top-artistas {
  max-width: 1200px;
  margin: 2rem auto;
  padding: 0 1rem;
}

/* Card do artista */
.top-artistas-box {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: 12px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.top-artistas-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* Número do ranking */
.top-artistas-box-numero {
  min-width: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.top-artistas-box-numero span {
  font-size: 2.5rem;
  font-weight: 700;
  background: linear-gradient(135deg, #ff6b6b, #f53b57);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

/* Top 3 estilização especial */
.top-artistas-box:nth-child(1) .top-artistas-box-numero span {
  background: linear-gradient(135deg, #ffd700, #ffa502);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.top-artistas-box:nth-child(2) .top-artistas-box-numero span {
  background: linear-gradient(135deg, #ffd700, #ffa502);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.top-artistas-box:nth-child(3) .top-artistas-box-numero span {
  background: linear-gradient(135deg, #c0c0c0, #808080);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.top-artistas-box:nth-child(4) .top-artistas-box-numero span {
  background: linear-gradient(135deg, #cd7f32, #8b4513);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Informações do artista */
.top-artistas-box-nome {
  flex: 1;
}

.top-artistas-box-nome h1 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.top-artistas-box-nome h1 a {
  color: var(--text-color);
  text-decoration: none;
  transition: color 0.2s ease;
}

.top-artistas-box-nome h1 a:hover {
  color: #ff6b6b;
}

.top-artistas-box-nome .acesso {
  font-size: 0.875rem;
  color: var(--text-color);
  opacity: 0.7;
}

/* Foto do artista */
.top-artistas-box-foto {
  position: relative;
  display: flex;
  align-items: center;
}

.top-artistas-box-foto img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box,
              linear-gradient(45deg, #ff6b6b, #f53b57) border-box;
  transition: transform 0.3s ease;
}

.top-artistas-box:hover .top-artistas-box-foto img {
  transform: scale(1.05);
}

/* Indicador de posição (seta) */
.top-artistas-box-ceta {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-right: 1rem;
  font-size: 0.875rem;
}

.top-artistas-box-ceta p,
.top-artistas-box-ceta h2 {
  color: var(--text-color);
  opacity: 0.7;
}

/* Linha divisória */
.top-artistas-box-linha {
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.05), transparent);
  margin-top: 1rem;
}
/* FIM CODIGO LARI */
 
  /*PAGINA ::TOP 100 :: */
 .top-100{float: left;width: 100%;  }
 .top-100-box{width: 100%; float: left; }
 
 .box_carrossel-100 .carrossel-100{list-style: none; float: left;  }
 .box_carrossel-100 .carrossel-100 .item-artistas-100{position: relative;float: left; background:none;margin-bottom: 6px;}
 .box_carrossel-100 .carrossel-100 .item-artistas-100 .cantor{position: absolute;top: 0;left: 70px;font-size: 1.1em;font-weight: bold; margin:7px 0 0 0;}
 .box_carrossel-100 .carrossel-100 .item-artistas-100 .icon{position: absolute;right:10px;border-radius: 50% 50%;background: #ff007f;padding: 3px;color: #fff;}
 .box_carrossel-100 .carrossel-100 .item-artistas-100 img{ width:80px; height: 80px; border: 1px solid #ccc; padding: 4px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; -webkit-transition: all 150ms linear; -moz-transition: all 150ms linear; -o-transition: all 150ms linear; transition: all 150ms linear; margin:0 auto;
                        
}
 .box_carrossel-100 .carrossel-100 .item-artistas-100 a{color:#000;  }
 .box_carrossel-100 .carrossel-100 .item-artistas-100 p{position: absolute;top: 0;left: 130px;font-size: 0.80em; margin:40px 0 0 20px; color:#ccc;}

 .top-100-box-nome{float: left;  padding: 5px;  width:55%; }
 .top-100-box-nome h1{ font-size: 1em; color: var(--text-color); margin:10px 0 0 0; }
 .top-100-box-nome a{color: var(--text-color);}
 .top-100-box-nome p{ font-size: 0.70em; color:#FF007F; margin: 7px 0 0 0;}
 .top-100-box-nome acesso{ font-size: 1.1em; color:#FF007F; margin: 7px 0 0 0;}
 
 .top-100-box-play{float:right;  margin:0 8px 2px 0;}
 .top-100-box-play p{text-align: center; color:#999;}
 .top-100-box-play-butao{width:50px; margin: 20px 0 0 0;padding: 5px;font-size: 0.90em;background-color:  var(--background-color-hee);border: 0;color: #fff;cursor: pointer;border-radius: 10px 10px;}
 .top-100-box-play-butao p{text-align: center; color: #fff;}
 
 
 /*PAGINA :: SOM AUTOMOTIVO*/
.single-automotivo{float: left;width: 100%;margin-bottom: 25px;}
.single-automotivo .auto img{width: 100%;margin-bottom: 5px;max-width: 940px;}
.single-automotivo .auto .desc{width: 96%;margin: 0 2%;}

 /*PAGINA :: SOM AUTOMOTIVO :: SIDEBAR*/
.sidebar-auto{display: block; margin: 0 0 4px 3px; }
 
 /*PAGINA :: SOM AUTOMOTIVO :: RELACIONADOS*/
.automotivo-relacionados{float: left;width: 100%;background: #ddd;text-align: center;}
.automotivo-relacionados .item{width: 96%;margin: 0 auto;margin-bottom: 30px;}
.automotivo-relacionados .item img{width: 100%;max-width: 370px;}
.automotivo-relacionados .item .text{width: 100%;text-align: left;margin: 0 auto;max-width: 370px;}
.automotivo-relacionados h1{font-size: 1.6em;color: #ff007f;margin-bottom: 10px;}






/*PAGINA :: SINGLE PERFIL*/

/*PAGINA :: SINGLE PERFIL :: CAPA / ACAO */
.single-perfil .capa img{float: left;width: 100%;margin: 15px 0;  max-height:150px; }
.single-perfil .altera-capa h1{width: 100%;text-align: center;padding: 10px 0;}
.single-perfil .altera-capa h1 a{color: var(--text-color);font-size: 1.1em;}
.single-perfil .altera-capa .imgicon{margin-top: 5px;margin-right: 5px;}

/*PAGINA :: SINGLE PERFIL :: MENSAGEM DE AVISO*/
.msg-accept{width: 100%;float: left;background: #bfffbf url(../img/msg-verificada.png) 7px center no-repeat;background-size: 26px 24px;font-size: 1.2em;color: #008c00;padding:10px 0px 10px 40px;border-radius: 6px 6px;margin: 10px 0;}
.msg-erro{width: 100%;float: left;background: #ffb399 url(../img/msg-erro.png) 7px center no-repeat;background-size: 26px 24px;font-size: 1.2em;color:#ff2626;padding:10px 0px 10px 40px;border-radius: 6px 6px;margin: 10px 0;}




/*PAGINA :: SINGLE PERFIL :: FORMULARIO*/
.single-perfil form{}
.single-perfil form label{width: 100%;padding: 5px 0;margin-bottom: 10px;float: left;}
.single-perfil form label span{font-size: 1.1em;display: block;color:#777;}
.single-perfil form label input[type="text"],
.single-perfil form label input[type="date"],
.single-perfil form label input[type="password"],
.single-perfil form label select{width: 100%;display: block;padding: 7px 5px;color: #777;border-radius: 4px 4px;border: 1px solid #C8C8C8;}
.single-perfil form input[type="submit"]{float: left;width: 100%;padding: 6px 0;font-size: 1.2em;color: #fff;background: #ff007f;margin-bottom: 20px;border: 0;border-radius: 5px 5px;}






  

/*PAGINA :: ABIR CONTA :: PAGINA*/
.abri-conta{width: 100%; float:left; }
.abri-conta-box{width: 97%; margin: 0 auto; }
/*PAGINA :: ABIR CONTA :: FORMULARIO*/
.abri-conta-box form{}
.abri-conta-box form label{width: 100%;padding: 5px 0;margin-bottom: 10px;float: left;}
.abri-conta-box form label span{font-size: 1.1em;display: block;color:#777;}
.abri-conta-box form label input[type="text"],
.abri-conta-box form label input[type="password"],
.abri-conta-box form label select{width: 100%;display: block;padding: 7px 5px;color: #777;border-radius: 4px 4px;border: 1px solid #C8C8C8;}
.abri-conta-box form input[type="submit"]{float: left;width: 100%;padding: 6px 0;font-size: 1.2em;color: #fff;background: #ff007f;margin-bottom: 20px;border: 0;border-radius: 5px 5px;}
.abri-conta-box .form-field{display: block; margin-bottom: 10px; font-size: 1.1em; color:#777;}
.abri-conta-box .form-check{ margin-bottom: 10px;}
.abri-conta-box .form-check a{color:#2DB200;}
.abri-conta-box form textarea{padding: 10px; border: 1px #ccc solid; width: 100%; color: #555;}



/*PAGINA :: ABIR CONTA :: PAGINA*/
.pesquisa-box{width: 100%; float:left;   }
.pesquisa-box h1{font-size: 1.50em;color: var(--text-color); text-align:left; margin: 14px 0 2px 3px;}
.pesquisa-box .tigline{color:#737573; margin: 0 0 0 3px;}
.pesquisa-box .url{color:#d502a6; font-size: 0.82em; margin: 0 0 0 3px;}
.pesquisa-box a{color: var(--text-color);}
 
 

/* RODAPÉ */

footer {
  
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  gap: 32px;
  padding: 32px;
  color: var(--text-color);
  margin-top: 64px;
  border-top: 1px solid  rgba(114, 114, 114, 0.2);
  align-content: center;
}
footer a {
  position: relative;
  z-index: 11;
  pointer-events: auto;
}

footer .social-networks li a {
  display: flex;
  align-items: center;
}

footer .social-networks li a i {
  margin-right: 8px;
}

footer li {
  list-style: none;
  line-height: 24px;
}

footer li + li {
  margin-top: 4px;
}

footer a {
  text-decoration: none;
  color: var(--text-color);
}

footer h3 {
  font-size: 1.2rem;
  font-weight: normal;
  margin-bottom: 12px;
  color: var(--text-color);
}



/*PLAYER FIX*/
.playerfix{
  width: 100%; z-index: 9999999999999; position: fixed;height: 50px;bottom: 0;  
  z-index: 100;
  pointer-events: none; /* Permite cliques através do player quando necessário */
  

 
  position: relative;

  }




/*CODIGO LARI MOBILE  */

/* Responsividade */
@media (max-width: 768px) {
  .top-artistas-box {
      padding: 0.75rem;
      gap: 1rem;
  }

  .top-artistas-box-numero span {
      font-size: 2rem;
  }

  .top-artistas-box-nome h1 {
      font-size: 1.1rem;
  }

  .top-artistas-box-foto img {
      width: 60px;
      height: 60px;
  }

  .top-artistas-box-ceta {
      display: none;
  }
}

@media (max-width: 480px) {
  .top-artistas-box {
      flex-wrap: wrap;
      justify-content: center;
      text-align: center;
      gap: 0.5rem;
  }

  .top-artistas-box-numero {
      min-width: 40px;
  }

  .top-artistas-box-nome {
      width: 100%;
      order: 2;
  }

  .top-artistas-box-foto {
      order: 1;
  }

  .top-artistas-box-linha {
      width: 100%;
  }
}
/*FIM CODIGO LARI MOBILE */



/*LAYOUT RESPONSIVO - @MEDIA*/
/*310PX*/
@media(min-width:19.375em){
    .bg-rosa{ width: 100%; height: 300px;}

    .banner{height: 220px;width: 100%;}
    .mkt30{float:left;width: 336px; margin: 2px 0 2px 0;height: 280px;}
    .mkt30some{display:block;}
  
   
    .single-info .mkt100some{display:none; }
    
 



.mkt90{ width: auto; height: auto; display: block; margin: 7px auto;}
.mkt90a{width:310px; height:70px; background:#ccc; display: block; margin:7px auto;}
.mkt90b{display: none;}
.mkt90c{display: none;}
.mkt90d{display: none;}



  /*PAGINA ::SINGLE :: INFORMACOES*/
    .single-info .bt-large.ouvir{width: 75%;display: inline-block;margin-bottom: 0;margin-right: 9%;}
      .single-info .bt-large.ouvir2{width: 75%;display: inline-block;margin-bottom: 0;margin-right: 9%;}
    .single-info .bt-large.baixar{width: 75%;display:inline-block;}
    
    .single-info .mkt100{float: left;width: 336px; height:280px; margin:10px 5px 35px 5px;}
    
    

}





/*437PX*/
@media(min-width:27.3125em){
    .bg-rosa{ width: 100%; height: 280px;}
    
    .banner{height: 220px;width: 100%;}
    .mkt30{float:left;width: 336px; margin: 2px 0 2px 0;height: 280px;}
    .mkt30some{display:block;}
    
    
     .main_nav1{width: 100%;position: relative;display: block;padding: 0px 10px; margin: 0 auto;}
    .main_nav1 ul{width: 100%; text-align: center;}
    .main_nav1 ul li a{width: 24.66666666666667%;float: left;color:#CCC;margin-right: 0%; text-align: center; font-size: 1.0em;}
    .main_nav1 ul li a:hover{border-top: 5px solid #555555;padding: 5px 0 0 0;text-decoration: none;}

    /*TOP ::ITEM*/
    .box_carrossel .carrossel{padding: 10px;}
    .box_carrossel .carrossel .item-artistas{width: 170px;}
    .box_carrossel .carrossel .item-artistas .cantor{left: 150px;}
    .box_carrossel .carrossel .item-artistas .icon{right:70px;}


    .box_carrossel .carrossel .item-lancamentos img{float: left;width: 110px;}
    .box_carrossel .carrossel .item-lancamentos .artista{width: 70%;float: left;}
    .box_carrossel .carrossel .item-lancamentos .artista .cantor{float: left;font-size: 1.2em;}
    .box_carrossel .carrossel .item-lancamentos .artista .sendUp{float: left;font-size: 1em;} 
    
    
     .single-contrate{width: 100%; float: left;}
    .single-contrate h1{font-size: 1.2em; color:#999; margin:10px 0 0 0; text-align: center;}
    .single-contrate .item h2{font-size: 3.1em; color:#FF007F; margin:3px 0 0 0; text-align: center;}
    .single-contrate .item p{font-size: 1.20em; color:#000; margin:3px 0 4px 0; text-align: center;}
    
.mkt90{width:100%;margin:7px auto; height:auto;  display: block;}
.mkt90a{width:320px;margin:7px auto; height:70px; background:#ccc; display: block;}
.mkt90b{display: none;}
.mkt90c{display: none;}
.mkt90d{display: none;}
    
   
 
 
 /*TOP ::100*/
    .box_carrossel-100 .carrossel-100{padding: 4px;}
    .box_carrossel-100 .carrossel-100 .item-artistas-100{width: 170px;}
    .box_carrossel-100 .carrossel-100 .item-artistas-100 .cantor{left: 150px;}
    .box_carrossel-100 .carrossel-100 .item-artistas-100 .icon{right:70px;}
    
    .box_carrossel-100 .carrossel-100 .item-artistas-100{position: relative;float: left; width: 70px;background: none;}
    .box_carrossel-100 .carrossel-100 .item-artistas .cantor{position: absolute;top: 0;left: 130px;font-size: 1.25em;font-weight: bold; margin:10px 0 0 0;  }
    .box_carrossel-100 .carrossel-100 .item-artistas-100 .icon{position: absolute;right:10px;border-radius: 50% 50%;background: #ff007f;padding: 4px;color: #fff;}
    .box_carrossel-100 .carrossel-100 .item-artistas-100 img{ width:70px; height:70px; border: 1px solid #ccc; padding: 4px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; -webkit-transition: all 150ms linear; -moz-transition: all 150ms linear; -o-transition: all 150ms linear; transition: all 150ms linear; margin:2px 0 0 0;}
    .box_carrossel-100 .carrossel-100 .item-artistas-100 a{color:#000; font-size: 1.05em; }
    
    .top-100-box-nome{float: left;  padding: 5px; width:70%;}
    .top-100-box-nome h1{ font-size: 1.0em; color: var(--text-color); margin:10px 0 0 0; }
    .top-100-box-nome a{color: var(--text-color);}
    .top-100-box-nome p{ font-size: 0.70em; color:#FF007F; margin: 7px 0 0 0;}
    .top-100-box-nome acesso{ font-size: 1.1em; color:#FF007F; margin: 7px 0 0 0;}
 
    .top-100-box-play{float:right;  margin:0 8px 2px 0; }
    .top-100-box-play p{text-align: center; color:#999;}
    .top-100-box-play-butao{width:40px; margin: 30px 0 0 0;padding: 5px;font-size: 0.70em;background-color:  var(--background-color-hee); border: 0;color: #fff;cursor: pointer;border-radius: 10px 10px;}
    .top-100-box-play-butao p{text-align: center; color: #fff;}
    
    
    .single-info .mkt100some{display:none; }
    
    
    
      /*PAGINA ::SINGLE :: INFORMACOES*/
    .single-info .bt-large.ouvir{width: 65%;display: inline-block;margin-bottom: 0;margin-right: 9%;}
      .single-info .bt-large.ouvir2{width: 65%;display: inline-block;margin-bottom: 0;margin-right: 9%;}
    .single-info .bt-large.baixar{width: 65%;display:inline-block;}
    
    .single-info .mkt100{float: left;width: 80%;height:280px;  margin:10px 5px 35px 5px;}
    
    
    

}



/*600PX*/
@media(min-width:37.5em){
    
    .bg-rosa{ width: 100%; height: 280px;}

    .banner{height: 290px;width: 40%;}
    .mkt30{float: right;width: 336px; margin: 10px 0 7px 0;height: 280px;}
    .mkt30some{display:block;}

    
    

    .main_destaque .item{float: left;width: 45%;margin-right: 10% ;}
    .main_destaque .item:nth-of-type(2n+0){margin-right: 0;}

    /*NEWSLETTER FULL*/
    .newsletterfull{width: 96%;margin: 0 2%;float: left;padding: 15px 0;text-align: center;}
    .newsletterfull h1{font-size: 1.1em;color: #fff;float: left;width: 25%;padding: 5px 0;margin-right: 10px;}
    .newsletterfull input[type="text"]{float: left;padding: 5px 4px; border:0;width: 50%;margin-right: 5px;}
     .newsletterfull input[type="email"]{float: left;padding: 5px 4px; border:0;width: 50%;margin-right: 5px;}
    .newsletterfull input[type="submit"]{padding: 5px 12px; border:0;float: right;background: #e30630;color: #fff;cursor: pointer;}
    .newsletterfull input[type="submit"]:hover{background:  #da007f;}

    .box_carrossel .carrossel .item-maisouvidas img{margin-right: 10px;}

    
.mkt90{width:100%;margin:7px auto; height:auto;  display: block;}
.mkt90a{display: none;}
.mkt90b{width:470px;margin:7px auto; height:70px;  display: block;}
.mkt90c{display: none;}
.mkt90d{display: none;}

    /*PAGINAÇÃO CATEGORIA*/
    .pagination .back{float: left;padding: 10px 20px;border: 1px solid #ECECEC;}
    .pagination .go{float: right;padding: 10px 20px;border: 1px solid #ECECEC;}
    .pagination ul{float: left;display: block;width: 356px;}
    .pagination ul li{float: left;width: 16%;cursor: pointer;}
    .pagination ul li:hover{color: #e30630;}



   /*PAGINA ::SINGLE-CD :: INTERACAO*/
    .single .interacao .social{width: 100%;}
    .single .interacao .like ul{width: 50%;margin: 0 25%;}

    /*PAGINA ::SINGLE :: INFORMACOES*/
    .single-info .bt-large.ouvir{width: 45%;display: inline-block;margin-bottom: 0;margin-right: 9%;}
      .single-info .bt-large.ouvir2{width: 45%;display: inline-block;margin-bottom: 0;margin-right: 9%;}
    .single-info .bt-large.baixar{width: 45%;display:inline-block;}
    
    .single-info .mkt100{float: left;width: 80%;height:280px;  margin:10px 5px 35px 5px;}
    
 

    /*PAGINA ::SINGLE :: MUSIC*/
    .single-music h2{ color:#ff007f; font-weight: bold; }
    .single-music a{ color:#ff007f; text-align: center; font-size: 1.92em;}
    .single-music .music{margin-bottom: 4px;}
    .single-music .music span{float: left;font-size: 1.02em;width: 65%;}
    .single-music .music .controll{}
    .single-music .music .controll .bt-small.baixar{width: 10%;padding: 3px 3px;font-size: 0.95em;background: #00b200;border: 0;color: #fff;cursor: pointer;border-radius: 10px 10px;display: inline-block;}
    .single-music .music .controll .bt-small.ouvir{width: 10%;padding: 3px 3px;margin-right: 4%;font-size: 0.95em;background:#ff007f;border: 0;color: #fff;cursor: pointer;border-radius: 10px 10px;display: inline-block;margin-bottom: 4px;}

    /*PAGINA ::SINGLE-AUTOR*/
    .single-autor .perfil .follow .bt-small{width: 30%;margin-left: 25%;}

    /*PAGINA ::SINGLE-AGENDA*/
    .single-agenda{width: 96%;float: left;margin: 0 2%;}
    .single-agenda .agenda{float: left;width: 45%;margin-right: 10%;}
    .single-agenda .agenda:nth-of-type(2n+0){margin-right: 0%;}

    /*PAGINA ::SINGLE-VIDEO*/
    .single-video .item{width: 45%;margin-right: 10%;}
    .single-video .item:nth-of-type(2n+0){margin-right: 0%;}
    
    
    /*PAGINA ::SINGLE-CONTRATE*/
    .single-contrate{width: 100%; float: left;}
    .single-contrate h1{font-size: 1.1em; color:#999; margin:10px 0 0 0; text-align: center;}
    .single-contrate .item h2{font-size: 5.1em; color:#FF007F; margin:3px 0 0 0; text-align: center;}
    .single-contrate .item p{font-size: 2.40em; color:#000; margin:3px 0 4px 0; text-align: center;}
    
   
    
  /*TOP 100 */
    .box_carrossel-100 .carrossel-100 .item-artistas-100{position: relative;float: left; width: 90px;background: none;}
    .box_carrossel-100 .carrossel-100 .item-artistas .cantor{position: absolute;top: 0;left: 130px;font-size: 1.25em;font-weight: bold; margin:10px 0 0 0;  }
    .box_carrossel-100 .carrossel-100 .item-artistas-100 .icon{position: absolute;right:10px;border-radius: 50% 50%;background: #ff007f;padding: 10px;color: #fff;}
    .box_carrossel-100 .carrossel-100 .item-artistas-100 img{ width:90px; height:90px; border: 1px solid #ccc; padding: 4px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; -webkit-transition: all 150ms linear; -moz-transition: all 150ms linear; -o-transition: all 150ms linear; transition: all 150ms linear; margin:2px 0 0 0;}
    .box_carrossel-100 .carrossel-100 .item-artistas-100 a{color:#000; font-size: 1.05em; }
    
    .top-100-box-nome{float: left;  padding: 5px;  width:70%;}
    .top-100-box-nome h1{ font-size: 1.4em; color: var(--text-color); margin:10px 0 0 0; }
    .top-100-box-nome a{color: var(--text-color);}
    .top-100-box-nome p{ font-size: 0.87em; color:#FF007F; margin: 7px 0 0 0;}
    .top-100-box-nome acesso{ font-size: 1.1em; color:#FF007F; margin: 7px 0 0 0;}
 
    .top-100-box-play{float:right;  margin:0 8px 2px 0; }
    .top-100-box-play p{text-align: center; color:#999;}
    .top-100-box-play-butao{width:60px; margin: 30px 0 0 0;padding: 5px;font-size: 0.80em;background-color:  var(--background-color-hee);border: 0;color: #fff;cursor: pointer;border-radius: 10px 10px;}
    .top-100-box-play-butao p{text-align: center; color: #fff;}
    
    
    /*PAGINA :: SOM AUTOMOTIVO :: RELACIONADOS*/
    .automotivo-relacionados .item{float: left;width: 45%;margin-right: 10%;}
    .automotivo-relacionados .item:nth-of-type(2n+0){margin-right: 0%;}
    
    
    
    /*PAGINA :: SINGLE PERFIL*/
  
    
    
    

}







/*768PX*/
@media(min-width:48em){
    .bg-rosa{ width: 100%; height: 250px;}
    
    

    /*HEADER*/
    .main_header .main_logo{float: left;width: 10%;background: url(../img/logo.png) right center  no-repeat;height: 53px;margin-bottom: 15px;}
    .main_header .main_search{float: left;width: 100%; margin: 7px 0 0 0;text-align: center;}
    .main_header .main_search input[type="search"]{width: 100%;-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;padding: 7px 5px;border: 0;}
    .main_header .main_login{width: 100%;margin: 15px 0;}
    .main_header .main_login ul{float: right;width: 35%;margin: 7px 0 0 0;}
    .main_header .main_login ul li{float: left;width: 100%;padding: 5px 5px;margin-right:10%;text-align: center;cursor: pointer;background: #fff;-webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px;}

    /*MOBILE*/
    .mobileaction{padding: 3px 0;}
    
    
    .banner{height: 290px;width: 50%;}

    .mkt30{float: right;width:336px; margin:10px 15px 4px 15px;height: 280px;}
    .mkt30some{display:block;}

    /*NEWSLETTER FULL*/
    .newsletterfull input[type="text"]{width: 55%;}
    .newsletterfull input[type="email"]{width: 55%;}

    
    
.mkt90{width:100%; margin:14px auto; height:auto;  display: block;}
.mkt90a{display: none;}
.mkt90b{display: none;}
.mkt90c{width:740px; margin:7px auto; height:90px;  display: block;}
.mkt90d{display: none;}



    /*PAGINA CATEGORIA :: PROPAGANDA/SIDEBAR */
    .categoriapropaganda .mkt50{height: 280px; margin:10px 5px 35px 5px;}

    /*PAGINA CATEGORIA :: ARTISTAS */
    .list-artistas .item{margin-bottom: 20px;}
    .list-artistas .item h1{font-size: 1.4em;margin-bottom: 7px;color: var(--text-color);}
    .list-artistas .item .autor span{font-size: 1.1em; color: var(--text-color);}
    .list-artistas .item .detalhes{font-size: 0.9em; color: var(--text-color);}
    .list-artistas .item .player{width: 20%;margin-top: -15px;}

    /*PAGINAÇÃO CATEGORIA*/
    .pagination ul{width: 519px;}

    .responsivo768{float: left;width: 45%;margin-right: 5% !important;margin-left: 0;}
    .responsivo768:nth-of-type(2n+0){margin-right: 0%;}

    .box_carrossel .carrossel .item-lancamentos .artista{width: 55%;}
    .box_carrossel .carrossel .item-lancamentos img{width: 100px;}
    .box_carrossel .carrossel .item-lancamentos .artista .sendUp{font-size: 0.9em;}

    .box_carrossel .carrossel .item-maisouvidas{float: left; height: 80px;width: 50%;margin-bottom: 25px;}
    .box_carrossel .carrossel .item-maisouvidas .mais{float: left;width: 80%;}
    .box_carrossel .carrossel .item-maisouvidas .mais .cantor{float: left;width: 100%;}

    .toptitle{float: left;width: 80%;text-align: center;border-top: 5px solid #555555;font-size: 1.3em;margin: 0 10%;}


    /*PAGINA :: SINGLE-CD*/
  

    /*PAGINA ::SINGLE-CD :: INTERACAO*/
    .single .interacao .lilike{float: left;width: 30%;margin-right: 5%;margin-left: 0;}
    .single .interacao .lilike:nth-of-type(3n+0){margin-right: 0%;}


    /*PAGINA ::SINGLE-AUTOR :: ESCOLHER*/
    .single-escolher ul{float: left;width: 55%;text-align: center;padding: 15px 0;margin-top: 15px;}
    .single-escolher .contratar{float: left;width: 40%;margin: 15px 5% 0 0;}
    
    
    
    
    
     /*PAGINA ::TOP 100 ::*/
     
     
   

    
    
   
   

}




/*940PX*/
@media(min-width:58.75em){
    
    .bg-rosa{ width: 100%; height: 200px;}
    
     .main_nav1{float: left;width: 100%;position: relative;display: block; padding: 0px 10px;}
    .main_nav1 ul{width: 100%; text-align: center;}
    .main_nav1 ul li a{width: 24.66666666666667%;float: left;color:#CCC; margin-right: 0%; font-size: 1.25em;}
    .main_nav1 ul li a:hover{border-top: 5px solid #555555;padding: 5px 0 0 0;text-decoration: none;}
    
    
    .banner{height: 340px;width: 55%;}

    .mkt30{float: right;width:336px; margin:10px 20px 4px 15px; height: 280px;}
    .mkt30some{display:block;}

    /*DESTAQUE ITEM*/
    .main_destaque .item{float: left;width: 30%;margin-right: 5%;}
    .main_destaque .item:nth-of-type(1n+0){margin-right: 5%;}
    .main_destaque .item:nth-of-type(2n+0){margin-right: 5%;}
    .main_destaque .item:nth-of-type(3n+0){margin-right: 0%;}


    /*TOP ARTISTAS */
    .box_carrossel .carrossel .item-artistas{position: relative;float: left; width: 130px;background: none;margin: 0 40px;margin-bottom: 10px;}
    .box_carrossel .carrossel .item-artistas .cantor{position: absolute;top: 0;left: 130px;font-size: 1.25em;font-weight: bold; margin:10px 0 0 0;  }
    .box_carrossel .carrossel .item-artistas .icon{position: absolute;right:10px;border-radius: 50% 50%;background: #ff007f;padding: 10px;color: #fff;}
    .box_carrossel .carrossel .item-artistas img{ width:120px; height:120px; border: 1px solid #ccc; padding: 4px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; -webkit-transition: all 150ms linear; -moz-transition: all 150ms linear; -o-transition: all 150ms linear; transition: all 150ms linear; margin:2px 0 0 0;}
    .box_carrossel .carrossel .item-artistas a{color:#000; font-size: 1.05em; }

    /*NEWSLETTER FULL*/
    .newsletterfull input[type="text"]{width: 60%;}
    .newsletterfull input[type="email"]{width: 60%;}
    
    
    
      /*PAGINA :: SOM AUTOMOTIVO :: SIDEBAR*/
    .sidebar-auto{float: left;width:340px; margin-right: 4px;display: block; height: 280px; margin-left:5px; }
    

    /*PAGINAÇÃO CATEGORIA*/
    .pagination ul{width: 682px;}


    /*PAGINA ::SINGLE-AUTOR*/
    .single-autor .perfil .follow .bt-small{width: 15%;margin-left: 40%;}
    .single-autor .perfil .follow .count{width: 5%;}

    /*PAGINA ::SINGLE-AGENDA*/
    .single-agenda{width: 96%;float: left;margin: 0 2%;}
    .single-agenda .agenda{float: left;width: 30%;margin-right: 5%;}
    .single-agenda .agenda:nth-of-type(2n+0){margin-right: 5%;}
    .single-agenda .agenda:nth-of-type(3n+0){margin-right: 0%;}
    
    
    /*TOP 100 */
    .box_carrossel-100 .carrossel-100 .item-artistas-100{position: relative;float: left; width: 100px;background: none;}
    .box_carrossel-100 .carrossel-100 .item-artistas .cantor{position: absolute;top: 0;left: 130px;font-size: 1.25em;font-weight: bold; margin:10px 0 0 0;  }
    .box_carrossel-100 .carrossel-100 .item-artistas-100 .icon{position: absolute;right:10px;border-radius: 50% 50%;background: #ff007f;padding: 6px;color: #fff;}
    .box_carrossel-100 .carrossel-100 .item-artistas-100 img{ width:100px; height:100px; border: 1px solid #ccc; padding: 4px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; -webkit-transition: all 150ms linear; -moz-transition: all 150ms linear; -o-transition: all 150ms linear; transition: all 150ms linear; margin:2px 0 0 0;}
    .box_carrossel-100 .carrossel-100 .item-artistas-100 a{color:#000; font-size: 1.05em; }
    
    .top-100-box-nome{float: left;  padding: 5px;  width:75%;}
    .top-100-box-nome h1{ font-size: 2.1em; color: var(--text-color); margin:10px 0 0 0; }
    .top-100-box-nome a{color: var(--text-color);}
    .top-100-box-nome p{ font-size: 1.0em; color:#FF007F; margin: 7px 0 0 0;}
    .top-100-box-nome acesso{ font-size: 1.1em; color:#FF007F; margin: 7px 0 0 0;}
 
    .top-100-box-play{float:right;  margin:0 8px 2px 0; }
    .top-100-box-play p{text-align: center; color:#999;}
    .top-100-box-play-butao{width:100px; margin: 35px 0 0 0;padding: 5px;font-size: 1.2em;background-color:  var(--background-color-hee);border: 0;color: #fff;cursor: pointer;border-radius: 10px 10px;}
    .top-100-box-play-butao p{text-align: center; color: #fff;}
    
    /*PAGINA :: SOM AUTOMOTIVO :: RELACIONADOS*/
    .automotivo-relacionados{padding:0 2%;}
    .automotivo-relacionados .item{width: 30%;margin: 0;margin-bottom: 30px;margin-right: 5%;}
    .automotivo-relacionados .item:nth-of-type(2n+0){margin-right: 5%;}
    .automotivo-relacionados .item:nth-of-type(3n+0){margin-right: 0%;}
    .automotivo-relacionados h1{font-size: 2em;color: #ff007f;margin-bottom: 10px;}
    
    
    /*PAGINA :: ABIR CONTA :: PAGINA*/
.abri-conta{width: 100%; float:left; }
.abri-conta-box{width: 80%; margin: 0 auto; background:#999;}
/*PAGINA :: ABIR CONTA :: FORMULARIO*/
.abri-conta-box form{}
.abri-conta-box form label{width: 100%;padding: 5px 0;margin-bottom: 10px;float: left;}
.abri-conta-box form label span{font-size: 1.1em;display: block;color:#777;}
.abri-conta-box form label input[type="text"],
.abri-conta-box form label input[type="password"],
.abri-conta-box form label select{width: 100%;display: block;padding: 7px 5px;color: #777;border-radius: 4px 4px;border: 1px solid #C8C8C8;}
.abri-conta-box form input[type="submit"]{float: left;width: 100%;padding: 6px 0;font-size: 1.2em;color: #fff;background: #ff007f;margin-bottom: 20px;border: 0;border-radius: 5px 5px;}
.abri-conta-box .form-field{display: block; margin-bottom: 10px; font-size: 1.1em; color:#777;}
.abri-conta-box .form-check{ margin-bottom: 10px;}
.abri-conta-box .form-check a{color:#2DB200;}
.abri-conta-box form textarea{padding: 10px; border: 1px #ccc solid; width: 100%; color: #555;}
    
    
    
    



}





/*1024PX*/
@media(min-width:64em){
    
    .bg-rosa{ width: 100%; height: 140px;}

    .banner{height: 350px;width: 60%;}

    .newsletter{width: 336px;margin: 10px 0 0 20px;float: right;background: #ddd;display: block;}

    .mkt30{float: right;width: 336px; margin:10px 25px 4px 15px; height: 280px;}
    .mkt30some{display:block;}

   

    .box_carrossel .carrossel .item-artistas{position: relative;float: left; width: 100%;background: none;margin: 0 40px;margin-bottom: 20px;}
    .box_carrossel .carrossel .item-artistas .icon{position: absolute;right: auto;left:20%;border-radius: 50% 50%;background: #ff007f;padding: 10px;color: #fff;}
    .box_carrossel .carrossel .item-artistas img{ width:131px; height:131px; border: 1px solid #ccc; padding: 4px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; -webkit-transition: all 150ms linear; -moz-transition: all 150ms linear; -o-transition: all 150ms linear; transition: all 150ms linear; margin:2px 0 0 0;
    }
    .box_carrossel .carrossel .item-artistas a{color:#000; font-size: 1.05em; }
    .box_carrossel .carrossel .item-artistas p{position: absolute;top: 0;left: 130px;font-size: 0.80em; margin:40px 0 0 20px; color:#ccc;}


.mkt90{width:100%; margin:14px auto; height: auto;  }
.mkt90a{display: none;}
.mkt90b{display: none;}
.mkt90c{display: none;}
.mkt90d{width:980px; margin:7px auto; height:90px;  display: block;}

    /*PAGINA CATEGORIA*/
    .categoria{width: 100%;padding: 10px;margin: 10px 0;background-color: var(--background-color-hee);text-align: center;}
    .categoria .titlecategoria{font-size: 1.5em;padding: 0 0 10px 0;}
    .categoria .textsubcategoria{font-size: 0.9em;}
    .categoria .social{width: 100%;}
    .categoria .social .fb-like{padding: 15px;}

    /*PAGINA CATEGORIA :: PROPAGANDA/SIDEBAR */
    .categoriapropaganda{float: left;width: 65%;margin-right: 5%;}
    .categoriapropaganda .mkt50{float: left;width: 45%; margin:10px 5px 35px 5px; height: 280px;}
    .categoriapropaganda .mkt50:nth-of-type(2n+0){margin-right: 0;}
    .sidebar{float: right;width: 30%;display: block;}
    .sidebar .item{width: 100%;height: 350px;border-top: 5px solid #ff007f;}
    .sidebar .item h1{font-size: 1.3em;}

    /*PAGINA CATEGORIA :: ARTISTAS */
    .list-artistas{float: left;width: 70%;}
    .list-artistas .item{position: relative;margin-bottom: 10px;padding: 15px 0;}
    .list-artistas .item h1{font-size: 1.2em;margin-bottom: 15px;}
    .list-artistas .item .autor span{font-size: 1em;margin-right: 10px;}
    .list-artistas .item .detalhes{float: left;font-size: 0.9em;}
    .list-artistas .item .detalhes ul{float: left;width: 100%; color: var(--text-color);}
    .list-artistas .item .detalhes ul li{float: left;margin-right: 5px; color: var(--text-color);}
    .list-artistas .item .player{float: right;background:  var(--background-color-hee);border-radius: 5px 5px;padding: 5px 20px 5px 20px;text-align: center;color: #e30630;margin-right: 50px; }
    .list-artistas .item .player img{margin-right: 5px;}

    /*PAGINACAO*/
    .pagination{width: 100%;float: left;margin-top: 25px;}
    .pagination .go:hover, .pagination .back:hover{background: #da007f;color: #fff;cursor: pointer;}
    .pagination .back{float: left;width: 10%;padding: 10px 20px;border: 1px solid #ECECEC;text-align: center;}
    .pagination .go{float: right;width: 10%;padding: 10px 20px;border: 1px solid #ECECEC;text-align: center;}
    .pagination ul{float: left;width: 80%;padding: 10px 0;text-align: center;}
    .pagination ul li{float: left;width: 16.66666666666667%;cursor: pointer;}
    .pagination ul li:hover{color: #e30630;}

    /*PAGINA ::SINGLE :: INFORMACOES*/
    
     .single-info .mkt100{float: left;width: 30%;height: 280px;  margin:8px 3px 35px 3px;}
     .single-info .mkt100some{display:block; }
     .mkt50some{display:block;}
    
    
    
    
    .single-info .text{float: left;width: 100%;margin-bottom: 20px;display: block;color: #B3B3B3;text-align: center;}
    .single-info .player{float: left;width: 100%;}
    .single-info .center{float: left;width: 30%;margin: 0 5%;}
    .single-info .bt-large.ouvir{width: 100%;padding: 10px 15px;font-size: 1.5em;background: #ff007f;border: 0;color: #fff;cursor: pointer;border-radius: 10px 10px;display: block;margin-bottom: 25px;}
    .single-info .bt-large.ouvir2{width: 40%;padding: 10px 15px;font-size: 1.5em;background: #ff007f;border: 0;color: #fff;cursor: pointer;border-radius: 10px 10px;display: block;margin-bottom: 25px;}
    .single-info .bt-large.baixar{width: 100%;padding: 10px 15px;font-size: 1.5em;background:#00b200;border: 0;color: #fff;cursor: pointer;border-radius: 10px 10px;display: block;}

    /*INTEM MAIS OUVIDAS*/
    .box_carrossel .carrossel .item-maisouvidas img{margin-top: -7px;}

    /*PAGINA ::SINGLE-AUTOR :: ESCOLHER*/
    .single-escolher ul{float: left;width: 75%;text-align: center;padding: 15px 0;margin-top: 15px;}
    .single-escolher ul li{font-size: 1.3em;}
    .single-escolher .contratar{float: left;width: 20%;margin: 15px 5% 0 0;}

    /*PAGINA ::SINGLE-AUTOR*/
    .single-autor{float: left;width: 100%;position: relative;margin-top: 15px;background:#666; ;height: 326px;overflow: hidden;}
    .single-autor .bg{height:100%;display: block;}
    .single-autor .perfil{width: 35%;background: rgba(000,000,000,0.7);text-align: center;padding-top: 10px;position: absolute;margin-left: 20px;}
    .single-autor .perfil h1{font-size: 1.6em;color: #fff;margin-bottom: 5px;}
    .single-autor .perfil h1 img{margin-left: 6px;}
    .single-autor .perfil .follow{margin-bottom: 50px;}
    .single-autor .perfil .follow .bt-small{float: left;width: 50%;margin-left: 15%;padding: 3px 5px;font-size: 1.1em;background: #ff007f;border: 0;color: #fff;cursor: pointer;border-radius: 10px 10px;display: inline-block;}
    .single-autor .perfil .follow .count{float: left;width: 20%;background: url(../img/bg-count.png) center center no-repeat;height: 21px;margin-top: 4px;color: #fff;}

     /*PAGINA ::SINGLE-CD :: INTERACAO*/
    .single .interacao{float: left;width: 100%;background: none;padding: 5px 0;text-align: center;color: #B3B3B3;  border:1px solid #EEEEEE; }
    .single .interacao .date{float: left;font-size: 0.9em;display: block;margin-bottom: 5px;margin-right: 15px;}
    .single .interacao .download{float: left;font-size: 0.9em;display: block;margin-bottom: 5px;margin-right: 15px;}
    .single .interacao .interatividade{float: left;cursor: pointer;margin-right: 15px;}
    .single .interacao .social{float: left;width: 60%;}
    .single .interacao .like{float: left;width: 12%;}
    .single .interacao .like ul{width: 100%;border-top: 3px solid #00cc00;margin: 0;}
    .single .interacao .like ul li{display: inline-block;margin-right: 10px;margin-top: 0px;cursor: pointer;width: 33%;}


    .sharebox a{float: left; padding: 10px 10px 10px 36px; color: #fff;}

    .single .interacao .lilike{margin-right: 10px;}
    /*PAGINA ::SINGLE-AUTOR :: SOCIAL*/
    .single-autor .social{position: absolute;width: 30%;padding: 10px 15px;background: none;bottom: 0;right: 0;}
    .single-autor .social ul{width: 100%;text-align: center;}
    .single-autor .social .facebook{padding: 5px 10px;background: #1e2ed0;display: inline-block}
    .single-autor .social .facebook:hover{cursor: pointer;background: #4081ff}
    .single-autor .social .twitter{ padding: 5px 10px;background: #26c9ff;display: inline-block}
    .single-autor .social .twitter:hover{cursor: pointer;background:#26acff }
    .single-autor .social .googleplus{padding: 5px 10px;background: #ff9326;display: inline-block}
    .single-autor .social .googleplus:hover{cursor: pointer;background: #ff7527}
    
    

    /*PAGINA ::SINGLE-VIDEO*/
    .single-video .item{width: 33%;margin-right: 0%;}
    .single-video .item:nth-of-type(2n+0){margin-right: 0%;}
    
    /*PAGINA ::TOP 100*/
    .box_carrossel-100 .carrossel-100 .item-artistas-100{position: relative;float: left; width: 100%;background: none;}
    .box_carrossel-100 .carrossel-100 .item-artistas-100 .icon{position: absolute;right: auto;left:60%;border-radius: 50% 50%;background: #ff007f;padding: 10px;color: #fff;}
    .box_carrossel-100 .carrossel-100 .item-artistas-100 img{ width:121px; height:121px; border: 1px solid #ccc; padding: 4px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; -webkit-transition: all 150ms linear; -moz-transition: all 150ms linear; -o-transition: all 150ms linear; transition: all 150ms linear; margin:2px 0 0 0;
    }
    .box_carrossel-100 .carrossel-100 .item-artistas-100 a{color:#000; font-size: 1.05em; }
    
    .top-100-box-nome{float: left;  padding: 5px;  width:76%;}
    .top-100-box-nome h1{ font-size: 2.7em; color: var(--text-color); margin:10px 0 0 0; }
    .top-100-box-nome a{color: var(--text-color);}
    .top-100-box-nome p{ font-size: 1.1em; color:#FF007F; margin: 7px 0 0 0;}
    .top-100-box-nome acesso{ font-size: 1.1em; color:#FF007F; margin: 7px 0 0 0;}
 
    .top-100-box-play{float:right;  margin:0 8px 2px 0; }
    .top-100-box-play p{text-align: center; color:#999;}
    .top-100-box-play-butao{width:100px; margin: 35px 0 0 0;padding: 5px;font-size: 1.2em;background-color:  var(--background-color-hee);border: 0;color: #fff;cursor: pointer;border-radius: 10px 10px;}
    .top-100-box-play-butao p{text-align: center; color: #fff;}
    
    /*PAGINA :: SOM AUTOMOTIVO*/
    .single-automotivo{float: left;width: 55%;margin-bottom: 25px;}
    .single-automotivo .auto img{width: 100%;float: right;}
    .single-automotivo .auto .desc{width: 100%;float: right;padding: 0;margin: 0 auto;max-width: 940px;}

    /*PAGINA :: SOM AUTOMOTIVO :: SIDEBAR*/
    .sidebar-auto{float: left;width:40%;margin-right: 2%;display: block; height: 500px; margin-left:5px; }

    /*PAGINA :: SOM AUTOMOTIVO :: RELACIONADOS*/
    .automotivo-relacionados{padding:0 2%;}
    .automotivo-relacionados .item{width: 22.7%;margin: 0;margin-bottom: 30px;margin-right: 3%;}
    .automotivo-relacionados .item:nth-of-type(2n+0){margin-right: 3%;}
    .automotivo-relacionados .item:nth-of-type(3n+0){margin-right: 3%;}
    .automotivo-relacionados .item:nth-of-type(4n+0){margin-right: 0%;}
    .automotivo-relacionados h1{font-size: 2em;color: #ff007f;margin-bottom: 10px;}
    
    
    /*PAGINA :: SINGLE PERFIL*/
  

    /*PAGINA :: SINGLE PERFIL :: CAPA / ACAO */
    .single-perfil .capa img{width: 70%;margin: 0; max-height:280px;}
    .single-perfil .altera-capa h1{text-align: right;}

    /*PAGINA :: SINGLE PERFIL :: MENSAGEM DE AVISO*/
    .msg-accept{width: 65%;margin-left: 5%;}
    .msg-erro{width: 65%;margin-left: 5%;}

    /*PAGINA :: SINGLE PERFIL :: FORMULARIO*/
    .single-perfil form{float: left;width: 65%;margin-left: 5%;}
    .single-perfil form label{width: 100%;padding: 5px 0;margin-bottom: 10px;float: left;}
    .single-perfil form label span{font-size: 1.1em;display: block;color:#777;}
    .single-perfil form label input[type="text"],
    .single-perfil form label select{width: 100%;display: block;padding: 7px 5px;color: #777;border-radius: 4px 4px;border: 1px solid #C8C8C8;}
    .single-perfil form input[type="submit"]{float: left;width: 100%;padding: 6px 0;font-size: 1.2em;color: #fff;background: #ff007f;margin-bottom: 20px;border: 0;border-radius: 5px 5px;}

    
    
   
    

}





/*1366PX*/
@media(min-width:85.375em){
    
    .bg-rosa{ width: 100%; height: 150px;}

    /*HEADER*/
    .main_header{width: 100%;position: relative;float: left; padding: 5px 0;}
    .main_header .mobile{display: none;}
    .main_header .logo{float: left;width: 15%;background: url(../img/logo-mobile.png) center center no-repeat;height: 58px;}
    .main_header .search{float: left;width: 60%;height: 58px;background:none ;display: none;}
    
     /* MENU :: NAVEGA��O*/
    .main_nav1{display:none; }

    /* MENU :: NAVEGAÇÃO*/
    .main_nav{float: left;width: 100%;position: relative;display: block; padding: 0px 10px;}
    .main_nav ul{width: 100%; text-align: center;}
    .main_nav ul li a{width: 16.66666666666667%;float: left;color:#fff;margin-right: 0%;}
    .main_nav ul li a:hover{border-top: 5px solid #555555;padding: 5px 0 0 0;text-decoration: none;}
    .main_nav .nav-reposivo-g4{display:none;}

    /* MENU :: PESQUISA*/
    .searchfull{float: left;width: 65%;height: 50px;display: block;}
    .searchfull .pesquisar{float: left;width: 100%;position: relative;display: block;padding: 5px 10px;}
    .searchfull .pesquisar input[type="text"]{float: left;width: 95%;padding: 10px 5px;border: 0px solid #666666;border-radius: 5px 0px 0px 5px}
    .searchfull .pesquisar input[type="button"]{cursor: pointer;float: left;width: 5%;padding: 10px 5px;border: 0px solid #666666;border-radius:0px 5px 5px 0px;background: #FFFFFF url(../img/icon-search.png) center center no-repeat}
    .searchfull .pesquisar input[type="submit"]{cursor: pointer;float: left;width: 5%;padding: 10px 5px;border: 0px solid #666666;border-radius:0px 5px 5px 0px;background: #FFFFFF url(../img/icon-search.png) center center no-repeat}

    .login{float: left;display: block;width: 20%;padding: 10px 0;}
    .login .entrar a{color:#000;}
    .login ul{float: left;width: 100%;text-align: center;}
    .login ul li{margin-right: 10px;display: inline-block;padding: 5px 10px;background: #fff;border-radius: 5px 5px;cursor: pointer}
    .login ul li:nth-of-type(2n+0){background: #2e2f2e;color: #fff}

    .banner{height: 380px;width: 70%;}

    .newsletter{width: 27%;margin: 10px 0 0 20px;float: right;background: #ddd;display: block;}

    .mkt30{float: right;width: 336px; margin: 10px 0 14px 0;height: 280px;}
    .mkt30some{display:block;}
     .single-info .mkt100some{display:none; }
    .mkt90{width: 100%; height:auto; margin:14px auto ;margin-top: 15px;}
    .mkt90a{display: none}
    .mkt90b{display: none}
    .mkt90c{display: none}

    .main_destaque{padding: 0px 0 15px 0;}
    .main_destaque .imgdestaque{width: 100%;}
    .main_destaque .imgdestaque img{max-width: 90%; margin: 0 5%;}
    .main_destaque .player{float: left;position: relative;width: 40%;background: url(../img/player.png) center left no-repeat;color: #e30630;margin-top: 10px;}
    .main_destaque .player:hover{cursor: pointer;text-decoration: underline;}
    .main_destaque .ouvir{font-weight: bold;margin-left: 30px;}

    .responsivo768{float: left;width: 33%;margin: 0 !important;}
    .responsivo1366{float: left;width: 33% !important;margin: 0;}

    .box_carrossel .carrossel .item-artistas .icon{position: absolute;right: auto;left:80px;border-radius: 50% 50%;background: #ff007f;padding: 10px;color: #fff;}

    .box_carrossel .carrossel .item-artistas img{ width:135px; height: 135px; border: 1px solid #ccc; padding: 4px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; -webkit-transition: all 150ms linear; -moz-transition: all 150ms linear; -o-transition: all 150ms linear; transition: all 150ms linear; margin:2px 0 0 0;
    }
    .box_carrossel .carrossel .item-artistas a{color:#000; font-size: 1.05em; }
    .box_carrossel .carrossel .item-artistas p{position: absolute;top: 0;left: 130px;font-size: 0.80em; margin:40px 0 0 20px; color:#ccc;}


    .box_carrossel .carrossel .item-maisouvidas{height: 50px;width: 100%;   }
    .box_carrossel .carrossel .item-maisouvidas .mais{float: left;width: 100%;}
    .box_carrossel .carrossel .item-maisouvidas .mais .cantor{float: left;width: 100%;}
    .box_carrossel .carrossel .item-maisouvidas .mais .sendUp{float: left;font-size: 0.8em;}
    .box_carrossel .carrossel .item-maisouvidas img{float: left;width:10%;}
    .box_carrossel .carrossel .item-maisouvidas .mais{float: left;width: 80%;}


    /*DESTAQUE :: ITEM*/
    .main_destaque .item{float: left;width: 12%;margin: 0 2.666666666666667% 0 0;}
    .main_destaque .item:nth-of-type(1n+0){margin: 0 2.666666666666667% 0 0;}
    .main_destaque .item:nth-of-type(2n+0){margin: 0 2.666666666666667% 0 0;}
    .main_destaque .item:nth-of-type(3n+0){margin: 0 2.666666666666667% 0 0;}
    .main_destaque .item:nth-of-type(4n+0){margin: 0 2.666666666666667% 0 0;}
    .main_destaque .item:nth-of-type(7n+0){margin: 0 0 0 0;}
    .main_destaque .text{font-size: 0.9em;text-transform: uppercase;}
    .main_destaque .player{width: 60%;margin: 0 20%;background: url(../img/player.png) center left no-repeat;color: #e30630;}
    .main_destaque .player:hover{cursor: pointer;text-decoration: underline;}
    .main_destaque .ouvir{font-weight: bold;}

    /*NEWSLETTER FULL*/
    .newsletterfull input[type="text"]{width: 60%;}
    .newsletterfull input[type="email"]{width: 60%;}


    /*PAGINA :: SINGLE-CD*/
 

    /*PAGINA ::SINGLE :: INFORMACOES*/
    .single-info{float: left;margin: 25px 0;width: 100%;}


     /*PAGINA ::SINGLE-CD :: INTERACAO*/
    .single .interacao .lilike{float: left;width: 30%;margin-right: 5%;margin-left: 0;}
    .single .interacao .lilike:nth-of-type(3n+0){margin-right: 0%;}
    
    .single .interacao .like{width: 18%;margin-left: 20px;}
    

    /*PAGINA ::SINGLE :: MUSIC*/
    .single-music .music{margin-bottom: 4px;}

    .single-music .music span{float: left;font-size: 1.1em;width: 75%;}
    .single-music .music .controll{}
    .single-music .music .controll .bt-small.baixar{width: 10%;padding: 3px 5px;font-size: 1em;background-color: var(--background-color-hee);border: 0;color: var(--text-color);cursor: pointer;border-radius: 10px 10px;display: inline-block;}
    .single-music .music .controll .bt-small.ouvir{width: 10%;padding: 3px 5px;margin-right: 4%;font-size: 1em;background:#ff007f;border: 0;color: #fff;cursor: pointer;border-radius: 10px 10px;display: inline-block;margin-bottom: 4px;}

    /*PAGINA ::SINGLE-AUTOR*/
    .single-autor{float: left;width: 100%;position: relative;margin-top: 15px;background: red;height: 326px;overflow: hidden;}
    .single-autor .bg{width:100%;}
    .single-autor .perfil{width: 25%;}
    
    /*PAGINA ::SINGLE-VIDEO*/
    .single-video .item{width: 25%;margin-right: 0%;}
    .single-video .item:nth-of-type(2n+0){margin-right: 0%;}
    
     /*PAGINA ::TOP 100*/
     .box_carrossel-100 .carrossel-100 .item-artistas-100 .icon{position: absolute;right: auto;left:80px;border-radius: 50% 50%;background: #ff007f;padding: 6px;color: #fff;}

    .box_carrossel-100 .carrossel-100 .item-artistas-100 img{ width:135px; height: 135px; border: 1px solid #ccc; padding: 4px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; -webkit-transition: all 150ms linear; -moz-transition: all 150ms linear; -o-transition: all 150ms linear; transition: all 150ms linear; margin:2px 0 0 0;
    }
    .box_carrossel-100 .carrossel-100 .item-artistas-100 a{color:#000; font-size: 1.05em; }
    .box_carrossel-100 .carrossel-100 .item-artistas-100 p{position: absolute;top: 0;left: 130px;font-size: 0.80em;  color:#ccc;}

    .top-100-box-nome{float: left;  padding: 5px; width:80%;}
    .top-100-box-nome h1{ font-size: 3.1em; color: var(--text-color); margin:10px 0 0 0; }
    .top-100-box-nome a{color: var(--text-color);}
    .top-100-box-nome p{ font-size: 1.1em; color:#FF007F; margin: 7px 0 0 0;}
    .top-100-box-nome acesso{ font-size: 1.1em; color:#FF007F; margin: 7px 0 0 0;}
 
    .top-100-box-play{float:right;  margin:0 8px 2px 0; }
    .top-100-box-play p{text-align: center; color:#999;}
    .top-100-box-play-butao{width:100px; margin: 40px 0 0 0;padding: 5px;font-size: 1.2em;background: #FF007F;border: 0;color: #fff;cursor: pointer;border-radius: 10px 10px;}
    .top-100-box-play-butao p{text-align: center; color: #fff;}
    
    
    /*PAGINA :: SOM AUTOMOTIVO :: RELACIONADOS*/
    .automotivo-relacionados{padding:0 2%;}
    .automotivo-relacionados .item{width: 18.4%;margin: 0;margin-bottom: 30px;margin-right: 2%;}
    .automotivo-relacionados .item:nth-of-type(2n+0){margin-right: 2%;}
    .automotivo-relacionados .item:nth-of-type(3n+0){margin-right: 2%;}
    .automotivo-relacionados .item:nth-of-type(4n+0){margin-right: 2%;}
    .automotivo-relacionados .item:nth-of-type(5n+0){margin-right: 0%;}
    .automotivo-relacionados h1{font-size: 2em;color: #ff007f;margin-bottom: 10px;}
    
    
    /*PAGINA :: SINGLE PERFIL*/
   

    /*PAGINA :: SINGLE PERFIL :: CAPA / ACAO */
    .single-perfil .capa img{width: 80%; max-height:330px;}
    .single-perfil .altera-capa h1{text-align: right;}

    /*PAGINA :: SINGLE PERFIL :: MENSAGEM DE AVISO*/
    .msg-accept{width: 65%;margin-left: 5%;}
    .msg-erro{width: 65%;margin-left: 5%;}

    /*PAGINA :: SINGLE PERFIL :: FORMULARIO*/
    .single-perfil form{float: left;width: 65%;margin-left: 5%;}
    .single-perfil form label{width: 100%;padding: 5px 0;margin-bottom: 10px;float: left;}
    .single-perfil form label span{font-size: 1.1em;display: block;color:#777;}
    .single-perfil form label input[type="text"],
    .single-perfil form label select{width: 100%;display: block;padding: 7px 5px;color: #777;border-radius: 4px 4px;border: 1px solid #C8C8C8;}
    .single-perfil form input[type="submit"]{float: left;width: 100%;padding: 6px 0;font-size: 1.2em;color: #fff;background: #ff007f;margin-bottom: 20px;border: 0;border-radius: 5px 5px;}


    
   

    
    


}

@media (max-width: 992px) {
  header {
    padding: 0px 16px;
  }

  header #toggle-menu {
    display: block;
    margin-right: 8px;
  }

  header .right #account-menu {
    right: 16px;
  }

  header #navby {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: 240px;
    background-color: white;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    height: 100vh;
    z-index: 9999;
    display: none;
  }

  header #navby ul {
    flex-direction: column;
  }

  header #navby ul li a {
    color: #333;
  }

  header #close-menu {
    display: flex;
  }
  footer {
    grid-template-columns: 1fr 1fr 1fr;
  }
 /* category */
.catagories{
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  border-radius: 15px;
  padding:15px 0 18px 2px;
 
}
.catagories span:first-child{
  background-color: var(--background-color-hee);
  color: var(--text-color);
}
.catagories span{
  flex-shrink: 0;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 5px 20px;
  background-color: var(--background-color-hee);
  color: var(--text-color);
  font-size: 0.8rem;
  font-weight: 700;
  border-radius: 15px;
  cursor: pointer; 
  display: block;
}
 
}
@media (max-width: 768px) {
  footer {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 576px) {
  footer {
    grid-template-columns: 1fr;
  }
}

/*RESET*/

/*NEWS20K4*/


.contay {
  width: 90% !important;
  margin: auto !important;
  float: none !important;
}

/* Mode Switch Toggle */



/******************/
/* PÁGINA INICIAL */
/******************/

.featured {
  width: 100%;
  height: 380px;
  position: relative;
  margin-top: 32px;
  border-radius: 8px;
  overflow: hidden;
}

.featured .background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.featured .background::before {
  content: "";
  background: linear-gradient(90deg, #000000 9.9%, rgba(0, 0, 0, 0) 39.06%);
  position: absolute;
  width: 100%;
  height: 100%;
}

.featured .background img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.featured .featured-content {
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  height: 100%;
  padding: 0px 32px;
  flex-direction: column;
  width: 400px;
}

.featured .featured-content .artist a {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.featured .featured-content .artist img {
  border-radius: 50%;
  height: 32px;
  width: 32px;
  margin-right: 8px;
  font-size: 1rem;
}

.featured .featured-content .artist span {
  color: white;
}

.featured .featured-content h3 {
  font-size: 2.5rem;
  color: white;
  margin: 16px 0;
}

.featured .featured-content button {
  height: 40px;
  border: none;
  outline: none;
  background: transparent;
  cursor: pointer;
  background: #c100a2;
  color: white;
  border-radius: 20px;
  width: 200px;
}

/* MAIS OUVIDAS 2023 */
#more-listened {
  grid-area: moreListened;
}

.more-listened-list .music {
  display: flex;
  align-items: center;
  border-radius: 2px;
  padding: 16px;
}

.more-listened-list .music .music-info {
  flex: 1;
}

.more-listened-list .music button {
  border-radius: 50%;
  padding: 8px;
  border: none;
  background: transparent;
  cursor: pointer;
}

.more-listened-list .music button i {
  font-size: 1.6rem;
  color: var(--text-color);
}

.more-listened-list .music:hover {
  background: #fafafa;
}
.more-listened-list .music a {
  color: var(--text-color);
}

.more-listened-list .music:hover button {
  color: #c100a2;
}
.three-columns-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "releases" "moreListened" "topArtists";
  gap: 32px;
}

.three-columns-grid h2 {
  margin-bottom: 16px;
  font-size: 1.3rem;
   color: var(--text-color);
}

/* ÚLTIMOS LANÇAMENTOS */
#releases {
  grid-area: releases;
}

.releases-list li {
  list-style: none;
  background-color: var(--background-color-hee);
  border-radius: 2px;
  overflow: hidden;
}

.releases-list li + li {
  margin-top: 16px;
}

/* TOP ARTISTAS */
#top-artists {
  grid-area: topArtists;
}

.top-artists-list .artist {
  list-style: none;
  height: 88px;
  background-color: var(--background-color-hee);
  box-shadow: 0px 4px 6px -3px rgba(0, 0, 0, 0.16);
  border-radius: 44px;
  display: flex;
  align-items: center;
}

.top-artists-list .artist + .artist {
  margin-top: 16px;
}

.top-artists-list .artist .artist-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0 16px;
}

.top-artists-list .artist .artist-info h3 a {
  color: var(--text-color);
  font-size: 1.5rem;
  font-weight: normal;
  text-decoration: none;
}

.top-artists-list .artist .artist-info span {
  font-size: 1rem;
  color: #ccc;
  margin-top: 4px;
}

.top-artists-list .artist .artist-position {
  font-size: 3rem;
  color: #e50876;
  font-weight: bold;
  margin-right: 32px;
  display: block;
}

.top-artists-list .artist a img {
  height: 80px;
  width: 80px;
  object-fit: cover;
  border-radius: 50%;
  margin: 4px;
}
.three-columns-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "releases"  "moreListened" "topArtists";
  gap: 32px;
}

.three-columns-grid h2 {
  margin-bottom: 16px;
  font-size: 1.3rem;
  color: var(--text-color);
}



/* Album */

.album {
  overflow: hidden;
  width: 100%;
  position: relative;
  background-color: var(--background-color-hee);
  padding: 5px;
  border-radius: 7px;
}

.album .album-cover-container {
  position: relative;
  width: 100%;
}

.album .album-cover-container::after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.album .album-cover {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 6px;
}

.album .album-cover a{
  text-decoration: none;
}

.album .album-cover::after {
  justify-content: center;
  font-family: "feather" !important;
  content: "\e9b0";
  display: flex;
  font-size: 90px;
  align-items: center;
  position: absolute;

  background: rgba(133, 9, 145, 0.4);
  width: 100%;
  height: 100%;
  visibility: hidden;
  cursor: pointer;
  color: white;
  transition: visibility 0.2s linear;
}

.album .album-cover img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: filter 0.1s linear;
}

.album .time {
  color: #979797;
  font-size: 0.8rem;
  margin-bottom: 4px;
  display: block;
}

.album .album-cover:hover::after {
  visibility: visible;
}

.album .album-cover:hover img {
  filter: blur(2px);
}

.album .album-category {
  position: absolute;
  top: 8px;
  left: 8px;
  background: white;
  color: purple;
  padding: 4px;
  border-radius: 2px;
  z-index: 5;
}

.album .artist {
  margin-top: 4px;
}

.album .artist a {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.album .artist img {
  border-radius: 50%;
  height: 24px;
  width: 24px;
  margin-right: 8px;
}

.album .artist span {
  color: #575757;
  font-size: 0.9rem;
}

.album .album-info {
  margin-top: 16px;
}

.album .album-info h3 a {
  font-size: 1.3rem;
  font-weight: bold;
  color: var(--text-color);
  text-decoration: none;
}

.album .album-info span a {
  font-size: 0.9rem;
  text-decoration: none;

  color: #ababab;
}

.horizontal-album {
  display: flex;
  align-items: center;
}

.horizontal-album .album-info {
  flex: 1;
  margin: 0px;
  margin-left: 16px;
}

.horizontal-album .album-cover-container {
  width: 88px;
}
.albums {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  width: 90%;
  margin: 64px auto;
}


/******************/
/* cds */
/******************/

/* Album */

.album {
  overflow: hidden;
  width: 100%;
  position: relative;
}

.album .album-cover-container {
  position: relative;
  width: 100%;
}

.album .album-cover-container::after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.album .album-cover {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 2px;
}
.album .album-cover a{
  text-decoration: none;
}
.album .album-cover::after {
  justify-content: center;
  font-family: "feather" !important;
  content: "\e9b0";
  display: flex;
  font-size: 90px;
  align-items: center;
  position: absolute;
 
  background: rgba(170, 10, 103, 0.4);
  width: 100%;
  height: 100%;
  visibility: hidden;
  cursor: pointer;
  color: white;
  transition: visibility 0.2s linear;
}

.album .album-cover img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: filter 0.1s linear;
}

.album .time {
  color: #979797;
  font-size: 0.8rem;
  margin-bottom: 4px;
  display: block;
}

.album .album-cover:hover::after {
  visibility: visible;
}

.album .album-cover:hover img {
  filter: blur(2px);
}

.album .album-category {
  position: absolute;
  top: 8px;
  left: 8px;
  background: white;
  color: purple;
  padding: 4px;
  border-radius: 2px;
  z-index: 5;
}

.album .artist {
  margin-top: 4px;
}

.album .artist a {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.album .artist img {
  border-radius: 50%;
  height: 24px;
  width: 24px;
  margin-right: 8px;
}

.album .artist span {
  color: #5f5f5f;
  font-size: 0.9rem;
}

.album .album-info {
  margin-top: 16px;
}

.album .album-info h3 a {
  font-size: 1.3rem;
  font-weight: bold;
  color: var(--text-color);
  text-decoration: none;
}

.album .album-info span a {
  font-size: 0.9rem;
  text-decoration: none;

  color: #ababab;
}

.horizontal-album {
  display: flex;
  align-items: center;
}

.horizontal-album .album-info {
  flex: 1;
  margin: 0px;
  margin-left: 16px;
}

.horizontal-album .album-cover-container {
  width: 88px;
}
.albums {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  width: 90%;
  margin: 64px auto;
}

/* botao whats */
.botao-wpp {
  text-decoration: none;
  color: #eee;
  display: inline-block;

  font-weight: bold;
  padding: 1rem 2rem;
  border-radius: 3px;
}
.botao-wpp svg  { 
  padding: 1px;
}

.botao-wpp:hover {
  background-color: darken(#25d366, 5%);
}

.botao-wpp:focus {
  background-color: darken(#25d366, 15%);
}

#cd-single .share-top{
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;
  align-items: center;
  justify-content: space-between;
  height: 50px;
  margin: 30px 0 10px 0;

}
#cd-single .share-top > div{
  padding: 5px;
  height: 30px;
}
#cd-single .share-top p{
  color: var(--text-color);
}
#cd-single .share-top button:first-child{
  background: rgba(31, 31, 31, 0.089);
  color: #fafafa;
}
#cd-single .share-top button{
  border: none;
  color: rgb(36, 36, 36);
  padding: 4px 6px;
  border-radius: 4px;
  height: 30px;
  margin: 4px;
  cursor: pointer;
}




#cd-single .cd-header {
  width: 100%;
  position: relative;
  overflow: hidden;
}

#cd-single .cd-header .background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#cd-single .cd-header .background::after {
  content: "";
  width: 100%;
  position: absolute;
  height: 100%;
  background: linear-gradient(
    90.04deg,
    rgba(0, 0, 0, 0.85) 0.04%,
    rgba(0, 0, 0, 0) 94.33%
  );
  z-index: 2;
}

#cd-single .cd-header .background img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(50px);
  border: solid 127px transparent;
  transform: scale(1.2);
  z-index: 1;
}

#cd-single .cd-header > div {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#cd-single .cd-header .contay2 {
  flex-direction: column;
  justify-content: center;
}

#cd-single .cd-header .cd-header-info {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

#cd-single .cd-header .cd-header-info h2 {
  color: white;
  font-size: 2rem;
  max-width: 400px;
  font-weight: bold;
  text-align: center;
}

#cd-single .cd-header .cd-header-info .cd-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#cd-single .cd-header .cd-header-info .cd-buttons span {
  color: white;
  display: inline-block;
  margin-left: 8px;
}

#cd-single .cd-header .cd-header-info .cd-buttons .play-cd-button {
  height: 50px;
  background: #00aae0;
  border-radius: 25px;
  color: white;
  border: none;
  width: 150px;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
}
#cd-single .cd-header .cd-header-info .cd-buttons .play-cd-button a{
text-decoration: none;
  color: white;

}
#cd-single .cd-header .cd-header-info .cd-buttons .download-cd-button {
  height: 40px;
  width: 100px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 18px;
  color: white;
  border: none;
  font-size: 20px;
  cursor: pointer;
}
#cd-single .cd-header .cd-header-info .cd-buttons .download-cd-button a{
text-decoration: none;
  color: white;

}
#cd-single .cd-header .cd-header-info .artist a {
  display: flex;
  align-items: center;
  text-decoration: none;
  margin: 16px 0px;
}

#cd-single .cd-header .cd-header-info .artist img {
  border-radius: 50%;
  height: 32px;
  width: 32px;
  margin-right: 8px;
  font-size: 1rem;
}

#cd-single .cd-header .cd-header-info .artist span {
  color: white;
}

#cd-single .cd-header .cd-header-info .cd-cover {
  width: 100%;
  max-width: 350px;
  flex: 1;
  margin: 16px 0px;
  justify-content: center;
    display: flex;
    align-items: center;
}

#cd-single .cd-header .cd-header-info .cd-cover img {

 border-radius: 8px;
 width: 230px;
 height: 230px;
 object-fit: cover;
 justify-content: center;
 display: flex;
 align-items: center;

}

#cd-single .cd-header .cd-header-stats {
  margin: 32px 0;
}
#cd-single .cd-header .cd-header-stats ul {
  display: flex;
  align-items: center;
}

#cd-single .cd-header .cd-header-stats li {
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

#cd-single .cd-header .cd-header-stats li + li {
  margin-left: 32px;
  padding-left: 32px;
}

#cd-single .cd-header .cd-header-stats li + li::before {
  background: rgba(255, 255, 255, 0.4);
  content: "";
  height: 64px;
  width: 1px;
  position: absolute;
  left: 0;
}

#cd-single .cd-header .cd-header-stats li span {
  font-weight: bold;
  font-size: 25px;
}

#cd-single .cd-header .cd-header-stats li h4 {
  font-size: 16px;
  font-weight: 400;
}

#cd-single .cd-header .cd-header-stats button {
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 8px;
  padding: 8px;
  font-size: 1.1rem;
  color: #000;
  cursor: pointer;
  background-color: #00000056;
  transition: all .25s ease-in-out;
  margin: 10px;
}
#cd-single .cd-header .cd-header-stats .label {
  display: flex;
  align-items: center;
  margin-right: 8px;
}
#cd-single .cd-header .cd-header-stats .label svg {
  margin-right: 4px;
}
#cd-single .cd-header .cd-header-stats .label path {
  fill: #ffffff;   
  transition: all .25s ease-in-out;       
}
#cd-single .cd-header .cd-header-stats .number {
  color: #ffffff;
}
#cd-single .cd-header .cd-header-stats button:hover path{
  fill: #ff00fd;
}
#cd-single .cd-header .cd-header-stats button.like .number {
  color: #ff00fd
}
#cd-single .cd-header .cd-header-stats button.like svg {
  animation: transitionLike 1s ease-in;
}
#cd-single .cd-header .cd-header-stats button.like path {
  fill: #ff00fd;
}

@keyframes transitionLike {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
  }
}

#cd-single .two-columns {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
}

#cd-single .two-columns section {
  margin: 32px 0px;
  width: 100%;
}

#cd-single .two-columns section > h3 {
  font-size: 1.6rem;
  font-weight: normal;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--background-color-hee);
  padding-bottom: 8px;
}
.cd-buttonsx span {
  color: white;
  display: inline-block;
  margin-left: 8px;
}

 .cd-buttonsx .play-cd-button {
  height: 50px;
  background: #00aae0;
  border-radius: 25px;
  color: white;
  border: none;
  width: 200px;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
}

 .cd-buttonsx .download-cd-button {
  height: 50px;
  width: 50px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 25px;
  color: white;
  border: none;
  font-size: 20px;
  cursor: pointer;
}

#cd-single .music-list {
  height: 100%;
  overflow: auto;
  background: /* Shadow covers */ linear-gradient(
      white 30%,
      rgba(255, 255, 255, 0)
    ),
    linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%,
    radial-gradient(50% 0, farthest-side, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)),
    radial-gradient(
        50% 100%,
        farthest-side,
        rgba(0, 0, 0, 0.2),
        rgba(0, 0, 0, 0)
      )
      0 100%;
  background: /* Shadow covers */ linear-gradient(
  
      rgba(255, 255, 255, 0)
    ),
    linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%,
    radial-gradient(
      farthest-side at 50% 0,
      rgba(0, 0, 0, 0.2),
      rgba(0, 0, 0, 0)
    ),
    radial-gradient(
        farthest-side at 50% 100%,
        rgba(0, 0, 0, 0.2),
        rgba(0, 0, 0, 0)
      )
      0 100%;
  background-repeat: no-repeat;
 
  background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
  background-attachment: local, local, scroll, scroll;
  padding-right: 16px;
}

#cd-single .music-list::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  border-radius: 6px;
}

#cd-single .music-list::-webkit-scrollbar-thumb {
  background: #888;
  border: 0 none #fff;
  border-radius: 6px;
}

#cd-single .music-list::-webkit-scrollbar-track {
  background: #e1e1e1;
  border: 0 double #fff;
  border-radius: 6px;
}

#cd-single .music-list .music {
  width: 100%;
  display: flex;
  font-size: 1rem;
  height: 36px;
}

#cd-single .music-list .music .music-info {
  flex: 1;
  line-height: 35px;
  overflow: auto;
  text-overflow: ellipsis;
}


#cd-single .music-list .music .music-index {
  width: 60px;
}

#cd-single .music-list .music .music-index span {
  width: 36px;
  display: block;
  text-align: center;
  line-height: 36px;
}

#cd-single .music-list .music .music-index a {
  display: none;
}

#cd-single .music-list .music .music-index a button {
  height: 36px;
  width: 36px;
  border: none;
  font-size: 1.3rem;
  background: transparent;
  color: #c100a2;
  text-align: center;
}

#cd-single .music-list .music:hover .music-index a {
  display: block;
}

#cd-single .music-list .music:hover .music-index span {
  display: none;
}

#cd-single .music-list .music + .music {
  border-top: 1px solid var(--background-color-hee);
}

#cd-single .music-list .music .music-buttons button {
  background: #00aae0;
  border: none;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  height: 28px;
  margin: 4px;
  cursor: pointer;
}

#cd-single .music-list .music .music-buttons button:hover {
  background: #008db8;
}

#cd-single .music-list .music .music-buttons button:first-child {
  background: white;
  color: #c100a2;
}

#cd-single .music-list .music .music-buttons button:first-child:hover {
  background: #ececec;
}

#cd-single aside {
  margin-top: 32px;
}

#cd-single .recommended-cds {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

#cd-single .anuncio2 {
  display: block;
  height: 320px;

}




@media (min-width: 768px) {
.albums {
    grid-template-columns: repeat(3, 1fr);
  }
.three-columns-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas: "topArtists releases" "moreListened moreListened";
  }
  
  main#baixar-cds .list-cds {
    grid-template-columns: repeat(3, 1fr);
  }
  #cd-single .recommended-cds {
    grid-template-columns: repeat(3, 1fr);
  }
  #cd-single .recommended-cds {
    grid-template-columns: repeat(3, 1fr);
  }

  #cd-single .cd-header .cd-header-info {
    flex-direction: row;
  }

  #cd-single .cd-header .cd-header-info > div {
    flex: 1;
  }

  #cd-single .cd-header .cd-header-info .cd-cover {
    margin-right: 32px;
  }

}
@media (min-width: 992px) {
.albums {
    grid-template-columns: repeat(4, 1fr);
  }
 .three-columns-grid {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas: "releases moreListened topArtists";
  }
  main#baixar-cds .anuncio {
    position: sticky;
    top: 32px;
    display: block;
  }
 
  main#baixar-cds .content-and-aside-grid {
    grid-template-columns: 9fr 3fr;
  }
  #cd-single .two-columns {
    grid-template-columns:  2fr 9fr;
  }

  #cd-single .anuncio2 {
    position: sticky;
    top: 32px;
    display: block;
    height: 600px;

  }

}
@media (min-width: 1200px) {
 .albums {
    grid-template-columns: repeat(6, 1fr);
  }
  
  main#baixar-cds .list-cds {
    grid-template-columns: repeat(5, 1fr);
  }
  #cd-single .recommended-cds {
    grid-template-columns: repeat(5, 1fr);
  }
  
  #cd-single .recommended-cds {
    grid-template-columns: repeat(5, 1fr);
  }

  #cd-single .cd-header {
    height: 350px;
  }

  #cd-single .cd-header .contay2 {
    flex-direction: row;
    justify-content: space-between;
  }

  #cd-single .cd-header .cd-header-info {
    height: 350px;
  }
  #cd-single .cd-header .cd-header-info .cd-text {
    flex-direction: column;
    align-items: flex-start;
  }

  #cd-single .cd-header .cd-header-info .cd-cover {
    margin: 0 32px 0 0;
    height: 302px;
  }

  #cd-single .cd-header .cd-header-info .cd-cover img {
    height: 100%;
 
    height: 250px;
    width: 250px;
  }

  #cd-single .cd-header .cd-header-info h2 {
    text-align: left;
  }
}
@media (max-width: 992px) {
  .contay {
    margin: 0 24px;
    width: calc(100% - 48px) !important;
    float: none;
  }
}


/*********************/
/* PÁGINA BAIXAR CDS */
/*********************/

main#baixar-cds .list-cds {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

main#baixar-cds hgroup {
  margin: 32px 0px;
}

main#baixar-cds hgroup h1 {
  font-size: 2.3rem;
  margin-bottom: 8px;
}

main#baixar-cds hgroup h4 {
  font-size: 1.1rem;
  font-weight: normal;
  color: #aaa;
}

main#baixar-cds .content-and-aside-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

main#baixar-cds .content-and-aside-grid .sidebar {
  display: block;
}

main#baixar-cds .anuncio {
  position: sticky;
  top: 32px;
  width: 300px;
  max-height:600px ;
  min-height: 320px;
  
  display: block;
}


/* Album  AD*/


.album-ad {
  overflow: hidden;
  width: 100%;
  position: relative;
  background:rgba(9, 145, 16, 0.041);
  transition: visibility 0.1s linear;

}


.album-ad .album-cover-container {
  position: relative;
  width: 100%;
 
}

.album-ad .album-cover-container::after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.album-ad .album-cover {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 2px;
}



.album-ad .album-cover::after {
  justify-content: center;
  font-family: "feather" !important;
  content: "\e9b0";
  display: flex;
 
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(133, 9, 145, 0.4);
  
  visibility: hidden;
  cursor: pointer;
  color: white;
  transition: visibility 0.2s linear;
}

.album-ad .album-cover img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: filter 0.1s linear;
}

.album-ad .time {
  color: #979797;
  font-size: 0.8rem;
  margin-bottom: 4px;
  display: block;
}

.album-ad .album-cover:hover::after {
  visibility: visible;
}

.album-ad .album-cover:hover img {
  filter: blur(2px);
}

.album-ad .album-category {
  position: absolute;
  top: 8px;
  left: 8px;
  background-color: rgba(255, 255, 255, 0.3);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
color: rgb(252, 252, 252);
  padding: 4px;
  border-radius: 2px;
  z-index: 5;
}

.album-ad .artist {
  margin-top: 4px;
}

.album-ad .artist a {
  display: flex;
  align-items: center;
  text-decoration: none;
  
}

.album-ad .artist img {
  border-radius: 50%;
  height: 24px;
  width: 24px;
  margin-right: 8px;
}

.album-ad .artist span {
  color: #686868;
  font-size: 0.9rem;
}

.album-ad .album-info {
  margin-top: 16px;
}

.album-ad .album-info h3 a {
  font-size: 1.3rem;
  font-weight: bold;
  color: var(--text-color);
  text-decoration: none;
}
.album-ad .album-info .adcd{
  width: 12px;
  height: 12px;
  float: right;
  margin: 0 5px 0 5px;
}
.album-ad .album-info .adcdx2{
  width: 12px;
  height: 12px;
  float: right;
  margin: 0 5px 0 5px;
}
.album .album-info .adcdx2{
  width: 12px;
  height: 12px;
  float: right;
  margin: 0 5px 0 5px;
}
.album-ad .album-info .proilimitado{
 font-weight: bold;
  float: right;
  font-size: 0.9em;
  background: black;
  padding: 2px;
  border-radius: 2px;
  margin: 0 5px 0 0;
  color: #00aae0;
}

.album-ad .album-info span a {
  font-size: 0.9rem;
  text-decoration: none;

  color: #ababab;
}

/* Paginação */

.new-pagination {
  display: flex;
  justify-content: center;
  margin: 64px auto;
  flex-wrap: wrap;
  align-items: center;
}

.new-pagination button {
  border-radius: 50%;
  padding: 8px;
  background: #f0f0f033;
  outline: none;
  border: none;
  height: 50px;
  width: 50px;
  flex-grow: 0;
  flex-shrink: 0;
  cursor: pointer;
}

.new-pagination button i {
  font-size: 1.4rem;
}

.new-pagination ul {
  display: flex;
  flex-wrap: wrap;
  padding: 0px 16px;
  border-radius: 25px;
  min-height: 50px;
  background: #f0f0f033;
  margin: 16px;
  flex: 1;
  justify-content: center;
}

.new-pagination ul li {
  list-style: none;
  margin: 0px 4px;
  padding: 0px;
  height: 50px;
  min-width: 50px;
}

.new-pagination ul li a {
  text-decoration: none;
  padding: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.1rem;
  height: 50px;
  border-radius: 4px;
  color: #000;
}

.new-pagination ul li.current a {
  background: rgb(128, 27, 141);
  color: white;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
}

.new-pagination ul li:hover a {
  background: rgba(0, 0, 0, 0.1);
}

.new-pagination ul li.current:hover a {
  background: rgb(128, 27, 141);
}
/*BALADAG4 ADS*/
.anuncio-grid2{
  display: grid;
  grid-template-columns:1fr;

  align-items: center;
  margin: 15px 0 30px 0;
  height: 280px;
 
  padding: 2px;
  
 
 

}
.anuncio-grid2 p{
  font-size: 0.6rem;
  text-align: center;
  
  
}

.anuncio-grid-conteudo27{
  display: grid;
  grid-template-columns:1fr;
  padding: 5px;
border: 1px solid   rgba(116, 116, 116, 0.3);
  text-align: center;
  height: 280px;
  margin: 2px;
 
}
@media (min-width: 768px) {

  main#baixar-cds .list-cds {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 992px) {
  main#baixar-cds .anuncio {
    position: sticky;
    top: 32px;
    display: block;
  }

  main#baixar-cds .content-and-aside-grid {
    grid-template-columns: 9fr 3fr;
  }
}
@media (min-width: 1200px) {
  main#baixar-cds .list-cds {
    grid-template-columns: repeat(5, 1fr);
  }
}



/* CODIGO LARI *
/* Container principal */
.list-artistas-25 {
  width: 100%;
  float: left;
}

/* Item individual */
.list-artistas-25 .item {
  position: relative;
  flex-direction: column;
  align-items: flex-start;
  padding: 20px;
  margin-bottom: 0;
 
  display: flex;
  transition: background-color 0.2s ease;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0;
  height: auto;
  min-height: 80px;
}

.list-artistas-25 .item:hover {
  background: #222;
  transform: none;
}

/* Imagem do artista */
.list-artistas-25 .item img.avatar {
  position: absolute;
  left: 20px;
  top: 20px;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.1);
}

/* Título */
.list-artistas-25 .item h1 {
  font-size: 1.1rem;
  margin: 0 0 8px 75px;
 
}

/* Links gerais */
.list-artistas-25 .item a {
  color: var(--text-color);
  text-decoration: none;
}

/* Área do autor */
.list-artistas-25 .item .autor {
  font-size: 0.85rem;
  margin-left: 75px;
  margin-bottom: 5px;
  color: #666;
}

.list-artistas-25 .item .autor span {
  font-size: 0.9em;
  margin-right: 10px;
}

.list-artistas-25 .item .autor a {
  color: #ff4757;
  font-weight: 500;
}

/* Detalhes */
.list-artistas-25 .item .detalhes {
  font-size: 0.8em;
  margin-left: 75px;
  color: #666;
}

.list-artistas-25 .item .detalhes ul {
  display: flex;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.list-artistas-25 .item .detalhes ul li {
  float: left;
  margin-right: 5px;
  color: #666;
}

/* Player e botão */
.list-artistas-25 .item .player {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  padding: 5px;
  text-align: center;
  color: #ff4757;
  cursor: pointer;
}

.list-artistas-25 .item .player img {
  width: 20px;
  height: 20px;
  opacity: 0.8;
  margin-right: 5px;
}

.list-artistas-25 .item .player span a {
  background: #ff4757;
  color: white;
  padding: 8px 20px;
  border-radius: 25px;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.2s ease;
  text-decoration: none;
  display: inline-block;
}

.list-artistas-25 .item .player span a:hover {
  background: #ff5f6d;
  transform: scale(1.05);
  text-decoration: none;
}

/* Responsividade para tablets */
@media (max-width: 768px) {
  .list-artistas-25 .item {
      margin-bottom: 20px;
  }

  .list-artistas-25 .item h1 {
      font-size: 1.2em;
      margin-bottom: 7px;
  }

  .list-artistas-25 .item .autor span {
      font-size: 1em;
  }

  .list-artistas-25 .item .detalhes {
      font-size: 0.9em;
  }

  .list-artistas-25 .item .player {
      margin-top: 0;
  }
}

/* Responsividade para mobile */
@media (max-width: 480px) {
  .list-artistas-25 .item {
      flex-direction: column;
      text-align: center;
      padding: 1rem;
  }

  .list-artistas-25 .item img.avatar {
    float: none;
    width: 80px;
    height: 80px;
    margin: 0px auto 1rem;
}

  .list-artistas-25 .item h1,
  .list-artistas-25 .item .autor,
  .list-artistas-25 .item .detalhes {
      margin-left: 0;
      text-align: center;
      width: 100%;
  }

  .list-artistas-25 .item .detalhes ul {
      justify-content: center;
      flex-wrap: wrap;
  }

  .list-artistas-25 .item .player {
      position: static;
      transform: none;
      margin: 1rem auto 0 auto;
  }
}

/* Animação do botão play */
@keyframes pulsePlay {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.list-artistas-25 .item .player span a:hover {
  animation: pulsePlay 1s ease infinite;
}
/* CODIGO LARI *

/* CODIGO LARI adm *
/* Tema alternativo mantendo estrutura original */
.single-perfil {
  display: grid;
  grid-template-areas: 
    "welcome welcome"
    "sidebar main"
    "sidebar content";
  grid-template-columns: minmax(300px, 350px) 1fr;
  gap: 2rem;
  max-width: 1400px;
  margin: 2rem auto;
  padding: 0 1.5rem;
}

/* Seção de boas-vindas */
.single-perfil .bem-vindo {
  grid-area: welcome;
  background: var(--background-color-hee);
  padding: 2.5rem;
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.single-perfil .bem-vindo::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 40%;
  height: 100%;
  background: linear-gradient(135deg, transparent, rgba(7, 131, 214, 0.1));
  z-index: 1;
}

.single-perfil .bem-vindo h1 {
  font-size: 2.5rem;
  font-weight: 800;
  margin-bottom: 1rem;
  color: var(--text-color);
  position: relative;
}

.single-perfil .bem-vindo small {
  font-size: 1.1rem;
  color: var(--text-color);
  opacity: 0.8;
  position: relative;
  z-index: 2;
}

.single-perfil .bem-vindo li {
  list-style: none;
  position: relative;
  z-index: 2;
}

.single-perfil .bem-vindo img {
  max-height: 40px;
  transition: transform 0.3s ease;
}

.single-perfil .bem-vindo img:hover {
  transform: scale(1.1);
}

/* Área do perfil/sidebar */
/* Perfil Sidebar */
.single-perfil .profile {
  grid-area: sidebar;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  position: sticky;
  top: 2rem;
  align-self: start;
}

/* Área da foto */
.single-perfil .photo {
  background: var(--background-color-hee);
  border-radius: 20px;
  padding: 2rem;
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}
.single-perfil .photo .imgperfil {
  width: 180px;
  height: 180px;
  border-radius: 20px;
  object-fit: cover;
  border: 4px solid var(--background-color);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  transition: all 0.3s ease;
}
.single-perfil .photo .imgperfil:hover {
  transform: translateY(-5px);
  border-color: var(--background-color-bg-blu);
}
.single-perfil .photo h2 {
  margin-top: 1rem;
  width: 100%;
  text-align: center;
  position: relative;
  z-index: 2; /* Garante que o link fique acima de outros elementos */
}
.single-perfil .photo h2 a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-color);
  text-decoration: none;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  background: var(--background-color);
  transition: all 0.2s ease;
  font-size: 0.9rem;
  font-weight: normal;
}
.single-perfil .photo h2 a:hover {
  color: var(--background-color-bg-blu);
}
.single-perfil .photo h2 .imgicon {
  width: 20px;
  height: 20px;
  opacity: 0.7;
}
.single-perfil .photo h2 a:hover {
  background: var(--background-color-bg-blu);
  color: white;
}
.single-perfil .photo .imgicon {
  width: 20px;
  height: 20px;
  opacity: 0.7;
}

.single-perfil .photo::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(to top, var(--background-color-hee), transparent);
  z-index: 0;
  border-radius: 20px;
}




/* Menu de navegação */
.single-perfil .nav {
  background: var(--background-color-hee);
  border-radius: 20px;
  padding: 1.5rem;
}

.single-perfil .nav ul {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.single-perfil .nav ul li {
  list-style: none;
}

.single-perfil .nav ul li a {
  display: flex;
  align-items: center;
  padding: 1rem 1.25rem;
  background: var(--background-color);
  border-radius: 12px;
  color: var(--text-color);
  text-decoration: none;
  transition: all 0.2s ease;
}

.single-perfil .nav ul li a img {
  width: 24px;
  height: 24px;
  margin-right: 1rem;
  opacity: 0.8;
  transition: all 0.2s ease;
}

.single-perfil .nav ul li a:hover {
  background: var(--background-color-bg-blu);
  color: white;
  transform: translateX(5px);
}

.single-perfil .nav ul li a:hover img {
  opacity: 1;
  transform: scale(1.1);
}

/* Área da Capa */
/* Área da Capa e Alteração */
.single-perfil .capa {
  grid-area: main;
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: var(--background-color-hee);
  margin-bottom: 0; /* Remove margem inferior */
}

.single-perfil .capa img {
  width: 100%;
  height: auto;
  max-height: 300px;
  object-fit: cover;
  display: block; /* Garante que não haja espaço extra abaixo da imagem */
}
/* Nova estilização para área de alteração de capa */
.single-perfil .altera-capa {
  background: var(--background-color-hee);
  padding: 1rem 1.5rem;
  border-radius: 0 0 20px 20px;
  margin-top: -1px; /* Conecta com a imagem acima */
  position: relative;
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.single-perfil .capa:hover img {
  transform: scale(1.05);
}

.single-perfil .altera-capa h1 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1rem;
  margin: 0;
  padding: 0.5rem 0;
}

.single-perfil .altera-capa .imgicon {
  width: 24px;
  height: 24px;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}




.single-perfil .altera-capa a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-color);
  text-decoration: none;
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  background: var(--background-color);
  transition: all 0.2s ease;
}

.single-perfil .altera-capa a:hover {
  background: var(--background-color-bg-blu);
  color: white;
  transform: translateY(-2px);
}
.single-perfil .altera-capa a:hover .imgicon {
  opacity: 1;
  filter: brightness(0) invert(1);
}

/* Formulário */
.single-perfil form {
  grid-area: form;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  background: var(--background-color-hee);
  padding: 2rem;
  border-radius: 20px;
}

.single-perfil form label {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.single-perfil form span {
  color: var(--text-color);
  font-size: 0.9rem;
  font-weight: 500;
}

.single-perfil form input,
.single-perfil form select {
  padding: 0.875rem 1rem;
  border: 2px solid transparent;
  border-radius: 10px;
  background: var(--background-color);
  color: var(--text-color);
  font-size: 1rem;
  transition: all 0.2s ease;
}

.single-perfil form input:focus,
.single-perfil form select:focus {
  border-color: var(--background-color-bg-blu);
  outline: none;
}

.single-perfil form input[type="submit"] {
  grid-column: 1 / -1;
  background: var(--background-color-bg-blu);
  color: white;
  font-weight: 600;
  cursor: pointer;
  padding: 1rem;
}

.single-perfil form input[type="submit"]:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
}
/* Área de conteúdo principal */
.paienl-som {
  grid-area: content;
  background: var(--background-color-hee);
  border-radius: 20px;
  padding: 2rem;
}

.paienl-som h1 {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid rgba(0, 0, 0, 0.06);
}

/* Lista de itens */
.painel-som-lista {
  background: var(--background-color);
  border-radius: 12px;
  padding: 1rem 1.5rem;
  margin: 0.75rem 0;
  transition: all 0.2s ease;
}

.painel-som-lista:hover {
  transform: translateX(5px);
  background: var(--background-color);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.painel-som-lista p {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--text-color);
}

.painel-som-lista a {
  color: var(--text-color);
  text-decoration: none;
  font-weight: 500;
}

.painel-som-lista a:hover {
  color: var(--background-color-bg-blu);
}

/* Ações na lista */
.painel-som-lista span {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.painel-som-lista img {
  width: 24px;
  height: 24px;
  padding: 4px;
  border-radius: 6px;
  transition: all 0.2s ease;
  cursor: pointer;
}

.painel-som-lista img:hover {
  background: var(--background-color-hee);
  transform: scale(1.15);
}

/* Linha divisória */
.painel-som-linha {
  height: 1px;
  background: rgba(0, 0, 0, 0.04);
  margin: 0.5rem 0;
  border: none;
}

/* Paginação */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 2.5rem;
  gap: 1rem;
}

.pagination ul {
  display: flex;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
}

.pagination a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 1rem;
  border-radius: 10px;
  background: var(--background-color);
  color: var(--text-color);
  text-decoration: none;
  transition: all 0.2s ease;
}

.pagination a:hover {
  background: var(--background-color-bg-blu);
  color: white;
  transform: translateY(-2px);
}

/* Responsividade */
@media (max-width: 1024px) {
  .single-perfil {
    grid-template-areas: 
      "welcome"
      "sidebar"
      "main"
      "form";
    grid-template-columns: 1fr;
  }
  .single-perfil .profile {
    position: relative;
    top: 0;
  }

  .single-perfil .bem-vindo {
    text-align: center;
  }

  .single-perfil .bem-vindo small {
    max-width: 100%;
  }

  .single-perfil .profile {
    position: relative;
    top: 0;
  }
}

@media (max-width: 768px) {
  .single-perfil {
    margin: 1rem;
    padding: 0;
  }
  .single-perfil .altera-capa {
    padding: 1rem;
    justify-content: center; /* Centraliza em telas menores */
  }
  .single-perfil .photo h2 {
    display: block;
  }
  
  .single-perfil .photo h2 a {
    display: inline-flex;
  }
  .single-perfil .altera-capa a {
    width: 100%; /* Botão ocupa toda a largura */
    justify-content: center;
    padding: 0.75rem 1rem;
  }

  .single-perfil .bem-vindo h1 {
    font-size: 2rem;
  }

  .single-perfil form {
    grid-template-columns: 1fr;
  }

  .single-perfil .photo .imgperfil {
    width: 150px;
    height: 150px;
  }

  .paienl-som {
    padding: 1.5rem;
  }

  .single-perfil .nav ul li a {
    padding: 0.875rem 1rem;
  }

  .pagination {
    flex-wrap: wrap;
  }
}

@media (max-width: 480px) {
  .single-perfil .bem-vindo h1 {
    font-size: 2rem;
  }
  .single-perfil {
    margin: 0.5rem;
  }
  .single-perfil .altera-capa h1 {
    font-size: 0.9rem;
  }
  
  .single-perfil .altera-capa .imgicon {
    width: 20px;
    height: 20px;
  }

  .single-perfil .bem-vindo {
    padding: 1.5rem;
  }
  .single-perfil .nav ul li a {
    padding: 0.75rem 1rem;
  }

  .painel-som-lista p {
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
  }

  .painel-som-lista span {
    width: 100%;
    justify-content: flex-end;
  }
}
/* CODIGO LARI adm */

/* CODIGO LARI play */
/* Definição de variáveis para ambos os temas */

/* Aplicação nas classes do player */
/* Aplicação das variáveis nos elementos */
.container779 {
  background-color: var(--background-color);
  color: var(--text-color);
}

.player-header {
  background: var(--gradient);
 
  border-color: var(--player-border);
}

.player-info h1,
.track-title,
.track-info {
  color: var(--text-color);
}

.track-artist,
.track-secondary,
.stat-label {
  color: var(--text-color2);
}

.stats-grid {
 
  background: var(--background-color-hee);
}

.track-list {
  background: var(--background-color-hee);
  border-color: var(--player-border);
}

.track-item:hover {
  background: var(--track-hover);
}

.center, 
.bled-bolado {
  background: var(--background-color-hee);
  border-color: var(--player-border);
}

/* Mantendo cores consistentes para botões */
.btn-play{
  background: var(--gradient-primary);
  color: var(--dark);
}

.btn-download,
.track-btn-download {
  background: var(--gradient-download);
  transition: all 0.3s ease;
  color: white;
}
.btn-download:hover  {
  transform: translateY(-2px);
  filter: brightness(1.1);
}

/* Ajustes específicos para textos e elementos interativos */
.text,
small,
.texto-ads {
  color: var(--container-secondary);
}

.track-list h2 {
  color: var(--text-color);
}

.artist-info {
  color: var(--container-text);
}

.follow-btn {
  border-color: var(--container-secondary);
  color: var(--container-text);
}


/* Estilos base */
.container779 {
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem;
}
.bt-large.baixar:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
}
.bt-large.baixar {
  
  color: var(--dark);
}

.bt-large.baixar:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
}
/* Player Header */
.player-header {
 
  border-radius: 16px;
            padding: 2.5rem;
            display: grid;
            grid-template-columns: auto 1fr;
            gap: 3rem;
            align-items: center;
            margin-bottom: 2rem;
            position: relative;
            overflow: hidden;
}

/* Capa do álbum */
.cover-art {
  width: 280px;
  height: 280px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px var(--shadow);
  position: relative;
  z-index: 2;
}

.cover-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Informações do player */
.player-info {
  position: relative;
  z-index: 2;
}

.player-info h1 {
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 1.5rem;

}

/* Linha do artista */
.artist-row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

.artist-info {
  display: flex;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
  color: var(--text-primary);
  font-size: 1.1rem;
}

.artist-info img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

/* Botões */
.follow-btn {
  background: transparent;
  border: 1px solid var(--gray);
  color: var(--light);
  padding: 0.6rem 1.5rem;
  border-radius: 24px;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.follow-btn:hover {
  background: var( --dark-3);
  border-color: var( --dark-3);
  transform: translateY(-2px);
}

/* Controles do player */
.player-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.player-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  height: 56px;
  padding: 0 2rem;
  border: none;
  border-radius: 28px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-play {
  background: var(--gradient-primary);
 
}



.btn-heart {
  width: 56px;
  padding: 0;
  background: transparent;
  border: 2px solid var(--gray);
            color: var(--gray);
}

.btn-heart:hover {
  border-color: var(--heart);
            color: var(--heart);
  transform: scale(1.05);
}

.btn-heart.active {
  background: var(--heart);
  border-color: var(--heart);
  color: var(--light);
}

.player-btn:hover {
  transform: scale(1.02);
  filter: brightness(1.1);
}

/* Grid de estatísticas */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  padding: 2rem;
 
  border-radius: 16px;
  margin-top: 2rem;

}

.stat-item {
  text-align: center;
}

.stat-value {
  background: var(--text-color);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 20px var(--gradient-primary);
  animation: glow 1.5s ease-in-out infinite alternate;
  font-size: 2.5rem;
  font-weight: 800;
  margin-bottom: 0.5rem;
 
}

.stat-label {
  color: var(--gray);
  font-size: 0.95rem;
}

/* Layout elementos */
.elemetar {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 1rem;
  margin: 2rem 0;
}

/* Central */
.center {
  text-align: center;
  padding: 2rem;

  border-radius: 16px;
 
}

.center .text {
  color: var(--text-secondary);
  display: block;
  margin-bottom: 2rem;
  max-width: 800px;
  margin: 0 auto 2rem auto;
}

.center small {
  display: block;
  color: var(--text-secondary);
  margin-top: 1rem;
  font-size: 0.9rem;
}

/* Áreas de marketing */
.mkt100, .bled-bolado {
  text-align: center;
  padding: 2rem;
  border-radius: 16px;


}

.texto-ads {
  color: var(--text-secondary);
  text-align: center;
  font-size: 0.8rem;
  margin-bottom: 0.5rem;
  height: 280px;
}

/* Lista de faixas */
.track-list {

  border-radius: 16px;
  padding: 2rem;

}

.track-list h2 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.track-item {
  display: flex;
  align-items: center;
  padding: 1rem;
  border-radius: 8px;
  transition: background 0.2s ease;
}

.track-item:hover {
  background: var(--player-hover);
}

.track-info {
  flex: 1;
  color: var(--text-color2);
}

.track-title {

  margin-bottom: 0.25rem;
}

.track-artist {
 
  font-size: 0.9rem;
}

.track-controls {
  display: flex;
  gap: 0.5rem;
}

.track-btn {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 20px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.track-btn-play{
  background: var(--background-color);
  box-shadow: 0 2px 8px var(--glow-play);
  transition: all 0.3s ease;
  color: var(--text-color2);

}
.track-btn-play:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
}
.track-btn-play-cd{
  background: var(--gradient-primary);
  box-shadow: 0 4px 15px var(--glow-primary);
  color: var(--dark);
  transition: all 0.3s ease;

}
.track-btn-play-cd:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px var(--glow-primary);
}

.track-btn-download {
  background: var(--background-color-hee);
  color: var(--text-color2) ;
}


/* Responsividade */
@media (max-width: 1200px) {
  .player-header {
    padding: 2rem;
    gap: 2rem;
  }
  
  .cover-art {
    width: 240px;
    height: 240px;
  }
  
  .player-info h1 {
    font-size: 2.8rem;
  }
}

@media (max-width: 768px) {
 
  
  .elemetar {
    grid-template-columns: 1fr;
  }
  
  .player-header {
    grid-template-columns: 1fr;
    text-align: center;
  }
  
  .cover-art {
    width: 200px;
    height: 200px;
    margin: 0 auto;
  }
  
  .player-info h1 {
    font-size: 2rem;
  }
  
  .artist-row {
    flex-direction: column;
  }
  
  .player-controls {
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
  
  .track-list {
    padding: 1rem;
  }
  
  .track-item {
    position: relative;
    padding: 1rem;
    border-bottom: 1px solid var(--border);
  }
  
  .track-controls {
   
    justify-content: flex-end;
  }
}

@media (max-width: 480px) {
  .track-btn {
    font-size: 0.8rem;
    padding: 0.6rem;
  }
  
  .track-controls {
    flex-direction: row;
    gap: 0.5rem;
  }
  
  .stat-value {
    font-size: 1.8rem;
  }
  
  .stat-label {
    font-size: 0.8rem;
  }
}
/* CODIGO LARI play */

/* CODIGO LARI artista */
/* Variáveis de cores e temas */


.modern-artist {
  background: var(--spotify-black);
  color: var(--spotify-white);
  min-height: 100vh;
  padding: 0;
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Header do artista com gradiente e imagem de fundo */
.modern-artist-header {
  position: relative;
  padding: 6rem 2rem 2rem;
  background: var(--spotify-gradient);
  min-height: 340px;
  display: flex;
  align-items: flex-end;
}

.modern-artist-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(transparent 0,rgba(0,0,0,.8) 100%);
  z-index: 1;
}

.modern-artist-header .bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.6);
  z-index: 0;
}

/* Informações do artista */
.modern-artist-info {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.modern-artist-profile {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.modern-artist-profile img {
  width: 232px;
  height: 232px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 4px 60px rgba(0,0,0,.5);
}

.modern-artist-profile-info {
  flex: 1;
}

.modern-artist-profile-info h1 {
  font-size: 4.5rem;
  font-weight: 900;
  margin: 0.5rem 0;
  line-height: 1;
}

.modern-artist-stats {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--spotify-light-gray);
  font-size: 1.3rem;
}

/* Botões de ação */
.modern-artist-actions {
  display: none;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
}

.modern-btn {
  padding: 0.8rem 2rem;
  border-radius: 500px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
}

.modern-btn-primary {
  background: var(--spotify-green);
  color: var(--spotify-black);
}

.modern-btn-primary:hover {
  transform: scale(1.04);
  background:var(--text-color2);
}

.modern-btn-secondary {
  background: transparent;
  color: var(--spotify-white);
  border: 1px solid rgba(255,255,255,0.3);
}

.modern-btn-secondary:hover {
  border-color: var(--spotify-white);
  transform: scale(1.04);
}

.modern-btn-icon {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Menu de navegação */
.modern-artist-nav {
  background: var(--spotify-dark);
  padding: 1rem 2rem;
  margin-top: 1rem;
  width: 100%;
}

.modern-artist-nav ul {
  display: flex;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.modern-artist-nav a {
  color: var(--spotify-light-gray);
  text-decoration: none;
  font-weight: 600;
  padding: 0.5rem 0;
  position: relative;
  width: 100%;
}

.modern-artist-nav a:hover {
  color: var(--spotify-white);
}

.modern-artist-nav a.active {
  color: var(--spotify-white);
}

.modern-artist-nav a.active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 3px;
  background: var(--spotify-green);
}

/* Conteúdo principal */
.modern-artist-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

/* Lista de músicas */
.modern-track-list {
  margin-top: 2rem;
}

.modern-track-item {
  display: flex;
  align-items: center;
  padding: 0.8rem;
  border-radius: 4px;
  transition: background 0.2s;
}

.modern-track-item:hover {
  background: var(--spotify-hover);
}

.modern-track-number {
  width: 40px;
  color: var(--spotify-light-gray);
}

.modern-track-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.modern-track-title {
  color: var(--spotify-white);
  font-weight: 500;
}

.modern-track-artist {
  color: var(--spotify-light-gray);
  font-size: 0.9rem;
}

.modern-track-duration {
  color: var(--spotify-light-gray);
  margin-left: auto;
}

/* Grid de álbuns/CDs */
.modern-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.modern-grid-item {
  background: var(--spotify-darker);
  padding: 1rem;
  border-radius: 6px;
  transition: background 0.2s;
}

.modern-grid-item:hover {
  background: #333333;
}

.modern-grid-item img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 1rem;
}

.modern-grid-item h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  color: var(--spotify-white);
}

.modern-grid-item p {
  font-size: 0.9rem;
  color: var(--spotify-light-gray);
  margin: 0.5rem 0 0;
}

/* Responsividade */
@media (max-width: 1024px) {
  .modern-artist-profile {
    flex-direction: column;
    text-align: center;
  }

  .modern-artist-profile img {
    width: 192px;
    height: 192px;
  }

  .modern-artist-profile-info h1 {
    font-size: 3.5rem;
  }

  .modern-artist-stats {
    justify-content: center;
  }

  .modern-artist-actions {
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .modern-artist-header {
    padding: 4rem 1rem 1rem;
  }

  .modern-artist-profile-info h1 {
    font-size: 2.5rem;
  }

  .modern-artist-nav {
    overflow-x: auto;
    padding: 1rem;
  }

  .modern-artist-nav ul {
    width: max-content;
  }

  .modern-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
}

@media (max-width: 480px) {
  .modern-artist-actions {
    flex-wrap: wrap;
  }

  .modern-btn {
    width: 100%;
  }
}

/* Variáveis e configurações base */


.modern-artist {
  background: var(--spotify-black);
  color: var(--spotify-white);
  min-height: 100vh;
}

/* Header principal com fundo e informações */
.modern-artist-header {
  position: relative;
  height: 450px;
  width: 100%;
  padding-bottom: 0;
  overflow: hidden;
}

.modern-artist-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(transparent 0%, rgba(0,0,0,0.8) 100%);
  z-index: 1;
}

.modern-artist-header .bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.7);
}

.modern-artist-info {
  position: relative;
  z-index: 2;
  padding: 2rem;
  display: flex;
  align-items: flex-end;
  height: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

.modern-artist-profile {
  display: flex;
  align-items: flex-end;
  gap: 2rem;
}

.modern-artist-profile img {
  width: 232px;
  height: 232px;
  border-radius: 50%;
  border: 4px solid rgba(255,255,255,0.2);
  box-shadow: 0 4px 60px rgba(0,0,0,.5);
}

.modern-artist-profile-info {
  margin-bottom: 2rem;
}

.monthly-listeners {
  font-size: 1.1rem;
  color: var(--spotify-light-gray);
  margin-bottom: 0.5rem;
}

.modern-artist-profile-info h1 {
  font-size: 5rem;
  font-weight: 900;
  margin: 0.5rem 0;
  line-height: 1;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
  color: #FFF;
}

/* Menu de navegação - Agora abaixo do header */
.modern-artist-nav {
  background: rgba(0,0,0,0.3);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  position: sticky;
  top: 0;
  z-index: 100;
}

.modern-artist-nav ul {
  display: flex;
  gap: 2rem;
  list-style: none;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
}

.modern-artist-nav a {
  display: block;
  padding: 1rem 0;
  color: var(--spotify-light-gray);
  text-decoration: none;
  font-weight: 600;
  position: relative;
  transition: color 0.2s;
}

.modern-artist-nav a:hover,
.modern-artist-nav a.active {
  color: var(--spotify-white);
}

.modern-artist-nav a.active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--spotify-green);
}

/* Grid de lançamentos */
.releases-grid {
  max-width: 1400px;
  margin: 2rem auto;
  padding: 0 2rem;
}

.releases-grid h2 {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.grid-item {
  background: var(--spotify-darker);
  padding: 1rem;
  border-radius: 8px;
  transition: background 0.3s ease;
}

.grid-item:hover {
  background: var(--spotify-hover);
}

.grid-item img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 1rem;
}

.grid-item h3 {
  font-size: 1rem;
  margin: 0.5rem 0;
}

.grid-item p {
  font-size: 0.9rem;
  color: var(--spotify-light-gray);
}

/* Lista de músicas */
.tracks-list {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
}

.track-item {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  padding: 0.8rem;
  gap: 1rem;
  border-radius: 4px;
  transition: background 0.2s;
}

.track-item:hover {
  background: var(--spotify-hover);
}

.track-number {
  width: 40px;
  text-align: right;
  color: var(--spotify-light-gray);
}

.track-info {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.track-title {
  color: var(--spotify-white);
  font-weight: 500;
}

.track-artist {
  color: var(--spotify-light-gray);
  font-size: 0.9rem;
}

.track-duration {
  color: var(--spotify-light-gray);
}

.track-actions {
  display: flex;
  gap: 0.5rem;
  opacity: 0;
  transition: opacity 0.2s;
}

.track-item:hover .track-actions {
  opacity: 1;
}


/* Modern Pagination Styles */
.modern-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 40px 0;
  width: 100%;
  margin: 0 auto;
}

.pagination-numbers {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pagination-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  text-decoration: none;
  transition: all 0.2s ease;
  font-size: 14px;
  border: none;
  cursor: pointer;
}

/* Botões de número precisam de padding horizontal */
.pagination-numbers .pagination-btn {
  padding: 0 12px;
}

/* Botões de seta (prev/next) são sempre círculos perfeitos */
.pagination-btn i {
  font-size: 16px;
  line-height: 1;
}

.pagination-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
}

.pagination-btn.active {
  background: var(--text-color2); /* Spotify green */
  color: #000;
}

.pagination-dots {
  color: #fff;
  opacity: 0.7;
  padding: 0 4px;
  font-size: 14px;
}

/* Contenedor da grid para centralizar a paginação */
.albums-grid-container7 {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* Responsivo */
@media (max-width: 640px) {
  .modern-pagination {
      gap: 6px;
      padding: 30px 0;
  }
  
  .pagination-numbers {
      gap: 6px;
  }
  
  .pagination-btn {
      min-width: 28px;
      height: 28px;
      font-size: 13px;
  }
  
  .pagination-numbers .pagination-btn {
      padding: 0 10px;
  }
}


/* Responsividade */
@media (max-width: 1200px) {
  .grid-container {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 992px) {
  .grid-container {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .modern-artist-profile-info h1 {
    font-size: 4rem;
  }
}

@media (max-width: 768px) {
  .modern-artist-header {
    height: auto;
    padding-bottom: 2rem;
  }

  .modern-artist-profile {
    flex-direction: column;
    align-items: center;
    text-align: center;

  }

  .modern-artist-profile img {
    width: 180px;
    height: 180px;
  }

  .modern-artist-profile-info h1 {
    font-size: 3rem;
  }

  .grid-container {
    grid-template-columns: 1fr;
  }

  .track-item {
    grid-template-columns: 1fr auto;
    gap: 0.5rem;
  }

  .track-number {
    display: none;
  }
}



/* Container principal do conteúdo */
.content-wrapper78 {
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem;
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 2rem;
}

@media (max-width: 768px) {
  .content-wrapper78 {
   
    grid-template-columns: 1fr;
    gap: 1rem;
  }

}
@media (max-width: 390px) {
  .content-wrapper78 {
   
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .sidebar78{

    position: relative; /* Garante que a div siga o fluxo natural da página */
    height: auto;
    background: var(--spotify-darker); /* Cor de fundo da sidebar */
    padding: 1.5rem;
    border-radius: 8px;
    z-index: 1; /* Baixo o suficiente para que não sobreponha outros elementos */

}
  
}

/* Sidebar */
.sidebar78 {
  
 
  height: fit-content;
  padding: 1.5rem;
  background: var(--spotify-darker);
  border-radius: 8px;
  padding: 2px;
}

.sidebar-header {
  margin-bottom: 1.5rem;
}

.sidebar-header78 h2 {
  font-size: 1.2rem;
  color: var(--spotify-white);
  margin-bottom: 0.5rem;
}

.sidebar-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Área de anúncios na sidebar */
.sidebar-ad7 {
  width: 100%;
  min-height: 250px;
  margin: 1rem 0;
  background: rgba(255,255,255,0.1);
  border-radius: 8px;
  overflow: hidden;
}

/* Container principal dos álbuns */
.albums-grid-container7 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 24px;
}

/* Card do álbum */
.album-card7 {
  background: var(--spotify-darker);
  padding: 1rem;
  border-radius: 6px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.album-card7:hover {
  background: rgba(255,255,255,0.1);
  transform: translateY(-4px);
}

/* Imagem de capa */
.album-cover99 {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  margin-bottom: 1rem;
  border-radius: 4px;
  overflow: hidden;
}

.album-cover99 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.album-card7:hover .album-cover img {
  transform: scale(1.05);
}

/* Informações do álbum */
.album-info99 {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.album-title {
  font-weight: 600;
  font-size: 1rem;
  color: var(--spotify-white);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.album-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--spotify-light-gray);
}

.album-genre {
  padding: 2px 8px;
  background: rgba(255,255,255,0.1);
  border-radius: 12px;
  font-size: 0.75rem;
}

.album-date {
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.5px;
}

/* Botão de play que aparece no hover */
.play-button {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 40px;
  height: 40px;
  background: var(--spotify-green);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
}

.album-card7:hover .play-button {
  opacity: 1;
  transform: translateY(0);
}

.play-button i {
  color: var(--spotify-black);
  font-size: 1.2rem;
}

/* Contrate box na sidebar */
.contrate-box {
  background: linear-gradient(45deg, #ff6b6b, #ee5253);
  padding: 1.5rem;
  border-radius: 8px;
  color: white;
  text-align: center;
  margin-top: 2rem;
}

.contrate-box h3 {
  font-size: 1.2rem;
  margin-bottom: 1rem;
}

.contrate-box .phone {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.contrate-box .website {
  font-size: 0.9rem;
  opacity: 0.9;
}

/* Social links na sidebar */
.social-links {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}

.social-links a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.1);
  transition: all 0.3s ease;
}

.social-links a:hover {
  background: rgba(255,255,255,0.2);
  transform: translateY(-2px);
}

.social-links i {
  color: white;
  font-size: 1.1rem;
}

/* Responsividade */
@media (max-width: 1200px) {
  .content-wrapper {
    grid-template-columns: 250px 1fr;
  }
}

@media (max-width: 992px) {
  .content-wrapper {
    grid-template-columns: 1fr;
  }
  
  .sidebar {
    display: none;
  }

  .albums-grid-container7 {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }
}

@media (max-width: 480px) {
  .content-wrapper {
    padding: 1rem;
  }

  .albums-grid-container7 {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 1rem;
  }
}


/* Container principal com melhor responsividade */
.listener-style-55 {
  background: #000000;
  color: #fff;
  padding: 15px 20px;
  width: 100%;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Container do contador com flexbox responsivo */
.listener-fade77 {
  position: relative;
  display: flex;
  align-items: center;
  padding: 15px 25px;
  overflow: hidden;
  max-width: 1200px;
  margin: 0 auto;
}

/* Estilização do número com melhor escala */
.number-minimal77 {
  font-size: clamp(32px, 5vw, 42px);
  font-weight: 700;
  color: #fff;
  margin-right: 15px;
  white-space: nowrap;
}

/* Label com melhor legibilidade */
.label-minimal77 {
  font-size: clamp(14px, 2vw, 16px);
  color: rgba(255, 255, 255, 0.8);
  text-transform: lowercase;
}

/* Barra animada aprimorada */
.bar-fade77 {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, 
    transparent 0%,
    #FF69B4 45%,
    #FF4500 50%,
    transparent 100%
  );
  animation: fade-move 3s infinite;
}

@keyframes fade-move {
  0% { transform: translateX(-100%); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: translateX(100%); opacity: 0; }
}

/* Media queries para melhor responsividade */
@media screen and (min-width: 768px) {
  .listener-fade77 {
    justify-content: center;
  }
}

@media screen and (max-width: 767px) {
  .listener-fade77 {
    padding: 12px 20px;
  }
}
/* CODIGO LARI artista */

/* CODIGO LARI artista contrate */
/* Estilos com suporte a tema claro/escuro */
.dj-contrate-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  font-family: Arial, sans-serif;
  background-color: var(--spotify-black);
  color: var(--text-color);
}

.dj-contrate-title {
  font-size: 2rem;
  color: var(--spotify-white);
  margin-bottom: 2rem;
  text-align: center;
  background: var(--spotify-gradient);
  padding: 1.5rem;
  border-radius: 8px;
}

.dj-contrate-content {
  background-color: var(--spotify-dark);
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.dj-contrate-description {
  margin-bottom: 2rem;
  line-height: 1.6;
  color: var(--spotify-white);
}

.dj-contrate-highlight {
  margin: 2rem 0;
  font-size: 1.1rem;
  color: var(--spotify-light-gray);
  background: var(--spotify-darker);
  padding: 1.5rem;
  border-radius: 6px;
  border-left: 4px solid var(--button-primary);
}

.dj-contrate-contact {
  background-color: var(--spotify-darker);
  padding: 1.5rem;
  border-radius: 6px;
  margin: 2rem 0;
}

.dj-contrate-contact h3 {
  color: var(--spotify-white);
  margin-bottom: 1rem;
  font-size: 1.5rem;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.dj-contact-phone {
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--spotify-white);
  margin: 0.5rem 0;
}

.dj-phone-link {
  color: var(--secondary);
  text-decoration: none;
  transition: color 0.3s ease;
  position: relative;
}

.dj-phone-link:hover {
  color: var(--button-primary);
  text-decoration: underline;
}

.dj-phone-link::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: -2px;
  left: 0;
  background: var(--gradient-primary);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.dj-phone-link:hover::after {
  transform: scaleX(1);
}

.dj-contact-email {
  margin: 1rem 0;
  color: var(--spotify-light-gray);
}

.dj-legal-notice {
  margin-top: 3rem;
  padding: 1.5rem;
  background-color: var(--spotify-darker);
  border-left: 4px solid var(--button-primary);
  font-size: 0.9rem;
  color: var(--spotify-light-gray);
}

.dj-legal-notice strong {
  color: var(--spotify-white);
}

/* Hover effects */
.dj-contrate-content:hover {
  background-color: var(--spotify-hover);
  transition: background-color 0.3s ease;
}

.dj-contrate-contact:hover {
  transform: translateY(-2px);
  transition: transform 0.3s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .dj-contrate-section {
      padding: 1rem;
  }
  
  .dj-contrate-title {
      font-size: 1.5rem;
      padding: 1rem;
  }
  
  .dj-contrate-content {
      padding: 1rem;
  }
}
/* CODIGO LARI artista  contrate */
/* CODIGO LARI artista  agenda */
/* Novo CSS para agenda de DJs */
.dj-agenda-container {
  background-color: var(--spotify-dark);
  border-radius: 8px;
  padding: 2rem;
  margin: 2rem 0;
}

.dj-agenda-title {
  color: var(--text-color);
  font-size: 2rem;
  margin-bottom: 2rem;
  font-weight: 700;
}

.dj-event-wrapper {
  background-color: var(--spotify-darker);
  border-radius: 6px;
  padding: 1.5rem;
  margin-bottom: 1rem;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.5rem;
  transition: all 0.3s ease;
}

.dj-event-wrapper:hover {
  background-color: var(--spotify-hover);
  transform: translateY(-2px);
}

.dj-event-date-box {
  background: var(--gradient-primary);
  border-radius: 8px;
  padding: 1rem;
  text-align: center;
  min-width: 100px;
  color: var(--spotify-white);
}

.dj-event-month {
  font-size: 1.2rem;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.dj-event-day {
  font-size: 2rem;
  font-weight: 700;
}

.dj-event-details {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.dj-performer-name {
  color: var(--text-color);
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.dj-location-info {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--text-color2);
}

.dj-location-list {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.dj-empty-message {
  text-align: center;
  color: var(--text-color2);
  padding: 2rem;
  background-color: var(--spotify-darker);
  border-radius: 6px;
}

/* Animação para novos eventos */
@keyframes djEventFadeIn {
  from {
      opacity: 0;
      transform: translateY(10px);
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
}

.dj-event-wrapper {
  animation: djEventFadeIn 0.3s ease-out forwards;
}

/* Media Queries para responsividade */
@media (max-width: 768px) {
  .dj-event-wrapper {
      grid-template-columns: 1fr;
      text-align: center;
  }
  
  .dj-event-date-box {
      margin: 0 auto;
      max-width: 150px;
  }
  
  .dj-location-info {
      justify-content: center;
  }
}

/* CODIGO LARI artista  agenda */

/* CODIGO LARI artista  video */
/* Container principal dos vídeos */
.artist-video-showcase {
  background-color: var(--spotify-dark);
  padding: 2rem;
  border-radius: 12px;
  margin: 2rem 0;
}

.artist-video-title {
  color: var(--text-color);
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--spotify-darker);
}

.artist-video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  padding: 1rem 0;
}

.artist-video-card {
  background: var(--spotify-darker);
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.artist-video-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.artist-video-thumbnail {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
}

.artist-video-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.artist-video-thumbnail::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  background: var(--gradient-primary);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s ease;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
  background-size: 24px;
  background-repeat: no-repeat;
  background-position: center;
}

.artist-video-card:hover .artist-video-thumbnail::after {
  opacity: 1;
}

.artist-video-card:hover .artist-video-thumbnail img {
  transform: scale(1.05);
}

.artist-video-info {
  padding: 1rem;
}

.artist-video-name {
  color: var(--text-color);
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}

.artist-video-empty {
  text-align: center;
  padding: 3rem;
  color: var(--text-color2);
  background: var(--spotify-darker);
  border-radius: 8px;
  grid-column: 1 / -1;
}

/* Animação de entrada */
@keyframes videoCardFadeIn {
  from {
      opacity: 0;
      transform: translateY(20px);
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
}

.artist-video-card {
  animation: videoCardFadeIn 0.5s ease forwards;
  animation-delay: calc(var(--animation-order) * 0.1s);
}

/* Media Queries */
@media (max-width: 768px) {
  .artist-video-grid {
      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
      gap: 1rem;
  }
  
  .artist-video-title {
      font-size: 1.5rem;
  }
}

@media (max-width: 480px) {
  .artist-video-showcase {
      padding: 1rem;
  }
  
  .artist-video-grid {
      grid-template-columns: 1fr;
  }
}
/* CODIGO LARI artista  video */

/* CODIGO LARI artista  video- video  */

/* Container principal do vídeo single */
.video-presentation-container {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 2rem;
  padding: 2rem;
  background-color: var(--spotify-dark);
  border-radius: 12px;
  margin: 2rem auto;
  max-width: 1400px;
}

/* Área principal do conteúdo */
.video-content-primary-area {
  background: var(--spotify-darker);
  border-radius: 8px;
  overflow: hidden;
}

/* Header do artista */
.video-artist-profile-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  background: var(--gradient);
}

.video-artist-avatar-wrapper {
  position: relative;
}

.video-artist-avatar-wrapper img {
  width: 93px;
  height: 93px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--spotify-white);
}

.video-artist-info-container {
  flex: 1;
}

.video-title-heading {
  color: var(--text-color);
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.video-artist-username {
  color: var(--text-color2);
  font-size: 1rem;
  margin-bottom: 1rem;
}

.video-follow-button {
  background: var(--gradient-primary);
  color: var(--spotify-white);
  border: none;
  padding: 0.5rem 1.5rem;
  border-radius: 20px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.video-follow-button:hover {
  transform: scale(1.05);
}

/* Área de interação */
.video-interaction-metrics {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--spotify-darker);
}

.video-metrics-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-color2);
}

.video-voting-container {
  display: flex;
  gap: 1rem;
}

.video-vote-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: none;
  color: var(--text-color);
  cursor: pointer;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.video-vote-button:hover {
  background-color: var(--spotify-hover);
}

/* Player do vídeo */
.video-player-wrapper {
  position: relative;
  padding-top: 56.25%;
  width: 100%;
}

.video-player-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Descrição do vídeo */
.video-description-container {
  padding: 1.5rem;
  color: var(--text-color);
  line-height: 1.6;
}

/* Sidebar */
.video-sidebar-advertising {
  background: var(--spotify-darker);
  border-radius: 8px;
  padding: 1.5rem;
  position: sticky;
  top: 2rem;
}

.video-ad-container {
  margin-bottom: 2rem;
  background: var(--spotify-dark);
  padding: 1rem;
  border-radius: 6px;
  text-align: center;
}

/* Responsividade */
@media (max-width: 1024px) {
  .video-presentation-container {
      grid-template-columns: 1fr;
  }
  
  .video-sidebar-advertising {
      position: static;
  }
}

@media (max-width: 768px) {
  .video-presentation-container {
      padding: 1rem;
  }
  
  .video-artist-profile-header {
      flex-direction: column;
      text-align: center;
  }
  
  .video-interaction-metrics {
      flex-direction: column;
      gap: 1rem;
  }
}
/* CODIGO LARI artista  video-video */
/* CODIGO LARI artista  video-video compart */


/* CODIGO LARI artista  video-video  compart  3*/
/* Estilos para modais */
/* Sistema de Compartilhamento - Versão Corrigida */

/* Container principal */
.video-share-container {
  background: var(--spotify-darker, #1a1a1a);
  border-radius: 8px;
  overflow: hidden;
  width: 100%;
  max-width: 300px;
  margin: 1rem 0;
}

/* Botão principal de compartilhamento */
.video-share-main-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.875rem;
  background: var(--dark);
  border: none;
  color: white;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.video-share-main-button:hover {
  background: var(--dark-3);
}

.video-share-main-button svg {
  width: 20px;
  height: 20px;
}

/* Menu de opções */
.video-share-options {
  padding: 1rem;
  background: var(--spotify-darker, #1a1a1a);
}

/* Item de compartilhamento */
.video-share-item {
  display: flex;
  align-items: center;
  padding: 0.75rem;
  margin-bottom: 0.5rem;
  background: var(--spotify-dark, #121212);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.video-share-item:hover {
  background: var(--spotify-hover, #282828);
  transform: translateY(-2px);
}

/* Ícone do item */
.video-share-icon {
  width: 24px;
  height: 24px;
  margin-right: 12px;
  stroke: currentColor;
  stroke-width: 2;
  color: var(--text-color, #ffffff);
}

/* Informações do item */
.video-share-info {
  flex: 1;
}

.video-share-title {
  color: var(--text-color, #ffffff);
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 2px;
}

.video-share-description {
  color: var(--text-color2, #b3b3b3);
  font-size: 0.75rem;
}

/* Modal de compartilhamento */
.video-share-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.video-share-modal-content {
  background: var(--spotify-darker, #1a1a1a);
  padding: 1.5rem;
  border-radius: 12px;
  width: 90%;
  max-width: 320px;
}

.video-share-modal-title {
  color: var(--text-color, #ffffff);
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 1rem;
  text-align: center;
}

/* Botões de compartilhamento no modal */
.video-share-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin: 1rem 0;
}

.video-share-buttons button {
  padding: 0.75rem 1rem;
  border: none;
  border-radius: 6px;
  color: white;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.2s ease;
  font-size: 0.875rem;
}

/* Estilo específico para cada botão de rede social */
.video-share-buttons button:nth-child(1) {
  background: #25D366; /* WhatsApp */
}

.video-share-buttons button:nth-child(2) {
  background: #0088cc; /* Telegram */
}

.video-share-buttons button:hover {
  opacity: 0.9;
}

/* Botão de fechar modal */
.video-share-modal-close {
  width: 100%;
  padding: 0.75rem;
  margin-top: 1rem;
  background: var(--spotify-dark, #121212);
  border: none;
  border-radius: 6px;
  color: var(--text-color, #ffffff);
  font-size: 0.875rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.video-share-modal-close:hover {
  background: var(--spotify-hover, #282828);
}

/* QR Code */
.video-share-modal-image {
  background: white;
  padding: 1rem;
  border-radius: 8px;
  margin: 1rem 0;
}

.video-share-modal-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* Notificações */
.video-share-notification {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 1rem 1.5rem;
  background: var(--gradient-primary, linear-gradient(45deg, #FF0066, #ff0000));
  color: white;
  border-radius: 6px;
  font-size: 0.875rem;
  z-index: 1100;
  animation: notificationSlide 0.3s ease forwards;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.video-share-notification.error {
  background: #dc3545;
}

/* Animações */
@keyframes notificationSlide {
  from {
      transform: translateY(100%);
      opacity: 0;
  }
  to {
      transform: translateY(0);
      opacity: 1;
  }
}

/* Responsividade */
@media (max-width: 768px) {
  .video-share-container {
      max-width: none;
  }
  
  .video-share-modal-content {
      width: 95%;
  }
}

/* Focus states para acessibilidade */
.video-share-main-button:focus,
.video-share-item:focus,
.video-share-modal-close:focus,
.video-share-buttons button:focus {
  outline: 2px solid var(--secondary, #00aae0);
  outline-offset: 2px;
}

/* Fallback para cores quando as variáveis CSS não estão disponíveis */

/* CODIGO LARI artista  video-video  compart  3*/


/* CODIGO LARI cds*/
/* Container principal */
.container.bg-cinza {
  background-color: var(--background-color-hee);
  border-radius: 24px;
  padding: clamp(1.5rem, 5vw, 3rem);
  margin: 2rem auto;
  max-width: 1400px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

/* Conteúdo */
.contenty {
  position: relative;
  padding: 20px;
}

/* Card do álbum */
.destaque {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--background-color);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  align-items: flex-start;
  position: relative;
}

/* Imagem do álbum */
.destaque img {
  width: 280px;
  height: 280px;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.destaque:hover img {
  transform: scale(1.02);
}

/* Título do álbum */
.destaque .title {
  font-size: 3.5rem;
  font-weight: 800;
  color: var(--text-color);
  margin: 0 0 1rem 0;
  line-height: 1.1;
}

/* Nome do usuário */
.destaque small {
  position: absolute;
  bottom: 2rem;
  left: calc(280px + 3rem); /* Alinha com a margem da imagem */
  font-size: 1.2rem;
  color: var(--text-color2);
}

.destaque small a {
  color: var(--text-color2);
  text-decoration: none;
  transition: color 0.2s ease;
  font-weight: 500;
}

.destaque small a:hover {
  color: var(--background-color-bg-blu);
}

/* Botão Seguir */
.destaque input[type="button"] {
  position: absolute;
  bottom: 2rem;
  right: 2rem;
  background: var(--background-color-bg-blu);
  color: white;
  border: none;
  padding: 12px 32px;
  border-radius: 500px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.destaque input[type="button"]:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
}

/* Responsividade */
@media (max-width: 1200px) {
  .destaque img {
    width: 220px;
    height: 220px;
  }

  .destaque .title {
    font-size: 2.8rem;
  }

  .destaque small {
    left: calc(220px + 3rem);
  }
}

@media (max-width: 768px) {
  .container.bg-cinza {
    margin: 1rem;
    padding: 1rem;
  }

  .destaque {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 2rem;
    padding-bottom: 5rem;
  }

  .destaque img {
    width: 200px;
    height: 200px;
    margin: 0 auto;
  }

  .destaque .title {
    font-size: 2rem;
    text-align: center;
  }

  .destaque small {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 5rem;
    width: 100%;
    text-align: center;
  }

  .destaque input[type="button"] {
    left: 50%;
    transform: translateX(-50%);
    bottom: 2rem;
    right: auto;
  }
}

@media (max-width: 480px) {
  .container.bg-cinza {
    margin: 0.5rem;
    border-radius: 16px;
  }

  .destaque {
    padding: 1rem;
    padding-bottom: 5rem;
  }

  .destaque img {
    width: 160px;
    height: 160px;
  }

  .destaque .title {
    font-size: 1.6rem;
  }

  .destaque small {
    font-size: 1rem;
    bottom: 4rem;
  }

  .destaque input[type="button"] {
    padding: 10px 24px;
    font-size: 0.9rem;
    bottom: 1rem;
  }
}

/* Animação suave */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.destaque {
  animation: fadeIn 0.3s ease-out forwards;
}

/* CODIGO LARI cds*/