html,
body {
    height: 100%;
}

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

h1 {
	  font-size: 48px;
}

.carousel-inner {
    height: 525px;
}

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

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

footer {
    margin: 50px 0 0;
}

.carousel-caption {
	border-radius:4px;
	background-color: rgba(0, 0, 0, 0.6);
}

.h1 .small, .h1 small, .h2 .small, .h2 small, .h3 .small, .h3 small, .h4 .small, .h4 small, .h5 .small, .h5 small, .h6 .small, .h6 small, h1 .small, h1 small, h2 .small, h2 small, h3 .small, h3 small, h4 .small, h4 small, h5 .small, h5 small, h6 .small, h6 small {
  color: white;
}

@media only screen and (max-width: 900px) {
    /* .carousel-inner {
        height: 300px
    } */

    .carousel-inner{height: 425px;}

    .fill {
        height: 200px
    }
    .carousel-caption{right: 15px !important; left: 15px !important; top: 20px !important; bottom: auto !important}
    .carousel-caption h3{font-size: 20px !important}
}