@-webkit-keyframes fade-in {
  0% {
      opacity: 0
  }

  100% {
      opacity: 1
  }
}

@keyframes fade-in {
  0% {
      opacity: 0
  }

  100% {
      opacity: 1
  }
}

@-webkit-keyframes fade-in-bottom {
  0% {
      -webkit-transform: translateY(50px);
      transform: translateY(50px);
      opacity: 0
  }

  100% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
      opacity: 1
  }
}

@keyframes fade-in-bottom {
  0% {
      -webkit-transform: translateY(50px);
      transform: translateY(50px);
      opacity: 0
  }

  100% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
      opacity: 1
  }
}

@-webkit-keyframes fade-in-left {
  0% {
      -webkit-transform: translateX(-50px);
      transform: translateX(-50px);
      opacity: 0
  }

  100% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
      opacity: 1
  }
}

@keyframes fade-in-left {
  0% {
      -webkit-transform: translateX(-50px);
      transform: translateX(-50px);
      opacity: 0
  }

  100% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
      opacity: 1
  }
}

@-webkit-keyframes fade-in-right {
  0% {
      -webkit-transform: translateX(50px);
      transform: translateX(50px);
      opacity: 0
  }

  100% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
      opacity: 1
  }
}

@keyframes fade-in-right {
  0% {
      -webkit-transform: translateX(50px);
      transform: translateX(50px);
      opacity: 0
  }

  100% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
      opacity: 1
  }
}

@-webkit-keyframes fade-in-top {
  0% {
      -webkit-transform: translateY(-50px);
      transform: translateY(-50px);
      opacity: 0
  }

  100% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
      opacity: 1
  }
}

@keyframes fade-in-top {
  0% {
      -webkit-transform: translateY(-50px);
      transform: translateY(-50px);
      opacity: 0
  }

  100% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
      opacity: 1
  }
}

@keyframes jump {
  0% {
      transform: translateY(0)
  }

  50% {
      transform: translateY(-20px)
  }

  100% {
      transform: translateY(0)
  }
}


@-webkit-keyframes rotating /* Safari and Chrome */ {
  from {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}


@keyframes menuDropdown {
  0% {
      opacity: .5;
      -webkit-transform: translateY(-10px);
      transform: translateY(-10px);
      pointer-events: none
  }

  100% {
      opacity: 1;
      transform: translateY(0);
      -webkit-transform: translateY(0);
      pointer-events: auto
  }
}

@keyframes menuSlideIn {
  0% {
      opacity: .8;
      transform: translateX(-15px);
      pointer-events: none
  }

  100% {
      opacity: 1;
      transform: translateX(0);
      pointer-events: auto
  }
}

@-webkit-keyframes scale-in-center {
  0% {
      -webkit-transform: scale(.3);
      transform: scale(.3);
      opacity: 1
  }

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

@keyframes scale-in-center {
  0% {
      -webkit-transform: scale(.3);
      transform: scale(.3);
      opacity: 1
  }

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

.observer {
  opacity: 0
}

.fade-in.onViewport {
  -webkit-animation: fade-in 1.2s cubic-bezier(.39,.575,.565,1) both;
  animation: fade-in 1.2s cubic-bezier(.39,.575,.565,1) both
}

.fade-in-top.onViewport {
  opacity: 0;
  -webkit-animation: fade-in-top 0.5s cubic-bezier(.39,.575,.565,1) both;
  animation: fade-in-top 0.5s cubic-bezier(.39,.575,.565,1) both
}

.fade-in-bottom.onViewport {
  opacity: 0;
  -webkit-animation: fade-in-bottom 0.5s cubic-bezier(.39,.575,.565,1) both;
  animation: fade-in-bottom 0.5s cubic-bezier(.39,.575,.565,1) both
}

.fade-in-left.onViewport {
  opacity: 0;
  -webkit-animation: fade-in-left 0.5s cubic-bezier(.39,.575,.565,1) 0.2s both;
  animation: fade-in-left 0.5s cubic-bezier(.39,.575,.565,1) 0.2s both
}

.fade-in-right.onViewport {
  opacity: 0;
  -webkit-animation: fade-in-right 0.5s cubic-bezier(.39,.575,.565,1) 0.2s both;
  animation: fade-in-right 0.5s cubic-bezier(.39,.575,.565,1) 0.2s both
}

.scale-in-center.onViewport {
  -webkit-animation: scale-in-center 0.8s cubic-bezier(.25,.46,.45,.94) both;
  animation: scale-in-center 0.8s cubic-bezier(.25,.46,.45,.94) both
}

.line-effect-left>::after {
  content: "";
  display: block;
  width: 0;
  position: absolute;
  bottom: -2px;
  height: 1px;
  background: var(--base);
  transition: width 0.3s
}

.line-effect-left:hover>a::after,.line-effect-left:hover>div::after {
  width: 100%
}

.line-effect::before {
  content: "";
  background: var(--base);
  height: 1px;
  width: 0%;
  position: absolute;
  left: 50%;
  -webkit-transition: left 0.4s cubic-bezier(.4,0,1,1),width 045s cubic-bezier(.4,0,1,1);
  -o-transition: left 0.4s cubic-bezier(.4,0,1,1),width 0.4s cubic-bezier(.4,0,1,1);
  transition: left 0.4s cubic-bezier(.4,0,1,1),width 0.4s cubic-bezier(.4,0,1,1);
  bottom: 0px;
}

.line-effect:hover::before {
  width: 100%;
  left: 0%
}

@media screen and (max-width: 768px) {
  .line-effect::before {
      /* width:100%; */left:0%;
  }

  .line-effect-left>a::after {
      width: 100%
  }
}