/* 
Author: DevSolns
Twitter: @DevSolns
*/

/*  =======
Table of Contents
    ======= */

/* 
! Flex
! Rows
! Columns
! Mobile Columns
! Tablet Columns
! Landscape Columns
! Laptop Columns
! Desktop Columns
 */

/* Flex */

.flex-start-top {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    height: 100%;
}

.flex-start-center {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 100%;
}

.flex-start-bottom {
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    height: 100%;
}

.flex-center-top {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    height: 100%;
}

.flex-center-center {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.flex-center-bottom {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height: 100%;
}

.flex-end-top {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    height: 100%;
}

.flex-end-center {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
}

.flex-end-bottom {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    height: 100%;
}

.flex-x-between {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.flex-x-around {
    display: flex;
    justify-content: space-around;
    width: 100%;
}

.flex-x-evenly {
    display: flex;
    justify-content: space-evenly;
    width: 100%;
}

.flex-y-between {
    display: flex;
    align-content: space-between;
    height: 100%;
}

.flex-y-around {
    display: flex;
    align-content: space-around;
    width: 100%;
}


/* Rows */

.row {
    display: flex;
    flex-wrap: wrap;
}

.row>* {
    box-sizing: border-box;
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
}


/* Columns */

.col {
    flex: 1 0 0%;
}

.col-auto {
    flex: 0 0 auto;
    width: auto
}

.col-1 {
    flex: 0 0 auto;
    width: 8.33333333%
}

.col-2 {
    flex: 0 0 auto;
    width: 16.66666667%
}

.col-3 {
    flex: 0 0 auto;
    width: 25%
}

.col-4 {
    flex: 0 0 auto;
    width: 33.33333333%
}

.col-5 {
    flex: 0 0 auto;
    width: 41.66666667%
}

.col-6 {
    flex: 0 0 auto;
    width: 50%
}

.col-7 {
    flex: 0 0 auto;
    width: 58.33333333%
}

.col-8 {
    flex: 0 0 auto;
    width: 66.66666667%
}

.col-9 {
    flex: 0 0 auto;
    width: 75%
}

.col-10 {
    flex: 0 0 auto;
    width: 83.33333333%
}

.col-11 {
    flex: 0 0 auto;
    width: 91.66666667%
}

.col-12 {
    flex: 0 0 auto;
    width: 100%
}

/* Mobile Columns */

@media (max-width:600px) {

    .col-m {
        flex: 1 0 0%;
    }

    .col-m-auto {
        flex: 0 0 auto;
        width: auto
    }

    .col-m-1 {
        flex: 0 0 auto;
        width: 8.33333333%
    }

    .col-m-2 {
        flex: 0 0 auto;
        width: 16.66666667%
    }

    .col-m-3 {
        flex: 0 0 auto;
        width: 25%
    }

    .col-m-4 {
        flex: 0 0 auto;
        width: 33.33333333%
    }

    .col-m-5 {
        flex: 0 0 auto;
        width: 41.66666667%
    }

    .col-m-6 {
        flex: 0 0 auto;
        width: 50%
    }

    .col-m-7 {
        flex: 0 0 auto;
        width: 58.33333333%
    }

    .col-m-8 {
        flex: 0 0 auto;
        width: 66.66666667%
    }

    .col-m-9 {
        flex: 0 0 auto;
        width: 75%
    }

    .col-m-10 {
        flex: 0 0 auto;
        width: 83.33333333%
    }

    .col-m-11 {
        flex: 0 0 auto;
        width: 91.66666667%
    }

    .col-m-12 {
        flex: 0 0 auto;
        width: 100%
    }


}

/* Tablet Columns */

@media (max-width:900px) and (min-width:600px) {

    .col-tb {
        flex: 1 0 0%;
    }

    .col-tb-auto {
        flex: 0 0 auto;
        width: auto
    }

    .col-tb-1 {
        flex: 0 0 auto;
        width: 8.33333333%
    }

    .col-tb-2 {
        flex: 0 0 auto;
        width: 16.66666667%
    }

    .col-tb-3 {
        flex: 0 0 auto;
        width: 25%
    }

    .col-tb-4 {
        flex: 0 0 auto;
        width: 33.33333333%
    }

    .col-tb-5 {
        flex: 0 0 auto;
        width: 41.66666667%
    }

    .col-tb-6 {
        flex: 0 0 auto;
        width: 50%
    }

    .col-tb-7 {
        flex: 0 0 auto;
        width: 58.33333333%
    }

    .col-tb-8 {
        flex: 0 0 auto;
        width: 66.66666667%
    }

    .col-tb-9 {
        flex: 0 0 auto;
        width: 75%
    }

    .col-tb-10 {
        flex: 0 0 auto;
        width: 83.33333333%
    }

    .col-tb-11 {
        flex: 0 0 auto;
        width: 91.66666667%
    }

    .col-tb-12 {
        flex: 0 0 auto;
        width: 100%
    }

}

/* Landscape Columns */

@media (max-width:1200px) and (min-width:900px) {

    .col-ls {
        flex: 1 0 0%;
    }

    .col-ls-auto {
        flex: 0 0 auto;
        width: auto
    }

    .col-ls-1 {
        flex: 0 0 auto;
        width: 8.33333333%
    }

    .col-ls-2 {
        flex: 0 0 auto;
        width: 16.66666667%
    }

    .col-ls-3 {
        flex: 0 0 auto;
        width: 25%
    }

    .col-ls-4 {
        flex: 0 0 auto;
        width: 33.33333333%
    }

    .col-ls-5 {
        flex: 0 0 auto;
        width: 41.66666667%
    }

    .col-ls-6 {
        flex: 0 0 auto;
        width: 50%
    }

    .col-ls-7 {
        flex: 0 0 auto;
        width: 58.33333333%
    }

    .col-ls-8 {
        flex: 0 0 auto;
        width: 66.66666667%
    }

    .col-ls-9 {
        flex: 0 0 auto;
        width: 75%
    }

    .col-ls-10 {
        flex: 0 0 auto;
        width: 83.33333333%
    }

    .col-ls-11 {
        flex: 0 0 auto;
        width: 91.66666667%
    }

    .col-ls-12 {
        flex: 0 0 auto;
        width: 100%
    }


}

/* Laptop Columns */

@media (max-width:1440px) and (min-width:1200px) {

    .col-lt {
        flex: 1 0 0%;
    }

    .col-lt-auto {
        flex: 0 0 auto;
        width: auto
    }

    .col-lt-1 {
        flex: 0 0 auto;
        width: 8.33333333%
    }

    .col-lt-2 {
        flex: 0 0 auto;
        width: 16.66666667%
    }

    .col-lt-3 {
        flex: 0 0 auto;
        width: 25%
    }

    .col-lt-4 {
        flex: 0 0 auto;
        width: 33.33333333%
    }

    .col-lt-5 {
        flex: 0 0 auto;
        width: 41.66666667%
    }

    .col-lt-6 {
        flex: 0 0 auto;
        width: 50%
    }

    .col-lt-7 {
        flex: 0 0 auto;
        width: 58.33333333%
    }

    .col-lt-8 {
        flex: 0 0 auto;
        width: 66.66666667%
    }

    .col-lt-9 {
        flex: 0 0 auto;
        width: 75%
    }

    .col-lt-10 {
        flex: 0 0 auto;
        width: 83.33333333%
    }

    .col-lt-11 {
        flex: 0 0 auto;
        width: 91.66666667%
    }

    .col-lt-12 {
        flex: 0 0 auto;
        width: 100%
    }


}

/* Desktop Columns */

@media (min-width:1441px) {

    .col-dt {
        flex: 1 0 0%;
    }

    .col-dt-auto {
        flex: 0 0 auto;
        width: auto
    }

    .col-dt-1 {
        flex: 0 0 auto;
        width: 8.33333333%
    }

    .col-dt-2 {
        flex: 0 0 auto;
        width: 16.66666667%
    }

    .col-dt-3 {
        flex: 0 0 auto;
        width: 25%
    }

    .col-dt-4 {
        flex: 0 0 auto;
        width: 33.33333333%
    }

    .col-dt-5 {
        flex: 0 0 auto;
        width: 41.66666667%
    }

    .col-dt-6 {
        flex: 0 0 auto;
        width: 50%
    }

    .col-dt-7 {
        flex: 0 0 auto;
        width: 58.33333333%
    }

    .col-dt-8 {
        flex: 0 0 auto;
        width: 66.66666667%
    }

    .col-dt-9 {
        flex: 0 0 auto;
        width: 75%
    }

    .col-dt-10 {
        flex: 0 0 auto;
        width: 83.33333333%
    }

    .col-dt-11 {
        flex: 0 0 auto;
        width: 91.66666667%
    }

    .col-dt-12 {
        flex: 0 0 auto;
        width: 100%
    }
}