/* --------------! IMAGE DE FOND !--------------- */

body:after{
      content:"";
      position:fixed; /* stretch a fixed position to the whole screen */
      top:0;
      height:100vh; /* fix for mobile browser address bar appearing disappearing */
      left:0;
      right:0;
      z-index:-1; /* needed to keep in the background */
      background-image: url(../img/cover_tournefete.jpg);
      background-repeat:no-repeat;
      background-position: center bottom;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }

section#cover.spectacle {background-image: none; }


/* --------------! GENERIQUE !--------------- */


section#cover.spectacle ul  {width: 100%; float: none; font-size: 4em; text-align: right;margin-top: 200px;line-height: 1em;font-family: "Barlow Condensed", sans-serif; color: #ffffff;text-transform:uppercase;transition: all 0.4s ease; }
section#cover.spectacle ul li.soustitre {font-family:'Raleway';text-transform: none;  font-size: 0.7em; line-height: 1.1em; font-weight: 600;margin-top:25px;}

section#actu {background-color: #ede8df; }

div#courbe_1 {position: relative; width:100%;height: auto;vertical-align: bottom; }
div#courbe_1 img {width:100%;height: auto;vertical-align: bottom; }

div#courbe_2 {position: relative; width:100%;height: auto;vertical-align: bottom; background-color: #ede8df;  }
div#courbe_2 img {width:100%;height: auto;vertical-align: bottom; }

section#actu.spectacle ul {background-color: #ede8df; border-radius: 0px; padding: 20px 0px;position: relative;width:100%;display: table;color: var(--rose);line-height: 1.3em;  }
section#actu.spectacle ul li {width: 50%; margin:0px; height: auto;display: inline-block;vertical-align:middle;text-align: justify;line-height: 1.3em;  }
section#actu.spectacle ul li p {margin-bottom:10px; }

section#actu.spectacle ul li.gauche {padding-right:20px; text-align: right;}
section#actu.spectacle ul li.droite {padding-left:20px;text-align: left;}

section#actu.spectacle ul li ul {width: 100%; margin:0px 0px; padding:0px; height: auto;display: block;text-align: left;  }
section#actu.spectacle ul li ul li {width: 100%; margin:0px; padding:0px 0px 10px 45px; height: auto;display: block;text-align: left; }
section#actu.spectacle ul li ul li::before {	content: '\f0a4'; 
	position: absolute;
	font-family: "Font Awesome 5 free";

	font-weight: 900;
	left: 0px;}

section#actu.spectacle ul li.gauche h1::after {
			left:100%;
			margin-left: -80px;	}

section#actu.spectacle ul li ul h2 {font-size: 1em; font-weight: 800;text-transform:uppercase;padding: 15px 0px;}

section#actu.spectacle ul div.logos {height:auto;}
section#actu.spectacle ul div.logos img {height:200px; margin:15px;}

section#actu.spectacle ul li ul.partenariat {color: #777777;  }
section#actu.spectacle ul li ul.partenariat li {font-size: 0.8em; font-weight: 800; text-transform:uppercase; margin: 0px; line-height: 1.1em;}
section#actu.spectacle ul li ul.partenariat li::before {	content: '\f30b'; 
	position: absolute;
	font-family: "Font Awesome 5 free";
	font-weight: 900;
	left: 0px;}


/* --------------! VIDEO !--------------- */

.video-responsive {
 overflow:hidden;
 padding-bottom:56.25%; 
 position:relative;
 height:0;
 margin: 30px 0px;
}
.video-responsive iframe {
 left:0;
 top:0;
 height:100%;
 width:100%;
 position:absolute;
}


/* --------------! CARROUSEL AVIS !--------------- */

section#carrousel {background-color: #ede8df; padding:50px 200px 100px 200px;}

/* Slideshow container */
.slideshow-container {
  max-width: 100%;
  position: relative;
  margin: auto;
}

.slideshow-container H2 {
  margin-bottom:30px;
}

/* Hide the images by default */
.mySlides {
  display: none; padding: 0px 200px;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  left: 0;
  top: 50%;
  width: 60px;
  height: 60px;
  margin-top: -22px;
  line-height: 60px;
  color: var(--rose);
  border: solid 2px #ede8df;
  font-weight: bold;
  font-size: 1.4em;
  border-radius: 50%;
  user-select: none;
  transition: all 0.4s ease;
}

/* Position the "next button" to the right */
.next {
  right: 0; left:auto;
  border-radius: 50%;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  border: solid 2px var(--rose);
}

/* Caption text */
.text {
  color: #777777;
  font-size: 1em;
  line-height: 1.3em;
  padding: 10px 0px;
  bottom: 8px;
  width: 100%;
  text-align: justify;
}

/* Number text (1/3 etc) */
.autor {
  color: #777777;
  font-size: 1em;
  padding: 10px 0px;
  text-align: right;
  font-weight: 800;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: var(--rose);
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}


/* --------------! BANDEAU !--------------- */


section.bandeau {height:400px; width:100%; padding:0px; margin:0px;vertical-align: bottom;
	background-image: url(../img/montage_tournefete.jpg);
	background-repeat:no-repeat;
	background-position: center bottom;
	background-size:cover;
	background-attachment: scroll; }



/* --------------! RESPONSIVE !--------------- */



@media screen and (min-width: 1921px) {
	section {padding: 0px 400px;}
}

@media screen and (max-width: 1920px) {
	section {padding: 0px 200px;}
}

@media screen and (max-width: 1300px) {
	section {padding: 0px 100px;}
	section#carrousel {padding:50px 40px 100px 40px;}
    .mySlides { padding: 0px 130px;}
}

@media screen and (max-width: 1100px) {
	section {padding: 0px 50px;}
}

@media screen and (max-width: 1024px) {

    section#cover.spectacle ul {width: 100%; float: none; font-size: 3em; text-align: left;padding: 0px 100px;line-height: 1em; margin: auto;position: absolute;bottom: 15%;}

    section#actu.spectacle {background: #ede8df;padding-top:50px;}

    section#actu.spectacle ul { padding: 0px 0px 50px 0px;display: block;margin-top:0px;}
    section#actu.spectacle ul li {width: 100%; float: none;margin:0px; height: auto;padding: 0px 0px;}

    section#actu.spectacle ul li.gauche {padding-right:0px; text-align: center;}
    section#actu.spectacle ul li.droite {padding-left:0px;margin-top:50px;}
    section#actu.spectacle ul li div {text-align: left;}

    section#actu.spectacle ul li.text {line-height: 1.3em;padding-bottom: 50px;}

    section#actu.spectacle ul li.gauche h1::after {
      left:50%;
      margin-left: -40px; }

	section#actu.spectacle ul div.logos img {height:150px; margin:15px;}


    section#carrousel {padding:50px 20px 100px 20px;}
    .mySlides { padding: 0px 130px;}

}

@media screen and (max-width: 840px) {

    section {padding: 0px 100px;}
    section#cover.spectacle ul {padding: 0px 100px;}

    section#carrousel {padding:50px 20px 100px 20px;}
    .mySlides { padding: 0px 80px;}
}

@media screen and (max-width: 740px) {

    section#actu.spectacle ul div.logos img {height:100px; margin:50px 0px 0px 0px;}
}

@media screen and (max-width: 640px) {

    section {padding: 0px 50px;}
    section#cover.spectacle ul {padding: 0px 50px;}

    section#carrousel {padding:50px 0px 100px 0px;}
    .mySlides { padding: 0px 50px;}
    .prev, .next {display: none;}
}

@media screen and (max-width: 600px) {

    section {padding: 0px 20px;}
    section#cover.spectacle ul {padding: 0px 20px;}

    .mySlides { padding: 0px 20px;}
    .text { text-align: left; }

    section.bandeau {height:200px;}
}

@media screen and (max-width: 480px) {

    section#actu.spectacle ul   {font-size:0.9em; line-height: 1.2em;}
    .text {font-size: 0.9em; line-height: 1.2em;}

    section#actu.spectacle ul div.logos img {height:80px; margin:30px 0px 0px 0px;}

    section#actu.spectacle ul li ul li {padding:0px 0px 10px 30px; }

}

@media screen and (max-width: 380px) {

    section {padding: 0px 20px;}
    section#cover.spectacle ul {padding: 0px 20px;}

    h1 {font-size: 1.8em;margin-bottom: 100px;}
}