.index_page{
    display: grid;
    justify-content: center;
    align-items: center;
    height: 60vh;
    width: 100vw;
    margin: 0;
    padding: 0;
    background: #222;
    top: 60px;
}
.index_page .anim.container {
    position: relative;
    height: 100px;
    width: 86px;
    transform: scale(0.5);
}
.index_page .anim .cube {
    position: absolute;
    width: 86px;
    height: 100px;
}
.index_page .anim .right {
    background: var(--color-base1);
    transform: rotate(-30deg) skewX(-30deg) translate(95px, 84px) scaleY(0.86);
}
.index_page .anim .left {
    background: var(--color-base2);
    transform: rotate(90deg) skewX(-30deg) translate(0px, -84px) scaleY(0.86);
}
.index_page .anim .top {
    background: var(--mess-talk-other-fr);
    transform: rotate(210deg) skew(-30deg) translate(-75px, -18px) scaleY(0.86);
    z-index: 2;
}

@media (min-width:840px){
    .index_page .anim .right {
        background: var(--color-base1);
        transform: rotate(-30deg) skewX(-30deg) translate(44px, 62px) scaleY(0.86);
    }
}

.index_page .anim .face {
    height: 50px;
    width: 50px;
    position: absolute;
    transform-origin: 0 0;
}
.index_page .anim .h1.w1.l1 {
    z-index: -1;
    animation-name: h1w1l1;
    animation-timing-function: ease;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}
@keyframes h1w1l1 {
    0% {
        transform: translate(0%, -100%);
   }
    14% {
        transform: translate(-50%, -125%);
   }
    28% {
        transform: translate(0%, -150%);
   }
    43% {
        transform: translate(0%, -200%);
   }
    57% {
        transform: translate(50%, -175%);
   }
    71% {
        transform: translate(0%, -150%);
   }
    85% {
        transform: translate(0%, -100%);
   }
    100% {
        transform: translate(0%, -100%);
   }
}
.index_page .anim .h1.w1.l2 {
    z-index: -1;
    animation-name: h1w1l2;
    animation-timing-function: ease;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}
@keyframes h1w1l2 {
    0% {
        transform: translate(50%, -75%);
   }
    14% {
        transform: translate(50%, -75%);
   }
    28% {
        transform: translate(100%, -100%);
   }
    43% {
        transform: translate(100%, -150%);
   }
    57% {
        transform: translate(100%, -150%);
   }
    71% {
        transform: translate(50%, -125%);
   }
    85% {
        transform: translate(50%, -75%);
   }
    100% {
        transform: translate(50%, -75%);
   }
}
.index_page .anim .h1.w1.l3 {
    z-index: -1;
    animation-name: h1w1l3;
    animation-timing-function: ease;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}
@keyframes h1w1l3 {
    0% {
        transform: translate(100%, -50%);
   }
    14% {
        transform: translate(150%, -25%);
   }
    28% {
        transform: translate(200%, -50%);
   }
    43% {
        transform: translate(200%, -100%);
   }
    57% {
        transform: translate(150%, -125%);
   }
    71% {
        transform: translate(100%, -100%);
   }
    85% {
        transform: translate(100%, -50%);
   }
    100% {
        transform: translate(100%, -50%);
   }
}
.index_page .anim .h1.w2.l1 {
    z-index: -1;
    animation-name: h1w2l1;
    animation-timing-function: ease;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}
@keyframes h1w2l1 {
    0% {
        transform: translate(-50%, -75%);
   }
    14% {
        transform: translate(-100%, -100%);
   }
    28% {
        transform: translate(-100%, -100%);
   }
    43% {
        transform: translate(-100%, -150%);
   }
    57% {
        transform: translate(-50%, -125%);
   }
    71% {
        transform: translate(-50%, -125%);
   }
    85% {
        transform: translate(-50%, -75%);
   }
    100% {
        transform: translate(-50%, -75%);
   }
}
.index_page .anim .h1.w2.l2 {
    z-index: -1;
    animation-name: h1w2l2;
    animation-timing-function: ease;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}
@keyframes h1w2l2 {
    0% {
        transform: translate(0%, -50%);
   }
    14% {
        transform: translate(0%, -50%);
   }
    28% {
        transform: translate(0%, -50%);
   }
    43% {
        transform: translate(0%, -100%);
   }
    57% {
        transform: translate(0%, -100%);
   }
    71% {
        transform: translate(0%, -100%);
   }
    85% {
        transform: translate(0%, -50%);
   }
    100% {
        transform: translate(0%, -50%);
   }
}
.index_page .anim .h1.w2.l3 {
    z-index: -1;
    animation-name: h1w2l3;
    animation-timing-function: ease;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}
@keyframes h1w2l3 {
    0% {
        transform: translate(50%, -25%);
   }
    14% {
        transform: translate(100%, 0%);
   }
    28% {
        transform: translate(100%, 0%);
   }
    43% {
        transform: translate(100%, -50%);
   }
    57% {
        transform: translate(50%, -75%);
   }
    71% {
        transform: translate(50%, -75%);
   }
    85% {
        transform: translate(50%, -25%);
   }
    100% {
        transform: translate(50%, -25%);
   }
}
.index_page .anim .h1.w3.l1 {
    z-index: -1;
    animation-name: h1w3l1;
    animation-timing-function: ease;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}
@keyframes h1w3l1 {
    0% {
        transform: translate(-100%, -50%);
   }
    14% {
        transform: translate(-150%, -75%);
   }
    28% {
        transform: translate(-200%, -50%);
   }
    43% {
        transform: translate(-200%, -100%);
   }
    57% {
        transform: translate(-150%, -75%);
   }
    71% {
        transform: translate(-100%, -100%);
   }
    85% {
        transform: translate(-100%, -50%);
   }
    100% {
        transform: translate(-100%, -50%);
   }
}
.index_page .anim .h1.w3.l2 {
    z-index: -1;
    animation-name: h1w3l2;
    animation-timing-function: ease;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}
@keyframes h1w3l2 {
    0% {
        transform: translate(-50%, -25%);
   }
    14% {
        transform: translate(-50%, -25%);
   }
    28% {
        transform: translate(-100%, 0%);
   }
    43% {
        transform: translate(-100%, -50%);
   }
    57% {
        transform: translate(-100%, -50%);
   }
    71% {
        transform: translate(-50%, -75%);
   }
    85% {
        transform: translate(-50%, -25%);
   }
    100% {
        transform: translate(-50%, -25%);
   }
}
.index_page .anim .h1.w3.l3 {
    z-index: -1;
    animation-name: h1w3l3;
    animation-timing-function: ease;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}
@keyframes h1w3l3 {
    0% {
        transform: translate(0%, 0%);
   }
    14% {
        transform: translate(50%, 25%);
   }
    28% {
        transform: translate(0%, 50%);
   }
    43% {
        transform: translate(0%, 0%);
   }
    57% {
        transform: translate(-50%, -25%);
   }
    71% {
        transform: translate(0%, -50%);
   }
    85% {
        transform: translate(0%, 0%);
   }
    100% {
        transform: translate(0%, 0%);
   }
}
.index_page .anim .h2.w1.l1 {
    z-index: -2;
    animation-name: h2w1l1;
    animation-timing-function: ease;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}
@keyframes h2w1l1 {
    0% {
        transform: translate(0%, -50%);
   }
    14% {
        transform: translate(-50%, -75%);
   }
    28% {
        transform: translate(0%, -100%);
   }
    43% {
        transform: translate(0%, -100%);
   }
    57% {
        transform: translate(50%, -75%);
   }
    71% {
        transform: translate(0%, -50%);
   }
    85% {
        transform: translate(0%, -50%);
   }
    100% {
        transform: translate(0%, -50%);
   }
}
.index_page .anim .h2.w1.l2 {
    z-index: -2;
    animation-name: h2w1l2;
    animation-timing-function: ease;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}
@keyframes h2w1l2 {
    0% {
        transform: translate(50%, -25%);
   }
    14% {
        transform: translate(50%, -25%);
   }
    28% {
        transform: translate(100%, -50%);
   }
    43% {
        transform: translate(100%, -50%);
   }
    57% {
        transform: translate(100%, -50%);
   }
    71% {
        transform: translate(50%, -25%);
   }
    85% {
        transform: translate(50%, -25%);
   }
    100% {
        transform: translate(50%, -25%);
   }
}
.index_page .anim .h2.w1.l3 {
    z-index: -2;
    animation-name: h2w1l3;
    animation-timing-function: ease;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}
@keyframes h2w1l3 {
    0% {
        transform: translate(100%, 0%);
   }
    14% {
        transform: translate(150%, 25%);
   }
    28% {
        transform: translate(200%, 0%);
   }
    43% {
        transform: translate(200%, 0%);
   }
    57% {
        transform: translate(150%, -25%);
   }
    71% {
        transform: translate(100%, 0%);
   }
    85% {
        transform: translate(100%, 0%);
   }
    100% {
        transform: translate(100%, 0%);
   }
}
.index_page .anim .h2.w2.l1 {
    z-index: -2;
    animation-name: h2w2l1;
    animation-timing-function: ease;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}
@keyframes h2w2l1 {
    0% {
        transform: translate(-50%, -25%);
   }
    14% {
        transform: translate(-100%, -50%);
   }
    28% {
        transform: translate(-100%, -50%);
   }
    43% {
        transform: translate(-100%, -50%);
   }
    57% {
        transform: translate(-50%, -25%);
   }
    71% {
        transform: translate(-50%, -25%);
   }
    85% {
        transform: translate(-50%, -25%);
   }
    100% {
        transform: translate(-50%, -25%);
   }
}
.index_page .anim .h2.w2.l2 {
    z-index: -2;
    animation-name: h2w2l2;
    animation-timing-function: ease;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}
@keyframes h2w2l2 {
    0% {
        transform: translate(0%, 0%);
   }
    14% {
        transform: translate(0%, 0%);
   }
    28% {
        transform: translate(0%, 0%);
   }
    43% {
        transform: translate(0%, 0%);
   }
    57% {
        transform: translate(0%, 0%);
   }
    71% {
        transform: translate(0%, 0%);
   }
    85% {
        transform: translate(0%, 0%);
   }
    100% {
        transform: translate(0%, 0%);
   }
}
.index_page .anim .h2.w2.l3 {
    z-index: -2;
    animation-name: h2w2l3;
    animation-timing-function: ease;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}
@keyframes h2w2l3 {
    0% {
        transform: translate(50%, 25%);
   }
    14% {
        transform: translate(100%, 50%);
   }
    28% {
        transform: translate(100%, 50%);
   }
    43% {
        transform: translate(100%, 50%);
   }
    57% {
        transform: translate(50%, 25%);
   }
    71% {
        transform: translate(50%, 25%);
   }
    85% {
        transform: translate(50%, 25%);
   }
    100% {
        transform: translate(50%, 25%);
   }
}
.index_page .anim .h2.w3.l1 {
    z-index: -2;
    animation-name: h2w3l1;
    animation-timing-function: ease;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}
@keyframes h2w3l1 {
    0% {
        transform: translate(-100%, 0%);
   }
    14% {
        transform: translate(-150%, -25%);
   }
    28% {
        transform: translate(-200%, 0%);
   }
    43% {
        transform: translate(-200%, 0%);
   }
    57% {
        transform: translate(-150%, 25%);
   }
    71% {
        transform: translate(-100%, 0%);
   }
    85% {
        transform: translate(-100%, 0%);
   }
    100% {
        transform: translate(-100%, 0%);
   }
}
.index_page .anim .h2.w3.l2 {
    z-index: -2;
    animation-name: h2w3l2;
    animation-timing-function: ease;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}
@keyframes h2w3l2 {
    0% {
        transform: translate(-50%, 25%);
   }
    14% {
        transform: translate(-50%, 25%);
   }
    28% {
        transform: translate(-100%, 50%);
   }
    43% {
        transform: translate(-100%, 50%);
   }
    57% {
        transform: translate(-100%, 50%);
   }
    71% {
        transform: translate(-50%, 25%);
   }
    85% {
        transform: translate(-50%, 25%);
   }
    100% {
        transform: translate(-50%, 25%);
   }
}
.index_page .anim .h2.w3.l3 {
    z-index: -2;
    animation-name: h2w3l3;
    animation-timing-function: ease;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}
@keyframes h2w3l3 {
    0% {
        transform: translate(0%, 50%);
   }
    14% {
        transform: translate(50%, 75%);
   }
    28% {
        transform: translate(0%, 100%);
   }
    43% {
        transform: translate(0%, 100%);
   }
    57% {
        transform: translate(-50%, 75%);
   }
    71% {
        transform: translate(0%, 50%);
   }
    85% {
        transform: translate(0%, 50%);
   }
    100% {
        transform: translate(0%, 50%);
   }
}
.index_page .anim .h3.w1.l1 {
    z-index: -3;
    animation-name: h3w1l1;
    animation-timing-function: ease;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}
@keyframes h3w1l1 {
    0% {
        transform: translate(0%, 0%);
   }
    14% {
        transform: translate(-50%, -25%);
   }
    28% {
        transform: translate(0%, -50%);
   }
    43% {
        transform: translate(0%, 0%);
   }
    57% {
        transform: translate(50%, 25%);
   }
    71% {
        transform: translate(0%, 50%);
   }
    85% {
        transform: translate(0%, 0%);
   }
    100% {
        transform: translate(0%, 0%);
   }
}
.index_page .anim .h3.w1.l2 {
    z-index: -3;
    animation-name: h3w1l2;
    animation-timing-function: ease;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}
@keyframes h3w1l2 {
    0% {
        transform: translate(50%, 25%);
   }
    14% {
        transform: translate(50%, 25%);
   }
    28% {
        transform: translate(100%, 0%);
   }
    43% {
        transform: translate(100%, 50%);
   }
    57% {
        transform: translate(100%, 50%);
   }
    71% {
        transform: translate(50%, 75%);
   }
    85% {
        transform: translate(50%, 25%);
   }
    100% {
        transform: translate(50%, 25%);
   }
}
.index_page .anim .h3.w1.l3 {
    z-index: -3;
    animation-name: h3w1l3;
    animation-timing-function: ease;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}
@keyframes h3w1l3 {
    0% {
        transform: translate(100%, 50%);
   }
    14% {
        transform: translate(150%, 75%);
   }
    28% {
        transform: translate(200%, 50%);
   }
    43% {
        transform: translate(200%, 100%);
   }
    57% {
        transform: translate(150%, 75%);
   }
    71% {
        transform: translate(100%, 100%);
   }
    85% {
        transform: translate(100%, 50%);
   }
    100% {
        transform: translate(100%, 50%);
   }
}
.index_page .anim .h3.w2.l1 {
    z-index: -3;
    animation-name: h3w2l1;
    animation-timing-function: ease;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}
@keyframes h3w2l1 {
    0% {
        transform: translate(-50%, 25%);
   }
    14% {
        transform: translate(-100%, 0%);
   }
    28% {
        transform: translate(-100%, 0%);
   }
    43% {
        transform: translate(-100%, 50%);
   }
    57% {
        transform: translate(-50%, 75%);
   }
    71% {
        transform: translate(-50%, 75%);
   }
    85% {
        transform: translate(-50%, 25%);
   }
    100% {
        transform: translate(-50%, 25%);
   }
}
.index_page .anim .h3.w2.l2 {
    z-index: -3;
    animation-name: h3w2l2;
    animation-timing-function: ease;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}
@keyframes h3w2l2 {
    0% {
        transform: translate(0%, 50%);
   }
    14% {
        transform: translate(0%, 50%);
   }
    28% {
        transform: translate(0%, 50%);
   }
    43% {
        transform: translate(0%, 100%);
   }
    57% {
        transform: translate(0%, 100%);
   }
    71% {
        transform: translate(0%, 100%);
   }
    85% {
        transform: translate(0%, 50%);
   }
    100% {
        transform: translate(0%, 50%);
   }
}
.index_page .anim .h3.w2.l3 {
    z-index: -3;
    animation-name: h3w2l3;
    animation-timing-function: ease;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}
@keyframes h3w2l3 {
    0% {
        transform: translate(50%, 75%);
   }
    14% {
        transform: translate(100%, 100%);
   }
    28% {
        transform: translate(100%, 100%);
   }
    43% {
        transform: translate(100%, 150%);
   }
    57% {
        transform: translate(50%, 125%);
   }
    71% {
        transform: translate(50%, 125%);
   }
    85% {
        transform: translate(50%, 75%);
   }
    100% {
        transform: translate(50%, 75%);
   }
}
.index_page .anim .h3.w3.l1 {
    z-index: -3;
    animation-name: h3w3l1;
    animation-timing-function: ease;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}
@keyframes h3w3l1 {
    0% {
        transform: translate(-100%, 50%);
   }
    14% {
        transform: translate(-150%, 25%);
   }
    28% {
        transform: translate(-200%, 50%);
   }
    43% {
        transform: translate(-200%, 100%);
   }
    57% {
        transform: translate(-150%, 125%);
   }
    71% {
        transform: translate(-100%, 100%);
   }
    85% {
        transform: translate(-100%, 50%);
   }
    100% {
        transform: translate(-100%, 50%);
   }
}
.index_page .anim .h3.w3.l2 {
    z-index: -3;
    animation-name: h3w3l2;
    animation-timing-function: ease;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}
@keyframes h3w3l2 {
    0% {
        transform: translate(-50%, 75%);
   }
    14% {
        transform: translate(-50%, 75%);
   }
    28% {
        transform: translate(-100%, 100%);
   }
    43% {
        transform: translate(-100%, 150%);
   }
    57% {
        transform: translate(-100%, 150%);
   }
    71% {
        transform: translate(-50%, 125%);
   }
    85% {
        transform: translate(-50%, 75%);
   }
    100% {
        transform: translate(-50%, 75%);
   }
}
.index_page .anim .h3.w3.l3 {
    z-index: -3;
    animation-name: h3w3l3;
    animation-timing-function: ease;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}
@keyframes h3w3l3 {
    0% {
        transform: translate(0%, 100%);
   }
    14% {
        transform: translate(50%, 125%);
   }
    28% {
        transform: translate(0%, 150%);
   }
    43% {
        transform: translate(0%, 200%);
   }
    57% {
        transform: translate(-50%, 175%);
   }
    71% {
        transform: translate(0%, 150%);
   }
    85% {
        transform: translate(0%, 100%);
   }
    100% {
        transform: translate(0%, 100%);
   }
}

/* loading text */
#load {
    /*position: absolute; */
    width: 600px;
    height: 36px;
    /* left: 50%; */
    /* top: 75%; */
    margin-left: -300px;
    overflow: visible;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
  }
  
  #load div {
    position:absolute;
    width:20px;
    height:36px;
    opacity:0;
    font-family:Helvetica, Arial, sans-serif;
    animation:move 2s linear infinite;
    -o-animation:move 2s linear infinite;
    -moz-animation:move 2s linear infinite;
    -webkit-animation:move 2s linear infinite;
    transform:rotate(180deg);
    -o-transform:rotate(180deg);
    -moz-transform:rotate(180deg);
    -webkit-transform:rotate(180deg);
    color:var(--color-base1);
    font-size: 20px;
    font-weight: bolder;
  }
  
  #load div:nth-child(2) {
    animation-delay:0.2s;
    -o-animation-delay:0.2s;
    -moz-animation-delay:0.2s;
    -webkit-animation-delay:0.2s;
  }
  #load div:nth-child(3) {
    animation-delay:0.4s;
    -o-animation-delay:0.4s;
    -webkit-animation-delay:0.4s;
    -webkit-animation-delay:0.4s;
  }
  #load div:nth-child(4) {
    animation-delay:0.6s;
    -o-animation-delay:0.6s;
    -moz-animation-delay:0.6s;
    -webkit-animation-delay:0.6s;
  }
  #load div:nth-child(5) {
    animation-delay:0.8s;
    -o-animation-delay:0.8s;
    -moz-animation-delay:0.8s;
    -webkit-animation-delay:0.8s;
  }
  #load div:nth-child(6) {
    animation-delay:1s;
    -o-animation-delay:1s;
    -moz-animation-delay:1s;
    -webkit-animation-delay:1s;
  }
  #load div:nth-child(7) {
    animation-delay:1.2s;
    -o-animation-delay:1.2s;
    -moz-animation-delay:1.2s;
    -webkit-animation-delay:1.2s;
  }
  
  @keyframes move {
    0% {
      left:0;
      opacity:0;
    }
    35% {
      left: 41%; 
      -moz-transform:rotate(0deg);
      -webkit-transform:rotate(0deg);
      -o-transform:rotate(0deg);
      transform:rotate(0deg);
      opacity:1;
    }
    65% {
      left:59%; 
      -moz-transform:rotate(0deg); 
      -webkit-transform:rotate(0deg); 
      -o-transform:rotate(0deg);
      transform:rotate(0deg); 
      opacity:1;
    }
    100% {
      left:100%; 
      -moz-transform:rotate(-180deg); 
      -webkit-transform:rotate(-180deg); 
      -o-transform:rotate(-180deg); 
      transform:rotate(-180deg);
      opacity:0;
    }
  }
  
  @-moz-keyframes move {
    0% {
      left:0; 
      opacity:0;
    }
    35% {
      left:41%; 
      -moz-transform:rotate(0deg); 
      transform:rotate(0deg);
      opacity:1;
    }
    65% {
      left:59%; 
      -moz-transform:rotate(0deg); 
      transform:rotate(0deg);
      opacity:1;
    }
    100% {
      left:100%; 
      -moz-transform:rotate(-180deg); 
      transform:rotate(-180deg);
      opacity:0;
    }
  }
  
  @-webkit-keyframes move {
    0% {
      left:0; 
      opacity:0;
    }
    35% {
      left:41%; 
      -webkit-transform:rotate(0deg); 
      transform:rotate(0deg); 
      opacity:1;
    }
    65% {
      left:59%; 
      -webkit-transform:rotate(0deg); 
      transform:rotate(0deg); 
      opacity:1;
    }
    100% {
      left:100%;
      -webkit-transform:rotate(-180deg); 
      transform:rotate(-180deg); 
      opacity:0;
    }
  }
  
  @-o-keyframes move {
    0% {
      left:0; 
      opacity:0;
    }
    35% {
      left:41%; 
      -o-transform:rotate(0deg); 
      transform:rotate(0deg); 
      opacity:1;
    }
    65% {
      left:59%; 
      -o-transform:rotate(0deg); 
      transform:rotate(0deg); 
      opacity:1;
    }
    100% {
      left:100%; 
      -o-transform:rotate(-180deg); 
      transform:rotate(-180deg); 
      opacity:0;
    }
  }