.topppa-sticky-section-yes {
width: 100%;
border-color: transparent;
-webkit-transition: visibility 0s linear !important;
-o-transition: visibility 0s linear !important;
transition: visibility 0s linear !important;
}
.topppa-sticky-active {
position: fixed !important;
}
.topppa-sticky-replace-header-yes + div,
.topppa-sticky-replace-header-yes + section,
.topppa-sticky-replace-header-yes + header {
position: fixed;
width: 100%;
top: -1000px;
}
.topppa-section-full-height {
height: 100% !important;
background-color: transparent !important;
}
.topppa-sticky-header {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 9999 !important;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.topppa-visibility-hidden {
visibility: hidden !important;
opacity: 0 !important;
}
.topppa-hidden-header {
position: fixed !important;
display: block !important;
width: 100% !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
z-index: 9999 !important;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.topppa-hidden-header-flex {
position: fixed !important;
display: -webkit-box !important;
display: -ms-flexbox !important;
display: flex !important;
width: 100% !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
z-index: 9999 !important;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
} .topppa-sticky-section-yes[data-topppa-replace-header=yes] + .elementor-element,
.topppa-sticky-section-yes[data-topppa-replace-header=yes] + .e-con,
.topppa-sticky-section-yes[data-topppa-replace-header=yes] + [data-element_type=container] {
display: none !important;
} .elementor-editor-active .topppa-sticky-section-yes[data-topppa-replace-header=yes] + .elementor-element,
.elementor-editor-active .topppa-sticky-section-yes[data-topppa-replace-header=yes] + .e-con,
.elementor-editor-active .topppa-sticky-section-yes[data-topppa-replace-header=yes] + [data-element_type=container] {
display: none !important;
} body.elementor-editor-active .topppa-sticky-section-yes[data-topppa-replace-header=yes] + .elementor-element,
body.elementor-editor-active .topppa-sticky-section-yes[data-topppa-replace-header=yes] + .e-con,
body.elementor-editor-active .topppa-sticky-section-yes[data-topppa-replace-header=yes] + [data-element_type=container] {
display: none !important;
}
.topppa-none-out {
display: none;
}
.topppa-fade-in {
-webkit-animation-name: topppa-popup-animation-fade;
animation-name: topppa-popup-animation-fade;
-webkit-animation-duration: var(--topppa-animation-duration, 500ms);
animation-duration: var(--topppa-animation-duration, 500ms);
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.topppa-fade-out {
-webkit-animation-name: topppa-popup-animation-fade-out;
animation-name: topppa-popup-animation-fade-out;
-webkit-animation-duration: var(--topppa-animation-duration, 500ms);
animation-duration: var(--topppa-animation-duration, 500ms);
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.topppa-slide-in {
opacity: 0;
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
-webkit-animation-name: topppa-sticky-slide-in;
animation-name: topppa-sticky-slide-in;
-webkit-animation-duration: var(--topppa-animation-duration, 500ms);
animation-duration: var(--topppa-animation-duration, 500ms);
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.topppa-slide-out {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
-webkit-animation-name: topppa-sticky-slide-out;
animation-name: topppa-sticky-slide-out;
-webkit-animation-duration: var(--topppa-animation-duration, 500ms);
animation-duration: var(--topppa-animation-duration, 500ms);
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.topppa-scale-in {
opacity: 0;
-webkit-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);
-webkit-animation-name: topppa-sticky-scale-in;
animation-name: topppa-sticky-scale-in;
-webkit-animation-duration: var(--topppa-animation-duration, 500ms);
animation-duration: var(--topppa-animation-duration, 500ms);
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.topppa-scale-out {
opacity: 1;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-webkit-animation-name: topppa-sticky-scale-out;
animation-name: topppa-sticky-scale-out;
-webkit-animation-duration: var(--topppa-animation-duration, 500ms);
animation-duration: var(--topppa-animation-duration, 500ms);
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.topppa-bounce-in {
opacity: 0;
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
-webkit-animation-name: topppa-sticky-bounce-in;
animation-name: topppa-sticky-bounce-in;
-webkit-animation-duration: var(--topppa-animation-duration, 500ms);
animation-duration: var(--topppa-animation-duration, 500ms);
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.topppa-bounce-out {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
-webkit-animation-name: topppa-sticky-bounce-out;
animation-name: topppa-sticky-bounce-out;
-webkit-animation-duration: var(--topppa-animation-duration, 500ms);
animation-duration: var(--topppa-animation-duration, 500ms);
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
@-webkit-keyframes topppa-sticky-slide-in {
from {
opacity: 0;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
to {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes topppa-sticky-slide-in {
from {
opacity: 0;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
to {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@-webkit-keyframes topppa-sticky-slide-out {
from {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
to {
opacity: 0;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
}
@keyframes topppa-sticky-slide-out {
from {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
to {
opacity: 0;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
}
@-webkit-keyframes topppa-popup-animation-fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes topppa-popup-animation-fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-webkit-keyframes topppa-popup-animation-fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes topppa-popup-animation-fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@-webkit-keyframes topppa-sticky-scale-in {
from {
opacity: 0;
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
to {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes topppa-sticky-scale-in {
from {
opacity: 0;
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
to {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
@-webkit-keyframes topppa-sticky-scale-out {
from {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
to {
opacity: 0;
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
}
@keyframes topppa-sticky-scale-out {
from {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
to {
opacity: 0;
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
}
@-webkit-keyframes topppa-sticky-bounce-in {
0% {
opacity: 0;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
60% {
opacity: 1;
-webkit-transform: translateY(20%);
transform: translateY(20%);
}
80% {
-webkit-transform: translateY(-10%);
transform: translateY(-10%);
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes topppa-sticky-bounce-in {
0% {
opacity: 0;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
60% {
opacity: 1;
-webkit-transform: translateY(20%);
transform: translateY(20%);
}
80% {
-webkit-transform: translateY(-10%);
transform: translateY(-10%);
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@-webkit-keyframes topppa-sticky-bounce-out {
0% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
20% {
-webkit-transform: translateY(-10%);
transform: translateY(-10%);
}
40% {
-webkit-transform: translateY(20%);
transform: translateY(20%);
}
100% {
opacity: 0;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
}
@keyframes topppa-sticky-bounce-out {
0% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
20% {
-webkit-transform: translateY(-10%);
transform: translateY(-10%);
}
40% {
-webkit-transform: translateY(20%);
transform: translateY(20%);
}
100% {
opacity: 0;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
}
@keyframes stickySlideTop {
0% {
opacity: 0;
transform: translateY(-100%);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes stickySlideBottom {
0% {
opacity: 0;
transform: translateY(100%);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes stickyFade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}