.flip-card {
  position: relative;
  background-color: transparent;
  height: 220px;
  margin-bottom: 3vh;
  padding:3px;
  z-index: 1;
}
.flip-card h2 {
  margin:;
  text-align: center !important;
}
@media only screen and (max-width: 450px) {
.geometric-background-2 { height: 350px !important; }
.flip-cards { display: none; }
.flip-cards-mobile h2 { font-size: 1.4rem !important; }
.flip-cards-mobile .flex { flex-direction: row; }
.flip-cards-mobile img { width: 60px !important;}
.flip-card-front { background-color: #FF615C !important;  }
}
@media only screen and (min-width: 451px) and (max-width: 600px) {
.flip-card-front { background-color: #FF615C !important;  }
.flip-img {flex: 2 !important;}
.flip-cards { display: none; }
}
@media only screen and (min-width: 601px) and (max-width: 800px) {
.flip-card { width: 32vw; }
.flip-cards-mobile { display: none; }
}
@media only screen and (min-width: 801px) {
.flip-card { width: 26vw; max-width: 320px; }
.flip-card-front, .flip-card-back { padding: 5px; }
.flip-cards-mobile { display: none; }

}
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: opacity 0.8s;
}


.flip-card:hover .flip-card-inner {
  transform: opacity;
}

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

.flip-card-front {
  background-color: #eaeaea;
  color: green;
  z-index: 1;
}

.flip-card-back, .flip-card:hover .flip-card-front {
  transition: opacity 0.8s;
  opacity: 0;
}
.flip-card:hover .flip-card-back, .flip-card-front {
  transition: opacity 0.8s;
  opacity: 1;
}
.flip-card-back {
  background-color: #122333;
  color: white;
  z-index:99;
}
.flip-card-back h3, .flip-card-back h2 {
  color: white;
}

.flip-cards-mobile .flip-card-front {
  height: 25px;
  width: 25px;
}
.flip-cards-mobile a {
  padding-top: 100px;
}
.flip-cards-mobile .row div {
  display: flex;
  align-items: center;
}
.flip-point {
  display: flex;
  align-items: center;
  justify-content: center;
}
.flip-img {
 justify-content: center;
}



.flip-card:before, .flip-card:after {
    position:absolute; content:' ';
    width:60px; height: 60px;
    border-color:#d93128; /* or whatever colour */
    border-style:solid; /* or whatever style */
    transition: width 0.8s ease, height 0.8s ease;
    z-index: 2;
}
.flip-card:hover:before, .flip-card:hover:after {
    width:100%; height: 100%;
    transition: width 0.8s ease, height  0.8s ease;
    z-index: 2;
}
.flip-card:before {top:0;left:0;border-width: 3px 0 0 3px}
.flip-card:after {bottom:0;right:0;border-width: 0px 3px 3px 0}