/* COLORS */

$black: #000000;
$white: #FFFFFF;
$blue: #36a9e1;
$red: #ff0d45;
$primary: $blue;
$secondary: $red;
$yellow: #ffce44;
$orange: #ff8b57;
$pink: #f9025a;


%text {
	font-family: Roboto, sans-serif;
	font-size: 16px;
	color: #5d5d5d;
	text-align: justify;
	line-height: 1.4;
}

%image-bordure {
	position: relative;
	padding-bottom: 0;
	background: url(../img/border1.jpeg) fixed repeat;
	.img {
		display: inline-block;
		height: 100%;
		width: 100%;
		transition: transform ease 0.2s;
	}
	&:hover {
		.img {
			//transform: scale(0.9);
		}
	}
}

/****************************************************/
/* FONTS */


.resymbol:hover,.control:hover{    opacity:0.5;    }
.date, .dateBloc {
	text-transform: uppercase;
}
.inline .date, .resume .date{
	text-align: center;
}
.dateBloc{width:4em;
	text-align: center;}
.dateBloc{display:inline-block;}
.dateBloc *{line-height: 100%;}
.dateBloc  .day {font-size: 1.8em;}
.dateBloc .number {font-size: 1.8em;}
.dateBloc  .month {font-size: 0.8em;}
.dateBloc .time {font-size: 1.2em;margin: 0.2em 0;}

.dateBloc.small{
	font-size: 80%;
}

.date.smooth {
	text-transform: none;
	font-size: 100%;
}

.tabs .ui-tabs-nav {
    text-transform: uppercase;
}
.legend{
	font-size:1.2em;
	border-bottom:3px solid black;
	padding: 0.2em 0 0.2em 0;
	margin: 0.2em 0 0.2em 0;
}
#Main .sectionLabel{
	margin-bottom:1em;
}

h5.focus-title {
	color: $secondary;
}

.rightPart #search-form {
	text-align: right;
	margin-bottom: 2em;
}

.label.relative{
    background-color:black;
    position: absolute;
    left:10px;
    top:-5px;
    color:white;
    padding:5px 7px 0px 7px;
}

/****************************************************/
/* WRAPPER */
/****************************************************/
.wrapper {max-width: 1560px; padding:0 1%;}
.wrapper.text {max-width: 780px; margin:auto;}
.wrapper .rightPart{margin-top:1em;}

@media screen and (min-width: $size_m) {
	#player-container.fixed {
		position: fixed;
		top: 60px;
		width: calc(0% + 235px);
	}
	.wrapper .rightPart{
        margin-top:0;
	}
	.wrapper.sided .leftPart,
	.wrapper.sided .rightPart{
		width:45%;
	}
	.wrapper.navigation .leftPart{
		width:60%;
	}
	.wrapper.navigation .rightPart{
		width:35%;
	}
	.wrapper .leftPart{
		float:left;
	}
	.wrapper .rightPart{
		float:right;
	}
	#specialHome {
		padding-left: 0;
	}
    /*
	#specialHome .leftPart,
	#specialHome .rightPart {
		width: 100%;
	}
    */
	p.intro {
		padding-top: 0px;
		padding-bottom: 40px;
	}
}


button.control, button.symbol{background:transparent;border:none;margin:0;padding:0;}
nav.menu{
	width:100%;
	text-align: justify;
	text-justify: distribute-all-lines;
}
nav.menu li{
	display: inline-block;
	margin-right:2em;
}

button.tag, a.tag{
	font-size:0.9em;
	background:white;
	text-transform: uppercase;
	display:inline-block;
	border: 1px solid #CCC !important;
	color:#342E2E;
	margin: 0.2em;
	padding: 0.3em;
	border-radius: 0.7em;
	-moz-border-radius: 0.7em;
	-webkit-border-radius: 0.7em;
}
button.check, a.check {
	font-size:0.9em;
	text-transform: none;
	display:inline-block;
	margin: 0.2em;
	padding: 0.3em;
}

.category{
	text-transform: uppercase;
}
button.check:before, a.check:before {
	display:inline-block;
	width:1.5em;
}
.box{
	padding:0.2em 0.5em 0.2em 0.5em;
	border-radius: 0.2em;
	-moz-border-radius: 0.2em;
	-webkit-border-radius: 0.2em;
	background:#222;
	color:#fff;
}
.ui-tooltip {
	border:1px solid white;
	position:absolute;
	margin:0;	
	padding: 0.5em;
	background:#222;
	color: white;
	z-index: 9999;
	max-width: 50%;
	background: white;
	color: #222;
	border-color: #222;
}
/****************************************************/
/**** BODY ****/
/****************************************************/
body{
	background: white;
	color: $primary;
}
/****************************************************/
/**** metaNAV ****/
/****************************************************/

#metaNav {
	color: #e8e8e8;
	background-color: #3a3a3a;
	position:fixed;
	z-index:1000;
	top:0px;
	width:100%;
	font-size: 90%;
}
#metaNav ul{
}
#metaNav ul li{
	float: left;
	padding: 0 1em;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow:hidden;
}

#metaNav ul li#nav-search {
	float: right;
}

#metaNav ul li a{
	height: 3em;
	line-height: 3em;
	display:block;
}

#metaNav ul li#nav-language span {
	cursor: pointer;
	height: 3em;
	line-height: 3em;
	display: inline-block;
}

#metaNav ul li#nav-language span.lang-on {
	color: white;
}

#metaNav ul li a span{
	display:inline-block;
}

#metaNav ul li a span.nav-icon {
}

#metaNav a:focus, #metaNav a:hover{
    opacity:0.8;
}
#metaNav ul li.active, #metaNav ul li.active a{
	color: white;
}

#metaNav ul li.active span.iconLabel {
}

#metaNav li#nav-search a {
	display: inline;
}

#metaNav form {
	display: inline-block;
	padding-top: 0.2em;
}

#metaNav input {
	border: 1px solid #ececec;
	width: 10em;
}

.icon-rss {
	color: orange;
}

@media screen and (max-width:$size_m){
	#bg-title { display: none; }
	#metaNav .iconLabel {display:none;}
	#metaNav ul li a span.nav-icon { display: inline-block; }
	#metaNav ul li {
		padding: 0;
	}
	#metaNav ul li a {
		padding: 0 1em;
	}
	#metaNav form {
		display: none;
	}
	#metaNav ul li#nav-language {
		padding: 0.2em 0 0 1em;
	}
}

/****************************************************/
/**** Commons ****/
/****************************************************/

.audio button, .audio a {color:$primary;}

.audio button {
	background: white;
	border: none;
}

/****************************************************/
/**** HEADER ****/
/****************************************************/

/* PANIK LOGO */
#Commons{
	position: relative;
	z-index: 5;
	height: 330px;
	@media screen and (max-width: $size_m) {
		height: 200px;
	}
}
#Commons .wrapper{
}
#mainHeader {
	display: inline-block;
	background: url(../img/top-flowers.png) bottom left no-repeat;
	height: 287px;
	width: 643px;
	@media screen and (max-width: $size_m) {
		max-width: 90%;
		max-width: 90vw;
		height: 187px;
		background-size: contain;
	}
	position: relative;
	&::before {
		content: "";
		background: url(../img/petite.png) no-repeat;
		width: 155px;
		height: 80px;
		position: absolute;
		top: 60px;
		left: 100px;
		@media screen and (max-width: $size_s) {
			transform: scale(0.8);
		}
		@media screen and (max-width: $size_m) {
			left: 40px;
			top: 10px;
		}
	}
}
#Player {
	display: inline-block;
}

#mainHeader *{color:black !important;line-height:1em;}

#Panik img{display:block;margin:auto;max-height:200px;}
#mainHeader h1{
	padding-left:75px;
}
#player-container #player{
    padding:0 0 0 0;
    min-width: 240px;
}

#Changing h1.top a:hover {
	opacity: 1.0;
}

#Changing {
	background: white no-repeat;
	background-image: url(../img/back1.png), url(../img/back2.png), url(../img/back3.png);
	background-position: top 0 left -30px, top 300px right -30px, top 700px left -50px;
}

@media screen and (min-width: $size_m) {
	#Commons {
		box-sizing: border-box;
		padding: 0 20px;
	}
	#Changing {
		box-sizing: border-box;
		padding: 0;
	}
	#All h1.top {
		text-transform: uppercase;
		padding-left: 0;
		padding-top: 20px;
		padding-bottom: 20px;
		text-align: center;
	}

	#metaNav {
		padding-top: 2px;
	}
	#metaNav .nav-icon {
		display: none !important;
	}

	ul#ticker {
		margin-bottom: 10px;
	}

	#News div.mainSub,
	#About div.mainSub,
	#Emissions div.mainSub {
		position: absolute;
		top: 50px;
		left: 320px;
		width: 60%;
		width: calc(98% - 320px);
	}

	#News div.mainSub ul,
	#About div.mainSub ul,
	#Emissions div.mainSub ul {
		padding: 0;
		font-weight: normal;
	}

	#News div.mainSub ul li,
	#About div.mainSub ul li,
	#Emissions div.mainSub ul li {
	}

	#News .news.wrapper {
		padding: 0;
	}

	#News .news.wrapper li a {
		margin-left: 0;
		padding-left: 0;
	}

	#Nav header.marged,
	#Main > .marged {
		margin: 0;
	}

	#Related .wrapper,
	#Main > .wrapper,
	#Main > .soundfiles > .wrapper,
	#Main > .news > .wrapper,
	#Nav > .wrapper {
		padding-left: 0;
	}

	#All #Nav nav ul {
		margin-top: 0;
	}

	#Related .padded,
	div.program.padded {
		padding-top: 0;
		padding-left: 0;
	}

	div.program.padded {
		padding-top: 1.5em;
	}

	#fiber-content h2.title {
		margin-top: 0;
		padding-top: 0;
	}

}

#backgroundBox {
	background: transparent;
	text-align: center;
}

#All #backgroundBox h1.top {
	font-size: 20px;
	padding-left: 10px;
	width: 350px;
}

#backgroundBox h1 {
	color: $primary !important;
}

#All h1.top#radiopanik {
	padding-top: 36px;
	background: pink;
}

#All #backgroundBox h1 {
	visibility: hidden;
}


#specialHome div.rightPart h1,
div.focus {
	color: $secondary;
}

h1.top#frequence {
	color: $primary;
}

/****************************************************/
/****  SCREEN NAV ****/
#Nav nav{padding:0.1em;}

#Nav input{color:#333;}
#Nav ul li button,
#Nav ul li a {
	border-width:0 0 2px 0;
	border-style: solid;
	border-color: transparent;
}

#Nav .current,
#Nav .active,#Nav .icon-check,#Nav .active *{
	font-weight: normal;
}

#Nav .selected a,
#Nav ul li.current a, #Nav ul a.active, #Nav button.active {
	border-color: #333;
}

#Nav nav{
	margin:0;
}

#specialHome h2,
#Nav h2{
	margin:0;
	padding:0;
}
#Nav nav ul{
	margin:1em 0 1em 0;
}

#Nav li {
	padding-right: 1em;
}

#Nav li a{
	display: inline-block;
}
#Nav nav ul.distributed li {padding: 0;}

#fiber-nav{
    font-size:150%;
	border-width:0 0 2px 0;border-style:solid;
}
#fiber-nav li, #fiber-nav li a{
	display:block;
}
#fiber-nav ul{
	padding:0.5em;
}
#fiber-nav li a{
	padding:0.5em;
}
#fiber-nav .selected > a,
#fiber-nav .current {
    font-weight:bold;
}

/****************************************************/
/**** PLAYER ****/
/****************************************************/
/*#Home #player{   float: left; } */

#player-container .metas, #player-container img{border-color:#fff;}
#player-container .padded{padding:0.3em;}

#player-container button,#player-container a{
}
#player-container .metas{
    float:right;
}
#DirectStreamPanikControler {
}
#DirectStreamPanikControler div.label {
	margin-top: -10px;
	@media screen and (max-width: $size_m) {
		margin-top: 0;
	}
}

#chatSymbol,
#streamSymbol{
	font-size:3em;
	float:left;
	margin-right:15px;
	position: relative;
	z-index: 10;
	top: -6px;
}
#CurrentlyPlaying{
	color: $red;
	font-weight: bold;
	padding: 0 0 0 0;
	@media screen and (max-width: $size_m) {
		padding: 0.6em 0 0 0;
		margin-top: -5px;
	}
}

#Player {
	position: absolute;
	top: 60px;
	top: 296px;
	left: calc(50% - 200px);
	width: 400px;
	text-align: left;
	display: none;
}

#Player.withPlaylist {
	#audioPlayer {
		display: none;
	}
}

#player-container #myPlaylist a {
	white-space: normal;
}

#player-container.minimized{
	width:auto;
	border-width:0px 2px 2px 0 !important;
	border-bottom-right-radius:1em;
	-moz-border-bottom-right-radius:1em;
	-webkit-border-bottom-right-radius:1em;
}
#player-container.minimized #player{
	padding:0;
}

/*Playlist*/

#Playlist {
	padding-top: 2px;
}

#Playlist #playlistLabel{
	float:right;

}
#Playlist .playListControls{	
}
#Playlist .playListControls button{	
	margin-right:0.5em;
	display:inline-block;
}
#Playlist .playListControls .playPause{
	font-size:3em;
	margin-right:5px;
	float:left;
	position: relative;
	top: -8px;
	@media screen and (max-width: $size_m) {
		top: -2px;
	}
}

#Playlist .playing .icon-pause{
   -webkit-animation: loading 1s infinite linear;
   -moz-animation: loading 1s infinite linear;
   -o-animation: loading 1s infinite linear;
   animation: loading 1s infinite linear;
}
#Playlist .playlistControls button,#Playlist .playlistControls .button{
	margin:0 0.1em 0 0.1em;
}
#Playlist li{
	clear:right;
}
#Playlist .soundControls button{}

#player-container #Playlist ol li{
	line-height:1.3em;
	padding:0;
	margin:0;
}
#Playlist ol li .soundControls{
	margin-left: 1ex;
	position: relative;
	float: right;
	visibility: hidden;
}
#Playlist ol li.active .soundControls {
	visibility: visible;
}
#Playlist ol li .title{
	display:inline-block;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

@media screen and (max-width: $size_m) {
        #backgroundBox {
                background-position: center 30px;
        }
        #All h1.top#radiopanik {
        }
	#Player{
        margin-top:1em;
    }
	#Player.withPlaylist #player-container #audioPlayer,
	  #Player.withPlaylist #player-container #audioPlayer,
	   #Player.withPlaylist #player-container #Playlist{
		float:none !important;
		width:auto !important;
        border-right:none !important;
		max-width:auto !important;
	}

	#player.on-chat-page {
		display: none;
	}

	div.chat-page .rightPart {
		font-size: 95%;
		margin-top: 4em;
		padding-top: 1em;
		border-top: 1px solid #777;
	}

}

/****************************************************/
/**** #Changing #Footer ... ****/
/****************************************************/
#Changing{
	display: flex;
	flex-direction: column;
	min-height: 84vh;
}

#Main{
	margin: 0 auto;
	width: 1010px;
	flex-grow: 1;
	position: relative;
	z-index: 10;
	@media screen and (max-width: $size_m) {
		z-index: 1;
		width: auto;
		margin: 0 1rem;
	}
}
#Main >.wrapper{
	padding-bottom:2em;
}
#Home #Main{
	min-height:0;
}
#Changing a:hover,#Changing button:hover {
	text-decoration:none;
}
/* GLOBAL SITE NAV */
#userLog{
	z-index:2000;
	position: fixed;
	bottom: 0px;
	right: 0px;
}
#userLog .log{
	margin:0.3em;
	-moz-box-shadow: 0px 0px 3px #000;
	-webkit-box-shadow: 0px 0px 3px #000;
	box-shadow: 0px 0px 3px #000;
	border-radius:0.5em;-moz-border-radius:0.5em;-webkit-border-radius:0.5em;
	text-align:center;
	padding: 0.3em;
	font-size:0.9em;
	color:black;
	background-color:$primary;
	border: 2px solid black;
	background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.04) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.04) 50%, rgba(0, 0, 0, 0.04) 75%, transparent 75%, transparent);
}
#userLog .log.info{
	background-color:grey;
	color:white;
}
#userLog .log.ok{
	background-color:green;
	border-color:black;
	color:white;
}
#userLog .log.error{
	background-color:$primary;
	border-color:yellow;
}
#main {}
#mainLegend{
	width:30%;
	text-align:right;
	float:right;
	padding:1em;
}

#Footer {
	background: url(../img/footer-provisoire-min.jpeg) bottom center no-repeat;
	padding-top: 120px;
	padding-bottom: 80px;
	font-weight: bold;
	position: relative;
	z-index: 3;
	font-size: 16px;

	a {
		color: $pink;
		text-decoration: none;
	}

	p {
		margin: 0 1em 1em 0;
		text-align: center;
	}

	@media screen and (max-width: $size_m) {
		padding-bottom: 30px;
	}
}


/****************************************************/
.inline .link{display:block;padding:1em;}
/**** Liste   ****/
/**** EMISSIONS ****/


/**** EPISODE ****/
/**** Detail  ****/

.episode .tag{
}
.episode.resume, .episode.inline{
	padding:1em 0.5em 1em;
}
.episode.inline .dateBloc, .episode.resume .dateBloc{
	float:left;
}
.episode.resume img {
	border: 2px solid black;
}

.episode.resume .title{
	margin-bottom:0.5em;
}
.episode.resume .logo{
	float: right;
}
.topik-link .logo,
.episode.inline .logo {
	min-height: 50px;
	float: left;
	margin-right: 1em;
}
.episode.resume .sound{
	float:right;
	margin:0 0 0.5em 0.5em;
}
.episode.inline .sound.right{
	text-align:center;
	font-size:70%;
	position: relative;
	z-index: 10;
}
.episode.inline .sound.right button{
    font-size:1.5em;
	display:inline;
	text-align:center;
	padding-bottom:0.05em;
}
.episode.resume .sound.right .icon-download{
	text-align:center;
}
.episode.resume .sound.right .icon-download{
	display:block;
}

.big.icon-pause,
.big.icon-stop,
.big.icon-share {
	display: inline-block;
	vertical-align: middle;
}

.episode.detail .logo.right{
	max-width:50%;
}

.episode.resume .date .day, .emission-detail .date .day {
}

.episode.resume .content {
	padding-left: 5em;
}
.episode.resume .content .title {
}

.episode.resume .logo {
	margin:0 0 1em;
	max-width:20%;
}
.episode.inline .date{
	font-size:80%;
}

#Emission-tabs-menu .emissions-newsitems {
	margin-bottom: 2em;
}

#Emission-tabs-menu .emissions-newsitems ul.list li {
	border: 0;
}

#Emission-tabs-menu .futur-episodes h5,
#Emission-tabs-menu .recent-episodes h5 {
	font-size: 1.2em;
}

#Emission-tabs-menu #search-form {
	margin-bottom: 1em;
}

div.extra-soundfiles h3 {
	margin-top: 1em;
	font-size: 2.5em;
}

div.extra-soundfiles ul li {
	position: relative;
}

div.extra-soundfiles ul li div.audio {
	display: inline;
	top: 5px;
	right: 0;
	position: absolute;
	font-size: 60%;
}

div.extra-soundfiles ul strong {
	padding-right: 3em;
}

/****************************************************/
/**** News ****/

#newsRoll {
	max-width: 500px;
}

#newsRoll li {
	background: white;
}

.newsRoll .title{
	background:black;
	color:white;
	bottom:0px;
	opacity:0.9;
    width:100%;
	text-align: left;
	position: absolute;
	left: 0;
}
.newsRoll .title div{
	padding: 1em;
}
.newsRoll a, .newsRoll button img{
    border:3px solid $secondary;
}

.newsRoll .by3 button {
	width: 100%;
}

.soundfiles .special a,
.news .special a {
	position: relative;
}

.special .labels .item,
.newsRoll .labels .item{
	display:block;
	background: $secondary;
	color:white;
	margin:0.1em;
	font-size:0.9em;
	padding:0.3em;
}
.newsList .current a{
    opacity:0.5;
}
/****************************************************/
.list.news li {
}

.soundfiles ul.custom li a,
.news ul.custom li a { max-width: 98%; }
.news li.item a {padding:1em;}

.logo img{
	display:block;
	border-style:solid;
	border-width:3px;
}
ul.newsSpecial{
	border-bottom:3px solid #ccc;
}

/****************************************************/
/**** Home & ****/
/****************************************************/

#Home #Nav .wrapper{
	max-width:auto !important;
	width:auto !important;
}

/****************************************************/
/**** PROGRAM ****/
/****************************************************/

.program.tabs nav ul li{
	display:table-cell;
	width:14%;
	text-align:center;
}

.program.tabs nav ul li.week-arrow {
	width: 1%;
	padding-bottom: 5px;
}

.program ul .dateBloc {
	float:left;
	padding-top:1em;
}
.program ul .schedule {
	margin-left:5em;
}
.program .nonstop {
	text-align:left;
}
.program-week .programDate{
	float:left;
	width:3em;
}
.program-week .programCell{
	margin-left:3.5em;
}
.program-week .nonStop .programDate{
	visibility:hidden;
}
.program-week .nonStop .programCell{
	font-size:0.9em;
	padding-left:50%;
	text-align:right;
}
.program-week a.nonstop{
	font-size:0.9em;
	margin:0.1em;
}
.program-week .inline,.program-week .resume{padding:0;}
.program-week .description{}

.program-week .title {
	color: black;
	display: inline;
}

.program-week .smooth {
	color: #666;
	opacity: 1.0;
	font-size: 80%;
	padding-bottom: 8px;
}

.program-week .emission h5,
.program-week .smooth .title {
	color: #333;
	text-transform: uppercase;
}

.program-week .description {
	color: black;
	font-size: 90%;
}

.program-week .programCell:hover {
	opacity: 0.5;
}

#Changing .program-week .programCell a {
	opacity: 1.0;
}

#Changing .program-week .programCell .smooth a {
	opacity: 0.5;
}

#Changing .program-week .programCell .smooth h5 a {
	opacity: 1.0;
}


/****************************************************/
/**** SEARCH ****/
/****************************************************/

.search li.previous-page {
  margin-bottom: 2ex;
  text-align: left;
  margin-left: 0ex;
  font-style: italic;
}

.search li.next-page {
  margin-top: 2ex;
  text-align: right;
  margin-right: 0;
  font-style: italic;
}

.search-filters {
  text-align: justify;
}


/****************************************************/
/**** GRILLE ****/
/****************************************************/

#grid #Main {}
#grid th{
	color:#000;
}
#grid .heure {
	height:50px !important;
}
#grid .heure.vertical {
	padding:1.5em 0;
}
#grid .day {
	padding:1em 0 1em 0;
}
#grid .nonstop {
}
#grid .item{
	padding:0.5em 0.2em 0.5em 0.2em;
}
#grid .cell hr {
	border:1px dotted #ddd;
	margin:0.3em;
}
#grid .time-label{
	margin-top:0.5em;
}

#grid .highlighted,#grid .highlighted  *{
	background:#333 !important;
	color:white !important;
}

#grid .highlighted,#grid .highlighted  *{
	background:#333 !important;
	color:white !important;
}
#Emissions li.item.normal{
	display:none;
}
#Emissions li.item.hightlighted{
	display:block !important;
}

#gridNav span.category {
	text-transform: none;
}


/**** Navigation for static pages ****/

#fiber-nav {
	font-size: 150%;
}
#fiber-nav li, #fiber-nav li a {
	display: block;
}
#fiber-nav ul{
	padding: 0.5em;
}
#fiber-nav li a{
	padding:0.5em;
}

#fiber-content a {
	text-decoration: underline;
}

#fiber-content .episode a,
#fiber-content ul.list a {
	text-decoration: none;
}

#fiber-content a:hover {
	text-decoration: none;
}

.intro,
.userContent,
#fiber-content,
.content,
.content h5 {
	line-height: 120%;
}

.userContent strong,
#fiber-content strong {
	text-transform: none;
	font-style: normal;
}

.userContent em,
#fiber-content em {
	font-family: inherit;
	font-style: italic;
}

/**** SCREEN SIZE ADAPTATIONS ****/
    html #main{ font-size: 70%; }
body { font-size: 18px;}
@media (max-width: 300px){
    body #All{ font-size: 80%; }
}

@media (min-width: 300px) and (max-width:800px){
    body #All{ font-size: 85%; }
}

@media (min-width: 800px) and (max-width:$size_m){
    body #All{ font-size: 90%; }
}

@media (min-width: $size_m) {
    body #All{ font-size: 100%; }
}

#subscribe-form {
  position: relative;
  margin-bottom: 2em;
  padding-bottom: 2em;
}

#Home #subscribe-form {
  margin-bottom: 0;
}

#subscribe-form ul.errorlist {
  position: absolute;
  bottom: -2em;
  text-align: center;
  display: block;
  width: 100%;
  padding: 0;
  list-style: none;
  color: #800;
}

#subscribe-form input {
	width: 15em;
	max-width: none;
}

#Nav div.search form {
  padding: 1em 0;
}

div.episode.resume div.title {
	white-space: normal;
}

#Home div.program.tabs {
	margin: 1em 0;
}

nav#program li {
	display: block;
	margin: 0;
}

#recent-emissions,
#recent-news,
#recent-sounds {
	margin-top: 2em;
}

#recent-emissions h3,
#recent-news h3,
#recent-sounds h3 {
	font-size: 140%;
}

#recent-emissions h3.sectionLabel {
	margin-bottom: 0;
}

.episode.soundfile {
	padding: 0;
}

.soundfile .smooth {
	color: #666;
	opacity: 1.0;
	font-size: 80%;
}


.soundfile p.date {
	margin: 0;
}

.frontpage.soundfile .audio {
	font-size: 80%;
	padding-top: 0.5ex;
	padding-bottom: 1ex;
}

#panikdb {
	position: absolute;
	top: -20px;
	right: 0px;
	background: white;
	color: #888;
	padding: 5px 10px;
	border: 1px solid #888;
	border-width: 1px 1px 0 1px;
	-webkit-transform-origin: bottom right;
	-webkit-transform: rotate(270deg);
	-moz-transform-origin: bottom right;
	-moz-transform: rotate(270deg);
	transform-origin: bottom right;
	transform: rotate(270deg);
}

img.logo.right {
	margin-bottom: 1em;
}

.soundfile .special,
.newsitem .special {
	margin-bottom: 2em;
}

.newsitem .special .smooth {
	padding-top: 5px;
}

/* USER CONTENT */

div.userContent ul {
	margin: 1em 0;
}

div.userContent h1,
div.userContent h2,
div.userContent h3,
div.userContent h4 {
	text-transform: none;
	font-weight: normal;
}

div.userContent h1 { font-size: 2em; }
div.userContent h2 { font-size: 1.8em; }
div.userContent h3 { font-size: 1.5em; }
div.userContent h4 { font-size: 1.5em; }
div.userContent a { text-decoration: underline; }

div.userContent a.tag { text-decoration: none; }

@media screen and (max-width: $size_m) {
	#streamSymbol{
		top: 0;
	}
	#MainHeader {
		margin: 0 auto;
	}
	#All #backgroundBox h1.top {
		width: 94%;
	}

	#Player.withoutPlaylist #player-container #audioPlayer{
	    margin:auto;
	    width:100%;
	}
	#player-container { width:100%;left:0;border-width: 2px 0 0 0;border-style:solid;}
	#player-container{
		background: $red;
	}
        #player-container * {color: white !important; }
	#player-container{
		z-index:500;
		position:fixed;
		width:100% !important;
		/*top:2em;*/
		border-top: 2px solid red;
		bottom:0em;
		border-bottom:none;
		height: 50px;
	}
}

div.emission-logo {
	margin-left: 1em;
}

div.extra-soundfiles {
	clear: both;
}

h3.episode-subtitle {
	color: $blue;
	font-size: 24px;
	padding-top: 0;
}

.waveform {
	display: none;
	position: relative;
}

.waveform span {
	background: $orange;
	background: linear-gradient(to top, darken($orange, 20%) 0%, $orange 40%);
	display: inline-block;
	width: 0.50%;
	cursor: pointer;
}

.waveform span.done {
	background: linear-gradient(to top, darken($red, 5%) 0%, darken($red, 10%) 100%);
}

.waveform span.done.current + span {
	background: $red;
}

.waveform i.duration {
	position: absolute;
	right: 4px;
	bottom: 4px;
	color: black;
	opacity: 0.5;
	font-style: normal;
	font-weight: bold;
}

span.timestamp {
	cursor: pointer;
	border-bottom: 1px dotted #666;
}

div.fragment-sound {
	position: relative;
}

div.soundcell div.logo {
	vertical-align: top;
}

div.fragment-sound {
}

div.extra-soundfiles div.fragment-sound {
	margin-top: 5px;
}

div.extra-soundfiles div.fragment-name {
	font-style: italic;
	position: relative;
	top: 1ex;
	max-width: 70%;
}

div.extra-soundfiles ul li div.fragment-sound div.waveform {
}
div.extra-soundfiles ul li div.fragment-sound div.audio {
	bottom: 0;
}

#fiber-content div.extra-soundfiles strong {
	text-transform: uppercase;

}

.nonstop-track-title, .nonstop-track-artist {
	font-size: 80%;
}

.soundfile-info {
        padding-right: 75px;
}

#fiber-content div.extra-soundfiles .soundfile-info strong {
        padding-right: 0;
}

#fiber-content div.extra-soundfiles .soundfile-info a {
        text-decoration: none;
}

#fiber-content div.extra-soundfiles {
	margin: 1em 0;
}

div.extra-soundfiles div.logo {
	display: inline-block;
}

div#fiber-content div.extra-soundfiles ul.list {
	display: inline-block;
	width: 88%;
	width: calc(100% - 74px);
}

div.download-links {
	position: absolute;
	z-index: 1000;
	text-align: right;
}

div.hidden-download-links {
	display: none !important;
}

div.episode-detail div.sound div.download-links {
	display: inline-block;
	padding-top: 1ex;
	padding-left: 3em;
}

div.extra-soundfiles div.download-links {
	background: white;
}

h1.top a.dimmed {
	opacity: 0.7;
}

div#agenda div.content-inline {
	margin-bottom: 1em;
}

div.previous-and-next-months {
	margin-top: 1em;
}

div.publication-date.date.smooth {
	font-size: 80%;
}

#All h1.top.fullwidth {
	width: 150%;
}

div.gallery > div {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	> span {
		display: block;
		width: 20%;
		position: relative;
		@media screen and (max-width: $size_s) {
			width: 50%;
		}
		img {
			width: 100%;
			height: 100%;
			cursor: pointer;
		}
		span.title {
			position: absolute;
			top: 0;
			left: 10px;
			background: $secondary;
			color: white;
			padding: 0.5ex 1ex;
			border-bottom: 3px solid $yellow;
		}
	}
}

div.gallery img {
	background: white;
}

div#dialog-background,
div.gallery div.first {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.9);
	z-index: 1000;
	text-align: center;
}

div.gallery div.first img {
	padding: 5px;
	padding-bottom: 25px;
	margin-top: -300px;
	margin-left: -500px;
	position: absolute;
	top: 50%;
	left: 50%;
	transition: all 0.5s ease;
	transform-origin: bottom left;
}

div.portrait div.gallery div.first img {
	margin-top: -320px;
	margin-left: -240px;
}

div.gallery {
}

div.gallery span.gallery-legend {
	display: inline-block;
	position: absolute;
	top: 50%;
	margin-top: 304px;
	left: 0%;
	width: 100%;
	color: #000;
	z-index: 1000;
}

div.portrait div.gallery span.gallery-legend {
	margin-top: 330px;
}

@media screen and (max-width: $size_m) {
	div.portrait div.gallery div.first img,
	div.gallery div.first img {
		max-width: 80vw;
		margin: 0;
		max-height: 80vh;
		left: 10vw;
		top: 10vh;
		display: inline-block;
	}
}

ul.tags {
	padding-top: 1em;
	clear: both;
}

a.topik-link {
	clear: both;
	display: block;
	margin-top: 1em;
}

#fiber-content div.topikcellcontent a {
	text-decoration: none;
	height: 500px;
}

#fiber-content div.topikcell .topik-large a {
	height: auto;
}

div.topikcellcontent h5 {
	padding-top: 1ex;
}

div.topikcellcontent.topik-large a {
	width: 100%;
	float: none;
	display: inline-block;
	text-align: left;
}

div.topikcellcontent.topik-large img {
	width: 100%;
	display: block;
}

div.topikcellcontent.topik-large a div {
	@media screen and (min-width: 760px) {
		display: flex;
	}
	margin-top: 1ex;
	h2 {
		margin-top: 0;
		white-space: nowrap;
		margin-right: 1ex;
		@media screen and (max-width: 760px) {
			padding-bottom: 0;
		}
	}
}

div.topikcellcontent a {
	margin-bottom: 2em;
	display: inline-block;
	text-align: left;
	width: 50%;
	box-sizing: border-box;
	padding-right: 2em;
	float: left;
}

div.topikcellcontent img {
}

div.topikcellcontent h2 {
	font-size: 3.5em;
}

.program-week img.smooth {
	padding-bottom: 0;
}

div#dialog-background {
	display: flex;
}
div#dialog-embed {
	position: relative;
	background: white;
	width: 50%;
	margin: auto;
	text-align: left;
	padding: 1ex;
	color: black;
}

div#dialog-embed textarea {
	width: 100%;
	max-width: none;
}

div#dialog-embed #close-button {
	position: absolute;
	right: 1ex;
}

body#embed {
	min-height: auto !important;
	margin: 0;
	background: white;
	div.soundfile-info {
		height: 36px;
	}
}

body#embed #Main {
	background: transparent;
}

body#embed #Commons,
body#embed #metaNav,
body#embed #Footer,
body#embed #userLog,
body#embed #panikdb,
body#embed #Player {
	display: none;
}

body#embed #Changing {
	float: none;
	width: auto;
}

body#embed #Main > .wrapper {
	padding: 0;
}

body#embed .logo {
	padding: 0;
	img {
		border: 0;
	}
}

body#embed ul.custom {
	display: inline-block;
	width: calc(100% - 110px);
}

body#embed ul.custom .soundfile-info {
	padding: 0;
}

body#embed span.fragment-title {
	font-weight: normal;
}

table.playlist {
	width: 90%;
}

table.playlist td {
	padding: 0.5ex;
	text-align: left;
}

table.playlist td.tracktime {
	width: 6ex;
	text-align: center;
}

p.playlist-disclaimer {
	margin-top: 2em;
	max-width: 60ex;
	font-style: italic;
}


#main-topiks #fiber-nav li ul {
    padding-top: 0;
    padding-left: 2em;
}
#main-topiks #fiber-nav li ul li {
    padding-left: 0;
    font-size: 80%;
}

#main-topiks #fiber-nav li ul li a {
    padding-left: 0;
}

div.commands {
	display: flex;
	width: 90vw;
}

@media screen and (min-width:$size_m){
	div.commands {
		width: calc(90vw - 240px);
	}
}

input#msg {
	flex-grow: 1;
}

div.chat-area {
	max-width: 60em;
}

#chat {
       margin-top: 1ex;
}

#chat div.msg {
        position: relative;
        margin-bottom: 1ex;
        transition: opacity 1s ease;
}

#chat div.msg.new {
        opacity: 0;
}

#chat div.msg.msg-out span.content {
        font-size: 90%;
        color: #444;
}

#chat span.from {
   display: inline-block;
   width: 10rem;
   overflow: hidden;
   text-overflow: ellipsis;
   color: #888;
   position: absolute;
}
#chat span.content {
  display: inline-block;
  padding-left: 11rem;
}

#chat div.msg.info span.content {
	padding-left: 1rem;
	font-style: italic;
	color: #666;
}

@media screen and (max-width: $size_m) {
    #chat span.from {
        display: block;
        position: static;
        width: auto;
    }
    #chat span.content {
        display: block;
        padding-left: 2rem;
    }
}

h1.top > span.chat.with-logo {
	position: relative;
	left: 140px;
	display: inline-block;
	max-width: calc(100% - 140px);
}

div.top-logo {
	position: absolute;
	top: 30px;
}

div.top-logo img {
	border: 2px solid black;
}

@media screen and (max-width:$size_m){
	div.top-logo {
		display: none;
	}
	h1.top > span.chat.with-logo {
		position: static;
		max-width: none;
	}
	div.topikcellcontent a {
		width: auto;
	}
	#fiber-content div.topikcell a {
		height: auto;
	}
}

div#CurrentlyChatting {
	cursor: pointer;
	margin-top: 1em;
}

div.description-emission-chat {
	margin-bottom: 2em;
}

div.chatPart h3 {
	padding-top: 0;
}

div#chat.moderation .msg-in span.from {
	cursor: pointer;
}

div#chat.moderation .msg-in span.from:hover::after {
	padding-left: 1ex;
	font-family: FontAwesome;
	content: "\f056";
	font-size: 80%;
}

div.programCell a.playlist {
	font-size: 80%;
}

#bg-title {
	display: none;
	color: lighten($primary, 20);
	text-transform: uppercase;
	line-height: 100%;
	font-size: 250px;
	font-size: 25vh;
	position: absolute;
	left: -260px;
	top: 48vh;
	z-index: 0;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	cursor: default;
}

img {
	box-sizing: border-box;
	transition: all ease 0.5s;
}

div.emission-tile {
	background: white;
	position: relative;
	box-sizing: border-box;
	width: 25%;
	padding-bottom: 20px;
	float: left;
	height: 395px;
	@media screen and (max-width: $size_s) {
		width: calc(50% - 1rem);
		&:nth-child(2n+1) {
			margin-right: 1rem;
		}
		height: 325px;
	}
	overflow: hidden;
	div.image {
		border: none;
		height: 300px;
		width: 230px;
		@extend %image-bordure;
		@media screen and (max-width: $size_s) {
			height: 260px;
		}
	}
	div.name {
		margin-top: 10px;
		text-transform: uppercase;
		text-align: left;
		color: $blue;
		font-weight: bold;
		span {
			transition: all ease 0.5s;
		}
	}
	div.tags {
		@extend %text;
		font-size: 12px;
		text-transform: lowercase;
		min-height: 20px;
		span {
			margin-right: 1ex;
		}
	}
}

div.emission-detail {
	div.emission-tile {
		width: 25%;
		height: 25vw;
	}
}

#www-esperanzah {
	position: absolute;
	top: 58px;
	left: 20px;
	color: $blue;
	border-radius: 3px;
	width: 40px;
	text-align: center;
	padding: 2px 10px;
	transition: all .2s;
	&:hover {
		background-color: $blue;
		color: white;
	}
	@media screen and (max-width: $size_s) {
		top: 0;
		left: 0;
		br {
			display: none;
		}
	}
}

#instagram,
#twitter,
#facebook {
	transition: all .2s;
	display: block;
	position: absolute;
	right: 0;
	top: 5px;
	height: 35px;
	width: 35px;
	background: $yellow url($data_uri_facebook) center center no-repeat;
	z-index: 100;
	&:hover {
		background-color: $red;
	}
	@media screen and (max-width:$size_m) {
		display: none;
	}
}

#twitter {
	top: 45px;
	background: $yellow url($data_uri_twitter) center center no-repeat;
}

#instagram {
	top: 85px;
	background: $yellow url($data_uri_instagram) center center no-repeat;
}

#streamSymbol {
	background-repeat: no-repeat;
	width: 50px;
	height: 50px;
}
div.player-start {
	background: url($data_uri_start), url($data_uri_pause);
	background-position: 0 0, -50px 0;
}

div.player-pause {
	background: url($data_uri_pause);
	background-position: 0 0;
}

div.playListControls {
	button.action-pause {
		background-repeat: no-repeat;
		width: 50px;
		height: 50px;
		background: url($data_uri_pause);
	}

	button.action-play {
		background-repeat: no-repeat;
		width: 50px;
		height: 50px;
		background: url($data_uri_play);
	}
}

div#specialHome {
	background: transparent top center repeat-x;
	padding-top: 50px;
}

div#specialHome h1.top {
	background: transparent bottom center repeat-x;
	padding-bottom: 62px;
}

div#specialHome,
div#specialHome h1.top {
}

div#actu {
	padding-bottom: 14px;
	h2 {
		padding-right: 10px;
		font-size: 40px;
		padding-bottom: 10px;
	}
	div {
		@extend %text;
	}
	@media screen and (max-width: $size_m) {
		display: block;
		> h2 {
			text-align: center;
		}
		> h2, > div {
			width: auto;
		}
	}
}

div.emission-detail {
	h2 {
		margin-top: 0;
		font-weight: bold;
	}
	.schedule {
		color: $orange;
		text-transform: none;
	}
	div.episode-info,
	div.emission-info {
		div.image {
			float: left;
			margin-right: 1rem;
			height: 450px;
			width: 450px;
			@extend %image-bordure;
			@media screen and (max-width: $size_s) {
				float: none;
				max-width: 100%;
				overflow: hidden;
				height: 260px;
				width: 260px;
				margin: auto;
			}
		}
		padding-top: 2rem;
		box-sizing: border-box;
		div.emission-text {
			@extend %text;
			a {
				border-bottom: solid 1px #ff8b57;
				text-decoration: none;
				&:hover {
					background: #ff8b57;
					color: #fff;
				}
			}
		}
	}
	div.episode-info {
		position: relative;
		div.episode-text {
			display: flex;
			flex-direction: column;
			min-height: 450px;
			justify-content: space-between,
		}
		div.sound {
			position: relative;
			align-self: flex-end;
			width: 100%;
			@media screen and (max-width: $size_s) {
				order: -1;
			}
			@media screen and (max-width: $size_m) {
				position: static;
				width: 100%;
			}
			button.action-play {
				font-weight: bold;
			}
			button.action-share {
				text-transform: none;
			}
			button.icon-play-sign {
				display: none;
			}
			button.icon-pause {
				display: none;
				position: absolute;
				bottom: 8px;
				background: transparent;
				left: 2px;
				z-index: 100;
			}
			&.playing button.icon-pause {
				display: block;
			}
		}
		div.more-text {
			@extend %text;
			max-width: 50em;
			margin: 2em auto;
		}
	}
}

div.emission-episodes {
	clear: both;
	padding-top: 2rem;
	ul, li {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	a {
		height: 310px;
		box-sizing: border-box;
		position: relative;
		width: 240px;
		margin-right: 10px;
		display: inline-block;
		margin-bottom: 1rem;
		float: left;
		div.image {
			height: 240px;
			@extend %image-bordure;
		}
		div.time {
			@extend %text;
		}
		div.name {
			color: $blue;
			font-weight: bold;
		}
	}

	&.archives {
		width: 100%;
		a {
		}
		a div.image {
			width: 200px;
		}
	}
}

h3.archives {
	clear: both;
	font-size: 30px;
}

div.emission-episodes.archive::after {
	content: "";
	display: block;
}

p.archives-sorry {
	clear: both;
	padding: 3rem;
	text-align: center;
}

div#Playlist {
	position: relative;
	div.label {
		position: absolute;
		left: 66px;
		top: -10px;
		@media screen and (max-width: $size_m) {
			top: 0;
		}
	}
	ol {
		padding-top: 12px;
		margin-left: 29px;
		list-style: none;
		@media screen and (max-width: $size_m) {
			margin-left: 36px;
		}
	}
}

#back-home {
	text-transform: lowercase;
	display: block;
	text-align: left;
	color: $pink;
	padding-bottom: 2rem;
	font-size: 16px;
	&::before {
		content: "<";
		padding-right: 10px;
		transition: padding 0.2s;
	}
	&:hover::before {
		padding-right: 4px;
	}
	margin-top: -2em;
}

.playing button.no-icon-remove::after {
	content: "\0025fc";
}

#All {
	background: white;
}

div#grid table {
	max-width: 1000px;
	margin: 0 auto;
}

div#loading-page {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 5px;
	background: $secondary;
	z-index: 1100;
	animation-name: load_animation;
	animation-duration: 6000ms;
	animation-timing-function: ease-out;
	transition: opacity 200ms linear;
	&.fade {
		opacity: 0;
	}
}

@keyframes load_animation {
	0% { right: 100%; }
	100% { right: 0%; }
}

div#header_date {
	display: none;
        text-transform: uppercase;
        position: absolute;
        text-align: left;
        color: $red;
	font-weight: bold;
        top: 63px;
        left: 135px;
	@media screen and (max-width:$size_m){
		display: none;
	}
}

h2.top {
	padding-bottom: 2rem;
}

.episode-auto-selection-cell.hide-emission-titles {
	.emission-title, .soundfile-info .sep {
		display: none;
	}
}

#detour-vers-le-footer {
	margin: 0 auto;
	padding-top: 2em;
	text-align: center;
	max-width: 50em;
	clear: both;
	.logos img {
		margin: 0 1ex;
	}
}