/************************************/
/*           GENERAL STYLES         */
/************************************/

:root {
    --color-brand: #3FD3B0;
    --color-accent: #424243;
    --color-light: #f0fcf9;
    --color-grey: #f7f7f7;
}

.color--brand, .color--brand * { color: #3FD3B0; }
.color--ascent { color: #424243; }
.color--accent { color: #424243; }
.color--white { color: #fff; }
.color--black { color: #000; }

.bg--brand { background-color: #3FD3B0; }
.bg--ascent { background-color: #424243; }
.bg--white { background-color: #fff; }
.bg--black { background-color: #000; }
.bg--grey { background-color: #f7f7f7; }
.bg--light { background-color: #f0fcf9 ; }
.bg--grey-dark { background-color: #545354; }

.font--xlg { font-size: 50px; }
.font--lg { font-size: 35px; }
.font--md { font-size: clamp(18px, 1.3vw, 25px); }
.font--sm { font-size: 17px; }

.font--alt {
    font-family: 'des-bold'!important;
}

section {
    width: 100%;
    position: relative;
}

.section--boxed {
    max-width: 100%;
    margin: 0 auto;
    width: 100%;
    padding-right: 8vw;
    padding-left: 8vw;
}

.section--boxed.boxed--sm {
    max-width: 800px;
}

.section--boxed.max--1920,
.max--1920 {
    max-width: 1920px;
}

.section--boxed.max--1500,
.max--1500 {
    max-width: 1500px;
    padding-right: 25px;
    padding-left: 25px;
}

.section--boxed.max--1200,
.max--1200 {
    max-width: 1200px;
    padding-right: 25px;
    padding-left: 25px;
}

.section--boxed.max--1400,
.max--1400 {
    max-width: 1400px;
    padding-right: 25px;
    padding-left: 25px;
}

.section--boxed.max--800,
.max--800 {
    max-width: 800px;
}

.max--900 {
    max-width: 900px;
}

.max--1000 {
    max-width: 1000px;
}

.max--1100 {
    max-width: 1100px;
}

@media (min-width: 1650px) {
    .section--boxed.max--1500 {
        padding-right: 0;
        padding-left: 0;
    }
}


@media only screen and (max-width: 1310px) {
    .section--boxed,
    .section--boxed.max--1500 {
        padding-right: 30px;
        padding-left: 30px;        
    }
}

.overflow--hidden {
    overflow: hidden;
}

.overflow--visible {
    overflow: visible;
}

.overflow--auto {
    overflow: auto;
}

.overflowY--scroll {
    overflow-y: scroll;
}

.text--center {
    text-align: center;
}

.text--left {
    text-align: left;
}

.text--right {
    text-align: right;
}

.clickable {
    cursor: pointer;
}

.pos--relative {
    position: relative;
}

.pos--absolute {
    position: absolute;
}

.pos--fixed {
    position: fixed;
}

.pos--sticky {
    position: fixed;
}

.zindex--1 {
    z-index: 1;
}

.zindex--2 {
    z-index: 2;
}

.zindex--3 {
    z-index: 3;
}

.zindex--4 {
    z-index: 4;
}

.zindex--5 {
    z-index: 5;
}

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

/* MARGINS

.mb--sm {
    margin-bottom: 30px;
}

.mb--md {
    margin-bottom: 60px;
}

.mb--lg {
    margin-bottom: 80px;
}

.mt--sm {
    margin-top: 30px;
}

.mt--md {
    margin-top: 60px;
}

.mt--lg {
    margin-top: 80px;
}

.mt--xlg {
    margin-top: 8vw;
}

.ml--sm {
    margin-left: 30px;
}

.ml--md {
    margin-left: 60px;
}

.ml--lg {
    margin-left: 80px;
}

.mr--sm {
    margin-right: 30px;
}

.mr--md {
    margin-right: 60px;
}

.mr--lg {
    margin-right: 80px;
}

 PADDINGS

.pb--sm {
    padding-bottom: 30px;
}

.pb--md {
    padding-bottom: 60px;
}

.pb--lg {
    padding-bottom: 80px;
}

.pb--xlg {
    padding-bottom: 100px;
}

.pt--sm {
    padding-top: 30px;
}

.pt--md {
    padding-top: 60px;
}

.pt--lg {
    padding-top: 80px;
}

.pt--xlg {
    padding-top: 100px;
}

.pl--sm {
    padding-left: 30px;
}

.pl--md {
    padding-left: 60px;
}

.pl--lg {
    padding-left: 80px;
}

.pr--sm {
    padding-right: 30px;
}

.pr--md {
    padding-right: 60px;
}

.pr--lg {
    padding-right: 80px;
}

.p--sm {
    padding: 30px;
}

.p--md {
    padding: 60px;
}

.p--lg {
    padding: 80px;
}

.p--xlg {
    padding: 8vw;
} */

/************************************/
/*             COLS DESIGN          */
/************************************/

.cols,
.cols--ul,
.cols--ut,
.cols--um,
.cols--l,
.cols--t {
    display: flex;
    justify-content: space-between;
}

.cols--wrap {
    flex-wrap: wrap;
}

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

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

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

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

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

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

.col--33 {
    width: 33.33333333333%;
}

.col--25 {
    width: 25%;
}

.col--10 {
    width: 10%;
}

.col--20 {
    width: 20%;
}

.col--30 {
    width: 30%;
}

.col--35 {
    width: 35%;
}

.col--40 {
    width: 40%;
}

.col--45 {
    width: 45%;
}

.col--50 {
    width: 50%;
}

.col--55 {
    width: 55%;
}


.col--60 {
    width: 60%;
}

.col--65 {
    width: 65%;
}

.col--70 {
    width: 70%;
}

.col--75 {
    width: 75%;
}

.col--80 {
    width: 80%;
}

.col--85 {
    width: 85%;
}

.col--90 {
    width: 90%;
}

.col--100 {
    width: 100%;
}

/************************************/
/*            MEDIA QUERIES         */
/************************************/

@media (min-width: 768px) {
    .p-sticky {
        position: sticky;
        top: 80px;
        z-index: 2;
    }
    
    .um-text--center {
        text-align: center;
    }

    .um-text--left {
        text-align: left;
    }

    .um-text--right {
        text-align: right;
    }
    
    .um-flex--reverse {
        flex-direction: row-reverse;
    }

    .um-pl--md {
        padding-left: 40px;
    }

    .um-pr--md {
        padding-right: 40px;
    }

    .um--hidden {
        display: none;
    }
}

@media (max-width: 1250px) {

    .cols--ul {
        display: block;
    }

    .cols--ul > [class*="col--"] {
        width: 100%;
    }

}

@media (max-width: 920px) {

    .cols--ut {
        display: block;
    }

    .cols--ut > [class*="col--"] {
        width: 100%;
    }

}

@media (max-width: 767px) {

    .cols--um {
        display: block;
    }

    .cols--um > [class*="col--"] {
        width: 100%;
    }

}

@media (max-width: 1250px) {

    .cols--l {
        display: block;
    }

    .cols--l > [class*="col--"] {
        width: 100%;
    }

    .l-cols--wrap {
        flex-wrap: wrap;
    }

    .l-align--start {
        align-items: flex-start;
    }
    
    .l-align--end {
        align-items: flex-end;
    }
    
    .l-align--center {
        align-items: center;
    }
    
    .l-justify--start {
        justify-content: flex-start;
    }
    
    .l-justify--end {
        justify-content: flex-end;
    }
    
    .l-justify--center {
        justify-content: center;
    }

    .l-col--33 {
        width: 33%;
    }

    .l-col--25 {
        width: 25%;
    }

    .l-col--10 {
        width: 10%;
    }

    .l-col--20 {
        width: 20%;
    }

    .l-col--30 {
        width: 30%;
    }

    .l-col--40 {
        width: 40%;
    }

    .l-col--50 {
        width: 50%;
    }

    .l-col--60 {
        width: 60%;
    }

    .l-col--70 {
        width: 70%;
    }

    .l-col--80 {
        width: 80%;
    }

    .l-col--90 {
        width: 90%;
    }

    .l-col--100 {
        width: 100%;
    }

    .l-text--center {
        text-align: center;
    }

    .l-text--left {
        text-align: left;
    }

    .l-text--right {
        text-align: right;
    }
    
    .l-mb--sm {
        margin-bottom: 20px;
    }
    
    .l-mb--md {
        margin-bottom: 40px;
    }
    
    .l-mb--lg {
        margin-bottom: 60px;
    }
    
    .l-mb--xlg {
        margin-bottom: 80px;
    }
    
    .l-mt--sm {
        margin-top: 20px;
    }
    
    .l-mt--md {
        margin-top: 40px;
    }
    
    .l-mt--lg {
        margin-top: 60px;
    }
    
    .l-mt--xlg {
        margin-top: 80px;
    }

    .l--hidden {
        display: none;
    }

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

@media (max-width: 920px) {

    .cols--t {
        display: block;
    }

    .cols--t > [class*="col--"] {
        width: 100%;
    }

    .t-cols--wrap {
        flex-wrap: wrap;
    }

    .t-align--start {
        align-items: flex-start;
    }
    
    .t-align--end {
        align-items: flex-end;
    }
    
    .t-align--center {
        align-items: center;
    }
    
    .t-justify--start {
        justify-content: flex-start;
    }
    
    .t-justify--end {
        justify-content: flex-end;
    }
    
    .t-justify--center {
        justify-content: center;
    }

    .t-col--33 {
        width: 33%;
    }

    .t-col--25 {
        width: 25%;
    }

    .t-col--10 {
        width: 10%;
    }

    .t-col--20 {
        width: 20%;
    }

    .t-col--30 {
        width: 30%;
    }

    .t-col--40 {
        width: 40%;
    }

    .t-col--50 {
        width: 50%;
    }

    .t-col--60 {
        width: 60%;
    }

    .t-col--70 {
        width: 70%;
    }

    .t-col--80 {
        width: 80%;
    }

    .t-col--90 {
        width: 90%;
    }

    .t-col--100 {
        width: 100%;
    }

    .t-text--center {
        text-align: center;
    }

    .t-text--left {
        text-align: left;
    }

    .t-text--right {
        text-align: right;
    }
    
    .t-mb--sm {
        margin-bottom: 30px;
    }
    
    .t-mb--md {
        margin-bottom: 60px;
    }
    
    .t-mb--lg {
        margin-bottom: 80px;
    }
    
    .t-mb--xlg {
        margin-bottom: 100px;
    }
    
    .t-mt--sm {
        margin-top: 30px;
    }
    
    .t-mt--md {
        margin-top: 60px;
    }
    
    .t-mt--lg {
        margin-top: 80px;
    }
    
    .t-mt--xlg {
        margin-top: 100px;
    }

    .t--hidden {
        display: none;
    }

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

@media (max-width: 767px) {

    .m-cols--wrap {
        flex-wrap: wrap;
    }

    .m-align--start {
        align-items: flex-start;
    }
    
    .m-align--end {
        align-items: flex-end;
    }
    
    .m-align--center {
        align-items: center;
    }
    
    .m-justify--start {
        justify-content: flex-start;
    }
    
    .m-justify--end {
        justify-content: flex-end;
    }
    
    .m-justify--center {
        justify-content: center;
    }

    .m-col--33 {
        width: 33%;
    }

    .m-col--25 {
        width: 25%;
    }

    .m-col--10 {
        width: 10%;
    }

    .m-col--20 {
        width: 20%;
    }

    .m-col--30 {
        width: 30%;
    }

    .m-col--40 {
        width: 40%;
    }

    .m-col--50 {
        width: 50%;
    }

    .m-col--60 {
        width: 60%;
    }

    .m-col--70 {
        width: 70%;
    }

    .m-col--80 {
        width: 80%;
    }

    .m-col--90 {
        width: 90%;
    }

    .m-col--100 {
        width: 100%;
    }

    .m-text--center {
        text-align: center;
    }

    .m-text--left {
        text-align: left;
    }

    .m-text--right {
        text-align: right;
    }
    
    .m-mb--sm {
        margin-bottom: 30px;
    }
    
    .m-mb--md {
        margin-bottom: 60px;
    }
    
    .m-mb--lg {
        margin-bottom: 80px;
    }
    
    .m-mb--xlg {
        margin-bottom: 100px;
    }
    
    .m-mt--sm {
        margin-top: 30px;
    }
    
    .m-mt--md {
        margin-top: 60px;
    }
    
    .m-mt--lg {
        margin-top: 80px;
    }
    
    .m-mt--xlg {
        margin-top: 100px;
    }

    .mt--lg {
        margin-top: 6vw;
    }

    .mb--lg {
        margin-bottom: 6vw;
    }
    
    .m-row--reverse {
        flex-direction: row-reverse;
    }
    
    .m-col--reverse {
        flex-direction: column-reverse;
    }

    .m--hidden {
        display: none;
    }
}