@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"); /*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 */
html {
  line-height: 1.15; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers (opinionated).
 */
body {
  margin: 0;
}

/**
 * Add the correct display in IE 9-.
 */

aside,
footer,
header,
nav,
section {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in IE.
 */
figcaption,
figure,
main {
  /* 1 */
  display: block;
}

/**
 * Add the correct margin in IE 8.
 */
figure {
  margin: 1em 40px;
}

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

/* Text-level semantics
   ========================================================================== */
/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */
a {
  background-color: transparent; /* 1 */
  -webkit-text-decoration-skip: objects; /* 2 */
}

/**
 * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

/**
 * Add the correct font style in Android 4.3-.
 */

/**
 * Add the correct background and color in IE 9-.
 */

/**
 * Add the correct font size in all browsers.
 */

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

/* Embedded content
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 */

video {
  display: inline-block;
}

/**
 * Add the correct display in iOS 4-7.
 */

/**
 * Remove the border on images inside links in IE 10-.
 */
img {
  border-style: none;
}

/**
 * Hide the overflow in IE.
 */
svg:not(:root) {
  overflow: hidden;
}

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */
button {
  font-family: sans-serif; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button {
  /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button {
  /* 1 */
  text-transform: none;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type=button]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

/**
 * 1. Add the correct display in IE 9-.
 * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

/**
 * Remove the default vertical scrollbar in IE.
 */

/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
 */

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 */

/*
 * Add the correct display in all browsers.
 */

/* Scripting
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 */

/**
 * Add the correct display in IE.
 */
template {
  display: none;
}

/* Hidden
   ========================================================================== */
/**
 * Add the correct display in IE 10-.
 */
[hidden] {
  display: none;
}

/*******************
 Box Sizing
 *******************/
html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

/****************************
 Generic Margins and Paddings
 ****************************/
body,
h1,
ul,
li,
p,
figure {
  margin: 0;
  padding: 0;
}

/*******************
 Forms and buttons
 *******************/

button {
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
}

/* More friendly border */

button {
  border: 1px solid gray;
}

/* Some defaults for one-liner buttons */
button {
  padding: 0;
  border-radius: 0;
  line-height: 1;
  background-color: transparent;
}

button * {
  pointer-events: none;
}

/***********************************
 Easy responsive for media elements
 ***********************************/
img,
svg,
video {
  display: block;
  max-width: 100%;
}

/*******************
 Useful table styles
 *******************/

/*******************
 The hidden attribute
 *******************/
[hidden] {
  display: none !important;
}

/*******************
 Noscript
 *******************/

/*******************
 Focus
 *******************/

/*******************
 Details
 *******************/

html {
  color: var(--clr-primary-100);
  font-size: 10px;
}
@media (min-width: 72rem) {
  html {
    font-size: 12px;
  }
}

:root {
  --padding: 1.4rem;
  --gutter: 0;
  --sp-none: 0;
  --sp-auto: auto;
  --sp-xs: 0.5rem;
  --sp-sm: 1rem;
  --sp-md: 2rem;
  --sp-lg: 4rem;
  --sp-xl: 8rem;
  --sp-xxl: 16rem;
  --fs-100: 1.4rem;
  --fs-200: 1.6rem;
  --fs-300: 1.8rem;
  --fs-400: 2.2rem;
  --fs-500: 2.8rem;
  --fs-600: 3.8rem;
  --bp-xxs: 0rem;
  --bp-xs: 18rem;
  --bp-sm: 36rem;
  --bp-md: 72rem;
  --bp-lg: 108rem;
  --bp-xl: 144rem;
  --clr-primary-100: hsl(0, 0%, 0%);
  --clr-primary-200: hsl(0, 0%, 20%);
  --clr-primary-300: hsl(0, 0%, 40%);
  --clr-primary-400: hsl(0, 0%, 60%);
  --clr-primary-500: hsl(0, 0%, 80%);
  --clr-secondary-100: hsl(241, 100%, 25%);
  --clr-secondary-200: hsl(241, 100%, 20%);
  --clr-secondary-300: hsl(241, 100%, 15%);
  --clr-secondary-400: hsl(241, 100%, 10%);
  --clr-secondary-500: hsl(241, 100%, 5%);
  --clr-third-100: hsl(221, 100%, 95%);
  --clr-third-200: hsl(221, 100%, 85%);
  --clr-third-300: hsl(221, 100%, 75%);
  --clr-third-400: hsl(221, 100%, 65%);
  --clr-third-500: hsl(221, 100%, 55%);
  --clr-light-100: hsl(0, 0%, 100%);
  --clr-light-200: hsl(0, 0%, 92%);
  --clr-light-300: hsl(0, 0%, 84%);
  --clr-light-400: hsl(0, 0%, 76%);
  --clr-light-500: hsl(0, 0%, 62%);
}
@media (min-width: 72rem) {
  :root {
    --padding: 2rem;
    --gutter: 4rem;
  }
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: "Inter", sans-serif;
  font-size: var(--fs-100);
  background: linear-gradient(90deg, var(--clr-light-100) 0%, var(--clr-light-200) 64.58%, var(--clr-primary-500) 100%);
}
body:before {
  display: none;
  visibility: hidden;
}
@media (min-width: 0rem) {
  body:before {
    content: "xxs";
  }
}
body:before {
  display: none;
  visibility: hidden;
}
@media (min-width: 18rem) {
  body:before {
    content: "xs";
  }
}
body:before {
  display: none;
  visibility: hidden;
}
@media (min-width: 36rem) {
  body:before {
    content: "sm";
  }
}
body:before {
  display: none;
  visibility: hidden;
}
@media (min-width: 72rem) {
  body:before {
    content: "md";
  }
}
body:before {
  display: none;
  visibility: hidden;
}
@media (min-width: 108rem) {
  body:before {
    content: "lg";
  }
}
body:before {
  display: none;
  visibility: hidden;
}
@media (min-width: 144rem) {
  body:before {
    content: "xl";
  }
}

main {
  position: relative;
  z-index: 2;
  transition: opacity cubic-bezier(0.33, 1, 0.68, 1) 0.8s, transform cubic-bezier(0.33, 1, 0.68, 1) 0.8s;
}

a {
  text-decoration: none;
}

ul {
  list-style: none;
}

@media (min-width: 72rem) {
  aside {
    position: sticky;
    top: var(--sp-xl);
  }
}

figcaption {
  font-weight: 700;
  max-width: auto;
}
@media (min-width: 72rem) {
  figcaption {
    max-width: 32ch;
  }
}

h1 {
  font-weight: 600;
}

h1 {
  color: var(--clr-secondary-100);
  margin-bottom: var(--sp-sm);
}

.text--centered {
  text-align: center;
}

.text--big {
  font-size: var(--fs-300);
}

.home__hero {
  position: sticky;
  top: 0;
}
.home__hero__wrapper {
  position: relative;
  margin-bottom: -100vh;
  z-index: 1;
}

.home__hero__video {
  width: 100%;
  height: 100vh;
  object-fit: cover;
}

.arrow--down {
  cursor: pointer;
  position: absolute;
  z-index: 5000;
  top: 68vh;
  left: 50vw;
  transform: translate3d(-50%, -50%, 0);
  animation: aniArrow01 1.2s cubic-bezier(0.33, 1, 0.68, 1) infinite alternate;
}
@media (min-width: 72rem) {
  .arrow--down {
    width: 4rem;
    height: 4rem;
  }
}
@media (min-width: 108rem) {
  .arrow--down {
    width: 6rem;
    height: 6rem;
  }
}
.arrow--down circle {
  stroke-dasharray: 95;
  stroke-dashoffset: 95;
  animation: strokeAnim02 0.8s cubic-bezier(0.33, 1, 0.68, 1);
}
.arrow--down:hover circle {
  stroke-dashoffset: 0;
  animation: strokeAnim01 0.8s cubic-bezier(0.33, 1, 0.68, 1);
}

.navbar {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: auto;
  z-index: 4000;
  font-size: var(--fs-200);
  min-height: var(--sp-lg);
}
.navbar--mobile {
  position: fixed;
  top: auto;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3000;
  background-color: var(--clr-light-100);
  font-size: var(--fs-300);
  filter: drop-shadow(0 1rem 2rem var(--clr-light-300));
}
.navbar--mobile__wrapper {
  display: block;
}
@media (min-width: 72rem) {
  .navbar--mobile__wrapper {
    display: none;
  }
}

.navbar--mobile__menu {
  font-size: var(--fs-400);
}
.navbar--mobile__menu__wrapper {
  font-weight: 600;
  position: fixed;
  top: 100vh;
  left: 0;
  right: 0;
  width: 100%;
  height: 100vh;
  z-index: 2000;
  background-color: var(--clr-light-100);
}

.navbar--mobile__menu__item {
  overflow: hidden;
}

.navbar--mobile__menu__link {
  color: var(--clr-secondary-100);
  display: inline-block;
  position: relative;
  top: 3rem;
}

.navbar--mobile__social {
  font-size: var(--fs-100);
}
.navbar--mobile__social__item {
  padding: var(--sp-xs) 0;
  overflow: hidden;
}

.navbar--mobile__social__link {
  color: var(--clr-secondary-100);
  display: inline-block;
  position: relative;
  top: 3rem;
}

.navbar svg {
  min-height: var(--sp-md);
  max-height: var(--sp-lg);
  fill: var(--clr-secondary-100);
  transition: fill 1s cubic-bezier(0.33, 1, 0.68, 1);
}
@media (min-width: 72rem) {
  .navbar .logo__mono {
    position: relative;
    top: 0;
    left: 0;
    transform: scale(1);
    transition: transform cubic-bezier(0.33, 1, 0.68, 1) 0.6s, left cubic-bezier(0.33, 1, 0.68, 1) 0.6s, top cubic-bezier(0.33, 1, 0.68, 1) 0.6s;
  }
}
.navbar [data-nav=hidden] {
  transition: transform cubic-bezier(0.33, 1, 0.68, 1) 0.8s;
}
@media (min-width: 72rem) {
  .navbar__home svg {
    fill: var(--clr-light-100);
  }
  .navbar__home .logo__mono {
    position: fixed;
    transform: scale(6);
    top: 44vh;
    left: 50vw;
  }
  .navbar__home [data-nav=hidden] {
    transform: translate3d(0, -50vh, 0);
  }
}

[data-mobile-nav=trigger] {
  overflow: hidden;
  width: 10rem;
}
[data-mobile-nav=trigger] .button__content {
  display: flex;
  flex-direction: column;
  transition: transform cubic-bezier(0.33, 1, 0.68, 1) 0.4s;
}
[data-mobile-nav=trigger] .button__content:after {
  content: "Fermer";
  position: absolute;
  left: 46%;
  margin-left: -34%;
  top: 3rem;
}

.main__section {
  overflow: hidden;
  position: relative;
  z-index: 2;
  transition: opacity cubic-bezier(0.33, 1, 0.68, 1) 0.6s;
  background: linear-gradient(90deg, var(--clr-light-100) 0%, var(--clr-light-200) 64.58%, var(--clr-primary-500) 100%);
}
@media (max-width: 72rem) {
  .main__section {
    padding: 0 var(--sp-sm);
  }
}

.footer {
  padding: var(--sp-xl) 0;
  overflow: hidden;
  position: sticky;
  bottom: 0;
  z-index: 1;
  background: linear-gradient(90deg, var(--clr-light-100) 0%, var(--clr-light-200) 64.58%, var(--clr-primary-500) 100%);
}
@media (min-width: 72rem) {
  .footer {
    padding-bottom: var(--sp-md);
  }
}
.footer svg {
  min-height: var(--sp-lg);
  max-height: var(--sp-xl);
  fill: var(--clr-secondary-100);
}
.footer a {
  color: var(--clr-secondary-100);
}
.footer li {
  margin-bottom: var(--sp-sm);
}
.footer__wrapper {
  position: relative;
  margin-top: -100vh;
}
.block-section {
  font-size: var(--fs-300);
  line-height: var(--fs-400);
}
.block-section h1 {
  color: var(--clr-secondary-100);
  margin-bottom: var(--sp-sm);
  font-size: var(--fs-100);
  margin-bottom: var(--sp-sm);
  margin-top: 0;
}
@media (min-width: 72rem) {
  .block-section h1 {
    margin-bottom: var(--sp-xxl);
  }
}
.block-section h2 {
  color: var(--clr-secondary-100);
  margin-bottom: var(--sp-sm);
  font-size: var(--fs-300);
  margin-top: var(--sp-md);
}
@media (min-width: 72rem) {
  .block-section h2 {
    margin-top: var(--sp-lg);
  }
}
.block-section ul {
  padding-left: var(--sp-lg);
}
.block-section ul li {
  position: relative;
  margin: var(--sp-xs) 0;
}
.block-section ul li:before {
  content: ">";
  position: absolute;
  top: 0;
  left: calc(var(--sp-lg) / 1.6 * -1);
}
.block-section ul ul li:before {
  content: "-";
  position: absolute;
  top: 0;
  left: calc(var(--sp-lg) / 1.6 * -1);
}

.block-type-link {
  margin: var(--sp-sm) 0;
}
.block-type-text a, .block-type-list a {
  color: var(--clr-primary-100);
  text-decoration: underline;
  position: relative;
}
@media (min-width: 72rem) {
  .block-type-text a, .block-type-list a {
    text-decoration: none;
  }
  .block-type-text a::after, .block-type-list a::after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: var(--clr-primary-100);
    transform: scaleX(1);
    transform-origin: left;
    transition: transform 0.3s cubic-bezier(0.33, 1, 0.68, 1);
  }
  .block-type-text a:hover::after, .block-type-text a:focus-within::after, .block-type-list a:hover::after, .block-type-list a:focus-within::after {
    transform: scaleX(0);
    transform-origin: right;
  }
}
button {
  cursor: pointer;
  border: none;
}

.button {
  font-weight: 600;
  border-radius: 2rem;
  text-decoration: none;
  padding: var(--sp-xs) var(--sp-sm);
  position: relative;
  overflow: hidden;
  transition: background-color cubic-bezier(0.33, 1, 0.68, 1) 0.4s, padding cubic-bezier(0.33, 1, 0.68, 1) 0.6s;
  background-color: var(--clr-light-100);
  border: 1px solid var(--clr-secondary-100);
}
@media (min-width: 72rem) {
  .button {
    padding: var(--sp-xs) var(--sp-sm);
  }
  .button__content:before {
    content: "";
    -webkit-mask: url(../icons/arrow--right.svg) no-repeat 50% 50%;
    mask: url(../icons/arrow--right.svg) no-repeat 50% 50%;
    -webkit-mask-size: cover;
    mask-size: cover;
    background-color: var(--clr-light-100);
    display: block;
    position: absolute;
    width: 2.2rem;
    height: 2.2rem;
    top: -0.1rem;
    right: auto;
    bottom: 0;
    left: 1rem;
    margin: var(--sp-xs) 0;
    opacity: 0;
    transition: opacity cubic-bezier(0.33, 1, 0.68, 1) 0.3s;
  }
  .button:hover {
    padding-left: var(--sp-lg);
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }
  .button:hover .button__content:before {
    opacity: 1;
  }
}
.button * {
  color: var(--clr-primary-100);
  transition: color cubic-bezier(0.33, 1, 0.68, 1) 0.2s;
  text-decoration: none;
}
@media (min-width: 72rem) {
  .button:hover {
    background-color: var(--clr-secondary-100);
    border-color: var(--clr-secondary-100);
    text-decoration: none;
  }
  .button:hover * {
    color: var(--clr-light-100);
  }
}
.button--reverse {
  background-color: var(--clr-secondary-100);
  border: 1px solid var(--clr-secondary-100);
}
.button--reverse * {
  color: var(--clr-light-100);
  transition: color cubic-bezier(0.33, 1, 0.68, 1) 0.2s;
  text-decoration: none;
}
@media (min-width: 72rem) {
  .button--reverse:hover {
    background-color: var(--clr-secondary-300);
    border-color: var(--clr-secondary-300);
    text-decoration: none;
  }
  .button--reverse:hover * {
    color: var(--clr-light-100);
  }
}
.button--active {
  padding-left: var(--sp-lg);
}
.button--active .button__content:before {
  opacity: 1;
  background-color: var(--clr-primary-100);
}
.button--active:hover .button__content:before {
  background-color: var(--clr-light-100);
}

.carousel__wrapper {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.carousel__item {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity cubic-bezier(0.33, 1, 0.68, 1) 2s;
  transition-delay: 2s;
}
.carousel__item .image__container {
  height: 100%;
  transform: translate3d(0, 110vw, 0);
  transition: transform 0s cubic-bezier(0.33, 1, 0.68, 1);
  transition-delay: 2s;
}
.carousel__item.visible {
  opacity: 1;
  transition-delay: 0s;
}
.carousel__item.visible .image__container {
  transform: translate3d(0, 0vw, 0);
  transition-delay: 0s;
}

.link {
  cursor: pointer;
  width: fit-content;
  color: var(--clr-secondary-100);
  font-weight: 600;
  font-size: var(--fs-100);
}
.link * {
  cursor: pointer;
}
.link svg {
  width: 2rem;
  height: 2rem;
  margin: 0 var(--sp-xs);
}
@media (min-width: 72rem) {
  .link svg {
    margin: 0;
    transition: transform 0.8s cubic-bezier(0.33, 1, 0.68, 1);
  }
  .link svg circle {
    transition: stroke-dashoffset 0.4s cubic-bezier(0.33, 1, 0.68, 1);
    stroke-dasharray: 95;
    stroke-dashoffset: 95;
  }
  .link:hover svg {
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }
  .link:hover svg circle {
    stroke-dashoffset: 0;
  }
  .link--next:hover svg {
    transform: translate3d(var(--sp-xs), 0, 0);
  }
  .link--prev:hover svg {
    transform: translate3d(calc(-1 * var(--sp-xs)), 0, 0);
  }
}

p a {
  color: var(--clr-primary-100);
  text-decoration: underline;
  position: relative;
}
@media (min-width: 72rem) {
  p a {
    text-decoration: none;
  }
  p a::after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: var(--clr-primary-100);
    transform: scaleX(1);
    transform-origin: left;
    transition: transform 0.3s cubic-bezier(0.33, 1, 0.68, 1);
  }
  p a:hover::after, p a:focus-within::after {
    transform: scaleX(0);
    transform-origin: right;
  }
}

.link--footer {
  position: relative;
  transition: padding 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@media (min-width: 72rem) {
  .link--footer:before {
    content: "";
    -webkit-mask: url(../icons/arrow--right.svg) no-repeat 50% 50%;
    mask: url(../icons/arrow--right.svg) no-repeat 50% 50%;
    -webkit-mask-size: cover;
    mask-size: cover;
    background-color: var(--clr-secondary-100);
    display: block;
    position: absolute;
    width: 1.6rem;
    height: 1.6rem;
    top: 0;
    right: auto;
    bottom: 0;
    left: -2.2rem;
    margin: 0 0;
    opacity: 0;
    transition: opacity cubic-bezier(0.33, 1, 0.68, 1) 0.2s, transform cubic-bezier(0.33, 1, 0.68, 1) 0.6s;
  }
  .link--footer:hover {
    padding-left: var(--sp-md);
  }
  .link--footer:hover:before {
    opacity: 1;
    transform: translate3d(var(--sp-md), 0, 0);
  }
}

.transition__wrapper {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
}

.transition__items {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  z-index: 1;
  margin: 0 auto;
}
.transition__items .transition__title {
  color: var(--clr-light-100);
  font-size: var(--fs-400);
}
.transition__items .transition__logo {
  opacity: 0;
  transform: translateY(80%) scale(0);
  will-change: opacity, transform;
  fill: var(--clr-light-100);
  width: var(--sp-xxl);
  height: var(--sp-xxl);
}

.transition__background {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translateY(100vh);
}
.transition__background--first {
  background-color: var(--clr-light-100);
}
.transition__background--second {
  background-color: var(--clr-secondary-100);
}

.image {
  -o-object-fit: cover;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s linear;
}
.image.loaded {
  opacity: 1;
}
.image__container {
  position: relative;
  overflow: hidden;
}

.image__placeholder {
  position: relative;
  width: 100%;
  opacity: 1;
  transition: opacity linear 0.6s;
}
.image__placeholder.loaded {
  opacity: 0;
}

@keyframes aniArrow01 {
  0% {
    transform: translateY(1rem);
  }
  100% {
    transform: translateY(-1rem);
  }
}
@keyframes aniArrow02 {
  0% {
    transform: translateX(45px);
  }
  100% {
    transform: translateX(-44px);
  }
}
@keyframes strokeAnim01 {
  from {
    stroke-dashoffset: 95;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes strokeAnim02 {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: -95;
  }
}
.container {
  width: 100%;
  max-width: var(--bp-lg);
  margin: 0 auto;
}
.container--large {
  max-width: var(--bp-xl);
}
.container__row {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
}
@media (min-width: 0rem) {
  .container__col-xxs-offset-0 {
    margin-left: 0;
  }
  .container__col-xxs-8 {
    flex-basis: 88.8888888889%;
    padding-left: calc(var(--gutter) / 2);
    padding-right: calc(var(--gutter) / 2);
  }
}
@media (min-width: 18rem) {
  .container__col-xs-offset-0 {
    margin-left: 0;
  }
  .container__col-xs-4 {
    flex-basis: 44.4444444444%;
    padding-left: calc(var(--gutter) / 2);
    padding-right: calc(var(--gutter) / 2);
  }
  .container__col-xs-5 {
    flex-basis: 55.5555555556%;
    padding-left: calc(var(--gutter) / 2);
    padding-right: calc(var(--gutter) / 2);
  }
  .container__col-xs-9 {
    flex-basis: 100%;
    padding-left: calc(var(--gutter) / 2);
    padding-right: calc(var(--gutter) / 2);
  }
}
@media (min-width: 72rem) {
  .container__col-md-1 {
    flex-basis: 11.1111111111%;
    padding-left: calc(var(--gutter) / 2);
    padding-right: calc(var(--gutter) / 2);
  }
  .container__col-md-or-1 {
    margin-right: 11.1111111111%;
  }
  .container__col-md-2 {
    flex-basis: 22.2222222222%;
    padding-left: calc(var(--gutter) / 2);
    padding-right: calc(var(--gutter) / 2);
  }
  .container__col-md-3 {
    flex-basis: 33.3333333333%;
    padding-left: calc(var(--gutter) / 2);
    padding-right: calc(var(--gutter) / 2);
  }
  .container__col-md-ol-3 {
    margin-left: 33.3333333333%;
  }
  .container__col-md-6 {
    flex-basis: 66.6666666667%;
    padding-left: calc(var(--gutter) / 2);
    padding-right: calc(var(--gutter) / 2);
  }
}

.flex {
  display: flex;
}
@media (min-width: 0rem) {
  .flex-xxs--align-center {
    align-items: center;
  }
}
@media (min-width: 72rem) {
  .flex-md--align-start {
    align-items: flex-start;
  }
}
@media (min-width: 0rem) {
  .flex-xxs--justify-end {
    justify-content: flex-end;
  }
  .flex-xxs--justify-center {
    justify-content: center;
  }
  .flex-xxs--justify-evenly {
    justify-content: space-evenly;
  }
}
@media (min-width: 72rem) {
  .flex-md--justify-between {
    justify-content: space-between;
  }
}
@media (min-width: 0rem) {
  .flex-xxs--dir-col {
    flex-direction: column;
  }
}
@media (max-width: 72rem) {
  .hidden-md-down {
    display: none !important;
  }
}

.my--auto {
  margin: auto 0;
}

.mx--xs {
  margin: 0 0.5rem;
}

.py--xs {
  padding: 0.5rem 0;
}

.mr--sm {
  margin-right: 1rem;
}

.mb--sm {
  margin-bottom: 1rem;
}

.py--sm {
  padding: 1rem 0;
}

.px--sm {
  padding: 0 1rem;
}

.pt--sm {
  padding-top: 1rem;
}

.mt--md {
  margin-top: 2rem;
}

.mb--md {
  margin-bottom: 2rem;
}

.pb--md {
  padding-bottom: 2rem;
}

.mb--lg {
  margin-bottom: 4rem;
}

.p--lg {
  padding: 4rem;
}

.pb--lg {
  padding-bottom: 4rem;
}

.mb--xl {
  margin-bottom: 8rem;
}

.pt--xl {
  padding-top: 8rem;
}

.pb--xl {
  padding-bottom: 8rem;
}

.pt--xxl {
  padding-top: 16rem;
}

.pb--xxl {
  padding-bottom: 16rem;
}

@media (min-width: 0rem) {
  .bb-xxs {
    border-bottom: solid 1px var(--clr-primary-400);
  }
}
@media (min-width: 72rem) {
  .bb-md {
    border-bottom: solid 1px var(--clr-primary-400);
  }
  .bl-md {
    border-left: solid 1px var(--clr-primary-400);
  }
}
.is-hidden {
  display: none;
}

.spacer {
  height: 100vh;
  transition: height cubic-bezier(0.33, 1, 0.68, 1) 0.6s;
}
.spacer.scrolled {
  height: 0vh;
}