/**
*
* FDN Layout
* ==========
*
* Defines styles for visual structure and presentation of HTML.  All layout
* rules should include an "l-" prefix.  Only use classes or attribute
* selectors (no element selectors or IDs).
*
* See here for more info on layout rules:  https://smacss.com/book/type-layout
*
**/


/* #region Layout Styles */

.l-sitewidth {
    /* *
     * changing this from max-width to width, should only need max-width on responsive sites,
     * if client has a responsive site, this property is changed to 100% and max-width is set
     * to 1080px
     */
    margin-left: auto;
    margin-right: auto;
    max-width: 1080px;
    max-width: 67.5rem;
    width: 100%;
}

.l-grid, .l-grid-3across, .l-grid-4across {
    margin: 0 auto;
    list-style-type: none;
}

    .l-grid > div, .l-grid > li, .l-grid > a, .l-grid > img, .l-grid > span {
        display: inline-block;
        margin: 0 .5em 1em;
    }

.l-grid--top > div, .l-grid--top > li, .l-grid--top > a, .l-grid--top > img, .l-grid--top > span {
    vertical-align: top;
}

.l-grid-3across > div, .l-grid-3across > li, .l-grid-3across > a, .l-grid-3across > img, .l-grid-3across > span {
    display: inline-block;
    width: 31%;
    margin: 0 -4px 2% 1.75%;
    vertical-align: top;
}

.l-grid-4across > div, .l-grid-4across > li, .l-grid-4across > a, .l-grid-4across > img, .l-grid-4across > span {
    display: inline-block;
    width: 24%;
    margin: 0 -4px 1% 1%;
    vertical-align: top;
}

.l-thirds, .l-thirds-flush, .l-qrtrs, .l-qrtrs-flush {
    width: 100%;
    margin: 0 auto;
    list-style-type: none;
}

    .l-thirds > div, .l-thirds > img, .l-thirds > li, .l-thirds > a, .l-thirds > span,
    .l-thirds-flush > div, .l-thirds-flush > img, .l-thirds-flush > li, .l-thirds-flush > a, .l-thirds-flush > span,
    .l-qrtrs > div, .l-qrtrs > img, .l-qrtrs > li, .l-qrtrs > a, .l-qrtrs > span,
    .l-qrtrs-flush > div, .l-qrtrs-flush > img, .l-qrtrs-flush > li, .l-qrtrs-flush > a, .l-qrtrs-flush > span {
        display: inline-block;
        vertical-align: top;
        margin-right: -4px;
    }

    .l-thirds > div, .l-thirds > img, .l-thirds > li, .l-thirds > a, .l-thirds > span {
        width: 33.33%;
    }

    .l-thirds-flush > div, .l-thirds-flush > img, .l-thirds-flush > li, .l-thirds-flush > a, .l-thirds-flush > span {
        width: 32%;
        margin-left: 2%;
    }

    .l-qrtrs > div, .l-qrtrs > img, .l-qrtrs > li, .l-qrtrs > a, .l-qrtrs > span {
        width: 25%;
    }

    .l-qrtrs-flush > div, .l-qrtrs-flush > img, .l-qrtrs-flush > li, .l-qrtrs-flush > a, .l-qrtrs-flush > span {
        width: 24%;
        margin-left: 1.333%;
    }

        .l-thirds-flush > div:first-child, .l-thirds-flush > img:first-child, .l-thirds-flush > li:first-child, .l-thirds-flush > a:first-child, .l-thirds-flush > span:first-child,
        .l-qrtrs-flush > div:first-child, .l-qrtrs-flush > img:first-child, .l-qrtrs-flush > li:first-child, .l-qrtrs-flush > a:first-child, .l-qrtrs-flush > span:first-child {
            margin-left: 0;
        }

.l-table {
    display: table;
}

    .l-table > div, .l-table > li, .l-table > a, .l-table > img, .l-table > span {
        display: table-cell;
        vertical-align: middle;
    }

    .l-table > div, .l-table > li, .l-table > a, .l-table > img, .l-table > span {
        padding: 0 .5em;
    }

.l-spaced {
    margin-right: .5em;
}

.l-txtcolumns-2 p {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
    -moz-column-gap: 3em;
    -webkit-column-gap: 3em;
    column-gap: 3em;
}

.l-txtcolumns-3 p {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
    -moz-column-gap: 2em;
    -webkit-column-gap: 2em;
    column-gap: 2em;
}

.l-txtcolumns-4 p {
    -moz-column-count: 4;
    -webkit-column-count: 4;
    column-count: 4;
    -moz-column-gap: 1.5em;
    -webkit-column-gap: 1.5em;
    column-gap: 1.5em;
}

/* #region Layout Media Queries */
@media only screen and (max-width: 480px) {
    .l-thirds > div, .l-thirds > img, .l-thirds > li, .l-thirds > a, .l-thirds > span,
    .l-thirds-flush > div, .l-thirds-flush > img, .l-thirds-flush > li, .l-thirds-flush > a, .l-thirds-flush > span,
    .l-qrtrs > div, .l-qrtrs > img, .l-qrtrs > li, .l-qrtrs > a, .l-qrtrs > span,
    .l-qrtrs-flush > div, .l-qrtrs-flush > img, .l-qrtrs-flush > li, .l-qrtrs-flush > a, .l-qrtrs-flush > span,
    .l-grid-3across > div, .l-grid-3across > li, .l-grid-3across > a, .l-grid-3across > img, .l-grid-3across > span,
    .l-grid-4across > div, .l-grid-4across > li, .l-grid-4across > a, .l-grid-4across > img, .l-grid-4across > span {
        width: 100%;
        margin: 0 auto 1.5em;
    }
}
/* #endregion Layout Media Queries*/