.navigation {
    background: rgba(0, 0, 0, 0);
    height: 82px;
    z-index: 10
}

.navigation a {
    z-index: 5
}

.navigation .manti-logo {
    height: 46px;
    width: auto
}

@media(min-width: 992px) {
    .navigation .manti-logo {
        height: auto;
        width: 100%
    }
}

@media(min-width: 992px) {
    .navigation {
        height: 102px
    }
}

.navigation.sticked {
    background: linear-gradient(110deg, #002f6c 30%, #2c91d6 110%)
}

.navigation.articles-nav {
    background: linear-gradient(110deg, #002f6c 30%, #2c91d6 110%)
}

.navigation .hamburger {
    z-index: 999;
    padding: 0
}

.navigation .navigation-link {
    padding: .5em 0;
    display: inline-block;
    text-decoration: none;
    color: var(--color-white)
}

.navigation .navigation-collapse {
    padding: 100px 23px;
    height: 100vh;
    width: 100vw;
    position: absolute;
    top: 0;
    margin: 0;
    left: 0;
    background: linear-gradient(-18deg, var(--color-dark-blue-gradient-end), var(--color-dark-blue-gradient-start));
    z-index: 4
}

.navigation .navigation-collapse .navigation-link {
    font-size: 24px
}

.navigation .navigation-collapse.collapsing {
    transition: none;
    display: none
}

.navigation .language {
    text-align: center;
    margin-top: auto
}

.navigation .language a {
    color: var(--color-white);
    opacity: .5;
    margin: 0 .25em
}

.navigation .language a.active {
    opacity: 1
}

#menu-top_nav_mobile {
    list-style: none
}

#menu-top_nav_mobile a {
    padding: .5em 0;
    display: inline-block;
    text-decoration: none;
    color: var(--color-white);
    font-size: 24px
}

#menu-top_nav_mobile li.button a {
    font-size: 18px;
    padding: 0px 25px
}

.menu-top_nav-container li {
    list-style: none
}

.menu-top_nav-container li a {
    padding: .5em 0;
    font-size: 15px;
    line-height: 1.2em;
    text-decoration: none;
    color: #fff;
    font-weight: var(--font-weight-bold)
}

footer .menu-top_nav-container li a {
    color: var(--color-main);
    margin-right: 1rem !important
}

footer .menu-top_nav-container li:last-child a {
    border-color: var(--color-main);
    color: var(--color-main)
}

footer .menu-top_nav-container li:last-child a:hover {
    background-color: #002f6c !important;
    border-color: #002f6c;
    color: #fff
}

.menu-top_nav-container li:last-child a {
    width: auto;
    font-size: 18px;
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
    padding: 15px 25px;
    text-align: center;
    border-radius: 100px;
    border: solid 1px rgba(0, 0, 0, 0);
    background-color: rgba(0, 0, 0, 0);
    text-decoration: none;
    border-color: var(--color-white);
    display: inline-block;
    z-index: 2;
    background-color: rgba(0, 0, 0, 0);
    color: var(--color-white)
}

.menu-top_nav-container a:hover {
    text-decoration: underline
}

.menu-top_nav-container li:last-child a:hover {
    background-color: var(--color-white) !important;
    color: var(--color-main)
}

.menu-footer_links_nav-container a:hover {
    color: inherit;
    text-decoration: underline
}

.menu-footer_links_nav-container ul {
    list-style: none;
    padding: 0
}

.menu-footer_links_nav-container li {
    display: inline-block;
    padding: 0
}

.menu-footer_links_nav-container a {
    font-size: 16px;
    line-height: 2em;
    padding: 0;
    display: inline-block;
    color: var(--color-main);
    text-decoration: none
}

nav {
    max-width: 100vw
}

.manti-extra-packshot-container {
    position: relative
}

.manti-extra-packshot-container .manti-extra-packshot {
    width: min(max(315px, 50vh), 475px);
    height: auto;
    max-width: 100%;
    position: relative;
    aspect-ratio: attr(width)/attr(height)
}

.manti-extra-packshot-container .manti-extra-packshot.packshot-dropshadow {
    filter: drop-shadow(-100px 100px 99px rgba(0, 28, 64, 0.72))
}

.manti-extra-packshot-container .manti-extra-packshot.packshot-products {
    width: 100%;
    max-width: 311px
}

.manti-extra-packshot-container .manti-extra-packshot-label {
    display: inline-block;
    padding: 9px 18px;
    transform: skewX(-18deg);
    background-color: var(--color-light-red);
    background-image: url(/wp-content/themes/manti2.0/assets/img/label_shadow.svg);
    background-repeat: no-repeat;
    background-position: -4px 100%;
    position: absolute;
    left: -30px;
    top: -30px;
    z-index: 0;
    font-size: 13px;
    font-weight: var(--font-weight-bold)
}

.manti-extra-packshot-container .manti-extra-packshot-label span {
    display: inline-block;
    transform: skewX(18deg)
}

.manti-packshot-container .manti-packshot {
    width: min(max(315px, 50vh), 475px);
    height: auto;
    max-width: 100%;
    aspect-ratio: attr(width)/attr(height)
}

.manti-packshot-container .manti-packshot.packshot-dropshadow {
    filter: drop-shadow(-100px 100px 99px rgba(0, 28, 64, 0.72))
}

.manti-packshot-container .manti-packshot.packshot-products {
    width: 100%;
    max-width: 308px
}

.hero-banner {
    font-family: "acumin-pro", sans-serif;
    background: linear-gradient(115deg, #5fbfd5 50%, #18778d);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20vw - 25px), 0% calc(100% - 25px));
    backface-visibility: hidden;
    padding-bottom: 100px;
    padding-top: 150px
}

.hero-banner.banner-manti {
    background: linear-gradient(114deg, var(--color-hero-banner-gradient-start) 50%, var(--color-strong-blue-gradient-end))
}
.hero-banner .style-custom-title-2{
    font-size: min(34px, 3vw);
    font-weight:700;

}
.hero-banner .style-custom-title-3{
    font-size: min(24px, 3vw);
    font-weight:700;

}
@media(min-width: 992px) {
    .hero-banner {
        min-height: 768px;
        max-height: 1080px;
        height: 95vh;
        clip-path: polygon(100% 0, 100% 80%, 50% 100%, 0 80%, 0 0)
    }

    .hero-banner .style-title-1 {
        font-size: min(64px, 3vw);
        line-height: 1.2em
    }

    .hero-banner .style-body-2 {
        font-size: min(32px, 1.75vw);
        line-height: 1.5em
    }
}

.hero-banner .column-text {
    z-index: 1
}

.hero-banner .gradient-blenda {
    background-image: linear-gradient(90deg, var(--color-white-blue-gradient-start), var(--color-white-blue-gradient-end));
    position: absolute;
    bottom: 15vw;
    width: 150vw;
    left: -10vw;
    transform: rotate(-191deg);
    min-height: 100px
}

.hero-banner ul {
    list-style-image: url("/wp-content/themes/manti2.0/assets/img/bullet-white.svg")
}

.hero-banner .shadow-strips {
    z-index: -1;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}

@media(min-width: 1400px) {
    .hero-banner .shadow-strips {
        transform: translate(-50%, -50%) scale(1.5)
    }
}

.hero-banner .manti-pill {
    width: 75px;
    filter: drop-shadow(-20px 20px 60px rgba(51, 65, 83, 0.13));
    top: 100px;
    left: 35vw
}

.hero-banner .high {
    z-index: 2
}

.manti-glow {
    text-shadow: 0 0 20px #fff, 0 0 30px #3566e6, 0 0 40px #3566e6, 0 0 50px #3566e6, 0 0 60px #3566e6, 0 0 70px #3566e6, 0 0 80px #3566e6
}

.manti-glow-complex {
    text-shadow: 0 0 20px #fff, 0 0 30px #5dbfd4, 0 0 40px #5dbfd4, 0 0 50px #5dbfd4, 0 0 60px #5dbfd4, 0 0 70px #5dbfd4, 0 0 80px #5dbfd4
}

.man-section {
    padding-top: 50px
}

.button.button-complex {
    background-color: #60bfd7;
    border-color: #60bfd7
}

.button.button-complex-outline {
    background-color: var(--color-white);
    color: #60bfd7;
    border-color: hsl(192, 67%, 76%);
}

.button.button-complex-outline:hover {
    background-color: #60bfd7;
    color: var(--color-white)
}
.button.button-white:hover {
    background-color: hsl(192, 67%, 76%)!important;
    border-color: hsl(192, 67%, 76%)!important;
    color: var(--color-white)!important;
}
.button.button-complex:hover {
    border-color: hsl(192, 67%, 76%);
    background-color: hsl(192, 67%, 76%);
    color: var(--color-white)
}
.sup-text{color:var(--color-main)};
@media(min-width: 992px) {
    .man-section {
        padding-top: 150px
    }
}
.manti-complex-color{
    color:#428BB6;
}
.manti-logo-text{
    height:auto!important;
}
.man-section .addon {
    left: 0;
    top: 2em;
    height: 50%;
    width: 30px;
    border-radius: 100px 0 0 100px;
    border: solid 1px var(--color-main);
    border-right: none
}

@media(min-width: 992px) {
    .man-section .addon {
        top: calc(3em + 20px);
        height: calc(50% - 10px)
    }
}

.man-section .addon img {
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%)
}

.man-section .strips-1 {
    right: -200px;
    top: 10vh;
    z-index: -1
}

.man-section .pills {
    width: 100%;
    filter: drop-shadow(-40px 40px 20px rgba(0, 47, 108, 0.28))
}

.man-section .pill-hero {
    filter: drop-shadow(40px 40px 20px rgba(0, 47, 108, 0.28));
    transform: scaleX(-1);
    width: 70px;
    top: -170px;
    right: 40vw
}

@media(min-width: 992px) {
    .man-section .pill-hero {
        top: -100px;
        right: 33vw;
        width: 100px
    }

    .man-section .pill-hero.pill-manti {
        transform: none
    }
}

.man-section .pill-2 {
    width: 100px;
    top: 0;
    left: 20vw;
    transform: rotate(-45deg)
}

.man-section .pill-3 {
    bottom: -150px;
    width: 110px;
    right: 15vw;
    transform: rotate(-45deg)
}

@media(min-width: 992px) {
    .man-section .pill-3 {
        bottom: 0
    }
}

.man-section ul {
    list-style-image: url("/wp-content/themes/manti2.0/assets/img/bullet-text.svg")
}

.man-section .strip-index {
    left: -50%;
    top: -330px;
    z-index: -1
}

.gradient-section {
    --gradient-section-transparent-offset: 150vw;
    padding-bottom: 350px !important;
    background: linear-gradient(164deg, transparent var(--gradient-section-transparent-offset), #60bfd7 calc(var(--gradient-section-transparent-offset) + 1px), #307687 100%)
}

@media(min-width: 576px) {
    .gradient-section {
        --gradient-section-transparent-offset: 60vw
    }
}

@media(min-width: 768px) {
    .gradient-section {
        --gradient-section-transparent-offset: 50vw
    }
}

@media(min-width: 992px) {
    .gradient-section {
        --gradient-section-transparent-offset: 40vw
    }
}

.gradient-section .strip-1 {
    left: 0;
    z-index: -1
}

.gradient-section .strip-1.product-s {
    top: 400px
}

.gradient-section .strip-2 {
    right: -60px;
    top: 100px;
    z-index: -1
}

.dosing {
    background-color: var(--color-white);
    border-radius: 40px;
    z-index: 2;
    filter: drop-shadow(-20px 20px 60px rgba(51, 65, 83, 0.13))
}

.dosing .bc-light-blue {
    background-color: rgba(184, 200, 224, .23)
}
.dosing .bc-light-lightblue {
    background-color: hsla(192, 67%, 76%, 0.295);

}
.apla-parent .apla.apla-1-complex{
    background-color: hsl(192, 67%, 76%);

}
.apla-parent .apla.apla-2-complex{
    background-color: hsl(191, 22%, 47%)

}
@media(min-width: 992px) {
    .dosing .bc-lg-light-blue {
        background-color: rgba(184, 200, 224, .23)
    }
}

.dosing img {
    max-height: 75vh
}

@media(min-width: 1400px) {
    .dosing img {
        max-height: none;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%) scale(0.8);
        transform-origin: 50% 100%
    }
}

.dosing .apla-1 {
    --apla-1-left: 20px;
    bottom: calc(0px - var(--apla-1-left));
    z-index: -1;
    left: var(--apla-1-left);
    height: 100px;
    background-color: var(--color-dark-blue);
    border-radius: 0 0 100px 100px;
    width: calc(100% - 2*var(--apla-1-left))
}

.dosing .apla-2 {
    --apla-2-left: 30px
}

.slider-section {
    --slide-image-offset: 90px;
    --slide-image-height: 290px;
    top: -300px
}

.slider-section .swiper-row {
    height: calc(100% + var(--slide-image-offset));
    overflow-x: clip;
    margin-left: 20px
}

.slider-section h2 {
    z-index: 1
}

.slider-section .tip-box {
    border-radius: 40px;
    background-color: var(--color-bright-blue);
    z-index: 2
}

.slider-section .articles-slider {
    overflow: visible;
    margin: 134px -23px calc(0px - var(--slide-image-offset))
}

.slider-section .articles-slider .article-slide {
    padding: calc(var(--slide-image-height) - var(--slide-image-offset)) 20px 20px;
    overflow: visible;
    background-color: var(--color-white);
    border-radius: 34px;
    filter: drop-shadow(-30px 30px 60px rgba(51, 65, 83, 0.08))
}

.slider-section .articles-slider .article-slide .article-slide-banner {
    top: calc(0px - var(--slide-image-offset));
    width: calc(100% - 40px);
    height: var(--slide-image-height);
    border-radius: 40px;
    object-fit: cover
}

.slider-section .slide-next,
.slider-section .slide-prev {
    transition: background-color .3s;
    width: 50px;
    border-radius: 50px
}

.slider-section .slide-next.swiper-button-disabled,
.slider-section .slide-prev.swiper-button-disabled {
    opacity: .5;
    pointer-events: none
}

.slider-section .slide-next:hover,
.slider-section .slide-prev:hover {
    background-color: rgba(255, 255, 255, .2)
}

.slider-section .slide-prev {
    transform: rotate(90deg)
}

.slider-section .slide-next {
    transform: rotate(-90deg)
}

.slider-section .blenda {
    right: -100%;
    z-index: 0
}

.bullet {
    background: var(--color-white);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    filter: drop-shadow(-30px 30px 60px rgba(112, 140, 177, 0.2))
}

.bullet .point {
    color: var(--color-white);
    font-size: 20px;
    line-height: 70px;
    background: var(--color-light-blue);
    border-radius: 100px;
    width: 70px
}

.apla {
    height: 60px;
    border-radius: 0 0 100px 100px;
    filter: drop-shadow(-50px -50px 99px rgba(51, 65, 83, 0.13))
}

@media(min-width: 992px) {
    .apla {
        height: 120px
    }
}

.apla.apla-1 {
    z-index: 1;
    --apla-1-left: 15px;
    bottom: -15px;
    left: var(--apla-1-left);
    background-color: var(--color-dark-blue);
    width: calc(100% - 2*var(--apla-1-left))
}

@media(min-width: 992px) {
    .apla.apla-1 {
        --apla-1-left: 30px;
        bottom: -30px
    }
}

.apla.apla-2 {
    z-index: 0;
    --apla-2-left: 50px;
    bottom: -30px;
    left: var(--apla-2-left);
    background-color: var(--color-main);
    width: calc(100% - 2*var(--apla-2-left))
}

@media(min-width: 992px) {
    .apla.apla-2 {
        --apla-2-left: 120px;
        bottom: -60px
    }
}

footer {
    color: var(--color-main);
    background-color: var(--color-white-blue)
}

footer .bordered-section {
    border-bottom: solid 1px rgba(0, 47, 108, .7)
}

@media(min-width: 992px) {
    footer .links-section {
        border-left: solid 1px rgba(0, 47, 108, .7)
    }
}

footer img {
    width: 140px;
    height: auto
}

.button {
    width: 100%;
    font-size: 18px;
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
    padding: 15px 25px;
    text-align: center;
    border-radius: 100px;
    border: solid 1px rgba(0, 0, 0, 0);
    background-color: rgba(0, 0, 0, 0);
    text-decoration: none;
    border-color: var(--color-white);
    display: inline-block;
    z-index: 2
}

.button.button-red {
    background-color: var(--color-strong-red);
    border-color: var(--color-strong-red)
}

.button.button-red:hover {
    background-color: #ff000c;
    color: var(--color-white)
}

.button.button-red-outline {
    background-color: var(--color-white);
    color: var(--color-strong-red)
}

.button.button-red-outline:hover {
    background-color: var(--color-strong-red);
    color: var(--color-white)
}

.button.button-main {
    background-color: var(--color-main);
    border-color: var(--color-main)
}

.button.button-main:hover {
    background-color: #2c91d6;
    border-color: #2c91d6;
    color: var(--color-white)
}

.button.button-main-outline {
    background-color: rgba(0, 0, 0, 0);
    color: var(--color-main)
}

.button.button-main-outline:hover {
    background-color: #002f6c;
    border-color: #002f6c;
    color: #fff
}

.button.button-main-outline.button-main-outline-article:hover {
    background-color: #2c91d6 !important
}

.button.button-white {
    background-color: var(--color-white);
    border-color: var(--color-white);
    color: var(--color-main)
}

.button.button-white-outline {
    background-color: rgba(0, 0, 0, 0);
    color: var(--color-white)
}

.button.button-white-outline:hover {
    background-color: var(--color-white) !important;
    color: var(--color-main)
}

.button.button-white-outline-hero:hover {
    background-color: var(--color-white);
    color: var(--color-main)
}

.button.button-white:hover {
    background-color: var(--color-light-blue)
}

.button.button-fixed {
    border-radius: 30px 30px 0 0;
    left: 0;
    z-index: 5;
    bottom: 0;
    width: 100%;
    filter: drop-shadow(0 -30px 10px rgba(112, 140, 177, 0.2))
}

.link {
    padding: .5em 0;
    font-size: 18px;
    line-height: 1.2em;
    color: var(--color-main);
    text-decoration: none
}

.link:hover {
    color: var(--color-main);
    text-decoration: underline
}

.link.link-small {
    font-size: 16px;
    line-height: 2em
}

/*# sourceMappingURL=manti.css.map */