@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;
}


.card-title{
  font-family: 'Mouse Memoirs';
  font-size: 20px;
  line-height: 22px;
  letter-spacing: 1.1px;	
  color: #FFFFFF;
  text-shadow: 1px 2px rgb(0,0,0,.35);	
  text-transform: uppercase;	
}

@media (min-width: 992px){
	.card-title{
  font-size: 24px;
  line-height: 26px;		
}
}

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

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

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

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

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

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

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

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

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