#lightbox * {
  /* outline:1px solid rgba(0,150,0,0.5); */
}

#media-queries-dev {
  position:fixed;
  bottom:0;
  left:0;
  text-align: center;
  z-index: 999999999;
  width:100%;
  font-family: Montserrat-Medium;
  display: none;


}

.query {
  display: none;
  color:black;
  padding:.25rem;
  opacity: 0.5;

}





/* ================================================ */
/* 1. Generic Mobile: min-width: 321px / max-width: 639px  */
/* ================================================ */

@media screen
and (min-width: 100px)
and (max-width: 768px) {

      /* Test Media Query */
      #media-query { display:block; background: lime; }
      #media-query:before { content:"1. Generic Mobile: 321 x 639:";}


      /* ---------------------------------------- */
      /* TYPOGRAPHY */
      /* ---------------------------------------- */


      /* ---------------------------------------- */
      /* TOP MENU BAR */
      /* ---------------------------------------- */

      :root {
        --navheightmobile: 4rem;
        --navwidthmobile: 8rem;
      }


      body {
        padding-top:var(--navheightmobile);
      }

      #navbar * {
        /* outline:1px solid #333; */

      }


      #navbar {
        height: var(--navheightmobile);
        overflow: hidden;
        flex-wrap: wrap;
        gap:1;
        align-items: start;
        justify-content: space-between;


      }

      /* -------------------- */
      /* Burger */




      #burger-container, #logo, #search-bar-container {
        align-items: center;
      }




      #burger-container {
        display:flex;
        justify-content: center;
        align-items: center;
        height: var(--navheightmobile);
        width: var(--navheightmobile);
      }

      #logo {
        /* display:flex;
        justify-content:center;
        align-items:center;
        margin-left: 0rem;
        height: var(--navheightmobile); */
      }

      #logo {
        display:block;
        margin-left: 0rem;
        height: var(--navheightmobile);
      }





      :root {
        --spin:-180deg;
        --spintime:0.3s
      }


      #mobile-logo { display:block;}

      #desktop-logo { display:none;}

      #main-menu * {
        /* outline:1px solid pink; */
      }

      #main-menu {
        width:100%;
        height:calc(100vh - var(--navheightmobile));
        /* height:100vh; */
        order: 3;
        display:flex;
        align-items: flex-start;
      }

      #main-menu ul {
        height:calc(100% - var(--navheightmobile));
        /* height:100vh; */
        display:flex;
        flex-wrap:wrap;
        align-content: flex-start;
      }

      #main-menu li {
        margin:1.5rem 0;
        padding:1rem;
        flex:100%;
        margin:0;
      }


      #main-menu li:first-child {
      }

      #main-menu li a {
        font-size: 1.25em;
        line-height:2.5em;
      }


      #main-menu li:has(a:hover) {
      }



      #main-menu a:hover  {
         color: var(--navhover);
      }


      #mb-links {
        display:none;
      }

      #mb-logo-mobile {
        display:block;

      }


      /* ---------------------------------------- */
      /* MENU SEARCH BAR */
      /* ---------------------------------------- */


      #search-bar-container {
          --searchbtn: #555;
          --searchbtnhover: #999;
          margin-right: 0.5rem !important;
          order: 2;
          height:var(--navheightmobile);
      }


      .search-bar {
        --expanded-width: 8rem !important;
      }

      .search-bar-open {
        width: var(--navwidthmobile);
        border:1px solid #444;
      }

      .search-input {
        width: calc(var(--navwidthmobile) - (var(--size) * 1.4));
      }




      /* ---------------------------------------- */
      /* GENERIC SEARCH BAR */
      /* ---------------------------------------- */

      #generic-search-bar-container {
        --size:2rem;
        --padding: 1px;
        --expanded-width: 10rem;


      }


      /* ---------------------------------------- */
      /* HOME PAGE / INDEX */
      /* ---------------------------------------- */


      #profile-image {
        top: -60px;
        margin-bottom: 1rem;
        margin-top: -70px;
      }

      #profile-image img {
        width:60px;
        height:60px;
      }

      /* ---------------------------------------- */
      /* CONTENT SECTIONS
      /* ---------------------------------------- */

      .content-section {
          padding: 2rem 1rem;
      }

      .down-arrow {
          width: 2em;
          margin: 2em auto 0em auto;
      }




      /* ---------------------------------------- */
      /* SHOWREEL */
      /* ---------------------------------------- */

      #masthead-showreel {
        margin: 1rem 1.5rem 1.5rem 1.5rem;
      }

      #showreel-title {
        font-size: 1em;
      }

      span#circle-container {
        --crl-size:1.4rem;
      }

      #showreel-sound-button {
          right: 3rem;
          width: 1.6rem;
          height: 1.6rem;
      }




      /* ---------------------------------------- */
      /* LIGHTBOX */
      /* ---------------------------------------- */

      :root {
        --lb-border: 1rem;

      }

      #lightbox  {
      }

      #lb-content-container {
      }


      /* LIGHTBOX header */

      #lb-header * {
        /* outline: 1px solid #333; */
      }

      #lb-header {
        /* margin: 1rem;
        padding-bottom:0.5rem; */
      }


      #lb-close, #lb-sound-button,
      #lbx-close, #lbx-sound-button {
        text-align:right;
        width:1.5rem;
        height:1.5rem;
        margin-left:1rem;
      }

      #lb-close, #lbx-close {
        text-align:right;
        width:1.5rem;
        height:1.5rem;
      }

      #lb-client, #lbx-client {
        font-size:1.75em;
        line-height:1.2em;
      }


      /* .lb-dot {
        height: .6em;
        width: .6em;
        margin:0 0.3em;
      } */

      #lb-info-box, #lbx-info-box {

        font-size: 1em;
        color: var(--grey2);
        flex-direction: column;

      }

      div.lb-details, div.lbx-details {
        font-size:0.75em;
        margin-right:1.75rem;
        margin-top:0.1rem;
        margin-bottom:0.2rem;
        display:flex;
        justify-content: flex-start;
        flex-direction: column;
        width:100%;
        /* outline: 1px solid green; */
      }



      .lb-details span, .lbx-details span {
        position:relative;
        float:left;
      }

      .lb-details span:nth-child(2) {
      }



      .lb-footer-content {
        /* padding-bottom:3em; */
      }

      /* Lightbox footer */

      #lb-footer * {
        /* outline: 1px solid red; */
      }


      #lb-footer-right, #lb-footer-left {
        display:none;
      }


      /* ---------------------------------------- */
      /* MASTHEADS */
      /* ---------------------------------------- */


      #masthead-title img {
        margin-bottom:1rem;
        width:50%;
      }


      #masthead-container video {
        opacity:0;
      }


      #masthead-poster img {
        opacity:1;
      }


      .masthead-strapline.cell {
        font-size:1em;
      }

      .masthead-strapline span.sub-line {
        font-size:1em;
      }

      .sub-line {
        margin-bottom: 0em;
      }


      span#circle-container {
        --crl-size:1.6rem;
      }


      /* ---------------------------------------- */
      /* MOBILE MENU */
      /* ---------------------------------------- */


      #mobile-menu {
        display:block;
      }

      #mobile-menu-top {
        display:flex;

      }

      #mobile-menu-bottom {
          display:flex;
      }



      /* ---------------------------------------- */
      /* Footer */
      /* ---------------------------------------- */


      footer {
        padding:0 0 4rem 0;
      }

      #footer-logo-artwork img { width:26%;}
      #footer-nav li { margin: 0 1rem;}

      #footer-nav {
        margin: 1.5rem 0 0 0;
      }

      #footer-menu a {
        font-size: .8em;
      }

      .grid-padding-y > .cell {
        padding-top: 0;
      }

      #footer-caveat-date {
          margin-top:1em;
      }




      /* ---------------------------------------- */
      /* Contact */
      /* ---------------------------------------- */


      .contact-form {
        width:100% !important;
      }

      #form p, #email-block p {
        margin:0;
      }

      #send-close-button img {
        width:30px;
        height:30px;
      }

      #response {
        margin: 0 0.5rem 0 1rem;
        font-size: .9em;
      }


      #lb-close, #lb-sound-button {
        width:1.5rem;
        height:1.5rem;
        margin-left:1rem;

      }


      #send-close-button img {
        width:30px;
        height:30px;
      }

      #response {
        margin: 0 0.5rem 0 1rem;
      }



      /* ---------------------------------------- */
      /* FOOTER */
      /* ---------------------------------------- */

      footer {
        background:var(--black);
        color:var(--footer);
        padding:2rem 0;
        border-top:1px solid #111;
      }

      #footer-logo {
        font-size: 2.2em;
        line-height:0.75em;
      }

      #footer-logo img {
        width:150px;
      }

      #footer-tagline {
        font-size:0.75em;
      }

      #logo-strap {
        margin: 0 auto;
        display: block;
        justify-content: center;
        align-items: center;
      }

      #footer-stapline, #footer-links, #foot-nav {
        font-size:.9em;
      }

      #footer-caveat, #footer-date {
        font-size: .7em;
      }




}




/* ----------------------------------------------- */
/* 2. IPhone Portrait */
/* ----------------------------------------------- */

@media only screen
    and (min-width: 100px)
    and (max-width: 414px)
    and (min-height: 100px)
    and (max-height: 896px)
    and (orientation: portrait) {

    /* Test Media Query */
    #media-query { display:block; background: red; }
    #media-query:before { content:"2. IPhone SE Narrow: 100 x 321:";}

    :root {
      --clr-dev-mobile: red;
    }

    body * {
      /* outline:1px solid lime; */
    }

    /* ------------------------- */
    /* TYPOGRAPHY */
    /* ------------------------- */
    p {

      font-size:0.8rem;
      line-height: 1.8rem;
      margin-bottom:0.5rem;
      letter-spacing: .05rem;
    }


    h1 {
      color:var(--red);
      font-size:2em;
      line-height: 1.8em;
      margin-bottom:1rem;
    }


    h2 {
      color:var(--blue);
      font-size:1.4em;
      line-height: 1.8em;
      margin-bottom:0.5rem;
    }

    .separator-rule {

        margin: 1.5em 0;
    }

    #service-logos, #brand-logos {
      margin: 1rem 0 0 0;
    }

    .service-logo img, .brand-logo img{
    width: calc((160px) * 0.6);
    height:calc((90px) * 0.6);
    }


    #service-label {
      font-size: 0.6em;
      margin: 1rem 0 0 0;
    }


    .grid-container {
        padding-left: 1rem;
        padding-right: 1rem;
    }


    .button {
    padding-left: 1.2rem;
    padding-right: 1.2rem;
    font-size: 0.8em;
    border-radius: 30px;
}

    /* ------------------------- */
    /* MAIN MENU mobile Portrait */
    /* ------------------------- */

    #main-menu * {
      /* outline: 1px solid red; */
    }

    #main-menu li {
      /* padding:1.25rem; */
      flex:100%;
      margin:0.5rem 0;
      padding:0rem;
      transition: 250ms background ease-in;
    }


    #main-menu li:first-child {
    }

    #main-menu li a {
      font-size: 1.25em;
      line-height:2.5em;
    }

    /* ------------------------- */
    /* MASTHEAD */
    /* ------------------------- */

    .masthead-strapline.cell {
      font-size:0.8em;
    }

    /* ------------------------- */
    /* SHOWREEL */
    /* ------------------------- */

    #showreel-title {
      font-size: 0.8em;
    }

    #showreel-sound-button {
      right:3rem;
      width:1.25rem;
      height:1.25rem;
      overflow: hidden;
    }

    /* ------------------------- */
    /* SEARCH BAR */
    /* ------------------------- */

    #search-bar-container { display:none !important;}


    /* ------------------------- */
    /* LOGOs */
    /* ------------------------- */

    #mobile-logo { display:block;}
    #desktop-logo { display:none;}

    /* ------------------------- */
    /* Lightbox */
    /* ------------------------- */



    #lightbox * {
      /* outline: 1px solid var(--clr-dev-mobile); */
    }

    #lb-nav-left a, #lb-nav-right a {
      width:var(--lb-border);
      height:var(--lb-border);
      /* margin:.5em; */
    }

    #lb-nav-left a img, #lb-nav-right a img {
      width:var(--lb-border);
      height:var(--lb-border);
    }


    /* ------------------------- */
    /* FOOTER */
    /* ------------------------- */

    #footer-tagline {
      font-size:0.6em;
    }


}

/* ----------------------------------------------- */
/* MOBILE LANDSCAPE
/* ----------------------------------------------- */


@media screen
and (min-width: 100px)
and (max-width: 736px)
and (min-height: 100px)
and (max-height: 414px)
and (orientation: landscape) {

  #lightbox * {
    /* outline:1px solid pink; */
  }

  /* ------------------------- */
  /* MENU / FOOTER */
  /* ------------------------- */

  #lb-header, #lb-footer {
    display:none;
  }


  /* ------------------------- */
  /* MAIN MENU mobile landscape */
  /* ------------------------- */


  #main-menu * {
    /* outline: 1px solid red; */
  }

    #main-menu {
    }

  #main-menu ul {
    gap:1rem;
    /* flex-direction:column; */
    flex-direction: row;
    justify-content: center;


}


  #main-menu li {
    flex: 0 1 auto;
  }


  #main-menu li a {
    font-size: 1.15em;
    line-height:2em;
  }


  /* ------------------------- */
  /* SHOWREEL - landscape */
  /* ------------------------- */


  #showreel-video {
    position:fixed;
    top:var(--navheightmobile);
    left:0px;
    width:100vw;
    height:calc((100vh) - var(--navheightmobile));
    z-index: 999;
    background: #000;

  }


    /* #navbar {
        height: var(--navheightmobile);
        overflow: hidden;
        flex-wrap: wrap;
        gap: 1;
        align-items: start;
        justify-content: space-between;
    } */

  /* ------------------------- */
  /* Lightbox */
  /* ------------------------- */

  #lb-content {
      height:100vh;
  }







}


/* end of media queries */