/* ANIMATIONS */

:root {
  --headerMargin: calc(96vw * 328 / 1920);
}

.content-container {
  z-index: 8;
  position: absolute;
  width: -webkit-fill-available;
  height: 100%;
  top: 50%;
  transform: translateY(-50%);
  transition: 400ms;
  opacity: 100%;
  background: rgba(39,62,84,0);
}

.content-container.fadeout {
  opacity: 0%
}

#header {
  position: relative;
  overflow: hidden;
}

#header .header-info  {
  position: absolute;
  height: 100%;
  width: 100%;
}

#header .header-info h1 span {
  opacity: 0;
  visibility: hidden;
  transform: translateY(80px);
  position: absolute;
  transition: 600ms;
  top: 42%;
  right: 70px;
  width: 56%;
  line-height: normal;
  text-align: center;
  margin: auto;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
  color: white;
}

#header .header-info h1 span:has(br) {
  top: 38%
}

#header .header-info h1 span:has(.class-emoji.present) {
  top: 32%;
}

#header .header-info h1 span a, #header .header-info h1 span a:hover {
  color: white;
  font-weight: 900;
}

#header .header-info h1 span .class-emoji {
  font-size: var(--clFontSizeExtraExtraLarge  );
  margin-top: 10px;
}

#header .header-info h1 span .class-emoji.top {
  margin-top: 0px;
  margin-bottom: 10px;
}

#header .header-info h1 span.fadein {
  transform: translateY(0px);
  opacity: 1;
  visibility: visible;
}

#header .header-info h1 span.fadeout {
  transform: translateY(-80px);
}

.image-container {
  position: relative;
}

.image-container img {
  transform: none;
  position: relative;
  top: 0px;
  object-fit: cover;
  height: 100%;
  width: 100%;
}

.image-container img:not(:first-of-type) {
  position: absolute;
  left: 0;
  opacity: 0;
  visibility: hidden;
  display: none;
  transition: 400ms ease-out;
}

.image-container img.init {
  display: inherit;
  visibility: visible;
}

.image-container img:not(:first-of-type).visible {
  opacity: 1;
}

.image-container.subpage img {
  height: 500px;
  object-fit: none;
}

@media only screen and (max-width: 1920px) {}
@media only screen and (max-width: 1600px) {}
@media only screen and (max-width: 1440px) {}
@media only screen and (max-width: 1280px) {}
@media only screen and (max-width: 1024px) {}

@media only screen and (max-width: 900px) {
  /*
  @keyframes fade-in-left {
    10% {
      filter: opacity(100%) blur(0);
    }
    
    100% {
      left: 7%;
      filter: opacity(100%) blur(0);
    };
  }

  @keyframes fade-in-right {
    10% {
      filter: opacity(100%) blur(0);
    }
    
    100% {
      right: 12%;
      filter: opacity(100%) blur(0);
    };
  }
  */
  #header .header-info {
    top: 45%;
  }
  
  #header .header-image-title {
    font-size: 6vw;
  }
  
  #header .header-image-title.color1 {
    left: 3%;
  }

  #header .header-image-title.color2, .header-image-title.color3, .header-image-title.color4 {
    right: 8%;
  }
  
  .content-container {
    transform: translateY(-50%);
  }
  
  .image-container {
    height: 70vw;
  }
}

@media only screen and (max-width: 800px) {}
@media only screen and (max-width: 600px) {
  /*
  @keyframes header_movement_down {
    0%   {filter: opacity(0%); top:-30px;}
    100% {filter: opacity(100%) blur(0px); top:0px;}
  }
*/
  #header .header-image-title.color1, #header .header-image-title.color2, .header-image-title.color3, .header-image-title.color4 {
    left: unset;
    /*
    animation-name: header_movement_down;
    animation-duration: 1000ms;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
    */
    right: unset;
    text-align: center;
    /*will-change: filter, top;*/
  }
  
  .image-container {
    height: 160vw;
  }
  
  .image-container img {
    width: auto;
    transform: translatex(-50%);
    left: 50%;
    top: 0;
    position: absolute;
    height: 125%;
  }
  
  #header .header-image-title {
    font-size: max(7.5vw,21px);
}
/*
  
  #header .header-image-title.color1 {
    animation-delay: 0.1s;
  }
  
  #header .header-image-title.color2, .header-image-title.color3, .header-image-title.color4 {
    animation-delay: 0.25s;
  }
  */
  .content-container {
    width: 100%;
  }
  
  #header .header-info {
    left: 0;
    width: 100%;
    text-align: center;
  }
  
  #header .header-image-title-color2 {
    top: 106px;
  }
}

@media only screen and (max-width: 500px) {}
@media only screen and (max-width: 400px) {}
@media only screen and (max-width: 350px) {}