html {
  --grid__columns: 12;
  --grid__gutter: 1.875rem;
}
.row {
  display: grid;
  grid-template-columns: repeat(var(--grid__columns), minmax(0, 1fr));
  grid-gap: var(--grid__gutter);
  grid-auto-columns: 1fr;
}

.row--show {
  position: relative;
  background: #f9f9f9;
  z-index: 0;
  padding-top: 0.9375rem;
}

.row--show:before {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: 0;
  height: 100%;
  background: repeating-linear-gradient(to right, #f0f0f0 0%, #f0f0f0 calc((100% - (1.875rem * 11)) / 12), #f9f9f9 calc((100% - (1.875rem * 11)) / 12), #f9f9f9 calc(((100% - (1.875rem * 11)) / 12) + 1.875rem) );
}


/* ----- */
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 {
  grid-column: 1 / -1;
}

.row-span-xs-1, .row-span-xs-2, .row-span-xs-3, .row-span-xs-4, .row-span-xs-5, .row-span-xs-6, .row-span-xs-7, .row-span-xs-8, .row-span-xs-9, .row-span-xs-10, .row-span-xs-11, .row-span-xs-12, .row-span-sm-1, .row-span-sm-2, .row-span-sm-3, .row-span-sm-4, .row-span-sm-5, .row-span-sm-6, .row-span-sm-7, .row-span-sm-8, .row-span-sm-9, .row-span-sm-10, .row-span-sm-11, .row-span-sm-12, .row-span-md-1, .row-span-md-2, .row-span-md-3, .row-span-md-4, .row-span-md-5, .row-span-md-6, .row-span-md-7, .row-span-md-8, .row-span-md-9, .row-span-md-10, .row-span-md-11, .row-span-md-12, .row-span-lg-1, .row-span-lg-2, .row-span-lg-3, .row-span-lg-4, .row-span-lg-5, .row-span-lg-6, .row-span-lg-7, .row-span-lg-8, .row-span-lg-9, .row-span-lg-10, .row-span-lg-11, .row-span-lg-12, .row-span-xl-1, .row-span-xl-2, .row-span-xl-3, .row-span-xl-4, .row-span-xl-5, .row-span-xl-6, .row-span-xl-7, .row-span-xl-8, .row-span-xl-9, .row-span-xl-10, .row-span-xl-11, .row-span-xl-12 {
  grid-row: 1;
}

.justify-start {
  justify-self: start;
}

.justify-center {
  justify-self: center;
}

.justify-end {
  justify-self: end;
}

.justify-stretch {
  justify-self: stretch;
}

.align-start {
  align-self: start;
}

.align-center {
  align-self: center;
}

.align-end {
  align-self: end;
}

.align-stretch {
  align-self: stretch;
}

.col-1 {
  grid-column: span 1 / span 1;
}

.col-2 {
  grid-column: span 2 / span 2;
}

.col-3 {
  grid-column: span 3 / span 3;
}

.col-4 {
  grid-column: span 4 / span 4;
}

.col-5 {
  grid-column: span 5 / span 5;
}

.col-6 {
  grid-column: span 6 / span 6;
}

.col-7 {
  grid-column: span 7 / span 7;
}

.col-8 {
  grid-column: span 8 / span 8;
}

.col-9 {
  grid-column: span 9 / span 9;
}

.col-10 {
  grid-column: span 10 / span 10;
}

.col-11 {
  grid-column: span 11 / span 11;
}

.col-12 {
  grid-column: span 12 / span 12;
}

@media screen and (min-width: 0) {
  .col-xs-1 {
    grid-column: span 1 / span 1;
  }

  .col-xs-2 {
    grid-column: span 2 / span 2;
  }

  .col-xs-3 {
    grid-column: span 3 / span 3;
  }

  .col-xs-4 {
    grid-column: span 4 / span 4;
  }

  .col-xs-5 {
    grid-column: span 5 / span 5;
  }

  .col-xs-6 {
    grid-column: span 6 / span 6;
  }

  .col-xs-7 {
    grid-column: span 7 / span 7;
  }

  .col-xs-8 {
    grid-column: span 8 / span 8;
  }

  .col-xs-9 {
    grid-column: span 9 / span 9;
  }

  .col-xs-10 {
    grid-column: span 10 / span 10;
  }

  .col-xs-11 {
    grid-column: span 11 / span 11;
  }

  .col-xs-12 {
    grid-column: span 12 / span 12;
  }
}

@media screen and (min-width: 0) {
  .col-start-xs-1 {
    grid-column-start: 1;
  }

  .row-start-xs-1 {
    grid-row-start: 1;
  }

  .col-start-xs-2 {
    grid-column-start: 2;
  }

  .row-start-xs-2 {
    grid-row-start: 2;
  }

  .col-start-xs-3 {
    grid-column-start: 3;
  }

  .row-start-xs-3 {
    grid-row-start: 3;
  }

  .col-start-xs-4 {
    grid-column-start: 4;
  }

  .row-start-xs-4 {
    grid-row-start: 4;
  }

  .col-start-xs-5 {
    grid-column-start: 5;
  }

  .row-start-xs-5 {
    grid-row-start: 5;
  }

  .col-start-xs-6 {
    grid-column-start: 6;
  }

  .row-start-xs-6 {
    grid-row-start: 6;
  }

  .col-start-xs-7 {
    grid-column-start: 7;
  }

  .row-start-xs-7 {
    grid-row-start: 7;
  }

  .col-start-xs-8 {
    grid-column-start: 8;
  }

  .row-start-xs-8 {
    grid-row-start: 8;
  }

  .col-start-xs-9 {
    grid-column-start: 9;
  }

  .row-start-xs-9 {
    grid-row-start: 9;
  }

  .col-start-xs-10 {
    grid-column-start: 10;
  }
  .row-start-xs-10 {
    grid-row-start: 10;
  }

  .col-start-xs-11 {
    grid-column-start: 11;
  }

  .row-start-xs-11 {
    grid-row-start: 11;
  }

  .col-start-xs-12 {
    grid-column-start: 12;
  }

  .row-start-xs-12 {
    grid-row-start: 12;
  }
}

@media screen and (min-width: 0) {
  .pull-right-xs {
    grid-column-end: -1;
  }

  .pull-left-xs {
    grid-row-start: 1;
    grid-column-end: inherit;
  }
}

@media screen and (min-width: 0) {
  .justify-xs-start {
    justify-self: start;
  }

  .justify-xs-center {
    justify-self: center;
  }

  .justify-xs-end {
    justify-self: end;
  }

  .justify-xs-stretch {
    justify-self: stretch;
  }

  .align-xs-start {
    align-self: start;
  }

  .align-xs-center {
    align-self: center;
  }

  .align-xs-end {
    align-self: end;
  }

  .align-xs-stretch {
    align-self: stretch;
  }
}

@media screen and (min-width: 0) {
  .row-span-xs-1 {
    grid-row: span 1 / span 1;
  }

  .row-span-xs-2 {
    grid-row: span 2 / span 2;
  }

  .row-span-xs-3 {
    grid-row: span 3 / span 3;
  }

  .row-span-xs-4 {
    grid-row: span 4 / span 4;
  }

  .row-span-xs-5 {
    grid-row: span 5 / span 5;
  }

  .row-span-xs-6 {
    grid-row: span 6 / span 6;
  }

  .row-span-xs-7 {
    grid-row: span 7 / span 7;
  }

  .row-span-xs-8 {
    grid-row: span 8 / span 8;
  }

  .row-span-xs-9 {
    grid-row: span 9 / span 9;
  }

  .row-span-xs-10 {
    grid-row: span 10 / span 10;
  }

  .row-span-xs-11 {
    grid-row: span 11 / span 11;
  }

  .row-span-xs-12 {
    grid-row: span 12 / span 12;
  }
}

@media screen and (min-width: 34.375em) {
  .col-sm-1 {
    grid-column: span 1 / span 1;
  }

  .col-sm-2 {
    grid-column: span 2 / span 2;
  }

  .col-sm-3 {
    grid-column: span 3 / span 3;
  }

  .col-sm-4 {
    grid-column: span 4 / span 4;
  }

  .col-sm-5 {
    grid-column: span 5 / span 5;
  }

  .col-sm-6 {
    grid-column: span 6 / span 6;
  }

  .col-sm-7 {
    grid-column: span 7 / span 7;
  }

  .col-sm-8 {
    grid-column: span 8 / span 8;
  }

  .col-sm-9 {
    grid-column: span 9 / span 9;
  }

  .col-sm-10 {
    grid-column: span 10 / span 10;
  }

  .col-sm-11 {
    grid-column: span 11 / span 11;
  }

  .col-sm-12 {
    grid-column: span 12 / span 12;
  }
}

@media screen and (min-width: 34.375em) {
  .col-start-sm-1 {
    grid-column-start: 1;
  }

  .row-start-sm-1 {
    grid-row-start: 1;
  }

  .col-start-sm-2 {
    grid-column-start: 2;
  }

  .row-start-sm-2 {
    grid-row-start: 2;
  }

  .col-start-sm-3 {
    grid-column-start: 3;
  }

  .row-start-sm-3 {
    grid-row-start: 3;
  }

  .col-start-sm-4 {
    grid-column-start: 4;
  }

  .row-start-sm-4 {
    grid-row-start: 4;
  }

  .col-start-sm-5 {
    grid-column-start: 5;
  }

  .row-start-sm-5 {
    grid-row-start: 5;
  }

  .col-start-sm-6 {
    grid-column-start: 6;
  }

  .row-start-sm-6 {
    grid-row-start: 6;
  }

  .col-start-sm-7 {
    grid-column-start: 7;
  }

  .row-start-sm-7 {
    grid-row-start: 7;
  }

  .col-start-sm-8 {
    grid-column-start: 8;
  }

  .row-start-sm-8 {
    grid-row-start: 8;
  }

  .col-start-sm-9 {
    grid-column-start: 9;
  }

  .row-start-sm-9 {
    grid-row-start: 9;
  }

  .col-start-sm-10 {
    grid-column-start: 10;
  }

  .row-start-sm-10 {
    grid-row-start: 10;
  }

  .col-start-sm-11 {
    grid-column-start: 11;
  }

  .row-start-sm-11 {
    grid-row-start: 11;
  }

  .col-start-sm-12 {
    grid-column-start: 12;
  }

  .row-start-sm-12 {
    grid-row-start: 12;
  }
}

@media screen and (min-width: 34.375em) {
  .pull-right-sm {
    grid-column-end: -1;
  }

  .pull-left-sm {
    grid-row-start: 1;
    grid-column-end: inherit;
  }
}

@media screen and (min-width: 34.375em) {
  .justify-sm-start {
    justify-self: start;
  }

  .justify-sm-center {
    justify-self: center;
  }

  .justify-sm-end {
    justify-self: end;
  }

  .justify-sm-stretch {
    justify-self: stretch;
  }

  .align-sm-start {
    align-self: start;
  }

  .align-sm-center {
    align-self: center;
  }

  .align-sm-end {
    align-self: end;
  }

  .align-sm-stretch {
    align-self: stretch;
  }
}

@media screen and (min-width: 34.375em) {
  .row-span-sm-1 {
    grid-row: span 1 / span 1;
  }

  .row-span-sm-2 {
    grid-row: span 2 / span 2;
  }

  .row-span-sm-3 {
    grid-row: span 3 / span 3;
  }

  .row-span-sm-4 {
    grid-row: span 4 / span 4;
  }

  .row-span-sm-5 {
    grid-row: span 5 / span 5;
  }

  .row-span-sm-6 {
    grid-row: span 6 / span 6;
  }

  .row-span-sm-7 {
    grid-row: span 7 / span 7;
  }

  .row-span-sm-8 {
    grid-row: span 8 / span 8;
  }

  .row-span-sm-9 {
    grid-row: span 9 / span 9;
  }

  .row-span-sm-10 {
    grid-row: span 10 / span 10;
  }

  .row-span-sm-11 {
    grid-row: span 11 / span 11;
  }

  .row-span-sm-12 {
    grid-row: span 12 / span 12;
  }
}


@media screen and (min-width: 48em) {
  .col-md-1 {
    grid-column: span 1 / span 1;
  }

  .col-md-2 {
    grid-column: span 2 / span 2;
  }

  .col-md-3 {
    grid-column: span 3 / span 3;
  }

  .col-md-4 {
    grid-column: span 4 / span 4;
  }

  .col-md-5 {
    grid-column: span 5 / span 5;
  }

  .col-md-6 {
    grid-column: span 6 / span 6;
  }

  .col-md-7 {
    grid-column: span 7 / span 7;
  }

  .col-md-8 {
    grid-column: span 8 / span 8;
  }

  .col-md-9 {
    grid-column: span 9 / span 9;
  }

  .col-md-10 {
    grid-column: span 10 / span 10;
  }

  .col-md-11 {
    grid-column: span 11 / span 11;
  }

  .col-md-12 {
    grid-column: span 12 / span 12;
  }
}

@media screen and (min-width: 48em) {
  .col-start-md-1 {
    grid-column-start: 1;
  }

  .row-start-md-1 {
    grid-row-start: 1;
  }

  .col-start-md-2 {
    grid-column-start: 2;
  }

  .row-start-md-2 {
    grid-row-start: 2;
  }

  .col-start-md-3 {
    grid-column-start: 3;
  }

  .row-start-md-3 {
    grid-row-start: 3;
  }

  .col-start-md-4 {
    grid-column-start: 4;
  }

  .row-start-md-4 {
    grid-row-start: 4;
  }

  .col-start-md-5 {
    grid-column-start: 5;
  }

  .row-start-md-5 {
    grid-row-start: 5;
  }

  .col-start-md-6 {
    grid-column-start: 6;
  }

  .row-start-md-6 {
     grid-row-start: 6;
  }

  .col-start-md-7 {
    grid-column-start: 7;
  }

  .row-start-md-7 {
    grid-row-start: 7;
  }

  .col-start-md-8 {
    grid-column-start: 8;
  }

  .row-start-md-8 {
    grid-row-start: 8;
  }

  .col-start-md-9 {
    grid-column-start: 9;
  }

  .row-start-md-9 {
    grid-row-start: 9;
  }

  .col-start-md-10 {
    grid-column-start: 10;
  }

  .row-start-md-10 {
    grid-row-start: 10;
  }

  .col-start-md-11 {
    grid-column-start: 11;
  }
  
  .row-start-md-11 {
    grid-row-start: 11;
  }
  
  .col-start-md-12 {
    grid-column-start: 12;
  }
  
  .row-start-md-12 {
    grid-row-start: 12;
  }
}

@media screen and (min-width: 48em) {
  .pull-right-md {
    grid-column-end: -1;
  }
  
  .pull-left-md {
    grid-row-start: 1;
    grid-column-end: inherit;
  }
}

@media screen and (min-width: 48em) {
  .justify-md-start {
    justify-self: start;
  }

  .justify-md-center {
    justify-self: center;
  }

  .justify-md-end {
    justify-self: end;
  }

  .justify-md-stretch {
    justify-self: stretch;
  }

  .align-md-start {
    align-self: start;
  }

  .align-md-center {
    align-self: center;
  }

  .align-md-end {
    align-self: end;
  }

  .align-md-stretch {
    align-self: stretch;
  }
}

@media screen and (min-width: 48em) {
  .row-span-md-1 {
    grid-row: span 1 / span 1;
  }

  .row-span-md-2 {
    grid-row: span 2 / span 2;
  }

  .row-span-md-3 {
    grid-row: span 3 / span 3;
  }

  .row-span-md-4 {
    grid-row: span 4 / span 4;
  }

  .row-span-md-5 {
    grid-row: span 5 / span 5;
  }

  .row-span-md-6 {
    grid-row: span 6 / span 6;
  }

  .row-span-md-7 {
    grid-row: span 7 / span 7;
  }

  .row-span-md-8 {
    grid-row: span 8 / span 8;
  }

  .row-span-md-9 {
    grid-row: span 9 / span 9;
  }

  .row-span-md-10 {
    grid-row: span 10 / span 10;
  }

  .row-span-md-11 {
    grid-row: span 11 / span 11;
  }

  .row-span-md-12 {
    grid-row: span 12 / span 12;
  }
}

@media screen and (min-width: 58.75em) {
  .col-lg-1 {
    grid-column: span 1 / span 1;
  }
  
  .col-lg-2 {
    grid-column: span 2 / span 2;
  }
  
  .col-lg-3 {
    grid-column: span 3 / span 3;
  }
  
  .col-lg-4 {
    grid-column: span 4 / span 4;
  }
  
  .col-lg-5 {
    grid-column: span 5 / span 5;
  }
  
  .col-lg-6 {
    grid-column: span 6 / span 6;
  }
  
  .col-lg-7 {
    grid-column: span 7 / span 7;
  }
  
  .col-lg-8 {
    grid-column: span 8 / span 8;
  }
  
  .col-lg-9 {
    grid-column: span 9 / span 9;
  }
  
  .col-lg-10 {
    grid-column: span 10 / span 10;
  }
  
  .col-lg-11 {
    grid-column: span 11 / span 11;
  }
  
  .col-lg-12 {
    grid-column: span 12 / span 12;
  }
}

@media screen and (min-width: 58.75em) {
  .col-start-lg-1 {
    grid-column-start: 1;
  }
  
  .row-start-lg-1 {
    grid-row-start: 1;
  }
  
  .col-start-lg-2 {
    grid-column-start: 2;
  }
  
  .row-start-lg-2 {
    grid-row-start: 2;
  }
  
  .col-start-lg-3 {
    grid-column-start: 3;
  }
  
  .row-start-lg-3 {
    grid-row-start: 3;
  }
  
  .col-start-lg-4 {
    grid-column-start: 4;
  }
  
  .row-start-lg-4 {
    grid-row-start: 4;
  }
  
  .col-start-lg-5 {
    grid-column-start: 5;
  }
  
  .row-start-lg-5 {
    grid-row-start: 5;
  }
  
  .col-start-lg-6 {
    grid-column-start: 6;
  }
  
  .row-start-lg-6 {
    grid-row-start: 6;
  }
  
  .col-start-lg-7 {
    grid-column-start: 7;
  }
  
  .row-start-lg-7 {
    grid-row-start: 7;
  }
  
  .col-start-lg-8 {
    grid-column-start: 8;
  }
  
  .row-start-lg-8 {
    grid-row-start: 8;
  }
  
  .col-start-lg-9 {
    grid-column-start: 9;
  }
  
  .row-start-lg-9 {
    grid-row-start: 9;
  }
  
  .col-start-lg-10 {
    grid-column-start: 10;
  }
  
  .row-start-lg-10 {
    grid-row-start: 10;
  }
  
  .col-start-lg-11 {
    grid-column-start: 11;
  }
  
  .row-start-lg-11 {
    grid-row-start: 11;
  }
  
  .col-start-lg-12 {
    grid-column-start: 12;
  }
  
  .row-start-lg-12 {
    grid-row-start: 12;
  }
}

@media screen and (min-width: 58.75em) {
  .pull-right-lg {
    grid-column-end: -1;
  }
  
  .pull-left-lg {
    grid-row-start: 1;
    grid-column-end: inherit;
  }
}

@media screen and (min-width: 58.75em) {
  .justify-lg-start {
    justify-self: start;
  }

  .justify-lg-center {
    justify-self: center;
  }

  .justify-lg-end {
    justify-self: end;
  }

  .justify-lg-stretch {
    justify-self: stretch;
  }

  .align-lg-start {
    align-self: start;
  }

  .align-lg-center {
    align-self: center;
  }

  .align-lg-end {
    align-self: end;
  }

  .align-lg-stretch {
    align-self: stretch;
  }
}

@media screen and (min-width: 58.75em) {
  .row-span-lg-1 {
    grid-row: span 1 / span 1;
  }

  .row-span-lg-2 {
    grid-row: span 2 / span 2;
  }

  .row-span-lg-3 {
    grid-row: span 3 / span 3;
  }

  .row-span-lg-4 {
    grid-row: span 4 / span 4;
  }

  .row-span-lg-5 {
    grid-row: span 5 / span 5;
  }

  .row-span-lg-6 {
    grid-row: span 6 / span 6;
  }

  .row-span-lg-7 {
    grid-row: span 7 / span 7;
  }

  .row-span-lg-8 {
    grid-row: span 8 / span 8;
  }

  .row-span-lg-9 {
    grid-row: span 9 / span 9;
  }

  .row-span-lg-10 {
    grid-row: span 10 / span 10;
  }

  .row-span-lg-11 {
    grid-row: span 11 / span 11;
  }

  .row-span-lg-12 {
    grid-row: span 12 / span 12;
  }
}

@media screen and (min-width: 68.75em) {
  .col-xl-1 {
    grid-column: span 1 / span 1;
  }
  
  .col-xl-2 {
    grid-column: span 2 / span 2;
  }
  
  .col-xl-3 {
    grid-column: span 3 / span 3;
  }
  
  .col-xl-4 {
    grid-column: span 4 / span 4;
  }
  
  .col-xl-5 {
    grid-column: span 5 / span 5;
  }
  
  .col-xl-6 {
    grid-column: span 6 / span 6;
  }
  
  .col-xl-7 {
    grid-column: span 7 / span 7;
  }
  
  .col-xl-8 {
    grid-column: span 8 / span 8;
  }
  
  .col-xl-9 {
    grid-column: span 9 / span 9;
  }
  
  .col-xl-10 {
    grid-column: span 10 / span 10;
  }
  
  .col-xl-11 {
    grid-column: span 11 / span 11;
  }
  
  .col-xl-12 {
    grid-column: span 12 / span 12;
  }
}

@media screen and (min-width: 68.75em) {
  .col-start-xl-1 {
     grid-column-start: 1;
  }
  
  .row-start-xl-1 {
    grid-row-start: 1;
  }
  
  .col-start-xl-2 {
    grid-column-start: 2;
  }
  
  .row-start-xl-2 {
    grid-row-start: 2;
  }
  
  .col-start-xl-3 {
    grid-column-start: 3;
  }
  
  .row-start-xl-3 {
    grid-row-start: 3;
  }
  
  .col-start-xl-4 {
    grid-column-start: 4;
  }
  
  .row-start-xl-4 {
    grid-row-start: 4;
  }
  
  .col-start-xl-5 {
    grid-column-start: 5;
  }
  
  .row-start-xl-5 {
    grid-row-start: 5;
  }
  
  .col-start-xl-6 {
    grid-column-start: 6;
  }
  
  .row-start-xl-6 {
    grid-row-start: 6;
  }
  
  .col-start-xl-7 {
    grid-column-start: 7;
  }
  
  .row-start-xl-7 {
    grid-row-start: 7;
  }
  
  .col-start-xl-8 {
    grid-column-start: 8;
  }
  
  .row-start-xl-8 {
    grid-row-start: 8;
  }
  
  .col-start-xl-9 {
    grid-column-start: 9;
  }
  
  .row-start-xl-9 {
    grid-row-start: 9;
  }
  
  .col-start-xl-10 {
    grid-column-start: 10;
  }
  
  .row-start-xl-10 {
    grid-row-start: 10;
  }
  
  .col-start-xl-11 {
    grid-column-start: 11;
  }
  
  .row-start-xl-11 {
    grid-row-start: 11;
  }
  
  .col-start-xl-12 {
    grid-column-start: 12;
  }
  
  .row-start-xl-12 {
    grid-row-start: 12;
  }
}

@media screen and (min-width: 68.75em) {
  .pull-right-xl {
    grid-column-end: -1;
  }
  
  .pull-left-xl {
    grid-row-start: 1;
    grid-column-end: inherit;
  }
}

@media screen and (min-width: 68.75em) {
  .justify-xl-start {
    justify-self: start;
  }

  .justify-xl-center {
    justify-self: center;
  }

  .justify-xl-end {
    justify-self: end;
  }

  .justify-xl-stretch {
    justify-self: stretch;
  }

  .align-xl-start {
    align-self: start;
  }

  .align-xl-center {
    align-self: center;
  }

  .align-xl-end {
    align-self: end;
  }

  .align-xl-stretch {
    align-self: stretch;
  }
}

@media screen and (min-width: 68.75em) {
  .row-span-xl-1 {
    grid-row: span 1 / span 1;
  }

  .row-span-xl-2 {
    grid-row: span 2 / span 2;
  }

  .row-span-xl-3 {
    grid-row: span 3 / span 3;
  }

  .row-span-xl-4 {
    grid-row: span 4 / span 4;
  }

  .row-span-xl-5 {
    grid-row: span 5 / span 5;
  }

  .row-span-xl-6 {
    grid-row: span 6 / span 6;
  }

  .row-span-xl-7 {
    grid-row: span 7 / span 7;
  }

  .row-span-xl-8 {
    grid-row: span 8 / span 8;
  }

  .row-span-xl-9 {
    grid-row: span 9 / span 9;
  }

  .row-span-xl-10 {
    grid-row: span 10 / span 10;
  }

  .row-span-xl-11 {
    grid-row: span 11 / span 11;
  }

  .row-span-xl-12 {
    grid-row: span 12 / span 12;
  }
}

.col-start-1 {
  grid-column-start: 1;
}

.row-start-1 {
  grid-row-start: 1;
}

.col-start-2 {
  grid-column-start: 2;
}

.row-start-2 {
  grid-row-start: 2;
}

.col-start-3 {
  grid-column-start: 3;
}

.row-start-3 {
  grid-row-start: 3;
}

.col-start-4 {
  grid-column-start: 4;
}

.row-start-4 {
  grid-row-start: 4;
}

.col-start-5 {
  grid-column-start: 5;
}

.row-start-5 {
  grid-row-start: 5;
}

.col-start-6 {
  grid-column-start: 6;
}

.row-start-6 {
  grid-row-start: 6;
}

.col-start-7 {
  grid-column-start: 7;
}

.row-start-7 {
  grid-row-start: 7;
}

.col-start-8 {
  grid-column-start: 8;
}

.row-start-8 {
  grid-row-start: 8;
}

.col-start-9 {
  grid-column-start: 9;
}

.row-start-9 {
  grid-row-start: 9;
}

.col-start-10 {
  grid-column-start: 10;
}
.row-start-10 {
  grid-row-start: 10;
}

.col-start-11 {
  grid-column-start: 11;
}

.row-start-11 {
  grid-row-start: 11;
}

.col-start-12 {
  grid-column-start: 12;
}

.row-start-12 {
  grid-row-start: 12;
}

.row-span-1 {
  grid-row: span 1 / span 1;
}

.row-span-2 {
  grid-row: span 2 / span 2;
}

.row-span-3 {
  grid-row: span 3 / span 3;
}

.row-span-4 {
  grid-row: span 4 / span 4;
}

.row-span-5 {
  grid-row: span 5 / span 5;
}

.row-span-6 {
  grid-row: span 6 / span 6;
}

.row-span-7 {
  grid-row: span 7 / span 7;
}

.row-span-8 {
  grid-row: span 8 / span 8;
}

.row-span-9 {
  grid-row: span 9 / span 9;
}

.row-span-10 {
  grid-row: span 10 / span 10;
}

.row-span-11 {
  grid-row: span 11 / span 11;
}

.row-span-12 {
  grid-row: span 12 / span 12;
}

/* cyrillic-ext */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  src: url(/files/hoergeraete/fonts/o-0IIpQlx3QUlC5A4PNr6DRAW_0.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  src: url(/files/hoergeraete/fonts/o-0IIpQlx3QUlC5A4PNr4TRAW_0.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* devanagari */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  src: url(/files/hoergeraete/fonts/o-0IIpQlx3QUlC5A4PNr5DRAW_0.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}
/* greek-ext */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  src: url(/files/hoergeraete/fonts/o-0IIpQlx3QUlC5A4PNr6TRAW_0.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  src: url(/files/hoergeraete/fonts/o-0IIpQlx3QUlC5A4PNr5jRAW_0.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  src: url(/files/hoergeraete/fonts/o-0IIpQlx3QUlC5A4PNr6jRAW_0.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  src: url(/files/hoergeraete/fonts/o-0IIpQlx3QUlC5A4PNr6zRAW_0.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  src: url(/files/hoergeraete/fonts/o-0IIpQlx3QUlC5A4PNr5TRA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 700;
  src: url(/files/hoergeraete/fonts/o-0NIpQlx3QUlC5A4PNjXhFVadyB1Wk.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 700;
  src: url(/files/hoergeraete/fonts/o-0NIpQlx3QUlC5A4PNjXhFVYNyB1Wk.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* devanagari */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 700;
  src: url(/files/hoergeraete/fonts/o-0NIpQlx3QUlC5A4PNjXhFVZdyB1Wk.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}
/* greek-ext */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 700;
  src: url(/files/hoergeraete/fonts/o-0NIpQlx3QUlC5A4PNjXhFVaNyB1Wk.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 700;
  src: url(/files/hoergeraete/fonts/o-0NIpQlx3QUlC5A4PNjXhFVZ9yB1Wk.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 700;
  src: url(/files/hoergeraete/fonts/o-0NIpQlx3QUlC5A4PNjXhFVa9yB1Wk.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 700;
  src: url(/files/hoergeraete/fonts/o-0NIpQlx3QUlC5A4PNjXhFVatyB1Wk.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 700;
  src: url(/files/hoergeraete/fonts/o-0NIpQlx3QUlC5A4PNjXhFVZNyB.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
* {
  margin: 0;
}

.invisible {
  display: none;
}

/* Default Settings */

body {
  font-family: "Noto Sans", sans-serif;
  background-color: #ffffff;
  color: #3a3a3a;
}

figure {
  font-size: 0;
}

/* Font */

h1 {
  font-weight: 600;
  font-size: 22px;
  color: #0081b8;
  text-transform: uppercase;
}

h2 {
  font-weight: 600;
  font-size: 18px;
  text-transform: uppercase;
}

h3 {
  font-weight: 600;
  font-size: 16px;
  margin: 16px 0;
}

h4 {
  font-weight: 400;
  font-size: 16px;
  margin: 16px 0;
  text-decoration: underline;
}

p {
  font-size: 16px;
  margin-bottom: 27px;
  line-height: 1.6em;
}

li {
  font-size: 16px;
}

img {
  max-width: 100%;
  height: auto;
}

/* Navigation */

#header {
  position: fixed;
  width: 100%;
  z-index: 20;
  transition: all 0.3s;
  background: rgba(255, 255, 255, 0);
}

#main-nav {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 20;
  transition: all 0.5s;
  text-transform: uppercase;
}

.mod_article.first {
  padding-top: 3rem;
}

.mod_navigation ul li {
  list-style-type: none;
}

.mod_navigation ul li a {
  text-decoration: none;
}

#main-nav a:link,
#main-nav a:visited {
  color: #ffffff;
  transition: color 0.2s;
}

#main-nav strong {
  font-weight: bold;
}

/* Transparent Nav */

.transparent-nav #header {
  background-color: rgba(255, 255, 255, 0);
  border: 0;
}

/* Content */

/* Home */

#informationen,
#kontakt {
  background-color: #f0f0f0;
}

#willkommen h1 {
  color: #3a3a3a;
  line-height: 1.3em;
}

#willkommen-article {
  background-color: #ffffff;
}

#willkommen-article .attention {
  color: red;
  margin-top: 27px;
}

#willkommen-article .attention h2,
#willkommen-article .infotext h2 {
  margin-bottom: 14px;
  text-align: center;
}

#anschrift-article {
  background-color: #f0f0f0;
}

#anschrift-article h2 {
  text-transform: uppercase;
  margin-bottom: 10px;
}

.kontakt #anschrift H2 {
  margin: 18px 0 12px;
}

#kontakt-10 .ce_form .formbody input,
#kontakt-10 .ce_form .formbody textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-family: "Noto Sans", sans-serif;
  font-size: 16px;
  padding-left: 15px;
  margin-bottom: 24px;
  height: 64px;
  width: 480px;
  line-height: 2.5em;
  border: none;
  box-sizing: border-box;
  outline: none;
  resize: none;
}

#kontakt-10 .ce_form .formbody textarea {
  padding-top: 10px;
}

#kontakt-10 .ce_form .formbody textarea {
  height: 192px;
}

#kontakt-10 .widget-explanation {
  display: inline-block;
  margin-left: 25px;
}

#kontakt-10 .submit_container {
  display: inline-block;
  float: left;
}

#kontakt-10 .checkbox_container {
  border: 0;
  margin-bottom: 10px;
}

#kontakt-10 input[type="checkbox"] {
  border: 2px solid #e2e2e2;
  width: 20px !important;
  height: 20px !important;
  padding: 0 !important;
  background-color: #fff;
  margin: 0;
  float: left;
}

#kontakt-10 input[type="checkbox"]:checked {
  background-image: url(../../files/hoergeraete/css/check.png);
  background-size: contain;
  background-repeat: no-repeat;
}

#kontakt-10 .widget-checkbox {
  margin-top: 10px;
}

#kontakt-10 .widget-explanation label {
  color: #5ac5f2;
  font-weight: bold;
  cursor: pointer;
}

#kontakt-10 .widget-checkbox fieldset {
  padding: 0;
  max-width: 480px;
}

#kontakt-10 .checkbox_container span {
  display: inline-block;
}

#kontakt-10 .checkbox_container label {
  vertical-align: top;
}
#kontakt-10 .checkbox_container label .ce_text {
  padding: 0;
  padding-left: 20px;
}

#kontakt-10 .checkbox_container label .ce_text a {
  color: #0081b8;
}

#kontakt-10 .widget-submit button[type="submit"] {
  width: 160px;
  height: 64px;
  background-color: #0081b8;
  border: 0;
  font-family: "Noto Sans", sans-serif;
  font-size: 16px;
  color: #ffffff;
  line-height: 1em;
  padding: 0;
  cursor: pointer;
  float: left;
  text-transform: uppercase;
  -webkit-appearance: none;
  appearance: none;
}

#box-container {
  position: relative;
  background-color: #ffffff;
}

#mapheader {
  margin-top: 20px;
}

#mapheader div {
  font-size: 14px;
}

#mapheader a {
  cursor: pointer;
}

.googlemap {
  background: #fff;
  padding: 0 32px;
  min-height: 500px;
}

#kontakt-10 .googlemap H1 {
  margin-bottom: 0;
}
.kontakt .standorte .ce_image,
.googlemap .ce_image {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 320px;
}

.kontakt .standorte .ce_image a,
.googlemap .ce_image a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.kontakt .standorte .ce_image figcaption,
.googlemap .ce_image figcaption {
  position: absolute;
  bottom: 0;
  right: 0;
  font-size: 10px;
  line-height: 1;
  display: inline-block;
  background: white;
  padding: 2px 5px;
}

.kontakt .standorte .ce_image img,
.googlemap .ce_image img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: none;
  height: auto;
  width: 100%;
}

.kontakt .standorte .ce_image a::before,
.kontakt .standorte .ce_image a::after,
.googlemap .ce_image a::before,
.googlemap .ce_image a::after {
  display: block;
  position: absolute;
  left: 0;
  opacity: 0;
  visibility: hidden;
  z-index: 2;
  width: 100%;
  transition: opacity 0.3s, visibility 0.3s;
}

.kontakt .standorte .ce_image a:hover::before,
.kontakt .standorte .ce_image a:hover::after,
.googlemap .ce_image a:hover::before,
.googlemap .ce_image a:hover::after {
  opacity: 1;
  visibility: visible;
}

.kontakt .standorte .ce_image a::before,
.googlemap .ce_image a::before {
  content: " ";
  top: 0;
  height: 100%;
  background-color: rgba(0, 129, 184, 0.7);
}

.kontakt .standorte .ce_image a::after,
.googlemap .ce_image a::after {
  content: "zu Google Maps";
  text-align: center;
  padding: 0 40px;
  box-sizing: border-box;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  line-height: 1.5;
  font-size: 2rem;
  font-weight: bold;
}

.googlemap .inner {
  padding-top: 20px;
  position: relative;
}

.googlemap .ce_hyperlink {
  margin-bottom: 32px;
}

.kontakt .standorte > div > div {
  margin-bottom: 32px;
}

.googlemap .ce_hyperlink A {
  font-size: 14px;
  color: #3a3a3a;
  text-decoration: none;
}

.googlemap .hidden {
  opacity: 0;
  visibility: hidden;
}

#map-article,
#map-article2 {
  position: absolute;
  width: 100%;
  top: 0;
  transition: all 0.2s;
}

#map-article {
  visibility: visible;
}

#map-article2 {
  visibility: hidden;
}

#mapswitch:checked + #box-container #map-article {
  visibility: hidden;
}

#mapswitch:checked + #box-container #map-article2 {
  visibility: visible;
}

#map-article label,
#map-article2 label {
  text-transform: uppercase;
}

#standort .ce_image {
  margin-top: 23px;
}

/* Two-Rows */

.two-rows .ce_gallery ul li {
  margin-bottom: 20px;
}

.two-rows .ce_gallery ul li.col_0 {
  margin-right: 40px;
}

/* Leistungen & Team*/

.two-rows h1,
.mod_article--default h1,
#team h1 {
  color: #3a3a3a;
  font-weight: 400;
}

#spektrum ul li {
  position: relative;
  list-style-type: none;
}

#spektrum ul li:before {
  position: absolute;
  font-size: 32px;
  color: #0081b8;
  content: "\b7\a0";
  line-height: 20px;
  left: -25px;
}

.team #container .inside {
  background-color: #f0f0f0;
}

.team #team {
  background-color: #ffffff;
}

.team #fotos figcaption {
  font-size: 20px;
  color: #ffffff;
  background-color: #0081b8;
  text-align: center;
}

/* Geschichte */

/* Gallery Overlay */

.pswp__bg {
  background: rgba(255, 255, 255, 0.9);
}

.geschichte .ce_gallery:not(:nth-child(2)) {
  margin-top: 40px;
}

.geschichte .ce_gallery h1 {
  display: inline-block;
  margin-bottom: 30px;
  font-size: 28px;
  font-weight: bold;
}

.geschichte .ce_gallery ul li a {
  position: relative;
}

.geschichte .ce_gallery ul li a:before {
  content: " ";
  width: 40px;
  height: 40px;
  background: #fff;
  border-color: #0081b8;
  border-style: solid;
  border-width: 18px 10px;
  box-sizing: border-box;
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  opacity: 0;
  transition: opacity 0.3s;
}

.geschichte .ce_gallery ul li a:after {
  content: " ";
  display: block;
  position: absolute;
  width: 4px;
  height: 20px;
  right: 18px;
  bottom: 10px;
  background: #fff;
  opacity: 0;
  transition: opacity 0.3s;
}

.geschichte .ce_gallery ul li a:hover:before,
.geschichte .ce_gallery ul li a:hover:after {
  opacity: 1;
}

/* Kontakt */

.kontakt .standorte h2 {
  width: 100%;
  background-color: #0081b8;
  color: #ffffff;
  text-align: center;
  line-height: 100px;
}

.kontakt h1 {
  color: #3a3a3a;
  margin-bottom: 20px;
}

.kontakt #anschrift h2 {
  font-size: 20px;
  color: #0081b8;
}

/* Footer */

/* Go-Up Link */

#go-up {
  position: absolute;
  top: -20px;
  left: calc(50% - 20px);
  bottom: 0;
  width: 40px;
  height: 40px;
  background-color: #0081b8;
  overflow: hidden;
}

@media only all and (min-width: 940px) {
  #go-up {
    top: -80px;
  }
}

#go-up:before {
  top: 13px;
  left: 14px;
  content: " ";
  position: absolute;
  height: 15px;
  width: 3px;
  background-color: #ffffff;
  transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

#go-up:after {
  top: 13px;
  left: 23px;
  content: " ";
  position: absolute;
  height: 15px;
  width: 3px;
  background-color: #ffffff;
  transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

#go-up a {
  height: 40px;
  display: block;
  margin: 0 auto;
}

#go-up span {
  display: none;
}

body.mobile #go-up {
  display: none;
}

/* ANPASSUNGEN VOM 28.11.2023 */

.mod_article--default {
  max-width: 1300px;
  display: block;
  margin: 0 auto;
  padding: 0 32px;
}

.mod_article--default .ce_text {
  max-width: 43rem;
}

.mod_article--default p:last-child {
  margin-bottom: 0;
}

.mod_article--hoergeraete {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}

.mod_article--hoererlebnis {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
  margin-bottom: 4rem;
}

.mod_article--hoergeraete h1,
.mod_article--hoererlebnis h1 {
  margin-bottom: 0 !important;
}

.mod_article--hoererlebnis h3 {
  margin-top: 0 !important;
}

.mod_article--hoererlebnis .ce_image:nth-child(5) {
  padding: 0 28px;
}

.mod_article--hauptmerkmale {
  padding: 4rem 28px 5rem !important;
  background-color: #0081b8;
  color: #fff;
  box-shadow: 25vw 0 #0081b8, 50vw 0 #0081b8, -25vw 0 #0081b8, -50vw 0 #0081b8;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  margin-top: 8rem;
}

.mod_article--hauptmerkmale .ce_headline {
  grid-column: 1 / -1;
  text-align: center;
  color: #fff;
  margin: 0;
}

.mod_article--hauptmerkmale .ce_image {
  grid-column: span 2;
}

.mod_article--hauptmerkmale .ce_image:nth-child(6) {
  grid-column: 2 / span 2;
}

.mod_article--hauptmerkmale figcaption {
  font-size: 14px;
  font-weight: bold;
  text-align: center;
}

.mod_article--termin {
  text-align: center;
  padding-top: 8rem !important;
  padding-bottom: 8rem !important;
}

.mod_article--termin a {
  display: inline-block;
  padding: 1rem 1.5rem;
  background-color: #0081b8;
  border: 0;
  font-family: "Noto Sans", sans-serif;
  font-size: 16px;
  font-weight: bold;
  color: #ffffff;
  line-height: 1em;
  cursor: pointer;
  text-transform: uppercase;
  -webkit-appearance: none;
  appearance: none;
  text-decoration: none;
}

.mod_article--termin a::after {
  content: "";
  content: inline-block;
  width: 16px;
  height: 12px;
  display: inline-block;
  margin-left: 10px;
  background: transparent url(/files/hoergeraete/css/arrow.svg) no-repeat center/contain;
}

@media only all and (min-width: 1135px) {
  .mod_article--hoergeraete {
    gap: 4rem;
    grid-template-columns: auto 440px;
  }
  .mod_article--hoergeraete .ce_text {
    padding-right: 9rem;
  }
  .mod_article--hoergeraete .ce_text:first-child {
    grid-column: 1 / -1;
    max-width: none;
  }
  .mod_article--hoererlebnis {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .mod_article--hoererlebnis .ce_text {
    grid-column: span 2;
  }
  .mod_article--hoererlebnis .first {
    grid-column: 1 / 3;
  }

  .mod_article--hoererlebnis .ce_text:nth-child(4) {
    justify-self: end;
  }  

  .mod_article--hoererlebnis .ce_image:nth-child(5) {
    grid-column-start: 1;
    grid-row-start: 3;
    padding: 0;
  }

  .mod_article--hoererlebnis .ce_text {
    align-self: center;
  }
}

/* MOBILE NAV */
@media only all and (max-width: 1134.9px) {
  body.transparent-nav #nav-icon {
    top: 15px;
  }
  #nav-icon {
    top: 0px;
    width: 60px;
    height: 55px;
    position: fixed;
    margin-top: 20px;
    margin-left: 27px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: 0.2s ease-in-out;
    -moz-transition: 0.2s ease-in-out;
    -o-transition: 0.2s ease-in-out;
    transition: 0.2s ease-in-out;
    cursor: pointer;
    z-index: 99999999;
  }
  #nav-icon span {
    display: block;
    position: absolute;
    height: 8px;
    width: 40px;
    background: #ffffff;
    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-icon .container {
    width: 45px;
    height: 45px;
  }
  #nav-icon span:nth-child(1) {
    top: 0px;
  }
  #nav-icon span:nth-child(2),
  #nav-icon span:nth-child(3) {
    top: 16px;
  }
  #nav-icon span:nth-child(4) {
    top: 32px;
  }
  #navswitch:checked + #wrapper #header {
    height: 100%;
  }
  #navswitch:checked + #wrapper #nav-icon span:nth-child(1) {
    top: 16px;
    width: 0%;
    left: 50%;
  }
  #navswitch:checked + #wrapper #nav-icon span:nth-child(2) {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  #navswitch:checked + #wrapper #nav-icon span:nth-child(3) {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  #navswitch:checked + #wrapper #nav-icon span:nth-child(4) {
    top: 16px;
    width: 0%;
    left: 50%;
  }
  /* Menu Configuration */
  #main-nav {
    left: -100%;
    height: 100%;
    background-color: #0081b8;
    line-height: 1.5em;
    font-size: 30px;
  }
  #navswitch:checked + #wrapper #main-nav {
    left: 0;
  }
  #main-nav ul {
    margin-top: 140px;
  }
  #main-nav ul .level_2 {
    margin: 0;
    padding: 0;
  }
  #main-nav a:link,
  a:visited {
    font-weight: bold;
  }
  #header {
    top: 0;
    height: 80px;
    background-color: #0081b8;
  }
  /* Small-Nav Configuration */
  body.smallNav #header {
    height: 60px;
    background-color: #0081b8;
  }
  body.smallNav #navswitch:not(:checked) + #wrapper #nav-icon {
    margin-top: 15px;
    top: 0;
  }
  body.smallNav #navswitch:not(:checked) + #wrapper #nav-icon span {
    height: 6px;
    width: 30px;
  }
  body.smallNav #navswitch:not(:checked) + #wrapper #nav-icon span:nth-child(2),
  body.smallNav #navswitch:not(:checked) + #wrapper #nav-icon span:nth-child(3) {
    top: 12px;
  }
  body.smallNav #navswitch:not(:checked) + #wrapper #nav-icon span:nth-child(4) {
    top: 24px;
  }
  /* Content */
  #container #main {
    padding-top: 80px;
  }
}

/* MOBILE OTHER */
@media only all and (max-width: 939.9px) {
  p {
    font-size: 14px;
    line-height: 1.5em;
    margin-bottom: 19px;
  }
  #footer-nav {
    display: none;
  }
  body.transparent-nav #container #main {
    padding-top: 0;
  }
  /* Home */
  #container .inside > div {
    padding: 27px 0;
  }
  #container .inside .ce_text,
  #container .inside .ce_form,
  #container .inside .ce_gallery,
  #container .inside .ce_headline {
    padding-left: 28px;
    padding-right: 28px;
  }
  /* #container .inside #slider>.ce_gallery,*/
  #container .inside > div:first-of-type {
    padding: 0;
  }
  #willkommen {
    padding: 0 0 !important;
  }
  #willkommen-article {
    padding-top: 27px;
    padding-bottom: 32px;
  }
  #anschrift-article {
    padding-top: 11px;
    padding-bottom: 43px;
  }
  #anschrift-article p {
    margin-bottom: 3px;
  }
  #willkommen h1 {
    margin-top: 19px;
    margin-bottom: 35px;
    font-weight: 400;
    font-size: 22px;
    color: #3a3a3a;
  }
  #anschrift-article h2 {
    margin-top: 31px;
    margin-bottom: 5px;
    color: #0081b8;
  }
  #informationen > div:first-of-type h1 {
    margin-top: 0;
  }
  .kontakt #container .inside .ce_form {
    padding: 0 32px;
  }
  .kontakt #anschrift {
    padding: 48px 0;
  }
  #kontakt-10 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  #kontakt-10 h1 {
    margin-top: 42px;
    margin-bottom: 35px;
  }
  #kontakt-10 .ce_form {
    padding: 0 32px !important;
  }
  #kontakt-10 .ce_form .formbody input,
  #kontakt-10 .ce_form .formbody textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 24px;
  }
  #kontakt-10 .ce_form .formbody textarea {
    margin-bottom: 20px;
  }
  #kontakt-10 .ce_form .formbody textarea {
    margin-bottom: 16px;
  }
  #kontakt-10 .widget-submit button[type="submit"] {
    width: 114px;
    height: 40px;
    padding: 0;
  }
  #contact-article {
    background-color: #f0f0f0;
    padding-bottom: 26px;
  }
  #box-container {
    height: 457px;
  }
  #map-article h1,
  #map-article2 h1 {
    margin-bottom: 0;
  }
  #map-article label,
  #map-article2 label {
    padding: 0 27px;
  }
  /* Team */
  #team h1 {
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .team #team img {
    width: 100%;
    height: auto;
    position: relative;
    max-width: none;
    overflow: hidden;
  }
  .team #fotos {
    position: relative;
    padding: 27px 16px !important;
  }
  .team #fotos > .ce_image {
    padding-bottom: 25px;
    width: 49.5%;
  }
  .team #fotos > .ce_image img {
    width: 100%;
    height: auto;
  }
  .team #fotos figure {
    font-size: 0;
    width: 100%;
  }
  .team #fotos figcaption {
    height: 30px;
    width: 100%;
    line-height: 225%;
    font-size: 14px;
  }
  .team #fotos > div:nth-child(odd) {
    float: left;
    padding-right: 1%;
  }
  .two-rows h1,
  .mod_article--default h1 {
    margin-top: 20px;
    margin-bottom: 35px;
  }
  /* Leistungen */
  #container .inside > #spektrum {
    padding-bottom: 0;
  }
  #spektrum ul {
    padding-bottom: 30px;
    padding-left: 19px;
  }
  #leistungen .ce_image,
  #spektrum .ce_image {
    margin-top: 20px;
  }
  #leistungen .ce_image img,
  #spektrum .ce_image img {
    width: 100%;
    max-width: 400px;
  }
  /* Kontakt */
  .kontakt #container #main {
    padding-top: 60px;
  }
  #container .inside > .standorte {
    padding-top: 50px;
  }
  .kontakt #container .inside #kontakt-10 .ce_headline {
    padding-top: 30px;
  }
  .kontakt .standorte h2 {
    height: 60px;
    line-height: 60px;
    padding-left: 0 !important;
  }
  .kontakt #container .inside .standorte .ce_headline {
    padding: 0 27px;
  }
  .kontakt .standorte .ce_image {
    height: 320px;
    width: 100%;
  }

  /* Geschichte */
  #geschichte .ce_gallery {
    padding-left: 27px !important;
    padding-right: 27px !important;
    width: 100%;
    box-sizing: border-box;
  }
  #geschichte .ce_gallery ul li {
    width: 100%;
    height: 100%;
  }
  #geschichte .ce_gallery ul li img {
    width: 100%;
  }
  #geschichte .ce_gallery ul li.col_0 {
    margin-right: 0;
  }
  /* Impressum & Datenschutz */
  #impressum h1,
  #datenschutz h1 {
    color: #000000;
    margin-bottom: 15px;
  }
  #formular-bestaetigung,
  #impressum,
  #datenschutz {
    min-height: 65vh;
  }
  /* Footer */
  #footer #mobile-footer {
    padding: 0px 27px 50px 27px;
    background-color: #0081b8;
    color: #ffffff;
    height: 238px;
    line-height: 1.5em;
  }
  #footer #mobile-footer > div {
    padding-top: 47px;
  }
  #footer #mobile-footer p {
    font-size: 14px;
  }
  #kontakt-10 .widget-checkbox fieldset {
    max-width: none;
  }
}

@media only all and (min-width: 401px) and (max-width: 767.9px) {
  /* Leistungen */
  #leistungen .ce_image img,
  #spektrum .ce_image img {
    box-sizing: border-box;
    padding: 0 32px;
  }
  #spektrum .ce_image.last {
    margin-bottom: 40px;
  }
  /* Geschichte */
  #geschichte .ce_gallery {
    display: inline;
  }
  #geschichte .ce_gallery ul {
    padding: 0 32px;
  }
  #geschichte .ce_gallery ul li {
    width: 49%;
    height: 49%;
  }
  #geschichte .ce_gallery ul li:nth-of-type(odd) {
    margin-right: 2%;
  }
  #geschichte .ce_gallery ul li img {
    width: 100%;
  }
}

@media only all and (min-width: 768px) and (max-width: 939.9px) {
  /* Leistungen */
  #leistungen .ce_image img,
  #spektrum .ce_image img {
    box-sizing: border-box;
    padding: 0 32px;
  }
  #spektrum .ce_image.last {
    margin-bottom: 40px;
  }
  /* Team */
  .team #fotos .ce_image {
    width: 32.6%;
  }
  .team #fotos > div {
    float: left;
    padding-right: 1.1%;
  }
  .team #fotos > div:nth-child(3n) {
    float: none;
    padding-right: 0;
  }
  /* Geschichte */
  #geschichte .ce_gallery {
    display: inline;
  }
  #geschichte .ce_gallery ul {
    padding: 0 32px;
  }
  #geschichte .ce_gallery ul li {
    width: 49%;
    height: 49%;
  }
  #geschichte .ce_gallery ul li:nth-of-type(odd) {
    margin-right: 2%;
  }
  #geschichte .ce_gallery ul li img {
    width: 100%;
  }
}

@media only all and (min-width: 1001px) and (max-width: 939.9px) {
  /* Team */
  .team #fotos .ce_image {
    width: 32.6%;
  }
  .team #fotos > div {
    float: left;
    padding-right: 1.1%;
  }
  .team #fotos > div:nth-child(3n) {
    float: none;
    padding-right: 0;
  }
  /* Leistungen */
  #leistungen .ce_text:not(.first),
  #spektrum .ce_text:not(.first) {
    width: 50%;
    float: left;
  }
  /* Geschichte */
  #geschichte .ce_gallery {
    display: inline;
  }
  #geschichte .ce_gallery ul {
    padding: 0 32px;
  }
  #geschichte .ce_gallery ul li {
    width: 30%;
    height: 30%;
    margin-left: 1.5%;
  }
  #geschichte .ce_gallery ul li img {
    width: 100%;
  }
  #geschichte .ce_gallery ul li:nth-of-type(3) {
    margin-right: 0 !important;
  }
  #geschichte .ce_gallery ul li:nth-of-type(6) {
    margin-right: 0 !important;
  }
}

/* DESKTOP NAV */
@media only all and (min-width: 1135px) {
  /* Navigation */
  #header {
    z-index: 20;
    background-color: #ffffff;
    border-bottom: 8px solid #0081b8;
    height: 120px;
    overflow: hidden;
  }
  #header .inside {
    max-width: 1300px;
    display: block;
    height: 128px;
    margin: 0 auto;
    padding: 0 32px;
  }
  #main-nav {
    position: relative;
    display: inline-block;
    width: calc(100% - 250px);
  }
  #main-nav ul {
	line-height: 17px;
    margin-top: 51px;
    padding: 0;
    transition: all 0.2s;
  }
  #main-nav ul li {
    display: inline;
    margin-right: 24px;
    font-size: 16px;
  }
  @media (min-width: 1400px) {
	#main-nav ul {
	  line-height: 28px;
	}
	#main-nav ul li {
	  margin-right: 30px;
	  font-size: 20px;
	}
  }

  #main-nav strong {
    color: #ffffff;
  }
  #main-nav .level_2 {
    display: none;
  }
  #main-nav .level_1 {
    white-space: nowrap;
  }
  #main-nav a:link,
  #main-nav a:visited,
  #main-nav strong {
    color: #0081b8;
  }
  #main-nav a:hover {
    color: rgba(0, 129, 184, 0.6);
  }
  /* Transparent Nav */
  .transparent-nav #main-nav a:link,
  .transparent-nav #main-nav a:visited,
  .transparent-nav #main-nav strong {
    color: #ffffff;
    transition: color 0.5s;
  }
  .transparent-nav #main-nav a:hover {
    color: rgba(255, 255, 255, 0.6);
  }
  body.smallNav #header {
    height: 72px;
  }
  body.smallNav #main-nav ul,
  body.smallNav.transparent-nav #main-nav ul {
    margin-top: 29px;
  }
  body.transparent-nav #main-nav ul {
    margin-top: 54px;
  }
  body.smallNav.transparent-nav #header {
    background-color: rgba(255, 255, 255, 1);
    border-bottom: 8px solid #0081b8;
  }
  body.smallNav.transparent-nav #main-nav a:link,
  body.smallNav.transparent-nav #main-nav a:visited,
  body.smallNav.transparent-nav #main-nav strong {
    color: #0081b8;
  }
  body.smallNav.transparent-nav #main-nav a:hover {
    color: rgba(0, 129, 184, 0.6);
  }
  #container #main {
    padding-top: 128px;
  }
}

/* DESKTOP */
@media only all and (min-width: 940px) {
  h2 {
    font-weight: 600;
    font-size: 20px;
    text-transform: uppercase;
  }
  /* Home */
  /* Slider */
  #container .inside {
    font-size: 0;
  }
  /* Content */
  h1 {
    font-size: 40px;
  }
  /*Two Article Alignment */
  .two-articles {
    display: table;
    width: 100%;
    max-width: 1364px;
    margin: 0 auto;
  }
  .two-articles .table-cell {
    display: table-cell;
    vertical-align: top;
    margin: 100px 32px;
    padding-left: 80px;
    padding-bottom: 103px;
  }
  .two-articles > * {
    padding-top: 89px;
  }
  /* Willkommen & Anschrift */
  #willkommen {
    width: 100%;
    background: #ffffff;
    background: -moz-linear-gradient(left, #ffffff 0%, #ffffff 50%, #f0f0f0 50%, #f0f0f0 100%);
    background: -webkit-linear-gradient(left, #ffffff 0%, #ffffff 50%, #f0f0f0 50%, #f0f0f0 100%);
    background: linear-gradient(to right, #ffffff 0%, #ffffff 50%, #f0f0f0 50%, #f0f0f0 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ffffff ', endColorstr='#f0f0f0 ', GradientType=1);
  }
  #willkommen-article {
    width: 66%;
  }
  #willkommen-article > * {
    box-sizing: border-box;
    margin-left: 32px;
    padding-right: 160px;
    max-width: 858px;
    float: right;
  }
  #willkommen-article h1 {
    margin-bottom: 63px;
    font-weight: 400;
  }
  #anschrift-article {
    width: 34%;
  }
  #anschrift-article > * {
    max-width: 442px;
    box-sizing: border-box;
    margin-right: 32px;
    margin-bottom: 20px;
    float: left;
  }
  #anschrift-article h2 {
    font-size: 20px;
    color: #0081b8;
  }
  #anschrift-article p {
    margin-bottom: 10px;
  }
  /* Kontakt & Karte */
  #kontakt-10 {
	position: relative;
	z-index: 10;
    width: 100%;
    background: rgb(240, 240, 240);
    background: -moz-linear-gradient(left, rgba(240, 240, 240, 1) 0%, rgba(240, 240, 240, 1) 50%, rgba(255, 255, 255, 1) 51%, rgba(255, 255, 255, 1) 100%);
    background: -webkit-linear-gradient(left, rgba(240, 240, 240, 1) 0%, rgba(240, 240, 240, 1) 50%, rgba(255, 255, 255, 1) 51%, rgba(255, 255, 255, 1) 100%);
    background: linear-gradient(to right, rgba(240, 240, 240, 1) 0%, rgba(240, 240, 240, 1) 50%, rgba(255, 255, 255, 1) 51%, rgba(255, 255, 255, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#f0f0f0', endColorstr='#ffffff', GradientType=1);
  }
  #contact-article,
  #map-article,
  #map-article2 {
    width: 50%;
  }
  #contact-article {
    background-color: #f0f0f0;
    padding: 0 32px;
    padding-top: 89px;
    padding-bottom: 5rem;
  }
  #map-article,
  #map-article2 {
    background-color: #ffffff;
    max-width: 650px;
    box-sizing: border-box;
    padding-right: 32px;
  }
  #map-article label,
  #map-article2 label {
    font-size: 16px;
    margin-bottom: 54px;
  }
  #kontakt-10 .ce_form h1 {
    margin-bottom: 72px;
  }
  #map-article,
  #map-article2 {
    height: 100%;
    width: 100%;
    margin-top: 89px;
  }
  #map-article > *,
  #map-article2 > * {
    width: 480px;
    margin: 0 32px;
    padding-left: 32px;
  }
  body.transparent-nav #container #main {
    padding-top: 0;
  }
  /* Two Rows Layout */
  body.two-rows #container {
    background: url(../../files/hoergeraete/images/background.png) no-repeat 0 0;
    background-position-x: center;
  }
  body.two-rows.geschichte #container {
    background: url(../../files/hoergeraete/images/background-geschichte.png) no-repeat 0 0;
    background-position-x: center;
  }
  .two-rows h1,
  .mod_article--default h1 {
    margin-bottom: 4rem;
  }
  .two-rows #container .inside {
    max-width: 1300px;
    display: block;
    margin: 0 auto;
    padding: 0 32px;
  }
  .two-rows #contaigner .inside > div {
    margin-bottom: 160px;
  }
  .two-rows .inside > div:last-of-type {
    margin-bottom: 150px;
  }
  .two-rows .inside > div > .ce_text {
    width: 53%;
    display: inline-block;
    vertical-align: top;
  }
  .two-rows .inside > div > .ce_text:first-of-type {
    width: 65%;
  }
  .two-rows .inside > div > .ce_image,
  .two-rows .inside > div > .ce_gallery {
    min-width: 47%;
    text-align: right;
    display: inline-block;
  }
  .two-rows.geschichte .inside > div > .ce_gallery {
    float: left;
    width: 600px;
  }
  .two-rows.geschichte .inside > div > .ce_text {
    width: auto;
    display: block;
  }
  #leistungen {
    margin-bottom: 20px;
  }
  /* Team */
  .team h1 {
    padding-bottom: 75px;
  }
  .team #team {
    background-color: #ffffff;
    margin-bottom: 87px;
  }
  .team #team .ce_text {
    padding-left: 32px;
    max-width: 1300px;
    display: block;
    margin: 0 auto;
  }
  .team #team img {
    width: 100%;
    height: auto;
  }
  .team #fotos {
    max-width: 1280px;
    padding: 0 32px 46px 32px;
    display: block;
    margin: 0 auto;
  }
  .team #fotos > div {
    display: inline-block;
    margin-bottom: 41px;
    margin-right: 2%;
  }
  .team #fotos > div:nth-of-type(4n) {
    margin-right: 0;
  }
  .team #fotos .ce_image {
    width: 23.5%;
  }
  .team #fotos .ce_image img {
    width: 100%;
    height: auto;
  }
  .team #fotos figcaption {
    height: 59px;
    line-height: 300%;
  }
  /* Leistungen */
  #spektrum {
    margin-top: 139px;
  }
  /* Geschichte */
  .geschichte .inside {
    padding: 0 32px;
  }
  .two-rows .ce_gallery ul li.col_0 {
    margin-right: 0;
  }
  .geschichte .ce_gallery ul li:nth-of-type(odd) {
    margin-right: 20px;
  }
  .geschichte .ce_gallery ul li.col_0 {
    margin-right: 20px;
  }
  .geschichte .ce_gallery ul li {
    margin-right: 20px;
  }
  .geschichte .ce_gallery ul li:nth-child(3n) {
    margin-right: 0;
  }
  .geschichte .inside > div > .ce_gallery {
    text-align: left;
    min-width: 60%;
    margin-right: 40px;
  }
  /* Kontakt */
  body.kontakt {
    background-color: #f0f0f0;
  }
  .kontakt #container #main {
    padding-top: 120px;
  }
  .kontakt #kontakt-10 {
    background: none;
  }
  .kontakt #kontakt {
    max-width: 1300px;
    display: block;
    margin: 0 auto;
    padding: 90px 0;
  }
  .kontakt #kontakt-10,
  .kontakt #anschrift {
    width: 50%;
    display: inline-block;
    vertical-align: top;
    box-sizing: border-box;
  }
  .kontakt #kontakt-10 {
    padding-left: 32px;
  }
  #kontakt-10 .checkbox_container label {
    margin-left: 30px;
  }
  .kontakt #kontakt p {
    margin-bottom: 10px;
  }
  .kontakt #anschrift {
    padding-left: 160px;
  }
  .kontakt #anschrift h1 {
    margin-bottom: 74px;
  }
  .kontakt #anschrift h2 {
    margin-bottom: 10px;
  }
  .kontakt #anschrift > div {
    margin-bottom: 20px;
  }
  .kontakt .standorte {
    width: 100%;
    background-color: #ffffff;
  }
  .kontakt .standorte .inner {
    max-width: 1300px;
    display: block;
    margin: 0 auto;
    padding: 0 32px;
    padding-bottom: 160px;
  }
  .kontakt .standorte > div > div {
    width: 49%;
    display: inline-block;
    margin-bottom: 24px;
  }
  .kontakt .standorte > div > div:nth-child(1) {
    margin-right: 0.5%;
  }
  .kontakt .standorte > div > div:nth-child(1) {
    margin-left: 0.5%;
  }
  .kontakt .standorte h1 {
    margin-top: 86px;
    margin-bottom: 69px;
  }
  .kontakt .standorte h2 {
    width: 100%;
    height: 160px;
    line-height: 160px;
    font-size: 40px;
  }
  #standort-hamminkeln,
  #standort-weeze  {
    float: right;
  }
  .kontakt .standorte .ce_image {
    width: 100%;
    height: 560px;
  }
  .kontakt h1 {
    color: #3a3a3a;
    margin-bottom: 80px;
  }
  /* Impressum & Datenschutz */
  #impressum,
  #datenschutz {
    max-width: 1300px;
    padding: 0 32px;
    display: block;
    margin: 0 auto;
    min-height: 560px;
  }
  #impressum h1,
  #datenschutz h1 {
    margin-bottom: 25px;
  }
  .formular-confirm .inside {
    max-width: 1300px;
    display: block;
    margin: 0 auto;
    padding: 0 32px;
  }
  #formular-bestaetigung {
    min-height: 600px;
  }
  /* Impressum & Datenschutz */
  #impressum,
  #datenschutz {
    padding-bottom: 50px;
  }
  #impressum p,
  #datenschutz p {
    margin-bottom: 15px;
  }
  /* Footer */
  #footer {
    width: 100%;
    background-color: #0081b8;
    padding: 60px 20px 120px;
    box-sizing: border-box;
  }
  #footer .inside {
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
  }
  #footer-nav {
    color: #ffffff;
    line-height: 60px;
    text-align: center;
  }
  #footer-nav ul {
    padding: 0;
  }
  #footer-nav ul li,
  #footer-nav .level_2 {
    display: inline-block;
    font-size: 20px;
    padding: 0;
    text-transform: uppercase;
  }
  #footer-nav ul li {
    margin-left: 44px;
  }
  #footer-nav ul li:first-of-type {
    margin-left: 0;
  }
  #footer-nav .level_2 li:first-of-type {
    margin-left: 44px;
  }
  #footer-nav a:link,
  #footer-nav a:visited,
  #footer-nav span {
    color: #ffffff;
  }
  #mobile-footer {
    display: none;
  }
  #mapheader {
    margin-top: 0;
  }
  .googlemap .ce_image {
    height: 560px;
  }

  /* DESKTOP (small) */

  @media (max-width: 1134.9px) {
    /* Footer */
    #footer-nav ul li {
      font-size: 18px !important;
    }
  }
}

.banner {
  margin: 32px 0 -32px;
}

@media only all and (min-width: 940px) {
  .kontakt .standorte .ce_image img,
  .googlemap .ce_image img {
    height: 100%;
    width: auto;
  }
}

@media only all and (min-width: 1229px) {
  .kontakt .standorte .ce_image img {
    height: auto;
    width: 100%;
  }
}

body.signia {
  overflow: hidden;
}

body.signia #go-up {
  display: none;
}

body.signia #footer {
  display: none;
}

@media only all and (max-width: 939.9px) {
  body.signia #container #main {
    padding-top: 80px;
  }
  .signia-container {
    height: calc(100vh - 80px);
  }
}

@media only all and (min-width: 940px) {
  body.signia #container #main {
    padding-top: 128px;
  }
  .signia-container {
    height: calc(100vh - 128px);
  }
}

/* ------------ */
/* USERCENTRICS */
/* ------------ */

.eMNcwX > img {
	visibility: hidden;
}

/* ---------- */
/* 06.03.2023 */
/* ---------- */

/* -------- */
/* KARRIERE */
/* -------- */

.jobs {
  padding: 3rem 32px !important;
}

.jobs h1 {
  color: #3a3a3a;
  font-weight: 400;
  margin-top: 0;
  margin-bottom: 2rem;
}

.jobs h2 {
  margin-bottom: 2rem;
}

.jobs h3 {
  margin-top: 0;
}

.jobs ul {
  padding-left: 1.5rem;
}

.jobs ul + * {
  margin-top: 1.5rem !important;
}

.jobs li {
  font-size: 14px;
  line-height: 1.5em;
}

.jobs .ce_text,
.jobs .ce_headline,
.jobs .ce_accordionSingle {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.jobs__image {
  margin-top: 3rem;
}

.jobs__grid {
  grid-gap: 0;
  max-width: 1300px;
  margin-left: auto;
  margin-right: auto;
}

.jobs__grid p {
  margin: 0;
}

.jobs__grid p + p {
  margin-top: 2rem;
}

.jobs__grid p + ul {
  margin-top: 1rem;
}

.jobs__grid ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.jobs__grid li {
  position: relative;
  padding: 0 0 0 1rem;
}

.jobs__grid li::before {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  background-color: #0081b8;
  position: absolute;
  left: 2px;
  top: 8px;
}

.jobs__grid ul.metadata {
  margin-top: 0.5rem;
}

.jobs__button {
  margin-top: 1rem;
}

.terminlink__button {
  margin-top: 0rem;
}

.jobs .ce_accordionSingle .ui-accordion-header {
  cursor: pointer;
  position: relative;
  margin-bottom: 1rem;
}

.jobs .ce_accordionSingle .ui-accordion-header .headline {
  color: #0081b8;
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 0;
  padding-right: 2rem;
}

.jobs .ce_accordionSingle .ui-accordion-header:hover .headline {
  text-decoration: underline;
}

.jobs .ce_accordionSingle .ui-accordion-header:before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 0;
  width: 0.5rem;
  height: 0.5rem;
  border-color: #0081b8;
  border-width: 0 2px 2px 0;
  border-style: solid;
  transform: translate(-50%, calc(-50% - 2px)) rotate(45deg);
  transition: transform 0.3s;
}

.jobs .ce_accordionSingle .ui-accordion-header span.small {
  font-size: 14px;
  font-weight: normal;
}

.jobs .ce_accordionSingle .ui-accordion-header-active:before {
  transform: translate(-50%, calc(-50%)) rotate(135deg);
}

.jobs .ce_accordionSingle .ui-accordion-content {
  padding-top: 0.5rem;
  padding-bottom: 2rem;
}

.jobs .ce_accordionSingle + .ce_accordionSingle {
  padding-top: 1rem;
  border-top: 1px solid #393939;
}

.jobs__contact {
  background-color: #f0f0f0;
}

.jobs__contact h1 {
  margin-bottom: 2rem;
  font-weight: bold;
}

.jobs__contactform {
  padding: 0 !important;
  margin-top: 1rem;
}

.jobs__contactform input,
.jobs__contactform textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-family: "Noto Sans", sans-serif;
  font-size: 14px;
  padding: 9px 16px;
  margin-bottom: 24px;
  height: 48px;
  width: 100%;
  line-height: 2.5em;
  border: 0;
  box-sizing: border-box;
  outline: none;
  resize: none;
}

.jobs__contactform textarea {
  height: 192px;
}

.jobs__contactform fieldset {
  padding: 0;
  border: 0;
}

.jobs__contactform input[type="checkbox"] {
  width: 20px !important;
  height: 20px !important;
  padding: 0 !important;
  background-color: #fff;
  margin: 0;
  float: left;
}

.jobs__contactform input[type="checkbox"]:checked {
  background-image: url(/files/hoergeraete/css/check.png);
  background-size: 80%;
  background-repeat: no-repeat;
  background-position: center;
}

.jobs__contactform .widget-submit,
.jobs__contactform .widget-explanation {
  margin-top: 1.5rem;
}

.terminlink__button a,
.jobs__button a,
.jobs__contactform button[type="submit"] {
  display: inline-block;
  padding: 1rem 1.5rem;
  background-color: #0081b8;
  border: 0;
  font-family: "Noto Sans", sans-serif;
  font-size: 16px;
  font-weight: bold;
  color: #ffffff;
  line-height: 1em;
  cursor: pointer;
  float: left;
  text-transform: uppercase;
  -webkit-appearance: none;
  appearance: none;
  text-decoration: none;
}

.jobs__button a::after {
  content: "";
  content: inline-block;
  width: 16px;
  height: 12px;
  display: inline-block;
  margin-left: 10px;
  background: transparent url("../../files/hoergeraete/css/arrow.svg") no-repeat center/contain;
}

.jobs__contactform label .ce_text {
  padding: 0 0 0 20px !important;
}

.jobs__contactform a {
  color: #0081b8;
}

.jobs__contactdata h1 {
  margin: 3rem 0 1rem;
  color: #3a3a3a;
}

.jobs__contactdata h2 {
  color: #0081b8;
  margin: 1rem 0;
}

.jobs__contactdata h2,
.jobs__contactdata p {
  margin-bottom: 0.5rem;
}

.jobs__video {
  background: #0081b8 url("../../files/hoergeraete/css/video_bg.svg") no-repeat bottom left/120vw;
  color: #fff;
}

.jobs__video .ce_player {
  margin-bottom: 3rem;
  position: relative;
}

.jobs__video .ce_player:not(.hidePlayIcon) {
  cursor: pointer;
}

.jobs__video .ce_player:not(.hidePlayIcon)::before {
  content: "";
  display: block;
  position: absolute;
  width: 12%;
  padding-top: 12%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: transparent url("../../files/hoergeraete/css/video_play.svg") no-repeat center/contain;
}

.jobs__video video {
  width: 100%;
  height: auto;
}

.jobs__video p {
  margin-bottom: 0;
}

.jobs__video h1,
.jobs__video a {
  color: #fff;
}

.jobs__video a {
  white-space: nowrap;
}

.jobs__joblist .jobs__button {
  margin-top: 2.5rem !important;
}

.jobs__joblist h2 {
  margin-top: 0.25rem;
}

@media (min-width: 940px) {
  .jobs h1 {
    font-size: 40px;
    line-height: 48px;
    margin-bottom: 3rem;
  }
  .jobs__contactdata h2,
  .jobs__contactdata p {
    margin-bottom: 0.75rem;
  }
}

/* SM */
@media (min-width: 550px) {
  .jobs__grid {
    grid-gap: 0 2rem;
  }
  .jobs__video {
    background-size: 80vw;
  }
  .mod_article--hauptmerkmale {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  }
  .mod_article--hauptmerkmale .ce_image:nth-child(5) {
    grid-column: 2 / span 2;
  }
  .mod_article--hauptmerkmale .ce_image:nth-child(6) {
    grid-column: 4 / span 2;
  }
}

/* MD */
@media (min-width: 768px) {
  .mod_article.first {
    padding-top: 5rem;
  }
  .jobs {
    padding: 5rem 32px !important;
  }
  .jobs__grid {
    grid-gap: 0 3rem;
  }
  .jobs__image {
    margin-top: 0;
  }
  .jobs__contactdata h1 {
    margin-top: 0;
  }
  .jobs__video {
    background-size: 36rem;
  }
  .mod_article--hauptmerkmale {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  }
  .mod_article--hauptmerkmale .ce_image {
    grid-column: auto / span 1 !important;
  }
}

/* LG */
@media (min-width: 940px) {
  .jobs__image {
    margin-top: 0;
  }
  .jobs__video .ce_player {
    margin-bottom: 0;
  }
  .mod_article--hauptmerkmale figcaption {
    font-size: 20px;
  }
}

/* XL */
@media (min-width: 1100px) {
  .jobs__joblist h2 {
    font-size: 28px;
    margin-bottom: 3rem;
  }
  .jobs .ce_accordionSingle .ui-accordion-header {
    font-size: 24px;
    margin-bottom: 1.5rem;
  }
  .jobs .ce_accordionSingle .ui-accordion-header span.small {
    font-size: 19px;
  }
  .jobs .ce_accordionSingle + .ce_accordionSingle {
    padding-top: 1.5rem;
  }
}

/* HOTFIX 29.01.2024 */

#geschichte {
	overflow: auto;
	padding-bottom: 100px;
}

.praxisfotos h1 {
	display: block !important;
	padding-left: 0;
	margin: 0 0 20px !important;
}

.praxisfotos ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 20px;
}

.geschichte .ce_gallery ul li {
	margin: 0 !important;
	width: 140px !important;
}

@media only all and (min-width: 401px) and (max-width: 939.9px) {
	.praxisfotos h1 {
		padding-left: 27px;
	}
}

/* ---------- */
/* 27.05.2024 */
/* ---------- */

.pt {
	padding-top: 5rem !important;
}
#teaser {
    padding: 0 !important;
    font-size: 0;
}

#teaser>div.ce_image>a {
    max-height: 600px;
    min-height: 200px;
    width: 100%;
    display: block;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    position: relative;
}

#teaser>div.ce_image>a:before {
    content: ' ';
    padding-top: 50%;
    display: block;
    width: 100%;
}

#teaser>div.ce_image>a>span.teaser-plus {
    position: absolute;
    bottom: 0;
    right: 0;
    color: #FFF;
    width: 80px;
    height: 80px;
    background: #0081b8;
}

#teaser>div.ce_image>a>span.teaser-plus:before {
    content: '';
    position: absolute;
    width: 40px;
    height: 8px;
    background-color: #FFF;
    margin-top: 36px;
    margin-left: 20px;
}

#teaser>div.ce_image>a>span.teaser-plus:after {
    content: '';
    position: absolute;
    width: 40px;
    height: 8px;
    background-color: #FFF;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    margin-top: 36px;
    margin-left: 20px;
}

#teaser>div.ce_image>a>span.teaser-overlay-text {
    display: block;
    color: #FFF;
    font-weight: 600;
    line-height: 3em;
    font-size: 22px;
    z-index: 3;
    position: absolute;
    bottom: 0;
    text-align: center;
    width: 100%;
    opacity: 1;
    text-transform: uppercase;
}

#teaser>div.ce_image>a>span.teaser-overlay {
    width: 100%;
    display: block;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 1;
    z-index: 2;
    transition: all 0.3s;
}

#teaser>div.ce_image>a>span.teaser-overlay:before {
    content: '';
    padding-top: 100%;
    display: block;
    width: 100%;
}

#teaser>div.ce_image>a:hover>.teaser-overlay,
#teaser>div.ce_image>a:hover>.teaser-overlay-text {
    opacity: 0;
}

@media only all and (min-width: 1024px) {
    #teaser>div.ce_image {
        display: inline-block;
        width: calc(100% / 3);
    }
    #teaser>div.ce_image>a>span.teaser-overlay-text {
        font-size: 40px;
    }
    #teaser>div.ce_image>a:before {
        padding-top: 100%;
    }
}
#slider {
    position: relative;
    padding-top: 0 !important;
}

#slider:before {
    content: '';
    display: none;
    position: absolute;
    background: url('../../files/hoergeraete/images/jubilaeum.svg') no-repeat 0 0;
    background-size: contain;
    width: 200px;
    height: 200px;
    z-index: 10;
    bottom: 10%;
    left: 10%;
    transform: rotate(-15deg);
}

#slider div.ce_gallery {
    position: relative;
    overflow: hidden;
    line-height: 1px;
    min-height: 300px;
}

#slider div.ce_gallery>input {
    display: none;
}

#slider div.ce_gallery>div {
    position: absolute;
    left: -100%;
    top: 0;
    transition: left .5s, visibility .5s;
    width: 100%;
    height: 100%;
    visibility: hidden;
}

#slider div.ce_gallery>div>div.image_container_header {
    width: 100%;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

#slider div.ce_gallery>div p {
    text-transform: uppercase;
    font-size: 20px;
    font-weight: normal;
    line-height: 1.2em;
    color: #fff;
    position: absolute;
    bottom: 10%;
    right: 0;
    text-align: left;
    margin: 0;
    width: 200px;
    margin-right: 30px;
}

#slider div.ce_gallery:before {
    content: ' ';
    display: block;
    height: 0;
    padding-top: 45%;
}

#slider div.ce_gallery>input:checked~div {
    left: 100%;
}

#slider div.ce_gallery>input:checked+div {
    left: 0;
    visibility: visible;
}

#slider div.ce_gallery figure {
    margin: 0;
}

#slider div.ce_gallery img {
    width: 100%;
    height: auto;
}

#slider #slider-labels {
    width: 100%;
    top: auto;
    bottom: 5%;
    height: 38px;
    display: block;
    position: absolute;
    text-align: center;
    left: 0;
    visibility: hidden;
}

#slider #slider-labels label {
    width: 38px;
    height: 38px;
    position: relative;
    border-radius: 50%;
    display: inline-block;
    background-color: transparent;
    cursor: pointer;
    margin: 0 16px;
}

#slider #slider-labels label:before {
    content: ' ';
    width: 16px;
    height: 16px;
    position: absolute;
    border-radius: 50%;
    display: inline-block;
    background-color: #fff;
    top: 11px;
    left: 11px;
}

input#gallery_2_image_1:checked~#slider-labels label[for="gallery_2_image_1"]:after,
input#gallery_2_image_2:checked~#slider-labels label[for="gallery_2_image_2"]:after,
input#gallery_2_image_3:checked~#slider-labels label[for="gallery_2_image_3"]:after,
input#gallery_2_image_4:checked~#slider-labels label[for="gallery_2_image_4"]:after,
input#gallery_2_image_5:checked~#slider-labels label[for="gallery_2_image_5"]:after,
input#gallery_2_image_6:checked~#slider-labels label[for="gallery_2_image_6"]:after,
input#gallery_2_image_7:checked~#slider-labels label[for="gallery_2_image_7"]:after,
input#gallery_2_image_8:checked~#slider-labels label[for="gallery_2_image_8"]:after,
input#gallery_2_image_9:checked~#slider-labels label[for="gallery_2_image_9"]:after,
input#gallery_2_image_10:checked~#slider-labels label[for="gallery_2_image_10"]:after {
    content: ' ';
    width: 38px;
    height: 38px;
    position: absolute;
    border-radius: 50%;
    border: 4px solid #fff;
    display: inline-block;
    top: 0;
    left: 0;
    box-sizing: border-box;
}

@media only all and (min-width: 1024px) {
    #slider:before {
        display: inline-block;
    }
    #slider div.ce_gallery:before {
        padding-top: 45%;
    }
    #slider #slider-labels {
        visibility: visible;
    }
    #slider div.ce_gallery>div p {
        text-transform: uppercase;
        font-size: 48px;
        line-height: 1.2em;
        font-weight: normal;
        color: #fff;
        position: absolute;
        bottom: 20%;
        right: 10%;
        width: 400px;
        margin: 0;
        left: auto;
    }
}

@media only all and (min-width: 1560px) {
    #slider:before {
        display: inline-block;
    }
    #slider div.ce_gallery>div p {
        width: 600px;
        font-size: 60px;
    }
}
#header #logo {
    position: fixed;
    width: 220px;
    height: 40px;
}

#header #logo a:before,
#header #logo a:after {
    content: ' ';
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: contain;
}

#header #logo a:before {
    background: transparent url(../../files/hoergeraete/images/hoergeraete-horst_logo.svg) no-repeat 0 0;
    opacity: 0;
}

#header #logo a:after {
    background: transparent url(../../files/hoergeraete/images/hoergeraete-horst_logo-black.svg) no-repeat 0 0;
    opacity: 1;
}

#logo a {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
	transition: opacity 0.2s;
}

#logo a:hover {
	opacity: 0.6;
}

#logo span {
    display: none;
}

#logo {
    position: fixed;
    z-index: 21;
    width: 232px;
    height: 40px;
}


/* MOBILE */

@media only all and (max-width: 1134.9px) {
    body.transparent-nav #header #logo {
        top: 30px;
    }
    #header #logo {
        top: 26px;
        height: 35px;
        right: 0;
        transition: all 0.2s;
    }
    #header #logo a:before {
        opacity: 1;
    }
    #header #logo a:after {
        opacity: 0;
    }
    /* Small Nav */
    body.smallNav #navswitch:not(:checked)+#wrapper #header #logo {
        width: 145px;
        height: 26px;
        top: 20px;
        right: 10px;
    }
}


/* Desktop */

@media only all and (min-width: 1135px) {
    #header #logo {
        position: relative;
        float: right;
        display: inline-block;
        right: 0;
        transition: all 0.2s;
        margin-top: 29px;
        width: 200px;
        height: 48px;
		top: 2px;
    }
    body.transparent-nav #header #logo {
        margin-top: 32px;
    }
    body.transparent-nav #header #logo a:before,
    body.smallNav.transparent-nav #header #logo a:after {
        opacity: 1;
    }
    body.transparent-nav #header #logo a:after,
    body.smallNav.transparent-nav #header #logo a:before {
        opacity: 0;
    }
    body.smallNav.transparent-nav #header #logo {
        margin-top: 33px;
    }
    body.smallNav #header #logo,
    body.smallNav.transparent-nav #header #logo {
        margin-top: 7px;
    }
}

@media only all and (min-width: 1400px) {
    #header #logo {
		width: 240px;
		top: 1.5px;
	}
}
/*! PhotoSwipe Default UI CSS by Dmitry Semenov | photoswipe.com | MIT license */


/*

	Contents:

	1. Buttons
	2. Share modal and links
	3. Index indicator ("1 of X" counter)
	4. Caption
	5. Loading indicator
	6. Additional styles (root element, top bar, idle state, hidden state, etc.)

*/


/*
	
	1. Buttons

 */


/* <button> css reset */

.pswp__button {
    width: 44px;
    height: 44px;
    position: relative;
    background: none;
    cursor: pointer;
    overflow: visible;
    -webkit-appearance: none;
    display: block;
    border: 0;
    padding: 0;
    margin: 0;
    float: right;
    opacity: 0.75;
    -webkit-transition: opacity 0.2s;
    transition: opacity 0.2s;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.pswp__button:focus,
.pswp__button:hover {
    opacity: 1;
}

.pswp__button:active {
    outline: none;
    opacity: 0.9;
}

.pswp__button::-moz-focus-inner {
    padding: 0;
    border: 0;
}


/* pswp__ui--over-close class it added when mouse is over element that should close gallery */

.pswp__ui--over-close .pswp__button--close {
    opacity: 1;
}

.pswp__button {
    background: url(../../files/hoergeraete/css/default-skin/default-skin.png) 0 0 no-repeat;
    background-size: 264px 88px;
    width: 44px;
    height: 44px;
}

@media (-webkit-min-device-pixel-ratio: 1.1),
(-webkit-min-device-pixel-ratio: 1.09375),
(min-resolution: 105dpi),
(min-resolution: 1.1dppx) {
    /* Serve SVG sprite if browser supports SVG and resolution is more than 105dpi */
    .pswp--svg .pswp__button {
        background-image: url(../../files/hoergeraete/css/default-skin/default-skin.svg);
    }
    .pswp--svg .pswp__button--arrow--left,
    .pswp--svg .pswp__button--arrow--right {
        background: none;
    }
}

.pswp__button--close {
    background-position: 0 -44px;
}

.pswp__button--share {
    background-position: -44px -44px;
}

.pswp__button--fs {
    display: none;
}

.pswp--supports-fs .pswp__button--fs {
    display: block;
}

.pswp--fs .pswp__button--fs {
    background-position: -44px 0;
}

.pswp__button--zoom {
    display: none;
    background-position: -88px 0;
}

.pswp--zoom-allowed .pswp__button--zoom {
    display: block;
}

.pswp--zoomed-in .pswp__button--zoom {
    background-position: -132px 0;
}


/* no arrows on touch screens */

.pswp--touch .pswp__button--arrow--left,
.pswp--touch .pswp__button--arrow--right {
    visibility: hidden;
}


/*
	Arrow buttons hit area
	(icon is added to :before pseudo-element)
*/

.pswp__button--arrow--left,
.pswp__button--arrow--right {
    background: #0081b8;
    border: 0;
    width: 64px;
    height: 64px;
    position: absolute;
    top: 50%;
}

.pswp__button--arrow--left {
    left: 0;
}

.pswp__button--arrow--right {
    right: 0;
}

.pswp__button--arrow--left:before,
.pswp__button--arrow--right:before {
    content: ' ';
    position: absolute;
    display: block;
    border-width: 0 0 4px 4px;
    border-color: #FFF;
    border-style: solid;
    margin-top: -10px;
    width: 16px;
    height: 16px;
}

.pswp__button--arrow--left:before {
    transform: rotate(45deg);
    margin-left: -12px;
    left: 50%;
}

.pswp__button--arrow--right:before {
    transform: rotate(225deg);
    margin-right: -12px;
    left: auto;
    right: 50%;
}

.pswp__button--arrow--left:after,
.pswp__button--arrow--right:after {
    content: ' ';
    display: block;
    height: 4px;
    width: 26px;
    background: #FFF;
    position: absolute;
    top: 50%;
    margin-top: -2px;
}

.pswp__button--arrow--left:after {
    left: 50%;
    margin-left: -12px;
}

.pswp__button--arrow--right:after {
    right: 50%;
    margin-right: -12px;
}


/*

	2. Share modal/popup and links

 */

.pswp__counter,
.pswp__share-modal {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.pswp__share-modal {
    display: block;
    background: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    padding: 10px;
    position: absolute;
    z-index: 1600;
    opacity: 0;
    -webkit-transition: opacity 0.25s ease-out;
    transition: opacity 0.25s ease-out;
    -webkit-backface-visibility: hidden;
    will-change: opacity;
}

.pswp__share-modal--hidden {
    display: none;
}

.pswp__share-tooltip {
    z-index: 1620;
    position: absolute;
    background: #FFF;
    top: 56px;
    border-radius: 2px;
    display: block;
    width: auto;
    right: 44px;
    -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
    -webkit-transform: translateY(6px);
    -ms-transform: translateY(6px);
    transform: translateY(6px);
    -webkit-transition: -webkit-transform 0.25s;
    transition: transform 0.25s;
    -webkit-backface-visibility: hidden;
    will-change: transform;
}

.pswp__share-tooltip a {
    display: block;
    padding: 8px 12px;
    color: #000;
    text-decoration: none;
    font-size: 14px;
    line-height: 18px;
}

.pswp__share-tooltip a:hover {
    text-decoration: none;
    color: #000;
}

.pswp__share-tooltip a:first-child {
    /* round corners on the first/last list item */
    border-radius: 2px 2px 0 0;
}

.pswp__share-tooltip a:last-child {
    border-radius: 0 0 2px 2px;
}

.pswp__share-modal--fade-in {
    opacity: 1;
}

.pswp__share-modal--fade-in .pswp__share-tooltip {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}


/* increase size of share links on touch devices */

.pswp--touch .pswp__share-tooltip a {
    padding: 16px 12px;
}

a.pswp__share--facebook:before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    top: -12px;
    right: 15px;
    border: 6px solid transparent;
    border-bottom-color: #FFF;
    -webkit-pointer-events: none;
    -moz-pointer-events: none;
    pointer-events: none;
}

a.pswp__share--facebook:hover {
    background: #3E5C9A;
    color: #FFF;
}

a.pswp__share--facebook:hover:before {
    border-bottom-color: #3E5C9A;
}

a.pswp__share--twitter:hover {
    background: #55ACEE;
    color: #FFF;
}

a.pswp__share--pinterest:hover {
    background: #CCC;
    color: #CE272D;
}

a.pswp__share--download:hover {
    background: #DDD;
}


/*

	3. Index indicator ("1 of X" counter)

 */

.pswp__counter {
    position: absolute;
    left: 0;
    top: 0;
    height: 44px;
    font-size: 13px;
    line-height: 44px;
    color: #FFF;
    opacity: 0.75;
    padding: 0 10px;
}


/*
	
	4. Caption

 */

.pswp__caption {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    min-height: 44px;
}

.pswp__caption small {
    font-size: 11px;
    color: #BBB;
}

.pswp__caption__center {
    text-align: left;
    max-width: 420px;
    margin: 0 auto;
    font-size: 13px;
    padding: 10px;
    line-height: 20px;
    color: #CCC;
}

.pswp__caption--empty {
    display: none;
}


/* Fake caption element, used to calculate height of next/prev image */

.pswp__caption--fake {
    visibility: hidden;
}


/*

	5. Loading indicator (preloader)

	You can play with it here - http://codepen.io/dimsemenov/pen/yyBWoR

 */

.pswp__preloader {
    width: 44px;
    height: 44px;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -22px;
    opacity: 0;
    -webkit-transition: opacity 0.25s ease-out;
    transition: opacity 0.25s ease-out;
    will-change: opacity;
    direction: ltr;
}

.pswp__preloader__icn {
    width: 20px;
    height: 20px;
    margin: 12px;
}

.pswp__preloader--active {
    opacity: 1;
}

.pswp__preloader--active .pswp__preloader__icn {
    /* We use .gif in browsers that don't support CSS animation */
    background: url(../../files/hoergeraete/css/default-skin/preloader.gif) 0 0 no-repeat;
}

.pswp--css_animation .pswp__preloader--active {
    opacity: 1;
}

.pswp--css_animation .pswp__preloader--active .pswp__preloader__icn {
    -webkit-animation: clockwise 500ms linear infinite;
    animation: clockwise 500ms linear infinite;
}

.pswp--css_animation .pswp__preloader--active .pswp__preloader__donut {
    -webkit-animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite;
    animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite;
}

.pswp--css_animation .pswp__preloader__icn {
    background: none;
    opacity: 0.75;
    width: 14px;
    height: 14px;
    position: absolute;
    left: 15px;
    top: 15px;
    margin: 0;
}

.pswp--css_animation .pswp__preloader__cut {
    /* 
			The idea of animating inner circle is based on Polymer ("material") loading indicator 
			 by Keanu Lee https://blog.keanulee.com/2014/10/20/the-tale-of-three-spinners.html
		*/
    position: relative;
    width: 7px;
    height: 14px;
    overflow: hidden;
}

.pswp--css_animation .pswp__preloader__donut {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 14px;
    height: 14px;
    border: 2px solid #FFF;
    border-radius: 50%;
    border-left-color: transparent;
    border-bottom-color: transparent;
    position: absolute;
    top: 0;
    left: 0;
    background: none;
    margin: 0;
}

@media screen and (max-width: 1024px) {
    .pswp__preloader {
        position: relative;
        left: auto;
        top: auto;
        margin: 0;
        float: right;
    }
}

@-webkit-keyframes clockwise {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes clockwise {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-webkit-keyframes donut-rotate {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    50% {
        -webkit-transform: rotate(-140deg);
        transform: rotate(-140deg);
    }
    100% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
}

@keyframes donut-rotate {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    50% {
        -webkit-transform: rotate(-140deg);
        transform: rotate(-140deg);
    }
    100% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
}


/*
	
	6. Additional styles

 */


/* root element of UI */

.pswp__ui {
    -webkit-font-smoothing: auto;
    visibility: visible;
    opacity: 1;
    z-index: 1550;
}


/* top black bar with buttons and "1 of X" indicator */

.pswp__top-bar {
    position: absolute;
    left: 0;
    top: 0;
    height: 44px;
    width: 100%;
}

.pswp__caption,
.pswp__top-bar,
.pswp--has_mouse .pswp__button--arrow--left,
.pswp--has_mouse .pswp__button--arrow--right {
    -webkit-backface-visibility: hidden;
    will-change: opacity;
    -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
    transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
}


/* pswp--has_mouse class is added only when two subsequent mousemove events occur */

.pswp--has_mouse .pswp__button--arrow--left,
.pswp--has_mouse .pswp__button--arrow--right {
    visibility: visible;
}

.pswp__top-bar,
.pswp__caption {
    background-color: rgba(45, 188, 225, 1);
}


/* pswp__ui--fit class is added when main image "fits" between top bar and bottom bar (caption) */

.pswp__ui--fit .pswp__top-bar,
.pswp__ui--fit .pswp__caption {
    background-color: rgba(45, 188, 225, 1);
}


/* pswp__ui--idle class is added when mouse isn't moving for several seconds (JS option timeToIdle) */

.pswp__ui--idle .pswp__top-bar {
    opacity: 0;
}

.pswp__ui--idle .pswp__button--arrow--left,
.pswp__ui--idle .pswp__button--arrow--right {
    opacity: 0;
}


/*
	pswp__ui--hidden class is added when controls are hidden
	e.g. when user taps to toggle visibility of controls
*/

.pswp__ui--hidden .pswp__top-bar,
.pswp__ui--hidden .pswp__caption,
.pswp__ui--hidden .pswp__button--arrow--left,
.pswp__ui--hidden .pswp__button--arrow--right {
    /* Force paint & create composition layer for controls. */
    opacity: 0.001;
}


/* pswp__ui--one-slide class is added when there is just one item in gallery */

.pswp__ui--one-slide .pswp__button--arrow--left,
.pswp__ui--one-slide .pswp__button--arrow--right,
.pswp__ui--one-slide .pswp__counter {
    display: none;
}

.pswp__element--disabled {
    display: none !important;
}

.pswp--minimal--dark .pswp__top-bar {
    background: none;
}
/*! PhotoSwipe main CSS by Dmitry Semenov | photoswipe.com | MIT license */


/*
	Styles for basic PhotoSwipe functionality (sliding area, open/close transitions)
*/


/* pswp = photoswipe */

.pswp {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    overflow: hidden;
    -ms-touch-action: none;
    touch-action: none;
    z-index: 1500;
    -webkit-text-size-adjust: 100%;
    /* create separate layer, to avoid paint on window.onscroll in webkit/blink */
    -webkit-backface-visibility: hidden;
    outline: none;
}

.pswp * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.pswp img {
    max-width: none;
}


/* style is added when JS option showHideOpacity is set to true */

.pswp--animate_opacity {
    /* 0.001, because opacity:0 doesn't trigger Paint action, which causes lag at start of transition */
    opacity: 0.001;
    will-change: opacity;
    /* for open/close transition */
    -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
    transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
}

.pswp--open {
    display: block;
}

.pswp--zoom-allowed .pswp__img {
    /* autoprefixer: off */
    cursor: -webkit-zoom-in;
    cursor: -moz-zoom-in;
    cursor: zoom-in;
}

.pswp--zoomed-in .pswp__img {
    /* autoprefixer: off */
    cursor: -webkit-grab;
    cursor: -moz-grab;
    cursor: grab;
}

.pswp--dragging .pswp__img {
    /* autoprefixer: off */
    cursor: -webkit-grabbing;
    cursor: -moz-grabbing;
    cursor: grabbing;
}


/*
	Background is added as a separate element.
	As animating opacity is much faster than animating rgba() background-color.
*/

.pswp__bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.9);
    opacity: 0;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    will-change: opacity;
}

.pswp__scroll-wrap {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.pswp__container,
.pswp__zoom-wrap {
    -ms-touch-action: none;
    touch-action: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}


/* Prevent selection and tap highlights */

.pswp__container,
.pswp__img {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

.pswp__zoom-wrap {
    position: absolute;
    width: 100%;
    -webkit-transform-origin: left top;
    -ms-transform-origin: left top;
    transform-origin: left top;
    /* for open/close transition */
    -webkit-transition: -webkit-transform 333ms cubic-bezier(0.4, 0, 0.22, 1);
    transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1);
}

.pswp__bg {
    will-change: opacity;
    /* for open/close transition */
    -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
    transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
}

.pswp--animated-in .pswp__bg,
.pswp--animated-in .pswp__zoom-wrap {
    -webkit-transition: none;
    transition: none;
}

.pswp__container,
.pswp__zoom-wrap {
    -webkit-backface-visibility: hidden;
}

.pswp__item {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: hidden;
}

.pswp__img {
    position: absolute;
    width: auto;
    height: auto;
    top: 0;
    left: 0;
}


/*
	stretched thumbnail or div placeholder element (see below)
	style is added to avoid flickering in webkit/blink when layers overlap
*/

.pswp__img--placeholder {
    -webkit-backface-visibility: hidden;
}


/*
	div element that matches size of large image
	large image loads on top of it
*/

.pswp__img--placeholder--blank {
    background: #222;
}

.pswp--ie .pswp__img {
    width: 100% !important;
    height: auto !important;
    left: 0;
    top: 0;
}


/*
	Error message appears when image is not loaded
	(JS option errorMsg controls markup)
*/

.pswp__error-msg {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    text-align: center;
    font-size: 14px;
    line-height: 16px;
    margin-top: -8px;
    color: #CCC;
}

.pswp__error-msg a {
    color: #CCC;
    text-decoration: underline;
}

.pswp__top-bar {
    background-color: rgba(45, 188, 225, 1);
}
.animation {
    height: calc(100vh + 20px * var(--images, 0));
    position: relative;
}

.animation canvas {
    width: 100%;
    height: 100vh;
    object-fit: contain;
    position: sticky;
    top: 0;
    transform: scale(1.5);
}

@media only all and (min-width: 1135px) {
    .animation canvas {
        transform: none;
    }
}