/* mobile */

body {
  display:grid;
  row-gap: 12%;
  grid-template-columns: 100%;
  background-image: url("../img/tiles2.png");
  font-family: 'Space Mono', monospace;
  color: #303030;
  width: min(100vw - 1rem, 100ch);
  height: 100%;
}

.title-container {
  position: relative;
  white-space: nowrap;
  margin-left: 1vw;
  margin-top: 10vw;
  text-align: center;
  grid-row: 1;
  grid-column: 1;
}

.trapezoid2-box {
  width: 100%;
  height: 100%;
  grid-column: 3;
  grid-row: 1;
  display: flex;
  justify-content: flex-end;
  margin-left: 1vw;
  margin-top: 0.2vw;
}
.trapezoid2 {
  background-image: url("../img/bg2.png");
  width:100%;
  height: 94%;
  z-index: 4;
  grid-row: 2;
  grid-column: 3;
}

.trapezoid3 {
  background-image: url("../img/bg2.png");
  margin-top: 1vw;
  width: 100%;
  height: 5vw;
  transform: skew(-25deg);
  z-index: 4;
  grid-column: 1 / -1;
  grid-row: 7;
}

.text-content {
  grid-row: 2;
  grid-column: 1 / -1;
  row-gap: 2%;
  font-size: 16px;
  font-weight: lighter;
  z-index: 9;
  display: grid;
  grid-template-columns: 10% 80% 10%;
  grid-template-rows: auto auto auto auto auto auto auto auto;
  width: 100%;
}

.intro {
  font-size: 18px;  
  grid-column: 1 / 3;
  grid-row: 1;
  display: flex;
  margin-left: 5vw;
  }


.web-maps-title {
  grid-column: 3;
  grid-row: 3;
  writing-mode: vertical-lr;
  transform: rotate(-180deg);
  display: flex;
  justify-content:flex-end;
}

.web-maps {
grid-column: 2;
grid-row: 3;
text-align: right;
}


.cartography-title {
grid-column: 1;
grid-row: 4;
writing-mode: vertical-rl;
transform: rotate(-180deg);
display: flex;
justify-content:flex-end;
}

.cartography {
grid-column: 2;
grid-row: 4;

}

.analysis-title {
grid-column: 3;
grid-row: 5;
writing-mode: vertical-lr;
transform: rotate(-180deg);
display: flex;
justify-content:flex-end;
}

.analysis {
grid-column: 2;
grid-row: 5;
text-align: right;
}

.contact-title {
grid-column: 1;
grid-row: 6;
writing-mode: vertical-rl;
transform: rotate(-180deg);
display: flex;
justify-content:flex-end;
}

.contact {
grid-column: 2;
grid-row: 6;

}

ul {
  padding-left: 7.5%;
  margin-top: -3.5%;
}

.ul-right {
  direction: rtl;
  list-style-position: inside;
  padding-right: 0;
  text-indent: -5%;
}

li span {
  position: relative;
  left: 4%;
}

a:link {
  color: rgb(0, 69, 87);
  text-decoration-style: dotted;
}

a:hover {
  color: rgb(0, 99, 124);
  
}

hr {
  border: 1px outset rgb(221, 221, 221);
  border-bottom: 0.75px solid #5e5d5d;
}

.slanted-lines {
position: absolute;
}

.slanted-lines > hr {
  transform: rotate(-65deg);
  position: absolute;
  width: 44vw;
  z-index: 3;
}

.hr1 {
  margin-left: -4vw;
  margin-top: 22vw;
}

.hr2 {
  margin-left: -3vw;
  margin-top: 26vw;
}

.hr3 {
  margin-left: 2.6vw;
  margin-top: 20vw;
}

.horizontal {
  grid-row: 2;
  grid-column: 1 / -1;
  width: 100%;
  height:100%;
  display: flex;
  align-items: center;
}

.horizontal2 {
  grid-row: 8;
  grid-column: 1 / -1;
  width: 100%;
  height:100%;
  display: flex;
  align-items: center;
  margin-top: 1vw;
}

.horizontal > hr{
  width: 100%;
  height: 0.5px;
}

.horizontal2 > hr{
  width: 100%;
  height: 0.5px;
}


.trapezoid {
  background-color: #93ffaa;
  border: 1px solid rgb(0, 69, 87);
  background-image: url("../img/bg.png"), linear-gradient(#d4fe74,#93ffaa);
  margin-left: 6.5vw;
  width: 80vw;
  height: 18vw;
  transform: skew(-15deg);
  filter: drop-shadow(0.2vw 0.2vw rgba(31, 28.4, 23.7, 0.2) );
  position: absolute;
  z-index: 4;
}

.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 60vw 34vw 0vw 50vw;
  transform: scaleY(0.8) rotate(6deg) skew(322deg);
  border-color: rgba(0, 180, 227, 0.15) transparent transparent transparent;
  position: absolute;
  margin-top: -3vw;
  margin-left: -17vw;
  z-index: 1; 
  grid-row: 1;
}

strong {
  font-weight:700;
}

.logo_header {
  color: rgb(0, 69, 87);
  font-size: 12vw;   
  margin-top: 0;
  position: relative;
  text-shadow: 0.1rem 0.1rem whitesmoke, 0.2rem 0.2rem rgba(0, 0, 0, 0.2);
  z-index: 4; 
  font-weight: 700; 
  margin-left: -0.75vw;
} 

.gis-specialist {
  grid-column: 1;
  grid-row: 1;
  color: rgb(0, 69, 87);
  position: absolute;
  z-index: 4;
  margin-top: 28vw;
  margin-left: 36.5vw;
  font-size: 18px;
}


@media only screen and (min-width: 768px) {
/* For tablet: */

body {
  display:grid;
  grid-template-rows: 40% auto;
  row-gap: 5%;
  grid-template-columns: 100%;
  background-image: url("../img/tiles2.png");
  font-family: 'Space Mono', monospace;
  color: #303030;
  width: min(100vw - 1rem, 100ch);
  height: 100%;
}


.gis-specialist {
  grid-column: 1;
  grid-row: 1;
  color: rgb(0, 69, 87);
  position: absolute;
  z-index: 4;
  margin-top: 28vw;
  margin-left: 26.5vw;
  font-size: 18px;
}

.text-content {
  grid-row: 2;
  grid-column: 1 / -1;
  row-gap: 6%;
  font-size: 16px;
  font-weight: lighter;
  z-index: 9;
  display: grid;
  grid-template-columns: 5% 90% 5%;
  grid-template-rows: auto auto auto auto auto auto auto auto;
  width: 100%;

}

.intro {
  font-size: 18px;  
  grid-column: 1 / 3;
  grid-row: 1;
  display: flex;
  margin-left: 26.5vw;
  }

}




@media only screen and (min-width: 992px) {
  /* For desktop: */
    body {
      background-image: url("../img/tiles2.png");
      display: grid;  
      grid-template-columns: 40% 60%;
      row-gap: 0%;
      font-family: 'Space Mono', monospace;
      color: #303030;
      width: min(100vw - 15rem, 400ch);
      height: 100%;
    }

    hr {
      border: 2px outset rgb(221, 221, 221);
      border-bottom: 1.25px solid #5e5d5d;
    }

    .slanted-lines > hr {
      transform: rotate(-65deg);
      grid-column: 1;
      grid-row: 1;
      position: absolute;
      width: 22vw;
      z-index: 3;
    }

    .hr1 {
      margin-left: 5vw;
      margin-top: 11vw;
    }
    
    .hr2 {
      margin-left: 4.4vw;
      margin-top: 15vw;
    }
    
    .hr3 {
      margin-left: 8vw;
      margin-top: 10vw;
    }

    .title-container {
      grid-column: 1;
      grid-row: 1;
      position: relative;
      white-space: nowrap;
      text-align: center;
    }

    .logo_header {
      color: rgb(0, 69, 87);
      font-size: 5.5vw;   
      margin-top: 0;
      position: relative;
      text-shadow: 0.2rem 0.2rem whitesmoke, 0.4rem 0.4rem rgba(0, 0, 0, 0.2);
      z-index: 4; 
      font-weight: 700; 
      margin-left: 3vw;
    } 
    
    .gis-specialist {
      grid-column: 1;
      grid-row: 1;
      color: rgb(0, 69, 87);
      position: absolute;
      z-index: 4;
      margin-top: 14.5vw;
      margin-left: 24.75vw;
      font-size: 18px;
    }

    .trapezoid {
      background-color: #93ffaa;
      border: 1px solid rgb(0, 69, 87);
      background-image: url("../img/bg.png"), linear-gradient(#d4fe74,#93ffaa);
      margin-left: 1.6vw;
      width: 37vw;
      height: 100%;
      transform: skew(-15deg);
      filter: drop-shadow(0.2vw 0.2vw rgba(31, 28.4, 23.7, 0.2) );
      position: absolute;
      z-index: 4;
    }
    
    .triangle {
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 30vw 17vw 0vw 25vw;
      transform: scaleY(0.8) rotate(6deg) skew(322deg);
      border-color: rgba(0, 180, 227, 0.15) transparent transparent transparent;
      position: absolute;
      z-index: 1; 
      margin-top: 0;
      margin-left: 0;
    }
  
    .title-container {
      grid-column: 1;
      grid-row: 1;
      position: relative;
      white-space: nowrap;
      margin-left: 8vw;
      margin-top: 6vw;
      text-align: center;
    }
  
    .trapezoid2-box {
      width: 100%;
      height: 100%;
      grid-column: 1 / 3;
      grid-row: 1;
      display: flex;
      justify-content: flex-end;
      margin-left: 1vw;
      margin-top: 0.2vw;
    }
    .trapezoid2 {
      background-image: url("../img/bg2.png");
      width:60%;
      height: 94%;
      transform: skew(-20deg);
      z-index: 4; 
    }
  
    .trapezoid3 {
      background-image: url("../img/bg2.png");
      margin-top: 1vw;
      width: 100%;
      height: 100%;
      transform: skew(-25deg);
      z-index: 4;
      grid-column: 7 / 11;
      grid-row: 7 / 9;
    }
  
    .text-content {
      grid-column: 2;
      grid-row: 3;
      text-align: justify;
      font-size: 16px;
      font-weight: lighter;
      z-index: 9;
      display: grid;
      margin-top: 2%;
      grid-template-columns: 3% 18% 3% 3% 8% 30% 8% 3% 3% 18% 3%;
      grid-template-rows: minmax(min-content, max-content) 12% 10% 10% 10% 10% 10% 10% 10%;
      width: auto;
      row-gap: 0%;
    }
  
    .intro {
      font-size: 18px;  
      grid-column: 3 / -1;
      grid-row: 1;
      padding-right: 5vw;
      padding-left: 2.5vw;
      display: flex;
      margin-left: 0.5vw;
      }
  
  
    .web-maps-title {
      grid-column: 5;
      grid-row: 3 / 6;
      writing-mode: vertical-lr;
      transform: rotate(-180deg);
      display: flex;
      justify-content:flex-end;
    }
  
    .web-maps {
    grid-column: 6 / 7;
    grid-row: 3 / 5;
    text-align: left;
    }
  
  
    .cartography-title {
    grid-column: 7;
    grid-row: 4 / 7;
    writing-mode: vertical-lr;
    transform: rotate(-180deg);
    display: flex;
    justify-content:flex-end;
    }
  
    .cartography {
    grid-column: 8 / 12;
    grid-row: 4 / 7;
    text-align: left;
  
    }
  
    .analysis-title {
    grid-column: 1;
    grid-row: 5 / 8;
    writing-mode: vertical-lr;
    transform: rotate(-180deg);
    display: flex;
    justify-content:flex-end;
    }
  
    .analysis {
    grid-column: 2 / 6;
    grid-row: 5 / 8;
    text-align: left;
    }
  
    .contact-title {
    grid-column: 3;
    grid-row: 8 / 9;
    writing-mode: vertical-lr;
    transform: rotate(-180deg);
    display: flex;
    justify-content:flex-end;
    }
  
    .contact {
    grid-column: 4 / 7;
    grid-row: 8 / 9;
    text-align: left;
    }

    .horizontal2 {
      grid-row: 9;
      grid-column: 1 / -1;
      width: 100%;
      height:100%;
      display: flex;
      align-items: center;
      margin-top: 1vw;
    }

    .ul-right {
      direction: ltr;
      list-style-position: default;

    }
    
  }