/* je centre le titre de la page*/
h1 { text-align: center }

/* 1-je dessine en premier ce qui est statique au fond destiné a être couvert en partie*/



.pied1 {
position:fixed;
margin-top: 18%;
margin-left: 11%;
    width: 0.9%;
    height: 5%;
    background: #c9c0bb;
}

.piedpencher1{
position:fixed;
margin-top: 18%;
margin-left: 14%;
    width: 0.9%;
    height: 4%;
    background: #c9c0bb;
	-webkit-transform:skew(30deg);
	-moz-transform:skew(30deg);
	-o-transform:skew(30deg);
}

.piedpencher2{
position:fixed;
margin-top: 18%;
margin-left: 8%;
    width: 0.9%;
    height: 4%;
    background: #c9c0bb;
	-webkit-transform:skew(150deg);
	-moz-transform:skew(150deg);
	-o-transform:skew(150deg);
}
/*2- je place en second les différentes hauteur que j'ajuste par élément avec un top-margin*/

.position1{
	margin-top: 5%;
	}
.position2{
	margin-top: 25%;
	}
.position3{
	margin-top: 40%;
	}
.position4{
	margin-top: 7%;
	}


.key1{
position:fixed;
  background:#DBA901;
border-radius: 50%;
	width: 4%;
	height: 3%; 
    -webkit-border-radius: 50%/50%;
    
    border-radius: 50%/50%;    
	margin-left: 6.5%;
	margin-top: 2%;
  border:1.5px solid #679403;
  cursor:pointer;
}
/*je fais bouger key1 */
.key1:active{
    background: #B8B6B6;/*
  -webkit-transform:perspective(1px) rotatey(0.1deg);
  transform:perspective(1px) rotatey(0.1deg);*/
	margin-left: 5.5%;
}

.key2{
position:fixed;
  background:#DBA901;
border-radius: 50%;
	width: 5%;
	height: 3%; 
    -webkit-border-radius: 50%/50%;    
    border-radius: 50%/50%;
	margin-left: 11%;
	margin-top: 2%;
  border:1.5px solid #679403;
  cursor:pointer;
}

.key2:active{
    background: #B8B6B6;/*
  -webkit-transform:perspective(1%) rotateX(-10deg);
  transform:perspective(1%) rotateX(-10deg);*/
	margin-left: 12%;
}

.key3{
position:fixed;
  background:#DBA901;
border-radius: 50%;
	width: 5.1%;
	height: 3%; 
    -webkit-border-radius: 50%/50%;
    
    border-radius: 50%/50%;
    border-radius: 50%/50%;
    border-radius: 50%/50%;
	margin-left: 13.5%;
	margin-top: 4.2%;
  border:1.5px solid #679403;
  cursor:pointer;
}

.key3:active{
    background: #B8B6B6;/*
  -webkit-transform:perspective(1%) rotateX(-10deg);
  transform:perspective(1%) rotateX(-10deg);*/
	margin-left: 12.5%;
}

.key4{
position:fixed;
  background:#DBA901;
border-radius: 50%;
	width: 5.2%;
	height: 3%; 
    -webkit-border-radius: 50%/50%;
    
    border-radius: 50%/50%;
	margin-left: 16%;
	margin-top: 6.5%;
  border:1.5px solid #679403;
  cursor:pointer;
}

.key4:active{
    background: #B8B6B6;/*
  -webkit-transform:perspective(1%) rotateX(-10deg);
  transform:perspective(1%) rotateX(-10deg);*/
	margin-left: 15%;
}

.key5{
position:fixed;
  background:#DBA901;
border-radius: 50%;
	width: 5.3%;
	height: 3%; 
    -webkit-border-radius: 50%/50%;
    
    border-radius: 50%/50%;
	margin-left: 18.5%;
	margin-top: 8.8%;
  border:1.5px solid #679403;
  cursor:pointer;
}


.key5:active{
    background: #B8B6B6;/*
  -webkit-transform:perspective(1%) rotateX(-10deg);
  transform:perspective(1%) rotateX(-10deg);*/
	margin-left: 17.5%;
}

.key6{
position:fixed;
  background:#DBA901;
border-radius: 50%;
	width: 5.4%;
	height: 3%; 
    -webkit-border-radius: 50%/50%;
    
    border-radius: 50%/50%;
	margin-left: 21%;
	margin-top: 11%;
  border:1.5px solid #679403;
  cursor:pointer;
}

.key6:active{
    background: #B8B6B6;/*
  -webkit-transform:perspective(1%) rotateX(-10deg);
  transform:perspective(1%) rotateX(-10deg);*/
	margin-left: 20%;
}

.key7{
position:fixed;
  background:#DBA901;
border-radius: 50%;
	width: 5.5%;
	height: 3%; 
    -webkit-border-radius: 50%/50%;
    
    border-radius: 50%/50%;
	margin-left: 23.5%;
	margin-top: 13.2%;
  border:1.5px solid #679403;
  cursor:pointer;
}

.key7:active{
    background: #B8B6B6;/*
  -webkit-transform:perspective(1%) rotateX(-10deg);
  transform:perspective(1%) rotateX(-10deg);*/
	margin-left: 22.5%
}
.key8{
position:fixed;
  background:#DBA901;
border-radius: 50%;
	width: 5.6%;
	height: 3%; 
    -webkit-border-radius: 50%/50%;
    
    border-radius: 50%/50%;
	margin-left: 26%;
	margin-top: 15.4%;
  border:1.5px solid #679403;
  cursor:pointer;
}


/*je fais bouger sur la droite*/
.key8:active{
    background: #B8B6B6;/*
  -webkit-transform:perspective(1%) rotateX(-10deg);
  transform:perspective(1%) rotateX(-10deg);*/
	margin-left: 25%;
}


.key9{
position:fixed;
  background:#DBA901;
border-radius: 50%;
	width: 5.8%;
	height: 3%; 
    -webkit-border-radius: 50%/50%;
    
    border-radius: 50%/50%;
	margin-left: 28.5%;
	margin-top: 17.6%;
  border:1.5px solid #679403;
  cursor:pointer;
}

/*je fais bouger key9 sur la droite*/
.key9:active{
    background: #B8B6B6;/*
  -webkit-transform:perspective(1%) rotateX(-10deg);
  transform:perspective(1%) rotateX(-10deg);*/
	margin-left: 27.5%;
}

.key10{
position:fixed;
  background:#DBA901;
border-radius: 50%;
	width: 6%;
	height: 3%; 
    -webkit-border-radius: 50%/50%;
    
    border-radius: 50%/50%;
	margin-left: 31%;
	margin-top: 19.8%;
  border:1.5px solid #679403;
  cursor:pointer;
}

.key10:active{
    background: #B8B6B6;/*
  -webkit-transform:perspective(1%) rotateX(-10deg);
  transform:perspective(1%) rotateX(-10deg);*/
	margin-left: 30%;

}

.key11{
position:fixed;
  background:#DBA901;
border-radius: 50%;
	width: 6.1%;
	height: 3%; 
    -webkit-border-radius: 50%/50%;
    
    border-radius: 50%/50%;
	margin-left: 33.5%;
	margin-top: 22%;
  border:1.5px solid #679403;
  cursor:pointer;
}


.key11:active{
    background: #B8B6B6;/*
  -webkit-transform:perspective(1%) rotateX(-10deg);
  transform:perspective(1%) rotateX(-10deg);*/
	margin-left: 32.5%;

}

.key12{
position:fixed;
  background:#DBA901;
border-radius: 50%;
	width: 6.2%;
	height: 3%; 
    -webkit-border-radius: 50%/50%;
    
    border-radius: 50%/50%;
	margin-left: 36%;
	margin-top: 24.2%;
  border:1.5px solid #679403;
  cursor:pointer;
}

.key12:active{
    background: #B8B6B6;/*
  -webkit-transform:perspective(1%) rotateX(-10deg);
  transform:perspective(1%) rotateX(-10deg);*/
	margin-left: 35%;

}




.key13{
position:fixed;
  background:#DBA901;
border-radius: 50%;
	width: 6.3%;
	height: 3%; 
    -webkit-border-radius: 50%/50%;
    
    border-radius: 50%/50%;
	margin-left: 37.5%;
	margin-top: 26.4%;
  border:1.5px solid #679403;
  cursor:pointer;
}

.key13:active{
    background: #B8B6B6;/*
  -webkit-transform:perspective(1%) rotateX(-10deg);
  transform:perspective(1%) rotateX(-10deg);*/
	margin-left: 36.5%;

}

.key14{
position:fixed;
  background:#DBA901;
border-radius: 50%;
	width: 6.4%;
	height: 3%; 
    -webkit-border-radius: 50%/50%;
    
    border-radius: 50%/50%;
	margin-left: 39%;
	margin-top: 28.6%;
  border:1.5px solid #679403;
  cursor:pointer;
}

.key14:active{
    background: #B8B6B6;/*
  -webkit-transform:perspective(1%) rotateX(-10deg);
  transform:perspective(1%) rotateX(-10deg);*/
	margin-left: 38%;

}

.key15{
position:fixed;
  background:#DBA901;
border-radius: 50%;
	width: 6.5%;
	height: 3%; 
    -webkit-border-radius: 50%/50%;
    
    border-radius: 50%/50%;
	margin-left: 40.5%;
	margin-top: 30.8%;
  border:1.5px solid #679403;
  cursor:pointer;
}

.key15:active{
    background: #B8B6B6;/*
  -webkit-transform:perspective(1%) rotateX(-10deg);
  transform:perspective(1%) rotateX(-10deg);*/
	margin-left: 39.5%;

}


.key16{
position:fixed;
  background:#DBA901;
border-radius: 50%;
	width: 6.6%;
	height: 3%; 
    -webkit-border-radius: 50%/50%;
    
    border-radius: 50%/50%;
	margin-left: 42%;
	margin-top: 33%;
  border:1.5px solid #679403;
  cursor:pointer;
}

.key16:active{
    background: #B8B6B6;/*
  -webkit-transform:perspective(1%) rotateX(-10deg);
  transform:perspective(1%) rotateX(-10deg);*/
	margin-left: 41%;

}

.key17{
position:fixed;
  background:#DBA901;
border-radius: 50%;
	width: 6.7%;
	height: 3%; 
    -webkit-border-radius: 50%/50%;
    
    border-radius: 50%/50%;    
	margin-left: 43.5%;
	margin-top: 35.2%;
  border:1.5px solid #679403;
  cursor:pointer;
}
/*je fais bouger key1 */
.key17:active{
    background: #B8B6B6;/*
  -webkit-transform:perspective(1%) rotateX(-10deg);
  transform:perspective(1%) rotateX(-10deg);*/
	margin-left: 42.5%;
}

.key18{
position:fixed;
  background:#DBA901;
border-radius: 50%;
	width: 6.8%;
	height: 3%; 
    -webkit-border-radius: 50%/50%;
    
    border-radius: 50%/50%;    
	margin-left: 45%;
	margin-top: 37.4%;
  border:1.5px solid #679403;
  cursor:pointer;
}
/*je fais bouger key1 vers le bas*/
.key18:active{
    background: #B8B6B6;/*
  -webkit-transform:perspective(1%) rotateX(-10deg);
  transform:perspective(1%) rotateX(-10deg);*/
	margin-left: 44%;
}

.key19{
position:fixed;
  background:#DBA901;
border-radius: 50%;
	width: 6.9%;
	height: 3%; 
    -webkit-border-radius: 50%/50%;
    
    border-radius: 50%/50%;    
	margin-left: 46.5%;
	margin-top: 39.6%;
  border:1.5px solid #679403;
  cursor:pointer;
}
/*je fais bouger key1 vers le bas*/
.key19:active{
    background: #B8B6B6;/*
  -webkit-transform:perspective(1%) rotateX(-10deg);
  transform:perspective(1%) rotateX(-10deg);*/
	margin-left: 45.5%;
}

.key20{
position:fixed;
  background:#DBA901;
border-radius: 50%;
	width: 7%;
	height: 3%; 
    -webkit-border-radius: 50%/50%;
    
    border-radius: 50%/50%;    
	margin-left: 48%;
	margin-top: 41.8%;
  border:1.5px solid #679403;
  cursor:pointer;
}
/*je fais bouger key1 vers le bas*/
.key20:active{
    background: #B8B6B6;/*
  -webkit-transform:perspective(1%) rotateX(-10deg);
  transform:perspective(1%) rotateX(-10deg);*/
	margin-left: 47%;
}

.key21{
position:fixed;
  background:#DBA901;
border-radius: 50%;
	width: 7.1%;
	height: 3%; 
    -webkit-border-radius: 50%/50%;
    
    border-radius: 50%/50%;    
	margin-left: 49.5%;
	margin-top: 44%;
  border:1.5px solid #679403;
  cursor:pointer;
}
/*je fais bouger key1 vers le bas*/
.key21:active{
    background: #B8B6B6;/*
  -webkit-transform:perspective(1%) rotateX(-10deg);
  transform:perspective(1%) rotateX(-10deg);*/
	margin-left: 48.5%;
}


.key22{
position:fixed;
  background:#DBA901;
border-radius: 50%;
	width: 7.2%;
	height: 3%; 
    -webkit-border-radius: 50%/50%;
    
    border-radius: 50%/50%;    
	margin-left: 51%;
	margin-top: 46.2%;
  border:1.5px solid #679403;
  cursor:pointer;
}
/*je fais bouger key1 vers le bas*/
.key22:active{
    background: #B8B6B6;/*
  -webkit-transform:perspective(1%) rotateX(-10deg);
  transform:perspective(1%) rotateX(-10deg);*/
	margin-left: 50%;
}

.key23{
position:fixed;
  background:#DBA901;
border-radius: 50%;
	width: 7.3%;
	height: 3%; 
    -webkit-border-radius: 50%/50%;
    
    border-radius: 50%/50%;    
	margin-left: 53%;
	margin-top: 48.4%;
  border:1.5px solid #679403;
  cursor:pointer;
}
/*je fais bouger key1 vers le bas*/
.key23:active{
    background: #B8B6B6;/*
  -webkit-transform:perspective(1%) rotateX(-10deg);
  transform:perspective(1%) rotateX(-10deg);*/
	margin-left: 52%;
}


.key24{
position:fixed;
  background:#DBA901;
border-radius: 50%;
	width: 7.4%;
	height: 3%; 
    -webkit-border-radius: 50%/50%;
    
    border-radius: 50%/50%;    
	margin-left: 55%;
	margin-top: 50.6%;
  border:1.5px solid #679403;
  cursor:pointer;
}
/*je fais bouger key1 vers le bas*/
.key24:active{
    background: #B8B6B6;/*
  -webkit-transform:perspective(1%) rotateX(-10deg);
  transform:perspective(1%) rotateX(-10deg);*/
	margin-left: 54%;
}


.key25{
position:fixed;
  background:#DBA901;
border-radius: 50%;
	width: 7.5%;
	height: 4%; 
    -webkit-border-radius: 50%/50%;
    
    border-radius: 50%/50%;    
	margin-left: 61%;
	margin-top: 48%;
  border:1.5px solid #679403;
  cursor:pointer;
}
/*je fais bouger key1 vers le bas*/
.key25:active{
    background: #B8B6B6;/*
  -webkit-transform:perspective(1%) rotateX(-10deg);
  transform:perspective(1%) rotateX(-10deg);*/
	margin-left: 62%;
}


.key26{
position:fixed;
  background:#DBA901;
border-radius: 50%;
	width: 7.5%;
	height: 4.1%; 
    -webkit-border-radius: 50%/50%;
    
    border-radius: 50%/50%;    
	margin-left: 61.5%;
	margin-top: 44%;
  border:1.5px solid #679403;
  cursor:pointer;
}
/*je fais bouger key1 vers le bas*/
.key26:active{
    background: #B8B6B6;/*
  -webkit-transform:perspective(1%) rotateX(-10deg);
  transform:perspective(1%) rotateX(-10deg);*/
	margin-left: 62.5%;
}

.key27{
position:fixed;
  background:#DBA901;
border-radius: 50%;
	width: 7.5%;
	height: 4.2%; 
    -webkit-border-radius: 50%/50%;
    
    border-radius: 50%/50%;    
	margin-left: 62%;
	margin-top: 40%;
  border:1.5px solid #679403;
  cursor:pointer;
}
/*je fais bouger key1 vers le bas*/
.key27:active{
    background: #B8B6B6;/*
  -webkit-transform:perspective(1%) rotateX(-10deg);
  transform:perspective(1%) rotateX(-10deg);*/
	margin-left: 63%;
}

.key28{
position:fixed;
  background:#DBA901;
border-radius: 50%;
	width: 7.5%;
	height: 4.2%; 
    -webkit-border-radius: 50%/50%;
    
    border-radius: 50%/50%;    
	margin-left: 62.5%;
	margin-top: 36%;
  border:1.5px solid #679403;
  cursor:pointer;
}
/*je fais bouger key1 vers le bas*/
.key28:active{
    background: #B8B6B6;/*
  -webkit-transform:perspective(1%) rotateX(-10deg);
  transform:perspective(1%) rotateX(-10deg);*/
	margin-left: 63.5%;
}

.key29{
position:fixed;
  background:#DBA901;
border-radius: 50%;
	width: 7.5%;
	height: 4.3%; 
    -webkit-border-radius: 50%/50%;
    
    border-radius: 50%/50%;    
	margin-left: 63%;
	margin-top: 32%;
  border:1.5px solid #679403;
  cursor:pointer;
}
/*je fais bouger key1 vers le bas*/
.key29:active{
    background: #B8B6B6;/*
  -webkit-transform:perspective(1%) rotateX(-10deg);
  transform:perspective(1%) rotateX(-10deg);*/
	margin-left: 64%;
}

.key30{
position:fixed;
  background:#DBA901;
border-radius: 50%;
	width: 7.5%;
	height: 4.4%; 
    -webkit-border-radius: 50%/50%;
    
    border-radius: 50%/50%;    
	margin-left: 66%;
	margin-top: 28%;
  border:1.5px solid #679403;
  cursor:pointer;
}
/*je fais bouger key1 vers le bas*/
.key30:active{
    background: #B8B6B6;/*
  -webkit-transform:perspective(1%) rotateX(-10deg);
  transform:perspective(1%) rotateX(-10deg);*/
	margin-left: 67%;
}


.key31{
position:fixed;
  background:#DBA901;
border-radius: 50%;
	width: 7.5%;
	height: 4.5%; 
    -webkit-border-radius: 50%/50%;
    
    border-radius: 50%/50%;    
	margin-left: 69%;
	margin-top: 24%;
  border:1.5px solid #679403;
  cursor:pointer;
}
/*je fais bouger key1 vers le bas*/
.key31:active{
    background: #B8B6B6;/*
  -webkit-transform:perspective(1%) rotateX(-10deg);
  transform:perspective(1%) rotateX(-10deg);*/
	margin-left: 70%;
}

.key32{
position:fixed;
  background:#DBA901;
border-radius: 50%;
	width: 7.5%;
	height: 4.6%; 
    -webkit-border-radius: 50%/50%;
    
    border-radius: 50%/50%;    
	margin-left: 72%;
	margin-top: 20%;
  border:1.5px solid #679403;
  cursor:pointer;
}
/*je fais bouger key1 vers le bas*/
.key32:active{
    background: #B8B6B6;/*
  -webkit-transform:perspective(1%) rotateX(-10deg);
  transform:perspective(1%) rotateX(-10deg);*/
	margin-left: 73%;
}

.key33{
position:fixed;
  background:#DBA901;
border-radius: 50%;
	width: 7.5%;
	height: 4.7%; 
    -webkit-border-radius: 50%/50%;
    
    border-radius: 50%/50%;    
	margin-left: 75%;
	margin-top: 16%;
  border:1.5px solid #679403;
  cursor:pointer;
}
/*je fais bouger key1 vers le bas*/
.key33:active{
    background: #B8B6B6;/*
  -webkit-transform:perspective(1%) rotateX(-10deg);
  transform:perspective(1%) rotateX(-10deg);*/
	margin-left: 76%;
}

.key34{
position:fixed;
  background:#DBA901;
border-radius: 50%;
	width: 7.5%;
	height: 4.7%; 
    -webkit-border-radius: 50%/50%;
    
    border-radius: 50%/50%;    
	margin-left: 76%;
	margin-top: 12%;
  border:1.5px solid #679403;
  cursor:pointer;
}
/*je fais bouger key1 vers le bas*/
.key34:active{
    background: #B8B6B6;/*
  -webkit-transform:perspective(1%) rotateX(-10deg);
  transform:perspective(1%) rotateX(-10deg);*/
	margin-left: 77%;
}

.key35{
position:fixed;
  background:#DBA901;
border-radius: 50%;
	width: 7.5%;
	height: 4.7%; 
    -webkit-border-radius: 50%/50%;
    
    border-radius: 50%/50%;    
	margin-left: 77%;
	margin-top: 7%;
  border:1.5px solid #679403;
  cursor:pointer;
}
/*je fais bouger key1 vers le bas*/
.key35:active{
    background: #B8B6B6;/*
  -webkit-transform:perspective(1%) rotateX(-10deg);
  transform:perspective(1%) rotateX(-10deg);*/
	margin-left: 78%;
}

.key36{
position:fixed;
  background:#DBA901;
border-radius: 50%;
	width: 12%;
	height: 17%; 
    -webkit-border-radius: 50%/50%;
    
    border-radius: 50%/50%;    
	margin-left: 85%;
	margin-top: 4%;
  border:1.5px solid #679403;
  cursor:pointer;
}
/*je fais bouger key1 vers le bas*/
.key36:active{
    background: #B8B6B6;/*
  -webkit-transform:perspective(1%) rotateX(-10deg);
  transform:perspective(1%) rotateX(-10deg);*/
	margin-left: 87%;
}

.reflet{
background-image:linear-gradient(62deg, white, red);
}

.refletjaune{
background-image:linear-gradient(62deg, white, #DBA901);
}


.menu a {
  display:block;
  color: #fff;
  text-decoration:none;
}
.menu > li,
.menu > li li {
  position: relative;
  display:inline-block;
  padding: 6px 15px;
  background-color: #777;
  background-image: linear-gradient(#aaa, #888 50%, #777 50%,#999);
}
.menu > li li { background: transparent none; }
.menu > li li a { color: #444; }
.menu > li li:hover { background:#eee; }
.menu > li:first-child {
  border-right: 1px solid #777;
  border-radius: 8px 0 0 8px;
}
.menu > li + li {
  border-left: 1px solid #aaa;
  border-right: 1px solid #777;
}
.menu > li:last-child {
  border-right:0;
  border-left: 1px solid #aaa;
  border-radius: 0 8px 8px 0 ;
}
.menu > li:hover {
  background-color: #999;
  background-image: linear-gradient(#ccc, #aaa 50%, #999 50%,#bbb);
}

.menu ul {
  position: absolute;
  top: 2em; left:0;
  max-height:0em;
  margin:0; padding:0;
  background-color:#ddd;
  background-image: linear-gradient(#fff,#ddd);
  overflow:hidden;
  transition: 1s max-height 0.3s;
  border-radius: 0 0 8px 8px;
}

.menu > li:hover ul {

  max-height:13em;
}