@keyframes left-anim {
  0%   { opacity: 0; left: 21.5%; }
  100% { opacity: 1; left: 0; }
}

@keyframes center-anim {
  0%   { opacity: 0; left: 22.4%; }
  70%  { opacity: 1; left: 22.4%; }
  100% { opacity: 1; left: 0; }
}

@keyframes right-anim {
  0%   { opacity: 0; right: 21.5%; }
  100% { opacity: 1; right: 0; }
}

.logo-container {
  display: flex;
  align-items: baseline;
  /* Logo format: 25:7 (vw)*/
}

/* height: 130px; */
/* 86% of stamp height */

#D {
  position: relative;

  width: 12.5%;
  height: auto;
  opacity: 0;

  animation-name: left-anim;
  animation-delay: 4s;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
}

#EYE {
  position: relative;

  width: 24%;
  height: auto;
  opacity: 0;

  padding: 0px 1.5% 0px 2.7%;

  animation-name: center-anim;
  animation-delay: 1.2s;
  animation-duration: 3s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;

  /* height 100% (150px) stamp height */
  /* border: 2px solid white; */
}

#mond {
  position: relative;

  width: 59%;
  height: auto;
  opacity: 0;

  animation-name: right-anim;
  animation-delay: 4s;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
}