/** Slide Top  **/

.wf-slidetop {
  display: block;
  position: absolute;
  z-index: 50;
  background-color: rgba(240,224,71, 0.75);
  margin-left: auto;
  margin-right: auto;
  top:65px;
  
  width: var(--wf-page-maxwidth) !important;
  max-width:100% !important;
  
}

.wf-slidetop .slidetop-content {
  display: none;
  height: auto;
}

/* Open State */
.wf-slidetop.wf-slidetop-open .slidetop-content {
  display: block;
}

/* Button */
.wf-slidetop button.slidetop-toggle {
  width: 45px;
  height: 45px;

  position: absolute;
  right: 0;
  bottom: -45px;

  border: 0;
  border-top: 45px solid var(--wf-color1);
  border-left: 45px solid transparent;

  background: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;

  text-align: center;

  appearance: none;
  -webkit-appearance: none;
}

/* Icon */
.wf-slidetop button.slidetop-toggle::after {
  font-family: 'iconfont';
  content: "\f067";

  position: absolute;
  top: -34px;
  left: -16px;

  color: var(--wf-color4);
  font-size: 15px;
  line-height: 1;
}

/* Icon offen */
.wf-slidetop.active button.slidetop-toggle::after,
.wf-slidetop.wf-slidetop-open button.slidetop-toggle::after {
  content: "\f068";
}

/* Fokus sichtbar */
.wf-slidetop button.slidetop-toggle:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.wf-slidetop-body {
  color: var(--wf-color3);	
  font-size: 16px;
  font-weight:500;
  line-height:1.4em;
  text-align:center;
  letter-spacing:0.03em;

}

.wf-slidetop-body strong {
  color: var(--wf-color4) !important;

}

@media (min-width:992px) {	
.wf-slidetop-body {
  font-size: 18px;
  letter-spacing:0.03em;

}

}

@media (min-width:1400px) {	
.wf-slidetop {
  top:91px;
}
	
}

.wf-slide-hidden {
  width: 100%;
  height: auto;
  overflow: hidden;
}

.wf-slide-in {
  position: relative;
  animation: wf-slideInFromRight 3.5s ease-out forwards;
}

@keyframes wf-slideInFromRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}