@charset "utf-8";
/* CSS Document */

/* FLIPPER CLASS */
.card {
  margin: 10px 10px;
  background-color: rgba(245, 245, 245, 0) !important;	
}

/* Flip Cards CSS */
.card-container {
  display: grid;
  perspective: 200px;
}

.card-flip {
  display: grid;
  grid-template: 1fr / 1fr;
  grid-template-areas: "frontAndBack";
  transform-style: preserve-3d;
  transition: all 0.7s ease;
}

.card-flip div {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;	
  transform-style: preserve-3d;
}

.front {
  grid-area: frontAndBack;
	border: none;
}

.back {
  grid-area: frontAndBack;
  border: none;	
  transform: rotateY(-180deg);
}

.card-container:hover .card-flip {
  transform: rotateY(180deg);
}

.card-img-overlay{
	margin-top: 4px;
}

#dvsFlipper{
    padding: 25px;
}

.dogBox {
  padding: 20px;
  height: 100px;
  text-align: center;
  align-content: center;
}

.dvsFlip {
  background-image: url("../../assets/img/flip/dvsIcon.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.flipDVS {
  background-image: url("../../assets/img/flip/dvsIconFlip.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}