.DraggableDiv {
    /* to allow the draggable div's to scroll with the content make the position absolute */
    position:absolute;
	overflow:hidden;
   /*top: 20%;
    left: 20%;
    width: 250px;
    border: 1px solid #000000;
    background: #beccf3;
    box-shadow: 5px 5px 3px 0px rgba(97,97,97,0.5);*/
}
.containerdragg {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 50vh;
}

.centered-element{
    width: 62%;
    height: 36vh;
    background-color: #292929;
	border-radius: 20px;
	z-index: 1000;
 }

.DraggableDiv div {
    padding: 5px;
}

/*.DraggableDiv .Header {
    cursor: move;
    font-weight: bold;
    color: #ffffff;
    border-bottom: 1px solid #000000;
    background-color: #566895;
}*/

#infoBulle { 
    display: none; /* Initially hide the div */ 
    background-color: #fafafa; 
    padding: 10px;
    margin: auto; 
    width: 4vw;
    height: 1vh;
    position: absolute;
    top: 70%;
    left: 15%;
    color: #1e1e1e;
    text-align: center;
    font-size: 1em;
    line-height: 1vh;
    font-family: Libre Franklin, sans-serif;
    border-radius: 10px;
    text-transform: uppercase;
	z-index: 5000;
} 

#infoBulle2 { 
    display: none; /* Initially hide the div */ 
    background-color: #fafafa; 
    padding: 10px;
    margin: auto; 
    width: 4vw;
    height: 1vh;
    position: absolute;
    top: 30%;
    left: 5%;
    color: #1e1e1e;
    text-align: center;
    font-size: 1em;
    line-height: 1vh;
    font-family: Libre Franklin, sans-serif;
    border-radius: 10px;
    text-transform: uppercase;
	z-index: 5000;
} 


#DraggableflecheJaune {
    cursor: grab;
    top: 75%;
    left: 32%;
	z-index: 2000;
}

#DraggableflecheJaune:hover {
    cursor: grab;
    -webkit-transition: -webkit-transform 1.4s ease-in-out;
          transition: transform 1.4s ease-in-out;
    -webkit-transform: rotate(-30deg);
          transform: rotate(-30deg);
	transform-orign : center center;
}

#DraggableflecheJaune:not(:hover) {
    cursor: grab;
   -webkit-transition: -webkit-transform 0.8s cubic-bezier(0.09, 0.77, 0.58, 1);
          transition: transform 0.8s cubic-bezier(0.11, 0.77, 0.58, 1);
    -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
    transform-orign : center center;
}


#Draggablelosange {
    cursor: grab;
    top: 2%;
    left: 75%;
	z-index: 2000;
}

#DraggableOvale {
    cursor: grab;
    top: 60%;
    left: 60%;
	/*width:100%;*/
	/*max-width:350px;*/
}

#DraggableOvale:hover {
    cursor: grab;
  	animation: shake 0.5s;
  	animation-iteration-count: infinite;
}


@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}


#DraggableRoue {
    cursor: grab;
    top: 60%;
    left: 8%;
}

#DraggableRoue:hover {
    cursor: grab;
    -webkit-transition: -webkit-transform 0.8s ease-in-out;
          transition: transform 0.8s cubic-bezier(0.42, 0, 0.12, 1);
    -webkit-transform: rotate(30deg);
          transform: rotate(30deg);
    transform-orign : center center;
    
}

#DraggableRoue:not(:hover) {
    cursor: grab;
   -webkit-transition: -webkit-transform 0.8s cubic-bezier(0.09, 0.77, 0.58, 1);
          transition: transform 0.8s ease-in-out;
    -webkit-transform: rotate(-60deg);
          transform: rotate(-60deg);
    transform-orign : center center;
}


#DraggabledemiLune {
    cursor: grab;
    top: 2%;
    left: 10%;
}

#DraggabledemiLune:hover {
    cursor: grab;
    -webkit-transition: -webkit-transform 0.8s cubic-bezier(0.16, 0.42, 0.35, 1.01);
          transition: transform 0.8s cubic-bezier(0.19, 0.72, 0.58, 1);
    -webkit-transform: rotate(-20deg);
          transform: rotate(-20deg);
    transform-orign : center center;
    
}
#DraggabledemiLune:not(:hover) {
    cursor: grab;
   -webkit-transition: -webkit-transform 0.8s cubic-bezier(0.09, 0.77, 0.58, 1);
          transition: transform 0.8s cubic-bezier(0.11, 0.77, 0.58, 1);
    -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
    transform-orign : center center;
}