﻿/* ####################################
   Content in Columns
   ################################## */
	
/*
    Note: .col1, .col2, .col3, .col4 rules below included for backward compatibility with content created
    in old cm3 releases. Delete these rules if you're using a new site and don't need them.
*/

div.twoCols, div.threeCols, div.fourCols, div.fiveCols, div.sixCols {
	display: flex;
	clear: both;
    box-sizing: border-box;
	width: 100%;
	margin-top: 40px;
}
div.twoCols h3, div.threeCols h3, div.fourCols h3, div.fiveCols h3, div.sixCols h3 {
	margin: 1.0em 0 0.75em 0;
}

    /* 2 Columns */
    
    div.twoCols > .col1,
    div.twoCols > .col:nth-child(2n-1) {
        position: relative;
        float: left;
        clear: left;
        width: 49%;
        margin-right: 1%;
    }

    div.twoCols > .col2,
    div.twoCols > .col:nth-child(2n-0) {
        position: relative;
        float: right;
        width: 49%;
        margin-left: 1%;
    }

    div.twoCols.layout1 {
    }

        div.twoCols.layout1 > .col1,
        div.twoCols.layout1 > .col:nth-child(2n-1) {
            width: 33%;
        }

        div.twoCols.layout1 > .col2,
        div.twoCols.layout1 > .col:nth-child(2n-0) {
            width: 65%;
        }

    div.twoCols.layout2 {
    }
    
        div.twoCols.layout2 > .col1,
        div.twoCols.layout2 > .col:nth-child(2n-1) {
            width: 65%;
        }

        div.twoCols.layout2 > .col2,
        div.twoCols.layout2 > .col:nth-child(2n-0) {
            width: 33%;
        }

    /* 3 Columns */

    div.threeCols > .col1,
    div.threeCols > .col:nth-child(3n-2) {
        position: relative;
        float: left;
        width: 32%;
        margin-right: 1%;
    }

    div.threeCols > .col2,
    div.threeCols > .col:nth-child(3n-1) {
        position: relative;
        float: left;
        width: 32%;
        margin-right: 1%;
        margin-left: 1%;
    }

    div.threeCols > .col3,
    div.threeCols > .col:nth-child(3n-0) {
        position: relative;
        float: right;
        width: 32%;
        margin-left: 1%;
    }

    div.threeCols.layout1 {
    }

        div.threeCols.layout1 > .col1,
        div.threeCols.layout1 > .col:nth-child(3n-2) {
            width: 24%;
        }

        div.threeCols.layout1 > .col2,
        div.threeCols.layout1 > .col:nth-child(3n-1) {
            width: 48%;
        }

        div.threeCols.layout1 > .col3,
        div.threeCols.layout1 > .col:nth-child(3n-0) {
            width: 24%;
        }
    
    /* 4 Columns */

    div.fourCols > .col1,
    div.fourCols > .col:nth-child(4n-3) {
        position: relative;
        float: left;
        width: 24%;
        margin-right: 0.6666%;
    }

    div.fourCols > .col2,
    div.fourCols > .col:nth-child(4n-2) {
        position: relative;
        float: left;
        width: 24%;
        margin-right: 0.6666%;
        margin-left: 0.6666%;
    }

    div.fourCols > .col3,
    div.fourCols > .col:nth-child(4n-3) {
        position: relative;
        float: left;
        width: 24%;
        margin-right: 0.6666%;
        margin-left: 0.6666%;
    }

    div.fourCols > .col4,
    div.fourCols > .col:nth-child(4n-0) {
        position: relative;
        float: left;
        width: 24%;
        margin-left: 0.6666%;
    }
    
    /* 5 Columns */

    div.fiveCols > .col:nth-child(5n-4) {
        position: relative;
        float: left;
        width: 19%;
        margin-right: 0.625%;
    }

    div.fiveCols > .col:nth-child(5n-3) {
        position: relative;
        float: left;
        width: 19%;
        margin-right: 0.625%;
        margin-left: 0.625%;
    }

    div.fiveCols > .col:nth-child(5n-2) {
        position: relative;
        float: left;
        width: 19%;
        margin-right: 0.625%;
        margin-left: 0.625%;
    }

    div.fiveCols > .col:nth-child(5n-1) {
        position: relative;
        float: left;
        width: 19%;
        margin-right: 0.625%;
        margin-left: 0.625%;
    }

    div.fiveCols > .col:nth-child(5n-0) {
        position: relative;
        float: right;
        width: 20%;
        margin-left: 0.625%;
    }
    
    /* 6 Columns */

    div.sixCols > .col:nth-child(6n-5) {
        position: relative;
        float: left;
        width: 16%;
        margin-right: 0.4%;
    }

    div.sixCols > .col:nth-child(6n-4) {
        position: relative;
        float: left;
        width: 16%;
        margin-right: 0.4%;
        margin-left: 0.4%;
    }

    div.sixCols > .col:nth-child(6n-3) {
        position: relative;
        float: left;
        width: 16%;
        margin-right: 0.4%;
        margin-left: 0.4%;
    }

    div.sixCols > .col:nth-child(6n-2) {
        position: relative;
        float: left;
        width: 16%;
        margin-right: 0.4%;
        margin-left: 0.4%;
    }
    
    div.sixCols > .col:nth-child(6n-1) {
        position: relative;
        float: left;
        width: 16%;
        margin-right: 0.4%;
        margin-left: 0.4%;
    }

    div.sixCols > .col:nth-child(6n-0) {
        position: relative;
        float: left;
        width: 16%;
        margin-left: 0.4%;
    }

@media screen and (max-width: 767px) {

    .col1, .col2, .col3, .col4,
    div.threeCols > .col, 
    div.fourCols > .col,
    div.fiveCols > .col,
    div.sixCols > .col {
        float: left !important;
        width: 50% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    div.threeCols > .col3,
    div.threeCols > .col:nth-child(3n-0), 
    div.fiveCols > .col:nth-child(3n-0) {
        /* margin-left: 25% !important; */
    }

}

@media screen and (max-width: 700px) {

    div.twoCols, div.threeCols, div.fourCols, div.fiveCols, div.sixCols {
        display: block;
    }

    .col1, .col2, .col3, .col4, .col5, .col6,
    div.twoCols > .col,
    div.threeCols > .col,
    div.fourCols > .col,
    div.fiveCols > .col,
    div.sixCols > .col {
        float: left !important;
        clear: left !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

}

