body {
    background-image: url('../img/bg.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
}
.logo {
    max-width: 450px;
    padding: 25px 25px;
    margin-bottom: -5rem;
}
* { 
  box-sizing: border-box; 
}

html {
  margin: 0;
  transition:3s;
}
.bg-main {
  background-attachment: fixed;
  position: relative;
}
/* .bg-overlay {
  background-attachment: fixed;
  border-radius: 8px;
  position: absolute;
  top: 10%;
  left: 27rem;
  width: 40%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: -1;
} */
.bg-overlay {
  /* background-attachment: fixed; */
  background-color: rgba(0, 0, 0, 0.3);
  /* display: flex;
  justify-content: center;
  align-items: center; */
  left: 30%;
  position: fixed;
  top: 10%;
  width: 40%;
  height: 70%;
  z-index: -1;
}
.footer {
  background-color: rgba(0, 0, 0, 0.3);
  padding: 4px 65px;
  text-align: center;
  position: fixed;
  bottom: 0;
  width: 100%;
}

/* .bg-overlay::before {
  content: "";
  background-color: white;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
} */
.row-rrss {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.row-footer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-top: 15px;
}
.row-footer p {
  color: #fff;
  font-size: 18px;
  font-weight: bold;
}
.row-rrss div {
  /* background-color: #fff; */
  border-radius: 12px;
  padding: 10px 40px 10px 70px;
}
.row-rrss img {
  height: auto;
  margin-right: 25px;
  width: 50px;
}
.row-rrss-img-except {
  width: 65px !important;
}

@media screen and (min-width: 381px) and (max-width: 767px) {
  .bg-overlay {
    top: 5%;
    left: 8%;
    width: 85%;
    height: 70%;
  }
  .row-footer {
    display: block;
    /* flex-direction: row;
    justify-content: space-between; */
    /* matgi-top: 15px; */
  }
  .row-rrss img {
    height: auto;
    margin-right: 15px;
    width: 40px;
  }
  .row-rrss-img-except {
    width: 50px !important;
  }
  .row-footer p {
    font-size: 15px;
  }
}
@media screen and (max-width: 380px) {
  #player__controls {
    width: 300px !important;
 }
 .bg-overlay {
  top: 5%;
  left: 4%;
  width: 85%;
  height: 70%;
}
.row-footer {
  display: block;
  /* flex-direction: row;
  justify-content: space-between; */
  /* matgi-top: 15px; */
}
.row-rrss img {
  height: auto;
  margin-right: 10px;
  width: 30px;
}
.row-rrss-img-except {
  width: 40px !important;
}
.row-footer p {
  font-size: 15px;
}
}
 
 @media all and (max-width: 770px) {
     div#texttop { display: none; }
 }
 
 .no {
   background: #1d1d1b !important;
   color: #ffffff !important;
 } 
 
 .si {
   background: #ffffff !important;
   color: #1d1d1b !important;
   cursor: default !important;
 }
 
 
 .diales {
   margin-top: 30px;
   color: #ffffff;
 }
 
 .diales a {
 
   width: 30%;
   margin: 0 15px;
   border: none;
 }
 .diales a:hover{
   background-color:#33CAFF;
   color:#fff;
   text-decoration:none;
   border: none;
 }
 
 .box {
   border-radius: 15px;
   background: #1d1d1b;
   color: #ffffff;
   height: 50px;
   width: 300px;
   padding: 0 20px;
 }
 .box__play{
   width: 15%;
 }
 .box__volume{
   width: 50%;
 }
 .box__volume__icon{
   width: 15%;
 }
 
 
 
 .box__play button{
   background: transparent;
   border: none;
   outline: none;
   color: #FFF;
 }
 
 
 .box__play--paused .box__play__button__icon--playing{
   display: inline-block;
 }
 .box__play--paused .box__play__button__icon--paused{
   display: none;
 }
 .box__play--playing .box__play__button__icon--playing{
   display: none;
 }
 .box__play--playing .box__play__button__icon--paused{
   display: inline-block;
 }
 
 input[type=range]::-webkit-slider-thumb {
     background: #6CE6EB;
 }
 input[type=range]::-moz-range-thumb {
     background: #6CE6EB;
 }
 input[type=range]::-ms-thumb {
     background: #6CE6EB;
 }
 
 /* PRESS THE MENU BUTTON FOR ANIMATION */
 /* PRESS PLAY BUTTON TO LISTEN THE DEMO SONG */
 
 /* As seen on: "https://dribbble.com/shots/2144866-Day-5-Music-Player-Rebound/" */
 
 /* THANK YOU! */
 
 @import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);
 
 @keyframes harlem {
   0% {
     transform: scale(1);
     -webkit-transform: scale(1);
     -moz-transform: scale(1);
     -o-transform: scale(1);
     -ms-transform: scale(1);
   }
   20% {
     transform: scale(1.03, 1);
     -webkit-transform: scale(1.03, 1);
     -moz-transform: scale(1.03, 1);
     -o-transform: scale(1.03, 1);
     -ms-transform: scale(1.03, 1);
   }
   40% {
     transform: scale(0.97, 1);
     -webkit-transform: scale(0.97, 1);
     -moz-transform: scale(0.97, 1);
     -o-transform: scale(0.97, 1);
     -ms-transform: scale(0.97, 1);
   }
   60% {
     transform: scale(1.01, 1);
     -webkit-transform: scale(1.01, 1);
     -moz-transform: scale(1.01, 1);
     -o-transform: scale(1.01, 1);
     -ms-transform: scale(1.01, 1);
   }
   80% {
     transform: scale(0.99, 1);
     -webkit-transform: scale(0.99, 1);
     -moz-transform: scale(0.99, 1);
     -o-transform: scale(0.99, 1);
     -ms-transform: scale(0.99, 1);
   }
   100% {
     transform: scale(1);
     -webkit-transform: scale(1);
     -moz-transform: scale(1);
     -o-transform: scale(1);
     -ms-transform: scale(1);
   }
 }
 
 h2 {
   margin: 0;
   padding: 0;
   font-size: 10px;
   line-height: 10px;
   letter-spacing: 2.5px;
   font-family: 'Open Sans';
   font-weight: 700;
   color: #fff;
 }
 
 h3 {
   margin: 0;
   padding: 0;
   font-size: 11px;
   line-height: 11px;
   font-family: 'Open Sans';
   font-weight: 400;
   color: #777;
 }
 
 h4 {
   margin: 0 0 5px 29px;
   padding: 0;
   font-size: 14px;
   line-height: 14px;
   font-family: 'Open Sans';
   font-weight: 700;
   color: #fff;
 }
 
 h5 {
   margin: 0;
   padding: 0;
   font-size: 13px;
   line-height: 13px;
   font-family: 'Open Sans';
   font-weight: 700;
   color: #6d6d6d;
 }
 
 h6 {
   margin: 0;
   padding: 0;
   font-size: 13px;
   line-height: 13px;
   font-family: 'Open Sans';
   font-weight: 700;
   color: #f0f0f0;
 }
 
 
 /* .header {
   display: inline-flex;
   margin: 0 0 40px 0;
 } */
 
 input[type=checkbox] {
   visibility: hidden;
   margin: 0;
   padding: 0;
   z-index: 10;
 }
 
 label.main:before {
   position: absolute;
   top: 23px;
   left: 23px;
   font-family: FontAwesome;
   content: '\f0c9';
   color: #959595;
   font-size: 26px;
   line-height: 16px;
   cursor: pointer;
   z-index: 10;
   transition: all 0.3s ease-in;
 }
 
 label.main:hover:before {
   color: #bbb;
 }
 
 .screen > #magicButton:checked ~ label.main:before {
   color: #ff564c;
   transition: all 0.3s ease-in;
 }

 .screen > #magicButton:checked ~ .coverImage {
   transform: scale(0.251, 0.251);
   left: 23px;
   top: 60px;
   transition: all 0.3s ease-in;
   border-radius: 20px;
 }
 
 .search:before {
   position: absolute;
   top: 23px;
   right: 23px;
   font-family: FontAwesome;
   content: '\f002';
   color: #959595;
   font-size: 16px;
   line-height: 16px;
   cursor: pointer;
   z-index: 10;
   transition: all 0.3s ease-in;
 }
 
 .search:hover:before {
   color: #bbb;
 }
 
 
 @media screen and (min-width: 768px) {
   #player__controls {
      height: 60px;
      width: 380px !important;
   }
 }
 
 .bodyPlayer {
     
   position: absolute;
   top: 10px;
   left: 0px;
   margin: 0px;
   padding: 0px;
   height: 50px;
   width: 300px;
   /* background-color: #1d1d1b; */
   transition: all 0.3s ease-in;
 }
 
 .screen > #magicButton:checked ~ .bodyPlayer {
   height: 50px;
   left: 0;
   top: 0px;
   transition: all 0.3s ease-in;
 }
 
 .list {
   border-spacing: 0px 2px;
   width: 342px;
   visibility: hidden;
   opacity: 0;
   position: absolute;
   top: 378px;
   left: 12px;
   transform-origin: 0% 0%;
   transform: scale(0.1, 0.1);
   transition: all 0.3s ease-in;
 }
 
 .list tr {
   transform-origin: 0% 50%;
   height: 50px;
   text-align: center;
   background: #1d1d1d;
   text-indent: 8px;
 }
 
 .list tr:hover {
   background: #222;
   cursor: pointer;
 }
 
 .title {
   width: 215px;
   text-align: left;
   text-indent: 15px;
   transition: all 0.11s ease-in;
 }
 
 .list tr:hover .title {
   padding-left: 5px;
   width: 210px;
   transition: all 0.11s ease-in;
 }
 
 .screen > #magicButton:checked ~ .list {
   top: 0px;
   left: 12px;
   opacity: 1;
   visibility: visible;
   transform: scale(1, 1);
   transition: all 0.3s ease-in;
 }
 
 .screen > #magicButton:checked ~ table tr:nth-child(1) {
   opacity: 1;
   animation: harlem 0.3s linear forwards;
   animation-delay: 0.185s;
 }
 
 .screen > #magicButton:checked ~ table tr:nth-child(2) {
   animation: harlem 0.3s linear forwards;
   animation-delay: 0.2s;
 }
 
 .screen > #magicButton:checked ~ table tr:nth-child(3) {
   animation: harlem 0.3s linear forwards;
   animation-delay: 0.215s;
 }
 
 .screen > #magicButton:checked ~ table tr:nth-child(4) {
   animation: harlem 0.3s linear forwards;
   animation-delay: 0.23s;
 }
 
 .screen > #magicButton:checked ~ table tr:nth-child(5) {
   animation: harlem 0.3s linear forwards;
   animation-delay: 0.245s;
 }
 
 .screen > #magicButton:checked ~ table tr:nth-child(6) {
   animation: harlem 0.3s linear forwards;
   animation-delay: 0.26s;
 }
 
 .screen > #magicButton:checked ~ table tr:nth-child(7) {
   animation: harlem 0.3s linear forwards;
   animation-delay: 0.275s;
 }
 
 .screen > #magicButton:checked ~ table tr:nth-child(8) {
   animation: harlem 0.3s linear forwards;
   animation-delay: 0.29s;
 }
 
 .screen > #magicButton:checked ~ table tr:nth-child(9) {
   animation: harlem 0.3s linear forwards;
   animation-delay: 0.305s;
 }
 
 label.zmr:before {
   font-family: FontAwesome;
   content: "\f08a";
   color: #777;
   font-size: 15px;
   line-height: 15px;
   cursor: pointer;
   z-index: 10;
   transition: all 0.15s linear;
 }
 
 td > #heart:checked ~ label.zmr:before {
   content: "\f004";
   color: #ff564c;
   transition: all 0.15s linear;
 }
 
 td > #heart1:checked ~ label.zmr:before {
   content: "\f004";
   color: #ff564c;
   transition: all 0.15s linear;
 }
 
 td > #heart2:checked ~ label.zmr:before {
   content: "\f004";
   color: #ff564c;
   transition: all 0.15s linear;
 }
 
 td > #heart3:checked ~ label.zmr:before {
   content: "\f004";
   color: #ff564c;
   transition: all 0.15s linear;
 }
 
 td > #heart4:checked ~ label.zmr:before {
   content: "\f004";
   color: #ff564c;
   transition: all 0.15s linear;
 }
 
 td > #heart5:checked ~ label.zmr:before {
   content: "\f004";
   color: #ff564c;
   transition: all 0.15s linear;
 }
 
 td > #heart6:checked ~ label.zmr:before {
   content: "\f004";
   color: #ff564c;
   transition: all 0.15s linear;
 }
 
 td > #heart7:checked ~ label.zmr:before {
   content: "\f004";
   color: #ff564c;
   transition: all 0.15s linear;
 }
 
 td > #heart8:checked ~ label.zmr:before {
   content: "\f004";
   color: #ff564c;
   transition: all 0.15s linear;
 }
 
 /* .bar {
   background: url('http://imgh.us/bar_3.svg') no-repeat;
   background-size: 100%;
   width: 300px;
   height: 21px;
   position: absolute;
   top: 407px;
   left: 23px;
   transform-origin: 0% 0%;
   transition: all 0.3s ease-in;
 }  */ 
 
 .screen > #magicButton:checked ~ .bar {
   top: 0px;
   left: 126px;
   transform: scale(0.6875, 0.6875);
   transition: all 0.3s ease-in;
 }
 
 .info {
   width: 157px;
   position: absolute;
   left: 104px;
   top: 440px;
   transition: all 0.3s ease-in;
 }
 
 .screen > #magicButton:checked ~ .info {
   top: 66px;
   left: 126px;
   text-align: left;
   transition: all 0.3s ease-in;
 }
 
 .screen > #magicButton:checked ~ .info h4 {
   margin-left: 0;
   font-size: 16px;
   color: #111111;
   transition: all 0.3s ease-in;
 }
 
 .player {
   background: none;
   text-align: center;
   font-family: FontAwesome;
   color: #fff;
   font-size: 26px;
   line-height: 26px;
   width: 300px;
   height: 50px;
   position: absolute;
   bottom: 0px;
   left: 40%;
   transform: translate(-50%, 0);
   z-index: 10;
   transition: all 0.3s ease-in;
   border-spacing: 0;
 }
 
 .player div {
   width: 72px;
 }
 
 .backward:before {
   content: "\f04a";
   cursor: pointer;
   transition: all 0.15s linear;
 }
 
 .play:before {
   font-size: 26px;
   line-height: 26px;
   content: "\f04b";
   cursor: pointer;
   transition: all 0.15s linear;
   margin-bottom: 0px !important;
   margin-left: 40px;
 }
 
 .forward:before {
   content: "\f04e";
   cursor: pointer;
   transition: all 0.15s linear;
 }
 
 .backward:hover:before {
   color: #bbb;
   transition: all 0.15s linear;
 }
 
 .play:hover:before {
   color: #bbb;
   transition: all 0.15s linear;
 }
 
 .forward:hover:before {
   color: #bbb;
   transition: all 0.15s linear;
 }
 
 td > #play:checked ~ label.play:before {
   content: "\f04c";
   transition: all 0.15s linear;
 }
 
 .screen > #magicButton:checked ~ .player {
   bottom: 4px;
   left: -44px;
   transform: scale(0.45, 0.45);
   transition: all 0.3s ease-in;
 }
 
 /* .shadow {
   background: rgba(17, 17, 17, 0.8);
   width: 300px;
   height: 50px;
   position: absolute;
   bottom: -12px;
   left: 0;
   box-shadow: 0px -15px 40px rgba(17, 17, 17, 0.8);
 }
 
 .footer {
   background: none;
   font-family: FontAwesome;
   color: #6d6d6d;
   font-size: 15px;
   line-height: 15px;
   height: 45px;
   width: 300px;
   position: absolute;
   bottom: 10px;
   left: 23px;
   z-index: 20;
   transition: all 0.15s linear;
   transition: bottom 0.3s linear;
 } */
 
 .love:before {
   content: "\f08a";
   cursor: pointer;
   transition: all 0.15s linear;
 }
 
 .shuffle:before {
   content: "\f074";
   cursor: pointer;
   transition: all 0.15s linear;
 }
 
 .repeat:before {
   content: "\f01e";
   cursor: pointer;
   transition: all 0.15s linear;
 }
 
 .options:before {
   content: "\f141";
   cursor: pointer;
   transition: all 0.15s linear;
 }
 
 .love:hover:before {
   color: #bbb;
   transition: all 0.15s linear;
 }
 
 .shuffle:hover:before {
   color: #bbb;
   transition: all 0.15s linear;
 }
 
 .repeat:hover:before {
   color: #bbb;
   transition: all 0.15s linear;
 }
 
 .options:hover:before {
   color: #bbb;
   transition: all 0.15s linear;
 }
 
 td > #love:checked ~ label.love:before {
   content: "\f004";
   color: #ff564c;
   transition: all 0.15s linear;
 }
 
 td > #shuffle:checked ~ label.shuffle:before {
   color: #ff564c;
   transition: all 0.15s linear;
 }
 
 td > #repeat:checked ~ label.repeat:before {
   color: #ff564c;
   transition: all 0.15s linear;
 }
 
 .screen > #magicButton:checked ~ .footer {
   bottom: -60px;
   transition: all 0.3s ease-in;
 }
 
 .current {
   position: absolute;
   right: 23px;
   bottom: -60px;
   transition: all 0.3s ease-in;
 }
 
 .screen > #magicButton:checked ~ .current {
   bottom: 17px;
   transition: all 0.3s ease-in;
 }
 
 audio {
   visibility: hidden;
 }
 
 hr.linea {
   background-color: #fff8e1;
   width: 80%;
   height: 10px;
   border-top: 2px double #2e2f2e;
   border-top-style: double;
 }
 
 /* unvisited link */
 a:link {
   color:#313030;
 }
 
 /* visited link */
 a:visited {
   color:#313030;
 }
 
 /* mouse over link */
 a:hover {
   color:#313030;
 }
 .vanthra {
     background-image: url("../img/placaV.png") center no-repeat;
 }
 
 .separador {
     height:50px;
     display: inline-block;
 }
 .separador_footer {
     height:200px;
     display: inline-block;
 }
 p.rrss{
     width: 100%;
     padding: 15px 0;
     background: #1d1d1b;
     color: #000;
     margin: 0;
     text-align: center;
 }
 
 p.rrss a{
     color: #ffffff;
     display: inline-block;
     margin: 0 15px;
     font-size: 22px;
 }