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

    /* === GLOBAL === */

    /* Page Width */
    #desktop-nav, main, #footer-logos{
        width: 900px;
    }

    /* Font Size */
    h1{ font-size: 30px; }

    h2{ font-size: 26px; }

    h3{ font-size: 20px; }

    p{ font-size: 18px; }

    #desktop-nav a{ font-size: 20px; }

    /* Header */
    #header-logo{
        top: 8px;
    }

    /* Footer */
    #copyright-msg{
        width: 120px;
        transform: translateY(-110%);
    }

    /* === HOME === */

    /* === Avon Works Launch === */

    #avon-works-launch main article#performers-article{
        display: block;
    }

    #avon-works-launch main article#performers-article img{
        float: left;
    }
}

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

    /* === GLOBAL === */

    /* Page Width */ main, #footer-logos{ width: 800px; }

    header{ 
        height: 72px;
        box-sizing: border-box;
    }

    /* Switch to phone menu */
    #desktop-nav{ display: none; }
    #phone-nav-button{ display: flex; }

    #bg-img-btn{
        right: 80px !important;
    }

    /* === Contact === */

    #contact #contact-form input[type="text"], #contact #contact-form input[type="email"]{
        width: 70%;
    }
}

@media only screen and (max-width: 950px){
    footer{
        display: flex;
        justify-content: center;
        flex-direction: column;
    }

    #copyright-msg{
        position: static;
        width: 100%;
        display: block;
        transform: translateY(0);
        text-align: center;
        margin-top: 15px;
    }
}

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

    /* === GLOBAL === */

    /* Page Width */ main{ width: 600px; }

    .title-area{ padding: 20px; }

    .content-area{ padding: 20px; }

    .gallery{  grid-template-columns: 1fr 1fr; }

    #footer-logos{ width: 100%; }

    #home .gallery{
        display: flex;
        justify-content: center;
        flex-direction: row;
        flex-wrap: wrap;
    }

    #home .gallery a{
        width: 47.5%;
        padding: 4px;
    }

    /* === Avon Works Launch === */

    #avon-works-launch main article#crowd-article img{
        width: 300px;
    }

    #avon-works-launch main article#book-signing-article{
        display: block;
    }

    #avon-works-launch main article#book-signing-article img{
        float: left;
    }

    /* === Riding on Rubber === */

    /* ++ Title Area ++ */
    #riding-on-rubber .title-area{
        display: block;
    }

    #riding-on-rubber .title-area{
        padding-bottom: 25px;
    }

    #riding-on-rubber .title-area h1{
        margin-bottom: 15px;
    }
}

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

    /* === GLOBAL === */

    /* Page Width */ main{ width: 92%; }

    .title-area{ padding: 30px; }

    .content-area{ padding: 30px; }

    /* === Contact === */

    #contact #contact-form > div{
        display: block;
    }

    #contact #contact-form > div:last-of-type{
        margin-top: 10px;
    }

    #contact-form label{
        display: block;
        margin-bottom: 10px;
    }

    #contact #contact-form input[type="text"], #contact #contact-form input[type="email"]{
        width: 100%;
        box-sizing: border-box; 
    }
}

@media only screen and (max-width: 570px){
    #home .gallery a{ width: 45%; }
}

/* This media break is here to make the transition for the phone menu's size from 500px to 90% look smooth. */
@media only screen and (max-width: 555px){
    #phone-nav-container{
        width: 90%;
    }
}

/* Phone view -> Galleries switch to one column */
@media only screen and (max-width: 550px){

    /* === GLOBAL === */

    /* ++ Text ++ */

    /* Text Alignment */
    h1{ text-align: left; }

    /* Font Size */
    h1{ font-size: 40px; }

    h2{ font-size: 36px; }

    h3{ font-size: 30px; }

    p, a.link{ font-size: 22px; }

    /* ++ Title Area ++ */
    .title-area.flex{
        display: block;
    }

    .title-area.flex.extra-padding{
        padding-bottom: 50px;
    }

    .title-area.flex.extra-padding h1{
        margin-bottom: 25px;
    }

    /* ++ Gallery ++ */
    .gallery{
        display: flex;
        flex-direction: column;
    }

    .gallery a, .gallery div{ padding: 4px; }

    /* Turn off hover effects on gallery pages */
    .gallery-page .gallery div:hover{ 
        cursor: auto;
        background-color: #222;
    }

    .gallery-page .gallery div:hover img{
        filter: brightness(1);
        opacity: 1; 
    }

    /* Set gallery imgs to the size ratio of the source img */
    .gallery img{ 
        height: 100%; 
        max-height: 330px;
    }

    .gallery-page .gallery img{
        max-height: 100%;
    }

    /* Hide large imgs on gallery pages */
    #large-imgs{ display: none; }
    #back-button{ display: none; }

    /* === Home === */

    #home .gallery a{ width: 100%; }

    /* === Avon Works Launch */

    #avon-works-launch main article:not(#launch-night-article){
        display: flex;
        flex-direction: column;
    }

    #avon-works-launch main article:not(#launch-night-article) img{
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 20px;
    }

    /* === Riding on Rubber === */
    #riding-on-rubber main .gallery img{
        height: 100%;
    }
}

@media only screen and (max-width: 450px){
    .content-area p{
        text-align: left;
    }
}