﻿#top-bar > .logo { top: 32px; left: 34px; }
    #top-bar > .logo > img { height: 150px; }
#top-bar > .links { font-family: brandon-grotesque, sans-serif; }
    #top-bar > .links > .invitation { order: 1; }
    #top-bar > .links > .reserve { order: 2; }
    #top-bar > .links > .donation { order: 3; }
    #top-bar > .links > .about-us { order: 4; }
    #top-bar > .links > .contact { order: 5; }
    #top-bar > .links > .link { font-weight: 500; margin: 0 40px; }

#top-bar { background: black; }
#banner { background: url(/res/img/mm/banner.png) center 15px/76vw no-repeat; background-color: black; height: 23vw; }
#reserve-info { background: black; color: white; text-align: center; padding: 0 20px 20px; }
    #reserve-info > h3 { color: #F15825; margin: 0 0 10px; font-size: 40px; font-weight: normal; }
    #reserve-info > p { max-width: 800px; margin-left: auto; margin-right: auto; font-size: 20px; }
    #reserve-info > .rsvp { text-transform: uppercase; color: #D6AF56; font-size: 30px; }

@media(max-width:1439px) {
    #top-bar > .links > .link { margin: 0 30px; }
    #banner { background-size: 70vw; }
}

@media(max-width:1023px) {
    #top-bar { display: none; }
    #mob-bar { display: flex; background: black; }
        #mob-bar > .logo > img { height: 50px; }
    #banner { height: 35vw; background: url(/res/img/mm/banner.png) top / 95vw black no-repeat; }
    #reserve-info > h3 { font-size: 29px; line-height: 1em; }
    #reserve-info > p { line-height: 1.5em; }
    #reserve-info > .rsvp { font-size: 20px; }
}
