@font-face {
    font-family: 'enigmaticregular';
    src: url('EnigmaB_2-webfont.eot');
    src: url('EnigmaB_2-webfont.eot?#iefix') format('embedded-opentype'),
         url('EnigmaB_2-webfont.woff2') format('woff2'),
         url('EnigmaB_2-webfont.woff') format('woff'),
         url('EnigmaB_2-webfont.ttf') format('truetype'),
         url('EnigmaB_2-webfont.svg#enigmaticregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'borgen';
    src: url('borgen-webfont.woff2') format('woff2'),
         url('borgen-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

body {

  background-size: width:auto; height: auto;
  background-color: black;
 
}

#navigation li {
  display: inline-block;
  float: center;
  -webkit-filter: blur(5px) hue-rotate(150deg);
  
}

#navigation {
  margin: 40 ;
  padding: 40 ;
  list-style: none ;
  text-align: center ;
  position: absolute;
    
   z-index: 5;
}

#navigation li a {
  height: 167px; width:300px;
  display: inline-block;
  font-family: "enigmaticregular";
  font: 1em;
  font-size: 18px;
  font-weight: bold;
  color: white;
  text-shadow: 3px 1px 7px yellow, 3px 1px 7px yellow, 3px 1px 7px yellow, 3px 1px 10px yellow;
  line-height: 12em ;
  padding: 4px 3 ;
  text-align: center ;
  text-decoration:none;
  z-index: 7;
}

.tit{
  opacity: 0;
  padding: 0%;
  margin-top: 0%;

}
.tit:hover, .tit:focus, .tit:active {
opacity: 1;
}


 #fen1{
  background: #c00 url(ven1.jpg) center no-repeat;
 }
 #fen2{
  background: #c00 url(fot.jpg) center no-repeat;
 }
 #fen3{
  background: #c00 url(nar1.jpg) center no-repeat;
 }
#fen4{
  background: #c00 url(font1.jpg) center no-repeat;
 }
 #fen5{
  background: #c00 url(run1.jpg) center no-repeat;
 }
 #fen6{
  background: #c00 url(bon1.jpg) center no-repeat;
 }
 #fen7{
  background: #c00 url(mir1.jpg) center no-repeat;
 }
#fen8{
  
 }
 #fen9{
  background: #c00 url(hdr1.jpg) center no-repeat;
 }
 #fen10{
  background: #c00 url(tent1.jpg) center no-repeat;
 }
#fen11{
  background: #c00 url(vol1.jpg) center no-repeat;
 }
 #fen12{
  
 }
 #fen13{
  background: #c00 url(mouettes1.jpg) center no-repeat;
 }
 #fen14{
  background: #c00 url(cop1.jpg) center no-repeat;
 }
 #fen15{
  background: #c00 url(hot1.jpg) center no-repeat;
 }
 #fen16{
  background: #c00 url(hap1.jpg) center no-repeat;
 }
 #fen17{
  background: #c00 url(dec1.jpg) center no-repeat;
 }
 #fen18{
  background: #c00 url(sable1.jpg) center no-repeat;
 }
 #fen19{
  background: #c00 url(pli1.jpg) center no-repeat;
 }
 #fen20{
  background: #c00 url(nou1.jpg) center no-repeat;
 }
 #fen21{
  background: #c00 url(cont1.jpg) center no-repeat;
 }
 #fen22{
  background: #c00 url(ami1.jpg) center no-repeat;
 }
 #fen23{
  background: #c00 url(fic1.jpg) center no-repeat;
 }
 #fen24{
  background: #c00 url(vid1.jpg) center no-repeat;
 }
 #fen25{
  background: #c00 url(vid2.jpg) center no-repeat ;
 }
 #fen26{
  background: #c00 url(fic9.jpg) center no-repeat ;
}
#fen27{
  background: #c00 url(v2.jpg) center no-repeat ;
}
#fen28{
  background: #c00 url(idf.jpg) center no-repeat ;
}
#fen29{
  background: #c00 url(fic2.png) center no-repeat ;
}

#navigation li:hover, #navigation li:focus, #navigation li:active {
  -webkit-filter: blur(0px);   
  -webkit-filter: hue-rotate(0deg); 
}

#navigation :hover, #navigation :focus, #navigation :active {
   -webkit-filter: hue-rotate(300deg);   
}

.infi {
  display: ruby-text;
  position: absolute;
  top: 30%;
  font-family: borgen;
  color: 3333cc;
  font-size: 150%;
  z-index: 1;
  animation-delay: 0s;
  animation-duration: 1400s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-name: slidein;
  animation-iteration-count:1;
}@keyframes slidein {
  from {S
    margin-left: 0%;
    width: 8000%; 
  }
  to {
    margin-left: -8000%;
  }

}