body {
    /*background-color: beige;*/
    background-color: #2e2e31;
}


@keyframes tipsy {
  0 {
    transform: translateX(-50%) translateY(-50%) rotate(0deg);
  }
  100% {
    transform: translateX(-50%) translateY(-50%) rotate(360deg);
  }
}

/*--------- Visioconférence --------------*/

#AnimVisio {
    position: absolute;     
    left: 50%;
    top: 20%;
    width: 380px;
    transform: translateY(-50%); /* tiré de la moitié de sa propre hauteur */
    transform: translateX(-50%);
    text-align: center;
}

#AnimVisio a {
  color: #fffbf1;
  text-shadow: 0 20px 25px #2e2e31, 0 40px 60px #2e2e31;
  font-size: 50px;
  font-weight: bold;
  text-decoration: none;  
  margin: 0;
}

#AnimVisio a:before, #AnimVisio a:after {
  content: '';
  padding: .9em 0.4em;
  position: absolute;
  left: 50%;
  width: 100%;
  top: 50%;
  display: block;
  border: 15px solid red;
  transform: translateX(-50%) translateY(-50%) rotate(0deg);
  animation: 10s infinite alternate ease-in-out tipsy;
}

#AnimVisio a:before {
  border-color: #d9524a #d9524a rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
  z-index: -1;
}

#AnimVisio a:after {
  border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #d9524a #d9524a;
  box-shadow: 25px 25px 25px rgba(46, 46, 49, .8);
}

/*--------- Animation GEA --------------*/

#AnimGEA {
    position: absolute;     
    left: 30%;
    top: 40%;
    width: 300px;
    transform: translateY(-50%); /* tiré de la moitié de sa propre hauteur */
    transform: translateX(-50%);
    text-align: center;
}

#AnimGEA a {
  color: #fffbf1;
  text-shadow: 0 20px 25px #2e2e31, 0 40px 60px #2e2e31;
  font-size: 50px;
  font-weight: bold;
  text-decoration: none;  
  margin: 0;
}

#AnimGEA a:before, #AnimGEA a:after {
  content: '';
  padding: .9em 0.2em;
  position: absolute;
  left: 50%;
  width: 100%;
  top: 50%;
  display: block;
  border: 15px solid red;
  transform: translateX(-50%) translateY(-50%) rotate(0deg);
  animation: 10s infinite alternate ease-in-out tipsy;
}

#AnimGEA a:before {
  border-color: #d9524a #d9524a rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
  z-index: -1;
}

#AnimGEA a:after {
  border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #d9524a #d9524a;
  box-shadow: 25px 25px 25px rgba(46, 46, 49, .8);
}

/*--------- Animation GC --------------*/

#AnimGC {
    position: absolute;     
    left: 70%;
    top: 40%;
    width: 300px;
    transform: translateY(-50%); /* tiré de la moitié de sa propre hauteur */
    transform: translateX(-50%);
    text-align: center;
}

#AnimGC a {
  color: #fffbf1;
  text-shadow: 0 20px 25px #2e2e31, 0 40px 60px #2e2e31;
  font-size: 50px;
  font-weight: bold;
  text-decoration: none;  
  margin: 0;
}

#AnimGC a:before, #AnimGC a:after {
  content: '';
  padding: .9em 0.2em;
  position: absolute;
  left: 50%;
  width: 100%;
  top: 50%;
  display: block;
  border: 15px solid red;
  transform: translateX(-50%) translateY(-50%) rotate(0deg);
  animation: 10s infinite alternate ease-in-out tipsy;
}

#AnimGC a:before {
  border-color: #d9524a #d9524a rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
  z-index: -1;
}

#AnimGC a:after {
  border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #d9524a #d9524a;
  box-shadow: 25px 25px 25px rgba(46, 46, 49, .8);
}

/*--------- Animation ESIEE --------------*/

#AnimESIEE {
    position: absolute;     
    left: 70%;
    top: 60%;
    width: 300px;
    transform: translateY(-50%); /* tiré de la moitié de sa propre hauteur */
    transform: translateX(-50%);
    text-align: center;
}

#AnimESIEE a {
  color: #fffbf1;
  text-shadow: 0 20px 25px #2e2e31, 0 40px 60px #2e2e31;
  font-size: 50px;
  font-weight: bold;
  text-decoration: none;  
  margin: 0;
}

#AnimESIEE a:before, #AnimESIEE a:after {
  content: '';
  padding: .9em 0.2em;
  position: absolute;
  left: 50%;
  width: 100%;
  top: 50%;
  display: block;
  border: 15px solid red;
  transform: translateX(-50%) translateY(-50%) rotate(0deg);
  animation: 10s infinite alternate ease-in-out tipsy;
}

#AnimESIEE a:before {
  border-color: #d9524a #d9524a rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
  z-index: -1;
}

#AnimESIEE a:after {
  border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #d9524a #d9524a;
  box-shadow: 25px 25px 25px rgba(46, 46, 49, .8);
}

/*--------- MASTERH --------------*/

#MASTERH {
    position: absolute;     
    left: 30%;
    top: 60%;
    width: 300px;
    transform: translateY(-50%); /* tiré de la moitié de sa propre hauteur */
    transform: translateX(-50%);
    text-align: center;
}

#MASTERH a {
  color: #fffbf1;
  text-shadow: 0 20px 25px #2e2e31, 0 40px 60px #2e2e31;
  font-size: 50px;
  font-weight: bold;
  text-decoration: none;  
  margin: 0;
}

#MASTERH a:before, #MASTERH a:after {
  content: '';
  padding: .9em 0.2em;
  position: absolute;
  left: 50%;
  width: 100%;
  top: 50%;
  display: block;
  border: 15px solid red;
  transform: translateX(-50%) translateY(-50%) rotate(0deg);
  animation: 10s infinite alternate ease-in-out tipsy;
}

#MASTERH a:before {
  border-color: #d9524a #d9524a rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
  z-index: -1;
}

#MASTERH a:after {
  border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #d9524a #d9524a;
  box-shadow: 25px 25px 25px rgba(46, 46, 49, .8);
}




