@import url(https://fonts.googleapis.com/css?family=Domine:400,700&display=swap);@charset "UTF-8";
/* ==========================================================================
===== THEME STYLESHEET =====
=
= I've divvied up the scss to go from a wider scope to a more specific scope. ( As you would )
= The order that I have decided on is: global > module > component > layout
= For each one, I will explain my thinking as to why they are more specific than the last.
= Here is a link to something which explains my thinking on the mater, fairly well.
= https://softwareengineering.stackexchange.com/questions/178927/is-there-a-difference-between-a-component-and-a-module
=
========================================================================== */
/* ==========================================================================
===== CORE STYLES =====
=
= These are for styles that will always be used. The rules here should be minimal and dry.
= When working on more specific classes and elements you don't want to have to backpedal very much, if at all.
= Don't see the need to add any more files to this folder, what is here should cover all the core needs.
=
========================================================================== */
/*! normalize.css v8.0.1 | 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 iOS.
 */
html {
  line-height: 1.15;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}

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

/**
 * Render the `main` element consistently in IE.
 */
main {
  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
	========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/* Text-level semantics
	========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none;
  /* 1 */
  text-decoration: underline;
  /* 2 */
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
  /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

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

/* Forms
	========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 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,
input {
  /* 1 */
  overflow: visible;
}

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

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

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

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

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 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.
 */
legend {
  box-sizing: border-box;
  /* 1 */
  color: inherit;
  /* 2 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  white-space: normal;
  /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type=checkbox],
[type=radio] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type=search] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 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 Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Misc
	========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

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

/*
|––––––––––––––––––––––––––––––––––––––––––––––––––
| CORE: Settings
|––––––––––––––––––––––––––––––––––––––––––––––––––
*/
/*
|–––––––––––––––––––––––––
| Settings: COLOR
|–––––––––––––––––––––––––
*/
/* common */
/* gray shades */
/* social media colors */
/* site specific */
/* site dynamic */
/*
|–––––––––––––––––––––––––
| Settings: TYPOGRAPHY
|–––––––––––––––––––––––––
*/
/* === FONT FAM === */
/* default */
/* site fonts */
/* dynamic fonts */
/* site dynamic fonts */
/* === FONT SIZE === */
/*
|–––––––––––––––––––––––––
| Settings: LAYOUT
|–––––––––––––––––––––––––
|
| bp = break point
|
| w = width
| h = height
|
| mb = mobile
| tb = tablet
| dt = desktop
|
*/
/* === RESPONSIVE === */
/* === MAX WIDTHS === */
/* === DYNAMIC MAX WIDTHS === */
/* === WHITESPACE === */
/*
|–––––––––––––––––––––––––
| Settings: SITE VARS
|–––––––––––––––––––––––––
*/
/* === BORDER RADIUS === */
/* === HEADER === */
/*
|––––––––––––––––––––––––––––––––––––––––––––––––––
| CORE: Responsiveness
|––––––––––––––––––––––––––––––––––––––––––––––––––
|
| Author: Glenn McComb
| Site: https://glennmccomb.com/articles/useful-sass-scss-media-query-mixins-for-bootstrap/
|
| Update: Tyler Underwood
| Notes: I added functionality for variables or numbers used in the mixin.
| 		 So that, we were not confined to using variables in the breakpoints map.
|
|––––––––––––––––––––––––––––––––––––––––––––––––––
*/
/*
|––––––––––––––––––––––––––––––––––––––––––––––––––
| CORE: Mixins
|––––––––––––––––––––––––––––––––––––––––––––––––––
*/
/*  ________    __  __________     ________  ______  ______
   / ____/ /   / / / /  _/ __ \   /_  __/\ \/ / __ \/ ____/
  / /_  / /   / / / // // / / /    / /    \  / /_/ / __/   
 / __/ / /___/ /_/ // // /_/ /    / /     / / ____/ /___   
/_/   /_____/\____/___/_____/    /_/     /_/_/   /_____/   */
/*  ________  _________________  __  ___   __________  ___    ____  ___________   _____________
   / ____/ / / / ___/_  __/ __ \/  |/  /  / ____/ __ \/   |  / __ \/  _/ ____/ | / /_  __/ ___/
  / /   / / / /\__ \ / / / / / / /|_/ /  / / __/ /_/ / /| | / / / // // __/ /  |/ / / /  \__ \ 
 / /___/ /_/ /___/ // / / /_/ / /  / /  / /_/ / _, _/ ___ |/ /_/ // // /___/ /|  / / /  ___/ / 
\____/\____//____//_/  \____/_/  /_/   \____/_/ |_/_/  |_/_____/___/_____/_/ |_/ /_/  /____/ 	*/
/*
|––––––––––––––––––––––––––––––––––––––––––––––––––
| CORE: Animations
|––––––––––––––––––––––––––––––––––––––––––––––––––
*/
@-webkit-keyframes bounce_up {
  0% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(0.3em);
  }
  50% {
    transform: translateY(-0.5em);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes bounce_up {
  0% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(0.3em);
  }
  50% {
    transform: translateY(-0.5em);
  }
  100% {
    transform: translateY(0);
  }
}
.bounce-up {
  -webkit-animation: bounce_up 1100ms infinite ease-in-out;
          animation: bounce_up 1100ms infinite ease-in-out;
}

@-webkit-keyframes bounce_right {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-0.3rem);
  }
  50% {
    transform: translateX(0.5rem);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes bounce_right {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-0.3rem);
  }
  50% {
    transform: translateX(0.5rem);
  }
  100% {
    transform: translateX(0);
  }
}
.bounce-right {
  -webkit-animation: bounce_right 1100ms infinite ease-in-out;
          animation: bounce_right 1100ms infinite ease-in-out;
}

@-webkit-keyframes bounce_down {
  0% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-0.3em);
  }
  50% {
    transform: translateY(0.5em);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes bounce_down {
  0% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-0.3em);
  }
  50% {
    transform: translateY(0.5em);
  }
  100% {
    transform: translateY(0);
  }
}
.bounce-down {
  -webkit-animation: bounce_down 1100ms infinite ease-in-out;
          animation: bounce_down 1100ms infinite ease-in-out;
}

@-webkit-keyframes bounce_left {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(0.3rem);
  }
  50% {
    transform: translateX(-0.5rem);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes bounce_left {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(0.3rem);
  }
  50% {
    transform: translateX(-0.5rem);
  }
  100% {
    transform: translateX(0);
  }
}
.bounce-left {
  -webkit-animation: bounce_left 1100ms infinite ease-in-out;
          animation: bounce_left 1100ms infinite ease-in-out;
}

@-webkit-keyframes blink {
  0% {
    opacity: 1;
  }
  49% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  49% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.blink {
  -webkit-animation: blink 1000ms infinite;
          animation: blink 1000ms infinite;
}

/* ===== CUSTOM ANIMATION ELEMENTS ===== */
.insertion-point {
  position: relative;
}
.insertion-point:before {
  -webkit-animation: blink 1000ms infinite;
          animation: blink 1000ms infinite;
  position: absolute;
  top: 0;
  left: -0.2em;
  width: 0.1em;
  height: 1em;
  background-color: #333333;
  content: "";
}

/* ===== HOVER TRANSITIONS ===== */
.on-hover-grow {
  transition: all 300ms ease-in-out;
  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.3);
}
.on-hover-grow:hover {
  transform: scale(1.05) translateY(-3%);
  box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.3);
}
.on-hover-grow:active {
  transform: scale(1.02) translateY(-1%);
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.3);
}

/*
|––––––––––––––––––––––––––––––––––––––––––––––––––
| CORE: Body
|––––––––––––––––––––––––––––––––––––––––––––––––––
*/
@media (max-width: 479px) {
  html {
    font-size: 16px;
  }
}
@media (min-width: 480px) and (max-width: 1439px) {
  html {
    font-size: calc(16px + 4 * (100vw - 480px) / 960);
  }
}
@media (min-width: 1440px) {
  html {
    font-size: 20px;
  }
}

body {
  overflow-x: hidden;
  background-color: white;
  line-height: 1;
  font-size: 1rem;
  font-weight: normal;
  font-family: "Domine", serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #333333;
  scroll-behavior: smooth;
}
body *,
body *::before,
body *::after {
  box-sizing: border-box;
}
body.lock-body, body[class*=-open], body[class*=-opening], body[class*=-closing] {
  overflow: hidden;
}

.scroll-lock {
  overflow: hidden !important;
}

#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#container {
  position: relative;
  z-index: 2;
  flex: 1;
  overflow: hidden;
}

#footer {
  position: relative;
  z-index: 1;
}

/*
|––––––––––––––––––––––––––––––––––––––––––––––––––
| CORE: Typography
|––––––––––––––––––––––––––––––––––––––––––––––––––
*/
/* ===== DEFAULTS ===== */
p {
  margin: 1.6rem 0 0;
  max-width: 36rem;
  line-height: 1.6;
  font-size: 1rem;
  -webkit-hyphens: none;
      -ms-hyphens: none;
          hyphens: none;
}
p:first-child {
  margin-top: 0;
}
p:last-child {
  margin-bottom: 0;
}

li {
  line-height: 1.6;
  font-size: 1rem;
}
li:first-child {
  margin-top: 0;
}
li:last-child {
  margin-bottom: 0;
}

h1, h2, h3, h4, h5, h6 {
  margin: 1em 0 0;
  line-height: 1.2;
  font-weight: bold;
  font-family: "Domine", serif;
}
h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child {
  margin-top: -0.24em;
}
h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, h6:last-child {
  margin-bottom: -0.2em;
}
h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p {
  margin-top: 0.5rem;
}

h1 {
  font-size: 3.2rem;
}

h2 {
  font-size: 2.4rem;
}

h3 {
  font-size: 1.6rem;
}

h4 {
  font-size: 1.2rem;
}

h5 {
  font-size: 1.2rem;
}

h6 {
  font-size: 1.2rem;
}

h1, h2, h3, h4 {
  color: #475733;
}

h5 {
  color: #475733;
}

h6 {
  color: #ae9b5b;
}

h1 + h1, h1 + h2, h1 + h3, h1 + h4, h1 + h5, h1 + h6, h2 + h1, h2 + h2, h2 + h3, h2 + h4, h2 + h5, h2 + h6, h3 + h1, h3 + h2, h3 + h3, h3 + h4, h3 + h5, h3 + h6, h4 + h1, h4 + h2, h4 + h3, h4 + h4, h4 + h5, h4 + h6, h5 + h1, h5 + h2, h5 + h3, h5 + h4, h5 + h5, h5 + h6, h6 + h1, h6 + h2, h6 + h3, h6 + h4, h6 + h5, h6 + h6 {
  margin-top: 0.1rem;
  padding-top: 0.1rem;
}

hr {
  clear: both;
  margin: 1.6rem 0;
  border: unset;
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  width: 100%;
  color: #f8f8f8;
}
hr + p {
  margin-top: 0;
}

ul, ul li {
  margin: 0;
  padding: 0;
  list-style: none;
}

blockquote {
  margin: 0;
  padding: 0;
  line-height: 1.6;
  font-size: 1.2rem;
}

cite {
  font-size: 0.8rem;
}

code {
  border-radius: 2px;
  background: #eeeeee;
  padding: 2px;
  line-height: 1.2;
  font-size: inherit;
  color: #333333;
}

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.25em;
}

sub {
  bottom: -0.25em;
}

address {
  font-style: normal;
}

a {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
a:hover, a:focus {
  outline: none;
  color: inherit;
}

/*
|––––––––––––––––––––––––––––––––––––––––––––––––––
| CORE: Forms 
|––––––––––––––––––––––––––––––––––––––––––––––––––
*/
form {
  display: block;
  max-width: 36rem;
}

input:not([type=checkbox]):not([type=submit]),
select,
textarea {
  display: block;
  width: 100%;
  box-shadow: none;
  border: none;
  outline: none;
  border: 2px solid #f0f0f0;
  border-radius: 0;
  background-color: #fafafa;
  padding: 0.5em 0.8em;
  line-height: 1;
  font-size: 1rem;
  color: #333333;
  transition: border 300ms ease-in-out, background-color 300ms ease-in-out;
}
input:not([type=checkbox]):not([type=submit])::-moz-placeholder, select::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 0.8;
  color: inherit;
}
input:not([type=checkbox]):not([type=submit]):-ms-input-placeholder, select:-ms-input-placeholder, textarea:-ms-input-placeholder {
  opacity: 0.8;
  color: inherit;
}
input:not([type=checkbox]):not([type=submit])::-ms-input-placeholder, select::-ms-input-placeholder, textarea::-ms-input-placeholder {
  opacity: 0.8;
  color: inherit;
}
input:not([type=checkbox]):not([type=submit])::placeholder,
select::placeholder,
textarea::placeholder {
  opacity: 0.8;
  color: inherit;
}
input:not([type=checkbox]):not([type=submit]):focus, input:not([type=checkbox]):not([type=submit]):active,
select:focus,
select:active,
textarea:focus,
textarea:active {
  border-color: #fc612a;
  background-color: #fbfbfb;
}

textarea {
  position: relative;
  height: 4em;
  height: 12em;
  resize: vertical;
  line-height: 1.4;
  transition: height 300ms ease-out, border 300ms ease-in-out, background-color 300ms ease-in-out;
}
textarea:focus, textarea:active {
  height: 12em;
}

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

input.focus-underline {
  border: none;
  background-color: unset;
  background-repeat: no-repeat;
  background-image: linear-gradient(transparent calc(100% - 3px), #fa4404 0), linear-gradient(transparent calc(100% - 3px), #fafafa 0);
  background-size: 0 100%, 100% 100%;
  transition: background 300ms ease-out;
}
input.focus-underline:focus, input.focus-underline:active {
  border: none;
  background-color: unset;
  background-size: 100% 100%, 100% 100%;
}

/*
|––––––––––––––––––––––––––––––––––––––––––––––––––
| CORE: Buttons 
|––––––––––––––––––––––––––––––––––––––––––––––––––
|
| The button or submit should by default have button styles,
| but once a class is put on them, they should be wiped of styles so you dont have to backpedal.
|
| If you want to put a class on the button but keep the default styles,
| just add the button class to the classes you want.
|
*/
button {
  display: inline-block;
  outline: none;
  border: none;
  background-color: transparent;
  padding: 0;
  color: #ffffff;
  cursor: pointer;
}

.btn,
.button,
[type=submit]:not([class]) {
  display: inline-block;
  flex-shrink: 0;
  min-width: 8rem;
  border: 2px solid #c8b573;
  border-radius: 0;
  background-color: #c8b573;
  padding: 0.5rem 1.4rem;
  letter-spacing: 2px;
  line-height: 1;
  font-family: "Domine", serif;
  font-size: 0.8rem;
  font-weight: bold;
  color: #ffffff;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition: border-color 300ms ease-in-out, background-color 300ms ease-in-out, color 300ms ease-in-out;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: pointer;
}
.btn:hover, .btn:focus,
.button:hover,
.button:focus,
[type=submit]:not([class]):hover,
[type=submit]:not([class]):focus {
  outline: none;
  border-color: #475733;
  background-color: #475733;
  color: #ffffff;
}
.btn[disabled],
.button[disabled],
[type=submit]:not([class])[disabled] {
  opacity: 0.8;
  cursor: not-allowed;
}
.btn[disabled]:hover, .btn[disabled]:focus,
.button[disabled]:hover,
.button[disabled]:focus,
[type=submit]:not([class])[disabled]:hover,
[type=submit]:not([class])[disabled]:focus {
  outline: none;
  border-color: #c8b573;
  background-color: #c8b573;
  color: #ffffff;
}

/* === button types === */
/* square button */
.btn-square {
  border-radius: 0;
}

/* rounded button */
.btn-rounded {
  border-radius: 0.2em;
}

/* pill button */
.btn-pill {
  border-radius: 2.4em;
}

/* border button */
.btn-border {
  border-color: #c8b573;
  background: transparent;
  padding: 0.55rem 1.4rem;
  font-size: 0.7rem;
  color: #c8b573;
}
.btn-border:hover, .btn-border:focus {
  border-color: #475733;
  background-color: #475733;
  color: #475733;
}

/* slim button */
.btn-sm,
.btn-slim {
  border-width: 1px;
  padding: 0.45rem 1.2rem;
  font-size: 0.7rem;
  font-weight: normal;
}
.btn-sm.btn-border,
.btn-slim.btn-border {
  padding: 0.5rem 1.2rem;
  font-size: 0.6rem;
}

/* avrg button */
.btn-md,
.btn-avrg {
  border-width: 2px;
  padding: 0.5rem 1.4rem;
  font-size: 0.8rem;
}
.btn-md.btn-border,
.btn-avrg.btn-border {
  padding: 0.6rem 1.3rem;
  font-size: 0.7rem;
}

/* phat button */
.btn-lg,
.btn-phat {
  border-width: 2px;
  padding: 0.8rem 2.4rem;
  font-size: 0.8rem;
  font-weight: bold;
}
.btn-lg.btn-border,
.btn-phat.btn-border {
  padding: 0.7rem 2.4rem;
  font-size: 0.8rem;
}

/* ===== site specific ===== */
/*
|––––––––––––––––––––––––––––––––––––––––––––––––––
| CORE: Media
|––––––––––––––––––––––––––––––––––––––––––––––––––
*/
figure {
  margin: 0;
}

video, img, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

svg {
  width: 100%;
  height: 100%;
}

.svg-fill {
  fill: currentColor;
}

.svg-stroke {
  fill: none;
  stroke: currentColor;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
}

.no-linecap {
  stroke-linecap: unset;
}

.no-linejoin {
  stroke-linejoin: unset;
}

/* ===== Inner Border ===== */
.inner-border {
  position: relative;
}
.inner-border::after {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: 1.6rem;
  border: 2px solid #ececec;
  content: "";
}
@media (max-width: 479px) {
  .inner-border::after {
    margin: 1rem;
    border-width: 1px;
  }
}
@media (min-width: 480px) and (max-width: 767px) {
  .inner-border::after {
    margin: 1.2rem;
  }
}

.border {
  border: 2px solid #ececec;
}

.outer-border {
  position: relative;
}
.outer-border::before {
  position: absolute;
  top: -1em;
  right: -1em;
  left: -1em;
  bottom: -1em;
  border: 1px solid #ececec;
  font-size: 0.8rem;
  content: "";
}

@media (max-width: 767px) {
  .mb\:outer-border\:none::before {
    display: none;
  }
}
@media (min-width: 768px) {
  .dt\:outer-border\:none::before {
    display: none;
  }
}
/* ===== Double Image ===== */
.double-image {
  display: flex;
  flex-flow: row nowrap;
}
.double-image .bg-img {
  max-width: 50%;
}

/*
|––––––––––––––––––––––––––––––––––––––––––––––––––
| CORE: Backgrounds
|––––––––––––––––––––––––––––––––––––––––––––––––––
*/
/* === BACKGROUND IMAGE === */
.bg-img,
.background-image {
  display: block;
  position: relative;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
}
.bg-img::before,
.background-image::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: "";
}
.bg-img::after,
.background-image::after {
  display: block;
  content: "";
}

/* === BACKGROUND OVERLAYS === */
.bg-overlay-lighten::before {
  background-color: rgba(255, 255, 255, 0.3);
}

.bg-overlay-darken::before {
  background-color: rgba(0, 0, 0, 0.3);
}

.bg-overlay-primary::before {
  background-color: rgba(235, 233, 231, 0.8);
}

/* === IMAGE RATIOS === */
.bg-square::after,
.ratio-1-1::after {
  padding-top: 100%;
}

.bg-landscape::after,
.ratio-4-3::after {
  padding-top: 75%;
}

.bg-portrait::after,
.ratio-3-4::after {
  padding-top: 133.333333%;
}

.bg-wide::after,
.ratio-16-9::after {
  padding-top: 56.25%;
}

.bg-tall::after,
.ratio-9-16::after {
  padding-top: 177.777777%;
}

.bg-ultra-wide::after,
.ratio-21-9::after {
  padding-top: 42.8571%;
}

/* === BORDER RADIUS === */
.bg-circle {
  border-radius: 50%;
  overflow: hidden;
}

/* === BACKGROUND ELEMENTS === */
.relative {
  position: relative;
}

.bg-elem,
.background-element {
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: "";
}

/* === BACKGROUND COLORS === */
.bg-white,
.background-white {
  background-color: #ffffff;
}

.bg-off-white,
.background-off-white {
  background-color: #f8f8f8;
}

.bg-gray,
.background-gray {
  background-color: #808080;
}

.bg-off-black,
.background-off-black {
  background-color: #202020;
}

.bg-dark,
.background-dark {
  background-color: #475733;
}

.bg-primary,
.background-primary {
  background-color: #ebe9e7;
}

.bg-light,
.background-light {
  background-color: #f6f4ef;
}

.bg-accent,
.background-accent {
  background-color: #c8b573;
}

.bg-alt,
.background-alt {
  background-color: #fc612a;
}

/* ==========================================================================
===== LAYOUT STYLES =====
=
= 
=
========================================================================== */
/*
|––––––––––––––––––––––––––––––––––––––––––––––––––
| LAYOUT: Utility
|––––––––––––––––––––––––––––––––––––––––––––––––––
*/
/* ===== WIDTHS ===== */
.w-full {
  width: 100vw;
}

.w-100 {
  width: 100%;
}

.w-87 {
  width: 87.5%;
}

.w-75 {
  width: 75%;
}

.w-66 {
  width: 66.666666%;
}

.w-62 {
  width: 62.5%;
}

.w-50 {
  width: 50%;
}

.w-37 {
  width: 37.5%;
}

.w-33 {
  width: 33.333333%;
}

.w-25 {
  width: 25%;
}

.w-12 {
  width: 12.5%;
}

/* ===== MAX WIDTHS ===== */
[class*=max-w] {
  width: 100%;
}

/* static */
.max-w-480 {
  max-width: 480px;
}

.max-w-640 {
  max-width: 640px;
}

.max-w-720 {
  max-width: 720px;
}

.max-w-1080 {
  max-width: 1080px;
}

.max-w-1280 {
  max-width: 1280px;
}

.max-w-1440 {
  max-width: 1440px;
}

.max-w-1600 {
  max-width: 1600px;
}

/* dynamic */
.max-w {
  max-width: 1440px;
}

.max-w-xs {
  max-width: 16rem;
}

.max-w-sm {
  max-width: 36rem;
}

.max-w-md {
  max-width: 54rem;
}

.max-w-lg {
  max-width: 64rem;
}

.max-w-xl {
  max-width: 80rem;
}

/* text */
[class*=text-max] {
  width: 100%;
}

.text-max-sm {
  max-width: 32rem;
}

.text-max {
  max-width: 36rem;
}

.text-max-lg {
  max-width: 40rem;
}

/* ===== ALIGNMENT ===== */
/* align self */
.align-center {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

.align-left,
.float-left {
  float: left;
}

.align-right,
.float-right {
  float: right;
}

.align-full,
.force-full {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  max-width: unset;
}

/* ===== OTHER ===== */
.cf::after,
.clearfix::after {
  display: block;
  width: 100%;
  height: 0;
  float: none;
  clear: both;
  content: "";
}

/* for when you want a box to continue outside its parent */
/* ===== WHITESPACE ===== */
/*
|
| Syntax
| [rule]-[direction]-[size] 
|
| size values are found in settings.scss
|
| p = padding
| m = margin
|
| sm = small
| md = medium
| lg = large
|
| t = top
| r = right
| b = bottom
| l = left
|
| v = vertical
| h = horizontal
|
*/
/* === padding === */
/* none */
.p-0 {
  padding: 0;
}

.p-t-0 {
  padding-top: 0;
}

.p-r-0 {
  padding-right: 0;
}

.p-b-0 {
  padding-bottom: 0;
}

.p-l-0 {
  padding-left: 0;
}

.p-h-0 {
  padding-left: 0;
  padding-right: 0;
}

.p-v-0 {
  padding-top: 0;
  padding-bottom: 0;
}

/* dynamic */
.p-sm {
  padding: 1.6rem;
}

.p-md {
  padding: 2.4rem;
}

.p-lg {
  padding: 3.2rem;
}

.p-t {
  padding-top: 1.6rem;
}

.p-r {
  padding-right: 1.6rem;
}

.p-b {
  padding-bottom: 1.6rem;
}

.p-l {
  padding-left: 1.6rem;
}

/* surrounding */
.p-1 {
  padding: 0.4rem;
}

.p-2 {
  padding: 0.8rem;
}

.p-3 {
  padding: 1.2rem;
}

.p-4 {
  padding: 1.6rem;
}

.p-5 {
  padding: 2rem;
}

.p-6 {
  padding: 2.4rem;
}

.p-7 {
  padding: 2.8rem;
}

.p-8 {
  padding: 3.2rem;
}

/* horizontal */
.p-h-1 {
  padding-left: 0.4rem;
  padding-right: 0.4rem;
}

.p-h-2 {
  padding-left: 0.8rem;
  padding-right: 0.8rem;
}

.p-h-3 {
  padding-left: 1.2rem;
  padding-right: 1.2rem;
}

.p-h-4 {
  padding-left: 1.6rem;
  padding-right: 1.6rem;
}

.p-h-5 {
  padding-left: 2rem;
  padding-right: 2rem;
}

.p-h-6 {
  padding-left: 2.4rem;
  padding-right: 2.4rem;
}

.p-h-7 {
  padding-left: 2.8rem;
  padding-right: 2.8rem;
}

.p-h-8 {
  padding-left: 3.2rem;
  padding-right: 3.2rem;
}

/* vertical */
.p-v-1 {
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}

.p-v-2 {
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
}

.p-v-3 {
  padding-top: 1.2rem;
  padding-bottom: 1.2rem;
}

.p-v-4 {
  padding-top: 1.6rem;
  padding-bottom: 1.6rem;
}

.p-v-5 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.p-v-6 {
  padding-top: 2.4rem;
  padding-bottom: 2.4rem;
}

.p-v-7 {
  padding-top: 2.8rem;
  padding-bottom: 2.8rem;
}

.p-v-8 {
  padding-top: 3.2rem;
  padding-bottom: 3.2rem;
}

/* === margin === */
/* none */
.m-0 {
  margin: 0;
}

.m-t-0 {
  margin-top: 0px;
}

.m-r-0 {
  margin-right: 0px;
}

.m-b-0 {
  margin-bottom: 0px;
}

.m-l-0 {
  margin-left: 0px;
}

.m-v-0 {
  margin-top: 0;
  margin-bottom: 0;
}

.m-h-0 {
  margin-right: 0;
  margin-left: 0;
}

/* dynamic */
.m-sm {
  margin: 1.6rem;
}

.m-md {
  margin: 2.4rem;
}

.m-lg {
  margin: 3.2rem;
}

.m-t {
  margin-top: 1.6rem;
}

.m-r {
  margin-right: 1.6rem;
}

.m-b {
  margin-bottom: 1.6rem;
}

.m-l {
  margin-left: 1.6rem;
}

/* top */
.m-t-1 {
  margin-top: 0.4rem;
}

.m-t-2 {
  margin-top: 0.8rem;
}

.m-t-3 {
  margin-top: 1.2rem;
}

.m-t-4 {
  margin-top: 1.6rem;
}

.m-t-5 {
  margin-top: 2rem;
}

.m-t-6 {
  margin-top: 2.4rem;
}

.m-t-7 {
  margin-top: 2.8rem;
}

.m-t-8 {
  margin-top: 3.2rem;
}

/* right */
.m-r-1 {
  margin-right: 0.4rem;
}

.m-r-2 {
  margin-right: 0.8rem;
}

.m-r-3 {
  margin-right: 1.2rem;
}

.m-r-4 {
  margin-right: 1.6rem;
}

.m-r-5 {
  margin-right: 2rem;
}

.m-r-6 {
  margin-right: 2.4rem;
}

.m-r-7 {
  margin-right: 2.8rem;
}

.m-r-8 {
  margin-right: 3.2rem;
}

/* bottom */
.m-b-1 {
  margin-bottom: 0.4rem;
}

.m-b-2 {
  margin-bottom: 0.8rem;
}

.m-b-3 {
  margin-bottom: 1.2rem;
}

.m-b-4 {
  margin-bottom: 1.6rem;
}

.m-b-5 {
  margin-bottom: 2rem;
}

.m-b-6 {
  margin-bottom: 2.4rem;
}

.m-b-7 {
  margin-bottom: 2.8rem;
}

.m-b-8 {
  margin-bottom: 3.2rem;
}

/* left */
.m-l-1 {
  margin-left: 0.4rem;
}

.m-l-2 {
  margin-left: 0.8rem;
}

.m-l-3 {
  margin-left: 1.2rem;
}

.m-l-4 {
  margin-left: 1.6rem;
}

.m-l-5 {
  margin-left: 2rem;
}

.m-l-6 {
  margin-left: 2.4rem;
}

.m-l-7 {
  margin-left: 2.8rem;
}

.m-l-8 {
  margin-left: 3.2rem;
}

/*
|––––––––––––––––––––––––––––––––––––––––––––––––––
| LAYOUT: Main Layout
|––––––––––––––––––––––––––––––––––––––––––––––––––
*/
/* === outer === */
.outer {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1440px;
}
.outer--half {
  max-width: 720px;
}

/* === wrapper === */
.wrapper {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 54rem;
}
.wrapper--half {
  max-width: 27rem;
}

/* === inner === */
.inner {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 36rem;
}
.inner--half {
  max-width: 18rem;
}

/* === block === */
@media (max-width: 479px) {
  .frame,
[class^=frame--] {
    margin-top: 64px;
    margin-bottom: 64px;
  }
}
@media (min-width: 480px) and (max-width: 1439px) {
  .frame,
[class^=frame--] {
    margin-top: calc(64px + 32 * (100vw - 480px) / 960);
    margin-bottom: calc(64px + 32 * (100vw - 480px) / 960);
  }
}
@media (min-width: 1440px) {
  .frame,
[class^=frame--] {
    margin-top: 96px;
    margin-bottom: 96px;
  }
}

.frame--top {
  margin-bottom: 0;
}
.frame--bot {
  margin-top: 0;
}
.frame--not {
  margin-top: 0;
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .mb\:frame--top {
    margin-bottom: 0;
  }
  .mb\:frame--bot {
    margin-top: 0;
  }
  .mb\:frame--not {
    margin-top: 0;
    margin-bottom: 0;
  }
}
@media (min-width: 768px) {
  .dt\:frame--top {
    margin-bottom: 0;
  }
  .dt\:frame--bot {
    margin-top: 0;
  }
  .dt\:frame--not {
    margin-top: 0;
    margin-bottom: 0;
  }
}
/* === trim === */
@media (max-width: 479px) {
  .trim,
[class^=trim--] {
    padding-top: 64px;
    padding-bottom: 64px;
  }
}
@media (min-width: 480px) and (max-width: 1439px) {
  .trim,
[class^=trim--] {
    padding-top: calc(64px + 32 * (100vw - 480px) / 960);
    padding-bottom: calc(64px + 32 * (100vw - 480px) / 960);
  }
}
@media (min-width: 1440px) {
  .trim,
[class^=trim--] {
    padding-top: 96px;
    padding-bottom: 96px;
  }
}

.trim--top {
  padding-bottom: 0;
}
.trim--bot {
  padding-top: 0;
}
.trim--not {
  padding-top: 0;
  padding-bottom: 0;
}

@media (max-width: 767px) {
  .mb\:trim--top {
    padding-bottom: 0;
  }
  .mb\:trim--bot {
    padding-top: 0;
  }
  .mb\:trim--not {
    padding-top: 0;
    padding-bottom: 0;
  }
}
@media (min-width: 768px) {
  .dt\:trim--top {
    padding-bottom: 0;
  }
  .dt\:trim--bot {
    padding-top: 0;
  }
  .dt\:trim--not {
    padding-top: 0;
    padding-bottom: 0;
  }
}
/* === spacer === */
@media (max-width: 479px) {
  .spacer,
[class^=spacer--] {
    margin-right: 20px;
    margin-left: 20px;
  }
}
@media (min-width: 480px) and (max-width: 1439px) {
  .spacer,
[class^=spacer--] {
    margin-right: calc(20px + 44 * (100vw - 480px) / 960);
    margin-left: calc(20px + 44 * (100vw - 480px) / 960);
  }
}
@media (min-width: 1440px) {
  .spacer,
[class^=spacer--] {
    margin-right: 64px;
    margin-left: 64px;
  }
}

.spacer--right {
  margin-left: 0;
}
.spacer--left {
  margin-right: 0;
}

@media (max-width: 767px) {
  .mb\:spacer--not {
    margin-left: 0;
    margin-right: 0;
  }
}
@media (min-width: 768px) {
  .dt\:spacer--not {
    margin-left: 0;
    margin-right: 0;
  }
}
/* === gutter === */
@media (max-width: 479px) {
  .gutter,
[class^=gutter--] {
    padding-right: 20px;
    padding-left: 20px;
  }
}
@media (min-width: 480px) and (max-width: 1439px) {
  .gutter,
[class^=gutter--] {
    padding-right: calc(20px + 44 * (100vw - 480px) / 960);
    padding-left: calc(20px + 44 * (100vw - 480px) / 960);
  }
}
@media (min-width: 1440px) {
  .gutter,
[class^=gutter--] {
    padding-right: 64px;
    padding-left: 64px;
  }
}

.gutter--right {
  padding-left: 0;
}
.gutter--left {
  padding-right: 0;
}

@media (max-width: 767px) {
  .mb\:gutter--not {
    padding-left: 0;
    padding-right: 0;
  }
}
@media (min-width: 768px) {
  .dt\:gutter--not {
    padding-left: 0;
    padding-right: 0;
  }
}
/*
|––––––––––––––––––––––––––––––––––––––––––––––––––
| LAYOUT: Flex Layout 
|––––––––––––––––––––––––––––––––––––––––––––––––––
|
| Author: Tyler Underwood
|
| A flex-column must be a child element of a parent with these rules:
| display: flex;
| flex-flow: row wrap;
| All flex alignment rules can be added to the parents as well.
|
|––––––––––––––––––––––––––––––––––––––––––––––––––
*/
/* === Flex Helpers === */
.flex {
  display: flex;
}

.justy-start {
  justify-content: start;
}

.justy-end {
  justify-content: end;
}

.justy-center {
  justify-content: center;
}

.justy-between {
  justify-content: space-between;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.items-center {
  align-items: center;
}

.items-between {
  align-items: space-between;
}

/* === Flex Row === */
.flex-row {
  display: flex;
  flex-flow: row wrap;
}
.flex-row--top {
  align-items: flex-start;
}
.flex-row--right {
  justify-content: flex-end;
}
.flex-row--bottom {
  align-items: flex-end;
}
.flex-row--left {
  justify-content: flex-start;
}
.flex-row--middle {
  align-items: center;
}
.flex-row--center {
  justify-content: center;
}
.flex-row--between {
  justify-content: space-between;
}
.flex-row--around {
  justify-content: space-around;
}
.flex-row--evenly {
  justify-content: space-evenly;
}

/* === Flex Columns === */
.flex-col {
  display: flex;
  flex-flow: column wrap;
}
.flex-col--top {
  justify-content: flex-start;
}
.flex-col--right {
  align-items: flex-end;
}
.flex-col--bottom {
  justify-content: flex-end;
}
.flex-col--left {
  align-items: flex-start;
}
.flex-col--middle {
  justify-content: center;
}
.flex-col--center {
  align-items: center;
}
.flex-col--between {
  align-content: space-between;
}
.flex-col--around {
  align-content: space-around;
}
.flex-col--evenly {
  align-content: space-evenly;
}

/* === AUTO WRAP === */
.auto-wrap {
  display: flex;
  flex-flow: row wrap;
  margin: -0.8rem;
}
.auto-wrap__item {
  margin: 0.8rem;
}
.auto-wrap--sm {
  margin: -0.4rem;
}
.auto-wrap--sm .auto-wrap__item {
  margin: 0.4rem;
}
.auto-wrap--lg {
  margin: -1.6rem;
}
.auto-wrap--lg .auto-wrap__item {
  margin: 1.6rem;
}

/* === FILLER === */
.filler {
  flex: 1 1 auto;
}

/* === Flex Columns === */
@media (max-width: 480px) {
  .flex-tri-col + .flex-tri-col {
    margin-top: 2rem;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  .flex-tri-col {
    margin: 0 48px 0 0;
    width: calc(100%/2 - (48px * 1) / 2);
  }
  .flex-tri-col:nth-child(n+3) {
    margin-top: 48px;
  }
  .flex-tri-col:last-child, .flex-tri-col:nth-child(2n) {
    margin-right: 0;
  }
}
@media (min-width: 768px) {
  .flex-tri-col {
    margin: 0 64px 0 0;
    width: calc(100%/3 - (64px * 2) / 3);
  }
  .flex-tri-col:nth-child(n+4) {
    margin-top: 64px;
  }
  .flex-tri-col:last-child, .flex-tri-col:nth-child(3n) {
    margin-right: 0;
  }
}

/*
|––––––––––––––––––––––––––––––––––––––––––––––––––
| LAYOUT: Full Row
|––––––––––––––––––––––––––––––––––––––––––––––––––
*/
.full-row:not([class*=bg-]):not([class*=background-]) {
  padding-top: 0;
  padding-bottom: 0;
}

.page.has-page-intro {
  margin-top: 0;
}

/*
|––––––––––––––––––––––––––––––––––––––––––––––––––
| LAYOUT: Half Row
|––––––––––––––––––––––––––––––––––––––––––––––––––
*/
.half-row {
  display: flex;
  flex-flow: row;
  padding: 0;
  /* === BLOCK === */
  /* === BLOCK INNER === */
  /* ===== BELOW TABLET ===== */
  /* ===== ABOVE TABLET ===== */
  /* ===== SPECIAL COMPONENTS ===== */
  /* === FILLER === */
  /* === HEADING CONTENT === */
  /* === IMAGE FULL === */
}
.half-row__column-left, .half-row__column-right {
  display: flex;
  flex-flow: column;
}
.half-row__block {
  display: flex;
  position: relative;
  width: 100%;
}
.half-row__block:first-child {
  margin-top: 0;
}
.half-row__block:last-child {
  margin-bottom: 0;
}
.half-row__block:not(:first-child) {
  padding-top: 0;
}
.half-row__block:not(:last-child) {
  padding-bottom: 0;
}
.half-row__wrap {
  position: relative;
  width: 100%;
  max-width: 27rem;
}
@media (max-width: 767px) {
  .half-row:not(.column_right_on_top) {
    flex-flow: column;
  }
  .half-row.column_right_on_top {
    flex-flow: column-reverse;
  }
  .half-row__block {
    justify-content: center;
  }
  .half-row__wrap {
    max-width: unset;
    padding: 0;
  }
}
@media (min-width: 768px) {
  .half-row {
    flex-flow: row nowrap;
  }
  .half-row__column-left {
    width: 50%;
  }
  .half-row__column-left .half-row__block {
    justify-content: flex-end;
    padding-right: 0;
  }
  .half-row__column-left .half-row__wrap {
    padding-left: 0;
  }
  .half-row__column-right {
    width: 50%;
  }
  .half-row__column-right .half-row__block {
    justify-content: flex-start;
    padding-left: 0;
  }
  .half-row__column-right .half-row__wrap {
    padding-right: 0;
  }
}
.half-row .filler {
  flex: 1;
  margin: 0;
  width: 100%;
  padding: 0;
}
.half-row .filler__wrap {
  display: none;
}
.half-row .heading_content {
  position: relative;
}
.half-row .image_full {
  flex: 1;
  display: flex;
  padding: 0;
}
.half-row .image_full__wrap {
  flex: 1;
  display: flex;
  max-width: unset;
  padding: 0;
}
.half-row .image_full .bg-img {
  flex: 1;
}
@media (max-width: 767px) {
  .half-row .image_full .bg-img:after {
    padding-top: 56.25%;
  }
}
@media (min-width: 768px) {
  .half-row .image_full .bg-img {
    min-height: 24rem;
  }
}

/*
|––––––––––––––––––––––––––––––––––––––––––––––––––
| LAYOUT: Offset Layout
|––––––––––––––––––––––––––––––––––––––––––––––––––
*/
/* === SIMPLIFIED === */
.offset-main {
  width: 100%;
}
@media (min-width: 768px) {
  .offset-main {
    margin-left: auto;
    max-width: 36rem;
  }
}

.offset-main-wide {
  width: 100%;
}
@media (min-width: 768px) {
  .offset-main-wide {
    margin-left: auto;
    max-width: calc(720px + 9rem);
  }
}

.offset-aside {
  width: 100%;
}
@media (min-width: 768px) {
  .offset-aside {
    margin-right: auto;
    max-width: 18rem;
  }
}

.offset-aside-wide {
  width: 100%;
}
@media (min-width: 768px) {
  .offset-aside-wide {
    margin-right: auto;
    max-width: calc(720px - 9rem);
  }
}

/* === DYNAMIC === */
.offset-row {
  display: flex;
  /* === COLUMNS === */
}
.offset-row .column-main,
.offset-row .column-aside {
  display: flex;
  flex-flow: column;
  width: 100%;
}
.offset-row .offset-block {
  display: flex;
  width: 100%;
  /* === COLUMN INNER === */
}
.offset-row .offset-block:first-child {
  margin-top: 0;
}
.offset-row .offset-block:last-child {
  margin-bottom: 0;
}
.offset-row .offset-block:not(:first-child) {
  padding-top: 0;
}
.offset-row .offset-block:not(:last-child) {
  padding-bottom: 0;
}
.offset-row .offset-block .offset-inner {
  flex: 1;
  width: 100%;
}
.offset-row:not([class*=bg-]):not([class*=background-]) .offset-block {
  padding-top: 0;
  padding-bottom: 0;
}
@media (max-width: 767px) {
  .offset-row {
    flex-flow: column nowrap;
  }
  .offset-row .column-main,
.offset-row .column-aside {
    max-width: 100%;
  }
  .offset-row .column-main .offset-block,
.offset-row .column-aside .offset-block {
    max-width: 100%;
  }
  .offset-row .column-main .offset-inner,
.offset-row .column-aside .offset-inner {
    padding: 0;
  }
}
@media (min-width: 768px) {
  .offset-row {
    flex-flow: row nowrap;
  }
  .offset-row .column-main {
    max-width: calc(50% - 27rem + 36rem);
  }
  .offset-row .column-main .offset-block {
    display: flex;
    justify-content: flex-end;
    max-width: calc(720px + 9rem);
    padding-right: 0;
  }
  .offset-row .column-main .offset-inner {
    max-width: 36rem;
    padding-left: 0;
  }
  .offset-row .column-aside {
    max-width: calc(50% + 27rem - 36rem);
  }
  .offset-row .column-aside .offset-block {
    display: flex;
    justify-content: flex-start;
    max-width: calc(720px - 9rem);
    padding-left: 0;
  }
  .offset-row .column-aside .offset-inner {
    max-width: 18rem;
    padding-right: 0;
  }
}

/* ==========================================================================
===== MODULES STYLES =====
=
= A module in this instance, is something that has a general purpose and might contain more specific components.
=
========================================================================== */
/*
|––––––––––––––––––––––––––––––––––––––––––––––––––
| COMPONENTS: Transcription
|––––––––––––––––––––––––––––––––––––––––––––––––––
|
| For sections where you want your lists, links and etc. to look nice,
| and so you don't have to backpedal any of the styles where you don't need.
|
|––––––––––––––––––––––––––––––––––––––––––––––––––
*/
/* === Headings === */
.heading, .transcription h1, .transcription h2, .transcription h3, .transcription h4, .transcription h5, .transcription h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  margin: 0;
  padding-top: 2em;
  line-height: 1.2;
  font-weight: bold;
  font-family: "Domine", serif;
}
.heading:first-child, .transcription h1:first-child, .transcription h2:first-child, .transcription h3:first-child, .transcription h4:first-child, .transcription h5:first-child, .transcription h6:first-child,
.h1:first-child, .h2:first-child, .h3:first-child, .h4:first-child, .h5:first-child, .h6:first-child {
  margin-top: -0.24em;
  padding-top: 0;
}
.heading:last-child, .transcription h1:last-child, .transcription h2:last-child, .transcription h3:last-child, .transcription h4:last-child, .transcription h5:last-child, .transcription h6:last-child,
.h1:last-child, .h2:last-child, .h3:last-child, .h4:last-child, .h5:last-child, .h6:last-child {
  margin-bottom: -0.2em;
  padding-bottom: 0;
}
.heading + p, .transcription h1 + p, .transcription h2 + p, .transcription h3 + p, .transcription h4 + p, .transcription h5 + p, .transcription h6 + p,
.h1 + p, .h2 + p, .h3 + p, .h4 + p, .h5 + p, .h6 + p {
  margin-top: 0.5rem;
}

.h1, .transcription h1,
h1.default {
  font-size: 3.2rem;
  color: #475733;
}

.h2, .transcription h2,
h2.default {
  font-size: 2.4rem;
  color: #475733;
}

.h3, .transcription h3,
h3.default {
  font-size: 1.6rem;
  color: #475733;
}

.h4, .transcription h4,
h4.default {
  font-size: 1.2rem;
  color: #475733;
}

.h5, .transcription h5,
h5.default {
  font-size: 1.2rem;
  color: #475733;
}

.h6, .transcription h6,
h6.default {
  font-size: 1.2rem;
  color: #ae9b5b;
}

.hgroup .h1:not(:last-child), .hgroup .h2:not(:last-child), .hgroup .h3:not(:last-child), .hgroup .h4:not(:last-child), .hgroup .h5:not(:last-child), .hgroup .h6:not(:last-child),
.hgroup h1:not(:last-child), .hgroup h2:not(:last-child), .hgroup h3:not(:last-child), .hgroup h4:not(:last-child), .hgroup h5:not(:last-child), .hgroup h6:not(:last-child) {
  margin-bottom: 0;
  padding-bottom: 0;
}
.hgroup .h1:not(:first-child), .hgroup .h2:not(:first-child), .hgroup .h3:not(:first-child), .hgroup .h4:not(:first-child), .hgroup .h5:not(:first-child), .hgroup .h6:not(:first-child),
.hgroup h1:not(:first-child), .hgroup h2:not(:first-child), .hgroup h3:not(:first-child), .hgroup h4:not(:first-child), .hgroup h5:not(:first-child), .hgroup h6:not(:first-child) {
  margin-top: 0;
  padding-top: 0;
}

/* === Anchor Tags === */
.a,
a:not([class]) {
  color: #c8b573;
  transition: color 200ms ease-in-out;
}
.a:hover, .a:focus,
a:not([class]):hover,
a:not([class]):focus {
  color: #fc612a;
}

.hyperlink, .transcription a,
a.default {
  background-repeat: no-repeat;
  background-image: linear-gradient(transparent calc(100% - 0.2em), #fc612a 0), linear-gradient(transparent calc(100% - 0.2em), #f6f4ef 0);
  background-size: 0 100%, 100% 100%;
  color: #333333;
  transition: background 200ms ease-in-out;
}
.hyperlink:hover, .transcription a:hover,
a.default:hover {
  color: #333333;
  background-size: 100% 100%, 100% 100%;
}

/* === List Types === */
.ul, .transcription ul,
ul.default {
  margin: 1.6rem 0 0;
  max-width: 36rem;
  line-height: 1.4;
  list-style: none;
}
.ul:first-child, .transcription ul:first-child,
ul.default:first-child {
  margin-top: -0.4em;
}
.ul:last-child, .transcription ul:last-child,
ul.default:last-child {
  margin-bottom: -0.3em;
}
.ul li, .transcription ul li,
ul.default li {
  position: relative;
  margin: 0.8em 0 0;
  padding: 0 0 0 2em;
}
.ul li:first-child, .transcription ul li:first-child,
ul.default li:first-child {
  margin-top: 0;
}
.ul li:before, .transcription ul li:before,
ul.default li:before {
  position: absolute;
  top: 0.84em;
  left: 0;
  transform: translateY(-50%);
  width: 0.4em;
  height: 0.4em;
  background-color: #c8b573;
  content: "";
}

.ol, .transcription ol,
ol.default {
  margin: 1.6rem 0 0;
  max-width: 36rem;
  padding: 0 0 0 1.2em;
  line-height: 1.4;
  list-style: none;
}
.ol:first-child, .transcription ol:first-child,
ol.default:first-child {
  margin-top: -0.4em;
}
.ol:last-child, .transcription ol:last-child,
ol.default:last-child {
  margin-bottom: -0.3em;
}
.ol li, .transcription ol li,
ol.default li {
  margin: 0.8em 0 0;
  padding: 0 0 0 0.8em;
  list-style: decimal outside;
}
.ol li:first-child, .transcription ol li:first-child,
ol.default li:first-child {
  margin-top: 0;
}

/* === Blockquote === */
.blockquote, .transcription blockquote,
blockquote.default {
  margin: 1.6rem 0 0;
  max-width: 36rem;
  border-left: 0.2em solid #fc612a;
  padding: 0 0 0 1.2em;
  font-size: 1.2rem;
}
.blockquote p, .transcription blockquote p,
blockquote.default p {
  line-height: inherit;
  font-size: inherit;
}
.blockquote:first-child, .transcription blockquote:first-child,
blockquote.default:first-child {
  margin-top: 0;
}

.cite cite.default, .transcription cite cite.default {
  display: block;
  margin: 0;
  padding: 0 0.4rem 0 0;
  text-align: right;
  line-height: 1.2rem;
  font-size: 0.8rem;
}
.cite cite.default:before, .transcription cite cite.default:before {
  content: "\2014";
}

/* === Putting it all together === */
.transcription {
  visibility: visible;
}
.transcription ul {
  clear: both;
}
.transcription ol {
  clear: both;
}
.transcription blockquote {
  clear: both;
}
@media (max-width: 639px) {
  .transcription .u-double-list {
    margin: 0 auto;
  }
}
@media (min-width: 640px) {
  .transcription .u-double-list {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    list-style-type: disc;
    margin: -0.5rem auto;
  }
  .transcription .u-double-list li {
    margin: 0;
    width: 50%;
    padding: 0.5rem;
    padding-left: 15%;
    line-height: 1;
  }
  .transcription .u-double-list li::before {
    left: 20%;
  }
  .transcription .u-double-list::after {
    display: block;
    width: 100%;
    height: 0;
    float: none;
    clear: both;
    content: "";
  }
}
.transcription.double-list ul {
  list-style-type: disc;
  margin: 1.1rem -0.5rem -0.5rem;
}
.transcription.double-list ul li {
  margin: 0;
  float: left;
  min-width: 9rem;
  width: 50%;
  padding: 0.5rem;
  line-height: 1;
  font-weight: bold;
  font-size: 0.9rem;
  color: #475733;
}
.transcription.double-list ul li:before {
  display: none;
}
.transcription.double-list ul::after {
  display: block;
  width: 100%;
  height: 0;
  float: none;
  clear: both;
  content: "";
}
.transcription strong {
  font-size: 0.9rem;
}
.transcription em {
  font-size: 0.9rem;
  font-style: normal;
  color: #475733;
}

/* ===== Extra Componants ===== */
.heading-fancy {
  display: inline-flex;
  align-items: center;
  text-align: center;
  font-weight: bold;
  font-size: 2rem;
  /* white-space: nowrap; */
  width: 100%;
}
.heading-fancy::before, .heading-fancy::after {
  flex: 1;
  height: 2px;
  background-color: #dadada;
  content: "";
}
.heading-fancy::before {
  margin-right: 1em;
}
.heading-fancy::after {
  margin-left: 1em;
}

.quote-fancy {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  text-align: center;
  font-weight: bold;
  font-size: 16px;
  line-height: 24px;
  color: #475733;
}
.quote-fancy::before, .quote-fancy::after {
  flex-shrink: 0;
  width: 3rem;
  height: 4px;
  background-color: #c8b573;
  content: "";
}
.quote-fancy__icon {
  display: block;
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 3.2rem;
  height: 3.2rem;
  color: #dadada;
}
.quote-fancy--large {
  font-size: 18px;
  line-height: 30px;
}
.quote-fancy--large::before, .quote-fancy--large::after {
  height: 6px;
}
@media (max-width: 767px) {
  .quote-fancy::before, .quote-fancy::after {
    position: absolute;
  }
  .quote-fancy::before {
    left: -1em;
    transform: translate(-100%);
  }
  .quote-fancy::after {
    right: -1em;
    transform: translate(100%);
  }
}
@media (min-width: 768px) {
  .quote-fancy::before {
    margin-right: 2em;
  }
  .quote-fancy::after {
    margin-left: 2em;
  }
}

.font-serif {
  font-family: "Domine", serif;
}

.font-sans-serif {
  font-family: "Domine", serif;
}

.font-geo {
  font-family: "Domine", serif;
}

.letter-space {
  letter-spacing: 1px;
}

.text-uppercase {
  text-transform: uppercase;
}

.break-words {
  word-break: break-word;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
}

/* === Font Size === */
.font-size-sm {
  font-size: 0.8rem;
}

.font-size {
  font-size: 1rem;
}

.font-size-lg {
  font-size: 1.2rem;
}

/* === Font Weight === */
.font-lighter {
  font-weight: lighter;
}

.font-normal {
  font-weight: normal;
}

.font-bold {
  font-weight: bold;
}

/* === Alignment === */
.text-left {
  text-align: left;
}

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

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

/* === Colors === */
/* text */
.text-dark {
  color: #333333;
}

.text-light {
  color: #ae9b5b;
}

.text-white {
  color: #ffffff;
}

.text-color {
  color: #333333;
}

.heading-color {
  color: #475733;
}

.heading-color-alt {
  color: #475733;
}

.label-color {
  color: #475733;
}

.link-color {
  color: #c8b573;
}

/* border */
.border-white {
  border-color: #ffffff;
}

.border-text-color {
  border-color: #333333;
}

.border-dark {
  border-color: #475733;
}

.border-primary {
  border-color: #ebe9e7;
}

.border-light {
  border-color: #f6f4ef;
}

.border-accent {
  border-color: #c8b573;
}

.border-alt {
  border-color: #fc612a;
}

/* svg */
.fill-white {
  fill: #ffffff;
}

.fill-text-color {
  fill: #333333;
}

.fill-dark {
  fill: #475733;
}

.fill-primary {
  fill: #ebe9e7;
}

.fill-light {
  fill: #f6f4ef;
}

.fill-accent {
  fill: #c8b573;
}

.fill-alt {
  fill: #fc612a;
}

.geo-text {
  text-transform: uppercase;
  font-size: 0.7rem;
  font-family: "Domine", serif;
  letter-spacing: 3px;
}

.inline-list {
  display: flex;
  flex-flow: row wrap;
}
.inline-list > .inline-list__item {
  display: block;
}
.inline-list > .inline-list__item + .inline-list__item::before {
  display: inline-block;
  margin: 0 0.5em;
  content: "";
}
.inline-list--pipline > .inline-list__item + .inline-list__item::before {
  display: inline-block;
  vertical-align: baseline;
  width: 1px;
  height: 0.7em;
  background-color: currentColor;
  margin: 0 1em;
  content: "";
}
.inline-list--middot > .inline-list__item + .inline-list__item::before {
  display: inline-block;
  vertical-align: baseline;
  margin: 0 1em;
  content: "\B7";
}
@media (max-width: 767px) {
  .inline-list > .inline-list__item {
    width: 100%;
    text-align: center;
    line-height: 1.6;
  }
  .inline-list > .inline-list__item + .inline-list__item::before {
    display: none;
  }
}

/*
|––––––––––––––––––––––––––––––––––––––––––––––––––
| COMPONENTS: Navigation
|––––––––––––––––––––––––––––––––––––––––––––––––––
*/
.site-nav {
  display: flex;
  flex-flow: row wrap;
  margin: -0.5em;
}
.site-nav__link {
  display: block;
  padding: 0.5em 0.7em;
  line-height: 1;
  letter-spacing: 1.5px;
  font-family: "Domine", serif;
  font-weight: normal;
  text-transform: uppercase;
  white-space: nowrap;
  color: inherit;
}

.nav {
  display: flex;
  flex-flow: row wrap;
  margin: -0.5em;
}
.nav__item {
  display: block;
  padding: 0.5em 0.7em;
  line-height: 1;
  letter-spacing: 2px;
  font-family: "Domine", serif;
  font-weight: normal;
  text-transform: uppercase;
  white-space: nowrap;
  color: inherit;
}

/*
|––––––––––––––––––––––––––––––––––––––––––––––––––
| COMPONENTS: Site Header
|––––––––––––––––––––––––––––––––––––––––––––––––––
*/
/* ===== VARIABLES ===== */
/* ===== LAYOUT ===== */
.site-header {
  position: absolute;
  top: 0;
  width: 100vw;
  z-index: 99;
}
.site-header .top-header {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 2;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid #a89e8f;
}
.site-header .inner-header {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  z-index: 2;
  left: 50%;
  transform: translateX(-50%);
  background-color: transparent;
  padding: 1rem;
  color: #475733;
}
.site-header .header-nav {
  flex-wrap: nowrap;
}
.site-header .drawer-nav {
  z-index: 1;
}
@media (max-width: 767px) {
  .site-header .inner-header {
    width: 100%;
  }
  .site-header .static-nav {
    display: none;
  }
}
@media (min-width: 768px) {
  .site-header .nav-button {
    display: none;
  }
}

/* ===== COMPONENTS ===== */
/* === LOGO === */
/*
| The logo height is how the header's whole size is determined, width will be automatically set.
*/
#logo {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: relative;
  padding: 0 20px;
  margin-bottom: 0.5rem;
  color: #475733;
}
#logo svg, #logo img {
  fill: currentColor;
  height: inherit;
}
.nav-open #logo, .nav-opening #logo {
  transition: color 240ms ease-in-out;
  color: #475733;
}
.nav-closed #logo, .nav-closing #logo {
  transition: color 240ms ease-in-out;
}
#logo .logo-bottom-text {
  position: absolute;
  bottom: 0px;
  width: 87%;
  white-space: nowrap;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
  font-weight: bold;
  font-size: 1rem;
}
@media (max-width: 479px) {
  #logo {
    height: 4rem;
  }
  #logo .logo-bottom-text {
    font-size: 0.7rem;
  }
}
@media (min-width: 480px) and (max-width: 767px) {
  #logo {
    height: 4.4rem;
  }
  #logo .logo-bottom-text {
    font-size: 0.8rem;
  }
}
@media (min-width: 768px) {
  #logo {
    height: 4.9rem;
  }
  #logo .logo-bottom-text {
    font-size: 14px;
  }
}

/* ===== CONTACT LINKS ===== */
.contact-meta {
  display: flex;
}
.contact-meta__link {
  display: flex;
  align-items: center;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-size: 0.7rem;
  font-family: "Domine", serif;
  color: #333333;
}
.contact-meta__link + .contact-meta__link::before {
  padding: 0 0.8rem;
  content: "\B7";
}
.contact-meta__icon {
  margin-right: 1rem;
  width: 0.7rem;
  color: #fc612a;
}
.contact-meta__text {
  display: inline-block;
}
@media (max-width: 767px) {
  .contact-meta {
    width: 100%;
    height: 2rem;
    text-align: center;
  }
  .contact-meta__link {
    font-size: 0.9rem;
  }
  .contact-meta > .contact-meta__link {
    justify-content: center;
    line-height: 1.6;
  }
  .contact-meta > .contact-meta__link + .contact-meta__link::before {
    display: none;
  }
}

/* ===== STATIC NAV ===== */
.nav.main-left,
.nav.main-right {
  display: flex;
  position: relative;
}
.nav.main-left a,
.nav.main-right a {
  font-weight: bold;
  color: #475733;
  transition: color 300ms ease-in-out;
}
.nav.main-left a:hover, .nav.main-left a:active,
.nav.main-right a:hover,
.nav.main-right a:active {
  color: #c8b573;
}
.nav.main-left a.hide,
.nav.main-right a.hide {
  display: none;
}

/* ===== DRAWER NAV ===== */
.drawer-nav {
  display: flex;
  flex-flow: column;
  position: fixed;
  top: 0;
  left: unset;
  bottom: 0;
  right: calc(100% - 100vw + 1px);
  transform-origin: left top;
  margin-right: calc(50vw - 50%);
  width: calc(100vw + 2px);
  height: 100vh;
  background-color: #ffffff;
  padding: 0;
  line-height: 1;
  text-align: center;
  font-size: 2rem;
  /* === NAVIGATION LINKS === */
}
.drawer-nav:before, .drawer-nav:after {
  position: absolute;
  z-index: 9;
  left: 0;
  width: 100%;
  height: 1em;
  content: "";
}
.drawer-nav:before {
  top: 0;
  background: linear-gradient(white 0%, rgba(255, 255, 255, 0) 100%);
}
.drawer-nav:after {
  bottom: 0;
  background: linear-gradient(rgba(255, 255, 255, 0) 0%, white 100%);
}
.drawer-nav .inner-nav {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin: 0 auto;
  width: 100%;
  max-width: 1440px;
  overflow-x: hidden;
  overflow-y: scroll;
  padding: 1em 0 0;
}
.drawer-nav .inner-nav::after {
  display: block;
  opacity: 0;
  min-height: 1em;
  content: " ";
}
.drawer-nav .inner-nav > * {
  margin: 0.5rem 0;
}
.drawer-nav .inner-nav > *:first-child {
  margin-top: 0;
}
.drawer-nav .inner-nav > *:last-child {
  margin-bottom: 0;
}
.drawer-nav a {
  display: inline-block;
  margin: 0 auto;
  padding: 0.8rem 1rem;
  text-transform: capitalize;
  font-family: "Domine", serif;
  font-weight: normal;
  color: #475733;
  transition: color 200ms ease-in-out;
}
.drawer-nav a:hover, .drawer-nav a:active {
  color: #c8b573;
}
.drawer-nav nav.site-header-nav {
  display: flex;
  flex-flow: column;
}
.drawer-nav nav.site-header-nav a {
  font-size: inherit;
}
@-webkit-keyframes open_drawer {
  from {
    opacity: 0;
    transform: scale(1.05);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes open_drawer {
  from {
    opacity: 0;
    transform: scale(1.05);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes close_drawer {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(1.05);
  }
}
@keyframes close_drawer {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(1.05);
  }
}
.nav-closed .drawer-nav {
  visibility: hidden;
}
.nav-opening .drawer-nav {
  -webkit-animation: open_drawer 240ms ease-in-out forwards;
          animation: open_drawer 240ms ease-in-out forwards;
}
.nav-opened .drawer-nav {
  visibility: visible;
}
.nav-closing .drawer-nav {
  -webkit-animation: close_drawer 240ms ease-in-out forwards;
          animation: close_drawer 240ms ease-in-out forwards;
}
@media (max-width: 479px) {
  .drawer-nav {
    padding-top: 10rem;
  }
  .drawer-nav:before {
    top: 10rem;
  }
}
@media (min-width: 480px) and (max-width: 767px) {
  .drawer-nav {
    padding-top: 10rem;
  }
  .drawer-nav:before {
    top: 10rem;
  }
}
@media (min-width: 768px) {
  .drawer-nav {
    padding-top: 9.7rem;
  }
  .drawer-nav:before {
    top: 9.7rem;
  }
}

/* === NAV BUTTON === */
.nav-button {
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  position: absolute;
  z-index: 99;
  right: 2em;
  outline: none;
  border: none;
  border-radius: 50%;
  width: 4em;
  height: 4em;
  background-color: transparent;
  padding: 2em;
  font-size: 8px;
  color: #fc612a;
  transition: color 250ms ease;
  cursor: pointer;
  /* ABOVE MOBILE */
  /* ABOVE TABLET */
}
.nav-button span {
  background-color: currentColor;
}
.nav-button .dots {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  width: 50%;
  min-width: 40px;
  overflow: hidden;
  cursor: pointer;
}
.nav-button .dots span {
  display: inline-block;
  border-radius: 50%;
  width: 5px;
  height: 5px;
}
.nav-button .close-x {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 3em;
  height: 3em;
  cursor: pointer;
}
.nav-button .close-x span {
  display: block;
  position: absolute;
  border-radius: 2px;
  width: 0;
  height: 4px;
}
.nav-button .close-x span:first-child {
  transform: rotate(-45deg);
}
.nav-button .close-x span:last-child {
  transform: rotate(45deg);
}
.nav-button:hover, .nav-button:focus {
  color: #c8b573;
}
.nav-open .nav-button, .nav-opening .nav-button {
  background-color: transparent;
}
.nav-open .nav-button .dots, .nav-opening .nav-button .dots {
  width: 0;
  min-width: 0;
  transition: all 240ms ease;
}
.nav-open .nav-button .close-x span, .nav-opening .nav-button .close-x span {
  width: 2rem;
  transition: all 240ms ease;
}
.nav-closed .nav-button, .nav-closing .nav-button {
  background-color: transparent;
}
.nav-closed .nav-button .dots, .nav-closing .nav-button .dots {
  transition: all 240ms ease;
}
.nav-closed .nav-button .close-x span, .nav-closing .nav-button .close-x span {
  transition: all 240ms ease;
}
@media (min-width: 480px) {
  .nav-button {
    font-size: 10px;
  }
}
@media (min-width: 768px) {
  .nav-button {
    font-size: 12px;
  }
}

/*
|––––––––––––––––––––––––––––––––––––––––––––––––––
| COMPONENTS: Site Footer
|––––––––––––––––––––––––––––––––––––––––––––––––––
*/
/* ===== LAYOUT ===== */
.site-footer {
  position: relative;
  z-index: 0;
  background-color: #ffffff;
  color: #c8b573;
}
.site-footer .footer-accent {
  position: absolute;
  top: 0;
  bottom: unset;
  transform: translateY(-100%);
  width: 100vw;
}
.site-footer .info-footer {
  position: relative;
  background-color: #ebe9e7;
}
.site-footer .bottom-footer {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  position: relative;
}

/* ===== COMPONENTS ===== */
.info-card {
  display: flex;
  background-color: #ffffff;
  color: #333333;
}
.info-card__img {
  position: relative;
}
.info-card__content {
  display: flex;
  flex-flow: column;
  padding: 3.2rem 1rem;
}
@media (min-width: 640px) {
  .info-card__content {
    padding: 3.2rem;
  }
}
.info-card__heading {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: bold;
  font-size: 0.85rem;
  color: #ae9b5b;
}
.info-card__number {
  margin-top: 0.8rem;
  letter-spacing: 0.2em;
  font-weight: bold;
  font-size: 1.2rem;
  color: #475733;
}
.info-card__text {
  display: block;
  line-height: 22px;
  font-size: 14px;
}
.info-card__dbl {
  display: flex;
  flex-direction: column;
  margin-top: 15px;
}
@media (min-width: 1024px) {
  .info-card__dbl {
    flex-direction: row;
  }
}
.info-card__email {
  color: #475733;
}
.info-card__email a {
  display: inline-block;
  color: #475733;
  font-size: 16px;
  padding: 20px 0 0 0;
}
.info-card__hours {
  display: flex;
  justify-content: space-around;
  line-height: 22px;
  font-size: 14px;
  margin-top: 15px;
  margin-left: 0px;
  padding-left: 0px;
}
@media (min-width: 768px) {
  .info-card__hours {
    justify-content: flex-start;
  }
}
@media (min-width: 1024px) {
  .info-card__hours {
    margin-top: 0;
    margin-left: 15px;
    padding-left: 15px;
    border-left: 2px solid #c8b573;
  }
}
.info-card__hourcol {
  padding: 0;
}
.info-card__hourcol:first-child {
  padding-right: 10px;
}
.info-card .social-icons {
  margin: -0.4em;
  font-size: 1.2rem;
}
.info-card .social-icons__link {
  margin: 0.4em;
}
.info-card .social-icons__link svg {
  color: #475733 !important;
}
@media (max-width: 767px) {
  .info-card {
    flex-flow: column;
  }
  .info-card__img .bg-img {
    position: relative;
  }
  .info-card__img .bg-img::after {
    padding-top: 56.25%;
  }
  .info-card__content {
    align-items: center;
    text-align: center;
  }
  .info-card__heading {
    font-size: 1.2rem;
  }
  .info-card__number {
    font-size: 1.6rem;
  }
  .info-card__text {
    font-size: 1rem;
  }
}
@media (min-width: 768px) {
  .info-card__half {
    width: 50%;
  }
}

.nav.footer {
  justify-content: center;
  margin: 0 auto;
  color: #ae9b5b;
}
@media (max-width: 639px) {
  .nav.footer {
    flex-flow: column;
    align-items: center;
  }
}
.nav.footer .nav__item {
  font-size: 0.75rem;
  padding: 0;
}
.nav.footer a {
  display: inline-block;
  padding: 10px 8px;
  transition: color 300ms ease-in-out;
}
.nav.footer a:hover, .nav.footer a:active {
  color: #475733;
}

.bottom-footer .geo-text {
  justify-content: center;
  line-height: 1.6;
}
.bottom-footer .geo-text a {
  color: #ae9b5b;
}

.footer-divide {
  margin: 0;
  color: #c8b573;
}

.state-logo {
  display: block;
  margin: 0 auto;
  width: 4rem;
  fill: #c8b573;
}

/* ===== RESPONSIVE ===== */
/*
|––––––––––––––––––––––––––––––––––––––––––––––––––
| COMPONENTS: Hero
|––––––––––––––––––––––––––––––––––––––––––––––––––
*/
/* ===== VARIABLES ===== */
/* ===== LAYOUT ===== */
.hero {
  display: flex;
  position: relative;
  z-index: 1;
  background-color: #f6f4ef;
}
@media (max-width: 479px) {
  .hero {
    padding-top: 10rem;
  }
}
@media (min-width: 480px) and (max-width: 767px) {
  .hero {
    padding-top: 10rem;
  }
}
@media (min-width: 768px) {
  .hero {
    padding-top: 9.7rem;
  }
}

/* ===== COMPONENTS ===== */
.hero-image-wrap {
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
}
.hero-image-wrap.hero-overlay-none::after {
  display: none;
  background: none;
}
.hero-image-wrap.hero-overlay-light::after {
  background: linear-gradient(45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 30%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0) 100%);
}
.hero-image-wrap.hero-overlay::after {
  background: linear-gradient(45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 25%, rgba(0, 0, 0, 0.4) 55%, rgba(0, 0, 0, 0) 100%);
}
.hero-image-wrap.hero-overlay-dark::after {
  background: linear-gradient(45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 20%, rgba(0, 0, 0, 0.5) 60%, rgba(0, 0, 0, 0) 100%);
}
.hero.has-image .hero-image-wrap::after {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: "";
}

.hero-image {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.hero.has-image .hero-content {
  color: #f6f4ef;
}
.hero.has-image .hero-inner {
  min-height: 20rem;
}

.hero-inner {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1;
  width: 100%;
}
.hero-inner.has-page-intro {
  margin-bottom: 2rem;
}

.hero-content {
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #333333;
  max-width: 48rem;
}
.hero-content h1 {
  color: inherit;
  margin: 0;
}
@media (max-width: 479px) {
  .hero-content h1 {
    font-size: 2.4rem;
  }
}
@media (min-width: 480px) and (max-width: 767px) {
  .hero-content h1 {
    font-size: 2.8rem;
  }
}
@media (min-width: 768px) {
  .hero-content h1 {
    font-size: 3rem;
  }
}

/* ===== RESPOSIVENESS ===== */
/* ===== SPECIAL CASES ===== */
.hero-post {
  display: flex;
  flex-flow: column;
  background-color: transparent;
}
.hero-post .hero-content {
  color: #333333;
}

/* ===== SPECIAL COMPONENTS ===== */
/*
|––––––––––––––––––––––––––––––––––––––––––––––––––
| COMPONENTS: Bard
|––––––––––––––––––––––––––––––––––––––––––––––––––
|
| Layout and styles for anthing built within the bard.
|
|––––––––––––––––––––––––––––––––––––––––––––––––––
*/
.bard {
  margin-right: auto;
  margin-left: auto;
  max-width: 54rem;
  /* === Alignment === */
}
.bard .bard-block {
  margin: 1.6rem auto 0;
  max-width: 36rem;
}
.bard .bard-block:first-child {
  margin-top: 0;
}
.bard .transcription:first-child p:first-child::first-letter {
  float: left;
  margin: 0;
  padding: 0.15em 0.2em 0 0;
  font-family: "Domine", serif;
  font-size: 3.3rem;
  line-height: 2rem;
}
.bard .blockquote, .bard .transcription blockquote, .transcription .bard blockquote {
  padding: 1.6rem 0;
}
.bard p {
  font-size: 1rem;
}
.bard h2 {
  font-size: 2rem;
}
.bard h3 {
  font-size: 1.6rem;
}
.bard h4, .bard h5 {
  font-size: 1.2rem;
  font-weight: normal;
  letter-spacing: 2px;
}
.bard h5 {
  color: #fc612a;
}
.bard hr {
  margin: 3.2rem auto;
  width: 28.8rem;
  max-width: 80%;
  border-color: #eeeeee;
}
.bard hr + * {
  margin-top: 0;
}
.bard figure,
.bard figcaption {
  max-width: 36rem;
  margin: 0 auto;
}
.bard figure {
  margin: 1.6rem auto 0;
}
.bard figure:first-child {
  margin-top: 0;
}
.bard figcaption {
  display: block;
  margin: 8px 0 0;
  text-align: center;
  font-size: 0.8rem;
  font-style: italic;
}
.bard .double-image {
  display: flex;
  flex-flow: row wrap;
}
.bard .double-image img,
.bard .double-image .bg-img {
  max-width: 50%;
}
.bard .align-full,
.bard .align-wide {
  margin-top: 1.6rem;
  margin-bottom: 1.6rem;
}
.bard .align-left,
.bard .align-right {
  margin-top: 2rem;
  margin-bottom: 1rem;
}
.bard .align-full {
  max-width: unset;
  margin-left: -50vw;
  margin-right: -50vw;
}
.bard .align-full > * {
  width: 100%;
  max-width: unset;
}
.bard .align-wide {
  margin-right: auto;
  margin-left: auto;
  max-width: 100%;
}
.bard .align-wide > * {
  width: 100%;
  max-width: unset;
}
.bard .align-left,
.bard .align-right {
  width: 100%;
  max-width: 27rem;
}
.bard .align-left {
  float: left;
  margin-right: 1.6rem;
}
.bard .align-right {
  float: right;
  margin-left: 1.6rem;
}
@media (max-width: 767px) {
  .bard .align-left,
.bard .align-right {
    display: block;
    float: none;
    margin-right: auto;
    margin-left: auto;
    max-width: 36rem;
  }
}
@media (max-width: 1023px) {
  .bard .align-wide {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    max-width: unset;
  }
  .bard .video-block.align-wide {
    padding-top: 56.25vw;
  }
}

/*
|––––––––––––––––––––––––––––––––––––––––––––––––––
| COMPONENTS: Modal
|––––––––––––––––––––––––––––––––––––––––––––––––––
*/
/* === variables === */
/* === animations === */
@-webkit-keyframes modal_pop_in {
  from {
    transform: scale(1.05);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
    -webkit-filter: blur(0);
            filter: blur(0);
  }
}
@keyframes modal_pop_in {
  from {
    transform: scale(1.05);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
    -webkit-filter: blur(0);
            filter: blur(0);
  }
}
@-webkit-keyframes modal_pop_out {
  from {
    transform: scale(1);
    opacity: 1;
  }
  to {
    transform: scale(0.95);
    opacity: 0;
    -webkit-filter: blur(0);
            filter: blur(0);
  }
}
@keyframes modal_pop_out {
  from {
    transform: scale(1);
    opacity: 1;
  }
  to {
    transform: scale(0.95);
    opacity: 0;
    -webkit-filter: blur(0);
            filter: blur(0);
  }
}
@-webkit-keyframes modal_fade_in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes modal_fade_in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes modal_fade_out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes modal_fade_out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
/* === content === */
.modal {
  display: block;
  position: fixed;
  z-index: 990;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  padding: 2rem 2rem 0 2rem;
  text-align: center;
}
.modal::after {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  content: "";
}
.modal__container {
  display: inline-flex;
  position: relative;
  z-index: 998;
  margin: 2rem 0;
  max-width: 100%;
  box-shadow: 0px 0px 20px 4px rgba(0, 0, 0, 0.2);
  background-color: #ffffff;
  vertical-align: middle;
}
.modal__overlay {
  display: block;
  position: fixed;
  z-index: 991;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(147, 129, 83, 0.5);
  content: "";
  cursor: pointer;
}
.modal__close-button {
  display: block;
  position: absolute;
  z-index: 999;
  top: 0;
  right: 0;
  left: unset;
  transform: translate(60%, -60%);
  border-radius: 50%;
  border: 0;
  box-shadow: 0px 0px 20px 4px rgba(0, 0, 0, 0.2);
  background-color: #ffffff;
  width: 1.5em;
  height: 1.5em;
  padding: 0;
  line-height: 0;
  font-size: 24px;
  color: #c0c0c0;
  transition: background 300ms ease-in-out, color 300ms ease-in-out;
  cursor: pointer;
}
.modal__close-button::after {
  display: block;
  padding: 0 0 1px 1px;
  content: "\D7";
}
.modal__close-button:hover, .modal__close-button:focus {
  background-color: #c8b573;
  color: #333333;
}
.modal--closed {
  visibility: hidden;
}
.modal--closed .modal__container {
  visibility: hidden;
}
.modal--opening {
  -webkit-animation: modal_fade_in 300ms forwards ease-in;
          animation: modal_fade_in 300ms forwards ease-in;
}
.modal--opening .modal__container {
  -webkit-animation: modal_pop_in 300ms forwards ease-in;
          animation: modal_pop_in 300ms forwards ease-in;
}
.modal--opened {
  visibility: visible;
}
.modal--opened .modal__container {
  visibility: visible;
}
.modal--closing {
  -webkit-animation: modal_fade_out 300ms forwards ease-out;
          animation: modal_fade_out 300ms forwards ease-out;
}
.modal--closing .modal__container {
  -webkit-animation: modal_pop_out 300ms forwards ease-out;
          animation: modal_pop_out 300ms forwards ease-out;
}
.modal--lightbox .modal {
  padding-left: 0;
  padding-right: 0;
}
.modal--lightbox .modal__container {
  display: inline-flex;
  align-items: center;
  margin: 0;
  width: 100%;
  box-shadow: none;
  background-color: transparent;
}
.modal--lightbox .modal__overlay {
  background-color: rgba(51, 51, 51, 0.7);
}
.modal--lightbox .modal__close-button {
  position: fixed;
  top: 0;
  bottom: unset;
  transform: translate(-1rem, 1rem);
}

/*
|––––––––––––––––––––––––––––––––––––––––––––––––––
| COMPONENTS: Accordion 
|––––––––––––––––––––––––––––––––––––––––––––––––––
*/
.accordion-header {
  padding: 0.8rem;
  background-color: #f6f4ef;
}

.collapsible {
  opacity: 0;
  width: 100%;
  padding: 0;
  overflow: hidden;
  transition: all 500ms ease-in-out;
}
.collapsible-open > .collapsible {
  opacity: 1;
}

/* ==========================================================================
===== COMPONENTS STYLES =====
=
= Here a component is a specific class or set of classes that relate to a singular use or style.
=
========================================================================== */
/*
|––––––––––––––––––––––––––––––––––––––––––––––––––
| COMPONENTS: Social Icons
|––––––––––––––––––––––––––––––––––––––––––––––––––
*/
.social-icons {
  display: flex;
  margin: -0.2em;
  font-size: 2rem;
}
.social-icons__link {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1em;
  height: 1em;
  margin: 0.2em;
}
.social-icons .icon-facebook,
.social-icons .icon-facebook-square {
  color: #3b5998;
}
.social-icons .icon-instagram {
  color: #bc2a8d;
}
.social-icons .icon-linkedin {
  color: #0077b5;
}
.social-icons .icon-periscope {
  color: #d75444;
}
.social-icons .icon-pinterest {
  color: #c8232c;
}
.social-icons .icon-soundcloud {
  color: #FF5401;
}
.social-icons .icon-twitter {
  color: #1da1f2;
}
.social-icons .icon-vimeo {
  color: #1ab7ea;
}
.social-icons .icon-youtube,
.social-icons .icon-youtube-outline {
  color: #bb0000;
}

/*
|––––––––––––––––––––––––––––––––––––––––––––––––––
| COMPONENTS: Excerpt
|––––––––––––––––––––––––––––––––––––––––––––––––––
*/
article.excerpt {
  display: flex;
}
article.excerpt + article.excerpt {
  margin-top: 2.4rem;
}
article.excerpt:last-of-type {
  margin-bottom: 2.4rem;
}
article.excerpt .post-intro {
  flex: 1;
}
article.excerpt .post-intro p {
  margin: 1rem 0 0 0;
}
article.excerpt .feat-img {
  margin: 0 0 0 1.6rem;
  width: 10rem;
}
article.excerpt .feat-img .bg-img::after {
  padding-top: 100%;
}
@media (max-width: 767px) {
  article.excerpt {
    flex-flow: column-reverse;
  }
  article.excerpt .post-intro p {
    display: none;
  }
  article.excerpt .feat-img {
    margin: 0 0 1.6rem;
    width: 100%;
  }
  article.excerpt .feat-img .bg-img::after {
    padding-top: 57.25%;
  }
}

/*
|––––––––––––––––––––––––––––––––––––––––––––––––––
| COMPONENTS: User Meta
|––––––––––––––––––––––––––––––––––––––––––––––––––
*/
.post-author-meta {
  display: flex;
}
.post-author-meta .author-img {
  display: flex;
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  overflow: hidden;
  background-image: url("/site/themes/abf/img/blank-profile-picture.png");
  background-position: center;
  background-size: cover;
  font-size: 4rem;
}
.post-author-meta .author-img img {
  align-self: center;
  text-align: center;
  font-size: 0.15em;
}
.post-author-meta .author-info {
  align-self: center;
  margin: 0 0 0 1em;
  font-size: 0.8em;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.read-more {
  display: inline-block;
  font-size: 0.7em;
  text-transform: uppercase;
  text-decoration: underline;
  letter-spacing: 1px;
  color: #c8b573;
  transition: color 300ms ease-in-out;
}
.read-more:hover {
  color: #f04103;
}

/*
|––––––––––––––––––––––––––––––––––––––––––––––––––
| COMPONENTS: Contact Form
|––––––––––––––––––––––––––––––––––––––––––––––––––
*/
[class*=form_message] {
  border: 2px solid #333333;
  border-radius: 0.2em;
  width: 100%;
  padding: 0.3em 0.6em;
  font-size: 1.1rem;
  color: #333333;
}

.form_message_success {
  border-color: #64e764;
  background-color: lightgreen;
  color: #333333;
}

.form_message_error {
  border-color: #ff6666;
  background-color: #ff9999;
  color: #333333;
}

.contact-form {
  position: relative;
}
.contact-form label {
  display: block;
  font-size: 1rem;
}
.contact-form label + label {
  margin-top: 1.4rem;
}
.contact-form span {
  display: block;
  margin: 0 0 0.4em;
}

.single-form form {
  display: flex;
  flex-flow: row wrap;
  max-width: 640px;
}
.single-form form label, .single-form form input, .single-form form button {
  display: block;
  margin: 0;
  height: 40px;
  line-height: 1;
  padding-top: 0;
  padding-bottom: 0;
}
.single-form form button {
  padding-left: 1.4em;
  padding-right: 1.4em;
}
.single-form form .input-wrap {
  flex: 1;
}
@media (max-width: 479px) {
  .single-form form {
    flex-direction: column;
  }
  .single-form form .submit-wrap {
    margin-top: 1rem;
  }
}
@media (min-width: 480px) {
  .single-form form .submit-wrap {
    margin-left: 1rem;
  }
}

/*
|––––––––––––––––––––––––––––––––––––––––––––––––––
| COMPONENTS: Single Form
|––––––––––––––––––––––––––––––––––––––––––––––––––
*/
.single-form {
  display: flex;
  flex-flow: row wrap;
  max-width: 32rem;
}
.single-form label, .single-form input, .single-form button {
  display: block;
  height: 2rem;
  line-height: 1;
  padding-top: 0;
  padding-bottom: 0;
}
.single-form__submit-label button {
  padding-left: 1.4em;
  padding-right: 1.4em;
}
.single-form__input-label {
  flex: 1;
}
@media (max-width: 479px) {
  .single-form {
    flex-direction: column;
  }
  .single-form__submit-label {
    margin-top: 1rem;
  }
  .single-form__submit-label button {
    width: 100%;
  }
}
@media (min-width: 480px) {
  .single-form__input-label input {
    border-top-right-radius: unset;
    border-bottom-right-radius: unset;
    border-right: transparent;
  }
  .single-form__submit-label button {
    border-top-left-radius: unset;
    border-bottom-left-radius: unset;
  }
}

/*
|––––––––––––––––––––––––––––––––––––––––––––––––––
| COMPONENTS: Pagination
|––––––––––––––––––––––––––––––––––––––––––––––––––
*/
.pagination {
  display: flex;
  font-size: 1.2rem;
}
.pagination__item {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 0.25em;
  border-radius: 50%;
  width: 2em;
  height: 2em;
  background-color: #f8f8f8;
  padding: 0.5em;
  line-height: 1;
  vertical-align: baseline;
  text-align: center;
  font-weight: bold;
  font-size: inherit;
  font-family: "Domine", serif;
  color: #333333;
}
.pagination__item:first-child {
  margin-left: 0;
}
.pagination__item:last-child {
  margin-right: 0;
}
.pagination__link {
  color: #c8b573;
  transition: color 300ms ease;
}
.pagination__link:hover, .pagination__link:active {
  color: #fc612a;
}
.pagination__active {
  color: #ebe9e7;
  cursor: default;
}
.pagination__disabled {
  color: #ae9b5b;
  cursor: not-allowed;
}
.pagination .icon-arrow-left,
.pagination .icon-arrow-right {
  width: 100%;
  max-width: 0.8em;
  max-height: 0.8em;
  stroke-width: 6px;
  stroke: currentColor;
}
.pagination .icon-arrow-left {
  margin-right: 0.2em;
}
.pagination .icon-arrow-right {
  margin-left: 0.2em;
}

/*
|––––––––––––––––––––––––––––––––––––––––––––––––––
| COMPONENTS: Heading Content
|––––––––––––––––––––––––––––––––––––––––––––––––––
*/
.heading-content h3 {
  line-height: 1.2;
  text-transform: capitalize;
  font-size: 2.8rem;
}
.heading-content h5 {
  text-transform: lowercase;
  font-size: 1.2rem;
  color: #475733;
}
.heading-content h5 + h3 {
  margin-top: 0.4rem;
}
.heading-content .copy {
  margin-top: 0.2rem;
}
.heading-content hr {
  margin: 1rem 0;
  max-width: 12rem;
  border-top: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  color: #f6f4ef;
}
.heading-content hr:last-child {
  margin-bottom: 0;
}
.heading-content .btn {
  margin: 1.6rem 0 0 0;
}

/*
|––––––––––––––––––––––––––––––––––––––––––––––––––
| COMPONENTS: Featured Content
|––––––––––––––––––––––––––––––––––––––––––––––––––
*/
.feat-content {
  display: flex;
}
.feat-content__image {
  position: relative;
  z-index: -1;
  margin: -1.2rem;
}
.feat-content__copy {
  max-width: 32rem;
  padding: 2.4rem;
}
.feat-content__heading {
  font-size: 1.4rem;
}
@media (max-width: 767px) {
  .feat-content {
    flex-flow: column;
    margin: 20px;
  }
  .feat-content__image {
    width: unset !important;
    margin: -22px;
    margin-bottom: 0;
  }
  .feat-content__image::after {
    padding-top: 45%;
  }
  .feat-content__copy {
    margin: 0 auto;
    text-align: center;
  }
}
@media (min-width: 768px) {
  .feat-content__image {
    margin-right: 0;
    max-width: 20rem;
  }
}

/*
|––––––––––––––––––––––––––––––––––––––––––––––––––
| COMPONENTS: Video
|––––––––––––––––––––––––––––––––––––––––––––––––––
*/
svg.icon-play {
  width: 60px;
  height: 60px;
  fill: #ffffff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  border-radius: 100%;
}

.video-container h3 {
  margin: 0;
}

.video-block {
  position: relative;
  padding-top: 56.25%;
}
.video-block iframe,
.video-block video,
.video-block img,
.video-block .video-thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}
.video-block iframe::before,
.video-block video::before,
.video-block img::before,
.video-block .video-thumb::before {
  content: "";
  background-color: #000000;
  opacity: 0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: opacity 300ms ease;
}
.video-block iframe .icon-play,
.video-block video .icon-play,
.video-block img .icon-play,
.video-block .video-thumb .icon-play {
  width: 60px;
  height: 60px;
  position: absolute;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  transition: all 300ms ease;
}
.video-block iframe:hover::before,
.video-block video:hover::before,
.video-block img:hover::before,
.video-block .video-thumb:hover::before {
  opacity: 0.2;
}
.video-block iframe:hover .icon-play,
.video-block video:hover .icon-play,
.video-block img:hover .icon-play,
.video-block .video-thumb:hover .icon-play {
  transform: scale(1.15);
}
.video-block .video-thumb,
.video-block img {
  cursor: pointer;
  transition: all 500ms ease;
}
.video-block .video-thumb {
  background-size: cover;
  background-position: center;
}

/*
|––––––––––––––––––––––––––––––––––––––––––––––––––
| Video Playlist
|––––––––––––––––––––––––––––––––––––––––––––––––––
*/
.video-playlist {
  display: flex;
  color: #333333;
}
@media screen and (max-width: 1000px) {
  .video-playlist {
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 860px) {
  .video-playlist {
    position: relative;
    max-width: none;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-right: -50vw;
    margin-left: -50vw;
  }
}
.video-playlist .current-video-container {
  position: relative;
  width: 65%;
}
@media screen and (max-width: 1000px) {
  .video-playlist .current-video-container {
    width: 100%;
  }
}
.video-playlist .current-video-container .playlist-item {
  width: 100%;
  padding-top: 56.25%;
}
.video-playlist .current-video-container .playlist-item .current-video {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}
.video-playlist .current-video-container .playlist-item .current-video .video-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.video-playlist .current-video-container .playlist-item .current-video h3 {
  position: absolute;
  top: 0;
  left: 0;
  padding: 1rem;
  margin: 0;
}
.video-playlist .video-list {
  width: 35%;
  padding-left: 1rem;
  display: flex;
  align-content: space-between;
  flex-wrap: wrap;
}
@media screen and (max-width: 1000px) {
  .video-playlist .video-list {
    width: 100%;
    padding: 0;
    margin-top: 1rem;
  }
}
@media screen and (max-width: 860px) {
  .video-playlist .video-list {
    padding: 2rem 2rem 0;
    margin-top: 0;
  }
}
.video-playlist .video-list:last-child {
  margin-bottom: 0;
}
.video-playlist .video-list .playlist-item {
  display: flex;
  align-items: flex-start;
  cursor: pointer;
}
@media screen and (max-width: 1000px) {
  .video-playlist .video-list .playlist-item {
    width: 50%;
    padding-right: 1rem;
    margin-bottom: 1rem;
  }
}
@media screen and (max-width: 620px) {
  .video-playlist .video-list .playlist-item {
    width: 100%;
  }
  .video-playlist .video-list .playlist-item:last-child {
    margin-bottom: 0;
  }
}
.video-playlist .video-list .playlist-item .video-thumb-wrapper {
  width: 150px;
  margin-right: 0.5rem;
  position: relative;
}
@media screen and (max-width: 1023px) {
  .video-playlist .video-list .playlist-item .video-thumb-wrapper {
    width: 120px;
  }
}
.video-playlist .video-list .playlist-item .video-thumb-wrapper::before {
  content: "";
  width: 5px;
  height: 100%;
  background-color: #c8b573;
  position: absolute;
  top: 0;
  bottom: 0;
  left: -5px;
  opacity: 0;
  transition: opacity 300ms ease;
}
.video-playlist .video-list .playlist-item .video-thumb-wrapper::after {
  content: "";
  background-color: #000000;
  opacity: 0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: opacity 300ms ease;
}
.video-playlist .video-list .playlist-item .video-thumb-wrapper .video-thumb {
  background-position: center;
  background-size: cover;
  width: 100%;
  padding-top: 56.25%;
  overflow: hidden;
  transition: opacity 300ms ease;
  position: relative;
}
.video-playlist .video-list .playlist-item .video-thumb-wrapper .video-thumb .icon-play {
  width: 40px;
  height: 40px;
  position: absolute;
  top: calc(50% - 20px);
  left: calc(50% - 20px);
  opacity: 0;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  transition: opacity 300ms ease;
  z-index: 2;
}
.video-playlist .video-list .playlist-item h3 {
  width: 50%;
  margin: 0;
  color: currentColor;
  font-size: 0.9rem;
}
.video-playlist .video-list .playlist-item.is-selected .video-thumb-wrapper::before {
  opacity: 1;
}
.video-playlist .video-list .playlist-item:hover .video-thumb-wrapper::after {
  opacity: 0.2;
}
.video-playlist .video-list .playlist-item:hover .video-thumb-wrapper .video-thumb .icon-play {
  opacity: 1;
}
.video-playlist .video-list .playlist-item:hover.is-selected .video-thumb-wrapper::after {
  opacity: 0;
}
.video-playlist .video-list .playlist-item:hover.is-selected .video-thumb-wrapper .video-thumb .icon-play {
  opacity: 0;
}

/*
|––––––––––––––––––––––––––––––––––––––––––––––––––
| COMPONENTS: Card
|––––––––––––––––––––––––––––––––––––––––––––––––––
*/
.triple-card-row {
  display: flex;
  flex-flow: row wrap;
  margin: -0.6rem;
  justify-content: center;
}
.triple-card-row .card {
  padding: 0.6rem;
}
@media (max-width: 767px) {
  .triple-card-row {
    justify-content: center;
  }
  .triple-card-row .card {
    width: 100%;
    max-width: 520px;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .triple-card-row .card {
    width: 50%;
  }
}
@media (min-width: 1024px) {
  .triple-card-row .card {
    width: 33.3333%;
    margin: 20px 0;
  }
}

.card {
  display: flex;
  flex-flow: column;
}
.card__inner {
  flex: 1;
  display: flex;
  flex-flow: column;
  background-color: #ffffff;
}
.card__inner.inner-border::after {
  margin: 1rem;
  z-index: 0;
}
.card__content {
  flex: 1;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  position: relative;
  z-index: 1;
  padding: 2rem 2.4rem 3rem 2.4rem;
  text-align: center;
}
.card__content .btn {
  align-self: flex-end;
}
.card__heading {
  font-size: 1.4rem;
}
.card__text {
  font-size: 0.9rem;
}

/*
|––––––––––––––––––––––––––––––––––––––––––––––––––
| COMPONENTS: Split Row
|––––––––––––––––––––––––––––––––––––––––––––––––––
*/
.split-row {
  display: flex;
}
.split-row.inner-border::after {
  z-index: 0;
}
.split-row__column {
  width: 100%;
}
.split-row__content {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 1;
}
.split-row__inner {
  /*max-width: 24rem;*/
}
@media (max-width: 479px) {
  .split-row__content {
    padding: 3.6rem 2.4rem;
    background-color: #f6f4ef;
  }
}
@media (min-width: 480px) and (max-width: 767px) {
  .split-row__content {
    padding: 4rem 4rem;
  }
}
@media (max-width: 767px) {
  .split-row {
    flex-direction: column;
  }
  .split-row__image::after {
    padding-top: 75%;
  }
}
@media (min-width: 768px) {
  .split-row:nth-child(odd) {
    flex-direction: row;
  }
  .split-row:nth-child(even) {
    flex-direction: row-reverse;
  }
  .split-row__column {
    max-width: 50%;
  }
  .split-row__image::after {
    padding-top: 75%;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .split-row__content {
    padding: 4rem 2.4rem;
  }
}
@media (max-width: 1023px) {
  .split-row.inner-border::after {
    display: none;
  }
}
@media (min-width: 1024px) {
  .split-row.inner-border::after {
    margin: 2.4rem;
  }
  .split-row:nth-child(odd).inner-border::after {
    margin-right: 0;
  }
  .split-row:nth-child(even).inner-border::after {
    margin-left: 0;
  }
  .split-row__content {
    padding: 5.6rem 3.2rem;
  }
  .split-row__inner {
    max-width: 24rem;
  }
}

/*
|––––––––––––––––––––––––––––––––––––––––––––––––––
| COMPONENTS: Page Intro
|––––––––––––––––––––––––––––––––––––––––––––––––––
*/
.intro {
  position: relative;
  z-index: 99;
}
.intro__inner {
  box-shadow: 0px 8px 24px 8px rgba(0, 0, 0, 0.1);
  background-color: #ffffff;
  max-width: 40rem;
}
.intro__inner::before {
  display: block;
  position: absolute;
  top: 1.2rem;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 9px solid #ececec;
  content: "";
}
.intro__inner::after {
  margin: 1.2rem;
  margin-bottom: 3rem;
}
.intro__text {
  text-align: center;
  color: #475733;
}
.intro__icon {
  display: block;
  position: absolute;
  z-index: 9;
  top: unset;
  bottom: 0.8rem;
  left: 50%;
  transform: translateX(-50%);
  width: 4.5rem;
  height: 4.5rem;
  background-color: #ffffff;
  padding: 0.5rem;
  color: #dadada;
}
.has-page-intro .intro {
  margin-top: 0;
  padding-top: 0;
}
.has-page-intro .intro .intro__inner {
  margin-top: -2rem;
}
@media (max-width: 479px) {
  .intro__item {
    min-width: 50%;
    max-width: 8rem;
  }
  .intro__heading.heading-fancy::before, .intro__heading.heading-fancy::after {
    display: none;
  }
}
@media (max-width: 479px) {
  .intro__inner {
    padding: 2.4rem;
    padding-bottom: 5.4rem;
  }
}
@media (min-width: 480px) and (max-width: 767px) {
  .intro__inner {
    padding: 3.2rem;
    padding-bottom: 6.2rem;
  }
}
@media (min-width: 768px) {
  .intro__inner {
    padding: 4.2rem;
    padding-bottom: 7.2rem;
  }
}

/*
|––––––––––––––––––––––––––––––––––––––––––––––––––
| COMPONENTS: Wood Selection
|––––––––––––––––––––––––––––––––––––––––––––––––––
*/
.wood-selection {
  display: flex;
  flex-flow: column;
  align-items: center;
}
.wood-selection__copy {
  text-align: center;
  font-size: 0.8rem;
  margin-bottom: 3.2rem;
}
.wood-selection__heading {
  display: inline-flex;
  margin-bottom: 1rem;
  width: unset;
  font-size: 1.2rem;
  text-transform: uppercase;
}
.wood-selection__heading.heading-fancy::before, .wood-selection__heading.heading-fancy::after {
  width: 4rem;
}
.wood-selection__types {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: -0.5rem;
}
.wood-selection__item {
  position: relative;
  width: 100%;
  text-align: center;
  padding: 0.5rem;
}
.wood-selection__label {
  display: inline-block;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 0.8rem;
  color: #333333;
}
@media (max-width: 479px) {
  .wood-selection__item {
    min-width: 50%;
    max-width: 8rem;
  }
  .wood-selection__heading.heading-fancy::before, .wood-selection__heading.heading-fancy::after {
    display: none;
  }
}
@media (min-width: 480px) and (max-width: 767px) {
  .wood-selection__item {
    min-width: 33.3333%;
    max-width: 8rem;
  }
}
@media (max-width: 767px) {
  .wood-selection__types {
    flex-wrap: wrap;
  }
  .wood-selection__label {
    position: absolute;
    top: 90%;
    left: 50%;
    transform: translate(-50%, -100%);
    background-color: #ffffff;
    padding: 0.2rem;
  }
}
@media (min-width: 768px) {
  .wood-selection__label {
    margin-top: 1rem;
  }
}

/*
|––––––––––––––––––––––––––––––––––––––––––––––––––
| COMPONENTS: Masonry
|––––––––––––––––––––––––––––––––––––––––––––––––––
*/
.masonry {
  -moz-columns: 3 10rem;
       columns: 3 10rem;
  -moz-column-gap: 1rem;
       column-gap: 1rem;
  margin-bottom: -1rem;
}
.masonry__brick {
  display: inline-block;
  margin: 0 0 1rem;
  width: 100%;
}

/*
|––––––––––––––––––––––––––––––––––––––––––––––––––
| COMPONENTS: Rotator
|––––––––––––––––––––––––––––––––––––––––––––––––––
*/
.rotator {
  position: relative;
  /* === Rotator Types === */
}
.rotator__slide {
  position: absolute;
  right: 0;
  left: 0;
  transform: scale(1.1);
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 500ms ease-in-out, transform 500ms ease-in-out, visibility 0ms ease-in-out 500ms;
}
.rotator__slide.is-active {
  transform: scale(1);
  opacity: 1;
  visibility: visible;
  transition: opacity 500ms ease-in-out, transform 500ms ease-in-out, visibility 0ms ease-in-out;
}
.rotator__button {
  display: flex;
  position: absolute;
  z-index: 9;
  top: 0;
  bottom: 0;
  width: 25%;
  padding: 0.5em;
  font-size: 1rem;
}
.rotator__button--left {
  justify-content: flex-start;
  left: 0;
  right: unset;
}
.rotator__button--right {
  justify-content: flex-end;
  left: unset;
  right: 0;
}
.rotator__button .icon-arrow-left,
.rotator__button .icon-arrow-right {
  width: 1em;
}
@media (min-width: 480px) {
  .rotator__button {
    font-size: 1.2rem;
  }
}
@media (min-width: 768px) {
  .rotator__button {
    font-size: 1.6rem;
  }
}
.rotator--images {
  position: relative;
  width: 100%;
  height: 100%;
  padding-top: 56.25%;
  overflow: hidden;
}
.rotator--images .rotator__slide {
  top: 0;
  bottom: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.rotator--lightbox {
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 800;
  width: 100%;
  margin: 0 3rem;
}
.rotator--lightbox .rotator__slide {
  display: flex;
  justify-content: center;
  align-items: center;
}
.rotator--lightbox .rotator__button--left {
  left: -3rem;
}
.rotator--lightbox .rotator__button--right {
  right: -3rem;
}

/* ==========================================================================
===== UTILITY STYLES =====
=
= 
=
========================================================================== */
/*
|––––––––––––––––––––––––––––––––––––––––––––––––––
| UTILITY: WIDTH
|––––––––––––––––––––––––––––––––––––––––––––––––––
*/
/* ===== MAX WIDTHS ===== */
[class^=mxw] {
  width: 100%;
}

/* static */
.mxw-480 {
  max-width: 480px;
}

.mxw-640 {
  max-width: 640px;
}

.mxw-720 {
  max-width: 720px;
}

.mxw-1080 {
  max-width: 1080px;
}

.mxw-1280 {
  max-width: 1280px;
}

.mxw-1440 {
  max-width: 1440px;
}

.mxw-1600 {
  max-width: 1600px;
}

/* dynamic */
.mxw {
  max-width: 1440px;
}

.mxw-text {
  max-width: 36rem;
}

.mxw-xs {
  max-width: 16rem;
}

.mxw-sm {
  max-width: 36rem;
}

.mxw-md {
  max-width: 54rem;
}

.mxw-lg {
  max-width: 64rem;
}

.mxw-xl {
  max-width: 80rem;
}

/* ===== WIDTHS ===== */
.w-full {
  width: 100vw;
}

.w-100 {
  width: 100%;
}

.w-87 {
  width: 87.5%;
}

.w-75 {
  width: 75%;
}

.w-66 {
  width: 66.666666%;
}

.w-62 {
  width: 62.5%;
}

.w-50 {
  width: 50%;
}

.w-37 {
  width: 37.5%;
}

.w-33 {
  width: 33.333333%;
}

.w-25 {
  width: 25%;
}

.w-12 {
  width: 12.5%;
}

@media (max-width: 767px) {
  .mb\:w-full {
    width: 100vw;
  }
  .mb\:w-100 {
    width: 100%;
  }
  .mb\:w-87 {
    width: 87.5%;
  }
  .mb\:w-75 {
    width: 75%;
  }
  .mb\:w-66 {
    width: 66.666666%;
  }
  .mb\:w-62 {
    width: 62.5%;
  }
  .mb\:w-50 {
    width: 50%;
  }
  .mb\:w-37 {
    width: 37.5%;
  }
  .mb\:w-33 {
    width: 33.333333%;
  }
  .mb\:w-25 {
    width: 25%;
  }
  .mb\:w-12 {
    width: 12.5%;
  }
}
@media (min-width: 768px) {
  .dt\:w-full {
    width: 100vw;
  }
  .dt\:w-100 {
    width: 100%;
  }
  .dt\:w-87 {
    width: 87.5%;
  }
  .dt\:w-75 {
    width: 75%;
  }
  .dt\:w-66 {
    width: 66.666666%;
  }
  .dt\:w-62 {
    width: 62.5%;
  }
  .dt\:w-50 {
    width: 50%;
  }
  .dt\:w-37 {
    width: 37.5%;
  }
  .dt\:w-33 {
    width: 33.333333%;
  }
  .dt\:w-25 {
    width: 25%;
  }
  .dt\:w-12 {
    width: 12.5%;
  }
}
/*
|––––––––––––––––––––––––––––––––––––––––––––––––––
| UTILITY: Alignment
|––––––––––––––––––––––––––––––––––––––––––––––––––
*/
.cf::after,
.clearfix::after {
  display: block;
  width: 100%;
  height: 0;
  float: none;
  clear: both;
  content: "";
}

/* ===== ALIGNMENT ===== */
/* align self */
.center {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

.left,
.float-left {
  float: left;
}

.right,
.float-right {
  float: right;
}

.full,
.force-full {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  max-width: unset;
}

@media (max-width: 767px) {
  .mb\:center {
    display: block;
    margin-right: auto;
    margin-left: auto;
  }
  .mb\:left, .mb\:float-left {
    float: left;
  }
  .mb\:right, .mb\:float-right {
    float: right;
  }
  .mb\:full, .mb\:force-full {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    max-width: unset;
  }
}
@media (min-width: 768px) {
  .dt\:center {
    display: block;
    margin-right: auto;
    margin-left: auto;
  }
  .dt\:left, .dt\:float-left {
    float: left;
  }
  .dt\:right, .dt\:float-right {
    float: right;
  }
}
/*
|––––––––––––––––––––––––––––––––––––––––––––––––––
| UTILITY: Whitespace
|––––––––––––––––––––––––––––––––––––––––––––––––––
|
| Syntax
| [rule][direction]-[size] 
|
| size values are found in settings.scss
|
| p = padding
| m = margin
|
| sm = small
| md = medium
| lg = large
|
| t = top
| r = right
| b = bottom
| l = left
|
| v = vertical
| h = horizontal
|
| mb: = below tablet
| dt: = above tablet
|
*/
/* === padding === */
/* none */
.p-0 {
  padding: 0;
}

.pt-0 {
  padding-top: 0;
}

.pr-0 {
  padding-right: 0;
}

.pb-0 {
  padding-bottom: 0;
}

.pl-0 {
  padding-left: 0;
}

.ph-0 {
  padding-left: 0;
  padding-right: 0;
}

.pv-0 {
  padding-top: 0;
  padding-bottom: 0;
}

/* dynamic */
.p {
  padding: 1.6rem;
}

.pt {
  padding-top: 1.6rem;
}

.pr {
  padding-right: 1.6rem;
}

.pb {
  padding-bottom: 1.6rem;
}

.pl {
  padding-left: 1.6rem;
}

.ph {
  padding-left: 1.6rem;
  padding-right: 1.6rem;
}

.pv {
  padding-top: 1.6rem;
  padding-bottom: 1.6rem;
}

/* surrounding */
.p-1 {
  padding: 0.4rem;
}

.p-2 {
  padding: 0.8rem;
}

.p-3 {
  padding: 1.2rem;
}

.p-4 {
  padding: 1.6rem;
}

.p-5 {
  padding: 2rem;
}

.p-6 {
  padding: 2.4rem;
}

.p-7 {
  padding: 2.8rem;
}

.p-8 {
  padding: 3.2rem;
}

/* horizontal */
.ph-1 {
  padding-left: 0.4rem;
  padding-right: 0.4rem;
}

.ph-2 {
  padding-left: 0.8rem;
  padding-right: 0.8rem;
}

.ph-3 {
  padding-left: 1.2rem;
  padding-right: 1.2rem;
}

.ph-4 {
  padding-left: 1.6rem;
  padding-right: 1.6rem;
}

.ph-5 {
  padding-left: 2rem;
  padding-right: 2rem;
}

.ph-6 {
  padding-left: 2.4rem;
  padding-right: 2.4rem;
}

.ph-7 {
  padding-left: 2.8rem;
  padding-right: 2.8rem;
}

.ph-8 {
  padding-left: 3.2rem;
  padding-right: 3.2rem;
}

/* vertical */
.pv-1 {
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}

.pv-2 {
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
}

.pv-3 {
  padding-top: 1.2rem;
  padding-bottom: 1.2rem;
}

.pv-4 {
  padding-top: 1.6rem;
  padding-bottom: 1.6rem;
}

.pv-5 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.pv-6 {
  padding-top: 2.4rem;
  padding-bottom: 2.4rem;
}

.pv-7 {
  padding-top: 2.8rem;
  padding-bottom: 2.8rem;
}

.pv-8 {
  padding-top: 3.2rem;
  padding-bottom: 3.2rem;
}

/* === margin === */
/* none */
.m-0 {
  margin: 0;
}

.mt-0 {
  margin-top: 0px;
}

.mr-0 {
  margin-right: 0px;
}

.mb-0 {
  margin-bottom: 0px;
}

.ml-0 {
  margin-left: 0px;
}

.mv-0 {
  margin-top: 0;
  margin-bottom: 0;
}

.mh-0 {
  margin-right: 0;
  margin-left: 0;
}

/* dynamic */
.m {
  margin: 1.6rem;
}

.mt {
  margin-top: 1.6rem;
}

.mr {
  margin-right: 1.6rem;
}

.mb {
  margin-bottom: 1.6rem;
}

.ml {
  margin-left: 1.6rem;
}

.mv {
  margin-top: 1.6rem;
  margin-bottom: 1.6rem;
}

.mh {
  margin-right: 1.6rem;
  margin-left: 1.6rem;
}

/* top */
.mt-1 {
  margin-top: 0.4rem;
}

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

.mt-3 {
  margin-top: 1.2rem;
}

.mt-4 {
  margin-top: 1.6rem;
}

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

.mt-6 {
  margin-top: 2.4rem;
}

.mt-7 {
  margin-top: 2.8rem;
}

.mt-8 {
  margin-top: 3.2rem;
}

/* right */
.mr-1 {
  margin-right: 0.4rem;
}

.mr-2 {
  margin-right: 0.8rem;
}

.mr-3 {
  margin-right: 1.2rem;
}

.mr-4 {
  margin-right: 1.6rem;
}

.mr-5 {
  margin-right: 2rem;
}

.mr-6 {
  margin-right: 2.4rem;
}

.mr-7 {
  margin-right: 2.8rem;
}

.mr-8 {
  margin-right: 3.2rem;
}

/* bottom */
.mb-1 {
  margin-bottom: 0.4rem;
}

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

.mb-3 {
  margin-bottom: 1.2rem;
}

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

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

.mb-6 {
  margin-bottom: 2.4rem;
}

.mb-7 {
  margin-bottom: 2.8rem;
}

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

/* left */
.ml-1 {
  margin-left: 0.4rem;
}

.ml-2 {
  margin-left: 0.8rem;
}

.ml-3 {
  margin-left: 1.2rem;
}

.ml-4 {
  margin-left: 1.6rem;
}

.ml-5 {
  margin-left: 2rem;
}

.ml-6 {
  margin-left: 2.4rem;
}

.ml-7 {
  margin-left: 2.8rem;
}

.ml-8 {
  margin-left: 3.2rem;
}

/* === Below Tablet === */
@media (max-width: 767px) {
  .mb\: {
    /* === padding === */
    /* none */
    /* dynamic */
    /* surrounding */
    /* horizontal */
    /* vertical */
    /* === margin === */
    /* none */
    /* dynamic */
    /* top */
    /* right */
    /* bottom */
    /* left */
  }
  .mb\:p-0 {
    padding: 0;
  }
  .mb\:pt-0 {
    padding-top: 0;
  }
  .mb\:pr-0 {
    padding-right: 0;
  }
  .mb\:pb-0 {
    padding-bottom: 0;
  }
  .mb\:pl-0 {
    padding-left: 0;
  }
  .mb\:ph-0 {
    padding-left: 0;
    padding-right: 0;
  }
  .mb\:pv-0 {
    padding-top: 0;
    padding-bottom: 0;
  }
  .mb\:p {
    padding: 1.6rem;
  }
  .mb\:pt {
    padding-top: 1.6rem;
  }
  .mb\:pr {
    padding-right: 1.6rem;
  }
  .mb\:pb {
    padding-bottom: 1.6rem;
  }
  .mb\:pl {
    padding-left: 1.6rem;
  }
  .mb\:ph {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }
  .mb\:pv {
    padding-top: 1.6rem;
    padding-bottom: 1.6rem;
  }
  .mb\:p-1 {
    padding: 0.4rem;
  }
  .mb\:p-2 {
    padding: 0.8rem;
  }
  .mb\:p-3 {
    padding: 1.2rem;
  }
  .mb\:p-4 {
    padding: 1.6rem;
  }
  .mb\:p-5 {
    padding: 2rem;
  }
  .mb\:p-6 {
    padding: 2.4rem;
  }
  .mb\:p-7 {
    padding: 2.8rem;
  }
  .mb\:p-8 {
    padding: 3.2rem;
  }
  .mb\:ph-1 {
    padding-left: 0.4rem;
    padding-right: 0.4rem;
  }
  .mb\:ph-2 {
    padding-left: 0.8rem;
    padding-right: 0.8rem;
  }
  .mb\:ph-3 {
    padding-left: 1.2rem;
    padding-right: 1.2rem;
  }
  .mb\:ph-4 {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }
  .mb\:ph-5 {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .mb\:ph-6 {
    padding-left: 2.4rem;
    padding-right: 2.4rem;
  }
  .mb\:ph-7 {
    padding-left: 2.8rem;
    padding-right: 2.8rem;
  }
  .mb\:ph-8 {
    padding-left: 3.2rem;
    padding-right: 3.2rem;
  }
  .mb\:pv-1 {
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
  }
  .mb\:pv-2 {
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
  }
  .mb\:pv-3 {
    padding-top: 1.2rem;
    padding-bottom: 1.2rem;
  }
  .mb\:pv-4 {
    padding-top: 1.6rem;
    padding-bottom: 1.6rem;
  }
  .mb\:pv-5 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  .mb\:pv-6 {
    padding-top: 2.4rem;
    padding-bottom: 2.4rem;
  }
  .mb\:pv-7 {
    padding-top: 2.8rem;
    padding-bottom: 2.8rem;
  }
  .mb\:pv-8 {
    padding-top: 3.2rem;
    padding-bottom: 3.2rem;
  }
  .mb\:m-0 {
    margin: 0;
  }
  .mb\:mt-0 {
    margin-top: 0px;
  }
  .mb\:mr-0 {
    margin-right: 0px;
  }
  .mb\:mb-0 {
    margin-bottom: 0px;
  }
  .mb\:ml-0 {
    margin-left: 0px;
  }
  .mb\:mv-0 {
    margin-top: 0;
    margin-bottom: 0;
  }
  .mb\:mh-0 {
    margin-right: 0;
    margin-left: 0;
  }
  .mb\:m {
    margin: 1.6rem;
  }
  .mb\:mt {
    margin-top: 1.6rem;
  }
  .mb\:mr {
    margin-right: 1.6rem;
  }
  .mb\:mb {
    margin-bottom: 1.6rem;
  }
  .mb\:ml {
    margin-left: 1.6rem;
  }
  .mb\:mv {
    margin-top: 1.6rem;
    margin-bottom: 1.6rem;
  }
  .mb\:mh {
    margin-right: 1.6rem;
    margin-left: 1.6rem;
  }
  .mb\:mt-1 {
    margin-top: 0.4rem;
  }
  .mb\:mt-2 {
    margin-top: 0.8rem;
  }
  .mb\:mt-3 {
    margin-top: 1.2rem;
  }
  .mb\:mt-4 {
    margin-top: 1.6rem;
  }
  .mb\:mt-5 {
    margin-top: 2rem;
  }
  .mb\:mt-6 {
    margin-top: 2.4rem;
  }
  .mb\:mt-7 {
    margin-top: 2.8rem;
  }
  .mb\:mt-8 {
    margin-top: 3.2rem;
  }
  .mb\:mr-1 {
    margin-right: 0.4rem;
  }
  .mb\:mr-2 {
    margin-right: 0.8rem;
  }
  .mb\:mr-3 {
    margin-right: 1.2rem;
  }
  .mb\:mr-4 {
    margin-right: 1.6rem;
  }
  .mb\:mr-5 {
    margin-right: 2rem;
  }
  .mb\:mr-6 {
    margin-right: 2.4rem;
  }
  .mb\:mr-7 {
    margin-right: 2.8rem;
  }
  .mb\:mr-8 {
    margin-right: 3.2rem;
  }
  .mb\:mb-1 {
    margin-bottom: 0.4rem;
  }
  .mb\:mb-2 {
    margin-bottom: 0.8rem;
  }
  .mb\:mb-3 {
    margin-bottom: 1.2rem;
  }
  .mb\:mb-4 {
    margin-bottom: 1.6rem;
  }
  .mb\:mb-5 {
    margin-bottom: 2rem;
  }
  .mb\:mb-6 {
    margin-bottom: 2.4rem;
  }
  .mb\:mb-7 {
    margin-bottom: 2.8rem;
  }
  .mb\:mb-8 {
    margin-bottom: 3.2rem;
  }
  .mb\:ml-1 {
    margin-left: 0.4rem;
  }
  .mb\:ml-2 {
    margin-left: 0.8rem;
  }
  .mb\:ml-3 {
    margin-left: 1.2rem;
  }
  .mb\:ml-4 {
    margin-left: 1.6rem;
  }
  .mb\:ml-5 {
    margin-left: 2rem;
  }
  .mb\:ml-6 {
    margin-left: 2.4rem;
  }
  .mb\:ml-7 {
    margin-left: 2.8rem;
  }
  .mb\:ml-8 {
    margin-left: 3.2rem;
  }
}
/* === Above Tablet === */
@media (min-width: 768px) {
  .dt\: {
    /* === padding === */
    /* none */
    /* dynamic */
    /* surrounding */
    /* horizontal */
    /* vertical */
    /* === margin === */
    /* none */
    /* dynamic */
    /* top */
    /* right */
    /* bottom */
    /* left */
  }
  .dt\:p-0 {
    padding: 0;
  }
  .dt\:pt-0 {
    padding-top: 0;
  }
  .dt\:pr-0 {
    padding-right: 0;
  }
  .dt\:pb-0 {
    padding-bottom: 0;
  }
  .dt\:pl-0 {
    padding-left: 0;
  }
  .dt\:ph-0 {
    padding-left: 0;
    padding-right: 0;
  }
  .dt\:pv-0 {
    padding-top: 0;
    padding-bottom: 0;
  }
  .dt\:p {
    padding: 1.6rem;
  }
  .dt\:pt {
    padding-top: 1.6rem;
  }
  .dt\:pr {
    padding-right: 1.6rem;
  }
  .dt\:pb {
    padding-bottom: 1.6rem;
  }
  .dt\:pl {
    padding-left: 1.6rem;
  }
  .dt\:ph {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }
  .dt\:pv {
    padding-top: 1.6rem;
    padding-bottom: 1.6rem;
  }
  .dt\:p-1 {
    padding: 0.4rem;
  }
  .dt\:p-2 {
    padding: 0.8rem;
  }
  .dt\:p-3 {
    padding: 1.2rem;
  }
  .dt\:p-4 {
    padding: 1.6rem;
  }
  .dt\:p-5 {
    padding: 2rem;
  }
  .dt\:p-6 {
    padding: 2.4rem;
  }
  .dt\:p-7 {
    padding: 2.8rem;
  }
  .dt\:p-8 {
    padding: 3.2rem;
  }
  .dt\:ph-1 {
    padding-left: 0.4rem;
    padding-right: 0.4rem;
  }
  .dt\:ph-2 {
    padding-left: 0.8rem;
    padding-right: 0.8rem;
  }
  .dt\:ph-3 {
    padding-left: 1.2rem;
    padding-right: 1.2rem;
  }
  .dt\:ph-4 {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }
  .dt\:ph-5 {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .dt\:ph-6 {
    padding-left: 2.4rem;
    padding-right: 2.4rem;
  }
  .dt\:ph-7 {
    padding-left: 2.8rem;
    padding-right: 2.8rem;
  }
  .dt\:ph-8 {
    padding-left: 3.2rem;
    padding-right: 3.2rem;
  }
  .dt\:pv-1 {
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
  }
  .dt\:pv-2 {
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
  }
  .dt\:pv-3 {
    padding-top: 1.2rem;
    padding-bottom: 1.2rem;
  }
  .dt\:pv-4 {
    padding-top: 1.6rem;
    padding-bottom: 1.6rem;
  }
  .dt\:pv-5 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  .dt\:pv-6 {
    padding-top: 2.4rem;
    padding-bottom: 2.4rem;
  }
  .dt\:pv-7 {
    padding-top: 2.8rem;
    padding-bottom: 2.8rem;
  }
  .dt\:pv-8 {
    padding-top: 3.2rem;
    padding-bottom: 3.2rem;
  }
  .dt\:m-0 {
    margin: 0;
  }
  .dt\:mt-0 {
    margin-top: 0px;
  }
  .dt\:mr-0 {
    margin-right: 0px;
  }
  .dt\:mb-0 {
    margin-bottom: 0px;
  }
  .dt\:ml-0 {
    margin-left: 0px;
  }
  .dt\:mv-0 {
    margin-top: 0;
    margin-bottom: 0;
  }
  .dt\:mh-0 {
    margin-right: 0;
    margin-left: 0;
  }
  .dt\:m {
    margin: 1.6rem;
  }
  .dt\:mt {
    margin-top: 1.6rem;
  }
  .dt\:mr {
    margin-right: 1.6rem;
  }
  .dt\:mb {
    margin-bottom: 1.6rem;
  }
  .dt\:ml {
    margin-left: 1.6rem;
  }
  .dt\:mv {
    margin-top: 1.6rem;
    margin-bottom: 1.6rem;
  }
  .dt\:mh {
    margin-right: 1.6rem;
    margin-left: 1.6rem;
  }
  .dt\:mt-1 {
    margin-top: 0.4rem;
  }
  .dt\:mt-2 {
    margin-top: 0.8rem;
  }
  .dt\:mt-3 {
    margin-top: 1.2rem;
  }
  .dt\:mt-4 {
    margin-top: 1.6rem;
  }
  .dt\:mt-5 {
    margin-top: 2rem;
  }
  .dt\:mt-6 {
    margin-top: 2.4rem;
  }
  .dt\:mt-7 {
    margin-top: 2.8rem;
  }
  .dt\:mt-8 {
    margin-top: 3.2rem;
  }
  .dt\:mr-1 {
    margin-right: 0.4rem;
  }
  .dt\:mr-2 {
    margin-right: 0.8rem;
  }
  .dt\:mr-3 {
    margin-right: 1.2rem;
  }
  .dt\:mr-4 {
    margin-right: 1.6rem;
  }
  .dt\:mr-5 {
    margin-right: 2rem;
  }
  .dt\:mr-6 {
    margin-right: 2.4rem;
  }
  .dt\:mr-7 {
    margin-right: 2.8rem;
  }
  .dt\:mr-8 {
    margin-right: 3.2rem;
  }
  .dt\:mb-1 {
    margin-bottom: 0.4rem;
  }
  .dt\:mb-2 {
    margin-bottom: 0.8rem;
  }
  .dt\:mb-3 {
    margin-bottom: 1.2rem;
  }
  .dt\:mb-4 {
    margin-bottom: 1.6rem;
  }
  .dt\:mb-5 {
    margin-bottom: 2rem;
  }
  .dt\:mb-6 {
    margin-bottom: 2.4rem;
  }
  .dt\:mb-7 {
    margin-bottom: 2.8rem;
  }
  .dt\:mb-8 {
    margin-bottom: 3.2rem;
  }
  .dt\:ml-1 {
    margin-left: 0.4rem;
  }
  .dt\:ml-2 {
    margin-left: 0.8rem;
  }
  .dt\:ml-3 {
    margin-left: 1.2rem;
  }
  .dt\:ml-4 {
    margin-left: 1.6rem;
  }
  .dt\:ml-5 {
    margin-left: 2rem;
  }
  .dt\:ml-6 {
    margin-left: 2.4rem;
  }
  .dt\:ml-7 {
    margin-left: 2.8rem;
  }
  .dt\:ml-8 {
    margin-left: 3.2rem;
  }
}
/*
|––––––––––––––––––––––––––––––––––––––––––––––––––
| UTILITY: Backgrounds
|––––––––––––––––––––––––––––––––––––––––––––––––––
*/
/* === BACKGROUND IMAGE === */
.bg-img,
.background-image {
  display: block;
  position: relative;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
}
.bg-img::before,
.background-image::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: "";
}
.bg-img::after,
.background-image::after {
  display: block;
  content: "";
}

/* === BACKGROUND OVERLAYS === */
.bg-overlay-lighten::before {
  background-color: rgba(255, 255, 255, 0.3);
}

.bg-overlay-darken::before {
  background-color: rgba(0, 0, 0, 0.3);
}

.bg-overlay-primary::before {
  background-color: rgba(235, 233, 231, 0.8);
}

/* === IMAGE RATIOS === */
.bg-square::after,
.ratio-1-1::after {
  padding-top: 100%;
}

.bg-landscape::after,
.ratio-4-3::after {
  padding-top: 75%;
}

.bg-portrait::after,
.ratio-3-4::after {
  padding-top: 133.333333%;
}

.bg-wide::after,
.ratio-16-9::after {
  padding-top: 56.25%;
}

.bg-tall::after,
.ratio-9-16::after {
  padding-top: 177.777777%;
}

.bg-ultra-wide::after,
.ratio-21-9::after {
  padding-top: 42.8571%;
}

/* === BORDER RADIUS === */
.bg-circle {
  border-radius: 50%;
  overflow: hidden;
}

/* === BACKGROUND ELEMENTS === */
.relative {
  position: relative;
}

.bg-elem,
.background-element {
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: "";
}

/* === BACKGROUND COLORS === */
.bg-white,
.background-white {
  background-color: #ffffff;
}

.bg-off-white,
.background-off-white {
  background-color: #f8f8f8;
}

.bg-gray,
.background-gray {
  background-color: #808080;
}

.bg-off-black,
.background-off-black {
  background-color: #202020;
}

.bg-dark,
.background-dark {
  background-color: #475733;
}

.bg-primary,
.background-primary {
  background-color: #ebe9e7;
}

.bg-light,
.background-light {
  background-color: #f6f4ef;
}

.bg-primary-light {
  background-color: #f6f4ef;
}

.bg-accent,
.background-accent {
  background-color: #c8b573;
}

.bg-alt,
.background-alt {
  background-color: #fc612a;
}

/*
|––––––––––––––––––––––––––––––––––––––––––––––––––
| UTILITY: Extention
|––––––––––––––––––––––––––––––––––––––––––––––––––
|
| For when you want a box to continue outside its parent
|
*/
.none {
  display: none;
}

@media (max-width: 767px) {
  .mb\:none {
    display: none;
  }
}
@media (min-width: 768px) {
  .dt\:none {
    display: none;
  }
}
/* === for parent === */
.extend-top {
  position: relative;
}
.extend-top::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: unset;
  left: 0;
  transform: translateY(100%);
  content: "";
}

.extend-right {
  position: relative;
}
.extend-right::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: unset;
  transform: translateX(100%);
  content: "";
}

.extend-bottom {
  position: relative;
}
.extend-bottom::before {
  position: absolute;
  top: unset;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateY(-100%);
  content: "";
}

.extend-left {
  position: relative;
}
.extend-left::before {
  position: absolute;
  top: 0;
  right: unset;
  bottom: 0;
  left: 0;
  transform: translateX(-100%);
  content: "";
}

/* === for child === */
.put-top {
  position: absolute;
  top: 0;
  bottom: unset;
  transform: translateY(-100%);
}

.put-right {
  position: absolute;
  right: 0;
  left: unset;
  transform: translateX(100%);
}

.put-bottom {
  position: absolute;
  top: unset;
  bottom: 0;
  transform: translateY(100%);
}

.put-left {
  position: absolute;
  right: unset;
  left: 0;
  transform: translateX(-100%);
}
/*# sourceMappingURL=boilerplate.css.map*/