/*
 ________  __       __       __    __  _____      __
|   __   ||  |     /  \     |  |  |  ||  __ \    |  |
|  |__|  ||  |    /    \    |  |\ |  || |__) |   |  |
|   _____||  |   /  /\  \   |  | \|  ||      /   |  |____ ___      ___
|  |      |  |  /  /__\  \  |  |\ |  ||  __  \   |  ___  |\  \    /  /
|  |      |  | /  /    \  \ |  | \|  || |__)  |_ | |___| | \  \__/  /
|__|      |__|/__/      \__\|__|  |__||_______(_)|_______|  \      /
                                                            _|    /
                                                           |     /
                                                           |____/
*/
/* v.1.4.0 */
/* FLEX GRID ---------------------- */
.flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.flex > * {
    box-sizing: border-box;
    margin-bottom: var(--fm);
}

/* last row fix */
.flex.last-row-fix>div:empty {
    height: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 0;
    line-height: 0;
    background: transparent;
    opacity: 0;
}

/* flex margins */
:root { --fm: 30px }
.fm0 { --fm: 0 }
[class^="fm"], [class*=" fm"] { --fm: 0 } /* reset */
.fm5 { --fm: 5px }
.fm10 { --fm: 10px }
.fm15 { --fm: 15px }
.fm20 { --fm: 20px }
.fm25 { --fm: 25px }
.fm30 { --fm: 30px }
.fm35 { --fm: 35px }
.fm40 { --fm: 40px }
.fm45 { --fm: 45px }
.fm50 { --fm: 50px }
.fm55 { --fm: 55px }
.fm60 { --fm: 60px }
.fm65 { --fm: 65px }
.fm70 { --fm: 70px }
.fm75 { --fm: 75px }
.fm80 { --fm: 80px }
.fm85 { --fm: 85px }
.fm90 { --fm: 90px }
.fm95 { --fm: 95px }
.fm100 { --fm: 100px }
.no-margin { --fm: 0 }

/* justify content */
.flex.jcc { justify-content: center; }
.flex.jcfs { justify-content: flex-start; }
.flex.jcfe { justify-content: flex-end; }
.flex.jcsb { justify-content: space-between; }
.flex.jcsa { justify-content: space-around; }
.flex.jcse { justify-content: space-evenly; }

/* align content */
.flex.ac { align-content: center; }
.flex.afs { align-content: flex-start; }
.flex.afe { align-content: flex-end; }
.flex.as { align-content: stretch; }
.flex.asb { align-content: space-between; }
.flex.asa { align-content: space-around; }

/* align items */
.aic { align-items: center; }
.ais { align-items: stretch; }
.aib { align-items: baseline; }
.aife { align-items: flex-end; }
.aifs { align-items: flex-start; }

/* flex direction */
.flex.row { flex-direction: row; }
.flex.row-r { flex-direction: row-reverse; }
.flex.col { flex-direction: column; }
.flex.col-r { flex-direction: column-reverse; }

/* flex grow/shrink */
.flex-grow-0 { flex-grow: 0; }
.flex-grow-1 { flex-grow: 1; }
.flex-grow-2 { flex-grow: 2; }
.flex-grow-3 { flex-grow: 3; }

.flex-shrink-0 { flex-shrink: 0; }
.flex-shrink-1 { flex-shrink: 1; }
.flex-shrink-2 { flex-shrink: 2; }

/* order */
.order-first { order: -1; }
.order-0 { order: 0; }
.order-1 { order: 1; }
.order-2 { order: 2; }
.order-3 { order: 3; }
.order-4 { order: 4; }
.order-5 { order: 5; }
.order-last { order: 999; }

/* row break */
.flex .break {
    flex-basis: 100%;
    height: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 0;
    line-height: 0;
}

/* blocks */
.flex .block10 { flex-basis: calc(10% - var(--fm) * 0.9) }
.flex .block16 { flex-basis: calc(16.666% - var(--fm) * 0.8333) }
.flex .block20 { flex-basis: calc(20% - var(--fm) * 0.8) }
.flex .block25 { flex-basis: calc(25% - var(--fm) * 0.75) }
.flex .block30 { flex-basis: calc(30% - var(--fm) * 0.6667) }
.flex .block33 { flex-basis: calc(33.333% - var(--fm) * 0.6667) }
.flex .block40 { flex-basis: calc(40% - var(--fm) * 0.6) }
.flex .block45 { flex-basis: calc(45% - var(--fm) * 0.55) }
.flex .block50 { flex-basis: calc(50% - var(--fm) * 0.5) }
.flex .block60 { flex-basis: calc(60% - var(--fm) * 0.4) }
.flex .block66 { flex-basis: calc(66.666% - var(--fm) * 0.3333) }
.flex .block70 { flex-basis: calc(70% - var(--fm) * 0.3) }
.flex .block75 { flex-basis: calc(75% - var(--fm) * 0.25) }
.flex .block80 { flex-basis: calc(80% - var(--fm) * 0.2) }
.flex .block90 { flex-basis: calc(90% - var(--fm) * 0.1) }
.flex .block100 { flex-basis: 100% }

/* xxl (1440px) */
@media all and (max-width: 1440px) {
    .xxl-fm0 { --fm: 0 }
    .xxl-fm5 { --fm: 5px }
    .xxl-fm10 { --fm: 10px }
    .xxl-fm15 { --fm: 15px }
    .xxl-fm20 { --fm: 20px }
    .xxl-fm25 { --fm: 25px }
    .xxl-fm30 { --fm: 30px }
    .xxl-fm35 { --fm: 35px }
    .xxl-fm40 { --fm: 40px }
    .xxl-fm45 { --fm: 45px }
    .xxl-fm50 { --fm: 50px }
    .xxl-fm55 { --fm: 55px }
    .xxl-fm60 { --fm: 60px }
    .xxl-fm65 { --fm: 65px }
    .xxl-fm70 { --fm: 70px }
    .xxl-fm75 { --fm: 75px }
    .xxl-fm80 { --fm: 80px }
    .xxl-fm85 { --fm: 85px }
    .xxl-fm90 { --fm: 90px }
    .xxl-fm95 { --fm: 95px }
    .xxl-fm100 { --fm: 100px }
    .xxl-no-margin { --fm: 0 }
    
    .flex .xxl-block10 { flex-basis: calc(10% - var(--fm) * 0.9) }
    .flex .xxl-block16 { flex-basis: calc(16.666% - var(--fm) * 0.8333) }
    .flex .xxl-block20 { flex-basis: calc(20% - var(--fm) * 0.8) }
    .flex .xxl-block25 { flex-basis: calc(25% - var(--fm) * 0.75) }
    .flex .xxl-block30 { flex-basis: calc(30% - var(--fm) * 0.6667) }
    .flex .xxl-block33 { flex-basis: calc(33.333% - var(--fm) * 0.6667) }
    .flex .xxl-block40 { flex-basis: calc(40% - var(--fm) * 0.6) }
    .flex .xxl-block45 { flex-basis: calc(45% - var(--fm) * 0.55) }
    .flex .xxl-block50 { flex-basis: calc(50% - var(--fm) * 0.5) }
    .flex .xxl-block60 { flex-basis: calc(60% - var(--fm) * 0.4) }
    .flex .xxl-block66 { flex-basis: calc(66.666% - var(--fm) * 0.3333) }
    .flex .xxl-block70 { flex-basis: calc(70% - var(--fm) * 0.3) }
    .flex .xxl-block75 { flex-basis: calc(75% - var(--fm) * 0.25) }
    .flex .xxl-block80 { flex-basis: calc(80% - var(--fm) * 0.2) }
    .flex .xxl-block90 { flex-basis: calc(90% - var(--fm) * 0.1) }
    .flex .xxl-block100 { flex-basis: 100% }
    
    .xxl-order-first { order: -1; }
    .xxl-order-0 { order: 0; }
    .xxl-order-1 { order: 1; }
    .xxl-order-2 { order: 2; }
    .xxl-order-3 { order: 3; }
    .xxl-order-4 { order: 4; }
    .xxl-order-5 { order: 5; }
    .xxl-order-last { order: 999; }
    
    .xxl-flex-grow-0 { flex-grow: 0; }
    .xxl-flex-grow-1 { flex-grow: 1; }
    .xxl-flex-grow-2 { flex-grow: 2; }
    .xxl-flex-grow-3 { flex-grow: 3; }
    
    .xxl-flex-shrink-0 { flex-shrink: 0; }
    .xxl-flex-shrink-1 { flex-shrink: 1; }
    .xxl-flex-shrink-2 { flex-shrink: 2; }
    
    .xxl-row { flex-direction: row; }
    .xxl-row-r { flex-direction: row-reverse; }
    .xxl-col { flex-direction: column; }
    .xxl-col-r { flex-direction: column-reverse; }
} 

/* xl (1200px) */
@media all and (max-width: 1200px) {
    .xl-fm0 { --fm: 0 }
    .xl-fm5 { --fm: 5px }
    .xl-fm10 { --fm: 10px }
    .xl-fm15 { --fm: 15px }
    .xl-fm20 { --fm: 20px }
    .xl-fm25 { --fm: 25px }
    .xl-fm30 { --fm: 30px }
    .xl-fm35 { --fm: 35px }
    .xl-fm40 { --fm: 40px }
    .xl-fm45 { --fm: 45px }
    .xl-fm50 { --fm: 50px }
    .xl-fm55 { --fm: 55px }
    .xl-fm60 { --fm: 60px }
    .xl-fm65 { --fm: 65px }
    .xl-fm70 { --fm: 70px }
    .xl-fm75 { --fm: 75px }
    .xl-fm80 { --fm: 80px }
    .xl-fm85 { --fm: 85px }
    .xl-fm90 { --fm: 90px }
    .xl-fm95 { --fm: 95px }
    .xl-fm100 { --fm: 100px }
    .xl-no-margin { --fm: 0 }
    
    .flex .xl-block10 { flex-basis: calc(10% - var(--fm) * 0.9) }
    .flex .xl-block16 { flex-basis: calc(16.666% - var(--fm) * 0.8333) }
    .flex .xl-block20 { flex-basis: calc(20% - var(--fm) * 0.8) }
    .flex .xl-block25 { flex-basis: calc(25% - var(--fm) * 0.75) }
    .flex .xl-block30 { flex-basis: calc(30% - var(--fm) * 0.6667) }
    .flex .xl-block33 { flex-basis: calc(33.333% - var(--fm) * 0.6667) }
    .flex .xl-block40 { flex-basis: calc(40% - var(--fm) * 0.6) }
    .flex .xl-block45 { flex-basis: calc(45% - var(--fm) * 0.55) }
    .flex .xl-block50 { flex-basis: calc(50% - var(--fm) * 0.5) }
    .flex .xl-block60 { flex-basis: calc(60% - var(--fm) * 0.4) }
    .flex .xl-block66 { flex-basis: calc(66.666% - var(--fm) * 0.3333) }
    .flex .xl-block70 { flex-basis: calc(70% - var(--fm) * 0.3) }
    .flex .xl-block75 { flex-basis: calc(75% - var(--fm) * 0.25) }
    .flex .xl-block80 { flex-basis: calc(80% - var(--fm) * 0.2) }
    .flex .xl-block90 { flex-basis: calc(90% - var(--fm) * 0.1) }
    .flex .xl-block100 { flex-basis: 100% }
    
    .xl-order-first { order: -1; }
    .xl-order-0 { order: 0; }
    .xl-order-1 { order: 1; }
    .xl-order-2 { order: 2; }
    .xl-order-3 { order: 3; }
    .xl-order-4 { order: 4; }
    .xl-order-5 { order: 5; }
    .xl-order-last { order: 999; }
    
    .xl-flex-grow-0 { flex-grow: 0; }
    .xl-flex-grow-1 { flex-grow: 1; }
    .xl-flex-grow-2 { flex-grow: 2; }
    .xl-flex-grow-3 { flex-grow: 3; }
    
    .xl-flex-shrink-0 { flex-shrink: 0; }
    .xl-flex-shrink-1 { flex-shrink: 1; }
    .xl-flex-shrink-2 { flex-shrink: 2; }
    
    .xl-row { flex-direction: row; }
    .xl-row-r { flex-direction: row-reverse; }
    .xl-col { flex-direction: column; }
    .xl-col-r { flex-direction: column-reverse; }
} 

/* l (992px) */
@media all and (max-width: 992px) {
    .l-fm0 { --fm: 0 }
    .l-fm5 { --fm: 5px }
    .l-fm10 { --fm: 10px }
    .l-fm15 { --fm: 15px }
    .l-fm20 { --fm: 20px }
    .l-fm25 { --fm: 25px }
    .l-fm30 { --fm: 30px }
    .l-fm35 { --fm: 35px }
    .l-fm40 { --fm: 40px }
    .l-fm45 { --fm: 45px }
    .l-fm50 { --fm: 50px }
    .l-fm55 { --fm: 55px }
    .l-fm60 { --fm: 60px }
    .l-fm65 { --fm: 65px }
    .l-fm70 { --fm: 70px }
    .l-fm75 { --fm: 75px }
    .l-fm80 { --fm: 80px }
    .l-fm85 { --fm: 85px }
    .l-fm90 { --fm: 90px }
    .l-fm95 { --fm: 95px }
    .l-fm100 { --fm: 100px }
    .l-no-margin { --fm: 0 }
    
    .flex .l-block10 { flex-basis: calc(10% - var(--fm) * 0.9) }
    .flex .l-block16 { flex-basis: calc(16.666% - var(--fm) * 0.8333) }
    .flex .l-block20 { flex-basis: calc(20% - var(--fm) * 0.8) }
    .flex .l-block25 { flex-basis: calc(25% - var(--fm) * 0.75) }
    .flex .l-block30 { flex-basis: calc(30% - var(--fm) * 0.6667) }
    .flex .l-block33 { flex-basis: calc(33.333% - var(--fm) * 0.6667) }
    .flex .l-block40 { flex-basis: calc(40% - var(--fm) * 0.6) }
    .flex .l-block45 { flex-basis: calc(45% - var(--fm) * 0.55) }
    .flex .l-block50 { flex-basis: calc(50% - var(--fm) * 0.5) }
    .flex .l-block60 { flex-basis: calc(60% - var(--fm) * 0.4) }
    .flex .l-block66 { flex-basis: calc(66.666% - var(--fm) * 0.3333) }
    .flex .l-block70 { flex-basis: calc(70% - var(--fm) * 0.3) }
    .flex .l-block75 { flex-basis: calc(75% - var(--fm) * 0.25) }
    .flex .l-block80 { flex-basis: calc(80% - var(--fm) * 0.2) }
    .flex .l-block90 { flex-basis: calc(90% - var(--fm) * 0.1) }
    .flex .l-block100 { flex-basis: 100% }
    
    .l-order-first { order: -1; }
    .l-order-0 { order: 0; }
    .l-order-1 { order: 1; }
    .l-order-2 { order: 2; }
    .l-order-3 { order: 3; }
    .l-order-4 { order: 4; }
    .l-order-5 { order: 5; }
    .l-order-last { order: 999; }
    
    .l-flex-grow-0 { flex-grow: 0; }
    .l-flex-grow-1 { flex-grow: 1; }
    .l-flex-grow-2 { flex-grow: 2; }
    .l-flex-grow-3 { flex-grow: 3; }
    
    .l-flex-shrink-0 { flex-shrink: 0; }
    .l-flex-shrink-1 { flex-shrink: 1; }
    .l-flex-shrink-2 { flex-shrink: 2; }
    
    .l-row { flex-direction: row; }
    .l-row-r { flex-direction: row-reverse; }
    .l-col { flex-direction: column; }
    .l-col-r { flex-direction: column-reverse; }
}

/* m (768px) */
@media all and (max-width: 768px) {
    .m-fm0 { --fm: 0 }
    .m-fm5 { --fm: 5px }
    .m-fm10 { --fm: 10px }
    .m-fm15 { --fm: 15px }
    .m-fm20 { --fm: 20px }
    .m-fm25 { --fm: 25px }
    .m-fm30 { --fm: 30px }
    .m-fm35 { --fm: 35px }
    .m-fm40 { --fm: 40px }
    .m-fm45 { --fm: 45px }
    .m-fm50 { --fm: 50px }
    .m-fm55 { --fm: 55px }
    .m-fm60 { --fm: 60px }
    .m-fm65 { --fm: 65px }
    .m-fm70 { --fm: 70px }
    .m-fm75 { --fm: 75px }
    .m-fm80 { --fm: 80px }
    .m-fm85 { --fm: 85px }
    .m-fm90 { --fm: 90px }
    .m-fm95 { --fm: 95px }
    .m-fm100 { --fm: 100px }
    .m-no-margin { --fm: 0 }
    
    .flex .m-block10 { flex-basis: calc(10% - var(--fm) * 0.9) }
    .flex .m-block16 { flex-basis: calc(16.666% - var(--fm) * 0.8333) }
    .flex .m-block20 { flex-basis: calc(20% - var(--fm) * 0.8) }
    .flex .m-block25 { flex-basis: calc(25% - var(--fm) * 0.75) }
    .flex .m-block30 { flex-basis: calc(30% - var(--fm) * 0.6667) }
    .flex .m-block33 { flex-basis: calc(33.333% - var(--fm) * 0.6667) }
    .flex .m-block40 { flex-basis: calc(40% - var(--fm) * 0.6) }
    .flex .m-block45 { flex-basis: calc(45% - var(--fm) * 0.55) }
    .flex .m-block50 { flex-basis: calc(50% - var(--fm) * 0.5) }
    .flex .m-block60 { flex-basis: calc(60% - var(--fm) * 0.4) }
    .flex .m-block66 { flex-basis: calc(66.666% - var(--fm) * 0.3333) }
    .flex .m-block70 { flex-basis: calc(70% - var(--fm) * 0.3) }
    .flex .m-block75 { flex-basis: calc(75% - var(--fm) * 0.25) }
    .flex .m-block80 { flex-basis: calc(80% - var(--fm) * 0.2) }
    .flex .m-block90 { flex-basis: calc(90% - var(--fm) * 0.1) }
    .flex .m-block100 { flex-basis: 100% }
    
    .m-order-first { order: -1; }
    .m-order-0 { order: 0; }
    .m-order-1 { order: 1; }
    .m-order-2 { order: 2; }
    .m-order-3 { order: 3; }
    .m-order-4 { order: 4; }
    .m-order-5 { order: 5; }
    .m-order-6 { order: 6; }
    .m-order-7 { order: 7; }
    .m-order-8 { order: 8; }
    .m-order-last { order: 999; }
    
    .m-flex-grow-0 { flex-grow: 0; }
    .m-flex-grow-1 { flex-grow: 1; }
    .m-flex-grow-2 { flex-grow: 2; }
    .m-flex-grow-3 { flex-grow: 3; }
    
    .m-flex-shrink-0 { flex-shrink: 0; }
    .m-flex-shrink-1 { flex-shrink: 1; }
    .m-flex-shrink-2 { flex-shrink: 2; }
    
    .m-row { flex-direction: row; }
    .m-row-r { flex-direction: row-reverse; }
    .m-col { flex-direction: column; }
    .m-col-r { flex-direction: column-reverse; }
}

/* s (576px) */
@media all and (max-width: 576px) {
    .s-fm0 { --fm: 0 }
    .s-fm5 { --fm: 5px }
    .s-fm10 { --fm: 10px }
    .s-fm15 { --fm: 15px }
    .s-fm20 { --fm: 20px }
    .s-fm25 { --fm: 25px }
    .s-fm30 { --fm: 30px }
    .s-fm35 { --fm: 35px }
    .s-fm40 { --fm: 40px }
    .s-fm45 { --fm: 45px }
    .s-fm50 { --fm: 50px }
    .s-no-margin { --fm: 0 }
    
    .flex .s-block10 { flex-basis: calc(10% - var(--fm) * 0.9) }
    .flex .s-block16 { flex-basis: calc(16.666% - var(--fm) * 0.8333) }
    .flex .s-block20 { flex-basis: calc(20% - var(--fm) * 0.8) }
    .flex .s-block25 { flex-basis: calc(25% - var(--fm) * 0.75) }
    .flex .s-block33 { flex-basis: calc(33.333% - var(--fm) * 0.6667) }
    .flex .s-block50 { flex-basis: calc(50% - var(--fm) * 0.5) }
    .flex .s-block66 { flex-basis: calc(66.666% - var(--fm) * 0.3333) }
    .flex .s-block100 { flex-basis: 100% }
    
    .s-order-first { order: -1; }
    .s-order-0 { order: 0; }
    .s-order-1 { order: 1; }
    .s-order-2 { order: 2; }
    .s-order-last { order: 999; }
    
    .s-flex-grow-0 { flex-grow: 0; }
    .s-flex-grow-1 { flex-grow: 1; }
    
    .s-flex-shrink-0 { flex-shrink: 0; }
    .s-flex-shrink-1 { flex-shrink: 1; }
    
    .s-row { flex-direction: row; }
    .s-col { flex-direction: column; }
}

/* xs (480px) */
@media all and (max-width: 480px) {
    .xs-fm0 { --fm: 0 }
    .xs-fm5 { --fm: 5px }
    .xs-fm10 { --fm: 10px }
    .xs-fm15 { --fm: 15px }
    .xs-fm20 { --fm: 20px }
    .xs-no-margin { --fm: 0 }
    
    .flex .xs-block25 { flex-basis: calc(50% - var(--fm) * 0.5) }
    .flex .xs-block33 { flex-basis: 100% }
    .flex .xs-block50 { flex-basis: 100% }
    .flex .xs-block100 { flex-basis: 100% }
    
    .xs-order-first { order: -1; }
    .xs-order-0 { order: 0; }
    .xs-order-1 { order: 1; }
    .xs-order-last { order: 999; }
    
    .xs-col { flex-direction: column; }
    
    /* Mobile-specific helpers */
    .flex.xs-stack > * {
        flex-basis: 100% !important;
        margin-right: 0 !important;
    }
    
    .flex.xs-scroll {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 10px; /* For scrollbar space */
    }
    
    .flex.xs-scroll > * {
        flex: 0 0 auto;
    }
}