@font-face {
  font-family: "SanaMedium";
  src: url("../fonts/SanaSansAlt-Medium.eot");
  src: url("../fonts/SanaSansAlt-Medium.woff") format("woff"),
    url("../fonts/SanaSansAlt-Medium.woff2") format("woff2"),
    url("../fonts/SanaSansAlt-Medium.otf") format("opentype");
}

@font-face {
  font-family: "SanaBlack";
  src: url("../fonts/SanaSansAlt-Black.eot");
  src: url("../fonts/SanaSansAlt-Black.woff") format("woff"),
    url("../fonts/SanaSansAlt-Black.woff2") format("woff2"),
    url("../fonts/SanaSansAlt-Black.otf") format("opentype");
}

.container {
  width: 1040px;
  height: 1880px;
  border: 3px solid red;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#lottie {
  background-color: #ffffff;
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
  text-align: center;
  opacity: 1;
  justify-content: center;
  align-items: center;
}

#lottie svg {
  width: 1080px !important;
  height: 1040px !important;
  position: fixed;
  top: 80px;
}

.jours {
  font-size: 70px;
  font-family: 'SanaBlack', sans-serif;
}

.element-animation {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  top: 1120px;
  font-family: 'SanaMedium', sans-serif;
  font-size: 60px;
  color: #000000;
  text-align: center;
  line-height: 100px;
  width: 1080px;
  animation: animationFrames ease-in 8s;
  animation-iteration-count: infinite;
  transform-origin: 50% 50%;
  -webkit-animation: animationFrames ease-in 8s;
  -webkit-animation-iteration-count: infinite;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: animationFrames ease-in 8s;
  -moz-animation-iteration-count: infinite;
  -moz-transform-origin: 50% 50%;
  -o-animation: animationFrames ease-in 8s;
  -o-animation-iteration-count: infinite;
  -o-transform-origin: 50% 50%;
  -ms-animation: animationFrames ease-in 8s;
  -ms-animation-iteration-count: infinite;
  -ms-transform-origin: 50% 50%;
}

.element-animation2 {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  top: 1420px;
  font-family: 'SanaMedium', sans-serif;
  font-size: 60px;
  color: #000000;
  text-align: center;
  line-height: 100px;
  width: 1080px;
  animation: animationFrames2 ease-in 8s;
  animation-iteration-count: infinite;
  transform-origin: 50% 50%;
  -webkit-animation: animationFrames2 ease-in 8s;
  -webkit-animation-iteration-count: infinite;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: animationFrames2 ease-in 8s;
  -moz-animation-iteration-count: infinite;
  -moz-transform-origin: 50% 50%;
  -o-animation: animationFrames2 ease-in 8s;
  -o-animation-iteration-count: infinite;
  -o-transform-origin: 50% 50%;
  -ms-animation: animationFrames2 ease-in 8s;
  -ms-animation-iteration-count: infinite;
  -ms-transform-origin: 50% 50%;
}

@keyframes animationFrames {
  0% {
    opacity: 0;
  }

  20% {
    opacity: 0;
  }

  30% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  92% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@-moz-keyframes animationFrames {
  0% {
    opacity: 0;
  }

  20% {
    opacity: 0;
  }

  30% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  92% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@-webkit-keyframes animationFrames {
  0% {
    opacity: 0;
  }

  20% {
    opacity: 0;
  }

  30% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  92% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@-o-keyframes animationFrames {
  0% {
    opacity: 0;
  }

  20% {
    opacity: 0;
  }

  30% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  92% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@-ms-keyframes animationFrames {
  0% {
    opacity: 0;
  }

  20% {
    opacity: 0;
  }

  30% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  92% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@keyframes animationFrames2 {
  0% {
    opacity: 0;
  }

  20% {
    opacity: 0;
  }

  30% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  92% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@-moz-keyframes animationFrames2 {
  0% {
    opacity: 0;
  }

  20% {
    opacity: 0;
  }

  30% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  92% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@-webkit-keyframes animationFrames2 {
  0% {
    opacity: 0;
  }

  20% {
    opacity: 0;
  }

  30% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  92% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@-o-keyframes animationFrames2 {
  0% {
    opacity: 0;
  }

  20% {
    opacity: 0;
  }

  30% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  92% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@-ms-keyframes animationFrames2 {
  0% {
    opacity: 0;
  }

  20% {
    opacity: 0;
  }

  30% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  92% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}