@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: 300px;
  align-content: center;
  vertical-align: middle;	
}

@media screen and (min-width:568px) and (min-height:320px){
	.card-container {
  align-content:inherit;
  vertical-align: inherit;
  perspective: 250px;		
}
	
}

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



.logoBox {
  padding: 5px;
  height: 300px;
  text-align: center;
  align-content: center;
}

@media screen and (min-width:568px) and (min-height:320px){
.logoBox {
  padding: 5px;
  height: 250px;
  text-align: center;
  align-content: center;
}
}
.pukeyFlip {
  background-image: url("../../assets/img/flip/pukey_logo.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.flipPUKEY {
  background-image: url("../../assets/img/flip/pukey2_logo.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.puffyFlip {
  background-image: url("../../assets/img/flip/puffy_logo.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

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