.linearForImage {
  background: rgb(255, 255, 255);
  background: -moz-linear-gradient(
    45deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 1) 30%,
    rgba(255, 255, 255, 0) 100%
  );
  background: -webkit-linear-gradient(
    45deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 1) 30%,
    rgba(255, 255, 255, 0) 100%
  );
  background: linear-gradient(
    45deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 1) 30%,
    rgba(255, 255, 255, 0) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#ffffff",GradientType=1);
}
.mt-78 {
  margin-top: 19rem;
}
.height180 {
  height: 180%;
}
.mt-90 {
  margin-top: 30rem;
}
.mt-40p {
  margin-top: 34%;
}
.height70 {
  height: 70%;
}
.lineHeight {
  line-height: 1;
}
.minHeight {
  min-height: 200%;
}
.bottom-100 {
  bottom: -100%;
}
.height200 {
  height: 200%;
}
.minHeight2 {
  min-height: 600px;
}
.minHeight3 {
  min-height: 660px;
}
.minWidth {
  min-width: 280px;
}
.maxWidth {
  max-width: 100vw;
}
.gridRow {
  grid-template-rows: 100% 100% 100%;
  grid-template-rows: 100% 100% 100%;
}
.buttonGreen {
  background-color: #06d6a0;
}
.maxWidth2000 {
  max-width: 2000px;
}
/* Media queries */
@media (max-width: 500px) {
  .gridRow {
    grid-template-rows: 75% 75% 75%;
    grid-template-rows: 75% 75% 75%;
  }
}
@media (max-width: 400px) {
  .gridRow {
    grid-template-rows: 70% 70% 70%;
    grid-template-rows: 70% 70% 70%;
  }
}
@media (max-width: 350px) {
  .gridRow {
    grid-template-rows: 60% 60% 60%;
    grid-template-rows: 60% 60% 60%;
  }
}
@media (max-width: 300px) {
  .gridRow {
    grid-template-rows: 50% 50% 50%;
    grid-template-rows: 50% 50% 50%;
  }
}
/* Media for landing image */
@media (min-width: 1000px) {
  .landscapeImg {
    background-image: url("../img/c1/ex2c1000.jpg");
  }
}
@media (max-width: 1000px) and (min-width: 900px) {
  .landscapeImg {
    background-image: url("../img/c1/ex2c900800.jpg");
  }
}
@media (max-width: 900px) and (min-width: 800px) {
  .landscapeImg {
    background-image: url("../img/c1/ex2c800700.jpg");
  }
}
@media (max-width: 800px) and (min-width: 700px) {
  .landscapeImg {
    background-image: url("../img/c1/ex2c700600.jpg");
  }
}
@media (max-width: 700px) and (min-width: 600px) {
  .landscapeImg {
    background-image: url("../img/c1/ex2c600500.jpg");
  }
}
@media (max-width: 600px) and (min-width: 520px) {
  .landscapeImg {
    background-image: url("../img/c1/ex2c500400.jpg");
  }
}
@media (max-width: 520px) and (min-width: 420px) {
  .landscapeImg {
    background-image: url("../img/c1/ex2c4003.jpg");
  }
}

@media (max-width: 420px) {
  .landscapeImg {
    background-image: url("../img/c1/ex2c4004.jpg");
  }
}

/*-------------------- make the flip card -------------------*/
.innerCard {
  transition: 0.8s;
  transform-style: preserve-3d;
}
/* Do the horizontal flip when hover */
.mainCard:hover .innerCard {
  transform: rotateY(180deg);
}
/* Position front and back card */
.frontCard,
.backCard {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.backCard {
  transform: rotateY(180deg);
}