body {
  background: black;
  color:#f0f0f0;
  font-family: Kanit, sans-serif;  
  width: 100vw;
  overflow-x: hidden;
}

body.menu-opened {
  overflow: hidden;
}

h1, h2, h3, h4, h5, h6 {
  color:#f0f0f0;
  font-family: Kanit, sans-serif;
  font-weight: 900;
}

h2 {
  font-size: 6vw;
}

/* MENU
************************************************************/
#b-menu {
  position: fixed;
  top:10px;
  right: 20px;
  z-index: 10000;
  text-transform: uppercase;
  font-weight: 900;
  font-size: 200%;
  color:white;

}

#b-menu:before {
   font-family: FontAwesome;
   content: "\f0c9";
   font-size: 90%;
   margin-right: 4px;
}

.menu-opened #b-menu {
  color:#333;
}

.menu-opened #b-menu:before {
   font-family: FontAwesome;
   content: "\f00d";
   font-size: 90%;
   margin-right: 4px;
}

#menu {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background: rgba(255,255,255,.90);
  color:black;
  z-index: 9000;
  display: none;
}

#menu ul {
  list-style: none;
  padding-top: 10vh;
}

#menu li {
  text-align: center;

}

#menu li a {
  font-size: 4vw;
  text-transform: uppercase;
  color:#333;
  font-weight: 900
}

	/* MOBILE */
  @media screen 
  and (min-device-width : 320px) 
  and (max-width: 568px) {
    
    #b-menu {
      font-size: 150%;
    }
    
    #menu li {
      height: 10vh;
    }  
    
    #menu li a {
      font-size: 8vw;
    }
    
  }


/* EN-TETE
************************************************************/
#header {
  height: 15vh;
  width: 100vw;
  position:fixed;
  z-index: 1000;
  background:  rgba(0, 0, 0, .9);
}


#saison #header {
  height: 25vh;
}

#film #header {
  background:  rgba(0, 0, 0, .8); 
}

#header h1 {
 font-size: 10vh; 
 line-height: .7em;
}  


#saison #header h1 {
 font-size: 16vh; 
 line-height: .7em;
 padding: 4px 0 0 4px;
}  


 

#header #citation {
  display: none;
}

 #saison #header #citation {
  display: block;
  position: absolute;
  top:8vh;
  width: 50vw;
  margin: 0 8vw 0 35vw;
  font-family: 'Loved by the King', cursive;
  font-size: 2.5vw;
  line-height: 1em;
  font-weight: bold;
  color:rgba(255,255,255,.4 );

/*   transform: rotateZ(-.5deg) */
}

#citation span {
  font-size: 1.9vw;

    font-weight: 300
/*   text-align: right; */
}

	/* MOBILE */
  @media screen 
  and (min-device-width : 320px) 
  and (max-width: 568px) {
     #saison #header #citation {
       display: none;  
     }
  }

/* Navigation */
#nav-chronological {
  position: absolute;
  right:20px;
  top:21vh;
  font-weight: 100;
  font-size: 150%;
  text-transform: uppercase;
  display:none;
}

#saison #nav-chronological {
  display: block
}

#btn-chronological {
  display: block;
  padding: 0px 4px;
  border-radius: 2px;
  color:white;
  text-align: center;
  margin: 0;
  padding: 0; 
  line-height: .8em;
  font-weight: 700
}

#btn-chronological span {
  font-size: 65%;
  display:block;
  font-weight: 400;
  margin: 0;
  padding: 0;
  line-height: .85em;  
}

#timeline {
  position: fixed;
  top:25vh;
  background: white;
  height: 44px;
  width: 100vw;
  z-index: 3000;
  border-bottom: 8px solid black;
  overflow-x: auto;
  overflow:-moz-scrollbars-none;
  -ms-overflow-style:  none;
  overflow-y: hidden; 
  opacity:1;
  padding-left:0vw;
  float:left;
}

.timeline-item {
   display: block;
   width: 18px;
   height: 28px;
   position:fixed;
   background: rgba(255,255,255,.8);
   position: fixed;
   z-index: 1000;
   line-height: 2.4em;

 }

.timeline-item.back {
   left:0;
}

.timeline-item.forward {
   right:0;
   text-align: center;
}

.timeline-item.forward i {
  margin: 0 0 0 4px;
}

#timeline ul {
  list-style: none;
  padding: 0 00px 0 0;
  margin: 0 0px;
  float:left;
}

.timeline-item.hidden {
  display: none;
}

#timeline li {
  display: inline;
  position: relative;  
  padding: 0;
  margin: 0;  
  font-size: 150%;  
  padding: 2px 8px;  
  font-weight: 100;
  color:silver;  
}



#timeline a {
  color: black;
  padding: 0 10px 0 0;
}

#timeline li.active a, #timeline li.active {
  font-weight: 900;

}


::-webkit-scrollbar {
    width: 0px;  /* remove scrollbar space */
    height: 0px;
    background: transparent;  /* optional: just make scrollbar invisible */
}



	/* MOBILE */
  @media screen 
  and (min-device-width : 320px) 
  and (max-width: 568px) {
    
    #nav-chronological {
      top:18vh;
    }  
  }

/* CONTENU
************************************************************/

#content {
  width: 100vw;
  padding: 20vh 2vw 20vh;
  margin: 0 auto;
  min-height: 70vh; 
}

#content h2.title {
  font-size: 3vw;
}

#content p {
  margin-bottom: .2em;
}

#content .row.film-title {
  padding-top: 8vh; /* Même valeur que hauteur de l'en-tête */
}

	/* MOBILE */
  @media screen 
  and (min-device-width : 320px) 
  and (max-width: 568px) {
    #content h2, #content h2.title {
      font-size: 10vw;
      margin-bottom: 1em;
    }
  }


/* FILM
************************************************************/
#content.opacity {
  opacity:0;

}

#film #header {
  background: black;
  box-shadow: 0px 5px 35px  rgba(0,0,0,.5);
}

#film #content {
  transition:.5s all ease-in;
}

#film h2, h2 {
  text-transform: uppercase;
  margin: 0 0 0 0;  
  font-weight: 900;
  font-size: 5vw;
  line-height: 1em;
}

#film h3, h3 {
  text-transform: uppercase;
  font-weight:300;
  margin: 0 0 1em 0;
}

#film .info {
  font-weight: 300;
  margin: 1em auto;
  line-height: 1.2em;
}

#film .description {
  margin: 4em auto;
}

#film .description p{
   font-weight: 300;
  margin: 1em auto;
  line-height: 1.2em; 
  font-size: 120%
}

#film .poster {
  box-shadow: 0px 2px 7px black
}

.film-nav {
  display: block;
  position: fixed;
  top:48vh;
  height: 6vh;
  width:  4vh;
  background: rgba(0,0,0,.5);
  font-size: 4vh;
  text-align: center;
  color:white;
}

.film-nav:hover {
  color:white;
  background: rgba(0,0,0,1);  
}

.film-nav.previous {
  left:0
}

.film-nav.next {
  right:0
}


.saison-nav {
  margin-top: 0vh;
  list-style: none;
  text-align: center;

}

.saison-nav li {
  display:inline-block;
}

.saison-nav li a {
  background:rgba(255,255,255,.5);
  display: block;
  float:left;
  width: 30px;
  height: 30px;
  margin: 0 4px 0 0;
  padding-top: 2px;
  color:black;
}

.saison-nav li a.back {
  background: transparent;
  color:rgba(255,255,255,.5); 
  font-size: 32px;
  line-height: 1;
  padding: 0;
  width: 20px;
}

.saison-nav li a span {
/*   color:black; */
}


	/* MOBILE */
  @media screen 
  and (min-device-width : 320px) 
  and (max-width: 568px) {
    
    .saison-nav {
      margin-top: 2vh;
    }
    
    #film h2 {
      font-size: 6vw;
    }
  }

/* MUR D'IMAGES
************************************************************/

/* Mur */
#wall {
  padding-top: 32vh; /* Même valeur que hauteur de l'en-tête */
  width: 100vw;
  transition:1s all ease;
}

#wall.opacity {
  opacity: .2;
}

/* Images */
.wall-item {
  width: 33.33vw;
  height: 33.33vw;
  float:left;
  position: relative;  
  overflow: hidden; 

}

.wall-item:hover {
 box-shadow: 0px 20px 37px black;
 z-index: 100
}  

.wall-item .cover {
  position: absolute;
  width: 38vw;
  height: 38vw;  
  top:-2.5vw;
  left:-2.5vw;
  transition:.0s opacity, .0s -webkit-filter;  
}  

.wall-item.passed .cover {
  -webkit-filter: grayscale(1);
  -moz-filter: grayscale(1);  
  filter: grayscale(1);
  opacity:.4;
  border: 2px dotted red;
}

.wall-item .legend {
  position: absolute;
  bottom:0;
  padding: 1em;
  opacity:0;
  text-transform: uppercase;
  text-shadow: 0px 1px 6px black;
  font-size: 120%  
}

.wall-item .legend h5{
  font-size: 3vw;
  line-height: 1em;
}

.wall-item .legend h6{
  font-size: 1.5vw;
  line-height: 1.1em;
  font-weight: 400
}

#programme .wall-item img {
  width:100% 
}

.wall-item:hover .legend, .wall-item.no-picture .legend{
  opacity:1;
}


.wall-item:hover .cover {
  opacity: .9;
  -webkit-filter: blur(10px);
  -moz-filter: blur(10px);  
  filter: blur(10px);  
}

.list-item {
  border-bottom: 1px solid silver;
  margin-bottom: 10px;
  padding-bottom: 10px;
}

.list-item h6, .list-item h5 {
  font-size: 2vw;
}

.list-item .wall-item {
  width: auto;
  height: auto;
}

.list-item .wall-item .legend {
  opacity:1
}

	/* GRAND ECRAN */

  @media screen 
  and (min-width : 1200px) {
    
    /* Images */
    .wall-item {
      width: 25vw;
      height: 25vw;
      
    }      

    .wall-item .cover {
      width: 30vw;
      height: 30vw;  
    }
    
  }


	/* MOBILE */
  @media screen 
  and (min-device-width : 320px) 
  and (max-width: 568px) {
    
    /* Images */
    .wall-item {
      width: 50vw;
      height: 50vw;
    }      

    .wall-item .cover {
      width: 55vw;
      height: 55vw;  
    }
    
    .wall-item .legend {
      opacity: 1;
    }
    
    .wall-item .legend h5{
      font-size: 6vw;
    }
    
    .wall-item .legend h6{
      font-size: 2vw;
    
    }    

    .list-item h5  {
      font-size: 32px;
      line-height: 1.1em;
      font-weight: 900;
      float:left;
      width: 100%;
    }   
    
    .list-item h6  {
      font-size: 24px;
      line-height: 1.1em;
      font-weight: 400;
      float:left;
      width: 100%;
    }    
    
  }

/* PROGRAMME
************************************************************/

/* Mur */
#programme #wall {
  padding-top: 22vh; /* Même valeur que hauteur de l'en-tête */
}

#programme h1 {
  text-transform: uppercase;
  padding-bottom: 1em;
  font-size: 4vw
}

#download-button {
  color:rgba(255,255,255,.2);
  font-size: 14px;
  color:white;
  float:right;
  font-weight: 300;
  padding: 10px;
  border:1px solid rgba(255,255,255,.2);;
  margin-top: 1.2em;
  transition:.5s all ease;
  margin-bottom: 2em;
}

#download-button:hover  {
  background: rgba(255,255,255,.2);;
}

	/* MOBILE */
  @media screen 
  and (min-device-width : 320px) 
  and (max-width: 568px) {
    #programme h1 {
      font-size: 28px;
    }
  
    #programme .list-item .wall-item .legend h6 {
      font-size: 18px
    }
  
  }

/* FORMULAIRES
************************************************************/
label {
  color:white;
  text-transform: uppercase
}

.error {
  text-transform: none;
}

.button.success {
  color:black;
  background: rgba(255,2552,255,.5);
  font-family: Kanit, sans-serif; 
  font-size: 100%;
  font-weight: 300;
  float:right;
  text-transform: uppercase
}

.button.success:hover {
  background: white;
  color:#666;
}

.success-message {
  margin: 10vh auto;
  border-radius: 10px;
  color:black;
  background: white;
  text-align: center;
  padding: 20px auto;  
}

.success-message h3, .success-message h4 {
  color:black;
}

#devenir-membre #content {
  min-height: 10vh;
  padding-bottom: 0;
}


/* CONTACT
********************************************************************************/ 
#map_canvas {
  margin: 2em auto;
  width: 100%;
  height: 300px;

}

/* PIED DE PAGE
************************************************************/
#footer {
  width: 100vw;
  min-height: 30vh;
  float: left;
  background: #222;
  box-shadow: inset  0  8px 18px -8px black;
  padding-top: 5vh;
}

#footer .columns {
  padding: 20px 10px
}

#footer .social {
  font-size: 200%;
  float:right;
  margin: 0 10px;
}

#footer .logo-bs {
  width: .9em;
}

#footer p {
  margin: 0;
}

#footer, #footer a {
  color:rgba(255,2552,255,.5)
}

#credits {
  font-size: 70%;
  color:rgba(255,2552,255,.2);
  float:right;
  padding: 20px;
  font-weight: 100
}

#credits a {
  color:rgba(255,2552,255,.2);
}  

#footer input[type=email] {
   background-color:rgba(255,2552,255,.2);
   border:0;
}

.ghost {
  color:black;
  background: rgba(255,2552,255,.5);
  font-family: Kanit, sans-serif;   
  font-size: 100%;
  text-transform: uppercase
}

.ghost:hover {
  background: white;
  color:#666;
}

	/* MOBILE */
  @media screen 
  and (min-device-width : 320px) 
  and (max-width: 568px) {
    #footer .ghost {
      width: 100%
    }
  }