html, body{ height: 100%; }
body {
    background-color: #fafafa;
    font-family: 'Lato', sans-serif;
    font-size: 1.25rem;
    font-weight: 300;
}
h1, h2, h3, h4, h5 { 
    font-family: 'Aleo', serif;
    font-weight: 300;
}
h1 { font-size: 3.75rem; }
h2 { font-size: 3.28rem; }
h3 { font-size: 2.87rem; }
h4 { font-size: 2.51rem; }
h5 { font-size: 2.2rem; }
h6 { font-size: 1.92rem; }
#fold h1 { font-weight: 400;  }
#fold h2 { font-family: 'Lato', sans-serif;}
#fold, section, footer { margin-top: 12.5%; }
#fold .banner { margin-top: 18.75%; }
footer {
    font-style: italic;
    margin-bottom: 6.25%;
}
#fold { margin-bottom: 18.75%; }
.quote {
    font-style: italic;
    border-left: solid #ccc;
    padding-left: 1.125rem;
}
.section-hook { font-weight: 400; }
.carousel-container { margin-top: 3rem; }
.carousel-image { 
    height: 12rem;
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
.carousel-control-prev, .carousel-control-next {
    background-color: rgba(0, 0, 0, 0.5);
    height: 3rem;
    width: 3rem;
    margin-top: 4rem;
}
.carousel-indicators li { background-color: rgba(200, 200, 200, 0.5); }
.carousel-indicators .active { background-color: rgba(100, 100, 100, 0.5); }
// Large devices (desktops, 992px and up)
@media all and (min-width: 992px) { 
    #main #fold .banner { margin-top: 25%; }
}