/* On the homepage, the main content (hero) should start at the top, under the fixed header */
.home-page main {
    padding-top: 0;
}

.hero {
    background-color: #f8f9fa;
    text-align: center;
}

.hero-content {
    background: url('/images/logo.jpg') no-repeat center center/cover;
    /* This padding includes the space needed for the fixed header to float over it */
    padding: 240px 0px 112px 0px;
    color: white;
    text-shadow: 1px 1px 2px black;
}

/* This container limits the width of the text content on top of the hero images */
.hero-content .hero-content-inner {
    background-color: rgba(0, 0, 0, 0);
    padding: 20px;
    border-radius: 10px;
    max-width: 700px;
    margin: 0 auto;
}

.hero h1 {
    font-size: 3.2em;
    color: white;
    margin-bottom: 5px;
}

.hero p {
    font-size: 1.3em;
    font-weight: 600;
    color: #FCFF52;
    margin-bottom: 25px;
}