/** FLEXBOX things **/

.flex{
    display: flex; 
}

.row{
	flex-direction: row; 
}

.col{
	flex-direction: column; 
}

.rev-row{
    flex-direction: row-reverse;
}

.rev-col{
    flex-direction: column-reverse;
}

.wrap{
    flex-wrap: wrap;
}

.rev-wrap{
    flex-wrap: wrap-reverse;
}

.stretch{
    align-self: stretch;
}
/* h for horizontally, v for vertically*/

.h-start{
    justify-content: flex-start;
}

.h-end{
    justify-content: flex-end;
}

.h-center{
    justify-content: center;
}

.h-sb{
    justify-content: space-between;
}


.v-start{
    align-items: flex-start;
}

.v-end{
    align-items: flex-end;
}

.v-center{
    align-items: center;
}

.v-sb{
    align-items: space-between;
}

.gap-0{
    gap: 0px
}

.gap-2{
    gap: 2px;
}

.gap-4{
    gap: 4px;
}

.gap-6{
    gap: 6px;
}


.gap-8{
    gap: 8px;
}

.gap-12{
    gap: 12px;
}

.gap-16{
    gap: 16px;
}

.gap-24{
    gap: 24px;
}


.gap-30{
    gap: 32px
}

.gap-32{
    gap: 32px;
}

.gap-40{
    gap: 40px;
}

.gap-48{
    gap: 48px;
}

.gap-56{
    gap: 56px;
}

.gap-64{
    gap: 64px;
}

.gap-80{
    gap: 80px;
}

@media all and (max-width: 1199.98px) {
	.lg-gap-0{
        gap: 0px
    }
    
    .lg-col{
        flex-direction: column; 
    }

    .lg-row{
        flex-direction: row;
    }

    .lg-rev-row{
        flex-direction: row-reverse;
    }
    
    .lg-rev-col{
        flex-direction: column-reverse;
    }

    .lg-h-start{
        justify-content: flex-start;
    }
    
    .lg-h-end{
        justify-content: flex-end;
    }

    .lg-wrap{
        flex-wrap: wrap;
    }
    .lg-rev-wrap{
        flex-wrap: wrap-reverse;
    }
    
    .lg-h-center{
        justify-content: center;
    }
    
    .lg-h-sb{
        justify-content: space-between;
    }
    
    .lg-v-start{
        align-items: flex-start;
    }
    
    .lg-v-end{
        align-items: flex-end;
    }
    
    .lg-v-center{
        align-items: center;
    }
    
    .lg-v-sb{
        align-items: space-between;
    }

    .lg-gap-8{
        gap: 8px;
    }

    .lg-gap-12{
        gap: 12px;
    }
    
    .lg-gap-16{
        gap: 16px;
    }
    
    .lg-gap-24{
        gap: 24px;
    }
    

	.lg-gap-30{
		gap: 32px
	}

    .lg-gap-32{
        gap: 32px;
    }
    
    .lg-gap-40{
        gap: 40px;
    }
    
    .lg-gap-48{
        gap: 48px;
    }
    
    .lg-gap-56{
        gap: 56px;
    }
    
    .lg-gap-64{
        gap: 64px;
    }
}

/* tablet */
@media (max-width: 991.98px) {
    .md-gap-0{
        gap: 0px
    }
    
    .md-col{
        flex-direction: column; 
    }

    .md-row{
        flex-direction: row;
    }

    .md-rev-row{
        flex-direction: row-reverse;
    }
    
    .md-rev-col{
        flex-direction: column-reverse;
    }

    .md-h-start{
        justify-content: flex-start;
    }
    
    .md-h-end{
        justify-content: flex-end;
    }

    .md-wrap{
        flex-wrap: wrap;
    }
    .md-rev-wrap{
        flex-wrap: wrap-reverse;
    }
    
    .md-h-center{
        justify-content: center;
    }
    
    .md-h-sb{
        justify-content: space-between;
    }
    
    .md-v-start{
        align-items: flex-start;
    }
    
    .md-v-end{
        align-items: flex-end;
    }
    
    .md-v-center{
        align-items: center;
    }
    
    .md-v-sb{
        align-items: space-between;
    }

    .md-gap-8{
        gap: 8px;
    }

    .md-gap-12{
        gap: 12px;
    }
    
    .md-gap-16{
        gap: 16px;
    }
    
    .md-gap-24{
        gap: 24px;
    }
    

	.md-gap-30{
		gap: 32px
	}

    .md-gap-32{
        gap: 32px;
    }
    
    .md-gap-40{
        gap: 40px;
    }
    
    .md-gap-48{
        gap: 48px;
    }
    
    .md-gap-56{
        gap: 56px;
    }
    
    .md-gap-64{
        gap: 64px;
    }
    
}



/* mobile */
@media (max-width: 767.98px) {
    .sm-col{
        flex-direction: column; 
    }

    .sm-row{
        flex-direction: row;
    }    

    .sm-rev-row{
        flex-direction: row-reverse;
    }
    
    .sm-rev-col{
        flex-direction: column-reverse;
    }

    .sm-h-start{
        justify-content: flex-start;
    }
    
    .sm-h-end{
        justify-content: flex-end;
    }
    
    .sm-h-center{
        justify-content: center;
    }
    
    .sm-h-sb{
        justify-content: space-between;
    }
    
    
    .sm-v-start{
        align-items: flex-start;
    }
    
    .sm-v-end{
        align-items: flex-end;
    }
    
    .sm-v-center{
        align-items: center;
    }
    
    .sm-v-sb{
        align-items: space-between;
    }

    .sm-wrap{
        flex-wrap: wrap;
    }
    .sm-rev-wrap{
        flex-wrap: wrap-reverse;
    }

    .sm-not-stretch{
        align-self: center;
    }

    .sm-gap-0{
        gap: 0px
    }
    
    .sm-gap-8{
        gap: 8px;
    }

    .sm-gap-12{
        gap: 12px;
    }

    .sm-gap-16{
        gap: 16px;
    }
    
    .sm-gap-24{
        gap: 24px;
    }
    
    .sm-gap-30{
		gap: 30px
	}

    .sm-gap-32{
        gap: 32px;
    }
    
    .sm-gap-40{
        gap: 40px;
    }
    
    .sm-gap-48{
        gap: 48px;
    }
    
    .sm-gap-56{
        gap: 56px;
    }
    
    .sm-gap-64{
        gap: 64px;
    }
}




/* mobile */
@media (max-width: 575.98px) {
    .xs-col{
        flex-direction: column; 
    }

    .xs-row{
        flex-direction: row;
    }    

    .xs-rev-row{
        flex-direction: row-reverse;
    }
    
    .xs-rev-col{
        flex-direction: column-reverse;
    }

    .xs-h-start{
        justify-content: flex-start;
    }
    
    .xs-h-end{
        justify-content: flex-end;
    }
    
    .xs-h-center{
        justify-content: center;
    }
    
    .xs-h-sb{
        justify-content: space-between;
    }
    
    
    .xs-v-start{
        align-items: flex-start;
    }
    
    .xs-v-end{
        align-items: flex-end;
    }
    
    .xs-v-center{
        align-items: center;
    }
    
    .xs-v-sb{
        align-items: space-between;
    }

    .xs-wrap{
        flex-wrap: wrap;
    }
    
    .xs-rev-wrap{
        flex-wrap: wrap-reverse;
    }

    .xs-gap-0{
        gap: 0px
    }
    
    .xs-gap-8{
        gap: 8px;
    }

    .xs-gap-12{
        gap: 12px;
    }

    .xs-gap-16{
        gap: 16px;
    }
    
    .xs-gap-24{
        gap: 24px;
    }
    
    .xs-gap-30{
		gap: 30px
	}

    .xs-gap-32{
        gap: 32px;
    }
    
    .xs-gap-40{
        gap: 40px;
    }
    
    .xs-gap-48{
        gap: 48px;
    }
    
    .xs-gap-56{
        gap: 56px;
    }
    
    .xs-gap-64{
        gap: 64px;
    }
}

/* flex-items */

.item-6{
    flex-basis: 8%;
    flex-grow: 1;
}
.item-5{
    flex-basis: 12%;
    flex-grow: 1;
}
.item-4{
    flex-basis: 19%;
    flex-grow: 1;
}
.item-3{
    flex-basis: 28%;
    flex-grow: 1;
}
.item-2{
    flex-basis: 45%;
    flex-grow: 1;
}

@media (max-width: 1199.98px) {
    .lg-item-4{
        flex-basis: 21%;
        flex-grow: 1;
    }
    .lg-item-3{
        flex-basis: 22%;
        flex-grow: 1;
    }
    .lg-item-2{
        flex-basis: 45%;
        flex-grow: 1;
    }
}

@media (max-width: 991.98px) {
    .md-item-4{
        flex-basis: 21%;
        flex-grow: 1;
    }
    .md-item-3{
        flex-basis: 22%;
        flex-grow: 1;
    }
    .md-item-2{
        flex-basis: 45%;
        flex-grow: 1;
    }
    .md-item-1{
        flex-basis: 55%;
        flex-grow: 1;
    }
}

@media (max-width: 767.98px) {
    .sm-item-4{
        flex-basis: 21%;
        flex-grow: 1;
    }
    .sm-item-3{
        flex-basis: 22%;
        flex-grow: 1;
    }
    .sm-item-2{
        flex-basis: 45%;
        flex-grow: 1;
    }
    .sm-item-1{
        flex-basis: 55%;
        flex-grow: 1;
    }
}

@media (max-width: 575.98px) {
    .xs-item-4{
        flex-basis: 21%;
        flex-grow: 1;
    }
    .xs-item-3{
        flex-basis: 22%;
        flex-grow: 1;
    }
    .xs-item-2{
        flex-basis: 45%;
        flex-grow: 1;
    }
    .xs-item-1{
        flex-basis: 55%;
        flex-grow: 1;
    }
}