.page-intro-header {
    background-color:aliceblue;
    padding:10px 10px 10px 10px;
    text-align:center;
}
.page-intro-header > .intro-image {
    width:100%;
    max-width:500px;
}

.mainsitepage-intro-header {
    height: 500px;
    padding-top: 0px; /* If you're making other pages, make sure there is 50px of padding to make sure the navbar doesn't overlap content! */
    padding-bottom: 340px;
    text-align: center;
    color: #f8f8f8;
    background-size: contain;
    background: url('/images/pages/HomeImage-s.jpg') no-repeat left top;
    background-position: 0% 0%;
}


    @media (min-width: 768px) {
        .mainsitepage-intro-header {
        padding-top: 140px; /* If you're making other pages, make sure there is 50px of padding to make sure the navbar doesn't overlap content! */
        padding-bottom: 40px;
    }
}

@media (min-width: 992px) {
    .mainsitepage-intro-header {
        background: url('/images/pages/HomeImage.jpg') no-repeat left top;
        padding-top: 50px; /* If you're making other pages, make sure there is 50px of padding to make sure the navbar doesn't overlap content! */
    }
}

.mainsitepage-intro-message {
    position: relative;
    font-family: 'Nunito', sans-serif;
    text-transform: uppercase;
}

    .mainsitepage-intro-message > h1 {
        color: black;
        margin: 0;
        font-size: 1em;
        padding-top: 15px;
    }

    .mainsitepage-intro-message > h2 {
        font-family: 'Satisfy', cursive;
        color: #6e3d20;
        text-transform: lowercase;
        font-size: 1em;
        text-align: right;
        direction: ltr;
    }

@media (min-width: 600px) {
    .mainsitepage-intro-message > h1 {
        font-size: 1.5em;
        padding-top: 0px;
    }

    .mainsitepage-intro-message > h2 {
        font-size: 2em;
        text-align: right;
        direction: ltr;
    }
}

@media (min-width: 768px) {
    .mainsitepage-intro-message > h1 {
        font-size: 2em;
        padding-top: 0px;
        text-align: right;
        direction: ltr;
    }

    .mainsitepage-intro-message > h2 {
        font-size: 2em;
    }
}

@media (min-width: 992px) {
    .mainsitepage-intro-message > h1 {
        font-size: 2em;
        text-align: center;
    }

    .mainsitepage-intro-message > h2 {
        text-align: center;
    }
}

.mainsitepage-playbutton {
    margin-right: auto;
    margin-left: auto;
    display: block;
    margin: auto;
    text-align: center;
}

.carousel-inner > .item {
    position: relative;
    display: none;
    -webkit-transition: 0.6s ease-in-out left;
    -moz-transition: 0.6s ease-in-out left;
    -o-transition: 0.6s ease-in-out left;
    transition: 0.6s ease-in-out left;
}