.eihe-icon { display: flex; align-items: center; } .eihe-icon svg { width: 100%; fill: currentColor; } .elementor-element.elementor-widget-e_image_hover_effects .eihe-box { position: relative; display: block; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; transform: translateZ(0); -o-transform: translateZ(0); -ms-transform: translateZ(0); -moz-transform: translateZ(0); -webkit-transform: translateZ(0); -moz-osx-font-smoothing: grayscale; } .elementor-element.elementor-widget-e_image_hover_effects .eihe-box.eihe_flex-start .eihe-caption > * { text-align: left; } .elementor-element.elementor-widget-e_image_hover_effects .eihe-box.eihe_center .eihe-caption > * { text-align: center; } .elementor-element.elementor-widget-e_image_hover_effects .eihe-box.eihe_flex-end .eihe-caption > * { text-align: right; } .elementor-element.elementor-widget-e_image_hover_effects .eihe-box img { position: relative; width: 100%; vertical-align: middle; } .elementor-element.elementor-widget-e_image_hover_effects .eihe-box .eihe-caption { display: flex; align-items: center; justify-content: center; flex-direction: column; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; color: #fff; z-index: 2; } .elementor-element.elementor-widget-e_image_hover_effects .eihe-box .eihe-caption .eihe-title-cover { display: flex; align-items: center; flex-direction: row; margin-bottom: 10px; } .elementor-element.elementor-widget-e_image_hover_effects .eihe-box .eihe-caption .eihe-title-cover .eihe-title { font-family: 'arial',sans-serif; font-size: 40px; margin: 0 !important; padding: 0 !important; color: white; } .elementor-element.elementor-widget-e_image_hover_effects .eihe-box .eihe-caption .eihe-title-cover i { margin-top: 0 !important; margin-bottom: 0 !important; padding: 0 !important; } .elementor-element.elementor-widget-e_image_hover_effects .eihe-box .eihe-caption p { font-family: 'arial',sans-serif; font-size: 16px; margin: 0 !important; padding: 0 !important; color: white; } .elementor-element.elementor-widget-e_image_hover_effects .eihe-box, .elementor-element.elementor-widget-e_image_hover_effects .eihe-box:before, .elementor-element.elementor-widget-e_image_hover_effects .eihe-box:after, .elementor-element.elementor-widget-e_image_hover_effects .eihe-box *, .elementor-element.elementor-widget-e_image_hover_effects .eihe-box *:before, .elementor-element.elementor-widget-e_image_hover_effects .eihe-box *:after { box-sizing: border-box; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; transition: all 0.5s ease; } .elementor-element.elementor-widget-e_image_hover_effects .eihe-box:before { z-index: 1; } /* eihe-fade-* ----------------------------- */ [class^='eihe-fade'] .eihe-caption, [class*=' eihe-fade'] .eihe-caption { opacity: 0; } [class^='eihe-fade']:hover .eihe-caption, [class*=' eihe-fade']:hover .eihe-caption { opacity: 1; } [class^='eihe-fade']:hover > img, [class^='eihe-fade']:hover .eihe-caption, [class*=' eihe-fade']:hover > img, [class*=' eihe-fade']:hover .eihe-caption { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } /* eihe-fade-in-up ----------------------------- */ .eihe-fade-in-up .eihe-caption { -webkit-transform: translate(0, 15%); -moz-transform: translate(0, 15%); -ms-transform: translate(0, 15%); -o-transform: translate(0, 15%); transform: translate(0, 15%); } /* eihe-fade-in-down ----------------------------- */ .eihe-fade-in-down .eihe-caption { -webkit-transform: translate(0, -15%); -moz-transform: translate(0, -15%); -ms-transform: translate(0, -15%); -o-transform: translate(0, -15%); transform: translate(0, -15%); } /* eihe-fade-in-left ----------------------------- */ .eihe-fade-in-left .eihe-caption { -webkit-transform: translate(-15%, 0); -moz-transform: translate(-15%, 0); -ms-transform: translate(-15%, 0); -o-transform: translate(-15%, 0); transform: translate(-15%, 0); } /* eihe-fade-in-right ----------------------------- */ .eihe-fade-in-right .eihe-caption { -webkit-transform: translate(15%, 0); -moz-transform: translate(15%, 0); -ms-transform: translate(15%, 0); -o-transform: translate(15%, 0); transform: translate(15%, 0); } /* eihe-push-* ----------------------------- */ [class^='eihe-push-']:hover .eihe-caption, [class*=' eihe-push-']:hover .eihe-caption { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } /* eihe-push-up ----------------------------- */ .eihe-push-up .eihe-caption { -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } .eihe-push-up:hover > img { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } /* eihe-push-down ----------------------------- */ .eihe-push-down .eihe-caption { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } .eihe-push-down:hover > img { -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } /* eihe-push-left ----------------------------- */ .eihe-push-left .eihe-caption { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } .eihe-push-left:hover > img { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } /* eihe-push--right ----------------------------- */ .eihe-push-right .eihe-caption { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } .eihe-push-right:hover > img { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } /* eihe-slide-* ----------------------------- */ [class^='eihe-slide-']:hover .eihe-caption, [class*=' eihe-slide-']:hover .eihe-caption { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } /* eihe-slide-up ----------------------------- */ .eihe-slide-up .eihe-caption { -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } /* eihe-slide-down ----------------------------- */ .eihe-slide-down .eihe-caption { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } /* eihe-slide-left ----------------------------- */ .eihe-slide-left .eihe-caption { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } /* eihe-slide-right ----------------------------- */ .eihe-slide-right .eihe-caption { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } /* eihe-reveal-* ----------------------------- */ [class^='eihe-reveal-']:before, [class*=' eihe-reveal-']:before { position: absolute; top: 0; bottom: 0; left: 0; right: 0; content: ''; } [class^='eihe-reveal-'] .eihe-caption, [class*=' eihe-reveal-'] .eihe-caption { opacity: 0; } [class^='eihe-reveal-']:hover:before, [class*=' eihe-reveal-']:hover:before { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } [class^='eihe-reveal-']:hover .eihe-caption, [class*=' eihe-reveal-']:hover .eihe-caption { opacity: 1; -webkit-transition-delay: 0.21s; -moz-transition-delay: 0.21s; transition-delay: 0.21s; } /* eihe-reveal-up ----------------------------- */ .eihe-reveal-up:before { -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } /* eihe-reveal-down ----------------------------- */ .eihe-reveal-down:before { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } /* eihe-reveal-left ----------------------------- */ .eihe-reveal-left:before { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } /* eihe-reveal-right ----------------------------- */ .eihe-reveal-right:before { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } /* eihe-hinge-* ----------------------------- */ [class^='eihe-hinge-'], [class*=' eihe-hinge-'] { -webkit-perspective: 50em; -moz-perspective: 50em; perspective: 50em; } [class^='eihe-hinge-'] .eihe-caption, [class*=' eihe-hinge-'] .eihe-caption { opacity: 0; z-index: 1; } [class^='eihe-hinge-']:hover img, [class*=' eihe-hinge-']:hover img { opacity: 0; } [class^='eihe-hinge-']:hover .eihe-caption, [class*=' eihe-hinge-']:hover .eihe-caption { opacity: 1; -webkit-transition-delay: 0.21s; -moz-transition-delay: 0.21s; transition-delay: 0.21s; } /* eihe-hinge-up ----------------------------- */ .eihe-hinge-up img { -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -o-transform-origin: 50% 0%; transform-origin: 50% 0%; } .eihe-hinge-up .eihe-caption { -webkit-transform: rotateX(90deg); -moz-transform: rotateX(90deg); -ms-transform: rotateX(90deg); -o-transform: rotateX(90deg); transform: rotateX(90deg); -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; transform-origin: 50% 100%; } .eihe-hinge-up:hover > img { -webkit-transform: rotateX(-90deg); -moz-transform: rotateX(-90deg); -ms-transform: rotateX(-90deg); -o-transform: rotateX(-90deg); transform: rotateX(-90deg); } .eihe-hinge-up:hover .eihe-caption { -webkit-transform: rotateX(0); -moz-transform: rotateX(0); -ms-transform: rotateX(0); -o-transform: rotateX(0); transform: rotateX(0); } /* eihe-hinge-down ----------------------------- */ .eihe-hinge-down img { -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; transform-origin: 50% 100%; } .eihe-hinge-down .eihe-caption { -webkit-transform: rotateX(-90deg); -moz-transform: rotateX(-90deg); -ms-transform: rotateX(-90deg); -o-transform: rotateX(-90deg); transform: rotateX(-90deg); -webkit-transform-origin: 50% -50%; -moz-transform-origin: 50% -50%; -ms-transform-origin: 50% -50%; -o-transform-origin: 50% -50%; transform-origin: 50% -50%; } .eihe-hinge-down:hover > img { -webkit-transform: rotateX(90deg); -moz-transform: rotateX(90deg); -ms-transform: rotateX(90deg); -o-transform: rotateX(90deg); transform: rotateX(90deg); opacity: 0; } .eihe-hinge-down:hover .eihe-caption { -webkit-transform: rotateX(0); -moz-transform: rotateX(0); -ms-transform: rotateX(0); -o-transform: rotateX(0); transform: rotateX(0); } /* eihe-hinge-left ----------------------------- */ .eihe-hinge-left img { -webkit-transform-origin: 0% 50%; -moz-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; transform-origin: 0% 50%; } .eihe-hinge-left .eihe-caption { -webkit-transform: rotateY(-90deg); -moz-transform: rotateY(-90deg); -ms-transform: rotateY(-90deg); -o-transform: rotateY(-90deg); transform: rotateY(-90deg); -webkit-transform-origin: 100% 50%; -moz-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; -o-transform-origin: 100% 50%; transform-origin: 100% 50%; } .eihe-hinge-left:hover > img { -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); } .eihe-hinge-left:hover .eihe-caption { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); -ms-transform: rotateY(0); -o-transform: rotateY(0); transform: rotateY(0); } /* eihe-hinge-right ----------------------------- */ .eihe-hinge-right img { -webkit-transform-origin: 100% 50%; -moz-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; -o-transform-origin: 100% 50%; transform-origin: 100% 50%; } .eihe-hinge-right .eihe-caption { -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-transform-origin: 0 50%; -moz-transform-origin: 0 50%; -ms-transform-origin: 0 50%; -o-transform-origin: 0 50%; transform-origin: 0 50%; } .eihe-hinge-right:hover > img { -webkit-transform: rotateY(-90deg); -moz-transform: rotateY(-90deg); -ms-transform: rotateY(-90deg); -o-transform: rotateY(-90deg); transform: rotateY(-90deg); } .eihe-hinge-right:hover .eihe-caption { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); -ms-transform: rotateY(0); -o-transform: rotateY(0); transform: rotateY(0); } /* eihe-flip-* ----------------------------- */ [class^='eihe-flip-'], [class*=' eihe-flip-'] { -webkit-perspective: 50em; -moz-perspective: 50em; perspective: 50em; } [class^='eihe-flip-'] img, [class*=' eihe-flip-'] img { backface-visibility: hidden; } [class^='eihe-flip-'] .eihe-caption, [class*=' eihe-flip-'] .eihe-caption { opacity: 0; } [class^='eihe-flip-']:hover > img, [class*=' eihe-flip-']:hover > img { opacity: 0; } [class^='eihe-flip-']:hover .eihe-caption, [class*=' eihe-flip-']:hover .eihe-caption { opacity: 1; -webkit-transition-delay: 0.14s; -moz-transition-delay: 0.14s; transition-delay: 0.14s; } /* eihe-flip-horiz ----------------------------- */ .eihe-flip-horiz .eihe-caption { -webkit-transform: rotateX(90deg); -moz-transform: rotateX(90deg); -ms-transform: rotateX(90deg); -o-transform: rotateX(90deg); transform: rotateX(90deg); -webkit-transform-origin: 0% 50%; -moz-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; transform-origin: 0% 50%; } .eihe-flip-horiz:hover img { -webkit-transform: rotateX(-180deg); -moz-transform: rotateX(-180deg); -ms-transform: rotateX(-180deg); -o-transform: rotateX(-180deg); transform: rotateX(-180deg); } .eihe-flip-horiz:hover .eihe-caption { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); } /* eihe-flip-vert ----------------------------- */ .eihe-flip-vert .eihe-caption { -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -o-transform-origin: 50% 0%; transform-origin: 50% 0%; } .eihe-flip-vert:hover > img { -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); -ms-transform: rotateY(-180deg); -o-transform: rotateY(-180deg); transform: rotateY(-180deg); } .eihe-flip-vert:hover .eihe-caption { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } /* eihe-flip-diag-1 ----------------------------- */ .eihe-flip-diag-1 .eihe-caption { -webkit-transform: rotate3d(1, -1, 0, 100deg); -moz-transform: rotate3d(1, -1, 0, 100deg); -ms-transform: rotate3d(1, -1, 0, 100deg); -o-transform: rotate3d(1, -1, 0, 100deg); transform: rotate3d(1, -1, 0, 100deg); } .eihe-flip-diag-1:hover > img { -webkit-transform: rotate3d(-1, 1, 0, 100deg); -moz-transform: rotate3d(-1, 1, 0, 100deg); -ms-transform: rotate3d(-1, 1, 0, 100deg); -o-transform: rotate3d(-1, 1, 0, 100deg); transform: rotate3d(-1, 1, 0, 100deg); } .eihe-flip-diag-1:hover .eihe-caption { -webkit-transform: rotate3d(0, 0, 0, 0deg); -moz-transform: rotate3d(0, 0, 0, 0deg); -ms-transform: rotate3d(0, 0, 0, 0deg); -o-transform: rotate3d(0, 0, 0, 0deg); transform: rotate3d(0, 0, 0, 0deg); } /* eihe-flip-diag-2 ----------------------------- */ .eihe-flip-diag-2 .eihe-caption { -webkit-transform: rotate3d(1, 1, 0, 100deg); -moz-transform: rotate3d(1, 1, 0, 100deg); -ms-transform: rotate3d(1, 1, 0, 100deg); -o-transform: rotate3d(1, 1, 0, 100deg); transform: rotate3d(1, 1, 0, 100deg); } .eihe-flip-diag-2:hover > img { -webkit-transform: rotate3d(-1, -1, 0, 100deg); -moz-transform: rotate3d(-1, -1, 0, 100deg); -ms-transform: rotate3d(-1, -1, 0, 100deg); -o-transform: rotate3d(-1, -1, 0, 100deg); transform: rotate3d(-1, -1, 0, 100deg); } .eihe-flip-diag-2:hover .eihe-caption { -webkit-transform: rotate3d(0, 0, 0, 0deg); -moz-transform: rotate3d(0, 0, 0, 0deg); -ms-transform: rotate3d(0, 0, 0, 0deg); -o-transform: rotate3d(0, 0, 0, 0deg); transform: rotate3d(0, 0, 0, 0deg); } /* eihe-shutter-out-* ----------------------------- */ [class^='eihe-shutter-out-']:before, [class*=' eihe-shutter-out-']:before { position: absolute; content: ''; -webkit-transition-delay: 0.105s; -moz-transition-delay: 0.105s; transition-delay: 0.105s; } [class^='eihe-shutter-out-'] .eihe-caption, [class*=' eihe-shutter-out-'] .eihe-caption { opacity: 0; -webkit-transition-delay: 0s; -moz-transition-delay: 0s; transition-delay: 0s; } [class^='eihe-shutter-out-']:hover:before, [class*=' eihe-shutter-out-']:hover:before { -webkit-transition-delay: 0s; -moz-transition-delay: 0s; transition-delay: 0s; } [class^='eihe-shutter-out-']:hover .eihe-caption, [class*=' eihe-shutter-out-']:hover .eihe-caption { opacity: 1; -webkit-transition-delay: 0.105s; -moz-transition-delay: 0.105s; transition-delay: 0.105s; } /* eihe-shutter-out-horiz ----------------------------- */ .eihe-shutter-out-horiz:before { left: 50%; right: 50%; top: 0; bottom: 0; } .eihe-shutter-out-horiz:hover:before { left: 0; right: 0; } /* eihe-shutter-out-vert ----------------------------- */ .eihe-shutter-out-vert:before { top: 50%; bottom: 50%; left: 0; right: 0; } .eihe-shutter-out-vert:hover:before { top: 0; bottom: 0; } /* eihe-shutter-out-diag-1 ----------------------------- */ .eihe-shutter-out-diag-1:before { top: 50%; bottom: 50%; left: -35%; right: -35%; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .eihe-shutter-out-diag-1:hover:before { top: -35%; bottom: -35%; } /* eihe-shutter-out-diag-2 ----------------------------- */ .eihe-shutter-out-diag-2:before { top: 50%; bottom: 50%; left: -35%; right: -35%; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .eihe-shutter-out-diag-2:hover:before { top: -35%; bottom: -35%; } /* eihe-shutter-in-* ----------------------------- */ [class^='eihe-shutter-in-']:after, [class^='eihe-shutter-in-']:before, [class*=' eihe-shutter-in-']:after, [class*=' eihe-shutter-in-']:before { position: absolute; content: ''; } [class^='eihe-shutter-in-']:after, [class*=' eihe-shutter-in-']:after { top: 0; left: 0; } [class^='eihe-shutter-in-']:before, [class*=' eihe-shutter-in-']:before { right: 0; bottom: 0; } [class^='eihe-shutter-in-'] .eihe-caption, [class*=' eihe-shutter-in-'] .eihe-caption { opacity: 0; z-index: 1; } [class^='eihe-shutter-in-']:hover .eihe-caption, [class*=' eihe-shutter-in-']:hover .eihe-caption { opacity: 1; -webkit-transition-delay: 0.21s; -moz-transition-delay: 0.21s; transition-delay: 0.21s; } /* eihe-shutter-in-horiz ----------------------------- */ .eihe-shutter-in-horiz:after, .eihe-shutter-in-horiz:before { width: 0; height: 100%; } .eihe-shutter-in-horiz:hover:after, .eihe-shutter-in-horiz:hover:before { width: 50%; } /* eihe-shutter-in-vert ----------------------------- */ .eihe-shutter-in-vert:after, .eihe-shutter-in-vert:before { height: 0; width: 100%; } .eihe-shutter-in-vert:hover:after, .eihe-shutter-in-vert:hover:before { height: 50%; } /* eihe-shutter-in-out-horiz ----------------------------- */ .eihe-shutter-in-out-horiz:after, .eihe-shutter-in-out-horiz:before { width: 0; height: 100%; opacity: 0.75; } .eihe-shutter-in-out-horiz:hover:after, .eihe-shutter-in-out-horiz:hover:before { width: 100%; } /* eihe-shutter-in-out-vert ----------------------------- */ .eihe-shutter-in-out-vert:after, .eihe-shutter-in-out-vert:before { height: 0; width: 100%; opacity: 0.75; } .eihe-shutter-in-out-vert:hover:after, .eihe-shutter-in-out-vert:hover:before { height: 100%; } /* eihe-shutter-in-out-diag-1 ----------------------------- */ .eihe-shutter-in-out-diag-1:after, .eihe-shutter-in-out-diag-1:before { width: 200%; height: 200%; -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; transition: all 0.6s ease; opacity: 0.75; } .eihe-shutter-in-out-diag-1:after { -webkit-transform: skew(-45deg) translateX(-150%); -moz-transform: skew(-45deg) translateX(-150%); -ms-transform: skew(-45deg) translateX(-150%); -o-transform: skew(-45deg) translateX(-150%); transform: skew(-45deg) translateX(-150%); } .eihe-shutter-in-out-diag-1:before { -webkit-transform: skew(-45deg) translateX(150%); -moz-transform: skew(-45deg) translateX(150%); -ms-transform: skew(-45deg) translateX(150%); -o-transform: skew(-45deg) translateX(150%); transform: skew(-45deg) translateX(150%); } .eihe-shutter-in-out-diag-1:hover:after { -webkit-transform: skew(-45deg) translateX(-50%); -moz-transform: skew(-45deg) translateX(-50%); -ms-transform: skew(-45deg) translateX(-50%); -o-transform: skew(-45deg) translateX(-50%); transform: skew(-45deg) translateX(-50%); } .eihe-shutter-in-out-diag-1:hover:before { -webkit-transform: skew(-45deg) translateX(50%); -moz-transform: skew(-45deg) translateX(50%); -ms-transform: skew(-45deg) translateX(50%); -o-transform: skew(-45deg) translateX(50%); transform: skew(-45deg) translateX(50%); } /* eihe-shutter-in-out-diag-2 ----------------------------- */ .eihe-shutter-in-out-diag-2:after, .eihe-shutter-in-out-diag-2:before { width: 200%; height: 200%; -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; transition: all 0.6s ease; opacity: 0.75; } .eihe-shutter-in-out-diag-2:after { -webkit-transform: skew(45deg) translateX(-100%); -moz-transform: skew(45deg) translateX(-100%); -ms-transform: skew(45deg) translateX(-100%); -o-transform: skew(45deg) translateX(-100%); transform: skew(45deg) translateX(-100%); } .eihe-shutter-in-out-diag-2:before { -webkit-transform: skew(45deg) translateX(100%); -moz-transform: skew(45deg) translateX(100%); -ms-transform: skew(45deg) translateX(100%); -o-transform: skew(45deg) translateX(100%); transform: skew(45deg) translateX(100%); } .eihe-shutter-in-out-diag-2:hover:after { -webkit-transform: skew(45deg) translateX(0%); -moz-transform: skew(45deg) translateX(0%); -ms-transform: skew(45deg) translateX(0%); -o-transform: skew(45deg) translateX(0%); transform: skew(45deg) translateX(0%); } .eihe-shutter-in-out-diag-2:hover:before { -webkit-transform: skew(45deg) translateX(0%); -moz-transform: skew(45deg) translateX(0%); -ms-transform: skew(45deg) translateX(0%); -o-transform: skew(45deg) translateX(0%); transform: skew(45deg) translateX(0%); } /* eihe-fold* ----------------------------- */ [class^='eihe-fold'], [class*=' eihe-fold'] { -webkit-perspective: 50em; -moz-perspective: 50em; perspective: 50em; } [class^='eihe-fold'] img, [class*=' eihe-fold'] img { -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -o-transform-origin: 50% 0%; transform-origin: 50% 0%; } [class^='eihe-fold'] .eihe-caption, [class*=' eihe-fold'] .eihe-caption { z-index: 1; opacity: 0; } [class^='eihe-fold']:hover > img, [class*=' eihe-fold']:hover > img { opacity: 0; -webkit-transition-delay: 0; -moz-transition-delay: 0; transition-delay: 0; } [class^='eihe-fold']:hover .eihe-caption, [class*=' eihe-fold']:hover .eihe-caption { -webkit-transform: rotateX(0) translate3d(0, 0%, 0) scale(1); -moz-transform: rotateX(0) translate3d(0, 0%, 0) scale(1); -ms-transform: rotateX(0) translate3d(0, 0%, 0) scale(1); -o-transform: rotateX(0) translate3d(0, 0%, 0) scale(1); transform: rotateX(0) translate3d(0, 0%, 0) scale(1); opacity: 1; -webkit-transition-delay: 0.21s; -moz-transition-delay: 0.21s; transition-delay: 0.21s; } /* eihe-fold-up ----------------------------- */ .eihe-fold-up > img { -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -o-transform-origin: 50% 0%; transform-origin: 50% 0%; } .eihe-fold-up .eihe-caption { -webkit-transform: rotateX(-90deg) translate3d(0%, -50%, 0) scale(0.6); -moz-transform: rotateX(-90deg) translate3d(0%, -50%, 0) scale(0.6); -ms-transform: rotateX(-90deg) translate3d(0%, -50%, 0) scale(0.6); -o-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%; -moz-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; transform-origin: 50% 100%; } .eihe-fold-up:hover > img { -webkit-transform: rotateX(90deg) scale(0.6) translateY(50%); -moz-transform: rotateX(90deg) scale(0.6) translateY(50%); -ms-transform: rotateX(90deg) scale(0.6) translateY(50%); -o-transform: rotateX(90deg) scale(0.6) translateY(50%); transform: rotateX(90deg) scale(0.6) translateY(50%); } /* eihe-fold-down ----------------------------- */ .eihe-fold-down > img { -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; transform-origin: 50% 100%; } .eihe-fold-down .eihe-caption { -webkit-transform: rotateX(90deg) translate3d(0%, 50%, 0) scale(0.6); -moz-transform: rotateX(90deg) translate3d(0%, 50%, 0) scale(0.6); -ms-transform: rotateX(90deg) translate3d(0%, 50%, 0) scale(0.6); -o-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%; -moz-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -o-transform-origin: 50% 0%; transform-origin: 50% 0%; } .eihe-fold-down:hover > img { -webkit-transform: rotateX(-90deg) scale(0.6) translateY(-50%); -moz-transform: rotateX(-90deg) scale(0.6) translateY(-50%); -ms-transform: rotateX(-90deg) scale(0.6) translateY(-50%); -o-transform: rotateX(-90deg) scale(0.6) translateY(-50%); transform: rotateX(-90deg) scale(0.6) translateY(-50%); } /* eihe-fold-left ----------------------------- */ .eihe-fold-left > img { -webkit-transform-origin: 0% 50%; -moz-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; transform-origin: 0% 50%; } .eihe-fold-left .eihe-caption { -webkit-transform: rotateY(90deg) translate3d(-50%, 0%, 0) scale(0.6); -moz-transform: rotateY(90deg) translate3d(-50%, 0%, 0) scale(0.6); -ms-transform: rotateY(90deg) translate3d(-50%, 0%, 0) scale(0.6); -o-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%; -moz-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; -o-transform-origin: 100% 50%; transform-origin: 100% 50%; } .eihe-fold-left:hover > img { -webkit-transform: rotateY(-90deg) scale(0.6) translateX(50%); -moz-transform: rotateY(-90deg) scale(0.6) translateX(50%); -ms-transform: rotateY(-90deg) scale(0.6) translateX(50%); -o-transform: rotateY(-90deg) scale(0.6) translateX(50%); transform: rotateY(-90deg) scale(0.6) translateX(50%); } /* eihe-fold-right ----------------------------- */ .eihe-fold-right > img { -webkit-transform-origin: 100% 50%; -moz-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; -o-transform-origin: 100% 50%; transform-origin: 100% 50%; } .eihe-fold-right .eihe-caption { -webkit-transform: rotateY(-90deg) translate3d(50%, 0%, 0) scale(0.6); -moz-transform: rotateY(-90deg) translate3d(50%, 0%, 0) scale(0.6); -ms-transform: rotateY(-90deg) translate3d(50%, 0%, 0) scale(0.6); -o-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%; -moz-transform-origin: 0 50%; -ms-transform-origin: 0 50%; -o-transform-origin: 0 50%; transform-origin: 0 50%; } .eihe-fold-right:hover > img { -webkit-transform: rotateY(90deg) scale(0.6) translateX(-50%); -moz-transform: rotateY(90deg) scale(0.6) translateX(-50%); -ms-transform: rotateY(90deg) scale(0.6) translateX(-50%); -o-transform: rotateY(90deg) scale(0.6) translateX(-50%); transform: rotateY(90deg) scale(0.6) translateX(-50%); } /* eihe-zoom-in ----------------------------- */ .eihe-zoom-in .eihe-caption { opacity: 0; -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -ms-transform: scale(0.5); -o-transform: scale(0.5); transform: scale(0.5); } .eihe-zoom-in:hover .eihe-caption { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); opacity: 1; } /* eihe-zoom-out* ----------------------------- */ [class^='eihe-zoom-out'] .eihe-caption, [class*=' eihe-zoom-out'] .eihe-caption { -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -ms-transform: scale(0.5); -o-transform: scale(0.5); transform: scale(0.5); -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; opacity: 0; } [class^='eihe-zoom-out']:hover .eihe-caption, [class^='eihe-zoom-out'].hover .eihe-caption, [class*=' eihe-zoom-out']:hover .eihe-caption, [class*=' eihe-zoom-out'].hover .eihe-caption { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); opacity: 1; -webkit-transition-delay: 0.35s; -moz-transition-delay: 0.35s; transition-delay: 0.35s; } /* eihe-zoom-out ----------------------------- */ .eihe-zoom-out:hover > img { -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -ms-transform: scale(0.5); -o-transform: scale(0.5); transform: scale(0.5); opacity: 0; } /* eihe-zoom-out-up ----------------------------- */ .eihe-zoom-out-up:hover > img, .eihe-zoom-out-up.hover > img { -webkit-animation: eihe-zoom-out-up 0.4025s linear; -moz-animation: eihe-zoom-out-up 0.4025s linear; animation: eihe-zoom-out-up 0.4025s linear; -webkit-animation-iteration-count: 1; -moz-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; animation-fill-mode: forwards; } @-webkit-keyframes eihe-zoom-out-up { 50% { -webkit-transform: scale(0.8) translateY(0%); -moz-transform: scale(0.8) translateY(0%); -ms-transform: scale(0.8) translateY(0%); -o-transform: scale(0.8) translateY(0%); transform: scale(0.8) translateY(0%); opacity: 0.5; } 100% { -webkit-transform: scale(0.8) translateY(-150%); -moz-transform: scale(0.8) translateY(-150%); -ms-transform: scale(0.8) translateY(-150%); -o-transform: scale(0.8) translateY(-150%); transform: scale(0.8) translateY(-150%); opacity: 0.5; } } @keyframes eihe-zoom-out-up { 50% { -webkit-transform: scale(0.8) translateY(0%); -moz-transform: scale(0.8) translateY(0%); -ms-transform: scale(0.8) translateY(0%); -o-transform: scale(0.8) translateY(0%); transform: scale(0.8) translateY(0%); opacity: 0.5; } 100% { -webkit-transform: scale(0.8) translateY(-150%); -moz-transform: scale(0.8) translateY(-150%); -ms-transform: scale(0.8) translateY(-150%); -o-transform: scale(0.8) translateY(-150%); transform: scale(0.8) translateY(-150%); opacity: 0.5; } } /* eihe-zoom-out-down ----------------------------- */ .eihe-zoom-out-down:hover > img, .eihe-zoom-out-down.hover > img { -webkit-animation: eihe-zoom-out-down 0.4025s linear; -moz-animation: eihe-zoom-out-down 0.4025s linear; animation: eihe-zoom-out-down 0.4025s linear; -webkit-animation-iteration-count: 1; -moz-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; animation-fill-mode: forwards; } @-webkit-keyframes eihe-zoom-out-down { 50% { -webkit-transform: scale(0.8) translateY(0%); -moz-transform: scale(0.8) translateY(0%); -ms-transform: scale(0.8) translateY(0%); -o-transform: scale(0.8) translateY(0%); transform: scale(0.8) translateY(0%); opacity: 0.5; } 100% { -webkit-transform: scale(0.8) translateY(150%); -moz-transform: scale(0.8) translateY(150%); -ms-transform: scale(0.8) translateY(150%); -o-transform: scale(0.8) translateY(150%); transform: scale(0.8) translateY(150%); opacity: 0.5; } } @keyframes eihe-zoom-out-down { 50% { -webkit-transform: scale(0.8) translateY(0%); -moz-transform: scale(0.8) translateY(0%); -ms-transform: scale(0.8) translateY(0%); -o-transform: scale(0.8) translateY(0%); transform: scale(0.8) translateY(0%); opacity: 0.5; } 100% { -webkit-transform: scale(0.8) translateY(150%); -moz-transform: scale(0.8) translateY(150%); -ms-transform: scale(0.8) translateY(150%); -o-transform: scale(0.8) translateY(150%); transform: scale(0.8) translateY(150%); opacity: 0.5; } } /* eihe-zoom-out-left ----------------------------- */ .eihe-zoom-out-left:hover > img, .eihe-zoom-out-left.hover > img { -webkit-animation: eihe-zoom-out-left 0.4025s linear; -moz-animation: eihe-zoom-out-left 0.4025s linear; animation: eihe-zoom-out-left 0.4025s linear; -webkit-animation-iteration-count: 1; -moz-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; animation-fill-mode: forwards; } @-webkit-keyframes eihe-zoom-out-left { 50% { -webkit-transform: scale(0.8) translateX(0%); -moz-transform: scale(0.8) translateX(0%); -ms-transform: scale(0.8) translateX(0%); -o-transform: scale(0.8) translateX(0%); transform: scale(0.8) translateX(0%); opacity: 0.5; } 100% { -webkit-transform: scale(0.8) translateX(-150%); -moz-transform: scale(0.8) translateX(-150%); -ms-transform: scale(0.8) translateX(-150%); -o-transform: scale(0.8) translateX(-150%); transform: scale(0.8) translateX(-150%); opacity: 0.5; } } @keyframes eihe-zoom-out-left { 50% { -webkit-transform: scale(0.8) translateX(0%); -moz-transform: scale(0.8) translateX(0%); -ms-transform: scale(0.8) translateX(0%); -o-transform: scale(0.8) translateX(0%); transform: scale(0.8) translateX(0%); opacity: 0.5; } 100% { -webkit-transform: scale(0.8) translateX(-150%); -moz-transform: scale(0.8) translateX(-150%); -ms-transform: scale(0.8) translateX(-150%); -o-transform: scale(0.8) translateX(-150%); transform: scale(0.8) translateX(-150%); opacity: 0.5; } } /* eihe-zoom-out-right ----------------------------- */ .eihe-zoom-out-right:hover > img, .eihe-zoom-out-right.hover > img { -webkit-animation: eihe-zoom-out-right 0.4025s linear; -moz-animation: eihe-zoom-out-right 0.4025s linear; animation: eihe-zoom-out-right 0.4025s linear; -webkit-animation-iteration-count: 1; -moz-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; animation-fill-mode: forwards; } @-webkit-keyframes eihe-zoom-out-right { 50% { -webkit-transform: scale(0.8) translateX(0%); -moz-transform: scale(0.8) translateX(0%); -ms-transform: scale(0.8) translateX(0%); -o-transform: scale(0.8) translateX(0%); transform: scale(0.8) translateX(0%); opacity: 0.5; } 100% { -webkit-transform: scale(0.8) translateX(150%); -moz-transform: scale(0.8) translateX(150%); -ms-transform: scale(0.8) translateX(150%); -o-transform: scale(0.8) translateX(150%); transform: scale(0.8) translateX(150%); opacity: 0.5; } } @keyframes eihe-zoom-out-right { 50% { -webkit-transform: scale(0.8) translateX(0%); -moz-transform: scale(0.8) translateX(0%); -ms-transform: scale(0.8) translateX(0%); -o-transform: scale(0.8) translateX(0%); transform: scale(0.8) translateX(0%); opacity: 0.5; } 100% { -webkit-transform: scale(0.8) translateX(150%); -moz-transform: scale(0.8) translateX(150%); -ms-transform: scale(0.8) translateX(150%); -o-transform: scale(0.8) translateX(150%); transform: scale(0.8) translateX(150%); opacity: 0.5; } } /* eihe-zoom-out-flip-horiz ----------------------------- */ .eihe-zoom-out-flip-horiz { -webkit-perspective: 50em; -moz-perspective: 50em; perspective: 50em; } .eihe-zoom-out-flip-horiz .eihe-caption { opacity: 0; -webkit-transform: rotateX(90deg) translateY(-100%) scale(0.5); -moz-transform: rotateX(90deg) translateY(-100%) scale(0.5); -ms-transform: rotateX(90deg) translateY(-100%) scale(0.5); -o-transform: rotateX(90deg) translateY(-100%) scale(0.5); transform: rotateX(90deg) translateY(-100%) scale(0.5); } .eihe-zoom-out-flip-horiz:hover > img, .eihe-zoom-out-flip-horiz.hover > img { -webkit-transform: rotateX(-100deg) translateY(50%) scale(0.5); -moz-transform: rotateX(-100deg) translateY(50%) scale(0.5); -ms-transform: rotateX(-100deg) translateY(50%) scale(0.5); -o-transform: rotateX(-100deg) translateY(50%) scale(0.5); transform: rotateX(-100deg) translateY(50%) scale(0.5); opacity: 0; -webkit-transition-delay: 0; -moz-transition-delay: 0; transition-delay: 0; } .eihe-zoom-out-flip-horiz:hover .eihe-caption, .eihe-zoom-out-flip-horiz.hover .eihe-caption { -webkit-transform: rotateX(0) translateY(0%) scale(1); -moz-transform: rotateX(0) translateY(0%) scale(1); -ms-transform: rotateX(0) translateY(0%) scale(1); -o-transform: rotateX(0) translateY(0%) scale(1); transform: rotateX(0) translateY(0%) scale(1); opacity: 1; -webkit-transition-delay: 0.35s; -moz-transition-delay: 0.35s; transition-delay: 0.35s; } /* eihe-zoom-out-flip-vert ----------------------------- */ .eihe-zoom-out-flip-vert { -webkit-perspective: 50em; -moz-perspective: 50em; perspective: 50em; } .eihe-zoom-out-flip-vert .eihe-caption { opacity: 0; -webkit-transform: rotateY(90deg) translate(50%, 0) scale(0.5); -moz-transform: rotateY(90deg) translate(50%, 0) scale(0.5); -ms-transform: rotateY(90deg) translate(50%, 0) scale(0.5); -o-transform: rotateY(90deg) translate(50%, 0) scale(0.5); transform: rotateY(90deg) translate(50%, 0) scale(0.5); } .eihe-zoom-out-flip-vert:hover > img, .eihe-zoom-out-flip-vert.hover > img { -webkit-transform: rotateY(-100deg) translateX(50%) scale(0.5); -moz-transform: rotateY(-100deg) translateX(50%) scale(0.5); -ms-transform: rotateY(-100deg) translateX(50%) scale(0.5); -o-transform: rotateY(-100deg) translateX(50%) scale(0.5); transform: rotateY(-100deg) translateX(50%) scale(0.5); opacity: 0; -webkit-transition-delay: 0; -moz-transition-delay: 0; transition-delay: 0; } .eihe-zoom-out-flip-vert:hover .eihe-caption, .eihe-zoom-out-flip-vert.hover .eihe-caption { -webkit-transform: rotateY(0) translate(0, 0) scale(1); -moz-transform: rotateY(0) translate(0, 0) scale(1); -ms-transform: rotateY(0) translate(0, 0) scale(1); -o-transform: rotateY(0) translate(0, 0) scale(1); transform: rotateY(0) translate(0, 0) scale(1); opacity: 1; -webkit-transition-delay: 0.35s; -moz-transition-delay: 0.35s; transition-delay: 0.35s; } /* eihe-blur ----------------------------- */ .eihe-blur .eihe-caption { opacity: 0; } .eihe-blur:hover > img { -webkit-filter: blur(30px); filter: blur(30px); -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); opacity: 0; } .eihe-blur:hover .eihe-caption { opacity: 1; -webkit-transition-delay: 0.21s; -moz-transition-delay: 0.21s; transition-delay: 0.21s; }