@media screen and (max-width: 480px) {
  /* BASIC */

  body {
    margin-right: 0;
    max-width: 100%;
  }

  .mobile {
    visibility: visible;
    padding-right: 3%;
  }
  .desktop {
    visibility: hidden;
  }
  hr, .horizontal-line {
    display: none;
  }
  .custom-cursor {
    display: none !important;
  }
  .loading-simulation img {
    display: block;
    width: 80vw;
    margin: auto;
    margin-top: 10%;
  }
  h1 {
    width: 85%;
    text-align: left;
  }
  h4 {
    width: 85%;
    text-align: left;
    margin-left: 5% ;
  }
  /* NAV */
  nav {
    grid-gap: 30%;
    display: grid;
    grid-auto-flow: column;
    top: 0;
    position: fixed;
    z-index: 2;
    width: 100%;
    height: 10%;
  }
  .undernav {
    position: relative;
  }
  .side-nav {
    width: 12%;
  }

  .navigator-design {
    width: 100%;
    margin-top: 0;
    z-index: -2;
  }

  .hamburger {
    margin-left: 1em;
    width: 150%;
    background-color: transparent !important;
  }
  .hamburger span {
    display: none;
  }

  div.hamburger img {
    width: 10%;
  }

  div.hamburger.active img {
    filter: saturate(0) brightness(0.5);
  }

  .navigator-design img {
    display: none;
  }

  .navigator-design a span {
    font-size: 6vw;
    margin-left: 0;
  }
  .image-break {
    display: none;
  }
  /* LANDING PAGE */
  .landing-page {
    background: url("/assets/img/backgroundnoblur.svg");
    height: fit-content;
    padding-bottom: 1vw;
  }

  #landing-distractor {
    display: none;
  }

  #landing-div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: flex-start;
    align-items: flex-start;
    width: 80%;
    margin: 1vw auto 10%;
  }

  #landing-div span {
    display: block;
    font-size: 1em;
    line-height: 2em;
    margin: 5%;
    width: 100%;
  }

  #landing-div .col-2 {
    width: 90%;
  }

  .landing-buttons {
  }

  .landing-buttons .btn img {
    width: 80%;
  }

  #landing-text {
    width: 100%;
  }

  #landing-text h1 {
    font-size: 2em;
  }

  #landing-text h3 {
    font-size: 6vw;
  }

  #landing-text p {
    font-size: 2em;
    padding-bottom: 5vw;
    margin-left: 0;
  }

  /* Teaser section */
  .teaser {
    flex-direction: column;
    height: 100vh;
    grid-gap: 10%;
    align-items: center;
  }

  .teaser .col-1, .teaser .col-2 {
    width: 100%;
  }

  /* Introduction */
  .introduction {
    margin-left: 5%;
    grid-auto-flow: row;
  }

  .introduction > .left {
    width: 100%;
  }
  .introduction > .left h3 {
    margin: 0;
  }

  .introduction > .right p {
    width: 90%;
    margin-top: 5%;
    margin-left: 0;
  }

  /*  TESTIMONIALS */
  .testimonials {
    flex-direction: column;
    width: 100%;
    margin-left: 5%;
  }
  .testimonials div:first-child {
    margin: 0;
  }
  .testimonials .wrapper {
    border-radius: 0;
    padding: 1.3%;
  }
  .testimonial-item {
    margin-top: 5%;
    width: 80%;
    padding-bottom: 10%;
  }

  /*  Portfolio */
  .pick-portfolio {
    margin: 0;
    width: 100%;
    background: none;
  }
  .portfolio {
    width: 90%;
    height: 100%;
  }
  .portfolio * {
    font-size: .96em;
  }
  .project-wrapper {
    width: 80%;
    height: 50%;
    overflow-y: hidden;
    margin-top: 0;
  }
  .port-folder {
    width: 90%;
    grid-gap: 5%;
    flex-wrap: wrap;
    overflow-x: hidden;
    overflow-y: scroll;
    flex-direction: row;
    bottom: 0;
  }
  .project {
  }
  .port-folder .project img {
    max-width: 80%;
  }
  .project-description a {
    width: 60%;
  }
  .port-option img {
    width: 100%;
  }
  .port-option a {
    display: none;
  }
  .portfolio-picker {
    width: 30%;
    display: flex;
    align-content: center;
  }
  .portfolio-picker .contents {
    grid-gap: 5%;
  }
  .project-description {
    margin-top: 0;
    width: 100%;
    height: auto;
    margin-bottom: 10%;
  }
  .project-description .col-1 {
    display: none;
  }
  .project-description .col-2 {
    width: 100%;
  }

  .port-option.focus {
    border-radius: 3px;
    background: #ffffff;
    border-bottom: 3px solid rgba(151, 255, 207, 0.49);
  }

  /* SERVICES OFFERED */
  .services-offered {
  }

  .services-offered h1 {
    margin: 15vw 0 0 5vw;
    font-size: 2em;
    text-align: left;
  }

  .services-offered p {
    margin: 5vw;
    font-size: 2em;
    text-align: left;
    width: 90%;
  }

  .highlights-area {
    flex-flow: column;
  }

  .highlights-area > .highlights-items {
    margin-top: 2vw;
    width: 85vw;
    height: 65vw;
    padding: 2vw;
  }

  .highlights-items > h1, .highlights-items > p {
    font-size: 2em;
  }

  /* SKILLS */
  .skills {
    display: grid;
    flex-direction: column;
    height: fit-content;
  }

  .skills h1 {
    font-size: 7vw;
    margin-bottom: 4vw;
  }

  .skills > p {
    font-size: 2em;
  }

  .skills > .skill-item {
    margin: auto;
    width: 90vw;
    height: fit-content;
    margin-bottom: 6vw;
    border: none;
    margin-top: 1vw;
  }

  .skill-item img {
    display: none;
  }

  .skill-item > h2 {
    font-size: 2em;
  }

  .skill-item:hover * {
    font-weight: normal;
    transition: none;
  }

  .skill-item > p {
    font-size: 2em;
  }

  .skills > .skill-advert {
    margin: auto;
    width: 90vw;
    height: 55vw;
    margin-bottom: 6vw;
  }

  .skill-advert > h2 {
    font-size: 2em;
  }

  .skill-advert > p {
    font-size: 2em;
  }

  /* Blog */
  .posts {
    grid-template-columns: none;
  }

  .posts .post .intro {
    font-size: 2em;
  }

  .post .intro p {
  }

  .post .intro h1 {
    font-size: 2em;
  }

  .post .intro h2 {
    margin: 0;
    font-size: 4vw !important;
  }

  .post-list>h1 {
    display: grid;
    /* padding: 5%; */
    text-align: left;
    width: 100%;
    justify-content: start;
    border-bottom: 1px solid white;
}

  /* POST LIST */
  .post-item {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
  }
  .post-item p {
    width: 100%;
    color: black;
    font-size: 1.1em;
    display: block;
}
  .post-item img {
    display: none;
}

  /* FOOTER */
  footer * {
    display: block;
    font-size: 1em;
  }

  #sitemap {
    overflow: hidden;
    width: 100%;
    height: fit-content;
    display: block;
    text-align: center;
    margin: auto;
  }

  #sitemap > #sitemap-links {
    margin: auto;
    display: block;
    width: 100%;
    text-align: center;
  }

  footer hr, #text-footer {
    display: none;
  }
}