@charset "UTF-8";
/* CSS Document */
/* Flex */


/* Flex Rule */
.flex{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
/* Flex Rule >>> Flex Row */
.flex-row{
    width: 100%;
    flex-flow: row wrap;
    justify-content: space-between;
    /*background-color: rgba(255,0,0,0.1);*/
}


/* Flex Box */
.flex-box{
    height: auto;
    display: block;
    margin-bottom: 35px;
    /*background-color: rgba(0,150,255,0.1);*/
}
/* Flex Box >>> Flex Columns */
.column-one{
    width: 100%;
    flex-basis: 100%;
    /*background-color: rgba(255,255,18,0.3);*/
}
.column-two{
    width: 48%;
    flex-basis: 48%;
    /*background-color: rgba(0,205,255,0.1);*/
}
.column-two:nth-child(1){order: 1;}
.column-two:nth-child(2){order: 2;}

.column-three{
    width: 31.3%;
    flex-basis: 31.33%;
    /*background-color: rgba(0,25,255,0.1);*/
}
.column-three:nth-child(1){order: 1;}
.column-three:nth-child(2){order: 2;}
.column-three:nth-child(3){order: 3;}

.column-four{
    width: 23%;
    flex-basis: 23%;
    /*background-color: rgba(205,85,133,0.1);*/
}
.column-four:nth-child(1){order: 1;}
.column-four:nth-child(2){order: 2;}
.column-four:nth-child(3){order: 3;}
.column-four:nth-child(4){order: 4;}

.column-five{
    width: 18%;
    flex-basis: 18%;
    /*background-color: rgba(255,25,180,0.1);*/
}
.column-five:nth-child(1){order: 1;}
.column-five:nth-child(2){order: 2;}
.column-five:nth-child(3){order: 3;}
.column-five:nth-child(4){order: 4;}
.column-five:nth-child(5){order: 5;}

.column-six{
    width: 14.66%;
    flex-basis: 14.66%;
    /*background-color: rgba(33,205,180,0.1);*/
}
.column-six:nth-child(1){order: 1;}
.column-six:nth-child(2){order: 2;}
.column-six:nth-child(3){order: 3;}
.column-six:nth-child(4){order: 4;}
.column-six:nth-child(5){order: 5;}
.column-six:nth-child(6){order: 6;}
/* Styles: 1080px */
@media only screen and (max-width: 1080px){
    /* Flex Box */
    .flex-box{
        margin-bottom: 32px;
    }
}
/* Styles: 960px */
@media only screen and (max-width: 960px){
    /* Flex Box */
    .flex-box{
        margin-bottom: 30px;
    }
    /* Flex Column */
    .column-two{
        width: 100%;
        flex-basis: 100%;
    }
    .column-three,.column-four,.column-five{
        width: 48%;
        flex-basis: 48%;
    }
    .column-six{
        width: 31.33%;
        flex-basis: 31.33%;
    }
}
/* Styles: 450px */
@media only screen and (max-width: 450px){ 
    /* Flex Box */
    .flex-box{
        margin-bottom: 28px;
    }
    /* Flex Column */
    .column-three,.column-four,.column-five{
        width: 100%;
        flex-basis: 100%;
    }
    .column-six{
        width: 48%;
        flex-basis: 48%;
    }
}