* {
  margin: 0;
  padding: 0;
}


a:hover {
   border-bottom: 1px solid currentColor;
}

/*HEADER  not important 

body { 
  background: #fbdddb;
}

*/
.header {
  height: 25px;
  background: #222;
  color: #eee;
  text-align: center;
  font: 10px/25px Helvetica, Verdana, sans-serif; 
}

.header a {
  color: #999;
}

/*CONTAINER*/
.container_projects_navigation {
  position: relative;
  overflow: hidden;
  margin: 70px auto;
  width: 881px;
  height: 720px;
  padding-left:100px; padding-right:100px; background:#ffffff;  
  background-image: url("../images/projects/over_default.jpg");  background-repeat: no-repeat; background-position: top right;
/*  -webkit-box-shadow: 10px 10px 10px rgba(0,0,0,0.3);
  box-shadow: 10px 10px 10px rgba(0,0,0,0.3); ...not sure about the shadow...
   était à l'origine --  width: 800px; height: 500px;
   ajout Martin pour mieux voir le contour - border:1px solid #000; */
}


.container_projects_navigation img {
  position: absolute;
  top: 0;
  left: 300px;
  z-index: -50; /* original - z-index: -60; */
}

.container_projects_navigation li img {
  position: absolute;
  top: 0;
  left: 1200px; /* original - left:800px; */
  z-index: 0; /* original - z-index: -50; */
 -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease; 
}

/*NAV*/
.container_projects_navigation nav {
  width: 370px; /* navigation gauche - original - width:150px; */
  height: 800px;
  background: #fff;
}

.container_projects_navigation nav h1 {
  padding: 20px;
  color: #ccc;
  text-align: right;
  font-family: 'Lora', serif; text-align:left; font-size:30px;
}

/*UL*/
.container_projects_navigation ul {
  width: 800px;
  height: 500px;
  margin-left:-60px;
  list-style: none;
}

.container_projects_navigation li { margin-bottom:5px; }

.container_projects_navigation li a {
  z-index: 1;
  padding-left: 0px;
  margin-bottom: 30px;
  width: 300px;  /*  original - width:150px; */ 
  height: 45px;
  background: white;
  text-decoration: none;
  /*  original =   display: block; color: #444; font: 14px/30px Helvetica, Verdana, sans-serif; closer blackline: no margin-bottom, height was 50px */
  color:#000000; font-family: 'Lora', serif; text-align:left; font-size:30px; line-height:46px; font-weight:400; letter-spacing:1px; 
}

.container_projects_navigation li:nth-child(1) {
  padding-top: 50px;
}

.container_projects_navigation li a:hover {
  /* original - background: #eee; */ border-bottom: 1px solid currentColor; 
}

.container_projects_navigation li a:hover + img {
  /*  original - left: 0px; */ 
  left:570px;
}

/* start mobile standard --- seems useless?

@media only screen and (max-width : 1080px)
{
.container_projects_navigation { width:80%; }
.container_projects_navigation img { display:none; }


}

*/