.header-visible {
  opacity: 0;
  -webkit-transform: translateX(-20px);
      -ms-transform: translateX(-20px);
          transform: translateX(-20px);
  -webkit-transition: 1s ease;
  -o-transition: 1s ease;
  transition: 1s ease;
}

.header-visible.active {
  -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
          transform: translateX(0);
  opacity: 1;
}

.header-list-item {
  opacity: 0;
  -webkit-transition: 2s ease;
  -o-transition: 2s ease;
  transition: 2s ease;
  -webkit-transform: translateX(-3px);
      -ms-transform: translateX(-3px);
          transform: translateX(-3px);
}

.header-list-item.show {
  -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
          transform: translateX(0);
  opacity: 1;
}





.hero-text-one,
.hero-text-two {
  opacity: 0;
  -webkit-transform: translateX(-40px);
      -ms-transform: translateX(-40px);
          transform: translateX(-40px);
  -webkit-transition: 3s ease;
  -o-transition: 3s ease;
  transition: 3s ease;
}

.hero-text-one.show,
.hero-text-two.show {
  opacity: 1;
  -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
          transform: translateX(0);
}

.hero .button {
  opacity: 0;
  -webkit-transition: 4s ease;
  -o-transition: 4s ease;
  transition: 4s ease;
  -webkit-transform: translateX(-20px);
      -ms-transform: translateX(-20px);
          transform: translateX(-20px);
}

.hero .button.show {
  opacity: 1;
  -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
          transform: translateX(0);
}

.hero-info {
  opacity: 0;
  -webkit-transform: translateY(60px);
      -ms-transform: translateY(60px);
          transform: translateY(60px);
  -webkit-transition: 1s ease;
  -o-transition: 1s ease;
  transition: 1s ease;
}

.hero-info.show {
  opacity: 1;
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
}

@-webkit-keyframes scrollBackground {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0 0;
  }
}

@keyframes scrollBackground {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0 0;
  }
}

.hero-img {
  background-size: 1280px !important;
  background-repeat: repeat-x !important;
  -webkit-animation: scrollBackground 25s linear infinite;
         animation: scrollBackground 25s linear infinite;
}
@media (max-width: 1200px) {

  .hero-img {
    background-size: 1000px !important;
}
}
@media (max-width: 768px) {

  .hero-img {
    background-size: 800px !important;
}
}
@media (max-width: 440px) {

  .hero-img {
    background-size: 600px !important;
}
}

/* Анімація фону на сторінці about */

@-webkit-keyframes scrollBackgroundabout {
  0% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

@keyframes scrollBackgroundabout {
  0% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}