@media only screen and (max-width: 1300px) {
  #backgroundvideowrapper {
    overflow: hidden;
    width: 100vw;
    height: 75vw;
    position: relative;
  }
  
  #backgroundvideo {
    max-width: none;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
  }

  #showcasewrapper {
    margin: 10px;
    margin-top: 50px;
    margin-bottom: 80px;
  }

  #showcase {
    position: static;
    transform: none !important;
    margin-bottom: 20px;
    max-width: 750px;
  }

  #showcase > h1 a {
    padding: 46.5px;
    padding-left: 20px;
    text-align: left;
  }

  #showcase > h1 a i {
    left: 36.5px;
    opacity: 0;
  }

  #showcase .grid {
    height: 1500px;
    grid-template-areas:
    "big big"
    "small1 small1"
    "small2 small2" 
    "small3 small3"
    "small4 small4";
    grid-template-columns: 1fr 1fr
  }

  #showcase .grid a .hover {
    opacity: 1;
  }

  #showcase .grid .hover h1 {
    transition: padding 0.3s ease;
  }

  #showcase .grid a:hover .hover h1, #showcase .grid a:focus .hover h1 {
    padding: 16.5px;
  }
  
  #showcase .grid a:first-child .hover h1, #showcase .grid a .hover h1 {
    font-size: 70px;
    left: 20px;
    transform: translate(0, -50%);
  }

  #aboutwrapper {
    flex-direction: column-reverse;
  }

  #about .right {
    height: 800px;
    margin: 0;
  }

  #rightimage {
    width: 100%;
    clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
    background-position-x: 50% !important;
  }

  #about .left {
    padding-top: 20px;
    margin-bottom: 100px;
  }

  #about .left .content > * {
    margin-left: 0;
  }

  #about .left .content h1 {
    font-size: 130px;
  }

  #about .left .content p {
    font-size: 56px;
    line-height: initial;
  }

  #about .left .content > * {
    text-align: left;
  }

  #hireusbutton {
    text-align: center;
  }

  #hireusbutton a {
    font-size: 80px;
  }
}