@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700);
@import url(https://fonts.googleapis.com/css?family=Loved+by+the+King);
main {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  -webkit-transition: left 250ms;
  transition: left 250ms;
  z-index: 0;
}

nav.prevnext {
  display: block;
  float: right;
  width: 12vw;
  left: calc(90vw - 6vw);
  top: 1vh;
  margin-bottom: 90vh;
  position: absolute;
}

#website {
  position: absolute;
  float: left;
  cursor: pointer;
  z-index: 4;
  top: 0;
  left: 1vw;
}
#website:after {
  content: "©";
  color: rgba(169, 217, 38, 0.9);
  font-family: "Loved by the king",cursive;
  font-size: .9em;
  opacity: .6;
}

#film {
  position: absolute;
  float: right;
  cursor: pointer;
  z-index: 4;
  top: 0;
  right: 1vw;
}
#film:after {
  content: "©";
  color: rgba(169, 217, 38, 0.9);
  font-family: "Loved by the king", cursive;
  font-size: .9em;
  opacity: .6;
}

section {
  position: absolute;
  left: 5vw;
  top: 6vh;
  z-index: 0;
  width: 100vw;
  height: 100vh;
  opacity: 0;
  margin: 0;
  opacity: 0;
  box-sizing: border-box;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
  -webkit-transition: opacity 250ms ease-in-out;
  transition: opacity 250ms ease-in-out;
}
section:first-child {
  opacity: 1;
}
section article {
  width: calc(90% - 12vw);
  max-width: 1000px;
  padding: 4rem 8rem 4rem 1rem;
}
section code, section pre, section .cit, section .cot {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  box-sizing: border-box;
}
section code {
  padding: 0.25rem 0.5rem;
}
section pre, section cit, section cot {
  padding: 1rem 2rem 0 2rem;
}
section .cot {
  line-height: 1.1;
  overflow: hidden;
  margin: 1rem 4rem;
  padding: 1rem;
}

.s {
  position: absolute;
}

nav {
  position: fixed;
  z-index: 3;
  width: 100%;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
nav.thumbs {
  right: 2vw;
  top: 56%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 12vw;
  display: block;
}
nav.thumbs ul {
  margin: 0;
  padding: 0;
}
nav.thumbs li {
  display: block;
  margin: 0 auto 0.5rem;
}
nav.thumbs li:first-child a {
  opacity: .8;
  width: 10vw;
  height: 7vw;
  box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.1);
}
nav.thumbs li a {
  opacity: .4;
  width: 5vw;
  height: 3.5vw;
  box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0);
  margin: 0 auto;
  display: block;
  background-blend-mode: source-over;
  background-position: center;
  background-size: cover;
  border-radius: 2px;
  position: relative;
  -webkit-transition: height 250ms ease-in-out, width 250ms ease-in-out, opacity 250ms ease-in-out,           box-shadow 250ms ease-in-out;
  transition: height 250ms ease-in-out, width 250ms ease-in-out, opacity 250ms ease-in-out,           box-shadow 250ms ease-in-out;
}
nav.thumbs li a:hover {
  opacity: 1;
}
nav.thumbs li a:active {
  -webkit-transform: translateY(1px);
          transform: translateY(1px);
}
nav.prevnext ul {
  margin: 0.5rem auto;
  list-style: none;
  padding: 0;
  width: 14vw;
  position: absolute;
}
nav.prevnext ul:after {
  content: "";
  display: table;
  clear: both;
}
nav.prevnext ul li {
  display: none;
}
nav.prevnext ul li.starter {
  display: block;
  position: relative;
  line-height: .5rem;
  font-size: .7em;
  width: 6vw;
  text-align: center;
  float: right;
}
nav.prevnext ul li.starter a:after {
  content: "⥤";
  color: rgba(169, 217, 38, 0.9);
  font-family: "Loved by the king", cursive;
  opacity: .6;
}
nav.prevnext ul a {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 0.5rem 1vw;
  border-radius: 4px;
  box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background-color: rgba(255, 255, 255, 0.1);
  -webkit-transition: background 200ms ease-in-out 200ms, box-shadow 200ms ease-in-out;
  transition: background 200ms ease-in-out 200ms, box-shadow 200ms ease-in-out;
}
nav.prevnext ul a:hover, nav.prevnext ul a:active {
  background-color: rgba(255, 255, 255, 0.2);
}
nav.prevnext ul a:hover {
  box-shadow: 0px -2px 0px 0px rgba(255, 255, 255, 0.1);
}
nav.prevnext ul a:active {
  box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0.1);
  -webkit-transform: translateY(1px);
          transform: translateY(1px);
}
nav a {
  text-decoration: none;
}

@media (min-width: 200px) {
  main {
    height: 100%;
  }
}
@media (min-width: 1200px) {
  main article {
    padding-left: 0;
    margin: 0 auto;
  }
}
@media (min-width: 200px) {
  nav.prevnext {
    top: auto;
    bottom: 1rem;
  }
}
#progress {
  position: fixed;
  z-index: 3;
  top: .5rem;
  left: 0;
  width: 0%;
  border-bottom: 1px dotted rgba(169, 217, 38, 0.9);
  opacity: .6;
  -webkit-transition: width 1250ms ease-in-out;
  transition: width 1250ms ease-in-out;
}

#s1:target ~ main section {
  opacity: 0;
}
#s1:target ~ main section:nth-child(1) {
  opacity: 1;
}

@media (max-width: 199px) {
  #s1:target ~ main section {
    top: 50%;
  }
  #s1:target ~ main section:nth-child(1) {
    top: 0;
  }
}
@media (min-width: 200px) {
  #s1:target ~ main {
    left: 0%;
  }

  section:nth-child(1) {
    left: 0%;
  }
}
.thumbs li:nth-child(1) a {
  background-image: url(http://www.lacor.info/film/un_jour_avec_un_jour_sans/films_morceles/img/h/1);
  background-position: center top;
  background-color: #8a610f;
}
.thumbs li:nth-child(1) a:hover {
  background-image: url(http://www.lacor.info/film/un_jour_avec_un_jour_sans/films_morceles/img/g/1);
  background-position: center top;
}

#s1:target ~ #background {
  background-image: url(http://www.lacor.info/film/un_jour_avec_un_jour_sans/films_morceles/img/g/1);
  background-color: #e61a1a;
  position: absolute;
  z-index: 0;
}
#s1:target ~ #background:hover {
  background-image: url(http://www.lacor.info/film/un_jour_avec_un_jour_sans/films_morceles/img/h/1);
  background-color: #1ae5e6;
}

#s6:target ~ #background {
  background-color: #40bfbf;
  -webkit-filter: blur(9px) grayscale(0.3) hue-rotate(2.54449deg) brightness(1) contrast(1.7);
          filter: blur(9px) grayscale(0.3) hue-rotate(2.54449deg) brightness(1) contrast(1.7);
}

#s7:target ~ #background {
  -webkit-filter: blur(4px) grayscale(0.5) hue-rotate(282.54449deg) brightness(1.2);
          filter: blur(4px) grayscale(0.5) hue-rotate(282.54449deg) brightness(1.2);
}

#s8:target ~ #background {
  -webkit-filter: blur(7px) grayscale(0) hue-rotate(9.54449deg) brightness(1.3) contrast(1.5);
          filter: blur(7px) grayscale(0) hue-rotate(9.54449deg) brightness(1.3) contrast(1.5);
}

#s9:target ~ #background {
  -webkit-filter: blur(9px) grayscale(0.3) hue-rotate(42.54449deg) brightness(1.2) contrast(1.1);
          filter: blur(9px) grayscale(0.3) hue-rotate(42.54449deg) brightness(1.2) contrast(1.1);
}

#s1:target ~ #progress {
  width: 0%;
  left: 3%;
  right: 3%;
}

#s1:target ~ .thumbs li:first-child a {
  opacity: .4;
  width: 5vw;
  height: 3.5vw;
  box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0);
}

#s1:target ~ .thumbs li:nth-child(1) a {
  opacity: .8;
  width: 10vw;
  height: 7vw;
  box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.1);
}

#s1:target ~ .prevnext li.starter {
  display: none;
}

#s1:target ~ .prevnext li[class*="p1"] {
  display: block;
  position: relative;
  line-height: .5rem;
  font-size: .7em;
  width: 6vw;
  float: left;
}
#s1:target ~ .prevnext li[class*="p1"] a:after {
  content: "⥢";
  color: rgba(169, 217, 38, 0.9);
  font-family: "Loved by the king", cursive;
  opacity: .6;
}

#s1:target ~ .prevnext li[class*="n1"] {
  display: block;
  position: relative;
  line-height: .5rem;
  font-size: .7em;
  width: 6vw;
  text-align: center;
  float: right;
}
#s1:target ~ .prevnext li[class*="n1"] a:after {
  content: "⥤";
  color: rgba(169, 217, 38, 0.9);
  font-family: "Loved by the king", cursive;
  opacity: .6;
}

#s2:target ~ main section {
  opacity: 0;
}
#s2:target ~ main section:nth-child(2) {
  opacity: 1;
}

@media (max-width: 199px) {
  #s2:target ~ main section {
    top: 50%;
  }
  #s2:target ~ main section:nth-child(2) {
    top: 0;
  }
}
@media (min-width: 200px) {
  #s2:target ~ main {
    left: -100%;
  }

  section:nth-child(2) {
    left: 100%;
  }
}
.thumbs li:nth-child(2) a {
  background-image: url(http://www.lacor.info/film/un_jour_avec_un_jour_sans/films_morceles/img/h/2);
  background-position: center top;
  background-color: #618a0f;
}
.thumbs li:nth-child(2) a:hover {
  background-image: url(http://www.lacor.info/film/un_jour_avec_un_jour_sans/films_morceles/img/g/2);
  background-position: center top;
}

#s2:target ~ #background {
  background-image: url(http://www.lacor.info/film/un_jour_avec_un_jour_sans/films_morceles/img/g/2);
  background-color: #e61a1a;
  position: absolute;
  z-index: 0;
}
#s2:target ~ #background:hover {
  background-image: url(http://www.lacor.info/film/un_jour_avec_un_jour_sans/films_morceles/img/h/2);
  background-color: #1ae5e6;
}

#s6:target ~ #background {
  background-color: #40bfbf;
  -webkit-filter: blur(9px) grayscale(0.3) hue-rotate(2.54449deg) brightness(1) contrast(1.7);
          filter: blur(9px) grayscale(0.3) hue-rotate(2.54449deg) brightness(1) contrast(1.7);
}

#s7:target ~ #background {
  -webkit-filter: blur(4px) grayscale(0.5) hue-rotate(282.54449deg) brightness(1.2);
          filter: blur(4px) grayscale(0.5) hue-rotate(282.54449deg) brightness(1.2);
}

#s8:target ~ #background {
  -webkit-filter: blur(7px) grayscale(0) hue-rotate(9.54449deg) brightness(1.3) contrast(1.5);
          filter: blur(7px) grayscale(0) hue-rotate(9.54449deg) brightness(1.3) contrast(1.5);
}

#s9:target ~ #background {
  -webkit-filter: blur(9px) grayscale(0.3) hue-rotate(42.54449deg) brightness(1.2) contrast(1.1);
          filter: blur(9px) grayscale(0.3) hue-rotate(42.54449deg) brightness(1.2) contrast(1.1);
}

#s2:target ~ #progress {
  width: 11.75%;
  left: 3%;
  right: 3%;
}

#s2:target ~ .thumbs li:first-child a {
  opacity: .4;
  width: 5vw;
  height: 3.5vw;
  box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0);
}

#s2:target ~ .thumbs li:nth-child(2) a {
  opacity: .8;
  width: 10vw;
  height: 7vw;
  box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.1);
}

#s2:target ~ .prevnext li.starter {
  display: none;
}

#s2:target ~ .prevnext li[class*="p2"] {
  display: block;
  position: relative;
  line-height: .5rem;
  font-size: .7em;
  width: 6vw;
  float: left;
}
#s2:target ~ .prevnext li[class*="p2"] a:after {
  content: "⥢";
  color: rgba(169, 217, 38, 0.9);
  font-family: "Loved by the king", cursive;
  opacity: .6;
}

#s2:target ~ .prevnext li[class*="n2"] {
  display: block;
  position: relative;
  line-height: .5rem;
  font-size: .7em;
  width: 6vw;
  text-align: center;
  float: right;
}
#s2:target ~ .prevnext li[class*="n2"] a:after {
  content: "⥤";
  color: rgba(169, 217, 38, 0.9);
  font-family: "Loved by the king", cursive;
  opacity: .6;
}

#s3:target ~ main section {
  opacity: 0;
}
#s3:target ~ main section:nth-child(3) {
  opacity: 1;
}

@media (max-width: 199px) {
  #s3:target ~ main section {
    top: 50%;
  }
  #s3:target ~ main section:nth-child(3) {
    top: 0;
  }
}
@media (min-width: 200px) {
  #s3:target ~ main {
    left: -200%;
  }

  section:nth-child(3) {
    left: 200%;
  }
}
.thumbs li:nth-child(3) a {
  background-image: url(http://www.lacor.info/film/un_jour_avec_un_jour_sans/films_morceles/img/h/3);
  background-position: center top;
  background-color: #0f8a0f;
}
.thumbs li:nth-child(3) a:hover {
  background-image: url(http://www.lacor.info/film/un_jour_avec_un_jour_sans/films_morceles/img/g/3);
  background-position: center top;
}

#s3:target ~ #background {
  background-image: url(http://www.lacor.info/film/un_jour_avec_un_jour_sans/films_morceles/img/g/3);
  background-color: #e61a1a;
  position: absolute;
  z-index: 0;
}
#s3:target ~ #background:hover {
  background-image: url(http://www.lacor.info/film/un_jour_avec_un_jour_sans/films_morceles/img/h/3);
  background-color: #1ae4e6;
}

#s6:target ~ #background {
  background-color: #40bfbf;
  -webkit-filter: blur(9px) grayscale(0.3) hue-rotate(2.54449deg) brightness(1) contrast(1.7);
          filter: blur(9px) grayscale(0.3) hue-rotate(2.54449deg) brightness(1) contrast(1.7);
}

#s7:target ~ #background {
  -webkit-filter: blur(4px) grayscale(0.5) hue-rotate(282.54449deg) brightness(1.2);
          filter: blur(4px) grayscale(0.5) hue-rotate(282.54449deg) brightness(1.2);
}

#s8:target ~ #background {
  -webkit-filter: blur(7px) grayscale(0) hue-rotate(9.54449deg) brightness(1.3) contrast(1.5);
          filter: blur(7px) grayscale(0) hue-rotate(9.54449deg) brightness(1.3) contrast(1.5);
}

#s9:target ~ #background {
  -webkit-filter: blur(9px) grayscale(0.3) hue-rotate(42.54449deg) brightness(1.2) contrast(1.1);
          filter: blur(9px) grayscale(0.3) hue-rotate(42.54449deg) brightness(1.2) contrast(1.1);
}

#s3:target ~ #progress {
  width: 23.5%;
  left: 3%;
  right: 3%;
}

#s3:target ~ .thumbs li:first-child a {
  opacity: .4;
  width: 5vw;
  height: 3.5vw;
  box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0);
}

#s3:target ~ .thumbs li:nth-child(3) a {
  opacity: .8;
  width: 10vw;
  height: 7vw;
  box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.1);
}

#s3:target ~ .prevnext li.starter {
  display: none;
}

#s3:target ~ .prevnext li[class*="p3"] {
  display: block;
  position: relative;
  line-height: .5rem;
  font-size: .7em;
  width: 6vw;
  float: left;
}
#s3:target ~ .prevnext li[class*="p3"] a:after {
  content: "⥢";
  color: rgba(169, 217, 38, 0.9);
  font-family: "Loved by the king", cursive;
  opacity: .6;
}

#s3:target ~ .prevnext li[class*="n3"] {
  display: block;
  position: relative;
  line-height: .5rem;
  font-size: .7em;
  width: 6vw;
  text-align: center;
  float: right;
}
#s3:target ~ .prevnext li[class*="n3"] a:after {
  content: "⥤";
  color: rgba(169, 217, 38, 0.9);
  font-family: "Loved by the king", cursive;
  opacity: .6;
}

#s4:target ~ main section {
  opacity: 0;
}
#s4:target ~ main section:nth-child(4) {
  opacity: 1;
}

@media (max-width: 199px) {
  #s4:target ~ main section {
    top: 50%;
  }
  #s4:target ~ main section:nth-child(4) {
    top: 0;
  }
}
@media (min-width: 200px) {
  #s4:target ~ main {
    left: -300%;
  }

  section:nth-child(4) {
    left: 300%;
  }
}
.thumbs li:nth-child(4) a {
  background-image: url(http://www.lacor.info/film/un_jour_avec_un_jour_sans/films_morceles/img/h/4);
  background-position: center top;
  background-color: #0f8a61;
}
.thumbs li:nth-child(4) a:hover {
  background-image: url(http://www.lacor.info/film/un_jour_avec_un_jour_sans/films_morceles/img/g/4);
  background-position: center top;
}

#s4:target ~ #background {
  background-image: url(http://www.lacor.info/film/un_jour_avec_un_jour_sans/films_morceles/img/g/4);
  background-color: #e61a1a;
  position: absolute;
  z-index: 0;
}
#s4:target ~ #background:hover {
  background-image: url(http://www.lacor.info/film/un_jour_avec_un_jour_sans/films_morceles/img/h/4);
  background-color: #1ae4e6;
}

#s6:target ~ #background {
  background-color: #40bebf;
  -webkit-filter: blur(9px) grayscale(0.3) hue-rotate(2.54449deg) brightness(1) contrast(1.7);
          filter: blur(9px) grayscale(0.3) hue-rotate(2.54449deg) brightness(1) contrast(1.7);
}

#s7:target ~ #background {
  -webkit-filter: blur(4px) grayscale(0.5) hue-rotate(282.54449deg) brightness(1.2);
          filter: blur(4px) grayscale(0.5) hue-rotate(282.54449deg) brightness(1.2);
}

#s8:target ~ #background {
  -webkit-filter: blur(7px) grayscale(0) hue-rotate(9.54449deg) brightness(1.3) contrast(1.5);
          filter: blur(7px) grayscale(0) hue-rotate(9.54449deg) brightness(1.3) contrast(1.5);
}

#s9:target ~ #background {
  -webkit-filter: blur(9px) grayscale(0.3) hue-rotate(42.54449deg) brightness(1.2) contrast(1.1);
          filter: blur(9px) grayscale(0.3) hue-rotate(42.54449deg) brightness(1.2) contrast(1.1);
}

#s4:target ~ #progress {
  width: 35.25%;
  left: 3%;
  right: 3%;
}

#s4:target ~ .thumbs li:first-child a {
  opacity: .4;
  width: 5vw;
  height: 3.5vw;
  box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0);
}

#s4:target ~ .thumbs li:nth-child(4) a {
  opacity: .8;
  width: 10vw;
  height: 7vw;
  box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.1);
}

#s4:target ~ .prevnext li.starter {
  display: none;
}

#s4:target ~ .prevnext li[class*="p4"] {
  display: block;
  position: relative;
  line-height: .5rem;
  font-size: .7em;
  width: 6vw;
  float: left;
}
#s4:target ~ .prevnext li[class*="p4"] a:after {
  content: "⥢";
  color: rgba(169, 217, 38, 0.9);
  font-family: "Loved by the king", cursive;
  opacity: .6;
}

#s4:target ~ .prevnext li[class*="n4"] {
  display: block;
  position: relative;
  line-height: .5rem;
  font-size: .7em;
  width: 6vw;
  text-align: center;
  float: right;
}
#s4:target ~ .prevnext li[class*="n4"] a:after {
  content: "⥤";
  color: rgba(169, 217, 38, 0.9);
  font-family: "Loved by the king", cursive;
  opacity: .6;
}

#s5:target ~ main section {
  opacity: 0;
}
#s5:target ~ main section:nth-child(5) {
  opacity: 1;
}

@media (max-width: 199px) {
  #s5:target ~ main section {
    top: 50%;
  }
  #s5:target ~ main section:nth-child(5) {
    top: 0;
  }
}
@media (min-width: 200px) {
  #s5:target ~ main {
    left: -400%;
  }

  section:nth-child(5) {
    left: 400%;
  }
}
.thumbs li:nth-child(5) a {
  background-image: url(http://www.lacor.info/film/un_jour_avec_un_jour_sans/films_morceles/img/h/5);
  background-position: center top;
  background-color: #0f618a;
}
.thumbs li:nth-child(5) a:hover {
  background-image: url(http://www.lacor.info/film/un_jour_avec_un_jour_sans/films_morceles/img/g/5);
  background-position: center top;
}

#s5:target ~ #background {
  background-image: url(http://www.lacor.info/film/un_jour_avec_un_jour_sans/films_morceles/img/g/5);
  background-color: #e61a1a;
  position: absolute;
  z-index: 0;
}
#s5:target ~ #background:hover {
  background-image: url(http://www.lacor.info/film/un_jour_avec_un_jour_sans/films_morceles/img/h/5);
  background-color: #1ae4e6;
}

#s6:target ~ #background {
  background-color: #40bebf;
  -webkit-filter: blur(9px) grayscale(0.3) hue-rotate(2.54449deg) brightness(1) contrast(1.7);
          filter: blur(9px) grayscale(0.3) hue-rotate(2.54449deg) brightness(1) contrast(1.7);
}

#s7:target ~ #background {
  -webkit-filter: blur(4px) grayscale(0.5) hue-rotate(282.54449deg) brightness(1.2);
          filter: blur(4px) grayscale(0.5) hue-rotate(282.54449deg) brightness(1.2);
}

#s8:target ~ #background {
  -webkit-filter: blur(7px) grayscale(0) hue-rotate(9.54449deg) brightness(1.3) contrast(1.5);
          filter: blur(7px) grayscale(0) hue-rotate(9.54449deg) brightness(1.3) contrast(1.5);
}

#s9:target ~ #background {
  -webkit-filter: blur(9px) grayscale(0.3) hue-rotate(42.54449deg) brightness(1.2) contrast(1.1);
          filter: blur(9px) grayscale(0.3) hue-rotate(42.54449deg) brightness(1.2) contrast(1.1);
}

#s5:target ~ #progress {
  width: 47%;
  left: 3%;
  right: 3%;
}

#s5:target ~ .thumbs li:first-child a {
  opacity: .4;
  width: 5vw;
  height: 3.5vw;
  box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0);
}

#s5:target ~ .thumbs li:nth-child(5) a {
  opacity: .8;
  width: 10vw;
  height: 7vw;
  box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.1);
}

#s5:target ~ .prevnext li.starter {
  display: none;
}

#s5:target ~ .prevnext li[class*="p5"] {
  display: block;
  position: relative;
  line-height: .5rem;
  font-size: .7em;
  width: 6vw;
  float: left;
}
#s5:target ~ .prevnext li[class*="p5"] a:after {
  content: "⥢";
  color: rgba(169, 217, 38, 0.9);
  font-family: "Loved by the king", cursive;
  opacity: .6;
}

#s5:target ~ .prevnext li[class*="n5"] {
  display: block;
  position: relative;
  line-height: .5rem;
  font-size: .7em;
  width: 6vw;
  text-align: center;
  float: right;
}
#s5:target ~ .prevnext li[class*="n5"] a:after {
  content: "⥤";
  color: rgba(169, 217, 38, 0.9);
  font-family: "Loved by the king", cursive;
  opacity: .6;
}

#s6:target ~ main section {
  opacity: 0;
}
#s6:target ~ main section:nth-child(6) {
  opacity: 1;
}

@media (max-width: 199px) {
  #s6:target ~ main section {
    top: 50%;
  }
  #s6:target ~ main section:nth-child(6) {
    top: 0;
  }
}
@media (min-width: 200px) {
  #s6:target ~ main {
    left: -500%;
  }

  section:nth-child(6) {
    left: 500%;
  }
}
.thumbs li:nth-child(6) a {
  background-image: url(http://www.lacor.info/film/un_jour_avec_un_jour_sans/films_morceles/img/h/6);
  background-position: center top;
  background-color: #0f0f8a;
}
.thumbs li:nth-child(6) a:hover {
  background-image: url(http://www.lacor.info/film/un_jour_avec_un_jour_sans/films_morceles/img/g/6);
  background-position: center top;
}

#s6:target ~ #background {
  background-image: url(http://www.lacor.info/film/un_jour_avec_un_jour_sans/films_morceles/img/g/6);
  background-color: #e61a1a;
  position: absolute;
  z-index: 0;
}
#s6:target ~ #background:hover {
  background-image: url(http://www.lacor.info/film/un_jour_avec_un_jour_sans/films_morceles/img/h/6);
  background-color: #1ae3e6;
}

#s6:target ~ #background {
  background-color: #40bebf;
  -webkit-filter: blur(9px) grayscale(0.3) hue-rotate(2.54449deg) brightness(1) contrast(1.7);
          filter: blur(9px) grayscale(0.3) hue-rotate(2.54449deg) brightness(1) contrast(1.7);
}

#s7:target ~ #background {
  -webkit-filter: blur(4px) grayscale(0.5) hue-rotate(282.54449deg) brightness(1.2);
          filter: blur(4px) grayscale(0.5) hue-rotate(282.54449deg) brightness(1.2);
}

#s8:target ~ #background {
  -webkit-filter: blur(7px) grayscale(0) hue-rotate(9.54449deg) brightness(1.3) contrast(1.5);
          filter: blur(7px) grayscale(0) hue-rotate(9.54449deg) brightness(1.3) contrast(1.5);
}

#s9:target ~ #background {
  -webkit-filter: blur(9px) grayscale(0.3) hue-rotate(42.54449deg) brightness(1.2) contrast(1.1);
          filter: blur(9px) grayscale(0.3) hue-rotate(42.54449deg) brightness(1.2) contrast(1.1);
}

#s6:target ~ #progress {
  width: 58.75%;
  left: 3%;
  right: 3%;
}

#s6:target ~ .thumbs li:first-child a {
  opacity: .4;
  width: 5vw;
  height: 3.5vw;
  box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0);
}

#s6:target ~ .thumbs li:nth-child(6) a {
  opacity: .8;
  width: 10vw;
  height: 7vw;
  box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.1);
}

#s6:target ~ .prevnext li.starter {
  display: none;
}

#s6:target ~ .prevnext li[class*="p6"] {
  display: block;
  position: relative;
  line-height: .5rem;
  font-size: .7em;
  width: 6vw;
  float: left;
}
#s6:target ~ .prevnext li[class*="p6"] a:after {
  content: "⥢";
  color: rgba(169, 217, 38, 0.9);
  font-family: "Loved by the king", cursive;
  opacity: .6;
}

#s6:target ~ .prevnext li[class*="n6"] {
  display: block;
  position: relative;
  line-height: .5rem;
  font-size: .7em;
  width: 6vw;
  text-align: center;
  float: right;
}
#s6:target ~ .prevnext li[class*="n6"] a:after {
  content: "⥤";
  color: rgba(169, 217, 38, 0.9);
  font-family: "Loved by the king", cursive;
  opacity: .6;
}

#s7:target ~ main section {
  opacity: 0;
}
#s7:target ~ main section:nth-child(7) {
  opacity: 1;
}

@media (max-width: 199px) {
  #s7:target ~ main section {
    top: 50%;
  }
  #s7:target ~ main section:nth-child(7) {
    top: 0;
  }
}
@media (min-width: 200px) {
  #s7:target ~ main {
    left: -600%;
  }

  section:nth-child(7) {
    left: 600%;
  }
}
.thumbs li:nth-child(7) a {
  background-image: url(http://www.lacor.info/film/un_jour_avec_un_jour_sans/films_morceles/img/h/7);
  background-position: center top;
  background-color: #610f8a;
}
.thumbs li:nth-child(7) a:hover {
  background-image: url(http://www.lacor.info/film/un_jour_avec_un_jour_sans/films_morceles/img/g/7);
  background-position: center top;
}

#s7:target ~ #background {
  background-image: url(http://www.lacor.info/film/un_jour_avec_un_jour_sans/films_morceles/img/g/7);
  background-color: #e61a1a;
  position: absolute;
  z-index: 0;
}
#s7:target ~ #background:hover {
  background-image: url(http://www.lacor.info/film/un_jour_avec_un_jour_sans/films_morceles/img/h/7);
  background-color: #1ae3e6;
}

#s6:target ~ #background {
  background-color: #40bebf;
  -webkit-filter: blur(9px) grayscale(0.3) hue-rotate(2.54449deg) brightness(1) contrast(1.7);
          filter: blur(9px) grayscale(0.3) hue-rotate(2.54449deg) brightness(1) contrast(1.7);
}

#s7:target ~ #background {
  -webkit-filter: blur(4px) grayscale(0.5) hue-rotate(282.54449deg) brightness(1.2);
          filter: blur(4px) grayscale(0.5) hue-rotate(282.54449deg) brightness(1.2);
}

#s8:target ~ #background {
  -webkit-filter: blur(7px) grayscale(0) hue-rotate(9.54449deg) brightness(1.3) contrast(1.5);
          filter: blur(7px) grayscale(0) hue-rotate(9.54449deg) brightness(1.3) contrast(1.5);
}

#s9:target ~ #background {
  -webkit-filter: blur(9px) grayscale(0.3) hue-rotate(42.54449deg) brightness(1.2) contrast(1.1);
          filter: blur(9px) grayscale(0.3) hue-rotate(42.54449deg) brightness(1.2) contrast(1.1);
}

#s7:target ~ #progress {
  width: 70.5%;
  left: 3%;
  right: 3%;
}

#s7:target ~ .thumbs li:first-child a {
  opacity: .4;
  width: 5vw;
  height: 3.5vw;
  box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0);
}

#s7:target ~ .thumbs li:nth-child(7) a {
  opacity: .8;
  width: 10vw;
  height: 7vw;
  box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.1);
}

#s7:target ~ .prevnext li.starter {
  display: none;
}

#s7:target ~ .prevnext li[class*="p7"] {
  display: block;
  position: relative;
  line-height: .5rem;
  font-size: .7em;
  width: 6vw;
  float: left;
}
#s7:target ~ .prevnext li[class*="p7"] a:after {
  content: "⥢";
  color: rgba(169, 217, 38, 0.9);
  font-family: "Loved by the king", cursive;
  opacity: .6;
}

#s7:target ~ .prevnext li[class*="n7"] {
  display: block;
  position: relative;
  line-height: .5rem;
  font-size: .7em;
  width: 6vw;
  text-align: center;
  float: right;
}
#s7:target ~ .prevnext li[class*="n7"] a:after {
  content: "⥤";
  color: rgba(169, 217, 38, 0.9);
  font-family: "Loved by the king", cursive;
  opacity: .6;
}

#s8:target ~ main section {
  opacity: 0;
}
#s8:target ~ main section:nth-child(8) {
  opacity: 1;
}

@media (max-width: 199px) {
  #s8:target ~ main section {
    top: 50%;
  }
  #s8:target ~ main section:nth-child(8) {
    top: 0;
  }
}
@media (min-width: 200px) {
  #s8:target ~ main {
    left: -700%;
  }

  section:nth-child(8) {
    left: 700%;
  }
}
.thumbs li:nth-child(8) a {
  background-image: url(http://www.lacor.info/film/un_jour_avec_un_jour_sans/films_morceles/img/h/8);
  background-position: center top;
  background-color: #8a0f61;
}
.thumbs li:nth-child(8) a:hover {
  background-image: url(http://www.lacor.info/film/un_jour_avec_un_jour_sans/films_morceles/img/g/8);
  background-position: center top;
}

#s8:target ~ #background {
  background-image: url(http://www.lacor.info/film/un_jour_avec_un_jour_sans/films_morceles/img/g/8);
  background-color: #e61a1a;
  position: absolute;
  z-index: 0;
}
#s8:target ~ #background:hover {
  background-image: url(http://www.lacor.info/film/un_jour_avec_un_jour_sans/films_morceles/img/h/8);
  background-color: #1ae2e6;
}

#s6:target ~ #background {
  background-color: #40bdbf;
  -webkit-filter: blur(9px) grayscale(0.3) hue-rotate(2.54449deg) brightness(1) contrast(1.7);
          filter: blur(9px) grayscale(0.3) hue-rotate(2.54449deg) brightness(1) contrast(1.7);
}

#s7:target ~ #background {
  -webkit-filter: blur(4px) grayscale(0.5) hue-rotate(282.54449deg) brightness(1.2);
          filter: blur(4px) grayscale(0.5) hue-rotate(282.54449deg) brightness(1.2);
}

#s8:target ~ #background {
  -webkit-filter: blur(7px) grayscale(0) hue-rotate(9.54449deg) brightness(1.3) contrast(1.5);
          filter: blur(7px) grayscale(0) hue-rotate(9.54449deg) brightness(1.3) contrast(1.5);
}

#s9:target ~ #background {
  -webkit-filter: blur(9px) grayscale(0.3) hue-rotate(42.54449deg) brightness(1.2) contrast(1.1);
          filter: blur(9px) grayscale(0.3) hue-rotate(42.54449deg) brightness(1.2) contrast(1.1);
}

#s8:target ~ #progress {
  width: 82.25%;
  left: 3%;
  right: 3%;
}

#s8:target ~ .thumbs li:first-child a {
  opacity: .4;
  width: 5vw;
  height: 3.5vw;
  box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0);
}

#s8:target ~ .thumbs li:nth-child(8) a {
  opacity: .8;
  width: 10vw;
  height: 7vw;
  box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.1);
}

#s8:target ~ .prevnext li.starter {
  display: none;
}

#s8:target ~ .prevnext li[class*="p8"] {
  display: block;
  position: relative;
  line-height: .5rem;
  font-size: .7em;
  width: 6vw;
  float: left;
}
#s8:target ~ .prevnext li[class*="p8"] a:after {
  content: "⥢";
  color: rgba(169, 217, 38, 0.9);
  font-family: "Loved by the king", cursive;
  opacity: .6;
}

#s8:target ~ .prevnext li[class*="n8"] {
  display: block;
  position: relative;
  line-height: .5rem;
  font-size: .7em;
  width: 6vw;
  text-align: center;
  float: right;
}
#s8:target ~ .prevnext li[class*="n8"] a:after {
  content: "⥤";
  color: rgba(169, 217, 38, 0.9);
  font-family: "Loved by the king", cursive;
  opacity: .6;
}

#s9:target ~ main section {
  opacity: 0;
}
#s9:target ~ main section:nth-child(9) {
  opacity: 1;
}

@media (max-width: 199px) {
  #s9:target ~ main section {
    top: 50%;
  }
  #s9:target ~ main section:nth-child(9) {
    top: 0;
  }
}
@media (min-width: 200px) {
  #s9:target ~ main {
    left: -800%;
  }

  section:nth-child(9) {
    left: 800%;
  }
}
.thumbs li:nth-child(9) a {
  background-image: url(http://www.lacor.info/film/un_jour_avec_un_jour_sans/films_morceles/img/h/9);
  background-position: center top;
  background-color: #8a0f0f;
}
.thumbs li:nth-child(9) a:hover {
  background-image: url(http://www.lacor.info/film/un_jour_avec_un_jour_sans/films_morceles/img/g/9);
  background-position: center top;
}

#s9:target ~ #background {
  background-image: url(http://www.lacor.info/film/un_jour_avec_un_jour_sans/films_morceles/img/g/9);
  background-color: #e61a1a;
  position: absolute;
  z-index: 0;
}
#s9:target ~ #background:hover {
  background-image: url(http://www.lacor.info/film/un_jour_avec_un_jour_sans/films_morceles/img/h/9);
  background-color: #1ae2e6;
}

#s6:target ~ #background {
  background-color: #40bdbf;
  -webkit-filter: blur(9px) grayscale(0.3) hue-rotate(2.54449deg) brightness(1) contrast(1.7);
          filter: blur(9px) grayscale(0.3) hue-rotate(2.54449deg) brightness(1) contrast(1.7);
}

#s7:target ~ #background {
  -webkit-filter: blur(4px) grayscale(0.5) hue-rotate(282.54449deg) brightness(1.2);
          filter: blur(4px) grayscale(0.5) hue-rotate(282.54449deg) brightness(1.2);
}

#s8:target ~ #background {
  -webkit-filter: blur(7px) grayscale(0) hue-rotate(9.54449deg) brightness(1.3) contrast(1.5);
          filter: blur(7px) grayscale(0) hue-rotate(9.54449deg) brightness(1.3) contrast(1.5);
}

#s9:target ~ #background {
  -webkit-filter: blur(9px) grayscale(0.3) hue-rotate(42.54449deg) brightness(1.2) contrast(1.1);
          filter: blur(9px) grayscale(0.3) hue-rotate(42.54449deg) brightness(1.2) contrast(1.1);
}

#s9:target ~ #progress {
  width: 94%;
  left: 3%;
  right: 3%;
}

#s9:target ~ .thumbs li:first-child a {
  opacity: .4;
  width: 5vw;
  height: 3.5vw;
  box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0);
}

#s9:target ~ .thumbs li:nth-child(9) a {
  opacity: .8;
  width: 10vw;
  height: 7vw;
  box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.1);
}

#s9:target ~ .prevnext li.starter {
  display: none;
}

#s9:target ~ .prevnext li[class*="p9"] {
  display: block;
  position: relative;
  line-height: .5rem;
  font-size: .7em;
  width: 6vw;
  float: left;
}
#s9:target ~ .prevnext li[class*="p9"] a:after {
  content: "⥢";
  color: rgba(169, 217, 38, 0.9);
  font-family: "Loved by the king", cursive;
  opacity: .6;
}

#s9:target ~ .prevnext li[class*="n9"] {
  display: block;
  position: relative;
  line-height: .5rem;
  font-size: .7em;
  width: 6vw;
  text-align: center;
  float: right;
}
#s9:target ~ .prevnext li[class*="n9"] a:after {
  content: "⥤";
  color: rgba(169, 217, 38, 0.9);
  font-family: "Loved by the king", cursive;
  opacity: .6;
}

#background {
  background-image: url(http://www.lacor.info/film/un_jour_avec_un_jour_sans/films_morceles/img/g/1);
  background-color: #e6a21a;
  background-blend-mode: multiply;
  background-position: center 2%;
  background-size: cover;
  -webkit-filter: blur(9px) grayscale(0.3) hue-rotate(1.27224deg) brightness(1.1) contrast(1.2);
          filter: blur(9px) grayscale(0.3) hue-rotate(1.27224deg) brightness(1.1) contrast(1.2);
  position: fixed;
  z-index: 0;
  -webkit-transition: background-image 1000ms ease-in-out 500ms, background-color 1000ms cubic-bezier(0.09, -1.34982, 0.01, -0.87194) 500ms;
  transition: background-image 1000ms ease-in-out 500ms, background-color 1000ms cubic-bezier(0.09, -1.34982, 0.01, -0.87194) 500ms;
  top: -18px;
  right: -18px;
  bottom: -18px;
  left: -18px;
}
#background:hover {
  background-image: url(http://www.lacor.info/film/un_jour_avec_un_jour_sans/films_morceles/img/h/1);
}

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  font-size: 1.2rem;
  color: cornsilk;
  text-shadow: 1px 1px 1px orangered;
  font-family: 'PT Sans Narrow', sans-serif;
  font-weight: 100;
}

pre, code {
  font-family: 'PT Sans Narrow', sans-serif;
  font-size: .9rem;
}

a {
  color: tomato;
}

a:link, .fm {
  text-decoration: none;
  color: rgba(169, 217, 38, 0.9);
}

.fm {
  font-style: italic;
}

h1, h2, h3, h4 {
  font-weight: 100;
}

h1 {
  font-size: 3em;
  line-height: .9;
}

h1, .ft {
  text-align: center;
  font-family: 'Loved by the King', cursive;
  letter-spacing: .2vw;
}

.intro {
  font-size: 1.2rem;
  padding: 0 4rem;
}

.link {
  font-size: .8rem;
  padding: 0 4rem;
}

p, ul {
  line-height: 1.8;
}

p {
  font-size: 1.2rem;
  text-align: justify;
}

.ft {
  font-size: .9em;
}

.cit {
  font-style: italic;
}

.cit p {
  margin: 2rem;
}

.right {
  text-align: right;
}

.nit {
  font-style: normal;
  color: rgba(169, 217, 38, 0.9);
}

.dist {
  font-style: normal;
  font-size: .8em;
  color: tomato;
}

.ndist {
  font-style: normal;
  font-size: .8em;
  color: rgba(166, 112, 89, 0.9);
}

.scrolling {
  height: 100%;
  overflow: auto;
  -webkit-mask-image: -webkit-linear-gradient(90deg, black 70%, transparent 95%, transparent);
  mask-image: linear-gradient(90deg, black 70%, transparent 95%, transparent);
}