body{
  font-size: 100%;
  font-family: arial, sans-serif;
  background: black;
  color: white;
}

a{
  text-decoration: none;
  color: white;
}

header{
  /*position: fixed;*/
  position: relative;
  display: table;
  width: 94%;
  max-width:650px;  /*always keepa little margin on small devices*/
  height: 90px;
  text-align: center;
  margin:30px auto 0 auto;
}

.menuIcon{
    position: absolute;
    top: 6px;
    left: 0;
    padding: 0 32px 32px 0;
  }

.menuIcon img{
}

@media screen and (max-width: 959px) {  /*based on window resizing, not on device*/
  .menuIcon{
    display: inline-block;
  }

  header h1{
    /*display: inline-block;*/
    margin: 0 auto;  /*debug TODO*//*this is a temporary solution, zonder dit moet je maar s zien wat er gebeurt*/
    /*top:0;*/
    /*position: absolute;*/
  }

  header h2{
    margin-bottom: 0;    /*to delete webkit's automatic generated "webkit-margin-after"*/
  }
}

@media screen and (min-width: 960px) {  /*based on window resizing, not on device*/

  .menuIcon{
    display: none;
  }
}



nav{
  /*display: none;*/
  position: fixed;
  z-index: 1;
  height: -moz-calc(100vh - 90px);
  height: -webkit-calc(100vh - 90px);
  height: -o-calc(100vh - 90px);
  height: calc(100vh - 90px);
    transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
}

nav ul{
}

nav li{
  font-size: 1.25em;
  padding:4px;
  list-style: none;
}

nav a:hover{
  text-decoration: underline;
}

.arrowRight{
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid white;
  margin:0 6px 0 -12px;
}

@media screen and (max-width: 959px) {  /*based on window resizing, not on device*/
  nav{
    width: 100%;
    background: black;
    top: 150px;
    text-align: center;
    left:-100%;
  }

  nav ul{
    /*margin: 0;*/
    padding: 0;
  }
}

@media only screen and (max-width: 959px) and (orientation:landscape) {
  nav {
      overflow: scroll;
  }
}

@media screen and (min-width: 960px) {  /*based on window resizing, not on device*/
  nav{
    width:360px;
    top: 165px;
    text-align: left;
    /*left: 0;*/
  }
}

.slideInNav{
  left:0;
}

.slideOutNav{
  left:-100%;
}

article{
  width: 94%;
  text-align: center;
  margin: auto;
}

article img{
  width:100%;
  max-width:650px;  /*always keepa little margin on small devices*/
  /*max-width: 650px;*/  /*always keepa little margin on small devices*/
  /*max-height: 100vh;*/
  margin-top: 30px;
}

.imgGroup p{
  font-size: 1.1em;
  font-style: italic;
   /*text-transform: uppercase;*/
   /*font-weight: bold;*/
}

.hideme{
  /*display: none;*/
  opacity: 0;
}

@media screen and (max-width: 959px) {  /*based on window resizing, not on device*/
  .hideme{
    margin-top: 0;
  }
}

@media screen and (min-width: 960px) {  /*based on window resizing, not on device*/
  .hideme{
    margin-top: 120px;
  }
}


#pageNav{
  font-size: 0.95em;
  width: 100%;
  max-width:650px;
  text-align: center;
  margin: 30px auto 0 auto;
  height: 20px;
}

#pageNav * {              /*every child*/
  display: inline-block;
  margin: 0;
  padding: 0;
}

#pageNav * :hover {              /*every child*/
  cursor: pointer;
  text-decoration: underline;
}


.prevPage{
  float:left;
}

.page{

}

.nextPage{
  float: right;
}


footer{
  font-size: 0.8em;
  width: 100%;
  margin:30px 0 10px 0;
  /*border-top: 1px solid grey;*/
  text-align: center;
}

 footer p{
  font-size: 0.8em;
  color: grey;
}

footer a{
  color: grey;
}