/* --------------------------------------------------------------
/* =Variable
-------------------------------------------------------------- */
:root {
  --font-primary: ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: ui-sans-serif, system-ui, -apple-system, sans-serif;

  --text-primary: hsl(0,0%,25%);
  --text-secondary: hsl(0,0%,50%);
  --bg-primary: hsl(0,0%,100%);
  --bg-secondary: hsl(0,0%,98%);
  --border: hsl(0,0%,94%);
  --border-darker: hsl(0,0%,92%);

  --font-size-small: 12px;
  --font-size-regular: 14px;
  --font-size-large: 22px;

  --radius-large: 24px;
  --radius-regular: 16px;
  --radius-small: 8px;

  --gutter: 15px;

  --spacer-small: 5vh;
  --spacer-medium: 8vh;
  --spacer-large: 16vh;
}

@media screen and (max-width: 821px) {
  :root {
    --font-size-small: 10px;
    --font-size-regular: 14px;
    --font-size-large: 18px;
    --spacer-small: 4vh;
    --spacer-medium: 8vh;
    --spacer-large: 12vh;
  }
}


/* --------------------------------------------------------------
/* =Global
-------------------------------------------------------------- */
*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  outline: 0 !important;
}
body {
  line-height: 1.6;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
  letter-spacing: -0.02rem;
  font-weight: 300;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  font-family: var(--font-primary);
  font-size: var(--font-size-regular);
  background: var(--bg-primary);
  color: var(--text-primary);
}

/* --------------------------------------------------------------
/* = Layout
-------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: 530px;
  margin: 0 auto;
}
.large-container {
  width: 100%;
  max-width: 840px;
  margin: 0 auto;
}
.row {
  display: flex;
  flex-wrap: wrap;
}
.full-row-border-top, .full-col-border-top {
  position: relative;
}
.full-row-border-top::before {
  content: "";
  background: var(--border);
  height: 1px;
  width: calc(100% - 30px);
  top: 0;
  left: var(--gutter);
  position: absolute;
}
.full-col-border-top::before {
  content: "";
  background: var(--border);
  height: 1px;
  width: 100%;
  top: 0;
  left: 0;
  position: absolute;
}
.col-50 {
  width: 50%;
  padding: 0 var(--gutter);
  max-width: 50%;
}
.col-25 {
  width: 25%;
  padding: 0 var(--gutter);
  max-width: 25%;
}
.col-33 {
  width: 33.3%;
  padding: 0 var(--gutter);
  max-width: 33.3%;
}
.col-75 {
  width: 75%;
  padding: 0 var(--gutter);
  max-width: 75%;
}
.col-100 {
  width: 100%;
  padding: 0 var(--gutter);
  max-width: 100%;
}

.row.unpadded .col-50,
.row.unpadded .col-25,
.row.unpadded .col-33,
.row.unpadded .col-75,
.row.unpadded .col-100 {
  padding: 0;
}

.auto-margins {
  margin: auto;
}

.right-padded-col {
  padding-right: 80px;
}

@media screen and (max-width: 821px) {
  .large-container, .container {
    padding: 0 var(--gutter);
  }
  .col-50, .col-25, .col-33, .col-75 {
    width: 100%;
    max-width: 100%;
  }
  .right-padded-col {
    padding-right: var(--gutter);
  }
}

/* --------------------------------------------------------------
/* = Show/hide
-------------------------------------------------------------- */
.show-on-desktop-only {
  display: block;
}
.show-on-mobile-only {
  display: none;
}

@media screen and (max-width: 821px) {
  .show-on-desktop-only {
    display: none;
  }
  .show-on-mobile-only {
    display: block;
  }
}

.opacity-0 {
  opacity: 0;
}
.opacity-50 {
  opacity: 0.5;
}


/* --------------------------------------------------------------
/* = Image
-------------------------------------------------------------- */
.fluid-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-large);
  overflow: hidden;
}
figure {
  padding: 0;
  margin: 0;
}
figcaption {
  margin-top: var(--spacer-small);
}
video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-large);
  overflow: hidden;
}

/* --------------------------------------------------------------
/* = Border
-------------------------------------------------------------- */
.border-all-around {
  border: 1px solid var(--border);
}
.border-top {
  border-top: 1px solid var(--border);
}
.border-bottom {
  border-bottom: 1px solid var(--border);
}
.border-left {
  border-left: 1px solid var(--border);
}
.border-right {
  border-right: 1px solid var(--border);
}

/* --------------------------------------------------------------
/* = Max width / line length
-------------------------------------------------------------- */
.max-width-400 {
  max-width: 400px;
}
.max-width-600 {
  max-width: 600px;
}

/* --------------------------------------------------------------
/* = Box
-------------------------------------------------------------- */
.box.small {
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-regular);
}
.box.large {
  padding: 40px;
  border: 1px solid var(--border);
  border-radius: var(--radius-large);
}
.box.no-border {
  border: none;
}
.box.primary-bg {
  background: var(--bg-primary);
}
.box.secondary-bg {
  background: var(--bg-secondary);
}


/* --------------------------------------------------------------
/* = Button
-------------------------------------------------------------- */
.button {
  display: inline-block;
  cursor: pointer;
  border-radius: var(--radius-regular);
}
.button.primary {
  border: 1px solid var(--text-primary);
  background: var(--text-primary);
  color: var(--bg-primary);
}
.button.primary:hover {
  opacity: .8;
}
.button.secondary {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-primary);
}
.button.secondary:hover {
  border-color: var(--border-darker);
  background: var(--bg-secondary);
}
.button.small {
  padding: 4px 16px;
  font-size: var(--font-size-small);
}
.button.regular {
  padding: 6px 20px;
  font-size: var(--font-size-regular)
}

/* --------------------------------------------------------------
/* = Label
-------------------------------------------------------------- */
.label {
  display: inline-block;
  color: var(--text-primary);
  line-height: 100%;
  border-radius: 999px;
  vertical-align: baseline;
  font-weight: normal;
}
.label.small {
  font-size: var(--font-size-small);
  padding: 4px 12px;
}
.label.regular {
  font-size: var(--font-size-regular);
  padding: 8px 20px;
}
.label.primary {
  border: 1px solid var(--text-primary);
}
.label.secondary {
  border: 1px solid var(--border);
}

/* --------------------------------------------------------------
/* = Type
-------------------------------------------------------------- */

.text-color-primary {
  color: var(--text-primary);
}
.text-color-secondary {
  color: var(--text-secondary);
}

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

.line-height-100 {
  line-height: 100%;
}

.uppercase {
  text-transform: uppercase;
}
.captialize:first-letter {
  text-transform: uppercase;
}

.text-small {
  font-size: var(--font-size-small);
}
.text-regular {
  font-size: var(--font-size-regular);
}
.text-large {
  font-size:  var(--font-size-large);
  width: 100%;
}

p {
  margin: 0;
  font-size: var(--font-size-regular);
  line-height: 1.6;
  display: block;
  hyphens: auto;
  -webkit-hyphenate-character: "-";
}

a {
  color: var(--text-primary);
  text-decoration: none;
  cursor: pointer;
  outline: none;
}
a.block-link {
  display: block;
  position: relative;
}

p a, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  text-decoration: underline;
  text-decoration-color: var(--text-secondary);
  text-underline-offset: 0.1rem;
}
p a:hover, h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
  text-decoration-color: var(--text-primary);
}



/* --------------------------------------------------------------
/* = Spacing
-------------------------------------------------------------- */
.no-margin {
  margin: 0;
}
.no-margin-top {
  margin-top: 0;
}
.no-margin-bottom {
  margin-bottom: 0;
}

.large-margin-bottom {
  margin-bottom: var(--spacer-large);
}
.large-margin-top {
  margin-top: var(--spacer-large);
}
.medium-margin-bottom {
  margin-bottom: var(--spacer-medium);
}
.medium-margin-top {
  margin-top: var(--spacer-medium);
}
.small-margin-bottom {
  margin-bottom: var(--spacer-small);
}
.small-margin-top {
  margin-top: var(--spacer-small);
}

.no-padding {
  margin: 0 !important;
}
.no-padding-top {
  padding-top: 0 !important;
}
.no-padding-bottom {
  padding-bottom: 0 !important;
}

.large-padding-bottom {
  padding-bottom: var(--spacer-large);
}
.large-padding-top {
  padding-top: var(--spacer-large);
}
.medium-padding-bottom {
  padding-bottom: var(--spacer-medium);
}
.medium-padding-top {
  padding-top: var(--spacer-medium);;
}
.small-padding-bottom {
  padding-bottom: var(--spacer-small);
}
.small-padding-top {
  padding-top: var(--spacer-small);
}

.padded-section {
  padding: var(--spacer-large) 0;
}