/* Core Stuff */
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
  -webkit-margin-start: 0;
  -webkit-margin-end: 0;
  -webkit-padding-start: 0;
  text-rendering: optimizeLegibility;

}

/* FONT */
@font-face {
  font-family: "ElektrixLight";
  src: url("../fonts/ElektrixLightRegular.html");
  /* IE9 Compat Modes */
  src: url("../fonts/ElektrixLightRegulard41d.html?#iefix") format("embedded-opentype"),
    /* IE6-IE8 */
    url("../fonts/ElektrixLightRegular-2.html") format("woff"),
    /* Modern Browsers */
    url("../fonts/ElektrixLightRegular-3.html") format("woff2");
  /* Modern Browsers */
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "ElektrixLight";
  src: url("../fonts/ElektrixLightLight.html");
  /* IE9 Compat Modes */
  src: url("../fonts/ElektrixLightLightd41d.html?#iefix") format("embedded-opentype"),
    /* IE6-IE8 */
    url("../fonts/ElektrixLightLight-2.html") format("opentype"),
    /* Open Type Font */
    url("../fonts/ElektrixLightLight-3.html") format("svg"),
    /* Legacy iOS */
    url("../fonts/ElektrixLightLight-4.html") format("truetype"),
    /* Safari, Android, iOS */
    url("../fonts/ElektrixLightLight-5.html") format("woff"),
    /* Modern Browsers */
    url("../fonts/ElektrixLightLight-6.html") format("woff2");
  /* Modern Browsers */
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "ElektrixLight";
  src: url("../fonts/ElektrixLightRegular.html");
  /* IE9 Compat Modes */
  src: url("fonts/ElektrixLightRegulard41d.html?#iefix") format("embedded-opentype"),
    /* IE6-IE8 */
    url("../fonts/ElektrixLightRegular-4.html") format("opentype"),
    /* Open Type Font */
    url("../fonts/ElektrixLightRegular-5.html") format("svg"),
    /* Legacy iOS */
    url("../fonts/ElektrixLightRegular-6.html") format("truetype"),
    /* Safari, Android, iOS */
    url("../fonts/ElektrixLightRegular-2.html") format("woff"),
    /* Modern Browsers */
    url("../fonts/ElektrixLightRegular-3.html") format("woff2");
  /* Modern Browsers */
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "ChesterfieldLTStd";
  src: url("../fonts/Chesterfield-LT-Std10468.html");
  /* IE9 Compat Modes */
  src: url("../fonts/Chesterfield-LT-Std10468d41d.html?#iefix") format("embedded-opentype"),
    /* IE6-IE8 */
    url("../fonts/Chesterfield-LT-Std10468-2.html") format("opentype"),
    /* Open Type Font */
    url("../fonts/Chesterfield-LT-Std10468-3.html") format("svg"),
    /* Legacy iOS */
    url("../fonts/Chesterfield-LT-Std10468-4.html") format("woff"),
    /* Modern Browsers */
    url("../fonts/Chesterfield-LT-Std10468-5.html") format("woff2");
  /* Modern Browsers */
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "ChesterfieldLTStd";
  src: url("../fonts/ChesterfieldEF.html");
  /* IE9 Compat Modes */
  src: url("../fonts/ChesterfieldEFd41d.html?#iefix") format("embedded-opentype"),
    /* IE6-IE8 */
    url("../fonts/ChesterfieldEF-2.html") format("opentype"),
    /* Open Type Font */
    url("../fonts/ChesterfieldEF-3.html") format("svg"),
    /* Legacy iOS */
    url("../fonts/ChesterfieldEF-4.html") format("truetype"),
    /* Safari, Android, iOS */
    url("../fonts/ChesterfieldEF-5.html") format("woff"),
    /* Modern Browsers */
    url("../fonts/ChesterfieldEF-6.html") format("woff2");
  /* Modern Browsers */
  font-weight: 100;
  font-style: normal;
}

/* rubik-300italic - latin */


html {
  font-size: 1.125rem;
  line-height: 1.125rem;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  font-family: 'ChesterfieldLTStd', sans-serif;
  font-size: 0.8rem;
  line-height: 1.5rem;
  color: #000;
}

/* SCROLLBAR */
html::-webkit-scrollbar,
.modal-content::-webkit-scrollbar {
  display: none;
}

html,
.modal-content {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'ElektrixLight', sans-serif;
  margin: 0;
  padding: 0;
}

h1 {
  margin-top: 0em;
  font-size: 4.5rem;
  margin-bottom: 0em;
  line-height: 4rem;
}

h2 {
  font-size: 2rem;
  line-height: 2rem;
  text-align: left;
  font-weight: 300;
  //margin-top: 2rem;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

h3 {
  margin-top: 0;
  font-size: 1rem;
  line-height: 1.5rem;
  margin-bottom: 0;
}

h4 {
  margin-top: -1px;
  margin-bottom: 1px;
  font-size: 0.8rem;
  line-height: 1.5rem;
}

h5 {
  margin-top: 0rem;
  font-size: 0.8rem;
  font-weight: 0;
  margin-bottom: 0rem;
  line-height: 1rem
}

h6 {
  line-height: 1rem;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
  line-height: 1rem; //1.25rem;
}

a {
  color: #323232;
  text-decoration: none;
}

p a {
  text-decoration: underline;
}

a:hover {
  color: #000;
}

pre {
  background: #F0F0F0;
  margin: 1rem 0;
  border-radius: 2px;
}

blockquote {
  border-left: 10px solid #eee;
  margin: 0;
  padding: 0 2rem;
}

img {
  max-width: 100%;
}

hr {
  border: 0;
  border-top: 1px dashed #333;
  background: transparent;
  margin: 1rem 4rem 0 4rem;
  height: calc(1rem - 1px);
}

ul,
li {
  margin: 0;
  padding: 0
}

marquee {
  width: 80%;
  //margin-bottom: -4px;
  overflow: hidden;
  font-weight: inherit;
  border: none;
  line-height: 1rem;
  background: transparent;
  margin: 0;
  padding: 0;
}

.marquee {
  width: 80%;
  /*largeur à ajuster */
  line-height: 0rem;
  background: transparent;
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-weight: inherit;
  border: none;
}

.marquee span {
  display: inline-block;
  /*  masque le décalage */
  white-space: nowrap;
  overflow: hidden;
  /* force sur une même ligne */
  -webkit-animation: marquee 10s linear infinite;
  -moz-animation: marquee 10s linear infinite;
  -ms-animation: marquee 10s linear infinite;
  -o-animation: marquee 10s linear infinite;
  animation: marquee 10s linear infinite;
}

@-webkit-keyframes marquee {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(200%);
  }
}

@-moz-keyframes marquee {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(200%);
  }
}

@-ms-keyframes marquee {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(200%);
  }
}

@-o-keyframes marquee {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(200%);
  }
}

@keyframes marquee {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(200%);
  }
}

small {
  line-height: 1em;
}

/* BEGIN Layout */
body,
html {
  height: 100%;
}

.sidebar {
  //background-image: url('../images/infos2020.png'), url('../images/cover2020.jpg');
  background-image: url('../images/cover2020.html');
  background-position: center;
  background-repeat: no-repeat;
  //background-size: 90%, cover;
  background-size: cover;
  height: 100%;
  height: calc(100% - 5rem);
  position: fixed;
  top: 5rem;
  left: 0;
  z-index: 1;
  text-align: center;
}

.image-infos {
  max-height: 100%;
}



/* colonne droite */

/* header */
.header {
  height: 5rem;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
}

.surnav {
  width: 100%;
  height: 1.5rem;
  background: #ff0;
  text-align: right;
}

.surnav-list {
  padding: 0 1rem;
  list-style: none;
}

.surnav-item {
  display: inline-block;
  *display: inline;
  zoom: 1;
  padding: 0 5px;
  line-height: 1.5rem;
}

.surnav-item:last-child {
  padding-right: 0;
}

.surnav-item a {
  color: #323232;
  margin-top: 0em;
  text-transform: uppercase;
  font-size: 85%;
}

.surnav-item a:hover,
.surnav-item a:focus {
  text-decoration: none;
  color: #000;
}

.nav {
  width: 100%;
  height: 3.5rem;
  background: #323232;
  box-shadow: 0 -6px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2);
  position: relative;
  z-index: 5;
}

.nav .logo {
  width: 252px;
  //padding-top: 1em;
  display: inline-block;
}

.nav .logo:hover {
  filter: opacity(75%);
}

.nav .hamburger {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0.5rem;
  font-size: 1rem;
  display: none;
}

.nav .hamburger-lien {
  color: white;
}

.nav .hamburger-lien:hover {
  color: #FF0;
}

.nav-list {
  margin: 0 0 0 2rem;
  padding: 0;
  list-style: none;
}

.nav-item {
  display: inline-block;
  *display: inline;
  zoom: 1;
  padding-top: 0.95rem;
}



.nav-item a {
  background: transparent;
  border: 2px solid transparent;
  color: #fff;
  margin-top: -1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.9rem;
  font-family: 'ElektrixLight', sans-serif;
  padding: 0.5em 0.5rem;
}

.nav-item a.lien-logo {
  background: transparent;
  border: none;
  margin: 0;
  padding: 0.5em 0.5rem;
}

.nav-item a:hover,
.nav-item a:focus {
  border: 2px solid #FF0;
  text-decoration: none;
}

.nav-item a.lien-logo:hover,
.nav-item a.lien-logo:focus {
  border: none;
}

/* content */
.content {
  background: #FF0;
  min-height: calc(100% - 5rem);
  padding: 1rem;
  min-height: 100vh;
}

/* Back top top */
#backBtn {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Fixed/sticky position */
  bottom: 1rem;
  /* Place the button at the bottom of the page */
  right: 1rem;
  /* Place the button 30px from the right */
  z-index: 2;
  /* Make sure it does not overlap */
  border: none;
  /* Remove borders */
  outline: none;
  /* Remove outline */
  background-color: #FF0;
  /* Set a background color */
  color: #323232;
  /* Text color */
  cursor: pointer;
  /* Add a mouse pointer on hover */
  padding: 0.5rem 0.6rem;
  /* Some padding */
  font-size: 18px;
  /* Increase font size */
  border: 1px solid #323232;
  font-size: 0.9rem;
  line-height: 1rem;
}

#backBtn:hover {
  background-color: #323232;
  /* Add a dark-grey background on hover */
  color: #FF0;
  border: 1px solid #FF0;
}

/* calendrier */

a.lien-calendrier {
  display: block;
  min-height: 3rem;
  padding-bottom: 1px;
}

.calendrier-g {
  background: #323232;
  font-family: 'ElektrixLight', sans-serif;
  color: #FF0;
  height: 100%;
  min-height: 53px;
  position: relative;
  overflow: hidden;
  transition: 0.5s;
}

.calendrier-g:hover {
  background: #000;
}

.calendrier-g:hover {
  background: #FF0;
  color: #323232;
}

/*
.calendrier-g:after {
    content: '»';
    position: absolute;
    opacity: 0;
    top: 25%;
    left: -20px;
    transition: 0.33s;
}

.calendrier-g:hover {
    padding-right: 0.5rem;
    padding-left: 1rem;
}

.calendrier-g:hover:after {
    opacity: 1;
    left: 0.5rem;
}*/

.calendrier-g.pure-g [class*=pure-u] {
  font-family: 'ElektrixLight', sans-serif;
}

.date-calendrier {
  text-align: center;
}

.date-calendrier .date {
  font-size: 2rem;
}

.date-calendrier .mois {
  height: 1rem;
}

.date-calendrier .lieu {
  //position: absolute;
  //top: 50%;
  font-size: 1.5rem;
  //left: 1rem;
  text-align: center;
  line-height: 3rem;
  padding: 0 1rem;
}

.listing-calendrier {
  padding-bottom: 2px;
}

.lieu-calendrier {
  font-size: 1.225rem;
  padding-top: 0.15rem;
}

.prog-calendrier {
  line-height: 1rem;
  padding-top: 0.15rem;
  padding-right: 1rem;
  padding-bottom: 0.031rem;
}

.banner {
  width: 72px;
  padding: 0 8px;
  position: absolute;
  text-align: center;
  font-size: 12px;
  top: 14px;
  right: -16px;
  transform: rotate(45deg);
  background-color: #FF0;
  color: #323232;
  line-height: 0.75rem;
  font-family: 'ChesterfieldLTStd', 'Open Sans', sans-serif;
}

/* agenda */
#agenda {
  margin-top: 53px;
}

#agenda h3 {
  font-size: 1rem;
  line-height: 1rem;
}

.anchor {
  display: block;
  position: relative;
  top: -5rem;
  visibility: hidden;
}

.rencontre h2 {
  margin-bottom: 0;
  font-size: 1.5rem;
  text-align: right;
  line-height: 3rem;
}

.soiree {
  margin-top: 2rem;
}

.soiree h2 {
  margin-bottom: 0;
  padding: 1rem 0;
}

.picto-soiree {
  width: 35px;
  margin-right: 0.5rem;
  vertical-align: top;
  margin-top: -2px;
}

.lieu {
  display: inline-block;
  font-size: 0.5em;
  text-transform: uppercase;
  line-height: 18px;
}

.eventFB {
  display: inline;
  font-size: 1rem;
  line-height: 1rem;
}

.rencontre .sous-titre-soiree {
  text-align: right;
}

.sous-titre-soiree p {
  margin-top: -1rem;
}

.liste-artistes {
  margin: 0;
  padding: 0;
  text-align: right;
}

a.artiste-title {
  background: #322E31;
  color: #FF0;
  width: 100%;
  display: block;
  border-bottom: solid 1px #FF0;
  padding: 0.5rem 1rem;
  font-family: 'ElektrixLight', sans-serif;
  line-height: 1.5rem;
  /*2rem -1*/
  font-size: 1.35rem;
  //height: 44px;
  position: relative;
  transition: 0.33s;
}

a.artiste-title:hover {
  background: #000;
}

a.artiste-title:after {
  content: '»';
  position: absolute;
  opacity: 0;
  top: 25%;
  left: -20px;
  transition: 0.33s;
}

a.artiste-title:hover {
  padding-right: 0.5rem;
  padding-left: 1rem;
}

a.artiste-title:hover:after {
  opacity: 1;
  left: 0.5rem;
}

.adresse,
.tarif {
  color: #FF0;
  width: 100%;
  color: #FF0;
  font-family: 'ElektrixLight', sans-serif;
  background: #322E31;
  text-align: center;
  line-height: 1rem;
  display: block;
  min-height: 3rem;
  height: 100%;
  position: relative;
}


.adresse p,
.tarif p {
  line-height: 1rem;
  margin-bottom: 0;
  height: 100%;

}

.adresse,
.tarif2 {
  border-left: 1px solid #FF0;
}

.adresse2 {
  border-left: none;
  border-top: 1px solid #FF0;
}


.adresse a,
.tarif a {
  color: #FF0;
  font-family: 'ElektrixLight', sans-serif;
  width: 100%;
  min-height: 3rem;
  height: 100%;
  display: block;
  text-decoration: none;
  padding-top: 0.5rem;
  padding-left: 2.5rem;
  //text-align: right;
  padding-right: 1rem;
  padding-bottom: 0.45rem;
  font-weight: 100;
}

.adresse a:hover,
.tarif a:hover {
  background: #000;
}

.tarif a::before {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font-family: "FontAwesome";
  font-weight: 400;
  position: absolute;
  left: 0.5rem;
  top: 33%;
  font-size: 36px;
  content: "\f145";
}

.adresse a::before {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font-family: "FontAwesome";
  font-weight: 400;
  position: absolute;
  left: 0.5rem;
  top: 33%;
  font-size: 36px;
  content: "\f041";
}


/* Edito */
#edito {
  margin-top: 3rem;
}

#edito h2 {
  margin-bottom: 0;
  font-size: 1.5rem;
  text-align: right;
  line-height: 3rem;
}

/* Billeterie */

#billeterie {
  margin-top: 3rem;
}

#billeterie h2 {
  display: none;
}

#billeterie p {
  position: relative;
  margin-bottom: 1px;
}

#billeterie a {
  color: #FF0;
  font-family: 'ElektrixLight', sans-serif;
  font-size: 2rem;
  line-height: 1.5rem;
  width: 100%;
  min-height: 4rem;
  display: block;
  text-decoration: none;
  padding-top: 0.5rem;
  padding-left: 2rem;
  text-align: center;
  padding-right: 1rem;
  padding-bottom: 0.5rem;
  background: #323232
}

#billeterie a:hover {
  background: #000;
}

#billeterie a::before {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font-family: "FontAwesome";
  font-weight: 400;
  position: absolute;
  left: 0.5rem;
  top: 33%;
  font-size: 36px;
  content: "\f145";
}

/* Ailleurs */

#ailleurs {
  margin-top: 3rem;
}

/*
#ailleurs p {
    position: relative;
    margin-bottom: 1px;
}

#ailleurs a {
    color: #FF0;
    font-family: 'ElektrixLight', sans-serif;
    font-size: 1.35rem;
    line-height: 1.5rem;
    width: 100%;
    min-height: 4rem;
    display: block;
    text-decoration: none;
    padding-top: 0.5rem;
    padding-left: 2rem;
    text-align: center;
    padding-right: 1rem;
    padding-bottom: 0.5rem;
    background: #323232
}

#ailleurs a:hover {
    background: #000;
}
*/
/* Newsletter */

#newsletter {
  margin-top: 3rem;
}

.mj-w-res-iframe {
  padding-left: 10px;
  max-width: 767px;
}

/* Page pro */
/* Billeterie */

#pro {
  margin-top: 1rem;
}

#pro p {
  position: relative;
  margin-bottom: 1px;
}

#pro a {
  color: #FF0;
  font-family: 'ElektrixLight', sans-serif;
  font-size: 2rem;
  line-height: 4rem;
  width: 100%;
  min-height: 4rem;
  display: block;
  text-decoration: none;
  padding-left: 1rem;
  text-align: center;
  padding-right: 1rem;
  background: #323232
}

#pro a:hover {
  background: #000;
}

/* Modal */


/* Modal Content/Box */
.modal-content {
  z-index: 2;
  overflow: auto;
  position: fixed;
  top: 0;
  left: -100%;
  height: 100%;
  width: 50%;
  background-color: rgba(255, 255, 0, 1);
  background-color: #323232;
  padding: 1rem;
  padding-top: 6rem;
  //transform: translateX(-100%);
  transition: .5s ease-in-out;
  box-shadow: none;
  color: #FF0;
  /*    margin-bottom:8rem; for player */
}

/* The Close Button */
.close-container {
  position: absolute;
  top: 6rem;
  left: 100%;
}

.close {
  color: #323232;
  float: right;
  font-size: 0.9rem;
  line-height: 1rem;
  position: absolute;
  right: 1rem;
  top: 0;
  padding: 0.5rem;
  background: #FF0;
  border: 1px solid #323232;
}

.close:hover,
.close:focus {
  text-decoration: none;
  cursor: pointer;
  background: #323232;
  color: #FF0;
  border: 1px solid #FF0;
}

.modal-content h2 {
  text-align: left;
  margin-top: 0;
}

.modal-content h2 small {
  font-size: 1rem;
  font-weight: 300;
  line-height: 1rem;
}

.modal-content ul {
  margin-bottom: 1rem;
  margin-left: 1rem;
}

.modal-content li {
  line-height: 1rem;
}

.modal-content p a {
  background: #FF0;
  font-family: 'ElektrixLight', sans-serif;
  padding: 0.25rem;
  color: #323232;
  text-decoration: none;
}

.modal-content p a:hover {
  background: #323232;
  color: #FF0;
}



/* player */
#pnodestream {
  position: fixed;
  left: 0;
  top: 0;
  right: 100px;
  height: 1.5rem;
  //background-color: white;
  //border-top:0.25rem solid #1B29ED;
  z-index: 2;

}

.head_pnodestream {
  background-color: #1B29ED;
  color: white;
  font-size: 1.5rem;
  //font-family: 'Blimey', sans-serif;
  line-height: 2rem;
  padding-left: 12px;
  width: 100%;
  height: 2rem;
  font-weight: 100;
}

.head_pnodestream a {
  color: white;
  letter-spacing: 1px;
}

.head_pnodestream a:hover {
  color: white;
}

.jp-audio {
  color: black;
  height: 1.5rem;
}

.jp-audio .jp-gui {
  background-color: transparent;
}

.prog-holder {
  position: absolute;
  top: 0;
  left: 0.5rem;
  line-height: 1.5rem;
  font-family: 'ElektrixLight', sans-serif;
}

.blink_me {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

#programmation-radio {
  background: #323232;
  font-family: 'ElektrixLight', sans-serif;
  padding: 0.15rem 0.25rem;
  color: #FF0;
  text-decoration: none;
  cursor: pointer;
  margin: 0 0.5rem;
  position: relative;
  z-index: 0;
}

#programmation-radio:hover {
  background: #FF0;
  color: #323232;
}

.jp-audio .jp-controls {
  background-color: transparent;
  width: 1.5rem;
  padding-top: 1px;
  left: 10.5rem;
}

.jp-audio .jp-controls a {
  color: #322E31;
  font-size: 1rem;
  line-height: 1.5rem;
}

.jp-audio .jp-controls a:hover {
  color: black;
}

.jp-audio .jp-time-holder {
  height: 1.5rem;
  left: 13rem;
  font-size: 0.8rem;
  overflow: hidden;
  line-height: 1.5rem;
  right: 1rem;
  color: #322E31;
}

.jp-audio .jp-time-holder .pnodeshow {
  font-weight: bold;
}

.jp-audio .jp-current-time-pnode {
  font-size: inherit;
  position: absolute;
  top: 0rem;
  left: 0;
  right: 0;
  height: 100%;
  padding: 0;
  text-align: left;
  pointer-events: none;
}

#pnodecurrent {
  //width: 100%;
  height: 1.5rem;
  overflow: hidden;
}

#pnodecurrent span {
  text-transform: uppercase;
}

#pnodenext {
  position: absolute;
  left: 50%;
  top: 0;
  width: 50%;
  padding-left: 20px;
  height: 2.5rem;
  overflow: hidden;
  display: none;
}

#pnodeseparateur {
  position: absolute;
  width: 10px;
  top: 0px;
  left: 50%;
  display: none;
}



.jp-audio .jp-pnode-logo {
  position: absolute;
  width: 70px;
  padding-left: 15px;
  height: 4rem;
  font-size: 3rem;
  top: 0;
  right: 0px;
  background-color: #1B29ED;
  line-height: 3.5rem;
}

.jp-audio .jp-pnode-logo a {
  color: white;

}

.jp-audio .jp-title-holder {
  position: absolute;
  top: 0;
  left: 160px;
  right: 0;
  width: 100%;
}

.jp-audio .jp-title-holder .jp-title {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  padding: 0 12px;
  font-size: 0.8rem;
  line-height: 42px;
  text-align: left;
}

.jp-audio .jp-volume-controls {
  display: none;
  background-color: white;
  right: 12px;

}

.jp-audio .jp-volume-controls a {
  top: 13px;
  color: black;
}

.jp-audio .jp-volume-controls .jp-volume-bar .jp-volume-bar-value {
  background-color: #1B29ED;
}

.jp-audio .jp-volume-controls .jp-volume-max {
  padding-right: 0;
}



/* Sonic Schedule */
.modal-content #sonicSchedule ul,
.modal-content #sonicReplay ul {
  margin-bottom: 0;
  list-style-type: none;
  margin-left: unset;

}

.modal-content #sonicSchedule li,
.modal-content #sonicReplay li {
  list-style-type: none;
  border-radius: 3px;

}

.ui-widget {
  font-family: 'ChesterfieldLTStd', sans-serif;
}

.modal-content #sonicSchedule.ui-widget.ui-widget-content,
.modal-content #sonicReplay.ui-widget.ui-widget-content {
  border: 0;
  background: transparent;
  color: #FF0;
  padding: 0;
}

.modal-content #sonicSchedule.ui-widget.ui-widget-content a,
.modal-content #sonicReplay.ui-widget.ui-widget-content a {
  color: #FF0;
}

.modal-content #sonicSchedule .ui-widget-header,
.modal-content #sonicReplay .ui-widget-header {
  border: 0;
  background: transparent;
  padding: 0.2em;
}

.modal-content #sonicSchedule tr,
.modal-content #sonicReplay tr {
  line-height: 1rem !important;
}

#sonicSchedule h4,
#sonicReplay h4 {
  font-size: 0.9rem;
  line-height: 1rem;
  font-family: 'ChesterfieldLTStd', sans-serif;
}

#sonicSchedule h3,
#sonicReplay h3 {
  line-height: 2.5rem;
  font-size: 1.25rem;
  border-top: solid 1px #FF0;
  margin-top: 8px;
}

.modal-content #sonicSchedule .ui-state-active,
.modal-content #sonicSchedule .ui-widget-content .ui-state-active,
.modal-content #sonicSchedule .ui-widget-header .ui-state-active,
.modal-content #sonicSchedule a.ui-button:active,
.modal-content #sonicSchedule .ui-button:active,
.modal-content #sonicSchedule .ui-button.ui-state-active:hover {
  background: #1B29ED;
  border-color: #1B29ED;
}

#sonicSchedule .pure-table,
#sonicSchedule table,
#sonicReplay .pure-table,
#sonicreplay table {
  width: 100%;
}

#sonicSchedule table,
#sonicReplay table {
  font-size: 0.8rem;
}



.ui-tabs .ui-tabs-panel {
  padding: 1rem 0 0 0;
}

.pnode_url {
  display: none;
}

.pnode_time {
  width: 5rem;
}

.pnode_program_name {
  //width: 60%;
  text-transform: uppercase;
}




/* Utility Classes */
.wrapper {
  margin: 0 1rem 0 1rem;
  max-width: 54rem;
}


.padding {
  padding: 3rem 1rem;
}

.left {
  float: left;
}

.right {
  float: right
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-left {
  text-align: left;
}

/* Content Styling */
.pure-g [class*=pure-u] {
  font-family: 'ChesterfieldLTStd', 'Open Sans', sans-serif;
}

.pure-g > div {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}




.grey {
  background-color: #dbdbdb;
}



/* Main */
.column-gauche {
  padding-right: 0;
}

.column-droite {
  padding-left: 0;
}

/* Titre */

#titre {
  text-align: center;
  margin-bottom: 3rem;
}

#titre h1 {
  padding: 0;
}

#titre h3 {}

#titre h2 {
  font-weight: 600;
  text-align: inherit;
  margin-top: 0rem;
  font-size: 2.5rem;
  line-height: 2rem;
}




/* Calendrier
#calendrier {
    //margin-bottom: 3rem;
}

#calendrier img {
    background-color: black;
}

#calendrier img:hover {
    background-color: #1B29ED;
}
 */

/* Agenda */

.evenement {
  border: #1B29ED solid 0.25rem;
  margin-bottom: 0.75rem;
  padding-left: 0.5rem;
  margin-left: -0.75rem;
  padding-right: 0.5rem;
  margin-right: -0.75rem;
  border-radius: 10px;

}

.intro_bloc {
  //background-color: #1B29ED;
  //color: #FFF;
  //padding-bottom: 0.001rem;
  //padding-top: 0.001rem;
}

.intro_bloc h2 {
  //text-align: center;
  //font-size: 2rem;
  //line-height: 2rem;
  //padding-top: 0.75rem;
}



.partidevenement {
  padding-left: 0.5rem;
  margin-left: -0.5rem;
  padding-right: 0.5rem;
  margin-right: -0.5rem;
}

.evenement .partidevenement:last-child hr {
  display: none;
}

.separateur {
  margin-top: 2rem;
  width: 100%;
  display: inline-block;
  height: 3rem;
}

.pure-g .separateur:first-child {
  margin-top: 0;
}

.separateur img {
  width: 94px;
}

.soiree {
  //margin-top: 2rem;
}

.entete-soiree {
  margin-top: 0rem;
  margin-bottom: 1rem;
}

.entete-soiree .date {
  text-align: left;
}

.entete-soiree .jour {
  font-family: 'Blimey', sans-serif;
  font-size: 5rem;
  line-height: 4rem;
}

.entete-soiree .mois {
  font-size: 1.1rem;
  text-transform: uppercase;
  padding-top: 0.5rem;
  //padding-left: 10px;
}

.entete-soiree .lieu-container {
  text-align: right;
}

.entete-soiree .lieu h2 {
  font-family: 'Blimey', sans-serif;
  font-size: 3rem;
  line-height: 3rem;
  font-weight: 300;
  margin-bottom: 0.5rem;
  margin-top: 0;
}

.entete-soiree .adresse h5 {
  font-size: 0.9rem;
  //line-height: 1.5rem;
  font-weight: 400;
}

.entete-soiree .adresse h6 {
  font-size: 0.8rem;
  font-weight: bold;
}

/*

.entete-soiree {
    position: relative;
    height: 7rem;
    width: 100%;
}

.entete-soiree .date {
    position: absolute;
    top: 0rem;
    left: 0rem;
}

.entete-soiree .date .jour {
    font-family: 'Blimey', sans-serif;
    font-size: 5rem;
    line-height: 4rem;
}

.entete-soiree .date .mois {
    font-size: 1.1rem;
    text-transform: uppercase;
    padding-top: 7px;
}

.entete-soiree .lieu-container {
    text-align: right;
    //position: absolute;
    //top: 1rem;
    //right: 3rem;
    width: 100%;
    margin-top: 2rem;
}

.entete-soiree .lieu-container .lieu {
    font-family: 'Blimey', sans-serif;
    font-size: 3rem;
    line-height: 3rem;
    font-weight: 300;
}

.entete-soiree .lieu-container .adresse h5 {
    font-size: 0.9rem;
    line-height: 1.5rem;
    font-weight: 400;
}

.entete-soiree .lieu-container .adresse h6 {
    font-size: 0.8rem;
    font-weight: bold;
}
*/


.soiree-content {
  padding-top: 5px;
  margin-bottom: -5px;
}

#agenda .artistes {
  padding-top: 0.5rem;
}



.infos {
  font-weight: 300;
}





.liste-artistes div {
  padding-left: 2rem;
  padding-right: 2rem;
}


.liste-artistes li {
  list-style-type: none;
  font-weight: bold;
  //margin-top: -5px;
  margin-bottom: 1rem;
  //line-height: 2rem;
  margin-right: 1rem;
}

#agenda li small {
  line-height: 1rem;
  font-weight: 300;
}

.carte-button {
  color: #000;
  border: 0;
  padding: 0;
  margin: 1rem 2rem;
  text-align: left;
  background: transparent;
  display: inline;
  font-size: 0.9rem;
  line-height: 1rem;
  position: relative;
  text-align: center;
  display: block;
}

.artiste-button {
  color: #000;
  border: 0;
  padding: 0;
  margin: 1rem 0rem;
  text-align: left;
  //background: black;
  display: inline;
  font-size: 0.9rem;
  line-height: 0rem;
  position: relative;
  text-align: center;
  display: block;
  mask-image: url("hexagon.png");
  -webkit-mask-image: url("hexagon.png");
  mask-size: 100% 100%;
  -webkit-mask-size: 100% 100%;
}


.pays {
  font-size: 0.666rem;
}

.nom-artiste {

  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 0.5rem;
  transition: background-color .25s ease-out;
  -moz-transition: background-color .25s ease-out;
  -webkit-transition: background-color .25s ease-out;
  -o-transition: background-color .25s ease-out;
}

.nom-artiste:hover {
  background-color: rgba(0, 0, 0, 0);
}

.fadin:hover span:nth-child(1) {
  opacity: 0;
}

.nom-artiste:hover span:nth-child(2) {
  opacity: 1;
}

.nom-artiste span {
  line-height: 2rem;
  color: white;
  font-family: 'Blimey', sans-serif;
  font-size: 2rem;
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  padding: 0 0.5rem;
  transition: opacity .25s ease-out;
  -moz-transition: opacity .25s ease-out;
  -webkit-transition: opacity .25s ease-out;
  -o-transition: opacity .25s ease-out;
}

.nom-artiste .programmation {
  opacity: 0;
}

.nom-artiste .programmation strong {
  font-family: 'Aileron', sans-serif;
  font-size: 0.8rem;
  font-weight: 300;
  line-height: 1rem;
  display: block;
}

.diaporama {
  padding: 0;
  margin: 0;
}

.diaporama li {
  list-style-type: none;

}

/* bouton billeterie */

.button-billet {

  font-family: 'Blimey', sans-serif;
  background-color: #1B29ED;
  /* Green */
  border: solid 2px #1B29ED;
  color: white;
  padding: 1rem 1rem;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 1.5rem;
  line-height: 1.5rem;
  border-radius: 0.5rem;
  width: 66.66%;
  -webkit-transition-duration: 0.25s;
  /* Safari */
  transition-duration: 0.25s;
}

.button-billet:hover {
  color: #1B29ED;
  background-color: transparent;


}

/* footer */
.footer {
  background-color: #1B29ED;
  padding: 1rem;
  margin-top: 3rem;
  padding-bottom: .75rem;
}

/* maintenance */
.footer a.maintenance {
  color: black;
}

.footer a.maintenance:hover {
  text-decoration: underline;
}

.footer-div {
  height: 3rem;
  vertical-align: middle;
}



.button-footer {
  margin-top: 0.3rem;
  font-family: 'Blimey', sans-serif;
  //background-color: #1B29ED;
  /* Green */
  border: solid 2px #1B29ED;
  color: white;
  //padding: 1rem 1rem;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 1.5rem;
  line-height: 1.5rem;
  border-radius: 0.5rem;
  //width: 66.66%;
  -webkit-transition-duration: 0.25s;
  /* Safari */
  transition-duration: 0.25s;
}

.button-billet:hover {
  color: #1B29ED;
  background-color: transparent;


}

/* evenement solo */
.column-solo:nth-child(2n) {
  padding-right: 0;
  padding-left: 0;
}

.column-solo:nth-child(2n+1) {
  padding-left: 0;
  padding-right: 0;
}

body.evenement_solo {
  padding-top: 2rem;
}


/* mailjet */
.mj-embedded-content {
  background-color: transparent !important;
}

@media (min-width: 769px) {
  body form.mj-form .mj-embed-shadow .mj-embedded-content {
    background-color: transparent !important;
    box-shadow: none !important;
  }

}

/* Menu Settings */
.main-nav ul {
  text-align: center;
  letter-spacing: -1em;
  margin: 0;
  padding: 0;
}

.main-nav ul li {
  display: inline-block;
  letter-spacing: normal;
}

.main-nav ul li a {
  position: relative;
  display: block;
  line-height: 45px;
  color: #fff;
  padding: 0 20px;
  white-space: nowrap;
}

.main-nav > ul > li > a {
  border-radius: 2px;
}

/*Active dropdown nav item */
.main-nav ul li:hover > a {
  background-color: #175E91;
}

/* Selected Dropdown nav item */
.main-nav ul li.selected > a {
  background-color: #fff;
  color: #175E91;
}

/* Dropdown CSS */
.main-nav ul li {
  position: relative;
}

.main-nav ul li ul {
  position: absolute;
  background-color: #1F8DD6;
  min-width: 100%;
  text-align: left;
  z-index: 999;

  display: none;
}

.main-nav ul li ul li {
  display: block;
}

/* Dropdown CSS */
.main-nav ul li ul ul {
  left: 100%;
  top: 0;
}

/* Active on Hover */
.main-nav li:hover > ul {
  display: block;
}

/* Child Indicator */
.main-nav .has-children > a {
  padding-right: 30px;
}

.main-nav .has-children > a:after {
  font-family: FontAwesome;
  content: '\f107';
  position: absolute;
  display: inline-block;
  right: 8px;
  top: 0;
}

.main-nav .has-children .has-children > a:after {
  content: '\f105';
}

/* Media queries class */
.md {
  display: none;
}

.notmd {
  display: block;
}

/* Media Queries md First 2020*/
@media screen and (max-width: 47.9rem) {
  .content {
    margin-bottom: 3rem;
  }

  .pure-u-1 {
    //text-align: center;
  }

  .header {
    height: unset;
  }

  .surnav {
    //height: 3rem;
  }

  .nav {
    height: unset;
  }

  .nav-list {
    margin: 0;
    text-align: center;
  }

  .nav-item {
    width: 100%;
    display: none;
    border-bottom: solid 1px #FF0;
    padding-top: 1rem;
    height: 2.5rem;
  }

  .nav-item.show {
    display: inline-block;
  }

  .nav-item:first-child {
    padding-top: 0.35rem;
    display: inline-block;
  }

  .nav .hamburger {
    display: block;
  }

  .nav-item.show-hamburger {
    display: inline-block;
  }


  .sidebar {
    height: 15rem;
    position: static;
    top: unset;
    margin-top: 4rem;
  }

  .modal-content {
    width: 100%;
  }

  .listing-calendrier {
    text-align: center;
  }

  .adresse,
  .tarif {
    border-bottom: 1px solid #FF0;
  }

  .adresse,
  .tarif2 {
    border-left: none;
  }

  .adresse2 {
    border-top: none;
  }

  .jp-audio {
    position: fixed;
    background: #FF0;
    left: 0;
    bottom: 0;
    height: 3rem;
    border-top: 1px solid #323232;
  }

  .prog-holder {
    left: 3rem;
  }

  .jp-audio .jp-controls {
    left: 0;
    top: 0.45rem;
  }

  .jp-audio .jp-controls a {
    font-size: 2rem;
    line-height: 2rem;
  }

  .jp-audio .jp-time-holder {
    left: 3rem;
    right: 0.5rem;
    top: 1.25rem;
  }

  #programmation-radio {
    position: fixed;
    right: 0.5rem;
    bottom: 1.55rem;
    padding: 0 0.25rem;
    line-height: 1.25rem;
    margin: 0;
  }

  #backBtn {
    bottom: 4rem;
  }

  .autoscroll-tape__tape {
    position: absolute;
  }
}


/*OLD MEDIA QUERIES */
@media screen and (min-width: 48rem) {
  .right-col {
    margin-left: 50%;
    margin-top: 4.5rem;
  }
}

@media screen and (min-width: 35.5em) {
  /*.pure-u-1 {
        text-align: left;
    }*/

  .liste-artistes div {
    padding-left: 0;
    padding-right: 0;
  }

  .liste-artistes div:nth-child(2n+1) {
    padding-right: 1rem;
  }

  .liste-artistes div:nth-child(2n+2) {
    padding-left: 1rem;
  }

}

@media screen and (min-width: 48rem) {
  .column-gauche {
    padding-right: 1rem;
  }

  .column-droite {
    padding-left: 1rem;
  }

  .md {
    display: block;
  }

  .notmd {
    display: none;
  }

  .liste-artistes div:nth-child(2n+1) {
    padding-right: 0rem;
  }

  .liste-artistes div:nth-child(2n+2) {
    padding-left: 0rem;
  }

  .liste-artistes div:nth-child(3n+1) {
    padding-right: 1.3333rem;
  }

  .liste-artistes div:nth-child(3n+2) {
    padding-left: 0.6666rem;
    padding-right: 0.6666rem;
  }

  .liste-artistes div:nth-child(3n+3) {
    padding-left: 1.3333rem;
  }



  #pnodenext {
    display: block;
  }

  #pnodeseparateur {
    display: block;
  }


  /* evenement solo */
  .column-solo:nth-child(2n) {
    padding-right: 2rem;
  }

  .column-solo:nth-child(2n+1) {
    padding-left: 2rem;
  }

}

@media screen and (min-width: 66rem) {
  .wrapper {
    margin: 0 auto 0 auto;
    padding: 0 2rem;
  }


  .column-gauche {
    padding-right: 2rem;
    padding-left: 1rem;
  }

  .column-droite {
    padding-left: 2rem;
    padding-right: 1rem;
  }


  .liste-artistes {
    // margin: 0 2rem;
  }


}

@media screen and (min-width: 74rem) {}


/* Overlay */
/* Settings */
/*
:root {
    --offset: 1rem;
    --max_width: 56rem;
    --columns: 6;
    --gutter: .5rem;
    --baseline: 1rem;
    --baseline-shift: 3px;
    --color: hsla(204, 80%, 72%, 0.25);
    --color-text: hsla(204, 80%, 72%, 1);
    --media-query: 'base';
}

@media (min-width: 568px) {
    :root {
        --offset: 2rem;
        --gutter: .75rem;
        --color: hsla(286, 51%, 44%, 0.25);
        --color-text: hsla(286, 51%, 44%, 1);
        --media-query: 'small';
    }
}

@media (min-width: 768px) {
    :root {
        --offset: 2rem;
        --columns: 12;
        --gutter: 1rem;
        --color: hsla(204, 80%, 72%, 0.25);
        --color-text: hsla(204, 80%, 72%, 1);
        --media-query: 'medium';
    }
}

@media (min-width: 1024px) {
    :root {
        --offset: 2rem;
        --color: hsla(286, 51%, 44%, 0.25);
        --color-text: hsla(286, 51%, 44%, 1);
        --media-query: 'large';
    }
}



:root {
    --repeating-width: calc(100% / var(--columns));
    --column-width: calc((100% / var(--columns)) - var(--gutter));
    --background-width: calc(100% + var(--gutter));
    --background-columns: repeating-linear-gradient(to right,
        var(--color),
        var(--color) var(--column-width),
        transparent var(--column-width),
        transparent var(--repeating-width));
    --background-baseline: repeating-linear-gradient(to bottom,
        var(--color),
        var(--color) 1px,
        transparent 1px,
        transparent var(--baseline));
}

html {
    position: relative;
}

html::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin-right: auto;
    margin-left: auto;
    width: calc(100% - (2 * var(--offset)));
    max-width: var(--max_width);
    min-height: 100vh;
    content: '';
    background-image: var(--background-columns), var(--background-baseline);
    background-size: var(--background-width) 100%;
    background-position: 0 var(--baseline-shift);
    z-index: 1000;
    pointer-events: none;
}

html::after {
    content: var(--media-query);
    position: fixed;
    top: 1rem;
    left: 1rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    color: var(--color-text);
}

*/

/* Diaporama */
.jDiaporama {
  position: relative;
  max-width: 100%;
}

.jDiaporama ul {
  // -moz-box-shadow: 1px 1px 0.5em #222;
  overflow: hidden;
  max-width: 100%
}

.jDiaporama li {
  list-style-type: none;
  overflow: hidden;
  position: absolute;
}

.jDiaporama li img {
  display: block
}

.jDiaporama li .desc {
  position: absolute;
  bottom: 0;
  left: 0;
  display: none;
  margin: 0;
  color: #fff;
  font-size: 12px;
  font-family: Arial;
  padding: 5px;
  background: url(img/back_desc.html) repeat;
  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/back_desc.html', sizingMethod='scale');
  _background-image: none;
  width: 100%;
  height: 30px
}

.jDiaporama li .title {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  margin: 0;
  color: #fff;
  font-size: 12px;
  font-family: Arial;
  padding: 5px;
}

.jDiaporama li .count {
  position: absolute;
  top: 0;
  right: 0;
  display: none;
  margin: 0;
  color: #fff;
  font-size: 12px;
  font-family: Arial;
  padding: 5px;
}

.jDiaporama_controls {
  display: none;
}

.jDiaporama_controls a {
  font-weight: normal;
  width: 10px;
  height: 13px;
  text-indent: -9999px;
  display: block;
  margin: 0 3px;
  position: absolute;
}

.jDiaporama_controls .prev {
  background: url(img/controls2.html) no-repeat bottom;
  _background: url(img/controls.html) no-repeat bottom;
  top: 50%;
  margin-top: -16px;
  height: 32px;
  width: 32px;
  left: 0px
}

.jDiaporama_controls .next {
  background: url(img/controls2.html) no-repeat top;
  _background: url(img/controls.html) no-repeat top;
  top: 50%;
  margin-top: -16px;
  height: 32px;
  width: 32px;
  right: 0px
}

.jDiaporama_controls .pause {
  background: url(img/playpause.html) no-repeat top;
  _background: url(img/playpause-2.html) no-repeat top;
  width: 64px;
  height: 48px;
  left: 50%;
  top: 50%;
  margin-left: -32px;
  margin-top: -24px;
}

.jDiaporama_controls .play {
  background: url(img/playpause.html) no-repeat bottom;
  _background: url(img/playpause-2.html) no-repeat bottom;
  width: 64px;
  height: 48px;
  left: 50%;
  top: 50%;
  margin-left: -32px;
  margin-top: -24px;
}

/**** Status ****/

.jDiaporama_status {
  text-align: center;
  margin-top: 10px;
  position: absolute;
  left: 50%;
  display: none
}

.jDiaporama_status a {
  background: url(img/bullets.html) no-repeat left;
  _background: url(img/bullets-2.html) no-repeat left;
  float: left;
  width: 10px;
  height: 10px;
  text-indent: -9999px;
  margin-right: 5px;
}

.jDiaporama_status a.active,
.jDiaporama_status a:hover {
  background: url(img/bullets.html) no-repeat right;
  _background: url(img/bullets-2.html) no-repeat right;
}





/* FINAL CUSTOM 2021 */
/************************************************************************************/

/*
bleu clair = #32C3FF
bleu fonçé = #2100A8
jaune = #FFFF00
blanc #FFFFFF
*/

/* GENERIQUES */
body {
  font-family: 'Chalet', sans-serif;
  color: #FFFFFF;
  color: #2100A8;
}

p {
  margin-bottom: 1.5rem;
}

a {
  color: #FFFFFF;
  color: #2100A8;
}

a:hover {
  color: #2100A8;
  color: #FFFFFF;

}

p a {
  text-decoration: none;
}

h1,
h2 {
  font-family: 'Eckmannpsych Demo', serif;
}

h3,
h4,
h5,
h6 {
  font-family: 'Ohno Blazeface 12 Point', serif;
}



body,
.pure-g [class*=pure-u] {
  font-family: 'Chalet', sans-serif;
  letter-spacing: 0.02em;
}

.border-bottom {
  border-bottom: 1px solid;
}

/* NAV */

.surnav {
  background: #32C3FF;
}

.surnav-item a {
  color: #2100A8;
}

.surnav-item a:hover {
  color: #FFFF00;
}

.nav {
  background: #32C3FF;
  background: #2100A8;
  color: #2100A8;
  color: #FFF;
  height: 3rem;
}

.nav-list {
  margin: 0 0.5rem;
}

.nav .logo {
  width: 70px;
  margin-top: -15px;
  margin-right: 0.25rem;
}

.nav .logo-small {
  width: 3rem;
  margin-top: -5px;
}

.nav .logo:hover {
  filter: unset;
}

.nav-item {
  padding-top: 1.16rem;
  vertical-align: top;
}

.nav-item:first-child {
  padding-top: 0.16rem;
}

.nav-item a {
  color: inherit;
  font-family: 'Ohno Blazeface 12 Point', serif;
  border: none;
  letter-spacing: 0.05em;
}

.pure-button:hover {
  background: none;
}

.nav-item a:hover {
  color: #FFFF00;
  border: none;
}

.nav-item a:active,
.nav-item a:focus {
  color: inherit;
  background: none;
  border: none;
}

.pure-button:active,
.pure-button:focus {
  background: none;
}

.main-h1 {
  line-height: 3rem;
  display: inline-block;
  font-size: 3rem;
  vertical-align: top;
  padding-top: 0.2rem;
}

/* DROITE */


.content {
  background: #FFF;
  background: #32C3FF;
  /*background: transparent;*/
  padding: 1.5rem 0.75rem;
}

.calendrier-g.pure-g [class*=pure-u] {
  font-family: 'Ohno Blazeface 12 Point', serif;
  font-size: 1.1rem;
  letter-spacing: 0.012em;
  padding-bottom: 0.25rem;
}

.calendrier-g {
  display: table;
  width: 100%;
}

a.lien-calendrier {
  min-height: unset;
  padding: 1px 0 0 0;
}

.grp-evenement {
  padding-right: 1.5rem;
  position: relative;
  /*overflow: hidden;*/
}

.grp-banner {
  position: absolute;
  color: #2100A8;
  color: #FFFF00;
  height: 100%;
  width: 1.5rem;
  right: 0;
  top: 0;
  text-align: center;
  writing-mode: vertical-rl;
  letter-spacing: 0.3em;
  font-weight: 600;
  background: #32C3FF;
  background: #2100A8;
  border-bottom: 1px solid #32C3FF;
}

.date-calendrier {
  width: 6rem;
  /*position: absolute;
    top: 0;
    left: 0;*/
  color: #32C3FF;
  display: table-cell;
  vertical-align: middle;
}

.date-calendrier .date {
  font-size: 2rem;
  /*padding-top: 1px;*/
  padding: 3px 0 0 0;
  line-height: 1.5rem;
  height: 2rem;
}

.date-calendrier .date.petit {
  font-size: 1.7rem;
}

.date-calendrier .mois {
  font-size: 0.8rem;
  margin-top: -5px;
  height: unset;
  line-height: 1rem;
}

.listing-calendrier {
  /*margin-left: 6rem;*/
  padding-bottom: 8px;
  padding-top: 7px;
}

.lieu-calendrier {
  font-size: 1.1rem;
  font-style: italic;
  letter-spacing: 0.02em;
  padding: 4px 0 0 0;
  line-height: 27px;
  color: #32C3FF;
}

.prog-calendrier {
  font-size: 0.8rem;
  font-family: 'Chalet', sans-serif;
  text-transform: uppercase;
  font-weight: 600;
  line-height: 18px;
  padding-top: 1px;
}

.banner {
  background: #32C3FF;
  color: #FFFF00;
}

.rencontre {
  /*border-right: 1.5rem solid yellow;*/
}

.rencontre h2 {
  font-size: 2rem;
  text-align: left;
  line-height: 2rem;
}

.rencontre .sous-titre-soiree {
  text-align: left;
}

.adresse,
.tarif {
  width: 100%;
  min-height: 3rem;
  height: 100%;
  display: block;
  text-decoration: none;
  padding-top: 0.5rem;

  padding-bottom: 0.45rem;
  font-weight: 100;
}

.adresse.has-link,
.tarif.has-link {
  padding-top: 0;
  padding-bottom: 0;
}


.calendrier-g,
a.artiste-title,
.adresse,
.adresse a,
.tarif,
.tarif a {
  background: #FFFF00;
  background: #32C3FF;
  background: #2100A8;
  background: #FFF;


  color: #32C3FF;
  color: #FF0;
  color: #FFF;
  color: #2100A8;
}

.calendrier-g,
a.artiste-title,
.adresse,
.adresse a,
.tarif,
.tarif a {
  border-color: #FFFFFF;
  border-color: #32C3FF;
}

.calendrier-g,
a.artiste-title,
.adresse,
.adresse a,
.tarif,
.tarif a {
  font-family: 'Ohno Blazeface 12 Point', serif;
}

.tarif,
.tarif a,
.adresse,
.adresse a {
  font-family: 'Chalet', sans-serif;
  font-weight: 500;
  font-size: 0.75rem;
  color: #32C3FF;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  justify-content: center;
}

.calendrier-g:hover,
a.artiste-title:hover,
.adresse a:hover,
.tarif a:hover {
  background: #FFFFFF;
  background: #FFFF00;
  color: #FFFFFF;
  color: #32C3FF;
  color: #2100A8;
}

.tarif:hover,
.adresse:hover {
  /*background: #2100A8;
    color: #FFFFFF;*/
}

a.artiste-title {
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  padding-bottom: 13px;
  padding-top: 13px;
}

a.artiste-title small {
  font-family: 'Chalet', sans-serif;
  font-weight: 500;
  display: inline-block;
}

a.artiste-title:after {
  left: 0;
}

a.artiste-title:hover {
  padding-left: 1.5rem;
}

.soiree {
  position: relative;
  margin-bottom: 53px;
}


.titre-soiree {
  display: table;
  margin-bottom: 18px;
}

.titre-blason {
  display: table-cell;
  vertical-align: middle;
  width: 61px;
}

.soiree h2 {}

.picto-soiree {
  /*height: 67.5px;*/
  /*margin-top: 6px;*/
  width: 61px !important;
  /*position: absolute;
    top: 0;
    left: 0;*/
  margin-top: -18px;
  vertical-align: middle;
  /*margin-right: 0.75rem;*/
}

.titre-texte {
  display: table-cell;
  padding-left: 1rem;
}

.soiree h2 {
  /*margin-left: 4.5rem;*/
  font-family: 'Ohno Blazeface 12 Point', serif;

  padding: 0;
  margin-bottom: 15px;
  margin-top: -7px;
}

.eventFB {
  display: block;
  font-size: 1.25rem;
  position: absolute;
  right: 0;
  top: 9px;

}

.eventFB a {
  color: #FFF;
  background: #2100A8;
  padding: 0.25rem 0.4rem;
}

.eventFB a:hover {
  color: #2100A8;
  background: #FFFF00;
}

.lieu {
  font-family: 'Ohno Blazeface 12 Point', serif;
  color: inherit;
  font-style: italic;
  text-transform: capitalize;
  display: block;
  font-size: 0.65em;
  letter-spacing: 0.02em;
}

.sous-titre-soiree {
  margin-left: 4.5rem;
}

/* ailleurs */
/*.content h2 {
    font-size: 3rem;
    text-align: center;
}*/
.liste-artistes div {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.entete-exposition {
  display: block;
  width: 100%;
  border-bottom: 1px solid #32C3FF;
  letter-spacing: 0.3em;
  font-weight: 600;
  line-height: 1.5rem;
  padding: 0 1.5rem;
  background: #2100A8;
  color: #FFFF00;
  text-align: center;
  /*padding-right: 0;*/
}

.entete-exposition p {
  line-height: 1.5rem;
  margin-bottom: 0;
}

.soiree .grp-evenement {
  padding-right: 2rem;
}

.soiree .grp-banner {
  width: 2rem;
  border-bottom: none;
}

.soiree .grp-banner p {
  margin-bottom: 0.25rem;
}

.sous-tire-soiree p {
  margin-top: -1.25rem;
  margin-bottom: 1.75rem;
}

.date-calendrier .lieu {
  font-size: 1.1rem;
  padding: 0.25rem 0.5rem;
  line-height: 1.5rem;
}

.adresse p,
.tarif p {
  width: 100%;
}

#backBtn {
  background: #2100A8;
  color: #FFF;
  border-color: #FFF;
}

#backBtn:hover {
  background: #FF0;
  color: #2100A8;
  border-color: #2100A8;
}

h2.bloc {
  text-align: center;
  font-size: 2.5rem;
}

.echelle {
  height: 3rem;
  text-align: center;
}

#ailleurs {
  margin-top: 0;
}



/* GAUCHE */

.sidebar {
  background-image: url(../images/fondmap_cut.html);
  top: 4.5rem;
  height: calc(100% - 4.5rem);
}

.modal-content {
  background: #FFFF00;
  color: #2100A8;
  background: #FFFFFF;
  /*color: #32C3FF;*/
}

.modal-content h2 {
  font-family: 'Ohno Blazeface 12 Point', serif;
  letter-spacing: 0.02em;
  padding-right: 1.5rem;
  margin-top: -8px;
  line-height: 2.25rem;
  margin-bottom: 22px;
}

.modal-content h2 small {
  font-family: 'Chalet', sans-serif;
}

.modal-content p a {
  background: transparent;
  color: #2100A8;
  text-decoration: underline;
  font-family: inherit;
  padding: 0;
}

.modal-content p a:hover {
  background: transparent;
  color: #32C3FF;
}

.modal-content h4 {
  display: inline-block;
  font-family: 'Chalet', sans-serif;
  color: #32C3FF;
  border-top: 1px solid #000;
  font-weight: 500;
}

.close-container {
  z-index: 1000;
}

.close {
  background: #2100A8;
  color: #FFF;
  border-color: #2100A8;
  padding: 0.5rem 0.65rem;
  top: -6px;
}

.close:hover {
  background: #FF0;
  color: #2100A8;
  border-color: #2100A8;
}

/* PRO */
#pro a {
  background: #2100A8;
  color: #FFF;
  font-family: 'Ohno Blazeface 12 Point', serif;
  letter-spacing: 0.02em;
  font-size: 1.5rem;
  transition: 0.5s;
}

#pro a:hover {
  background: #FFF;
  color: #32C3FF;
}

/* RADIO */
.prog-holder {
  font-family: 'Ohno Blazeface 12 Point', serif;
}

#programmation-radio {
  font-family: 'Ohno Blazeface 12 Point', serif;
  background: transparent;
  color: #FFF;
  margin: 0;
  padding: 0;
  padding-top: 1.16rem;
}

#programmation-radio:hover {
  color: #FF0;
  background: transparent;
}

.jp-audio {
  color: #2100A8;
}

.jp-audio .jp-controls {
  left: 9.75rem;
}

.jp-audio .jp-controls a {
  color: #FFF;
}

.jp-audio .jp-controls a:hover {
  color: #FF0;
}

.jp-audio .jp-time-holder {
  left: 12rem;
  color: #2100A8;
}

.modal-content #sonicSchedule.ui-widget.ui-widget-content,
modal-content #sonicReplay.ui-widget.ui-widget-content {
  color: #2100A8;
}

.ui-widget {
  font-family: 'Chalet', sans-serif;
  font-weight: 600;
}

#sonicSchedule table,
#sonicReplay table {
  font-size: 0.7rem;
}

#sonicSchedule h3,
#sonicReplay h3 {
  border-top: none;
}

@media screen and (max-width: 47.9rem) {
  .nav {
    height: unset;
  }

  .nav-list {
    margin: 0;
  }

  .nav .logo {
    display: none;
  }

  .nav-item {
    border-bottom-color: #FFF;
    padding-top: 0.9rem;
    background: #2100A8;
  }

  .jp-audio {
    background: #32C3FF;
    border-color: #2100A8;
  }

  .jp-audio .jp-controls {
    left: 0;
  }

  .jp-audio .jp-time-holder {
    left: 3rem;
  }

  .prog-holder {
    top: 0.25rem;
  }

  .main-h1 {
    line-height: 2.5rem;
    font-size: 2rem;
    /*padding-top: 0.15rem;*/
  }

  .sidebar {
    height: 21rem;
  }

  .listing-calendrier {
    text-align: left;
  }

  .titre-soiree {
    display: block;

  }

  .titre-blason {
    width: 100%;
    text-align: center;
    display: block;
    margin-bottom: 1.5rem;
  }

  .picto-soiree {
    width: 61px !important;
  }

  .titre-texte {
    padding-left: 0;
    display: block;
  }

  .soiree h2 {
    font-size: 1.65rem;
    /*text-align: center;*/
  }

  .eventFB {
    top: 90px;
  }

  .sous-titre-soiree {
    margin-left: 0rem;
  }

  .entete-exposition {
    padding: 0 0.75rem;
    letter-spacing: 0.1em;
  }

  .liste-artistes div {
    padding: 0 0.75rem;
  }

  a.artiste-title {
    text-align: center;
  }

}

/* FONT */
@font-face {
  font-family: 'Ohno Blazeface 12 Point';
  src: url('../fonts/OhnoBlazeface-14PointItalic.html');
  src: local('Ohno Blazeface 14 Point Italic'), local('OhnoBlazeface-14PointItalic'),
    url('../fonts/OhnoBlazeface-14PointItalicd41d.html?#iefix') format('embedded-opentype'),
    url('../fonts/OhnoBlazeface-14PointItalic-2.html') format('woff2'),
    url('../fonts/OhnoBlazeface-14PointItalic-3.html') format('woff'),
    url('../fonts/OhnoBlazeface-14PointItalic-4.html') format('truetype');
  font-weight: 100;
  font-style: italic;
}


@font-face {
  font-family: 'Ohno Blazeface 12 Point';
  src: url('../fonts/OhnoBlazeface-12Point.html');
  src: local('Ohno Blazeface 12 Point'), local('OhnoBlazeface-12Point'),
    url('../fonts/OhnoBlazeface-12Pointd41d.html?#iefix') format('embedded-opentype'),
    url('../fonts/OhnoBlazeface-12Point-2.html') format('woff2'),
    url('../fonts/OhnoBlazeface-12Point-3.html') format('woff'),
    url('../fonts/OhnoBlazeface-12Point-4.html') format('truetype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Ohno Blazeface 12 Point';
  src: url('../fonts/OhnoBlazeface-14Point.html');
  src: local('Ohno Blazeface 14 Point'), local('OhnoBlazeface-14Point'),
    url('../fonts/OhnoBlazeface-14Pointd41d.html?#iefix') format('embedded-opentype'),
    url('../fonts/OhnoBlazeface-14Point-2.html') format('woff2'),
    url('../fonts/OhnoBlazeface-14Point-3.html') format('woff'),
    url('../fonts/OhnoBlazeface-14Point-4.html') format('truetype');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'Ohno Blazeface 12 Point';
  src: url('../fonts/OhnoBlazeface-18Point.html');
  src: local('Ohno Blazeface 18 Point'), local('OhnoBlazeface-18Point'),
    url('../fonts/OhnoBlazeface-18Pointd41d.html?#iefix') format('embedded-opentype'),
    url('../fonts/OhnoBlazeface-18Point-2.html') format('woff2'),
    url('../fonts/OhnoBlazeface-18Point-3.html') format('woff'),
    url('../fonts/OhnoBlazeface-18Point-4.html') format('truetype');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Ohno Blazeface 12 Point';
  src: url('../fonts/OhnoBlazeface-24Point.html');
  src: local('Ohno Blazeface 24 Point'), local('OhnoBlazeface-24Point'),
    url('../fonts/OhnoBlazeface-24Pointd41d.html?#iefix') format('embedded-opentype'),
    url('../fonts/OhnoBlazeface-24Point-2.html') format('woff2'),
    url('../fonts/OhnoBlazeface-24Point-3.html') format('woff'),
    url('../fonts/OhnoBlazeface-24Point-4.html') format('truetype');
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: 'Eckmannpsych Demo';
  src: url('../fonts/Eckmannpsych-Demo-Medium.html');
  src: url('../fonts/Eckmannpsych-Demo-Mediumd41d.html?#iefix') format('embedded-opentype'),
    url('../fonts/Eckmannpsych-Demo-Medium-2.html') format('woff2'),
    url('../fonts/Eckmannpsych-Demo-Medium-3.html') format('woff'),
    url('../fonts/Eckmannpsych-Demo-Medium-4.html') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}


@font-face {
  font-family: 'Chalet';
  src: url('../fonts/Chalet-ParisNineteenEighty.html') format('woff2'),
    url('../fonts/Chalet-ParisNineteenEighty-2.html') format('woff');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Chalet';
  src: url('../fonts/Chalet-NewYorkNineteenEighty.html') format('woff2'),
    url('../fonts/Chalet-NewYorkNineteenEighty-2.html') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Chalet';
  src: url('../fonts/Chalet-LondonNineteenEighty.html') format('woff2'),
    url('../fonts/Chalet-LondonNineteenEighty-2.html') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}


/* FINAL CUSTOM 2022 */
/************************************************************************************/

/*
noir = #000000
jaune = #FFFF00
rose = #FF00FF
vert = #00FF00
blanc = #FFFFFF
*/

/* GENERIQUES */
body {
  font-family: 'Chalet', sans-serif;
  color: #FFFFFF;
  color: #2100A8;
}

p {
  margin-bottom: 1.5rem;
}

a {
  color: #000000;
}

a:hover {
  color: #FFFFFF;
}

p a {
  text-decoration: none;
}

h1,
h2 {
  font-family: 'Swear Display', serif;
  font-weight: 900;
}

h3,
h4,
h5,
h6 {
  font-family: 'Swear Display', serif;
}

body,
.pure-g [class*=pure-u] {
  font-family: 'Swear Display', sans-serif;
  letter-spacing: 0.0em;
}

/* ELEMENTS */

.surnav {
  color: #000000;
  background-color: #FFFFFF;
  color: #11FA2C;
  background: #000000;
  color: #000000;
  background: #11FA2C;
}

.surnav-item {
  padding: 0;
}

.surnav-item a {
  color: #000000;
  padding: 0 5px;
  /*color: #11FA2C;*/
}

.surnav-item a:hover {
  color: #11FA2C;
  color: #FFFFFF;
}

.nav {
  color: #000000;
  background-color: #11FA2C;
  color: #11FA2C;
  background: #000000;
  color: #000000;
  background: #FFFFFF;
  /*color: #FFFFFF;
    background: #000000;*/
}

.nav .logo-small {
  width: 4rem;
  margin-top: -15px;
  position: absolute;
}

a.lien-logo:hover .logo {
  filter: none;
}

a.lien-logo:hover .logo.logo-cover {
  filter: invert(1) url(#fluo);
}

.nav-item:first-child {
  width: 4rem;
  border: none;
  box-shadow: none;
  margin-top: 0;
}

.nav-item:first-child:hover {
  background: none;
}

.nav-item {
  border: 2px solid black;
  -webkit-transform: skewX(-13deg);
  -moz-transform: skewX(-13deg);
  -ms-transform: skewX(-13deg);
  -o-transform: skewX(-13deg);
  transform: skewX(-13deg);
  margin: 0.62rem 0.5rem;
  padding: 0;
  box-shadow: 3px 3px black;
}

.nav-item:hover {
  background: black;
}

.nav-item a {
  color: inherit;
  font-family: unset;
  font-style: italic;
  font-weight: 900;
  text-transform: none;
  font-size: 1.4rem;
  line-height: 1rem;
  margin-top: -6px;
  padding: 0;
  -webkit-transform: skewX(13deg);
  -moz-transform: skewX(13deg);
  -ms-transform: skewX(13deg);
  -o-transform: skewX(13deg);
  transform: skewX(13deg);
  padding: 0.25rem 0.5rem;
}

.nav-item a:hover {
  color: inherit;
}

.nav-item a.lien-logo {
  display: block;
  height: 0rem;
  padding: 0;
  position: relative;
}


.sidebar {
  /*background-image: url('../images/infos2022b_inv.png');*/
  background-image: none;
  background-color: #11FA2C;
}

.image-infos-container {
  overflow: hidden;
  position: relative;
  height: 100%;
  width: 100%;
  background: #000;
}

.image-infos {
  max-width: unset;
  height: 100%;
  width: auto !important;
  position: absolute;
  left: 50%;
  -webkit-transform: translate(-50%, 0%);
  -ms-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
  /*background-image: linear-gradient(to bottom, rgba(240, 255, 40, 1) 0%, rgba(240, 255, 40, 1) 100%), linear-gradient(to bottom, rgba(240, 40, 40, 1) 0%, rgba(240, 40, 40, 1) 100%);
    background-clip: content-box, border-box;
    padding: 2px;*/
  /*border-left: 2px solid black;
    border-right: 2px solid black;*/
  padding: 2px;
  background-clip: content-box;
}

.image-infos-back {
  max-width: unset;
  height: 100%;
  width: auto !important;
  position: absolute;
  left: 50%;
  -webkit-transform: translate(-50%, 0%);
  -ms-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
  background: none;
  border-left: 3px solid black;
  border-right: 3px solid black;
}


.content {
  padding: 1.5rem 1rem;
  background: #11FA2C;
  color: #000000;
  /*background: #000000;
    color: #FFFFFF;*/
}

#calendrier h2 {
  display: none;
}

.calendrier-g,
a.artiste-title,
#pro a {
  background-color: #000000;
  color: #11FA2C;
  background: #FFFFFF;
  color: #000000;
  font-family: 'Swear Display', sans-serif;
  font-weight: 900;
  font-style: italic;
}

.calendrier-g:hover,
a.artiste-title:hover,
#pro a:hover {
  background-color: #000000;
  color: #FFFFFF;
  background: #000000;
  color: #11FA2C;
}

/* BORDER CALENDRIER
.calendrier-g {
    border: 2px solid #11FA2C;
    background-color: #000000;
    color: #11FA2C;
}

.calendrier-g:hover {
    border: 2px solid #11FA2C;
    background-color: #11FA2C;
    color: #000000;
}
*/

.lieu-calendrier,
.date-calendrier {
  color: unset;
  font-style: unset;
}

.prog-calendrier {
  font-weight: normal;
  font-family: unset;
  text-transform: unset;
  font-style: normal;
}

.grp-banner {
  top: 1px;
  background: #000000;
  color: #11FA2C;
  font-style: italic;
  background-image: url('../images/fondgrisbitmap_inv.html');

}

.grp-evenement .calendrier-g {
  background-image: url('../images/fondgrisbitmap.html');
}

.grp-evenement .calendrier-g:hover {
  background-image: none;
}

.titre-blason {
  width: 4rem;
}

.picto-soiree {
  width: 4rem !important;
  /*filter: invert(1);*/
}

.soiree {
  margin-top: 4.5rem;
}

.soiree h2 {
  font-family: 'Gotham', sans-serif;

}

.soiree h2 .date {
  font-size: 1rem;
  border: 2Px black solid;
  display: inline-block;
  padding: 0.25rem;
  box-shadow: 10px 10px black;
  margin-bottom: 0.75rem;
  line-height: 1rem;
}

.soiree h2 .lieu {
  font-family: 'Swear Display', serif;
  font-weight: 900;
  font-style: italic;
  font-size: 0.7em;
}

.sous-titre-soiree {
  margin-left: 5rem;
}

.sous-titre-soiree p {
  margin-top: -1.5rem;
}

.entete-exposition {
  background: #000000;
  color: #11FA2C;
  font-style: italic;
}

a.artiste-title {
  border-color: #11FA2C;
}

a.artiste-title small {
  font-style: normal;
  font-weight: normal;
  font-family: inherit;
}

.adresse a,
.tarif a,
.adresse a:hover,
.tarif a:hover {
  color: inherit;
  background: inherit;
  font-family: inherit;
}

.adresse,
.tarif {
  font-family: 'Gotham', sans-serif;
  background-color: #000000;
  color: #11FA2C;
  border-color: #11FA2C;
  background: #FFFFFF;
  color: #000000;
  /*border-color: #000000;*/
}

.adresse:hover,
.tarif:hover {
  background-color: #000000;
  color: #11FA2C;
}

#newsletter h2,
#partenaires h2,
#ailleurs h2,
#pro h2,
#basdepage h2,
#billetterie h2 {
  font-family: 'Gotham', sans-serif;
  font-size: 1rem;
  border: 2Px black solid;
  display: inline-block;
  padding: 0.25rem;
  box-shadow: 10px 10px black;
  margin-bottom: 0.75rem;
  line-height: 1rem;
}

#ailleurs {
  margin-bottom: 3rem;
}

#ailleurs h2 {
  display: none;
}

.image-container {
  width: 50%;
  margin: 0 auto;
}

#basdepage {
  margin-top: 3rem;
}

.date-calendrier .lieu {
  font-family: 'Swear Display', serif;
  font-weight: 900;
  font-style: italic;
  margin-top: -4px;
}

.ailleurs .mois {
  font-size: 0.9rem;
}

.modal-content {
  color: #000000;
  hyphens: auto;
  text-align: justify;
}

.modal-content h2 {
  font-family: unset;
  font-weight: 900;
  font-style: italic;
  padding-right: 2rem;
  text-transform: none;
}

.modal-content h2 small {
  font-family: inherit;
  font-style: normal;
  font-weight: normal;
  display: inline-block;
  line-height: 1rem;
}

.modal-content img {
  filter: grayscale(100);
  width: 100%;
  /* url(#posterize);*/
}

.modal-content h4 {
  font-family: 'Gotham', sans-serif;
  border: 3px solid black;
  box-shadow: 10px 10px black;
  padding: 0 0.75rem;
  color: unset;
  margin-bottom: 0.75rem;
}

.modal-content p a {
  font-family: 'Gotham', sans-serif;
  font-weight: bold;
  color: #000000;
  text-decoration: none;
}

.modal-content p a:after {
  font-family: 'FontAwesome';
  content: " \f08e";
  font-size: 0.9em;
}

.modal-content p a:hover {
  color: #000000;
  text-decoration: underline;
}

.close,
#backBtn {
  background: #000000;
  color: #11FA2C;
  border-color: #11FA2C;
}

.close:hover,
#backBtn:hover {
  border-color: #000000 !important;
  color: #000000 !important;
}

#billetterie {
  padding-top: 4.5rem;
}

.prog-holder {
  font-family: 'Swear Display', serif;
}

.jp-audio {
  color: black;
}

.jp-audio .jp-controls {
  left: 8.75rem;
}

.jp-audio .jp-controls a {
  color: black;
}

.jp-audio .jp-controls a:hover {
  color: white;
}

.jp-audio .jp-time-holder {
  left: 11rem;
  color: inherit;
}

#sonicSchedule h3,
#sonicReplay h3 {
  font-style: italic;
}

@media screen and (max-width: 47.9rem) {

  .nav-item {
    background: unset;
    font-weight: 900;
    font-style: italic;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
    border: none;
    border-bottom: 1px solid black;
    box-shadow: none;
    margin: 0;
    padding: 0;
    height: 3rem;
  }

  .nav-item a {
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
    line-height: 3rem;
  }

  .nav-item:first-child {
    width: 100%;
    padding: 0;
    margin: 0;
    border-bottom: 1px solid black;
  }

  .right {
    float: unset;
  }

  .main-h1 {
    padding-top: 0;
    line-height: 3rem;
  }

  .nav .hamburger {
    font-size: 1.5rem;
    line-height: 2.2rem;
    padding-right: 0.75rem;
  }

  .nav .hamburger-lien {
    color: inherit;
  }

  .nav .hamburger-lien:hover {
    color: inherit;
  }

  .sidebar {
    margin-top: 4.5rem;
  }

  .soiree {
    margin-bottom: 1.5rem;
  }

  .sous-titre-soiree {
    margin-left: 0;
    margin-top: 1.5rem;
  }

  .titre-blason {
    width: 100%
  }

  .picto-soiree {
    margin: 0 auto;
    display: block;
  }

  .jp-audio {
    background: yellow;
    border-color: black;
  }

  .jp-audio .jp-controls {
    left: 0;
  }

  .jp-audio .jp-time-holder {
    left: 3rem;
  }

  .image-infos {
    position: absolute;
    left: 50%;
    -webkit-transform: translate(-50%, 0%);
    -ms-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);
  }
}

@font-face {
  font-family: 'Swear Display';
  src: url('../fonts/SwearDisplay-BlackCilati.html') format('woff2'),
    url('../fonts/SwearDisplay-BlackCilati.woff') format('woff'),
    url('../fonts/SwearDisplay-BlackCilati.svg#SwearDisplay-BlackCilati') format('svg');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Swear Display';
  src: url('../fonts/SwearDisplay-Regular.html') format('woff2'),
    url('../fonts/SwearDisplay-Regular.woff') format('woff'),
    url('../fonts/SwearDisplay-Regular.svg#SwearDisplay-Regular') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gotham';
  src: url('../fonts/Gotham-Medium.html') format('woff2'),
    url('../fonts/Gotham-Medium.woff') format('woff'),
    url('../fonts/Gotham-Medium.svg#Gotham-Medium') format('svg');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}


/* FINAL CUSTOM 2023 */
/************************************************************************************/

/*
noir = #000000
moutard = #f4c235
jaune = #fff8b7
*/

/* FONTS */
.pure-g [class*=pure-u],

.surnav-item a,
.soiree h2 .lieu,
.prog-calendrier,
.soiree h2,
a.artiste-title,
a.artiste-title small,
.adresse,
.tarif,
#newsletter h2,
#partenaires h2,
#ailleurs h2,
#pro h2,
#basdepage h2,
#billetterie h2,
.modal-content p {
  font-family: 'sinistre', sans-serif;
  font-style: normal !important;
  font-weight: normal !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
body,
.calendrier-g,
.lieu-calendrier,
#pro a,
.soiree h2 .date,
.date-calendrier .lieu,
.prog-holder,
.modal-content h2,
.modal-content h4,
.modal-content p a {
  font-family: 'admiral', sans-serif;
  font-style: normal !important;
  font-weight: normal !important;

}

/* COLOR */

.nav {
  background: #000000;
}

.nav-item a {
  color: #fff8b7;
}

.calendrier-g,
a.artiste-title,
#pro a,
.adresse,
.tarif {
  /*background: #000000;
  color: #fff8b7;*/
  color: #000000;
  background: #fff8b7;
}

.modal-content {
  background: #fff8b7;
  color: #000000;
}

/* GENERIQUES */
h2 {
  text-transform: none;
}

hr {
  border: 0;
  margin: 0;
  height: 6px;
  background: transparent url(../images/barre12.png);
  background-size: auto 6px;
  margin-top: 9px;
  margin-bottom: 9px;

}




.header {
  height: 4.5rem;
}

/* SURNAV */
.surnav-list {
  padding-right: 0.75rem;
}

.surnav-item a {
  text-transform: none;
}

/* NAV */
.nav {
  box-shadow: none;
}

.nav-item {
  border: none;
  transform: none;
  box-shadow: none;
  height: 3rem;
  margin: 0;
  line-height: 3rem;
}

.nav-item:first-child {
  width: 3.75rem;
}

.nav-item a {
  font-weight: normal;
  transform: none;
  font-style: normal;
  font-weight: normal;
}

.nav-item a.lien-logo {
  transform: none;
}

.nav .logo-small {
  width: 3rem;
  filter: invert(1) url(#fluo);
  margin-top: 0px;
}

.nav .logo-small:hover,
a.lien-logo:hover .logo {
  filter: invert(1) url(#fluo);

}



/* IMAGE PRINCIPALE */

.image-infos-container {
  background: none;
}

.image-infos {
  max-width: 100%;
  top: 50%;
  height: unset;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

/* content droite */
.content h3,
.content h4,
.content h5 {
  font-size: 1.3em;
}

/* Calendrier résumé */

#calendrier {
  margin-left: -1rem;
  margin-right: -1rem;
  margin-top: -1.5rem;
}

.calendrier-g {
  padding-top: 1px;
  overflow: hidden;
}

a.lien-calendrier {
  padding: 0 0 1px 0;
  overflow: hidden;
}

.date-calendrier {
  position: relative;
}

.date-calendrier.petit {
  width: 4.25rem;
}

.date-calendrier.petit.petit2 {
  width: 7rem;
}

.date-calendrier .date {
  font-size: 3rem;
  width: 3.5rem;
  padding: 0;
  line-height: 2rem;
  margin-top: -1px;
  text-align: right;
}

.date-calendrier.petit .date {
  font-size: 2.5rem;
  width: 3rem;
}

.date-calendrier.petit.petit2 .date {
  width: 4.5rem;
}

.date-calendrier.petit .date span {
  /*font-size: 0.8em;*/
}

.date-calendrier.petit .mois {
  width: 1rem;
  font-size: 1rem;
}

.date-calendrier.petit2 .mois {
  width: 2.25rem;
}

.date-calendrier .mois {
  font-size: 1.1rem;
  margin-top: 0;
  position: absolute;
  width: 2.25rem;
  height: 100%;
  writing-mode: tb-rl;
  transform: rotate(-180deg);
  right: 0;
  top: 1px;
  bottom: 0;
}

.prog-calendrier {
  font-size: 1.2em;
}

.banner {
  color: #000000 !important;
  padding: 6px 8px;
  top: 0px;
  right: -24px;
  font-family: inherit;
  line-height: 0.8em;
  width: 80px;
}


/* Listing soirée */
.liste-artistes {
  text-align: center;
  margin-left: -1rem;
  margin-right: -1rem;
}

.soiree {
  margin-top: 3rem;
}

.soiree h2 {
  text-align: center;
}

.soiree h2 .date {
  border: none;
  box-shadow: none;
  padding: 0;
  font-size: 1.9rem;
  /*text-transform: lowercase;*/
  display: block;
  margin-bottom: 4px;
  line-height: 1.5rem;
}

.soiree h2 .lieu {
  display: inline-block;
  margin-top: 0px;
  line-height: 1.5rem;
}

.soiree h2 .lieu hr {}



.titre-soiree {
  width: 100%;
}

.titre-texte {
  padding-left: 0;
}

.titre-blason {
  /*width: auto;
  height: 4rem !important;
  text-align: right;*/
  width: 100%;
  height: 6rem !important;
  text-align: center;
  display: block;
}

.picto-soiree {
  /*width: auto;
  height: 4rem !important;*/
  width: auto !important;
  height: 6rem !important;
  margin-top: 0;
  margin-right: 0;
}

.sous-titre-soiree {
  margin-left: 0rem;
}

.sous-titre-soiree p {
  text-align: center;
  margin-top: -2.25rem;
}

a.artiste-title {
  font-size: 1.3rem;
}

a.artiste-title small {
  font-size: 1rem;
}

.entete-exposition p {
  font-style: normal;
}

.soiree .pure-g {
  margin-left: -1rem;
  margin-right: -1rem;
}

.tarif a,
.adresse a {
  padding-left: 1rem;
}

.tarif a::before,
.adresse a::before {
  display: none;
}

/* BAS DE PAGE */

#newsletter h2,
#partenaires h2,
#ailleurs h2,
#pro h2,
#basdepage h2,
#billetterie h2 {
  border: none;
  box-shadow: none;
  padding: 9px 0;
  font-size: 1.8em;
}

#newsletter h2:before,
#partenaires h2:before,
#ailleurs h2:before,
#pro h2:before,
#basdepage h2:before,
#billetterie h2:before {
  height: 6px;
  background: transparent url('../images/barre12.png');
  background-size: auto 6px;
  content: '.';
  display: block;
  color: transparent;
  margin-bottom: 9px;
}

#newsletter h2:after,
#partenaires h2:after,
#ailleurs h2:after,
#pro h2:after,
#basdepage h2:after,
#billetterie h2:after {
  height: 6px;
  background: transparent url('../images/barre12.png');
  background-size: auto 6px;
  content: '.';
  display: block;
  color: transparent;
  margin-top: 9px;
}

.image-container {
  width: 60%;
}

#ailleurs h2 {
  display: none;
}

.ailleurs .date-calendrier .mois {
  margin-top: -5px;
  position: static;
  width: 6rem;
  height: unset;
  writing-mode: inherit;
  transform: none;
}

#ailleurs p {
  text-align: center;
}

/* MODAL ARTISTE */
.modal-content h2 {
  padding-top: 2.25rem;
  transform: rotateZ(-5deg);
  transform-origin: top left;
  padding-right: 2.25rem;
}

.rotate-outer {}

.rotate-inner {}

.modal-content h4 {
  border: none;
  box-shadow: none;
  padding: 0;
  font-size: 1.3em;
}

.modal-content h4:after {
  height: 6px;
  background: transparent url('../images/barre12.png');
  background-size: auto 6px;
  content: '.';
  display: block;
  color: transparent;
}

.modal-content img {
  filter: grayscale(100) contrast(1.5);
}

.modal-content img.nofiltre {
  filter: grayscale(100);
}

.modal-content p a {
  font-size: 0.88rem;
}

.modal-content a:hover {
  color: #000;
  text-decoration: underline;
}


/* programme & archive */
#sonicSchedule,
#sonicReplay {
  margin-left: -1rem;
  margin-right: -1rem;
}

#sonicSchedule h3,
#sonicReplay h3 {
  text-align: center;
  border-bottom: 1px solid;
  margin-top: 1.5rem;
}



.modal-content #sonicSchedule tr,
.modal-content #sonicReplay tr {
  //line-height: inherit !important;
  transition: 0.5s;
  width: 100%;
  border-bottom: 1px solid;
  border-top: none;
}

  {
  padding-left: 1rem;
}


.modal-content #sonicSchedule td,
.modal-content #sonicReplay td {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

#sonicSchedule table,
#sonicReplay table {
  font-size: inherit;
}

.replay_url {
  //border-bottom: 1px solid transparent;
  display: block;
}

.replay_url table {
  width: 100%
}

.replay_url tr {
  width: 100%;
  transition: 0.5s;
}

a.replay_url:hover {
  text-decoration: none;
}

.replay_url:hover tr {
  background: black;
}

.replay_url td {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

#sonicReplay .replay_player_button,
#sonicSchedule .pnode_time {
  padding-left: 1rem;
}

.modal-content #sonicReplay td.replay_player_button {
  padding-top: 10px;
  padding-bottom: 0;
}

.modal-content #sonicReplay td.replay_player_button svg {
  width: 0.75rem;
}

.replay-btn__icon {
  transition: 0.5s;
}

#sonicReplay .pnode_time,
#sonicSchedule .pnode_time {
  text-align: right;
}


.replay_player_button {
  width: 1.5rem;
  vertical-align: top;
}

.replay_player_button i {
  //font-size: 2rem;
}

.replay_player_button i,
.replay_player_button i:before {
  line-height: 1rem !important;
  height: 1rem !important;
}

#sonicSchedule .pnode_time {
  width: 8.25rem;

}

.retour_direct {
  //height: 0;
  display: none;
  overflow: hidden;
  position: fixed;
  right: 3.5rem;
  bottom: 1.35rem;
  background: #000;
  line-height: 1rem;
  padding-bottom: 0.1rem;
  padding-left: 0.75rem;
}

.pnode_program_name {
  text-transform: none;
  padding-right: 1rem;
  padding-left: 0.2rem;
}

.pnode_time {
  width: 6.5rem;
  vertical-align: top;
}

#sonicSchedule {
  padding: 0;
}


/* RADIO */
#pnodestream {
  bottom: 0;
  top: unset;
  right: 0;
  height: 3rem;
  //display: none;
  z-index: 1000;
  background: #000000;
  box-shadow: none;
  /*box-shadow: 0 -6px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 20%);*/
}

.head_pnodestream {
  background: transparent;
  height: 1.5rem;
  line-height: 1.5rem;
  margin-left: 3rem;
  padding-left: 0;
  font-size: 0.8rem;
  padding-top: 0.25rem;
  cursor: pointer;
  padding-right: 6.5rem;
  overflow: hidden;
  word-break: break-all;
}

.info-radio {
  cursor: pointer;
}

#title-radio {
  margin-left: 0.75rem;
  font-size: 1rem;
  display: inline-block;
}

#title-radio i {
  vertical-align: middle;
  margin-bottom: 7px;
}

.green-audio-player {
  width: 100%;
  background: transparent;
  height: 1.5rem;
  border-radius: 0;
  position: fixed;
  bottom: 0;
  padding-left: 0.75rem;
  padding-right: 1rem;
}

.green-audio-player img,
.green-audio-player svg {
  width: 1.75rem;
  height: 1.5rem;
  margin-bottom: 1.35rem;
}

.green-audio-player .holder .loading .loading__spinner {
  width: 1.5rem;
  height: 1.5rem;
  bottom: 1.5rem;
}

.green-audio-player img,
.green-audio-player svg path {
  fill: #000000;
}

.green-audio-player .volume .volume__button.open path {
  fill: #f4c132;
}

.green-audio-player .controls {
  font-family: inherit;
  color: inherit;
  margin-left: 0.5rem;
  font-size: 0.8rem;
  margin-bottom: 0.25rem;
}

.green-audio-player .controls .controls__title {
  width: 100%;
  line-height: 1.5rem;
}

#pnodecurrent {
  width: 100%;
  position: relative;
  cursor: pointer;
  //margin-bottom: 0.25rem;
}

.green-audio-player .controls .controls__slider,
.green-audio-player .controls .controls__current-time,
.green-audio-player .controls .controls__total-time {
  display: none;
}

.green-audio-player .controls .controls__current-time {
  width: 40px;
}

.green-audio-player .volume .volume__controls {
  border-radius: 0;
}

.green-audio-player .volume .volume__controls.top {
  bottom: 68px;
  left: 1px;
}

.green-audio-player .slider .gap-progress,
.green-audio-player .slider .gap-progress .pin {
  background-color: #f4c132;
}

/* DESKTOP */
@media screen and (min-width: 48rem) {

  /* SCROLLBAR */
  body {
    overflow: hidden;
    height: 100vh;
  }

  /* Works on Firefox */


  /* Works on Chrome, Edge, and Safari */
  ::-webkit-scrollbar {
    width: 0.75rem;
  }

  ::-webkit-scrollbar-track {
    background: #00000022;
  }

  ::-webkit-scrollbar-thumb {
    background-color: #000000;
    border-radius: 0px;
    border: none;
    border-top: 1px solid #f4c13299;
    border-bottom: 1px solid #f4c13299;
  }

  ::-webkit-scrollbar-thumb:hover {
    background-color: #000000;
  }

  ::-webkit-scrollbar-thumb:vertical {
    height: 9rem;
  }


  .right-col .scroll-container {
    overflow-y: scroll;
    scrollbar-gutter: stable;
    height: 100vh;
    height: calc(100vh - 4.5rem);
    margin-top: 0;
    padding-bottom: 4.5rem;
    scrollbar-width: thin;
    scrollbar-color: #000000 #00000022;
  }

  .billet-scroll-container {
    overflow-y: scroll;
    scrollbar-gutter: stable;
    height: 100vh;
    height: calc(100vh - 4.5rem);
    margin-top: 4.5rem;
    padding-bottom: 4.5rem;
    scrollbar-width: thin;
    scrollbar-color: #000000 #00000022;
  }

  #billetterie {
    padding-top: 0;
  }

  .modal-content {
    padding-right: 0;
    padding-top: 4.5rem;
    border-right: 1px solid;
    padding-left: 0;
  }

  .modal-content-scroll {
    overflow-y: auto;
    scrollbar-gutter: stable;
    height: 100vh;
    height: calc(100vh - 4.5rem);
    margin-top: 0;
    padding-bottom: 4.5rem;
    scrollbar-width: thin;
    scrollbar-color: #000000 #00000022;
    padding-right: 1rem;
    padding-left: 1rem;
    padding-top: 1.5rem;
  }

  .modal-content-scroll::-webkit-scrollbar-thumb {
    /*background-color: #f4c235;*/
  }

  .modal-content-scroll::-webkit-scrollbar-thumb:vertical {
    height: 4.5rem;
  }

  .close {
    right: 1.75rem;
  }

  .right-col {
    /*    margin-top: 4.5rem;*/
  }
}

/* PHONE */
@media screen and (max-width: 47.9rem) {
  .main-h1 {
    display: none;
  }

  .nav .logo {
    display: block;
    padding-top: 2px;
  }

  .nav-item a {
    padding: 0;
    width: 100%;
    border-top: 1px solid;
  }

  .picto-soiree {
    margin: 0;
    display: inline;
  }

  .head_pnodestream {
    padding-right: 4rem;
  }

  .green-audio-player .volume {
    display: none;
  }

  .retour_direct {
    display: none !important;
  }
}


@font-face {
  font-family: 'admiral';
  src: url('../fonts/AdmiralCAT.html') format('woff2'),
    url('../fonts/AdmiralCAT.woff') format('woff'),
    url('../fonts/AdmiralCAT.svg#AdmiralCAT') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'sinistre';
  src: url('../fonts/Sinistre-SCaroline.html') format('woff2'),
    url('../fonts/Sinistre-SCaroline.woff') format('woff'),
    url('../fonts/Sinistre-SCaroline.svg#Sinistre-S?Caroline') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}


/* FINAL CUSTOM 2024 */
/************************************************************************************/

/*

*/



/* FONTS */

@font-face {
  font-family: 'Halyard';
  src: url("../fonts/Halyard.eot");
  src: url("../fonts/Halyardd41d.eot?#iefix")format("embedded-opentype"),
    url("../fonts/Halyard.woff")format("woff"),
    url("../fonts/Halyard.html")format("woff2"),
    url("../fonts/Halyard.ttf")format("truetype"),
    url("../fonts/Halyard.svg#Halyard Display")format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'Messapia';
  src: url('../fonts/Messapia-Bold.eot');
  src: url('../fonts/Messapia-Boldd41d.eot?#iefix') format('embedded-opentype'),
    url('../fonts/Messapia-Bold.html') format('woff2'),
    url('../fonts/Messapia-Bold.woff') format('woff'),
    url('fonts/Messapia-Bold.html#Messapia-Bold') format('svg');
  font-weight: bold;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'Messapia';
  src: url('../fonts/Messapia-Regular.eot');
  src: url('../fonts/Messapia-Regulard41d.eot?#iefix') format('embedded-opentype'),
    url('../fonts/Messapia-Regular.html') format('woff2'),
    url('../fonts/Messapia-Regular.woff') format('woff'),
    url('../fonts/Messapia-Regular.svg#Messapia-Regular') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'Oddity';
  src: url('../fonts/Oddity-Script.eot');
  src: url('../fonts/Oddity-Scriptd41d.eot?#iefix') format('embedded-opentype'),
    url('../fonts/Oddity-Script.html') format('woff2'),
    url('../fonts/Oddity-Script.woff') format('woff'),
    url('../fonts/Oddity-Script.svg#Oddity-Script') format('svg');
  font-weight: normal;
  font-style: italic;
  font-display: block;
}

/* Apply fonts */
/* -------------------------------------------------------- */

*,
html {
  letter-spacing: 0 !important;
}

.pure-g [class*=pure-u],
.soiree h2,
.date-calendrier .mois,
.lieu-calendrier,
.adresse,
.tarif,
.modal-content p,
.modal-content p a,
.nan,
.nav-item a,
.soiree h2 .lieu,
.banner,
.head_pnodestream .replay_title {
  font-family: 'Halyard', sans-serif;
  font-style: normal !important;
  font-weight: normal !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
body,
.calendrier-g,
#pro a,
.soiree h2 .date,
.date-calendrier .lieu,
.prog-holder,
.modal-content h2 {
  font-family: 'Oddity', sans-serif;
  font-style: italic !important;
  font-weight: normal !important;
}

.prog-calendrier,
.surnav-item a,
a.artiste-title,
a.artiste-title small,
.modal-content h3,
.modal-content h4,
#newsletter h2,
#partenaires h2,
#ailleurs h2,
#pro h2,
#basdepage h2,
#billetterie h2,
.content h3,
.content h4,
.content h5,
.grp-banner,
.head_pnodestream,
.modal-content h2 small {
  font-family: 'Messapia', sans-serif;
  font-style: normal !important;
  font-weight: bold !important;
  letter-spacing: 0 !important;
}

/* Font size */

.nav-item a {
  font-size: 1.3888rem;
}

.date-calendrier .date {
  font-size: 2.7777778rem;
}

.date-calendrier .mois {
  font-size: 0.888888rem;
}

.date-calendrier.petit .mois {
  font-size: 0.9em;
}

.lieu-calendrier {
  font-size: 0.888888rem;
}

.prog-calendrier {
  font-size: 0.777778rem;
}

.soiree h2 .date {
  font-size: 2.7777778rem;
}

.soiree h2 .lieu {
  font-size: 1.25rem;
}

.sous-titre-soiree p {
  font-size: 0.777778rem;
}

a.artiste-title,
a.artiste-title small {
  font-size: 0.888888rem;
}

.content h2 {
  font-size: 0.888888rem;
}

.content h3,
.content h4,
.content h5 {
  font-size: 0.888888rem;
}

#newsletter h2:before,
#partenaires h2:before,
#ailleurs h2:before,
#pro h2:before,
#basdepage h2:before,
#billetterie h2:before {
  display: none;
}

.modal-content h2 {
  font-size: 2.777778rem;
}

.modal-content h3,
.modal-content h4 {
  font-size: 0.888888rem;
}

.modal-content p,
.modal-content p a {
  font-size: 0.777778rem;
}





/* COLORS */
/* -------------------------------------------------------- */
:root {
  --main-color: #000;
  --second-color: #FFF;
}

:root {
  color-scheme: normal !important;
}

/*
jaune : #ffdf43
rose : #f3b8d5
vert : #b3d389
*/

.main-content {
  background: linear-gradient(0deg, #b3d389, #d3c4b9 12%, #f3b8d5 20%, #fcc989 87%, #ffdf43);
}

.surnav,
.content,
image-infos,
.sidebar {
  background: none;
}

/* MAIN COLOR BLACK */


.jp-audio,
.close:hover,
. #backBtn:hover,
.banner,
.green-audio-player .slider .gap-progress,
.green-audio-player .slider .gap-progress .pin,
.green-audio-player .slider {
  background-color: var(--main-color, black);
}

.nav .hamburger,
.nav-item a,
.head_pnodestream,
#pnodecurrent,
.head_pnodestream a,

nav-item a:hover,
.calendrier-g:hover,
.grp-banner,
a.artiste-title:hover,
#pro a:hover,
.adresse:hover,
.tarif:hover,
.head_pnodestream a:hover,
.nav-item a:active,
.nav-item a:focus,
.modal-content a:hover,
.head_pnodestream:hover,
#pnodecurrent:hover,
.replay_url:hover tr,
.green-audio-player .controls .controls__current-time,
.green-audio-player .controls .controls__total-time,
a.retour_direct {
  color: var(--main-color, black);
}





.entete-exposition,
  {
  border-color: var(--main-color, black);
  color: var(--main-color, black);
}

}

::-webkit-scrollbar-thumb,
  {
  border-color: var(--main-color, black);
}

.nav .logo-small,
.nav .logo-small:hover,
a.lien-logo:hover .logo {
  filter: none;
}



.green-audio-player img,
.green-audio-player svg path,
.green-audio-player .volume .volume__button.open path,
.replay_url:hover tr .replay-btn__icon {
  fill: var(--main-color, black);
}

/* SECOND COLOR */

.banner,
.surnav-item a:hover,
.green-audio-player .controls .controls__slider,
a:hover,
.modal-content p a:hover {
  color: var(--second-color, white);
}

.close,
#backBtn {
  color: var(--second-color, white);
  border-color: var(--second-color, white);
}

.nav,
.calendrier-g,
a.artiste-title,
#pro a,
.adresse,
.tarif,
.modal-content-scroll,
.replay_url tr,
a.retour_direct {
  background-color: var(--second-color, white);
}


.green-audio-player img:hover,
.green-audio-player svg path:hover,
.green-audio-player .volume .volume__button.open path:hover {
  fill: var(--second-color, white);
}

.modal-content-scroll {
  border-color: white;
}

/* Transparent */

.calendrier-g:hover,
a.artiste-title:hover,
.adresse:hover,
.tarif:hover,
.nav-item:hover,
.liste-artistes,
.grp-evenement .calendrier-g:hover,
.modal-content,
.replay_url:hover tr {
  background-color: transparent;
}

a.artiste-title,
.adresse,
.tarif,
.artiste-title,
.modal-content {
  border-color: transparent;
}

.modal-content #sonicSchedule tr,
.modal-content #sonicReplay tr,
#sonicSchedule h3,
#sonicReplay h3 {
  border-color: transparent;
}


/* DIVERS MISE EN PAGE + COULEURS */
/* -------------------------------------------------------- */

*,
html {
  scroll-behavior: smooth !important;
}


p a {
  text-decoration: underline;
}

.surnav {
  display: none;
}

.header {
  height: 3rem;
}

.nav {
  border-bottom: 1px solid #fedf43;
}

.nav .logo.sm {
  display: none;
}

.nav .logo.notsm {
  display: block;
}

.nav .logo-small {
  width: 50px;
  margin-top: -1px;
}

.nav-item:first-child {
  width: 3.25rem;
}

.nav-item a {
  text-transform: lowercase;
  letter-spacing: 0;
  padding: 0.25rem 0.37rem;
}

.nav-item a:hover {
  color: #fdd467;
}

.image-infos {
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
}

.sidebar {
  top: 3rem;
}

.listing-calendrier {
  padding-top: 7px;
  padding-bottom: 10px;
}

.date-calendrier .date {
  width: 4rem;
  margin-top: 2px;
}

.date-calendrier .mois {
  transform: rotateZ(205deg);
  transform-origin: center;
  width: 2rem;
  top: 3px;
}

.date-calendrier.petit {
  width: 4.25rem;
}

.date-calendrier.petit .date {
  font-size: 2.25rem;
}

.date-calendrier.petit .mois {
  font-size: 0.8rem;
}

.date-calendrier.petit.petit2 {
  width: 5rem;
}

.date-calendrier.petit .date {
  width: 3.25rem;
}

.date-calendrier.petit.petit2 .date {
  width: 3.75rem;
  margin-left: -2px;
}

.date-calendrier.petit .mois {
  width: 1rem;
  top: 1px;
}

.date-calendrier.petit2 .mois {
  width: 1.5rem;
  top: 3px;
}

.banner {
  font-family: 'Halyard', serif;
  background: #fedb4e;
  color: white !important;
  background: black;
  padding: 7px 8px;
  top: 2px;
  right: -26px;
  line-height: 0.85em;
  width: 88px;
}

.calendrier-h:hover .banner {
  background: transparent;
}

/* grp calendrier */
.grp-evenement {
  padding-right: 0;
}



.grp-evenement .calendrier-g {
  background-color: rgba(255, 255, 255, 0.8);
}

.grp-evenement .calendrier-g.haut {
  clip-path: polygon(0.75rem 0, calc(100% - 0.75rem) 0, 100% 0.75rem, 100% 100%, 0 100%, 0 0.75rem);
}

.grp-evenement .calendrier-g.bas {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 0.75rem), calc(100% - 0.75rem) 100%, 0.75rem 100%, 0 calc(100% - 0.75rem));
}

.grp-evenement .date,
.grp-evenement .mois {
  //color: #f7c0b1;
}

.grp-banner {
  color: black;
  font-style: normal;
  background-image: none;
  background-color: transparent;
  letter-spacing: 1px !important;
  display: none;
}

.titre-soiree {
  margin-bottom: 0;
}

.soiree h2 {
  margin-bottom: 25px;
  margin-top: -12px;
}

.soiree h2 .date {
  line-height: 2.5rem;
  display: block;
  margin-bottom: 6px;
}

.lieu-calendrier {
  padding-top: 0px;
  line-height: 1.1rem;
}

.prog-calendrier {
  padding-top: 2px;
  line-height: 20px;
}

.soiree h2 .lieu {
  display: block;
  line-height: 1.25rem;
  margin-top: -5px;
}

.sous-titre-soiree {
  margin-top: 5px;
  padding-bottom: 2px;
}

.sous-titre-soiree p {
  margin-top: -1.5rem;
}

a.artiste-title,
.artiste-title,
.adresse,
.tarif {
  border-bottom: 0px;
  margin-bottom: 1px;
  border: 0;
}

.pure-u-sm-1-2.border-right,
.pure-u-sm-1-2.border-right {
  border-right: 1px solid transparent;
}

.pure-u-1.border-top {
  border-top: 1px solid transparent;
}

.adresse2 {
  border-top: 0;
  margin-bottom: 0;
  margin-top: 1px;
}

.adresse,
.tarif {
  transition: background-color 0.33s;
}


#ailleurs .lien-calendrier {
  margin-left: -1rem;
  margin-right: -1rem;
}

.ailleurs .date-calendrier {
  width: 8rem;
}

.ailleurs .date-calendrier .lieu {
  font-size: 1.4rem;
  margin-top: -9px;
}

.ailleurs .date-calendrier .mois {
  width: 8rem;
  margin-top: -2px;

}

#newsletter .border-right {
  border-right: 1px solid transparent;
}

a.contact::after {
  content: none;
}

a.contact:hover {
  padding-left: 1rem;
  padding-right: 1rem;
}

.modal-content a {
  text-decoration: underline;
}

.modal-content h2 {
  transform: unset;
  padding-top: 0;

}

.modal-content h2.capitalize {
  text-transform: capitalize;
}

.close-container {
  top: 4.5rem;
}

.close:hover {
  background: #fdca8b;
}

.img-artiste-container {
  position: relative;
  overflow: hidden;
}

.modal-content .img {
  filter: none;
}

.modal-content .img-artiste {
  filter: grayscale(100) brightness(1.15) contrast(1.0);
  //mix-blend-mode: multiply;
}

.modal-content .replay_url {
  text-decoration: none;
}

.head_pnodestream:hover,
a.retour_direct:hover {
  color: #C0cD98;
}

.green-audio-player .slider .gap-progress,
.green-audio-player .slider .gap-progress .pin {
  background-color: #000000;
}

.green-audio-player .slider .gap-progress .pin:hover {
  background-color: #C0cD98;
}


/*
.modal-content .img-artiste::before {
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 100%;
  opacity: 1;
  filter: url(#noiseFilter);
  mix-blend-mode: multiply;
  background: #000;
}*/

.img-artiste-filter {

  /*filter: url(#noiseFilter) grayscale(100);
  mix-blend-mode: overlay;*/
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  //background: white;
  opacity: 0.15;
}

.modal-content p a {
  text-decoration: underline;
}

.modal-content p a::after {
  display: none;
}

.modal-content #sonicSchedule td {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

#pnodestream {
  //bottom: 1.5rem;
  background: #FFF;
  border-top: 1px solid #c0ce98;
}

.head_pnodestream {
  //text-transform: lowercase;
}

.green-audio-player img:hover,
.green-audio-player svg path:hover,
.green-audio-player .play-pause-btn:hover svg path,
.green-audio-player .volume__button:hover svg path,
.green-audio-player .volume .volume__button.open path:hover {
  fill: #C0cD98;
}

/* test color */
.modal-content-scroll {
  background: transparent;
}

.modal-content {
  background: linear-gradient(0deg, #b3d389, #d3c4b9 12%, #f3b8d5 20%, #fcc989 87%, #ffdf43);
}

.close,
#backBtn {
  color: black;
  background-color: white;
  border-color: transparent;
}

.close:hover,
#backBtn:hover {
  color: #fdca8b !important;
  border-color: transparent !important;
  background-color: white !important;
}




@media screen and (min-width: 48rem) {

  .main-content {
    position: fixed;
    top: 3rem;
    left: 0;
    bottom: 0;
    right: 0;
    overflow-y: hidden;
  }

  .modular .main-content {
    bottom: 3rem;
  }

  .right-col {
    margin-top: 0;
  }

  .scroll-container {
    height: calc(100vh - 3rem);
    overflow-y: scroll;
  }

  .pure-u-1.fullwidth {
    margin-left: 0;
    margin-top: 3rem;
    position: fixed;
    top: 0;
    left: 0;
    margin-bottom: 0;
    right: 0;
  }

  .content {
    border-right: 1px solid transparent;
  }

  .liste-artistes.newsletter div:nth-child(3n+3),
  .liste-artistes.newsletter div:nth-child(2n+1),
  .liste-artistes.newsletter div:nth-child(3n+1),
  .liste-artistes.newsletter div:nth-child(2n+2),
  .liste-artistes.newsletter div:nth-child(3n+2) {
    padding-left: 0;
    padding-right: 0;
  }

  .modal-content {
    border-right: none;
    padding-top: 3rem;
  }

  .modal-content-scroll {
    border-right: 1px solid white;
  }

  ::-webkit-scrollbar-thumb {
    background-color: #FFF;
    border: none;
  }


  @-moz-document url-prefix() {
    .close {
      right: 1.05rem;
      ;
    }
  }

  #billetterie .soiree {
    padding-top: 0rem;
  }

  .billet-scroll-container {
    //margin-top: 0;
    //padding-top: 4.5rem;
  }



}

@media screen and (max-width: 47.9rem) {

  .surnav {
    background: #fedc4a;
  }



  .nav-item:first-child {
    width: 100%;
    border-bottom: none;
    padding-right: 3rem;
  }

  .nav .logo-small {
    margin-top: 2px;
  }

  .nav .logo.sm {
    display: inline-block;
  }

  .nav .logo.notsm {
    display: none;

  }



  .nav-item a {
    margin-top: 0;
    padding: 0;
  }

  .main-content {
    position: fixed;
    top: 3rem;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: scroll;
  }

  .modular .main-content {
    bottom: 3rem;
  }

  .sous-titre-soiree {
    margin-top: 1.5rem;
  }

  .pure-u-sm-1-2.border-right,
  .pure-u-sm-1-2.border-right {
    border-right: none;
    border-bottom: 1px solid transparent;
  }

  .newsletter.liste-artistes div {
    padding: 0;
  }

  .sidebar {
    margin-top: 0rem;
  }

  #billetterie {
    padding-top: 1.5rem;
  }

  .green-audio-player {
    padding-right: 0.25rem;
  }

}