html {
  box-sizing: border-box;
  font-size: 16px;
  font-family: 'Kanit', sans-serif;
}

*, *:before, *:after {
  box-sizing: inherit;
  line-height: normal;
}

a{
	text-decoration: none;
	color: #B30000;
}

body, h1, h2, h3, h4, h5, h6, p, ol, ul {
  margin: 0;
  padding: 0;
  font-weight: normal;
}

ul {
  list-style: none;
}

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

img {
  max-width: 100%;
  height: auto;
}
.caps{
	text-transform: uppercase;
}
.header{
	border-top: 2px solid red;
	padding-top: 40px;
	display: flex;
	background-color:#000;
	height: 172px;
	max-height: 172px;
	background-image: url(../../asset/img/interface/fmp_back.png);
  background-size: cover;
  background-position: bottom;
}
#blood1{
	background-image: url(../../asset/img/interface/blood1.png);
	background-size: cover;
  background-position: top;
	position: absolute;
	width: 210px;
	height: 140px;
	z-index: 0;
	left: 0px;
	top: 0px;
}
#blood2{
	background-image: url(../../asset/img/interface/blood2.png);
	background-size: cover;
  background-position: top;
	position: absolute;
	width: 438px;
	height: 160px;
	z-index: 0;
	left: 60%;
	top: 0px;
}
.nav{
	font-family: 'Bebas Neue', cursive;
	font-size: 2.6rem;
	text-transform: uppercase;
	color: #fff;
	flex-grow: 3;
	letter-spacing: 0.05em;
}
.subnav{
	font-family: 'Kanit', sans-serif;
	text-transform: uppercase;
	color: red;
	font-size: 1.4rem;
	flex-grow: 0.4;
	letter-spacing: 0.05em;
	padding: 0px 6px;
}
.logoContainer{
	display:flex;
	flex-wrap:nowrap;
	justify-content:center;
	align-items:center;
	flex-grow: 1;
}
.logo{
	padding-left: 12px;
	color: #000;
	align-items:center;
	display:flex;
	height:97px;
	justify-content:center;
	width:395px;
	z-index: 1;
}
.box{
	align-items: center;
	display: flex;
	justify-content: center;

}
.hatlogo{
	padding-top: 16px;
	width: 155px;
}
.hat{
flex-grow: 0.3;
}
.instagram{
	padding-right: 80px;
	flex-grow: 0.4;
}
.instagram div{
	width: 52px;
	padding-left: 6px;
	padding-top: 4px;
}
.nav ul,.nav ul li{
	display: flex;
	justify-content: center;
	flex-wrap:nowrap;
	align-items: center;
}
.nav ul{
	flex-grow: 1;
}
.nav ul li{
	padding:  0px 1.5vw;
}
.nav a:link,.nav a:visited{
	text-decoration: none;
	color: #eee;
}
.nav a:hover{
	text-decoration: none;
	color: #fff;
}
.subnav a:link,.subnav a:visited{
	text-decoration: none;
	color: #ff0000;
}
.subnav a:hover{
	text-decoration: none;
	color: #ff0000;
}
.instagramsection{
	margin-top: 80px;
	flex-wrap: wrap;
	background-color: #373737;
	min-height: 180px;
  display:flex;
  color: #fff;
  padding: 0px;
}
.instagramsection h3{
	 font-size: 1.8em;
   font-weight: 600;
   letter-spacing: 0.03em;
}
.instagramsection h2{
	 font-size: 3em;
   line-height: 0.7em;
   font-weight: 300;
}
.content{
	min-height: 100px;
}
.largetextsection{
	padding: 80px 0px;
	background-image: url(../../asset/img/interface/splat_back.jpg);
  background-size: cover;
  background-position: center;
}
.largetextsection h2{
	font-weight: 100;
	font-family: 'Kanit', sans-serif;
	text-transform: uppercase;
	font-size: 3vw;
	flex-grow: 0.4;
	letter-spacing: 0.02em;
	padding: 0px 6px;
	line-height: 1em;
}
.largetextsection h1{
	font-weight: 800;
		font-family: 'Kanit', sans-serif;
	text-transform: uppercase;
	font-size: 4vw;
	flex-grow: 0.4;
	letter-spacing: 0em;
	padding: 0px 6px;
	line-height: 1em;
}
.btn{
	font-size: 1vw;
	padding: 10px 24px;
	font-weight: 800;
	font-family: 'Kanit', sans-serif;
	color: #fff;
	background-color: #B30000;
	text-transform: uppercase;
	width: fit-content;
	text-align: center;
}
.floatl{
	float: left;
}
.btn.outline{
	font-size: 1vw;
	padding: 10px 24px;
	font-weight: 600;
	font-family: 'Kanit', sans-serif;
	color: #B30000;
	background-color: #fff;
	text-transform: uppercase;
	width: fit-content;
	text-align: center;
	border: 1px solid #B30000;
}
.btn.outline.small{
	font-size: 0.9vw;
	padding: 4px 11px;
}
.largertext{
	font-size: 1.2em;
	line-height: 1.2em;
}
.mtb40{
	margin: 1em 0;
}
.mb20{
	margin-bottom: 40px;
	line-height: 4vw;
}
.fmpfooter{
	background-color: #070707;
	min-height: 400px;
	display:flex;
	color: #fff;
	flex-wrap:wrap;
	padding: 20px;
	background-image: url(../../asset/img/interface/footer_image.jpg);
        background-size: cover;
         background-position: center;
}
.fmpfooter a:link,.fmpfooter a:visited{
	text-decoration: none;
	color: #ccc;
	text-transform: uppercase;
}
.fmpfooter a:hover{
	text-decoration: none;
	color: #fff;
	text-transform: uppercase;
}
.fmpfooter li{
	line-height: 2em;
}
.instac1{
	flex-grow: 4;
	padding-top: 20px;
	padding-bottom: 20px;
	padding-right: 30px;
	display: flex;
  align-items: center;
  justify-content: right;
}
.instac2{
	display: flex;
	flex-grow: 5;
	padding-top: 20px;
	padding-bottom: 20px;
	align-items: left;
	text-align: left;
}
.fmpc1{
	flex-grow: 2;
	padding-top: 20px;
	padding-bottom: 20px;
}
.fmpc2{
	flex-grow: 2;
}
.fmpc3{
	flex-grow: 2;
}
.fmpc4{
	flex-grow: 2;
	flex-wrap: wrap;
	text-align: center;
}
.fmpc4 p{
	width: 100%;
	padding-top: 40px;
}
.copyright{
	width: 100%;
	padding-top: 40px;
	padding-bottom: 20px;
}
.copyright p{
max-width: 900px;
	}
.fmpfooter .copyright a{
	text-decoration:underline;
		color: #ff0000;
}
.normaltext{
	display: block;
}
.centertext{
	text-align: center;
}
.centerdiv{
	margin-right: auto;
	margin-left: auto;
}
.localshopfinder{
	display: flex;
	padding: 60px 10px;
	height: 80px;
	background-color: #000;
	flex-wrap:nowrap;
	justify-content:center;
	align-items:center;
	flex-grow: 1;
	border-bottom: 2px solid red;
}
.localshopfinder input{
	color: #949494;
	font-weight: 800;
	border:1px solid #5b5b5b;
	background-color:#5b5b5b;
	min-width: 280px;
	padding: 15px;
	font-size: 1em;
}
.localshopfinder button{
	color: #fff;
	font-weight: 800;
	padding: 15px;
	font-size: 1em;
	background-color: #303030;
	border:1px solid #5b5b5b;
}
.localshopfinder input[type="submit"], .localshopfinder input[type="text"] {
    line-height:normal !important;
}
::selection{
  background: #5b5b5b;
}

::-moz-selection{
  background: #5b5b5b;
}

.widemenu{
	display:flex;
	    z-index: 2;
}
.mobilemenu{
	display: none;
	z-index: 3;
}

.mcenter{
	   margin: 0 auto;
}

/* Style the navigation menu */
.mnav {
  overflow: hidden;
  background-color: #000;
  position: relative;
  display: none;
  font-family: 'Bebas Neue', cursive;
}

/* Hide the links inside the navigation menu (except for logo/home) */
.mnav #mLinks {
  display: none;
}

/* Style navigation menu links */
.mnav a {
  color: #eee;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 6vw;
  display: block;
  text-align: center;
}

/* Style the hamburger menu */
.mnav a.icon {
  background: black;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}

/* Add a grey background color on mouse-over */
.mnav a:hover {
  background-color: #111;
  color: #fff;
}

/* Style the active link (or home/logo) */
.active {
  background-color: #04AA6D;
  color: white;
}

.footerlogo{
	max-width: 200px;
}
.instagramsection .instagramblock{
	display: flex;
  justify-content: right;
 		padding-right: 10px;
 		padding-left: 10px;
 		overflow: hidden;
 		max-width: 227px;
 		max-height: 227px;
}
.instagramsection .instagramblock img{
 		max-width: 227px;
 		max-height: 227px;
 		width: 100%;
  	height: 100%;
  	object-fit: cover;
}
.instagramsection .innercontent{
	align-items: right;
	text-align: right;
}



.homeslider, .homeslider img{
	width: 100%;
	overflow: hidden;
}
.homeslider .titlelogo{
	position: absolute;
	bottom: 7%;
	left: 5%;
	z-index: 4;
	width: 23%;
}
.slidebox{
	position: relative;

}
.slidebox .fade{

	width: 100%;
	height: 90%;
	position: absolute;
	bottom: 0px;
	left: 0px;
	background: linear-gradient(20deg, rgba(0,0,0,1), rgba(0,0,0,0),rgba(0,0,0,0));
}


.thecomics{
	min-height: 200px;
	background-color: #4c4c4c;
}
.thecomics img{
	width: 100%;
	overflow: hidden;
}
.thecomics h2{
	color: #fff;
	font-weight: 800;
    font-family: 'Kanit', sans-serif;
    text-transform: uppercase;
    font-size: 2vw;
    flex-grow: 0.4;
    letter-spacing: 0em;
    padding: 20px 40px;
    line-height: 1em;
}
.comicslider{

}
.comicslide{
	padding: 0px 4px 8px 4px;

}
.slick-slide a .tab{
	color: #fff;
	background-color: #dd0000;
	text-align: center;
}
.comicslide .tab{
	background-color: #ee0d0d;
	text-align: center;
}
.comicslide .tab h2{
	color: #fff;
	font-size: 1.3em;
}



.featuredchar{
	display: flex;
	flex-wrap: wrap;
	max-width: 2000px;
  margin: 0 auto;
  justify-content: center;
	align-items: center;
	padding: 40px 20px 40px 20px;
}
.charimage{
	text-align: right;
	width: 50%;
	padding-left: 7vw;
	padding-right: 2vw;
	max-width: 640px;
}


.charinfo{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 50%;
	padding-right: 7vw;
	padding-left: 1vw;
}


.charinfo h3{
	font-weight: 100;
	font-family: 'Kanit', sans-serif;
	text-transform: uppercase;
	font-size: 2vw;
	flex-grow: 0.4;
	letter-spacing: 0.02em;
	padding: 0px;
	line-height: 1em;
}
.charinfo h2{
	font-weight: 800;
		font-family: 'Kanit', sans-serif;
	text-transform: uppercase;
	font-size: 3vw;
	flex-grow: 0.4;
	letter-spacing: 0em;
	padding: 0px;
	line-height: 1em;
}

.charinfo p{
	margin-top: 20px;
	margin-bottom: 20px;
	font-size: 1.2em;
	line-height: 1.3em;
}




.featuredcreator{

	display: flex;
	flex-wrap: wrap;
	max-width: 1800px;
  margin: 0 auto;
  justify-content: center;
	align-items: center;
	padding: 40px 20px 40px 20px;

}
.featuredcreator.aligntop{
		align-items: start !important;
}
.comiclayout{
		display: flex;
	flex-wrap: wrap;
	max-width: 1800px;
  margin: 0 auto;
  justify-content: center;
	align-items: start;
	padding: 40px 20px 40px 20px;
	}


.comicinfo{
		display: flex;
	justify-content: center;
	align-items: center;
	width: 50%;
	padding-right: 0vw;
	padding-left: 20px;
}

.comicinfo ul {
    list-style: none;
}
.comicinfo li {
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #b2b2b2;
    padding:3px 10px;
}
.comicinfo li:before {
    border-radius: 50%;
    border-style: solid;
    border-width: 1px;
    width: 10px;
    height: 10px;
    margin-right:0.3em;
    position: relative;
    display: inline-block;
}
.comicinfo li:last-child {
    border: 0px solid orange;
}
.comicinfo .variant{
	background-color: #555;
	padding:  5px 20px 5px 12px;
	color: #fff;
}
.seriesblock{
	display: flex;
	flex-wrap: wrap;
}
.seriesblock .comic{

	flex-grow: 1;
}
.comiclist {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding: 0px;
    
}
.comiclist .clistblock h3{
	font-size: 1.2em !important; 
}
.comiclist .clistblock{
	flex-grow: 1;
	padding:6px !important; 
	text-align: center !important;
}
.comiclist  .tab{
	background-color: #777;
	text-align: center;
}
.comiclist  .tab h2{
	color: #fff;
	font-size: 1em;
}

.comicimage{

	z-index: 10;
	text-align: center;
	width: 50%;
	

}
.comicimage img{

	height: 70vh;
	margin-top: -140px;
	border: 12px solid #fff;
}


.creatorimage{
	z-index: 10;
	text-align: right;
	width: 40%;
	padding-left: 2vw;
	padding-right: 7vw;
}

.creatorinfo{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 60%;
	padding-right: 6vw;
	padding-left: 10vw;
}


.creatorinfo h3{
	font-weight: 100;
	font-family: 'Kanit', sans-serif;
	text-transform: uppercase;
	font-size: 2vw;
	flex-grow: 0.4;
	letter-spacing: 0.02em;
	padding: 0px;
	line-height: 1em;
}
.creatorinfo h2{
	font-weight: 800;
		font-family: 'Kanit', sans-serif;
	text-transform: uppercase;
	font-size: 3vw;
	flex-grow: 0.4;
	letter-spacing: 0em;
	padding: 0px;
	line-height: 1em;
}

.creatorinfo p{
	margin-top: 20px;
	margin-bottom: 20px;
	font-size: 1.2em;
	line-height: 1.3em;
}


.lineholder{
	position: relative;

}
.lineholder hr {
	    position: absolute;
	    top: 4vw;
	    left: 0px;
	    width: 100%;
}

.news{
	min-height: 200px;
	background-color: #fff;
	max-width: 2000px;
	margin:  0 auto;
}
.news h2{
	color: #000;
	font-weight: 800;
    font-family: 'Kanit', sans-serif;
    text-transform: uppercase;
    font-size: 2vw;
    flex-grow: 0.4;
    letter-spacing: 0em;
    padding: 20px 40px;
    line-height: 1em;
}
.news h4{
	font-size: 1.2em;
	font-weight: 400;
}

.newssection{
	display: flex;
	flex-wrap: wrap;

	width: 100%;
	padding: 0px 34px 40px 34px;
	flex-basis: max-content;
}
.newsblock{
	width: 33%;
	padding: 6px;

}
.newsblock .image{
	display: inline-block;
	width: 100%;
	overflow: hidden;
}
.newsblock img{
	width: 100%;
}
.newsblock h3{
	font-size: 1.65em;
	font-weight: 400;
	line-height: 1.1em;
}
.newsblock p{
	display: block;
	width: 100%;
	line-height: 1.3em;

}
.newscontent{
	width: 100%;
}
.fmpfooter .btn{
		display: inline-block;
		margin-bottom: 6px;
	}
.textcontentarea{
	padding: 40px;
	max-width: 1200px;
	margin: 0 auto;
}
.textcontentarea p ,.textcontentarea li,.textcontentarea strong{
	line-height: 1.2em;
	}
.textcontentarea strong{
	font-weight: 600;
}
.textcontentarea p{
	margin-bottom: 20px;
}

.textcontentarea ol {
  padding-left:  20px;
}
.textcontentarea ol ol {
	padding-left:  40px;
}
.textcontentarea ol ol ol {
	padding-left:  60px;
}
.textcontentarea ol li, .textcontentarea ol{
	margin-bottom: 20px;
}
.textcontentarea hr {
	    position: relative;
	    width: 100%;
	    margin-bottom: 20px;
	    border: 1px solid #ddd;
}

.readmoreon{
	text-transform: uppercase;
}
b{
	font-weight: 600;
}
strong{
	font-weight: 600;
}
.generalpageheader{
	width: 100%;
	background-color: #ddd;
}
.generalpageheader .titlebar{
	max-width: 2000px;
	margin: 0 auto;
}

.generalpageheader h2{
	    color: #000;
    font-weight: 800;
    font-family: 'Kanit', sans-serif;
    text-transform: uppercase;
    font-size: 2vw;
    flex-grow: 0.4;
    letter-spacing: 0em;
    padding: 20px 40px;
    line-height: 1em;
}
.generalwide {
	display: flex;
	flex-wrap: wrap;
		max-width: 2000px;
		margin: 0 auto;
    padding: 20px 40px;
    	justify-content: center;
			align-items: center;
}
.generalwide.aligntop{
		align-items: start !important;
}
.generalwide .col1{
	display: flex;
	margin-bottom: 20px;
}
.generalwide .col{
	display: flex;
	margin-bottom: 20px;
}
.generalwide .col1 img{

}
.generalwide .col2{
	display: flex;
		justify-content: center;
	align-items: center;
}

.generalwide .col.ww25{
width: 25%;
}
.generalwide .col.ww33{
width: 33%;
}
.generalwide .col.ww40{
width: 40%;
}
.generalwide .col.ww50{
width: 50%;
}
.generalwide .col.ww60{
width: 60%;
}
.generalwide .col.ww75{
width: 75%;
}
.generalwide .col.ww100{
width: 100%;
}
.ww100{
width: 100%;
max-width: none;
}
.pp0{
	padding: 0px;
}
.thinb{
	padding: 20px;
}
.blackbg{
	background-color: #000;
}
.greybg{
	background-color: #191919;
}
.generalwide .col.center{
		flex-basis: content;
}

.generalwide .textarea{
	font-size: 1.2em;
}
.generalwide .textarea p,.generalwide .textarea h2{
	line-height: 1.3em;
}
.generalwide .quote{
	font-size: 1.9em;
	text-align: center;
  max-width: 1350px;
  margin-top: 80px;
}
.generalwide .quote p{
line-height: 1.2em;
margin-bottom: 10px;
	padding-left: 80px;
	padding-right: 80px;
	}
.generalwide .quote.tight, .generalwide .quote.tight p{
	 margin-top: 10px;
	}
.generalwide .quote .small{
	font-size: 0.6em;
}
.generalwide .breakup img{
	margin-top: -150px;
}
.marginr{
	margin-right: 20px;
}
.mr20{
	padding-right: 20px;
}
.ml20{
	padding-left: 20px;
}
.mr40{
	padding-right: 40px;
}
.ml40{
	padding-left: 40px;
}
.mt10{
	margin-top: 10px !important;
}
.mt20{
	margin-top: 20px !important;
}
.mt40{
	margin-top: 40px !important;
}
.pt40{
	padding-top: 40px !important;
}
.mb20{
	margin-bottom: 20px !important;
}
.mb40{
	margin-bottom: 40px !important;
}
.maxw2000{
	max-width: 2000px;
}
.maxw1800{
	max-width: 1800px;
}
.maxw1500{
	max-width: 1500px;
}
.contenthead{
	background-color: #191919;
	width: 100%;
	padding-left: 0px;
}
.contenthead.white{
	background-color: #fff;
	width: 100%;
	padding-left: 0px;
}
.contenthead.white h2{
	  color: #000;
}
.thin{
	font-weight: 400;
}

.contenthead.contact {
	padding-top: 100px;
	background-image: url(../../asset/img/interface/footer_image.jpg);
  background-size: cover;
  background-position: top;
}
.contenthead.about {
	padding-top: 0px;
	background-image: url(../../asset/img/interface/footer_image.jpg);
  background-size: cover;
  background-position: bottom;
}
.contenthead.newsbanner {
	padding-top: 0px;
	background-image: url(../../asset/img/interface/footer_image.jpg);
  background-size: cover;
  background-position: center;
}
.contenthead.characters {
	padding-top: 140px;
	background-image: url(../../asset/img/interface/banner3.jpg);
  background-size: cover;
  background-position: top;
}
.contenthead.creators {
	padding-top: 140px;
	background-image: url(../../asset/img/interface/banner2.jpg);
  background-size: cover;
  background-position: top;
}
.contenthead.comics{
	padding-top: 60vh;
  background-size: cover;
  background-position: top;
  position: relative;
}
.contenthead.comics .fadeholder{
	width: 100%;
	height: 100%;
	position: absolute;
	bottom: 0px;
	left: 0px;
	z-index: 10;
	padding: 0px;
}
.contenthead.comics .fade{
	width: 100%;
	height: 100%;
	background: linear-gradient(10deg, rgba(0,0,0,0.9), rgba(0,0,0,0),rgba(0,0,0,0));
}

.contenthead h2{
	  color: #fff;
    font-weight: 800;
    font-family: 'Kanit', sans-serif;
    text-transform: uppercase;
    font-size: 2vw;
    flex-grow: 0.4;
    letter-spacing: 0em;
    padding: 20px 0px;
    line-height: 1em;
}
.comictitle h2{
		z-index: 20;
		position: relative;
		bottom: 0px;
		left: 0px;
		font-size: 3.6em;
}
.contenthead div{
	padding-left: 40px;
}
.generalwide form textarea, .generalwide form input{
	width: 100%;
	padding: 10px;
  font-size: 1em;
}
.generalwide form p, .generalwide form h2{
	margin-bottom: 20px;
}
.generalwide form input[type=submit] {
	background-color: #B30000;
	color: #fff;
	font-weight: 800;
  font-family: 'Kanit', sans-serif;
  text-transform: uppercase;
  border: 0px;
}
.generalwide .creatorblock{
	position: relative;
	padding: 6px;
	margin-bottom: 0px;
	width: 25%;
}
.creatorblock .overlay{
	position: absolute;
	left: 36px;
	bottom: 24px;
	z-index: 20;
	color: #fff;
	font-weight: 600;
	font-size: 1.2em;
	text-transform: uppercase;
}
.creatorblock a{
	z-index: 10;
	font-size: 0px;
}
.creatorblock h4{
		font-size: 26px !important;
}
.creatorblock .fadeholder{
	width: 100%;
	height: 100%;
	position: absolute;
	bottom: 0px;
	left: 0px;
	z-index: 15;
	padding: 6px;
	}
.creatorblock .fade{
	width: 100%;
	height: 100%;
	background: linear-gradient(20deg, rgba(0,0,0,0.5), rgba(0,0,0,0),rgba(0,0,0,0));
}


.characterslist{
	display: flex;
	flex-wrap: wrap;

	width: 100%;
	padding: 34px 34px 40px 34px;
	flex-basis: max-content;
}
.clistblock{
	width: 33%;
	padding: 6px;
	margin-bottom: 20px;
}
.clistblock .image{
	display: inline-block;
	width: 100%;
	overflow: hidden;
}
.clistblock img{
	width: 100%;
}
.clistblock h3{
	font-size: 1.65em;
	font-weight: 400;
	line-height: 1.1em;
	text-transform: uppercase;
}
.clistblock p{
	display: block;
	width: 100%;
	line-height: 1.3em;

}
.icons{
	max-width: 50px;
}
.flex-container{
  display:flex;
  flex-direction:row;
  justify-content: flex-start;
  gap: 10px 20px;
}
.flex-container > .flex-item{
  flex-grow:1;
  flex-basis:15%;
}
.signature{
	max-width: 360px;
}

.generalwide h3{
	font-weight: 600;
}

.eapps-instagram-feed-container .eapps-instagram-feed-title-container{
	display: none !important;
}

@media screen and (max-width: 1528px) {
	.instagram{
		padding-right: 5px;
		flex-grow: 0.4;
	}
	.nav{
		font-size: 2.5rem;
	}
}

@media screen and (max-width: 1472px) {
  .header{
		padding-top: 20px;
		height: 116px;
	}
	.nav{
		font-size: 1.8rem;
	}
	.subnav{
		font-size: 1rem;
	}
	.logo{
		width: 310px;
	}
	.hatlogo{
		padding-top: 10px;
		width: 105px;
	}
	.instagram{
		padding-right: 60px;
	}
	.instagram div{
		width: 42px;
	}
	.widemenu{
		display:flex;
	}
	.mobilemenu{
		display: none;
	}
	.mnav {
  	display: none;
	}
	#blood1{
		width: 180px;
		height: 110px;
	}
#blood2{
		width: 318px;
		height: 110px;
		left: 55%;
}
.instagramsection .instagramblock{
 		max-width: 200px;
 		max-height: 200px;
}
.instagramsection .instagramblock img{
 		max-width: 200px;
 		max-height: 200px;
}
.instagramsection h3{
	  font-size: 1.2em;
}
.instagramsection h2{
	  font-size: 2.4em;
}
.lineholder hr {
	    position: relative;
	    width: 100%;
	    margin-bottom: 40px;
	}	
	.creatorblock h4{
		font-size: 20px !important;
}
.comictitle h2{
	font-size: 3.6vw;
}

}

@media screen and (max-width: 1100px) {
  .header{
		padding-top: 10px;
		height: 100px;
	}
	.nav{
		font-size: 1.3rem;
	}
	.subnav{
		font-size: 0.8rem;
	}
	.logo{
		width: 300px;

	}
	.hatlogo{
		padding-top: 12px;
		width: 96px;
	}
	.instagram{
		padding-right: 40px;
	}
	.widemenu{
		display:flex;
	}
	.mobilemenu{
		display: none;
	}
	.mnav {
  	display: none;
	}
	#blood1{
		width: 131px;
		height: 100px;
	}
	#blood2{
			width: 289px;
			height: 94px;
			left: 55%;
	}
	.instagramsection h3{
	  font-size: 1em;
	}
	.instagramsection h2{
		  font-size: 2em;
	}
	.instagramsection .instagramblock{
 		max-width: 180px;
 		max-height: 180px;
	}
	.instagramsection .instagramblock img{
 		max-width: 180px;
 		max-height: 180px;
	}
	.generalwide .col1,.generalwide .col2{
	width: 100%;
}
	.generalwide .col.ww25,.generalwide .col.ww33,.generalwide .col.ww40,.generalwide .col.ww50,.generalwide .col.ww60,.generalwide .col.ww75,.generalwide .col.ww100{
	width: 100%;
}
.mr20,.ml20,.mr40,.ml40{
	padding-right: 0px;
	padding-left: 0px;
}
.generalwide .textarea{
	font-size: 1em;
}
.generalwide img.hideonsmall{
	display: none;
}
.contenthead.contact{
	height: 0%;
	padding-top: 0px;
}
.contenthead h2{
	font-size: 1.4em;
}
	.clistblock{
		width: 50%;
	}
	.generalwide .creatorblock{
		width: 50%;
	}
	.creatorblock h4{
		font-size: 22px !important;
}
}
@media screen and (max-width: 898px) {
	.generalwide .quote{
		font-size: 1.1em;
		line-height: 1.1em;
	}
	.generalwide .quote p {
    margin-bottom: 10px;
    padding-left: 0px;
    padding-right: 0px;
}
  .header{
		padding-top: 1px;
		height: 80px;
		overflow: hidden;
	}
	.mnav {
  	display: block;
	}
	.nav{
		font-size: 1rem;
	}
	.subnav{
		font-size: 0.8rem;
	}
	.logo{
		max-width: 240px;
		padding-top: 4px;
		justify-content: safe left;
		text-align: left;
	}
	.hatlogo{
		padding-top: 2px;
		width: 60px;
	}
	.instagram{
		padding-right: 20px;
	}
	.instagram div{
		width: 32px;
	}
	.widemenu{
		display: none;
	}
	.mobilemenu{
		display:block;
	}
	.logoContainer {
    justify-content: left;
    align-items: left;
	}
	.burger{
		display:flex;
		flex-grow: 1;
		justify-content: right;
		text-align: right;
		padding-right: 20px;
		width: 90px;
		font-size: 31px;
	}
	.mnav .instagram{
		width: 100%;
		text-align: center;
	}
	.mnav .instagram img{
		width: 40px;
	}
	.btn,.btn.outline{
		font-size: 14px;
		line-height: 22px;
	}
	
	.footerlogo{
		max-width: 160px;
	}
	.instac1{
	
		text-align: center;
	}
	.instac2{
  	flex-wrap: wrap;
	}
	.fmpc1{
	width: 100%;
	}
	.fmpc2{
		align-items: baseline;
		flex-grow: 2;
	}
	.fmpc3{
		align-items: baseline;
		flex-grow: 2;
	}
	.fmpc4{
		width: 100%;
	}
  #blood1{
		width: 111px;
		height: 84px;
	}
	#blood2{
			width: 210px;
			height: 78px;
			left: 55%;
	}
	.instac1{
		width: 100%;
		    justify-content: center;
		        padding: 10px;
	}
	.instac2{
		width: 100%;
		    justify-content: center;
	}
	.instagramsection .innercontent{
		text-align: center;
	}
	.instagramsection .instagramblock{
		margin-bottom: 10px;
	}
	.charinfo{
		width: 100%;
		padding: 40px;
	}
	.creatorinfo{
		width: 100%;
		padding: 40px;
	}
	.comicinfo{
		width: 100%;
		padding: 40px;
	}
	.comicimage{
		width: 100%;
	}
	.comicimage img{
		    margin-top: 0px;
	}
	.contenthead .comictitle{
		padding-left: 20px;
		padding-right: 20px;
	}
	.contenthead .comictitle h2 {
    font-size: 1.6em;
    width: 100%;
    text-align: center !important;
  }
	.featuredcreator{
		flex-direction: column-reverse;
	}
	.featuredcreator.noflipdir{
		flex-direction: column;
	}
	.comiclayout{
		flex-direction: column-reverse;
	}
	.newsblock{
   width: 100%;
	 padding: 10px 20px;
	}
	.thecomics h2{
		font-size: 20px;
	}
	.news h2{
		font-size: 20px;
	}
	.charinfo h2{
		font-size: 30px;
	}
	.charinfo h3{
		font-size: 30px;
	}
	.creatorinfo h2{
		font-size: 30px;
	}
	.creatorinfo h3{
		font-size: 30px;
	}
	.largetextsection h2{
		font-size: 5vw;
	}
	.largetextsection h1{
		font-size: 5vw;
	}
	.creatorimage{
		z-index: 10;
		text-align: right;
		width: 100%;
	padding: 0px 40px;
	}
	.home .creatorimage .btn{
		display: none;
	}
	.charimage{
		text-align: right;
		width: 100%;
		padding: 0px 40px;
	}
	.creatorblock h4{
		font-size: 18px !important;
}
}
@media screen and (max-width: 580px) {
	#blood2{
		left: 30%;
		width: 60%;
	}
	.fmpc2{
		width: 100%;
		text-align: center;
	}
	.fmpc3{
		width: 100%;
		text-align: center;
	}
	.slick-arrow{
		opacity: 0;
	}
		.localshopfinder input{
		width: 50%;
		min-width: 80px;
		font-size: 0.7em;
	}
	.localshopfinder button{
		width: 50%;
		font-size: 0.7em;
	}
		.clistblock{
		width: 100%;
	}
		.generalwide .creatorblock{
		width: 100%;
	}
	}