.block {
    position: relative;
}

.block .bg_image {
    z-index: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 80%;
    height: 100%;

    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.block .wrap {
    z-index: 1;
}

.block-hero .hero_img {
    z-index: 0;
    width: 100%;
    height: 23vw;
    min-height: 375px;
    display: flex;
    flex-flow: row wrap;
}

    .block-hero .hero_img_inner {
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        height: 100%;
        width: 100%;
    }

        .block-hero.style-design-two-images .hero_img_inner:nth-child(1),
        .block-hero.style-design-two-images-blue .hero_img_inner:nth-child(1) {
            width: 63%;
        }

        .block-hero.style-design-two-images .hero_img_inner:nth-child(2),
        .block-hero.style-design-two-images-blue .hero_img_inner:nth-child(2) {
            width: 37%;
        }

        .block-hero .blue-overlay {
            width: 50%;
            position: absolute;
            z-index: 1;
            height: 100%;
            background: rgb(157,119,242);
            background: linear-gradient(135deg, rgba(157,119,242,1) 0%, rgba(125,119,245,1) 23%, rgba(132,170,255,1) 100%);
            opacity: 0.8;
        }

        .block-hero.style-design-two-images .blue-overlay,
        .block-hero.style-design-two-images-blue .blue-overlay {
            width: 63%;
        }

    .block-hero .storer {
        width: 10rem;
        height: 10rem;
        background: #fff;
        border-radius: 100%;
        position: absolute;
        bottom: 0;
        z-index: 9;
        text-align: center;
        color: rgba(70, 42, 56, 0.56);
        font-weight: 700;
        font-size: 1.111rem;
        line-height: 110%;
        padding: 0.7rem;
        right: 0;
        cursor: pointer;
        box-shadow: 0 5px 12px rgba(0,0,0,0.24);
        text-decoration: none;

        transform: translateY(2.5rem) scale(0.7);
        transition: all 0.2s ease-in-out;
    }

        @media (min-width: 1200px) {
            .block-hero .storer {
                transform: translateY(2.5rem) scale(1);
                right: 5rem;
            }
        }

        .block-hero .storer:hover {
            box-shadow: 0 10px 24px rgba(0,0,0,0.4);
        }

        .block-hero .storer .inner {
            display: block;
            height: 4.5rem;
            border-bottom: 4px dotted #EBEBEB;
        }

        .block-hero .storer .arrow {
            position: absolute;
            bottom: 0.7rem;
            width: 4.8rem;
            background: #FF8787 url(css/img/stoerer-arrow.svg) no-repeat center;
            background-size: 25% auto;
            height: 3.33rem;
            border-radius: 1.6rem;
            left: 2.6rem;
            transition: all 0.2s ease-in-out;
        }

                .block-hero .storer:hover .arrow {
                    background-color: #FD6D6D
                }

    .block-hero .hero-intro {
        background: #E1DDDD;
        padding: 1.6rem 0 6rem 0;
    }

         @media screen and (orientation:landscape) {
             .block-hero .hero-intro {
                 /* height: calc(100vh - 375px - 150px); */
                 min-height: 250px;
                 /* max-height: 375px; */
             }
         }

        .block-hero .hero-intro h1,
        .block-hero .hero-intro h2 {
            font-size: 1.7rem;
            line-height: 105%;
            color: rgba(0, 0, 0, 0.28);
            padding-left: 5rem;
            position: relative;
        }

            .block-hero .hero-intro h1::before,
            .block-hero .hero-intro h2::before {
                width: 4rem;
                height: 4rem;
                content: "";
                position: absolute;
                left: 0;
                top: 0;
                background: url(css/img/mein.svg) no-repeat center;
                background-size: contain;
            }

            body.lang-fr .block-hero .hero-intro h1::before,
            body.lang-fr .block-hero .hero-intro h2::before {
                background: url(css/img/mon.svg) no-repeat center;
                background-size: contain;
            }

            @media (min-width: 600px) {
                .block-hero .hero-intro h1,
                .block-hero .hero-intro h2 {
                    font-size: 2.8rem;
                    line-height: 105%;
                    padding-left: 7rem;
                }

                .block-hero .hero-intro h1::before,
                .block-hero .hero-intro h2::before {
                    width: 6rem;
                    height: 6rem;
                }
            }

.columns {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
}

    @media (min-width: 600px) {
        width: calc(100% + 2rem);
        margin-left: -1rem;
    }

.columns .column,
.style-columns-one .columns .column {
    display: block;
    width: 100%;
    margin-bottom: 1rem;
}

@media (min-width: 600px) {
    .columns .column,
    .style-columns-one .columns .column {
        display: block;
        width: 100%;
        padding: 1rem;
        margin-bottom: 0;
    }

    .style-columns-two .columns .column,
    .style-columns-four .columns .column {
        display: block;
        width: 50%;
        padding: 0 1rem;
        padding: 1rem;
    }
}

@media (min-width: 900px) {
    .style-columns-four .columns .column {
        display: block;
        width: 25%;
        padding: 1rem;
    }
}

.columns .column img {
    width: 100%;
    height: auto;
}

.block-text {
    padding: 1.5rem 0;
}

    @media (min-width: 600px) {
        .block-text {
            padding: 4rem 0;
        }
    }

.block-text h1,
.block-text h2,
.block-text h3 {
    text-align: center;
}


.block.style-textwidth-normal .wrap {
    width: 100%;
    max-width: 782px;
    margin: 0 auto;
}

.column .narrow {
    width: 100%;
    max-width: 782px;
    margin: 0 auto;
}

.block.style-textwidth-wide .wrap {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.block.style-background-white {
    background: #fff;
}

.block.style-background-gray {
    background: #4E4E4E;
}

.block.style-background-lightgray {
    background: #EBEBEB;
}

.block.style-background-beige {
    background: #E1DDDD;
}



.block.style-design-boxed .block-content {
    background: #fff;
    box-shadow: 0 3px 6px rgba(0,0,0,0.2);
    padding: 1rem;
    border-radius: 6px;
}

    @media (min-width: 600px) {
        .block.style-design-boxed .block-content {
            padding: 2rem;
        }
    }

    .block.style-textwidth-wide.style-design-boxed .block-content .columns {
        width: 100%;
        max-width: 782px;
        margin: 0 auto;
    }

    .block.style-textwidth-wide.style-design-boxed .block-content .list,
    .block.style-textwidth-wide.style-design-boxed .block-content .list-text {
        width: 100%;
        max-width: 782px;
        margin: 0 auto;
    }


.block-hero.style-image-only + .block.style-design-boxed {
    padding-top: 0;
}

.block-hero.style-image-only + .block.style-design-boxed .block-content {
    transform: translateY(-1rem);
}

@media (min-width: 600px) {
    .block-hero.style-image-only + .block.style-design-boxed .block-content {
        transform: translateY(-2rem);
    }
}

.block-list {
    padding: 1.5rem 0;
}

@media (min-width: 600px) {
    .block-list {
        padding: 4rem 0;
    }
}

.block-list h1,
.block-list h2,
.block-list h3 {
    text-align: center;
}

    .block-list .list-item {
        padding-left: 5rem;
        position: relative;
    }

        .block-list .list-item i.far {
            position: absolute;
            left: 0;
            top: 1rem;
            font-size: 2rem;
            color: #FF8787;
        }

    .block-list .list {
        border-top: 4px dotted #EBEBEB;
        padding-top: 1rem;
    }

    .block-list .list-text {
        margin-top: 2.5rem;
    }


.block-video {
    padding: 1.5rem 0;
}

@media (min-width: 600px) {
    .block-video {
        padding: 4rem 0;
    }
}

    .block-video .video-holder {
        width: 100%;
        position: relative;
    }

    .youtube-iframe-holder {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
    }

        .youtube-iframe-holder iframe {
            position: absolute;
            height: 100%;
            width: 100%;
        }

    .block-video h2 {
        text-align: center;
    }

    .block-video .video-holder::before {
        content: "";
        display: block;
        padding-top: 54.5%;
    }

    .block-video .video-holder iframe {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }


.block-imageslider {
    padding: 1.5rem;
}

@media (min-width: 600px) {
    .block-imageslider {
        padding: 4rem 0;
    }
}

    .block-imageslider h2 {
        text-align: center;
    }

    .block.block-imageslider.style-design-boxed .block-content {
        padding: 0;
    }

    .block-imageslider .imageslider-text {
        margin-top: 2.5rem;
    }

    .block-imageslider .slider {
        width: 100%;
    }

    .block-imageslider .slider-item {
        width: 100%;
    }

    .block-imageslider .image {
        width: 100%;
        background-size: cover;
        background-position: center;
        border-radius: 6px 6px 0 0;
    }

        .block-imageslider .image::before {
            content: "";
            display: block;
            padding-top: 56%;
        }

    .block-imageslider .image-label {
        padding: 1rem 2rem;
    }


.block-designheader {
    z-index: 99;
    padding: 1.5rem 0;
}

@media (min-width: 600px) {
    .block-designheader {
        padding: 4rem 0;
    }
}

    .block-designheader .wrap {
        position: relative;
    }

    .design-meine-beine {

    }

    .design-meine-beine .headline-holder {
        width: 100%;
        display: block;
        background: url(css/img/meine-beine.svg) no-repeat center;
        background-size: 100% auto;
        z-index: 0
    }

    body.lang-fr .design-meine-beine .headline-holder {
        background: url(css/img/mes-jambes.svg) no-repeat center;
        background-size: contain;
    }

            .design-meine-beine .headline-holder::before {
                content: "";
                display: block;
                padding-top: 78%;
            }

        .design-meine-beine h2 {
            width: 100%;
        }

        .design-meine-beine h2 br {
            display: none;
        }

        @media (min-width: 750px) {
            .design-meine-beine .headline-holder {
                width: 48%;
                margin-left: 3%;
            }

            .design-meine-beine h2 {
                position: absolute;
                left: 50%;
                bottom: 2rem;
                width: 50%;
                padding-right: 2rem;
                margin: 0;
            }

            .design-meine-beine h2 br {
                display: block;
            }
        }

@media (min-width: 1200px) {
    .block-designheader+.block-text {
        padding-top: 18rem;
        z-index: 0;
        margin-top: -14rem;
    }
}


.block-quiz {
    padding: 1.5rem 0;
}

@media (min-width: 600px) {
    .block-quiz {
        padding: 4rem 0;
    }
}

    .block-quiz h2 {
        text-align: center;
        color: #525252;
    }

        @media (min-width: 600px) {
            .block-quiz h2 {
                margin-bottom: 4rem;
            }
        }

    .block-quiz h4 {
        font-weight: bold;
        margin: 0.5rem 0;
    }

        @media (min-width: 600px) {
            .block-quiz h4 {
                color: #FF8787;
            }
        }


    .quiz-share {
        text-align: right;
    }

        .quiz-share span {
            font-weight: 700;
            color: #525252;
            font-size: 14px;
            display: block;
            margin-top: 1em;
        }

        .quiz-share a,
        .quiz-share a i {
            color: #FF8787;
            font-size: 2rem;
        }

    .block-quiz .quiz-view {
        display: none;
    }

    .block-quiz .quiz-view.active {
        display: block;
    }

    .block-quiz .view-content {
        border: 2px dotted rgba(0,0,0,0.2);
        padding: 1rem;
        font-size: 1.11rem;
        line-height: 120%;
        color: #525252;
    }

    @media (min-width: 600px) {
        .block-quiz .view-content {
            border: 4px dotted rgba(0,0,0,0.2);
            padding: 2rem;
            font-size: 1.55rem;
            line-height: 120%;
            color: #525252;
        }
    }

    .block-quiz .view-content .quiz-controls {
        margin-top: 2rem;
        font-size: 1rem;
        line-height: 120%;
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
    }

    .block-quiz .view-content .quiz-controls.narrow {
        width: 100%;
        max-width: 375px;
        margin: 4rem auto 0 auto;
    }

    .quiz-controls .button {
        width: 100%;
    }

    .quiz-controls .back,
    .quiz-controls .next {
        font-weight: 0.88rem;
        color: #525252;
        font-weight: 500;
        letter-spacing: 0;
        text-decoration: none;
        position: relative;
        transition: all 0.15s ease-in-out;
    }

    .quiz-controls .back:hover,
    .quiz-controls .next:hover {
        color: #FF8787;
    }

    .quiz-controls .back {
        padding-left: 3.2rem;
    }

    .quiz-controls .next {
        padding-right: 3.2rem;
    }

    .quiz-controls .back::before {
        content: "";
        width: 2.5rem;
        height: 1.4rem;
        border-radius: 0.7rem;
        background: #525252 url(css/img/arrow-mini-left.svg) no-repeat center;
        background-size: auto 40%;
        position: absolute;
        left: 0;
        top: 0;
        transition: all 0.15s ease-in-out;
    }

        .quiz-controls .back:hover::before {
            transform: translateX(-5px);
        }

    .quiz-controls .next::before {
        content: "";
        width: 2.5rem;
        height: 1.4rem;
        border-radius: 0.7rem;
        background: #525252 url(css/img/arrow-mini-right.svg) no-repeat center;
        background-size: auto 40%;
        position: absolute;
        right: 0;
        top: 0;
        transition: all 0.15s ease-in-out;
    }

        .quiz-controls .next:hover::before {
            transform: translateX(5px);
        }

    .quiz-controls .back:hover::before {
        background-color: #FF8787;
    }

    .quiz-controls .next:hover::before {
        background-color: #FF8787;
    }

    .quiz-answer {
        display: flex;
        flex-flow: row wrap;
        margin: 1rem auto;
        max-width: 500px;
    }

        .quiz-answer input {
            position: absolute;
            pointer-events: none;
            z-index: 0;
            opacity: 0;
        }

        .quiz-answer span.quiz-checkbox {
            width: 2rem;
            height: 2rem;
            background: url(css/img/quiz-check.svg) no-repeat center;
            background-size: 90%;
            cursor: pointer;
            z-index: 1;
            transform: rotate(40deg);
            transition: all 0.15s ease-out;
        }

        .quiz-answer span.quiz-checkbox.checked {
            background-image: url(css/img/quiz-checked.svg);
            transform: rotate(0deg);
        }

        .quiz-answer label {
            padding-left: 1.5rem;
            flex: 1;
            cursor: pointer;
        }

        .block-quiz .view-content p {
            margin-bottom: 1.2em;
        }

        .quiz-evaluation {
            display: none;
        }

        .quiz-evaluation.active {
            display: block;
        }


.block-parallaximages {
    height: 45vw;
}

    .main > .block-parallaximages:first-child {
        max-height: calc(80vh - 75px);
    }

    @media (min-width: 1350px) {
        .main > .block-parallaximages:first-child {
            max-height: calc(80vh - 200px);
        }
    }

    .block-parallaximages .images {
        display: flex;
        flex-flow: row wrap;
        height: 100%;;
    }

    .block-parallaximages .images .image {
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        height: 100%;
    }

    .block-parallaximages .images .image:nth-child(1) {
        width: 37%;
        transform: translateY(30%);
    }

    .block-parallaximages .images .image:nth-child(2) {
        width: 63%;
    }


.block-parallaximages+.block-text {
    padding-top: 0;
}

.block-parallaximages+.block-text .block-content {
    transform: translateY(-1rem);
}

@media (min-width: 600px) {
    .block-parallaximages+.block-text .block-content {
        transform: translateY(-2rem);
    }
}