@font-face { font-family: "Modreta Bold"; src: url(Modreta-Bold.woff) format("woff") }
@font-face { font-family: "Modreta Medium"; src: url(Modreta-Medium.woff) format("woff") }
@font-face { font-family: "Modreta Light"; src: url(Modreta-Light.woff) format("woff") }

body { font-family:"Modreta Light", sans-serif; margin-top:2em; overflow-y:scroll; line-height: 2; font-size:95%; letter-spacing: 0.025em; word-spacing: -0.1em }
h1 { font-family:"Modreta Bold"; text-align:center; font-size:160%; letter-spacing: 0.05em;  word-spacing: -0.1em; cursor:pointer; width:10em; margin:auto }
h1:hover { text-decoration:underline }
a { color:black }
b { font-family:"Modreta Medium"; font-size:80%; letter-spacing:2px }
strong { display:inline-block; padding:0.5em 0 }
strong:last-child { padding-bottom:0 }
sup { vertical-align: super; font-size: smaller }

.a-alternate { font-feature-settings: "ss02" }

.slick { margin:auto }
.slick-arrow { position:absolute; top:211px; z-index:1; opacity:0 }
.slick-arrow, .slick-arrow:before { font-family: "Modreta Light"; font-size:60px; width:58px; height:400px }
.slick-arrow:hover { opacity:0.3; background:rgba(0,0,0,0.7) }
.slick-prev { left:0 }
.slick-next { right:0; padding-left:10px }
.slick-dots { bottom: -2em }
.slick-dots li { margin:0 2.5px }
.slick-dotted.nodots { margin-bottom:-37px }
.slick-slide:hover { cursor: pointer }

.intro { text-align:center; font-size:160%; line-height:1.4; display:none; position:absolute; z-index:2; background:white; width:18em; top:0; left:0; right:0; margin:0 auto; padding:1.6em }
.intro h1 { font-size:100%; text-decoration:underline; margin-bottom:1em }
footer { font-size:50%; margin:2em 0 }
address { font-family: "Modreta Medium" }
.categories { font-family:"Modreta Medium"; text-align:center; margin:1em }
.categories li { display:inline-block; margin:0.5em; vertical-align:top; line-height:1.4; cursor:pointer }
.categories li br { display:none }
.categories li:hover { text-decoration:underline }
.active { text-decoration:underline }

.overlay { position:absolute; top:0; bottom:0; left:0; right:0; z-index:1; background:#000; opacity:0.6; display:none }

.box:focus { outline-style:none }
.box img, .box p { margin:0.5em; padding:0.5em; line-height:1.4; text-align:center }
.box p  { display:none; margin:0 auto 0.5em auto; max-width:280px }
.box img { display:block; margin:0 auto }

#paginator { font-size:80%; letter-spacing:2px; text-align:center; margin-top:-2em }

.below { display:none; list-style:none; margin-top:3em }
.below li { text-align:center; margin-bottom:0.5em }

.help, .close { font-family:"Modreta Medium", sans-serif; word-spacing:-0.1em; font-size:90%; line-height:1.6; opacity:0.3; display:block; margin:auto; border:none; background:none; padding:1.5em 2em 3em 2em }
.help { position:absolute; bottom:3em; width:100%; padding:0; letter-spacing:1px; line-height:1.5; opacity:0.3 }
.help-tap { display:none }
.close:hover { opacity:1; text-decoration:underline; cursor:pointer }

@media only screen and (min-width: 768px) {
	body { overflow-x:hidden }	/* Firefox has scrollbar for some reason, avoid it */
	.box img { display:block; margin:0.474em 0.5em; padding:2px 0; border:0 solid transparent; border-width:2px 0 }
	.box img:hover { border-bottom-color:Gainsboro }
	.box.open img:hover { border-bottom-color:transparent; border-top-color:Gainsboro }
	#paginator { display:none !important }
	@media only screen and (max-height: 700px) {
		.help { display:none !important }
	}
}

@media only screen and (max-width: 767px) {
	.intro { width:75%; font-size:120% }
	.intro h1 { font-size:133%; margin-top:0.375em }
	.categories li { margin:0.25em }
	.categories li br { display:inline }
	img { width:50% }
	.below img { width:80%; height:auto }
	.help { font-size:50%; line-height:1.6 }
	.help-click { display:none }
	.help-tap { display:inline }
	.close { margin-bottom:2em }
	.slick-dots, .slick-arrow { display:none !important }
	.slick-arrow { top:112px }
	.categories li { font-size: 80% }
	@media only screen and (max-height: 450px) {
		.help { display:none !important }
	}
}

/* Style if javascript is disabled */
.nojs h1, .nojs .intro address, .nojs .categories { display:none }
.nojs .intro { display:block; position:relative; padding-top:0.3em }
.nojs .intro h1 { display:block; text-decoration:none }
.nojs .slick { display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-end }
.nojs .box p { display:block }
.nojs .help { display:none !important }

/* Style for printing with javascript disabled */
@media print {
	.nojs .box { page-break-before:always }
	.nojs .slick { display:block }
	.nojs .box img { width:70%; height:auto }
	#paginator, .help { display:none !important }
}

}
@media print and (orientation:landscape) {
	.nojs .box p, .nojs .box img { display:inline-block; vertical-align:top }
	.nojs .box p { width:30% }
	.nojs .box img { width:auto }
}