/* ---------- */
/* !PALETTE */
/* ---------- */
:root {
	/* Palette */
	--lavender-dark: #590d80;
	--lavender-light: #9d59b8;
	--lavender-med1: #8b43ba;
	--lavender-med2: #8c44a8;
	--lavender-neutral: #774152;

	/* Menus */
	--my-pill-active: #590d80;
	--my-pill-active-hover: #8b43ba;
	--my-pill-hover: #8b43ba;
	--my-pill-bg: #774152;
	--my-pill-selected-bg: #774152;
	--my-dropdown-color: white;
	--my-dropdown-hover: #9d59b8;
	--my-dropdown-bg: #590d80;

	/* Effects */
	--shadow: rgba(0, 0, 0, 0.40);
	--shadow-dark: rgba(0, 0, 0, 0.60);
}

/* #################### */
/* !GRIDS 1C, 2CL, 2CR, 3C */
/* #################### */
@supports (grid-area: auto) {
	.containerCSSG_1C {
		display: grid;
		grid-template-columns: 100%;
		grid-auto-rows: auto;
		grid-template-areas:
		"headertop"
		"headerbottom"
		"navmain"
		"maincontent"
		"footerwrapper"
		;
		background-color: #606060;
	}

	/* #################### */
	/* !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: black;
	}
	.headertop a:hover {
		color: var(--lavender-neutral);
		text-decoration:underline;
	}
	.headertop p {
		margin: 0px;
	}
	.headertoplogin {
		text-align: right;
	}

	/* ---------- */
	/* !HEADERBOTTOM */
	/* ---------- */
	.headerbottom {
		display: grid;
		grid-area: headerbottom;
		/* grid-template-columns: 100%; */
		background: url("../Images/Backgrounds/bg_headerbottom.png") no-repeat center center;
		background-size: 100%;
		height: 55vw;
		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 {
		display: grid;
		grid-area: navmain;
		padding: 0px;
		margin: 0px;
		color: white;
		background-color: black;
		/* font-family: sans-serif; */
		font-family: 'Playfair Display', serif;
	}
	.navmain ul {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: left;
		grid-gap: 3em;
		list-style: none;
		padding: 0px 5em;
		margin: 0px;
	}
	.navmain a {
		text-decoration: none;
		padding: .3em;
	}
	.navmain a:hover {
		background-color: var(--lavender-dark);
		color: white;
	}
	.navmain a:active {
		background-color: var(--lavender-neutral);
		color: white;
	}
	.navmain .icon {
		display: none;
	}

	/* ---------- */
	/* !MAIN CONTENT */
	/* ---------- */
	.maincontent {
		display: grid;
		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 10% 40px 10%;
	}
	.maincontent_title {
		font-family: 'Allura', script;
		/* font-family: Kaushanscript-Regular; */
	/* 	font-family: Alexbrush-Regular; */
		font-size: 4em;
	/* 	font-weight: bold; */
		text-align: left;
		color: var(--lavender-dark);
		line-height: .80em;
		height: auto;
	}

	/* ---------- */
	/* !FOOTER */
	/* ---------- */
	.footerwrapper {
		display: grid;
		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; */
			padding-top: 0px;
		}

		/* ---------- */
		/* !BREAKPOINT: HEADER */
		/* ---------- */
		.headertop {
			display: grid;
		}
		.headerbottom {
			display: grid;
			grid-area: headerbottom;
			/* grid-template-columns: 1fr; */
			padding-bottom: 20px;
		}
		.maincontent_title {
			font-size: 4em;
		}
		.headerlogo {
			margin: 10px;
		}
		.logoFT {
			margin: 3.75em 0px 1em 0px;

		}
		.headertitle {
			font-family: 'Allura', script;
			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;
		}

		.navmain {
			display: block;
			position: relative;
			padding: 0px;
			margin: 0px;
			background-color: white;
		}
		.navmain a {
			flex-direction: column;
			grid-gap: 0px;
			padding: 0px;
			margin: 0px;
			display: none;
		}
		.navmain a:not(:first-child) {
			display: none;
		}
		.navmain .icon {
			display: block;
			position: absolute;
			right: 30px;
			top: 0px;
			float: right;
			font-size: 2.6em;
			line-height: 0px;
			padding: 0px;
			margin: 0px;
			background: none;
			color: var(--lavender-dark);
		}
		.navmain a:hover {
			background: none;
			color: var(--lavender-light);
		}

		.navmainresponsive {
			display: block;
			position: relative;
			background-color: white;
			float: none;
			text-align: left;
			padding: 0px;
			margin: 0px;
		}
		.navmainresponsive ul {
			list-style: none;
			font-size: 1.75em;
			font-family: 'Playfair Display', serif;
			padding: 50px 0px 1em 1em;
			margin: 0px;
		}
		.navmainresponsive .icon {
			display: block;
			position: absolute;
			right: 30px;
			top: 0px;
			float: right;
			font-size: 1.5em;
			line-height: 0px;
			padding: 0px;
			margin: 0px;
			background: none;
			color: var(--lavender-dark);
		}
		.navmainresponsive a {
			color: var(--lavender-dark);
			text-decoration: none;
		}
		.navmainresponsive a:hover {
			color: var(--lavender-light);
		}

		/* ---------- */
		/* !BREAKPOINT: MAIN CONTENT */
		/* ---------- */
		.maincontent {
			background: none;
			background-color: white;
			padding: 60px 20px 20px 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;
		}
	}
}