.main-menu .sub-menu li/*
 * 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
 *
 */

 /* CSS Vars */
:root {
  --black: #000000;
  --light-grey: #C0C0C0;
  --dark-grey: #666666;
  --orange: #F15D2A;
 
  --light-blue: var(--light-grey);
  --dark-blue: var(--black);
  --grey-blue: var(--dark-grey);
}

/*
 * Globals
 */
.is-mobile .slideshow .title .button-play {
  -webkit-transform: translateX(-50%) translateY(0) scale(0.8);
  transform: translateX(-50%) translateY(0) scale(0.8);
  opacity: 1;
  top: -60px;
}

/*
 * Breakpoints
 */

/* Cinema Display and larger */
@media (min-width: 2440px) {
  .scrolled-down #logo .letters {
    opacity: 1;
  }
}

/* Cinema Display and larger */
@media (min-width: 1800px) {
  #logo .svg {
    width: 283.283px;
    height: 64.968px;
  }

  /* Home */
  .takeover-slide .right-box .entry h2,
  .takeover-slide .right-box .entry #countdown,
  .takeover-slide .right-box .entry a {
    font-size: 100px;
  }

  .takeover-slide .button-enter {
    font-size: 40px;
  }

  .home .slideshow .title {
    font-size: 98px;
  }
  .home .slideshow .meta {
    font-size: 20px;
  }

  /* Video Player */
  .video-player .media-credits .title {
    font-size: 38px;
  }
  .video-player .director,
  .video-player .agency {
    font-size: 18px;
  }
  .video-player .award-winner {
    font-size: 18px;
  }
  .video-player .media-credits a {
    color: var(--dark-grey);
  }
  .video-player .media-credits a:hover {
    color: var(--orange);
  }

  /* Directors List */

  /* Work Grid */
  .grid-block {
    width: calc(25% - 2px);
  }
  .work-grid > .title {
    font-size: 40px;
    top: 39px;
  }

  /* Work Grid Large */
  .large-grid .grid-block .title {
    font-size: 75px;
    line-height: 1;
  }
  .large-grid .grid-block .title .line-2 {
    font-size: 45px;
  }
  .large-grid .grid-block .agency {
    font-size: 18px;
  }

  /* About */
  .about .page-title {
    font-size: 40px;
  }
  .about .entry h2 {
    font-size: 64px;
    line-height: 1.2;
  }
  .about .entry {
    font-size: 26px;
  }
  .about .entry p {
    max-width: 1000px;
  }

  /* Portfolio */
  .photo-grid .grid-sizer {
    width: 14.285%;
    float: left;
  }
  .photo-grid .photo-block {
    width: 14.285%;
  }
}

/* Smaller than Desktop HD */
@media (max-width: 1200px) {
  .grid-block {
    width: calc(50% - 2px);
  }
}

/* Smaller than Laptop */
@media (max-width: 1024px) {

}

/* Smaller than Desktop HD */
@media (max-width: 900px) {
  #menu-panel {
    width: 100%;
  }
  #logo {
    top: 20px;
    left: 20px;
    transition: all 0.4s ease-in-out;
  }
  #menu-panel .logo {
    display: block;
  }
  #menu-panel .logo .svg,
  #logo .svg {
    width: 169.97px;
    height: 38.981px;
  }
  .menu-button {
    right: -5px;
    top: 9px;
  }
  .main-menu li {
    font-size: 40px;
  }
  .main-menu a {
    margin-left: 18px;
  }
  .main-menu .sub-menu li {
    width: auto;
  }
  .social-wrapper {
    margin-left: 20px;
  }
  .menu-opened #logo {
    -webkit-transform: translateX(-100vw);
    transform: translateX(-100vw);
  }
  .scrolled-down #content .page-title {
    position: fixed;
    top: 15px;
    z-index: 500;
    font-size: 14px;
    padding: 0;
    margin: 0;
    left: 50%;
    transform: translateX(-50%);
    display: block;
  }

  /* Awards */
  .award .svg {
    height: 30px;
  }

  /* Home */
  body.home {
    overflow: unset;
  }
  .takeover-slide .button-close polygon {
    fill: var(--light-grey);
  }
  .takeover-slide .button-close {
    height: 16.44px;
    width: 16.44px;
    top: 13px;
    right: 0;
  }
  .takeover-slide .left-box {
    width: 100%;
    height: 50%;
  }
  .takeover-slide .right-box {
    width: 100%;
    height: 100%;
    min-height: 100%;
    top: 0%;
    padding: 30px 20px 80px 20px;
  }
  .takeover-slide .right-box .entry h2,
  .takeover-slide .right-box .entry #countdown,
  .takeover-slide .right-box .entry a {
    font-size: 29.5px;
  }
  .takeover-slide .button-enter {
    bottom: 30px;
    font-size: 20px;
    bottom: 0;
    padding: 30px 20px;
  }
  .slideshow {
    height: initial;
  }
  .slideshow .meta {
    padding: 0 20px;
    bottom: 0;
    margin-bottom: 30px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
  }
  .slideshow .slide {
    position: relative;
    display: block;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
  }
  .home .slideshow .title {
    font-size: 46px;
    padding: 0;
  }
  .home .slideshow .credits {
    display: none;
  }
  .home .arrow-down {
    display: none;
  }

  /* Video Player */
  .video-player > .title {
    position: fixed;
    top: 90px;
    z-index: 500;
    font-size: 24px;
    padding: 0;
  }
  .video-player .stage {
    margin-right: 20px;
    margin-left: 20px;
  }
  .video-player .media-credits {
    padding: 25px 0;
  }
  .video-player .media-credits .title {
    font-size: 20px;
  }
  .video-player .director,
  .video-player .agency {
    font-size: 14px;
  }
  .video-player .awards-wrapper {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    text-align: center;
  }
  .video-player .award-winner {
    font-size: 12px;
    position: relative;
  }
  .video-player .awards {
    right: 0;
    left: 0;
    text-align: center;
  }
  .video-player .button-close {
    right: 0;
    top: 11px;
  }
  .browse-wrapper {
    top: auto;
    bottom: -10px;
  }

  /* Directors List */
  .scrolled-down .directors-list > .title {
    position: fixed;
    top: 14px;
    z-index: 500;
    font-size: 14px;
    padding: 0;
    margin: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }
  .directors-menu {
    position: fixed;
    top: 50%;
    left: 20px;
    -webkit-transform-origin: top center;
    transform-origin: top center;
    -webkit-transform: translateX(-50%) rotate(-90deg);
    transform: translateX(-50%) rotate(-90deg);
  }
  #content.directors-list {
    padding: 80px 0;
    position: static;
  }
  .scrolled-down #content.directors-list {
    padding-top: 120px;
  }
  .directors-list > .title {
    margin: 0 0 20px 0;
    display: block;
    font-size: 18px;
    font-weight: 400;
  }
  .directors-list .list {
    padding: 0 70px;
    margin-bottom: 30px;
  }
  .directors-list .list li {
    display: block;
    width: unset;
    text-align: center;
  }
  .directors-list .list li a {
    text-align: center;
    width: unset;
  }
  .directors-list .list .title {
    line-height: 1.5;
  }
  .directors-list .note {
    position: fixed;
    top: 50%;
    bottom: auto;
    right: 30px;
    left: auto;
    transform-origin: center center;
    transform: translateX(50%) rotate(-90deg);
    width: 100vh;
    white-space: nowrap;
    font-size: 12px;
    margin: 0;
  }

  /* Work Grid */
  .scrolled-down #header {
    position: fixed;
    top: 0;
    height: 40px;
    width: 100%;
    background-color: var(--black);
    z-index: 490;
  }

  /* Light Blue Scheme */
  .light-blue-scheme #logo .film,
  .light-blue-scheme #logo .letters path {
    fill: var(--light-grey);
  }
  .light-blue-scheme .menu-button > div {
    background-color: var(--light-grey);
  }

  .scrolled-down #logo {
    top: 7px;
  }
  .scrolled-down #logo .svg {
    height: 26.488px;
    width: 115.496px;
  }
  .scrolled-down.work-grid #logo path.film {
    fill: var(--light-grey);
  }
  .scrolled-down .menu-button {
    padding: 16px;
    top: -1px;
    right: 4px;
  }
  .scrolled-down.work-grid .menu-button div {
    background-color: var(--light-grey);
  }
  .menu-opened.scrolled-down .menu-button {
    right: -5px;
    top: 9.5px;
    padding: 25px;
  }

  /* Grid */
  #content.work-grid {
    display: block;
    margin-top: 100px;
  }
  .scrolled-down #content.work-grid {
    margin-top: 162px;
  }
  .work-grid .breadcrumb {
    display: none;
  }
  .work-grid > .title {
    margin-top: 85px;
    position: static;
    display: block;
    transform: none;
    margin: 25px 20px;
  }
  .scrolled-down .work-grid > .title {
    position: fixed;
    top: 12px;
    z-index: 500;
    font-size: 14px;
    padding: 0;
    margin: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }
  .work-grid .grid {
    padding: 0 20px 20px 20px;
    margin-top: 40px;
  }
  .grid-block {
    width: 100%;
    margin: 0 0 35px 0;
  }
  .grid-block .meta {
    background-color: transparent;
    position: relative;
    opacity: 1;
  }
  .grid-block:hover .awards {
    opacity: 1;
  }
  .grid-block .play-button {
    display: none;
  }

  .work-grid.film-tv-grid > .title {
    font-size: 26px;
    width: auto;
    line-height: 1.25;
    padding: 0px 20px;
  }
  .work-grid.film-tv-grid  .film-tv-copy {
    font-size: 14px;
    margin: 50px auto 20px auto;
  }

  /* Work Grid Large */
  .large-grid .grid {
    padding: 0 20px 20px 20px;
  }
  .reel-sub-menu {
    transform: none;
    position: static;
    text-align: center;
    margin: 25px 20px;
  }
  .large-grid .grid-block {
    margin-bottom: 0;
  }
  .large-grid .grid-block .title {
    font-size: 26px;
  }
  .large-grid .grid-block .title .line-2 {
    font-size: 16px;
  }
  .large-grid .grid-block .agency {
    font-size: 12px;
  }
  .large-grid .arrow-down {
    display: none;
  }
  .large-grid .awards-wrapper {
    position: absolute;
    height: auto;
    top: -60px;
    right: 10px;
    bottom: auto;
    left: 10px;
    text-align: right;
    opacity: 1;
  }
  .large-grid .award-winner {
    display: none;
  }
  .large-grid .awards {
    position: static;
    opacity: 1;
    transform: none;
  }
  .large-grid .award path {
    fill: var(--light-grey);
  }
  .large-grid .awards-wrapper.active .meta,
  .large-grid .awards-wrapper.active .award-winner {
    opacity: 0;
  }

  /* Work Detail */
  .work-detail .breadcrumb {
    display: none;
  }

  /* Photo Grid */
  #content.photo-grid {
    margin-top: 100px;
  }
  .photo-grid .breadcrumb {
    display: none;
  }
  .photo-grid > .title {
    padding: 0 20px;
    margin: 25px 20px;
  }
  .photo-grid .grid {
    margin: 19px;
  }
  .photo-grid .photo-block {
    width: 100%;
  }

  /* Photo Gallery Overlay */
  body.gallery-opened {
    overflow: hidden;
  }
  .overlay-gallery .stage {
    top: 100px;
    bottom: 100px;
    left: 20px;
    right: 20px;
  }
  .overlay-gallery .button-close {
    right: 0;
    top: 16px;
  }
  .overlay-gallery .browse {
    top: auto;
    bottom: 5px;
    transform: none;
  }

  /* About */
  .about .breadcrumb {
    display: none;
  }
  .about .page-title {
    margin: 85px 20px 41px 20px;
  }
  .about .entry h2 {
    font-size: 26px;
    padding-right: 20px;
    padding-left: 20px;
  }
  .about .entry p {
    font-size: 16px;
    padding-right: 20px;
    padding-left: 20px;
  }
  .about .awards-wrapper {
    padding: 10px 0;
  }
  .about .awards-gallery .award {
    margin: 20px;
    padding: 0;
    height: 50px;
    width: 70px;
    position: relative;
  }
  .about .awards-gallery .award .svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* Contact */
  .scrolled-down #content.contact {
    margin-top: 158px;
  }
  .scrolled-down .contact > .title {
    position: fixed;
    top: 15px;
    z-index: 500;
    font-size: 14px;
    padding: 0;
    margin: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  .contact .region-offices > .title {
    display: none;
  }
  .contact h3.title {
    margin: 84px 20px 50px 20px;
  }
  .contact-grid {
    padding: 0 20px;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
  }
}

/* Smaller than tablet */
@media (max-width: 750px) {
  /* 		Home */
  .home .slideshow .title {
    font-size: 20px;
  }

  /* Directors List */
  .directors-list .list li {
    width: unset;
    text-align: center;
  }
}

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