body
{
width: 100%;
min-width: 375px;
height: 100%;
margin: auto;
}
body#index
{
background-image: url(tramtest.jpg); 
background-repeat:no-repeat;
background-attachment:fixed;
background-size: cover;
min-width: 375px;
}


.titre
{
z-index: 10;
opacity: 1;
width:30%;
position:absolute;
border: 0px solid red;
justify-content: center;
text-align: center;
  opacity: 0.9;
  font-family: 'AnAlphaBetIsm';
  font-size: 55px;
margin-left: 500px;
margin-top:320px;
 transform: rotate(-26deg);
-moz-transform: rotate(-26deg);
-webkit-transform: rotate(-26deg);
-khtml-transform: rotate(-26deg);
-ms-transform: rotate(-26deg);
border: 0px solid black;
}



body#site
{
background-image: url(accueil.jpg); 
background-repeat:no-repeat;
background-attachment:fixed;
background-size: cover;
min-width: 375px;
}

body#accueil
{
background-image: url(accueil.jpg); 
background-repeat:no-repeat;
background-attachment:fixed;
background-size: cover;
cursor: s-resize;
min-width: 375px;
}

.titre-accueil {

  position: fixed;
  left: 150px;
  top: 20px;
  width:220px;
  height:60px;
  text-align: center;
  opacity: 0.9;
  font-family: 'AnAlphaBetIsm';
  font-size: 24px;
  z-index: 2;
  transform: rotate(-26deg);
-moz-transform: rotate(-26deg);
-webkit-transform: rotate(-26deg);
-khtml-transform: rotate(-26deg);
-ms-transform: rotate(-26deg);
border: 0px solid black;

}

titre-accueil-test
 {
 position: fixed;
  left: 180px;
  top: 20px;
  width: 208px;
  height:101px;
  z-index: 2;
}

.cv
{
color: black;
opacity: 0.7;
font-size: 13px;
font-family: 'Roboto-Regular';
width: 50%;
min-width: 400px;
margin: auto;
margin-left: 250px;
margin-top: 220px;
padding-top: 0px;
border: 0px solid black;

}


.presse
{
position: absolute;
margin-left: 250px;
}

.contact
{
color: black;
opacity: 0.7;
font-size: 15px;
font-family: 'Roboto-Regular';
width: 50%;
min-width: 400px;
margin: auto;
margin-left: 250px;
margin-top: 280px;
padding-top: 0px;
border: 0px solid black;

}

.texte-travail
{
color: #7eb2d8;
opacity: 0.7;
font-size: 25px;
font-family: 'Roboto-Light';
line-height: 30px;
width: 70%;
height: 30%;
min-width: 400px;
margin: auto;
margin-left: 280px;
margin-top: 738px;
padding-top: 0px;
padding-bottom: 900px;
border: 0px solid black;
text-align: left;
cursor: s-resize;


}




.fleche {

  position: fixed;
  margin-left: 1270px;
  top: 160px;
  width: 701px;
  height: 871px;
  z-index: 1000;
}

.fleche2 {

  position: fixed;
  margin-left: 300px;
  top: 160px;
  width: 701px;
  height: 871px;
  z-index: 1000;
}

a /* Liens du site */
{
text-decoration: none;
color:black;
opacity: 0.75;
z-index: 10;
cursor: cell;

}

a:hover /* survol des liens */
{
color: #412b26;
opacity: 1;

}


h1 
{
color: black;
opacity: 1;
font-size: 50px;
font-family: 'AnAlphaBetIsm';
font-weight: light;
width: 100%;
text-align: center; 
margin-left:auto;
margin-right:auto;
margin-top:40px;
position: fixed; 
z-index: 1;
border: 0px solid red;
}

.titre-pages
{
color: black;
opacity: 1;
font-size: 23px;
font-family: 'AnAlphaBetIsm';
font-weight: regular;
width: 100%;
text-align: left; 
margin-left:32px;
margin-right:auto;
margin-top:50px;
position: fixed; 
z-index: 1;
border: 0px solid red;
}

/* MENU DEROULANT*/


nav {
position: fixed; left: 0px; top: 80px;
padding-top : 0px;
font-family: 'Roboto-Regular';
font-weight:light;
color: black;
opacity: 0.8;
z-index: 1000;
}



li { 
padding-top: 0px;
padding-bottom: 0px;
margin-top: 0px;
color: red;
text-decoration:none;
border: 0px solid red;
display: block;
z-index: 1000;
width: 100%;
}
nav .principal {
color: red;
opacity:1;
padding:0px;;
margin:50px;
margin-top: 220px;
line-height: 0px;
height: var;
z-index: 1000;
}



nav .principal li {
font-size: 17px;
font-family: 'Roboto-Regular';
font-weight: light;
list-style: none;
height: 25px;
line-height: 0px;
margin-left: 15px;
margin-top:0px;
padding-top: -5px;
color: black;
z-index: 1000;
border: 0px solid red;
}

nav .principal li a {
color: black;
padding-top:0px;
margin-top:0px;
font-family:"Roboto-Regular";
font-size: 16px;
text-decoration:none;
display:block;
z-index: 1000;
width: 100%;
height: auto
border: 0px solid red;
}

nav .principal li a:hover {
z-index: 1000;
opacity: 1;

}

nav .principal li ul
{ display:none;
text-decoration:none;
 } /* Rend le menu déroulant caché par défaut */
nav .principal li:hover ul { /* Affiche la dropNav au survol de la souris avec la class .drop */
z-index: 1000;
display:block;
position:absolute;
padding-top: -1px;
margin-top: -16px;
margin-left:70px;
padding-left: 0px;
text-decoration:none;
border: 0px solid red;
width: 200px;
height: 100%;
opacity: 1;
}

nav .principal li:hover ul li {
float:left;
z-index: 1000;
opacity: 1;

}

.principal ul li a
{
margin-left: 0px;
margin-top: 0px;
padding-top: 0px;
font-family: 'Roboto-Regular';
font-weight: light;
font-size: 16px;
position: relative;
display: block;
    width: 80%;
    height: 100%;
    padding: 0px 0px;
    text-align: left;
    border: 0px solid red;
    z-index: 1000;
    
}
.principal ul li a:hover
{
background-color: #7eb2d8;
font-style: italic;
opacity:0.5;
}




/* IMAGES Travail */

.zoom {
width: 1000px;
height: 669px;
}

figcaption {
z-index: 1200;
display: table-caption;
caption-side: bottom;
padding-left: 0px;
text-align: left;
font-size: 11px;
opacity: 0.90;
font-family: 'Roboto-Light';
font-weight:light;
color: black;
position: fixed; bottom: 30px; left: 200px;
background:white; opacity: 0.85;
border-top:2px solid white;
border-bottom:2px solid white;
padding:1em 1em 1em 1em;
}


   /* Aerateurs jaunes */
.aerateur_jaune1
{
z-index: 10;
opacity: 0.90;
width: 748px;
height: 500px;
position:absolute;
display: table;
border: 0px solid red;
justify-content: center;
margin-left: 300px;
margin-top:200px;
}

.aerateur_jaune2
{
opacity: 0.90;
position: relative;
display: block;
border: 0px solid red;
margin-left: 700px;
margin-top: 230px;
padding-top: 0px;
width: 300px;
height: 400px;
}


 /* Aerateurs verre */


.aerateur_verre1
{
z-index: 10;
opacity: 0.90;
width: 748px;
height: 500px;
position:absolute;
display: table;
border: 0px solid red;
justify-content: center;
margin-left: 300px;
margin-top:200px;
}

.aerateur_verre2
{
opacity: 0.90;
position: relative;
display: block;
border: 0px solid red;
margin-left: 300px;
margin-top: 170px;
padding-top: 0px;
width: 300px;
height: 400px;
}

.aerateur_verre3
{
opacity: 0.90;
position: relative;
display: block;
border: 0px solid red;
margin-left: 600px;
margin-top: 50px;
padding-top: 0px;
width: 300px;
height: 400px;
}

 /* Aerateurs */
.aerateur_1
{
z-index: 10;
opacity: 0.90;
width: 748px;
height: 500px;
position:absolute;
display: table;
border: 0px solid red;
justify-content: center;
margin-left: 450px;
margin-top:200px;
}

.aerateur_2
{
opacity: 0.90;
position: relative;
display: block;
border: 0px solid red;
margin-left: 600px;
margin-top: 300px;
padding-top: 0px;
width: 300px;
height: 400px;
}

.aerateur_3
{
opacity: 0.90;
position: relative;
display: block;
border: 0px solid red;
margin-left: 300px;
margin-top: 250px;
padding-top: 0px;
width: 300px;
height: 400px;
}

 /* Agreable surface */
.agreable_1
{
z-index: 10;
opacity: 0.90;
width: 748px;
height: 500px;
position:absolute;
display: table;
border: 0px solid red;
justify-content: center;
margin-left: 300px;
margin-top:200px;
}

.agreable_2
{
opacity: 0.90;
position: relative;
display: block;
border: 0px solid red;
margin-left: 850px;
margin-top: 50px;
padding-top: 0px;
width: 300px;
height: 400px;
z-index: 1000;
}

.agreable_3
{
opacity: 0.90;
position: relative;
display: block;
border: 0px solid red;
margin-left: 300px;
margin-top: -400px;
padding-top: 0px;
width: 300px;
height: 400px;
}

 /* Cailloux */
.cailloux_1
{
z-index: 10;
opacity: 0.90;
width: 748px;
height: 500px;
position:absolute;
display: table;
border: 0px solid red;
justify-content: center;
margin-left: 300px;
margin-top:200px;
}

.cailloux_2
{
opacity: 0.90;
position: relative;
display: block;
border: 0px solid red;
margin-left: 300px;
margin-top: 240px;
padding-top: 0px;
width: 300px;
height: 400px;

}

 /* Milimetre */
.milimetre_1
{
z-index: 10;
opacity: 0.90;
width: 748px;
height: 500px;
position:absolute;
display: table;
border: 0px solid red;
justify-content: center;
margin-left: 300px;
margin-top:200px;
}

.milimetre_2
{
opacity: 0.90;
position: relative;
display: block;
border: 0px solid red;
margin-left: 300px;
margin-top: 1000px;
padding-top: 0px;
width: 300px;
height: 400px;

}

.milimetre_3
{
opacity: 0.90;
position: relative;
display: block;
border: 0px solid red;
margin-left: 300px;
margin-top: 800px;
padding-top: 0px;
width: 300px;
height: 400px;
}

 /* Pied de trois */
.piedtrois_1
{
z-index: 10;
opacity: 0.90;
width: 748px;
height: 500px;
position:absolute;
display: table;
border: 0px solid red;
justify-content: center;
margin-left: 300px;
margin-top:200px;
}

.piedtrois_2
{
opacity: 0.90;
position: relative;
display: block;
border: 0px solid red;
margin-left: 300px;
margin-top: 205px;
padding-top: 0px;
width: 300px;
height: 400px;

}

.piedtrois_3
{
opacity: 0.90;
position: relative;
display: block;
border: 0px solid red;
margin-left: 300px;
margin-top: 5px;
padding-top: 0px;
width: 300px;
height: 400px;
}

.piedtrois_4
{
opacity: 0.90;
position: absolute;
display: block;
border: 0px solid red;
margin-left: 300px;
margin-top: -15px;
padding-top: 0px;
width: 300px;
height: 400px;
}

/* Pied de un */
.piedde_1
{
z-index: 10;
opacity: 0.90;
width: 748px;
height: 500px;
position:absolute;
display: table;
border: 0px solid red;
justify-content: center;
margin-left: 300px;
margin-top:200px;
}

.piedde_2
{
opacity: 0.90;
position: relative;
display: block;
border: 0px solid red;
margin-left: 700px;
margin-top: 240px;
padding-top: 0px;
width: 300px;
height: 400px;
z-index:1000;

}

 /* Pong */
.pong_1
{
z-index: 10;
opacity: 0.90;
width: 748px;
height: 500px;
position:absolute;
display: table;
border: 0px solid red;
justify-content: center;
margin-left: 300px;
margin-top:200px;

}


 /* quittance */
.quittance_1
{
z-index: 10;
opacity: 0.90;
width: 748px;
height: 500px;
position:absolute;
display: table;
border: 0px solid red;
justify-content: center;
margin-left: 300px;
margin-top:200px;
}

.quittance_2
{
opacity: 0.90;
position: relative;
display: block;
border: 0px solid red;
margin-left: 300px;
margin-top: 205px;
padding-top: 0px;
width: 300px;
height: 400px;

}

.quittance_3
{
opacity: 0.90;
position: relative;
display: block;
border: 0px solid red;
margin-left: 300px;
margin-top: 5px;
padding-top: 0px;
width: 300px;
height: 400px;
}


/*ZOOM IMAGES*/

.zoom figure img {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: .5s ease-in-out;
    transition: .3s ease-in-out;
}
.zoom figure:hover img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);}
    
    
    /* agencement images vignettes*/
    
.wrapper{
  display: grid;
  grid-template-columns: 0.5fr 0.5fr;
 padding-top: 300px;
 border: 0px solid red;
 width: 80%;
grid-column-gap: 40px;
  grid-row-gap: 10em;
 justify-self: center;
 margin-left: 200px;
}   

.zoom wrapper img_index {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: .5s ease-in-out;
    transition: .3s ease-in-out;
}
.zoom wrapper:hover img_index {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);}