/* Mixins
================================================== */
/* Breakpoints
================================================== */
html {
  scroll-behavior: smooth;
}

.animate-number {
  display: inline-block;
}

/* 1. Add class when in viewport 
============================================ */
.addclass-on-intersect.fadein,
.check-in-viewport.fadein {
  transition: opacity 0.5s;
  opacity: 0;
}
.addclass-on-intersect.fadeinandslideup,
.check-in-viewport.fadeinandslideup {
  transition: opacity 0.5s, transform 0.5s;
  opacity: 0;
}
.addclass-on-intersect.fadeinandslideleft,
.check-in-viewport.fadeinandslideleft {
  transition: opacity 0.5s, transform 0.5s;
  opacity: 0;
}
.addclass-on-intersect.fadeinandslideright,
.check-in-viewport.fadeinandslideright {
  transition: opacity 0.5s, transform 0.5s;
  opacity: 0;
}
.addclass-on-intersect.in-viewport.fadein,
.check-in-viewport.in-viewport.fadein {
  opacity: 1;
}
.addclass-on-intersect.in-viewport.fadeinandslideup,
.check-in-viewport.in-viewport.fadeinandslideup {
  opacity: 1;
}
.addclass-on-intersect.in-viewport.fadeinandslideleft,
.check-in-viewport.in-viewport.fadeinandslideleft {
  opacity: 1;
}
.addclass-on-intersect.in-viewport.fadeinandslideright,
.check-in-viewport.in-viewport.fadeinandslideright {
  opacity: 1;
}

.no-touch .addclass-on-intersect.fadeinandslideup,
.no-touch .check-in-viewport.fadeinandslideup {
  transform: translateY(1em);
}
.no-touch .addclass-on-intersect.fadeinandslideleft,
.no-touch .check-in-viewport.fadeinandslideleft {
  transform: translateX(1em);
}
.no-touch .addclass-on-intersect.fadeinandslideright,
.no-touch .check-in-viewport.fadeinandslideright {
  transform: translateX(-1em);
}
.no-touch .addclass-on-intersect.in-viewport.fadeinandslideup,
.no-touch .check-in-viewport.in-viewport.fadeinandslideup {
  transform: translateY(0);
}
.no-touch .addclass-on-intersect.in-viewport.fadeinandslideleft,
.no-touch .check-in-viewport.in-viewport.fadeinandslideleft {
  transform: translateX(0);
}
.no-touch .addclass-on-intersect.in-viewport.fadeinandslideright,
.no-touch .check-in-viewport.in-viewport.fadeinandslideright {
  transform: translateX(0);
}

.no-js .addclass-on-intersect,
.no-js .check-in-viewport {
  transform: none;
  opacity: 1;
}
@keyframes fadein {
  0%, 50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.fadein {
  animation: fadein 0.5s;
}