/* Hvr Underline */

.hvr-underline [class*="__name"],
.hvr-underline:is([class*="__name"], [class*="-name"], a) {
   display: inline;
   background:
      -webkit-gradient(linear, left top, right top, from(transparent), to(transparent)),
      -webkit-gradient(linear, left top, right top, from(var(--line-clr, #000)), to(var(--line-clr, #000)));
   background:
      -webkit-linear-gradient(left, transparent, transparent),
      -webkit-linear-gradient(left, var(--line-clr, #000), var(--line-clr, #000));
   background:
      -moz-linear-gradient(left, transparent, transparent),
      -moz-linear-gradient(left, var(--line-clr, #000), var(--line-clr, #000));
   background:
      -o-linear-gradient(left, transparent, transparent),
      -o-linear-gradient(left, var(--line-clr, #000), var(--line-clr, #000));
   background: linear-gradient(90deg, transparent, transparent), linear-gradient(90deg, var(--line-clr, #000), var(--line-clr, #000));
   background-position:
      100% -webkit-calc(100% - var(--line-position, 0px)),
      0 -webkit-calc(100% - var(--line-position, 0px));
   background-position:
      100% -moz-calc(100% - var(--line-position, 0px)),
      0 -moz-calc(100% - var(--line-position, 0px));
   background-position:
      100% calc(100% - var(--line-position, 0px)),
      0 calc(100% - var(--line-position, 0px));
   -webkit-background-size:
      100% var(--line-width, 1px),
      0 var(--line-width, 1px);
   -moz-background-size:
      100% var(--line-width, 1px),
      0 var(--line-width, 1px);
   -o-background-size:
      100% var(--line-width, 1px),
      0 var(--line-width, 1px);
   background-size:
      100% var(--line-width, 1px),
      0 var(--line-width, 1px);
   background-repeat: no-repeat;
   -webkit-transition: background-size 0.3s;
   -o-transition: background-size 0.3s;
   -webkit-transition: -webkit-background-size 0.3s;
   transition: -webkit-background-size 0.3s;
   -moz-transition:
      background-size 0.3s,
      -moz-background-size 0.3s;
   -o-transition: -o-background-size 0.3s;
   transition: background-size 0.3s;
   transition:
      background-size 0.3s,
      -webkit-background-size 0.3s,
      -moz-background-size 0.3s,
      -o-background-size 0.3s;
   transition:
      background-size 0.3s,
      -webkit-background-size 0.3s,
      -moz-background-size 0.3s;
}

.hvr-underline:hover [class*="__name"],
.hvr-underline:hover:is([class*="__name"], [class*="-name"], a) {
   -webkit-background-size:
      0 var(--line-width, 1px),
      100% var(--line-width, 1px);
   -moz-background-size:
      0 var(--line-width, 1px),
      100% var(--line-width, 1px);
   -o-background-size:
      0 var(--line-width, 1px),
      100% var(--line-width, 1px);
   background-size:
      0 var(--line-width, 1px),
      100% var(--line-width, 1px);
}

/* Hvr Double Shape */

.hvr-double-shape {
   overflow: hidden;
   position: relative;
   display: block;
}

.hvr-double-shape:before,
.hvr-double-shape:after {
   opacity: 0.25;
   content: "";
   position: absolute;
   right: 0;
   left: 0;
   display: inline-block;
   background: #fff;
   -webkit-transform: scaleX(0);
   -ms-transform: scaleX(0);
   -moz-transform: scaleX(0);
   -o-transform: scaleX(0);
   transform: scaleX(0);
   -webkit-transition: -webkit-transform 0.5s ease;
   transition: -webkit-transform 0.5s ease;
   -o-transition: transform 0.5s ease;
   -o-transition: -o-transform 0.5s ease;
   -moz-transition:
      transform 0.5s ease,
      -moz-transform 0.5s ease;
   transition: transform 0.5s ease;
   transition:
      transform 0.5s ease,
      -webkit-transform 0.5s ease,
      -moz-transform 0.5s ease,
      -o-transform 0.5s ease;
   transition:
      transform 0.5s ease,
      -webkit-transform 0.5s ease;
   pointer-events: none;
}

.hvr-double-shape:hover:before,
.hvr-double-shape:hover:after {
   -webkit-transform: scaleX(1);
   -ms-transform: scaleX(1);
   -moz-transform: scaleX(1);
   -o-transform: scaleX(1);
   transform: scaleX(1);
}

.hvr-double-shape:before {
   top: 0;
   bottom: 50%;
   -webkit-transform-origin: 100% 0%;
   -ms-transform-origin: 100% 0%;
   -moz-transform-origin: 100% 0%;
   -o-transform-origin: 100% 0%;
   transform-origin: 100% 0%;
}

.hvr-double-shape:hover:before {
   -webkit-transform-origin: 0% 100%;
   -ms-transform-origin: 0% 100%;
   -moz-transform-origin: 0% 100%;
   -o-transform-origin: 0% 100%;
   transform-origin: 0% 100%;
}

.hvr-double-shape:after {
   top: 50%;
   bottom: 0;
   -webkit-transform-origin: 0% 100%;
   -ms-transform-origin: 0% 100%;
   -moz-transform-origin: 0% 100%;
   -o-transform-origin: 0% 100%;
   transform-origin: 0% 100%;
}

.hvr-double-shape:hover:after {
   -webkit-transform-origin: 100% 0%;
   -ms-transform-origin: 100% 0%;
   -moz-transform-origin: 100% 0%;
   -o-transform-origin: 100% 0%;
   transform-origin: 100% 0%;
}

/* Hvr Double Box */

.hvr-double-box {
   overflow: hidden;
   position: relative;
   display: block;
}

.hvr-double-box:before,
.hvr-double-box:after {
   opacity: 1;
   content: "";
   position: absolute;
   width: 0;
   height: 0;
   background: rgba(255, 255, 255, 0.5);
   -webkit-transform: rotate(90deg);
   -ms-transform: rotate(90deg);
   -moz-transform: rotate(90deg);
   -o-transform: rotate(90deg);
   transform: rotate(90deg);
   pointer-events: none;
}

.hvr-double-box:before {
   bottom: 0;
   left: 0;
   z-index: 3;
}

.hvr-double-box:after {
   top: 0;
   right: 0;
   z-index: 2;
}

.hvr-double-box:hover:before,
.hvr-double-box:hover:after {
   -webkit-opacity: 0;
   -khtml-opacity: 0;
   -moz-opacity: 0;
   -ms-opacity: 0;
   -o-opacity: 0;
   opacity: 0;
   height: 100%;
   width: 100%;
   -webkit-transform: rotateY(180deg);
   -ms-transform: rotateY(180deg);
   -moz-transform: rotateY(180deg);
   transform: rotateY(180deg);
   -webkit-transition-duration: 1.3s;
   -o-transition-duration: 1.3s;
   -moz-transition-duration: 1.3s;
   transition-duration: 1.3s;
}

/* Hvr Float Shadow */

.hvr-float-shadow {
   position: relative;
   display: inline-block;
   vertical-align: middle;
   -webkit-box-shadow: 0 0 1px transparent;
   -moz-box-shadow: 0 0 1px transparent;
   box-shadow: 0 0 1px transparent;
   -webkit-transform: perspective(1px) translateZ(0);
   -moz-transform: perspective(1px) translateZ(0);
   transform: perspective(1px) translateZ(0);
   -webkit-transition-duration: 0.3s;
   -o-transition-duration: 0.3s;
   -moz-transition-duration: 0.3s;
   transition-duration: 0.3s;
   -webkit-transition-property: transform;
   -webkit-transition-property: -webkit-transform;
   transition-property: -webkit-transform;
   -o-transition-property: transform;
   -o-transition-property: -o-transform;
   -moz-transition-property:
      transform,
      -moz-transform;
   transition-property: transform;
   transition-property:
      transform,
      -webkit-transform,
      -moz-transform,
      -o-transform;
   transition-property:
      transform,
      -webkit-transform;
}

.hvr-float-shadow:before {
   opacity: 0;
   position: absolute;
   content: "";
   top: 100%;
   left: 5%;
   z-index: -1;
   width: 90%;
   height: 10px;
   background: -o-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0, transparent 80%);
   background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0, transparent 80%);
   background: -moz-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0, transparent 80%);
   background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0, transparent 80%);
   -webkit-transition-property: transform, opacity;
   -webkit-transition-property:
      opacity,
      -webkit-transform;
   transition-property:
      opacity,
      -webkit-transform;
   -o-transition-property: transform, opacity;
   -o-transition-property:
      opacity,
      -o-transform;
   -moz-transition-property:
      transform,
      opacity,
      -moz-transform;
   transition-property: transform, opacity;
   transition-property:
      transform,
      opacity,
      -webkit-transform,
      -moz-transform,
      -o-transform;
   transition-property:
      transform,
      opacity,
      -webkit-transform;
   -webkit-transition-duration: 0.3s;
   -o-transition-duration: 0.3s;
   -moz-transition-duration: 0.3s;
   transition-duration: 0.3s;
   pointer-events: none;
}

.hvr-float-shadow:active,
.hvr-float-shadow:focus,
.hvr-float-shadow:hover {
   -webkit-transform: translateY(-5px);
   -ms-transform: translateY(-5px);
   -moz-transform: translateY(-5px);
   -o-transform: translateY(-5px);
   transform: translateY(-5px);
}

.hvr-float-shadow:active:before,
.hvr-float-shadow:focus:before,
.hvr-float-shadow:hover:before {
   opacity: 1;
   -webkit-transform: translateY(5px);
   -ms-transform: translateY(5px);
   -moz-transform: translateY(5px);
   -o-transform: translateY(5px);
   transform: translateY(5px);
}

/* Hvr Flash Shape */

.hvr-flash-shape {
   overflow: hidden;
   position: relative;
}

.hvr-flash-shape:before {
   content: "";
   position: absolute;
   top: 0;
   left: -100%;
   z-index: 10;
   display: block;
   width: 50%;
   height: 100%;
   background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0.3)));
   background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
   background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
   background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
   background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
   -webkit-transform: skewX(-25deg);
   -ms-transform: skewX(-25deg);
   -moz-transform: skewX(-25deg);
   -o-transform: skewX(-25deg);
   transform: skewX(-25deg);
   pointer-events: none;
}

.hvr-flash-shape:hover:before {
   -webkit-transition: 1s;
   -o-transition: 1s;
   -moz-transition: 1s;
   transition: 1s;
   left: 130%;
}

/* Hvr Flash Box */

.hrv-flash-box {
   overflow: hidden;
   position: relative;
   display: block;
}

.hrv-flash-box:before,
.hrv-flash-box:after {
   content: "";
   position: absolute;
   z-index: 8;
   display: block;
   width: 100%;
   height: 100%;
   background: rgba(255, 255, 255, 0.3) none repeat scroll 0 0;
   -webkit-transition: all 0.5s ease 0s;
   -o-transition: all 0.5s ease 0s;
   -moz-transition: all 0.5s ease 0s;
   transition: all 0.5s ease 0s;
   pointer-events: none;
}

.hrv-flash-box:before {
   top: -100%;
   left: -100%;
}

.hrv-flash-box:after {
   right: -100%;
   bottom: -100%;
}

.hrv-flash-box:hover:before {
   top: 0;
   left: 0;
}

.hrv-flash-box:hover:after {
   right: 0;
   bottom: 0;
}

.hrv-flash-box img {
   -webkit-transition: 0.7s;
   -o-transition: 0.7s;
   -moz-transition: 0.7s;
   transition: 0.7s;
}

.hrv-flash-box:hover img {
   -webkit-transform: scale(1.2, 1.2);
   -ms-transform: scale(1.2, 1.2);
   -moz-transform: scale(1.2, 1.2);
   -o-transform: scale(1.2, 1.2);
   transform: scale(1.2, 1.2);
}

/* Scale Img */

.scale-img[class*="__photo"],
.scale-img[class*="__photo-inner"],
.scale-img[class*="__item-inner"] {
   overflow: hidden;
   display: block;
}

.scale-img[class*="__photo"] > img,
.scale-img[class*="__photo-inner"] > img,
.scale-img[class*="__photo-inner"] > picture > img,
.scale-img[class*="__item-inner"] [class*="__photo-inner"] > img {
   -webkit-transform: scale(1, 1);
   -ms-transform: scale(1, 1);
   -moz-transform: scale(1, 1);
   -o-transform: scale(1, 1);
   transform: scale(1, 1);
   -webkit-transition: 0.3s ease-out !important;
   -o-transition: 0.3s ease-out !important;
   -moz-transition: 0.3s ease-out !important;
   transition: 0.3s ease-out !important;
}

.scale-img[class*="__photo"]:hover > img,
.scale-img[class*="__photo-inner"]:hover > img,
.scale-img[class*="__photo-inner"]:hover > picture > img,
.scale-img[class*="__item-inner"]:hover [class*="__photo-inner"] > img {
   -webkit-transform: scale(1.1, 1.1);
   -ms-transform: scale(1.1, 1.1);
   -moz-transform: scale(1.1, 1.1);
   -o-transform: scale(1.1, 1.1);
   transform: scale(1.1, 1.1);
}
