/*--------------------------------------------------------------------------*\
	Display flex in column
\*--------------------------------------------------------------------------*/

.col {
    /*box*/
    /* overrides the display:block of center */
    display: flex !important;
    flex-direction: column;
}

/*--------------------------------------------------------------------------*\
	    Horizontal alignment
\*--------------------------------------------------------------------------*/

.col.left {
    /*box*/
    align-items: flex-start !important;
}

.col.between {
    /*box*/
    justify-content: space-between !important;
}

.col.around {
    /*box*/
    justify-content: space-around !important;
}

.col.center {
    /*box*/
    align-items: center !important;
}

.col.right {
    /*box*/
    align-items: flex-end !important;
}

/*--------------------------------------------------------------------------*\
	    Vertical alignment
\*--------------------------------------------------------------------------*/

.col.top {
    /*box*/
    justify-content: flex-start !important;
}

.col.middle {
    /*box*/
    justify-content: center !important;
}

.col.bottom {
    /*box*/
    justify-content: flex-end !important;
}

/*--------------------------------------------------------------------------*\
        Classes used for the children
        of the .row class to define the width
\*--------------------------------------------------------------------------*/

/*--------------------------------------------------------------------------*\
		    General
\*--------------------------------------------------------------------------*/

.col-1 {
    /*box*/
    width: 8.33%;
}

.col-2 {
    /*box*/
    width: 16.67%;
}

.col-3 {
    /*box*/
    width: 25%;
}

.col-4 {
    /*box*/
    width: 33.33%;
}

.col-5 {
    /*box*/
    width: 41.67%;
}

.col-6 {
    /*box*/
    width: 50%;
}

.col-7 {
    /*box*/
    width: 58.33%;
}

.col-8 {
    /*box*/
    width: 66.67%;
}

.col-9 {
    /*box*/
    width: 75%;
}

.col-10 {
    /*box*/
    width: 83.33%;
}

.col-11 {
    /*box*/
    width: 91.67%;
}

.col-12 {
    /*box*/
    width: 100%;
}

/*--------------------------------------------------------------------------*\
		    Extra large
\*--------------------------------------------------------------------------*/

@media (min-width:1200px) {

    .col-xl-1 {
        /*box*/
        width: 8.33% !important;
    }

    .col-xl-2 {
        /*box*/
        width: 16.67% !important;
    }

    .col-xl-3 {
        /*box*/
        width: 25% !important;
    }

    .col-xl-4 {
        /*box*/
        width: 33.33% !important;
    }

    .col-xl-5 {
        /*box*/
        width: 41.67% !important;
    }

    .col-xl-6 {
        /*box*/
        width: 50% !important;
    }

    .col-xl-7 {
        /*box*/
        width: 58.33% !important;
    }

    .col-xl-8 {
        /*box*/
        width: 66.67% !important;
    }

    .col-xl-9 {
        /*box*/
        width: 75% !important;
    }

    .col-xl-10 {
        /*box*/
        width: 83.33% !important;
    }

    .col-xl-11 {
        /*box*/
        width: 91.67% !important;
    }

    .col-xl-12 {
        /*box*/
        width: 100% !important;
    }

}

/*--------------------------------------------------------------------------*\
            Large
\*--------------------------------------------------------------------------*/

@media (min-width:992px) {

    .col-lg-1 {
        /*box*/
        width: 8.33% !important;
    }

    .col-lg-2 {
        /*box*/
        width: 16.67% !important;
    }

    .col-lg-3 {
        /*box*/
        width: 25% !important;
    }

    .col-lg-4 {
        /*box*/
        width: 33.33% !important;
    }

    .col-lg-5 {
        /*box*/
        width: 41.67% !important;
    }

    .col-lg-6 {
        /*box*/
        width: 50% !important;
    }

    .col-lg-7 {
        /*box*/
        width: 58.33% !important;
    }

    .col-lg-8 {
        /*box*/
        width: 66.67% !important;
    }

    .col-lg-9 {
        /*box*/
        width: 75% !important;
    }

    .col-lg-10 {
        /*box*/
        width: 83.33% !important;
    }

    .col-lg-11 {
        /*box*/
        width: 91.67% !important;
    }

    .col-lg-12 {
        /*box*/
        width: 100% !important;
    }

}

/*--------------------------------------------------------------------------*\
            Medium
\*--------------------------------------------------------------------------*/

@media (min-width:768px) {

    .col-md-1 {
        /*box*/
        width: 8.33% !important;
    }

    .col-md-2 {
        /*box*/
        width: 16.67% !important;
    }

    .col-md-3 {
        /*box*/
        width: 25% !important;
    }

    .col-md-4 {
        /*box*/
        width: 33.33% !important;
    }

    .col-md-5 {
        /*box*/
        width: 41.67% !important;
    }

    .col-md-6 {
        /*box*/
        width: 50% !important;
    }

    .col-md-7 {
        /*box*/
        width: 58.33% !important;
    }

    .col-md-8 {
        /*box*/
        width: 66.67% !important;
    }

    .col-md-9 {
        /*box*/
        width: 75% !important;
    }

    .col-md-10 {
        /*box*/
        width: 83.33% !important;
    }

    .col-md-11 {
        /*box*/
        width: 91.67% !important;
    }

    .col-md-12 {
        /*box*/
        width: 100% !important;
    }

}

/*--------------------------------------------------------------------------*\
            Small
\*--------------------------------------------------------------------------*/

@media (min-width:576px) {

    .col-sm-1 {
        /*box*/
        width: 8.33% !important;
    }

    .col-sm-2 {
        /*box*/
        width: 16.67% !important;
    }

    .col-sm-3 {
        /*box*/
        width: 25% !important;
    }

    .col-sm-4 {
        /*box*/
        width: 33.33% !important;
    }

    .col-sm-5 {
        /*box*/
        width: 41.67% !important;
    }

    .col-sm-6 {
        /*box*/
        width: 50% !important;
    }

    .col-sm-7 {
        /*box*/
        width: 58.33% !important;
    }

    .col-sm-8 {
        /*box*/
        width: 66.67% !important;
    }

    .col-sm-9 {
        /*box*/
        width: 75% !important;
    }

    .col-sm-10 {
        /*box*/
        width: 83.33% !important;
    }

    .col-sm-11 {
        /*box*/
        width: 91.67% !important;
    }

    .col-sm-12 {
        /*box*/
        width: 100% !important;
    }

}