@import url('https://fonts.googleapis.com/css?family=Fira+Sans:300,700');

body{
    font-family:'Fira Sans',sans-serif;
    font-weight:300;
    background: url('images/achtergrond.png') no-repeat top right fixed;
    color:#ffffff;
    width:1920px;
    height:1080px;
    margin:0;
}

header{
    display: block;
    width:80%;
    height:68px;
    padding:16px 0;
    position:fixed;
    top:0;
}

header ul{
    width: 1580px;
    margin: 0 0 0 170px;
    padding: 0;
}

li{
    list-style: none;
}
ol li {
    list-style: decimal
}
span ol li {
    font-size: 20px;
    font-weight: bold;
}
header ul li h1{
    color:#0064a3;
}

header ul li h1:first-child{

}

h1,h2,h3{
    font-weight:700;
}

a{
    color:#ffffff;
    text-decoration:none;
}

#container{
    width:100%;
    display:block;
    height:100%;
    margin:0 auto;
    padding:0;
}

.box{
    display:block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding:0;
}

.columns{
    float: left;
    display: inline;
    width: 100%;
    height: auto;
    margin: 0 auto;
    margin-top:250px;
    padding: 0;
}
.columns .w100 {
    margin: 0;
    padding: 0 170px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

li h2{
    margin-top:30px;
}

li span{
    margin-right:0;
    margin-top:20px;
    float:left;
    line-height: 1.5;
}

.still{
    float:left;
    max-width:100%;
    height:auto;
    transition:1s;
    -webkit-transition:1s;
    margin: auto 0;
    top: 0;
    bottom: 0;
    position: absolute;
}

.play-btn{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto auto;
    width:500px;
}

.w70 .play-btn{
    width:400px;
}

.chapter{    
    float:left;
    background: -webkit-linear-gradient(left,rgba(23,117,177,255),rgba(0,100,166,255)); 
    background: -o-linear-gradient(right,rgba(23,117,177,255),rgba(0,100,166,255)); 
    background: -moz-linear-gradient(right,rgba(23,117,177,255),rgba(0,100,166,255)); 
    background: linear-gradient(to right, rgba(23,117,177,255),rgba(0,100,166,255)); 
    width:500px;
    height:300px;
    margin-right:40px;
    margin-bottom:40px;
}
#chapter61,
#chapter62,
#chapter63,
#chapter64,
#chapter65,
#chapter66 {
    color: #000;
    position: relative;
}
#chapter61:after,
#chapter62:after,
#chapter63:after,
#chapter64:after,
#chapter65:after,
#chapter66:after {
    content: " ";
    display: block;
    width: 50px;
    height: 50px;
    background: url(images/arrow-right-bottom.png) bottom right no-repeat;
    background-size: 50px auto;
    position: absolute;
    right: 0;
    bottom: 0;
}
#chapter61 {
    background: url(images/chapter-6-1.jpg) top left no-repeat;
    background-size: cover;
}
#chapter62 {
    background: url(images/chapter-6-2.jpg) top left no-repeat;
    background-size: cover;
}
#chapter63 {
    background: url(images/chapter-6-3.jpg) top left no-repeat;
    background-size: cover;
}
#chapter64 {
    background: url(images/chapter-6-4.jpg) top left no-repeat;
    background-size: cover;
}
#chapter65 {
    background: url(images/chapter-6-5.jpg) top left no-repeat;
    background-size: cover;
}
#chapter66 {
    background: url(images/chapter-6-6.jpg) top left no-repeat;
    background-size: cover;
}
.chapter div{
    margin-left:20px;
    float:left;
}
#popup {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    position: fixed;
    top: 0;
    left: 0;
}
#popup div {
    width: 600px;
    height: 600px;
    border: 20px solid #000;
    position: absolute;
    z-index: 1000;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto auto;
}

.chapter1{
    background-image: url('images/blok-1.png?v=2.00')!important;
}
.chapter1 span{
    width:250px;
}
.chapter2{
    background-image: url('images/blok-2.png?v=2.00')!important;
}
.chapter2 span{
    width:240px;
}
.chapter3{
    background-image: url('images/blok-3.png')!important;
}
.chapter3 span{
    width:240px;
}
.chapter6{
    background-image: url('images/blok-6.png')!important;
}
.chapter-left{
    float:left;
    width:540px;
    height:640px;
    margin: 0;
    position:relative;
    /*
    background: -webkit-linear-gradient(left,rgba(0,117,176,255),rgba(0,102,167,1)); 
    background: -o-linear-gradient(right,rgba(0,117,176,255),rgba(0,102,167,1)); 
    background: -moz-linear-gradient(right,rgba(0,117,176,255),rgba(0,102,167,1)); 
    background: linear-gradient(to right, rgba(0,117,176,255),rgba(0,102,167,1)); 
    */
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    padding: 20px 30px 30px;
}
#chapter1 .chapter-left {
    background: url('images/vervolgpagina-blok-links-1.png?v=3.00') left top no-repeat;
}
#chapter2 .chapter-left {
    background: url('images/vervolgpagina-blok-links-2.png?v=3.00') left top no-repeat;
}
#chapter3 .chapter-left {
    background: url('images/vervolgpagina-blok-links-3.png') left top no-repeat;
}
.chapter-left .still{
    position:absolute;
    top:340px;
    left:80px;
}

.chapter-left span{
    font-size:28px;
    line-height: 1.2;
}

.chapter-right{
    float:left;
    width:1040px;
    height:640px;
    position:relative;
    background: #000;
}

#chapter4 .columns,
#chapter5 .columns{
    margin-top:100px;
}

.image{
    position:relative;
    margin-left:0 !important;
}

.image .still{
    height:100%;
}

.map{
    position: relative;
}

.map h1{
    position:absolute;
    top:100px;
    left:150px;
    margin:auto auto;
    text-shadow:1px 1px #000000;
}

.visit{
    background: -webkit-linear-gradient(left,rgba(0,100,166,255),rgba(0,54,128,255)); 
    background: -o-linear-gradient(right,rgba(0,100,166,255),rgba(0,54,128,255)); 
    background: -moz-linear-gradient(right,rgba(0,100,166,255),rgba(0,54,128,255)); 
    background: linear-gradient(to right, rgba(0,100,166,255),rgba(0,54,128,255)); 
}

.visit span{
    margin-top:50px;
    margin-left:40px;
    font-size:20px;
}

.visit h2{
    margin-top:0;
    margin-bottom:0;
}

.center{
    text-align: center;
}

.w10{
    width:170px;
    float:left;
}

.w20{
    width:20%;
    float:left;
}

.w30{
    width:30%;
    float:left;
}
.w33{
    width:33.33%;
    float:left;
}
.w40{
    width:40%;
    float:left;
}

.w50{
    width:50%;
    float:left;
}

.w60{
    width:60%;
    float:left;
}

.w70{
    width:70%;
    float:left;
}

.w100{
    width:100%;
    float:left;
}
.ac {
    text-align:center;
}
.fl {
    float:left;
}
.fr {
    float:right;
}
a.show {
    min-width: 180px;
}
.previous,
.next{    
   padding:10px;
}
.previous {    
  background: -webkit-linear-gradient(left,rgba(0,100,166,255),rgba(0,56,129,255)); /*Safari 5.1-6*/
  background: -o-linear-gradient(left,rgba(0,100,166,255),rgba(0,56,129,255)); /*Opera 11.1-12*/
  background: -moz-linear-gradient(left,rgba(0,100,166,255),rgba(0,56,129,255)); /*Fx 3.6-15*/
  background: linear-gradient(to left, rgba(0,100,166,255),rgba(0,56,129,255)); /*Standard*/
}
.next {    
  background: -webkit-linear-gradient(left,rgba(0,100,166,255),rgba(0,56,129,255)); /*Safari 5.1-6*/
  background: -o-linear-gradient(right,rgba(0,100,166,255),rgba(0,56,129,255)); /*Opera 11.1-12*/
  background: -moz-linear-gradient(right,rgba(0,100,166,255),rgba(0,56,129,255)); /*Fx 3.6-15*/
  background: linear-gradient(to right, rgba(0,100,166,255),rgba(0,56,129,255)); /*Standard*/
}
.next{
   text-align: right; 
}
.videodivbackground {
    background-color:#000000;
    width:100%;
    height:auto;
    z-index:1;
    display:none;
    margin-left:0 !important;
}

.videodiv {
    margin-left:0;
    width:100%;
    margin-left:0 !important;
}

#videodivbackground4{
    height:100%;
}

#videodivbackground4 video{
    height: -webkit-fill-available;
}

video {
    width:100%;
    margin: auto 0;
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
}

iframe{
    display: block;
    width:100%;
    height:100%;
    border: none;
    background: #FFF;
}

#close {
    position:absolute;
    z-index:2;
    width:5%;
    right:0;
    top:0;
    cursor:pointer
}

.selected-chapter .w10:last-child{
    margin-left:20px;
}