@media all and (min-width: 1051px) {
  .header-text-centered {
    animation-name: px1051-min-header-two-piece-text-enlarge;
    animation-fill-mode: forwards;
    animation-duration: 1s;
  }
  .graphic-centered {
    animation-name: px1051-min-header-two-piece-graphic-resize;
    animation-fill-mode: forwards;
    animation-duration: 1s;
  }
}


@media all and (max-width: 1050px) {
  nav, .nav-image-container, .nav-link-container, nav li, .nav-image-container, .nav-social-container, .nav-social-image {
    animation-fill-mode: forwards;
    animation-duration: 2s;
  }
  .page-arrow {
    animation-fill-mode: forwards;
    animation-duration: 2s;
  }
  .header-text-centered {
    animation-name: px1050-max-header-two-piece-text-shrink;
    animation-fill-mode: forwards;
    animation-duration: 1s;
  }
  .footer-container {
    background: rgba(100, 100, 100, 1);
  }
  .graphic-centered {
    animation-name: px1050-max-header-two-piece-graphic-resize;
    animation-fill-mode: forwards;
    animation-duration: 1s;
  }
  .header-quad-row1 {
    display: flex;
    flex-direction: column;
    /* Centers the content to have the same spacing between the sides of the page as between the content */
    vertical-align: center;
    align-items: center;
    /* Flexbox, align center, set direction to column etc. etc. */
    margin-top: 25px;
    /* Offsets the column 25px from the navigation bar */
    width: 100%;
    /* Sets the left column to take up 50% of the page, and be on the left side */
  }
  .header-quad-row2 {
    display: flex;
    flex-direction: column;
    vertical-align: center;
    align-items: center;
    width: 100%;
    margin-top: 0;
  }
  .header-quad-image {
    display: block;
    /* margin: 0 auto; */
    padding-bottom: 25px;
    /* Makes the padding of the images smaller when arranged vertically */
  }
  .contact-page-2.desktop {
    display: none;
  }
  .contact-page-2.mobile {
    display: flex;
  }
}