/* || RESET */
*{ position: relative; margin: 0; padding: 0;}
.floatRight{float:right;} .floatLeft{float:left;} .clear{ clear: both; }
a{color: white; text-decoration: none;}
button:focus{outline: none;}

/* GENERAL STYLES */ @media screen{
	
html
{
	-webkit-font-smoothing: antialiased;
}

body
{
	width: 100vw;
	height: 100vh;
	z-index: 9;
}

p, li
{
	font-family: 'Poppins', sans-serif;
	font-size: 16px;
	font-weight: 300;
	color: #0A1d35;
	
	margin: 0 0 21px 0;
	line-height: 28px;
}

h1, h2, h3, h4, h5
{
	font: 'Poppins', sans-serif;
	font: 32px;
	font-weight: 700;
	color: #0A1d35;
}

h2
{
	font-family: 'DM Serif Display', serif;
	font-size: 24px;
	line-height: 32px;
	font-weight: 400;
	color: #0A1d35;
	
	text-transform: capitalize;
	letter-spacing: .01em;
	
}

h3
{
	font-family: 'Poppins', sans-serif;
	font-size: 11px;
	line-height: 21px;
	font-weight: 700;
	color: #B8967E;
	
	text-transform: uppercase;
	letter-spacing: .1em;
}

h5
{
	font-family: 'Poppins', sans-serif;
	font-size: 12px;
	font-weight: 700;
	color: #0A1d35;
	
	text-transform: uppercase;
	letter-spacing: .32em;
}

a
{
	font-family: 'Poppins', sans-serif;
	font-size: 16px;
	font-weight: 700;
	color: #B29071;
	
	transition: color 0.3s ease;
}

ul, ol
{
	
}

li
{
	list-style-type: none;
}

.highlight
{
	outline: 1px solid red;
}

div::-webkit-scrollbar, ul::-webkit-scrollbar { display: none; }

div, ul{
	scrollbar-width: none;
	-ms-overflow-style: none;
}

}

/* MAIN NAVIGATION */ @media screen{
	
nav
{
	height: 72px;
	width: 100%;
	padding-top: 8px;
}

.main-nav
{
	max-width: 960px;
	height: 90%;
	
	margin: 0 auto;
	
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.logo
{
	padding: 16px;
	margin-left:16px;
}

.logo img
{
	top: 4px;
}

.menuToggle /* { */
{
	display: block;
	position: relative;
	padding: 18px 16px 14px;
	margin-right:16px;
	
	-webkit-user-select: none;
	user-select: none;
}

.menuToggle input
{
	display: block;
	width: 37px;
	height: 37px;
	position: absolute;
	top: 5px;
	left: 9px;
	
	cursor: pointer;
	
	opacity: 0;
	z-index: 7;
	
	-webkit-touch-callout: none;
}

.menuToggle span
{
	display: block;
	width: 24px;
	height: 3px;
	margin-bottom: 3px;
	position: relative;
	
	background: #B29071;
	border-radius: 3px;
		
	z-index: 1;
	
	transform-origin: 4px 0px;
	
	transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
				background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
				opacity 0.55s ease;
}

.menuToggle span:first-child
{
	transform-origin: 0% 0%;
}

.menuToggle span:nth-child(2)
{
	transform-origin: 0% 100%;
}

.menuToggle input:checked ~ span
{
	opacity: 1;
	transform: rotate(45deg) translate(-1.1px, -3.1px);
	background: #B29071;
}

.menuToggle input:checked ~ span:nth-last-child(3)
{
	opacity: 0;
	transform: rotate(0deg) scale(0.2, 0.2);
}

.menuToggle input:checked ~ span:nth-last-child(2)
{
	transform: rotate(-45deg) translate(0, 0);
}

.menu
{
	position: fixed;
	width: 100vw;
	height: 100vh;
	right: 0px;
	top: 74px;
	z-index: 99;
	
	opacity: 0;
	visibility: hidden;
	
	background: #0A1d35;
	list-style-type: none;
	-webkit-font-smoothing: antialiased;
	
	transform-origin: 0% 0%;
	
	transition: opacity 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
}

.menu h5
{
	margin-bottom: 16px;
}

.menu h5, .menu p
{
	color: white;
}

.menu li
{
	font-family: 'Poppins', sans-serif;
	font-size: 16px;
	font-weight: 700;
	
	transition: color 0.3s ease;
	
	text-align: center;
	text-transform: uppercase;
	letter-spacing: .32em;
	
	padding: 8px 0;
	line-height: 24px;
}

.menu a li
{
	color: white;
}

.menu a:hover li
{
	background: #B29071;
	color: white;
}

.menuToggle input:checked ~ ul
{
	opacity: 1;
	visibility: visible;
}

.menuWrap
{
	padding: 64px 32px;
	width: calc(100% - 64px);
	max-width: calc(960px - 64px);
	margin: 0 auto;
	display: flex;
	flex-direction: row;
	justify-content: center;
}

.aboutWrap
{
	width: 50%;
}

.artistWrap
{
	margin-left: 64px;
	width: 150px;
}

ul.artist-list li
{
	font-size: 11px;
	text-align: left;
	font-weight: 500;
	
	text-transform: capitalize;
	text-decoration: underline;
	letter-spacing: 0;
	
	line-height: 0;
	padding-bottom: 18px;
}

ul.artist-list a:hover li
{
	background: initial;
	color: #B29071;
}

}

/* HOME PAGE */ @media screen{
	.home-main-content
	{
		display: flex;
		height: 100%;
		z-index: -2;
	}
	
	.home-menu
	{
		display: flex;
		align-items: center;
		flex-direction: column;
		
		width: 70%;
		max-width: 960px;
		margin: 16px auto;
	}
	
	.home-menu li
	{
		font-family: 'Poppins', sans-serif;
		font-size: 32px;
		font-weight: 600;
		color: #e7e7e7;
		text-transform: uppercase;
		letter-spacing: .24em;
		
		margin: 0 0 21px 0;
		line-height: 42px;
		text-align: center;
	}
	
	.home-menu a li
	{
		color: #B29071;
	}
	
	.home-menu a:hover li
	{
		color: #0A1d35;
	}
}

/* SUB MENU */ @media screen{
	
	.flickity-button
	{
		background: white;
		border: solid 2px #B29071;
		bottom: -80px;
		top: initial;
		height: 30px; width: 30px;
	}
	
	.flickity-prev-next-button.previous { left:  calc(50% - 240px); }
	.flickity-prev-next-button.next 	{ right: calc(50% - 240px); }
	
	.flickity-prev-next-button .flickity-button-icon
	{
		fill: #B29071;
	}
	
	.flickity-page-dots
	{
		position: fixed;
		top: auto; bottom: 0;
		left: 0; right: 0;
		
		width: 100%;
		height: 10px;
		overflow: hidden;
	}
	
	.flickity-page-dots .dot
	{
		background: #E7e7e7;
		width: 12.5%;
		margin: 0;
		border-radius: 0;
		opacity: 1;
		
		height: 10px;
		top: 0;
	}
	
	.flickity-page-dots .dot.is-selected
	{
		background: #B29071;
	}
}

/* MAIN CAROUSEL */ @media screen{
	
	.main-content-wrapper
	{
		overflow: hidden;
		height: calc(100vh - 80px);
	}
	
	.main-carousel
	{
		height: calc(100vh - 200px);
		width: 100vw;
	}
	
	.flickity-viewport
	{
		height: 100% !important;
		overflow: visible !important;
	}
	
	.carousel-cell
	{
		height: 100%;
		width: 100%;
		
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		
		z-index: -2;
	}
	
	.carousel-cell.cell-start
	{
		justify-content: start;
	}
	
	.titleCard
	{
		width: 400px;
		text-align: center;
		position: absolute;
		bottom: -85px;
		background: white;
	}
	
	.titleCard.twoLine
	{
		bottom: -95px;
	}
	
	.titleCard h5
	{
		font-size: 20px;
		line-break: 24px;
	}
	
	.titleCard h3.thread
	{
		color: #ccc;
		bottom: -3px;
	}
	
	.imageWrapper
	{
		width: auto;
		height: 80%;
		touch-action: pinch-zoom;
		overflow: hidden;
	}
	@media screen and (max-width: 460px){
		.imageWrapper { width: 340px; height: 340px; }}
	
	.imageWrapper img
	{
		height: 100%;
	}
	
	.imageWrapper video
	{
		width: 100%; height: auto;
	}
	
	.wordWrapper
	{
		width: 100%; height: 100%;
		max-width: 700px;
		
		background: #fff;
		border-top: 	1px solid #e7e7e7;
		border-bottom: 	1px solid #e7e7e7;
		
		overflow-y: scroll;
	}
	
	.wordContainer
	{
		max-width: 540px;
		width: 80%;
		margin: 0 auto;
		margin-top: 32px;
	}
	
	.wordContainer ul
	{
		width: 90%;
		margin: 0 auto
	}
	
	.word-bar
	{
		width: 240px;
		height: 2px;
		background: #e7e7e7;
		margin: 16px 0;
	}
	
	.center-text
	{
		text-align: center;
	}
	
	.center-text .word-bar
	{
		margin: 16px auto;
	}
	
	.audioWrapper
	{
		max-width: 420px;
		width: 80%;
		
		margin-bottom: 24px;	
	}
	
	audio {	width: 100%; }
	audio:focus{ outline: none; }
	
	.comicWrapper {
		margin: 0 auto;
		height: 80%;
	 }

	.comicCarousel
	{
		height: 100%;
		width: 70vw;
		max-width: 480px;
		top: 0;
		
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-content: center;
	}
	
	.comicCarousel .flickity-viewport
	{
		order: 2;
	}
	
	.comicCarousel .flickity-prev-next-button
	{	
		position: relative;
		top: 105%;
		right: 0;
		left: 0;
		height: 18px;
		width: 30%;
		order: 1;
		background: #eaeaea;
		border-radius: initial;
		border: none;

	}
	
	.comicCarousel .flickity-prev-next-button.next{
		order: 3;
		border-left: white solid 1px;
	}
	
	
	.comicCarousel .flickity-prev-next-button svg
	{
		fill: #FFF;
	}
	
	.comicImageWrapper img
	{
		margin: auto;
		height: 100%;
		border: solid 1px #ddd;
		position: absolute;
	}
}

/* MOBILE RESPONSIVE */ @media screen and (max-width: 640px){
	* { -webkit-touch-callout: none; -webkit-user-select: none;
		-khtml-user-select: none; -moz-user-select: none; -ms-user-select: none;
		user-select: none; -webkit-tap-highlight-color: transparent;
	}
	
	.logo
	{
		position: absolute;
		padding: 0;
		margin: 0 20%;
		width: 60%;
		z-index: 9;
	}
	
	.logo img
	{
		margin: 0 auto;
		top: 0px;
		display: block;
		height: 24px;
	}
	
	.menuToggle /* { */
	{
		padding: 18px 0 14px;
		width: 100%;
	}
	
	.menuToggle span
	{
		left: 16px;
	}
	
	.menu
	{
		position: fixed;
		width: 100vw;
		height: 100vh;
		
		top: 70px;
		right: initial;
		padding: 0;
		
		box-shadow: initial;
		border: none;
	}
	
	.menu li
	{
		padding: 12px 0;
	}
	
	.menuWrap
	{
		flex-direction: column;
		justify-content: start;
	}
	
	.aboutWrap
	{
		width: 100%;
	}
	
	.artistWrap
	{
		width: 100%;
		margin: initial;
	}
	
	.artist-list-wrapper
	{
		display: flex;
		flex-direction: row;
	}
	
	.artist-list-wrapper ul:first-child
	{
		margin-right: 64px;
	}
	
	.flickity-prev-next-button.next
	{
		right: 25px;
	}
	
	.flickity-prev-next-button.previous
	{
		left: auto;
		right: 70px;
	}
	
	.comicCarousel .flickity-prev-next-button.next,
	.comicCarousel .flickity-prev-next-button.previous{
		left: 0;
		right: 0;
	}
	
	.titleCard
	{
		text-align: left;
		left: 20px;
		bottom: -80px;
		background: none;
	}
	
	.titleCard.twoLine
	{
		bottom: -90px;
	}
	
	.titleCard h2
	{
		font-size: 21px;
		line-height: 24px;
	}
	
	.comicImageWrapper img
	{
		width: 70vw;
		max-width: 300px;
		height: auto;
	}
	
	.comicCarousel .flickity-prev-next-button
	{	
		top: 112%;
	}

}