#popup-background {
	position: fixed;
	width: 100vw;
	height: 100vh;
	background: #111;
	display: none;
	top: 0;
	opacity: 0.7;
	left: 0;
	z-index: 10;
}

#popup-message {
	display: block;
	width: 100%;
	height: 55px;
	bottom: 0;
	position: fixed;
	text-align: center;
	line-height: 50px;
	z-index: 11;
}

#popin-message {
	position: relative;
	width: 80%;
	height: 55px;
	max-width: 1160px;
	margin: auto;
}

#popup-message .dashicons {
	font-size: 26px;
	position: absolute;
	right: 40px;
	bottom: 18px;
}


#popup-partage {
	display: none;
	width: 100%;
	height: 100%;
	bottom: 0;
	top: 0;
	left: 0;
	right: 0;
	position: fixed;
	text-align: center;
	z-index: 10;
}

#background-partage {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	z-index: 0;
}

#popin-partage {
	position: relative;
	width: 65%;
	/* height: 65vh; */
	background: #efefef;
	top: 0;
	margin: auto;
	margin-top: 100vh;
	z-index: 1;
	display: block;
	padding-bottom: 2em;
}

#popup-partage .dashicons{
	font-size: 26px;
	position: absolute;
	right: 20px;
	top: 10px;
	cursor: pointer;
}

#partage-menu {
	padding-top: 10px;
	padding-bottom: 25px;
	height: 80px;
}

#partage-menu li{
	float: left;
	list-style: none;
	padding-left: 2em;
	padding-right: 2em;
	padding-bottom: 10px;
	color: #033A40;
	/* border-right: 1px solid #033A40; */
	border-bottom: 2px solid #033A40;
	cursor: pointer;
}

#partage-menu li.selected{
	border-bottom: 2px solid #FD7B48;
	color: #FD7B48;
}

#partage-menu li:last-child{
	border-right: unset;
}

#partage-content{
	clear: both;
	padding-left: 2em;
	padding-right: 2em;
}

.partage-content{
	display: none;
	min-height: 100px;
}

.show{
	display: block;
}
.hide{
	display: none;
}

#popup-partage textarea{
	max-width: 100%;
}

/******************************************************/
/****************** PLAYER  ***************************/
/******************************************************/
#player {
  z-index: 31;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #00373c;
}

#playhead{
  cursor: pointer;
  float: left;
}

* { box-sizing: border-box; }

figure#audioplayer {
  overflow: hidden;
  width: 100%;
  height: 62px;
  /* padding: .4rem; */
  margin: 0 auto;
}
figure#audioplayer audio { width: 0; height: 0; }
figure#audioplayer figcaption {
  /* width: 70%; */
  /* margin: .45rem; */
  background: #00373c;
  float: left;
  text-align: center;
}
figure#audioplayer figcaption div {
  background: #00373c;
  color: #fff;
  /* padding: .8rem; */
  display: inline-block;
  width: 100%;
}
figure#audioplayer figcaption div span {
  display: block;
  font-size: 1.3rem;
  text-indent: 1rem;
}
div#album {
  border-top: 1px solid #555;
  border-bottom: 1px solid #555;
  width: 100%;
}

div#time {
    width: auto;
    float: left;
    color: white;
    padding: 0 1rem 0 1rem;
    height: 60px;
}

#playimage{
    float: left;
    width: 60px;
}

#podcast-image{
  height: 57px;
}

#player svg{
  fill: #fff;
  display: block;
  cursor: pointer;
}

#totaltime,
#septime,
#playbacktime {
    vertical-align: middle;
    height: 60px;
    line-height: 60px;
    display: block;
    float: left;
    font-size: 18px;
}
#septime {
	margin-left: 5px;
	margin-right: 5px;
}
#playbacktime {color: #FB7A47;}
body.is-mobile #playimage{display: none;}
body.is-mobile #septime{display: none;}
body.is-mobile #totaltime{display: none;}
body.is-mobile #time{min-width: unset;width: 60px;}
body.is-mobile #playback{min-width: unset;}

figure#audioplayer figcaption div#artist {
    width: auto;
}

input#volumeSlider {
    -webkit-appearance: slider-horizontal;
}

figure#audioplayer button {
  height: 100%;
  background: #00373c;
  color: #fff;
  border: none;
  float: left;
  font-size: 50px;
  width: 50px;
}

#playback {
  float: left;
  height: 100%;
  min-width: 240px;
}

figure#audioplayer figcaption div span#artiste-content {
    height: 60px;
    vertical-align: middle;
    display: table-cell;
    font-size: 20px;
}
body.is-mobile figure#audioplayer figcaption div span#artiste-content {
    line-height: 60px;
    vertical-align: middle;
    display: block;
}

#fader {
    float: right;
    margin-top: 18px;
    padding-right: 24px;
}

#fader div{
    float: left;
    padding-left: 12px;
    padding-right: 12px;
    height: 24px;
}

#fader .separator{
    width: 1px;
    height: 16px;
    margin: 0;
    padding: 0;
    margin-top: 4px;
    border-left: 1px solid #708D91;
}

#fader .dashicons{
    font-size: 24px;
    width: 24px;
    color: #fff;
    cursor: pointer;
}

#player-menu.dashicons{
    width: 46px;
}

#faderIn {text-align: center;}

#volumeSlider {
  position: absolute;
  height: 50px;
  margin-left: 8px;
  cursor: pointer;
  transform: rotate(270deg);
-moz-transform: rotate(270deg); /*do same for other browsers if required*/
transform-origin: center left;
top: -20000px;
margin-left: 0rem;
width: 110px
}
#faderIn:hover #volumeSlider , #volumeSlider:hover{
  top: -3px;
}
body.is-mobile #faderIn:hover #volumeSlider, body.is-mobile #volumeSlider:hover {
	top: 4px;
}

 @media (pointer:coarse) {
#volumeSlider {display: none}
 }


 /********** Range Input Styles **********/
 /*Range Reset*/
 input#volumeSlider {
    -webkit-appearance: none;
     appearance: none;
     background: transparent;
     cursor: pointer;
 }

 /* Removes default focus */
 input#volumeSlider:focus {
   outline: none;
   border:none
 }

 /***** Chrome, Safari, Opera and Edge Chromium styles *****/
 /* slider track */
 input#volumeSlider::-webkit-slider-runnable-track {
    background-color: #FD7B48;
    border-radius: 0.5rem;
    height: 0.5rem;
 }

 /* slider thumb */
 input#volumeSlider::-webkit-slider-thumb {
   -webkit-appearance: none; /* Override default look */
    appearance: none;
    margin-top: -8px; /* Centers thumb on the track */
    border-radius:10px;
    /*custom styles*/
    background-color: #000000;
    height: 2rem;
    width: 2rem;
 }

 input#volumeSlider:focus::-webkit-slider-thumb {
border:none
 }

 /******** Firefox styles ********/
 /* slider track */
 input#volumeSlider::-moz-range-track {
    background-color: #FD7B48;
    border-radius: 0.5rem;
    height: 0.5rem;
 }

 /* slider thumb */
 input#volumeSlider::-moz-range-thumb {
    border: none; /*Removes extra border that FF applies*/
    border-radius: 50%; /*Removes default border-radius that FF applies*/

    /*custom styles*/
    background-color: #000000;
    height: 2rem;
    width: 2rem;
 }

 input#volumeSlider:focus::-moz-range-thumb {
   outline: none;
   border:none
 }



#audioplayer progress {
    width: 100%;
    height: 4px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #FFC7B2;
    border: none;
    color: #FFC7B2;
    transition-duration: 300ms;
    transition-property: height;


}
#audioplayer progress:hover {height: 10px;
  transition-duration: 300ms;
  transition-property: height;}
body.is-mobile #audioplayer progress{
  height: 10px;
}

progress::-moz-progress-bar { background: #FF8B5D; }
progress::-webkit-progress-bar { background: #FF8B5D; }
progress::-moz-progress-value { background: #FF8B5D; }
progress::-webkit-progress-value { background: #FF8B5D; }


/* #audioplayer progress {
    margin-left: 3rem;
    width: 67%;
    height: 6px;
    border-radius: 5px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #888;
    border: none;
    color: #CC0000;
    margin-top: 26px;
} */

#playball{
  position: absolute;
  border: 6px solid #FF8B5D;
  border-radius: 6px;
  width: 12px;
  height: 12px;
  top: -4px;
  margin-left: -5px;
  box-shadow: 0px 0px 1px #000;
}

body.is-mobile #playball{
  border: 8px solid #FFC7B2;
  border-radius: 10px;
  width: 14px;
  height: 14px;
  top: -5px;
}

progress::-webkit-progress-bar,
progress::-moz-progress-bar,
progress::progress-bar {
  background: #FD7B48;
}
progress::-webkit-progress-value { background: #CC0000; }




#description {
  position: fixed;
  width: 400px;
  height: auto;
  background: white;
  z-index: 11;
  color: black;
  text-transform: none;
  /*    padding: 1rem;*/
  border: 2px solid black;
  transition: transform 0.5s ease-out;
  transform: translateX(-180%);
  bottom: 64px;
  left: -7px;
}

.description-up#description {
  transform: translateX(10px);
}

#description-text {
  font-family: 'arial', sans-serif;
  font-size: 1.4rem;
  padding: 1rem;
}

#description-text p {
  margin: 0;
}

#description-title {
  text-transform: uppercase;
  background: black;
  color: white;
  padding: 1rem;
  border-top: 2px solid white;
  border-bottom: 2px solid white;
}

#description-duree,
#close-description
{
  background: black;
  color: white;
  padding: 1rem;
}

#close-description{
  cursor: pointer;
}

#playerlist-close {
	position: relative;
	color: #999;
	cursor: pointer;
	height: 65px;
	display: none;
	width: 100%;
	background-color: #efefef;
  border-top: 1px solid #ddd;
}

#playerlist-close .dashicons {
	font-size: 26px;
	position: absolute;
	right: 40px;
	bottom: 25px;
}

#playerlist-close:hover .dashicons{
	color: #000;
}

#playerlist-close{
	display: none;
}
body.is-mobile #playerlist-close{
	display: none;
}

.audioplayer-playlist {
	position: fixed;
	bottom: calc(-100vh + 120px);
	max-height: calc(100vh - 120px);
	width: 100%;
	color: #333;
	background: #fff;
	z-index: 21;
	border-top: 2px solid #eee;
	box-shadow: 0px 8px 12px 7px rgba(0, 0, 0, 0.2);
	/* padding: 2em; */
	/* padding-top: 120px; */
}

.audioplayer-playlist h2{
  color: #FFA380;
  padding-top: 30px;
  padding-left: 20%;
  /* margin-bottom: 1em; */
  height: 12vh;
  vertical-align: bottom;
  box-sizing: border-box;
}

.audioplayer-list-div{
  /* padding-left: 20%;
  padding-right: 20%; */
  height: auto;
  max-height: calc(100vh - 185px);
  padding-bottom: 1em;
  box-sizing: border-box;
  overflow-y: scroll;
}

.audioplayer-list{
  height: 100%;
  width: 100%;
  overflow-y: hidden;
}

.bckgvertfonce{background-color: #003A40}

#audioplayer-select{
  height: 30vh;
  box-sizing: border-box;
  padding: 1em;
  display: none;
}

#audioplayer-select-image {
	width: 35%;
	float: left;
	text-align: right;
	padding-right: 2em;
}

#audioplayer-select-image img{
	max-height: 25vh;
}

#audioplayer-select-content{
	width: 65%;
	float: left;
  color: #fff;
  font-size: 18px;
  font-family: 'recta';
  padding-right: 3em;
}

#audioplayer-select-titre {
	font-family: 'rectaboldcondensed';
	color: #fff;
	font-size: 24px;
}

#audioplayer-select-description {
	font-size: 16px;
	margin-top: 2em;
}

.playlist-son.playlist-selected{
	color: #fff;
	background: -webkit-gradient( linear, left top, left bottom, from( #3498db ), to( #2980b9 ) );
	background: -webkit-linear-gradient( top, #3498db, #2980b9 );
	background: -moz-linear-gradient( top, #3498db, #2980b9 );
	background: -ms-radial-gradient( top, #3498db, #2980b9 );
	background: -o-linear-gradient( top, #3498db, #2980b9 );
	background: linear-gradient( to bottom, #3498db, #2980b9 );
}

.playlist-selected .playlist-son-play path,
.playlist-selected .playlist-son-remove line{
  fill: #FFA380;
  stroke: #fff;
}

.playlist-son{
	position: relative;
  height: 65px;
  /* line-height: 65px; */
  /* padding-left: 30px; */
  /* border-bottom: 1px solid #dfdfdf; */
  color: #033A40;
}

.playlist-son:hover{
	background-color: #FFA380;
  color: #fff;
}

.audioplayer-list-div {padding: 0 !important}

.playlist-son-titre {
  width: 40%;
  padding-left: 2rem;
  padding-right: 2rem;
  font-family: 'rectaboldcondensed';
  font-size: 24px;
}

.playlist-son-description{
  width: 35%;
  padding-left: 2rem;
  padding-right: 2rem;
  font-family: 'recta';
  font-size: 18px;
}

.playlist-son-duree{
  width: 10%;
  padding-left: 2rem;
  padding-right: 2rem;
  font-family: 'recta';
  font-size: 18px;
}

.playlist-son-play,
.playlist-son-remove {
  width: 5%;
  cursor: pointer;
}

.playlist-son-play path,
.playlist-son-remove line{
  fill: #fff;
  stroke: #033A40;
}

.playlist-son:hover .playlist-son-play path,
.playlist-son:hover .playlist-son-remove line{
  stroke: #fff;
  fill: #FFA380;
}


@media screen and (max-width: 600px) {
    div#time {
      display: block !important; width: 80px;
    }
		figure#audioplayer figcaption div span#artiste-content {
		    line-height: 50px;
		    display: block;
		}
  figure#audioplayer {
      width: 100%;
      /* padding: .2rem; */
      padding: 0;
    }
	figure#audioplayer figcaption{
		line-height: 60px;
		font-size: 18px;
	}
  figure#audioplayer figcaption div {
      padding: 0;
			line-height: 60px;
    }

    .wrapper {
        max-width: 100%;
    }

    .logo,
    .nav {
        width: 100%;
        text-align: center;
    }

    .nav ul {
        font-size: 1.5rem;
    }
    .figure#audioplayer figcaption {
        width: 60%;
    }
    #audioplayer progress {
        width: 50%;
        height: 10px
    }
    #playball {top: -1px}
  /*  .podcast {
        width: 50%;
        height: 50px;
        font-size: 1.1rem;
    }*/
		#playerlist-close{ display: block;}

}

@media screen and (max-width: 450px) {
figure#audioplayer figcaption { width: 16rem; }
#playback progress { width: 220px; }
}

@media screen and (max-width: 400px) {
figure#audioplayer figcaption { width: 14rem; }
}


/* ///////////////////////////////////////// */
/* ////////// FRED   JOue ////////////////// */
/* ///////////////////////////////////////// */
#player, figure#audioplayer button, figure#audioplayer figcaption, figure#audioplayer figcaption div {background-color: #033A40}

#audioplayer progress {width: 100%}
figure#audioplayer figcaption div, #fader .dashicons, div#time {color: white}

figure#audioplayer svg path, figure#audioplayer svg circle, figure#audioplayer svg rect{fill:white ; stroke:white}

#audioplayer progress {background-color: #FFC7B2}

#playback {min-width: 50px;}

#playbutton {margin-top: 1.8rem}
#playball {z-index: 99}

figure#audioplayer figcaption { flex-grow: 1;
  overflow: hidden;}
figure#audioplayer figcaption  > :first-child {
    display: inline-block;                /* modèle de boîte en ligne */
    padding-right: 2em;                   /* un peu d'espace pour la transition */
    padding-left: 100%;                   /* placement à droite du conteneur */
    white-space: nowrap;                  /* pas de passage à la ligne */
    animation: defilement-rtl 55s infinite linear;
  }
  @keyframes defilement-rtl {
  0% {
    transform: translate3d(0,0,0);      /* position initiale à droite */
  }
  100% {
    transform: translate3d(-100%,0,0);  /* position finale à gauche */
  }
}

#fader {float: none; display: flex;}
#fader div {float: none;}


#playimage{float: none;height: 60px; width: 60px}
#playimage img {
	width: auto;
	height: 100%;
}

@media screen and (max-width: 916px) {
      /* div#time {
        display: none !important
      } */
      #fader {
        padding-right: 0;
      }
      figure#audioplayer figcaption {
        width: calc(100% - 218px);
      }
      .playlist-son-titre{
        width: 70%;
      }
      .playlist-son-description{
        display: none;
      }
      .playlist-son-play,
      .playlist-son-remove {
        width: 10%;
      }

}

@media screen and (max-width: 450px) {
  #playimage {display: none;}
  figure#audioplayer figcaption {
    width: calc(100% - 150px);
}
}

@media screen and (max-width: 575px) {
  #playerlist-close {
		/* right: 1em;  */
		display: block;}
	#faderIn:hover #volumeSlider, #volumeSlider:hover {
		top: 4px;
	}
  .playlist-son-titre,.playlist-son-description { font-size: 1.7rem;
   width:calc(100% - 160px);padding-right: 1rem;}
  .playlist-son-remove {right: 1em; transform: scale(0.8);}
  .playlist-son-play {right: 79px; transform: scale(0.8);}
	#playimage{display: none;}
	#septime{display: none;}
	#totaltime{display: none;}
	#time{min-width: unset;width: 60px;}
  #playback{min-width: unset;}
}