/* ============================== */
/* == UNIVERSAL STYLESHEET == */
/* ============================== */

/* ============================== */
/* =========== FONTS =========== */
/* ============================== */

/* ======== BODY FONTS ======== */
@font-face { font-family:'Hanazome'; src:url(/files/hanazome.ttf); /* ASTERISM */ }
@font-face { font-family:'Hanazome'; font-style:italic; src:url(/files/Yomogi.ttf); /* ASTERISM */ }
@font-face { font-family:'Hanazome'; font-weight:bold; src:url(/files/CherryBomb.ttf); /* ASTERISM */ }
/* ============================== */

/* ======= ELDER SCROLLS ======= */
@font-face { font-family:'MagicCards'; src:url(/files/MagicCards.ttf); /*  FONTS4FREE.net*/ }
@font-face { font-family:'Oblivion'; src:url(/files/oblivion.ttf); /* DAFONT - mistic100.d1974 */ }
@font-face { font-family:'Balgruf'; src:url(/files/Balgruf.ttf); /* DAFONT - /paul-miller.d10296 */ }
@font-face { font-family:'Balgruf'; font-style:italic; src:url(/files/BalgrufItalic.ttf); /* DAFONT - /paul-miller.d10296 */ }
/* ============================== */

/* ====== DISPLAY FONTS ======= */
@font-face { font-family:'AdorableDoll'; src:url(/files/AdorableDoll.ttf); /* ASTERISM */ }
@font-face { font-family:'AdorableDoll'; font-weight:bold; src:url(/files/AdorableLady.ttf); /* ASTERISM */ } 
@font-face { font-family:'AngelicAlchemy'; src:url(/files/AngelicAlchemy.ttf); /* ASTERISM */ }
@font-face { font-family:'AngelicAlchemy'; font-weight:bold; src:url(/files/AngelicGarden.ttf); /* ASTERISM */ }
@font-face { font-family:'LittleDevil'; src:url(/files/LittleDevil.ttf); /* ASTERISM */ }
@font-face { font-family:'Blackletter'; src:url(/files/Blackletter.ttf); /* DAFONT - dieter-steffmann.d253 */ }
@font-face { font-family:'Slaughter'; src:url(/files/slaughter.ttf); /* FONTSPACE - nugs-project */ }
@font-face { font-family:'Toxia'; src:url(/files/toxia.ttf); /* FONTSPACE - the-fontry */ }
@font-face { font-family:'OblivionGT'; src:url(/files/Oblivion_gt.ttf); /* DAFONT - genesis-toxical.d6910 */ }
/* ============================== */

/* ====== BINARY FONTS ======== */
@font-face { font-family:'Windows'; src:url(/files/Windows.ttf); /* DAFONT - levi-szekeres.d1472 */ }
@font-face { font-family:'Mamemoji'; src:url(/files/mamemoji.ttf); /* ASTERISM - Tiny Pixel */ }
@font-face { font-family:'Chocolatier'; src:url(/files/Chocolatier.ttf); /* WHIMSICAL */ }
@font-face { font-family:'Chocolatier'; font-weight:bold; src:url(/files/PopBoutique.ttf); /* WHIMSICAL */ }
@font-face { font-family:'DpComic'; src:url(/files/DpComic.ttf); /* FONTSPACE - codeman38 */ }
@font-face { font-family:'Yurumoji'; src:url(/files/yurumoji.ttf); /* ASTERISM */ }
@font-face { font-family:'Cherish'; src:url(/files/Cherish.ttf); /* ASTERISM */ }
@font-face { font-family:'SilverLining'; src:url(/files/SilverLining.ttf); /* ASTERISM */ }
@font-face { font-family:'KakomiC'; src:url(/files/KakomiC.ttf); /* ASTERISM */ }
@font-face { font-family:'RomanceA'; src:url(/files/RomanceA.ttf); /* ASTERISM */ }
@font-face { font-family:'BlackNebula'; src:url(/files/BlackNebula.ttf); /* ASTERISM */ }
@font-face { font-family:'GothicPixels'; src:url(/files/GothicPixels.ttf); /* DAFONT - lingdong-huang.d5836 */ }
@font-face { font-family:'Spirit'; src:url(/files/Spirit.ttf); /* ASTERISM */ }
/* ============================== */

/* ======= MISC FONTS ======== */
@font-face { font-family:'NotoEmoji'; src:url(/files/NotoEmoji.ttf); /* GOOGLE - Open Source */ }
@font-face { font-family:'EmojiFont'; src:url(/files/EmojiFont.ttf); /* ASTERISM */ }
/* ============================== */

/* ============================== */
/* ======== ANIMATION  ======== */
/* ============================== */

/* ========= RAINBOWS ========= */
@keyframes gayText {
	0% { text-shadow:0 0 2px var(--pink), 0 0 5px var(--pink); }
	15% { text-shadow:0 0 2px var(--orange), 0 0 5px var(--orange); }
	30% { text-shadow:0 0 2px var(--yellow), 0 0 5px var(--yellow); }
	45% { text-shadow:0 0 2px var(--green), 0 0 5px var(--green); }
	60% { text-shadow:0 0 2px var(--cyan), 0 0 5px var(--cyan); }
	75% { text-shadow:0 0 2px var(--blue), 0 0 5px var(--blue); }
	90% { text-shadow:0 0 2px var(--violet), 0 0 5px var(--violet); }
	100% { text-shadow:0 0 2px var(--pink), 0 0 5px var(--pink); }
}
@keyframes gayBox {
	0% { box-shadow:1px 1px 5px var(--pink), -1px -1px 5px var(--pink); }
	15% { box-shadow:1px 1px 5px var(--orange), -1px -1px 5px var(--orange); }
	30% { box-shadow:1px 1px 5px var(--yellow), -1px -1px 5px var(--yellow); }
	45% { box-shadow:1px 1px 5px var(--green), -1px -1px 5px var(--green); }
	60% { box-shadow:1px 1px 5px var(--cyan), -1px -1px 5px var(--cyan); }
	75% { box-shadow:1px 1px 5px var(--blue), -1px -1px 5px var(--blue); }
	90% { box-shadow:1px 1px 5px var(--violet), -1px -1px 5px var(--violet); }
	100% { box-shadow:1px 1px 5px var(--pink), -1px -1px 5px var(--pink); }
}
@keyframes gayNeon {
	0% { filter:drop-shadow(-1px -1px 1px var(--violet)) drop-shadow(1px -1px 1px var(--pink)) drop-shadow(-1px 1px 1px var(--pink)) drop-shadow(1px 1px 1px var(--red)); }
	12.5% { filter:drop-shadow(-1px -1px 1px var(--pink)) drop-shadow(1px -1px 1px var(--red)) drop-shadow(-1px 1px 1px var(--red)) drop-shadow(1px 1px 1px var(--orange)); }
	25% { filter:drop-shadow(-1px -1px 1px var(--red)) drop-shadow(1px -1px 1px var(--orange)) drop-shadow(-1px 1px 1px var(--orange)) drop-shadow(1px 1px 1px var(--yellow)); }
	37.5% { filter:drop-shadow(-1px -1px 1px var(--orange)) drop-shadow(1px -1px 1px var(--yellow)) drop-shadow(-1px 1px 1px var(--yellow)) drop-shadow(1px 1px 1px var(--green)); }
	50% { filter:drop-shadow(-1px -1px 1px var(--yellow)) drop-shadow(1px -1px 1px var(--green)) drop-shadow(-1px 1px 1px var(--green)) drop-shadow(1px 1px 1px var(--cyan));	}
	62.5% { filter:drop-shadow(-1px -1px 1px var(--green)) drop-shadow(1px -1px 1px var(--cyan)) drop-shadow(-1px 1px 1px var(--cyan)) drop-shadow(1px 1px 1px var(--blue));	}
	75% { filter:drop-shadow(-1px -1px 1px var(--cyan)) drop-shadow(1px -1px 1px var(--blue)) drop-shadow(-1px 1px 1px var(--blue)) drop-shadow(1px 1px 1px var(--violet)); }
	87.5% { filter:drop-shadow(-1px -1px 1px var(--blue)) drop-shadow(1px -1px 1px var(--violet)) drop-shadow(-1px 1px 1px var(--violet)) drop-shadow(1px 1px 1px var(--pink));	}
	100% { filter:drop-shadow(-1px -1px 1px var(--violet)) drop-shadow(1px -1px 1px var(--pink)) drop-shadow(-1px 1px 1px var(--pink)) drop-shadow(1px 1px 1px var(--red)); }
}
@keyframes gayHue {
	0% { filter:hue-rotate(0deg) }
	9% { filter:hue-rotate(30deg) }
	18% { filter:hue-rotate(60deg) }
	27% { filter:hue-rotate(90deg) }
	36% { filter:hue-rotate(120deg) }
	45% { filter:hue-rotate(150deg) }
	54% { filter:hue-rotate(180deg) }
	63% { filter:hue-rotate(210deg) }
	72% { filter:hue-rotate(240deg) }
	81% { filter:hue-rotate(270deg) }
	88% { filter:hue-rotate(300deg) }
	93% { filter:hue-rotate(330deg) }
	100% { filter:hue-rotate(360deg) }
}
/* ============================== */

/* =========== CURSOR ========== */
@keyframes curTokiuni {
	0% {cursor:url(/files/cur/tokiuni/1.png), pointer;}
	12.5% {cursor:url(/files/cur/tokiuni/2.png), pointer;}
	25% {cursor:url(/files/cur/tokiuni/1.png), pointer;}
	37.5% {cursor:url(/files/cur/tokiuni/2.png), pointer;}
	50% {cursor:url(/files/cur/tokiuni/1.png), pointer;}
	62.5% {cursor:url(/files/cur/tokiuni/4.png), pointer;}
	75% {cursor:url(/files/cur/tokiuni/3.png), pointer;}
	87.5% {cursor:url(/files/cur/tokiuni/2.png), pointer;}
	100% {cursor:url(/files/cur/tokiuni/1.png), pointer;}
}
/* ============================== */

/* ============================== */
/* ======== ROOT STYLE ======== */
/* ============================== */

:root {

/* =========== COLORS ========== */
--pink:#F1B;
--red:#F03;
--orange:#F72;
--yellow:#FE3;
--green:#6F7;
--cyan:#9EF;
--blue:#43F;
--violet:#82D;

--colorKey:var(--pink);
--colorAlt:var(--green);
--colorEtc:#DDD;
/* ============================== */

/* == DROP-SHADOW OUTLINE == */
--aberration:drop-shadow(2px 0 1px var(--green)) drop-shadow(-2px 0 1px var(--pink));

--outlineW:drop-shadow(1px 1px 0 #fff) drop-shadow(-1px 1px 0 #fff) drop-shadow(-1px -1px 0 #fff) drop-shadow(1px -1px 0 #fff);
--outlineK:drop-shadow(1px 1px 0 #000) drop-shadow(-1px 1px 0 #000) drop-shadow(-1px -1px 0 #000) drop-shadow(1px -1px 0 #000);
--outlineKey:drop-shadow(1px 1px 0px var(--colorKey)) drop-shadow(1px -1px 0px var(--colorKey)) drop-shadow(-1px -1px 0px var(--colorKey)) drop-shadow(-1px 1px 0px var(--colorKey));
--outlineAlt:drop-shadow(1px 1px 0px var(--colorAlt)) drop-shadow(1px -1px 0px var(--colorAlt)) drop-shadow(-1px -1px 0px var(--colorAlt)) drop-shadow(-1px 1px 0px var(--colorAlt));
--outlineEtc:drop-shadow(1px 1px 0px var(--colorEtc)) drop-shadow(1px -1px 0px var(--colorEtc)) drop-shadow(-1px -1px 0px var(--colorEtc)) drop-shadow(-1px 1px 0px var(--colorEtc));
/* ============================== */

/* == TEXT-SHADOW OUTLINE == */
--textAberration:2px 0px 1px var(--green), -2px 0px 1px var(--pink);

--textshadowK:-2px 0px 0 #000, -1px -1px 0 #000, 0px -2px 0 #000, 1px -1px 0 #000, 2px 0px 0 #000, 1px 1px 0 #000, 0px 2px 0 #000, -1px 1px 0 #000;
--textshadowW:-2px 0px 0 #fff, -1px -1px 0 #fff, 0px -2px 0 #fff, 1px -1px 0 #fff, 2px 0px 0 #fff, 1px 1px 0 #fff, 0px 2px 0 #fff, -1px 1px 0 #fff;
--textshadowKey:1px 1px 1px var(--colorKey), 1px -1px 1px var(--colorKey), -1px -1px 1px var(--colorKey), -1px 1px 1px var(--colorKey);
--textshadowAlt:1px 1px 1px var(--colorAlt), 1px -1px 1px var(--colorAlt), -1px -1px 1px var(--colorAlt), -1px 1px 1px var(--colorAlt);
--textshadowEtc:1px 1px 1px var(--colorEtc), 1px -1px 1px var(--colorEtc), -1px -1px 1px var(--colorEtc), -1px 1px 1px var(--colorEtc);
/* ============================== */

}

/* ============================== */
/* ========= PAGE STYLE ======== */
/* ============================== */

/* ========= FORMAT ========== */
* { padding:0;margin:0;border:0; }
html {
	scrollbar-color:var(--scrollColor, var(--green) #000);
	scroll-behavior:smooth;
	overscroll-behavior:none;
}
body {
	width:100%;
	overflow-x:clip;
	text-align:center;
	font-family:'Hanazome','Comic Sans MS',sans-serif;
	color:#DDD;
	background:#000;
	cursor:url(/files/cur/cutter.gif),auto;
}
body::before {
	content:'';
	display:block;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100vh;
	max-height:100%;
	z-index:-999;
	pointer-events:none;
}
::selection {
	color:var(--selectColor, var(--violet));
	background:var(--selectBg, var(--green));
}
img { max-width:100% }
ul, li { list-style-type:none; }
a {
	font-weight:900;
	text-decoration:none;
	color:var(--pink);
	cursor:var(--cursor, url(/files/cur/cutter.gif)),pointer;
	animation:var(--cursorHover);
}
a:hover {
	color:#fff;
	text-shadow:var(--textAberration);
}
main:not(.exhibit):before, main:not(.exhibit):after {
	content:'';7
	position:relative;
	display:block;
	margin:0;
	width:100%;
	height:80px;
	background:url(/images/deco/line/tetusenwhite.gif) center repeat-x;
	filter:drop-shadow(1px 2px 2px #000);
}
/* ============================== */

/* ========== HEADER ========== */
header {
	width:800px;
	max-width:100%;
	margin:auto;
	padding-top:20px;
}
header h1 {
	margin:0 auto;
	vertical-align:bottom;
	font-family:'Slaughter','Blackletter',Fantasy;
	font-size:4em;	
	font-weight:normal;	
	color:#fff;
	filter:var(--outlineK);
	text-shadow:var(--textAberration);
}
header h1 sub {
	display:inline-block;
	vertical-align:bottom;
	font-size:1em;
	transform:translateY(8px);
}
header h1 small {
	display:inline-block;
	font-size:0.75em;
}
header h1 b {
	position:relative;
	display:inline-block;
	text-decoration:none;
	font-weight:bold;
	font-family:'NotoEmoji';
	font-size:0.3em;
	vertical-align:baseline;
	color:#000;
}
/* ============================== */

/* ======== MAIN SECTION ======= */
section {
	width:800px;
	max-width:100%;
	margin:auto;
	padding:20px 0;
}
section p {
	width:80%;
	margin:10px auto;
	text-align:justify;
	line-height:1.5em;
	font-size:1em;
}
section p a {
	font-family:'AdorableDoll';
}
/* ============================== */

/* =========== FOOTER ========== */
footer {
	width:100%;
	margin:auto;
	padding-top:20px;
	padding-bottom:calc(var(--borderBtmHeight, 30px) + 1em);
	text-align:center;
	font-family:var(--fontBody,'BlackNebula',arial);
	line-height:1.35em;
	color:var(--footerColor, #aaa);
}
footer a.logo {
	display:block;
	margin:0px auto 10px auto;
	width:160px;
	height:80px;
	background-size:auto;
	background-position:center;
	background-repeat:no-repeat;
	background-image:var(--logo, url(/images/logo/CL4M0_50blk.png));
	filter:var(--logoFilter, var(--outlineW));
}
footer a.logo:hover {
	background-image:var(--logoHover, url(/images/logo/CL4M0_50.png));
	filter:var(--logoFilterHover, var(--outlineK) var(--aberration));
}
footer p {
	display:block;
	width:500px;
	max-width:100%;
	margin:5px auto;
	font-size:0.9em;	
	font-family:var(--fontHead,'AdorableDoll',cursive);
}
footer address {
	font-style:normal;
	display:block;
	line-height:1.65em;
	font-family:var(--fontHead,'AdorableDoll',cursive);
}
footer address b {
	vertical-align:text-bottom;
	display:inline-block;
	margin:0 5px;
	font-family:'NotoEmoji',monospace;
	color:var(--colorEtc, #aaa);
	transform:translateY(5px)
}
footer p b {
	vertical-align:text-bottom;
	display:inline-block;
	margin:0 5px;
	font-family:'EmojiFont',monospace;
	color:var(--colorKey, var(--pink));
	transform:translateY(5px);
}
footer small {
	display:block;
	width:500px;
	max-width:100%;
	margin:10px auto;
	font-weight:normal;
	font-family:var(--fontTiny,'BlackNebula',monospace);
}
footer small b {
	font-family:var(--fontAlt,'AdorableDoll',impact);
}
footer time {
	display:block;
	margin:5px auto;
	font-family:'Mamemoji';
	font-size:0.85em;
	color:#999;
}
#topBtn {
	display:block;
	position:fixed;
	bottom:0;
	left:0;
	width:50px;
	height:150px;
	background:url(/images/button/button016_en-top.png);
	filter:var(--outlineK);
}
/* ============================== */

/* ========== CREDITS ========== */
main.exhibit article ul, footer ul {
	display:flex;
	flex-wrap:wrap;
	height:auto;
	max-width:400px;
	margin:var(--inspoHeight, 0px) auto 0px auto;
	justify-content:center;
}
main.exhibit article ul li, footer ul li {
	position:relative;
	display:block;
	margin:0 5px;
	color:var(--colorKey);
}
main.exhibit article ul li.crDiv, footer ul li.crDiv {
	font-family:'Comic Sans MS', sans-serif;
	font-weight:bold;
	font-size:20px;
	line-height:20px;
}
main.exhibit article ul li a img, footer ul li a img {
	width:20px;
	height:20px;
	filter:var(--credBorder, var(--outlineW) var(--outlineKey));
}
main.exhibit article ul li:hover a img, footer ul li:hover a img {
	transform:scale(1.5);
}
main.exhibit article ul li cite, footer ul li cite {
	position:absolute;
	z-index:99;
	top:0;
	left:0;
	display:none;
	transform:translate(calc(var(--credWidth, 200px) / -2 + 10px), calc(var(--credHeight, 110px) * -1 - 10px));
	width:calc(var(--credWidth, 200px) - var(--credPadLeft, 35px) - var(--credPadRite, 35px));
	height:calc(var(--credHeight, 110px) - var(--credPadTop, 35px) -  var(--credPadBtm, 35px));
	padding:var(--credPadTop, 35px) var(--credPadRite, 35px) var(--credPadBtm, 35px) var(--credPadLeft, 35px);
	background-image:var(--credImg, url(/images/button/plate-goth-00.gif));
	background-position:center;
	background-size:cover;
	background-repeat:no-repeat;
	line-height:var(--credLine, 13px);
	font-size:var(--credSize, 0.85em);
	font-weight:normal;
	font-style:normal;
	font-family:var(--fontTiny, 'Yurumoji', monospace);
	color:var(--credColor, #fff);
	filter:var(--credShadow, drop-shadow(0 2px 2px #000));
}
main.exhibit article ul li:hover cite, footer ul li:hover cite {
	display:block;
	text-shadow:none;
}
/* ============================== */

/* == Unordered List - Notebook == */
ul.notebook {
	list-style-image:url(/images/bullet/g01-halloween-skull.gif);
	list-style-type:disc;
	list-style-position:inside;
	position:relative;
	text-align:left;
	width:500px;
	max-width:calc(98% - 80px);
	margin:auto;
	padding:20px 10px;
	font-family:'Yurumoji';
	background-image:url(/images/frame/2_2.gif), url(/images/frame/8_2.gif), url(/images/frame/5_2.gif);
	background-size:auto, auto, auto;
	background-repeat:round no-repeat, round no-repeat, round;
	background-position:left top, left bottom, left bottom;
}
ul.notebook::before {
	content:'';
	position:absolute;
	top:7px;
	left:-25px;
	display:block;
	width:calc(100% + 42px);
	height:calc(100% - 22px);
	background-image:url(/images/frame/4_2.gif), url(/images/frame/6_2.gif);
	background-size:auto;
	background-repeat:no-repeat round, repeat-y;
	background-position:left top, right top;
}
ul.notebook::after {
	content:'';
	position:absolute;
	top:0px;
	left:-25px;
	display:block;
	width:calc(100% + 42px);
	height:100%;
	background-image:url(/images/frame/1_2.gif), url(/images/frame/3_2.gif), url(/images/frame/7_2.gif), url(/images/frame/9_2.gif);
	background-size:auto;
	background-repeat:no-repeat;
	background-position:left top, right top, left bottom, right bottom;
}
ul.notebook h3 {
	font-size:1.15em;
	font-family:'GothicPixels';
}
ul.notebook li {
	margin-bottom:8px;
	font-size:1.1em;
}
ul.notebook li.none {
	list-style:none;
}
/* ============================== */

/* ======== BAPHOMET BOX ======== */
.baphomet {
	position:relative;
	display:block;
	margin:0px auto;
	width:325px;
	max-width:calc(100% - 100px);
	padding:10px 50px;
	background:url(/images/frame/neck_frame-sabato-mid-trans.png) center/100% auto repeat-y;
}
.baphomet b {
	font-family:'AdorableDoll';
	font-size:1.2em;
	word-spacing:-0.15em;
	color:#bbb;
}

.baphomet:first-of-type {
	margin-top:60px;
}
.baphomet:last-of-type {
	margin-bottom:60px;
}
.baphomet:first-of-type:before {
	content:'';
	position:absolute;
	display:block;
	top:-54px;
	left:0;
	margin:0 auto;
	width:425px;
	max-width:100%;
	height:54px;
	background:url(/images/frame/neck_frame-sabato-top-trans.png) center/100% 100% no-repeat;
}
.baphomet:last-of-type:after {
	content:'';
	position:absolute;
	display:block;
	bottom:-54px;
	left:0;
	margin:0 auto;
	width:425px;
	max-width:100%;
	height:54px;
	background:url(/images/frame/neck_frame-sabato-botom-trans.png) center/100% 100% no-repeat;
}
/* ============================== */

/* ============================== */
/* === START EXHIBIT STYLE === */
/* ============================== */

/* ======= PRELOAD STYLE ======= */
.exhibit::before {
	content:'';
	position:absolute;
	display:block;
	background-image:var(--preloadImgs);
	z-index:-999;
	left:-9999px;
	top:-9999px;
}
/* ============================== */

/* ========= BASE STYLE ========= */
.exhibit {
	cursor:var(--cursor),auto;
}
article {
	position:relative;
	display:inline-block;
	width:100%;
	margin:0 auto;
	background:none;
	font-family:var(--fontBody);
	text-align:center;
	color:var(--colorAlt);
	cursor:var(--cursor),auto;
}
article::after {
	content:'';
	position:fixed;
	top:0;
	left:0;
	display:block;
	width:100%;
	height:100vh;
	overflow:hidden;
	z-index:-999;
	background:var(--pageBg);
	background-position:left bottom;
	opacity:var(--pageBgOpacity);
}
/* ============================== */

/* ====== BORDERS STYLE ====== */
article::before { 
	content:'';
	z-index:99;
	position:fixed;
	top:0;
	left:0;
	display:block;
	width:100%;
	height:100vh;
	background-image:var(--borderTop), var(--borderBtm);
	background-position:top, bottom;
	background-repeat:repeat-x, repeat-x;
	pointer-events:none;
}
/* ============================== */

/* ======== TITLE STYLE ======== */
article h1 {
	position:relative;
	display:block;
	width:800px;
	max-width:100%;
	margin:calc(15px + var(--borderTopHeight)) auto 0.25em auto;
	background:var(--titleBg);
	font-size:var(--titleSize);
	font-family:var(--fontHead);
	color:var(--titleColor);
}
/* ============================== */

/* ======= FRAME STYLE ======== */
figure {
	z-index:9;
	position:relative;
	display:inline-block;
	max-width:calc(100% - 20px - var(--frameWidth) * 2 - var(--frameBorder) * 2);
	margin:10px auto 25px auto;
	transition:filter 0.1s ease-in-out;
}
figure.inspo {
	max-width:calc(100% - 20px - var(--inspoWidth) * 2 - var(--inspoBorder) * 2);
}
figure.inspo span:hover img, figure.art span:hover img {
	filter:var(--artHover);
 	transition:filter 0.1s ease-in-out;
}
figure span {
	position:relative;
	display:block;
}
figure span a {
	position:relative;
	display:block;
	max-width:100%;
	margin:auto;
	text-align:center;
}
figure span a img {
	z-index:-1;
	position:relative;	
	display:block;
	max-width:100%;
	min-height:100px;
	max-height:1024px;
	margin:auto;
}
/* ============================== */

/* ======= CAPTION STYLE ====== */
figcaption {
	position:relative;
	display:block;
	width:100%;	
	margin:auto;
	color:var(--captionColor);
}
figure figcaption small, figure.inspo figcaption small {
	position:relative;
	display:block;
	width:var(--captionWidth);
	height:var(--captionHeight);
	margin:var(--captionMargin);
	padding:var(--captionPadding);
	background:var(--captionBg);
	border:var(--captionBorder);
	font-size:var(--captionSize);
	filter:var(--captionFilter);
}
/* ============================== */

/* ===== YEAR/DATE STYLE ===== */
figure.art figcaption time, figure.inspo figcaption {
	display:block;
	margin-top:calc(var(--frameExtendY) + 25px);
	margin-bottom:10px;
	font-size:var(--dateSize, 2.2em);
	font-family:var(--fontHead);
	color:var(--dateColor);
	text-align:center;
	filter:var(--dateFilter);
}
figure.inspo figcaption {
	margin-bottom:calc(var(--inspoExtendY) + 25px);
}
/* ============================== */

/* === PREV/NEXT NAV STYLE === */
article nav {
	position:relative;
	display:block;
	width:700px;
	max-width:90%;
	height:var(--navHeight);
	margin:var(--navMargin, -100px) auto max(calc(-1 * calc(var(--navHeight) + var(--navMargin, -100px)) + 10px), 10px) auto;
	text-align:center;
	z-index:9;
}
article nav a {
	position:absolute;
	bottom:0;
	display:block;
	width:25%;
	font-size:var(--navFontSize);
	line-height:var(--navLineHeight);
	height:100%;
	font-family:var(--fontAlt);
	text-align:center;
	color:var(--navColor);
	text-shadow:var(--navTextshadow);
}
article nav a:hover {
	color:var(--navColorHover);
	text-shadow:var(--navTextshadowHover);
}
article nav a:first-of-type {
	left:0;
	background:var(--prevImg);
}
article nav a:first-of-type:hover {
	background:var(--prevImgHover);
}
article nav a:last-of-type {
	right:0;
	background:var(--nextImg);
}
article nav a:last-of-type:hover {
	background:var(--nextImgHover);
}
/* ============================== */

/* ======= DIVIDER STYLE ====== */
article hr {
	display:block;
	width:var(--divWidth, 100vw);
	height:var(--divHeight);
	background:var(--divImg);
	filter:var(--divShadow);
	margin:auto;
}
/* ============================== */

/* ======= ART FRAME STYLE ====== */
figure.art span {
	border:var(--frameBorder);
	filter:var(--frameShadow);
}
/* ============================== */

/*===== ART VERTICAL STYLE ==== */
figure.art span::before {
	content:'';
	z-index:19;
	position:absolute;
	top:0;
	left:calc(var(--frameOffsetX) * -1);
	display:block;
	width:calc(100% + var(--frameOffsetX) + var(--frameExtendX));
	height:100%;
	background-image:var(--frameImgLeft), var(--frameImgRite);
 background-size:var(--frameWidth) auto;
	background-position:left top, right top;
	background-repeat:no-repeat round;
	pointer-events:none;
}
/* ============================== */

/* == ART HORIZONTAL STYLE == */
figure.art span::after {
	content:'';
	z-index:15;
	position:absolute;
	left:0;
	top:calc(var(--frameOffsetY) * -1);
	display:block;
	width:100%;
	height:calc(100% + var(--frameOffsetY) + var(--frameExtendY));
	background-image:var(--frameImgTop), var(--frameImgBtm);
	background-position:left top, left bottom;
 background-size:auto var(--frameHeight);
	background-repeat:round no-repeat;
	pointer-events:none;
}
/* ============================== */

/* ===== ART CORNER STYLE ===== */
figure.art span a::before {
	content:'';
	z-index:19;
	position:absolute;
	left:calc(var(--frameOffsetX) * -1);
	top:calc(var(--frameOffsetY) * -1);
	display:block;
	width:calc(100% + var(--frameOffsetX) + var(--frameExtendX));
	height:calc(100% + var(--frameOffsetY) + var(--frameExtendY));
	background-image:var(--frameImgTopL), var(--frameImgTopR), var(--frameImgBtmL), var(--frameImgBtmR);
	background-position:left top, right top, left bottom, right bottom;
	background-repeat:no-repeat;
	background-size:var(--frameWidth) var(--frameHeight);
	pointer-events:none;
}
/* ============================== */

/* ====== STICKERS STYLE ====== */
figure.art span a::after {
	content:'';
	z-index:29;
	position:absolute;
	left:calc(var(--stickerOffsetX) * -1);
	top:calc(var(--stickerOffsetY) * -1);
	display:block;
	width:calc(100% + var(--stickerOffsetX) + var(--stickerExtendX));
	height:calc(100% + var(--stickerOffsetY) + var(--stickerExtendY));
	background-position:var(--stickerPosTopL), var(--stickerPosTopR), var(--stickerPosBtmL), var(--stickerPosBtmR);
	background-image:var(--stickerImgTopL), var(--stickerImgTopR), var(--stickerImgBtmL), var(--stickerImgBtmR);
	background-repeat:no-repeat;
	pointer-events:none;
}
/* ============================== */

/* ===== INSPO FRAME STYLE ==== */
figure.inspo span {
	border:var(--inspoBorder);
	filter:var(--inspoShadow);
}
/* ============================== */

/* === INSPO VERTICAL STYLE === */
figure.inspo span::before { 
	content:'';
	z-index:19;
	position:absolute;
	top:0;
	left:calc(var(--inspoOffsetX) * -1);
	display:block;
	width:calc(100% + var(--inspoOffsetX) + var(--inspoExtendX));
	height:100%;
	background-image:var(--inspoImgLeft), var(--inspoImgRite);
	background-position:left top, right top;
	background-repeat:no-repeat round;
	background-size:var(--inspoWidth) auto;
	pointer-events:none;
}
/* ============================== */

/* = INSPO HORIZONTAL STYLE = */
figure.inspo span::after { 
	content:'';
	z-index:15;
	position:absolute;
	left:0;
	top:calc(var(--inspoOffsetY) * -1);
	display:block;
	width:100%;
	height:calc(100% + var(--inspoOffsetY) + var(--inspoExtendY));
	background-image:var(--inspoImgTop), var(--inspoImgBtm);
	background-position:left top, left bottom;
	background-repeat:round no-repeat;
	background-size:auto var(--inspoHeight);
	pointer-events:none;
}
/* ============================== */

/* ==== INSPO CORNER STYLE ==== */
figure.inspo span a::before {
	content:'';
	z-index:19;
	position:absolute;
	left:calc(var(--inspoWidth) * -1);
	top:calc(var(--inspoHeight) * -1);
	display:block;
	width:calc(100% + var(--inspoOffsetX) + var(--inspoExtendX));
	height:calc(100% + var(--inspoOffsetY) + var(--inspoExtendY));
	background-image:var(--inspoImgTopL), var(--inspoImgTopR), var(--inspoImgBtmL), var(--inspoImgBtmR);
	background-position:left top, right top, left bottom, right bottom;
	background-repeat:no-repeat;
	background-size:var(--inspoWidth) var(--inspoHeight);
	pointer-events:none;
}
/* ============================== */

/* ========== CREDITS ========== */
article ul {
	display:flex;
	flex-wrap:wrap;
	height:auto;
	max-width:400px;
	margin:var(--inspoHeight, 0px) auto 0px auto;
	justify-content:center;
}
article ul li {
	position:relative;
	display:block;
	margin:0 5px;
	color:var(--colorKey);
}
article ul li.crDiv {
	font-family:'NotoEmoji','Comic Sans MS', sans-serif;
	font-weight:bold;
	font-size:20px;
	line-height:20px;
}
article ul li a img {
	width:20px;
	height:20px;
	filter:var(--credBorder);
}
article ul li:hover a img {
	transform:scale(1.5);
}
article ul li cite {
	position:absolute;
	z-index:99;
	top:0;
	left:0;
	display:none;
	transform:translate(calc(var(--credWidth) / -2 + 10px), calc(var(--credHeight) * -1 - 10px));
	width:calc(var(--credWidth) - var(--credPadLeft) - var(--credPadRite));
	height:calc(var(--credHeight) - var(--credPadTop) -  var(--credPadBtm));
	padding:var(--credPadTop) var(--credPadRite) var(--credPadBtm, 35px) var(--credPadLeft);
	background-image:var(--credImg);
	background-position:center;
	background-size:cover;
	background-repeat:no-repeat;
	font-size:var(--credSize, 0.85em);
	font-weight:normal;
	font-style:normal;
	font-family:var(--fontTiny);
	color:var(--credColor);
	filter:var(--credShadow);
}
article ul li:hover cite {
	display:block;
	text-shadow:none;
}
/* ============================== */

/* ========== FOOTER ========== */
main.exhibit footer p a {
	color:var(--footerColor);
}
main.exhibit footer small {
	margin:0 auto;
	font-size:1em;
}
main.exhibit footer small:first-of-type:before, main.exhibit footer small:first-of-type:after {
	content:' i ';
	display:inline-block;
	font-family:'EmojiFont';
}
main.exhibit footer small:first-of-type:before {
	transform:scaleX(-1);
}
/* ============================== */

/* ============================== */
/* ==== END EXHIBIT STYLE ==== */
/* ============================== */