* {
  margin: 0;
  padding: 0; }

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -ms-scroll-chaining: none;
      overscroll-behavior: none;
  height: 100vh;
  background-color: #fff;
  overflow: hidden;
  font-family: 'Poppins', sans-serif; }
  body.grab {
    cursor: -webkit-grab !important;
    cursor: grab !important; }
  body.auto {
    cursor: auto !important; }

#preloader {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  inset: 0;
  z-index: 99;
  background-color: #0e0e1e; }

#percentage {
  position: fixed;
  left: 40px;
  bottom: 40px;
  font-size: 30px;
  color: #fff; }

#loader {
  display: block;
  position: relative;
  color: #fff;
  font-size: 4rem;
  font-weight: 800;
  overflow: hidden;
  height: 90px;
  width: 151px; }
  #loader .loader__year {
    width: 151px; }
    #loader .loader__year span {
      height: 58px;
      line-height: 1; }
    #loader .loader__year > span {
      display: flex;
      position: relative;
      align-items: center;
      overflow: hidden;
      width: 0; }
    #loader .loader__year .year__end--3 {
      position: absolute;
      right: 0;
      bottom: 0;
      transform: translateY(150px); }

#voeux {
  display: block;
  position: absolute;
  left: 50%;
  top: 50px;
  font-weight: 300;
  font-size: 20px;
  opacity: 0;
  width: 500px;
  max-width: 95%;
  text-align: center;
  transform: translateX(-50%);
  color: #fff;
  transition: opacity 2s ease; }

#helper {
  display: block;
  position: absolute;
  left: 50%;
  bottom: 50px;
  font-weight: 300;
  font-size: 14px;
  opacity: 0;
  width: 500px;
  max-width: 95%;
  text-align: center;
  transform: translate(-50%, 20px);
  color: #fff;
  transition: opacity .6s ease, transform .6s ease; }
  #helper.is-in {
    opacity: 1;
    transform: translate(-50%, 0); }
  #helper::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-70%, -170%) scale(0.5);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid white;
    -webkit-animation: circles 4s ease infinite;
            animation: circles 4s ease infinite; }
  #helper::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -140%);
    width: 20px;
    height: 20px;
    background-image: url(../img/cursor.svg);
    background-size: contain;
    background-repeat: no-repeat; }
    @media (max-width: 991px) {
      #helper::before {
        background-image: url(../img/finger.svg); } }

@-webkit-keyframes circles {
  0% {
    transform: translate(-70%, -170%) scale(0);
    opacity: 1; }
  50% {
    transform: translate(-70%, -170%) scale(1.5);
    opacity: 0; }
  100% {
    transform: translate(-70%, -170%) scale(1.5);
    opacity: 0; } }

@keyframes circles {
  0% {
    transform: translate(-70%, -170%) scale(0);
    opacity: 1; }
  50% {
    transform: translate(-70%, -170%) scale(1.5);
    opacity: 0; }
  100% {
    transform: translate(-70%, -170%) scale(1.5);
    opacity: 0; } }