/*
 * Handle smaller windows
 */

/*
 * Handle small devices
 */
@media screen and (max-width: 900px) {

    body,html {
        font-size: 18px;
    }

    #background {
        background-position: 40% 0;
        -webkit-background-size: 200% auto;
           -moz-background-size: 200% auto;
             -o-background-size: 200% auto;
                background-size: 200% auto;
        top: 50px;
        left: 0px;
    }

    .section {
        padding: 60px 10px;
    }

    .filler {
        min-height: 350px;
    }

    .title {
        font-size: 150%;
    }

    /*
     * Tweak home page for mobile
     */

    #home .title {
        position: absolute;
        top: 70px;
        left: 10px;
        margin: 0px;
        width: auto;
        max-width: none;
        height: auto;
        display: inline-block;
    }

    /*
     * Mobile navigation
     */

    #navigation {
        display: none;
    }

    #mobile-navigation {
        display: unset;
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100%;
        z-index: 1000;
        border-bottom: 1px black solid;
    }

    #mobile-navigation .nav-menu-button {
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
        position: fixed;
        top: 0px;
        left: 0px;
        height: 100%;
        width: 50px;
        padding: 8px;
        z-index: 100;
        opacity: 0.4;

        background-image: url("../images/hamburger.svg");
        background-repeat: no-repeat;
        background-position: center left;
        -webkit-background-size: contain;
           -moz-background-size: contain;
             -o-background-size: contain;
                background-size: contain;
        -webkit-background-origin: content-box;
           -moz-background-origin: content-box;
             -o-background-origin: content-box;
                background-origin: content-box;
    }

    #mobile-navigation .nav-menu-button:hover {
        opacity: 0.7;
    }

    #mobile-navigation .nav-menu-button:hover:active {
        opacity: 1.0;
    }

    #mobile-navigation .nav-menu-wrapper {
        position: fixed;
        top: 100%;
        left: 0px;
        z-index: 1001;
    }

    #mobile-navigation .nav-menu {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
           -moz-box-orient: vertical;
           -moz-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-pack: space-evenly;
        -webkit-justify-content: space-evenly;
           -moz-box-pack: space-evenly;
            -ms-flex-pack: space-evenly;
                justify-content: space-evenly;
        -webkit-flex-wrap: nowrap;
            -ms-flex-wrap: nowrap;
                flex-wrap: nowrap;
        border-color: black;
        border-style: solid;
        border-width: 1px 1px 0px 0px;
    }

    #mobile-navigation .nav-menu .nav-item {
        padding: 15px;
        border-bottom: 1px black solid;
    }

    #mobile-navigation .title {
        width: 100%;
        background: white;
        padding: 15px;
        text-align: center;
        font-size: 150%;
        font-weight: bolder;
    }

    /*
     * Tweak venue data for mobile
     */

    .venue {
        max-width: 650px;
    }

    .venue .question {
        max-width: 250px;
        padding: 20px 10px;
    }

    #rehearsal .venue .content {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-direction: row;
           -moz-box-orient: horizontal;
           -moz-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
    }

    .venue .map {
        -webkit-flex-basis: 300px;
            -ms-flex-preferred-size: 300px;
                flex-basis: 300px;
        max-width: 300px;
        min-height: 300px;
    }

    /*
     * Tweak rsvp page for mobile
     */

    #rsvp .guest {
        padding: 5px;
    }

    #rsvp .response label {
        margin-left: 5px;
    }
}


@media screen and (max-width: 750px) {

    #home .title {
        max-width: 400px;
        font-size: 125%;
    }
}

/*
 * Phones
 * Galaxy S2, iPhone3-5
 */
@media screen and (max-width: 550px) {
    body, html {
    }

    #background {
        background-position: 55% 8px;
        -webkit-background-size: 1600px auto;
        -moz-background-size: 1600px auto;
        -o-background-size: 1600px auto;
        background-size: 1700px auto;
    }

    #home .title {
        font-size: 120%;
    }

    #home .title .name {
        font-size: 150%;
    }

    .venue .map {
        padding: 10px;
    }
}

/*
 * Very small devices
 * Motorola RAZR, Blackberry 8300
 */
@media screen and (max-height: 450px) and (max-width: 400px) {
    #background {
        background-position: 65% 8px;
        -webkit-background-size: 700px auto;
           -moz-background-size: 700px auto;
             -o-background-size: 700px auto;
                background-size: 700px auto;
    }

    #home .title {
        top: 70vh;
        left: auto;
        right: 5px;
    }

}

/*
 * Very narrow devices
 * Motorola RAZR
 */
@media screen and (max-width: 300px) {

    body, html {
    }

    .section {
        padding: 50px 10px;
    }

    #accommodations .logo img {
        width: 100px;
    }

    .venue .map {
        -webkit-flex-basis: 100px;
            -ms-flex-preferred-size: 100px;
                flex-basis: 100px;
        max-width: 100px;
        min-height: 100px;
    }
}