@keyframes anim-1 {
  0% {
    clip: rect(324px, 836px, 127px, 0);
  }
  6.66667% {
    clip: rect(220px, 836px, 212px, 0);
  }
  13.33333% {
    clip: rect(228px, 836px, 253px, 0);
  }
  20% {
    clip: rect(90px, 836px, 186px, 0);
  }
  26.66667% {
    clip: rect(232px, 836px, 379px, 0);
  }
  33.33333% {
    clip: rect(41px, 836px, 183px, 0);
  }
  40% {
    clip: rect(155px, 836px, 136px, 0);
  }
  46.66667% {
    clip: rect(81px, 836px, 307px, 0);
  }
  53.33333% {
    clip: rect(2px, 836px, 117px, 0);
  }
  60% {
    clip: rect(80px, 836px, 66px, 0);
  }
  66.66667% {
    clip: rect(358px, 836px, 155px, 0);
  }
  73.33333% {
    clip: rect(172px, 836px, 66px, 0);
  }
  80% {
    clip: rect(194px, 836px, 26px, 0);
  }
  86.66667% {
    clip: rect(356px, 836px, 254px, 0);
  }
  93.33333% {
    clip: rect(85px, 836px, 193px, 0);
  }
  100% {
    clip: rect(316px, 836px, 255px, 0);
  }
}

@keyframes anim-2 {
  0% {
    clip: rect(379px, 836px, 355px, 0);
  }
  6.66667% {
    clip: rect(29px, 836px, 149px, 0);
  }
  13.33333% {
    clip: rect(243px, 836px, 32px, 0);
  }
  20% {
    clip: rect(234px, 836px, 37px, 0);
  }
  26.66667% {
    clip: rect(189px, 836px, 336px, 0);
  }
  33.33333% {
    clip: rect(267px, 836px, 390px, 0);
  }
  40% {
    clip: rect(36px, 836px, 128px, 0);
  }
  46.66667% {
    clip: rect(341px, 836px, 280px, 0);
  }
  53.33333% {
    clip: rect(277px, 836px, 215px, 0);
  }
  60% {
    clip: rect(85px, 836px, 340px, 0);
  }
  66.66667% {
    clip: rect(98px, 836px, 116px, 0);
  }
  73.33333% {
    clip: rect(165px, 836px, 71px, 0);
  }
  80% {
    clip: rect(328px, 836px, 289px, 0);
  }
  86.66667% {
    clip: rect(324px, 836px, 254px, 0);
  }
  93.33333% {
    clip: rect(62px, 836px, 58px, 0);
  }
  100% {
    clip: rect(278px, 836px, 390px, 0);
  }
}

html, body {
  height: 100%;
}

body {
  background: #002b36;
  margin: 0;
}

#bg {
  position: fixed;
  top: 0;
  left: 0;
}

#container {
  height: 100%;
  top: 0px;
  left: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
}

#logo {
  width: 836px;
  height: 395px;
  background: url("/site_imgs/fondlogo.png") center no-repeat;
}

#logo>img {
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  width: 836px;
}

#logo>img:nth-child(2), #logo>img:nth-child(3) {
  clip: rect(0, 0, 0, 0);
}

#logo:hover>img:nth-child(2) {
  margin-left: 2px;
  animation: anim-1 2s infinite linear alternate-reverse;
}

#logo:hover>img:nth-child(3) {
  margin-left: -2px;
  animation: anim-2 3s infinite linear alternate-reverse;
}