/*   
Theme Name: Odens Team
Theme URI: https://odens
Description: Odens Team Website
Author: Денис Старовойтов
Author URI: https://fntn.ru
Version: 1.0
*/
html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0
}

main {
    display: block
}

h1 {
    font-size: 2em;
    margin: .67em 0
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible
}

pre {
    font-family: monospace, monospace;
    font-size: 1em
}

a {
    background-color: rgba(0, 0, 0, 0)
}

abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted
}

b,
strong {
    font-weight: bolder
}

code,
kbd,
samp {
    font-family: monospace, monospace;
    font-size: 1em
}

small {
    font-size: 80%
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

img {
    border-style: none
}

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0
}

button,
input {
    overflow: visible
}

button,
select {
    text-transform: none
}

[type=button],
[type=reset],
[type=submit],
button {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
    cursor: pointer
}

[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button::-moz-focus-inner {
    border-style: none;
    padding: 0
}

[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring,
button:-moz-focusring {
    outline: 1px dotted ButtonText
}

fieldset {
    padding: .35em .75em .625em
}

legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal
}

progress {
    vertical-align: baseline
}

textarea {
    overflow: auto
}

[type=checkbox],
[type=radio] {
    box-sizing: border-box;
    padding: 0
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
    outline-offset: -2px
}

[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

details {
    display: block
}

summary {
    display: list-item
}

template {
    display: none
}

.hidden,
[hidden] {
    display: none
}

*,
::after,
::before {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent
}

* {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0
}

body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased
}

canvas,
img,
picture,
svg,
video {
    display: block;
    max-width: 100%;
    width: 100%
}

button,
input,
select,
textarea {
    font: inherit
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    overflow-wrap: break-word
}

#__next,
#root {
    isolation: isolate
}

:root {
    --size: 8px;
    --max: 1440px;
    --v-outer: 11rem;
    --v-text: 2.5rem;
    --v-inner: 5.5rem;
    --h-outer: 16rem;
    --h-inner: 2.75rem;
    --font-size-0: 12rem;
    --font-size-1: 9.25rem;
    --font-size-2: 5.25rem;
    --font-size-3: 4.375rem;
    --font-size-4: 3.5rem;
    --font-size-5: 2.25rem;
    --font-size-n: 2.25rem;
    --background: black;
    --color-black: black;
    --color-font: #f8f0fb;
    --color-gray: #0e0e0f;
    --color-link: #ec0789;
    --color-hover: #780245;
    --color-check: #2dec07;
    --color-blue: rgb(7, 148, 236);
    --color-red: rgb(236, 7, 45);
    --color-prp: rgb(0, 66, 73);
    --font-main: "site_font";
    --font-title: "title_font";
    --w-1: 8.3333%;
    --w-2: 16.6666%;
    --w-3: 24.9999%;
    --w-4: 33.3333%;
    --w-5: 41.6666%;
    --w-6: 50%;
    --w-7: 58.3333%;
    --w-8: 66.6666%;
    --w-9: 74.9999%;
    --w-10: 83.3333%;
    --w-11: 91.6666%;
    --w-12: 100%
}

@media screen and (max-width:1024px) {
    :root {
        --size: 8px;
        --font-size-0: 12rem;
        --font-size-1: 6.25rem;
        --font-size-2: 4rem;
        --font-size-3: 4.375rem;
        --font-size-4: 3rem;
        --font-size-5: 2rem;
        --font-size-n: 2rem
    }
}

@media screen and (min-width:1860px) {
    :root {
        --v-outer: 30rem
    }
}

@media screen and (min-width:1600px) {
    :root {
        --v-outer: 22.5rem
    }
}

@font-face {
    font-family: site_font;
    src: url(../odens/fonts/Montserrat-Regular.eot);
    src: url(../odens/fonts/Montserrat-Regular.eot?#iefix) format("embedded-opentype"), url(../odens/fonts/Montserrat-Regular.woff) format("woff"), url(../odens/fonts/Montserrat-Regular.ttf) format("truetype"), url(../odens/fonts/Montserrat-Regular.svg#site_font) format("svg");
    font-weight: 300;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: site_font;
    src: url(../odens/fonts/Montserrat-Bold.eot);
    src: url(../odens/fonts/Montserrat-Bold.eot?#iefix) format("embedded-opentype"), url(../odens/fonts/Montserrat-Bold.woff) format("woff"), url(../odens/fonts/Montserrat-Bold.ttf) format("truetype"), url(../odens/fonts/Montserrat-Bold.svg#site_font) format("svg");
    font-weight: 700;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: title_font;
    src: url(../odens/fonts/TTBluescreensTrial-XBd.eot);
    src: url(../odens/fonts/TTBluescreensTrial-XBd.eot?#iefix) format("embedded-opentype"), url(../odens/fonts/TTBluescreensTrial-XBd.woff) format("woff"), url(../odens/fonts/TTBluescreensTrial-XBd.ttf) format("truetype"), url(../odens/fonts/TTBluescreensTrial-XBd.svg#title_font) format("svg");
    font-weight: 900;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: title_font;
    src: url(../odens/fonts/TTBluescreensTrial-XBdIt.eot);
    src: url(../odens/fonts/TTBluescreensTrial-XBdIt.eot?#iefix) format("embedded-opentype"), url(../odens/fonts/TTBluescreensTrial-XBdIt.woff) format("woff"), url(../odens/fonts/TTBluescreensTrial-XBdIt.ttf) format("truetype"), url(../odens/fonts/TTBluescreensTrial-XBdIt.svg#title_font) format("svg");
    font-weight: 900;
    font-style: italic;
    font-display: swap
}

.bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: var(--v-inner) 0 0;
    width: 100%
}

.button,
a.button {
    position: relative;
    display: inline-block;
    padding: 0 2rem;
    min-width: 30rem;
    height: 8rem;
    background: var(--color-link);
    border-radius: 100rem;
    box-shadow: 0 0 0 var(--color-link);
    font-size: var(--font-size-n);
    font-weight: 700;
    line-height: 7.5rem;
    color: var(--color-font) !important;
    cursor: pointer;
    transition: all ease-in-out .125s;
    text-align: center
}

.button:hover,
a.button:hover {
    background: var(--color-hover);
    box-shadow: 0 .375rem 3.5rem var(--color-link);
    transform: scale(1.0625)
}

.button:active,
a.button:active {
    filter: brightness(85%);
    box-shadow: 0 0 0 var(--color-link)
}

.button--instagram,
.button--telegram,
a.button--instagram,
a.button--telegram {
    background: rgba(0, 0, 0, 0);
    border: .125rem solid var(--color-link);
    margin: 1rem
}

.button-small,
a.button-small {
    display: block;
    padding: 1.5rem 3rem;
    background: rgba(236, 7, 137, .125) center no-repeat;
    border: .125rem solid var(--color-link);
    border-radius: 1rem;
    font-size: var(--font-size-5);
    font-weight: 700
}

.button-small:hover,
a.button-small:hover {
    background: var(--color-hover);
    box-shadow: 0 .375rem 3.5rem var(--color-link);
    transform: scale(1.0625);
    color: var(--color-font) !important
}

.button-small:active,
a.button-small:active {
    filter: brightness(85%);
    box-shadow: 0 0 0 var(--color-link)
}

.radio-item [type=radio] {
    display: none
}

.radio-item label {
    display: block;
    padding: 1.5rem 2rem 1.5rem 7rem;
    background: rgba(236, 7, 137, .125) center no-repeat;
    border: .125rem solid var(--color-link);
    border-radius: 1rem;
    cursor: pointer;
    white-space: nowrap;
    position: relative;
    transition: .4s ease-in-out 0s;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px)
}

.radio-item label::after,
.radio-item label::before {
    content: "";
    position: absolute;
    border-radius: 50%
}

.radio-item label::after {
    height: 2.5rem;
    width: 2.5rem;
    border: .125rem solid var(--color-link);
    left: 2rem;
    top: 50%;
    transform: translateY(-50%)
}

.radio-item label::before {
    background: var(--color-link);
    height: 2.5rem;
    width: 2.5rem;
    left: 2rem;
    top: 50%;
    transform: translateY(-50%);
    transform-origin: center;
    opacity: 0;
    visibility: hidden;
    transition: .4s ease-in-out 0s
}

.radio-item label:hover {
    background: var(--color-hover);
    border-color: var(--color-hover)
}

.radio-item [type=radio]:checked~label {
    background: var(--color-hover);
    border-color: var(--color-hover)
}

.radio-item [type=radio]:checked~label::before {
    opacity: 1;
    visibility: visible
}

input[type=text] {
    padding: 2rem 2rem;
    width: 100%;
    background: var(--color-font);
    color: var(--background);
    border-radius: .5rem;
    box-shadow: none;
    -webkit-appearance: none
}

input[type=text]:focus {
    outline: 0;
    color: var(--background) !important
}

input[type=text]::-webkit-input-placeholder {
    opacity: 1;
    color: rgba(0, 0, 0, .5)
}

input[type=text]::-moz-placeholder {
    opacity: 1;
    color: rgba(0, 0, 0, .5)
}

input[type=text]:-ms-input-placeholder {
    opacity: 1;
    color: rgba(0, 0, 0, .5)
}

input[type=text]:-moz-placeholder {
    opacity: 1;
    color: rgba(0, 0, 0, .5)
}

input[type=text]:-internal-autofill-previewed,
input[type=text]:-internal-autofill-selected,
input[type=text]:-webkit-autofill,
input[type=text]:-webkit-autofill:active,
input[type=text]:-webkit-autofill:focus,
input[type=text]:-webkit-autofill:hover {
    -webkit-text-fill-color: var(--background) !important;
    -webkit-box-shadow: 0 !important;
    background: var(--background) !important;
    color: var(--background) !important
}

.form {
    position: relative;
    padding: 7.5rem 10rem;
    margin: 0 auto;
    border-radius: 2.5rem;
    background: var(--background);
    overflow: hidden
}

.form::before {
    aspect-ratio: 1/1;
    content: "";
    position: absolute;
    z-index: 1;
    bottom: 0;
    right: 0;
    width: 250%;
    background: radial-gradient(var(--color-hover) -25%, rgba(0, 0, 0, 0) 65%);
    pointer-events: none;
    transform: translate3d(25%, 50%, 0)
}

.form__container {
    position: relative;
    z-index: 2
}
.form__tr {
    display: flex;
}
.form__tr:nth-child(4) {
    margin-top: 2rem;
}
.form__tr p {
    position: relative;
}
.wpcf7-spinner {
    position: absolute;
    left: 1rem;
    top: 2.5rem;
    margin: 0;
}
.wpcf7-not-valid-tip {
    font-size: 1.5rem;
}
.wpcf7-response-output {
    border-radius: 2.5rem;
}
.grecaptcha-badge {
    opacity: 0;
}

.policy {
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
    font-size: 1.5rem;
    margin: 1rem 0 0 1rem;
    width: 26rem;
    opacity: .5
}

@media screen and (max-width:1024px) {
    .form {
        margin-top: 5rem;
        padding: 7.5rem 5rem
    }
    .form__tr {
        display: block;
    }
    .policy {
        width: 100%;
    }
}

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

    .button,
    a.button {
        width: 100%
    }
}

html {
    font-size: var(--size)
}

body {
    background: var(--background);
    background-size: cover;
    color: var(--color-font);
    font-family: var(--font-main), sans-serif;
    font-size: var(--font-size-5);
    line-height: 1.5
}

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

    body,
    html {
        overflow-x: hidden
    }
}

.wrapper {
    position: relative;
    z-index: 3;
    padding: 0 var(--v-outer)
}

.cols {
    display: flex;
    flex-wrap: wrap;
    width: 100%
}

.cols>.cols {
    width: calc(2*var(--h-inner) + 100%);
    margin: 0 calc(-1*var(--h-inner))
}

.col {
    flex-shrink: 0;
    position: relative;
    padding: 0 var(--h-inner);
    width: 100%
}

.w1 {
    width: var(--w-1)
}

.w1-5 {
    width: var(--w-1-5)
}

.w2 {
    width: var(--w-2)
}

.w3 {
    width: var(--w-3)
}

.w4 {
    width: var(--w-4)
}

.w5 {
    width: var(--w-5)
}

.w5-5 {
    width: var(--w-5-5)
}

.w6 {
    width: var(--w-6)
}

.w7 {
    width: var(--w-7)
}

.w8 {
    width: var(--w-8)
}

.w9 {
    width: var(--w-9)
}

@media screen and (max-width:1024px) {
    .cols {
        flex-wrap: wrap;
        padding: 0
    }

    .cols>.cols {
        width: 100%;
        margin: 0
    }

    .col.w1,
    .col.w1-5,
    .col.w2,
    .col.w3,
    .col.w4,
    .col.w5,
    .col.w5-5,
    .col.w6,
    .col.w7,
    .col.w8,
    .col.w9 {
        width: 100%
    }
}

a,
a:visited {
    color: var(--color-link);
    text-decoration: none
}

a:hover {
    color: var(--color-hover)
}

a:active {
    color: var(--color-font)
}

@media screen and (max-width:1024px) {
    a[target=_blank]::after {
        margin: 0 0 -1vw .25vw;
        width: 5.625vw;
        height: 5.625vw
    }
}

h1,
h2,
h3,
h4,
h5 {
    font-family: var(--font-title),sans-serif;
    font-weight: 900;
    margin: var(--v-outer) 0 var(--v-text);
    text-transform: uppercase;
    line-height: 1.125
}

h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child {
    margin-top: 0
}

h1:last-child,
h2:last-child,
h3:last-child,
h4:last-child,
h5:last-child {
    margin-bottom: 0
}

h1 span,
h2 span,
h3 span,
h4 span,
h5 span {
    -webkit-text-stroke: .125rem var(--color-link);
    text-stroke: .125rem var(--color-link);
    color: transparent
}

h1 {
    font-size: var(--font-size-0)
}

h2 {
    font-size: var(--font-size-1);
    letter-spacing: .125vw
}

h2.big {
    font-size: 3.5vw
}

h3 {
    font-size: var(--font-size-2);
    line-height: 1.375;
    letter-spacing: .0625vw
}

h4 {
    font-size: var(--font-size-3);
    line-height: 1.375
}

h5 {
    font-size: var(--font-size-4);
    line-height: 1.375
}

p {
    margin: var(--v-text) 0
}

p:first-child {
    margin-top: 0
}

p:last-child {
    margin-bottom: 0
}

em,
i {
    font-style: normal
}

em {
    font-variant: normal;
    text-transform: none;
    background: var(--color-font);
    font-style: normal;
    font-weight: 400;
    color: var(--background)
}

b,
strong {
    font-weight: 700
}

ul {
    padding: 0;
    list-style: none
}

ul li {
    position: relative
}

ul li::before {
    width: 5px;
    margin: 0 var(--h-inner) 0 0;
    color: var(--color-check);
    content: "•"
}

.text-blq {
    color: var(--color-check);
    font-size: var(--font-size-3);
    line-height: 1.25
}

.text-blq a[target=_blank]::after {
    display: none
}

.main {
    position: relative;
    z-index: 9;
    width: 100%;
}

.section {
    position: relative;
    overflow: hidden;
    padding: 25rem 0;
    background: var(--background)
}

.section__animation,
.section__cover {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden
}

.section__animation img,
.section__cover img {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: bottom center;
    object-position: bottom center;
    transform: translateY(0)
}

.section__animation::after,
.section__animation::before,
.section__cover::after,
.section__cover::before {
    content: "";
    position: absolute;
    z-index: 5;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
}

.section__animation::after,
.section__cover::after {
    background: linear-gradient(0, #000 0, rgba(0, 0, 0, .1) 50%)
}

.section__bg {
    left: 50%;
    width: 50%
}

.section__animation::before {
    background: linear-gradient(90deg, #000 2.5%, rgba(0, 0, 0, 0) 40%)
}

.section__animation img {
    transition: opacity ease-in-out .375s, transform ease-in-out .375s;
    transform: scale(1.125);
    opacity: 0
}

.section__animation img.visible {
    opacity: 1;
    transform: scale(1)
}

@media screen and (max-width:1024px) {
    .section {
        padding: 10rem 0
    }
}

.flash div {
    aspect-ratio: 1/1;
    z-index: 1;
    position: absolute;
    left: 0;
    top: 0;
    width: 150%;
    background: radial-gradient(var(--color-hover) -25%, rgba(0, 0, 0, 0) 65%);
    pointer-events: none;
    transform: translate3d(-50%, -65%, 0)
}

.flash div:nth-child(2n) {
    left: auto;
    top: auto;
    bottom: 0;
    right: 0;
    width: 100%;
    transform: translate3d(50%, 50%, 0)
}

.sticky {
    position: relative;
    z-index: 3
}

.sticky .section {
    position: sticky;
    left: 0;
    top: 0
}

.nav {
    display: flex;
    align-items: center
}

.nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between
}

.nav li>a {
    padding: 0;
    font-size: var(--font-size-n);
    font-weight: 700;
    text-decoration: none
}

.nav li>a:hover {
    color: var(--color-hover)
}

.nav li>a.current {
    color: var(--color-check)
}

.nav li::before {
    display: none
}

.nav__control {
    position: relative;
    width: 3vw;
    height: 3vw;
    background: 0 0;
    border: 0;
    text-indent: -9999rem
}

.nav__control::after,
.nav__control::before {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 75%;
    height: 1.65px;
    transform: translate3d(-50%, -50%, 0);
    background: var(--color-font);
    content: ""
}

.nav__control span::after,
.nav__control span::before {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 75%;
    height: 1.65px;
    transform: translate3d(-50%, -50%, 0);
    background: var(--color-font);
    content: ""
}

.nav__control span::before {
    margin-top: -.625vw
}

.nav__control span::after {
    margin-top: .625vw
}

.logo {
    font-family: var(--font-title),sans-serif;
    font-size: var(--font-size-3);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .125rem
}

@media screen and (max-width:1024px) {
    .logo {
        font-size: var(--font-size-2)
    }
}

.figure {
    position: relative;
    width: 100%;
    height: 100%
}

.cover img,
.cover video,
.video img,
.video video {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center
}

.video__cover {
    position: absolute;
    z-index: 2;
    z-index: 2;
    left: 0;
    top: 0
}

.bg {
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    left: var(--h-inner);
    right: var(--h-inner);
    background: var(--color-gray);
    border-radius: 7.5rem;
    overflow: hidden
}

.bg video {
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: 100%
}

.bg::after {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(rgba(0, 0, 0, .375), #000 87.75%);
    content: ""
}

.socials {
    display: flex;
    flex-wrap: wrap
}

.social {
    position: relative;
    width: 1.6666vw;
    height: 1.6666vw;
    line-height: 1.6666vw;
    background: center no-repeat;
    background-size: cover;
    text-indent: -9999rem;
    opacity: 1
}

.social::before {
    position: absolute;
    left: 0;
    top: 0;
    width: 1.6666vw;
    height: 1.6666vw;
    background: center no-repeat;
    background-size: cover;
    content: ""
}

.social:last-child {
    margin-right: 0
}

.social:first-child {
    margin-left: 0
}

.social--vk::before {
    background-image: url(../odens/img/social--vk.svg)
}

.social--tg::before {
    background-image: url(../odens/img/social--tg.svg)
}

.social--yt::before {
    background-image: url(../odens/img/social--yt.svg)
}

.social--em::before {
    background-image: url(../odens/img/social--em.svg)
}

.social--logo-vk {
    width: 9.5833vw
}

.social--logo-vk::before {
    width: 9.5833vw;
    background-image: url(../odens/img/logo--vk.svg)
}

.social--logo-yt {
    width: 6.3888vw
}

.social--logo-yt::before {
    width: 6.3888vw;
    background-image: url(../odens/img/logo--youtube.svg)
}

.social:hover {
    opacity: .5;
    color: var(--color-hover)
}

@media screen and (max-width:1024px) {
    .socials {
        justify-content: center
    }

    .social {
        width: 7.5vw;
        height: 7.5vw
    }

    .social::before {
        height: 7.5vw
    }

    .social--logo-vk {
        width: 43.1248vw
    }

    .social--logo-vk::before {
        width: 43.1248vw
    }

    .social--logo-yt {
        width: 28.7496vw
    }

    .social--logo-yt::before {
        width: 28.7496vw
    }
}

.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    font-size: var(--font-size-5)
}

.breadcrumbs__link {
    color: var(--color-font) !important
}

@media screen and (max-width:1024px) {
    .breadcrumbs {
        font-size: 3.375vw
    }
}

.details__content {
    padding: 0 0 var(--h-inner)
}

details {
    border-top: .125rem solid hsla(0, 0%, 100%, .1)
}

summary {
    position: relative;
    font-size: var(--font-size-4);
    list-style: none;
    cursor: pointer;
    padding: var(--h-inner) 9rem var(--h-inner) 0
}

summary::after {
    content: "";
    position: absolute;
    top: var(--h-inner);
    right: 2rem;
    width: 5rem;
    height: 5rem;
    background: rgba(236, 7, 137, .125) center no-repeat;
    border: .125rem solid var(--color-link);
    border-radius: 50%;
    background: url(../odens/img/close.svg) center no-repeat;
    background-size: auto 3rem;
    border-radius: 50%;
    transform: rotate(45deg);
    transform-origin: center;
    transition: .25s linear
}

summary::-webkit-details-marker {
    display: none
}

details[open] summary:after {
    transform: rotate(90deg)
}

@media screen and (max-width:1024px) {
    summary {
        padding-bottom: 3rem
    }
}

.label {
    position: relative;
    display: block;
    box-sizing: border-box;
    margin: 1rem 0
}

.label strong {
    position: absolute;
    z-index: 5;
    left: 2rem;
    font-size: var(--font-size-1);
    font-weight: 300;
    line-height: 6.5rem;
    white-space: nowrap
}

.label--focus strong {
    transform: translate3d(0, -1.25rem, 0);
    font-size: var(--font-size-0)
}

.input {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    padding: 1.5rem 2rem 0;
    width: 100%;
    height: 6.5rem;
    background: var(--color-gray);
    border: 1px solid var(--color-gray);
    border-radius: .75rem;
    font-size: var(--font-size-1);
    color: var(--color-font);
    box-shadow: none;
    -webkit-appearance: none
}

.input:focus {
    outline: 0;
    color: var(--color-acnt) !important
}

.input::-webkit-input-placeholder {
    opacity: 0;
    color: hsla(0, 0%, 100%, 0)
}

.input::-moz-placeholder {
    opacity: 0;
    color: hsla(0, 0%, 100%, 0)
}

.input:-ms-input-placeholder {
    opacity: 0;
    color: hsla(0, 0%, 100%, 0)
}

.input:-moz-placeholder {
    opacity: 0;
    color: hsla(0, 0%, 100%, 0)
}

.input:-internal-autofill-previewed,
.input:-internal-autofill-selected,
.input:-webkit-autofill,
.input:-webkit-autofill:active,
.input:-webkit-autofill:focus,
.input:-webkit-autofill:hover {
    -webkit-text-fill-color: var(--background) !important;
    -webkit-box-shadow: 0 !important;
    background: var(--background) !important;
    color: var(--color-font) !important
}

.header {
    position: fixed;
    z-index: 99;
    left: 0;
    top: 0;
    width: 100%
}

.header::before {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .25) 25%, #000 100%);
    opacity: 0;
    transition: opacity ease-in-out .5s;
    content: ""
}

.header__wrapper {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--h-inner);
    border-radius: 25rem
}

.header__logo {
    position: relative;
    line-height: 1;
    white-space: nowrap;
    padding-left: 5rem;
    cursor: pointer
}

.header__logo::before {
    content: "";
    position: absolute;
    left: 0;
    top: -.375rem;
    width: 4rem;
    height: 4rem;
    background: url(../odens/img/logo1.svg) left center no-repeat;
    background-size: auto 100%
}

.header__logo a {
    color: var(--color-font)
}

.header__logo span:nth-child(1) {
    font-style: italic
}

.header__logo span:nth-child(2) {
    -webkit-text-stroke: .0625rem var(--color-font);
    text-stroke: .0625rem var(--color-font);
    color: transparent
}

.header__subline {
    padding-left: 0;
    font-family: additional_font, serif;
    font-size: var(--font-size-5);
    font-weight: 700;
    letter-spacing: .025vw;
    line-height: 1.33
}

.header__nav {
    display: flex;
    align-items: center;
    gap: var(--h-inner)
}

.header__contacts {
    display: flex;
    align-items: center;
    justify-content: flex-end
}

.header--sticky::before {
    opacity: 1
}

.menu {
    display: flex;
    gap: 2rem
}

.menu-item::before {
    display: none
}

.menu-item a {
    color: var(--color-font)
}

.menu-item a:hover {
    color: var(--color-hover)
}

@media screen and (max-width:1280px) {
    .header__nav {
        display: none
    }
}

@media screen and (max-width:1024px) {
    .header__logo::before {
        top: -.5rem
    }

    .header__nav {
        display: none
    }
}

.footer__wrapper {
    padding: var(--v-inner);
    position: relative;
    text-align: center;
    font-size: .75vw;
    letter-spacing: .0625vw
}

.footer__wrapper::before {
    position: absolute;
    left: var(--h-inner);
    right: var(--h-inner);
    top: 0;
    height: 1px;
    background: var(--color-font);
    opacity: .0625;
    content: ""
}

.footer__links {
    margin: 1vw 0 .25vw
}

.footer__author {
    display: none
}

.footer__logo {
    font-family: var(--font-title),sans-serif;
    font-size: var(--font-size-0);
    font-weight: 900;
    text-transform: uppercase;
    text-align: center;
    line-height: 1
}

.footer__logo span {
    display: block
}

.footer__logo span:nth-child(1) {
    font-style: italic;
    color: var(--color-link)
}

.footer__logo span:nth-child(2) {
    margin-top: -4.5rem;
    -webkit-text-stroke: .0625rem var(--color-font);
    text-stroke: .0625rem var(--color-font);
    color: transparent
}

@media screen and (max-width:1024px) {
    .footer__wrapper {
        padding: var(--v-inner) 0;
        font-size: 1.5rem
    }

    .footer__logo span:last-child {
        margin-top: -4.5rem
    }
}

.section--top {
    padding-bottom: 5rem
}

.section--top .cols {
    align-items: center
}

.section--top h1 {
    font-size: 8.5vw;
    letter-spacing: .125vw;
    line-height: 1
}

.section--top h1 span {
    display: block
}

.section--top .button {
    margin: 3.5rem 0 0
}

.section--top .section__animation,
.section--top .section__cover {
    left: 50%;
    width: 50%
}

.section--top .section__animation img,
.section--top .section__cover img {
    -o-object-position: top center;
    object-position: top center
}

@media screen and (max-width:1024px) {
    .section--top {
        padding-top: 75vw
    }

    .section--top h1 {
        font-size: 17.5vw
    }

    .section--top .section__animation {
        aspect-ratio: 1/1;
        left: 0;
        width: 100%;
        height: auto
    }

    .section--top .section__animation::before {
        display: none
    }
}

.section--about {
    padding: 50rem 0 0
}

.section--about .section__cover {
    top: -12.5rem;
    height: 90rem
}

.section--about .section__cover img {
    -o-object-position: top center;
    object-position: top center
}

.section--about .section__wrapper {
    justify-content: flex-end
}

.section--about .flash>div {
    transform: translate3d(-50%, -72.5%, 0)
}

@media screen and (max-width:1024px) {
    .section--about {
        padding-top: 25rem
    }

    .section--about .section__cover {
        top: -5rem;
        height: 45rem
    }
}

.section--advantages {
    padding-top: 10rem
}

.section--calculator .section__cover,
.section--myth .section__cover,
.section--story .section__cover {
    top: -35rem;
    height: 90rem
}

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

    .section--calculator .section__cover,
    .section--myth .section__cover,
    .section--story .section__cover {
        top: -15rem;
        height: 40rem
    }
}

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

    .section--calculator .section__cover,
    .section--myth .section__cover,
    .section--story .section__cover {
        top: -35rem;
        height: 90rem
    }

    .section--calculator .section__cover img,
    .section--myth .section__cover img,
    .section--story .section__cover img {
        -o-object-fit: contain;
        object-fit: contain
    }
}

.section--myth .flash>div:last-child,
.section--story .flash>div:last-child {
    opacity: .375;
    background: radial-gradient(var(--color-blue) -25%, rgba(0, 0, 0, 0) 65%)
}

.section--calculator .flash>div:last-child {
    background: radial-gradient(var(--color-prp) -25%, rgba(0, 0, 0, 0) 65%)
}

.section--start {
    padding-top: 60rem
}

.section--start .section__cover {
    aspect-ratio: 16/9;
    height: auto
}

.section--start .section__cover img {
    -o-object-position: top center;
    object-position: top center
}

@media screen and (max-width:1024px) {
    .section--start {
        padding-top: 20rem
    }
}

.calculator {
    margin: 0 calc(-1*var(--h-inner));
    width: calc(100% + 2*var(--h-inner))
}

.calc__cols {
    width: calc(100% + 2rem);
    margin: 0 -1rem
}

.calc__cols .col {
    padding: 0 1rem;
    margin: 1rem 0 0
}

.calc__tr {
    margin: 2rem 0
}

.calc__tr:first-child {
    margin-top: 0
}

.calc__tr:last-child {
    margin-bottom: 0
}

.calc__title {
    width: 100%;
    font-size: var(--font-size-5)
}

.result {
    padding-top: 4.5rem
}

.result__wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--h-inner);
    height: 100%;
    border: .25rem solid var(--color-link);
    border-radius: 2.5rem;
    text-align: center
}

.result__title {
    width: 100%;
    font-size: var(--font-size-5);
    font-weight: 700
}

.result__sum {
    font-size: var(--font-size-0)
}

.result__cur {
    font-size: var(--font-size-0)
}

.result__small {
    margin: 1rem 0 0;
    font-size: 1.5rem;
    opacity: .375
}

.marq {
    position: relative;
    z-index: 2;
    margin: 10rem 0 0;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    -webkit-text-stroke: .125rem var(--color-link);
    text-stroke: .125rem var(--color-link);
    color: transparent
}

.marq__wrapper {
    display: flex
}

.icons-adv {
    display: flex;
    flex-shrink: 0
}

.icons-adv>li {
    flex-shrink: 0;
    padding: 0 3.25rem;
    font-family: var(--font-title),sans-serif;
    font-size: var(--font-size-1);
    font-weight: 900;
    text-transform: uppercase
}

.icons-adv>li::before {
    display: none
}

.icons-sml>li {
    font-size: var(--font-size-5)
}

.icons-sml>li::before {
    display: none
}

.desc {
    font-size: var(--font-size-4)
}

.next,
.prev {
    width: 7.5rem;
    height: 7.5rem;
    background: rgba(236, 7, 137, .125) center no-repeat;
    border: .125rem solid var(--color-link);
    border-radius: 50%;
    background-size: auto 4rem;
    cursor: pointer;
    transform: scale(1);
    transition: all ease-in-out .125s;
    pointer-events: auto
}

.next:hover,
.prev:hover {
    background-color: var(--color-hover);
    border-color: var(--color-hover);
    box-shadow: 0 .375rem 3.5rem var(--color-link);
    transform: scale(1.125)
}

.next:active,
.prev:active {
    filter: brightness(85%);
    box-shadow: 0 0 0 var(--color-link)
}

.carousel {
    margin: 0 calc(-1*var(--h-inner));
    width: calc(100% + 2*var(--h-inner))
}

.carousel__controls {
    display: flex;
    gap: 2rem;
    position: absolute;
    right: 0;
    top: 0;
    margin: var(--h-inner)
}

.carousel__prev {
    background-image: url(../odens/img/prev.svg)
}

.carousel__next {
    background-image: url(../odens/img/next.svg)
}

.carousel__wrapper {
    display: flex
}

.carousel__slide {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    padding: var(--h-inner);
    width: 45%
}

.carousel__slide>.cols {
    flex-direction: column;
    position: relative;
    z-index: 1;
    padding: 0 var(--h-inner) var(--v-outer);
    background: var(--background);
    border-radius: 2.5rem;
    overflow: hidden;
    box-shadow: 0 1rem 5rem rgba(236, 7, 137, .1);
    transition: box-shadow ease-in-out .375s
}

.carousel__slide>.cols::after {
    aspect-ratio: 1/1;
    content: "";
    z-index: 2;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 250%;
    background: radial-gradient(var(--color-hover) -25%, rgba(0, 0, 0, 0) 65%);
    pointer-events: none;
    transform: translate3d(25%, 50%, 0)
}

.carousel__slide>.cols:hover {
    z-index: 2;
    box-shadow: 0 3rem 12rem rgba(236, 7, 137, .5)
}

.carousel__cover {
    position: relative;
    z-index: 1
}

.carousel__cover img {
    margin: 0 0 0 -4rem;
    max-width: 150%;
    width: 150%
}

.carousel__content {
    position: relative;
    z-index: 3;
    padding: 0 var(--h-inner)
}

@media screen and (max-width:1024px) {
    .carousel__cover img {
        margin: 0 auto;
        width: 100%
    }

    .carousel__content {
        padding: 0
    }

    .carousel__controls {
        z-index: 2;
        margin: 14rem 5rem 0
    }
}

.slider {
    margin: 4rem auto 0;
    width: 45%
}

.slider__controls {
    aspect-ratio: 1/1;
    position: absolute;
    z-index: 2;
    left: 50%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2.5rem;
    width: 45%;
    transform: translateX(-50%);
    pointer-events: none
}

.slider__prev {
    margin-left: -10.5rem;
    background-image: url(../odens/img/prev.svg)
}

.slider__next {
    margin-right: -10.5rem;
    background-image: url(../odens/img/next.svg)
}

.slider__wrapper {
    z-index: 1;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start
}

.slider__slide {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    width: 100%
}

.slider__cover {
    position: relative;
    z-index: 1
}

.slider__cover img {
    margin: 0 0 0 -4rem;
    max-width: 150%;
    width: 150%
}

.slider__content {
    position: relative;
    z-index: 3;
    padding: 0 var(--h-inner)
}

.model__cover {
    aspect-ratio: 1/1;
    border-radius: 2.5rem;
    overflow: hidden;
    transform: scale(.5);
    filter: blur(12px);
    transition: all ease-in-out .5s
}

.model__name {
    font-size: var(--font-size-2)
}

.model__name,
.model__review {
    transform: translateY(10rem);
    transition: all ease-in-out .5s;
    opacity: 0
}

.swiper-slide-active .model__cover {
    transform: scale(1);
    filter: blur(0)
}

.swiper-slide-active .model__name,
.swiper-slide-active .model__review {
    transform: translateY(0);
    opacity: 1
}

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

    .model__name,
    .model__review {
        margin-left: -50%;
        width: 200%
    }
}

.advantages,
.myths {
    margin: 10rem calc(-1*var(--h-inner)) 0;
    width: calc(100% + 2*var(--h-inner))
}

.advantages {
    margin-bottom: 20rem
}

.advantage__cover {
    aspect-ratio: 1/1;
    width: 50%;
    border-radius: 50%;
    overflow: hidden
}

@media screen and (max-width:1024px) {
    .advantages {
        margin-top: 2rem
    }

    .advantage {
        width: 50% !important
    }

    .advantage__cover {
        width: 33%
    }
}

@media screen and (max-width:640px) {
    .advantage__cover {
        width: 50%
    }
}

@media screen and (min-width:1600px) {
    .advantage__cover {
        width: 33%
    }
}

.contacts {
    margin: var(--v-outer) 0
}

@media screen and (max-width:1024px) {
    .index {
        padding: 0
    }
}

.mobile {
    display: none;
    position: fixed;
    z-index: 98;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .925);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    overflow: hidden;
    overflow-y: scroll
}

.mobile__wrapper {
    padding: 0 var(--h-inner);
    width: 100%
}

.mobile__nav ul {
    display: flex;
    flex-direction: column
}

.mobile__nav li {
    border-bottom: 1px solid hsla(0, 0%, 100%, .125)
}

.mobile__nav li::before {
    display: none
}

.mobile__nav li:last-child {
    border-bottom: 0
}

.mobile__nav a {
    display: block;
    padding: .5rem 0 2.5rem;
    font-family: var(--font-title),sans-serif;
    font-size: var(--font-size-2);
    font-weight: 900;
    text-transform: uppercase;
    width: 100%;
    line-height: 1
}

.mobile__nav a.current {
    color: var(--color-link)
}

.mobile-control {
    display: none;
    position: fixed;
    z-index: 999;
    right: 0;
    top: 0;
    margin: var(--h-inner);
    width: 5rem;
    height: 5rem
}

.mobile-control::after,
.mobile-control::before,
.mobile-control__icon {
    position: absolute;
    left: 0;
    top: 50%;
    margin: -.3125rem 0 0;
    width: 100%;
    height: .25rem;
    background: var(--color-font);
    border-radius: 2rem;
    transform-origin: center;
    transition: all ease-in-out .25s;
    content: ""
}

.mobile-control::before {
    transform: rotateZ(0) translate(0, -1.5rem)
}

.mobile-control::after {
    transform: rotateZ(0) translate(0, 1.5rem)
}

.mobile-control.open .mobile-control__icon {
    opacity: 0
}

.mobile-control.open::before {
    transform: rotateZ(-45deg)
}

.mobile-control.open::after {
    transform: rotateZ(45deg)
}

@media screen and (max-width:1280px) {
    .mobile-control {
        display: block
    }

    .mobile.visible {
        display: flex;
        align-items: center
    }
}

.error-page {
    margin: 0 auto;
    padding: 15rem var(--h-inner) 0;
    width: 33.3333%;
    text-align: center
}

.error-page__image {
    aspect-ratio: 1/1
}

.page-bar {
    padding: 0 var(--h-inner);
}
.page-bar,
.error-page__bar {
    margin: var(--v-inner) 0 var(--v-outer)
}

.page-inner {
    margin: 0 auto;
    width: 50%;
}
.page-content {
    padding-bottom: 1rem;
}

@media screen and (max-width:1024px) {
    .page-inner,
    .error-page {
        width: 100%
    }
}
/*# sourceMappingURL=style.css.map */