/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
    height: 100%;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
    bottom: 30%;
    z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel-item {
    height: 100vh;
    min-height: 320px;
    background: no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.carousel-item > img {
    width: 100%;
    height: 100%;
}
.carousel-caption h1 {
    font-size: 5rem;
}
.carousel-caption h3 {
    font-size: 1.8rem;
}


/*-----------------------md Tablet---------------------------*/
@media screen and (max-width: 768px){
    .carousel-item {
        height: 50vh;
        min-height: 160px;
        background: no-repeat center center scroll;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
    .carousel-item > img {
        width: 100%;
        height: 100%;
    }
    .carousel-caption {
        bottom: 15%;
        z-index: 10;
    }
    .carousel-caption h1 {
        font-size: 1.5rem;
    }
    .carousel-caption h3 {
        font-size: 1rem;
    }
}

/*-----------------------xs Mobile---------------------------*/
@media screen and (max-width: 320px) {  
    .carousel-item {
        height: 50vh;
        min-height: 160px;
        background: no-repeat center center scroll;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
      }      
    .carousel-inner img {
        width: 100%;
        height: 100%;
    }
    .carousel-caption {
        bottom: 15%;
        z-index: 10;
    }
    .carousel-caption h1 {
        font-size: 1.5rem;
    }
    .carousel-caption h3 {
        font-size: 0.8rem;
    }
}