::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 1px #173635;
  background-color: rgba(25,14,37,0);
  border-radius: 10px;
}
::-webkit-scrollbar {
  width: 5px;
  background-color: rgba(25,14,37,0);
}
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: rgba(25,14,37,0);
  background-image: -webkit-gradient(linear, 40% 0%, 75% 84%, from(#173635), to(#173635), color-stop(0.6, rgba(43,120,119,0.9)));
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: transparent;
  font-family: "Acme";
  -webkit-perspective: 600px;
          perspective: 600px;
  font-size: 11px;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
body * {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
body *:before,
body *:after {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
@media screen and (min-width: 320px) {
  body {
    font-size: calc(11px + 11 * ((100vw - 320px) / 960));
  }
}
@media screen and (min-width: 1280px) {
  body {
    font-size: 22px;
  }
}
body em {
  font-style: italic;
}
body #wrapper {
  width: 98vw;
  height: 98vh;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 40px -10px rgba(0,0,0,0.25);
}
body #wrapper.flash {
  -webkit-animation: bend 2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 1 forwards;
          animation: bend 2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 1 forwards;
}
@-webkit-keyframes bend {
  0% {
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  }
  20% {
    -webkit-transform: rotateY(2.5deg);
            transform: rotateY(2.5deg);
  }
  50% {
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  }
  100% {
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  }
}
@keyframes bend {
  0% {
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  }
  20% {
    -webkit-transform: rotateY(2.5deg);
            transform: rotateY(2.5deg);
  }
  50% {
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  }
  100% {
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  }
}
body #wrapper #trigger {
  position: absolute;
  width: 20px;
  height: 20px;
  box-shadow: 0 0 0 1px rgba(242,240,255,0.3), 0 0 0 1px rgba(242,240,255,0.3);
  z-index: 999;
  border-radius: 100%;
  left: calc(12.5% - 12.5px);
  top: calc(50% - 12.5px);
  transition: background 0.2s ease-in-out, opacity 0.2s ease-in-out;
  cursor: pointer;
}
body #wrapper #trigger:hover {
  background: rgba(242,240,255,0.3);
}
body #wrapper #trigger:hover:before {
  color: rgba(242,240,255,0.3);
}
body #wrapper #trigger.flash {
  transition: box-shadow 0.2s ease-in-out, opacity 0.2s ease-in-out;
  transition-delay: 0s, 0.2s;
  box-shadow: 0 0 0 1px rgba(242,240,255,0.3), 0 0 0 10px transparent;
  opacity: 0;
  pointer-events: none;
}
body #wrapper #trigger:before {
  content: "▸";
  position: absolute;
  color: rgba(242,240,255,0.3);
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  transition: 0.2s ease-in-out;
}
body #wrapper.fade {
  opacity: 0.75;
}
body #title {
  position: absolute;
  width: 100vw;
  height: 20px;
  top: -170%;
  left: 20%;
  z-index: 998;
  -webkit-writing-mode: vertical-lr;
      -ms-writing-mode: tb-lr;
          writing-mode: vertical-lr;
  text-orientation: upright;
  color: #f5f5f5;
  mix-blend-mode: color-dodge;
  -webkit-animation: title 3s 1s cubic-bezier(0.0175, 0.985, 1, 1.275) forwards;
          animation: title 3s 1s cubic-bezier(0.0175, 0.985, 1, 1.275) forwards;
}
body .card {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  pointer-events: none;
  z-index: 0;
  transition: -webkit-transform 0.4s ease-in-out;
  transition: transform 0.4s ease-in-out;
  transition: transform 0.4s ease-in-out, -webkit-transform 0.4s ease-in-out;
}
body .card .content {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/194946/paper.png");
  background-size: 100px;
  background-repeat: repeat;
}
body .card .content h1 {
  opacity: 1;
  position: absolute;
  left: calc(25% + 20px);
  top: 20px;
  font-size: 1.4em;
  margin: 0px;
  color: rgba(34,29,68,0.275);
}
body .card .content p {
  position: absolute;
  width: 30vw;
  vertical-align: middle;
  bottom: 0;
  left: calc(25% + 20px);
  line-height: 1.5;
  font-family: "Montserrat";
  color: rgba(34,29,68,0.9);
  padding: 5px;
  box-sizing: border-box;
  transition: 0.3s ease-in-out;
  -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
          clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
}
body .card .content h3 {
  position: absolute;
  right: -200px;
  top: 20px;
  font-size: 2em;
  margin: 0;
  color: transparent;
  overflow: hidden;
  border-bottom: 1px dotted rgba(120,109,192,0.9);
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
  -webkit-transform-origin: left;
          transform-origin: left;
  transition: right 0.4s ease-in-out, -webkit-transform 0s ease-in-out;
  transition: transform 0s ease-in-out, right 0.4s ease-in-out;
  transition: transform 0s ease-in-out, right 0.4s ease-in-out, -webkit-transform 0s ease-in-out;
  transition-delay: 0.6s, 0s;
  padding: 0 10px;
}
body .card .content h3:before {
  content: attr(data-text);
  color: transparent;
  -webkit-text-stroke: 0.25px rgba(52,44,104,0.4);
  position: absolute;
  -webkit-transform: translateY(125%) skewY(45deg);
          transform: translateY(125%) skewY(45deg);
  transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition-delay: 0.4s;
  left: 10px;
  top: 0;
}
body .card .content:before {
  opacity: 0;
  z-index: 2;
  transition: 0.2s ease-in-out;
}
body .card .content:before,
body .card .content:after,
body .card .content .inner {
  content: "--";
  position: absolute;
  width: 112.5%;
  height: 100%;
  left: 12.5%;
  top: 0;
  background-size: cover;
  transition: 0.5s ease-in-out;
}
body .card .content:after {
  background: transparent;
  transition: 0.5s ease-in-out;
}
body .card .content:before,
body .card .content .inner:after {
  -webkit-filter: saturate(0.7);
          filter: saturate(0.7);
}
body .card .content .inner {
  width: 40%;
  height: 80%;
  left: auto;
  right: 0%;
  z-index: 999;
  top: auto;
  bottom: 0;
  -webkit-transform-origin: left;
          transform-origin: left;
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
  overflow: hidden;
}
body .card .content .inner:before,
body .card .content .inner:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: transparent;
  left: 0;
  top: 0;
  z-index: 2;
  -webkit-transform: scaleX(1);
          transform: scaleX(1);
  -webkit-transform-origin: right;
          transform-origin: right;
}
body .card .content .inner:after {
  background-size: cover;
  z-index: 1;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  -webkit-transform: scale(1.5);
          transform: scale(1.5);
}
body .card.card1 .content:before,
body .card.card1 .content .inner:after {
  background-image: url("https://www.lacor.info/film/si_cetait_de_lamour/photos/si_cetait_de_lamour_07.jpg");
  background-position: 20% center;
}
body .card.card2 .content:before,
body .card.card2 .content .inner:after {
  background-image: url("https://www.lacor.info/film/si_cetait_de_lamour/photos/si_cetait_de_lamour_08.jpg");
  background-position: 55% center;
}
body .card.card3 .content:before,
body .card.card3 .content .inner:after {
  background-image: url("https://www.lacor.info/film/si_cetait_de_lamour/photos/si_cetait_de_lamour_03.jpg");
  background-position: 55% center;
}
body .card.card4 .content:before,
body .card.card4 .content .inner:after {
  background-image: url("https://www.lacor.info/film/si_cetait_de_lamour/photos/si_cetait_de_lamour_02.jpg");
  background-position: 20% center;
}
body .card.card5 .content:before,
body .card.card5 .content .inner:after {
  background-image: url("https://www.lacor.info/film/si_cetait_de_lamour/photos/si_cetait_de_lamour_06.jpg");
  background-position: 95% center;
}
body .card.card6 .content:before,
body .card.card6 .content .inner:after {
  background-image: url("https://www.lacor.info/film/si_cetait_de_lamour/photos/si_cetait_de_lamour_04.jpg");
  background-position: right center;
}
body .card.card7 .content:before,
body .card.card7 .content .inner:after {
  background-image: url("https://www.lacor.info/film/si_cetait_de_lamour/photos/si_cetait_de_lamour_04.jpg");
  background-position: 50% center;
}
body .card.card8 .content:before,
body .card.card8 .content .inner:after {
  background-image: url("https://www.lacor.info/film/si_cetait_de_lamour/photos/si_cetait_de_lamour_01.jpg");
  background-position: 60% center;
}
body .card.card9 .content:before,
body .card.card9 .content .inner:after {
  background-image: url("https://www.lacor.info/film/si_cetait_de_lamour/photos/si_cetait_de_lamour_09.jpg");
  background-position: 80% center;
}
body .card.card9.card10:before,
body .card.card9 .content:before,
body .card.card9.card10 .inner:after,
body .card.card9 .content .inner:after {
  background-image: url("https://www.lacor.info/film/si_cetait_de_lamour/photos/si_cetait_de_lamour_09.jpg");
  background-position: 50% center;
}
body .card:first-of-type {
  pointer-events: all;
  left: 0;
  -webkit-animation: scaleIn 1s ease-in-out 1 forwards;
          animation: scaleIn 1s ease-in-out 1 forwards;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
  z-index: 11;
}
body .card:first-of-type .content:before {
  opacity: 0.35;
  -webkit-animation: scaleDown 0.75s ease-in-out 1 forwards;
          animation: scaleDown 0.75s ease-in-out 1 forwards;
  -webkit-animation-delay: 0.25s;
          animation-delay: 0.25s;
  -webkit-transform: translateX(6.75%);
          transform: translateX(6.75%);
}
@-webkit-keyframes scaleDown {
  to {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@keyframes scaleDown {
  to {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
body .card:first-of-type .content:after {
  background: #241f47;
}
@-webkit-keyframes scaleIn {
  from {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  to {
    -webkit-transform: translateX(-75%);
            transform: translateX(-75%);
  }
}
@keyframes scaleIn {
  from {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  to {
    -webkit-transform: translateX(-75%);
            transform: translateX(-75%);
  }
}
body .card:nth-of-type(2) {
  z-index: 10;
  -webkit-animation: scaleIn2 1s ease-in-out 1 forwards;
          animation: scaleIn2 1s ease-in-out 1 forwards;
  will-change: transform;
}
body .card:nth-of-type(2) .content p {
  transition-delay: 1.85s;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
          clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
body .card:nth-of-type(2) .content:after {
  transition-delay: 0.5s;
}
body .card:nth-of-type(2) .content h3 {
  transition: -webkit-transform 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
  right: 20px;
  -webkit-transform: scaleX(1);
          transform: scaleX(1);
  transition-delay: 2s;
}
body .card:nth-of-type(2) .content h3:before {
  -webkit-transform: translateY(0%);
          transform: translateY(0%);
  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition-delay: 2.25s;
}
body .card:nth-of-type(2) .content h1 {
  right: 100px;
}
body .card:nth-of-type(2) .content .inner {
  -webkit-animation: scaleIn4 0.5s ease-in-out 1 forwards;
          animation: scaleIn4 0.5s ease-in-out 1 forwards;
  -webkit-animation-delay: 1.35s;
          animation-delay: 1.35s;
  will-change: transform;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
          clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
body .card:nth-of-type(2) .content .inner:after {
  -webkit-animation: scaleUp 1s ease-in-out 1 forwards;
          animation: scaleUp 1s ease-in-out 1 forwards;
  -webkit-animation-delay: 1.9s;
          animation-delay: 1.9s;
  will-change: transform;
}
@-webkit-keyframes scaleUp {
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes scaleUp {
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
body .card:nth-of-type(2) .content .inner:before {
  -webkit-animation: scaleIn5 0.35s ease-in-out 1 forwards;
          animation: scaleIn5 0.35s ease-in-out 1 forwards;
  -webkit-animation-delay: 1.75s;
          animation-delay: 1.75s;
  will-change: transform;
}
@-webkit-keyframes scaleIn5 {
  to {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
}
@keyframes scaleIn5 {
  to {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
}
@-webkit-keyframes scaleIn4 {
  to {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
}
@keyframes scaleIn4 {
  to {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
}
body .card:nth-of-type(2) .content:before {
  -webkit-animation: scaleIn3 1.5s ease-in-out 1 forwards;
          animation: scaleIn3 1.5s ease-in-out 1 forwards;
  -webkit-animation-delay: 0.15s;
          animation-delay: 0.15s;
  opacity: 1;
  will-change: transform;
}
@-webkit-keyframes scaleIn3 {
  0% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
    -webkit-clip-path: polygon(0% 0, 100% 0, 100% 100%, 0% 100%);
            clip-path: polygon(0% 0, 100% 0, 100% 100%, 0% 100%);
  }
  50% {
    -webkit-transform: translateX(-12.5%);
            transform: translateX(-12.5%);
    -webkit-clip-path: polygon(0% 0, 100% 0, 100% 100%, 0% 100%);
            clip-path: polygon(0% 0, 100% 0, 100% 100%, 0% 100%);
  }
  100% {
    -webkit-transform: translateX(-12.5%);
            transform: translateX(-12.5%);
    -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
            clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  }
}
@keyframes scaleIn3 {
  0% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
    -webkit-clip-path: polygon(0% 0, 100% 0, 100% 100%, 0% 100%);
            clip-path: polygon(0% 0, 100% 0, 100% 100%, 0% 100%);
  }
  50% {
    -webkit-transform: translateX(-12.5%);
            transform: translateX(-12.5%);
    -webkit-clip-path: polygon(0% 0, 100% 0, 100% 100%, 0% 100%);
            clip-path: polygon(0% 0, 100% 0, 100% 100%, 0% 100%);
  }
  100% {
    -webkit-transform: translateX(-12.5%);
            transform: translateX(-12.5%);
    -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
            clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  }
}
@-webkit-keyframes scaleIn2 {
  from {
    -webkit-transform: translateX(-75%);
            transform: translateX(-75%);
  }
  to {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
}
@keyframes scaleIn2 {
  from {
    -webkit-transform: translateX(-75%);
            transform: translateX(-75%);
  }
  to {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
}
body .card:nth-of-type(3) {
  z-index: 3;
}
body .card:nth-of-type(3) .content:before,
body .card:nth-of-type(3) .content:after {
  opacity: 0;
  transition: 0s;
  transition-delay: 0s;
}
body .card:nth-of-type(3) .content .inner {
  -webkit-transform: scaleX(1);
          transform: scaleX(1);
  transition: 0.5s ease-in-out;
  -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
          clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
}
body .card:nth-of-type(3) .content .inner:before {
  display: none;
}
body .card:nth-of-type(3) .content .inner:after {
  -webkit-transform: scale(1);
          transform: scale(1);
}
@-webkit-keyframes title {
  75% {
    top: 24%;
    color: #f2f0ff;
  }
  80% {
    top: 14%;
    color: rgba(242,240,255,0.8);
  }
  85% {
    top: 20%;
    color: rgba(242,240,255,0.7);
  }
  90% {
    top: 13%;
    color: rgba(242,240,255,0.6);
  }
  95% {
    top: 16%;
    color: rgba(242,240,255,0.5);
  }
  98% {
    top: 14.5%;
    color: rgba(242,240,255,0.4);
  }
  100% {
    top: 15%;
    color: rgba(242,240,255,0.4);
  }
}
@keyframes title {
  75% {
    top: 24%;
    color: #f2f0ff;
  }
  80% {
    top: 14%;
    color: rgba(242,240,255,0.8);
  }
  85% {
    top: 20%;
    color: rgba(242,240,255,0.7);
  }
  90% {
    top: 13%;
    color: rgba(242,240,255,0.6);
  }
  95% {
    top: 16%;
    color: rgba(242,240,255,0.5);
  }
  98% {
    top: 14.5%;
    color: rgba(242,240,255,0.4);
  }
  100% {
    top: 15%;
    color: rgba(242,240,255,0.4);
  }
}
@media all and (max-width: 320px) {
  h1 {
    font-size: 0.9em !important;
  }
  p {
    width: 70% !important;
    left: calc(25% + 10px) !important;
    display: block;
    font-size: 0.7em !important;
    line-height: 1.2 !important;
  }
  .inner:before {
    width: 100% !important;
  }
  .inner:after {
    display: none;
  }
}
@media all and (max-width: 600px) {
  p {
    width: 67% !important;
    font-size: 0.8em !important;
    top: 100%;
    -webkit-transform: translateY(-90%);
            transform: translateY(-90%);
    height: 98%;
  }
  .inner:before {
    width: 100% !important;
  }
  .inner:after {
    display: none;
  }
}
@media all and (min-width: 601px) {
  p {
    font-size: 0.7em !important;
  }
}
@media all and (min-width: 800px) {
  p {
    font-size: 0.85em !important;
  }
}
@media all and (min-width: 1280px) {
  p {
    font-size: 1em;
  }
}