html,
body {
    height: 100%;
}

.carousel,
.item,
.active {
    height: 100%;
}

.carousel-inner {
    height: 100%;
}

/* Background images are set within the HTML using inline CSS, not here */

.fill {
    width: 100%;
    height: 100%;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

footer {
    margin: 50px 0;
}

/*--queries--*/
@media(max-width:320px){
    .fill{
    width: 100%;
    min-height: 220px;
    background-position: center center;
    background-size: cover; 
    }
}
@media (max-width: 480px){
.fill {
    width: 100%;
    min-height: 250px;
    background-position: center center;
    background-size: cover;
}
.carousel,
.item,
.active {
    height: 40%;
}
.crsl{
    height: 250px;
}
}
@media(max-width:768px){
    .fill{
    width: 100%;
    min-height: 388px;
    background-position: center center;
    background-size: cover; 
    }
}
@media(max-width:991px){
    .fill{
    width: 100%;
    min-height: 441px;
    background-position: center center;
    background-size: cover; 
    }
}