FileMaster
Search
Toggle Dark Mode
Home
/
.
/
kiara
/
wp-content
/
plugins
/
premium-addons-for-elementor
/
assets
/
frontend
/
css
Edit File: premium-banner.css
/**************** Premium Banner ****************/ /************************************************/ .elementor-widget-premium-addon-banner { overflow: hidden; } .premium-banner-ib { display: block; position: relative; z-index: 1; overflow: hidden; margin: 0; text-align: center; } .premium-banner-ib img { display: block; position: relative; } .premium-banner-img-wrap { display: -webkit-flex; display: -ms-flexbox; display: flex; height: 100%; } .premium-banner-img-wrap .premium-banner-ib-img { -ms-flex-negative: 0; -webkit-flex-shrink: 0; flex-shrink: 0; } .premium-banner-ib-desc .premium-banner-read-more { z-index: 100; } .elementor-widget-premium-addon-banner .premium-banner-ib-title { background: transparent; } .premium-banner-ib img { min-width: 100%; max-width: 100%; -webkit-transition: opacity 0.35s; transition: opacity 0.35s; } .premium-banner-ib .premium-banner-ib-desc { padding: 15px; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .premium-banner-ib .premium-banner-ib-link { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; text-indent: 200%; white-space: nowrap; font-size: 0; opacity: 0; } .premium-banner-ib a.premium-banner-ib-link { display: block; background: 0 0; } .premium-banner-animation1 img { width: -webkit-calc(100% + 50px) !important; width: calc(100% + 50px) !important; max-width: -webkit-calc(100% + 50px) !important; max-width: calc(100% + 50px) !important; -webkit-transition: opacity 0.35s, -webkit-filter 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, -webkit-filter 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, filter 0.35s, transform 0.35s; transition: opacity 0.35s, filter 0.35s, transform 0.35s, -webkit-filter 0.35s, -webkit-transform 0.35s; -webkit-transform: translate3d(-40px, 0, 0); transform: translate3d(-40px, 0, 0); } .premium-banner-animation2 .premium-banner-ib-title { padding: 15px; } .premium-banner-animation1 .premium-banner-ib-desc { top: auto; bottom: 0; min-height: 25%; height: auto; max-height: 100%; text-align: left; } .premium-banner-animation1 .premium-banner-ib-content, .premium-banner-animation1 .premium-banner-ib-title, .premium-banner-animation1 .premium-banner-read-more { -webkit-transform: translate3d(0, 40px, 0); transform: translate3d(0, 40px, 0); -webkit-transition-delay: 0.05s; transition-delay: 0.05s; -webkit-transition-duration: 0.35s; transition-duration: 0.35s; } .premium-banner-animation1 .premium-banner-ib-title { -webkit-transition: -webkit-transform 0.35s; transition: -webkit-transform 0.35s; transition: transform 0.35s; transition: transform 0.35s, -webkit-transform 0.35s; } .premium-banner-animation1 .premium-banner-ib-content, .premium-banner-animation1 .premium-banner-read-more { margin-top: 10px; opacity: 0; -webkit-transition: opacity 0.2s, -webkit-transform 0.35s; transition: opacity 0.2s, -webkit-transform 0.35s; transition: opacity 0.2s, transform 0.35s; transition: opacity 0.2s, transform 0.35s, -webkit-transform 0.35s; } .premium-banner-animation1:hover .premium-banner-ib-content, .premium-banner-animation1.active .premium-banner-ib-content, .premium-banner-animation1:hover .premium-banner-read-more, .premium-banner-animation1.active .premium-banner-read-more { opacity: 1; -webkit-transition-delay: 0.05s; transition-delay: 0.05s; -webkit-transition-duration: 0.35s; transition-duration: 0.35s; } .premium-banner-animation1:hover .premium-banner-ib-content, .premium-banner-animation1.active .premium-banner-ib-content, .premium-banner-animation1:hover .premium-banner-read-more, .premium-banner-animation1.active .premium-banner-read-more, .premium-banner-animation1:hover .premium-banner-ib-title, .premium-banner-animation1.active .premium-banner-ib-title, .premium-banner-animation1:hover img, .premium-banner-animation1.active img { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition-delay: 0.05s; transition-delay: 0.05s; -webkit-transition-duration: 0.35s; transition-duration: 0.35s; } .premium-banner-animation1.zoomout img, .premium-banner-animation1.scale img { -webkit-transform: translate3d(-40px, 0, 0) scale(1.1); transform: translate3d(-40px, 0, 0) scale(1.1); } .premium-banner-ib.sepia img { -webkit-filter: sepia(30%); filter: sepia(30%); } .premium-banner-ib.bright img { -webkit-filter: brightness(1); filter: brightness(1); } .premium-banner-ib.sepia:hover img { -webkit-filter: sepia(0%); filter: sepia(0%); } .premium-banner-ib.bright:hover img { -webkit-filter: brightness(1.2); filter: brightness(1.2); } .premium-banner-animation1.premium-banner-min-height img, .premium-banner-animation2.premium-banner-min-height img, .premium-banner-animation4.premium-banner-min-height img, .premium-banner-animation5.premium-banner-min-height img, .premium-banner-animation6.premium-banner-min-height img, .premium-banner-animation13.premium-banner-min-height img { height: auto; } .premium-banner-animation2 img { width: 100%; } .premium-banner-animation2 .premium-banner-ib-desc::before { position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; -webkit-transform: translate3d(0, 50%, 0); transform: translate3d(0, 50%, 0); } .premium-banner-animation2 .premium-banner-ib-title { position: absolute; top: 50%; left: 0; width: 100%; -webkit-transition: color 0.35s, -webkit-transform 0.35s; transition: color 0.35s, -webkit-transform 0.35s; transition: transform 0.35s, color 0.35s; transition: transform 0.35s, color 0.35s, -webkit-transform 0.35s; -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); } .premium-banner-animation2 .premium-banner-ib-content, .premium-banner-animation2 .premium-banner-read-more, .premium-banner-animation2 .premium-banner-ib-desc::before { -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s; } .premium-banner-animation2 .premium-banner-ib-content, .premium-banner-animation2 .premium-banner-read-more { position: absolute; bottom: 0; left: 0; padding: 15px; width: 100%; max-height: 50%; opacity: 0; -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } .premium-banner-animation2:hover .premium-banner-ib-title, .premium-banner-animation2.active .premium-banner-ib-title { -webkit-transform: translate3d(0, -40px, 0); transform: translate3d(0, -40px, 0); } .premium-banner-animation2:hover .premium-banner-read-more, .premium-banner-animation2.active .premium-banner-read-more, .premium-banner-animation2:hover .premium-banner-ib-desc::before, .premium-banner-animation2.active .premium-banner-ib-desc::before { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .premium-banner-animation2:hover .premium-banner-ib-content, .premium-banner-animation2.active .premium-banner-ib-content { opacity: 1; -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } .premium-banner-animation3 .premium-banner-ib-title { position: absolute; bottom: 0; left: 0; padding: 15px; width: 100%; text-align: left; -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } .premium-banner-animation3 .premium-banner-ib-desc::before, .premium-banner-animation3 .premium-banner-ib-title { -webkit-transition: -webkit-transform 0.35s; transition: -webkit-transform 0.35s; transition: transform 0.35s; transition: transform 0.35s, -webkit-transform 0.35s; } .premium-banner-animation3:hover .premium-banner-ib-desc::before, .premium-banner-animation3.active .premium-banner-ib-desc::before, .premium-banner-animation3:hover .premium-banner-ib-title, .premium-banner-animation3.active .premium-banner-ib-title { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .premium-banner-animation3 .premium-banner-ib-content { max-height: -webkit-calc(100% - 60px - 1.5em); max-height: calc(100% - 60px - 1.5em); overflow: hidden; } .premium-banner-animation4 img { width: -webkit-calc(100% + 40px) !important; width: calc(100% + 40px) !important; max-width: -webkit-calc(100% + 40px) !important; max-width: calc(100% + 40px) !important; } .premium-banner-animation4 .premium-banner-ib-desc { padding: 30px; } .premium-banner-animation4 .premium-banner-ib-desc::after { position: absolute; content: ""; opacity: 0; } .premium-banner-animation4 .premium-banner-ib-desc::before { position: absolute; content: ""; opacity: 0; top: 50px; right: 30px; bottom: 50px; left: 30px; border-top: 1px solid #fff; border-bottom: 1px solid #fff; -webkit-transform: scale(0, 1); -ms-transform: scale(0, 1); transform: scale(0, 1); -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; } .premium-banner-animation4 .premium-banner-ib-desc::after { top: 30px; right: 50px; bottom: 30px; left: 50px; border-right: 1px solid #fff; border-left: 1px solid #fff; -webkit-transform: scale(1, 0); -ms-transform: scale(1, 0); transform: scale(1, 0); -webkit-transform-origin: 100% 0; -ms-transform-origin: 100% 0; transform-origin: 100% 0; } .premium-banner-animation4 .premium-banner-ib-title { padding: 50px 30px 0 30px; -webkit-transition: -webkit-transform 0.35s; transition: -webkit-transform 0.35s; transition: transform 0.35s; transition: transform 0.35s, -webkit-transform 0.35s; } .premium-banner-animation4 .premium-banner-ib-content, .premium-banner-animation4 .premium-banner-read-more { padding: 10px 30px; opacity: 0; overflow: hidden; -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } .premium-banner-animation4 .premium-banner-ib-title, .premium-banner-animation4 img { -webkit-transform: translate3d(-30px, 0, 0); transform: translate3d(-30px, 0, 0); } .premium-banner-animation4.zoomout img, .premium-banner-animation4.scale img { -webkit-transform: translate3d(-30px, 0, 0) scale(1.1); transform: translate3d(-30px, 0, 0) scale(1.1); } .premium-banner-animation4 .premium-banner-ib-content, .premium-banner-animation4 .premium-banner-read-more { -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s; } .premium-banner-animation4 .premium-banner-ib-desc::after, .premium-banner-animation4 .premium-banner-ib-desc::before { -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s; } .premium-banner-animation4 img { -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s; } .premium-banner-animation4:hover .premium-banner-ib-desc::after, .premium-banner-animation4.active .premium-banner-ib-desc::after, .premium-banner-animation4:hover .premium-banner-ib-desc::before, .premium-banner-animation4.active .premium-banner-ib-desc::before { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .premium-banner-animation4:hover .premium-banner-ib-content, .premium-banner-animation4.active .premium-banner-ib-content, .premium-banner-animation4:hover .premium-banner-read-more, .premium-banner-animation4.active .premium-banner-read-more, .premium-banner-animation4:hover .premium-banner-ib-title, .premium-banner-animation4.active .premium-banner-ib-title { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .premium-banner-animation4:hover .premium-banner-ib-content, .premium-banner-animation4:hover .premium-banner-ib-desc::after, .premium-banner-animation4:hover .premium-banner-ib-title, .premium-banner-animation4:hover img { -webkit-transition-delay: 0.15s; transition-delay: 0.15s; } .premium-banner-animation5 .premium-banner-ib-desc { top: auto; bottom: 0; padding: 15px; height: auto; background: #f2f2f2; color: #3c4a50; -webkit-transition: -webkit-transform 0.35s; transition: -webkit-transform 0.35s; transition: transform 0.35s; transition: transform 0.35s, -webkit-transform 0.35s; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } .premium-banner-animation5 .premium-banner-ib-content { position: absolute; top: auto; bottom: 100%; left: 0; width: 100%; padding: 15px; opacity: 0; -webkit-transition: opacity 0.35s; transition: opacity 0.35s; } .premium-banner-animation5 .premium-banner-ib-title, .premium-banner-animation5 .premium-banner-read-more { -webkit-transition: -webkit-transform 0.35s; transition: -webkit-transform 0.35s; transition: transform 0.35s; transition: transform 0.35s, -webkit-transform 0.35s; -webkit-transform: translate3d(0, 200%, 0); transform: translate3d(0, 200%, 0); text-align: center; } .premium-banner-animation5 .premium-banner-ib-title { margin: 10px 0; } .premium-banner-animation5:hover .premium-banner-ib-content, .premium-banner-animation5.active .premium-banner-ib-content, .premium-banner-animation5:hover .premium-banner-ib-content *, .premium-banner-animation5.active .premium-banner-ib-content * { opacity: 1 !important; z-index: 99 !important; -webkit-backface-visibility: hidden !important; backface-visibility: hidden !important; } .premium-banner-animation5:hover .premium-banner-ib-desc, .premium-banner-animation5.active .premium-banner-ib-desc, .premium-banner-animation5:hover .premium-banner-ib-title, .premium-banner-animation5.active .premium-banner-ib-title, .premium-banner-animation5:hover .premium-banner-read-more, .premium-banner-animation5.active .premium-banner-read-more { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .premium-banner-animation5:hover .premium-banner-ib-title { -webkit-transition-delay: 0.05s; transition-delay: 0.05s; } .premium-banner-animation5 img { -webkit-transition: opacity 0.35s, -webkit-filter 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, -webkit-filter 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, filter 0.35s, transform 0.35s; transition: opacity 0.35s, filter 0.35s, transform 0.35s, -webkit-filter 0.35s, -webkit-transform 0.35s; } .premium-banner-animation2 img, .premium-banner-animation4 img, .premium-banner-animation6 img { -webkit-transition: opacity 0.35s, -webkit-filter 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, -webkit-filter 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, filter 0.35s, transform 0.35s; transition: opacity 0.35s, filter 0.35s, transform 0.35s, -webkit-filter 0.35s, -webkit-transform 0.35s; } .premium-banner-animation5.zoomout img, .premium-banner-animation5.scale img { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .premium-banner-animation2.zoomout img, .premium-banner-animation2.scale img { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .premium-banner-animation6.zoomout img, .premium-banner-animation6.scale img { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .premium-banner-animation5.zoomin:hover img, .premium-banner-animation2.zoomin:hover img, .premium-banner-animation6.zoomin:hover img { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .premium-banner-animation5.zoomout:hover img, .premium-banner-animation2.zoomout:hover img, .premium-banner-animation6.zoomout:hover img { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .premium-banner-animation5.scale:hover img, .premium-banner-animation2.scale:hover img, .premium-banner-animation6.scale:hover img { -webkit-transform: scale(1.2) rotate(5deg); -ms-transform: scale(1.2) rotate(5deg); transform: scale(1.2) rotate(5deg); } .premium-banner-animation5.grayscale:hover img, .premium-banner-animation2.grayscale:hover img, .premium-banner-animation6.grayscale:hover img { -webkit-filter: grayscale(100%); filter: grayscale(100%); } .premium-banner-animation5.blur:hover img, .premium-banner-animation2.blur:hover img { -webkit-filter: blur(3px); filter: blur(3px); } .premium-banner-animation6.blur:hover img { -webkit-filter: blur(3px); filter: blur(3px); } .premium-banner-animation6 .premium-banner-ib-desc { padding: 45px; } .premium-banner-animation6 .premium-banner-ib-desc::before { position: absolute; content: ""; top: 30px; right: 30px; bottom: 30px; left: 30px; border: 1px solid #fff; } .premium-banner-animation6 .premium-banner-ib-title { margin: 20px 0 10px; -webkit-transition: -webkit-transform 0.35s; transition: -webkit-transform 0.35s; transition: transform 0.35s; transition: transform 0.35s, -webkit-transform 0.35s; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } .premium-banner-animation6 .premium-banner-ib-content, .premium-banner-animation6 .premium-banner-read-more, .premium-banner-animation6 .premium-banner-ib-desc::before { opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); } .premium-banner-animation6 .premium-banner-read-more { margin-top: 10px; } .premium-banner-animation6:hover .premium-banner-ib-title, .premium-banner-animation6.active .premium-banner-ib-title { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .premium-banner-animation6:hover .premium-banner-ib-content, .premium-banner-animation6.active .premium-banner-ib-content, .premium-banner-animation6:hover .premium-banner-read-more, .premium-banner-animation6.active .premium-banner-read-more, .premium-banner-animation6:hover .premium-banner-ib-desc::before, .premium-banner-animation6.active .premium-banner-ib-desc::before { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .premium-banner-animation12 .premium-banner-ib-desc::after { position: absolute; content: ""; right: 30px; bottom: 30px; left: 30px; height: -webkit-calc(50% - 30px); height: calc(50% - 30px); border: 7px solid #fff; -webkit-transition: -webkit-transform 0.35s; transition: -webkit-transform 0.35s; transition: transform 0.35s; transition: transform 0.35s, -webkit-transform 0.35s; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } .premium-banner-animation12:hover .premium-banner-ib-desc::after, .premium-banner-animation12.active .premium-banner-ib-desc::after { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .premium-banner-animation12 .premium-banner-ib-desc { padding: 45px; text-align: left; } .premium-banner-animation12 .premium-banner-ib-content { position: absolute; right: 60px; bottom: 60px; left: 60px; opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s; -webkit-transform: translate3d(0, -100px, 0); transform: translate3d(0, -100px, 0); } .premium-banner-animation12:hover .premium-banner-ib-content, .premium-banner-animation12.active .premium-banner-ib-content { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .premium-banner-animation13 img { width: -webkit-calc(100% + 20px) !important; width: calc(100% + 20px) !important; max-width: -webkit-calc(100% + 20px) !important; max-width: calc(100% + 20px) !important; -webkit-transition: opacity 0.35s, -webkit-filter 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, -webkit-filter 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, filter 0.35s, transform 0.35s; transition: opacity 0.35s, filter 0.35s, transform 0.35s, -webkit-filter 0.35s, -webkit-transform 0.35s; -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .premium-banner-animation13.zoomout img, .premium-banner-animation13.scale img { -webkit-transform: translate3d(-10px, 0, 0) scale(1.1); transform: translate3d(-10px, 0, 0) scale(1.1); } .premium-banner-animation13.none:hover img { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .premium-banner-animation1.none:hover img, .premium-banner-animation4.none:hover img { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .premium-banner-animation13.zoomin:hover img, .premium-banner-animation1.zoomin:hover img, .premium-banner-animation4.zoomin:hover img, .premium-banner-animation8.zoomin:hover img, .premium-banner-animation7.zoomin:hover img, .premium-banner-animation9.zoomin:hover img, .premium-banner-animation10.zoomin:hover img, .premium-banner-animation11.zoomin:hover img { -webkit-transform: translate3d(0, 0, 0) scale(1.1); transform: translate3d(0, 0, 0) scale(1.1); } .premium-banner-animation13.zoomout:hover img, .premium-banner-animation1.zoomout:hover img, .premium-banner-animation4.zoomout:hover img, .premium-banner-animation8.zoomout:hover img, .premium-banner-animation7.zoomout:hover img, .premium-banner-animation9.zoomout:hover img, .premium-banner-animation10.zoomout:hover img, .premium-banner-animation11.zoomout:hover img { -webkit-transform: translate3d(0, 0, 0) scale(1); transform: translate3d(0, 0, 0) scale(1); } .premium-banner-animation13.scale:hover img, .premium-banner-animation1.scale:hover img, .premium-banner-animation4.scale:hover img, .premium-banner-animation8.scale:hover img, .premium-banner-animation7.scale:hover img, .premium-banner-animation9.scale:hover img, .premium-banner-animation10.scale:hover img, .premium-banner-animation11.scale:hover img { -webkit-transform: translate3d(0, 0, 0) scale(1.2) rotate(5deg); transform: translate3d(0, 0, 0) scale(1.2) rotate(5deg); } .premium-banner-animation13.grayscale:hover img, .premium-banner-animation1.grayscale:hover img, .premium-banner-animation4.grayscale:hover img, .premium-banner-animation8.grayscale:hover img, .premium-banner-animation7.grayscale:hover img, .premium-banner-animation9.grayscale:hover img, .premium-banner-animation10.grayscale:hover img, .premium-banner-animation11.grayscale:hover img { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-filter: grayscale(100%); filter: grayscale(100%); } .premium-banner-animation13.blur:hover img, .premium-banner-animation1.blur:hover img, .premium-banner-animation4.blur:hover, .premium-banner-animation8.blur:hover img, .premium-banner-animation7.blur:hover img, .premium-banner-animation9.blur:hover img, .premium-banner-animation10.blur:hover img, .premium-banner-animation11.blur:hover img { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-filter: blur(3px); filter: blur(3px); } .premium-banner-animation13 .premium-banner-ib-desc { text-align: left; } .premium-banner-animation13 .premium-banner-ib-title { position: relative; overflow: hidden; padding: 5px 0 10px; } .premium-banner-animation13 .premium-banner-ib-title::after { position: absolute; content: ""; bottom: 0; left: 0; width: 100%; height: 2px; background: #fff; -webkit-transition: -webkit-transform 0.35s; transition: -webkit-transform 0.35s; transition: transform 0.35s; transition: transform 0.35s, -webkit-transform 0.35s; -webkit-transform: translate3d(-101%, 0, 0); transform: translate3d(-101%, 0, 0); } .premium-banner-animation13:hover .premium-banner-ib-title::after, .premium-banner-animation13.active .premium-banner-ib-title::after { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .premium-banner-animation13 .premium-banner-ib-content, .premium-banner-animation13 .premium-banner-read-more { padding: 15px 0; opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } .premium-banner-animation13:hover .premium-banner-ib-content, .premium-banner-animation13.active .premium-banner-ib-content, .premium-banner-animation13:hover .premium-banner-read-more, .premium-banner-animation13.active .premium-banner-read-more { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .premium-banner-ib.premium-banner-animation5 .premium-banner-toggle-size { left: 50%; width: auto !important; height: 100%; max-width: none; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .premium-banner-ib img { border: none; padding: 0; margin: 0; } .premium-banner-animation7 img { width: -webkit-calc(100% + 40px) !important; width: calc(100% + 40px) !important; max-width: -webkit-calc(100% + 40px) !important; max-width: calc(100% + 40px) !important; -webkit-transition: opacity 0.35s, -webkit-filter 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, -webkit-filter 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, filter 0.35s, transform 0.35s; transition: opacity 0.35s, filter 0.35s, transform 0.35s, -webkit-filter 0.35s, -webkit-transform 0.35s; } .premium-banner-animation7 .premium-banner-brlr { width: 7px; } .premium-banner-animation7 .premium-banner-brtb { height: 7px; } .premium-banner-animation7 .premium-banner-br { position: absolute; z-index: 1; background-color: white; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } .premium-banner-animation7 .premium-banner-bleft { left: 30px; top: -webkit-calc(100% - 150px); top: calc(100% - 150px); height: 0; } .premium-banner-animation7 .premium-banner-bright { right: 30px; bottom: -webkit-calc(100% - 150px); bottom: calc(100% - 150px); height: 0; } .premium-banner-animation7 .premium-banner-bottom { right: -webkit-calc(100% - 150px); right: calc(100% - 150px); bottom: 30px; width: 0; } .premium-banner-animation7 .premium-banner-btop { left: -webkit-calc(100% - 150px); left: calc(100% - 150px); top: 30px; width: 0; } .premium-banner-animation7 .premium-banner-ib-desc { padding: 70px; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .premium-banner-animation7 .premium-banner-ib-title { margin-top: 0; } .premium-banner-animation7 .premium-banner-ib-title, .premium-banner-animation7 img { -webkit-transform: translate3d(-30px, 0, 0); transform: translate3d(-30px, 0, 0); } .premium-banner-animation7.zoomout img, .premium-banner-animation7.scale img { -webkit-transform: translate3d(-30px, 0, 0) scale(1.1); transform: translate3d(-30px, 0, 0) scale(1.1); } .premium-banner-animation7 .premium-banner-ib-content, .premium-banner-animation7 .premium-banner-read-more { margin-top: 10px; } .premium-banner-animation7 .premium-banner-ib-desc::after, .premium-banner-animation7 .premium-banner-ib-desc::before { -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s; } .premium-banner-animation7 .premium-banner-ib-title, .premium-banner-animation7 .premium-banner-ib-content, .premium-banner-animation7 .premium-banner-read-more { opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s; } .premium-banner-animation7:hover .premium-banner-ib-content, .premium-banner-animation7.active .premium-banner-ib-content, .premium-banner-animation7:hover .premium-banner-read-more, .premium-banner-animation7.active .premium-banner-read-more, .premium-banner-animation7:hover .premium-banner-ib-title, .premium-banner-animation7.active .premium-banner-ib-title { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .premium-banner-animation7:hover .premium-banner-bleft, .premium-banner-animation7.active .premium-banner-bleft { top: 30px; height: 70px; } .premium-banner-animation7:hover .premium-banner-bright, .premium-banner-animation7.active .premium-banner-bright { bottom: 30px; height: 70px; } .premium-banner-animation7:hover .premium-banner-bottom, .premium-banner-animation7.active .premium-banner-bottom { right: 30px; width: 70px; } .premium-banner-animation7:hover .premium-banner-btop, .premium-banner-animation7.active .premium-banner-btop { left: 30px; width: 70px; } .premium-banner-animation7:hover .premium-banner-ib-content, .premium-banner-animation7:hover .premium-banner-read-more, .premium-banner-animation7:hover .premium-banner-ib-title, .premium-banner-animation7:hover img { -webkit-transition-delay: 0.15s; transition-delay: 0.15s; } .premium-banner-animation8 img { width: -webkit-calc(100% + 40px) !important; width: calc(100% + 40px) !important; max-width: -webkit-calc(100% + 40px) !important; max-width: calc(100% + 40px) !important; -webkit-transition: opacity 0.35s, -webkit-filter 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, -webkit-filter 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, filter 0.35s, transform 0.35s; transition: opacity 0.35s, filter 0.35s, transform 0.35s, -webkit-filter 0.35s, -webkit-transform 0.35s; } .premium-banner-animation8 .premium-banner-brlr { width: 7px; } .premium-banner-animation8 .premium-banner-brtb { height: 7px; } .premium-banner-animation8 .premium-banner-br { position: absolute; z-index: 1; background-color: white; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } .premium-banner-animation8 .premium-banner-bleft { left: 30px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); height: 0; } .premium-banner-animation8 .premium-banner-bright { right: 30px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); height: 0; } .premium-banner-animation8 .premium-banner-bottom { left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); bottom: 30px; width: 0; } .premium-banner-animation8 .premium-banner-btop { left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); top: 30px; width: 0; } .premium-banner-animation8 .premium-banner-ib-desc { padding: 70px; display: table; } .premium-banner-animation8 .premium-banner-ib-desc .premium-banner-desc-centered { display: table-cell; vertical-align: middle; } .premium-banner-animation8 .premium-banner-ib-title { margin-top: 0; } .premium-banner-animation8 .premium-banner-ib-title, .premium-banner-animation8 img { -webkit-transform: translate3d(-30px, 0, 0); transform: translate3d(-30px, 0, 0); } .premium-banner-animation8.zoomout img, .premium-banner-animation8.scale img { -webkit-transform: translate3d(-30px, 0, 0) scale(1.1); transform: translate3d(-30px, 0, 0) scale(1.1); } .premium-banner-animation8 .premium-banner-ib-content, .premium-banner-animation8 .premium-banner-read-more { margin-top: 10px; } .premium-banner-animation8 .premium-banner-ib-desc::after, .premium-banner-animation8 .premium-banner-ib-desc::before { -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s; } .premium-banner-animation8 .premium-banner-ib-title, .premium-banner-animation8 .premium-banner-ib-content, .premium-banner-animation8 .premium-banner-read-more { -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s; opacity: 0; } .premium-banner-animation8:hover .premium-banner-ib-content, .premium-banner-animation8.active .premium-banner-ib-content, .premium-banner-animation8:hover .premium-banner-read-more, .premium-banner-animation8.active .premium-banner-read-more, .premium-banner-animation8:hover .premium-banner-ib-title, .premium-banner-animation8.active .premium-banner-ib-title { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .premium-banner-animation8:hover .premium-banner-bleft, .premium-banner-animation8.active .premium-banner-bleft { height: -webkit-calc(100% - 61px); height: calc(100% - 61px); } .premium-banner-animation8:hover .premium-banner-bright, .premium-banner-animation8.active .premium-banner-bright { height: -webkit-calc(100% - 61px); height: calc(100% - 61px); } .premium-banner-animation8:hover .premium-banner-bottom, .premium-banner-animation8.active .premium-banner-bottom { width: -webkit-calc(100% - 61px); width: calc(100% - 61px); } .premium-banner-animation8:hover .premium-banner-btop, .premium-banner-animation8.active .premium-banner-btop { width: -webkit-calc(100% - 61px); width: calc(100% - 61px); } .premium-banner-animation8:hover .premium-banner-ib-content, .premium-banner-animation8:hover .premium-banner-ib-title, .premium-banner-animation8:hover .premium-banner-read-more, .premium-banner-animation8:hover img { -webkit-transition-delay: 0.15s; transition-delay: 0.15s; } .premium-banner-animation9 img { width: -webkit-calc(100% + 20px) !important; width: calc(100% + 20px) !important; max-width: -webkit-calc(100% + 20px) !important; max-width: calc(100% + 20px) !important; -webkit-transition: opacity 0.35s, -webkit-filter 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, -webkit-filter 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, filter 0.35s, transform 0.35s; transition: opacity 0.35s, filter 0.35s, transform 0.35s, -webkit-filter 0.35s, -webkit-transform 0.35s; -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } .premium-banner-animation9 .premium-banner-ib-desc { width: 100%; height: 100%; } .premium-banner-animation9 .premium-banner-ib-desc::before { position: absolute; top: 50%; left: 50%; width: 80%; height: 1px; background: #fff; content: ""; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); } .premium-banner-animation9 .premium-banner-ib-desc::after { position: absolute; top: 50%; left: 50%; width: 80%; height: 1px; background: #fff; content: ""; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); } .premium-banner-animation9 .premium-banner-ib-title { position: absolute; top: 50%; left: 0; width: 100%; -webkit-transition: -webkit-transform 0.35s; transition: -webkit-transform 0.35s; transition: transform 0.35s; transition: transform 0.35s, -webkit-transform 0.35s; -webkit-transform: translate3d(0, -70px, 0); transform: translate3d(0, -70px, 0); margin-top: 0; padding: 0 10%; } .premium-banner-animation9:hover .premium-banner-ib-title, .premium-banner-animation9.active .premium-banner-ib-title { -webkit-transform: translate3d(0, -80px, 0); transform: translate3d(0, -80px, 0); } .premium-banner-animation9 .premium-banner-ib-content, .premium-banner-animation9 .premium-banner-read-more { position: absolute; top: 50%; left: 0; width: 100%; -webkit-transition: -webkit-transform 0.35s; transition: -webkit-transform 0.35s; transition: transform 0.35s; transition: transform 0.35s, -webkit-transform 0.35s; padding: 0 10%; -webkit-transform: translate3d(0, 35px, 0); transform: translate3d(0, 35px, 0); } .premium-banner-animation9 .premium-banner-read-more { top: 75%; } .premium-banner-animation9:hover .premium-banner-ib-content, .premium-banner-animation9.active .premium-banner-ib-content, .premium-banner-animation9:hover .premium-banner-read-more, .premium-banner-animation9.active .premium-banner-read-more { -webkit-transform: translate3d(0, 45px, 0); transform: translate3d(0, 45px, 0); } .premium-banner-animation9:hover .premium-banner-ib-desc::before, .premium-banner-animation9.active .premium-banner-ib-desc::before { opacity: 0.5; -webkit-transform: translate3d(-50%, -50%, 0) rotate(45deg); transform: translate3d(-50%, -50%, 0) rotate(45deg); } .premium-banner-animation9:hover .premium-banner-ib-desc::after, .premium-banner-animation9.active .premium-banner-ib-desc::after { opacity: 0.5; -webkit-transform: translate3d(-50%, -50%, 0) rotate(-45deg); transform: translate3d(-50%, -50%, 0) rotate(-45deg); } .premium-banner-animation9:hover img { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .premium-banner-animation10 img { width: -webkit-calc(100% + 20px) !important; width: calc(100% + 20px) !important; max-width: -webkit-calc(100% + 20px) !important; max-width: calc(100% + 20px) !important; -webkit-transition: opacity 0.35s, -webkit-filter 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, -webkit-filter 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, filter 0.35s, transform 0.35s; transition: opacity 0.35s, filter 0.35s, transform 0.35s, -webkit-filter 0.35s, -webkit-transform 0.35s; } .premium-banner-animation10 .premium-banner-ib-title { position: relative; overflow: hidden; padding: 5px 0 15px; -webkit-transition: -webkit-transform 0.35s; transition: -webkit-transform 0.35s; transition: transform 0.35s; transition: transform 0.35s, -webkit-transform 0.35s; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); margin-bottom: 0; } .premium-banner-animation10 .premium-banner-ib-title::after { position: absolute; content: ""; bottom: 0; left: 0; width: 100%; height: 3px; background: #fff; opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s; } .premium-banner-animation10:hover .premium-banner-ib-title, .premium-banner-animation10.active .premium-banner-ib-title { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .premium-banner-animation10:hover .premium-banner-ib-title::after, .premium-banner-animation10.active .premium-banner-ib-title::after { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .premium-banner-animation10.zoomout img, .premium-banner-animation10.scale img { -webkit-transform: translate3d(-10px, 0, 0) scale(1.1); transform: translate3d(-10px, 0, 0) scale(1.1); } .premium-banner-animation10 .premium-banner-ib-content, .premium-banner-animation10 .premium-banner-read-more { padding-top: 15px; opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } .premium-banner-animation10 .premium-banner-read-more { padding: 0; } .premium-banner-animation10:hover .premium-banner-ib-content, .premium-banner-animation10.active .premium-banner-ib-content, .premium-banner-animation10:hover .premium-banner-read-more, .premium-banner-animation10.active .premium-banner-read-more { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .premium-banner-animation11 { -webkit-transition: -webkit-transform 1s ease-out; transition: -webkit-transform 1s ease-out; transition: transform 1s ease-out; transition: transform 1s ease-out, -webkit-transform 1s ease-out; -webkit-transition-delay: 0.125s; transition-delay: 0.125s; } .premium-banner-animation11 .premium-banner-ib-desc { position: absolute; z-index: 5; -webkit-transform: translate3d(-30px, 0, 0); transform: translate3d(-30px, 0, 0); opacity: 0; top: auto; bottom: 0; min-height: 25%; height: auto; max-height: 100%; text-align: left; padding: 30px; -webkit-transition: all 0.6s ease-out; transition: all 0.6s ease-out; } .premium-banner-animation11 img { width: 100%; -webkit-transition: opacity 0.35s, -webkit-filter 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, -webkit-filter 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, filter 0.35s, transform 0.35s; transition: opacity 0.35s, filter 0.35s, transform 0.35s, -webkit-filter 0.35s, -webkit-transform 0.35s; } .premium-banner-animation11 .premium-banner-ib-title { margin-bottom: 10px; } .premium-banner-animation11 .premium-banner-gradient { position: absolute; left: 0; top: 0; right: 0; bottom: 0; } .premium-banner-animation11 .premium-banner-gradient:after, .premium-banner-animation11 .premium-banner-gradient:before { position: absolute; content: ""; left: 0; top: 0; right: 0; bottom: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); background-image: -webkit-linear-gradient(40deg, rgba(84, 89, 95, 0.5) 27.89%, #6ec1e4 72.11%); background-image: linear-gradient(50deg, rgba(84, 89, 95, 0.5) 27.89%, #6ec1e4 72.11%); z-index: 2; } .premium-banner-animation11 .premium-banner-gradient:before { mix-blend-mode: color; } .premium-banner-animation11 .premium-banner-gradient:after { mix-blend-mode: multiply; } .premium-banner-animation11:hover .premium-banner-ib-desc, .premium-banner-animation11.active .premium-banner-ib-desc { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .premium-banner-animation11:hover .premium-banner-gradient:after, .premium-banner-animation11:hover .premium-banner-gradient:before, .premium-banner-animation11.active .premium-banner-gradient:after, .premium-banner-animation11.active .premium-banner-gradient:before { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .premium-banner-animation11.zoomout img, .premium-banner-animation11.scale img { -webkit-transform: translate3d(-10px, 0, 0) scale(1.1); transform: translate3d(-10px, 0, 0) scale(1.1); } .premium-banner-ib-content p img { min-width: unset !important; max-width: none !important; width: auto !important; -webkit-transform: none !important; -ms-transform: none !important; transform: none !important; display: inline; } .premium-banner-link { display: inline-block; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
Save
Back