:root {
    --xs: 0;
    --sm: 576px;
    --md: 768px;
    --lg: 992px;
    --xl: 1200px;
    --xxl: 1400px;
} 

#background-video {
    position: absolute;
    z-index: 0;
    max-height: 100%;
    opacity: 40%;
    object-fit: cover;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    height:700px;
}


#hero {
    position: relative;
    height: 700px;
/*    margin-top: -8rem;*/
    margin-bottom: -4rem;

}

@media (min-width:576px) {
    #hero {
        height: 600px;
        /*margin-top: -8rem;*/
        
    }
    #background-video {
        height: 600px;
    }
}


@media (min-width: 768px) {
    #hero {
        height: 700px;
        /*margin-top: -8rem;*/
        margin-bottom: 0rem;
    }
    #background-video {
        height: 700px;
    }
}

@media (min-width: 992px) {
    #hero {
        height: 700px;
        /*margin-top: -0rem;*/
    }
    #background-video {
        height: 700px;
    }
}