.reciple-header-block {
    width: 100%;
    height: 35vh;
    min-height: 200px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}
    .reciple-header-block .image-overlay {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        background-color: black;
        opacity: 0.3;
        box-sizing: border-box;
        z-index: 5;
    }
    .reciple-header-block .video-background {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        box-sizing: border-box;
    }
    .reciple-header-block .content-container {
        width: 100%;
        max-width: 1200px;
        padding: 0px;
        height: 100%;
        position: absolute;
        top: 0px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;
        display: flex;
        flex-direction: row;
    }
        .reciple-header-block .content-container .content-products {
            width: 40%;
            height: 100%;
            position: relative;
        }
            .reciple-header-block .content-container .content-products .show-product {
                background-size: contain;
                background-position: bottom center;
                background-repeat: no-repeat;
                height: 100%;
                width: 60%;
                position: absolute;
                bottom: 0px;
                transition: bottom 1s ease-in-out, left 1s ease-in-out;
            }

            #product1 { 
                left: 50%; 
                transform: rotate(-5deg) translateX(-50%);
                bottom: -100%;
                z-index: 12;
            }
            #product2 {
                left: 50%;
                bottom: -100%;
                transform: translateX(-50%);
                z-index: 11
            }
            #product3 {
                left: 50%;
                transform: rotate(5deg) translateX(-50%);
                bottom: -100%;
                z-index: 13;
            }
.reciple-header-block .content-container .content-text {
    width: 60%;
    height: auto;
    vertical-align: middle;
    justify-content: center;
    display: flex;
    flex-direction: column;
}
    .reciple-header-block .content-container .content-text .content-text-head {
        margin: auto; text-align: center;

    }
        .reciple-header-block .content-container .content-text .content-text-head h1 { text-align: center; font: 600 55px Rubik; }
        .reciple-header-block .content-container .content-text .content-text-head p {
            text-align: center;
            font: 400 30px Rubik;
        }

        @media (max-width: 900px) {
            .reciple-header-block .content-container {
                flex-direction: column;
            }
            .reciple-header-block {
                height: 60vh;
 
            }
            .reciple-header-block .content-container .content-products {
                    width: 100%;
                    order: 2;
                }
                .reciple-header-block .content-container .content-text {
                    width: 100%;
                    padding: 20px;
                    order: 1;
                    height: 40%;
                }

                .reciple-header-block .content-container .content-products .show-product {
                    background-size: contain;
                    background-position: bottom center;
                    background-repeat: no-repeat;
                    height: 400px;
                    width: 60%;
                    position: absolute;
                    top: auto; bottom: 0px;
                }
            #product1 {

            }

            #product2 {
            }

            #product3 {
            }

            .reciple-header-block .content-container .content-text .content-text-head {
                margin: auto;
                text-align: center;
            }

                .reciple-header-block .content-container .content-text .content-text-head h1 {
                    text-align: center;
                    font: 600 36px Rubik;
                }

                .reciple-header-block .content-container .content-text .content-text-head p {
                    text-align: center;
                    font: 400 20px Rubik;
                }
}