@font-face {
  font-family: 'Darker Grotesque';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local('Darker Grotesque Medium'), local('DarkerGrotesque-Medium'), url(https://fonts.gstatic.com/s/darkergrotesque/v2/U9MA6cuh-mLQlC4BKCtayOfARkSVo0L3AW8.ttf) format('truetype');
}
@font-face {
  font-family: 'Darker Grotesque';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Darker Grotesque Bold'), local('DarkerGrotesque-Bold'), url(https://fonts.gstatic.com/s/darkergrotesque/v2/U9MA6cuh-mLQlC4BKCtayOfARkSVowrxAW8.ttf) format('truetype');
}
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/quicksand/v21/6xK-dSZaM9iE8KbpRA_LJ3z8mH9BOJvgkCEv18E.ttf) format('truetype');
}
body {
  font-family: 'Darker Grotesque', sans-serif;
  font-weight: 500;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Quicksand', sans-serif;
  font-weight: 600;
}
.min-height-60 {
  min-height: 60px;
}
.min-height-120 {
  min-height: 120px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.no-min-height {
  min-height: unset !important;
}
.block {
  display: block !important;
}
.inline-block {
  display: inline-block !important;
}
.inline {
  display: inline !important;
}
.margin-bottom-0 {
  margin-bottom: 0 !important;
}
@media (max-width: 960px) {
  .hidden-smartphone {
    display: none !important;
  }
}
@media (min-width: 961px) {
  .hidden-md {
    display: none !important;
  }
}
mark {
  background-color: rgba(0, 0, 0, 0.25);
  display: inline-block !important;
  padding: 0 5px;
  color: inherit;
}
.hero {
  position: relative;
  min-height: 100vh;
}
.hero img,
.hero canvas,
.hero .video-bg__media {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
}
.hero .video-bg__media {
  top: 100px;
}
@media (max-width: 960px) {
  .hero {
    padding: 0 0 !important;
  }
  .hero .video-bg__media {
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
  }
  .hero .video-bg__media video {
    height: 100%;
    width: auto;
  }
}
.card {
  position: relative;
  min-height: 400px;
}
.card img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.card footer {
  color: #fff;
  text-align: center;
}
.card footer p {
  text-align: center;
  display: block;
  width: 100%;
}
.bloc-logo {
  position: relative;
  top: 0;
  height: 66px;
  width: 96px;
}
.bloc-logo img {
  object-fit: contain;
}
.bloc-logo canvas,
.bloc-logo .logo-mask {
  display: block;
  height: 66px;
  width: 96px;
  object-fit: cover;
}
.bloc-logo .logo-mask {
  position: absolute;
  top: 0;
  left: 0;
  background-size: 96px 66px;
  background-image: url("../img/logo.svg");
  text-indent: -9999px;
}
#intuitif-canvas {
  position: absolute;
  top: 0;
  left: 0;
  background-size: 96px 66px;
  background-image: url("../img/intuitif.png");
  text-indent: -9999px;
}
#Atouts {
  position: relative;
}
#Atouts .card {
  position: relative;
  border: 10px solid #fff;
  border-radius: 20px;
}
@media (max-width: 960px) {
  #Atouts .card {
    min-height: auto;
    margin-left: 10px;
    margin-right: 10px;
  }
  #Atouts .card .min-height-120 {
    position: relative;
    min-height: auto;
  }
}
@media (max-width: 860px) {
  #Atouts .card {
    min-height: auto;
    margin-left: 0;
    margin-right: 0;
    border-left: 20px solid white;
    border-right: 20px solid white;
    border-bottom: 20px solid white;
    border-top: 20px solid white;
  }
  #Atouts .card .min-height-120 {
    position: relative;
    min-height: 100px;
  }
}
@media (max-width: 768px) {
  #Atouts .card {
    min-height: auto;
    border: 10px solid #fff;
    border-radius: 20px;
  }
  #Atouts .card .min-height-120 {
    position: relative;
    min-height: auto;
  }
}
#Atouts .card h3 {
  position: relative;
  z-index: 2;
}
#Atouts .card svg {
  display: block;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  height: 100%;
  max-height: 250px;
  z-index: 2;
}
#Atouts .card img {
  display: block;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  height: 100%;
  z-index: 2;
}
#Atouts .card::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  width: 15px;
  height: 10px;
  background: #fff;
  right: -17px;
  z-index: 150000;
}
@media (max-width: 960px) {
  #Atouts .card::after {
    width: 100%;
    top: unset;
    bottom: -15px;
    left: 0;
    right: 0;
    height: 10px;
  }
}
#Atouts .card canvas {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
#Atouts .container.max-width-adaptive-lg {
  position: relative;
  overflow: hidden;
}
#Atouts .container.max-width-adaptive-lg #canvas-atouts {
  position: absolute;
  display: block;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  z-index: -1;
  text-indent: -9999px;
  height: 400px;
  padding: 10px 10px;
}
@media (max-width: 960px) {
  #Atouts .container.max-width-adaptive-lg #canvas-atouts {
    height: 100%;
    padding: 10px 20px;
  }
}
@media (max-width: 860px) {
  #Atouts .container.max-width-adaptive-lg #canvas-atouts {
    height: 50%;
    padding: 20px 20px 30px 20px;
  }
}
@media (max-width: 480px) {
  #Atouts .container.max-width-adaptive-lg #canvas-atouts {
    height: 100%;
    padding: 10px;
  }
}
#Atouts .container.max-width-adaptive-lg #canvas-atouts-tablette {
  position: absolute;
  display: none;
  left: 0;
  right: 0;
  top: 50%;
  bottom: 0;
  width: 100%;
  z-index: -1;
  text-indent: -9999px;
  height: 400px;
  padding: 10px 10px;
}
@media (max-width: 860px) {
  #Atouts .container.max-width-adaptive-lg #canvas-atouts-tablette {
    display: block;
    height: 50%;
    padding: 20px 20px 30px 20px;
  }
}
@media (max-width: 480px) {
  #Atouts .container.max-width-adaptive-lg #canvas-atouts-tablette {
    display: none;
  }
}
.scroll-bottom-icon svg {
  width: 50px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 960px) {
  .scroll-bottom-icon {
    bottom: 35px;
  }
}
#icon-mouse-scroll .scroll {
  -webkit-animation: scrolling 1s alternate infinite ease-in-out;
  animation: scrolling 1s alternate infinite ease-in-out;
}
@-webkit-keyframes scrolling {
  0% {
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
  }
  100% {
    -webkit-transform: translate(0px, 80px);
    transform: translate(0px, 80px);
  }
}
@keyframes scrolling {
  0% {
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
  }
  100% {
    -webkit-transform: translate(0px, 80px);
    transform: translate(0px, 80px);
  }
}
/* ----------------------------------------------
 * Generated by Animista on 2020-6-30 14:12:4
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */
.slide-bottom {
  -webkit-animation: slide-bottom 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite alternate both;
  animation: slide-bottom 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite alternate both;
}
/**
 * ----------------------------------------
 * animation slide-bottom
 * ----------------------------------------
 */
@-webkit-keyframes slide-bottom {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
  }
}
@keyframes slide-bottom {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
  }
}
/* -------------------------------- 

File#: _1_smooth-scrolling
Title: Smooth Scrolling
Descr: Replace the default browser behaviour (jump) with a smooth scrolling transition
Usage: codyhouse.co/license

-------------------------------- */
html {
  scroll-behavior: smooth;
}
/* -------------------------------- 

File#: _1_sticky-banner
Title: Sticky Banner
Descr: A sticky banner that slides in passed a target element or a scrolling offset.
Usage: codyhouse.co/license

-------------------------------- */
.sticky-banner {
  position: fixed;
  top: -1px;
  left: 0;
  width: 100%;
  z-index: var(--zindex-fixed-element);
  transform: translateY(-100%);
  transition: transform 0.3s;
}
.sticky-banner--bottom {
  top: auto;
  bottom: -1px;
  transform: translateY(100%);
}
.sticky-banner--visible {
  transform: translateY(0);
}
.sticky-banner:not(.sticky-banner--visible) {
  box-shadow: none;
}
/* -------------------------------- 

File#: _1_card-v2
Title: Card v2
Descr: Container of information used as teasers for further content, often displayed in a gallery of related items
Usage: codyhouse.co/license

-------------------------------- */
.card-v2 {
  position: relative;
}
.card-v2 img {
  display: block;
  width: 100%;
}
.card-v2__caption {
  position: relative;
  width: 100%;
  background: #000000;
  background: linear-gradient(0deg, #000000 20%, rgba(255, 255, 255, 0) 100%);
  color: var(--color-white);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}
.card-v2--blur-fx .card-v2__caption {
  background: rgba(0, 0, 0, 0.8);
}
a.card-v2 {
  display: block;
  text-decoration: none;
  transition: box-shadow 0.2s;
}
a.card-v2:hover {
  box-shadow: var(--shadow-md);
}
#About svg {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  display: block;
  max-width: 200px;
}
/* -------------------------------- 

File#: _1_feature-v10
Title: Feature v10
Descr: A feature section containing two adjacent content blocks
Usage: codyhouse.co/license

-------------------------------- */
.feature-v10 {
  position: relative;
  z-index: 1;
}
.feature-v10__link {
  position: relative;
  text-decoration: none;
  color: inherit;
  display: inline-block;
  transition: 0.3s var(--ease-out);
  transform-origin: left bottom;
}
.feature-v10__link i {
  position: relative;
  z-index: 2;
  display: inline-block;
  transition: 0.3s var(--ease-out);
}
.feature-v10__link::after {
  content: '';
  background-color: currentColor;
  height: 2px;
  width: 100%;
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 0;
  transition: 0.3s var(--ease-out);
  opacity: 0.15;
}
.feature-v10__link:hover {
  transform: scale(1.3);
}
.feature-v10__link:hover i {
  transform: scale(0.7);
}
.feature-v10__link:hover::after {
  height: 100%;
}
/* -------------------------------- 

File#: _1_diagonal-section
Title: Diagonal Section
Descr: Section with diagonal edges
Usage: codyhouse.co/license

-------------------------------- */
:root {
  --diagonal-section-offset: 50px;
}
.diagonal-section {
  position: relative;
  z-index: 1;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
@supports (clip-path: inset(50%)) {
  .diagonal-section,
  .diagonal-section-top.diagonal-section-bottom {
    padding-top: calc(var(--diagonal-section-offset)/2);
    padding-bottom: calc(var(--diagonal-section-offset)/2);
    clip-path: polygon(0% 0%, 100% var(--diagonal-section-offset), 100% 100%, 0% calc(100% - var(--diagonal-section-offset)));
  }
  .diagonal-section--flip-x {
    clip-path: polygon(0% var(--diagonal-section-offset), 100% 0%, 100% calc(100% - var(--diagonal-section-offset)), 0% 100%);
  }
  .diagonal-section-top {
    padding-top: calc(var(--diagonal-section-offset)/2);
    clip-path: polygon(0% 0%, 100% var(--diagonal-section-offset), 100% 100%, 0% 100%);
  }
  .diagonal-section-top--flip-x {
    clip-path: polygon(0% var(--diagonal-section-offset), 100% 0%, 100% 100%, 0% 100%);
  }
  .diagonal-section-top--flip-x.diagonal-section-bottom {
    clip-path: polygon(0% var(--diagonal-section-offset), 100% 0%, 100% 100%, 0% calc(100% - var(--diagonal-section-offset)));
  }
  .diagonal-section-bottom {
    padding-bottom: calc(var(--diagonal-section-offset)/2);
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% calc(100% - var(--diagonal-section-offset)));
  }
  .diagonal-section-bottom--flip-x {
    clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - var(--diagonal-section-offset)), 0% 100%);
  }
  .diagonal-section-bottom--flip-x.diagonal-section-top {
    clip-path: polygon(0% 0%, 100% var(--diagonal-section-offset), 100% calc(100% - var(--diagonal-section-offset)), 0% 100%);
  }
  .diagonal-section-top--flip-x.diagonal-section-bottom--flip-x {
    clip-path: polygon(0% var(--diagonal-section-offset), 100% 0%, 100% calc(100% - var(--diagonal-section-offset)), 0% 100%);
  }
}
/* -------------------------------- 

File#: _1_main-footer
Title: Main Footer
Descr: Footer navigation
Usage: codyhouse.co/license

-------------------------------- */
.main-footer {
  position: relative;
  z-index: 1;
  bottom: 0;
  left: 0;
  right: 0;
}
.main-footer__logo {
  flex-shrink: 0;
  width: 104px;
  height: 30px;
  display: block;
}
.main-footer__logo svg,
.main-footer__logo img {
  display: block;
  width: inherit;
  height: inherit;
}
.main-footer__link {
  color: var(--color-white);
  text-decoration: none;
}
.main-footer__link:hover {
  color: var(--color-white);
  text-decoration: underline;
}
.main-footer__colophon {
  display: block;
  position: relative;
  width: 100%;
}
@media (max-width: 960px) {
  .main-footer__colophon {
    flex-wrap: unset;
    padding: 20px 0 140px 0px;
  }
}
.main-footer__social {
  text-decoration: none;
  display: inline-block;
  color: var(--color-white);
}
.main-footer__social:hover {
  color: var(--color-white);
}
.mentions-legales {
  position: relative;
  display: inline-block;
  width: 90%;
  float: left;
}
@media (max-width: 960px) {
  .mentions-legales {
    width: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
  }
}
.social-media {
  position: relative;
  display: inline-block;
  width: 10%;
  float: left;
}
@media (max-width: 960px) {
  .social-media {
    width: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}
/* -------------------------------- 

File#: _1_stacking-cards
Title: Stacking Cards
Descr: Cards stack effect on vertical scrolling
Usage: codyhouse.co/license

-------------------------------- */
.stack-cards {
  --stack-cards-gap: var(--space-sm);
}
.stack-cards__item {
  position: relative;
  top: var(--space-md);
  height: 0;
  padding-bottom: 60%;
  transform-origin: center top;
  overflow: hidden;
  margin-bottom: 2rem;
}
.stack-cards__item > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.stack-cards__item .grid {
  height: 100%;
}
@media (max-width: 960px) {
  .stack-cards__item {
    padding-bottom: 10px;
    height: auto;
    margin-bottom: 20px;
  }
  .stack-cards__item > * {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .stack-cards__item .text-component {
    margin-bottom: 20px;
  }
}
/* -------------------------------- 

File#: _1_back-to-top
Title: Back to top
Descr: Component that triggers scroll-y to the top of the page
Usage: codyhouse.co/license

-------------------------------- */
:root {
  /* style */
  --btt-icon-size: 1.25em;
}
.back-to-top {
  position: fixed;
  right: var(--space-md);
  bottom: var(--space-md);
  padding: var(--space-xs);
  z-index: var(--zindex-fixed-element);
  border-radius: var(--radius-md);
  background-color: #000000;
  transition: 0.3s;
}
.back-to-top:hover {
  background-color: var(--color-contrast-higher);
}
.back-to-top .icon {
  display: block;
  color: var(--color-bg);
  width: var(--btt-icon-size);
  height: var(--btt-icon-size);
}
.js .back-to-top {
  visibility: hidden;
  opacity: 0;
}
.js .back-to-top--is-visible {
  visibility: visible;
  opacity: 1;
}
/* -------------------------------- 

File#: _1_reading-progressbar
Title: Reading Progress Bar
Descr: A bar indicator displaying the current reading progress
Usage: codyhouse.co/license

-------------------------------- */
.reading-progressbar {
  position: fixed;
  z-index: 15;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  color: var(--color-primary);
  pointer-events: none;
  display: none;
}
.reading-progressbar--is-active {
  display: block;
}
.reading-progressbar::-webkit-progress-bar {
  background-color: transparent;
}
.reading-progressbar::-webkit-progress-value {
  background-color: currentColor;
}
.reading-progressbar::-moz-progress-bar {
  background-color: currentColor;
}
.reading-progressbar__fallback {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background-color: currentColor;
}
.reading-content {
  padding: var(--space-md);
}
/* -------------------------------- 

File#: _1_chameleonic-header
Title: Chameleonic Header
Descr: Header component whose theme adapts on scroll to the underneath section
Usage: codyhouse.co/license

-------------------------------- */
.cha-header {
  background-color: #fff;
  backdrop-filter: blur(5px);
}
.cha-header__logo {
  display: block;
  width: 80px;
  height: 40px;
}
.cha-header__nav {
  display: block;
}
.cha-header__nav .link-header.active {
  border-bottom: 2px solid var(--color-primary);
}
.cha-header__nav .link-header.active a {
  color: var(--color-primary);
}
.cha-header__link {
  color: var(--color-contrast-higher);
  text-decoration: none;
  transition: opacity 0.3s;
}
.cha-header__link:hover {
  opacity: 0.5;
}
.cha-header__btn {
  background-color: var(--color-primary);
  padding: var(--space-xs) var(--space-md);
  box-shadow: var(--shadow-sm);
  color: var(--color-white);
  cursor: pointer;
  @include fontSmooth;
  transition: transform 0.2s, background-color 0.2s;
}
.cha-header__btn:hover {
  background-color: var(--color-primary-dark);
}
.cha-header__btn:active {
  transform: translateY(2px);
}
.cha-header__btn:focus {
  outline: 2px solid var(--color-primary), 0.2;
  outline-offset: 2px;
}
.cha-header__trigger {
  display: block;
  font-size: 24px;
}
.cha-header__trigger .icon {
  display: block;
}
.cha-modal {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: var(--color-bg);
  display: none;
}
.cha-modal__close {
  display: block;
  font-size: 24px;
}
.cha-modal__close .icon {
  display: block;
}
.cha-modal__link {
  font-size: var(--text-xl);
  color: var(--color-contrast-higher);
  text-decoration: underline;
}
.demo-theme-dark {
  @include defineColorHSL(--color-primary, 349, 75%, 51%);
  @include defineColorHSL(--color-bg, 240, 8%, 12%);
  @include defineColorHSL(--color-contrast-high, 0, 0%, 95%);
  @include defineColorHSL(--color-contrast-higher, 0, 0%, 100%);
  background-color: var(--color-bg);
  color: var(--color-contrast-high);
  @include fontSmooth;
}
@include breakpoint(md) {
  .cha-header__nav {
    display: block;
  }
  .cha-header__trigger,
  .cha-modal {
    display: none !important;
  }
}
.js .cha-header-clip {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  pointer-events: none;
}
@media (max-width: 960px) {
  .js .cha-header-clip {
    z-index: 1500;
    clip-path: none;
    pointer-events: none;
  }
}
.js .cha-header {
  pointer-events: auto;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  backface-visibility: hidden;
  transform: translateZ(0);
}
@media (max-width: 960px) {
  .js .cha-header {
    top: unset;
    bottom: 0;
    z-index: 1500;
    left: 0;
    right: 0;
    opacity: 1 !important;
    backface-visibility: visible;
    transform: translateZ(0);
    background: #fff;
  }
  .js .cha-header .container {
    padding: 0 0 !important;
    margin: 0 0 !important;
    display: block;
    width: 100%;
  }
  .js .cha-header .cha-header__nav {
    width: 100%;
    height: 50px;
  }
  .js .cha-header .cha-header__nav .link-header.active {
    border-bottom: none;
    border-top: 2px solid var(--color-primary);
  }
  .js .cha-header .js-cha-header__nav ul {
    align-items: baseline;
    display: block;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    margin-bottom: 0;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    height: 50px;
  }
  .js .cha-header .js-cha-header__nav ul li {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    overflow: inherit !important;
    display: inline-block;
    float: left;
    width: 20%;
    height: 50px;
    text-align: center;
    padding: 0 0;
    margin: 0 0;
    position: relative;
  }
  .js .cha-header .js-cha-header__nav ul li a {
    display: block;
    width: 100%;
    height: 50px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    text-align: center;
  }
  .js .cha-header .js-cha-header__nav ul li a svg {
    position: relative;
    top: 10px;
  }
}
@media (max-width: 960px) {
  .js .cha-header.reveal-fx {
    transition: none !important;
    transition-duration: unset;
  }
}
@media (max-width: 960px) {
  .js .reveal-fx--text-mask > * {
    transform: none !important;
    transition: none !important;
    will-change: unset !important;
  }
  .js .reveal-fx--clip-x > * {
    clip-path: unset !important;
    transform: none !important;
    transition: none !important;
    will-change: unset !important;
  }
}
html:not(.js) .cha-header__trigger {
  display: none;
}
html:not(.js) .cha-header__nav {
  display: block;
}
/* -------------------------------- 

File#: _1_details-list
Title: Details List
Descr: Pairs of related information displayed in a list
Usage: codyhouse.co/license

-------------------------------- */
.details-list__item > * {
  margin-bottom: var(--space-xxs);
}
.details-list__item dd:last-of-type {
  margin-bottom: 0;
}
.details-list__dt {
  font-weight: bold;
}
.details-list__dd {
  line-height: 1.4;
}
.details-list__dd--cta {
  margin-top: var(--space-lg);
}
@include breakpoint(md) {
  @supports (grid-area: auto) {
    .details-list__item {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
    }
    .details-list__item > * {
      margin-bottom: 0;
    }
    dd:last-of-type {
      text-align: right;
    }
    .details-list__dd--cta {
      margin-top: 0;
    }
  }
}
@include breakpoint(md) {
  @supports (grid-area: auto) {
    .details-list--col-3 .details-list__item {
      display: grid;
      justify-content: start;
      grid-template-columns: 30% 50% 20%;
    }
  }
}
/* -------------------------------- 

File#: _1_google-maps
Title: Google Maps
Descr: Google Maps component
Usage: codyhouse.co/license

-------------------------------- */
.google-maps {
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
}
.google-maps--ratio-4\:1 {
  padding-bottom: 25%;
}
.google-maps--ratio-3\:1 {
  padding-bottom: 33%;
}
/* -------------------------------- 

File#: _2_contact
Title: Contact
Descr: Contact block w/ info about how to get in touch
Usage: codyhouse.co/license

-------------------------------- */
.contact {
  position: relative;
  z-index: 1;
}
.contact .details-list {
  margin-bottom: var(--space-lg);
}
@media (max-width: 480px) {
  .contact {
    padding-bottom: 0;
  }
  .contact .details-list__item {
    margin-bottom: 1rem;
  }
}
@include breakpoint(md) {
  @supports (grid-area: auto) {
    .contact .details-list {
      margin-bottom: 0;
    }
    .contact .google-maps {
      height: auto;
      padding-bottom: 0;
    }
    .contact__grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-gap: var(--space-lg);
    }
  }
}
/* -------------------------------- 

File#: _1_video-background
Title: Responsive Video Background
Descr: A full-width responsive video background
Usage: codyhouse.co/license

-------------------------------- */
.video-bg__media {
  position: absolute;
  top: 100px;
  left: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.video-bg__media video {
  position: relative;
  min-height: 100%;
  min-width: 100%;
  height: auto;
  width: auto;
  max-width: none;
}
@supports (object-fit: cover) {
  .video-bg__media video {
    height: auto;
    width: 100%;
  }
}
@supports (object-fit: cover) and (-ms-ime-align:auto) {
  .video-bg__media video {
    height: auto;
    width: auto;
  }
}
.video-bg__media img {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .video-bg__media video {
    visibility: hidden;
  }
  .video-bg__media img {
    display: block;
    position: absolute;
    object-fit: cover;
    height: 100%;
    width: 100%;
  }
}
/* -------------------------------- 

File#: _1_reveal-effects
Title: Reveal Effects
Descr: A collection of reveal effects targeting specific elements as they enter the viewport
Usage: codyhouse.co/license

-------------------------------- */
:root {
  --reveal-fx-duration: 0.6s;
  --reveal-fx-timing-function: var(--ease-out);
}
.js .reveal-fx {
  opacity: 0;
  transition: opacity, transform var(--reveal-fx-timing-function);
  transition-duration: var(--reveal-fx-duration);
}
.js .reveal-fx::before {
  display: none;
  content: 'reveal-fx';
}
.js .reveal-fx--translate,
.js .reveal-fx--translate-up {
  transform: translateY(50px);
}
.js .reveal-fx--translate-right {
  transform: translateX(-50px);
}
.js .reveal-fx--translate-left {
  transform: translateX(50px);
}
.js .reveal-fx--translate-down {
  transform: translateY(-50px);
}
.js .reveal-fx--scale {
  transform: scale(0.8);
}
.js .reveal-fx--scale-up {
  transform: translateY(50px) scale(0.8);
}
.js .reveal-fx--scale-right {
  transform: translateX(-50px) scale(0.8);
}
.js .reveal-fx--scale-left {
  transform: translateX(50px) scale(0.8);
}
.js .reveal-fx--scale-down {
  transform: translateY(-50px) scale(0.8);
}
.js .reveal-fx--rotate,
.js .reveal-fx--rotate-down,
.js .reveal-fx--rotate-right,
.js .reveal-fx--rotate-left,
.js .reveal-fx--rotate-up {
  perspective: 1000px;
}
.js .reveal-fx--rotate > *,
.js .reveal-fx--rotate-down > *,
.js .reveal-fx--rotate-right > *,
.js .reveal-fx--rotate-left > *,
.js .reveal-fx--rotate-up > * {
  transition: transform var(--reveal-fx-duration) var(--reveal-fx-timing-function);
  backface-visibility: hidden;
}
.js .reveal-fx--rotate > *,
.js .reveal-fx--rotate-down > * {
  transform-origin: top;
  transform: rotateX(-45deg);
}
.js .reveal-fx--rotate-right > * {
  transform-origin: left center;
  transform: rotateY(45deg);
}
.js .reveal-fx--rotate-left > * {
  transform-origin: right center;
  transform: rotateY(-45deg);
}
.js .reveal-fx--rotate-up > * {
  transform-origin: bottom;
  transform: rotateX(45deg);
}
.js .reveal-fx--text-mask {
  overflow: hidden;
}
.js .reveal-fx--text-mask > * {
  display: block;
  line-height: inherit;
  transform: translateY(100%);
  transition: transform var(--reveal-fx-duration) var(--reveal-fx-timing-function);
  will-change: transform;
}
.js [class*="reveal-fx--translate"],
.js [class*="reveal-fx--scale"] {
  will-change: opacity, transform;
}
.js .reveal-fx--text-mask > *,
.js [class*="reveal-fx--rotate"] > * {
  will-change: transform;
}
.js .reveal-fx--clip-x > *,
.js .reveal-fx--clip-y > * {
  transition: opacity, clip-path var(--ease-out);
  transition-duration: var(--reveal-fx-duration);
}
.js .reveal-fx--clip-x > * {
  clip-path: polygon(10% 0%, 90% 0%, 90% 100%, 10% 100%);
}
.js .reveal-fx--clip-y > * {
  clip-path: polygon(0% 50%, 100% 50%, 100% 100%, 0% 100%);
}
.js .reveal-fx--is-visible {
  opacity: 1;
}
.js .reveal-fx--is-visible[class*="reveal-fx--translate"],
.js .reveal-fx--is-visible[class*="reveal-fx--scale"],
.js .reveal-fx--is-visible[class*="reveal-fx--rotate"] > *,
.js .reveal-fx--is-visible.reveal-fx--text-mask > * {
  transform: translate(0);
}
.js .reveal-fx--is-visible.reveal-fx--clip-x > *,
.js .reveal-fx--is-visible.reveal-fx--clip-y > * {
  opacity: 1;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}