/* Spatial Tux Suite: CSS for Larger screen sizes */

/* Landscape */
@media screen and (max-width: 50rem) and (orientation: landscape) {
  #menu-callout {
    padding-top: 1rem;
  }
}

@media screen and (min-width: 50rem) {
  body {
    /* font-size: 18px; */
    display: grid;
    grid-template-columns: auto;
    grid-template-areas:
      "skip skip skip"
      "header header sitenav"
      "main main main"
      "extra extra extra"
      "footer footer footer";
  }
  ul.title-area {
    display: flex;
    align-content: center;
    justify-content: left;
  }
  body > nav#main-nav {
    grid-area: sitenav;
    position: inherit;
    background: #fff;
    width: 100%;
    color: #fff;
    box-shadow: initial;
    height: 100%;
    display: grid;
    align-content: center;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
      "phone-nav contact-nav nav-menu"
      "callout callout callout";
  }

  body > nav#main-nav > div > button#nav-menu {
    position: fixed;
    justify-self: center;
    top: 1rem;
    width: 3rem;
    height: 3rem;
    right: 1rem;
  }
  body > nav#main-nav.unpin {
    transform: initial;
  }
  body > nav#main-nav > div > button#phone-menu,
  body > nav#main-nav > div > button#contact-menu,
  span.close-screen {
    display: none;
  }

  #menu-list {
    width: 100%;
    max-width: 85vw;
  }
  #menu-list > li:first-of-type {
    grid-column: 6 / span 1;
    grid-row: 1;
  }
  #menu-list > li:nth-child(2) {
    grid-column: 4 / span 2;
    grid-row: 1;
  }
  #menu-list > li:nth-child(3) {
    grid-column: 1 / span 3;
    grid-row: 1 / span 2;
  }
  #menu-list > li:nth-child(4) {
    grid-column: 5 / span 2;
    grid-row: 3 / span 2;
  }
  #menu-list > li:nth-child(5) {
    grid-column: 4 / span 3;
    grid-row: 2;
  }
  #menu-list > li:nth-child(6) {
    grid-column: 1 / span 3;
    grid-row: 3;
  }
  #menu-list > li:nth-child(7) {
    grid-column: 1 / span 2;
    grid-row: 4;
  }
  #menu-list > li:nth-child(8) {
    grid-column: 3 / span 2;
    grid-row: 4;
  }
  #menu-list > li:nth-child(9) {
    grid-column: 4 / span 1;
    grid-row: 3;
  }

  /* header#header {
      position: fixed;
      width: 100%;
      height: 5rem;
      /* background: rgba(255, 255, 255, 1); *
      box-shadow: initial;
    } */
  #companydetails {
    padding: 1rem;
  }

  #menu-callout,
  #phone-callout,
  #contact-callout {
    height: 100vh;
  }
  body > main {
    margin: 0rem auto 3rem;
  }
  body > main[hidden] {
    height: 100vh;
    overflow-y: hidden;
    overflow-x: hidden;
    padding-right: 15px;
  }
  body > main > header {
    height: 95vh;
  }
  #menu-callout {
    bottom: 0;
  }
  #contactdetails {
    /* display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      background: black; */
    background-image: linear-gradient(180deg, black, rgba(0, 0, 0, 0.7)),
      url(/assets/images/wooden-floor-1080.jpg);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
  }
  /* #contactdetails > div {
      margin: auto;
    } */
  #addressdetails {
    text-align: right;
  }
  .contactinfo li,
  .contactinfo p {
    width: 100%;
    max-width: 100%;
  }

  #section-home {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
    grid-gap: 1rem;
    max-width: 100rem;
    margin: 1.5rem auto;
  }
  #section-home > * + * {
    margin-top: 0;
  }

  #contact-page hr {
    display: none;
  }
  .features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 0.5rem;
  }
  .features div.feature-card:last-of-type(1):nth-last-of-type(odd) {
    grid-column: auto / span 2;
  }
  aside#featured-sections,
  aside#featured-articles,
  aside#ctas {
    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
  }

  header#homebanner {
    /* top: -4rem; */
    width: 100vw;
    height: 100vh;
  }
  header#homebanner figure {
    position: relative;
    height: 100%;
  }
  header#homebanner figure img {
    height: 100%;
    object-fit: cover;
  }
  header#homebanner figure figcaption {
    padding: 1.3rem 0.8rem;
    width: 50%;
    top: 50%;
    height: fit-content;
  }
  [data-cc="cc3-lg"] {
    column-count: 3;
  }

  #footer-menu-list > ul {
    margin: 0 3rem 1.5rem;
    text-align: initial;
  }
  #footer-menu-list a {
    color: white;
  }
}