.animation-stage {
  position: relative;
  height: 82vh;
  overflow: hidden;
  z-index: 500;
  /* CITY SKYLINE */
  /* TEXT HOME */
}
.animation-stage .skip-animation {
  position: absolute;
  z-index: 9999;
  bottom: 3.125rem;
  right: 3.125rem;
  text-decoration: none;
  font-size: 0.875rem;
  background: rgba(255, 255, 255, 0.6);
  border: 0.0625rem solid #ececec;
  padding: 0.625rem 1.25rem;
  color: #484848 !important;
  border-radius: 0.5rem;
}
@media (max-width: 991px) {
  .animation-stage .skip-animation {
    right: inherit;
    left: 50%;
    transform: translate(-50%, 0);
    white-space: nowrap;
  }
}
.animation-stage .skip-animation:hover {
  background: white;
  color: #000 !important;
}
.animation-stage .animated {
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-timing-function: ease;
  animation-timing-function: ease;
}
.animation-stage .animation-slide {
  display: none;
}
.animation-stage .animation-slide.play {
  display: block;
}
.animation-stage .city-container {
  height: 82vh;
  width: 6117px;
  background: url("assets/img/city-grey.svg") no-repeat bottom 6px left;
  background-size: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 100;
  margin-left: -99px;
  -webkit-animation-name: city-ani;
  animation-name: city-ani;
  -webkit-animation-duration: 25s;
  animation-duration: 25s;
  animation-iteration-count: 1;
}
.animation-stage .city-container:after {
  background: url("assets/img/city-green.svg") no-repeat bottom 6px left;
  background-size: 100%;
  content: "";
  height: 400px;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  opacity: 0;
  animation-delay: 25s;
  -webkit-animation-delay: 25s;
  -webkit-animation-name: city-green-fade;
  animation-name: city-green-fade;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
@keyframes city-ani {
  0% {
    /*background-size:100%;*/
    transform: scale(0.6);
    transform-origin: bottom left;
  }
  100% {
    /*background-size:140%;*/
    transform: scale(1.032);
    transform-origin: bottom left;
  }
}
@keyframes city-green-fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.animation-stage .resize-wide {
  width: 0;
  overflow: hidden;
  display: block;
  padding-left: 25px;
  -webkit-animation-name: resize-wide;
  animation-name: resize-wide;
  animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  white-space: nowrap;
}
@keyframes resize-wide {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
.animation-stage .animation-1 {
  position: relative;
  z-index: 200;
  animation-delay: 6s;
  -webkit-animation-delay: 6s;
  -webkit-animation-name: animation-1;
  animation-name: animation-1;
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
@keyframes animation-1 {
  0% {
    opacity: 1;
    transform: scale(1);
    transform-origin: top left;
  }
  100% {
    opacity: 0.5;
    transform: scale(0.5);
    transform-origin: top left;
  }
}
.animation-stage .animation-1 .start-text-1 {
  font-size: 100px;
  opacity: 0;
  z-index: 200;
  padding-left: 10px;
}
@media (max-width: 991px) {
  .animation-stage .animation-1 .start-text-1 {
    font-size: 8vw;
  }
}
.animation-stage .animation-1 .start-text-1.fade-1 {
  -webkit-animation-name: fade-in-text-1;
  animation-name: fade-in-text-1;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  position: absolute;
}
@keyframes fade-in-text-1 {
  0% {
    opacity: 0;
    transform: scale(0.7);
  }
  70% {
    opacity: 0.7;
    transform: scale(1.05);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.animation-stage .animation-1 .scale-1 {
  position: absolute;
  left: 10vw;
  top: 100px;
  width: 100%;
  animation-delay: 1s;
  -webkit-animation-delay: 1s;
  -webkit-animation-name: scale-text-1;
  animation-name: scale-text-1;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
@media (max-width: 1300px) {
  .animation-stage .animation-1 .scale-1 {
    top: -11px;
    left: 9vw;
  }
}
@keyframes scale-text-1 {
  0% {
    transform: scale(1);
    transform-origin: top left;
  }
  100% {
    transform: scale(0.7);
    transform-origin: top left;
  }
}
@media (max-width: 991px) {
  .animation-stage .animation-1 .scale-1 {
    animation: none;
  }
}
.animation-stage .animation-1 .start-text-2 {
  font-size: 100px;
  z-index: 200;
  line-height: 1;
  text-align: center;
  position: absolute;
  top: 235px;
  left: 5vw;
}
@media (max-width: 1400px) {
  .animation-stage .animation-1 .start-text-2 {
    font-size: 90px;
  }
}
@media (max-width: 1300px) {
  .animation-stage .animation-1 .start-text-2 {
    font-size: 8vw;
    top: 11vw;
  }
}
@media (max-width: 767px) {
  .animation-stage .animation-1 .start-text-2 {
    top: 13vw;
  }
}
.animation-stage .animation-1 .start-text-2 .typewriter-4 {
  padding-left: 20px;
}
.animation-stage .animation-1 .start-text-2 .fade-2 {
  opacity: 0;
  animation-delay: 2s;
  animation-name: fade-in-text-2;
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
@keyframes fade-in-text-2 {
  0% {
    opacity: 0;
    transform: scale(0.7);
    transform-origin: top;
  }
  100% {
    opacity: 1;
    transform: scale(1);
    transform-origin: top;
  }
}
.animation-stage .animation-1 .start-text-2 .fade-3 {
  opacity: 0;
  animation-delay: 3.5s;
  animation-name: fade-in-text-2;
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.animation-stage .animation-1 .start-text-2 .fade-4 {
  opacity: 0;
  animation-delay: 4.5s;
  animation-name: fade-in-text-2;
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.animation-stage .animation-2 {
  position: relative;
  z-index: 200;
}
.animation-stage .animation-2 .start-text-1 {
  font-size: 100px;
  opacity: 0;
  z-index: 200;
  padding-left: 20px;
}
@media (max-width: 1400px) {
  .animation-stage .animation-2 .start-text-1 {
    font-size: 90px;
    left: 34vw;
  }
}
@media (max-width: 1366px) {
  .animation-stage .animation-2 .start-text-1 {
    font-size: 8vw;
  }
}
.animation-stage .animation-2 .start-text-1.fade-1 {
  animation-delay: 6.5s;
  -webkit-animation-delay: 6.5s;
  -webkit-animation-name: fade-in-text-1;
  animation-name: fade-in-text-1;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  position: absolute;
}
@keyframes fade-in-text-1 {
  0% {
    opacity: 0;
    transform: scale(0.7);
  }
  70% {
    opacity: 0.7;
    transform: scale(1.05);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.animation-stage .animation-2 .scale-1 {
  position: absolute;
  left: 40vw;
  top: 150px;
  width: 100%;
  animation-delay: 6s;
  -webkit-animation-delay: 6s;
  -webkit-animation-name: scale-text-1;
  animation-name: scale-text-1;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
@keyframes scale-text-1 {
  0% {
    transform: scale(1);
    transform-origin: top left;
  }
  100% {
    transform: scale(0.7);
    transform-origin: top left;
  }
}
.animation-stage .animation-2 .start-text-2 {
  font-size: 100px;
  z-index: 200;
  line-height: 1;
  text-align: center;
  position: absolute;
  top: 235px;
  left: 35vw;
}
@media (max-width: 1400px) {
  .animation-stage .animation-2 .start-text-2 {
    font-size: 90px;
    left: 22vw;
  }
}
@media (max-width: 1366px) {
  .animation-stage .animation-2 .start-text-2 {
    font-size: 8vw;
    top: 225px;
  }
}
@media (max-width: 991px) {
  .animation-stage .animation-2 .start-text-2 {
    top: 195px;
  }
}
@media (max-width: 767px) {
  .animation-stage .animation-2 .start-text-2 {
    top: 170px;
  }
}
.animation-stage .animation-2 .start-text-2 .fade-2 {
  opacity: 0;
  animation-delay: 7s;
  -webkit-animation-delay: 7s;
  -webkit-animation-name: fade-in-text-2;
  animation-name: fade-in-text-2;
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
@keyframes fade-in-text-2 {
  0% {
    opacity: 0;
    transform: scale(0.7);
    transform-origin: top;
  }
  100% {
    opacity: 1;
    transform: scale(1);
    transform-origin: top;
  }
}
.animation-stage .animation-slide-1 .animation-1 .scale-1 .resize-wide {
  animation-delay: 0.5s;
  animation-duration: 1.5s;
}
.animation-stage .animation-slide-1 .animation-1 .start-text-2 .text-line-1 .resize-wide {
  animation-delay: 2s;
  animation-duration: 1.5s;
}
.animation-stage .animation-slide-1 .animation-1 .start-text-2 .text-line-2 .resize-wide {
  animation-delay: 3.5s;
  animation-duration: 1.5s;
}
.animation-stage .animation-slide-1 .animation-1 .start-text-2 .text-line-3 .resize-wide {
  animation-delay: 4.5s;
  animation-duration: 1.5s;
}
.animation-stage .animation-slide-1 .animation-2 {
  position: relative;
  z-index: 200;
}
.animation-stage .animation-slide-1 .animation-2 .start-text-1 {
  font-size: 130px;
  opacity: 0;
  z-index: 200;
  padding-left: 200px;
}
@media (max-width: 1400px) {
  .animation-stage .animation-slide-1 .animation-2 .start-text-1 {
    font-size: 110px;
  }
}
@media (max-width: 1366px) {
  .animation-stage .animation-slide-1 .animation-2 .start-text-1 {
    padding-left: 0;
    font-size: 8vw;
  }
}
.animation-stage .animation-slide-1 .animation-2 .start-text-1.fade-1 {
  animation-delay: 6.5s;
  -webkit-animation-delay: 6.5s;
  -webkit-animation-name: fade-in-text-1;
  animation-name: fade-in-text-1;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  position: absolute;
}
@keyframes fade-in-text-1 {
  0% {
    opacity: 0;
    transform: scale(0.7);
  }
  70% {
    opacity: 0.7;
    transform: scale(1.05);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.animation-stage .animation-slide-1 .animation-2 .scale-1 {
  position: absolute;
  left: 40vw;
  top: 150px;
  width: 100%;
  animation-delay: 6s;
  -webkit-animation-delay: 6s;
  -webkit-animation-name: scale-text-1;
  animation-name: scale-text-1;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
@media (max-width: 1400px) {
  .animation-stage .animation-slide-1 .animation-2 .scale-1 {
    left: 37vw;
  }
}
@media (max-width: 767px) {
  .animation-stage .animation-slide-1 .animation-2 .scale-1 {
    left: 0;
  }
}
@keyframes scale-text-1 {
  0% {
    transform: scale(1);
    transform-origin: top left;
  }
  100% {
    transform: scale(0.7);
    transform-origin: top left;
  }
}
.animation-stage .animation-slide-1 .animation-2 .start-text-2 {
  font-size: 115px;
  z-index: 200;
  line-height: 1;
  text-align: center;
  position: absolute;
  top: 250px;
  left: 35vw;
}
@media (max-width: 1400px) {
  .animation-stage .animation-slide-1 .animation-2 .start-text-2 {
    left: 32vw;
    font-size: 110px;
  }
}
@media (max-width: 1366px) {
  .animation-stage .animation-slide-1 .animation-2 .start-text-2 {
    font-size: 8vw;
  }
}
@media (max-width: 991px) {
  .animation-stage .animation-slide-1 .animation-2 .start-text-2 {
    top: 220px;
  }
}
@media (max-width: 767px) {
  .animation-stage .animation-slide-1 .animation-2 .start-text-2 {
    left: 10vw;
    top: 200px;
  }
}
.animation-stage .animation-slide-1 .animation-2 .start-text-2 .fade-2 {
  opacity: 0;
  animation-delay: 7s;
  -webkit-animation-delay: 7s;
  -webkit-animation-name: fade-in-text-2;
  animation-name: fade-in-text-2;
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
@keyframes fade-in-text-2 {
  0% {
    opacity: 0;
    transform: scale(0.7);
    transform-origin: top;
  }
  100% {
    opacity: 1;
    transform: scale(1);
    transform-origin: top;
  }
}
.animation-stage .animation-slide-2 .scale-1 {
  left: 32vw;
  top: 123px;
}
@media (max-width: 1366px) {
  .animation-stage .animation-slide-2 .scale-1 {
    left: 18vw;
    white-space: nowrap;
  }
}
.animation-stage .animation-slide-2 .animation-1 {
  animation-delay: 2s;
  -webkit-animation-delay: 2s;
  -webkit-animation-name: animation-1;
  animation-name: animation-1;
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.animation-stage .animation-slide-2 .animation-1 .scale-1 {
  animation-delay: 0s;
  -webkit-animation-delay: 0s;
  -webkit-animation-name: scale-text-1;
  animation-name: scale-text-1;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  left: 15vw;
  top: 123px;
}
@media (max-width: 767px) {
  .animation-stage .animation-slide-2 .animation-1 .scale-1 {
    top: 10px;
  }
}
.animation-stage .animation-slide-2 .animation-1 .start-text-1 {
  font-size: 140px;
}
@media (max-width: 991px) {
  .animation-stage .animation-slide-2 .animation-1 .start-text-1 {
    font-size: 12vw;
  }
}
@media (max-width: 767px) {
  .animation-stage .animation-slide-2 .animation-1 .start-text-1 {
    font-size: 16vw;
  }
}
.animation-stage .animation-slide-2 .animation-2 .start-text-1 {
  font-size: 125px;
  padding-left: 70px;
}
@media (max-width: 1366px) {
  .animation-stage .animation-slide-2 .animation-2 .start-text-1 {
    font-size: 8vw;
    padding-left: 0;
  }
}
.animation-stage .animation-slide-2 .animation-2 .start-text-2 {
  left: 22vw;
}
@media (max-width: 1366px) {
  .animation-stage .animation-slide-2 .animation-2 .start-text-2 {
    left: 2vw;
  }
}
.animation-stage .animation-slide-2 .animation-2 .start-text-2 .last-words {
  padding-left: 450px;
}
@media (max-width: 991px) {
  .animation-stage .animation-slide-2 .animation-2 .start-text-2 .last-words {
    padding-left: 0;
  }
}
.animation-stage .animation-slide-2 .animation-2 .scale-1,
.animation-stage .animation-slide-2 .animation-2 .start-text-1.fade-1 {
  animation-delay: 2.7s;
  -webkit-animation-delay: 2.7s;
}
.animation-stage .animation-slide-2 .animation-2 .start-text-2 .fade-2 {
  animation-delay: 3.8s;
  -webkit-animation-delay: 3.8s;
}
.animation-stage .animation-slide-3 .animation-1 {
  animation-delay: 3.5s;
  -webkit-animation-delay: 3.5s;
}
.animation-stage .animation-slide-3 .animation-1 .scale-1 {
  animation-delay: 1s;
  -webkit-animation-delay: 1s;
  left: 21vw;
  top: 150px;
}
@media (max-width: 1366px) {
  .animation-stage .animation-slide-3 .animation-1 .scale-1 {
    top: 10px;
  }
}
.animation-stage .animation-slide-3 .animation-1 .scale-1 .start-text-1 {
  font-size: 130px;
}
@media (max-width: 1366px) {
  .animation-stage .animation-slide-3 .animation-1 .scale-1 .start-text-1 {
    font-size: 8vw;
  }
}
.animation-stage .animation-slide-3 .animation-1 .start-text-2 {
  left: 16vw;
  top: 255px;
  font-size: 110px;
}
@media (max-width: 1366px) {
  .animation-stage .animation-slide-3 .animation-1 .start-text-2 {
    font-size: 8vw;
    top: 130px;
  }
}
@media (max-width: 991px) {
  .animation-stage .animation-slide-3 .animation-1 .start-text-2 {
    top: 100px;
  }
}
@media (max-width: 767px) {
  .animation-stage .animation-slide-3 .animation-1 .start-text-2 {
    top: 70px;
  }
}
@media (max-width: 480px) {
  .animation-stage .animation-slide-3 .animation-1 .start-text-2 {
    top: 60px;
  }
}
.animation-stage .animation-slide-3 .animation-1 .start-text-2 .fade-2 {
  animation-delay: 1.5s;
  -webkit-animation-delay: 1.5s;
}
.animation-stage .animation-slide-3 .animation-2 .scale-1 {
  top: 260px;
  left: 47vw;
}
@media (max-width: 1366px) {
  .animation-stage .animation-slide-3 .animation-2 .scale-1 {
    top: 210px;
    left: 8vw;
  }
}
@media (max-width: 991px) {
  .animation-stage .animation-slide-3 .animation-2 .scale-1 {
    top: 150px;
  }
}
.animation-stage .animation-slide-3 .animation-2 .start-text-2 {
  top: 345px;
}
@media (max-width: 1366px) {
  .animation-stage .animation-slide-3 .animation-2 .start-text-2 {
    top: 290px;
    left: 5vw;
  }
}
@media (max-width: 991px) {
  .animation-stage .animation-slide-3 .animation-2 .start-text-2 {
    top: 200px;
  }
}
@media (max-width: 480px) {
  .animation-stage .animation-slide-3 .animation-2 .start-text-2 {
    top: 185px;
  }
}
.animation-stage .animation-slide-3 .animation-2 .scale-1,
.animation-stage .animation-slide-3 .animation-2 .start-text-1.fade-1 {
  animation-delay: 4.5s;
  -webkit-animation-delay: 4.5s;
}
.animation-stage .animation-slide-3 .animation-2 .start-text-2 .fade-2 {
  animation-delay: 7.4s;
  -webkit-animation-delay: 7.4s;
}
.animation-stage .animation-slide-3 .animation-2 .resize-wide {
  animation-delay: 8.8s;
  -webkit-animation-delay: 8.8s;
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
}
.animation-stage .animation-slide-3 .animation-2 .fade-2 {
  display: flex;
}
.animation-stage .animation-slide-3 .animation-2 .fade-2 strong {
  display: block;
  padding-right: 1.875rem;
}
@media (max-width: 991px) {
  .animation-stage .animation-slide-3 .animation-2 .fade-2 strong {
    padding-right: 0.9375rem;
  }
}
.animation-stage .animation-slide-3 .animation-2 .fade-3 {
  opacity: 0;
  animation-delay: 5.5s;
  animation-name: fade-in-text-2;
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.animation-stage .animation-slide-4 .animation-1 {
  animation: none;
}
.animation-stage .animation-slide-4 .animation-1 .start-text-2 {
  top: 140px;
  left: 10.4vw;
}
@media (max-width: 1300px) {
  .animation-stage .animation-slide-4 .animation-1 .start-text-2 {
    top: 50px;
  }
}
@media (max-width: 991px) {
  .animation-stage .animation-slide-4 .animation-1 .start-text-2 {
    top: 11vw;
  }
}
@media (max-width: 1300px) {
  .animation-stage .animation-slide-4 .animation-1 .scale-1 {
    top: 0;
    left: 9vw;
  }
}
@media (max-width: 991px) {
  .animation-stage .animation-slide-4 .animation-1 .start-text-1 {
    font-size: 10vw;
  }
}
@media (max-width: 991px) {
  .animation-stage .animation-slide-4 .animation-1 .start-text-2 {
    font-size: 8vw;
  }
}
.animation-stage .play .typewriter-1 {
  overflow: hidden;
  display: inline-block;
  white-space: nowrap;
  width: 0%;
  animation: typing var(--duration) steps(var(--chars), end) var(--delay) forwards;
}
.animation-stage .play .typewriter-2 {
  overflow: hidden;
  display: inline-block;
  white-space: nowrap;
  width: 0%;
  animation: typing var(--duration) steps(var(--chars), end) var(--delay) forwards;
}
.animation-stage .play .typewriter-3 {
  overflow: hidden;
  display: inline-block;
  white-space: nowrap;
  width: 0%;
  animation: typing var(--duration) steps(var(--chars), end) var(--delay) forwards;
}
.animation-stage .play .typewriter-4 {
  overflow: hidden;
  display: inline-block;
  white-space: nowrap;
  width: 0%;
  animation: typing var(--duration) steps(var(--chars), end) var(--delay) forwards;
}
.animation-stage .play .typewriter-5 {
  overflow: hidden;
  display: inline-block;
  white-space: nowrap;
  width: 0%;
  animation: typing var(--duration) steps(var(--chars), end) var(--delay) forwards;
}
.animation-stage .play .typewriter-6 {
  overflow: hidden;
  display: inline-block;
  white-space: nowrap;
  width: 0%;
  animation: typing var(--duration) steps(var(--chars), end) var(--delay) forwards;
}
.animation-stage .play .typewriter-7 {
  overflow: hidden;
  display: inline-block;
  white-space: nowrap;
  width: 0%;
  animation: typing var(--duration) steps(var(--chars), end) var(--delay) forwards;
}
.animation-stage .play .typewriter-8 {
  overflow: hidden;
  display: inline-block;
  white-space: nowrap;
  width: 0%;
  animation: typing var(--duration) steps(var(--chars), end) var(--delay) forwards;
}
.animation-stage .play .typewriter-9 {
  overflow: hidden;
  display: inline-block;
  white-space: nowrap;
  width: 0%;
  animation: typing var(--duration) steps(var(--chars), end) var(--delay) forwards;
}
.animation-stage .play .typewriter-10 {
  overflow: hidden;
  display: inline-block;
  white-space: nowrap;
  width: 0%;
  animation: typing var(--duration) steps(var(--chars), end) var(--delay) forwards;
}
@keyframes typing {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}

/* END OF ANIMATION STAGE */
.success-story-container {
  position: absolute;
  top: 31.25rem;
  z-index: 10;
  right: 10%;
  /*display:flex;
  justify-content: flex-end;*/
  transition: 700ms all ease-in-out;
  opacity: 0;
}
.success-story-container.inactive {
  opacity: 0;
  top: 31.25rem;
  visibility: hidden;
  z-index: 10;
}
.success-story-container.active {
  opacity: 1;
  bottom: inherit;
  top: 5rem;
  visibility: visible;
  z-index: 200;
}
@media (max-width: 1366px) {
  .success-story-container.active {
    top: 0;
  }
}
@media (max-width: 576px) {
  .success-story-container.active {
    z-index: 2000;
  }
}
.success-story-container.default {
  opacity: 1;
  display: block;
  top: 5rem;
  transition: 700ms all ease-in-out;
  z-index: 200;
}
.success-story-container.default.inactive {
  opacity: 0;
  top: 31.25rem;
}
.success-story-container.default.inactive .readmore,
.success-story-container.default.inactive .readmore:before,
.success-story-container.default.inactive .date-category a,
.success-story-container.default.inactive .bx-viewport .slider {
  transition: unset !important;
}
.success-story-container.newsblock {
  transition: 700ms all ease-in-out;
  -webkit-animation-name: newsblock-delay;
  animation-name: newsblock-delay;
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  animation-delay: 3.5s;
  -webkit-animation-delay: 3.5s;
  animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-timing-function: ease;
  animation-timing-function: ease;
  opacity: 0;
}
@media (max-width: 991px) {
  .success-story-container.newsblock {
    display: none;
  }
}
@keyframes newsblock-delay {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.success-story-container .close-ssc {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  text-decoration: none;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 0;
}
.success-story-container .success-story-content {
  max-width: 23.125rem;
  width: 100%;
}
.success-story-container .success-story-content .headline-box h1 {
  font-size: 20px;
  margin-top: 0;
  font-weight: 500;
  line-height: 1.3;
  padding-right: 1.25rem;
}
.success-story-container .success-story-content .headline-box h1 span {
  display: block;
  font-size: 1rem;
  color: #8F8F8F;
}
.success-story-container .success-story-content .headline-box .date-category,
.success-story-container .success-story-content .headline-box .field {
  display: block;
  font-size: 0.875rem;
  color: #8F8F8F;
  margin-bottom: 0.9375rem;
}
.success-story-container .success-story-content .headline-box .date-category a,
.success-story-container .success-story-content .headline-box .field a {
  font-weight: bold;
  color: #202020;
  text-decoration: none;
  padding-left: 0.3125rem;
}
.success-story-container .success-story-content .headline-box .date-category a:hover,
.success-story-container .success-story-content .headline-box .field a:hover {
  color: #0CB36E;
}
.success-story-container .success-story-content .headline-box .field {
  margin-bottom: 0;
}
.success-story-container .success-story-content .headline-box .field a {
  font-size: 1rem;
  color: #0CB36E;
}
.success-story-container .success-story-content .headline-box .field a:hover {
  color: #0a9b5f;
}
.success-story-container .success-story-content .headline-box,
.success-story-container .success-story-content .content-box {
  background: #fff;
  box-shadow: 0 0 0.9375rem 0 rgba(0, 0, 0, 0.05);
  border-radius: 0.9375rem;
  margin-bottom: 0.9375rem;
  padding: 1.5625rem;
}
.success-story-container .success-story-content .content-box {
  line-height: 1.7;
}
.success-story-container .success-story-content .content-box .readmore-btn {
  white-space: nowrap;
}
@media (max-width: 1366px) {
  .success-story-container .success-story-content .content-box {
    max-height: 15.625rem;
    overflow-y: auto;
  }
}

.city-stage {
  position: absolute;
  top: 5.875rem;
  left: 0;
  width: 100%;
  display: none;
  background: #fff;
  opacity: 0;
  z-index: 1000;
}
.city-stage.play {
  overflow-y: hidden;
  -webkit-animation-name: fade-in-citystage;
  animation-name: fade-in-citystage;
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-timing-function: ease;
  animation-timing-function: ease;
}
@keyframes fade-in-citystage {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    display: block;
  }
}

.city-outer-wrapper {
  position: relative;
  overflow: hidden;
}
.city-outer-wrapper a.prevmove,
.city-outer-wrapper a.nextmove {
  color: #fff;
  width: 6.5rem;
  height: 6.5rem;
  display: flex;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  z-index: 500;
  background-repeat: no-repeat;
  background-color: #0CB36E;
  border-radius: 6.25rem;
  text-indent: -624.9375rem;
}
@media screen and (max-width: 576px) {
  .city-outer-wrapper a.prevmove,
.city-outer-wrapper a.nextmove {
    width: 4.625rem;
    height: 4.625rem;
  }
}
.city-outer-wrapper a.prevmove:hover,
.city-outer-wrapper a.nextmove:hover {
  box-shadow: 0 0 3.125rem -0.3125rem #2ab36e;
}
.city-outer-wrapper a.prevmove {
  left: -3.125rem;
  background-image: url("assets/img/city-slide-arrow.svg");
  background-position: center right 1.25rem;
}
@media screen and (max-width: 576px) {
  .city-outer-wrapper a.prevmove {
    left: -1.875rem;
  }
}
.city-outer-wrapper a.nextmove {
  right: -3.125rem;
  background-image: url("assets/img/city-slide-arrow-right.svg");
  background-position: center left 1.25rem;
}
@media screen and (max-width: 576px) {
  .city-outer-wrapper a.nextmove {
    right: -1.875rem;
  }
}

.city-slider-wrapper {
  width: 100%;
  height: 82vh;
  overflow-y: hidden;
  overflow-x: hidden;
  position: relative;
  -webkit-overflow-scrolling: touch;
}

.city-slider-inner {
  transition: 0.1ms all ease-in;
  will-change: scroll-position;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: row;
  float: left;
}

.city-slider-repeatable {
  display: block;
  background: url("assets/img/city-green.svg") no-repeat bottom 8px left;
  width: 6317px;
  height: 82vh;
  background-size: 100%;
  position: relative;
  margin-left: -50px;
}
.city-slider-repeatable .bubble-item {
  position: absolute;
  z-index: 100;
  height: 200px;
  width: 250px;
  -webkit-animation: rise-up 1.5s forwards;
  animation: rise-up 1.5s forwards;
}
@-webkit-keyframes rise-up {
  0% {
    height: 0;
    opacity: 0;
  }
  100% {
    height: 200px;
    opacity: 1;
  }
}
.city-slider-repeatable .bubble-item span.text {
  padding: 0 0 3.125rem 0.4375rem;
  display: block;
  border-left: 1px solid #000;
}
.city-slider-repeatable .bubble-item a {
  display: block;
  background: url("assets/img/ico_plus.svg") no-repeat left 0.4375rem center #2486CE;
  border-radius: 6.25rem;
  color: #fff;
  text-decoration: none;
  padding: 0.9375rem;
  position: relative;
  overflow: hidden;
  width: 1.875rem;
  -webkit-transition: all 300ms ease-in-out;
  -moz-transition: all 300ms ease-in-out;
  -o-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
  margin: 0 0 0 -14px;
}
.city-slider-repeatable .bubble-item a:hover {
  width: 8.75rem;
  -webkit-animation: pulse 1.5s infinite;
  animation: pulse 1.5s infinite;
  box-shadow: 0 0 30px rgba(90, 153, 212, 0.95);
}
.city-slider-repeatable .bubble-item a span {
  position: absolute;
  top: 0.3125rem;
  left: 2.125rem;
  font-size: 0.875rem;
}
@-webkit-keyframes pulse {
  0% {
    box-shadow: 0 0 30px rgba(90, 153, 212, 0.95);
  }
  70% {
    box-shadow: 0 0 30px rgba(90, 153, 212, 0);
  }
  100% {
    box-shadow: 0 0 30px rgba(90, 153, 212, 0.95);
  }
}
.city-slider-repeatable .bubble-item strong {
  display: block;
}
.city-slider-repeatable .bubble-item:nth-of-type(1) {
  bottom: 60px;
  left: 449px;
}
.city-slider-repeatable .bubble-item:nth-of-type(2) {
  bottom: 50px;
  left: 835px;
}
.city-slider-repeatable .bubble-item:nth-of-type(3) {
  bottom: 28px;
  left: 1239px;
}
.city-slider-repeatable .bubble-item:nth-of-type(4) {
  bottom: 63px;
  left: 1781px;
}
.city-slider-repeatable .bubble-item:nth-of-type(5) {
  bottom: 60px;
  left: 2428px;
}
.city-slider-repeatable .bubble-item:nth-of-type(6) {
  bottom: 20px;
  left: 3039px;
}
.city-slider-repeatable .bubble-item:nth-of-type(7) {
  bottom: 10px;
  left: 3621px;
}
.city-slider-repeatable .bubble-item:nth-of-type(8) {
  bottom: 20px;
  left: 4121px;
}
.city-slider-repeatable .bubble-item:nth-of-type(9) {
  bottom: 20px;
  left: 4821px;
}
.city-slider-repeatable .bubble-item:nth-of-type(10) {
  bottom: 42px;
  left: 5321px;
}
.city-slider-repeatable .bubble-item:nth-of-type(11) {
  bottom: 20px;
  left: 5858px;
}

.contact-person-container {
  position: absolute;
  left: 10.4vw;
  top: 6.25rem;
  z-index: 100;
}
@media (max-width: 1300px) {
  .contact-person-container {
    top: 0;
  }
}
@media (max-width: 991px) {
  .contact-person-container {
    top: 10px;
  }
}
.contact-person-container span {
  display: block;
  font-size: 70px;
  margin-bottom: 4px;
}
@media (max-width: 991px) {
  .contact-person-container span {
    font-size: 10vw;
  }
}

/*# sourceMappingURL=animation-home.css.map */