:root {
    --global-white: #ffffff;
    --global-gray-soft: #fbf5f6;
    --global-gray-light: #ffe4ea;
    --global-gray: #e7c1c8;
    --global-gray-dark: #413235;
    --global-black: #2b2f37;
    --global-blue-xlight: #129cff;
    --global-blue-light: #0180ff;
    --global-blue: #0160bf;
    --global-blue-dark: #101e3b;
    --global-blue-deep: #020c1e;
    --global-green: #30af57;
    --global-green-light: #45d170;
    --global-red: #d13257;
    --global-red-light: #f84e76;
    --global-red-dark: #6b0920;
    --global-red-deep: #320515;

    --global-dark: #750e26;
    --global-acnt: var(
    --global-red);
    --global-acnt-hover: var(
    --global-red-light);
    --global-hover: var(
    --global-red);

    --global-transition: .15s;

    --global-font: system-ui,
    -apple-system,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,Helvetica,Arial,Verdana;
    --global-font-acnt:
    'Oswald',system-ui,-apple-system,sans-serif;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: initial;
    font-family: var(--global-font);
    background-color: var(--global-light-gray);
    color: var(--global-black);
    font-weight: 400;
}

section {
    font-family: inherit;
    font-size: inherit;
    color: var(--global-black);
}

nav {
    --nav-size: var(--size-nav);
    --nav-bg: var(--global-gray-soft);
    --nav-color: var(--global-white);
    --nav-color-hover: var(--global-hover);
    justify-content: center;
    align-items: center;
    background-color: var(--nav-bg);
    color: var(--nav-color);
    height: var(--nav-size);
    top: 0;
    left: 0;

    position: fixed;
    transition: var(--global-transition);
    transform: translateY(0);

    z-index: 999;
}

.txC {
    margin: 0 auto;
    text-align: center;
    justify-content: center;
}

.load-screen {
    position: fixed;
    height: 100%;
    width: 100%;
    background: var(--global-dark);
    z-index: 9999;
    display: flex;
    color: var(--global-white);
    padding: 1rem;
    flex-flow: column;
    justify-content: center;
    align-items: center;

    svg {
        width: 100%;
        max-height: 148px;
        animation: loadscreen 2s linear 1s infinite;
    }

    p {
        display: flex;
        padding: 2rem 1rem;
    }
}

@keyframes loadscreen {
    0% {
        filter: drop-shadow(0 0 0 var(--global-acnt-hover));
    }

    50% {
        filter: drop-shadow(0 0 .5rem var(--global-acnt-hover));
    }

    0% {
        filter: drop-shadow(0 0 0 var(--global-acnt-hover));
    }
}

.rotate-screen {}

#toparea {
    display: flex;
    width: 100%;
    height: var(--size-nav);
}

.nav-brand {
    height: var(--nav-size);
}
.nav-brand,
.nav-contacts,
.nav-copy {
    display: flex;
    transition: var(--global-transition);
    align-items: center;

    b {
        font-weight: 700;
    }
}
.nav-rules {
    display: flex;
    flex-flow: wrap;
    margin-left: -1rem;
    li {
        display: flex;
        flex-flow: wrap;
        padding: .25rem 1rem;
        border-right: .1em solid #ffffff50;
        a:hover {
            text-decoration: underline;
        }
        &:last-child {
            border-right: none;
        }
    }
}
nav .after {
    position: absolute;
    display: flex;
    content: '';
    top: 0;
    left: 0;
    background: var(--global-gray-soft);
    width: 100%;
    height: var(--nav-size);
    z-index: 99;
}
nav .nav-brand,
nav .nav-contacts {
    width: calc(var(--nav-size) * 3);
}

.nav-contacts p {
    display: inline-flex;
    flex-flow: wrap;

    font-size: 1rem;
    font-weight: 400;
    line-height: 1.2rem;

    em {
        display: block;
        font-weight: 700;
    }
}

nav .nav-contacts .btn {
    font-size: 1.2rem;
    padding: 0;
}

.nav-copy {
    flex-flow: column;
    justify-content: center;
    align-items: flex-start;
    line-height: 1.25em;
    font-size: .85rem;
    font-weight: 100;
}
nav .nav-links .btn {
    color: var(--global-black);
    text-decoration: underline;
}
nav .nav-links .btn:hover {
    color: var(--global-hover);
}
nav .nav-links .btn.fxd {
    color: var(--global-white);
    text-decoration: none;
}
nav .nav-links .btn.fxd:hover {
    color: var(--global-white);
}
nav .nav-links .btn.btn-back {
    padding-left: 2.5rem;
}
nav .nav-links .btn.--active {
    background: #ffffff;
    color: var(--global-dark);
    margin-right: .25rem;
}

.btn-back:before {
    content: '';
    width: 1rem;
    height: 100%;
    display: flex;
    background-image: url(../../img/arrow-line.svg);
    background-repeat: no-repeat;
    background-size: 1.75rem;
    background-position: center center;
    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(203deg) brightness(106%) contrast(108%);
    transition: all 0.25s ease-in-out;
    position: absolute;
    top: 0;
    left: 1rem;
    opacity: 1;
    transform: rotate(180deg);
}
footer .nav-copy {
    padding: 0 .5rem;
    width: 100%;
}
footer .nav-brand,
footer .nav-contacts {
    width: 100%;
    margin: 0;
    flex-flow: column;
    align-items: flex-start;
    justify-content: flex-start;
}
footer .nav-brand {
    width: 100%;
    max-width: 18rem;
}
footer .nav-contacts {
    height: auto;
    padding: 0;
    .btn {
        font-weight: 400;
        padding: .1rem 0;
        &:hover, a:hover {
            color: var(--global-white);
            text-decoration: underline;
        }
    }
}
footer .nav-brand a {
    margin: 0;
    width: 100%;
    justify-content: flex-start;
    align-items: flex-start;
}

footer {
    padding: 0!important;
    background-color: var(--global-gray-soft);
    color: var(--global-black);
}

.nav-brand {
    padding: .25em .5em .25em 0;
    margin: 0 auto 0 0;
    cursor: pointer;
    justify-content: flex-start;
}

.nav-contacts {
    padding: .25em 0 .25em .5em;
    margin: 0 0 0 auto;
    justify-content: flex-end;
    font-weight: 700;
    font-size: 1.25em;
}

.nav-brand:hover {
    color: var(--nav-color-hover);
}

.nav-brand h1,
.nav-brand .h1 {
    all: unset;
    font-size: .75em;
    width: calc((var(--nav-size) * 2.5) - .5em);
    margin: 0 0 0 auto;
    line-height: 1.5em;
    display: inline-flex;
    flex-flow: wrap;
    justify-content: flex-start;
    align-items: center;
}

.nav-brand a {
    display: flex;
    width: 100%;
}

.nav-brand svg,
.nav-brand img {
    max-height: var(--nav-size);
    max-width: calc(var(--nav-size) * 2);
}

.nav-links {
    display: flex;
    position: relative;
    width: 100%;
    justify-content: flex-end;
    align-items: center;
    flex-flow: wrap;
    transition: var(--global-transition);
}

nav .nav-links {
    max-width: calc(var(--size-full) - (var(--nav-size) * 3));
}

footer .nav-links {
    width: 100%;
    max-width: 100%;
    margin: 0;
    max-width: calc(100% - 18rem);
    justify-content: flex-end;
    align-items: center;
}
footer .nav-links .btn {
    text-decoration: underline;
}
footer .nav-links .btn-acnt {
    text-decoration: none;
}
footer a {
    transition: var(--global-transition);
    &:hover {
        color: inherit;
    }
}
footer .nav-links-list {
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    width: 100%;
    max-width: 20rem;
    margin: 0;
    height: 100%;
    justify-content: center;
    padding: 1rem 0;
    border-radius: 1rem;
}


.nav-links .btn,
.nav-links button {
    margin-right: .25em;
    text-transform: none;
    padding: .25rem .5rem;
}

.nav-links .btn:last-child,
.nav-links button:last-child {
    margin-right: 0;
}

.nav-links .nav-links-brand {
    display: none;
}

.nav-menu {
    display: none;
    width: var(--nav-size);
    height: var(--nav-size);
    justify-content: flex-start;
    align-items: center;
    margin: 0;
    padding-left: 1rem;
}

.btn,
button,
input[type="submit"] {
    -webkit-appearance: none;
    all: unset;
    font-family: inherit;
}

.btn,
button,
input[type="submit"] {
    --size-line-height: 1.5em;
    font-size: 1.25rem;
    line-height: var(--size-line-height);
    padding: .5rem 1rem;
    letter-spacing: .02em;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: fit-content;
    height: fit-content;
    cursor: pointer;
    transition: var(--global-transition);
    border: var(--size-border) solid transparent;
    border-radius: var(--size-rad-btn);
    position: relative;
    flex-flow: column;
}

.btn:hover,
button:hover,
input[type="submit"]:hover {
    color: var(--global-hover);
}

.btn span {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    font-weight: 400;
    opacity: .5;
}

.btn-acnt,
input.btn-acnt {
    background-color: var(--global-hover);
    color: var(--global-white);
    z-index: 2;
}

.btn-acnt:hover,
input.btn-acnt:hover {
    background-color: var(--global-acnt-hover);
    color: var(--global-white);
}

.btn-banner {
    border-radius: 3rem;
    font-size: 1rem;
    border-color: black;
    text-transform: unset;
    background: var(--global-white);
    z-index: 9;
}

.btn-banner:hover {
    border-color: var(--global-hover);
    color: var(--global-white);
    background: var(--global-hover);
    z-index: 9;
}

.btn-green {
    background: var(--global-green);
    color: var(--global-white);

    &:hover {
        background: var(--global-green-light);
        color: var(--global-white);
    }
}

nav .btn {
    font-size: 103.125%;
}

i.icn,
i.icn-xlg,
i.icn-lg,
i.icn-sm {
    all: unset;
    color: inherit;
    display: inline-block;
    position: relative;
    line-height: 1.5rem;
}

i.icn-xlg {
    height: var(--size-line-height);
    width: 1.5em;
}

i.icn-lg {
    height: var(--size-line-height);
    width: 1.25em;
}

i.icn {
    height: var(--size-line-height);
    width: 1em;
}

i.icn-sm {
    height: var(--size-line-height);
    width: .75em;
}

i.icn:hover {
    color: inherit;
}

i.icn:after,
i.icn-lg:after,
i.icn-xlg:after,
i.icn-sm:after,
.btn i.icn:after,
.btn i.icn-lg:after,
.btn i.icn-xlg:after,
.btn i.icn-sm:after,
button i.icn:after,
button i.icn-lg:after,
button i.icn-xlg:after,
button i.icn-sm:after {
    background-color: var(--global-white);
    transition: var(--global-transition);
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: inherit;
    width: inherit;
}

i.icn:hover:after,
i.icn-lg:hover:after,
i.icn-xlg:hover:after,
i.icn-sm:hover:after,
.btn:hover i.icn:after,
.btn:hover i.icn-lg:after,
.btn:hover i.icn-xlg:after,
.btn:hover i.icn-sm:after,
button:hover i.icn:after,
button:hover i.icn-lg:after,
button:hover i.icn-xlg:after,
button:hover i.icn-sm:after {
    background-color: var(--global-acnt-hover);
}

.btn.btn-acnt:hover i.icn:after,
.btn.btn-acnt:hover i.icn-lg:after,
.btn.btn-acnt:hover i.icn-xlg:after,
.btn.btn-acnt:hover i.icn-sm:after,
button.btn-acnt:hover i.icn:after,
button.btn-acnt:hover i.icn-lg:after,
button.btn-acnt:hover i.icn-xlg:after,
button.btn-acnt:hover i.icn-sm:after {
    background-color: var(--global-white);
}

i.icn-phn:after {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='currentColor'%3E%3Cpath d='M30.73,5.27A18,18,0,1,0,36,18,18,18,0,0,0,30.73,5.27ZM28.32,26.12h0l-1.05,1a5.5,5.5,0,0,1-5.2,1.49,18.58,18.58,0,0,1-5.32-2.38,24.39,24.39,0,0,1-4.19-3.39,24.87,24.87,0,0,1-3.14-3.8,19.25,19.25,0,0,1-2.35-4.77A5.52,5.52,0,0,1,8.44,8.68L9.67,7.46a.88.88,0,0,1,1.24,0h0l3.87,3.87a.87.87,0,0,1,0,1.24h0l-2.27,2.27a1.84,1.84,0,0,0-.19,2.41A26.55,26.55,0,0,0,15,20.43a25.71,25.71,0,0,0,3.58,3A1.85,1.85,0,0,0,21,23.23L23.2,21a.88.88,0,0,1,1.24,0h0l3.88,3.89A.87.87,0,0,1,28.32,26.12Z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='currentColor'%3E%3Cpath d='M30.73,5.27A18,18,0,1,0,36,18,18,18,0,0,0,30.73,5.27ZM28.32,26.12h0l-1.05,1a5.5,5.5,0,0,1-5.2,1.49,18.58,18.58,0,0,1-5.32-2.38,24.39,24.39,0,0,1-4.19-3.39,24.87,24.87,0,0,1-3.14-3.8,19.25,19.25,0,0,1-2.35-4.77A5.52,5.52,0,0,1,8.44,8.68L9.67,7.46a.88.88,0,0,1,1.24,0h0l3.87,3.87a.87.87,0,0,1,0,1.24h0l-2.27,2.27a1.84,1.84,0,0,0-.19,2.41A26.55,26.55,0,0,0,15,20.43a25.71,25.71,0,0,0,3.58,3A1.85,1.85,0,0,0,21,23.23L23.2,21a.88.88,0,0,1,1.24,0h0l3.88,3.89A.87.87,0,0,1,28.32,26.12Z'/%3E%3C/svg%3E");
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center center;
    -webkit-mask-position: center center;
}

i.icn-vk:after {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='currentColor'%3E%3Cpath d='M18,0A18,18,0,1,0,36,18,18,18,0,0,0,18,0Zm9.13,20a34.27,34.27,0,0,1,2.48,2.49,7.51,7.51,0,0,1,.89,1.28c.34.66,0,1.39-.56,1.43H26.25a2.86,2.86,0,0,1-2.35-1c-.51-.52-1-1.07-1.47-1.61a4.17,4.17,0,0,0-.67-.59.78.78,0,0,0-1.23.3A3.82,3.82,0,0,0,20.15,24c0,.87-.31,1.1-1.18,1.14A9.45,9.45,0,0,1,13.69,24a11.49,11.49,0,0,1-3.55-3.32,45.09,45.09,0,0,1-4.67-8.33c-.3-.66-.08-1,.64-1,1.21,0,2.41,0,3.61,0a1.05,1.05,0,0,1,1,.75,22.23,22.23,0,0,0,2.44,4.53,3.93,3.93,0,0,0,.93,1,.56.56,0,0,0,1-.28,3.19,3.19,0,0,0,.22-1,14.84,14.84,0,0,0-.06-3.33A1.4,1.4,0,0,0,14,11.8c-.35-.07-.3-.2-.13-.4A1.33,1.33,0,0,1,15,10.84h4.17c.66.13.81.42.89,1.08v4.63c0,.26.13,1,.59,1.18s.61-.17.83-.4a14.38,14.38,0,0,0,2.35-3.61c.28-.57.52-1.16.76-1.75a.89.89,0,0,1,.94-.65h4l.36,0c.67.11.86.4.65,1.06A10,10,0,0,1,29,15.18c-.67.92-1.38,1.82-2.05,2.75S26.37,19.21,27.13,20Z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='currentColor'%3E%3Cpath d='M18,0A18,18,0,1,0,36,18,18,18,0,0,0,18,0Zm9.13,20a34.27,34.27,0,0,1,2.48,2.49,7.51,7.51,0,0,1,.89,1.28c.34.66,0,1.39-.56,1.43H26.25a2.86,2.86,0,0,1-2.35-1c-.51-.52-1-1.07-1.47-1.61a4.17,4.17,0,0,0-.67-.59.78.78,0,0,0-1.23.3A3.82,3.82,0,0,0,20.15,24c0,.87-.31,1.1-1.18,1.14A9.45,9.45,0,0,1,13.69,24a11.49,11.49,0,0,1-3.55-3.32,45.09,45.09,0,0,1-4.67-8.33c-.3-.66-.08-1,.64-1,1.21,0,2.41,0,3.61,0a1.05,1.05,0,0,1,1,.75,22.23,22.23,0,0,0,2.44,4.53,3.93,3.93,0,0,0,.93,1,.56.56,0,0,0,1-.28,3.19,3.19,0,0,0,.22-1,14.84,14.84,0,0,0-.06-3.33A1.4,1.4,0,0,0,14,11.8c-.35-.07-.3-.2-.13-.4A1.33,1.33,0,0,1,15,10.84h4.17c.66.13.81.42.89,1.08v4.63c0,.26.13,1,.59,1.18s.61-.17.83-.4a14.38,14.38,0,0,0,2.35-3.61c.28-.57.52-1.16.76-1.75a.89.89,0,0,1,.94-.65h4l.36,0c.67.11.86.4.65,1.06A10,10,0,0,1,29,15.18c-.67.92-1.38,1.82-2.05,2.75S26.37,19.21,27.13,20Z'/%3E%3C/svg%3E");
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center center;
    -webkit-mask-position: center center;
}

i.icn-eml:after {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='currentColor'%3E%3Cpath d='M30.73,5.27A18,18,0,1,0,36,18,18,18,0,0,0,30.73,5.27ZM11,12h14.1c.79,0,.92.38.27.84l-6.15,4.43a2.12,2.12,0,0,1-2.34,0l-6.15-4.43C10,12.36,10.15,12,11,12ZM29.31,25.09a1.44,1.44,0,0,1-1.44,1.44H8.13a1.44,1.44,0,0,1-1.44-1.44V14.88c0-.79.52-1.06,1.17-.6l9,6.46a2.16,2.16,0,0,0,2.34,0l9-6.46c.65-.46,1.17-.2,1.17.6Z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='currentColor'%3E%3Cpath d='M30.73,5.27A18,18,0,1,0,36,18,18,18,0,0,0,30.73,5.27ZM11,12h14.1c.79,0,.92.38.27.84l-6.15,4.43a2.12,2.12,0,0,1-2.34,0l-6.15-4.43C10,12.36,10.15,12,11,12ZM29.31,25.09a1.44,1.44,0,0,1-1.44,1.44H8.13a1.44,1.44,0,0,1-1.44-1.44V14.88c0-.79.52-1.06,1.17-.6l9,6.46a2.16,2.16,0,0,0,2.34,0l9-6.46c.65-.46,1.17-.2,1.17.6Z'/%3E%3C/svg%3E");
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center center;
    -webkit-mask-position: center center;
}

i.icn-arrow:after {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' fill='currentColor'%3E%3Cpath d='M25.6,4.4c-5.9-5.9-15.4-5.8-21.2,0c-5.9,5.9-5.8,15.4,0,21.2s15.4,5.8,21.2,0C28.4,22.8,30,19,30,15 C30,11,28.4,7.2,25.6,4.4z M25.3,18c-0.6,0.9-1.9,1.2-2.8,0.6l-7.5-5l-7.5,5c-0.3,0.2-0.7,0.3-1.1,0.3c-0.6,0-1.3-0.3-1.7-0.9 c-0.6-0.9-0.4-2.2,0.6-2.8l8.6-5.7c0.7-0.4,1.5-0.4,2.2,0l8.6,5.7C25.7,15.9,25.9,17.1,25.3,18z'/%3E%3C/svg%3E%0A");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' fill='currentColor'%3E%3Cpath d='M25.6,4.4c-5.9-5.9-15.4-5.8-21.2,0c-5.9,5.9-5.8,15.4,0,21.2s15.4,5.8,21.2,0C28.4,22.8,30,19,30,15 C30,11,28.4,7.2,25.6,4.4z M25.3,18c-0.6,0.9-1.9,1.2-2.8,0.6l-7.5-5l-7.5,5c-0.3,0.2-0.7,0.3-1.1,0.3c-0.6,0-1.3-0.3-1.7-0.9 c-0.6-0.9-0.4-2.2,0.6-2.8l8.6-5.7c0.7-0.4,1.5-0.4,2.2,0l8.6,5.7C25.7,15.9,25.9,17.1,25.3,18z'/%3E%3C/svg%3E%0A");
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center center;
    -webkit-mask-position: center center;
}

i.icn-play:after {
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 511 511'%3e%3cpath d='M255.5,0C114.39,0,0,114.39,0,255.5s114.39,255.5,255.5,255.5,255.5-114.39,255.5-255.5S396.61,0,255.5,0Zm-90.01,390.61V120.39l234.03,135.11-234.03,135.11Z' /%3e%3c/svg%3e");
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 511 511'%3e%3cpath d='M255.5,0C114.39,0,0,114.39,0,255.5s114.39,255.5,255.5,255.5,255.5-114.39,255.5-255.5S396.61,0,255.5,0Zm-90.01,390.61V120.39l234.03,135.11-234.03,135.11Z' /%3e%3c/svg%3e");
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center center;
    -webkit-mask-position: center center;
}

.nav-menu .btn {
    display: flex;
    position: relative;
    width: 1.5rem;
    height: 1.5rem;
    padding: .5rem;
    cursor: pointer;
    border: .1rem solid var(--global-red-light);
}

.nav-menu .btn i.icon-menu:before,
.nav-menu .btn i.icon-menu:after {
    background: var(--global-dark);
    position: absolute;
    content: '';
    width: 100%;
    height: .25em;
    width: calc(100% - 1em);
    left: 0;
    transition: var(--global-transition);
    left: .5em;
    border-radius: var(--size-rad-btn);
}

.nav-menu .btn i.icon-menu:before {
    top: calc(50% - .125em - .4em);
}

.nav-menu .btn i.icon-menu:after {
    top: calc(50% - .125em + .4em);
}

.nav-menu .btn.menu-close i.icon-menu:before {
    top: calc(50% - .125em);
    transform: rotateZ(45deg);
}

.nav-menu .btn.menu-close i.icon-menu:after {
    top: calc(50% - .125em);
    transform: rotateZ(-45deg);
}

.scrollTo-top {
    position: fixed;
    opacity: 0;
    bottom: 1rem;
    right: 1rem;
    font-size: 2rem;
    justify-content: center;
    align-items: center;
    height: var(--size-nav);
    width: var(--size-nav);
    transition: var(--global-transition);

    z-index: -1;
}

.scrollTo-top i.icn:after,
.scrollTo-top i.icn-lg:after,
.scrollTo-top i.icn-xlg:after,
.scrollTo-top i.icn-sm:after {
    background-color: var(--global-hover);
}

.scrollTo-top:hover i.icn:after,
.scrollTo-top:hover i.icn-lg:after,
.scrollTo-top:hover i.icn-xlg:after,
.scrollTo-top:hover i.icn-sm:after {
    background-color: var(--global-acnt-hover);
}

nav .nav-links.--active {
    display: flex;
    opacity: 1;
    transition: var(--global-transition)
}

.social {
    display: flex;
    width: 100%;
    flex-flow: wrap;
    background: #ffffff10;
    padding: 1rem;
    border-radius: 1rem;
    max-width: 16rem;
    font-size: .85rem;
    &-clear {
        display: flex;
        width: 100%;
        height: .25rem;
    }
    &-avatar {
        img {
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 2rem;
            width: 2rem;
        }
    }
    &-name {
        display: flex;
        padding: 0 .5rem;
        justify-content: center;
        align-items: center;
        a {
            display: flex;
            flex-flow: column;
            justify-content: center;
            align-items: flex-start;
        }
        a:hover {
            color: inherit;
        }
        em, a em {
            color: #129cff;
            line-height: 1.15;
        }
    }
    &-status {
        display: flex;
        justify-content: left;
        align-items: center;
        width: 100%;
        font-size: 0.7rem;
        line-height: 1.15;
        padding: .25rem 0 .5rem;
    }
    &-subscribers {
        opacity: .5;
        font-size: 0.7rem;
        line-height: 1;
        &:hover {
            color: inherit;
        }
    }
    &-img {
        display: flex;
        flex-flow: row;
        margin: 0 auto;
        img {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: .25rem;
            border-radius: 50%;
            height: 2.75rem;
            width: 2.75rem;
            &:first-child {
                margin-left: -.25rem;
            }
        }
    }
}
.btn-vk {
    background: #5181b8;
    color: var(--global-white);
    padding: 0 1rem;
    display: flex;
    width: fit-content;
    border-radius: var(--size-rad-btn);
    position: relative;
    padding-left: 2.25rem;
    font-size: .7rem;
    margin: 0 auto;
    &:before {
        content: "";
        background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2215%22%20height%3D%229%22%20viewBox%3D%220%200%2015%209%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M8.17041%209C3.0449%209%200.121429%205.62207%200%200H2.56735C2.65102%204.1263%204.54388%205.87348%206.04286%206.23446V0H8.46122V3.55891C9.94082%203.40533%2011.4959%201.78337%2012.0204%200H14.4378C14.0347%202.19815%2012.349%203.82011%2011.149%204.48631C12.348%205.02728%2014.2694%206.44185%2015%209H12.3388C11.7673%207.28804%2010.3439%205.96446%208.46122%205.78348V9H8.17041Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E);
        background-repeat: no-repeat;
        height: 100%;
        width: 1rem;
        display: flex;
        background-size: contain;
        justify-content: center;
        align-items: center;
        background-position: center;
        position: absolute;
        left: 1rem;
        top: 0;
    }
    &:hover {
        opacity: .8;
        color: var(--global-white);
    }
}

.fixed-order {
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
    z-index: 999;
    transition: var(--global-transition);
    opacity: 0;
}
.fixed-order.--active {
    z-index: 999;
    opacity: 1;
    transform: translateY(0);
}
.fixed-order .btn {
    width: 100%;
    max-width: none;
    border-radius: unset;
    padding: .25rem 0;
    font-size: 1.5rem;
    text-transform: initial;
    font-weight: 600;
}
.fixed-order .btn-acnt:after, .fixed-order input.btn-acnt:after {
    display: none;
}

/* GUI MEDIA */

@media screen and (min-width: 1980px) {
    nav .nav-contacts .btn {
        font-size: 1.1rem;
    }
}

@media screen and (min-width: 1441px) {}

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

@media screen and (max-width: 1550px) and (min-width: 1441px) {

    .nav-links .btn,
    .nav-links button {
        padding: .25rem .5rem;
    }
}

@media screen and (max-width: 1440px) and (min-width: 1281px) {

    .nav-links .btn,
    .nav-links button {
        padding: .25rem .3rem;
        margin-right: 0;
    }
}

@media screen and (max-width: 1280px) {
    nav .nav-brand {
        height: var(--nav-size);
        width: calc(var(--nav-size) * 2);
        margin: 0;
        z-index: 10;
        svg,
        img {
            max-width: calc(var(--nav-size) + .5rem);
        }
    }

    nav .nav-links .btn.--active {
        margin-left: 1rem;
    }

    nav .nav-brand h1,
    nav .nav-brand .h1 {
        display: none;
    }

    nav .nav-links {
        position: absolute;
        overflow-y: scroll;
        top: 0;
        left: -4%;
        height: 100%;
        width: 108%;
        background: var(--global-gray-soft);
        max-width: none;
        flex-flow: column;
        overflow: hidden;
        opacity: 0;
        transition: var(--global-transition);
        align-items: center;
        display: none;
        z-index: 0;
        justify-content: flex-start;
        padding-top: 4.5rem;

        .nav-links-brand {
        display: flex;
        flex-flow: row;
        justify-content: flex-start;
        align-items: center;
        height: calc(var(--nav-size)*1.5);
        padding: 0 1rem;
        width: 100%;
        max-width: 24rem;
        margin-bottom: 1.5rem;
        a {
                display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 1rem;
        width: 100%;
            }
        svg,
            img {
                display: flex;
        max-width: calc(var(--nav-size)*2);
        padding-right: 1rem;
            }
        p {
                font-size: .9rem;
        line-height: 1.25rem;
            }
        em {
                font-weight: 700;
            }
        }
    ;
        /* min-width: 100vw; */
    }

    nav .nav-links .btn {
        margin: 0;
        margin-bottom: .5rem;
        text-transform: none;
        font-size: 130%;
        text-align: left;
        justify-content: flex-start;
        min-width: 20rem;
        padding: .35rem 1rem;
        color: var(--global-black);
        text-decoration: underline;
    }
    nav .nav-links .btn:hover {
        color: var(--global-hover);
    }

    nav .nav-links .nav-links-brand a {
        display: none;
    }

    nav .nav-links .nav-links-brand {
        height: 1rem;
    }

    nav .nav-links .btn.fxd {
        position: absolute;
        bottom: 2rem;
        top: auto;
        justify-content: center;
        color: var(--global-white);
        text-decoration: none;
    }

    nav .nav-links .btn.btn-back {
        position: absolute;
        top: .7rem;
        font-size: .9rem;
        text-transform: uppercase;
        opacity: 1;
        padding-left: 4rem;
        display: flex;
        width: 3rem;
        min-width: auto;
        left: calc(50% - 15.5rem + 3rem);

        &:before {
            opacity: 1;
            left: 2.3rem;
        }
    }

    nav .nav-contacts {
        width: fit-content;
        margin: 0 auto;
        max-width: calc(100% - var(--nav-size)*2 - 1rem);
        padding: 0 0 0 .25rem;
        z-index: 3;
    }

    nav .nav-contacts .btn {
        padding: 0;
    }

    nav .nav-menu {
        display: flex;
    }
    nav .nav-links .btn.--active {
        min-width: calc(20rem - 1rem);
    }
}

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

    footer .nav-brand,
    footer .nav-contacts, footer .nav-links {
        margin: 0 auto;
        max-width: 20rem;
    }

    footer .nav-brand,
    footer .nav-contacts {
        height: auto;
        padding: 0;
    }
    footer .nav-copy {
        padding: 0;
        height: auto;
    }

    footer .nav-links-list em {
        font-size: 1.5rem;
    }
    footer .nav-links {
        max-width: none;
        width: 100%;
        justify-content: center;
        align-items: center;
    }
}

@media screen and (max-width: 734px) {
    footer .nav-links-list {
        margin: 0 auto;
        max-width: 16rem;
        padding: .5rem 0 0;
    }
    footer .nav-contacts {
        margin: 0 auto;
        max-width: 16rem;
        padding: 1rem 0 0 0;
    }
    footer .nav-links-list ol.footer-nav {
        display: flex;
        overflow: hidden;
        transition: var(--global-transition);
        justify-content: flex-start;
    }

    footer .nav-links-list ol.footer-nav.--active {
        height: 100%;
    }

    footer .nav-copy {
        margin: 0 auto;
    }

    footer .nav-links-list em {
        cursor: pointer;
        transition: var(--global-transition);

        &:hover {
            opacity: 1;
            color: var(--global-acnt-hover);
        }

        &:after {
            content: "";
        }

        &.--active {
            &:after {
                transform: rotate(90deg);
            }
        }
    }
    .social {
        margin: 0 auto;
    }

}

@media screen and (max-width: 512px) {
    nav .nav-contacts .btn {
        font-size: 1.15rem;
    }

    nav .nav-links {
        padding: 3rem 1rem 1rem;
        overflow-y: scroll;
        justify-content: flex-start;
        align-items: flex-start;
    }
    footer .nav-contacts, footer .nav-copy, footer .nav-links-list {
        max-width: 17rem;
    }
    
    footer .nav-links {
        flex-flow: column;
    }

}

@media screen and (max-width: 380px) {
    nav .nav-links {
        .btn {
            min-width: auto;
            width: fit-content;
        }

        .btn.fxd {
            position: relative;
            bottom: auto;
            margin: 1rem 0 0 1rem;
        }
    }

    nav .nav-links {
        .btn {
            margin: 0;
        }
    }

    .nav-contacts p {
        font-size: .8rem;
        line-height: 1rem;
    }

    nav .nav-links .btn.btn-back {
        left: 0;
        padding-left: 3.25rem;

        &:before {
            left: 2rem;
        }
    }

    nav .nav-links .nav-links-brand {
        max-width: 20rem;

        svg,
        img {
            max-width: calc(var(--nav-size)*1.75);
        }
    }
    footer .nav-rules {
        margin-left: -.5rem;
        li {
            padding: .25rem .5rem;
        }
    }
    nav .nav-links .btn.--active {
        min-width: auto;
    }
}

@media screen and (max-width: 340px) {
    nav .nav-contacts .btn {
        font-size: .95rem;
    }
}

@media screen and (max-width: 319px) and (min-width: 0px) {

    body,
    html {
        font-size: 6vw;
        --size-nav: 16vw;
    }

    nav {
        font-size: 6vw;

        .row {
            padding: 0 3vw;
        }

        .nav-contacts p {
            line-height: 5vw;
            font-size: 4vw;
        }
    }

    nav .nav-links {
        padding: 12vw 6vw 6vw;

        .nav-links-brand {
            max-width: none;
            width: 100%;
            padding: 0 6vw;

            p {
                font-size: 4vw;
                line-height: 6vw;
            }
        }

        .btn {
            font-size: 6vw;
            padding: 1.5vw 6vw;

            span {
                display: none;
            }
        }

        .btn-back {}

        .btn.fxd {
            margin: 6vw 0 0 6vw;
        }
    }
    footer .row {
        padding: 0 .5rem;
    }
    footer .nav-contacts {
        .btn {
            font-size: 1rem;
        }
    }
    footer .nav-links-list li a {
        font-size: 1rem;
    }
    footer .nav-rules {
        margin-left: -.25rem;
        li {
            padding: 0 .25rem;
            a {
                font-size: .7rem;
            }
        }
    }
    .social .social-img img {
        height: 2.5rem;
        width: 2.5rem;
        &:last-child {
            display: none;
        }
    }
    .btn-vk {
        padding: 0 .5rem;
        padding-left: 1.75rem;
        &:before {
            left: .5rem;
        }
    }
    .fixed-order .btn {
        font-size: 1rem;
    }
}