.burger, .dropdown>a, .icon-left:hover, .mobile__menu {
    cursor: pointer
}

body, header>div, header>div>div>nav, html {
    background-color: var(--black2)
}

.dropdown-menu, a:after, header>div>div>nav {
    left: 0;
    transition: .4s cubic-bezier(.075, .82, .165, 1)
}

.dropdown-menu, a:after, header>div>div>nav, header>div>div>nav>ul a {
    transition: .4s cubic-bezier(.075, .82, .165, 1)
}

a, h1, h2, h3, h4, h5, p {
    font-family: Poppins, sans-serif
}

*, .burger, .dropdown, .dropdown-menu, a, html, p, section {
    position: relative
}

.btn_text>span, .ulMarkers li p {
    margin-left: 8px
}

.btn, .btnSeeMore, .btn__border, .btn__fill, .btn__fill_black, .btn__fill_dark, .btn__gray, .btn__light, .btn__stroke, .btn__white, .btn_text {
    border-radius: var(--bradBtn);
    cursor: pointer;
    display: inline-block;
    font-family: poppins, sans-serif;
    font-weight: 500;
    padding: 16px 0;
    text-align: center;
    transition: .4s cubic-bezier(.075, .82, .165, 1);
    width: 100%
}

.btn:hover, .btnSeeMore:hover, .btn__border:hover, .btn__fill:hover, .btn__fill_black:hover, .btn__fill_dark:hover, .btn__gray:hover, .btn__light:hover, .btn__stroke:hover, .btn__white:hover, .btn_text:hover {
    scale: 1.06
}

.btn__border {
    border: 1px solid var(--white20);
    color: var(--white20) !important;
    padding: 12px 0 !important
}

.btn:after, .btnSeeMore:after, .btn__border:after, .btn__fill:after, .btn__fill_black:after, .btn__fill_dark:after, .btn__gray:after, .btn__light:after, .btn__stroke:after, .btn__white:after, .btn_text:after, header>div>div>nav>ul a:after {
    content: none
}

.btn__stroke {
    border: 1px solid var(--orange);
    color: var(--white) !important
}

.btn__fill_black, .btn__light {
    border-radius: 12px !important
}

.btnSeeMore {
    margin-top: 60px
}

.btn__fill_dark {
    background-color: var(--ultraDark50);
    color: #fff !important;
    font-size: 16px !important;
    padding: 10px 20px !important
}

.btn__fill_black {
    background-color: var(--ultraDark30);
    color: #fff !important
}

.btn__fill {
    background-color: var(--orangePrimary);
    color: var(--textBtn) !important;
    padding: 16px 0 !important
}

.btn__fill.accent {
    align-items: center;
    background: linear-gradient(184deg, #ff5900 60%, #ff9d55);
    display: flex;
    flex-direction: row;
    font-size: var(--fz24) !important;
    gap: 12px;
    justify-content: center;
    overflow: hidden
}

.btn__fill.accent:after {
    background: radial-gradient(#ff9d55 50%, #ff5900 90%);
    border-radius: 100px;
    content: "";
    height: 50%;
    left: 50%;
    opacity: .5;
    opacity: .2;
    position: absolute;
    top: 100%;
    transform: translateX(-50%) translateY(-90%);
    width: 50%;
    z-index: -1
}

.btn__white {
    background-color: var(--m7C);
    color: var(--m2C)
}

.btn__light {
    background-color: var(--accent95);
    color: var(--accent10) !important
}

.btn_text {
    background-color: transparent;
    color: var(--purple) !important;
    width: max-content !important
}

.btn_text, .btn_text>span, h2>* {
    display: inline-block;
    vertical-align: middle
}

.btn_text>span {
    transform: translateY(1px)
}

.btn__gray {
    background-color: #f3f4f5
}

.dropdown>a {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: 12px;
    justify-content: center
}

.dropdown>a span {
    rotate: 90deg;
    transform: translateX(1px);
    width: 8px
}

@media (min-width:1025px) {
    .dropdown:focus-within .dropdown-menu, .dropdown:hover .dropdown-menu {
        display: block
    }
}

.dropdown-menu li {
    margin: 0
}

.dropdown-menu li a {
    color: #fff;
    display: block;
    padding: 10px 20px;
    text-decoration: none
}

.dropdown-menu {
    background-color: transparent;
    display: block;
    max-height: 0;
    overflow: hidden;
    padding: 0;
    top: 0;
    transform: translateX(0);
    visibility: hidden
}

.dropdown.active .dropdown-menu {
    padding: 10px;
    visibility: visible
}

.header__wrapper {
    height: 100px
}

header>div {
    height: 102px !important;
    left: 50%;
    position: fixed;
    top: 0;
    transform: translateX(-50%);
    width: 100%;
    z-index: 100
}

header>div>div {
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 20px 0
}

header>div>div>nav>ul {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: 39px
}

header>div>div>nav>ul a {
    width: max-content;
    color: var(--white) !important;
    font-size: 16px !important
}

header>div>div>nav>ul a:hover {
    opacity: .5 !important
}

header>div>div>nav {
    backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    height: 100vh;
    position: absolute;
    top: 0;
    transform: translateX(100%) translateY(0);
    width: 100vw;
    z-index: 50
}

header>div>div>nav>ul {
    align-items: start;
    flex-direction: column;
    gap: 40px;
    height: 80vh;
    margin-left: 24px;
    margin-top: 174px;
    overflow-x: hidden;
    overflow-y: auto
}

.header__nav>a {
    display: none !important
}

.header__nav .change_lang {
    margin-bottom: 90px;
    margin-left: 24px;
    z-index: 500
}

.header__nav .change_lang_choise {
    left: 0 !important;
    transform: translateX(-6%) translateY(-104%) !important;
    width: max-content !important
}

header>div>div>nav>a {
    display: inline-block !important;
    margin: auto auto 52px;
    max-width: 90%;
    z-index: 90
}

.header__buttons {
    align-items: stretch;
    display: flex;
    flex-direction: row;
    gap: 20px
}

.mobile__menu, body, html, svg {
    display: block
}

.header__buttons>a {
    width: 263px;
    z-index: 80
}

.navOpen {
    transform: translateX(946px) translateY(0)
}

@media (max-width:1024px) {
    header>div>div {
        padding: 16px 0
    }
}

.mobile__menu {
    align-items: center;
    border: 1px solid var(--orangePrimary);
    border-radius: 200px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    z-index: 61
}

.mobile__menu p, p>a {
    color: var(--orangePrimary) !important
}

.burger {
    height: 60px;
    scale: .4;
    transition-duration: .5s;
    width: 60px
}

.open>.icon-left, .open>.icon-right {
    background: 0 0
}

.icon-left, .icon-left:after, .icon-left:before, .icon-right, .icon-right:after, .icon-right:before {
    height: 8px;
    transition-duration: .5s;
    background-color: var(--orangePrimary);
    position: absolute
}

.open>.icon-left:before {
    transform: rotate(45deg) scaleX(1.4) translate(4px, 4px)
}

.open>.icon-left:after {
    transform: rotate(-45deg) scaleX(1.4) translate(4px, -4px)
}

.open>.icon-right:before {
    transform: rotate(-45deg) scaleX(1.4) translate(-4px, 4px)
}

.open>.icon-right:after {
    transform: rotate(45deg) scaleX(1.4) translate(-4px, -4px)
}

.icon-left {
    top: 30px;
    transform: translateX(-7px);
    width: 74%
}

.icon-left:before, .icon-right:before {
    top: -20px
}

.icon-left:after, .icon-left:before, .icon-right:after, .icon-right:before {
    content: "";
    width: 100%
}

.icon-left:after, .icon-right:after {
    top: 20px
}

.icon-right {
    left: 22px;
    top: 30px;
    width: 74%
}

img, svg {
    height: 100%
}

.main__imgs_absolute>*, a:hover:after, img, svg {
    width: 100%
}

.fadeInDown, header {
    animation-delay: .5s !important
}

:root {
    --bg: #090b12;
    --innerBg: #191b23;
    --innerBgLghter: #16171f;
    --innerBlackBg: #120e0b;
    --innerBlackLighterBg: #2e3038;
    --white: #fff;
    --white20: #f0f2f5;
    --white30: #fafcff;
    --black: #111;
    --black2: #181a18;
    --ultraDark20: #121213;
    --ultraDark30: #1e1e22;
    --ultraDark50: #252525;
    --black50: #2a2a2d;
    --blackDarker: #1d1d1e;
    --blackPrimary: #1d1d1e;
    --blackPrimary2: #111;
    --darkBlue: #12151e;
    --darkBlue30: #1b1f2a;
    --darkBlue50: #2a2e39;
    --purple: #8f60ff;
    --yellow: #ffc278;
    --yellowLight: #ffc421;
    --yellowDarker: #ff8d04;
    --orange: #ff7d34;
    --orangeDarker: #ff6320;
    --orangeLight: #fdf0ea;
    --orangePrimary: #ff710a;
    --red: #ff2020;
    --gray: #1f1f1f;
    --gray2: #9d9d9d;
    --neturalGray10: #191b23;
    --neturalGray50: #75767f;
    --neturalGray70: #aaaab4;
    --lightGray: #8b90a6;
    --lightGray2: #f6f6f6;
    --lightGray10: #1c2132;
    --lightGray40: #595e71;
    --lightGray50: #71768b;
    --lightGray80: #c1c5dc;
    --lightGray95: #eef0ff;
    --darkGray10: #030406;
    --darkGray70: #0b0e17;
    --darkGray80: #0e111c;
    --accent10: #8850ff;
    --accent20: #926cff;
    --accent30: #4e7cfe;
    --accent95: #e6d4ff;
    --textMain: #f5f6f7;
    --textP: #8b90a6;
    --textPLighter: #d1d1d4;
    --textBtn: #fcfdfe;
    --brad: 10px;
    --bradBtn: 100px;
    --bradMed: 24px;
    --bradMed2: 28px;
    --bradBig: 32px;
    --fz48: 48px;
    --fz28: 28px;
    --fz24: 24px;
    --fz20: 20px
}

svg {
    fill: transparent
}

*, :after, :before {
    border: none;
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

html {
    overflow-x: hidden !important;
    scroll-behavior: smooth
}

@media (max-width:1340px) {
    body {
        overflow: hidden
    }
}

body, html {
    box-sizing: border-box;
    font-size: 18px;
    font-smooth: always;
    -webkit-font-smoothing: antialiased;
    color: var(--textMain);
    overflow-x: hidden
}

body::-webkit-scrollbar {
    width: 12px
}

body::-webkit-scrollbar-track {
    background: var(--darkGray80)
}

body::-webkit-scrollbar-thumb {
    background-color: var(--orangePrimary);
    border-radius: var(--brad)
}

a {
    color: inherit;
    text-decoration: none
}

img {
    object-fit: cover
}

li, ul {
    list-style: none;
    padding: 0;
    marker: none
}

.template__list {
    color: var(--orangePrimary);
    margin-left: 20px
}

.ol_decimal li:not(:last-child), .template__list>:not(:last-child) {
    margin-bottom: 6px
}

.template__list li p {
    display: inline-block !important;
    vertical-align: middle !important
}

.template__list li {
    list-style-type: disc
}

.template__list li p:first-child {
    color: #fff !important;
    margin-right: 12px
}

.template__list li p:last-child {
    color: var(--gray2) !important;
    margin-right: 12px
}

.ol_decimal {
    margin-left: 21px
}

.ol_decimal, .ol_decimal li {
    list-style-type: decimal !important
}

.ol_decimal li::marker {
    color: var(--neturalGray50) !important;
    font-family: Poppins, sans-serif
}

.wrapper, .wrapper_smaller {
    height: 100%;
    margin: 0 auto;
    max-width: 1420px;
    width: 100%
}

.taCenter, .width235 {
    margin-left: auto;
    margin-right: auto
}

.wrapper_smaller {
    max-width: 940px
}

.lableHeader {
    color: var(--lightGray50) !important;
    text-align: center
}

a:after {
    background-color: currentColor;
    bottom: -2px;
    content: "";
    height: 1px;
    position: absolute;
    width: 0
}

a:has(img, div):after {
    content: none
}

h1, h2, h3, h4, h5 {
    color: var(--white);
    font-weight: 600 !important;
    line-height: 130% !important
}

h2 {
    font-size: var(--fz48)
}

h3 {
    font-size: var(--fz20)
}

.fz18, a, p {
    font-size: 18px
}

a, p {
    color: var(--gray2) !important;
    font-weight: 400;
    line-height: 160% !important
}

.hColorBlack, .hColorBlackAll h1, .hColorBlackAll h2, .hColorBlackAll h3, .hColorBlackAll h4 {
    color: var(--neturalGray10) !important
}

.hColorBlack p, .hColorBlackp {
    color: var(--neturalGray50) !important
}

.fz124 {
    font-size: 124px
}

.fz72 {
    font-size: 72px;
    font-weight: 700
}

.fz64 {
    font-size: 64px
}

.fz56 {
    font-size: 56px
}

.fz52 {
    font-size: 52px
}

.fz48 {
    font-size: 48px
}

.fz42 {
    font-size: 42px;
    line-height: 120% !important
}

.fz36 {
    font-size: 36px
}

.fz30 {
    font-size: 30px
}

.fz28 {
    font-size: 28px
}

.fz24, .fz28 {
    text-transform: none
}

.fz24 {
    font-size: 24px
}

.fz20 {
    font-size: 20px
}

.fz16 {
    font-size: 16px
}

.fz14 {
    font-size: 14px
}

.fz12 {
    font-size: 12px
}

.fz10 {
    font-size: 10px
}

p>* {
    display: inline-block
}

.width80 {
    max-width: 80%
}

.width70 {
    max-width: 70%
}

.width60 {
    max-width: 60%
}

.width50 {
    max-width: 50%
}

.width40 {
    max-width: 40%
}

.width30 {
    max-width: 30%
}

.width256 {
    max-width: 256px
}

.width235 {
    display: block !important;
    max-width: 235px
}

.title {
    align-items: center;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 16px
}

.taCenter {
    text-align: center !important
}

.taLeft {
    text-align: left !important
}

.ulMarkers li {
    margin-left: 7px
}

.ulMarkers li::marker {
    content: "•"
}

.state_page {
    padding-top: 100px
}

@media (max-width:1420px) {
    .navOpen {
        transform: translateX(49.5%) translateY(0)
    }

    .wrapper {
        max-width: 95%
    }

    .fz124 {
        font-size: 12vw
    }
}

@media (max-width:425px) {
    .header__wrapper>.wrapper>a>svg {
        transform: translateY(1vw)
    }

    .width256 {
        max-width: 100%
    }
}

.with_bg {
   background-image: url(/templates/clothoff/assets/images/bg.webp);
    background-repeat: no-repeat;
    background-size: cover;
    padding: 100px 0
}

.main__imgs_absolute_container .main_content, .main__wrapper {
    padding-bottom: 100px;
    padding-top: 100px
}

.no_bg {
    background-image: none !important
}

.main__wrapper {
    background: url(/templates/clothoff/assets/images/bg.webp) 50%/cover no-repeat #000
}

.main__slider>.swiper-wrapper {
    align-items: stretch;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap !important
}

.main__slider>.swiper-wrapper>div {
    flex: 1 1 10%;
    min-height: 352px;
    min-width: 284px
}

.main__wrapper .btn__fill {
    margin: 0 auto;
    width: 290px
}

.main__oddPages>div {
    align-items: stretch;
    align-self: stretch;
    display: flex;
    flex-direction: row;
    justify-content: space-between
}

.main__oddPages>div>div {
    flex: 0 1 45%
}

.main__imgs {
    align-items: stretch;
    align-self: stretch;
    display: flex;
    flex-direction: row;
    gap: 6px
}

.main__imgs_absolute_container {
    overflow: hidden;
    padding: 0
}

.main__imgs_absolute_container>div {
    gap: 20px !important
}

.main__imgs_absolute>* {
    bottom: 0;
    left: 50%;
    position: absolute;
    transform: translateX(-50%)
}

.main__img img {
    display: inherit !important
}

@media (max-width:768px) {
    .btnSeeMore {
        margin-top: 30px
    }

    .btn__light {
        color: var(--textBtn) !important
    }

    .header__wrapper>.wrapper>a>svg {
        max-width: 40vw
    }

    .header__nav .change_lang {
        margin-bottom: 30px
    }

    header>div>div>nav>a {
        margin-bottom: 12px
    }

    .header__buttons>a {
        display: none
    }

    .mobile__menu {
        max-height: 44px;
        max-width: 44px;
        padding-left: 0;
        padding-right: 0
    }

    .header__wrapper>div>a {
        max-width: 115px;
        z-index: 600
    }

    .navOpen {
        transform: translateX(-6%) translateY(0)
    }

    header>div>div>nav>ul {
        margin-left: 6%;
        margin-top: 94px
    }

    .header__nav>a {
        display: block !important
    }

    .innerPadding {
        margin: 0 auto;
        max-width: 94.62%
    }

    .taCenter {
        text-align: left !important
    }

    .state_page {
        padding-top: 50px
    }

    .width235, .width30, .width40, .width50, .width60, .width70, .width80 {
        max-width: 100%
    }

    .padding {
        padding: 0 14px
    }

    h2 {
        font-size: 6vw
    }

    .fz64, .fz72 {
        font-size: 52px
    }

    .fz64 {
        max-width: max-content;
        width: 100%
    }

    .fz56 {
        font-size: 40px
    }

    .fz36, .fz48, .fz52 {
        font-size: 32px
    }

    .fz42 {
        font-size: 36px
    }

    .fz30 {
        font-size: 26px
    }

    .fz24, .fz28 {
        font-size: 20px
    }

    .fz20 {
        font-size: 18px
    }

    .fz18, a, p {
        font-size: 16px
    }

    .fz16 {
        font-size: 14px
    }

    :root {
        --fz48: 32px;
        --fz28: 20px;
        --fz24: 20px;
        --fz20: 18px
    }

    .wrapper {
        max-width: 88%
    }

    .wrapper_smaller {
        max-width: 84%
    }

    .with_bg {
        padding: 30px 0
    }

    .main__wrapper .btn__fill {
        margin-left: 8% !important
    }

    .main__oddPages>div {
        flex-direction: column-reverse !important;
        gap: 24px
    }

    .main__imgs_absolute_container {
        padding-bottom: 0 !important;
        padding-top: 30px
    }

    .main__imgs_absolute_container>div {
        flex-direction: column !important
    }

    .main__imgs_absolute_container .main_content {
        padding-bottom: 0;
        padding-top: 0
    }

    .main__imgs_absolute>* {
        bottom: unset;
        left: unset;
        margin: 0 auto;
        position: relative;
        transform: unset;
        width: unset
    }

    .main__wrapper {
        padding-bottom: 30px;
        padding-top: 30px
    }

    .main__slider {
        margin-bottom: 0;
        margin-top: 30px;
        padding-left: 6% !important
    }

    .main__wrapper a {
        width: 100%
    }
}