@keyframes moveJoinLogo {
  from {
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background-size: 274px 334px;
  }

  to {
    width: 100px;
    height: 122px;
    top: 80px;
    left: 77px;
    background-size: 100px 122px;
  }
}

@keyframes fadeJoinLogoBackground {
  from {
    background-color: rgba(246, 247, 248, 1);
    z-index: 99;
  }

  to {
    background-color: rgba(246, 247, 248, 0);
    z-index: 1;
  }
}

@keyframes backgroundFadeIn {
  from {
    background-color: rgba(0, 0, 0, 0);
    z-index: 1;
  }

  to {
    background-color: rgba(0, 0, 0, 0.25);
    z-index: 99;
  }
}

@keyframes backgroundFadeOut {
  from {
    background-color: rgba(0, 0, 0, 0.25);
    z-index: 99;
  }

  to {
    background-color: rgba(0, 0, 0, 0);
    z-index: 1;
  }
}

@keyframes shrinkJoinLogo {
  from {
    width: 25%;
    height: 40%;
  }

  to {
    width: 100px;
    height: 122px;
  }
}

@keyframes hoverScale {
  0% {
    transform: scaleX(1) scaleY(1);
  }

  100% {
    transform: scaleX(1.05) scaleY(1.05);
  }
}

@keyframes hoverScaleFromLeft {
  0% {
    transform: scaleX(1) scaleY(1);
    transform-origin: left;
  }

  100% {
    transform: scaleX(1.05) scaleY(1.05);
    transform-origin: left;
  }
}

@keyframes hoverScaleFromRight {
  0% {
    transform: scaleX(1) scaleY(1);
    transform-origin: right;
  }

  100% {
    transform: scaleX(1.05) scaleY(1.05);
    transform-origin: right;
  }
}

@keyframes hoverScaleFromTopLeft {
  0% {
    transform: scaleX(1) scaleY(1);
    transform-origin: top left;
  }

  100% {
    transform: scaleX(1.05) scaleY(1.05);
    transform-origin: top left;
  }
}

@keyframes slideIn {
  from {
    background-color: rgba(0, 0, 0, 0);
    transform: translate(200%);
  }

  to {
    background-color: rgba(0, 0, 0, 0.25);
    transform: translate(0%);
  }
}

@keyframes slideOut {
  from {
    background-color: rgba(0, 0, 0, 0);
    transform: translate(0%);
  }

  to {
    background-color: rgba(0, 0, 0, 0.25);
    transform: translate(200%);
  }
}

@keyframes slideInNoBgChange {
  from {
    transform: translate(200%);
  }

  to {
    transform: translate(0%);
  }
}

@keyframes slideOutNoBgChange {
  from {
    transform: translate(0%);
  }

  to {
    transform: translate(150%);
  }
}

@keyframes slideUp {
  from {
    background-color: rgba(0, 0, 0, 0);
    transform: translateY(100%);
  }

  to {
    background-color: rgba(0, 0, 0, 0);
    transform: translateY(0%);
  }
}

@keyframes slideUpWithoutBG {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0%);
  }
}

@keyframes slideDown {
  from {
    background-color: rgba(0, 0, 0, 0);
    transform: translateY(0%);
  }

  to {
    background-color: rgba(0, 0, 0, 0);
    transform: translateY(100%);
  }
}

@keyframes slideDownWithoutBG {
  from {
    transform: translateY(0%);
  }

  to {
    transform: translateY(100%);
  }
}

.background_fade_in {
  animation: backgroundFadeIn 0.5s ease;
}

.background_fade_out {
  animation: backgroundFadeOut 0.5s ease;
}

.slide_in {
  animation: slideIn 0.5s ease;
}

.slide_out {
  animation: slideOut 0.5s ease;
}

.slide_in_no_bg_change {
  animation: slideInNoBgChange 0.5s ease;
}

.slide_out_no_bg_change {
  animation: slideOutNoBgChange 0.5s ease;
}

.slide_up {
  animation: slideUp 0.5s ease;
}

.slide_down {
  animation: slideDown 0.5s ease;
}

.slide_up_without_bg {
  animation: slideUpWithoutBG 0.5s ease;
}

.slide_down_without_bg {
  animation: slideDownWithoutBG 0.5s ease;
}


@keyframes blueBackground {
  0% {
    opacity: 1;
    background-color: #2A3647;
    z-index: 1;
  }

  100% {
    opacity: 1;
    background-color: #F6F7F8;
  }
}

@keyframes moveJoinLogoMobile {
  0% {
    width: 100px;
    height: 122px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-image: url('../assets/img/joinLogoLight.png');
    opacity: 1;
    z-index: 99;
  }

  50% {
    opacity: 0.5; 
  }

  50.1% {
    opacity: 0.5;
    background-image: url('../assets/img/joinLogoDark.png');
  }

  100% {
    width: 64px;
    height: 78px;
    top: 30px;
    left: 30px;
    opacity: 1; 
  }
}