* { box-sizing: border-box; }
body { 
    font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;;
    margin: 0; 
    text-align: center; 
}
h1 { 
    color: inherit;
    font: normal 1.3em 'Noto Serif', Georgia, 'Times New Roman', Times, serif; 
    letter-spacing: .01em;
    margin: 0 0 .8em; 
    padding: 0; 
}
p { 
    color: inherit;
    font-size: 1em; 
    letter-spacing: .01em;
    margin: 0 0 1em; 
    padding: 0; 
}
p:last-child {
    margin-bottom: 0;
}
a {
    color: inherit;
    cursor: pointer; 
}
a.button { 
    background-color: #587624; 
    border-radius: 1em;
    display: inline-block;
    color: #fff;
    font-size: 1.16em;
    padding: .2em .8em;
    text-decoration: none;
    transition: background-color .3s ease-in-out;
}
a.button:hover {
    background-color: #678b29;
}
.logo {
    margin: 1.8rem auto;
    max-width: 75%;
    width: 325px; 
}
.masthead { 
    background: url('EasternScreechOwl_JayMcGowan.jpg') no-repeat center center; 
    background-size: 100%;
    height: 0; 
    padding-bottom: 42%; 
    position: relative; 
    width: 100%; 
}
.banner {
    align-items: center;
    color: #fff; 
    display: flex; 
    font-size: 24px;
    height: 100%;
    left: 0;
    padding: 3.75rem;
    position: absolute;
    top: 0;
    width: 100%; 
    z-index: 3;
}
.banner-text { 
    background-color: rgba(0,0,0,.5);
    max-width: 60%; 
    padding: 3rem 1rem;
    width: 580px; 
}
.caption-area {
    background-color: rgba(0,0,0,0.5);
    border-radius: 5px; 
    bottom: 10px;
    right: 4%;
    font-size: .75rem;
    padding: .4rem .8rem;
    position: absolute;
    text-align: right;
    z-index: 2;
}
.gradient {
    background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%);
    background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 );
    bottom: 0;
    left: 0;
    height: 25%;
    position: absolute;
    width: 100%;
    z-index: 1;
}
@media (max-width: 1020px) {
    .banner {
        padding: 2rem;
    }
    .banner-text { 
        padding: 2rem 1rem;
    }
}
@media (min-width: 800px) {
    .logo {
        margin-top: 3rem;
    }
}
@media (max-width: 799px) {
    .banner {
        font-size: 18px;
    }
}
@media (max-width: 599px) {
    h1 br {
        display: none;
    }
    .masthead {
        background-position: center bottom;
        background-size: 150%;
        padding-bottom: 60%;
    }
    .banner {
        font-size: 12px;
        padding: 1rem;
    }
    .banner-text { 
        padding: .8rem;
    }
    .caption-area {
        background-color: transparent;
        color: #000;
        bottom: auto;
        font-size: .5rem;
        padding: 0;
        right: 2%;
        top: 102%;
    }
}
@media (max-width: 359px) {
    .banner {
        padding: .5rem;
    }
    .banner-text { 
        max-width: 65%;
        padding: .5rem;
    }
}