/* !-------- Reset --- */
html,body {
  background: url(images/custom/background.jpg);
	background-size: cover;
	background-attachment: fixed;
  color: #392a48;
	font-family: 'Roboto', sans-serif;
	font-size: 14pt;
}
a {
	color: #a25ac3;
	text-decoration: none;
}
a:hover {
	color: #13cdff;
}

h3 {
	padding-bottom: 8px;
}


.page__content header {
	margin: 2rem auto 1rem auto;
}

.page {
	background: rgba(255, 255, 255, .8);
	max-width: 850px;
	padding: 0;
	margin: 20px auto;
}
header.page__header {
	width: 100%;
	padding-top: 16px;
	justify-content: center;
	background: -moz-linear-gradient(top, rgba(127, 0, 136, 0.5) 0%,rgba(255,255,255,0) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(127, 0, 136, 0.5) 0%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(127, 0, 136, 0.5) 0%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.page__header h2 a {
	display: block;
	width:;/*width: ;  Make this match your banner image’s width. */
	height: 372px; /* Make this match your banner image’s height. */
	background: url(images/custom/banner.png) center center no-repeat; /* This is the banner image. */
	background-size: 1000px 372px center center no-repeat; /* Handy tip: If you’re building retina graphics, make your banner image _twice_ as large as the space it will occupy, then use this line to shrink it into space. */
	font-size: 1px; /* This hides the site’s name (in text) while still making it SEO-friendly. */
	color: #20075b;
	padding: 0;
	margin: 0;
}

.page, header.page__header,
div#special {
	padding-left: 10px;
	Padding-right: 10px;
}

nav.header__menu {
	font-family: 'Londrina Solid', sans-serif;
	font-size: 1.6em;
}

.header__menu ul {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
}
.header__menu li {
	list-style-type: none;
	margin: 0 .3rem;
}
.header__menu a {
	color: #392a48;
	display: block;
	padding: 0.25rem;
}
.header__menu a:hover {
	color: #13cdff;
}
li.active a {
	color: #a25ac3;
}

/* If your links are graphics, then you need to specify their images and dimensions here. */
.menu-home {
	background: url(images/LLA/menu-home.png) center center no-repeat;
	width: 89px;
	height: 56px;
}
.menu-home span {
	visibility: hidden;
	font-size: 1px;
}
.menu-about {
	background: url(images/LLA/menu-about.png) center center no-repeat;
	width: 99px;
	height: 56px;
}
.menu-about span {
	visibility: hidden;
	font-size: 1px;
}
.menu-archives {
	background: url(images/LLA/menu-archives.png) center center no-repeat;
	width: 140px;
	height: 56px;
}
.menu-archives span {
	visibility: hidden;
	font-size: 1px;
}
.menu-support {
	background: url(images/LLA/menu-support.png) center center no-repeat;
	width: 133px;
	height: 56px;
}
.menu-support span {
	visibility: hidden;
	font-size: 1px;
}



main.page__content {
	padding-top: 12px;
}


.content__image img {
	border-radius: 10px;
	margin: 0.25rem;
}



.content__nav-1,
.content__nav-2 {
	margin: .4rem 0;
	display: flex;
	justify-content: center;
}
.content__nav-1 a,
.content__nav-2 a {
	height: 95px;
	width: 95px;
	display: block;
}

.first.navlink {
	background: url(images/custom/nav-first.png) center top no-repeat;
	background-size: cover;
}
.first.navlink:hover {
	background-position: center bottom;
}
.first.navlink span {
	visibility: hidden;
}
.prev.navlink {
	background: url(images/custom/nav-back.png) center top no-repeat;
	background-size: cover;
}
.prev.navlink:hover {
	background-position: center bottom;
}
.prev.navlink span {
	visibility: hidden;
}
.random.navlink {
	background: url(images/custom/nav-random.png) center top no-repeat;
	background-size: cover;
}
.random.navlink:hover {
	background-position: center bottom;
}
.random.navlink span {
	visibility: hidden;
}
.next.navlink {
	background: url(images/custom/nav-next.png) center top no-repeat;
	background-size: cover;
}
.next.navlink:hover {
	background-position: center bottom;
}
.next.navlink span {
	visibility: hidden;
}
.latest.navlink {
	background: url(images/custom/nav-latest.png) center top no-repeat;
	background-size: cover;
}
.latest.navlink:hover {
	background-position: center bottom;
}
.latest.navlink span {
	visibility: hidden;
}

.comic-images img {
	max-width: 99%;
}




.page__comic article {
	text-align: center;
}
.page__comic h1 {
	visibility: hidden;
	font-size: 1px;
}

.page__content header {
	display: none;
}

.secondary__blog {
	flex: 3;
	margin: 1rem;
}
.byline {
	display: none;
}
.publication-date {
	display: none;
}
.secondary__blog p {
	line-height: 1.4rem;
	margin-bottom: 1rem;
}


/* !-------- Social and follow --- */

.secondary__follow {
	flex: 1;
	text-align: center;
	margin: 1rem 0;
}
.secondary__follow a {
	padding: 0.5rem;
	display: block;
}
.share-icons {
	display: flex;
	flex-wrap: wrap;
}
.social-icon {
	width: 24px;
	height: 24px;
}

/* Hide from sighted readers, but keep available for search engines and screen readers. */
.secondary__transcript {
	position: absolute;
	margin-left: -10000px;
}

footer {
	font-size: .7em;
	text-align: center;
	margin: 2rem;
}


/* !-------- Archive --- */

li.item.page {
	padding: 0.5rem;
	align-items: flex-start;
}

.small-block-grid-2 {
	display: flex;
	flex-wrap: wrap;
}