/* Hover box structure */
.wl_hover_box{
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  min-height: 100%;
  display: inline-grid;

  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;

}

.wl_hover_box .hover-content{
  position: absolute;
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-size: cover;
  background-position: center;

  -webkit-transition: all 0.6s ease;
  transition: all 0.6s ease;
}

.hover-content .hover-box-inner{
  position: absolute;
  display: block;
  width: 100%;
  height: auto;
  left: 0;
  top: 0;
  -webkit-transition: all 0.6s ease;
  transition: all 0.6s ease;
}

.hover-content.position-middle .hover-box-inner {
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.hover-content.position-bottom .hover-box-inner {
  bottom: 0;
  top: unset;
}

.hover-content.foreground{
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  background: rgba(0,0,0,0.6);
}


.wl_hover_box:hover .hover-content.foreground{
  opacity: 1;
  visibility: visible;
}

.effect-zoom-in.hover-content{
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}

.wl_hover_box:hover .hover-content.effect-zoom-in{
  -webkit-transform: scale(1);
  transform: scale(1);
}

.effect-zoom-out.hover-content{
  -webkit-transform: scale(1);
  transform: scale(1);
}

.wl_hover_box:hover .hover-content.effect-zoom-out{
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}

.wl_hover_box:hover .hover-content.effect-fade-out{
  opacity: 0;
}

.wl_hover_box:hover .hover-content.effect-fade-in{
  opacity: 1;
}

.wl_hover_box:hover .hover-content.effect-to-right{

}

.wl_hover_box .hover-content.effect-from-left .hover-box-inner{
  margin-left: -100%;
}

.wl_hover_box:hover .hover-content.effect-from-left .hover-box-inner{
  margin-left: 0;
}

.wl_hover_box .hover-content.effect-from-right .hover-box-inner{
  margin-left: 100%;
}

.wl_hover_box:hover .hover-content.effect-from-right .hover-box-inner{
  margin-left: 0;
}

.wl_hover_box .hover-content.effect-to-left{
  margin-left: 0;
}

.wl_hover_box:hover .hover-content.effect-to-left{
  margin-left: -100%;
}

.wl_hover_box .hover-content.effect-to-right{
  margin-left: 0;
}

.wl_hover_box:hover .hover-content.effect-to-right{
  margin-left: 100%;
}

.wl_hover_box .hover-content.effect-up{
  margin-top: 0;
}

.wl_hover_box:hover .hover-content.effect-up{
  margin-top: -100%;
}

.wl_hover_box .hover-content.effect-down{
  margin-top: 0;
}

.wl_hover_box:hover .hover-content.effect-down{
  margin-top: 100%;
}

.wl_hover_box .hover-content.effect-from-top .hover-box-inner{
  margin-top: -100%;
}

.wl_hover_box:hover .hover-content.effect-from-top .hover-box-inner{
  margin-top: 0;
}

.wl_hover_box .hover-content.effect-from-bottom .hover-box-inner{
  margin-top: 100%;
}

.wl_hover_box:hover .hover-content.effect-from-bottom .hover-box-inner{
  margin-top: 0;
}

.wl_hover_box .hover-content.effect-from-bottom.position-bottom .hover-box-inner{
  margin-bottom: -100%;
}

.wl_hover_box:hover .hover-content.effect-from-bottom.position-bottom .hover-box-inner{
  margin-bottom: 0;
}

.wl_hover_box .hover-content.effect-from-top.position-bottom .hover-box-inner{
  margin-bottom: 100%;
}

.wl_hover_box:hover .hover-content.effect-from-top.position-bottom .hover-box-inner{
  margin-bottom: 0;
}

.wl_hover_box .hover-content.effect-scale-up .hover-box-inner{
  -webkit-transform: scale(0);
  transform: scale(0);
}

.wl_hover_box:hover .hover-content.effect-scale-up .hover-box-inner{
  -webkit-transform: scale(1);
  transform: scale(1);
}

.wl_hover_box .hover-content.effect-scale-up.position-middle .hover-box-inner{
  -webkit-transform: scale(0) translateY(-50%);
  transform: scale(0) translateY(-50%);
  -webkit-transform-origin: 50% 0;
  transform-origin: 50% 0;
}

.wl_hover_box:hover .hover-content.effect-scale-up.position-middle .hover-box-inner{
  -webkit-transform: scale(1) translateY(-50%);
  transform: scale(1) translateY(-50%);
}

.wl_hover_box .hover-content.effect-scale-down .hover-box-inner{
  -webkit-transform: scale(10);
  transform: scale(10);
}

.wl_hover_box:hover .hover-content.effect-scale-down .hover-box-inner{
  -webkit-transform: scale(1);
  transform: scale(1);
}

.wl_hover_box .hover-content.effect-scale-down.position-middle .hover-box-inner{
  -webkit-transform: scale(10) translateY(-50%);
  transform: scale(10) translateY(-50%);
  -webkit-transform-origin: 50% 0;
  transform-origin: 50% 0;
}

.wl_hover_box:hover .hover-content.effect-scale-down.position-middle .hover-box-inner{
  -webkit-transform: scale(1) translateY(-50%);
  transform: scale(1) translateY(-50%);
}