@media (max-width: 767px) {
.safumenubig, .logobig, #qx-column-0py5a, #qx-column-k2a0g, #qx-column-1e37d, #qx-column-h9gr3, #qx-column-a6fb5, #qx-column-1wbfn, #qx-column-taknl, #qx-column-ijx6d, #qx-column-0jm33, #qx-column-rgb5j, #qx-column-ftjdy, #qx-column-ffarb {display:none;}
  #procycling-head .qx-col-wrap {
  }
}

@media (max-width: 1000px) {
 #print-head .qx-col-wrap {
  background-image: url("https://www.sakisafu.de/images/print/bg_gruen_m.jpg")!important;
  }
}

@media (max-width: 1000px) {
 #screen-head .qx-col-wrap {
  background-image: url("https://www.sakisafu.de/images/screen/bg_blau_m.jpg")!important;
  }
}

@media (max-width: 1000px) {
 #corporate-head .qx-col-wrap {
  background-image: url("https://www.sakisafu.de/images/corporate/bg_lila_m.jpg")!important;
  }
}

@media (max-width: 1000px) {
 #foto-head .qx-col-wrap {
  background-image: url("https://www.sakisafu.de/images/foto/bg_gelb_m.jpg")!important;
  }
}

@media (min-width: 768px) {
.safumenusmall {display:none;}
}

/* big-shoulders-text-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Big Shoulders Text';
  font-style: normal;
  font-weight: 400;
  src: url('../../../../../fonts/big-shoulders-text-v24-latin-regular.eot'); /* IE9 Compat Modes */
  src: url('../../../../../fonts/big-shoulders-text-v24-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../../../../../fonts/big-shoulders-text-v24-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../../../../../fonts/big-shoulders-text-v24-latin-regular.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('../../../../../fonts/big-shoulders-text-v24-latin-regular.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('../../../../../fonts/big-shoulders-text-v24-latin-regular.svg#BigShouldersText') format('svg'); /* Legacy iOS */
}

/* big-shoulders-text-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Big Shoulders Text';
  font-style: normal;
  font-weight: 800;
  src: url('../../../../../fonts/big-shoulders-text-v24-latin-800.eot'); /* IE9 Compat Modes */
  src: url('../../../../../fonts/big-shoulders-text-v24-latin-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../../../../../fonts/big-shoulders-text-v24-latin-800.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../../../../../fonts/big-shoulders-text-v24-latin-800.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('../../../../../fonts/big-shoulders-text-v24-latin-800.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('../../../../../fonts/big-shoulders-text-v24-latin-800.svg#BigShouldersText') format('svg'); /* Legacy iOS */
}

/*Slider Hallo*/
#sliderhallo {
a {
  color: #fff!important;
  position: relative;
  }
a::before {
  background: #000;
  content: "";
  inset: -5px 0 0 0;
  position: absolute;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s ease-in-out;
  z-index: -1;
  height: 40px;
  }
a:hover::before {
  transform: scaleX(1);
  transform-origin: left;
  }
}
#sliderhallo .slide-content p {line-height:30px;}
#sliderhallo .slide-content h2 {
  font-family: 'Big Shoulders Text';
  font-style: normal;
  letter-spacing:2px;
  }

/*Headlines*/
h1 {
  font-family: 'Big Shoulders Text';
  font-style: normal;
  letter-spacing:2px;
  font-size: 70px;
  }
h2 {
  font-family: 'Big Shoulders Text';
  font-style: normal;
  letter-spacing:2px;
  }
h3 {
  font-family: 'Big Shoulders Text';
  font-style: normal;
  letter-spacing:5px;
  }
h4 {
  font-family: 'Big Shoulders Text';
  font-style: normal;
  letter-spacing:1px;
  }

/*Link Layout*/
.safufooter, #kontakt, #kontakticons {
a {
  color: #fff!important;
  position: relative;
  text-decoration: none!important;
  }
a::before {
  background: #000;
  content: "";
  inset: -6px -5px 0 -5px;
  position: absolute;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s ease-in-out;
  z-index: -1;
  height: 40px;
  }
a:hover::before {
  transform: scaleX(1);
  transform-origin: left;
  }
}

/*Linkfarben Menu*/
#hallolink, #kontaktlink {
  background-color: #000;
  padding: 7px 25px 7px 25px;
}
#hallolink::before, #kontaktlink::before {
  content: none!important;
}
#linkschwarz::before {
  background: #000;
  content: "";
  inset: -7px -20px 0 -20px;
  position: absolute;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s ease-in-out;
  z-index: -1;
  height: 40px;
  }
#linkschwarz:hover::before {
  transform: scaleX(1);
  transform-origin: left;
  }

#printlink {
  background-color: #87bd25;
  padding: 7px 25px 7px 25px;
}
#printlink::before {
  content: none!important;
}
#linkgruen::before {
  background: #87bd25;
  content: "";
  inset: -7px -20px 0 -20px;
  position: absolute;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s ease-in-out;
  z-index: -1;
  height: 40px;
  }
#linkgruen:hover::before {
  transform: scaleX(1);
  transform-origin: left;
  }

#screenlink {
  background-color: #2E486B;
  padding: 7px 25px 7px 25px;
}
#screenlink::before {
  content: none!important;
}
#linkblau::before {
  background: #2E486B;
  content: "";
  inset: -7px -20px 0 -20px;
  position: absolute;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s ease-in-out;
  z-index: -1;
  height: 40px;
  }
#linkblau:hover::before {
  transform: scaleX(1);
  transform-origin: left;
  }

#corporatelink {
  background-color: #8E1270;
  padding: 7px 25px 7px 25px;
}

#corporatelink::before {
  content: none!important;
}
#linklila::before {
  background: #8E1270;
  content: "";
  inset: -7px -20px 0 -20px;
  position: absolute;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s ease-in-out;
  z-index: -1;
  height: 40px;
  }
#linklila:hover::before {
  transform: scaleX(1);
  transform-origin: left;
  }

#fotolink {
  background-color: #EAEB01;
  padding: 7px 25px 7px 25px;
}
#fotolink::before {
  content: none!important;
}
#linkgelb::before {
  background: #EAEB01;
  content: "";
  inset: -7px -20px 0 -20px;
  position: absolute;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s ease-in-out;
  z-index: -1;
  height: 40px;
  }
#linkgelb:hover::before {
  transform: scaleX(1);
  transform-origin: left;
  }

/*linke Spalte*/
#linkespalte .qx-col-wrap {
  z-index:1000;
  div {
  font-family: 'Big Shoulders Text';
  font-style: normal;
  font-weight: 400;
  font-size:22px;
  }
}
#linkespalte .safumenubig {
  a {
  color: #fff!important;
  position: relative;
  text-decoration: none;
  }/*
  a::before {
  background: #87bd25;
  content: "";
  inset: -7px -20px 0 -20px;
  position: absolute;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s ease-in-out;
  z-index: -1;
  height: 40px;
  }
  a:hover::before {
  transform: scaleX(1);
  transform-origin: left;
  }*/
}
#menulinks {
  position: fixed;
  width:12%
}

/*Abstand oben*/
.container-component > * + * {margin-top:0!important;}

/*Dual Button Layout*/
.qx-dual-button span {
  font-family: 'Big Shoulders Text';
  font-style: normal;
}

/*DS Button Layout*/
.form-check-label {color:#FFF;}
.qx-form-check > .qx-checkbox {height:25px!important;width:25px!important;}

/*Siteloader*/
.siteloader{
  display: none;
}
.siteloader .icon{
  opacity: 0;
}
.siteloader.load{
            display: block;
            background: #87bd25;
            position: fixed;
            top: 0px;
            bottom: 0px;
            left:0px;
            z-index: 1000;
            animation: expandAnimation 1s forwards;
        }
.siteloader.load .icon{
            position: relative;
            top: 50%;
            bottom: 0px;
            left:50%;

           animation: fadeAnimation 1s forwards;
           animation-delay: 1s;
           }
@keyframes expandAnimation {
            from {
                width: 0%; /* Anfangsbreite */
            }
            to {
                width: 100%; /* Endbreite */
            }
        }
        @keyframes fadeAnimation {
            from {
                opacity: 0; /* Anfangsbreite */
            }
            to {
                opacity: 1; /* Endbreite */
            }
        }
.icon {
  display: flex;
    justify-content: center;
    align-items: center;
  width:10%;
  transform: translateX(-50%);
  }

.safumenusmall .item-4 {display:none}