panikweb_esperanzah/static/css/style.scss

   1 @import 'data_uris';
   2
   3 $size_m: 1000px;
   4 $size_s: 600px;
   5
   6 $very-small-limit: 400px;
   7 $mobile-limit: 760px;
   8
   9 $black: #000000;
  10 $white: #FFFFFF;
  11 $orange: #ff5321;
  12 $yellow: #e3fb00;
  13 $green: #389400;
  14 $blue: #1332ff;
  15 $primary: $yellow;
  16 $secondary: $orange;
  17
  18 $text-font: montreal, sans-serif;
  19 $title-font: euro, sans-serif;
  20
  21 @font-face {
  22         font-family: "montreal";
  23         src: url('../fonts/neuemontreal-regular-webfont.woff2') format('woff2');
  24         font-style: normal;
  25         font-weight: normal;
  26 }
  27
  28 @font-face {
  29         font-family: "euro";
  30         src: url('../fonts/EurostileExtended-Black.woff2') format('woff2');
  31         font-style: normal;
  32         font-weight: bold;
  33 }
  34
  35 @font-face {
  36         font-family: 'FontAwesome';
  37         src: url('/static/xstatic/fonts/fontawesome-webfont.eot');
  38         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');
  39         font-weight: normal;
  40         font-style: normal;
  41 }
  42
  43 * {
  44         box-sizing: border-box;
  45 }
  46
  47 body {
  48         font-family: $text-font;
  49         line-height: normal;
  50         text-align: left;
  51         margin: 0 auto 0 auto;
  52         clear: both;
  53         font-size: 22px;
  54         background: $orange;
  55         color: $white;
  56 }
  57
  58 a {
  59         color:inherit;
  60         text-decoration: none;
  61 }
  62 .userContent a:hover {
  63     text-decoration: underline;
  64 }
  65 a.block:hover,nav a:hover{
  66     text-decoration: none;
  67 }
  68 button, .button{
  69         margin:0 0 0 0;
  70         padding: 0 0 0 0;
  71         cursor:pointer ;
  72         background:none;
  73 }
  74 img {max-height: 100%;}
  75
  76 h1, h2, h3, h4, h5{
  77         line-height:1em;
  78         padding:0.2em 0 0.2em 0;
  79 }
  80 h1, h2, h3, h4{
  81         text-transform: uppercase;
  82 }
  83 h1 {    font-size: 6em;}
  84 h2 {    font-size: 40px;}
  85 h3 {    font-size: 3em;}
  86 h4 {    font-size: 1.8em;}
  87 h5 {    font-size: 1.1em;}
  88
  89 /*Specific rules for text writen by final users */
  90 .userContent h1 {       font-size: 2em;}
  91 .userContent h2  {      font-size: 1.9em;}
  92
  93 nav{
  94         padding:0em;
  95         text-transform: uppercase;
  96 }
  97 hr {
  98         height: 0;
  99         margin:0.5em 0 0.5em 0;
 100         padding:0;
 101         border-style:solid;
 102         border-width:2px 0 0 0 ;
 103         border-color:black;
 104 }
 105 table{
 106         margin:auto;
 107         table-layout:fixed;
 108 }
 109 table,td,tr  {
 110         padding:0;
 111         margin:0;
 112         word-wrap: break-word;
 113         text-overflow: ellipsis;
 114         text-align: center;
 115         vertical-align: middle;
 116         border: 1px solid #D0D0D0;
 117         border-collapse:collapse;
 118 }
 119 th {
 120         white-space: nowrap;
 121         text-transform: uppercase;
 122 }
 123 tr{
 124 }
 125 p {
 126     /*line-height: 1.2;*/
 127     margin-bottom: 1em;
 128 }
 129 p  a {
 130         text-decoration: underline
 131 }
 132
 133 em {
 134     font-weight: bold;
 135 }
 136 strong{
 137         text-transform: uppercase;}
 138 blockquote {
 139         padding: 1em;
 140         font-style:italic;
 141 }
 142
 143 .sr-only {
 144         position: absolute !important;
 145         width: 1px !important;
 146         height: 1px !important;
 147         padding: 0 !important;
 148         margin: -1px !important;
 149         overflow: hidden !important;
 150         clip: rect(0, 0, 0, 0) !important;
 151         white-space: nowrap !important;
 152         border: 0 !important;
 153 }
 154
 155 .hidden{display:none;}
 156 .invisible{visibility:hidden;}
 157
 158 label, select, input, button, textarea{
 159         font-size:inherit;
 160 }
 161
 162 /* FONT AWESOME CORE
 163  * -------------------------- */
 164 [class^="icon-"],
 165 [class*=" icon-"] {
 166   font-family: FontAwesome;
 167   font-weight: normal;
 168   font-style: normal;
 169   text-decoration: inherit;
 170   -webkit-font-smoothing: antialiased;
 171   *margin-right: .3em;
 172 }
 173 [class^="icon-"]:before,
 174 [class*=" icon-"]:before {
 175   text-decoration: inherit;
 176   display: inline-block;
 177   speak: none;
 178 }
 179 /* makes sure icons active on rollover in links */
 180 a [class^="icon-"],
 181 a [class*=" icon-"] {
 182   display: inline;
 183 }
 184
 185 /* reglo symbols variants */
 186 [class^="icon-"].resymbol,
 187 [class*=" icon-"].resymbol {
 188   font-family: Symbols;
 189 }
 190
 191 /* specific icon classes */
 192 .icon-archive:before { content: "\f187"; }
 193 .icon-bolt:before { content: "\f0e7"; }
 194 .icon-bullhorn:before { content: "\f0a1"; }
 195 .icon-calendar:before { content: "\f073"; }
 196 .icon-check:before { content: "\f046"; }
 197 .icon-check-empty:before { content: "\f096"; }
 198 .icon-chevron-sign-left:before { content: "\f137"; }
 199 .icon-chevron-sign-right:before { content: "\f138"; }
 200 .icon-comments:before { content: "\f086"; }
 201 .icon-double-angle-left:before { content: "\f100"; }
 202 .icon-download:before { content: "\f01a"; }
 203 .icon-envelope:before { content: "\f0e0"; }
 204 .icon-file:before { content: "\f15b"; }
 205 .icon-globe:before { content: "\f0ac"; }
 206 .icon-headphones:before { content: "\f025"; }
 207 .icon-home:before { content: "\f015"; }
 208 .icon-info-sign:before { content: "\f05a"; }
 209 .icon-microphone:before { content: "\f130"; }
 210 .icon-pause:before { content: "\f04c"; }
 211 .icon-play:before { content: "\f04b"; }
 212 .icon-play-sign:before { content: "\f144"; }
 213 .icon-plus-sign:before { content: "\f055"; }
 214 .icon-question-sign:before { content: "\f059"; }
 215 .icon-remove:before { content: "\f00d"; }
 216 .icon-rss:before { content: "\f09e"; }
 217 .icon-search:before { content: "\f002"; }
 218 .icon-share:before { content: "\f045"; }
 219 .icon-step-backward:before { content: "\f048"; }
 220 .icon-step-forward:before { content: "\f051"; }
 221 .icon-stop:before { content: "\f04d"; }
 222 .icon-trash:before { content: "\f014"; }
 223 .icon-volume-up:before { content: "\f028"; }
 224
 225 %text {
 226         font-family: $text-font;
 227         font-size: 18px;
 228         color: white;
 229         text-align: justify;
 230         line-height: 1.4;
 231 }
 232
 233 %image-bordure {
 234         position: relative;
 235         padding-bottom: 0;
 236         background: $orange;
 237         overflow: hidden;
 238         .img {
 239                 display: inline-block;
 240                 height: 100%;
 241                 width: 100%;
 242                 transition: transform ease 0.2s;
 243                 img {
 244                         background: $yellow;
 245                         width: 100%;
 246                 }
 247                 &:hover {
 248                         transform: scale(110%);
 249                 }
 250         }
 251         &::before {
 252                 content: "";
 253                 z-index: 100;
 254                 pointer-events: none;
 255                 position: absolute;
 256                 background-position: center center;
 257                 background-size: 6000px 6000px;
 258                 top: 0px;
 259                 left: 0px;
 260                 bottom: 0px;
 261                 right: 0px;
 262                 transition: all .2s;
 263                 background-image: url(../img/bloc-hover-2023-1.svg);
 264         }
 265         &:hover::before {
 266                 background-size: 110% 110%;
 267         }
 268         &.style2::before {
 269                 background-image: url(../img/bloc-hover-2023-2.svg);
 270         }
 271         &.style3::before {
 272                 background-image: url(../img/bloc-hover-2023-3.svg);
 273         }
 274
 275 }
 276
 277 button {
 278         border: 0;
 279 }
 280
 281 /****************************************************/
 282 /* FONTS */
 283
 284
 285 .resymbol:hover,.control:hover{    opacity:0.5;    }
 286 .date, .dateBloc {
 287         text-transform: uppercase;
 288 }
 289 .inline .date, .resume .date{
 290         text-align: center;
 291 }
 292 .dateBloc{width:4em;
 293         text-align: center;}
 294 .dateBloc{display:inline-block;}
 295 .dateBloc *{line-height: 100%;}
 296 .dateBloc  .day {font-size: 1.8em;}
 297 .dateBloc .number {font-size: 1.8em;}
 298 .dateBloc  .month {font-size: 0.8em;}
 299 .dateBloc .time {font-size: 1.2em;margin: 0.2em 0;}
 300
 301 .dateBloc.small{
 302         font-size: 80%;
 303 }
 304
 305 .date.smooth {
 306         text-transform: none;
 307         font-size: 100%;
 308 }
 309
 310 .tabs .ui-tabs-nav {
 311     text-transform: uppercase;
 312 }
 313 .legend{
 314         font-size:1.2em;
 315         border-bottom:3px solid black;
 316         padding: 0.2em 0 0.2em 0;
 317         margin: 0.2em 0 0.2em 0;
 318 }
 319 #Main .sectionLabel{
 320         margin-bottom:1em;
 321 }
 322
 323 h5.focus-title {
 324         color: $secondary;
 325 }
 326
 327 .rightPart #search-form {
 328         text-align: right;
 329         margin-bottom: 2em;
 330 }
 331
 332 .label.relative{
 333     background-color:black;
 334     position: absolute;
 335     left:10px;
 336     top:-5px;
 337     color:white;
 338     padding:5px 7px 0px 7px;
 339 }
 340
 341 /****************************************************/
 342 /* WRAPPER */
 343 /****************************************************/
 344 .wrapper {max-width: 1560px; padding:0 1%;}
 345 .wrapper.text {max-width: 780px; margin:auto;}
 346 .wrapper .rightPart{margin-top:1em;}
 347
 348 button {
 349         padding: 0;
 350 }
 351
 352
 353 button.control, button.symbol{background:transparent;border:none;margin:0;padding:0;}
 354 nav.menu{
 355         width:100%;
 356         text-align: justify;
 357         text-justify: distribute-all-lines;
 358 }
 359 nav.menu li{
 360         display: inline-block;
 361         margin-right:2em;
 362 }
 363
 364 button.tag, a.tag{
 365         font-size:0.9em;
 366         background:white;
 367         text-transform: uppercase;
 368         display:inline-block;
 369         border: 1px solid #CCC !important;
 370         color:#342E2E;
 371         margin: 0.2em;
 372         padding: 0.3em;
 373         border-radius: 0.7em;
 374         -moz-border-radius: 0.7em;
 375         -webkit-border-radius: 0.7em;
 376 }
 377 button.check, a.check {
 378         font-size:0.9em;
 379         text-transform: none;
 380         display:inline-block;
 381         margin: 0.2em;
 382         padding: 0.3em;
 383 }
 384
 385 .category{
 386         text-transform: uppercase;
 387 }
 388 button.check:before, a.check:before {
 389         display:inline-block;
 390         width:1.5em;
 391 }
 392 .box{
 393         padding:0.2em 0.5em 0.2em 0.5em;
 394         border-radius: 0.2em;
 395         -moz-border-radius: 0.2em;
 396         -webkit-border-radius: 0.2em;
 397         background:#222;
 398         color:#fff;
 399 }
 400 .ui-tooltip {
 401         border:1px solid white;
 402         position:absolute;
 403         margin:0;
 404         padding: 0.5em;
 405         background:#222;
 406         color: white;
 407         z-index: 9999;
 408         max-width: 50%;
 409         background: white;
 410         color: #222;
 411         border-color: #222;
 412 }
 413
 414 .icon-rss {
 415         color: orange;
 416 }
 417
 418 /****************************************************/
 419 /**** Commons ****/
 420 /****************************************************/
 421
 422 .audio button, .audio a {color: $primary;}
 423
 424 .audio button {
 425         background: transparent;
 426         border: none;
 427 }
 428
 429 .audio button.icon-pause {
 430         color: $orange
 431 }
 432
 433
 434 /****************************************************/
 435 /**** HEADER ****/
 436 /****************************************************/
 437
 438 /* PANIK LOGO */
 439 #Commons{
 440         position: relative;
 441         z-index: 5;
 442         height: 230px;
 443 }
 444
 445 #mainHeader {
 446         display: inline-block;
 447         background: url(../img/logo-esperanzah-yellow-2023.svg) bottom center no-repeat;
 448         background-size: contain;
 449         height: 172px;
 450         width: 543px;
 451         position: relative;
 452         @media screen and (max-width: $size_s) {
 453                 background-position: left 50% top 50px;
 454                 max-width: 80%;
 455                 height: 150px;
 456         }
 457 }
 458
 459 #Player {
 460         display: inline-block;
 461 }
 462
 463 #mainHeader h1{
 464         padding-left:75px;
 465 }
 466
 467 #Changing h1.top a:hover {
 468         opacity: 1.0;
 469 }
 470
 471 #backgroundBox {
 472         background: transparent;
 473         text-align: center;
 474 }
 475
 476 #All #backgroundBox h1.top {
 477         font-size: 20px;
 478         padding-left: 10px;
 479         width: 350px;
 480         @media screen and (max-width: $size_s) {
 481                 max-width: 100%;
 482         }
 483 }
 484
 485 #backgroundBox h1 {
 486         color: $primary !important;
 487 }
 488
 489 #All h1.top#radiopanik {
 490         padding-top: 36px;
 491         background: $yellow;
 492 }
 493
 494 #All #backgroundBox h1 {
 495         visibility: hidden;
 496 }
 497
 498 #Nav {
 499         margin-top: 2em;
 500 }
 501
 502 #specialHome h2 {
 503         margin:0;
 504         padding:0;
 505 }
 506
 507 /****************************************************/
 508 /**** PLAYER ****/
 509 /****************************************************/
 510
 511 #player-container .metas, #player-container img{border-color:#fff;}
 512 #player-container .padded{padding:0.3em;}
 513
 514 #player-container button,#player-container a{
 515 }
 516 #player-container .metas{
 517     float:right;
 518 }
 519 #DirectStreamPanikControler {
 520 }
 521 #DirectStreamPanikControler div.label {
 522         margin-top: -10px;
 523 }
 524
 525 #chatSymbol,
 526 #streamSymbol{
 527         font-size:3em;
 528         float:left;
 529         margin-right:15px;
 530         position: relative;
 531         z-index: 10;
 532         top: -6px;
 533 }
 534
 535 #CurrentlyPlaying{
 536         color: $yellow;
 537         font-weight: bold;
 538         padding: 0 0 0 0;
 539         width: 300px;
 540         margin-left: -125px;
 541         margin-top: 0;
 542         padding-top: 52px;
 543         text-align: center;
 544         a {
 545                 display: block;
 546                 white-space: pre;
 547                 overflow: hidden;
 548                 text-overflow: ellipsis;
 549         }
 550 }
 551
 552 #Player {
 553         position: absolute;
 554         top: 180px;
 555         left: calc(50% - 25px);
 556         width: 50px;
 557         text-align: left;
 558         @media screen and (max-width: $size_s) {
 559                 top: 150px;
 560         }
 561 }
 562
 563 #Player.withPlaylist {
 564         #audioPlayer {
 565                 display: none;
 566         }
 567 }
 568
 569 #player-container #myPlaylist a {
 570         white-space: normal;
 571 }
 572
 573 #player-container.minimized{
 574         width:auto;
 575         border-width:0px 2px 2px 0 !important;
 576         border-bottom-right-radius:1em;
 577         -moz-border-bottom-right-radius:1em;
 578         -webkit-border-bottom-right-radius:1em;
 579 }
 580
 581 /*Playlist*/
 582
 583 #Playlist {
 584         padding-top: 2px;
 585 }
 586
 587 #Playlist #playlistLabel{
 588         float:right;
 589
 590 }
 591 #Playlist .playListControls{
 592 }
 593 #Playlist .playListControls button{
 594         margin-right:0.5em;
 595         display:inline-block;
 596 }
 597 #Playlist .playListControls .playPause{
 598         font-size:3em;
 599         margin-right:5px;
 600         float:left;
 601         position: relative;
 602         top: -8px;
 603 }
 604
 605 #Playlist .playing .icon-pause{
 606    -webkit-animation: loading 1s infinite linear;
 607    -moz-animation: loading 1s infinite linear;
 608    -o-animation: loading 1s infinite linear;
 609    animation: loading 1s infinite linear;
 610 }
 611
 612
 613 /****************************************************/
 614 /**** #Changing #Footer ... ****/
 615 /****************************************************/
 616 #Changing{
 617         display: flex;
 618         flex-direction: column;
 619         min-height: 84vh;
 620 }
 621
 622 #Main{
 623         margin: 0 auto;
 624         padding: 0 1rem;
 625         width: 96%;
 626         flex-grow: 1;
 627         position: relative;
 628         z-index: 10;
 629         @media screen and (max-width: $size_m) {
 630                 z-index: 1;
 631                 width: 100%;
 632         }
 633 }
 634 #Main >.wrapper{
 635         padding-bottom:2em;
 636 }
 637 #Home #Main{
 638         min-height:0;
 639 }
 640 #Changing a:hover,#Changing button:hover {
 641         text-decoration:none;
 642 }
 643
 644 #Footer {
 645         padding-top: 120px;
 646         font-weight: bold;
 647         position: relative;
 648         z-index: 3;
 649         font-size: 16px;
 650
 651         a {
 652                 color: $white;
 653                 text-decoration: none;
 654                 display: inline-block;
 655                 padding-bottom: 4px;
 656                 border-bottom: 3px solid $yellow;
 657         }
 658
 659         p {
 660                 margin: 1em;
 661                 text-align: center;
 662         }
 663
 664         @media screen and (max-width: $size_m) {
 665                 padding-bottom: 30px;
 666         }
 667 }
 668
 669
 670 /****************************************************/
 671 .inline .link{display:block;padding:1em;}
 672 /**** Liste   ****/
 673 /**** EMISSIONS ****/
 674
 675
 676 /**** EPISODE ****/
 677 /**** Detail  ****/
 678
 679 .episode .tag{
 680 }
 681 .episode.resume, .episode.inline{
 682         padding:1em 0.5em 1em;
 683 }
 684 .episode.inline .dateBloc, .episode.resume .dateBloc{
 685         float:left;
 686 }
 687 .episode.resume img {
 688         border: 2px solid black;
 689 }
 690
 691 .episode.resume .title{
 692         margin-bottom:0.5em;
 693 }
 694 .episode.resume .logo{
 695         float: right;
 696 }
 697 .topik-link .logo,
 698 .episode.inline .logo {
 699         min-height: 50px;
 700         float: left;
 701         margin-right: 1em;
 702 }
 703 .episode.resume .sound{
 704         float:right;
 705         margin:0 0 0.5em 0.5em;
 706 }
 707 .episode.inline .sound.right{
 708         text-align:center;
 709         font-size:70%;
 710         position: relative;
 711         z-index: 10;
 712 }
 713 .episode.inline .sound.right button{
 714     font-size:1.5em;
 715         display:inline;
 716         text-align:center;
 717         padding-bottom:0.05em;
 718 }
 719 .episode.resume .sound.right .icon-download{
 720         text-align:center;
 721 }
 722 .episode.resume .sound.right .icon-download{
 723         display:block;
 724 }
 725
 726 .big.icon-pause,
 727 .big.icon-stop,
 728 .big.icon-share {
 729         display: inline-block;
 730         vertical-align: middle;
 731 }
 732
 733 .episode.detail .logo.right{
 734         max-width:50%;
 735 }
 736
 737 .episode.resume .content {
 738         padding-left: 5em;
 739 }
 740 .episode.resume .content .title {
 741 }
 742
 743 .episode.resume .logo {
 744         margin:0 0 1em;
 745         max-width:20%;
 746 }
 747 .episode.inline .date{
 748         font-size:80%;
 749 }
 750
 751 #Emission-tabs-menu .emissions-newsitems {
 752         margin-bottom: 2em;
 753 }
 754
 755 #Emission-tabs-menu .emissions-newsitems ul.list li {
 756         border: 0;
 757 }
 758
 759 #Emission-tabs-menu .futur-episodes h5,
 760 #Emission-tabs-menu .recent-episodes h5 {
 761         font-size: 1.2em;
 762 }
 763
 764 #Emission-tabs-menu #search-form {
 765         margin-bottom: 1em;
 766 }
 767
 768 div.extra-soundfiles h3 {
 769         margin-top: 1em;
 770         font-size: 2.5em;
 771 }
 772
 773 div.extra-soundfiles ul li {
 774         position: relative;
 775 }
 776
 777 div.extra-soundfiles ul li div.audio {
 778         display: inline;
 779         top: 5px;
 780         right: 0;
 781         position: absolute;
 782         font-size: 60%;
 783 }
 784
 785 div.extra-soundfiles ul strong {
 786         padding-right: 3em;
 787 }
 788
 789 /****************************************************/
 790 /**** News ****/
 791
 792 #newsRoll {
 793         max-width: 500px;
 794 }
 795
 796 #newsRoll li {
 797         background: white;
 798 }
 799
 800 .newsRoll .title{
 801         background:black;
 802         color:white;
 803         bottom:0px;
 804         opacity:0.9;
 805     width:100%;
 806         text-align: left;
 807         position: absolute;
 808         left: 0;
 809 }
 810 .newsRoll .title div{
 811         padding: 1em;
 812 }
 813 .newsRoll a, .newsRoll button img{
 814     border:3px solid $secondary;
 815 }
 816
 817 .newsRoll .by3 button {
 818         width: 100%;
 819 }
 820
 821 .soundfiles .special a,
 822 .news .special a {
 823         position: relative;
 824 }
 825
 826 .special .labels .item,
 827 .newsRoll .labels .item{
 828         display:block;
 829         background: $secondary;
 830         color:white;
 831         margin:0.1em;
 832         font-size:0.9em;
 833         padding:0.3em;
 834 }
 835 .newsList .current a{
 836     opacity:0.5;
 837 }
 838 /****************************************************/
 839 .list.news li {
 840 }
 841
 842 .soundfiles ul.custom li a,
 843 .news ul.custom li a { max-width: 98%; }
 844 .news li.item a {padding:1em;}
 845
 846 .logo img{
 847         display:block;
 848         border-style:solid;
 849         border-width:3px;
 850 }
 851 ul.newsSpecial{
 852         border-bottom:3px solid #ccc;
 853 }
 854
 855 /****************************************************/
 856 /**** Home & ****/
 857 /****************************************************/
 858
 859 #Home #Nav .wrapper{
 860         max-width:auto !important;
 861         width:auto !important;
 862 }
 863
 864 /****************************************************/
 865 /**** PROGRAM ****/
 866 /****************************************************/
 867
 868 .program.tabs nav ul li{
 869         display:table-cell;
 870         width:14%;
 871         text-align:center;
 872 }
 873
 874 .program.tabs nav ul li.week-arrow {
 875         width: 1%;
 876         padding-bottom: 5px;
 877 }
 878
 879 .program ul .dateBloc {
 880         float:left;
 881         padding-top:1em;
 882 }
 883 .program ul .schedule {
 884         margin-left:5em;
 885 }
 886 .program .nonstop {
 887         text-align:left;
 888 }
 889 .program-week .programDate{
 890         float:left;
 891         width:3em;
 892 }
 893 .program-week .programCell{
 894         margin-left:3.5em;
 895 }
 896 .program-week .nonStop .programDate{
 897         visibility:hidden;
 898 }
 899 .program-week .nonStop .programCell{
 900         font-size:0.9em;
 901         padding-left:50%;
 902         text-align:right;
 903 }
 904 .program-week a.nonstop{
 905         font-size:0.9em;
 906         margin:0.1em;
 907 }
 908 .program-week .inline,.program-week .resume{padding:0;}
 909 .program-week .description{}
 910
 911 .program-week .title {
 912         color: black;
 913         display: inline;
 914 }
 915
 916 .program-week .smooth {
 917         color: #666;
 918         opacity: 1.0;
 919         font-size: 80%;
 920         padding-bottom: 8px;
 921 }
 922
 923 .program-week .emission h5,
 924 .program-week .smooth .title {
 925         color: #333;
 926         text-transform: uppercase;
 927 }
 928
 929 .program-week .description {
 930         color: black;
 931         font-size: 90%;
 932 }
 933
 934 .program-week .programCell:hover {
 935         opacity: 0.5;
 936 }
 937
 938 #Changing .program-week .programCell a {
 939         opacity: 1.0;
 940 }
 941
 942 #Changing .program-week .programCell .smooth a {
 943         opacity: 0.5;
 944 }
 945
 946 #Changing .program-week .programCell .smooth h5 a {
 947         opacity: 1.0;
 948 }
 949
 950
 951 /****************************************************/
 952 /**** SEARCH ****/
 953 /****************************************************/
 954
 955 .search li.previous-page {
 956   margin-bottom: 2ex;
 957   text-align: left;
 958   margin-left: 0ex;
 959   font-style: italic;
 960 }
 961
 962 .search li.next-page {
 963   margin-top: 2ex;
 964   text-align: right;
 965   margin-right: 0;
 966   font-style: italic;
 967 }
 968
 969 .search-filters {
 970   text-align: justify;
 971 }
 972
 973
 974 /**** SCREEN SIZE ADAPTATIONS ****/
 975 body { font-size: 18px;}
 976 @media (max-width: 300px){
 977     body #All{ font-size: 80%; }
 978 }
 979
 980 @media (min-width: 300px) and (max-width:800px){
 981     body #All{ font-size: 85%; }
 982 }
 983
 984 @media (min-width: 800px) and (max-width:$size_m){
 985     body #All{ font-size: 90%; }
 986 }
 987
 988 @media (min-width: $size_m) {
 989     body #All{ font-size: 100%; }
 990 }
 991
 992 div.episode.resume div.title {
 993         white-space: normal;
 994 }
 995
 996 .episode.soundfile {
 997         padding: 0;
 998 }
 999
1000 .soundfile .smooth {
1001         color: #666;
1002         opacity: 1.0;
1003         font-size: 80%;
1004 }
1005
1006
1007 .soundfile p.date {
1008         margin: 0;
1009 }
1010
1011 .frontpage.soundfile .audio {
1012         font-size: 80%;
1013         padding-top: 0.5ex;
1014         padding-bottom: 1ex;
1015 }
1016
1017 #panikdb {
1018         position: absolute;
1019         top: -20px;
1020         right: 0px;
1021         background: white;
1022         color: #888;
1023         padding: 5px 10px;
1024         border: 1px solid #888;
1025         border-width: 1px 1px 0 1px;
1026         -webkit-transform-origin: bottom right;
1027         -webkit-transform: rotate(270deg);
1028         -moz-transform-origin: bottom right;
1029         -moz-transform: rotate(270deg);
1030         transform-origin: bottom right;
1031         transform: rotate(270deg);
1032 }
1033
1034 img.logo.right {
1035         margin-bottom: 1em;
1036 }
1037
1038 .soundfile .special,
1039 .newsitem .special {
1040         margin-bottom: 2em;
1041 }
1042
1043 .newsitem .special .smooth {
1044         padding-top: 5px;
1045 }
1046
1047 /* USER CONTENT */
1048
1049 div.userContent ul {
1050         margin: 1em 0;
1051 }
1052
1053 div.userContent h1,
1054 div.userContent h2,
1055 div.userContent h3,
1056 div.userContent h4 {
1057         text-transform: none;
1058         font-weight: normal;
1059 }
1060
1061 div.userContent h1 { font-size: 2em; }
1062 div.userContent h2 { font-size: 1.8em; }
1063 div.userContent h3 { font-size: 1.5em; }
1064 div.userContent h4 { font-size: 1.5em; }
1065 div.userContent a { text-decoration: underline; }
1066
1067 div.userContent a.tag { text-decoration: none; }
1068
1069 div.emission-logo {
1070         margin-left: 1em;
1071 }
1072
1073 div.extra-soundfiles {
1074         clear: both;
1075 }
1076
1077 h3.episode-subtitle {
1078         color: $white;
1079         font-size: 24px;
1080         padding-top: 0;
1081 }
1082
1083 .waveform {
1084         display: none;
1085         position: relative;
1086 }
1087
1088 .waveform span {
1089         background: $yellow;
1090         background: linear-gradient(to top, darken($yellow, 20%) 0%, $yellow 40%);
1091         display: inline-block;
1092         width: 0.50%;
1093         cursor: pointer;
1094 }
1095
1096 .waveform span.done {
1097         background: linear-gradient(to top, darken($yellow, 5%) 0%, darken($yellow, 10%) 100%);
1098 }
1099
1100 .waveform span.done.current + span {
1101         background: $yellow;
1102 }
1103
1104 .waveform i.duration {
1105         position: absolute;
1106         right: 4px;
1107         bottom: 4px;
1108         color: white;
1109         opacity: 0.5;
1110         font-style: normal;
1111         font-weight: bold;
1112 }
1113
1114 span.timestamp {
1115         cursor: pointer;
1116         border-bottom: 1px dotted #666;
1117 }
1118
1119 div.fragment-sound {
1120         position: relative;
1121 }
1122
1123 div.soundcell div.logo {
1124         vertical-align: top;
1125 }
1126
1127 div.fragment-sound {
1128 }
1129
1130 div.extra-soundfiles div.fragment-sound {
1131         margin-top: 5px;
1132 }
1133
1134 div.extra-soundfiles div.fragment-name {
1135         font-style: italic;
1136         position: relative;
1137         top: 1ex;
1138         max-width: 70%;
1139 }
1140
1141 div.extra-soundfiles ul li div.fragment-sound div.waveform {
1142 }
1143 div.extra-soundfiles ul li div.fragment-sound div.audio {
1144         bottom: 0;
1145 }
1146
1147 #fiber-content div.extra-soundfiles strong {
1148         text-transform: uppercase;
1149
1150 }
1151
1152 .nonstop-track-title, .nonstop-track-artist {
1153         font-size: 80%;
1154 }
1155
1156 .soundfile-info {
1157         padding-right: 75px;
1158 }
1159
1160 #fiber-content div.extra-soundfiles .soundfile-info strong {
1161         padding-right: 0;
1162 }
1163
1164 #fiber-content div.extra-soundfiles .soundfile-info a {
1165         text-decoration: none;
1166 }
1167
1168 #fiber-content div.extra-soundfiles {
1169         margin: 1em 0;
1170 }
1171
1172 div.extra-soundfiles div.logo {
1173         display: inline-block;
1174 }
1175
1176 div#fiber-content div.extra-soundfiles ul.list {
1177         display: inline-block;
1178         width: 88%;
1179         width: calc(100% - 74px);
1180 }
1181
1182 div.download-links {
1183         position: absolute;
1184         z-index: 1000;
1185         text-align: right;
1186 }
1187
1188 div.hidden-download-links {
1189         display: none !important;
1190 }
1191
1192 div.episode-detail div.sound div.download-links {
1193         display: inline-block;
1194         padding-top: 1ex;
1195         padding-left: 3em;
1196 }
1197
1198 div.extra-soundfiles div.download-links {
1199         background: white;
1200 }
1201
1202 h1.top a.dimmed {
1203         opacity: 0.7;
1204 }
1205
1206 div#agenda div.content-inline {
1207         margin-bottom: 1em;
1208 }
1209
1210 div.previous-and-next-months {
1211         margin-top: 1em;
1212 }
1213
1214 div.publication-date.date.smooth {
1215         font-size: 80%;
1216 }
1217
1218 #All h1.top.fullwidth {
1219         width: 150%;
1220 }
1221
1222 div.gallery > div {
1223         display: flex;
1224         flex-direction: row;
1225         flex-wrap: wrap;
1226         > span {
1227                 display: block;
1228                 width: 20%;
1229                 position: relative;
1230                 @media screen and (max-width: $size_s) {
1231                         width: 50%;
1232                 }
1233                 img {
1234                         width: 100%;
1235                         height: 100%;
1236                         cursor: pointer;
1237                 }
1238                 span.title {
1239                         position: absolute;
1240                         top: 0;
1241                         left: 10px;
1242                         background: $secondary;
1243                         color: white;
1244                         padding: 0.5ex 1ex;
1245                         border-bottom: 3px solid $yellow;
1246                 }
1247         }
1248 }
1249
1250 div.gallery img {
1251         background: white;
1252 }
1253
1254 div#dialog-background,
1255 div.gallery div.first {
1256         position: fixed;
1257         top: 0;
1258         left: 0;
1259         width: 100%;
1260         height: 100%;
1261         background: rgba(0, 0, 0, 0.9);
1262         z-index: 1000;
1263         text-align: center;
1264 }
1265
1266 div.gallery div.first img {
1267         padding: 5px;
1268         padding-bottom: 25px;
1269         margin-top: -300px;
1270         margin-left: -500px;
1271         position: absolute;
1272         top: 50%;
1273         left: 50%;
1274         transition: all 0.5s ease;
1275         transform-origin: bottom left;
1276 }
1277
1278 div.portrait div.gallery div.first img {
1279         margin-top: -320px;
1280         margin-left: -240px;
1281 }
1282
1283 div.gallery {
1284 }
1285
1286 div.gallery span.gallery-legend {
1287         display: inline-block;
1288         position: absolute;
1289         top: 50%;
1290         margin-top: 304px;
1291         left: 0%;
1292         width: 100%;
1293         color: #000;
1294         z-index: 1000;
1295 }
1296
1297 div.portrait div.gallery span.gallery-legend {
1298         margin-top: 330px;
1299 }
1300
1301 @media screen and (max-width: $size_m) {
1302         div.portrait div.gallery div.first img,
1303         div.gallery div.first img {
1304                 max-width: 80vw;
1305                 margin: 0;
1306                 max-height: 80vh;
1307                 left: 10vw;
1308                 top: 10vh;
1309                 display: inline-block;
1310         }
1311 }
1312
1313 ul.tags {
1314         padding-top: 1em;
1315         clear: both;
1316 }
1317
1318 a.topik-link {
1319         clear: both;
1320         display: block;
1321         margin-top: 1em;
1322 }
1323
1324 #fiber-content div.topikcellcontent a {
1325         text-decoration: none;
1326         height: 500px;
1327 }
1328
1329 #fiber-content div.topikcell .topik-large a {
1330         height: auto;
1331 }
1332
1333 div.topikcellcontent h5 {
1334         padding-top: 1ex;
1335 }
1336
1337 div.topikcellcontent.topik-large a {
1338         width: 100%;
1339         float: none;
1340         display: inline-block;
1341         text-align: left;
1342 }
1343
1344 div.topikcellcontent.topik-large img {
1345         width: 100%;
1346         display: block;
1347 }
1348
1349 div.topikcellcontent.topik-large a div {
1350         @media screen and (min-width: 760px) {
1351                 display: flex;
1352         }
1353         margin-top: 1ex;
1354         h2 {
1355                 margin-top: 0;
1356                 white-space: nowrap;
1357                 margin-right: 1ex;
1358                 @media screen and (max-width: 760px) {
1359                         padding-bottom: 0;
1360                 }
1361         }
1362 }
1363
1364 div.topikcellcontent a {
1365         margin-bottom: 2em;
1366         display: inline-block;
1367         text-align: left;
1368         width: 50%;
1369         padding-right: 2em;
1370         float: left;
1371 }
1372
1373 div.topikcellcontent img {
1374 }
1375
1376 div.topikcellcontent h2 {
1377         font-size: 3.5em;
1378 }
1379
1380 .program-week img.smooth {
1381         padding-bottom: 0;
1382 }
1383
1384 div#dialog-background {
1385         display: flex;
1386 }
1387
1388 div#dialog-embed {
1389         position: relative;
1390         background: white;
1391         width: 50%;
1392         margin: auto;
1393         text-align: left;
1394         padding: 1ex;
1395         color: black;
1396         textarea {
1397                 width: 100%;
1398                 max-width: none;
1399         }
1400
1401         #close-button {
1402                 position: absolute;
1403                 right: 1ex;
1404         }
1405
1406         h2, h3 {
1407                 margin: 0;
1408                 font-size: 1.6rem;
1409         }
1410 }
1411
1412 body#embed {
1413         min-height: auto !important;
1414         margin: 0;
1415         background: $orange;
1416         #Main {
1417                 background: transparent;
1418                 margin: 0;
1419                 width: 100%;
1420         }
1421         #Commons,
1422         #metaNav,
1423         #Footer,
1424         #Nav,
1425         #userLog,
1426         #panikdb,
1427         #Player {
1428                 display: none;
1429         }
1430
1431         #Changing {
1432                 float: none;
1433                 width: auto;
1434         }
1435
1436         #Main > .wrapper {
1437                 padding: 0;
1438         }
1439
1440         .logo {
1441                 padding: 0;
1442                 img {
1443                         border: 0;
1444                 }
1445         }
1446
1447         div.soundcell {
1448                 display: flex;
1449                 ul.custom {
1450                         list-style: none;
1451                         display: inline-block;
1452                         width: calc(100% - 110px);
1453                         margin: 0;
1454                         padding: 10px 10px 0 10px;
1455                         li div.audio {
1456                                 display: block;
1457                                 position: static;
1458                                 font-size: 16px;
1459                         }
1460                 }
1461                 button, a {
1462                         color: white;
1463                 }
1464                 button.icon-play-sign {
1465                         display: none;
1466                 }
1467                 button.icon-pause {
1468                         position: absolute;
1469                         bottom: 8px;
1470                         background: transparent;
1471                         left: 2px;
1472                         z-index: 100;
1473                 }
1474                 &.playing button.icon-pause {
1475                         display: block;
1476                 }
1477
1478                 .waveform span {
1479                         max-height: 42px;
1480                 }
1481         }
1482
1483         ul.custom .soundfile-info {
1484                 padding: 0;
1485         }
1486
1487         span.fragment-title {
1488                 font-weight: normal;
1489         }
1490 }
1491
1492 #bg-title {
1493         display: none;
1494         color: lighten($primary, 20);
1495         text-transform: uppercase;
1496         line-height: 100%;
1497         font-size: 250px;
1498         font-size: 25vh;
1499         position: absolute;
1500         left: -260px;
1501         top: 48vh;
1502         z-index: 0;
1503         -webkit-user-select: none;
1504         -moz-user-select: none;
1505         -ms-user-select: none;
1506         user-select: none;
1507         cursor: default;
1508 }
1509
1510 img {
1511         transition: all ease 0.5s;
1512 }
1513
1514 div.emission-tile {
1515         position: relative;
1516         width: 24vw;
1517         padding-bottom: 20px;
1518         float: left;
1519         height: 27vw;
1520         overflow: hidden;
1521         margin-bottom: 2em;
1522         @media screen and (max-width: $size_m) {
1523                 width: 46vw;
1524                 height: 46vw;
1525         }
1526         @media screen and (max-width: $size_s) {
1527                 width: 96vw;
1528                 height: 100vw;
1529                 float: none;
1530         }
1531         div.image {
1532                 border: none;
1533                 height: 23vw;
1534                 width: calc(100% - 16px);
1535                 text-align: center;
1536                 @extend %image-bordure;
1537                 @media screen and (max-width: $size_m) {
1538                         height: 40vw;
1539                 }
1540                 @media screen and (max-width: $size_s) {
1541                         height: 90vw;
1542                 }
1543         }
1544         div.name {
1545                 margin-top: 10px;
1546                 text-transform: uppercase;
1547                 text-align: left;
1548                 color: $white;
1549                 font-weight: bold;
1550                 font-family: $title-font;
1551                 font-size: 1rem;
1552                 span {
1553                         transition: all ease 0.5s;
1554                 }
1555         }
1556         div.tags {
1557                 @extend %text;
1558                 font-size: 12px;
1559                 text-transform: lowercase;
1560                 min-height: 20px;
1561                 span {
1562                         margin-right: 1ex;
1563                 }
1564         }
1565 }
1566
1567 #www-esperanzah {
1568         position: absolute;
1569         top: 58px;
1570         left: 20px;
1571         color: white;
1572         border-radius: 3px;
1573         width: 40px;
1574         text-align: center;
1575         padding: 2px 10px;
1576         transition: all .2s;
1577         &:hover {
1578                 background-color: $yellow;
1579                 color: $white;
1580         }
1581         @media screen and (max-width: $size_s) {
1582                 top: 0;
1583                 left: 0;
1584                 br {
1585                         display: none;
1586                 }
1587         }
1588 }
1589
1590 #instagram,
1591 #twitter,
1592 #facebook {
1593         transition: all .2s;
1594         display: block;
1595         position: absolute;
1596         right: 0;
1597         top: 5px;
1598         height: 35px;
1599         width: 35px;
1600         background: $blue url($data_uri_facebook) center center no-repeat;
1601         z-index: 100;
1602         &:hover {
1603                 background-color: $yellow;
1604         }
1605 }
1606
1607 #twitter {
1608         top: 45px;
1609         background: $blue url($data_uri_twitter) center center no-repeat;
1610 }
1611
1612 #instagram {
1613         top: 85px;
1614         background: $blue url($data_uri_instagram) center center no-repeat;
1615 }
1616
1617 #streamSymbol {
1618         background-repeat: no-repeat;
1619         width: 50px;
1620         height: 50px;
1621 }
1622 div.player-start {
1623         background: url($data_uri_start), url($data_uri_pause);
1624         background-position: 0 0, -50px 0;
1625 }
1626
1627 div.player-pause {
1628         background: url($data_uri_pause);
1629         background-position: 0 0;
1630 }
1631
1632 div.player-stop {
1633         background: url($data_uri_stop);
1634         background-position: 0 0;
1635 }
1636
1637 #streamSymbol {
1638         &::after {
1639                 content: "";
1640                 border: 2px solid transparent;
1641                 border-radius: 100%;
1642                 position: absolute;
1643                 top: -2px;
1644                 left: -2px;
1645                 right: -2px;
1646                 bottom: -2px;
1647         }
1648         &.player-stop::after {
1649                 animation: rotating-border 2s 1;
1650         }
1651 }
1652
1653 @keyframes rotating-border {
1654         0%  {border-left-color: darken($yellow, 10%); transform: rotate(0deg);}
1655         99% {border-left-color: darken($yellow, 10%); transform: rotate(360deg);}
1656         100% {border-left-color: transparent;}
1657 }
1658
1659 div.playListControls {
1660         button.action-stop {
1661                 background-repeat: no-repeat;
1662                 width: 50px;
1663                 height: 50px;
1664                 background: url($data_uri_stop);
1665         }
1666         button.action-pause {
1667                 background-repeat: no-repeat;
1668                 width: 50px;
1669                 height: 50px;
1670                 background: url($data_uri_pause);
1671         }
1672
1673         button.action-play {
1674                 background-repeat: no-repeat;
1675                 width: 50px;
1676                 height: 50px;
1677                 background: url($data_uri_play);
1678         }
1679 }
1680
1681 div#actu {
1682         padding-bottom: 14px;
1683         h2 {
1684                 padding-right: 10px;
1685                 font-family: $title-font;
1686                 font-weight: bold;
1687                 font-size: 40px;
1688                 padding-bottom: 10px;
1689         }
1690         div {
1691                 @extend %text;
1692         }
1693         @media screen and (max-width: $size_m) {
1694                 display: block;
1695                 > h2 {
1696                         text-align: center;
1697                 }
1698                 > h2, > div {
1699                         width: auto;
1700                 }
1701         }
1702 }
1703
1704 div.emission-detail {
1705         text-align: center;
1706         div.emission-tile {
1707                 width: 25%;
1708                 height: 25vw;
1709         }
1710         h2 {
1711                 margin-top: 0;
1712                 margin-bottom: 0;
1713                 font-weight: bold;
1714                 font-family: $title-font;
1715         }
1716         .schedule {
1717                 color: white;
1718                 text-transform: uppercase;
1719                 font-style: italic;
1720                 margin: 0;
1721                 padding: 0;
1722                 list-style: none;
1723         }
1724         div.episode-info,
1725         div.emission-info {
1726                 div.image {
1727                         float: left;
1728                         margin-right: 1rem;
1729                         height: 450px;
1730                         width: 450px;
1731                         @extend %image-bordure;
1732                         @media screen and (max-width: $size_s) {
1733                                 float: none;
1734                                 max-width: 100%;
1735                                 overflow: hidden;
1736                                 height: 260px;
1737                                 width: 260px;
1738                                 margin: auto;
1739                         }
1740                 }
1741                 padding-top: 2rem;
1742                 div.emission-text {
1743                         @extend %text;
1744                         a {
1745                                 border-bottom: solid 1px #ff8b57;
1746                                 text-decoration: none;
1747                                 &:hover {
1748                                         background: #ff8b57;
1749                                         color: #fff;
1750                                 }
1751                         }
1752                 }
1753         }
1754         div.episode-info {
1755                 position: relative;
1756                 div.episode-text {
1757                         display: flex;
1758                         flex-direction: column;
1759                         min-height: 450px;
1760                         justify-content: space-between,
1761                 }
1762                 div.sound {
1763                         position: relative;
1764                         align-self: flex-end;
1765                         width: 100%;
1766                         @media screen and (max-width: $size_s) {
1767                                 order: -1;
1768                         }
1769                         @media screen and (max-width: $size_m) {
1770                                 position: static;
1771                                 width: 100%;
1772                         }
1773                         button.action-play {
1774                                 font-weight: bold;
1775                         }
1776                         button.action-share {
1777                                 text-transform: none;
1778                         }
1779                         button.icon-play-sign {
1780                                 display: none;
1781                         }
1782                         button.icon-pause {
1783                                 display: none;
1784                                 position: absolute;
1785                                 bottom: 8px;
1786                                 background: transparent;
1787                                 left: 2px;
1788                                 z-index: 100;
1789                         }
1790                         &.playing button.icon-pause {
1791                                 display: block;
1792                         }
1793                 }
1794                 div.more-text {
1795                         @extend %text;
1796                         max-width: 50em;
1797                         margin: 2em auto;
1798                 }
1799         }
1800 }
1801
1802 div.emission-episodes {
1803         clear: both;
1804         padding-top: 2rem;
1805         ul, li {
1806                 margin: 0;
1807                 padding: 0;
1808                 list-style: none;
1809         }
1810         @media screen and (max-width: $size_s) {
1811                 text-align: center;
1812         }
1813         a {
1814                 height: 310px;
1815                 position: relative;
1816                 width: 240px;
1817                 margin-right: 10px;
1818                 display: inline-block;
1819                 margin-bottom: 1rem;
1820                 float: left;
1821                 @media screen and (max-width: $size_s) {
1822                         float: none;
1823                 }
1824                 div.image {
1825                         height: 240px;
1826                         @extend %image-bordure;
1827                 }
1828                 div.time {
1829                         @extend %text;
1830                 }
1831                 div.name {
1832                         text-align: left;
1833                         color: white;
1834                         font-family: $title-font;
1835                         font-size: 1rem;
1836                         text-transform: uppercase;
1837                         font-weight: bold;
1838                 }
1839         }
1840
1841         &.archives {
1842                 width: 100%;
1843                 a {
1844                 }
1845                 a div.image {
1846                         width: 240px;
1847                 }
1848         }
1849 }
1850
1851 h3.archives {
1852         clear: both;
1853         font-size: 30px;
1854         + p {
1855                 margin-top: -1em;
1856         }
1857 }
1858
1859 div.emission-episodes.archive::after {
1860         content: "";
1861         display: block;
1862 }
1863
1864 p.archives-sorry {
1865         clear: both;
1866         padding: 3rem;
1867         text-align: center;
1868 }
1869
1870 div#Playlist {
1871         position: relative;
1872         div.label {
1873                 display: none;
1874         }
1875         ol {
1876                 color: $yellow;
1877                 font-weight: bold;
1878                 width: 300px;
1879                 margin: 0;
1880                 padding: 0;
1881                 padding-top: 50px;
1882                 margin-left: -125px;
1883                 color: $yellow;
1884                 list-style: none;
1885                 text-align: center;
1886                 li {
1887                         display: none;
1888                 }
1889                 li.active {
1890                         display: flex;
1891                         justify-content: center;
1892                 }
1893                 li .soundControls {
1894                         width: 25px;
1895                         position: relative;
1896                         color: $yellow;
1897                         button.no-icon-remove::after {
1898                                 content: "×";
1899                                 color: $yellow;
1900                         }
1901                 }
1902                 #Playlist ol li .title{
1903                         display:inline-block;
1904                         white-space: nowrap;
1905                         text-overflow: ellipsis;
1906                         overflow: hidden;
1907                 }
1908         }
1909 }
1910
1911 #back-home {
1912         text-transform: lowercase;
1913         display: block;
1914         text-align: left;
1915         color: white;
1916         font-size: 16px;
1917         span {
1918                 border-bottom: 2px dashed white;
1919                 &::before {
1920                         content: "<";
1921                         padding-right: 10px;
1922                         transition: padding 0.2s;
1923                 }
1924                 &:hover {
1925                         border-bottom: 2px dashed $yellow;
1926                 }
1927         }
1928 }
1929
1930 .playing button.no-icon-remove::after {
1931         content: "\0025fc";
1932 }
1933
1934 div#grid table {
1935         max-width: 1000px;
1936         margin: 0 auto;
1937 }
1938
1939 div#loading-page {
1940         position: fixed;
1941         top: 0;
1942         left: 0;
1943         right: 0;
1944         height: 5px;
1945         background: $yellow;
1946         z-index: 1100;
1947         animation-name: load_animation;
1948         animation-duration: 6000ms;
1949         animation-timing-function: ease-out;
1950         transition: opacity 200ms linear;
1951         &.fade {
1952                 opacity: 0;
1953         }
1954 }
1955
1956 @keyframes load_animation {
1957         0% { right: 100%; }
1958         100% { right: 0%; }
1959 }
1960
1961 div#header_date {
1962         text-transform: uppercase;
1963         position: absolute;
1964         text-align: right;
1965         color: $yellow;
1966         font-weight: normal;
1967         font-style: italic;
1968         font-size: 120%;
1969         top: 63px;
1970         right: 55px;
1971         @media screen and (max-width:$size_m){
1972                 display: none;
1973         }
1974 }
1975
1976 h2.top {
1977         padding-bottom: 2rem;
1978 }
1979
1980 .episode-auto-selection-cell.hide-emission-titles {
1981         .emission-title, .soundfile-info .sep {
1982                 display: none;
1983         }
1984 }
1985
1986 #detour-vers-le-footer {
1987         margin: 0 auto;
1988         padding-top: 2em;
1989         text-align: center;
1990         max-width: 50em;
1991         clear: both;
1992         .logos img {
1993                 margin: 0 1ex;
1994         }
1995 }
1996
1997 .emission-text {
1998         display: flex;
1999         flex-direction: column;
2000         justify-content: space-between;
2001         min-height: 450px;
2002         @media screen and (max-width:$size_m){
2003                 min-height: auto;
2004         }
2005         #subscribe-links {
2006                 ul, li {
2007                         margin: 0;
2008                         padding: 0;
2009                         list-style: none;
2010                 }
2011                 ul {
2012                         display: flex;
2013                         flex-wrap: wrap;
2014                         @media screen and (max-width:$size_m){
2015                                 justify-content: center;
2016                         }
2017                 }
2018                 li {
2019                         margin-right: 1em;
2020                         margin-bottom: 1em;
2021                         a {
2022                                 padding: 0.3em 0.6em;
2023                                 background: $yellow;
2024                                 color: white;
2025                                 border-radius: 10px;
2026                                 &:hover {
2027                                         background: darken($yellow, 20%);
2028                                 }
2029                         }
2030                 }
2031         }
2032 }
2033
2034 .emission-text,
2035 .text-part {
2036         max-width: 50em;
2037 }
2038
2039 #mainHeader h2 {
2040         color: $yellow;
2041         margin: 0;
2042 }