/**
 * This is the main CSS file for the layout, which will contain most of your site's shared CSS.
 */

/***** KEY *****

.blockName
.blockName-elementName (for a subcomponent of a block)
.blockName_modifierName (for a variation of a block)

Font stacks:
montserrat, arial, sans-serif
bebas-neue, arial, sans-serif

Colors:
#555555

*/


/***** HELPERS *****/
/* For clearfix, use the .group class */
.container:after,
.group:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.nobr {
    white-space: nowrap;
}

/* Responsive images */
img, object, embed {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    border: 0;
}

.noMargin.noMargin {
    margin: 0;
}

.noPad.noPad {
    padding: 0;
}

.clickable {
    cursor: pointer;
}

.invisible {
    visibility: hidden;
    position: absolute;
    z-index: -99;
}

body .hide {
    display: none;
}

.center {
    text-align: center;
}

.animate {
    -webkit-transition: all .3s;
    transition: all .3s;
}

.ltr {
    direction: ltr;
}

.rtl {
    direction: rtl;
}

/* Helper classes for setting bottom margins */
.mb0 {
    margin-bottom: 0;
}
.mb1 {
    margin-bottom: .5rem;
}
.mb2 {
    margin-bottom: 1rem;
}
.mb3 {
    margin-bottom: 1.5rem;
}
.mb4 {
    margin-bottom: 2rem;
}
.mb5 {
    margin-bottom: 2.5rem;
}
.mb6 {
    margin-bottom: 3rem;
}

strong {
    font-weight: 700;
}


/* Wrap tables and other elements with this to make it possible to enable horizontal scroll when the screen size is too small to contain the element fully */
.scrollWrapper {
    overflow: auto;
    position: relative;
    margin-bottom: 2em;
}
    .scrollWrapper > table {
        margin: 0;
    }


.noTransitions * {
    transition: none !important;
}

.videoFitCover {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
    .videoFitCover video {
        /* Make video at least 100% wide and tall */
        min-width: 100%;
        min-height: 100%;

        /* Setting width & height to auto prevents the browser from stretching or squishing the video */
        width: auto;
        height: auto;

        /* Center the video */
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }


/***** BLOCKS *****/

/* ~1440px wide viewport */
html {
    /**
     * We set the font size here since rems are relative to the html tag's font size.
     * Adjusting this percentage will scale every element on the page specified in rems or ems proportionally.
     * Generally, you should use rems for sizing so that only the root font size (set here) will effect your dimensions. Use ems instead of rems when you want to easily scale the contents of a component using the font size of its container. Set font sizes only on leaf nodes (elements with no children) unless you want to scale an entire component using the font size of its container.
     */
    font-size: 100%; /* 16px (To convert from pixels to rems, divide the pixel value by 16) */
    background-color: #fff100;
}
    /* Once the browser window is more than 1600px wide, resize everything upwards proportionally */
    @media (min-width: 1600px) {
        html {
            font-size: 1vw;
        }
    }
    /* Between 1400px and 1600px, the defaults from above will take effect */

    /* Once the browser window is less than 1400px wide, we adjust the font size as needed */
    @media (max-width: 1400px) {
        html {
            font-size: 90%;
        }
    }
    /*@media (max-width: 1350px) {*/
    /*    html {*/
    /*        font-size: 90%;*/
    /*    }*/
    /*}*/
    @media (max-width: 1300px) {
        html {
            font-size: 85%;
        }
    }
    @media (max-width: 1250px) {
        html {
            font-size: 80%;
        }
    }
    @media (max-width: 950px) {
        html {
            font-size: 75%;
        }
    }
    @media (max-width: 800px) {
        html {
            font-size: 73%;
        }
    }

body {
    position: relative;
    background-color: #ffffff;

    font-family: montserrat, arial, sans-serif;
    font-weight: 400;
    color: #231F20;
    line-height: 1.25;

    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%; /* responsive */

    border-style: solid;
    border-width: .45rem;
    border-color: #fff100;
    height: auto;
    min-width: 300px; /* No smaller than iPhone SE */
}
    /* Mobile overflow fix to prevent horizontal scrolling */
    .body-overflow {
        overflow-x: hidden;
    }
    /* Dims and disables the page (for use with menu and modals */
    .body-mask {
        display: none;
        position: fixed;
        z-index: 900;
        margin: .45rem;
        margin-bottom: 0;
        top: 0; right: 0; bottom: 0; left: 0;
        background-color: rgba(0,0,0,.5);
    }
    .body-topBorder {
        height: .45rem;
        background-color: #fff100;
        position: fixed;
        top: 0; right: 0; left: 0;
        z-index: 901;
    }

    .body_disabled { /* Stop body scrolling when menu/modal open */
        overflow: hidden;
        height: 100vh;
    }

/* Sets site's primary content container width/margins */
.container {
    margin: 0 3rem;
    position: relative;
}
/* Ignore nested containers */
.container .container {
    width: auto;
    min-width: initial;
    max-width: initial;
    margin: initial;
}
    @media (max-width: 600px) {
        .container {
            margin: 0 1.5rem
        }
    }

/*** Headings ***/

.heading1, .richTxt h2 {
    margin-bottom: 1.25rem;
    font-size: 3rem;
    line-height: 1.05;
    font-weight: 700;
    text-transform: uppercase;
}
.heading2, .richTxt h3 {
    margin-bottom: 1.25rem;
    font-size: 2.375rem;
    line-height: 1.05;
    font-weight: bold;
    text-transform: uppercase;
}
.heading3, .richTxt h4 {
    margin-bottom: 1.25rem;
    font-size: 1.75rem;
    line-height: 1.05;
    color: #231F20;
    font-weight: bold;
    text-transform: uppercase;
}
.heading4 {
    font-family: bebas-neue, arial, sans-serif;
    font-size: 2rem;
    text-transform: uppercase;
    padding-bottom: .1rem;
    margin-bottom: 1.25rem;
    border-bottom: solid #ffffff 3px;
}

/**
 * Increase the spacing between the end of a paragraph and the start of a new heading
 */
p + .heading1, p + a + .heading1,
p + .heading2, p + a + .heading2,
p + .heading3, p + a + .heading3 {
    margin-top: 2rem;
}

/* Use the richText class to wrap content entered in rich text (wysiwyg) editor fields. */
.richTxt {}
    .richTxt p {
        font-size: 1.25rem;
        line-height: 1.6;
        margin-bottom: 1.25em;
    }
    .richTxt ol, .richTxt ul {
        margin-bottom: 2rem;
        padding-left: 1.5rem;
    }
    .richTxt ul {
        list-style: square;
    }
    .richTxt ol {
        list-style: decimal;
    }
    .richTxt li {
        margin-bottom: 1rem;
        font-size: 1.25rem;
    }
        .richTxt li::marker {
            font-size: 1.75rem;
            line-height: 1rem;
        }

small, .small, .richTxt .small {
    font-size: .75em;
}

.big, .richTxt .big {
    font-size: 1.5em;
    font-weight: bold;
    color: #231F20;
}
    .section_dark .big {
        color: #FFF;
    }

.link {
    color: #403B3C;
    border-bottom: 4px solid #FEF200;
    font-weight: 700;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    background-size: 100% 200%;
    background-image: linear-gradient(to top, #FEF200 50%, #FFF 50%);
}
    .link:hover {
        background-position: 0 100%;
    }

figure {
    margin-bottom: 2rem;
}

figcaption {
    font-weight: 600;
    font-size: 0.9em;
    padding: 0.75em 1.5em;
    color: #FFFFFF;
    background-image: url("images/tile-gray.png");
    background-repeat: repeat;
}
    figcaption p:last-of-type {
        margin-bottom: 0;
    }

/* These classes are mainly for use in CKEditor. CKEditor can only apply one class at a time, so all subclasses must include the base class's styles */
.align, .align_left, .align_right, .align_center {
    max-width: 100%;
    margin-bottom: 1.5em;
}
    .align_left, .align_right {
        max-width: 40%;
    }
    .align_left {
        float: left;
        margin-right: 2em;
        margin-left: 0;
    }
    .align_right {
        float: right;
        margin-left: 2em;
        margin-right: 0;
    }
    .align_right figcaption {
        text-align: right;
    }
    .align_center {
        display: block;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
    @media (max-width:800px) {
        .align_left > figcaption,
        .align_right > figcaption,
        .align_center > figcaption {
            font-size: .75em;
        }
    }
    @media (max-width: 600px) {
        .align_left, .align_right, .align_center {
            float: none;
            max-width: 100%;
            display: block;
            margin-left: auto;
            margin-right: auto;
        }
        .align_left > figcaption,
        .align_right > figcaption {
            text-align: center;
        }
    }

blockquote, .blockquote {
    position: relative;
    border: 3px solid #000;
    padding: 1.5rem 6.5rem 1.5rem 1.5rem;
    font-weight: bold;
}
    blockquote:after, .blockquote:after {
        content: url("images/quote.svg");
        position: absolute;
        right: 1.5rem;
        top: 1rem;
    }
    blockquote p:nth-last-of-type(1), .blockquote p:nth-last-of-type(1) {
        margin-bottom: 0;
    }

    .blockquote_left {
        width: 45%;
        float: left;
        margin: 0 3rem 2rem -4rem;
    }
    .blockquote_right {
        width: 45%;
        float: right;
        margin: 0 -4rem 2rem 3rem;
    }
    @media (max-width: 600px) {
        blockquote, .blockquote {
            float: none !important;
            width: 100% !important;
            margin: 2.5rem 0 !important;
            padding-right: 5rem;
        }
        blockquote:after, .blockquote:after {
            right: 0.5rem;
        }
        blockquote p:nth-last-of-type(1), .blockquote p:nth-last-of-type(1) {
            font-size: 1.1rem;
        }
    }


.MarkupPagerNav {
}
    .MarkupPagerNav li {
        display: inline-block;
        margin: 0 1px;
    }
    .MarkupPagerNav li a {
        color: #fff;
        padding: 8px 8px;
        font-size: .75rem;
        cursor: pointer;
        background-color: #555;
    }
    .MarkupPagerNav li.MarkupPagerNavSeparator {
        font-size: .75rem;
        padding: 6px 4px;
    }
    .MarkupPagerNav li.MarkupPagerNavOn a,
    .MarkupPagerNav li a:focus,
    .MarkupPagerNav li a:hover {
        background: #333;
    }

.breadcrumb {
    margin: 0 0 .2em;
    padding: 0;
    font-size: 1.2em;
    font-weight: 600;
}
    .breadcrumb-item {
        display: inline;
        margin: 0;
        padding: 0;
        text-shadow: 0 2px 2px rgba(0,0,0,0.50);
        text-transform: uppercase;
    }
    .breadcrumb-item a:hover,
    .breadcrumb-item a:focus {
        color: #fff100;
    }
    .breadcrumb-item:after {
        content: " / ";
    }

.bodyContent {}
    .bodyContent-main {
        position: relative;
        margin-top: -3.5rem;
        /*min-height: 40rem;*/
        width: 87%;
    }
    @media(max-width: 800px) {
        .bodyContent-main {
            width: 90%;
        }
    }
    @media(max-width: 600px) {
        .bodyContent-main {
            width: 100%;
        }
    }

.bodyContent_hasSidebar {
    display: flex;
    align-items: stretch;
}
    .bodyContent_hasSidebar .bodyContent-main {
        flex-grow: 1;
    }
    .bodyContent_hasSidebar .bodyContent-sidebar {
        width: 26rem;
    }
    .bodyContent-sidebar > .ui {
        height: 100%;
    }
    @media(max-width: 900px) {
        .bodyContent_hasSidebar {
            flex-wrap: wrap;
        }
        .bodyContent_hasSidebar .bodyContent-main,
        .bodyContent_hasSidebar .bodyContent-sidebar {
            width: 100%;
        }
        .bodyContent_stackSidebarTop .bodyContent-sidebar {
            order: -1;
            margin-top: -3.5rem;
        }
        .bodyContent_stackSidebarTop .bodyContent-main {
            margin-top: 0;
        }
    }

.bodyContent_center {}
    .bodyContent_center .bodyContent-main {
        width: 85%;
        margin-left: auto;
        margin-right: auto;
    }
    @media(max-width: 600px) {
        .bodyContent_center .bodyContent-main {
            width: 100%;
        }
    }

.sideBar {
    background-color: #262626;
    color: #ffffff;
    font-family: montserrat, arial, sans-serif;
    padding: 3.5rem 0;
    position: relative;
    height: 100%;
}
    .sideBar-main {
        z-index: 1;
        position: relative;
    }


.section {
    padding-top: 3rem;
    padding-bottom: 3rem;
}
    .section-contain {
        width: 80%;
        max-width: 60rem;
        margin: 2em auto;
    }
    .section-pad {
        padding: 0 2rem;
    }
.section_img {
    background-size: contain;
    background-repeat-x: repeat;
    padding: 3rem 0;
    position: relative;
}
    .section_img .bgImg {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-size: 100%;
        background-size: cover;
        background-position: center;
        opacity: 0.12;
        overflow-x: hidden;
    }
.section_light {
    color:#231F20;
    background: #FFFFFF;
    background-image: url("images/textures-dirt-splatter-png-27.png");
    background-repeat: repeat;
}
.section_dark {
    color: #FFF;
    padding: 3rem 0;
    /*background-color: #7c7c7c;*/
    background-color: #444755;
}
    .section_dark .heading1,
    .section_dark .heading2,
    .section_dark .heading3,
    .section_dark .heading4 {
        color: #FFF;
    }
    @media (max-width: 800px) {
        .section_dark {
            padding: 2rem 0;
        }
    }
    @media (max-width: 600px) {
        .section {
            padding-top: 1.5rem;
        }
        .section-contain {
            width: auto;
            /* These values should equal the .container margins */
            margin-left: 1.5rem;
            margin-right: 1.5rem;
        }
        .section-pad {
            padding: 0 1.5rem;
        }
        .section_dark {
            padding: 1.5rem 0;
        }
        .section_dark > .container > .blockMain {
            aspect-ratio: 2 / 1;
            width: 100%;
        }
    }

.blockMain {
    width: 95%;
    margin: 0 auto;
}
.blockSidebar {}

.asideLeft, .asideRight {
    display: flex;
    justify-content: space-between;
}
    .asideLeft .blockMain, .asideRight .blockMain {
        flex-basis: 60%;
    }
    .asideLeft .blockSidebar, .asideRight .blockSidebar {
        flex-basis: 35%;
    }
    .asideLeft .blockSidebar {
        order: -1;
    }
    .asideRight .blockSidebar {

    }
    @media (max-width: 800px) {
        .asideLeft .blockMain, .asideRight .blockMain {
            flex-basis: 55%;
        }
        .asideLeft .blockSidebar, .asideRight .blockSidebar {
            flex-basis: 40%;
        }
    }
    @media (max-width: 600px) {
        .asideLeft, .asideRight {
            flex-wrap: wrap;
        }
        .asideLeft .blockMain, .asideRight .blockMain {
            flex-basis: 100%;
        }
        .asideLeft .blockSidebar, .asideRight .blockSidebar {
            flex-basis: 100%;
            margin-bottom: 1rem;
        }
    }

/*** Forms ***/

/* Placeholder text */
.placeholder {
    color: #999;
}
    ::-webkit-input-placeholder {
        color: #999;
    }
    :-moz-placeholder {
        color: #999;
    }
    ::-moz-placeholder {
        color: #999;
    }
    ::-ms-input-placeholder {
        color: #999;
    }

.notices {
    margin-bottom: 2rem;
}

.notice {
    color: #fff;
    background-color: #555;
    margin: 0 0 .25rem 0;
    padding: .5rem;
    font-size: .95em;
    font-weight: bold;
    text-align: left;
}

    .notice_error {
        background-color: rgb(210 42 42);
    }

    .notice_success {
        background-color: #09ba74;
    }

.field {
    position: relative;
    width: 100%;
}
    .field-description {
        margin-bottom: .5rem;
    }
    .field-label {
        position: absolute;
        top: 1rem;
        left: .85rem;
        color: #c4b6b9;
        font-weight: 400;
        transform-origin: 0 0;
        transition: all 0.2s ease;
        text-transform: uppercase;
        z-index: 11;
        pointer-events: none;
    }
    .field-input {
        width: 100%;
        max-width: 100%;
    }
        .field-input:hover, .field-input:focus {
            outline: none;
            background-color: #333333;
        }
        /* Hide placeholders so we can use the label instead */
        .field-input::placeholder {
            color: transparent;
        }
        /* Shrink label when field is populated */
        .populated .field-label, .field-input:not(:placeholder-shown) + .field-label {
            transform: translateY(-.75rem) scale(.65);
            font-weight: 600;
        }
    .field-required {
        color: rgb(210 42 42);
        font-weight: 600;
    }
    .field-notes {
        font-size: .75em;
        font-style: italic;
        color: #5A5A5A;
        margin-top: .2rem;
    }
    .field-error {
        display: block;
        font-weight: bold;
        padding: .2rem .5rem;
        color: #fff;
        background-color: rgb(210 42 42);
        font-size: .75em;
    }
    .field-error:empty {
        display: none;
    }
    /*.field_error.field_error.field_error {*/
    /*    margin-bottom: 2rem;*/
    /*}*/
        .field_error .txtBox {
            border: 1px solid rgb(210 42 42);
            border-bottom: none;
        }


.txtBox {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 0;
    padding: 1rem .8rem 0.75rem;
    max-width: 100%;
    background-color: #000000;
    color: #c4b6b9;
    border-radius: 0;
}
    .txtBox:hover, .txtBox:focus {
        background-color: #333333;
        outline: none;
    }

    .txtBox_select {
        background-image: url(images/arrow-down.png);
        background-repeat: no-repeat;
        background-position: right;
        padding-right: 2rem;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }
        @media (-webkit-min-device-pixel-ratio: 1.5),
        (min-resolution: 144dpi) {
            .txtBox_select {
                background-image: url(images/arrow-down@2x.png);
                background-size: 1.25rem 0.4375rem;
            }
        }

    .txtBox_error {
        border: 1px solid rgb(210 42 42);
        border-bottom: none;
    }

    /* for use on textareas */
    .txtBox_multi {
        font-family: montserrat, arial, sans-serif;
        vertical-align: top;
        height: initial;
    }

.btn {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: inline-block;
    max-width: 25rem;
    transition: all 0.2s;
    background-color: #FEF204;
    border: 2px solid #FEF204;
    color: #231F20;
    vertical-align: middle;
    position: relative;
    margin: 0 .25rem .5rem;
    padding: 0.6rem 2.5rem;
    text-align: center;
    font-family: bebas-neue, arial, sans-serif;
    font-size: 1.3rem;
    line-height: 1;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
}
    .btn i {
        margin-right: 0.5em;
    }
    .btn:hover:not(.btn_disabled), .btn:focus:not(.btn_disabled) {
        /*background-color: #000;*/
        /*border-color: #000;*/
        /*color: #fff;*/
        transform: scale(1.05);
        transition: all .2s;
        box-shadow: 0 .25rem .25rem rgba(0,0,0,.25)
    }
    .btn:active:not(.btn_disabled) {
        top: 1px;
    }

.btn_quote {
    color: #FFFFFF;
    background-color: #676767;
    font-size: 22px;
}
    .btn_quote i {
        font-size: 19px;
    }
.btn_outline {
    background-color: transparent;
    border-color: #000;
    color: #000;
}
    .btn_outline:hover:not(.btn_disabled), .btn_outline:focus:not(.btn_disabled) {
        background-color: #000;
        color: #FEF204;
    }
    .dark .btn_outline {
        border-color: #fff;
        color: #fff;
    }
    .dark .btn_outline:hover,
    .dark .btn_outline:focus {
        background-color: #fff;
        color: #000;
    }
.btn_black {
    background-color: #231F20;
    border-color: #231F20;
    color: #FFF;
}
    .btn_black:hover:not(.btn_disabled), .btn_black:focus:not(.btn_disabled) {
        background-color: #FEF204;
        border: 2px solid #FEF204;
        color: #231F20;
    }
.btn_bluegray {
    background-color: #444755;
    border-color: #444755;
    color: #FFF;
}
.btn_full {
    padding-left: 1rem;
    padding-right: 1rem;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    max-width: none;
}
.btn_borderless {
    background: transparent;
    border: none;
    padding-left: 0;
    padding-right: 0;
    box-shadow: none !important;
    color: #aaa;
}
    .btn_borderless:hover:not(.btn_disabled), .btn_borderless:focus:not(.btn_disabled) {
        color: #333;
    }
.btn_disabled {
    border-color: #aaa !important;
    color: #aaa !important;
    cursor: default !important;
}

.menu {
    position: fixed;
    top: 0;
    right: 0;
    background-color: #fef200;
    z-index: 901;
    overflow: hidden;
    box-shadow: -.3125em .3125em .1875em 0 rgba(0,0,0,0.1);
    transition: all .3s;
    transition-delay: .5s;
    width: 8.9375em;
    min-height: 11.5625em;
    border-right: .45rem solid #fff100;
}
    .menu-contentWrapper {
        transition: all .5s;
        height: 11.5625em;
        position: relative;
        overflow: hidden;
        padding: 2.5em;
    }
    .menu-content {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: all .5s;
    }
    .menu_open {
        transition: all .3s;
        width: 35em;
    }
        .menu_open .menu-contentWrapper {
            height: 100vh;
            transition: all .5s;
            transition-delay: .3s;
        }
        .menu_open .menu-content {
            height: auto;
            max-height: 150em;
            opacity: 1;
            transition: all 1s;
            transition-delay: .8s;
        }
        .menu_open .menuBtn-plus {
            display: none;
        }
        .menu_open .menuBtn-minus {
            display: inline;
        }
    .menu_opened {}
        .menu_opened .menu-contentWrapper {
            overflow-x: hidden;
            overflow-y: auto; /* Wait to show scroll bar until after the animation is complete */
        }


.menuBtn {
    width: 8.9375em;
    height: 11.5625em;
    position: absolute;
    top: 0; right: 0;
    z-index: 1;
}
    .menuBtn-text {
        position: absolute;
        bottom: 1.25em;
        right: 0;
        width: 8.9375em;
        text-align: center;
        font-family: montserrat, arial, sans-serif;
        color: #000000;
        font-weight: bold;
        letter-spacing: .125em;
        text-transform: uppercase;
        vertical-align: middle;
    }
    .menuBtn-plus, .menuBtn-minus {
        font-size: .65em;
        vertical-align: middle;
        font-weight: bold;
        position: relative;
        bottom: .1em;
    }
    .menuBtn-minus {
        display: none;
    }

.menuIcon {
    position: absolute;
    top: 2.5em;
    right: 6.8em;
    transition: all .25s;
}
    .menu:not(.menu_open) .menuBtn:hover .menuIcon, .menu:not(.menu_open) .menuBtn:hover .menuIcon:focus {
        right: 7.2em;
        transition: all .25s;
    }
    .play .menuIcon {
        animation-name: backup;
        animation-fill-mode: both;
        animation-duration: .5s;
    }
    .rewind .menuIcon {
        animation-name: backup;
        animation-fill-mode: both;
        animation-duration: .5s;
        animation-delay: .25s;
        animation-direction: reverse;
    }
    .menuIcon img {
        max-width: none;
    }
    .menuIcon-truckCargo {
        position: absolute;
        width: 5.4225em;
        height: 4em;
        transform-origin: 10% 100%;
        top: 0;
        left: 0;
    }
            .play .menuIcon-truckCargo {
                animation-name: dump;
                animation-delay: .3s;
                animation-duration: .5s;
                animation-fill-mode: both;
            }
            .rewind .menuIcon-truckCargo {
                animation-direction: reverse;
                animation-name: dump;
                animation-delay: 0s;
                animation-duration: .5s;
                animation-fill-mode: both;
            }
        .menuIcon-hamburger {
            position: absolute;
            width: 3.1781em;
            left: 1em;
            top: 0;
        }
            .menuIcon-bun {
                transform-origin: 10% 100%;
                width: 3.178125em;

                animation-name: stackUp;
                animation-duration: .25s;
                animation-timing-function: linear;
                animation-fill-mode: both;
            }
                .play .menuIcon-bun {
                    animation-name: fallOff;
                    animation-duration: .5s;
                    animation-timing-function: linear;
                    animation-fill-mode: both;
                }
                .rewind .menuIcon-bun {
                    animation-name: stackUp;
                    animation-duration: .25s;
                    animation-timing-function: linear;
                    animation-fill-mode: both;
                }
            .menuIcon-bun1 {
                position: absolute;
                top: 0;
                left: 0;
                animation-delay: .9s;
            }
                .play .menuIcon-bun1 {
                    animation-delay: .525s;
                }
                .rewind .menuIcon-bun1 {
                    animation-delay: .9s;
                }
            .menuIcon-bun2 {
                position: absolute;
                top: 1em;
                left: 0;
                animation-delay: .8s;
            }
                .play .menuIcon-bun2 {
                    animation-delay: .625s;
                }
                .rewind .menuIcon-bun2 {
                    animation-delay: .8s;
                }
            .menuIcon-bun3 {
                position: absolute;
                top: 2em;
                left: 0;
                animation-delay: .7s;
            }
                .play .menuIcon-bun3 {
                    animation-delay: .725s;
                }
                .rewind .menuIcon-bun3 {
                    animation-delay: .7s;
                }
        .menuIcon-truckBed {
            position: absolute;
            top: 1.85em;
            left: 0;
            width: 5.4225em;
        }
    .menuIcon-truckBody {
        position: absolute;
        width: 9.8656em;
        top: 2.38em;
        left: 0.55em;
    }
    .menuIcon-wheel {
        transform-origin: 50% 50%;
        position: absolute;
        width: 1.48875em;
        height: 1.48875em;
    }
        .play .menuIcon-wheel {
            animation-name: rotate;
            animation-duration: .5s;
            animation-fill-mode: both;
        }
        .rewind .menuIcon-wheel {
            animation-direction: reverse;
            animation-name: rotate;
            animation-duration: .5s;
            animation-delay: .25s;
            animation-fill-mode: both;
        }
    .menuIcon-frontWheel {
        top: 4.3em;
        left: 8.167em;
    }
    .menuIcon-backWheel {
        top: 4.3em;
        left: 1.45em;
    }

    /* Truck backing up - The 10% and 90% frames give the animation a bit of a "bounce" that makes it look more fluid and realistic */
    @keyframes backup {
        0% { transform: translateX(0rem); }
        10% { transform: translateX(.1rem); }
        90% { transform: translateX(-5.6rem); }
        100% { transform: translateX(-5.5rem); }
    }
    /* Truck bed dumping */
    @keyframes dump {
        0% { transform: rotate(0deg); }
        80% { transform: rotate(-73deg); }
        100% { transform: rotate(-70deg); }
    }
    /* Wheels turning */
    @keyframes rotate {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(-90deg); }
    }
    /* Hamburger menu bars falling off dump bed */
    @keyframes fallOff {
        0% {
            transform: translateX(0rem) translateY(0rem) rotate(0deg);
            opacity: 1;
        }
        100% {
            transform: translateX(-6rem) translateY(.5rem) rotate(-110deg);
            opacity: 0;
        }
    }
    /* Hamburger menu bars falling from the sky and stacking up with a bit of a bounce */
    @keyframes stackUp {
        0% {
            transform: translateX(0) translateY(-4rem) rotate(0deg);
            opacity: 0;
        }
        75% {
            transform: translateX(0) translateY(.5rem) rotate(0deg);
        }
        100% {
            transform: translateX(0) translateY(0) rotate(0deg);
            opacity: 1;
        }
    }

.getQuote {
    position: relative;
    margin-bottom: 5rem; /* Leave extra room for address bar on ios */
}

.headerIconNav {
    display: flex;
    font-size: 1rem;
}
    .headerIconNav > ul {
        display: flex;
        font-size: 1rem;
    }
    .headerIconNav-item {
        display: flex;
        align-items: center;
        margin: 0 .25em;
    }
    .headerIconNav-link {
        padding: .5em;
        transition: all .2s;
        text-shadow: 0 2px 3px rgba(0,0,0, 0.5);
        position: relative;
    }
        .headerIconNav-link:hover,
        .headerIconNav-link:focus {
            transform: scale(1.15);
            transition: all .2s;
        }
        .headerIconNav-link:active {
            top: 1px;
        }
    @media (max-width: 450px) {
        /* See .header-middle @450px */
        .headerIconNav {
            width: 100%;
            display: flex;
            justify-content: space-around; /* fallback */
            justify-content: space-evenly;
        }
        .headerIconNav-item {
            margin: 0;
        }
    }
    @media (max-width: 400px) {
        .headerIconNav {}
    }

.mobileSearch {
    display: none;
    position: fixed;
    z-index: 901;
    top: 0; right: 0; bottom: 0; left: 0;
    padding: 1em;
    background-color: rgba(0,0,0,.8);
    overflow: auto;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling */
    -ms-overflow-style: -ms-autohiding-scrollbar;
}
    .mobileSearch .searchForm {
        font-size: 1.25rem;
    }
    .mobileSearch .searchForm-input {
        line-height: 2.5;
    }
    .mobileSearch .searchResults {
        font-size: 1em;
    }
    .mobileSearch-close {
        font-size: 2.25em;
        color: #fff;
        display: flex;
        justify-content: flex-end;
        margin: 0 .5em .5em;
    }
        .mobileSearch-close button {
            font-size: 2em;
        }
        .mobileSearch-close button:hover,
        .mobileSearch-close button:focus {
            color: #FEF204;
        }
    .mobileSearch-btn {
        display: none;
    }
    .mobileSearch-btn i {
        font-size: 2.125em;
        color: #FFFFFF;
    }
    @media (max-width: 700px) {
        .mobileSearch-btn {
            display: block;
        }
    }
    @media (max-width: 500px) {
        .mobileSearch .searchForm {
            font-size: 1.1rem;
        }
    }


.cartBtn {
    font-family: bebas-neue, arial, sans-serif;
}
    .cartBtn-icon {
        display: block;
        font-size: 2.125em;
        color: #FFFFFF;
    }
    .cartBtn-link {
        position: relative;
        display: block;
    }
    .cartBtn-badge {
        position: absolute;
        color: #000000;
        background-color: #FF0000;
        font-size: 1em;
        top: 0; left: 2.25em;
        border-style: hidden;
        border-radius: .75em;
        padding: 0 0.5em;
        box-shadow: 0 2px 3px rgba(0,0,0, 0.5);
        text-shadow: none;
    }
    @media (max-width: 400px) {

    }

.dataTable {
    width: 100%;
    margin-bottom: 1rem;
}
    .dataTable td {
        border: 1px solid #ccc;
        padding: .5em;
    }
    .dataTable th {
        background-color: #555;
        padding: .5em;
        color: #fff;
        font-size: .8em;
        font-weight: bold;
        border: 1px solid #555;
    }

.header {
    position: relative;
    color: #fff;
    background-color: #444755;
}
    .header-main {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        position: absolute;
        height: 100%;
        top: 0; left: 0; right: 0; bottom: 0;
        z-index: 11; /* 6 */
    }
    .header-main .container {
        height: 100%;
    }
    .header-logo {
        position: absolute;
        z-index: 5;
        width: 17.25em;
        left: -0.5em;
    }
    .header-social {
        position: absolute;
        right: 0;
        padding-top: 14rem;
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    .header-intro {
        position: absolute;
        height: fit-content;
        color: #fff;
        font-family: montserrat, arial, sans-serif;
        font-weight: bold;
        line-height: 1.25;
        left: 0; right: 0; bottom: 5.3125rem;
        padding-right: 9rem;
        z-index: 5;
        text-shadow: 0px 2px 3px #000000;
        font-size: 2.3125rem;
    }
    .header-middle {
        display: flex;
        justify-content: center;
        align-content: center;
        position: absolute;
        margin-top: 4em;
        margin-left: 18.5em; /* Leaves room for logo */
        margin-right: 7.5em; /* Leaves room for menu button */
        top: 0; left: 0; right: 0;
        z-index: 900;
    }
    .header-middle > .ui_Search {
        width: 100%;
        max-width: 42.5em;
        margin-left: .5em;
        margin-right: .5em;
    }
    .header-slideshow {
        position: relative;
        /*overflow: hidden;*/
        z-index: 0;
        width: 100%;
    }
        .header-slideshow_home {
            aspect-ratio: 79 / 39;
            min-height: 500px;
        }
        .header-slideshow_away {
            min-height: 290px;
            bottom: 0;
            right: 0;
            height: 100%;
        }

    .header-bg {
        position: absolute;
        top: -7em;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0,0,0,.2); /* Tint over slideshow */
        background-image: url("images/diamond-plate-fade@2x.png");
        background-size: 4.6875rem;
        background-repeat: repeat-x;
    }
        .template_Home .header-bg {
            background-color: transparent;
        }
    .header-tiretracks {
        position: absolute;
        top: 47.779%;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: url("images/tire-tracks.png");
        background-repeat: no-repeat;
        background-size: contain;
        background-position: right;
    }
    .header .cycle-slideshow {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
    .header .cycle-slide {
        right: 0;
        height: 100%;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }
    @media (max-width: 1042px) {
        .header-slideshow {
            aspect-ratio: unset;
        }
    }
    @media (max-width: 850px) {
        /* Be sure to also adjust the font size of the .menu class along with any font size adjustments to .header-top. Menu is adjusted here instead of in .menu block for convenience sake */
        .header-top, .menu {
            font-size: .8em;
        }
    }
    @media (max-width: 800px) {
        .header-social {
            flex-direction: row;
            align-items: flex-end;
            justify-content: center;
            width: 100%;
            bottom: 0;
            right: unset;
            padding: 0 0 2rem 0;
        }
        .header-intro {
            display: flex;
            justify-content: flex-end;
            flex-direction: column;
            padding-right: 2rem;
            bottom: 20%;
            font-size: 2.2rem;
        }
        .header-tiretracks {
            top: calc((800px - 100vw) / (480 / 61)  + 239px );
            right: calc((800px - 100vw) / (425 / -72));
        }
    }
    @media (max-width: 700px) {
        .header .mobileSearch {
            display: flex;
        }
        .header .ui_Search {
            display: none;
        }
        .header-middle {
            justify-content: left;
        }
    }
    @media (max-width: 450px) {
        /* See headerIconNav @450px */
        .header-middle {
            margin-left: 17em;
            margin-right: 8.25em;
        }
        .header-social {
            font-size: .9em;
        }
    }
    @media (max-width: 400px) {
        .header-top, .menu {
            font-size: .7em;
        }
    }
    @media (max-width: 350px) {
        .header-top, .menu {
            font-size: .68em;
        }
    }

    /* for home page */
    .header_home {
        min-height: 31.25rem;
    }
    /* for inner pages */
    .header_inner {
        height: 71vh; /* set overlay info height on header. Image size is set by PW in slideshow, height by Layout variable $slideHeight */
    }
        .header_inner .header-bg {
            top: -5em;
        }
        @media (max-width:800px) {
            .header_inner {
                height: calc(400px + 5.75rem);
            }
        }
        @media (max-width:600px) {
            .header_inner {
                height: calc(300px + 5.75rem);
            }
        }

.videoBanner {
    object-fit: cover;
}

.logo {
    padding-top: 2.15em;
}
    .logo-topBar {
        position: absolute;
        top: 0; right: .75em; left: .75em;
        height: 1em;
        background-color: #FEF200;
    }
    .logo-img {
        width: 100%;
    }

.main {
    background: #E6E6E6; /* Fallback */
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0%) 0px, rgba(255, 255, 255, 100%) 500px), url(../Layout/images/grey-noise.png);
    background-position: top center;
}

.designer {
    display: flex;
    margin-bottom: 0;
}
    .designer a {
        display: flex;
        align-items: center;
        text-decoration: none;
        color: #C4B6B9;
        opacity: .9;
    }
    .designer a:hover, .designer a:focus {
        text-decoration: none;
        opacity: 1;
    }
    .designer-label {
        display: flex;
        align-items: center;
        border-right: 1px solid #C4B6B9;
        padding-right: 2.25em;
        height: 100%;
        font-size: .5em;
        font-weight: bold;
        text-transform: uppercase;

    }
    .designer-label > div {

    }
    .designer-logo {
        padding-left: .75em;
    }

.footer {
    position: relative;
    color: #fff;
    padding: 3em 0 2em;
    background-color: #000000;
}
    .footer-top {
        display: flex;
        justify-content: space-between;
    }
    .footer-middle {
        display: flex;
        align-items: center;
        margin-top: 2em;
    }
        .footer-middle > div {
            width: 33.3333%
        }
        .footer-middleCol1 {
            display: flex;
            justify-content: flex-start;
        }
        .footer-middleCol2 {
            display: flex;
            justify-content: center;
        }
        .footer-middleCol3 {
            display: flex;
            justify-content: flex-end;
        }
    .footer-siteMap {
        flex-grow: 1;
    }
    .footer-meta {
        width: 20em;
    }
    .footer-mobile {
        display: none;
        padding: 3.75em 0 3em;
        background-color: #000000;
    }
    .footer-bottom {
        background-color: #FFF;
        background-image: url(images/grey-noise.png);
        background-size: 60px 60px;
        background-repeat: repeat;
    }
    .footer-bottomGrid {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 6.5rem;
        margin-right: 50px; /* leave room for talk.to widget */
    }
    .footer-policy {
        display: flex;
        font-size: 1.21em;
        text-transform: uppercase;
        font-family: bebas-neue, arial, sans-serif;
        color: #C4B6B9;
        margin-bottom: .25em;

        display: none;
    }
        .footer-policy a:hover,
        .footer-policy a:focus {
            color: #dad0d3;
        }
    .footer-copyright {
        font-size: 0.7em;
        font-family: montserrat, arial, sans-serif;
        font-weight: 600;
        color: #90888A;
    }
    .footer-social {
        height: 4.5em;
        align-items: center;
    }
        .footer-social a {
            box-shadow: 0 2px 1px rgba(0,0,0,.1);
        }
    .footer-logo {
        text-align: right;
        margin-bottom: 2em;
    }
        .footer-logo img {
            width: 9.9375em;
        }
    .footer .hours {
        float: right;
    }
    @media (max-width: 700px) {
        .footer {
            display: none;
        }
        .footer-siteMap {
            display: none;
        }
        .footer-social {
            display: none !important;
        }
        .footer-mobile {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .footer-bottomGrid {
            margin-right: 0;
        }
    }

.footerContact {
    color: #C4B6B9;
    text-align: right;
    font-family: montserrat, arial, sans-serif;
}
    .footerContact-item {
        display: flex;
        align-items: center;
        justify-content: right;
        margin-bottom: .6em;
    }
    .footerContact-data {
    }
        a.footerContact-data:hover,
        a.footerContact-data:focus {
            color: #dad0d3;
        }
    .footerContact-icon {
        margin-left: .5em;
    }
    .footerContact-address {}
        .footerContact-address .footerContact-data {
            font-weight: bold;
        }
        .footerContact-address .footerContact-icon {
            font-size: 1.654em;
        }
    .footerContact-email {}
        .footerContact-email .footerContact-data {
            font-weight: bold;
        }
        .footerContact-email .footerContact-icon {
            font-size: 1.577em;
        }
    .footerContact-mobile {}
        .footerContact-mobile .footerContact-data {
            font-family: bebas-neue, arial, sans-serif;
            font-size: 2.125em;
        }
        .footerContact-mobile .footerContact-icon {
            font-size: 1.631em;
        }

    .footerContact_left {
        text-align: left;
    }
        .footerContact_left .footerContact-item {
            justify-content: left;
        }
        .footerContact_left .footerContact-icon {
            order: -1;
            margin-left: 0;
            margin-right: .5em;
        }


.footerMobile {}
    .footerMobile .footerContact {
        margin-bottom: 1.5em;
    }
    .footerMobile .footer-policy {
        justify-content: center;
    }
    .footerMobile .footer-quoteBtn {
        margin-bottom: 2em;
    }
    .footerMobile-logo {
        width: 9.5em;
        margin-bottom: 1.5em;
    }
    .footerMobile-terms {
        margin-bottom: 4em;
    }
    .footerMobile-designer {
        font-size: .9em;
        margin-bottom: 4em;
    }
    @media (max-width: 450px) {

    }

.slideshow {
}
    .slideshow-slide {
    }
    .slideshow-slide > * {
        display: block;
        width: 100%;
    }
    .slideshow-link {
        display: block;
    }
    .slideshow-prev, .slideshow-next {
        position: absolute;
        font-size: 50px;
        top: 50%;
        z-index: 300;
        color: #e5e5e5;
        opacity: .7;

        -ms-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    .slideshow-prev:hover, .slideshow-next:hover {
        cursor: pointer;
        opacity: 1;
    }
    .slideshow-prev {
        left: 4%;
    }
    .slideshow-next {
        right: 4%;
    }
    .slideshow-pager {
        position: absolute;
        font-size: 50px;
        left:0; bottom:0; right:0;
        z-index: 100;
        text-align: center;
    }
    .slideshow-pager span {
        cursor: pointer;
        color: #bbb;
    }
    .slideshow-pager > .cycle-pager-active {
        color: #fff;
    }
    @media (max-width: 600px) {
        .slideshow-prev, .slideshow-next {
            font-size: 40px;
        }
    }

.sponsors {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
    .sponsors-img {
        margin-right: 2em;
        max-height: 3.56em;
        max-width: 8em
    }
    @media (max-width: 700px) {
        .sponsors {
            justify-content: space-around; /* fallback */
            justify-content: space-evenly;
            width: 100%;
        }
        .sponsors-img {
            margin-right: 0;
        }
    }


.social {
    display: flex;
}
    .social-icon {
        display: flex;
        flex-direction: row;
        width: 3.375em;
        height: 3.375em;
        margin: 0.4063em 0 0.4063em 0.8125em ;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 2px rgba(0,0,0, 0.5);
        color: #fff;
        transition: all .2s;
        position: relative;
    }
    .social-icon:hover,
    .social-icon:focus {
        transform: scale(1.25);
        transition: all .2s;
    }
    .social-icon:active {
        top: 1px;
    }

    .social_horizontal {
        font-size: .75em;
        justify-content: flex-end;
    }
    @media (max-width: 800px) {
        .social-icon {
            margin: 0 .4063em;
        }
    }


.tags {
    font-size: .75rem;
}
    .tags-item {
        display: inline-block;
        background: #555;
    }
    .tags-link {
        display: block;
        color: #fff;
        padding: 4px 10px;
    }
        .tags-link:hover, .tags-link:focus {
            background: #444;
        }

.siteMap {
    margin-bottom: 0;
    line-height: 1.075;
}
    .siteMap-lvl1 {
        text-transform: uppercase;
        color: #FEF204;
        font-family: bebas-neue, arial, sans-serif;
        margin-bottom: 1.25rem;
        columns: 12.25rem;
    }
    .siteMap-lvl1 li {
        -webkit-column-break-inside: avoid;
        column-break-inside: avoid;
        page-break-inside: avoid;
        break-inside: avoid;
    }
    .siteMap-lvl2 {
        color: #FFFFFF;
        font-family: montserrat, arial, sans-serif;
        font-weight: 100;
        line-height: 1.075;
        text-transform: none;
        margin-top: .75rem;
    }
    .siteMap .level1 {
        margin-bottom: 1em;
        margin-right: .5rem;
        font-size: 1.21rem;
    }
    .siteMap .level2 {
        font-size: 0.935rem;
        margin-bottom: .5em;
    }
    .siteMap a {
        position: relative;
        transition: all .2s;
        left: 0;
        display: inline-block;
    }
    .siteMap a:hover, .siteMap a:focus {
        /*left: 2px;*/ /* Causes bug on Safari */
        /*transition: all .2s;*/
    }
    @media (max-width: 800px) {
        .siteMap-lvl1 {
            -webkit-column-count: 2;
            -moz-column-count: 2;
            column-count: 2;

            margin-bottom: 1rem;
        }
        .siteMap-lvl2 {
            display: none;
        }
    }

.steelBg {
    position: absolute;
    top:0; right:0; bottom:0; left:0;
    background-image: url("images/diamondplate-tileable.png");
    background-size: 9rem;
    background-position: center;
    opacity: .22;
    transition: all .2s;
}

hr {
    margin: 1rem 0;
    height: .3rem;
    border: 1px solid #000000;
    border-left: none;
    border-right: none;
}

.leftBlocking {
    border-left-style: solid;
    border-left-color: #FEF204;
    border-left-width: 3rem; /* Should match .container margin */
    padding-left: 2rem;
}
    @media (max-width: 600px) {
        .leftBlocking {
            border-left-width: 1.5rem; /* Should match .container margin */
            padding-left: 1rem;
        }
    }

.emptySet {
    color: #ccc;
    font-size: 3em;
    font-weight: bold;
}
    .emptySet-container {
        min-height: 40em;
        display: flex;
        justify-content: center;
        align-items: center;
    }

.hours {
    font-size: 1.1em;
    max-width: 17em;
    color: #fff;
    margin-bottom: 1rem;
}
    .hours dt {
        font-weight: 700;
        text-transform: uppercase;
        text-align: left;
        width: 40%;
        display: inline-block;
    }
    .hours dd {
        font-weight: 100;
        text-align: right;
        width: 60%;
        display: inline-block;
    }
    .hours_boxed {
        background-color: #313131;
        padding: .85em;
        font-size: 1em;
        margin-top: 1em;
    }

.tabs {
    /*border-bottom: solid 3px #000;*/
    margin-bottom: 2rem;
    display: flex;
    font-family: bebas-neue, arial, sans-serif;
    font-size: 1.4rem;
}
.tab {
    padding: .75rem 1rem;
    display: block;
    font-weight: bold;
    margin-right: .5rem;
    white-space: nowrap;
}
    .tab:hover, .tab:focus {
        background-color: #fff100;
    }
    .tab.tab_active {
        background: #000;
        color: #fff;
    }

.docFrame {
    border: none;
    width: 100%;
    height: 50rem;
}

.popup {
    display: none;
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 998;
}
    .popup-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
    }
    .popup-box {
        position: relative;
        background-color: #fff;
        padding: 3rem;
        border-style: solid;
        border-width: .45rem;
        border-color: #e4e4e4;
        width: 50rem;
        max-width: 100%;
        max-height: 100%;
        overflow-y: auto;
        background-image: url("images/textures-dirt-splatter-png-27.png");
        background-repeat: repeat;
        box-shadow: 0 0 2rem rgba(0,0,0,.75);
        /*min-height: 100rem;*/
    }
    .popup-close {
        position: absolute;
        top: 0; right: 0;
        padding: .5rem 1rem;
        font-size: 2.5rem;
        line-height: 1;
        color: #666;
    }
    .popup-close:hover, .popup-close:focus {
        color: #000;
    }

    @media (max-width: 950px) {
        .FormBuilder-getquote .InputfieldForm .Inputfields,
        .FormBuilder-contact .InputfieldForm .Inputfields {
            margin: inherit;
        }
    }