/*------------------------------------ Block Hovers ------------------------------------*/ [class*="up-block-hover"] { position: relative; /* max-width: 100%;*/ max-width: 80%; margin: 0; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateZ(0); transform: translateZ(0); } [class*="up-block-hover"], [class*="up-block-hover"]::before, [class*="up-block-hover"]::after { transition: all .3s ease; } .up-block-hover--uncroped { overflow: visible; } .up-block-hover--uncroped:hover { z-index: 2; } .up-block-hover__img { max-width: 100%; vertical-align: top; } .up-block-hover__block { min-height: 100%; } [class*="up-block-hover__additional"] { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } [class*="up-block-hover__additional--v1"] { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: 15px; opacity: 0; } .up-block-hover:hover .up-block-hover__additional--v1 { opacity: 1; } .up-block-hover--shadow:hover, .up-block-hover--shadow:hover .up-block-hover__additional-shadow { box-shadow: 0 0 10px #777; } .up-block-hover--shadow-v2:hover, .up-block-hover--shadow-v2:hover .up-block-hover__additional-shadow { box-shadow: 0 0 15px #ddd; } .up-block-hover--shadow-v3:hover, .up-block-hover--shadow-v3:hover .up-block-hover__additional-shadow { box-shadow: 0 0 3px #ddd; } .up-block-hover--scale:hover, .up-block-hover--scale-img:hover .up-block-hover__img { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } .up-block-hover__additional-scale { z-index: -1; max-width: initial; } .up-block-hover:hover .up-block-hover__additional-scale { top: -20px; right: -20px; bottom: -20px; left: -20px; } .up-block-hover--scale-down:hover, .up-block-hover--scale-down-img:hover .up-block-hover__img { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } .up-block-hover__additional-scale-down { z-index: -1; max-width: initial; } .up-block-hover:hover .up-block-hover__additional-scale-down { top: 20px; right: 20px; bottom: 20px; left: 20px; } .up-block-hover__main--zoom-v1, .up-block-hover__main--zoom-v2 { -webkit-transform: scale(1.01); } .up-block-hover:hover .up-block-hover__main--zoom-v1 { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .up-block-hover:hover .up-block-hover__main--zoom-v2 { -webkit-transform: scale(1.04); -ms-transform: scale(1.04); transform: scale(1.04); } .up-block-hover [class*="icon-"] { padding: 1px; } .up-block-hover__main--grayscale { filter: url("data:image/svg+xml;utf8,#grayscale"); /* Firefox 10+, Firefox on Android */ filter: gray; -webkit-filter: grayscale(100%); } .up-block-hover:hover .up-block-hover__main--grayscale { filter: url("data:image/svg+xml;utf8,#grayscale"); -webkit-filter: grayscale(0%); } .up-block-hover__main--white { -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); } .up-block-hover__additional--blur { opacity: 0; } .up-block-hover:hover .up-block-hover__additional--blur { opacity: 1; transition-delay: .11s; } .up-block-hover:hover .up-block-hover__main--blur { -webkit-filter: blur(30px); filter: blur(30px); -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); opacity: 0; } [class*="up-block-hover-image-overlay"]::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; opacity: 0; transition: all .35s ease; } .up-block-hover:hover .up-block-hover-image-overlay::after { opacity: 1; } .up-block-hover__additional--fade { opacity: 0; } .up-block-hover:hover .up-block-hover__additional--fade { opacity: 1; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } .up-block-hover__additional--fade-up { -webkit-transform: translate(0, 15%); -ms-transform: translate(0, 15%); transform: translate(0, 15%); } .up-block-hover__additional--fade-down { -webkit-transform: translate(0, -15%); -ms-transform: translate(0, -15%); transform: translate(0, -15%); } .up-block-hover__additional--fade-left { -webkit-transform: translate(-15%, 0); -ms-transform: translate(-15%, 0); transform: translate(-15%, 0); } .up-block-hover__additional--fade-right { -webkit-transform: translate(15%, 0); -ms-transform: translate(15%, 0); transform: translate(15%, 0); } .up-block-hover:hover [class*="up-block-hover__additional--push"] { -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } .up-block-hover:hover .up-block-hover__main--push-up { -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); } .up-block-hover__additional--push-up { -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); } .up-block-hover:hover .up-block-hover__main--push-down { -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); } .up-block-hover__additional--push-down { -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); } .up-block-hover:hover .up-block-hover__main--push-left { -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); } .up-block-hover__additional--push-left { -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); } .up-block-hover:hover .up-block-hover__main--push-right { -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); } .up-block-hover__additional--push-right { -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); } .up-block-hover:hover [class*="up-block-hover__additional--slide"], .up-block-hover:hover [class*="up-block-hover__additional--partially-slide"] { -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } .up-block-hover__additional--slide-up { -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); } .up-block-hover__additional--slide-down { -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); } .up-block-hover__additional--slide-left { -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); } .up-block-hover__additional--slide-right { -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); } .up-block-hover__additional--slide-bottom-right { -webkit-transform: translate(-100%, -100%); -ms-transform: translate(-100%, -100%); transform: translate(-100%, -100%); } .up-block-hover__additional--slide-bottom-left { -webkit-transform: translate(100%, -100%); -ms-transform: translate(100%, -100%); transform: translate(100%, -100%); } .up-block-hover__additional--slide-top-right { -webkit-transform: translate(-100%, 100%); -ms-transform: translate(-100%, 100%); transform: translate(-100%, 100%); } .up-block-hover__additional--slide-top-left { -webkit-transform: translate(100%, 100%); -ms-transform: translate(100%, 100%); transform: translate(100%, 100%); } .up-block-hover__additional--partially-slide-up { top: auto; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); overflow: visible; } .up-block-hover__additional--partially-slide-up .up-block-hover__visible { position: absolute; bottom: 100%; margin-bottom: -1px; left: 0; right: 0; padding-left: inherit; padding-right: inherit; background: inherit; } .up-block-hover__additional--partially-slide-down { bottom: auto; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); overflow: visible; } .up-block-hover__additional--partially-slide-down .up-block-hover__visible { position: absolute; top: 100%; margin-top: -1px; left: 0; right: 0; padding-left: inherit; padding-right: inherit; background: inherit; } .up-block-hover--cot { -webkit-perspective: 50em; perspective: 50em; } [class*="up-block-hover__additional--cot"] { opacity: 0; z-index: 1; } .up-block-hover--cot:hover [class*="up-block-hover__main--cot"] { opacity: 0; } .up-block-hover--cot:hover [class*="up-block-hover__additional--cot"] { opacity: 1; transition-delay: 0.21s; } .up-block-hover__main--cot-up { -webkit-transform-origin: 50% 0; -ms-transform-origin: 50% 0; transform-origin: 50% 0; } .up-block-hover__additional--cot-up { -webkit-transform: rotateX(90deg); transform: rotateX(90deg); -webkit-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; transform-origin: 50% 100%; } .up-block-hover--cot:hover .up-block-hover__main--cot-up { -webkit-transform: rotateX(-90deg); transform: rotateX(-90deg); } .up-block-hover--cot:hover .up-block-hover__additional--cot-up { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); } .up-block-hover__main--cot-down { -webkit-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; transform-origin: 50% 100%; } .up-block-hover__additional--cot-down { -webkit-transform: rotateX(-90deg); transform: rotateX(-90deg); -webkit-transform-origin: 50% -50%; -ms-transform-origin: 50% -50%; transform-origin: 50% -50%; } .up-block-hover--cot:hover .up-block-hover__main--cot-down { -webkit-transform: rotateX(90deg); transform: rotateX(90deg); opacity: 0; } .up-block-hover--cot:hover .up-block-hover__additional--cot-down { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); } .up-block-hover__main--cot-left { -webkit-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; transform-origin: 0% 50%; } .up-block-hover__additional--cot-left { -webkit-transform: rotateY(-90deg); transform: rotateY(-90deg); -webkit-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; transform-origin: 100% 50%; } .up-block-hover--cot:hover .up-block-hover__main--cot-left { -webkit-transform: rotateY(90deg); transform: rotateY(90deg); } .up-block-hover--cot:hover .up-block-hover__additional--cot-left { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } .up-block-hover__main--cot-right { -webkit-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; transform-origin: 100% 50%; } .up-block-hover__additional--cot-right { -webkit-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-transform-origin: 0 50%; -ms-transform-origin: 0 50%; transform-origin: 0 50%; } .up-block-hover--cot:hover .up-block-hover__main--cot-right { -webkit-transform: rotateY(-90deg); transform: rotateY(-90deg); } .up-block-hover--cot:hover .up-block-hover__additional--cot-right { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } .up-block-hover--flip { -webkit-perspective: 50em; perspective: 50em; } [class*="up-block-hover__main--flip"] { -webkit-backface-visibility: hidden; backface-visibility: hidden; } [class*="up-block-hover__additional--flip"] { opacity: 0; } .up-block-hover--flip:hover [class*="up-block-hover__main--flip"] { opacity: 0; } .up-block-hover--flip:hover [class*="up-block-hover__additional--flip"] { opacity: 1; transition-delay: 0.13999999999999999s; } .up-block-hover__additional--flip-horiz { -webkit-transform: rotateX(90deg); transform: rotateX(90deg); -webkit-transform-origin: 0 50%; -ms-transform-origin: 0 50%; transform-origin: 0 50%; } .up-block-hover--flip:hover .up-block-hover__main--flip-horiz { -webkit-transform: rotateX(-180deg); transform: rotateX(-180deg); } .up-block-hover--flip:hover .up-block-hover__additional--flip-horiz { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); } .up-block-hover__additional--flip-vert { -webkit-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; transform-origin: 50% 0%; } .up-block-hover--flip:hover .up-block-hover__main--flip-vert { -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); } .up-block-hover--flip:hover .up-block-hover__additional--flip-vert { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } .up-block-hover__additional--flip-diag-1 { -webkit-transform: rotate3d(1, 1, 0, 100deg); transform: rotate3d(1, 1, 0, 100deg); } .up-block-hover--flip:hover .up-block-hover__main--flip-diag-1 { -webkit-transform: rotate3d(-1, -1, 0, 100deg); transform: rotate3d(-1, -1, 0, 100deg); } .up-block-hover--flip:hover .up-block-hover__additional--flip-diag-1 { -webkit-transform: rotate3d(0, 0, 0, 0deg); transform: rotate3d(0, 0, 0, 0deg); } .up-block-hover__additional--flip-diag-2 { -webkit-transform: rotate3d(1, -1, 0, 100deg); transform: rotate3d(1, -1, 0, 100deg); } .up-block-hover--flip:hover .up-block-hover__main--flip-diag-2 { -webkit-transform: rotate3d(-1, 1, 0, 100deg); transform: rotate3d(-1, 1, 0, 100deg); } .up-block-hover--flip:hover .up-block-hover__additional--flip-diag-2 { -webkit-transform: rotate3d(0, 0, 0, 0deg); transform: rotate3d(0, 0, 0, 0deg); } .up-block-hover--fold { -webkit-perspective: 50em; perspective: 50em; } [class*="up-block-hover__main--fold"] { -webkit-transform-origin: 50% 0; -ms-transform-origin: 50% 0; transform-origin: 50% 0; } [class*="up-block-hover__additional--fold"] { z-index: 1; opacity: 0; } .up-block-hover--fold:hover [class*="up-block-hover__main--fold"] { opacity: 0; transition-delay: 0; } .up-block-hover--fold:hover [class*="up-block-hover__additional--fold"] { -webkit-transform: rotateX(0deg) translate3d(0, 0, 0) scale(1); transform: rotateX(0deg) translate3d(0, 0, 0) scale(1); opacity: 1; transition-delay: .21s; } .up-block-hover__main--fold-up { -webkit-transform-origin: 50% 0; -ms-transform-origin: 50% 0; transform-origin: 50% 0; } .up-block-hover__additional--fold-up { -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%; -ms-transform-origin: 50% 100%; transform-origin: 50% 100%; } .up-block-hover--fold:hover .up-block-hover__main--fold-up { -webkit-transform: rotateX(90deg) scale(0.6) translateY(50%); transform: rotateX(90deg) scale(0.6) translateY(50%); } .up-block-hover__main--fold-down { -webkit-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; transform-origin: 50% 100%; } .up-block-hover__additional--fold-down { -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; -ms-transform-origin: 50% 0; transform-origin: 50% 0; } .up-block-hover--fold:hover .up-block-hover__main--fold-down { -webkit-transform: rotateX(-90deg) scale(0.6) translateY(-50%); transform: rotateX(-90deg) scale(0.6) translateY(-50%); } .up-block-hover__main--fold-left { -webkit-transform-origin: 0 50%; -ms-transform-origin: 0 50%; transform-origin: 0 50%; } .up-block-hover__additional--fold-left { -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%; -ms-transform-origin: 100% 50%; transform-origin: 100% 50%; } .up-block-hover--fold:hover .up-block-hover__main--fold-left { -webkit-transform: rotateY(-90deg) scale(0.6) translateX(50%); transform: rotateY(-90deg) scale(0.6) translateX(50%); } .up-block-hover__main--fold-right { -webkit-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; transform-origin: 100% 50%; } .up-block-hover__additional--fold-right { -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%; -ms-transform-origin: 0 50%; transform-origin: 0 50%; } .up-block-hover--fold:hover .up-block-hover__main--fold-right { -webkit-transform: rotateY(90deg) scale(0.6) translateX(-50%); transform: rotateY(90deg) scale(0.6) translateX(-50%); } .up-block-hover__additional--zoom-in { opacity: 0; -webkit-transform: scale(0.5); -ms-transform: scale(0.5); transform: scale(0.5); } .up-block-hover:hover .up-block-hover__additional--zoom-in { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; } .up-block-hover__additional--zoom-out { -webkit-transform: scale(0.5); -ms-transform: scale(0.5); transform: scale(0.5); -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; opacity: 0; } .up-block-hover:hover .up-block-hover__main--zoom-out { -webkit-transform: scale(0.5); -ms-transform: scale(0.5); transform: scale(0.5); opacity: 0; } .up-block-hover:hover .up-block-hover__additional--zoom-out { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; transition-delay: .35s; } [class*="up-block-hover--shutter-out"]::after { content: ""; position: absolute; transition-delay: .105s; z-index: 1; } .up-block-hover__additional--shutter-out { opacity: 0; transition-delay: 0s; z-index: 2; } [class*="up-block-hover--shutter-out"]:hover::after { transition-delay: 0s; } [class*="up-block-hover--shutter-out"]:hover .up-block-hover__additional--shutter-out { opacity: 1; transition-delay: .105s; } .up-block-hover--shutter-out-horiz::after { left: 50%; right: 50%; top: 0; bottom: 0; } .up-block-hover--shutter-out-horiz:hover::after { left: 0; right: 0; } .up-block-hover--shutter-out-vert::after { top: 50%; bottom: 50%; left: 0; right: 0; } .up-block-hover--shutter-out-vert:hover::after { top: 0; bottom: 0; } .up-block-hover--shutter-out-diag-1::after { top: 50%; bottom: 50%; left: -35%; right: -35%; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .up-block-hover--shutter-out-diag-1:hover::after { top: -35%; bottom: -35%; } .up-block-hover--shutter-out-diag-2::after { top: 50%; bottom: 50%; left: -35%; right: -35%; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .up-block-hover--shutter-out-diag-2:hover::after { top: -35%; bottom: -35%; } [class*="up-block-hover--shutter-in"]::after, [class*="up-block-hover--shutter-in"]::before { content: ""; position: absolute; z-index: 1; } [class*="up-block-hover--shutter-in"]::after { top: 0; left: 0; } [class*="up-block-hover--shutter-in"]::before { right: 0; bottom: 0; } .up-block-hover__additional--shutter-in { opacity: 0; z-index: 2; } [class*="up-block-hover--shutter-in"]:hover .up-block-hover__additional--shutter-in { opacity: 1; transition-delay: .21s; } .up-block-hover--shutter-in-horiz::after, .up-block-hover--shutter-in-horiz::before { width: 0; height: 100%; } .up-block-hover--shutter-in-horiz:hover::after, .up-block-hover--shutter-in-horiz:hover::before { width: 100%; } .up-block-hover--shutter-in-vert::after, .up-block-hover--shutter-in-vert::before { height: 0; width: 100%; } .up-block-hover--shutter-in-vert:hover::after, .up-block-hover--shutter-in-vert:hover::before { height: 100%; } .up-block-hover--shutter-in-diag-1::after, .up-block-hover--shutter-in-diag-1::before { width: 200%; height: 200%; transition: all .6s ease; } .up-block-hover--shutter-in-diag-1::after { -webkit-transform: skew(-45deg) translateX(-150%); -ms-transform: skew(-45deg) translateX(-150%); transform: skew(-45deg) translateX(-150%); } .up-block-hover--shutter-in-diag-1::before { -webkit-transform: skew(-45deg) translateX(150%); -ms-transform: skew(-45deg) translateX(150%); transform: skew(-45deg) translateX(150%); } .up-block-hover--shutter-in-diag-1:hover::after { -webkit-transform: skew(-45deg) translateX(-50%); -ms-transform: skew(-45deg) translateX(-50%); transform: skew(-45deg) translateX(-50%); } .up-block-hover--shutter-in-diag-1:hover::before { -webkit-transform: skew(-45deg) translateX(50%); -ms-transform: skew(-45deg) translateX(50%); transform: skew(-45deg) translateX(50%); } .up-block-hover--shutter-in-diag-2::after, .up-block-hover--shutter-in-diag-2::before { width: 200%; height: 200%; transition: all .6s ease; } .up-block-hover--shutter-in-diag-2::after { -webkit-transform: skew(45deg) translateX(-100%); -ms-transform: skew(45deg) translateX(-100%); transform: skew(45deg) translateX(-100%); } .up-block-hover--shutter-in-diag-2::before { -webkit-transform: skew(45deg) translateX(100%); -ms-transform: skew(45deg) translateX(100%); transform: skew(45deg) translateX(100%); } .up-block-hover--shutter-in-diag-2:hover::after { -webkit-transform: skew(45deg) translateX(0); -ms-transform: skew(45deg) translateX(0); transform: skew(45deg) translateX(0); } .up-block-hover--shutter-in-diag-2:hover::before { -webkit-transform: skew(45deg) translateX(0); -ms-transform: skew(45deg) translateX(0); transform: skew(45deg) translateX(0); } [class*="up-block-hover--shutter-in-out"]::after, [class*="up-block-hover--shutter-in-out"]::before { content: ""; position: absolute; z-index: 1; } [class*="up-block-hover--shutter-in-out"]::after { top: 0; left: 0; } [class*="up-block-hover--shutter-in-out"]::before { right: 0; bottom: 0; } .up-block-hover__additional--shutter-in-out { opacity: 0; z-index: 2; } [class*="up-block-hover--shutter-in-out"]:hover .up-block-hover__additional--shutter-in-out { opacity: 1; transition-delay: .21s; } .up-block-hover--shutter-in-out-horiz::after, .up-block-hover--shutter-in-out-horiz::before { width: 0; height: 100%; } .up-block-hover--shutter-in-out-horiz:hover::after, .up-block-hover--shutter-in-out-horiz:hover::before { width: 100%; opacity: .75; } .up-block-hover--shutter-in-out-vert::after, .up-block-hover--shutter-in-out-vert::before { height: 0; width: 100%; } .up-block-hover--shutter-in-out-vert:hover::after, .up-block-hover--shutter-in-out-vert:hover::before { height: 100%; opacity: .75; } .up-block-hover--shutter-in-out-diag-1::after, .up-block-hover--shutter-in-out-diag-1::before { width: 200%; height: 200%; transition: all .6s ease; opacity: .75; } .up-block-hover--shutter-in-out-diag-1::after { -webkit-transform: skew(-45deg) translateX(-150%); -ms-transform: skew(-45deg) translateX(-150%); transform: skew(-45deg) translateX(-150%); } .up-block-hover--shutter-in-out-diag-1::before { -webkit-transform: skew(-45deg) translateX(150%); -ms-transform: skew(-45deg) translateX(150%); transform: skew(-45deg) translateX(150%); } .up-block-hover--shutter-in-out-diag-1:hover::after { -webkit-transform: skew(-45deg) translateX(-50%); -ms-transform: skew(-45deg) translateX(-50%); transform: skew(-45deg) translateX(-50%); } .up-block-hover--shutter-in-out-diag-1:hover::before { -webkit-transform: skew(-45deg) translateX(50%); -ms-transform: skew(-45deg) translateX(50%); transform: skew(-45deg) translateX(50%); } .up-block-hover--shutter-in-out-diag-2::after, .up-block-hover--shutter-in-out-diag-2::before { width: 200%; height: 200%; transition: all .6s ease; opacity: .75; } .up-block-hover--shutter-in-out-diag-2::after { -webkit-transform: skew(45deg) translateX(-100%); -ms-transform: skew(45deg) translateX(-100%); transform: skew(45deg) translateX(-100%); } .up-block-hover--shutter-in-out-diag-2::before { -webkit-transform: skew(45deg) translateX(100%); -ms-transform: skew(45deg) translateX(100%); transform: skew(45deg) translateX(100%); } .up-block-hover--shutter-in-out-diag-2:hover::after { -webkit-transform: skew(45deg) translateX(0); -ms-transform: skew(45deg) translateX(0); transform: skew(45deg) translateX(0); } .up-block-hover--shutter-in-out-diag-2:hover::before { -webkit-transform: skew(45deg) translateX(0); -ms-transform: skew(45deg) translateX(0); transform: skew(45deg) translateX(0); } .up-block-hover--strip-shutter::before, .up-block-hover--strip-shutter::after, .up-block-hover__additional--strip-shutter::before, .up-block-hover__additional--strip-shutter::after { content: ""; position: absolute; top: 0; width: 25%; height: 100%; -webkit-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); opacity: 0; } .up-block-hover--strip-shutter::before, .up-block-hover--strip-shutter::after { z-index: 1; } .up-block-hover--strip-shutter::before { left: 0; transition-delay: 0s; } .up-block-hover--strip-shutter::after { left: 25%; transition-delay: .105s; } .up-block-hover__additional--strip-shutter { z-index: 3; } .up-block-hover__additional--strip-shutter::before, .up-block-hover__additional--strip-shutter::after { z-index: -1; } .up-block-hover__additional--strip-shutter::before { left: 50%; transition-delay: .21s; } .up-block-hover__additional--strip-shutter::after { left: 75%; transition-delay: .35s; } .up-block-hover--strip-shutter:hover::before, .up-block-hover--strip-shutter:hover::after, .up-block-hover--strip-shutter:hover .up-block-hover__additional--strip-shutter::before, .up-block-hover--strip-shutter:hover .up-block-hover__additional--strip-shutter::after { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; } .up-block-hover__additional--strip-shutter__inner { opacity: 0; } .up-block-hover--strip-shutter:hover .up-block-hover__additional--strip-shutter__inner { opacity: 1; transition-delay: .35s; } .up-block-hover--tile::before, .up-block-hover--tile::after, .up-block-hover__additional--tile::before, .up-block-hover__additional--tile::after { content: ""; position: absolute; width: 50%; height: 50%; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); opacity: 0; } .up-block-hover--tile::before, .up-block-hover--tile::after { z-index: 1; } .up-block-hover--tile::before { top: 0; left: 0; transition-delay: 0s; } .up-block-hover--tile::after { top: 0; left: 50%; transition-delay: .105s; } .up-block-hover__additional--tile { z-index: 3; } .up-block-hover__additional--tile::before, .up-block-hover__additional--tile::after { z-index: -1; } .up-block-hover__additional--tile::before { top: 50%; left: 0; transition-delay: .21s; } .up-block-hover__additional--tile::after { top: 50%; left: 50%; transition-delay: .35s; } .up-block-hover--tile:hover::before, .up-block-hover--tile:hover::after, .up-block-hover--tile:hover .up-block-hover__additional--tile::before, .up-block-hover--tile:hover .up-block-hover__additional--tile::after { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; } .up-block-hover__additional--tile__inner { opacity: 0; } .up-block-hover--tile:hover .up-block-hover__additional--tile__inner { opacity: 1; transition-delay: .35s; } .up-block-hover--cube { overflow: visible; background-color: transparent; -webkit-perspective: 50em; perspective: 50em; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } [class*="up-block-hover__main--cube"] { transition-delay: .05s; } [class*="up-block-hover__additional--cube"] { opacity: 0; transition-delay: 0s; } .up-block-hover--cube:hover [class*="up-block-hover__main--cube"] { opacity: 0; transition-delay: 0s; } .up-block-hover--cube:hover [class*="up-block-hover__additional--cube"] { opacity: 1; -webkit-transform: translateY(0%) rotateX(0deg); transform: translateY(0%) rotateX(0deg); transition-delay: .05s; } .up-block-hover__additional--cube-up { -webkit-transform: translateY(50%) rotateX(-90deg); transform: translateY(50%) rotateX(-90deg); } .up-block-hover--cube:hover .up-block-hover__main--cube-up { -webkit-transform: translateY(-50%) rotateX(90deg); transform: translateY(-50%) rotateX(90deg); } .up-block-hover__additional--cube-down { -webkit-transform: translateY(-50%) rotateX(90deg); transform: translateY(-50%) rotateX(90deg); } .up-block-hover--cube:hover .up-block-hover__main--cube-down { -webkit-transform: translateY(50%) rotateX(-90deg); transform: translateY(50%) rotateX(-90deg); } .up-block-hover__additional--cube-left { -webkit-transform: translateX(-50%) rotateY(-90deg); transform: translateX(-50%) rotateY(-90deg); } .up-block-hover--cube:hover .up-block-hover__main--cube-left { -webkit-transform: translateX(50%) rotateY(90deg); transform: translateX(50%) rotateY(90deg); } .up-block-hover__additional--cube-right { -webkit-transform: translateX(50%) rotateY(90deg); transform: translateX(50%) rotateY(90deg); } .up-block-hover--cube:hover .up-block-hover__main--cube-right { -webkit-transform: translateX(-50%) rotateY(-90deg); transform: translateX(-50%) rotateY(-90deg); } .up-block-hover--border-reveal::before, .up-block-hover--border-reveal::after, .up-block-hover__additional--border-reveal::before, .up-block-hover__additional--border-reveal::after { content: ""; position: absolute; background-color: #fff; -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; } .up-block-hover--border-reveal::before, .up-block-hover--border-reveal::after { left: 5px; right: 5px; height: 4px; z-index: 1; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); } .up-block-hover--border-reveal::before { top: 5px; transition-delay: .28s; } .up-block-hover--border-reveal:hover::before { transition-delay: 0s; } .up-block-hover--border-reveal::after { bottom: 5px; transition-delay: 0s; } .up-block-hover--border-reveal:hover::after { transition-delay: .28s; } .up-block-hover__additional--border-reveal { background-color: transparent; z-index: 3; } .up-block-hover__additional--border-reveal__inner { opacity: 0; } .up-block-hover__additional--border-reveal::before, .up-block-hover__additional--border-reveal::after { top: 5px; bottom: 5px; width: 4px; z-index: -1; -webkit-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); } .up-block-hover__additional--border-reveal::before { left: 5px; transition-delay: .28s; } .up-block-hover--border-reveal:hover .up-block-hover__additional--border-reveal::before { transition-delay: 0s; } .up-block-hover__additional--border-reveal::after { right: 5px; transition-delay: 0s; } .up-block-hover--border-reveal:hover .up-block-hover__additional--border-reveal::after { transition-delay: .28s; } .up-block-hover--border-reveal:hover .up-block-hover__main--border-reveal { opacity: 0; } .up-block-hover--border-reveal:hover::before, .up-block-hover--border-reveal:hover::after, .up-block-hover--border-reveal:hover .up-block-hover__additional--border-reveal::before, .up-block-hover--border-reveal:hover .up-block-hover__additional--border-reveal::after { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .up-block-hover--border-reveal:hover .up-block-hover__additional--border-reveal__inner { opacity: 1; transition-delay: .35s; } .up-block-hover:hover img[class*="up-block-hover__main--mover-"], .up-block-hover:hover [class*="up-block-hover__additional--mover-"] { opacity: 1; -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1); transform: translate3d(0, 0, 0) scale3d(1, 1, 1); } img[class*="up-block-hover__main--mover-"] { max-width: initial; width: calc(100% + 60px); transition-duration: 0.5s; -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; } [class*="up-block-hover__additional--mover-"] { opacity: 0; transition-duration: 0.5s; } img.up-block-hover__main--mover-left { -webkit-transform: translate3d(-60px, 0, 0); transform: translate3d(-60px, 0, 0); } .up-block-hover__additional--mover-left { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } img.up-block-hover__main--mover-right { -webkit-transform: translate3d(-60px, 0, 0); transform: translate3d(-60px, 0, 0); } .up-block-hover__additional--mover-right { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } img.up-block-hover__main--mover-up { -webkit-transform: translate3d(0, 20px, 0) scale3d(1.1, 1.1, 1.1); transform: translate3d(0, 20px, 0) scale3d(1.1, 1.1, 1.1); } .up-block-hover__additional--mover-up { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } img.up-block-hover__main--mover-down { -webkit-transform: translate3d(0, -20px, 0) scale3d(1.1, 1.1, 1.1); transform: translate3d(0, -20px, 0) scale3d(1.1, 1.1, 1.1); } .up-block-hover__additional--mover-down { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } .up-block-hover__additional--focuser-element { top: 30px; right: 30px; bottom: 30px; left: 30px; opacity: .3; box-shadow: 0 0 0 31px rgba(0, 0, 0, 0.5); -webkit-transform: scale3d(1.4, 1.4, 1.4); transform: scale3d(1.4, 1.4, 1.4); transition-duration: .5s; } .up-block-hover__additional--focuser-target { position: static; opacity: 0; -webkit-transform: scale3d(1.4, 1.4, 1.4); transform: scale3d(1.4, 1.4, 1.4); transition-duration: .5s; } .up-block-hover:hover .up-block-hover__additional--focuser-target, .up-block-hover:hover .up-block-hover__additional--focuser-element { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); transition-duration: .3s; } img[class*="up-block-hover__main--magnifier"] { max-width: initial; width: calc(100% + 10px); margin: -10px 0; } [class*="up-block-hover__additional--magnifier-element"] { width: 400px; height: 400px; border-radius: 50%; box-shadow: 0 0 0 4000px rgba(255, 255, 255, 0.3); z-index: 2; opacity: 0; -webkit-transform: scale3d(0.7, 0.7, 0.7); transform: scale3d(0.7, 0.7, 0.7); -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; } .up-block-hover:hover [class*="up-block-hover__additional--magnifier-element"] { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } [class*="up-block-hover__additional--magnifier-description"] { max-width: 115px; z-index: 3; opacity: 0; } .up-block-hover:hover [class*="up-block-hover__additional--magnifier-description"] { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .up-block-hover__additional--magnifier-element-bottom-right { top: auto; left: auto; bottom: -180px; right: -180px; } .up-block-hover__additional--magnifier-description-bottom-right { top: auto; right: 30px; bottom: 30px; left: auto; -webkit-transform: translate3d(20px, 20px, 0); transform: translate3d(20px, 20px, 0); } .up-block-hover:hover img.up-block-hover__main--magnifier-bottom-right { -webkit-transform: translate3d(-10px, -10px, 0); transform: translate3d(-10px, -10px, 0); } .up-block-hover__additional--magnifier-element-top-right { top: -180px; right: -180px; bottom: auto; left: auto; } .up-block-hover__additional--magnifier-description-top-right { top: 30px; right: 30px; bottom: auto; left: auto; -webkit-transform: translate3d(20px, -20px, 0); transform: translate3d(20px, -20px, 0); } .up-block-hover:hover img.up-block-hover__main--magnifier-top-right { -webkit-transform: translate3d(-10px, 10px, 0); transform: translate3d(-10px, 10px, 0); } img.up-block-hover__main--magnifier-bottom-left { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } .up-block-hover__additional--magnifier-element-bottom-left { top: auto; left: -180px; bottom: -180px; right: auto; } .up-block-hover__additional--magnifier-description-bottom-left { top: auto; right: auto; bottom: 30px; left: 30px; -webkit-transform: translate3d(-20px, 20px, 0); transform: translate3d(-20px, 20px, 0); } .up-block-hover:hover img.up-block-hover__main--magnifier-bottom-left { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } img.up-block-hover__main--magnifier-top-left { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } .up-block-hover__additional--magnifier-element-top-left { top: -180px; left: -180px; bottom: auto; right: auto; } .up-block-hover__additional--magnifier-description-top-left { top: 30px; right: auto; bottom: auto; left: 30px; -webkit-transform: translate3d(-20px, -20px, 0); transform: translate3d(-20px, -20px, 0); } .up-block-hover:hover img.up-block-hover__main--magnifier-top-left { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } [class*="up-block-hover__additional--pappercuter"] { -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; } .up-block-hover__additional--pappercuter-inner { width: 100%; -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); } .up-block-hover__additional--pappercuter-front, .up-block-hover__additional--pappercuter-back { max-width: initial; width: 120%; top: -60px; bottom: -60px; left: -10%; z-index: 2; background-position: center; background-size: cover; -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); } .up-block-hover__additional--pappercuter-front { clip: rect(0px, auto, 246px, 0px); } .up-block-hover__additional--pappercuter-back { top: -61px; clip: rect(246px, auto, auto, 0px); } .up-block-hover:hover .up-block-hover__additional--pappercuter-front { -webkit-transform: scale3d(1.3, 1.3, 1.3) rotate3d(0, 0, 1, -10deg) translate3d(0, -45%, 0); transform: scale3d(1.3, 1.3, 1.3) rotate3d(0, 0, 1, -10deg) translate3d(0, -45%, 0); } .up-block-hover:hover .up-block-hover__additional--pappercuter-back { -webkit-transform: scale3d(1.3, 1.3, 1.3) rotate3d(0, 0, 1, -10deg) translate3d(0, 45%, 0); transform: scale3d(1.3, 1.3, 1.3) rotate3d(0, 0, 1, -10deg) translate3d(0, 45%, 0); } [class*="up-block-hover__additional--outside"] { opacity: 0; visibility: hidden; transition-duration: .5s; transition-timing-function: cubic-bezier(0.7, -1.2, 0.8, 1.2); } .up-block-hover:hover [class*="up-block-hover__additional--outside"] { opacity: 1; visibility: visible; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); transition-timing-function: cubic-bezier(0.25, 1.8, 0.8, 1); } .up-block-hover__additional--outside-down { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } .up-block-hover__additional--outside-up { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } .up-block-hover__additional--outside-left { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } .up-block-hover__additional--outside-right { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } [class*="up-block-hover__additional--lightspeed"] { visibility: hidden; opacity: 0; transition-duration: .7s; transition-timing-function: cubic-bezier(0.75, -1.2, 0.8, 2); } .up-block-hover:hover [class*="up-block-hover__additional--lightspeed"] { opacity: 1; visibility: visible; -webkit-transform: translate3d(0, 0, 0) skew(0deg, 0deg); transform: translate3d(0, 0, 0) skew(0deg, 0deg); transition-timing-function: cubic-bezier(0.25, 2, 0.75, 1); } .up-block-hover__additional--lightspeed-left { -webkit-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-transform: translate3d(150%, 0, 0) skew(-35deg, 0deg); transform: translate3d(150%, 0, 0) skew(-35deg, 0deg); } .up-block-hover__additional--lightspeed-right { -webkit-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transform: translate3d(-150%, 0, 0) skew(35deg, 0deg); transform: translate3d(-150%, 0, 0) skew(35deg, 0deg); } .up-block-hover__additional--lightspeed-down { -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: translate3d(0, -150%, 0) skew(0deg, -35deg); transform: translate3d(0, -150%, 0) skew(0deg, -35deg); } .up-block-hover__additional--lightspeed-up { -webkit-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-transform: translate3d(0, 150%, 0) skew(0deg, -35deg); transform: translate3d(0, 150%, 0) skew(0deg, -35deg); } [class*="up-block-hover__additional--rotate"] { opacity: 0; visibility: hidden; } .up-block-hover:hover [class*="up-block-hover__additional--rotate"] { opacity: 1; visibility: visible; -webkit-transform: rotate3d(0, 0, 0, 0deg) scale3d(1, 1, 1); transform: rotate3d(0, 0, 0, 0deg) scale3d(1, 1, 1); } .up-block-hover__additional--rotate-in { opacity: 1; transition-property: opacity, visibility, -webkit-transform; transition-property: transform, opacity, visibility; transition-property: transform, opacity, visibility, -webkit-transform; transition-duration: .4s; -webkit-transform: rotate3d(0, 0, 1, 720deg) scale3d(0, 0, 0); transform: rotate3d(0, 0, 1, 720deg) scale3d(0, 0, 0); } .up-block-hover__additional--rotate-down-left { -webkit-transform-origin: 0 100%; -ms-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); } .up-block-hover__additional--rotate-down-right { -webkit-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; transform-origin: 100% 100%; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); } .up-block-hover__additional--rotate-up-left { -webkit-transform-origin: 0 100%; -ms-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); } .up-block-hover__additional--rotate-up-right { -webkit-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; transform-origin: 100% 100%; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); } .up-block-hover__additional--jump { position: static; } .up-block-hover:hover .up-block-hover__additional--jump, .up-block-hover.up-block-hover__additional--jump:hover { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } /*------------------------------------ Dedicated Properties ------------------------------------*/ .up-block-hover:hover, .up-block-hover:focus { /* Opacity */ /* Colors */ /* Background-colors */ } .up-block-hover:hover .up-block-hover__prop-opacity-1, .up-block-hover:focus .up-block-hover__prop-opacity-1 { opacity: 1; } .up-block-hover:hover .up-block-hover__prop-color-white, .up-block-hover:focus .up-block-hover__prop-color-white { color: #fff; } .up-block-hover:hover .up-block-hover__prop-bg-primary, .up-block-hover:focus .up-block-hover__prop-bg-primary { background-color: #72c02c; } .up-block-hover:hover .up-block-hover__prop-bg-primary-opacity-0_9, .up-block-hover:focus .up-block-hover__prop-bg-primary-opacity-0_9 { background-color: rgba(114, 192, 44, 0.9); } /*------------------------------------ Blockquotes ------------------------------------*/ .u-blockquote-v1 { position: relative; background-color: #fff; box-shadow: 5px 6px 9px -6px rgba(0, 0, 0, 0.15); } .u-blockquote-v1::before { content: "\201C"; position: absolute; width: 60px; color: #72c02c; font-size: 60px; margin: -25px 0 0 -40px; } .u-blockquote-v1::after { content: ""; position: absolute; bottom: -30px; left: 80px; display: block; width: 0; height: 0; border-style: solid; border-width: 30px 30px 0 0; border-color: #fff transparent transparent transparent; -webkit-filter: drop-shadow(2px 2px 1px rgba(0, 0, 0, 0.1)); filter: drop-shadow(2px 2px 1px rgba(0, 0, 0, 0.1)); } .u-blockquote-v2::before, .u-blockquote-v2::after { position: relative; top: 5px; font-size: 22px; line-height: 10px; } .u-blockquote-v2::before { content: "\“"; padding-right: 5px; } .u-blockquote-v2::after { content: "\”"; padding-left: 5px; } .u-blockquote-v3 { position: relative; } .u-blockquote-v3::before { content: "\201C"; position: absolute; font-size: 60px; color: #72c02c; margin: -30px 0 0 -40px; } .u-blockquote-v4::before, .u-blockquote-v4::after { content: "\201C"; position: absolute; font-size: 50px; margin-top: -12px; } .u-blockquote-v4::before { margin-left: -30px; } .u-blockquote-v4::after { margin-left: 13px; } .u-blockquote-v5::before { content: "\201C"; position: absolute; width: 60px; color: rgba(255, 255, 255, 0.2); font-size: 70px; margin: -25px 0 0 -40px; } .u-blockquote-v6::before, .u-blockquote-v6::after { content: "\0022"; font-family: inherit; color: inherit; } .u-blockquote-v7 { position: relative; padding-top: 55px; } .u-blockquote-v7::before { content: "\f10d"; position: absolute; top: 0; left: 50%; display: block; width: 35px; height: 35px; font-size: 12px; font-family: "FontAwesome"; color: #fff; line-height: 35px; background: #72c02c; border-radius: 50%; margin-left: -18px; } .u-blockquote-v8 { position: relative; background-color: #fff; box-shadow: 5px 6px 9px -6px rgba(85, 85, 85, 0.08); } .u-blockquote-v8::after { content: ""; position: absolute; left: 50px; bottom: -15px; display: block; width: 0; height: 0; border-style: solid; border-width: 15px 15px 0 0; border-color: #fff transparent transparent transparent; -webkit-filter: drop-shadow(2px 2px 1px rgba(0, 0, 0, 0.05)); filter: drop-shadow(2px 2px 1px rgba(0, 0, 0, 0.05)); } /*------------------------------------ Accordions ------------------------------------*/ .u-accordion__header { padding: 0.71429rem 1.07143rem; } .u-accordion__body { padding: 1.07143rem; } .u-accordion__control-icon i:nth-child(1) { display: none; } .collapsed .u-accordion__control-icon i:nth-child(1) { display: inline; } .u-accordion__control-icon i:nth-child(2) { display: inline; } .collapsed .u-accordion__control-icon i:nth-child(2) { display: none; } .u-accordion [class*="et-icon-"], .u-accordion-line-icon-pro { position: relative; top: 3px; } .u-accordion-color-primary .u-accordion__header [aria-expanded="true"] { color: #72c02c !important; } .u-accordion-color-white .u-accordion__header [aria-expanded="true"] { color: #fff !important; } .u-accordion-bg-primary .u-accordion__header [aria-expanded="true"] { background-color: #72c02c !important; border-color: #72c02c !important; } .u-accordion-bg-white .u-accordion__header [aria-expanded="true"] { background-color: #fff !important; border-color: #fff !important; } .u-accordion-brd-primary .u-accordion__header [aria-expanded="true"] { border-color: #72c02c !important; } .u-accordion-brd-white .u-accordion__header [aria-expanded="true"] { border-color: #fff !important; } /*------------------------------------ Carousels ------------------------------------*/ .u-carousel-v1 .js-prev, .u-carousel-v1 .js-next { opacity: 0; transition-property: opacity; transition-duration: .2s; transition-timing-function: ease-in; } .u-carousel-v1:hover .js-prev, .u-carousel-v1:hover .js-next { opacity: 1; } .u-carousel-v2 .slick-slide { padding-top: 4px; padding-bottom: 4px; opacity: .5; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); transition-property: all; transition-duration: .4s; transition-timing-function: ease-in; } .u-carousel-v2 .slick-center { padding-top: 0; padding-bottom: 0; opacity: 1; -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .u-carousel-v3 .slick-slide { opacity: .5; transition-property: opacity; transition-duration: .4s; transition-timing-function: ease-in; } .u-carousel-v3 .slick-center { opacity: 1; } .u-carousel-v4 .js-pagination { opacity: 0; transition-property: opacity; transition-duration: .2s; transition-timing-function: ease-in; } .u-carousel-v4:hover .js-pagination { opacity: 1; } .u-carousel-v5 .slick-list { height: 100%; } .u-carousel-v5 .slick-track { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; height: 100%; } .u-carousel-v5 .slick-track .slick-slide { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; height: auto; } .u-carousel-v6 .slick-list.draggable { border-top-left-radius: 10px; border-bottom-left-radius: 10px; } .u-carousel-v11 .slick-slide { opacity: .5; } .u-carousel-v11 .slick-slide.slick-current { opacity: 1; } /*------------------------------------ Slick Carousel v12 ------------------------------------*/ .u-carousel-v12 .slick-current .g-opacity-1--active { opacity: 1 !important; } .u-carousel-v12 .slick-current .up-block-hover__main--grayscale { filter: url("data:image/svg+xml;utf8,#grayscale"); -webkit-filter: grayscale(0%); } .owl-carousel .owl-wrapper, .owl-carousel .owl-item, .swiper-wrapper, .swiper-slide { -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .single-slide { opacity: 0 !important; } .single-slide.set-position { opacity: 1 !important; } .js-origin { -webkit-perspective: 1200px; perspective: 1200px; -webkit-perspective-origin: 50% 50%; perspective-origin: 50% 50%; } /* backSlide */ .js-back-slide-out { -webkit-animation: backSlideOut 1s both ease; animation: backSlideOut 1s both ease; } .js-back-slide-in { -webkit-animation: backSlideIn 1s both ease; animation: backSlideIn 1s both ease; } .swiper-carousel { overflow: hidden; } @-webkit-keyframes backSlideOut { 25% { opacity: .5; -webkit-transform: translateZ(-400px); } 75% { opacity: .5; -webkit-transform: translateZ(-400px) translateX(-200%); } 100% { opacity: .5; -webkit-transform: translateZ(-400px) translateX(-200%); } } @keyframes backSlideOut { 25% { opacity: .5; -webkit-transform: translateZ(-400px); transform: translateZ(-400px); } 75% { opacity: .5; -webkit-transform: translateZ(-400px) translateX(-200%); transform: translateZ(-400px) translateX(-200%); } 100% { opacity: .5; -webkit-transform: translateZ(-400px) translateX(-200%); transform: translateZ(-400px) translateX(-200%); } } @-webkit-keyframes backSlideIn { 0%, 25% { opacity: .5; -webkit-transform: translateZ(-400px) translateX(200%); } 75% { opacity: .5; -webkit-transform: translateZ(-400px); } 100% { opacity: 1; -webkit-transform: translateZ(0) translateX(0); } } @keyframes backSlideIn { 0%, 25% { opacity: .5; -webkit-transform: translateZ(-400px) translateX(200%); transform: translateZ(-400px) translateX(200%); } 75% { opacity: .5; -webkit-transform: translateZ(-400px); transform: translateZ(-400px); } 100% { opacity: 1; -webkit-transform: translateZ(0) translateX(0); transform: translateZ(0) translateX(0); } } /*-------------------------------------------------- Chart Pie v1 ----------------------------------------------------*/ .u-chart-pie-v1 { position: relative; line-height: 1em; } .u-chart-pie-v1::after { content: ""; display: block; position: absolute; top: 9px; right: 10px; bottom: 11px; left: 10px; border-radius: 50%; border-width: 1px; border-style: solid; border-color: inherit; } /*------------------------------------ Charts ------------------------------------*/ /* Sparkline chart's tooltip */ .jqstooltip { width: auto !important; height: auto !important; } /*-------------------------------------------------- Counter v1 ----------------------------------------------------*/ .u-counter-v3 { position: relative; } .u-counter-v3::after { content: ""; position: absolute; left: -9px; right: -9px; bottom: -9px; top: -9px; display: block; border-radius: inherit; border-width: 1px; border-style: solid; border-color: inherit; } /*-------------------------------------------------- Counter v6 ----------------------------------------------------*/ .u-counter-v6 { position: relative; width: 120px; height: 120px; } .u-counter-v6::after { content: ""; position: absolute; top: -11px; right: -11px; bottom: -11px; left: -11px; display: block; border-radius: inherit; border-width: 2px; border-style: inherit; border-color: inherit; clip: rect(auto, 71px, 142px, auto); } /*------------------------------------ Credit cards ------------------------------------*/ .u-card--v1 { position: relative; } .u-card--v1-front { position: relative; margin-bottom: 220px; z-index: 2; } .u-card--v1-back { position: absolute; bottom: -70%; right: 0; z-index: 1; width: 100%; height: 80%; padding-left: 0; } @media (min-width: 768px) { .u-card--v1-front { margin-bottom: 30px; } .u-card--v1-back { bottom: auto; top: 30px; right: -30%; height: 100%; padding-left: 70%; } } /*------------------------------------ Dropdowns v1 ------------------------------------*/ .u-dropdown-v1 { position: relative; line-height: normal; font-size: 16px; color: #777; background-color: #fff; border-width: 1px; border-style: solid; border-color: #ccc; padding: 11px 40px 11px 14px; transition-property: background-color, border-color, box-shadow; transition-duration: .2s; transition-timing-function: ease; } .u-dropdown-v1::after { display: none; } .u-dropdown-v1-menu { padding: 0; border-color: #ccc; border-radius: 3px; box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2); } .u-dropdown-v1-menu__item { line-height: normal; font-size: 16px; color: #777; padding: 9px 20px; } .u-dropdown-v1-menu__item:hover { color: #777; } .u-dropdown-v1__icon { position: absolute; top: 0; right: 0; display: block; width: 40px; height: 100%; } .u-dropdown-v1__icon-open, .u-dropdown-v1__icon-close { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .u-dropdown-v1__icon-open { opacity: 1; } .u-dropdown-v1__icon-close { opacity: 0; } .u-dropdown-v1[aria-expanded="true"] { background-color: rgba(204, 204, 204, 0.1); box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2); } .u-dropdown-v1[aria-expanded="true"] [class*="__icon-open"] { opacity: 0; } .u-dropdown-v1[aria-expanded="true"] [class*="__icon-close"] { opacity: 1; } .u-dropdown-v1:focus { outline: 0 none; } /*------------------------------------ Covers ------------------------------------*/ .u-bg-overlay { position: relative; } .u-bg-overlay::before, .u-bg-overlay::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .u-bg-overlay--v1::after { position: absolute; top: 0.35714rem; right: 0.35714rem; bottom: 0.35714rem; left: 0.35714rem; } .u-bg-overlay__inner { z-index: 3; position: relative; } .u-bg-overlay--reverse::before { z-index: 2; } .u-bg-overlay--reverse::after { z-index: 1; } /*------------------------------------ Material: Waves ------------------------------------*/ .u-waves-effect { position: relative; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; z-index: 1; transition: .3s ease-out; } .u-waves-effect .u-waves-ripple { position: absolute; border-radius: 50%; width: 1.42857rem; height: 1.42857rem; margin-top: -0.71429rem; margin-left: -0.71429rem; opacity: 0; background: rgba(0, 0, 0, 0.2); transition: all .7s ease-out; transition-property: opacity, -webkit-transform; transition-property: transform, opacity; transition-property: transform, opacity, -webkit-transform; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); pointer-events: none; } .u-waves-effect.u-waves-light .u-waves-ripple { background-color: rgba(255, 255, 255, 0.45); } .u-waves-effect.u-waves-dark .u-waves-ripple { background-color: rgba(0, 0, 0, 0.15); } .u-waves-effect input[type="button"], .u-waves-effect input[type="reset"], .u-waves-effect input[type="submit"] { border: 0; font-style: normal; font-size: inherit; text-transform: inherit; background: none; } .u-waves-effect img { position: relative; z-index: -1; } .u-waves-notransition { transition: none !important; } .u-waves-circle { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%); } .u-waves-input-wrapper { border-radius: .2em; vertical-align: bottom; } .u-waves-input-wrapper .u-waves-button-input { position: relative; top: 0; left: 0; z-index: 1; } .u-waves-circle { text-align: center; width: 2.5em; height: 2.5em; line-height: 2.5em; border-radius: 50%; -webkit-mask-image: none; } .u-waves-block { display: block; } /* Firefox Bug: link not triggered */ .u-waves-effect .u-waves-ripple { z-index: -1; } /*------------------------------------ Material: FAB ------------------------------------*/ .u-fixed-action-btn { position: absolute; right: 0; bottom: 0; z-index: 997; } .u-fixed-action-btn ul { left: 0; right: 0; text-align: center; position: absolute; bottom: 60px; margin: 0; visibility: hidden; list-style-type: none; padding-left: 0; } .u-fixed-action-btn ul li { margin-bottom: 1.07143rem; } .u-fixed-action-btn ul a.u-btn-floating { opacity: 0; } .u-fixed-action-btn.active ul { visibility: visible; } .u-fixed-action-btn-horizontal { padding: 0 0 0 1.07143rem; } .u-fixed-action-btn-horizontal ul { text-align: right; right: 4.57143rem; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); height: 100%; left: auto; width: 500px; /*width 100% only goes to width of button container */ } .u-fixed-action-btn-horizontal ul li { display: inline-block; margin: 0.71429rem 1.07143rem 0 0; } .u-fixed-action-btn-toolbar { padding: 0; height: 4rem; } .u-fixed-action-btn-toolbar.active > a i { opacity: 0; } .u-fixed-action-btn-toolbar ul { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; top: 0; bottom: 0; z-index: 1; } .u-fixed-action-btn-toolbar ul li { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; display: inline-block; margin: 0; height: 100%; transition: none; } .u-fixed-action-btn-toolbar ul li a { display: block; overflow: hidden; position: relative; width: 100%; height: 100%; background-color: transparent; box-shadow: none; color: #fff; line-height: 4rem; z-index: 1; } .u-fixed-action-btn-toolbar ul li a i { line-height: inherit; } .u-fixed-action-btn .u-fab-backdrop { position: absolute; top: 0; left: 0; z-index: -1; width: 2.85714rem; height: 2.85714rem; border-radius: 50%; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); } /*------------------------------------ Chips ------------------------------------*/ .u-chip { display: inline-block; height: 2.28571rem; margin: 0.14286rem 0; padding: 0 0.85714rem; font-size: 0; white-space: nowrap; line-height: 2.28571rem; color: rgba(0, 0, 0, 0.87); border-radius: 1.14286rem; background-color: #eee; } .u-chip:focus { box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } .u-chip--deletable { padding-right: 0.28571rem; } .u-chip--contact { padding-left: 0; } .u-chip__contact { display: inline-block; width: 2.28571rem; height: 2.28571rem; margin-right: 0.57143rem; overflow: hidden; vertical-align: middle; border-radius: 1.14286rem; text-align: center; font-size: 1.28571rem; line-height: 2.28571rem; } .u-chip__text { display: inline-block; vertical-align: middle; font-size: 0.92857rem; } .u-chip__action { display: inline-block; width: 1.71429rem; height: 1.71429rem; margin: 0 0 0 0.28571rem; padding: 0; text-align: center; vertical-align: middle; border: none; font-size: 0.92857rem; text-decoration: none; color: rgba(0, 0, 0, 0.3); background: transparent; opacity: .54; cursor: pointer; outline: none; overflow: hidden; } .u-outer-spaces-helper { position: fixed; bottom: 0; left: 0; display: none; width: 100%; overflow: hidden; } .u-outer-spaces-helper::after { content: ''; position: absolute; bottom: 0; left: 0; display: block; width: 100%; height: 100vh; background-color: #f7f7f7; background-position: center; background-repeat: repeat; } .g-dark-theme .u-outer-spaces-helper::after { background-color: #000; } [class*="g-bgi-v"] .u-outer-spaces-helper::after { background-color: transparent; } .u-outer-space-v1 .u-outer-spaces-helper, .u-outer-space-v2 .u-outer-spaces-helper { display: block; } .u-outer-space-v1 .u-outer-spaces-helper { height: 20px; } .u-outer-space-v2 .u-outer-spaces-helper { height: 40px; } /*------------------------------------ Info Block v1-1 ------------------------------------*/ .u-info-v1-1 { overflow: hidden; position: relative; } .u-info-v1-1::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40px; } /*-------------------------------------------------- Info Block v1-2 ----------------------------------------------------*/ .u-info-v1-2__item { position: relative; z-index: 1; padding-bottom: 0.78571rem; } .u-info-v1-2__item::after { content: ""; position: absolute; left: 0; bottom: 0; display: block; width: 40px; height: 1px; background: #bbb; transition: all 0.4s ease-in-out; } .u-info-v1-2:hover .u-info-v1-2__item::after { width: 100%; background: #72c02c; } /*------------------------------------ Info Block v1-3 ------------------------------------*/ .u-info-v1-3__item { position: relative; z-index: 1; padding-bottom: 0.92857rem; } .u-info-v1-3__item::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 2.14286rem; height: 1px; margin-left: -1.07143rem; background: #777; } /*------------------------------------ Info Block v1-4 ------------------------------------*/ .u-info-v1-4__item-hidden { position: absolute; bottom: 0; left: 0; right: 0; height: 61px; overflow: hidden; -webkit-transform: translate3d(0, 61px, 0); transform: translate3d(0, 61px, 0); } .u-info-v1-4:hover .u-info-v1-4__item-hidden { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .u-info-v1-4:hover .u-info-v1-4__item-regular { -webkit-transform: translate3d(0, -61px, 0); transform: translate3d(0, -61px, 0); } /*------------------------------------ Info Block v1-5 ------------------------------------*/ .u-info-v1-5__item { position: relative; padding-bottom: 19px; } .u-info-v1-5__item::after { content: ""; position: absolute; left: 0; bottom: 1px; display: block; width: 28px; border-bottom: 1px solid #72c02c; } /*------------------------------------ Info Block v2-1 ------------------------------------*/ .u-info-v2-1__item { height: 65px; transition: .3s ease-out; } .u-info-v2-1__item:hover { height: 80px; margin-top: -15px; } /*------------------------------------ Info Block v2-2 ------------------------------------*/ .u-info-v2-2__item { position: relative; border-left: solid 1px; border-right: solid 1px; border-bottom: solid 1px; } .u-info-v2-2__item::after, .u-info-v2-2__item::before { content: ""; position: absolute; top: 0; width: 30%; border-top: solid 1px; z-index: 1; } .u-info-v2-2__item::before { left: 0; } .u-info-v2-2__item::after { right: 0; } .u-info-v2-2__item.g-brd-white-dark-v3 { border-color: rgba(255, 255, 255, 0.3); } .u-info-v2-2__item.g-brd-white-dark-v3::before, .u-info-v2-2__item.g-brd-white-dark-v3::after { border-color: rgba(255, 255, 255, 0.3); } .u-info-v2-2__item.g-brd-black-dark-v3 { border-color: rgba(0, 0, 0, 0.3); } .u-info-v2-2__item.g-brd-black-dark-v3::before, .u-info-v2-2__item.g-brd-black-dark-v3::after { border-color: rgba(0, 0, 0, 0.3); } /*------------------------------------ Info Block v2-3 ------------------------------------*/ .u-info-v2-3:hover .u-info-v2-3__title { color: #000; } /*------------------------------------ Info Block v3-1 ------------------------------------*/ /* Title */ .info-v3-1__title { position: relative; display: inline-block; margin-left: 4.28571rem; margin-right: 4.28571rem; } .info-v3-1__title::before, .info-v3-1__title::after { content: ""; position: absolute; top: 50%; display: block; width: 3.57143rem; margin-top: -1px; height: 2px; background-color: #fff; } .info-v3-1__title::before { right: 100%; margin-right: 10px; } .info-v3-1__title::after { left: 100%; margin-left: 10px; } /*------------------------------------ Info Block v3-2 ------------------------------------*/ .info-v3-2 { position: relative; background-position: center; } .info-v3-2::before { content: ""; position: absolute; top: 1.42857rem; right: 1.42857rem; bottom: 1.42857rem; left: 1.42857rem; display: block; border: 1px solid rgba(255, 255, 255, 0.2); z-index: 1; } .info-v3-2:hover { background-position: center 0; } /*------------------------------------ Info Block v3-3 ------------------------------------*/ .info-v3-3 { overflow: hidden; } .info-v3-3:hover .info-v3-3__title { color: #fff; } .info-v3-3:hover .info-v3-3__img, .info-v3-3:hover .info-v3-3__description { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .info-v3-3:hover .info-v3-3__content { display: block; } .info-v3-3:hover .info-v3-3__category { display: none; } .info-v3-3:hover::after { opacity: 1; } .info-v3-3::after { opacity: 0; transition: opacity .5s; } /* Image */ .info-v3-3__img { -webkit-transform: translate3d(70%, 0, 0); transform: translate3d(70%, 0, 0); transition: -webkit-transform .5s; transition: transform .5s; transition: transform .5s, -webkit-transform .5s; } /* Content */ .info-v3-3__content { display: none; } /* Description */ .info-v3-3__description { -webkit-transform: translate3d(-20%, 0, 0); transform: translate3d(-20%, 0, 0); transition: -webkit-transform .5s; transition: transform .5s; transition: transform .5s, -webkit-transform .5s; } /*------------------------------------ Info Block v3-4 ------------------------------------*/ .info-v3-4 { position: relative; } .info-v3-4::before { content: ""; position: absolute; top: 0.71429rem; right: 0.71429rem; bottom: 0.71429rem; left: 0.71429rem; display: block; border: 1px solid rgba(255, 255, 255, 0.4); z-index: 1; } /*------------------------------------ Info Block v5-1 ------------------------------------*/ /* Title */ .info-v5-1__title { position: relative; display: inline-block; } .info-v5-1__title::after { content: ""; position: absolute; top: 50%; left: 100%; display: block; width: 3000%; margin-left: 15px; border-bottom: 1px solid #eee; } /*------------------------------------ Info Block v5-2 ------------------------------------*/ /* Product Image */ .info-v5-2__image { width: calc(100% + 1px); } /*------------------------------------ Info Block v5-3 ------------------------------------*/ .info-v5-3__info-price { opacity: 0; } .info-v5-3__info-title { position: absolute; left: 0; bottom: 100%; width: 100%; margin-bottom: 4.64286rem; -webkit-transform: translate3d(0, 70px, 0); transform: translate3d(0, 70px, 0); } .info-v5-3:hover .info-v5-3__info { color: rgba(255, 255, 255, 0.8); background-color: rgba(114, 192, 44, 0.9); } .info-v5-3:hover .info-v5-3__info-price { opacity: 1; } .info-v5-3:hover .info-v5-3__info-list { color: #fff; } .info-v5-3:hover .info-v5-3__info-list .fa { color: #fff; } .info-v5-3:hover .info-v5-3__info-title { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); margin-bottom: 3.21429rem; } /*------------------------------------ Info Block v5-4 ------------------------------------*/ /* Actions */ .info-v5-4__action .fa { opacity: 0.75; } .info-v5-4__action:hover .fa { opacity: 1; } /*------------------------------------ Info Block v5-5 ------------------------------------*/ .info-v5-5__header::after, .info-v5-5__content::after { transition: inherit; } .info-v5-5__content::after { opacity: 0; } .info-v5-5:hover .info-v5-5__header::after, .info-v5-5:hover .info-v5-5__content::after { opacity: .8; } /*------------------------------------ Info Block v5-6 ------------------------------------*/ .info-v5-6:hover .info-v5-6__rating { color: #333; } .info-v5-6:hover .info-v5-6__price { background-color: #333; } .info-v5-6 .g-color-gray-light-v5--hover .g-rating, .info-v5-6 .g-bg-white--hover, .info-v5-6 .g-color-primary--hover { transition-property: all; transition-timing-function: ease; transition-delay: 0s; transition-duration: .3s; } .info-v5-6:hover .g-color-gray-light-v5--hover .g-rating { color: #f7f7f7; } .info-v5-6:hover .g-bg-white--hover { background: #fff; } .info-v5-6:hover .g-color-primary--hover { color: #72c02c; } /*-------------------------------------------------- Info Block v6-1 ----------------------------------------------------*/ .u-info-v6-1__item { position: relative; z-index: 1; padding-bottom: 0.78571rem; } .u-info-v6-1__item::after { content: ""; position: absolute; left: 0; bottom: 0; display: block; width: 40px; height: 1px; background-image: linear-gradient(to right, #72c02c 0%, transparent 100%); background-repeat: repeat-x; transition: all 0.4s ease-in-out; } .u-info-v6-1:hover .u-info-v6-1__item::after { width: 100%; background-image: linear-gradient(to right, #72c02c 0%, transparent 100%); background-repeat: repeat-x; } /*-------------------------------------------------- Info Block v7-1 ----------------------------------------------------*/ .u-info-v7-1__item { border: 2px solid transparent; transition: all .2s ease-in-out; } .u-info-v7-1__item-child-v1 { border: 5px solid transparent; transition: all .2s ease-in-out; } .u-info-v7-1__item-child-v2 { transition: all .2s ease-in-out; } .u-info-v7-1:hover { border-color: #eee; } .u-info-v7-1:hover .u-info-v7-1__item { border-color: #ddd; } .u-info-v7-1:hover .u-info-v7-1__item-child-v1 { border-color: #ddd; } .u-info-v7-1:hover .u-info-v7-1__item-child-v2 { color: #fff; background: #72c02c; } /*-------------------------------------------------- Info Block v8-1 ----------------------------------------------------*/ .u-hs-filter { padding: 20px; margin-bottom: 0; } .u-hs-filter a { padding: 0.5rem 1.07143rem; color: rgba(255, 255, 255, 0.8); border: solid 1px rgba(255, 255, 255, 0.2); text-transform: uppercase; border-radius: 3px; transition: all .3s; } .u-hs-filter a:hover, .u-hs-filter a:focus { text-decoration: none; } .u-hs-filter a:hover { color: #585f69; background-color: white; } .u-hs-filter .active a { color: #585f69; background-color: white; } /*-------------------------------------------------- Info Block v9-1 ----------------------------------------------------*/ @media (min-width: 768px) { .u-info-v9-1 { position: relative; } .u-info-v9-1::before { position: absolute; top: 111px; left: 17%; width: 66%; border-top: 1px dotted #ddd; content: " "; } } /*-------------------------------------------------- Info Block v10-1 ----------------------------------------------------*/ .u-info-v10-1 { position: relative; display: inline-block; } .u-info-v10-1::before, .u-info-v10-1::after { display: block; position: absolute; top: 50%; width: 1000px; height: 1px; background: #f7f7f7; content: " "; margin-top: 0.5px; } .u-info-v10-1::before { right: 100%; margin-right: 25px; } .u-info-v10-1::after { left: 100%; margin-left: 25px; } /*------------------------------------ Info v11-1 ------------------------------------*/ .u-info-v11-1-img { border: 0 solid #eee; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); transition: all .3s ease; } .u-info-v11-1:hover .u-info-v11-1-img { border-width: 5px; -webkit-transform: scale(0.95); -ms-transform: scale(0.95); transform: scale(0.95); } /*------------------------------------ Custom Bootstrap ------------------------------------*/ .container-semiboxed { box-sizing: border-box; max-width: 100%; padding-left: 15px; padding-right: 15px; margin-left: auto; margin-right: auto; } @media (min-width: 576px) { .container-semiboxed { width: 540px; } } @media (min-width: 768px) { .container-semiboxed { width: 720px; } } @media (min-width: 992px) { .container-semiboxed { width: 960px; } } @media (min-width: 1200px) { .container-semiboxed { width: 1140px; } } @media (min-width: 1400px) { .container-semiboxed { width: 1340px; } } .text-muted { color: #999 !important; } .list-group-item { border-color: #eee; } .list-group-item-action:hover { background-color: #f7f7f7; } .list-group-item.active { background-color: #72c02c; border-color: #72c02c; } .list-group-border-0 .list-group-item:first-child, .list-group-border-0 .list-group-item:last-child { border-radius: 0; } /* Paginations */ .page-link { color: #72c02c; } .page-link:focus, .page-link:hover { color: #72c02c; } .page-item.active .page-link, .page-item.active .page-link:focus, .page-item.active .page-link:hover { border-color: #72c02c; background-color: #72c02c; } .nav-pills .nav-item.show .nav-link, .nav-pills .nav-link.active { background-color: #72c02c; } .nav-tabs { border-bottom: 1px solid #eee; } .nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover { border-color: transparent; } .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { color: #555; border-color: #eee #eee #fff; } .progress { font-size: 1rem; line-height: inherit; background-color: #eee; } .progress-bar { height: auto; min-height: 12px; background-color: #72c02c; } .btn-primary { background-color: #72c02c; border-color: #72c02c; } .btn-primary:hover { color: #fff; background-color: #6db82a; border-color: #6db82a; } .btn-primary:focus, .btn-primary.focus { box-shadow: 0 0 0 2px rgba(114, 192, 44, 0.5); } .btn-primary.disabled, .btn-primary:disabled { background-color: #72c02c; border-color: #72c02c; } .btn-primary:active, .btn-primary.active, .show > .btn-primary.dropdown-toggle { background-color: #6db82a; border-color: #6db82a; } .btn-outline-primary { color: #72c02c; border-color: #72c02c; } .btn-outline-primary:hover { background-color: #6db82a; border-color: #6db82a; } .btn-outline-primary:focus, .btn-outline-primary.focus { box-shadow: 0 0 0 2px rgba(114, 192, 44, 0.5); } .btn-outline-primary.disabled, .btn-outline-primary:disabled { color: #72c02c; } .btn-outline-primary:active, .btn-outline-primary.active, .show > .btn-outline-primary.dropdown-toggle { background-color: #6db82a; border-color: #6db82a; } .card, .card-header { border-color: #eee; } .card-header { padding: 0.71429rem 1.07143rem; } .card-block { padding: 1.07143rem; } .form-control { border-color: #ccc; } .form-control-md { padding: .8rem 1rem .6rem; } .input-group-lg > .input-group-btn > select.btn:not([size]):not([multiple]), .input-group-lg > select.form-control:not([size]):not([multiple]), .input-group-lg > select.input-group-addon:not([size]):not([multiple]), select.form-control-lg:not([size]):not([multiple]) { height: calc(2.3125rem + 10px); } .form-control, .form-control:focus { color: #555; } .form-control:focus, .custom-select:focus { border-color: #72c02c; box-shadow: none; } .form-control::-webkit-input-placeholder { color: inherit; opacity: .5; } .form-control::-moz-placeholder { color: inherit; opacity: .5; } .form-control:-ms-input-placeholder { color: inherit; opacity: .5; } .form-control::placeholder { color: inherit; opacity: .5; } textarea { white-space: normal; } .has-success .col-form-label, .has-success .custom-control, .has-success .form-check-label, .has-success .form-control-feedback, .has-success .form-control-label { color: #5cb85c; } .has-success .form-control { border-color: #5cb85c; } .has-warning .col-form-label, .has-warning .custom-control, .has-warning .form-check-label, .has-warning .form-control-feedback, .has-warning .form-control-label { color: #f0ad4e; } .has-warning .form-control { border-color: #f0ad4e; } .has-danger .col-form-label, .has-danger .custom-control, .has-danger .form-check-label, .has-danger .form-control-feedback, .has-danger .form-control-label { color: #d9534f; } .has-danger .form-control { border-color: #d9534f; } [class*="input-group-"] { min-width: 38px; background-color: transparent; border-color: #ccc; transition: border-color .15s ease-in-out 0s; } [class*="input-group-"] > * { white-space: normal; } [class*="input-group-"] i { margin: 0 auto; } .input-group .form-control:active, .input-group .form-control:focus, .input-group .form-control:hover { z-index: auto; } .btn-group { display: block; } .input-group-addon + .input-group-addon { border-left: solid 1px #ccc; } .table-striped tbody tr:nth-of-type(2n+1) { background-color: #f7f7f7; } .table-striped tbody td { border-top: none; } @media (min-width: 768px) { .btn-group { display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; } .justified-content { display: table; width: 100%; table-layout: fixed; } .justified-content > * { display: table-cell; width: 1%; float: none; } } .dropdown-menu { min-width: 15rem; padding: 0; } .dropdown-toggle::before { display: none; } .dropdown-toggle::after { content: "\e900"; position: relative; top: 0.21429rem; font-family: "hs-icons" !important; font-size: 10px; display: inline; border: none; margin-left: 0.5rem; } .dropdown-item { padding: 0.21429rem 1.07143rem; } .dropdown-item:focus, .dropdown-item:hover { background: rgba(0, 0, 0, 0.03); } .dropdown-item.active, .dropdown-item:active { background: rgba(0, 0, 0, 0.05); color: inherit !important; } .dropdown-item.active > a, .dropdown-item:active > a { color: inherit !important; } .dropdown-item.active > a::before, .dropdown-item.active > a::after, .dropdown-item:active > a::before, .dropdown-item:active > a::after { background-color: #fff; } .u-header__section--dark .dropdown-item.active > a, .u-header__section--dark .dropdown-item:active > a { color: #fff !important; } .chosen-container-single .chosen-single div b { position: relative; } .chosen-container-single .chosen-search input[type="text"] { padding: .8rem 1rem .6rem; border-color: #ccc; } .chosen-container-single.u-dropdown-sm .chosen-search input[type="text"] { padding: .25rem .5rem .1rem; } .chosen-container-single.u-dropdown-lg .chosen-search input[type="text"] { padding: .75rem 1.5rem .55rem; } .chosen-container-single.u-select-above .chosen-drop { top: auto; bottom: 100%; margin-top: 0; margin-bottom: -1px; } [data-animation].cbp { visibility: visible; } .cbp-slider-next::after, .cbp-slider-prev::after { display: none; } .cbp-filter-item { cursor: pointer; } .cbp-item-off { opacity: 0; } /*------------------------------------ Border Colors ------------------------------------*/ /* Primary Colors */ .g-brd-primary--active.cbp-filter-item-active { border-color: #72c02c !important; } .g-brd-primary-opacity-0_3--active.cbp-filter-item-active { border-color: rgba(114, 192, 44, 0.3) !important; } .g-brd-primary-dark-dark-v1--active.cbp-filter-item-active { border-color: #6db82a !important; } .g-brd-primary-dark-dark-v2--active.cbp-filter-item-active { border-color: #66ab27 !important; } .g-brd-primary-dark-dark-v3--active.cbp-filter-item-active { border-color: #599722 !important; } /* Black Colors */ .g-brd-black--active.cbp-filter-item-active { border-color: #000 !important; } /* White Colors */ .g-brd-white--active.cbp-filter-item-active { border-color: #fff !important; } .g-brd-white-opacity-0_1--active.cbp-filter-item-active { border-color: rgba(255, 255, 255, 0.1) !important; } .g-brd-white-opacity-0_2--active.cbp-filter-item-active { border-color: rgba(255, 255, 255, 0.2) !important; } .g-brd-white-opacity-0_3--active.cbp-filter-item-active { border-color: rgba(255, 255, 255, 0.3) !important; } .g-brd-white-opacity-0_4--active.cbp-filter-item-active { border-color: rgba(255, 255, 255, 0.4) !important; } .g-brd-white-opacity-0_5--active.cbp-filter-item-active { border-color: rgba(255, 255, 255, 0.5) !important; } .g-brd-white-opacity-0_6--active.cbp-filter-item-active { border-color: rgba(255, 255, 255, 0.6) !important; } /* Gray Colors */ .g-brd-gray-dark-v1--active.cbp-filter-item-active { border-color: #111 !important; } .g-brd-gray-dark-v2--active.cbp-filter-item-active { border-color: #333 !important; } .g-brd-gray-dark-v3--active.cbp-filter-item-active { border-color: #555 !important; } .g-brd-gray-dark-v4--active.cbp-filter-item-active { border-color: #777 !important; } .g-brd-gray-dark-v5--active.cbp-filter-item-active { border-color: #999 !important; } .g-brd-gray-light-v1--active.cbp-filter-item-active { border-color: #bbb !important; } .g-brd-gray-light-v2--active.cbp-filter-item-active { border-color: #ccc !important; } .g-brd-gray-light-v3--active.cbp-filter-item-active { border-color: #ddd !important; } .g-brd-gray-light-v4--active.cbp-filter-item-active { border-color: #eee !important; } .g-brd-gray-light-v5--active.cbp-filter-item-active { border-color: #f7f7f7 !important; } /* Transparent */ .g-brd-transparent--active.cbp-filter-item-active { border-color: transparent !important; } /*------------------------------------ Background Colors ------------------------------------*/ /* Primary Colors */ .g-bg-primary--active.cbp-filter-item-active { background-color: #72c02c !important; } /*------------------------------------ Colors ------------------------------------*/ /* Primary Colors */ .g-color-primary--active.cbp-filter-item-active { color: #72c02c !important; } /* Black Colors */ .g-color-black--active.cbp-filter-item-active { color: #000 !important; } /* White Colors */ .g-color-white--active.cbp-filter-item-active { color: #fff !important; } /* Gray Colors */ .g-color-gray-light-v1--active.cbp-filter-item-active { color: #bbb !important; } .g-color-gray-light-v2--active.cbp-filter-item-active { color: #ccc !important; } .g-color-gray-light-v3--active.cbp-filter-item-active { color: #ddd !important; } .g-color-gray-light-v4--active.cbp-filter-item-active { color: #eee !important; } .g-color-gray-light-v5--active.cbp-filter-item-active { color: #f7f7f7 !important; } .g-color-gray-dark-v1--active.cbp-filter-item-active { color: #111 !important; } .g-color-gray-dark-v2--active.cbp-filter-item-active { color: #333 !important; } .g-color-gray-dark-v3--active.cbp-filter-item-active { color: #555 !important; } .g-color-gray-dark-v4--active.cbp-filter-item-active { color: #777 !important; } .g-color-gray-dark-v5--active.cbp-filter-item-active { color: #999 !important; } /*-------------------------------------------------- Fancybox ----------------------------------------------------*/ /* Blur bg container */ /*-------------------------------------------------- Fancybox ----------------------------------------------------*/ .u-fancybox-theme .fancybox-content { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .u-fancybox-theme .fancybox-slide--iframe .fancybox-content { position: static; } .u-fancybox-theme.fancybox-show-thumbs .fancybox-content { right: 220px; } .u-fancybox-theme .fancybox-button, .u-fancybox-theme .fancybox-arrow { font-size: 1.42857rem; line-height: 2.92857rem; width: 3.14286rem; height: 3.14286rem; text-align: center; background-color: transparent; border-width: 0.07143rem; border-style: solid; border-color: #fff; color: #fff; outline: none; border-radius: 50%; opacity: .8; transition: opacity .3s ease; } .u-fancybox-theme .fancybox-button::before, .u-fancybox-theme .fancybox-arrow::before { font-family: "hs-icons"; position: static; opacity: 1; background-color: transparent; border: none; box-shadow: none; -webkit-transform: none; -ms-transform: none; transform: none; width: auto; height: auto; } .u-fancybox-theme .fancybox-button::after, .u-fancybox-theme .fancybox-arrow::after { display: none; } .u-fancybox-theme .fancybox-button:hover, .u-fancybox-theme .fancybox-button:focus, .u-fancybox-theme .fancybox-arrow:hover, .u-fancybox-theme .fancybox-arrow:focus { opacity: 1; } .u-fancybox-theme .fancybox-button { display: inline-block; } .u-fancybox-theme .fancybox-button--close::before { content: "\e904"; } .u-fancybox-theme .fancybox-button--play::before { content: "\e90c"; } .u-fancybox-theme .fancybox-button--fullscreen::before { content: "\e909"; } .u-fancybox-theme .fancybox-button--thumbs::before { content: "\e906"; } .u-fancybox-theme .fancybox-arrow--left, .u-fancybox-theme .fancybox-arrow--right { margin-top: -1.57143rem; position: absolute; top: 50%; z-index: 100000; display: none; } .u-fancybox-theme.fancybox-show-nav .fancybox-arrow--left, .u-fancybox-theme.fancybox-show-nav .fancybox-arrow--right { display: block; } .u-fancybox-theme .fancybox-arrow--left::before, .u-fancybox-theme .fancybox-arrow--right::before { content: "\e902"; } .u-fancybox-theme .fancybox-arrow--left { left: 1.42857rem; } .u-fancybox-theme .fancybox-arrow--right { right: 1.42857rem; } .u-fancybox-theme .fancybox-toolbar { top: 1.42857rem; right: 1.42857rem; margin-left: -0.35714rem; margin-right: -0.35714rem; } .u-fancybox-theme .fancybox-toolbar .fancybox-button { margin-left: 0.35714rem; margin-right: 0.35714rem; } .u-fancybox-theme .fancybox-thumbs { background-color: #000; } .u-fancybox-theme .fancybox-thumbs > ul > li { border-color: #000; } .u-fancybox-theme .fancybox-thumbs > ul > li::before { border-color: #72c02c; } .fancybox-controls--canzoomIn .fancybox-placeholder, .fancybox-controls--canzoomOut .fancybox-placeholder { cursor: inherit; } .fancybox-slide.has-animation { display: block; } .fancybox-is-sliding .fancybox-slide.has-animation, .fancybox-slide--current.has-animation, .fancybox-slide--next.has-animation, .fancybox-slide--previous.has-animation { display: none; } .fancybox-is-sliding .fancybox-slide.has-animation.animated, .fancybox-slide--current.has-animation.animated, .fancybox-slide--next.has-animation.animated, .fancybox-slide--previous.has-animation.animated { display: block; } /*-------------------------------------------------- Hamburgers ----------------------------------------------------*/ .hamburger { padding: 10px; } .hamburger-box { width: 37px; height: 25px; } .hamburger-inner { margin-top: 1px; } .hamburger-inner, .hamburger-inner::after, .hamburger-inner::before { width: 100%; height: 1px; border-radius: 0; } .u-header__section--light .hamburger-inner, .u-header__section--light .hamburger-inner::after, .u-header__section--light .hamburger-inner::before { background: #555; } .u-header__section--dark .hamburger-inner, .u-header__section--dark .hamburger-inner::after, .u-header__section--dark .hamburger-inner::before { background: #fff; } .hs-has-mega-menu:not(.hs-mega-menu-opened) *, .hs-has-sub-menu:not(.hs-sub-menu-opened) * { transition: none !important; } .hs-has-mega-menu:not(.hs-mega-menu-opened) *::before, .hs-has-mega-menu:not(.hs-mega-menu-opened) *::after, .hs-has-sub-menu:not(.hs-sub-menu-opened) *::before, .hs-has-sub-menu:not(.hs-sub-menu-opened) *::after { transition: none !important; } [class^="et-"] { line-height: 1.1; } .material-icons { position: relative; top: 0.14286rem; } .u-btn-floating .material-icons, .u-chip .material-icons { top: 0; } .jFiler-jProgressBar { height: auto; margin-top: 0; } .jFiler-item-thumb-image img { max-width: 100%; } /*------------------------------------ jQuery UI ------------------------------------*/ .ui-autocomplete { max-height: 200px; overflow-y: auto; overflow-x: hidden; padding-bottom: 1px; z-index: 991; } .ui-autocomplete .left { float: left; } .ui-autocomplete .right { float: right; } .ui-autocomplete .ui-menu-item { padding: 0; } .ui-autocomplete .ui-menu-item-wrapper { display: block; color: inherit; background-color: transparent; border-color: transparent; padding: 7px 15px; } .ui-autocomplete .ui-menu-item-wrapper.ui-state-active, .ui-autocomplete .ui-menu-item-wrapper:hover { color: #fff; background-color: #72c02c; text-decoration: none; } .ui-autocomplete .ui-menu-item:hover { color: #fff; background-color: #72c02c; } .ui-autocomplete .ui-menu-item:hover .ui-menu-item-wrapper { background-color: transparent; border-color: transparent; } .ui-autocomplete-category { padding: 5px 15px; margin: 0; font-weight: bold; } .jvectormap-container { width: 100%; height: 100%; } /*------------------------------------ Pin Map ------------------------------------*/ .point { width: 21px; height: 21px; border-radius: 50%; background: rgba(0, 0, 0, 0.5); } .point::before, .point::after { content: ""; display: block; border-radius: 50%; position: absolute; } .point::before { top: 5px; left: 5px; width: 11px; height: 11px; background: #72c02c; } .point::after { top: 8px; left: 8px; width: 5px; height: 5px; background: rgba(0, 0, 0, 0.5); } .mwp-wrap { box-shadow: 0 1px 9px -1px; left: -82px; bottom: 35px !important; } .mwp-wrap::after { content: ""; position: absolute; top: 99%; left: 50%; margin-left: -7px; width: 0; height: 0; border-width: 14px 14px 0 14px; border-style: solid; border-color: #111 transparent transparent transparent; } .embed-responsive .plyr--video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } pre[class*="language-"] { position: relative; margin: 0; } pre[class*="language-"] .toolbar { position: absolute; top: -1px; right: -1px; } pre[class*="language-"] .toolbar-item a { display: block; z-index: 10; padding: 5px 8px; font-size: 12px; color: #111; cursor: pointer; background-color: #fff; border: 1px solid #bbb; border-radius: 0 0 0 4px; } .select2-container .select2-selection--single { height: 2.5rem; } .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: normal; padding: .5rem .75rem; } .select2-container--default .select2-selection--single .select2-selection__arrow { top: 50%; line-height: 26px; text-align: center; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .select2-container--default .select2-selection--single .select2-selection__arrow b { position: static; top: auto; left: auto; width: auto; height: auto; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; vertical-align: middle; border: none; margin-top: 0; margin-left: 0; } .select2-container--default .select2-selection--single .select2-selection__arrow b::before { content: "\f0dc"; } .g-rounded-0 + .select2-container--default .select2-selection--single { border-radius: 0; } .select2-results__option { position: relative; } .select2-results__option img:first-child { margin-right: 10px; } .select2-results__option img:last-child { margin-left: 10px; } .select2-results__option:hover .u-option-icons--v1 { opacity: 1; } .u-select-v1 { position: relative; } .select2-container--default .u-select-v1 { height: auto; border-radius: 0; } .select2-container--default .u-select-v1 .select2-selection__rendered { padding: 0; } .select2-container--default .u-select-v1 .select2-selection__arrow { line-height: 22px; } .select2-container--default .u-select-v1:focus { outline: 0 none; } .slick-slide:focus { outline: 0 none; } [data-lazy] { opacity: 0; transition-property: opacity; transition-duration: .4s; transition-timing-function: ease-in; } .js-carousel { background: url(../../assets/img/preloaders/preloader-black.svg) no-repeat 50% 50%; } .js-carousel .js-next, .js-carousel .js-prev { opacity: 0; } .js-carousel.slick-initialized { background: none; } .js-carousel.slick-initialized .js-slide, .js-carousel.slick-initialized .js-thumb { visibility: visible; height: auto; overflow: visible; } .js-carousel.slick-initialized .js-next, .js-carousel.slick-initialized .js-prev { opacity: 1; } .js-slide, .js-thumb { height: 0; visibility: hidden; overflow: hidden; } .js-slide:first-child, .js-thumb:first-child { height: auto; } .slick-vertical .slick-slide { border: none; } /*------------------------------------ Border Colors ------------------------------------*/ /* Primary Colors */ .slick-active .g-brd-primary--before--active::before { border-color: #72c02c !important; } .slick-active .g-brd-primary--active { border-color: #72c02c !important; } .js-pagination .g-brd-primary--before--hover:hover::before { border-color: #72c02c !important; } /*------------------------------------ Border Width ------------------------------------*/ .slick-active .g-brd-3--before--active::before { border-width: 3px !important; } /*------------------------------------ Box shadows ------------------------------------*/ .g-parent.slick-current .u-shadow-v24--active { box-shadow: 0 15px 20px 0 rgba(0, 0, 0, 0.06); } /*------------------------------------ Dot line v1 ------------------------------------*/ .slick-active .u-dot-line-v1__inner::before, .slick-active .u-dot-line-v1-2__inner::before { width: 100%; height: 100%; } /*------------------------------------ Dot line v2 ------------------------------------*/ .slick-active .u-dot-line-v2__inner::before, .slick-active .u-dot-line-v2-2__inner::before { width: 100%; height: 100%; } .u-has-sidebar-navigation .custombox-content, .u-has-sidebar-navigation .custombox-overlay { left: 0; right: 0; } /*------------------------------------ JS ------------------------------------*/ .js-carousel_single-item { max-width: 100%; position: relative; } .js-next, .js-prev, .js-thumb { cursor: pointer; } .js-next, .js-prev { z-index: 10; } .js-thumb img { display: inline-block; } .js-carousel_single-item-thumbs5__thumbs .js-thumb { opacity: .3; transition-property: opacity; transition-duration: .2s; transition-timing-function: ease-in; } .js-carousel_single-item-thumbs5__thumbs .slick-center { opacity: 1; } .js-carousel_single-item-thumbs5--v2__thumbs .js-thumb { opacity: .4; transition-property: opacity; transition-duration: .2s; transition-timing-function: ease-in; } .js-carousel_single-item-thumbs5--v2__thumbs .slick-center { opacity: 1; } .js-carousel_single-item-thumbs5--v3__thumbs .js-thumb { opacity: .4; transition-property: opacity; transition-duration: .2s; transition-timing-function: ease-in; } .js-carousel_single-item-thumbs5--v3__thumbs .slick-center { opacity: 1; } .u-pagi-control--v2 { display: block; width: 12px; height: 12px; margin: 0 3px; border-radius: 50%; background-color: #ddd; opacity: .3; cursor: pointer; } .slick-active .u-pagi-control-red { background-color: #f00; } .slick-active .u-pagi-control-grey { opacity: 1; } .u-carousel--v3 .js-prev, .u-carousel--v3 .js-next { top: 50%; opacity: 0; transition-property: opacity; transition-duration: .2s; transition-timing-function: ease-in; } .u-carousel--v3 .g-height-40.js-prev, .u-carousel--v3 .g-height-40.js-next { margin-top: -20px; left: 50%; } .u-carousel--v3 .g-height-40.js-prev { margin-left: -99px; } .u-carousel--v3 .g-height-40.js-next { margin-left: 65px; } .u-carousel--v3:hover .js-prev, .u-carousel--v3:hover .js-next { opacity: 1; } .u-carousel--v4 { margin-left: -15px; margin-right: -15px; } .u-carousel--v4 .js-prev, .u-carousel--v4 .js-next { top: 50%; opacity: 0; transition-property: opacity; transition-duration: .4s; transition-timing-function: ease-in; } .u-carousel--v4 .g-height-40.js-prev, .u-carousel--v4 .g-height-40.js-next { margin-top: -20px; left: 50%; } .u-carousel--v4 .g-height-40.js-prev { margin-left: -160px; } .u-carousel--v4 .g-height-40.js-next { margin-left: 125px; } .u-carousel--v4:hover .js-prev, .u-carousel--v4:hover .js-next { opacity: 1; } /*-------------------------------------------------- Filter v1 ----------------------------------------------------*/ .u-filter-v1 > li:not(:last-child)::after { content: "|"; font-size: 0.71429rem; margin: 0 7px 0 14px; position: relative; top: -2px; line-height: inherit; display: inline-block; vertical-align: middle; color: #ddd; } .u-filter-v1 > li:hover, .u-filter-v1 [class*="active"] { color: #72c02c; } /*-------------------------------------------------- Carousel v10 ----------------------------------------------------*/ .u-carousel-v10 .slick-dots { position: absolute; bottom: 30px; left: 0; width: auto; visibility: hidden; margin: 0; padding: 0; } .u-carousel-v10 .slick-dots li { display: block; margin-bottom: 5px; } .u-carousel-v10 .slick-dots button { width: 15px; height: 15px; border-radius: 50%; color: transparent; background: #ccc; border: none; outline: none; } .u-carousel-v10 .slick-dots .slick-active button { background: #72c02c; } .u-carousel-v10-nav { margin-top: -135px; } .u-carousel-v10-nav .js-slide { position: relative; cursor: pointer; height: 100%; } .u-carousel-v10-nav .js-slide:after { content: ""; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.2); transition: opacity 0.3s ease-in-out; } .u-carousel-v10-nav .js-slide.slick-current::after { opacity: 0; } @media only screen and (max-width: 991px) { .u-carousel-v10 .slick-dots { visibility: visible; } .u-carousel-v10-nav { display: none; } } /*------------------------------------ Internet Explorer (IE) ------------------------------------*/ /* Text Gradients */ .IE .g-color-cyan-gradient-opacity-v1, .IE .g-color-blue-gradient-opacity-v1 { background: transparent; -webkit-text-fill-color: initial; } .IE .g-color-cyan-gradient-opacity-v1 { color: #00bed6; } .IE .g-color-blue-gradient-opacity-v1 { color: #8654da; } .IE .form-control:-ms-input-placeholder { opacity: 1; } /*------------------------------------ Demo of Icons ------------------------------------*/ .u-icons-demo__item { border: solid 1px #eee; margin: 0 -1px -1px 0; padding: 20px 15px; } .u-icons-demo-item__value, .u-icons-demo-item__value:focus { width: 100%; text-align: center; border: none; outline: none; } /* Add here all your css styles (customizations) */ @media (min-width: 0){ .g-py-100 { padding-top: 0.14286rem !important; padding-bottom: 2.14286rem !important; } } article.up-block-hover.u-shadow-v29--hover.gp-bg-black--hover.rounded.g-pa-35 { background-color: #454545; } /*h3.d-inline-block.g-color-white--hover.g-font-weight-600.g-transition-0_3.mb-0 { color: white; }*/ span.d-block.g-color-primary--hover.g-font-weight-600.g-font-size-12.text-uppercase.g-transition-0_3.mb-2 { color: #72c02c !important; } .gp-bg-black--hover:hover { background-color: #ffffff !important; } .article-title{ color:white; } .up-block-hover:hover .g-color-white--hover, .g-color-white--hover:hover { color: #454545 !important; } article.up-block-hover { max-height: 345px; }