/* ####################################
   Content in Columns

   - Critical Rendering Path: Required
   - IMPORTANT: Don't make changes to the structural rules in this file. Only create or tweak custom layouts or margin/padding sizes.
   - If making changes, remember that padding, margins, backgrounds, and more can be controlled by authors using classes such as padding-all-thick - so make sure there's an excellent reason to add code here before doing anything.
   ################################## */

/*
    Default setup for columns blocks
*/

div[class*=cols-] {
    --cols-gutters: var(--site-gutters);
    position: relative;
    clear: both;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between; /* Fill the space by default. Authors can use .space-evenly or .space-around if they want to. */
    gap: var(--cols-gutters);
    box-sizing: border-box;
    width: 100%;
    border-radius: var(--site-box-border-radius); /* To do: Is this a good or bad idea? */
}

    div[class*=cols-].gutters-none { --cols-gutters: var(--site-gutters-none); }
    div[class*=cols-].gutters-border { --cols-gutters: var(--site-border-width); }
    div[class*=cols-].gutters-border-thick { --cols-gutters: var(--site-border-width-thick); }
    div[class*=cols-].gutters-border-thicker { --cols-gutters: var(--site-border-width-thicker); }
    div[class*=cols-].gutters-border-thickest { --cols-gutters: var(--site-border-width-thickest); }
    div[class*=cols-].gutters-thinnest { --cols-gutters: var(--site-gutters-thinnest); }
    div[class*=cols-].gutters-thinner { --cols-gutters: var(--site-gutters-thinner); }
    div[class*=cols-].gutters-thin { --cols-gutters: var(--site-gutters-thin); }
    div[class*=cols-].gutters-thick { --cols-gutters: var(--site-gutters-thick); }
    div[class*=cols-].gutters-thicker { --cols-gutters: var(--site-gutters-thicker); }
    div[class*=cols-].gutters-thickest { --cols-gutters: var(--site-gutters-thickest); }

    div[class*=cols-] > .col {
        position: relative;
        margin-bottom: 0;
        box-sizing: border-box;
        width: calc(var(--col-width) - calc(var(--cols-gutters) * var(--cols-gap-ratio)));
    }

        div[class*=cols-] > .col > :not([class*=margin-top-]):not([style*=margin-top]):not(.box-title-bar):first-child {
            margin-top: 0 !important;
        }

        div[class*=cols-] > .col > :not([class*=margin-bottom-]):not([style*=margin-bottom]):last-child {
            margin-bottom: 0 !important;
        }

        div[class*=cols-] > .col.grow {
            --col-width: auto;
            flex-grow: 1;
            width: auto;
        }

        div[class*=cols-] > .col.shrink {
            --col-width: auto;
            flex-shrink: 1;
            width: auto;
        }

    div[class*=cols-].cols-auto-width {
        flex-flow: row;
    }

        div[class*=cols-].cols-auto-width > .col,
        div[class*=cols-].cols-auto-width > .col.grow,
        div[class*=cols-].cols-auto-width > .col.shrink {
            --col-width: auto;
            width: auto;
            flex-grow: initial;
            flex-shrink: initial;
        }

/* 2 Columns */

div.cols-2 { --cols-gap-ratio: calc(1/2); }

    div.cols-2 > .col { --col-width: 50%; }

    div.cols-2.layout-1 { }
    div.cols-2.layout-1 > .col:nth-child(2n-1) { --col-width: 20%; }
    div.cols-2.layout-1 > .col:nth-child(2n-0) { --col-width: 80%; }

    div.cols-2.layout-2 { }
    div.cols-2.layout-2 > .col:nth-child(2n-1) { --col-width: 30%; }
    div.cols-2.layout-2 > .col:nth-child(2n-0) { --col-width: 70%; }

    div.cols-2.layout-3 { }
    div.cols-2.layout-3 > .col:nth-child(2n-1) { --col-width: 40%; }
    div.cols-2.layout-3 > .col:nth-child(2n-0) { --col-width: 60%; }

    div.cols-2.layout-4 { }
    div.cols-2.layout-4 > .col:nth-child(2n-1) { --col-width: 60%; }
    div.cols-2.layout-4 > .col:nth-child(2n-0) { --col-width: 40%; }

    div.cols-2.layout-5 { }
    div.cols-2.layout-5 > .col:nth-child(2n-1) { --col-width: 65%; }
    div.cols-2.layout-5 > .col:nth-child(2n-0) { --col-width: 33%; }

    div.cols-2.layout-6 { }
    div.cols-2.layout-6 > .col:nth-child(2n-1) { --col-width: 80%; }
    div.cols-2.layout-6 > .col:nth-child(2n-0) { --col-width: 20%; }

/* 3 Columns */

div.cols-3 { --cols-gap-ratio: calc(2/3); }

    div.cols-3 > .col { --col-width: 33.33%; }

    div.cols-3.layout-1 { }
    div.cols-3.layout-1 > .col:nth-child(3n-2) { --col-width: 25%; }
    div.cols-3.layout-1 > .col:nth-child(3n-1) { --col-width: 50%; }
    div.cols-3.layout-1 > .col:nth-child(3n-0) { --col-width: 25%; }
        
    div.cols-3.layout-2 { }
    div.cols-3.layout-2 > .col:nth-child(3n-2) { --col-width: 50%; }
    div.cols-3.layout-2 > .col:nth-child(3n-1) { --col-width: 25%; }
    div.cols-3.layout-2 > .col:nth-child(3n-0) { --col-width: 25%; }

    div.cols-3.layout-3 { }
    div.cols-3.layout-3 > .col:nth-child(3n-2) { --col-width: 25%; }
    div.cols-3.layout-3 > .col:nth-child(3n-1) { --col-width: 25%; }
    div.cols-3.layout-3 > .col:nth-child(3n-0) { --col-width: 50%; }
    
    div.cols-3.layout-4 { }
    div.cols-3.layout-4 > .col:nth-child(3n-2) { --col-width: 20%; }
    div.cols-3.layout-4 > .col:nth-child(3n-1) { --col-width: 40%; }
    div.cols-3.layout-4 > .col:nth-child(3n-0) { --col-width: 40%; }
    
    div.cols-3.layout-5 { }
    div.cols-3.layout-5 > .col:nth-child(3n-2) { --col-width: 40%; }
    div.cols-3.layout-5 > .col:nth-child(3n-1) { --col-width: 40%; }
    div.cols-3.layout-5 > .col:nth-child(3n-0) { --col-width: 20%; }

/* 4 Columns */

div.cols-4 { --cols-gap-ratio: calc(3/4); }

    div.cols-4 > .col { --col-width: 25%; }

    div.cols-4.layout-1 { }
    div.cols-4.layout-1 > .col:nth-child(4n-3) { --col-width: 40%; }
    div.cols-4.layout-1 > .col:nth-child(4n-2) { --col-width: 20%; }
    div.cols-4.layout-1 > .col:nth-child(4n-1) { --col-width: 20%; }
    div.cols-4.layout-1 > .col:nth-child(4n-0) { --col-width: 20%; }
    
    div.cols-4.layout-2 { }
    div.cols-4.layout-2 > .col:nth-child(4n-3) { --col-width: 50%; }
    div.cols-4.layout-2 > .col:nth-child(4n-2) { --col-width: 16.666%; }
    div.cols-4.layout-2 > .col:nth-child(4n-1) { --col-width: 16.666%; }
    div.cols-4.layout-2 > .col:nth-child(4n-0) { --col-width: 16.666%; }

    div.cols-4.layout-3 { }
    div.cols-4.layout-3 > .col:nth-child(4n-3) { --col-width: 20%; }
    div.cols-4.layout-3 > .col:nth-child(4n-2) { --col-width: 20%; }
    div.cols-4.layout-3 > .col:nth-child(4n-1) { --col-width: 20%; }
    div.cols-4.layout-3 > .col:nth-child(4n-0) { --col-width: 40%; }
    
    div.cols-4.layout-4 { }
    div.cols-4.layout-4 > .col:nth-child(4n-3) { --col-width: 16.666%; }
    div.cols-4.layout-4 > .col:nth-child(4n-2) { --col-width: 16.666%; }
    div.cols-4.layout-4 > .col:nth-child(4n-1) { --col-width: 16.666%; }
    div.cols-4.layout-4 > .col:nth-child(4n-0) { --col-width: 50%; }

    div.cols-4.featureBoxes1 > .col {
        box-sizing: border-box;
        padding: 30px !important;
        background: #f2f2ee;
        border-right: #fff 1px solid;
        border-bottom: #fff 1px solid;
    }

        div.cols-4.featureBoxes1 > .col.highlight {
            background: #e9e9e5;
        }

        div.cols-4.featureBoxes > .col:nth-child(4n-0) {
            border-radius: 0;
        }

/* 5 Columns */

div.cols-5 { --cols-gap-ratio: calc(4/5); }

    div.cols-5 > .col { --col-width: 20%; margin-bottom: 1.5em; }
    
    div.cols-5.layout-1 { }
    div.cols-5.layout-1 > .col:nth-child(5n-4) { --col-width: 40%; }
    div.cols-5.layout-1 > .col:nth-child(5n-3) { --col-width: 15%; }
    div.cols-5.layout-1 > .col:nth-child(5n-2) { --col-width: 15%; }
    div.cols-5.layout-1 > .col:nth-child(5n-1) { --col-width: 15%; }
    div.cols-5.layout-1 > .col:nth-child(5n-0) { --col-width: 15%; }

    div.cols-5.layout-2 { }
    div.cols-5.layout-2 > .col:nth-child(5n-4) { --col-width: 50%; }
    div.cols-5.layout-2 > .col:nth-child(5n-3) { --col-width: 12.5%; }
    div.cols-5.layout-2 > .col:nth-child(5n-2) { --col-width: 12.5%; }
    div.cols-5.layout-2 > .col:nth-child(5n-1) { --col-width: 12.5%; }
    div.cols-5.layout-2 > .col:nth-child(5n-0) { --col-width: 12.5%; }
    
    div.cols-5.layout-3 { }
    div.cols-5.layout-3 > .col:nth-child(5n-4) { --col-width: 15%; }
    div.cols-5.layout-3 > .col:nth-child(5n-3) { --col-width: 15%; }
    div.cols-5.layout-3 > .col:nth-child(5n-2) { --col-width: 15%; }
    div.cols-5.layout-3 > .col:nth-child(5n-1) { --col-width: 15%; }
    div.cols-5.layout-3 > .col:nth-child(5n-0) { --col-width: 40%; }
    
    div.cols-5.layout-4 { }
    div.cols-5.layout-4 > .col:nth-child(5n-4) { --col-width: 12.5%; }
    div.cols-5.layout-4 > .col:nth-child(5n-3) { --col-width: 12.5%; }
    div.cols-5.layout-4 > .col:nth-child(5n-2) { --col-width: 12.5%; }
    div.cols-5.layout-4 > .col:nth-child(5n-1) { --col-width: 12.5%; }
    div.cols-5.layout-4 > .col:nth-child(5n-0) { --col-width: 50%; }

/* 6 Columns */

div.cols-6 { --cols-gap-ratio: calc(5/6); }

    div.cols-6 > .col { --col-width: 16.666%; }

/*
    Edges with .gutters-none on columns marked as boxes
    - Remove curved borders, leaving curves on the outside edges only.
*/

div[class*=gutters-none] > .col.box:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

div[class*=gutters-none] > .col.box:not(:first-child):not(:last-child) {
    border-radius: 0;
}

div[class*=gutters-none] > .col.box:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/*
    Reverse the visible order without changing the semantic order
    - Only supports 2 cols. Does it make any sense for anything else?
*/

div.cols-2.reverse > .col:nth-child(2n) {
    order: -1;
}

/*
    Dividers
*/

div[class*=cols-].dividers > .col::after {
    position: absolute;
    top: 0;
    right: calc(var(--cols-gutters) * -0.5);
    background: var(--site-cols-divider-bg);
    width: var(--site-cols-divider-width);
    height: 100%;
}

div[class*=cols-]:not(.reverse).dividers > .col:not(:last-child)::after {
    content: "";
}

div[class*=cols-].reverse.dividers > .col:not(:first-child)::after {
    content: "";
}

@media screen and (max-width: 1400px) {

    div[class*=cols-] > .col.grow-large {
        --col-width: auto;
        flex-grow: 1;
        width: auto;
    }

    div[class*=cols-] > .col.shrink-large {
        --col-width: auto;
        flex-shrink: 1;
        width: auto;
    }

    /* Stack at different widths */

    div[class*=cols-].stack-large > .col {
        width: 100%;
    }

    /* Dividers are horizontal when stacked */

    div[class*=cols-].stack-large.dividers > .col::after {
        top: auto;
        right: auto;
        bottom: calc(var(--cols-gutters) * -0.5);
        left: 0;
        width: 100%;
        height: 1px;
    }

    /* Reverse at different widths (useful for alternative image/text rows) */

    div.cols-2.reverse-large > .col:nth-child(2n) {
        order: -1;
    }

}

@media screen and (min-width: 1201px) {

    div[class*=cols-] > .col.grow-large-only {
        --col-width: auto;
        flex-grow: 1;
        width: auto;
    }

    div[class*=cols-] > .col.shrink-large-only {
        --col-width: auto;
        flex-shrink: 1;
        width: auto;
    }

    /* Stack at different widths*/

    div[class*=cols-].stack-large-only > .col {
        width: 100%;
    }

}

@media screen and (max-width: 1200px) {

    div[class*=cols-] > .col.grow-medium {
        --col-width: auto;
        flex-grow: 1;
        width: auto;
    }

    div[class*=cols-] > .col.shrink-medium {
        --col-width: auto;
        flex-shrink: 1;
        width: auto;
    }

    /* Stack at different widths*/

    div[class*=cols-].stack-medium > .col {
        width: 100%;
    }

    /* Dividers are horizontal when stacked */

    div[class*=cols-].stack-medium.dividers > .col::after {
        top: auto;
        right: auto;
        bottom: calc(var(--cols-gutters) * -0.5);
        left: 0;
        width: 100%;
        height: 1px;
    }

    /* Reverse at different widths (useful for alternative image/text rows) */

    div .cols-2.reverse-medium > .col:nth-child(2n) {
        order: -1;
    }

}

@media screen and (min-width: 901px) and (max-width: 1200px) {

    div[class*=cols-] > .col.grow-medium-only {
        --col-width: auto;
        flex-grow: 1;
        width: auto;
    }

    div[class*=cols-] > .col.shrink-medium-only {
        --col-width: auto;
        flex-shrink: 1;
        width: auto;
    }


    /* Stack at different widths*/

    div[class*=cols-].stack-medium-only > .col {
        width: 100%;
    }

}

@media screen and (max-width: 900px) { 

    /* 
        "Small" screen sizes and below 
        - Note that the higher column numbers begin to shrink and partially stack at this size irrespective of stacking classes except stack-none
    */

    div[class*=cols-] > .col.grow-small {
        --col-width: auto;
        flex-grow: 1;
        width: auto;
    }

    div[class*=cols-] > .col.shrink-small {
        --col-width: auto;
        flex-shrink: 1;
        width: auto;
    }
    
    div[class*=cols-]:not(.stack-none):not(.cols-2) > .col {
        --col-width: 50%;
        --cols-gap-ratio: 0.5;
    }

    div.cols-4.layout-1:not(.stack-none) > .col:nth-child(4n-3),
    div.cols-4.layout-2:not(.stack-none) > .col:nth-child(4n-0),
    div.cols-5.layout-1:not(.stack-none) > .col:nth-child(5n-4),
    div.cols-5.layout-2:not(.stack-none) > .col:nth-child(5n-0) {
        --col-width: 100%;
        --cols-gap-ratio: 0;
    }

    div.cols-4.layout-1:not(.stack-none) > .col,
    div.cols-4.layout-2:not(.stack-none) > .col {
        --col-width: 33.33%;
        --cols-gap-ratio: 0.666;
    }

    div.cols-5.layout-1:not(.stack-none) > .col,
    div.cols-5.layout-2:not(.stack-none) > .col {
        --col-width: 25%;
        --cols-gap-ratio: 0.75;
    }

    /* Stack at different widths */

    div[class*=cols-].stack-small > .col {
        width: 100%;
    }

    /* Second layer of columns */

    div[class*=cols-] > .col .col {
        /*width: 100% !important;*/
    }

    /* When stacked, re-establish curved corners that we squared off for .gutters-none */

    div[class*=gutters-none]:not(.stack-none) > .col.box:first-child {
        border-top-right-radius: var(--site-box-border-radius);
        border-bottom-right-radius: var(--site-box-border-radius);
    }

    div[class*=gutters-none]:not(.stack-none) > .col.box:not(:first-child):not(:last-child) {
        border-radius: var(--site-box-border-radius);
    }

    div[class*=gutters-none]:not(.stack-none) > .col.box:last-child {
        border-top-left-radius: var(--site-box-border-radius);
        border-bottom-left-radius: var(--site-box-border-radius);
    }

    /* Reverse at different widths (useful for alternative image/text rows) */

    div.cols-2.reverse-small > .col:nth-child(2n) {
        order: -1;
    }

}

@media screen and (min-width: 601px) and (max-width: 900px) {

    div[class*=cols-] > .col.grow-small-only {
        --col-width: auto;
        flex-grow: 1;
        width: auto;
    }

    div[class*=cols-] > .col.shrink-small-only {
        --col-width: auto;
        flex-shrink: 1;
        width: auto;
    }

    /* Stack at different widths*/

    div[class*=cols-].stack-small-only > .col {
        width: 100%;
    }

}

@media screen and (max-width: 600px) {

    /* 
        "Tiny" screen sizes and below
        - Everything needs to stack by now unless we told it not to
    */

    div[class*=cols-] > .col.grow-tiny {
        --col-width: auto;
        flex-grow: 1;
        width: auto;
    }

    div[class*=cols-] > .col.shrink-tiny {
        --col-width: auto;
        flex-shrink: 1;
        width: auto;
    }

    /* Stack at different widths */

    div[class*=cols-]:not(.stack-none) > .col {
        width: 100% !important;
    }

    div.cols-4.layout-1:not(.stack-none) > .col,
    div.cols-4.layout-2:not(.stack-none) > .col,
    div.cols-5.layout-1:not(.stack-none) > .col,
    div.cols-5.layout-2:not(.stack-none) > .col {
        --col-width: 50%;
        --cols-gap-ratio: 0.5;
    }

    /* Dividers are horizontal when stacked */

    div[class*=cols-].dividers > .col::after {
        top: auto;
        right: auto;
        bottom: calc(var(--cols-gutters) * -0.5);
        left: 0;
        width: 100%;
        height: 1px;
    }

    /* Reverse at different widths (useful for alternative image/text rows) */

    div.cols-2.reverse-tiny > .col:nth-child(2n) {
        order: -1;
    }

}

@media screen and (min-width: 376px) and (max-width: 600px) {

    div[class*=cols-] > .col.grow-tiny-only {
        --col-width: auto;
        flex-grow: 1;
        width: auto;
    }

    div[class*=cols-] > .col.shrink-tiny-only {
        --col-width: auto;
        flex-shrink: 1;
        width: auto;
    }

    /* Stack at different widths*/

    div[class*=cols-].stack-tiny-only > .col {
        width: 100%;
    }

}

@media screen and (max-width: 375px) {
    
    /* 
        "Micro" screen sizes and below 
        - Everything got stacked at the tiny screen size, so there's not much to do here.
    */

    div[class*=cols-] > .col.grow-micro {
        --col-width: auto;
        flex-grow: 1;
        width: auto;
    }

    div[class*=cols-] > .col.shrink-micro {
        --col-width: auto;
        flex-shrink: 1;
        width: auto;
    }

}

/* ####################################
   Custom Columns Blocks
   ################################## */

/*
    Image Fill
    - Integrates with div.image-cover rules in CustomElementsExtended.css
*/

div[class*=cols-] > .col div.image-cover {
    position: absolute;
    top: 0;
    left: 0;
}

@media screen and (max-width: 1200px) {

    div[class*=cols-].stack-medium > .col div.image-cover {
        position: relative;
        top: auto;
        left: auto;
    }

}

@media screen and (max-width: 900px) {

    div[class*=cols-].stack-small > .col div.image-cover {
        position: relative;
        top: auto;
        left: auto;
    }

}

@media screen and (max-width: 600px) {

    div[class*=cols-]:not(.stack-none) > .col div.image-cover {
        position: relative;
        top: auto;
        left: auto;
    }

}

/*
    Sequence
    - Leave enough padding for the sequence graphic to avoid overlapping content. We could calculate all the different gutter size options, but that's really hard work and authors probably won't care.
*/

div[class*=cols-].sequence {
    --sequence-icon: '\f356'; /* \f356 (Font Awesome Pro) \f061 (Font Awesome Free) */
    --sequence-icon-size: 2em;
    --sequence-icon-offset: calc(calc(var(--sequence-icon-size) * -0.5) - calc(var(--cols-gutters) * 0.5));
    --sequence-icon-color: var(--site-color-1-mid-dark);
    --sequence-icon-icon-font-family: var(--site-icon-font-family);
}

    div[class*=cols-].sequence > .col {
        box-sizing: border-box;
    }

        div[class*=cols-].sequence > .col::after {
            content: var(--sequence-icon);
            position: absolute;
            top: calc(50% - calc(var(--sequence-icon-size)* 0.5));
            right: var(--sequence-icon-offset);
            z-index: 10;
            box-sizing: border-box;
            padding: 0;
            width: var(--sequence-icon-size);
            line-height: var(--sequence-icon-size);
            font-size: var(--sequence-icon-size);
            font-family: var(--sequence-icon-font-family);
            font-weight: var(--sequence-icon-font-weight);
            color: var(--sequence-icon-color);
            text-align: center;
            background: #fff;
            border-radius: 100%;
        }

        div[class*=cols-].sequence.shadows > .col::after {
            box-shadow: 0 0 15px rgb(0 0 0 / 15%);
        }

        div[class*=cols-].sequence > .col:last-child::after {
            display: none;
        }

div.cols-5.sequence,
div.cols-6.sequence {
}

    div.cols-5.sequence > .col::after,
    div.cols-6.sequence > .col::after {
        transform: scale(0.75);
    }

div[class*=cols-].gutters-none.sequence {
}

    div[class*=cols-].gutters-none.sequence > .col::after {
        color: #fff;
        font-weight: 700;
        text-shadow: 2px 2px 2px #000;
        background: none;
    }

@media screen and (max-width: 1400px) {

    div[class*=cols-].sequence > .col::after {
        transform: scale(0.75);
    }

    div.cols-5.sequence > .col::after,
    div.cols-6.sequence > .col::after {
        transform: scale(0.5);
    }

}

@media screen and (max-width: 900px) {

    div[class*=cols-].sequence > .col::after {
        transform: scale(0.75);
    }

    div[class*=cols-].sequence:not(.stack-none) > .col:nth-child(2n)::after {
        position: absolute;
        right: auto;
        top: auto;
        bottom: var(--sequence-icon-offset);
        left: var(--sequence-icon-offset);
        transform: scale(0.75) rotate(135deg);
    }

    div[class*=cols-].gutters-none.sequence > .col:nth-child(2n)::after {
        text-shadow: 2px -2px 2px #000;
    }

}

@media screen and (max-width: 600px) {

    div[class*=cols-].sequence:not(.stack-none) > .col::after,
    div[class*=cols-].sequence:not(.stack-none) > .col:nth-child(2n)::after {
        position: absolute;
        right: calc(50% - 20px);
        top: auto;
        bottom: -34px;
        left: auto;
        font-weight: 700;
        transform: scale(0.35) rotate(90deg);
    }

        div[class*=cols-].sequence:not(.stack-none) > .col .icon::before {
            margin-right: 0;
            margin-left: 0.125em;
        }

    div[class*=cols-].gutters-none.sequence > .col::after,
    div[class*=cols-].gutters-none.sequence > .col:nth-child(2n)::after {
        bottom: -30px;
        text-shadow: 3px -3px 4px #000;
    }

}

/*
    Legacy IE support because it can't handle complex variables
    - Advanced layout helpers not available
    - Multiple gutter widths not available
*/

@media all and (-ms-high-contrast:none) {

    /* IE10 & 11 */

    div.cols-2 { }
    div.cols-2 > .col { width: calc(50% - 15px); }
    div.cols-2 > .col:not(:nth-child(2n-0)) { margin-right: 30px; }
    div.cols-2.layout-1 { }
    div.cols-2.layout-1 > .col:nth-child(2n-1) { width: calc(34% - 15px); }
    div.cols-2.layout-1 > .col:nth-child(2n-0) { width: calc(66% - 15px); }
    div.cols-2.layout-2 { }
    div.cols-2.layout-2 > .col:nth-child(2n-1) { width: calc(43% - 15px); }
    div.cols-2.layout-2 > .col:nth-child(2n-0) { width: calc(57% - 15px); }
    div.cols-2.layout-3 { }
    div.cols-2.layout-3 > .col:nth-child(2n-1) { width: calc(57% - 15px); }
    div.cols-2.layout-3 > .col:nth-child(2n-0) { width: calc(43% - 15px); }
    div.cols-2.layout-4 { }
    div.cols-2.layout-4 > .col:nth-child(2n-1) { width: calc(66% - 15px); }
    div.cols-2.layout-4 > .col:nth-child(2n-0) { width: calc(34% - 15px); }

    div.cols-3 { }
    div.cols-3 > .col { width: calc(33.33% - 20px); }
    div.cols-3 > .col:not(:nth-child(3n-0)) { margin-right: 30px; }
    div.cols-3 { }
    div.cols-3.layout-1 > .col { }
    div.cols-3.layout-1 > .col:nth-child(3n-2) { width: calc(25% - 20px); }
    div.cols-3.layout-1 > .col:nth-child(3n-1) { width: calc(50% - 20px); }
    div.cols-3.layout-1 > .col:nth-child(3n-0) { width: calc(25% - 20px); }
    div.cols-3.layout-2 > .col { }
    div.cols-3.layout-2 > .col:nth-child(3n-2) { width: calc(50% - 20px); }
    div.cols-3.layout-2 > .col:nth-child(3n-1) { width: calc(25% - 20px); }
    div.cols-3.layout-2 > .col:nth-child(3n-0) { width: calc(25% - 20px); }
    div.cols-3.layout-3 > .col { }
    div.cols-3.layout-3 > .col:nth-child(3n-2) { width: calc(25% - 20px); }
    div.cols-3.layout-3 > .col:nth-child(3n-1) { width: calc(25% - 20px); }
    div.cols-3.layout-3 > .col:nth-child(3n-0) { width: calc(50% - 20px); }
    
    div.cols-4 { }
    div.cols-4 > .col { width: calc(25% - 22.5px); }
    div.cols-4 > .col:not(:nth-child(4n-0)) { margin-right: 30px; }
    
    div.cols-5 { }
    div.cols-5 > .col { width: calc(20% - 24px); }
    div.cols-5 > .col:not(:nth-child(5n-0)) { margin-right: 30px; }
    
    div.cols-6 { }
    div.cols-6 > .col { width: calc(16.666% - 25px); }
    div.cols-6 > .col:not(:nth-child(6n-0)) { margin-right: 30px; }

    div[class*=cols-].dividers > .col::after { display: none; }

    /* IE11 Only */

    *::-ms-backdrop, .foo {}

}

@media all and (-ms-high-contrast:none) and (max-width: 1400px) {
    div[class*=cols-].stack-large > .col { width: 100%; margin-bottom: 15px; margin-right: 0; }
}

@media all and (-ms-high-contrast:none) and (max-width: 1200px) {
    div[class*=cols-].stack-medium > .col { width: 100%; margin-bottom: 15px; margin-right: 0; }
}

@media all and (-ms-high-contrast:none) and (max-width: 900px) {
    div[class*=cols-]:not(.stack-none) > .col { width: calc(50% - 7.5px); }
    div[class*=cols-]:not(.stack-none) > .col:nth-child(2n-1) { margin-bottom: 15px; margin-right: 15px; }
    div[class*=cols-]:not(.stack-none) > .col:nth-child(2n-0) { margin-bottom: 15px; margin-right: 0; }
    div[class*=cols-].stack-small > .col { width: 100% !important; margin-bottom: 15px !important; margin-right: 0 !important; }
}

@media all and (-ms-high-contrast:none) and (max-width: 600px) {
    div[class*=cols-] > .col { margin-bottom: 15px; margin-right: 0; }
}