/*Carousel*/
.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;
}

.carousel {
    padding-bottom: 20px;
}

.carousel-indicators {
    bottom: 0;
}

.carousel-control.right,
.carousel-control.left {
    background-image: none;
}

.carousel-caption {
    left: 10% !important;
    text-align: left !important;
}

    .carousel-caption h2 {
        padding-bottom: .4em;
    }

    .carousel-caption h2 {
        position: relative;
        top: -580%;
        font: bold 5em arial, verdana;
        left: 0% !important;
        /*z-index:1000;*/
        /*em(s) are better than px, because they allow font resizing when browser is resized size/16px = em*/
    }

    .carousel-caption h3 {
        position: relative;
        left: 0%;
    }

    .carousel-caption a {
        border:1px solid white;
        border-color: white !important;
        background-color: transparent;
        color: white;
        border-radius: 40px;
        width: 250px;
        position: relative;
        text-align: center;
        left: 0%;
        margin-top: 1em;
    }

        .carousel-caption a:hover {
            background-color: #008CBA; /* Green */
            color: white;
        }
    /* Animation delays */
    .carousel-caption h2:first-child {
        -webkit-animation-delay: 1s;
        animation-delay: 1s;
    }

    .carousel-caption h3:nth-child(2) {
        -webkit-animation-delay: 2s;
        animation-delay: 2s;
    }

    .carousel-caption a {
        -webkit-animation-delay: 3s;
        animation-delay: 3s;
    }