:root {
    --base-unit: clamp(1rem, 0.48vw + 0.9rem, 1.63rem)
  }
    
  .aktionsbutton1 {
   background-image: url('https://www.die-samariter.org/fileadmin/sp/projekte/weihnachten-im-schuhkarton/Aktionsbericht_2024/Icons/Grafik_Link1.png') !important;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 1px !important;
    font-weight: bold;
    color: #05843a;
    height: 4em
  }
  
  .aktionsbutton1:hover {  
  box-shadow: 0 0 10px rgba(0, 0, 0, .3);
  }
  .occred {
    color: #da1a32 !important;
  }
  .headlineaktion-text-wrapper {
    margin-left: auto;
    margin-right: auto;
    max-width: 48em;
  }
  
  .headlineaktion {
    color: #92C145   !important;
  }
  
  .headlineaktionsub {
    color: #92C145   !important;
    font-weight: lighter !important;
    margin-top: 0.5em;
    margin-left: auto;
    margin-right: auto;
    max-width: 48em;
  }
  
  .distance {
    margin-left: auto;
    margin-right: auto;
  }
  
  .video-wrapper {
  display: flex; /* Flexbox aktiviert */
  gap: 2em; /* Abstand zwischen den Videos */
  justify-content: center; /* Zentriert die Videos */
  flex-wrap: wrap; /* Bricht bei kleineren Bildschirmen um */
   z-index: 1000;
}

.embed-responsive {
  width: 25%; /* Beide Videos nehmen gleich viel Platz ein */
  border-radius: 25px
}

@media (max-width: 768px) {
  .embed-responsive {
    width: 100%; /* Auf mobilen Geräten untereinander */
  }
  .distance {
    margin-top: 5em!important;
  }

}
  @media (max-width: 768px) {
    #testimonials .testimonial {
      flex-direction: column;
      text-align: center;
      align-items: center;
    }
    #testimonials .testimonial div[style*="position: absolute"] {
      position: relative;
     <!-- top: -1.5em; -->
      margin-bottom: 1em
    }
    
   #testimonials .testimonial-img {
        width: 8em; /* Breite des Ausschnitts */
  		height: 8em; /* Höhe des Ausschnitts */
    }
    #testimonials .testimonial-text-center {
      margin-left: 0;
      margin-right: 0;
      text-align: center;
    }
		.medal {
                width: 10em;
                height: 10em;
              
            }
    .negmarg {
    margin-top: -2em!important;
  }
        }
  
   @media (max-width: 1600px) {
     .negmarg {
       margin-top: -5em !important
     }
  }
  
  .negmarg {
    margin-top: -12em;
  }
  .testimonial-img {
      width: 11em; /* Breite des Ausschnitts */
  height: 9em; /* Höhe des Ausschnitts */
    border: 4px solid white
  }
  .testimonial {
      color: white;
      padding: 20px;
      border-radius: 25px;
      display: flex;
      align-items: center;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
      max-width: 900px;
  	  margin-left: auto;
      margin-right: auto;
      margin-bottom: 2em;
    } 

  .red {
    background-color: #da1a32; /* WiS-rot */
  }
  .green {
    background-color: #05843a; /* WiS-grün */
  }
  .withoutbgred {
    background-color: none;
    border: 5px solid #da1a32;
      color: black;
    }
    .withoutbggreen {
    background-color: none;
    border: 5px solid #05843a;
     color: black;
    }
  }
  .short {
    text-align: center;
    max-width: 500px !important;
    border-radius: 55px;
    padding: 3em
  }
  .lightgreen {
    background-color: #92C145; /* WiS-Flyergrün */
    max-width: 600px;
    text-align: center;
    margin-left,margin-right: 2em;
  }
    .testimonial img {
      width: 13em;
      height: 10em;
      border-radius: 50%;
      object-fit: cover;
      border: 3px solid white;
      margin-left: auto;
    }
  .testimonial-text-center {
      margin-right: 2em;
       margin-left: 2em;
    }
  .testimonial-text-center h3{
      margin: 0;
      font-size: 2.5rem;
      color: white;
    }
  .testimonial-text-center p{
      margin: 10px 0 0;
      font-size: 150%;
      color: #00642c;
    }
    .testimonial-text {
      margin-right: 20px;
      padding: 10px;
    }
    .testimonial-text h4 {
      margin: 0;
      font-weight: bold;
    }
    .testimonial-text p {
      font-style: italic;
      margin: 10px 0 0;
    }
.medal-container {
    		position: absolute;
    		top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
			z-index: 2; /* Medaille über der Welle */
  }
        .medal-container-left {
            float: left;
          	margin-right: 0.681em;
            z-index: 2; /* Medaille über der Welle */
          shape-outside: circle(calc(50% + 0.618em));
        }
  .medal-container-right {
            float: right;
    		margin-left: 0.681em;
            z-index: 2; /* Medaille über der Welle */
			shape-outside: circle(calc(50% + 0.618em));
        }
        .medal {
            width: 18em;
            height: 18em;
            position: relative;
            transform-style: preserve-3d;
            transition: transform 1.6s;
            cursor: pointer;

        }
        .medal:hover, .medal.flipped {
            transform: rotateY(180deg);
        }
        .medal-side-green {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 0.3em solid #05843a;
        }
        .medal-side-red {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 0.3em solid #da1a32;
        }
     
        .back-green {
            background-color: #05843a;
            transform: rotateY(180deg);
            color: white;
            font-size:  var(--base-unit, 1em);
            font-weight: bold;
            text-align: center;
        }
  
  .back-red {
            background-color: #da1a32;
            transform: rotateY(180deg);
            color: white;
            font-size: var(--base-unit, 1em);
            font-weight: bold;
            text-align: center;
        }

        .header-wave-top {
            position: relative;
            width: 100%;
            height: auto; /* Automatische Höhe für responsive SVGs */
            z-index: 1; /* Welle hinter der Medaille */
        }

        svg.header-wave-top {
            width: 100%;
            height: auto;
            preserveAspectRatio: xMidYMid meet; /* Proportionen beibehalten */
        }
  
  :root {
    --orange: #f9a202;
    --blue: #02474c;
    --green: #027f5f;
}

.video, iframe {
  border-radius: 1.618em;
}

.video.video-container {
  z-index: 99;
}

@media (min-width:48em) {
  .section-image, .section-image > img {
    min-height: 50em;
  }
  .container {
    padding: 0px !important;
  }
}

  #site-wrapper .sub-nav {
      position: relative !important;
  }

#sidebar {
  display: none !important;
}

.bottom-wave {
  fill: rgb(255, 255, 255);
}

#occ-logo {
  width: 5.618em;
  height: 100%;
  margin: 0 auto;
  margin-bottom: 0.618em;
}

#main-hgroup {
  display: flex;
  flex-direction: column;
}

#main-hgroup div {
  display: flex;
  flex-direction: column;
}

header.banner h1, header.banner h2 {
  text-align: center;
}

@media (min-width:48em) {
  #main-hgroup {
    flex-direction: row;
  }

  #occ-logo {
    margin-right: 0.618em;
    margin-left: 0;
  }

  header.banner h1, header.banner h2 {
    text-align: left;
  }
  
}

@font-face {
  font-family: Gotham Bold;
  src: url('https://sp-comm-arkfiles.s3.theark.cloud/website/landing-pages/2024-occ-special-report/font/Gotham-Bold.otf');
}

@font-face {
  font-family: Gotham Medium;
  src: url('https://sp-comm-arkfiles.s3.theark.cloud/website/landing-pages/2024-occ-special-report/font/Gotham-Medium.otf');
}

@font-face {
  font-family: Gotham Light;
  src: url('https://sp-comm-arkfiles.s3.theark.cloud/website/landing-pages/2024-occ-special-report/font/Gotham-Light.otf');
}

header.banner, header.banner figure, header.banner figure>img {
  width: 100%;
  height: min(calc(120vh - var(--nav-2)), 162vw);
  height: min(calc(120svh - var(--nav-2)), 162vw);
}

.banner figure {
  -webkit-mask-image: linear-gradient(to top,rgba(0,0,0,0.4)15%,rgba(0,0,0,1)calc((var(--h1,1.978em) * 1.146) * 10));
    mask-image: linear-gradient(to top,rgba(0,0,0,0.4)15%,rgba(0,0,0,1)calc((var(--h1,1.978em) * 1.146) * 10));
}


header.banner figure {
  margin-top: -10vh;
}

@media (min-width: 48em) {

.banner figure {
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.2) 15%, rgba(0, 0, 0, 1) calc((var(--h1, 1.978em)* 1.146)* 5));
    mask-image: linear-gradient(to top,rgba(0,0,0,0.2)15%,rgba(0,0,0,1)calc((var(--h1,1.978em) * 1.146) * 10));
}

}

header.banner h1 {
  font-family: Gotham Bold; sans-serif;
  text-transform: uppercase;
  font-size: 216%;
}

header.banner h2 {
  font-family: Gotham Light; sans-serif;
  text-transform: uppercase;
  font-size: 120%;
}
.banner {
    position: relative;
    padding-bottom: 0
}

#overview {
  padding-top: 0;
  position: relative;
  z-index: 2;
  overflow-x: clip;
}

@media (min-width:64em) {
  #overview {
  margin-top: -4em;
  }

  header.banner h1 {
    font-family: Gotham Bold; sans-serif;
    text-transform: uppercase;
    font-size: 300%;
  }
}

.header-wave-bottom {
    position: absolute;
    width: 100% !important;
    bottom: -0.1em;
    z-index: 2;
    fill: #000;
}

.flipped.header-wave-bottom {
  transform:scale(-1, 1);
}

.flipped.header-wave-top {
  transform:scale(1, -1);
}

.header-wave-top {
  position: absolute;
  width: 100% !important;
  top: -0.1em;
  z-index: 1;
}

.picture-svg.header-wave-top {
  position: relative;
  
}

main, main section {
    background-color: #fff;
}

main section {
  overflow-x: hidden;
  overflow-y: visible;
}

section figure:not(figure.video), section img {
  height: 80vh;
  width: 100%;
  z-index:99;
}

@media (min-width:48em) {
  section figure:not(figure.video), section img {
    height: 120vh;
    width: 100%;
}
}

#sardiusplayer * {
  background-color: #fff !important;
}

section figure {
    position: relative;
}

section .space-large {
  width: 100%;
  padding: 0 1.618em;
  padding-bottom: 3.618em;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2em;
}

@media (min-width:64em) {
  section .space-large {
    width: 75%;
  }
}

section p, section header {
  max-width: 48em;
  margin-left: auto;
  margin-right: auto;
}

section .space-large p {
  width: 100%;
}

.banner hgroup {
  color: #fff;
  width: 100%;
  max-width: 48em;
  margin-left: auto;
  margin-right: auto;
  padding: 0.618em;
  position: absolute;
  bottom: 22vh;
}

@media (min-width:48em) {
  .banner hgroup {
    bottom: 15em;
  }

  #headline, #headline img:not(#occ-logo), #headline figure {
    min-height: 40em;
  }
}

.banner h2, .banner h1 {
  text-align: left;
}

p {
    font-family: "Libre Franklin", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    line-height: 2.4;
    text-align: left;
  	
}

h3 {
  color: var(--blue);
}

.verse {
    font-size: 130%;
    font-weight: 600;
    color: var(--blue);
    text-align: center;
  <!--  margin: 1.618em auto; -->
    line-height: 1.5;
    width: 80% !important;
    max-width: 24em;
}

.verse span {
  font-size: 90%;
  font-weight: 300;
  display: block;
  text-align: center;
  margin: 0 auto;
  font-family: Gotham Regular, sans-serif;
  padding-top: 0.309em;
  color: var(--green);
}

@media (min-width:48em) {
  .verse {
    font-size: 160%;
  }
}

section p {
  margin-bottom: 1.618em;
}

.has-dropcap:first-letter {
    font-family: "Playfair Display", serif;
    float: left;
    font-size: 5em;
    line-height: 0.65;
    margin: 0.1em 0.1em 0.1em 0;
    color: var(--orange);
  }
  
  .dropcap {
    font-family: "Playfair Display", serif;
    background: var(--orange);
    color: var(--orange);
    float: left;
    font-size: 4.5em;
    line-height: 1.4;
    margin: 0.2em 0.1em 0.2em 0;
    padding: 0.1em;
  }
  .dropcap:before,
  .dropcap:after {
    content: "";
    display: block;
  }
  .dropcap:before {
    margin-top: -0.2em;
  }
  .dropcap:after {
    margin-bottom: -0.15em;
  }

  .sr-only:not(:focus):not(:active) {
    clip: rect(0 0 0 0); 
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap; 
    width: 1px;
  }

  .block-header {
    background-color:var(--green);
    border: var(--blue) 0.309em solid;
    color: #fff;
    text-align: center;
    margin: 0.618em auto 4.618em;
    padding:  0.618em;
    border-radius: 1em;
    width: 90%;
    max-width: calc(48em - 1.618em - 1.618em);
    z-index: 99;
    position: relative;
    box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
    text-align: center;
    display: block;
  }

  .block-header h2 {
    font-family: Gotham Light;
    text-transform: uppercase;
    font-weight: 400;
    font-size: 120%;
  }

  .block-header h2 span {
    font-size: 150%;
    font-family: Gotham Bold;
    display: block;
  }

  @media (min-width:48em) {

  .block-header {
    margin-top: -8em;
  }

  .block-header h2 {
    font-size: 170%;
  }

  .block-header h2 span {
    font-size: 200%;
  }

}

.relative-parent {
  position: relative
}

.circle-image {
  border-radius: 50% !important;
  width: 150%;
  height: 100%;
  shape-outside: circle(calc(50% + 0.618em));
  transform: scale(1);
  transition: transform 2s;
  z-index: 99;
  clear: both;
  margin: 0 auto;
  left: -25%;
}

.circle-image:hover {
  transform: scale(0.90);
  transition: transform 2s;
}

@media (min-width:48em) {

.circle-image.left {
  float: left;
  margin: 0.618em;
}

.circle-image.right {
  float: right;
  margin: 0.618em;
}
  .circle-image {
    width: 22em;
    left: 0;
  }
}



  #intro-end {
    background-color: #fff;
    padding-top: 4.618em;
    z-index:3;
    position: relative;
  }


  .toys {
    position: absolute;
    top: 0;
    margin: 0;
    padding: 0;
    height: auto !important;
    z-index: 2;
    opacity: 0.045;
  }


  #yoyo {
    left: 5%;
    width: 15em; 
    top: 5em;
     opacity: 1 !important;
  }

  #book {
    right: -15%;
    width: 24em;
    top: 68em;
  }

  #shoebox {
    left: 7%;
    width: 25em !important;
    top: 5em;
    z-index: 1;
  }

  #tambourine {
    right: -15%;
   <!-- width: 20em !important; -->
    min-width: 15em; 
    top: 40em;
  }

  #soccer-ball {
    right: 10%;
    width: 10em; 
    top: 15em;
     opacity: 1 !important;
  }

  #socks {
    right: 5%;
    width: 15em !important;
    top: auto;
    bottom: 12em;
  }

  #crayons {
    left: 10%;
    width: 13em !important;
    top: auto;
    bottom: 50em;
  }

  #bear {
    right: -5%;
    width: 18em !important;
    top: 3em;
  }

  #flower-1 {
    left: -28%;
    width: 19em !important;
    margin-top: 22em;
  }

  #flower-2 {
    right: 11%;
    width: 16em !important;
    margin-top: auto;
    bottom: 5em;
  }

  #red-car {
    right: 11%;
    width: 16em !important;
    margin-top: 22em;
  }

  #doll {
    right: 11%;
    width: 15em !important;
    margin-top: 32em;
  }

  #calculator {
    left: 14%;
    width: 16em;
    top: auto;
    bottom: 22em;
  }

  #maracas {
    left: 7%;
    width: 17em !important;
    top: auto;
    bottom: 20em;
  }

  #stars-1 {
    left: 2%;
    width: 8em !important;
    top: 5em;
  }

  #stars-2 {
    right: -5%;
    width: 10em !important;
    top: 19em;
    z-index: 99;
  }

  #cross {
    left: 10%;
    width: 20em !important;
    margin-top: auto;
    bottom: 27em;
    top: auto;
  }

  @media (max-width: 1600px) {
    #yoyo {
      opacity: 0.3 !important;
      width: 30%
    }
    #soccer-ball {
      opacity: 0.3 !important;
        width:20%
    }
  }
  @media (min-width:48em) {

    .toys {
      opacity: 0.065;
    }

  #yoyo {
    left: 5%;
        <!--width: 22vw;-->
        top: 3em;
  }

  #book {
    right: -3%;
    width: 34vw !important;
    top: 22em;
  }

  #shoebox {
    left: 7%;
    width: 25em !important;
    top: 5em;
    z-index: 1;
  }

  #tambourine {
    right: -6%;
  <!--  width: 32vw !important; -->
    min-width: 18em; 
    top: 23em;
    opacity: 1 !important;
  }

  #soccer-ball {
    right: 10%;
   <!-- width: 30vw !important; -->
    margin-top: 15em;
    opacity: 1 !important;
  }

  #socks {
    right: 8%;
    width: 25vw !important;
    margin-top: auto;
    bottom: 15em;
    top: auto;
  }

  #cross {
    left: 7%;
    width: 25vw !important;
    margin-top: auto;
    bottom: 12em;
    top: auto;
  }

  #crayons {
    left: 10%;
    width: 13em !important;
    top: auto;
    bottom: 50em;
  }

  #bear {
    right: 7%;
    width: 25vw !important;
  }

  #flower-1 {
    left: 11%;
    width: 20vw !important;
    margin-top: 5em;
  }

  #flower-2 {
    right: 11%;
    width: 16em !important;
    margin-top: auto;
    bottom: 5em;
  }

  #red-car {
    right: 11%;
    width: 16em !important;
    margin-top: 22em;
  }

  #doll {
    right: 11%;
    width: 20vw !important;
    margin-top: 15em;
  }

  #calculator {
    left: 7%;
    width: 19vw !important;
    top: auto;
    bottom: 26em;
  }

  #maracas {
    left: 7%;
    width: 19vw !important;
    top: auto;
    bottom: 15em;
  }

  #stars-1 {
    left: 7%;
        width: 29vw !important;
        top: 8em;
  }

  #stars-2 {
    right: -5%;
    width: 31vw !important;
    top: 19em;
  }

}

#main-header:after {
		content: '';
		position: absolute;
		z-index: 10;
		backdrop-filter: invert(100%);
	}
	
	.no-colour-change:after {
		backdrop-filter: none;
	}

  .numbers {
    height: 20em;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 4;
    overflow: hidden;
  }

  .numbers-container {
    background-color: var(--blue);
    width: 115%;
    border-radius: 50% 50% 0 0;
    border: #fff solid 0.5em;
    position: absolute;
    top: 0;
    background-image: url('https://www.die-samariter.org/fileadmin/sp/projekte/weihnachten-im-schuhkarton/Aktionsbericht_2024/map/Grafik_Weltkarte_2537px.svg');
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: 53% 18%;
    z-index: 2;
  }


  }
  @media (min-width:48em) {
    .numbers-container {
      background-size: 140%;
      margin-top:5em;
      margin-bottom: 5em
    }
  }
  

  .numbers-container > * {
    text-align: center;
    display: flex;
    justify-content: center;
    height: 20em;
    align-items: center;
    flex-direction: column;
    gap: 0.618em;
    padding-top: 1.618em;
    padding-bottom: 1.618em;
  }
  
  @media(max-width: 768px) {
      .numbers-container > * {
    gap: 0.01em;
        background-size: 200%
  }
  }

  .numbers-container h3 {
    color: #fff;
    text-transform: uppercase;
    font-size: 160%;
    font-family: Gotham Bold; sans-serif;
    line-height: 1;
    text-shadow: 0 0 1ch rgba(0, 0, 0, .2), 0 .146ch .236ch rgba(0, 0, 0, .2), .146ch .236ch .382ch rgba(0, 0, 0, .2), .236ch .382ch .618ch rgba(0, 0, 0, .2);
    padding-left: 2em;
    padding-right: 2em;
    max-width: 28em;
  }

  .numbers-container h3 span {
    font-size: 75%;
    display: block;
    font-family: Gotham Light; sans-serif;
  }
  

  @media (min-width:48em) {

    .numbers {
      height: 30em;
    }


    .numbers-container h3 {
      font-size: 300%;
    }

    .numbers-container > * {
      height: 30em;
    }

    .numbers-container h3 span {
    font-size: 50%;
    }
  }
  
  #quote {
    position: relative;
    background-color: transparent;
    z-index: 2;
  }

  .quote-background {
    position: relative;
    z-index: 2;
    background-color: #EEF4E2;
    margin-top: -0.1em;
  }

  .cls-1 {
    fill: #fff;
  }

  #franklin {
    position: absolute;
    top: 50%;
    left: 50%;
    <!--width: 13em !important; -->
    <!--height: auto !important; -->
    aspect-ratio: 1 / 1;
    z-index: 99;
    border-radius: 50%;
    border: #05843a 0.309em solid;
    opacity: 1;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    transform: scale(1);
    transition: transform 0.75s;
    transform: translate(-50%, -50%)
  }

  #franklin:hover {
    <!--transform: scale(1.05) rotateY(180deg);-->
    transition: transform 0.75s;
  }

  @media (min-width:60em) {

  #franklin {
    position: absolute;
    top: 50%;
   <!-- width: 20em !important; -->
   <!--  height: 20em !important;  -->
    left: 50%;
    z-index: 99;
    border-radius: 50%;
    border: #05843a 0.5em solid;
    opacity: 1;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    transform: scale(1);
    transition: transform 0.75s;
    transform: translate(-50%, -50%);
  }

  }

  @media (min-width:100em) {

    #franklin {
    <!--  right: calc(50% - 11.5em);-->
    <!--  width: 23em !important; -->
    <!--  height: 23em !important; -->
    }
  
    }

  section figure img:not(#franklin) {
    -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.1) 0, rgba(0, 0, 0, 1) calc((var(--h1, 1.978em)* 1.146)* 2));
    mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.1) 0, rgba(0, 0, 0, 1) calc((var(--h1, 1.978em)* 1.146)* 2));
    background-color: #000;
  }

 figure .circle-img {
    background-color: #000;
  }

  .country {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    padding-bottom: 1.309em;
    color: #fff;
    z-index: 99;
    font-family: Gotham Medium; sans-serif;
  }



  @media(min-width:48em) {
    .country {
      width: 22em;
    }
  }

  .orange-circle {
    color: #fff;
    background-color: var(--orange);
    width: max(3.618rem, 5vw);
    height: max(3.618rem, 5vw);
    border-radius: 50%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.75s;
  }

  .orange-circle span {
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    font-size: max(1.618rem,3vw);
    font-family: Gotham Bold; sans-serif;
  }

  .orange-circle-parent {
    max-width: 48em;
    padding-bottom: 0 !important;
  }
  
    .red-circle {
    color: #da1a32;
    background-color: #da1a32;
    width: max(3.618rem, 5vw);
    height: max(3.618rem, 5vw);
    border-radius: 50%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.75s;

  }

  .red-circle span {
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    font-size: max(1.618rem,3vw);
    font-family: Gotham Bold; sans-serif;
  }

  .red-circle-parent {
    max-width: 48em;
    padding-bottom: 0 !important;
  }
     .st0 {
        fill: #d70926;
      }

      .st1 {
        fill: #fff;
      }
  
   .st10 {
        fill: #d70926;
      }

      .st11 {
        fill: #fff;
      }

  #quote-marks {
    padding: 1em;
    height: 100%;
    width: auto;
    z-index: 99;
  }

  blockquote {
    width: 100% !important;
    margin-top: 1.618em;
    max-width: 48em;
    margin-left: auto;
    margin-right: auto;
  }

  blockquote p {
    font-size: 150%;
    line-height: 1.2;
    color: var(--blue);
    font-family: Gotham Bold, sans-serif;
    margin-bottom: 0.618em;
    text-align: left;
  }

  @media (min-width:48em) {
    blockquote p {
      font-size: 200%;
    }
  }

  blockquote footer {
    font-size: 160%;
    color: var(--blue);
    font-family: Gotham Medium, sans-serif;
  }

  blockquote small {
    font-size: 80%;
    font-family: Gotham Light, sans-serif;
  }

  #gospel-outreach {
    position: relative;
  }



  .full-img {
    border-radius: 1.618em;
    height: auto !important;
    width: 100%;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    background-color: rgba(0,0,0,0);
  }

  .circle-img {
    height: auto !important;
    width: 100%;
    background-color: rgba(0,0,0,0);
  }

  figure:has(.full-img), figure:has(.circle-img) {
    height: auto !important;
    width: 100%;
    border-radius: 0.618em;
    background-color: rgba(0,0,0,0);
  }

  

  .cls-0 {
    fill: #fff;
  }

  .cls-1 {
    fill: #027f5f;
  }

  .cls-2 {
    fill: #02474c;
  }

  #shoebox-hr {
    opacity: 0.7;
    margin: 0 auto;
    width: 100%;
    display: flex;
    justify-content: center;
    padding-top: 4.618em;
    height: 100%;
    max-width: 30em;
  }

  @media (min-width:48em) {
    #shoebox-hr {
      width: 75%;
      padding-top: 2.618em;
    }
  }

  span.caption {
    text-transform: uppercase;
    font-weight: 700;
    color: var(--green);
  }

  #conclusion {
    background-color: #ececec;
    display: none !important;
  }

  .verse i {
    font-weight: 900;
  }
         @media (max-width: 1600px) {
            .medal {
                width:10em;
                height: 10em;
              
            }
            .medal-container {
                margin-bottom: calc(-0.5 * 14em); 
            }
          .back-green {
            font-size: var(--base-unit, 1em);
          }
           .back-red {
            font-size: var(--base-unit, 1em);
          }
          .quote-background h2 {
            padding-top:17%;
          }
                  }
  @media (max-width: 1600px) {
              .back-green {
            font-size: 0.8em!important;
            padding-left: 0.1em;
             padding-right: 0.1em;
          }
    	 .back-red {
            font-size: 0.8em !important;
           padding-left: 0.1em;
             padding-right: 0.1em;
          }
  }
  
  
  @media (max-width: 763px) {
            .medal {
                width:6em;
                height: 6em;
              
            }
            .medal-container {
                margin-bottom: calc(-0.5 * 14em); 
            }
          .back-green {
            font-size: 0.7em!important;
            padding-left: 0.1em;
             padding-right: 0.1em;
          }
    	 .back-red {
            font-size: 0.7em !important;
           padding-left: 0.1em;
             padding-right: 0.1em;
          }
  }

  
  @media (max-width: 1400px) {
    .quote-background h2 {
            padding-top:10%;
          }
  }
  
  @media (max-width: 1400px) {
    .quote-background h2 {
            padding-top:10%;
          }
  }

 .st0 {
        stroke: #d2e4b2;
        stroke-miterlimit: 10;
        stroke-width: 2px;
      }

      .st0, .st1 {
        fill: none;
      }

      .st2 {
        fill: #e1efe4;
      }

      .st3 {
        fill: #eef4e2;
      }

      .st4 {
        clip-path: url(#clippath);
      }

* {box-sizing: border-box}

.mySlides {display: none}
img {vertical-align: middle}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white!important;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  background-color: rgba(0,0,0,0.7);
  font-size: 80%;
  padding: 8px 12px;
 /* position: absolute;*/
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/4 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

  .breadcrumb-item.active, .dot:hover {
  background-color: transparent!important;
}
  
    #header-menu a.active, .dot:hover {
  background-color: transparent!important;
}
  
  .submenu-left ul a.active, .dot:hover {
  background-color: transparent!important;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}