:root {
  --animationlength: 10s;
  --animationdelay: 2s;
  --white: #ffffff;
}

.logo-15-years-rjh {
  width: 300px; 
  margin-top: -5px; 
  margin-bottom: -5px;
}

@media (max-width: 768px) {
  .wrapper-logo-15-years > div {
    text-align: center;
    margin-top: 10px; 
  }
}

.o-visible {
    overflow: visible;
  }
  

.years-15 {
  opacity: 0;
  animation: yearsf var(--animationlength) infinite;
  animation-delay: var(--animationdelay); /* IE 10+, Fx 29+ */
}

@keyframes yearsf {
    0%,
    20%,
    100% {
      opacity: 0;
      transform: translate(25px, 25px) scale(0.5);
    }
  
    50%,
    70% {
      opacity: 100;
      transform: translate(0px, 0px) scale(1);
    }
}

.years {
  opacity: 0;
  animation: years var(--animationlength) infinite;
  animation-delay: var(--animationdelay); /* IE 10+, Fx 29+ */
}

@keyframes years {
    0%,
    30%,
    100% {
      opacity: 0;
    }
  
    60%,
    70% {
      opacity: 100;
    }
}

.top-logo {
  animation: movetop var(--animationlength) infinite;
  animation-delay: var(--animationdelay); /* IE 10+, Fx 29+ */
}

@keyframes movetop {
  20%,
  100% {
    transform: translate(0px, 0px);
  }

  50%,
  70% {
    transform: translate(-40px, -35px) scale(0.7);
  }
}

.bottom-logo {
  animation: movebottom var(--animationlength) infinite;
  animation-delay: var(--animationdelay); /* IE 10+, Fx 29+ */
}

@keyframes movebottom {
  20%,
  100% {
    transform: translate(0px, 0px);
  }

  50%,
  70% {
    transform: translate(75px, 80px) scale(0.7);
  }
}

.rectangle-logo {
  animation: hiderect var(--animationlength) infinite;
  animation-delay: var(--animationdelay); /* IE 10+, Fx 29+ */
}

@keyframes hiderect {
  20%,
  100% {
    opacity: 100;
  }

  30%,
  85% {
    opacity: 0;
  }
}