/*
 * 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) {

        /* main menu */
        #header {
            height: 150px;
            left: 150px;
            right: 110px;
        }
        #main-menu li {
            font-size: 22px;
        }
        #logo .svg {
            width: 245px;
            height: 70px;
        }

        /* home */
        .home .main-slideshow {
            left: 150px;
            right: 150px;
            top: 150px;
            bottom: 150px;
        }
        .home .border.top.left {
            left: 140px;
            top: 140px;
        }
        .home .border.bottom.right {
            right: 140px;
            bottom: 140px;
        }
        .home .main-slideshow.resting ~ .border {
            width: calc(100% - 280px);
            height: calc(100% - 280px);
        }
        .home .text-slideshow {
            top: 120px;
            right: 120px;
            bottom: 120px;
            left: 120px;
        }

        /* editor grid */
        #editor-menu .sub-menu li {
            font-size: 38px;
        }
        #editor-menu > li > a {
            font-size: 22px;
        }
        .editor-grid .background-slideshow {
            left: 150px;
            right: 150px;
            top: 150px;
            bottom: 150px;
        }

        /* work detail */
        .breadcrumb {
            font-size: 22px;
            top: 70px;
        }
        .work .slide-meta .title {
            font-size: 30px;
            top: 150px;
        }
        .video-slideshow {
            top: 250px;
            bottom: 250px;
        }
        .block-thumb img {
            width: 330px;
            height: 180px;
        }
        .thumb-title {
            font-size: 26px;
        }
        .work .grid-reel {
            bottom: 70px;
        }
        .thumb-opened .grid-reel {
            bottom: 240px;
            background-color: #ffffff;
        }

        /* about */
        .about .entry {
            top: 150px;
            right: 150px;
            bottom: 150px;
            left: 150px;
            font-size: 33px;
        }

        /* contact */
        .contact .entry li {
            padding: 0 150px;
        }
        .contact .label {
            font-size: 36px;
        }
        .contact .address-wrap,
        .contact .people-wrap {
            font-size: 22px;
        }
        .contact .expand-wrap {
            right: 130px;
        }
        .contact-footer {
            padding: 0 150px;
            font-size: 22px;
        }

    }

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

        /* work detail */
        .work .video-wrap {
            margin: 0 90px;
        }

    }

    /* Smaller than tablet */
    @media (max-width: 750px) {

        /* home */
        .home .main-slideshow,
        .home .border {
            display: none;
        }
        .home .unprocessed-image {
            display: block;
        }
        .home .text-slideshow {
            white-space: normal;
            left: 0;
            right: 0;
        }
        .home .text-slideshow .slide {
            width: 100%;

            -webkit-clip-path: none;
            text-align: center;
            -webkit-justify-content: space-around;
            justify-content: space-around;
        }
        .text-slideshow .line {
          margin: 30px auto;
          left: 0;
          right: 0;
        }
        .home .text-slideshow .line-1 {
            font-size: 38px;
            position: absolute;
            bottom: 50%;
        }
        .home .text-slideshow .line-2 {
            position: absolute;
            top: 50%;
        }
        .home .text-slideshow .play-button {
          opacity: 1;
        }

        /* Editor-grid */
        .editor-grid .background-slideshow {
            display: none;
        }
        .editor-grid #editor-menu {
            -webkit-justify-content: flex-start;
            justify-content: flex-start;
        }
        #editor-menu .sub-menu li {
            display: block;
        }
        .editor-grid .sub-menu {
            margin: 0 0 45px;
        }

        /* about */
        .about .entry {
            padding: 0;
            color: #000000;
            left: 20px;
            right: 20px;
            background-image: none !important;
            line-height: 1.8;
            position: static;
            margin: 65px 20px 10px;
            font-size: 15px;
        }
        .about .attachment-post-thumbnail {
            display: block;
            width: 100%;
            height: auto;
        }
        .about .video-wrap {
            display: none;
        }

        /* contact */
        .contact .entry {
            margin-top: 100px;
        }
        .contact .entry li {
            padding: 20px 15px 0;
        }
        .contact .address-wrap {
            width: 100%;
        }
        .address-wrap br {
            display: none;
        }
        .contact .address-wrap > *:nth-child(2),
        .contact .address-wrap > span:nth-of-type(2) {
            position: absolute;
            top: 20px;
            left: 40%;
            margin: 0.5em 0;
        }
        .contact .people-wrap {
            margin-left: 0;
            padding: 0;

            -webkit-flex-direction: column;
            flex-direction: column;
            -webkit-flex-wrap: nowrap;
            flex-wrap: nowrap;
        }
        .expanded .person {
            margin-bottom: 40px;
        }
        .contact .expand-wrap {
            right: 0;
            padding: 13px 20px;
        }
        .contact-footer {
            padding: 0 15px;
            display: block;
        }
        .contact-footer > div {
            margin: 25px 0;
        }

    }

/*
 * iPad and mobile
 */
    @media only screen
    and (min-device-width : 768px)
    and (max-device-width : 1024px),
    (max-width : 750px) {
        /* main menu */
        #header {
            left: 0;
            right: 0;
            z-index: 150;
        }
        #main-menu {
            background-color: #ffffff;
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 120px 0 80px;

            display: -webkit-flex;
            display: flex;
            -webkit-flex-direction: column;
            flex-direction: column;
            -webkit-justify-content: space-around;
            justify-content: space-around;
            -webkit-align-items: center;
            align-items: center;

            -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
        }
        #hamburger {
            display: block;
            position: absolute;
            cursor: pointer;
            z-index: 5;
            padding: 20px;
            width: 25px;
            height: 30px;
            top: 4px;
        }
        #hamburger span {
            background-color: #000000;
            width: 25px;
            height: 3px;
            position: absolute;
            left: 0;
            top: 0;
            margin: 20px;
            border-radius: 15%;

            -webkit-transform-origin: center;
            transform-origin: center;
        }
        .light-header #hamburger span {
            background-color: #ffffff;
        }
        #hamburger span:nth-child(2) {
            top: 7px;
        }
        #hamburger span:nth-child(3) {
            top: 14px;
        }
        .light-header #main-menu li a,
        #main-menu li a {
            color: #000000;
            font-size: 36px;
        }
        #logo {
            position: absolute;
            right: 20px;
            top: 13px;
        }
        #main-menu .menu-item-type-custom,
        #main-menu li.menu-item-type-custom a {
            display: block;
            text-transform: lowercase;
            color: #666666;
            font-size: 27px;
        }

        /* menu opened */
        body.menu-opened {
            overflow: hidden;
        }
        .menu-opened #hamburger span {
            background-color: #000000;
            border-radius: 15%;
        }
        .menu-opened #hamburger span:first-child {
            top: 7px;

            -webkit-transform: rotateZ(-135deg);
            transform: rotateZ(-135deg);
        }
        .menu-opened #hamburger span:nth-child(2) {
            opacity: 0;
        }
        .menu-opened #hamburger span:nth-child(3) {
            top: 7px;

            -webkit-transform: rotateZ(135deg);
            transform: rotateZ(135deg);
        }
        .menu-opened #logo .svg *,
        .menu-opened .light-header #logo .svg * {
            fill: #000000;
        }

        /* work detail */
        .breadcrumb-wrap {
            position: absolute;
            top: 55px;
            left: 20px;
            right: 20px;
            margin: 20px 0;

            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .breadcrumb-wrap .editors-link {
            display: inline;
            font-size: 18px;
            color: #aeaeae;
        }
        .not-mobile .editors-link:hover {
            color: #000000;
        }
        .work .breadcrumb {
            top: 80px;
            font-size: 20px;
            display: inline;
            position: static;
            width: initial;
            margin: 0;
        }
        .work .slide-meta .title {
            font-size: 28px;
            top: 120px;
            padding: 0 15px;
            box-sizing: border-box;
        }
        .work .slide-meta .credits {
            bottom: 30px;
            position: fixed;
            padding: 0 15px;
            box-sizing: border-box;
        }
        .work .slide-meta > div {
            position: absolute;
            width: 100vw;
        }
        .work .video-wrap {
            margin: 0 15px;
        }
        .work .nav-wrap {
            display: none;
        }
        .work .teaser-wrap {
            display: block;
            font-size: 16px;
            position: absolute;
            bottom: 30px;
            left: 0;
            right: 0;
            text-align: center;
        }
        .teaser-wrap.activated {
            opacity: 0;
        }
        .teaser-wrap .svg {
            display: block;
            margin: auto;
            padding-bottom: 10px;
        }
        .teaser-wrap span {
            color: #cccccc;
        }
        .work .grid-reel {
            bottom: 145px;
        }
        .thumb-tray {
            display: none;
        }

    }

/*
 * Vertical breakpoints
 */
    @media (max-height: 500px) {

        /* Work-detail landscape */
        .breadcrumb-wrap {
            display: none;
        }
        .breadcrumb {
            top: 23px;
        }
        .video-slideshow {
            top: 100px;
            bottom: 70px;
        }
        .work .slide-meta .title {
            top: 55px;
        }
        .work .slide-meta .credits {
            display: none;
        }
        .work .grid-reel {
            bottom: 15px;
        }
        .work .teaser-wrap {
            display: none;
        }

    }