* {
	margin: 0;
	padding: 0;
}

body {
background: #333;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 20px;
color: #222;
}

a {
text-decoration: none;
color: #99AECD;
}
a:hover {
text-decoration: underline;
color: #4F5D7F;
}

#wrap {
margin: 20px auto 10px auto;
width: 800px;
background: #fff;
padding: 10px;
border: 5px solid #000;
}

#header {
height: 160px;
background: #554d42 url(images/cover.png) no-repeat;
}
#header h1 {
font-size: 70px;
letter-spacing: 0px;
padding: 17px 0 0 10px;
color: black;
}
#header h1 a {
color: black;
text-decoration: none;
font-weight: 600;
letter-spacing: -7px;
}
#header h1 a:hover {
color: #fff;
}

#menu {
height: 50px;
line-height: 50px;
background: #B4C618;
}
#menu ul {
list-style-type: none;
padding-left: 30px;
}
#menu ul li {
display: block;
float: left;
}
#menu ul li a {
padding: 0 20px 0;
text-decoration: none;
font-weight: 600;
font-size: 12.5px;
color: #fff;
}
#menu ul li a:hover {
color: black;
text-decoration: none;
}

#left {
background: white;
text-align: center;
line-height: 40px;
}
#left a {
	color: black;
	line-height: 30px;
}
#left h2 {
	color: #B4C618;
}
#left h2 a {
	color: #B4C618;
	text-decoration: none;
}
#left ul li a {
	color: black;
}
#left ul li a:hover {
	color: black;
}

#content {
padding: 0 20px 20px 0;
}

div.menu-bar ul ul {
  display: none;
}

div.menu-bar li:hover > ul {
  display: block;
}

div.logo {
  text-align: center;
  background-image:url(images/logo2.PNG);
	background-position: center;
	width: 90px; height: 90px;
	margin: 3em auto;
	border: 10px solid #aaa;
	border-radius: 30px;
	transition: border-radius 2s, border-color 3s;
}
div.logo:hover {
  text-align: center;
  background-image:url(images/logo.PNG);
	background-position: center;
	border-color: #333;
	transform: rotate(1080deg);
	border-radius: 50%;
	transition: all 2s;
}
div.logo:after {
  text-align: center;
	content: "Garage Langlais";
	position: relative;
	top: 100px;
	left:0px;
	font-size: 1em;
	font-family: helvetica, arial, sans-serif;
	font-variant: small-caps;
	color:#888;
	opacity:0;
	transition: opacity 2s;
}
div.logo:hover:after {
  text-align: center;
	opacity: 1;
	transition: opacity 1s 1s;
}
.conteneur{
   border:solid 4px silver;
   border-radius:35px;
   width:594px;
   height:200px;
   margin:0px auto;
   overflow:hidden;
   position:relative;
   background-color:#EDEDED;
}

.parent{
   width:800px;
   height:400px;
   -webkit-perspective : 2500px;
   -moz-perspective : 2500px;
   -o-perspective : 2500px;
   -ms-perspective : 2500px;
   perspective : 2500px;
}

.div1{
   background-image:url(occasions/iseki0.jpg);
   -webkit-transform: translateX(400px) scale(0.7, 0.7) rotateY(0deg) skewY(0deg);
   -moz-transform: translateX(400px) scale(0.7, 0.7) rotateY(0deg) skewY(0deg);
   -o-transform: translateX(400px) scale(0.7, 0.7) rotateY(0deg) skewY(0deg);
   -ms-transform: translateX(400px) scale(0.7, 0.7) rotateY(0deg) skewY(Odeg);
}

.aspect-div{
   z-index:1;
   position:absolute;
   background-size:300px 300px;
   border:solid 0px black;
   display:inline-block;
   width:300px;
   height:300px;
   margin-top:-47px;
   opacity:0.8;
   cursor:pointer;
   background-image:url(fond1.jpg);
   -webkit-transition: all 800ms linear;
   -moz-transition: all 800ms linear;
   -o-transition: all 800ms linear;
   -ms-transition: all 800ms linear;
}

.div1:hover{
   z-index:10;
   opacity:1;
   -webkit-transform: translateX(360px);
   -moz-transform: translateX(360px);
   -o-transform: translateX(360px);
   -ms-transform: translateX(360px);
}
.div2{
   background-image:url(occasions/iseki1.jpg);
   -webkit-transform: translateX(340px) scale(0.7, 0.7) rotateY(0deg) skewY(0deg);
   -moz-transform: translateX(340px) scale(0.7, 0.7) rotateY(0deg) skewY(0deg);
   -o-transform: translateX(340px) scale(0.7, 0.7) rotateY(0deg) skewY(0deg);
   -ms-transform: translateX(340px) scale(0.7, 0.7) rotateY(0deg) skewY(0deg);
}

.div2:hover{
   z-index:10;
   opacity:1;
   -webkit-transform: translateX(300px);
   -moz-transform: translateX(300px);
   -o-transform: translateX(300px);
   -ms-transform: translateX(300px);
}
.div3{
   background-image:url(occasions/iseki2.jpg);
   -webkit-transform: translateX(200px) scale(0.7, 0.7) rotateY(60deg) skewY(0deg);
   -moz-transform: translateX(200px) scale(0.7, 0.7) rotateY(60deg) skewY(0deg);
   -o-transform: translateX(200px) scale(0.7, 0.7) rotateY(60deg) skewY(0deg);
   -ms-transform: translateX(200px) scale(0.7, 0.7) rotateY(60deg) skewY(0deg);
}

.div3:hover{
   z-index:10;
   opacity:1;
   -webkit-transform: translateX(160px);
   -moz-transform: translateX(160px);
   -o-transform: translateX(160px);
   -ms-transform: translateX(160px);
}
.div4{
   background-image:url(occasions/iseki3.jpg);
   -webkit-transform: translateX(140px) scale(0.7, 0.7) rotateY(0deg) skewY(0deg);
   -moz-transform: translateX(140px) scale(0.7, 0.7) rotateY(0deg) skewY(Odeg);
   -o-transform: translateX(140px) scale(0.7, 0.7) rotateY(0deg) skewY(0deg);
   -ms-transform: translateX(140px) scale(0.7, 0.7) rotateY(0deg) skewY(0deg);
}

.div4:hover{
   z-index:10;
   opacity:1;
   -webkit-transform: translateX(140px);
   -moz-transform: translateX(140px);
   -o-transform: translateX(140px);
   -ms-transform: translateX(140px);
}
.div5{
   background-image:url(occasions/iseki4.jpg);
   -webkit-transform: translateX(-60px) scale(0.7, 0.7) rotateY(0deg) skewY(0deg);
   -moz-transform: translateX(-60px) scale(0.7, 0.7) rotateY(0deg) skewY(0deg);
   -o-transform: translateX(-60px) scale(0.7, 0.7) rotateY(0deg) skewY(0deg);
   -ms-transform: translateX(-60px) scale(0.7, 0.7) rotateY(0deg) skewY(0deg);
}

.div5:hover{
   z-index:10;
   opacity:1;
   -webkit-transform: translateX(0px);
   -moz-transform: translateX(0px);
   -o-transform: translateX(0px);
   -ms-transform: translateX(0px);
}
.right {
border-left: 2px solid #B4C618;
padding:0 9px;
float: right;
width: 600px;
text-align: justify;
padding-top: 5px;
font-size: 17px;
}
.right h2 {
font-size: 25px;
font-weight: 50;
padding: 20px 0 7px 0;
}
.right h2 a {
text-decoration: none;
}
.right h2 a:hover {
}

.left {
float: left;
width: 160px;
padding-top: 10px;
}
.left h2 {
margin: 10px 0 0 0;
padding-left: 10px;
height: 24px;
line-height: 24px;
color: #7988AF;
font-size: 15px;
}
.left ul {
padding: 10px 0 15px 30px;
list-style-type: square;
color: #99AECD;
}
.left ul li a {
text-decoration: none;
font-weight: 600;
}
.left ul li a:hover {

}

#footer {
text-align: center;
font-size: 11px;
color: #aaa;
}
#footer a { color: #aaa; }
#footer a:hover { color: #111; }