* {
    Margin: 0;
    Padding-left: 0%;
    padding-right: 0%;
}

body {
    font-family: Georgia;
}

@media only screen and (min-width: 1200px) {
    div.pagecontent-wrapper {
        max-width: 75%;
        margin-inline: auto;
    }
}

img {
    max-width: 100%;
}

.image100 {
    display: block;
    width: 100%;
    height: auto;
    margin: 5em 0;
}

.image80 {
    display: block;
    width: 80%;
    height: auto;
    margin: 5em auto;
}

.container {
    width: 100%;
    min-height: 100vh;
    padding-left: 8%;
    padding-right: 8%;
    box-sizing: border-box;
    overflow: hidden;

}

.Video {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}


.header{
    border-bottom: 1px solid #E2E8F0;
    background-color: #FFFFFF;
    display: flex;
    justify-content: space-between;
    padding: 1em 1em 0.5em 1em;
}

.navbartop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1px, 5px;
    box-sizing: border-box;
    background-color: #FFFFFF;
}

header picture.logo {
    width: auto;
    height: 60px;
    cursor: pointer;
    align-items: center;
}

header picture.logo img {
    height: 50px;
    padding: 5px;
    width: auto;
}

header picture.logo source {
    height: 60px;
    width: auto;
}

.nav-item {
    margin-left: 30px;
    font-family: "Gotham";
    text-transform: uppercase;
    color: #909090;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
}
.bar {
    display: block;
    width: 25px;
    height: 5px;
    margin: 4px auto;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    background-color: #909090;
    box-sizing: border-box;
}
.nav-menu {
    display: flex;
    justify-content: space-between;
}
.nav-link{
    font-size: 30px;
    font-weight: 900;
    text-transform: uppercase;
    color: #909090;
    font-family: "Gotham";
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
}
.nav-link:hover{
    color: #F8B435;
}

/*** Build with purpose image ***/

.LogoImage {
    width: 70%;
    height: auto;
    margin-left: auto;
    margin-right: auto;

}
.navbar {
    width: 100%;
    display: inline;
    align-items: center;
    list-style-type: none;

}

.logo {
    width: 400px;
    cursor: pointer;
    margin: 30px 0;
    align-items: left;

}

/*** Hamburger icon ***/

.menu-icon {
    width: 65px;
    margin: 30px 0;
    cursor: pointer;
    float: right;

}

/*** Paragraph Button in Gold ***/

.Button {
    width: 300px;
    height: 50px;
    font-family: "Gotham";
    padding: 20px;
    color: #fff;
    font-size: 30px;
    border: 0;
    outline: none;
    background: linear-gradient(to right, #fcd283,  #f8b435);
    border-radius: 60px;
    text-align: center;
    text-decoration: none;
    line-height: 0px;
    text-transform: uppercase;
    cursor: pointer;
    transition: width 0.3;}

    .Button:hover {
        display: block;
    }

    .Button:hover {
        width: 320px;
    }

 
/*** FONTS ***/

    @font-face {
        font-family: 'Gotham';
          src: url('/development/build/Fonts/Fonts2/gotham-bold.eot'); /* IE9 Compat Modes */
          src: url('/development/build//development/build/Fonts/Fonts2/gotham-bold.eot') format('embedded-opentype'), /* IE6-IE8 */
              url('Fonts/Fonts2/gotham-bold.woff2') format('woff2'), /* Super Modern Browsers */
              url('Fonts/Fonts2/gotham-bold.woff') format('woff'), /* Pretty Modern Browsers */
              url('Fonts/Fonts2/gotham-bold.ttf')  format('truetype'), /* Safari, Android, iOS */
              url('Fonts/Fonts2/gotham-bold.svg#svgFontName') format('svg'); /* Legacy iOS */
          font-weight: 400;
          font-style: normal;
          font-display: swap;
}

@font-face {
    font-family: 'Gotham';
      src: url('/development/build/Fonts/Fonts2/gotham-book.eot'); /* IE9 Compat Modes */
      src: url('/development/build//development/build/Fonts/Fonts2/gotham-book.eot') format('embedded-opentype'), /* IE6-IE8 */
          url('Fonts/Fonts2/gotham-book.woff2') format('woff2'), /* Super Modern Browsers */
          url('') format('woff'), /* Pretty Modern Browsers */
          url('Fonts/Fonts2/gotham-book.ttf')  format('truetype'), /* Safari, Android, iOS */
          url('Fonts/Fonts2/gotham-book.svg#svgFontName') format('svg'); /* Legacy iOS */
      font-weight: 200;
      font-style: normal;
      font-display: swap;
}

@font-face {
    font-family: 'Gotham';
      src: url('/development/build/Fonts/Fonts2/gotham-black.eot'); /* IE9 Compat Modes */
      src: url('/development/build//development/build/Fonts/Fonts2/gotham-black.eot') format('embedded-opentype'), /* IE6-IE8 */
          url('Fonts/Fonts2/gotham-black.woff2') format('woff2'), /* Super Modern Browsers */
          url('Fonts/Fonts2/gotham-black.woff') format('woff'), /* Pretty Modern Browsers */
          url('Fonts/Fonts2/gotham-black.ttf')  format('truetype'), /* Safari, Android, iOS */
          url('Fonts/Fonts2/gotham-black.svg#svgFontName') format('svg'); /* Legacy iOS */
      font-weight: 600;
      font-style: normal;
      font-display: swap;
}

 @font-face {
	 font-family: Gotham_Light_Italic;
	 src: url(/_files/fonts/gotham-lightitalic.woff);
}
 @font-face {
	 font-family: Gotham_Bold;
	 src: url(/_files/fonts/gotham-bold.woff);
}

@font-face {
    font-family: Lucida_Bright;
    src: url('/development/build/Fonts/lucida-bright-demibold.ttf') format ('truetype');
}
.GothamBook {
    font-family: 'Gotham';
    src: url('/development/build/Fonts/Fonts2/gotham-book.eot'); /* IE9 Compat Modes */
    src: url('/development/build//development/build/Fonts/Fonts2/gotham-book.eot') format('embedded-opentype'), /* IE6-IE8 */
        url('Fonts/Fonts2/gotham-book.woff2') format('woff2'), /* Super Modern Browsers */
        url('Fonts/Fonts2/gotham-book.woff') format('woff'), /* Pretty Modern Browsers */
        url('Fonts/Fonts2/gotham-book.ttf')  format('truetype'), /* Safari, Android, iOS */
        url('Fonts/Fonts2/gotham-book.svg#svgFontName') format('svg'); /* Legacy iOS */
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

.text-outline {
    font-family: 'Gotham';
    font-weight: 900;
    font-style: normal;
    color: #fff;
    font-size: 40px;
    -webkit-text-stroke-color: #4D4D4D;
    -webkit-text-stroke-width: 1.7px;
}

.videoDecoration1, .videoDecoration2 {
    height: 200px;
    width: 300px;
    max-width: 25%;
    position: absolute;
}

.videoDecoration1 {
    top: -25px;
    right: -25px;
    border-top: 10px solid #f8b435;
    border-right: 10px solid #f8b435;
}

.videoDecoration2 {
    bottom: -25px;
    left: -25px;
    border-bottom: 10px solid #f8b435;
    border-left: 10px solid #f8b435;
}

.videoDecoration3 {
    position: absolute;
    top: -11%;
    max-width: 25%;
    width: auto;
    z-index: 10;
}



/*** Paragraph above gold button ***/
.row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    margin: 100px auto ;
    position: relative;
    max-width: 80%;
    gap: 3em;

}

.col-1 {
    position: relative;
    padding: 10px;
}



.col-1 h2 {
   font-size: 54px;
   font-family: "Gotham";
   color: #f8b435;
}
.col-1 h3 {
    font-size: 20px;
    font-family: "Gotham"; 
    color: #777;
    font-weight: 200;
    margin: 20px 0 10px;
 }
 .col-1 p {
    font-size: 18px;
    font-family: "Gotham"; 
      color: #b3b3b3;
    font-weight: 100;
    margin: 20px 0 10px;
 }

p.pillars-intro {
    width: 50%;
    margin: 100px auto;
    font-size: 22px;
    text-align: center;
    text-wrap: pretty;
    font-family: Gotham;
    font-weight: lighter;
    color: #777;
}

div.campaign-logo {
    width: 50%;
    margin: 2em auto;    
    text-align: center;
}

.row .LogoImage {
    width: 700px;
}

@media only screen and (max-width:1500px) {
    .row {
        flex-direction: column;
    }
    
    .row .col-1 {
        order: 2;
        
    }
    
    .row .LogoImage {
        order: 1;
    }
}

/*** Campaign Pillars Title ***/

 .Campaign-Pillars{
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 50px 0;
 }
 
 .Campaign-Pillars h2 {
     font-size: 48px;
     text-transform: uppercase;
     color: #f8b435;
 }
 
 .Campaign-Pillars h3 {
     font-size: 24px;
     text-transform: uppercase;
     color: #303030;
     max-width: 50%;
     margin-inline: auto;
     border-bottom: 2px solid #f8b435;
     padding-bottom: 5px;
     padding-top: 1em;
     text-wrap: balance;
 }

 /*** Campaign Pillar Blocks with titles and paragraphs ***/

 .Pillar-Blocks{
    width: 90%;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    display: grid;
    grid-gap: 20px;
    margin: 10px auto;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
 }

 .col-sm-4{
    width: 90%;
    background: #fff;
    border: 1px solid white;
    margin-bottom: 20px;
    margin-inline: auto;
    transition: 0.3s;
    position: relative;
    padding-bottom: 100px;
 }

 .card{
    justify-content: center;
    align-items: center;

 }

 .card-body{
    justify-content: center;
    align-items: stretch;
 }

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

 .card-title{
    text-align: center;
    padding: 20px 10px;
    width: 90%;
    border-radius: 6px;
    border: 2px solid white;
    font-family: "Gotham"; 
    font-size: 22px;
    position: relative;
    box-sizing: border-box;
    margin: 0 auto;
    justify-content: center;
    align-items: center;
}

 .card-text{
    text-align: center;
    font-size: 18px;
    width: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
 }

.btn-primary{
    width: 150px;
    margin: 10px auto 50px auto;
    display: block;
    font-family: "Gotham";
    padding: 15px 10px;
    color: #fff;
    font-size: 16px;
    border: 0;
    outline: none;
    background: #aaaaaa;
    border-radius: 25px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    justify-content: center;
    align-items: center;
 }

.Pillar-Blocks .btn-primary {
    position: absolute;
    bottom: -20px;
    left: 25%;
    width: 47%;
}

/*** Calls to Action ***/

div.ctaBlock {
    background-image: url('/development/build/IMG/background-image-cta.jpg');
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: cover;
    min-height: 300px;
    padding: 100px;
    margin-top: 100px;
}

div.ctaBlock h2 {
    text-align: center;
    color: #333;
    font-size: 40px;
    font-family: "Gotham"; 
    text-transform: uppercase;
}

div.ctaButtons {
    margin-top: 100px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}

div.ctaButton {
    width: 25%;
}

div.ctaButton a {
    margin: 50px auto 60px auto;
    display: flex;
    flex-direction: column;
    font-family: "Gotham";
    padding: 15px 10px;
    color: #333;
    font-size: 20px;
    border: 0;
    outline: none;
    background: #fff;
    border-radius: 25px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    justify-content: center;
    align-items: center;
}

div.ctaButton a img {
    width: 25%;
    max-width: 300px;
    height: auto;
}

div.article-content-column-container {
    display: block; 
    position: relative; 
    margin-top: 100px; 
    min-height: 400px;
}

div.pullquote-horizontal-background {
    width: 70%; 
    margin-left: auto;
    margin-right: auto;
    padding: 50px 150px; 
    background-color: #f4f4f4; 
    position: relative; 
    min-height: 420px;
}

div.pullquote-text-wrapper {
    margin-right: 500px; 
    position: relative;
    font-family: Gotham;
    font-size: 24px;
}

div.quotemark-pre {
    color: #f8b435; 
    font-size: 1500%; 
    font-family: Helvetica, Arial, sans-serif; 
    position: absolute; 
    left: -75px; 
    top: -130px; 
    line-height: 100%;
}

div.pullquote-text-horizontal {
    text-align: center;
}

div.quotemark-post {
    color: #f8b435; 
    font-size: 1500%; 
    font-family: Helvetica, Arial, sans-serif; 
    position: absolute; 
    right: -75px; 
    bottom: -320px; 
    line-height: 100%;
}

div.pullquote-image-wrapper {
    position: absolute; 
    top: -75px; 
    right: 50px;
}

div.pullquote-image {
    width: 400px; 
    margin-left: auto; 
    margin-right: auto;
}

div.pullquote-image img {
    width: 400px; 
    height: auto; 
    border-radius: 50%
}

div.pullquote-source {
    margin-bottom: 1em; 
    text-align: center;
}


/*** Social Icons / Social Grid ***/


.SocialButtons img{
    height: 25px;
    margin: 5px;
    cursor: pointer;
    text-align: center;
    align-items: center;

 }

.SocialButtons {
    text-align: center;
    align-items: center;
    margin-bottom: 300px;
 }

 .instagram-media {
    max-width: 200px;
    max-width: 200px;
    padding: 30%;
 }


/*** Image Gallery to link socials to ***/


 .grid-wrapper img {
    max-width: 100%;
    height: 100%;
    vertical-align: middle;
    display: inline-block;

 }

 .grid-wrapper > div {
    display: flex;
    justify-content: center;
    align-items: center;
    
 }

 .grid-wrapper > div > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
 }

 .grid-wrapper {
    display: grid;
    grid-gap: 10px;
    margin: 0 auto;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr ));
    grid-auto-rows: 250px;
    grid-auto-flow: dense;
    padding-bottom: 50px;
    padding-top: 50px;

 }

 .grid-wrapper .wide {
    grid-column: span 2;
 }

 .grid-wrapper .tall {
    grid-row: span 2;
 }

 .grid-wrapper .big {
    grid-column: span 2;
    grid-row: span 2;
 }

 .v-stretch {
    grid-row: span 2;
 }

 .h-stretch {
    grid-column: span 2;
 }

 .big-stretch {
    grid-column: span 2;
    grid-column: span 2;
 }

 /*** Media Phone screen size for gallery ***/

 @media (max-width: 560px){
    .v-stretch{
        grid-row: span 1;
    }
    .h-stretch{
        grid-column: span 1;
    }
    .big-stretch{
        grid-column: span 1;
        grid-row: span 1;
    }
 }

 /*** Media Phone screen size overall ***/

 @media only screen and (max-width:768px){
.row{
width: 20%;
display: flex;

}

.row{
    flex-direction: column-reverse;
    margin: 50px 0;
}
 }

 @media only screen and (max-width:768px){

    .Video{
    width: 70%;
    margin: 0 auto;
    display: flex;
}

div.ctaButtons {
    flex-direction: column;
}

div.ctaButton {
    width: 75%;
}

div.ctaButton a {
    flex-direction: row;
}


    }
    
.priorities-banner {
    width: 100%;
    height: 600px;
    background-image: url('/development/build/IMG/blueprint-background-design.png');
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}    

.priorities-banner h1 {
    color: #333;
    font-size: 60px;
    font-family: "Gotham"; 
    text-transform: uppercase;  
    text-align: center;
}

/* accessible hamburger menu controls */

#menustate {
  display: none;
}

nav.navburger {
    display: none;
}

nav.navburger label {
    font-size: 3em;
    background: white;
    color: #909090;
}

.hamburger-button {
  position: absolute;
  width: 2.5rem;
  height: 2.5rem;
  right: 0px;
  top: 0px;
}

.hamburger-button :is(label, a) {
  position: absolute;
  inset: 0;
}

.navburger ul {
    position: absolute;
    right: 0px;
    top: 2.5rem;
    list-style: none;
}

.navburger li.burger-item {
    border: 1px solid gray;
    padding: 5px 20px;
    font-family: Gotham;
    font-size: 25px;
    text-transform: uppercase;
    color: #909090;
    background-color: white;
}

.navburger li.burger-item a {
    color: #909090;
    text-decoration: none;
}

.navburger li.burger-item:hover {
    background-color: #dddddd;
}

.hamburgerClose {
  display: none;
}

.navburger label {
  /* Basic styling of hamburger button */
  cursor: pointer;
  display: grid;
  place-content: center;
  font-size: 2rem;
  background: #ccf;
}

nav ul,
nav .hamburgerClose {
  /* Hide the menu and close button */
  display: none;
}

:is(#menustate:checked, #menustate:target) ~ nav :is(ul, .hamburgerClose) {
  /* Show the menu and close button */
  display: block;
}

:is(#menustate:checked, #menustate:target) ~ nav .hamburgerOpen {
  /* Hide the open button */
  display: none;
}

.screen-reader-text {
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
  border: 0;
  padding: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
}

@media only screen and (max-width:1000px){
    nav.navburger {
        display: block;
    }
    
    nav.navbartop {
        display: none;
    }
}

.priorities-nav {
    display: flex;
    justify-content: center;
    margin-top: 1.5em;
}

.priorities-nav .priority-link {
    margin-left: 2em;
    margin-right: 2em;
    margin-top: 1.5em;
    font-family: Gotham;
    font-size: 15px;
    text-align: center;
    text-transform: uppercase;
}

.priorities-nav .priority-link a {
    color: #333;
    text-decoration: none;
}

.priorities-nav .priority-current a {
    color: #f8b435;
}

h2.priority-header {
    margin: 1.5em auto;
    font-family: Gotham;
    text-align: center;
    font-size: 40px;
    color: #333;
    text-transform: uppercase;    
}

h2.priority-header .priority-header-title {
    font-size: 35px;
    color: #f8b435;
}

div.priority-keyfacts, div.project-features, div.projects-keyfacts {
    display: flex;    
    flex-wrap: wrap;
    justify-content: center;
}

div.priority-keyfacts div.priority-keyfact, div.projects-keyfact, div.project-features div.project-feature {
    text-align: center;
    font-size: 20px;
/*    border-bottom: 1px solid #f8b435; */
    margin: 2em;
    padding: 2em;
    width: 20%;
}

.project-features-blurb {
    width: 50%;
    margin: 1em auto;
    font-size: 20px;
    text-align: justify;
}

.project-features-blurb p {
    margin-top: 2em;
    margin-bottom: 2em;
    text-align: justify;
}

div.goldbar {
    width: 100px;
    max-width: 100%;
    height: 15px;
    margin-inline: auto;
    border-bottom: 2px solid #f8b435;
}

.priority-blurb {
    text-align: justify;
    font-size: 18px;
    width: 75%;
    margin: 2em auto;
}

.priority-success {
    margin: 2em;
}

.priority-success h2 {
    text-transform: uppercase;
    margin: 3em 2em 2em;
    font-family: Gotham;
    font-size: 1em;
    text-align: center;
}

.priority-success-list {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-content: start;
}

.priority-success-item {
    max-width: 200px;
    text-align: center;
}

.priority-success-item img {
    width: 55px;
    height: auto;
}

.priority-projects {
    margin: 2em;
}

.priority-projects h2 {
    color: #f8b435;
    font-family: Gotham;
    text-transform: uppercase;
    margin: 4em auto 2em;
    text-align: center;
}

.priority-projectlist {
    display: grid;
    grid-template-columns: auto auto auto;
    margin-inline: auto;
    border-left: 2px solid #f8b435;
    padding: 0 2em;
    width: 75%;
    justify-content: space-around
    align-content: center;
}

.priority-projectnumber {
    padding: 5px;
}

.priority-projectname {
    font-family: Gotham;
    text-transform: uppercase;
    font-size: 20px;
    padding: 15px 5px;
}

.priority-projectlink {
    font-size: 20px;
    padding: 15px 5px;
}

.priority-projectlink a {
    font-family: Gotham;
    font-size: 20px;
    color: white;
    text-decoration: none;
    background-color: #a0a0a0;
    padding: 5px 20px;
    border-radius: 10px;
}

div.simpleParallax {
    width: 80%;
    margin-inline: auto;
}

img.parallaxScroll {
    width: 100%;
}

footer {
    min-height: 600px;
    background-image: url(/development/build/IMG/footer-background-1-tint75.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    display: flex;
    flex-direction: column;
    justify-items: center;
    align-items: center;
    margin-top: 3em;
    font-family: Gotham;
}

footer a {
    color: #c0c0c0;
}

.footer-socialbar {
    width: 100%;
    padding-top: 1em;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-items: center;
    align-items: center;
}

.footer-socialbar-line {
    height: 1px;
    border-top: 2px solid #f8b435;
    margin-inline: 2em;
    flex-grow: 1;
}

.footer-socialbar-icons {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-items: center;
    align-items: center;
}

.footer-socialbar-icons a {
    margin: 0.5em;
}

img.footer-logo {
    margin: 2em;
}

.footer-linksbar {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-items: center;
    align-items: start;
    color: #c0c0c0;
    width: 100%;
    line-height: 200%;
}

.footer-linksbar-linklist {
    width: 13%;
    padding: 2em;
} 

.footer-linksbar-linklist h3 {
    color: #f8b435;
    font-family: Gotham;
    font-weight: normal;
    text-transform: uppercase;
}

.footer-linksbar-linklist ul {
    list-style-type: none;
}

.footer-linksbar-badgeblock {
    padding: 2em;
    max-width: fit-content;
    margin-inline: auto;
}

.footer-linksbar-badgeblock strong {
    font-family: Gotham;
    font-size: 1.17em;
    font-weight: normal;
}

.footer-linksbar-badgeblock img {
    width: 80px;
    height: auto;
    margin: 1em;
}

.footer-goldbar {
    width: 100%;
    margin: 3em 0 0 0;
    background-color: #f8b435;
    font-family: Gotham_Bold;
    text-align: center;
    font-size: 30px;
    padding: 20px;
    letter-spacing: 8px;
    text-transform: uppercase;
}

.footer-goldbar .footer-goldbar-the {
    font-family: Gotham_Light_Italic;
    text-transform: none;
}

.project-banner {
    width: 100%;
    height: 600px;
    background-image: url('/development/build/IMG/blueprint-background-design.png');
    background-size: cover;
    background-position: center;
}

.project-banner-screen {
    position: relative;
    top: 0px;
    left: 0px;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(270deg, rgba(255,255,255,0), rgba(255,255,255,1));
}

.project-banner h1 {
    font-family: Gotham;
    font-size: 3em;
    position: absolute;
    bottom: 0px;
    margin: 1em 3em;
    color: #333;
}

.project-quickfacts {
    display: flex;
    flex-direction: row;
}


.project-quickfacts h2 {
    margin-left: -0.2em;
    font-size: 200px;
    line-height: 80%;
}

.project-quickfacts-items {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    margin-inline: auto;
    gap: 2em;
}

.project-quickfacts-item {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
}

.project-quickfacts-number {
}

.project-quickfacts-description {
    font-size: 20px;
}

.project-quickfacts-underline {
    width: 65px;
    height: 5px;
    border-bottom: 2px solid #f8b435;
}

.project-blurb {
    width: 80%;
    margin: 5em auto 2em;
    font-family: Gotham;
    font-weight: lighter;
    font-size: larger;
}

.project-blurb h2 {
    font-family: Gotham;
    color: #f8b435;
    text-transform: uppercase;
    margin-top: 2em;
    margin-bottom: 1em;
}

.project-blurb p {
    text-align: justify;
    font-size: 20px;
}

.project-images-top {
    width: 100%;
    position: relative;
}

.project-images-top img:nth-child(1) {
    width: 63%;
    height: auto;
    float: left;
    padding-top: 2.5em;
}

.project-images-top img:nth-child(2) {
    width: 35%;
    height: auto;
    position: absolute;
    right: 0px;
    top: 0px;
}

.project-images-top .project-images-top-caption {
    width: 50%;
    padding: 1em 3em;
    font-family: Gotham;
    background-color: rgba(102,102,102,0.8);
    color: white;
    position: relative;
    top: -2.5em;
    font-size: 20px;
    box-sizing: border-box;
}

.project-header {
    text-transform: uppercase;
    color: #f8b435;
    font-size: 1.5em;
    font-family: Gotham;
    text-align: center;
    margin-top: 3em;
}

div.project-features div.project-feature {
    padding: 0;
}

.project-feature img {
    width: 55px;
}

.project-feature strong {
    font-family: Gotham;
    text-transform: uppercase;
    font-size: 24px;
}

.project-images-bottom {
    position: relative;
    margin: 2em;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    gap: 20px;
}

.project-image-bottom .dotgrid-tr, .project-image-bottom .dotgrid-bl {
    width: 50%;
    height: auto;
}

.project-image-bottom .dotgrid-tr {
    position: absolute;
    right: -5%;
    top: -8%;
}

.project-image-bottom .dotgrid-bl {
    position: absolute;
    left: -5%;
    bottom: -8%;
}

.project-image-bottom {
    position: relative;
}

@media only screen and (min-width:2190px) {
    .project-image-bottom:nth-child(1) { order: 2; }
    .project-image-bottom:nth-child(2) { order: 1; }
    .project-image-bottom:nth-child(3) { order: 4; }
    .project-image-bottom:nth-child(4) { order: 3; }
}

@media screen and (max-width: 1000px) {
    .project-banner h1 { margin: 1em; }
    .project-quickfacts { flex-direction: column; }
    .project-quickfacts h2 { margin: 0 0 0.5em; text-align: center; font-size: 150px; }
    
    .project-images-top .project-images-top-caption { width: 100%; padding: 1em 2em; top: 0px; }
}


.project-images-bottom-caption {
    font-size: 20px;
    text-align: right;
    max-width: 60%;
    margin-right: 4em;
    margin-left: auto;
}

.project-success {
    display: flex;
    flex-wrap: wrap;
}

.project-success-item {
    margin: 2em auto;
    text-align: center;
    max-width: 500px;
    flex-grow: 1;
}

.project-success-item img {
    max-width: 55px;
    margin-inline: auto;
}

.project-success-item p {
    font-size: 20px;
    margin-inline: 2em;
}

.project-cta-block { }
.giving-opportunities-header {
    display: block;
    margin: 3em auto;
    width: 1200px;
    max-width: 80%;
}

.giving-opportunities {
    display: flex;
    flex-wrap: wrap;
    margin-inline: 25%;
    justify-content: space-evenly;
}

.giving-opportunity {
    margin: 2em;
    width: 15em;
    font-family: Georgia;
}
.giving-opportunity-title {
    font-size: 24px;
}

.giving-opportunity-amount {
    font-size: 36px;
}

.giving-opportunity-goldbar { 
    width: 65px;
    height: 5px;
    border-bottom: 2px solid #f8b435;
}

.giving-opportunity-dropdown {
    background-color: #999;
    width: 50%;
    margin: 2px auto;
    padding: 5px;
}

.giving-opportunity-dropdown summary {
    font-family: Gotham;
    color: white;
    text-transform: uppercase;
    font-size: 24px;
    padding: 5px 30px;
    display: flex;
    justify-content: space-between;
}

.giving-opportunity-dropdown summary::-webkit-details-marker {
    display: none;
}

.giving-opportunity-dropdown summary::after {
  content: '';
  width: 18px;
  height: 10px;
  background: url('/development/build/IMG/arrow-white.svg');
  background-size: cover;
  margin-left: .75em;
  margin-top: 10px;
  transition: 0.2s;
}

.giving-opportunity-dropdown[open] > summary::after {
  transform: rotate(180deg);
}

.giving-opportunity-dropdown .giving-opportunity-dropdown-contents {
    margin: 5px 30px 20px;
    padding: 25px 30px;
    font-family: Gotham;
    font-weight: lighter;
    color: #666;
    font-size: 20px;
    background-color: #ddd;
}

.project-ctas { }
.cta-buttons {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}
.cta-button { 
    margin: 1em 3em;
}
.cta-button a {
    color: white;
    background-color: #f8b435;
    border-radius: 20px;
    padding: 10px 30px;
    display: block;
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
    font-family: Gotham;
    text-decoration: none;
    width: 300px;
}
.cta-header { 
    font-size: 30px;
    font-family: Gotham;
    text-transform: uppercase;
    color: #333;
    text-align: center;
    margin: 2em 25% 0;
}
.cta-contacts {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: baseline;
}
@media only screen and (max-width: 800px) {
    .cta-contacts {
        flex-direction: column;
    }
}
.cta-contact { 
    margin: 1em 2em;
}
.cta-contact img {
    width: 30px;
    height: auto;
    margin: 0px 10px;
}
.cta-contact a {
    color: #333;
    font-size: 24px;
    text-decoration: none;
}

.testimonial-left, .testimonial-right {
    width: 100%;
    padding: 0 4em;
    margin: 4em 0 40px 0;
    background-color: #f8f8f8;
    display: flex;
    padding: 0;
    gap: 2em;
    justify-content: center;
    align-items: center;
    font-family: 'Gotham';
    font-weight: lighter;
}

.testimonial-ldquo {
    float: left;
    max-width: 15%;
    margin: 10px;
}

.testimonial-source {
    text-align: center;
    margin: -40px 0 40px;
}

.testimonial-source img {
    aspect-ratio: 1;
    border-radius: 50%;
    width: 400px;
    max-width: 60vw;
}

.testimonial-source-name {
    font-size: 24px;
    font-weight: bold;
}

.testimonial-source-title {
    font-size: 20px;
    font-style: italic;
}

.testimonial-text {
    position: relative;
    max-width: 60%;
    font-size: 18pt;
    padding: 1em;
}

.testimonial-right .testimonial-text {
}

.testimonial-left .testimonial-text {
    order: 2;
}

.testimonial-left .testimonial-source {
    order: 1;
}

.testimonial-text .testimonial-quote {
    position: relative;
    top: -2em;
    left: -2em;
    color: #f8b435;
    font-family: Gotham;
    font-size: 120px;
}

@media only screen and (max-width:1500px) {
    .testimonial-text { font-size: 18pt; }
    .testimonial-source-name { font-size: 24px; }
    .testimonial-source-title { font-size: 20px; }
}

@media only screen and (max-width:1250px) {
    .testimonial-text { font-size: 24px; }
    .testimonial-source-name { font-size: 20px; }
    .testimonial-source-title { font-size: 18px; }
}

@media only screen and (max-width:1000px) {
    .testimonial-left, .testimonial-right {
        flex-direction: column;
        margin-top: 6em;
    }
    .testimonial-source { order: 1; }
    .testimonial-text { order: 2; width: 60%; margin-inline: auto !important; padding: 0 !important; text-align: justify;  }
}

.projectlist-top-header {
    font-family: Gotham;
    font-size: 48px;
    text-align: center;
    text-transform: uppercase;
    margin: 2em;
}

.projectlist-top-wrapper {
    width: 100%;
    margin-inline: 0;
    background-color: #fafafa;
    min-height: 200px;
    padding-top: 2em;
    padding-bottom: 2em;
}

.projectlist-top {
    display: flex;
    flex-wrap: wrap;
    width: 80%;
    margin-inline: auto;
    justify-content: center;
    column-gap: 2em;
}

.project-top-description {
    font-family: Gotham;
    font-weight: lighter;
    max-width: 784px;
}

.project-top-description strong {
    text-transform: uppercase;
}

.project-top-details {
    display: flex;
    flex-wrap: nowrap;
}

.project-top-thumb {
    width: 500px; height: auto;
    margin: 0 20px 0 0;
}

.c100 .slice .bar {
    margin: 0 !important;
    box-sizing: content-box !important;
}

div.projects-keyfact {
    width: auto;
}

.projectlist-all-header {
    margin-left: -0.2em;
    font-size: 160px;
    line-height: 80%;
    text-transform: uppercase;
}

.projectlist-header {
    font-family: Gotham;
    width: fit-content;
    font-size: 48px;
    max-width: 60%;
    margin: 2em auto;
    text-transform: uppercase;
    border-bottom: 2px solid #f8b435;
}

.projectlist-subheader {
    font-style: italic;
    text-transform: none;
    font-size: 24px;
}

.projectlist-group {
    display: flex;
    flex-wrap: wrap;
    max-width: 80%;
    align-content: space-evenly;
    justify-content: center;
    margin-inline: auto;
    font-family: Gotham;
}

.projectlist-group .project {
    width: 600px;
    max-width: 100%;
    margin: 1em 2em;
}

.projectlist-group .project-title {
    font-family: Gotham;
    text-transform: uppercase;
    color: #303030;
}

.projectlist-group .project-blurb {
    width: auto;
    margin: 1em 0;
    color: #909090;
    font-weight: lighter;
}

.projectlist-group .project-link a {
    color: white;
    text-decoration: none;
    background-color: #909090;
    border-radius: 15px;
    padding: 5px 20px;
}

.donate-columnset {
    display: flex;
    width: 80%;
    margin: 2em auto;
    gap: 50px;
    font-family: Gotham;
    font-weight: lighter;
    text-align: justify;
}

.donate-columnset p {
    margin-top: 1em;
    margin-bottom: 1em;
}

.donate-columnset .button-grey, a.button-grey {
    display: inline-block;
    font-family: Gotham_Bold !important;
    font-size: 12px !important;
    width: 210px;
    padding: 10px !important;
    text-align: center;
    margin: 5px 25px 5px 0px;
    transition: .3s;
    transition-timing-function: ease-in-out;
    border-radius: 8px;
    cursor: pointer;
    color: white;
    background-color: #999;
    text-decoration: none;
}

a.button-gold {
    display: inline-block;
    font-family: Gotham_Bold !important;
    font-size: 12px !important;
    width: 210px;
    padding: 10px !important;
    text-align: center;
    margin: 5px 25px 5px 0px;
    transition: .3s;
    transition-timing-function: ease-in-out;
    border-radius: 8px;
    cursor: pointer;
    color: white;
    text-decoration: none;
    background: linear-gradient(to right, #fcd283, #f8b435);
}

a.button-flatgold {
    display: inline-block;
    font-family: Gotham_Bold !important;
    font-size: 12px !important;
    width: 210px;
    padding: 10px !important;
    text-align: center;
    margin: 5px 25px 5px 0px;
    transition: .3s;
    transition-timing-function: ease-in-out;
    border-radius: 8px;
    cursor: pointer;
    color: white;
    text-decoration: none;
    background: #f8b435;
}

.donate-columnset .left-column {
    flex: 2;
    font-size: 20px;
}

.donate-columnset .right-column {
    flex: 3;
}

.sbs {
    display: flex;
    width: 80%;
    margin: 2em auto;
    font-family: Gotham;
    font-weight: lighter;
    line-height: 150%;
    font-size: larger;
    align-items: center;
}

.sbs-50 .sbs-text {
    flex: 1 1 50%;
    width: 50%;
}

.sbs-66 .sbs-text {
    flex: 2 2 66%;
    width: 66%;
}

.sbs-50 .sbs-img {
    flex: 1 1 50%;
    width: 50%;
}

.sbs-66 .sbs-img {
    flex: 1 1 33%;
    width: 33%;
}

.sbs-text {
    text-align: justify;
    padding: 2em;
}

.sbs-img img {
    width: 100%;
    height: auto;
}

.priorities-navbuttons {
    display: flex;
    flex-direction: row;
}

@media only screen and (max-width:1000px) {
    .priorities-navbuttons { flex-direction: column; }
}