/* import theme-font.css for font types */
@import url('theme-fonts.css');

/* import theme-palette.css for color scheme */
@import url('theme-palette.css');

:root {
	--alignment: left;
	--max-width: 1285px;
	--footer-height: 35px;
}


/* Baseline Defaults */
* {box-sizing: border-box}
html {
	font-size: 18px;
	height: 100%;
}

body {
	font-family: var(--font-1), Arial, Helvetica, sans-serif;
	color: var(--text-color-1);
	text-align: var(--alignment);
	min-height: 100%;
	position: relative;
	background: var(--body-bg-base);
	background: var(--body-bg-gradient);
	background-size: cover;
	/* background-image: var(--body-bg-img); */
	padding-bottom: var(--footer-height);
}


/* Headers */
h1, h2, h3, h4, h5, h6 {
	margin: .25em 0;
}
h1 {
	font-family: var(--font-2), 'Arial Narrow Bold', sans-serif;
	color: var(--text-color-2);
	font-size: 2em;
	font-weight: bold;
}
h2 {
	font-family: var(--font-2), 'Arial Narrow Bold', sans-serif;
	font-size: 2rem;
	font-weight: bold;
}
h3 {
	font-family: var(--font-2), 'Arial Narrow Bold', sans-serif;
	font-size: 1.6rem;
	font-weight: bold;
	margin: 5px 0;
}
h4 {
	font-size: 1.2rem;
	font-weight: bold;
}
/* Common Element Defaults */
a {
	color: var(--link-color-1);
}
a:hover {
	color: var(--link-color-1-hover);
}
img {
	max-width: 100%;
	height: auto;
}
p {
	margin: 12px 0px;
}

hr {
	background: #58563D;
	background: linear-gradient(100deg, rgba(88,86,61,0) 10%, rgba(198,219,185,1) 50%, rgba(88,86,61,0) 90%);
	height: 3px;
	width: 100%;
	margin:  10px auto;
	border:none;
}

/* ////////////////////////// */


/* Main Site Components */
header {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	text-align: left;
	position: relative;
	margin: auto;
	width: var(--max-width);
	max-width: 100%;
}
header .title-area {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	margin:0;
}
header .title-area h1 {
	font-size: 2.5em;
	margin:0;
	position: relative;
	top: 4px;
}
.header-accent {
	position: absolute;
	right: 100%;
}
.header-breaker {
	background: #58563D;
	background: linear-gradient(100deg, rgba(88,86,61,1) 10%, rgba(198,219,185,1) 25%, rgba(88,86,61,0) 85%);
	height: 3px;
	width: 100%;
	margin:0;
	position: relative;
	left: -139px;
}

main {
	margin: 0 auto;
	width: 96vw;
	max-width: var(--max-width);
}

.menu-links {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	font-size: 1.25em;
	padding: 4px 0 15px;
}

nav#site-menu ul {
	justify-content: flex-start;
	font-family: var(--font-3);
	gap: 0px 25px;
	line-height: 1em;
	padding-bottom: 10px;
}
nav#site-menu ul a {
	color: var(--link-color-2);
}nav#site-menu ul a:hover {
	color: var(--link-color-2-hover);
}

nav#site-menu ul.automenu li {
	padding: 2px 5px;
	position: relative;
}

nav#site-menu ul.automenu li:hover>a {
	color: var(--link-color-2-hover);
	z-index: 5;
}nav#site-menu ul.automenu li:hover {
	background: rgba(0, 0, 0, .7);
}
.automenu-submenu {
    background: rgba(0, 0, 0, .7);
} .automenu-submenu a {
	white-space: nowrap;
}
nav#site-menu ul li.automenu-item:hover ul.automenu-submenu {
	padding: 5px 10px;
	width: fit-content;
	top: 100%;
	left:0;
  }

.cms-socials{
	margin: 0 8px;
}
ul.cms-socials-list svg {
	height:1.25em;
	width: auto;
}

.gallery {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	gap: 12px;
}

footer {
	font-size: .8em;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--footer-height);
	display: flex;
    justify-content: center;
    align-items: center;
}

/* Styles */

#page_1 .page-sects {
	display: grid;
	grid-template-areas: 
	"legd legd legd"
	"news news sctn";
	gap: 15px 25px;
} section.home-legend {
	grid-area: legd;
	margin-bottom: 0;
} section.news {
	grid-area: news;
} section.screen-tones {
	grid-area: sctn;
	width: 350px;
}

.section {
	margin-bottom: 15px;
}

.sect-text {
	text-align: left;
	margin-bottom: 25px;
}
.sect-text:empty, .item-image-wrapper:empty {
	height:0;
	width:0;
	display: none;
}

section.home-legend div.sect-items {
	display: flex;
	flex-direction: row;
	-webkit-mask-image: url('images/brush-mask.png');
	mask-image: url('images/brush-mask.png');
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	mask-size: contain;
}
section.home-legend div.sect-items .item {
	flex:1;
}
.big-legend-link {
	position: relative;
	flex:1;
	height:480px;
}
.big-legend-link a {
	display: block;
}
.big-legend-link .item-title {
	position: absolute;
	color: white;
	left: 25px;
	top:10px;
	z-index: 5;
}
.big-legend-link .item-image {
	position: absolute;
	width:340px;
	right:0;
	left: 0;
	max-width: unset;
	-webkit-mask-image: url('images/link-brush-mask.png');
	mask-image: url('images/link-brush-mask.png');
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	mask-size: contain;
}

.contact-detail {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
}.contact-detail label {
	font-weight: bold;
	padding-right: 8px;
	margin: 8px 0;
}

.horizontal-header,
.comic-view-top {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 2%;
}.horizontal-header>*:nth-child(1),
.comic-view-top .sect-image-wrapper {
	max-width: 100%;
	flex:1;
}.horizontal-header>*:nth-child(2),
.comic-view-top .sect-text {
	max-width: 100%;
	flex:2;
} 

.comic-view .sect-items-wrapper {
	padding: 8px 16px;
	background: rgba(0, 0, 0, .65);
	border-radius: 3px;
	margin-top: 16px;
}.comic-view .sect-items {
	padding: 8px;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	flex-wrap: wrap;
	gap: 12px;
}
.comic-view .sect-items a img.item-image {
	border: solid 2px var(--link-color-1);
	border-radius: 3px;
}.comic-view .sect-items a img.item-image:hover {
	border: solid 2px var(--link-color-1-hover);
}

.comic-view .sect-text {
	display: flex;
	flex-direction: column;
	justify-content: stretch;
	align-items: stretch;
	background: var(--bg-color-2);
	padding: 15px;
	color: var(--text-color-3);
	margin-bottom: unset;
}
.comic-view .sect-text a{
	color: var(--link-color-3);
	font-weight: bold;
}.comic-view .sect-text a:hover {
	color: var(--link-color-3-hover);
}
.comic-view label {
	font-size: 1.2em;
	font-weight: normal;
}

.comics-list .sect-items.gallery {
	justify-content: center;
	gap:17px;
}

.gallery.item-image-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 150px;
  height: 120px;
  overflow: hidden;
} .gallery.item-image-wrapper img {
	max-width: unset;
	max-height: unset;
	min-height: 100%;
	position: absolute;
}.gallery.item-image-wrapper.top {
	align-items: flex-start;
}.gallery.item-image-wrapper.bottom {
	align-items: flex-end;
}.gallery.item-image-wrapper.left {
	justify-content: flex-start;
}.gallery.item-image-wrapper.right {
	justify-content: flex-end;
}

section.news .sect-title {
	margin: 0;
}

section.news .item {
	background-color: rgba(125,125,125,.5);
	margin-top: 20px;
}
.news-headline {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	padding: 2px 8px;
	gap: 0 15px;
	color: black;
	background-color: rgb(158, 172, 128);
}.news-headline .item-date {
	opacity: .75;
}
.news-content {
	padding: 12px;
}

.sold-marker {
	position: absolute;
	bottom:2px;
	right:1px;
	font-size: 10px;
	font-weight: bold;
	background: rgb(205, 0, 0);
	margin: 0px 1px;
	height: 8px;
	width: 8px;
	border-radius: 50%;
}

.lb-horizontal {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 25px;
	max-width: var(--max-width);
}.lb-horizontal .lb-text-wrapper {
	flex:1;
}.lb-horizontal .lb-content-wrapper {
	flex:3.5;
	display: flex;
	justify-content: center;
	align-items: center;
}.lb-format-horizontal #lightbox-arrows.cms-default {
	align-items: flex-end;
}


.mobile-only {
	display: none;
}


@media screen and (max-width: 1284px) {
	nav#site-menu ul,
	.gallery {
		justify-content: center;
	}
	.home-legend {
		display: none;
	}

	#page_1 .page-sects {
		display: grid;
		grid-template-areas: 
		"sctn"
		"news";
  }
  section.screen-tones {
	width: 100%;
	margin-bottom: 0;
}
	section.screen-tones .item-embed-wrapper iframe {
		height: 80px;
	}
}
  @media screen and (max-width: 700px) {
	.mobile-only {
		display: none;
	}
	.section {
		padding: 0 1% 25px;
	}
	nav#site-menu ul,
	.gallery {
		justify-content: space-evenly;
	}
	.header-breaker {
		background: linear-gradient(100deg, rgba(88,86,61,1) 10%, rgba(198,219,185,1) 40%, rgba(88,86,61,0) 95%);
	}
	.horizontal-header {
		flex-direction: column;
	}
  }