/*
 * Mobile styles & Breakpoints
 * By Funkhaus - 2016
 * www.funkhaus.us
 *
 * @see https://www.emailonacid.com/blog/article/email-development/emailology_media_queries_demystified_min-width_and_max-width
 * (min-width: 1800px) == Greater than or equal to 1800px
 * (max-width: 750px) == Less than or equal to 750px
 *
 */

/*
 * Breakpoints
 */
    /* Cinema Display and larger */
    @media (min-width: 1800px) {

        #header{
            padding-top: 70px;
            max-width: 1280px;
            right: 0;
            left: 0;
        }
        .work-detail #header{
            margin: 0 auto;
        }
        .home #header {
            left: 100px;
        }
        .title {
            font-size: 102px;
        }
        .contact {
            font-size: 28px;
        }
        .work-list a {
            font-size: 57px;
            padding-right: 15px;
        }        
        #content.work-detail{
            margin-top: 100px;
            margin-bottom: 150px;
        }
        .meta{
            padding-bottom: 130px;
            max-width: 1280px;
        }
    }

    /* Smaller than Desktop HD */
    @media (max-width: 1200px) {

    }

    /* Smaller than tablet */
    @media (max-width: 750px) {
        .title {
            font-size: 50px;
        }
        .contact {
            font-size: 17px;
        }
        #header {
            left: 25px;
            right: inherit;
        }
        .work-detail #header{
            margin-left: 25px;
            margin-right: 25px;
        }
        #content {
            padding-top: 185px;
            margin: 0 25px;
        }
        .work-list {
            padding-bottom: 80px;
        }
        .work-list li {
            width: 100%;
        }
        .slideshow {
            display: none;
        }
        #content.work-detail {
            bottom: 175px;
            top: 145px;
            right: 25px;
            left: 25px;
        }
        .meta {
            height: auto;
            padding-bottom: 50px;
            font-size: 31px;
            right: 25px;
            left: 25px;
        }
        .meta .line-1 {
            font-size: 31px;
        }
        .close {
            font-size: 22px;
        }
    }

    /* Smaller than tablet and landscape */
    @media (max-width: 750px) and (orientation: landscape){
        .work-detail #header {
            padding-top: 20px;
        }
        #content.work-detail {
            top: 110px;
            bottom: 100px;
        }
    }