/*Code by Heyward Photography, DBA Heyward Web Development, Columbia, SC
All Rights Reserved
heyward@heywardphotography.com
PO Box 2695
Columbia, SC 29201
*/
/* variables for theme and menu colors */
:root {
   
    --flag-blue: #004489;
    --flag-blue-darkest: #00264d;
    --flag-blue-dark: #00356c;
    --flag-blue-light: #0054ab;
    --flag-blue-lightest: #0177f1;

    --flag-yellow: #ffd300;
    --flag-yellow-darkest: #786300;
    --flag-yellow-dark: #c6a400;
    --flag-yellow-light: #ffdd39;
    --flag-yellow-lightest: #fff464;

    --flag-red: #dc002e;
    --flag-red-darkest: #89001d;
    --flag-red-dark: #af0026;
    --flag-red-light: #ec2d56;
    --flag-red-lightest: #f05778;

    --off-black: #010101;   /*Use for lettering*/

     --off-white: #f1f3f3; /*a very light shade of cyan*/

     --lt-gray-blue: #9da3b3;   /*Use for lettering and logos.*/

     --lt-gray-background: #f3f4f6;  /*use as a form background to set off from the section off-white background.*/

     --mid-gray: #494c4f;  /*nav menu lettering. #494c4f web gray, #484848, #555555, #36454f, #404040 light. If too light, could use darker #424242 but still light; Note: $666666 light.*/

     --off-black-background: #111828;   /*use for footer background*/




    --dark-menu: black;
    --light-menu: white;

    /*
    --primary-blue: #6fa8dc;
    --primary-blue-darkest: #2d71ad;
    --primary-blue-dark: #4c8dc7;
    --primary-blue-light: #9ac6ed;
    --primary-blue-lightest: #cee5fa;

    --secondary-purple: #b4a7d6;
    --secondary-purple-darkest: #645099;
    --secondary-purple-dark: #8a79b8;
    --secondary-purple-light: #d9d2ed;
    --secondary-purple-lightest: #f5f3fb;

    --accent-green: #b6d7a8;
    --accent-green-darkest: #63994b;
    --accent-green-dark: #8ab877;
    --accent-green-light: #d6e8ce;
    --accent-green-lightest: #f0f5ed;

    --accent-red: #e06666;
    --accent-red-darkest: #981c1c;
    --accent-red-dark: #bb3c3c;
    --accent-red-light: #ff9b9b;
    --accent-red-lightest: #ffc3c3;
*/
}
@font-face {
    font-family: "Montserrat";
    src: url("../fonts/Montserrat-Bold.ttf") format("truetype");
  }
  
  @font-face {
    font-family: "Roboto";
    src: url("../fonts/Roboto-Regular.ttf") format("truetype");
  }    /*Place @font-face rule before any styles.*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
/*   font-size: 100%; */  /*I've seen on body element, Murach p. 127 p. 151 p.181.  See calc version below.*/
/*line-height: 1.5; */ /*This can vary or be changed elsewhere or maybe place in the body element*/
}
h1, h2, h3 {
    font-family: "Montserrat", Arial, Helvetica, sans-serif;          /*fallback serif serif fonts that are web-safe fonts.*/
}
h1 {
font-size: 2rem;   /* 2rem is 32px*/
}

h2 {
font-size: 1.5rem;   /*24px*/
/* font-style: italic;*/
}
h3 {
    font-size: 1.25rem;   /*was 20 px, so doesn't grow like you'd expect.  Changed to 16px = 1rem, so 1.25rem*/
    }
/*Generic class to make images responsive.*/
.image-response {   /*I could put on all img elements, but it might mess up a carosel, etc., later. IT MAKES THE IMAGE RESPONSIVE-USE ON ALL IMAGES.*/
    max-width: 100%;
    height: auto;
}
/* BACKGROUND COLORS for Homepage*/
/*header {
    background-color: var(--off-white);*/

 /*   background-color: var(--primary-blue);
    background-image: linear-gradient(to bottom, #cfe2f3 0%, var(--primary-blue) 100%); */
 /*   }*/
 /*   nav {
    background-color: var(--accent-red);
    background-image: linear-gradient(to bottom, #f4cccc 0%, var(--accent-red) 100%);
    } */
 /*   #home-welcome, #home-slideshow {
    background-color: var(--off-white);*/    /* was white; */
    /* background-color: #6fa8dc;  */       /*This is good as you can easily read black text on it.*/
/*    }*/
   /* #home-connecting {
    background-color: var(--secondary-purple);*/
    /*
    background-color: #e06666;  */  /*I think this isn't good to use.*/
  /*  }*/
/*    footer {
    background-color: var(--accent-green);
    background-image: linear-gradient(to bottom, #d9ead3 0%, #b6d7a8 100%);
    }*/

body {              /*To limit growth, I could add a media query for screen sizes larger than 2000px to set max-width: 2000px; 
    However, the webpage will no longer be centered for screen sizes larger than 2000px.*/
/*max-width: 960px;*/  /*Remove max-width: 960px; and the grid will fill the screen end to end, no bound in growing.*/
/*font-family: Georgia, serif;*/
font-family: "Roboto", Verdana, Geneva, Tahoma, sans-serif;
font-size: calc(100% + 0.2vw);   /*The fonts grow with viewport, but some fonts don't grow, maybe need in * above. Instead of +1vw, use + 0.2vw less dramatic!!!*/
line-height: 1.5;  /*1.5 recommended for accessibility, Murach p. 195.  It was 1.4*/
/* width: calc(100% - 2.5rem); */   /*2.5rem = 40px.  Will have 1.25rem space on each side of webpage no matter screensize. 40px or 2.5rem works the same.*/
margin: auto;  /*THIS CENTERS THE WEBPAGE! Always place on body. NOTE margin: 1rem auto; adds 1rem to top & bottom*/
}
/*Grid for the entire page.  This could be on the body selector, but I chose to do as a container.*/
.container {    /*for various pages, create other container with page specific grid template areas.  could name .content-another-page to use one CSS file.*/
display: grid;
grid-template-columns: repeat(12, 1fr);
/*grid-template-rows: 5rem 1fr 1fr 3.75rem;*/   /*This works better as not defining it allows it to shrink and grow to fit the content with various screensizes.*/
/*gap: 1rem;*/
/*
grid-template-areas:
"header header header"
"article article sidebar"
"footer footer footer";
*/
/* height: auto; */   /*OLD INFO.  The margin: auto; on the body solved this. height: 90vh; stretches sections--no*  Don't need this as I think the default is auto.  
width: 100vw;  /*I added this!  without this line of code or width: 100%; or 100vmin;--website aligns on left; not centered.  
        If use 100vw or 100vmax it centers.  HOWEVER, this overides the body max-width of 960px.  It will
        grow without bound.  The entire website width will grow without bound, the width fits the viewport.*/
/*   align-items: stretch;       does nothing */
}
/*A mix of page layout (.container) and nested grids for main and footer along with Homepage code.*/
/*Note:  header and .site-header (the header's CSS class selector) are the same.*/
header {
/*grid-area: header;*/
grid-row: 1/span 1;
grid-column: 1/span 12;
line-height: 1.2;   /*override body line-height of 1.5.*/
/*padding: 1rem; */ /*16px*/
background-color: var(--off-white);
/*sticky header*/
/*position: sticky;
top: 0;*/
/*overflow: hidden;        Not needed here.*/
}

/*Header Styles*/
/* hands logo in header*/
img#hhlogo {
  width: clamp(65px, 20%, 90px);      /*min, default, max.  50px, 20%, 75px*/
}
.headerAlign {
  display: grid;
  grid-template-columns: 65px 1fr;    /*first column set to max width of logo, the rest of the room is for the text.*/
  align-items: center;               /*centers vertically*/
  gap: 1rem;
}

/*Adjust title next to logo in header*/
h1#logoTitle {
        font-size: 1.3rem;   /*was 1.5rem.*/
        color: var(--off-black);
    }
    /* Helping Hands Romania in header get larger for laptops 1024.  Transition at 930.*/
@media (min-width: 930px) {
    h1#logoTitle {
        font-size: 1.8rem;
    }
  }

/*Styles for the nav menu and hamburger menu, which is in header.*/

/*Navigation.  Nav in header as nav bar, hamburger menu for mobile, drops below header and covers page.*/
/*Note:  header and .site-header (the header's CSS class selector) are the same.*/
.site-header {
    display: flex;
    justify-content: space-between;  /*space-between*/
    align-items: center;
    position: relative; /* Needed for absolute positioning of children */
    padding: 15px;
 /*   background-color: var(--off-white); */   /*header background color.  It was #f0f0f0;*/

    position: -webkit-sticky;   /*Safari*/
    position: sticky;
    top: 0;                     /*Must have to see at top.*/
    z-index: 8;  /*keeps the mobile menu and nav bar above the service cards when they're zoomed.*/
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.hamburger-button {
    display: block; /* Show on mobile */
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}

.bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    background-color: #333; /*#333*/
}

.nav-menu {
    display: none; /* Hide the menu by default */
    position: absolute;
    top: 100%; /* Position it directly below the header */
    left: 0;
    width: 100%;
    background-color: var(--off-white);   /*#FFF*/
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    z-index: 10; /* Ensure it's above other content */

    & a {
        text-decoration: none;
        color: var(--mid-gray);
    }
    & a:hover, a:focus {
       /* text-decoration: underline;*/
        color: var(--flag-blue-lightest);
        background-color: var(--flag-yellow-lightest);      /*#ddd;*/
    }
}

.nav-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: var(--off-white);    /*nav bar and drop down menu color*/
}

.nav-menu li {
    padding: 15px;     /*was 15px*/
    text-align: center;
 /* border-bottom: 1px solid var(--off-white); */       /*Use if want border line below each link in hamburger drop-down menu. Change color so can see the lines.*/
    font-size: 1rem;  /*0.8rem Works for tablet.  For sizes larger than tablet could go back to 1.5rem. like 1024 laptop and larger. Transition at 930 perhaps. Perhaps below tablet.*/
}

.closeIcon{
    display: none;  /*NEW Close button is not displayed by default.*/
    font-size: 1.75rem;
}

/* Style for the active menu */
.site-header .nav-menu.active {
    display: block;
}

/*New next two selectors with .active.  Note: span.bar.active or.bar.active and bar.active only closes the first bar.
try wrap div around 3 span elements.  It doesn't display on the first bar because the document.querySelector() method in JS only selects the first element
within the document that matches a specified CSS selector or group of selectors.
Must use querySelectorAll, which is an array, so must add the active class by looping through the array of three elements.*/
.bar.active {
    display: none;
}

.closeIcon.active {
    display: block;
    background-color: var(--off-white);   /*The X was dark.  This changes the background color.  Change to final background color. Interim light gray #eee, short for #eeeeee*/
}

/* Hide the hamburger button on large screens */
@media (min-width: 768px) {
    .hamburger-button {
        display: none;
    }
    .nav-menu {
        display: block; /* Show the menu inline on desktop */
        position: static;
        width: auto;
        background: none;
        box-shadow: none;
    }
    .nav-menu ul {
        display: flex;
    }
    .nav-menu li {
        border-bottom: none;
        padding: 0 10px;    /*was 0  15px*/
    }
}
/*End of nav menu styles*/

/*End of header styles*/


/*This allows us to wrap the main content in a main HTML tag with width of viewport. No nested grid used. DOES NOT WORK CORRECTLY*/
            /*This doesn't work as the main tag now occupies the first grid column of the 12-column grid defined by the container element.
            The width: 100 vw; appears to solve it but doesn't as the extra 11 columns throw off the layout at varies screen sizes.*/
/* 
main {                 
    display: grid;
   width: 100vw;  
}*/

main {
    grid-row: 2/span 1;         /*This sets the main element's position in the .container grid.*/
    grid-column: 1/span 12;

    display: grid;              /*This is a nested grid for the main element's children.*/
    grid-template-columns: repeat(12, 1fr);
}

/*Mains's five section classes.  Reference the Main's nested grid.*/

/*#home-welcome {
    grid-row: 1/span 1;
    grid-column: 1/span 12;
    padding: 1rem;
}*/
/*
h1#home-welcome {
   text-align: left;
   font-size: 7rem;
}
*/

/*#home-slideshow {
    grid-row: 2/span 1;
    grid-column: 1/span 12;
    padding: 1rem;
}*/

#home-hero {
    grid-row: 1/span 1;         /*Refers to Main's nested grid.*/
    grid-column: 1/span 12;
  /*  padding: 1rem; */ /*Don't apply here as it insets the image overlay. Apply padding to h1 and button to view image. Don't overflow section.  */

    background-image: url("../images/mountains-3.jpg");  /*To get out of styles folder use ../  */
    background-repeat: no-repeat;
    background-size: cover;       /*(was 100% auto; is Full width, proportional height.)  Cover works great for mobile views. Change to 100% auto for larger views so can crop image--made no difference.*/
                                /*150% zooms in on the background photo not overrunning the sides.  80% shrinks background photo smaller than container.*/
    background-position: center;

    height: 600px;   /*controls the neight of the section with the photo.  the overlay must match it!*/

 /*   box-shadow: "0px 4px 4px 0px #000040, inset 0 0 0 1000px rgba(0,0,0,0.5)"; */

 & #home-hero-overlay {
/*content: ''; */
/*position: absolute;*/
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
/* background-size: cover;*/
/* background-image: linear-gradient(to bottom right, #002f4b, #dc4225);*/
background-color: rgba(32, 32, 32, 0.4);  /*was 0.75*/
 opacity: 1;  /*1*/
 background-size: 100%, auto;
 z-index: 2;
 padding: 0;

 height: 600px;  /*must match photo's area to cover the photo.*/
}

/*background-position-x: 15%; 
    background-position-y: -10%;*/
    & h1 {
        color: var(--off-white);
        text-align: center;
        text-shadow: 2.5px 2.5px 0 rgba(0, 0, 0, 0.2);
        font-size: 2.4em;
        z-index: 3;

        padding: 0.3rem;  /*Take care not to overflow container for various screen sizes. This was 1rem, changed to 0.3rem*/
        width: clamp(100px, 95%, 900px);
       /* width: clamp(100px, 90%, 800px); */ /*This looks good for Tablet and above.*/  
           /*min, default, max.  When add width clamp, the item left aligns. Need wrapper div to center.*/
        margin: 0 auto;    /*Centers a block-level element. No style nneded for the parent element to center horizontally.  This was needed when the size clamp was added.*/
    }
/*& mark {
        background-color: var(--accent-red);
        color: var(--off-white);
    }*/
    & p {
        color: var(--off-white);
        text-align: center;
        text-shadow: 2.5px 2.5px 0 rgba(0, 0, 0, 0.2);
        font-size: 1em;
        z-index: 3;

        padding: 0.3rem; 
        width: clamp(100px, 95%, 800px);
       /* width: clamp(100px, 80%, 700px); */  /*This looks good for Tablet and above.*/   
        /*min, default, max.  When add width clamp, the item left aligns. Need wrapper div to center. 100px, 80%, 700px*/
        margin: 0 auto;    /*Centers a block-level element. No style nneded for the parent element to center horizontally.  This was needed when the size clamp was added.*/
    }
}


/*Make a Donation button and Learn More button in home-hero section.*/
/* Use button tag rather than input tag with type="submit" because not submitting form data but linking to URL. */
/*Donation button*/
#button-donation {
    background-color: var(--flag-yellow);
    color: var(--mid-gray);
    font-size: 1rem;
    font-weight: bold;
    border: 3px solid var(--flag-yellow-dark);
    width: 10em;        /*was 15em*/
    height: 3.5em;        /*was 4em*/
    border-radius: 4px;    /*12px*/
/*    box-shadow: 2px 2px;  */
    display: inline-block;
    cursor: pointer;
    font-style: normal;
    transition: background-color 0.5s ease;  /*Added this line to transition background color. Works well.*/
}
#button-donation:hover {
    background-color: var(--flag-yellow-dark);
/*    color:#800000; */
}
/* Used with div tag to center the Sunday Worship Schedule button */
#donation-button {
    text-align: center;
    padding: 1rem;  /*Take care not to overflow container for various screen sizes.*/
}  /*end of home-hero section's Donation button*/

/*Learn More button*/
#button-learn {
    background-color: var(--flag-blue);
    color: var(--off-white);
    font-size: 1rem;
    font-weight: bold;
    border: 3px solid var(--flag-blue-dark);
    width: 10em;        /*was 15em*/
    height: 3.5em;        /*was 4em*/
    border-radius: 4px;    /*12px*/
/*    box-shadow: 2px 2px;  */
    display: inline-block;
    cursor: pointer;
    font-style: normal;
    transition: background-color 0.5s ease;  /*Added this line to transition background color. Works well.*/
}
#button-learn:hover {
    background-color: var(--flag-blue-dark);
/*    color:#800000; */
}
/* Used with div tag to center the Sunday Worship Schedule button */
#learn-button {
    text-align: center;
    padding: 1rem;  /*Take care not to overflow container for various screen sizes.*/
}  /*end of home-hero section's Learn More button*/



/*Hero section with Donation button and Learn More button with mountains and outstreached hands background readable on various screen sizes.*/
@media only screen and (min-width: 360px) {
    #home-hero {
        h1 {
            padding: 2.75rem 0 0 0;
        }
    }
 /*   #signupbutton {
        padding: 2rem 0 4rem 0;
    }*/
}
@media only screen and (min-width: 460px) {
    #home-hero {
        h1 {
            padding: 3.5rem 0 0 0;
        }
    }
 /*   #signupbutton {
        padding: 2rem 0 6rem 0;
    }*/
}
@media only screen and (min-width: 533px) {
    #home-hero {
        h1 {
            padding: 4.5rem 0 0 0;
        }
    }
  /*  #signupbutton {
        padding: 2rem 0 9rem 0;
    }*/
}
@media only screen and (min-width: 640px) {
    #home-hero {
        h1 {
            padding: 5.25rem 0 0 0;
        }
    }
  /*  #signupbutton {
        padding: 2rem 0 11rem 0;
    }*/
}
@media only screen and (min-width: 700px) {
    #home-hero {
        h1 {
            padding: 6rem 0 2rem 0;
        }
   /*     height: 750px;     */          /*increased amount of background picture displayed for tablet*/
   /*     & #home-worship-overlay {  */
   /*         height: 750px; */         /*had to incease overlay to match photo to cover it.*/
   /*     }   */
    }
 /*   #signupbutton {
        padding: 2rem 0 13rem 0;
    }*/
    #button-container {
        display: flex;          /*Changes donation and learn more buttons from vertical to horizontal. flex-direction is row by default.*/
        justify-content: center;   /*centers both buttons*/
}
}
@media only screen and (min-width: 860px) {
    #home-hero {
        h1 {
            padding: 9.5rem 0 0 0;
        }
    }
  /*  #signupbutton {
        padding: 2rem 0 16.5rem 0;
    }*/
}
@media only screen and (min-width: 932px) {
    #home-hero {
        h1 {
            padding: 10rem 0 2rem 0;
        }
         height: 700px;               /*increased amount of background picture displayed for tablet*/
        & #home-hero-overlay {
            height: 700px;          /*had to incease overlay to match photo to cover it.*/
        }
    }
  /*  #signupbutton {
        padding: 2rem 0 20rem 0;
    }*/
}
@media only screen and (min-width: 1160px) {
    #home-hero {
        h1 {
            padding: 13rem 0 0 0;
        }
    }
 /*   #signupbutton {
        padding: 2rem 0 25rem 0;
    }*/
}
/*
@media only screen and (min-width: 1290px) {
    #home-worship {
        h1 {
            padding: 15rem 0 2rem 0;
        }
    }
    #signupbutton {
        padding: 2rem 0 30rem 0;
    }
}*/
/*
@media only screen and (min-width: 1644px) {
    #home-worship {
        h1 {
            padding: 15rem 0 2rem 0;
        }
    }
    #signupbutton {
        padding: 2rem 0 48rem 0;
    }
}*/
/*End of Hero section with mountains and outstreached hands background media queries.*/

/*Style for horizontal line at the beginning of each section in the Main element except the Hero section.*/
hr.horizontal-line {
    /*Resets user agent stylesheet in Edge and Chrome.  This gets rid of a blemish on the left side.  It removes some browser styles*/
    margin-block-start: 0;
    margin-block-end: 0;
    border-style: none;
    /*height: 3px;*/
    border-top: 4px solid var(--flag-yellow);
  /*padding: 1rem 0; */   /*Don't use padding on the line as it will expand its width.  Use it on elements above and below the line.*/
  /*background-color: var(--flag-yellow);
    border: none;*/
    width: 5.5em;
    margin-left: auto;      /*centers*/
    margin-right: auto;
    border-radius: 5px;  /*rounds edges*/

}
/*End of horizontal line styles for each section*/

/*Styles for About Helping Hands Romania, our mission, id=home-about.*/
#home-about {
    grid-row: 2/span 1;     /*Refers to Main's nested grid.*/
    grid-column: 1/span 12;
    padding: 2rem;
    & h2 {
        text-align: center;
        padding-top: 1rem;
        padding-bottom: 0.75rem;
        color: var(--flag-blue);
    }
    & #about-hhlogo {
        padding: 3rem 0;  /*was 3em*/
    }
    & h3 {
        color: var(--flag-red);
        padding-bottom: 1.5rem;
    }
    & p {
        padding-bottom: 1.5rem;
    }
    & p#last-para-about {
        padding-bottom: 2rem;
    }
  /*  & P#home-about-logo-text {
        display: none;
    }*/
    & #reaching-hands {
        display: none;  /*hides the reaching hands image below the logo.*/
    }
    & #reaching-hands-2 {
        padding-bottom: 2rem;
    }
     & #reaching-hands-sq {
        display: none;  /*hides the square reaching hands image below the reaching hands image it will ultimately replace for large screens.*/
     }
}
/*Transition from mobile to tablet view. (932px also works.)*/
@media only screen and (min-width: 700px) {
    #home-about-container {
        display: flex;
        gap: 2em;
    }
    #home-about {
  /*      & P#home-about-logo-text {
            display: block;
            font-size: 3rem;
            text-align: center;
            font-weight: bold;
    }*/
        & #home-about-logo-text-container {
        display: flex;
        flex-direction: column;  /*default is row, change to column*/
        justify-content: space-around;  /*vertical alignment for the logo and hands reaching out photo. space-around or space-evenly*/
        align-items: center;  /*Centers horizontally the logo when smaller than 100%, a child element, of this container*/
       /* align-content: space-evenly;*/
       padding-bottom: 2rem;  /*need to even up the two containers at the bottom, which makes a better column alignment and bottom spacing.*/
    }
        & h3 {
            padding-top: 3rem;
        }
   /*     & #about-hhlogo {
        padding: 3.5rem 0;*/  /*was 3rem 0 for mobile*/
 /*   }*/
     & #reaching-hands {
        display: block;  /*shows the reaching hands image below the logo.*/
    }
    & #reaching-hands-2 {
        display: none;  /*hides the reaching hands image below the about text.*/
    }
}
}
@media only screen and (min-width: 800px) {
     #home-about {
    & #reaching-hands {
        display: none;
    }
    & #reaching-hands-sq {
        display: block;   
    }
}
}
@media only screen and (min-width: 935px) {
     #home-about {
    & #about-hhlogo {
        width: 75%;           
        }
    & #reaching-hands-sq {
        width: 75%;   
    }
     & #home-about-text {
        flex-basis: 250%;  /* was 300%, too wide.     width of default about text container.  Other container with hhlogo grows.*/
}
}
}

@media only screen and (min-width: 1200px) {   /*was 1181px*/
     #home-about {
    & #about-hhlogo {
        width: 100%;             /*both were 50% for 80% below.  both were 75% for 300% below.*/
        }
    & #reaching-hands-sq {
       /* width: 50%;  */
       display: none; 
    }
     & #home-about-text {
        flex-basis: 80%;  /* was 80%. was 300%, too wide.     width of default about text container.  Other container with hhlogo grows.*/
}
}
}
@media only screen and (min-width: 1594px) {
    #home-about {
    & #home-about-text {
        flex-basis: 60%;  /*width % of default about text container.  Other container with hhlogo grows.*/
    }
    & #about-hhlogo {
       width: 75%;
    }
    }
}
/*End of Styles for About Helping Hands Romania, our mission, id=home-about.*/


/*Styles for Our Services section*/
#home-services {
    /*grid-area: sidebar;*/
    grid-row: 3/span 1;     /*Reference main element's nested grid.*/
    grid-column: 1/span 12;
    padding: 2rem 1rem 2rem 1rem;     /*12px is 0.75rem, which is equivalent. 16px = 1rem. was 1rem*/
    background-color: var(--lt-gray-background);
    & img {                 /*The bread and wine image in the aside*/
      /*  width: min(50%, 2048px); */     /*display 50% of parent container; max native width of photo--DON'T USE.*/
      /*width: clamp(150px, 100%, 600px);*/  /*min, to display 100% of parent container, Max--here less than native photo width but works well for large layouts*/
      width: 60%;        /*Don't need above img clamp above because I have the responsive class, so image won't grow beyond 100%, and 60% container width works.*/
      display: block;
      margin: 0 auto;
      padding-top: 1rem;
     /* border-radius: 5px;*/
    }
    }      /*This could be incorporated using the & div and & a*/
#home-connecting div {
    padding-bottom: 0.5rem;  /*8px*/
        }
    /*    #home-connecting a {
        color: var(--secondary-purple-darkest);*/      /*indigo;   indigo was darker. Changed color of all contents of a tag.*/
    /*    }*/

p#services-text {
    color: var(--mid-gray);
    padding-top: 2rem;
    padding-bottom: 2rem;
    text-align: center;
    font-size: 1em;
    width: clamp(130px, 80%, 800px);   /*200px 80% 500px*/
    margin: 0 auto;     /**/
}

/*Styles for Our Services Cards.*/
#card-title {
    text-align: center;
    padding-top: 1rem;
    padding-bottom: 0.75rem;
    color: var(--flag-blue);
}
.card {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); 
 /*   box-shadow: 0 4px 8px 0 rgba(187,60,60,0.2); */
    transition: 0.3s;
    width: 90%; /*Controls width of the card and thus the included photo. 20% for large screens. 40% mid screens. 95%-100% small screens*/
    border: 1px solid #ccc;
    border-radius: 6px;
    background-color: var(--light-menu);  /*was --off-white*/
  
  /*  width: 250px;
  height: auto;  */           /*I could adjust more, but might still get 3 on top and 1 on bottom, which I don't want.  Use a subgrid.*/
  
  min-width: 200px;   /*Less than 200px is where text begins to overflow the card.*/
  /*padding: 2em 0;*/ 
  }
/*The following are contained inside the .card class, so try using &... and include them in the .card style rules.*/
  .card:hover {
        /* Scale the card up by 6% on hover */
        transform: scale(1.06); 
        /* Enhance the shadow for a more pronounced effect */
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
        
        /*cursor: pointer;*/
   /* box-shadow: 0 12px 20px 0 rgba(187,60,60,0.2); */  /*0 8px 16px and rgba(187,60,60,0.2)*/
    /*border: 2px solid var(--accent-red);*/
  }
  
  /*didn't work when moved inline img styles here so moved them above to the & img. NOTE FOR STYLING IMG BUT FOR ADDING A RESPONSIVE IMAGE CLASS!!!*/
/* .card-images {
    border-radius: 5px 5px 0 0;
  }*/
  
  .card-text-container {
    padding: 2px 16px;
    text-align: center;
    & h3 {
        color: var(--flag-red);
        padding: 0.25rem 0;
    }
    & p {
        color: var(--mid-gray);
    }
  }
  /*Only the h2 turns red when it is hovered over.*/
  /*
  .card-text-container h2:hover {
    color: var(--accent-red-darkest);
  }
*/ 
/*h2 and p both turn red when hovered over.*/
/*
  .card-text-container:hover {
    color: var(--accent-red-darkest);
  }
*/
/*Selects only the h2 in the .card-text-container to underline.*/
/*
    .card-text-container h2:hover {
    text-decoration: underline;
  }
*/
/*If p or h2 in .card-text-container are hovered over they both turn red and only h2 is underlined*/
/*Therefore, with a tag, link all text and photo as well.  I didn't do anything with the photo when hovered as the red outline takes care of it.
This is good if only linking the text p and h2 to the a tag link.*/
/*
.card-text-container:hover {
    color: var(--accent-red-darkest);
    & h2 {
        text-decoration: underline;
    }
}
    */
/*If the image, p , or h2 is the .card is hovered over, that is the entire card, the text turns red and the h2 only is underlines.  This is good
when linking the entire card with an a tag.*/
/*
.card:hover {
    color: var(--accent-red-darkest);
    & h2 {
        text-decoration: underline;
    }
}
*/
/*When any part of the card is hovered, then h2 text turns red and is underline.
This works good especially if I incorporate an image diming overlay, opacity, filder etc,.*/
/*
.card:hover {
    h2 {
        color: var(--accent-red-darkest);
        text-decoration: underline;
    }
}
*/

/*When any part of the card is hovered, then h2 text turns read and is underline.  Also, when any part of the card
is hovered, a cursor pointer appears to indicate a link. Adding an image effect, diming, overlay, opacity, filter change would be nice.*/
/*THIS WAS INCLUDED.NO LONGER NEEDED
.card:hover {
    cursor: pointer;
    & h2 {
        color: var(--accent-red-darkest);
        text-decoration: underline;
    }
}*/
/*Only when the h2 is hovered will it turn red and underline.  I don't want this.  I note it as the above is close but not the same.*/
/*
.card h2:hover {
        color: var(--accent-red-darkest);
        text-decoration: underline;
    }
*/

  #card-container {
      display: flex;
      justify-content: space-evenly;  /*could use center and space with padding on the card div.*/
  
     flex-direction: row;                /*flex-direction: column; for mobile view. shows cards vertically.  Row is Default*/
     flex-wrap: wrap;
     padding: 1em;
  /*   padding: 5em 0;  */   /*space above and below container between title and bottom.*/
  /*justify-content: center;*/
  /*column-gap: 2em;*/
  row-gap: 2em;
  }
  
  @media only screen and (min-width: 600px) {
    .card {
      width: 40%;
    }
    #card-container {
        /*padding-bottom: 2em;*/   /*No impact on bottom padding*/
        margin-bottom: 1em;   /*bottom margin works.*/
    }
  }
  
  @media only screen and (min-width: 900px) {
    .card {
      width: 20%;
    }
    #card-container {
      justify-content: space-around;
    }
  }
/*End of Styles for Our Services Cards*/
/*End of Styles for Our Services section*/

/*Styles for Support Our Mission, id=home-support.*/
#home-support {
    grid-row: 4/span 1;     /*Reference main element's nested grid.*/
    grid-column: 1/span 12;
    padding: 2rem 1rem 3.5rem 1rem;     /*12px is 0.75rem, which is equivalent. 16px = 1rem. was 1rem*/
    background-color: var(--flag-yellow);
    & hr {
        border-top: 4px solid var(--flag-red);
    }
}
#giving-section {
    background: var(--off-white);
    width: 95%;
    display: block;
    margin: 0 auto;
    padding-top: 1rem;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); 
   
    & h3 {
        text-align: center;
        padding: 1rem;
        color: var(--mid-gray);
    }
    & p {
        text-align: center;
        padding: 0 1rem 1rem 1rem;
        color: var(--mid-gray);
    }
    p:last-of-type {            /*selects last p in the giving-section. Widely supported. Could use :last-child with excellent support, too.*/
        padding-bottom: 2rem;
        font-style: italic;
        font-size: 0.9rem;
    }
}
/* Use button tag rather than input tag with type="submit" because not submitting form data but linking to URL. */
/*Mission Stream button*/
#button-mission-stream {
    background-color: var(--flag-red);
    color: var(--off-white);
    font-size: 1rem;
    font-weight: bold;
    border: 3px solid var(--flag-red-dark);
    width: clamp(10em, 15em, 30em);    /*min preferred max*/    /*was 10em*/
    height: 3.5em;        /*was 3.5em*/
    border-radius: 4px;    /*12px*/
/*    box-shadow: 2px 2px;  */
    display: inline-block;
    cursor: pointer;
    font-style: normal;
    transition: background-color 0.5s ease;  /*Added this line to transition background color. Works well.*/
}
#button-mission-stream:hover {
    background-color: var(--flag-red-dark);
/*    color:#800000; */
}
/* Used with div tag to center the Sunday Worship Schedule button */
#mission-stream-button {
    text-align: center;
    padding: 1rem 1rem 2rem 1rem;  /*Take care not to overflow container for various screen sizes.*/
}  /*end of support section's Mission Stream button*/


/*PayPal button*/
#button-paypal {
    background-color: var(--flag-blue);
    color: var(--off-white);
    font-size: 1rem;
    font-weight: bold;
    border: 3px solid var(--flag-blue-dark);
    width: clamp(7em, 15em, 30em);    /*min preferred max*/    /*was 10em*/ /*was 15em*/
    height: 3.5em;        /*was 4em*/
    border-radius: 4px;    /*12px*/
/*    box-shadow: 2px 2px;  */
    display: inline-block;
    cursor: pointer;
    font-style: normal;
    transition: background-color 0.5s ease;  /*Added this line to transition background color. Works well.*/
}
#button-paypal:hover {
    background-color: var(--flag-blue-dark);
/*    color:#800000; */
}
/* Used with div tag to center the Sunday Worship Schedule button */
#paypal-button {
    text-align: center;
    padding: 1rem 1rem 2rem 1rem;;  /*Take care not to overflow container for various screen sizes.*/
}  /*end of support section's PayPal button*/

/*Transition from tablet to small laptop view. (*/
@media only screen and (min-width: 800px) {
    #giving-section {
    width: 80%;
}
}
/*Transition from small laptop to large laptop view.*/
@media only screen and (min-width: 1240px) {
    #giving-section {
    width: 58%;
}
}
/*Transition from large laptop to max 2000px view.*/
@media only screen and (min-width: 1646px) {
    #giving-section {
    width: 47%;
}
}
/*End of styles for Support Our Mission.*/

/*Styles for Contact Us section, id=home-contact.*/
#home-contact {
    grid-row: 5/span 1;     /*Reference main element's nested grid.*/
    grid-column: 1/span 12;
    padding: 2rem 1rem 2rem 1rem;     /*12px is 0.75rem, which is equivalent. 16px = 1rem. was 1rem*/
    background-color: var(--light-menu);
}
#contact-form-container {
    background-color: var(--off-white);
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); 
}
/*Styles for the contact form section*/
#contact-form-container {
    & h3 {
        color: var(--flag-red);
        padding: 0.75rem 0 0 1.25rem;
    }
}
/*#submit-contact,*/ #fname, #email, #subject {   /*include #submit-contact for the button to strech across the parent container.*/
  width: 100%;
  padding:  0.75rem;   /*was 12px*/
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top:  0.375rem;   /*was 6px*/
  margin-bottom: 1rem;  /*was 16px*/
 /* resize: vertical;*/
 /* overflow: scroll;*/   /*auto scroll hidden.  Need auto or scroll for resize: vertical to work. Applies to textarea.*/
  font-size: 100%;
}

textarea#message {
  height:200px;
  width: 100%;
  padding:  0.75rem;   /*was 12px*/
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top:  0.375rem;   /*was 6px*/
  margin-bottom: 1rem;  /*was 16px*/
  resize: vertical;
  overflow: scroll;   /*auto scroll hidden.  Need auto or scroll for resize: vertical to work. Applies to textarea. scrollbars appear with scroll for overflow.*/
  font-size: 100%;
}

#submit-contact {
/*  background-color: #04AA6D;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;*/

    background-color: var(--flag-blue);
    color: var(--off-white);
    font-size: 1rem;
    font-weight: bold;
    border: 3px solid var(--flag-blue-dark);
    width: clamp(7em, 15em, 30em);    /*min preferred max*/    /*was 10em*/ /*was 15em*/
    height: 3.5em;        /*was 4em*/
    border-radius: 4px;    /*12px*/
/*    box-shadow: 2px 2px;  */
    display: inline-block;
    cursor: pointer;
    font-style: normal;
    transition: background-color 0.5s ease;  /*Added this line to transition background color. Works well.*/
}

#submit-contact:hover {
  background-color: var(--flag-blue-dark);
}

.form-container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 1.25rem;                /*was 20px*/
} /*end of contact form styles*/

/*Styles for the contact Information section*/
#contact-information-container {
    background-color: var(--off-white);
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); 
    & h3 {
        color: var(--flag-red);
        padding: 0.75rem 0 1.25rem 1.25rem;
    }
}
/*Styles for icons before text in contact us*/
div.contact-icon-group {
    display: flex;
    align-items: center;
    padding-bottom: 0.5rem;
    padding-left: 1rem;
}
p.text-below-contact-icons {
    padding-left: 3.3rem;
    padding-bottom: 2rem;
}
p.volunteer-text {
    padding-left: 1.25rem;
    padding-bottom: 1rem;
    padding-right: 1rem;
}
/*
span.space-after-icon {
    display: inline-block;
}*/

/*end of contact information section styles*/

/*Styles for container holding the contact form container and the contact information container*/
#container-form-information {
    display: flex;
    flex-direction: column;
    row-gap: 2rem;
    padding-bottom: 2rem;
}
/*large mobile to tablet view of contact us section.*/
@media only screen and (min-width: 760px) {
    #container-form-information {
    flex-direction: row;
    column-gap: 2rem;
}
}
/*End of Styles for Contact Us section*/

/*footer styles begin--mobile first approach.*/
footer {
    grid-row: 3/span 1;
    grid-column: 1/span 12;
 /*   background-color: var(--accent-green);*/
    background-color: var(--off-black-background);
    /*footer's subgrid below*/
    display: grid;
    grid-template-columns: repeat(12, 1fr);
}
/*Footer's five div classes.  Reference the Footer's nested grid.*/
.footer-mission-statement {
    grid-row: 1/span 1;
    grid-column: 1/span 12;
    padding: 2rem 1rem 1rem 1rem;
    text-align: center;
    & h3 {
        padding-bottom: 0.75rem;
        color: var(--light-menu);
    }
    & p {
        color: var(--lt-gray-blue)
    }
}
.footer-menu-links {
    grid-row: 2/span 1;
    grid-column: 1/span 12;
    padding: 1rem;
    text-align: center;
    & h3 {
        color: var(--light-menu);
        padding-bottom: 0.75rem;
    }
}
.footer-nav-links {
    & ul {
       list-style: none;
    /*   background-color: var(--off-black);*/
    }
    & a {
        text-decoration: none;
        color: var(--lt-gray-blue);
    }
    & li {
        padding-bottom: 0.25rem;
    }
    & a:hover, a:focus {
        color: var(--light-menu)
    }
}
.footer-social-links {
    grid-row: 3/span 1;
    grid-column: 1/span 12;
    padding: 1rem;
    text-align: center;
    & h3 {
        color: var(--light-menu);
        padding-bottom: 0.75rem;
    }
    & p {
        color: var(--lt-gray-blue);
        padding-bottom: 0.75rem;
    }
}
/*footer social icon transiton on hover or focus.*/
img.social-white {
            display: none;
        }

        /*For hover effect to work smoothly, size the container div to the same size as the icon, the Smaller Icon, 64px,  works well without
        the transition occuring too early as the cursor approaches the icon.  The Icons are 64px by 64px*/
        div.social-swap-div {
            width: 40px;    /*was 64px for all.  32px works well. 40px works good, too.*/
            height: 40px;
            & img {
                width: 40px
            }
        }

        div.social-swap-div:hover {
            & img.social-white{
                display: block;
            }
            & img.social-gray{
                display: none;
            }
        }/*End social icon transition*/

.footer-social-icon-container {
    display: flex;
    justify-content: center;
    column-gap: 1.75rem;
    padding-bottom: 0.75rem;
}
/*Footer Newsletter Signup Form Styles*/
/*.footer-newsletter-form-container {
    background-color: var(--dark-menu); 
}*/

/*
.footer-newsletter-form {*/
 /*   background-color: var(--dark-menu);*/
/*    & label {
        color: var(--lt-gray-blue);
    }
    text-align: left;*/
/*}*/
#namefirst, #namelast, #emailaddress {   /*input fields to strech across the parent container.*/
  width: 100%;
  padding:  0.75rem;   /*was 12px*/
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top:  0.375rem;   /*was 6px*/
  margin-bottom: 1rem;  /*was 16px*/
 /* resize: vertical;*/
 /* overflow: scroll;*/   /*auto scroll hidden.  Need auto or scroll for resize: vertical to work. Applies to textarea.*/
  font-size: 100%;
}
#footer-subscribe-contact {
    background-color: var(--flag-yellow);
    color: var(--off-black-background);
    font-size: 1rem;
    font-weight: bold;
    border: 3px solid var(--flag-yellow-dark);
    width: clamp(7em, 15em, 30em);    /*min preferred max*/    /*was 10em*/ /*was 15em*/
    height: 3.5em;        /*was 4em*/
    border-radius: 4px;    /*12px*/
/*    box-shadow: 2px 2px;  */
    display: inline-block;
    cursor: pointer;
    font-style: normal;
    transition: background-color 0.5s ease;  /*Added this line to transition background color. Works well.*/
}
#footer-subscribe-contact:hover {
  background-color: var(--flag-yellow-dark);
}
/*End Footer Newsletter Signup Form Styles*/

/*.footer-newsletter-signup {
    grid-row: 4/span 1;
    grid-column: 1/span 12;
    padding: 1rem;
}*/

/*footer line styles*/
.footer-line {
    grid-row: 4/span 1;
    grid-column: 1/span 12;
    padding: 1rem;
}
.horizontal-line-footer {
     /*Resets user agent stylesheet in Edge and Chrome.  This gets rid of a blemish on the left side.  It removes some browser styles*/
    margin-block-start: 0;
    margin-block-end: 0;
    border-style: none;
    border-top: 2px solid var(--lt-gray-blue);      /*was 4px like the other horizontal lines.*/
  /*padding: 1rem 0; */   /*Don't use padding on the line as it will expand its width.  Use it on elements above and below the line.*/
    width: calc(100%-6em);       /*was 5.5em like the other horizontal lines*/
    margin-left: auto;      /*centers*/
    margin-right: auto;
    border-radius: 5px;  /*rounds edges*/
}
/*end footer line styles*/

/*footer copyright styles*/
.footer-copyright-date {
    grid-row: 5/span 1;
    grid-column: 1/span 12;
    padding: 1rem 1rem 2rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    & p:last-of-type{
        padding-bottom: 2rem;
    }
    & p {
        color: var(--lt-gray-blue);
    }
}
/*large mobile to tablet view of contact us section.*/
@media only screen and (min-width: 760px) {
    .footer-copyright-date {
        flex-direction: row;
        column-gap: .4rem;
        padding: 0 1rem;
        & p {
            padding-bottom: 2rem;
        }
}
}  /*End footer copyright styles*/

/*Footer styles for larger screens.*/
/*From Mobile to Tablet View.*/
@media only screen and (min-width: 760px) {
.footer-mission-statement {
    grid-row: 1/span 1;
    grid-column: 1/span 4;
    padding-left: 2rem;
}
.footer-menu-links {
    grid-row: 2/span 1;
    grid-column: 1/span 4;
    padding-left: 2rem;
}
.footer-social-links {
    grid-row: 1/span 2;
    grid-column: 6/span 7;
    padding-top: 5.25rem;        /*2rem     5rem--great for tablet.  laptop calc(5rem - 5%)   or calc(5rem - 4em)*/
    padding-right: 2rem;
}
.footer-line {
    grid-row: 3/span 1;
    grid-column: 1/span 12;
}
.footer-copyright-date {
    grid-row: 4/span 1;
    grid-column: 1/span 12;
    & p, p:last-of-type {
    padding-bottom: 3rem;
    }
}
}

/*Styles for section markers referenced by the navigation menu in header and footer*/
/*keeps the home-about-marker (section marker) 4em above the bottom of the parent div (section above the one referenced.), 
so the marker links to the same location for all screen sizes.  Increase bottom em to raise landing place.*/
#home-about-marker {
    position: relative;
    bottom: 4em;
}
#home-services-marker {
    position: relative;
    bottom: 0.75em;
}
#home-support-marker {
    position: relative;
    bottom: 1.95em;
}
#home-contact-marker{
    position: relative;
    bottom: 0.5em;
} /*End of styles for section markers for nav menus.*/

/*Styles for JS Photo Gallery Plugin.*/
/*The photoGallery.html page has some styles and scripts on the html page.
The styles folder has "simple-lightbox.css" and the JS folder has "simple-lightbox.js files for this
photo gallery.  The img folder is for this photo gallery and contains two subfolders:  "full" for the 
full sized images and "thumbnail" for the thumbnail images.
The photos enlarged photos cover the sticky nav bar as they should.*/
#photo-gallery-text {
    grid-row: 1/span 1;
    grid-column: 1/span 12;
    padding: 1rem;
    & h2 {
        text-align: center;
        color: var(--flag-blue);
        padding-top: 0.5rem;
        padding-bottom: 0.75rem;
    }
    & p {
        padding-top: 1rem;
    }
}
/*When I omitted the gallery div class container, this subgrid positioning worked.  However, to avoid conflicts, I renamed the
gallery div class container to gallery-container, so now it must be positioned in the subgrid rather than div.gallery*/
/*div.gallery {
    grid-row: 2/span 1;
    grid-column: 1/span 12;
    padding: 1rem;
}*/
div.gallery-container {
    grid-row: 2/span 1;
    grid-column: 1/span 12;
    padding: 1rem;
}
.gallery-container .gallery a img { /*To avoid conflicting with the body div class container. I changed the gallery div class container name to gallery-container.*/
            float: left;                    /*It seems to work fine without it but it could lead to conflicts.*/
            width: 50%;             /*mobile first design. Adjust for different screen sizes, determines how many images across the screen.*/
            height: auto;
            border: 2px solid #fff;
            -webkit-transition: -webkit-transform .15s ease;
            -moz-transition: -moz-transform .15s ease;
            -o-transition: -o-transform .15s ease;
            -ms-transition: -ms-transform .15s ease;
            transition: transform .15s ease;
            position: relative;
        }

.clear {
            clear: both;
        }

/*Transition from tablet to small laptop view and larger. (*/
@media only screen and (min-width: 800px) {
    .gallery-container .gallery a img {
        width: 25%;
}
}
/*End of Styles for JS Photo Gallery Plugin.*/


/*Styles for Video Gallery.  Used file:  Video in Lightbox I Flex   --my files and code.*/
#video-gallery-text{
    grid-row: 3/span 1;
    grid-column: 1/span 12;
    padding: 1rem;
    & h2 {
        text-align: center;
        color: var(--flag-blue);
        padding-top: 0.5rem;
        padding-bottom: 0.75rem;
    }
    & p {
        padding-top: 1rem;
    }
}
div.video-gallery-container{
    grid-row: 4/span 1;
    grid-column: 1/span 12;
    padding: 1rem;
}

#fade {
  display: none;
  position: fixed;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 1001;
  -moz-opacity: 0.8;
  opacity: .80;
  filter: alpha(opacity=80);
}

#light {
  display: none;
  position: absolute;
 /* top: 50%;*/           /*50% 50% centers the #light in the parent container.  But it doesn't, so I added a lighbox container and used flex.*/
/*  left: 50%;*/
/*  max-width: 600px*/        /*was 600px*/
/*  max-height: 360px;*/
/*  margin-left: -18.75rem;*/        /*was -300px.   -300/16 = -18.75rem    This didn't make it responsive*/
/*  margin-top: -11.25rem;*/         /*was -180px.      -180/16 = -11.25rem*/
/*  margin-top: 15rem;*/   /*move to .videoHorizontal to toggle for horizontal and vertical videos*/

  border: 2px solid #FFF;
  background: #FFF;
  z-index: 1002;
  overflow: visible;
}

#boxclose {
  float: right;
  cursor: pointer;
  color: #fff;
  border: 1px solid #AEAEAE;
  border-radius: 3px;
  background: #222222;
  font-size: 31px;
  font-weight: bold;
  display: inline-block;
  line-height: 0px;
  padding: 11px 3px;
  position: absolute;
  right: 2px;
  top: 2px;
  z-index: 1002;
  opacity: 0.9;
}

.boxclose:before {
  content: "×";
}

#fade:hover ~ #boxclose {
  display:none;
}
/*
.test:hover ~ .test2 {
  display: none;
}*/

/*This would center the video itself, but not working here due to lightbox
#VisaChipCardVideo {
  display: block;
  margin: auto;
}*/
#lightboxContainer {
  display: flex;
  justify-content: center;
  align-items: center;
}

/*Horizontal video styles (landscape orientation)*/
.lightHorizontal {
  margin-top: 15rem;
}
.videoHorizontal {     /*was #VisaChipCardVideo but changed to .videoHorizontal to toggle for horizontal and vertical videos*/
    width: 300px;
}

/*Vertical video styles (Portrait orientation)*/
.lightVertical {
  margin-top: 30rem;
}
.videoVertical {     /*was #VisaChipCardVideo but changed to .videoHorizontal to toggle for horizontal and vertical videos*/
    width: 275px;
}


/*changed #VisaChipCardVideo to .videoHorizontal and #light to .lightHorizontal.  Also, added .videoVertical and .lightVertical for vertical videos.*/
@media only screen and (min-width: 420px) {
  .videoHorizontal {
    width: 400px;
  }
}
@media only screen and (min-width: 760px) {
  .videoHorizontal {
    width: 500px;
  }
  .lightHorizontal {
    margin-top: 25rem;
  }
  .videoVertical {
    width: 350px;
  }
  .lightVertical {
    margin-top: 43rem;
  }
}
@media only screen and (min-width: 900px) {
 .videoHorizontal {
    width: 600px;
  }
  .videoVertical {
    width: 375px;
  }
}

@media only screen and (min-width: 1100px) {
  .videoHorizontal {
    width: 900px;
  }
   .lightHorizontal {
    margin-top: 35rem;
  }
  .videoVertical {
    width: 450px;
  }
  .lightVertical {
    margin-top: 54rem;
  }
}

/*Adjust for horizontal video by adding videoHorizontal class to the video element
and lightHorizontal class to the div element wrapping the video element.
These need to appear after #VisaChipCardVideo and #light to overwrite them for
vertical videos*.  This will not overwrite the earlier styles!  Don't do this.
/*.videoHorizontal {
  width: 275px;
}
.lightHorizontal {
  margin-top: 30rem;
}*/

/*The following approach works and is what I did.
Separated out the styles for the video width and margin-top from their original CSS selector and placed in a new selector for vertical and horizontal video.
That is, width from #VisaChipCardVideo was removed and added to .videoHorizontal and .videoVertical.
Also, margin-top was removed from #light and added to .lightHorizontal and .lightVertical.
Now, I can use JavaScript to dynamically toggle the classes (add and remove .videoHorizontal and .videoVertical) of the video element with id=VisaChipCardVideo.
Additionally, dynamically toggle the classes (add and remove .lightHorizontal and .lightVertical) of the div element with id=light. 
The toggling is based on the thumbnail anchor, a tag id:  odd number ids are horizontal (e.g., video1, video3, video5) 
and Even number ids are vertical (e.g., video2, video4, video6).  The toggling of classes (add or remove) is done dynamically using JavaScript 
when the thumbnail anchor tag is clicked.
For similar coding reference, see the code I wrote toggleclassColor.html in this folder.*/


/*format layout of thumbnail images.*/
/*the images are no longer the same width and height. 
display flex won't respond to column and lose image proportion; 
inline-flex shinks pic (container adjust to take up just enough room).
inline-flexbox shows full pictures some same size but won't respond to column
inline-block won't respond to column
flexbox won't respond to column*/
/*#thumnailImageContainer {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  
}*/
/*can't get flex or float to work correctly when displaying the thumbnail images!  I'm unsure of why! It might be due to nested elements or that the lightbox is flex.
I can get grid to work to display thumbnails, to use it.
*/
#thumbnailGalleryContainer {
  /*works for grid*/
/*display: grid;
grid-template-columns: repeat(4, 1fr);
align-items: center;
 row-gap: 1.5em; 
 column-gap: 1.5rem;*/
 /*end works for grid*/


/*justify-content: center;*/
/*justify-items: center;*/
/*place-items: center;*/
/*align-content: center;*/
/*justify-self: center;*/
 /* position: absolute;*/

/*Default flex-direction is row but videoThumbContainer is taking up almost 100% of width, so don't need to state column here.  
So, in tablet media query don't need to state column.
I think it is best to state explicitly so it works more like I want it to work.*/
display: flex;
flex-direction: column;
flex-wrap: wrap;
gap: 0.75rem;
justify-content: space-evenly;
align-items: center;
}
/*Thumbnail images.  without the thunmailImageContainer, this makes images the same with and height and they stack vertically.*/
/*#thumnailImageContainer img.horizontalThumbnail {
}*/

/*This follows the image gallery but apeares to work for width 10% or 100% but not for inbetween % as there are gaps.  I'm unsure why the huge space gaps.
Might be better to try a grid to position the thumbnails.*/
img.horizontalThumbnail {
  width: 100%;     /*was 80% but 90% is better mobile first design.  It was 40% works well for desktop when having multiple pics on one line.*/
  height: auto;

  border: 2px solid #100f0f;  /*image border is optional*/
  /*justify-content: center;
  align-self: center;*/

/*  object-fit: cover*/
/*  float: left;
  border: 2px solid #fff;
  transition: transform .15s ease;
 position: relative;*/
 /* background-color: rgba(7, 31, 241, 0.3);*/
}

 /*.thumbShadow a {
 opacity: 0;
 
 /*transform: translateZ(5); */  /* triggers GPU rendering */
 /*backface-visibility: hidden;
}*/

.videoThumbContainer {
  width: 100%;     /*mobile 1st design, videoThumbContainer takes up 95% parent container width.  It looks better than 100% but 100% keeps it aligned centrally. See later note on tablet media query.*/
  height: auto;

   transition: 0.3s;  /*for hover transition*/
}

/*Drop shadow added to the thumbnails images on hover (added to thumbnail container div. and not the image itself.).
Since this produces and underline, might want to let it grow as the cards on the home page.
Since a strip appears at the botton on hover, I decided to make a thumbnail hover scale up (magnify) effect on hover.*/
/*.thumbShadow same as .videoThumbContainer so use one.*/
/*.thumbShadow {*/
/*.videoThumbContainer {*/

/*transition: box-shadow 0.3s ease-in-out;
          overflow: hidden;*/
/* transition: 0.3s;*/
 
          /* triggers GPU rendering */
          /*transform: translateZ(5);  
          backface-visibility: hidden;*/
/*}*/
/*.thumbShadow:hover {*/
.videoThumbContainer:hover {
  transform: scale(1.04);  /*was 1.06 but that grew too large covering some of the next thumbnail. I could give more space but decided to grow less.*/
 /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);*/
 /* box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);*/
 /* background-color: rgba(0, 0, 0, 0.3);*/
 /* & a {
    background-color: rgba(0, 0, 0, 0.3);*/
     /* background-color: rgba(7, 31, 241, 0.3);
  }*/
}

/*
img.horizontalThumbnail {
  transition: box-shadow 0.3s ease-in-out;
}
img.horizontalThumbnail:hovwe {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
*/


/*
.clear {
  clear: both;
}

/*flexbox layout of thumbnails for Tablet*/
@media only screen and (min-width: 500px) {
  #thumbnailGalleryContainer {
    flex-direction: row;
    /*The leftover video thumbnails will align in the center of the page if the next two attributes are omitted.
    Including the next two attributes will cause the leftover thumbnails to align on the left side of the screen, and
    the padding left can be adjusted to lineup with any text or other margins as desired. Don't worry about trying to center
    the video thumb gallery display but I could with Justify-self: center---NO ONLY WORKS ON ITEMS IN THE FLEXBOX.
    I could give the thumbnailGalleryContainer another div wraper and set property so it center it, but I think it is okay
    with a left alignment. 
    (Other options, let leftovers center align or adjust padding with calc etc, to look more centered if
    desired. Or, just let the video thumbs take up more room and the videothumbs container would need to be more than 95%--tried 100% and
    this last option doesn't work as expected.  The other options might work fine.)*/
    /*With the last two attributes, the older width setting might work better.  I just tried, and the current setting work fine,.*/
    justify-content: left;
    padding-left: 1rem;
   
    /*justify-self: center;   --doesn't work*/
  }
  .videoThumbContainer {
    width: 48%;      /* use 45% if width 95% on parent container*/
}
}
/*flexbox layout of thumbnails for Laptop and larger*/
@media only screen and (min-width: 900px) {
 .videoThumbContainer {
    width: 23%;    /* use 23% if width 95% on parent container*/
}
}

/*End of Styles for the video Gallery*/


/*limits the width of the webpage to 2000px and the webpage is centered when the screen exceeds 2000px.
margin: auto; on the body element centers the webpage.*/
@media only screen and (min-width: 2000px) {        
    body {
    max-width: 2000px;
    }
    }