html, body { width: 100%; height: 100%; }
body {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  -webkit-justify-content: space-around;
  -moz-justify-content: space-around;
  -ms-justify-content: space-around;
  justify-content: space-around;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  align-items: center;
}
.gon {
  width: 220px;
  height: 220px;
  background-color: #ccc;
  /* background: url('https://i.imgur.com/IEiqEV0.jpg') no-repeat 50% 50%; */
  /* background: url('http://pentamould.criativatek.com/img/services/ic-services-01.png') no-repeat; */
  background-size: 220px 220px;

  /* Text styling */
  line-height: 220px;
  text-align: center;
  font-family: sans-serif;
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 6px;
  color: #fff;
  color: rgba(255,255,255,.5);
  cursor: pointer;
  transition: color 500ms ease, text-shadow 500ms ease;
}
.gon:hover {
  color: #fff;
  text-shadow: 0 0 10px white;
}

.penta {
  height: 200px;
  -webkit-clip-path: polygon(
    50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%
  );
  -moz-clip-path: polygon(
    50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%
  );
  -ms-clip-path: polygon(
    50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%
  );
  clip-path: polygon(
    50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%
  );
}
.hexa {
  width: 190px;
  -webkit-clip-path: polygon(
    50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%
  );
  -moz-clip-path: polygon(
    50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%
  );
  -ms-clip-path: polygon(
    50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%
  );
  clip-path: polygon(
    50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%
  );
}
.hepta {
  height: 215px;
  -webkit-clip-path: polygon(
    50% 0, 90% 19%, 100% 62%, 72% 100%, 28% 100%, 0 62%, 10% 19%
  );
  -moz-clip-path: polygon(
    50% 0, 90% 19%, 100% 62%, 72% 100%, 28% 100%, 0 62%, 10% 19%
  );
  -ms-clip-path: polygon(
    50% 0, 90% 19%, 100% 62%, 72% 100%, 28% 100%, 0 62%, 10% 19%
  );
  clip-path: polygon(
    50% 0, 90% 19%, 100% 62%, 72% 100%, 28% 100%, 0 62%, 10% 19%
  );
}
.octa {
  -webkit-clip-path: polygon(
    29% 0, 71% 0, 100% 29%, 100% 71%, 71% 100%, 29% 100%, 0 71%, 0 29%
  );
  -moz-clip-path: polygon(
    29% 0, 71% 0, 100% 29%, 100% 71%, 71% 100%, 29% 100%, 0 71%, 0 29%
  );
  -ms-clip-path: polygon(
    29% 0, 71% 0, 100% 29%, 100% 71%, 71% 100%, 29% 100%, 0 71%, 0 29%
  );
  clip-path: polygon(
    29% 0, 71% 0, 100% 29%, 100% 71%, 71% 100%, 29% 100%, 0 71%, 0 29%
  );
}
.nona {
  -webkit-clip-path: polygon(
    50% 0, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%
  );
  -moz-clip-path: polygon(
    50% 0, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%
  );
  -ms-clip-path: polygon(
    50% 0, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%
  );
  clip-path: polygon(
    50% 0, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%
  );
}

.rotated {
  transform: rotate(180deg); /* Equal to rotateZ(45deg) */
}
.rotated img{
  transform: rotate(180deg); /* Equal to rotateZ(45deg) */
  vertical-align: middle;
}
@media only screen and (max-width: 995px) {
  .gon {
    width: 50px;
    text-align: inherit;
  }
  .penta {
    height: 50px;
  }
  .penta .gon img{
    height: 50%;
  }
  /* .fs-10 p {
    padding-top: 10px !important;
    font-size: 10px !important;
    height: 60px;
  } */
  .fs-10 p {
    padding-top: 0px !important;
    font-size: 8px !important;
    height: 55px;
}
  .owl-carousel .owl-item img {
      /* display: block !important;
      width: 50% !important;
      height: 50% !important; */
      /* display: block !important;
      width: 70% !important;
      height: 70% !important; */
  }

}
.owl-carousel .owl-item img {
    display: inline;
    width: 50%;
    height: 50%;
    vertical-align: middle;
}
.fs-10 p {
  padding-top: 20px;
  font-size: 15px;
  font-weight: 700;

}