/* planchette */
#planchette{
position: absolute; 
top: 25%; 
left: 0%; 
z-index: 1000;
padding: 3%;
opacity: 0;
width: 100%; 
height: 25%;
cursor:move;
transition: opacity 3s linear, left 3s ease-out;
}
#planchette img{
  width:60%;
}
/* bouton stop rotate */
.button-stop-rotate {
  border-radius:40%;opacity:0.5;
}
/* phare */
#phare{
	position:absolute; 
	top: 0%; 
	right: 3%; 
	z-index: 900;
	width:30%; 
	height:100%;
}
.basePhare{
	background:repeating-radial-gradient(ellipse at 50% 60%,rgba(150,100,10,0),rgba(150,100,10,0) 50%,rgba(150,100,10,0) ) top left no-repeat;
	border-radius: 50%; 
	width:100%; 
	height: 5%;
	position: absolute;
	top: 50%;
	transition: background 0.5s linear;
}
.conteneurb{
	perspective: 800px;
	width:100%;
	height:100%;
    font-family: monospace;
    position:relative;
}
.pillier{
	position: absolute;
    width: 25%;
    height:50%;
    left:42%; top:3%;
    margin: 0 auto;
    overflow: hidden;
    /*transition: height 1s linear;*/
}
.pillier > div{
    width: 100%;
    height: 100%;
    /*background:linear-gradient(to right,black,grey, white);*/
    margin-top:699px;
    transition: margin-top 1s linear;
}
.transformation{
  margin: 0 50%;
  position:absolute;
  top:20%;
}
/* lumiere du phare */
#led{
  margin: 0 45%;
  position:absolute;
  width:12%;height:4%;
  border-radius:50%;
  background : radial-gradient(#fff 20%,#ffa 30%, red 32%,rgba(255,255,255,0.4) 34%,rgba(255,255,255,0) 95%);
  top:12%;
  opacity:0;
  transition: opacity 3s linear;
}