@font-face{font-family:ffmach;src:url('/fonts/ffm1.woff2'); format('opentype'); font-weight: 400;}
@font-face{font-family:ffmach;src:url('/fonts/ffm2.woff2'); format('opentype'); font-weight: 200;}
@font-face{font-family:ffmach;src:url('/fonts/ffm3.woff2'); format('opentype'); font-weight: 700;}

html{
	text-rendering: optimizeLegibility;
	background-color: #222;
	color:#999;
}
body{
	font-family: ffmach;
	font-weight: 700;
	margin:0 auto;
}
p{
}
/* nav/header */
.nav-base{
	display: flex;
	padding-top:22px;
	padding-bottom:22px;
	width: 100%;
	font-style: normal;
	text-transform: uppercase;
	font-size: 15px;
}
.logogram-container{
	float:left;
	width: 60.5%;
	padding-left: 2%
}
.logogram{
	font-weight: 700;
	color:#eee !important;
	font-size: 24px;
	margin-left: 3%;
	transition: 0.15s;
	opacity: 100%
}
.logogram-container :hover {
	opacity: 30%;
}

.navlink-container{
	text-align:right;
	float:right;
	width: 39.5%;
	padding-right: 2%;
}
.navlink{
	font-weight:700;
	vertical-align: middle;
	display:inline;
	font-size: 13px;
	color: #999;
	margin-right: 15px;
	transition: 0.15s;
	opacity: 100%
}
.navlink:hover{
	opacity: 30%
}
.navlink.navlink-current{
	color: #eee !important;
}

h3{padding-top:0; margin:0;padding-bottom: 10px; margin:0;}
p{opacity: 50%; font-size: 10px; padding-top:0;margin-top:2px; margin-bottom:2px; padding-bottom:5px;}

.galimg{width:100%; height: auto; font-size:0; flex: 0 0 100%;}
.galimg.firstimg{
	/*position:relative;top:-1.26em*/}
.galimg.smpadtop{padding-top:3px;}
.galimg.mdpadtop{padding-top:9px;}
.galimg.mdwidth{max-width:45%; margin: 0 auto;}
.galimg.lgwidth{max-width:55%; margin: 0 auto;}
.galimg.lgpadtop{padding-top:20px;}
.galmain{
	flex-direction: column; 
	padding-top:5px; width:100%; margin: 0 auto;
    display:flex; text-align: center;
}
.galvid{
	width:70%
}
.contacttable{
	float:left;
	margin:0 auto;
	
	max-width:50%;
}
.contactimg{
	filter: invert(100%);
}
.contactlink{
	display:flex;
	align-items:center;
	gap: 8px;
	transition: 0.15s;
	opacity: 100%
}
.contactlink:hover{
	opacity:30%;
}
#contact-form{
float:right;
}
.contactforminput{
	width:300px;
	margin-bottom:2px;
	font-family:ffmach;
	font-weight:700;
	padding:5px;
	border:0;
	background-color: #000;
	color: #eee;
}
.contactformbutton{
	width:310px;
	padding:5px;
	margin-top:8px;
	font-family:ffmach;
	font-weight:700;
	padding:5px;
	border:0;
	color:#000;
}
.contactlabelandinput{
	vertical-align:middle;
	text-align: right;
}
.contactcontainer{
	background-color:rgba(0,0,0,0.1)
	display:block;
	width:650px;
	margin: 0 auto;
	padding-bottom:20px;
}
.contactformcontainer{
	float:right;
}
#pwinput{
	display:inline;
	font-family:ffmach;
	font-weight:700;
	color:#eee;
	padding:5px;
	background-color: #000;
	border: 0;
}
#pwbtn{
	display:inline;
	font-family:ffmach;
	padding:4px;
	font-weight:700;
	border: 0;
}
.pwprompt{
	text-align: center;
	vertical-align:middle;
	padding-bottom:20px;
}

.center-fit {
	text-align:center;
	margin: 0 auto;
	max-width: 100%;
	margin: 0 auto;
}
a:link{text-decoration: none; color: inherit}
a:visited{text-decoration:none; color: inherit}
.centered{
  display: flex;
  justify-content: center;
  align-items: center;
}
.square {
  aspect-ratio: 1/ 1;
  display: flex;
  align-items: center;
  padding: 0%;
}
footer{
	margin: 0 auto;
	justify-content: center;
	text-align: center;
	align-items: center;
	padding-top: 8px;
	color: #999;
}
.back-to-top{
	color: inherit;
	font-family:inherit;
	font-weight:inherit;
	font-size: 14px;
	opacity:100%;
	transition:0.15s;
	border: none;
	margin-top: 5px;
	background-color:transparent;
}
.back-to-top:hover{
	opacity:30%
}
.rights-reserved{
	font-size: 10px;
	margin-bottom:8px;
	margin-top:12px;
}
footer .footer-noai{
	margin: 0 auto;
	margin-bottom: 16px;
	display: block;
	width: 100px;
	height: auto;
}
.uparrow{
	font-size:15px;
}


.wrong {
  animation: .3s linear wrong;
}

@keyframes wrong {
  0% {
    background-color: #ffaaaa;
  }
  100% {
    background-color: #dfdfdf;
  }
}

.overview-gallery a{
	transition: 1s;
	background-color: #000;
	aspect-ratio:1/1;
	position: relative;
	text-align: center;
	flex: 1 1;
}
@starting-style {
  .overview-gallery {
    background-color:#222;
  }
}
.overview-gallery a span{
	font-size: 35px;
	font-weight:700px;
	margin:0 auto;
	transition: 0.15s;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	opacity:00%
}
.overview-gallery{
	width:100%;
	margin: 0 auto;
    display: flex;
	flex-wrap: wrap;
	gap: 0px;
	flex-grow: 1;
	align-content:
	flex-start;
	justify-content:
	flex-start;
}
.overview-gallery img:hover ~ span{
	opacity:100%;
	color:#eee;
}
.overview-gallery span:hover{
	color: #eee;
	opacity:100%;
}
.overview-gallery img:has(~ span:hover){ 
	opacity:40%;
	filter: blur(0.5px);
}
.overview-gallery img{
	max-width:100%;
	aspect-ratio:1/1;
	transition: 0.15s;
}
.overview-gallery img:hover{
	opacity:40%;
	filter: blur(0.5px);
}
.overview-gallery a{  
  flex: 0 0 25%;
  max-width: 25%;
  font-size:0;
  aspect-ratio:1/1;
  flex: 0 0 25%;
  max-width: 25%;
}

#pwprotected{display:none;}

/* dark mode pdf embed*/
.darkmode-pdf{
	filter: invert(0.86) hue-rotate(180deg);
}

/* overview gallery column widths*/
@media (max-width: 700px){
	.contactcontainer{
		width:100%;
		display:flex;
		flex-direction: column;
	}
	.contactformcontainer{
		flex: 0 0 100%;
		margin:0 auto;
		float: none;
	}
	.contacttable{
		text-align: center;
		justify-content:center;
		align-content:center;
		flex: 0 0 100%;
		margin:0 auto;
		margin-bottom:20px;
	}
	.contactforminput{
		width:200px;
	}
}
@media (max-width: 650px){
	.nav-base{
		flex-direction: column;
	}
	.logogram{
		padding:0;
		margin: 0 auto;
	}
	.logogram-container{
		padding: 0px;
		margin: 0 auto;
		text-align: center;
		width: 100%;
	}
	.navlink-container{
		padding: 0px;
		margin: 0 auto;
		text-align: center;
		width: 100%;
	}
	.navlink{
		padding: 0px;
		margin: 0 auto;
		margin-left: 5px;
		margin-right:5px;
	}
	
}
@media (min-width: 350px) {
	.overview-gallery a{  
		flex: 0 0 100%;
		max-width: 100%;
	}
	
}
@media (min-width: 650px) {
.overview-gallery a{  
  flex: 0 0 50%;
  max-width: 50%;
}
@media (min-width: 800px) {
.overview-gallery a{  
  flex: 0 0 33.33%;
  max-width: 33.33%;
}
@media (min-width: 1000px) {
.overview-gallery  a{  
  flex: 0 0 25%;
  max-width: 25%;
}