html, body {
  height: 100%;
}

body {
  display: flex;  /*propriété qui permet d'étendre ou réduire le contenu de la page sans que le footer remonte*/
  flex-direction: column;
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: rgba(58, 52, 41, 1);
  background-image: url(images/stardust.png);
}



/*CONTENU DES PAGES*/

.page-content {
  position: relative;
  background: white;
  flex: 1 0 auto;
  padding: 30px 80px 80px 80px;
  margin-top: 0px;
  width: 900px;
  max-width: 100%;
  margin-right: auto;
  margin-left: auto;
  text-align: justify;
  font-size: 12pt;
  line-height: 1.7;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
}


@media all and (max-width: 690px) {
  .page-content { 
    padding: 30px 15px 80px 15px;
  }
}


.transparent {
  background: transparent;
  padding: 0 0 20px 0;
}


strong {
  font-weight: 400;
}

h1 { 
  font-size: 30pt;
  color: rgba(58, 52, 41, 1);
  font-family: 'Abel', sans-serif;
  font-weight: normal; 
  margin-top: 40px;
  margin-bottom: 40px;
  padding: 0;
  text-align: center;
  letter-spacing: 1px;
  line-height: 1;
}

h2 { 
  font-size: 26pt;
  color: rgba(58, 52, 41, 1);
  font-family: 'Abel', sans-serif; 
  font-weight: normal; 
  text-transform: uppercase;
  margin-bottom: 20px;
  margin-top: 60px;
  text-align: center;
  text-decoration: none;
  letter-spacing: 1px;
  line-height: 1.2;
}

h3 {
  font-size: 22pt;
  color: rgba(58, 52, 41, 1);
  font-weight: normal;
  font-family: 'Abel', sans-serif; 
  margin-bottom: 20px;
  margin-top: 50px;
  line-height: 1;
  border-left: 14px solid rgba(112, 171, 143, 1);
  padding: 2px 0 0 8px;
  text-align: left;
}



h4 {
  font-size: 18pt;
  color: rgba(58, 52, 41, 1);
  font-family: 'Abel', sans-serif;
  font-weight: normal;
  margin-bottom: 10px;
  margin-top: 30px;
  line-height: 1;
  text-align: left;
}

h4:before {
  content: "—";
  margin-right: 5px;
}

.post-list > li > h4:before {
  content: "";
  margin-right: 0px;
}

h5 {
  font-size: 15pt;
  color: rgba(58, 52, 41, 1);
  font-family: 'Abel', sans-serif;
  font-weight: normal;
  margin-bottom: 10px;
  margin-top: 20px;
  line-height: 1.2;
}

a { /*style des liens*/
  color: inherit;
  text-decoration: underline;
}

a:hover { /*style des liens pointés*/
  color: rgba(112, 171, 143, 1);
}

h1 > a, h2 > a, h3 > a, h4 > a {
  color: inherit;
  text-decoration: none;
}

p {
  margin-bottom: 5px;
  margin-top: 8px;
}

img {
  max-width: 100%;
}

.image-centre {  /*si tu veux que ton image soit centrée, donne lui la class image-centre, sinon elle s'aligne au paragraphe*/
  text-align: center;
}

.image-affiche {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

.video-caption,
.image-caption { /*légende sous les vidéos ou images*/
  font-size: 11pt;
  text-align: center;
}

blockquote {
  font-size: 11pt;
}

@media all and (max-width: 600px) {
  blockquote { 
    margin-right: 0;
    margin-left: 15px;
  }
}

/*tableau : apparait dans extrait de texte Na !*/

table {
  overflow-x: auto; /*scrollable content*/
  display: block;
  margin-left: 40px;
  font-size: 11pt;
}

td {
  padding-right: 20px;
}

@media all and (max-width: 557px) {
  table { 
    font-size : 10pt;
    margin-left : 5px;
  }
  td {
  padding-right: 2px;
  }
}

/*youtube embeded video - iframe*/

.video-wrap-wrap {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}


.video-wrap {
  position: relative;
  max-width: 100%;
  padding-bottom: 56.25%; 
  height: 0;
}

.video-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}



/*bouton retour en haut de page*/

.back-to-top-btn {
  position: fixed;
  display: none;
  bottom : 20px; 
  right: 1%;
}

#back-to-top { /*couleur de l'image svg*/
  fill: rgba(112, 171, 143, .8);
  stroke: rgba(112, 171, 143, .8);
}

.back-to-top-btn:hover #back-to-top {
  fill: rgba(112, 171, 143, .6);
  stroke: rgba(112, 171, 143, .6);
}

/*liens découvrir en page de présentation de la cie*/

.lien-decouvrir {
  font-weight: 400;
  color: rgba(112, 171, 143, 1);
  text-decoration: none;
}


.lien-decouvrir > li > a {
  text-decoration: none;
}

.lien-decouvrir > li > a:hover {
  text-decoration: underline;
}

/*NOTE pour infini dehors*/
.asterix {
  color: rgba(112, 171, 143, 1);
  font-style: normal;
}

.asterix:hover:after {
  position: absolute;
  left: 20%;
  right: 20%;
  display: block;
  background: white; 
  border: 1px solid  rgba(112, 171, 143, 1);
  padding: 10px;
  line-height: 1.3;
  font-size: 9pt;
  content: "Inspiré d'un texte d'Antonin Artaud, ce nom exprime le projet que se donne la compagnie. Creuser la possibilité d'un meilleur vivre ensemble. Recréer l'optimisme. Regarder vers l'infini dehors.";
  color: rgba(58, 52, 41, 1)
}

/*NOTE pour infini dehors*/
.obelix {
  color: rgba(112, 171, 143, 1);
  font-style: normal;
}

.obelix:hover:after {
  position: absolute;
  left: 20%;
  right: 20%;
  display: block;
  background: white; 
  border: 1px solid  rgba(112, 171, 143, 1);
  padding: 10px;
  line-height: 1.3;
  font-size: 9pt;
  content: "Commédienne, metteure en scène et dramaturge, Natacha Dubois suit des études de philosophie et se forme au théâtre au Conservatoire de Grenoble, puis dans le Master Pro de Mise en Scène et Dramaturgie de l'Université Paris X Nanterre.";
  color: rgba(58, 52, 41, 1)
}
/*STYLE DU CALENDRIER*/


.season-title > h2{
  margin-bottom: 0;
  text-align: center;
}

.prev-season {
  font-family: 'Abel', sans-serif;
  display: block;
  float: left;
  color: rgba(112, 171, 143, 1);
  font-size: 12pt;
  text-decoration: none;
  margin-top: 20px;
}

.next-season {
  font-family: 'Abel', sans-serif;
  display: block;
  float: right;
  color: rgba(112, 171, 143, 1);
  font-size: 12pt;
  text-decoration: none;
  margin-top: 20px;
}

.prev-season:hover,
.next-season:hover {
  color: rgba(112, 171, 143, 1);
  text-decoration: underline;
}

/*Style de la bannière en haut de chaque saison du calendrier*/

.season-banner {
  position: relative;
}

.season-banner > img {
  width: 100%;
}


/*STYLE DES LISTES À PUCES = PETIT TRIANGLE BLEU*/

.proch-dates > ul,
.intro-proj-pedag > ul,
.en-savoir-plus > ul,
.post-list,
.page-content > ul,
.creation-content > ul,
.season-content > ul {
  margin: 0;
  text-indent: 0;
  padding: 0;
}

.proch-dates > ul > li,
.intro-proj-pedag > ul > li,
.en-savoir-plus > ul > li,
.post-list > li,
.page-content > ul > li,
.creation-content > ul > li,
.season-content > ul > li  { /*premier rang*/
  list-style-type: none;
}

.proch-dates > ul > li:before,
.intro-proj-pedag > ul > li:before,
.en-savoir-plus > ul > li:before,
.page-content > ul > li:before,
.creation-content > ul > li:before,
.season-content > ul > li:before {  /*triangle devant les points de la liste*/
  display: inline-block;		
  width: 0;		
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 6px solid transparent;
  border-left: 6px solid rgba(112, 171, 143, 1);	
  content: "";
  margin-right: 2px;
}

.page-content > ul > li > ul > li,
.creation-content > ul > li > ul > li,
.season-content > ul > li > ul > li { /*deuxième rang*/
  list-style-type: square;
}

/*HEADER & FOOTER : ENTÊTE & PIED-DE-PAGE du site*/

.page-footer {
  flex: none;
  width: 100%;
  margin-top: 10px;
}

.footer-content {
  width: 900px;
  max-width: 100%;
  margin: 10px auto;
  font-family: 'Abel', sans-serif;
  color: white;
  font-weight: 300;
  font-size: 10pt;
  text-align: center;
  padding: 10px;
  line-height: 1.2;
}

.footer-content >a{
  text-decoration: none;
}

.footer-content >a:hover{
  color: rgba(112, 171, 143, 1);
  text-decoration: underline;
}

/*ENTÊTE (HEADER)*/

.page-header {
  flex: none;
  width: 100%;
  max-width: 100%;
  margin-right: auto;
  margin-left: auto;
  z-index: 9999;
}

.infini-logo {
  display: block;
  background-color: rgba(0,0,0,0.5);
  margin-top: 18px;
  margin-bottom: 18px;
  text-align: right;
}

.infini-logo > a {
  font-family: 'Abel', sans-serif;
  font-size: 26pt;
  color: rgba(112, 171, 143, 1);
  letter-spacing: 2px;
  text-decoration: none;
  line-height: 1;
}

@media all and (max-width: 690px) {
  .infini-logo { text-align: center; }
  .infini-logo > a { font-size: 22pt; }
}

/*BARRE PRINCIPALE DE NAVIGATION*/


.fixed-nav-bar {
  position: relative;
  text-align: right;
  display: block;
  min-height: 40px;
  padding: 0;
  margin-bottom: 4px;
}

/*show and hide navigation*/
.access_aid {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 0;
  padding-top: 40px;
  margin-bottom: 2px;
  overflow: hidden;
  background: rgba(112, 171, 143, 1) 10px 10px / 20px 20px no-repeat;
}

#access_nav {
  background-image: -webkit-repeating-linear-gradient(white, white 2px, rgba(112, 171, 143, 1) 2px, rgba(112, 171, 143, 1) 4px);
  background-image: repeating-linear-gradient(white, white 2px, rgba(112, 171, 143, 1) 2px, rgba(112, 171, 143, 1) 4px);
} /*design des boutons avec css linear gradient au lieu d'une icone svg*/

#access_top {
  background-image: linear-gradient(45deg, transparent 13px, white 13px, white 15px, transparent 0), linear-gradient(-45deg, rgba(112, 171, 143, 1) 13px, white 13px, white 15px, rgba(112, 171, 143, 1) 0); /*design des boutons avec css linear gradient*/
}

@media all and (max-width: 690px) {
    .fixed-nav-bar { text-align: left; }
    .fixed-nav-bar .nav-nav { margin: 0 40px 0 -40px; }
    #main_nav { display: none; }
    #main_nav:target { display: block; }
    .access_aid {
      display: block;
      color: white; 
      }
}

/**/

.nav-nav {
  font-family: 'Abel', sans-serif;
  margin: 0;
}

.fixed-nav-bar .nav-nav > li {
  position: relative;
  display: inline-block;
  list-style-type: none;
  margin: 0 0 4px 0;
  padding: 0;
  background: rgba(112, 171, 143, 1);
}

.fixed-nav-bar .nav-nav > li:hover {
  background: rgba(112, 171, 143, .8);
}

.fixed-nav-bar .nav-nav > li > a { 
  display: block;
  text-align: center;
  text-decoration: none;
  font-size: 10.5pt;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-family: 'Abel', sans-serif;
  color: white;
  padding: 6px 6px 6px 6px;
  margin: 0;
}

.fixed-nav-bar .nav-nav .current,
.fixed-nav-bar .nav-nav .current:hover {
  background: rgba(112, 171, 143, .6);
}


/*PARTENAIRES ET AMIS*/

.nos-partenaires {
  overflow: auto;
  max-width: 840px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 3px;
  padding-bottom: 3px;
  text-align: center;
  padding-left: 21px;
  padding-right: 21px;
}

.partenaires-amis {
  position: relative;
  float: left;
  width: 110px;
  height: 110px;
  background: white;
  overflow: hidden;
  margin: 2px;
  border: 3px solid rgba(58, 52, 41, .05);
}

.partenaires-amis > a > img {
  max-width: 100%;
  max-height: 60%;
}

.partenaires-amis:hover {
  border: 4px solid rgba(112, 171, 143, .7);
}

.nom-du-partenaire {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 37%;
  background:  rgba(58, 52, 41, .05);
  font-family: 'Abel', sans-serif;
  font-size: 8.5pt;
  line-height: 1.2;
  color: rgba(58, 52, 41, 1);
  padding-top: 8px;
}

.partenaires-amis:hover .nom-du-partenaire {
  background: rgba(112, 171, 143, .7);
  color: white;
}



/*PAGE CREATION*/

.creation-nav {
  position: relative;
  height: 60px;
  margin-top: 20px;
}

.prev-creation {
  display: block;
  float: left;
  font-family: 'Abel', sans-serif;
  color: rgba(112, 171, 143, 1);
  font-size: 12pt;
  text-decoration: none;
  margin-top: 0px;
}

.next-creation {
  display: block;
  float: right;
  font-family: 'Abel', sans-serif;
  color: rgba(112, 171, 143, 1);
  font-size: 12pt;
  text-decoration: none;
  margin-top: 0px;
}

.creation-nav >a:hover {
  text-decoration: underline;
  color: rgba(112, 171, 143, 1);
}

.creation-content {
  position: relative;
}

.creation-content > h1 {
  margin-top: 0;
  margin-bottom: 0;
}

.tampon-crea-date {
  position: absolute;
  top: -20px;
  left: -20px;
  display: none;
}

@media all and (max-width: 800px) {
    .tampon-crea-date { display: none; }
}

.tampon-crea-date > svg > #crea-date {
  fill: rgba(112, 171, 143, .7);
  stroke: rgba(112, 171, 143, .7);
}

.smallText {
  font-size: 10pt;
}

.gras-bleu {
  font-size: 11pt;
  color: rgba(112, 171, 143, 1);
}

/*bloc "en savoir plus" en bas de page de création*/

.en-savoir-plus { /*bloc "en savoir plus" en bas de page de création*/
  border: 2px solid rgba(112, 171, 143, 1);
  width: 100%;
  padding: 0 5px;
  background: rgba(58, 52, 41, .05);
  margin-top: 20px;
}

.en-savoir-plus > h1 { 
  text-align: left;
  font-size: 17pt;
  margin-top: 10px;
  margin-bottom: 10px;
}

/*STYLE INDEX DRAMATURGIE SPECTACLES PEDAGOGIE*/

.index-drama .cadres {
  position: relative;
  background: white;
  margin: 2px;
  max-width: 296px;
  float: left;
  min-height: 530px;
}

.index-specta .cadres {
  position: relative;
  background: white;
  margin: 2px;
  max-width: 296px;
  float: left;
  min-height: 850px;
}

@media all and (max-width: 600px) {
    .index-drama .cadres,
    .index-specta .cadres {
      margin-left: 5%;
      }
}

.index-specta .cadres .cadre-content > img {
  width: 100%;
}

.index-specta .cadres .cadre-content {
  margin-bottom: 50px;
}

.lire-suite-btn {
  background: rgba(112, 171, 143, 1);
  text-align: center;
  color: white;
  font-size: 11pt;
  letter-spacing: 1px;
  font-family: 'Abel', sans-serif;
  padding: 0 5px;
  text-decoration: none;
}

.lire-suite-btn2 {
  background: rgba(112, 171, 143, 1);
  text-align: center;
  color: white;
  font-size: 11pt;
  letter-spacing: 1px;
  font-family: 'Abel', sans-serif;
  padding: 0 5px;
  text-decoration: none;
}

.lire-suite-btn:hover,
.lire-suite-btn2:hover {
  color: white;
  background: rgba(58, 52, 41, .8);
}

.index-drama .lire-suite-btn {
  position: absolute;
  bottom: 5px;
  right: 0;
}

.index-drama .lire-suite-btn2 {
  position: absolute;
  bottom: 32px;
  right: 0;
}

.index-specta .lire-suite-btn {
  position: absolute;
  bottom: 10px;
  right: 0;
}

.cadres > h3,
.cadres > h5 {
  border: none;
  padding: 0;
  text-align: center;
}

.cadres > h5 {
  margin: 0 5px 40px 5px;
  font-size: 12pt;  color: rgba(112, 171, 143, 1);
}

.cadres > h5:after {
  background: none repeat scroll 0 0 rgba(112, 171, 143, .7);
  bottom: -10px;
  left: 102px;
  content: "";
  display: block;
  height: 2px;
  position: relative;
  width: 80px;
}


.cadres > h3 {
  margin: 30px 5px 10px 5px;
  font-size: 20pt;
  line-height: 1;
}

.index-specta .cadres > h3 {
  height: 50px;
}

.index-drama .cadre-content {
  padding: 0 20px 0 20px;
  position: relative;
  font-size: 10pt;
  line-height: 1.7;
}

.index-specta .cadre-content {
  padding: 0 10px 0 10px;
  position: relative;
  font-size: 10pt;
  line-height: 1.55;
}

.index-drama .cadre-content > p {
  text-indent: 25px;
}

.index-drama .cadre-content:before {
  position: absolute;
  left: 10px;
  top: 15px;
  font-family: 'Source Code Pro', monospace;
  font-size: 40pt;
  content: "“";
  color: rgba(112, 171, 143, .7);
  line-height: 0;
}

.index-drama .cadre-content > p:after {
  font-family: 'Source Code Pro', monospace;
  content: "...";
  font-size: 25pt;
  color: rgba(112, 171, 143, .7);
  line-height: 0;
}

.crea-date {
  position: absolute;
  top: 4px;
  right: 4px;
  font-family: 'Abel', sans-serif; 
  font-size: 10pt;
  line-height: 1;
  color: rgba(112, 171, 143, 1);
  margin: 0;
  text-align: left;
}


.distrib {
  line-height: 1.2;
  font-family: 'Abel', sans-serif; 
  color: rgba(112, 171, 143, 1);
  font-size: 10pt;
}


/*PAGES DRAMATURGIE - EXTRAITS DE PIECES OU TEXTES*/

.extraits-textes .subtitle {
  font-size: 24px;
  margin-top: 0;
  margin-bottom: 20px;
}

.extraits-textes .auteur {
  font-size: 16px;
  margin-top: 0;
}


.extraits-textes-content {
  margin-top: 50px;
}

.extraits-textes-content > p {
  line-height: 1.8;
}
.extraits-textes-content >  blockquote > p,
.extraits-textes-content >  blockquote  > blockquote {
  line-height: 1.8;
}

.extraits-textes-content >  blockquote {
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
  margin-top: 0;
  margin-bottom: 0;
}

.extraits-textes-content >  blockquote  > blockquote {
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
  margin-top: 0;
  margin-bottom: 0;
}

.didascalies {
  font-size: 10pt;
  color: rgba(58, 52, 41, 1);
  line-height: 1.2;
}

/*PAGES SPÉCIFIQUES*/

/*experience solo - journal Artaud 2007*/

.extrait-journal {  /*extraits cités de tes journaux de création*/
  border-right: 1px solid rgba(112, 171, 143, 1);
  border-left: 1px solid rgba(112, 171, 143, 1);
  padding: 0 10px;
}

.extrait-journal > p > em {
  color: rgba(112, 171, 143, 1);
}

.extrait-texte { /*extraits des textes des enfants de St Denis*/
  font-style: italic;
}

.img-artaud-solo {
  text-align: center;
}

.titre-artaud-solo {
  text-align: center;
}

.titre-artaud-solo:after {
  content: "—";
  margin-left: 5px;
}


/*STYLE DE LA PAGE 404*/

.error {
  background: white;
  max-width: 600px;
  margin: 10px auto;
  font-family: 'Abel', sans-serif;
  text-align: center;
}

.error > h5 {
  text-align: justify;
  margin: 5px 40px;
  font-size: 14pt;
}

.error > p {
  text-align: justify;
  margin: 10px 40px;
}

.error > img {
  max-width: 100%; 
  width: auto; 
  height: auto;
}

.retour-accueil > a {
  background: rgba(112, 171, 143, 1);
  text-decoration: none;
  color: white;
  width: 110px;
  padding: 5px;
  margin: 20px auto;
  display: block;
}

.retour-accueil > a:hover {
  background: rgba(58, 52, 41, .8);
}

/*PAGE CONTACT*/

.map {
  width: 100%;
  max-width: 100%;
  height: 180px;
  max-height: 180px;
  margin: 20px auto;
}

.contact-infos1 {
  margin-top: 30px;
  margin-left: 30px;
}

.contact-infos1 > p {
  position: relative;
  margin: 8px auto;
}

.contact-infos1 > .contact-phone > svg {
  width: 24px;
  height: 24px;
}

.contact-infos1 > p > svg {
  position: absolute;
  left: -30px;
  top: -4px;
  width: 28px;
  height: 28px;
}


/**********************************************************************************************/
/************************SLIDER****************************************************************/
/**********************************************************************************************/
.no-slider img {
  width: 100%;
  margin: 10px auto 30px auto;
}

.deux_images > input[type="radio"]:nth-child(1):checked ~ .carousel__prev > label:nth-child(2), 
.deux_images > input[type="radio"]:nth-child(1):checked ~ .carousel__next > label:nth-child(2), 
.deux_images > input[type="radio"]:nth-child(2):checked ~ .carousel__prev > label:nth-child(1), 
.deux_images > input[type="radio"]:nth-child(2):checked ~ .carousel__next > label:nth-child(1), 
  opacity: 1 !important;
  z-index: 3;
}


.trois_images > input[type="radio"]:nth-child(1):checked ~ .carousel__prev > label:nth-child(3), 
.trois_images > input[type="radio"]:nth-child(1):checked ~ .carousel__next > label:nth-child(2), 
.trois_images > input[type="radio"]:nth-child(2):checked ~ .carousel__prev > label:nth-child(1), 
.trois_images > input[type="radio"]:nth-child(2):checked ~ .carousel__next > label:nth-child(3), 
.trois_images > input[type="radio"]:nth-child(3):checked ~ .carousel__prev > label:nth-child(2), 
.trois_images > input[type="radio"]:nth-child(3):checked ~ .carousel__next > label:nth-child(1), 
  opacity: 1 !important;
  z-index: 3;
}

.quatre_images > input[type="radio"]:nth-child(1):checked ~ .carousel__prev > label:nth-child(4), 
.quatre_images > input[type="radio"]:nth-child(1):checked ~ .carousel__next > label:nth-child(2), 
.quatre_images > input[type="radio"]:nth-child(2):checked ~ .carousel__prev > label:nth-child(1), 
.quatre_images > input[type="radio"]:nth-child(2):checked ~ .carousel__next > label:nth-child(3), 
.quatre_images > input[type="radio"]:nth-child(3):checked ~ .carousel__prev > label:nth-child(2), 
.quatre_images > input[type="radio"]:nth-child(3):checked ~ .carousel__next > label:nth-child(4), 
.quatre_images > input[type="radio"]:nth-child(4):checked ~ .carousel__prev > label:nth-child(3), 
.quatre_images > input[type="radio"]:nth-child(4):checked ~ .carousel__next > label:nth-child(1) {
  opacity: 1 !important;
  z-index: 3;
}

.cinq_images > input[type="radio"]:nth-child(1):checked ~ .carousel__prev > label:nth-child(5), 
.cinq_images > input[type="radio"]:nth-child(1):checked ~ .carousel__next > label:nth-child(2), 
.cinq_images > input[type="radio"]:nth-child(2):checked ~ .carousel__prev > label:nth-child(1), 
.cinq_images > input[type="radio"]:nth-child(2):checked ~ .carousel__next > label:nth-child(3), 
.cinq_images > input[type="radio"]:nth-child(3):checked ~ .carousel__prev > label:nth-child(2), 
.cinq_images > input[type="radio"]:nth-child(3):checked ~ .carousel__next > label:nth-child(4), 
.cinq_images > input[type="radio"]:nth-child(4):checked ~ .carousel__prev > label:nth-child(3), 
.cinq_images > input[type="radio"]:nth-child(4):checked ~ .carousel__next > label:nth-child(5), 
.cinq_images > input[type="radio"]:nth-child(5):checked ~ .carousel__prev > label:nth-child(4), 
.cinq_images > input[type="radio"]:nth-child(5):checked ~ .carousel__next > label:nth-child(1) {
  opacity: 1 !important;
  z-index: 3;
}

.six_images > input[type="radio"]:nth-child(1):checked ~ .carousel__prev > label:nth-child(6), 
.six_images > input[type="radio"]:nth-child(1):checked ~ .carousel__next > label:nth-child(2), 
.six_images > input[type="radio"]:nth-child(2):checked ~ .carousel__prev > label:nth-child(1), 
.six_images > input[type="radio"]:nth-child(2):checked ~ .carousel__next > label:nth-child(3), 
.six_images > input[type="radio"]:nth-child(3):checked ~ .carousel__prev > label:nth-child(2), 
.six_images > input[type="radio"]:nth-child(3):checked ~ .carousel__next > label:nth-child(4), 
.six_images > input[type="radio"]:nth-child(4):checked ~ .carousel__prev > label:nth-child(3), 
.six_images > input[type="radio"]:nth-child(4):checked ~ .carousel__next > label:nth-child(5), 
.six_images > input[type="radio"]:nth-child(5):checked ~ .carousel__prev > label:nth-child(4), 
.six_images > input[type="radio"]:nth-child(5):checked ~ .carousel__next > label:nth-child(6),
.six_images > input[type="radio"]:nth-child(6):checked ~ .carousel__prev > label:nth-child(5), 
.six_images > input[type="radio"]:nth-child(6):checked ~ .carousel__next > label:nth-child(1) {
  opacity: 1 !important;
  z-index: 3;
}

.sept_images > input[type="radio"]:nth-child(1):checked ~ .carousel__prev > label:nth-child(7), 
.sept_images > input[type="radio"]:nth-child(1):checked ~ .carousel__next > label:nth-child(2), 
.sept_images > input[type="radio"]:nth-child(2):checked ~ .carousel__prev > label:nth-child(1), 
.sept_images > input[type="radio"]:nth-child(2):checked ~ .carousel__next > label:nth-child(3), 
.sept_images > input[type="radio"]:nth-child(3):checked ~ .carousel__prev > label:nth-child(2), 
.sept_images > input[type="radio"]:nth-child(3):checked ~ .carousel__next > label:nth-child(4), 
.sept_images > input[type="radio"]:nth-child(4):checked ~ .carousel__prev > label:nth-child(3), 
.sept_images > input[type="radio"]:nth-child(4):checked ~ .carousel__next > label:nth-child(5), 
.sept_images > input[type="radio"]:nth-child(5):checked ~ .carousel__prev > label:nth-child(4), 
.sept_images > input[type="radio"]:nth-child(5):checked ~ .carousel__next > label:nth-child(6),
.sept_images > input[type="radio"]:nth-child(6):checked ~ .carousel__prev > label:nth-child(5), 
.sept_images > input[type="radio"]:nth-child(6):checked ~ .carousel__next > label:nth-child(7),
.sept_images > input[type="radio"]:nth-child(7):checked ~ .carousel__prev > label:nth-child(6), 
.sept_images > input[type="radio"]:nth-child(7):checked ~ .carousel__next > label:nth-child(1) {
  opacity: 1 !important;
  z-index: 3;
}

.huit_images > input[type="radio"]:nth-child(1):checked ~ .carousel__prev > label:nth-child(8), 
.huit_images > input[type="radio"]:nth-child(1):checked ~ .carousel__next > label:nth-child(2), 
.huit_images > input[type="radio"]:nth-child(2):checked ~ .carousel__prev > label:nth-child(1), 
.huit_images > input[type="radio"]:nth-child(2):checked ~ .carousel__next > label:nth-child(3), 
.huit_images > input[type="radio"]:nth-child(3):checked ~ .carousel__prev > label:nth-child(2), 
.huit_images > input[type="radio"]:nth-child(3):checked ~ .carousel__next > label:nth-child(4), 
.huit_images > input[type="radio"]:nth-child(4):checked ~ .carousel__prev > label:nth-child(3), 
.huit_images > input[type="radio"]:nth-child(4):checked ~ .carousel__next > label:nth-child(5), 
.huit_images > input[type="radio"]:nth-child(5):checked ~ .carousel__prev > label:nth-child(4), 
.huit_images > input[type="radio"]:nth-child(5):checked ~ .carousel__next > label:nth-child(6),
.huit_images > input[type="radio"]:nth-child(6):checked ~ .carousel__prev > label:nth-child(5), 
.huit_images > input[type="radio"]:nth-child(6):checked ~ .carousel__next > label:nth-child(7),
.huit_images > input[type="radio"]:nth-child(7):checked ~ .carousel__prev > label:nth-child(6),
.huit_images > input[type="radio"]:nth-child(7):checked ~ .carousel__next > label:nth-child(8),
.huit_images > input[type="radio"]:nth-child(8):checked ~ .carousel__prev > label:nth-child(7),
.huit_images > input[type="radio"]:nth-child(8):checked ~ .carousel__next > label:nth-child(1) {
  opacity: 1 !important;
  z-index: 3;
}

.container {
  width: 100%;
  margin: 10px auto 30px auto;
}


*,
*:before,
*:after {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

.carousel {
  width: 100%;
  position: relative;
  overflow: hidden;
}

.carousel-photographe {
  position: absolute;
  top: 2px;
  right: 0;
  background: rgba(0, 0, 0, .3);
  color: white;
  z-index: 9999;
  font-size: 10px;
  font-family: 'Abel', sans-serif;
  letter-spacing: 1px;
  padding: 0 2px;
}

.carousel > input[type="radio"] {
  position: absolute;
  left: 0;
  opacity: 0;
  top: 0;
}

.carousel > input[type="radio"]:checked ~ .carousel__items .carousel__item,
.carousel > input[type="radio"]:checked ~ .carousel__prev > label,
.carousel > input[type="radio"]:checked ~ .carousel__next > label {
  opacity: 0;
}

.carousel > input[type="radio"]:nth-child(1):checked ~ .carousel__items .carousel__item:nth-child(1) {
  opacity: 1;
}

.carousel > input[type="radio"]:nth-child(1):checked ~ .carousel__nav > label:nth-child(1) {
  background: #D6D6D6;
  cursor: default;
  pointer-events: none;
}

.carousel > input[type="radio"]:nth-child(2):checked ~ .carousel__items .carousel__item:nth-child(2) {
  opacity: 1;
}

.carousel > input[type="radio"]:nth-child(2):checked ~ .carousel__nav > label:nth-child(2) {
  background: #D6D6D6;
  cursor: default;
  pointer-events: none;
}

.carousel > input[type="radio"]:nth-child(3):checked ~ .carousel__items .carousel__item:nth-child(3) {
  opacity: 1;
}

.carousel > input[type="radio"]:nth-child(3):checked ~ .carousel__nav > label:nth-child(3) {
  background: #D6D6D6;
  cursor: default;
  pointer-events: none;
}

.carousel > input[type="radio"]:nth-child(4):checked ~ .carousel__items .carousel__item:nth-child(4) {
  opacity: 1;
}

.carousel > input[type="radio"]:nth-child(4):checked ~ .carousel__nav > label:nth-child(4) {
  background: #D6D6D6;
  cursor: default;
  pointer-events: none;
}

.carousel > input[type="radio"]:nth-child(5):checked ~ .carousel__items .carousel__item:nth-child(5) {
  opacity: 1;
}

.carousel > input[type="radio"]:nth-child(5):checked ~ .carousel__nav > label:nth-child(5) {
  background: #D6D6D6;
  cursor: default;
  pointer-events: none;
}

.carousel > input[type="radio"]:nth-child(6):checked ~ .carousel__items .carousel__item:nth-child(6) {
  opacity: 1;
}

.carousel > input[type="radio"]:nth-child(6):checked ~ .carousel__nav > label:nth-child(6) {
  background: #D6D6D6;
  cursor: default;
  pointer-events: none;
}

.carousel > input[type="radio"]:nth-child(7):checked ~ .carousel__items .carousel__item:nth-child(7) {
  opacity: 1;
}

.carousel > input[type="radio"]:nth-child(7):checked ~ .carousel__nav > label:nth-child(7) {
  background: #D6D6D6;
  cursor: default;
  pointer-events: none;
}

.carousel > input[type="radio"]:nth-child(8):checked ~ .carousel__items .carousel__item:nth-child(8) {
  opacity: 1;
}

.carousel > input[type="radio"]:nth-child(8):checked ~ .carousel__nav > label:nth-child(8) {
  background: #D6D6D6;
  cursor: default;
  pointer-events: none;
}

.carousel__items {
  margin: 0;
  padding: 0;
  list-style-type: none;
  width: 100%;
  padding-bottom: 62%; /*defini la hauteur relative*/
  position: relative;
}


.carousel__item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  transition: opacity 1s;
  -webkit-transition: opacity 1s;
}

.carousel__item img {
  width: 100%;
  vertical-align: middle;
}

.carousel__prev > label, .carousel__next > label {
  border-radius: 50%;
  cursor: pointer;
  display: block;
  width: 40px;
  height: 40px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
  opacity: 0;
  z-index: 2;
}

.carousel__prev > label:hover, .carousel__prev > label:focus, .carousel__next > label:hover, .carousel__next > label:focus {
  opacity: .5 !important;
}

.carousel__prev > label:before, .carousel__prev > label:after, .carousel__next > label:before, .carousel__next > label:after {
  content: "";
  position: absolute;
  width: inherit;
  height: inherit;
}

.carousel__prev > label:before, .carousel__next > label:before {
  background: linear-gradient(to top, #D6D6D6 0%, #D6D6D6 10%, rgba(51, 51, 51, 0) 10%), linear-gradient(to left, #D6D6D6 0%, #D6D6D6 10%, rgba(51, 51, 51, 0) 10%);
  width: 60%;
  height: 60%;
  top: 20%;
}

.carousel__prev > label {
  left: 2%;
}

.carousel__prev > label:before {
  left: 35%;
  top: 20%;
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

.carousel__next > label {
  right: 2%;
}

.carousel__next > label:before {
  left: 10%;
  transform: rotate(315deg);
  -webkit-transform: rotate(315deg);
}

.carousel__nav {
  position: absolute;
  bottom: 3%;
  left: 0;
  text-align: center;
  width: 100%;
  z-index: 3;
}

.carousel__nav > label {
  border: 1px solid #D6D6D6;
  display: inline-block;
  border-radius: 50%;
  cursor: pointer;
  margin: 0 .125%;
  width: 10px;
  height: 10px;
}



/************SLIDER ACCUEIL 1 : découvrir les spectacles**************/

.slider1 .s-wrap {
  width: 100%;
  height: 180px;
  margin: 20px 0;
  position: relative;
  overflow: hidden;
}

@media all and (max-width: 910px) {
    .s-wrap { display: none; }
}

.slider1 .s-wrap > input {
  display: none;
}

.slider1 .s-wrap .s-content {
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 1680px;
  height: 180px;
  transition: transform 3s;
  -webkit-transition: transform 3s;
}

.slider1 .s-wrap .s-item {
  position: relative;
  float: left;
  display: block;
  width: 232px;
  height: 100%;
  margin: 0 2px;
}

.slider1 .item-overlay1 > a {
  display: none;
  position: absolute;
  font-size: 18pt;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  font-family: 'Abel', sans-serif;
  bottom: 50%;
  right: 0px;
  left: 0px;
  top: 0px;
  padding: 17px 6px 5px 6px;
  color: white;
  background: rgba(112, 171, 143, .9);
}

.slider1 .item-overlay2 > a {
  display: none;
  position: absolute;
  font-size: 10pt;
  line-height: 1.1;
  text-align: left;
  text-decoration: none;
  font-family: 'Abel', sans-serif;
  bottom: 0px;
  right: 0px;
  left: 0px;
  top: 50%;
  padding: 40px 10px 5px 10px;
  color: white;
  background: rgba(112, 171, 143, .9);
}

.slider1 .s-wrap .s-item:hover .item-overlay1 > a {
  display: block;
  animation: item-overlay1 600ms ease-out forwards;
  -webkit-animation: item-overlay1 600ms ease-out forwards;
}

.slider1 .s-wrap .s-item:hover .item-overlay2 > a {
  display: block;
  animation: item-overlay2 600ms ease-out forwards;
  -webkit-animation: item-overlay2 600ms ease-out forwards;
}

.item-creadate > a {
  display: none;
  position: absolute;
  bottom: 45%;
  left: 0;
  right: 0;
  text-decoration: none;
  font-family: 'Abel', sans-serif;
  font-size: 10pt;
  color: white;
  text-align: center;
}


.item-creadate > a:before {
  content: "—";
  margin-right: 5px;
}

.item-creadate > a:after {
  content: "—";
  margin-left: 5px;
}


.s-wrap .s-item:hover .item-creadate > a {
  display: block;
  animation: item-creadate 600ms ease-out forwards;
  -webkit-animation: item-creadate 600ms ease-out forwards;
}

.slider1 .s-control {
  display: none;
}

.slider1 .s-nav label {
  display: none;
  position: absolute;
  top: 50%; /*centre les flèches verticalement*/
  transform: translateY(-50%); /*centre les flèches verticalement*/
  -webkit-transform: translateY(-50%);
  cursor: pointer;
}

.slider1 .s-nav label::before, .s-nav label::after {
  content: "";
  display: block;
  width: 6px;
  height: 24px;
  background-color: rgba(112, 171, 143, 1);
}

.slider1 .s-nav label::before {
  margin-bottom: -10px;
}
.slider1 .s-nav label.left {
  padding: 71px 22px 71px 9px;
  background: white;
  left: 0px;
}
.slider1 .s-nav label.left::before {
  transform: rotate(42deg);
  -webkit-transform: rotate(42deg);
}
.slider1 .s-nav label.left::after {
  transform: rotate(-42deg);
  -webkit-transform: rotate(-42deg);
}
.slider1 .s-nav label.right {
  right: 0px;
  padding: 71px 9px 71px 22px;
  background: white;
}
.slider1 .s-nav label.right::before {
  transform: rotate(-42deg);
  -webkit-transform: rotate(-42deg);
}
.slider1 .s-nav label.right::after {
  transform: rotate(42deg);
  -webkit-transform: rotate(42deg);
}


.slider1 #s-1:checked ~ .s-content {
  transform: translateX(0px);
  -webkit-transform: translateX(0px);
}
.slider1 #s-1:checked ~ .s-control .s-c-1 {
  background-color: #333;
}
.slider1 #s-1:checked ~ .s-nav .s-nav-1 {
  display: block;
}

.slider1 #s-2:checked ~ .s-content {
  transform: translateX(-670px);
  -webkit-transform: translateX(-670px);
}
.slider1 #s-2:checked ~ .s-control .s-c-2 {
  background-color: #333;
}
.slider1 #s-2:checked ~ .s-nav .s-nav-2 {
  display: block;
}


.item-overlay1 > a > small {
  font-size: 15pt;
}


/************SLIDER ACCUEIL 2 : découvrir les projets péda**************/

.slider2 .s2-wrap {
  width: 100%;
  height: 180px;
  margin: 20px 0;
  position: relative;
  overflow: hidden;
}

@media all and (max-width: 910px) {
    .s2-wrap { display: none; }
}

.slider2 .s2-wrap > input {
  display: none;
}

.slider2 .s2-wrap .s2-content {
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 1680px;
  height: 180px;
  transition: transform 3s;
  -webkit-transition: transform 3s;
}

.slider2 .s2-wrap .s2-item {
  position: relative;
  float: left;
  display: block;
  width: 232px;
  height: 100%;
  margin: 0 2px;
}

.slider2 .item-overlay1 > a {
  display: none;
  position: absolute;
  font-size: 18pt;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  font-family: 'Abel', sans-serif;
  bottom: 50%;
  right: 0px;
  left: 0px;
  top: 0px;
  padding: 17px 6px 5px 6px;
  color: white;
  background: rgba(112, 171, 143, .9);
}

.slider2 .item-overlay2 > a {
  display: none;
  position: absolute;
  font-size: 10pt;
  line-height: 1.1;
  text-align: left;
  text-decoration: none;
  font-family: 'Abel', sans-serif;
  bottom: 0px;
  right: 0px;
  left: 0px;
  top: 50%;
  padding: 40px 10px 5px 10px;
  color: white;
  background: rgba(112, 171, 143, .9);
}

.slider2 .s2-wrap .s2-item:hover .item-overlay1 > a {
  display: block;
  animation: item-overlay1 600ms ease-out forwards;
  -webkit-animation: item-overlay1 600ms ease-out forwards;
}

.slider2 .s2-wrap .s2-item:hover .item-overlay2 > a {
  display: block;
  animation: item-overlay2 600ms ease-out forwards;
  -webkit-animation: item-overlay2 600ms ease-out forwards;
}

.slider2 .s2-wrap .s2-item:hover .item-creadate > a {
  display: block;
  animation: item-creadate 600ms ease-out forwards;
  -webkit-animation: item-creadate 600ms ease-out forwards;
}

@keyframes item-overlay1 {
  0% {
    opacity: 0;
    transform: translateY(-80px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

@keyframes item-overlay2 {
  0% {
    opacity: 0;
    transform: translateY(80px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}


@keyframes item-creadate {
  0%,
  40% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.slider2 .s2-control {
  display: none;
}

.slider2 .s2-nav label {
  display: none;
  position: absolute;
  top: 50%; /*centre les flèches verticalement*/
  transform: translateY(-50%); /*centre les flèches verticalement*/
  -webkit-transform: translateY(-50%);
  cursor: pointer;
}

.slider2 .s2-nav label::before, .s2-nav label::after {
  content: "";
  display: block;
  width: 6px;
  height: 24px;
  background-color: rgba(112, 171, 143, 1);
}
.slider2 .s2-nav label::before {
  margin-bottom: -10px;
}
.slider2 .s2-nav label.left {
  padding: 71px 22px 71px 9px;
  background: white;
  left: 0px;
}
.slider2 .s2-nav label.left::before {
  transform: rotate(42deg);
  -webkit-transform: rotate(42deg);
}
.slider2 .s2-nav label.left::after {
  transform: rotate(-42deg);
  -webkit-transform: rotate(-42deg);
}
.slider2 .s2-nav label.right {
  right: 0px;
  padding: 71px 9px 71px 22px;
  background: white;
}
.slider2 .s2-nav label.right::before {
  transform: rotate(-42deg);
  -webkit-transform: rotate(-42deg);
}
.slider2 .s2-nav label.right::after {
  transform: rotate(42deg);
  -webkit-transform: rotate(42deg);
}


.slider2 #s2-1:checked ~ .s2-content {
  transform: translateX(0px);
  -webkit-transform: translateX(0px);
}
.slider2 #s2-1:checked ~ .s2-control .s2-c-1 {
  background-color: #333;
}
.slider2 #s2-1:checked ~ .s2-nav .s2-nav-1 {
  display: block;
}

.slider2 #s2-2:checked ~ .s2-content {
  transform: translateX(-670px);
  -webkit-transform: translateX(-670px);
}

.slider2 #s2-2:checked ~ .s2-control .s2-c-2 {
  background-color: #333;
}
.slider2 #s2-2:checked ~ .s2-nav .s2-nav-2 {
  display: block;
}



/*SLIDER HOMEPAGE*/

/* Slider wrapper*/
  .css-slider-wrapper {
      display: block;
      background: #FFF;
      overflow: hidden;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
  }
  /* Slider */
  .slider {
      width: 100%;
      height: 100%;
      background: rgba(58, 52, 41, 1);
      position: absolute;
      left: 0;
      top: 0;
      opacity: 1;
      z-index: 0;
      
      -webkit-transition: -webkit-transform 800ms;
      transition: -webkit-transform 800ms, transform 800ms;
      -webkit-transform: scale(1);
      transform: scale(1);
      }

.slider > p {
  position: absolute;
  bottom: 0;
  left: 3%;
  text-align: center;
  font-family: 'Open Sans', sans-serif; 
  font-weight: 400;
  color: rgba(112, 171, 143, 1);
  font-size: 12pt;
  line-height: 1;
  padding: 0;
  opacity: 0;
  -webkit-transition: opacity 500ms, -webkit-transform 500ms;
  transition: opacity 500ms;
  -webkit-transition-delay: 800ms; /* Safari */
  transition-delay: 800ms;
  }

.slider > p > span > small {
  font-size: 8pt;
}

.slider > p > span { 
  background: rgba(0, 0, 0, .6);
  padding: 0 2px;
}

@media all and (max-width: 690px) {
  .slider > p {
    left: 0;
    right: 0;
  }
}


  /* each slide background image */ 
  .slide1 {
      background-image: url(images/homepage-dima-infini.jpg);
      background-size: cover;
      background-position: 50% bottom;
      left: 0;
  }
  .slide2 {
      background-image: url(images/homepage-traversee-infini.jpg);
      background-size: cover;
      background-position: 50% bottom;
      left: 100%;
  }

  .slide3 {
      background-image: url(images/homepage-chenille.jpg);
      background-size: cover;
      background-position: 90% 40%;
      left: 200%;
  }

  .slide4 {
      background-image: url(images/homepage-et-la-neige-JMFRANCILLON.jpg);
      background-size: cover;
      background-position: 50% top;
      left: 300%;
  }

  .slide5 {
      background-image: url(images/homepage-de-quoi-conter-GARDUCCA.jpg);
      background-size: cover;
      background-position: 5% center;
      left: 400%
  }

  .slide6 {
      background-image: url(images/homepage-marchand-de-souvenir-JMFRANCILLON.jpg);
      background-size: cover;
      background-position: 15% top;
      left: 500%
  }

  .slide7 {
      background-image: url(images/homepage-juliette-r-VALYUDPROD.jpg);
      background-size: cover;
      background-position: 75% top;
      left: 600%;
  }

  .slide8 {
      background-image: url(images/homepage-pour-en-finir-JLPAILLE1.jpg);
      background-size: cover;
      background-position: 60% top;
      left: 700%;
  }

  /* Next and previous button = flèches de navigation d'une slide à l'autre*/ 
  .control {
      margin-top: -25px;
      z-index: 55;
  }
  .control label {
      z-index: 0;
      display: none;
      position: absolute;
      padding: 10px;
      top: 50%; 
      cursor: pointer;
  }

.control label::before, .control label::after {
  content: "";
  display: block;
  width: 6px;
  height: 24px;
  background-color: rgba(112, 171, 143, 1);
}

.control label::before {
  margin-bottom: -10px;
}

.previous label {
  left: 3%;
}

.previous label::before {
  transform: rotate(42deg);
  -webkit-transform: rotate(42deg);
}

.previous  label::after {
  transform: rotate(-42deg);
  -webkit-transform: rotate(-42deg);
}

.next label {
  right: 3%;
}

.next label::before {
  transform: rotate(-42deg);
  -webkit-transform: rotate(-42deg);
}

.next label::after {
  transform: rotate(42deg);
  -webkit-transform: rotate(42deg);
}

  /* Slider pagination = les boules en bas de l'écran*/ 
  .slider-pagination {
      position: absolute;
      bottom: 25px;
      width: 100%;
      left: 0;
      text-align: center;
      z-index: 1000;
  }
  .slider-pagination label {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      display: inline-block;
      margin: 0 2px;
      border: solid 2px rgba(112, 171, 143, 1);
      cursor: pointer;
      }
      
  /* Slider control active css */
  .slide-radio1:checked ~ .next .numb2, 
  .slide-radio2:checked ~ .next .numb3, 
  .slide-radio3:checked ~ .next .numb4,
  .slide-radio4:checked ~ .next .numb5,
  .slide-radio5:checked ~ .next .numb6,
  .slide-radio6:checked ~ .next .numb7,
  .slide-radio7:checked ~ .next .numb8,
  .slide-radio2:checked ~ .previous .numb1, 
  .slide-radio3:checked ~ .previous .numb2, 
  .slide-radio4:checked ~ .previous .numb3,
  .slide-radio5:checked ~ .previous .numb4,
  .slide-radio6:checked ~ .previous .numb5,
  .slide-radio7:checked ~ .previous .numb6,
  .slide-radio8:checked ~ .previous .numb7 {
      display: block;
      z-index: 1
  }
  /* Slider pagination active css */
  .slide-radio1:checked ~ .slider-pagination .page1, 
  .slide-radio2:checked ~ .slider-pagination .page2, 
  .slide-radio3:checked ~ .slider-pagination .page3, 
  .slide-radio4:checked ~ .slider-pagination .page4,
  .slide-radio5:checked ~ .slider-pagination .page5,
  .slide-radio6:checked ~ .slider-pagination .page6,
  .slide-radio7:checked ~ .slider-pagination .page7,
  .slide-radio8:checked ~ .slider-pagination .page8 {
      background: rgba(112, 171, 143, .8);
  }
  
  /* css for sliding  effect when you click on control button*/
  .slide-radio1:checked ~ .slider {
      -webkit-transform: translateX(0%);
      transform: translateX(0%);
  }
  .slide-radio2:checked ~ .slider {
      -webkit-transform: translateX(-100%);
      transform: translateX(-100%);
  }
  .slide-radio3:checked ~ .slider {
      -webkit-transform: translateX(-200%);
      transform: translateX(-200%);
  }
  .slide-radio4:checked ~ .slider {
      -webkit-transform: translateX(-300%);
      transform: translateX(-300%);
  }
  .slide-radio5:checked ~ .slider {
      -webkit-transform: translateX(-400%);
      transform: translateX(-400%);
  }
  .slide-radio6:checked ~ .slider {
      -webkit-transform: translateX(-500%);
      transform: translateX(-500%);
  }
  .slide-radio7:checked ~ .slider {
      -webkit-transform: translateX(-600%);
      transform: translateX(-600%);
  }
  .slide-radio8:checked ~ .slider {
      -webkit-transform: translateX(-700%);
      transform: translateX(-700%);
  }

  .slide-radio1:checked ~ .slide1 p, 
  .slide-radio2:checked ~ .slide2 p, 
  .slide-radio3:checked ~ .slide3 p, 
  .slide-radio4:checked ~ .slide4 p,
  .slide-radio5:checked ~ .slide5 p,
  .slide-radio6:checked ~ .slide6 p,
  .slide-radio7:checked ~ .slide7 p,
  .slide-radio8:checked ~ .slide8 p {
      opacity: 1;
  }


/*PROCHAINEMENT : cadre d'affichage des prochaines dates sur homepage-slider*/

.prochainement-wrap {
  display: block;  /*mettre "display: none" s'il n'y a pas de dates à afficher*/
  position: absolute;
  bottom: 60px;
  left: 3%;
  width: 250px;
  height: 300px;
  overflow: hidden;
}

.prochainement-wrap > input {
  display: none;
}

.prochainement {
  background: rgba(255, 255, 255, .9);
  padding: 2px 10px;
  width: 100%;
  height: 100%;
  -webkit-transition: -webkit-transform 800ms;
  transition: -webkit-transform 800ms, transform 800ms;
}

.proch-head > p {
  font-family: 'Open Sans', sans-serif; 
  font-size: 15pt;
  color: rgba(112, 171, 143, 1);
  letter-spacing: 2px;
  font-weight: 600;
  height: 40px;
}

.proch-dates > p,
.proch-dates > ul > li {
  font-family: 'Open Sans', sans-serif; 
  font-size: 10pt;
  color: black;
}

.proch-dates > h3 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 16pt;
}

.prochainement .lire-suite-btn {
  position: absolute;
  bottom: 5px;
  right: 0;
  padding: 2px 8px;
}

.prochainement .lire-suite-btn2 {
  position: absolute;
  bottom: 30px;
  right: 0;
  padding: 2px 8px;
}


.prochainement .avec {
  font-size: 9pt;
  color: rgba(58, 52, 41, 1);
  line-height: 1.1;
}

.proch-control {
  position: absolute;
  top: 254px;
  right: 40px;
  z-index: 9999;
  -webkit-transition: -webkit-transform 800ms;
  transition: -webkit-transform 800ms, transform 800ms;
}

.proch-control .proch1,
.proch-control .proch2 {
  position: absolute;
  cursor: pointer;
  display: none;
  padding-top: 40px;
  width: 40px;
  height: 0;
  background: 10px 10px / 20px 20px no-repeat;
  background-image: linear-gradient(45deg, transparent 13px, rgba(112, 171, 143, 1) 13px, rgba(112, 171, 143, 1) 15px, transparent 0), linear-gradient(-45deg, transparent 13px, rgba(112, 171, 143, 1) 13px, rgba(112, 171, 143, 1) 15px, transparent 0);
}

.proch-control .proch2 {
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg)
}

.proch-radio1:checked ~ .proch-control .proch2, 
.proch-radio2:checked ~ .proch-control .proch1 {
      display: block;
      z-index: 999;
      color: red;
}

.proch-radio1:checked ~ .prochainement {
      -webkit-transform: translateY(250px);
      transform: translateY(250px);
}

.proch-radio2:checked ~ .prochainement {
      -webkit-transform: translateY(0px);
      transform: translateY(0px);
}

.proch-radio2:checked ~ .proch-control {
      -webkit-transform: translateY(-250px);
      transform: translateY(-250px);
}

.proch-radio1:checked ~ .proch-control {
      -webkit-transform: translateY(0px);
      transform: translateY(0px);
}

/*INDEX DES NEWSLETTERS*/

.post-date {
  font-size: 10pt;
  color: rgba(112, 171, 143, 1);
  line-height: 1.2;
  font-style: italic;
}

.post-date:before {
  content: "—";
  margin-right: 5px;
}