body {
  background: #e5f4fd;
}

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

a {
  color: #FFF;
}

/* ---------------------------------------------------------
    www.imakewebsites.nl
   ---------------------------------------------------------*/

body {
  margin: 0;
  padding: 0;
}

img {
  display: block;
  width: 100%;
  height: auto;
  line-height: 0;
}

footer {
  margin: 0 auto;
  padding: 20px 0;
  max-width: 1100px;
  background: #FFF;
  text-align: center;
}

footer a {
  display: inline-block;
  margin: 0 1%;
  width: 11%;
  vertical-align: middle;
}

footer a:last-child img {
  padding: 0 7px;
}

main {
  position: relative;
  margin: 0 auto;
  max-width: 1100px;
  background-size: cover;
}

.bg {
  position: relative;
}

.city {
  position: absolute;
  display: inline-block;
  width: 29.7%;
  height: 6%;
}

a.nijmegen {
  top: 80.5%;
  left: 1%;
  width: 54%;
}

a.utrecht {
  top: 80.5%;
  left: 55%;
  width: 44%;
}

a.antwerpen {
  top: 86%;
  left: 35%;
}

a.denbosch {
  top: 86.5%;
  left: 2%;
  width: 47%;
}

a.rotterdam {
  top: 86.5%;
  left: 48.5%;
  width: 50%;
}

a.arnhem {
  top: 92%;
  left: 63.5%;
}

a.amsterdam {
  top: 92.5%;
  left: 7%;
  width: 48%;
}

a.antwerpen {
  top: 92.5%;
  left: 55%;
  width: 38%;
}

.social a {
  display: inline-block;
  opacity: .9;
}

footer a {
  opacity: .9;
}

.social a:active, .social a:focus, .social a:hover, footer a:active, footer a:focus, footer a:hover {
  opacity: 1;
}

.hidden {
  position: absolute;
  top: auto;
  left: -10000px;
  overflow: hidden;
  width: 1px;
  height: 1px;
}

.social {
  position: absolute;
  top: 0.6vw;
  right: 60px;
  z-index: 100;
  opacity: 0.8;
  /*transform-origin: center right;*/
}

.social a:hover, .social a:focus, .social a:active {
  opacity: 1;
}

@media only screen and (max-width: 54em) {
  .social {
    top: 2px;
    transform: scale(0.7, 0.7);
  }
}

@media only screen and (max-width: 50em) {
  .social {
    top: -1px;
    right: 20px;
    transform: scale(0.6, 0.6);
  }
}

@media only screen and (max-width: 40em) {
  .social {
    top: 10vw;
    right: 10px;
    transform: scale(0.6, 0.6);
  }
}

@media only screen and (max-width: 40em) {
  .social {
    top: 10vw;
    right: 10px;
    transform: scale(0.6, 0.6);
  }
}

@media only screen and (max-width: 40em) and (orientation: portrait) {
  .social {
    top: 8.5vw;
    right: -15px;
  }
}

.social a {
  margin: 0 5px;
}