.animated:not(.animated-grid,.animated-numerals){
    opacity: 0;
}
.animated.animation-finish{
    opacity: 1;
}

.animation-translate-up.animation-init{
    opacity: 0;
    transform: translateY(100px);
}
.animation-translate-up.animation-finish{
    animation: translateUp 0.5s ease-out;
    opacity: 1;
}
.animation-translate-down.animation-init{
    opacity: 0;
    transform: translateY(100px);
}
.animation-translate-down.animation-finish{
    animation: translateDown 0.5s ease-out;
    opacity: 1;
}

.animation-translate-left.animation-init,
.animated-grid.animation-translate-left .item.animation-init,
.animated-numerals.animation-translate-left .item.animation-init{
    opacity: 0;
    transform: translateX(100px);
}
.animation-translate-left.animation-finish,
.animated-grid.animation-translate-left .item.animation-finish,
.animated-numerals.animation-translate-left .item.animation-finish{
    animation: translateLeft 0.5s ease-out;
    opacity: 1;
}

.animation-translate-right.animation-init,
.animated-grid.animation-translate-right .item.animation-init,
.animated-numerals.animation-translate-right .item.animation-init{
    opacity: 0;
    transform: translateX(-100px);
}
.animation-translate-right.animation-finish,
.animated-grid.animation-translate-right .item.animation-finish,
.animated-numerals.animation-translate-right .item.animation-finish{
    animation: translateRight 0.5s ease-out;
    opacity: 1;
}

@keyframes translateLeft {
  0% {
      opacity: 0;
      transform: translateX(100px);
  }
  100% {
      opacity: 1;
      transform: translateX(0);
  }
}
@keyframes translateRight {
  0% {
      opacity: 0;
      transform: translateX(-100px);
  }
  100% {
      opacity: 1;
      transform: translateX(0);
  }
}
@keyframes translateUp {
  0% {
      opacity: 0;
      transform: translateY(100px);
  }
  100% {
      opacity: 1;
      transform: translateY(0);
  }
}
@keyframes translateDown {
  0% {
      opacity: 0;
      transform: translateY(-100px);
  }
  100% {
      opacity: 1;
      transform: translateY(0);
  }
}


#g-page-surround section:not(#g-navigation),
#g-page-surround footer{
    position:relative;
    z-index: 10;
}
.background-section{
    z-index: 1 !important;
}
.background-parallax{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.animated-background{
    position: absolute;
    left: -500px;
    z-index: 0;
    --size: 750px;
    --speed: 20s;
    --easing: cubic-bezier(0.8, 0.2, 0.2, 0.8);
    width: var(--size);
    height: var(--size);
    filter: blur(calc(var(--size) / 5));
    background-image: linear-gradient(#4377ef, #7befd0);
    animation: rotate var(--speed) var(--easing) alternate infinite;
    border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;
    opacity: 0.4;
}
.animated-background-2{
    position: absolute;
    right: -500px;
    top: 1000px;
    z-index: 0;
    --size: 750px;
    --speed: 20s;
    --easing: cubic-bezier(0.8, 0.2, 0.2, 0.8);
    width: var(--size);
    height: var(--size);
    filter: blur(calc(var(--size) / 5));
    background-image: linear-gradient(#4377ef, #7befd0);
    animation: rotate var(--speed) var(--easing) alternate infinite;
    border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;
    opacity: 0.4;
}
.animated-background-3{
    position: absolute;
    right: -250px;
    top: 200px;
    z-index: 0;
    --size: 500px;
    --speed: 20s;
    --easing: cubic-bezier(0.8, 0.2, 0.2, 0.8);
    width: var(--size);
    height: var(--size);
    filter: blur(calc(var(--size) / 5));
    background-image: linear-gradient(#fe4300, #e3000000);
    animation: rotate var(--speed) var(--easing) alternate infinite;
    border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;
    opacity: 0.6;
}
.animated-background-4{
    position: absolute;
    left: -250px;
    top: 1500px;
    z-index: 0;
    --size: 500px;
    --speed: 20s;
    --easing: cubic-bezier(0.8, 0.2, 0.2, 0.8);
    width: var(--size);
    height: var(--size);
    filter: blur(calc(var(--size) / 5));
    background-image: linear-gradient(#fe4300, #e3000000);
    animation: rotate var(--speed) var(--easing) alternate infinite;
    border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;
    opacity: 0.4;
}
.arrows-background{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/images/arrow_background.png');
    background-size: cover;
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}