html, body, h1, h2, h3, p, ul, li {
   margin: 0;
   padding: 0;
   font: normal 13.5pt/15.5pt Arial;
   color: #000;
}

body {
   padding-bottom: 10%;
   background: #fff;
}

ul {
   overflow: hidden;
   list-style: none;
}

body > header {
   position: relative;
   z-index: 4;
   overflow: hidden;
}

   header img {
      float: left;
      width: 100%;
   }

   header h1 {
      position: absolute;
      width: 100%;
      height: 100%;
      overflow: hidden;
      font: bold 20px/50px Arial;
      background: url(./img/logo.jooep.png) no-repeat 50% 50%;
   }

   header span {
      display: block;
      margin: -50px 0 0;
   }

nav {
   position: relative;
   z-index: 3;
   background: #000;
}

#nav-footer {
   position: fixed;
   z-index: 2;
   top: 0;
   left: 0;
   width: 100%;
   margin: 0;
}

nav ul {
   width: 956px;
   height: 35px;
   overflow: hidden;
   margin: 0 auto;
   text-align: center;
   white-space: nowrap;
}

nav li {
   display: inline-block;
   font: normal 25px/35px Arial;
}

nav li + li {
   padding-left: 26px;
}

nav a {
   position: relative;
   display: block;
   overflow: hidden;
   line-height: 35px;
   white-space: nowrap;
   color: #fff;
   background: url(./img/sprite.png) no-repeat -1500px 0;
   outline: none;
}

nav a.a1 {
   width: 154px;
   background-position: 0 0;
}

nav a.a1:hover, nav .active a.a1 {
   background-position: 0 -34px;
}

nav a.a2 {
   width: 90px;
   background-position: 0 -68px;
}

nav a.a2:hover, nav .active a.a2 {
   background-position: 0 -102px;
}

nav a.a3 {
   width: 217px;
   background-position: 0 -136px;
}

nav a.a3:hover, nav .active a.a3 {
   background-position: 0 -170px;
}

nav a.a4 {
   width: 107px;
   background-position: 0 -204px;
}

nav a.a4:hover, nav .active a.a4 {
   background-position: 0 -238px;
}

nav a.a5 {
   width: 263px;
   background-position: -4px -272px;
   cursor: default;
}

nav a.t5 {
   width: 141px;
   background-position: -4px -272px;
   cursor: default;
}

nav a.t6 {
   width: 141px;
   background-position: -150px -272px;
   cursor: default;
}

nav a span {
   display: block;
   position: relative;
   top: -35px;
}

body > footer, section {
   width: 956px;
   overflow: hidden;
   margin: 0 auto;
}

section > footer {
   clear: both;
   height: 20px;
   background: url(./img/sprite.png) no-repeat 50% -2458px;
   border-top: 120px solid #fff;
}

h2, h2 span {
   display: block;
   overflow: hidden;
   height: 142px;
   margin: 50px 0 20px;
   font: bold 48px/142px Arial;
   background: url(./img/sprite.png) no-repeat -1500px 0;
}

   #wat h2 {
      background-position: 50% -460px;
   }

   #kosten h2 {
      background-position: 50% -635px;
   }

   #standaarden h2 {
      background-position: 50% -808px;
      border-top: 35px solid #fff;
   }

   #contact h2 {
      background-position: 50% -985px;
   }

h3, h3 span {
   display: block;
   overflow: hidden;
   height: 30px;
   margin: 35px;
   font: bold 24px/30px Arial;
   background: url(./img/sprite.png) no-repeat -1500px 0;
}

   h2 span, h3 span {
      margin-top: 100%;
   }

   #wat .lft h3 {
      background-position: 50% -1495px;
   }

   #wat .rgt h3 {
      background-position: 50% -1531px;
   }

.lft, .rgt {
   float: left;
   width: 456px;
}

.lft {
   clear: left;
}

.rgt {
   margin-left: 44px;
}

p {
   text-align: center;
}

.rgt p {
   padding: 0 10px;
}

header p {
   margin-bottom: 25px;
   padding: 0 120px;
   font: normal 15pt/17.5pt Arial;
}

#standaarden ul {
   margin: 60px 0 0;
   padding: 60px 0 0;
   background: url(./img/sprite.png) no-repeat 50% -1825px;
}

#standaarden li {
   float: left;
   width: 180px;
   padding: 30px 0 0;
   text-align: center;
   background: #fff;
}

#standaarden li + li {
   padding-left: 14px;
}

#promo {
   margin: 80px 0 0;
   height: 235px;
   background: url(./img/sprite.png) no-repeat 50% -1580px;
}

#contact li {
   padding-left: 12px;
}

#address-amsterdam {
   float: left;
   margin-right: 26px;
}

iframe {
   margin: 40px 0;
   height: 479px;
}

   iframe#maps-api {
      height: 456px;
      border-top: 23px solid #fff;
   }

body > footer a {
   display: block;
   margin: 0 125px;
   padding: 0 0 100px;
   text-decoration: none;
   text-align: center;
   color: #000;
   background: url(./img/sprite.png) no-repeat -1500px 0;
}

   body > footer a span {
      display: block;
      padding: 0 0 15px;
      background: #fff;
   }

   a.facebook {
      background-position: 33px -1875px;
   }

   a.facebook:hover {
      background-position: 32px -2009px;
   }

   a.twitter {
      background-position: 33px -2140px;
   }

   a.twitter:hover {
      background-position: 33px -2274px;
   }

#bedankt {
   position: fixed;
   top: 0;
   left: 0;
   z-index: 5;
   width: 100%;
   height: 100%;
   background: url(img/overlay.png) repeat 0 0;
}

   #bedankt p {
      position: absolute;
      top: 33%;
      left: 50%;
      width: 270px;
      margin: 0 0 0 -155px;
      padding: 20px 20px 60px;
      text-align: left;
      background: #fff;
   }

   #bedankt button {
      position: absolute;
      bottom: 10px;
      right: 10px;
      padding: 3px 21px;
      color: #fff;
      background: #000;
      border: 0;
   }

   #bedankt button:hover {
      background: #2bade0;
   }