body
{
background-color: #F2F2F3;
background-image: url(img/hexa-gone.png);
background-attachment: fixed;
}

#menu
 {
display: inline-block;
width: 900px;
height: 100px;
font-size: 15pt;
list-style-type: none;
margin: center;
margin-top: -20px;
margin-left: -40px;
} 

li
{
margin: center;
display: inline-block;
vertical-align: middle;
padding: 25px;
}

.menu
{color: white;}

.menu:hover
{color: #239292;}

nav
{
list-style-type: none;
text-decoration: none;
display: inline-block;
position: fixed;
left: 0px;
top: 0px;
height: 100px;
width: 100%; /* On a indiqué une largeur (obligatoire) */
margin: center; /* bloc centré avec auto */
text-align: center;
background-color: #116669;
z-index: 4;
}

section
{
max-width: 900px;
margin-left: auto;
margin-right: auto;
margin-top: 150px;
text-align: center;
padding: 30px;
font-family: futura;
font-size: 13pt;
text-decoration: none;
color: grey;
background-color: white;
overflow: hidden;
}

p
{

text-decoration: none;
font-family: futura;
font-size: 8pt;
color: white;

}

#portfolio a
{
font-family: futura;
text-decoration: none;
color: white;
}

a
{
font-family: futura;
text-decoration: none;
color: grey;
}

a:hover
{
 color: #116669;
}

@font-face
{
font-family: 'futura';
src: url('futura.ttf') format('truetype'),
	 url('futura.eot') format('eot'),
	 url('futura.svg') format('svg'),
	 url('futura.woff') format('woff');	
}	

img
{
border: none;
max-width: 100%;
max-height: 100%
}

.titre
{
font-family: futura;
font-size: 14pt;
color: #116669;
}

.titrebandeau
{
font-family: futura;
font-size: 17pt;
color: white;
padding-top: 5px;
padding-bottom: 5px;
background-color:#239292;
text-align: center;
}

.titrebandeau1
{
font-family: futura;
font-size: 17pt;
color: white;
padding-top: 5px;
padding-bottom: 5px;
width: 50%;
float: left;
background-color: #239292;
text-align: center;
}

.titrebandeau2
{
font-family: futura;
font-size: 17pt;
color: white;
padding-top: 5px;
padding-bottom: 5px;
width: 50%;
float: right;
background-color: grey;
text-align: center;
}

.grostitre
{
overflow: hidden;
font-family: futura;
font-size: 22pt;
text-decoration: none;
color: grey;
}

.soustitre
{
overflow: hidden;
font-family: futura;
font-size: 11pt;
text-decoration: none;
color: grey;
text-align: center;
}

#menu-book a
{
font-family: futura;
font-size: 11pt;
text-decoration: none;
color: grey;
}
#menu-book a:hover
{
 color: #116669;
}

.work {
display: inline-block;
padding: 25px;
height: 100px;
width: 100px;
background: #116669;
overflow: hidden;
position:relative;
 }
 
 .work img {
        -moz-transition: all 1s ease-in-out;
   -webkit-transition: all1s ease-in-out;
   transition: all 1s ease-in-out;
   -o-transition: all 1s ease-in-out;
   -ms-transition: all 1s ease-in-out;
    position:absolute;
   top:0px; left:3px;
   }
 
.work:hover img {
   -moz-transform: translate(100px, 100px);/*XX=largeur image pour déplacement horizontal; YY=hauteur image pour déplacement vertical*/
   -webkit-transform: translate(100px, 100px);
   -o-transform: translate(100px, 100px);
   -ms-transform: translate(100px, 100px);
   transform: translate(100px, 100px);
}
    .work p {
    padding:5px;
    margin:0px;
    text-align:justify;
    }