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

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

.section--boxed {
    max-width: 1250px;
    margin-right: auto;
    margin-left: auto;
    width: 95%;
}

.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;
}

/* MARGINS */

.mBot--sm {
    margin-bottom: 2vh;
}

.mBot--md {
    margin-bottom: 5vh;
}

.mBot--lg {
    margin-bottom: 8vh;
}

.mBot--xlg {
    margin-bottom: 10vh;
}

.mTop--sm {
    margin-top: 2vh;
}

.mTop--md {
    margin-top: 5vh;
}

.mTop--lg {
    margin-top: 8vh;
}

.mTop--xlg {
    margin-top: 10vh;
}

.mLeft--sm {
    margin-left: 2vh;
}

.mLeft--md {
    margin-left: 5vh;
}

.mLeft--lg {
    margin-left: 8vh;
}

.mRight--sm {
    margin-right: 2vh;
}

.mRight--md {
    margin-right: 5vh;
}

.mRight--lg {
    margin-right: 8vh;
}

/* PADDINGS */

.pBot--sm {
    padding-bottom: 2vh;
}

.pBot--md {
    padding-bottom: 5vh;
}

.pBot--lg {
    padding-bottom: 8vh;
}

.pBot--xlg {
    padding-bottom: 10vh;
}

.pTop--sm {
    padding-top: 2vh;
}

.pTop--md {
    padding-top: 5vh;
}

.pTop--lg {
    padding-top: 8vh;
}

.pTop--xlg {
    padding-top: 10vh;
}

.pLeft--sm {
    padding-left: 2vh;
}

.pLeft--md {
    padding-left: 5vh;
}

.pLeft--lg {
    padding-left: 8vh;
}

.pRight--sm {
    padding-right: 2vh;
}

.pRight--md {
    padding-right: 5vh;
}

.pRight--lg {
    padding-right: 8vh;
}

.p--sm {
    padding: 2%;
}

.p--md {
    padding: 5%;
}

.p--lg {
    padding: 8%;
}

/************************************/
/*           COLUMNS DESIGN         */
/************************************/

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

.vermWrap {
    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;
}

.vermColumn--33 {
    width: 33%;
}

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

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

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

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

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

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

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

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

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

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

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

/************************************/
/*            MEDIA QUERIES         */
/************************************/
@media only screen and (max-width: 1251px) {

    .vermColumns--ul {
        display: block;
    }

    .vermColumns--ul > div {
        width: 100%;
    }

}

@media only screen and (max-width: 921px) {

    .vermColumns--ut {
        display: block;
    }

    .vermColumns--ut > div {
        width: 100%;
    }

}

@media only screen and (max-width: 768px) {

    .vermColumns--um {
        display: block;
    }

    .vermColumns--um > div {
        width: 100%;
    }

}

@media only screen and (min-width: 921px) and (max-width: 1250px) {

    .vermColumns--l {
        display: block;
    }

    .vermColumns--l > div {
        width: 100%;
    }

    .wrap__laptop {
        flex-wrap: wrap;
    }

    .vermColumn--33_l {
        width: 33%;
    }

    .vermColumn--25_l {
        width: 25%;
    }

    .vermColumn--10_l {
        width: 10%;
    }

    .vermColumn--20_l {
        width: 20%;
    }

    .vermColumn--30_l {
        width: 30%;
    }

    .vermColumn--40_l {
        width: 40%;
    }

    .vermColumn--50_l {
        width: 50%;
    }

    .vermColumn--60_l {
        width: 60%;
    }

    .vermColumn--70_l {
        width: 70%;
    }

    .vermColumn--80_l {
        width: 80%;
    }

    .vermColumn--90_l {
        width: 90%;
    }

    .vermColumn--100_l {
        width: 100%;
    }

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

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

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

@media only screen and (min-width: 768px) and (max-width: 920px) {

    .vermColumns--t {
        display: block;
    }

    .vermColumns--t > div {
        width: 100%;
    }

    .wrap__tablet {
        flex-wrap: wrap;
    }

    .vermColumn--33_t {
        width: 33%;
    }

    .vermColumn--25_t {
        width: 25%;
    }

    .vermColumn--10_t {
        width: 10%;
    }

    .vermColumn--20_t {
        width: 20%;
    }

    .vermColumn--30_t {
        width: 30%;
    }

    .vermColumn--40_t {
        width: 40%;
    }

    .vermColumn--50_t {
        width: 50%;
    }

    .vermColumn--60_t {
        width: 60%;
    }

    .vermColumn--70_t {
        width: 70%;
    }

    .vermColumn--80_t {
        width: 80%;
    }

    .vermColumn_t--90_t {
        width: 90%;
    }

    .vermColumn--100_t {
        width: 100%;
    }

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

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

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

@media only screen and (max-width: 767px) {

    .wrap__mobile {
        flex-wrap: wrap;
    }

    .vermColumn--33_m {
        width: 33%;
    }

    .vermColumn--25_m {
        width: 25%;
    }

    .vermColumn--10_m {
        width: 10%;
    }

    .vermColumn--20_m {
        width: 20%;
    }

    .vermColumn--30_m {
        width: 30%;
    }

    .vermColumn--40_m {
        width: 40%;
    }

    .vermColumn--50_m {
        width: 50%;
    }

    .vermColumn--60_m {
        width: 60%;
    }

    .vermColumn--70_m {
        width: 70%;
    }

    .vermColumn--80_m {
        width: 80%;
    }

    .vermColumn--90_m {
        width: 90%;
    }

    .vermColumn--100_m {
        width: 100%;
    }

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

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

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

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

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

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