@media screen and (min-width: 365px) {
    .background {
        top: 200px !important;
    }
    #banner .carousel-item {
        height: 200px !important;
    }
    .vid {
        width: 100%;
    }

}

@media screen and (min-width: 500px) {
    .background {
        top: 300px !important;
    }
    #banner .carousel-item {
        height: 300px !important;
    }
    #events .row div[class*="col-"] .box-ev{
        width: 210px;}
}

@media screen and (min-width: 760px) {
    .background {
        top: 400px !important;
    }
    #banner .carousel-item {
        height: 400px !important;
    }

    .vid {
        width: 80%;
    }
    

    #events .row div[class*="col-"] .box-ev{
        width: 240px;}
}

@media screen and (min-width: 900px) {
    .banner-container {
        max-height: 50vh;
    }
    .banner-content {
        bottom: 2.2rem;
        transform: translateY(0%);
    }
    .banner-head {
        font-size: 5rem;
    }
    .banner-text {
        display: block;
    }

    #events .row div[class*="col-"] .box-ev{
        width: 210px;}
}

@media screen and (min-width: 1200px) {
    .banner-container {
        max-height: 70vh;
    }

    #events .row div[class*="col-"] .box-ev{
        width: 250px;}

}

@media screen and (min-width: 1400px) {
    .banner-container {
        max-height: 90vh;
    }

    #events .row div[class*="col-"] .box-ev{
        width: 300px;}

}