.myth-toggle-section {
    padding: var(--section-padding)
}

.myth-toggle .myth-content {
    font-size: min(16px, 1.6vw);
    overflow: hidden;
    position: relative;
    height: 27.3em;
    border-radius: 5000px;
    background-color: var(--bg-color);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center
}

.myth-toggle .myth-content .myth-back {
    position: relative;
    z-index: 1;
    color: #fff;
    text-transform: uppercase;
    font-weight: 900;
    height: 100%;
    line-height: .95;
    letter-spacing: .03em;
    user-select: text;
    -webkit-user-select: text
}

.myth-toggle .myth-content .myth-back .back-text {
    padding-left: 4.375em;
    padding-top: 7.5em;
    max-width: 30em;
    user-select: text;
    -webkit-user-select: text
}

.myth-toggle .myth-content .myth-back .back-text .title {
    font-size: 3em
}

.myth-toggle .myth-content .myth-back .back-text .subtitle {
    max-width: 10.5em;
    font-size: 1.8em
}

.myth-toggle .myth-content .myth-front {
    z-index: 2;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transition: opacity .2s;
    opacity: 0;
    pointer-events: none
}

.myth-toggle .myth-content .myth-front.active {
    opacity: 1;
    pointer-events: auto
}

.myth-toggle .myth-content .myth-front .transparent-bg {
    z-index: 1;
    border-radius: 5000px;
    opacity: .8;
    background-color: var(--bg-color);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
}

.myth-toggle .myth-content .myth-front .front-text {
    z-index: 2;
    max-width: 28.375em;
    padding-right: 4.5em;
    font-size: 1.125em;
    letter-spacing: .05em;
    font-weight: 400;
    line-height: 1.375em;
    color: #fff;
    user-select: text;
    -webkit-user-select: text
}

.myth-toggle .myth-content .truth-circle {
    z-index: 3;
    padding: 1.125em;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transition: transform .3s;
    pointer-events: none
}

.myth-toggle .myth-content .truth-circle.active {
    width: auto
}

.myth-toggle .myth-content .truth-circle .toggle-circle {
    left: calc(100% - 24.8em);
    position: relative;
    transition: left .3s;
    height: 100%;
    background-color: #fff;
    display: flex;
    align-items: center;
    border-radius: 50%;
    width: 24.8em;
    pointer-events: auto
}

.myth-toggle .myth-content .truth-circle .toggle-circle.active {
    left: 0
}

.myth-toggle .myth-content .truth-circle .toggle-circle .circle {
    padding: 3.2em 1.125em 0 3.5em
}

.myth-toggle .myth-content .truth-circle .toggle-circle .circle-text {
    font-size: 3em;
    font-weight: 900;
    line-height: .95em;
    text-transform: uppercase;
    letter-spacing: -.03em;
    user-select: text;
    -webkit-user-select: text
}

.myth-toggle .myth-content .truth-circle .btn {
    letter-spacing: .05em
}

.myth-toggle .myth-content .truth-circle .btn svg {
    font-size: 1.5em;
    margin-right: .5em
}

.myth-toggle .myth-content .truth-circle .btn .expand {
    display: flex
}

.myth-toggle .myth-content .truth-circle .btn.active .expand,
.myth-toggle .myth-content .truth-circle .btn .collapse {
    display: none
}

.myth-toggle .myth-content .truth-circle .btn.active .collapse {
    display: flex
}

@media all and (max-width:600px) {
    .myth-toggle .myth-content {
        font-size: min(1.2em, 4vw);
        width: 21.5em;
        height: 41.25em;
        background-position: 0 36%
    }
    .myth-toggle .myth-content .myth-back .back-text .subtitle {
        max-width: 11em
    }
    .myth-toggle .myth-content .myth-front .front-text {
        font-size: .875em;
        padding: 2em 2em 8em
    }
    .myth-toggle .myth-content .myth-back .back-text {
        width: fit-content;
        padding-top: 3em;
        margin: auto;
        padding-left: 0;
        text-align: center
    }
    .myth-toggle .myth-content .myth-back .back-text .title {
        font-size: 2.5em
    }
    .myth-toggle .myth-content .truth-circle .toggle-circle {
        top: calc(100% - 19em);
        left: 0;
        width: 19em;
        height: 19em;
        transition: top .3s
    }
    .myth-toggle .myth-content .truth-circle .toggle-circle.active {
        top: 0
    }
    .myth-toggle .myth-content .truth-circle .toggle-circle .circle {
        padding: 3.2em 2.3125em 0;
        text-align: center
    }
    .myth-toggle .myth-content .truth-circle .toggle-circle .circle-text {
        font-size: 2.5em
    }
    .myth-toggle .myth-content .truth-circle .btn {
        padding-left: .5em
    }
    .myth-toggle .myth-content .truth-circle .btn svg {
        transform: rotate(90deg)
    }
}

/*# sourceMappingURL=/cdn/shop/t/138/assets/myth_toggle.css.map?v=76343277074830353131781188227 */