@charset "UTF-8";

html {
	min-height: 100%;   background: #000000; /* Old browsers */
background: url("images/background1440.jpg");
background-size: cover; 
}

	
body {
	padding-top : 0px;
	margin-top: 20px;
	font-family: 'Arial', Verdana, Arial, Helvetica, sans-serif;
	font-size: small;
	
}

header, section, footer, aside, nav, article, figure {
	display: block;
}

/*liens*/

a img 
{
	border: none;
}

a 
{
	text-decoration: none;
	color:#adadad;
	padding : 0;
	margin : 0;
}


a:hover {	
	color: #6d6f71;
	padding : 0;
	margin : 0;
}




/*liens*/

#container {
	width:1024px;
	height:850px;
	border-radius:5px;
	overflow : hidden;
	margin: auto;
}

#logo {
	display:block;
	background-image : url("images/logo.png");
	position: relative;
	width: 167px;
	height : 167px;
	margin: -10px 429px 0 429px;
}

#logo a{
	display:block;
	width: 167px;
	height :100px;
	

}

#logo:hover{
	display:block;
	background-image : url("images/logo-on.png");
	position: relative;
	width: 167px;
	height : 167px;
	margin: -10px 429px 0 429px;
}

/*liste*/
ul {
	margin:0;
	padding:0;
}


#menu ul li{
	display: inline-block;
}

#menu ul a {
	display:block;
	padding: 0 33px;
	color:#888888;	;
}

#menu ul a:hover 
{
	
	color: #2b646d;	
}

#index  ul li{

	width : 160px;
	height :150px;
}

#index  li{

	display: inline-block;
	width : 160px;
	height : 150px;
}

#index li a {
	display:block;
	width : 160px;
	height : 150px;
	
}

#index li a :hover{
	width : 160px;
	height : 150px;
	background-color:blue;	
}

#index img {
	border: none;
	padding : 0;
	margin : 0;
}


#img1 {
	background-image :  url("images/img-accueil/mini-enseigne.jpg");
}
#img2 {
	background-image :  url("images/img-accueil/mini-logo.jpg");
}
#img3 {
	background-image :  url("images/img-accueil/mini-mac.jpg");
}
#img4{
	background-image :  url("images/img-accueil/mini-patagonie.jpg");
}
#img5{
	background-image :  url("images/img-accueil/mini-voiture.jpg");
}
#img6{
	background-image :  url("images/img-accueil/mini-pharaon.jpg");
}
#img7{
	background-image :  url("images/img-accueil/mini-packaging.jpg");
}
#img8{
	background-image :  url("images/img-accueil/mini-photo.jpg");
}
#img9{
	background-image :  url("images/img-accueil/mini-svs.jpg");
}
#img10{
	background-image :  url("images/img-accueil/mini-lumieres.jpg");
}





#img1 a:hover {
	background-image :  url("images/img-accueil/mini-enseigne-noir.jpg");
}
#img2 a:hover {
	background-image :  url("images/img-accueil/mini-logo-noir.jpg");
}
#img3 a:hover {
	background-image :  url("images/img-accueil/mini-mac-noir.jpg");
}
#img4 a:hover {
	background-image :  url("images/img-accueil/mini-patagonie-noir.jpg");
}
#img5 a:hover {
	background-image :  url("images/img-accueil/mini-voiture-noir.jpg");
}
#img6 a:hover {
	background-image :  url("images/img-accueil/mini-pharaon-noir.jpg");
}
#img7 a:hover {
	background-image :  url("images/img-accueil/mini-packaging-noir.jpg");
}
#img8 a:hover {
	background-image :  url("images/img-accueil/mini-photo-noir.jpg");
}
#img9 a:hover {
	background-image :  url("images/img-accueil/mini-svs-noir.jpg");
}
#img10 a:hover {
	background-image :  url("images/img-accueil/mini-lumieres-noir.jpg");
}


/*liste*/

p {
	color:rgba(100,100,100,0.7);
	font-size:small;
}


h1 {
	font-size: small;
	font-weight: bold;
	color:rgba(255,255,255,0.5);
}

#menu {
	font-size: small;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	margin-bottom:50px;
	height: 17px;
	background-color:none;
	text-transform: uppercase;
	text-align: center;
	color: #888888;
	
}

.menu2 {

	margin-top:50px;
	margin-left: 90px;
	width:auto;
	height:auto;
	background-color : none;
}

.menu2 img{
	
	margin-right:10px;

	
}



.copy {
	float: right;
	margin :25px 10px 0 0;
	padding :0;
	width:auto;
	height:auto;
	background-color :none;
}

.copy a
{
color: #ffffff;
}

.copy a:hover
{
	color: #000000;
}


#lien
{	
opacity: 0.7;
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
filter: alpha(opacity=70);
}

#lien:hover 
{	
opacity: 1;
-moz-opacity: 1;
-khtml-opacity: 1;
filter: alpha(opacity=100);
}




#contenu{
	padding : 0;
	margin-top:70px ;
	width:1024px;
	height:410px;
	overflow: auto;
}

#contenu2{
	margin-left:100px;
	margin-top:0px;
	width:823px;
	height:300px;

	border-radius: 3px 3px 3px 3px;
	overflow: auto;
	background-image: url("images/experience.jpg");
	-moz-box-shadow: 0 0 5px #888;
    -webkit-box-shadow: 0 0 5px#888;
    box-shadow: 0 0 5px #888;
}

#contenu3{
	margin-left:100px;
	margin-top:0px;
	width:823px;
	height:300px;
	border-radius: 3px 3px 3px 3px;
	overflow: auto;
	background-image: url("images/web.jpg");
	-moz-box-shadow: 0 0 5px #888;
    -webkit-box-shadow: 0 0 5px#888;
    box-shadow: 0 0 5px #888;
}

#contenu4{
	margin-left:100px;
	margin-top:0px;
	width:823px;
	height:300px;
	border-radius: 3px 3px 3px 3px;

	overflow: auto;
	background-image:url("images/contact.jpg");
	-moz-box-shadow: 0 0 5px #888;
    -webkit-box-shadow: 0 0 5px#888;
    box-shadow: 0 0 5px #888;
}

#contenu5{
	margin-left:100px;
	margin-top:0px;
	width:823px;
	height:300px;
	border-radius: 3px 3px 3px 3px;

	overflow: auto;

	-moz-box-shadow: 0 0 5px #888;
    -webkit-box-shadow: 0 0 5px#888;
    box-shadow: 0 0 5px #888;
}

#plan{
	float :left;
	margin-left:20px;
	margin-top:20px;
	width:420px;
	height:260px;
	border-radius: 3px 3px 3px 3px
}



#anim{
	margin-left:100px;
	margin-top:0px;
	width:823px;
	height:300px;
	border-radius: 3px 3px 3px 3px;
}

#anim2{
	padding : 6px;
	margin-left:98px;
	margin-top:0px;
	width:815px;
	height:303px;
	border-radius: 3px 3px 3px 3px;
	-moz-box-shadow: 0 0 5px #888;
    -webkit-box-shadow: 0 0 5px#888;
    box-shadow: 0 0 5px #888;
    background-color : #fff;
   
}

#anim3{
	padding : 6px;
	margin-left:98px;
	margin-top:0px;
	width:818px;
	height:303px;
	border-radius: 3px 3px 3px 3px;
	-moz-box-shadow: 0 0 5px #888;
    -webkit-box-shadow: 0 0 5px#888;
    box-shadow: 0 0 5px #888;
    background-color : #fff;
   
}


#texte {
	margin-right:10px;
    margin-top:15px;
	width: 300px;
	height:275px;
	text-align: justify;
	padding : 0px 15px;
	border-radius: 4px;
	overflow: auto;
	background-color:none;

}

#textecopy {
	margin:10px;
	width: 780px;
	height:275px;
	text-align: justify;
	padding : 0px 15px;
	border-radius: 4px;
	overflow: auto;
	background-color:none;

}


#texte2 {
	margin-left:450px;
    margin-top:20px;
	width: 320px;
	height:275px;
	text-align: justify;
	padding : 0px 15px;
	border-radius: 4px;
	overflow: auto;
	background-color:none;
	
}

#texte3 {
	margin-left:490px;
    margin-top:15px;
	width: 300px;
	height:275px;
	text-align: justify;
	padding : 0px 15px;
	border-radius: 4px;
	overflow: auto;
	background-color:none;

}

a.info {
position: relative;

}



a.info span {
   display: none; /* On masque l'infobulle. */
}
a.info:hover {
   background: none; /* Correction d'un bug d'Internet Explorer. */
   z-index: 500; /* On définit une valeur pour l'ordre d'affichage. */
 
   /* cursor: help; /* On change le curseur par défaut par un curseur d'aide. */
}
a.info:hover span {
   display: inline; /* On affiche l'infobulle. */
   position: absolute;
   padding: 4px;
 
   white-space: nowrap; /* On change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non désiré. */
 
   top: 20px; /* On positionne notre infobulle. */
   left: 8px;
 
   background:none;
   
   width: auto;
   height: auto;
 
   color:rgba(255,255,255,0.6);;
   

 
    
}