#dec-promo {
    font-size: 16px;
}

#dec-hero {}

#dec-hero:before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    width: 50%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image: url(../images/11-14/left-back.jpg);
    background-image: -webkit-image-set(url("../images/11-14/left-back.jpg") 1x, url("../images/11-14/left-back@2x.jpg") 2x);
    box-shadow: 2px -4px 20px 0px rgba(0, 0, 0, 0.25);
}

#dec-hero:after {
    content: '';
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
    width: 50%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image: url(../images/11-14/right-back.jpg);
    background-image: -webkit-image-set(url("../images/11-14/right-back.jpg") 1x, url("../images/11-14/right-back@2x.jpg") 2x);
    box-shadow: 2px -4px 20px 0px rgba(0, 0, 0, 0.25);
}

#dec-hero .button {
    text-indent: -9999px;
    z-index: 1;
}

.dh-inner {
    width: 68.125vw;
    padding: 0 15px;
}

.dh-left {
    max-width: 50%;
}

.dh-right {
    padding-left: 2.5vw;
}

.dh-main {
    padding-top: 2.760417vw;
    padding-right: 1.25vw;
    padding-bottom: 2.447917vw;
}

.dh-right .dh-product.fp1 {
    column-gap: 1.354167vw;
}

.dh-right .dh-product.fp2 {
    column-gap: 3.958333vw;
    margin-top: 5vw;
}

.dh-right .dh-product.fp1 .product-image img {
    top: -0.6vw;
}

.dh-right .dh-product.fp2 .product-image img {
    top: 1vw;
}

.dh-right .fp1 .product-text .relative {}

.dh-right .product-image:before {
    content: '';
    display: block;
    position: absolute;
    z-index: -1;
    width: 13.072917vw;
    height: auto;
    aspect-ratio: 1 / 1;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image: url(../images/11-14/circle.png);
    background-image: -webkit-image-set(url("../images/11-14/circle.png") 1x, url("../images/11-14/circle@2x.png") 2x);
}

@media screen and (max-width: 991px) {
    .dh-inner {
        flex-direction: column;
        width: 100%;
        padding: 0;
    }

    .dh-left,
    .dh-right {
        width: 100%;
        max-width: 100%;
        padding: 0 15px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-image: url(../images/11-14/left-back.jpg);
        background-image: -webkit-image-set(url("../images/11-14/left-back.jpg") 1x, url("../images/11-14/left-back@2x.jpg") 2x);
        box-shadow: 2px -4px 20px 0px rgba(0, 0, 0, 0.25);
    }

    .dh-right {
        background-image: url(../images/11-14/right-back.jpg);
        background-image: -webkit-image-set(url("../images/11-14/right-back.jpg") 1x, url("../images/11-14/right-back@2x.jpg") 2x);
    }
}

@media screen and (min-width: 768px) {
    .dh-left .button.link-green {
        width: 22.3%;
        height: 5.4%;
        left: 13%;
        bottom: 7.2%;
    }

    .dh-left .button.link-red {
        width: 22.3%;
        height: 5.4%;
        left: 37%;
        bottom: 13.3%;
    }

    .dh-right .button-rog {
        width: 53%;
        height: 31%;
        left: 22%;
        bottom: 0%;
    }

    .dh-right .button-green {
        width: 41%;
        height: 17%;
        left: 27%;
        bottom: 29%;
    }

    .dh-right .button-red {
        width: 41%;
        height: 17%;
        left: 57%;
        bottom: 0%;
    }
}

@media screen and (max-width: 767px) {
    .dh-left .button.link-green {
        width: 22.3%;
        height: 4.5%;
        left: 21.5%;
        bottom: 9.4%;
    }

    .dh-left .button.link-red {
        width: 30%;
        height: 4.5%;
        left: 34.7%;
        bottom: 9.7%;
    }

    .dh-right .button-rog {
        width: 29%;
        height: 13%;
        left: 65%;
        bottom: 25%;
    }

    .dh-right .button-green {
        width: 34%;
        height: 7%;
        left: 33%;
        bottom: 12%;
    }

    .dh-right .button-red {
        width: 34%;
        height: 7%;
        left: 62%;
        bottom: 0%;
    }

    .dh-main {
        padding-top: 34px;
        padding-bottom: 0;
    }

    .dh-main img {
        margin: 0 -50px;
        max-width: inherit;
    }

    .dh-right {
        padding: 45px 15px 37px;
        z-index: 2;
    }

    .dh-right .lights {
        top: -36px;
        right: -20px;
    }

    .dh-right .dh-product.fp2 {
        margin-top: -16px;
    }
}

@media screen and (max-width: 567px) {
    #dec-promo dotlottie-player {
        height: auto;
    }

}