:root {
                --clr-accent-100: hsl(13, 100%, 96%);
                --clr-accent-300: hsl(12, 88%, 75%);    
                --clr-accent-400: hsl(12, 88%, 59%);
                --clr-accent-500: hsl(12, 60%, 45%);

                --ff-primary: arial, Georgia, 'Times New Roman', Times, serif;
                --ff-secondary: sans-serif;
                --ff-body: var(--ff-primary);
                --fs-body: var(--fs-400);
                --fs-400: .875rem;
            }

            body {
                margin-inline: auto;
                margin-top: 10px;
                margin-bottom: 10px;    
                font-size: var(--fs-body);
                font-family: var(--ff-body);
                color: var(--clr-primary-400);
                background-color: var(--clr-accent-500);            
            }
        
             .wrapper {

                border: 5px solid black;
                width: 90%;
                height: auto;
                margin: 0 auto; 
                padding: 0px;
                background-color: #ffffcc;;               
            } 

            .headerTop {
                flex-grow: 1;
                width: 100%;
                height: 30px;
                background-color:  #8B0000;
                text-align: center;
                font-weight: bold;
                font-family: var(--ff-secondary);
                color: white;
                padding-top: 6px;
            }

            .masthead {
                display: flex;
                flex-wrap: wrap;
                flex-direction: row;
                background-color: #ffffcc;
                /* background-image: url("../images/hendersonville.jpg"); */

                border: 0px solid black;
                width: 100%;
                height: 156px;
                margin: auto auto;                    
            }

            .mastheadItem {
                flex-grow: 1;
              
                border: 0px solid black;
                font-weight: 700;
                text-align: center;
                margin: 0px;
                padding: 3px;
                width: 150px;
                height: 150px;
            }              

            .mastheadLogo {
                max-width: 100%;
                height: auto;

            }

            .mastheadTitle{
                height: auto;
                text-align: center;
                font-size: 18pt;
                font-weight: bold;
                padding-top: 16px;
                color: black;
                font-family: var(--ff-primary);
                text-shadow: 0px 0px 3px #ffffff, 0px 0px 3px #ffffff, 2px 2px 3px #ffffff;                     
            }

            .mastheadTag {
                flex-grow: 1;
                border: solid 0px black;
                width: 300px;
                text-align: left;
            }

/*             .container1 {
                display: flex;
                flex-wrap: wrap;
                flex-direction: row;

                /* justify-content: space-evenly; */
                /* align-items: center; */
                /* align-content: center; */
/*
                border: 0px solid black;
                width: 100%;
                height: 700px;
                margin: auto auto;
            }  
*/
            
            .footerBottom {
                flex-grow: 1;
                width: 100%;
                height: 30px;
                background-color:  #8B0000;
                text-align: center;
                font-weight: bold;
                color: white;
                font-family: var(--ff-primary);
                text-size: 12pt;
                padding: 0;
                margin: 0;
            }            
            
            .mainContentZone {
                flex-grow: 1;
                background-color: white;
                border: 1px solid black;
                font-weight: 700;
                text-align: center;
                margin: 10px;
                padding: 1em;
                height: auto;
            }


            .formContainer {
                flex-grow: 1;
                width: 50%;
                border: 1px solid black;
                margin: 20px auto;
                background-color: #ffffcc;
                box-shadow: 5px 5px 5px #000000;
            }

            .frmContact {
                border: 0px solid black;
                width: 50%;
                text-align: left;
                margin: 20px auto;
            }



.aboutContentZone {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row; 
    justify-content: center;
    row-gap: 15px;
    column-gap: 30px;
}

.cardWrapper {
    min-width: 300px;
    max-width: 300px;
    margin: 20px 5px;
    border: 1px solid black;
    /* top-left | top-right | bottom-right | bottom-left */
    border-radius: 0px 20px 0px 20px;
    width: 40%;
}

.cardTitle {
    /* top-left | top-right | bottom-right | bottom-left */
    border-radius: 0px 20px 0px 0px;
    height: 30px;
    padding-top: 4px;
    padding-left: 5px;
    background-color: #04AA6D;
    font-size: 14pt;
    text-align: left;
    color: black;
}

/* Add some padding inside the card container */
.cardContent {
    text-align: left;
    padding: 2px 16px;
}   

.cardWrapperSquare {
    min-width: 300px;
    max-width: 300px;
    margin: 20px 5px;
    border: 1px solid black;
    width: 40%;
}

.cardTitleSquare {
    height: 30px;
    padding-top: 4px;
    padding-left: 5px;
    background-color: #04AA6D;
    font-size: 14pt;
    text-align: left;
    color: black;
}

ul.cardList li {
    margin-bottom: 1em;
}


.eventsContentZone {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column; 
    justify-content: center;
    align-items: center;
    row-gap: 15px;
    column-gap: 30px;
}

.cardWrapperEvents {
    min-width: 500px;
    max-width: 500px;
    margin: 20px 5px;
    border: 1px solid black;
    /* top-left | top-right | bottom-right | bottom-left */
    border-radius: 0px 20px 0px 20px;
    width: 40%;

    background: #f0f5f7;
    background: linear-gradient(140deg, rgba(240, 245, 247, 1) 74%, rgba(87, 199, 133, 1) 100%, rgba(242, 242, 237, 1) 91%);    
}

.joinContentZone {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column; 
    justify-content: center;
    align-items: center;
    row-gap: 15px;
    column-gap: 30px;
}

.cardWrapperJoin {
    min-width: 500px;
    max-width: 500px;
    margin: 20px 5px;
    border: 1px solid black;
    background-color: #ffffcc;;
    width: 40%;
}

.cardTitleJoin {
    /* top-left | top-right | bottom-right | bottom-left */
    height: 30px;
    padding-top: 4px;
    padding-left: 5px;
    background-color: #04AA6D;
    font-size: 14pt;
    text-align: left;
    color: black;
    font-size: 3.5vw;
    font-size: clamp(16px, 3.5vw, 22px);
}

.slideShowImg {
    border: 2px #000000 solid;
    box-shadow: 3px 3px 3px black;
}

.titleSecondary {
    width: 90%; 
    height: 25px;
    text-align: center; 
    color: white;
    border: 1px solid black;
   
    font-size: 16pt;
    background-color: #8B0000;
    margin: 20px auto;
}

.bodPic {
    width: 200px;
    height: 210px;
    overflow: hidden;
    border: 0px solid black;
}

.bodContainer {
    width: 200px;
    text-align: center;
    background-color: lightgrey;
    border: 1px solid black;
    padding: 7px;
}

.galleryTitle {
    text-align: center;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    margin-top: 10px;
    width: 500px;
    height: 30px;
    border: 1px solid black;
    background-color: #8B0000;
    color: white; 
    font-size: 16pt;
}

/* 500 by 375 */
.galleryLargeImage {
    text-align: center;
    align-items: center;
    justify-content: center;
    margin: auto auto;
    margin-top: 0px;
    margin-bottom: 0px;
    width: 500px;
    height: 375px;
    border: 1px solid black;
}

.gallerySmallImageWrapper {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    gap: 3px;
    width: 502px;
    height: 110px;
    margin: 0px auto;
    padding: 5px;
    border: 0px solid black;
    overflow-x: auto;
    overflow-y: hidden;
    text-align: center;
    align-items: center;
    justify-content: center;
}

.gallerySmallImage {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    margin: 5px;
  margin-left: auto;
  margin-right: auto;    
    text-align: center;
    align-items: center;
    justify-content: center;    
}

.galleryImg {
    width: 500px;
    height: 375px;

    text-align: center;
    align-items: center;
    justify-content: center;
    margin: auto auto;
    margin-top: 0px;
    margin-bottom: 0px;
    border: 1px solid black;    
}

.indexContentZone {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column; 
    justify-content: center;
    align-items: center;
    row-gap: 15px;
    column-gap: 30px;
}

.indexWrapperEvents {
    min-width: 500px;
    max-width: 500px;
    margin: 20px 5px;
    border: 1px solid black;
    width: 40%;

    background: #f0f5f7;
    background: linear-gradient(140deg, rgba(240, 245, 247, 1) 74%, rgba(87, 199, 133, 1) 100%, rgba(242, 242, 237, 1) 91%);    
}

/* Add some padding inside the card container */
.indexCardContent {
    text-align: left;
    padding: 2px 16px;
} 

.indexCardTitle {
    height: 30px;
    padding-top: 4px;
    padding-left: 5px;
    background-color: #04AA6D;
    font-size: 14pt;
    text-align: left;
    color: black;
}

.infoBox {
    border: 1px solid black;
    padding: 10px;
    margin: 10px auto;
    max-width: 550px;
    width: 550px;
}

.thankyou {
	margin: 20px auto; 
    text-align: center;
    width: 450px; 
    border: 5px solid black; 
    box-shadow: 5px 5px 5px #000000;
    background-color: #ffffcc; 
    padding: 0px 10px;
}