/*---------- INSTRUCTIONS ----------*/

/*Wrap each row in a .colRow, and insert columns as needed.*/
/*Each column will have two classes: .col and .col-#-#.*/
/*Think of the "-#-#" affixed to the end as a fraction.*/
/*For example, .col-1-2 is a 1/2 column. .col-1-3 is a 1/3 column, and so on.*/

/*Here is an example of this system typed out in HTML:*/
/*
<div class="colRow">
    <div class="col col-1-2">
        
    </div>
    <div class="col col-1-2">
        
    </div>
</div>
*/

/*---------- SQUARE COLUMNS ----------*/

/*If you want to make your column perfectly square (height equal to width), add the "square" class.*/
/*Please note that whatever you put inside a column with a class "square" must be have a position of absolute,*/
/*otherwise the pseudo-element that makes it square will displace the content inside.*/

/*---------- FLEXIBLE COLUMNS ----------*/

/*At the very bottom there are styles for flexible columns. Use these styles INSTEAD of the others. So, do not use "colRow", use "colRowFlex"; do not "col", use "col-flex".*/
/*If you want columns of equal widths, you need not specify any width or add any other classes to your columns. "col-flex" will do.*/
/*EXAMPLE:
    <div class="colRowFlex">
        <div class="col-flex">
        
        </div>
        <div class="col-flex">

        </div>
    </div>
*/
/*To vertically align your columns, add the "vert" class to "colRowFlex".*/
/*EXAMPLE:
    <div class="colRowFlex vert">
        <!--These columns will stack vertically-->
        <div class="col-flex">

        </div>
        <div class="col-flex">

        </div>
    </div>
*/
/*If you do want to proportion certain columns differently in relation to their neighbors, use "col-flex-#" classes instead of "col-flex". For example, if you want one column to be twice as wide as its neighbors, use "col-flex-2". For something three times as wide, use "col-flex-3", and so on.*/
/*EXAMPLE:
    <div class="colRowFlex">
        <div class="col-flex-2">

        </div>
        <div class="col-flex">

        </div>
        <div class="col-flex">

        </div>
    </div>
*/

/*---------- RESPONSIVE ----------*/

/*There are media queries at the bottom of this style sheet that reset the layout for all columns, regardless of width.*/
/*If you need to modify these, please do so in a separate stylesheet.*/

/*==========---------------==========*/
/*            SIMPLY GRID            */
/*==========---------------==========*/

/*---------- GLOBAL ----------*/

body *{
    -webkit-box-sizing:border-box;
       -moz-box-sizing:border-box;
            box-sizing:border-box;
}

.colRow{
    display:block;
    width:100%;
    padding:1em 0;
}
    .colRow:before,
    .colRow:after{
        content:'';
        display:table;
        float:none;
        clear:both;
    }
    .col{
        display:block;
        float:left;
        padding:0 1em;
        position:relative;
    }
        .col .col:first-of-type{
            padding-left:0;
        }
        .col .col:last-of-type{
            padding-right:0;
        }
.noPadding{
    padding:0 !important;
}
.noMargin{
    margin:0 !important;
}

/*---------- ONE COLUMN ----------*/

.col-1{
    width:100%;
}

/*---------- TWO COLUMN ----------*/

.col-1-2{
    width:50%;
}

/*---------- THREE COLUMN ----------*/

.col-1-3{
    width:33.33%;
}
    .col-1-3 + .col-1-3{
        width:33.34%;
    }
    .col-1-3 + .col-1-3 + .col-1-3{
        width:33.33%;
    }
.col-2-3{
    width:66.67%;
}

/*---------- FOUR COLUMN ----------*/

.col-1-4{
    width:25%;
}
.col-3-4{
    width:75%;
}

/*---------- FIVE COLUMN ----------*/

.col-1-5{
    width:20%;
}
.col-2-5{
    width:40%;
}
.col-3-5{
    width:60%;
}
.col-4-5{
    width:80%;
}

/*---------- SIX COLUMN ----------*/

.col-1-6{
    width:16.67%;
}
.col-5-6{
    width:83.33%;
}

/*---------- SEVEN COLUMN ----------*/

.col-1-7{
    width:14.28%;
}
.col-2-7{
    width:28.57%;
}
.col-3-7{
    width:42.86%;
}
.col-4-7{
    width:57.14%;
}
.col-5-7{
    width:71.43%;
}
.col-6-7{
    width:85.71%;
}

/*---------- EIGHT COLUMN ----------*/

.col-1-8{
    width:12.5%;
}
.col-3-8{
    width:37.5%;
}
.col-5-8{
    width:62.5%;
}
.col-7-8{
    width:87.5%;
}

/*---------- NINE COLUMN ----------*/

.col-1-9{
    width:11.11%;
}
.col-2-9{
    width:22.22%;
}
.col-4-9{
    width:44.44%;
}
.col-5-9{
    width:55.56%;
}
.col-7-9{
    width:77.78%;
}
.col-8-9{
    width:88.89%;
}

/*---------- TEN COLUMN ----------*/

.col-1-10{
    width:10%;
}
.col-3-10{
    width:30%;
}
.col-7-10{
    width:70%;
}
.col-9-10{
    width:90%;
}

/*---------- ELEVEN COLUMN ----------*/

.col-1-11{
    width:9.09%;
}
.col-2-11{
    width:18.18%;
}
.col-3-11{
    width:27.27%;
}
.col-4-11{
    width:36.36%;
}
.col-5-11{
    width:45.45%;
}
.col-6-11{
    width:54.55%;
}
.col-7-11{
    width:63.64%;
}
.col-8-11{
    width:72.73%;
}
.col-9-11{
    width:81.82%;
}
.col-10-11{
    width:90.91%;
}

/*---------- TWELVE COLUMN ----------*/

.col-1-12{
    width:8.33%;
}
.col-5-12{
    width:41.67%;
}
.col-7-12{
    width:58.33%;
}
.col-11-12{
    width:91.67%;
}

/*---------- GOLDEN RATIO ----------*/

.col-sm-gr{
    width:38.2%;
}
.col-lg-gr{
    width:61.8%;
}

/*---------- SQUARE ----------*/

.square{
    position:relative;
}
    .square:after{
        content:'';
        display:block;
        position:relative;
        z-index:-1;
        padding-bottom:100%;
    }

/*==========---------------==========*/
/*            SIMPLY FLEX            */
/*==========---------------==========*/

/*---------- GLOBAL ----------*/
.flex{
    display:-webkit-flex !important;
       display:-moz-flex !important;
        display:-ms-flex !important;
            display:flex !important;
}

/*---------- ROW CLASSES ----------*/
.colRowFlex{
    width:100%;
    padding:1em 0;
    display:-webkit-flex;
    display:-moz-flex;
    display:-ms-flex;
    display:flex;
    -webkit-flex-wrap:wrap;
       -moz-flex-wrap:wrap;
        -ms-flex-wrap:wrap;
            flex-wrap:wrap;
    -webkit-align-items:stretch;
       -moz-align-items:stretch;
        -ms-align-items:stretch;
            align-items:stretch;
    -webkit-flex-direction:row;
       -moz-flex-direction:row;
        -ms-flex-direction:row;
            flex-direction:row;
}

.colRowFlex.fillRow > *{
    margin:0 !important;
}
.colRowFlex.vert{
    -webkit-flex-direction:column;
       -moz-flex-direction:column;
        -ms-flex-direction:column;
            flex-direction:column;
}
    .colRowFlex.vert > .col-flex{
        -webkit-flex-basis:auto;
        -moz-flex-basis:auto;
        -ms-flex-basis:auto;
        flex-basis:auto;
    }
.colRowFlex.vert-reverse{
    -webkit-flex-direction:column-reverse;
       -moz-flex-direction:column-reverse;
        -ms-flex-direction:column-reverse;
            flex-direction:column-reverse;
}
    .colRowFlex.vert > .col-flex,
    .colRowFlex.vert-reverse > .col-flex{
        -webkit-flex-basis:auto;
        -moz-flex-basis:auto;
        -ms-flex-basis:auto;
        flex-basis:auto;
    }
.flex-row-reverse{
    -webkit-flex-direction:row-reverse !important;
       -moz-flex-direction:row-reverse !important;
        -ms-flex-direction:row-reverse !important;
            flex-direction:row-reverse !important;
}

/*---------- COLUMN CLASSES ----------*/
.col-flex{
    flex:1;
    padding:0 1em;
    margin:auto;
    position:relative;
}
[class*="col-flex"]{
    display:block;
}
    [class*="col-flex"] [class*="col-flex"]:first-of-type,
    .col [class*="col-flex"]:first-of-type{
        padding-left:0;
    }
    [class*="col-flex"] [class*="col-flex"]:last-of-type,
    .col [class*="col-flex"]:last-of-type{
        padding-right:0;
    }
    .reverseCols [class*="col-flex"]:first-of-type{
        padding-left:1em;
        padding-right:0;
    }
    .aternateCols [class*="col-flex"]:last-of-type{
        padding-right:1em;
        padding-left:0;
    }


/*---------- DOUBLE PROPORTION COLUMN ----------*/

.col-flex-2{
    -webkit-flex:2;
    -moz-flex:2;
    -ms-flex:2;
    flex:2;
    margin:auto;
    padding:0 1em;
}

/*---------- TRIPLE PROPORTION COLUMN ----------*/

.col-flex-3{
    -webkit-flex:3;
    -moz-flex:3;
    -ms-flex:3;
    flex:3;
    margin:auto;
    padding:0 1em;
}

/*---------- QUADRUPLE PROPORTION COLUMN ----------*/

.col-flex-4{
    -webkit-flex:4;
    -moz-flex:4;
    -ms-flex:4;
    flex:4;
    margin:auto;
    padding:0 1em;
}

/*---------- QUINTUPLE PROPORTION COLUMN ----------*/

.col-flex-5{
    -webkit-flex:5;
    -moz-flex:5;
    -ms-flex:5;
    flex:5;
    margin:auto;
    padding:0 1em;
}

/*---------- SEXTUPLE PROPORTION COLUMN ----------*/

.col-flex-6{
    -webkit-flex:6;
       -moz-flex:6;
        -ms-flex:6;
            flex:6;
    margin:auto;
    padding:0 1em;
}

/*---------- SEPTUPLE PROPORTION COLUMN ----------*/

.col-flex-7{
    -webkit-flex:7;
       -moz-flex:7;
        -ms-flex:7;
            flex:7;
    margin:auto;
    padding:0 1em;
}

/*---------- OCTUPLE PROPORTION COLUMN ----------*/

.col-flex-8{
    -webkit-flex:8;
       -moz-flex:8;
        -ms-flex:8;
            flex:8;
    margin:auto;
    padding:0 1em;
}

/*---------- NONUPLE PROPORTION COLUMN ----------*/

.col-flex-9{
    -webkit-flex:9;
       -moz-flex:9;
        -ms-flex:9;
            flex:9;
    margin:auto;
    padding:0 1em;
}

/*---------- DECUPLE PROPORTION COLUMN ----------*/

.col-flex-10{
    -webkit-flex:10;
       -moz-flex:10;
        -ms-flex:10;
            flex:10;
    margin:auto;
    padding:0 1em;
}

/*---------- UNDECUPLE PROPORTION COLUMN ----------*/

.col-flex-11{
    -webkit-flex:11;
       -moz-flex:11;
        -ms-flex:11;
            flex:11;
    margin:auto;
    padding:0 1em;
}

/*---------- DUODECUPLE PROPORTION COLUMN ----------*/

.col-flex-12{
    -webkit-flex:12;
       -moz-flex:12;
        -ms-flex:12;
            flex:12;
    margin:auto;
    padding:0 1em;
}

/*---------- FLEX BASES ----------*/
.flex-basis-20p{
    -webkit-flex-basis:20%;
       -moz-flex-basis:20%;
            flex-basis:20%;
}
.flex-basis-25p{
    -webkit-flex-basis:25%;
       -moz-flex-basis:25%;
            flex-basis:25%;
}
.flex-basis-33p{
    -webkit-flex-basis:33.33%;
       -moz-flex-basis:33.33%;
            flex-basis:33.33%;
}
.flex-basis-50p{
    -webkit-flex-basis:50%;
       -moz-flex-basis:50%;
            flex-basis:50%;
}

/*---------- Adjustments for IE ----------*/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .flex-basis-20p{
        max-width:20%;
    }
    .flex-basis-25p{
        max-width:25%;
    }
    .flex-basis-33p{
        max-width:33.33%;
    }
    .flex-basis-50p{
        max-width:50%;
    }
}

/*---------- ALIGNMENTS & JUSTIFICATIONS ----------*/

.colRowFlex.align-bottom{
    -webkit-align-items:flex-end;
       -moz-align-items:flex-end;
        -ms-align-items:flex-end;
            align-items:flex-end;
}
.colRowFlex.align-top{
    -webkit-align-items:flex-start;
       -moz-align-items:flex-start;
        -ms-align-items:flex-start;
            align-items:flex-start;
}
.flex-align-center{
    -webkit-align-items:center;
       -moz-align-items:center;
        -ms-align-items:center;
            align-items:center;
}
    .colRowFlex.align-bottom > *,
    .colRowFlex.align-top > *,
    .colRowFlex.flex-align-center > *{
        margin:0 !important;
    }

.colRowFlex.flex-space-around{
    -webkit-justify-content:space-around;
       -moz-justify-content:space-around;
            justify-content:space-around;
}
.flex-justify-center{
    -webkit-justify-content:center;
       -moz-justify-content:center;
            justify-content:center;
}
.flex-justify-right{
    -webkit-justify-content:flex-end;
       -moz-justify-content:flex-end;
            justify-content:flex-end;
}
.flex-justify-left{
    -webkit-justify-content:flex-start;
       -moz-justify-content:flex-start;
            justify-content:flex-start;
}

/*---------- MEDIA QUERIES ----------*/

@media only screen and (max-width:900px){
    .colRow:not(.noRespond) > .col{
        width:100% !important;
        float:none;
        padding:.5em 0;
    }
    .colRow:not(.noRespond),
    .colRowFlex:not(.noRespond){
        padding:0 1em !important;
    }
    .colRowFlex:not(.noRespond),
    .reverseCols:not(.noRespond){
        -webkit-flex-direction:column !important;
           -moz-flex-direction:column !important;
            -ms-flex-direction:column !important;
                flex-direction:column !important;
    }
        .colRowFlex:not(.noRespond) .colRowFlex.noRespond{
            -webkit-flex-direction:row !important;
               -moz-flex-direction:row !important;
                -ms-flex-direction:row !important;
                    flex-direction:row !important;
        }
        .colRowFlex:not(.noRespond) .colRowFlex:not(.noRespond){
            padding:0;
        }
    .colRowFlex:not(.noRespond) > [class*="col-flex"]{
        -webkit-flex-basis:auto;
        -moz-flex-basis:auto;
        -ms-flex-basis:auto;
        flex-basis:auto;
        padding:1em 0;
        width:100%;
    }
        .colRowFlex:not(.noRespond) .colRowFlex:not(.noRespond) > [class*="col-flex"]{
            padding:.5em 0;
        }
    .noPadding,
    .colRow.noPadding,
    .colRowFlex.noPadding,
    [class*="col-flex"].noPadding{
        padding:0 !important;
    }

}

/*---------- Adjustments for IE ----------*/
@media all and (-ms-high-contrast: none) and (max-width:900px),
(-ms-high-contrast: active) and (max-width:900px) {
    .colRowFlex:not(.noRespond){
        display:block;
    }
}