/* prefixed by https://autoprefixer.github.io (PostCSS: v7.0.23, autoprefixer: v9.7.3) */


/* --------------------------------------------- */
/* ----------------- CSS-Reset ----------------- */
/* --------------------------------------------- */

* {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    padding: 0;
    margin: 0;
    outline: 0;
    border: 0;
  }
  
  *, *:before, *:after {
    -webkit-box-sizing: inherit;
            box-sizing: inherit;
  }
  
  ul, a {
    text-decoration: none;
  }
  
  button,input,select,textarea {
    margin: 0;
  }
  
  html {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    font-size: 1rem;
  }
  
  
  *, *:before, *:after {
    font-size: 1rem;
    -webkit-box-sizing: inherit;
            box-sizing: inherit;
  }
  
  iframe {
    border: 0;
  }
  
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
  
  td, th {
    padding: 0;
    text-align: left
  }
  
  /* ------------- Ionicons (Icons) ------------- */
  
  ion-icon {
    padding-bottom: 4px;
    text-align: center;
    vertical-align: middle;
    color: var(--cpsRed);
  }
  
  .oiRedBackground {
    width: 35px;
    height: 35px;
    padding: 10px;
    margin-bottom: 1rem;
    font-size: 16px;
    text-align: right;
    background-color: var(--cpsRed);
    color: white;
    text-align: center;
  } 
  
  .oiNoBackground {
    width: 35px;
    height: 35px;
    padding: 10px;
    margin-bottom: 1rem;
    font-size: 16px;
    text-align: right;
    color: var(--cpsRed);
    text-align: center;
  } 
  
  
  /* --------------- CSS-Variablen --------------- */
  
  :root {
    --cyan: #00a0f0;
    --cpsRed: #FF2429;
    --cpsRedDunkler: rgb(196, 26, 29);
    --cpsRedHeller: rgba(196, 26, 29, 0.651);
    --lightGrey: rgba(245,245,245,1);;
    --cpsGrey: #878787;
    --linkGrey: rgba(0, 0, 0, 0.9);
    --gold: #D4AF37;
    --silver: #BCC6CC;
    --bronce: #cd7f32;
  }
  
  /* ---------------- Allgemeines ---------------- */
  
  .hide {
    display: none;
  }
  
  /* --- macht alle Bilder etwas matt --- */
  /* img {
    -webkit-filter: brightness(90%) contrast(100%) grayscale(0%);
    filter: brightness(90%) contrast(100%) grayscale(0%);  
  } */
  
  /* Text highlighting */
  ::-moz-selection {color: white; background: var(--cpsRed);}
  ::selection {color: white; background: var(--cpsRed);}
  
  /* Link normal */
  ul.nav li a, ul.nav li a:link {
    color: var(--linkGrey) !important;
  }
  
  /* Link hover */
  a:hover { 
    color: var(--cpsGrey) !important;
  }
  
  /* Link bei click (mouseDown) */
  ul.nav-link li a:active {
    color: var(--cpsRedDunkler) !important;
  }
  
  /* Link besucht */
  ul.nav li a, ul.nav li a:visited {
  }
  
  .tooltip > .tooltip-inner {
    background-color: var(--cpsRed);
    color: #FFFFFF; 
  }
  
  .container {
    margin: 5rem auto auto auto;
  }
  
  .trennerImg {
    max-height: 200px;
    width: auto;
  }
  
  .placeholderCMYKcircle {
    top: 0;
    right: 0;
    width: 87px;
    position: absolute;
  }

  mark {
    color: white; 
    background: var(--cpsRedHeller);
    line-height: 2;
  }
  
  /* Entfernt den Platzhaltercircle */
  .placeholderCMYKcircleDeleteOnHover:hover .placeholderCMYKcircle {
    display: none;
  }
  
  /* Fade-In content */
  .fadeIn-3s {
    animation: fadeIn ease 3s;
    -webkit-animation: fadeIn ease 3s;
    -moz-animation: fadeIn ease 3s;
    -o-animation: fadeIn ease 3s;
    -ms-animation: fadeIn ease 3s;
  }
  
  .fadeIn-1s {
    animation: fadeIn ease 1s;
    -webkit-animation: fadeIn ease 1s;
    -moz-animation: fadeIn ease 1s;
    -o-animation: fadeIn ease 1s;
    -ms-animation: fadeIn ease 1s;
  }
  
  @keyframes fadeIn {
    0% {
      opacity:0;
    }
    100% {
      opacity:1;
    }
  }
  
  @-webkit-keyframes fadeIn {
    0% {
      opacity:0;
    }
    100% {
      opacity:1;
    }
  }
  
  /* ----------------- Fonts ----------------- */
  
  h1, h2, h3, h4, h5, h6, p, a, address, label, legend, button, tr, td, span {
    font-family: 'Saira', sans-serif;
    color: rgb(40, 40, 40);
  }
  
  h1, h2, h3, h4, h5, h6 {
    font-weight: 500;
  }
  
  p, a {
    font-family: 'Saira', sans-serif;
    line-height: 1.8;
  }
  
  
  h1, h2, h3, h4 {
    letter-spacing: -0.5px;
  }
  
  p, a, address, label, legend, button, tr, td, span {
    font-weight: 300;
    line-height: 1.8;
  }
  
  dt {
    font-weight: 600;
  }
  
  dt, dd {
    margin-bottom: 2rem;
  }
  
  .redLineH1animationDelay-1s:after,
  .redLineH2animationDelay-1s:after,
  .redLineH3animationDelay-1s:after,
  .redLineH4animationDelay-1s:after,
  .redLineH5animationDelay-1s:after,
  .redLineH6animationDelay-1s:after {
    content: "";
    display: block;
    background: var(--cpsRed);
    width: 0px;
    -webkit-animation-delay: 1s;
            animation-delay: 1s;
    -webkit-animation-duration: 0.5s;
            animation-duration: 0.5s;
    -webkit-animation-name: titleUnderline;
            animation-name: titleUnderline;
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
  }
  
  .redLineH1animationDelay-05s:after,
  .redLineH2animationDelay-05s:after,
  .redLineH3animationDelay-05s:after,
  .redLineH4animationDelay-05s:after,
  .redLineH5animationDelay-05s:after,
  .redLineH6animationDelay-05s:after {
    content: "";
    display: block;
    background: var(--cpsRed);
    width: 0px;
    -webkit-animation-delay: 0.5s;
            animation-delay: 0.5s;
    -webkit-animation-duration: 0.5s;
            animation-duration: 0.5s;
    -webkit-animation-name: titleUnderline;
            animation-name: titleUnderline;
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
  }
  
  /* Linie unter title center */
  .redLineH1center:after,
  .redLineH2center:after,
  .redLineH3center:after,
  .redLineH4center:after,
  .redLineH5center:after,
  .redLineH6center:after {
    content: "";
    display: block;
    background: var(--cpsRed);
    width: 0px;
    -webkit-animation-duration: 2s;
            animation-duration: 2s;
    -webkit-animation-name: titleUnderline;
            animation-name: titleUnderline;
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
    -webkit-animation-delay: 1s;
            animation-delay: 1s;
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    margin: 0 auto;
  }
  
  .redLineH1:after, .redLineH1center:after, .redLineH1animationDelay-1s:after, .redLineH1animationDelay-05s:after  { height: 5px;  margin-top: 1rem; }
  .redLineH2:after, .redLineH2center:after, .redLineH2animationDelay-1s:after, .redLineH2animationDelay-05s:after  { height: 4px;  margin-top: 0.75rem; }
  .redLineH3:after, .redLineH3center:after, .redLineH3animationDelay-1s:after, .redLineH3animationDelay-05s:after  { height: 3px;  margin-top: 0.5rem; }
  .redLineH4:after, .redLineH4center:after, .redLineH4animationDelay-1s:after, .redLineH4animationDelay-05s:after  { height: 3px;  margin-top: 0.5rem; }
  .redLineH5:after, .redLineH5center:after, .redLineH5animationDelay-1s:after, .redLineH5animationDelay-05s:after  { height: 3px;  margin-top: 0.5rem; }
  .redLineH6:after, .redLineH6center:after, .redLineH6animationDelay-1s:after, .redLineH6animationDelay-05s:after  { height: 2px;  margin-top: 0.25rem; }
  
  @-webkit-keyframes titleUnderline {
    from {
      width: 0px; 
    }
  
    to {
      width: 75px;
    }
  }
  
  @keyframes titleUnderline {
    from {
      width: 0px; 
    }
  
    to {
      width: 75px;
    }
  }
  
  /* ------------------------------------------ */
  /* --------------- Overlay Red -------------- */
  /* ------------------------------------------ */
  
  .box {
    width: 100%;
    height: auto;
    display: inline-block;
    vertical-align: top;
    margin-top: 10px;;
  }
  
  .overlay {
    position: relative;
  }
  
  .overlay:after {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    content: "Online Ansehen";
    width: 100%;
    height: 100%;
    opacity: 0;
    color: white;
    font-size: 20px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
    -webkit-transition: ease-in;
    -o-transition: ease-in;
    transition: ease-in;
    -webkit-transition-duration: 0.3s;
         -o-transition-duration: 0.3s;
            transition-duration: 0.3s;
  }
  
  .overlay:hover:after  {
    opacity: .9;
  }
  
  .red:after {
    background-color: var(--cpsRedDunkler);
  }
  
  /* ------------------------------------------ */
  /* ---------------- Language ---------------- */
  /* ------------------------------------------ */


.flagContainer {
  height: 30px;
  margin-bottom: 4rem;
  padding-left: 15px;
}

.languageTextD, .languageTextF, .languageTextI {
  margin: 0 10px 0 10px;
}


.languageTextD:hover, .languageTextF:hover, .languageTextI:hover {
  border-bottom: 3px var(--cpsRedDunkler) solid;
  color: var(--cpsGrey) !important;
}

.navbar-text {
  display: inline-block;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  margin-left: auto;
  cursor: pointer;
}

  /* .redLineH6animationDelay-1s:after {
    content: "";
    display: block;
    background: var(--cpsRed);
    width: 0px;
    -webkit-animation-delay: 1s;
            animation-delay: 1s;
    -webkit-animation-duration: 0.5s;
            animation-duration: 0.5s;
    -webkit-animation-name: titleUnderline;
            animation-name: titleUnderline;
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
  } */
  
  


  /* ------------------------------------------ */
  /* --------------- index.html --------------- */
  /* ------------------------------------------ */
  
  /* .logoCPS {
    display: block;
    width: 50vw;
    padding-bottom: 2rem;
  } */
  
  .logoNav {
    max-height: 50px;
  }
  
  .jubilaeumsLogo {
    max-width: 400px;
  }
  
  .infoBox {
    background-color: var(--lightGrey);
    max-width: 100%;
    min-height: 350px;
    padding-bottom: 3rem;
  }
  
  /* ---------- Bildergalerie ------------ */
  
  .galerie {
    display: -ms-grid;
    display: grid;
    grid-template-columns: repeat(auto-fill, 250px);
    -ms-grid-rows: 150px 25px 150px 25px 150px 25px 150px;
    grid-template-rows: repeat(4, 150px);
    grid-gap: 25px;
  }
  
  .imgGalerie {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
  
  .imgGalerie:hover {
    -webkit-filter: brightness(1000%) contrast(1000%) grayscale(0%);
    filter: brightness(100%) contrast(100%) grayscale(0%); 
    -webkit-transition: 0.5s; 
    -o-transition: 0.5s; 
    transition: 0.5s;
  }
  
  .img1 {
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
    grid-column: 1 / 2;
    -ms-grid-row: 1;
    -ms-grid-row-span: 2;
    grid-row: 1 / 3;
  }
  .img2 {
  
  }
  .img3 {
  
  }
  .img4 {
  
  }
  .img5 {
  
  }
  .img6 {
    -ms-grid-column: 2;
    -ms-grid-column-span: 1;
    grid-column: 2 / 3;
    -ms-grid-row: 2;
    -ms-grid-row-span: 2;
    grid-row: 2 / 4;
  }
  
  /* ---------- Slider auf index.html ------------ */
  
  .slick .slide img {
    max-width: 200px;
    max-height: 100px;
    /* margin: 0 50px 0 50px; */
  }
  
  #slideshow {
    width: 100vw;
  }
  
  .carousel {
    max-height: 380px;
  }
  
  .carousel-inner {
    -ms-flex-line-pack: center;
        align-content: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -ms-flex-item-align: center;
        -ms-grid-row-align: center;
        align-self: center;
    -ms-grid-column-align: center;
        justify-self: center;
  }
  
  .carousel-item img {
    max-height: 300px;
    max-width: 80vw;
    -ms-flex-line-pack: center;
        align-content: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -ms-flex-item-align: center;
        -ms-grid-row-align: center;
        align-self: center;
    -ms-grid-column-align: center;
        justify-self: center;
  }
  
  .carousel-caption {
    position: relative;
    left: auto;
    right: auto;
  }
  
  .carousel-control-prev-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23FF2429' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
   }
   
   .carousel-control-next-icon {
     background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23FF2429' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
   }
  
  .title {
      font-family: arial;
      font-weight: 900;
      font-size: 100px;
      text-align: center;
  }
  
  /* ---------- CMYK-Circle (cmyk.js) ------------ */
  
  .circleMagentaBG {
      position: absolute;
    background-color: magenta;
    height: 100px;
    width: 100px;
    border-radius: 50%;
    -webkit-transition-property: -webkit-transform;
    transition-property: -webkit-transform;
    -o-transition-property: transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
      -webkit-transform-style: ease-in;
              transform-style: ease-in;
      mix-blend-mode: multiply;
    -webkit-animation-direction: alternate;
            animation-direction: alternate;
    bottom:0;
    margin: 0 auto;
  }
  
  .circleCyanBG {
      position: absolute;
    background-color: cyan;
    height: 100px;
    width: 100px;
    border-radius: 50%;
    -webkit-transition-property: -webkit-transform;
    transition-property: -webkit-transform;
    -o-transition-property: transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
      -webkit-transform-style: ease-in;
              transform-style: ease-in;
      mix-blend-mode: multiply;
    -webkit-animation-direction: alternate;
            animation-direction: alternate;
    bottom:0;
    margin: 0 auto;
  }
  
  .circleYellowBG {
      position: absolute;
    background-color: yellow;
    height: 100px;
    width: 100px;
    border-radius: 50%;
    -webkit-transition-property: -webkit-transform;
    transition-property: -webkit-transform;
    -o-transition-property: transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
      -webkit-transform-style: ease-in;
              transform-style: ease-in;
      mix-blend-mode: multiply;
    -webkit-animation-direction: alternate;
            animation-direction: alternate;
    bottom:0;
    margin: 0 auto;
  }
  
  .circleBlackBG {
      position: absolute;
    background-color: black;
    height: 100px;
    width: 100px;
    border-radius: 50%;
    -webkit-transition-property: -webkit-transform;
    transition-property: -webkit-transform;
    -o-transition-property: transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
      -webkit-transform-style: ease-in;
              transform-style: ease-in;
      mix-blend-mode: multiply;
    -webkit-animation-direction: alternate;
            animation-direction: alternate;
    bottom:0;
    margin: 0 auto;
  }
  
  
  /* ---------- BackgroundImageHeader ------------ */
  
  .imgCoverIndex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 350px;
    -webkit-transition: 0.6s;
    -o-transition: 0.6s;
    transition: 0.6s;
    background-image: url("../img/Gornergratbahn_1900x1200.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    margin-bottom: 2rem;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  
  .imgCoverGrundbildung {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 350px;
    background-image: url("../img/repro/andr.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    margin-bottom: 2rem;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }

  .imgCoverPruefung {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 350px;
    background-image: url("../img/pruefung.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    margin-bottom: 2rem;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  
  .imgCoverVorteileMitglieder {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 350px;
    background-image: url("../img/Emil_Frey.JPG");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    margin-bottom: 2rem;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  
  /* ------------------------------------------- */
  /* ------------- mitglieder.html ------------- */
  /* ------------------------------------------- */
  
  /* -------- Table Hover ------- */
  .redHover {
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
  }
  
  .redHover:hover {
    background-color: var(--lightGrey);
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
  }
  
  
  /* -------- Buttons rendered in buttons.js ------- */
  
  /* Stylt denContainer der Buttons */
  .classyButton {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    background-color: var(--cpsRed);
    margin: 0.3rem;
    height: 50px;
    width: 200px;
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;
    -webkit-transform: scale(1);
        -ms-transform: scale(1);
            transform: scale(1);
  }
  
  .classyButton:hover {
    background-color: var(--cpsRedDunkler);
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;
    -webkit-transform: scale(1.05);
        -ms-transform: scale(1.05);
            transform: scale(1.05);
  }
  
  .classyButton:hover .spanClass {
    font-weight: 700;
  }
  
  /* Stylt die KantonsNamen in den Buttons */
  .spanClass {
    position: relative;
    margin-left: 10px;
    color: white;
    text-align: left;
    font-size: 0.8rem;
  }
  
  input {
    background-color: var(--lightGrey);
    height: 50px;
    width: 200px;
    border: solid 1px var(--cpsRed);
    padding: 10px;
    margin: 0.3rem;
  }
  
  
  /* ----------------- Adressen ----------------- */
  
  #text p {
    /* min-width: 300px; */
    -ms-flex-wrap: wrap !important;
        flex-wrap: wrap !important;
  }
  
  .mitgliederAdressSection {
    /* background-color: var(--lightGrey); */
  }
  
  .paraKontakt {
    border-bottom: 2px solid var(--cpsRed);
    padding-bottom: 10px;
  }
  
  /* Stylt das PNG des Wappen */
  .classyButtonSchweiz:before,
  .classyButtonAargau:before,
  .classyButtonAppenzell-Ausserrhoden:before,
  .classyButtonAppenzell-Innerrhoden:before,
  .classyButtonBasel-Landschaft:before,
  .classyButtonBasel-Stadt:before,
  .classyButtonBern:before,
  .classyButtonFreiburg:before,
  .classyButtonGenf:before,
  .classyButtonGlarus:before,
  .classyButtonGraubünden:before,
  .classyButtonJura:before,
  .classyButtonLuzern:before,
  .classyButtonNeuenburg:before,
  .classyButtonNidwalden:before,
  .classyButtonObwalden:before,
  .classyButtonSchaffhausen:before,
  .classyButtonSchwyz:before,
  .classyButtonSolothurn:before,
  .classyButtonStGallen:before,
  .classyButtonTessin:before,
  .classyButtonThurgau:before,
  .classyButtonUri:before,
  .classyButtonWaadt:before,
  .classyButtonWallis:before,
  .classyButtonZug:before,
  .classyButtonZürich:before  {
    width: 30px; 
    height: 30px;
    content: " ";
    margin-left: 10px;
  }
  
  .classyButtonSchweiz:before {background-image: url('../assets/wappen/wappen_schweiz.png');background-repeat:no-repeat;}
  .classyButtonAargau:before {background-image: url('../assets/wappen/wappen_aargau.png');background-repeat:no-repeat;}
  .classyButtonAppenzell-Ausserrhoden:before {background-image: url('../assets/wappen/wappen_appenzell_ausserhoden.png');background-repeat:no-repeat;}
  .classyButtonAppenzell-Innerrhoden:before {background-image: url('../assets/wappen/wappen_appenzell_innerhoden.png');background-repeat:no-repeat;}
  .classyButtonBasel-Landschaft:before {background-image: url('../assets/wappen/wappen_basel_land.png');background-repeat:no-repeat;}
  .classyButtonBasel-Stadt:before {background-image: url('../assets/wappen/wappen_basel_stadt.png');background-repeat:no-repeat;}
  .classyButtonBern:before {background-image: url('../assets/wappen/wappen_bern.png');background-repeat:no-repeat;}
  .classyButtonFreiburg:before {background-image: url('../assets/wappen/wappen_freiburg.png');background-repeat:no-repeat;}
  .classyButtonGenf:before {background-image: url('../assets/wappen/wappen_genf.png');background-repeat:no-repeat;}
  .classyButtonGlarus:before {background-image: url('../assets/wappen/wappen_glarus.png');background-repeat:no-repeat;}
  .classyButtonGraubünden:before {background-image: url('../assets/wappen/wappen_graubuenden.png');background-repeat:no-repeat;}
  .classyButtonJura:before {background-image: url('../assets/wappen/wappen_jura.png');background-repeat:no-repeat;}
  .classyButtonLuzern:before {background-image: url('../assets/wappen/wappen_luzern.png');background-repeat:no-repeat;}
  .classyButtonNeuenburg:before {background-image: url('../assets/wappen/wappen_neuenburg.png');background-repeat:no-repeat;}
  .classyButtonNidwalden:before {background-image: url('../assets/wappen/wappen_obwalden.png');background-repeat:no-repeat;}
  .classyButtonObwalden:before {background-image: url('../assets/wappen/wappen_nidwalden.png');background-repeat:no-repeat;}
  .classyButtonSchaffhausen:before {background-image: url('../assets/wappen/wappen_schaffhausen.png');background-repeat:no-repeat;}
  .classyButtonSchwyz:before {background-image: url('../assets/wappen/wappen_schwyz.png');background-repeat:no-repeat;}
  .classyButtonSolothurn:before {background-image: url('../assets/wappen/wappen_solothurn.png');background-repeat:no-repeat;}
  .classyButtonStGallen:before {background-image: url('../assets/wappen/wappen_stgallen.png');background-repeat:no-repeat;}
  .classyButtonTessin:before {background-image: url('../assets/wappen/wappen_tessin.png');background-repeat:no-repeat;}
  .classyButtonThurgau:before {background-image: url('../assets/wappen/wappen_thurgau.png');background-repeat:no-repeat;}
  .classyButtonUri:before {background-image: url('../assets/wappen/wappen_uri.png');background-repeat:no-repeat;}
  .classyButtonWaadt:before {background-image: url('../assets/wappen/wappen_waadt.png');background-repeat:no-repeat;}
  .classyButtonWallis:before {background-image: url('../assets/wappen/wappen_wallis.png');background-repeat:no-repeat;}
  .classyButtonZug:before {background-image: url('../assets/wappen/wappen_zug.png');background-repeat:no-repeat;}
  .classyButtonZürich:before {background-image: url('../assets/wappen/wappen_zurich.png');background-repeat:no-repeat;}
  
  
  /* --------------------------------------------- */
  /* -------------- foerderer.html --------------- */
  /* --------------------------------------------- */
  
  .goldBG {
    background-color: var(--gold) !important;
  }
  .silberBG {
    background-color: var(--silver) !important;
  }
  .bronzeBG {
    background-color: var(--bronce) !important;
  }
  
  .wrapperLogosGold,
  .wrapperLogosSilber,
  .wrapperLogosBronze {
    display: -ms-grid;
    display: grid;
    grid-template-columns: repeat(auto-fill, 150px);
    grid-auto-rows: minmax(100px, auto);
    grid-gap: 25px;
  }
  
  .aGold, .bGold, .cGold, .dGold, .dGold, .eGold, .fGold, .gGold, .hGold, .iGold, .jGold,
  .aSilber, .bSilber, .cSilber, .dSilber, .dSilber, .eSilber, .fSilber, .gSilber, .hSilber, .iSilber, .jSilber, .kSilber,
  .aBronze, .bBronze, .cBronze, .dBronze, .dBronze, .eBronze, .fBronze, .gBronze, .hBronze, .iBronze, .jBronze, .kBronze {
    -ms-flex-item-align: center;
        -ms-grid-row-align: center;
        align-self: center;
  }
  
  
  .mw100 img {
    max-width: 150px;
    -ms-flex-item-align: center;
        -ms-grid-row-align: center;
        align-self: center;
    max-height: 100px;
  }
  
  .mw100 img[src$=".svg"] {
    width: 150px;
    height: 100px;
    object-fit: contain;
  }
  
  /* .gold, .silber, .bronze {
    transition: 0.5s;
  }
  
  .gold:hover {
    background-color: var(--gold);
    transition: 0.5s;
  }
  
  .silber:hover {
    background-color: var(--silver);
    transition: 0.5s;
  }
  
  .bronze:hover {
    background-color: var(--bronce);
    transition: 0.5s;
  } */
  
  .logoMaxWidth {
    width: 200px;
    margin: 20px auto 20px auto;
  }
  
  @media only screen and (max-width: 576px)  {
  
      /* Force table to not be like tables anymore */
      table, thead, tbody, th, td, tr { 
      display: block; 
      }
      
    /* Hide table headers (but not display: none;, for accessibility) */
    thead tr { 
          position: absolute;
          top: -9999px;
          left: -9999px;
      }
  
      td { 
          /* Behave  like a "row" */
      border: none;
        position: relative;
          padding-left: 50%; 
    }
  }
  /* .mobileFoerdererGold { border-left: 1rem solid var(--gold); }
  .mobileFoerdererSilver { border-left: 1rem solid var(--silver); }
  .mobileFoerdererBronce { border-left: 1rem solid var(--bronce); } */
  
  
  /* --------------------------------------------- */
  /* -------------- vorstand.html ---------------- */
  /* --------------------------------------------- */
  
  .fotoMaxWidth {
    width: 100px;
  }
  
  /* --------------------------------------------- */
  /* ------------ grundbildung.html -------------- */
  /* --------------------------------------------- */
  
  .cardPrintmediatechnik {
    border: 1px solid var(--cpsRed) !important;
  }
  
  .card, .card-img-top {
    border-radius: 0;
  }
  
  .spanCardTitleSmaller {
    font-size: 1rem;
    font-weight: 400;
  }
  
  .h50 {
    height: 50px;
  }
  .h70 {
    height: 70px;
  }
  .h120 {
    height: 120px;
  }
  
  .stickyCustomGrundbildung {
    position: -webkit-sticky;
    position: sticky;
    padding-top: 15px;
    height: 90px;
    top: 76px;
    z-index: 1000;
    background-color: white;
  }
  
  .stickyCustomFoerderer {
    position: -webkit-sticky;
    position: sticky;
    padding-top: 15px;
    height: 90px;
    top: 76px;
    z-index: 1000;
    background-color: white;
  }
  
  /* --------------------------------------------- */
  /* --------------- Kompendium ------------------ */
  /* --------------------------------------------- */
  
  form input {
    margin: 0;
  }
  
  #priceMitglied, #priceNichtMitglied {
    padding-top: 5px;
    color: var(--cpsGrey);
    background-color: white;
    height: 38px;
  }
  
  #erstBestellung, #nachBestellung, #erstBestellungNichtMitglied, #nachBestellungNichtMitglied, #radioMitglied, #radioNichtMitglied {
    width: auto;
  }
  
  #radioMitglied, #radioNichtMitglied {
    margin-bottom: 0;
  }
  
  /* --------------------------------------------- */
  /* ------------------ Footer ------------------- */
  /* --------------------------------------------- */
  
  
  footer a, address, h6, span {
    font-size: 12pt;
  }
  
  footer span {
    font-weight: 500;
  }
  
  /* Dies für den content im Body anwenden damit der Footer am Boden bleibt */
  body { min-height: 100vh; }
  .flexGrow { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }
  
  /* --------------- Bigger margins --------------- */
  
  .mt-8 { margin-top: 3.5rem; }
  .mb-8 { margin-bottom: 3.5rem; }
  .mt-6 { margin-top: 2.5rem; }
  .mb-6 { margin-bottom: 2.5rem; }
  
  
  /* --------------- Medie Queries --------------- */
  
  @media (max-width: 576px) {
    html {
      font-size: 1rem;
    }
    .hideOnMobile {
      display: none;
    }
    .classyButton {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      background-color: var(--cpsRed);
      margin: 0.1rem;
      height: 50px;
      width: 45vw;
      -webkit-transition: 0.2s;
      -o-transition: 0.2s;
      transition: 0.2s;
      -webkit-transform: scale(1);
          -ms-transform: scale(1);
              transform: scale(1);
    }
    #searchInput {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      margin: 0.1rem;
      height: 50px;
      width: 45vw;
      -webkit-transition: 0.2s;
      -o-transition: 0.2s;
      transition: 0.2s;
      -webkit-transform: scale(1);
          -ms-transform: scale(1);
              transform: scale(1);
    }
    .logoMaxWidth {
      margin: 1rem 0 1rem 0;
    }
    .BootStrapDontWork {
      margin-top: 30px !important;
    }
    .galerie {
      display: -ms-grid;
      display: grid;
      -ms-grid-columns: 1fr 25px 1fr;
      grid-template-columns: 1fr 1fr;
      -ms-grid-rows: auto;
      grid-template-rows: auto;
      grid-gap: 25px;
    }
    .galerie > *:nth-child(1) {
      -ms-grid-row: 1;
      -ms-grid-column: 1;
    }
    .galerie > *:nth-child(2) {
      -ms-grid-row: 1;
      -ms-grid-column: 3;
    }
  }
  
  @media (min-width: 576px) {
    html {
      font-size: 1rem;
    }
    .hideOnMobile {
      display: none;
    }
    .logoMaxWidth {
      margin: 1rem 0 1rem 0;
    }
    .BootStrapDontWork {
      margin-top: 30px !important;
    }
    .oiRedBackground {
      width: 45px;
      height: 45px;
      padding: 10px;
      margin-bottom: 1rem;
      font-size: 16px;
      text-align: right;
      background-color: var(--cpsRed);
      color: white;
      text-align: center;
    } 
  }
  
  @media (min-width: 768px) {
    html {
      font-size: 1.1rem;
    }
    .hideOnMobile {
      display: none;
    }
    .logoMaxWidth {
      width: 200px;
    }
    .h50 {
      height: 130px;
    }
    .h70 {
      height: 170px;
    }
    .h120 {
      height: 250px;
    }
    .oiRedBackground {
      width: 45px;
      height: 45px;
      padding: 10px;
      margin-bottom: 1rem;
      font-size: 16px;
      text-align: right;
      background-color: var(--cpsRed);
      color: white;
      text-align: center;
    } 
    .tableMinWidth {
      min-width: 200px;
    }
  }
  
  @media (min-width: 992px) {
    .hideOnMobile {
      display: block;
    }
    .BootStrapDontWork {
      margin-top: 0px !important;
    }
  }
  
  @media (min-width: 1200px) {
    html {
      font-size: 1.2rem;
    }
    .imgCoverGrundbildung {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      height: 350px;
      background-image: url("../img/repro/farbfaecher.jpg");
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      margin-bottom: 2rem;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
    }
    .BootStrapDontWork {
      margin-top: 0px !important;
    }
    /* .container {
      min-height: 100px;
    } */
  }
  
  /*
  xs (phones) > 576px
  sm (tablets) > 768px
  md (desktops) > 992px
  lg (xl desktops) > 1200px
  */
  
  /*  TESTING STUFF  */
  
  figure {
    max-width: 200px !important;
  }