/* Swup progress bar transition */

.swup-progress-bar {
  height: 4px;
  background-color: blue;
}





.transition-fade {
  transition: 0.2s;
  opacity: 1;
}

html.is-animating .transition-fade {
  opacity: 0;
}

/* Scroll Disabled */

.scroll--disabled {
  overflow: hidden;
}

/* CSS Element animations */

#nav,
#subnav {
  transition: transform 0.2s ease;
}

#timer__bar {
  width: 0%;
  height: 100%;
  background-color: black;
  transition: width 8s;
}

.slide--up {
  transform: translateY(-100%);
}

.slide--down {
  transform: translateY(0);
}

#contact__card, #contact__submit {
  transition: transform 0.4s cubic-bezier(0.222, 0.763, 0, 0.997);
}

#contact__bg {
  transition: opacity 0.3s ease;
}

.slide--right {
  transform: translateX(100%);
}

.slide--left {
  transform: translateX(0%);
}

.is--filled {
  width: 100% !important;
}

.is--hidden {
  display: none !important;
}

.is--transparent {
  opacity: 0;
}

.is--error {
  color: red !important;
}

/* Mobile nav animations */

#nav__mobile {
  transition: height 0.5s cubic-bezier(0.222, 0.763, 0, 0.997);
}

#mobile__link1,
#mobile__link2,
#mobile__link3,
#mobile__link4,
#mobile__link5,
#mobile__link6,
#mobile__link7,
#mobile__link8 {
  transition: opacity 0.7s, transform 0.25s cubic-bezier(0.222, 0.763, 0, 0.997);
}

.nav__collapse {
    overflow: hidden;
    height: 0dvh !important;
}

.nav__expand {
    height: 100dvh !important;
}

.link__hide {
  opacity: 0%;
  transform: translateY(36px);
}

.link__show {
    opacity: 100%;
    transform: translateY(0px);
  }




  /* About heading text animations */

#animation__container {
  box-sizing: border-box;
  transition: transform 1s cubic-bezier(0, .997, .602, .944); 
}

  .textanimate__1 {
    transform: translateY(-20%);
  }

  .textanimate__2 {
    transform: translateY(-40%);
  }

  .textanimate__3 {
    transform: translateY(-60%);
  }

  .textanimate__4 {
    transform: translateY(-80%);
  }

  .notransition {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
  }