.green-background {
    background-color: var(--main-site-bakground);
    color: #fff
}

.green-background a {
    color: #fff
}

.green-background h6 {
    color: var(--main-light-color)
}

.coffee-background {
    background-color: var(--main-second-site-background);
    color: #fff
}

.coffee-background a {
    color: #fff
}

.coffee-background h6 {
    color: var(--main-light-color)
}

.fullpage-banner,
.product-banner {
    padding-top: 120px;
    height: 100vh;
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%
}

.product-banner>img,
.product-banner>video {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
    z-index: -2
}

.product-banner__wapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.product-banner__description {
    width: 100%;
    padding: 0 50px;
    color: #fff;
    font-size: 20px;
    font-family: iCielProza, sans-serif;
    -ms-flex-item-align: center;
    align-self: center;
    text-align: center
}

.product-banner__description p {
    line-height: 1.4em
}

.product-banner__description .mt-next-section {
    margin-top: 100px
}

@media screen and (min-width:768px) {
    .product-banner__description {
        padding: 0 25%;
        font-size: 30px
    }
    .product-banner__description .mt-next-section {
        margin-top: 95px
    }
}

@media screen and (min-width:1024px) {
    .product-banner__description {
        font-size: 42px
    }
    .product-banner__description .mt-next-section {
        margin-top: 50px
    }
}

/*# sourceMappingURL=product-banner.style.css.map*/