@-ms-viewport{
 width: device-width;
 }
body{
 background-color:#222;
 color:#FFF;
 letter-spacing: 3px;
 box-sizing: border-box;
 font-variant: small-caps;
 line-height: 2;
 word-spacing: 3px;
 text-align:center;
 margin:0;
 padding:0;
 }
a{
 color:#FFF;
 }
header{
 position:absolute;
 width:75%;
 height:100%;
 display:inline-block;
 text-align:center;
 padding:0px;
 margin:0px;
 }
header>div{
 border-top:1px solid #FFF;
 border-bottom:1px solid #FFF;
 background-repeat: no-repeat;
 background-position:27% center;
 background-size: cover;
 display: inline-block;
 height: 90%;
 width: 100%;
 }
header>img:first-child{
 display: block;
 vertical-align:top;
 padding:2% 3%;
 box-sizing: border-box;
 margin:auto;
 }
body>div{
 border-bottom:1px solid #FFF;
 text-align:left;
 overflow: hidden;
 position: relative;
 }
nav{
 vertical-align: top;
 background-color:#555;
 border-top:1px solid #FFF;
 text-align:left;
 letter-spacing: 0px;
 width:25%;
 height:auto;
 display:inline-block;
 padding:0px;
 margin:0px;
 }
nav>img{ 
 border-bottom:1px solid #FFF;
 }
nav>a{
 margin:0;
 color:#FFF;
 text-decoration:none;
 font-size:small;
 line-height: 1;
 vertical-align: top;
 word-spacing: 2px;
 letter-spacing: 2px;
 display:block;
 padding:4px 0%;
 text-align:center;
 width:100%;
 height:auto;
 }
nav>a>h3{
 font-size:medium;
 display:block;
 margin:0px;
 padding:8px 2px;
 
 word-spacing: 3px;
 letter-spacing: 2px;
 width:100%;
 }
nav>a:hover{
 background-color:#3B3;
 }
nav>a.selected{
 background-color:#777;
 }
.langsel{
 width:32%;
 display:inline-block;
 }
article{
 padding:2% 15%;
 margin:5% 0%;
 background-color:#555;
 border-top:1px solid #FFF;
 border-bottom:1px solid #FFF;
 display:block;
 }
section:before{
 content:"~ * ~";
 color:#CCC;
 padding:0% 15%;
 margin:5% 0%;
 text-align:center;
 display:block;
 }
article>section:before{
 padding:0% 15%;
 margin:3% 0%;
 }
section:first-child:before{
 content:"";
 display:none;
 }
section:first-child+section:lang(fr):before{
 content:"";
 display:none;
 }
section:first-child+section:lang(nl):before{
 content:"";
 display:none;
 }
section:first-child+section:lang(en):before{
 content:"";
 display:none;
 }
section:first-child+section+section:lang(fr):before{
 content:"";
 display:none;
 }
section:first-child+section+section:lang(nl):before{
 content:"";
 display:none;
 }
section:first-child+section+section:lang(en):before{
 content:"";
 display:none;
 }
img{
 width:100%;
 }
figure{
 width:19%;
 display:inline-block;
 border:1px solid #FFF;
 border-radius:4px;
 margin:8px;
 padding:8px;
 -webkit-transition:width 0.25s ease-out;
 transition:width 0.25s ease-out;
 }
figure>figcaption{
 width:0px;
 height:0px;
 margin:0;
 padding:0;
 position:absolute;
 visibility:hidden;
 -webkit-transition:height 0.25s ease-out;
 transition:height 0.25s ease-out;
 }
figure:focus{
 width:96%;
 text-align:center;
 }
figure:focus>figcaption{
 width:100%;
 height:auto;
 margin:0;
 padding:0;
 visibility:visible;
 position:relative;
 }
figure>img{
 width:100%;
 }
figure>img{
 width:0px;
 height:0px;
 margin:0;
 padding:0;
 visibility:hidden;
 }
figure>img:first-child{
 width:100%;
 height:auto;
 margin:0;
 padding:0;
 visibility:visible;
 }
figure:focus>img{
 width:100%;
 height:auto;
 max-height: 100%;
 margin:0;
 padding:0;
 visibility:visible;
 }
figure:focus>img:first-child{
 width:0px;
 height:0px;
 margin:0;
 padding:0;
 visibility:hidden;
 }
.hidden{
 display:none;
 }
footer{
 font-size:xx-small;
 color:#777;
 }
table{
 margin: 0 -15%;
 border-collapse: collapse;
 overflow-x: scroll;
 display: block;
 border: 1px solid grey;
}
td{
 border: 1px solid grey;
 padding: 1em;
 text-align: center;
}
@media screen and (max-width: 600px){
 body>div{
  overflow:initial;
  height:auto;
  position:initial;
  }
 header{
  position:initial;
  }
 article{
  padding:2% 16px;
  }
 header{
  width:100%;
  position:initial;
  height:auto;
  }
 header>div{
  height: 50%;
  }
 nav{
  position:initial;
  width:100%;
  height:auto;
  border-bottom:1px solid #FFF;
  }
 nav>a{
  }
 figure{
  width:42%;
  }
 }