/**
 *
 *  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%;
}

/*
 *
 *	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: 25%;
  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 1.5s ease-in-out !important;
  transition: all 1.5s ease-in-out !important;
}
.slow-zoom-effect .info-box {
  z-index: 2;
  opacity: 0;
  -webkit-transform: scale(1.3);
          transform: scale(1.3);
}
.slow-zoom-effect:hover .img-box {
  -webkit-transform: scale(1.5);
          transform: scale(1.5);
}
.slow-zoom-effect:hover .info-box {
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
}

/*
 *
 *	CSS3 Hover Style | Bubble Flow Effect
 *
 *	@package: css3_effect_17
 *
 */
.tada-effect .img-box, .tada-effect .info-box {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
}
.tada-effect .info-box {
  z-index: 1;
  opacity: 0;
}
.tada-effect:hover {
  z-index: 3;
  -webkit-animation: tada 0.8s linear 0s;
          animation: tada 0.8s linear 0s;
}
.tada-effect:hover .info-box {
  opacity: 1;
}

@-webkit-keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }

  10%, 20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
            transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }

  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.02, 1.02, 1.02) rotate3d(0, 0, 1, 3deg);
            transform: scale3d(1.02, 1.02, 1.02) rotate3d(0, 0, 1, 3deg);
  }

  40%, 60%, 80% {
    -webkit-transform: scale3d(1.02, 1.02, 1.02) rotate3d(0, 0, 1, -3deg);
            transform: scale3d(1.02, 1.02, 1.02) rotate3d(0, 0, 1, -3deg);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}

@keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }

  10%, 20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
            transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }

  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.02, 1.02, 1.02) rotate3d(0, 0, 1, 3deg);
            transform: scale3d(1.02, 1.02, 1.02) rotate3d(0, 0, 1, 3deg);
  }

  40%, 60%, 80% {
    -webkit-transform: scale3d(1.02, 1.02, 1.02) rotate3d(0, 0, 1, -3deg);
            transform: scale3d(1.02, 1.02, 1.02) rotate3d(0, 0, 1, -3deg);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}

/*
 *
 *	CSS3 Hover Style | Flip In X Effect
 *
 *	@package: css3_effect_18
 *
 */
.flip-in-x-effect {
  overflow: visible !important;
}
.flip-in-x-effect .effect-wrapper {
  overflow: visible !important;
}
.flip-in-x-effect .img-box, .flip-in-x-effect .info-box {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
}
.flip-in-x-effect .info-box {
  opacity: 0;
  z-index: 1;
}
.flip-in-x-effect:hover {
  z-index: 3;
}
.flip-in-x-effect:hover .info-box {
  opacity: 1;
  -webkit-animation: flipInX 0.8s linear 0s;
          animation: flipInX 0.8s linear 0s;
}

@-webkit-keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
            transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
            transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
            transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
            transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
            transform: perspective(400px);
  }
}

@keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
            transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
            transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
            transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
            transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
            transform: perspective(400px);
  }
}

/*
 *
 *	CSS3 Hover Style | Jello Effect
 *
 *	@package: css3_effect_19
 *
 */
.jello-effect {
  overflow: visible !important;
}
.jello-effect .effect-wrapper {
  overflow: visible !important;
}
.jello-effect .img-box, .jello-effect .info-box {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
}
.jello-effect .info-box {
  opacity: 0;
  z-index: 1;
}
.jello-effect:hover {
  z-index: 3;
}
.jello-effect:hover .info-box {
  opacity: 1;
  -webkit-animation: jello 0.8s linear 0s;
          animation: jello 0.8s linear 0s;
}

@-webkit-keyframes jello {
  from, 11.1%, to {
    -webkit-transform: none;
            transform: none;
  }

  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
            transform: skewX(-12.5deg) skewY(-12.5deg);
  }

  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
            transform: skewX(6.25deg) skewY(6.25deg);
  }

  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
            transform: skewX(-3.125deg) skewY(-3.125deg);
  }

  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
            transform: skewX(1.5625deg) skewY(1.5625deg);
  }

  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
            transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }

  77.7% {
    -webkit-transform: skewX(0.39063deg) skewY(0.39063deg);
            transform: skewX(0.39063deg) skewY(0.39063deg);
  }

  88.8% {
    -webkit-transform: skewX(-0.19531deg) skewY(-0.19531deg);
            transform: skewX(-0.19531deg) skewY(-0.19531deg);
  }
}

@keyframes jello {
  from, 11.1%, to {
    -webkit-transform: none;
            transform: none;
  }

  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
            transform: skewX(-12.5deg) skewY(-12.5deg);
  }

  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
            transform: skewX(6.25deg) skewY(6.25deg);
  }

  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
            transform: skewX(-3.125deg) skewY(-3.125deg);
  }

  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
            transform: skewX(1.5625deg) skewY(1.5625deg);
  }

  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
            transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }

  77.7% {
    -webkit-transform: skewX(0.39063deg) skewY(0.39063deg);
            transform: skewX(0.39063deg) skewY(0.39063deg);
  }

  88.8% {
    -webkit-transform: skewX(-0.19531deg) skewY(-0.19531deg);
            transform: skewX(-0.19531deg) skewY(-0.19531deg);
  }
}

/*
 *
 *	CSS3 Hover Style | Wobble Effect
 *
 *	@package: css3_effect_20
 *
 */
.wobble-effect {
  overflow: visible !important;
}
.wobble-effect .effect-wrapper {
  overflow: visible !important;
}
.wobble-effect .img-box, .wobble-effect .info-box {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
}
.wobble-effect .info-box {
  opacity: 0;
  z-index: 1;
}
.wobble-effect:hover {
  z-index: 3;
}
.wobble-effect:hover .info-box {
  opacity: 1;
  -webkit-animation: wobble 0.8s linear 0s;
          animation: wobble 0.8s linear 0s;
}

@-webkit-keyframes wobble {
  from {
    -webkit-transform: none;
            transform: none;
  }

  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
            transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }

  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
            transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }

  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
            transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }

  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
            transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }

  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
            transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }

  to {
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes wobble {
  from {
    -webkit-transform: none;
            transform: none;
  }

  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
            transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }

  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
            transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }

  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
            transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }

  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
            transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }

  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
            transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }

  to {
    -webkit-transform: none;
            transform: none;
  }
}

/*
 *
 *	CSS3 Hover Style | Wobble Effect
 *
 *	@package: css3_effect_21
 *
 */
.bounce-in-effect {
  overflow: visible !important;
}
.bounce-in-effect .effect-wrapper {
  overflow: visible !important;
}
.bounce-in-effect .img-box, .bounce-in-effect .info-box {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
}
.bounce-in-effect .info-box {
  opacity: 0;
  z-index: 1;
}
.bounce-in-effect:hover {
  z-index: 3;
}
.bounce-in-effect:hover .info-box {
  opacity: 1;
  -webkit-animation: bounceIn 0.8s linear 0s;
          animation: bounceIn 0.8s linear 0s;
}

@-webkit-keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
            transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
            transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
            transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
            transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
            transform: scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}

@keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
            transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
            transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
            transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
            transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
            transform: scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}