.slide-banner { height: 0px; align-content: center; overflow: hidden; background: #dcff00; color: #000; text-align: center; font-size: 13px; font-weight: 500; transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1), top 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.3s ease-out; position: relative; z-index: 12; } .slide-banner.banner-top { position: relative; } .slide-banner.banner-bottom { position: fixed; bottom: 0; left: 0; right: 0; z-index: 12; height: 0; } .slide-banner.banner-bottom.show { height: 45px; } .banner-placeholder { height: 0; } .banner-placeholder.active { height: 0; } .banner-placeholder.banner-bottom { height: 0 !important; } .slide-banner.show { height: 45px; } .slide-banner a { display: inline-block; line-height: 45px; height: 45px; color: inherit; text-decoration: none; width: 100%; transition: background-color 0.3s ease; } .slide-banner a:hover { background-color: rgba(0, 0, 0, 0.1); } .slide-banner.banner-top.show.banner-sticky { position: relative; top: 0; left: 0; right: 0; z-index: 12; } .slide-banner.banner-top.show.banner-sticky.entering { transform: translateY(-100%); } .slide-banner.banner-top.show.banner-sticky-mobile { position: relative; top: 0; left: 0; right: 0; z-index: 12; } .slide-banner.banner-top.show.banner-sticky-mobile.entering { transform: translateY(-100%); } .slide-banner.banner-bottom.show { position: fixed; bottom: 0; left: 0; right: 0; z-index: 12; } @keyframes slideDownFromTop { 0% { transform: translateY(-100%); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(0); opacity: 1; } } .slide-banner.banner-top.banner-hiding { opacity: 0 !important; transform: translateY(-20px); } .vesna_sticky-header.active { transform: translateY(0); } body.has-bottom-banner { padding-bottom: 45px; } .banner-close { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); background: none; border: none; font-size: 18px; cursor: pointer; color: #000; width: 25px; height: 25px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: background-color 0.3s ease; min-height: auto !important; padding: unset !important; opacity: 1; visibility: visible; } .banner-close:hover { background-color: rgba(0, 0, 0, 0.1); } @media (max-width: 991px) { .slide-banner { overflow: hidden; } .slide-banner.banner-top { position: relative; } .slide-banner.banner-bottom { position: fixed; bottom: 0; } .banner-close { opacity: 0; visibility: hidden; } .slide-banner .marquee-wrapper { align-items: center; -webkit-backface-visibility: hidden; backface-visibility: hidden; display: inline-flex; flex-shrink: 0; flex-wrap: nowrap; height: 100%; justify-content: center; min-width: 100%; white-space: nowrap; will-change: transform; animation: marquee-ltr 50s linear infinite; } .slide-banner .marquee-content { padding-right: 50px; flex-shrink: 0; } @keyframes marquee-ltr { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } .slide-banner:hover .marquee-wrapper { animation-play-state: paused; } } @media (min-width: 992px) { .slide-banner .marquee-wrapper { animation: none; display: block; width: 100%; } .slide-banner .marquee-content { padding-right: 0; } .slide-banner.banner-bottom { position: fixed; bottom: 0; } }