@charset "UTF-8";
/* ========================================================================
   Component: Animation
 ========================================================================== */
@import url("https://use.typekit.net/tzk8pgn.css");
[class*=uk-animation-] {
  animation-duration: 0.7s;
  animation-timing-function: ease-out;
  animation-fill-mode: both;
}

/* Animations
 ========================================================================== */
/*
 * Fade
 */
.uk-animation-fade {
  animation-name: uk-fade;
  animation-duration: 0.8s;
  animation-timing-function: linear;
}

/*
 * Scale
 */
.uk-animation-scale-up {
  animation-name: uk-fade-scale-02;
}

.uk-animation-scale-down {
  animation-name: uk-fade-scale-18;
}

/*
 * Slide
 */
.uk-animation-slide-top {
  animation-name: uk-fade-top;
}

.uk-animation-slide-bottom {
  animation-name: uk-fade-bottom;
}

.uk-animation-slide-left {
  animation-name: uk-fade-left;
}

.uk-animation-slide-right {
  animation-name: uk-fade-right;
}

/*
 * Slide Small
 */
.uk-animation-slide-top-small {
  animation-name: uk-fade-top-small;
}

.uk-animation-slide-bottom-small {
  animation-name: uk-fade-bottom-small;
}

.uk-animation-slide-left-small {
  animation-name: uk-fade-left-small;
}

.uk-animation-slide-right-small {
  animation-name: uk-fade-right-small;
}

/*
 * Slide Medium
 */
.uk-animation-slide-top-medium {
  animation-name: uk-fade-top-medium;
}

.uk-animation-slide-bottom-medium {
  animation-name: uk-fade-bottom-medium;
}

.uk-animation-slide-left-medium {
  animation-name: uk-fade-left-medium;
}

.uk-animation-slide-right-medium {
  animation-name: uk-fade-right-medium;
}

/*
 * Kenburns
 */
.uk-animation-kenburns {
  animation-name: uk-scale-kenburns;
  animation-duration: 15s;
}

/*
 * Shake
 */
.uk-animation-shake {
  animation-name: uk-shake;
}

/*
 * SVG Stroke
 * The `--uk-animation-stroke` custom property contains the longest path length.
 * Set it manually or use `uk-svg="stroke-animation: true"` to set it automatically.
 * All strokes are animated by the same pace and doesn't end simultaneously.
 * To end simultaneously, `pathLength="1"` could be used, but it's not working in Safari yet.
 */
.uk-animation-stroke {
  animation-name: uk-stroke;
  stroke-dasharray: var(--uk-animation-stroke);
  animation-duration: 2s;
}

/* Direction modifier
 ========================================================================== */
.uk-animation-reverse {
  animation-direction: reverse;
  animation-timing-function: ease-in;
}

/* Duration modifier
 ========================================================================== */
.uk-animation-fast {
  animation-duration: 0.1s;
}

/* Toggle (Hover + Focus)
========================================================================== */
/*
 * The toggle is triggered on touch devices using `:focus` and tabindex
 */
.uk-animation-toggle:not(:hover):not(:focus) [class*=uk-animation-] {
  animation-name: none;
}

/*
 * 1. Prevent tab highlighting on iOS.
 */
.uk-animation-toggle {
  /* 1 */
  -webkit-tap-highlight-color: transparent;
}

/*
 * Remove outline for `tabindex`
 */
.uk-animation-toggle:focus {
  outline: none;
}

/* Keyframes used by animation classes
 ========================================================================== */
/*
 * Fade
 */
@keyframes uk-fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/*
 * Slide Top
 */
@keyframes uk-fade-top {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/*
 * Slide Bottom
 */
@keyframes uk-fade-bottom {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/*
 * Slide Left
 */
@keyframes uk-fade-left {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
/*
 * Slide Right
 */
@keyframes uk-fade-right {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
/*
 * Slide Top Small
 */
@keyframes uk-fade-top-small {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/*
 * Slide Bottom Small
 */
@keyframes uk-fade-bottom-small {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/*
 * Slide Left Small
 */
@keyframes uk-fade-left-small {
  0% {
    opacity: 0;
    transform: translateX(-10px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
/*
 * Slide Right Small
 */
@keyframes uk-fade-right-small {
  0% {
    opacity: 0;
    transform: translateX(10px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
/*
 * Slide Top Medium
 */
@keyframes uk-fade-top-medium {
  0% {
    opacity: 0;
    transform: translateY(-90px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/*
 * Slide Bottom Medium
 */
@keyframes uk-fade-bottom-medium {
  0% {
    opacity: 0;
    transform: translateY(90px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/*
 * Slide Left Medium
 */
@keyframes uk-fade-left-medium {
  0% {
    opacity: 0;
    transform: translateX(-90px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
/*
 * Slide Right Medium
 */
@keyframes uk-fade-right-medium {
  0% {
    opacity: 0;
    transform: translateX(90px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
/*
 * Scale Up
 */
@keyframes uk-fade-scale-02 {
  0% {
    opacity: 0;
    transform: scale(0.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
/*
 * Scale Down
 */
@keyframes uk-fade-scale-18 {
  0% {
    opacity: 0;
    transform: scale(1.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
/*
 * Kenburns
 */
@keyframes uk-scale-kenburns {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.2);
  }
}
/*
 * Shake
 */
@keyframes uk-shake {
  0%, 100% {
    transform: translateX(0);
  }
  10% {
    transform: translateX(-9px);
  }
  20% {
    transform: translateX(8px);
  }
  30% {
    transform: translateX(-7px);
  }
  40% {
    transform: translateX(6px);
  }
  50% {
    transform: translateX(-5px);
  }
  60% {
    transform: translateX(4px);
  }
  70% {
    transform: translateX(-3px);
  }
  80% {
    transform: translateX(2px);
  }
  90% {
    transform: translateX(-1px);
  }
}
/*
 * Stroke
 */
@keyframes uk-stroke {
  0% {
    stroke-dashoffset: var(--uk-animation-stroke);
  }
  100% {
    stroke-dashoffset: 0;
  }
}
/* ========================================================================
   Component: Slideshow
 ========================================================================== */
/*
 * 1. Prevent tab highlighting on iOS.
 */
.uk-slideshow {
  /* 1 */
  -webkit-tap-highlight-color: transparent;
}

/* Items
 ========================================================================== */
/*
 * 1. Create position and stacking context
 * 2. Reset list
 * 3. Clip child elements
 * 4. Prevent displaying the callout information on iOS.
 */
.uk-slideshow-items {
  /* 1 */
  position: relative;
  z-index: 0;
  /* 2 */
  margin: 0;
  padding: 0;
  list-style: none;
  /* 3 */
  overflow: hidden;
  /* 4 */
  -webkit-touch-callout: none;
}

/* Item
 ========================================================================== */
/*
 * 1. Position items above each other
 * 2. Take the full width
 * 3. Clip child elements, e.g. for `uk-cover`
 * 4. Optimize animation
 * 5. Disable horizontal panning gestures in IE11 and Edge
 * 6. Suppress outline on focus
 */
.uk-slideshow-items > * {
  /* 1 */
  position: absolute;
  top: 0;
  left: 0;
  /* 2 */
  right: 0;
  bottom: 0;
  /* 3 */
  overflow: hidden;
  /* 4 */
  will-change: transform, opacity;
  /* 5 */
  touch-action: pan-y;
}

/* 6 */
.uk-slideshow-items > :focus {
  outline: none;
}

/*
 * Hide not active items
 */
.uk-slideshow-items > :not(.uk-active) {
  display: none;
}

/* ========================================================================
   Component: Slidenav
 ========================================================================== */
/*
 * Adopts `uk-icon`
 */
.uk-slidenav {
  padding: 5px 10px;
  color: rgba(102, 102, 102, 0.5);
  transition: color 0.1s ease-in-out;
}

/* Hover + Focus */
.uk-slidenav:hover,
.uk-slidenav:focus {
  color: rgba(102, 102, 102, 0.9);
  outline: none;
}

/* OnClick */
.uk-slidenav:active {
  color: rgba(102, 102, 102, 0.5);
}

/* Icon modifier
 ========================================================================== */
/*
 * Previous
 */
/*
 * Next
 */
/* Size modifier
 ========================================================================== */
.uk-slidenav-large {
  padding: 10px 10px;
}

/* Container
 ========================================================================== */
.uk-slidenav-container {
  display: flex;
}

/* ========================================================================
   Component: Position
 ========================================================================== */
/* Directions
 ========================================================================== */
/*
 * 1. Prevent content overflow if `max-width: 100%` is used inside position container.
 */
[class*=uk-position-top],
[class*=uk-position-bottom],
[class*=uk-position-left],
[class*=uk-position-right],
[class*=uk-position-center] {
  position: absolute !important;
  /* 1 */
  max-width: 100%;
}

/* Edges
 ========================================================================== */
/* Don't use `width: 100%` because it is wrong if the parent has padding. */
.uk-position-top {
  top: 0;
  left: 0;
  right: 0;
}

.uk-position-bottom {
  bottom: 0;
  left: 0;
  right: 0;
}

.uk-position-left {
  top: 0;
  bottom: 0;
  left: 0;
}

.uk-position-right {
  top: 0;
  bottom: 0;
  right: 0;
}

/* Corners
 ========================================================================== */
.uk-position-top-left {
  top: 0;
  left: 0;
}

.uk-position-top-right {
  top: 0;
  right: 0;
}

.uk-position-bottom-left {
  bottom: 0;
  left: 0;
}

.uk-position-bottom-right {
  bottom: 0;
  right: 0;
}

/*
 * Center
 * 1. Fix text wrapping if content is larger than 50% of the container.
 */
.uk-position-center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 1 */
  width: max-content;
  max-width: 100%;
  box-sizing: border-box;
}

/* Vertical */
[class*=uk-position-center-left],
[class*=uk-position-center-right] {
  top: 50%;
  transform: translateY(-50%);
}

.uk-position-center-left {
  left: 0;
}

.uk-position-center-right {
  right: 0;
}

.uk-position-center-left-out {
  right: 100%;
  width: max-content;
}

.uk-position-center-right-out {
  left: 100%;
  width: max-content;
}

/* Horizontal */
.uk-position-top-center,
.uk-position-bottom-center {
  left: 50%;
  transform: translateX(-50%);
  /* 1 */
  width: max-content;
  max-width: 100%;
  box-sizing: border-box;
}

.uk-position-top-center {
  top: 0;
}

.uk-position-bottom-center {
  bottom: 0;
}

/* Cover
 ========================================================================== */
.uk-position-cover {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

/* Utility
 ========================================================================== */
.uk-position-relative {
  position: relative !important;
}

.uk-position-absolute {
  position: absolute !important;
}

.uk-position-fixed {
  position: fixed !important;
}

.uk-position-z-index {
  z-index: 1;
}

/* Margin modifier
 ========================================================================== */
/*
 * Small
 */
.uk-position-small {
  max-width: calc(100% - (15px * 2));
  margin: 15px;
}

.uk-position-small.uk-position-center {
  transform: translate(-50%, -50%) translate(-15px, -15px);
}

.uk-position-small[class*=uk-position-center-left],
.uk-position-small[class*=uk-position-center-right] {
  transform: translateY(-50%) translateY(-15px);
}

.uk-position-small.uk-position-top-center,
.uk-position-small.uk-position-bottom-center {
  transform: translateX(-50%) translateX(-15px);
}

/*
 * Medium
 */
.uk-position-medium {
  max-width: calc(100% - (30px * 2));
  margin: 30px;
}

.uk-position-medium.uk-position-center {
  transform: translate(-50%, -50%) translate(-30px, -30px);
}

.uk-position-medium[class*=uk-position-center-left],
.uk-position-medium[class*=uk-position-center-right] {
  transform: translateY(-50%) translateY(-30px);
}

.uk-position-medium.uk-position-top-center,
.uk-position-medium.uk-position-bottom-center {
  transform: translateX(-50%) translateX(-30px);
}

/*
 * Large
 */
.uk-position-large {
  max-width: calc(100% - (30px * 2));
  margin: 30px;
}

.uk-position-large.uk-position-center {
  transform: translate(-50%, -50%) translate(-30px, -30px);
}

.uk-position-large[class*=uk-position-center-left],
.uk-position-large[class*=uk-position-center-right] {
  transform: translateY(-50%) translateY(-30px);
}

.uk-position-large.uk-position-top-center,
.uk-position-large.uk-position-bottom-center {
  transform: translateX(-50%) translateX(-30px);
}

/* Desktop and bigger */
@media (min-width: 1200px) {
  .uk-position-large {
    max-width: calc(100% - (50px * 2));
    margin: 50px;
  }
  .uk-position-large.uk-position-center {
    transform: translate(-50%, -50%) translate(-50px, -50px);
  }
  .uk-position-large[class*=uk-position-center-left],
  .uk-position-large[class*=uk-position-center-right] {
    transform: translateY(-50%) translateY(-50px);
  }
  .uk-position-large.uk-position-top-center,
  .uk-position-large.uk-position-bottom-center {
    transform: translateX(-50%) translateX(-50px);
  }
}
/*
// Base
@import "variables.scss";
@import "mixin.scss";
@import "base.scss";


// Elements
@import "link.scss";
@import "heading.scss";
@import "divider.scss";
@import "list.scss";
@import "description-list.scss";
@import "table.scss";
@import "icon.scss";
@import "form-range.scss";
@import "form.scss"; // After: Icon, Form Range
@import "button.scss";
@import "progress.scss";

// Layout
@import "section.scss";
@import "container.scss";
@import "tile.scss";
@import "card.scss";

// Common
@import "close.scss"; // After: Icon
@import "spinner.scss"; // After: Icon
@import "totop.scss"; // After: Icon
@import "marker.scss"; // After: Icon
@import "alert.scss"; // After: Close
@import "placeholder.scss";
@import "badge.scss";
@import "label.scss";
@import "overlay.scss"; // After: Icon
@import "article.scss";
@import "comment.scss";
@import "search.scss"; // After: Icon


// JavaScript
@import "accordion.scss";
@import "drop.scss"; // After: Card
@import "dropdown.scss"; // After: Card
@import "modal.scss"; // After: Close
@import "slideshow.scss";
@import "slider.scss";
@import "sticky.scss";
@import "offcanvas.scss";
@import "switcher.scss";
@import "leader.scss";
@import "notification.scss";
@import "tooltip.scss";
@import "sortable.scss";
@import "countdown.scss";
// Scrollspy
// Toggle
// Scroll

@import "grid.scss";

// Navs
@import "nav.scss";
@import "navbar.scss"; // After: Card, Grid, Nav, Icon, Search
@import "subnav.scss";
@import "breadcrumb.scss";
@import "pagination.scss";
@import "tab.scss";
@import "slidenav.scss"; // After: Icon
@import "dotnav.scss";
@import "thumbnav.scss";
@import "iconnav.scss";

@import "lightbox.scss"; // After: Close, Slidenav

// Utilities
@import "animation.scss";
@import "width.scss";
@import "height.scss";
@import "text.scss";
@import "column.scss";
@import "cover.scss";
@import "background.scss";
@import "align.scss";
@import "svg.scss";
@import "utility.scss";
@import "flex.scss"; // After: Utility
@import "margin.scss";
@import "padding.scss";
@import "position.scss";
@import "transition.scss";
@import "visibility.scss";
@import "inverse.scss";

// Need to be loaded last
@import "print.scss";
*/
.margin_bottom {
  margin-bottom: 15px;
}
@media screen and (min-width: 507px) {
  .margin_bottom {
    margin-bottom: 30px;
  }
}
@media screen and (min-width: 1024px) {
  .margin_bottom {
    margin-bottom: 50px;
  }
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0px;
}
.grid iframe {
  height: 100%;
}
@media screen and (min-width: 768px) {
  .grid {
    gap: 30px 30px;
  }
}

.span_2 {
  grid-column: span 2;
}

.span_3 {
  grid-column: span 3;
}

.span_4 {
  grid-column: span 4;
}

.span_5 {
  grid-column: span 5;
}

.span_6 {
  grid-column: span 6;
}

.span_7 {
  grid-column: span 7;
}

.span_8 {
  grid-column: span 8;
}

.span_9 {
  grid-column: span 9;
}

.span_10 {
  grid-column: span 10;
}

.span_11 {
  grid-column: span 11;
}

.span_12 {
  grid-column: span 12;
}

@media screen and (max-width: 768px) {
  .m_span_8 {
    grid-column: span 8;
  }
  .m_span_12 {
    grid-column: span 12;
  }
  .m_reorder {
    order: -1;
  }
}
@media screen and (max-width: 507px) {
  .sm_span_8 {
    grid-column: span 8;
  }
  .sm_span_12 {
    grid-column: span 12;
  }
}
@media screen and (max-width: 375px) {
  .s_span_8 {
    grid-column: span 8;
  }
  .s_span_12 {
    grid-column: span 12;
  }
}
article {
  scroll-margin: 1rem;
  margin-bottom: 80px;
}
@media screen and (min-width: 768px) {
  article {
    margin-bottom: 120px;
  }
}
@media screen and (min-width: 1024px) {
  article {
    margin-bottom: 160px;
  }
}
article .container_tags {
  display: inline-block;
  margin-bottom: 20px;
}
article .container_tags span {
  font-size: 0.7rem;
  /*
  @media screen and (max-width: $m) {
    font-size: 0.7rem;
  }
  */
  display: inline-block;
  color: #222;
  line-height: 0 !important;
}
article .container_tags span::after {
  content: "  /  ";
}
article .container_tags span:last-of-type::after {
  content: "" !important;
}
article .cont_project_description {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}
@media screen and (max-width: 768px) {
  article .cont_project_description {
    flex-direction: column-reverse;
  }
}
article .cont_slide_counter {
  margin-bottom: -5px !important;
}
@media screen and (max-width: 768px) {
  article .cont_slide_counter {
    text-align: right !important;
    margin-bottom: 0.5rem;
  }
}
article .badge_slide_counter {
  background: rgba(34, 34, 34, 0.06);
  font-size: 0.7rem;
  /*
  @media screen and (max-width: $m) {
    font-size: 0.7rem;
  }
  */
  display: inline-block;
  border-radius: 30px;
  padding: 4px 8px 6px 8px;
  line-height: 1;
}
@media screen and (max-width: 768px) {
  article .badge_slide_counter {
    text-align: right !important;
    padding: 5px 0px 15px 0px;
    background: none;
  }
}
@media screen and (min-width: 768px) {
  article .badge_slide_counter {
    box-shadow: 5px 5px 12px -11px rgba(34, 34, 34, 0.2) inset;
    -webkit-box-shadow: 5px 5px 12px -11px rgba(34, 34, 34, 0.2) inset;
    -moz-box-shadow: 5px 5px 12px -11px rgba(34, 34, 34, 0.2) inset;
  }
}

h1, h2 {
  margin-top: 0px;
  line-height: 1.2;
  font-weight: 700;
}

h1 {
  font-size: 2rem;
}
@media screen and (min-width: 768px) {
  h1 {
    font-size: 3.4rem;
  }
}
@media screen and (min-width: 1500px) {
  h1 {
    font-size: 3.7rem;
  }
}
@media screen and (max-width: 768px) {
  h1 {
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
  }
}

h3 {
  font-weight: 400;
}

.plain_text h3 {
  text-transform: uppercase;
}

h2 {
  font-size: 1.6rem;
  margin-bottom: 1rem;
}
@media screen and (min-width: 1024px) {
  h2 {
    font-size: 2rem;
  }
}

p {
  margin-top: 0px;
}

address {
  font-style: normal;
}

main a {
  color: #222;
  text-decoration: none;
}
main a:hover {
  text-decoration: underline;
}

.logotype_grafiker_bern {
  display: inline-block;
  text-decoration: none;
  color: #222;
  transition: all 1.5s;
}
.logotype_grafiker_bern img {
  display: inline-block;
  max-width: 50px;
  margin-right: 5px;
}
.logotype_grafiker_bern:hover {
  text-decoration: underline;
}
.logotype_grafiker_bern h2 {
  display: inline-block;
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 0px;
}
.logotype_grafiker_bern h2 .addon_logotype {
  font-weight: 400;
}
@media screen and (min-width: 768px) {
  .logotype_grafiker_bern h2 {
    font-size: 1.6rem;
  }
}

.text_right {
  text-align: right;
}

.button, .FormBuilder button {
  display: inline-block;
  padding: 5px 18px 6px 18px !important;
  margin-top: 15px;
  border: 2px solid #222;
  color: #222;
  text-decoration: none;
  text-transform: uppercase;
  line-height: 1.6 !important;
  font-weight: 700 !important;
  letter-spacing: 2px;
  transition: all 0.2s;
  font-size: 1rem;
}
.button:hover, .FormBuilder button:hover {
  background: #fefefe;
  background: #222222;
  text-decoration: none !important;
  color: #fefefe !important;
}

.FormBuilder button {
  background-color: #222;
  border: 2px solid #fefefe;
  color: white;
  font-size: 1rem;
}
.FormBuilder button:hover {
  background: #fefefe;
  cursor: pointer;
  color: #222 !important;
}

.link_ext::before {
  display: inline-block;
  width: 15px !important;
  margin-right: 6px;
  transform: translateY(2px);
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'%3E%3Ccircle cx='7.5' cy='7.5' r='7' style='fill: none;stroke: %23222;stroke-miterlimit: 10'/%3E%3Cellipse cx='7.5' cy='7.5' rx='4' ry='7' style='fill: none;stroke: %23222;stroke-miterlimit: 10'/%3E%3Cline x1='1' y1='5.5' x2='14' y2='5.5' style='fill: none;stroke: %23222;stroke-miterlimit: 10'/%3E%3Cline x1='1' y1='9.5' x2='14' y2='9.5' style='fill: none;stroke: %23222;stroke-miterlimit: 10'/%3E%3Cline x1='7.5' y1='1' x2='7.5' y2='14' style='fill: none;stroke: %23222;stroke-miterlimit: 10'/%3E%3C/svg%3E%0A");
}

/* Icon 1 */
#nav-icon3 {
  width: 40px;
  height: 37px;
  position: fixed;
  right: 1.5rem;
  top: 25px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
  cursor: pointer;
  z-index: 999;
}

#nav-icon3 span {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: #222;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}

#nav-icon3 span:nth-child(1) {
  top: 10px;
}

#nav-icon3 span:nth-child(2), #nav-icon3 span:nth-child(3) {
  top: 18px;
}

#nav-icon3 span:nth-child(4) {
  top: 26px;
  width: 26px;
}

#nav-icon3.open span:nth-child(1) {
  top: 28px;
  width: 0%;
  left: 50%;
}

#nav-icon3.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#nav-icon3.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#nav-icon3.open span:nth-child(4) {
  top: 18px;
  width: 0%;
  left: 50%;
}

#nav-icon3:hover span:nth-child(4) {
  animation: spin 0.5s ease-in-out;
}

@keyframes spin {
  100% {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}
/*
$color: $dark-grey;

@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');

@mixin bar() {
  content:'';
  position: absolute;
  height: 2px;
  background: $color;
  transition: all .5s cubic-bezier(.1, .9, 0, 1.06);
}

.burger {
  transition: all .5s cubic-bezier(.1, .9, 0, 1.2);
  text-align: center;
  padding-left: 1px;
  color: $color;
}

.wrapper{
  display: block;
  position:fixed;
  width: 40px;
  height: 30px;
  right: 40px;
  top: 47px;
  text-transform: uppercase;
  //font-family: 'Pacifico', cursive;
  font-size: 12px;
  font-weight: 700;
  z-index: 999;
  //background:pink;
  .bun {
    &:before{
      @include bar();
      width:100%;
      top: 0%;
      right:0;
    }
    &:after {
      @include bar();
      width: 100%;
      bottom: 0%;
      left:0;
    }
    .burger{
      position: absolute;
      display: flex;
      align-items: center;
      width: 40px;
      height: 30px;
      letter-spacing:1px;
    }
  }

  input{
    display:block;
    position: absolute;
    opacity: 0;
    z-index: 1;
    width: 40px;
    height: 50px;
    cursor:pointer;
    border: 1px solid black;

    &:hover ~ .bun {
      &:after {
        //transform: rotate(10deg);
      }
      &:before {
        //transform: translatey(-2px);
      }
      .burger {
        transform: rotate(360deg);
        transition: all 0.9s cubic-bezier(.5, .9, 0, 1.06);
      }
    }

    &:checked ~ .bun {
      &:before {
        transform-origin: center;
        transform: translatey(14px) rotate(-45deg);
      }
      &:after{
        transform-origin: center;
        transform: translatey(-14px) rotate(45deg);
        width: 100%;
      }
      .burger {
          transform: translatey(-28px);
          transition: all .5s cubic-bezier(.1, .9, 0, 1.06);
      }
    }
  }
}
*/
#overlay {
  background: rgba(254, 254, 254, 0.96);
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100vh;
  display: none;
  z-index: 5;
  padding-top: 25vh;
}
#overlay nav {
  text-align: center;
}
#overlay a.nav_item {
  text-decoration: none;
  color: #222;
  display: block;
  font-weight: 700;
  font-size: 2rem;
}
#overlay a.nav_item:hover {
  text-decoration: underline;
}
@media screen and (min-width: 768px) {
  #overlay a.nav_item {
    font-size: 3.4rem;
  }
}
@media screen and (min-width: 1500px) {
  #overlay a.nav_item {
    font-size: 3.7rem;
  }
}
#overlay address {
  margin-top: 3rem;
  font-size: 0.9rem;
  text-align: center;
}
#overlay address a {
  background: rgba(34, 34, 34, 0.07);
  text-decoration: none;
  color: #222;
  padding: 5px 15px 7px 15px;
  border-radius: 30px;
  margin: 1.4rem 0 !important;
  display: inline-block;
}
#overlay address a:hover {
  background: rgba(34, 34, 34, 0.2);
}
@media screen and (min-width: 768px) {
  #overlay address {
    font-size: 1rem;
  }
}

footer {
  z-index: 1;
  color: rgba(254, 254, 254, 0.9);
}
footer a h2 {
  font-size: 1.3rem !important;
  color: rgba(254, 254, 254, 0.9);
}
footer .addon_logotype {
  font-size: 0.8rem;
  margin-top: 2px;
  display: inline-block;
}
footer p {
  font-size: 0.8rem;
  margin-bottom: 0px;
}
footer a {
  color: rgba(254, 254, 254, 0.9);
  text-decoration: none;
}
footer a:hover {
  text-decoration: underline;
}

#content_footer {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  min-height: 100vh;
  background: #222;
  padding: 40px 1.5rem 0px 1.5rem;
}
@media screen and (min-width: 768px) {
  #content_footer {
    padding: 40px 40px 0px 40px;
  }
}
#content_footer #address_footer {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  margin-bottom: 40px;
  gap: 30px;
}
#content_footer #address_footer div {
  display: flex;
  flex-direction: column;
  gap: 15px;
  justify-content: flex-end;
}
@media screen and (min-width: 768px) {
  #content_footer #address_footer div {
    flex-direction: row;
    gap: 30px;
    text-align: right;
  }
}
@media screen and (min-width: 507px) {
  #content_footer #address_footer {
    flex-direction: row;
  }
}
#content_footer #contact_footer {
  margin-bottom: 40px;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  gap: 30px;
}
#content_footer #contact_footer > div, #content_footer #contact_footer iframe {
  width: 100%;
}
#content_footer #contact_footer iframe {
  height: 50vw;
}
#content_footer #contact_footer > div {
  min-height: 515px;
}
@media screen and (min-width: 768px) {
  #content_footer #contact_footer {
    flex-direction: row;
  }
  #content_footer #contact_footer > div, #content_footer #contact_footer iframe {
    width: 50%;
  }
  #content_footer #contact_footer iframe {
    height: auto;
  }
}
#content_footer #agb_impressum {
  min-height: 65px;
}
#content_footer ::-moz-selection { /* Code for Firefox */
  background: #fefefe;
  color: #222;
}
#content_footer ::selection {
  background: #fefefe;
  color: #222;
}

.FormBuilder.InputfieldForm {
  padding: 0px;
  margin: 0px;
}

.InputfieldForm .Inputfield {
  margin-bottom: 0px !important;
}

.InputfieldSubmit {
  margin-bottom: 0px !important;
}
@media only screen and (max-width: 479px) {
  .InputfieldSubmit {
    margin-bottom: 0px !important;
  }
}

label {
  display: none;
}

#Inputfield_vor_und_nachname, #Inputfield_e_mail {
  height: 30px !important;
}

#Inputfield_vor_und_nachname, #Inputfield_e_mail, #Inputfield_nachricht {
  margin-bottom: 25px !important;
  padding: 15px;
  background: #46443f;
  font-size: 1rem;
  color: #fefefe;
  border: none;
  font-family: soleil, sans-serif;
  border-radius: 0px;
}

::placeholder {
  color: #fefefe;
  opacity: 0.6; /* Firefox */
  font-size: 0.9rem;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #fefefe;
  opacity: 0.6; /* Firefox */
  font-size: 0.9rem;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: #fefefe;
  opacity: 0.6; /* Firefox */
  font-size: 0.9rem;
}

.alert, .input-error {
  color: #fefefe;
}

.alert-error {
  margin-bottom: 5px;
}

.input-error {
  display: none;
}

.FormBuilderErrors {
  margin-bottom: 26px;
  opacity: 0.7;
}

select:focus,
textarea:focus,
button:focus {
  outline: none !important;
}

* {
  box-sizing: border-box !important;
}

html {
  scroll-behavior: smooth;
  background: #fefefe;
}

body {
  margin: 0px;
  font-family: soleil, sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #222;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body ::-moz-selection { /* Code for Firefox */
  background: #222;
  color: #fefefe;
}
body ::selection {
  background: #222;
  color: #fefefe;
}

main {
  padding: 1.5rem;
  background: none;
}
@media screen and (min-width: 768px) {
  main {
    padding: 40px;
  }
}

#lang_selection {
  display: flex;
  list-style-type: none;
  flex-direction: column;
  position: fixed;
  right: 33px;
  top: 62px;
  gap: 0.8rem;
  z-index: 999;
}
@media screen and (min-width: 768px) {
  #lang_selection {
    right: 30px;
    top: 90px;
  }
}
#lang_selection li a {
  transition: all 0.2s;
  background: #eeeeee;
  display: flex;
  line-height: 0;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  text-align: center;
  padding-bottom: 1px;
  color: #222;
  text-decoration: none;
  font-size: 0.7rem;
  /*
  @media screen and (max-width: $m) {
    font-size: 0.7rem;
  }
  */
}
@media screen and (min-width: 768px) {
  #lang_selection li a {
    width: 26px;
    height: 26px;
  }
}
#lang_selection li a:hover {
  background: #a2a2a2;
  text-decoration: none;
}
#lang_selection li a.active {
  background: #c8c8c8;
}

#intro_index, #title_content {
  margin: 135px 0px;
  font-size: 1.2rem;
  line-height: 1.4;
}
#intro_index h1, #title_content h1 {
  font-weight: 700;
  margin-bottom: 1rem;
  max-width: 1410px;
}
@media screen and (max-width: 1024px) {
  #intro_index, #title_content {
    margin: 70px 0px;
  }
}

#title_content {
  margin-bottom: 0;
}

img {
  max-width: 100%;
}

.slideshow ul {
  border-radius: 3px;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .slideshow ul {
    border-radius: 6px;
  }
}

.prev, .next {
  margin: 0px;
  display: flex;
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 50%;
}
.prev svg, .next svg {
  display: none;
}
@media screen and (max-width: 768px) {
  .prev, .next {
    display: none !important;
  }
}

.prev:hover {
  cursor: url("../img/arrow_left.cur"), auto !important;
}

.next {
  right: 0px;
}
.next:hover {
  cursor: url("../img/arrow_right.cur"), auto !important;
}

.arrow_l, .arrow_r {
  margin: 15px 0;
}
.arrow_l svg, .arrow_r svg {
  margin-top: 5px;
  max-width: 10px;
}
@media screen and (min-width: 768px) {
  .arrow_l, .arrow_r {
    display: none !important;
  }
}

#Inputfield_captcha iframe {
  width: 100% !important;
}

a.anim_arrow_up {
  position: fixed;
  display: none;
  text-decoration: none;
  right: 45px;
  bottom: 110px;
  width: 20px;
  height: 35px;
  transition: height 0.2s;
  z-index: 1;
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 150"><g><line x1="13" y1="2" x2="13" y2="150" style="fill: none;stroke: %23444444;stroke-width: 2px"/><path d="M.94,14.06,13,2,25.06,14.06" style="fill: none;stroke: %23444444;stroke-width: 2px"/></g></svg>');
  background-repeat: no-repeat;
  background-size: 100%;
}
a.anim_arrow_up:hover {
  height: 45px;
}
@media screen and (max-width: 768px) {
  a.anim_arrow_up {
    width: 15px;
    height: 28px;
    right: 25px;
  }
  a.anim_arrow_up:hover {
    height: 38px;
  }
}
a.anim_arrow_up.white {
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 150"><g><line x1="13" y1="2" x2="13" y2="150" style="fill: none;stroke: %23ffffff;stroke-width: 2px"/><path d="M.94,14.06,13,2,25.06,14.06" style="fill: none;stroke: %23ffffff;stroke-width: 2px"/></g></svg>');
}

#thumbnav {
  display: none;
  position: fixed;
  right: 27px;
  bottom: 160px;
}
#thumbnav ul {
  list-style: none;
  display: flex;
  flex-direction: column;
}
#thumbnav ul li {
  text-align: center;
}
@media screen and (max-width: 768px) {
  #thumbnav ul li {
    display: none;
  }
}
#thumbnav ul li a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 28px;
  border-radius: 50%;
  /*
  img {
    transition: all 0.3s;
    border-radius: 30px;
    //width: 28px;
    //height: 28px;

    box-shadow: 2px 2px 6px 1px rgba($dark-grey,0.2);
    -webkit-box-shadow: 2px 2px 6px 1px rgba($dark-grey,0.2);
    -moz-box-shadow: 2px 2px 6px 1px rgba($dark-grey,0.2);

    //border: 1px solid $dark-grey;
  }
  */
}
#thumbnav ul li a::after {
  transition: all 0.5s;
  display: block;
  content: "";
  width: 5px;
  height: 5px;
  background: rgba(34, 34, 34, 0.3);
  border-radius: 50%;
}
#thumbnav ul li a:hover {
  text-decoration: none;
}
#thumbnav ul li.uk-active, #thumbnav ul li:hover {
  /*
  img {
    width: 40px;
    height: 40px;
    //border: 1px solid rgba($dark-grey, 0.3);
    box-shadow: 2px 2px 10px 1px rgba($dark-grey,0.2);
    -webkit-box-shadow: 2px 2px 10px 1px rgba($dark-grey,0.2);
    -moz-box-shadow: 2px 2px 10px 1px rgba($dark-grey,0.2);
  }
  */
}
#thumbnav ul li.uk-active a::after, #thumbnav ul li:hover a::after {
  background: #222;
  /*
  box-shadow: 5px 5px 12px -11px rgba($dark-grey,0.2) inset;
  -webkit-box-shadow: 5px 5px 12px -11px rgba($dark-grey,0.2) inset;
  -moz-box-shadow: 5px 5px 12px -11px rgba($dark-grey,0.2) inset;
  */
}