*,
*:before,
*:after {
    box-sizing: border-box;
}

body {
    margin: 10px;
    font-family: 'Open Sans', 'sans-serif';
    background-color: #fff;
}

h1,
p{
    margin: 0;
}

	.header2 {
	    /* color: rgb(250, 250, 250); */
        color: black;
	    text-align: center;
	    font-size: 1.2em;
	}
        .header2>p {
            text-align: left;
            margin: 3em;
        }
    
        .header2>h1 {
            padding: 1em;
        }

	#gallery-section {
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    padding: 10px;
	    z-index: -1;
	}

	#thumbnail-gallery-container {
	    display: flex;
	    flex-flow: row wrap;
	    justify-content: space-between;
	    padding: 15px 50px 10px 50px;
	}

	.thumbnail {
	    width: 32%;
	    margin-bottom: 2%;
	    position: relative;
	}

	img.thumbnail-image {
	    width: 100%;
	    height: 100%;
	    object-fit: cover;
	    object-position: center center;
	}

	@media only screen and (max-width: 800px) {
	    #gallery-section {
	        padding: 10px 10px 10px;
	    }

	    #thumbnail-gallery-container {
	    }
	}

	/* Lightbox Styles */

	.lightbox-overlay {
	    display: flex;
	    transform: scale(0, 1);
	    transition: transform 400ms ease-out;
	    transform-origin: center;
	    justify-content: center;
	    align-items: center;
	    background-color: rgb(80, 80, 80, 0.95);
	    width: 100vw;
	    height: 100vh;
	    position: fixed;
	    top: 0;
	    left: 0;
	}

	.lightbox-overlay:target {
	    display: flex;
	    transform: scale(1, 1);
	    z-index: 99999;
	}

	.lightbox-content {
	    color: rgb(250, 250, 250);
	    padding: 1.5em;
	    width: 75vw;
	    text-align: center;
	}

	.lightbox-image-title {
	    position: relative;
	    text-align: center;
	}

	.lightbox-navigation {
	    display: flex;
	    flex-flow: row wrap;
	    justify-content: space-evenly;
	}

	.close {
	    position: absolute;
	    background-color:transparent;
	    top: 5px;
	    /* Top Right Corner Placement */
	    right: 20px;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	}

	a.close {
	    text-decoration: none;
	    font-weight: bold;
	    font-size: 2em;
	    font-family: sans-serif;
	}

	.close::after {
	    content: 'X';
	    color: rgb(250, 250, 250);
	}



	.back,
	.next {
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    width: 24%;
	    height: 2em;
	    color: rgb(255, 255, 255);
	    margin: 1%;
	}

	img.lightbox-image {
	    width: 65vw;
	    max-height: 65vh;
	    object-fit: contain;
	}