.flip-card-3D-wrapper {
  width: 100%;
  height: 100%;
  max-width: 300px;
  perspective: 900px;
  margin: 10px 10px;

}


.flip-card {
  height: 100%;
  transition: all 1s ease-in-out;
  transform-style: preserve-3d;
/*  background-size: 100%;
  background-image: url('../img/bgCard.webp');*/
}
.flip-card_GB{
  background-size: 120%;
  background-image: url('../img/bgCards/GB.webp');
}
.flip-card_DEF{
  background-size: 120%;
  background-image: url('../img/bgCards/DEF.webp');
}
.flip-card_MIL{
  background-size: 120%;
  background-image: url('../img/bgCards/MIL.webp');
}
.flip-card_ATT{
  background-size: 120%;
  background-image: url('../img/bgCards/ATT.webp');
}
.do-flip {transform: rotateY(-180deg);}

.flip-card-btn-turn-to-back, .flip-card-btn-turn-to-front {
  position: absolute;
  bottom: 2px;
  right: 2px;
  visibility: hidden;
  border-radius: 10px;
  font-size: small;
}

.flip-card-btn-turn-to-back{
    border: white;
    background: black;
    color: white;
    border-style: inset;
}

.flip-card-btn-turn-to-front  {
  border: white;
  background: black;
  color: white;
  border-style: inset;
}

.flip-card-btn-turn-to-back2 {
  position: absolute;
  bottom: 2px;
  left: 2px;
  visibility: hidden;
  border-radius: 10px;
  font-size: small;
  border-style: inset;
}
.flip-card-btn-turn-to-back2{
    border: white;
    background: black;
    color: white;
    border-style: inset;
}

.flip-card-front, .flip-card-back {
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
  z-index: 2;
  border-radius: 10px;
  border:5px solid black;
}

.flip-card-front {width: 100%;}
.flip-card-front h4 {color: white;}
.flip-card-front h5 {color: white;}
.flip-card-front h6 {color: white;}

.flip-card-back {transform: rotateY(180deg);}
.flip-card-front {color: white;}
.flip-card-back h4 {color: white;}
.flip-card-back h5 {color: white;}
.flip-card-back h6 {color: white;}
.player-photo {

  height: 5rem;
  overflow: hidden;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: auto;
  background: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgb(241 235 235) 35%, rgba(0, 0, 0, 1) 100%);
  border-radius: 50%;
  filter: drop-shadow(10px 10px 24px #000);
}
.profile-photo {
  position: relative;
  bottom: -1px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 200px;
  filter: drop-shadow(10px 10px 24px #000);
}
.club-logo {
  height: 2rem;
  overflow: hidden;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: auto;
}
.gp-logo {
  height: 2rem;
  overflow: hidden;
  display: inline;
  margin-left: auto;
  margin-right: auto;
  width: auto;
}