/**
 *
 *  Product Name: Aero | CSS3 Hover Effects
 *  Product Author: Daniel Costrășel (Gleesik)
 *  Author URL: http://gleesik.ro/
 *  Product Version: 1.5.0
 *  Licence: Standard GPL v2 (General Public Licence v2)
 *
 *  @package aero_hover_effects_pack_gleesik
 *
 **/
/*
 *
 *	CSS3 Hover Style | Structure
 *
 *	@package: css3_effects_structure
 *
 */
.effect {
  display: inline-block;
  position: relative;
  max-width: 100%;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.effect .effect-wrapper {
  display: block;
  position: relative;
  overflow: hidden;
  width: auto;
  max-width: 100%;
  height: auto;
  float: left;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.effect.round {
  border-radius: 50%;
}
.effect.round .effect-wrapper,
.effect.round .img-box,
.effect.round .img-box > *,
.effect.round .img-box > img,
.effect.round .img-box:after,
.effect.round .img-box:before,
.effect.round .info-box,
.effect.round .info-box > *,
.effect.round .info-box:after,
.effect.round .info-box:before,
.effect.round .info-content {
  border-radius: 50%;
}

.img-box,
.img-box:after,
.img-box:before,
.info-box,
.info-box:after,
.info-box:before,
.info-content,
.effect-wrapper {
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.img-box:after,
.img-box:before,
.info-box,
.info-box:after,
.info-box:before {
  background: rgba(0, 0, 0, 0.5);
}

.img-box, .info-box {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  float: left;
  -webkit-transform: scale(1, 1);
          transform: scale(1, 1);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.img-box img, .info-box img {
  display: block;
  position: relative;
  max-width: 100%;
  max-height: 100%;
}

.info-box {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  position: absolute;
  top: 0;
  left: 0;
}
.info-box .info-content {
  display: block;
  position: relative;
  padding: 2%;
  color: white;
}

/*
 *
 *	CSS3 Hover Style | Trans Effect
 *
 *	@package: css3_effect_01
 *
 */
.trans-effect {
  overflow: hidden;
}
.trans-effect .img-box {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.trans-effect.top .info-box {
  -webkit-transform: translate3d(0, 100%, 0);
          transform: translate3d(0, 100%, 0);
}
.trans-effect.top:hover .img-box {
  -webkit-transform: translate3d(0, -100%, 0);
          transform: translate3d(0, -100%, 0);
}
.trans-effect.top:hover .info-box {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.trans-effect.bottom .info-box {
  -webkit-transform: translate3d(0, -100%, 0);
          transform: translate3d(0, -100%, 0);
}
.trans-effect.bottom:hover .img-box {
  -webkit-transform: translate3d(0, 100%, 0);
          transform: translate3d(0, 100%, 0);
}
.trans-effect.bottom:hover .info-box {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.trans-effect.left .info-box {
  -webkit-transform: translate3d(100%, 0, 0);
          transform: translate3d(100%, 0, 0);
}
.trans-effect.left:hover .img-box {
  -webkit-transform: translate3d(-100%, 0, 0);
          transform: translate3d(-100%, 0, 0);
}
.trans-effect.left:hover .info-box {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.trans-effect.right .info-box {
  -webkit-transform: translate3d(-100%, 0, 0);
          transform: translate3d(-100%, 0, 0);
}
.trans-effect.right:hover .img-box {
  -webkit-transform: translate3d(100%, 0, 0);
          transform: translate3d(100%, 0, 0);
}
.trans-effect.right:hover .info-box {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}

/*
 *
 *	CSS3 Hover Style | Fade In Effect
 *
 *	@package: css3_effect_02
 *
 */
.fade-in-effect .img-box, .fade-in-effect .info-box {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
}
.fade-in-effect .info-box {
  z-index: 1;
  opacity: 0;
}
.fade-in-effect:hover .info-box {
  opacity: 1;
}

/*
 *
 *	CSS3 Hover Style | Over Trans Effect
 *
 *	@package: css3_effect_03
 *
 */
.over-trans-effect {
  overflow: hidden;
}
.over-trans-effect .img-box {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.over-trans-effect.top .info-box {
  -webkit-transform: translate3d(0, -100%, 0);
          transform: translate3d(0, -100%, 0);
}
.over-trans-effect.top:hover .info-box {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.over-trans-effect.bottom .info-box {
  -webkit-transform: translate3d(0, 100%, 0);
          transform: translate3d(0, 100%, 0);
}
.over-trans-effect.bottom:hover .info-box {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.over-trans-effect.left .info-box {
  -webkit-transform: translate3d(-100%, 0, 0);
          transform: translate3d(-100%, 0, 0);
}
.over-trans-effect.left:hover .info-box {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.over-trans-effect.right .info-box {
  -webkit-transform: translate3d(100%, 0, 0);
          transform: translate3d(100%, 0, 0);
}
.over-trans-effect.right:hover .info-box {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}

/*
 *
 *	CSS3 Hover Style | Zoom Out Effect
 *
 *	@package: css3_effect_04
 *
 */
.zoom-out-effect {
  overflow: hidden;
}
.zoom-out-effect .img-box, .zoom-out-effect .info-box {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
}
.zoom-out-effect .info-box {
  z-index: 1;
  opacity: 0;
}
.zoom-out-effect:hover .info-box {
  opacity: 1;
}
.zoom-out-effect:hover .img-box {
  -webkit-transform: translateZ(0) scale(1.15, 1.15);
          transform: translateZ(0) scale(1.15, 1.15);
}

/*
 *
 *	CSS3 Hover Style | Flip Effect
 *
 *	@package: css3_effect_05
 *
 */
.flip-effect {
  overflow: visible;
  -webkit-perspective: 1200px;
          perspective: 1200px;
  z-index: 2;
}
.flip-effect .effect-wrapper {
  overflow: visible !important;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.flip-effect .img-box, .flip-effect .info-box {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}
.flip-effect .img-box {
  z-index: 0;
}
.flip-effect.top .info-box {
  -webkit-transform: translate3d(0, 0, 0) rotate3d(1, 0, 0, -180deg);
          transform: translate3d(0, 0, 0) rotate3d(1, 0, 0, -180deg);
}
.flip-effect.top:hover .effect-wrapper {
  -webkit-transform: translate3d(0, 0, 0) rotate3d(1, 0, 0, -180deg);
          transform: translate3d(0, 0, 0) rotate3d(1, 0, 0, -180deg);
}
.flip-effect.bottom .info-box {
  -webkit-transform: translate3d(0, 0, 0) rotate3d(1, 0, 0, 180deg);
          transform: translate3d(0, 0, 0) rotate3d(1, 0, 0, 180deg);
}
.flip-effect.bottom:hover .effect-wrapper {
  -webkit-transform: translate3d(0, 0, 0) rotate3d(1, 0, 0, 180deg);
          transform: translate3d(0, 0, 0) rotate3d(1, 0, 0, 180deg);
}
.flip-effect.left .info-box {
  -webkit-transform: translate3d(0, 0, 0) rotate3d(0, 1, 0, 180deg);
          transform: translate3d(0, 0, 0) rotate3d(0, 1, 0, 180deg);
}
.flip-effect.left:hover .effect-wrapper {
  -webkit-transform: translate3d(0, 0, 0) rotate3d(0, 1, 0, 180deg);
          transform: translate3d(0, 0, 0) rotate3d(0, 1, 0, 180deg);
}
.flip-effect.right .info-box {
  -webkit-transform: translate3d(0, 0, 0) rotate3d(0, 1, 0, -180deg);
          transform: translate3d(0, 0, 0) rotate3d(0, 1, 0, -180deg);
}
.flip-effect.right:hover .effect-wrapper {
  -webkit-transform: translate3d(0, 0, 0) rotate3d(0, 1, 0, -180deg);
          transform: translate3d(0, 0, 0) rotate3d(0, 1, 0, -180deg);
}

/*
 *
 *	CSS3 Hover Style | Bubble Effect
 *
 *	@package: css3_effect_06
 *
 */
.bubble-effect {
  overflow: visible;
}
.bubble-effect .effect-wrapper {
  overflow: visible !important;
}
.bubble-effect .img-box, .bubble-effect .info-box {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}
.bubble-effect .info-box {
  z-index: 0;
}
.bubble-effect:hover .img-box {
  z-index: 9;
}
.bubble-effect.top:hover .img-box {
  -webkit-transform: translateZ(0) translateY(-60%) scale(0.5, 0.5);
          transform: translateZ(0) translateY(-60%) scale(0.5, 0.5);
}
.bubble-effect.bottom:hover .img-box {
  -webkit-transform: translateZ(0) translateY(60%) scale(0.5, 0.5);
          transform: translateZ(0) translateY(60%) scale(0.5, 0.5);
}
.bubble-effect.left:hover .img-box {
  -webkit-transform: translateZ(0) translateX(-60%) scale(0.5, 0.5);
          transform: translateZ(0) translateX(-60%) scale(0.5, 0.5);
}
.bubble-effect.right:hover .img-box {
  -webkit-transform: translateZ(0) translateX(60%) scale(0.5, 0.5);
          transform: translateZ(0) translateX(60%) scale(0.5, 0.5);
}

/*
 *
 *	CSS3 Hover Style | Zoom In Effect
 *
 *	@package: css3_effect_07
 *
 */
.zoom-in-effect {
  overflow: hidden;
}
.zoom-in-effect .img-box, .zoom-in-effect .info-box {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
}
.zoom-in-effect .info-box {
  z-index: 1;
  -webkit-transform: translate3d(0, 0, 0) scale(2, 2);
          transform: translate3d(0, 0, 0) scale(2, 2);
  opacity: 0;
}
.zoom-in-effect:hover .img-box {
  -webkit-transform: translate3d(0, 0, 0) scale(1.1, 1.1);
          transform: translate3d(0, 0, 0) scale(1.1, 1.1);
}
.zoom-in-effect:hover .info-box {
  -webkit-transform: translate3d(0, 0, 0) scale(1, 1);
          transform: translate3d(0, 0, 0) scale(1, 1);
  opacity: 1;
}

/*
 *
 *	CSS3 Hover Style | Square Spin Effect
 *
 *	@package: css3_effect_08
 *
 */
.square-spin-effect {
  overflow: hidden;
}
.square-spin-effect .info-box {
  opacity: 0;
  background: transparent;
  -webkit-transform: translate3d(0, 0, 0) scale(2, 2);
          transform: translate3d(0, 0, 0) scale(2, 2);
}
.square-spin-effect .info-box * {
  z-index: 3;
}
.square-spin-effect .info-box:after, .square-spin-effect .info-box:before {
  content: "";
  border-radius: 0 !important;
  display: block;
  position: absolute;
  visibility: visible;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.square-spin-effect.vertical .info-box:before {
  -webkit-transform: translate3d(0, 0, 0) translateX(100%) rotate3d(0, 0, 1, 180deg);
          transform: translate3d(0, 0, 0) translateX(100%) rotate3d(0, 0, 1, 180deg);
}
.square-spin-effect.vertical .info-box:after {
  -webkit-transform: translate3d(0, 0, 0) translateX(-100%) rotate3d(0, 0, 1, 180deg);
          transform: translate3d(0, 0, 0) translateX(-100%) rotate3d(0, 0, 1, 180deg);
}
.square-spin-effect.vertical:hover .info-box {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0) scale(1, 1);
          transform: translate3d(0, 0, 0) scale(1, 1);
}
.square-spin-effect.vertical:hover .info-box:before {
  -webkit-transform: translate3d(0, 0, 0) translateX(50%) rotate3d(0, 0, 1, 0deg);
          transform: translate3d(0, 0, 0) translateX(50%) rotate3d(0, 0, 1, 0deg);
}
.square-spin-effect.vertical:hover .info-box:after {
  -webkit-transform: translate3d(0, 0, 0) translateX(-50%) rotate3d(0, 0, 1, 0deg);
          transform: translate3d(0, 0, 0) translateX(-50%) rotate3d(0, 0, 1, 0deg);
}
.square-spin-effect.horizontal .info-box:before {
  -webkit-transform: translate3d(0, 0, 0) translateY(100%) rotate3d(0, 0, 1, 180deg);
          transform: translate3d(0, 0, 0) translateY(100%) rotate3d(0, 0, 1, 180deg);
}
.square-spin-effect.horizontal .info-box:after {
  -webkit-transform: translate3d(0, 0, 0) translateY(-100%) rotate3d(0, 0, 1, 180deg);
          transform: translate3d(0, 0, 0) translateY(-100%) rotate3d(0, 0, 1, 180deg);
}
.square-spin-effect.horizontal:hover .info-box {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0) scale(1, 1);
          transform: translate3d(0, 0, 0) scale(1, 1);
}
.square-spin-effect.horizontal:hover .info-box:before {
  -webkit-transform: translate3d(0, 0, 0) translateY(50%) rotate3d(0, 0, 1, 0deg);
          transform: translate3d(0, 0, 0) translateY(50%) rotate3d(0, 0, 1, 0deg);
}
.square-spin-effect.horizontal:hover .info-box:after {
  -webkit-transform: translate3d(0, 0, 0) translateY(-50%) rotate3d(0, 0, 1, 0deg);
          transform: translate3d(0, 0, 0) translateY(-50%) rotate3d(0, 0, 1, 0deg);
}

/*
 *
 *	CSS3 Hover Style | Over Flip Effect
 *
 *	@package: css3_effect_09
 *
 */
.over-flip-effect {
  -webkit-perspective: 1200px;
          perspective: 1200px;
}
.over-flip-effect .effect-wrapper {
  -webkit-perspective: 1200px;
          perspective: 1200px;
  overflow: visible !important;
}
.over-flip-effect .img-box, .over-flip-effect .info-box {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform-origin: center center right;
          transform-origin: center center right;
}
.over-flip-effect .img-box {
  z-index: 2;
}
.over-flip-effect .info-box {
  z-index: 1;
  position: absolute;
}
.over-flip-effect.top .info-box {
  -webkit-transform: rotate3d(1, 0, 0, -90deg);
          transform: rotate3d(1, 0, 0, -90deg);
}
.over-flip-effect.top:hover .img-box {
  -webkit-transform: rotate3d(1, 0, 0, 90deg);
          transform: rotate3d(1, 0, 0, 90deg);
}
.over-flip-effect.top:hover .info-box {
  -webkit-transform: rotate3d(1, 0, 0, 0deg);
          transform: rotate3d(1, 0, 0, 0deg);
}
.over-flip-effect.bottom .info-box {
  -webkit-transform: rotate3d(1, 0, 0, 90deg);
          transform: rotate3d(1, 0, 0, 90deg);
}
.over-flip-effect.bottom:hover .img-box {
  -webkit-transform: rotate3d(1, 0, 0, -90deg);
          transform: rotate3d(1, 0, 0, -90deg);
}
.over-flip-effect.bottom:hover .info-box {
  -webkit-transform: rotate3d(1, 0, 0, 0deg);
          transform: rotate3d(1, 0, 0, 0deg);
}
.over-flip-effect.left .info-box {
  -webkit-transform: rotate3d(0, 1, 0, 90deg);
          transform: rotate3d(0, 1, 0, 90deg);
}
.over-flip-effect.left:hover .img-box {
  -webkit-transform: rotate3d(0, 1, 0, -90deg);
          transform: rotate3d(0, 1, 0, -90deg);
}
.over-flip-effect.left:hover .info-box {
  -webkit-transform: rotate3d(0, 1, 0, 0deg);
          transform: rotate3d(0, 1, 0, 0deg);
}
.over-flip-effect.right .info-box {
  -webkit-transform: rotate3d(0, 1, 0, -90deg);
          transform: rotate3d(0, 1, 0, -90deg);
}
.over-flip-effect.right:hover .img-box {
  -webkit-transform: rotate3d(0, 1, 0, 90deg);
          transform: rotate3d(0, 1, 0, 90deg);
}
.over-flip-effect.right:hover .info-box {
  -webkit-transform: rotate3d(0, 1, 0, 0deg);
          transform: rotate3d(0, 1, 0, 0deg);
}

/*
 *
 *	CSS3 Hover Style | Rotate Switch Effect
 *
 *	@package: css3_effect_10
 *
 */
.rotate-switch-effect {
  z-index: 2;
}
.rotate-switch-effect .effect-wrapper {
  overflow: visible !important;
}
.rotate-switch-effect .info-box {
  -webkit-transform: rotate(360deg) scale(0, 0);
          transform: rotate(360deg) scale(0, 0);
}
.rotate-switch-effect .img-box {
  -webkit-transform: rotate(0) scale(1, 1);
          transform: rotate(0) scale(1, 1);
}
.rotate-switch-effect:hover .info-box {
  -webkit-transform: rotate(0) scale(1, 1);
          transform: rotate(0) scale(1, 1);
}
.rotate-switch-effect:hover .img-box {
  -webkit-transform: rotate(-360deg) scale(0, 0);
          transform: rotate(-360deg) scale(0, 0);
  z-index: 0;
}

/*
 *
 *	CSS3 Hover Style | Grid Reveal Effect
 *
 *	@package: css3_effect_11
 *
 */
.grid-reveal-effect .effect-wrapper {
  overflow: visible;
}
.grid-reveal-effect .img-box, .grid-reveal-effect .info-box {
  -webkit-perspective: 1200px;
          perspective: 1200px;
}
.grid-reveal-effect .info-box {
  background: none;
}
.grid-reveal-effect .info-box .info-content {
  z-index: 2 !important;
  opacity: 0;
}
.grid-reveal-effect.round {
  overflow: hidden;
}
.grid-reveal-effect .img-box:after, .grid-reveal-effect .img-box:before, .grid-reveal-effect .info-box:after, .grid-reveal-effect .info-box:before {
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  border-radius: 0 !important;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  opacity: 0;
}
.grid-reveal-effect.horizontal .img-box:before {
  top: 0;
}
.grid-reveal-effect.horizontal .img-box:after {
  top: 25%;
}
.grid-reveal-effect.horizontal .info-box:after {
  top: 50%;
}
.grid-reveal-effect.horizontal .info-box:before {
  top: 75%;
}
.grid-reveal-effect.horizontal .img-box:before,
.grid-reveal-effect.horizontal .img-box:after,
.grid-reveal-effect.horizontal .info-box:after,
.grid-reveal-effect.horizontal .info-box:before {
  left: 0;
  width: 100%;
  height: 25%;
  -webkit-transform: rotate3d(1, 0, 0, 90deg);
          transform: rotate3d(1, 0, 0, 90deg);
}
.grid-reveal-effect.vertical .img-box:before {
  left: 0;
}
.grid-reveal-effect.vertical .img-box:after {
  left: 25%;
}
.grid-reveal-effect.vertical .info-box:after {
  left: 50%;
}
.grid-reveal-effect.vertical .info-box:before {
  left: 75%;
}
.grid-reveal-effect.vertical .img-box:before,
.grid-reveal-effect.vertical .img-box:after,
.grid-reveal-effect.vertical .info-box:after,
.grid-reveal-effect.vertical .info-box:before {
  top: 0;
  width: 45%;
  height: 100%;
  -webkit-transform: rotate3d(0, 1, 0, 90deg);
          transform: rotate3d(0, 1, 0, 90deg);
}
.grid-reveal-effect:hover .img-box:after, .grid-reveal-effect:hover .img-box:before, .grid-reveal-effect:hover .info-box:after, .grid-reveal-effect:hover .info-box:before {
  -webkit-transform: rotate3d(1, 0, 0, 0deg);
          transform: rotate3d(1, 0, 0, 0deg);
  opacity: 1;
}
.grid-reveal-effect:hover .info-content {
  -webkit-transform: scale(1);
          transform: scale(1);
  opacity: 1;
}

/*
 *
 *	CSS3 Hover Style | Swipe Effect
 *
 *	@package: css3_effect_12
 *
 */
.swipe-effect.round {
  overflow: hidden;
}
.swipe-effect .info-box {
  background: none;
}
.swipe-effect .info-box .info-content {
  z-index: 2;
}
.swipe-effect .info-box:before, .swipe-effect .info-box:after {
  content: '';
  display: block;
  position: absolute;
  border-radius: 0 !important;
  width: 210%;
  height: 30%;
  z-index: 1;
  left: 115%;
  top: -10%;
  -webkit-transform: translate3d(-50%, -50%, 0) rotate3d(0, 0, 1, 45deg);
          transform: translate3d(-50%, -50%, 0) rotate3d(0, 0, 1, 45deg);
}
.swipe-effect .info-box:before {
  background-color: rgba(255, 255, 255, 0.15);
  -webkit-transition: all 0.8s ease-in-out;
  transition: all 0.8s ease-in-out;
}
.swipe-effect .info-box:after {
  background-color: rgba(255, 255, 255, 0.08);
  -webkit-transition: all 1.1s ease-in-out;
  transition: all 1.1s ease-in-out;
}
.swipe-effect .img-box:before {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.swipe-effect .img-box:before, .swipe-effect .info-box .info-content {
  opacity: 0;
}
.swipe-effect:hover .img-box:before, .swipe-effect:hover .info-content {
  opacity: 1;
}
.swipe-effect:hover .info-box:before, .swipe-effect:hover .info-box:after {
  left: -100%;
  top: 210%;
}
.swipe-effect:hover .info-box:before {
  height: 220%;
}
.swipe-effect:hover .info-box:after {
  height: 100%;
}

/*
 *
 *	CSS3 Hover Style | Flip Back Effect
 *
 *	@package: css3_effect_13
 *
 */
.flip-back-effect {
  -webkit-perspective: 1200px;
          perspective: 1200px;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.flip-back-effect .effect-wrapper {
  -webkit-perspective: 1200px;
          perspective: 1200px;
  overflow: visible !important;
}
.flip-back-effect .img-box {
  z-index: 1;
}
.flip-back-effect .info-box {
  z-index: 0;
}
.flip-back-effect:hover .img-box {
  opacity: 0;
}
.flip-back-effect:hover.top .img-box {
  -webkit-transform: translateY(-100%) rotate3d(1, 0, 0, 90deg);
          transform: translateY(-100%) rotate3d(1, 0, 0, 90deg);
  -webkit-transform-origin: bottom;
          transform-origin: bottom;
}
.flip-back-effect:hover.right .img-box {
  -webkit-transform: translateX(100%) rotate3d(0, 1, 0, 90deg);
          transform: translateX(100%) rotate3d(0, 1, 0, 90deg);
  -webkit-transform-origin: left;
          transform-origin: left;
}
.flip-back-effect:hover.bottom .img-box {
  -webkit-transform: translateY(100%) rotate3d(1, 0, 0, -90deg);
          transform: translateY(100%) rotate3d(1, 0, 0, -90deg);
  -webkit-transform-origin: top;
          transform-origin: top;
}
.flip-back-effect:hover.left .img-box {
  -webkit-transform: translateX(-100%) rotate3d(0, 1, 0, -90deg);
          transform: translateX(-100%) rotate3d(0, 1, 0, -90deg);
  -webkit-transform-origin: right;
          transform-origin: right;
}

/*
 *
 *	CSS3 Hover Style | Rotate 3D Effect
 *
 *	@package: css3_effect_14
 *
 */
.switch-3d-effect {
  -webkit-perspective: 1200px;
          perspective: 1200px;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.switch-3d-effect .effect-wrapper {
  -webkit-perspective: 1200px;
          perspective: 1200px;
  overflow: visible !important;
}
.switch-3d-effect .img-box {
  z-index: 1;
}
.switch-3d-effect .info-box {
  z-index: 0;
  opacity: 0;
}
.switch-3d-effect.top .info-box {
  -webkit-transform: translate3d(0, -50%, 0) rotate3d(1, 0, 0, 90deg);
          transform: translate3d(0, -50%, 0) rotate3d(1, 0, 0, 90deg);
}
.switch-3d-effect.right .info-box {
  -webkit-transform: translate3d(50%, 0, 0) rotate3d(0, 1, 0, 90deg);
          transform: translate3d(50%, 0, 0) rotate3d(0, 1, 0, 90deg);
}
.switch-3d-effect.bottom .info-box {
  -webkit-transform: translate3d(0, 50%, 0) rotate3d(1, 0, 0, -90deg);
          transform: translate3d(0, 50%, 0) rotate3d(1, 0, 0, -90deg);
}
.switch-3d-effect.left .info-box {
  -webkit-transform: translate3d(-50%, 0, 0) rotate3d(0, 1, 0, -90deg);
          transform: translate3d(-50%, 0, 0) rotate3d(0, 1, 0, -90deg);
}
.switch-3d-effect:hover .img-box {
  opacity: 0;
}
.switch-3d-effect:hover .info-box {
  opacity: 1;
}
.switch-3d-effect:hover.top .img-box {
  -webkit-transform: translate3d(0, -100%, 0) rotate3d(1, 0, 0, 90deg);
          transform: translate3d(0, -100%, 0) rotate3d(1, 0, 0, 90deg);
  -webkit-transform-origin: bottom;
          transform-origin: bottom;
}
.switch-3d-effect:hover.top .info-box {
  -webkit-transform: translate3d(0, 0, 0) rotate3d(1, 0, 0, 0deg);
          transform: translate3d(0, 0, 0) rotate3d(1, 0, 0, 0deg);
  -webkit-transform-origin: top;
          transform-origin: top;
}
.switch-3d-effect:hover.right .img-box {
  -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 1, 0, 90deg);
          transform: translate3d(100%, 0, 0) rotate3d(0, 1, 0, 90deg);
  -webkit-transform-origin: left;
          transform-origin: left;
}
.switch-3d-effect:hover.right .info-box {
  -webkit-transform: translate3d(0, 0, 0) rotate3d(1, 0, 0, 0deg);
          transform: translate3d(0, 0, 0) rotate3d(1, 0, 0, 0deg);
  -webkit-transform-origin: right;
          transform-origin: right;
}
.switch-3d-effect:hover.bottom .img-box {
  -webkit-transform: translate3d(0, 100%, 0) rotate3d(1, 0, 0, -90deg);
          transform: translate3d(0, 100%, 0) rotate3d(1, 0, 0, -90deg);
  -webkit-transform-origin: top;
          transform-origin: top;
}
.switch-3d-effect:hover.bottom .info-box {
  -webkit-transform: translate3d(0, 0, 0) rotate3d(1, 0, 0, 0deg);
          transform: translate3d(0, 0, 0) rotate3d(1, 0, 0, 0deg);
  -webkit-transform-origin: bottom;
          transform-origin: bottom;
}
.switch-3d-effect:hover.left .img-box {
  -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 1, 0, -90deg);
          transform: translate3d(-100%, 0, 0) rotate3d(0, 1, 0, -90deg);
  -webkit-transform-origin: right;
          transform-origin: right;
}
.switch-3d-effect:hover.left .info-box {
  -webkit-transform: translate3d(0, 0, 0) rotate3d(1, 0, 0, 0deg);
          transform: translate3d(0, 0, 0) rotate3d(1, 0, 0, 0deg);
  -webkit-transform-origin: left;
          transform-origin: left;
}

/*
 *
 *	CSS3 Hover Style | Flip Forward Effect
 *
 *	@package: css3_effect_15
 *
 */
.flip-forward-effect {
  -webkit-perspective: 1200px;
          perspective: 1200px;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.flip-forward-effect .effect-wrapper {
  -webkit-perspective: 1200px;
          perspective: 1200px;
  overflow: visible !important;
}
.flip-forward-effect .img-box {
  z-index: 1;
}
.flip-forward-effect .info-box {
  z-index: 2;
  opacity: 0;
}
.flip-forward-effect.top .info-box {
  -webkit-transform: translate3d(0, -100%, 0) rotate3d(1, 0, 0, 90deg);
          transform: translate3d(0, -100%, 0) rotate3d(1, 0, 0, 90deg);
  -webkit-transform-origin: bottom;
          transform-origin: bottom;
}
.flip-forward-effect.right .info-box {
  -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 1, 0, 90deg);
          transform: translate3d(100%, 0, 0) rotate3d(0, 1, 0, 90deg);
  -webkit-transform-origin: left;
          transform-origin: left;
}
.flip-forward-effect.bottom .info-box {
  -webkit-transform: translate3d(0, 100%, 0) rotate3d(1, 0, 0, -90deg);
          transform: translate3d(0, 100%, 0) rotate3d(1, 0, 0, -90deg);
  -webkit-transform-origin: top;
          transform-origin: top;
}
.flip-forward-effect.left .info-box {
  -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 1, 0, -90deg);
          transform: translate3d(-100%, 0, 0) rotate3d(0, 1, 0, -90deg);
  -webkit-transform-origin: right;
          transform-origin: right;
}
.flip-forward-effect:hover .info-box {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0) rotate3d(1, 1, 0, 0);
          transform: translate3d(0, 0, 0) rotate3d(1, 1, 0, 0);
}

/*
 *
 *	CSS3 Hover Style | Slow Zoom Effect
 *
 *	@package: css3_effect_16
 *
 */
.slow-zoom-effect {
  overflow: hidden;
}
.slow-zoom-effect .img-box {
  z-index: 0;
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transition: all 0.5s ease-in-out !important;
  transition: all 0.5s ease-in-out !important;
}
.slow-zoom-effect .info-box {
  z-index: 2;
  opacity: 0;
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}
.slow-zoom-effect:hover .img-box {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}
.slow-zoom-effect:hover .info-box {
  opacity: 0.9;
  background: black;
  -webkit-transform: scale(1);
          transform: scale(1);
}