/*----------------------------------------------------------------------------*/
/* Base                                                                       */
/*----------------------------------------------------------------------------*/

:root
{
	--bs-body-color-rgb: 33, 37, 41;
	--bs-body-color: #212529;

	--bs-body-bg-rgb: 245, 245, 245;
	--bs-body-bg: #F6F6F6;

	--bs-body-font-weight: 300;
	--bs-font-sans-serif:
		"Open Sans",
		system-ui,
		-apple-system,
		"Segoe UI",
		Roboto,
		"Helvetica Neue",
		Arial,
		"Noto Sans",
		"Liberation Sans",
		sans-serif,
		"Apple Color Emoji",
		"Segoe UI Emoji",
		"Segoe UI Symbol",
		"Noto Color Emoji";
}

html
{
	font-size: 14px;
}

html, body
{
	 width: 100%;
	height: 100%;
}

.site-body
{
	display: flex;
	flex-direction: column;

	/* Sticky footers */
	min-height: 100vh;
}

.site-main
{
	/* Sticky footers */
	flex-grow: 1;
}

header, section, footer
{
	position: relative;
}

canvas, img, svg, video
{
	vertical-align: middle;
}

img
{
	/* Fix any blurry images on scale in Chrome */
	image-rendering: -webkit-optimize-contrast;
}

label > *
{
	/* iOS label clicking */
	pointer-events: none;
}

*
{
	text-rendering: optimizeLegibility;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}



/*----------------------------------------------------------------------------*/
/* Generic                                                                    */
/*----------------------------------------------------------------------------*/

img.lazy-image
{
	opacity: 0;
	transition: opacity 250ms ease-in-out;
}

img.lazy-image.lazy-image-loaded
{
	opacity: 1;
}

html.no-js img.lazy-image
{
	display: none;
}



/*----------------------------------------------------------------------------*/
/* Utilities                                                                  */
/*----------------------------------------------------------------------------*/

.font-weight-light		{ font-weight: 300 !important; }
.font-weight-300		{ font-weight: 300 !important; }

.font-weight-regular	{ font-weight: 400 !important; }
.font-weight-400		{ font-weight: 400 !important; }

.font-weight-medium		{ font-weight: 500 !important; }
.font-weight-500		{ font-weight: 500 !important; }

.font-weight-semi-bold	{ font-weight: 600 !important; }
.font-weight-600		{ font-weight: 600 !important; }

.font-weight-bold		{ font-weight: 700 !important; }
.font-weight-700		{ font-weight: 700 !important; }

.font-weight-extra-bold	{ font-weight: 800 !important; }
.font-weight-800		{ font-weight: 800 !important; }

/*----------------------------------------------------------------------------*/

.font-campton { font-family: 'Campton', var(--bs-font-sans-serif) !important; }



/*----------------------------------------------------------------------------*/
/* Header                                                                     */
/*----------------------------------------------------------------------------*/

.site-header hr
{
	margin: 0rem;
	border: none;
	border-top: 1px solid rgb(100, 100, 100);
}

.site-header .part-h1 { letter-spacing: 1.5px; }
.site-header .part-h2 { letter-spacing: 1.0px; }



/*----------------------------------------------------------------------------*/
/* Photos                                                                     */
/*----------------------------------------------------------------------------*/

.site-photos .part-thumb
{
	cursor: pointer;
	position: relative;
	overflow: hidden;

	box-shadow: 0rem 0rem 1.25rem rgb(225, 225, 225);
}

.site-photos .part-thumb .part-holder
{
	 width: 400px;
	height: auto;
	max-width: 100%;
}

.site-photos .part-thumb .part-sprite
{
	width: 100%;
	position: absolute;
	left: 0rem;
	 top: 0rem;

	filter: brightness(1.0) saturate(1.0);
	transition: opacity 250ms ease-in-out,
	            filter  100ms ease-in-out;
}

.site-photos .part-thumb:hover .part-sprite
{
	filter: brightness(1.1) saturate(1.6);
}

/*----------------------------------------------------------------------------*/

.site-photos .part-photo
{
	display: none;

	position: fixed;
	 left: 0rem;    top: 0rem;
	right: 0rem; bottom: 0rem;
	z-index: 1030;

	padding: 1rem;
	background: rgba(0, 0, 0, 0.85);

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

.site-photos .part-radio:checked + .part-photo
{
	display: flex;
}

.site-photos .part-photo .part-canvas
{
	position: relative;

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

/*----------------------------------------------------------------------------*/

.site-photos .part-photo .part-exit,
.site-photos .part-photo .part-open
{
	margin: 1rem;
	position: absolute;
	right: 0rem;

	cursor: pointer;
}

.site-photos .part-photo .part-exit { top: 0rem; }
.site-photos .part-photo .part-open { top: 4rem; }

.site-photos .part-photo .part-exit .part-icon,
.site-photos .part-photo .part-open .part-icon
{
	  width: 3.00rem;
	 height: 3.00rem;
	padding: 0.75rem;
	border-radius: 50%;
	overflow: visible;

	display: flex;
	justify-content: center;
	    align-items: center;

	background: rgba(245, 245, 245, 0.8);
	transition: background 200ms ease-in-out;
}

.site-photos .part-photo .part-exit:hover .part-icon,
.site-photos .part-photo .part-open:hover .part-icon
{
	background: rgba(245, 245, 245, 0.6);
}

/*----------------------------------------------------------------------------*/

.site-photos .part-photo .part-canvas .part-sprite,
.site-photos .part-photo .part-canvas .part-sprite-load
{
	max-width:  100%;
	max-height: 90vh;
	border-radius: 0.5rem;
	object-fit: contain;

	/* Disable lazy-image opacity transition effects */
	transition: none;
}

/* These are only used for preloading adjacent images */
.site-photos .part-photo .part-canvas .part-sprite-load
{
	 width: 1px;
	height: 1px;

	position: absolute;
	left: 0rem;
	 top: 0rem;
}

/*----------------------------------------------------------------------------*/

.site-photos .part-photo .part-canvas .part-prev,
.site-photos .part-photo .part-canvas .part-next
{
	cursor: pointer;
}

.site-photos .part-photo .part-canvas .part-prev
{
	 width:  30%;
	height: 100%;

	position: absolute;
	left: 0rem;
	 top: 0rem;
}



/*----------------------------------------------------------------------------*/
/* Fonts                                                                      */
/*----------------------------------------------------------------------------*/

@font-face
{
	font-family: 'Campton';
	font-weight: 500;
	font-style: normal;
	font-display: swap;
	src: url('fonts/campton-500.woff2') format('woff2'),
	     url('fonts/campton-500.woff' ) format('woff' );
}