.animation-slide-and-fade-in {
  opacity: 0;
  transform: translateY(50px);
}

@media (min-width: 768px) {
  .animation-slide-and-fade-in.animation-sp-only {
    opacity: 1;
    transform: none;
  }
}

.animation-slide-and-fade-in.activated {
  opacity: 1;
  transform: none;
  transition: opacity 1.0s, transform 1.0s;
}

.common-page-header-title,
.company-atoz-header-title-container,
.company-atoz-header-subtitle-container {
  animation: animation-common-page-header-title 1.0s both;
}

@keyframes animation-common-page-header-title {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.common-page-header-wrapper .company-atoz-cast-container {
  animation: animation-common-page-header-title 1s 0.5s both;
}

.common-page-header-text,
.common-page-header-wrapper .company-atoz-header-link {
  animation: animation-common-page-header-title 1s 1s both;
}

@keyframes animation-common-page-header-text {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.common-page-header-wrapper::before,
.common-page-header-background {
  animation: animation-common-page-header-wrapper 1.5s both;
}

@keyframes animation-common-page-header-wrapper {
  from {
    opacity: 0;
    transform: scale(105%);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.company-atoz-index-top-container .company-atoz-header-title-container,
.company-atoz-index-top-container .company-atoz-cast-container,
.company-atoz-index-top-container .company-atoz-header-link {
  animation: none;
}

.common-headline-bracket-background::before {
  animation: animation-common-headline-bracket-background-before 0.4s 0.1s ease-out both;
}

@keyframes animation-common-headline-bracket-background-before {
  from {
    opacity: 0;
    transform: translateX(-50%);
  }

  to {
    opacity: 1;
    transform: translateX(30%);
  }
}

.common-headline-bracket-background::after {
  animation: animation-common-headline-bracket-background-after 0.4s 0.1s ease-out both;
}

@keyframes animation-common-headline-bracket-background-after {
  from {
    opacity: 0;
    transform: translateX(50%);
  }

  to {
    opacity: 1;
    transform: translateX(-30%);
  }
}

.common-headline-bracket-wrapper > .common-layout-container {
  animation: animation-common-headline-bracket-container 1s 0.3s both;
}

@keyframes animation-common-headline-bracket-container {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}