@charset "UTF-8";
/* Mixins
================================================== */
/* Breakpoints
================================================== */
/*
320px – very small phones (old iPhones, edge cases)

375px – modern iPhone width (very common)

450px – large phones / Pro Max

768px – iPad portrait

1024px – iPad landscape

1280px – common laptop

1440px – large monitors

1920px – full HD (usually max-width, not layout change)









*/
html {
  scroll-behavior: smooth;
}

/* 1. Set the keyframes 
============================================ */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-1em);
  }
  60% {
    transform: translateY(-5em);
  }
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes fadein {
  0%, 50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/* 2. Add it to the class

	Arguments:::

    animation-name: 			the name of the animation;
    animation-duration: 		how long the keyframes will take to go from 0% to 100%;
    animation-timing-function:	the speed from start to end (linier, ease [slow start, then ends fast]  linear, easing OR USE http://cubic-bezier.com/#0,.67,.75,.9;
    animation-delay: 			the delay beofore it animates;
    animation-iteration-count:	the number of times it plays;
    animation-direction:		;
	animation-fill-mode
	animation-play-state




	Example ::

	animation-name: bounce;
	animation-duration: 4s;
	animation-timing-function: ease-out;
	animation-delay: 2s;
	animation-iteration-count: 10;
	animation-direction: alternate;
	animation-fill-mode: forwards;


	Example - play once only (one load, fade in)


	Example - web banner, just use keyframes.  Is the animation is 1 minute, set at 60s,  30s is keyframe: 50%


============================================ */
.bounce {
  animation: bounce 2s linear 4s infinite alternate;
}

.fadein {
  animation: fadein 0.5s;
}

/* Preloader
============================================ */
.preloader-animation {
  display: block;
  border: 5px solid rgba(150, 150, 150, 0.5);
  /* Light grey */
  border-top: 5px solid #000;
  /* Blue */
  border-radius: 100%;
  width: 1em;
  height: 1em;
  animation: rotate 1s linear infinite;
}

/* 1. Add class to animate 
============================================ */
.check-in-viewport .fadeinandslideup, .check-in-viewport.fadeinandslideup-on-point {
  transition: opacity 0.5s, transform 0.5s;
  transform: translateY(3rem);
  opacity: 0;
}
.check-in-viewport.in-viewport .fadeinandslideup, .check-in-viewport.in-viewport.fadeinandslideup-on-point {
  transform: translateY(0);
  opacity: 1;
}

/* Marquee 
============================================ */
@keyframes horizontalslide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
.marquee {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
}

.marquee ul {
  -webkit-animation: horizontalslide 20s linear infinite;
}
.marquee li {
  display: inline-block;
}

.block-heading span {
  transform: translateY(0.1em);
  transition: cubic-bezier(0.015, 0.791, 0.757, 1.024) 0.3s, opacity ease-out 0.3s, transform ease-out 0.3s;
  opacity: 0;
}
.block-heading span:nth-child(2) {
  transition-delay: 0.05s;
}
.block-heading span:nth-child(3) {
  transition-delay: 0.1s;
}
.block-heading span:nth-child(4) {
  transition-delay: 0.15s;
}
.block-heading span:nth-child(5) {
  transition-delay: 0.2s;
}
.block-heading span:nth-child(6) {
  transition-delay: 0.25s;
}
.block-heading span:nth-child(7) {
  transition-delay: 0.3s;
}
.block-heading span:nth-child(8) {
  transition-delay: 0.35s;
}
.block-heading span:nth-child(9) {
  transition-delay: 0.4s;
}
.block-heading span:nth-child(10) {
  transition-delay: 0.45s;
}
.block-heading span:nth-child(11) {
  transition-delay: 0.5s;
}
.block-heading span:nth-child(12) {
  transition-delay: 0.55s;
}
.block-heading span:nth-child(13) {
  transition-delay: 0.6s;
}
.block-heading span:nth-child(14) {
  transition-delay: 0.65s;
}
.block-heading span:nth-child(15) {
  transition-delay: 0.7s;
}
.block-heading span:nth-child(16) {
  transition-delay: 0.75s;
}
.block-heading span:nth-child(17) {
  transition-delay: 0.8s;
}
.block-heading span:nth-child(18) {
  transition-delay: 0.85s;
}
.block-heading span:nth-child(19) {
  transition-delay: 0.9s;
}
.block-heading span:nth-child(20) {
  transition-delay: 0.95s;
}
.block-heading span:nth-child(21) {
  transition-delay: 1s;
}
.block-heading span:nth-child(22) {
  transition-delay: 1.05s;
}
.block-heading span:nth-child(23) {
  transition-delay: 1.1s;
}
.block-heading span:nth-child(24) {
  transition-delay: 1.15s;
}
.block-heading span:nth-child(25) {
  transition-delay: 1.2s;
}
.block-heading span:nth-child(26) {
  transition-delay: 1.25s;
}
.block-heading span:nth-child(27) {
  transition-delay: 1.3s;
}
.block-heading span:nth-child(28) {
  transition-delay: 1.35s;
}
.block-heading span:nth-child(29) {
  transition-delay: 1.4s;
}
.block-heading span:nth-child(30) {
  transition-delay: 1.45s;
}
.block-heading span:nth-child(31) {
  transition-delay: 1.5s;
}
.block-heading span:nth-child(32) {
  transition-delay: 1.55s;
}
.block-heading span:nth-child(33) {
  transition-delay: 1.6s;
}
.block-heading span:nth-child(34) {
  transition-delay: 1.65s;
}
.block-heading span:nth-child(35) {
  transition-delay: 1.7s;
}
.block-heading span:nth-child(36) {
  transition-delay: 1.75s;
}
.block-heading span:nth-child(37) {
  transition-delay: 1.8s;
}
.block-heading span:nth-child(38) {
  transition-delay: 1.85s;
}
.block-heading span:nth-child(39) {
  transition-delay: 1.9s;
}
.block-heading span:nth-child(40) {
  transition-delay: 1.95s;
}
.block-heading span:nth-child(41) {
  transition-delay: 2s;
}
.block-heading span:nth-child(42) {
  transition-delay: 2.05s;
}
.block-heading span:nth-child(43) {
  transition-delay: 2.1s;
}
.block-heading span:nth-child(44) {
  transition-delay: 2.15s;
}
.block-heading span:nth-child(45) {
  transition-delay: 2.2s;
}
.block-heading span:nth-child(46) {
  transition-delay: 2.25s;
}
.block-heading span:nth-child(47) {
  transition-delay: 2.3s;
}
.block-heading span:nth-child(48) {
  transition-delay: 2.35s;
}
.block-heading span:nth-child(49) {
  transition-delay: 2.4s;
}
.block-heading span:nth-child(50) {
  transition-delay: 2.45s;
}
.block-heading span:nth-child(51) {
  transition-delay: 2.5s;
}
.block-heading span:nth-child(52) {
  transition-delay: 2.55s;
}
.block-heading span:nth-child(53) {
  transition-delay: 2.6s;
}
.block-heading span:nth-child(54) {
  transition-delay: 2.65s;
}
.block-heading span:nth-child(55) {
  transition-delay: 2.7s;
}
.block-heading span:nth-child(56) {
  transition-delay: 2.75s;
}
.block-heading span:nth-child(57) {
  transition-delay: 2.8s;
}
.block-heading span:nth-child(58) {
  transition-delay: 2.85s;
}
.block-heading span:nth-child(59) {
  transition-delay: 2.9s;
}
.block-heading span:nth-child(60) {
  transition-delay: 2.95s;
}
.block-heading span:nth-child(61) {
  transition-delay: 3s;
}
.block-heading span:nth-child(62) {
  transition-delay: 3.05s;
}
.block-heading span:nth-child(63) {
  transition-delay: 3.1s;
}
.block-heading span:nth-child(64) {
  transition-delay: 3.15s;
}
.block-heading span:nth-child(65) {
  transition-delay: 3.2s;
}
.block-heading span:nth-child(66) {
  transition-delay: 3.25s;
}
.block-heading span:nth-child(67) {
  transition-delay: 3.3s;
}
.block-heading span:nth-child(68) {
  transition-delay: 3.35s;
}
.block-heading span:nth-child(69) {
  transition-delay: 3.4s;
}
.block-heading span:nth-child(70) {
  transition-delay: 3.45s;
}
.block-heading span:nth-child(71) {
  transition-delay: 3.5s;
}
.block-heading span:nth-child(72) {
  transition-delay: 3.55s;
}
.block-heading span:nth-child(73) {
  transition-delay: 3.6s;
}
.block-heading span:nth-child(74) {
  transition-delay: 3.65s;
}
.block-heading span:nth-child(75) {
  transition-delay: 3.7s;
}
.block-heading span:nth-child(76) {
  transition-delay: 3.75s;
}
.block-heading span:nth-child(77) {
  transition-delay: 3.8s;
}
.block-heading span:nth-child(78) {
  transition-delay: 3.85s;
}
.block-heading span:nth-child(79) {
  transition-delay: 3.9s;
}
.block-heading span:nth-child(80) {
  transition-delay: 3.95s;
}
.block-heading span:nth-child(81) {
  transition-delay: 4s;
}
.block-heading span:nth-child(82) {
  transition-delay: 4.05s;
}
.block-heading span:nth-child(83) {
  transition-delay: 4.1s;
}
.block-heading span:nth-child(84) {
  transition-delay: 4.15s;
}
.block-heading span:nth-child(85) {
  transition-delay: 4.2s;
}
.block-heading span:nth-child(86) {
  transition-delay: 4.25s;
}
.block-heading span:nth-child(87) {
  transition-delay: 4.3s;
}
.block-heading span:nth-child(88) {
  transition-delay: 4.35s;
}
.block-heading span:nth-child(89) {
  transition-delay: 4.4s;
}
.block-heading span:nth-child(90) {
  transition-delay: 4.45s;
}
.block-heading span:nth-child(91) {
  transition-delay: 4.5s;
}
.block-heading span:nth-child(92) {
  transition-delay: 4.55s;
}
.block-heading span:nth-child(93) {
  transition-delay: 4.6s;
}
.block-heading span:nth-child(94) {
  transition-delay: 4.65s;
}
.block-heading span:nth-child(95) {
  transition-delay: 4.7s;
}
.block-heading span:nth-child(96) {
  transition-delay: 4.75s;
}
.block-heading span:nth-child(97) {
  transition-delay: 4.8s;
}
.block-heading span:nth-child(98) {
  transition-delay: 4.85s;
}
.block-heading span:nth-child(99) {
  transition-delay: 4.9s;
}
.block-heading span:nth-child(100) {
  transition-delay: 4.95s;
}

.in-viewport .block-heading span {
  opacity: 1;
  transform: translateY(0em);
}

main {
  transition: ease-in 0.5s;
}

.nextPage main {
  opacity: 0;
}

.animated-intro {
  height: calc(200vh);
}

.animated-intro .content {
  position: sticky;
  top: 10em;
  margin-top: 10em;
}
.animated-intro .content .word {
  display: inline-block;
  opacity: 0.2;
  transition: 0.4s ease;
}
.animated-intro .content .word.active {
  opacity: 1;
}

/* Preloader 
========================================== */
.preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  background-color: #fff;
}
.preloader:before {
  content: "";
  background: url(../../images/s.svg) no-repeat center;
  -ms-background-size: auto 40%;
  background-size: auto 40%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.preloader .slides {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.preloader .slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.preloader .media {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.preloader .media > * {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.preloader .media:after, .preloader .media:before {
  opacity: 0;
  transition: ease-in 0.5s;
}
.preloader .media:before {
  content: "";
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
}
.preloader .media:after {
  content: "";
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
}
.preloader .slides {
  transform: scale(0.25);
  transition: ease-out 0.25s;
}
@media (min-width: 769px) {
  .preloader:before {
    -ms-background-size: auto 70%;
    background-size: auto 70%;
  }
}

.slidein {
  animation: slideIn 0.36s;
  animation-delay: calc(var(--i) * .32s);
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
  animation-play-state: paused;
}

@keyframes slideIn {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(100%);
  }
}
.preloader .slides {
  transform: scale(1);
}

.preloader {
  transition: ease-in 0.25s;
}
.preloader .media:after, .preloader .media:before {
  opacity: 1;
}

html.preloaderon {
  overflow: hidden;
}
html.preloaderon body {
  overflow: hidden;
}
html.preloaderon .preloader .slides {
  transform: scale(0.25);
}
html.preloaderon .preloader .media:after, html.preloaderon .preloader .media:before {
  opacity: 0;
}

html.preloaderplaying .slidein {
  animation-play-state: running;
}

html.preloadergone .preloader {
  opacity: 0;
  pointer-events: none;
}