/************* GENERAL DEVICE-SIZE-BASED ITEMS *************/

/* CLASS KEYWORDS: */
.container, .contained {
    margin: auto;
}

/* NOTE:  IE-specific logic further down uses padding-right, padding-bottom to create grid gaps, and then it unsets the padding if display: grid is supported, so never use padding in columns */
.columns { /* Equal sized columns - these are set up with automatic doubling and stacking below */
    display: -ms-grid;
    display: grid;
    width: 100%;
}
/* IE hack */
_:-ms-lang(x), .divided.columns > div:not(:first-of-type) { margin-left: 15px; }
_:-ms-lang(x), .divided.columns > div { margin-bottom: 15px; }
.divided.columns {grid-gap: 15px;}

/* A wrapper that centers content using flexbox */
.content-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}
.content-wrapper .centered {
    -ms-flex-item-align: center;
        align-self: center;
}

*.padded {
    padding-top: calc(20px + 1.2vw);
    padding-bottom: calc(20px + 1.2vw);
}
*.bottom-padded {
    padding-bottom: calc(20px + 1.2vw);
}
*.fully-padded {
    padding: 15px 30px;
}
*.bottom-spaced {
    margin-bottom: calc(20px + 1.2vw);
}

.one-css-columns {
    -webkit-columns: 200px 1;
    columns: 200px 1;
}
.two-css-columns {
    -webkit-columns: 200px 2;
    columns: 200px 2;
}
.three-css-columns {
    -webkit-columns: 188px 3;
    columns: 188px 3;
}
/* MS Edge hack:  multiple css columns are not changing to lesser number of columns automatically  unless column-count set to auto */
@supports (-ms-ime-align:auto) { [class$='-css-columns'] { -webkit-column-count: auto; column-count: auto; } }

/* IE hack:  Must tell IE which column each block goes in - IMPORTANT NOTE:  not concerned about re-ordering at smaller screen sizes - assuming IE only being used on desktops */
.columns > div:nth-of-type(1) {
    -ms-grid-column: 1;
}
.columns > div:nth-of-type(2) {
    -ms-grid-column: 2;
}
.columns > div:nth-of-type(3) {
    -ms-grid-column: 3;
}
.columns > div:nth-of-type(4) {
    -ms-grid-column: 4;
}
.columns > div:nth-of-type(5) {
    -ms-grid-column: 5;
}
.columns > div:nth-of-type(6) {
    -ms-grid-column: 6;
}
.columns > div:nth-of-type(7) {
    -ms-grid-column: 7;
}
.columns > div:nth-of-type(8) {
    -ms-grid-column: 8;
}
/* @media queries */
@media only screen and (max-width: 449px) {
    .columns {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
    }
    .container {
        max-width: 96vw;
    }
    .contained {
        padding-left: 2vw;
        padding-right: 2vw;
    }
}
@media only screen and (min-width: 450px) and (max-width: 767px) {
    .container {
        max-width: 92vw;
    }
    .contained {
        padding-left: 4vw;
        padding-right: 4vw;
    }
    .three.columns, .eight.columns {
        -ms-grid-columns: 1fr 1fr 1fr;
        grid-template-columns: 1fr 1fr 1fr;
    }
    .two.columns, .four.columns {
        -ms-grid-columns: 1fr 1fr;
        grid-template-columns: 1fr 1fr;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .container {
        max-width: 89vw;
    }
    .contained {
        padding-left: 5.5vw;
        padding-right: 5.5vw;
    }
    .two.columns, .four.columns {
        -ms-grid-columns: 1fr 1fr;
        grid-template-columns: 1fr 1fr;
    }
    .three.columns, .eight.columns {
        -ms-grid-columns: 1fr 1fr 1fr;
        grid-template-columns: 1fr 1fr 1fr;
    }
}
@media only screen and (min-width: 992px) and (max-width: 1023px) {
    .container {
        max-width: 86vw;
    }
    .contained {
        padding-left: 7vw;
        padding-right: 7vw;
    }
    .two.columns {
        -ms-grid-columns: 1fr 1fr;
        grid-template-columns: 1fr 1fr;
    }
    .three.columns {
        -ms-grid-columns: 1fr 1fr 1fr;
        grid-template-columns: 1fr 1fr 1fr;
    }
    .four.columns, .eight.columns {
        -ms-grid-columns: 1fr 1fr 1fr 1fr;
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
    .two-1fr-365px.columns {
        -ms-grid-columns: 1fr 365px;
        grid-template-columns: 1fr 365px;
    }
    .two-245px-1fr.columns {
        -ms-grid-columns:245px 1fr;
        grid-template-columns:245px 1fr;
    }    
}
/* NOTE:  This and the next breakpoint only differ on the .eight.columns */
@media only screen and (min-width: 1024px) and (max-width: 1350px) {
    .container {
        max-width: 80vw;
    }
    .contained {
        padding-left: 10vw;
        padding-right: 10vw;
    }
    .two.columns {
        -ms-grid-columns: 1fr 1fr;
        grid-template-columns: 1fr 1fr;
    }
    .three.columns {
        -ms-grid-columns: 1fr 1fr 1fr;
        grid-template-columns: 1fr 1fr 1fr;
    }
    .four.columns {
        -ms-grid-columns: 1fr 1fr 1fr 1fr;
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
    .eight.columns {
        -ms-grid-columns: 1fr 1fr 1fr 1fr;
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
    .two-1fr-365px.columns {
        -ms-grid-columns: 1fr 365px;
        grid-template-columns: 1fr 365px;
    }    
    .two-245px-1fr.columns {
        -ms-grid-columns:245px 1fr;
        grid-template-columns:245px 1fr;
    }    
}
@media only screen and (min-width: 1351px) and (max-width: 1919px) {
    .container {
        max-width: 80vw;
    }
    .contained {
        padding-left: 10vw;
        padding-right: 10vw;
    }
    .two.columns {
        -ms-grid-columns: 1fr 1fr;
        grid-template-columns: 1fr 1fr;
    }
    .three.columns {
        -ms-grid-columns: 1fr 1fr 1fr;
        grid-template-columns: 1fr 1fr 1fr;
    }
    .four.columns {
        -ms-grid-columns: 1fr 1fr 1fr 1fr;
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
    .eight.columns {
        -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    }
    .two-1fr-365px.columns {
        -ms-grid-columns: 1fr 365px;
        grid-template-columns: 1fr 365px;
    }    
    .two-245px-1fr.columns {
        -ms-grid-columns:245px 1fr;
        grid-template-columns:245px 1fr;
    }    
}
@media only screen and (min-width: 1920px) {
    .container {
        max-width: 74vw;
    }
    .contained {
        padding-left: 13vw;
        padding-right: 13vw;
    }
    .two.columns {
        -ms-grid-columns: 1fr 1fr;
        grid-template-columns: 1fr 1fr;
    }
    .three.columns {
        -ms-grid-columns: 1fr 1fr 1fr;
        grid-template-columns: 1fr 1fr 1fr;
    }
    .four.columns {
        -ms-grid-columns: 1fr 1fr 1fr 1fr;
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
    .eight.columns {
        -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }
    .two-1fr-365px.columns {
        -ms-grid-columns: 1fr 365px;
        grid-template-columns: 1fr 365px;
    }
    .two-245px-1fr.columns {
        -ms-grid-columns:245px 1fr;
        grid-template-columns:245px 1fr;
    }    
}