body{
   background: #fef6fe;
}
/* 
.top{
   background-image: url("images/top.png");
   background-size: 100%;

}

.centro{
   background-image: url("images/medio.png");
   background-size: 100%;
   background-repeat: repeat;

}

.footer{
   background-image: url("images/footer.png");
   background-size: 100%;

} */

.fondo-full{
   background-image: url("images/fondo-full.png");
   background-size: 100%;
}

.logo-rang{
   position: relative;
   width: 100%;
   padding: 14px;
   background: #c67dae;
   text-align: right;
   color: #ffffff;
}
.logo-rang a{
   color: #fff;
   text-decoration: none;
   font-size: 12px;;
}

.logo-rang img{
   display: inline-block;
   max-width: 120px;
   width: 100%;
   margin-left: 8px;
}


.loader-section{
   width: 100vw;
   height: 100vh;
   max-width: 100%;
   position: fixed;
   top: 0;
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: #ffffff;
   z-index:999;
   transition: all 1s 1s ease-out;
   opacity:1;
 }
 .loaded{
   opacity:0;
   z-index:-1;
 }
   
 .loader {
     width: 48px;
     height: 48px;
     border: 5px solid #623ddb;
     border-bottom-color: transparent;
     border-radius: 50%;
     display: inline-block;
     box-sizing: border-box;
     animation: rotation 1s linear infinite;
     }


     
.music-container {
   background-color: #a498c3b2;
   border-radius: 15px;
   display: flex;
   padding: 20px 30px;
   position: relative;
   margin: 100px 0;
   z-index: 10;
}

.img-container {
   position: relative;
   width: 110px;
}



.img-container img {
   width: inherit;
   height: 110px;
   border-radius: 50%;
   object-fit: cover;
   position: absolute;
   bottom: 0;
   left: 0;

   animation: rotate 3s linear infinite;

   animation-play-state: paused;
}

.music-container.play .img-container img {
   animation-play-state: running; 
}

@keyframes rotate {
   from {
       transform: rotate(0deg);
   }
   to {
       transform: rotate(360deg);
   }
}

.navigation {
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 1;
}

.action-btn {
   background-color: #a498c3;
   border: 0;
   color: #fff;
   font-size: 20px;
   cursor: pointer;
   padding: 10px;
   margin: 0 20px;
   border-radius: 8px;;
}

.action-btn:focus {
   outline: none !important;
}

.action-btn-mute {
   border: 0;
   font-size: 15px;
   cursor: pointer;
   background: #19212d;
}

.action-btn-mute i {
   color: #fff;
}

.action-btn-big {
   color: rgba(255, 255, 255, 0.774);
   font-size: 30px;
}

.action-btn-mute:focus {
   outline: 0;
}

.music-info {
   background-color: rgba(164, 152, 195, 0.37);
   border-radius: 15px 15px 0 0;
   position: absolute;
   top: 0;
   left: 20px;
   width: calc(100% - 40px);
   padding: 10px 10px 25px 10px;
   opacity: 0;
   transform: translateY(0%);
   z-index: 0;
}

.music-info h4 {
   margin: 0;
   color: #fff;
   text-shadow: 0 0 2px rgba(0,0,0,0.4);
}

.music-container.play .music-info {
   opacity: 1;
   transform: translateY(-100%);
}

.music-volume {
   background-color: hsl(218deg 25% 10% / 50%);
   border-radius: 15px 15px 0 0;
   position: absolute;
   top: 0;
   right: 0;
   height: 120px;
   padding: 5px;
   margin-right: 57px;
   opacity: 0;
   transform: translateY(0%);
   z-index: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
   width: 35px;
}

.music-container.volume .music-volume {
   opacity: 1;
   transform: translateY(-100%);
}

.progress-container {
   background: #fff;
   border-radius: 5px;
   cursor: pointer;
   margin: 10px 0;
   height: 4px;
   width: 100%;
}

.progress {
   background-color: #a498c3;
   border-radius: 5px;
   height: 100%;
   width: 0%;
   transition: width 0.1s linear;
}

.progress-container-volume {
   background: #fff;
   border-radius: 5px;
   cursor: pointer;
   margin: 10px 0;
   height: 100%;
   width: 4px;
   transform: rotate(180deg);
}

.progress-volume {
   background-color: #029a83;
   border-radius: 5px;
   height: 100%;
   width: 100%;
   transition: height 0.1s linear;
}


 
 @keyframes rotation {
     0% {
         transform: rotate(0deg);
     }
     100% {
         transform: rotate(360deg);
     }
 }