@media screen and (min-width:768px) {
  #header {
    -webkit-transition: margin-top .36s;
    -o-transition: margin-top .36s;
    -moz-transition: margin-top .36s;
    transition: margin-top .36s
  }
  #header_logo a {
    -webkit-transition: inherit;
    -o-transition: inherit;
    -moz-transition: inherit;
    transition: inherit
  }
}

@media screen and (min-width:1024px) {
  .banner-top .custom-html {
    -webkit-transition: -webkit-transform .7s, opacity .7s;
    -moz-transition: -moz-transform .7s, opacity .7s;
    -o-transition: -o-transform .7s, opacity .7s;
    transition: transform .7s, opacity .7s;
    z-index: 2
  }
  .banner-top .banner-item-content:hover .custom-html {
    -webkit-transform: translateY(-50%) rotateY(90deg);
    -moz-transform: translateY(-50%) rotateY(90deg);
    -o-transform: translateY(-50%) rotateY(90deg);
    -ms-transform: translateY(-50%) rotateY(90deg);
    transform: translateY(-50%) rotateY(90deg);
    opacity: 0
  }
  .PhenyxBanners.displayPhenyxBanners2 a.wrap-effect:after,
  .item-news a.wrap-effect:after {
    content: "\e605";
    font-family: fontello;
    display: block;
    width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    font-size: 23px;
    color: #fff;
    background: #761B71;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    margin: auto;
    -webkit-transform: scale(4);
    -moz-transform: scale(4);
    -o-transform: scale(4);
    -ms-transform: scale(4);
    transform: scale(4);
    -webkit-filter: blur(19px);
    filter: blur(19px);
    opacity: 0
  }
  .item-news a.wrap-effect:after {
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 16px
  }
  .displayPhenyxBanners2 a.wrap-effect:before,
  .item-news a.wrap-effect:before {
    content: '';
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: rgba(118, 27, 113, .8);
    position: absolute;
    opacity: 0
  }
  .PhenyxBanners.displayPhenyxBanners2 a.wrap-effect:after,
  .PhenyxBanners.displayPhenyxBanners2 a.wrap-effect:before,
  .item-news a.wrap-effect:after,
  .item-news a.wrap-effect:before {
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out
  }
  .PhenyxBanners.displayPhenyxBanners2 a.wrap-effect:hover:after,
  .PhenyxBanners.displayPhenyxBanners2 a.wrap-effect:hover:before,
  .item-news a.wrap-effect:hover:after,
  .item-news a.wrap-effect:hover:before {
    opacity: 1
  }
  .PhenyxBanners.displayPhenyxBanners2 a.wrap-effect:hover:after,
  .item-news a.wrap-effect:hover:after {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -webkit-filter: blur(0);
    filter: blur(0)
  }
  .wrap-effect:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    -webkit-transition: opacity .8s;
    transition: opacity .8s
  }
  .banner-item-content:hover .wrap-effect:before {
    opacity: 0
  }
  .ajax_block_product .lnk_view {
    -webkit-transition: opacity .8s, -webkit-transform .8s;
    -moz-transition: opacity .8s, -moz-transform .8s;
    -o-transition: opacity .8s, -o-transform .8s;
    transition: opacity .8s, transform .8s
  }
  .ajax_block_product .product-image-container .lnk_view {
    -webkit-transform: translate(-50%, -50%) rotateY(90deg);
    -moz-transform: translate(-50%, -50%) rotateY(90deg);
    -o-transform: translate(-50%, -50%) rotateY(90deg);
    -ms-transform: translate(-50%, -50%) rotateY(90deg);
    transform: translate(-50%, -50%) rotateY(90deg);
    opacity: 0
  }
  .ajax_block_product .product-image-container:hover .lnk_view {
    -webkit-transform: translate(-50%, -50%) rotateY(360deg);
    -moz-transform: translate(-50%, -50%) rotateY(360deg);
    -o-transform: translate(-50%, -50%) rotateY(360deg);
    -ms-transform: translate(-50%, -50%) rotateY(360deg);
    transform: translate(-50%, -50%) rotateY(360deg);
    opacity: 1
  }
  .ajax_block_product .add_to_compare {
    -webkit-transition: text-indent .2s;
    -moz-transition: text-indent .2s;
    -o-transition: text-indent .2s;
    transition: text-indent .2s
  }
  .scale_image img {
    -webkit-transition: -webkit-transform .5s;
    -moz-transition: -moz-transform .5s;
    -o-transition: -o-transform .5s;
    transition: transform .5s
  }
  .product-image-container:hover .scale_image img,
  .subcategory__img-wrap:hover .scale_image img {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1)
  }
  #layer_cart .cross,
  #layered_block_left ul.color-group li,
  .content_sortPagiBar .display li a span:after,
  .content_sortPagiBar .display li a span:before,
  .content_sortPagiBar .display li a:after,
  .content_sortPagiBar .display li a:before,
  .form-control,
  .shopping_cart>a {
    -webkit-transition: 450ms;
    -o-transition: 450ms;
    -moz-transition: 450ms;
    transition: 450ms
  }
  #page .ui-slider-handle.ui-state-default.ui-corner-all {
    -webkit-transition: background .2s ease-in-out .2s;
    -o-transition: background .2s ease-in-out .2s;
    -moz-transition: background .2s ease-in-out .2s;
    transition: background .2s ease-in-out .2s
  }
  .chosen-container-single .chosen-single div,
  a,
  button {
    -webkit-transition: color .3s, background .3s;
    -o-transition: color .3s, background .3s;
    -moz-transition: color .3s, background .3s;
    transition: color .3s, background .3s
  }
  .black-btn,
  .btn.btn-default,
  a.button,
  a.button_large,
  a.button_mini,
  a.button_small,
  a.exclusive,
  a.exclusive_large,
  a.exclusive_mini,
  a.exclusive_small,
  button.button,
  input.button,
  input.button_disabled,
  input.button_large,
  input.button_large_disabled,
  input.button_mini,
  input.button_mini_disabled,
  input.button_small,
  input.button_small_disabled,
  input.exclusive,
  input.exclusive_disabled,
  input.exclusive_large,
  input.exclusive_large_disabled,
  input.exclusive_mini,
  input.exclusive_mini_disabled,
  input.exclusive_small,
  input.exclusive_small_disabled,
  span.button,
  span.button_large,
  span.button_mini,
  span.button_small,
  span.exclusive,
  span.exclusive_large,
  span.exclusive_large_disabled,
  span.exclusive_mini,
  span.exclusive_small {
    -webkit-transition: color .2s linear, background .2s;
    -o-transition: color .2s linear, background .2s;
    -moz-transition: color .2s linear, background .2s;
    transition: color .2s linear, background .2s
  }
  .content_sortPagiBar .display li,
  .content_sortPagiBar .display_m li {
    -webkit-transition: opacity .3s;
    -moz-transition: opacity .3s;
    -o-transition: opacity .3s;
    transition: opacity .3s
  }
  .content_sortPagiBar .display li#list:hover a span:after,
  .content_sortPagiBar .display li#list:hover a:after,
  .content_sortPagiBar .display li#list:hover a:before {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg)
  }
}

input.form-error {
  border: 1px solid #f13340;
  color: #f13340;
  background: url(../../img/icon/form-error.png) 98% 5px no-repeat #fff1f2;
}

input.form-ok {
  border: 1px solid #46a74e;
  color: #35b33f;
  background: url(../../img/icon/form-ok.png) 98% 5px no-repeat #ddf9e1;
}

.registration_alert {
  position: absolute;
  background: url(../../img/icon/popup-error.png) 5px 5px no-repeat #2c2c2c;
  z-index: 99;
  max-width: 200px;
  padding: 10px 30px;
  color: white;
  font-size: 18px;
  line-height: 25px;
  right: 100px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  border-radius: 3px;
  margin-top: 11px !important;
}

.registration_alert:before {
  border-color: transparent;
  border-bottom-color: #2c2c2c;
  border-style: solid;
  border-width: 10px;
  content: "";
  height: 0;
  right: 10px;
  position: absolute;
  top: -20px;
  width: 0;
}

button.animated-button.pulse {
  float: right;
  padding: 10px 30px;
  border-radius: 10px;
  font-size: 1.2em;
  font-weight: 600;
  background: transparent;
  color: white;
  text-transform: uppercase;
}

button.animated-button.pulse:hover,
button.animated-button.pulse:focus {
  -webkit-animation: pulse 1s;
  animation: pulse 1s;
  box-shadow: 0 0 0 2em rgba(255, 255, 255, 0);
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 var(--hover);
  }
}

.pulse {
  --color: #ef6eae;
  --hover: #ef8f6e;
}

.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;
}

.button-effect {
  cursor: pointer;
}

.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: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);
  }
}