:root {
    --realmix-main: #1d2546;
    --realmix-second: #384888;
    --realmix-choc: #60b01f;
    --realmix-choc-shade: #005a1c;
    --white: white;
    --realmix-main-shade: #003166;
    --black: black;
    --realmix-font: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.w-layout-blockcontainer {
    max-width: 940px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

/*.chocolates {
	margin-left: -20px;
	margin-right: -20px;
} */

.w-nav-coming-soon {
    position: relative;
    display: inline-block;
    vertical-align: top;
    text-decoration: none;
    color: #222222;
    padding: 20px;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
}

.landing-image {
    width: 300px;
}

.mobile-banner {
    display: none;
}

.desktop-banner {
    display: block;
}

.header-container {
    margin-left: auto;
    margin-right: auto;
    max-width: 1200px;
}


.datenschutz-section {
    padding: 20vh 0;
}

.real-hero {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: normal !important;
}

.b-hero,
.c-hero,
.l-hero {
    width: 100%;
    height: 100%;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* .c-hero {
    z-index: 1;
} */

.landing-section {
    margin-top: 50px;
}

.figure-block img {
    width: 320px;
    margin-top: -50px;
}

.b-hero {
    background-image: url('../images/landing-title-b.png');
    background-attachment: fixed;
    background-position: -35% 50%;
}

.faq-box {
    display: grid;
    /* place-content: start; */
    gap: 6px;
    margin: 40px 0;
}

.faqs {
  width: var(--max-width);
  margin-inline: auto;
}

details {
  border-bottom: 1px solid #222222;
}

summary {
  list-style: none;
  /* padding: 22px 48px 22px 0; */
  font-size: 1.125rem;
  font-weight: 500;
  position: relative;
  outline: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

summary h3 {
    font-size: 18px;
}

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

.icon {
  transition: transform 0.25s ease;
  font-size: 1.1rem;
  color: #222222;  
  cursor: pointer;
}

details[open] .icon {
  transform: rotate(180deg);
}

.answer {
  padding: 0 0 18px;
  color: var(--muted);
}

/* .b-hero:after {
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    content:'';
    background-image: inherit;
    transform-origin: top right;
    transform: skewX(-4deg);
} */

.c-hero {
    background-image: url('../images/landing-title-c.png');
    background-attachment: fixed;
}

.l-hero {
    background-image: url('../images/landing-title-l.png');
}

.woo-section {
    min-height: 100vh;
    align-content: center;
}

.catalogue-section {
    height: 50vh;
    align-content: center;
    background-color: var(--realmix-second);
}

.ct-btn-row {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 10px;
    padding-right: 10px;
}

.pack-row {
    justify-content: left !important;
}

.pack-paragraph {
    font-size: 20px !important;
    line-height: 26px !important;
}

.big-title {
    width: 50%;
    color: var(--realmix-main);
}

.big-btn {
    background-color: var(--realmix-main);
    padding: 20px;
    margin: 10px;
    justify-content: center;
    text-align: center;
    align-items: center;
    color: white !important;
    border-radius: 15px;
    cursor: pointer;
    display: flex !important;
    text-decoration: none;
    font-size: 1.3em;
}

.big-btn svg {
    margin-right: 10px;
    height: 50px;
    width: 50px;
}

.big-btn:hover {
    background-color: white;
    color: var(--realmix-second) !important;
}

.w-btn {
    display: flex;
    align-content: center;
    justify-content: center;
}

.heading-42 {
    color: var(--realmix-main) !important;
    text-align: left;
}

.big-btn p {
    font-size: 1.5em;
    margin-top: 0;
    margin-bottom: 0;
}

.w-contactainer {
    width: 100%;
}

.shopheader {
    display: flex;
    flex-direction: column;
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}

.w-logo-blockcontainer {
    max-width: 940px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.w-embed-youtubevideo {
    background-image: url('https://d3e54v103j8qbb.cloudfront.net/static/youtube-placeholder.2b05e7d68d.svg');
    background-position: 50%;
    background-size: cover;
    width: 100%;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    position: relative;
}

.customer-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
}

.customer-item {
    width: 16.666666666666668%;
    margin: 20px;
}

.customer-item img {
    padding: 1px;
}

.product-h-mobile {
    display: none;
}

.distributor-col img {
    height: 50%;
    width: 50%;
}

.olive-anima {
    width: 60%;
}

.w-embed-youtubevideo:empty {
    min-height: 75px;
    padding-bottom: 56.25%;
}

@media screen and (max-width: 991px) {
    .w-layout-blockcontainer {
        max-width: 728px;
    }
}

@media screen and (max-width: 767px) {
    .w-layout-blockcontainer {
        max-width: none;
    }
}

.navbar {
    background-color: var(--realmix-main);
    font-family: Myriadpro, sans-serif;
    position: fixed;
    top: 0%;
    bottom: auto;
    left: 0%;
    right: 0%;
}

.column-15-mobile,
.column-16-mobile {
    display: none;
}

.email-link {
    color: #1d2546;
    cursor: pointer;
    text-decoration: none;
}

.email-link:hover {
    text-decoration: underline;
}

.swiper-section {
    height: calc(100vh - 60px);
    min-height: calc(100vh - 60px);
    overflow: hidden;
}


.landing-box {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.checkbox {
    width: 200px;
    height: auto;
    margin: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.checkbox svg {
    width: 70px;
    height: 70px;
}

.checkbox h3 {
    text-align: center;
}

.brand {
    transition: all .2s cubic-bezier(.645, .045, .355, 1);
    transform: scale(.9);
    position: absolute;
}

.brand:hover {
    transform: scale(1);
}

.brand.w--current {
    z-index: 1000;
}

.image-17 {
    display: block;
}

.image-17-mobile {
    display: none !important;
}

.no-col-2 {
    display: flex;
}

.section {
    align-items: center;
    min-height: 100vh;
    display: flex;
}

.section.section2 {
    background-color: #f5f5f5;
}

.section.scroll-section {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    display: flex;
}

.nav-link {
    color: #fff;
    letter-spacing: 3px;
}


.nav-link:hover {
    background-color: var(--realmix-second);
}

.green-link {
    background-color: var(--realmix-choc-shade) !important;
}

.green-link:hover {
    background-color: var(--realmix-choc) !important;
}

.nav-link-2 {
    color: #fff;
    letter-spacing: 3px;
}

.nav-link-2:hover {
    background-color: var(--realmix-second);
}

.nav-link-3 {
    color: #fff;
    letter-spacing: 3px;
}

.nav-link-3:hover {
    background-color: var(--realmix-second);
}

.nav-link-4 {
    color: #fff;
    letter-spacing: 3px;
}

.nav-link-4:hover {
    background-color: var(--realmix-second);
}

.nav-link-5 {
    background-color: red;
    color: #fff;
    letter-spacing: 3px;
}

.nav-link-5:hover {
    background-color: var(--white);
    color: var(--realmix-main);
}

.customer-banner {
    background-color: white;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    min-height: 200px;
    margin-left: auto;
    margin-right: auto;
    padding: 50px 10px;
    display: flex;
}

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

.image-2 {
    max-height: 80px;
}

.image-2.logo-grayscale {
    max-height: 60px;
}

.image-2.logo-grayscale:hover {}

.image-3 {
    max-height: 80px;
}

.image-3.logo-grayscale {
    max-height: 60px;
}

.logo-grayscale {
    filter: grayscale(1);
}

.logo-grayscale:hover {
    filter: grayscale(0);
}


.column,
.column-2,
.column-3,
.column-4 {
    justify-content: center;
    align-items: center;
    display: flex;
}

.image-4 {
    max-height: 80px;
}

.image-4.logo-grayscale {
    max-width: 100%;
    max-height: 60px;
}

.image-4.logo-grayscale:hover {}

.image-5 {
    max-height: 80px;
}

.image-5.logo-grayscale {
    max-height: 60px;
}

.image-5.logo-grayscale:hover {}

.banner-container {
    flex-flow: column;
    justify-content: center;
    align-items: center;
    width: 1200px;
    max-width: 1200px;
    display: flex;
}

.mobile-slider {
    display: none;
}

.desktop-slider {
    display: block;
}

.section-2 {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    background-image: url('../images/splasherbg.png');
    background-position: 50% 100%;
    background-size: cover;
    background-attachment: fixed;
    grid-template-rows: auto;
    grid-template-columns: 1fr;
    grid-auto-columns: 1fr;
    grid-auto-flow: row;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding-top: 60px;
    display: flex;
}

.section-2.scroll-section {
    background-image: none;
    height: 100vh;
    min-height: 0;
    padding-top: 0;
}

.section-3 {
    background-image: url('../images/about-title.png');
    background-position: 50%;
    background-size: contain;
    background-attachment: fixed;
    justify-content: center;
    align-items: center;
    height: 60vh;
    display: flex;
}

.footer-copyright {
    background-color: var(--realmix-main);
}

.paragraph {
    color: #fff;
    text-align: center;
    margin-top: 10px;
}

.footer-links {
    background-color: var(--realmix-second);
}

.link {
    color: #fff;
    text-decoration: none;
}

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

.container {
    padding-top: 20px;
    padding-bottom: 20px;
}

.columns-2 {
    justify-content: center;
    align-items: center;
    display: flex;
}

.columns-2-mobile {
    display: none;
}

.footer-impressum {
    background-color: var(--realmix-main);
}

.heading {
    text-align: center;
    margin-bottom: 20px;
    font-family: Myriadpro, sans-serif;
}

.paragraph-2 {
    color: var(--white);
    font-family: Myriadpro, sans-serif;
}

.container-2 {
    max-width: 1300px;
}

.container-3 {
    justify-content: center;
    align-items: center;
}

.w-logo-blockcontainer {
    z-index: 50;
}

.image-6 {
    max-width: 50%;
}

.column-5 {
    justify-content: center;
    align-items: center;
    display: flex;
}

.image-7 {
    height: 600px;
}

.image-7.hidden-from-top.landing-can,
.image-8 {
    height: 200px;
}

.image-8.hidden-from-top.landing-can {
    height: 200px;
}

.image-9 {
    height: 550px;
}

.image-9.hidden-from-top.landing-can {
    height: 200px;
}

.landing-ladubu {
    height: 250px;
}

.container-4 {
    z-index: 50;
    padding-bottom: 40px;
    position: relative;
}

.heading-2 {
    color: var(--realmix-main-shade);
    text-align: center;
    margin-top: 10px;
    padding-right: 0;
    font-family: Myriadpro, sans-serif;
    font-size: 1rem;
    line-height: 1rem;
}

.section-4 {
    background-image: url('../images/splasherbg.png');
    background-position: 50% 0;
    background-size: cover;
    background-attachment: fixed;
    justify-content: center;
    align-items: center;
    min-height: 120vh;
    display: flex;
}

.section-4.scroll-section {
    background-image: url('../images/splasherbg-weich.png');
}

.section-5 {
    background-color: var(--realmix-main);
    justify-content: center;
    align-items: center;
    min-height: 70vh;
    display: flex;
}

.section-5.scroll-section {
    height: 100vh;
    min-height: 0;
}

.heading-3 {
    color: var(--white);
    text-align: center;
    margin-top: 0;
    font-family: Myriadpro, sans-serif;
    font-size: 60px;
    line-height: 60px;
}

.paragraph-3 {
    color: var(--white);
    text-align: center;
    width: 70%;
    margin-bottom: 40px;
    margin-left: auto;
    margin-right: auto;
    font-family: Myriadpro, sans-serif;
    font-size: 16px;
    line-height: 20px;
}

.paragraph-3.hidden {
    margin-bottom: 60px;
}

.svg-icon {
    width: 2rem;
    height: 2rem;
}

.svg-icon:hover {
    cursor: pointer;
}

.ikonik-48ogb,
.ikonik-11qow,
.ikonik-vnk6b,
.ikonik-8hlnif {
    color: #fff;
    width: 40px;
}

.column-6,
.column-7,
.column-8,
.column-9 {
    justify-content: center;
    align-items: center;
    display: flex;
}

.container-5 {
    flex-flow: column;
    justify-content: space-between;
    align-items: center;
}

.section-6 {
    background-color: var(--realmix-main-shade);
    flex-flow: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    display: flex;
}

.heading-4,
.paragraph-4 {
    color: var(--white);
    font-family: Myriadpro, sans-serif;
}

.columns-3 {
    justify-content: center;
    align-items: center;
    display: flex;
}

.heading-5,
.paragraph-5 {
    color: var(--white);
    font-family: Myriadpro, sans-serif;
}

.columns-4 {
    justify-content: center;
    align-items: start;
    display: flex;
}

.container-6 {
    margin-top: 100px;
}

.track {
    width: 100%;
    height: 300vw;
}

.camera {
    width: 100vw;
    height: 100vh;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    overflow: hidden;
}

.frame {
    height: 100%;
    display: flex;
}

.scroll-item {
    background-color: #ff3434;
    flex: none;
    width: 100vw;
    height: 100vh;
}

.scroll-item.scroll1 {
    background-color: var(--realmix-main-shade);
    justify-content: center;
    align-items: center;
    display: flex;
}

.scroll-item.scroll2 {
    background-color: var(--realmix-second);
}

.scroll-item.scroll0 {
    background-color: var(--realmix-second);
    justify-content: center;
    align-items: center;
    display: flex;
}

.image-10 {
    width: 100vw;
    height: 100vh;
}

.image-11 {
    z-index: 50;
    max-width: 20%;
    position: absolute;
    top: auto;
    bottom: 0%;
    left: 0%;
    right: auto;
}

.image-12 {
    z-index: 50;
    max-width: 30%;
    position: absolute;
    top: auto;
    bottom: 0%;
    left: auto;
    right: 0%;
}

.scroll-wrap {
    width: 100%;
    height: 300vw;
    position: relative;
}

.scroll-container {
    width: 100%;
    height: 100vh;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    overflow: hidden;
}

.step-scroll {
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 100vh;
    display: flex;
    position: relative;
}

.step-block {
    flex: none;
    justify-content: center;
    height: calc(100vh - 60px);
    position: relative;
}

.step-block.step1 {
    background-image: url('../images/product-bg-cola.png');
    background-position: 50%;
    background-size: cover;
}

.step-block.step2 {
    background-image: url('../images/product-bg-icetea.png');
    background-position: 50%;
    background-size: cover;
}

.step-block.step3 {
    background-image: url('../images/product-bg-energy.png');
    background-position: 50%;
    background-size: cover;
}

.step-block.step4,
.step-block.step5 {
    background-image: url('../images/product-bg-chocolate.png');
    background-position: 50%;
    background-size: cover;
}

.step-block.step6 {
    background-image: url('../images/product-bg-chocolate-angelhair.png');
    background-position: 50%;
    background-size: cover;
}

.step-block.step7 {
    background-image: url('../images/product-bg-matchalatte.png');
    background-position: 50%;
    background-size: cover;
}

.step-block.step8 {
    background-image: url('../images/product-bg-chocolate-matcha.png');
    background-position: 50%;
    background-size: cover;
}

.step-block.step9 {
    background-image: url('../images/product-bg-ladubu-dubai.png');
    background-position: 50%;
    background-size: cover;
}

.step-block.step10 {
    background-image: url('../images/product-bg-ladubu-newyork.png');
    background-position: 50%;
    background-size: cover;
}

.step-block.step11 {
    background-image: url('../images/product-bg-ladubu-paris.png');
    background-position: 50%;
    background-size: cover;
}

.step-block.step12 {
    background-image: url('../images/product-bg-oliveoil.png');
    background-position: 50%;
    background-size: cover;
}

.step-block.block1 {
    background-color: var(--black);
}

.step-block.block2 {
    background-color: var(--realmix-second);
}

.step-block.block3 {
    background-color: var(--realmix-main-shade);
}

.trigger {
    width: 100%;
    height: 85%;
    position: absolute;
    top: 15%;
    right: 0%;
}

.trigger._1 {
    background-color: var(--black);
}

.trigger._2 {
    background-color: var(--realmix-second);
    height: 59%;
    top: 41%;
}

.trigger._3 {
    background-color: var(--realmix-main);
    height: 29%;
    top: 71%;
}

.image-13 {
    max-width: 40%;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
}

.w-slider-arrow-right,
.w-slider-arrow-left {
    display: none;
}

.container-8 {
    flex-flow: column;
    justify-content: center;
    align-items: center;
    display: flex;
}

.container-8.hidden {
    position: relative;
}

.paragraph-6 {
    text-align: center;
    margin-bottom: 0;
    padding: 20px;
    font-family: Myriadpro, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
}

.heading-6 {
    color: var(--realmix-main);
    margin-bottom: 100px;
    font-family: Myriadpro, sans-serif;
    font-size: 60px;
    line-height: 60px;
}

.div-block-2 {
    flex-flow: column;
    justify-content: center;
    align-items: center;
    display: flex;
}

.image-14 {
    width: 100%;
}

.heading-7 {
    color: var(--realmix-main);
    font-family: Myriadpro, sans-serif;
}

.heading-8 {
    color: var(--realmix-main);
    text-align: center;
    font-family: Myriadpro, sans-serif;
    font-size: 60px;
    line-height: 60px;
}

.paragraph-7 {
    margin-bottom: 0;
}

.image-15 {
    width: 300px;
    position: absolute;
    top: auto;
    bottom: 0%;
    left: auto;
    right: 10%;
}

.image-16 {
    width: 300px;
    position: absolute;
    top: auto;
    bottom: 3%;
    left: 0%;
    right: auto;
}

.div-block-3 {
    background-color: rgba(255, 255, 255, .8);
    max-width: 500px;
    margin-bottom: 40px;
    padding: 20px;
    display: inline-block;
    text-align: left;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
}

.columns-5 {
    justify-content: center;
    padding-top: 20px;
    display: flex;
}

.heading-9 {
    color: var(--realmix-main);
    font-family: Myriadpro, sans-serif;
}

.heading-9-c {
    color: var(--realmix-choc-shade) !important;
    font-family: Myriadpro, sans-serif;
}


.paragraph-8 {
    text-align: left;
    padding-right: 0;
    font-family: Myriadpro, sans-serif;
}

.column-10 {
    text-align: center;
}

.columns-6 {
    justify-content: center;
    align-items: center;
    display: flex;
}

.div-block-4 {
    background-color: var(--realmix-second);
    text-align: center;
    justify-content: center;
    align-items: center;
    width: 250px;
    height: 100%;
    display: flex;
}

.heading-10 {
    color: var(--white);
    margin-top: 0;
    margin-bottom: 0;
    font-family: Myriadpro, sans-serif;
}

.button {
    background-color: var(--realmix-second);
    justify-content: center;
    align-items: center;
    font-family: Myriadpro, sans-serif;
    font-size: 33px;
    font-weight: 700;
    display: flex;
}

.button:hover {
    background-color: var(--realmix-main-shade);
}

.ikonik-5qey3 {
    color: #fff;
    width: 30px;
}

.ikonik-7p78w {
    color: #fff;
}

.div-block-5 {
    background-color: var(--realmix-main);
    justify-content: center;
    align-items: center;
    height: 10vh;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
    display: flex;
}

.column-12 {
    padding: 20px 0 20px 40px;
}

.columns-7 {
    justify-content: center;
    align-items: center;
    margin-left: 0;
    margin-right: 0;
    display: flex;
}

.image-18 {
    z-index: 51;
    max-width: 300px;
    position: absolute;
    top: auto;
    bottom: -8%;
    left: 15%;
    right: auto;
}

.image-19 {
    z-index: 51;
    max-width: 300px;
    position: absolute;
    top: auto;
    bottom: -7%;
    left: auto;
    right: 13%;
}

.hwrap {
    justify-content: center;
    align-items: center;
}

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

.hmove-copy {
    justify-content: center;
    align-items: center;
    display: flex;
    transform: translateX(-100%);
}

.scroll-watcher {
    z-index: 999;
    background-color: var(--realmix-second);
    width: 100%;
    height: 10px;
    position: fixed;
    top: 60px;
}

.rich-text-block {
    color: var(--white);
}

.div-block-6 {
    text-align: center;
}

.div-block-6.footer-nav {
    margin-top: 10px;
    margin-bottom: 10px;
}

.link-2 {
    color: var(--white);
}

.link-2:hover {
    color: var(--realmix-main);
}

.link-3 {
    color: var(--white);
}

.link-3:hover {
    color: var(--realmix-main);
}

.link-4 {
    color: var(--white);
}

.link-4:hover {
    color: var(--realmix-main);
}

.link-5 {
    color: var(--white);
}

.link-5:hover {
    color: var(--realmix-main);
}

.link-6 {
    color: var(--white);
}

.link-6:hover,
.link-6.w--current,
.link-6.w--current:hover {
    color: var(--realmix-main);
}

/* 
.w-col-4 {
  width: 33.3333%;
}

.w-col-3 {
  width: 25%;

}

.w-col-8 {
  width: 66.6667%;

}

.w-col-9 {
  width: 75%;

} */
.contact-logo {
    width: 250px;
    margin-right: auto;
    margin-left: auto;
}

.columns-9 {
    background-color: var(--white);
    justify-content: center;
    align-items: center;
    display: flex;
    width: 95%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
}

.columns-9 .w-col {
    padding: 0;
}

.column-15 {
    text-align: left;
}

.column-16 {
    text-align: right;
}

.columns-17 {
    text-align: center;
}

.image-21 {}

.paragraph-9 {
    margin-bottom: 0;
}

.image-20 {
    z-index: 1;
    filter: invert();
    position: absolute;
}

.section-7 {
    height: 100vh;
}

.column-14 {
    text-align: right;
}

.div-block-7 {
    z-index: 50;
    width: 100%;
}

.div-block-9 {
    text-align: left;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.scroll-section.trigger1 {
    height: 100vh;
    position: absolute;
    top: 0;
}

.scroll-section.trigger2 {
    height: 100vh;
    position: absolute;
    top: 100vh;
}

.scroll-section.trigger3 {
    height: 100vh;
    position: absolute;
    top: 200vh;
}

.background-video {
    width: 100%;
    height: 100%;
    position: absolute;
}

.div-block-8 {
    background-color: var(--white);
    width: 100vw;
    height: 100%;
    position: absolute;
}

.video-shade {
    background-color: rgba(255, 255, 255, .5);
    width: 100%;
    height: 100%;
    position: absolute;
}


@media screen and (min-width: 1920px) {
    .navbar {
        background-color: var(--realmix-main);
        position: fixed;
        top: 0%;
        bottom: auto;
        left: 0%;
        right: 0%;
        box-shadow: 0 3px 5px rgba(0, 0, 0, .2);
    }

    .image {
        position: static;
        top: 0%;
        bottom: auto;
        left: 0%;
        right: 0%;
    }

    .brand {
        position: absolute;
        transform: scale(1);
    }

    .brand:hover {
        transform: scale(.95);
    }

    .section {
        grid-column-gap: 16px;
        grid-row-gap: 16px;
        grid-template-rows: auto auto;
        grid-template-columns: 1fr 1fr;
        grid-auto-columns: 1fr;
        justify-content: center;
        align-items: center;
        height: 100vh;
        display: flex;
    }

    .nav-link,
    .nav-link-2,
    .nav-link-3,
    .nav-link-4 {
        color: #fff;
    }

    .nav-link-5 {
        background-color: var(--realmix-second);
        color: #fff;
    }

    .banner-container {
        width: 1600px;
        max-width: 1600px;
        margin-left: auto;
        margin-right: auto;
    }

    .columns-2 {
        margin-top: 20px;
    }

    .container-2 {
        max-width: 80%;
        padding-bottom: 20px;
    }

    .image-7 {
        height: 700px;
    }

    .image-7.hidden-from-top.landing-can {
        height: 750px;
    }

    .image-8 {
        height: 600px;
    }

    .image-8.hidden-from-top.landing-can {
        height: 650px;
    }

    .image-9 {
        height: 600px;
    }

    .image-9.hidden-from-top.landing-can {
        height: 650px;
    }

    .heading-2 {
        color: var(--white);
        margin-top: 0;
        margin-bottom: 0;
        padding-bottom: 20px;
        padding-right: 0;
        font-family: Myriadpro, sans-serif;
        font-size: 1.5rem;
        line-height: 1.5rem;
    }

    .columns-5 {
        justify-content: center;
        padding-top: 50px;
        display: flex;
    }

    .section-4 {
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        display: flex;
    }

    .section-5 {
        background-color: var(--realmix-main);
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        display: flex;
    }

    .heading-3 {
        color: var(--white);
        text-align: center;
        font-family: Myriadpro, sans-serif;
        font-size: 60px;
        line-height: 64px;
    }

    .paragraph-3 {
        color: var(--white);
        text-align: center;
        margin-bottom: 40px;
        font-family: Myriadpro, sans-serif;
        font-size: 20px;
        line-height: 26px;
    }

    .div-block {
        margin-top: 60px;
        margin-bottom: 60px;
    }

    .anima-1,
    .anima-2,
    .anima-3 {
        width: 680px;
    }

    .button {
        background-color: var(--realmix-second);
        flex-flow: row-reverse;
        justify-content: center;
        align-items: center;
        height: 100px;
        font-family: Myriadpro, sans-serif;
        font-size: 30px;
        font-weight: 700;
        display: flex;
        box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
    }

    .button:hover {
        background-color: var(--realmix-main-shade);
    }

    .ikonik-5qey3 {
        margin-right: 10px;
    }

    .div-block-5 {
        background-color: var(--realmix-main);
        flex-flow: row;
        grid-template-rows: auto;
        grid-template-columns: 1fr 1fr;
        grid-auto-columns: 1fr;
        height: 150px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 20px;
        padding-right: 20px;
        display: flex;
    }

    .image-18 {
        max-width: 400px;
        bottom: -10%;
        left: 15%;
    }

    .image-19 {
        max-width: 400px;
        bottom: -7%;
        right: 15%;
    }

    .div-block-7 {
        z-index: 50;
    }
}

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

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

    .anima-1,
    .anima-2,
    .anima-3 {
        margin-top: 20px;
    }

    .chocolate-anima {
        width: 70% !important;
    }

    .ladubu-anima {
        width: 90% !important;
        margin-top: 0;
    }

    .w-contactainer {
        width: 95%;
    }

    .div-block-9 h3 {
        font-size: 18px;
    }

    .div-block-9 img {
        width: 90%;
    }

    .contact-logo {
        width: 200px;
    }

    .columns-9 {
        width: 100%;
    }
}

@media screen and (max-width: 991px) {
    .image-7 {
        height: 500px;
    }

    .image-8,
    .image-9 {
        height: 400px;
    }

    .track {
        height: auto;
    }

    .camera {
        width: auto;
        height: auto;
        overflow: visible;
    }

    .frame {
        flex-flow: column;
    }

    .scroll-item {
        height: 50vh;
    }
}

@media screen and (max-width: 767px) {
    .container-5 {
        padding-top: 100px;
    }

    .slider,
    .slider-2 {
        height: 170px;
    }
}

@media screen and (max-width: 479px) {
    .brand {
        z-index: 50;
    }

    .real-hero {
        display: flex;
        flex-direction: column;

    }

    .header-container {
        max-width: none;
    }


    .chocolates {
        margin-left: 0;
        margin-right: 0;
    }


    .section {
        background-image: url('../images/landing-bg-mobile.png') !important;
        background-position: 50% 0;
        background-repeat: repeat;
        background-size: cover;
        background-attachment: scroll;
    }

    .image-7 {
        height: 140px !important;
    }

    .image-8,
    .image-9 {
        height: 140px !important;
    }

    .image-18,
    .image-19 {
        display: none;
    }

    /* .image-20 {
    top: 200px;
  } */
    .mobile-ingredients .div-block-3 {
        width: 50% !important;
    }

    .icon {
        color: var(--white);
    }

    .catalogue-section {
        height: 80vh;
    }

    .ct-btn-row {
        display: flex;
        flex-direction: column;
    }

    .big-title {
        width: 80%;
    }

    .section-5.scroll-section {
        height: 150vh;
    }

    .container-5 {
        padding-top: 0;
    }

    .section-6 {
        height: 200vh;
    }

    .section-2.scroll-section {}

    .image-17 {
        display: none !important;
        margin-right: 20px;
    }

    .image-17-mobile {
        display: inline-block !important;
        width: 100px !important;
        margin-right: 0;
    }

    .title-margin {
        margin-top: 10px;
    }

    .image-13 {
        max-width: 70%;
    }

    .section-3 {
        background-size: cover;
    }

    .step-block.step1 {
        background-image: url("../images/product-bg-cola-mobile.png");
        background-size: cover;
    }

    .step-block.step2 {
        background-image: url("../images/product-bg-icetea-mobile.png");
        background-size: cover;
    }

    .step-block.step3 {
        background-image: url("../images/product-bg-energy-mobile.png");
        background-size: cover;
    }

    .step-block.step4,
    .step-block.step5 {
        background-image: url("../images/product-bg-chocolate-mobile.png");
        background-size: cover;
    }

    .step-block.step6 {
        background-image: url('../images/product-bg-chocolate-angelhair-mobile.png');
        background-size: cover;
    }

    .step-block.step7 {
        background-image: url('../images/product-bg-matchalatte-mobile.png');
        background-size: cover;
    }

    .step-block.step8 {
        background-image: url('../images/product-bg-chocolate-matcha-mobile.png');
        background-size: cover;
    }

    .step-block.step9 {
        background-image: url('../images/product-bg-ladubu-dubai-mobile.png');
        background-size: cover;
    }

    .step-block.step10 {
        background-image: url('../images/product-bg-ladubu-newyork-mobile.png');
        background-size: cover;
    }

    .step-block.step11 {
        background-image: url('../images/product-bg-ladubu-paris-mobile.png');
        background-size: cover;
    }

    .step-block.step12 {
        background-image: url('../images/product-bg-oliveoil-mobile.png');
        background-size: cover;
    }

    .step-block.step1,
    .step-block.step2,
    .step-block.step3,
    .step-block.step4,
    .step-block.step5,
    .step-block.step6,
    .step-block.step7,
    .step-block.step8,
    .step-block.step9,
    .step-block.step10,
    .step-block.step11 {
        padding-top: 160px;
    }

    .swiper-section {
        min-height: 1300px !important;
        background-color: #004a98;
    }

    .swiper-section-chocolate,
    .swiper-section-ladubu {
        min-height: 1410px !important;
        background-color: #004a98;
    }

    .swiper-section-oliveoil {
        min-height: 1400px !important;
    }

    .swiper-wrapper,
    .slick-list {}

    .mobile-ingredients {
        display: flex;
    }

    .step-block {
        height: 100% !important;
    }

    .brand {
        width: 60px;
        height: 60px;
        margin: 0;
        padding: 5px;
    }

    .brand img {
        width: 100%;
        height: 100%;
    }

    .b-hero {
        background-position: 0%;
    }

    .div-3-mobile .w-col-6 {
        width: 50% !important;
    }

    .columns-5 {
        padding-top: 0;
        flex-direction: column;
    }

    .columns-5 .w-col-6 {
        width: 100% !important;
    }

    .heading-9,
    .heading-9-c {
        font-size: 1.5rem;
        line-height: 1.5rem;
        margin-top: 0;
    }

    .product-h-mobile {
        display: block;
    }

    .product-h {
        display: none;
    }

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

    .menu-button.w--open {
        background-color: var(--realmix-main-shade);
    }

    .nav-menu {
        background-color: var(--realmix-main-shade);

        /* padding-top: 50px; */
    }

    .customer-banner {
        padding-right: 0;
        padding-left: 0;
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .columns-2 {
        display: none;
    }

    .columns-2-mobile {
        justify-content: center;
        align-items: center;
        display: flex;
        flex-direction: column;
    }

    .social-banner {
        display: flex;
        flex-direction: row;
    }

    .slogan-img img {
        width: 100%;
    }

    .section-5 {
        min-height: 80vh;
        padding-top: 120px;
        padding-bottom: 100px;
    }

    .paragraph-3 {
        width: 90%;
    }

    .heading-4 {
        text-align: center;
    }

    .datenschutz-container {
        padding: 0 20px;
    }

    .column-16,
    .column-15 {
        display: none;
    }

    .column-15-mobile,
    .column-16-mobile {
        display: block;
    }

    .div-block-9 {
        padding: 50px;
    }

    .paragraph-4 {
        text-align: center;
        font-size: 16px;
        line-height: 24px;
    }

    .mobile-slider {
        display: block;
    }

    .desktop-slider {
        display: none;
    }

    .w-container {
        padding: 0 10px;
    }

    .columns-3 {
        flex-flow: column;
    }

    .heading-5 {
        text-align: center;
    }

    .paragraph-5 {
        text-align: center;
        font-size: 16px;
        line-height: 24px;
    }

    .columns-4 {
        flex-flow: column;
    }

    .container-7 {
        flex-flow: column;
        justify-content: flex-start;
        align-items: center;
    }

    .slider,
    .slider-2 {
        height: 190px;
    }

    .image-10 {
        height: 100%;
    }


    .anima-1,
    .anima-2,
    .anima-3 {}

    .paragraph-6 {
        font-size: 14px;
        line-height: 20px;
    }

    .mobile-banner {
        display: block;
    }

    .desktop-banner {
        display: none;
    }

    .customer-item {
        width: 33.333333% !important;
        margin: 10px;
    }

    .customer-item {}

    .div-block-3 {
        margin: 0;
        padding: 10px;
    }

    .div-block-3 p {
        font-size: 0.7rem;
        line-height: 0.9rem;
    }

    .div-block-3 p,
    .div-block-3 h1 {
        padding-right: 5px;
    }

    .div-block-3 .w-col-6 {
        width: 50% !important;
    }

    .olive-anima {
        width: 80%;
        margin-top: 150px;
    }
}

@font-face {
    font-family: 'Myriadpro';
    src: url('../fonts/MYRIADPRO-BOLD.OTF') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Myriadpro';
    src: url('../fonts/MYRIADPRO-REGULAR.OTF') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Myriadpro';
    src: url('../fonts/MyriadPro-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}