/*main*/

*,
*::before,
*::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    font-weight: 500;
    font-family: "Montserrat", "Arial", sans-serif;
    font-size: 16px;
    line-height: 1.42;
    color: var(--color__text-1);
    letter-spacing: 0.04em;
    background-color: var(--color__white);
    -webkit-font-smoothing: antialiased;
}

ul, ol {
    padding: 0;
    margin: 0;
    list-style: none;
}

h2, h3, h1, p {
    margin: 0;
}

main {
    overflow: hidden;
}

.js-no-scroll {
    overflow: hidden;
}


/* centred wraper*/

.center-wrap {
    max-width: 94rem;
    position: relative;
    margin: 0px auto;
    display: block;
    width: 100%;
}


/*outside step*/

.mrg {
    margin: 10rem auto;
}

.mrg.--min {
    margin: 5rem auto;
}

.mrg.--top {
    margin-top: 10rem;
    margin-bottom: 0rem;
}

.mrg.--bottom {
    margin-top: 0rem;
    margin-bottom: 10rem;
}

.mrg.--min.--top {
    margin-top: 5rem;
    margin-bottom: 0rem;
}

.mrg.--min.--bottom {
    margin-top: 0rem;
    margin-bottom: 5rem;
}

.mrg-side {
    margin-left: 5rem;
    margin-right: 5rem;
}

.--no-pdg {
    padding: 0px !important;
}

.--no-pdg-top {
    padding-top: 0px !important;
}

.--no-pdg-bottom {
    padding-bottom: 0px !important;
}

.--no-pdg-left {
    padding-left: 0px !important;
}

.--no-pdg-right {
    padding-right: 0px !important;
}


/*insite step*/

.pdg {
    padding: 10rem 0px;
}

.pdg.--min {
    padding: 5rem 0px;
}

.pdg.--top {
    padding-top: 10rem;
    padding-bottom: 0rem;
}

.pdg.--bottom {
    padding-top: 0rem;
    padding-bottom: 10rem;
}

.pdg.--min.--top {
    padding-top: 5rem;
    padding-bottom: 0rem;
}

.pdg.--min.--bottom {
    padding-top: 0rem;
    padding-bottom: 5rem;
}

.pdg-side {
    padding-left: 5rem;
    padding-right: 5rem;
}

.--no-mrg {
    margin: 0px !important;
}

.--no-mrg-top {
    margin-top: 0px !important;
}

.--no-mrg-bottom {
    margin-bottom: 0px !important;
}

.--no-mrg-left {
    margin-left: 0px !important;
}

.--no-mrg-right {
    margin-right: 0px !important;
}


/*colls*/
.colls {
    width: 100%;
}

.col.--auto {
    flex: 1;

}

.col.--1 {
    width: 100%;
    max-width: 4rem;

}

.col.--2 {
    width: 100%;
    max-width: calc(4rem * 2 + (2rem));

}

.col.--3 {
    width: 100%;
    max-width: calc(4rem * 3 + (2rem * 2));

}

.col.--4 {
    width: 100%;
    max-width: calc(4rem * 4 + (2rem * 3));

}

.col.--5 {
    width: 100%;
    max-width: calc(4rem * 5 + (2rem * 4));

}

.col.--6 {
    width: 100%;
    max-width: calc(4rem * 6 + (2rem * 5));

}

.col.--7 {
    width: 100%;
    max-width: calc(4rem * 7 + (2rem * 6));

}

.col.--8 {
    width: 100%;
    max-width: calc(4rem * 8 + (2rem * 7));

}

.col.--9 {
    width: 100%;
    max-width: calc(4rem * 9 + (2rem * 8));

}

.col.--10 {
    width: 100%;
    max-width: calc(4rem * 10 + (2rem * 9));

}

.col.--11 {
    width: 100%;
    max-width: calc(4rem * 11 + (2rem * 10));

}

.col.--12 {
    width: 100%;
    max-width: calc(4rem * 12 + (2rem * 11));

}

.col.--13 {
    width: 100%;
    max-width: calc(4rem * 13 + (2rem * 12));

}

.col.--14 {
    width: 100%;
    max-width: calc(4rem * 14 + (2rem * 13));

}

.col.--15 {
    width: 100%;
    max-width: calc(4rem * 15 + (2rem * 14));

}

.col.--16 {
    width: 100%;
    max-width: calc(4rem * 16 + (2rem * 15));

}

.col.--17 {
    width: 100%;
    max-width: calc(4rem * 16 + (2rem * 16));

}

.col.--18 {
    width: 100%;
    max-width: calc(4rem * 16 + (2rem * 17));

}


/*full*/
.full {
    width: 100%;
    height: 100%;
}

.full.--width {
    width: 100%;
    height: auto;
}

.full.--height {
    width: auto;
    height: 100%;
}


/*MEDIA*/

@media screen and (max-width: 1680px) {
    html, body {
        font-size: 14px;
    }
}

@media screen and (max-width: 1440px) {
    html, body {
        font-size: 13px;
    }
}


@media screen and (max-width: 1366px) {
    html, body {
        font-size: 12px;
    }
}


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

}

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


    .col.--1 {
        width: 100%;
        max-width: 4rem;

    }

    .col.--2 {
        width: 100%;
        max-width: calc(4rem * 2 + (2rem));

    }

    .col.--3 {
        width: 100%;
        max-width: calc(4rem * 3 + (2rem * 2));

    }

    .col.--4 {
        width: 100%;
        max-width: calc(4rem * 4 + (2rem * 3));
    }

    .col.--5 {
        width: 100%;
        max-width: calc(4rem * 5 + (2rem * 4));
    }

    .col.--6 {
        width: 100%;
        max-width: calc(4rem * 6 + (2rem * 5));
    }

    .col.--7 {
        width: 100%;
        max-width: calc(4rem * 7 + (2rem * 6));
    }

    .col.--8 {
        width: 100%;
        max-width: calc(4rem * 8 + (2rem * 7));
    }

    .col.--9 {
        width: 100%;
        max-width: calc(4rem * 9 + (2rem * 8));
    }

    .col.--10 {
        width: 100%;
        max-width: calc(4rem * 10 + (2rem * 9));
    }

    .col.--11 {
        width: 100%;
        max-width: calc(4rem * 11 + (2rem * 10));
    }

    .col.--12 {
        width: 100%;
        max-width: calc(4rem * 12 + (2rem * 11));
    }

    .col.--13 {
        width: 100%;
        max-width: calc(4rem * 13 + (2rem * 12));
    }

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

    .col.--15 {
        width: 100%;
        max-width: 100%;

    }

    .col.--16 {
        width: 100%;
        max-width: 100%;

    }

    .col.--17 {
        width: 100%;
        max-width: 100%;

    }

    .col.--18 {
        width: 100%;
        max-width: 100%;

    }


}

@media screen and (max-width: 1024px) {
    html, body {
        font-size: 12px;
    }
}

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

    main {
        overflow-x: hidden;
    }

    .--mob__back-order > *:first-child {
        order: 2;
    }

    .center-wrap {
        max-width: 100%;
        padding: 0px 2rem;
    }

    .col.--1 {
        width: 100%;
        max-width: 4rem;

    }

    .col.--2 {
        width: 100%;
        max-width: calc(4rem * 2 + (2rem));

    }

    .col.--3 {
        width: 100%;
        max-width: calc(4rem * 3 + (2rem * 2));

    }

    .col.--4 {
        width: 100%;
        max-width: calc(4rem * 4 + (2rem * 3));
    }

    .col.--5 {
        width: 100%;
        max-width: calc(4rem * 5 + (2rem * 4));
    }

    .col.--6 {
        width: 100%;
        max-width: calc(4rem * 6 + (2rem * 5));
    }

    .col.--7 {
        width: 100%;
        max-width: calc(4rem * 7 + (2rem * 6));
    }

    .col.--8 {
        width: 100%;
        max-width: calc(4rem * 8 + (2rem * 7));
    }

    .col.--9 {
        width: 100%;
        max-width: calc(4rem * 9 + (2rem * 8));
    }

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

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

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

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

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

    .col.--15 {
        width: 100%;
        max-width: 100%;

    }

    .col.--16 {
        width: 100%;
        max-width: 100%;

    }


    /*outside step*/
    .mrg {
        margin: 5rem auto;
    }

    .mrg.--min {
        margin: 2.5rem auto;
    }

    .mrg.--top {
        margin-top: 5rem;
        margin-bottom: 0rem;
    }

    .mrg.--bottom {
        margin-top: 0rem;
        margin-bottom: 5rem;
    }

    .mrg.--min.--top {
        margin-top: 2.5rem;
        margin-bottom: 0rem;
    }

    .mrg.--min.--bottom {
        margin-top: 0rem;
        margin-bottom: 2.5rem;
    }


    /*insite step*/
    .pdg {
        padding: 5rem 0px;
    }

    .pdg.--min {
        padding: 2.5rem 0px;
    }

    .pdg.--top {
        padding-top: 5rem;
        padding-bottom: 0rem;
    }

    .pdg.--bottom {
        padding-top: 0rem;
        padding-bottom: 5rem;
    }

    .pdg.--min.--top {
        padding-top: 2.5rem;
        padding-bottom: 0rem;
    }

    .pdg.--min.--bottom {
        padding-top: 0rem;
        padding-bottom: 2.5rem;
    }
}

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

}

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

    .colls {
        margin-right: 0rem;
    }

    .mrg {
        margin: 5rem auto;
    }

    .col.--1 {
        width: 100%;
        max-width: 4rem;

    }

    .col.--2 {
        width: 100%;
        max-width: calc(4rem * 2 + (2rem));
    }

    .col.--3 {
        width: 100%;
        max-width: calc(4rem * 3 + (2rem * 2));
    }

    .col.--4 {
        width: 100%;
        max-width: calc(4rem * 4 + (2rem * 3));
    }

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

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

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

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

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

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

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

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

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

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

    .col.--15 {
        width: 100%;
        max-width: 100%;

    }

    .col.--16 {
        width: 100%;
        max-width: 100%;

    }


}