/*
blauw #0075be
grijs #9e9e9e
*/

/* general styles */
html, body, h1, h2, h3, p, form, ul, li, ol{
  margin: 0px;
  padding: 0px;
}
html, body{
  width: 100%;
  height: 100%;
}
body{
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 25px;
  color: #000;
}

a{
  outline: 0;
  color: inherit;
  text-decoration: none;
}

img{
  border: 0;
}

textarea{ 
  -webkit-appearance: none;
  -webkit-border-radius: 0;
  resize: none;
}

.clear{
  display: block !important;
  clear: both !important;
  float: none !important;
}


div.container{
  width: 100%;
  margin: 0px;
}
div.centerContent{
  width: 1320px;
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

/*      HEADER      */
header{
  width: 100%;
  height: 200px;
}
header div.centerContent{
  width: 1520px;
}
header div.logoHolder{
  width: 327px;
  padding-top: 60px;
  float: left;
}
header div.logoHolder img{
  width: 100%;
  display: block;
}
div.menuHolder{
  float: right;
  margin-right: 100px;
}
div.menuHolder nav, footer nav{
  position: relative;
}
div.menuHolder nav>ul{
  margin-top: 88px;
}
nav ul li{
  position: relative;
  display: inline-block;
  list-style-type: none;
  text-transform: uppercase;
  font-size: 0.8em;
  height: 24px;
  line-height: 24px;
  padding-left: 20px;
  padding-right: 23px;
  text-align: center;
  color: #9e9e9e;
  border-right: solid 1px #000;
}

nav ul li:last-child{
  border: none;
}
div.menuHolder nav ul li:hover{
  color: #0075be;
}
nav ul li a{
  display: block;
  margin: 0px;
  padding: 0px;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  color: inherit;
}

nav ul li.menuButton{
  display: none;
}


/*      CONTENT      */
article{
}
div.headerHolder{
  height: 120px;
  background-color: #0075be;
  box-sizing: border-box;
}

div.icon{
  margin-top: 15px;
  width: 90px;
  height: 90px;
  margin-left: 130px;
  margin-right: 30px;
  background-size: cover;
  float: left;
}
div.headerHolder.play div.icon{
  background-image: url("../images/icon-play.png");
}
div.headerHolder.house div.icon{
  background-image: url("../images/icon-house.png");
}
div.headerHolder.agenda div.icon,
div.headerHolder.agenda-cv div.icon,
div.headerHolder.agenda-od div.icon,
div.headerHolder.agenda-od-alles div.icon{
  background-image: url("../images/icon-agenda.png");
}
div.headerHolder.info div.icon,
div.headerHolder.text div.icon{
  background-image: url("../images/icon-info.png");
}
div.headerHolder.checklist div.icon{
  background-image: url("../images/icon-checklist.png");
}
div.headerHolder.at div.icon{
  background-image: url("../images/icon-at.png");
}
div.headerHolder.zoom div.icon{
  background-image: url("../images/icon-zoom.png");
}
div.headerHolder.camera div.icon{
  background-image: url("../images/icon-camera.png");
}
div.headerHolder.arrow-down div.icon{
  background-image: url("../images/icon-arrow-down.png");
}
div.headerHolder.questionmark div.icon{
  background-image: url("../images/icon-questionmark.png");
}

article h1,
section h1{
  padding-top: 32px;
  line-height: 1em;
  font-size: 1.7em;
  color: #FFF;
  text-transform: uppercase;
  font-weight: 700;
}
article h1 span,
section h1 span{
  display: block;
  font-size: 0.7em;
  line-height: 1em;
  font-weight: 400;
}
article h2,
section h2{
  line-height: 1em;
  font-size: 1.3em;
  margin-bottom: 20px;
  text-transform: uppercase;
  font-weight: 900;
  text-align: center;
}
article p a, article ul a, article ol a,
section p a, section ul a, section ol a{
  color: #0075be;
}
article p a:hover, article ul a:hover, article ol a:hover,
section p a:hover, section ul a:hover, section ol a:hover{
  text-decoration: underline;
}
article ol, article ul,
section ol, section ul{
  margin-left: 15px;
}


/*    TEXT & CONTACT   */
div.centerText{
  width: 950px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 80px;
  margin-bottom: 80px;
}
div.centerText.contact{
  text-transform: uppercase; 
  text-align: center;
}
div.centerText.contact img{
  width: 410px;
  display: inline-block;
  margin-bottom: 40px;
}


/*    PLAY    */
div.textCol{
  width: 620px; 
  float: left;
  margin-top: 80px;
  margin-bottom: 80px;
}
div.textCol:first-child{
  margin-right: 80px;
}

div.iframeHolder{
  position: relative;
  width: 520px;
  height: 0px;
  padding-top: 56.25%;
  margin-left: 50px;
  margin-bottom: 40px;
}
iframe.embedVideo{
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
}


/*    AGENDA    */
div.agendaHolder{
  width: 765px;
  height: 1000px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 80px;
  margin-bottom: 80px;
  background-image: url("../images/agenda.png?id=1");
  background-size: cover;
  box-sizing: border-box;
  padding-top: 130px;
  position: relative;
}
div.agendaHolder.overview{
  width: 1000px;
  height: auto;
  padding-top: 0px;
  background: none;
}
div.agendaHolder div.agendaItem{
  margin-left: 60px;
  margin-right: 60px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: solid 1px #9e9e9e;
  font-size: 0.8em;
  line-height: 1.2em;
}
div.agendaHolder.overview div.agendaItem{
  width: 48%;
  min-height: 100px;
  margin-left: 1%;
  margin-right: 1%;
  float: left;
}
/*
div.agendaHolder div:last-of-type{
  border-bottom: none;
  padding-bottom: 0px;
  margin-bottom: 0px;
}
*/
div.agendaHolder div b{
  font-size: 1.1em;
  line-height: 1.2em;
}
div.agendaHolder div span.title{
  font-weight: 900;
}
div.agendaHolder a.fa{
  display: block;
  position: absolute;
  top: 480px;
  color: #e54e72;
  font-size: 2.5em;
}
div.agendaHolder a.fa-chevron-left{
  left: 17px;
}
div.agendaHolder a.fa-chevron-right{
  right: 17px;
}
a.allOD{
  margin-left: 60px;
  padding-top: 20px;
}
a.allOD:hover{
  text-decoration: underline;
}


/*    TIMELINE    */
div.timelineHolder{
  width: 1320px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 80px;
  margin-bottom: 80px;
  text-align: center;
}
div.timelineHolder div.step{
  display: inline-block;
  padding-right: 110px;
  width: 320px;
  height: 250px;
  background-image: url("../images/arrow.png");
  background-position: right center;
  background-repeat: no-repeat;
  background-size: 100px 41px;
  box-sizing: border-box;
  margin-bottom: 20px;
  margin-right: 10px;
}

div.timelineHolder div.step:nth-child(4n), div.timelineHolder div.step:last-child{
  padding-right: 0px;
  background: none;
  width: 220px;
}

div.timelineHolder div.step div.stepContent{
  background-color: #0075be;
  border-radius: 15px; 
  padding: 5px;
  height: 250px;
  box-sizing: border-box;
}
div.timelineHolder div.step div.stepContent:hover div.stepText{
  display: block;
}
div.timelineHolder div.step div.stepImageHolder{
  width: 100%;
  height: 182px;
  border-radius: 10px; 
  background-size: cover;
  background-position: center center;
}
div.timelineHolder div.step div.stepText{
  width: 100%;
  height: 100%; 
  box-sizing: border-box;
  padding: 10px;
  border-radius: 10px; 
  background-color: rgba(1,36,62,0.8);
  color: #FFF;
  font-weight: 700;
  font-size: 0.7em;
  line-height: 1.2em;
  display: none;
}
div.timelineHolder div.step div.stepTitle{
  text-align: left;
  color: #FFF;
  font-size: 0.7em;
  line-height: 1em;
  text-transform: uppercase;
  font-weight: 900;
  padding-top: 10px;
  vertical-align: middle;
}
div.timelineHolder div.step div.stepTitle div{
  display: inline-block;
  background-color: #FFF;
  border-radius: 15px;
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #0075be;
  font-weight: 900;
  vertical-align: middle;
}
div.timelineHolder div.step div.stepTitle p{
  display: inline-block;
  text-align: center;
  width: 170px;
  padding-left: 10px;
  padding-right: 10px;
  box-sizing: border-box;
  vertical-align: middle;
}



/*    LOCATIONS    */
div.locationHolder{
  border-bottom: solid 1px #9e9e9e;
  margin-top: 80px;
  margin-bottom: 80px;
}
div.locationHolder.noBorder{
  border: none;
}
div.locationNavigation{
  text-align: center;
  padding-bottom: 20px;
  border-bottom: solid 1px #9e9e9e;
}
div.locationNavigation span{
  display: inline-block;
  text-transform: uppercase;
  padding: 5px;
  padding-left: 10px;
  padding-right: 10px;
  cursor: pointer;
}
div.locationNavigation span.active{
  font-weight: 900;
}

div.locationNavigation span:first-child{
  border-right: solid 1px #0075be;
}

div.locationOverview, div.locationOverviewStatic{
  font-size: 0px;
  line-height: 0px;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: -12px;
  margin-right: -12px;
}
div.locationOverview a, div.locationOverviewStatic a{
  display: inline-block;
  border: solid 1px #9e9e9e;
  padding: 12px;
  margin: 10px;
}
div.locationOverview a span, div.locationOverviewStatic a span{
  display: block;
  width: 176px;
  height: 116px;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}
div.mapsHolder{
  display: none;
  position: relative;
}
div.maps{
  width: 100%;
  height: 450px;
}
div.mapsHolder div.checkHolder{
  position: absolute;
  top: 10px;
  width: 100%;
}
div.mapsHolder div.checkBoxHolder{
  height: 28px;
  clear: both;
  margin-bottom: 4px;
  font-weight: 900;
  cursor: pointer;
  width: 200px;
}
div.checkBox{
  width: 28px;
  height: 28px;
  background-color: #FFF;
  float: left;
  margin-right: 5px;
}
div.checkBoxHolder.checked div.checkBox div{
  width: 20px;
  height: 20px;
  background-color: #0075be;
  margin: 4px;
}
div.mapsHolder div.checkBoxHolder span{
  text-shadow: 2px 2px 5px #fff;
}

div.mapsInfo{
  width: 280px;
}
div.mapsInfo img{
  display: block;
  max-width: 100%;
  max-height: 100px;
}
div.mapsInfo h1.mapsTitle{
  padding-top: 5px;
  color: #0075be;
}


/*      TYPEN   */
div.typenHolder{

}
div.typenHolder img{
  display: block;
  margin-right: 80px;
  margin-top: 80px;
  margin-bottom: 80px;
  width: 620px;
  float: left;
}

/*      GALLERY   */
h2.galleryHeading{
  margin-top: 50px;
}

div.galleryOverview{
  font-size: 0px;
  line-height: 0px;
  text-align: center;
  margin-top: 40px;
  margin-bottom: 80px;
  margin-left: -12px;
  margin-right: -12px;
}
div.galleryOverview a{
  border: solid 1px #9e9e9e;
  display: inline-block;
  margin: 10px;
  width: 160px;
  height: 100px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}


/*      DOWNLOADS   */
div.downloadOverview{
  font-size: 0px;
  line-height: 0px;
  text-align: center;
  margin-top: 80px;
  margin-bottom: 80px;
  margin-left: -12px;
  margin-right: -12px;
}
div.downloadOverview a{
  display: inline-block;
  margin: 10px;
  margin-bottom: 50px;
  width: 320px;
}
div.downloadOverview a img{
  display: block;
  margin: 0px;
  padding: 0px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
  box-shadow: 1px 1px 10px #000;
}
div.downloadOverview a span{
  display: block;
  margin: 0px;
  padding: 0px;
}
div.downloadOverview a span.title{
  font-size: 20px;
  line-height: 25px;
  display: block;
  min-height: 50px;
  color: #9e9e9e;
  text-transform: uppercase;
  font-weight: 900;
}
div.downloadOverview a span.download{
  font-size: 14px;
  line-height: 30px;
  color: #FFF;
  width: 150px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  background-color: #0075be;
  text-transform: uppercase;
  font-weight: 700;
}


/*      FOOTER      */
footer{
  width: 100%;
  position: relative;
  background-color: #0075be;
  color: #FFF;
}
footer nav{
  text-align: center;
  padding-top: 40px;
}
footer nav ul li{
  color: #FFF;
  border-right: solid 1px #FFF;
}
footer nav ul li:hover{
  color: #b8cfe6;
}

div.copyright{
  text-align: right;
  line-height: 50px;
  font-size: 0.8em;
  color: #b8cfe6;
  padding-right: 20px;
}
div.copyright p{
  display: inline;
}
div.copyright br{
  display: none;
}