.image {
max-width: 200px;
margin: 15px 0 0 0;
}

.image:hover {
opacity: 0.5;
max-width: 200px;
margin-top: 15px;
}
.flip-card {
  background-color: transparent;
  width: 20%;
  height: 300px;
  margin: 5px;
  float: left;
  border: 1px solid #f1f1f1;
  perspective: 1000px;
}
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}
.flip-card:flipped .flip-card-inner {
  transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}
.flip-card-front {
  background-color: #0F67B3;
  margin: auto;
  padding: 25px 0px 75px;
  color: black;
}

/* Style the back side */
.flip-card-back {
  background-color: #193667;
  padding: 20px 10px 50px;
  color: white;
  transform: rotateY(180deg);
}
.h1 {font-size: 20px; color:white}
.p {font-size: 12px; color:white}

@media only screen and (max-width: 768px) {
	.h1 {font-size:18px}
	.p {font-size:8px}
	.flip-card { width: 50%; margin-left: 10%}
	}

@media only screen and (max-width: 600px) {
	.h1 {font-size: 18px}
	.p {font-size:12px}
	.flip-card {width: 50%; float:left} 
	}
	
@media only screen and (min-width:768px) {
		.flip-card {margin:10px}
	}