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

/*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.*/


/*//////////////////////////////////////////////////////*/
/*//====================----------====================//*/
/*//                     FLEX GRID                    //*/
/*//====================----------====================//*/
/*//////////////////////////////////////////////////////*/

/*==========----------==========*/
/*        GENERIC CLASSES       */
/*==========----------==========*/
.flex{
    display:-webkit-flex !important;
       display:-moz-flex !important;
        display:-ms-flex !important;
            display:flex !important;
}

/*==========----------==========*/
/*         ROW SETTINGS         */
/*==========----------==========*/
.colRowFlex{
    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-flex-direction:row;
       -moz-flex-direction:row;
        -ms-flex-direction:row;
            flex-direction:row;
        -webkit-justify-content: center;
           -moz-justify-content: center;
            -ms-justify-content: center;
                justify-content: center;
        -webkit-align-items: flex-start;
           -moz-align-items: flex-start;
            -ms-align-items: flex-start;
                align-items: flex-start;
}
.colRowFlex.noWrap{
    -webkit-flex-wrap:nowrap;
       -moz-flex-wrap:nowrap;
        -ms-flex-wrap:nowrap;
            flex-wrap:nowrap;
}
.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 SETTINGS        */
/*==========----------==========*/
[class*="col-flex"] {
    -webkit-flex: 1;
       -moz-flex: 1;
         -o-flex: 1;
            flex: 1;
    min-height:10px;
    padding: 0 1em;
    margin: auto;
    position: relative;
}
.variableCols > [class*="col-flex"] {
    -webkit-flex: 0 1 auto;
       -moz-flex: 0 1 auto;
         -o-flex: 0 1 auto;
            flex: 0 1 auto;
}
[class*="col-flex"]:first-child{
    padding-left:0;
}
[class*="col-flex"]:last-child{
    padding-right:0;
}
.flex-row-reverse [class*="col-flex"]:first-child{
    padding-left:1em;
    padding-right:0;
}
.flex-row-reverse [class*="col-flex"]:last-child{
    padding-left:0;
    padding-right:1em;
}
    [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;
    }

/*---------- FULL-WIDTH COLUMN ----------*/
.col-flex-full{
    width:100%;
    min-width:100%;
    margin:auto;
    padding:0 1em;
}

/*---------- 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-39p {
    -webkit-flex-basis: 39%;
    -moz-flex-basis: 39%;
    flex-basis: 39%;
}
.flex-basis-45p {
    -webkit-flex-basis: 45%;
    -moz-flex-basis: 45%;
    flex-basis: 45%;
}
.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,
.colRowFlex.flex-align-bottom{
    -webkit-align-items:flex-end;
       -moz-align-items:flex-end;
        -ms-align-items:flex-end;
            align-items:flex-end;
}
.colRowFlex.align-top,
.colRowFlex.flex-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.flex-space-around,
.colRowFlex.flex-justify-around{
    -webkit-justify-content:space-around;
       -moz-justify-content:space-around;
            justify-content:space-around;
}
.colRowFlex.flex-justify-between{
    -webkit-justify-content:space-between;
       -moz-justify-content:space-between;
            justify-content:space-between;
}
.colRowFlex.flex-justify-center{
    -webkit-justify-content:center;
       -moz-justify-content:center;
            justify-content:center;
}
.colRowFlex.flex-justify-right{
    -webkit-justify-content:flex-end;
       -moz-justify-content:flex-end;
            justify-content:flex-end;
}
.colRowFlex.flex-justify-left{
    -webkit-justify-content:flex-start;
       -moz-justify-content:flex-start;
            justify-content:flex-start;
}

.colRowFlex[class*="flex-align"] > *,
.colRowFlex[class*="flex-justify"] > * {
    margin: 0 !important;
}

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

@media only screen and (max-width:1250px){
    .colRow:not(.noRespond) > .col{
        width:100% !important;
        float:none;
        padding:.5em 0;
    }
    .colRow:not(.noRespond),
    .colRowFlex:not(.noRespond){
        display:block;
        padding:0 !important;
    }
    .reverseCols:not(.noRespond){
        -webkit-flex-direction:column-reverse !important;
           -moz-flex-direction:column-reverse !important;
            -ms-flex-direction:column-reverse !important;
                flex-direction:column-reverse !important;
    }
        .colRowFlex:not(.noRespond) .colRowFlex.noRespond{
            -webkit-flex-direction:row;
               -moz-flex-direction:row;
                -ms-flex-direction:row;
                    flex-direction:row;
        }
        .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;
    }
}