#header,
#footer {
    background-color: #25aae1
}

#footer {
    margin-top: 50px
}

.container.wide {
    background-position: top center;
    background-repeat: no-repeat
}

.intro img {
    margin-top: 300px
}

.intro p {
    color: #fff;
    margin-bottom: 180px
}

.content {
    margin-top: 50px
}

.content p:first-child {
    margin-top: 0
}

.content h2 {
    color: #0981b3;
    font-size: 15px;
    margin-bottom: -15px
}

p.shoutout {
    color: #0981b3;
    font-size: 25px;
    font-family: Georgia, serif
}

.firstletter {
    font-size: 40px !important;
    padding-right: 7px;
    line-height: .85em;
    color: #0981b3
}

#more-to-know {
    background-color: #bccbdc;
    padding-top: 20px
}

#more-to-know * {
    padding-left: 30px;
    padding-right: 30px
}

#more-to-know p {
    margin-top: 5px;
    font-family: helvetica nueue, Helvetica, sans-serif
}

#more-to-know .caption {
    padding-bottom: 30px;
    font-size: 12px;
    font-style: italic
}

#voices-modal {
    height: 685px !important
}

.modal-header {
    overflow: hidden !important
}

.modal-body {
    height: 592px !important;
    max-height: 592px !important
}

@media(min-width:768px) and (max-width:979px) {
    #top-content {
        height: 890px
    }
}

@media(max-width:767px) {
    #top-content {
        margin-left: -20px;
        padding-right: 40px;
        background-size: auto 530px;
        height: 530px
    }

    #top-content>.row {
        margin-left: 20px
    }

    #top-content img {
        margin-top: 50px
    }
}