.custom_hover {
  display: inline-block;
  perspective: 100px;
}
.custom_hover > span {
  position: relative;
  display: block;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  transform: rotateX(0deg);
  -o-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  -webkit-transform: rotateX(0deg);
  -ms-transform: rotateX(0deg);
  background: #e01f04;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
.custom_hover > span > span {
  display: block;
  color: #ffffff;
  padding: 8px 41px;
  transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform: rotateX(0deg);
  -o-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  -webkit-transform: rotateX(0deg);
  -ms-transform: rotateX(0deg);
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.custom_hover > span > strong {
  font-weight: inherit;
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  color: #ffffff;
  padding: 8px 41px;
  opacity: 0;
  transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  transform: rotateX(0deg);
  -o-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  -webkit-transform: rotateX(0deg);
  -ms-transform: rotateX(0deg);
}
.custom_hover:hover > span,
.custom_hover:focus > span,
.custom_hover:active > span,
.custom_hover.active > span,
.custom_hover.selected > span {
  transform: rotateX(180deg);
  -o-transform: rotateX(180deg);
  -moz-transform: rotateX(180deg);
  -webkit-transform: rotateX(180deg);
  -ms-transform: rotateX(180deg);
  background: #000000;
}
.custom_hover:hover > span > span,
.custom_hover:focus > span > span,
.custom_hover:active > span > span,
.custom_hover.active > span > span,
.custom_hover.selected > span > span {
  transform: rotateX(180deg);
  -o-transform: rotateX(180deg);
  -moz-transform: rotateX(180deg);
  -webkit-transform: rotateX(180deg);
  -ms-transform: rotateX(180deg);
  opacity: 0;
}
.custom_hover:hover > span > strong,
.custom_hover:focus > span > strong,
.custom_hover:active > span > strong,
.custom_hover.active > span > strong,
.custom_hover.selected > span > strong {
  transform: rotateX(180deg);
  -o-transform: rotateX(180deg);
  -moz-transform: rotateX(180deg);
  -webkit-transform: rotateX(180deg);
  -ms-transform: rotateX(180deg);
  opacity: 1;
}
.custom_hover > span {
  border: none;
}
.custom_hover:hover > span {
  border: none;
}
.active .custom_hover > span {
  transform: rotateX(180deg) rotateY(180deg);
  -o-transform: rotateX(180deg) rotateY(180deg);
  -moz-transform: rotateX(180deg) rotateY(180deg);
  -webkit-transform: rotateX(180deg) rotateY(180deg);
  -ms-transform: rotateX(180deg) rotateY(180deg);
  background: #000000;
}
.active .custom_hover > span > span {
  transform: rotateX(180deg) rotateY(180deg);
  -o-transform: rotateX(180deg) rotateY(180deg);
  -moz-transform: rotateX(180deg) rotateY(180deg);
  -webkit-transform: rotateX(180deg) rotateY(180deg);
  -ms-transform: rotateX(180deg) rotateY(180deg);
  opacity: 0;
}
.active .custom_hover > span > strong {
  color: #ffffff;
  transform: rotateX(180deg) rotateY(180deg);
  -o-transform: rotateX(180deg) rotateY(180deg);
  -moz-transform: rotateX(180deg) rotateY(180deg);
  -webkit-transform: rotateX(180deg) rotateY(180deg);
  -ms-transform: rotateX(180deg) rotateY(180deg);
  opacity: 1;
}
.active .custom_hover > span {
  border: none;
}