@keyframes loading {
  0% {
    width: 0px; }
  20% {
    width: 1px; }
  100% {
    width: 100%; } }

@-webkit-keyframes loading {
  from {
    width: 0%; }
  to {
    width: 100%; } }

body {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  overflow: auto;
  font-family: 'Oswald', sans-serif;
  color: white;
  background-color: black; }
  body .loader {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 8px;
    background: #232323;
    z-index: 999;
    opacity: 1;
    visibility: visible; }
    body .loader .bar {
      display: block;
      position: relative;
      width: 1px;
      height: 100%;
      background: #eeeeee;
      animation-name: loading;
      animation-duration: 2s;
      -webkit-animation-name: loading;
      -webkit-animation-duration: 2s; }
  body.loaded .loader {
    opacity: 0;
    visibility: hidden;
    transition: .3s; }

.arrow {
  display: block;
  position: relative;
  width: 16px;
  height: 8px;
  background-image: url("../images/arrow.png");
  background-repeat: no-repeat;
  background-size: 16px auto;
  background-position: center; }

body.dragging * {
  cursor: grabbing !important;
  cursor: -moz-grabbing !important;
  cursor: -webkit-grabbing !important; }

@media (max-width: 799px) {
  body {
    display: flex;
    align-items: center;
    justify-content: center;
    background: black; }
    body .application {
      display: none; }
    body:before {
      content: "The application is not currently available for mobile phone and portrait tablette";
      padding: 20px;
      max-width: 320px;
      font-family: 'Oswald', sans-serif;
      font-weight: 500;
      font-size: 24px;
      color: white; } }

.clear {
  display: block;
  position: relative;
  width: 100%;
  height: 1px;
  float: none;
  clear: both; }

.application.lock-position {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden; }

h2.movie-title {
  display: flex;
  position: fixed;
  width: 160px;
  height: 100px;
  top: 0;
  right: 0;
  align-items: flex-end;
  justify-content: flex-start;
  margin: 0;
  padding: 24px;
  box-sizing: border-box;
  text-decoration: none;
  text-align: left;
  font-weight: 200;
  font-size: 16px;
  color: white;
  z-index: 99; }

main {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  min-height: 1200px;
  box-sizing: border-box;
  padding: 100px 80px 100px 80px;
  z-index: 2;
  opacity: 0;
  /*
	@media (max-width: 1179px) {
		margin:40px;
		height: calc(4 * 100vw / 12);
	}

	@media (max-width: 799px) {
		width: 50%;
		height: calc(100vw / 2);
	}

	@media (max-width: 519px) {
		width: 100%;
		height: calc(100vw / 2);
	}*/ }
  main.scene {
    padding: 0; }
    main.scene .starter {
      display: flex;
      position: fixed;
      top: 100px;
      left: 0;
      width: 100%;
      height: calc(100vh - 220px);
      transition: .3s;
      text-align: center;
      z-index: 99;
      align-items: center;
      justify-content: center;
      flex-direction: column; }
      main.scene .starter h1 {
        font-size: 80px;
        font-weight: 200;
        margin: 0; }
      main.scene .starter p {
        font-size: 20px;
        font-weight: 200; }
      main.scene .starter .count_data {
        display: block;
        position: relative;
        width: 200px;
        margin-bottom: 48px; }
        main.scene .starter .count_data p {
          display: block;
          position: relative;
          width: 100%;
          font-size: 16px;
          line-height: 20px;
          padding: 0;
          margin: 0;
          clear: both;
          float: none; }
          main.scene .starter .count_data p span:nth-child(1) {
            display: block;
            position: relative;
            width: 150px;
            float: left;
            font-weight: 400; }
          main.scene .starter .count_data p span:nth-child(2) {
            display: block;
            position: relative;
            width: 50px;
            float: left; }
      main.scene .starter .navigation-indication {
        display: block;
        position: relative;
        width: 100%;
        height: 20px;
        margin: 0;
        padding: 0;
        font-size: 16px; }
      main.scene .starter .buttonScroll {
        display: block;
        position: relative;
        width: 32px;
        height: 80px;
        margin: 20px auto;
        z-index: 11;
        transition: .3s;
        cursor: pointer;
        opacity: 1;
        visibility: visible; }
        main.scene .starter .buttonScroll .arrow {
          margin: 20px auto; }
      main.scene .starter.hide {
        opacity: 0;
        visibility: hidden; }
    main.scene .bottom {
      display: block;
      position: relative;
      width: 1px;
      padding: 0;
      margin: 50vh 240px 0 240px;
      background: transparent; }
      main.scene .bottom .sentence {
        display: flex;
        position: absolute;
        top: 0;
        left: 0;
        width: calc(100vw - 480px);
        height: 40px;
        transition: .3s;
        justify-content: center;
        align-items: flex-start;
        flex-direction: column; }
        main.scene .bottom .sentence > span {
          display: block;
          width: auto;
          height: 100%;
          box-sizing: border-box;
          font-size: 32px;
          line-height: 40px;
          transition: .3s;
          text-align: left;
          font-weight: 200;
          color: #323232;
          background: #323232;
          text-transform: none;
          cursor: pointer; }
          main.scene .bottom .sentence > span.most-used {
            font-size: 32px;
            line-height: 40px;
            color: #323232;
            background: #323232;
            white-space: normal;
            text-align: right;
            left: auto;
            right: 0;
            align-self: flex-end; }
            main.scene .bottom .sentence > span.most-used .big {
              text-transform: uppercase;
              font-weight: 400; }
    main.scene .right {
      display: block;
      position: fixed;
      width: auto;
      bottom: 140px;
      margin-left: 50vw;
      height: 1px;
      background: transparent; }
      main.scene .right .composition {
        display: block;
        position: absolute;
        bottom: 0;
        height: 480px;
        width: calc(10 * 100vw / 12);
        left: 0;
        background: #323232;
        transition: background .3s;
        cursor: pointer; }
        main.scene .right .composition img {
          display: block;
          position: absolute;
          bottom: 0;
          height: 100%;
          width: auto;
          transition: .3s;
          opacity: 0;
          visibility: hidden; }
        main.scene .right .composition.front {
          z-index: 99; }
        main.scene .right .composition.fullWidth img {
          width: 100%;
          height: auto; }
    main.scene .left {
      display: block;
      position: fixed;
      width: auto;
      top: 100px;
      margin-right: 50vw;
      height: 1px;
      background: transparent; }
      main.scene .left .decomposition {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        width: 300px;
        height: calc(100vh - 240px);
        cursor: pointer; }
        main.scene .left .decomposition .image {
          display: block;
          position: absolute;
          width: 300px;
          height: auto;
          top: 0;
          right: 0;
          transition: .3s;
          background: #323232; }
          main.scene .left .decomposition .image img {
            display: block;
            position: relative;
            width: 100%;
            height: auto;
            top: 0;
            right: 0;
            opacity: 0;
            transition: .3s; }
          main.scene .left .decomposition .image:nth-child(1) {
            top: 0%;
            right: 0%; }
          main.scene .left .decomposition .image:nth-child(2) {
            top: 1.33333%;
            right: 2.5%; }
          main.scene .left .decomposition .image:nth-child(3) {
            top: 2.66667%;
            right: 5%; }
          main.scene .left .decomposition .image:nth-child(4) {
            top: 4%;
            right: 7.5%; }
          main.scene .left .decomposition .image:nth-child(5) {
            top: 5.33333%;
            right: 10%; }
          main.scene .left .decomposition .image:nth-child(6) {
            top: 6.66667%;
            right: 12.5%; }
          main.scene .left .decomposition .image:nth-child(7) {
            top: 8%;
            right: 15%; }
          main.scene .left .decomposition .image:nth-child(8) {
            top: 9.33333%;
            right: 17.5%; }
          main.scene .left .decomposition .image:nth-child(9) {
            top: 10.66667%;
            right: 20%; }
          main.scene .left .decomposition .image:nth-child(10) {
            top: 12%;
            right: 22.5%; }
          main.scene .left .decomposition .image:nth-child(11) {
            top: 13.33333%;
            right: 25%; }
          main.scene .left .decomposition .image:nth-child(12) {
            top: 14.66667%;
            right: 27.5%; }
          main.scene .left .decomposition .image:nth-child(13) {
            top: 16%;
            right: 30%; }
          main.scene .left .decomposition .image:nth-child(14) {
            top: 17.33333%;
            right: 32.5%; }
          main.scene .left .decomposition .image:nth-child(15) {
            top: 18.66667%;
            right: 35%; }
          main.scene .left .decomposition .image:nth-child(16) {
            top: 20%;
            right: 37.5%; }
          main.scene .left .decomposition .image:nth-child(17) {
            top: 21.33333%;
            right: 40%; }
          main.scene .left .decomposition .image:nth-child(18) {
            top: 22.66667%;
            right: 42.5%; }
          main.scene .left .decomposition .image:nth-child(19) {
            top: 24%;
            right: 45%; }
          main.scene .left .decomposition .image:nth-child(20) {
            top: 25.33333%;
            right: 47.5%; }
          main.scene .left .decomposition .image:nth-child(21) {
            top: 26.66667%;
            right: 50%; }
          main.scene .left .decomposition .image:nth-child(22) {
            top: 28%;
            right: 52.5%; }
          main.scene .left .decomposition .image:nth-child(23) {
            top: 29.33333%;
            right: 55%; }
          main.scene .left .decomposition .image:nth-child(24) {
            top: 30.66667%;
            right: 57.5%; }
          main.scene .left .decomposition .image:nth-child(25) {
            top: 32%;
            right: 60%; }
          main.scene .left .decomposition .image:nth-child(26) {
            top: 33.33333%;
            right: 62.5%; }
          main.scene .left .decomposition .image:nth-child(27) {
            top: 34.66667%;
            right: 65%; }
          main.scene .left .decomposition .image:nth-child(28) {
            top: 36%;
            right: 67.5%; }
          main.scene .left .decomposition .image:nth-child(29) {
            top: 37.33333%;
            right: 70%; }
          main.scene .left .decomposition .image:nth-child(30) {
            top: 38.66667%;
            right: 72.5%; }
          main.scene .left .decomposition .image:nth-child(31) {
            top: 40%;
            right: 75%; }
          main.scene .left .decomposition .image:nth-child(32) {
            top: 41.33333%;
            right: 77.5%; }
          main.scene .left .decomposition .image:nth-child(33) {
            top: 42.66667%;
            right: 80%; }
          main.scene .left .decomposition .image:nth-child(34) {
            top: 44%;
            right: 82.5%; }
          main.scene .left .decomposition .image:nth-child(35) {
            top: 45.33333%;
            right: 85%; }
          main.scene .left .decomposition .image:nth-child(36) {
            top: 46.66667%;
            right: 87.5%; }
          main.scene .left .decomposition .image:nth-child(37) {
            top: 48%;
            right: 90%; }
          main.scene .left .decomposition .image:nth-child(38) {
            top: 49.33333%;
            right: 92.5%; }
          main.scene .left .decomposition .image:nth-child(39) {
            top: 50.66667%;
            right: 95%; }
          main.scene .left .decomposition .image:nth-child(40) {
            top: 52%;
            right: 97.5%; }
          main.scene .left .decomposition .image:nth-child(41) {
            top: 53.33333%;
            right: 100%; }
          main.scene .left .decomposition .image:nth-child(42) {
            top: 54.66667%;
            right: 102.5%; }
          main.scene .left .decomposition .image:nth-child(43) {
            top: 56%;
            right: 105%; }
          main.scene .left .decomposition .image:nth-child(44) {
            top: 57.33333%;
            right: 107.5%; }
          main.scene .left .decomposition .image:nth-child(45) {
            top: 58.66667%;
            right: 110%; }
          main.scene .left .decomposition .image:nth-child(46) {
            top: 60%;
            right: 112.5%; }
          main.scene .left .decomposition .image:nth-child(47) {
            top: 61.33333%;
            right: 115%; }
          main.scene .left .decomposition .image:nth-child(48) {
            top: 62.66667%;
            right: 117.5%; }
          main.scene .left .decomposition .image:nth-child(49) {
            top: 64%;
            right: 120%; }
          main.scene .left .decomposition .image:nth-child(50) {
            top: 65.33333%;
            right: 122.5%; }
          main.scene .left .decomposition .image:nth-child(51) {
            top: 66.66667%;
            right: 125%; }
          main.scene .left .decomposition .image:nth-child(52) {
            top: 68%;
            right: 127.5%; }
          main.scene .left .decomposition .image:nth-child(53) {
            top: 69.33333%;
            right: 130%; }
          main.scene .left .decomposition .image:nth-child(54) {
            top: 70.66667%;
            right: 132.5%; }
          main.scene .left .decomposition .image:nth-child(55) {
            top: 72%;
            right: 135%; }
          main.scene .left .decomposition .image:nth-child(56) {
            top: 73.33333%;
            right: 137.5%; }
          main.scene .left .decomposition .image:nth-child(57) {
            top: 74.66667%;
            right: 140%; }
          main.scene .left .decomposition .image:nth-child(58) {
            top: 76%;
            right: 142.5%; }
          main.scene .left .decomposition .image:nth-child(59) {
            top: 77.33333%;
            right: 145%; }
          main.scene .left .decomposition .image:nth-child(60) {
            top: 78.66667%;
            right: 147.5%; }
          main.scene .left .decomposition .image:nth-child(61) {
            top: 78.66667%;
            right: 152.5%; }
          main.scene .left .decomposition .image:nth-child(62) {
            top: 77.33333%;
            right: 155%; }
          main.scene .left .decomposition .image:nth-child(63) {
            top: 76%;
            right: 157.5%; }
          main.scene .left .decomposition .image:nth-child(64) {
            top: 74.66667%;
            right: 160%; }
          main.scene .left .decomposition .image:nth-child(65) {
            top: 73.33333%;
            right: 162.5%; }
          main.scene .left .decomposition .image:nth-child(66) {
            top: 72%;
            right: 165%; }
          main.scene .left .decomposition .image:nth-child(67) {
            top: 70.66667%;
            right: 167.5%; }
          main.scene .left .decomposition .image:nth-child(68) {
            top: 69.33333%;
            right: 170%; }
          main.scene .left .decomposition .image:nth-child(69) {
            top: 68%;
            right: 172.5%; }
          main.scene .left .decomposition .image:nth-child(70) {
            top: 66.66667%;
            right: 175%; }
          main.scene .left .decomposition .image:nth-child(71) {
            top: 65.33333%;
            right: 177.5%; }
          main.scene .left .decomposition .image:nth-child(72) {
            top: 64%;
            right: 180%; }
          main.scene .left .decomposition .image:nth-child(73) {
            top: 62.66667%;
            right: 182.5%; }
          main.scene .left .decomposition .image:nth-child(74) {
            top: 61.33333%;
            right: 185%; }
          main.scene .left .decomposition .image:nth-child(75) {
            top: 60%;
            right: 187.5%; }
          main.scene .left .decomposition .image:nth-child(76) {
            top: 58.66667%;
            right: 190%; }
          main.scene .left .decomposition .image:nth-child(77) {
            top: 57.33333%;
            right: 192.5%; }
          main.scene .left .decomposition .image:nth-child(78) {
            top: 56%;
            right: 195%; }
          main.scene .left .decomposition .image:nth-child(79) {
            top: 54.66667%;
            right: 197.5%; }
          main.scene .left .decomposition .image:nth-child(80) {
            top: 53.33333%;
            right: 200%; }
          main.scene .left .decomposition .image:nth-child(81) {
            top: 52%;
            right: 202.5%; }
          main.scene .left .decomposition .image:nth-child(82) {
            top: 50.66667%;
            right: 205%; }
          main.scene .left .decomposition .image:nth-child(83) {
            top: 49.33333%;
            right: 207.5%; }
          main.scene .left .decomposition .image:nth-child(84) {
            top: 48%;
            right: 210%; }
          main.scene .left .decomposition .image:nth-child(85) {
            top: 46.66667%;
            right: 212.5%; }
          main.scene .left .decomposition .image:nth-child(86) {
            top: 45.33333%;
            right: 215%; }
          main.scene .left .decomposition .image:nth-child(87) {
            top: 44%;
            right: 217.5%; }
          main.scene .left .decomposition .image:nth-child(88) {
            top: 42.66667%;
            right: 220%; }
          main.scene .left .decomposition .image:nth-child(89) {
            top: 41.33333%;
            right: 222.5%; }
          main.scene .left .decomposition .image:nth-child(90) {
            top: 40%;
            right: 225%; }
          main.scene .left .decomposition .image:nth-child(91) {
            top: 38.66667%;
            right: 227.5%; }
          main.scene .left .decomposition .image:nth-child(92) {
            top: 37.33333%;
            right: 230%; }
          main.scene .left .decomposition .image:nth-child(93) {
            top: 36%;
            right: 232.5%; }
          main.scene .left .decomposition .image:nth-child(94) {
            top: 34.66667%;
            right: 235%; }
          main.scene .left .decomposition .image:nth-child(95) {
            top: 33.33333%;
            right: 237.5%; }
          main.scene .left .decomposition .image:nth-child(96) {
            top: 32%;
            right: 240%; }
          main.scene .left .decomposition .image:nth-child(97) {
            top: 30.66667%;
            right: 242.5%; }
          main.scene .left .decomposition .image:nth-child(98) {
            top: 29.33333%;
            right: 245%; }
          main.scene .left .decomposition .image:nth-child(99) {
            top: 28%;
            right: 247.5%; }
          main.scene .left .decomposition .image:nth-child(100) {
            top: 26.66667%;
            right: 250%; }
          main.scene .left .decomposition .image:nth-child(101) {
            top: 25.33333%;
            right: 252.5%; }
          main.scene .left .decomposition .image:nth-child(102) {
            top: 24%;
            right: 255%; }
          main.scene .left .decomposition .image:nth-child(103) {
            top: 22.66667%;
            right: 257.5%; }
          main.scene .left .decomposition .image:nth-child(104) {
            top: 21.33333%;
            right: 260%; }
          main.scene .left .decomposition .image:nth-child(105) {
            top: 20%;
            right: 262.5%; }
          main.scene .left .decomposition .image:nth-child(106) {
            top: 18.66667%;
            right: 265%; }
          main.scene .left .decomposition .image:nth-child(107) {
            top: 17.33333%;
            right: 267.5%; }
          main.scene .left .decomposition .image:nth-child(108) {
            top: 16%;
            right: 270%; }
          main.scene .left .decomposition .image:nth-child(109) {
            top: 14.66667%;
            right: 272.5%; }
          main.scene .left .decomposition .image:nth-child(110) {
            top: 13.33333%;
            right: 275%; }
          main.scene .left .decomposition .image:nth-child(111) {
            top: 12%;
            right: 277.5%; }
          main.scene .left .decomposition .image:nth-child(112) {
            top: 10.66667%;
            right: 280%; }
          main.scene .left .decomposition .image:nth-child(113) {
            top: 9.33333%;
            right: 282.5%; }
          main.scene .left .decomposition .image:nth-child(114) {
            top: 8%;
            right: 285%; }
          main.scene .left .decomposition .image:nth-child(115) {
            top: 6.66667%;
            right: 287.5%; }
          main.scene .left .decomposition .image:nth-child(116) {
            top: 5.33333%;
            right: 290%; }
          main.scene .left .decomposition .image:nth-child(117) {
            top: 4%;
            right: 292.5%; }
          main.scene .left .decomposition .image:nth-child(118) {
            top: 2.66667%;
            right: 295%; }
          main.scene .left .decomposition .image:nth-child(119) {
            top: 1.33333%;
            right: 297.5%; }
          main.scene .left .decomposition .image:nth-child(120) {
            top: 0%;
            right: 300%; }
          main.scene .left .decomposition .image:nth-child(121) {
            top: 0%;
            right: 300%; }
          main.scene .left .decomposition .image:nth-child(122) {
            top: 1.33333%;
            right: 302.5%; }
          main.scene .left .decomposition .image:nth-child(123) {
            top: 2.66667%;
            right: 305%; }
          main.scene .left .decomposition .image:nth-child(124) {
            top: 4%;
            right: 307.5%; }
          main.scene .left .decomposition .image:nth-child(125) {
            top: 5.33333%;
            right: 310%; }
          main.scene .left .decomposition .image:nth-child(126) {
            top: 6.66667%;
            right: 312.5%; }
          main.scene .left .decomposition .image:nth-child(127) {
            top: 8%;
            right: 315%; }
          main.scene .left .decomposition .image:nth-child(128) {
            top: 9.33333%;
            right: 317.5%; }
          main.scene .left .decomposition .image:nth-child(129) {
            top: 10.66667%;
            right: 320%; }
          main.scene .left .decomposition .image:nth-child(130) {
            top: 12%;
            right: 322.5%; }
          main.scene .left .decomposition .image:nth-child(131) {
            top: 13.33333%;
            right: 325%; }
          main.scene .left .decomposition .image:nth-child(132) {
            top: 14.66667%;
            right: 327.5%; }
          main.scene .left .decomposition .image:nth-child(133) {
            top: 16%;
            right: 330%; }
          main.scene .left .decomposition .image:nth-child(134) {
            top: 17.33333%;
            right: 332.5%; }
          main.scene .left .decomposition .image:nth-child(135) {
            top: 18.66667%;
            right: 335%; }
          main.scene .left .decomposition .image:nth-child(136) {
            top: 20%;
            right: 337.5%; }
          main.scene .left .decomposition .image:nth-child(137) {
            top: 21.33333%;
            right: 340%; }
          main.scene .left .decomposition .image:nth-child(138) {
            top: 22.66667%;
            right: 342.5%; }
          main.scene .left .decomposition .image:nth-child(139) {
            top: 24%;
            right: 345%; }
          main.scene .left .decomposition .image:nth-child(140) {
            top: 25.33333%;
            right: 347.5%; }
          main.scene .left .decomposition .image:nth-child(141) {
            top: 26.66667%;
            right: 350%; }
          main.scene .left .decomposition .image:nth-child(142) {
            top: 28%;
            right: 352.5%; }
          main.scene .left .decomposition .image:nth-child(143) {
            top: 29.33333%;
            right: 355%; }
          main.scene .left .decomposition .image:nth-child(144) {
            top: 30.66667%;
            right: 357.5%; }
          main.scene .left .decomposition .image:nth-child(145) {
            top: 32%;
            right: 360%; }
          main.scene .left .decomposition .image:nth-child(146) {
            top: 33.33333%;
            right: 362.5%; }
          main.scene .left .decomposition .image:nth-child(147) {
            top: 34.66667%;
            right: 365%; }
          main.scene .left .decomposition .image:nth-child(148) {
            top: 36%;
            right: 367.5%; }
          main.scene .left .decomposition .image:nth-child(149) {
            top: 37.33333%;
            right: 370%; }
          main.scene .left .decomposition .image:nth-child(150) {
            top: 38.66667%;
            right: 372.5%; }
          main.scene .left .decomposition .image:nth-child(151) {
            top: 40%;
            right: 375%; }
          main.scene .left .decomposition .image:nth-child(152) {
            top: 41.33333%;
            right: 377.5%; }
          main.scene .left .decomposition .image:nth-child(153) {
            top: 42.66667%;
            right: 380%; }
          main.scene .left .decomposition .image:nth-child(154) {
            top: 44%;
            right: 382.5%; }
          main.scene .left .decomposition .image:nth-child(155) {
            top: 45.33333%;
            right: 385%; }
          main.scene .left .decomposition .image:nth-child(156) {
            top: 46.66667%;
            right: 387.5%; }
          main.scene .left .decomposition .image:nth-child(157) {
            top: 48%;
            right: 390%; }
          main.scene .left .decomposition .image:nth-child(158) {
            top: 49.33333%;
            right: 392.5%; }
          main.scene .left .decomposition .image:nth-child(159) {
            top: 50.66667%;
            right: 395%; }
          main.scene .left .decomposition .image:nth-child(160) {
            top: 52%;
            right: 397.5%; }
          main.scene .left .decomposition .image:nth-child(161) {
            top: 53.33333%;
            right: 400%; }
          main.scene .left .decomposition .image:nth-child(162) {
            top: 54.66667%;
            right: 402.5%; }
          main.scene .left .decomposition .image:nth-child(163) {
            top: 56%;
            right: 405%; }
          main.scene .left .decomposition .image:nth-child(164) {
            top: 57.33333%;
            right: 407.5%; }
          main.scene .left .decomposition .image:nth-child(165) {
            top: 58.66667%;
            right: 410%; }
          main.scene .left .decomposition .image:nth-child(166) {
            top: 60%;
            right: 412.5%; }
          main.scene .left .decomposition .image:nth-child(167) {
            top: 61.33333%;
            right: 415%; }
          main.scene .left .decomposition .image:nth-child(168) {
            top: 62.66667%;
            right: 417.5%; }
          main.scene .left .decomposition .image:nth-child(169) {
            top: 64%;
            right: 420%; }
          main.scene .left .decomposition .image:nth-child(170) {
            top: 65.33333%;
            right: 422.5%; }
          main.scene .left .decomposition .image:nth-child(171) {
            top: 66.66667%;
            right: 425%; }
          main.scene .left .decomposition .image:nth-child(172) {
            top: 68%;
            right: 427.5%; }
          main.scene .left .decomposition .image:nth-child(173) {
            top: 69.33333%;
            right: 430%; }
          main.scene .left .decomposition .image:nth-child(174) {
            top: 70.66667%;
            right: 432.5%; }
          main.scene .left .decomposition .image:nth-child(175) {
            top: 72%;
            right: 435%; }
          main.scene .left .decomposition .image:nth-child(176) {
            top: 73.33333%;
            right: 437.5%; }
          main.scene .left .decomposition .image:nth-child(177) {
            top: 74.66667%;
            right: 440%; }
          main.scene .left .decomposition .image:nth-child(178) {
            top: 76%;
            right: 442.5%; }
          main.scene .left .decomposition .image:nth-child(179) {
            top: 77.33333%;
            right: 445%; }
          main.scene .left .decomposition .image:nth-child(180) {
            top: 78.66667%;
            right: 447.5%; }
          main.scene .left .decomposition .image:nth-child(181) {
            top: 78.66667%;
            right: 452.5%; }
          main.scene .left .decomposition .image:nth-child(182) {
            top: 77.33333%;
            right: 455%; }
          main.scene .left .decomposition .image:nth-child(183) {
            top: 76%;
            right: 457.5%; }
          main.scene .left .decomposition .image:nth-child(184) {
            top: 74.66667%;
            right: 460%; }
          main.scene .left .decomposition .image:nth-child(185) {
            top: 73.33333%;
            right: 462.5%; }
          main.scene .left .decomposition .image:nth-child(186) {
            top: 72%;
            right: 465%; }
          main.scene .left .decomposition .image:nth-child(187) {
            top: 70.66667%;
            right: 467.5%; }
          main.scene .left .decomposition .image:nth-child(188) {
            top: 69.33333%;
            right: 470%; }
          main.scene .left .decomposition .image:nth-child(189) {
            top: 68%;
            right: 472.5%; }
          main.scene .left .decomposition .image:nth-child(190) {
            top: 66.66667%;
            right: 475%; }
          main.scene .left .decomposition .image:nth-child(191) {
            top: 65.33333%;
            right: 477.5%; }
          main.scene .left .decomposition .image:nth-child(192) {
            top: 64%;
            right: 480%; }
          main.scene .left .decomposition .image:nth-child(193) {
            top: 62.66667%;
            right: 482.5%; }
          main.scene .left .decomposition .image:nth-child(194) {
            top: 61.33333%;
            right: 485%; }
          main.scene .left .decomposition .image:nth-child(195) {
            top: 60%;
            right: 487.5%; }
          main.scene .left .decomposition .image:nth-child(196) {
            top: 58.66667%;
            right: 490%; }
          main.scene .left .decomposition .image:nth-child(197) {
            top: 57.33333%;
            right: 492.5%; }
          main.scene .left .decomposition .image:nth-child(198) {
            top: 56%;
            right: 495%; }
          main.scene .left .decomposition .image:nth-child(199) {
            top: 54.66667%;
            right: 497.5%; }
          main.scene .left .decomposition .image:nth-child(200) {
            top: 53.33333%;
            right: 500%; }
          main.scene .left .decomposition .image:nth-child(201) {
            top: 52%;
            right: 502.5%; }
          main.scene .left .decomposition .image:nth-child(202) {
            top: 50.66667%;
            right: 505%; }
          main.scene .left .decomposition .image:nth-child(203) {
            top: 49.33333%;
            right: 507.5%; }
          main.scene .left .decomposition .image:nth-child(204) {
            top: 48%;
            right: 510%; }
          main.scene .left .decomposition .image:nth-child(205) {
            top: 46.66667%;
            right: 512.5%; }
          main.scene .left .decomposition .image:nth-child(206) {
            top: 45.33333%;
            right: 515%; }
          main.scene .left .decomposition .image:nth-child(207) {
            top: 44%;
            right: 517.5%; }
          main.scene .left .decomposition .image:nth-child(208) {
            top: 42.66667%;
            right: 520%; }
          main.scene .left .decomposition .image:nth-child(209) {
            top: 41.33333%;
            right: 522.5%; }
          main.scene .left .decomposition .image:nth-child(210) {
            top: 40%;
            right: 525%; }
          main.scene .left .decomposition .image:nth-child(211) {
            top: 38.66667%;
            right: 527.5%; }
          main.scene .left .decomposition .image:nth-child(212) {
            top: 37.33333%;
            right: 530%; }
          main.scene .left .decomposition .image:nth-child(213) {
            top: 36%;
            right: 532.5%; }
          main.scene .left .decomposition .image:nth-child(214) {
            top: 34.66667%;
            right: 535%; }
          main.scene .left .decomposition .image:nth-child(215) {
            top: 33.33333%;
            right: 537.5%; }
          main.scene .left .decomposition .image:nth-child(216) {
            top: 32%;
            right: 540%; }
          main.scene .left .decomposition .image:nth-child(217) {
            top: 30.66667%;
            right: 542.5%; }
          main.scene .left .decomposition .image:nth-child(218) {
            top: 29.33333%;
            right: 545%; }
          main.scene .left .decomposition .image:nth-child(219) {
            top: 28%;
            right: 547.5%; }
          main.scene .left .decomposition .image:nth-child(220) {
            top: 26.66667%;
            right: 550%; }
          main.scene .left .decomposition .image:nth-child(221) {
            top: 25.33333%;
            right: 552.5%; }
          main.scene .left .decomposition .image:nth-child(222) {
            top: 24%;
            right: 555%; }
          main.scene .left .decomposition .image:nth-child(223) {
            top: 22.66667%;
            right: 557.5%; }
          main.scene .left .decomposition .image:nth-child(224) {
            top: 21.33333%;
            right: 560%; }
          main.scene .left .decomposition .image:nth-child(225) {
            top: 20%;
            right: 562.5%; }
          main.scene .left .decomposition .image:nth-child(226) {
            top: 18.66667%;
            right: 565%; }
          main.scene .left .decomposition .image:nth-child(227) {
            top: 17.33333%;
            right: 567.5%; }
          main.scene .left .decomposition .image:nth-child(228) {
            top: 16%;
            right: 570%; }
          main.scene .left .decomposition .image:nth-child(229) {
            top: 14.66667%;
            right: 572.5%; }
          main.scene .left .decomposition .image:nth-child(230) {
            top: 13.33333%;
            right: 575%; }
          main.scene .left .decomposition .image:nth-child(231) {
            top: 12%;
            right: 577.5%; }
          main.scene .left .decomposition .image:nth-child(232) {
            top: 10.66667%;
            right: 580%; }
          main.scene .left .decomposition .image:nth-child(233) {
            top: 9.33333%;
            right: 582.5%; }
          main.scene .left .decomposition .image:nth-child(234) {
            top: 8%;
            right: 585%; }
          main.scene .left .decomposition .image:nth-child(235) {
            top: 6.66667%;
            right: 587.5%; }
          main.scene .left .decomposition .image:nth-child(236) {
            top: 5.33333%;
            right: 590%; }
          main.scene .left .decomposition .image:nth-child(237) {
            top: 4%;
            right: 592.5%; }
          main.scene .left .decomposition .image:nth-child(238) {
            top: 2.66667%;
            right: 595%; }
          main.scene .left .decomposition .image:nth-child(239) {
            top: 1.33333%;
            right: 597.5%; }
          main.scene .left .decomposition .image:nth-child(240) {
            top: 0%;
            right: 600%; }
          main.scene .left .decomposition .image:nth-child(241) {
            top: 0%;
            right: 600%; }
          main.scene .left .decomposition .image:nth-child(242) {
            top: 1.33333%;
            right: 602.5%; }
          main.scene .left .decomposition .image:nth-child(243) {
            top: 2.66667%;
            right: 605%; }
          main.scene .left .decomposition .image:nth-child(244) {
            top: 4%;
            right: 607.5%; }
          main.scene .left .decomposition .image:nth-child(245) {
            top: 5.33333%;
            right: 610%; }
          main.scene .left .decomposition .image:nth-child(246) {
            top: 6.66667%;
            right: 612.5%; }
          main.scene .left .decomposition .image:nth-child(247) {
            top: 8%;
            right: 615%; }
          main.scene .left .decomposition .image:nth-child(248) {
            top: 9.33333%;
            right: 617.5%; }
          main.scene .left .decomposition .image:nth-child(249) {
            top: 10.66667%;
            right: 620%; }
          main.scene .left .decomposition .image:nth-child(250) {
            top: 12%;
            right: 622.5%; }
          main.scene .left .decomposition .image:nth-child(251) {
            top: 13.33333%;
            right: 625%; }
          main.scene .left .decomposition .image:nth-child(252) {
            top: 14.66667%;
            right: 627.5%; }
          main.scene .left .decomposition .image:nth-child(253) {
            top: 16%;
            right: 630%; }
          main.scene .left .decomposition .image:nth-child(254) {
            top: 17.33333%;
            right: 632.5%; }
          main.scene .left .decomposition .image:nth-child(255) {
            top: 18.66667%;
            right: 635%; }
          main.scene .left .decomposition .image:nth-child(256) {
            top: 20%;
            right: 637.5%; }
          main.scene .left .decomposition .image:nth-child(257) {
            top: 21.33333%;
            right: 640%; }
          main.scene .left .decomposition .image:nth-child(258) {
            top: 22.66667%;
            right: 642.5%; }
          main.scene .left .decomposition .image:nth-child(259) {
            top: 24%;
            right: 645%; }
          main.scene .left .decomposition .image:nth-child(260) {
            top: 25.33333%;
            right: 647.5%; }
          main.scene .left .decomposition .image:nth-child(261) {
            top: 26.66667%;
            right: 650%; }
          main.scene .left .decomposition .image:nth-child(262) {
            top: 28%;
            right: 652.5%; }
          main.scene .left .decomposition .image:nth-child(263) {
            top: 29.33333%;
            right: 655%; }
          main.scene .left .decomposition .image:nth-child(264) {
            top: 30.66667%;
            right: 657.5%; }
          main.scene .left .decomposition .image:nth-child(265) {
            top: 32%;
            right: 660%; }
          main.scene .left .decomposition .image:nth-child(266) {
            top: 33.33333%;
            right: 662.5%; }
          main.scene .left .decomposition .image:nth-child(267) {
            top: 34.66667%;
            right: 665%; }
          main.scene .left .decomposition .image:nth-child(268) {
            top: 36%;
            right: 667.5%; }
          main.scene .left .decomposition .image:nth-child(269) {
            top: 37.33333%;
            right: 670%; }
          main.scene .left .decomposition .image:nth-child(270) {
            top: 38.66667%;
            right: 672.5%; }
          main.scene .left .decomposition .image:nth-child(271) {
            top: 40%;
            right: 675%; }
          main.scene .left .decomposition .image:nth-child(272) {
            top: 41.33333%;
            right: 677.5%; }
          main.scene .left .decomposition .image:nth-child(273) {
            top: 42.66667%;
            right: 680%; }
          main.scene .left .decomposition .image:nth-child(274) {
            top: 44%;
            right: 682.5%; }
          main.scene .left .decomposition .image:nth-child(275) {
            top: 45.33333%;
            right: 685%; }
          main.scene .left .decomposition .image:nth-child(276) {
            top: 46.66667%;
            right: 687.5%; }
          main.scene .left .decomposition .image:nth-child(277) {
            top: 48%;
            right: 690%; }
          main.scene .left .decomposition .image:nth-child(278) {
            top: 49.33333%;
            right: 692.5%; }
          main.scene .left .decomposition .image:nth-child(279) {
            top: 50.66667%;
            right: 695%; }
          main.scene .left .decomposition .image:nth-child(280) {
            top: 52%;
            right: 697.5%; }
          main.scene .left .decomposition .image:nth-child(281) {
            top: 53.33333%;
            right: 700%; }
          main.scene .left .decomposition .image:nth-child(282) {
            top: 54.66667%;
            right: 702.5%; }
          main.scene .left .decomposition .image:nth-child(283) {
            top: 56%;
            right: 705%; }
          main.scene .left .decomposition .image:nth-child(284) {
            top: 57.33333%;
            right: 707.5%; }
          main.scene .left .decomposition .image:nth-child(285) {
            top: 58.66667%;
            right: 710%; }
          main.scene .left .decomposition .image:nth-child(286) {
            top: 60%;
            right: 712.5%; }
          main.scene .left .decomposition .image:nth-child(287) {
            top: 61.33333%;
            right: 715%; }
          main.scene .left .decomposition .image:nth-child(288) {
            top: 62.66667%;
            right: 717.5%; }
          main.scene .left .decomposition .image:nth-child(289) {
            top: 64%;
            right: 720%; }
          main.scene .left .decomposition .image:nth-child(290) {
            top: 65.33333%;
            right: 722.5%; }
          main.scene .left .decomposition .image:nth-child(291) {
            top: 66.66667%;
            right: 725%; }
          main.scene .left .decomposition .image:nth-child(292) {
            top: 68%;
            right: 727.5%; }
          main.scene .left .decomposition .image:nth-child(293) {
            top: 69.33333%;
            right: 730%; }
          main.scene .left .decomposition .image:nth-child(294) {
            top: 70.66667%;
            right: 732.5%; }
          main.scene .left .decomposition .image:nth-child(295) {
            top: 72%;
            right: 735%; }
          main.scene .left .decomposition .image:nth-child(296) {
            top: 73.33333%;
            right: 737.5%; }
          main.scene .left .decomposition .image:nth-child(297) {
            top: 74.66667%;
            right: 740%; }
          main.scene .left .decomposition .image:nth-child(298) {
            top: 76%;
            right: 742.5%; }
          main.scene .left .decomposition .image:nth-child(299) {
            top: 77.33333%;
            right: 745%; }
          main.scene .left .decomposition .image:nth-child(300) {
            top: 78.66667%;
            right: 747.5%; }
          main.scene .left .decomposition .image:nth-child(301) {
            top: 78.66667%;
            right: 752.5%; }
          main.scene .left .decomposition .image:nth-child(302) {
            top: 77.33333%;
            right: 755%; }
          main.scene .left .decomposition .image:nth-child(303) {
            top: 76%;
            right: 757.5%; }
          main.scene .left .decomposition .image:nth-child(304) {
            top: 74.66667%;
            right: 760%; }
          main.scene .left .decomposition .image:nth-child(305) {
            top: 73.33333%;
            right: 762.5%; }
          main.scene .left .decomposition .image:nth-child(306) {
            top: 72%;
            right: 765%; }
          main.scene .left .decomposition .image:nth-child(307) {
            top: 70.66667%;
            right: 767.5%; }
          main.scene .left .decomposition .image:nth-child(308) {
            top: 69.33333%;
            right: 770%; }
          main.scene .left .decomposition .image:nth-child(309) {
            top: 68%;
            right: 772.5%; }
          main.scene .left .decomposition .image:nth-child(310) {
            top: 66.66667%;
            right: 775%; }
          main.scene .left .decomposition .image:nth-child(311) {
            top: 65.33333%;
            right: 777.5%; }
          main.scene .left .decomposition .image:nth-child(312) {
            top: 64%;
            right: 780%; }
          main.scene .left .decomposition .image:nth-child(313) {
            top: 62.66667%;
            right: 782.5%; }
          main.scene .left .decomposition .image:nth-child(314) {
            top: 61.33333%;
            right: 785%; }
          main.scene .left .decomposition .image:nth-child(315) {
            top: 60%;
            right: 787.5%; }
          main.scene .left .decomposition .image:nth-child(316) {
            top: 58.66667%;
            right: 790%; }
          main.scene .left .decomposition .image:nth-child(317) {
            top: 57.33333%;
            right: 792.5%; }
          main.scene .left .decomposition .image:nth-child(318) {
            top: 56%;
            right: 795%; }
          main.scene .left .decomposition .image:nth-child(319) {
            top: 54.66667%;
            right: 797.5%; }
          main.scene .left .decomposition .image:nth-child(320) {
            top: 53.33333%;
            right: 800%; }
          main.scene .left .decomposition .image:nth-child(321) {
            top: 52%;
            right: 802.5%; }
          main.scene .left .decomposition .image:nth-child(322) {
            top: 50.66667%;
            right: 805%; }
          main.scene .left .decomposition .image:nth-child(323) {
            top: 49.33333%;
            right: 807.5%; }
          main.scene .left .decomposition .image:nth-child(324) {
            top: 48%;
            right: 810%; }
          main.scene .left .decomposition .image:nth-child(325) {
            top: 46.66667%;
            right: 812.5%; }
          main.scene .left .decomposition .image:nth-child(326) {
            top: 45.33333%;
            right: 815%; }
          main.scene .left .decomposition .image:nth-child(327) {
            top: 44%;
            right: 817.5%; }
          main.scene .left .decomposition .image:nth-child(328) {
            top: 42.66667%;
            right: 820%; }
          main.scene .left .decomposition .image:nth-child(329) {
            top: 41.33333%;
            right: 822.5%; }
          main.scene .left .decomposition .image:nth-child(330) {
            top: 40%;
            right: 825%; }
          main.scene .left .decomposition .image:nth-child(331) {
            top: 38.66667%;
            right: 827.5%; }
          main.scene .left .decomposition .image:nth-child(332) {
            top: 37.33333%;
            right: 830%; }
          main.scene .left .decomposition .image:nth-child(333) {
            top: 36%;
            right: 832.5%; }
          main.scene .left .decomposition .image:nth-child(334) {
            top: 34.66667%;
            right: 835%; }
          main.scene .left .decomposition .image:nth-child(335) {
            top: 33.33333%;
            right: 837.5%; }
          main.scene .left .decomposition .image:nth-child(336) {
            top: 32%;
            right: 840%; }
          main.scene .left .decomposition .image:nth-child(337) {
            top: 30.66667%;
            right: 842.5%; }
          main.scene .left .decomposition .image:nth-child(338) {
            top: 29.33333%;
            right: 845%; }
          main.scene .left .decomposition .image:nth-child(339) {
            top: 28%;
            right: 847.5%; }
          main.scene .left .decomposition .image:nth-child(340) {
            top: 26.66667%;
            right: 850%; }
          main.scene .left .decomposition .image:nth-child(341) {
            top: 25.33333%;
            right: 852.5%; }
          main.scene .left .decomposition .image:nth-child(342) {
            top: 24%;
            right: 855%; }
          main.scene .left .decomposition .image:nth-child(343) {
            top: 22.66667%;
            right: 857.5%; }
          main.scene .left .decomposition .image:nth-child(344) {
            top: 21.33333%;
            right: 860%; }
          main.scene .left .decomposition .image:nth-child(345) {
            top: 20%;
            right: 862.5%; }
          main.scene .left .decomposition .image:nth-child(346) {
            top: 18.66667%;
            right: 865%; }
          main.scene .left .decomposition .image:nth-child(347) {
            top: 17.33333%;
            right: 867.5%; }
          main.scene .left .decomposition .image:nth-child(348) {
            top: 16%;
            right: 870%; }
          main.scene .left .decomposition .image:nth-child(349) {
            top: 14.66667%;
            right: 872.5%; }
          main.scene .left .decomposition .image:nth-child(350) {
            top: 13.33333%;
            right: 875%; }
          main.scene .left .decomposition .image:nth-child(351) {
            top: 12%;
            right: 877.5%; }
          main.scene .left .decomposition .image:nth-child(352) {
            top: 10.66667%;
            right: 880%; }
          main.scene .left .decomposition .image:nth-child(353) {
            top: 9.33333%;
            right: 882.5%; }
          main.scene .left .decomposition .image:nth-child(354) {
            top: 8%;
            right: 885%; }
          main.scene .left .decomposition .image:nth-child(355) {
            top: 6.66667%;
            right: 887.5%; }
          main.scene .left .decomposition .image:nth-child(356) {
            top: 5.33333%;
            right: 890%; }
          main.scene .left .decomposition .image:nth-child(357) {
            top: 4%;
            right: 892.5%; }
          main.scene .left .decomposition .image:nth-child(358) {
            top: 2.66667%;
            right: 895%; }
          main.scene .left .decomposition .image:nth-child(359) {
            top: 1.33333%;
            right: 897.5%; }
          main.scene .left .decomposition .image:nth-child(360) {
            top: 0%;
            right: 900%; }
    main.scene.compositions .bottom {
      z-index: -1; }
    main.scene.compositions .left {
      z-index: -1; }
    main.scene.compositions .right {
      z-index: 3; }
      main.scene.compositions .right .composition {
        cursor: default;
        background: none;
        height: calc(100vh - 240px);
        width: auto; }
        main.scene.compositions .right .composition img {
          opacity: 1;
          visibility: visible; }
        main.scene.compositions .right .composition.fullWidth {
          width: calc(10 * 100vw / 12);
          height: auto; }
          main.scene.compositions .right .composition.fullWidth img {
            width: 100%;
            height: auto; }
    main.scene.plans .bottom {
      z-index: -1; }
    main.scene.plans .left {
      z-index: 3; }
      main.scene.plans .left .decomposition {
        cursor: default; }
        main.scene.plans .left .decomposition .image {
          background: none; }
          main.scene.plans .left .decomposition .image img {
            opacity: 1; }
    main.scene.plans .right {
      z-index: -2; }
    main.scene.sentences .bottom {
      z-index: 3; }
      main.scene.sentences .bottom .sentence {
        height: 80px;
        margin: 0; }
        main.scene.sentences .bottom .sentence > span {
          font-size: 64px;
          line-height: 80px;
          color: white;
          opacity: 1;
          background: none;
          cursor: default; }
          main.scene.sentences .bottom .sentence > span.most-used {
            font-size: 32px;
            line-height: 40px; }
    main.scene.sentences .left {
      z-index: -1; }
    main.scene.sentences .right {
      z-index: -1; }
    main.scene.all .bottom {
      z-index: 3; }
      main.scene.all .bottom .sentence {
        height: 80px;
        margin: 0; }
        main.scene.all .bottom .sentence > span {
          font-size: 64px;
          line-height: 80px;
          color: white;
          opacity: 1;
          background: none;
          cursor: default; }
          main.scene.all .bottom .sentence > span.most-used {
            font-size: 32px;
            line-height: 40px; }
    main.scene.all .left {
      z-index: 2; }
      main.scene.all .left .decomposition {
        cursor: default; }
        main.scene.all .left .decomposition .image {
          background: none; }
          main.scene.all .left .decomposition .image img {
            opacity: 1; }
    main.scene.all .right {
      z-index: 1; }
      main.scene.all .right .composition {
        cursor: default;
        background: none;
        height: calc(100vh - 240px);
        width: auto; }
        main.scene.all .right .composition img {
          opacity: 1;
          visibility: visible; }
        main.scene.all .right .composition.fullWidth {
          width: calc(10 * 100vw / 12);
          height: auto; }
          main.scene.all .right .composition.fullWidth img {
            width: 100%;
            height: auto; }
  main:after {
    content: "";
    display: block;
    position: relative;
    width: 100%;
    height: 1px;
    float: none;
    clear: both; }
  @media (max-width: 519px) {
    main {
      padding: 0 20px 40px 20px; } }

.home {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 100px 80px;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  transition: .3s; }
  @media (max-width: 519px) {
    .home {
      padding: 40px 20px; } }

.loaded .home {
  opacity: 1;
  visibility: visible;
  transition: .3s; }

header {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  height: 80px;
  padding: 20px 80px;
  z-index: 3;
  opacity: 0;
  visibility: hidden; }
  header a {
    display: block;
    position: relative;
    width: auto;
    height: 40px;
    padding: 20px 4px 0px 4px;
    text-decoration: none;
    text-align: left;
    font-weight: 200;
    font-size: 16px;
    color: white;
    cursor: pointer; }
    header a.link-home {
      float: left; }
      header a.link-home .arrow {
        transform: rotate(90deg); }
    header a.link-about, header a.link-restart {
      position: absolute;
      right: 0;
      width: 240px;
      height: auto;
      padding: 10px 16px 0px 16px;
      box-sizing: border-box; }
  header.fixed {
    position: fixed; }

.start header {
  transition: .3s;
  transition-delay: .45s;
  opacity: 1;
  visibility: visible; }

.title {
  display: flex;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 5;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  transition: .3s;
  cursor: pointer; }
  .title h1 {
    font-size: 80px;
    font-weight: 200;
    margin: 0; }
  .title .subtitle {
    font-size: 20px;
    font-weight: 400;
    max-width: 560px;
    margin-bottom: 0px;
    text-align: center; }
    .title .subtitle strong {
      font-weight: 500; }
  .title .presentation {
    max-width: 720px; }
    .title .presentation p {
      font-size: 15px;
      font-weight: 200;
      padding-bottom: 12px;
      margin: 0;
      text-align: center; }
      .title .presentation p strong {
        font-weight: 500; }
      .title .presentation p a {
        font-weight: 500;
        color: white;
        text-decoration: underline; }
    .title .presentation .glossary {
      margin-top: 24px; }
  .title .credits {
    max-width: 640px; }
    .title .credits p {
      font-size: 12px;
      font-weight: 200;
      padding-bottom: 0px;
      margin: 0;
      text-align: center; }
      .title .credits p strong {
        font-size: 14px;
        font-weight: 500; }
      .title .credits p:first-child {
        font-weight: 500; }
  @media (min-width: 1500px) {
    .title h1 {
      font-size: 120px;
      font-weight: 200;
      margin: 0; }
    .title p {
      font-size: 26px;
      font-weight: 200;
      margin: 0;
      padding-bottom: 8px; }
      .title p strong {
        font-weight: 500; } }
  @media (max-width: 799px) {
    .title h1 {
      font-size: 64px;
      font-weight: 200;
      margin: 0; } }
  @media (max-width: 519px) {
    .title {
      width: 100%;
      height: 100%;
      padding: 40px;
      top: 0;
      left: 0; }
      .title h1 {
        font-size: 36px; } }

.loaded {
  overflow: hidden; }
  .loaded .title {
    opacity: 1;
    visibility: visible;
    transition: .3s; }
  .loaded main {
    opacity: 1;
    transition: .3s; }
  .loaded:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    background: white;
    z-index: 4; }

.start {
  overflow: auto; }
  .start .title {
    opacity: 0;
    visibility: hidden; }
  .start:after {
    visibility: hidden; }

nav {
  display: flex;
  position: absolute;
  top: 0;
  left: 84px;
  width: 120px;
  height: 100px;
  box-sizing: border-box;
  align-items: flex-end;
  justify-content: flex-start;
  padding-bottom: 24px;
  z-index: 5; }
  nav a {
    display: block;
    position: relative;
    width: 100%;
    text-decoration: none;
    text-align: left;
    font-weight: 200;
    font-size: 16px;
    color: white;
    cursor: pointer; }
  @media (max-width: 519px) {
    nav {
      position: relative;
      width: 100%;
      height: 40px;
      left: 0px;
      padding: 6px 24px;
      font-size: 14px; } }
  nav.nav--scene {
    position: fixed; }

.timer {
  display: block;
  position: relative;
  width: 100%;
  height: 50%;
  margin: 0;
  padding: 0; }
  .timer .hours, .timer .minutes, .timer .seconds {
    display: flex;
    position: relative;
    width: calc(100% /3);
    height: 100%;
    float: left;
    align-items: center;
    justify-content: center;
    font-weight: 200; }
  .timer .hours:after, .timer .minutes:after {
    display: block;
    position: absolute;
    content: ":";
    height: 24px;
    top: 50%;
    margin-top: -12px;
    right: -2px; }

.mods {
  display: block;
  position: relative;
  width: 100%;
  height: 50%;
  margin: 0;
  padding: 0; }
  .mods .mods__compositions, .mods .mods__sentences, .mods .mods__plans {
    display: block;
    position: relative;
    width: calc(100% /3);
    height: 100%;
    float: left;
    align-items: center;
    justify-content: center;
    font-weight: 200; }
    .mods .mods__compositions.active:before, .mods .mods__sentences.active:before, .mods .mods__plans.active:before {
      background: #323232; }
    .mods .mods__compositions.active:after, .mods .mods__sentences.active:after, .mods .mods__plans.active:after {
      background: #323232; }
  .mods .mods__plans:before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    margin: -3px 0 0 -8px;
    background: white; }
  .mods .mods__plans:after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    margin: -8px 0 0 -2px;
    background: white; }
  .mods .mods__sentences:before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 5px;
    margin: -7px 0 0 -10px;
    background: white; }
  .mods .mods__sentences:after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 5px;
    margin: 1px 0 0 -10px;
    background: white; }
  .mods .mods__compositions:before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -10px 0 0 -10px;
    background: white; }

.poster {
  display: block;
  position: relative;
  width: 20%;
  height: 50%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  float: left;
  overflow: hidden; }
  .poster .poster__infos {
    display: block;
    position: absolute;
    margin: 16px;
    width: calc(100% - 32px);
    height: calc(100% - 32px);
    border: solid 2px white;
    box-sizing: border-box;
    padding: 16px;
    opacity: 0;
    visibility: hidden;
    transition: .3s;
    z-index: 5; }
    .poster .poster__infos .infos {
      display: block;
      position: relative;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.7);
      box-sizing: border-box;
      padding: 16px;
      cursor: pointer; }
      .poster .poster__infos .infos .infos__title {
        display: flex;
        position: relative;
        width: 100%;
        padding-top: 20px;
        height: calc(100% / 2);
        align-items: center;
        box-sizing: border-box; }
        .poster .poster__infos .infos .infos__title h2 {
          width: 100%;
          margin: 0;
          padding: 0;
          text-align: center;
          font-size: 16px;
          text-decoration: none;
          color: white; }
          @media (min-width: 1500px) {
            .poster .poster__infos .infos .infos__title h2 {
              font-size: 24px;
              box-sizing: border-box;
              padding: 0 12px;
              font-weight: 400; } }
      .poster .poster__infos .infos .infos__year {
        display: flex;
        position: relative;
        width: 100%;
        height: calc(100% / 2);
        align-items: center;
        flex-direction: column;
        box-sizing: border-box;
        padding-bottom: 20px; }
        .poster .poster__infos .infos .infos__year .year {
          width: 100%;
          margin: 0;
          padding: 0;
          text-align: center;
          font-weight: 200;
          font-size: 18px; }
      .poster .poster__infos .infos .infos__data {
        display: block;
        position: relative;
        width: 100%;
        height: calc(100% / 3); }
  .poster .poster__display {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    margin: 4px;
    padding: 0;
    z-index: 4;
    justify-content: center;
    align-items: center;
    overflow: hidden; }
    .poster .poster__display img {
      display: block;
      width: 100%;
      height: auto; }
      .poster .poster__display img.fullheight {
        width: auto;
        height: 100%; }
  .poster:hover .poster__infos {
    opacity: 1;
    visibility: visible; }
  @media (max-width: 1179px) {
    .poster {
      width: calc(100% / 3);
      height: calc(5 * 100vw / 12); } }
  @media (max-width: 799px) {
    .poster {
      width: 50%;
      height: calc(100vw / 2); } }
  @media (max-width: 519px) {
    .poster {
      width: 100%;
      height: calc(0.75 * 100vh); }
      .poster .poster__infos .infos .infos__title {
        padding-top: 0px; }
      .poster .poster__infos .infos .infos__year {
        padding-bottom: 0px; }
      .poster .poster__display img {
        display: block;
        width: 100%;
        height: auto; } }

.modal-wrapper {
  display: block;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  transition: .3s;
  z-index: 10; }
  .modal-wrapper .modal {
    display: block;
    position: relative;
    width: calc(9 * 100vw / 12);
    height: calc(100% - (100vw / 6));
    padding: calc(100vw / 24);
    top: calc(100vw / 8);
    left: calc(100vw / 8);
    background: rgba(0, 0, 0, 0.8);
    box-sizing: border-box;
    border: solid 2px black;
    z-index: 8; }
    .modal-wrapper .modal .modal__close {
      display: block;
      position: absolute;
      top: 0;
      right: 0;
      width: 48px;
      height: 48px;
      background-image: url("../images/cross.png");
      background-repeat: no-repeat;
      background-size: 16px auto;
      background-position: center;
      cursor: pointer; }
    .modal-wrapper .modal .modal__illustration {
      display: flex;
      position: relative;
      width: calc((4 * 100vw / 18) - (100vw / 24));
      margin-right: calc(100vw / 24);
      height: 100%;
      overflow: hidden;
      align-items: center;
      justify-content: center;
      float: left; }
      .modal-wrapper .modal .modal__illustration img {
        display: block;
        width: auto;
        height: 100%; }
        .modal-wrapper .modal .modal__illustration img.fullHeight {
          width: 100%;
          height: auto; }
    .modal-wrapper .modal .modal__informations {
      display: block;
      position: relative;
      width: calc((3.5 * 100vw / 12) + (100vw / 9) - 4px);
      height: 100%;
      float: left; }
      .modal-wrapper .modal .modal__informations .modal__header {
        display: block;
        position: relative;
        width: 100%;
        height: 36px;
        border-bottom: solid 2px white; }
        .modal-wrapper .modal .modal__informations .modal__header h3 {
          width: calc((100vw / 8) + (100vw / 9));
          font-size: 16px;
          margin: 0;
          padding: 0;
          float: left;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis; }
        .modal-wrapper .modal .modal__informations .modal__header .timer {
          width: calc(4 * 100vw / 36);
          float: right; }
      .modal-wrapper .modal .modal__informations .modal__content {
        height: calc(100% - 80px);
        overflow: auto; }
        .modal-wrapper .modal .modal__informations .modal__content h4 {
          margin: 0;
          padding: 0;
          padding-top: 14px;
          font-weight: 500;
          font-size: 14px; }
        .modal-wrapper .modal .modal__informations .modal__content p {
          margin: 0;
          padding: 0;
          font-weight: 200;
          font-size: 14px; }
          .modal-wrapper .modal .modal__informations .modal__content p .max {
            text-transform: uppercase;
            font-weight: 500; }
          .modal-wrapper .modal .modal__informations .modal__content p.synopsis {
            font-size: 18px; }
          .modal-wrapper .modal .modal__informations .modal__content p a {
            color: white;
            font-family: 'Oswald', sans-serif; }
        .modal-wrapper .modal .modal__informations .modal__content .count_data {
          display: block;
          position: relative;
          width: 100%;
          padding-top: 18px; }
          .modal-wrapper .modal .modal__informations .modal__content .count_data p {
            display: block;
            position: relative;
            width: 100%;
            clear: both;
            float: none; }
            .modal-wrapper .modal .modal__informations .modal__content .count_data p span:nth-child(1) {
              display: block;
              position: relative;
              width: 150px;
              float: left;
              font-weight: 400; }
            .modal-wrapper .modal .modal__informations .modal__content .count_data p span:nth-child(2) {
              display: block;
              position: relative;
              width: 50px;
              float: left; }
        .modal-wrapper .modal .modal__informations .modal__content .modal__description {
          display: block;
          position: relative;
          width: calc((100vw / 8) + (100vw / 9));
          padding-top: 12px;
          float: left; }
        .modal-wrapper .modal .modal__informations .modal__content .modal__credits {
          display: block;
          position: relative;
          width: calc(4 * 100vw / 36);
          float: right; }
      .modal-wrapper .modal .modal__informations .modal__mods {
        display: block;
        position: relative;
        width: calc(4 * 100vw / 36);
        clear: both;
        float: right;
        height: 42px; }
      .modal-wrapper .modal .modal__informations .modal__explore {
        display: block;
        position: relative;
        width: 100%;
        clear: both;
        float: left;
        height: 42px; }
        .modal-wrapper .modal .modal__informations .modal__explore a {
          display: block;
          position: relative;
          width: calc(4 * 100vw / 36);
          height: 100%;
          box-sizing: border-box;
          color: white;
          text-align: center;
          line-height: 38px;
          border: solid 2px white;
          text-decoration: none;
          float: right; }
    @media (min-width: 1500px) {
      .modal-wrapper .modal {
        width: calc(60% + 160px);
        height: calc(100% - 360px);
        padding: 80px;
        box-sizing: border-box;
        top: 180px;
        left: calc(20% - 80px); }
        .modal-wrapper .modal .modal__illustration {
          width: 400px;
          margin-right: 40px; }
        .modal-wrapper .modal .modal__informations {
          width: calc(100% - 440px); }
          .modal-wrapper .modal .modal__informations .modal__header {
            height: 60px;
            font-size: 24px; }
            .modal-wrapper .modal .modal__informations .modal__header h3 {
              width: calc(100% - 200px);
              font-size: 32px;
              font-weight: 400;
              float: left; }
            .modal-wrapper .modal .modal__informations .modal__header .timer {
              width: 140px;
              font-size: 32px;
              text-align: left;
              float: right; }
          .modal-wrapper .modal .modal__informations .modal__content {
            height: calc(100% - 80px); }
            .modal-wrapper .modal .modal__informations .modal__content h4 {
              padding-top: 48px;
              font-weight: 400;
              font-size: 21px; }
            .modal-wrapper .modal .modal__informations .modal__content p {
              font-size: 21px; }
              .modal-wrapper .modal .modal__informations .modal__content p .max {
                text-transform: uppercase;
                font-weight: 400; }
              .modal-wrapper .modal .modal__informations .modal__content p a {
                color: white;
                font-family: 'Oswald', sans-serif; }
            .modal-wrapper .modal .modal__informations .modal__content .count_data {
              display: block;
              position: relative;
              width: 100%;
              padding-top: 48px; }
              .modal-wrapper .modal .modal__informations .modal__content .count_data p span:nth-child(1) {
                display: block;
                position: relative;
                width: 240px;
                float: left;
                font-weight: 400; }
              .modal-wrapper .modal .modal__informations .modal__content .count_data p span:nth-child(2) {
                display: block;
                position: relative;
                width: 100px;
                float: left; }
            .modal-wrapper .modal .modal__informations .modal__content .modal__description {
              width: calc(100% - 240px); }
              .modal-wrapper .modal .modal__informations .modal__content .modal__description p.synopsis {
                font-size: 28px; }
            .modal-wrapper .modal .modal__informations .modal__content .modal__credits {
              width: 140px;
              padding-top: 0px; }
              .modal-wrapper .modal .modal__informations .modal__content .modal__credits h4 {
                padding-top: 24px; }
              .modal-wrapper .modal .modal__informations .modal__content .modal__credits div:first-child h4 {
                padding-top: 14px; }
          .modal-wrapper .modal .modal__informations .modal__explore a {
            width: 140px; } }
    .modal-wrapper .modal.modal--about .modal__informations {
      width: 100%; }
      .modal-wrapper .modal.modal--about .modal__informations .modal__content .modal__description {
        width: calc(100% - 240px); }
        .modal-wrapper .modal.modal--about .modal__informations .modal__content .modal__description p {
          padding-bottom: 12px; }
      .modal-wrapper .modal.modal--about .modal__informations .modal__content .modal__credits {
        width: 180px;
        padding-top: 12px; }
        .modal-wrapper .modal.modal--about .modal__informations .modal__content .modal__credits .project__definition {
          font-weight: 500; }
    @media (min-width: 1500px) {
      .modal-wrapper .modal.modal--about .modal__header {
        border-bottom: solid 1px white;
        margin-bottom: 24px; }
      .modal-wrapper .modal.modal--about .modal__informations {
        width: 100%; }
        .modal-wrapper .modal.modal--about .modal__informations .modal__content p {
          font-size: 21px; }
          .modal-wrapper .modal.modal--about .modal__informations .modal__content p a {
            color: white;
            font-family: 'Oswald', sans-serif; }
        .modal-wrapper .modal.modal--about .modal__informations .modal__content p.synopsis {
          font-size: 21px;
          padding-bottom: 0px; }
        .modal-wrapper .modal.modal--about .modal__informations .modal__content h4 {
          padding-top: 32px;
          font-size: 32px;
          font-weight: 200; }
          .modal-wrapper .modal.modal--about .modal__informations .modal__content h4.stay-connected {
            padding-top: 60px;
            font-size: 21px; }
        .modal-wrapper .modal.modal--about .modal__informations .modal__content .modal__description {
          width: calc(100% - 340px); }
        .modal-wrapper .modal.modal--about .modal__informations .modal__content .modal__credits {
          width: 240px;
          padding-top: 12px; }
          .modal-wrapper .modal.modal--about .modal__informations .modal__content .modal__credits .project__definition {
            font-weight: 200; }
          .modal-wrapper .modal.modal--about .modal__informations .modal__content .modal__credits p, .modal-wrapper .modal.modal--about .modal__informations .modal__content .modal__credits h4 {
            padding: 0;
            font-size: 21px;
            font-weight: 200; }
          .modal-wrapper .modal.modal--about .modal__informations .modal__content .modal__credits h4 {
            font-weight: 400; }
          .modal-wrapper .modal.modal--about .modal__informations .modal__content .modal__credits p {
            padding-bottom: 24px; }
      .modal-wrapper .modal.modal--about .modal__informations {
        width: 100%; }
        .modal-wrapper .modal.modal--about .modal__informations .modal__content .modal__description {
          width: calc(100% - 160px); } }
  .modal-wrapper .modal-return {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    background: white;
    z-index: 7; }

.modal-wrapper.modal-open {
  opacity: 1;
  visibility: visible; }

.controls {
  display: block;
  position: fixed;
  width: 100%;
  height: 120px;
  padding: 0;
  padding-left: 80px;
  margin: 0;
  box-sizing: border-box;
  bottom: 0;
  right: 0;
  z-index: 9;
  background: black;
  opacity: 0;
  visibility: hidden; }
  .controls .controls__cursor {
    display: block;
    position: absolute;
    width: 1px;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 11;
    background: white; }
    .controls .controls__cursor:after {
      content: "";
      disaplay: block;
      position: absolute;
      top: 20px;
      left: -12px;
      width: 24px;
      height: 80px;
      border: solid 2px #cccccc;
      background: rgba(0, 0, 0, 0.5);
      box-sizing: border-box;
      cursor: move;
      cursor: grab;
      cursor: -moz-grab;
      cursor: -webkit-grab; }
    .controls .controls__cursor .cursor__time {
      display: block;
      position: relative;
      width: 80px;
      height: 20px;
      margin: 0;
      margin-left: 0px;
      top: -2px;
      padding: 0; }
      .controls .controls__cursor .cursor__time .hours, .controls .controls__cursor .cursor__time .minutes, .controls .controls__cursor .cursor__time .seconds {
        display: flex;
        position: relative;
        width: calc(100% /3);
        height: 100%;
        float: left;
        align-items: center;
        justify-content: center;
        font-weight: 200; }
      .controls .controls__cursor .cursor__time .hours:after, .controls .controls__cursor .cursor__time .minutes:after {
        display: block;
        position: absolute;
        content: ":";
        height: 20px;
        line-height: 20px;
        right: -2px; }
  .controls .controls__timelines {
    display: block;
    position: relative;
    width: calc(100% - 160px);
    height: 100%;
    margin: 0;
    padding: 24px 0;
    box-sizing: border-box;
    float: left; }
    .controls .controls__timelines .timeline {
      display: block;
      position: relative;
      width: 100%;
      height: 18px;
      margin: 5px 0px;
      background: #282828; }
      .controls .controls__timelines .timeline .time {
        display: block;
        position: absolute;
        width: 2px;
        height: 100%;
        background: #cccccc;
        left: 0;
        top: 0;
        cursor: pointer; }
        .controls .controls__timelines .timeline .time:hover {
          background: white; }
      .controls .controls__timelines .timeline.timeline--sequences .time {
        width: 4px; }
        .controls .controls__timelines .timeline.timeline--sequences .time.small {
          width: 2px; }
        .controls .controls__timelines .timeline.timeline--sequences .time.big {
          width: 8px; }
      .controls .controls__timelines .timeline.active {
        background: #676767; }
  .controls .controls__mods {
    display: block;
    position: relative;
    width: 160px;
    height: 100%;
    float: right;
    top: -24px;
    padding: 24px 32px;
    box-sizing: border-box; }
    .controls .controls__mods .mod {
      display: block;
      position: relative;
      width: 100%;
      height: 24px;
      margin: 0px;
      line-height: 24px;
      font-size: 16px;
      color: white;
      text-decoration: none;
      font-weight: 300;
      transition: .3s; }
      .controls .controls__mods .mod:before {
        content: "";
        display: block;
        position: absolute;
        width: 8px;
        top: 8px;
        left: -20px;
        height: 8px;
        background: #676767;
        transition: .3s; }
      .controls .controls__mods .mod.mod__active {
        font-weight: 400; }
        .controls .controls__mods .mod.mod__active:before {
          width: 10px;
          top: 7px;
          left: -21px;
          height: 10px;
          background: white; }
      .controls .controls__mods .mod:hover {
        cursor: pointer; }
        .controls .controls__mods .mod:hover:before {
          width: 10px;
          top: 7px;
          left: -21px;
          height: 10px;
          background: white; }

.start .controls {
  transition: .3s;
  opacity: 1;
  visibility: visible; }

body.dragging .controls .controls__cursor:after {
  cursor: grabbing !important;
  cursor: -moz-grabbing !important;
  cursor: -webkit-grabbing !important; }

/*
.grid{
	display:block;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:1;

	.box{
		display: block;
		position: relative;
		width: calc(100vw / 12);
		height: calc(100vw / 12);
		border: solid 1px red;
		box-sizing:border-box;
		float:left;
	}
}*/