.promo-banner { position: relative; overflow: hidden } .promo-banner .banner-image { background-repeat: no-repeat; background-size: cover } .promo-banner .banner-image img { width: 100% } .promo-banner .wrapper-content-banner { z-index: 2; display: flex; overflow: hidden; padding: 10px; position: relative; } .promo-banner .content-banner { position: relative; width: 100% } .promo-banner .content-banner>div:first-child { margin-top: 0 } .promo-banner .banner-title-wrap .banner-subtitle:first-child,.promo-banner .banner-title-wrap .banner-title:first-child { margin-top: 0 } .promo-banner .banner-title-wrap:empty { display: none } .promo-banner .banner-subtitle,.promo-banner .banner-title,.promo-banner .banner-inner { margin-top: 7px } .promo-banner .banner-title { display: block; margin-bottom: 0; line-height: 1.3; text-align: center; } .promo-banner .banner-btn-wrapper { margin-top: 15px } .promo-banner .banner-inner p:first-child:empty { display: none } .banners-carousel-wrapper .owl-dots { margin-top: 10px } .banner-increased-padding .wrapper-content-banner { padding: 7% } .banner-hover-zoom { backface-visibility: hidden; -webkit-backface-visibility: hidden } .banner-hover-zoom .banner-image { transition: -webkit-transform 0.5s cubic-bezier(0, 0, 0.44, 1.18); transition: transform 0.5s cubic-bezier(0, 0, 0.44, 1.18); transition: transform 0.5s cubic-bezier(0, 0, 0.44, 1.18), -webkit-transform 0.5s cubic-bezier(0, 0, 0.44, 1.18); background-position: center center; } .banner-hover-zoom:hover .banner-image { -webkit-transform: scale(1.09); transform: scale(1.09) } .banner-hover-zoom-reverse { backface-visibility: hidden; -webkit-backface-visibility: hidden } .banner-hover-zoom-reverse .banner-image { transition: -webkit-transform 0.5s cubic-bezier(0, 0, 0.44, 1.18); transition: transform 0.5s cubic-bezier(0, 0, 0.44, 1.18); transition: transform 0.5s cubic-bezier(0, 0, 0.44, 1.18), -webkit-transform 0.5s cubic-bezier(0, 0, 0.44, 1.18); -webkit-transform: scale(1.09); transform: scale(1.09) } .banner-hover-zoom-reverse:hover .banner-image { -webkit-transform: none; transform: none } .banner-hover-background,.banner-hover-border { -webkit-backface-visibility: hidden; backface-visibility: hidden } .banner-hover-background .banner-image,.banner-hover-border .banner-image { transition: -webkit-transform 1s cubic-bezier(0, 0, 0.44, 1.18); transition: transform 1s cubic-bezier(0, 0, 0.44, 1.18); transition: transform 1s cubic-bezier(0, 0, 0.44, 1.18), -webkit-transform 1s cubic-bezier(0, 0, 0.44, 1.18) } .banner-hover-background:hover .banner-image,.banner-hover-border:hover .banner-image { -webkit-transform: scale(1.09); transform: scale(1.09) } .banner-hover-background:not(.banner-background) .wrapper-content-banner,.banner-hover-border:not(.banner-border) .wrapper-content-banner { overflow: hidden; padding: 40px } .banner-hover-background:not(.banner-background) .wrapper-content-banner:after,.banner-hover-border:not(.banner-border) .wrapper-content-banner:after { content: ""; position: absolute; top: 20px; right: 20px; bottom: 20px; left: 20px; z-index: 2; opacity: 0; transition: opacity 0.35s cubic-bezier(0.05, 0.2, 0.1, 1),-webkit-transform 0.35s cubic-bezier(0.05, 0.2, 0.1, 1); transition: transform 0.35s cubic-bezier(0.05, 0.2, 0.1, 1),opacity 0.35s cubic-bezier(0.05, 0.2, 0.1, 1); transition: transform 0.35s cubic-bezier(0.05, 0.2, 0.1, 1),opacity 0.35s cubic-bezier(0.05, 0.2, 0.1, 1),-webkit-transform 0.35s cubic-bezier(0.05, 0.2, 0.1, 1); -webkit-transform: scale(0.5); transform: scale(0.5); backface-visibility: hidden; -webkit-backface-visibility: hidden } .banner-hover-background:not(.banner-background) .content-banner,.banner-hover-border:not(.banner-border) .content-banner { z-index: 4 } .banner-hover-background:not(.banner-background):hover .wrapper-content-banner:after,.banner-hover-border:not(.banner-border):hover .wrapper-content-banner:after { opacity: 1; -webkit-transform: scale(1); transform: scale(1) } .banner-hover-background.banner-border .wrapper-content-banner,.banner-hover-border.banner-background .wrapper-content-banner { padding: 30px } .banner-hover-background.banner-border .wrapper-content-banner:after,.banner-hover-border.banner-background .wrapper-content-banner:after { top: 0; right: 0; bottom: 0; left: 0 } .banner-hover-background:not(.banner-background) .wrapper-content-banner:after { background-color: rgba(0,0,0,0.9) } .banner-hover-background.color-scheme-dark:not(.banner-border) .wrapper-content-banner:after { background-color: rgba(255,255,255,0.9) } .banner-hover-border:not(.banner-border) .wrapper-content-banner:after { border: 5px solid rgba(255,255,255,0.3) } .banner-hover-border.color-scheme-dark:not(.banner-border) .wrapper-content-banner:after { border-color: rgba(0,0,0,0.1) } .banner-mask .wrapper-content-banner { background-color: rgba(0,0,0,0.3); transition: background-color 0.5s cubic-bezier(0, 0, 0.44, 1.18) } .banner-mask.color-scheme-dark .wrapper-content-banner { background-color: rgba(255,255,255,0.3) } .banner-mask.banner-hover-zoom:hover .wrapper-content-banner,.banner-mask.banner-hover-zoom-reverse:hover .wrapper-content-banner { background-color: rgba(0,0,0,0.6) } .banner-mask.banner-hover-zoom.color-scheme-dark:hover .wrapper-content-banner,.banner-mask.banner-hover-zoom-reverse.color-scheme-dark:hover .wrapper-content-banner { background-color: rgba(255,255,255,0.6) } .banner-shadow { box-shadow: 0 10px 20px -9px rgba(0,0,0,0.5) } .banner-background .wrapper-content-banner,.banner-border .wrapper-content-banner { top: 20px; right: 20px; bottom: 20px; left: 20px; overflow: hidden } .banner-background .wrapper-content-banner { background-color: rgba(0,0,0,0.8) } .banner-background.color-scheme-dark .wrapper-content-banner { background-color: rgba(255,255,255,0.8) } .banner-content-background .wrapper-content-banner { width: 100%; background-color: rgba(0,0,0,0.8); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 800px; perspective: 800px } .banner-content-background .wrapper-content-banner.wd-items-top { bottom: auto } .banner-content-background .wrapper-content-banner.wd-items-middle { top: 50%; bottom: auto; -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0) } .banner-content-background .wrapper-content-banner.wd-items-bottom { top: auto } .banner-content-background .wrapper-content-banner.wd-justify-left { right: auto } .banner-content-background .wrapper-content-banner.wd-justify-center { right: auto; left: 50%; -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0) } .banner-content-background .wrapper-content-banner.wd-justify-center.wd-items-middle { -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0) } .banner-content-background .wrapper-content-banner.wd-justify-right { left: auto } .banner-content-background.color-scheme-dark .wrapper-content-banner { background-color: rgba(255,255,255,0.8) } .banner-border .wrapper-content-banner { border: 5px solid rgba(255,255,255,0.3) } .banner-border.color-scheme-dark .wrapper-content-banner { border-color: rgba(0,0,0,0.1) } @media (min-width: 1025px) { .banner-btn-position-hover .content-banner { transition:-webkit-transform .25s ease; transition: transform .25s ease; transition: transform .25s ease, -webkit-transform .25s ease } .banner-btn-position-hover .banner-inner p:first-child:empty ~ p:last-child { margin-top: -10px; margin-bottom: 0 } .banner-btn-position-hover .banner-btn-wrapper { position: absolute; top: 100%; right: 0; left: 0; opacity: 0; transition: opacity .25s ease, -webkit-transform .25s ease; transition: opacity .25s ease, transform .25s ease; transition: opacity .25s ease, transform .25s ease, -webkit-transform .25s ease; -webkit-transform: translateY(15px); transform: translateY(15px) } .banner-btn-position-hover:hover .content-banner { transition: -webkit-transform .3s ease; transition: transform .3s ease; transition: transform .3s ease, -webkit-transform .3s ease } .banner-btn-position-hover:hover .banner-btn-wrapper { opacity: 1; transition: opacity .4s ease, -webkit-transform .4s ease; transition: opacity .4s ease, transform .4s ease; transition: opacity .4s ease, transform .4s ease, -webkit-transform .4s ease; -webkit-transform: translateY(0); transform: translateY(0) } .banner-btn-position-hover.banner-btn-size-extra-small:hover .wrapper-content-banner.wd-items-middle>div { -webkit-transform: translateY(-21px); transform: translateY(-21px) } .banner-btn-position-hover.banner-btn-size-extra-small:hover .wrapper-content-banner.wd-items-bottom>div { -webkit-transform: translateY(-43px); transform: translateY(-43px) } .banner-btn-position-hover.banner-btn-size-small:hover .wrapper-content-banner.wd-items-middle>div { -webkit-transform: translateY(-25px); transform: translateY(-25px) } .banner-btn-position-hover.banner-btn-size-small:hover .wrapper-content-banner.wd-items-bottom>div { -webkit-transform: translateY(-51px); transform: translateY(-51px) } .banner-btn-position-hover.banner-btn-size-default:hover .wrapper-content-banner.wd-items-middle>div { -webkit-transform: translateY(-28px); transform: translateY(-28px) } .banner-btn-position-hover.banner-btn-size-default:hover .wrapper-content-banner.wd-items-bottom>div { -webkit-transform: translateY(-57px); transform: translateY(-57px) } .banner-btn-position-hover.banner-btn-size-large:hover .wrapper-content-banner.wd-items-middle>div { -webkit-transform: translateY(-31px); transform: translateY(-31px) } .banner-btn-position-hover.banner-btn-size-large:hover .wrapper-content-banner.wd-items-bottom>div { -webkit-transform: translateY(-63px); transform: translateY(-63px) } .banner-btn-position-hover.banner-btn-size-extra-large:hover .wrapper-content-banner.wd-items-middle>div { -webkit-transform: translateY(-35px); transform: translateY(-35px) } .banner-btn-position-hover.banner-btn-size-extra-large:hover .wrapper-content-banner.wd-items-bottom>div { -webkit-transform: translateY(-71px); transform: translateY(-71px) } .banner-btn-position-hover.banner-btn-style-link:hover .wrapper-content-banner.wd-items-middle>div { -webkit-transform: translateY(-19px); transform: translateY(-19px) } .banner-btn-position-hover.banner-btn-style-link:hover .wrapper-content-banner.wd-items-bottom>div { -webkit-transform: translateY(-39px); transform: translateY(-39px) } } @media (max-width: 1024px) { .banner-subtitle.wd-fontsize-s,.banner-subtitle.wd-fontsize-m { font-size:14px } .banner-title.wd-fontsize-xl,.banner-title.wd-font-size-xxl { font-size: 22px } } @media (max-width: 768px) { .banner-btn-position-hover .banner-btn-wrapper { display:none } .banner-btn-wrapper .btn-size-default,.banner-btn-wrapper .btn-size-large,.banner-btn-wrapper .btn-size-extra-large { padding: 10px 14px; font-size: 12px; line-height: 16px } .banner-btn-wrapper .btn-style-link { padding: 0 } .banner-hide-btn-mobile { display: none !important } } @media (max-width: 767px) { .promo-banner .banner-subtitle { font-size:3vw; } .promo-banner .banner-title { font-size: 5vw } } @media (min-width: 769px) and (max-width: 1024px) { .banner-hide-btn-tablet { display:none !important } } .promo-banner .content-banner>div:first-child { margin-top: 0; }