/* NOTE: Switch to pixels (px) units.  Points (pt) are used in print media and not appropriate for the web. */

/* === GLOBAL === */
body {
    /* Default styling */
    font-family: 'Helvetica Neue', sans-serif;
    font-weight: regular;
    font-size: 20px;
    color: rgb(0, 0, 0); /* black text */
    background-color: rgb(255, 255, 255); /* white background */
}

bodyForm {
    /* Default styling */
    font-family: 'Helvetica Neue', sans-serif;
    font-weight: regular;
    font-size: 18px;
    color: rgb(0, 0, 0); /* black text */
    background-color: rgb(255, 255, 255); /* white background */
}


footer {
    font-size: 18px;
    color: rgb(100, 27, 96); /* purple text */
    text-align: center;
    border-top: solid 4px rgb(100, 27, 96);
    border-bottom: solid 1px rgb(100, 27, 96);
}

.inverse {
    color: rgb(255, 255, 255); /* white text */
    background-color: rgb(100, 27, 96); /* purple background */
}

.whiteText {
    color: rgb(255, 255, 255); /* white text */
}

.purpleText {
    color: rgb(100, 27, 96); /* purple text */
}

.purpleTextPhoneHeader {
    color: rgb(100, 27, 96); /* purple text */
    margin-right: 20px;
}

a,
a:hover {
    text-decoration: none; /* Never underline any links!! */
    color: rgb(255, 255, 255);
    cursor: pointer;
}

.linkText,
.linkText:hover {
    color: rgb(6, 110, 35); /* green text */
}

.linkTextTop,
.linkTextTop:hover {
    color: rgb(6, 110, 35); /* green text */
    font-size: 20px;
}

.linkTextBold,
.linkTextBold:hover {
    color: rgb(6, 110, 35); /* green text */
    font-weight: bold;
}

.biggerFontSize {
    font-size: 22px;
}

img {
    max-width: 100%; /* Prevent images from stretching beyond their natural widths. */
    border: 0;
}

.imgOpacity {
    opacity: 0.7 !important;
}

.imgNaturalSize {
    /* NOT USED.  KEEP TEMPORARILY. */
    max-width: none; /* Main image shrinks without this setting. */
}

.textWrap {
    float: left;
    margin-right: 20px;
}

.textWrapRT {
    float: right;
    margin-left: 20px;
}
h2,
.globalNavTop {
    color: rgb(100, 27, 96); /* purple text */
    font-weight: bold;
}

.centeredTitleOverImage,
.centeredHeaderTitleOverImage {
    color: rgb(100, 27, 96); /* purple text */
    font-size: 50px;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.lefttitleOverImageMAP {
    color: rgb(100, 27, 96); /* purple text */
    font-size: 40px;
    font-weight: bold;
    text-align: left;
    text-transform: uppercase;
    margin-bottom: 5px;
}
.centeredHeaderTitleOverImage {
    color: rgb(255, 255, 255); /* white text */
    margin-bottom: 0;
    text-shadow: 2px 4px 3px rgba(0, 0, 0, 0.3);
}

.leftTitleOverImage {
    color: rgb(0, 0, 0); /* black text */
    font-size: 22px;
    font-weight: bold;
    text-align: left;
    margin-bottom: 20px;
}

.leftTextOverImage {
    color: rgb(0, 0, 0); /* black text */
    font-size: 22px;
    text-align: left;
    margin-bottom: 20px;
    display: block;
}

span.smallTop,
span.centeredTitleOverImage,
span.leftTitleOverImage,
a.linkNewLine {
    display: block; /* Force line break for text embedded in paragraph tag that is meant to stand out on separate line. */
}

.bold {
    font-weight: bold;
}

h2 {
    font-size: 30px;
    text-align: center;
    
    margin-top: 0px;
    /*     margin-bottom: 0px; */
}


h3 {
    font-size: 25px;
    color: rgb(0, 0, 0); /* black text */
    font-weight: bold;
    text-align: center;
    margin-top: 0px;
    /*     margin-bottom: 0px; */
}



h3purple {
    font-size: 25px;
    color: rgb(100, 27, 96); /* purple-green text */
    font-weight: bold;
    text-align: center;
    margin-top: 0px;
    /*     margin-bottom: 0px; */
}

h4 {
    font-size: 22px;
    color: rgb(0, 0, 0); /* black text */
    font-weight: bold;
    text-align: center;
    margin-top: 0px;
    /*     margin-bottom: 0px; */
}

.smallText {
    font-size: 16px;
}

.logo {
    width: 416px;
    margin-bottom: 40px;
}

.globalNavMargin{
    text-align: right;
}

.globalNavMarginStore{
    margin-right: 45px;
}

/* === STORE STYLES === */

.audioSize {
    width: 300px;
    height: 30px;
}

.highlightText { 
    background-color:#9AC668; }

/* === COMMON PADDING, SPACING === */

.clearFloat {
    clear: both;
}
.center {
    text-align: center;
}

p.multiline.left {
    text-align: left;
}

h3.left,
.left {
    text-align: left;
}

.noPadding {
    /* Eliminate the container-fluid padding on left and right so background images fill container. */
    padding: 0;
}

.rowPadding {
    padding-left: 95px;
    padding-right: 86px;
}

/* Defining this as 'padding: 5%;' to set all sides could eliminate redundancy in '.feature-text p' selector but it won't work due to the
   design of the 'Get Involved' text blocks.  They need the highTop class to provide space between them and the heading so that the separator lines
   do not go all the way up to the heading. */
.paragPadSmall {
    padding-left: 5%; /* Percentage is better than fixed pixels for responsive design. */
    padding-right: 5%;
}

.paragPadMed {
    padding-left: 15%;
    padding-right: 15%;
}

.paragPadLarge {
    padding-left: 22%;
    padding-right: 0%;
}

.indentLeft {
    /* Shift content to far left but indented from the edge. */
    text-align: left;
    padding-left: 95px;
}

.indentRight {
    /* Shift content to far right but indented from the edge. */
    text-align: right;
    padding-right: 86px;
}

.sectionPadSmall {
    padding-top: 20px;
    padding-bottom: 20px;
}

.sectionPadMed {
    padding-top: 40px;
    padding-bottom: 40px;
}

.smallTop {
    margin-top: 20px;
}

.mediumTop,
.blogPost {
    margin-top: 40px;
}

.highTop {
    margin-top: 5%; /* Approximately 60px, but percentage is better for responsive design. */
}

.mediumLeft {
    margin-left: 10px;
}

.logoLeft {
    margin-left: 400px;
}


.sheetMusicBorder
{   width: auto;
    border: 3px solid black;
    padding: 20px;
    margin: auto;
}

/* === TEXT OVERLAID IN CENTER OVER BACKGROUND IMAGE === */
/* This is the way to do it for a responsive design that works on all screen sizes. */
.feature {
    position: relative;
}

.feature img,
.bkgImg {
    width: 100%;
    opacity: 0.9; /* Uniform opacity applied to the whole image is easier than sandwiching in a gradient layer between image and text. */
}

.feature img.bright {
    /* Images with bright dark colors need higher opacity to make overlaid text legible. */
    opacity: 0.5;
}

.feature-text {
    position: absolute;
    top: 0;
    bottom: 0;
    font-size: 0; /* Ensure fake div does not take up space.  We reset font-size for real paragraph. */
    width: 100%; /* In order for paragraph width 100% to take effect, parent div needs this. */
}

/* The trick to vertically centering the feature-text paragraph over the background image is to create a zero width, 100% tall fake div preceding it so they are side by side. */
.feature-text::before {
    /* Insert a fake div before the real feature-text div. */
    content: ''; /* Do not have any content in fake div to avoid taking up horizontal space. */
    display: inline-block; /* Place fake div side by side with the real feature-text div. */
    height: 100%; /* Allow fake div to expand to fill height of background image over which it is overlaid. */
    vertical-align: middle; /* Although fake div is as tall as row, make it think it is in center vertically so real div cues off that rather than be bottom aligned. */
}

.feature-text p,
.feature-text div.mail {
    font-size: 40px;
    color: rgb(255, 255, 255); /* white text */
    display: inline-block; /* Place paragraph to the right of the fake div. */
    vertical-align: middle; /* Ensure paragraph is vertically centered. */
    text-align: center;
    width: 100%; /* Don't shrinkwrap box around feature text.  Keep its natural size according to grid system. */
    padding: 5%; /* Keep overlaid text from running to the edges.  5% padding looks good on xs, sm, md, and lg screens; 15% is applied to xl screens via @media query. */
}

.feature-text p.multiline {
    font-size: 22px;
    color: rgb(0, 0, 0); /* black text */
}

.feature-text div.mail, .mailListFont {
    font-size: 25px;
    font-weight: bold;
    color: rgb(100, 27, 96); /* purple text */
    /* transform: translateY(70%); */
}

.feature-text form {
    display: inline-block;
}



/* === HEADER, NAVBAR === */
.navbar li:hover .dropdown-menu {
    /* Enable dropdown menus on hover (default is on click). Requires removal of data-toggle="dropdown" in the HTML. */
    display: block;
}

.globalNavTop {
    margin-top: 18px;
    font-size: 20px;
    text-align: right;
    padding-right: 123px;
}

.btn-store {
    font-weight: bold;
    line-height: 0.1; /* original 1.33 */
    color: rgb(255, 255, 255); /* white text */
    background-color: rgb(6, 110, 35); /* green */
    border-radius: 15px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
    padding: 15px;
    font-size: 1.2rem;
}

.btn-cancel {
    font-weight: bold;
    line-height: 0.1; /* original 1.33 */
    color: rgb(155, 155, 155); /* gray text */
    background-color: rgb(248, 249, 250); /* off white */
    border-radius: 15px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
    padding: 15px;
    font-size: 1.2rem;
}

.btn-store-mission {
    font-weight: bold;
    line-height: 0.25; /* original 1.33 */
    color: rgb(255, 255, 255); /* white */
    background-color: rgb(6, 110, 35); /* green */
    border-radius: 8px; /* No rounded corners. */
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
    padding: 22px;
}

.btn-submit {
    font-weight: bold;
    line-height: 0.1; /* original 1.33 */
    color: rgb(255, 255, 255); /* white */
    background-color: rgb(6, 110, 35); /* green */
    border-radius: 15px; /* No rounded corners. */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
    padding: 1px;
    font-size: 1.1rem;
}

.btn-store-header {
    color: rgb(255, 255, 255); /* white */
    width: 107px;
    height: 42px;
    font-size: 20px;
}

.btn-centered {
    margin-left: auto;
    margin-right: auto;
}

.btn-right {
    margin-left: auto;
    margin-right: auto;
}

.btn-left {
    margin-left: auto;
    margin-right: auto;
}

.btn-store-mail {
    width: 127px;
    height: 44px;
    font-size: 18px;
    display: inline-block; /* Ensure input field and submit button appear side by side. */
    margin-left: -10px; /* Force side by side blocks to be touching. */
}


.navbar {
    padding: 0; /* Eliminate padding between outer navbar and inner nav-item divs. */
    font-size: 18px;
    line-height: 18px;
    font-weight: bold;
    margin-bottom: 0; /* Prevent navbar from pushing down background image, creating undesirable whitespace between them. */
    border: 0; /* Remove border around navbar so background image touches it seamlessly. */
    border-radius: 0; /* Rid navbar of curved corners. */
}

.nav-item {
    height: 100%; /* Allow nav menu items to be as tall as navbar. */
    padding: 5px 0; /* Expand height of menu items top and bottom so we have a fat navbar rather than a skinny one. */
}

.dropdown-toggle::after {
    /* Need to kill off Bootstrap's code that adds caret symbol next to each nav bar option that has a dropdown menu. */
    display: none;
    width: 0;
    height: 0;
    margin-left: 0;
    vertical-align: none;
    content: '';
    border: none;
}

li.nav-item:hover {
    /* Focused - user is hovering over menu item but has not clicked to change the page. */
    background-color: rgb(178, 141, 176); /* lighter purple */
}

li.nav-item.selected {
    /* Selected - menu item page is displayed on-screen. */
    background-color: rgb(178, 141 ,176); /* brighter purple */
}

/* li.nav-item.dropdown.show .dropdown-toggle::after */
.garbage {
    /* Add upward pointing white triangle centered below selected navbar heading. */
    display: block;
    width: 0;
    height: 0;
    content: ''; /* Do not have any content in div. */
    border-left: 9px solid transparent; /* Triangle left side height. */
    border-right: 9px solid transparent; /* Triangle rignt side height. */
    border-top: none;
    border-bottom: 13px solid white; /* Triangle bottom. */
    margin: auto auto; /* Center triangle div under the navbar heading text. */
    margin-top: 4px; /* Provide some vertical space between navbar heading and triangle. */
}

a.nav-link,
a.dropdown-item {
    /* Navbar headings and dropdown menu links. */
    color: white;
    font-size: 18px;
    font-weight: bold;
}

.dropdown-menu {
    background-color: rgb(100, 27, 96); /* purple background with no transparency.  Do not want to see through to web page beneath. */
    margin-top: -1px; /* Move floating dropdown menu so its top edge touches navbar bottom edge. */
}

/* Need to rig horizontal positioning of certain dropdown menus. */
div#newsEvents.dropdown-menu.show {
    left: 57px;
}

div#contact.dropdown-menu {
    /* Have Contact dropdown menu positioned from the right edge of screen. */
    left: unset; /* Disable the 'left: 0;'' setting of .dropdown-menu class. */
    right: 0px;
}

.navbar-toggler .icon-bar {
    /* On narrow screens when hamburger icon replaces options, make the three lines white. */
    background-color: white;
}

.navOptions {
    width: 100%;
    margin: 10px;
}

.menuItem {
    margin-right: 5%;
}

/* === STORE & PHOTOS STYLES === */
#overlay, #popup {
    position: fixed; /* Sit on top of the page content */
    display: none; /* Hidden by default */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7); /* Black background with opacity */
    z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer; /* Add a pointer on hover */
}
.centeredPdf, .centeredPic {
    display: flex;
    width: 100vw;
    height: 100vh;
}



#bigPic, #iframeDiv {
    z-index: 3;
    position: relative;
    width: 800px;
    height: 600px;
    margin: auto;
}

.cornerX {
    color: white;
    z-index: 3;
    position: absolute;
    top: 2%;
    right: 15%;
}

.clickable {
    cursor: pointer;
}

#photos img {
    cursor: pointer;
}


/* .iframe-container {
    overflow: hidden;
    padding-top: 56.25%; /* 16:9*/
    /* position: relative;
  } */ 
  
  /* .iframe-container iframe {
     border: 0;
     height: 50%;
     left: 0;
     position: absolute;
     top: 0;
     width: 50%;
  } */

/*=== PHOTO MODAL & SLIDESHOW LIGHTBOX FOR PHOTOS PAGE====*/

.row > .column {
    padding: 40px;
  }
  
  .row:after {
    content: "";
    display: table;
    clear: both;
  }
  
  /* Create four equal columns that floats next to eachother */
  .column {
    float: left;
    width: 25%;
  }
  
  /* The Modal (background) */
  .modal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: black;
  }
  
  /* Modal Content */
  .modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    width: 100%;
    max-width: 600px;
  }
  
  /* The Close Button */
  .close {
    color: white;
    position: absolute;
    top: 10px;
    right: 25px;
    font-size: 35px;
    font-weight: bold;
  }
  
  .close:hover,
  .close:focus {
    color: white;
    text-decoration: none;
    cursor: pointer;
  }
  
  /* Hide the slides by default */
  .mySlides {
    display: none;
  }
  
  /* Next & previous buttons */
  a.prev,
  a.next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -50px;
    color: #fefefe !important; /* !importantn is needed to override boostrap */
    font-weight: bold;
    font-size: 36px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    -webkit-user-select: none;
  }
  
  /* Position the "next button" to the right */
  a.next {
    right: 0;
    border-radius: 3px 0 0 3px;
  }
  
  /* On hover, add a black background color with a little bit see-through */
  a.prev:hover,
  a.next:hover {
    background-color: rgba(0, 0, 0, 0.5);
  }
  
  /* Number text (1/3 etc) */
  .numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
  }
  
  /* Caption text */
  .caption-container {
    text-align: center;
    background-color: black;
    padding: 2px 16px;
    color: white;
  }
  
  img.demo {
    opacity: 10;
  }
  
  .active,
  .demo:hover {
    opacity: 10;
  }
  
  img.hover-shadow {
    transition: 0.3s;
    cursor: pointer;
  }
  
  .hover-shadow:hover {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }

/* === HOME PAGE AUTOMATIC HORIZONTAL SCROLL OF PHOTOS === */


  * {box-sizing: border-box;}
  body {font-family: Verdana, sans-serif;}
  .mySlides {display: none;}
  img {vertical-align: middle;}
  
  /* Slideshow container */
  .slideshow-container {
    max-width: 2000px;
    position: relative;
    margin: auto;
  }
  
  
  
  /* The dots/bullets/indicators */
  .dot {
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
  }
  
  .active {
    background-color: #717171;
  }
  
  /* Fading animation */
  .fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 3.5s;
    animation-name: fade;
    animation-duration: 3.5s;
  }
  
  @-webkit-keyframes fade {
    from {opacity: .4} 
    to {opacity: .2}
  }
  
  @keyframes fade {
    from {opacity: .4} 
    to {opacity: 1}
  }
  
  /* On smaller screens, decrease text size */
  @media only screen and (max-width: 300px) {
    .text {font-size: 11px}
  }


/* === STORE BUTTONS === */

/* Categories Buttons */
.storeCategory {
    background-color: rgb(100, 27, 96); /* purple color */
    border: solid 2px rgb(100, 27, 96);
    border-radius: 10px;
    color: #FFF;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin-right: 20px;
  }
  
  .storeCategory:hover {          /* Styling indicating user is hovering over 'Q&A Button' floater. */
      color: white;
      border: solid 2px rgb(6, 110, 35);
      background-color: rgb(6, 110, 35);      /* green background with no transparency.  Do not want to see through to web page beneath. */
  }



/* === BACK TO TOP FLOATER === */
/* Back to Top floater.  This is change 1 of 3.  There are accompanying HTML and JS changes. */
#backToTop {
    width: 50px; /* Create 50px by 50px square container. */
    height: 50px;
    border-radius: 50%; /* Convert square to circular container. */
    position: fixed; /* Lock floating circle to bottom right corner of viewport, 10px from right and bottom. */
    right: 10px;
    bottom: 10px;
    cursor: pointer; /* When cursor is over the circle, change it to a pointer to indicate item is clickable. */
    background-color: rgb(100, 27, 96); /* purple background with no transparency.  Do not want to see through to web page beneath. */
    display: none; /* Initially hide the circular 'back to top' floater when user is at top of web page. */
    z-index: 50; /* Keep 'back to top' floater on top so its color does not fade over images. */
}

#backToTop span {
    /* Styling of span tag embedded within anchor tag that produces the white triangle inside the circular floater. */
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -12px;
    height: 0;
    width: 0;
    border: 8px solid transparent;
    border-bottom-color: rgb(255, 255, 255); /* White. */
}

#backToTop:hover {
    /* Styling indicating user is hovering over 'back to top' floater. */
    background-color: rgb(6, 110, 35, 1); /* green background with no transparency.  Do not want to see through to web page beneath. */
}

/* === CAROUSEL SUBSTITUTE === */
/* No special styling. */

/* === UPCOMING EVENT === */
/* No special styling. */



/* === EXCESS SECTION === */
/* We need to equally split the 10px spacer between the two images.  If we only applied the full 10px to one image, it would rise up to maintain aspect ratio and be shorter than adjacent image. */
.imgSpacerLeft {
    padding-left: 5px;
}

.imgSpacerRight {
    padding-right: 5px;
}


.tableStore
{
    padding-left: 10px;
}

.tableRowStore {

    border-bottom: 1px solid rgb(100, 27, 96);
}





/* === FOOTER === */
.purpleBullet {
    width: 8px;
    height: 8px;
    background-color: rgb(100, 27, 96); /* purple */
    border-radius: 4px;
    display: inline-block;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 2px; /* Give appearance of vertically centered bullet aligned with text on either side. */
}

/* === MEDIA QUERIES FOR SUPPORTING DIFFERENT SCREEN SIZES === */
/* Bootstrap 4.1.3 added a new breakpoint as sm, resulting in five tiers.  The breakpoints are currently:
   1. xs: 0px
   2. sm: 576px
   3. md: 768px
   4. lg: 992px
   5. xl: 1200px and wider

   This can be found by searching the non-minified bootstrap.css file for '@media'.
*/

@media (max-width: 450px) {
    /* Special breakpoint within extra small screens. */
    .feature-text p,
    .centeredTitleOverImage,
    .centeredHeaderTitleOverImage,
    .feature-text div.mail,
    
    
    h3left {
        
        margin-top: 200px;
        /*     margin-bottom: 0px; */
    }

    
    h2 {
        margin-top: 0px;
        font-size: 22px;
    } /* Reduce font size of previously large overlaid text so it does not overflow background image on tiny screens. */
    
    h3 {
        font-size: 14px;
        font-weight: normal;
    } 
    span.followUs {
        display: none;
    } /* Hide 'Follow Us' text on small screens. */
    .resetPositionOnSmallScreens {
        position: unset;
    }
   
    .calendar {
        width: 300px;
    }
}
@media (max-width: 767px) {
    /* Extra small and small screens (less than medium size). */
    .imgSpacerLeft {
        padding-left: 0px;
    } /* Remove space between images when images are stacked vertically. */
    .imgSpacerRight {
        padding-right: 0px;
    } /* Remove space between images when images are stacked vertically. */
    .separatorRight {
        border-right: none;
    } /* Don't display right border when content is stacked vertically. */
    table, thead, tbody, th, td, tr hr {
        display: block;
      } 


      h2 {
        margin-top: 0px;
        font-size: 22px;
    } /* Reduce font size of previously large overlaid text so it does not overflow background image on tiny screens. */
      h3 {
        font-size: 14px;
        font-weight: normal;
    } 

    
}

@media (min-width: 768px) {
    /* Medium screens and larger. */
    .emailField {
        width: 595px !important;
    } /* Override .form-inline and .form-control 'width: auto' to force desired email field size. */
}

@media (min-width: 1200px) {
    /* Extra large screens and larger. */
    .feature-text p {
        padding: 15%;
    } /* Provide more cushion between centered text and edges of screen. */
    .feature-text p.header {
        padding: 0;
    } /* cancel padding for overlaid title in header */
    #storeFunds .feature-text p {
        padding: 11%;
    } /* Provide more cushion between centered text and edges of screen. */
}
@media (max-width: 1340px) {
    /* Extra large screens and larger. */
    #materialAssistance img,
    #storeFunds img,
    #volunteer img,
    #leadership img {
        display: none;
    } /* Hide image on text over images sections when screen breaks at 1340. */
    #materialAssistance .feature-text,
    #storeFunds .feature-text,
    #volunteer .feature-text,
    #leadership .feature-text {
        position: relative;
    }
    #volunteer,
    #storeFunds,
    #materialAssistance {
        background-color: azure;
    }
}