:root {
  --fadeAnimationDuration: .8s;
  --boxFadeAnimationDuration: 1s;
  --boxOpacityFadeAnimationDuration: .3s;
  --blogFadeAnimationGap: 400px;
  --fadeAnimationGap: 100px;
  --directionAnimationDuration: 1s;
  --slideInAnimationDuration: 1s;
  --slideInMegaMenuAnimationDuration: .5s;
  --slideInDelay: .2s;
}



.animated.stop-transition {
  transition: none !important;
}

.layout-animation-item {}

/* fade in animation */
.fade-in-animation {
  transition: opacity var(--fadeAnimationDuration) ease-in-out, transform var(--fadeAnimationDuration) cubic-bezier(0.19, 1, 0.22, 1);
  will-change: transform, opacity;
}

.fade-in-animation:not(.animated) {
  opacity: 0;
}

.fade-in-animation.animated {
  opacity: 1;
}

.fade-in-bottom:not(.animated) {
  transform: translateY(var(--fadeAnimationGap));
}

.fade-in-bottom.animated {
  transform: translateY(0px);
}

.fade-in-left:not(.animated) {
  transform: translateX(calc(-1 * var(--fadeAnimationGap)));
}

.fade-in-left.animated {
  transform: translateX(0px);
}


.fade-in-right:not(.animated) {
  transform: translateX(calc(1 * var(--fadeAnimationGap)));
}

.fade-in-right.animated {
  transform: translateX(0px);
}


/* blog fade in animation */
.box-fade-in-animation {
  transition: opacity var(--boxOpacityFadeAnimationDuration) ease-in-out, transform var(--boxFadeAnimationDuration) cubic-bezier(0.19, 1, 0.22, 1);
  will-change: transform, opacity;
}

.box-fade-in-animation:not(.animated) {
  opacity: 0;
}

.box-fade-in-animation.animated {
  opacity: 1;
}

.box-fade-in-bottom:not(.animated) {
  transform: translateY(var(--blogFadeAnimationGap));
}

.box-fade-in-bottom.animated {
  transform: translateY(0px);
}

.box-fade-in-top:not(.animated) {
  transform: translateY(calc(-1 * var(--blogFadeAnimationGap)));
}

.box-fade-in-top.animated {
  transform: translateY(0px);
}

.box-fade-in-left:not(.animated) {
  transform: translateX(calc(-1 * var(--blogFadeAnimationGap)));
}

.box-fade-in-left.animated {
  transform: translateX(0px);
}

.box-fade-in-right:not(.animated) {
  transform: translateX(var(--blogFadeAnimationGap));
}

.box-fade-in-right.animated {
  transform: translateX(0px);
}

/* direction animation */
.direction-animation-item {
  transition: all .3s ease-out;
  overflow: hidden;
  display: block;
}

.direction-animation {
  animation-duration: var(--directionAnimationDuration);
  animation-timing-function: cubic-bezier(.785, .135, .15, .86);
}

.direction-animation-interact.hover .direction-animation-item,
.direction-animation-interact:hover .direction-animation-item {
  transform: scale(1.1);
}

.direction-animation-interact.hover .direction-right-animation,
.direction-animation-interact:hover .direction-right-animation {
  animation-name: direction-right;
}

.direction-animation-interact.hover .direction-left-animation,
.direction-animation-interact:hover .direction-left-animation {
  animation-name: direction-left;
}

@keyframes direction-right {
  0% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(120%);
  }

  51% {
    transform: translateX(-120%);
  }

  100% {
    transform: translateX(0);
  }
}


@keyframes direction-left {
  0% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(-120%);
  }

  51% {
    transform: translateX(120%);
  }

  100% {
    transform: translateX(0);
  }
}

/* image slide animation */
.slide-in-animation {
  transition: clip-path var(--slideInAnimationDuration) cubic-bezier(0.19, 1, 0.22, 1);
  will-change: clip-path;
}

.slide-in-right:not(.animated) {
  clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
}

.slide-in-right.animated {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}


.slide-in-left:not(.animated) {
  clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
}

.slide-in-left.animated {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.slide-in-delay {
  transition-delay: var(--slideInDelay);
}

/* scroll down animation */

.scroll-down-animation {
  position: relative;
}

.scroll-down-animation .main-scroll,
.scroll-down-animation:before,
.scroll-down-animation:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  background-size: 12px auto;
  background-position: center;
  background-repeat: no-repeat !important;
}


.scroll-down-animation.animated .main-scroll {
  -webkit-animation: pulse 1.5s 0s infinite normal ease forwards;
  -moz-animation: pulse 1.5s 0s infinite normal ease forwards;
  -o-animation: pulse 1.5s 0s infinite normal ease forwards;
  animation: pulse 1.5s 0s infinite normal ease forwards;
  background-image: url('./tksrealestate/images/scroll-down-middle.svg');
  background-size: 25px auto;
}

.scroll-down-animation.animated:before {
  background-image: url('./tksrealestate/images/scroll-down-top.svg');
  -webkit-animation: pulse 1.5s 0.25s infinite normal ease forwards;
  -moz-animation: pulse 1.5s 0.25s infinite normal ease forwards;
  -o-animation: pulse 1.5s 0.25s infinite normal ease forwards;
  animation: pulse 1.5s 0.25s infinite normal ease forwards;
}

.scroll-down-animation.animated:after {
  background-image: url('./tksrealestate/images/scroll-down-bottom.svg');
  -webkit-animation: pulse 1.5s 0.5s infinite normal ease forwards;
  -moz-animation: pulse 1.5s 0.5s infinite normal ease forwards;
  -o-animation: pulse 1.5s 0.5s infinite normal ease forwards;
  animation: pulse 1.5s 0.5s infinite normal ease forwards;
}

@keyframes pulse {
  0% {
    opacity: 0;
    background-position: center 0%;
    background-size: 0 auto;
  }

  10% {
    opacity: 0;
  }

  50% {
    opacity: 1;
    background-size: 35px auto;
  }

  90% {
    opacity: 0;
  }

  100% {
    opacity: 0;
    background-position: center 80%;
    background-size: 0 auto;
  }
}


/* image slide animation mega menu */
.slide-in-mega-menu-animation {
  transition: clip-path var(--slideInMegaMenuAnimationDuration) cubic-bezier(0.19, 1, 0.2, 1);
  will-change: clip-path;
}

.slide-in-right:not(.animated) {
  clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
}

.slide-in-right.animated {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}


.slide-in-left:not(.animated) {
  clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
}

.slide-in-left.animated {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}