<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>3D Art - Motion</title>

</head>

<body>

  <!-- Start of Coding... -->

  <!DOCTYPE html>
  <html lang="en" class="no-js">

  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>3D Art | Motion</title>
    <meta name="description" content="Concrétisons votre idée de NFT. Choisissez parmi plusieurs styles graphiques celui qui correspond à votre vision." />
    <meta name="keywords" content="nft, 3d, art, numerique, artiste, collection, image, bitcoin" />
    <meta name="author" content="ArtMotion" />
    <link rel="shortcut icon" href="favicon.ico">
    <link href="https://fonts.googleapis.com/css?family=Josefin+Sans:400,700" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="normalize.css" />
    <link rel="stylesheet" type="text/css" href="demos.css" />
    <script>
      document.documentElement.className = 'js';
    </script>
    <style>
      body #cdawrap {
        background: transparent;
        z-index: 999;
        border: 1px solid #aaa;
        height: auto;
        padding: 13px;
        min-height: 126px;
        width: 320px;
        bottom: auto;
        right: calc(2vw + 10em);
        top: calc(2vw + 0.5em);
        text-align: left;
      }

      body #cdawrap #carbonads {
        position: relative;
        padding: 0 0 0 145px;
      }

      body #cdawrap .carbon-img {
        position: absolute;
        top: 0;
        left: 0;
      }

      body #cdawrap .carbon-text {
        text-align: left;
        letter-spacing: 0;
      }
    </style>
  </head>

  <body>
    <svg class="hidden">
      <symbol id="icon-arrow" viewBox="0 0 24 24">
        <title>arrow</title>
        <polygon points="6.3,12.8 20.9,12.8 20.9,11.2 6.3,11.2 10.2,7.2 9,6 3.1,12 9,18 10.2,16.8 " />
      </symbol>
      <symbol id="icon-drop" viewBox="0 0 24 24">
        <title>drop</title>
        <path d="M12,21c-3.6,0-6.6-3-6.6-6.6C5.4,11,10.8,4,11.4,3.2C11.6,3.1,11.8,3,12,3s0.4,0.1,0.6,0.3c0.6,0.8,6.1,7.8,6.1,11.2C18.6,18.1,15.6,21,12,21zM12,4.8c-1.8,2.4-5.2,7.4-5.2,9.6c0,2.9,2.3,5.2,5.2,5.2s5.2-2.3,5.2-5.2C17.2,12.2,13.8,7.3,12,4.8z" />
        <path d="M12,18.2c-0.4,0-0.7-0.3-0.7-0.7s0.3-0.7,0.7-0.7c1.3,0,2.4-1.1,2.4-2.4c0-0.4,0.3-0.7,0.7-0.7c0.4,0,0.7,0.3,0.7,0.7C15.8,16.5,14.1,18.2,12,18.2z" />
      </symbol>
      <symbol id="icon-menu" viewBox="0 0 24 24">
        <title>menu</title>
        <path d="M24,5.8H0v-2h24V5.8z M19.8,11H4.2v2h15.6V11z M24,18.2H0v2h24V18.2z" />
      </symbol>
      <symbol id="icon-cross" viewBox="0 0 24 24">
        <title>cross</title>
        <path d="M13.4,12l7.8,7.8l-1.4,1.4l-7.8-7.8l-7.8,7.8l-1.4-1.4l7.8-7.8L2.7,4.2l1.4-1.4l7.8,7.8l7.8-7.8l1.4,1.4L13.4,12z" />
      </symbol>
      <symbol id="icon-info" viewBox="0 0 20 20">
        <title>info</title>
        <circle style="fill:#fff" cx="10" cy="10" r="9.1" />
        <path d="M10,0C4.5,0,0,4.5,0,10s4.5,10,10,10s10-4.5,10-10S15.5,0,10,0z M10,18.6c-4.7,0-8.6-3.9-8.6-8.6S5.3,1.4,10,1.4s8.6,3.9,8.6,8.6S14.7,18.6,10,18.6z M10.7,5C10.9,5.2,11,5.5,11,5.7s-0.1,0.5-0.3,0.7c-0.2,0.2-0.4,0.3-0.7,0.3c-0.3,0-0.5-0.1-0.7-0.3C9.1,6.2,9,6,9,5.7S9.1,5.2,9.3,5C9.5,4.8,9.7,4.7,10,4.7C10.3,4.7,10.5,4.8,10.7,5z M9.3,8.3h1.4v7.2H9.3V8.3z" />
      </symbol>
    </svg>
    <div class="container">
      <div class="scroller">
        <div class="room room--current">
          <div class="room__side room__side--back">
            <img class="room__img" src="./images/monkey_mauv.png" alt="Some image" />
            <img class="room__img" src="./images/monkey_or.png" alt="Some image" />
          </div>
          <div class="room__side room__side--left">
            <img class="room__img" src="./images/monkey_blue1.png" alt="Some image" />
            <img class="room__img" src="./images/monkey_esp2.png" alt="Some image" />
            <img class="room__img" src="./images/monkey_gat3.png" alt="Some image" />
          </div>
          <div class="room__side room__side--right">
            <img class="room__img" src="./images/monkey_or4.png" alt="Some image" />
            <img class="room__img" src="./images/monkey_red5.png" alt="Some image" />
            <img class="room__img" src="./images/monkey_mauv.png" alt="Some image" />
          </div>
          <div class="room__side room__side--bottom"></div>
        </div><!-- /room -->
        <div class="room">
          <div class="room__side room__side--back">
            <img class="room__img" src="./images/dia7.png" alt="Some image" />
            <img class="room__img" src="./images/dia1.png" alt="Some image" />
          </div>
          <div class="room__side room__side--left">
            <img class="room__img" src="./images/dia2.png" alt="Some image" />
            <img class="room__img" src="./images/dia1.png" alt="Some image" />
            <img class="room__img" src="./images/dia3.png" alt="Some image" />
          </div>
          <div class="room__side room__side--right">
            <img class="room__img" src="./images/dia4.png" alt="Some image" />
            <img class="room__img" src="./images/dia5.png" alt="Some image" />
            <img class="room__img" src="./images/dia6.png" alt="Some image" />
          </div>
          <div class="room__side room__side--bottom"></div>
        </div><!-- /room -->
        <div class="room">
          <div class="room__side room__side--back">
            <img class="room__img" src="https://tympanus.net/Development/Exhibition/img/set3/1.jpg" alt="Some image" />
            <img class="room__img" src="https://tympanus.net/Development/Exhibition/img/set3/6.jpg" alt="Some image" />
          </div>
          <div class="room__side room__side--left">
            <img class="room__img" src="https://tympanus.net/Development/Exhibition/img/set3/3.jpg" alt="Some image" />
            <img class="room__img" src="https://tympanus.net/Development/Exhibition/img/set3/4.jpg" alt="Some image" />
            <img class="room__img" src="https://tympanus.net/Development/Exhibition/img/set3/5.jpg" alt="Some image" />
          </div>
          <div class="room__side room__side--right">
            <img class="room__img" src="https://tympanus.net/Development/Exhibition/img/set3/8.jpg" alt="Some image" />
            <img class="room__img" src="https://tympanus.net/Development/Exhibition/img/set3/7.jpg" alt="Some image" />
            <img class="room__img" src="https://tympanus.net/Development/Exhibition/img/set3/2.jpg" alt="Some image" />
          </div>
          <div class="room__side room__side--bottom"></div>
        </div><!-- /room -->
        <div class="room">
          <div class="room__side room__side--back">
            <img class="room__img" src="https://tympanus.net/Development/Exhibition/img/set1/3.jpg" alt="Some image" />
            <img class="room__img" src="https://tympanus.net/Development/Exhibition/img/set1/6.jpg" alt="Some image" />
          </div>
          <div class="room__side room__side--left">
            <img class="room__img" src="https://tympanus.net/Development/Exhibition/img/set1/7.jpg" alt="Some image" />
            <img class="room__img" src="https://tympanus.net/Development/Exhibition/img/set1/1.jpg" alt="Some image" />
            <img class="room__img" src="https://tympanus.net/Development/Exhibition/img/set1/2.jpg" alt="Some image" />
          </div>
          <div class="room__side room__side--right">
            <img class="room__img" src="https://tympanus.net/Development/Exhibition/img/set1/4.jpg" alt="Some image" />
            <img class="room__img" src="https://tympanus.net/Development/Exhibition/img/set1/5.jpg" alt="Some image" />
            <img class="room__img" src="https://tympanus.net/Development/Exhibition/img/set1/8.jpg" alt="Some image" />
          </div>
          <div class="room__side room__side--bottom"></div>
        </div><!-- /room -->
        <div class="room">
          <div class="room__side room__side--back">
            <img class="room__img" src="https://tympanus.net/Development/Exhibition/img/set5/7.jpg" alt="Some image" />
            <img class="room__img" src="https://tympanus.net/Development/Exhibition/img/set5/5.jpg" alt="Some image" />
          </div>
          <div class="room__side room__side--left">
            <img class="room__img" src="https://tympanus.net/Development/Exhibition/img/set5/6.jpg" alt="Some image" />
            <img class="room__img" src="https://tympanus.net/Development/Exhibition/img/set5/4.jpg" alt="Some image" />
            <img class="room__img" src="https://tympanus.net/Development/Exhibition/img/set5/3.jpg" alt="Some image" />
          </div>
          <div class="room__side room__side--right">
            <img class="room__img" src="https://tympanus.net/Development/Exhibition/img/set5/2.jpg" alt="Some image" />
            <img class="room__img" src="https://tympanus.net/Development/Exhibition/img/set5/1.jpg" alt="Some image" />
            <img class="room__img" src="https://tympanus.net/Development/Exhibition/img/set5/8.jpg" alt="Some image" />
          </div>
          <div class="room__side room__side--bottom"></div>
        </div><!-- /room -->
      </div>
    </div><!-- /container -->
    <div class="content">
      <header class="codrops-header">
        <div class="codrops-links">
          <a class="codrops-icon codrops-icon--prev" href="https://facebook.com/groups/freewebsitecode/" title="Previous Demo"><svg class="icon icon--arrow">
              <use xlink:href="#icon-arrow"></use>
            </svg></a>
          <a class="codrops-icon codrops-icon--drop" href="https://facebook.com/groups/freewebsitecode/" title="Back to the article"><svg class="icon icon--drop">
              <use xlink:href="#icon-drop"></use>
            </svg></a>
        </div>
        <h1 class="codrops-header__title">3D Art | Motion</h1>
        <div class="subject">NFT : Une œuvre unique, rien qu’à vous !</div>
        <button class="btn btn--info btn--toggle">
          <svg class="icon icon--info">
            <use xlink:href="#icon-info"></use>
          </svg>
          <svg class="icon icon--cross">
            <use xlink:href="#icon-cross"></use>
          </svg>
        </button>
        <button class="btn btn--menu btn--toggle">
          <svg class="icon icon--menu">
            <use xlink:href="#icon-menu"></use>
          </svg>
          <svg class="icon icon--cross">
            <use xlink:href="#icon-cross"></use>
          </svg>
        </button>
        <div class="overlay overlay--menu">
          <ul class="menu">
            <li class="menu__item menu__item--current"><a class="menu__link" href="#">Nos services</a></li>
            <li class="menu__item"><a class="menu__link" href="#">Conseil</a></li>
            <li class="menu__item"><a class="menu__link" href="#">Nos clients</a></li>
            <li class="menu__item"><a class="menu__link" href="#">Contact</a></li>
          </ul>
        </div>
        <div class="overlay overlay--info">
          <p class="info">&ldquo;Créateurs de NFT&rdquo; est un artiste qui produit de l’art numérique. Il
            encrypte ensuite ses créations dans une blockchain. Cette fois-ci,
            point de cryptomonnaie comme le Bitcoin, il s’agit d’art numérique.
            Un NFT est le lien entre une œuvre et son certificat unique. Vous avez une idée d’image
            numérique pour votre NFT ? Nos
            artistes s’occupent de la réaliser.
          </p>
        </div>
      </header>

      <h4 class="location">©2024 3D Art Motion &amp; Créateurs de NFT</h4>
      <div class="slides">
        <div class="slide">
          <h2 class="slide__name">Votre <br />Création</h2>
          <h3 class="slide__title">
            <span>&ldquo;Trouver mon style&rdquo;</span>
            <a href="#myOverlay1">
              <div class="slide__number">Votre Devis <strong>gratuit</strong></div>
            </a>
          </h3>
          <div id="myOverlay1" class="my-overlay">
            <div class="inner">
              1) Modal content will be here to be styles as you wish. Modal content will be here to be styles as you wish. Modal content will be here to be styles as you wish. Modal content will be here to be styles as you wish. Modal content will be here to be styles as you wish.
            </div>
            <a class="close-modal" href="#">X</a>
          </div>
          <p class="slide__date">Art Motion – Créateurs de NFT</p>
        </div>
        <div class="slide">
          <h2 class="slide__name">Créateur <br />NFT</h2>
          <h3 class="slide__title">
            <span>&ldquo;Comment créer l’image de son NFT ?&rdquo;</span>
            <a href="#myOverlay2">
              <span class="slide__number">En Savoir test<strong>plus</strong></span>
            </a>
          </h3>
          <div id="myOverlay2" class="my-overlay">
            <div class="inner">
              2) Modal content will be here to be styles as you wish. Modal content will be here to be styles as you wish. Modal content will be here to be styles as you wish. Modal content will be here to be styles as you wish. Modal content will be here to be styles as you wish.
            </div>
            <a class="close-modal" href="#">X</a>
          </div>
          <p class="slide__date">Des images – de haute qualité</p>
        </div>
        <div class="slide">
          <h2 class="slide__name">Créer ma <br />collection</h2>
          <h3 class="slide__title">
            <span>&ldquo;Votre collection de NFTs&rdquo;</span>
            <a href="#myOverlay3">
              <div class="slide__number">En Savoir <strong>plus</strong></div>
            </a>
          </h3>
          <div id="myOverlay3" class="my-overlay">
            <div class="inner">
              3) Modal content will be here to be styles as you wish. Modal content will be here to be styles as you wish. Modal content will be here to be styles as you wish. Modal content will be here to be styles as you wish. Modal content will be here to be styles as you wish.
            </div>
            <a class="close-modal" href="#">X</a>
          </div>
          <p class="slide__date">Acheter une collection – de NFT</p>
        </div>
        <div class="slide">
          <h2 class="slide__name">Faites la <br />promotion</h2>
          <h3 class="slide__title">
            <span>&ldquo;Faites la promotion de vos NFTs&rdquo;</span>
            <a href="#myOverlay4">
              <div class="slide__number">En Savoir <strong>plus</strong></div>
            </a>
          </h3>
          <div id="myOverlay4" class="my-overlay">
            <div class="inner">
              4) Modal content will be here to be styles as you wish. Modal content will be here to be styles as you wish. Modal content will be here to be styles as you wish. Modal content will be here to be styles as you wish. Modal content will be here to be styles as you wish.
            </div>
            <a class="close-modal" href="#">X</a>
          </div>
          <p class="slide__date">Une vidéo de qualité – professionnelle</p>
        </div>
        <div class="slide">
          <h2 class="slide__name">Une œuvre <br />unique</h2>
          <h3 class="slide__title">
            <span>&ldquo;NFT: Une œuvre unique, rien qu’à vous!&rdquo;</span>
            <a href="#myOverlay5">
              <div class="slide__number">En Savoir <strong>plus</strong></div>
            </a>
          </h3>
          <div id="myOverlay5" class="my-overlay">
            <div class="inner">
              5) Modal content will be here to be styles as you wish. Modal content will be here to be styles as you wish. Modal content will be here to be styles as you wish. Modal content will be here to be styles as you wish. Modal content will be here to be styles as you wish.
            </div>
            <a class="close-modal" href="#">X</a>
          </div>
          <p class="slide__date">Nous vous fournissons un contrat – avec les droits.</p>
        </div>
      </div>
      <nav class="nav">
        <button class="btn btn--nav btn--nav-left">
          <svg class="nav-icon nav-icon--left" width="42px" height="12px" viewBox="0 0 70 20">
            <path class="nav__triangle" d="M52.5,10L70,0v20L52.5,10z" />
            <path class="nav__line" d="M55.1,11.4H0V8.6h55.1V11.4z" />
          </svg>
        </button>
        <button class="btn btn--nav btn--nav-right">
          <svg class="nav-icon nav-icon--right" width="42px" height="12px" viewBox="0 0 70 20">
            <path class="nav__triangle" d="M52.5,10L70,0v20L52.5,10z" />
            <path class="nav__line" d="M55.1,11.4H0V8.6h55.1V11.4z" />
          </svg>
        </button>
      </nav>
    </div><!-- /content -->
    <div class="overlay overlay--loader overlay--active">
      <div class="loader">
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <script src="https://tympanus.net/Development/Exhibition/js/anime.min.js"></script>
    <script src="https://tympanus.net/Development/Exhibition/js/imagesloaded.pkgd.min.js"></script>
    <script src="/js/main.js"></script>
    <!-- For the demo ad only -->
    <script src="/js/demoad.js"></script>
  </body>

  </html>
  <!-- partial -->

</body>

</html>
*,
*::after,
*::before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-family: "Josefin Sans", sans-serif;
  letter-spacing: 0.1em;
  color: #1f1f21;
  background: #cecece;
  height: 100vh;
  overflow: hidden;
}

a {
  text-decoration: none;
  color: #000;
  outline: none;
}

a:hover,
a:focus {
  color: #c2292e;
}

.hidden {
  position: absolute;
  overflow: hidden;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Icons */
.icon {
  display: block;
  width: 1.5em;
  height: 1.5em;
  margin: 0 auto;
  fill: currentColor;
}

.btn {
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

.btn:focus {
  outline: none;
}

.btn:hover {
  color: #c2292e;
}

.btn--nav {
  font-size: 2em;
  pointer-events: auto;
}

.nav-icon--right {
  transform: scale3d(-1, -1, 1);
}

.nav__triangle,
.nav__line {
  transition: transform 0.3s;
  fill: currentColor;
}

.btn--nav:hover .nav__triangle {
  transform: translate3d(-54px, 0, 0);
}

.btn--nav:hover .nav__line {
  transform: translate3d(17px, 0, 0);
}

.btn--info {
  margin: 0 2em 0 auto;
}

.btn--toggle.btn--active {
  z-index: 100;
  color: #fff;
}

.btn--toggle.btn--active:hover {
  color: #1f1f21;
}

.btn--toggle .icon:nth-child(2),
.btn--toggle.btn--active .icon:first-child {
  display: none;
}

.btn--toggle.btn--active .icon:nth-child(2) {
  display: block;
}

/* two seats on each side for free space */

.container {
  position: relative;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  perspective: 2000px;
}

.scroller {
  height: 100%;
  transform-style: preserve-3d;
}

.room {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 100vh;
  margin: -50vh 0 0 -50vw;
  pointer-events: none;
  opacity: 0;
  transform-style: preserve-3d;
}

.room--current {
  pointer-events: auto;
  opacity: 1;
}

.room__side {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  transform-style: preserve-3d;
}

.room__side--left,
.room__side--right {
  width: 4000px;
  /* depth */
  height: 100vh;
  background: #dbdbdb;
}

.room__side--back {
  width: 100vw;
  height: 100vh;
  background: #e9e9e9;
  box-shadow: 0 0 0 2px #e9e9e9;
  transform: translate3d(0, 0, -4000px) rotate3d(1, 0, 0, 0.1deg)
    rotate3d(1, 0, 0, 0deg);
  /* Rotation due to rendering bug in Chrome when loader slides up (images seem cut off) */
}

.room__side--right {
  right: 0;
  justify-content: flex-end;
  transform: rotate3d(0, 1, 0, -90.03deg);
  transform-origin: 100% 50%;
}

.room__side--left {
  justify-content: flex-start;
  transform: rotate3d(0, 1, 0, 90deg);
  transform-origin: 0 50%;
}

.room__side--bottom {
  width: 100vw;
  /* depth */
  height: 4000px;
  background: #d0d0d0;
  transform: rotate3d(1, 0, 0, 90deg) translate3d(0, -4000px, 0);
  transform-origin: 50% 0%;
}

.room__side--bottom {
  top: 100%;
}

/* Inner elements */
.room__img {
  flex: none;
  max-width: 40%;
  max-height: 60%;
  margin: 0 5%;
  transform: translate3d(0, 0, 10px);
  backface-visibility: hidden;
}

/* Content */
.content {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  padding: 2vw;
}

/* Header */
.codrops-header {
  display: flex;
  align-items: center;
}

.codrops-header__title {
  font-size: 1.165em;
  font-weight: normal;
  margin: 0.5em 0 0 0;
}

/* Top Navigation Style */
.codrops-links {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.75em;
  margin: 0 2em 0 0;
  text-align: center;
  white-space: nowrap;
  border: 2px solid;
  background: #fff;
}

.codrops-links::after {
  content: "";
  position: absolute;
  top: -5%;
  left: calc(50% - 1px);
  width: 2px;
  height: 110%;
  background: currentColor;
  transform: rotate3d(0, 0, 1, 22.5deg);
}

.codrops-icon {
  display: inline-block;
  padding: 0 0.65em;
}

.subject {
  font-size: 1.5em;
  margin: 0 auto;
  color: #c2292e;
}

/* Location */
.location {
  font-size: 1.165em;
  font-weight: normal;
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  margin: 0 1.5em;
  padding: 6em 0;
  text-align: center;
  pointer-events: none;
  color: #c2292e;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
}

/* Slides */
.slides {
  position: relative;
  flex: 1;
}

.slide {
  position: absolute;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 70vw;
  height: 100%;
  margin: 7vh 0 0 10vw;
  pointer-events: none;
  opacity: 0;
}

.slide--current {
  pointer-events: auto;
  opacity: 1;
}

.slide__name {
  font-size: 15vw;
  line-height: 0.8;
  margin: 0;
  padding: 0 0 0 5vw;
  text-indent: -5vw;
  letter-spacing: -0.05em;
  text-transform: lowercase;
  color: #fff;
}

.slide__title,
.slide__date {
  text-align: right;
}

.slide__title {
  font-size: 3vw;
  font-weight: normal;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin: 0.75em 0 0 0;
  color: #fff;
}

.slide__date {
  font-size: 1.5vw;
  font-weight: bold;
  margin: 1.15em 0 0 0;
  text-transform: uppercase;
  color: #c2292e;
}

.slide__number {
  font-size: 0.4em;
  display: inline-block;
  margin: 0.5em 0 0 0;
  padding: 0.4em 0.5em 0.25em 0.5em;
  color: #fff;
  background: #c2292e;
}

/* Nav */
.nav {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin: auto 0 0 0;
  pointer-events: none;
}

/* Overlay with menu */
.overlay {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
}

.overlay--loader {
  z-index: 1000;
  background: #fff;
}

.overlay--info {
  background: rgba(23, 94, 236, 0.4);
}

.overlay--menu {
  background: rgba(255, 25, 25, 0.66);
}

.js .overlay--active {
  pointer-events: auto;
  opacity: 1;
}

.menu {
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu__item {
  font-size: 7vh;
  margin: 0.25em 0;
  padding: 0;
  text-transform: lowercase;
}

.menu__item--current {
  font-weight: bold;
}

.menu__link {
  color: #fff;
}

.menu__link:focus,
.menu__link:hover {
  color: #1f1f21;
}

.info {
  color: white;
  font-size: 1.5em;
  line-height: 1.4;
  width: 60vw;
  min-width: calc(320px - 2em);
  max-width: 900px;
  margin: 0;
  padding: 1em;
}

.loader {
  display: flex;
}

.loader div {
  width: 30px;
  height: 30px;
  margin: -30px 0.2em 0;
  border: 4px solid;
  background: #e9e9e9;
  animation: anim-loader 0.8s alternate infinite forwards;
  animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

.loader div:nth-child(2) {
  border-radius: 50%;
  background: #c2292e;
  animation-delay: 0.15s;
}

.loader div:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes anim-loader {
  100% {
    transform: translate3d(0, 30px, 0) scale3d(0.9, 0.9, 1);
  }
}

@media screen and (max-width: 50em) {
  .subject {
    display: none;
  }

  .codrops-links {
    margin: 0 0.5em 0 0;
  }

  .btn--info {
    margin-right: 1.25em;
  }

  .location {
    font-size: 0.85em;
    position: relative;
    height: auto;
    margin: 1em 0 0 0;
    padding: 0;
    text-align: left;
    -webkit-writing-mode: horizontal-tb;
    writing-mode: horizontal-tb;
  }

  .slide {
    width: 100%;
    margin: 7vh 0 0 0;
  }

  .slide__name {
    padding: 0 0 0 12vw;
  }

  .slide__title {
    font-size: 1.5em;
  }

  .slide__date {
    font-size: 0.65em;
  }

  .nav {
    position: absolute;
    top: 7em;
    left: 0;
    width: 100%;
    padding: 1em;
  }

  .nav__triangle {
    transform: translate3d(-54px, 0, 0);
  }

  .nav__line {
    transform: translate3d(17px, 0, 0);
  }

  .btn--nav:hover {
    color: currentColor;
  }

  .info {
    font-size: 0.95em;
    width: 100vw;
  }
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}

audio,
canvas,
video {
  display: inline-block;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

[hidden] {
  display: none;
}

html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

a:focus {
  outline: thin dotted;
}

a:active,
a:hover {
  outline: 0;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

abbr[title] {
  border-bottom: 1px dotted;
}

b,
strong {
  font-weight: bold;
}

dfn {
  font-style: italic;
}

hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}

mark {
  background: #ff0;
  color: #000;
}

code,
kbd,
pre,
samp {
  font-family: monospace, serif;
  font-size: 1em;
}

pre {
  white-space: pre-wrap;
}

q {
  quotes: "\201C""\201D""\2018""\2019";
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

img {
  border: 0;
}

svg:not(:root) {
  overflow: hidden;
}

figure {
  margin: 0;
}

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

legend {
  border: 0;
  padding: 0;
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  margin: 0;
}

button,
input {
  line-height: normal;
}

button,
select {
  text-transform: none;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}

button[disabled],
html input[disabled] {
  cursor: default;
}

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

input[type="search"] {
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

textarea {
  overflow: auto;
  vertical-align: top;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* CSS overlay code*/

/* Overlay with menu */
.my-overlay {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: 1s ease;
}

.my-overlay:target {
  pointer-events: auto;
  opacity: 1;
  background: rgba(255, 25, 25, 0.8);
  color: #fff;
}
.close-modal {
  position: absolute;
  right: 1rem;
  top: 1rem;
  font-size: 2rem;
}
.inner {
  padding: 1rem;
  max-width: 800px;
  margin: auto;
}
var $jscomp$this = this;
(function (u, r) {
  "function" === typeof define && define.amd
    ? define([], r)
    : "object" === typeof module && module.exports
    ? (module.exports = r())
    : (u.anime = r());
})(this, function () {
  function u(a) {
    if (!g.col(a))
      try {
        return document.querySelectorAll(a);
      } catch (b) {}
  }
  function r(a) {
    return a.reduce(function (a, c) {
      return a.concat(g.arr(c) ? r(c) : c);
    }, []);
  }
  function v(a) {
    if (g.arr(a)) return a;
    g.str(a) && (a = u(a) || a);
    return a instanceof NodeList || a instanceof HTMLCollection
      ? [].slice.call(a)
      : [a];
  }
  function E(a, b) {
    return a.some(function (a) {
      return a === b;
    });
  }
  function z(a) {
    var b = {},
      c;
    for (c in a) b[c] = a[c];
    return b;
  }
  function F(a, b) {
    var c = z(a),
      d;
    for (d in a) c[d] = b.hasOwnProperty(d) ? b[d] : a[d];
    return c;
  }
  function A(a, b) {
    var c = z(a),
      d;
    for (d in b) c[d] = g.und(a[d]) ? b[d] : a[d];
    return c;
  }
  function R(a) {
    a = a.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i, function (a, b, c, h) {
      return b + b + c + c + h + h;
    });
    var b = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(a);
    a = parseInt(b[1], 16);
    var c = parseInt(b[2], 16),
      b = parseInt(b[3], 16);
    return "rgb(" + a + "," + c + "," + b + ")";
  }
  function S(a) {
    function b(a, b, c) {
      0 > c && (c += 1);
      1 < c && --c;
      return c < 1 / 6
        ? a + 6 * (b - a) * c
        : 0.5 > c
        ? b
        : c < 2 / 3
        ? a + (b - a) * (2 / 3 - c) * 6
        : a;
    }
    var c = /hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.exec(a);
    a = parseInt(c[1]) / 360;
    var d = parseInt(c[2]) / 100,
      c = parseInt(c[3]) / 100;
    if (0 == d) d = c = a = c;
    else {
      var e = 0.5 > c ? c * (1 + d) : c + d - c * d,
        k = 2 * c - e,
        d = b(k, e, a + 1 / 3),
        c = b(k, e, a);
      a = b(k, e, a - 1 / 3);
    }
    return "rgb(" + 255 * d + "," + 255 * c + "," + 255 * a + ")";
  }
  function w(a) {
    if (
      (a = /([\+\-]?[0-9#\.]+)(%|px|pt|em|rem|in|cm|mm|ex|pc|vw|vh|deg|rad|turn)?/.exec(
        a
      ))
    )
      return a[2];
  }
  function T(a) {
    if (-1 < a.indexOf("translate")) return "px";
    if (-1 < a.indexOf("rotate") || -1 < a.indexOf("skew")) return "deg";
  }
  function G(a, b) {
    return g.fnc(a) ? a(b.target, b.id, b.total) : a;
  }
  function B(a, b) {
    if (b in a.style)
      return (
        getComputedStyle(a).getPropertyValue(
          b.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase()
        ) || "0"
      );
  }
  function H(a, b) {
    if (g.dom(a) && E(U, b)) return "transform";
    if (g.dom(a) && (a.getAttribute(b) || (g.svg(a) && a[b])))
      return "attribute";
    if (g.dom(a) && "transform" !== b && B(a, b)) return "css";
    if (null != a[b]) return "object";
  }
  function V(a, b) {
    var c = T(b),
      c = -1 < b.indexOf("scale") ? 1 : 0 + c;
    a = a.style.transform;
    if (!a) return c;
    for (var d = [], e = [], k = [], h = /(\w+)\((.+?)\)/g; (d = h.exec(a)); )
      e.push(d[1]), k.push(d[2]);
    a = k.filter(function (a, c) {
      return e[c] === b;
    });
    return a.length ? a[0] : c;
  }
  function I(a, b) {
    switch (H(a, b)) {
      case "transform":
        return V(a, b);
      case "css":
        return B(a, b);
      case "attribute":
        return a.getAttribute(b);
    }
    return a[b] || 0;
  }
  function J(a, b) {
    var c = /^(\*=|\+=|-=)/.exec(a);
    if (!c) return a;
    b = parseFloat(b);
    a = parseFloat(a.replace(c[0], ""));
    switch (c[0][0]) {
      case "+":
        return b + a;
      case "-":
        return b - a;
      case "*":
        return b * a;
    }
  }
  function C(a) {
    return g.obj(a) && a.hasOwnProperty("totalLength");
  }
  function W(a, b) {
    function c(c) {
      c = void 0 === c ? 0 : c;
      return a.el.getPointAtLength(1 <= b + c ? b + c : 0);
    }
    var d = c(),
      e = c(-1),
      k = c(1);
    switch (a.property) {
      case "x":
        return d.x;
      case "y":
        return d.y;
      case "angle":
        return (180 * Math.atan2(k.y - e.y, k.x - e.x)) / Math.PI;
    }
  }
  function K(a, b) {
    var c = /-?\d*\.?\d+/g;
    a = C(a) ? a.totalLength : a;
    if (g.col(a)) b = g.rgb(a) ? a : g.hex(a) ? R(a) : g.hsl(a) ? S(a) : void 0;
    else {
      var d = w(a);
      a = d ? a.substr(0, a.length - d.length) : a;
      b = b ? a + b : a;
    }
    b += "";
    return {
      original: b,
      numbers: b.match(c) ? b.match(c).map(Number) : [0],
      strings: b.split(c)
    };
  }
  function X(a, b) {
    return b.reduce(function (b, d, e) {
      return b + a[e - 1] + d;
    });
  }
  function L(a) {
    return (a ? r(g.arr(a) ? a.map(v) : v(a)) : []).filter(function (a, c, d) {
      return d.indexOf(a) === c;
    });
  }
  function Y(a) {
    var b = L(a);
    return b.map(function (a, d) {
      return { target: a, id: d, total: b.length };
    });
  }
  function Z(a, b) {
    var c = z(b);
    if (g.arr(a)) {
      var d = a.length;
      2 !== d || g.obj(a[0])
        ? g.fnc(b.duration) || (c.duration = b.duration / d)
        : (a = { value: a });
    }
    return v(a)
      .map(function (a, c) {
        c = c ? 0 : b.delay;
        a = g.obj(a) && !C(a) ? a : { value: a };
        g.und(a.delay) && (a.delay = c);
        return a;
      })
      .map(function (a) {
        return A(a, c);
      });
  }
  function aa(a, b) {
    var c = {},
      d;
    for (d in a) {
      var e = G(a[d], b);
      g.arr(e) &&
        ((e = e.map(function (a) {
          return G(a, b);
        })),
        1 === e.length && (e = e[0]));
      c[d] = e;
    }
    c.duration = parseFloat(c.duration);
    c.delay = parseFloat(c.delay);
    return c;
  }
  function ba(a) {
    return g.arr(a) ? x.apply(this, a) : M[a];
  }
  function ca(a, b) {
    var c;
    return a.tweens.map(function (d) {
      d = aa(d, b);
      var e = d.value,
        k = I(b.target, a.name),
        h = c ? c.to.original : k,
        h = g.arr(e) ? e[0] : h,
        n = J(g.arr(e) ? e[1] : e, h),
        k = w(n) || w(h) || w(k);
      d.isPath = C(e);
      d.from = K(h, k);
      d.to = K(n, k);
      d.start = c ? c.end : a.offset;
      d.end = d.start + d.delay + d.duration;
      d.easing = ba(d.easing);
      d.elasticity = (1e3 - Math.min(Math.max(d.elasticity, 1), 999)) / 1e3;
      g.col(d.from.original) && (d.round = 1);
      return (c = d);
    });
  }
  function da(a, b) {
    return r(
      a.map(function (a) {
        return b.map(function (b) {
          var c = H(a.target, b.name);
          if (c) {
            var d = ca(b, a);
            b = {
              type: c,
              property: b.name,
              animatable: a,
              tweens: d,
              duration: d[d.length - 1].end,
              delay: d[0].delay
            };
          } else b = void 0;
          return b;
        });
      })
    ).filter(function (a) {
      return !g.und(a);
    });
  }
  function N(a, b, c) {
    var d = "delay" === a ? Math.min : Math.max;
    return b.length
      ? d.apply(
          Math,
          b.map(function (b) {
            return b[a];
          })
        )
      : c[a];
  }
  function ea(a) {
    var b = F(fa, a),
      c = F(ga, a),
      d = Y(a.targets),
      e = [],
      g = A(b, c),
      h;
    for (h in a)
      g.hasOwnProperty(h) ||
        "targets" === h ||
        e.push({ name: h, offset: g.offset, tweens: Z(a[h], c) });
    a = da(d, e);
    return A(b, {
      animatables: d,
      animations: a,
      duration: N("duration", a, c),
      delay: N("delay", a, c)
    });
  }
  function m(a) {
    function b() {
      return (
        window.Promise &&
        new Promise(function (a) {
          return (P = a);
        })
      );
    }
    function c(a) {
      return f.reversed ? f.duration - a : a;
    }
    function d(a) {
      for (var b = 0, c = {}, d = f.animations, e = {}; b < d.length; ) {
        var g = d[b],
          h = g.animatable,
          n = g.tweens;
        e.tween =
          n.filter(function (b) {
            return a < b.end;
          })[0] || n[n.length - 1];
        e.isPath$0 = e.tween.isPath;
        e.round = e.tween.round;
        e.eased = e.tween.easing(
          Math.min(
            Math.max(a - e.tween.start - e.tween.delay, 0),
            e.tween.duration
          ) / e.tween.duration,
          e.tween.elasticity
        );
        n = X(
          e.tween.to.numbers.map(
            (function (a) {
              return function (b, c) {
                c = a.isPath$0 ? 0 : a.tween.from.numbers[c];
                b = c + a.eased * (b - c);
                a.isPath$0 && (b = W(a.tween.value, b));
                a.round && (b = Math.round(b * a.round) / a.round);
                return b;
              };
            })(e)
          ),
          e.tween.to.strings
        );
        ha[g.type](h.target, g.property, n, c, h.id);
        g.currentValue = n;
        b++;
        e = {
          isPath$0: e.isPath$0,
          tween: e.tween,
          eased: e.eased,
          round: e.round
        };
      }
      if (c)
        for (var k in c)
          D ||
            (D = B(document.body, "transform")
              ? "transform"
              : "-webkit-transform"),
            (f.animatables[k].target.style[D] = c[k].join(" "));
      f.currentTime = a;
      f.progress = (a / f.duration) * 100;
    }
    function e(a) {
      if (f[a]) f[a](f);
    }
    function g() {
      f.remaining && !0 !== f.remaining && f.remaining--;
    }
    function h(a) {
      var h = f.duration,
        k = f.offset,
        m = f.delay,
        O = f.currentTime,
        p = f.reversed,
        q = c(a),
        q = Math.min(Math.max(q, 0), h);
      q > k && q < h
        ? (d(q), !f.began && q >= m && ((f.began = !0), e("begin")), e("run"))
        : (q <= k && 0 !== O && (d(0), p && g()),
          q >= h && O !== h && (d(h), p || g()));
      a >= h &&
        (f.remaining
          ? ((t = n), "alternate" === f.direction && (f.reversed = !f.reversed))
          : (f.pause(),
            P(),
            (Q = b()),
            f.completed || ((f.completed = !0), e("complete"))),
        (l = 0));
      if (f.children)
        for (a = f.children, h = 0; h < a.length; h++) a[h].seek(q);
      e("update");
    }
    a = void 0 === a ? {} : a;
    var n,
      t,
      l = 0,
      P = null,
      Q = b(),
      f = ea(a);
    f.reset = function () {
      var a = f.direction,
        b = f.loop;
      f.currentTime = 0;
      f.progress = 0;
      f.paused = !0;
      f.began = !1;
      f.completed = !1;
      f.reversed = "reverse" === a;
      f.remaining = "alternate" === a && 1 === b ? 2 : b;
    };
    f.tick = function (a) {
      n = a;
      t || (t = n);
      h((l + n - t) * m.speed);
    };
    f.seek = function (a) {
      h(c(a));
    };
    f.pause = function () {
      var a = p.indexOf(f);
      -1 < a && p.splice(a, 1);
      f.paused = !0;
    };
    f.play = function () {
      f.paused &&
        ((f.paused = !1),
        (t = 0),
        (l = f.completed ? 0 : c(f.currentTime)),
        p.push(f),
        y || ia());
    };
    f.reverse = function () {
      f.reversed = !f.reversed;
      t = 0;
      l = c(f.currentTime);
    };
    f.restart = function () {
      f.pause();
      f.reset();
      f.play();
    };
    f.finished = Q;
    f.reset();
    f.autoplay && f.play();
    return f;
  }
  var fa = {
      update: void 0,
      begin: void 0,
      run: void 0,
      complete: void 0,
      loop: 1,
      direction: "normal",
      autoplay: !0,
      offset: 0
    },
    ga = {
      duration: 1e3,
      delay: 0,
      easing: "easeOutElastic",
      elasticity: 500,
      round: 0
    },
    U = "translateX translateY translateZ rotate rotateX rotateY rotateZ scale scaleX scaleY scaleZ skewX skewY".split(
      " "
    ),
    D,
    g = {
      arr: function (a) {
        return Array.isArray(a);
      },
      obj: function (a) {
        return -1 < Object.prototype.toString.call(a).indexOf("Object");
      },
      svg: function (a) {
        return a instanceof SVGElement;
      },
      dom: function (a) {
        return a.nodeType || g.svg(a);
      },
      str: function (a) {
        return "string" === typeof a;
      },
      fnc: function (a) {
        return "function" === typeof a;
      },
      und: function (a) {
        return "undefined" === typeof a;
      },
      hex: function (a) {
        return /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(a);
      },
      rgb: function (a) {
        return /^rgb/.test(a);
      },
      hsl: function (a) {
        return /^hsl/.test(a);
      },
      col: function (a) {
        return g.hex(a) || g.rgb(a) || g.hsl(a);
      }
    },
    x = (function () {
      function a(a, c, d) {
        return (((1 - 3 * d + 3 * c) * a + (3 * d - 6 * c)) * a + 3 * c) * a;
      }
      return function (b, c, d, e) {
        if (0 <= b && 1 >= b && 0 <= d && 1 >= d) {
          var g = new Float32Array(11);
          if (b !== c || d !== e)
            for (var h = 0; 11 > h; ++h) g[h] = a(0.1 * h, b, d);
          return function (h) {
            if (b === c && d === e) return h;
            if (0 === h) return 0;
            if (1 === h) return 1;
            for (var k = 0, l = 1; 10 !== l && g[l] <= h; ++l) k += 0.1;
            --l;
            var l = k + ((h - g[l]) / (g[l + 1] - g[l])) * 0.1,
              n =
                3 * (1 - 3 * d + 3 * b) * l * l +
                2 * (3 * d - 6 * b) * l +
                3 * b;
            if (0.001 <= n) {
              for (k = 0; 4 > k; ++k) {
                n =
                  3 * (1 - 3 * d + 3 * b) * l * l +
                  2 * (3 * d - 6 * b) * l +
                  3 * b;
                if (0 === n) break;
                var m = a(l, b, d) - h,
                  l = l - m / n;
              }
              h = l;
            } else if (0 === n) h = l;
            else {
              var l = k,
                k = k + 0.1,
                f = 0;
              do
                (m = l + (k - l) / 2),
                  (n = a(m, b, d) - h),
                  0 < n ? (k = m) : (l = m);
              while (1e-7 < Math.abs(n) && 10 > ++f);
              h = m;
            }
            return a(h, c, e);
          };
        }
      };
    })(),
    M = (function () {
      function a(a, b) {
        return 0 === a || 1 === a
          ? a
          : -Math.pow(2, 10 * (a - 1)) *
              Math.sin(
                (2 * (a - 1 - (b / (2 * Math.PI)) * Math.asin(1)) * Math.PI) / b
              );
      }
      var b = "Quad Cubic Quart Quint Sine Expo Circ Back Elastic".split(" "),
        c = {
          In: [
            [0.55, 0.085, 0.68, 0.53],
            [0.55, 0.055, 0.675, 0.19],
            [0.895, 0.03, 0.685, 0.22],
            [0.755, 0.05, 0.855, 0.06],
            [0.47, 0, 0.745, 0.715],
            [0.95, 0.05, 0.795, 0.035],
            [0.6, 0.04, 0.98, 0.335],
            [0.6, -0.28, 0.735, 0.045],
            a
          ],
          Out: [
            [0.25, 0.46, 0.45, 0.94],
            [0.215, 0.61, 0.355, 1],
            [0.165, 0.84, 0.44, 1],
            [0.23, 1, 0.32, 1],
            [0.39, 0.575, 0.565, 1],
            [0.19, 1, 0.22, 1],
            [0.075, 0.82, 0.165, 1],
            [0.175, 0.885, 0.32, 1.275],
            function (b, c) {
              return 1 - a(1 - b, c);
            }
          ],
          InOut: [
            [0.455, 0.03, 0.515, 0.955],
            [0.645, 0.045, 0.355, 1],
            [0.77, 0, 0.175, 1],
            [0.86, 0, 0.07, 1],
            [0.445, 0.05, 0.55, 0.95],
            [1, 0, 0, 1],
            [0.785, 0.135, 0.15, 0.86],
            [0.68, -0.55, 0.265, 1.55],
            function (b, c) {
              return 0.5 > b ? a(2 * b, c) / 2 : 1 - a(-2 * b + 2, c) / 2;
            }
          ]
        },
        d = { linear: x(0.25, 0.25, 0.75, 0.75) },
        e = {},
        k;
      for (k in c)
        (e.type = k),
          c[e.type].forEach(
            (function (a) {
              return function (c, e) {
                d["ease" + a.type + b[e]] = g.fnc(c)
                  ? c
                  : x.apply($jscomp$this, c);
              };
            })(e)
          ),
          (e = { type: e.type });
      return d;
    })(),
    ha = {
      css: function (a, b, c) {
        return (a.style[b] = c);
      },
      attribute: function (a, b, c) {
        return a.setAttribute(b, c);
      },
      object: function (a, b, c) {
        return (a[b] = c);
      },
      transform: function (a, b, c, d, e) {
        d[e] || (d[e] = []);
        d[e].push(b + "(" + c + ")");
      }
    },
    p = [],
    y = 0,
    ia = (function () {
      function a() {
        y = requestAnimationFrame(b);
      }
      function b(b) {
        var c = p.length;
        if (c) {
          for (var e = 0; e < c; ) p[e] && p[e].tick(b), e++;
          a();
        } else cancelAnimationFrame(y), (y = 0);
      }
      return a;
    })();
  m.version = "2.0.1";
  m.speed = 1;
  m.running = p;
  m.remove = function (a) {
    a = L(a);
    for (var b = p.length - 1; 0 <= b; b--)
      for (var c = p[b], d = c.animations, e = d.length - 1; 0 <= e; e--)
        E(a, d[e].animatable.target) && (d.splice(e, 1), d.length || c.pause());
  };
  m.getValue = I;
  m.path = function (a, b) {
    var c = g.str(a) ? u(a)[0] : a,
      d = b || 100;
    return function (a) {
      return {
        el: c,
        property: a,
        totalLength: c.getTotalLength() * (d / 100)
      };
    };
  };
  m.setDashoffset = function (a) {
    var b = a.getTotalLength();
    a.setAttribute("stroke-dasharray", b);
    return b;
  };
  m.bezier = x;
  m.easings = M;
  m.timeline = function (a) {
    var b = m(a);
    b.duration = 0;
    b.children = [];
    b.add = function (a) {
      v(a).forEach(function (a) {
        var c = a.offset,
          d = b.duration;
        a.autoplay = !1;
        a.offset = g.und(c) ? d : J(c, d);
        a = m(a);
        a.duration > d && (b.duration = a.duration);
        b.children.push(a);
      });
      return b;
    };
    return b;
  };
  m.random = function (a, b) {
    return Math.floor(Math.random() * (b - a + 1)) + a;
  };
  return m;
});

var $jscomp$this = this;
(function (u, r) {
  "function" === typeof define && define.amd
    ? define([], r)
    : "object" === typeof module && module.exports
    ? (module.exports = r())
    : (u.anime = r());
})(this, function () {
  function u(a) {
    if (!g.col(a))
      try {
        return document.querySelectorAll(a);
      } catch (b) {}
  }
  function r(a) {
    return a.reduce(function (a, c) {
      return a.concat(g.arr(c) ? r(c) : c);
    }, []);
  }
  function v(a) {
    if (g.arr(a)) return a;
    g.str(a) && (a = u(a) || a);
    return a instanceof NodeList || a instanceof HTMLCollection
      ? [].slice.call(a)
      : [a];
  }
  function E(a, b) {
    return a.some(function (a) {
      return a === b;
    });
  }
  function z(a) {
    var b = {},
      c;
    for (c in a) b[c] = a[c];
    return b;
  }
  function F(a, b) {
    var c = z(a),
      d;
    for (d in a) c[d] = b.hasOwnProperty(d) ? b[d] : a[d];
    return c;
  }
  function A(a, b) {
    var c = z(a),
      d;
    for (d in b) c[d] = g.und(a[d]) ? b[d] : a[d];
    return c;
  }
  function R(a) {
    a = a.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i, function (a, b, c, h) {
      return b + b + c + c + h + h;
    });
    var b = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(a);
    a = parseInt(b[1], 16);
    var c = parseInt(b[2], 16),
      b = parseInt(b[3], 16);
    return "rgb(" + a + "," + c + "," + b + ")";
  }
  function S(a) {
    function b(a, b, c) {
      0 > c && (c += 1);
      1 < c && --c;
      return c < 1 / 6
        ? a + 6 * (b - a) * c
        : 0.5 > c
        ? b
        : c < 2 / 3
        ? a + (b - a) * (2 / 3 - c) * 6
        : a;
    }
    var c = /hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.exec(a);
    a = parseInt(c[1]) / 360;
    var d = parseInt(c[2]) / 100,
      c = parseInt(c[3]) / 100;
    if (0 == d) d = c = a = c;
    else {
      var e = 0.5 > c ? c * (1 + d) : c + d - c * d,
        k = 2 * c - e,
        d = b(k, e, a + 1 / 3),
        c = b(k, e, a);
      a = b(k, e, a - 1 / 3);
    }
    return "rgb(" + 255 * d + "," + 255 * c + "," + 255 * a + ")";
  }
  function w(a) {
    if (
      (a = /([\+\-]?[0-9#\.]+)(%|px|pt|em|rem|in|cm|mm|ex|pc|vw|vh|deg|rad|turn)?/.exec(
        a
      ))
    )
      return a[2];
  }
  function T(a) {
    if (-1 < a.indexOf("translate")) return "px";
    if (-1 < a.indexOf("rotate") || -1 < a.indexOf("skew")) return "deg";
  }
  function G(a, b) {
    return g.fnc(a) ? a(b.target, b.id, b.total) : a;
  }
  function B(a, b) {
    if (b in a.style)
      return (
        getComputedStyle(a).getPropertyValue(
          b.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase()
        ) || "0"
      );
  }
  function H(a, b) {
    if (g.dom(a) && E(U, b)) return "transform";
    if (g.dom(a) && (a.getAttribute(b) || (g.svg(a) && a[b])))
      return "attribute";
    if (g.dom(a) && "transform" !== b && B(a, b)) return "css";
    if (null != a[b]) return "object";
  }
  function V(a, b) {
    var c = T(b),
      c = -1 < b.indexOf("scale") ? 1 : 0 + c;
    a = a.style.transform;
    if (!a) return c;
    for (var d = [], e = [], k = [], h = /(\w+)\((.+?)\)/g; (d = h.exec(a)); )
      e.push(d[1]), k.push(d[2]);
    a = k.filter(function (a, c) {
      return e[c] === b;
    });
    return a.length ? a[0] : c;
  }
  function I(a, b) {
    switch (H(a, b)) {
      case "transform":
        return V(a, b);
      case "css":
        return B(a, b);
      case "attribute":
        return a.getAttribute(b);
    }
    return a[b] || 0;
  }
  function J(a, b) {
    var c = /^(\*=|\+=|-=)/.exec(a);
    if (!c) return a;
    b = parseFloat(b);
    a = parseFloat(a.replace(c[0], ""));
    switch (c[0][0]) {
      case "+":
        return b + a;
      case "-":
        return b - a;
      case "*":
        return b * a;
    }
  }
  function C(a) {
    return g.obj(a) && a.hasOwnProperty("totalLength");
  }
  function W(a, b) {
    function c(c) {
      c = void 0 === c ? 0 : c;
      return a.el.getPointAtLength(1 <= b + c ? b + c : 0);
    }
    var d = c(),
      e = c(-1),
      k = c(1);
    switch (a.property) {
      case "x":
        return d.x;
      case "y":
        return d.y;
      case "angle":
        return (180 * Math.atan2(k.y - e.y, k.x - e.x)) / Math.PI;
    }
  }
  function K(a, b) {
    var c = /-?\d*\.?\d+/g;
    a = C(a) ? a.totalLength : a;
    if (g.col(a)) b = g.rgb(a) ? a : g.hex(a) ? R(a) : g.hsl(a) ? S(a) : void 0;
    else {
      var d = w(a);
      a = d ? a.substr(0, a.length - d.length) : a;
      b = b ? a + b : a;
    }
    b += "";
    return {
      original: b,
      numbers: b.match(c) ? b.match(c).map(Number) : [0],
      strings: b.split(c)
    };
  }
  function X(a, b) {
    return b.reduce(function (b, d, e) {
      return b + a[e - 1] + d;
    });
  }
  function L(a) {
    return (a ? r(g.arr(a) ? a.map(v) : v(a)) : []).filter(function (a, c, d) {
      return d.indexOf(a) === c;
    });
  }
  function Y(a) {
    var b = L(a);
    return b.map(function (a, d) {
      return { target: a, id: d, total: b.length };
    });
  }
  function Z(a, b) {
    var c = z(b);
    if (g.arr(a)) {
      var d = a.length;
      2 !== d || g.obj(a[0])
        ? g.fnc(b.duration) || (c.duration = b.duration / d)
        : (a = { value: a });
    }
    return v(a)
      .map(function (a, c) {
        c = c ? 0 : b.delay;
        a = g.obj(a) && !C(a) ? a : { value: a };
        g.und(a.delay) && (a.delay = c);
        return a;
      })
      .map(function (a) {
        return A(a, c);
      });
  }
  function aa(a, b) {
    var c = {},
      d;
    for (d in a) {
      var e = G(a[d], b);
      g.arr(e) &&
        ((e = e.map(function (a) {
          return G(a, b);
        })),
        1 === e.length && (e = e[0]));
      c[d] = e;
    }
    c.duration = parseFloat(c.duration);
    c.delay = parseFloat(c.delay);
    return c;
  }
  function ba(a) {
    return g.arr(a) ? x.apply(this, a) : M[a];
  }
  function ca(a, b) {
    var c;
    return a.tweens.map(function (d) {
      d = aa(d, b);
      var e = d.value,
        k = I(b.target, a.name),
        h = c ? c.to.original : k,
        h = g.arr(e) ? e[0] : h,
        n = J(g.arr(e) ? e[1] : e, h),
        k = w(n) || w(h) || w(k);
      d.isPath = C(e);
      d.from = K(h, k);
      d.to = K(n, k);
      d.start = c ? c.end : a.offset;
      d.end = d.start + d.delay + d.duration;
      d.easing = ba(d.easing);
      d.elasticity = (1e3 - Math.min(Math.max(d.elasticity, 1), 999)) / 1e3;
      g.col(d.from.original) && (d.round = 1);
      return (c = d);
    });
  }
  function da(a, b) {
    return r(
      a.map(function (a) {
        return b.map(function (b) {
          var c = H(a.target, b.name);
          if (c) {
            var d = ca(b, a);
            b = {
              type: c,
              property: b.name,
              animatable: a,
              tweens: d,
              duration: d[d.length - 1].end,
              delay: d[0].delay
            };
          } else b = void 0;
          return b;
        });
      })
    ).filter(function (a) {
      return !g.und(a);
    });
  }
  function N(a, b, c) {
    var d = "delay" === a ? Math.min : Math.max;
    return b.length
      ? d.apply(
          Math,
          b.map(function (b) {
            return b[a];
          })
        )
      : c[a];
  }
  function ea(a) {
    var b = F(fa, a),
      c = F(ga, a),
      d = Y(a.targets),
      e = [],
      g = A(b, c),
      h;
    for (h in a)
      g.hasOwnProperty(h) ||
        "targets" === h ||
        e.push({ name: h, offset: g.offset, tweens: Z(a[h], c) });
    a = da(d, e);
    return A(b, {
      animatables: d,
      animations: a,
      duration: N("duration", a, c),
      delay: N("delay", a, c)
    });
  }
  function m(a) {
    function b() {
      return (
        window.Promise &&
        new Promise(function (a) {
          return (P = a);
        })
      );
    }
    function c(a) {
      return f.reversed ? f.duration - a : a;
    }
    function d(a) {
      for (var b = 0, c = {}, d = f.animations, e = {}; b < d.length; ) {
        var g = d[b],
          h = g.animatable,
          n = g.tweens;
        e.tween =
          n.filter(function (b) {
            return a < b.end;
          })[0] || n[n.length - 1];
        e.isPath$0 = e.tween.isPath;
        e.round = e.tween.round;
        e.eased = e.tween.easing(
          Math.min(
            Math.max(a - e.tween.start - e.tween.delay, 0),
            e.tween.duration
          ) / e.tween.duration,
          e.tween.elasticity
        );
        n = X(
          e.tween.to.numbers.map(
            (function (a) {
              return function (b, c) {
                c = a.isPath$0 ? 0 : a.tween.from.numbers[c];
                b = c + a.eased * (b - c);
                a.isPath$0 && (b = W(a.tween.value, b));
                a.round && (b = Math.round(b * a.round) / a.round);
                return b;
              };
            })(e)
          ),
          e.tween.to.strings
        );
        ha[g.type](h.target, g.property, n, c, h.id);
        g.currentValue = n;
        b++;
        e = {
          isPath$0: e.isPath$0,
          tween: e.tween,
          eased: e.eased,
          round: e.round
        };
      }
      if (c)
        for (var k in c)
          D ||
            (D = B(document.body, "transform")
              ? "transform"
              : "-webkit-transform"),
            (f.animatables[k].target.style[D] = c[k].join(" "));
      f.currentTime = a;
      f.progress = (a / f.duration) * 100;
    }
    function e(a) {
      if (f[a]) f[a](f);
    }
    function g() {
      f.remaining && !0 !== f.remaining && f.remaining--;
    }
    function h(a) {
      var h = f.duration,
        k = f.offset,
        m = f.delay,
        O = f.currentTime,
        p = f.reversed,
        q = c(a),
        q = Math.min(Math.max(q, 0), h);
      q > k && q < h
        ? (d(q), !f.began && q >= m && ((f.began = !0), e("begin")), e("run"))
        : (q <= k && 0 !== O && (d(0), p && g()),
          q >= h && O !== h && (d(h), p || g()));
      a >= h &&
        (f.remaining
          ? ((t = n), "alternate" === f.direction && (f.reversed = !f.reversed))
          : (f.pause(),
            P(),
            (Q = b()),
            f.completed || ((f.completed = !0), e("complete"))),
        (l = 0));
      if (f.children)
        for (a = f.children, h = 0; h < a.length; h++) a[h].seek(q);
      e("update");
    }
    a = void 0 === a ? {} : a;
    var n,
      t,
      l = 0,
      P = null,
      Q = b(),
      f = ea(a);
    f.reset = function () {
      var a = f.direction,
        b = f.loop;
      f.currentTime = 0;
      f.progress = 0;
      f.paused = !0;
      f.began = !1;
      f.completed = !1;
      f.reversed = "reverse" === a;
      f.remaining = "alternate" === a && 1 === b ? 2 : b;
    };
    f.tick = function (a) {
      n = a;
      t || (t = n);
      h((l + n - t) * m.speed);
    };
    f.seek = function (a) {
      h(c(a));
    };
    f.pause = function () {
      var a = p.indexOf(f);
      -1 < a && p.splice(a, 1);
      f.paused = !0;
    };
    f.play = function () {
      f.paused &&
        ((f.paused = !1),
        (t = 0),
        (l = f.completed ? 0 : c(f.currentTime)),
        p.push(f),
        y || ia());
    };
    f.reverse = function () {
      f.reversed = !f.reversed;
      t = 0;
      l = c(f.currentTime);
    };
    f.restart = function () {
      f.pause();
      f.reset();
      f.play();
    };
    f.finished = Q;
    f.reset();
    f.autoplay && f.play();
    return f;
  }
  var fa = {
      update: void 0,
      begin: void 0,
      run: void 0,
      complete: void 0,
      loop: 1,
      direction: "normal",
      autoplay: !0,
      offset: 0
    },
    ga = {
      duration: 1e3,
      delay: 0,
      easing: "easeOutElastic",
      elasticity: 500,
      round: 0
    },
    U = "translateX translateY translateZ rotate rotateX rotateY rotateZ scale scaleX scaleY scaleZ skewX skewY".split(
      " "
    ),
    D,
    g = {
      arr: function (a) {
        return Array.isArray(a);
      },
      obj: function (a) {
        return -1 < Object.prototype.toString.call(a).indexOf("Object");
      },
      svg: function (a) {
        return a instanceof SVGElement;
      },
      dom: function (a) {
        return a.nodeType || g.svg(a);
      },
      str: function (a) {
        return "string" === typeof a;
      },
      fnc: function (a) {
        return "function" === typeof a;
      },
      und: function (a) {
        return "undefined" === typeof a;
      },
      hex: function (a) {
        return /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(a);
      },
      rgb: function (a) {
        return /^rgb/.test(a);
      },
      hsl: function (a) {
        return /^hsl/.test(a);
      },
      col: function (a) {
        return g.hex(a) || g.rgb(a) || g.hsl(a);
      }
    },
    x = (function () {
      function a(a, c, d) {
        return (((1 - 3 * d + 3 * c) * a + (3 * d - 6 * c)) * a + 3 * c) * a;
      }
      return function (b, c, d, e) {
        if (0 <= b && 1 >= b && 0 <= d && 1 >= d) {
          var g = new Float32Array(11);
          if (b !== c || d !== e)
            for (var h = 0; 11 > h; ++h) g[h] = a(0.1 * h, b, d);
          return function (h) {
            if (b === c && d === e) return h;
            if (0 === h) return 0;
            if (1 === h) return 1;
            for (var k = 0, l = 1; 10 !== l && g[l] <= h; ++l) k += 0.1;
            --l;
            var l = k + ((h - g[l]) / (g[l + 1] - g[l])) * 0.1,
              n =
                3 * (1 - 3 * d + 3 * b) * l * l +
                2 * (3 * d - 6 * b) * l +
                3 * b;
            if (0.001 <= n) {
              for (k = 0; 4 > k; ++k) {
                n =
                  3 * (1 - 3 * d + 3 * b) * l * l +
                  2 * (3 * d - 6 * b) * l +
                  3 * b;
                if (0 === n) break;
                var m = a(l, b, d) - h,
                  l = l - m / n;
              }
              h = l;
            } else if (0 === n) h = l;
            else {
              var l = k,
                k = k + 0.1,
                f = 0;
              do
                (m = l + (k - l) / 2),
                  (n = a(m, b, d) - h),
                  0 < n ? (k = m) : (l = m);
              while (1e-7 < Math.abs(n) && 10 > ++f);
              h = m;
            }
            return a(h, c, e);
          };
        }
      };
    })(),
    M = (function () {
      function a(a, b) {
        return 0 === a || 1 === a
          ? a
          : -Math.pow(2, 10 * (a - 1)) *
              Math.sin(
                (2 * (a - 1 - (b / (2 * Math.PI)) * Math.asin(1)) * Math.PI) / b
              );
      }
      var b = "Quad Cubic Quart Quint Sine Expo Circ Back Elastic".split(" "),
        c = {
          In: [
            [0.55, 0.085, 0.68, 0.53],
            [0.55, 0.055, 0.675, 0.19],
            [0.895, 0.03, 0.685, 0.22],
            [0.755, 0.05, 0.855, 0.06],
            [0.47, 0, 0.745, 0.715],
            [0.95, 0.05, 0.795, 0.035],
            [0.6, 0.04, 0.98, 0.335],
            [0.6, -0.28, 0.735, 0.045],
            a
          ],
          Out: [
            [0.25, 0.46, 0.45, 0.94],
            [0.215, 0.61, 0.355, 1],
            [0.165, 0.84, 0.44, 1],
            [0.23, 1, 0.32, 1],
            [0.39, 0.575, 0.565, 1],
            [0.19, 1, 0.22, 1],
            [0.075, 0.82, 0.165, 1],
            [0.175, 0.885, 0.32, 1.275],
            function (b, c) {
              return 1 - a(1 - b, c);
            }
          ],
          InOut: [
            [0.455, 0.03, 0.515, 0.955],
            [0.645, 0.045, 0.355, 1],
            [0.77, 0, 0.175, 1],
            [0.86, 0, 0.07, 1],
            [0.445, 0.05, 0.55, 0.95],
            [1, 0, 0, 1],
            [0.785, 0.135, 0.15, 0.86],
            [0.68, -0.55, 0.265, 1.55],
            function (b, c) {
              return 0.5 > b ? a(2 * b, c) / 2 : 1 - a(-2 * b + 2, c) / 2;
            }
          ]
        },
        d = { linear: x(0.25, 0.25, 0.75, 0.75) },
        e = {},
        k;
      for (k in c)
        (e.type = k),
          c[e.type].forEach(
            (function (a) {
              return function (c, e) {
                d["ease" + a.type + b[e]] = g.fnc(c)
                  ? c
                  : x.apply($jscomp$this, c);
              };
            })(e)
          ),
          (e = { type: e.type });
      return d;
    })(),
    ha = {
      css: function (a, b, c) {
        return (a.style[b] = c);
      },
      attribute: function (a, b, c) {
        return a.setAttribute(b, c);
      },
      object: function (a, b, c) {
        return (a[b] = c);
      },
      transform: function (a, b, c, d, e) {
        d[e] || (d[e] = []);
        d[e].push(b + "(" + c + ")");
      }
    },
    p = [],
    y = 0,
    ia = (function () {
      function a() {
        y = requestAnimationFrame(b);
      }
      function b(b) {
        var c = p.length;
        if (c) {
          for (var e = 0; e < c; ) p[e] && p[e].tick(b), e++;
          a();
        } else cancelAnimationFrame(y), (y = 0);
      }
      return a;
    })();
  m.version = "2.0.1";
  m.speed = 1;
  m.running = p;
  m.remove = function (a) {
    a = L(a);
    for (var b = p.length - 1; 0 <= b; b--)
      for (var c = p[b], d = c.animations, e = d.length - 1; 0 <= e; e--)
        E(a, d[e].animatable.target) && (d.splice(e, 1), d.length || c.pause());
  };
  m.getValue = I;
  m.path = function (a, b) {
    var c = g.str(a) ? u(a)[0] : a,
      d = b || 100;
    return function (a) {
      return {
        el: c,
        property: a,
        totalLength: c.getTotalLength() * (d / 100)
      };
    };
  };
  m.setDashoffset = function (a) {
    var b = a.getTotalLength();
    a.setAttribute("stroke-dasharray", b);
    return b;
  };
  m.bezier = x;
  m.easings = M;
  m.timeline = function (a) {
    var b = m(a);
    b.duration = 0;
    b.children = [];
    b.add = function (a) {
      v(a).forEach(function (a) {
        var c = a.offset,
          d = b.duration;
        a.autoplay = !1;
        a.offset = g.und(c) ? d : J(c, d);
        a = m(a);
        a.duration > d && (b.duration = a.duration);
        b.children.push(a);
      });
      return b;
    };
    return b;
  };
  m.random = function (a, b) {
    return Math.floor(Math.random() * (b - a + 1)) + a;
  };
  return m;
});

!(function (t, e) {
  "function" == typeof define && define.amd
    ? define("ev-emitter/ev-emitter", e)
    : "object" == typeof module && module.exports
    ? (module.exports = e())
    : (t.EvEmitter = e());
})("undefined" != typeof window ? window : this, function () {
  function t() {}
  var e = t.prototype;
  return (
    (e.on = function (t, e) {
      if (t && e) {
        var i = (this._events = this._events || {}),
          n = (i[t] = i[t] || []);
        return -1 == n.indexOf(e) && n.push(e), this;
      }
    }),
    (e.once = function (t, e) {
      if (t && e) {
        this.on(t, e);
        var i = (this._onceEvents = this._onceEvents || {}),
          n = (i[t] = i[t] || {});
        return (n[e] = !0), this;
      }
    }),
    (e.off = function (t, e) {
      var i = this._events && this._events[t];
      if (i && i.length) {
        var n = i.indexOf(e);
        return -1 != n && i.splice(n, 1), this;
      }
    }),
    (e.emitEvent = function (t, e) {
      var i = this._events && this._events[t];
      if (i && i.length) {
        var n = 0,
          o = i[n];
        e = e || [];
        for (var r = this._onceEvents && this._onceEvents[t]; o; ) {
          var s = r && r[o];
          s && (this.off(t, o), delete r[o]),
            o.apply(this, e),
            (n += s ? 0 : 1),
            (o = i[n]);
        }
        return this;
      }
    }),
    t
  );
}),
  (function (t, e) {
    "use strict";
    "function" == typeof define && define.amd
      ? define(["ev-emitter/ev-emitter"], function (i) {
          return e(t, i);
        })
      : "object" == typeof module && module.exports
      ? (module.exports = e(t, require("ev-emitter")))
      : (t.imagesLoaded = e(t, t.EvEmitter));
  })(window, function (t, e) {
    function i(t, e) {
      for (var i in e) t[i] = e[i];
      return t;
    }
    function n(t) {
      var e = [];
      if (Array.isArray(t)) e = t;
      else if ("number" == typeof t.length)
        for (var i = 0; i < t.length; i++) e.push(t[i]);
      else e.push(t);
      return e;
    }
    function o(t, e, r) {
      return this instanceof o
        ? ("string" == typeof t && (t = document.querySelectorAll(t)),
          (this.elements = n(t)),
          (this.options = i({}, this.options)),
          "function" == typeof e ? (r = e) : i(this.options, e),
          r && this.on("always", r),
          this.getImages(),
          h && (this.jqDeferred = new h.Deferred()),
          void setTimeout(
            function () {
              this.check();
            }.bind(this)
          ))
        : new o(t, e, r);
    }
    function r(t) {
      this.img = t;
    }
    function s(t, e) {
      (this.url = t), (this.element = e), (this.img = new Image());
    }
    var h = t.jQuery,
      a = t.console;
    (o.prototype = Object.create(e.prototype)),
      (o.prototype.options = {}),
      (o.prototype.getImages = function () {
        (this.images = []), this.elements.forEach(this.addElementImages, this);
      }),
      (o.prototype.addElementImages = function (t) {
        "IMG" == t.nodeName && this.addImage(t),
          this.options.background === !0 && this.addElementBackgroundImages(t);
        var e = t.nodeType;
        if (e && d[e]) {
          for (var i = t.querySelectorAll("img"), n = 0; n < i.length; n++) {
            var o = i[n];
            this.addImage(o);
          }
          if ("string" == typeof this.options.background) {
            var r = t.querySelectorAll(this.options.background);
            for (n = 0; n < r.length; n++) {
              var s = r[n];
              this.addElementBackgroundImages(s);
            }
          }
        }
      });
    var d = { 1: !0, 9: !0, 11: !0 };
    return (
      (o.prototype.addElementBackgroundImages = function (t) {
        var e = getComputedStyle(t);
        if (e)
          for (
            var i = /url\((['"])?(.*?)\1\)/gi, n = i.exec(e.backgroundImage);
            null !== n;

          ) {
            var o = n && n[2];
            o && this.addBackground(o, t), (n = i.exec(e.backgroundImage));
          }
      }),
      (o.prototype.addImage = function (t) {
        var e = new r(t);
        this.images.push(e);
      }),
      (o.prototype.addBackground = function (t, e) {
        var i = new s(t, e);
        this.images.push(i);
      }),
      (o.prototype.check = function () {
        function t(t, i, n) {
          setTimeout(function () {
            e.progress(t, i, n);
          });
        }
        var e = this;
        return (
          (this.progressedCount = 0),
          (this.hasAnyBroken = !1),
          this.images.length
            ? void this.images.forEach(function (e) {
                e.once("progress", t), e.check();
              })
            : void this.complete()
        );
      }),
      (o.prototype.progress = function (t, e, i) {
        this.progressedCount++,
          (this.hasAnyBroken = this.hasAnyBroken || !t.isLoaded),
          this.emitEvent("progress", [this, t, e]),
          this.jqDeferred &&
            this.jqDeferred.notify &&
            this.jqDeferred.notify(this, t),
          this.progressedCount == this.images.length && this.complete(),
          this.options.debug && a && a.log("progress: " + i, t, e);
      }),
      (o.prototype.complete = function () {
        var t = this.hasAnyBroken ? "fail" : "done";
        if (
          ((this.isComplete = !0),
          this.emitEvent(t, [this]),
          this.emitEvent("always", [this]),
          this.jqDeferred)
        ) {
          var e = this.hasAnyBroken ? "reject" : "resolve";
          this.jqDeferred[e](this);
        }
      }),
      (r.prototype = Object.create(e.prototype)),
      (r.prototype.check = function () {
        var t = this.getIsImageComplete();
        return t
          ? void this.confirm(0 !== this.img.naturalWidth, "naturalWidth")
          : ((this.proxyImage = new Image()),
            this.proxyImage.addEventListener("load", this),
            this.proxyImage.addEventListener("error", this),
            this.img.addEventListener("load", this),
            this.img.addEventListener("error", this),
            void (this.proxyImage.src = this.img.src));
      }),
      (r.prototype.getIsImageComplete = function () {
        return this.img.complete && void 0 !== this.img.naturalWidth;
      }),
      (r.prototype.confirm = function (t, e) {
        (this.isLoaded = t), this.emitEvent("progress", [this, this.img, e]);
      }),
      (r.prototype.handleEvent = function (t) {
        var e = "on" + t.type;
        this[e] && this[e](t);
      }),
      (r.prototype.onload = function () {
        this.confirm(!0, "onload"), this.unbindEvents();
      }),
      (r.prototype.onerror = function () {
        this.confirm(!1, "onerror"), this.unbindEvents();
      }),
      (r.prototype.unbindEvents = function () {
        this.proxyImage.removeEventListener("load", this),
          this.proxyImage.removeEventListener("error", this),
          this.img.removeEventListener("load", this),
          this.img.removeEventListener("error", this);
      }),
      (s.prototype = Object.create(r.prototype)),
      (s.prototype.check = function () {
        this.img.addEventListener("load", this),
          this.img.addEventListener("error", this),
          (this.img.src = this.url);
        var t = this.getIsImageComplete();
        t &&
          (this.confirm(0 !== this.img.naturalWidth, "naturalWidth"),
          this.unbindEvents());
      }),
      (s.prototype.unbindEvents = function () {
        this.img.removeEventListener("load", this),
          this.img.removeEventListener("error", this);
      }),
      (s.prototype.confirm = function (t, e) {
        (this.isLoaded = t),
          this.emitEvent("progress", [this, this.element, e]);
      }),
      (o.makeJQueryPlugin = function (e) {
        (e = e || t.jQuery),
          e &&
            ((h = e),
            (h.fn.imagesLoaded = function (t, e) {
              var i = new o(this, t, e);
              return i.jqDeferred.promise(h(this));
            }));
      }),
      o.makeJQueryPlugin(),
      o
    );
  });

(function (window) {
  "use strict";

  // From https://davidwalsh.name/javascript-debounce-function.
  function debounce(func, wait, immediate) {
    var timeout;
    return function () {
      var context = this,
        args = arguments;
      var later = function () {
        timeout = null;
        if (!immediate) func.apply(context, args);
      };
      var callNow = immediate && !timeout;
      clearTimeout(timeout);
      timeout = setTimeout(later, wait);
      if (callNow) func.apply(context, args);
    };
  }

  // from http://www.quirksmode.org/js/events_properties.html#position
  function getMousePos(e) {
    var posx = 0;
    var posy = 0;
    if (!e) var e = window.event;
    if (e.pageX || e.pageY) {
      posx = e.pageX;
      posy = e.pageY;
    } else if (e.clientX || e.clientY) {
      posx =
        e.clientX +
        document.body.scrollLeft +
        document.documentElement.scrollLeft;
      posy =
        e.clientY +
        document.body.scrollTop +
        document.documentElement.scrollTop;
    }
    return {
      x: posx,
      y: posy
    };
  }

  var DOM = {};
  // The loader.
  DOM.loader = document.querySelector(".overlay--loader");
  // The room wrapper. This will be the element to be transformed in order to move around.
  DOM.scroller = document.querySelector(".container > .scroller");
  // The rooms.
  DOM.rooms = [].slice.call(DOM.scroller.querySelectorAll(".room"));
  // The content wrapper.
  DOM.content = document.querySelector(".content");
  // Rooms navigation controls.
  DOM.nav = {
    leftCtrl: DOM.content.querySelector("nav > .btn--nav-left"),
    rightCtrl: DOM.content.querySelector("nav > .btn--nav-right")
  };
  // Content slides.
  DOM.slides = [].slice.call(DOM.content.querySelectorAll(".slides > .slide"));
  // The off canvas menu button.
  DOM.menuCtrl = DOM.content.querySelector(".btn--menu");
  // The menu overlay.
  DOM.menuOverlay = DOM.content.querySelector(".overlay--menu");
  // The menu items
  DOM.menuItems = DOM.menuOverlay.querySelectorAll(".menu > .menu__item");
  // The info button.
  DOM.infoCtrl = DOM.content.querySelector(".btn--info");
  // The info overlay.
  DOM.infoOverlay = DOM.content.querySelector(".overlay--info");
  // The info text.
  DOM.infoText = DOM.infoOverlay.querySelector(".info");

  var currentRoom = 0,
    // Total number of rooms.
    totalRooms = DOM.rooms.length,
    // Initial transform.
    initTransform = {
      translateX: 0,
      translateY: 0,
      translateZ: "500px",
      rotateX: 0,
      rotateY: 0,
      rotateZ: 0
    },
    // Reset transform.
    resetTransform = {
      translateX: 0,
      translateY: 0,
      translateZ: 0,
      rotateX: 0,
      rotateY: 0,
      rotateZ: 0
    },
    // View from top.
    menuTransform = {
      translateX: 0,
      translateY: "150%",
      translateZ: 0,
      rotateX: "15deg",
      rotateY: 0,
      rotateZ: 0
    },
    menuTransform = {
      translateX: 0,
      translateY: "50%",
      translateZ: 0,
      rotateX: "-10deg",
      rotateY: 0,
      rotateZ: 0
    },
    // Info view transform.
    infoTransform = {
      translateX: 0,
      translateY: 0,
      translateZ: "200px",
      rotateX: "2deg",
      rotateY: 0,
      rotateZ: "4deg"
    },
    // Room moving transition.
    roomTransition = { speed: "0.4s", easing: "ease" },
    // View from top transition.
    menuTransition = { speed: "1.5s", easing: "cubic-bezier(0.2,1,0.3,1)" },
    // Info transition.
    infoTransition = { speed: "15s", easing: "cubic-bezier(0.3,1,0.3,1)" },
    // Tilt transition
    tiltTransition = { speed: "0.2s", easing: "ease-out" },
    tilt = false,
    // How much to rotate when the mouse moves.
    tiltRotation = {
      rotateX: 1, // a relative rotation of -1deg to 1deg on the x-axis
      rotateY: -3 // a relative rotation of -3deg to 3deg on the y-axis
    },
    // Transition end event handler.
    onEndTransition = function (el, callback) {
      var onEndCallbackFn = function (ev) {
        this.removeEventListener("transitionend", onEndCallbackFn);
        if (callback && typeof callback === "function") {
          callback.call();
        }
      };
      el.addEventListener("transitionend", onEndCallbackFn);
    },
    // Window sizes.
    win = { width: window.innerWidth, height: window.innerHeight },
    // Check if moving inside the room and check if navigating.
    isMoving,
    isNavigating;

  function init() {
    // Move into the current room.
    move({ transition: roomTransition, transform: initTransform }).then(
      function () {
        initTilt();
        applyRoomTransition("none");
      }
    );
    // Animate the current slide in.
    showSlide();
    // Init/Bind events.
    initEvents();
  }

  function initTilt() {
    //applyRoomTransition(tiltTransition);
    tilt = true;
  }

  function removeTilt() {
    tilt = false;
  }

  function move(opts) {
    return new Promise(function (resolve, reject) {
      if (isMoving && !opts.stopTransition) {
        return false;
      }
      isMoving = true;

      if (opts.transition) {
        applyRoomTransition(opts.transition);
      }

      if (opts.transform) {
        applyRoomTransform(opts.transform);
        var onEndFn = function () {
          isMoving = false;
          resolve();
        };
        onEndTransition(DOM.scroller, onEndFn);
      } else {
        resolve();
      }
    });
  }

  function initEvents() {
    // Mousemove event / Tilt functionality.
    var onMouseMoveFn = function (ev) {
        requestAnimationFrame(function () {
          if (!tilt) return false;

          var mousepos = getMousePos(ev),
            // transform values
            rotX = tiltRotation.rotateX
              ? initTransform.rotateX -
                (((2 * tiltRotation.rotateX) / win.height) * mousepos.y -
                  tiltRotation.rotateX)
              : 0,
            rotY = tiltRotation.rotateY
              ? initTransform.rotateY -
                (((2 * tiltRotation.rotateY) / win.width) * mousepos.x -
                  tiltRotation.rotateY)
              : 0;

          // apply transform
          applyRoomTransform({
            translateX: initTransform.translateX,
            translateY: initTransform.translateY,
            translateZ: initTransform.translateZ,
            rotateX: rotX + "deg",
            rotateY: rotY + "deg",
            rotateZ: initTransform.rotateZ
          });
        });
      },
      // Window resize.
      debounceResizeFn = debounce(function () {
        win = { width: window.innerWidth, height: window.innerHeight };
      }, 10);

    document.addEventListener("mousemove", onMouseMoveFn);
    window.addEventListener("resize", debounceResizeFn);

    // Room navigation.
    var onNavigatePrevFn = function () {
        navigate("prev");
      },
      onNavigateNextFn = function () {
        navigate("next");
      };

    DOM.nav.leftCtrl.addEventListener("click", onNavigatePrevFn);
    DOM.nav.rightCtrl.addEventListener("click", onNavigateNextFn);

    // Menu click.
        DOM.menuCtrl.addEventListener("click", toggleMenu);

    // Info click.
    DOM.infoCtrl.addEventListener("click", toggleInfo);
  }

  function applyRoomTransform(transform) {
    DOM.scroller.style.transform =
      "translate3d(" +
      transform.translateX +
      ", " +
      transform.translateY +
      ", " +
      transform.translateZ +
      ") " +
      "rotate3d(1,0,0," +
      transform.rotateX +
      ") rotate3d(0,1,0," +
      transform.rotateY +
      ") rotate3d(0,0,1," +
      transform.rotateZ +
      ")";
  }

  function applyRoomTransition(transition) {
    DOM.scroller.style.transition =
      transition === "none"
        ? transition
        : "transform " + transition.speed + " " + transition.easing;
  }

  function toggleSlide(dir, delay) {
    var slide = DOM.slides[currentRoom],
      // Slide's name.
      name = slide.querySelector(".slide__name"),
      // Slide's title and date elements.
      title = slide.querySelector(".slide__title"),
      date = slide.querySelector(".slide__date");

    delay = delay !== undefined ? delay : 0;

    anime.remove([name, title, date]);
    var animeOpts = {
      targets: [name, title, date],
      duration: dir === "in" ? 400 : 400,
      //delay: 0,//dir === 'in' ? 150 : 0,
      delay: function (t, i, c) {
        return delay + 75 + i * 75;
      },
      easing: [0.25, 0.1, 0.25, 1],
      opacity: {
        value: dir === "in" ? [0, 1] : [1, 0],
        duration: dir === "in" ? 550 : 250
      },
      translateY: function (t, i) {
        return dir === "in" ? [150, 0] : [0, -150];
      }
    };
    if (dir === "in") {
      animeOpts.begin = function () {
        slide.classList.add("slide--current");
      };
    } else {
      animeOpts.complete = function () {
        slide.classList.remove("slide--current");
      };
    }
    anime(animeOpts);
  }

  function showSlide(delay) {
    toggleSlide("in", delay);
  }

  function hideSlide(delay) {
    toggleSlide("out", delay);
  }

  function navigate(dir) {
    if (isMoving || isNavigating) {
      return false;
    }
    isNavigating = true;

    var room = DOM.rooms[currentRoom];

    // Remove tilt.
    removeTilt();
    // Animate the current slide out - animate the name, title and date elements.
    hideSlide();

    // Update currentRoom.
    if (dir === "next") {
      currentRoom = currentRoom < totalRooms - 1 ? currentRoom + 1 : 0;
    } else {
      currentRoom = currentRoom > 0 ? currentRoom - 1 : totalRooms - 1;
    }

    // Position the next room.
    var nextRoom = DOM.rooms[currentRoom];
    nextRoom.style.transform =
      "translate3d(" +
      (dir === "next" ? 100 : -100) +
      "%,0,0) translate3d(" +
      (dir === "next" ? 1 : -1) +
      "px,0,0)";
    nextRoom.style.opacity = 1;

    // Move back.
    move({ transition: roomTransition, transform: resetTransform })
      .then(function () {
        // Move left or right.
        return move({
          transform: {
            translateX: (dir === "next" ? -100 : 100) + "%",
            translateY: 0,
            translateZ: 0,
            rotateX: 0,
            rotateY: 0,
            rotateZ: 0
          }
        });
      })
      .then(function () {
        // Update current room class.
        nextRoom.classList.add("room--current");
        room.classList.remove("room--current");
        room.style.opacity = 0;

        // Show the next slide.
        showSlide();

        // Move into room.
        // Update final transform state:
        return move({
          transform: {
            translateX: (dir === "next" ? -100 : 100) + "%",
            translateY: 0,
            translateZ: "500px",
            rotateX: 0,
            rotateY: 0,
            rotateZ: 0
          }
        });
      })
      .then(function () {
        // Reset positions.
        applyRoomTransition("none");
        nextRoom.style.transform = "translate3d(0,0,0)";
        applyRoomTransform(initTransform);

        setTimeout(function () {
          initTilt();
        }, 60);
        isNavigating = false;
      });
  }

  function toggleMenu() {
    if (/*isMoving ||*/ isNavigating) {
      return false;
    }
    if (DOM.menuCtrl.classList.contains("btn--active")) {
      // Close it.
      closeMenu();
    } else {
      // Open it.
      showMenu();
    }
  }

  function showMenu() {
    // Button becomes cross.
    DOM.menuCtrl.classList.add("btn--active");
    // Remove tilt.
    removeTilt();
    // Add adjacent rooms.
    //addAdjacentRooms();
    // Hide current slide.
    hideSlide();
    // Apply menu transition.
    applyRoomTransition(menuTransition);
    // View from top:
    move({ transform: menuTransform, stopTransition: true });
    // Show menu items
    anime.remove(DOM.menuItems);
    anime({
      targets: DOM.menuItems,
      duration: 500,
      easing: [0.2, 1, 0.3, 1],
      delay: function (t, i) {
        return 250 + 50 * i;
      },
      translateY: [150, 0],
      opacity: {
        value: [0, 1],
        duration: 200,
        easing: "linear"
      },
      begin: function () {
        DOM.menuOverlay.classList.add("overlay--active");
      }
    });
    anime.remove(DOM.menuOverlay);
    anime({
      targets: DOM.menuOverlay,
      duration: 1000,
      easing: [0.25, 0.1, 0.25, 1],
      opacity: [0, 1]
    });
  }

  function closeMenu() {
    // Button becomes menu.
    DOM.menuCtrl.classList.remove("btn--active");
    // Apply room transition.
    applyRoomTransition(roomTransition);
    // Show current slide.
    showSlide(150);
    // back to room view:
    move({ transform: initTransform, stopTransition: true }).then(function () {
      // Remove adjacent rooms.
      //removeAdjacentRooms();
      // Init tilt.
      initTilt();
    });
    anime.remove(DOM.menuItems);
    anime({
      targets: DOM.menuItems,
      duration: 200,
      easing: [0.25, 0.1, 0.25, 1],
      delay: function (t, i, c) {
        return 40 * (c - i - 1);
      },
      translateY: [0, 150],
      opacity: {
        value: [1, 0],
        duration: 100
      },
      complete: function () {
        DOM.menuOverlay.classList.remove("overlay--active");
      }
    });
    anime.remove(DOM.menuOverlay);
    anime({
      targets: DOM.menuOverlay,
      duration: 400,
      easing: [0.25, 0.1, 0.25, 1],
      opacity: [1, 0]
    });
  }

  function addAdjacentRooms() {
    // Current room.
    var room = DOM.rooms[currentRoom],
      // Adjacent rooms.
      nextRoom = DOM.rooms[currentRoom < totalRooms - 1 ? currentRoom + 1 : 0],
      prevRoom = DOM.rooms[currentRoom > 0 ? currentRoom - 1 : totalRooms - 1];

    // Position the adjacent rooms.
    nextRoom.style.transform = "translate3d(100%,0,0) translate3d(3px,0,0)";
    nextRoom.style.opacity = 1;
    prevRoom.style.transform = "translate3d(-100%,0,0) translate3d(-3px,0,0)";
    prevRoom.style.opacity = 1;
  }

  function removeAdjacentRooms() {
    // Current room.
    var room = DOM.rooms[currentRoom],
      // Adjacent rooms.
      nextRoom = DOM.rooms[currentRoom < totalRooms - 1 ? currentRoom + 1 : 0],
      prevRoom = DOM.rooms[currentRoom > 0 ? currentRoom - 1 : totalRooms - 1];

    // Position the adjacent rooms.
    nextRoom.style.transform = "none";
    nextRoom.style.opacity = 0;
    prevRoom.style.transform = "none";
    prevRoom.style.opacity = 0;
  }

  function toggleInfo() {
    if (isNavigating) {
      return false;
    }
    if (DOM.infoCtrl.classList.contains("btn--active")) {
      // Close it.
      closeInfo();
    } else {
      // Open it.
      showInfo();
    }
  }

  function showInfo() {
    // Button becomes cross.
    DOM.infoCtrl.classList.add("btn--active");
    // Remove tilt.
    removeTilt();
    // Hide current slide.
    hideSlide();
    // Apply info transition.
    applyRoomTransition(infoTransition);
    // Infoview:
    move({ transform: infoTransform, stopTransition: true });
    // Show info text and animate photos out of the walls.
    var photos = DOM.rooms[currentRoom].querySelectorAll(".room__img");
    anime.remove(photos);
    anime({
      targets: photos,
      duration: function () {
        return anime.random(15000, 30000);
      },
      easing: [0.3, 1, 0.3, 1],
      translateY: function () {
        return anime.random(-50, 50);
      },
      rotateX: function () {
        return anime.random(-2, 2);
      },
      rotateZ: function () {
        return anime.random(-5, 5);
      },
      translateZ: function () {
        return [10, anime.random(50, win.width / 3)];
      }
    });
    // Animate info text and overlay.
    anime.remove([DOM.infoOverlay, DOM.infoText]);
    var animeInfoOpts = {
      targets: [DOM.infoOverlay, DOM.infoText],
      duration: 1500,
      delay: function (t, i) {
        return !i ? 0 : 150;
      },
      easing: [0.25, 0.1, 0.25, 1],
      opacity: [0, 1],
      translateY: function (t, i) {
        return !i ? 0 : [30, 0];
      },
      begin: function () {
        DOM.infoOverlay.classList.add("overlay--active");
      }
    };
    anime(animeInfoOpts);
  }

  function closeInfo() {
    // Button becomes info.
    DOM.infoCtrl.classList.remove("btn--active");
    // Apply room transition.
    applyRoomTransition(roomTransition);
    // Show current slide.
    showSlide(100);
    // back to room view:
    move({ transform: initTransform, stopTransition: true }).then(function () {
      initTilt();
    });

    // Hide info text and animate photos into the walls.
    var photos = DOM.rooms[currentRoom].querySelectorAll(".room__img");
    anime.remove(photos);
    anime({
      targets: photos,
      duration: 400,
      easing: [0.3, 1, 0.3, 1],
      translateY: 0,
      rotateX: 0,
      rotateZ: 0,
      translateZ: 10
    });
    // Animate info text and overlay.
    anime.remove([DOM.infoOverlay, DOM.infoText]);
    var animeInfoOpts = {
      targets: [DOM.infoOverlay, DOM.infoText],
      duration: 400,
      easing: [0.25, 0.1, 0.25, 1],
      opacity: [1, 0],
      translateY: function (t, i) {
        return !i ? 0 : [0, 30];
      },
      complete: function () {
        DOM.infoOverlay.classList.remove("overlay--active");
      }
    };
    anime(animeInfoOpts);
  }

  // Preload all the images.
  imagesLoaded(DOM.scroller, function () {
    var extradelay = 1000;
    // Slide out loader.
    anime({
      targets: DOM.loader,
      duration: 600,
      easing: "easeInOutCubic",
      delay: extradelay,
      translateY: "-100%",
      complete: function () {
        DOM.loader.classList.remove("overlay--active");
      }
    });
    setTimeout(function () {
      init();
    }, extradelay + 300);
  });
})(window);
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.