@font-face {
  font-family: 'RobotoBold';
  src: url('../../assets/fonts/Roboto/Roboto-Bold.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'RobotoBlack';
  src: url('../../assets/fonts/Roboto/Roboto-Black.ttf') format('truetype');
   font-display: swap;
}

@font-face {
  font-family: 'RobotoRegular';
  src: url('../../assets/fonts/Roboto/Roboto-Regular.ttf') format('truetype');
   font-display: swap;
}

@font-face {
  font-family: 'RobotoLight';
  src: url('../../assets/fonts/Roboto/Roboto-Light.ttf') format('truetype');
   font-display: swap;
}

@font-face {
  font-family: 'RobotoThin';
  src: url('../../assets/fonts/Roboto/Roboto-Thin.ttf') format('truetype');
   font-display: swap;
}  

* {
    box-sizing: border-box;
    font-family: 'RobotoRegular', sans-serif;
    margin: 0;
    padding: 0;
   /* transition: all 0.35s linear;*/
}


#content {
    position: fixed;
    bottom: 0;
    z-index: 99999;
    display: none;
    grid-template-columns: 10rem 1fr;
    width: 100%;
    background-color: #373a3c;
    border-radius: 0.5rem 0.5rem 0 0;
    box-shadow: 0 1rem 1.5rem #10101024;
    overflow: hidden;
}
#load-text {
    color: white;
    
}
.player {
   /* Duas linhas multiplicadas pela altura de uma linha */
    overflow: hidden;
    margin: 0 auto;
    width: 70%;
}
.player .thumb {
    width: 10rem;
    height: 10rem;
}

.player .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.player .info {
    padding: 1rem;
}

.player .detail {
    display: grid;
    grid-template-columns: 1fr 5rem;
    margin-bottom: 1rem;
}
.control a {
    text-decoration: none;
   color: black;
}

.player .title-play{
  
   color: white;
    width: 80%;
    padding-bottom: 1rem;
}

.player .title-play .time {

    font-size: 0.9rem;
    color: whitesmoke;
    margin-top: 0.25rem;
}

.player .control i {
    color: white;
    font-size: 23px;
}

.player .control {
  

 width: 400px;
}

@media screen and (max-width: 871px) {
	.player {
       
        width: 100%;
    }
}

@media screen and (max-width: 678px) {
	.player .title-play h4 {
        width: 92%;
        font-size: 20px !important;
    }
}

@media screen and (max-width: 472px) {

    .title-play {
        width: 98% !important;
    }
	.player .title-play h4 {
   
       font-size: 17px !important;
        
    }

    
.player .control i {
    color: white;
    font-size: 20px;

}
.player .detail {
    grid-template-columns: 1fr 5rem;
  
   
   }

   .player .control  {
   
 

}
.player .detail .time {
  font-size: 15px;
  
   
   }
}

@media screen and (max-width: 280px) {
    
    .title-play {
        width: 86% !important;
    }
	.player .title-play h4 {
   
       font-size: 15px !important;
        
    }

    
.player .control i {
    color: white;
    font-size: 17px;

}
.player .detail {
    grid-template-columns: 1fr 5rem;
  
   
   }

   .player .control  {
   
 

}
.player .detail .time {
  font-size: 10px;
  
   
   }
}
.button-play:hover {
    cursor: pointer;
}

/* LOADER */
#load-div {
    display: flex;
    
}
.loader {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    position: relative;
    animation: rotate 1s linear infinite
  }
  .loader::before , .loader::after {
    content: "";
    box-sizing: border-box;
    position: absolute;
    inset: 0px;
    border-radius: 50%;
    border: 5px solid #FFF;
    animation: prixClipFix 2s linear infinite ;
  }
  .loader::after{
    border-color: #FF3D00;
    animation: prixClipFix 2s linear infinite , rotate 0.5s linear infinite reverse;
    inset: 6px;
  }

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

  @keyframes prixClipFix {
      0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
      25%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
      50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
      75%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}
      100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}
  }