@media only screen and (orientation: landscape) {
  .mobileHeader {
    width: 98%;
    height: 10vh;
    padding: 3%;
    margin: 1%;
    display: flex;
    align-items: center;
    text-transform: uppercase;

    /* border around nav */
    border: var(--mainColour) solid 1px;
  }

  .mobileHeader h1 {
    font-size: 1rem;
    line-height: 1.1;
  }

  #dot,
  .thumbnail,
  .prev,
  .next {
    display: none;
  }

  .landscape {
    display: flex;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    margin: 5% 0%;
  }

  .mySlides {
    display: block;
  }

  #mapContent {
    display: grid;

    width: 600px;
    height: auto;

    grid-template-columns: repeat(40, 1fr);
    grid-template-rows: repeat(20, 1fr);
  }

  #poster {
    display: block;
    grid-row: 1/21;
    grid-column: 1/41;
    z-index: -99;
    position: relative;
    cursor: none;
    /* width: 100%;
    height: 100%; */
    padding: 1%;
    justify-self: center;
    align-self: center;
  }

  .text {
    font-size: var(--mobile_map);
    line-height: 1.2;
    z-index: 20;
    width: 100%;
  }

  .text h3 {
    font-style: italic;
  }

  .projectLink:link,
  .projectLink:visited {
    color: var(--mainColour);
    text-decoration: none;
  }

  .artwork a:hover {
    color: var(--accentColour);
  }

  .circle {
    display: block;
    height: 7px;
    width: 7px;
    min-width: 7px;
    min-height: 7px;
    background-color: var(--mainColour);
    border-radius: 50%;
  }
  .text {
    text-transform: uppercase;
  }

  /* positioning of links */
  .circle.zied {
    margin-right: 10%;
    margin-left: 3%;
    margin-top: 5%;
  }

  .artwork.zied {
    grid-column: 4/13;
    grid-row: 6/9;
  }
  .projectLink.zied,
  .projectLink.alsalah {
    display: flex;
  }

  .artwork.alsalah {
    grid-column: 22/29;
    grid-row: 8/11;
    align-self: center;
  }
  .circle.alsalah {
    margin-right: 10%;
  }

  .artwork.saade {
    grid-column: 20/29;
    grid-row: 4/8;
  }

  .projectLink.saade,
  .projectLink.abdul,
  .projectLink.mahdy {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
  }
  .circle.saade {
    margin-top: 15%;
  }

  .artwork.mahdy {
    grid-column: 17/25;
    grid-row: 12/17;
    margin-top: 10%;
  }
  .circle.mahdy,
  .circle.bseiso {
    margin-bottom: 10%;
  }

  .artwork.bseiso {
    grid-column: 29/39;
    grid-row: 11/14;
  }

  .projectLink.bseiso {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
  }

  .artwork.abdul {
    grid-column: 31/39;
    grid-row: 5/9;
  }
  .circle.abdul {
    margin-top: 20%;
  }

  #logoDescription {
    margin: 0% 5% 5% 5%;
  }

  #scrollIconContainer {
    width: 100%;
    position: absolute;
    left: 50%;
    bottom: 5%;
    z-index: 100;
  }

  .scroll {
    justify-self: center;
    width: 30px;
    height: 30px;
    border: 1px solid white;
    /* border: 1px solid var(--mainColour); */
    border-radius: 50%;
    position: relative;
    animation: down 1.5s infinite;
    -webkit-animation: down 1.5s infinite;
  }

  .scroll::before {
    content: " ";
    position: absolute;
    top: 8px;
    left: 10px;
    width: 7px;
    height: 7px;
    border-left: 1px solid white;
    border-bottom: 1px solid white;
    /*
    border-left: 1px solid var(--mainColour);
    border-bottom: 1px solid var(--mainColour); */
    transform: rotate(-45deg);
  }
  @keyframes down {
    0% {
      transform: translate(0);
    }
    20% {
      transform: translateY(15px);
    }
    40% {
      transform: translate(0);
    }
  }

  @-webkit-keyframes down {
    0% {
      transform: translate(0);
    }
    20% {
      transform: translateY(15px);
    }
    40% {
      transform: translate(0);
    }
  }
}

/* tablets */
@media only screen and (min-width: 768px) and (min-height: 500px) and (orientation: landscape) {
  .landscape {
    margin: 0%;
  }

  #mapContent {
    width: 768px;
    height: auto;
  }

  .circle {
    width: 12px;
    height: 12px;
    min-width: 12px;
    min-height: 12px;
  }

  .text h3,
  .text p,
  #logoDescription p {
    font-size: 0.9rem;
  }

  .mobileHeader h1 {
    font-size: 1.5rem;
  }

  .artwork.zied {
    grid-row: 7/9;
  }

  .artwork.saade {
    grid-row: 5/8;
  }

  .artwork.abdul {
    grid-row: 6/9;
  }

  .circle.abdul,
  .circle.saade {
    margin-top: 20%;
  }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) and (orientation: landscape) {
  .landscape {
    height: 90vh;
  }

  #mapContent {
    width: 1024px;
  }

  .text {
    font-size: 0.7rem;
  }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) and (orientation: landscape) {
  #mapContent {
    width: 1000px;
  }
  .landscape {
    height: 70vh;
    margin-bottom: 10%;
    margin-top: 5%;
  }

  .text {
    font-size: 0.8rem;
  }

  .artwork.zied {
    grid-row: 5/9;
  }

  .artwork.saade {
    grid-row: 2/8;
  }

  .circle.saade,
  .circle.abdul {
    margin-top: 18%;
  }

  .artwork.abdul {
    grid-row: 3/9;
  }

  .mobileHeader.smallScreen {
    display: none;
  }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1920px) {
  .landscape {
    height: 70vh;
  }
  #mapContent {
    width: 1700px;
  }

  .artwork.zied {
    grid-row: 4/9;
  }

  .artwork.saade {
    grid-row: 2/8;
  }

  .circle.saade {
    margin-top: 10%;
  }

  .artwork.abdul {
    grid-row: 3/9;
  }

  .text h3,
  .text p,
  #logoDescription p {
    font-size: 1.3rem;
  }

  #logoDescription {
    margin: 0% 3% 5% 3%;
  }
}