/* TABLET LANDSCAPE */
@media only screen and (max-width: 900px) {
   @media (orientation: landscape) {
      nav {
         position: absolute;
         flex-direction: row;
      }
   }
}

/* TABLET */
@media only screen and (max-width: 1200px) {
   :root {
      --gap: 2vw;
      --biggap: 4vw;
      --content-inset: 2vw;
      --block-padding: 8vw;
      --base-font-size: 2vw;
   }

   body {
      font-size: var(--base-font-size);
   }

   page-wrapper {
      padding-top: 12vw;
   }

   button.category {
      font-size: 1.15vw;
      padding: 0.8vw 1.5vw;
   }

   nav .close {
      display: inline-block;
      padding: 0.3vw;
      margin: 0 3vw 2vw 3vw;
      text-align: left;
      font-size: calc(var(--base-font-size) * 1.2);
      font-weight: 700;
      background-color: rgb(249, 249, 249);
   }
   
   link-block {
      font-size: 1.1rem;
   }

   link-block a {
      cursor: pointer;
      border-bottom: 1px dotted transparent;
      padding: 0.3vw;
      margin: 0 3vw;
      text-align: left;
   }

   link-block .link-panel {
      transition: visibility 0s, opacity 1s;
      visibility: hidden;
      opacity: 0;
      display: flex;
      flex-direction: column;
      visibility: hidden;
      position: fixed;
      top: 0;
      right: 0;
      height: 100%;
      min-width: 30%;
      background-color: #f9f9f9;
      padding: 4vw;
      gap: 1em;
      text-align: center;
   }

   link-block .link-panel.is-active {
      visibility: visible;
      opacity: 1;
   }

   link-block .link-panel.is-active .close {
      visibility: visible;
   }

   link-block .hamburger {
      display: block;
   }

   footer a.button {
      font-size: calc(var(--base-font-size) * 0.75);
      border-radius: var(--base-font-size);
      padding: calc(var(--base-font-size) * 0.25) var(--base-font-size);
   }

   h1 {
      color: inherit;
      font-size: calc(var(--base-font-size) * 2);
      font-weight: 400;
      letter-spacing: calc(var(--base-font-size) * -0.1);
      line-height: calc(var(--base-font-size) * 2.5);
   }

   h1 span {
      font-family: "Caveat Brush";
      font-size: calc(var(--base-font-size) * 3);
      display: inline-block;
      /* border-bottom: 4px solid var(--darkgray); */
   }

   h2 {
      font-size: calc(var(--base-font-size) * 2);
   }

   h3 {
      font-size: calc(var(--base-font-size) * 1.4);
   }

   h4 {
      font-size: var(--base-font-size);
   }

   /* CONTAINERS */

   feature-testimonial {
      font-size: calc(var(--base-font-size) * 1.4);
   }

   content-block {
      padding: var(--gap) var(--biggap);
      font-size: var(--base-font-size);
   }

   work-thumbnail-featured h4 {
      font-size: calc(var(--base-font-size) * 1.25);
   }

   work-thumbnail h4 {
      font-size: calc(var(--base-font-size) * 0.8);
   }

   stack-h[work-entry-title] {
      padding-top: 0.5vw; 
      font-size: calc(var(--base-font-size) * 1);
   }

   /* FORM */

   label {
      font-size: calc(var(--base-font-size) * 0.9);
   }

   input:not([type="file"]),
   textarea {
      font-size: calc(var(--base-font-size) * 1.125);
   }

   input[type="file"] {
      font-size: var(--base-font-size) * 0.8;
   }

   /* select {
      font-size: calc(var(--base-font-size) * 1.125);
      height: calc(var(--base-font-size) * 2.25);
   } */

   button[type="submit"] {
      font-size: calc(var(--base-font-size) * 1.25);
   }

   .freeform-row {
      flex-direction: column;
   }

   /* WORK NON-FEATURED - 3 column*/
   work-thumbnail {
      flex: 0 0 calc(33% - ((var(--gap) * 2) / 3));
   }

   /* WORK ENTRY IMAGE GALLERY - 2 column*/
   image-gallery a {
      flex: 0 0 calc(50% - ((var(--gap) * 1) / 2));
   }

   .pswp__custom-caption {
      font-size: calc(var(--base-font-size) * 1.25);
   }

   /* FEATURED TESTIMONIALS GRID - 2 column*/
   feature-testimonials div {
      flex: 0 0 calc(50% - ((var(--gap) * 1) / 2));
      font-size: 2vw;
      padding: 3vw 3vw 5vw 3vw;
   }



   feature-testimonials stack-h {
      flex-direction: column-reverse;
      gap: calc(var(--gap) * 0.5);
   }

   feature-testimonials span {
      font-size: calc(var(--base-font-size) * .8);
      width: calc(100% - (var(--biggap) * 2));
   }
   
   

   feature-testimonials div h3 {
      font-weight: 300;
      font-size: calc(var(--base-font-size) * 1.5);
   }

   /* ABOUT CLIENT LOGOS - 2 column*/
   thumbnail-container {
      flex: 0 0 calc(25% - ((var(--gap) * 3) / 4));
   }

   text-block[blue] .flex-columns-2,
   text-block[gray] .flex-columns-2 {
      flex: 0 0 100%;
      font-size: var(--base-font-size);
   }

   text-block[contact]  {
      font-size: var(--base-font-size);
   }
   
   text-block[blue] p {
      font-size: calc(var(--base-font-size) * 0.8);
      columns: 2;
   }

   /* COLUMNS */

   .flex-columns-2 {
      display: block;
      flex: 0 0 calc(50% - ((var(--biggap) * 1) / 2));
   }

   .flex-columns-3 {
      display: block;
      flex: 0 0 calc(50% - ((var(--biggap) * 1) / 2));
   }

   .flex-columns-4 {
      width: 100%;
      display: block;
      flex: 0 0 calc(50% - ((var(--gap) * 1) / 2));
   }

   stack-h[rightlink] {
      padding: var(--biggap);
   }
   
  polaroid-frame.flex-columns-2:hover, polaroid-frame:hover, span > polaroid-frame:hover {
      transform: scale(1);
      z-index: 1;
      position: relative;
   }

   #bts-slideshow-app {
      height: 190vw;
   }

   bts-grid {
      margin-top: 5vw;
      padding: 0 5vw;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1vw;
   }
   
   .video-player-container {
      flex: 0 0 calc(50% - 1vw);
      margin-bottom: 2vw;
   }
   
   .video-caption {
      font-size: calc(var(--base-font-size) * 1.2);
   }

   .featured-video-container {
      padding: 0 var(--gap);
      display: block;
   }

   .featured-video-container .video-player-container {
      margin-bottom: 0;
   }


}