/*
Theme Name: All American Food Trucks
Text Domain: allamericanfoodtrucks
Version: 1.0
Author: All American Food Trucks
*/

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
@font-face {
    font-family: 'Brandon Grotesque';
    src: url('webFonts/BrandonGrotesqueWeb-Bold/font.woff2') format('woff2'), url('webFonts/BrandonGrotesqueWeb-Bold/font.woff') format('woff');
}

@font-face {
    font-family: 'Judson', cursive;
    src: url('webFonts/Marydale-Bold/font.woff2') format('woff2'), url('webFonts/Marydale-Bold/font.woff') format('woff');
}

@font-face {
    font-family: 'Metropolis Regular';
    src: url('webFonts/Metropolis-Regular/font.woff2') format('woff2'), url('webFonts/Metropolis-Regular/font.woff') format('woff');
}

@font-face {
    font-family: 'Metropolis Italic';
    src: url('webFonts/Metropolis-Italic/font.woff2') format('woff2'), url('webFonts/Metropolis-Italic/font.woff') format('woff');
}

@font-face {
    font-family: 'Metropolis Bold';
    src: url('webFonts/Metropolis-Bold/font.woff2') format('woff2'), url('webFonts/Metropolis-Bold/font.woff') format('woff');
}

@font-face {
    font-family: 'Judson';
    src: url('webFonts/Judson/Judson-Regular.woff2') format('woff2'), url('webFonts/Judson/Judson-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------

    0.  CSS Reset
    1.  Icons
    2.  Variables
    3.  Document Setup
    4.  Header
    5.  Home
    6.  Footer
    7.  Form Elements
    8.  Quote Builder
    9.  Contact Us
    10.  Form Success
    11.  Gallery
    12.  About Us
    13.  Resources
    14.  Blog

----------------------------------------------------------------------------- */


/* -------------------------------------------------------------------------- */


/*  0.  CSS Reset
/* -------------------------------------------------------------------------- */

html,
body {
    border: none;
    margin: 0;
    padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
address,
big,
cite,
code,
em,
font,
img,
small,
strike,
sub,
sup,
li,
ol,
ul,
fieldset,
form,
label,
legend,
button,
table,
caption,
tr,
th,
td {
    border: none;
    font-size: inherit;
    line-height: inherit;
    margin: 0;
    padding: 0;
    text-align: inherit;
}

blockquote::before,
blockquote::after {
    content: "";
}


/* -------------------------------------------------------------------------- */


/*  1.  Icons
/* -------------------------------------------------------------------------- */

@font-face {
    font-family: 'AAFT';
    src: url('fonts/AAFT.ttf?hyd3zb') format('truetype'), url('fonts/AAFT.woff?hyd3zb') format('woff'), url('fonts/AAFT.svg?hyd3zb') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

[class^="icon-"],
[class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'AAFT' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-radio-check:before {
    content: "\e90c";
}

.icon-mobile-menu-close:before {
    content: "\e90b";
}

.icon-arrow-forward-sm:before {
    content: "\e900";
}

.icon-arrow-forward-lg:before {
    content: "\e901";
}

.icon-arrow-backward-sm:before {
    content: "\e902";
}

.icon-arrow-backward-lg:before {
    content: "\e903";
}

.icon-food-truck:before {
    content: "\e904";
}

.icon-collapse:before {
    content: "\e905";
}

.icon-expand:before {
    content: "\e906";
}

.icon-logo:before {
    content: "";
}

.icon-instagram:before {
    content: "";
}

.icon-twitter:before {
    content: "";
}

.icon-facebook:before {
    content: "";
}


/* -------------------------------------------------------------------------- */


/*  2.  Variables
/* -------------------------------------------------------------------------- */

:root {
    --white: #FFF;
    --black: #212721;
    --tan: #DFD1A7;
    --yellow: #dfac1f;
    --yellow-hover: #8F3237;
    --maroon: #8F3E46;
    --green: #00966C;
    --blue: #3A5DAE;
    --blue-hover: #193167;
    --silver: #CBD3EB;
    --gold: #DAAA00;
    --grey: #EEE;
}


/* -------------------------------------------------------------------------- */


/*  3.  Document Setup
/* -------------------------------------------------------------------------- */

*,
::after,
::before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    outline: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::-moz-selection {
    background-color: rgba(58, 93, 174, .99);
    color: var(--white);
}

::selection {
    background-color: rgba(58, 93, 174, .99);
    color: var(--white);
}

:focus {
    outline: none;
}

::-moz-focus-inner {
    border: 0;
}

select:-moz-focusring {
    color: transparent;
    text-shadow: none;
}

html {
    font-size: 18px;
    line-height: 1.4;
    font-family: 'Metropolis Regular';
    scroll-behavior: smooth;
}

body {
    background-color: var(--white);
    color: var(--black);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Metropolis Bold';
    font-weight: 500;
    line-height: 1.2;
}

p {
    margin-top: 0;
    margin-bottom: 1rem;
    line-height: 1.6;
}

p:last-child {
    margin-bottom: 0;
}

ul,
ol {
    margin-bottom: 1rem;
}

ol {
    padding-left: 2rem;
}

ul:last-child,
ol:last-child {
    margin-bottom: 0;
}

ul li,
ol li {
    position: relative;
    margin-bottom: .625rem;
}

ul li {
    list-style: none;
    padding-left: .75em;
}

ol li {
    padding-left: .25em;
}

ul li:last-child,
ol li:last-child {
    margin-bottom: 0;
}

ul li::before {
    background-color: var(--gold);
    border-radius: 50%;
    content: '';
    display: block;
    height: .3em;
    width: .3em;
    position: absolute;
    left: 0;
    top: .5em;
}

a {
    text-decoration: none;
    transition: .2s ease;
}

a:hover,
a:focus {
    color: var(--blue);
}

p a {
    color: var(--blue);
}

p a:hover,
p a:focus {
    color: var(--blue-hover);
}

:disabled {
    cursor: not-allowed;
}

.container {
    max-width: calc(150rem + 2.5rem);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.page-heading {
    font-family: 'Judson', cursive;
    font-size: 3.125rem;
    line-height: 1.2;
    text-align: center;
    margin-bottom: 1.875rem;
}

.section-heading {
    font-size: 1.875rem;
    line-height: 1.2;
    margin-bottom: .625rem;
}

.subheading {
    font-size: 1.375rem;
    line-height: 1.2;
    margin-bottom: .625rem;
}

.card-heading {
    font-size: 1.375rem;
    line-height: 1.2;
    margin-bottom: .625rem;
}

.lead {
    font-size: 1.25rem;
}

.lead strong {
    font-family: 'Metropolis Bold';
    font-weight: 500;
}

#site-wrapper {
    opacity: 1;
    min-height: 100vh;
    width: 100%;
    transition: opacity .3s;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.admin-bar #site-wrapper {
    min-height: calc(100vh - 32px);
}

.content {
    padding: 7.5rem 0 3.75rem 0;
}

#page .container {
    max-width: 1200px;
}

.error404 #page {
    text-align: center;
}

@media only screen and (max-width: 1700px) {
    html {
        font-size: 17px;
    }
}

@media only screen and (max-width: 782px) {
    .admin-bar #site-wrapper {
        min-height: calc(100vh - 46px);
    }
}

@media only screen and (max-width: 600px) {
    html {
        font-size: 16px;
    }
    #wpadminbar {
        position: fixed !important;
    }
}

@media only screen and (min-width: 601px) {
    .container {
        max-width: calc(93rem + 6rem);
        padding-left: 3rem;
        padding-right: 3rem;
    }
    .page-heading {
        font-size: 3.3rem;
        margin-bottom: 2.5rem;
    }
    .section-heading {
        font-size: 4rem;
        margin-bottom: 2rem;
    }
    .subheading {
        font-size: 2rem;
        margin-bottom: .625rem;
    }
    .card-heading {
        font-size: 2rem;
    }
    .lead {
        font-size: 1.5rem;
    }
    .content {
        padding: 9.5rem 0 3.75rem 0;
    }
}

@media only screen and (min-width: 1401px) {
    .page-heading {
        font-size: 4rem;
    }
    .content {
        padding: 13rem 0 6rem 0;
    }
}


/* Colors ------------------------------------ */

.tan-hover,
.red-hover,
.maroon-hover,
.green-hover,
.blue-hover,
.black-hover,
.silver-hover,
.gold-hover {
    background-color: transparent;
}

.red-hover:hover,
.maroon-hover:hover,
.green-hover:hover,
.blue-hover:hover,
.black-hover:hover,
.gold-hover:hover,
.red-hover.active,
.maroon-hover.active,
.green-hover.active,
.blue-hover.active,
.black-hover.active,
.gold-hover.active {
    color: var(--white);
}

.tan,
.tan-hover:hover,
.tan-hover.active {
    background-color: var(--tan);
}

.red,
.red-hover:hover,
.red-hover.active {
    background-color: var(--yellow);
}

.maroon,
.maroon-hover:hover,
.maroon-hover.active {
    background-color: var(--maroon);
}

.green,
.green-hover:hover,
.green-hover.active {
    background-color: var(--green);
}

.blue,
.blue-hover:hover,
.blue-hover.active {
    background-color: var(--blue);
}

.black,
.black-hover:hover,
.black-hover.active {
    background-color: var(--black);
}

.silver,
.silver-hover:hover,
.silver-hover.active {
    background-color: var(--silver);
}

.gold,
.gold-hover:hover,
.gold-hover.active {
    background-color: var(--gold);
}

.tan-text {
    color: var(--tan);
}

.red-text {
    color: var(--yellow);
}

.maroon-text {
    color: var(--maroon);
}

.green-text {
    color: var(--green);
}

.blue-text {
    color: var(--blue);
}

.black-text {
    color: var(--black);
}

.silver-text {
    color: var(--silver);
}

.gold-text {
    color: var(--gold);
}


/* Screen Reader Only ------------------------ */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    border: 0;
}


/* Button ------------------------------------ */

.next-link {
    margin-left: auto;
}

.prev-link {
    margin-right: auto;
}

.button,
.next-link a,
.prev-link a {
    cursor: pointer;
    display: inline-block;
    font-family: 'Brandon Grotesque';
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: 1px;
    padding: 1.1rem 1.7rem;
    position: relative;
    text-transform: uppercase;
    transition: .3s ease;
}

.button span,
.next-link a span,
.prev-link a span {
    color: var(--white);
    position: relative;
    z-index: 2;
}

.button::after,
.next-link a::after,
.prev-link a::after {
    background-color: var(--yellow);
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    transition: .2s;
}

.next-link a::after,
.prev-link a::after {
    background-color: var(--blue);
}

.button::before,
.next-link a::before,
.prev-link a::before {
    background-color: var(--yellow-hover);
    content: '';
    position: absolute;
    top: 0;
    right: 100%;
    bottom: 0;
    left: 0;
    z-index: 1;
    transition-timing-function: ease-in-out;
    transition-timing-function: cubic-bezier(.42, 0, .58, 1);
    transition: .2s ease;
}

.next-link a::before,
.prev-link a::before {
    background-color: var(--blue-hover);
}

.button:hover::before,
.button:focus::before,
.next-link a:hover::before,
.next-link a:focus::before,
.prev-link a:hover::before,
.prev-link a:focus::before {
    right: 0;
}

.button:disabled {
    cursor: not-allowed;
}

.button:disabled span {
    color: var(--white);
}

.button:disabled::after,
.button:disabled::before {
    background-color: #9B9B9B;
}

@media only screen and (max-width: 600px) {
    .button,
    .next-link a,
    .prev-link a {
        font-size: 1.125rem;
        padding: .4375rem 1.375rem;
    }
}

@media only screen and (max-width: 783px) {
    .next-link a>span>span,
    .prev-link a>span>span {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        -webkit-clip-path: inset(50%);
        clip-path: inset(50%);
        border: 0;
    }
}


/* Slider Nav -------------------------------- */

.slider-nav-dots {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
}

.slider-nav-dots,
.slider-nav-dots ul {
    align-items: center;
    display: flex;
    justify-content: center;
}

.slider-nav-dots ul li {
    list-style: none;
    padding: 0;
    margin: 0;
}

.slider-nav-dots ul li:only-child button {
    opacity: 0;
    pointer-events: none;
}

.slider-nav-dots ul li::before {
    display: none;
}

.slider-nav-dots ul li::after {
    display: none;
}

.slider-nav-dots ul li button {
    pointer-events: all;
    background-color: transparent;
    box-shadow: 0 0 0 2px var(--blue) inset;
    border-radius: 50%;
    cursor: pointer;
    display: block;
    font-size: 0;
    line-height: 0;
    height: .75rem;
    width: .75rem;
    margin: 0 .55rem;
    transition: .2s;
}

.slider-nav-dots ul li button:hover,
.slider-nav-dots ul li button:focus {
    box-shadow: 0 0 0 4px var(--blue) inset;
}

.slider-nav-dots ul li.slick-active button {
    background-color: var(--blue);
}

.slider-nav-arrows {
    display: flex;
    justify-content: space-between;
}

.slider-nav-arrows button {
    background-color: transparent;
    color: var(--blue);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    display: flex;
    width: 50px;
    height: 50px;
    transition: .2s;
}

.slider-nav-arrows button:hover,
.slider-nav-arrows button:focus {
    color: var(--black);
}


/* -------------------------------------------------------------------------- */


/*  4.  Header
/* -------------------------------------------------------------------------- */

#header {
    background-color: var(--white);
    box-shadow: none;
    display: flex;
    align-items: flex-start;
    position: fixed;
    top: 0;
    width: 100%;
    transition: .3s ease;
    z-index: 10;
}

.admin-bar #header {
    top: 32px;
}

#header.compact {
    box-shadow: 0 10px 15px rgba(0, 0, 0, .05);
}

#logo {
    color: var(--black);
    font-size: 7rem;
    order: 2;
    padding: 1.5rem 0;
    transition: .3s ease;
}

#header.compact #logo {
    font-size: 4rem;
    padding: 1rem 0;
}

.header--left {
    order: 1;
    width: 100%;
    display: flex;
    align-items: center;
}

#header.compact .header--left .button {
    font-size: 1.1rem;
    padding: .5rem 1.2rem;
}

.header--right {
    order: 3;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 4.5rem;
    transition: .3s ease;
}

#header.compact .header--right {
    height: 2.65rem;
}

.header--email-link {
    color: var(--black);
    margin-left: 1.5rem;
}

.header--social-link {
    color: var(--black);
    font-size: 1.4rem;
    margin-right: 1rem;
    transition: .3s ease;
}

#header.compact .header--social-link:last-of-type {
    margin-right: 2rem;
}

.header--color-bar {
    display: flex;
    transition: .3s ease;
    width: 14.8rem;
    overflow: hidden;
}

#header.compact .header--color-bar {
    opacity: 0;
    width: 0;
}

.header--color-bar>* {
    height: 1.85rem;
    width: 1.85rem;
}

#menu-toggle {
    background-color: transparent;
    cursor: pointer;
    display: none;
    margin: 0 1rem 0 0;
    font-family: 'Metropolis Bold';
    font-weight: 500;
    font-size: 1rem;
    padding: .5rem 1.2rem;
    text-transform: uppercase;
    transition: .3s ease;
}

#menu-toggle:hover,
#menu-toggle:focus {
    color: var(--blue);
}

#mobile-menu {
    background-color: var(--blue);
    bottom: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 2.5rem;
    position: fixed;
    opacity: 0;
    top: 8rem;
    visibility: hidden;
    z-index: 5;
    transition: .2s ease;
    overflow: auto;
}

#mobile-menu.open {
    opacity: 1;
    top: 0;
    visibility: visible;
}

.admin-bar #mobile-menu.open {
    top: 32px;
}

#close-menu {
    align-self: flex-end;
    background-color: transparent;
    cursor: pointer;
    display: block;
    color: var(--white);
    font-size: 2rem;
    padding: 1.25rem;
    position: relative;
    top: -1.25rem;
    right: -1.25rem;
    margin-bottom: -1.25rem;
    transition: .3s ease;
    flex-shrink: 0;
}

#close-menu:hover,
#close-menu:focus {
    color: var(--black);
}

.mobile-menu--social-links {
    display: flex;
    margin-bottom: 3.75rem;
}

.mobile-menu--social-link {
    color: var(--white);
    display: block;
    font-size: 1.75rem;
    margin-right: 1.875rem;
}

.mobile-menu--social-link:hover,
.mobile-menu--social-link:focus {
    color: var(--black);
}

#mobile-menu .button {
    align-self: flex-start;
}

#mobile-menu .button span {
    color: var(--blue);
}

#mobile-menu .button::after {
    background-color: var(--white);
}

#mobile-menu .button::before {
    background-color: var(--grey);
}

#mobile-menu::after {
    content: '';
    display: block;
    height: 2.5rem;
    width: 100%;
    flex-shrink: 0;
}

@media only screen and (min-width: 1201px) {
    #mobile-menu.open {
        opacity: 0;
        top: 8rem !important;
        visibility: hidden;
    }
}

@media only screen and (max-width: 1400px) {
    #header {
        box-shadow: 0 10px 15px rgba(0, 0, 0, .05);
    }
    #logo {
        font-size: 4rem;
        padding: 1rem 0;
    }
    .header--left .button {
        font-size: 1.1rem;
        padding: .5rem 1.2rem;
    }
    .header--right {
        height: 2.65rem;
    }
    .header--social-link:last-of-type {
        margin-right: 2rem;
    }
    .header--color-bar {
        opacity: 0;
        width: 0;
    }
    .header--email-link {
        font-size: .9rem;
    }
}

@media only screen and (max-width: 1200px) {
    .header--email-link,
    .header--social-link {
        display: none;
    }
    .header--right {
        align-self: center;
        height: 100%;
    }
    .header--color-bar {
        display: none
    }
    #menu-toggle {
        display: block;
    }
}

@media only screen and (max-width: 782px) {
    .admin-bar #header {
        top: 46px;
    }
    .admin-bar #mobile-menu.open {
        top: 46px;
    }
}

@media only screen and (max-width: 600px) {
    #logo,
    #header.compact #logo {
        font-size: 2.25rem;
    }
    .header--left .button,
    #header.compact .header--left .button {
        font-size: .875rem;
        padding: .3125rem .786rem;
    }
    #menu-toggle {
        font-size: .875rem;
        margin: 0;
        padding: .5rem 1.25rem;
    }
}


/* Main Nav ---------------------------------- */

#main-nav {
    display: flex;
    justify-content: space-between;
    position: absolute;
    width: 100%;
    bottom: 0;
    padding: 0 1.666rem 1.5rem 1.666rem;
    pointer-events: none;
    transition: .3s;
}

#header.compact #main-nav {
    padding: 0 1.666rem 1rem 1.666rem;
}

#main-nav ul {
    display: flex;
}

#main-nav ul li {
    padding: 0;
    margin-bottom: 0;
    list-style: none;
}

#main-nav ul li::before {
    display: none;
}

#menu-main-menu-left li {
    margin-right: 3rem;
}

#menu-main-menu-right li {
    margin-left: 3rem;
}

#menu-main-menu-left li:last-child {
    margin-right: 0;
}

#menu-main-menu-right li:first-child {
    margin-left: 0;
}

#main-nav ul li a {
    color: var(--black);
    text-transform: uppercase;
    pointer-events: all;
    position: relative;
}

#main-nav ul li a::after {
    background-color: var(--black);
    content: '';
    position: absolute;
    bottom: -.25rem;
    left: 0;
    right: 100%;
    height: 2px;
    opacity: 0;
    transition: right .2s, opacity 0s .2s;
}

#main-nav ul li.current-menu-item a::after {
    right: 0;
    opacity: 1;
    transition: right .2s, opacity 0s;
}

#main-nav ul li a:hover,
#main-nav ul li a:focus {
    color: var(--black);
}

#main-nav ul li a:hover::after,
#main-nav ul li a:focus::after {
    right: 0;
    opacity: 1;
    transition: right .3s, opacity 0s;
}

#main-nav .sub-menu {
    background-color: var(--white);
    border: 1px solid var(--black);
    display: none;
    position: absolute;
    padding-top: 3.5rem;
    top: -.75rem;
    left: -.75rem;
    padding: 3rem .75rem .75rem .75rem;
    flex-direction: column;
    min-width: 10rem;
    z-index: -1;
}

#main-nav .sub-menu li {
    margin: 0 0 .75rem 0;
    line-height: 1;
}

#main-nav .sub-menu li:last-child {
    margin: 0;
}

#main-nav .sub-menu li a {
    text-transform: none;
    font-size: .825rem;
}

#main-nav .sub-menu li a::after {
    display: none;
}

#main-nav .sub-menu li a:hover,
#main-nav .sub-menu li a:focus {
    color: var(--blue);
}

@media only screen and (max-width: 1400px) {
    #main-nav {
        padding: 0 1.666rem 1rem 1.666rem;
    }
}

@media only screen and (max-width: 1200px) {
    #main-nav {
        display: none;
    }
}


/* Mobile Main Nav --------------------------- */

#mobile-main-nav {
    margin-bottom: 1.25rem;
}

#mobile-main-nav ul li {
    padding: 0;
    margin: 0 0 2rem 0;
    list-style: none;
}

#mobile-main-nav ul li::before {
    display: none;
}

#mobile-main-nav ul li a {
    color: var(--white);
    font-family: 'Metropolis Bold';
    font-weight: 500;
    font-size: 2.5rem;
    line-height: 1.1;
}

#mobile-main-nav ul li a:hover,
#mobile-main-nav ul li a:focus {
    color: var(--black);
}

#mobile-main-nav .sub-menu {
    padding-top: 2rem;
}

#mobile-main-nav .sub-menu li {
    margin-bottom: 1.25rem;
    padding-left: 1.25rem;
}

#mobile-main-nav .sub-menu li a {
    font-size: 1.375rem;
}


/* -------------------------------------------------------------------------- */


/*  5.  Home
/* -------------------------------------------------------------------------- */


/* Banner ------------------------------------ */

#banner {
    background-color: var(--white);
    height: 100vh;
    position: relative;
    background-repeat: no-repeat;
    background-position: center bottom 0;
    background-size: cover;
    transition: height .3s ease;
}

@media only screen and (max-width: 1200px) {
    #banner {
        height: 50vh;
    }
}

@media only screen and (max-width: 600px) {
    #banner {
        height: 40vh;
    }
}


/* CTA --------------------------------------- */

#cta {
    margin-top: 3.875rem;
    padding: 1.875rem 1.25rem;
    position: relative;
    text-align: center;
}

.cta--heading {
    font-family: 'Judson', cursive;
    font-size: 1.25rem;
    line-height: 1.3;
}

.cta--email-block {
    margin: .625rem 0;
}

.cta--email-block--left {
    box-shadow: 0 2px 0 var(--yellow);
    height: 1.875rem;
    position: absolute;
    left: -1.25rem;
    right: 1.25rem;
    top: -1.5rem;
}

.cta--email-block .icon-food-truck {
    color: var(--yellow);
    display: block;
    font-size: 1.875rem;
    position: absolute;
    bottom: 0;
    right: 100%;
    transition: right 3s ease-out;
}

.cta--email-block .button {
    flex-shrink: 0;
}

.cta--email-block .icon-food-truck.show {
    right: 0;
}

.cta--email-block--right {
    display: none;
}

#cta p {
    margin: 0;
}

@media only screen and (min-width: 601px) {
    .cta--heading {
        font-size: 3rem;
    }
    .cta--email-block {
        margin-bottom: 1.5rem;
    }
    .cta--email-block .icon-food-truck {
        font-size: 3.7rem;
    }
    .cta--email-block--left {
        height: 4.45rem;
    }
    #cta p {
        font-size: 1.5rem;
    }
    #cta {
        margin-top: 4.625rem;
        padding: 5rem 2rem 7.5rem 2rem;
    }
}

@media only screen and (min-width: 801px) {
    #cta {
        margin-top: 0;
        padding: 7.5rem 3rem;
    }
    .cta--email-block {
        display: flex;
        align-items: flex-end;
        margin: 1.5rem -3rem;
    }
    .cta--email-block .button {
        order: 2;
        margin: 0 3rem;
    }
    .cta--email-block--left {
        box-shadow: 0 -2px 0 var(--yellow) inset;
        position: relative;
        left: 0;
        right: 0;
        top: 0;
        height: 4.45rem;
        width: 100%;
        order: 1;
    }
    .cta--email-block--right {
        display: block;
        width: 100%;
        order: 3;
        height: 4.45rem;
    }
    .cta--email-block .icon-food-truck {
        margin-bottom: 2px;
    }
}

@media only screen and (min-width: 1201px) {
    .cta--email-block .icon-food-truck {
        transition: right 2s ease-out;
    }
}


/* Intro ------------------------------------- */

#intro {
    text-align: center;
    padding: 0 1.25rem 3.75rem 1.25rem;
    max-width: 1500px;
    margin: 0 auto;
    width: 100%;
}

#intro p {
    font-size: 1.25rem;
}

@media only screen and (min-width: 601px) {
    #intro {
        padding: 0 3rem 7rem 3rem;
    }
    #intro p {
        font-size: 1.5rem;
    }
}


/* Benefits ---------------------------------- */

#benefits {
    padding: 0;
}

#featured-benefit {
    color: var(--white);
}

.benefit {
    padding: 1.875rem 1.25rem;
}

.benefit-toggle {
    background-color: transparent;
    color: inherit;
    cursor: pointer;
    font-family: 'Metropolis Bold';
    font-weight: 500;
}

.benefit-toggle i {
    color: inherit;
    font-size: .8rem;
    margin-right: .6rem;
}

.benefit--content {
    margin-top: 1rem;
}

@media only screen and (min-width: 601px) {
    .benefit {
        padding: 3rem;
    }
}

@media only screen and (min-width: 1201px) {
    #benefits {
        display: flex;
        align-items: flex-start;
        padding: 0 3rem;
    }
    .benefits--left-block,
    .benefits--right-block {
        width: 50%;
    }
}


/* Clients ----------------------------------- */

#clients {
    margin-top: 3.75rem;
}

#clients .subheading {
    margin-bottom: 1.25rem;
    text-align: center;
}

#clients-slider .slick-track {
    display: flex;
}

#clients-slider .client {
    display: flex;
    align-self: center;
    align-items: center;
    justify-content: center;
}

#clients-slider .client--inner {
    max-width: 8rem;
    max-height: 4rem;
}

#clients-slider .client--inner img {
    object-fit: contain;
    width: 8rem;
    height: 4rem;
}

@media only screen and (min-width: 601px) {
    #clients {
        margin-top: 6rem;
    }
    #clients .subheading {
        margin-bottom: 1.5rem;
    }
}


/* Gallery ----------------------------------- */

#gallery {
    margin-top: 3.75rem;
    margin-bottom: 3.75rem;
    text-align: center;
}

.gallery--image {
    height: 74vw !important;
}

.gallery--image img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

#gallery .button {
    margin-top: 2rem;
}

@media only screen and (min-width: 601px) {
    #gallery {
        margin-top: 6rem;
        margin-bottom: 6rem;
    }
    .gallery--image {
        height: 37vw !important;
    }
    #gallery .button {
        margin-top: 3.75rem;
    }
}

@media only screen and (min-width: 1201px) {
    .gallery--image {
        height: 25vw !important;
    }
}

@media only screen and (min-width: 1681px) {
    .gallery--image {
        height: 420px !important;
    }
}


/* Perks ------------------------------------- */

#perks {
    padding: 0 1.25rem;
    margin-bottom: 3.75rem;
    margin-top: 3.75rem;
}

.perks--slider-wrapper {
    border: 1px solid var(--black);
    border-bottom: none;
    display: flex;
    flex-direction: column-reverse;
}

#perks-slider-nav {
    margin: -1rem .75rem 1rem .75rem;
    position: relative;
    z-index: 5;
}

#perks-slider .slick-track {
    display: flex;
}

.perk {
    align-self: center;
    justify-content: center;
    display: flex !important;
    flex-direction: column;
    padding: 1.875rem;
}

.perk.no-content {
    align-items: center;
    text-align: center;
}

.perk--heading {
    font-family: 'Judson', cursive;
    font-size: 1.875rem;
    line-height: 1.3;
    order: 2;
}

.perk.no-content .perk--heading {
    font-size: 2.5rem;
}

.perk--content {
    margin-top: .875rem;
    order: 3;
}

.perk--icon {
    margin-bottom: .625rem;
    width: 5.625rem;
    order: 1;
}

.perk.no-content .perk--icon {
    margin-bottom: 1.25rem;
}

.perk--icon svg * {
    fill: currentColor;
}

.perks--image img {
    display: block;
    width: 100%;
    height: 100%;
}

@media only screen and (min-width: 601px) {
    #perks {
        padding: 0 3rem;
        margin-bottom: 6rem;
        margin-top: 6rem;
    }
    #perks-slider-nav {
        margin: -1.25rem 2rem 2rem 2rem;
    }
    .perk {
        padding: 3rem;
    }
    .perk--heading {
        font-size: 2.25rem;
    }
    .perk.no-content .perk--heading {
        font-size: 4rem;
    }
    .perk--icon {
        margin-bottom: 1.5rem;
        width: 6.5rem;
    }
}

@media only screen and (min-width: 1201px) {
    #perks {
        display: flex;
    }
    .perks--slider-wrapper {
        width: 50%;
        border-bottom: 1px solid var(--black);
        margin-right: 1.5rem;
    }
    .perk.no-content .perk--heading {
        max-width: 30rem;
        width: 100%;
    }
    .perks--image {
        width: 50%;
        margin-left: 1.5rem;
        align-self: stretch;
    }
    .perks--image img {
        object-fit: cover;
        width: 100%;
        height: 100%;
    }
}


/* Featured Video ---------------------------- */

#featured-video {
    text-align: center;
    padding: 0 1.25rem;
    margin-bottom: 3.75rem;
    max-width: 1066px;
    margin-left: auto;
    margin-right: auto;
}

#featured-video .subheading {
    margin-bottom: 1.25rem;
}

.featured-video-video-wrapper {
    width: 100%;
    padding-top: 56.25%;
    position: relative;
}

.featured-video-video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media only screen and (min-width: 601px) {
    #featured-video {
        padding: 0 3rem;
        margin-bottom: 6rem;
    }
    #featured-video .subheading {
        margin-bottom: 1.5rem;
    }
}


/* Testimonials ------------------------------ */

#testimonials {
    margin-bottom: 3.75rem;
}

.testimonials--heading {
    text-align: center;
    padding: 0 3rem;
    font-family: 'Judson', cursive;
    font-size: 1.75rem;
    line-height: 1.3;
    margin-bottom: 1rem;
}

.testimonials--heading span {
    position: relative;
}

.testimonials--heading span::before {
    color: var(--gold);
    content: '\0201C';
    position: absolute;
    font-family: 'Metropolis Bold';
    font-size: 4rem;
    top: -1.25rem;
    left: -2.5rem;
}

#testimonials-slider-nav {
    margin-bottom: 1rem;
    position: relative;
    z-index: 5;
}

#testimonials-slider-nav .slider-nav-dots {
    position: relative;
}

#testimonials .slider-nav-dots ul li button,
#testimonials .slider-nav-dots ul li.slick-active button {
    box-shadow: 0 0 0 2px var(--gold) inset;
}

#testimonials .slider-nav-dots ul li button:hover,
#testimonials .slider-nav-dots ul li button:focus {
    box-shadow: 0 0 0 4px var(--gold) inset;
}

#testimonials .slider-nav-dots ul li.slick-active button {
    background-color: var(--gold);
}

.testimonial--inner {
    max-width: calc(800px + 6rem);
    margin-left: auto;
    margin-right: auto;
    padding: 0 1.25rem;
    text-align: center;
}

.testimonial p {
    font-size: 1.25rem;
}

.testimonial .client {
    font-family: 'Metropolis Bold';
    font-weight: 500;
}

@media only screen and (min-width: 601px) {
    #testimonials {
        margin-bottom: 6rem;
    }
    .testimonials--heading {
        font-size: 3rem;
        margin-bottom: 2.5rem;
        padding: 3rem 6rem 0 6rem;
    }
    .testimonials--heading span::before {
        font-size: 9.4rem;
        top: -4rem;
        left: -5.5rem;
    }
    #testimonials-slider-nav {
        margin-bottom: 3rem;
    }
    .testimonial--inner {
        padding: 0 3rem;
    }
    .testimonial p {
        font-size: 1.5rem;
    }
}


/* -------------------------------------------------------------------------- */


/*  6.  Footer
/* -------------------------------------------------------------------------- */


/* Contact Info ------------------------------ */

#footer-contact {
    background-color: var(--yellow);
    align-items: center;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.footer--logo {
    padding: 1.875rem 0;
}

.footer--logo a {
    color: var(--white);
    font-size: 5rem;
}

.footer--logo:hover,
.footer--logo:focus {
    color: var(--white);
}

.contact--info {
    width: 100%;
    margin-bottom: -1.25rem;
    padding: 0 1.25rem 1.875rem 1.25rem;
}

.contact--info-block {
    color: var(--white);
    margin-bottom: 1.25rem;
}

.contact--info-block--heading {
    text-transform: uppercase;
}

.contact--info-block p {
    margin-bottom: 0;
}

.contact--info-block a {
    color: var(--white);
}

.footer--color-blocks {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.footer--color-blocks * {
    width: 25vw;
    height: 25vw;
}

@media only screen and (min-width: 601px) {
    .footer--logo {
        padding: 2rem 0;
    }
    .footer--logo a {
        font-size: 4rem;
    }
    .contact--info {
        margin-top: 0;
        padding: 0 1.25rem 2rem 1.25rem;
        width: auto;
    }
    .contact--info-block>* {
        font-size: .888rem;
    }
    .footer--color-blocks * {
        width: 12.5vw;
        height: 12.5vw;
    }
}

@media only screen and (min-width: 801px) {
    #footer-contact {
        flex-direction: row;
        align-items: stretch;
        justify-content: space-between;
    }
    .footer--logo {
        padding: 2rem 3rem;
        width: 15.5rem;
        flex-shrink: 0;
    }
    .contact--info {
        display: flex;
        justify-content: center;
        padding-top: 2rem;
        padding-left: 0;
        padding-right: 0;
        width: 100%;
    }
    .contact--info-blocks {
        display: flex;
        flex-wrap: wrap;
        width: 15rem;
        margin-left: 3rem;
    }
    .contact--info-block {
        display: inline-block;
        margin-left: 0;
        margin-right: 0;
        width: 15rem;
    }
    .footer--color-blocks-wrapper {
        display: flex;
        align-items: stretch;
        justify-content: flex-end;
        flex-wrap: wrap;
        width: 12.5rem;
        flex-shrink: 0;
    }
    .footer--color-blocks {
        width: 9rem;
    }
    .footer--color-blocks * {
        width: 50%;
        height: 25%;
    }
}

@media only screen and (min-width: 1061px) {
    .contact--info-blocks {
        width: 30rem;
    }
    .footer--color-blocks {
        width: 7rem;
    }
}

@media only screen and (min-width: 1341px) {
    .footer--logo {
        width: 20vw;
    }
    .contact--info-blocks {
        width: 45rem;
        margin-left: 0;
    }
    .footer--color-blocks-wrapper {
        width: 20vw;
    }
    .footer--color-blocks {
        width: 100%;
        max-width: 16rem;
    }
    .footer--color-blocks * {
        width: 25%;
        height: 50%;
    }
}


/* Copyright --------------------------------- */

#copyright {
    text-transform: uppercase;
}

#copyright .container {
    display: flex;
    flex-direction: column;
    max-width: none;
}

#copyright p {
    margin: 1.25rem 1.25rem 1.25rem 0;
}

.footer--links {
    display: flex;
    flex-wrap: wrap;
    margin-right: auto;
}

.footer--links a {
    color: var(--black);
    text-decoration: underline;
    margin: .25rem 1.25rem .25rem 0;
}

.footer--links a:hover,
.footer--links a:focus {
    text-decoration: none;
}

.footer--social-links {
    align-items: center;
    display: flex;
    justify-content: flex-end;
    margin: 1.25rem 0;
}

.footer--social-links .footer--social-link {
    color: var(--black);
    font-size: 1.75rem;
    margin-left: 1.252rem;
}

.footer--social-links .footer--social-link:hover,
.footer--social-links .footer--social-link:focus {
    color: var(--blue);
}

@media only screen and (min-width: 601px) {
    #copyright .container {
        align-items: center;
        flex-direction: row;
        justify-content: space-between;
    }
    #copyright p,
    .footer--links a {
        font-size: .888rem;
        margin-right: 3rem;
    }
    .footer--social-links .footer--social-link {
        font-size: 1.4rem;
    }
}


/* -------------------------------------------------------------------------- */


/*  7.  Form Elements
/* -------------------------------------------------------------------------- */

::placeholder {
    color: #AAAAAA;
    opacity: 1;
}

button[type="submit"].sending {
    pointer-events: none;
    cursor: not-allowed;
}


/* Input Group ------------------------------- */

.input-group {
    position: relative;
    margin-bottom: 1.25rem;
}

.input-group:last-child {
    margin-bottom: 0;
}

.input-group input,
input[type="text"],
input[type="number"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 1px solid var(--black);
    border-radius: 0;
    box-shadow: none;
    color: var(--black);
    font-family: 'Metropolis Regular';
    font-size: 1rem;
    line-height: 1.3;
    width: 100%;
    margin: 0;
    padding: 1rem;
    min-height: 3.4375rem;
    transition: .2s;
}

.input-group input:focus,
input[type="text"]:focus,
input[type="number"]:focus {
    border: 1px solid var(--blue);
    box-shadow: 0 0 0 1px var(--blue);
}

.input-group input:disabled,
input[type="text"]:disabled,
input[type="number"]:disabled {
    background-color: #F3F3F3;
    border: 1px solid #AAAAAA;
    color: #AAAAAA;
}

.input-group input.input-has-value {
    padding-bottom: 0;
    padding-top: 1.3rem;
}

.input-group.invalid input {
    border: 1px solid var(--yellow);
    box-shadow: none;
}

.input-group label {
    position: absolute;
    top: 0;
    left: 1.1rem;
    font-family: 'Metropolis Bold';
    font-weight: 500;
    font-size: .75rem;
    opacity: 0;
    transition: .2s;
}

.input-group label.input-has-value {
    opacity: 1;
    top: .55rem;
}

@media only screen and (min-width: 601px) {
    .input-group {
        margin-bottom: 1.5rem;
    }
}


/* Radio ------------------------------------- */

.radio {
    margin-bottom: 1rem;
}

.radio:last-child {
    margin-bottom: 0;
}

[type="radio"]:checked,
[type="radio"]:not(:checked) {
    position: absolute;
    left: -9999px;
}

[type="radio"]:checked+label,
[type="radio"]:not(:checked)+label {
    position: relative;
    padding-left: 1.875rem;
    cursor: pointer;
    display: inline-block;
    color: var(--black);
}

[type="radio"]:checked+label:before,
[type="radio"]:not(:checked)+label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 1.25rem;
    height: 1.25rem;
    border: 1px solid var(--black);
    border-radius: 100%;
    background: var(--white);
    transition: .2s;
}

[type="radio"]:checked+label:after,
[type="radio"]:not(:checked)+label:after {
    font-family: 'AAFT' !important;
    content: '\e90c';
    font-size: 1.25rem;
    color: var(--blue);
    line-height: 1;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 100%;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

[type="radio"]:not(:checked)+label:after {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
}

[type="radio"]:checked+label:after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

[type="radio"]:focus+label:before {
    border: 1px solid var(--blue);
    box-shadow: 0 0 0 2px var(--blue);
}


/* Textarea ---------------------------------- */

textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 1px solid var(--black);
    border-radius: 0;
    color: var(--black);
    font-family: 'Metropolis Regular';
    font-size: 1rem;
    line-height: 1.3;
    width: 100%;
    margin-bottom: 1.25rem;
    resize: none;
    padding: 1rem;
    transition: .2s;
}

textarea:focus {
    border: 1px solid var(--blue);
    box-shadow: 0 0 0 1px var(--blue);
}

.input-group textarea.input-has-value {
    padding-top: 1.7rem;
}

textarea:last-child {
    margin-bottom: 0;
}


/* -------------------------------------------------------------------------- */


/*  8.  Quote Builder
/* -------------------------------------------------------------------------- */

#quote-progress-tracker {
    display: flex;
    width: 100%;
    margin: 0 -1px 1.875rem -1px;
}

#quote-progress-tracker>div {
    background-color: var(--blue);
    height: .75rem;
    width: 100%;
    margin: 0 1px;
    opacity: .3;
    transition: .3s;
}

#quote-progress-tracker>div.active {
    opacity: 1;
}

#quote {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    padding: 0 .625rem;
}

#quote>div {
    grid-column-start: 1;
    grid-row-start: 1;
}

#quote .input-group {
    width: calc(100% - 1.25rem);
    max-width: 800px;
}

#quote textarea {
    display: block;
    max-width: 40rem;
    width: calc(100% - 1.25rem);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
    margin-top: 1.25rem;
}

#quote #additional-notes {
    width: 100%;
    max-width: none;
    margin-top: 0;
}

.quote--step--heading {
    font-size: 1.375rem;
    text-align: center;
    margin-bottom: 1.25rem;
}

#quote>div>p {
    font-size: 1.25rem;
    text-align: center;
    margin: 0 .625rem 1.5625rem .625rem;
}

.quote--step--section-heading {
    font-size: 1.25rem;
    text-align: center;
    margin-bottom: 1rem;
    margin-top: 1.5rem;
}

.quote-option-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: -1.25rem;
}

.quote-option-wrapper+.quote-option-wrapper {
    margin-top: 1.25rem;
}

.quote-option {
    border: 1px solid var(--silver);
    padding: 1.25rem;
    margin: 0 .625rem 1.25rem .625rem;
    max-width: 19.35rem;
    width: 100%;
}

#quote--step7 .quote-option {
    max-width: 56.25rem;
}

.quote-option--image {
    margin-bottom: 1.25rem;
    width: 100%;
    height: 50vw;
}

.quote-option--image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#quote--step6 .quote-option--image {
    margin: -1.25rem -1.25rem 1.25rem -1.25rem;
    width: calc(100% + 2.5rem);
    height: 58vw;
}

#quote--step6 .quote-option--image img {
    object-fit: cover;
}

.quote-option--heading {
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

.quote-option input[type="text"],
.quote-option input[type="number"] {
    margin-left: 1.875rem;
    width: calc(100% - 1.875rem);
}

.quote--actions {
    display: flex;
    flex-direction: row-reverse;
    max-width: calc(95rem);
    padding-left: .625rem;
    padding-right: .625rem;
    margin-top: 1.25rem;
    margin-left: auto;
    margin-right: auto;
}

.quote--actions button {
    cursor: pointer;
}

.quote--actions button[type="button"]::after {
    background-color: var(--blue);
}

.quote--actions button[type="button"]::before {
    background-color: var(--blue-hover);
}

.quote--actions button[id$="next"] {
    margin-left: auto;
}

.quote--actions button[id$="back"] {
    margin-right: auto;
}

#quote--step8 .quote-option-wrapper {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
}

#specify-budget {
    margin-bottom: 1rem;
}

@media only screen and (min-width: 371px) {
    .quote-option {
        min-width: 19.35rem;
    }
    .quote-option--image {
        height: 11.5625rem;
    }
    #quote--step6 .quote-option--image {
        height: 12rem;
    }
}

@media only screen and (min-width: 601px) {
    #quote {
        padding: 0 2rem;
    }
    #quote .input-group {
        width: calc(100% - 3rem);
    }
    #quote textarea {
        width: calc(100% - 3rem);
    }
    .quote--step--heading {
        font-size: 3rem;
    }
    #quote>div>p {
        font-size: 1.5rem;
    }
    .quote-option-wrapper {
        margin-bottom: -2rem;
    }
    .quote-option-wrapper+.quote-option-wrapper {
        margin-top: 2rem;
    }
    .quote-option {
        border: 1px solid var(--silver);
        padding: 3rem;
        margin: 0 1rem 2rem 1rem;
    }
    .quote--step--section-heading {
        font-size: 2rem;
    }
    .quote-option--heading {
        font-size: 1.5rem;
    }
    #quote textarea {
        margin-top: 3rem;
    }
    .quote--actions {
        padding-left: 1rem;
        padding-right: 1rem;
        margin-top: 3rem;
    }
    #quote--step7 .quote-option--heading {
        font-size: 2rem;
    }
}


/* -------------------------------------------------------------------------- */


/*  9.  Contact Us
/* -------------------------------------------------------------------------- */

#contact-us .page-heading {
    text-align: left;
}

#contact-us .form-block p:first-of-type {
    font-size: 1.25rem;
    margin-bottom: 1.25rem;
}

#contact {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2rem;
}

#contact #submit {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

@media only screen and (min-width: 601px) {
    #contact-us .form-block p:first-of-type {
        font-size: 1.5rem;
    }
    #contact #submit {
        margin-top: 3rem;
    }
}

@media only screen and (min-width: 1201px) {
    #contact-us .container {
        display: flex;
    }
    #contact-us .container>* {
        width: 50%;
    }
    .form-block {
        padding-right: 3rem;
    }
}


/* Map --------------------------------------- */

.info-block--map {
    width: 100%;
    height: 40vw;
    margin: 3rem 0;
}

@media only screen and (min-width: 1201px) {
    .info-block--map {
        height: 25vw;
        max-height: 450px;
        margin-top: 0;
    }
}


/* Contact Info ------------------------------ */

.info-block--contact-info {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.info-block--contact-info .subheading {
    margin-top: 1.5rem;
}

.info-block--contact-info .subheading:first-child {
    margin-top: 0;
}

.info-block--contact-info a {
    color: var(--blue);
    font-size: 1.125rem;
}

.info-block--contact-info a:hover,
.info-block--contact-info a:focus {
    color: var(--blue-hover);
}

.info-block--contact-info p {
    font-size: 1.125rem;
    margin: 0;
}


/* CTA --------------------------------------- */

.info-block--cta {
    margin-top: 3rem;
    text-align: center;
}

.info-block--cta p {
    margin-top: 1rem;
}


/* -------------------------------------------------------------------------- */


/*  10.  Form Success
/* -------------------------------------------------------------------------- */

#success {
    text-align: center;
}

#success div[class^="icon"] {
    color: var(--green);
    font-size: 4.625rem;
}

#success span {
    color: var(--green);
    display: block;
    font-family: 'Judson', cursive;
    line-height: 1.2;
    font-size: 2.375rem;
    margin-top: 1.875rem;
    margin-bottom: 0.625rem;
}

#success p {
    font-size: 1.25rem;
}

@media only screen and (min-width: 601px) {
    #success div[class^="icon"] {
        margin-top: 3rem;
    }
    #success span {
        font-size: 4rem;
        margin-bottom: 1.875rem;
    }
    #success p {
        font-size: 1.5rem;
    }
}


/* -------------------------------------------------------------------------- */


/*  11.  Gallery
/* -------------------------------------------------------------------------- */


/* Gallery Archive --------------------------- */

#gallery-archive .container {
    padding: 0 .625rem;
}

.gallery--wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: -1.25rem;
}

.gallery--item {
    display: flex;
    flex-direction: column-reverse;
    margin: 0 .625rem 1.25rem .625rem;
    width: 100%;
    max-width: 19.35rem;
}

.gallery--info {
    border: 1px solid var(--black);
    border-top: none;
    padding: 1.25rem;
}

.gallery--info--heading {
    color: var(--black);
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

.gallery--info--link {
    color: var(--blue);
    font-family: 'Metropolis Bold';
    font-weight: 500;
    transition: .2s;
}

.gallery--item:hover .gallery--info--link {
    color: var(--blue-hover);
}

.gallery--info--link span[class*="icon-"] {
    margin-left: .5rem;
    font-size: .9rem;
    position: relative;
    top: .08rem;
}

.gallery--images {
    background-color: var(--black);
    width: 100%;
    height: 50vw;
    position: relative;
}

.gallery--images>div {
    background-size: cover;
    background-position: center center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.gallery--images--hover {
    opacity: 0;
    transition: .35s;
}

.gallery--item:hover .gallery--images--hover {
    opacity: 1;
}

@media only screen and (min-width: 371px) {
    .gallery--item {
        min-width: 19.35rem;
    }
    .gallery--images {
        height: 11.5625rem;
    }
}

@media only screen and (min-width: 601px) {
    .gallery--wrapper {
        margin-bottom: -2rem;
    }
    .gallery--item {
        height: 330px;
        max-height: 330px;
        margin: 0 1rem 2rem 1rem;
    }
    .gallery--info {
        padding: 1.75rem;
    }
    .gallery--info--heading {
        font-size: 1.5rem;
    }
}


/* Gallery Details --------------------------- */

#gallery-details .page-heading {
    text-align: left;
}

#gallery-details .lead {
    margin-bottom: 1.25rem;
}

#gallery-details .subheading {
    font-size: 1.25rem;
}

.gallery-details--slider-wrapper {
    display: flex;
    flex-direction: column-reverse;
    max-width: 660px;
    width: 100%;
    margin-bottom: 1.5rem;
    flex-shrink: 0;
}

#gallery-details-slider-nav {
    margin: .5rem -.75rem 0 -.75rem;
    position: relative;
    z-index: 5;
}

.gallery-slider--image {
    height: 70vw !important;
}

.gallery-slider--image img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.gallery--post-nav {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    margin-top: 3.125rem;
}

@media only screen and (min-width: 601px) {
    #gallery-details .lead {
        margin-bottom: 1.5rem;
    }
    #gallery-details .subheading {
        font-size: 1.5rem;
    }
    .gallery-details--slider-wrapper {
        margin-bottom: 2rem;
    }
    #gallery-details-slider-nav {
        margin: .75rem -1rem 0 -1rem;
    }
    .gallery-slider--image {
        height: 60vw !important;
    }
    .gallery--post-nav {
        margin-top: 6rem;
    }
}

@media only screen and (min-width: 801px) {
    .gallery-details--copy ul {
        column-count: 2;
        column-gap: 3rem;
    }
    .gallery-slider--image {
        height: 25rem !important;
    }
}

@media only screen and (min-width: 1341px) {
    .gallery-details--wrapper {
        display: flex;
        flex-direction: row-reverse;
        align-items: flex-start;
    }
    .gallery-details--slider-wrapper {
        margin-bottom: 0;
    }
    .gallery-details--copy {
        padding-right: 3rem;
    }
}


/* -------------------------------------------------------------------------- */


/*  12.  About Us
/* -------------------------------------------------------------------------- */


/* Team -------------------------------------- */

#our-team .page-heading {
    text-align: left;
}

#our-team p:first-of-type {
    font-size: 1.25rem;
    margin-bottom: 1.25rem;
}

#our-team img {
    display: block;
    margin: 1.5rem 0 0;
    width: 100%;
    max-width: 700px;
    height: auto;
}

@media only screen and (min-width: 601px) {
    #our-team p:first-of-type {
        font-size: 1.5rem;
    }
    #our-team img {
        margin: 2rem 0 0;
    }
}

@media only screen and (min-width: 1341px) {
    #our-team .container {
        display: flex;
    }
    #our-team .container>* {
        align-self: flex-start;
    }
    #our-team .container>div:first-child {
        align-self: center;
        padding-right: 3rem;
    }
    #our-team img {
        flex-shrink: 0;
        margin: 0;
    }
}


/* Pride ------------------------------------- */

#pride {
    margin: 3.75rem 0;
}

.pride--statement {
    color: var(--yellow);
    font-family: 'Judson', cursive;
    font-size: 1.75rem;
    line-height: 1.3;
    text-align: center;
}

@media only screen and (min-width: 601px) {
    .pride--statement {
        font-size: 2.35rem;
    }
}

@media only screen and (min-width: 1401px) {
    #pride {
        margin: 6rem 0;
    }
}


/* About Blocks ------------------------------ */

.about--blocks p:first-of-type {
    font-size: 1.25rem;
    margin-bottom: 1.25rem;
}

.about--blocks .image {
    width: 100%;
    height: 60vw;
    max-height: 400px;
}

.about--blocks .image img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

@media only screen and (min-width: 601px) {
    .about--blocks p:first-of-type {
        font-size: 1.5rem;
    }
}

@media only screen and (min-width: 1201px) {
    .about--blocks {
        display: grid;
        grid-template-columns: 50% 50%;
        grid-template-rows: auto auto;
        padding: 0 3rem;
        max-width: calc(93rem + 6rem);
        margin-left: auto;
        margin-right: auto;
    }
    .about--blocks .image {
        height: 30vw;
        max-height: 500px;
    }
}


/* Story ------------------------------------- */

#story {
    background-color: var(--black);
    color: var(--white);
    padding: 3.75rem 1.25rem;
}

@media only screen and (min-width: 601px) {
    #story {
        padding: 3.75rem 3rem;
    }
}

@media only screen and (min-width: 1201px) {
    #story {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

@media only screen and (min-width: 1401px) {
    #story {
        padding: 6rem 3rem;
    }
}


/* Facility ---------------------------------- */

#facility {
    padding: 3.75rem 1.25rem 0 1.25rem;
}

@media only screen and (min-width: 601px) {
    #facility {
        padding: 3.75rem 3rem 0 3rem;
    }
}

@media only screen and (min-width: 1201px) {
    #facility {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 3.75rem 3rem;
        grid-column-start: 2;
        grid-row-start: 1;
    }
}

@media only screen and (min-width: 1401px) {
    #facility {
        padding: 6rem 3rem;
    }
}


/* Experience -------------------------------- */

#experience {
    padding: 3.75rem 1.25rem;
    color: var(--black);
    font-family: 'Judson', cursive;
    font-size: 1.75rem;
    line-height: 1.3;
    text-align: center;
}

@media only screen and (min-width: 601px) {
    #experience {
        font-size: 2.35rem;
        padding: 3.75rem 3rem;
    }
}

@media only screen and (min-width: 1201px) {
    #experience {
        display: flex;
        align-items: center;
    }
}

@media experience screen and (min-width: 1401px) {
    #experience {
        padding: 6rem 3rem;
    }
}


/* -------------------------------------------------------------------------- */


/*  13.  Resources
/* -------------------------------------------------------------------------- */


/* Banner ------------------------------------ */

.resource--banner {
    background-repeat: no-repeat;
    background-position: center bottom 0;
    background-size: cover;
    border-color: black;
    border-bottom-width: 2.5rem;
    border-top-width: 0;
    border-left-width: 0;
    border-right-width: 0;
    border-style: solid;
    padding-top: 2rem;
    margin-bottom: 5rem;
}

.resource--banner--card {
    color: var(--white);
    padding: 1.875rem 1.25rem;
    position: relative;
    top: 3.75rem;
    width: 100%;
}

.resource--banner--card.tan,
.resource--banner--card.silver {
    color: var(--black);
}

.resource--banner--card .page-heading {
    text-align: left;
}

.resource--banner--card p {
    font-size: 1.25rem;
}

@media only screen and (min-width: 601px) {
    .resource--banner {
        padding-top: 3.75rem;
        margin-bottom: 7.75rem;
    }
    .resource--banner--card {
        padding: 3rem;
        top: 5.25rem;
    }
    .resource--banner--card p {
        font-size: 1.5rem;
    }
}

@media only screen and (min-width: 1201px) {
    .resource--banner {
        margin-bottom: 2.75rem;
    }
    .resource--banner--card {
        width: 50%;
    }
}

@media only screen and (min-width: 1401px) {
    .resource--banner {
        padding-top: 7rem;
        margin-bottom: 4.5rem;
    }
    .resource--banner--card {
        top: 7rem;
    }
}


/* Columns ----------------------------------- */

.resource--columns h3 {
    font-size: 1.375rem;
    line-height: 1.2;
    margin-top: 2rem;
    margin-bottom: .625rem;
}

.resource--columns h3:first-child {
    margin-top: 0;
}

.resource--columns h3+p,
.resource--columns p:first-child {
    font-size: 1.25rem;
}

.resource--columns ul li {
    padding: 0;
    font-family: 'Metropolis Bold';
    font-weight: 500;
    font-style: italic;
}

.resource--columns ul li:last-child {
    margin-bottom: 0;
}

.resource--columns ul li::before {
    display: none;
}

.resource--columns.tan ul li {
    color: var(--tan);
}

.resource--columns.red ul li {
    color: var(--yellow);
}

.resource--columns.maroon ul li {
    color: var(--maroon);
}

.resource--columns.green ul li {
    color: var(--green);
}

.resource--columns.blue ul li {
    color: var(--blue);
}

.resource--columns.silver ul li {
    color: var(--silver);
}

.resource--columns.gold ul li {
    color: var(--gold);
}

.resource--columns {
    background-color: var(--white);
}

.resource--columns:last-child {
    margin-bottom: 3.75rem;
}

.resource--column {
    margin-top: 3.75rem;
}

@media only screen and (min-width: 601px) {
    .resource--columns h3 {
        font-size: 2rem;
        margin-top: 3rem;
    }
    .resource--column {
        margin-top: 5rem;
    }
    .resource--columns:last-child {
        margin-bottom: 6rem;
    }
}

@media only screen and (min-width: 1201px) {
    .resource--columns {
        display: flex;
        align-items: flex-start;
    }
    .resource--column {
        width: 50%;
    }
    .resource--column:first-child {
        padding-right: 3rem;
    }
    .resource--column:last-child {
        padding-left: 3rem;
    }
}


/* Columns ----------------------------------- */

.resource--callout h3 {
    font-size: 1.375rem;
    line-height: 1.2;
    margin-top: 2rem;
    margin-bottom: .625rem;
}

.resource--callout h3:first-child {
    margin-top: 0;
}

.resource--callout h3 em {
    font-family: 'Judson', cursive;
    font-size: 2.5rem;
    line-height: 1.2;
    font-style: normal;
}

.resource--callout--column {
    margin-top: 3.75rem;
}

.resource--callout--card {
    color: var(--white);
    padding: 1.875rem 1.25rem;
}

.resource--callout--card ul li::before {
    background-color: var(--white);
}

.resource--callout--card.tan,
.resource--callout--card.silver {
    color: var(--black);
}

.resource--callout--card.tan ul li::before,
.resource--callout--card.silver ul li::before {
    background-color: var(--black);
}

.resource--callout:last-child {
    margin-bottom: 3.75rem;
}

.resource--callout .resource--column {
    font-size: 1.25rem;
}

@media only screen and (min-width: 601px) {
    .resource--callout h3 {
        font-size: 2rem;
        margin-top: 3rem;
    }
    .resource--callout h3 em {
        font-size: 4rem;
    }
    .resource--callout--column {
        margin-top: 5rem;
    }
    .resource--callout--card {
        padding: 3rem;
    }
    .resource--callout .resource--column {
        font-size: 1.5rem;
    }
    .resource--callout:last-child {
        margin-bottom: 6rem;
    }
}

@media only screen and (min-width: 1201px) {
    .resource--callout {
        display: flex;
        align-items: flex-start;
    }
    .resource--callout--column {
        align-self: stretch;
        display: flex;
        width: 50%;
    }
    .resource--callout .resource--column:first-child {
        padding-right: 3rem;
    }
    .resource--callout .resource--column:last-child {
        padding-left: 3rem;
    }
    .resource--callout--card,
    .resource--callout .resource--column {
        align-self: stretch;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}


/* Features ---------------------------------- */

.resource--features {
    margin-top: 3.75rem;
}

.resource--features:last-child {
    margin-bottom: 3.75rem;
}

.resource--features .subheading {
    margin-bottom: 1.25rem;
    text-align: center;
}

.resource--features--block {
    display: flex;
    flex-direction: column-reverse;
    margin: 0 -1.25rem;
}

.resource--features--block--text {
    padding: 1.875rem 1.25rem;
}

.resource--features--block--subheading {
    display: inline-block;
    margin-bottom: 1rem;
    position: relative;
    top: -.625rem;
}

.resource--features--block--image {
    width: 100%;
    height: 50vw;
}

.resource--features--block--image img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

@media only screen and (min-width: 601px) {
    .resource--features {
        margin-top: 5rem;
    }
    .resource--features:last-child {
        margin-bottom: 6rem;
    }
    .resource--features .subheading {
        margin-bottom: 1.5rem;
    }
    .resource--features--block {
        margin: 0;
    }
}

@media only screen and (min-width: 1201px) {
    .resource--features--block {
        flex-direction: row;
    }
    .resource--features--block>div {
        width: 50%;
    }
    .resource--features--block--text {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 3rem;
    }
    .resource--features--block--image {
        align-self: stretch;
        height: auto;
    }
    .resource--features--block:nth-child(odd) {
        flex-direction: row-reverse;
    }
}


/* CTA --------------------------------------- */

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

.resource--cta--content {
    max-width: 1600px;
    margin: 3.75rem auto 1.25rem auto;
}

.resource--cta--content p {
    font-size: 1.25rem;
}

.resource--cta:last-child {
    margin-bottom: 3.75rem;
}

.resource--cta .button {
    margin-bottom: 1rem;
}

@media only screen and (min-width: 601px) {
    .resource--cta:last-child {
        margin-bottom: 6rem;
    }
    .resource--cta--content {
        margin-top: 5rem;
        margin-bottom: 1.5rem;
    }
}

@media only screen and (min-width: 1201px) {
    .resource--cta:first-child {
        margin-top: 7.75rem;
    }
}

@media only screen and (min-width: 1401px) {
    .resource--cta:first-child {
        margin-top: 9.5rem;
    }
}


/* Videos ------------------------------------ */

.resource--video {
    text-align: center;
    max-width: 1066px;
    margin-top: 3.75rem;
    margin-left: auto;
    margin-right: auto;
}

.resource--video:last-child {
    margin-bottom: 3.75rem;
}

.resource--video .subheading {
    margin-bottom: 1.25rem;
}

.resource--video--wrapper {
    width: 100%;
    padding-top: 56.25%;
    position: relative;
}

.resource--video--wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media only screen and (min-width: 601px) {
    .resource--video {
        margin-top: 5rem;
    }
    .resource--video:last-child {
        margin-bottom: 6rem;
    }
    .resource--video .subheading {
        margin-bottom: 1.5rem;
    }
}


/* -------------------------------------------------------------------------- */


/*  14.  Blog
/* -------------------------------------------------------------------------- */


/* Post Page */

#post .container {
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#post--image {
    margin-bottom: 2rem;
}

#post--image img {
    width: 100%;
    max-width: 1000px;
    max-height: 600px;
    height: auto;
}

#post--content {
    max-width: 800px;
    margin: 0 auto;
}

#post--content h1,
#post--content h2,
#post--content h3,
#post--content h4,
#post--content h5,
#post--content h6 {
    margin-top: 1.6rem;
    margin-bottom: .666rem;
}

#post--content h1:first-child,
#post--content h2:first-child,
#post--content h3:first-child,
#post--content h4:first-child,
#post--content h5:first-child,
#post--content h6:first-child {
    margin-top: 0;
}

#post--content h1 {
    font-size: 3rem;
}

#post--content h2 {
    font-size: 2.5rem;
}

#post--content h3 {
    font-size: 2.25rem;
}

#post--content h4 {
    font-size: 2rem;
}

#post--content h5 {
    font-size: 1.5rem;
}

#post--content h6 {
    font-size: 1rem;
}

#post--content ul,
#post--content ol {
    margin-bottom: 1rem;
}

#post--content ul:last-child,
#post--content ol:last-child {
    margin-bottom: 0;
}

#post--content ul li,
#post--content ol li {
    color: var(--black);
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: .666rem;
}

#post--content ul li {
    list-style: none;
    position: relative;
    padding-left: 1.2em;
}

#post--content ul li:last-child,
#post--content ol li:last-child {
    margin-bottom: 0;
}

#post--content ul li::after {
    background-color: var(--blue);
    content: '';
    display: block;
    position: absolute;
    width: 0.282em;
    height: 0.282em;
    left: 0;
    top: 0.4em;
    font-size: 1.333em;
}


/* Post Archive */

#post-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: -40px;
}

.post {
    max-width: 800px;
    width: 100%;
    margin: 0 20px 40px 20px;
}

.post--image-wrapper {
    width: 100%;
    height: 500px;
    overflow: hidden;
}

.post--image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .2s;
}

.post--content-wrapper {
    border: 1px solid var(--black);
    border-top: none;
    padding: 1.75rem;
}

.post--title {
    color: var(--black);
    font-size: 1.5rem;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.post--content-wrapper p {
    color: var(--black);
}

.post--link {
    color: var(--blue);
    font-family: 'Metropolis Bold';
    font-weight: 500;
    transition: .2s;
}

.post:hover .post--link {
    color: var(--yellow);
}

.post:hover .post--image-wrapper img {
    transform: scale(1.1);
}

@media only screen and (max-width: 900px) {
    .post--image-wrapper {
        height: 56vw;
    }
}


/* Comments */

#reply-title {
    text-transform: uppercase;
    font-size: 1.75rem;
    margin-bottom: 1rem;
}

#respond {
    margin: 3rem auto 0 auto;
    width: 100%;
    max-width: 800px;
}

#respond #submit {
    border: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: var(--blue);
    border-radius: 0;
    color: var(--white);
    cursor: pointer;
    font-size: 1.25rem;
    padding: 1rem 1.2rem;
    text-transform: uppercase;
    font-family: 'Brandon Grotesque';
    transition: .35s
}

#respond #submit:hover,
#respond #submit:focus {
    background-color: var(--blue-hover);
}

.page-content {
    font-family: 'Judson', cursive;
    font-size: 1.125rem;
    text-align: center;
    margin-bottom: 0.875rem;
}