html, body {
  font-size: 16px;
  height: 100%;
  color: white;

  max-width: 1920px;
  margin: 0 auto;
}
h2 {
  font-size: 1.75rem;
}
.nav a {
  font-size: 60%;
  padding: .2rem .2rem;
}

.section {
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

  margin-top: -10%;
}

.box{
  transform: skewY(-3deg);
  -webkit-transform: skewY(-3deg);
  -moz-transform:skewY(-3deg);
  -o-transform:skewY(-3deg);

  margin-top: -10%;
}

.content{
  transform: skewY(3deg);
  -webkit-transform: skewY(3deg);
  -moz-transform:skewY(3deg);
  -o-transform:skewY(3deg);
}

#section1{
  background-image: url("../img/768/railway.jpg");
}
#section2{
  background-image: url("../img/768/windmill.jpg");
}
#section3{
  background-image: url("../img/768/bridge.jpg");
}
#section4{
  background-image: url("../img/768/transmitter.jpg");
}
#section5{
  background-image: url("../img/768/dam.jpg");
}
#section6{
  background-image: url("../img/768/skilift.jpg");
}
#section7{
  background-image: url("../img/768/highway.jpg");
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  html, body {
    font-size: 18px;
  }
  #section1{
    background-image: url("../img/992/railway.jpg");
  }
  #section2{
    background-image: url("../img/992/windmill.jpg");
  }
  #section3{
    background-image: url("../img/992/bridge.jpg");
  }
  #section4{
    background-image: url("../img/992/transmitter.jpg");
  }
  #section5{
    background-image: url("../img/992/dam.jpg");
  }
  #section6{
    background-image: url("../img/992/skilift.jpg");
  }
  #section7{
    background-image: url("../img/992/highway.jpg");
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  html, body {
    font-size: 20px;
  }
  .section {
    background-attachment: fixed; /* mobile bug */
  }
  #section1{
    background-image: url("../img/1200/railway.jpg");
  }
  #section2{
    background-image: url("../img/1200/windmill.jpg");
  }
  #section3{
    background-image: url("../img/1200/bridge.jpg");
  }
  #section4{
    background-image: url("../img/1200/transmitter.jpg");
  }
  #section5{
    background-image: url("../img/1200/dam.jpg");
  }
  #section6{
    background-image: url("../img/1200/skilift.jpg");
  }
  #section7{
    background-image: url("../img/1200/highway.jpg");
  }
}
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  html, body {
    font-size: 24px;
  }
  #section1{
    background-image: url("../img/railway.jpg");
  }
  #section2{
    background-image: url("../img/windmill.jpg");
  }
  #section3{
    background-image: url("../img/bridge.jpg");
  }
  #section4{
    background-image: url("../img/transmitter.jpg");
  }
  #section5{
    background-image: url("../img/dam.jpg");
  }
  #section6{
    background-image: url("../img/skilift.jpg");
  }
  #section7{
    background-image: url("../img/highway.jpg");
  }
}