@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,300italic,400italic");
@import url("fontawesome-all.min.css");

/*
	Astral by HTML5 UP
	html5up.net | @ajlkn
	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/

html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;}

body {
	line-height: 1;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

	blockquote:before, blockquote:after, q:before, q:after {
		content: '';
		content: none;
	}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

body {
	-webkit-text-size-adjust: none;
}

mark {
	background-color: transparent;
	color: inherit;
}

input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

input, select, textarea {
	-moz-appearance: none;
	-webkit-appearance: none;
	-ms-appearance: none;
	appearance: none;
}

/* Row */

	.row {
		display: flex;
		flex-wrap: wrap;
		box-sizing: border-box;
		align-items: stretch;
	}

		.row > * {
			box-sizing: border-box;
		}

		.row.gtr-uniform > * > :last-child {
			margin-bottom: 0;
		}

		.row.aln-left {
			justify-content: flex-start;
		}

		.row.aln-center {
			justify-content: center;
		}

		.row.aln-right {
			justify-content: flex-end;
		}

		.row.aln-top {
			align-items: flex-start;
		}

		.row.aln-middle {
			align-items: center;
		}

		.row.aln-bottom {
			align-items: flex-end;
		}

		.row > .imp {
			order: -1;
		}

		.row > .col-1 {
			width: 8.33333%;
		}

		.row > .off-1 {
			margin-left: 8.33333%;
		}

		.row > .col-2 {
			width: 16.66667%;
		}

		.row > .off-2 {
			margin-left: 16.66667%;
		}

		.row > .col-3 {
			width: 25%;
		}

		.row > .off-3 {
			margin-left: 25%;
		}

		.row > .col-4 {
			width: 33.33333%;
		}

		.row > .off-4 {
			margin-left: 33.33333%;
		}

		.row > .col-5 {
			width: 41.66667%;
		}

		.row > .off-5 {
			margin-left: 41.66667%;
		}

		.row > .col-6 {
			width: 50%;
		}

		.row > .off-6 {
			margin-left: 50%;
		}

		.row > .col-7 {
			width: 58.33333%;
		}

		.row > .off-7 {
			margin-left: 58.33333%;
		}

		.row > .col-8 {
			width: 66.66667%;
		}

		.row > .off-8 {
			margin-left: 66.66667%;
		}

		.row > .col-9 {
			width: 75%;
		}

		.row > .off-9 {
			margin-left: 75%;
		}

		.row > .col-10 {
			width: 83.33333%;
		}

		.row > .off-10 {
			margin-left: 83.33333%;
		}

		.row > .col-11 {
			width: 91.66667%;
		}

		.row > .off-11 {
			margin-left: 91.66667%;
		}

		.row > .col-12 {
			width: 100%;
		}

		.row > .off-12 {
			margin-left: 100%;
		}

		.row.gtr-0 {
			margin-top: 0em;
			margin-left: 0em;
		}

			.row.gtr-0 > * {
				padding: 0em 0 0 0em;
			}

			.row.gtr-0.gtr-uniform {
				margin-top: 0em;
			}

				.row.gtr-0.gtr-uniform > * {
					padding-top: 0em;
				}

		.row.gtr-25 {
			margin-top: -0.3125em;
			margin-left: -0.3125em;
		}

			.row.gtr-25 > * {
				padding: 0.3125em 0 0 0.3125em;
			}

			.row.gtr-25.gtr-uniform {
				margin-top: -0.3125em;
			}

				.row.gtr-25.gtr-uniform > * {
					padding-top: 0.3125em;
				}

		.row.gtr-50 {
			margin-top: -0.625em;
			margin-left: -0.625em;
		}

			.row.gtr-50 > * {
				padding: 0.625em 0 0 0.625em;
			}

			.row.gtr-50.gtr-uniform {
				margin-top: -0.625em;
			}

				.row.gtr-50.gtr-uniform > * {
					padding-top: 0.625em;
				}

		.row {
			margin-top: -1.25em;
			margin-left: -1.25em;
		}

			.row > * {
				padding: 1.25em 0 0 1.25em;
			}

			.row.gtr-uniform {
				margin-top: -1.25em;
			}

				.row.gtr-uniform > * {
					padding-top: 1.25em;
				}

		.row.gtr-150 {
			margin-top: -1.875em;
			margin-left: -1.875em;
		}

			.row.gtr-150 > * {
				padding: 1.875em 0 0 1.875em;
			}

			.row.gtr-150.gtr-uniform {
				margin-top: -1.875em;
			}

				.row.gtr-150.gtr-uniform > * {
					padding-top: 1.875em;
				}

		.row.gtr-200 {
			margin-top: -2.5em;
			margin-left: -2.5em;
		}

			.row.gtr-200 > * {
				padding: 2.5em 0 0 2.5em;
			}

			.row.gtr-200.gtr-uniform {
				margin-top: -2.5em;
			}

				.row.gtr-200.gtr-uniform > * {
					padding-top: 2.5em;
				}

		@media screen and (max-width: 1680px) {

			.row {
				display: flex;
				flex-wrap: wrap;
				box-sizing: border-box;
				align-items: stretch;
			}

				.row > * {
					box-sizing: border-box;
				}

				.row.gtr-uniform > * > :last-child {
					margin-bottom: 0;
				}

				.row.aln-left {
					justify-content: flex-start;
				}

				.row.aln-center {
					justify-content: center;
				}

				.row.aln-right {
					justify-content: flex-end;
				}

				.row.aln-top {
					align-items: flex-start;
				}

				.row.aln-middle {
					align-items: center;
				}

				.row.aln-bottom {
					align-items: flex-end;
				}

				.row > .imp-xlarge {
					order: -1;
				}

				.row > .col-1-xlarge {
					width: 8.33333%;
				}

				.row > .off-1-xlarge {
					margin-left: 8.33333%;
				}

				.row > .col-2-xlarge {
					width: 16.66667%;
				}

				.row > .off-2-xlarge {
					margin-left: 16.66667%;
				}

				.row > .col-3-xlarge {
					width: 25%;
				}

				.row > .off-3-xlarge {
					margin-left: 25%;
				}

				.row > .col-4-xlarge {
					width: 33.33333%;
				}

				.row > .off-4-xlarge {
					margin-left: 33.33333%;
				}

				.row > .col-5-xlarge {
					width: 41.66667%;
				}

				.row > .off-5-xlarge {
					margin-left: 41.66667%;
				}

				.row > .col-6-xlarge {
					width: 50%;
				}

				.row > .off-6-xlarge {
					margin-left: 50%;
				}

				.row > .col-7-xlarge {
					width: 58.33333%;
				}

				.row > .off-7-xlarge {
					margin-left: 58.33333%;
				}

				.row > .col-8-xlarge {
					width: 66.66667%;
				}

				.row > .off-8-xlarge {
					margin-left: 66.66667%;
				}

				.row > .col-9-xlarge {
					width: 75%;
				}

				.row > .off-9-xlarge {
					margin-left: 75%;
				}

				.row > .col-10-xlarge {
					width: 83.33333%;
				}

				.row > .off-10-xlarge {
					margin-left: 83.33333%;
				}

				.row > .col-11-xlarge {
					width: 91.66667%;
				}

				.row > .off-11-xlarge {
					margin-left: 91.66667%;
				}

				.row > .col-12-xlarge {
					width: 100%;
				}

				.row > .off-12-xlarge {
					margin-left: 100%;
				}

				.row.gtr-0 {
					margin-top: 0em;
					margin-left: 0em;
				}

					.row.gtr-0 > * {
						padding: 0em 0 0 0em;
					}

					.row.gtr-0.gtr-uniform {
						margin-top: 0em;
					}

						.row.gtr-0.gtr-uniform > * {
							padding-top: 0em;
						}

				.row.gtr-25 {
					margin-top: -0.3125em;
					margin-left: -0.3125em;
				}

					.row.gtr-25 > * {
						padding: 0.3125em 0 0 0.3125em;
					}

					.row.gtr-25.gtr-uniform {
						margin-top: -0.3125em;
					}

						.row.gtr-25.gtr-uniform > * {
							padding-top: 0.3125em;
						}

				.row.gtr-50 {
					margin-top: -0.625em;
					margin-left: -0.625em;
				}

					.row.gtr-50 > * {
						padding: 0.625em 0 0 0.625em;
					}

					.row.gtr-50.gtr-uniform {
						margin-top: -0.625em;
					}

						.row.gtr-50.gtr-uniform > * {
							padding-top: 0.625em;
						}

				.row {
					margin-top: -1.25em;
					margin-left: -1.25em;
				}

					.row > * {
						padding: 1.25em 0 0 1.25em;
					}

					.row.gtr-uniform {
						margin-top: -1.25em;
					}

						.row.gtr-uniform > * {
							padding-top: 1.25em;
						}

				.row.gtr-150 {
					margin-top: -1.875em;
					margin-left: -1.875em;
				}

					.row.gtr-150 > * {
						padding: 1.875em 0 0 1.875em;
					}

					.row.gtr-150.gtr-uniform {
						margin-top: -1.875em;
					}

						.row.gtr-150.gtr-uniform > * {
							padding-top: 1.875em;
						}

				.row.gtr-200 {
					margin-top: -2.5em;
					margin-left: -2.5em;
				}

					.row.gtr-200 > * {
						padding: 2.5em 0 0 2.5em;
					}

					.row.gtr-200.gtr-uniform {
						margin-top: -2.5em;
					}

						.row.gtr-200.gtr-uniform > * {
							padding-top: 2.5em;
						}

		}

		@media screen and (max-width: 1280px) {

			.row {
				display: flex;
				flex-wrap: wrap;
				box-sizing: border-box;
				align-items: stretch;
			}

				.row > * {
					box-sizing: border-box;
				}

				.row.gtr-uniform > * > :last-child {
					margin-bottom: 0;
				}

				.row.aln-left {
					justify-content: flex-start;
				}

				.row.aln-center {
					justify-content: center;
				}

				.row.aln-right {
					justify-content: flex-end;
				}

				.row.aln-top {
					align-items: flex-start;
				}

				.row.aln-middle {
					align-items: center;
				}

				.row.aln-bottom {
					align-items: flex-end;
				}

				.row > .imp-large {
					order: -1;
				}

				.row > .col-1-large {
					width: 8.33333%;
				}

				.row > .off-1-large {
					margin-left: 8.33333%;
				}

				.row > .col-2-large {
					width: 16.66667%;
				}

				.row > .off-2-large {
					margin-left: 16.66667%;
				}

				.row > .col-3-large {
					width: 25%;
				}

				.row > .off-3-large {
					margin-left: 25%;
				}

				.row > .col-4-large {
					width: 33.33333%;
				}

				.row > .off-4-large {
					margin-left: 33.33333%;
				}

				.row > .col-5-large {
					width: 41.66667%;
				}

				.row > .off-5-large {
					margin-left: 41.66667%;
				}

				.row > .col-6-large {
					width: 50%;
				}

				.row > .off-6-large {
					margin-left: 50%;
				}

				.row > .col-7-large {
					width: 58.33333%;
				}

				.row > .off-7-large {
					margin-left: 58.33333%;
				}

				.row > .col-8-large {
					width: 66.66667%;
				}

				.row > .off-8-large {
					margin-left: 66.66667%;
				}

				.row > .col-9-large {
					width: 75%;
				}

				.row > .off-9-large {
					margin-left: 75%;
				}

				.row > .col-10-large {
					width: 83.33333%;
				}

				.row > .off-10-large {
					margin-left: 83.33333%;
				}

				.row > .col-11-large {
					width: 91.66667%;
				}

				.row > .off-11-large {
					margin-left: 91.66667%;
				}

				.row > .col-12-large {
					width: 100%;
				}

				.row > .off-12-large {
					margin-left: 100%;
				}

				.row.gtr-0 {
					margin-top: 0em;
					margin-left: 0em;
				}

					.row.gtr-0 > * {
						padding: 0em 0 0 0em;
					}

					.row.gtr-0.gtr-uniform {
						margin-top: 0em;
					}

						.row.gtr-0.gtr-uniform > * {
							padding-top: 0em;
						}

				.row.gtr-25 {
					margin-top: -0.3125em;
					margin-left: -0.3125em;
				}

					.row.gtr-25 > * {
						padding: 0.3125em 0 0 0.3125em;
					}

					.row.gtr-25.gtr-uniform {
						margin-top: -0.3125em;
					}

						.row.gtr-25.gtr-uniform > * {
							padding-top: 0.3125em;
						}

				.row.gtr-50 {
					margin-top: -0.625em;
					margin-left: -0.625em;
				}

					.row.gtr-50 > * {
						padding: 0.625em 0 0 0.625em;
					}

					.row.gtr-50.gtr-uniform {
						margin-top: -0.625em;
					}

						.row.gtr-50.gtr-uniform > * {
							padding-top: 0.625em;
						}

				.row {
					margin-top: -1.25em;
					margin-left: -1.25em;
				}

					.row > * {
						padding: 1.25em 0 0 1.25em;
					}

					.row.gtr-uniform {
						margin-top: -1.25em;
					}

						.row.gtr-uniform > * {
							padding-top: 1.25em;
						}

				.row.gtr-150 {
					margin-top: -1.875em;
					margin-left: -1.875em;
				}

					.row.gtr-150 > * {
						padding: 1.875em 0 0 1.875em;
					}

					.row.gtr-150.gtr-uniform {
						margin-top: -1.875em;
					}

						.row.gtr-150.gtr-uniform > * {
							padding-top: 1.875em;
						}

				.row.gtr-200 {
					margin-top: -2.5em;
					margin-left: -2.5em;
				}

					.row.gtr-200 > * {
						padding: 2.5em 0 0 2.5em;
					}

					.row.gtr-200.gtr-uniform {
						margin-top: -2.5em;
					}

						.row.gtr-200.gtr-uniform > * {
							padding-top: 2.5em;
						}

		}

		@media screen and (max-width: 980px) {

			.row {
				display: flex;
				flex-wrap: wrap;
				box-sizing: border-box;
				align-items: stretch;
			}

				.row > * {
					box-sizing: border-box;
				}

				.row.gtr-uniform > * > :last-child {
					margin-bottom: 0;
				}

				.row.aln-left {
					justify-content: flex-start;
				}

				.row.aln-center {
					justify-content: center;
				}

				.row.aln-right {
					justify-content: flex-end;
				}

				.row.aln-top {
					align-items: flex-start;
				}

				.row.aln-middle {
					align-items: center;
				}

				.row.aln-bottom {
					align-items: flex-end;
				}

				.row > .imp-medium {
					order: -1;
				}

				.row > .col-1-medium {
					width: 8.33333%;
				}

				.row > .off-1-medium {
					margin-left: 8.33333%;
				}

				.row > .col-2-medium {
					width: 16.66667%;
				}

				.row > .off-2-medium {
					margin-left: 16.66667%;
				}

				.row > .col-3-medium {
					width: 25%;
				}

				.row > .off-3-medium {
					margin-left: 25%;
				}

				.row > .col-4-medium {
					width: 33.33333%;
				}

				.row > .off-4-medium {
					margin-left: 33.33333%;
				}

				.row > .col-5-medium {
					width: 41.66667%;
				}

				.row > .off-5-medium {
					margin-left: 41.66667%;
				}

				.row > .col-6-medium {
					width: 50%;
				}

				.row > .off-6-medium {
					margin-left: 50%;
				}

				.row > .col-7-medium {
					width: 58.33333%;
				}

				.row > .off-7-medium {
					margin-left: 58.33333%;
				}

				.row > .col-8-medium {
					width: 66.66667%;
				}

				.row > .off-8-medium {
					margin-left: 66.66667%;
				}

				.row > .col-9-medium {
					width: 75%;
				}

				.row > .off-9-medium {
					margin-left: 75%;
				}

				.row > .col-10-medium {
					width: 83.33333%;
				}

				.row > .off-10-medium {
					margin-left: 83.33333%;
				}

				.row > .col-11-medium {
					width: 91.66667%;
				}

				.row > .off-11-medium {
					margin-left: 91.66667%;
				}

				.row > .col-12-medium {
					width: 100%;
				}

				.row > .off-12-medium {
					margin-left: 100%;
				}

				.row.gtr-0 {
					margin-top: 0em;
					margin-left: 0em;
				}

					.row.gtr-0 > * {
						padding: 0em 0 0 0em;
					}

					.row.gtr-0.gtr-uniform {
						margin-top: 0em;
					}

						.row.gtr-0.gtr-uniform > * {
							padding-top: 0em;
						}

				.row.gtr-25 {
					margin-top: -0.3125em;
					margin-left: -0.3125em;
				}

					.row.gtr-25 > * {
						padding: 0.3125em 0 0 0.3125em;
					}

					.row.gtr-25.gtr-uniform {
						margin-top: -0.3125em;
					}

						.row.gtr-25.gtr-uniform > * {
							padding-top: 0.3125em;
						}

				.row.gtr-50 {
					margin-top: -0.625em;
					margin-left: -0.625em;
				}

					.row.gtr-50 > * {
						padding: 0.625em 0 0 0.625em;
					}

					.row.gtr-50.gtr-uniform {
						margin-top: -0.625em;
					}

						.row.gtr-50.gtr-uniform > * {
							padding-top: 0.625em;
						}

				.row {
					margin-top: -1.25em;
					margin-left: -1.25em;
				}

					.row > * {
						padding: 1.25em 0 0 1.25em;
					}

					.row.gtr-uniform {
						margin-top: -1.25em;
					}

						.row.gtr-uniform > * {
							padding-top: 1.25em;
						}

				.row.gtr-150 {
					margin-top: -1.875em;
					margin-left: -1.875em;
				}

					.row.gtr-150 > * {
						padding: 1.875em 0 0 1.875em;
					}

					.row.gtr-150.gtr-uniform {
						margin-top: -1.875em;
					}

						.row.gtr-150.gtr-uniform > * {
							padding-top: 1.875em;
						}

				.row.gtr-200 {
					margin-top: -2.5em;
					margin-left: -2.5em;
				}

					.row.gtr-200 > * {
						padding: 2.5em 0 0 2.5em;
					}

					.row.gtr-200.gtr-uniform {
						margin-top: -2.5em;
					}

						.row.gtr-200.gtr-uniform > * {
							padding-top: 2.5em;
						}

		}

		@media screen and (max-width: 736px) {

			.row {
				display: flex;
				flex-wrap: wrap;
				box-sizing: border-box;
				align-items: stretch;
			}

				.row > * {
					box-sizing: border-box;
				}

				.row.gtr-uniform > * > :last-child {
					margin-bottom: 0;
				}

				.row.aln-left {
					justify-content: flex-start;
				}

				.row.aln-center {
					justify-content: center;
				}

				.row.aln-right {
					justify-content: flex-end;
				}

				.row.aln-top {
					align-items: flex-start;
				}

				.row.aln-middle {
					align-items: center;
				}

				.row.aln-bottom {
					align-items: flex-end;
				}

				.row > .imp-small {
					order: -1;
				}

				.row > .col-1-small {
					width: 8.33333%;
				}

				.row > .off-1-small {
					margin-left: 8.33333%;
				}

				.row > .col-2-small {
					width: 16.66667%;
				}

				.row > .off-2-small {
					margin-left: 16.66667%;
				}

				.row > .col-3-small {
					width: 25%;
				}

				.row > .off-3-small {
					margin-left: 25%;
				}

				.row > .col-4-small {
					width: 33.33333%;
				}

				.row > .off-4-small {
					margin-left: 33.33333%;
				}

				.row > .col-5-small {
					width: 41.66667%;
				}

				.row > .off-5-small {
					margin-left: 41.66667%;
				}

				.row > .col-6-small {
					width: 50%;
				}

				.row > .off-6-small {
					margin-left: 50%;
				}

				.row > .col-7-small {
					width: 58.33333%;
				}

				.row > .off-7-small {
					margin-left: 58.33333%;
				}

				.row > .col-8-small {
					width: 66.66667%;
				}

				.row > .off-8-small {
					margin-left: 66.66667%;
				}

				.row > .col-9-small {
					width: 75%;
				}

				.row > .off-9-small {
					margin-left: 75%;
				}

				.row > .col-10-small {
					width: 83.33333%;
				}

				.row > .off-10-small {
					margin-left: 83.33333%;
				}

				.row > .col-11-small {
					width: 91.66667%;
				}

				.row > .off-11-small {
					margin-left: 91.66667%;
				}

				.row > .col-12-small {
					width: 100%;
				}

				.row > .off-12-small {
					margin-left: 100%;
				}

				.row.gtr-0 {
					margin-top: 0em;
					margin-left: 0em;
				}

					.row.gtr-0 > * {
						padding: 0em 0 0 0em;
					}

					.row.gtr-0.gtr-uniform {
						margin-top: 0em;
					}

						.row.gtr-0.gtr-uniform > * {
							padding-top: 0em;
						}

				.row.gtr-25 {
					margin-top: -0.3125em;
					margin-left: -0.3125em;
				}

					.row.gtr-25 > * {
						padding: 0.3125em 0 0 0.3125em;
					}

					.row.gtr-25.gtr-uniform {
						margin-top: -0.3125em;
					}

						.row.gtr-25.gtr-uniform > * {
							padding-top: 0.3125em;
						}

				.row.gtr-50 {
					margin-top: -0.625em;
					margin-left: -0.625em;
				}

					.row.gtr-50 > * {
						padding: 0.625em 0 0 0.625em;
					}

					.row.gtr-50.gtr-uniform {
						margin-top: -0.625em;
					}

						.row.gtr-50.gtr-uniform > * {
							padding-top: 0.625em;
						}

				.row {
					margin-top: -1.25em;
					margin-left: -1.25em;
				}

					.row > * {
						padding: 1.25em 0 0 1.25em;
					}

					.row.gtr-uniform {
						margin-top: -1.25em;
					}

						.row.gtr-uniform > * {
							padding-top: 1.25em;
						}

				.row.gtr-150 {
					margin-top: -1.875em;
					margin-left: -1.875em;
				}

					.row.gtr-150 > * {
						padding: 1.875em 0 0 1.875em;
					}

					.row.gtr-150.gtr-uniform {
						margin-top: -1.875em;
					}

						.row.gtr-150.gtr-uniform > * {
							padding-top: 1.875em;
						}

				.row.gtr-200 {
					margin-top: -2.5em;
					margin-left: -2.5em;
				}

					.row.gtr-200 > * {
						padding: 2.5em 0 0 2.5em;
					}

					.row.gtr-200.gtr-uniform {
						margin-top: -2.5em;
					}

						.row.gtr-200.gtr-uniform > * {
							padding-top: 2.5em;
						}

		}

/* Basic */

	html {
		box-sizing: border-box;
	}

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

	body {
        background-color: #1A1A1A; /* Replace #1A1A1A with the dark hex code from your image */
        overflow-y: hidden;
    }

		body.is-preload *, body.is-preload *:before, body.is-preload *:after {
			-moz-animation: none !important;
			-webkit-animation: none !important;
			-ms-animation: none !important;
			animation: none !important;
			-moz-transition: none !important;
			-webkit-transition: none !important;
			-ms-transition: none !important;
			transition: none !important;
		}

	body, input, textarea, select {
		font-family: 'Source Sans Pro', sans-serif;
		font-weight: 300;
		color: #D3D3D3; /* Lightened from #777777 */
		font-size: 20pt;
		line-height: 1.75em;
	}

		@media screen and (max-width: 1680px) {

			body, input, textarea, select {
				font-size: 15pt;
			}

		}

		@media screen and (max-width: 1280px) {

			body, input, textarea, select {
				font-size: 14pt;
			}

		}

		@media screen and (max-width: 736px) {

			body, input, textarea, select {
				font-size: 12pt;
			}

		}

		@media screen and (max-width: 360px) {

			body, input, textarea, select {
				font-size: 11pt;
			}

		}

	strong, b, h1, h2, h3, h4, h5, h6 {
		font-weight: 400;
		color: #FFFFFF; /* Lightened from #363636 */
	}

	h1 {
		font-size: 2.4em;
		letter-spacing: -0.015em;
	}

	h2 {
		font-size: 1em;
		letter-spacing: -0.015em;
	}

	h3, h4, h5, h6 {
		font-size: 1.25em;
		letter-spacing: -0.015em;
	}

	@media screen and (max-width: 736px) {

		h1 {
			font-size: 1.75em;
		}

		h2 {
			font-size: 1.375em;
		}

		h3, h4, h5, h6 {
			font-size: 1em;
		}

	}

	blockquote {
		border-left: solid 0.5em #ddd;
		padding: 1em 0 1em 2em;
		font-style: italic;
	}

	em, i {
		font-style: italic;
	}

	hr {
		border: 0;
		border-top: solid 1px #ddd;
		padding: 1.5em 0 0 0;
		margin: 1.75em 0 0 0;
	}

	sub {
		position: relative;
		top: 0.5em;
		font-size: 0.8em;
	}

	sup {
		position: relative;
		top: -0.5em;
		font-size: 0.8em;
	}

	br.clear {
		clear: both;
	}

	p, ul, ol, dl, table, blockquote, form {
		margin-bottom: 2em;
	}

/* Table */

	table {
		width: 100%;
	}

		table.default tbody tr {
			border-bottom: solid 1px #f4f4f4;
		}

		table.default td {
			padding: 0.5em 1em 0.5em 1em;
		}

		table.default th {
			text-align: left;
			font-weight: 400;
			padding: 0.5em 1em 0.5em 1em;
		}

		table.default thead {
			border-bottom: solid 2px #f4f4f4;
		}

/* Form */

	form label {
		display: block;
		font-weight: 400;
		color: #363636;
		margin: 0 0 1em 0;
	}

	form input[type="text"],
	form input[type="email"],
	form input[type="password"],
	form select,
	form textarea {
		-webkit-appearance: none;
		appearance: none;
		border: 0;
		background: #f4f4f4;
		padding: 0.75em;
		width: 100%;
		-moz-transition: background-color .25s ease-in-out;
		-webkit-transition: background-color .25s ease-in-out;
		-ms-transition: background-color .25s ease-in-out;
		transition: background-color .25s ease-in-out;
	}

		form input[type="text"]:focus,
		form input[type="email"]:focus,
		form input[type="password"]:focus,
		form select:focus,
		form textarea:focus {
			background: #f8f8f8;
		}

	form input[type="text"],
	form input[type="email"],
	form input[type="password"],
	form select {
		line-height: 1.35em;
	}

	form ::-webkit-input-placeholder {
		color: #999;
	}

	form :-moz-placeholder {
		color: #999;
	}

	form ::-moz-placeholder {
		color: #999;
	}

	form :-ms-input-placeholder {
		color: #999;
	}

/* Section/Article */

	section, article {
		margin-bottom: 3em;
	}

		section > :last-child, section:last-child, article > :last-child, article:last-child {
			margin-bottom: 0;
		}

	header {
		margin: 0 0 1.5em 0;
	}

		header > p {
			margin: 0.5em 0 0 0;
			color: #363636;
		}

		@media screen and (max-width: 736px) {

			header {
				margin: 0 0 1em 0;
			}

		}

/* Image */

	.image {
		display: inline-block;
	}

		.image img {
			display: block;
			width: 100%;
		}

		.image.fit {
			display: block;
			width: 100%;
		}

		.image.featured {
			display: block;
			width: 100%;
			margin: 0 0 2em 0;
		}

		.image.left {
			float: left;
			margin: 0 2em 2em 0;
		}

		.image.centered {
			display: block;
			margin: 0 0 2em 0;
		}

			.image.centered img {
				margin: 0 auto;
				width: auto;
			}

/* Button */

	input[type="button"],
	input[type="submit"],
	input[type="reset"],
	button,
	.button {
		-moz-transition: background-color .25s ease-in-out;
		-webkit-transition: background-color .25s ease-in-out;
		-ms-transition: background-color .25s ease-in-out;
		transition: background-color .25s ease-in-out;
		-webkit-appearance: none;
		appearance: none;
		display: inline-block;
		background-color: #222222;
		color: #ffffff;
		border: 0;
		cursor: pointer;
		outline: 0;
		padding: 0.7em 1.5em 0.7em 1.5em;
	}

		input[type="button"]:hover,
		input[type="submit"]:hover,
		input[type="reset"]:hover,
		button:hover,
		.button:hover {
			background-color: #333333;
		}

		input[type="button"]:active,
		input[type="submit"]:active,
		input[type="reset"]:active,
		button:active,
		.button:active {
			background-color: #444444;
		}

		input[type="button"].alt,
		input[type="submit"].alt,
		input[type="reset"].alt,
		button.alt,
		.button.alt {
			background-color: #777777;
		}

			input[type="button"].alt:hover,
			input[type="submit"].alt:hover,
			input[type="reset"].alt:hover,
			button.alt:hover,
			.button.alt:hover {
				background-color: #888888;
			}

			input[type="button"].alt:active,
			input[type="submit"].alt:active,
			input[type="reset"].alt:active,
			button.alt:active,
			.button.alt:active {
				background-color: #999999;
			}

		input[type="button"].small,
		input[type="submit"].small,
		input[type="reset"].small,
		button.small,
		.button.small {
			font-size: 0.75em;
		}

		input[type="button"].large,
		input[type="submit"].large,
		input[type="reset"].large,
		button.large,
		.button.large {
			font-size: 1.25em;
			padding: 0.5em 1.25em 0.5em 1.25em;
		}

		input[type="button"].xlarge,
		input[type="submit"].xlarge,
		input[type="reset"].xlarge,
		button.xlarge,
		.button.xlarge {
			font-size: 1.5em;
			padding: 0.5em 1.25em 0.5em 1.25em;
		}

		@media screen and (max-width: 736px) {

			input[type="button"],
			input[type="submit"],
			input[type="reset"],
			button,
			.button {
				width: 100%;
			}

		}

/* List */

	ul {
		list-style: disc;
		padding-left: 1em;
	}

		ul li {
			padding-left: 0.5em;
		}

	ol {
		list-style: decimal;
		padding-left: 1.25em;
	}

		ol li {
			padding-left: 0.25em;
		}

/* Actions */

	ul.actions {
		list-style: none;
		padding-left: 0;
	}

		ul.actions li {
			display: inline-block;
			padding-left: 0;
			margin: 0 0 0 0.5em;
		}

			ul.actions li:first-child {
				margin-left: 0;
			}

		@media screen and (max-width: 736px) {

			ul.actions li {
				display: block;
				margin: 0.75em 0 0 0;
			}

				ul.actions li:first-child {
					margin-top: 0;
				}

		}

/* Icons */

	.icon {
		text-decoration: none;
		position: relative;
		text-decoration: none;
	}

		.icon:before {
			-moz-osx-font-smoothing: grayscale;
			-webkit-font-smoothing: antialiased;
			display: inline-block;
			font-style: normal;
			font-variant: normal;
			text-rendering: auto;
			line-height: 1;
			text-transform: none !important;
			font-family: 'Font Awesome 5 Free';
			font-weight: 400;
		}

		.icon.solid:before {
			font-weight: 900;
		}

		.icon.brands:before {
			font-family: 'Font Awesome 5 Brands';
		}

		.icon:before {
			line-height: inherit;
		}

		.icon > .label {
			display: none;
		}

/* Nav */

	#nav {
		text-align: center;
		height: 3em;
		cursor: default;
	}

			#nav a {
				position: relative;
				display: inline-block;
				color: #E0E0E0; /* Replace #E0E0E0 with the text hex code from your image */
				padding: 0.4em 1.6em;   /* makes it look like a button */
				font-size: 0.8em;      /* better size for text (2em is too big for words) */
				font-weight: 400; /* Add this line to make the text bolder */
				margin: 0 0.5em;
				opacity: 0.7;
				text-decoration: none;
				outline: 0;
				transition: opacity .25s ease-in-out;
			}

			#nav a.icon:before {
				padding-right: 0;
			}

			#nav a:before {
				font-size: 0.8em;
			}

			#nav a:after {
				content: '';
				display: block;
				position: absolute;
				left: 50%;
				bottom: -0.2em;
				margin-left: -0.5em;
				border-bottom: solid 0em #ffffff;
				border-left: solid 0.5em transparent;
				border-right: solid 0.5em transparent;
				-moz-transition: border-bottom-width .25s ease-in-out;
				-webkit-transition: border-bottom-width .25s ease-in-out;
				-ms-transition: border-bottom-width .25s ease-in-out;
				transition: border-bottom-width .25s ease-in-out;
			}

			#nav a span {
				display: block;
				position: absolute;
				background: #222222;
				color: #ffffff;
				top: -2.75em;
				font-size: 0.3em;
				height: 2.25em;
				line-height: 2.25em;
				left: 50%;
				opacity: 0;
				-moz-transition: opacity .25s ease-in-out;
				-webkit-transition: opacity .25s ease-in-out;
				-ms-transition: opacity .25s ease-in-out;
				transition: opacity .25s ease-in-out;
				width: 5.5em;
				margin-left: -2.75em;
			}

				#nav a span:after {
					content: '';
					display: block;
					position: absolute;
					bottom: -0.4em;
					left: 50%;
					margin-left: -0.6em;
					border-top: solid 0.6em #222222;
					border-left: solid 0.6em transparent;
					border-right: solid 0.6em transparent;
				}

			#nav a:hover {
				opacity: 1.0;
			}

				#nav a:hover span {
					opacity: 1.0;
				}

			#nav a.active {
				opacity: 1.0;
			}

				#nav a.active:after {
					border-bottom-width: 0.5em;
				}

		@media screen and (max-width: 980px) {

			#nav a span {
				display: none;
			}

		}

/* Wrapper */

	#wrapper {
		width: 100%;
		margin: 0 auto;
		min-height: 100vh;
		max-width: 100%;
		padding:2.55em 0; /* keep your reduced padding */
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: stretch;
		-moz-flex-direction: column;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
		-moz-align-items: center;
		-webkit-align-items: center;
		-ms-align-items: center;
		align-items: stretch; /* ← change this */
		-moz-justify-content: center;
		-webkit-justify-content: center;
		-ms-justify-content: center;
		justify-content: flex-start;
		-moz-transition: opacity 1s ease-in-out;
		-webkit-transition: opacity 1s ease-in-out;
		-ms-transition: opacity 1s ease-in-out;
		transition: opacity 1s ease-in-out;
	}

		body.is-preload #wrapper {
			opacity: 0;
		}

		@media screen and (max-width: 1280px) {

			#wrapper {
				padding: 3em 0;
				max-width: calc(100% - 6em);
			}

		}

		@media screen and (max-width: 980px) {

			#wrapper {
				padding: 1.5em 0;
				max-width: calc(100% - 8em);
			}

		}

		@media screen and (max-width: 736px) {

			#wrapper {
				padding: 1em 0;
				max-width: calc(100% - 2em);
			}

		}

		@media screen and (max-width: 360px) {

			#wrapper {
				padding: 1em 0;
				max-width: 100%;
			}

		}

/* Main */

	#main {
		position: relative;
		overflow: hidden;
		width: 100%;
		background: #1A1A1A; /* Match this to your dark background color */
		box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.25);
		-moz-transition: min-height 0.5s ease-in-out, max-height 0.5s ease-in-out;
		-webkit-transition: min-height 0.5s ease-in-out, max-height 0.5s ease-in-out;
		-ms-transition: min-height 0.5s ease-in-out, max-height 0.5s ease-in-out;
		transition: min-height 0.5s ease-in-out, max-height 0.5s ease-in-out;
	}

		#main > .panel {
			-moz-transition: opacity 0.25s ease-in-out;
			-webkit-transition: opacity 0.25s ease-in-out;
			-ms-transition: opacity 0.25s ease-in-out;
			transition: opacity 0.25s ease-in-out;
			margin-bottom: 0;
			position: relative;
			padding: 2em 1.5em;
			width: 100%;
		}

			#main > .panel.inactive {
				opacity: 0;
			}

			@media screen and (max-width: 736px) {

				#main > .panel {
					padding: 2em 1.5em 1.5em 1.5em;
				}

			}

			#main > .panel.intro {
				padding: 0;
				height: 20em;
				display: -moz-flex;
				display: -webkit-flex;
				display: -ms-flex;
				display: flex;
				-moz-flex-direction: row;
				-webkit-flex-direction: row;
				-ms-flex-direction: row;
				flex-direction: row;
				-moz-align-items: center;
				-webkit-align-items: center;
				-ms-align-items: center;
				align-items: center;
			}

				#main > .panel.intro .pic {
					text-decoration: none;
					position: relative;
					-moz-flex-grow: 0;
					-webkit-flex-grow: 0;
					-ms-flex-grow: 0;
					flex-grow: 0;
					-moz-flex-shrink: 0;
					-webkit-flex-shrink: 0;
					-ms-flex-shrink: 0;
					flex-shrink: 0;
					width: 17em;
					height: 100%;
				}

					#main > .panel.intro .pic:before {
						content: '';
						position: absolute;
						top: 0;
						left: 0;
						background: url("images/overlay.png");
						width: 100%;
						height: 100%;
						z-index: 1;
					}

					#main > .panel.intro .pic img {
						position: relative;
						display: block;
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						-moz-object-fit: cover;
						-webkit-object-fit: cover;
						-ms-object-fit: cover;
						object-fit: cover;
						-moz-object-position: center;
						-webkit-object-position: center;
						-ms-object-position: center;
						object-position: center;
					}

					#main > .panel.intro .pic .arrow {
						display: block;
						position: absolute;
						right: 0;
						top: 50%;
						margin-top: -1.375em;
						width: 2.75em;
						height: 2.75em;
						background: #000;
						background: rgba(0, 0, 0, 0.75);
						color: #ffffff;
						text-align: center;
						line-height: 2.75em;
						font-size: 1.5em;
						z-index: 1;
						-moz-transition: width .15s ease-in-out, padding-right .15s ease-in-out;
						-webkit-transition: width .15s ease-in-out, padding-right .15s ease-in-out;
						-ms-transition: width .15s ease-in-out, padding-right .15s ease-in-out;
						transition: width .15s ease-in-out, padding-right .15s ease-in-out;
					}

						#main > .panel.intro .pic .arrow:before {
							position: relative;
							padding-right: 0;
							top: 0.125em;
						}

						#main > .panel.intro .pic .arrow span {
							display: block;
							text-indent: -9999px;
						}

					#main > .panel.intro .pic:hover .arrow {
						width: 3em;
						padding-right: 0.25em;
					}

				#main > .panel.intro header {
					-moz-flex-grow: 1;
					-webkit-flex-grow: 1;
					-ms-flex-grow: 1;
					flex-grow: 1;
					-moz-flex-shrink: 1;
					-webkit-flex-shrink: 1;
					-ms-flex-shrink: 1;
					flex-shrink: 1;
					padding: 3.5em 2.5em;
					margin-bottom: 0;
					width: 100%;
				}

					#main > .panel.intro header h1 {
						line-height: 1.25em;
						margin-bottom: 0;
					}

					#main > .panel.intro header p {
						letter-spacing: -0.015em;
						font-size: 1em;
						margin: 0.25em 0 1em 0;
					}

				@media screen and (max-width: 980px) {

					#main > .panel.intro {
						-moz-flex-direction: column;
						-webkit-flex-direction: column;
						-ms-flex-direction: column;
						flex-direction: column;
						height: auto;
					}

						#main > .panel.intro .pic {
							height: 25em;
							width: 100%;
						}

						#main > .panel.intro header {
							padding: 4em;
							text-align: center;
						}

				}

				@media screen and (max-width: 736px) {

					#main > .panel.intro .pic {
						height: 20em;
					}

					#main > .panel.intro header {
						padding: 2.75em 2em 2.5em 2em;
					}

						#main > .panel.intro header p {
							font-size: 1em;
							margin: 0.25em 0 0 0;
						}

				}

/* Footer */

		/* Header margin */
			#nav {
			position: fixed;
			top: 0em;   /* smaller space top margin Menu */
			left: 0;
			width: 100%;
			z-index: 1000;
		}

		#wrapper {
			margin-top: 0em;
		}

		/* Make panel scroll inside, not whole popup */
		#work,
		#contact {
			max-height: 86vh;
			overflow-y: auto;
		}

		#wrapper {
			min-height: 100vh;
		}
			/* ======= */
			
		
		#home {
    width: 45em;
    max-width: 100%;
    margin: 0 auto;
}

		#work,
		#contact {
			width: 100%;
			margin: 0;
			border-radius: 0;
		}

		/* open fullsize work */

	

		.filter {
			cursor: pointer;
			text-decoration: none;
		}

		.filter.active {
			text-decoration: underline;
		}

		/* Lightbox */

		#lightbox {
			display: none;
			position: fixed;
			z-index: 9999;
			inset: 0;
			background: rgba(0,0,0,0.85);

			display: none;
			justify-content: center;
			align-items: center;
		}

		#lightbox img {
			max-width: 95%;
			max-height: 95%;
			border-radius: 10px;
		}

		.close-lightbox {
			position: absolute;
			top: 25px;
			right: 40px;
			font-size: 40px;
			color: white;
			cursor: pointer;
			z-index: 10000;
		}
		/* end lightbox */

		#lightbox.active {
			display: flex;
		}

		/* ===== Clean Fixed 3-Column Grid ===== */

		.gallery {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 8px; /* same gap vertical + horizontal */
		}

		.gallery .item {
			height: 290px; /* fixed height */
			overflow: hidden;
			border-radius: 2px;
			cursor: pointer;
		}

		.gallery .item img {
			width: 100%;
			height: 100%;
			object-fit: cover; /* crop image */
			display: block;
			transform: scale(1.2); /* Scale image inside THUMBNAIL */
			transition: transform 0.3s ease;
		}

		.gallery .item:hover img {
			transform: scale(1.05);
		}
		/* Hover */
		.gallery .item:hover img {
			transform: scale(1.05);
		}

		/* iPad */
		@media (max-width: 980px) {
			.gallery {
				grid-template-columns: repeat(2, 1fr);
			}
		}

		/* Phone */
		@media (max-width: 600px) {
			.gallery {
				grid-template-columns: 1fr;
			}

			.gallery .item {
				height: 220px !important;
			}
		}

		@media (max-width: 600px) {
			.gallery {
				gap: 12px;
			}
		}
		/* Hover effect */
		.gallery .item img {
			transition: transform 0.4s ease;
		}

		.gallery .item:hover img {
			transform: scale(1.05);
		}

		/* ============================= */
		/*  FIX WORK PANEL HEIGHT        */

		#work.panel {
			min-height: 750px;
		}

		/* ============================= */
		/* ANIMATION PANEL HEIGHT        */

		#animation.panel {
			min-height: 750px;
		}

		/* Make sure main allows internal scrolling */
		#main {
			overflow: visible;
		}

		#work,
		#personal {
			max-height: 600px;
			overflow-y: auto;
			padding-right: 10px;
		}

		#animation {
			max-height: 600px;
			overflow-y: auto;
			padding-right: 10px;
		}

		/* ============================= */
		/* FIX PERSONAL TAB BOTTOM GAP  */

		#personal {
			min-height: 750px !important;
			height: auto !important;
		}

		#personal .inner {
			padding-bottom: 0 !important;
		}

		#personal .gallery-personal {
			margin-bottom: 0 !important;
		}

		/* ============================= */
		/* CONTACT TAB FIX ONLY         */

		#contact {
			max-height: 80vh;     /* keeps popup controlled */
			overflow-y: auto;     /* scroll inside contact */
			padding-right: 10px;  /* prevents scrollbar overlap */
		}

		/* ============================= */
		/* Top Left Corner Logo */

		.top-logo {
			position: fixed;
			top: 4px;
			left: 20px;
			z-index: 1100; /* above nav */
			display: block;
		}

		.top-logo img {
			height: 45px;
			width: auto;
			display: block;
		}

		/* iPad */
		@media (max-width: 980px) {
			.top-logo img {
				height: 40px;
			}
		}

		/* Phone */
		@media (max-width: 600px) {
			.top-logo img {
				height: 35px;
			}
		}

		/* Reduce size of filter subtitle text */
		.filter {
			font-size: 0.8em;   /* smaller text */
		}

		/* Optional: slightly smaller on phone */
		@media (max-width: 600px) {
			.filter {
				font-size: 0.75em;
			}
		}

	/* Reduce padding around CLIENT WORK title */
		#work.panel,
		#personal.panel {
			padding-top: 0.4em;
			padding-bottom: 0em;
		}

		/* Short centered line under CLIENT WORK */
		#work header h2::after,
		#personal header h2::after {
			content: "";
			display: block;
			width: 60px;          /* line length */
			height: 2px;          /* thickness */
			background: #999;     /* color */
			margin: 0.6em auto 0 auto;  /* space above line, centered */
		}

		/* Social icons spacing */
		.nav-social {
			display: flex;
			gap: 18px;   /* controls space between icons */
		}

		/* Animation page: 2 thumbnails per row */
		#animation .gallery {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 0.5em;
		}

		#animation .gallery .item {
			height: 400px; /* fixed height */
			overflow: hidden;
			border-radius: 2px;
			cursor: pointer;
		}
		/*mobile only) */

		@media (max-width: 768px) {

		#wrapper {
				padding-top: 80px;
			}

			#main {
				margin-top: 20px;
			}
		}
		@media (max-width: 768px) {

		#nav {
				display: none;
			}

		}
		/* Hamburger icon */
		.menu-toggle{
			display:none;
			position:absolute;
			right:20px;
			top:20px;
			font-size:28px;
			cursor:pointer;
			color:white;
		}

		@media (max-width:768px){

			.menu-toggle{
				display:block;
			}

		}
		/* Drop down menu */
		.mobile-nav{
			position:absolute;
			top:70px;
			right:20px;
			background:rgba(0,0,0,0.9);
			padding:15px;
			border-radius:8px;
			display:none;
			flex-direction:column;
			gap:10px;
		}

		.mobile-nav a{
			color:white;
			text-decoration:none;
		}

/* ================================================================== */
/* RESPONSIVE LAYOUT FIXES                                            */

		/* 1. Lock the page view so the background never scrolls, only the panel */
		html, body {
			height: 100vh;
			overflow: hidden !important; 
		}

		#wrapper {
			height: 100vh !important;
			min-height: 100vh !important;
			padding: 60px 0 0px 0 !important; /* Space for Header (60px) and Footer (50px) */
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0 !important;
		}

		#nav {
			top: 10px; 
			z-index: 1000;
		}

		#footer {
			bottom: 0;
			height: 50px;
			padding: 0 !important;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		/* 2. Make the panel scale dynamically and handle its own scrolling */
		#main {
			max-height: 100% !important; /* Keep perfectly within wrapper */
			min-height: 0 !important; 
			display: flex;
			flex-direction: column;
			width: 100%;
		}

		.panel {
			/* 110px accounts for the 60px top padding + 50px bottom padding of wrapper */
			max-height: calc(100vh - 110px) !important; 
			min-height: 0 !important; 
			height: auto !important;
			overflow-y: auto !important; 
			padding-right: 15px !important; 
		}

		/* Override any specific panel hardcoded heights */
		#work.panel, #animation.panel, #personal.panel, #home.panel, #contact.panel {
			min-height: 0 !important;
			height: auto !important;
			max-height: calc(100vh - 110px) !important;
		}

		/* 3. Mobile specific adjustments & Hamburger Menu */
		.menu-toggle {
			display: none;
			position: fixed;
			right: 20px;
			top: 15px;
			font-size: 28px;
			cursor: pointer;
			color: white;
			z-index: 1200;
		}

		@media (max-width: 768px) {
			.top-logo img {
				margin-top: 5px; 
			}
			
			.menu-toggle {
				display: block;
			}

			/* Convert the main nav into a mobile dropdown */
			#nav {
				display: none; /* Hide default nav */
				position: fixed;
				top: 60px;
				right: 20px;
				left: auto;
				width: 200px;
				background: rgba(0, 0, 0, 0.9);
				padding: 15px;
				border-radius: 8px;
				flex-direction: column;
				gap: 10px;
			}

			/* This class is toggled via JavaScript */
			#nav.open {
				display: flex !important;
			}

			#nav a {
				display: block;
				margin: 5px 0;
				padding: 10px;
				text-align: center;
			}

			/* Adjust main sizing for mobile header */
			#wrapper {
				padding: 70px 0 50px 0 !important; 
			}
			
			.panel {
				max-height: calc(100vh - 120px) !important; 
			}
		}
		/* ================================================================== */
		/* REMOVE SIDE MARGINS ON MOBILE/TABLET                               */
		@media (max-width: 980px) {
			#wrapper {
				max-width: 100% !important;
				width: 100% !important;
			}
			
			/* Optional: slightly reduce the inner padding of the white box on phones so content fits better */
			#main > .panel {
				padding-left: 15px !important;
				padding-right: 15px !important;
			}
		}

		/* ================================================================== */
		/* MOBILE MENU & GAP FIXES                                            */

		/* 1. Remove the side gaps on iPads and Phones */
		@media screen and (max-width: 980px) {
			#wrapper {
				max-width: 100% !important;
				width: 100% !important;
				padding-left: 0 !important;
				padding-right: 0 !important;
			}
		}

		/* 2 & 3. Fix Menu Height and Opacity */
		@media (max-width: 768px) {
			#nav.open {
				display: flex !important;
				height: auto !important; /* Overrides the 3em height limit so the full menu shows */
				
				/* Change the 0.7 below to adjust opacity. 
				0.9 is very dark, 0.5 is half see-through, 1.0 is completely solid */
				background: rgba(0, 0, 0, 0.7) !important; 
			}
		}

		/* ================================================================== */
		/* LOCK HEIGHT FOR GALLERY PANELS ONLY (UPDATED)                      */

		/* 1. Let the main container shrink or grow based on the page you click */
		#main {
			height: auto !important; 
		}

		/* 2. Force ONLY the gallery panels to stretch to the maximum space */
		#work.panel, 
		#personal.panel, 
		#animation.panel {
			height: calc(100vh - 60px) !important;
			min-height: calc(100vh - 60px) !important;
			max-height: calc(100vh - 60px) !important;
			overflow-y: auto !important; 
		}

		/* 3. Guarantee the About and Contact pages only take up as much room as their content */
		#home.panel, 
		#contact.panel {
			height: auto !important;
			min-height: 0 !important;
		}

		/* 4. Mobile: Adjust for the slightly larger mobile header */
		@media (max-width: 768px) {
			#work.panel, 
			#personal.panel, 
			#animation.panel {
				height: calc(100vh - 70px) !important;
				min-height: calc(100vh - 70px) !important;
				max-height: calc(100vh - 70px) !important;
			}
		}

		/* ================================================================== */
		/* ALIGN SHORT PANELS TO THE TOP                                      */
		#wrapper {
			justify-content: flex-start !important; 
		}
				
		
		/* ================================================================== */
		/* FIX MOBILE CONTENT OVERFLOW                                        */

		/* 1. Stop content from spilling outside the white background box */
		#main {
			overflow: hidden !important;
		}

		/* 2. Adjust the panel heights on phones to account for the 20px margin */
		@media (max-width: 768px) {
			#work.panel, 
			#personal.panel, 
			#animation.panel {
				/* 140px accounts exactly for: header (70px) + margin (20px) + footer (50px) */
				height: calc(100vh - 140px) !important;
				min-height: calc(100vh - 140px) !important;
				max-height: calc(100vh - 140px) !important;
				
				/* Forces padding to stay inside the height limit */
				box-sizing: border-box !important;
				
				/* Adds a little breathing room at the bottom so the last image isn't cut off */
				padding-bottom: 30px !important; 
			}
		}

		/* ================================================================== */
		/* REDUCE SPACING IN MOBILE DROPDOWN MENU                             */
		@media (max-width: 768px) {
			#nav {
				gap: 0 !important; /* Removes the structural gap between items */
				padding: 15px 10px !important; /* Keeps the black box neat */
			}

			#nav a {
				margin: 0 !important; /* Removes the invisible outer spacing */
				padding: 12px 0 !important; /* Controls the exact top/bottom space for each link */
				line-height: 1 !important; /* Prevents text from having extra invisible height */
			}
		}

		/* ================================================================== */
		/* CENTER TEXT ON ABOUT PAGE (ALL SCREENS)                            */
		#home.panel.intro header {
			text-align: center !important;
		}

		/* ================================================================== */
		/* INCREASE PADDING ON ABOUT PAGE TO SHORTEN TEXT LINES               */

		/* Desktop view: Large padding on the left and right */
		#home.panel.intro header {
			padding-left: 14em !important;
			padding-right: 14em !important;
		}

		/* Mobile/Tablet view: Reduce padding so text doesn't get squeezed too tight on small screens */
		@media (max-width: 768px) {
			#home.panel.intro header {
				padding-left: 2em !important;
				padding-right: 2em !important;
			}
		}

		/* ================================================================== */
		/* PREVENT CONTENT JUMPING WHEN SCROLLBAR DISAPPEARS                  */
		#work.panel, 
		#personal.panel, 
		#animation.panel {
			/* Forces the vertical scrollbar track to remain visible, keeping width static */
			overflow-y: scroll !important; 
			
			/* Modern browsers use this to reserve the space invisibly */
			scrollbar-gutter: stable !important; 
		}

		/* ================================================================== */
		/* ADVANCED LIGHTBOX NAVIGATION  & CLOSE RANGE FIX                    */

		/* 1. Direct fix for 'X' button range (forces it above any nav controls) */
		#lightbox .close-lightbox {
			z-index: 10003 !important; /* Higher than visual arrows & regions */
			font-size: 30px; /* Adjust size if needed */
			padding: 10px; /* Creates a large, consistent hit-box */
			margin: 10px; /* Distance from top-right corner of screen */
			cursor: pointer;
		}

		/* 2. Visual Arrows (Left/Right) - will hang outside regions slightly */
		#lightbox .prev-image,
		#lightbox .next-image {
			font-size: 60px; /* Large arrows */
			color: white;
			opacity: 0; /* Hidden by default */
			transition: opacity 0.3s ease;
		}

		/* 3. Invisible Click Regions (Positioned over the left and right image content) */
		#lightbox .prev-region,
		#lightbox .next-region {
			position: absolute;
			top: 15%; /* Large margins on top and bottom to clear 'X' */
			bottom: 15%;
			width: 20%; /* Width as in screenshot, over image only */
			z-index: 10002; /* Sits above main image, below close-lightbox */
			display: flex;
			align-items: center; /* Vertically center arrows */
			cursor: pointer; /* Clickable resize cursors */
		}

		#lightbox .prev-region { left: 0; justify-content: flex-start; padding-left: 20px; cursor: w-resize; }
		#lightbox .next-region { right: 0; justify-content: flex-end; padding-right: 20px; cursor: e-resize; }

		.img-nav-wrapper {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100vh; /* Locks the wrapper exactly to the window height */
            padding: 50px 16px; /* Safe space for the 'X' button and caption */
            box-sizing: border-box;
        }

        /* 4. Ensure image fills its container properly and navigation follows it */
        #lightbox-img,
        #lightbox-video {
            display: block;
            max-width: 100%;
            max-height: 100%; /* Forces image to respect the wrapper's strict boundaries */
            width: auto !important;
            height: auto !important;
            border-radius: 10px;
            object-fit: contain; /* Guarantees the entire image fits without cropping */
            flex-shrink: 1; /* Prevents the image from stretching the flexbox */
        }

		/* 5. Visual/Hover Feedback */

		/* Hover over the whole regions triggers standard semi-transparent state for arrows */
		#lightbox .prev-region:hover .prev-image,
		#lightbox .next-region:hover .next-image {
			opacity: 0.5;
		}

		/* Hover over the arrows directly makes them fully white and full opacity */
		#lightbox .prev-image:hover,
		#lightbox .next-image:hover {
			opacity: 1 !important; /* Force full opacity on specific hover */
		}

		/* ================================================================== */
		/* VIDEO GRID SUPPORT                                                 */
		.gallery .item video {
			width: 100%;
			height: 100%;
			object-fit: cover; /* Crops the video perfectly to the box */
			display: block;
			transition: transform 0.4s ease;
		}

		/* Add the hover zoom effect to videos too */
		.gallery .item:hover video {
			transform: scale(1.05);
		}

		/* ================================================================== */
		/* VIDEO THUMBNAIL OVERLAYS (ANIMATION PAGE)                          */

		/* Ensure the overlay doesn't spill outside the grid item */
		.gallery .item {
			position: relative; 
		}

		/* 1. The Dark Tint & Layout */
		.video-overlay {
			position: absolute;
			inset: 0; /* Stretches to fill the whole box */
			background: rgba(0, 0, 0, 0.4); /* Dark tint to make white text pop */
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			color: white;
			text-align: center;
			padding: 20px;
			box-sizing: border-box;
			transition: background 0.3s ease;
			
			/* CRITICAL: This lets clicks pass straight through the text to your JavaScript! */
			pointer-events: none; 
		}

		/* 2. Slightly darken the box when hovering */
		.gallery .item:hover .video-overlay {
			background: rgba(0, 0, 0, 0.6);
		}

		/* 3. The Video Title */
		.video-overlay h3 {
			font-size: 22px;
			font-weight: 600;
			margin-bottom: 12px;
			color: white;
			text-shadow: 0px 2px 4px rgba(0,0,0,0.5); /* Helps readability */
		}

		/* 4. The Play Button Text & Icon */
		.video-overlay .play-indicator {
			font-size: 16px;
			display: flex;
			align-items: center;
			gap: 8px; /* Space between icon and text */
			text-transform: uppercase;
			letter-spacing: 1px;
			border-bottom: 1px solid white; /* The little underline from your screenshot */
			padding-bottom: 2px;
		}

		.video-overlay .play-indicator i {
			font-size: 24px; /* Makes the play circle icon larger */
		}

		/* ================================================================== */
		/* LIGHTBOX TITLE CAPTION                                             */
		#lightbox-caption {
			width: 100%;
			text-align: center;
			color: white;
			font-size: 18px;
			font-weight: 400;
			margin-top: 15px; /* Creates the gap between the video controls and the text */
			letter-spacing: 1px;
			display: none; /* Hidden by default until JavaScript turns it on */
		}

		/* ================================================================== */
		/* PERFECT DIAMOND & PANEL ALIGNMENT FIX                              */

		@media (min-width: 769px) {
			/* 1. Pin nav to the very top and lock its height to exactly 60px */
			#nav {
				top: 0 !important;
				height: 60px !important;
				display: flex !important;
				justify-content: center !important;
				align-items: center !important;
			}

			/* 2. Make the links fill the entire 60px height to create a solid boundary */
			#nav a {
				display: inline-flex !important;
				align-items: center !important;
				height: 100% !important;
				padding-top: 0 !important;
				padding-bottom: 0 !important;
			}

			/* 3. Redraw the diamond in pixels and pin it to the exact bottom edge */
			#nav a:after {
				bottom: -1px !important; /* -1px perfectly overlaps the panel to hide rendering gaps */
				border-left: solid 5px transparent !important;
				border-right: solid 5px transparent !important;
				margin-left: -5px !important; 
			}

			#nav a.active:after {
				border-bottom-width: 6px !important; /* Heigh of diamond */
				border-bottom-color: #ffffff !important;
			}

			/* 4. Ensure the wrapper starts exactly where the nav ends (60px) */
			#wrapper {
				padding-top: 60px !important;
			}
		}

		/* 5. Hide the diamond on mobile where the menu becomes a vertical dropdown */
		@media (max-width: 768px) {
			#nav a:after {
				display: none !important;
			}
		}

		/* ================================================================== */
		/* FIX PANEL SIDE GAPS ON MEDIUM SCREENS                              */
		@media screen and (max-width: 1280px) {
			#wrapper {
				max-width: 100% !important;
				width: 100% !important;
				padding-left: 0 !important;
				padding-right: 0 !important;
			}
		}

		/* ================================================================== */
		/* SHOW VIDEO TITLE & PLAY BUTTON ONLY ON HOVER                       */

		/* 1. Hide the overlay by default, but keep it ready to fade in */
		.gallery .item .video-overlay {
			opacity: 0 !important;
			transition: opacity 0.3s ease, background 0.3s ease !important;
		}

		/* 2. Fade it in to full visibility on hover (desktop) or touch (mobile) */
		.gallery .item:hover .video-overlay,
		.gallery .item:active .video-overlay {
			opacity: 1 !important;
			background: rgba(0, 0, 0, 0.6) !important; /* Keeps your dark tint readability */
		}

		/* ================================================================== */
		/* MOBILE FOOTER SPACING & IPHONE ADDRESS BAR SAFEGUARD               */
		@media (max-width: 768px) {
			#footer {
				/* Built-in Apple variable to prevent the Safari address bar from covering it */
				padding-bottom: env(safe-area-inset-bottom) !important;
			}
			
			#footer .copyright {
				/* Shift the text and icons down away from the white panel edge */
				position: relative;
				top: 4px; 
			}
		}

		/* ================================================================== */
		/* ADJUST TEXT SIZE, SPACING, AND WIDTH IN 'ABOUT' TAB                */

		/* 1. Desktop and iPad */
		#home.panel.intro header p {
			font-size: 0.7em !important;       /* Change your text size here */
			line-height: 1.5 !important;       /* This fixes the weird top/bottom line spacing */
			max-width: 700px !important;       /* This shrinks the paragraph width (change number as needed) */
			margin: 0 auto 1.5em auto !important; /* This keeps the narrower paragraph perfectly centered */
		}

		/* 2. Mobile (Phones) */
		@media (max-width: 768px) {
			#home.panel.intro header p {
				font-size: 1em !important;     /* Mobile text size */
				line-height: 1.4 !important;   /* Slightly tighter line spacing for small screens */
				max-width: 90% !important;     /* Lets it fill most of the screen on phones */
			}
		}
		

		/* ================================================= */
		/* HIGHLIGHT SLIDESHOW (HOME TAB)                    */

		.highlight-gallery {
			position: relative;
			width: 100%;
			height: 100%;
			overflow: hidden;
		}

		.highlight-gallery .slide {
			position: absolute;
			inset: 0;
			opacity: 0;
			transition: opacity 1s ease-in-out;
		}

		.highlight-gallery .slide.active {
			opacity: 1;
			z-index: 2;
		}

		.highlight-gallery img {
			width: 100%;
			height: 100%;
			object-fit: cover;       /* center + crop */
			object-position: center; /* always centered */
			display: block;
		}
		/* =============================== */
		/* HERO SLIDESHOW                  */
		/* =============================== */

		.highlight-gallery {
			position: relative;
			width: 100%;
			height: 100%;
			overflow: hidden;
		}

		.highlight-gallery .slide {
			position: absolute;
			inset: 0;
			opacity: 0;
			transition: opacity 1s ease;
		}

		.highlight-gallery .slide.active {
			opacity: 1;
			z-index: 2;
		}

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

		/* Navigation arrows */

		.slide-nav {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);

			width: 50px;
			height: 50px;
			padding: 0;                 /* remove browser padding */

			display: flex;              /* center arrow perfectly */
			align-items: center;
			justify-content: center;

			border: none;
			background: rgba(255,255,255,0.15);
			color: #333;

			font-size: 28px;
			line-height: 1;

			cursor: pointer;
			z-index: 5;

			border-radius: 6px;

			transition: background 0.2s ease;
		}

		.slide-nav:hover {
			background: rgba(255,255,255,0.65);
		}

		.slide-nav.prev {
			left: 20px;
		}

		.slide-nav.next {
			right: 20px;
		}

		/* Mobile optimization */

		@media screen and (max-width: 768px) {

			.slide-nav {
				width: 40px;
				height: 40px;
				font-size: 22px;
			}

		}

		/* REDUCE GAP BETWEEN LINE AND FILTERS (CLIENT & PERSONAL ART)        */

		#work header,
		#personal header {
			margin-bottom: 0.5em !important; /* Reduced from the default 1.5em */
		}

		/* REDUCE TITLE AND SUBTITLE TEXT SIZE (CLIENT & PERSONAL ART)        */

		/* 1. Reduce the main titles (CLIENT ART / PERSONAL ART) */
		#work header h2,
		#personal header h2 {
			font-size: 0.7em !important; /* The default is 1em. Drop this to 0.7em or lower if you want it even smaller */
		}

		/* 2. Reduce the subtitle container (This shrinks the "|" separators) */
		#work header + div,
		#personal header + div {
			font-size: 0.6em !important; /* The default was basically 1em. Adjust this to find the perfect size */
		}

		/* 3. Make sure the filter links match the new container size */
		#work .filter,
		#personal .filter {
			font-size: 1.2em !important; /* This forces the links to perfectly inherit the 0.7em size from the rule above */
			color: #E0E0E0 !important; /* This forces the links to match your header text */
            transition: color 0.2s ease; /* Adds a smooth fade if you add hover effects later */
		}

		/*  */
/* REDUCE GAP BETWEEN FILTERS AND IMAGE GRID                          */

		#work header + div,
		#personal header + div {
			margin-bottom: 10px !important; /* Overrides the default 30px gap */
		}

		/* EMAIL BOX BUTTON (PORTFOLIO TAB)                                   */

		.email-box {
			display: inline-block;
			background-color: #404044; 
			color: #ffffff !important; 
			text-decoration: none;
			padding: 0.4em 1.5em;
			border-radius: 6px;
			margin-top: 10px;
			font-size: 0.65em;
			font-weight: 400;
			transition: background-color 0.25s ease-in-out, transform 0.2s ease;
			
			/* Prevents the link from dragging so you can highlight text */
			-webkit-user-drag: none;
			user-select: text;
			-webkit-user-select: text;
		}

		/* Space between the icon and the email text */
		.email-box i {
			margin-right: 8px;
		}

		/* Hover effect */
		.email-box:hover {
			background-color: #444444; 
			transform: scale(1.02); 
		}

		/* ================================================================== */
		/* STRICT 2-COLUMN GRID FOR PORTFOLIO TAB                             */

		/* The main invisible grid container */
		.portfolio-grid-container {
			display: grid;
			grid-template-columns: 1fr 1fr; /* Creates exactly two equal 50/50 columns */
			gap: 3em;                       /* Creates a fixed space between the columns */
			width: 100%;
			align-items: center;            /* Vertically centers both columns */
			padding: 2em 4em;               /* Breathing room around the edges */
			box-sizing: border-box;
		}

		/* The Left Box */
		.portfolio-left {
			text-align: left; 
			/* You can now adjust padding here safely! It will NOT push the right box. */
			padding-right: 1em; 
		}

		/* Make paragraph text slightly smaller to fit nicely */
		.portfolio-left p {
			font-size: 0.7em; 
			line-height: 1.6;
			margin-bottom: 1.5em;
		}

		/* The Right Box */
		.portfolio-right {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			gap: 1.5em; /* Space between the two buttons */
		}

		/* The Buttons */
		.portfolio-right .button {
			text-align: center;
			width: 100%;
			max-width: 18em;
			font-size: 1em;
			font-weight: 400;
		}

		/* Mobile View: Stack them vertically on iPads and Phones */
		@media (max-width: 980px) {
			.portfolio-grid-container {
				grid-template-columns: 1fr; /* Switches to 1 single column */
				padding: 2em;
				text-align: center;
			}
			.portfolio-left {
				text-align: center; /* Center the text on mobile */
				padding-right: 0;
			}
		}

		/* ================================================================== */
		/* CUSTOM PORTFOLIO BUTTON BACKGROUNDS                                */

		/* Button 1: Background Artist Portfolio */
		.portfolio-right .custom-button-1 {
			background-image: url('../../images/btn-top.jpg'); 
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
			
			color: #ffffff !important; 
			text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8); 
			border: none;
			
			/* This makes the growing effect smooth (0.3 seconds) */
			transition: transform 0.3s ease, background-image 0.3s ease; 
		}

		/* Button 2: 2D Artist Portfolio */
		.portfolio-right .custom-button-2 {
			/* Don't forget to update this image name! */
			background-image: url('../../images/btn-bottom.jpg'); 
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
			
			color: #ffffff !important;
			text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8);
			border: none;
			
			/* This makes the growing effect smooth (0.3 seconds) */
			transition: transform 0.3s ease, background-image 0.3s ease;
		}

		/* Hover effect: Dark tint AND grow 5% larger for Button 1 */
		.portfolio-right .custom-button-1:hover {
			background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../../images/btn-top.jpg');
			transform: scale(1.05); /* Scales the entire button up by 5% */
		}

		/* Hover effect: Dark tint AND grow 5% larger for Button 2 */
		.portfolio-right .custom-button-2:hover {
			background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../../images/btn-bottom.jpg');
			transform: scale(1.05); /* Scales the entire button up by 5% */
		}

		/* ================================================================== */
		/* TOP RIGHT SOCIAL PANEL                                             */

		/* ================================================================== */
        /* TOP RIGHT SOCIAL PANEL                                             */

        .top-social-panel {
            position: fixed;
            top: 15px;
            right: 20px;
            
            /* Changed from solid #232323 to 50% transparent */
            background-color: rgba(35, 35, 35, 0.5); 
            
            padding: 8px 16px;
            border-radius: 6px;
            display: flex;
            gap: 15px;
            align-items: center;
            z-index: 1100;
            box-shadow: 0px 2px 5px rgba(0,0,0,0.3);
            
            /* Optional: Add this line to blur the background behind the panel for a cool frosted glass look! */
            backdrop-filter: blur(4px); 
        }

		.top-social-panel a {
			color: #999999; /* Gray text color from reference */
			font-size: 0.8em;
			text-decoration: none;
			transition: color 0.2s ease, transform 0.2s ease;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		/* Hover effect so users know it's clickable */
		.top-social-panel a:hover {
			color: #ffffff; 
			transform: scale(1.1);
		}

		/* Mobile Fix: Shift it to the left so it doesn't overlap the Hamburger menu */
		@media (max-width: 768px) {
			.top-social-panel {
				right: 65px; /* Pushes it left of the menu icon */
				top: 12px;
				padding: 6px 12px;
				gap: 12px;
			}
			
			.top-social-panel a {
				font-size: 1em; /* Slightly smaller icons on phones */
			}
		}

		/* ================================================================== */
		/* FULLSCREEN HOME (HIGHLIGHT) TAB STYLES                             */
		/* ================================================================== */
		#highlight.panel {
			position: fixed !important;
			top: 0 !important;
			left: 0 !important;
			width: 100vw !important;
			height: 100vh !important;
			height: 100dvh !important; /* Adapts to mobile browser address bars */
			max-height: none !important;
			min-height: auto !important;
			padding: 0 !important;
			margin: 0 !important;
			z-index: 1 !important; /* Keeps the image behind your menus */
		}

		/* Base navigation layer */
		#nav {
			z-index: 1000 !important;
			position: fixed !important;
		}

		/* Make sure the logo, social panel, and mobile menu sit ABOVE the nav bar */
		.top-logo,
		.menu-toggle,
		.top-social-panel {
			z-index: 1100 !important; 
			position: fixed !important;
		}
		
		/* ================================================================== */
		/* 1. UNIVERSAL TOP GRADIENT OVERLAY                                  */
		#nav::before {
			content: "";
			position: absolute; 
			top: -30px; /* Covers absolute top edge */
			left: 0;
			width: 100vw;
			height: 180px; 
			background: linear-gradient(to bottom, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%);
			z-index: -1; /* Keeps it behind the clickable nav text */
			pointer-events: none; /* Crucial: Ensures it doesn't block clicks */
		}

		/* ================================================================== */
		/* 2. FULLSCREEN SCROLLING FOR ART & ANIMATION TABS                   */
		#work.panel, 
		#personal.panel, 
		#animation.panel {
			position: fixed !important; 
			top: 0 !important;
			left: 0 !important;
			width: 100vw !important;
			height: 100vh !important;
			height: 100dvh !important; /* Fix for mobile address bars */
			max-height: none !important;
			margin: 0 !important;
			
			/* Inner padding to push title below the menu when tab is opened */
			padding-top: 70px !important; 
			padding-bottom: 50px !important; 
			
			/* Enable full screen scrolling */
			overflow-y: scroll !important; 
			z-index: 10 !important; 
		}

		/* Safety rule: Ensure hidden background panels never steal mouse clicks */
		#main > .panel.inactive {
			pointer-events: none !important;
		}

		/* ================================================================== */
		/* HIDE NAV DIAMOND ON SCROLL                                         */
		/* ================================================================== */
		/* Ensure the diamond has a smooth fade transition */
		#nav a:after {
			transition: opacity 0.2s ease, border-bottom-width .25s ease-in-out !important;
		}

		/* The class we will trigger with JavaScript to hide it */
		#nav.scrolled a:after {
			opacity: 0 !important;
		}

		/* ================================================================== */
		/* HIDE HOME DIAMOND UNTIL TITLE/LOGO IS CLICKED                      */
		/* ================================================================== */
		#nav a[href="#highlight"].start-hidden::after {
			opacity: 0 !important;
		}

		/* ================================================================== */
		/* ADJUST SPACE BETWEEN SUBTITLES IN WORK & PERSONAL TABS             */
		/* ================================================================== */
		#work .filter, 
		#personal .filter {
			/* Adjust these numbers to make the gaps wider or narrower */
			margin-left: 8px !important;  
			margin-right: 8px !important; 
		}