body .yes-is-sticky {
  position: fixed;
  z-index: 9999;
  transform: translateY(0);
  top: 0;
  opacity: 1;
  transition: transform 0.4s ease, opacity 0.4s ease
}

body .yes-is-sticky.sticel-hide-on-scroll {
  transform: translateY(-100%);
  opacity: 0
}

@media screen and (min-width: 768px) and (max-width: 1024px)  {
  body .yes-is-sticky {  background-color: rgb(8, 95, 164);}
}

.sticel-has-shadow {
  box-shadow: 0 4px 10px rgb(0 0 0 / .2);
  transition: box-shadow 0.3s ease
}

.sticel-fade-in {
  animation: fadeInSticky 0.4s ease forwards
}

@keyframes fadeInSticky {
  0% {
    opacity: 0;
    transform: translateY(-10px)
  }
  100% {
    opacity: 1;
    transform: translateY(0)
  }
}

.sticel-glow {
  box-shadow: 0 0 15px rgb(0 174 255 / .6);
  transition: box-shadow 0.4s ease
}

.sticel-logo-shrink {
  transition: height 0.3s ease;
  display: block
}

@keyframes fadeIn {
  from {
    opacity: 0
  }
  to {
    opacity: 1
  }
}

@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0
  }
  to {
    transform: translateY(0);
    opacity: 1
  }
}

@keyframes slideDown {
  from {
    transform: translateY(-20px);
    opacity: 0
  }
  to {
    transform: translateY(0);
    opacity: 1
  }
}

@keyframes zoomIn {
  from {
    transform: scale(.9);
    opacity: 0
  }
  to {
    transform: scale(1);
    opacity: 1
  }
}

@keyframes flipIn {
  from {
    transform: rotateX(90deg);
    opacity: 0
  }
  to {
    transform: rotateX(0deg);
    opacity: 1
  }
}

@keyframes rotateIn {
  from {
    transform: rotate(-200deg);
    opacity: 0
  }
  to {
    transform: rotate(0);
    opacity: 1
  }
}

@keyframes bounceIn {
  0% {
    transform: scale(.3);
    opacity: 0
  }
  50% {
    transform: scale(1.1);
    opacity: 1
  }
  70% {
    transform: scale(.9)
  }
  100% {
    transform: scale(1)
  }
}

@keyframes slideLeft {
  from {
    transform: translateX(30px);
    opacity: 0
  }
  to {
    transform: translateX(0);
    opacity: 1
  }
}

@keyframes slideRight {
  from {
    transform: translateX(-30px);
    opacity: 0
  }
  to {
    transform: translateX(0);
    opacity: 1
  }
}

@keyframes fadeInUp {
  from {
    transform: translateY(20px);
    opacity: 0
  }
  to {
    transform: translateY(0);
    opacity: 1
  }
}

@keyframes fadeInDown {
  from {
    transform: translateY(-20px);
    opacity: 0
  }
  to {
    transform: translateY(0);
    opacity: 1
  }
}

@keyframes fadeInLeft {
  from {
    transform: translateX(-20px);
    opacity: 0
  }
  to {
    transform: translateX(0);
    opacity: 1
  }
}

@keyframes fadeInRight {
  from {
    transform: translateX(20px);
    opacity: 0
  }
  to {
    transform: translateX(0);
    opacity: 1
  }
}

@keyframes zoomOut {
  from {
    transform: scale(1.2);
    opacity: 0
  }
  to {
    transform: scale(1);
    opacity: 1
  }
}

.sticel-anim-fade-in {
  animation: fadeIn 0.4s ease forwards
}

.sticel-anim-slide-up {
  animation: slideUp 0.4s ease forwards
}

.sticel-anim-slide-down {
  animation: slideDown 0.4s ease forwards
}

.sticel-anim-zoom-in {
  animation: zoomIn 0.4s ease forwards
}

.sticel-anim-flip-in {
  animation: flipIn 0.4s ease forwards
}

.sticel-anim-rotate-in {
  animation: rotateIn 0.6s ease forwards
}

.sticel-anim-bounce-in {
  animation: bounceIn 0.6s ease forwards
}

.sticel-anim-slide-left {
  animation: slideLeft 0.5s ease forwards
}

.sticel-anim-slide-right {
  animation: slideRight 0.5s ease forwards
}

.sticel-anim-fade-in-up {
  animation: fadeInUp 0.5s ease forwards
}

.sticel-anim-fade-in-down {
  animation: fadeInDown 0.5s ease forwards
}

.sticel-anim-fade-in-left {
  animation: fadeInLeft 0.5s ease forwards
}

.sticel-anim-fade-in-right {
  animation: fadeInRight 0.5s ease forwards
}

.sticel-anim-zoom-out {
  animation: zoomOut 0.5s ease forwards
}

.sticky-back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 999;
  padding: 12px 14px;
  border-radius: 20%;
  cursor: pointer;
  transition: all 0.3s ease;
  display: none;
  align-items: center
}

.sticky-back-to-top i {
  font-size: 18px
}

.sticky-back-icon {
  font-size: 20px;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center
}

.sticky-logo-wrapper {
  position: relative;
  display: inline-block
}

.sticky-change-logo-old,
.sticky-change-logo-new {
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out
}

.sticky-change-logo-old {
  opacity: 1;
  visibility: visible;
  position: relative
}

.sticky-change-logo-new {
  opacity: 0;
  visibility: hidden
}