/* RADIO */

body {
  margin: 0px;

    /* border-radius: 7px; */
    /* background-color: rgb(223, 158, 169); */
}

#page_gauche {
margin: 0px;
position:fixed;
z-index: 2;
left: 0%;
top: 0%;
width: 20%;
height: 100%;
background-color: rgb(211, 153, 153);
}

#page_droite {
position: absolute;
left: 20%;
top: 0%;
width: 80%;
min-height: 100%;
overflow-x: hidden;
background-color: rgb(116, 204, 231);
}


#player-container {
  max-width: 90%;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

#lecture_encours{
  /* max-width: 90%; */
  height: 57px;
  /* width: 100%; */
  /* margin-left: auto; */
  /* margin-right: auto; */
  margin-top:  10%;
  
  text-align: center;
  background-color: plum;
  border-radius: 7px;
  font-size: 22px;
  padding-top:7px;
  overflow: hidden
}

#pochette{
  width: 100%;
  border-radius: 7px;
  margin-top:  10%;
}

/* Boutton play pause */
#buttonplaypause {
  background-color: transparent;
   box-sizing: border-box;
   height: 74px;
   margin-top:  35%;
   border-color: transparent transparent transparent #202020;
   transition: 100ms all ease;
   will-change: border-width;
   cursor: pointer;
   display: none;
}


.play {
   border-style: solid;
   border-width: 37px 0 37px 60px;
}
.pause {
   border-style: double;
   border-width: 0px 0 0px 60px;
 }
/* Boutton play pause */


#boutton_retour{

	display: block;
margin-top: 120%;
	

}


#player-controls {
  width: 100%;
}


#playerHTML5 {
  width: 100%;
}


/* FINRADIO */



.flex-container {

  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content:space-evenly;
}

.flex-container > div {
width: 12em;
height: 12em;
margin: 2%;
text-align: center;
font-size: 20px;


} 

.flex-container > div > div{
  /* background-color: pink; */
  height: 10%;
  border-radius: 7px 7px 0px 0px;
  background-color: rgb(219, 219, 219);

} 

.flex-container > div > img{
/* background-color: pink; */
width: 100%;
height: 90%;
border-radius: 0px 0px 7px 7px ;
background-color: rgb(219, 219, 219);
} 

#chargement{
  border: 16px solid #f3f3f3; /* Light grey */
  border-top: 16px solid #3498db; /* Blue */
  position: fixed;
  border-radius: 50%;
  width: 7em;
  height: 7em;
  display: block;
  left: 40%;
   top: 300px; 
  z-index: 9999;
  animation: spin 2s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.chargement{
  filter: brightness(0.5);
}
.normal{
  filter: brightness(1);
}