@import url(https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;800&display=swap);
@font-face {
  font-family: 'HouseSlant';
  src: url("/fonts/SignPainterHouseSlant.woff2") format('woff2'), url("/fonts/SignPainterHouseSlant.woff") format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
.f-raleway {
  font-family: 'Inter', sans-serif;
}
.f-title {
  font-family: 'Inter', sans-serif;
}
.f-content {
  font-family: 'Inter', sans-serif;
}
.f-houseslant {
  font-family: 'HouseSlant';
}
body {
  font-family: 'Inter', sans-serif;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  background-color: #fce44d;
  height: 100vh;
}
body,
body #__next,
main {
  min-height: 100%;
}
button:focus,
input:focus {
  outline: none;
}
input[type="text"],
input[type="password"],
input[type="url"],
input[type="email"] {
  -webkit-appearance: none;
}
input.br-pill {
  border: 1px solid;
  border-color: #fff;
  transition: border-color 0.15s ease 0s;
  line-height: 1.5em;
}
input.br-pill::placeholder {
  color: #ccc;
}
input.br-pill:focus {
  border-color: #ff4f37;
  transition-duration: 0.3s;
}
input.br-pill.no-focus:focus {
  border-color: #ddd !important;
}
::selection {
  background: #000 /* WebKit/Blink Browsers */;
  color: #fff;
}
::-moz-selection {
  background: #000 /* Gecko Browsers */;
  color: #fff;
}
.brand-primary {
  color: #fce44d;
}
.bg-brand-primary {
  background-color: #fce44d;
}
.brand-secondary {
  color: #000;
}
.bg-brand-secondary {
  background-color: #000;
}
a {
  outline: none !important;
}
a img {
  outline: none;
}
img {
  border: 0;
}
.cursor-text {
  cursor: text;
}
button.pv3 i[class*="gg-"] {
  max-height: 18px;
  margin-right: 5px;
}
button.pv3 i[class*="gg-"].gg-corner-down-right {
  top: 2px;
}
i[class*="gg-"] {
  display: inline-block;
}
.gg-icon-sm {
  top: -3px !important;
  width: 15px;
  height: 14px;
}
.gg-icon-di {
  display: inline !important;
  top: unset !important;
}
.list-counter {
  list-style-type: space-counter;
}
.mw-200 {
  min-width: 200px;
}
.mw-300 {
  min-width: 300px;
}
.mh-100 {
  min-height: 100px;
}
.divider {
  height: 2px;
  min-height: 2px;
}
.ul-inside {
  list-style: inside;
}
.mapboxgl-ctrl.mapboxgl-ctrl-attrib {
  display: none !important;
}
.mapboxgl-ctrl.mapboxgl-ctrl-group {
  bottom: -20px;
  position: absolute;
  right: 0;
}
.mapboxgl-ctrl-bottom-left {
  bottom: 20px;
  left: 10px;
}
body.menu-open {
  overflow: hidden;
  height: 100vh;
  pointer-events: none;
}
body.menu-open main {
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}
body.menu-open main .nav-logo {
  opacity: 0.4;
  transition: opacity 1s ease;
}
body.menu-open main::before {
  opacity: 1;
  -webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  pointer-events: none;
  transition-duration: 0.35s;
}
main::before {
  box-sizing: border-box;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  content: "";
  background-color: rgba(0,0,0,0.15);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 1, 1);
  z-index: 2;
  background-color: rgba(0,0,0,0.75);
}
main {
  min-height: 100vh;
  height: 100%;
  width: 100vw;
  background: #fff;
  padding-top: 3rem;
  z-index: 1;
}
main > :not(.account-nav):not(.nav-wrapper) {
  opacity: 0;
  animation: fadein 0.5s ease-in 0.1s forwards;
}
@-moz-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.socials .fil0 {
  fill: #777;
  fill-rule: nonzero;
}
.socials .fil1 {
  fill: #fefefe;
  fill-rule: nonzero;
}
.socials svg path {
  transition: fill 0.25s;
}
.socials svg.twitter:hover path,
.socials svg.ig:hover path {
  fill: #f00;
}
.socials svg.medium:hover path:nth-child(2) {
  fill: #f00;
}

.nav-bar {
  background-color: #fff;
}
.nav-bar.use-primary-color {
  background-color: #fce44d !important;
}
.nav-bar.scrolled {
  z-index: 1;
}
.nav-toggle {
  z-index: 8;
}
.nav-toggle .toggle {
  pointer-events: all;
  z-index: 10;
  width: 44px;
  height: 44px;
  padding: 0;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  position: relative;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: all;
}
.nav-toggle .toggle input {
  border-radius: 3px;
  display: block;
  width: 44px;
  height: 44px;
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
  opacity: 0.01;
  z-index: 11;
/* and place it over the hamburger */
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
}
.nav-toggle .toggle span {
  display: block;
  left: 14px;
  width: 30px;
  height: 2px;
  margin-bottom: 6px;
  position: relative;
  background: #1d1d1d;
  border-radius: 2px;
  z-index: 1;
  transform-origin: 3px 0px;
  transition: transform 0.25s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.2s ease;
}
.nav-toggle .toggle span first-child {
  transform-origin: 0% 0%;
}
.nav-toggle .toggle span:nth-last-child(2) {
  transform-origin: 0% 100%;
}
.nav-toggle .toggle span.open {
  background: #1d1d1d !important;
}
.nav-toggle .toggle :first-child {
  transform-origin: 0% 0%;
}
.nav-toggle .toggle :nth-last-child(2) {
  transform-origin: 0% 100%;
}
.nav-toggle .toggle :nth-last-child(3) {
  transform-origin: 0% 0%;
}
.nav-toggle .toggle span.open:nth-last-child(3) {
  opacity: 1;
  transform: rotate(45deg) translate(0, -6px);
  background: #232323;
}
.nav-toggle .toggle span.open:nth-last-child(2) {
  opacity: 0;
  transform: rotate(0deg) scale(0.02, 0.02);
}
.nav-toggle .toggle span.open:last-child {
  transform: rotate(-45deg) translate(2px, 0px);
}
.nav-toggle .toggle svg {
  width: 44px;
  height: 44px;
  top: -10px;
  position: relative;
}
.nav-toggle .nav-avatar {
  width: 45px;
  height: 45px;
  position: relative;
  margin-bottom: -10px;
}
.nav-toggle .menu-icon {
  width: 100px;
  height: 100px;
  position: relative;
  margin-bottom: 50px;
}
.nav-menu {
  position: fixed;
  z-index: 7;
  top: 0;
  left: 100%;
  height: 100%;
  width: 80%;
  max-width: 420px;
  display: flex;
  background: transparent;
  pointer-events: auto;
  transform: translateX(0);
  transition: transform 0.25s cubic-bezier(0.4, 0, 1, 1), -webkit-transform 0.25s cubic-bezier(0.4, 0, 1, 1);
  color: #555;
}
@media (max-width: 360px) {
  .nav-menu {
    width: 100%;
  }
}
.nav-menu.open {
  transform: translateX(-100%);
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
@media (min-width: 960px) {
  .nav-menu.open {
    transform: translateX(-420px);
  }
}
.nav-menu.open .slide {
  left: 20px;
  opacity: 0;
  position: relative;
  animation: slide 0.15s ease 0s forwards;
}
@-moz-keyframes slide {
  from {
    left: 20px;
    opacity: 0;
  }
  to {
    left: 0;
    opacity: 1;
  }
}
@-webkit-keyframes slide {
  from {
    left: 20px;
    opacity: 0;
  }
  to {
    left: 0;
    opacity: 1;
  }
}
@-o-keyframes slide {
  from {
    left: 20px;
    opacity: 0;
  }
  to {
    left: 0;
    opacity: 1;
  }
}
@keyframes slide {
  from {
    left: 20px;
    opacity: 0;
  }
  to {
    left: 0;
    opacity: 1;
  }
}
@media (max-width: 960px) {
  .nav-menu .inside-menu {
    width: 100%;
  }
}
.nav-menu .inside {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: #fff;
  opacity: 1;
}
@media (max-width: 960px) {
  .nav-menu .inside {
    opacity: 1;
  }
}
.slide-1 {
  animation-delay: 0.075s !important;
  animation-duration: 0.175s !important;
}
.slide-2 {
  animation-delay: 0.1s !important;
  animation-duration: 0.2s !important;
}
.slide-3 {
  animation-delay: 0.125s !important;
  animation-duration: 0.225s !important;
}
.slide-4 {
  animation-delay: 0.15s !important;
  animation-duration: 0.25s !important;
}
.slide-5 {
  animation-delay: 0.175s !important;
  animation-duration: 0.275s !important;
}
.slide-6 {
  animation-delay: 0.2s !important;
  animation-duration: 0.3s !important;
}
.slide-7 {
  animation-delay: 0.225s !important;
  animation-duration: 0.325s !important;
}
.slide-8 {
  animation-delay: 0.25s !important;
  animation-duration: 0.35s !important;
}
.slide-9 {
  animation-delay: 0.275s !important;
  animation-duration: 0.375s !important;
}
.slide-10 {
  animation-delay: 0.275s !important;
  animation-duration: 0.4s !important;
}
.slide-11 {
  animation-delay: 0.275s !important;
  animation-duration: 0.425s !important;
}
.slide-12 {
  animation-delay: 0.275s !important;
  animation-duration: 0.45s !important;
}
.slide-13 {
  animation-delay: 0.275s !important;
  animation-duration: 0.475s !important;
}
.slide-14 {
  animation-delay: 0.275s !important;
  animation-duration: 0.5s !important;
}
.slide-15 {
  animation-delay: 0.275s !important;
  animation-duration: 0.525s !important;
}
.slide-16 {
  animation-delay: 0.275s !important;
  animation-duration: 0.55s !important;
}
.slide-17 {
  animation-delay: 0.275s !important;
  animation-duration: 0.575s !important;
}
.slide-18 {
  animation-delay: 0.275s !important;
  animation-duration: 0.6s !important;
}
.slide-19 {
  animation-delay: 0.275s !important;
  animation-duration: 0.625s !important;
}
.slide-20 {
  animation-delay: 0.275s !important;
  animation-duration: 0.65s !important;
}
.slide-21 {
  animation-delay: 0.275s !important;
  animation-duration: 0.675s !important;
}

.spinner {
  width: auto;
}
.spinner > div {
  width: 0.75rem;
  height: 0.75rem;
  margin-left: 4px;
  background-color: #fff;
  border-radius: 100%;
  display: inline-block;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}
.spinner.dark > div {
  background-color: #1d1d1d;
}
.spinner.large > div {
  width: 1.5rem;
  height: 1.5rem;
}
.spinner .bounce1 {
  animation-delay: -0.32s;
}
.spinner .bounce2 {
  animation-delay: -0.16s;
}
@-moz-keyframes sk-bouncedelay {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}
@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}
@-o-keyframes sk-bouncedelay {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}
@keyframes sk-bouncedelay {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}

.zones-preview {
  background: #fff;
  width: 80vw;
  height: 70vh;
  border-radius: 30px;
  position: absolute;
  top: 10vh;
  left: 10vh;
  z-index: 10;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 0 #000;
}
body.zones-preview-open {
  overflow: hidden;
  height: 100vh;
  pointer-events: none;
}
body.zones-preview-open main {
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}
body.zones-preview-open main::before {
  opacity: 1;
  -webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  pointer-events: none;
  transition-duration: 0.35s;
}