/*!
Theme Name: Cutting Edge Design - Membit Co. new
Theme URI: http://mattm.ac/
Author: Matt Mac @Membit
Author URI: http://membit.co
Description: This is a handcrafted custom sci-fi cutting edge theme right here.
Version: 6.0.1
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: heavymetal-com
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

Cutting Edge Design is based on Underscores https://underscores.me/, (C) 2012-2017 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Normalize
# Typography
# Elements
# Forms
# Navigation
	## Links
	## Menus
# Accessibility
# Alignments
# Clearings
# Widgets
# Content
	## Posts and pages
	## Comments
# Infinite scroll
# Media
	## Captions
	## Galleries
# Site Design
    ## Header
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Normalize
--------------------------------------------------------------*/
/* normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

@import url('https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap');

html {
	line-height: 1.15; /* 1 */
	-webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
	margin: 0;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
	box-sizing: content-box; /* 1 */
	height: 0; /* 1 */
	overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
	font-family: monospace, monospace; /* 1 */
	font-size: 1em; /* 2 */
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
	background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
	border-bottom: none; /* 1 */
	text-decoration: underline; /* 2 */
	text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
	font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
	font-family: monospace, monospace; /* 1 */
	font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
	border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
	font-family: inherit; /* 1 */
	font-size: 100%; /* 1 */
	line-height: 1.15; /* 1 */
	margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
	overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
	text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
	padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */

legend {
	box-sizing: border-box; /* 1 */
	color: inherit; /* 2 */
	display: table; /* 1 */
	max-width: 100%; /* 1 */
	padding: 0; /* 3 */
	white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
	vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
	overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
	box-sizing: border-box; /* 1 */
	padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
	-webkit-appearance: textfield; /* 1 */
	outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
	-webkit-appearance: button; /* 1 */
	font: inherit; /* 2 */
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
	display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
	display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
	display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
	display: none;
}

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
body,
button,
input,
select,
optgroup,
textarea {
	color: #999;
	font-family: sans-serif;
	font-size: 16px;
	font-size: 1rem;
	line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
	clear: both;
}

p {
	margin-bottom: 1.5em;
}

dfn, cite, em, i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", Courier, monospace;
	font-size: 15px;
	font-size: 0.9375rem;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code, kbd, tt, var {
	font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
	font-size: 15px;
	font-size: 0.9375rem;
}

abbr, acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark, ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

/*--------------------------------------------------------------
# Elements
--------------------------------------------------------------*/
html {
	box-sizing: border-box;
}

*,
*:before,
*:after {
	/* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
	box-sizing: inherit;
}

body {
	background: #fff;
	/* Fallback for when there is no custom background color defined. */
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul, ol {
	margin: 0 0 1.5em 3em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: bold;
}

dd {
	margin: 0 1.5em 1.5em;
}

img {
	height: auto;
	/* Make sure images are scaled correctly. */
	max-width: 100%;
	/* Adhere to container width. */
}

figure {
	margin: 1em 0;
	/* Extra wide images within figure tags don't overflow the content area. */
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid;
	border-color: #ccc #ccc #bbb;
	border-radius: 3px;
	background: #e6e6e6;
	color: rgba(0, 0, 0, 0.8);
	font-size: 12px;
	font-size: 0.75rem;
	line-height: 1;
	padding: .6em 1em .4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: #ccc #bbb #aaa;
}

button:active, button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
	border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: #666;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	color: #111;
}

select {
	border: 1px solid #ccc;
}

textarea {
	width: 100%;
}

/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Links
--------------------------------------------------------------*/
a {
	color: royalblue;
}

a:visited {
	color: purple;
}

a:hover, a:focus, a:active {
	color: midnightblue;
}

a:focus {
	outline: thin dotted;
}

a:hover, a:active {
	outline: 0;
}

/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/
.main-navigation {
	clear: both;
	display: block;
	float: left;
	width: 100%;
}

.main-navigation ul {
	display: none;
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.main-navigation ul ul {
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	float: left;
	position: absolute;
	top: 100%;
	left: -999em;
	z-index: 99999;
}

.main-navigation ul ul ul {
	left: -999em;
	top: 0;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
	left: 100%;
}

.main-navigation ul ul a {
	width: 200px;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	left: auto;
}

.main-navigation li {
	float: left;
	position: relative;
}

.main-navigation a {
	display: block;
	text-decoration: none;
}

/*right side */
header#masthead nav#site-navigation ul#StorefrontChild-menu li.menusubscriptions,
header#masthead nav#site-navigation ul#StorefrontChild-menu li.menugraphicnovels,
header#masthead nav#site-navigation ul#StorefrontChild-menu li.menumerchandise,
header#masthead nav#site-navigation ul#StorefrontChild-menu li.menulore
{
    flex-grow: 1;
    margin:0 1%;
}
/* home */
/*
header#masthead nav#site-navigation ul#StorefrontChild-menu li.menuhome {
    
    flex-grow: 1.2;
    margin-left: 4%;
    margin-right: 1%;

//removed this. home kept peeking from behind the logo. gonna keep the "left side" and "right side"
*/
/*left side */
header#masthead nav#site-navigation ul#StorefrontChild-menu li.menustorehome,
header#masthead nav#site-navigation ul#StorefrontChild-menu li.menuthemagazine,
header#masthead nav#site-navigation ul#StorefrontChild-menu li.menuvirus,
header#masthead nav#site-navigation ul#StorefrontChild-menu li.menucomics
{
    
    flex-grow: 1;
    margin:0 1%;
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
	display: block;
}

@media screen and (min-width: 850px) {
	.menu-toggle {
		display: none;
	}
	.main-navigation ul {
		display: block;
	}
}

.site-main .comment-navigation, .site-main
.posts-navigation, .site-main
.post-navigation {
	margin: 0 0 1.5em;
	overflow: hidden;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	float: left;
	width: 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	float: right;
	text-align: right;
	width: 50%;
}

/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/
/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-size: 0.875rem;
	font-weight: bold;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
	/* Above WP toolbar. */
}

/* Do not show the outline on the skip link target. */
#content[tabindex="-1"]:focus {
	outline: 0;
}

/*--------------------------------------------------------------
# Alignments
--------------------------------------------------------------*/
.alignleft {
	display: inline;
	float: left;
	margin-right: 1.5em;
}

.alignright {
	display: inline;
	float: right;
	margin-left: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/*--------------------------------------------------------------
# Clearings
--------------------------------------------------------------*/
.clear:before,
.clear:after,
.entry-content:before,
.entry-content:after,
.comment-content:before,
.comment-content:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after {
	content: "";
	display: table;
	table-layout: fixed;
}

.clear:after,
.entry-content:after,
.comment-content:after,
.site-header:after,
.site-content:after,
.site-footer:after {
	clear: both;
}

/*--------------------------------------------------------------
# Widgets
--------------------------------------------------------------*/
.widget {
	margin: 0 0 1.5em;
	/* Make sure select elements fit in widgets. */
}

.widget select {
	max-width: 100%;
}

/*--------------------------------------------------------------
# Content
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Posts and pages
--------------------------------------------------------------*/
.sticky {
	display: block;
}

.post,
.page {
	margin: 0 0 1.5em;
}

.updated:not(.published) {
	display: none;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/*--------------------------------------------------------------
## Comments
--------------------------------------------------------------*/
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/*--------------------------------------------------------------
# Infinite scroll
--------------------------------------------------------------*/
/* Globally hidden elements when Infinite Scroll is supported and in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	/* Theme Footer (when set to scrolling) */
	display: none;
}

/* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# Media
--------------------------------------------------------------*/
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/*--------------------------------------------------------------
## Captions
--------------------------------------------------------------*/
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/*--------------------------------------------------------------
## Galleries
--------------------------------------------------------------*/
.gallery {
	margin-bottom: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	vertical-align: top;
	width: 100%;
}

.gallery-columns-2 .gallery-item {
	max-width: 50%;
}

.gallery-columns-3 .gallery-item {
	max-width: 33.33%;
}

.gallery-columns-4 .gallery-item {
	max-width: 25%;
}

.gallery-columns-5 .gallery-item {
	max-width: 20%;
}

.gallery-columns-6 .gallery-item {
	max-width: 16.66%;
}

.gallery-columns-7 .gallery-item {
	max-width: 14.28%;
}

.gallery-columns-8 .gallery-item {
	max-width: 12.5%;
}

.gallery-columns-9 .gallery-item {
	max-width: 11.11%;
}

.gallery-caption {
	display: block;
}
/* --------------------------------------------------------------
Site Design
-------------------------------------------------------------- */



@font-face {
    font-family: 'stencil'; /*a name to be used later*/
    src: url('assets/stencil.ttf'); /*URL to font*/
}
/* Matt, review these and delete what we didn't use */

/*--------------------------------------------------------------
## Header
--------------------------------------------------------------*/
header#masthead {
    position: fixed;
    width:100%;
    z-index: 50;
    height:3em;
}
header#masthead nav#site-navigation {
    width:100%;
    padding:1em 0;
    list-style: none;
    background:#000;
    font-family: 'neue-kabel';
    font-weight:400;
}
header#masthead nav#site-navigation ul {
    margin: 0 auto;
    padding-left:2.6%;
    display: flex;
    justify-content: center;   
}
header#masthead nav#site-navigation ul li {
    width:15%;
    text-align: center;
    
}
header#masthead nav#site-navigation ul a{
    font-family: 'Montserrat', sans-serif;
    text-decoration: none;
    color:#fff;
    font-size: .8em;
    text-transform: uppercase;
}
header#masthead nav#site-navigation ul a:hover{
    font-weight: 600;
}
header#masthead div.logo {
    width:222px;
    margin:0 auto;
    text-align: center;
    height: 160px;
}
header#masthead div.logo svg {
    position:relative;
    top:-3.2em;
}
header#masthead div.logo div.site-branding {
    width:157px;
    position: relative;
    top:-12.2em;
    left:32.5px;
}
div#full-screen-widget-area {
    position: absolute;
    top:0;
    width:100%;
    
}
div#full-screen-widget-area section {
    margin:0;
    z-index: -99;
} 
div#full-screen-widget-area section video#welcomeVid {
    height: auto;
    padding-top:0%;
}
/*--------------------------------------------------------------
## Navigation's Mobile Media Query
--------------------------------------------------------------*/

@media only screen and (max-width: 850px) {
   
    
    
    header#masthead {
        background:none;;
/*        padding:.25em 0 .5em 0;*/
        height:5em;
    }
    header#masthead nav#site-navigation {
        font-weight:700;
        font-size:1.5em;
        background:#222;
        background-image: url(assets/hex-menu-bg-tile.png);
        background-size: 100%;
        height:70vh;
        position:relative;
        top:-59vh;        
        padding:0;
        -webkit-clip-path: polygon(0 0, 0 35vh, 50% 100%, 100% 35vh, 100% 0);
        clip-path: polygon(0 0, 0 35vh, 50% 100%, 100% 35vh, 100% 0);
        transition:top ease-out .5s; 
        -webkit-transition:top ease-out .5s; 
        
    }
    header#masthead button {
        background:none;
        border:none;
        width:17.5vw;
        z-index:99;
        cursor: pointer;
        position:fixed;
        padding:2.75vw;
        -webkit-clip-path: polygon(17.7% 100%, 8.4% 79.3%, 17.7% 59.3%, 8.4% 40.1%, 20% 16.7%, 43.1% 16.7%, 55.8% 0, 78.6% 0, 90.2% 20.9%, 78.6% 40.1%, 90.2% 59.3%, 78.6% 80.8%, 54.5% 80.8%, 44.2% 100%);
        clip-path: polygon(17.7% 100%, 8.4% 79.3%, 17.7% 59.3%, 8.4% 40.1%, 20% 16.7%, 43.1% 16.7%, 55.8% 0, 78.6% 0, 90.2% 20.9%, 78.6% 40.1%, 90.2% 59.3%, 78.6% 80.8%, 54.5% 80.8%, 44.2% 100%);
        margin-left:.5%;
        margin-top:.25%;
    }
    header#masthead button:hover img, header#masthead button:active img {
        opacity:.75;
        transition:opacity linear .15s;
        -webkit-transition:opacity linear .15s;
    }
    header#masthead button:active img {
        content:url("assets/hamburger_active.svg");
    }
    header#masthead button img{
        width:100%;
    }
    header#masthead nav#site-navigation ul {
        display: block;
        margin: 0 auto;
        padding:1em 0;
        position: relative;
        left:17.5%;
        height: 11em;/* added this to fix any menu with more than 4 menu options on mobile*/
        overflow-y: scroll;/* added this to fix any menu with more than 4 menu options on mobile*/
        
    }
    header#masthead nav#site-navigation ul li {
        display: block;
        width:55%;
        margin:0 5%;
        padding:.5em 0;
        border-bottom: solid 2px rgba(255,255,255,0.5); /*#480909 */
    }
    header#masthead nav#site-navigation ul li:nth-child(3){
        display: none;
    }
    header#masthead nav#site-navigation ul#StorefrontChild-menu li:nth-child(3){
        display: block;
    }
    header#masthead nav#site-navigation ul#StorefrontChild-menu li:nth-child(5){
        display: none;
    }
    header#masthead nav#site-navigation ul li:last-child {
        border-bottom: none;
    }
    header#masthead nav#site-navigation ul li a{
        display: block;
    }
    
    
    header#masthead div.logo {
        width:100%;
        height: auto;
        margin:0 auto;
        position: absolute;
        left:0;
        top:-10em;
        z-index: 50;
        transition: top ease-out .5s;
        -webkit-transition: top ease-out .5s;
    }
    header#masthead div.logo svg{
/*
        width: 100%;
        top: 0;
        z-index: 0;
*/
        display: none;
    }
    header#masthead div.logo div.site-branding {
        width:27%;
        position: absolute;
        top:9.5em;
        left:23.5%;
        z-index: 50;
        transition: width ease-out .5s, left ease-out .5s, top ease-out .5s;
}
    header#masthead div.logo div.site-branding img{
        width:100%;
        position: absolute;
    }
    div#full-screen-widget-area section video#welcomeVid {
        padding-top:23%;
    }
    nav#site-navigation.toggled {
        display:none;
    }
    /*right side */
    header#masthead nav#site-navigation ul#StorefrontChild-menu li.menuvaultcomics,
    header#masthead nav#site-navigation ul#StorefrontChild-menu li.menugraphicnovels,
    header#masthead nav#site-navigation ul#StorefrontChild-menu li.menumerchandise,
    header#masthead nav#site-navigation ul#StorefrontChild-menu li.menulore
    {
        flex-grow: 1;
        margin:0 5%;
    }
    /*left side */
    header#masthead nav#site-navigation ul#StorefrontChild-menu li.menustorehome,
    header#masthead nav#site-navigation ul#StorefrontChild-menu li.menuthemagazine,
    header#masthead nav#site-navigation ul#StorefrontChild-menu li.menuvirus,
    header#masthead nav#site-navigation ul#StorefrontChild-menu li.menucomics
    {

        flex-grow: 1;
        margin: 0 5%;
        
    }

    
/*--------------------------------------------------------------   
/*   NAV MENU ANIMATION */
/*--------------------------------------------------------------*/
    header#masthead nav#site-navigation.dropdown {
        top:0;
        transition:top ease-out .75s; 
        /**/
    }
    
    header#masthead div#headerLogoDiv.dropdown {
        top:23vh;
        transition: top ease-out .75s;
    }
    header#masthead div#headerLogoDiv.dropdown svg {
        display:none;
    }
    header#masthead div#headerLogoDiv div#siteBranding.dropdown {
        width: 48%;
        left:.65em;
/*        top:4em;*/
        transition: width ease-out .75s, left ease-out .75s, top ease-out .75s;
    }
    header#masthead button.dropdown { 
        background: #222;
        transition: background ease-in-out .75s;
    }
    header#masthead button.dropdown img { 
/*        display: none;*/
        transition: display ease-in-out .75s;
        content:url("assets/hamburger_open.svg");
    }
    header#masthead button.dropdown:active img {
        content:url("assets/hamburger_active.svg");
    }
    

}



/*--------------------------------------------------------------
## Index.php Loop Slideshow
--------------------------------------------------------------*/
div#featured-slider ul#slides {
    list-style: none;
    margin:0;
    padding:0;
    height:50vw;
    overflow: hidden;
}
div#featured-slider ul#slides li {
    position: relative;
    left:0;
    margin:0;
    padding:0;
    width: 100vw;
    height: 50vw;
    opacity: 1;
    -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 50%);
    clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 50%);
    transition:left ease-in-out 1.5s, opacity ease-in-out 1.25s;
}
div#featured-slider ul#slides li:nth-child(even) {
    -webkit-clip-path: polygon(0 50%, 0 100%, 100% 100%, 100% 0);
    clip-path: polygon(0 50%, 0 100%, 100% 100%, 100% 0);
}
div#featured-slider ul#slides li:nth-child(1) {
    z-index:6;
    top:0;
}
div#featured-slider ul#slides li:nth-child(2) {
    z-index:5;
    top:-50vw;
}
div#featured-slider ul#slides li:nth-child(3) {
    z-index:4;
    top:-100vw;
}
div#featured-slider ul#slides li:nth-child(4) {
    z-index:3;
    top:-150vw;
}
div#featured-slider ul#slides li:nth-child(5) {
    z-index:2;
    top:-200vw;
}
div#featured-slider ul#slides li:nth-child(6) {
    z-index:1;
    top:-250vw;
}
div#featured-slider ul#slides li.moveSlideLeft {
    left:-100%;
    opacity:0;
    transition:left ease-in-out 1.5s, opacity ease-in-out 3.5s;
}
div#featured-slider ul#slides li.moveSlideRight {
    left:100%;
    opacity: 0;
    transition:left ease-in-out 1.5s, opacity ease-in-out 3.5s;
}
#featured-slider > ul#slides > li > img {
    width:100%;
}
div#featured-slider ul#slides li h2 {
    font-size:4vw;
    line-height: 1.25em;
    font-family: 'neue-kabel';
    font-weight: 700;
    position:absolute;
    bottom:5vw;
    left:13.5vw;
    width:41vw;
    color:#fff;
    text-shadow: 0 0 .75vw #000;
}
div#featured-slider ul#slides li:nth-child(even) h2 {
    /*all non existant 3.17.2020 changes made before meeting */
    position:absolute;
/*    bottom:5vw;*/
    left:48.5vw;
    text-align: right;
}
div#featured-slider ul#slides li h2 a {
    color:#fff;
    text-decoration: none;
}
div#featured-slider ul#slides li div.sliderHeadingGradient {
    position:absolute;
    bottom:0;
    width:100vw;
    height:55%;
    background: rgb(0,0,0);
    background: -moz-linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
    background: -webkit-linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
    background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
}
div#featured-slider ul#controls {
    list-style: none;
    position: relative;
    top:-7vw;
    margin:0 auto;
    padding:0;
    background:rgba(255,255,255, 0.3);
    width:13.33vw;
    height:4.5vw;
    border-radius: 3.33vw;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index:7;
    filter: drop-shadow(2px 2px 1px rgba(0,0,0,.5));
}
div#featured-slider ul#controls li {
    background: rgba(0,0,0, 0.6);
    display:inline-block;
    width:2vw;
    height:1.732vw;
    -webkit-clip-path: polygon(0 100%, 100% 100%, 50% 0);
    clip-path: polygon(0 100%, 100% 100%, 50% 0);
    margin: 0 -.25vw;
    cursor: pointer;
    transition: width .5s, height .5s, margin .5s;
}
div#featured-slider ul#controls li:nth-child(even) {
    -webkit-clip-path: polygon(0 0, 50% 100%, 100% 0);
    clip-path: polygon(0 0, 50% 100%, 100% 0);
}
div#featured-slider ul#controls li.activeControl {
    width:3.25vw;
    height:2.8145vw;
    margin:0 -.6vw;
    background:rgba(255,255,255, 1.0); 
    transition: width .5s, height .5s, margin .5s, background 1s;
} 
/*--------------------------------------------------------------
## Index.php slider's Mobile Media Query
--------------------------------------------------------------*/
@media only screen and (max-width: 850px) {
    
    div#featured-slider ul#controls {
        position: relative;
        top:0;
        width:30vw;
        height:9vw;
        border-radius: 7.5vw;
        display: flex;
    }
    div#featured-slider ul#controls li {
        width:4.5vw;
        height:3.897vw;
        margin: 0 -.5vw;
        cursor: pointer;
    }
    div#featured-slider ul#controls li.activeControl {
        width:6.5vw;
        height:5.629vw;
        margin:0 -.7vw;
    }
    div#featured-slider ul#slides li h2 {
        font-size:1.2em;
        line-height: 1em;
        position:absolute;
        bottom:0;
        left:5vw;
        width:50vw;
    }
}
/*--------------------------------------------------------------
## Index.php Heavy Metal Mags Widget Area
--------------------------------------------------------------*/
h2.sectionh2 {
    font-family: 'neue-kabel', sans-serif;
    font-size: 2em;
    text-decoration: underline;
    margin: 3% 0 2% 20%;
}
h2.sectionh2#magsh2 {
    margin-top:0;
}
h2.sectionh2#comicsh2 {
    margin-top:10vw;
}

#heavy-metal-mags-widget-area, #heavy-metal-comics-widget-area {
    display:flex;
    justify-content: center;
    width:73%;
    margin:0 auto;
}
#heavy-metal-mags-widget-area .widgetizedArea, #heavy-metal-comics-widget-area .widgetizedArea {
    display:inline-flex;
    flex-direction: column;
    align-items: center;
    margin:0 -4.2%;/*-3.25vw 3.17.2020 change made before meeting*/
    width:20vw;
}
#heavy-metal-mags-widget-area .widgetizedArea:last-of-type, #heavy-metal-comics-widget-area .widgetizedArea:last-of-type {
    width:10.4vw;
}
#heavy-metal-mags-widget-area .widgetizedArea:nth-child(even), #heavy-metal-comics-widget-area .widgetizedArea:nth-child(even) {
    flex-direction: column-reverse;
}
#heavy-metal-mags-widget-area .widgetizedArea h3, #heavy-metal-comics-widget-area .widgetizedArea h3 {
    font-family: 'neue-kabel', sans-serif;
    color:#fff;
    font-size:1.2em;
    text-decoration: none;
    margin: 2% auto;
    width:90%;
    text-align: center;
}
#heavy-metal-comics-widget-area .widgetizedArea h3 {
    width:70%;
    height:3em;
}
#heavy-metal-mags-widget-area .widgetizedArea a, #heavy-metal-comics-widget-area .widgetizedArea a {
    display:inline-block;
    text-decoration: none;
    width:20vw;
    height:17.32vw;
    -webkit-clip-path: polygon(0 0, 50% 100%, 100% 0);
    clip-path:  polygon(0 0, 50% 100%, 100% 0);
    overflow:hidden;
}
#heavy-metal-mags-widget-area .widgetizedArea:nth-child(even) a, #heavy-metal-comics-widget-area .widgetizedArea:nth-child(even) a {
    -webkit-clip-path: polygon(0 100%, 50% 0, 100% 100%);
    clip-path:  polygon(0 100%, 50% 0, 100% 100%);
}
#heavy-metal-mags-widget-area .widgetizedArea:last-child {
/*    margin-top:66.8px; nonexistant, us JS to calculate 3widgetizedareh3 height and apply to margin-top; 3.17.2020 change made before meeting*/
}
#heavy-metal-mags-widget-area .widgetizedArea a img, #heavy-metal-comics-widget-area .widgetizedArea a img {
    width:100%;
}
#heavy-metal-mags-widget-area .widgetizedArea #allIssuesLink, #heavy-metal-comics-widget-area .widgetizedArea #allComicsLink {
    width:10.4vw;
    height:9vw;
    background: #c80e18;
}
#heavy-metal-mags-widget-area .widgetizedArea #allIssuesLink h3, #heavy-metal-comics-widget-area .widgetizedArea #allComicsLink h3 {
    text-align: center;
    margin-top:1.2vw;/*25% 3.17.2020 change made before meeting*/
    text-decoration: none;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5vw;/*1.2em 3.17.2020 change made before meeting*/
/*    padding:0 2vw;*/ /*nonexistant 3.17.2020 change made before meeting*/
    line-height: 1.2em;
    font-weight: 500;
    overflow: visible;
}
/*--------------------------------------------------------------
## Index.php Heavy Metal Mags Widget Area Media Query
--------------------------------------------------------------*/

@media only screen and (max-width: 850px){
    h2.sectionh2 {
        font-size: 1em; /* changed*/
        margin: 3% 0 2% 2%; /* changed */
    }
    h2.sectionh2#comicsh2 {
        margin-top:15vw;
    }
    #heavy-metal-mags-widget-area, #heavy-metal-comics-widget-area {
        width:100%; /*changed*/
    }
    #heavy-metal-mags-widget-area .widgetizedArea, #heavy-metal-comics-widget-area .widgetizedArea {
        margin:0 -4vw;/*changed*/
        width:27vw; /*changed */
        margin-left:-3vw;/*changed*/
    }
    #heavy-metal-mags-widget-area .widgetizedArea:nth-child(even), #heavy-metal-comics-widget-area .widgetizedArea:nth-child(even) {
        margin-top:1em;/*changed*/
    }
    #heavy-metal-mags-widget-area .widgetizedArea h3, #heavy-metal-comics-widget-area .widgetizedArea h3 {
        font-size:.9em; /*changed*/
        height:2em;/*changed*/
        overflow: hidden;/*changed*/
        line-height:1em;/*changed*/
    }
    #heavy-metal-mags-widget-area .widgetizedArea a, #heavy-metal-comics-widget-area .widgetizedArea a {
        width:28vw;/*changed*/
        height:24.248vw;/*changed*/
    }
    #heavy-metal-mags-widget-area .widgetizedArea #allIssuesLink, #heavy-metal-comics-widget-area .widgetizedArea #allComicsLink {
        width:15vw;/*changed*/
        height:12.99vw;/*changed*/
    }
    #heavy-metal-mags-widget-area .widgetizedArea #allIssuesLink h3, #heavy-metal-comics-widget-area .widgetizedArea #allComicsLink h3 {
        margin-top:15%;/*changed*/
        font-size: 55%;/*changed*/
        line-height: 1em;/*changed*/
    }
}
/*--------------------------------------------------------------
## Index.php Multiple Featured Image Loop aka article.post:first-child
--------------------------------------------------------------*/
/* :root {
    --postMargin: 0;
}*/
article.post {
    width:73%;
    margin:5% auto;
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    align-items: center;
}
article.post:nth-child(odd) {
    flex-direction: row;
}
article.post:first-child {
    flex-direction:row;
}
article.post div.post-words-dfi-wrapper { 
    display:flex;
    flex-direction: column;
    flex-wrap:nowrap;
    width:69.64%;
    margin: 0 -9% 0 0;/*-13% edit */
    justify-content: flex-start;
}
article.post:nth-child(odd) div.post-words-dfi-wrapper {
    margin: 0 0 0 -13%;
}
article.post:first-child div.post-words-dfi-wrapper {
/*    margin-left:-18.36%; or 13%*/
    margin: 0 0 0 -18.36%;;
    width:74%;    
}
article.post div.post-thumb {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: block;
    height:100%;
    width:39%;
    padding:16.8837% 0;
    -webkit-clip-path: polygon(0 100%, 50% 0, 100% 100%);
    clip-path:  polygon(0 100%, 50% 0, 100% 100%);
    cursor: pointer;
}
article.post:first-child div.post-thumb {
    padding:33.7674% 0;
    -webkit-clip-path: polygon(50% 0, 0 50%, 50% 100%, 100% 50%);
    clip-path: polygon(50% 0, 0 50%, 50% 100%, 100% 50%);
}
article.post div.post-words {
    display: flex; 
    flex-direction: column;
    justify-content: flex-end;
    width:100%;
    height: 50%;
    font-family: 'Montserrat', sans-serif;
}
article.post:first-child div.post-words {
    padding-left:18%;
}
article.post div.post-words h2 {
    margin:0;
    text-decoration: none;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-weight:400;
    font-size:1.5em;
}
article.post div.post-words h2 a{
    text-decoration: none;
    font-size: 1.25em;
    color:#fff;
}
article.post div.post-words .post-meta {
    color:#999;
    height: 1.2em;
    width:90%;
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
article.post div.post-words .post-meta a{
    text-decoration: none;
    color:#999;
    text-transform: uppercase;
}
article.post div.post-words .post-meta a:hover{
    text-decoration: underline;
    color:#c80e18;
    transition: color .2s ease-in;
}
article.post:first-child div.post-words .post-excerpt{
    color:#aaa;
    padding:0;
}
article.post:first-child div.post-words .post-excerpt{
    padding-left:10%;
}
article.post:nth-child(odd) div.post-words .post-excerpt{
    padding-left:10%;
}
article.post div.post-words .post-excerpt{
    color:#aaa;
    z-index:3;
}
article.post div.dfiWrap {
    width:100%;
    display:flex;
    align-items: flex-start;
    flex-wrap: wrap;
    justify-content:flex-end;
    margin-left:-7.15%;
}
/*
article.post:first-child div.dfiWrap {
    justify-content: flex-end;
}
*/
article.post:nth-child(even) div.dfiWrap {
    justify-content: flex-start;
    margin-left:0;
}
article.post:first-child .dynamic-featured-images {
    display: inline-block;
    width:43.622%;
    padding:18.901% 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-clip-path: polygon(0 0, 50% 100%, 100% 0);
    clip-path: polygon(0 0, 50% 100%, 100% 0);
    margin: 0 -9.3%;
    cursor: pointer;
}

article.post .dynamic-featured-images {
    display: none;
}
article.post:first-child .dynamic-featured-images:nth-child(odd) {
    -webkit-clip-path: polygon(0 100%, 50% 0, 100% 100%);
    clip-path: polygon(0 100%, 50% 0, 100% 100%);
}
article.post:first-child .readMoreTriangle{
    width:21.683%;
    padding: 2% 0 16.76%;
    margin:0 -9.3%;
}
article.post .readMoreTriangle {
    display: inline-flex;
    background: #c80e18;
    align-items: center;
    justify-content: center;
    width:23.0405%;
    padding: 3% 0 16.93%;
    margin:0;
    -webkit-clip-path: polygon(0 0, 50% 100%, 100% 0);
    clip-path: polygon(0 0, 50% 100%, 100% 0);
    cursor:pointer;
    
}
article.post .readMoreTriangle a.readMoreLink {
    height: 0;
    text-decoration: none;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.6vw;
    line-height: 1.2em;
    font-weight: 500;
}
/*--------------------------------------------------------------
## Index.php Multiple Featured Image Loop Media Query
--------------------------------------------------------------*/
@media only screen and (max-width: 850px){
    article.post {
        width:100%;/*changed*/
        margin:1em auto 1.5em;/*changed*/
        flex-direction: row;/*changed*/
        justify-content: flex-start;/*changed*/
        align-items: flex-start;/*changed*/
    }
    article.post div.post-words-dfi-wrapper { 
        width:88%;/*changed*/
        margin: 0 0 0 -18.36%;/*changed*/
    }
    article.post:nth-child(odd) div.post-words-dfi-wrapper {
        margin: 0 0 0 -18.36%;/*changed*/
    }
    article.post:first-child div.post-words-dfi-wrapper {
        width:88%;/*changed*/    
    }
    article.post div.post-thumb {
        width:29%;/*changed*/
        padding:25.114% 0;/*changed*/
        -webkit-clip-path: polygon(50% 0, 0 50%, 50% 100%, 100% 50%);/*changed*/
        clip-path: polygon(50% 0, 0 50%, 50% 100%, 100% 50%);/*changed*/
    }
    article.post:first-child div.post-thumb {
        padding:25.114% 0;/*changed*/
    }
    article.post div.post-words {
        padding-left: 18%;/*changed*/
    }
    article.post:first-child div.post-words {
        padding-left:18%;/*changed*/
    }
    article.post div.post-words h2 {
        font-size:1em;/*changed*/
        height: 1.2em;/*changed*/
        width:100%;/*changed*/
        overflow: hidden;/*changed*/
        text-overflow: ellipsis;/*changed*/
        white-space: nowrap;/*changed*/
    }
    article.post div.post-words h2 a{
        font-size: 1em;/*changed*/
    }
    article.post div.post-words .post-meta {
        margin:0;/*changed*/
        font-size:.9em;/*changed*/
        height: 1.4em;/*changed*/
        width:100%;/*changed*/
        overflow: hidden;/*changed*/
        text-overflow: ellipsis;/*changed*/
        white-space: nowrap;/*changed*/
    }
    article.post:first-child div.post-words .post-excerpt{
        padding:0;/*changed*/
    }
    article.post:first-child div.post-words .post-excerpt{
        padding-left:6%;/*changed*/
    }
    article.post:nth-child(odd) div.post-words .post-excerpt{
        padding-left:6%;/*changed*/
    }
    article.post div.post-words .post-excerpt{
        padding-left:6%;/*changed*/
        margin:.5em 0 0 0;/*changed*/
        line-height: 1.1em;/*changed*/
        height: 6.5em;/*changed*/
        width:100%;/*changed*/
        overflow: hidden;/*changed*/
        text-overflow: ellipsis;/*changed*/
    }
    article.post div.dfiWrap {
        width:15%;/*changed*/
        display:flex;/*not changed*/
        justify-content:flex-start;/*changed*/
        margin-left:23%;/*changed*/
        margin-top:.5em;/*changed*/
    }
    article.post:nth-child(even) div.dfiWrap {
        margin-left:23%;/*changed*/
    }
    article.post:first-child .dynamic-featured-images {
        display: none;/*changed*/
    }
    article.post:first-child .readMoreTriangle{
        width:100%;/*changed*/
        padding: 10% 0 76%;/*changed*/
        margin:0;/*changed*/
    }
    article.post .readMoreTriangle{
        width:100%;/*changed*/
        padding: 10% 0 76%;/*changed*/
    }
    article.post .readMoreTriangle a.readMoreLink {
        font-size: 55%;/*changed*/
    }
}
/*--------------------------------------------------------------
## To The Forge! Banner and link
--------------------------------------------------------------*/
#toTheForge {
    width:100%;
    background: #222;
    height:2em;
    padding:0 44.5%;
}

#toTheForge div#ttfTriangle {
    display: inline-flex;
    background: #c80e18;
    align-items: center;
    justify-content: center;
    width:100%;
    padding: 27% 0 58%;
    margin:0 auto;
    -webkit-clip-path: polygon(0 0, 50% 100%, 100% 0);
    clip-path: polygon(0 0, 50% 100%, 100% 0);
    cursor:pointer;
    height: 0;
    text-decoration: none;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.6vw;
    line-height: 1.2em;
    font-weight: 500;
}
#toTheForge a {
    text-decoration: none;
}

/*--------------------------------------------------------------
## To The Forge! Banner Media Query
--------------------------------------------------------------*/
@media only screen and (max-width: 850px){
    #toTheForge {
        height:1em;/*changed*/
        padding:0 42.5%; /*changed*/
    }

    #toTheForge div#ttfTriangle {
        font-size: 55%;/*changed*/
    }
}
/*--------------------------------------------------------------
## Index.php Midbar Banner Loop
--------------------------------------------------------------*/
div#midbarLoop {
    width:100%;
    padding:0 10%;
    display:flex;
    background:#2d2d2d;
    margin: 8vw 0;
}
@media only screen and (max-width: 850px){
    div#midbarLoop {
        display: none;
    }
}
div#midbarLoop .midbarPost {
    display: flex;
    margin:-1.5vw 0;
    align-items: center;
}
div#midbarLoop .midbarPost .midbarThumb {
    width:13vw;
    height:11.25vw;
    -webkit-clip-path: polygon(0 0, 50% 100%, 100% 0);
    clip-path: polygon(0 0, 50% 100%, 100% 0);
    cursor: pointer;
    background-size: cover;
    background-position: center;
}
.midbarThumbFlip {
    width:13vw;
    height:11.25vw;
    -webkit-clip-path: polygon(0 100%, 50% 0, 100% 100%);
    clip-path: polygon(0 100%, 50% 0, 100% 100%);
    cursor: pointer;
    background-position: -15% 50%;
    background-size: 150%;
}
div#midbarLoop .midbarPost .midbarText {
    width:14.44vw;
    text-decoration: none;
    color:#fff;
    font-size: 1em;
    line-height: 1.2em;
    font-weight: 600;
    margin:0 1vw 0 -1vw;
    font-family: 'Montserrat', sans-serif;
}
div#midbarLoop .midbarPost .midbarText a {
    display: block;
    text-decoration: none;
    color:#fff;
    height:2.4em;
/*    white-space: nowrap;*/
    overflow: hidden;
    text-overflow: ellipsis;
}
div#midbarLoop .midbarPost .midbarText .post-meta {
    font-size: .75em;
    font-weight: 300;
    margin:.2em 0 0 0;
    opacity: 0.8;
    text-decoration: none;
    height:2em;
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
div#midbarLoop .midbarPost .midbarText .post-meta a {
    display: inline;
    text-transform: uppercase;
}
div#midbarLoop .midbarPost .midbarText .post-meta a:hover {
    text-decoration: underline;
    color:#ff0000;
    opacity: 1;
    transition: color .2s ease-in, opacity .2s ease-in;
}
/*--------------------------------------------------------------
## Index.php Shop Widget Area
--------------------------------------------------------------*/
#shop-widget-area {
    display: flex;
    flex-wrap: wrap;
    width:60%;
    margin:4vw auto 0;
    justify-content: center;
    
}
#shop-widget-area .widgetizedArea {
    width:20vw;
    height:17.32vw;
    display:flex;
    flex-direction: column;
    justify-content: flex-end;
    -webkit-clip-path: polygon(0 50%, 25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%);
    clip-path: polygon(0 50%, 25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%);
    margin: .5vw -2.1vw;
}
#shop-widget-area > div:nth-child(2), #shop-widget-area > div:nth-child(5), #shop-widget-area > div:nth-child(7) {
    position: relative;
    top:9.2vw; /*8.66vw*/
}
#shop-widget-area > div:nth-child(7) {
    width:9vw;
    height:7.794vw;
    -webkit-clip-path: polygon(0 0, 50% 100%, 100% 0);
    clip-path: polygon(0 0, 50% 100%, 100% 0);
    margin: -8.7vw -4.55vw;
    position: relative;
    left: 3vw;
    background: #c80e18;
    justify-content: center;
}
#shop-widget-area > div:nth-child(7) h3 {
    opacity: 1;
    width:9vw;
    padding:0;
    top:.8vw;
    font-size: 1.6vw;
}
#shop-widget-area:hover > div:nth-child(7) h3 {
    padding:0;
}
#shop-widget-area .widgetizedArea h3{
    position: absolute;
    width:20vw;
    padding:0 5vw 0;
    margin:0;
    text-align: center;
    background: rgb(200,14,24);
    background: -moz-linear-gradient(0deg, rgba(200,14,24,1) 50%, rgba(200,14,24,0) 100%);
    background: -webkit-linear-gradient(0deg, rgba(200,14,24,1) 50%, rgba(200,14,24,0) 100%);
    background: linear-gradient(0deg, rgba(200,14,24,1) 50%, rgba(200,14,24,0) 100%);
    opacity: 0;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.4em;
    line-height: 1.2em;
    font-weight: 500;
    transition: opacity .5s ease-in-out, padding 1s ease-in-out;
    cursor: pointer;
}
#shop-widget-area .widgetizedArea:hover h3 {
    opacity: 1;
    padding:7vw 5vw 2vw;
    transition: opacity .5s ease-in-out, padding 1s ease-in-out;
}
#shop-widget-area .widgetizedArea img {
    z-index: -2;
    width:100%;
    position: relative;
    right:0;
    top:0;
    transition: all 2.5s ease;
}
#shop-widget-area .widgetizedArea a {
/*    display: flex;*/
/*    justify-content: center;*/
/*    align-content: center;*/
/*    height:100%;*/
}
#shop-widget-area .widgetizedArea:last-child a {
    display: block;
    height: auto;
}
#shop-widget-area .widgetizedArea:hover img {
    position: relative;
    right:5%;
    top:5%;
    width:110% !important;
    max-width:110%;
}

/*--------------------------------------------------------------
## Index.php Shop Widget Area Media Query
--------------------------------------------------------------*/
@media only screen and (max-width: 850px){ 
    #shop-widget-area {
        width:87%;/*changed*/
        justify-content: flex-start;/*changed*/
    }
    #shop-widget-area .widgetizedArea {
        width:33vw;/*changed*/
        height:28.578vw;/*changed*/
        margin: 1vw -3.5vw;/*changed*/
    }
    #shop-widget-area > div:nth-child(2), #shop-widget-area > div:nth-child(5), #shop-widget-area > div:nth-child(7) {
        top:15.2vw; /*8.66vw*//*changed*/
    }
    #shop-widget-area > div:nth-child(7) {
        width:14.85vw;/*changed*/
        height:12.8601vw;/*changed*/
        margin: -14.2vw -5.75vw;/*changed*/
    }
    #shop-widget-area > div:nth-child(7) h3 {
        width:14.85vw;/*changed*/
        top:2.2vw;/*changed*/
        font-size: 55%;/*changed*/
        line-height: 120%;/*changed*/
    }
    #shop-widget-area .widgetizedArea h3{
        width:33vw;/*changed*/
        padding:1em 6vw .4em;/*changed*/
        background: -moz-linear-gradient(0deg, rgba(200,14,24,1) 0%, rgba(200,14,24,0) 100%);/*changed*/
        background: -webkit-linear-gradient(0deg, rgba(200,14,24,1) 0%, rgba(200,14,24,0) 100%);/*changed*/
        background: linear-gradient(0deg, rgba(200,14,24,1) 0%, rgba(200,14,24,0) 100%);/*changed*/
        opacity: 1;/*changed*/
        font-size: .8em;/*changed*/
        line-height: 1em;/*changed*/
    }
}

/*--------------------------------------------------------------
## Footer_wpshopify.php
--------------------------------------------------------------*/
div.footersearch {
    
   
    width: 80%;
    max-width: 1440px;
    margin: 5em auto;
}

/*--------------------------------------------------------------
## Footer.php
--------------------------------------------------------------*/
footer {
    margin-top: 7vw;
    box-shadow: 0px -500px 250px black;
    background: #000;
}
footer #meltyForge {
    background: url(assets/footer-bg.png);
    background-size: cover;
    width:100%;
    height:17vw;
}
footer #linksCatsSocialLogoWrap {
    display: flex;
    width:75%;
    margin:3vw auto;
    font-family: 'Montserrat', sans-serif;
    font-size: 1em;
}
footer a {
    color:#fff;
    text-decoration: none;
}
footer div {
    width:50%;
}
footer div ul {
    list-style: none;
    margin:0;
    padding:1vw 0 0 0;
    font-weight:400;
}
footer div li {
    margin:0;
    list-style: none;
    color:#fff;
}
footer div li {
    font-weight: 600;
}
footer div li ul li {
    font-weight:400;
}
footer div#footerCats {
    margin: 0 3% 0 0;
}
footer div li.categories ul {
    -webkit-column-count: 2;
    -webkit-column-gap: 12%;
    column-count: 2;
    column-gap: 12%;
}
footer #footerLogo {
    margin-top:-.5vw;
}
#deadBottom {
    width:100%;
    font-size: 1em;
    text-align: center;
}
/*--------------------------------------------------------------
## Footer.php Media Query
--------------------------------------------------------------*/
@media only screen and (max-width: 850px){ 
    footer #linksCatsSocialLogoWrap {
        flex-direction: row;/*changed*/
        flex-wrap: wrap;/*changed*/
        width:95%;/*changed*/
        font-size: .75em;
        line-height: 1.1em;
    }
    footer #footerLinks {
        order:2;/*changed*/
    }
    footer div li div{
        margin:0;
    }
    footer div#footerCats {
        order:3;/*changed*/
        height:5.5em;
        margin:1em 0;
    }
    footer #FooterSoc {
        order:4;/*changed*/
    }
    footer #footerLogo {
        order:1;/*changed*/
        width:90vw;/*changed*/
    }
    footer #footerLogo img{
        width:35%;/*changed*/
    }
    footer div {
        margin:1em 0;/*changed*/
    }
    footer div ul {
        padding:.5em 0 0 0;/*changed*/
    }
    footer div li.categories ul {
        -webkit-column-gap: 5%;
        column-gap: 5%;
    }
}
/*--------------------------------------------------------------
## page.php
--------------------------------------------------------------*/
#background-div {
    width:100%;
    height: 100%;
    position:fixed;
    top:0;
    background-image: url(assets/whiteHexPattern_seamless.png);
    background-size: 75%;
    opacity: .15;
    z-index: -99;
}
#primary {
    margin-top:10em;
    
}
#primary.page-content-area main#main {
    width:60%;
    max-width:680px;
    margin:0 auto;
}
#primary.page-content-area header.entry-header h1 {
    font-family: 'neue-kabel', sans-serif;
    font-size:3em;
    text-transform: uppercase;
    text-align: center;
}
#primary.page-content-area .entry-content {
    background: #000;
    box-shadow: 150px -75px 150px #000, -150px -75px 150px #000;
}
/*--------------------------------------------------------------
## page-the-forge.php #webExclusives and #fromTheMag
--------------------------------------------------------------*/
#primary.forgeContentArea #mainwrap, #primary.archive-content-area #mainwrap {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    width:80%;
    margin: 0 auto;
}

#mainwrap #main.site-main {
    width:72%;
}
#mainwrap aside#secondary.widget-area {
    width:24%;
}
#fromTheMag, #webExclusives {
    margin:0 0 8%;
}
#mainwrap #main.site-main #webExclusives .webExclusivePost, #fromTheMag .fromTheMagPost {
    display: flex; 
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding:0 0 4% 0;
}
#mainwrap #main.site-main #webExclusives .webExclusivePost:after, #fromTheMag .fromTheMagPost:after {
    content: ""; 
    display: block; 
    margin: 0 0 0 25%;
    width: 70%; 
    padding:4% 0 0 0 ;
    border-bottom: 1px solid #555;
}
#mainwrap #main.site-main #webExclusives .webExclusivePost:nth-child(3):after, #fromTheMag .fromTheMagPost:nth-child(3):after{
    border:none;
}
#mainwrap #main.site-main #webExclusives .webExclusivePost .webExclusiveThumb, #fromTheMag .fromTheMagPost .fromTheMagThumb {
    background-size: auto 100%;
    background-position: center;
    display: inline-flex;
    -webkit-clip-path: polygon(0 25%, 50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%);
    clip-path: polygon(0 25%, 50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%);
    width:35%;
    padding: 20.20% 0;
    cursor: pointer;
    -webkit-transition:background-size 1.5s;
    -o-transition:background-size 1.5s;
    -moz-transition:background-size 1.5s;
    transition:background-size 1.5s;
}
#mainwrap #main.site-main #webExclusives .webExclusivePost .webExclusiveThumb:hover, #fromTheMag .fromTheMagPost .fromTheMagThumb:hover {
    background-size:auto 140%;
    -webkit-transition:background-size 2s;
    -o-transition:background-size 2s;
    -moz-transition:background-size 2s;
    transition:background-size 2s;
}

@keyframes bgSz {
  50% {background-size: 125px 125px;}
}
#mainwrap #main.site-main #webExclusives .webExclusivePost .webExclusiveText, #fromTheMag .fromTheMagPost .fromTheMagText {
    width:60%;
/*    display: inline;*/
}
#mainwrap #main.site-main #webExclusives .webExclusivePost .webExclusiveText h2, #fromTheMag .fromTheMagPost .fromTheMagText h2 {
    margin:0;
    text-decoration: none;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-weight:400;
    font-size:1.5em;
}
#mainwrap #main.site-main #webExclusives .webExclusivePost .webExclusiveText h2 a, #fromTheMag .fromTheMagPost .fromTheMagText h2 a{
    text-decoration: none;
    font-size: 1.25em;
    color:#fff;
}
#mainwrap #main.site-main #webExclusives .webExclusivePost .webExclusiveText .post-meta, #fromTheMag .fromTheMagPost .fromTheMagText .post-meta {
    color:#999;
    font-size: .8em;
    margin: 0;
    height: 1.3em;
    margin-bottom:-.3em;
    width:90%;
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
#mainwrap #main.site-main #webExclusives .webExclusivePost .webExclusiveText .post-meta a, #fromTheMag .fromTheMagPost .fromTheMagText .post-meta a {
    text-decoration: none;
    color:#999;
    text-transform: uppercase;
    margin-right:.4em;
}
#mainwrap #main.site-main #webExclusives .webExclusivePost .webExclusiveText .post-meta a:hover, #fromTheMag .fromTheMagPost .fromTheMagText .post-meta a:hover {
    text-decoration: underline;
    color:#c80e18;
    transition: color .2s ease-in;
}
#mainwrap #main.site-main #webExclusives .webExclusivePost .webExclusiveText .post-excerpt, #fromTheMag .fromTheMagPost .fromTheMagText .post-excerpt  {
    color:#aaa;
    padding:0;
}
#mainwrap #main.site-main #webExclusives #webExclusivesMorePosts, #fromTheMag #fromTheMagMorePosts {
    width:100%;
    background: #222;
    height:2em;
    padding:0 44.5%;

}
#mainwrap #main.site-main #webExclusives #webExclusivesMorePosts .morePostsTriangle, #fromTheMag #fromTheMagMorePosts .morePostsTriangle {
    display: inline-flex;
    background: #c80e18;
    align-items: center;
    justify-content: center;
    width:100%;
    padding: 27% 12% 58%;
    margin:0 auto;
    -webkit-clip-path: polygon(0 0, 50% 100%, 100% 0);
    clip-path: polygon(0 0, 50% 100%, 100% 0);
    cursor:pointer;
    height: 0;
    text-decoration: none;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 1em;
    line-height: 1.2em;
    font-weight: 500;
}
.morePostsTriangle a {
    text-decoration: none;
    color:#fff;
    text-align: center;
}
/*--------------------------------------------------------------
## page-the-forge.php #youtubeStream
--------------------------------------------------------------*/
#youtubeStream {
    display:flex;
    flex-wrap:wrap;
    margin:2% 0;
}
.youtubePost {
    background-size: cover;
    width:50%;
    padding:21.65% 0;
    -webkit-clip-path: polygon(0 50%, 25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%);
    clip-path: polygon(0 50%, 25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%);
    margin:0 -6%;
    position:relative;
    cursor: pointer;
}
.youtubePost:first-child {
    margin:12.5% 0 -12.5% 0;
}
.youtubePost:nth-child(3) {
    margin: 1% 0 0 33%;
}

#youtubeMorePosts {
    display: inline-flex;
    background: #c80e18;
    align-items: center;
    justify-content: center;
    width: 24%;
    padding: 5.784% 0 15%;
    margin: 1% 0 0 -11.25%;
    -webkit-clip-path: polygon(0 0, 50% 100%, 100% 0);
    clip-path: polygon(0 0, 50% 100%, 100% 0);
    cursor:pointer;
    height: 0;
    text-decoration: none;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.2em;
    line-height: 1.2em;
    font-weight: 400;
    color:#fff;
}
#youtubeMorePosts a{
    text-decoration: none;
    color:#fff;
}
/*--------------------------------------------------------------
## page-the-forge.php #interviews
--------------------------------------------------------------*/
#interviews {
    display:flex;
    flex-wrap:wrap;
    align-items: flex-start;
    width:83.5%;
    justify-content: center;
    margin: 15% 3% 6%;
}
#interviews .interviewsPost {
    background-size: cover;
    width:60%;
    padding:25.98% 0;
    -webkit-clip-path: polygon(0 50%, 25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%);
    clip-path: polygon(0 50%, 25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%);
    margin:-12.5% -6.6%;
    position: relative;
    cursor:pointer;
}
#interviews .interviewsPost:nth-child(even) {
    margin-top:14.5%;
}
#interviews .interviewsPost a, .youtubePost a {
    position: absolute;
    bottom:0;
    background: -moz-linear-gradient(90deg, rgba(200,14,24,1) 0%, rgba(200,14,24,0) 100%);/*changed*/
    background: -webkit-linear-gradient(90deg, rgba(200,14,24,1) 0%, rgba(200,14,24,0) 100%);/*changed*/
    background: linear-gradient(0deg, rgba(200,14,24,1) 0%, rgba(200,14,24,0) 100%);/*changed*/
    width:100%;
    padding: 2em 25% 2em;
    text-align: center;
    font-size: 1.2em;
    line-height: 1.2em;
    overflow: hidden;
    color:#eee;
    text-decoration: none;
    font-weight: 400;
}

#interviews #interviewsMorePosts {
    display: inline-flex;
    background: #c80e18;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 28.5%;
    padding: 15.5% 0 10%;
    margin: -12.5% 0 0 -15.75%;
    -webkit-clip-path: polygon(50% 0, 100% 100%, 0 100%);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    cursor:pointer;
    height: 0;
    text-decoration: none;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.2em;
    line-height: 1.2em;
    color:#fff;
}
#interviewsMorePosts a {
    text-decoration: none;
    color:#fff;
}
/*--------------------------------------------------------------
## page-the-forge.php mobile media query 
--------------------------------------------------------------*/
@media only screen and (max-width: 850px){
    #primary.forgeContentArea #mainwrap, #primary.archive-content-area #mainwrap {
        flex-wrap: wrap;/*changed*/
        justify-content: center;/*changed*/
        width:100%;/*changed*/
    }

    #mainwrap #main.site-main {
        width:95%;/*changed*/
    }
    #mainwrap aside#secondary.widget-area {
        width:100%;/*changed*/
    }
    #fromTheMag, #webExclusives {
        margin:0;/*changed*/
    }
    #mainwrap #main.site-main #webExclusives .webExclusivePost .webExclusiveThumb, #fromTheMag .fromTheMagPost .fromTheMagThumb {
        width:35%;/*changed*/
        padding: 20.20% 0;/*changed*/
    }
    #mainwrap #main.site-main #webExclusives .webExclusivePost .webExclusiveText, #fromTheMag .fromTheMagPost .fromTheMagText {
        width:63.5%;/*changed*/
    }
    #mainwrap #main.site-main #webExclusives .webExclusivePost .webExclusiveText h2, #fromTheMag .fromTheMagPost .fromTheMagText h2 {
        font-size:1em;/*changed*/
        height: 1.5em;/*changed*/
        margin-bottom: -.25em;/*changed*/
        width:90%;/*changed*/
        overflow-y: hidden;/*changed*/
        white-space: nowrap;/*changed*/
        text-overflow:ellipsis;/*changed*/ 
        text-decoration: underline;/*changed*/
    }
    #mainwrap #main.site-main #webExclusives .webExclusivePost .webExclusiveText h2 a, #fromTheMag .fromTheMagPost .fromTheMagText h2 a{
        font-size: 1em;/*changed*/
    }
    #mainwrap #main.site-main #webExclusives .webExclusivePost .webExclusiveText .post-meta, #fromTheMag .fromTheMagPost .fromTheMagText .post-meta {
        
        font-size: .9em;/*changed*/
        height: 1.2em;/*changed*/
        width:90%;/*changed*/
        overflow-y: hidden;/*changed*/
        text-overflow:ellipsis;/*changed*/
    }
    #mainwrap #main.site-main #webExclusives .webExclusivePost .webExclusiveText .post-meta a, #fromTheMag .fromTheMagPost .fromTheMagText .post-meta a {
        margin-right:.3em;/*changed*/
        text-transform:none;/*changed*/
    }
    #mainwrap #main.site-main #webExclusives .webExclusivePost .webExclusiveText .post-excerpt, #fromTheMag .fromTheMagPost .fromTheMagText .post-excerpt  {
        line-height: 1em;/*changed*/
        height:3.1em;/*changed*/
        overflow-y:hidden;/*changed*/
        
    }
    #mainwrap #main.site-main #webExclusives #webExclusivesMorePosts, #fromTheMag #fromTheMagMorePosts {
        height:1em;/*changed*/
        padding:0 39%;/*changed*/
        margin:0 auto 15%;/*changed*/
    }
    #mainwrap #main.site-main #webExclusives #webExclusivesMorePosts .morePostsTriangle, #fromTheMag #fromTheMagMorePosts .morePostsTriangle {
        font-size: .9em;/*changed*/
        line-height: 1em;/*changed*/
    }
/*--------------------------------------------------------------
## page-the-forge.php #youtubeStream
--------------------------------------------------------------*/
    #youtubeStream {
        margin:2% 0 2% -2%;/*changed*/
    }
    .youtubePost {
        width:54%;/*changed*/
        padding:23.382% 0;/*changed*/
        
    }
    .youtubePost:nth-child(3) {
        margin: .8% 0 0 35%;/*changed*/
    }
    #youtubeMorePosts {
        width: 22.8%;/*changed*/
        margin: 1% 0 0 -11.8%;/*changed*/
        color: #eee;/*changed*/
    }
    #youtubeMorePosts a{
        text-align: center;/*changed*/
        font-size:.8em;/*changed*/
        padding:0 10%;/*changed*/
        line-height: 1.1em;/*changed*/
    }
/*--------------------------------------------------------------
## page-the-forge.php #interviews
--------------------------------------------------------------*/
    #interviews {
        width:91.8%;/*changed*/
    }
    #interviews .interviewsPost a, .youtubePost a {
        background: -moz-linear-gradient(90deg, rgba(200,14,24,1) 0%, rgba(200,14,24,0) 100%);/*changed*/
        background: -webkit-linear-gradient(90deg, rgba(200,14,24,1) 0%, rgba(200,14,24,0) 100%);/*changed*/
        background: linear-gradient(0deg, rgba(200,14,24,1) 0%, rgba(200,14,24,0) 100%);/*changed*/
        font-size:1em;
        line-height: 1.2em;
        padding:1.5em 25% 0;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }
    #interviewsMorePosts a {
        text-align: center;/*changed*/
        font-size:.7em;/*changed*/
        padding:10% 0 0;/*changed*/
        line-height: 1.1em;/*changed*/
    }
}
/*--------------------------------------------------------------
## sidebar.php
--------------------------------------------------------------*/
#mainwrap aside {
    margin-top:calc(90px + 2%);
    display: flex;
    flex-direction: column;
    align-items: center;
}
aside #h2RecentPostsArticles{
    margin:0;
    padding:0;
    align-self: flex-start;
}
aside #recentArticles {
    width:100%;
    display: flex;
    flex-direction: column;
    margin-bottom:20%;
}
aside #recentArticles .recentArticlesPost {
    display:flex;
    flex-direction: row;
    align-items: flex-end;
    flex-wrap: nowrap;
    background: #323232;
    margin:4% 0 0;
    width:100%;
}
aside #recentArticles .recentArticlesPost .recentArticlesThumb {
    display: inline-flex;
    width: 55%;
    padding:27.5% 0;
    -webkit-clip-path: polygon(0 0, 100% 0, 0 100%);
    clip-path: polygon(0 0, 100% 0, 0 100%);
    cursor:pointer;
    background-size: cover; 
}
aside #recentArticles .recentArticlesPost .recentArticlesText { 
    width: 70%;
    margin: 0 0 1em -27%;
    z-index: 1;
}
.recentArticlesText a {
    text-decoration: none;
    color:#fff;
}
.recentArticlesText h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1em;
    margin: .1em 0;/*.5em 0*/    
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

/*
    height:1.2em;
    overflow:hidden;
    text-overflow: ellipsis;
    white-space:nowrap;
*/
    width:100%;
}
.recentArticlesText .post-meta {
    font-size:.8em;
    margin:0;
    height:1.2em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
#allPosts {
    width:100%;
    background: #222;
    height:2em;
    padding:0 44.5%; 
    display: flex;
    justify-content: center;
}
#allPosts a {
    display: inline-flex;
    background: #c80e18; /* #c80e18; */
    align-items: flex-end;
    justify-content: center;
    padding: 125% 133.33% 95%;
    width:100%;
    -webkit-clip-path: polygon(0 0, 50% 100%, 100% 0);
    clip-path: polygon(0 0, 50% 100%, 100% 0);
    cursor:pointer;
    height: 0;
    text-decoration: none;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: .7em;
    line-height: 1.2em;
    font-weight: 500;
    text-align: center;
}


/*--------------------------------------------------------------
## sidebar-post-bar.php
--------------------------------------------------------------*/
aside#post-bar-secondary {
    margin:0;
    background: -moz-linear-gradient(90deg, rgba(11,11,11,0) 0%, rgba(11,11,11,.85) 20%);/*changed*/
    background: -webkit-linear-gradient(90deg, rgba(111,11,11,0) 0%, rgba(11,11,11,.85) 20%);/*changed*/
    background: linear-gradient(0deg, rgba(11,11,11,0) 0%, rgba(11,11,11,.85) 20%);/*changed*/
    width:21%;
    max-width:360px;
    padding:10% 0 10% 1%;
    
}
#primary-single.cat1740 aside#post-bar-secondary {
    padding-right:1%;
    box-shadow: 15px 0 27px #000;
}
aside#post-bar-secondary h2 {
    font-size:1.4em;
    font-style:italic;
    text-decoration: none;
    margin:10% 0 0 0;
}
aside#post-bar-secondary #recentArticles, aside#post-bar-secondary #heavyNews {
    width:116%;
    max-width: 420px;
    margin:0 0 25% -16%;
    
}
aside#post-bar-secondary #recentArticles .recentArticlesPost, aside#post-bar-secondary #heavyNews .heavyNewsPost {
    background:none;
    margin:5.5% 0;
    display:flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    padding-right:2%;
    
}
aside#post-bar-secondary #recentArticles .recentArticlesThumb, aside#post-bar-secondary #heavyNews .heavyNewsThumb {
    display: inline-flex;
    width: 50%;
    padding:21.65% 0;
    -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    cursor:pointer;
    background-size: cover; 
}
aside#post-bar-secondary #recentArticles .recentArticlesText, aside#post-bar-secondary #heavyNews .heavyNewsText {
    width:58%;
    margin:1.3em 0 0 -8%;
    z-index: 1;
}
aside#post-bar-secondary #recentArticles .recentArticlesText h3, aside#post-bar-secondary #heavyNews .heavyNewsText h3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 1em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    margin:0;
    text-decoration: none;
    
}
.heavyNewsText h3 a {
    text-decoration: none;
    color:#fff;
}
aside#post-bar-secondary #recentArticles .recentArticlesText .post-meta, aside#post-bar-secondary #heavyNews .heavyNewsText .post-meta {
    width:100%;
    height:1.5em;
    margin:0;
    overflow-x: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color:#bbb;
    font-size:.75em;
    font-weight:300;
    font-family:'Montserrat', sans-serif;
}
aside#post-bar-secondary #recentArticles .recentArticlesText .post-meta a, aside#post-bar-secondary #heavyNews .heavyNewsText .post-meta a {
    text-transform: uppercase;
    text-decoration: none;
    color:#bbb;
    font-weight:300;
}
/*--------------------------------------------------------------
## ad widgets styling
--------------------------------------------------------------*/
.sidebarAd, .leaderboardAd {
    display: flex;
    justify-content: center;
}
span.deleteTitle {
    display:none;
}

/*--------------------------------------------------------------
## sidebar.php media query
--------------------------------------------------------------*/
@media only screen and (max-width: 850px){
    #mainwrap aside {
        margin-top:0;/*changed*/
    }
    aside #h2RecentPostsArticles{
        margin:3% 0 2% 2%;/*changed*/
    }
    aside #recentArticles .recentArticlesPost {
        align-items: center;/*changed*/
    }
    aside #recentArticles .recentArticlesPost .recentArticlesThumb {
        width: 40%;/*changed*/
        padding:16.5% 0;/*changed*/
    }
    aside #recentArticles .recentArticlesPost .recentArticlesText {
        margin: 0 0 0 -13%;/*changed*/
    }
    .recentArticlesText h3 {
        margin: .25em 0;/*changed*/
        height:1.3em;/*changed*/
    }
    .recentArticlesText .post-meta {
        line-height:1em;/*changed*/
    }
    #allPosts {
        height:1em;/*changed*/
        margin-top:4%;/*changed*/
    }
    #allPosts a {
        padding: 85.8% 95% 75.8%;/*changed*/
        font-size: .9em;/*changed*/
        line-height: 1em;/*changed*/
    }
/*--------------------------------------------------------------
    ## sidebar-post-bar.php
--------------------------------------------------------------*/
    aside#post-bar-secondary {
        margin:0;
        background: none;
        width:95%;/*changed*/
        max-width:850px;/*changed*/
        padding:0;/*changed*/

    }
    #primary-single.cat1740 aside#post-bar-secondary {
        padding-right:0;/*changed*/
        box-shadow:none;/*changed*/
    }
    aside#post-bar-secondary h2 {
        font-size:1.4em;
        font-style:italic;
        text-decoration: none;
        margin:2% 0;/*changed*/
    }
    aside#post-bar-secondary #recentArticles, aside#post-bar-secondary #heavyNews {
        width:90%;/*changed*/
        max-width: 850px;/*changed*/
        margin:0;/*changed*/

    }
    aside#post-bar-secondary #recentArticles .recentArticlesPost, aside#post-bar-secondary #heavyNews .heavyNewsPost {
        background:#111;/*changed*/
        margin:5% 0;/*changed*/
        padding:5% 0 5% 5%;/*changed*/
        display:flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;

    }
    aside#post-bar-secondary #recentArticles .recentArticlesPost:nth-child(even), aside#post-bar-secondary #heavyNews .heavyNewsPost:nth-child(even) {
        flex-direction: row-reverse;/*changed*/
        margin:5% -10% 5% 10%;/*changed*/
        padding:5% 5% 5% 0;/*changed*/
    }
    aside#post-bar-secondary #heavyNews .heavyNewsPost:nth-child(even) {
        margin:8% -10% 9% 10%;/*changed*/
    }
    aside#post-bar-secondary #recentArticles .recentArticlesThumb, aside#post-bar-secondary #heavyNews .heavyNewsThumb {
        display: inline-flex;
        width: 35%;/*changed*/
        padding:15.15% 0;/*changed*/
        margin:-12.5% 0;/*changed*/
        -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%);
        clip-path: polygon(0 0, 100% 0, 50% 100%);
        cursor:pointer;
        background-size: cover; 
    }
    aside#post-bar-secondary #recentArticles .recentArticlesText, aside#post-bar-secondary #heavyNews .heavyNewsText {
        width:58%;
        margin:0;/*changed*/
        line-height: 1em;
        z-index: 1;
    }
    aside#post-bar-secondary #recentArticles .recentArticlesText h3, aside#post-bar-secondary #heavyNews .heavyNewsText h3 {
        font-family: 'Montserrat', sans-serif;
        font-weight: 400;
        font-size: 1em;
        height:1.2em;
        overflow:hidden;
        text-overflow: ellipsis;
        white-space:nowrap;
        width:100%;
        margin:0;
        text-decoration: none;

    }
    .heavyNewsText h3 a {
        text-decoration: none;
        color:#fff;
    }
    aside#post-bar-secondary #recentArticles .recentArticlesText .post-meta, aside#post-bar-secondary #heavyNews .heavyNewsText .post-meta {
        width:100%;
        height:1.1em;/*changed*/
        margin:0;
        overflow-x: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color:#bbb;
        font-size:.75em;
        font-weight:300;
        font-family:'Montserrat', sans-serif;
    }
    aside#post-bar-secondary #recentArticles .recentArticlesText .post-meta a, aside#post-bar-secondary #heavyNews .heavyNewsText .post-meta a {
        text-transform: uppercase;
        text-decoration: none;
        color:#bbb;
        font-weight:300;
    }
    /*--------------------------------------------------------------
    ## ad widgets styling
    --------------------------------------------------------------*/
    .sidebarAd, .leaderboardAd {
        display: flex;
        justify-content: center;
    }
    span.deleteTitle {
        display:none;
    }
}
/*--------------------------------------------------------------
## single.php + single-cat1740.php
--------------------------------------------------------------*/
#primary-single a {
    background:none;
    outline:.1em solid rgba(50,20,0,0);
    outline-offset: -1em;
    transition:outline .25s ease-in, outline-offset .25s ease-in, color .15s ease-in;
    -webkit-transition:outline .25s ease-in, outline-offset .25s ease-in, color .15s ease-in;
}
#primary-single #main a:hover, #primary-single #recentArticles a:hover, #primary-single #heavyNews a:hover {
    outline: 1em solid rgba(138,0,0,.5);
    outline-offset: -1em;
    color:#fff;
    transition:outline .15s ease-in, outline-offset .15s ease-in, color .15s ease-in;
    -webkit-transition:outline .15s ease-in, outline-offset .15s ease-in, color .15s ease-in;
}
#primary-single #main figure a:hover, #primary-single .textwidget #sb_instagram a:hover, a.sbi_item:hover, a.sbi_photo:hover,#primary-single #main .leaderboardAd a:hover {
    outline: none;
    outline-offset: 0;
}
#primary-single #mainwrap{
    display: flex;
/*    width:65%;*/
    max-width: 1260px;
    justify-content: space-around;
    margin:0 auto;
}
#primary-single #mainwrap main#main {
    max-width: calc(680px + 34%);
    margin:5% 0;
    width:100%;
    box-shadow: -15px 0 27px #000; 
}
#primary-single #mainwrap main#main article{
    display:flex;
    flex-direction: column;
    margin:0;
    width:100%;
    background: #000;
    padding:5% 24% 5% 10%;
}
#primary-single #mainwrap main#main article .entry-content {
    width:100%;
}
#primary-single #mainwrap main#main article .entry-header {
    order:2;
}
#primary-single #mainwrap main#main article .entry-header .entry-meta a {
    font-style: italic;
    font-size:.8em;
    font-weight:300;
    color:#bbb;
}
#primary-single #mainwrap main#main article .entry-header .entry-meta a:after {
    text-decoration: none;
    content:", ";
}
#primary-single #mainwrap main#main article .entry-header .entry-meta a:last-child:after{
    content:"";
}
#primary-single #mainwrap main#main article .entry-header h1 {
    color:#fff;
    font-size:2.5em;
    line-height: 1em;
    margin:0;
}
#primary-single #mainwrap main#main article .post-thumbnail {
    order:1;
}
#primary-single #mainwrap main#main article .entry-content {
    order:3;
}
#primary-single #mainwrap main#main article .entry-footer {
    order:4;
}
#primary-single #mainwrap nav a {
    color:#bbb;
}
footer.entry-footer {
    margin:0;
}

/*-----------------------------------------------------------

##post-13569 
------------------------------------------------------------*/
body.postid-13569 #post-13569 {
    align-items: baseline;
}
body.postid-13569 #post-13569 p.dvk-social-sharing, body.postid-13569 #post-13569 footer.entry-footer, body.postid-13569 nav.post-navigation  {
    display: none;
}

body.postid-13569 aside#post-bar-secondary {
        display:none;
  
}

body.postid-13569 div.wp-block-nextend-smartslider3 {
   padding-top: 30vw; 
    width: 100%;
}

body.postid-13569 #primary-single #mainwrap main#main {
    
    max-width: 100%;
}

body.postid-13569 header.entry-header {
    
   /* display:none; */
}


body.postid-13569 div.entry-meta {
    display: none;
    
}

/*--------------------------------------------------------------
## single-cat1740.php
--------------------------------------------------------------*/
#primary-single.cat1740 #background-div, #primary-single #background-div {
    width:100%;
    height: 57vw;/*100%*/
    position:absolute;/*fixed*/
    top:0;
    background-image: url(assets/whiteHexPattern_seamless.png);
    background-size: 33%;
    opacity: .2;
    z-index: -99;
}
#primary-single.cat1740 #shadow.javascriptSuccess {
    position: sticky;
    top: 0;
    left: 17.5%;
    width: 130%;
    height: 150vh;
    background: #000;
    z-index: -50;
    margin: -25vh 0 -125vh -2.5vw;
    box-shadow: -15px 0 27px #000;
    opacity: .88;
}
#primary-single.cat1740 #post-bar-secondary {
        margin-top: 75vw;
}

#primary-single.cat1740 .entry-header {
    margin-top:5%;
}
/*--------------------------------------------------------------
## single.php / single-cat1740.php media query
--------------------------------------------------------------*/
@media only screen and (max-width: 850px){
    #primary-single a {
        background:none;
        outline:.1em solid rgba(50,20,0,0);
        outline-offset: -1em;
        transition:outline .25s ease-in, outline-offset .25s ease-in, color .15s ease-in;
        -webkit-transition:outline .25s ease-in, outline-offset .25s ease-in, color .15s ease-in;
    }
    #primary-single #main a:hover, #primary-single #recentArticles a:hover, #primary-single #heavyNews a:hover {
        outline: 1em solid rgba(138,0,0,.5);
        outline-offset: -1em;
        color:#fff;
        transition:outline .15s ease-in, outline-offset .15s ease-in, color .15s ease-in;
        -webkit-transition:outline .15s ease-in, outline-offset .15s ease-in, color .15s ease-in;
    }
    #primary-single figure a:hover, #primary-single .textwidget #sb_instagram a:hover, a.sbi_item:hover, a.sbi_photo:hover {
        outline: none;
        outline-offset: 0;
    }
    #primary-single #mainwrap{
        display: flex;
        width:100%;/*changed*/
        flex-wrap: wrap;/*changed*/
        max-width: 1260px;
        justify-content: space-around;
        margin:0 auto;
        padding:7%;/*changed*/
    }
    #primary-single #mainwrap main#main {
        max-width: 850px;/*changed*/
        margin:15% 0; /* WAS 5 0 */
    }
    #primary-single #mainwrap main#main article{
        display:flex;
        flex-direction: column;
        margin:0 auto;/*changed*/
        width:100%;/*changed*/
        padding:0;/*changed*/
    }
    #primary-single #mainwrap main#main article .entry-content {
        width:100%;
        color:#eee;/*changed*/
    }
    #primary-single #mainwrap main#main article .entry-header {
        order:2;
    }
    #primary-single #mainwrap main#main article .entry-header .entry-meta a {
        font-style: italic;
        font-size:.8em;
        font-weight:300;
        color:#bbb;
    }
    #primary-single #mainwrap main#main article .entry-header .entry-meta a:after {
        text-decoration: none;
        content:", ";
    }
    #primary-single #mainwrap main#main article .entry-header .entry-meta a:last-child:after{
        content:"";
    }
    #primary-single #mainwrap main#main article .entry-header h1 {
        color:#fff;
        font-size:1.5em;/*changed*/
        line-height: 1em;
        margin:0;
    }
    #primary-single #mainwrap main#main article .post-thumbnail {
        order:1;
    }
    #primary-single #mainwrap main#main article .entry-content {
        order:3;
    }
    #primary-single #mainwrap main#main article .entry-footer {
        order:4;
    }
    #primary-single #mainwrap nav a {
        color:#bbb;
    }

    #primary-single.cat1740 #post-bar-secondary {
        margin-top: 0;/*changed*/
    }
/*--------------------------------------------------------------
 ## single-cat1740.php
--------------------------------------------------------------*/
    #primary-single.cat1740 #background-div, #primary-single #background-div {
        width:100%;
        height: 57vw;/*100%*/
        position:absolute;/*fixed*/
        top:0;
        background-image: url(assets/whiteHexPattern_seamless.png);
        background-size: 100%;/*changed*/
        opacity: .25;
        z-index: -99;
    }
    #primary-single.cat1740 #shadow.javascriptSuccess {
        position: sticky;
        top: 0;
        left: 17.5%;
        width: 130%;
        height: 150vh;
        background: #000;
        z-index: -50;
        margin: -25vh 0 -125vh -2.5vw;
        box-shadow: -15px 0 27px #000;
        opacity: .88;
        
    }
    #shadow{
        display: none;/*changed*/
    }
    div#n2-ss-3 {
        height:72vh;/*changed*/

    }
    #n2-ss-3 > div.n2-ss-slider-1.n2-ss-swipe-element.n2-ow.n2-grab {
        height:100% !important;/*changed*/
    }
    #n2-ss-3-arrow-previous, #n2-ss-3-arrow-next {
        top:35vh!important;/*changed*/
    }
/*
    #primary-single.cat1740 .entry-content #firstLeaderboard.leaderboardAd { 
        padding-top:53%;changed
    }
*/
    #primary-single.cat1740 header.entry-header {
        margin-top:3em;
    }
}
/*--------------------------------------------------------------
 ## 404.php
--------------------------------------------------------------*/
div#primary main#main section.error-404.not-found {
    width:25vw;
    margin:0 auto;
    background: #330409;
    border:solid 3px #666;
}
div#primary main#main section.error-404.not-found header.page-header {
    display:none;
}
div#primary main#main section.error-404.not-found div.page-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}
div#primary main#main section.error-404.not-found div.page-content p {
    font-family:'Montserrat', sans-serif;
    text-align:center;
    margin:0;
    width:100%
}
div#primary main#main section.error-404.not-found div.page-content p:first-child {
    text-transform: uppercase;
    width:100%;
    margin-top:10%;
}
div#primary main#main section.error-404.not-found div.page-content p:first-child span{
    margin:0 1vw;
}
div#primary main#main section.error-404.not-found div.page-content p:nth-child(2) {
    font-size: 6.5vw;
    text-transform: uppercase;
    width:100%;
    margin:-2vw;
}
div#primary main#main section.error-404.not-found div.page-content p:nth-child(3) {
    width:12vw;
}
div#primary main#main section.error-404.not-found div.page-content p:nth-child(4) {
    margin:10% 0 2% 0;
}
div#primary main#main section.error-404.not-found div.page-content form input {
    background:#333;
    color:#fff;
    border:2px solid #aaa;
    border-radius: 0;
    margin: 0 0 10% 0;
}
div#primary main#main section.error-404.not-found div.page-content a:last-child img{
    width:5vw;
}
@media only screen and (max-width: 850px){
    div#primary main#main section.error-404.not-found {
        width:95vw;
        margin:-20vw auto 0;
        background: #330409;
        border:solid 3px #666;
    }
    div#primary main#main section.error-404.not-found header.page-header {
        display:none;
    }
    div#primary main#main section.error-404.not-found div.page-content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    div#primary main#main section.error-404.not-found div.page-content p {
        font-family:'Montserrat', sans-serif;
        text-align:center;
        margin:0;
        width:100%
    }
    div#primary main#main section.error-404.not-found div.page-content p:first-child {
        text-transform: uppercase;
        width:100%;
        margin-top:10%;
    }
    div#primary main#main section.error-404.not-found div.page-content p:first-child span{
        margin:0 5vw;
        font-size:6vw;
    }
    div#primary main#main section.error-404.not-found div.page-content p:nth-child(2) {
        font-size: 45vw;
        text-transform: uppercase;
        width:100%;
        margin:-15vw;
    }
    div#primary main#main section.error-404.not-found div.page-content p:nth-child(3) {
        width:50vw;
        margin:10% 0 0 0;
    }
    div#primary main#main section.error-404.not-found div.page-content p:nth-child(4) {
        margin:10% 0 2% 0;
    }
    div#primary main#main section.error-404.not-found div.page-content form input {
        background:#333;
        color:#fff;
        border:2px solid #aaa;
        border-radius: 0;
        margin: 10% 0;
    }
    div#primary main#main section.error-404.not-found div.page-content a:last-child img{
        width:19vw;
    }
}
/*--------------------------------------------------------------
 ## comments.php
--------------------------------------------------------------*/
div#comments ol.comment-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
div#comments ol.comment-list li.comment {
    border-bottom:1px solid #555;
    padding:5%;
    background:#101010;
}
div#comments ol.comment-list li.comment article.comment-body {
    background:none !important;
}
div#comments ol.comment-list li.comment:nth-child(even) {
    background:#191919;
}
div#comments footer.comment-meta {
    background: none;
    margin:0;
}
div#comments footer.comment-meta div.comment-author {
    margin:0;
}
div#comments footer.comment-meta div.comment-metadata {
    margin:0;
    font-size:.75em;
    opacity: .8;
}
div#comments div#respond {
    padding:5%;
    color:#fff;
}
div#comments form#commentform textarea, div#comments form#commentform input {
    background: rgba(0,0,0,0.5);
    border-radius: 0;
    border: 1px solid rgba(255,255,255,0.5);
}
div#comments form#commentform input {
    display: block;
    width:100%;
}
div#comments form#commentform p.form-submit input {
    color:#fff;
    padding:2.5% 0;
    width:75%;
    margin:0 auto;
    border: 2px solid rgba(255,255,255,0.25);
    font-family: 'Montserrat', sans-serif;
    font-size:1em;
    font-weight: 600;
}
/*--------------------------------------------------------------
 ## Contact Form 7 plugin
https://contactform7.com/styling-contact-form/
--------------------------------------------------------------*/
.entry-content form {
    width:100%;
    
}
.entry-content form .contactForm {
    display: flex;
    justify-content: space-between;
}
.entry-content form span {
    width:48%;
}
.entry-content form input, .entry-content form textarea  {
    display: inline;
    width:100%;
    background: #000;
    color:#fff;
    font-family: 'Montserrat', sans-serif;
    font-size:1em;
    border: 1px solid #fff;
    border-radius: 0;
    padding:.5em;
    margin:2% 0;
}
.entry-content form input:focus, .entry-content form textarea:focus {
    background: #fff;
    color:#000;
    font-weight: 500;
}
.entry-content form input::-moz-selection, .entry-content form textarea::-moz-selection { 
background-color: #000; 
color: #fff;
}

.entry-content form input::selection, .entry-content form textarea::selection {
background-color: #000;
color: #fff;
}
.entry-content form select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-family: 'Montserrat', sans-serif;
    display: inline;
    width:100%;
    background: #000;
    color:#fff;
    border: 1px solid #fff;
    border-radius: 0;
    padding:.5em;
    margin:2% 0;
}
.entry-content form .subjDropd span:last-child:after {
    position: absolute;
    top:.4em;
    right:.5em;
    content: '>';
    font: 2em "Consolas", monospace;
    color: #fff;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}
.entry-content form .message span {
    width:100%;
}
.entry-content form #submit {
    width:50%;
    margin:0 25%;
}
/*--------------------------------------------------------------
 ## WP-SHOPIFY CSS EDITS
--------------------------------------------------------------*/


#storefront.page-content-area main#main .wpshopify .wps-container {
 margin:3% auto!important;/*  had been commented out jay 724 */
}

section.wps-container p, section.wps-container li, div.wps-products-description {
    color:#fff!important;
}
.wps-container h1, .wps-container h2, .wps-container h3, .wps-container h4, .wps-container h5 {
    color:#fff!important;
}
h2.wps-products-title {
    color:#fff!important;
}
/*--------------------------------------------------------------
 ## page-storefront.php
--------------------------------------------------------------*/
#storefront #background-div {
    width:100%;
    height: 100%;
    position:fixed;
    top:0;
    background-image: url(assets/whiteHexPattern_seamless.png);
    background-size: 50%;
    opacity: .15;
    z-index: -99;
}
#storefront {
    margin:0;
    position: relative;
}
#storefront.page-content-area main#main {
    width:80%;
   /* max-width:1280px;*/
    margin:0 auto;
}
#storefront.page-content-area header.entry-header h1 {
    font-family: 'neue-kabel', sans-serif;
    font-size:3em;
    text-transform: uppercase;
    text-align: center;
    display: none;
}
#storefront.page-content-area .entry-content {
    padding-top:30px;
    padding-left: 2%;
    background: #000;
    box-shadow: 150px -75px 150px #000, -150px -75px 150px #000;
}
#storefront.page-content-area main#main h2 {
    
    font-size:2em;
    color:#fff;
    font-family: 'neue-kabel', sans-serif;
    text-align: left;
}

#storefront.page-content-area main#main h2.redheader {
    display: inline-block;
    padding: 0.25em 2em;
    text-transform: uppercase;
    background-color: #870000;
   
}

div.wp-block-group.redheader h2.wps-collection-title {
    display: inline-block;
    padding: 0.25em 2em;
    text-transform: uppercase;
    background-color: #870000;
    min-width: 400px;
}

#storefront.page-content-area main#main div.SearchStoreBlock, #storefront.page-content-area main#main div.search-container, #storefront.page-content-area main#main wp-block-image, #storefront.page-content-area main#main .preview-block {
    margin: auto;
    max-width: 1280px;
}


div#text-18.footersearch div div h2 {
    display: block;
    padding: 0;
    text-transform: none;
    background: none;
    font-size:1.5em;
    color:#fff;
    font-family: 'neue-kabel', sans-serif;
    text-align: left;
}

div#text-18.footersearch h2.redheader {
    display: inline-block;
    padding: 0.25em 2em;
    text-transform: uppercase;
    background-color: #870000;
    font-size:2em;
    color:#fff;
    font-family: 'neue-kabel', sans-serif;
    text-align: left;
}

#storefront.page-content-area main#main h2.wps-products-title, #storefront.page-content-area main#main h3.wps-products-price, div.footersearch#text-18 h2.wps-products-title, div.footersearch#text-18 h3.wps-products-price, #loreContent div.Pre-order-block h2.wps-products-title, #loreContent div.Pre-order-block h3.wps-products-price

{
    font-size:1em;
    text-align: center;
    color:#fff;
    font-family: 'Montserrat', sans-serif;
    font-style: italic;
    font-weight: 400;
    height: 1.5em;
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
#storefront.page-content-area main#main .wps-buy-button-wrapper, div.footersearch#text-18 .wps-buy-button-wrapper {
   
    position:absolute;
    top:16.5em;
    right:12%;

}
#storefront.page-content-area main#main .wps-buy-button-wrapper div.wps-component button, div.footersearch#text-18 .wps-buy-button-wrapper div.wps-component button{
    padding: 23% 0;
    width:30px;
    height:30px;
    z-index: 1;
}
#storefront.page-content-area main#main .wps-buy-button-wrapper .wps-add-to-cart::after, div.footersearch#text-18 .wps-buy-button-wrapper .wps-add-to-cart::after{
    top: calc(50% - 10px);
    right: calc(50% - 10px);
}

div.allproducts div.wps-w-4 img.wps-product-image {
    height:250px;
    width:193px;
    /* object-fit: cover; */
    object-fit: contain;

}

#storefront.page-content-area main#main div.allproducts img.wps-product-image, div.footersearch#text-18 img.wps-product-image {
    max-height: 200px;
    max-width:166px;
}

#storefront.page-content-area main#main img.wps-product-image {
    height:80%;
    max-height: 400px;
    max-width: 309px;
    width:100%;
    /* object-fit: cover; */
    object-fit: contain;
}

#storefront.page-content-area main#main .red_bg  h2.new_releases {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
        padding-bottom:0;
}

#storefront.page-content-area main#main .red_bg img.wps-product-image {
    max-height: 368.424px;
    height:20.15625vw;
}
/*div.red_bg div.wp-block-buttons div a.wp-block-button_link {*/

#storefront.page-content-area main#main div.red_bg.current-issue-block div.wp-block-buttons, #storefront.page-content-area main#main div.featured-titles div.wp-block-group__inner-container div.wp-block-buttons, #storefront.page-content-area main#main div.Pre-order-block div.wp-block-group__inner-container div.wp-block-buttons, 
#storefront.page-content-area main#main div.wp-block-group div.wp-block-group__inner-container div.wp-block-buttons /*Added universal for merch page 9/1/2020 */
{
    position: relative;
    width:100%;
    height:1%;
    margin: 0 auto 0 auto;
}

#storefront.page-content-area main#main div.red_bg.current-issue-block div div.wp-block-buttons div {
    position: absolute;
    background-image: url(assets/black-hex.png);
    background-repeat: no-repeat;
    top:-400px; 
    left:95%;
    padding-left:1%;
        padding-top:2%;
    height: 80px;
    width: 80px;
    
}

#storefront.page-content-area main#main div.wp-block-group.featured-titles div div.wp-block-buttons div.view-more-button, #storefront.page-content-area main#main div.wp-block-group.Pre-order-block div div.wp-block-buttons div.view-more-button,
#storefront.page-content-area main#main div.wp-block-group div div.wp-block-buttons div.view-more-button /*Added universal for merch page 9/1/2020 */
 {
    position: absolute;
    background-image: url(assets/red-hex.png);
     background-repeat: no-repeat;
    top:-400px;
    left:95%;
    padding-left:1%;
        padding-top:2%;
    height: 80px;
    width: 80px;
}
#storefront.page-content-area main#main div.wp-block-group.red_bg div div.wp-block-buttons div.view-more-button /*Added universal for merch page 9/1/2020 */ {
    background-image: url(assets/black-hex.png);
}

#storefront.page-content-area main#main div.red_bg.current-issue-block div div.wp-block-buttons div a, #storefront.page-content-area main#main div.featured-titles div.wp-block-group__inner-container div.wp-block-buttons div.view-more-button a, #storefront.page-content-area main#main div.Pre-order-block div.wp-block-group__inner-container div.wp-block-buttons div.view-more-button a,
#storefront.page-content-area main#main div.wp-block-group div.wp-block-group__inner-container div.wp-block-buttons div.view-more-button a /*Added universal for merch page 9/1/2020 */
{
    position: relative;
    font-size: 1.5em;
    width:150px;
    height: 20px;
    display: block;
    margin: 10px 0 0 0;
    padding: 0;
    
}

#post-22437 div.wps-buy-button-wrapper .wps-component-products-options, #hero_slider .wps-component-products-options, #collection_products .wps-component-products-options{
    
    display: none;
}


#storefront.page-content-area main#main div.wp-block-group.featuredVault div div.wp-block-buttons
{
    position: relative;
    width:100%;
    height:20px;
    margin: 0 auto 0 auto;
}

#storefront.page-content-area main#main div.wp-block-group.featuredVault div div.wp-block-buttons div.view-more-button
{
    position: absolute;
    background-image: url(assets/red-hex.png);
     background-repeat: no-repeat;
    top:-300px;
    left:95%;
    padding-left:1%;
    padding-top:2%;
    height: 80px;
    width: 80px;
}

#storefront.page-content-area main#main div.wp-block-group.featuredVault div div.wp-block-buttons div.view-more-button a {
    
    position: relative;
    font-size: 1.5em;
    width:150px;
    height: 20px;
    display: block;
    margin: 10px 0 0 0;
    padding: 0;
    
}




#storefront.page-content-area main#main .wps-w-3 img.wps-product-image {
/*
    max-height: 557.775px;
    height:19.71572vw;
*/
    max-height: 511.29375px;
    height: 80%;
    max-width: 400px;
    
}
#storefront.page-content-area main#main .wps-w-3 .wps-buy-button-wrapper {
    bottom:9em;
}
/* this style was responsible for the scroll-right problem */
#storefront.page-content-area main#main .wps-component-collection-image, #storefront.page-content-area main#main .wp-block-image.size-full {
    flex:auto;
    max-width: none;
    width:100vw; /*calc(100% + 66vw);*/
    height:11vw; 
    margin:-2em auto 1em;/* was -2em -33vw 1em; */
    position: relative;
    left: -13.7vw; /* was not there */
    
}

#storefront.page-content-area main#main div.wps-client-component wps-container  {
    margin: auto;
  max-width: 100%;  
}

#storefront.page-content-area main#main .wps-component-collection-image img.wps-product-image, #storefront.page-content-area main#main .wp-block-image.size-full img {
    width:100%;
    height: 75%;
    max-width: 100%;
    max-height: 75%;
}

#storefront.page-content-area main#main .red_bg, #storefront.page-content-area main#main .dark_red_bg, #storefront.page-content-area main#main .subscriptionsblock {
    background:#870000;
    width:100vw; /* was calc(100% + 100vw); */
    padding:1em 15%; /* was 1em 50vw;  */
    left: -15%;
    position: relative;
}

div.wp-block-group.subscriptionsblock div div.wps-client-component.wps-container{
    margin-left: auto;
    margin-right: auto;
    
}

div.wp-block-group.subscriptionsblock div div.wps-client-component.wps-container div.wps-component.wps-component-products-title, div.wp-block-group.subscriptionsblock div div.wps-client-component.wps-container h3{
    
    width: 350px;
    
}

div.wp-block-group.subscriptionsblock div div.wps-client-component.wps-container section section div {
    max-width: 400px;
    margin: auto;
}

/* this style is responsible for the page being too wide */
#storefront.page-content-area main#main .gray-bg {
     width: 100vw; /* was 132vw; */
    background:#141414; /* was #141414 */
    padding-left: 15%;/* was 32vw; */
    padding-right: 15%; /* was not there */
    padding-top:1em;
    padding-bottom: 1em;
    position: relative;/* was */
    left: -15%; /* was -32vw*/ 
    position: relative;
}


#storefront.page-content-area main#main .dark_red_bg, #storefront.page-content-area main#main .subscriptionsblock {
    background:#420000;
}


#storefront.page-content-area main#main div.entry-content div div.wp-block-group__inner-container,
.subscriptionsblock .wp-block-group__inner-container {
    margin:auto;
    max-width: 1280px;
    /*position: relative;
    left:1%;*/
    
}
 
#storefront.page-content-area main#main .gray-bg img.wps-product-image {
    max-height: 466.395px;
}
#storefront.page-content-area main#main div.wp-block-buttons {
    margin:5% auto;
}
#storefront.page-content-area main#main h2.new_releases {
    text-transform: uppercase;
    background:#870000;
    padding: 0.25em 2em;
    position: relative;
    margin: 2em 0 -1em;
    display: inline-block;
    z-index: 1;
}
#storefront.page-content-area main#main .dark_red_bg .wps-btn-wrapper, #storefront.page-content-area main#main .subscriptionsblock .wps-btn-wrapper {
    width:50%;
    left:85%;
}

#storefront.page-content-area main#main .wp-block-buttons .wp-block-button {
    text-align: center;
    margin:0;
    padding: 0;
}



#storefront.page-content-area main#main .wp-block-button:first-child {
    width:100%;
}

#storefront.page-content-area main#main .wp-block-button:hover a {
    text-shadow: 5px 5px 10px rgba(60,18,18,1);
    color: #877b69;
}


#storefront.page-content-area main#main .wp-block-button a {
    background: none;
    color: #fff;
    font-size: 2em;
    font-family: 'neue-kabel', 'Neue Kabel', 'Gill Sans', sans-serif;
    font-weight: 700;
    padding: 1em;
    margin: 0;
    position: relative;
    transition: all 1s ease;
}

#storefront.page-content-area main#main h2.lore-subtitle,#storefront.page-content-area main#main h2.lore-title {
    text-align: center;
    
}

#storefront.page-content-area main#main .lore-links {
    background: url(assets/compass.png);
    background-size: 35%;
    background-repeat: no-repeat;
    background-position: 50% 55%;
    margin:8% auto !important; 
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    position: relative;
    max-width: 800px;

}

#storefront.page-content-area main#main .lore-links .wp-block-button.Series {
     width:100%;
    background-image: url(assets/series-hex.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size:17%;
    padding:1em;
    height: 150px;
    margin-bottom:8%;
    position: relative;
  

}

 #storefront.page-content-area main#main .lore-links .wp-block-button.artifacts {
    width:22%;
    background-repeat: no-repeat;
    background-position: 50%;
   position: relative;
    right:-15%;
    background-image: url(assets/artifacts-hex.png);
    height: 150px;
    background-size: 80%;
     margin-bottom: 8%;
     
     
}


#storefront.page-content-area main#main .lore-links div.wp-block-button.characters {
   
    width:22%;
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
    left:-15%;
    position: relative;
     background-image: url(assets/characters-hex.png);
    height: 150px;
    margin-bottom: 8%;
   
    
}

#storefront.page-content-area main#main .lore-links div.wp-block-button.worlds {
    width:100%;
    background-image: url(assets/worlds-hex.png);
    background-repeat: no-repeat;
    background-position: center;
        background-size: 17%;
    padding:1em;
    height: 118px;
    position: relative;  
}


#storefront.page-content-area main#main .lore-links .wp-block-button.Series a {
/*    padding-top:0;*/
    top:-42%;/*0.5em */
        background: none;
    position: relative;
    display: block;
    width: 200px;
    height: 200px;
    background-color: transparent;
    margin: auto;


    
}
#storefront.page-content-area main#main .lore-links .wp-block-button.worlds a {
    /* worlds */
    top:-120%;
    padding-top: 220px;
    background: none;
    position: relative;
     display: block;
    width: 200px;
    height: 240px;
    background-color: transparent;
    margin: auto;
    

}
#storefront.page-content-area main#main .lore-links .wp-block-button.artifacts a {
    /* artifacts */
    top:05%;
    left: 15%;
    background: none;
    position: relative;
    display: block;
    padding: 55px 0px 0px 130px;
    width: 260px;
    height: 200px;
    background-color: transparent;

}
#storefront.page-content-area main#main .lore-links .wp-block-button.characters a {
    /*characters */
    top:5%;
    left:-55%;
    background: none;
    position: relative;
    display: block;
    padding: 55px 150px 0px 0px;
    width: 260px;
    height: 200px;
    background-color: transparent;

}


#storefront.page-content-area main#main .wp-block-button:nth-child(4) {
    width: 100%;
}

#storefront.page-content-area main#main .wp-block-button:first-child a {

    bottom:.5em;
}


#storefront.page-content-area main#main .lore-links .wp-block-button a {
    background: none;
    color: #fff;
    font-size: 1em;
    font-family: 'neue-kabel', 'Neue Kabel', 'Gill Sans', sans-serif;
    font-weight: 700;
    padding: 1em;
    margin: 0;
    position: relative;
    transition: all 1s ease;
    height: 20px;
}




#storefront.page-content-area main#main .wps-client-component .wps-notice-warning {
    visibility: visible;
/*    background: url(assets/out_of_stock.png);*/
    font-family: 'stencil', fantasy;
/*    background-size: cover;*/
    color:#f00;
    border: 3px dashed #f00;
    width: 100%;
    padding: 5%;
    margin: 50% 10%;
    background:rgba(255,235,185,0.75);
}

#storefront.page-content-area main#main div.allproducts .wps-client-component p.wps-notice-warning,  div.footersearch#text-18 .wps-client-component p.wps-notice-warning {
    visibility: visible;
/*    background: url(assets/out_of_stock.png);*/
    font-family: 'stencil', fantasy;
/*    background-size: cover;*/
    color:#f00;
    border: 3px dashed #f00;
    width: 100px;
    padding: 5%;
    margin: 10% 10%;
    background:rgba(255,235,185,0.75);
    position: relative;
    left: -90px;
    top: -70px;
}


#storefront.page-content-area main#main div.allproducts p.wps-notice {
    margin: 10px 0 2em;
    width: 100px;
    padding: 10px 20px;
    text-align: center;
    z-index: 1;
    border-radius: 5px;
    box-sizing: border-box;
    font-size: 18px;
    }

#storefront.page-content-area main#main .all-products .wps-client-component .wps-storefront, div.allproducts .wps-client-component .wps-storefront, div.footersearch#text-18 .wps-client-component .wps-storefront {
    width: 23%;
    display: inline-flex;
    flex-direction: column;
/*    position: relative;*/
/*    top: -4.6em*/
}
#storefront.page-content-area main#main .all-products .wps-client-component .wps-component-sorting, div.allproducts .wps-client-component .wps-component-sorting, div.footersearch#text-18 .wps-client-component .wps-component-sorting {
    display:none;
}
#storefront.page-content-area main#main .all-products .wps-client-component select#wps-sorting::-ms-expand, div.allproducts .wps-client-component select#wps-sorting::-ms-expand, div.footersearch#text-18 .wps-client-component select#wps-sorting::-ms-expand {
    display: none;
}
#storefront.page-content-area main#main .all-products .wps-client-component select#wps-sorting, div.allproducts .wps-client-component select#wps-sorting, div.footersearch#text-18 .wps-client-component select#wps-sorting{
    border: none;
    background: #420000;
    color:#fff;
    font-size:18px;
    font-weight:500;
    font-family:'Montserrat', sans-serif;
    height: 48px;
/*    position: relative;*/
/*    top: -8em;*/
    width: 100%;
    right: 4%;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-image: url(assets/downarrow.png);
    background-repeat: no-repeat, repeat;
    /* arrow icon position (1em from the right, 50% vertical) , then gradient position*/
    background-position: right .85em top 50%, 0 0;
    /* icon size, then gradient */
    background-size: 1em auto, 100%;
    padding-left:6px;
    margin-bottom:10px;
}

#storefront.page-content-area main#main .all-products .wps-client-component .wps-items-wrapper, .allproducts .wps-client-component .wps-items-wrapper, div.footersearch#text-18 .wps-client-component .wps-items-wrapper {
    width: 75%;
    display:inline-block;
}
#storefront.page-content-area main#main .all-products .wps-client-component .wps-storefront .wps-filter-heading, div.allproducts .wps-client-component .wps-storefront .wps-filter-heading, div.footersearch#text-18 .wps-client-component .wps-storefront .wps-filter-heading {
    background:#420000;
}
#storefront.page-content-area main#main .all-products .wps-client-component .wps-storefront .wps-filter-heading span.wps-drawer-icon::before, #storefront.page-content-area main#main .all-products .wps-client-component .wps-storefront .wps-filter-heading span.wps-drawer-icon::after, div.footersearch#text-18  .wps-client-component .wps-storefront .wps-filter-heading span.wps-drawer-icon::after {
    background-color:#fff;
}
#storefront.page-content-area main#main .all-products img.wps-product-image, div.footersearch#text-18  img.wps-product-image {
/*    height: 9vw;*/
    height:300px;
}
#storefront.page-content-area main#main .all-products .wps-buy-button-wrapper, .allproducts .wps-buy-button-wrapper, div.footersearch#text-18 .wps-buy-button-wrapper {
    position:absolute;
    width:10%;
/*    top: 8vw;*/
    top: 60%;
    left: 75%;
}
ul.wps-tags li.wps-tags-single {
    color:#ddd;
    background:#444;
    border-color:#666;
    transition:all .4s ease;
}
ul.wps-tags li.wps-tags-single:hover {
    color:#555;
}

div.subscriptionsblock div.wps-component-products-images img {
/*div.storefront-subscriptions div.wps-component-products-images img {*/

    
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
-webkit-clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

/*--------------------------------------------------------------
 ## page-merch.php
--------------------------------------------------------------*/
.merch div.wp-block-buttons {
    text-align: center;
}
.merch div.wp-block-buttons div.wp-block-button.hex-button {
    width:auto !important;
    background-image: url(assets/white-hex-outline.png);
    background-repeat: no-repeat;
    background-size: contain;
    margin: 0 2% !important;
}
.merch div.wp-block-buttons div.wp-block-button.hex-button a {
    bottom: 0!important;
    padding-left:2.5em!important;
    color:#870000!important;
    text-transform: uppercase;
}
#storefront.page-content-area main#main.merch .wps-buy-button-wrapper {
    top:62%
}
.merch div.wp-block-group.hex-shapes div.wp-block-group__inner-container div.wps-client-component.wps-container section.wps-items-wrapper section.wps-items.wps-items-list div.wps-w-4.wps-item.p-3 div.wps-component.wps-component-products-images div.wps-gallery-featured-wrapper div.wps-product-image-wrapper a.wps-products-link {
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    -webkit-clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    /*forced hexes*/
    width: 16.32vw;
    max-width: 270.9px;
    height: 14.26vw;
    max-height: 238px;
}
.merch div.wp-block-group.hex-shapes div.wp-block-group__inner-container div.wps-client-component.wps-container section.wps-items-wrapper section.wps-items.wps-items-list div.wps-w-4.wps-item.p-3 div.wps-component.wps-component-products-images div.wps-gallery-featured-wrapper div.wps-product-image-wrapper a.wps-products-link img.wps-product-image {
/*
    height: 238px!important;
    width: 275px!important;
*/
    object-fit: cover!important;
    /*forced hexes*/
    width: 16.32vw!important;
    max-width: 270.9px!important;
    height: 14.26vw!important;
    max-height: 238px!important;
}
.merch div.wp-block-group.hex-shapes div.wp-block-group__inner-container {
    position: relative;
}
.merch div.wp-block-group.hex-shapes div.wp-block-group__inner-container div.wps-client-component.wps-container section.wps-items-wrapper section.wps-items.wps-items-list div.wps-w-4.wps-item.p-3:nth-child(even) {
    margin:10% -2% 0;
}
#storefront.page-content-area main#main.merch div.hex-shapes .wps-buy-button-wrapper {
    top:calc(238px + 4em)!important;
    /*see @media rule below */
}

#storefront.page-content-area main#main.merch div.wp-block-group.hex-shapes div.wp-block-group__inner-container div.wp-block-buttons
{
    width:auto;
    position: absolute;
    top:34%;
/*    left:64%;*/
/*    right:-18%*/
    right:0; /*changing to 0 9/8/2020 was too far away after adding max widths for pics above*/
}
#storefront.page-content-area main#main.merch div.wp-block-group.hex-shapes div.wp-block-group__inner-container div.wp-block-buttons div.wp-block-button.view-all-button
{
    background-color:#870000;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%);
    width:130px;
    height:114px;
    font-size: 0.65em;
}
#storefront.page-content-area main#main.merch div.wp-block-group div div.wp-block-buttons div.view-more-button {
     top: calc(-135.45px - 9em);
    /*see @media rule below */
}
@media only screen and (max-width: 1669px) {
    #storefront.page-content-area main#main.merch div.hex-shapes .wps-buy-button-wrapper {
    top:calc(14.26vw + 4em)!important;
    }
    #storefront.page-content-area main#main.merch div.wp-block-group div div.wp-block-buttons div.view-more-button {
     top: calc(-13.25vw - 4em);
    }
}
/*--------------------------------------------------------------
    ##  reuseable element styles
--------------------------------------------------------------*/
.preview-block .imagehexagon img {
    
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
-webkit-clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    object-fit: contain;
}


div.search-container form div.wps-search-input-wrapper input#wps-search-input {
    
    margin: 0;
}



#storefront.page-content-area main#main div.wp-block-group.subscriptionsblock div div.wp-block-buttons
{
    position: relative;
    width:100%;
    height:1px;
    margin: 0 auto 0 auto;
    text-align: center;
}



#storefront.page-content-area main#main div.wp-block-group.subscriptionsblock div div.wp-block-buttons div {
    position: absolute;
    background-position: top center;
    background-image: url(assets/big-red-triangle.png);
     background-repeat: no-repeat;
   /**/ top:-250px;
    left:50%;
    margin-left: -90px;
    padding-left:0;
        padding-top:2%;
    height: 128px;
    width: 150px;
    z-index: 400;
    text-align: center;
}

#storefront.page-content-area main#main div.wp-block-group.subscriptionsblock div div.wp-block-buttons div a {
    position: relative;
    font-size: .9em;
    width:100px;
    height: 100px;
    display: block;
    margin:50px auto 0 auto;
    padding: 0;
    z-index: 0;
    
}


#storefront.page-content-area main#main div.wp-block-group.subscriptionsblock .wps-buy-button-wrapper {
    position:absolute;
    bottom:8em;
    right:30%;
}
#storefront.page-content-area main#main div.wp-block-group.subscriptionsblock .wps-buy-button-wrapper div.wps-component button {
    padding: 23% 0;
    width:30px;
    height:30px;
    z-index: 1;
}

#storefront.page-content-area main#main div.wp-block-group.subscriptionsblock img.wps-product-image {
    
width:350px;
height: 300px;
    max-width: 350px;
    max-height: 300px;
    object-fit: cover;
}


/*--------------------------------------------------------------
 ## page-lore.php
--------------------------------------------------------------*/
#lorePage {
    margin:0;
}
div#lorePage.page-content-area main#main.site-main  div.post-thumbnail {
    display: none;
}

#lorePage #background-div-container {
    position: relative;
    
}

#lorePage #background-div {
    background-size: 100%;
    opacity: 1;
    background-repeat: no-repeat;
    position: absolute;
    height: 1100px;
    top:900px;
    
}
#lorePage.page-content-area main#main {
    margin:0 auto;
}
#lorePage.page-content-area main#main div.featuredChar {
    width:100%;
    max-width: 860px;
    background: rgba(0,0,0,.5);
    color:#fff;
    margin: 10% auto;
    padding:2em 5em;
}
#lorePage.page-content-area main#main div.featuredChar h2.featuredCharHeading {
    text-transform: uppercase;
    font-size:2em;
    background:#870000;
    padding: 0.25em 1em;
    margin: 0;
    display: inline-block;
    z-index: 1;
    color: #fff;
    font-family: 'neue-kabel', sans-serif;
    position: relative;
    left:-4em;
    top:-2em;
}
#lorePage.page-content-area main#main div#loreContent {
    display:none;
}

#lorePage.page-content-area header.entry-header h1 {
    font-family: 'neue-kabel', sans-serif;
    font-size:3em;
    text-transform: uppercase;
    text-align: center;
    display: none;
}
#lorePage.page-content-area main#main div#sectionWrapper {
    background: #000;
    padding:5%;
    width:100%;
}
#lorePage.page-content-area main#main div#sectionWrapper h2 {
    text-transform: uppercase;
    font-size:2em;
    background:#870000;
    padding: 0.25em 1em;
    margin: 0 0 1em -2.5em;
    display: inline-block;
    z-index: 1;
    color: #fff;
    font-family: 'neue-kabel', sans-serif;
}
#lorePage.page-content-area main#main div#sectionWrapper div#loreContent p {
    width:65%;
    margin-bottom: 6em;
}
#lorePage.page-content-area main#main div#sectionWrapper div#loreContent div.featuredCharacters figure {
    -webkit-clip-path: polygon(0 50%, 25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%);
    clip-path: polygon(0 50%, 25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%);
    margin:0 -20%;
    position: relative;
}
#lorePage.page-content-area main#main div#sectionWrapper div#loreContent div.featuredCharacters .wp-block-column:nth-child(even) figure {
    margin:65% -20% 0;
}
#lorePage.page-content-area main#main div#sectionWrapper div#loreContent div.featuredCharacters figure figcaption {
    position: absolute;
    bottom:0;
    padding:25% 0;
    margin:0;
    width:100%;
    background: -moz-linear-gradient(top, rgba(113,0,0,0) 0%, rgba(113,0,0,1) 100%);
    background: -webkit-linear-gradient(top, rgba(113,0,0,0) 0%,rgba(113,0,0,1) 100%); 
    background: linear-gradient(to bottom, rgba(113,0,0,0) 0%,rgba(113,0,0,1) 100%);
    z-index: 2;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    color:#fff;
    text-transform: uppercase;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow:ellipsis;
    
}
#lorePage.page-content-area main#main div#sectionWrapper section {
    width:80%;
    max-width:1280px;
    margin:2em auto;
}
#lorePage.page-content-area main#main div#sectionWrapper section#series {
    max-width: none;
    width:100vw;
    background:#141414;
    margin:3em 5vw 3em -5vw;
    padding:1em 0;
}
#lorePage.page-content-area main#main div#sectionWrapper section#series div {
    width:80%;
    max-width:1280px;
    margin:0 auto;
    position: relative;
}
#lorePage.page-content-area main#main div#sectionWrapper section#series div h2 {
    margin: -1em 100% 1em -2.5em;
    position: relative;
    top:-.5em;
}
#lorePage.page-content-area main#main div#sectionWrapper section#series div a.hex {
    display: inline-block;
    width:24%;
    padding:10.387% 0;
    background-size:cover;
    -webkit-clip-path: polygon(0 50%, 25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%);
    clip-path: polygon(0 50%, 25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%);
    margin:.1% -5.85%;
    position: relative;
    cursor:pointer;
    transition: all 3s ease;
    background-color:blue;
}
#lorePage.page-content-area main#main div#sectionWrapper section#series div a.hex:hover {
    transition: all 4s ease;
    opacity: .8;
}
#lorePage.page-content-area main#main div#sectionWrapper section#series div a.hex:nth-child(even) {
  margin:0 0 10.75%;
}

#lorePage.page-content-area main#main div#sectionWrapper section#series div a.hex p {
    font-family: 'Montserrat', sans-serif !important;
    text-transform: uppercase;
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    margin: 0 auto;
    background: -moz-linear-gradient(top, rgba(113,0,0,0) 0%, rgba(113,0,0,1) 100%);
    background: -webkit-linear-gradient(top, rgba(113,0,0,0) 0%,rgba(113,0,0,1) 100%); 
    background: linear-gradient(to bottom, rgba(113,0,0,0) 0%,rgba(113,0,0,1) 100%);
    padding: 25% 0;
    transition: all 1s ease;
    color:#fff;
    background-size: contain;
}
#lorePage.page-content-area main#main div#sectionWrapper section#series a#viewAllWrap {
    background:#870000;
    position: absolute;
    top:46.75%;
    left:93.53125%;
    padding: 4.75% 0;
    height: 0;
    width:11%;
    -webkit-clip-path: polygon(50% 0, 100% 100%, 0 100%);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    text-align: center;
    font-family:'neue-kabel', 'Neue Kabel', sans-serif;
    font-size: 1.2em;
    font-weight: 600;
    color:#fff;
    text-decoration: none;
}
#lorePage.page-content-area main#main div#sectionWrapper section a.wrapper {
    display: flex;
    flex-direction: row-reverse;
    text-align: right;
    flex-wrap: nowrap;
    align-items: center;
    color: #fff;
    margin:2% 0 2% -5%;
    text-decoration: none;
}
#lorePage.page-content-area main#main div#sectionWrapper section a.wrapper:nth-child(even) {
    flex-direction: row;
    text-align: left;
}
#lorePage.page-content-area main#main div#sectionWrapper section .pageImage {
    width:39%;
    padding:17% 0;
    -webkit-clip-path: polygon(0 50%, 25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%);
    clip-path: polygon(0 50%, 25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%);
    background-size: cover;
    transition: all 1s ease;
}
#lorePage.page-content-area main#main div#sectionWrapper section a.wrapper:hover .pageImage {
    width:42%;
    padding:18.186% 0;
    margin:-1.186% -1.5%;
    opacity: .8;
}
#lorePage.page-content-area main#main div#sectionWrapper section .pageTexts {
    width:40%;
    color:#ddd;
    margin:0 3%;
    text-align: left;
}
#lorePage.page-content-area main#main div#sectionWrapper section h2.pageTitle {
    font-size:1.5em;
    background:none;
    padding: 0;
    margin: .5em 0;
}
#lorePage.page-content-area main#main div#sectionWrapper section a#viewAllWrap {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    text-decoration: none;
    transition: all 1s ease;
}
#lorePage.page-content-area main#main div#sectionWrapper section a#viewAllWrap:hover {
    opacity: .75;
}
#lorePage.page-content-area main#main div#sectionWrapper section a#viewAllWrap:hover .triangle {
    opacity: .5;
}
#lorePage.page-content-area main#main div#sectionWrapper section a#viewAllWrap .triangle {
    -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    background: #440000;
    width:6%;
    padding:2.6% 0;
    
    transition: all 1s ease;
}
#lorePage.page-content-area main#main div#sectionWrapper section a#viewAllWrap .hex {
    width:13%;
    padding:4% 0 7.32%;
    height: 0;
    -webkit-clip-path: polygon(0 50%, 25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%);
    clip-path: polygon(0 50%, 25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%);
    background: #870000;
    margin: 0 -2.6% 0 -2.45%;
    text-align: center;
    font-family:'neue-kabel','Neue Kabel', sans-serif;
    font-size: 1.5em;
    font-weight: 600;
    color:#fff;
    text-decoration: none!important;
}
/*--------------------------------------------------------------
 ## page_characters.php page_worlds.php page_artifacts.php children of page_lore.php
--------------------------------------------------------------*/
#loreChild.page-content-area main#main {
    width:90%;
    max-width: 1280px;
    margin:0 auto;
    background: #000;
    padding:5%;    
}
#loreChild.page-content-area main#main header h1 {
    text-transform: uppercase;
    background:#870000;
    padding: 0.25em 2em;
    position: relative;
    margin: 1em 0 -2em;
    display: inline-block;
    z-index: 1;
    color: #fff;
    font-family:'neue-kabel','Neue Kabel', sans-serif;
    
}
#loreChild.page-content-area #background-div {
    opacity: 0;
}
#loreChild.page-content-area main#main #hexContainer { 
    margin: 10% -13% 10% 0;
}
#loreChild.page-content-area main#main #hexContainer a.hex {
    display: inline-block;
    width:24.375%;
    padding:10.55% 0;
    background-size: 100%;
    background-position: center;
    -webkit-clip-path: polygon(0 50%, 25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%);
    clip-path: polygon(0 50%, 25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%);
    margin:.1% -5.85%;
    position: relative;
    cursor:pointer;
    transition: all 3s ease;
    background-color:#6E1101
}
#loreChild.page-content-area main#main #hexContainer a.hex:nth-child(2n){background-color:#5C1010}
#loreChild.page-content-area main#main #hexContainer a.hex:nth-child(3n){background-color:#6F0000}
#loreChild.page-content-area main#main #hexContainer a.hex:nth-child(4n){background-color:#560D0D}
#loreChild.page-content-area main#main #hexContainer a.hex:nth-child(5n){background-color:#C30101}
#loreChild.page-content-area main#main #hexContainer a.hex:hover {
    transition: all 4s ease;
    background-size: 125%;
}

#loreChild.page-content-area main#main #hexContainer .hex:nth-child(10n + 2),
#loreChild.page-content-area main#main #hexContainer .hex:nth-child(10n + 4), 
#loreChild.page-content-area main#main #hexContainer .hex:nth-child(10n + 7),
#loreChild.page-content-area main#main #hexContainer .hex:nth-child(10n + 9) {
  margin:0 0 -10.75%;
}

#loreChild.page-content-area main#main #hexContainer .hex h2 {
    position: absolute;
    top: 101%;
    width: 100%;
    text-align: center;
    margin: 0 auto;
    background: rgba(113,0,0, .65);
    padding: 0;
    transition: all 1s ease;
    color:#fff;
    font-family:'neue-kabel','Neue Kabel', sans-serif;
    background-size: contain;
    
}
#loreChild.page-content-area main#main #hexContainer .hex:hover h2 {
    padding: calc(50% - 1.5em) 0;
    top:0;
    
}
/*--------------------------------------------------------------
 ## lore-custom-template.php
--------------------------------------------------------------*/
div#lore #background-div {
    background-size: 100%;
    opacity: 1;
    background-repeat: no-repeat;
}
div#lore div.post-thumbnail img{
    display: none;
}

div#lore main#main h1 {
    
    display: none;
    
}

div#lore main#main {
    width:100%;
    max-width: 860px;
    background: transparent);
    color:#fff;
    margin: 10% auto;
    padding:2em 5em;
    display: flex;
    align-items: center;
    position: relative;
}

div#lore main#main div.topgroup h2 {
    
    font-size: 2em;
    margin: 0.67em 0
}

div#lore main#main div.topgroup {
    width:100%;
    max-width: 860px;
    background: rgba(0,0,0,.5);
    color:#fff;
    margin: 0 auto;
    padding:0;
    display: flex;
    align-items: center;
    position: relative;
}


div#lore main#main .relatedProducts {
    
    margin-top: 30px;
}

div#lore main.hasSelfie#main {
    padding:2em 5em 2em 10em;
}
div#lore main#main div#characterSelfie {
    width:50%;
    padding-top:75%;
    background-size: cover;
    position: absolute;
    left:calc(-51% + 10em);
}
div#lore div#restOfPage {
    background:#000;
    width:100vw;
    padding: 3em 0;
}
div#lore div#restOfPage section {
    width:80%;
    max-width: 1080px;
    margin:3em auto;
}
div#lore div#restOfPage section#productsTagged section,div#lore div#restOfPage section#merchCollection section {
    width:100%;
}

div#lore div#restOfPage section#inTheNews .newsPost {
    display: flex; 
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding:0 0 4% 0;
}
div#lore div#restOfPage section#inTheNews .newsPost:after {
    content: ""; 
    display: block; 
    margin: 0 0 0 25%;
    width: 70%; 
    padding:4% 0 0 0 ;
    border-bottom: 1px solid #555;
}
div#lore div#restOfPage section#inTheNews .newsPost:nth-child(4):after {
    border:none;
}

div#lore div#restOfPage section#inTheNews .newsPost .newsThumb {
    background-size: auto 100%;
    background-position: center;
    display: inline-flex;
    -webkit-clip-path: polygon(0 25%, 50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%);
    clip-path: polygon(0 25%, 50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%);
    width:35%;
    padding: 20.20% 0;
    cursor: pointer;
    -webkit-transition:background-size 1.5s;
    -o-transition:background-size 1.5s;
    -moz-transition:background-size 1.5s;
    transition:background-size 1.5s;
}
div#lore div#restOfPage section#inTheNews .newsPost .newsThumb:hover {
    background-size:auto 140%;
    -webkit-transition:background-size 2s;
    -o-transition:background-size 2s;
    -moz-transition:background-size 2s;
    transition:background-size 2s;
}
div#lore div#restOfPage section#inTheNews .newsPost .newsText {
    width:60%;
}
div#lore div#restOfPage section#inTheNews .newsPost .newsText h2 {
    margin:0;
    text-decoration: none;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-weight:400;
    font-size:1.5em;
}
div#lore div#restOfPage section#inTheNews .newsPost .newsText h2 a {
    text-decoration: none;
    font-size: 1.25em;
    color:#fff;
}
div#lore div#restOfPage section#inTheNews .newsPost .newsText .post-meta {
    color:#999;
    font-size: .8em;
    margin: 0;
    height: 1.3em;
    margin-bottom:-.3em;
    width:90%;
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
div#lore div#restOfPage section#inTheNews .newsPost .newsText .post-meta a {
    text-decoration: none;
    color:#999;
    text-transform: uppercase;
    margin-right:.4em;
}
div#lore div#restOfPage section#inTheNews .newsPost .newsText .post-meta a:hover {
    text-decoration: underline;
    color:#c80e18;
    transition: color .2s ease-in;
}
div#lore div#restOfPage section#inTheNews .newsPost .newsText .post-excerpt  {
    color:#aaa;
    padding:0;
}

div#lore div#restOfPage section#inTheNews #newsMorePosts {
    width:100%;
    background: #210101;
    box-shadow: 0 15px 25px rgba(255,255,255,.04);
    height:1.75em;
    padding:0 44.5%;

}
div#lore div#restOfPage section#inTheNews #newsMorePosts .morePostsTriangle {
    display: inline-flex;
    background: #c80e18;
    align-items: center;
    justify-content: center;
    width:100%;
    padding: 27% 12% 58%;
    margin:0 auto;
    -webkit-clip-path: polygon(0 0, 50% 100%, 100% 0);
    clip-path: polygon(0 0, 50% 100%, 100% 0);
    cursor:pointer;
    height: 0;
    text-decoration: none;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 1em;
    line-height: 1.2em;
    font-weight: 500;
}
div#lore div#restOfPage section#inTheNews #newsMorePosts .morePostsTriangle a{
    padding: 0 3em;/*changed*/
}
div#lore div#restOfPage section#productsTagged .wps-container {
    margin: 8% 0;
}
div#lore div#restOfPage section#productsTagged .wps-container h2.wps-products-title, div#lore div#restOfPage section#productsTagged .wps-container h3.wps-products-price {
    font-size:1em;
    text-align: center;
    color:#fff;
    font-family: 'Montserrat', sans-serif;
    font-style: italic;
    font-weight: 400;
    height: 1.5em;
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
div#lore div#restOfPage section#productsTagged .wps-container .wps-pagination-controls button {
    width:33%;
    background: #870000;
    border-radius:0;
    color:#fff;
    font-family:'neue-kabel','Neue Kabel', sans-serif;
    text-transform: uppercase;
    font-size:1.5em;
    box-shadow: 0 15px 25px rgba(128,128,128,.2);
}
div#lore div#restOfPage section#productsTagged .wps-container .wps-notice-warning {
    visibility: visible;
    font-family: 'stencil', fantasy;
    color:#f00;
    border: 3px dashed #f00;
    width: 350%;
    padding: 5%;
    margin: -100% -200%;
    background:rgba(255,235,185,0.75);
}
div#lore div#restOfPage section#productsTagged .wps-container .wps-buy-button-wrapper {
    position:absolute;
    width:10%;
/*    top: 12vw;*/
    top: 65%;
    left: 75%;
}
div#lore div#restOfPage section#productsTagged .wps-container .wps-buy-button-wrapper div.wps-component button {
    padding: 50% 0;
}
div#lore div#restOfPage section#productsTagged .wps-container .wps-buy-button-wrapper .wps-btn {
    padding: 0 1em;
}
div#lore div#restOfPage section#productsTagged .wps-container .wps-buy-button-wrapper .wps-add-to-cart::after {
    top: calc(50% - 10px);
    right: calc(50% - 10px);
}
div#lore div#restOfPage section#productsTagged .wps-container img.wps-product-image {
    height: 400px;
    width:100%;
    /* object-fit: cover; */
    object-fit: contain;
}
div#lore div#restOfPage section#merchCollection .wps-container .wps-item:nth-child(even) {
    margin:12% 0 -12%;
}
div#lore div#restOfPage section#merchCollection .wps-container .wps-item .wps-component-products-images {
    width:150%;
    height: 86%;
    padding:0;
    margin:0;
    -webkit-clip-path: polygon(0 50%, 25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%);
    clip-path: polygon(0 50%, 25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%);
    position:relative;
    cursor: pointer;
    z-index: -2;
}
div#lore div#restOfPage section#merchCollection .wps-container .wps-item .wps-component-products-title {
    position:absolute;
    top:calc(86% - 5em);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    margin:0;
    text-decoration: none;
    width: 126%;
    padding: 0% 31%;
    z-index: 0;
}
div#lore div#restOfPage section#merchCollection .wps-container .wps-item .wps-component-products-title  h2, div#lore div#restOfPage section#merchCollection .wps-container .wps-item h3 {
    font-size:1em;
    font-weight: 400;
    text-align: center;
}
div#lore div#restOfPage section#merchCollection .wps-container .wps-item h3 {
    position:absolute;
    top:44%;
    padding: 43% 31% 0;
    margin:0;
    text-decoration: none;
    width: 126%;
    background: -moz-linear-gradient(top, rgba(113,0,0,0) 0%, rgba(113,0,0,1) 100%);
    background: -webkit-linear-gradient(top, rgba(113,0,0,0) 0%,rgba(113,0,0,1) 100%); 
    background: linear-gradient(to bottom, rgba(113,0,0,0) 0%,rgba(113,0,0,1) 100%);
    z-index: -1;
    -webkit-clip-path: polygon(0 0, 100% 0, 75% 100%, 25% 100%);
    clip-path: polygon(0 0, 100% 0, 75% 100%, 25% 100%);
}
div#lore div#restOfPage section#merchCollection a#seeMore {
    display: block;
    background: #870000;
    width: 11.7%;
    padding: 5.47% 0 2.5%;
    text-align: center;
    margin: -15% 0 0;
    position: relative;
    left: 96.75%;
    -webkit-clip-path: polygon(50% 0, 100% 100%, 0 100%);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    color:#fff;
    font-family:'neue-kabel','Neue Kabel', sans-serif;
    font-weight: 500;
    text-decoration: none;
}
div#lore div#restOfPage section#merchCollection a#seeMore:hover {
    opacity: .8;
}

/*--------------------------------------------------------------
 ## series-custom-template.php
--------------------------------------------------------------*/

div#lore div#restOfPage section#relatedCharacters #hexContainer, div#lore div#restOfPage section#relatedArtifacts #hexContainer, div#lore div#restOfPage section#relatedWorlds #hexContainer { 
    margin: 2% -13% 17% 0; /* was 10 -13 10 0*/
}
div#lore div#restOfPage section#relatedCharacters #hexContainer a.hex, div#lore div#restOfPage section#relatedArtifacts #hexContainer a.hex, div#lore div#restOfPage section#relatedWorlds #hexContainer a.hex {
    display: inline-block;
    width:24.375%;
    padding:10.55% 0;
    background-size: 117%;
    background-position:center;
    -webkit-clip-path: polygon(0 50%, 25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%);
    clip-path: polygon(0 50%, 25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%);
    margin:.1% -5.85%;
    position: relative;
    cursor:pointer;
    transition: all 3s ease;
}
div#lore div#restOfPage section#relatedCharacters #hexContainer a.hex:hover, div#lore div#restOfPage section#relatedArtifacts #hexContainer a.hex:hover, div#lore div#restOfPage section#relatedWorlds #hexContainer a.hex:hover  {
    transition: all 4s ease;
    background-size: 145%;
}
div#lore div#restOfPage section#relatedCharacters #hexContainer a.hex:nth-child(even), div#lore div#restOfPage section#relatedArtifacts #hexContainer a.hex:nth-child(even), div#lore div#restOfPage section#relatedWorlds #hexContainer a.hex:nth-child(even) {
    margin:0 0 -10.75%;
}

div#lore div#restOfPage section#relatedCharacters #hexContainer .hex h2, div#lore div#restOfPage section#relatedWorlds #hexContainer .hex h2, div#lore div#restOfPage section#relatedArtifacts #hexContainer .hex h2 {
    position: absolute;
    top: 101%;
    width: 100%;
    text-align: center;
    margin: 0 auto;
    background: rgba(113,0,0, .65);
    padding: 0;
    transition: all 1s ease;
    color:#fff;
    font-family:'neue-kabel','Neue Kabel', sans-serif;
    background-size: contain;
}
div#lore div#restOfPage section#relatedCharacters #hexContainer .hex:hover h2, div#lore div#restOfPage section#relatedArtifacts #hexContainer .hex:hover h2, div#lore div#restOfPage section#relatedWorlds #hexContainer .hex:hover h2{
    padding: calc(50% - 1.5em) 0;
    top:0;
}

/*--------------------------------------------------------------
 ## wps-templates/collections-single.php
--------------------------------------------------------------*/
main#collectionsSinglePage section.wps-container {
    width:100%;
    max-width: none;
    margin: 5em 0;
    padding: 0;
}
main#collectionsSinglePage section.wps-container div.wps-collection-single.row div.wps-collection-single-content.col > div {
    width:80%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.2em;
}

main#collectionsSinglePage section.wps-container div.wps-collection-single.row div.wps-collection-single-content.col > div#hmOriginals, main#collectionsSinglePage section.wps-container div.wps-collection-single.row div.wps-collection-single-content.col > div#featBooksMonth {
    width:70%;
}

main#collectionsSinglePage section.wps-container div.wps-collection-single.row div.wps-collection-single-content.col div#hero_slider{
    width:100%;
    background: #333;
    position: relative;
    height: calc(45px + 5em + 31.649vw);
    max-height: calc(511px + 5em);
    overflow: hidden;
    max-width: none;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    z-index: 1; /* was -1 */
}
main#collectionsSinglePage section.wps-container div.wps-collection-single.row div.wps-collection-single-content.col div#hero_slider > div{
    position: relative;
    top:0%;
    transition: all 1s ease;
}

main#collectionsSinglePage div#collection_title {
    position: relative;
    z-index: 2;
}

main#collectionsSinglePage div#collection_title h2, #collection_title2 div h2
{
    text-transform: uppercase;
    font-size:2em;
    background:#870000;
    padding: 0.25em 1em;
    margin: 0 0 -1em -2.5em;
    display: inline-block;
    position: relative;
    z-index: 2;
    color: #fff;
    font-family:'neue-kabel','Neue Kabel', sans-serif;
}

#collection_title2 div h2 {
    
    margin-bottom: 50px;
}


main#collectionsSinglePage section.wps-container h2.wps-products-title, main#collectionsSinglePage section.wps-container h3.wps-products-price {
    font-size:1em;
    text-align: center;
    color:#fff;
    font-family: 'Montserrat', sans-serif;
    font-style: italic;
    font-weight: 400;
    height: 1.5em;
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
main#collectionsSinglePage section.wps-container div#hero_slider img.wps-product-image {
    height:31.649vw;
    max-height: 466.395px;
    width:100%;
    /* object-fit: cover; */
    object-fit: contain;
}
div.wps-component.wps-component-products-images > div > div > a {
    z-index: 1;
    
}

main#collectionsSinglePage section.wps-container .wps-buy-button-wrapper {
    position:absolute;
    width:10%;
    top: 70%;
    left: 75%;
    z-index:1;
}

main#collectionsSinglePage section.wps-container div#hmOriginals .wps-buy-button-wrapper, main#collectionsSinglePage section.wps-container div#featBooksMonth .wps-buy-button-wrapper {
    position:absolute;
    width:15%;
    top: 55%;
    left: 65%;
    z-index:1;
}

main#collectionsSinglePage section.wps-container .wps-buy-button-wrapper div.wps-component button {
    padding: 50% 0;
}
main#collectionsSinglePage section.wps-container .wps-buy-button-wrapper .wps-btn {
    padding: 0 1em;
}
main#collectionsSinglePage section.wps-container .wps-buy-button-wrapper .wps-add-to-cart::after {
    top: calc(50% - 10px);
    right: calc(50% - 10px);
}


.wpshopify .wps-products-link {
    z-index: 3333;
    position: relative;
}


/*--------------------------------------------------------------
 ## wps-templates/collections-all.php
--------------------------------------------------------------*/
section#collectionsAll.wps-container {
    margin: 8em auto;
    
}
section#collectionsAll.wps-container section.wps-items-wrapper {
    margin-left:1.65%;
    
}
section#collectionsAll.wps-container section.wps-items-wrapper section.wps-items-list {
    margin-bottom: 13%;
}
section#collectionsAll.wps-container section.wps-items > div{
    width:24.375%;
    padding:10.55% 0 !important;
    height: 0;
    background-color: #801100;
    position: relative;
    -webkit-clip-path: polygon(0 50%, 25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%);
    clip-path: polygon(0 50%, 25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%);
    margin: .5% -3%;
}
section#collectionsAll.wps-container section.wps-items > div:nth-child(10n+2), section#collectionsAll.wps-container section.wps-items > div:nth-child(10n+4), section#collectionsAll.wps-container section.wps-items > div:nth-child(10n+7), section#collectionsAll.wps-container section.wps-items > div:nth-child(10n+9) {
    margin: 11.5% -2% -11%;
}
section#collectionsAll.wps-container section.wps-items div.wps-collections-description {
    display: none;
}
section#collectionsAll.wps-container section.wps-items div.wps-component-collection-image {
    position: absolute;
    top: 0;
    z-index: -5;
    opacity: 0.5;
}
section#collectionsAll.wps-container section.wps-items > div:nth-child(4n+2){background-color:#C21B00}
section#collectionsAll.wps-container section.wps-items > div:nth-child(4n+3){background-color:#991400}
section#collectionsAll.wps-container section.wps-items > div:nth-child(4n){background-color:#A61600}
section#collectionsAll.wps-container section.wps-items > div:nth-child(6n){background-color:#590C00}

section#collectionsAll.wps-container section.wps-items h2.wps-collection-title {
    text-align: center;
/*    margin: -.75em 0;*/
    padding: 0 15%;
    display: flex;
    position:absolute;
    top:0;
    justify-content: center;
    align-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
}
/*--------------------------------------------------------------
 ## wps-templates/product-single
--------------------------------------------------------------*/
div#productSingleWrap {
    display: flex;
    flex-direction: row-reverse;
    width: 90%;
    max-width: 1440px;
    margin: 5em auto;
}


div#topProductSlider, div#bottomslider {
    
    width: 90%;
    max-width: 1440px;
    margin: 5em auto;
    padding: .3em;
    height: auto;
}

div#bottomslider {
    
    padding-top: 5%;
}


div#productSingleWrap aside {
    position: relative;
    margin: 7em 0% 0 0%;
    width:30%;
    min-width: 250px;
    /* was margin: 7em 6% 0 -6%;
    width:70%; */
    
}
div#productSingleWrap aside div#currentIssue{
    margin: 0 20% 0 0%; /* was 0 20% 0 -20% */
    
}
div#productSingleWrap aside div#backgroundRibbon {
    position: absolute;
    width: 80%;
    height: 300vh;
    z-index: -99;
    top:-20vh;
    background: #151515;
}
div#productSingleWrap aside h2#h2CurrentIssue, div#productSingleWrap aside h2#h2MustHave {
    text-transform: uppercase;
    font-size:1.5em;
    background:#870000;
    padding: 0.25em 1em;
    margin: -0.25em -1em .8em;
    display: inline-block;
    z-index: 1;
    color: #fff;
    font-family:'neue-kabel','Neue Kabel', sans-serif;
}



div#productSingleWrap aside div#currentIssue div, div#productSingleWrap aside div#currentIssue section {
    margin:0;
    padding:0;
}
div#productSingleWrap aside div#currentIssue div.wps-item {
    display: flex;
    flex-direction: row;
}
div#productSingleWrap aside div#currentIssue div.wps-product-image-wrapper a{
    width:100%;
    height: 0;
    padding:43% 0;
    -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    position: relative;
    flex-grow: 2;
    display: block;
}

div#productSingleWrap aside h2#h2MustHave.blue {
    background-color:#387e70;
    margin-top: 4em;
}

div#productSingleWrap aside div#currentIssue div.wps-product-image-wrapper a img{
    position: absolute;
    top:-15%;
    opacity: 1;
    
}
div#productSingleWrap aside div#currentIssue div.wps-gallery-featured-wrapper  {
    filter: drop-shadow(0px 1.5em 0px rgba(136, 0, 0, 0.5));
}
div#productSingleWrap aside div#currentIssue.blue div.wps-gallery-featured-wrapper {
    filter: drop-shadow(0px 1.5em 0px rgba(51, 153, 102, 0.5));
}

div#productSingleWrap aside div#currentIssue div.wps-component-products-title {
    margin: 22% -32% 5em -10%;
    z-index: 5;
    width:90%;
}
div#productSingleWrap aside div#currentIssue div.wps-component-products-title h2 {
    color:#fff;
    font-size:.8em;
    font-weight: 400;
    font-family: 'Montserrat', sans-serif;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    height: 2.8em;
    overflow: hidden;
    text-align: left;
    width:50%; /* jay added */
}
div#productSingleWrap section#productSingle div.wps-product-single-content { 
    margin:2em 1em;
}

div#productSingleWrap section#productSingle {
    
    width:90%;
}
#productSingle div.wps-product-single.row div.wps-product-single-gallery.col{
    max-width: 420px;
}

div#productSingleWrap section#productSingle div#product_title h2 {
    
    font-size:1.8em;
    font-weight: 300;
    background:#870000;
    padding: 0.25em 1em;
    margin: -0.25em -1em .8em;
    display: inline-block;
    z-index: 1;
    color: #fff;
    font-family:'neue-kabel','Neue Kabel', sans-serif;
}
div#productSingleWrap section#productSingle div#product_pricing h3 {
    text-transform: uppercase;
    font-size:1.8em;
    color: #fff;
    font-family:'neue-kabel','Neue Kabel', sans-serif;
}
div#productSingleWrap section#productSingle div#product_description p {
    color:#aaa;
}
/* Chrome, Safari, Edge, Opera */
input.wps-product-quantity::-webkit-outer-spin-button,
input.wps-product-quantity::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Firefox */
input.wps-product-quantity[type=number] {
  -moz-appearance: textfield;
}
div#productSingleWrap section#productSingle div#product_buy_button div.wps-buy-button-wrapper {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    margin-top:2em;
}
div#productSingleWrap section#productSingle div#product_buy_button div.wps-buy-button-wrapper div.wps-product-quantity-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

div#productSingleWrap section#productSingle div#product_buy_button div.wps-buy-button-wrapper div.wps-product-quantity-wrapper input.wps-product-quantity {
    color:#fff;
    background: -moz-linear-gradient(90deg, rgba(75,75,75,1) 0%, rgba(0,0,0,0) 100%);
    background: -webkit-linear-gradient(90deg, rgba(75,75,75,1) 0%, rgba(0,0,0,0) 100%);
    background: linear-gradient(0deg, rgba(75,75,75,1) 0%, rgba(0,0,0,0) 100%); 
    border: 1px solid rgba(75,75,75,.2);
    font-size:1.8em;
    font-weight: 500;
    font-family:'neue-kabel','Neue Kabel', sans-serif;
    margin: 0 auto;
}
div#productSingleWrap section#productSingle div#product_buy_button div.wps-buy-button-wrapper div.wps-product-quantity-wrapper label, div#productSingleWrap section#productSingle div#product_buy_button div.wps-buy-button-wrapper div.wps-component-products-quantity {
    margin: 0;
}
div#productSingleWrap section#productSingle div#product_buy_button div.wps-buy-button-wrapper div.wps-product-quantity-wrapper label, div#productSingleWrap section#productSingle div#product_buy_button div.wps-buy-button-wrapper div.wps-product-quantity-wrapper div.wps-quantity-label-wrapper { 
    font-size:1.2em;
    font-weight: 400;
    font-family:'neue-kabel','Neue Kabel', sans-serif;
}
div#productSingleWrap section#productSingle div#product_buy_button div.wps-buy-button-wrapper div.wps-product-quantity-wrapper label, div#productSingleWrap section#productSingle div#product_buy_button div.wps-buy-button-wrapper div.wps-btn-wrapper {
    width:60%;
}
div#productSingleWrap div#relatedMerch {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
div#productSingleWrap div#relatedMerch h2 {
    width:100%;
}
div#productSingleWrap div#relatedMerch div.wps-container {
    width:100%;
    margin-right: -10%;
}
div#productSingleWrap div#relatedMerch a#seeMore {
    display: block;
    background: #870000;
    width: 10%;
    height: 100%;
    transform: rotate(-45deg);
    -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    padding: 2% 13.75% 6% 6.25%;
    margin: 20% -11% -20.5%;
    z-index: 5;
    font-size:1.2em;
    font-weight: 500;
    font-family:'neue-kabel','Neue Kabel', sans-serif;
    color:#fff;
    text-decoration: none;
}


div#productSingleWrap div#relatedMerch .wps-buy-button-wrapper {
    padding: 10% 0;
    width:38px;
    height:30px;
    z-index: 1;
    margin-top: -68%;
    margin-left: 80%;
    transform: rotate(-45deg);
}

/* out of stock */
div#productSingleWrap div#relatedMerch .wps-buy-button-wrapper p {
    width:50px;
    margin-top:-70%;
    margin-left: -20%;
    font-size: .5em;
    color: black;
}

div#productSingleWrap div#relatedMerch #loadmore1 {
    
    
   width:100%;
    
    position: relative;
    height: 100px;  /**/
}

div#productSingleWrap div#relatedMerch #loadmore1 button {

    position: relative;
    background-position: top center;
    background-image: url(assets/big-red-triangle.png);
    background-color: transparent	;
     background-repeat: no-repeat;
   top:-20px;
    left:40%;
    margin-left: 0px;
    padding-left:0;
    padding:2% 5% 2% 5%;
    height: 128px;
    width: 150px;
    z-index: 400;
    text-align: center;
    box-shadow: none;
    /**/ 

    
  /*  
  display: block;
    background: #870000;
   width: 10%;
    height: 100%;
    transform: rotate(-45deg);
    -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    padding: 2% 13.75% 6% 6.25%;
    margin: 20% -11% -20.5%;
    z-index: 5;
    font-size:1.2em;
    font-weight: 500;
    font-family:'neue-kabel','Neue Kabel', sans-serif;
    color:#fff;
    text-decoration: none;
    position:absolute;
     top:-37%;
    left:52%;  */
}

div#productSingleWrap div#relatedMerch #loadmore1 button a {
          position: relative;
    font-size: .9em;
    width:100px;
    height: 100px;
    display: block;
    margin:50px auto 0 auto;
    padding: 0;
    z-index: 0;
    
}

div#productSingleWrap #loadmore2 {
    height: 100px;
    position: relative;
    margin-top: 20px;
    
}

div#productSingleWrap #loadmore2 button {
    display: block;
    background: #870000;
    width: 10%;
    height: 100%;
    transform: rotate(0deg);
    -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    padding: 2% 13.75% 6% 6.25%;
    margin: 20% -11% -20.5%;
    z-index: 5;
    font-size:1.2em;
    font-weight: 500;
    font-family:'neue-kabel','Neue Kabel', sans-serif;
    color:#fff;
    text-decoration: none;
    position:absolute;
    top:-100%;
    left:88%;
}

div#productSingleWrap div#otherItems div.wps-container section.wps-items-wrapper section.wps-items div.wps-item:nth-child(n+6){
    position:relative;
    top: 100px;
}
/* nothing left to load */
#otherItems > div.wps-client-component.wps-container > section.wps-items-wrapper.css-lko3ee-containerFluidCSS > p {
    margin-top: 200px;
}



div#productSingleWrap div#relatedMerch section.wps-items-list div.wps-item div.wps-product-image-wrapper {
    width: 100%;
    height: 0;
    padding: 50% 0;
    position: relative;
    overflow: hidden;
    transform: rotate(-45deg);
}
div#productSingleWrap div#relatedMerch section.wps-items-list div.wps-item:nth-child(even) {
    margin:17% -8% 3%;
}
div#productSingleWrap div#relatedMerch section.wps-items-list div.wps-item:nth-child(even) div.wps-product-image-wrapper {
    transform: rotate(45deg);
}

div#productSingleWrap div#relatedMerch section.wps-items-list div.wps-item:nth-child(n+6){
    top:0px;
    left:210px;
}

div#productSingleWrap div#relatedMerch div.wps-product-image-wrapper img{
    position: absolute;
/*    top:-15%;*/
    top:-110px; /* matt fixing the boxes */
}
div#productSingleWrap div#otherItems {
    position: relative;
    padding: 2em 0;
    margin-bottom: 10%;
}
div#productSingleWrap div#otherItems div#backRibbon {
    position: absolute;
    top:0;
    width: 99vw;
    height: 131%;
    z-index: -105;
    background:#252525;
}
div#productSingleWrap div#otherItems div.wps-container section.wps-items-wrapper section.wps-items div.wps-item {
    position: relative;
    width:24.375%;
    padding:10.55% 0 !important;
    height: 0;
    position: relative;
    -webkit-clip-path: polygon(0 50%, 25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%);
    clip-path: polygon(0 50%, 25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%);
    margin: 0 -3%;
}
div#productSingleWrap div#otherItems div.wps-container section.wps-items-wrapper section.wps-items div.wps-item:nth-child(even) {
    margin: 11.5% -2% -11%;
}
div#productSingleWrap div#otherItems div.wps-container section.wps-items-wrapper section.wps-items div.wps-item div, div#productSingleWrap div#otherItems div.wps-container section.wps-items-wrapper section.wps-items div.wps-item h3 {
    position: absolute;
    height: 0;
    top:0;
    margin:0;
}
div#productSingleWrap div#otherItems div.wps-container section.wps-items-wrapper section.wps-items div.wps-item div.wps-component-products-title {
    top: unset;
    bottom: 5em;/*changed 0*/
    width: 100%;
/*
    padding:10% 20% 28%;
    background: -moz-linear-gradient(top, rgba(113,0,0,0) 0%, rgba(113,0,0,1) 100%);
    background: -webkit-linear-gradient(top, rgba(113,0,0,0) 0%,rgba(113,0,0,1) 100%); 
    background: linear-gradient(to bottom, rgba(113,0,0,0) 0%,rgba(113,0,0,1) 100%);
*/
}
div#productSingleWrap div#otherItems div.wps-container section.wps-items-wrapper section.wps-items div.wps-item div.wps-component-products-title h2 {
    color:#fff;
    font-size:1em;
    font-weight: 500;
    font-family: 'Montserrat', sans-serif;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    height: 2.8em;
    overflow: hidden;
    text-align: center;
    padding:1em 20% 45em;
        background: -moz-linear-gradient(top, rgba(113,0,0,0) 0%, rgba(113,0,0,1) 100%);
        background: -webkit-linear-gradient(top, rgba(113,0,0,0) 0%,rgba(113,0,0,1) 100%); 
        background: linear-gradient(to bottom, rgba(113,0,0,0) 0%,rgba(113,0,0,1) 100%);
}


/*--------------------------------------------------------------
 ## wps-templates/product-single -- MEDIA querry mobile styles
--------------------------------------------------------------*/
@media only screen and (max-width: 850px) {
    
        div#productSingleWrap {
        flex-direction: column;
            text-align: center;
        }
    

        div#productSingleWrap aside {
            width:70%;
            min-width: 250px;
            margin: 5% auto;
        }
    
    
        div#productSingleWrap aside div#currentIssue div.wps-product-image-wrapper {
            padding: 20px;
            height: 350px;
            widows: 350px;
        }
    
    
        div#productSingleWrap aside div#currentIssue div.wps-product-image-wrapper img {
            position: relative;
            top:auto;
            padding: 20px;
            
        }
    
            div#productSingleWrap aside div#currentIssue div.wps-item {
            display: flex;
            flex-direction: column-reverse;
        }
    
        div#productSingleWrap aside div#currentIssue div.wps-component-products-title {
        margin: 0% auto 0 auto;
        z-index: 5;
        width:90%;
        }
    
        div#productSingleWrap aside div#currentIssue div.wps-component-products-title h2 {
        color:#fff;
        font-size:1.2em;
        font-weight: 400;
        display: block;
        overflow: hidden;
        text-align: center;
        }
    
        div#productSingleWrap aside div#currentIssue{
        margin: 0 auto;
        }
    
        div#productSingleWrap aside div#backgroundRibbon {
        display: none;
        }
    
}




/*--------------------------------------------------------------
## wps styles
--------------------------------------------------------------*/
body.wpshopify .wps-search-wrapper .wps-search-submit {
    background-color: rgb(134, 0, 0);
    backface-visibility: hidden;
    border-radius: 5px;
    color: #fff;
    display: inline-block;
    height: auto;
    font-weight: 400;
    font-size: 18px;
    line-height: 1;
    margin-left: 1em;
    padding: 0 1em;
    position: relative;
    text-decoration: none; 
    text-align: center;
    white-space: normal;
    -webkit-transition: background-color .18s ease;
    transition: background-color .18s ease;
    -webkit-backface-visibility: hidden;
    will-change: background-color;    
}



/*--------------------------------------------------------------
## MOBILE QUERIES SHOP
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## STOREFRONT
--------------------------------------------------------------*/
@media screen and (min-width:850px) and (max-width:1085px) {
    
#storefront.page-content-area main#main div.wp-block-group.subscriptionsblock div div.wp-block-buttons { 
        position: relative;
        top:auto;
        margin-top:210px;
    
    }
}


@media only screen and (max-width: 850px) {
    body, div#page.site {
        overflow-x: hidden; /* DANGER ZONE USE THIS WITH CAUTION*/
    }
    #storefront.page-content-area main#main div.wp-block-group.featured-titles div div.wp-block-buttons div.view-more-button, #storefront.page-content-area main#main div.wp-block-group.Pre-order-block div div.wp-block-buttons div.view-more-button, #storefront.page-content-area main#main div.red_bg.current-issue-block div div.wp-block-buttons div {
        position: relative;
        width:80px;
        top:unset;
        left:calc(50% - 80px);
        padding-top:25%;
        margin: 0 auto 15%;
        /*new*/
    }
    #storefront.page-content-area main#main div.red_bg.current-issue-block div.wp-block-buttons, #storefront.page-content-area main#main div.featured-titles div.wp-block-group__inner-container div.wp-block-buttons, #storefront.page-content-area main#main div.Pre-order-block div.wp-block-group__inner-container div.wp-block-buttons {
        width:80px;/*changed*/
    }
  /*-- lore-links -*/
    #storefront.page-content-area main#main .lore-links {
    background: none;
    
    margin:8% !important; 
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    position: relative;

}

#storefront.page-content-area main#main .lore-links .wp-block-button.Series {
     width:100%;
    background-image: url(assets/series-hex.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size:17%;
    padding:1em;
    height: 118px;
    margin-bottom:8%;
    position: relative;
  padding:0;

}

 #storefront.page-content-area main#main .lore-links .wp-block-button.artifacts {
    width:100%%;
    background-repeat: no-repeat;
    background-position: 50%;
   position: relative;
    right:0%;
    background-image: url(assets/artifacts-hex.png);
    height: 118px;
    background-size: 80%;
     margin-bottom: 8%;
     padding:0;
     
}


#storefront.page-content-area main#main .lore-links div.wp-block-button.characters {
   
    width:100%;
    background-size: 17%;
    background-repeat: no-repeat;
    background-position: 50%;
    left:0%;
    position: relative;
     background-image: url(assets/characters-hex.png);
    height: 118px;
    margin-bottom: 8%;
    padding:0;
   
    
}

#storefront.page-content-area main#main .lore-links div.wp-block-button.worlds {
    width:100%;
    background-image: url(assets/worlds-hex.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 17%;
    padding:0;
    height: 118px;
    position: relative;  
}


#storefront.page-content-area main#main .lore-links .wp-block-button.Series a {
/*    padding-top:0;*/
    top:0;/*0.5em */
        background: none;
    position: relative;
padding: 0;
    margin: 0;
     display: inline;

    
}
#storefront.page-content-area main#main .wp-block-button.worlds a {
    /* worlds */
    top:0%;
    background: none;
    position: relative;
    padding: 0;
    margin: 0;
    display: inline;

}
#storefront.page-content-area main#main .wp-block-button.artifacts a {
    /* artifacts */
    top:0;
    left:0;
    background: none;
    position: relative;
    padding: 0;
    margin: 0;
     display: inline;

}
#storefront.page-content-area main#main .lore-links .wp-block-button.characters a {
    /*characters */
    top:0;
    left:0%;
    background: none;
    position: relative;
    padding: 0;
    margin: 0;
    display: inline;
    
}
/* lore-links */
    
    #storefront.page-content-area main#main div.wp-block-group:nth-child(10) > div:nth-child(1) > div:nth-child(2) > section:nth-child(1) {
        width: 100vw;/*changed*/
        margin: 0 -15vw;/*changed*/
        padding: 0;/*changed*/
    }
    #storefront.page-content-area main#main div.wp-block-group.subscriptionsblock div div.wp-block-buttons div {
        position:relative;/*changed was initial;*/
        top:auto;/*changed*/
        left:auto;/*changed*/
        margin-left: auto;/*changed*/
        margin-right:auto;
        transform:rotate(180deg);/*changed*/
    }
    #storefront.page-content-area main#main div.wp-block-group.subscriptionsblock div div.wp-block-buttons div a {
        margin: 0 auto;/*changed*/
        transform:rotate(180deg);/*changed*/
    }
    #storefront.page-content-area main#main .subscriptionsblock {
        padding-bottom: 50%;/*changed*/
    }
/*--------------------------------------------------------------
## products-single.php
--------------------------------------------------------------*/
    .wpshopify div#relatedMerch .wps-items .wps-item, .wpshopify div#otherItems .wps-items .wps-item {
        flex:40% !important;/*changed*/
        max-width: 58% !important;/*changed*/
        margin-bottom: .5em !important;/*changed*/
    }
    div#productSingleWrap {
        width:100%;/*changed*/
    }
    div#productSingleWrap section#productSingle {
        width:100%;/*changed*/
    }
    div#productSingleWrap section#productSingle div.wps-product-single-content {
        margin:3em 0;/*changed*/
        text-align: left;/*changed*/
    }
    div#productSingleWrap div#relatedMerch a#seeMore {
        width: 50%;/*changed*/
        /*padding: 7% 26.75% 24% 15.25%;/*changed was 2% 26.75% 24% 10.25%*/
        padding:5% 25.75% 21% 13.25%; /*changed*/
        margin: -20% 0% 8% 37%;/*changed - was -31% 0% 8% 34%;*/
    }
    div#productSingleWrap div#relatedMerch section.wps-items-list div.wps-item:nth-child(even) {
        margin:17% -8% 3%;/*changed*/
    }
    div#productSingleWrap div#relatedMerch section.wps-items-list div.wps-item:nth-child(even) div.wps-product-image-wrapper {
        margin: 28% 7% -25%;/*changed*/
    }

    div#productSingleWrap div#relatedMerch div.wps-product-image-wrapper img{
        top:-60px;/*changed*/
        left:0;/*changed*/
    }
    div#productSingleWrap div#otherItems {
        padding: 2em 0 5em;/*changed*/
        width:100%;/*changed*/
        margin: 5% 0 5% 7.5% !important;/*changed*/
    }
    div#productSingleWrap div#otherItems h2 {
        margin: 0 15% 5% 0;/*changed*/
    }
    div#productSingleWrap div#otherItems div#backRibbon {
        width: 110vw;/*changed*/
        height: 100%;/*changed*/
    }
    div#productSingleWrap div#otherItems div.wps-container section.wps-items-wrapper section.wps-items div.wps-item {
        padding:24% 0 !important;/*changed*/
        margin: -4% -3% 0 0;/*changed*/
        margin-bottom: -2% !important;/*changed*/
    }
    div#productSingleWrap div#otherItems div.wps-container section.wps-items-wrapper section.wps-items div.wps-item:nth-child(even) {
        margin: 11.5% -2% -11%;/*changed*/
        translate: 0 28%;/*changed*/
        -webkit-translate: 0 28%;/*changed*/
    }

    div#productSingleWrap div#otherItems div.wps-container section.wps-items-wrapper section.wps-items div.wps-item div.wps-component-products-title h2 {
        width:100%;/*changed*/
        padding:1em 1.2em 5em;/*changed*/
    }
    
    /*--------------------------------------------------------------
    ## products-single.php ASIDE
    --------------------------------------------------------------*/
    
    div#productSingleWrap aside {
        margin: 4em 0% 0 0%;/*changed*/
        width: 100%;/*changed*/
    }
    div#productSingleWrap aside div#currentIssue{
        margin: 0; /*changed*/
    }
    div#productSingleWrap aside div#backgroundRibbon {
        display: none;/*changed*/
    }
    div#productSingleWrap aside div#currentIssue div.wps-item {
        display: flex;/*changed*/
        flex-direction: row;/*changed*/
    }
    div#productSingleWrap aside div#currentIssue div.wps-product-image-wrapper {
        width:100%;/*changed*/
        height: auto;/*changed*/
        padding:40% 0;/*changed*/
        -webkit-clip-path: polygon(7% 0, 93% 0, 50% 100%);/*changed*/
        clip-path: polygon(7% 0, 93% 0, 50% 100%);/*changed*/
    }
    div#productSingleWrap aside div#currentIssue div.wps-product-image-wrapper img{
        top:-30%;/*changed*/
        left:0;/*changed*/
    }
    div#productSingleWrap aside div#currentIssue div.wps-component-products-title {
        margin: 50% -45% 0 -30%;/*changed*/
        width:90%;/*changed*/
    }
    div#productSingleWrap aside div#currentIssue div.wps-component-products-title h2 {
        font-size:1em;/*changed*/
    }
    div#productSingleWrap aside div#currentIssue div.wps-buy-button-wrapper {
        width:18%;/*changed*/
        margin: calc(60% + 1em) 0 0 -20%;/*changed*/
        padding: 1% 0 0 2%;/*changed*/
    }
    div.footersearch#text-18 .wps-client-component aside.wps-storefront {
        width:100%;
        display: block;
    }
    div.footersearch#text-18 .wps-client-component section.wps-items-wrapper, div.footersearch#text-18 .wps-client-component section.wps-items-wrapper section.wps-items-list  {
        width:100%;
        display: flex;
        justify-content: space-between;
    }
    div.footersearch#text-18 .wps-client-component section.wps-items-wrapper div.wps-w-4.wps-item.p-3{
        width:45%!important;
        flex:45%;
        max-width: 45%;
    }
    div.footersearch#text-18 .wps-client-component section.wps-items-wrapper div.wps-w-4.wps-item.p-3 img.wps-product-image {
        width:100%;
        height: auto;
    }
    div.footersearch#text-18 .wps-buy-button-wrapper {
        top:52%;
    }
    button.wps-btn-cart.wps-cart-icon-fixed {
        opacity: 0.75;
        transition: all .5s ease;
        
    }
    button.wps-btn-cart.wps-cart-icon-fixed:hover {
        opacity: 1.0;
    }
    
    /*--------------------------------------------------------------
     ## page-lore.php
    --------------------------------------------------------------*/

    #lorePage #background-div {
        background-size: cover;/*changed*/
        position: fixed;/*changed*/
        height: 100vh; /*changed*/
        top:0;/*changed*/
    }
    #lorePage.page-content-area main#main div.featuredChar {
        padding:0 1em;/*changed*/
    }
    #lorePage.page-content-area main#main div.featuredChar h2.featuredCharHeading {
        font-size:1em;/*changed*/
        left:-1em;/*changed*/
        top:-1em;/*changed*/
    }
    #lorePage.page-content-area main#main div#sectionWrapper {
        padding:1em;/*changed*/
    }
    #lorePage.page-content-area main#main div#sectionWrapper h2 {
        font-size:1em;/*changed*/
        margin: 0 0 1em 0em;/*changed*/
    }
    #lorePage.page-content-area main#main div#sectionWrapper div#loreContent p {
        width:95%;/*changed*/
        margin:0 auto 6em;/*changed*/
    }
    #lorePage.page-content-area main#main div#sectionWrapper div#loreContent div.featuredCharacters figure {
        margin:0;/*changed*/
        width:55%;/*changed*/
    }
    #lorePage.page-content-area main#main div#sectionWrapper div#loreContent div.featuredCharacters .wp-block-column:nth-child(even) figure {
        margin:-20% 45%;/*changed*/
    }
    #lorePage.page-content-area main#main div#sectionWrapper section {
        width:100%;/*changed*/
        max-width:1280px;
        margin:1em auto;/*changed*/
    }
    #lorePage.page-content-area main#main div#sectionWrapper section#series div h2 {
        margin: -1em 100% 1em -1.5em;/*changed*/
        top:-1.25em;/*changed*/
    }
    #lorePage.page-content-area main#main div#sectionWrapper section#series div a.hex {
        font-size:.75em;/*changed*/
    }
    #lorePage.page-content-area main#main div#sectionWrapper section#series a#viewAllWrap {
        padding: 8% 0 6%;/*changed*/
        width:16%;/*changed*/
        font-size: .65em;/*changed*/
    }
    #lorePage.page-content-area main#main div#sectionWrapper section .pageTexts {
        width:55%;/*changed*/
        font-size:1em;/*changed*/
    }
    #lorePage.page-content-area main#main div#sectionWrapper section .pageTexts p{
        display: -webkit-box;/*changed*/
        -webkit-line-clamp: 4;/*changed*/
        -webkit-box-orient: vertical;/*changed*/
        overflow-y: hidden;/*changed*/
        margin:0;/*changed*/
    }
    #lorePage.page-content-area main#main div#sectionWrapper section h2.pageTitle {
        font-size:1.5em;/*changed*/
    }
    #lorePage.page-content-area main#main div#sectionWrapper section a#viewAllWrap .hex {
        font-size: .8em;/*changed*/
    }
    
    
    /*--------------------------------------------------------------
     ## lore-custom-template.php
    --------------------------------------------------------------*/
    div#lore #background-div {
        background-size: cover;/*changed*/
        background-position: center; /*changed*/
    }
    div#lore main#main {
       padding:2em 1em;/*changed*/
        display: block;/*changed*/
   }
    div#lore main.hasSelfie#main {
        padding:2em 1em;/*changed*/
    }
    div#lore main#main div#characterSelfie {
       position: relative;/*changed*/
        left:0;/*changed*/
        margin: 0 auto;/*changed*/
    }
    div#lore div#restOfPage {
        padding: 1em 0;/*changed*/
        margin-top:5em;/*changed*/
    }
    div#lore div#restOfPage section {
        width:90%;/*changed*/
    }

    div#lore div#restOfPage section#inTheNews .newsPost {
        justify-content: space-around;/*changed*/
    }
    div#lore div#restOfPage section#inTheNews .newsPost .newsText h2 {
        font-size:1em;/*changed*/
    }
    div#lore div#restOfPage section#inTheNews .newsPost .newsText h2 a {
        font-size: 1em;/*changed*/
    }
    div#lore div#restOfPage section#inTheNews .newsPost .newsText .post-meta {
        font-size: .8em;/*changed*/
    }
    div#lore div#restOfPage section#inTheNews .newsPost .newsText .post-excerpt  {
        display: -webkit-box;/*changed*/
        -webkit-line-clamp: 3;/*changed*/
        -webkit-box-orient: vertical;/*changed*/
        overflow-y: hidden;/*changed*/
    }
    div#lore div#restOfPage section#inTheNews #newsMorePosts .morePostsTriangle {
        width:200%;/*changed*/
        padding: 54% 24% 116%;/*changed*/
        font-size: 1em;/*changed*/
        line-height: 1.2em;/*changed*/
    }
    div#lore div#restOfPage section#inTheNews #newsMorePosts .morePostsTriangle a{
        padding: 0 3em;/*changed*/
    }
    div#lore div#restOfPage section#merchCollection .wps-container .wps-items-wrapper .wps-items .wps-item  {
        margin: -15% 5% -15% -5% !important;/*changed*/
    }
    div#lore div#restOfPage section#merchCollection .wps-container .wps-items-wrapper .wps-items .wps-item:nth-child(even) {
        margin:-15% -38% -15% 38% !important;/*changed*/
    }
    div#lore div#restOfPage section#merchCollection .wps-container .wps-item .wps-component-products-images {
        width:60%;/*changed*/
    }
    
    div#lore div#restOfPage section#merchCollection .wps-container .wps-item .wps-component-products-title {
        width: 60%;/*changed*/
        padding: 0% 10%;/*changed*/
    }
    div#lore div#restOfPage section#merchCollection .wps-container .wps-item h3 {
        padding: 20% 26% 0;/*changed*/
        width: 60%;/*changed*/
    }

}