.designer-overlay-box {
  overflow: hidden;
  position: relative;
  transform-style: preserve-3d;
  transition: 0.5s;
  -webkit-perspective: 1000px;
  perspective: 1000px;
}

.designer-overlay-box-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition-property: all;
  -webkit-transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
  -o-transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}

.designer-overlay-box-main {
  z-index: 5;
  background: #76d8cf;
}

.designer-box-overlay {
  top: 0;
  z-index: 5;
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
}

.designer-box-content {
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  position: relative;
  z-index: 10;
  -ms-flex-direction: column;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
}

.designer-overlay-box-item.designer-overlay-box-hover {
  opacity: 0;
  visibility: hidden;
}

.designer-overlay-box:hover .designer-overlay-box-hover {
  opacity: 1;
  visibility: visible;
}

.designer-overlay-box:hover .designer-overlay-box-main {
  opacity: 0;
  visibility: hidden;
}

.designer-overlay-box-hover {
  background-color: #ff348b;
}

.designer-hover-link {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  top: 0;
  z-index: 20;
  text-decoration: none;
}