.mstResponsive html {
    overflow-y: auto;
}

.mstResponsive img, .mstResponsive video {
    height: auto;
}

.mstResponsive .grid-container {
    width: 96%!important;
    max-width: 1180px;
    *zoom: 1;
}

    .mstResponsive .grid-container:after {
        content: "";
        display: table;
        clear: both;
    }

.mstResponsive .grid-row .grid-unit {
    position: relative;
    width: 100%;
}

.mstResponsive .grid-row:after {
    clear: both;
}

.mstResponsive .grid-row {
    clear: both;
    width: 100%;
}

@media screen and (min-width:540px) {
    .mstResponsive .column-1 .grid-unit {
        width: 100%;
    }

    .mstResponsive .column-2 .grid-unit {
        width: 49%;
    }

    .mstResponsive .column-3 .grid-unit {
        width: 32%;
    }

    .mstResponsive .column-4 .grid-unit {
        width: 49%;
    }

    .mstResponsive .column-3 .colspan-1, .mstResponsive .column-3 .colspan-2, .mstResponsive .column-4 .colspan-1, .mstResponsive .column-4 .colspan-2, .mstResponsive .column-4 .colspan-3 {
        width: 100%;
    }

        .mstResponsive .column-3 .colspan-2 .grid-unit, .mstResponsive .column-4 .colspan-2 .grid-unit, .mstResponsive .column-6 .colspan-2 .grid-unit {
            width: 49%;
        }

        .mstResponsive .column-2 .colspan-2 .grid-unit, .mstResponsive .column-2 .colspan-3 .grid-unit, .mstResponsive .column-3 .colspan-3 .grid-unit, .mstResponsive .column-4 .colspan-3 .grid-unit {
            width: 100%;
        }

        .mstResponsive .column-4 .colspan-3 .colspan-2 {
            width: 100%;
        }

    .mstResponsive .column-4 .grid-unit:nth-of-type(2n+3) {
        clear: both;
    }

    .mstResponsive .column-4 .colspan-2.grid-unit + .grid-unit + .grid-unit, .mstResponsive .column-4 .colspan-3 .grid-unit {
        clear: none;
    }

    .mstResponsive .column-6 .grid-unit {
        width: 49%;
    }

        .mstResponsive .column-6 .grid-unit:nth-of-type(2n+3) {
            clear: both;
        }

    .mstResponsive .column-6 .colspan-2:nth-of-type(2n+3) {
        width: 100%;
    }
}

@media screen and (min-width:680px) {
    .mstResponsive .column-2 .colspan-3 .grid-unit, .mstResponsive .column-3 .colspan-3 .grid-unit, .mstResponsive .column-4 .colspan-3 .grid-unit {
        width: 31.63%;
    }

    .mstResponsive .column-4 .colspan-3 .colspan-2 {
        width: 65.815%;
    }

    .mstResponsive .column-6 .grid-unit {
        width: 32%;
    }

    .mstResponsive .column-6 .colspan-2 {
        width: 49%;
    }

    .mstResponsive .column-6 .grid-unit:nth-of-type(2n+3) {
        clear: none;
    }

    .mstResponsive .column-6 .grid-unit:nth-of-type(4n) {
        clear: both;
    }

    .mstResponsive .column-6 .colspan-2:nth-of-type(2n+3) {
        clear: both;
        width: 100%;
    }
}

@media screen and (min-width:900px) {
    .mstResponsive .column-1 .grid-unit {
        width: 100%;
    }

    .mstResponsive .column-2 .grid-unit {
        width: 49%;
    }

    .mstResponsive .column-3 .grid-unit {
        width: 32%;
    }

    .mstResponsive .column-4 .grid-unit {
        width: 23.5%;
    }

    .mstResponsive .column-3 .colspan-2 .grid-unit, .mstResponsive .column-4 .colspan-2 .grid-unit, .mstResponsive .column-6 .colspan-2 .grid-unit {
        width: 48.3335%;
    }

    .mstResponsive .column-3 .colspan-2 {
        width: 66%;
    }

    .mstResponsive .column-4 .colspan-2 {
        width: 49%;
    }

    .mstResponsive .column-4 .colspan-3 {
        width: 74.5%;
    }

    .mstResponsive .column-2 .colspan-2 .grid-unit {
        width: 48.3335%;
    }

    .mstResponsive .column-3 .colspan-2 + .grid-unit, .mstResponsive .column-4 .colspan-2 + .grid-unit, .mstResponsive .column-3 .colspan-2 + .grid-unit, .mstResponsive .column-4 .grid-unit:nth-of-type(2n+3) {
        clear: none;
    }

    .mstResponsive .column-6 .grid-unit {
        width: 15%;
    }

        .mstResponsive .column-6 .grid-unit:nth-of-type(4n) {
            clear: none;
        }

    .mstResponsive .column-6 .colspan-2 {
        width: 32%;
    }

        .mstResponsive .column-6 .colspan-2:nth-of-type(2n+3) {
            clear: none;
            width: 32%;
        }
}

.mstResponsiveTest .show-grid.column-1 div[class*="grid-"] {
    background-color: #8bbf2c;
}

.mstResponsiveTest .show-grid.column-2 div[class*="grid-"] {
    background-color: #edd21f;
}

.mstResponsiveTest .show-grid.column-3 div[class*="grid-"] {
    background-color: #26bef0;
}

.mstResponsiveTest .show-grid.column-4 div[class*="grid-"] {
    background-color: #f03a25;
}

.mstResponsiveTest .show-grid.column-6 div[class*="grid-"] {
    background-color: blue;
}

.mstResponsive .grid-unit .grid-unit {
    padding: 0 0!important;
    margin-bottom: .25em!important;
    margin-top: .25em;
    min-height: 1em!important;
}

.mstResponsiveTest .show-grid .grid-unit .grid-unit {
    background-color: gray!important;
}

.mstResponsive .show-grid {
    width: 100%;
}

    .mstResponsive .show-grid div[class*="grid-"] {
        display: block;
    }

.mstResponsiveTest .show-grid div[class*="grid-"] {
    border-radius: 3px;
    margin-bottom: .5em;
    padding: .4em 0;
    min-height: 1.5em;
    display: block;
}

.mstResponsiveTest .show-grid {
    width: 100%;
    margin: .5em 0;
    padding-top: .5em;
    background-color: #e7e7e7;
}

.mstNonResponsive .grid-container:after {
    content: "";
    display: table;
    clear: both;
}

.mstNonResponsive .grid-row .grid-unit {
    position: relative;
    margin-left: 0;
    width: 100%;
}

.mstNonResponsive .grid-row {
    width: 100%;
}

    .mstNonResponsive .grid-row, .mstNonResponsive .grid-row:after {
        clear: both;
    }

.mstNonResponsive .grid-container {
    margin-left: auto;
    margin-right: auto;
    padding: 0 40px;
    *zoom: 1;
}

    .mstNonResponsive .grid-container .grid-unit {
        display: inline;
    }