@charset "UTF-8";

.media-only-tiny {
  display: none;
}

/* 1k */
@media screen and (min-width: 1900px) {
  :root {
    --min-doc-width: 85vw;
    --section-padding: 5em;
  }

  #hero article p {
    font-size: 8em;
  }
}

/* FULL */
@media screen and (min-width: 1360px) {
  /* Query Rules */
  .media-mobile {
    display: none !important;
  }
  .media-medium {
    display: none !important;
  }
  .media-not-desktop {
    display: none !important;
  }
}

/* REDUCED */
@media screen and (max-width: 1359px) {
  :root {
    --min-doc-width: 85vw;
    --section-padding: 3.5em;
  }

  /* Query Rules */
  .media-desktop {
    display: none !important;
  }

  #hero article p {
    font-size: 5em;
  }
}

/* MEDIUM */
@media screen and (min-width: 1080px) and (max-width: 1359px) {
  .media-mobile {
    display: none !important;
  }
  .media-not-medium {
    display: none !important;
  }
}

/* MOBILE */
@media screen and (max-width: 1079px) {
  :root {
    --min-doc-width: 90vw;
    --section-padding: 1.2em;
  }

  /* Query Rules */
  .media-desktop {
    display: none !important;
  }
  .media-medium {
    display: none !important;
  }
  .media-not-mobile {
    display: none !important;
  }

  footer .content {
    flex-direction: column;
  }
  footer .logo {
    margin-top: 2em;
  }
  h2 {
    font-size: 2.4em;
    justify-self: center;
  }
  main > section {
    opacity: 1 !important;
    overflow-x: hidden;
    background-color: white;
    text-align: center;
  }

  .dialog {
    grid-column-start: 1;
    transform: translateY(1em);
    border-radius: var(--big-radius);
  }
    .dialog::before {
      content: none;
    }
  .grid-1-2-cols,
  .grid-2-cols,
  .grid-2-1-cols,
  .grid-3-cols {
    grid-template-columns: 1fr;
  }
  .grid-wrap {
    grid-auto-flow: row;
  }
  .quote {
    font-size: 1.35em;
  }

  #contact-form {
    font-size: 1.05em;
  }  
  #ogframework ul {
    justify-self: stretch;
  }
  #products .content {
    grid-template-columns: 1fr;
    grid-template-areas:
      'portal' 
      'text'
      'thumbs';
  }

  #products .product-content {
    margin: 3.5em 0 2em 0;
    text-align: center;
  }
  #products .product-portal {
    width: min(650px, 70%);
    justify-self: center;
  }
  #products thumbnails {
    grid-area: thumbs;
    justify-content: center;
  }
  #staff .content {
    align-items: center;
  }
  #staff-members items {
    --cols: 2;
  }
  #staff-members thumbnails {
    margin-top: 1em;
    left: 50%;
    transform: translateX(-50%);
  }
  #staff-members thumb[active] {
    filter: drop-shadow(calc(var(--small-gap) + var(--radio)) 0 0 var(--og_midgray))
  }
}

/* MOBILE MIN */
@media screen and (max-width: 700px) {
  .media-only-min {
    display: auto;
  }

  body {
    background-color: var(--og_black);
  }
  footer .content > .links-grid {
    grid-auto-flow: row;
  }
  h2 {
    font-size: 1.8em;
  }

  .staff-card {
    max-height: 60vh;
  }
  .quote {
    font-size: 1.2em;
  }

  #contact-form {
    font-size: 0.85em;
  }
  #hero {
    padding: 2em;
    width: 100vw;
  }
    #hero article p {
      font-size: 2.8em;
    }
    #hero nav {
      flex-direction: column;
    }
      #hero nav > a {
        margin-top: 1em;
      }
    #hero .logo {
      width: 80%;
    }
  #ogframework img {
    max-width: 150%;
    width: 150%;
  }
  #parallax-bg {
    display: none;
  }
  #portfolio slide {
    background-position: 70%;
  }
  #splash {
    padding: 0px;
  }
  #splash video {
    border-radius: 0;
  }
  #staff-members {
    max-width: 74vw;
  }
    #staff-members items {
      --cols: 1;
    }
    #staff-members item[active] .staff-card:hover > img {
      filter: none;
    }
    #staff-members item[active] .staff-card:hover > video {
      opacity: 0.7;
    }
    #staff-members thumb[active] {
      filter: none;
    }
}

/* TINY */
@media screen and (max-width: 500px) {
  .media-only-tiny {
    display: inherit;
  }
}