:root {
  --font-monserat: "Montserrat", sans-serif;
  --font-inter: "Inter", Helvetica, sans-serif;
  --font-perpetua: "Perpetua", "Times New Roman", serif;
  --font-sfpro: "Poppins", sans-serif;
  /*
  * Font in figma : 
  * - header : 8rem / 400
  * - subheader : 4rem / 400
  * - subheader2 : 2rem / 110
  */
  --s0: clamp(0.75rem, 0.1071rem + 0.7143vw, 1.25rem);
  --snav: clamp(1rem, calc(0.7438rem + 0.4167vh), 1.125rem);
  --s1: clamp(1rem, calc(-0.6071rem + 1.7857vh), 2rem);
  --s1h: clamp(1.5rem, calc(1rem + 1.75vh), 3.5rem);
  --s2: clamp(2rem, calc(1rem + 2.25vh), 5rem);
  --s4: clamp(4rem, calc(2.1538rem + 6.1538vw), 12rem);
  --font-body: var(--s1);
  --header: var(--s4);
  --subheader: var(--s2);
  --subheader2: var(--s1h);
}

body {
  font-family: var(--font-sfpro);
  font-size: var(--font-body);
  font-weight: 200;
  letter-spacing: 0;
}

p {
  margin-bottom: 0.75rem;
  line-height: 125% !important;
}

h2 {
  font-size: var(--subheader);
  line-height: 90%;
}

h3 {
  font-size: var(--subheader2);
  font-weight: 110;
}

.display-1 {
  font-size: var(--header);
  font-weight: 400;
  line-height: 90%;
}

.fade-in {
  opacity: 1;
}

.fade-out {
  opacity: 0;
}

.cover {
  position: absolute;
  z-index: 100;
  left: 50%;
  top: 50%;
  width: 700px;
  height: 200px;
  margin-top: -100px;
  margin-left: -350px;
  font-size: 2em;
  line-height: 1;
  color: white;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  transition: all 0.2s;
}
.cover #logo,
.cover #title {
  transition: all 0.2s;
}
.cover #title {
  font-size: 3.5em;
}
@media (max-width: 768px) {
  .cover {
    left: 0;
    width: 100%;
    height: 200px;
    margin-top: -100px;
    margin-left: 0;
  }
  .cover #title {
    font-size: 2em;
    padding: 24px;
  }
  .cover #logo {
    padding: 24px;
  }
}

.navbar-brand {
  font-family: var(--font-sfpro);
  line-height: 1.1;
}
.navbar-brand .logo {
  font-weight: 200;
  font-size: var(--s2);
}
.navbar-brand .sub {
  font-weight: 100;
  font-size: var(--s1);
  opacity: 0.7;
}

.nav-item {
  padding-left: 1em;
}
.nav-item .nav-link {
  font-size: var(--snav);
  font-weight: 200;
}

#map {
  width: 100%;
  height: 300px;
}

img {
  width: 100%;
  height: auto;
}

@media (min-width: 1200px) {
  .ceo > .container {
    max-width: 100% !important;
    margin: 0 auto;
  }
}

.devices {
  position: relative;
  height: 450px;
}
.devices .device {
  position: absolute;
}
.devices .device img {
  width: 100%;
  height: auto;
}
.devices .device-desktop {
  right: 30px;
  top: 0;
  width: 500px;
}
.devices .device-tablet-1 {
  left: 30px;
  bottom: 20px;
  width: 200px;
}
.devices .device-tablet-2 {
  right: 0;
  bottom: 20px;
  width: 250px;
}
.devices .device-phone {
  left: 0;
  bottom: 0;
  width: 120px;
}
@media (max-width: 1200px) {
  .devices {
    height: 360px;
  }
  .devices .device-desktop {
    right: 10px;
    top: 0;
    width: 400px;
  }
  .devices .device-tablet-1 {
    left: 30px;
    bottom: 20px;
    width: 140px;
  }
  .devices .device-tablet-2 {
    right: 0;
    bottom: 20px;
    width: 180px;
  }
  .devices .device-phone {
    left: 0;
    bottom: 0;
    width: 80px;
  }
}
@media (max-width: 768px) {
  .devices {
    height: 340px;
  }
  .devices .device-desktop {
    right: 10px;
    top: 0;
    width: 330px;
  }
  .devices .device-tablet-1 {
    left: 30px;
    bottom: 20px;
    width: 140px;
  }
  .devices .device-tablet-2 {
    right: 0;
    bottom: 20px;
    width: 180px;
  }
  .devices .device-phone {
    left: 0;
    bottom: 0;
    width: 80px;
  }
}

.write-ups {
  display: flex;
  box-sizing: border-box;
  margin: 0 -24px 0;
}
.write-ups .block {
  flex: 0 0 50%;
  text-align: left;
  box-sizing: border-box;
  padding: 24px;
}
@media (max-width: 992px) {
  .write-ups {
    display: block;
    margin: 0;
  }
  .write-ups .block {
    padding: 0;
    margin-bottom: 24px;
  }
  .write-ups .block:last-child {
    margin-bottom: 0;
  }
}

.slick-arrow {
  opacity: 0.5;
  background: black;
  color: white;
  cursor: pointer;
}
.slick-arrow:hover {
  background: black;
  color: white;
  opacity: 0.8;
}

.slick-dots button {
  background: black;
}

.scroll-indicator {
  color: white;
  position: absolute;
  z-index: 300;
  bottom: 0;
  left: 50%;
  width: 100px;
  height: 90px;
  margin-left: -50px;
  text-align: center;
  opacity: 0.8;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.scroll-indicator:after {
  left: 50%;
  bottom: 0;
  content: "";
  display: block;
  flex-grow: 1;
  margin-top: 8px;
  border-left: 1px solid rgba(255, 255, 255, 0.8);
}
@media (max-width: 768px) {
  .scroll-indicator {
    height: 140px;
  }
}

/*# sourceMappingURL=default.css.map */