body  { 
font-family: jura-demibold;  
background-color: #333;  
margin-bottom: 10px;    }

#conteneur {
background-color:#000; 
width: 1000px; 
height: 808px;
position:relative;
left: 2px; 
top: 2px;
margin-left:auto;
margin-right:auto;
margin-bottom: 10px; 
border: solid 1px #000 ;     
box-shadow: 9px 9px 12px #666666;
-moz-box-shadow: 9px 9px 12px #666666;
-webkit-box-shadow: 9px 9px 12px #666666;   }

#box   {
position: absolute;
top: 0px;
left: 0px;
width: 1000px;
height: 18px;   
background: -moz-linear-gradient(top, #666666 0%, #FFFFFF 33%, #C0C0C0 77%, #666666);
background: -ms-linear-gradient(top, #666666 0%, #FFFFFF 33%, #C0C0C0 77%, #666666);
background: -o-linear-gradient(top, #000000 0%, #FFFFFF 33%, #C0C0C0 77%, #000000);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#666666));
z-index: 1; }

#ani-atohm1    {
position: absolute;
top: 14px;
left: 14px;  }


#logo   {
position: absolute;
top: 28px;
left: 110px;
width: 700px; 
height: 80px;    }

#box1   {
position: absolute;
top: 106px;
left: 0px;
width: 1000px;
height: 16px;  
background-color: #333;
border-top: solid 1px #666;  }


#logo-terminal   {
position: absolute;
top: 146px;
left: 30px;    }


#zone-img     { 
position:absolute;
top: 292px;
left: 358px;
width: 490x;
height: 304px;
padding: 18px;
border-radius: 14px;
border: 2px solid silver;
background: -ms-radial-gradient(center center, ellipse, #fff, #000);
background: -moz-radial-gradient(center center, ellipse, #fff, #000);
background: -webkit-radial-gradient(center center, ellipse, #fff, #000);
z-index: 1;   }

#ez-vision   {
position: absolute;
top: 680px;
left: 40px;   }

#mire   {
position: absolute;
top: 680px;
left: 150px;   }

#visual1   {
position: absolute;
top: 245px;
left: 20px;    }

#visual2   {
position: absolute;
top: 200px;
left: 8px;    }

#picto1   {
position: absolute;
top: 302px;
left: 117px;    }

#picto2   {
position: absolute;
top: 379px;
left: 117px;    }

#picto3   {
position: absolute;
top: 450px;
left: 117px;    }

#picto4   {
position: absolute;
top: 530px;
left: 117px;    }


#picto5   {
   position: absolute;
   top: 608px;
   left: 117px;   }

iframe {
  width: 480px;
  height: 270px;  }


#play  {
font-size: 1.4em; 
color:#fff;
position: absolute; 
top: 600px; 
left:680px;
z-index:2; }


#titre  {
font-size: 1.3em; 
color:#fff;
position: absolute; 
top: 130px; 
left:842px;
width: 200px; }



#texte   {
position: absolute;
top: 220px;
left: 240px;
width: 680px;
height: 300px;
padding: 4px;
line-height: 1.6em;
color:#fff;
font-size: 16px;
text-align:justify;  }


#credits   {
position: absolute;
top: 784px;
left: 750px;
font-size: 1.2em;
width: 290px;
height: 20px;
color:#000;
font-weight: bold; 
z-index:1;    }   

#pied-page {
position: absolute;
top: 781px;
left: 0px; 
width: 1000px;
height: 27px; 
margin-bottom: 10px; 
background: -moz-linear-gradient(top, #666666 0%, #FFFFFF 33%, #C0C0C0 77%, #666666);
background: -ms-linear-gradient(top, #666666 0%, #FFFFFF 33%, #C0C0C0 77%, #666666);
background: -o-linear-gradient(top, #000000 0%, #FFFFFF 33%, #C0C0C0 77%, #000000);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#666666));   }




a { 

 color: #fff;
  font-size:18px;
  text-decoration:none; 
  font-style: normal; }

a:hover { 

  color:#ff6600; }

a:visited { 

color:#A0A0A4;
text-decoration:none; }

a:active { 

color: #666;
text-decoration:underline overline; }

@font-face {
  font-family: 'jura-demibold';
  src: url('../fonts/jura-demibold-webfont.eot');
  src: url('../fonts/jura-demibold-webfont.eot?#iefix') format('embedded-opentype'),
       url('../fonts/jura-demibold-webfont.woff') format('woff'),
       url('../fonts/jura-demibold-webfont.ttf') format('truetype'),
       url('../fonts/jura-demibold-webfont.svg#jurademibold') format('svg');
  font-weight: normal;
  font-style: normal;
}













@media only screen and (color) 

and (min-width : 1000px) {


#conteneur {
 
  width: 1000px; 
  height: 808px;   }

#box   {
 
  top: 0px;
  left: 0px;
  width: 1000px;
  height: 18px;    }

#ani-atohm1    {

top: 14px;
left: 4px;  }


#logo   {

  top: 28px;
  left: 110px;
  width: 840px; 
  height: 80px;    }

#box1   {

  top: 106px;
  left: 0px;
  width: 1000px;
  height: 16px;  }


#logo-terminal   {

  top: 146px;
  left: 30px;    }

#zone-img     { 

  top: 292px;
  left: 358px;
  width: 490x;
  height: 304px;   }

#ez-vision   {

  top: 700px;
  left: 40px;   }

#mire   {

  top: 700px;
  left: 150px;   }

#play  {
font-size: 1.4em; 
color:#fff;
position: absolute; 
top: 600px; 
left:800px;
z-index:2; }


#titre  {
  
  font-size: 1.3em; 
  top: 140px; 
  left:788px; }

#texte   {

  top: 220px;
  left: 240px;
  width: 680px;
  height: 300px;  }


#visual1   {

  top: 245px;
  left: 20px;    }

#visual2   {

  top: 200px;
  left: 8px;    }

#picto1   {

  top: 302px;
  left: 117px;    }

#picto2   {

  top: 379px;
  left: 117px;    }

#picto3   {

  top: 450px;
  left: 117px;    }

#picto4   {

  top: 530px;
  left: 117px;    }

#picto5   {

  top: 608px;
  left: 117px;    }

}






















@media only screen and (color) 

and (max-width : 640px) {


#conteneur {
 
  width: 640px; 
  height: 1130px;  }

#box   {

  top: 0px;
  left: 0px;
  width: 640px;
  height: 18px;  }


#ani-atohm1    {
  top: 14px;
  left: 4px;  }


#logo   {
  
  top: 28px;
  left: 110px;   
  width: 516px;
  height: 86px;  }



#box1   {

  top: 106px;
  left: 0px;
  width: 640px;
  height: 16px;    }


#logo-terminal   {

  top: 1060px;
  left: 45px;    }


#zone-img     { 

  top: 146px;
  left: 60px;
  width: 620x;
  height: 304px;
  padding: 14px; }


#ez-vision   {

  top: 1010px;
  left: 48px;   }

#mire   {

  top: 1010px;
  left: 142px;   }

#visual1   {

  top: 545px;
  left: 20px;    }

#visual2   {

  top: 510px;
  left: 8px;    }

#picto1   {
 
  top: 602px;
  left: 117px;    }

#picto2   {

  top: 679px;
  left: 117px;    }

#picto3   {
  
  top: 750px;
  left: 117px;    }

#picto4   {

  top: 830px;
  left: 117px;    }

#picto5   {

  top: 908px;
  left: 117px;    }

#titre   {

  top:160px;
  left: 640px; }

#play  {

  font-size: 1.2em; 
  top: 444px; 
  left:500px; }

iframe {
  width: 480px;
  height: 270px;  }



#titre  {

  font-size: 1.1em; 
  top:123px; 
  left:530px; }

#texte   {

  top: 640px;
  left: 270px;
  width: 320px;
  height: 250px;  }

#credits   {

  top: 1130px;
  left: 370px;
  font-size: 1.4em;

  width: 290px;
  height: 20px;    }   

#pied-page {

  top: 1130px;
  left: 0px; 
  width: 640px;
  height: 27px; }

}















@media only screen and (color) 

and (max-width : 320px) {


#conteneur {

  width: 320px; 
  height: 1208px; }

#box   {

  top: 0px;
  left: 0px;
  width: 320px;
  height: 18px;  }

#ani-atohm1    {

  top: 14px;
  left: 4px;
  width: 100px;
  height: 80px;  }


#logo   {

  top: 44px;
  left: 100px;
  width: 200px; 
  height: 30px;   }

#box1   {

  top: 106px;
  left: 0px;
  width: 320px;
  height: 16px;   }


#logo-terminal   {

  top: 1090px;
  left: 20px;    }

#zone-img     { 

  top: 150px;
  left: 12px;
  width: 314x;
  height: 214px;
  padding: 6px;  }

iframe {
  width: 280px;
  height: 180px;  }

#ez-vision   {

  top: 1140px;
  left: 20px;   }

#mire   {

  top: 1140px;
  left: 130px;   }

#visual1   {

  top: 445px;
  left: 20px;    }

#visual2   {

  top: 400px;
  left: 8px;    }

#picto1   {

  top: 502px;
  left: 117px;    }

#picto2   {

  top: 579px;
  left: 117px;    }

#picto3   {

  top: 650px;
  left: 117px;    }

#picto4   {

  top: 730px;
  left: 117px;    }

#picto5   {

  top: 808px;
  left: 117px;    }



#play  {

  font-size: 1.2em; 
  top: 352px; 
  left:220px; }

#texte   {

  top: 880px;
  left: 10px;
  width: 280px;
  height: 300px;
  padding: 4px;  }

#titre  {

  font-size: 0.9em;  
  top: 130px; 
  left:214px; }

#credits   {

  top: 1204px;
  left: 80px;
  font-size: 1.2em;  }   

#pied-page {

  top: 1201px;
  left: 0px; 
  width: 320px;
  height: 27px;  }


}