@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  src: url(fontes/source-sans-pro.woff);
}

@font-face {
  font-family: 'HelveticaLT';
  font-style: normal;
  font-weight: normal;
  src: url(fontes/helveticaltstd-boldcond-webfont.woff);
}

body {
 background-image: url(../imagens/bg-pattern.png);
 color: #000;
 font-family: Source Sans Pro;
 font-size: 14px;
 cursor: default;
 margin: 0px 0px 0px 0px;
 overflow-y: scroll; overflow-x: hidden;
}

input::-ms-clear {
display: none;
}

#inicio {
 display: none;
 font-weight: bold;
}

#bt_inicio, #bt_inicio_mb{
 cursor: pointer;
 text-decoration: none;
}

#bt_inicio:hover, #bt_inicio_mb:hover {
 text-decoration: underline;
}

a {
 outline: none;
}

a.fb:link, a.fb:visited, a.fb:active {
text-decoration: underline;
color: blue;
}

a.fb:hover {
text-decoration: underline;
color: green;
}

a.pedir_musica:link, a.pedir_musica:visited, a.pedir_musica:active {
text-decoration: none;
color: #6D6D6D;
}

a.pedir_musica:hover {
text-decoration: underline;
}

.topo {
background-color: #FFA701;
color: #FFF;
text-shadow: 1px 1px #000;
width: 850px;
padding: 10px;
box-shadow: 0px 0px 30px #666;
border-radius: 6px;
margin-left: -5px;
margin-top: -5px;
}

.alfabeto {
cursor: pointer;
padding-left: 5px;
padding-right: 5px;
border-radius: 6px;
}

.alfabeto:hover {
background-color: #FFF;
}

.busca {
background-color: #F4F3F3;
color: #000;
font-family: verdana;
border: 2px solid #FECB6B;
border-radius: 0px;
padding: 3px;
width: 200px;
box-shadow: 0px 0px 30px #FFF;
border-radius: 6px;
}

.bt_busca {
background-color: #FECB6B;
color: #FFF;
text-shadow: 1px 1px #000;
letter-spacing: 1px;
box-shadow: 0px 0px 15px #FFF;
font-family: verdana;
font-weight: bold;
border: 2px solid #FECB6B;
border-radius: 6px;
padding: 3px;
margin-left: -8px;
cursor: pointer;
}

.bt_busca:hover {
background-color: #FEC75F;
}

.cor_top_musicas {
background-color: #8F9A02;
color: #FFF;
font-weight: bold;
padding: 10px;
text-shadow: 1px 1px #000;
}

.cor_2_top_musicas {
background-color: #AAB701;
color: #FFF;
font-weight: bold;
padding: 10px; 
text-shadow: 1px 1px #000;
}

li {
 list-style-type: none;
 list-style-position: inside;
 padding: 0px;
 margin: 0px;
 position: relative;
 height: 40px;
 border-bottom: 1px dashed #C7C7C7;
 color: #6D6D6D;
 text-shadow: 1px 1px #C7C7C7;
}

.top_musicas {
background-color: #FFF;
margin-top: 20px;
margin-left: 20px;
width: 300px;
border: 1px solid #E2E2E2;
padding: 6px;
border-radius: 11px;
}

.topo_top_musicas {
 padding: 6px;
 margin-top: -6px;
 margin-left: -6px;
 margin-right: -6px;
 width: 300px;
 color: #FFF;
 text-shadow: 1px 1px #000;
 font-weight: bold;
 background-color: #9BA702;
 border-top-left-radius: 11px;
 border-top-right-radius: 11px;
}

.icone_top_musicas {
 background-image: url(../imagens/icones-barras.gif);
 background-position: 0px -128px;
 float: left;
 background-repeat: no-repeat;
 width: 16px;
 height: 16px;
}

.tocando {
 position: absolute;
 background-color: #533B65;
 color: #FFF;
 margin-left: -86px;
 margin-top: -3px;
 padding: 5px;
 border-radius: 6px;
 box-shadow: 0px 0px 10px #000;
 font-weight: bold;
 text-shadow: 1px 1px #000;
 min-width: 40px;
 display: none;
}

.espera {
 position: absolute;
 background-color: #000;
 color: #FFF;
 margin-left: -75px;
 margin-top: -3px;
 padding: 5px;
 border-radius: 6px;
 box-shadow: 0px 0px 10px #000;
 font-weight: bold;
 text-shadow: 1px 1px #000;
 min-width: 40px;
}

.arrow_box {
	position: absolute;
	background: #533B65;
	border: 1px solid #533B65;
}
.arrow_box:after, .arrow_box:before {
	left: 100%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.arrow_box:after {
	border-color: rgba(83, 59, 101, 0);
	border-left-color: #533B65;
	border-width: 10px;
	top: 50%;
	margin-top: -10px;
}
.arrow_box:before {
	border-color: rgba(83, 59, 101, 0);
	border-left-color: #533B65;
	border-width: 11px;
	top: 50%;
	margin-top: -11px;
}



.arrow_box2 {
	position: absolute;
	background: #75538E;
	border: 1px solid #75538E;
}
.arrow_box2:after, .arrow_box2:before {
	left: 100%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.arrow_box2:after {
	border-color: rgba(83, 59, 101, 0);
	border-left-color: #75538E;
	border-width: 10px;
	top: 50%;
	margin-top: -10px;
}
.arrow_box2:before {
	border-color: rgba(83, 59, 101, 0);
	border-left-color: #75538E;
	border-width: 11px;
	top: 50%;
	margin-top: -11px;
}



.arrow_box3 {
	position: absolute;
	background: #75538E;
	border: 1px solid #75538E;
	min-width: 94px;
}
.arrow_box3:after, .arrow_box3:before {
	right: 100%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.arrow_box3:after {
	border-color: rgba(83, 59, 101, 0);
	border-right-color: #75538E;
	border-width: 10px;
	top: 50%;
	margin-top: -10px;
}
.arrow_box3:before {
	border-color: rgba(83, 59, 101, 0);
	border-right-color: #75538E;
	border-width: 11px;
	top: 50%;
	margin-top: -11px;
}



.arrow_box3:hover {
	background-color: #6F4E85;
}

.arrow_box3:hover:after, .arrow_box3:hover:before {
	border-right-color: #6F4E85;
}

.arrow_box2:hover {
	background-color: #6F4E85;
}

.arrow_box2:hover:after, .arrow_box2:hover:before {
	border-left-color: #6F4E85;
}

/* darkmenu */@-webkit-keyframes hover {    0% { background: #bdedfa }    100% { background: #063d4c }}@-moz-keyframes hover {    0% { background: #bdedfa }    100% { background: #063d4c }}@-ms-keyframes hover {    0% { background: #bdedfa }    100% { background: #063d4c }}@-o-keyframes hover {    0% { background: #bdedfa }    100% { background: #063d4c }}@keyframes hover {    0% { background: #bdedfa }    100% { background: #063d4c }}/* Again, #content is only there to center the menu */#content {	text-align: center; 	width: 100%; 	height: 100%;}/* Here you go: This is what you need to get this menu */ul#darkmenu {    margin-top: 3%;        				/* Well, you don't need this... */    display: inline-block;  				/* ... and this, this just centers the menu. */     list-style: none;    font-family: 'Gudea', sans-serif;	   /* Change this to use another font */    -webkit-transition: all 0.2s linear;    -moz-transition: all 0.2s linear;    -ms-transition: all 0.2s linear;    -o-transition: all 0.2s linear;    transition: all 0.2s linear;}ul#darkmenu li {    -webkit-transition: -webkit-box-shadow, background 0.2s linear;    -moz-transition: -moz-box-shadow, background 0.2s linear;    -ms-transition: -moz-box-shadow, background 0.2s linear;    -o-transition: -o-box-shadow, background 0.2s linear;    transition: box-shadow, background 0.2s linear;    background: #565656;    float: left;    text-shadow: 0px -1px 0px black;    font-size: 13px;    text-transform: uppercase;    -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.1), 0px 1px 2px rgba(0,0,0,0.3), inset -1px 0px 0px rgba(255, 255, 255, 0.1), inset 1px 0px 0px rgba(0,0,0,0.2);    -moz-box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.1), 0px 1px 2px rgba(0,0,0,0.3), inset -1px 0px 0px rgba(255, 255, 255, 0.1), inset 1px 0px 0px rgba(0,0,0,0.2);    box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.1), 0px 1px 2px rgba(0,0,0,0.3), inset -1px 0px 0px rgba(255, 255, 255, 0.1), inset 1px 0px 0px rgba(0,0,0,0.2);}ul#darkmenu li:first-child {    -moz-border-radius-topleft: 10px;    -moz-border-radius-topright: 0px;    -moz-border-radius-bottomright: 0px;    -moz-border-radius-bottomleft: 10px;    -webkit-border-radius: 10px 0px 0px 10px;    border-radius: 10px 0px 0px 10px;}ul#darkmenu li:last-child {    -moz-border-radius-topleft: 0px;    -moz-border-radius-topright: 10px;    -moz-border-radius-bottomright: 10px;    -moz-border-radius-bottomleft: 0px;    -webkit-border-radius: 0px 10px 10px 0px;    border-radius: 0px 10px 10px 0px;}ul#darkmenu li:hover {    -webkit-animation: hover 0.5s 1;    -moz-animation: hover 0.5s 1;    -ms-animation: hover 0.5s 1;    -o-animation: hover 0.5s 1;    animation: hover 0.5s 1;    background: #063d4c;    text-shadow: 0px 0px 2px #11afda;}ul#darkmenu li:active {    background: #05303c;    -webkit-box-shadow: inset 0px -1px 0px 0px rgba(255, 255, 255, 0.1), inset 0px 2px 4px rgba(0,0,0,0.4);    -moz-box-shadow: inset 0px -1px 0px 0px rgba(255, 255, 255, 0.1), inset 0px 2px 4px rgba(0,0,0,0.4);    box-shadow: inset 0px -1px 0px 0px rgba(255, 255, 255, 0.1), inset 0px 2px 4px rgba(0,0,0,0.4);}ul#darkmenu li a {    padding: 10px;    display: block;    color: white;    text-decoration: none;}ul#darkmenu li:active a { padding: 11px 10px 9px 10px }ul#darkmenu li { font-size: 16px }

.back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1); /* Fundo claro e sutil */
  backdrop-filter: blur(10px); /* Efeito de vidro fosco */
  -webkit-backdrop-filter: blur(10px);
  color: #ff4757; /* Cor de destaque (ajuste para a cor do Brazink) */
  border: 1px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  
  /* Escondido inicialmente */
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  z-index: 999;

  /* ... resto do código ... */
  background: #AAB701;
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: #fff; 
  /* ... resto do código ... */
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background: #ff4757; /* Inverte a cor no hover */
  color: white;
  transform: scale(1.1) translateY(-5px);
  box-shadow: 0 12px 40px rgba(255, 71, 87, 0.3);
}