:root {
  --v-standard-margin: 2.5rem;
  /* var(--v-standard-margin); */
  --v-standard-weiss: #ffffff;
  --v-standard-lightgrey: #f1f1f1;
  --v-standard-rot: #c80f14;
  --v-standard-dunkelgrau: #535353;

  /* Schriftgrößen Anfang */

  /* Margins der Header Anfang */
  --mt-header-content-header-minimal: 0rem;
  --mt-header-content-header-variable: (-0.5rem + 2.5vw);
  --mt-header-content-header-maximal: 2.5rem;
  --mb-header-content-header-minimal: 0rem;
  --mb-header-content-header-variable: (-1.0625rem + 5.3125vw);
  --mb-header-content-header-maximal: 5.3125rem;
  /* Margins der Header Ende */

  /* Verwendung: */
  /* 
  font-size: var(--f-header-minimal);
  font-size: clamp(var(--f-header-minimal), var(--f-header-variable), var(--f-header-maximal));

  @supports not (font-size: clamp(var(--f-header-minimal), var(--f-header-variable), var(--f-header-maximal))) {
    font-size: min(max(var(--f-header-minimal), var(--f-header-variable)), var(--f-header-maximal)); 
  } 
*/

  /* Standardschriftgröße */
  --f-body-minimal: 1rem;
  --f-body-variable: (0.975rem + 0.125vw);
  --f-body-maximal: 1.125rem;
  /* var(--f-body-minimal); */
  /* var(--f-body-variable); */
  /* var(--f-body-maximal); */

  /* Überschriften */
  --f-header-minimal: 1.5rem;
  --f-header-variable: (1.35rem + 0.75vw);
  --f-header-maximal: 2.25rem;

  /* Pure Header Buttons */
  --f-header-buttons-minimal: 1rem;
  --f-header-buttons-variable: (0.825rem + 0.8750000000000001vw);
  --f-header-buttons-maximal: 1.875rem;

  /* Header Menü Einträge */
  --f-header-menu-minimal: 1rem;
  --f-header-menu-variable: (0.9rem + 0.5vw);
  --f-header-menu-maximal: 1.5rem;

  /* Header Menü Einträge */
  --f-header-content-header-minimal: 1.5rem;
  --f-header-content-header-variable: (1.05rem + 2.25vw);
  --f-header-content-header-maximal: 3.75rem;

  /* Schriftgrößen Ende */
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/*
    * -- BASE STYLES --
    * Most of these are inherited from Base, but I want to change a few.
    */

body {
  /* line-height: 2em; */
  color: #7f8c8d;
  font-size: var(--f-body-minimal);
  font-size: clamp(
    var(--f-body-minimal),
    var(--f-body-variable),
    var(--f-body-maximal)
  );

  @supports not (
    font-size:
      clamp(
        var(--f-body-minimal),
        var(--f-body-variable),
        var(--f-body-maximal)
      )
  ) {
    font-size: min(
      max(var(--f-body-minimal), var(--f-body-variable)),
      var(--f-body-maximal)
    );
  }
}

h1,
h2,
h3,
h4,
h5,
h6,
label {
  color: #34495e;
}

#menu-small-bt img {
  cursor: pointer;
}

#menu-small-content {
  background-color: var(--v-standard-weiss);
}

.responsive-img  ,
.pure-img-responsive {
  max-width: 100%;
  height: auto;
}

/*
    * -- LAYOUT STYLES --
    * These are some useful classes which I will need
    */
.l-box {
  padding: 1em;
}

.l-box-lrg {
  padding: 2em;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.is-center {
  text-align: center;
}

/*
    * -- PURE FORM STYLES --
    * Style the form inputs and labels
    */
.pure-form label {
  margin: 1em 0 0;
  font-weight: bold;
  /* font-size: 100%; */
}

.pure-form input[type] {
  border: 2px solid #ddd;
  box-shadow: none;
  /* font-size: 100%; */
  width: 100%;
  margin-bottom: 1em;
}

/*
    * -- PURE BUTTON STYLES --
    * I want my pure-button elements to look a little different
    */

.pure-button {
  text-transform: uppercase;
  font-family: Roboto, normal;
  font-weight: 700;
  /* font-size: 16px; */
  background-color: var(--v-standard-rot);
  color: var(--v-standard-weiss);
  padding: 1rem 1.25rem;
  border-radius: 0;
}

.pure-button-header {
  font-family: Roboto, normal;
  font-weight: 400;
  /* font-size: 14px; */
  font-size: var(--f-header-buttons-minimal);
  font-size: clamp(
    var(--f-header-buttons-minimal),
    var(--f-header-buttons-variable),
    var(--f-header-buttons-maximal)
  );

  @supports not (
    font-size:
      clamp(
        var(--f-header-buttons-minimal),
        var(--f-header-buttons-variable),
        var(--f-header-buttons-maximal)
      )
  ) {
    font-size: min(
      max(var(--f-header-buttons-minimal), var(--f-header-buttons-variable)),
      var(--f-header-buttons-maximal)
    );
  }

  background-color: var(--v-standard-rot);
  color: var(--v-standard-weiss);
  padding: 1rem;
}

.pure-button-header img {
  height: 40px;
  width: 40px;
  margin: 10px;
}

.hide {
  display: none;
}

.header-telefon:hover > .hide {
  display: block;
}

.header-telefon:hover > .show {
  display: none;
}

.header-email:hover > .hide {
  display: block;
}

.header-email:hover > .show {
  display: none;
}

.pure-button-gray {
  font-family: Roboto, normal;
  font-weight: 400;
  /* font-size: 16px; */
  background-color: var(--v-standard-lightgrey);
  color: var(--v-standard-dunkelgrau);
  padding: 0.5em 2em;
  border-radius: 0;
}

.pure-button .pure-button-middle {
  text-align: center;
}

a.pure-button-primary {
  background: var(--v-standard-weiss);
  color: #1f8dd6;
  border-radius: 5px;
  /* font-size: 120%; */
}

a.pure-button-red {
  background: transparent;
  color: var(--v-standard-rot);
  text-decoration: none;
}

/*
    * -- MENU STYLES --
    * I want to customize how my .pure-menu looks at the top of the page
    */

.custom-restricted-width {
  /* To limit the menu width to the content of the menu: */
  display: inline-block;
  /* Or set the width explicitly: */
  /* width: 10em; */
}

.home-menu {
  padding: 0.5rem;
  text-align: left;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

.home-menu {
  background: rgba(255, 255, 255, 0.8);
}

.pure-menu-children {
  background-color: transparent;
  background-image: linear-gradient(
    to bottom,
    transparent 0.5rem,
    rgba(255, 255, 255, 0.8) 0.5rem,
    rgba(255, 255, 255, 0.8) 100%
  );
}

.header-slider-left {
  position: absolute;
  top: 660px;
  left: 5px;
}

.header-slider-right {
  position: absolute;
  top: 660px;
  left: 100px;
}

.pure-menu.pure-menu-fixed {
  /* Fixed menus normally have a border at the bottom. */
  border-bottom: none;
  /* I need a higher z-index here because of the scroll-over effect. */
  z-index: 4;
}

.pure-menu-list li:last-of-type > ul {
  left: auto;
  right: 0;
}

/* .pure-menu-heading, */
.pure-menu-link {
  padding: 1vw 1.5vw;
}

.pure-menu-link {
  font-size: var(--f-header-menu-minimal);
  font-size: clamp(
    var(--f-header-menu-minimal),
    var(--f-header-menu-variable),
    var(--f-header-menu-maximal)
  );

  @supports not (
    font-size:
      clamp(
        var(--f-header-menu-minimal),
        var(--f-header-menu-variable),
        var(--f-header-menu-maximal)
      )
  ) {
    font-size: min(
      max(var(--f-header-menu-minimal), var(--f-header-menu-variable)),
      var(--f-header-menu-maximal)
    );
  }
}

/* */
.home-menu > div:first-of-type {
  display: flex;
  align-self: stretch;
  align-items: center;
  justify-content: center;
}

@media screen and (max-width: 767px) {
  .home-menu > div:first-of-type {
    align-items: center;
    justify-content: flex-start;
  }
}
.home-menu .pure-menu-heading {
  color: var(--v-standard-weiss);
  font-weight: 400;
  padding: 0;
  /* font-size: 120%; */
  /* margin-right: 12vw; */
}

/* set size of brand logo */
.home-menu .pure-menu-heading img {
  height: 40px;
  opacity: 0.95;
}

.home-menu .pure-menu-selected a {
  color: var(--v-standard-weiss);
}

.home-menu {
  color: #808080;
  font-family: "Inter", normal;
  font-weight: 200;
  /* font-size: calc(8px + 1vw); */
}

.home-menu li a:hover,
.home-menu li a:focus {
  background: none;
  border: none;
  color: var(--v-standard-rot);
  text-decoration: underline;
}

.sub-menu-selected,
.menu-selected {
  color: var(--v-standard-rot);
  text-decoration: underline;
}

.menu-selected {
  font-weight: 700;
}

.header-pic div {
  height: 850px;
  overflow: hidden;
}

.header-pic img {
  min-height: 100%;
  min-width: 100%;
  margin-top: -420px;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Fading animation */

.fade1{
  animation-name: fade;
  animation-duration: 1.5s;
    -webkit-transition: opacity .15s linear;
    -o-transition: opacity .15s linear;
    transition: opacity .15s linear;
}

.slideshow-container {
  z-index: 20;
  max-width: 400px;
  position: absolute;
  margin: auto;
  top: 45%;
  left: 45%;
  background-image: url(/img/szene2-slider-BG.png);
  background-repeat: no-repeat;
  background-origin: padding-box;
  background-position: center;
  background-size: 100%; }
  

  
  /* Next & previous buttons */
  .prev, .next {
      cursor: pointer;
      position: absolute;
      top: 50%;
      width: auto;
      margin-top: -22px;
      padding: 16px;
      color: white;
      font-weight: bold;
      font-size: 18px;
      transition: 0.6s ease;
      border-radius: 50%;
      user-select: none;
      background-color: #c7113c;
  }
  
  /* Position the "next button" to the right */
  .next {
      right: 0;
      border-radius: 50%;
  }
  
  /* On hover, add a black background color with a little bit see-through */
  .prev:hover, .next:hover {
      background-color: #333333;
  }
  
  .caption-text {
      color: #f2f2f2;
      font-size: 15px;
      padding: 8px 12px;
      position: absolute;
      bottom: -10px;
      width: 100%;
      text-align: center;
  }
  
  /* The dots/bullets/indicators */
  .dot {
      cursor: pointer;
      height: 150px;
      width: 150px;
      margin: 0 2px;
      background-color: #bbb;
      border-radius: 50%;
     /* display: inline-block;*/
      transition: background-color 0.6s ease;
  }
  
  .active, .dot:hover {
      background-color: #717171;
  }
  
  @-webkit-keyframes fade {
      from {opacity: .4}
      to {opacity: 1}
  }



@keyframes fade {
  from {
    opacity: 0.4;
  }
  to {
    opacity: 1;
  }
}

/*
    * -- CONTENT STYLES --
    * This represents the content area (everything below the blue section)
    */
.content-wrapper {
  /* These styles are required for the "scroll-over" effect */
  position: absolute;
  top: 87%;
  width: 100%;
  min-height: 12%;
  z-index: 2;
  background: var(--v-standard-weiss);
}

.content-wrapper .content-center {
  max-width: 1250px;
  margin: auto;
  margin-top: var(--v-standard-margin);
  margin-bottom: var(--v-standard-margin);
  text-align: left;
}

.content-wrapper .content-center-smaller-margin {
  max-width: 1250px;
  margin: auto;
  margin-top: var(--v-standard-margin);
  margin-bottom: var(--v-standard-margin);
  margin-bottom: 10px;
  text-align: left;
}

/* We want to give the content area some more padding */
.content {
  padding: 1em 1em 3em;
}

/* This is the class used for the main content headers (<h2>) */
.content-head {
  font-family: "Inter", normal;
  font-weight: 700;
  /* font-size: 60px; */
  font-size: var(--f-header-content-header-minimal);
  font-size: clamp(
    var(--f-header-content-header-minimal),
    var(--f-header-content-header-variable),
    var(--f-header-content-header-maximal)
  );

  @supports not (
    font-size:
      clamp(
        var(--f-header-content-header-minimal),
        var(--f-header-content-header-variable),
        var(--f-header-content-header-maximal)
      )
  ) {
    font-size: min(
      max(
        var(--f-header-content-header-minimal),
        var(--f-header-content-header-variable)
      ),
      var(--f-header-content-header-maximal)
    );
  }

  text-transform: uppercase;
  /* margin: 2.7rem 0 5.4rem; */
  margin-top: var(--mt-header-content-header-minimal);
  margin-top: clamp(
    var(--mt-header-content-header-minimal),
    var(--mt-header-content-header-variable),
    var(--mt-header-content-header-maximal)
  );
  @supports not (
    margin-top:
      clamp(
        var(--mt-header-content-header-minimal),
        var(--mt-header-content-header-variable),
        var(--mt-header-content-header-maximal)
      )
  ) {
    margin-top: min(
      max(
        var(--mt-header-content-header-minimal),
        var(--mt-header-content-header-variable)
      ),
      var(--mt-header-content-header-maximal)
    );
  }
  margin-bottom: var(--mb-header-content-header-minimal);
  margin-bottom: clamp(
    var(--mb-header-content-header-minimal),
    var(--mb-header-content-header-variable),
    var(--mb-header-content-header-maximal)
  );
  @supports not (
    margin-bottom:
      clamp(
        var(--mb-header-content-header-minimal),
        var(--mb-header-content-header-variable),
        var(--mb-header-content-header-maximal)
      )
  ) {
    margin-bottom: min(
      max(
        var(--mb-header-content-header-minimal),
        var(--mb-header-content-header-variable)
      ),
      var(--mb-header-content-header-maximal)
    );
  }
  color: var(--v-standard-rot);
}

/* This is a modifier class used when the content-head is inside a ribbon */
.content-head-ribbon {
  color: var(--v-standard-weiss);
}

/* This is the class used for the content sub-headers (<h3>) */
.content-subhead {
  font-family: "Roboto", normal;
  font-weight: 400;
  color: var(--v-standard-dunkelgrau);
  /* font-size: 36px; */

  font-size: var(--f-header-minimal);
  font-size: clamp(
    var(--f-header-minimal),
    var(--f-header-variable),
    var(--f-header-maximal)
  );
  @supports not (
    font-size:
      clamp(
        var(--f-header-minimal),
        var(--f-header-variable),
        var(--f-header-maximal)
      )
  ) {
    font-size: min(
      max(var(--f-header-minimal), var(--f-header-variable)),
      var(--f-header-maximal)
    );
  }

  text-align: left;
  margin: 10px;
}

.content-subhead i {
  margin-right: 7px;
}

.content-subhead-red {
  /* font-family: "Inter", normal;
  font-weight: 700; */
  color: var(--v-standard-rot);
  font-family: "Roboto", normal;
  font-weight: 400;
  /* font-size: 36px; */
  font-size: var(--f-header-minimal);
  font-size: clamp(
    var(--f-header-minimal),
    var(--f-header-variable),
    var(--f-header-maximal)
  );
  @supports not (
    font-size:
      clamp(
        var(--f-header-minimal),
        var(--f-header-variable),
        var(--f-header-maximal)
      )
  ) {
    font-size: min(
      max(var(--f-header-minimal), var(--f-header-variable)),
      var(--f-header-maximal)
    );
  }
  text-align: left;
  /* margin: 0; */
}

.content-subhead-red-frkout {
  font-family: "Roboto", normal;
  font-weight: 400;
  /* font-size: 25px; */
  color: var(--v-standard-rot);
  text-align: left;
  margin: 0;
}

.content-subhead-red i {
  margin-right: 7px;
}

.content-text {
  font-family: "Roboto", normal;
  font-weight: 300;
  color: var(--v-standard-dunkelgrau);
  /* font-size: 18px; */
  text-align: left;
  margin: 20px 0;
}

.content-text-strpd {
  font-family: "Roboto", normal;
  font-weight: 300;
  color: var(--v-standard-dunkelgrau);
  /* font-size: 18px; */
}

.content-pic-container {
  margin: 10px;
}

.content-pic div {
  height: 350px;
  overflow: hidden;
}

.content-pic img {
  min-height: 100%;
  min-width: 100%;
}

.content-pic-margin {
  margin-top: -60px;
}

.pure-g {
  margin-bottom: 0;
}

.pure-u-6-24-margin {
  margin-top: 0;
}

.reference-box-container {
  position: relative;
}

.reference-box-btn-top-pos {
  position: absolute;
  bottom: 50px;
  right: 15px;
}
.reference-box-btn-bottom-pos {
  position: absolute;
  bottom: 20px;
  right: 15px;
}

.reference-box {
  position: absolute;
  bottom: 1px;
  right: 150px;
  background-color: var(--v-standard-lightgrey);
  color: var(--v-standard-weiss);
  width: 50%;
}
.reference-box-info {
  background-color: var(--v-standard-rot);
}

.seal-margin-right {
  margin-right: 20px;
}

.seal-box {
  /* font-size: 150px; */
  line-height: 1;
  height: 200px;
  width: 230px;
  margin-bottom: 50px;
}

/*
* #########################################################################
* 3 Seal boxes on the Home Site
*/
.home-seal-box-content {
  position: relative;
}

.home-seal-box-content .home-seal-box {
  height: 200px;
  width: 200px;
  /* font-size: 30%; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* 3 boxes from top to bottom */
.home-seal-box-content .home-seal-box-top {
  position: absolute;
  top: 5%;
  left: 40%;
  background-color: #80090d;
}

.home-seal-box-content .home-seal-box-middle {
  position: absolute;
  top: 35%;
  left: 10%;
  background-color: #980b0f;
}

.home-seal-box-content .home-seal-box-bottom {
  position: absolute;
  top: 55%;
  left: 35%;
  background-color: var(--v-standard-rot);
}

.home-seal-box-content img {
  margin-top: 0;
  width: 50%;
  height: auto;
}

.home-seal-box-content p {
  color: var(--v-standard-weiss);
  /* font-size: 16px; */
  font-family: Roboto, normal;
  font-weight: 400;
  margin-bottom: 0;
}
/*
* #########################################################################
*/

#telefon-header:focus,
#telefon-header:hover {
  background-color: yellow;
  right: 0;
}

.svg-black2white {
  filter: invert(0) sepia(0) saturate(1) hue-rotate(0deg) brightness(5);
  margin-top: 20px;
}

.home-news-box {
  border: 1px solid;
  box-shadow: 0 2px gray;
}

.home-news-box-button-margin,
.home-news-box-margin {
  margin-right: 1vw;
}

.home-news-box-content-margin {
  margin: 10px;
}

.home-news-box-button {
  margin-top: -20px;
}

/* footer */

.footer-lightgray {
  color: #808080;
  font-family: Inter, normal;
  font-weight: 200;
  /* font-size: 16px; */
}

.footer-darkgray {
  color: var(--v-standard-dunkelgrau);
  font-family: Roboto, normal;
  font-weight: 400;
  /* font-size: 16px; */
}

.background-lightgray {
  background-color: var(--v-standard-lightgrey);
}

.darkgray {
  color: var(--v-standard-dunkelgrau);
}

.main-red {
  color: var(--v-standard-rot);
}

.main-bk-red {
  background-color: var(--v-standard-rot);
}

.font-red {
  font-family: Roboto, normal;
  font-weight: 700;
  font-weight: bold;
}

.font-size {
  /* font-size: 45px; */
}

.footer-brand-margin {
  margin-top: 20px;
}

.long-button {
  color: var(--v-standard-weiss);
  /* font-size: 16px; */
  text-transform: uppercase;
}

.person-background-color {
  background-color: var(--v-standard-lightgrey);
}

/* smaller then sm ≥ 280px */
@media (min-width: 280px) {
  /* We increase the body font size */
  body {
    /* font-size: 20px; */
    /* line-height: 1em; */
  }

  header {
    margin-bottom: 0;
  }

  main {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  footer {
    margin-left: -1.25rem;
    margin-right: -1.25rem;
    padding: 1.25rem;
  }

  /* pure css */
  /* ------------------------------------------*/
  .pure-g {
    letter-spacing: 0.05em;
    margin-bottom: 0;
  }

  /* .pure-u-1-1 {
    margin-bottom: 20px;
  } */

  .pure-button {
    /* font-size: 13px; */
  }
  /* ------------------------------------------*/

  /* header */
  /* ------------------------------------------*/

  /* menu */
  /* ------------------------------------------*/
  #menu-small {
    display: inline-flex;
    width: 100%;
  }

  #menu-big {
    display: none;
  }

  .home-menu {
    text-align: left;
  }
  .home-menu ul {
    margin-left: 0;
  }
  .home-menu .pure-menu-heading {
    margin-right: 0;
  }

  /* set size of brand logo */
  .home-menu .pure-menu-heading img {
    height: 30px;
    opacity: 0.95;
  }

  /* header pic */
  /* left side  */
  .pure-button-header {
    transition: 0.3s ease;
    /* font-size: 8px; */
  }

  .pure-button-header:hover {
    /* font-size: 16px; */
  }

  .pure-button-header img {
    height: 20px;
    width: 20px;
  }

  .header-slider-left {
    top: 320px; /* 220px */
    left: 5px;
  }
  .header-slider-right {
    top: 290px; /* 220px */
    left: 5px;
  }

  /* right side */
  /* ------------------------------------------*/

  /* home 3 seals */
  /* ------------------------------------------*/
  .home-seal-box-content {
    width: 280px;
    height: 300px;
  }

  .home-seal-box-content .home-seal-box {
    height: 150px;
    width: 150px;
  }

  /* 3 boxes from top to bottom */
  .home-seal-box-content .home-seal-box-top {
    top: 5%;
    left: 45%;
  }

  .home-seal-box-content .home-seal-box-middle {
    top: 30%;
    left: 10%;
  }

  .home-seal-box-content .home-seal-box-bottom {
    top: 47%;
    left: 43%;
  }

  /* ------------------------------------------*/
  /* content */
  /* ------------------------------------------*/
  .content-wrapper {
    top: 350px;
  }

  .content-subhead {
    /* font-size: 18px; */
    margin: 0;
  }

  .content-subhead i {
    margin-right: 0;
  }

  .content-subhead-red {
    /* font-size: 15px; */
    /* margin: 0; */
  }

  .content-subhead-red i {
    margin-right: 0;
  }

  .content-text {
    /* font-size: 12px; */
    margin: 5px 0;
  }

  .font-size {
    /* font-size: 25px; */
  }

  .long-button {
    color: var(--v-standard-weiss);
    /* font-size: 14px; */
    text-transform: uppercase;
  }
}

/* sm ≥ 568px */
@media (min-width: 35.5em) {
  /* We increase the body font size */
  body {
    /* font-size: 20px; */
    /* line-height: 1.5em; */
  }

  /* pure css */
  .pure-button {
    /* font-size: 16px; */
  }

  .pure-button-header {
    transition: 0.3s ease;
    /* font-size: 8px; */
  }

  .pure-button-header:hover {
    /* font-size: 16px; */
  }

  .pure-button-header img {
    height: 30px;
    width: 30px;
  }

  #menu-small {
    display: inline-flex;
    width: 100%;
  }

  #menu-big {
    display: none;
  }

  .header-slider-left {
    top: 335px;
  }

  .header-slider-right {
    top: 335px;
    left: 100px;
  }

  .content-wrapper {
    /* These styles are required for the "scroll-over" effect */
    top: 370px;
  }

  .home-seal-box-content {
    width: 300px;
    height: 350px;
  }

  .home-seal-box-content .home-seal-box {
    height: 150px;
    width: 150px;
    /* font-size: 25%; */
  }

  .content-text {
    /* font-size: 16px; */
  }

  .content-subhead-red {
    /* font-size: 20px; */
    /* margin: 0; */
  }

  /* 3 boxes from top to bottom */
  .home-seal-box-content .home-seal-box-top {
    top: 5%;
    left: 50%;
  }

  .home-seal-box-content .home-seal-box-middle {
    top: 30%;
    left: 15%;
  }

  .home-seal-box-content .home-seal-box-bottom {
    top: 45%;
    left: 48%;
  }

  /* We can align the menu header to the left, but float the menu items to the right. */
  .home-menu {
    text-align: left;
  }

  .home-menu ul {
    margin-left: 0;
  }
  .home-menu .pure-menu-heading {
    margin-right: 0;
  }
}

/* md ≥ 768px */
@media (min-width: 48em) {
  /* We increase the body font size */
  body {
    /* font-size: 18px; */
  }

  .pure-button {
    /* font-size: 14px; */
  }

  #menu-small {
    display: none;
  }

  #menu-big {
    display: inline-flex;
  }

  .header-slider-left {
    top: 380px;
  }
  .header-slider-right {
    top: 380px;
  }

  .content-wrapper {
    /* These styles are required for the "scroll-over" effect */
    top: 410px;
  }

  .content-text {
    margin: 15px 0;
  }

  .content-subhead {
    /* font-size: 22px; */
  }

  .content-subhead i {
    margin-right: 0;
  }

  .content-subhead-red {
    /* font-size: 22px; */
    /* margin: 0; */
  }

  .content-subhead-red i {
    margin-right: 0;
  }

  .home-seal-box-content {
    width: 300px;
    height: 300px;
  }

  .home-seal-box-content .home-seal-box {
    height: 150px;
    width: 150px;
    /* font-size: 25%; */
  }

  /* 3 boxes from top to bottom */
  .home-seal-box-content .home-seal-box-top {
    top: 20%;
    left: 52%;
  }

  .home-seal-box-content .home-seal-box-middle {
    top: 50%;
    left: 17%;
  }

  .home-seal-box-content .home-seal-box-bottom {
    top: 65%;
    left: 50%;
  }

  /* We can align the menu header to the left, but float the menu items to the right. */
  .home-menu {
    text-align: center;
  }

  .home-menu ul {
    margin-left: 0;
  }

  .home-menu .pure-menu-heading {
    margin-right: 0;
  }
}

/* lg ≥ 1024px */
@media (min-width: 64em) {
  /* We increase the body font size */
  body {
    /* font-size: 16px; */
  }

  #menu-small {
    display: none;
  }

  #menu-big {
    display: inline-flex;
  }

  .pure-button-header {
    transition: 0.3s ease;
    /* font-size: 10px; */
  }

  .pure-button-header:hover {
    /* font-size: 20px; */
  }

  .pure-button-header img {
    height: 40px;
    width: 40px;
  }

  .header-slider-left {
    top: 570px;
  }
  .header-slider-right {
    top: 570px;
  }

  .home-seal-box-content {
    width: 400px;
    height: 400px;
  }

  .home-seal-box-content .home-seal-box {
    height: 200px;
    width: 200px;
    /* font-size: 25%; */
  }

  .content-wrapper {
    /* These styles are required for the "scroll-over" effect */
    top: 600px;
  }

  .content-subhead {
    /* font-size: 30px; */
  }

  .content-subhead i {
    margin-right: 0;
  }

  .content-subhead-red {
    /* font-size: 30px; */
    /* margin: 0; */
  }

  .content-subhead-red i {
    margin-right: 0;
  }

  /*
        * 3 boxes from top to bottom
        */
  .home-seal-box-content .home-seal-box-top {
    top: 5%;
    left: 50%;
  }

  .home-seal-box-content .home-seal-box-middle {
    top: 40%;
    left: 7%;
  }

  .home-seal-box-content .home-seal-box-bottom {
    top: 50%;
    left: 48%;
  }

  /* We can align the menu header to the left, but float the
        menu items to the right. */
  .home-menu {
    text-align: left;
  }

  .home-menu ul {
    margin-left: 0;
  }
}

/* xl ≥ 1280px
    * -- DESKTOP (AND UP) MEDIA QUERIES --
    * On desktops and other large devices, we want to over-ride some
    * of the mobile and tablet styles.
    */
@media (min-width: 78em) {
  /* We increase the header font size even more */
  .splash-head {
    /* font-size: 300%; */
  }

  #menu-small {
    display: none;
  }

  #menu-big {
    display: inline-flex;
  }

  .pure-button-header {
    transition: 0.3s ease;
    /* font-size: 10px; */
    border-radius: 0;
  }

  .pure-button-header:hover {
    /* font-size: 40px; */
  }

  .header-slider-left {
    top: 815px; /* 620 */
  }
  .header-slider-right {
    top: 815px;
  }

  .content-wrapper {
    /* These styles are required for the "scroll-over" effect */
    top: 850px;
  }

  .content-subhead {
    /* font-size: 36px; */
    text-align: left;
  }

  .content-center-smaller-margin {
    margin-bottom: 10px;
    text-align: left;
  }

  .content-subhead i {
    margin-right: 0;
  }

  .content-subhead-red {
    /* font-size: 30px; */
    text-align: left;
    /* margin: 0; */
  }

  .content-subhead-red i {
    margin-right: 0;
  }

  .home-menu {
    text-align: left;
  }

  .home-menu .pure-menu-heading {
    margin-right: 12vw;
  }
}

/* Frickel 4 the Advertising-Boxes */
@media screen and (max-width: 839px) {
  .home-seal-box-content {
    display: none;
    margin-left: auto;
    margin-right: auto;
  }
}