﻿.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 { background: url(/res/img/la24/banner.jpg) center/cover; height: 20vw; position: relative; }
    #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 { background: url(/res/img/la24/splash-m.jpg) center/cover; height: 100vw; min-height: 0; }
        #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; }

}