#jeuxCouleurs{
  position: relative;
  display:flex;
	flex-direction:column;
}

#cards{
  position: relative; 
  margin-top: 30px;
  height: 210px;
  margin-bottom: 100px; 
  width:100%;
  align-self: center;
  filter: drop-shadow(-8px 8px 4px rgba(53, 24, 0, 0.15));
}

#choosenText{
  margin-top: 30px;
  height: 210px;
  margin-bottom: 100px; 
  width:100%;
  padding-left: 185px;
  align-self: center;
  position: absolute;
  top:0;
  left:0;
  transition-timing-function:  linear;
  transition-duration:  0s;
  transition-delay:  0s;
  visibility: hidden;
  box-sizing: border-box;
  opacity: 0;
}

#choosenText.showText{
  visibility: visible;
  transition-duration: 0.5s;
  transition-delay: 0.25s;
  opacity: 1;
}

.card{
  width:144px;/*2.5*60*/
  height:204px;/*3.5*60*/
  border-radius:7.5px;/*0.125*60*/
  position: absolute;
  transition-timing-function: ease;
  transition-duration: 0.5s;
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 1);
  border: 3px solid white;  
}


.cardHidden{
  /*background-color: brown !important;*/
  background-image: url("../_img/dos_de_carte.jpg") !important;
}

.cardAdmin{
  width:150px;/*2.5*60*/
  height:210px;/*3.5*60*/
  border-radius:7.5px;/*0.125*60*/
  border: 1px solid black;
  /*box-shadow: -8px 8px 11px rgba(53, 24, 0, 0.1);*/
  margin-top:10px;
  transition-timing-function: ease;
  transition-duration: 0.5s;
}
.adminCardContain{
  display: flex;
}

.adminChoosenText{
	flex:1;
  margin-top: 10px;
  height: 210px;
  width:100%;
}

.adminCardForm{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

      #CN0{
      left:calc(-325px + 50%);
      top:40px;
      transform: rotate(-20deg);
      z-index: 1;
    }
    #CN0:hover{
      left: calc(-345.52120859954px + 50%);
      top:-16.381557247155px;
      transform: rotate(-20deg);
    }
    #CS0{
      left:0;
      top:0;
      transform: scale(1.1);
      z-index: 11 !important;
    }
    #CD0{
      left:-12px;
      top:1px;
      transform:rotate(-10deg);
      z-index: 1;
    }
            #CN1{
      left:calc(-275px + 50%);
      top:22.600334589217px;
      transform: rotate(-15deg);
      z-index: 2;
    }
    #CN1:hover{
      left: calc(-290.52914270615px + 50%);
      top:-35.355214988127px;
      transform: rotate(-15deg);
    }
    #CS1{
      left:0;
      top:0;
      transform: scale(1.1);
      z-index: 11 !important;
    }
    #CD1{
      left:-10px;
      top:-5px;
      transform:rotate(-7.5deg);
      z-index: 2;
    }
            #CN2{
      left:calc(-225px + 50%);
      top:10.076542662456px;
      transform: rotate(-10deg);
      z-index: 3;
    }
    #CN2:hover{
      left: calc(-235.41889066002px + 50%);
      top:-49.011922518277px;
      transform: rotate(-10deg);
    }
    #CS2{
      left:0;
      top:0;
      transform: scale(1.1);
      z-index: 11 !important;
    }
    #CD2{
      left:5px;
      top:-7px;
      transform:rotate(-5deg);
      z-index: 3;
    }
            #CN3{
      left:calc(-175px + 50%);
      top:2.5239378383502px;
      transform: rotate(-5deg);
      z-index: 4;
    }
    #CN3:hover{
      left: calc(-180.22934456486px + 50%);
      top:-57.247744047155px;
      transform: rotate(-5deg);
    }
    #CS3{
      left:0;
      top:0;
      transform: scale(1.1);
      z-index: 11 !important;
    }
    #CD3{
      left:-3px;
      top:-5px;
      transform:rotate(-2.5deg);
      z-index: 4;
    }
            #CN4{
      left:calc(-125px + 50%);
      top:0px;
      transform: rotate(0deg);
      z-index: 5;
    }
    #CN4:hover{
      left: calc(-125px + 50%);
      top:-60px;
      transform: rotate(0deg);
    }
    #CS4{
      left:0;
      top:0;
      transform: scale(1.1);
      z-index: 11 !important;
    }
    #CD4{
      left:-9px;
      top:4px;
      transform:rotate(0deg);
      z-index: 5;
    }
            #CN5{
      left:calc(-75px + 50%);
      top:2.5239378383502px;
      transform: rotate(5deg);
      z-index: 6;
    }
    #CN5:hover{
      left: calc(-69.770655435141px + 50%);
      top:-57.247744047155px;
      transform: rotate(5deg);
    }
    #CS5{
      left:0;
      top:0;
      transform: scale(1.1);
      z-index: 11 !important;
    }
    #CD5{
      left:-13px;
      top:4px;
      transform:rotate(2.5deg);
      z-index: 6;
    }
            #CN6{
      left:calc(-25px + 50%);
      top:10.076542662456px;
      transform: rotate(10deg);
      z-index: 7;
    }
    #CN6:hover{
      left: calc(-14.581109339984px + 50%);
      top:-49.011922518277px;
      transform: rotate(10deg);
    }
    #CS6{
      left:0;
      top:0;
      transform: scale(1.1);
      z-index: 11 !important;
    }
    #CD6{
      left:-5px;
      top:1px;
      transform:rotate(5deg);
      z-index: 7;
    }
            #CN7{
      left:calc(25px + 50%);
      top:22.600334589217px;
      transform: rotate(15deg);
      z-index: 8;
    }
    #CN7:hover{
      left: calc(40.529142706151px + 50%);
      top:-35.355214988127px;
      transform: rotate(15deg);
    }
    #CS7{
      left:0;
      top:0;
      transform: scale(1.1);
      z-index: 11 !important;
    }
    #CD7{
      left:5px;
      top:0px;
      transform:rotate(7.5deg);
      z-index: 8;
    }
            #CN8{
      left:calc(75px + 50%);
      top:40px;
      transform: rotate(20deg);
      z-index: 9;
    }
    #CN8:hover{
      left: calc(95.52120859954px + 50%);
      top:-16.381557247155px;
      transform: rotate(20deg);
    }
    #CS8{
      left:0;
      top:0;
      transform: scale(1.1);
      z-index: 11 !important;
    }
    #CD8{
      left:-15px;
      top:3px;
      transform:rotate(10deg);
      z-index: 9;
    }