.appear {
  animation-name: appear-animation;
  animation-duration: .5s;
  animation-fill-mode: forwards;
  opacity: 0;
  --from-appear: opacity=0;
  --to-appear: opacity=1; }

@keyframes appear-animation {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

.grayscale {
  animation-name: grayscale-animation;
  filter: grayscale(100%);
  animation-duration: 1s;
  animation-fill-mode: forwards;
  --from-grayscale: filter=grayscale(100%);
  --to-grayscale: filter=grayscale(0); }

@keyframes grayscale-animation {
  from {
    filter: grayscale(100%); }
  to {
    filter: grayscale(0); } }

.sepia {
  animation-name: sepia-animation;
  filter: sepia(100%);
  animation-duration: 1s;
  animation-fill-mode: forwards;
  --from-sepia: filter=sepia(100%);
  --to-sepia: filter=sepia(0); }

@keyframes sepia-animation {
  from {
    filter: sepia(100%); }
  to {
    filter: sepia(0); } }

.move-up {
  animation-name: move-up-animation;
  animation-duration: .5s;
  animation-fill-mode: forwards;
  --from-move-up: transform=translateY(100px);
  --to-move-up: transform=translateY(0); }

@keyframes move-up-animation {
  from {
    transform: translateY(100px); }
  to {
    transform: translateY(0); } }

.move-down {
  animation-name: move-down-animation;
  animation-duration: .5s;
  animation-fill-mode: forwards;
  --from-move-down: transform=translateY(-100px);
  --to-move-down: transform=translateY(0); }

@keyframes move-down-animation {
  from {
    transform: translateY(-100px); }
  to {
    transform: translateY(0); } }

.move-left {
  animation-name: move-left-animation;
  animation-duration: .5s;
  animation-fill-mode: forwards;
  --from-move-left: transform=translateX(100px);
  --to-move-left: transform=translateX(0); }

@keyframes move-left-animation {
  from {
    transform: translateX(100px); }
  to {
    transform: translateX(0); } }

.move-right {
  animation-name: move-right-animation;
  animation-duration: .5s;
  animation-fill-mode: forwards;
  --from-move-right: transform=translateX(-100px);
  --to-move-right: transform=translateX(0); }

@keyframes move-right-animation {
  from {
    transform: translateX(-100px); }
  to {
    transform: translateX(0); } }

.flip-down {
  animation-name: flip-down-animation;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  --from-flip-down: transform=perspective(2500px) rotateX(100deg);
  --to-flip-down: transform=perspective(2500px) rotateX(0); }

@keyframes flip-down-animation {
  from {
    transform: perspective(2500px) rotateX(100deg); }
  to {
    transform: perspective(2500px) rotateX(0); } }

.flip-left {
  animation-name: flip-left-animation;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  perspective-origin: left center;
  --from-flip-left: transform=perspective(600px) translate3d(0, 0, 0) rotateY(30deg);
  --to-flip-left: transform=perspective(600px) translate3d(0, 0, 0) rotateY(0deg); }

@keyframes flip-left-animation {
  from {
    transform: perspective(600px) translate3d(0, 0, 0) rotateY(30deg); }
  to {
    transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg); } }

.flip-left-top {
  animation-name: flip-left-top-animation;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  --from-flip-left-top: transform=translate(-20px, 80px) rotate(-15deg);
  --to-flip-left-top: transform=translate(0, 0) rotate(0deg); }

@keyframes flip-left-top-animation {
  from {
    transform: translate(-20px, 80px) rotate(-15deg); }
  to {
    transform: translate(0, 0) rotate(0deg); } }

.flip-right {
  animation-name: flip-right-animation;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  perspective-origin: right center;
  --from-flip-right: transform=perspective(600px) translate3d(0, 0, 0) rotateY(-30deg);
  --to-flip-right: transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg); }

@keyframes flip-right-animation {
  from {
    transform: perspective(600px) translate3d(0, 0, 0) rotateY(-30deg); }
  to {
    transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg); } }

.flip-right-top {
  animation-name: flip-right-top-animation;
  animation-fill-mode: forwards;
  --from-flip-right-top: transform=translate(-20px, 80px) rotate(25deg);
  --to-flip-right-top: transform=translate(0, 1) rotate(0deg); }

@keyframes flip-right-top-animation {
  from {
    transform: translate(-20px, 80px) rotate(25deg); }
  to {
    transform: translate(0, 1) rotate(0deg); } }

.rotate-x {
  animation-name: rotate-x-animation;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  --from-rotate-x: transform=rotateX(0);
  --to-rotate-x: transform=rotateX(-360deg); }

@keyframes rotate-x-animation {
  from {
    transform: rotateX(0); }
  to {
    transform: rotateX(-360deg); } }

.rotate-y {
  animation-name: rotate-y-animation;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  --from-rotate-y: transform=rotateY(0);
  --to-rotate-y: transform=rotateY(-360deg); }

@keyframes rotate-y-animation {
  from {
    transform: rotateY(0); }
  to {
    transform: rotateY(-360deg); } }

.rotate-left-z {
  animation-name: rotate-left-z-animation;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  --from-rotate-left-z: transform=rotateZ(0);
  --to-rotate-left-z: transform=rotateZ(-360deg); }

@keyframes rotate-left-z-animation {
  from {
    transform: rotateZ(0); }
  to {
    transform: rotateZ(-360deg); } }

.rotate-right-z {
  animation-name: rotate-right-z-animation;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  --from-rotate-right-z: transform=rotateZ(0);
  --to-rotate-right-z: transform=rotateZ(360deg); }

@keyframes rotate-right-z-animation {
  from {
    transform: rotateZ(0); }
  to {
    transform: rotateZ(360deg); } }

.zoom-in {
  animation-name: zoom-in-animation;
  animation-duration: .5s;
  animation-fill-mode: forwards;
  --from-zoom-in: transform=scale(.6);
  --to-zoom-in: transform=scale(1); }

@keyframes zoom-in-animation {
  from {
    transform: scale(0.6); }
  to {
    transform: scale(1); } }

.zoom-out {
  animation-name: zoom-out-animation;
  animation-duration: .5s;
  animation-fill-mode: forwards;
  --from-zoom-out: transform=scale(1.2);
  --to-zoom-out: transform=scale(1); }

@keyframes zoom-out-animation {
  from {
    transform: scale(1.2); }
  to {
    transform: scale(1); } }

.blur {
  animation-name: blur-animation;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  --from-blur: filter=blur(10px)&transform=scale(1.02);
  --to-blur: filter=blur(0)&transform= scale(1); }

@keyframes blur-animation {
  from {
    filter: blur(10px);
    transform: scale(1.02); }
  to {
    filter: blur(0);
    transform: scale(1); } }

.smooth {
  animation-name: smooth-animation;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  transform-origin: left;
  --from-smooth: transform=translate3d(0, 100%, 0) skew-y(12deg);
  --to-smooth: transform=translate3d(0, 0, 0) skew-y(0); }

@keyframes smooth-animation {
  from {
    transform: translate3d(0, 100%, 0) skew-y(12deg); }
  to {
    transform: translate3d(0, 0, 0) skew-y(0); } }

.line {
  position: relative; }
  .line:before, .line:after {
    position: absolute;
    content: "";
    width: 0;
    height: 1px;
    background: #333; }
  .line:before {
    top: 0;
    left: 0;
    animation: line-animation .5s linear 0s forwards; }
  .line:after {
    bottom: 0;
    right: 0;
    animation: line-animation .5s linear 1s forwards; }
  .line .lineinappear {
    animation: line-inner-animation .5s linear 1.5s forwards;
    opacity: 0; }

.line2:before, .line2:after {
  position: absolute;
  content: "";
  width: 1px;
  height: 0;
  background: #333; }

.line2:before {
  top: 0;
  right: 0;
  animation: line-animation2 .5s linear .5s forwards; }

.line2:after {
  bottom: 0;
  left: 0;
  animation: line-animation2 .5s linear 1.5s forwards; }

@keyframes line-animation {
  0% {
    width: 0%; }
  100% {
    width: 100%; } }

@keyframes line-animation2 {
  0% {
    height: 0%; }
  100% {
    height: 100%; } }

@keyframes line-inner-animation {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

.bg-extend {
  animation-name: bg-extend-animation-base;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  position: relative;
  overflow: hidden;
  opacity: 0; }

@keyframes bg-extend-animation-base {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

.bgappear {
  animation-name: bg-extend-animation-second;
  animation-duration: 1s;
  animation-delay: .6s;
  animation-fill-mode: forwards;
  opacity: 0; }

@keyframes bg-extend-animation-second {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

.bg-lr-extend:before {
  animation-name: bg-lr-extend-animation;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #666; }

@keyframes bg-lr-extend-animation {
  0% {
    transform-origin: left;
    transform: scale-x(0); }
  50% {
    transform-origin: left;
    transform: scale-x(1); }
  5.001% {
    transform-origin: right; }
  100% {
    transform-origin: right;
    transform: scale-x(0); } }

.bg-rl-extend:before {
  animation-name: bg-rl-extend-animation;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #666; }

@keyframes bg-rl-extend-animation {
  0% {
    transform-origin: right;
    transform: scale-x(0); }
  50% {
    transform-origin: right;
    transform: scale-x(1); }
  5.001% {
    transform-origin: left; }
  100% {
    transform-origin: left;
    transform: scale-x(0); } }

.bg-du-extend:before {
  animation-name: bg-du-extend-animation;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #666; }

@keyframes bg-du-extend-animation {
  0% {
    transform-origin: bottom;
    transform: scale-y(0); }
  50% {
    transform-origin: bottom;
    transform: scale-y(1); }
  5.001% {
    transform-origin: top; }
  100% {
    transform-origin: top;
    transform: scale-y(0); } }

.bg-ud-extend:before {
  animation-name: bg-ud-extend-animation;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #666; }

@keyframes bg-ud-extend-animation {
  0% {
    transform-origin: top;
    transform: scale-y(0); }
  50% {
    transform-origin: top;
    transform: scale-y(1); }
  5.001% {
    transform-origin: bottom; }
  100% {
    transform-origin: bottom;
    transform: scale-y(0); } }

.delay-1 {
  animation-delay: .1s; }

.delay-2 {
  animation-delay: .2s; }

.delay-3 {
  animation-delay: .3s; }

.delay-4 {
  animation-delay: .4s; }

.delay-5 {
  animation-delay: .5s; }

.delay-6 {
  animation-delay: .6s; }

.delay-7 {
  animation-delay: .7s; }

.delay-8 {
  animation-delay: .8s; }

.delay-9 {
  animation-delay: .9s; }

.bgchange {
  animation: bgchange 20s ease infinite; }

@keyframes bgchange {
  0% {
    background: #ffe6e1; }
  25% {
    background: #fdcb9e; }
  50% {
    background: #fdcbc1; }
  75% {
    background: #ffff8c; }
  90% {
    background: #b2dffb; }
  100% {
    background: #ffe6e1; } }

.bggradient {
  background: linear-gradient(45deg, #3bade3, #9844b7, #44ea76);
  background-size: 200% 200%;
  animation: bggradient 20s ease infinite; }

@keyframes bggradient {
  0% {
    background-position: 0% 50%; }
  50% {
    background-position: 100% 50%; }
  100% {
    background-position: 0% 50%; } }

.fluid {
  animation: fluidrotate 30s ease 0s infinite; }

@keyframes fluidrotate {
  0%, 100% {
    border-radius: 63% 37% 54% 46%/55% 48% 52% 45%; }
  14% {
    border-radius: 40% 60% 54% 46%/49% 60% 40% 51%; }
  28% {
    border-radius: 54% 46% 38% 62%/49% 70% 30% 51%; }
  42% {
    border-radius: 61% 39% 55% 45%/61% 38% 62% 39%; }
  56% {
    border-radius: 61% 39% 67% 33%/70% 50% 50% 30%; }
  70% {
    border-radius: 50% 50% 34% 66%/56% 68% 32% 44%; }
  84% {
    border-radius: 46% 54% 50% 50%/35% 61% 39% 65%; } }

.image-zoom-in img {
  transform: scale(1);
  transition: .3s ease-in-out; }

.image-zoom-in:hover img {
  transform: scale(1.2); }

.image-zoom-out img {
  transform: scale(1.1);
  transition: .3s ease-in-out; }

.image-zoom-out:hover img {
  transform: scale(1); }

.image-zoom-in-rotate img {
  transform: scale(1);
  transition: .3s ease-in-out; }

.image-zoom-in-rotate:hover img {
  transform: rotate(-5deg) scale(1.2); }

.image-blur img {
  filter: blur(0);
  transition: .3s ease-in-out; }

.image-blur:hover img {
  filter: blur(3px); }

.image-opacity img {
  opacity: 1;
  transition: .3s ease-in-out; }

.image-opacity:hover img {
  opacity: .8; }

.image-grayscale img {
  filter: grayscale(100%);
  transition: .3s ease-in-out; }

.image-grayscale:hover img {
  filter: grayscale(0); }

.image-sepia img {
  filter: sepia(100%);
  transition: .3s ease-in-out; }
  .image-sepia img:hover {
    filter: sepia(0); }

.image-shine {
  --to-shine:left=125%; }
  .image-shine span.mask {
    position: relative;
    display: block;
    line-height: 0;
    overflow: hidden; }
    .image-shine span.mask:before {
      position: absolute;
      content: "";
      width: 50%;
      height: 100%;
      top: 0;
      left: -75%;
      background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
      transform: skewX(-25deg);
      z-index: 1; }
    .image-shine span.mask:hover:before {
      animation: shine-animation .7s; }

@keyframes shine-animation {
  to {
    left: 125%; } }

.image-circle {
  --from-circle:transform=scale(0)&opacity=1;
  --to-circle:transform=scale(2); }
  .image-circle span.mask {
    position: relative;
    display: block;
    line-height: 0;
    overflow: hidden; }
    .image-circle span.mask:before {
      position: absolute;
      content: "";
      transform: scale(0);
      opacity: 0;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.4);
      z-index: 1; }
    .image-circle span.mask:hover:before {
      animation: circle-animation .75s; }

@keyframes circle-animation {
  from {
    transform: scale(0);
    opacity: 1; }
  to {
    transform: scale(2); } }

.image-bg-du {
  position: relative; }
  .image-bg-du span.mask {
    position: relative;
    display: block;
    line-height: 0;
    overflow: hidden; }
    .image-bg-du span.mask:before {
      content: "";
      position: absolute;
      z-index: 2;
      left: 0;
      top: 0;
      opacity: 0;
      transition: .3s ease-in-out;
      transform: translateY(100%);
      background: #333;
      width: 100%;
      height: 100%; }
  .image-bg-du span.cap {
    position: absolute;
    opacity: 0;
    transition: .5s ease-in-out;
    z-index: 3;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    line-height: 1.5; }
  .image-bg-du:hover span.mask:before {
    opacity: 1;
    transform: translateY(0); }
  .image-bg-du:hover span.cap {
    opacity: 1; }

.image-bg-ud {
  position: relative; }
  .image-bg-ud span.mask {
    position: relative;
    display: block;
    line-height: 0;
    overflow: hidden; }
    .image-bg-ud span.mask:before {
      content: "";
      position: absolute;
      z-index: 2;
      left: 0;
      top: 0;
      opacity: 0;
      transition: .3s ease-in-out;
      transform: translateY(-100%);
      background: #333;
      width: 100%;
      height: 100%; }
  .image-bg-ud span.cap {
    position: absolute;
    opacity: 0;
    transition: .5s ease-in-out;
    z-index: 3;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    line-height: 1.5; }
    .image-bg-ud span.cap:hover {
      opacity: 1; }
  .image-bg-ud:hover span.mask:before {
    opacity: 1;
    transform: translateY(0); }
  .image-bg-ud:hover span.cap {
    opacity: 1; }

.image-bg-lr {
  position: relative; }
  .image-bg-lr span.mask {
    position: relative;
    display: block;
    line-height: 0;
    overflow: hidden; }
    .image-bg-lr span.mask:before {
      content: "";
      position: absolute;
      z-index: 2;
      left: 0;
      top: 0;
      opacity: 0;
      transition: .3s ease-in-out;
      transform: translateX(-100%);
      background: #333;
      width: 100%;
      height: 100%; }
  .image-bg-lr span.cap {
    position: absolute;
    opacity: 0;
    transition: .5s ease-in-out;
    z-index: 3;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    line-height: 1.5; }
    .image-bg-lr span.cap:hover {
      opacity: 1; }
  .image-bg-lr:hover span.mask:before {
    opacity: 1;
    transform: translateX(0); }
  .image-bg-lr:hover span.cap {
    opacity: 1; }

.image-bg-rl {
  position: relative; }
  .image-bg-rl span.mask {
    position: relative;
    display: block;
    line-height: 0;
    overflow: hidden; }
    .image-bg-rl span.mask:before {
      content: "";
      position: absolute;
      z-index: 2;
      left: 0;
      top: 0;
      opacity: 0;
      transition: .3s ease-in-out;
      transform: translateX(100%);
      background: #333;
      width: 100%;
      height: 100%; }
  .image-bg-rl span.cap {
    position: absolute;
    opacity: 0;
    transition: .5s ease-in-out;
    z-index: 3;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    line-height: 1.5; }
  .image-bg-rl:hover span.mask:before {
    opacity: 1;
    transform: translateX(0); }
  .image-bg-rl:hover span.cap {
    opacity: 1; }

.image-bg-cw {
  position: relative; }
  .image-bg-cw span.mask {
    position: relative;
    display: block;
    line-height: 0;
    overflow: hidden; }
    .image-bg-cw span.mask:before {
      content: "";
      position: absolute;
      z-index: 2;
      background: #333;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      transition: transform 0.3s cubic-bezier(0.8, 0, 0.2, 1) 0s;
      transform: scale(0, 1);
      transform-origin: center; }
    .image-bg-cw span.mask:hover:before {
      transform: scale(1, 1); }
  .image-bg-cw span.cap {
    opacity: 0;
    transition: .5s ease-in-out;
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    line-height: 1.5; }
    a:hover .image-bg-cw span.cap {
      opacity: 1; }
  .image-bg-cw a:hover span.cap {
    opacity: 1; }

.image-bg-ch {
  position: relative; }
  .image-bg-ch span.mask {
    position: relative;
    display: block;
    line-height: 0;
    overflow: hidden; }
    .image-bg-ch span.mask:before {
      content: "";
      position: absolute;
      z-index: 2;
      left: 0;
      top: 0;
      transition: transform 0.3s cubic-bezier(0.8, 0, 0.2, 1) 0s;
      transform: scale(1, 0);
      transform-origin: center;
      background: #333;
      width: 100%;
      height: 100%; }
    .image-bg-ch span.mask:hover:before {
      transform: scale(1, 1); }
  .image-bg-ch span.cap {
    position: absolute;
    opacity: 0;
    transition: .5s ease-in-out;
    z-index: 3;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    line-height: 1.5; }
  .image-bg-ch a:hover span.cap {
    opacity: 1; }

.image-flip-x img {
  transition: all .35s ease;
  backface-visibility: hidden; }

.image-flip-x span.cap {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  transition: all .35s ease;
  transform: rotateX(90deg);
  transform-origin: 0% 50%;
  opacity: 0;
  background: #333;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center; }

.image-flip-x a {
  position: relative;
  display: block; }
  .image-flip-x a:hover img {
    transform: rotateX(-180deg);
    opacity: 0; }
  .image-flip-x a:hover span.cap {
    opacity: 1; }

.image-flip-y img {
  transition: all .35s ease;
  backface-visibility: hidden; }

.image-flip-y span.cap {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  transition: all .35s ease;
  transform: rotateY(90deg);
  transform-origin: 50% 0%;
  opacity: 0;
  background: #333;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center; }

.image-flip-y a {
  position: relative;
  display: block; }
  .image-flip-y a:hover img {
    transform: rotateY(-180deg);
    opacity: 0; }
  .image-flip-y a:hover span.cap {
    transform: rotateY(0);
    opacity: 1;
    transition-delay: .15s; }

.image-flip-z1 img {
  transition: all .35s ease;
  backface-visibility: hidden; }

.image-flip-z1 span.cap {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  transition: all .35s ease;
  transform: rotate3d(1, -1, 0, 100deg);
  opacity: 0;
  background: #333;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center; }

.image-flip-z1 a {
  position: relative;
  display: block; }
  .image-flip-z1 a:hover img {
    transform: rotate3d(-1, 1, 0, 100deg);
    opacity: 0; }
  .image-flip-z1 a:hover span.cap {
    transform: rotate3d(0, 0, 0, 0deg);
    opacity: 1;
    transition-delay: .15s; }

.image-flip-z2 img {
  transition: all .35s ease;
  backface-visibility: hidden; }

.image-flip-z2 span.cap {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  transition: all .35s ease;
  transform: rotate3d(1, 1, 0, 100deg);
  opacity: 0;
  background: #333;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center; }

.image-flip-z2 a {
  position: relative;
  display: block; }
  .image-flip-z2 a:hover img {
    transform: rotate3d(-1, -1, 0, 100deg);
    opacity: 0; }
  .image-flip-z2 a:hover span.cap {
    transform: rotate3d(0, 0, 0, 0deg);
    opacity: 1;
    transition-delay: .15s; }

.image-zoom-in-text {
  position: relative; }
  .image-zoom-in-text img {
    transform: scale(1);
    filter: blur(0);
    transition: .3s ease-in-out; }
  .image-zoom-in-text span.mask {
    position: relative;
    transition: .3s ease-in-out;
    display: block;
    line-height: 0;
    overflow: hidden; }
  .image-zoom-in-text span.cap {
    opacity: 0;
    transition: .5s ease-in-out;
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    line-height: 1.5; }
  .image-zoom-in-text:hover img {
    transform: scale(1.2);
    filter: blur(2px); }
  .image-zoom-in-text:hover span.mask:before {
    content: "";
    position: absolute;
    z-index: 2;
    top: 10px;
    left: 10px;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    background: rgba(0, 0, 0, 0.5); }
  .image-zoom-in-text:hover span.cap {
    opacity: 1; }

.image-zoom-out-text {
  position: relative; }
  .image-zoom-out-text img {
    transform: scale(1.2);
    filter: blur(0);
    transition: .3s ease-in-out; }
  .image-zoom-out-text span.mask {
    position: relative;
    transition: .3s ease-in-out;
    display: block;
    line-height: 0;
    overflow: hidden; }
  .image-zoom-out-text span.cap {
    opacity: 0;
    transition: .5s ease-in-out;
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    line-height: 1.5; }
  .image-zoom-out-text:hover img {
    transform: scale(1);
    filter: blur(2px); }
  .image-zoom-out-text:hover span.mask:before {
    content: "";
    position: absolute;
    z-index: 2;
    top: 10px;
    left: 10px;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    background: rgba(0, 0, 0, 0.5); }
  .image-zoom-out-text:hover span.cap {
    opacity: 1; }

.image-opacity-text {
  position: relative; }
  .image-opacity-text img {
    opacity: 1;
    transition: .3s ease-in-out; }
  .image-opacity-text span.mask {
    position: relative;
    transition: .3s ease-in-out;
    display: block;
    line-height: 0; }
  .image-opacity-text span.cap {
    opacity: 0;
    transition: .5s ease-in-out;
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    line-height: 1.5; }
  .image-opacity-text:hover img {
    opacity: .6; }
  .image-opacity-text:hover span.mask:before {
    content: "";
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, rgba(88, 182, 211, 0.6), rgba(229, 93, 135, 0.6)); }
  .image-opacity-text:hover span.cap {
    opacity: 1; }

.image-line-text {
  position: relative; }
  .image-line-text span.mask {
    position: relative;
    display: block;
    line-height: 0; }
    .image-line-text span.mask:before, .image-line-text span.mask:after {
      position: absolute;
      top: 4%;
      right: 2.5%;
      bottom: 4%;
      left: 2.5%;
      z-index: 3;
      content: "";
      opacity: 0;
      transition: .3s ease-in-out; }
    .image-line-text span.mask:before {
      border-top: 1px solid #fff;
      border-bottom: 1px solid #fff;
      transform: scale(0, 1); }
    .image-line-text span.mask:after {
      border-right: 1px solid #fff;
      border-left: 1px solid #fff;
      transform: scale(1, 0); }
  .image-line-text span.cap {
    opacity: 0;
    transition: .5s ease-in-out;
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    line-height: 1.5; }
  .image-line-text:hover span.mask:before, .image-line-text:hover span.mask:after {
    opacity: 1;
    transform: scale(1); }
  .image-line-text:hover span.cap {
    opacity: 1; }

.mask {
  display: block;
  line-height: 0;
  overflow: hidden; }