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

:root {
 --white-rfe: #ffffff; 
 --blue-rfe: #aea9a9; 
 --bg-card: #1c6da5;
 --bg-btn: #346da0;
 --blue-bar: #193956;
 --gris-bar: #706c6c;
 --bg-black: #000000;
 --blue2-rfe: #1d6da4;
 --rfeBar-after-left: -7px;
}

body { background: var(--blue-rfe) url('../img/fond.png'); background-repeat: no-repeat; background-size: 100% 100%; background-position: top left; background-attachment: fixed; color: var(--white-rfe); }

@font-face { font-family: 'Poppins-Black.ttf'; src: url('../fonts/Poppins-Black.ttf') format('truetype'); }  
@font-face { font-family: 'Poppins-Bold.ttf'; src: url('../fonts/Poppins-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Poppins-Light.ttf'; src: url('../fonts/Poppins-Light.ttf') format('truetype'); }
@font-face { font-family: 'Poppins-Medium.ttf'; src: url('../fonts/Poppins-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Poppins-Regular.ttf'; src: url('../fonts/Poppins-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Poppins-SemiBold.ttf'; src: url('../fonts/Poppins-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Potra.ttf'; src: url('../fonts/Potra.ttf') format('truetype'); }
@font-face { font-family: 'Gotham-Ultra-Italic.ttf'; src: url('../fonts/Gotham-Ultra-Italic.ttf') format('truetype'); }
    
#grid { padding: 15px 35px 10px 35px; }
  .flex-container { display: flex; flex-direction: row; font-size: 30px;   }

#head .flex-logo { flex: 25.33%; }  
  #head .logomobile { display: none; }  
  #head .logobacktohome { font-family: 'Poppins-Light.ttf'; font-size: 20px; display: inline-block; line-height: 77px; vertical-align: top; margin: 0 5px; color: var(--white-rfe); }
  #head a { display: block; text-decoration: none; width: fit-content; }  
    #head a:hover .logobacktohome { color: var(--blue-rfe); }
    #head a:hover .logomobile { display: inline-block; }
    #head a:hover .logodesktop { display: none; }

#head .flex-title { flex: 57.34%; text-align: center; }
  #head h1 { font-family: 'Potra.ttf'; font-size: 58px; text-shadow: 2px 2px 4px rgb(0 0 0 / 75%); font-weight: normal; letter-spacing: 1px; position: relative; top: -5px; }
  #head h2 { font-family: 'Poppins-Black.ttf'; font-size: 18px; position: relative; top: -15px; text-shadow: 1px 1px 2px rgb(0 0 0 / 75%); letter-spacing: 1px; }

#head .flex-goradio { flex: 17.33%; text-align: center; }
  #head .flex-goradio .btn { background: var(--blue2-rfe); -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; width: 217px; height: 69px; position: relative; }
  #head .flex-goradio .btn a { font-family: 'Gotham-Ultra-Italic.ttf'; width: 100%; display: block; color: var(--white-rfe); font-size: 20px; position: absolute; top: 50%; left: 60%; transform: translate(-50%, -50%); letter-spacing: 1px; }
  #head .flex-goradio .btn::before{ content: ''; width: 55px; height: 55px; background-color: var(--white-rfe); -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; position: absolute; top: 50%; left: 16.5%; transform: translate(-50%, -50%); }

#play { margin-top: -4px; }
#play .flex-play { background-color: var(--blue-rfe); flex: 33%; -webkit-border-radius: 35px; -moz-border-radius: 35px; border-radius: 35px; -webkit-box-shadow: 4px 4px 12px 0px rgb(0 0 0 / 48%); box-shadow: 4px 4px 12px 0px rgb(0 0 0 / 48%); padding: 30px; }  
  #play .flex-play .track-cover { text-align: center; }
    #play .flex-play .track-cover img { width: 100%; height: auto; max-width: 325px; max-height: 325px; -webkit-border-radius: 35px; -moz-border-radius: 35px; border-radius: 35px; }
  #play .flex-play .artwork { position: relative; text-align: center; }
  #play .flex-play .track-start { font-family: 'Poppins-Regular.ttf'; font-size: 12px; text-align:center; }
  #play .flex-play .track-title { font-family: 'Poppins-Bold.ttf'; font-size: 21px; width: 80%; margin: 0 auto; overflow: hidden; line-height: 24px; vertical-align: middle; }
  #play .flex-play .track-artist { font-family: 'Poppins-Regular.ttf'; font-size: 16px; width: 80%; margin: 0 auto; overflow: hidden; line-height: 19px; vertical-align: middle; }
  #play .flex-play .track-title span, #play .flex-play .track-artist span { display: inline-block; padding-right: 2em; padding-left: 100%; white-space: nowrap; animation: defilement-rtl 15s infinite linear; }    
  #play .flex-play .control { text-align: center; margin-top: 10px; margin-bottom: 10px; width: 92%; position: relative; }
    #play .flex-play .control img { cursor: pointer; padding-left: 6%; }
    #play .flex-play .btnpause, #play .flex-play #speakermute { display: none; }
    #play .flex-play .control .anim { position: absolute; top: 15%; display: none; }
    #play .flex-play .control .eqL { left: 25%; }
    #play .flex-play .control .eqR { left: 70%; }
  #play .flex-play .volume { position: absolute; top: 0; right: 0; text-align: center; height: 100%; }
    #play .flex-play .volume .slidevolume { width: 60%; transform: rotate(-90deg); position: relative; top: 20%; right: -52%; }
    #play .flex-play .volume .volslider { -webkit-appearance: none; width: 100%; height: 5.5px; background: var(--gris-bar); background: linear-gradient(to left, var(--gris-bar) 0%, var(--gris-bar) 20%, var(--white-rfe) 20%, var(--white-rfe) 100%); outline: none; cursor: pointer; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; transition: background 450ms ease-in; }
    #play .flex-play .volume .volslider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 12px; height: 12px; background: var(--white-rfe); -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; }
    #play .flex-play .volume .volslider::-moz-range-thumb { width: 12px; height: 12px; background: var(--white-rfe); -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; }  
    #play .flex-play .volume .speakervolume { position: absolute; left: 0; right: 5px;     top: 56%; text-align: right; }
    #play .flex-play .volume .speakervolume img { cursor: pointer; }    
  #play .flex-play .timebar { position: relative; height: 25px; }
    #play .flex-play .timebar div { float: left; line-height: 25px; vertical-align: middle; }  
    #play .flex-play .timebar .timestart, #play .flex-play .timebar .timeend { font-family: 'Poppins-Regular.ttf'; font-size: 15px; width:15%; }      
    #play .flex-play .timebar .timestart { text-align: center; }
    #play .flex-play .timebar .timeend { text-align: center; float: right; }    
      #play .flex-play .timebar #rfeProgress { text-align: center; width:67%; position: absolute; height: 5.5px; background-color: var(--white-rfe); left: 0; right: 0; margin: 0 auto; top: 39%; bottom: 39%; }
      #play .flex-play .timebar #rfeBar { width: 1%; height: 5.5px; background-color: var(--gris-bar); box-shadow: 0px 0px 4px #ffffff; }
      #play .flex-play .timebar #rfeBar::after { content: ""; position: absolute; top: -4px; left: var(--rfeBar-after-left); width: 14px; height: 14px; border-radius: 50px; background: var(--gris-bar); }

#play .flex-rang { flex: 57%; margin-left: 50px; }
  #play .flex-rang h3 { font-family: 'Poppins-Medium.ttf'; font-size: 30px; text-shadow: 2px 2px 4px rgb(0 0 0 / 75%); font-weight: normal; margin-left: 20px; }

#play .float-recent { float: left; display: flex; }
#play .float-recent > div {margin: 15px 0; }
  #play .float-recent.rang1 { width: 66.66%; }
  #play .float-recent.rang2 { width: 33.33%; }
    #play .recent1 { flex: 50%; }
    #play .recent2 { flex: 50%; }
    #play .recent3 { flex: 50%; }
    #play .recent4 { display:none; }
      #play .card { background-color: var(--bg-card); -webkit-border-radius: 35px; -moz-border-radius: 35px; border-radius: 35px; -webkit-box-shadow: 4px 4px 12px 0px rgb(0 0 0 / 48%); box-shadow: 4px 4px 12px 0px rgb(0 0 0 / 48%); padding: 14px 0 7px 0; max-width: 188px; margin: 0 auto; }
      #play .card .track-cover { width: 164px; height: 164px; margin: 0 auto; }
      #play .card .track-cover img {-webkit-border-radius: 35px; -moz-border-radius: 35px; border-radius: 35px; width: 164px; height: 164px; }
      #play .card .track-start { font-family: 'Poppins-Regular.ttf'; font-size: 12px; text-align:center; }
      #play .card .track-title { font-family: 'Poppins-SemiBold.ttf'; font-size: 13px; text-align: center; margin: 0 auto 0 auto; padding: 0 5px; line-height: 16px; vertical-align: middle; }
      #play .card .track-artist { font-family: 'Poppins-Regular.ttf'; font-size: 13px; text-align: center; padding: 0 4px; margin: 0 auto; line-height: 16px; vertical-align: middle; }
      
      #play .card .track-title, #play .card .track-artist {  white-space: nowrap; overflow: hidden; width: 90%; }
      #play .card .track-title span, #play .card .track-artist span { display: inline-block; padding-right: 2em; padding-left: 100%; white-space: nowrap; animation: defilement-rtl 10s infinite linear; overflow: hidden; }    

#play .flex-discover { display: flex; width: 100%; }
  #play .discover1 { flex: 66.66%; padding: 0; }
  #play .discover1 .listen { width: 410px; height: auto; margin: 10px auto; padding: 0; position: relative; visibility: hidden; }
  #play .discover1 .listen img { width: 100%; height: auto; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; opacity: 0.65; }
  #play .discover1 .listen div { position: absolute; font-size: 16px; }
  #play .discover1 .listen .listen-btn { top: 10px; padding: 0 10px; }
    #play .discover1 .listen .listen-btn button { background-color: var(--bg-btn); color: var(--white-rfe); font-family: 'Poppins-Medium.ttf'; padding: 3px 8px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; border: var(--white-rfe) 1px solid; text-shadow: 2px 2px 4px rgb(0 0 0 / 75%); font-weight: normal; letter-spacing: 1px; cursor: pointer; }
    #play .discover1 .listen .listen-btn button:hover { color: var(--bg-rfe); background-color: var(--white-rfe); border: var(--blue-rfe) 1px solid; text-shadow: none; }
    #play .discover1 .listen .listen-btn button.rdvc { background-color: var(--bg-black); }
    #play .discover1 .listen .listen-btn .rdvctxt { position: relative; font-size: 12px; line-height: 17px; padding-left: 38px; margin-top: -2px; }
  #play .discover1 .listen .listen-txt { font-family: 'Poppins-Light.ttf'; bottom: 15px; padding: 0 15px; text-shadow: 2px 2px 4px rgb(0 0 0 / 90%); }  
  #play div.equalizer1,#play div.equalizer1:before,#play div.equalizer1:after{width:10px;height:4px;background:#0090ff;position:relative;transform:translate(0px, 28px);box-shadow:0 -30px 0 #0090ff, 0 -60px 0 #0090ff, 0 -90px 0 #0090ff, 0 -120px 0 #0090ff;animation-name:bar1;animation-duration:0.3s;animation-direction:alternate;animation-timing-function:linear;animation-iteration-count:infinite}
  #play div.equalizer1:before{content:'';position:absolute;transform:translate(8px, 0);box-shadow:0 -30px 0 #0090ff;animation-name:bar2}
  #play div.equalizer1:after{content:'';position:absolute;transform:translate(14px, 0);box-shadow:0 -30px 0 #0090ff, 0 -60px 0 #0090ff, 0 -90px 0 #0090ff;animation-name:bar3}
  @keyframes bar1{
      0%,19.9%{box-shadow:0 -6px 0 #0090ff, 0 -12px 0 #5cb7fe, 0 -18px 0 #89cbfe, 0 -24px 0 #b7defd}
      20%,39.9%{box-shadow:0 -6px 0 #0090ff, 0 -12px 0 #5cb7fe, 0 -18px 0 #89cbfe}
      40%,59.9%{box-shadow:0 -6px 0 #0090ff, 0 -12px 0 #5cb7fe}
      60%,79.9%{box-shadow:0 -6px 0 #0090ff}
      80%,100%{box-shadow:none}
  }
  @keyframes bar2{
      0%,19.9%{box-shadow:none}
      20%,39.9%{box-shadow:0 -6px 0 #0090ff}
      40%,59.9%{box-shadow:0 -6px 0 #0090ff, 0 -12px 0 #5cb7fe}
      60%,79.9%{box-shadow:0 -6px 0 #0090ff, 0 -12px 0 #5cb7fe, 0 -18px 0 #89cbfe, 0 -24px 0 #b7defd}
      80%,100%{box-shadow:0 -6px 0 #0090ff, 0 -12px 0 #5cb7fe, 0 -18px 0 #89cbfe}
  }
  @keyframes bar3{
      0%,19.9%{box-shadow:0 -6px 0 #0090ff, 0 -12px 0 #5cb7fe}
      20%,39.9%{box-shadow:0 -6px 0 #0090ff}
      40%,59.9%{box-shadow:0 -6px 0 #0090ff, 0 -12px 0 #5cb7fe}
      60%,79.9%{box-shadow:0 -6px 0 #0090ff, 0 -12px 0 #5cb7fe, 0 -18px 0 #89cbfe}
      80%,100%{box-shadow:0 -6px 0 #0090ff, 0 -12px 0 #5cb7fe, 0 -18px 0 #89cbfe, 0 -24px 0 #b7defd}
  }  
  
  #play .discover2 { flex: 33.33%; padding: 0; }
  #play .discover2 .bloc { margin: 10px auto; padding: 0 10px; background: rgb(112,108,108, .65); -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; position: relative; height: 86%; max-width: 188px; }
  #play .discover2 h4 { font-family: 'Poppins-Black.ttf'; font-size: 21px; text-align: center; text-transform: uppercase; text-shadow: 2px 2px 4px rgb(0 0 0 / 75%); padding: 12px 0 10px ; }
  #play .discover2  button { width: 167px; height: 36px; margin: 3px auto 6px auto; display: block; color: var(--white-rfe); font-family: 'Poppins-Light.ttf'; font-size: 16px; border: transparent; border-radius: 5px; -webkit-background-clip: padding-box; cursor: pointer; background: url(../img/discover2-btn.png) top left no-repeat; }    
  #play .discover2  button:hover { color: #000000; background: var(--white-rfe); }

#play .flex-links { display: flex; width: 100%; }
    #play .links1 { flex: 66.66%; padding: 0; text-align: center; }
      #play .links { display: inline-block; }
      #play .links button { font-family: 'Poppins-Light.ttf'; font-size: 17px; font-weight: normal; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 4px 4px 12px 0px rgb(0 0 0 / 48%); box-shadow: 4px 4px 12px 0px rgb(0 0 0 / 48%); background-color: var(--bg-card); border: var(--bg-card) 1px solid; color: var(--white-rfe); padding: 0 21px; margin: 0 auto; text-align: center; width: fit-content; cursor: pointer; }
      #play .links button:hover { background-color: var(--blue-rfe); color: var(--white-rfe); border: var(--white-card) 1px solid; }
      #play .links .newsletter, #play .links .share { font-family: 'Poppins-Light.ttf'; font-size: 16px; font-weight: normal; }
      #play .links .share { width: 100%; }
      #play .links .give { font-family: 'Poppins-Bold.ttf'; font-size: 16px; margin-left: 5px; }
    #play .links2 { flex: 33.33%; padding: 0; }
      #play .links2 .links { max-width: 85%; text-align: center; margin: 0 auto; display: block; }
      #play .links2 .links, #play .links2 .links button { width: 100%; }
  
    #play .flex-reseaux { flex: 33.66%; text-align: center; }
    #play .flex-reseaux img { width: 28px; height: auto; vertical-align: middle; cursor: pointer; background: rgb(112,108,108, .65); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
    #play .flex-reseaux img.youtube { width: 30px; }
    #play .flex-reseaux img:hover, .flex-reseaux-footer img:hover { background-color: var(--blue-rfe); }
    .flex-reseaux-footer { display: none; margin: 10px 0; text-align: center; }  
  
@keyframes defilement-rtl {
    0% { transform: translate3d(0,0,0); }
  100% { transform: translate3d(-100%,0,0); }
}  

@media (max-width: 1024px) {
    
#play .float-recent { width: 100%; float: none; }     
    #play .recent4 { display:initial; flex: 50%; }
    #play .float-recent.rang1, #play .float-recent.rang2 { width: 100%; }      
    
#grid { padding: 10px 20px 10px 20px; }
  
  #head .logobacktohome { font-size: 14px; margin: 0; }  
  #head h1 { font-size: 38px; top: 0; }
  #head h2 { font-size: 16px; top: -5px; margin-bottom: 5px; }        
    
  #grid { padding: 0; }
    .flex-container { flex-direction: column; }
  
  #head { background-color: var(--blue-rfe); }
  #head .flex-logo { position: absolute; top: 0; left: 0; width: fit-content; }
    #head .logodesktop { display: none!important; }
    #head .logomobile { display: block!important; width: 50%; margin: 10px 0 0 20px; }  
    #head .logobacktohome { display: none!important; }  
    
  #head .flex-reseaux { display: none; }
  .flex-reseaux-footer { display: block; }
  .flex-reseaux-footer img { width: 25px; height: auto; vertical-align: middle; cursor: pointer; margin: 0 5px; }
  .flex-reseaux-footer img.youtube { width: 26px; }
  
  #play .flex-play { flex: inherit; box-shadow: initial; margin: 0; border-radius: initial; padding: 10px 0; }      
    #play .flex-play .track-title, #play .flex-play .track-artist { width: 50%; }     
    #play .flex-play .control img { padding-left: 0; }
    
    #play .flex-play .control { padding-left: 8%; margin-top: 20px; margin-bottom: 20px; }  
    #play .flex-play .timebar { width: 92%; margin: 0 auto; }
    #play .flex-play .volume { top: 0%; right: 4.5%; }
  
  #play .flex-rang { flex: inherit; margin-left: 0; }
  #play .flex-rang h3 { margin: 10px 0 0 5%; font-size: 18px; }
  
  #play .card { max-width: 90%; }
  #play .card .track-title, #play .card .track-artist { margin: 0 auto; }
  #play .card .track-cover { width: 90%; height: auto; max-height: inherit; margin: 0 auto; text-align: center; }
  #play .card .track-cover img { width: 100%; height: auto; min-height: 164px; }  
    
  #play .discover1, #play .discover2 { flex: 50%; }  
    #play .discover1 .listen { padding: 5px 20px; width: 100%; height: 90%; }
    #play .discover1 .listen div.equalizer1:after{transform:translate(15px, 0);}
    #play .discover1 .listen div { font-size: 13px; }
    #play .discover1 .listen .listen-btn { top: 15px; }
    #play .discover1 .listen .listen-txt { bottom: 30px; }    
  #play .discover2 .bloc { height: inherit; max-width: 90%; padding: 5px 20px; height: 90%; }    
      #play .discover2 h4 { padding: 5px 0 5px; font-size: 18px; }
 
  #play .flex-links { display: block; }
    #play .links .share { width: fit-content!important; margin: 15px 0; }
  
}

@media (max-width: 600px) {
  
  #head .logomobile { width: 48%; margin: 8px 0 0 10px; }  
  #head h1 { font-size: 28px; top: 0px; margin-top: 28px; text-shadow: none; }  
  #head h2 { font-size: 14px; top: -5px; margin-bottom: 5px; text-shadow: none; }
      
  #play .flex-play .track-title, #play .flex-play .track-artist { width: 60%;  }         
  
  #play .flex-rang .card { max-width: 70%; }
  #play .flex-rang h3 { text-align: center; }
  #play .float-recent { float: none; display: block; }
  #play .recent1, #play .recent2, #play .recent3, #play .recent4 { flex: none; width: 100%; }
  
  #play .flex-discover { display: block; margin-top: 25px; }
  #play .discover1 { padding: 0; }
    #play .discover1 .listen { width: 100%; height: auto; margin: 10px auto -6px auto; padding: 0; }
    #play .discover1 .listen img { width: 100%; height: auto; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; opacity: 0.55; }  
    #play .discover1 .listen .listen-btn { left: 0; right: 0; margin: 0 auto; width: fit-content; bottom: 18%; top: initial; }
    #play .discover1 .listen .listen-txt { width: 80%; bottom: 15px; top: 20%; left: 0; right: 0; margin: 0 auto; text-align: center; }
    
    #play .discover2 .bloc { max-width: 100%; padding: 10px; margin: 0; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; }    
    #play .discover2 h4 { padding: 0px 0 5px; font-size: 21px; }
    
  #play .flex-links { display: flex; width: 100%; flex-direction: column; }  
    #play .links { display: block; margin-top: -10px; }
    #play .links button { width: 100%; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; }
    #play .links button:hover { border: none; }
    #play .links2 .links { max-width: inherit; margin-top: -10px; }
    #play .links .give { margin-left: 0; background: #8a8686; border: 0!important; padding: 6px 0 12px; }
    #play .links .newsletter, #play .links .share { padding: 6px 0; font-size: 14px; }
    #play .links .newsletter { padding-bottom: 12px; }
    #play .links .share { width: 100%!important; margin: 0; }
    
  .flex-reseaux-footer { margin: 20px 0; }  
}    

@media (max-width: 380px) {
    
  #play .recent1, #play .recent2, #play .recent3, #play .recent4 { flex: none; width: 100%; }  
  #play .discover1 .listen .listen-txt { font-size: 12px; }
  #play .discover1 .listen .listen-btn { bottom: 12%; }
  
}