/* #################### */
/* !GRIDS 1C, 2CL, 2CR, 3C */
/* #################### */
@supports (grid-area: auto) {
	.containerCSSG_1C {
		display: grid;
		grid-template-columns: 1fr;
		grid-auto-rows: auto;
		grid-template-areas:
		"headertop"
		"navmain"
		"headerbottom"
		"maincontent"
		"footerwrapper"
		;
		background-color: #606060;
	}
	.containerCSSG_2CL {
		display: grid;
		grid-template-columns: 25% 75%;
		grid-auto-rows: auto;
		grid-template-areas:
		"headertop headertop"
		"headerbottom headerbottom"
		"carousel carousel"
		"navmain navmain"
		"sidebarL maincontent"
		"cardsmain_wrapper cardsmain_wrapper"
		"footerwrapper footerwrapper"
		;
		background-color: #606060;
	}
	.containerCSSG_2CR {
		display: grid;
		grid-template-columns: 75% 25%;
		grid-auto-rows: auto;
		grid-template-areas:
		"headertop headertop"
		"headerbottom headerbottom"
		"carousel carousel"
		"navmain navmain"
		"maincontent sidebarR"
		"cardsmain_wrapper cardsmain_wrapper"
		"footerwrapper footerwrapper"
		;
		background-color: #606060;
	}
	.containerCSSG_3C {
		display: grid;
		grid-template-columns: 20% 60% 20%;
		grid-auto-rows: auto;
		grid-template-areas:
		"headertop headertop headertop"
		"headerbottom headerbottom headerbottom"
		"carousel carousel carousel"
		"navmain navmain navmain"
		"sidebarL maincontent sidebarR"
		"cardsmain_wrapper cardsmain_wrapper cardsmain_wrapper"
		"footerwrapper footerwrapper footerwrapper"
		;
		background-color: #606060;
	}

	/* ---------- */
	/* !STILL BG GRID - Home page */
	/* ---------- */
	.still_BGWrapper {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: auto;
		grid-gap: .5em;
		padding: 1em .5em 4em .5em;
		background-color: white;
	}
	.still_BG {
		background-repeat: no-repeat;
		background-position: top;
		background-size: contain;
		background-color: black;
		padding-top: 56.25%;
		width: 100%;
		height: 100%;
		/* margin-bottom: -10px; */
		position: relative;
	}
	.still_BUTTON {
		display: flex;
		justify-self: center;
		position: absolute;
		bottom: 5px;
		/* left: 50%;
		transform: translate(-50%, -50%); */
	}

	/* ---------- */
	/* !STICKY BG 16x9 */
	/* ---------- */
	.stickBG {
		background-repeat: no-repeat;
		background-attachment: fixed;
		background-position-y: 140px;
		background-size: contain;
		background-color: black;
		position: relative;
		width: 100%;
		height: calc(100vw * 9/16);
	}

	/* ---------- */
	/* !STICKY ELEMENT */
	/* ---------- */
	.stickit {
		position: absolute;
	}

	/* ---------- */
	/* !GRID AUTOFILL-FIT QUICKIES */
	/* ---------- */
	.gridautofill {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
		grid-gap: .5em;
	}
	.gridautofill > img {
		width: 100%;
	}
	.gridautofit {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
		grid-gap: .5em;
	}
	.gridautofit > img {
		width: 100%;
	}

	/* #################### */
	/* !GRID SECTIONS */
	/* #################### */

	/* ---------- */
	/* !HEADERTOP */
	/* ---------- */
	.headertop {
		display: grid;
		grid-area: headertop;
		grid-template-columns: 2fr 1fr;
		width: 100%;
		padding: 2px 15px 5px 10px;
		background-color: black !important;
		font-size: 10px;
		font-family: sans-serif;
		color: white;
	}
	.headertop a, link, visited {
		color: #0e1b50;
	}
	.headertop a:hover {
		color:#F1791C;
		text-decoration:underline;
	}
	.headertop p {
		margin: 0px;
	}
	.headertoplogin {
		text-align: right;
	}

	/* ---------- */
	/* !HEADERBOTTOM */
	/* ---------- */
	.headerbottom {
		display: grid;
		grid-area: headerbottom;
		grid-template-columns: 1fr;
		grid-auto-rows: auto;
		/* background: url("../Images/Backgrounds/bg_headerbottom.jpg") no-repeat center center; */
		background: url("../Images/Stills/still_Changing_Lives_HD.png");
		background-size: contain;
		background-repeat: no-repeat;
		height: calc(99vw * 9/16);
		position: relative;
		background-position: top;
		background-color: black;
		/* padding-top: 56.25%; */
		/* margin-bottom: -10px; */
		color: white;
	}
	.headerlogodiv {
		grid-column: 1/-1;
	}
	.headerlogo {
		/* width: 15vw; */
		min-width: 90px;
		max-width: 200px;
		margin: 20px;
	}
	.headertitle {
		grid-column: 1/-1;
		text-align: center;
		font-size: 1.5em;
		font-weight:bold;
		color:#FFFFFF;
	}

	/* ---------- */
	/* !SEPBAR */
	/* ---------- */
	.sepbar {
		grid-area: sepbar;
		height: 5px;
		background: url("../Images/Backgrounds/bg_sepbar.png") no-repeat center top;
		background-size: 100% 100%;
	/* 	clear: both; */
	}

	/* ---------- */
	/* !CAROUSEL */
	/* ---------- */
	.carousel {
		grid-area: carousel;
		background-color: #363636;
		color: black;
	}

	/* ---------- */
	/* !NAV MAIN */
	/* ---------- */
	.navmain {
		grid-area: navmain;
		background: url("../Images/Backgrounds/bg_navmain.png") no-repeat center top;
		background-size: 100% 100%;
		box-shadow: 0px 3px 4px var(--shadow);
		padding-left: 2px;
		padding-right: 2px;
/* 		margin-top: 20px; */
		color: white;
		font-family: sans-serif;
		text-align: center;
	}

	/* ---------- */
	/* !SIDEBAR L */
	/* ---------- */
	.sidebarL {
		grid-area: sidebarL;
		background-color: lightgrey;
		min-width: 200px;
		padding: 20px 10px 0px 10px;
		text-align: right;
	}

	/* ---------- */
	/* !MAIN CONTENT */
	/* ---------- */
	.maincontent {
		grid-area: maincontent;
		background: url("https://www.lpmbc.org/Images/Backgrounds/bg_wrapcontent_shadow.png") no-repeat center top;
		background-size: 100% 8px;
		background-color: white;
		padding: 40px 60px 40px 60px;
	}
	.maincontent_title {
		font-family: Kaushanscript-Regular;
	/* 	font-family: Alexbrush-Regular; */
		font-size: 1.5em;
	/* 	font-weight: bold; */
		text-align: left;
		color: black;
		height: auto;
	}

	/* ---------- */
	/* !SIDEBAR R */
	/* ---------- */
	.sidebarR {
		grid-area: sidebarR;
		background-color: pink;
		min-width: 200px;
		padding: 20px 10px 0px 10px;
		text-align: left;
	}

	/* ---------- */
	/* !FOOTER */
	/* ---------- */
	.footerwrapper {
		grid-area: footerwrapper;
	}
	.footertop {
		background-color: white;
		padding: 10px 5px;
		color: black;
		text-align: center;
		border-top: 1px solid grey;
	}
	.footerbottom {
		background-color: black !important;
		padding: 5px;
		font-family: sans-serif;
		font-size: 8pt;
		color: white;
		text-align: center;
	}

	/* #################### */
	/* !PAGE CONTENT CSS */
	/* #################### */
	.pagecontent_CSSGrid {
		padding: 2em 8em 3em 8em;
	}

	/* #################### */
	/* !#### FORM CSSGrid */
	/* #################### */
	.form_CSSGrid {
		display: grid;
		grid-template-columns: [labels] auto [controls] 1fr;
		grid-auto-flow: row;
		grid-gap: 1em;
		background: #eee;
		padding: 1.2em;
	}
	.form_CSSGrid > label  {
		grid-column: labels;
		grid-row: auto;
		text-align: right;
		align-self: center;
		min-width: 125px;
	}
	.form_CSSGrid > input {
		grid-column: controls;
		grid-row: auto;
		border: none;
		padding: .5em;
		max-width: 300px;
	}
	.form_CSSGrid > select {
		grid-column: controls;
		grid-row: auto;
		max-width: 300px;
	}
	.form_CSSGrid > textarea {
		grid-column: controls;
		grid-row: auto;
		border: none;
		padding: .5em;
		max-width: 600px;

	}
	.form_CSSGrid > button {
		grid-column: controls;
		grid-row: auto;
		border: none;
		padding: .5em;
		max-width: 200px;
	}

	/* #################### */
	/* !CARDS, BUCKETS, THUMBNAILS */
	/* #################### */

	/* ---------- */
	/* !CARDS CSSGrid */
	/* ---------- */
	.cardsmain_wrapper {
		display: grid;
		grid-area: cardsmain_wrapper;
		grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
		grid-gap: 1em;
		margin: 0px 20%;
		padding: 1em 0px;
	}
	.cardsmain {
		display: block;
		background-color: #f3d9fa; /* oc-grape-1 (open color) */
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		-ms-border-radius: 5px;
		-o-border-radius: 5px;
		border-radius: 5px;
		padding: 1em;
	}
	.cardsmain_title {
		padding: .25em;
		color: white;
		background-color: #343a40; /* oc-gray-8 (open color) */
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		-ms-border-radius: 5px;
		-o-border-radius: 5px;
		border-radius: 5px;
		font-family: Helvetica, Arial, sans-serif;
		font-size: 1.5em;
		line-height: 1;
		font-weight: bold;
		margin-bottom: .25em;
	}
	.cardsmain_text {
		color: black;
		font-family: Helvetica, Arial, sans-serif;
		font-size: medium;
		line-height: normal;
		font-weight: normal;
	}
	.cardsmain > img {
		width: 100%;
		margin-bottom: .5em;
/* 		border: solid black 1px; */
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		-ms-border-radius: 5px;
		-o-border-radius: 5px;
		border-radius: 5px;
	}

	/* ---------- */
	/* !THUMBNAILS CSSGrid */
	/* ---------- */
	.thumbs_wrapper {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
		grid-gap: .5em;
		margin: 0px;
		padding: 0px;
	}

	/* ---------- */
	/* !UBER GALLERY CSSGrid */
	/* ---------- */
	.galleryThumbs_wrapper {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
		grid-gap: .25em;
		margin: 0px;
		padding: 0px 0px 1em 0px;
		background-color: white;
	}
	.galleryThumbs {
/* 		display: block; */
		color: white;
		text-align: center;
		font-size: .8em;
/*
		width: 140px;
		height: auto;
*/
		padding: 10px 5px 10px 5px;
		margin: 0px;
		background-color: black;
		-webkit-border-radius: 6px;
		-moz-border-radius: 6px;
		-ms-border-radius: 6px;
		-o-border-radius: 6px;
		border-radius: 6px;
		box-shadow: 0px 3px 4px var(--shadow);
	}
	.galleryThumbs img {
		display: block;
		padding: 0px 0px 0px 0px;
		margin: 0px auto 3px auto;
		border: 1px solid white;
	}
	.galleryPics_wrapper {
/* 		background-color: #8e8e8e; */
		background-color: black;
		border: solid black 2px;
		-webkit-border-radius: 6px;
		-moz-border-radius: 6px;
		-ms-border-radius: 6px;
		-o-border-radius: 6px;
		border-radius: 6px;
	}

	/* #################### */
	/* !OTHER CSS */
	/* #################### */

	/* ---------- */
	/* !BG ZOOM FOR CARDS */
	/* ---------- */
	.bgzoomcontainer {
/*
		width: 620px;
		height: 349px;
		max-width: 480px;
		max-height: 270px;
*/
		overflow: hidden;
		position: relative;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		-ms-border-radius: 10px;
		-o-border-radius: 10px;
		border-radius: 10px;
		cursor: pointer;
	}
	.bgzoom {
		display: block;
		padding-top: 56.3%;
		width: 100%;
		height: 100%;
		text-align: center;
		-webkit-transition: all .5s;
		-moz-transition: all .5s;
		-o-transition: all .5s;
		transition: all .5s;
	}
	.bgzoom > span {
		position:absolute;
		width:100%;
		height:100%;
		top:0;
		left: 0;
	}
	.bgzoom:before {
		content: "";
		display: none;
		height: 100%;
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background-color: rgba(52,73,94,0.75);
	}
	.bgzoomspan {
		display: none;
		font-size: 3em;
		color: #ffffff !important;
		font-family: sans-serif;
		text-align: center;
		margin: auto;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		height: 50px;
		cursor: pointer;
		text-decoration: none;
	}
	.bgzoomlabel {
		color: white;
		position: absolute;
		padding-top: .5em;
		bottom: 0px; width: 100%;
		text-align: center;
		background-color: var(--shadow);
		background-color: var(--shadow-dark);
		z-index: 1;
	}
/* 	.bgzoomcontainer:hover .bgzoom, .bgzoomcontainer:focus .bgzoom { */
	.bgzoomcontainer:hover .bgzoom, .bgzoomcontainer:focus {
		-ms-transform: scale(1.2);
		-moz-transform: scale(1.2);
		-webkit-transform: scale(1.2);
		-o-transform: scale(1.2);
		transform: scale(1.2);
	}
	.bgzoomcontainer:hover .bgzoom:before, .bgzoomcontainer:focus .bgzoom:before {
		display: block;
	}
	.bgzoomcontainer:hover bgzoomspan, .bgzoomcontainer:focus bgzoomspan {
		display: block;
	}

	/* #################### */
	/* !BREAKPOINTS - QUERIES */
	/* #################### */
	@media screen and (max-width: 768px) {
		.containerCSSG_1C {
			/* padding-top: 75px; */
		}

		.containerCSSG_2CL {
			display: grid;
			grid-template-columns: 100%;
			grid-auto-rows: auto;
			grid-template-areas:
			"headertop"
			"headerbottom"
			"navmain"
			"maincontent"
			"sidebarL"
			"cardsmain_wrapper"
			"footerwrapper"
			;
		}
		.containerCSSG_2CR {
			display: grid;
			grid-template-columns: 100%;
			grid-auto-rows: auto;
			grid-template-areas:
			"headertop"
			"headerbottom"
			"navmain"
			"maincontent"
			"sidebarR"
			"cardsmain_wrapper"
			"footerwrapper"
			;
		}
		.containerCSSG_3C {
			display: grid;
			grid-template-columns: 100%;
			grid-auto-rows: auto;
			grid-template-areas:
			"headertop"
			"headerbottom"
/* 			"carousel" */
			"navmain"
			"maincontent"
			"sidebarL"
			"sidebarR"
			"cardsmain_wrapper"
			"footerwrapper"
			;
		}
		.sidebarL, .sidebarR {
			text-align: center;
		}

		/* ---------- */
		/* !BREAKPOINT: HEADER */
		/* ---------- */
		.headerbottom {
			/* padding-bottom: 20px; */
			/* max-height: 600px; */
			display: grid;
			grid-template-columns: 1fr;
		}
		.headerlogo {
			margin: 10px;
			min-width: 80px;
			max-width: 150px;
		}
		.logoFT {
			margin: 3.75em 0px 1em 0px;

		}
		.headertitle {
			text-align: center;
			font-size: 1em;
			font-weight:bold;
			color:#FFFFFF;
		}
		.headertext {
			text-align: center;
			font-size: .5em;
			color:#FFFFFF;
			padding: 0px 1.5em 0px 1.5em;
		}

		/* ---------- */
		/* !BREAKPOINT: CAROUSEL */
		/* ---------- */
		.carousel {
			grid-area: carousel;
			background-color: #363636;
			color: black;
		}

		/* ---------- */
		/* !BREAKPOINT: MAIN CONTENT */
		/* ---------- */
		.maincontent {
			background: none;
			background-color: white;
			padding: 20px;
		}

		.pagecontent_CSSGrid {
			padding: 2em .5em 3em .5em;
		}

		/* ---------- */
		/* !BREAKPOINT CARDS CSSGrid */
		/* ---------- */
		.cardsmain_wrapper {
			margin: 0px 5%;
		}
		.cardsdiv {
			background-size: 100%;
			height: 50vw;
		}

		/* ---------- */
		/* !BREAKPOINT: ASIDE */
		/* ---------- */
		aside > hr {
			padding: 0px;
			margin: 0px;
		}
	}
}