.appear.fade-in-down,
.appear.fade-in-left,
.appear.fade-in-right {
  opacity: 0;
  transition-duration: 1.5s;
  transition-timing-function: cubic-bezier(0.4, 0.96, 0.47, 1.03);
  transition-property: transform, opacity;
}

.fade-in-down.appear {
  transform: translate(0, 20%);
}

.fade-in-right.appear {
  transform: translate(20%, 0%);
}

.fade-in-left.appear {
  transform: translate(-20%, 0%);
}

.appear.delay100 {
  transition-delay: 0.1s;
}

.appear.fade-in-down.--appear-in,
.appear.fade-in-right.--appear-in,
.appear.fade-in-left.--appear-in {
  opacity: 1;
  transform: translate(0, 0);
}

.navigation {
  height: 0%;
  transition: height 0.4s ease-in-out;
}
.nav-expanded .navigation {
  height: 100%;
  transition: height 0.4s ease-in-out;
}
.nav-out .navigation {
  transform: translate(0, -100%);
  transition: transform 0.4s ease-in-out 0.4s;
}
.nav-expanded .navigation__header {
  animation: appearTopBar 0.6s ease-out 0.4s;
  animation-fill-mode: forwards;
  opacity: 0;
}
.nav-out .navigation__header {
  animation: dissappearTopBar 0.4s ease-in;
}
.navigation__content-bg {
  height: 0;
  transition: height 0.6s ease-in-out 0.4s;
}
.nav-expanded .navigation__content-bg {
  height: 100%;
}
.nav-out .navigation__content-bg {
  transform: translate(0, -100%);
  transition: transform 0.4s ease-in-out;
}
.navigation__content-bg-menu {
  height: 100%;
  transform: translate(0, -100%);
  transition: transform 0.4s ease-in-out 0.4s;
}
.nav-expanded .navigation__content-bg-menu {
  transform: translate(0, 0%);
}
.nav-out .navigation__content-bg-menu {
  transform: translate(0, -100%);
  transition: transform 0.4s ease-in-out;
}
.navigation nav.main li .prefix:after {
  transform: scaleX(0);
  transform-origin: 0 0;
}
.nav-expanded .navigation nav.main li .prefix:after {
  transition: transform 0.6s ease-in-out 0.4s;
  transform: scaleX(1);
}
.nav-out .navigation nav.main li .prefix:after {
  transition: transform 0.4s ease-in-out;
  transform-origin: 100% 0;
  transform: scaleX(0);
}
.nav-expanded .navigation__content h3,
.nav-expanded .navigation nav.main .num {
  animation: appearHeader 0.6s ease-in-out 0.4s;
  animation-fill-mode: forwards;
  opacity: 0;
}
.nav-out .navigation__content h3,
.nav-out .navigation nav.main .num {
  animation: dissapearHeader 0.4s ease-in-out;
}
.nav-expanded .navigation nav.main a {
  animation: appearLargeElement 0.6s ease-out 0.4s;
  animation-fill-mode: forwards;
  opacity: 0;
}
.nav-out .navigation nav.main a {
  animation: dissapearLargeElement 0.4s ease-in;
}
.nav-expanded .navigation__footer,
.nav-expanded .navigation .address, .nav-expanded .navigation__content__item p {
  animation: appearMediumElement 0.6s ease-in-out 0.4s forwards;
  opacity: 0;
}
.nav-out .navigation__footer,
.nav-out .navigation .address, .nav-out .navigation__content__item p {
  animation: dissapearMediumElement 0.4s ease-in-out;
}

@keyframes appearSmallElement {
  0% {
    opacity: 0;
    transform: translate(0, 20px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes appearTopBar {
  0% {
    opacity: 0;
    transform: translate(0, 30px);
  }
  100% {
    opacity: 1;
    transform: translate(0, -50%);
  }
}
@keyframes dissappearTopBar {
  0% {
    opacity: 1;
    transform: translate(0, -50%);
  }
  100% {
    opacity: 0;
    transform: translate(0, -150%);
  }
}
@keyframes appearHeader {
  0% {
    opacity: 0;
    transform: translate(0, 20px);
  }
  100% {
    opacity: 0.5;
    transform: translate(0, 0);
  }
}
@keyframes appearMediumElement {
  0% {
    opacity: 0;
    transform: translate(0, 30px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes appearLargeElement {
  0% {
    opacity: 0;
    transform: translate(0, 40px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes dissapearHeader {
  0% {
    opacity: 0.5;
    transform: translate(0, 0);
  }
  100% {
    opacity: 0;
    transform: translate(0, -20px);
  }
}
@keyframes dissapearSmallElement {
  0% {
    opacity: 1;
    transform: translate(0, 0);
  }
  100% {
    opacity: 0;
    transform: translate(0, -20px);
  }
}
@keyframes dissapearMediumElement {
  0% {
    opacity: 1;
    transform: translate(0, 0);
  }
  100% {
    opacity: 0;
    transform: translate(0, -30px);
  }
}
@keyframes dissapearLargeElement {
  0% {
    opacity: 1;
    transform: translate(0, 0);
  }
  100% {
    opacity: 0;
    transform: translate(0, -40px);
  }
}
.style-switcher.--brutal .style-switcher__item.--brutal .text {
  color: #FFA3A3;
}
.style-switcher.--brutal .style-switcher__item.--brutal:before,
.style-switcher.--brutal .style-switcher__item.--brutal:after,
.style-switcher.--brutal .style-switcher__item.--brutal .text:before,
.style-switcher.--brutal .style-switcher__item.--brutal .text:after {
  -webkit-text-stroke: 1px #FFA3A3;
  opacity: 1;
  visibility: visible;
  transition: transform 0.25s ease-in-out, color 0.25s ease-in-out, -webkit-text-stroke 0.25s 0.25s ease-in-out;
}
.style-switcher.--brutal .style-switcher__item.--brutal:before {
  transform: translate(-50%, -200%);
}
.style-switcher.--brutal .style-switcher__item.--brutal:after {
  transform: translate(-50%, 200%);
}
.style-switcher.--brutal .style-switcher__item.--brutal .text:before {
  transform: translate(0, -100%);
}
.style-switcher.--brutal .style-switcher__item.--brutal .text:after {
  transform: translate(0, 100%);
}

.--out-to-detail .work-list__slide h2,
.--out-to-detail .work-list__slide h3 {
  transition: transform 0.5s ease-out;
  transform: translate(100px, 0);
}
.--out-to-detail .work-list__slide__content {
  opacity: 0;
  transition: opacity 1s ease-out;
}
.--out-to-detail .work-list__slide__button {
  transition: transform 0.5s ease-out;
  transform: translate(100px, 0);
}
.--out-to-detail .work-list__slide__image-secondary {
  opacity: 0;
  transition: transform 0.5s ease-out, opacity 0.5s ease-out;
  transform: translate(0, 20%);
}
.--out-to-detail .progress-slider {
  opacity: 0;
  transition: transform 0.5s ease-out, opacity 0.5s ease-out;
  transform: translate(0, 100%);
}

.work-detail-header h1.appear .text-line {
  position: relative;
  overflow: hidden;
}
.work-detail-header h1.appear .text-line-content {
  display: block;
  transform: translate(0, 100%);
  transition: transform 0.5s ease-out;
}
.work-detail-header h1.appear .text-line:nth-child(2) .text-line-content {
  transition-delay: 0.15s;
}

.work-detail-header h1.--appear-in .text-line-content {
  transform: translate(0, 0);
}

/*# sourceMappingURL=animations.css.map */