@media (max-width: 60em) {
  .nav-items {
    background-color: rgba(255, 255, 255, 0.97);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    transform: translateX(100%);
    transition: all 0.3s;
    z-index: 3;

    /* display: none; */

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  .nav-open .nav-items {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
  }

  .nav-open .icon-mobile-nav[name="menu-open"] {
    display: none;
  }
  .nav-open .icon-mobile-nav[name="menu-close"] {
    display: block;
  }

  .btn-mobile-nav {
    display: block;
    /* position: fixed;
    top: 0;
    right: 0; */
    /* z-index: 999; */
  }

  .nav-item:link,
  .nav-item:visited {
    font-size: 4rem;
  }

  /****************************************************************************************/
  /****************************************************************************************/
  /****************************************************************************************/

  .container {
    max-width: 85rem;
  }

  /****************************************************************************************/
  /****************************************************************************************/
  /****************************************************************************************/

  .cta-form {
    grid-template-rows: repeat(7, auto);
    grid-gap: 2rem;
  }

  .cta-form div:nth-child(2) {
    grid-column: span 2;
    grid-row: 1;
  }
  .cta-form div:nth-child(3) {
    grid-column: span 2;
    grid-row: 2;
  }
  .cta-form div:nth-child(4) {
    grid-column: 1 / 2;
    grid-row: 3;
  }
  .cta-form div:nth-child(5) {
    grid-column: 2 / 2;
    grid-row: 3;
  }
  .cta-form div:nth-child(6) {
    grid-column: 1 / 2;
    grid-row: 4;
  }
  .cta-form div:nth-child(7) {
    grid-column: 1 / span 2;
    grid-row: 5;
  }
  .cta-form div:nth-child(8) {
    grid-column: 1 / span 2;
    grid-row: 6;
  }

  .grid--footer {
    grid-template-columns: 1fr 1fr;
  }

  .nav-col {
    visibility: hidden;
    display: none;
  }
}

/****************************************************************************************/
/****************************************************************************************/
/****************************************************************************************/

@media (max-width: 49em) {
  .header-contact {
    visibility: hidden;
    display: none;
  }

  .heading-primary {
    font-size: 3rem;
  }

  .heading-special {
    font-size: 3.6rem;
    font-style: italic;
    text-transform: uppercase;
    border: 2px solid #eee;
    padding: 8rem 6.4rem;
    /* width: 100%; */
    background-color: #fff;
  }

  /****************************************************************************************/
  /****************************************************************************************/
  /****************************************************************************************/

  .cta-form-box {
    background-color: #f8f9fa;
    padding: 8rem 4rem;
  }
  .cta-form {
    display: flex;
    flex-direction: column;
  }

  /****************************************************************************************/
  /****************************************************************************************/
  /****************************************************************************************/

  .footer {
    padding: 8rem 4rem;
  }

  .grid--footer {
    display: flex;
    flex-direction: column;
  }
}

/****************************************************************************************/
/****************************************************************************************/
/****************************************************************************************/

@media (max-width: 32em) {
  .heading-primary {
    font-size: 2.4rem;
  }
}
