@import 'data_uris';

$size_m: 1000px;
$size_s: 600px;

$very-small-limit: 400px;
$mobile-limit: 760px;

$black: #000000;
$white: #FFFFFF;
$darkmauve: #231644;
$blue: #9499FF;
$red: #f64600;
$primary: $blue;
$secondary: $red;

@mixin cervo-font($type, $weight, $style: normal) {
	@font-face {
		font-family: 'Cervo';
		src: url('../fonts/Cervo/typoforge_studio_-_cervoneue-#{$type}neue-webfont.woff') format('woff2'),
		url('../fonts/Cervo/typoforge_studio_-_cervoneue-#{$type}neue-webfont.woff') format('woff');
		font-weight: $weight;
		font-style: $style;
	}
}

@include cervo-font('regular', 400);
@include cervo-font('bold', 700);

@font-face {
	font-family: 'FontAwesome';
	src: url('/static/xstatic/fonts/fontawesome-webfont.eot');
	src: url('/static/xstatic/fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), url('/static/xstatic/fonts/fontawesome-webfont.woff') format('woff'), url('/static/xstatic/fonts/fontawesome-webfont.ttf') format('truetype'), url('/static/xstatic/fonts/fontawesome-webfont.svg#fontawesomeregular') format('svg');
	font-weight: normal;
	font-style: normal;
}

body {
	font-family: Cervo, sans-serif;
	line-height: normal;
	text-align: left;
	margin: 0 auto 0 auto;
	clear: both;
	font-size: 22px;
	background: $darkmauve;
	color: $white;
}

a {
	color:inherit;
	text-decoration: none;
}
.userContent a:hover {
    text-decoration: underline;
}
a.block:hover,nav a:hover{
    text-decoration: none;
}
button, .button{
	margin:0 0 0 0;
	padding: 0 0 0 0;
	cursor:pointer ;
	background:none;
}
img {max-height: 100%;}

h1, h2, h3, h4, h5{
	line-height:1em;
	padding:0.2em 0 0.2em 0;
}
h1, h2, h3, h4{
	text-transform: uppercase;
}
h1 {	font-size: 6em;}
h2 {	font-size: 40px;}
h3 {	font-size: 3em;}
h4 {	font-size: 1.8em;}
h5 {	font-size: 1.1em;}

/*Specific rules for text writen by final users */
.userContent h1 {	font-size: 2em;}
.userContent h2  {	font-size: 1.9em;}

nav{
	padding:0em;
	text-transform: uppercase;
}
hr {
	height: 0;
	margin:0.5em 0 0.5em 0;
	padding:0;
	border-style:solid;
	border-width:2px 0 0 0 ;
	border-color:black;
}
table{
	margin:auto;
	table-layout:fixed;
}
table,td,tr  {
	padding:0;
	margin:0;
	word-wrap: break-word;
	text-overflow: ellipsis;
        text-align: center;
        vertical-align: middle;
        border: 1px solid #D0D0D0;
	border-collapse:collapse;
}
th {
	white-space: nowrap;
	text-transform: uppercase;
}
tr{
}
p {
    /*line-height: 1.2;*/
    margin-bottom: 1em;
}
p  a {
	text-decoration: underline
}
    
em {
    font-weight: bold;
}
strong{
	text-transform: uppercase;}
blockquote {
	padding: 1em;
	font-style:italic;
}

.sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.hidden{display:none;}
.invisible{visibility:hidden;}

label, select, input, button, textarea{
	font-size:inherit;
}

/* FONT AWESOME CORE
 * -------------------------- */
[class^="icon-"],
[class*=" icon-"] {
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  text-decoration: inherit;
  -webkit-font-smoothing: antialiased;
  *margin-right: .3em;
}
[class^="icon-"]:before,
[class*=" icon-"]:before {
  text-decoration: inherit;
  display: inline-block;
  speak: none;
}
/* makes sure icons active on rollover in links */
a [class^="icon-"],
a [class*=" icon-"] {
  display: inline;
}

/* reglo symbols variants */
[class^="icon-"].resymbol,
[class*=" icon-"].resymbol {
  font-family: Symbols;
}

/* specific icon classes */
.icon-archive:before { content: "\f187"; }
.icon-bolt:before { content: "\f0e7"; }
.icon-bullhorn:before { content: "\f0a1"; }
.icon-calendar:before { content: "\f073"; }
.icon-check:before { content: "\f046"; }
.icon-check-empty:before { content: "\f096"; }
.icon-chevron-sign-left:before { content: "\f137"; }
.icon-chevron-sign-right:before { content: "\f138"; }
.icon-comments:before { content: "\f086"; }
.icon-double-angle-left:before { content: "\f100"; }
.icon-download:before { content: "\f01a"; }
.icon-envelope:before { content: "\f0e0"; }
.icon-file:before { content: "\f15b"; }
.icon-globe:before { content: "\f0ac"; }
.icon-headphones:before { content: "\f025"; }
.icon-home:before { content: "\f015"; }
.icon-info-sign:before { content: "\f05a"; }
.icon-microphone:before { content: "\f130"; }
.icon-pause:before { content: "\f04c"; }
.icon-play:before { content: "\f04b"; }
.icon-play-sign:before { content: "\f144"; }
.icon-plus-sign:before { content: "\f055"; }
.icon-question-sign:before { content: "\f059"; }
.icon-remove:before { content: "\f00d"; }
.icon-rss:before { content: "\f09e"; }
.icon-search:before { content: "\f002"; }
.icon-share:before { content: "\f045"; }
.icon-step-backward:before { content: "\f048"; }
.icon-step-forward:before { content: "\f051"; }
.icon-stop:before { content: "\f04d"; }
.icon-trash:before { content: "\f014"; }
.icon-volume-up:before { content: "\f028"; }

%text {
	font-family: Cervo, sans-serif;
	font-size: 18px;
	color: $blue;
	text-align: justify;
	line-height: 1.4;
}

%image-bordure {
	position: relative;
	padding-bottom: 0;
	background: $red;
	.img {
		display: inline-block;
		height: 100%;
		width: 100%;
		transition: transform ease 0.2s;
	}
}

button {
	border: 0;
}

/****************************************************/
/* 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 {
	padding: 0;
}


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;
}

.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: transparent;
	border: none;
}

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

/* PANIK LOGO */
#Commons{
	position: relative;
	z-index: 5;
	height: 230px;
	@media screen and (max-width: $size_m) {
		height: 200px;
	}
}
#Commons .wrapper{
}
#mainHeader {
	display: inline-block;
	background: url(../img/logo-esperanzah-sun-2022-home-desktop.png) bottom center no-repeat;
	background-size: contain;
	height: 252px;
	width: 643px;
	@media screen and (max-width: $size_m) {
		max-width: 90%;
		max-width: 90vw;
		height: 187px;
		background-size: contain;
	}
	position: relative;
	&::before {
		content: none;
		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 h1{
	padding-left:75px;
}
#player-container #player{
    padding:0 0 0 0;
    //min-width: 240px;
}

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

@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;
	}
}

#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: $red;
}

#All #backgroundBox h1 {
	visibility: hidden;
}

#Nav {
	margin-top: 2em;
}

#specialHome h2 {
	margin:0;
	padding:0;
}

/****************************************************/
/**** 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;
	width: 300px;
	margin-left: -125px;
	margin-top: 0;
	padding-top: 52px;
	text-align: center;
	a {
		display: block;
		white-space: pre;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

#Player {
	position: absolute;
	top: 180px;
	left: calc(50% - 25px);
	width: 50px;
	text-align: left;
	@media screen and (max-width: $size_m) {
		top: 130px;
	}
}

#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;
}

#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;
}


/****************************************************/
/**** #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;
}

#Footer {
	padding-top: 120px;
	font-weight: bold;
	position: relative;
	z-index: 3;
	font-size: 16px;

	a {
		color: $red;
		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;
}


/**** SCREEN SIZE ADAPTATIONS ****/
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%; }
}

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

.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; }

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: $red;
	background: linear-gradient(to top, darken($red, 20%) 0%, $red 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: white;
	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 $red;
		}
	}
}

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;
	textarea {
		width: 100%;
		max-width: none;
	}

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

	h2, h3 {
		margin: 0;
		font-size: 1.6rem;
	}
}

body#embed {
	min-height: auto !important;
	margin: 0;
	background: $darkmauve;
	#Main {
		background: transparent;
		margin: 0;
		width: 100%;
	}
	#Commons,
	#metaNav,
	#Footer,
	#Nav,
	#userLog,
	#panikdb,
	#Player {
		display: none;
	}

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

	#Main > .wrapper {
		padding: 0;
	}

	.logo {
		padding: 0;
		img {
			border: 0;
		}
	}

	div.soundcell {
		display: flex;
		ul.custom {
			list-style: none;
			display: inline-block;
			width: calc(100% - 110px);
			margin: 0;
			padding: 10px 10px 0 10px;
			li div.audio {
				display: block;
				position: static;
				font-size: 16px;
			}
		}
		button, a {
			color: white;
		}
		button.icon-play-sign {
			display: none;
		}
		button.icon-pause {
			position: absolute;
			bottom: 8px;
			background: transparent;
			left: 2px;
			z-index: 100;
		}
		&.playing button.icon-pause {
			display: block;
		}

		.waveform span {
			max-height: 42px;
		}
	}

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

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

#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 {
	position: relative;
	box-sizing: border-box;
	width: 25%;
	padding-bottom: 20px;
	float: left;
	height: 310px;
	@media screen and (max-width: $size_s) {
		width: 100%;
		height: 325px;
	}
	overflow: hidden;
	div.image {
		border: none;
		height: 230px;
		width: 230px;
		text-align: center;
		@extend %image-bordure;
		@media screen and (max-width: $size_s) {
			height: 260px;
		}
	}
	div.name {
		margin-top: 10px;
		text-transform: uppercase;
		text-align: left;
		color: $white;
		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: $red;
	border-radius: 3px;
	width: 40px;
	text-align: center;
	padding: 2px 10px;
	transition: all .2s;
	&:hover {
		background-color: $red;
		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: $red url($data_uri_facebook) center center no-repeat;
	z-index: 100;
	&:hover {
		background-color: $red;
	}
}

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

#instagram {
	top: 85px;
	background: $red 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.player-stop {
	background: url($data_uri_stop);
	background-position: 0 0;
}

#streamSymbol {
	&::after {
		content: "";
		border: 2px solid transparent;
		border-radius: 100%;
		position: absolute;
		top: -2px;
		left: -2px;
		right: -2px;
		bottom: -2px;
	}
	&.player-stop::after {
		animation: rotating-border 2s 1;
	}
}

@keyframes rotating-border {
	0%  {border-left-color: darken($red, 10%); transform: rotate(0deg);}
	99% {border-left-color: darken($red, 10%); transform: rotate(360deg);}
	100% {border-left-color: transparent;}
}

div.playListControls {
	button.action-stop {
		background-repeat: no-repeat;
		width: 50px;
		height: 50px;
		background: url($data_uri_stop);
	}
	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#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;
		margin-bottom: 0;
		font-weight: bold;
	}
	.schedule {
		color: $blue;
		text-transform: none;
		margin: 0;
		padding: 0;
		list-style: 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: 240px;
		}
	}
}

h3.archives {
	clear: both;
	font-size: 30px;
	+ p {
		margin-top: -1em;
	}
}

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

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

div#Playlist {
	position: relative;
	div.label {
		display: none;
	}
	ol {
		color: $red;
		font-weight: bold;
		width: 300px;
		margin: 0;
		padding: 0;
		padding-top: 50px;
		margin-left: -125px;
		color: $red;
		list-style: none;
		text-align: center;
		li {
			display: none;
		}
		li.active {
			display: flex;
			justify-content: center;
		}
		li .soundControls {
			width: 25px;
			position: relative;
			color: $red;
			button.no-icon-remove::after {
				content: "×";
				color: $red;
			}
		}
		#Playlist ol li .title{
			display:inline-block;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
		}
	}
}

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

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

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 {
        text-transform: uppercase;
        position: absolute;
        text-align: right;
        color: $white;
	font-weight: normal;
	font-size: 120%;
        top: 63px;
        right: 55px;
	@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;
	}
}

.emission-text {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 450px;
	@media screen and (max-width:$size_m){
		min-height: auto;
	}
	#subscribe-links {
		ul, li {
			margin: 0;
			padding: 0;
			list-style: none;
		}
		ul {
			display: flex;
			flex-wrap: wrap;
			@media screen and (max-width:$size_m){
				justify-content: center;
			}
		}
		li {
			margin-right: 1em;
			margin-bottom: 1em;
			a {
				padding: 0.3em 0.6em;
				background: $red;
				color: white;
				border-radius: 10px;
				&:hover {
					background: darken($red, 20%);
				}
			}
		}
	}
}