.animation {
  opacity: 0;
  visibility: hidden;
}

.slidein-header {
  transform: translateY(-170px);
}

.slidein-header-delay {
  transition-delay: 0.2s;
  transform: translateY(-170px);
}

.displayed-from-left {
  animation: wipe-sentence 1.2s forwards;
  animation-delay: 1.5s;
}

.displayed-from-left-2 {
  animation: wipe-sentence 1.2s forwards;
  animation-delay: 1.7s;
}

.displayed-from-left-4 {
  animation: wipe-sentence 1.2s forwards;
  animation-delay: 1.9s;
}

.displayed-from-left-6 {
  animation: wipe-sentence 1.2s forwards;
  animation-delay: 2.1s;
}

.displayed-from-left-8 {
  animation: wipe-sentence 1.2s forwards;
  animation-delay: 2.3s;
}

.displayed-from-left-10 {
  animation: wipe-sentence 1.2s forwards;
  animation-delay: 2.5s;
}

.displayed-from-left-12 {
  animation: wipe-sentence 1.2s forwards;
  animation-delay: 2.7s;
}

@keyframes wipe-sentence {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

.fadein-firstview {
  animation: fadein 0.5s forwards;
  animation-delay: 0.5s;
  opacity: 0;
}

@keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.fadein-firstview-logo {
  animation: fadein-logo 1s forwards;
  animation-delay: 0s;
  opacity: 0;
}

@keyframes fadein-logo {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.fadein-header {
  animation: fadein 1s forwards;
  animation-delay: 0s;
  opacity: 0;
}

@keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.slidein-from-left-firstview {
  animation: slidein-left-firstview 1s forwards;
  animation-delay: 4.2s;
  transform: translateX(-30px);
  opacity: 0;
}

@keyframes slidein-left-firstview {
  0% {
    transform: translateX(-30px);
    opacity: 0;
  }
  100% {
    transform: translateX(0%);
    opacity: 1;
  }
}

.slidein-from-left-firstview-sp {
  animation: slidein-left-firstview-sp 1s forwards;
  animation-delay: 5s;
  transform: translateX(-30px);
  opacity: 0;
}

@keyframes slidein-left-firstview-sp {
  0% {
    transform: translateX(-30px);
    opacity: 0;
  }
  100% {
    transform: translateX(0%);
    opacity: 1;
  }
}

.slidein-from-right-firstview {
  animation: slidein-right-firstview 1s forwards;
  animation-delay: 0.5s;
  transform: translateX(30px);
  opacity: 0;
}

@keyframes slidein-right-firstview {
  0% {
    transform: translateX(30px);
    opacity: 0;
  }
  100% {
    transform: translateX(0%);
    opacity: 1;
  }
}

.fadein {
  transition: 1s forwards;
  transition-delay: 2.4s;
  opacity: 1;
}

.fadein-1 {
  transition: 1s;
  transition-delay: 0.6s;
}

.fadein-2 {
  transition: 1s;
  transition-delay: 0.8s;
}

.fadein-3 {
  transition: 1s;
  transition-delay: 1s;
}

.fadeout-animation {
  opacity: 1;
}

.fadeout {
  transition: 1.5s;
  opacity: 0;
  transition-delay: 2s;
}

.fadeout-load {
  transition: 1.5s;
  opacity: 0;
  visibility: hidden;
}

/* .slidein-from-right {
  transform: translateX(100px);
  transition: 1s;
  transition-delay: 0.3s;
  opacity: 0;
} */

/* .slidein-from-left {
  transform: translateX(-100px);
  transition: 1s;
  transition-delay: 0.3s;
  opacity: 0;
} */

.wipe-center {
  display: block;
  width: fit-content !important;
  clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%);
}

.wipe-from-center {
  animation: wipe-from-center 0.2s forwards;
  animation-delay: 0.2s;
}

@keyframes wipe-from-center {
  0% {
    clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%);
  }

  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}

.wipe-left {
  display: block;
  width: fit-content !important;
  clip-path: polygon(0% 0, 0% 0, 0% 100%, 0% 100%);
}

.wipe-from-left {
  animation: wipe-from-left 1.2s forwards;
  animation-delay: 1.5s;
  /* opacity: 0; */
}

.wipe-from-left-about {
  animation: wipe-from-left 1s forwards;
  animation-delay: 0s;
  opacity: 0;
}

.wipe-from-left::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -20px;
  width: 60px;
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #00aa64 50%, #e74291 50%);
}

.wipe-from-left-1 {
  animation: wipe-from-left 1.2s forwards;
  animation-delay: 1.7s;
  /* opacity: 0; */
}
.wipe-from-left-2 {
  animation: wipe-from-left 1.2s forwards;
  animation-delay: 1.9s;
  /* opacity: 0; */
}

.wipe-from-left-3 {
  animation: wipe-from-left 1.2s forwards;
  animation-delay: 2.1s;
  /* opacity: 0; */
}

.wipe-from-left-4 {
  animation: wipe-from-left 1.2s forwards;
  animation-delay: 2.3s;
  /* opacity: 0; */
}

.wipe-from-left-5 {
  animation: wipe-from-left 1.2s forwards;
  animation-delay: 2.5s;
  /* opacity: 0; */
}

.wipe-from-left-6 {
  animation: wipe-from-left 1.2s forwards;
  animation-delay: 2.7s;
  /* opacity: 0; */
}

.wipe-from-left-7 {
  animation: wipe-from-left 1.2s forwards;
  animation-delay: 3.1s;
  /* opacity: 0; */
}

.wipe-from-left-8 {
  animation: wipe-from-left 1.2s forwards;
  animation-delay: 3.3s;
  /* opacity: 0; */
}

.wipe-from-left-9 {
  animation: wipe-from-left 1.2s forwards;
  animation-delay: 3.5s;
  /* opacity: 0; */
}


@keyframes wipe-from-left {
  0% {
    clip-path: polygon(0% 0, 0% 0, 0% 100%, 0% 100%);
    opacity: 1;
  }

  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    opacity: 1;
  }
}

.scale-animation {
  opacity: 0;
  transform: scale(0.7);
}

.scale-animation:nth-of-type(4) {
  opacity: 0;
  transform: scale(1.2) translateZ(40px);
}

.scale-theme-images-0 {
  animation: scale-theme-animation 0.2s cubic-bezier(0, 0.7, 0, 1) forwards;
  animation-delay: 0.5s;
}

.scale-theme-images-1 {
  animation: scale-theme-animation 0.2s cubic-bezier(0, 0.7, 0, 1) forwards;
  animation-delay: 0.65s;
}

.scale-theme-images-2 {
  animation: scale-theme-animation 0.2s cubic-bezier(0, 0.7, 0, 1) forwards;
  animation-delay: 0.8s;
}

.scale-theme-images-3 {
  animation: scale-themelogo-animation 0.5s forwards;
  animation-delay: 1.5s;
}

.scale-theme-images-4 {
  animation: scale-theme-animation 0.2s cubic-bezier(0, 0.7, 0, 1) forwards;
  animation-delay: 0.95s;
}

.scale-theme-images-5 {
  animation: scale-theme-animation 0.2s cubic-bezier(0, 0.7, 0, 1) forwards;
  animation-delay: 1.1s;
}

.scale-theme-images-6 {
  animation: scale-theme-animation 0.2s cubic-bezier(0, 0.7, 0, 1) forwards;
  animation-delay: 1.35s;
}

@keyframes scale-theme-animation {
  0% {
    transform: scale(0.7);
    opacity: 0;
  }

  70% {
    transform: scale(1.05);
    opacity: 0.7;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes scale-themelogo-animation {
  0% {
    transform: scale(1.2) translateZ(40px);
    opacity: 0;
  }

  25% {
    transform: scale(1) translateZ(20px);
    opacity: 0.3;
  }

  50% {
    transform: scale(1.2) translateZ(-40px);
    opacity: 0.7;
  }

  100% {
    transform: scale(1) translateZ(0);
    opacity: 1;
  }
}

.active {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(0) scale(1) !important;
}

@media screen and (max-width: 500px) {
  /* .slidein-from-right-delay {
    transform: translateX(100%);
    transition: 0.7s;
    transition-delay: 1s;
  }

  .slidein-from-left-delay {
    transform: translateX(-100%);
    transition: 1s;
    transition-delay: 0.7s;
  } */

.slidein-from-right-firstview {
  animation: slidein-right-firstview 1s forwards;
  animation-delay: 2s;
  transform: translateX(-40px);
  opacity: 0;
}

@keyframes slidein-right-firstview {
  0% {
    transform: translateX(-40px);
    opacity: 0;
  }
  100% {
    transform: translateX(0%);
    opacity: 1;
  }
}

.active {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(0) scale(1) !important;
}
}

@media screen and (min-width: 501px) and (max-width: 1000px)  {
  /* .slidein-from-right-delay {
    transform: translateX(100%);
    transition: 1s;
    transition-delay: 0.5s;
  } */

  /* .slidein-from-left-delay {
    transform: translateX(-100%);
    transition: 1s;
    transition-delay: 0.5s;
  } */

  .active {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(0) scale(1) !important;
  }
}

.fadein-news-1 {
  animation: fadein-news 0.5s linear;
  animation-delay: 0.4s;
}

.fadein-news-2 {
  transition: fadein-news 0.5s linear;
  transition-delay: 0.6s;
}

.fadein-news-3 {
  transition: fadein-news 0.5s linear;
  transition-delay: 0.8s;
}

@keyframes fadein-news {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.fadein-home-portfolio-1 {
  transition: 0.3s;
  transition-delay: 0.1s;
}

.fadein-home-portfolio-2 {
  transition: 0.3s;
  transition-delay: 0.2s;
}

.fadein-home-portfolio-3 {
  transition: 0.3s;
  transition-delay: 0.3s;
}

.fadein-home-portfolio-4 {
  transition: 0.3s;
  transition-delay: 0.4s;
}

.fadein-home-portfolio-5 {
  transition: 0.3s;
  transition-delay: 0.5s;
}

.fadein-home-portfolio-6 {
  transition: 0.3s;
  transition-delay: 0.6s;
}

.fadein-home-portfolio-7 {
  transition: 0.3s;
  transition-delay: 0.7s;
}

.fadein-home-portfolio-8 {
  transition: 0.3s;
  transition-delay: 0.8s;
}

.fadein-home-portfolio-9 {
  transition: 0.3s;
  transition-delay: 0.9s;
}

.scale-read-more-news {
  opacity: 0;
  transform: scale(0.6);
}

.scale-read-more-news-animation {
  animation: scale-read-more-news-animation 0.8s forwards;
  animation-delay: 1.5s;
}

@keyframes scale-read-more-news-animation {
  0% {
    transform: scale(0.6);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.scale-read-more {
  opacity: 0;
  transform: scale(0.6);
}

.scale-read-more-animation {
  animation: scale-read-more-animation 0.6s forwards;
  animation-delay: 1.2s;
}

@keyframes scale-read-more-animation {
  0% {
    transform: scale(0.6);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.fadein-portfolio-logo-1 {
  animation: fadein-portfolio-logo 0.8s forwards;
  animation-delay: 0s;
  opacity: 0;
}

.fadein-portfolio-logo-2 {
  animation: fadein-portfolio-logo 0.8s forwards;
  animation-delay: 0.5s;
  opacity: 0;
}

.fadein-portfolio-logo-3 {
  animation: fadein-portfolio-logo 0.8s forwards;
  animation-delay: 1s;
  opacity: 0;
}

.fadein-portfolio-logo-4 {
  animation: fadein-portfolio-logo 0.8s forwards;
  animation-delay: 1.5s;
  opacity: 0;
}

.fadein-portfolio-logo-5 {
  animation: fadein-portfolio-logo 0.8s forwards;
  animation-delay: 2s;
  opacity: 0;
}

.fadein-portfolio-logo-6 {
  animation: fadein-portfolio-logo 0.8s forwards;
  animation-delay: 2.5s;
  opacity: 0;
}

.fadein-portfolio-logo-7 {
  animation: fadein-portfolio-logo 0.8s forwards;
  animation-delay: 3s;
  opacity: 0;
}

.fadein-portfolio-logo-8 {
  animation: fadein-portfolio-logo 0.8s forwards;
  animation-delay: 3.5s;
  opacity: 0;
}

.fadein-portfolio-logo-9 {
  animation: fadein-portfolio-logo 0.8s forwards;
  animation-delay: 4s;
  opacity: 0;
}

.fadein-portfolio-logo-10 {
  animation: fadein-portfolio-logo 0.8s forwards;
  animation-delay: 4.5s;
  opacity: 0;
}

@keyframes fadein-portfolio-logo {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


.scroll-off {
  overflow-y: hidden !important;
}

.scroll-off-1 {
  overflow-y: hidden !important;
}

.top-index {
  z-index: 2;
}

.bottom-index {
  z-index: 1 !important;
}