.g-card {cursor: zoom-in; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.45);}
		.g-card:hover {box-shadow: 0 16px 20px 0 rgba(0, 0, 0, 0.9), 0 18px 32px 0 rgba(0, 0, 0, 0.85);}
		@media screen and (min-width: 600px) {.g-card:hover {box-shadow: 0 16px 20px 0 rgba(0, 0, 0, 0.9), 0 18px 32px 0 rgba(0, 0, 0, 0.85);
			animation-name:g-cardanim;animation-duration:.5s;transform: scale(1.5);}}
		@keyframes g-cardanim { from {transform: scale(1);} to {transform: scale(1.5);}}
		.g-cardnz:hover {box-shadow: 0 16px 20px 0 rgba(0, 0, 0, 0.5), 0 18px 32px 0 rgba(0, 0, 0, 0.45);}
		.g-cardnz {cursor: zoom-in;}

		.w3-fifth{width:19.99999%}
		.w3-twofifth{width:39.99999%}
		.w3-full {float:left;width:100%}
		.w3-row-padding>.w3-fifth, .w3-row-padding>.w3-twofifth, .w3-row-padding>.w3-full{padding:0 8px}


.flip-card {
  background-color: transparent;
  width: 300px;
  height: 300px;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

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

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: #bbb;
  color: black;
}

.flip-card-back {
  background-color: #2980b9;
  color: white;
  transform: rotateY(180deg);
}