*,
*::after,
*::before {
  box-sizing: border-box;
}
.loading:before {
  content: "";
  position: fixed;
  z-index: 100000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #babfbb;
}
.loading:after {
  content: "";
  position: fixed;
  z-index: 100000;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  margin: -30px 0 0 -30px;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0.4;
  background: #064b36;
  animation: loaderAnim 0.7s linear infinite alternate forwards;
}
@media screen and (min-width: 320px) {
  h1 {
    font-size: 0.9em;
  }
  h1,
  h3,
  p {
    padding: 0 3.5em;
  }
}
@media screen and (min-width: 600px) {
  h1 {
    font-size: 0.9em;
  }
  h1,
  h3,
  p {
    padding: 0 7em;
    line-height: 1.2;
  }
}
@media screen and (min-width: 1279px) {
  h1 {
    font-size: 1.9em;
  }
  h1,
  h3,
  p {
    padding: 0 12em;
    line-height: 1.3;
  }
}
body {
  font-family: "Marvel", sans-serif;
  background-color: #babfbb;
  font-weight: 400;
  transition: 0.3s ease-out;
  overflow-x: hidden;
  max-width: 100%;
  width: 100%;
  z-index: -1;
  padding: 0;
  margin: 0;
  font-size: 11px;
}



@media screen and (min-width: 320px) {
  body {
    font-size: calc(11px + 7 * ((100vw - 320px) / 960));
  }
  
@media screen and (min-width: 1280px) {
  body {
    font-size: 18px;
  }
}
img {
  max-width: 100%;
  height: auto;
  visibility: hidden;
}
.slick-slider {
  margin-bottom: 0;
}
.slick-next {
  right: 20px;
  z-index: 1;
}
.slick-prev {
  left: 20px;
  z-index: 1;
}
#combo {
  position: relative;
  overflow: hidden;
}
.slider-for .item {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  z-index: 0;
  color: rgba(6,75,54,0);
}
.slider-for .item.slick-current {
  transition: color 3s all 74s;
  color: #064b36;
}
.slider-for .filet-text,
.slider-for .filet-film,
.slider-for .filet-dussaud,
.slider-for .filet-de_sinety,
.slider-for .filet-farrebique,
.slider-for .filet-ozu,
.slider-for .filet-mizoguchi {
  display: block;
  position: absolute;
  left: 0;
  text-align: center;
  z-index: 2;
  top: 1vh;
  width: 100%;
  height: 20px;
  font-size: 0.9em;
  right: 60px;
}
.slider-for .filet-text:before,
.slider-for .filet-film:before,
.slider-for .filet-dussaud:before,
.slider-for .filet-de_sinety:before,
.slider-for .filet-farrebique:before,
.slider-for .filet-ozu:before,
.slider-for .filet-mizoguchi:before {
  color: #000;
  text-shadow: 1px 1px 1px #888;
  font-style: italic;
  font-weight: 300;
}
.slider-for .filet-text:after,
.slider-for .filet-film:after,
.slider-for .filet-dussaud:after,
.slider-for .filet-de_sinety:after,
.slider-for .filet-farrebique:after,
.slider-for .filet-ozu:after,
.slider-for .filet-mizoguchi:after {
  color: #666;
}
.slider-for .filet-film:before {
  content: "Les Travaux et les jours";
}
.slider-for .filet-film:after {
  content: ", un film de C. W. Winter et Anders Edström";
}
.slider-for .filet-text:before {
  content: "Voyage à bord d'un vaisseau psychopompe";
}
.slider-for .filet-text:after {
  content: ", par Cindy Rabouan";
}
.slider-for .filet-dussaud:before {
  content: "Paysages sublimes et rudes pour le travail des hommes ";
}
.slider-for .filet-dussaud:after {
  content: "© Georges Dussaud, 1993";
}
.slider-for .filet-farrebique:before {
  content: "Farrebique ";
}
.slider-for .filet-farrebique:after {
  content: "© Georges Rouquier, 1946";
}
.slider-for .filet-de_sinety:before {
  content: "Jour de fête à Poilley ";
}
.slider-for .filet-de_sinety:after {
  content: "© Madeleine de Sinety, 1972";
}
.slider-for .filet-ozu:before {
  content: "Voyage à Tokyo ";
}
.slider-for .filet-ozu:after {
  content: "de Yasujirō Ozu,1953";
}
.slider-for .filet-mizoguchi:before {
  content: "L'intendant Sansho ";
}
.slider-for .filet-mizoguchi:after {
  content: "de Kenji Mizoguchi, 1954";
}
.slider-for h1,
.slider-for h3 {
  text-align: center;
  color: #fff;
}

.slider-for h3 a {
  color: #eee;
  font-weight: bold;
  text-decoration: none;
}
.slider-for h1:hover,
.slider-for h3:hover {
  cursor: pointer;
}
.slider-for h1:hover,
.slider-for h3:hover,
.slider-for h1:focus,
.slider-for h3:focus {
  outline: none;
}
.slider-for h1.slick-current,
.slider-for h3.slick-current {
  font-weight: bold;
}
.slider-for h1 {
  font-size: 1.8em;
  padding-top: 35vh;
  text-shadow: 1px 1px 2px #888;
}
.slider-for h3 {
  padding-top: 2vh;
  font-weight: normal;
}
.slider-for .text {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 90vh;
  margin-bottom: 10vh;
  font-size: 1.2em;
}
.slider-for .text p {
  text-align: justify;
  color: #064b36;
  text-shadow: 1px 1px 18px rgba(224,230,235,0.7);
  transition: color 4s, text-shadow 2s ease-in;
}

@media screen and (max-height: 600px)   {
  body {
    font-size: 12px;
  } 
  .slider-for .text p{
      line-height: 1.6;
  }
}

.slider-for .text p:hover,
.slider-for .text p:focus {
  outline: none;
  color: rgba(6,75,54,0);
  text-shadow: none;
  transition: color 4s, text-shadow 2s ease-out;
}
.slider-for .text b {
  font-weight: bold;
  color: rgba(6,75,54,0.7);
}
.slider-for .text c {
  color: #064b36;
}
.slider-for .text em {
  font-style: italic;
  font-weight: 100;
}
.slider-for sup {
  font-size: 0.7em;
}
.slider-for i {
  font-size: 0.7em;
  text-align: right;
  font-style: normal;
}
.slider-for .large {
  padding: 0 4rem;
}
.slider-nav {
  position: absolute;
  bottom: 20px;
  width: 100%;
}
.slider-nav .item {
  text-align: center;
  height: 90px;
  display: flex;
  font-weight: normal;
  align-items: center;
  justify-content: center;
  font-size: 0.7em;
  font-style: italic;
  color: rgba(255,255,255,0.5);
  text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
  line-height: 1em;
}
.slider-nav .item:hover {
  cursor: pointer;
}
.slider-nav .item:hover,
.slider-nav .item:focus {
  outline: none;
}
.slider-nav .item.slick-current {
  transition: font-size 1s, color 2s, all 3s ease-out;
  font-size: 1.1em;
  color: #fff;
  font-style: normal;
  text-shadow: 1px 1px 1px #000;
}
.slider-nav .item .photo:before {
  content: '◼︎';
  font-size: 1.1em;
  color: rgba(255,255,255,0.4);
  text-shadow: 1px 1px 1px rgba(0,0,0,0.4);
  font-style: normal;
}
.slider-nav .item .photo:before.slick-current {
  font-size: 1.3em;
  color: #fff;
}
@-moz-keyframes loaderAnim {
  to {
    opacity: 1;
    transform: scale3d(0.5, 0.5, 1);
  }
}
@-webkit-keyframes loaderAnim {
  to {
    opacity: 1;
    transform: scale3d(0.5, 0.5, 1);
  }
}
@-o-keyframes loaderAnim {
  to {
    opacity: 1;
    transform: scale3d(0.5, 0.5, 1);
  }
}
@keyframes loaderAnim {
  to {
    opacity: 1;
    transform: scale3d(0.5, 0.5, 1);
  }
}