@charset "utf-8";
:root {
	--background-blue: 	#1e4495;
	--highlight-color: 	#1e4495;
	--margin-container: 120px;
	--margin-block: 	60px;
	--margin-exterior: 	30px;
	--margin-interior:  15px;
	--margin-element: 	5px;
}

/* -------------------------------------------------------------------------- */
/* -- INCLUDE THE ICON FONT ------------------------------------------------- */
@font-face {
	font-family: 	'iconfont';
	src: 			url('../eot/iconfontdbbd.eot');
	src:			url('../eot/iconfontdbbd.eot#iefix') format('embedded-opentype'),
					url('../woff2/iconfontdbbd.woff2') format('woff2'),
					url('../woff/iconfontdbbd.woff') format('woff'),
					url('../ttf/iconfontdbbd.ttf') format('truetype'),
					url('../svg/iconfontdbbd.svg#iconfont') format('svg');
	font-weight: 	normal;
	font-style: 	normal;
}

/* -------------------------------------------------------------------------- */
/* -- ELEMENT RESET --------------------------------------------------------- */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 			0;
  padding: 			0;
  border:			0;
  font-size: 		100%;
  font: 			inherit;
  vertical-align: 	baseline;
}

/* -------------------------------------------------------------------------- */
/* -- DEFAULTS -------------------------------------------------------------- */
* {
	-webkit-tap-highlight-color:	rgba(0, 0, 0, 0);
	-webkit-font-smoothing:			antialiased;
	box-sizing: 					border-box;
}

html, body {
	margin: 			0px;
	width: 				100%;
	height: 			100%;
	padding: 			0px;
}

html {
	font: 				normal 16px/22px 'Roboto', sans-serif;
}

a {color: var(--highlight-color);}
*:focus {outline:none;}

strong {
	font-weight: 		bold;
}

em {
	font-style: 		italic;
}

img {
	display: 			block;
	max-width: 			100%;
	height: 			auto;
}

.mobile-only {
	display: 			none;
}

/* -------------------------------------------------------------------------- */
/* -- HEADERS --------------------------------------------------------------- */
h1 {
	font: 			bold 4.0rem/4.0rem 'Oswald', sans-serif;
}

h2 {
	font: 			normal 2.5rem/3.0rem 'Oswald', sans-serif;
}

h3 {
	font: 			normal 1.6rem/2.5rem 'Oswald', sans-serif;
}

h4 {
	font: 			normal 1.2rem/1.8rem 'Oswald', sans-serif;
}

/* -------------------------------------------------------------------------- */
/* -- SECTIONS -------------------------------------------------------------- */
header {
	position: 			fixed;
	top: 				0px;
	left: 				0px;
	z-index: 			1001;
	display: 			flex;
	width: 				100%;
	height: 			100px;
	background-color: 	rgba(255,255,255,0.95);
	border-top: 		5px solid #1e4495;
	border-bottom: 		1px solid #b7b7b7;
	box-shadow: 		0px 0px 14px rgba(0,0,0,0.3);
	box-sizing: 		border-box;
	padding: 			5px 10px;
}

header img {
	max-height: 		80px;
}

main {
	position: 			relative;
	padding: 			100px 0px 0px 0px;
}

:target {
	scroll-margin-top: 	100px;
}

footer {
	display: 			flex;
	border-top: 		1px solid #000;
	background-color: 	#1e4495;
	padding: 			var(--margin-block);
	font-size: 			1.3rem;
	line-height: 		1.8rem;
	justify-content: 	space-between;
	color: 				#FFF;
}

footer a {
	color: 				#FFF;
}

footer section {
	flex: 				0 1 25%;
	text-align: 		left;
}

footer section:last-child {
	text-align: 		right;
}

.widget-footer {
	margin:				var(--margin-interior) 0 var(--margin-interior) auto;
	width: 				260px;
	border: 			1px solid #EAEAEA;
	border-radius: 		2px;
	background-color: 	#FFF;
	box-shadow: 		0px 0px 10px rgba(0,0,0,0.5);
	padding: 			var(--margin-element);
}

/* -- SCROLL BUTTON --------------------------------------------------------- */
.button-scroll {
	position: 			fixed;
	right: 				15px;
	bottom: 			85px;
	z-index: 			3001;
	width: 				40px;
	height: 			40px;
	box-shadow: 		1px 1px 5px rgba(0,0,0,0.6);
	border: 			0;
	border-radius: 		5px;
	background-color: 	#1e4495;
	line-height: 		40px;
	text-align:			center;
	color: 				#FFF;
	font-size: 			2.0rem;
	cursor: 			pointer;
	opacity: 			0;
  	transform: 			translateY(100px);
  	transition: 		all 0.5s ease;
}

.button-scroll-show {
	opacity: 			1;
  	transform: 			translateY(0);
}

/* -------------------------------------------------------------------------- */
/* -- HEADER ---------------------------------------------------------------- */
.header-phone-single {
	flex: 				1;
	padding-right: 		15px;
	text-align:			right;
	font-size: 			2.4rem;
	line-height: 		84px;
}

.header-phone-single a {
	text-decoration: 	none;
}

.header-logo {
	flex: 				0 0 80px;
}

.header-logo img {
	width: 				80px;
	height: 			80px;
}

.header-content {
	flex: 				1 1 auto;
	display: 			flex;
	flex-wrap: 			wrap;
	padding-left: 		10px;
}

nav {
	flex:	 			0 0 50%;
	text-align: 		left;
}

nav div {
	display: 			inline-block;
	margin: 			0px 8px;
	width: 				auto;
	height: 			30px;
	padding: 			5px 0px;
	line-height: 		30px;
	font-size: 			24px;
	text-align: 		center;
	text-decoration: 	none;
}

nav div:first-child {
	margin-left:		0px;
}

nav div:last-child {
	margin-right:		0px;
}

nav div a {
	color: 				#1e4495;
}

nav div a.menu-active {
	background-color: 	#087bc7;
	color: 				#fff;
}

nav div span {
	margin-left: 		5px;
	font-size: 			0.8rem;
	line-height: 		30px;
}

#shopping-cart, #menu-button-user {
	position: 			relative;
}

#shopping-cart {
	display: 			inline;
}

#shopping-cart span.cart-total {
	position: 			absolute;
	top: 				0px;
	left: 				-20px;
	z-index: 			1200;
	width: 				15px;
	height: 			15px;
	border-radius: 		50%;
	font-size: 			10px;
	line-height: 		15px;
	text-align: 		center;
	background-color: 	#990000;
	color: 				#fff;
}

.cart-animation {
	animation: 			fade-bounce 0.5s;
}

#shopping-cart span.cart-amount {
	margin-left: 		0px;
	font-size: 			0.8rem;
	line-height: 		30px;
	color: 				#1e4495;
	cursor: 			pointer;
}

.cart-overlay:before {
	content: 			'';
	position: 			absolute;
	top: 				-12px;
	left: 				155px;
	border-bottom: 		12px solid #f8f8f8;
	border-left: 		12px solid transparent;
	border-right: 		12px solid transparent;
}

.cart-overlay {
	display: 			none;
	position: 			absolute;
	right: 				-115px;
	top: 				40px;
	z-index: 			1000;
	width: 				320px;
	height: 			auto;
	border-radius: 		5px;
	box-shadow: 		0px 0px 5px rgba(0,0,0,0.4);
	background-color: 	#f8f8f8;
	padding: 			10px;
}

.cart-overlay table {
	width: 				100%;
	border-collapse: 	collapse;
	font-size: 			0.8rem;
	line-height: 		1.0rem;
}

.cart-overlay table tr {
	border-bottom: 		1px solid #EEE;
}

.cart-overlay table td {
	padding: 			5px 3px;
	text-align: 		left;
	vertical-align: 	top;
}

.cart-overlay table td img {
	width: 				100px;
	height: 			auto;
}

.cart-overlay table td.price {
	text-align: 		right;
	color:				#087bc7;
	font-weight: 		bold;
}

.cart-overlay table td.price span {
	color: 				#CCC;
	text-decoration: 	line-through;
}

.button-cart-overlay-remove {
	margin-top: 		5px;
}

span.user-initial {
	position: 			absolute;
	top: 				-4px;
	right: 				-10px;
	z-index: 			1200;
	width: 				15px;
	height: 			15px;
	border-radius: 		50%;
	font-size: 			10px;
	line-height: 		15px;
	text-align: 		center;
	background-color: 	#009900;
	color: 				#fff;
}

@keyframes fade-bounce {

	0% {
		transform: 		translateY(0);
		opacity: 		0;
	}
	50% {
		transform: 		translateY(10px);
		opacity: 		0.50;
	}
	75% {
		transform: 		translateY(5px);
		opacity: 		0.75;
	}
	100% {
		transform: 		translateY(0);
		opacity: 		1;
	}

}

/* -------------------------------------------------------------------------- */
/* -- MAIN MENU ------------------------------------------------------------- */
.menu-main {
	list-style-type: 	none;
	margin-top:			5px;
	display: 			flex;
	justify-content: 	space-around;
	width: 				100%;
}

.menu-main li {
	flex: 				1 1 auto;
	border-top:			1px solid #EAEAEA;
	border-left: 		1px solid #EAEAEA;
}

.menu-main li:last-child {
	border-right: 		1px solid #EAEAEA;
}

.menu-main > li > a {
	display: 			block;
	padding: 			10px;
	font-size: 			1.2VW;
	line-height: 		1.6rem;
	text-transform: 	uppercase;
	text-decoration: 	none;
	font-weight: 		bold;
	text-align: 		center;
	color: 				#000;
}

.menu-main-sub {
	display: 			none;
	justify-content: 	space-between;
	position: 			absolute;
	top: 				90px;
	left: 				0;
	z-index: 			999;
	width: 				100%;
	height: 			auto;
	box-shadow: 		0px 5px 5px rgba(0,0,0,0.1);
	background-color: 	#087bc7;
	text-align: 		left;
}

.menu-main li div.menu-main-sub div {
	flex: 				1;
	padding: 			var(--margin-element) var(--margin-interior);
}

.menu-main li div.menu-main-sub a {
	display: 			block;
	padding: 			var(--margin-element);
	line-height: 		30px;
	font-size: 			1vw;
	font-weight: 		normal;
	text-align: 		left;
	text-decoration: 	none;
}

.menu-main li div.menu-main-sub a span {
	display: 			inline-block;
	margin-right:		var(--margin-element);
	width: 				50px;
	vertical-align: 	middle;
}

.menu-main li div.menu-main-sub a span img {
	display: 			block;
	margin: 			0 auto;
	width: 				auto;
	height: 			30px;
}

.menu-main-sub-group h4 {
	margin: 			var(--margin-element);
	border-bottom: 		1px solid #FFF;
	padding: 			var(--margin-element);
	color: 				#FFF;
	font-weight: 		bold;
	font-size: 			1vw;
}

/* -------------------------------------------------------------------------- */
/* -- LOADER ---------------------------------------------------------------- */
.loader {
	margin-right: 	5px;
	display: 		inline-block;
	width: 			12px;
    height: 		12px;
    border: 		2px solid #f3f3f3;
    border-top: 	2px solid #3498db;
    border-radius: 	50%;
    animation: 		spin 2s linear infinite;
}

@keyframes spin {

	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}

}

.animate {
	transform-origin: 	top;
    transition: 		transform .5s;
}

.animate-in {
	transform: 			scaleY(0);
}

.slideIn {
	transform: 			scaleY(1);
}

.slideOut {
	transform: 			scaleY(0);
}

#button-upload-completed-t {
	margin-bottom: 		var(--margin-exterior);
}



/* -------------------------------------------------------------------------- */
/* -- SEARCH ---------------------------------------------------------------- */
.header-search {
	position: 			relative;
	flex:	 			1 1 50%;
}

.form-search {
	display: 			flex;

}

.form-search input {
	flex: 				0 0 80%;
	border: 			1px solid #b7b7b7;
	padding: 			3px 5px;
	line-height: 		25px;
	font-size: 			20px;
}

.form-search button {
	flex: 				0 0 20%;
	border-radius: 		0;
	background-color: 	#1e4495;
	text-align:			center;
	text-transform: 	uppercase;
	font-weight: 		bold;
}


/* -------------------------------------------------------------------------- */
/* -- TESTIMONIAL / STICKY RATING WIDGET ------------------------------------ */
.testimonial-widget {
	border-top: 		1px solid #EAEAEA;
	border-left: 		1px solid #EAEAEA;
	border-bottom: 		1px solid #EAEAEA;
	background-color: 	#FFF;
	width: 				120px;
	height: 			120px;
	padding: 			10px var(--margin-element);
	text-align: 		center;
	box-shadow: 		-3px 0px 10px rgba(0,0,0,0.6);
}

.testimonial-widget a {
	text-decoration: 	none;
}

.testimonial-widget h3 {
	margin: 			var(--margin-element);
	font-size: 			1.2rem;
	line-height: 		1.2rem;
	text-decoration: 	none;
}

.widget-stars {
	color: 				#ffcc00;
}

.widget-link {
	font-size: 			0.8rem;
	color: 				#000;
}

.widget-inline {
	margin-right: 		auto;
}

.widget-sticky {
	position: 			fixed;
	bottom: 			150px;
	right: 				0px;
	z-index: 			101;
}

/* -------------------------------------------------------------------------- */
/* -- SECTION USP ----------------------------------------------------------- */
.grid-usp {
	list-style-type: 	none;
	display: 			flex;
	justify-content: 	space-between;
	align-items: 		flex-start;
	flex-wrap: 			wrap;
	margin: 			0;
	padding:  			0 var(--margin-exterior);
}

.grid-usp li {
	flex: 				0 0 20%;
	margin: 			0;
	padding: 			0;
	text-align: 		center;
}

.grid-usp-3 li {
	flex: 				0 0 30%;
	margin-top: 		var(--margin-exterior);
}

.grid-usp-3 li h3 {
	text-align:			left;
}

.grid-usp li p.usp-title {
	margin-bottom:		var(--margin-element);
	font-size: 			1.2rem;
	line-height: 		1.8rem;
	text-transform: 	uppercase;
	font-weight: 		bold;
	text-align: 		center;
}

.grid-usp li p {
	margin-top: 		0;
	margin-bottom: 		var(--margin-interior);
	text-align: 		justify;
	font-size: 			0.8rem;
	line-height: 		1.2rem;
}

.grid-usp li p.usp-icon {
	margin-bottom: 		var(--margin-interior);
	font-size: 			2.5rem;
	color: 				#999;
	text-align: 		center;
}

/* -------------------------------------------------------------------------- */
/* -- CONTENT BLOCKS -------------------------------------------------------- */
.block {
	padding:			var(--margin-block) var(--margin-exterior);
}

.block-collection {
	padding:			var(--margin-exterior) var(--margin-exterior);
}

.block-homepage {
	background: 		url('../jpg/hero-homepage.jpg') bottom right no-repeat;
	background-size: 	cover;
}

.block-feature {
	background: 		var(--background-blue) url('../jpg/background-pattern.jpg') top right repeat-y;
	color: 				#FFF;
}

.block-feature-simple {
	background: 		var(--background-blue);
	color: 				#FFF;
}


.block-alt {
	background-color: 	#F5F5F5;
}

.block-anchor {
	scroll-margin-top: 	160px;
}

.block-top {
	margin-left: 		var(--margin-interior);
    margin-top: 		var(--margin-interior);
}

.block-homepage h1, .block-feature h1 {
	margin: 			0;
	background: 		none;
	font-size: 			3.2rem;
	text-align: 		left;
}

.block-feature h1 span {
	font-size: 			5.0rem;
}

.block-feature h2 {
	color: 				#FFF !important;
}

.block-feature a {
	color: 				#FFF;
}

.block-homepage p, .block-feature p {
	margin: 			var(--margin-exterior) 0;
	font-size: 			1.5rem;
	line-height: 		2.2rem;
}

.collection-description p {
	font-size: 			1.1rem;
	line-height: 		1.5rem;
	text-align: 		justify;
}

.block-title {
	margin-bottom: 		var(--margin-block);
	text-align: 		center;
	text-transform: 	uppercase;
}

.block-flex {
	display: 			flex;
	justify-content: 	space-between;
	align-items: 		flex-start;
}

.block-flex > div:first-child {
	margin-right: 		var(--margin-container);
}

.block-column-6 {
	flex-basis: 		75%;
}

.block-column-5 {
	flex-basis: 		62.5%;
}

.block-column-4 {
	flex-basis: 		50%;
}

.block-column-3 {
	flex-basis: 		37.5%;
}

.block-column-2 {
	flex-basis: 		25%;
}

.block-content {
	margin: 			0px auto;
	max-width: 			1240px;
}

.block-homepage-text {
	max-width: 			75%;
	margin-bottom: 		var(--margin-block);
}

.block-homepage-info {
	flex: 				1;
}

.block-homepage-video {
	flex: 				0 0 360px;
	position: 			relative;
	margin-top: 		var(--margin-exterior);
	margin-right: 		var(--margin-interior) !important;
}

.block-homepage-video img {
	display:	 		block;
	box-shadow: 		1px 1px 5px rgba(0,0,0,0.5);
}

.block-homepage-video a {
	display: 			flex;
	align-items: 		center;
	width: 				360px;
}

.block-homepage-video a:hover {
	color: 				var(--highlight-color);
}

.block-homepage-video a i {
	position: 			absolute;
	margin-top: 		calc(30% - 50px);
	margin-left: 		calc(50% - 50px);
	top: 				0px;
	left: 				0px;
	width: 				100px;
	height: 			100px;
	font-size: 			100px;
	line-height: 		100px;
	text-shadow: 		1px 1px 5px rgba(0,0,0,0.5);
	color: 				#FFF;
	text-align:			center;
}

.block-content p.call-to-action {
	margin-top: 		var(--margin-exterior);
	text-align:			center;
	font-size: 			1.5rem;
}

.block-text h2 {
	margin-bottom: 		var(--margin-exterior);
	text-align: 		left;
	color: 				#1e4495;
}

.block-text h2.h2-alt {
	margin-top:			10px;
	font-size:			2.0rem;
	color: 				#FFF;
}


.block-text h2 a {
	text-decoration: 	none;
}

.block-text h2 img {
	display:			inline-block;
	margin-left: 		var(--margin-element);
	width: 				auto;
	height: 			40px;
	vertical-align: 	middle;
}

.block-text p {
	margin-top: 		var(--margin-interior);
	font-size: 			1.2rem;
	line-height: 		1.8rem;
}

.block-text ol {
	margin: 			var(--margin-exterior) var(--margin-block);
}

.block-text ol li {
	margin-bottom:		var(--margin-interior);
	font-weight: 		bold;
	font-size: 			1.3rem;
	line-height: 		2.0rem;
}

.block-text-large p {
	font-size: 			1.4rem;
	text-align:			center;
}

.block-disclaimer p {
	padding: 			5px 0px 10px 0px;
	font-size: 			1.0rem;
	line-height: 		1.4rem;
	font-style: 		italic;
}

.block-outline {
	border: 			1px solid #EEE;
	border-radius: 		var(--margin-element);
	padding: 			var(--margin-interior);
}

.block-spacer {
	padding:			var(--margin-block) 0;
}

.block-spacer-small {
	padding:			var(--margin-exterior) 0 var(--margin-interior) 0;
}


/* -------------------------------------------------------------------------- */
/* -- MAILING LIST ---------------------------------------------------------- */
.feature-mailing-list {
	position: 			relative;
	margin: 			var(--margin-interior) auto;
	max-width: 			780px;
}

.feature-mailing-list input {
	display: 			inline-block;
	width: 				100%;
	border: 			1px solid #b7b7b7;
	box-sizing: 		border-box;
	padding: 			3px 5px;
	line-height: 		1.1rem;
	font-size: 			1.1rem;
}

.feature-mailing-list button {
	position: 			absolute;
	top: 				0px;
	right: 				0px;
	width: 				50px;
	height: 			29px;
	border: 			0px;
	color: 				#fff;
	background-color:	#000;
	font-weight: 		bold;
	text-transform: 	uppercase;
	cursor: 			pointer;
}

/* -------------------------------------------------------------------------- */
/* -- SOCIAL MEDIA LINKS ---------------------------------------------------- */
.social-media {
	list-style-type: 	none;
	display: 			flex;
	justify-content: 	center;
}

.social-media li {
	margin: 			10px;
	flex: 				0 0 auto;
	width: 				60px;
	height: 			60px;
	border-radius: 		5px;
	background-color: 	#000;
}

.social-media li a {
	display: 			block;
	color: 				#FFF;
	text-align: 		center;
	font-size: 			2.0rem;
	line-height: 		60px;
}


/* -------------------------------------------------------------------------- */
/* -- FILE GRID ------------------------------------------------------------- */
.flex-grid {
    display:            flex;
    flex-wrap:          wrap;
    justify-content:    flex-start;
}

.card-file {
    flex:               0 0 33.33%;
    padding:            var(--margin-interior);
    text-align:         center;
}

.card-file img {
    margin:             0px auto 10px auto;
    display:            block;
    max-width:          100%;
    height:             auto;
}

.file-icon {
    margin:             0px auto 10px auto;
    width:              100px;
    font-size:          100px;
}

/* -------------------------------------------------------------------------- */
/* -- COLLECTION PAGE ------------------------------------------------------- */
.collection-summary {
	line-height: 		1.5rem;
	font-size: 			1.2rem;
}

.collection-summary img {
	float: 				left;
	margin-right: 		10px;
	max-height: 		150px;
}

.collection-link {
	position: 			absolute;
	left: 				0px;
	bottom: 			0px;
	width: 				100%;
	border-top: 		1px solid #fff;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	background-color: 	#000;
	padding-bottom: 	10px;
}

.collection-link a {
	display: 			block;
	padding: 			10px 0px 0px 0px;
	text-align: 		center;
	font-size: 			1.2rem;
	line-height: 		1.6rem;
	text-decoration: 	none;
}

/* -------------------------------------------------------------------------- */
/* -- EPIC LIST ------------------------------------------------------------- */
.epic-list {
	display: 			flex;
	justify-content: 	space-between;
	align-items: 		stretch;
	padding: 			var(--margin-block) 0;
}

.epic-tier {
	flex: 				0 0 32%;
	background-color: 	#F5F5F5;
}

.epic-tier h2 {
	margin-bottom: 		var(--margin-element);
	padding: 			var(--margin-interior);
	color: 				#FFF;
}

.epic-tier h3 {
	text-align:			center;
}

.epic-tier img {
	margin: 			0 auto;
}

.epic-tier h4 {
	padding:			var(--margin-interior);
	font-weight: 		normal;
}

.epic-tier ul {
	list-style-type: 	none;
	margin: 			0;
	padding: 			var(--margin-interior);
}

.epic-tier ul li {
	margin-top: 		var(--margin-interior);
}


/* -------------------------------------------------------------------------- */
/* -- SHOP ADDRESS ---------------------------------------------------------- */
.shop {
	box-sizing: 		border-box;
	margin: 			10px auto 0px auto;

}

.shop-image {
	position: 			relative;
	margin: 			0px auto;
	max-width: 			920px;
}

.shop-image img {
	display: 			block;
	max-width: 			100%;
	height: 			auto;
}

.shop-overlay {
	position: 			absolute;
	bottom: 			10px;
	right: 				10px;
}

.shop-address {
	margin: 			10px auto;
	max-width: 			920px;
	display: 			flex;
	justify-content: 	space-between;
}

.shop-address p {
	flex: 				0 0 auto;
}


/* -------------------------------------------------------------------------- */
/* -- PANEL LAYOUT ---------------------------------------------------------- */
.panel {
	margin: 			30px 0px;
	border: 			1px solid #087bc7;
	background-color: 	#fff;
	padding: 			0px;
}

.panel h2 {
	margin: 			0px;
	background-color: 	#087bc7;
	padding: 			5px 10px;
	text-align:			left;
}

.panel dl {
	margin: 			15px;
}

.panel table {
	margin: 			0px;
	width: 				100%;
	border: 			0px;
	border-collapse: 	collapse;
	color: 				#222;
}

.panel table th {
	border: 			1px solid #cfcfcf;
	background-color: 	#efefef;
	font-size: 			1rem;
	color: 				#222;
}

.panel table td {
	border: 			1px solid #cfcfcf;
	padding: 			5px;
	text-align:			center;
}

/* -------------------------------------------------------------------------- */
/* -- BUTTON ---------------------------------------------------------------- */
.button {
	display: 			inline-block;
	border-radius: 		2px;
	border: 			0px;
	background-color: 	#1e4495;
	padding: 			5px 10px;
	color: 				#fff;
	text-decoration: 	none;
	cursor: 			pointer;
}

.button-large {
	padding: 			var(--margin-interior) var(--margin-exterior);
	font-size: 			1.2rem;
	line-height: 		1.2rem;
	text-align: 		center;
}

.button-full {
	width: 				100%;
	text-align: 		center;
}

.button-highlight {
	background-color: 	#d51d07;
	padding: 			var(--margin-interior) var(--margin-exterior);
}

.button-highlight:hover {
	background-color:  	#1b1464;
}

.button-secondary {
	background-color: 	#1b1464;
}

.button-tertiary {
	background-color: 	#3d3d3d;
}

.button-disabled {
	background-color: 	#EEE;
	color: 				#fff;
	cursor: 			not-allowed;
	pointer-events: 	none;
}

.button-ghost {
	border: 			2px solid #fff;
}

/* -------------------------------------------------------------------------- */
/* -- SEARCH OVERLAY -------------------------------------------------------- */
.search-overlay {
	box-sizing:	 		border-box;
	position: 			fixed;
	top: 				2000px;
	left: 				0px;
	z-index: 			201;
	width: 				100%;
	height: 			100vh;
	background-color: 	#fff;
	padding: 			20px 10px;
	box-shadow: 		3px 3px 15px rgba(0,0,0,0.3);
	transition:		 	top 0.3s ease-in-out;
	overflow-y: 		scroll;
}

.search-overlay.filter-active {
	top: 				100px;
}

.search-overlay-title {
	background-color: 	#F5F5F5;
	padding: 			var(--margin-element);
	font-weight: 		bold;
	text-transform: 	uppercase;
	line-height: 		1.8rem;
}

.search-overlay ul {
	list-style-type:  	none;
	margin: 			var(--margin-element);
}

.search-overlay ul li {
	margin: 			var(--margin-element) 0;
	border-bottom: 		1px solid #F5F5F5;
	padding: 			var(--margin-element) 0;
	font-size: 			1.2rem;
}

.button-filter-close {
	float:				right;
	display:			block;
	margin:				0;
	padding: 			8px var(--margin-interior);
	font-size: 			1.0rem;
}

.search-refine {
	margin: 			10px 0px;
	display: 			flex;
	align-items: 		center;
	border-top: 		1px solid #eee;
	border-bottom: 		1px solid #eee;
	padding: 			var(--margin-element) var(--margin-interior);
}

.item-filters {
	flex: 				0 0 50%;
	text-align: 		right;
}

.item-count {
	flex: 				0 0 50%;
	text-align: 		left;
}




/* -------------------------------------------------------------------------- */
/* -- CART DISPLAY ---------------------------------------------------------- */
.table-cart {
	width: 				100%;
	border-collapse: 	collapse;
	font-size: 			0.8rem;
}

.table-cart th {
	border: 			1px solid #000;
	background: 		linear-gradient(to right, #087bc7, #174597);
	padding: 			5px;
	text-align: 		center;
	color: 				#fff;
}

.table-cart td {
	border: 			1px solid #000;
	padding: 			5px;
}

.table-cart td.cart-item {
	vertical-align: 	top;
}

.table-cart td.cart-quan {
	text-align: 		center;
}

.table-cart td.cart-price {
	text-align: 		right;
	font-weight:		bold;
}

.table-cart td.cart-price span {
	color: 				#CCC;
	font-weight: 		normal;
	text-decoration: 	line-through;
}

.table-cart td img {
	display: 			block;
	margin: 			0px auto;
	width: 				50px;
	height: 			auto;
}

.checkout-button {
	margin-top:			20px;
	text-align:			right;
}

.checkout-list {
	margin: 			0px 0px 20px 0px;
	list-style-type: 	disc;
	padding-left: 		30px;
}

.checkout-list li {
	margin-top: 		10px;
}


/* -------------------------------------------------------------------------- */
/* -- SEARCH AUTOCOMPLETE --------------------------------------------------- */
.autocomplete-suggestions {
    text-align: left; cursor: default; border: 1px solid #ccc; border-top: 0; background: #fff; box-shadow: -1px 1px 3px rgba(0,0,0,.1);

    /* core styles should not be changed */
    position: absolute; display: none; z-index: 9999; max-height: 254px; overflow: hidden; overflow-y: auto; box-sizing: border-box;
}
.autocomplete-suggestion { position: relative; padding: 0 .6em; line-height: 23px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1.02em; color: #333; }
.autocomplete-suggestion b { font-weight: normal; color: #1f8dd6; }
.autocomplete-suggestion.selected { background: #f0f0f0; }

.algolia-autocomplete {
	width: 				100%;
}

.aa-input-container {
	position: 			relative;
}

.aa-input-search {
	box-sizing: 		border-box;
	width: 				100%;
	padding-left: 		20px;
	-webkit-appearance: none;
	-moz-appearance: 	none;
	appearance: 		none;
}

.aa-input-search::-webkit-search-decoration, .aa-input-search::-webkit-search-cancel-button, .aa-input-search::-webkit-search-results-button, .aa-input-search::-webkit-search-results-decoration {
	display: 			none;
}

.aa-input-icon {
	position: 			absolute;
	top: 				50%;
	left: 				10px;
	width: 				16px;
	height: 			16px;
	transform: 			translateY(-50%);
	fill: 				#CCC;
}

.aa-dropdown-menu {
	width:				100%;
	box-sizing: 		border-box;
	border: 			1px solid #EEE;
	background-color: 	#fff;
}

.aa-suggestion {
	border-bottom:		1px solid #EEE;
	font-size: 			1.0rem;
}

.aa-suggestion span {
	display: 			block;
	padding: 			var(--margin-element);
	text-decoration: 	none;
	color: 				#000;
	cursor: 			pointer;
}

.aa-suggestion span:hover {
	background-color: 	#EEE;
}

.algolia-autocomplete .aa-dropdown-menu .aa-suggestion em {
	font-weight: 		bold;
	font-style: 		normal;
}


/* -------------------------------------------------------------------------- */
/* -- ADVANCED SEARCH FORM -------------------------------------------------- */
.form-advanced p {
	display: 			flex;
	align-items: 		center;
	margin-bottom:		var(--margin-interior);
	padding: 			var(--margin-element);
	font-size: 			1.2rem;
	line-height: 		2.4rem;
}

.form-advanced p:last-child {
	border: 			0px;
}

.form-advanced label {
	flex: 				0 0 160px;
	font-weight: 		bold;
}

.form-advanced input, .form-advanced select {
	padding: 			var(--margin-element);
	font-size: 			1.2rem;
}

.form-advanced input[type=radio] {
	margin-left: 		var(--margin-interior);
}

.form-advanced button[type=submit] {
	margin-left: 		160px;
}


/* -------------------------------------------------------------------------- */
/* -- USER FORMS ------------------------------------------------------------ */
.message-wrapper {
	margin: 			20px auto;
	max-width: 			800px;
	border: 			1px solid #EEE;
	border-radius: 		5px;
	background-color: 	#fff;
	padding: 			20px;
}

.message-wrapper p {
	margin-top: 		10px;
}

.message-wrapper ol {
	margin-left: 		30px;
}

.message-wrapper ol li {
	margin-top: 		10px;
}


/* -------------------------------------------------------------------------- */
/* -- USER FORMS ------------------------------------------------------------ */
.form-wrapper {
	margin: 			var(--margin-exterior) auto;
	max-width: 			800px;
	border: 			2px solid var(--highlight-color);
	border-radius: 		5px;
	background-color: 	#fff;
	padding: 			var(--margin-interior);
}

.form-user {
	margin: 			0px auto;
	width: 				100%;
	max-width: 			600px;
	padding: 			var(--margin-interior);
}

.form-full {
	max-width: 			800px;
}

.form-user fieldset {
	border-bottom:		1px solid #EEE;
}

.form-user p {
	margin: 			var(--margin-interior) 0px;
	display: 			flex;
	justify-content: 	space-between;
	flex-wrap: 			wrap;
	text-align: 		left;
	line-height: 		1.2rem;
	font-size: 			1.2rem;
}

.form-user p.row-inline {
	display: 			block;
}

.form-user label {
	display: 			block;
	flex: 				0 0 100%;
	margin-bottom: 		var(--margin-element);
	font-weight: 		bold;
}

.form-user label.label-50 {
	flex: 				0 0 calc(50% - var(--margin-interior));
}

.form-user input, .form-user select, .form-user textarea {
	flex: 				0 0 100%;
	width: 				100%;
	padding: 			10px 15px;
	border: 			1px solid #097bc7;
	border-radius: 		2px;
	font-size: 			1.2rem;
}

.form-user input[type=checkbox] {
	display: 			inline-block;
	width: 				auto;
}

.form-user textarea {
	flex: 				0 0 100%;
	min-height: 		150px;
}

.form-user input[type=radio] {
	width: 				auto;
	flex: 				0 0 auto;
}

.form-user input.field-75 {
	flex: 				0 0 calc(75% - 10px);
}

.form-user input.field-50, .form-user select.field-50 {
	flex: 				0 0 calc(50% - var(--margin-element));
}

.form-user input.field-25, .form-user select.field-25 {
	flex: 				0 0 calc(25% - var(--margin-element));
}

.form-user input.field-15, .form-user select.field-15 {
	flex: 				0 0 calc(15% - var(--margin-element));
}

.form-user input.field-10 {
	flex: 				0 0 calc(10% - var(--margin-element));
}

.form-user button {
	font-size: 			1.2rem;
	font-weight: 		bold;
}

.form-user p.form-notes {
	display: 			block;
	margin: 			0px;
	font-size: 			0.8rem;
	font-style: 		italic;
	text-align: 		left;
}

.form-user p.form-user-notice {
	display: 			block;
	margin: 			var(--margin-interior) 0px;
	background-color: 	#CCC;
	border-radius: 		5px;
	padding: 			15px 10px;
	color: 				#000;
}


#credit-card {
	margin-left:		130px;
}

.file-upload-list {
	display: 			flex;
	justify-content: 	space-between;
}

.file-upload {
	flex: 				1;
	margin: 			var(--margin-interior);
	height: 			60px;
	border: 			3px solid #CCC;
	background-color: 	#EAEAEA;
	line-height: 		60px;
	text-align:			center;
	text-transform: 	uppercase;
	cursor: 			pointer;
}


.form-progress {
	position: 			relative;
	display: 			flex;
	justify-content: 	space-between;
	list-style-type: 	none;
	margin: 			0 0 var(--margin-exterior) 0;
	padding: 			0;
}

.form-progress li {
	flex: 				1;
	text-align:			center;
	font-size: 			0.8rem;
}

.progress-icon {
	margin: 			5px auto;
	width: 				30px;
	height: 			30px;
	border-radius: 		50%;
	border: 			5px solid var(--highlight-color);
	background-color: 	#FFF;
	font-size: 			1.4rem;
	font-weight: 		bold;
	text-align:			center;
	line-height: 		20px;
	color: 				var(--highlight-color);
}

.completed .progress-icon {
	background-color: 	var(--highlight-color);
	color: 				#FFF;
}

.current .progress-icon {
	border: 			5px solid #1b1464;
	color: 				#1b1464;
}

/* -------------------------------------------------------------------------- */
/* -- NOTIFICATIONS --------------------------------------------------------- */
.msg {
	margin: 				var(--margin-exterior) 0;
	padding: 				var(--margin-interior);
	color: 					#FFF;
	font-weight: 			bold;
	font-size: 				1.4rem;
	line-height: 			2.4rem;
}

.msg i {
	margin-right:			var(--margin-exterior);
	font-size:  			2.4rem;
	vertical-align: 		middle;
}

.msg-success {
	background: 			#008000;
}

.msg-alert {
	background: 			#9b870c;
}

.msg-info {
	background: 			#4169E1;
}

.msg-error {
	background: 			#8b0000;
}




/* -------------------------------------------------------------------------- */
/* -- COMIC PRICE GUIDE ----------------------------------------------------- */
.comic-description {
	position: 			relative;
	max-height: 		270px;
	overflow: 			hidden;
}

.comic-description-more {
	position: 			absolute;
	left: 				0px;
	bottom: 			0px;
	z-index: 			1;
	width: 				100%;
	height: 			40px;
	border-top: 		1px solid #F1F1F1;
	border-bottom: 		1px solid #F1F1F1;
	background: 		#FFF;
	text-align:			center;
	line-height: 		40px;
	cursor: 			pointer;
}

.comic-description-less {
	max-height: 		none;
	padding-bottom: 	70px;
}

.comic-description-image {
	float: 				right;
	margin:				0 0 var(--margin-exterior) var(--margin-exterior);
}

.comics-issue-list .comics-issue-item:nth-child(even) {
	background-color: 	#F1F1F1;
}

.comics-issue-item {
	padding: 			var(--margin-exterior) var(--margin-interior);
}

.comics-issue-list > .comics-issue-item {
	padding: 			var(--margin-block) var(--margin-exterior);
}

.comics-filters {
	position: 			sticky;
	top: 				90px;
	z-index: 			100;
	border-top: 		1px solid #F5F5F5;
	border-bottom: 		1px solid #F5F5F5;
	background-color: 	#FFF;
	padding: 			var(--margin-interior);
	text-align:			center;
}

.comics-filters a {
	margin: 			0 var(--margin-interior);
	font-size: 			0.8rem;
}

/* -------------------------------------------------------------------------- */
/* -- ITEM PAGINATION ------------------------------------------------------- */
.item-pagination {
	margin: 			var(--margin-block) 0;
}

.item-pagination-status {
	margin: 			10px 0px;
	text-align: 		center;
}

.item-pagination ul {
	flex: 				0 0 50%;
	display: 			flex;
	justify-content: 	center;
	list-style-type: 	none;
}

.item-pagination ul li {
	flex: 				0 0 40px;
	margin: 			0px 5px;
	border: 			1px solid #b7b7b7;
}

.item-pagination ul li a {
	display: 			block;
	padding: 			10px 5px;
	color: 				#b3b3b3;
	text-decoration: 	none;
	font-size: 			1.2rem;
	font-weight: 		bold;
	text-align: 		center;
}

.item-pagination ul li a:hover {
	background-color: 	#000;
	color: 				#fff;
}

.item-pagination ul li.current {
	background-color: 	#000;
	padding: 			10px 0px;
	color: 				#fff;
	font-size: 			1.2rem;
	font-weight: 		bold;
	text-align: 		center;
}


/* -------------------------------------------------------------------------- */
/* -- GRID USP -------------------------------------------------------------- */
.grid-detail {
	list-style-type: 	none;
	display: 			flex;
	justify-content: 	space-between;
	flex-wrap: 			wrap;
	margin: 			var(--margin-block) 0 0 0;
	padding:  			0;
}

.grid-detail li {
	box-sizing: 		border-box;
	flex: 				0 0 45%;
	margin-bottom:		var(--margin-block);
	text-align: 		center;

}

.grid-detail li h4 {
	margin-bottom: 		var(--margin-exterior);
	color: 				var(--highlight-color);
	font-weight: 		bold;
	font-size: 			1.3rem;
	text-align:			left;
}

.grid-detail li h5 {
	margin-bottom: 		var(--margin-element);
	color: 				var(--highlight-color);
	font-weight: 		bold;
	font-size: 			1.2rem;
	text-align:			left;
}


.grid-detail li p {
	margin-bottom: 		var(--margin-interior);
	text-align: 		justify;
	font-size: 			1.0rem;
}

/* -------------------------------------------------------------------------- */
/* -- CUSTOMER SUMMARY ------------------------------------------------------ */
section.customer-summary {
	box-sizing: 		border-box;
	margin-top: 		0px;
	margin-bottom: 		30px;
	border-radius: 		5px;
	padding: 			0px 20px 20px 20px;
	color: 				#fff;
}

section.customer-summary h2 {
	margin-top: 		0px;
}

/* -------------------------------------------------------------------------- */
/* -- CUSTOMER EPIC POINTS -------------------------------------------------- */
.epic-info {
	display: 			flex;
	flex-wrap: 			wrap;
}

.epic-info dt {
	flex: 				0 0 30%;
	padding: 			5px 0px;
	font-weight: 		bold;
}

.epic-info dd {
	flex: 				0 0 70%;
	padding: 			5px 0px;
}

/* -------------------------------------------------------------------------- */
/* -- COMIC PRICE GUIDE ----------------------------------------------------- */
.comic-price-guide {
	display: 			flex;
	justify-content: 	center;
	align-items: 		center;
	width: 				100%;
	height: 			80px;
	background: 		url('../jpg/comic-price-guide-header.jpg') top center no-repeat;
	background-size: 	cover;
}

.comic-price-guide span {
	display: 			block;
	flex: 				0 0 auto;
	border: 			3px solid #000;
	padding: 			5px 15px;
	font-size: 			2.4rem;
	line-height: 		2.4rem;
	font-weight: 		bold;
	color: 				#FFF;
	text-transform: 	uppercase;
	text-shadow: 		1px 1px 3px rgba(0,0,0,0.7);
	background: 		#087bc7;
}

.comic-price-guide-row {
	display:			flex;
	justify-content: 	space-between;
}

.comic-price-guide-image {
	margin-right:		var(--margin-exterior);
	flex: 				0 0 160px;
}

.comic-price-guide-image img {
	display: 			block;
	margin: 			0px auto;
	width: 				160px;
	height: 			auto;
}

.comic-price-guide-image p {
	padding: 			5px;
	text-align:			center;
}

.comic-price-guide-details {
	box-sizing: 		border-box;
	flex: 				1 1 auto;
}

.comic-price-guide-feature {
	margin-top:			10px;
	border-radius:		5px;
	padding:			15px;
	color: 				#fff;
}

.comic-price-guide-details p {
	margin-bottom: 		var(--margin-interior);
}

.comic-price-guide-details .table-user {
	margin-top: 		var(--margin-element);
}

.table-user td img.comic-price-guide-collection-image {
	margin:				0px auto;
	transition: 		all 0.2s;
	cursor: 			zoom-in;
}

.table-user td img.comic-price-guide-collection-image:hover {
	transform: 		scale(3.0);
    box-shadow: 	0 0 10px rgba(0, 0, 0, 0.5);
}

/* -------------------------------------------------------------------------- */
/* -- COMIC PRICE GUIDE TABS ------------------------------------------------ */
.comic-price-guide-tabs ul {
	list-style-type: 	none;
	display: 			flex;
	justify-content: 	end;
}

.comic-price-guide-tabs ul li {
	border: 			1px solid var(--highlight-color);
	border-bottom: 		none;
	padding: 			5px 10px;
	cursor: 			pointer;
	font-size: 			1.2rem;
	color: 				var(--highlight-color);
}

.comic-price-guide-tabs ul li:first-child {
	border-right: 		none;
}

.comic-price-guide-tabs ul li.tab-active {
	background-color: 	var(--highlight-color);
	color: 				#FFF;
}

.comic-price-guide-tab-content {
	border-top:			1px solid var(--highlight-color);
	padding-top: 		var(--margin-element);
}

.comic-price-guide-tab-content > div {
	display: 			none;
}

.comic-price-guide-tab-content > div.tab-content-active {
	display: 			block;
}

/* -------------------------------------------------------------------------- */
/* -- SELL COMICS PAGE ------------------------------------------------------ */
.testimonial-single {
	margin: 			var(--margin-exterior);
  	display: 			flex;
	flex-wrap: 			nowrap;
	justify-content: 	space-between;
}

.testimonial-single cite {
	flex: 				1;
	text-align: 		center;
}

.testimonial-single cite img {
	margin: 			15px;
	display: 			block;
	border-radius: 		50%;
}

.testimonial-single blockquote {
	flex: 				4;
	border-radius: 		2px;
    box-shadow: 		0 var(--margin-element) var(--margin-interior) 0px rgba(0, 0, 0, 0.2);
    background: 		#FFF;
	padding: 			60px;
	font-size: 			1.6rem;
	line-height: 		2.0rem;
	color: 				#000;
}

.testimonial-scroller {
	overflow-x: 		hidden;
}

.testimonial-slides {
  	display: 			flex;
	flex-wrap: 			nowrap;
}

.testimonial-nav {
	text-align:			center;
}

.testimonial {
	flex: 				0 0 48%;
	margin: 			var(--margin-exterior) 1%;
	border-radius: 		2px;
	padding: 			var(--margin-exterior);
	box-shadow: 		0 var(--margin-element) var(--margin-interior) 0px rgba(0, 0, 0, 0.2);
	background: 		#FFF;
	color: 				#000;
	font-size: 			1.2rem;
	text-align:			justify;
}

.testimonial cite {
	margin-top: 		var(--margin-exterior);
	display:			block;
	font-weight: 		bold;
	text-align:			left;
	line-height: 		70px;

}

.testimonial cite img {
	float: 				left;
	margin-right: 		var(--margin-interior);
	display: 			block;
	max-width: 			70px;
	border-radius: 		50%;
	vertical-align: 	middle;
}


.page-callout {
	border-radius: 		5px;
	background: 		url('../jpg/sell-your-books-silver-age-header.jpg') top left no-repeat;
	background-size: 	cover;
	padding: 			30px;
}

.page-callout h2 {
	margin-bottom: 		60px;
	background: 		none;
	text-align: 		center;
	color: 				#fff;
	font-size: 			2.4rem;
	line-height: 		2.4rem;
	text-shadow: 		1px 1px 3px rgba(0,0,0,0.6);
}

.page-callout h3 {
	margin-bottom: 		60px;
	text-align: 		center;
	color: 				#fff;
	font-size: 			2.0rem;
	text-shadow: 		1px 1px 3px rgba(0,0,0,0.6);
}

.page-callout a {
	color: 				#fff;
}

.image-right {
	float: 				right;
	width: 				100%;
	max-width: 			400px;
	height: 			auto;
	padding: 			0px 30px;
}

.page-phone {
	border-top: 		1px solid #EFEFEF;
	border-bottom: 		1px solid #EFEFEF;
	background-color: 	#f2f2f2;
	padding: 			15px 0px;
}

/* -------------------------------------------------------------------------- */
/* -- BUY COMICS PAGE ------------------------------------------------------- */
.comic-title-list {
	column-count:		2;
	column-gap:			var(--margin-block);
}

/* -------------------------------------------------------------------------- */
/* -- COMIC TITLE PAGE ------------------------------------------------------ */
.comic-title {
	flex: 				0 1 18%;
	margin: 			var(--margin-element) 1%;
	padding: 			var(--margin-element);
}

.comic-title img {
	float: 				left;
	margin-right: 		10px;
	max-width: 			120px;
	height: 			auto;
}

.comic-title-info h3 {
	margin-top: 		0px;
	margin-bottom: 		var(--margin-element);
	line-height: 		1.8rem;
}

.comic-title-buttons {
	margin-top: 		10px;
	display: 			flex;
	justify-content: 	space-between;
}

.comic-details {
	border-collapse: 	collapse;
}

.comic-details th {
	width: 				120px;
	padding: 			5px;
	vertical-align: 	top;
	text-align: 		left;
}

.comic-details td {
	padding: 			5px;
	text-align: 		left;
}


/* -------------------------------------------------------------------------- */
/* -- ITEM LIST ------------------------------------------------------------- */


.item-featured {
	display: 			block;
}

.item-featured img {
	margin-bottom: 		var(--margin-interior);
}

.item-featured h3 {
	margin-bottom: 		var(--margin-interior);
}

.item-featured p {
	margin-bottom: 		var(--margin-interior);
}

.item-list {
	margin: 			var(--margin-interior);
	display: 			flex;
	flex-wrap: 			wrap;
	justify-content: 	flex-start;
}

.item {
	flex: 				0 1 32%;
	display: 			flex;
	margin-bottom: 		var(--margin-exterior);
	margin: 			0.5%;
	padding: 			var(--margin-element);
}

.item-image {
	margin: 			0px;
	flex: 				0 0 120px;
}

.item-image-blog {
	margin: 			0px;
	flex: 				0 0 180px;
}

.item-image img, .item-image-blog img {
	display: 			block;
	width: 				100%;
}

.item-text {
	flex: 				0 1 auto;
	margin-left: 		20px;
}

.item-text h3 {
	margin-top: 		0px;
	line-height: 		2.0rem;
}

.item-text a {
	text-decoration: 	none;
	color: 				#000;
}

.item-text a.button {
	color: 				#FFF;
}

.item-text p {
	margin-top: 		20px;
}

.item-price {
	color: 				var(--highlight-color);
}

.item-sale {
	margin-top: 		15px;
	display:			flex;
}

.item-sale-percent {
	margin-left: 		15px;
	flex: 				0 1 auto;
	border-radius: 		3px;
	background-color: 	#209717;
	padding: 			5px;
	color: 				#ffffff;
	font-weight: 		bold;
	font-size: 			1.2rem;
	line-height: 		1.6rem;
	letter-spacing: 	1px;
	text-align:			center;
}

.item-sale-price {
	flex: 				0 1 auto;
	text-align:			right;
	color: 				#1e4495;
}

.item-sale-price span {
	color: 				#666;
	text-decoration: 	line-through;
}

.item-sale-countdown {
	margin-left: 		15px;
	flex: 				0 1 auto;
	border-radius: 		3px;
	background-color: 	#93291E;
	padding: 			5px;
	color: 				#ffffff;
	font-weight: 		bold;
	font-size: 			1.2rem;
	line-height: 		2.4rem;
	letter-spacing: 	1px;
}


.item-actions {
	margin-top: 		var(--margin-interior);
}

.item-preview {
	display: 			inline-block;
	background:			linear-gradient(to right, #087bc7, #174597);
	padding: 			5px;
	color: 				#fff;
}

.item-offer-confirm table {
	margin: 			10px 0px 0px 0px;
	border-collapse: 	collapse;
}

.item-offer-confirm table th {
	padding: 			5px 20px 0px 0px;
	text-align: 		left;
}

.item-offer-confirm table td {
	padding: 			5px 0px 0px 0px;
}

.item-offer-confirm table td input {
	max-width: 			80px;
	font-size: 			1.2rem;
}

.item-image-large {
	margin: 			0px;
	flex: 				0 0 300px;
}

.item-detail-table {
	margin: 			10px 0px 20px 0px;
	border-collapse: 	collapse;
	max-width: 			600px;
}

.item-detail-table th {
	min-width: 			100px;
	padding: 			5px 5px 5px 0px;
	text-align:			left;
	vertical-align: 	top;
}

.item-detail-table td {
	padding: 			5px 0px;
}

.address {
	flex: 				0 1 32%;
	box-sizing: 		border-box;
	margin: 			0.5%;
	border: 			1px solid #b7b7b7;
	border-radius: 		5px;
	padding: 			10px;
}

.button-question {
	position: 			fixed;
	right: 				15px;
	top: 				110px;
	z-index: 			3001;
	width: 				40px;
	height: 			40px;
	box-shadow: 		1px 1px 5px rgba(0,0,0,0.6);
	border: 			0;
	border-radius: 		5px;
	background-color: 	#1e4495;
	line-height: 		40px;
	text-align:			center;
	color: 				#FFF;
	font-size: 			2.0rem;
	cursor: 			pointer;
}

/* -------------------------------------------------------------------------- */
/* -- SEARCH REFINE --------------------------------------------------------- */
.search-refine {
	margin: 			10px 0px;
	display: 			flex;
	border-top: 		1px solid #eee;
	border-bottom: 		1px solid #eee;
	padding: 			5px;
}

.item-filter {
	flex: 				0 0 33.3%;
	display: 			block;
	text-align: 		left;
}

.item-count {
	flex: 				0 0 33.3%;
	display: 			block;
	text-align: 		center;
}

.item-sort {
	flex: 				0 0 33.3%;
	display: 			block;
	text-align: 		right;
}

/* -------------------------------------------------------------------------- */
/* -- BREADCRUMB ------------------------------------------------------------ */
.breadcrumb {
	background-color: 	#EFEFEF;
	padding: 			var(--margin-interior);
	line-height: 		30px;
}

.breadcrumb a span {
	margin-right: 		10px;
	font-size: 			16px;
}

/* -------------------------------------------------------------------------- */
/* -- CARD LAYOUT ----------------------------------------------------------- */
.scroller {
	display: 					flex;
	flex-wrap: 					wrap;
	justify-content: 			center;
}

.card {
	margin: 			var(--margin-exterior) 1.00%;
	flex: 				0 0 18%;
	text-align: 		center;
}

.card-large {
	flex: 				0 0 31.33%;
}

.card h3 {
	display: 			-webkit-box;
	margin: 			var(--margin-interior);
	height: 			3.2rem;
	font-size: 			1.2rem;
	line-height: 		1.6rem;
   	-webkit-line-clamp: 2;
   	-webkit-box-orient: vertical;
	text-overflow: 		ellipsis;
	overflow: 			hidden;
}

.card p {
	margin: 			var(--margin-interior);
	text-align: 		justify;
}

.card-title a {
	color:				#3b3b3b;
	text-decoration: 	none;
}

.card a img {
	display: 			block;
	margin: 			0px auto;
	max-height:			250px;
	width: 				auto;
}

.card-icon a img {
	max-height: 		150px;
}

.card p.card-price {
	margin-top: 		var(--margin-interior);
	color: 				#1e4495;
	font-size: 			1.0rem;
	text-align:			center;
}

.card p.card-sale span {
	text-decoration: 	line-through;
	color: 				#CCC;
}

.card p.card-sold {
	font-size: 			1.2rem;
	font-weight: 		bold;
	text-align: 		center;
	color: 				#ED213A;
}

.card p.card-preview {
	background-color: 	#EEE;
	padding: 			5px;
	font-size: 			1.2rem;
	text-align: 		center;
}

.card-small {
	margin: 			20px 1%;
	flex: 				0 0 8%;
	box-shadow: 		none;
	border: 			none;
	border-radius: 		none;
	padding-bottom: 	10px;
}

.card-small h4 {
	margin: 			5px 5px 0px 5px;
	text-align:			center;
	font-weight: 		bold;
	font-size: 			1.1rem;
}

/* -------------------------------------------------------------------------- */
/* -- COLLECTION SEARCH ----------------------------------------------------- */
.form-collection {
	position: 			relative;
	margin: 			10px;
}

.form-collection input {
	width: 				100%;
	border: 			1px solid #b7b7b7;
	box-sizing: 		border-box;
	padding: 			3px 5px;
	line-height: 		20px;
	font-size: 			20px;
}

.form-collection button {
	position: 			absolute;
	top: 				0px;
	right: 				0px;
	width: 				30px;
	height: 			31px;
	border: 			0px;
	fill: 				#fff;
	background-color:	#087bc7;
}

/* -------------------------------------------------------------------------- */
/* -- BBB LOGO -------------------------------------------------------------- */
.bbb-logo {
	margin: 			20px 0px;
	text-align:			center;
}

/* -------------------------------------------------------------------------- */
/* -- COMIC WANTLIST FORM --------------------------------------------------- */
.item-wantlist {
	margin: 			5px 0px;
	background-color:	#b7b7b7;
	padding: 			5px;
	font-size: 			1.2rem;
	line-height: 		1.2rem;
}

.item-wantlist select {
	padding: 			3px 0px;
	font-size: 			1.0rem;
}


.comic-title-detail {
	border: 			4px solid #b7b7b7;
	padding: 			15px;
}

/* -------------------------------------------------------------------------- */
/* -- COLLECTION RELEASES --------------------------------------------------- */
.release-area {
	margin: 			var(--margin-exterior) 0;
}

.release-dates {
	margin-bottom: 		var(--margin-exterior);
}

.release-dates ul {
	list-style-type: 	none;
	display: 			flex;
	flex-wrap: 			wrap;
	gap: 				10px;
}

.release-dates ul li {
	display: 			block;
	flex: 				0 0 auto;
}

.release-dates ul li a {
	display: 			block;
	border-radius: 		5px;
	background: 		linear-gradient(to right, #087bc7, #174597);
	padding: 			5px 10px;
	text-align:			center;
	line-height: 		1.6rem;
	font-size: 			1.4rem;
	color: 				#fff;
	text-decoration: 	none;
	text-transform: 	uppercase;
}

.release-dates ul li a:hover {
	background: 		#1b1464;
}

.release-details {
	display: 			flex;
	border: 			3px solid #b7b7b7;
	padding: 			0px 10px 10px 10px;
	min-height: 		370px;
}

.release-loader {
	flex: 				0 0 100%;
	align-self: 		center;
	text-align: 		center;
}

.release-detail-description {
	flex: 				0 0 320px;

}

.release-detail-description h3, .release-detail-description p {
	margin-bottom: 		20px;
}

.release-detail-gallery {
	flex: 				0 1 auto;
}

.release-detail-gallery ul {
	list-style-type: 	none;
	display: 			flex;
	flex-wrap: 			wrap;
	justify-content: 	space-around;
}

.release-detail-gallery ul li {
	flex: 				0 0 auto;
	margin: 			10px;
}

.release-detail-gallery ul li img {
	display: 			block;
	width: 				100%;
	max-height: 		165px;
	width: 				auto;
}


/* -------------------------------------------------------------------------- */
/* -- FORM LEAD MAGNET ------------------------------------------------------ */
.form-mailing-list {
	margin: 			var(--margin-exterior) auto;
	max-width: 			920px;
	position: 			relative;
	text-align:			center;
}

.form-mailing-list input {
	display: 			inline-block;
	width: 				70%;
	border: 			1px solid #b7b7b7;
	box-sizing: 		border-box;
	padding: 			5px;
	line-height: 		1.4rem;
	font-size: 			1.1rem;
}

.form-mailing-list button {
	display: 			inline-block;
	color: 				#fff;
	background-color:	#000;
	line-height: 		1.4rem;
	font-size: 			1.4rem;
	font-weight: 		bold;
	text-transform: 	uppercase;
	cursor: 			pointer;
}


/* -------------------------------------------------------------------------- */
/* -- COMIC INVENTORY DETAIL ------------------------------------------------ */
.item-purchase {
	max-width: 			1200px;
	margin: 			var(--margin-interior) auto;
	display: 			flex;
	justify-content: 	flex-start;
	align-items: 		center;
	gap: 				15px;
}

.item-purchase p {
	font-size: 			1.2rem;
	font-weight: 		bold;
}

.item-purchase p.item-quantity {
	line-height: 		1.4rem;
	font-size: 			0.8rem;
	font-weight: 		400;
}

.item-cart-area {
	display: 			flex;
	align-items: 		center;
	gap: 				15px;
}

.item-cart-area .button {
	margin-top: 		15px;
	padding: 			15px 30px 14px 30px;
}

.item-purchase:last-child {
	text-align: 		right;
}

.item-purchase:only-child {
	text-align: 		left;
}

.item-purchase-preview {
	margin: 			20px 0px;
	background: 		linear-gradient(to right, #087bc7, #174597);
	color: 				#fff;
	padding: 			10px 0px;
	text-align: 		center;
	font-size: 			1.2rem;
	font-weight: 		bold;
}

.item-purchase-sold {
	margin: 			20px 0px;
	background: 		linear-gradient(to right, #ED213A, #93291E);
	padding: 			10px 0px;
	color: 				#fff;
	text-align: 		center;
	font-size: 			1.2rem;
	font-weight: 		bold;
}

.item-purchase-notes, .cart-purchase-notes {
	margin: 			10px auto;
	box-sizing: 		border-box;
	max-width: 			1200px;
	background-color: 	#EAEAEA;
	padding: 			5px;
	font-style: 		italic;
	text-align: 		center;
}

.cart-purchase-notes {
	text-align: 		left;
	font-weight: 		bold;
}

.item-offer input {
	margin: 			0px 0px 0px 3px;
	max-width: 			100px;
	padding: 			3px 5px;
	font-size: 			1.2rem;
	vertical-align: 	middle;
}

.item-purchase-section p.item-minimum, .item-purchase-section p.item-quantity {
	font-size: 			0.8rem;
}

.item-area {
	max-width: 			1200px;
	margin: 			0px auto;
	display: 			flex;
	flex-direction: 	row;
	justify-content: 	space-between;
}

.item-image-area {
	flex: 				0 1 auto;
}

.item-details {
	flex: 				0 0 500px;
	margin-left: 		40px;
}

.item-details img {
	display: 			block;
	margin: 			0px auto;
	max-width: 			100%;
	height: 			auto;
}

.item-image-main {
	display: 			block;
	margin: 			10px auto;
	max-width: 			100%;
	height: 			auto;
}

.item-additional-images {
	text-align:			center;
}

.item-additional-images img {
	display: 			inline-block;
	margin: 			0px 10px;
}

.item-details h2 {
	margin: 			0px;
}

.item-details table {
	margin-top: 		var(--margin-interior);
	width: 				100%;
	border-collapse: 	collapse;
	font-size: 			1.4rem;
	line-height: 		2.0rem;
}

.item-details table tr::nth-child(odd) {
	background-color: 	#EAEAEA;
}

.item-details th {
	width: 				40%;
	padding: 			10px 5px;
	text-align: 		left;
	vertical-align: 	top;
}

.item-details td {
	width: 				60%;
	padding: 			10px 5px;
}

.item-details p {
	margin-top: 		20px;
	background-color: 	#EEE;
	padding: 			5px;
	font-style: 		italic;
}

.item-deal-teaser {
	background-color: 	#EAEAEA;
	max-width:			720px;
	margin:				30px auto;
	border-radius:		5px;
	padding: 			30px;
}

/* -------------------------------------------------------------------------- */
/* -- CHECKOUT LAYOUT ------------------------------------------------------- */
.checkout {
	display: 			flex;
}

.checkout-order {
	flex: 				0 0 320px;
}

.checkout-details {
	margin-left: 		40px;
	flex: 				1 1 auto;
}

.checkout-details ul {
	list-style-type: 	none;
}

.checkout-details ul li {
	margin: 			10px 0px;
	border: 			1px solid #EEE;
	border-radius: 		5px;
	background-color: 	#fff;
	padding: 			10px;
}

.checkout-details ul li.checkout-required {
	border: 			1px solid #e18b7c;
}

.checkout-details ul li.checkout-completed {
	border: 			1px solid #c1d779;
}

.checkout-selection {
	display: 			flex;
	margin: 			10px 0px;
	align-items: 		center;
	flex-direction: 	row;
}

.checkout-selection div {
	margin: 			0px 20px;
	flex: 				0 1 55px;
	text-align:			center;
}

.checkout-selection h3 {
	flex: 				1 1 auto;
}

#paypal-button {
	margin-top: 		20px;
}

/* -------------------------------------------------------------------------- */
/* -- CHECKOUT TABLE -------------------------------------------------------- */
.table-checkout {
	margin-top: 		10px;
	width: 				100%;
	border-collapse: 	collapse;
	border: 			1px solid #EEE;
	border-radius: 		5px;
	background-color: 	#fff;
}

.table-checkout td {
	padding: 			10px;
	font-size: 			0.8rem;
	vertical-align: 	top;
}

.table-checkout td.cart-price {
	text-align: 		right;
}

.table-checkout td.cart-total {
	border-top: 		1px solid #EEE;
	font-size: 			1.2rem;
	font-weight: 		bold;
}

/* -------------------------------------------------------------------------- */
/* -- STAFF SCROLLER -------------------------------------------------------- */
.staff-links {
	list-style-type: 	none;
	margin: 			var(--margin-exterior);
	display: 			flex;
	justify-content: 	center;
	flex-wrap: 			nowrap;
}

.staff-links li {
	flex: 				0 0 150px;
	margin: 			0 var(--margin-interior);
	text-align:			center;
}

.staff-links li img {
	display: 			block;
	margin: 			0 auto;
	width: 				90px;
	height: 			125px;
	border-radius: 		3px;
	cursor: 			pointer;
}

.staff-scroller {
	display: 			flex;
	flex-wrap: 			nowrap;
	width: 				100%;
	overflow-x: 		hidden;
}

.staff-card {
	flex: 				0 0 100%;
	display: 			none;
	width: 				100%;
    border-radius: 		2px;
    box-shadow: 		0 var(--margin-element) var(--margin-interior) 0px rgba(0, 0, 0, 0.2);
    background-color:	#FFF;
    color: 				#000;
}

.staff-card-image {
	flex: 				33.33%;
}

.staff-card-info {
	flex: 				66.66%;
	padding: 			var(--margin-exterior);
	font-size: 			1.2rem;
    line-height: 		1.6rem;
}

.staff-card-info h3 {
	margin-bottom:		var(--margin-exterior);
	font-size: 			1.6rem;
	line-height: 		2.0rem;
}

.staff-card-info p {
	margin-bottom:		var(--margin-exterior);
}


.staff-card-active {
	display: 			flex;
}

/* -------------------------------------------------------------------------- */
/* -- FILE MESSAGE BOX ------------------------------------------------------ */
.file-message-box {
	position: 			fixed;
	display: 			flex;
	justify-content: 	space-between;
	align-items: 		center;
	width: 				75%;
	height: 			60px;
	bottom: 			-60px;
	background-color: 	#fff;
	padding: 			var(--margin-interior);
	box-shadow: 		1px 1px 3px rgba(0,0,0,0.6);
	transition: 		bottom 500ms ease-in-out;
	font-size: 			1.4rem;
}

.file-message-box p {
	flex: 				1;
	text-align:			left;
}

.file-message-box-show {
	bottom: 			90px;
}

/* -------------------------------------------------------------------------- */
/* -- OVERLAY --------------------------------------------------------------- */
.overlay {
	display: 			none;
	justify-content: 	center;
	align-items: 		center;
	position: 			fixed;
	top: 				0px;
	left: 				0px;
	z-index: 			4001;
	width: 				100%;
	height: 			100%;
	background-color: 	rgba(255,255,255,0.8);
}

.overlay-launched {
	display: 			flex;
	animation: 			fade-bounce 0.5s;
}

.overlay-header {
	margin: 			var(--margin-interior);
	text-align: 		center;
}

.overlay-body {
	position: 			relative;
	width: 				90%;
	height: 			auto;
	max-width:			480px;
	border-radius: 		10px;
	background-color: 	#fff;
	padding: 			var(--margin-interior);
	box-shadow: 		0px 0px 14px rgba(0,0,0,0.3);
}

.overlay-body-full {
	position: 			relative;
	width: 				90%;
	max-width: 			640px;
	border-radius: 		10px;
	background-color: 	#fff;
	padding: 			10px;
	box-shadow: 		0px 0px 14px rgba(0,0,0,0.3);
}

.overlay-body-video {
	position: 			relative;
	width: 				90%;
	max-width: 			1200px;
	aspect-ratio: 		16 / 9;
	border-radius: 		10px;
	background-color: 	#fff;
	padding: 			10px;
	box-shadow: 		0px 0px 14px rgba(0,0,0,0.3);
}

.overlay-body-video iframe {
	position: 			absolute;
	top: 				0;
	left: 				0;
	width: 				100%;
	height: 			100%;
}

.overlay-content {
	display: 			block;
	max-width: 			640px;
	height: 			auto;
	padding: 			var(--margin-interior);
}

.overlay-content .form-user {
	padding: 			0;
}

.overlay-body h2 {
	margin-top: 		0px;
}

.overlay-close {
	display: 			block;
	position: 			absolute;
	top: 				-10px;
	right: 				-10px;
	z-index: 			100;
	width: 				40px;
	height: 			40px;
	border-radius: 		10px;
	background-color:	#1e4495;
	text-align:			center;
	line-height: 		40px;
	font-size: 			1.4rem;
	color: 				#fff;
	text-decoration: 	none;
	text-transform: 	uppercase;
}

.overlay-disclaimer {
	margin: 			10px 0px;
	background-color: 	#EEE;
	padding: 			5px;
	font-style: 		italic;
}

/* -------------------------------------------------------------------------- */
/* -- COUNTDOWN ------------------------------------------------------------- */
.countdown {
	display: 			flex;
	justify-content: 	space-between;
	list-style-type:  	none;
	max-width: 			600px;
	width: 				100%;
	margin: 			var(--margin-block) auto;
}

.countdown li {
	flex:	 			0 0 22%;
	background-color: 	var(--highlight-color);
	padding: 			var(--margin-interior);
	text-align:			center;
	color: 				#FFF;
}


/* -------------------------------------------------------------------------- */
/* -- MESSAGE BOX ----------------------------------------------------------- */
.messageBox {
	position: 			fixed;
	width: 				25%;
	height: 			100px;
	bottom: 			-100px;
	background-color: 	#fff;
	padding: 			var(--margin-interior);
	box-shadow: 		1px 1px 3px rgba(0,0,0,0.6);
	transition: 		bottom 500ms ease-in-out;
}

.messageBox p {
	font-size: 			1.4rem;
}

.messageBox p span {
	color: 				#999;
}

.messageBox-launched {
	bottom: 			30px;
}

/* -------------------------------------------------------------------------- */
/* -- USER PAGES ------------------------------------------------------------ */
.user-options {
	list-style-type: 	none;
	display: 			flex;
	flex-wrap: 			wrap;
	justify-content: 	space-around;
}

.user-options li {
	flex:			 	0 1 110px;
	margin-bottom: 		20px;
}

.user-options li a {
	display: 			block;
	text-decoration:  	none;
	border-radius: 		5px;
	border: 			1px solid #ccc;
	padding: 			10px;
	text-align: 		center;
	font-size: 			1.2rem;
}

.user-options li span {
	display: 			block;
	margin-bottom: 		10px;
	font-size: 			2rem;
}

.summary-highlight-area {
	margin: 			var(--margin-exterior) 0;
	display: 			flex;
	flex-wrap: 			wrap;
	justify-content: 	flex-start;
	gap: 				var(--margin-interior);
}

.summary-highlight {
	display: 			block;
	flex: 				1 0 120px;
	text-decoration:  	none;
	border-radius: 		5px;
	border: 			1px solid #ccc;
	padding: 			10px;
	text-align: 		center;
	font-size: 			1.2rem;
}

.summary-hightlight  p {
	margin-bottom: 		10px;
}

.summary-hightlight h3 {
	font-size: 			2.0rem;
}


.user-sub-menu {
	list-style-type: 	none;
	display: 			flex;
	justify-content: 	flex-end;
}

.user-sub-menu li {
	flex: 				0 0 auto;
	margin-left:		10px;
}

.user-sub-menu li a {
	display: 			block;
	border: 			2px solid #087bc7;
	background-color: 	#fff;
	padding: 			10px 20px;
	color: 				#087bc7;
	font-size: 			1.2rem;
	text-decoration:  	none;
}

.user-sub-menu li a.sub-menu-active {
	background-color: 	#087bc7;
	color: 				#fff;

}

/* -------------------------------------------------------------------------- */
/* -- USER TABLE ------------------------------------------------------------ */
.table-user {
	margin: 			20px 0px;
	width: 				100%;
	border-collapse: 	collapse;
	border: 			1px solid #000;
	font-size: 			1.2rem;
}

.table-user th {
	background: 		#333;
	padding: 			5px;
	text-align: 		center;
	color: 				#fff;
	font-size: 			1.4rem;
}

.table-user tr:nth-child(odd) {
	background-color: 	#f2f2f2;

}

.table-user td {
	padding: 			5px;
	text-align: 		center;
}

.table-user td.title {
	text-align: 		left;
}

.table-user td.price {
	text-align: 		right;
}

.table-user td.price span {
	color: 				#CCC;
	text-decoration: 	line-through;
}

.table-user td img {
	display: 			block;
	margin: 			0 auto;
	width: 				50px;
	height: 			auto;
}

.table-user td .comic-price-guide-image img {
	width: 				auto;
}

.table-user tfoot tr, .table-user tfoot tr:nth-child(odd) {
	background-color: 	#1e4495;
	color: 				#FFF;
	font-weight: 		bold;
}


/* -------------------------------------------------------------------------- */
/* -- USER TABLE ------------------------------------------------------------ */
.table-detail {
	margin: 			0px;
	width: 				100%;
	border-collapse: 	collapse;
	border: 			1px solid #EEE;
	border-radius: 		5px;
	background-color: 	#fff;
}

.table-detail th {
	padding: 			5px 20px 5px 5px;
	text-align: 		right;
}

.table-detail tr:nth-child(odd) {
	background-color: 	#f2f2f2;

}

.table-detail td {
	padding: 			5px;
	text-align: 		left;
}


/* -------------------------------------------------------------------------- */
/* -- INFORMATIONAL PAGES --------------------------------------------------- */
.informational {
	margin: 			20px auto;
	max-width: 			1280px;
	box-sizing: 		border-box;
	border: 			1px solid #EEE;
	border-radius: 		5px;
	background-color: 	#fff;
	padding: 			20px;
	font-size: 			1.2rem;
	line-height: 		1.6rem;
}

.informational p {
	margin: 			20px 0px;
}

.informational ol {
	margin-left: 		40px;
}

.informational ol li {
	margin-top: 		10px;
}



/* -------------------------------------------------------------------------- */
/* -- STAFF PAGE ------------------------------------------------------------ */
.staff {
	margin-top: 		20px;
	display: 			flex;
}

.staff-image {
	flex: 				0 0 30%;
}

.staff-image img {
	display: 			block;
	width: 				100%;
	max-width: 			100%;
	height: 			auto;
}

.staff-info {
	margin-left: 		20px;
	flex: 				0 1 auto;
}


/* -------------------------------------------------------------------------- */
/* -- LEARN/BLOG PAGE ------------------------------------------------------- */
.blog {
	margin: 			20px auto;
	max-width: 			840px;
	box-sizing: 		border-box;
	border: 			1px solid #EEE;
	border-radius: 		5px;
	background-color: 	#fff;
	padding: 			20px;
	font-size: 			1.2rem;
	line-height: 		1.6rem;
}

.blog-social {
	margin: 			20px 0px;
	display: 			flex;
	justify-content: 	top;
}

.blog-byline {
	flex: 				0 0 50%;
	text-align:			left;
	line-height: 		40px;
}

.blog-byline img {
	margin-left: 		15px;
	margin-right: 		5px;
	display: 			inline-block;
	height: 			40px;
	width: 				auto;
	border-radius: 		50%;
	vertical-align: 	middle;
}

.blog-social-media {
	flex: 				0 0 50%;
	text-align:			right;
}

.blog-social-media a {
	margin-left: 		10px;
	display: 			inline-block;
	padding: 			5px 10px;
	text-decoration: 	none;
	color: 				#FFF;
	background-color:	#000;
}

.blog-image img {
	display: 			block;
	margin: 			0 auto;
	width: 				100%;
	height: 			auto;
}

.blog-image p {
	margin: 			2px;
	font-style: 		italic;
	font-size: 			0.8rem;
}

.blog-body {
	margin: 			20px 0px;
}

.blog-body p {
	margin-top: 		20px;
}

.blog-body h2, .blog-body h3, .blog-body h4, .blog-body h5 {
	margin-top: 		20px;
	text-align: 		left;
}

.blog-body img {
	display: 			block;
	margin: 			20px auto;
	max-width: 			800px;
}

.blog-body ul, .blog-body ol {
	margin-left: 		20px;
}

.blog-body ul li, .blog-body ol li {
	margin-top: 		10px;
}

blockquote {
	position: 			relative;
	font-style:			italic;
}

.blog-callout {
	position: 			fixed;
	bottom: 			0;
	left: 				0;
	z-index: 			1001;
	width: 				100%;
	background-color: 	var(--background-blue);
	padding: 			var(--margin-interior);
	color: 				#FFF;
	text-align: 		center;
	opacity: 			0;
	transform: 			translateY(200px);
	animation-name: 	slideUp;
  	animation-duration: 0.5s;
  	animation-delay: 	2s;
	animation-fill-mode: forwards;
}


@keyframes slideUp {
	0% {
		opacity: 		0;
		transform: 		translateY(200px);
	}
	100% {
		opacity: 		1;
		transform: 		translateY(0);
	}
}


.blog-callout .call-to-action {
	margin-top: 		var(--margin-interior);
}

.blog-related {
	margin-top: 		var(--margin-interior);
	display: 			flex;
	flex-wrap: 			nowrap;
	justify-content: 	flex-start;
	align-items: 		flex-start;
	gap: 				var(--margin-interior);
}

.blog-related-item {
	flex: 				1;
}

/* -------------------------------------------------------------------------- */
/* -- INVOICE DISPLAY ------------------------------------------------------- */
.invoice {
	display: 			flex;
	flex-wrap: 			wrap;
	justify-content: 	space-between;
}

.invoice-shipping {
	flex: 				1 0 auto;
	text-align: 		left;
}

.invoice-detail {
	flex: 				0 0 auto;
	text-align: 		left;
}

.invoice-items {
	flex: 				0 0 100%;
}

/* -- DESKTOP --------------------------------------------------------------- */
@media only screen and (min-width: 768px) {

	.menu-main li:hover a {
		background-color: 	#087bc7;
		color: 				#FFF;
	}

	.menu-main > li:hover .menu-main-sub {
		display: 			flex;
	}

	.feature-hero {

	}

}

@media only screen and (max-width:1100px) {

	html {
		font-size: 			15px;
		line-height: 		20px;
	}

	nav div span.desktop-only {
		display: 			none;
	}

	.form-search input {
		flex: 				0 0 70%;
	}

	.form-search button {
		flex: 				0 0 30%;
	}

	.feature-overlay p a.button {
		font-size: 			1.6rem;
		line-height: 		1.6rem;
	}

	.card {
		margin: 			var(--margin-exterior) 1.00%;
		flex: 				0 0 23%;
		text-align: 		center;
	}

}

@media only screen and (max-width: 900px) {

	.b-column-1-4 {
		flex: 				0 1 48%;
	}

	.feature-homepage h1 {
		font-size: 			2.4rem;
		line-height: 		2.8rem;
	}

	.feature-homepage p {
		margin: 			20px 30px;
		font-size: 			1.0rem;
		line-height: 		1.2rem;
	}

	.feature-collection-area {
		margin-left: 		10%;
		width: 				60%;
	}

	.feature-collection-area h2 {
		background: 		none;
		font-size: 			3.0rem;
		text-align: 		left;
	}

	.feature-collection-area p {
		margin-top: 		40px;
		font-size: 			1.2rem;
	}

	.card {
		flex: 				0 0 23%;
		margin-left:		1%;
		margin-right: 		1%;
	}

	.item {
		flex: 				0 1 48%;
		margin: 			1%;
	}

}

@media only screen and (max-width: 768px) {

	/* -- SET THE BODY TEXT ------------------------------------------------- */
	body {
		font: 				normal 14px/18px 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	}

	.desktop-only {
		display: 			none;
	}

	.mobile-only {
		display: 			inline-block;
	}

	.header-content nav {
		flex: 				1 1 100%;
		text-align: 		right;
	}

	/* ---------------------------------------------------------------------- */
	/* -- MOBILE MENU ------------------------------------------------------- */
	.form-search button span {
		display: 			none;
	}

	.menu-main {
		display: 			block;
		position: 			fixed;
		top: 				44px;
		right: 				-100vw;
		z-index: 			2001;
		margin-top: 		0;
		width: 				90vw;
		height: 			calc(100vh - 44px);
		background-color: 	#097bc7;
		transition:		 	right 0.3s ease-in-out;
		box-shadow:			-3px 5px 5px rgba(0,0,0,0.3);
		color: 				#fff;
		overflow-y: 		scroll;
	}

	.menu-main.page-active {
		right: 				0px;
	}

	.menu-main > li  {
		display: 			block;
		border: 			none;
		border-bottom: 		1px solid #EEE;
	}

	.menu-main > li > a {
		display: 			block;
		border: 			none;
		padding:			var(--margin-interior);
		text-align:			left;
		font-size: 			1.6rem;
		color: 				#FFF;
	}

	.menu-main-toggle {
		margin-left: 		var(--margin-interior);
		transform: 			rotate(0deg);
		transition: 		transform 0.2s;
	}

	.menu-main-sub {
		display: 			none;
		position: 			relative;
		top: 				0;
		width: 				100%;
		height: 			auto;
		box-shadow: 		none;
		background-color: 	#333;
		padding: 			0;
	}

	.menu-main-sub-active {
		display: 			block;
	}

	.menu-main-sub-active > .menu-main-toggle {
		transform: 			rotate(90deg);
	}

	.menu-main li div.menu-main-sub div {
		padding: 			var(--margin-element) 0;
	}

	.menu-main li div.menu-main-sub a {
		padding-left: 		var(--margin-exterior);
		font-size: 			1.2rem;
		color: 				#EFEFEF;
	}

	.menu-main li div.menu-main-sub a span {
		display: 			inline-block;
		margin-right:		var(--margin-element);
		width: 				50px;
		vertical-align: 	middle;
	}

	.menu-main li div.menu-main-sub a span img {
		display: 			block;
		margin: 			0 auto;
		width: 				auto;
		height: 			30px;
	}

	.menu-main-sub-group h4 {
		margin-left: 		0;
		padding-left: 		var(--margin-exterior);
		font-size: 			1.3rem;
	}

	.block-homepage {
		background-image: 	url('../jpg/hero-mobile-homepage.jpg');
		padding: 			var(--margin-interior);
	}

	.block-homepage-text {
		max-width: 			100%;
		margin-bottom: 		0;
		border-radius: 		var(--margin-element);
		background: 		rgba(255,255,255,0.7);
		padding: 			var(--margin-interior) var(--margin-interior) 0 var(--margin-interior);
	}

	.block-homepage h1, .block-feature h1  {
		font: 				bold 1.8rem/2.0rem 'Oswald', sans-serif;
	}

	.block-feature h1 span {
		font-size: 			3.0rem;
	}

	.block-homepage p {
		font: 				normal 1.0rem/1.4rem 'Roboto', sans-serif;
		margin: 			var(--margin-interior) 0;
	}

	.block-homepage-video {
		margin: 			0 !important;
		align-self: 		center;
		order: 				2;
	}

	.block-homepage-info {
		flex-basis: 		100%;
		order: 				1;
	}

	.block-flex {
		flex-wrap: 			wrap;
		justify-content: 	center;
	}

	.block-column-6, .block-column-5, .block-column-4, .block-column-3, .block-column-2 {
		flex-basis: 		100%;
	}

	.block-flex > div:first-child {
    	margin-right: 		0;
	}

	.block-text {
		flex: 				0 0 100%;
		order: 				2;
	}

	.block-text h2.h2-alt {
		font-size: 			1.4rem;
	}

	.block-image {
		flex: 				0 0 100%;
		order: 				1;
	}

	.block-image img {
		margin: 			0 auto var(--margin-exterior) auto;
		width: 				50%;
	}

	/* -- CONTENT BLOCKS ---------------------------------------------------- */
	.grid-usp {
		display: 				grid;
		grid-template-columns: 	1fr 1fr;
		gap: 					var(--margin-exterior);
	}

	.grid-usp li {
		margin: 			0;
		padding: 			0;
		text-align: 		center;
	}

	.card {
		flex: 				0 0 29%;
		margin-left:		2%;
		margin-right: 		2%;
	}

	.card h3 {
		font-size: 			1.1rem;
		line-height: 		1.2rem;
		-webkit-line-clamp: 3;
	}

	.card p.card-price {
		font-size: 			0.9rem;
	}

	/* -- FOOTER ------------------------------------------------------------ */
	footer {
		display: 			block;
	}

	footer section {
		margin-top: 		15px;
		padding-top: 		15px;
		text-align:			left;
	}

	footer section:first-child {
		margin-top: 		0px;
	}

	footer section:last-child  p {
		text-align: 		center;
	}

	.widget-footer {
		margin:				var(--margin-interior) auto;
	}

}

@media only screen and (max-width: 610px) {

	:root {
		--margin-block: 	30px;
		--margin-exterior: 	15px;
		--margin-interior:  10px;
		--margin-element: 	5px;
	}

	/* -- SET THE BODY TEXT ------------------------------------------------- */
	html {
		font: 			normal 12px/16px 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	}

	/* ---------------------------------------------------------------------- */
	/* -- HEADERS ----------------------------------------------------------- */
	h1 {
		font: 			bold 1.8rem/2.0rem 'Oswald', sans-serif;
	}

	h2 {
		font: 			bold 1.4rem/1.8rem 'Oswald', sans-serif;
	}

	h3 {
		font: 			bold 1.0rem/1.4rem 'Oswald', sans-serif;
	}



	/* -- HEADER SEARCH ADJUSTMENT ------------------------------------------ */
	.form-search input {
		font-size: 			1.0rem;
		line-height: 		20px;
	}

	/* -- TESTIMONIAL SCROLLER ---------------------------------------------- */
	.widget-inline {
		margin: 			var(--margin-interior) auto;
	}

	.testimonial {
		flex: 				0 0 98%;
	}

	/* -- LEARN SECTION ----------------------------------------------------- */


	/* -- HIDE THE CART AMOUNT ---------------------------------------------- */
	.cart-amount {
		display: 			none;
	}

	/* -- ADJUST CART OVERLAY ----------------------------------------------- */
	.cart-overlay {
		left: 				-237px;
	}

	.cart-overlay:before {
		left: 				190px;
	}

	/* -- COMIC TITLE ------------------------------------------------------- */
	.comic-title {
		flex: 				0 1 100%;
	}

	/* -- ITEM LAYOUT ------------------------------------------------------- */
	.item {
		flex: 				0 1 100%;
		margin: 			0 0 var(--margin-exterior) 0;
		padding: 			0;
	}

	.item-text h3 {
		line-height: 		1.4rem;
	}

	.item-sale-percent, .item-sale-countdown {
		font-size: 			1.0rem;
	}

	/* -- SHRINK THUMBNAIL IMAGES SMALLER ----------------------------------- */
	.item-additional-images img {
		max-width: 			100px;
		height: 			auto;
	}

	/* -- RELEASE DETAILS --------------------------------------------------- */
	.release-details {
		display: 			block;
	}

	.release-detail-description {
		flex: 				none;
	}

	.release-detail-gallery {
		flex: 				none;
	}

	/* -- BLOG LAYOUT ------------------------------------------------------- */
	.blog {
		border: 			none;
		border-radius: 		0px;
		padding: 			20px;
		font-size: 			1.0rem;
		line-height: 		1.2rem;
	}

	.blog-byline {
		flex: 				0 0 35%;
	}

	.blog-social-media {
		flex: 				0 0 65%;
	}

	.blog-social-media a {
		margin-left: 		5px;
	}

	.blog-body img {
		float: 				none;
		max-width: 			100%;
		height: 			auto;
	}

	/* -- CARD LAYOUT ------------------------------------------------------- */
	.card {
		flex: 				0 0 46%;
	}

	.card h3 {
		margin: 			var(--margin-element) 0;
		height: 			3.6rem;
		font-size: 			1.0rem;
		line-height: 		1.2rem;
		-webkit-line-clamp: 3;
	}

	.card p {
		margin: 			0;
		font-size: 			1.0rem;
	}

	.card p.card-price {
		font-size: 			0.8rem;
	}

	.card .button-cart {
		font-size: 			0.8rem;
	}

	/* -- COMIC TITLE LAYOUT ------------------------------------------------ */
	.comic-title-list {
		column-count:  		1;
		column-gap:  		0;
	}

	/* ---------------------------------------------------------------------- */
	/* -- STAFF SCROLLER ---------------------------------------------------- */
	.staff-links {
		margin: 			var(--margin-exterior) 0;
		justify-content: 	space-between;
	}

	.staff-links li {
		flex: 				0 0 60px;
		margin: 			0 var(--margin-element);
		text-align:			center;
		font-size: 			0.8rem;
	}

	.staff-links li img {
		width: 				60px;
		height: 			83px;
		border-radius: 		3px;
		cursor: 			pointer;
	}

	.staff-card {
		flex: 				0 0 100%;
		display: 			none;
		flex-wrap: 			wrap;
		width: 				100%;
	    border-radius: 		2px;
	    box-shadow: 		0 var(--margin-element) var(--margin-interior) 0px rgba(0, 0, 0, 0.2);
	    background-color:	#FFF;
	    color: 				#000;
	}

	.staff-card-image {
		flex: 				0 0 100%;
	}

	.staff-card-image img {
		margin: 			var(--margin-element) auto;
		max-width: 			120px;
		height: 			auto;
	}

	.staff-card-info {
		flex: 				0 0 100%;
		padding: 			var(--margin-element) var(--margin-element) 0 var(--margin-element);
		font-size: 			1.1rem;
	    line-height: 		1.4rem;
	}

	.staff-card-info h3 {
		margin-bottom:		var(--margin-exterior);
		font-size: 			1.2rem;
		line-height: 		1.6rem;
	}

	.staff-card-info p {
		margin-bottom:		var(--margin-exterior);
	}


	.staff-card-active {
		display: 			flex;
	}

	/* -- MESSAGE BOX ------------------------------------------------------- */
	.messageBox {
		left: 				0;
		height: 			auto;
	}

	.messageBox p {
		line-height: 		1.4rem;
		font-size: 			1.2rem;
	}

	.messageBox p span {
		color: 				#999;
	}

	/* -- COMIC PRICE GUIDE ------------------------------------------------- */
	.comic-price-guide span {
		font-size: 			1.6rem;
		line-height: 		1.6rem;
	}

	.comic-price-guide-row {
		display: 			block;
	}

	.comic-price-guide-image {
		margin:				0px;
		flex: 				0 0 100%;
	}

	.comic-price-guide-image img {
		display: 			block;
		margin: 			0px auto 10px auto;
		width: 				auto;
		height: 			auto;
	}

	.comic-price-guide-details {
		flex: 				0 0 100%;
	}


	/* -- FORM USER --------------------------------------------------------- */
	.form-user input.field-75, .form-user select.field-75  {
		margin-bottom: 		10px;
		width: 				100%;
	}

	.form-user input.field-50, .form-user select.field-50  {
		margin-bottom: 		10px;
		width: 				100%;
	}

	.form-user input.field-25, .form-user select.field-25  {
		margin-bottom: 		10px;
		width: 				48%;
	}

	.form-user input.field-15, .form-user select.field-15 {
		margin-bottom: 		10px;
		margin-right: 		1%;
		width: 				48%;
	}

	.form-user input.field-10 {
		margin-bottom: 		10px;
		width: 				33%;
	}

	.form-spacer {
		margin-left: 		0;
	}

	#credit-card {
		margin-left: 		0px;
	}

	/* -- FORM ADVANCED ----------------------------------------------------- */
	.form-advanced p {
		display: 			block;
	}

	.form-advanced label {
		display: 			block;
	}

	.form-advanced button[type=submit] {
		margin: 			0 auto;
	}

	/* -- ITEM DETAIL ------------------------------------------------------- */
	.item-area {
		display: 			block;
	}

	.item-purchase {
		margin: 			0 auto;
		display: 			block;
	}

	.item-image-area {
		flex: 				none;
		margin-top: 		var(--margin-exterior);
	}

	.item-details {
		flex: 				none;
		margin-top: 		var(--margin-exterior);
		margin-left: 		0px;
	}

	.item-details table {
		font-size: 			1.0rem;
		line-height: 		1.2rem;
	}

	.item-details th {
		padding-left: 		0;
	}

	.item-cart-area {
		display: 			block;
		text-align: 		center;
	}


	/* -- PAGINATION -------------------------------------------------------- */
	.item-pagination ul li {
		flex: 				0 0 30px;
	}

	.item-pagination ul li a {
		padding: 			5px 5px;
		font-size: 			1.1rem;
	}

	/* -- CHECKOUT ---------------------------------------------------------- */
	.checkout {
		display: 			block;
	}

	.checkout-order {
		flex: 				none;
		margin: 			10px 0px;
	}

	.checkout-details {
		flex: 				none;
		margin: 			40px 0px 10px 0px;
	}

	/* -- SUB MENU ---------------------------------------------------------- */
	.user-sub-menu li a {
		padding: 			5px 10px;
		font-size: 			0.8rem;
	}

	/* -- TABLE USER -------------------------------------------------------- */
	.table-responsive {
		overflow-x:			auto;
	}

	.table-user {
		font-size: 			0.8rem;
	}

	.table-user th {
		font-size: 			1.0rem;
	}

	.staff {
		margin-top: 		20px;
		display: 			block;
	}

	.staff-info {
		margin-left: 		0px;
	}


}

@media only screen and (max-width: 360px) {

	nav div {
		margin: 			0px 3px;
	}

}

@media print {

	header, footer, .header-logo {
		display: 			none
	}

	main {
		padding: 			0;
	}

}