@import url('/lib/foundation-essentials-5.5.0/css/foundation.min.css') screen;
body{
    margin:0;
    background-color: #f6f1e9;
    color: #382722;
}
body, h1, h2, h3, h4, h5, h6 {
    font-family: 'Alegreya', serif;
}
h1, h2, h3{
    font-weight: 900;
    font-style: italic;
    /*color: #ff5e00;
    background: -webkit-linear-gradient(#ffae00, #cf2d00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;*/
    margin: 30px 0 0;
}
h1.display{
    font-weight: normal;
    font-size: 46px;
}
h1{ font-size: 40px; }
h2{ font-size: 28px; }
h3{ font-size: 18px; }
h1 + p,
h2 + p,
h3 + p{
    margin-top: .5em;
}
header{
    width:100%;
}
a{
    color: #155bd0;
}
a:hover{
    color: #cf2d00;
}

main,
footer{
    max-width: 974px;
    margin: 0 auto;
}
.hero{
    -webkit-box-shadow:  0px 2px 6px 0px rgba(0, 0, 0, .2);
    box-shadow:  0px 2px 6px 0px rgba(0, 0, 0, .2);
    width: 100%;
    text-align: center;
    border-bottom: solid 1px #ccc;
    margin: 0 0 20px;
    background-color: #f58548;
}

.hero__img {
    max-width: 100%;
}

main,
footer{
    padding: 0 1em;
}

footer{
	margin:1.5em auto;
	padding-top: 1em;
	border-top:solid 1px #ccc;
    text-align: left;
}

@media only screen and (min-width: 768px) {
    .hero__img {
        max-width: 1000px;
        height: 470px;
    }
}

.display-text {
    font-size: 1.5rem;
}