body{
    margin: 0;
    padding: 0;
    background-image: url(../image/terre.gif);
    background-size: cover;
}
.exit{
        width: 3%;
        position: absolute;
        top: 5%;
        left: 7%;
}
.exit:hover{
    width: 3.2%;
    animation: wobble-ver-right 0.8s both;
}
/*************Haut gauche***********/
.class_equipeG {
    width: 5%;
    height: 10%;
    position: absolute;
    top: 10%;
    left: 25%;
    border-radius: 50%;
}

    .class_equipeG:hover p.textG {
        opacity: 1; 
        animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
        cursor: default;
        left: 120%;
    }
    .class_equipeG:hover .imgG {
        cursor: pointer;
        width: 110%;
    }

.textG {
    margin: 0;
    color: #fff;
    width: 300%;
    top: 25%;
    left: -900px;
    opacity: 0;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.63);
    padding: 15px 0 15px 15px;
}
 .imgG {
 width: 100%;
 border-radius: 50%;
}

/*************Bas gauche***********/

.class_equipeBG {
    width: 5%;
    height: 10%;
    position: absolute;
    top: 55%;
    left: 18%;
    border-radius: 50%;
}

    .class_equipeBG:hover p.textBG {
        opacity: 1; 
        animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
        cursor: default;
        left: 120%;
    }
    .class_equipeBG:hover .imgBG {
        cursor: pointer;
        width: 110%;
    }

.textBG {
    margin: 0;
    color: #fff;
    width: 300%;
    top: 25%;
    left: -700px;
    opacity: 0;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.63);
    padding: 15px 0 15px 15px;
}
 .imgBG {
 width: 100%;
 border-radius: 50%;
}
/*************Bas droite***********/
.class_equipeBD {
    width: 5%;
    height: 10%;
    position: absolute;
    top: 55%;
    right: 18%;
    border-radius: 50%;
}

    .class_equipeBD:hover p.textBD {
        opacity: 1; 
        animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
        cursor: default;
        left: -300%;
    }
    .class_equipeBD:hover .imgBD {
        cursor: pointer;
        width: 110%;
    }

.textBD {
    margin: 0;
    color: #fff;
    width: 300%;
    top: 25%;
    left: -2000px;
    opacity: 0;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.63);
    padding: 15px 0 15px 15px;
}
 .imgBD {
 width: 100%;
 border-radius: 50%;
}

/*************Haut droite***********/
.class_equipeD {
    width: 5%;
    height: 10%;
    position: absolute;
    top: 10%;
    right: 25%;
    border-radius: 50%;
}

    .class_equipeD:hover p.textD {
        opacity: 1; 
        animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
        cursor: default;
        left: -300%;
    }
    .class_equipeD:hover .imgD {
        cursor: pointer;
        width: 110%;
    }

.textD {
    margin: 0;
    color: #fff;
    width: 300%;
    top: 25%;
    left: -2000px;
    opacity: 0;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.63);
    padding: 15px 0 15px 15px;
}
 .imgD {
 width: 100%;
 border-radius: 50%;
}

/*************Centre***********/
.class_equipeC {
    width: 5%;
    height: 10%;
    position: absolute;
    top: 80%;
    left: 48%;
    border-radius: 50%;
}

    .class_equipeC:hover p.textC {
        opacity: 1; 
        animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
        cursor: default;
        left: 120%;
    }
    .class_equipeC:hover .imgC {
        cursor: pointer;
        width: 110%;
    }

.textC {
    margin: 0;
    color: #fff;
    width: 300%;
    top: 25%;
    left: -1200px;
    opacity: 0;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.63);
    padding: 15px 0 15px 15px;
}
 .imgC {
 width: 100%;
 border-radius: 50%;
}
/*********Animation*****************/
/* ----------------------------------------------
 * Generated by Animista on 2020-10-7 13:14:37
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-in-left
 * ----------------------------------------
 */
  @keyframes slide-in-left {
    0% {
              transform: translateX(-1000px);
      opacity: 0;
    }
    100% {
              transform: translateX(0);
      opacity: 1;
    }
  }
  @keyframes slide-in-right {
    0% {
              transform: translateX(1000px);
      opacity: 0;
    }
    100% {
              transform: translateX(0);
      opacity: 1;
    }
  }

/* ----------------------------------------------
 * Generated by Animista on 2020-10-7 18:2:31
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation wobble-ver-right
 * ----------------------------------------
 */

  @keyframes wobble-ver-right {
    0%,
    100% {
              transform: translateY(0) rotate(0);
              transform-origin: 50% 50%;
    }
    15% {
              transform: translateY(-15px) rotate(3deg);
    }
    30% {
              transform: translateY(7.5px) rotate(-3deg);
    }
    45% {
              transform: translateY(-7.5px) rotate(1.8deg);
    }
    60% {
              transform: translateY(4.5px) rotate(-1.2deg);
    }
    75% {
              transform: translateY(-3px) rotate(0.6deg);
    }
  }