.btn { background: linear-gradient(#FFE25E,#774A19); }
body { font-family: sans-serif; }
#top-bar { background: black; }
    #top-bar > .logo { top: 30px; left: 30px; }
    #top-bar > .links { font-family: brandon-grotesque, sans-serif; }
        #top-bar > .links > .link { font-size: 18px; font-weight: 500; margin: 0 30px; }
            #top-bar > .links > .link.about-us { order: 4; }
            #top-bar > .links > .link.invitation { order: 1; }
            #top-bar > .links > .link.reserve { order: 2; }
            #top-bar > .links > .link.contact { order: 5; }
            #top-bar > .links > .link.donation { order: 3; }

#banner { height: 20vw; position: relative; background: black }
    #banner:before { content: ''; background: url(/res/img/la/banner.png) center/contain no-repeat; height: 10vw; top: 2vw; width: 80vw; display: block; position: absolute; left: 10vw; }
    #banner:after { content: ''; background: url(/res/img/la/banner-btm.jpg) center/auto 100%; height: 8vw; bottom: 0; width: 100%; display: block; position: absolute; }
    #banner > #reserve-info { background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.6) 20%,rgba(0,0,0,1)); position: absolute; width: 100%; bottom: 0; padding: 70px 30px 50px; text-align: center; font-weight: 500; box-sizing: border-box; }
        #banner > #reserve-info > .rsvp { font-size: 30px; color: #F15825; margin-top: 30px; }
#footer > .copyright { color: #D6AF56 }

@media (max-width:1023px) {
    #mob-bar { background: black; padding: 8px 8px; }
        #mob-bar > .logo { position: absolute; right: 8px; top: 8px; }
            #mob-bar > .logo > img { height: 45px; }
    #m-hamburger { margin-top: 0px; }
    #footer > .address { font-size: 14px; }
}

@media (max-width:767px) {
        #banner > #reserve-info { height: 260px; bottom: -260px; background: black; padding: 20px; display: flex; flex-direction: column; justify-content: center; }
            #banner > #reserve-info > h3 { font-size: 22px }
            #banner > #reserve-info > .rsvp { font-size: 20px; }
}