@charset "UTF-8";
/* never mind */
*,
*:after,
*:before {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
  border: 0 none;
  position: relative;
}

body {
  width: 100vw;
  font-family: "Open Sans Condensed", sans-serif;
  font-weight: 400;
  font-size: 12px;
  background-color: #14161f;
  color: rgba(250, 250, 250, 0.6);
}

@media screen and (min-width: 320px) {
  body {
    font-size: calc(12px + 8 * ((100vw - 320px) / 960));
  }
}
@media screen and (min-width: 1280px) {
  body {
    font-size: 20px;
  }
}
article {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  top: 0;
  width: 1000px !important;
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 1px rgba(21, 14, 27, 0);
  background-color: #14161f;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/194946/wavecut.png);
  border-radius: 10px;
}

::-webkit-scrollbar {
  width: 5px;
  background-color: #322f2d;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #bdc1b3;
  background-image: -webkit-gradient(linear, 40% 0%, 75% 84%, from(#271264), to(#271264), color-stop(0.6, #bfd194));
}

/* magic scroll */
#perspective {
  background-image: url("https://www.lacor.info/film/an_elephant_sitting_still/img/an_elephant_sitting_still_16.jpg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 100% top;
  width: 1000px;
  left: 50%;
  -webkit-transform: translate(-50%);
          transform: translate(-50%);
  height: 100vh;
  -webkit-perspective: 1px;
          perspective: 1px;
  overflow-y: scroll;
  overflow-x: hidden;
}

header {
  background-image: url("https://www.lacor.info/film/an_elephant_sitting_still/img/an_elephant_sitting_still_08.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% top;
  -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, -1) translateZ(-2px);
          transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, -1) translateZ(-2px);
  top: 0;
  width: inherit;
  height: inherit;
  display: flex;
}
@media screen and (max-width: 900px) {
  header {
    background-position: 70% top;
  }
}

/* the grid */
.wrap {
  background: transparent;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0vh, #182126 25vh);
  background-size: 100% 100%;
  width: inherit;
  margin-top: 25vh;
  padding: 25vh 4em 0;
  display: grid;
  grid-gap: 0;
  grid-template-columns: [full-start] minmax(1em, 1fr) [main-start] minmax(0, 60ch) [main-end] minmax(1em, 1fr) [full-end];
  font-size: 1.5em;
}

.wrap > * {
  grid-column: main;
  margin-top: 2em;
  word-break: break-word;
  -webkit-hyphens: manual;
      -ms-hyphens: manual;
          hyphens: manual;
  text-align: justify;
}

.wrap > .full {
  grid-column: full;
  text-align: center;
}

.wrap > p {
  font-size: 1em;
  line-height: 1.7em;
}

a {
  color: rgba(250, 250, 250, 0.7);
  text-decoration: none;
  transition: all ease-out 0.5s;
}
a:hover {
  color: rgba(250, 250, 250, 0.6);
  transition: all ease-in 0.5s;
}

em {
  font-style: italic;
  color: rgba(250, 250, 250, 0.7);
}

sup {
  vertical-align: super;
  font-size: 0.7em;
}

@media (max-width: 320px) {
  .wrap {
    padding: 25vh 0.5em;
  }
}
@media (max-width: 648px) {
  .wrap {
    padding: 25vh 1em;
  }
}
.intro {
  margin-top: -30vh;
}

figcaption {
  word-break: break-word;
  -webkit-hyphens: manuel;
      -ms-hyphens: manuel;
          hyphens: manuel;
  width: 90%;
  left: 50%;
  margin-left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  text-align: center;
  font-size: 0.6em;
  line-height: 1.5em;
  font-family: "Open Sans Condensed", sans-serif;
  margin: 0;
  color: #666;
}

h1,
footer h2 {
  font-family: "Atma", cursive;
  margin: auto;
  font-size: calc(0.1em + 4vmax + 4vmin);
  font-weight: 600;
  font-variant: small-caps;
  text-align: center;
  line-height: 0.85;
  -webkit-filter: drop-shadow(0 0 1px #000);
          filter: drop-shadow(0 0 1px #000);
  word-break: break-word;
  -webkit-hyphens: manuel;
      -ms-hyphens: manuel;
          hyphens: manuel;
}

h1 {
  color: transparent;
  -webkit-text-stroke: 0.5px rgba(240, 240, 240, 0.8);
  transition: opacity 0.25s ease-in-out, color 0.25s ease-in-out, -webkit-transform 0.25s ease-in-out;
  transition: opacity 0.25s ease-in-out, color 0.25s ease-in-out, transform 0.25s ease-in-out;
  transition: opacity 0.25s ease-in-out, color 0.25s ease-in-out, transform 0.25s ease-in-out, -webkit-transform 0.25s ease-in-out;
  outline: none;
  font-size: 2.8em;
  margin-top: 70vh;
  line-height: 1.2;
  letter-spacing: 2px;
  -webkit-transform: scaleY(1.5);
          transform: scaleY(1.5);
}
h1:before {
  content: "AN  ELEPHANT";
}
h1:after {
  content: "\A SITTING  STILL";
  white-space: pre;
}

h2 {
  background: transparent;
  background-image: linear-gradient(to top, rgba(24, 33, 38, 0) 0vh, #182126 35vh);
  color: transparent;
  -webkit-text-stroke: 0.5px rgba(240, 240, 240, 0.8) !important;
  transition: opacity 0.25s ease-in-out, color 0.25s ease-in-out, -webkit-transform 0.25s ease-in-out;
  transition: opacity 0.25s ease-in-out, color 0.25s ease-in-out, transform 0.25s ease-in-out;
  transition: opacity 0.25s ease-in-out, color 0.25s ease-in-out, transform 0.25s ease-in-out, -webkit-transform 0.25s ease-in-out;
  outline: none;
  z-index: 100;
  text-align: center;
  font-size: calc(0.2em + 1vmax + 1vmin);
  font-weight: 600;
  font-variant: small-caps;
  letter-spacing: 0.1em;
  text-align: center;
  line-height: 2.2;
  height: 45vh;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.text {
  font-family: "Atma", cursive;
  line-height: 0.9;
  padding-top: 20px;
}
.text:before {
  content: "An Elephant Sitting Still";
}
.text:after {
  font-family: "Open Sans Condensed", sans-serif;
  font-size: calc(0.1em + 1vmax + 1vmin);
  content: "\A Film annonce, dossier de presse, citations";
  white-space: pre;
  font-weight: normal;
}

p {
  line-height: 1.4em;
  font-family: "Open Sans Condensed", sans-serif;
}

.full img {
  width: 90%;
  margin: auto;
  height: auto;
  position: relative;
  display: block;
  padding: 1em 0;
}

.full span {
  position: relative;
  bottom: 50%;
  left: 0;
  right: 0;
  text-align: center;
  color: rgba(255, 255, 255, 0.2);
  font-size: 7vmax;
  line-height: 0.2;
}

.end {
  margin-top: 15vh !important;
}

.hack {
  display: none !important;
}

ul {
  display: block;
  position: relative;
  width: 80%;
  margin: auto;
  padding-left: 4rem;
  list-style-type: none;
  color: #888;
  top: 1rem;
  padding-top: 1rem;
  padding-bottom: 0 !important;
}

ul li {
  font-size: 0.7em;
  padding-left: 2rem;
  padding-right: 1rem;
  line-height: 1.5;
}

ul::before {
  background: rgba(250, 250, 250, 0.2);
  content: "Liens";
  position: absolute;
  left: 1.3rem;
  top: 2rem;
  height: auto;
  width: 2.2rem;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  text-orientation: upright;
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
  font-family: monospace;
  line-height: 1;
  letter-spacing: 0.61em;
  font-weight: 100;
  padding: 1rem 0.5rem;
  font-size: .7em;
}

footer {
  position: fixed;
  top: 100vh;
  width: 1000px;
  height: 100vh;
  z-index: -1;
  display: flex;
  text-align: center;
}

footer h2 {
  background: transparent;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0vh, black 10vh);
  padding: 1em 0 0;
  margin: auto;
  position: -webkit-sticky;
  position: sticky;
  display: block;
  height: 100vh;
  width: inherit;
  font-size: calc(1em + 1vmax + 1vmin);
  color: transparent;
  -webkit-text-stroke: 1px #182126;
  transition: opacity 0.25s ease-in-out, color 0.25s ease-in-out, -webkit-transform 0.25s ease-in-out;
  transition: opacity 0.25s ease-in-out, color 0.25s ease-in-out, transform 0.25s ease-in-out;
  transition: opacity 0.25s ease-in-out, color 0.25s ease-in-out, transform 0.25s ease-in-out, -webkit-transform 0.25s ease-in-out;
  outline: none;
}

h2 + h3 {
  opacity: 0.4;
  font-weight: 400;
}

h3 {
  padding-top: 1.2em;
  font-family: "Atma", cursive;
  color: rgba(240, 240, 240, 0.7);
  transition: opacity 0.25s ease-in-out, color 0.25s ease-in-out, -webkit-transform 0.25s ease-in-out;
  transition: opacity 0.25s ease-in-out, color 0.25s ease-in-out, transform 0.25s ease-in-out;
  transition: opacity 0.25s ease-in-out, color 0.25s ease-in-out, transform 0.25s ease-in-out, -webkit-transform 0.25s ease-in-out;
  outline: none;
  line-height: 1.1em;
  font-size: 1em;
  -webkit-transform: scaleY(1.3);
          transform: scaleY(1.3);
  letter-spacing: 0.05em;
}

.avert {
  padding-bottom: 2em;
  font-size: 1em;
  line-height: 1.6em;
}
.avert a {
  color: rgba(128, 128, 128, 0.4);
}
.avert em {
  color: rgba(245, 255, 250, 0.6);
}

p.ft {
  text-align: center;
  font-family: "Open Sans Condensed", sans-serif;
  font-size: 0.8em;
  letter-spacing: 2px;
}
p.ft span {
  font-family: "Atma", cursive;
  -webkit-filter: brightness(1.2);
          filter: brightness(1.2);
  letter-spacing: 1px;
  -webkit-transform: scaleY(1.5);
          transform: scaleY(1.5);
  font-size: 1.4em;
}

.responsive-wrapper {
  position: relative;
  overflow: hidden !important;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/194946/wavecut.png);
  width: 90%;
  margin-left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

.fa {
  height: 430px;
}
.fa:before {
  content: 'Film annonce Capricci';
  font-size: 0.7em !important;
  opacity: 0.7;
}

.dp {
  height: 750px;
}
.dp:before {
  content: 'Dossier de presse Capricci';
  font-size: 0.7em !important;
  opacity: 0.7;
}

.cit {
  font-size: 0.7em !important;
  padding: 2em 4em 0 4em;
  font-style: italic;
}
.cit:before {
  content: '❝ ';
  color: rgba(255, 215, 0, 0.7);
}
.cit:after {
  content: ' ❞';
  color: rgba(255, 215, 0, 0.7);
}
.cit em {
  font-style: normal;
}

.sign {
  text-align: right;
  font-size: 0.8em;
  margin-top: -1em;
  font-style: normal;
}
.sign:before {
  content: '';
}
.sign:after {
  content: '';
}

.responsive-wrapper object,
.responsive-wrapper iframe {
  position: absolute;
  width: 640px;
  height: 360px;
  border-style: none;
  padding: 0;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.responsive-wrapper iframe {
  width: 640px;
  height: 640px;
}

@media all and (max-width: 1000px) {
  article,
  #perspective,
  footer {
    width: 100vw !important;
  }
}
@media all and (max-width: 568px) {
  article,
  #perspective,
  footer {
    width: 100vw !important;
  }
}
/* Page Loader */
.loading:before {
  content: "";
  position: fixed;
  z-index: 100000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
}

.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: white;
  -webkit-animation: loaderAnim 0.7s linear infinite alternate forwards;
          animation: loaderAnim 0.7s linear infinite alternate forwards;
}

@-webkit-keyframes loaderAnim {
  to {
    opacity: 1;
    -webkit-transform: scale3d(0.5, 0.5, 1);
            transform: scale3d(0.5, 0.5, 1);
  }
}

@keyframes loaderAnim {
  to {
    opacity: 1;
    -webkit-transform: scale3d(0.5, 0.5, 1);
            transform: scale3d(0.5, 0.5, 1);
  }
}