body {
  /*font-family: 'Nunito', sans-serif;*/
  font-family: "Montserrat", sans-serif;
}

.bg-dark {
  background-color: #171717;
  color: #f9f2e7;
}

/*
* credits photos banniere
* https://unsplash.com/@focusmitch
*/
#banniere {
  height: 12rem;
}

/* crédit image utilisée pour le background : 
* https://www.pexels.com/fr-fr/photo/but-champ-libre-champ-ouvert-clairiere-399187/
*/
#bloc-devise {
  background-image: url(../img/background_devise.jpg);
  background-size: cover;
}

.gold {
  color: #9e8958;
  filter: drop-shadow(2px 2px 2px black);
}

#bloc-agence {
  width: 65%;
}

.card {
  margin: 0 auto;
  height: 280px;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  /*perspective: 1400px;*/
  -webkit-perspective: 1400px;
  position: relative;
  width: 280px;
}
.card__side {
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.8s;
  -webkit-transition: all 0.8s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  width: 100%;
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.15);
}
.card__side--front {
  background-color: white;
}
.card__side--back {
  background-image: linear-gradient(to right bottom, #9e8958, #c2b7a1);
  transform: rotateY(180deg);
}
.card:hover .card__side--front {
  transform: rotateY(-180deg);
}
.card:hover .card__side--back {
  transform: rotateY(0deg);
}

svg {
  fill: #000000;
}

svg:hover {
  fill: #9e8958;
}

/* RESPONSIVE DESIGN */
@media (min-width: 768px) {
  #banniere {
    height: 16rem;
  }

  .card {
    height: 380px;
    width: 380px;
  }
}

@media (min-width: 1024px) {
  #banniere {
    height: 24rem;
  }

  #bloc-devise {
    width: 45%;
  }
}

@media (min-width: 1440px) {
  #banniere {
    height: 32rem;
  }
}