.component-parallax .layout-wrapper{
    position: relative;
    min-height: 50vh;
}

.component-parallax .parallax {
    position: absolute !important;
    background: none !important;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    clip: rect(0, auto, auto, 0);
    display: flex;
    align-items: center;
    justify-content: center;
}

.component-parallax .parallax-bg {
    content: "";
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
}

/* DISABLING THE PARALLAX EFFECT FOR TOUCH DEVICES 
   (PARALLAX HERE MEANS FIXED BACKGROUND IMAGE ON SCROLL) */ 
   @media (pointer:coarse) {
    .parallax-bg {
        position:absolute !important;
    }
}


.component-parallax .overlay {
    max-width: 100%;
    padding: 2rem 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-shadow: 0 0 1px rgba(0,0,0,0.2);
}

.component-parallax .overlay::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0,0,0,0.4);
}

.component-parallax.layout-standard .overlay {
    text-align: center;
}

.component-parallax.has-multiple-images .parallax-bg-carousel {
    position: fixed; /* Must be fixed so the background is locked while a user scrolls */
    top: 0; bottom: 0; left: 0; right: 0;
    z-index: 0;
    clip: rect(0, auto, auto, 0);
}

.component-parallax.has-multiple-images .parallax-bg {
    position: fixed;
    top: 0; bottom: 0; left: 0; right: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    pointer-events: none;
}

.component-parallax.has-multiple-images .parallax-bg.active,
.component-parallax.has-multiple-images .parallax.active .parallax-bg{
    opacity: 1;
    z-index: 1;
}

.component-parallax.has-multiple-images .fade {
    opacity: 0;
    transition: opacity 1s ease-in-out;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 0;
}

.component-parallax.has-multiple-images .fade.active {
    opacity: 1;
    z-index: 1;
}

/*==== LAYOUT HERO =========*/
.component-parallax.layout-hero { }
.component-parallax.layout-hero .layout-wrapper { min-height: 100vh; }
.component-parallax.layout-hero .overlay {
    text-align: center;
}

/*=====================================================
RESPONSIVE
======================================================*/
@media only screen and (max-width:767px) {
}
@media only screen and (min-width:768px) {
}
@media only screen and (min-width:992px) {
    .component-parallax .overlay {
        max-width: 90%;
    }
}
@media only screen and (min-width:1200px) {
    .component-parallax .overlay {
        max-width: 80%;
    }
}