h1 {font-size: 3em;}
h2 {font-size: 2em;}
h1, h2, h3, figure {
	font-weight: bold;
	text-align: center;
}
.inset-layout {
	box-sizing: border-box;
	width: 100%;
	margin: 16px 0px;
	border: 2px outset #A0A0A0;
	background-color: #E0E0E0;
	padding: 2px;
}
.inset-layout h1, .inset-layout h2, .inset-layout h3, .inset-layout p, .inset-layout figure {
	margin: 2px;
	border: 2px inset #A0A0A0;
	background-color: white;
	padding: 4px;
}
.inset-layout figure {padding: 0;}
.inset-layout img {vertical-align: middle;}
.mold-nav {
	display: flex;
	flex-wrap: wrap;
	text-align: center;
}
.mold-nav.switch {display: block;}
.mold-nav > * {
	display: inline-block;
	margin: 2px;
	border: 2px outset #D0E0FF;
	background-color: #F0F8FF;
	padding: 4px;
	text-decoration: none;
	color: black;
	font-weight: 900;
	font-size: 1.2em;
}
.mold-nav > a:active, .mold-nav > .dummy {border-style: inset;}
.mold-nav > a:active {transform: scale(0.95);}
.mold-nav > .dummy {display: none;}
.mold-nav.ranges > * {
	flex: 1 0 100px;
	font-family: Arial, sans-serif;
	font-size: 1.5em;
}
.mold-nav.ranges > .dummy {
	position: relative;
	bottom: -6px;
	border-color: #A0A0A0;
	border-bottom-width: 0;
	background-color: white;
}
.mold-nav.categories > * {
	flex: 1 0 108px;
	line-height: 1;
	border-color: #666666;
	background-color: #AAAAAA;
	background-position: top;
	background-size: cover;
	padding: calc(70px - 1em) 2px 2px 2px;
	color: white;
	text-shadow: 0 0 0.1em black, 0 0 0.1em black, 0 0 0.2em black, 0 0 0.2em black, 0 0 1px black;
}
.mold-nav.categories > .castle {background-image: url("moldscast.jpg");}
.mold-nav.categories > .gothic {background-image: url("moldsgoth.jpg");}
.mold-nav.categories > .field {background-image: url("moldsfield.jpg");}
.mold-nav.categories > .cavern {background-image: url("moldscav.jpg");}
.mold-nav.categories > .village {background-image: url("moldsvill.jpg");}
.mold-nav.categories > .egypt {background-image: url("moldsegypt.jpg");}
.mold-nav.categories > .rome {background-image: url("moldsrome.jpg");}
.mold-nav.categories > .scifi {background-image: url("moldssci.jpg");}
.mold-nav.categories > .floor {background-image: url("moldsfloor.jpg");}
.mold-nav.categories > .roof {background-image: url("moldsroof.jpg");}
.mold-nav.categories > .modern {background-image: url("moldsmodern.jpg");}
.mold-nav.categories > .specialty {background-image: url("moldspecialty.jpg");}
.mold-nav.categories > .dummy {
	filter: brightness(0.5);
	transform: scale(0.95);
}
.mold-nav.categories::after {
	content: "";
	flex: 3 0 324px;
	margin: 0 18px;
}
.mold {
	display: flex;
	flex-wrap: wrap;
}
.mold figure {position: relative;}
.mold figure > img {
	min-width: 100px;
	min-height: 100px;
	max-width: 200px;
	max-height: 300px;
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48ZyBzdHJva2U9ImJsYWNrIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBmaWxsPSJ3aGl0ZSIgZD0iTTM5LjgsMTguMkg3NC41VjgxLjlIMjUuNVYzMi41SDM5LjhaTTM5LjgsMzIuNVYxOC4yTDI1LjUsMzIuNVoiLz48cGF0aCBmaWxsPSIjRTZFNkU2IiBzdHJva2Utd2lkdGg9IjAuNSIgZD0iTTM3LjI4LDQ2LjFMNDMuMjYsNTEuNVY2M0wzNy4yOCw1Ny41Wk0zNy4yOCw0Ni4xTDU2Ljc1LDQwTDYyLjcyLDQ1LjRMNDMuMjYsNTEuNVpNNDMuMjYsNjNMNjIuNzIsNTYuOVY0NS40TDQzLjI2LDUxLjVaIi8+PC9nPjwvc3ZnPg");
	background-repeat: no-repeat;
	background-size: 100px 100px;
	background-position: center;
}
.mold figure > a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-decoration: none;
}
.mold .navlink {
	position: absolute;
	bottom: 0;
	box-sizing: border-box;
	width: 100%;
	background-image: linear-gradient(transparent, rgba(208, 208, 208, 0.8));
	padding: 0.4em 0.1em 0.1em 0.1em;
	font-size: 1.2em;
	text-shadow: 0 0 0.05em white, 0 0 0.1em white, 0 0 0.15em white, 0 0 0.2em white;
}
.mold figure.sketch {
	flex: 1 0 30%;
}
.mold figure.sketch > img {
	max-width: 300px;
	max-height: 350px;
}
.mold .info, .mold .demo {
	display: flex;
	flex-direction: column;
}
.mold .info {flex: 3 0 30%;}
.mold .demo {flex: 0 1 0;}
.mold .number {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.2em;
}
.mold .name {font-size: 1.5em;}
.mold .description {flex: 1;}
.mold .price {
	font-weight: bold;
	text-align: center;
}
.mold .warning {flex: 1 0 100%;}
.mold .warning strong {color: red;}
.mold-footer {
	font-weight: bold;
	text-align: center;
}
@media (max-width: 799px) {
	h1 {font-size: 2em;}
	h2 {font-size: 1.5em;}
	.mold.mold figure > img {max-width: 100%;}
	.mold-nav.ranges > * {font-size: 1.2em;}
	.mold-nav.ranges > .dummy {visibility: hidden;}
	.mold figure.sketch {flex: 1 1 50%;}
	.mold section.demo {flex: 1 1 40%;}
	.mold section.info {
		flex: 1 0 100%;
		order: 3;
	}
	.mold aside {order: 4;}
}