@charset "UTF-8"; [class^="wxfhvr-"], [class*=" wxfhvr-"] { position: relative; display: inline-block; margin: 0; max-width: 100%; background-color: #2266a5; color: #fff; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; -webkit-transform: translateZ(0); transform: translateZ(0); } [class^="wxfhvr-"] > .img, [class*=" wxfhvr-"] > .img { background-color: #135796; vertical-align: top; max-width: 100%; } [class^="wxfhvr-"] .imghover, [class*=" wxfhvr-"] .imghover { background-color: #135796; padding: 30px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; color: #ffffff; } [class^="imghvr-"] figcaption h1, [class^="imghvr-"] figcaption h2, [class^="imghvr-"] figcaption h3, [class^="imghvr-"] figcaption h4, [class^="imghvr-"] figcaption h5, [class^="imghvr-"] figcaption h6, [class*=" imghvr-"] figcaption h1, [class*=" imghvr-"] figcaption h2, [class*=" imghvr-"] figcaption h3, [class*=" imghvr-"] figcaption h4, [class*=" imghvr-"] figcaption h5, [class*=" imghvr-"] figcaption h6 { color: #ffffff; } [class^="wxfhvr-"] a, [class*=" wxfhvr-"] a { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1; } [class^="wxfhvr-"], [class*=" wxfhvr-"], [class^="wxfhvr-"]:before, [class^="wxfhvr-"]:after, [class*=" wxfhvr-"]:before, [class*=" wxfhvr-"]:after, [class^="wxfhvr-"] *, [class*=" wxfhvr-"] *, [class^="wxfhvr-"] *:before, [class^="wxfhvr-"] *:after, [class*=" wxfhvr-"] *:before, [class*=" wxfhvr-"] *:after { box-sizing: border-box; transition: all 0.35s ease; } /* wxfhvr-fade-* ----------------------------- */ [class^="wxfhvr-fade"] .imghover, [class*=" wxfhvr-fade"] .imghover { opacity: 0; } [class^="wxfhvr-fade"]:hover .imghover, [class*=" wxfhvr-fade"]:hover .imghover { opacity: 1; } [class^="wxfhvr-fade"]:hover > .img, [class^="wxfhvr-fade"]:hover .imghover, [class*=" wxfhvr-fade"]:hover > .img, [class*=" wxfhvr-fade"]:hover .imghover { -webkit-transform: translate(0, 0); transform: translate(0, 0); } /* wxfhvr-fade ----------------------------- */ /* wxfhvr-fade-in-up ----------------------------- */ .wxfhvr-fade-in-up .imghover { -webkit-transform: translate(0, 15%); transform: translate(0, 15%); } /* wxfhvr-fade-in-down ----------------------------- */ .wxfhvr-fade-in-down .imghover { -webkit-transform: translate(0, -15%); transform: translate(0, -15%); } /* wxfhvr-fade-in-left ----------------------------- */ .wxfhvr-fade-in-left .imghover { -webkit-transform: translate(-15%, 0); transform: translate(-15%, 0); } /* wxfhvr-fade-in-right ----------------------------- */ .wxfhvr-fade-in-right .imghover { -webkit-transform: translate(15%, 0); transform: translate(15%, 0); } /* wxfhvr-push-* ----------------------------- */ [class^="wxfhvr-push-"]:hover .imghover, [class*=" wxfhvr-push-"]:hover .imghover { -webkit-transform: translate(0, 0); transform: translate(0, 0); } /* wxfhvr-push-up ----------------------------- */ .wxfhvr-push-up .imghover { -webkit-transform: translateY(100%); transform: translateY(100%); } .wxfhvr-push-up:hover > .img { -webkit-transform: translateY(-100%); transform: translateY(-100%); } /* wxfhvr-push-down ----------------------------- */ .wxfhvr-push-down .imghover { -webkit-transform: translateY(-100%); transform: translateY(-100%); } .wxfhvr-push-down:hover > .img { -webkit-transform: translateY(100%); transform: translateY(100%); } /* wxfhvr-push-left ----------------------------- */ .wxfhvr-push-left .imghover { -webkit-transform: translateX(100%); transform: translateX(100%); } .wxfhvr-push-left:hover > .img { -webkit-transform: translateX(-100%); transform: translateX(-100%); } /* wxfhvr-push--right ----------------------------- */ .wxfhvr-push-right .imghover { -webkit-transform: translateX(-100%); transform: translateX(-100%); } .wxfhvr-push-right:hover > .img { -webkit-transform: translateX(100%); transform: translateX(100%); } /* wxfhvr-slide-* ----------------------------- */ [class^="wxfhvr-slide-"]:hover .imghover, [class*=" wxfhvr-slide-"]:hover .imghover { -webkit-transform: translate(0, 0); transform: translate(0, 0); } /* wxfhvr-slide-up ----------------------------- */ .wxfhvr-slide-up .imghover { -webkit-transform: translateY(100%); transform: translateY(100%); } /* wxfhvr-slide-down ----------------------------- */ .wxfhvr-slide-down .imghover { -webkit-transform: translateY(-100%); transform: translateY(-100%); } /* wxfhvr-slide-left ----------------------------- */ .wxfhvr-slide-left .imghover { -webkit-transform: translateX(100%); transform: translateX(100%); } /* wxfhvr-slide-right ----------------------------- */ .wxfhvr-slide-right .imghover { -webkit-transform: translateX(-100%); transform: translateX(-100%); } /* wxfhvr-slide-top-left ----------------------------- */ .wxfhvr-slide-top-left .imghover { -webkit-transform: translate(-100%, -100%); transform: translate(-100%, -100%); } /* wxfhvr-slide-top-right ----------------------------- */ .wxfhvr-slide-top-right .imghover { -webkit-transform: translate(100%, -100%); transform: translate(100%, -100%); } /* wxfhvr-slide-bottom-left ----------------------------- */ .wxfhvr-slide-bottom-left .imghover { -webkit-transform: translate(-100%, 100%); transform: translate(-100%, 100%); } /* wxfhvr-slide-bottom-right ----------------------------- */ .wxfhvr-slide-bottom-right .imghover { -webkit-transform: translate(100%, 100%); transform: translate(100%, 100%); } /* wxfhvr-reveal-* ----------------------------- */ [class^="wxfhvr-reveal-"] .img:before, [class*=" wxfhvr-reveal-"] .img:before { position: absolute; top: 0; bottom: 0; left: 0; right: 0; content: ""; background-color:inherit; } [class^="wxfhvr-reveal-"] .imghover, [class*=" wxfhvr-reveal-"] .imghover { opacity: 0; } [class^="wxfhvr-reveal-"]:hover .img:before, [class*=" wxfhvr-reveal-"]:hover .img:before { -webkit-transform: translate(0, 0); transform: translate(0, 0); } [class^="wxfhvr-reveal-"]:hover .imghover, [class*=" wxfhvr-reveal-"]:hover .imghover { opacity: 1; transition-delay: 0.21s; } /* wxfhvr-reveal-up ----------------------------- */ .wxfhvr-reveal-up .img:before { -webkit-transform: translateY(100%); transform: translateY(100%); } /* wxfhvr-reveal-down ----------------------------- */ .wxfhvr-reveal-down .img:before { -webkit-transform: translateY(-100%); transform: translateY(-100%); } /* wxfhvr-reveal-left ----------------------------- */ .wxfhvr-reveal-left .img:before { -webkit-transform: translateX(100%); transform: translateX(100%); } /* wxfhvr-reveal-right ----------------------------- */ .wxfhvr-reveal-right .img:before { -webkit-transform: translateX(-100%); transform: translateX(-100%); } /* wxfhvr-reveal-top-left ----------------------------- */ .wxfhvr-reveal-top-left .img:before { -webkit-transform: translate(-100%, -100%); transform: translate(-100%, -100%); } /* wxfhvr-reveal-top-right ----------------------------- */ .wxfhvr-reveal-top-right .img:before { -webkit-transform: translate(100%, -100%); transform: translate(100%, -100%); } /* wxfhvr-reveal-bottom-left ----------------------------- */ .wxfhvr-reveal-bottom-left .img:before { -webkit-transform: translate(-100%, 100%); transform: translate(-100%, 100%); } /* wxfhvr-reveal-bottom-right ----------------------------- */ .wxfhvr-reveal-bottom-right .img:before { -webkit-transform: translate(100%, 100%); transform: translate(100%, 100%); } /* wxfhvr-hinge-* ----------------------------- */ [class^="wxfhvr-hinge-"], [class*=" wxfhvr-hinge-"] { -webkit-perspective: 50em; perspective: 50em; } [class^="wxfhvr-hinge-"] .imghover, [class*=" wxfhvr-hinge-"] .imghover { opacity: 0; z-index: 1; } [class^="wxfhvr-hinge-"]:hover .img, [class*=" wxfhvr-hinge-"]:hover .img { opacity: 0; } [class^="wxfhvr-hinge-"]:hover .imghover, [class*=" wxfhvr-hinge-"]:hover .imghover { opacity: 1; transition-delay: 0.21s; } /* wxfhvr-hinge-up ----------------------------- */ .wxfhvr-hinge-up .img { -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; } .wxfhvr-hinge-up .imghover { -webkit-transform: rotateX(90deg); transform: rotateX(90deg); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; } .wxfhvr-hinge-up:hover > .img { -webkit-transform: rotateX(-90deg); transform: rotateX(-90deg); } .wxfhvr-hinge-up:hover .imghover { -webkit-transform: rotateX(0); transform: rotateX(0); } /* wxfhvr-hinge-down ----------------------------- */ .wxfhvr-hinge-down .img { -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; } .wxfhvr-hinge-down .imghover { -webkit-transform: rotateX(-90deg); transform: rotateX(-90deg); -webkit-transform-origin: 50% -50%; transform-origin: 50% -50%; } .wxfhvr-hinge-down:hover > .img { -webkit-transform: rotateX(90deg); transform: rotateX(90deg); opacity: 0; } .wxfhvr-hinge-down:hover .imghover { -webkit-transform: rotateX(0); transform: rotateX(0); } /* wxfhvr-hinge-left ----------------------------- */ .wxfhvr-hinge-left .img { -webkit-transform-origin: 0% 50%; transform-origin: 0% 50%; } .wxfhvr-hinge-left .imghover { -webkit-transform: rotateY(-90deg); transform: rotateY(-90deg); -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; } .wxfhvr-hinge-left:hover > .img { -webkit-transform: rotateY(90deg); transform: rotateY(90deg); } .wxfhvr-hinge-left:hover .imghover { -webkit-transform: rotateY(0); transform: rotateY(0); } /* wxfhvr-hinge-right ----------------------------- */ .wxfhvr-hinge-right .img { -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; } .wxfhvr-hinge-right .imghover { -webkit-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-transform-origin: 0 50%; transform-origin: 0 50%; } .wxfhvr-hinge-right:hover > .img { -webkit-transform: rotateY(-90deg); transform: rotateY(-90deg); } .wxfhvr-hinge-right:hover .imghover { -webkit-transform: rotateY(0); transform: rotateY(0); } /* wxfhvr-flip-* ----------------------------- */ [class^="wxfhvr-flip-"], [class*=" wxfhvr-flip-"] { -webkit-perspective: 50em; perspective: 50em; } [class^="wxfhvr-flip-"] .img, [class*=" wxfhvr-flip-"] .img { -webkit-backface-visibility: hidden; backface-visibility: hidden; } [class^="wxfhvr-flip-"] .imghover, [class*=" wxfhvr-flip-"] .imghover { opacity: 0; } [class^="wxfhvr-flip-"]:hover > .img, [class*=" wxfhvr-flip-"]:hover > .img { opacity: 0; } [class^="wxfhvr-flip-"]:hover .imghover, [class*=" wxfhvr-flip-"]:hover .imghover { opacity: 1; transition-delay: 0.14s; } /* wxfhvr-flip-horiz ----------------------------- */ .wxfhvr-flip-horiz .imghover { -webkit-transform: rotateX(90deg); transform: rotateX(90deg); -webkit-transform-origin: 0% 50%; transform-origin: 0% 50%; } .wxfhvr-flip-horiz:hover .img { -webkit-transform: rotateX(-180deg); transform: rotateX(-180deg); } .wxfhvr-flip-horiz:hover .imghover { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); } /* wxfhvr-flip-vert ----------------------------- */ .wxfhvr-flip-vert .imghover { -webkit-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; } .wxfhvr-flip-vert:hover > .img { -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); } .wxfhvr-flip-vert:hover .imghover { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } /* wxfhvr-flip-diag-1 ----------------------------- */ .wxfhvr-flip-diag-1 .imghover { -webkit-transform: rotate3d(1, -1, 0, 100deg); transform: rotate3d(1, -1, 0, 100deg); } .wxfhvr-flip-diag-1:hover > .img { -webkit-transform: rotate3d(-1, 1, 0, 100deg); transform: rotate3d(-1, 1, 0, 100deg); } .wxfhvr-flip-diag-1:hover .imghover { -webkit-transform: rotate3d(0, 0, 0, 0deg); transform: rotate3d(0, 0, 0, 0deg); } /* wxfhvr-flip-diag-2 ----------------------------- */ .wxfhvr-flip-diag-2 .imghover { -webkit-transform: rotate3d(1, 1, 0, 100deg); transform: rotate3d(1, 1, 0, 100deg); } .wxfhvr-flip-diag-2:hover > .img { -webkit-transform: rotate3d(-1, -1, 0, 100deg); transform: rotate3d(-1, -1, 0, 100deg); } .wxfhvr-flip-diag-2:hover .imghover { -webkit-transform: rotate3d(0, 0, 0, 0deg); transform: rotate3d(0, 0, 0, 0deg); } /* wxfhvr-shutter-out-* ----------------------------- */ [class^="wxfhvr-shutter-out-"] .img:before, [class*=" wxfhvr-shutter-out-"] .img:before { background-color:inherit; position: absolute; content: ""; transition-delay: 0.105s; } [class^="wxfhvr-shutter-out-"] .imghover, [class*=" wxfhvr-shutter-out-"] .imghover { opacity: 0; transition-delay: 0s; } [class^="wxfhvr-shutter-out-"]:hover .img:before, [class*=" wxfhvr-shutter-out-"]:hover .img:before { transition-delay: 0s; } [class^="wxfhvr-shutter-out-"]:hover .imghover, [class*=" wxfhvr-shutter-out-"]:hover .imghover { opacity: 1; transition-delay: 0.105s; } /* wxfhvr-shutter-out-horiz ----------------------------- */ .wxfhvr-shutter-out-horiz .img:before { left: 50%; right: 50%; top: 0; bottom: 0; } .wxfhvr-shutter-out-horiz:hover .img:before { left: 0; right: 0; } /* wxfhvr-shutter-out-vert ----------------------------- */ .wxfhvr-shutter-out-vert .img:before { top: 50%; bottom: 50%; left: 0; right: 0; } .wxfhvr-shutter-out-vert:hover .img:before { top: 0; bottom: 0; } /* wxfhvr-shutter-out-diag-1 ----------------------------- */ .wxfhvr-shutter-out-diag-1 .img:before { top: 50%; bottom: 50%; left: -35%; right: -35%; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .wxfhvr-shutter-out-diag-1:hover .img:before { top: -35%; bottom: -35%; } /* wxfhvr-shutter-out-diag-2 ----------------------------- */ .wxfhvr-shutter-out-diag-2 .img:before { top: 50%; bottom: 50%; left: -35%; right: -35%; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .wxfhvr-shutter-out-diag-2:hover .img:before { top: -35%; bottom: -35%; } /* wxfhvr-shutter-in-* ----------------------------- */ [class^="wxfhvr-shutter-in-"] .img:after, [class^="wxfhvr-shutter-in-"] .img:before, [class*=" wxfhvr-shutter-in-"] .img:after, [class*=" wxfhvr-shutter-in-"] .img:before { background-color: inherit; position: absolute; content: ""; } [class^="wxfhvr-shutter-in-"] .img:after, [class*=" wxfhvr-shutter-in-"] .img:after { top: 0; left: 0; } [class^="wxfhvr-shutter-in-"] .img:before, [class*=" wxfhvr-shutter-in-"] .img:before { right: 0; bottom: 0; } [class^="wxfhvr-shutter-in-"] .imghover, [class*=" wxfhvr-shutter-in-"] .imghover { opacity: 0; z-index: 1; } [class^="wxfhvr-shutter-in-"]:hover .imghover, [class*=" wxfhvr-shutter-in-"]:hover .imghover { opacity: 1; transition-delay: 0.21s; } /* wxfhvr-shutter-in-horiz ----------------------------- */ .wxfhvr-shutter-in-horiz .img:after, .wxfhvr-shutter-in-horiz .img:before { width: 0; height: 100%; } .wxfhvr-shutter-in-horiz:hover .img:after, .wxfhvr-shutter-in-horiz:hover .img:before { width: 50%; } /* wxfhvr-shutter-in-vert ----------------------------- */ .wxfhvr-shutter-in-vert .img:after, .wxfhvr-shutter-in-vert .img:before { height: 0; width: 100%; } .wxfhvr-shutter-in-vert:hover .img:after, .wxfhvr-shutter-in-vert:hover .img:before { height: 50%; } /* wxfhvr-shutter-in-out-horiz ----------------------------- */ .wxfhvr-shutter-in-out-horiz .img:after, .wxfhvr-shutter-in-out-horiz .img:before { width: 0; height: 100%; opacity: 0.75; } .wxfhvr-shutter-in-out-horiz:hover .img:after, .wxfhvr-shutter-in-out-horiz:hover .img:before { width: 100%; } /* wxfhvr-shutter-in-out-vert ----------------------------- */ .wxfhvr-shutter-in-out-vert .img:after, .wxfhvr-shutter-in-out-vert .img:before { height: 0; width: 100%; opacity: 0.75; } .wxfhvr-shutter-in-out-vert:hover .img:after, .wxfhvr-shutter-in-out-vert:hover .img:before { height: 100%; } /* wxfhvr-shutter-in-out-diag-1 ----------------------------- */ .wxfhvr-shutter-in-out-diag-1 .img:after, .wxfhvr-shutter-in-out-diag-1 .img:before { width: 200%; height: 200%; transition: all 0.6s ease; opacity: 0.75; } .wxfhvr-shutter-in-out-diag-1 .img:after { -webkit-transform: skew(-45deg) translateX(-150%); transform: skew(-45deg) translateX(-150%); } .wxfhvr-shutter-in-out-diag-1 .img:before { -webkit-transform: skew(-45deg) translateX(150%); transform: skew(-45deg) translateX(150%); } .wxfhvr-shutter-in-out-diag-1:hover .img:after { -webkit-transform: skew(-45deg) translateX(-50%); transform: skew(-45deg) translateX(-50%); } .wxfhvr-shutter-in-out-diag-1:hover .img:before { -webkit-transform: skew(-45deg) translateX(50%); transform: skew(-45deg) translateX(50%); } /* wxfhvr-shutter-in-out-diag-2 ----------------------------- */ .wxfhvr-shutter-in-out-diag-2 .img:after, .wxfhvr-shutter-in-out-diag-2 .img:before { width: 200%; height: 200%; transition: all 0.6s ease; opacity: 0.75; } .wxfhvr-shutter-in-out-diag-2 .img:after { -webkit-transform: skew(45deg) translateX(-100%); transform: skew(45deg) translateX(-100%); } .wxfhvr-shutter-in-out-diag-2 .img:before { -webkit-transform: skew(45deg) translateX(100%); transform: skew(45deg) translateX(100%); } .wxfhvr-shutter-in-out-diag-2:hover .img:after { -webkit-transform: skew(45deg) translateX(0%); transform: skew(45deg) translateX(0%); } .wxfhvr-shutter-in-out-diag-2:hover .img:before { -webkit-transform: skew(45deg) translateX(0%); transform: skew(45deg) translateX(0%); } /* wxfhvr-switch-* ----------------------------- */ [class^='wxfhvr-switch-'] > .img, [class^='wxfhvr-switch-'] .imghover, [class*=' wxfhvr-switch-'] > .img, [class*=' wxfhvr-switch-'] .imghover { transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); } [class^='wxfhvr-switch-']:hover .imghover, [class*=' wxfhvr-switch-']:hover .imghover { -webkit-transform: translate(0, 0); transform: translate(0, 0); } /* wxfhvr-switch-up ----------------------------- */ .wxfhvr-switch-up .imghover { -webkit-transform: translateY(100%); transform: translateY(100%); } .wxfhvr-switch-up:hover > .img { -webkit-transform: translateY(100%); transform: translateY(100%); } /* wxfhvr-switch-down ----------------------------- */ .wxfhvr-switch-down .imghover { -webkit-transform: translateY(-100%); transform: translateY(-100%); } .wxfhvr-switch-down:hover > .img { -webkit-transform: translateY(-100%); transform: translateY(-100%); } /* wxfhvr-switch-left ----------------------------- */ .wxfhvr-switch-left .imghover { -webkit-transform: translateX(100%); transform: translateX(100%); } .wxfhvr-switch-left:hover > .img { -webkit-transform: translateX(100%); transform: translateX(100%); } /* wxfhvr-switch-right ----------------------------- */ .wxfhvr-switch-right .imghover { -webkit-transform: translateX(-100%); transform: translateX(-100%); } .wxfhvr-switch-right:hover > .img { -webkit-transform: translateX(-100%); transform: translateX(-100%); } /* wxfhvr-pivot-in* ----------------------------- */ [class^='wxfhvr-pivot-in'] .imghover, [class*=' wxfhvr-pivot-in'] .imghover { background-color: #135796; } [class^='wxfhvr-pivot-in']:hover .imghover, [class*=' wxfhvr-pivot-in']:hover .imghover { -webkit-transform: rotate(0deg); transform: rotate(0deg); } /* wxfhvr-pivot-in-top-left* ----------------------------- */ .wxfhvr-pivot-in-top-left .imghover { -webkit-transform: rotate(90deg); transform: rotate(90deg); -webkit-transform-origin: 0 0; transform-origin: 0 0; } /* wxfhvr-pivot-in-top-right* ----------------------------- */ .wxfhvr-pivot-in-top-right .imghover { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: 100% 0; transform-origin: 100% 0; } /* wxfhvr-pivot-in-bottom-left* ----------------------------- */ .wxfhvr-pivot-in-bottom-left .imghover { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: 0 100%; transform-origin: 0 100%; } /* wxfhvr-pivot-in-bottom-right* ----------------------------- */ .wxfhvr-pivot-in-bottom-right .imghover { -webkit-transform: rotate(90deg); transform: rotate(90deg); -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; } /* wxfhvr-pivot-out-* ----------------------------- */ [class^='wxfhvr-pivot-out'] > .img, [class*=' wxfhvr-pivot-out'] > .img { -webkit-transform: rotate(0deg); transform: rotate(0deg); } [class^='wxfhvr-pivot-out'] .imghover, [class*=' wxfhvr-pivot-out'] .imghover { background-color: #135796; z-index: -1; } /* wxfhvr-pivot-out-top-left* ----------------------------- */ .wxfhvr-pivot-out-top-left > .img { -webkit-transform-origin: 0 0; transform-origin: 0 0; } .wxfhvr-pivot-out-top-left:hover > .img { -webkit-transform: rotate(90deg); transform: rotate(90deg); } /* wxfhvr-pivot-out-top-right* ----------------------------- */ .wxfhvr-pivot-out-top-right > .img { -webkit-transform-origin: 100% 0; transform-origin: 100% 0; } .wxfhvr-pivot-out-top-right:hover > .img { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } /* wxfhvr-pivot-out-bottom-left* ----------------------------- */ .wxfhvr-pivot-out-bottom-left > .img { -webkit-transform-origin: 0 100%; transform-origin: 0 100%; } .wxfhvr-pivot-out-bottom-left:hover > .img { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } /* wxfhvr-pivot-out-bottom-right* ----------------------------- */ .wxfhvr-pivot-out-bottom-right > .img { -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; } .wxfhvr-pivot-out-bottom-right:hover > .img { -webkit-transform: rotate(90deg); transform: rotate(90deg); } /* wxfhvr-fold* ----------------------------- */ [class^="wxfhvr-fold"], [class*=" wxfhvr-fold"] { -webkit-perspective: 50em; perspective: 50em; } [class^="wxfhvr-fold"] .img, [class*=" wxfhvr-fold"] .img { -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; } [class^="wxfhvr-fold"] .imghover, [class*=" wxfhvr-fold"] .imghover { z-index: 1; opacity: 0; } [class^="wxfhvr-fold"]:hover > .img, [class*=" wxfhvr-fold"]:hover > .img { opacity: 0; transition-delay: 0; } [class^="wxfhvr-fold"]:hover .imghover, [class*=" wxfhvr-fold"]:hover .imghover { -webkit-transform: rotateX(0) translate3d(0, 0%, 0) scale(1); transform: rotateX(0) translate3d(0, 0%, 0) scale(1); opacity: 1; transition-delay: 0.21s; } /* wxfhvr-fold-up ----------------------------- */ .wxfhvr-fold-up > .img { -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; } .wxfhvr-fold-up .imghover { -webkit-transform: rotateX(-90deg) translate3d(0%, -50%, 0) scale(0.6); transform: rotateX(-90deg) translate3d(0%, -50%, 0) scale(0.6); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; } .wxfhvr-fold-up:hover > .img { -webkit-transform: rotateX(90deg) scale(0.6) translateY(50%); transform: rotateX(90deg) scale(0.6) translateY(50%); } /* wxfhvr-fold-down ----------------------------- */ .wxfhvr-fold-down > .img { -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; } .wxfhvr-fold-down .imghover { -webkit-transform: rotateX(90deg) translate3d(0%, 50%, 0) scale(0.6); transform: rotateX(90deg) translate3d(0%, 50%, 0) scale(0.6); -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; } .wxfhvr-fold-down:hover > .img { -webkit-transform: rotateX(-90deg) scale(0.6) translateY(-50%); transform: rotateX(-90deg) scale(0.6) translateY(-50%); } /* wxfhvr-fold-left ----------------------------- */ .wxfhvr-fold-left > .img { -webkit-transform-origin: 0% 50%; transform-origin: 0% 50%; } .wxfhvr-fold-left .imghover { -webkit-transform: rotateY(90deg) translate3d(-50%, 0%, 0) scale(0.6); transform: rotateY(90deg) translate3d(-50%, 0%, 0) scale(0.6); -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; } .wxfhvr-fold-left:hover > .img { -webkit-transform: rotateY(-90deg) scale(0.6) translateX(50%); transform: rotateY(-90deg) scale(0.6) translateX(50%); } /* wxfhvr-fold-right ----------------------------- */ .wxfhvr-fold-right > .img { -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; } .wxfhvr-fold-right .imghover { -webkit-transform: rotateY(-90deg) translate3d(50%, 0%, 0) scale(0.6); transform: rotateY(-90deg) translate3d(50%, 0%, 0) scale(0.6); -webkit-transform-origin: 0 50%; transform-origin: 0 50%; } .wxfhvr-fold-right:hover > .img { -webkit-transform: rotateY(90deg) scale(0.6) translateX(-50%); transform: rotateY(90deg) scale(0.6) translateX(-50%); } /* wxfhvr-zoom-in ----------------------------- */ .wxfhvr-zoom-in .imghover { opacity: 0; -webkit-transform: scale(0.5); transform: scale(0.5); } .wxfhvr-zoom-in:hover .imghover { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } /* wxfhvr-zoom-out* ----------------------------- */ [class^="wxfhvr-zoom-out"] .imghover, [class*=" wxfhvr-zoom-out"] .imghover { -webkit-transform: scale(0.5); transform: scale(0.5); -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; opacity: 0; } [class^="wxfhvr-zoom-out"]:hover .imghover, [class^="wxfhvr-zoom-out"].hover .imghover, [class*=" wxfhvr-zoom-out"]:hover .imghover, [class*=" wxfhvr-zoom-out"].hover .imghover { -webkit-transform: scale(1); transform: scale(1); opacity: 1; transition-delay: 0.35s; } /* wxfhvr-zoom-out ----------------------------- */ .wxfhvr-zoom-out:hover > .img { -webkit-transform: scale(0.5); transform: scale(0.5); opacity: 0; } /* wxfhvr-zoom-out-up ----------------------------- */ .wxfhvr-zoom-out-up:hover > .img, .wxfhvr-zoom-out-up.hover > .img { -webkit-animation: wxfhvr-zoom-out-up 0.4025s linear; animation: wxfhvr-zoom-out-up 0.4025s linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } @-webkit-keyframes wxfhvr-zoom-out-up { 50% { -webkit-transform: scale(0.8) translateY(0%); transform: scale(0.8) translateY(0%); opacity: 0.5; } 100% { -webkit-transform: scale(0.8) translateY(-150%); transform: scale(0.8) translateY(-150%); opacity: 0.5; } } @keyframes wxfhvr-zoom-out-up { 50% { -webkit-transform: scale(0.8) translateY(0%); transform: scale(0.8) translateY(0%); opacity: 0.5; } 100% { -webkit-transform: scale(0.8) translateY(-150%); transform: scale(0.8) translateY(-150%); opacity: 0.5; } } /* wxfhvr-zoom-out-down ----------------------------- */ .wxfhvr-zoom-out-down:hover > .img, .wxfhvr-zoom-out-down.hover > .img { -webkit-animation: wxfhvr-zoom-out-down 0.4025s linear; animation: wxfhvr-zoom-out-down 0.4025s linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } @-webkit-keyframes wxfhvr-zoom-out-down { 50% { -webkit-transform: scale(0.8) translateY(0%); transform: scale(0.8) translateY(0%); opacity: 0.5; } 100% { -webkit-transform: scale(0.8) translateY(150%); transform: scale(0.8) translateY(150%); opacity: 0.5; } } @keyframes wxfhvr-zoom-out-down { 50% { -webkit-transform: scale(0.8) translateY(0%); transform: scale(0.8) translateY(0%); opacity: 0.5; } 100% { -webkit-transform: scale(0.8) translateY(150%); transform: scale(0.8) translateY(150%); opacity: 0.5; } } /* wxfhvr-zoom-out-left ----------------------------- */ .wxfhvr-zoom-out-left:hover > .img, .wxfhvr-zoom-out-left.hover > .img { -webkit-animation: wxfhvr-zoom-out-left 0.4025s linear; animation: wxfhvr-zoom-out-left 0.4025s linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } @-webkit-keyframes wxfhvr-zoom-out-left { 50% { -webkit-transform: scale(0.8) translateX(0%); transform: scale(0.8) translateX(0%); opacity: 0.5; } 100% { -webkit-transform: scale(0.8) translateX(-150%); transform: scale(0.8) translateX(-150%); opacity: 0.5; } } @keyframes wxfhvr-zoom-out-left { 50% { -webkit-transform: scale(0.8) translateX(0%); transform: scale(0.8) translateX(0%); opacity: 0.5; } 100% { -webkit-transform: scale(0.8) translateX(-150%); transform: scale(0.8) translateX(-150%); opacity: 0.5; } } /* wxfhvr-zoom-out-right ----------------------------- */ .wxfhvr-zoom-out-right:hover > .img, .wxfhvr-zoom-out-right.hover > .img { -webkit-animation: wxfhvr-zoom-out-right 0.4025s linear; animation: wxfhvr-zoom-out-right 0.4025s linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } @-webkit-keyframes wxfhvr-zoom-out-right { 50% { -webkit-transform: scale(0.8) translateX(0%); transform: scale(0.8) translateX(0%); opacity: 0.5; } 100% { -webkit-transform: scale(0.8) translateX(150%); transform: scale(0.8) translateX(150%); opacity: 0.5; } } @keyframes wxfhvr-zoom-out-right { 50% { -webkit-transform: scale(0.8) translateX(0%); transform: scale(0.8) translateX(0%); opacity: 0.5; } 100% { -webkit-transform: scale(0.8) translateX(150%); transform: scale(0.8) translateX(150%); opacity: 0.5; } } /* wxfhvr-zoom-out-flip-horiz ----------------------------- */ .wxfhvr-zoom-out-flip-horiz { -webkit-perspective: 50em; perspective: 50em; } .wxfhvr-zoom-out-flip-horiz .imghover { opacity: 0; -webkit-transform: rotateX(90deg) translateY(-100%) scale(0.5); transform: rotateX(90deg) translateY(-100%) scale(0.5); } .wxfhvr-zoom-out-flip-horiz:hover > .img, .wxfhvr-zoom-out-flip-horiz.hover > .img { -webkit-transform: rotateX(-100deg) translateY(50%) scale(0.5); transform: rotateX(-100deg) translateY(50%) scale(0.5); opacity: 0; transition-delay: 0; } .wxfhvr-zoom-out-flip-horiz:hover .imghover, .wxfhvr-zoom-out-flip-horiz.hover .imghover { -webkit-transform: rotateX(0) translateY(0%) scale(1); transform: rotateX(0) translateY(0%) scale(1); opacity: 1; transition-delay: 0.35s; } /* wxfhvr-zoom-out-flip-vert ----------------------------- */ .wxfhvr-zoom-out-flip-vert { -webkit-perspective: 50em; perspective: 50em; } .wxfhvr-zoom-out-flip-vert .imghover { opacity: 0; -webkit-transform: rotateY(90deg) translate(50%, 0) scale(0.5); transform: rotateY(90deg) translate(50%, 0) scale(0.5); } .wxfhvr-zoom-out-flip-vert:hover > .img, .wxfhvr-zoom-out-flip-vert.hover > .img { -webkit-transform: rotateY(-100deg) translateX(50%) scale(0.5); transform: rotateY(-100deg) translateX(50%) scale(0.5); opacity: 0; transition-delay: 0; } .wxfhvr-zoom-out-flip-vert:hover .imghover, .wxfhvr-zoom-out-flip-vert.hover .imghover { -webkit-transform: rotateY(0) translate(0, 0) scale(1); transform: rotateY(0) translate(0, 0) scale(1); opacity: 1; transition-delay: 0.35s; } /* wxfhvr-blur ----------------------------- */ .wxfhvr-blur .imghover { opacity: 0; } .wxfhvr-blur:hover > .img { -webkit-filter: blur(30px); filter: blur(30px); -webkit-transform: scale(1.2); transform: scale(1.2); opacity: 0; } .wxfhvr-blur:hover .imghover { opacity: 1; transition-delay: 0.21s; } /* wxfhvr-fall-away-* ----------------------------- */ [class^='wxfhvr-fall-away-'], [class*=' wxfhvr-fall-away-'] { -webkit-perspective: 50em; perspective: 50em; } [class^='wxfhvr-fall-away-'] .img, [class*=' wxfhvr-fall-away-'] .img { -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; transition: all 0.455s ease-in; } [class^='wxfhvr-fall-away-'] .imghover, [class*=' wxfhvr-fall-away-'] .imghover { opacity: 0; background-color: #135796; } [class^='wxfhvr-fall-away-']:hover .img, [class*=' wxfhvr-fall-away-']:hover .img { opacity: 0; } [class^='wxfhvr-fall-away-']:hover .imghover, [class*=' wxfhvr-fall-away-']:hover .imghover { opacity: 1; transition-delay: 0.455s; } /* wxfhvr-fall-away-horiz ----------------------------- */ .wxfhvr-fall-away-horiz:hover .img { -webkit-transform: rotateX(-360deg) scale(0.2); transform: rotateX(-360deg) scale(0.2); } /* wxfhvr-fall-away-vert ----------------------------- */ .wxfhvr-fall-away-vert:hover .img { -webkit-transform: rotateY(-360deg) scale(0.2); transform: rotateY(-360deg) scale(0.2); } /* wxfhvr-fall-away-cc ----------------------------- */ .wxfhvr-fall-away-cc:hover .img { -webkit-transform: rotate(360deg) scale(0.2); transform: rotate(360deg) scale(0.2); } /* wxfhvr-fall-away-ccc ----------------------------- */ .wxfhvr-fall-away-ccc:hover .img { -webkit-transform: rotate(-360deg) scale(0.2); transform: rotate(-360deg) scale(0.2); }