/*
Because I keep forgtting:
transition: <property> <duration> <timing> <delay>;
*/

:root {
  --header-animation-duration:0.8s;
  --header-animation-timing:cubic-bezier(0.08, 0, 0.18, 1.0);
  
  --slide-down-duration: 0.5s;
  --slide-down-timing: ease-in-out;

  --global-animation-duration: 0.3s;
  --global-animation-delay: 0.1s;
}

/* Baseline Animations */

a,
a [class*="fa-"],
a > .text,
.arrow-link,
.hover-underline,
.slidein-background,
.solid-background,
input[type="submit"] {
  transition: all 0.4s ease-in-out 0.1s;
}

.popout::after,
.arrow-link::after,
a::after {
  transition: all 0.4s ease-in-out 0.1s;
}

.site-overlay-transparant {
  transition: opacity 0.3s ease-in-out;
}

i {
  transition: all var(--global-animation-duration) ease-in-out var(--global-animation-delay);
}

/* HEADER ANIMATION */
.main-header .nav-container,
.main-header .ultranav-container,
.main-header .iss-logo img,
.main-header .main-nav-list > li {
  transition: all 0.3s ease-in-out 0.2s;
}

.main-header {
  transition: background-color 0.3s ease-in-out 0s;
}

.main-header .ultranav,
.main-nav-list li .bar {
  transition: all var(--header-animation-duration) var(--header-animation-timing);
}

.main-header .ultranav.on {
  opacity: 1;
  pointer-events: all;
  top:0 !important;
}

.main-nav-list li.on .bar {
  width:100%;
  opacity: 1; 
}

.main-header .slider-container {
  transition: top var(--header-animation-duration) var(--header-animation-timing);
}

.main-header .slider-container > div:not(.static) {
  position: relative;
  top:-20px;
  opacity: 0;
  transition: all var(--header-animation-duration) calc(var(--header-animation-duration) / 2) var(--header-animation-timing);
}

.main-header .slider-container > div:not(.static).on {
  top: 0;
  opacity: 1;
}

/* MOBILE HEADER ANIAMTION */
.mobile-nav-menu {
  transition: opacity 0.4s var(--slide-down-timing);
  .menu-container {
    transition: height var(--slide-down-duration) var(--slide-down-timing);
  }
}
.resources-sidebar {
  transition: all var(--slide-down-duration) var(--slide-down-timing);
}

.menu-item  .menu-item-header  i {
  transform-origin: center;
  transition: transform var(--global-animation-duration) ease-in-out;
}

.menu-item  .menu-item-header i.on {
  transform: rotate(90deg);
}

.menu-item-header h3 {
  transition: all var(--global-animation-duration) ease-in-out;
}

.hamburger-menu-icon .bars .bar {
  transition: all var(--global-animation-duration) ease-in-out;
}

.timeline-slide-container {
  transition: top 0.85s ease-in-out 0.1s;
}

.interactive-map  .map-sidebar {
  transition: right var(--slide-down-duration) ease-in-out;
}

.interactive-map img[class*="map-"] {
  transition: opacity 0.55s ease-in-out;
}

.blocks-navigation  {
  .inner-spacing {
    transition: max-width 0.5s ease-in-out 0.2s, margin-left 0.2s ease-in-out 0.5s;
  }
  .container {
    transition: max-width 0.5s ease-in-out 0.2s;
  }
}

.card-list .image-window,
.card-list .image-window img,
.card-list figcaption,
.card-list figcaption h5,
.image-window-hover-zoom,
.image-window-hover-zoom .image-window {
  transition: all 0.4s ease-in-out 0.1s; 
}

.esg-intro {
  transition: all 0.3s ease-in-out 0.1s;
}

.blocks-navigation .isSticky-container ul {
  transition: all 0.3s ease-in-out 0.1s;
}