/*!
 * Devil's Candy by Hiveworks, 2016
 * Author: Kevin Wilson, Hiveworks
 * Author URL: http://thekevinwilson.com
 */
/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */
/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Prevent adjustments of font size after orientation changes in IE and iOS.
 */
html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%
  /* 2 */ }
/**
 * Remove the margin in all browsers (opinionated).
 */
body {
  margin: 0;
padding:0;  }
  
/* SHIT ERIN ADDED */
#headercontain{
	max-width:1100px;
	display:flex;
	flex-direction:column;
}
aside{
	max-width:1100px;
}
#midcontentcontain{
	max-width:1100px;
	display:flex;
}
  @media screen and (max-width: 1100px) {
  	#sidebar{
		display:none !important;
	}
	.leaderboard{
		display:none !important;
	}
  }



html {
  font-size: 16px;
  line-height: 1.5; }
  @media screen and (min-width: 900px) {
    html {
      font-size: 18px; } }
  @media screen and (min-width: 1100px) {
    html {
      font-size: 16px;
      line-height: 1.4; } }


body {
  background-color: #4f4b5f;
  font-family: "source_sans_proregular", Arial, "Helvetica Neue", Helvetica, sans-serif; }

ul {
  list-style: none; }

header,
footer {
  background: url("../img/bkgd_stitches.png") repeat; }

a {
  color: inherit;
  text-decoration: none; }
  a:active {
    color: #251b2c; }
  a:hover, a:focus {
    color: #ad72bb; }

select {
  background-color: #ffffff;
  color: #000;
  font-size: 0.75rem;
  border: none;
  margin-top: 1vh;
  margin-bottom: 1vh;
  border-radius: 7px; }

@font-face {
  font-family: 'ccurbanbarbariangiantregular';
  src: url("../fonts/ccurbanbarbariangiant-webfont.woff2") format("woff2"), url("../fonts/ccurbanbarbariangiant-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'source_sans_proitalic';
  src: url("../fonts/sourcesanspro-it-webfont.woff2") format("woff2"), url("../fonts/sourcesanspro-it-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'source_sans_proregular';
  src: url("../fonts/sourcesanspro-regular-webfont.woff2") format("woff2"), url("../fonts/sourcesanspro-regular-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'source_sans_prosemibold';
  src: url("../fonts/sourcesanspro-semibold-webfont.woff2") format("woff2"), url("../fonts/sourcesanspro-semibold-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'source_sans_proSBdIt';
  src: url("../fonts/sourcesanspro-semiboldit-webfont.woff2") format("woff2"), url("../fonts/sourcesanspro-semiboldit-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal; }
b,
strong {
  font-family: "source_sans_prosemibold", Arial, "Helvetica Neue", Helvetica, sans-serif; }

i,
em {
  font-family: "source_sans_proitalic", Arial, "Helvetica Neue", Helvetica, sans-serif; }

b i,
b em,
strong i,
strong em {
  font-family: "source_sans_proSBdIt", Arial, "Helvetica Neue", Helvetica, sans-serif; }

h1 {
  font-size: 3.157rem; }

h2 {
  font-size: 2.369rem; }

h3 {
  font-size: 1.777rem; }

h4 {
  font-size: 1.333rem; }

h5 {
  font-size: 0.75rem; }

h6 {
  font-size: 0.563rem; }

header {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-justify-content: space-around;
      -ms-flex-pack: distribute;
          justify-content: space-around; 
		  }
  @media screen and (min-width: 1100px) {
  #headercontain{
  	flex-direction:row;
  }
    header {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      -webkit-flex-direction: row;
          -ms-flex-direction: row;
              flex-direction: row; } 
}

aside {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 100%; }
  @media screen and (min-width: 1100px) {
    aside {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -webkit-flex-direction: column;
          -ms-flex-direction: column;
              flex-direction: column;
      width: inherit;
      -webkit-box-flex: 1;
      -webkit-flex-grow: 1;
          -ms-flex-positive: 1;
              flex-grow: 1; } }

#main-logo {
  max-width: 250px;
  max-height: 250px;
  margin:0 auto; }

.logo {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
      -ms-flex-align: end;
          align-items: flex-end; }
  @media screen and (min-width: 1100px) {
    .logo {
      -webkit-box-flex: 1;
      -webkit-flex-grow: 1;
          -ms-flex-positive: 1;
              flex-grow: 1;
      -webkit-box-ordinal-group: -1;
      -webkit-order: -2;
          -ms-flex-order: -2;
              order: -2; } }

nav {
  font-family: "ccurbanbarbariangiantregular", "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
  font-size: 1.777rem;
  text-align: center; }
  nav ul {
    padding: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
margin:0;			}
    @media screen and (min-width: 1100px) {
      nav ul {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-direction: row;
            -ms-flex-direction: row;
                flex-direction: row;
        -webkit-justify-content: center;
            -ms-flex-pack: distribute;
                justify-content: center;
        margin: 1vh auto;
        padding: 0 1vw; } }
  nav li {
    background-color: #000;
    padding: 1.5vw 1.5vw 2vw 1.5vw;
}
    @media screen and (min-width: 1100px) {
      nav li {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-direction: row;
            -ms-flex-direction: row;
                flex-direction: row; } }
    nav li a {
      color: #ffffff; }
      nav li a:hover {
        color: #ad72bb; }
  @media screen and (min-width: 1100px) {
    nav {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      -webkit-flex-direction: row;
          -ms-flex-direction: row;
              flex-direction: row;
      font-size: 1.1rem; } }

@media screen and (min-width: 1100px) {
  nav .about {
    background: url("../img/bg-about.png");
    background-size: 100% 100%; }
  nav .cast {
    background: url("../img/bg-cast.png");
    background-size: 100% 100%; }
  nav .archive {
    background: url("../img/bg-archive.png");
    background-size: 100% 100%; }
  nav .gallery {
    background: url("../img/bg-gallery.png");
    background-size: 100% 100%; }
  nav .extra {
    background: url("../img/bg-extra.png");
    background-size: 100% 100%; }
  nav .patreon {
    background: url("../img/bg-patreon.png");
    background-size: 100% 100%; } }

nav .oozeborder {
  background-image: url("../img/ooze.svg");
  background-repeat: repeat-x;
  background-size: 60% auto;
  height: 4vh;
  width: 100%; }
  @media screen and (min-width: 1100px) {
    nav .oozeborder {
      display: none; } }

#menu {
  display: none; }
  @media screen and (min-width: 1100px) {
    #menu {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex; } }

.show-menu {
  color: #ffffff;
  background: #000;
  padding: 2vh 0;
  display: block; }
  .show-menu .show-menu:hover {
    cursor: pointer; }
  @media screen and (min-width: 1100px) {
    .show-menu {
      display: none; } }

input[type=checkbox] + label {
  color: #ffffff; }

input[type=checkbox]:checked + label {
  color: #ad72bb; }

input[type=checkbox] {
  display: none; }

input[type=checkbox]:checked ~ #menu {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex; }

.leaderboard {
	box-sizing:border-box;
  text-align: center;
  -webkit-box-ordinal-group: 0;
  -webkit-order: -1;
      -ms-flex-order: -1;
          order: -1;
		  width:758px;
		  height:120px;
		  margin: 0 auto;
		  border: 15px solid #000;
		  margin-top:1vh;
  display: none; }
  @media screen and (min-width: 1100px) {
    .leaderboard {
      display: block; } }

main {
  background-color: #4f4b5f;
  border-style: solid;
  padding: 0;
  border-width: 15px 0px 15px 0px;
  z-index: 2;
  border-color: #251b2c;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start; }
  @media screen and (min-width: 10px) {
    main {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -webkit-flex-direction: column;
          -ms-flex-direction: column;
              flex-direction: column; } }
  @media screen and (min-width: 840px) {
    main {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      -webkit-flex-direction: row;
          -ms-flex-direction: row;
              flex-direction: row; } }

#main-content {
  color: #ffffff;
  max-width: 900px; }
  #main-content a {
    text-decoration: underline; }
  #main-content h1 {
    font-size: 1.333rem; }
  #main-content h2 {
    font-size: 1rem;
    margin: 0; }
  #main-content h3 {
    font-size: 0.75rem; }
  @media screen and (min-width: 900px) {
    #main-content {
      -webkit-box-flex: 2;
      -webkit-flex-grow: 2;
          -ms-flex-positive: 2;
              flex-grow: 2;
      -webkit-flex-basis: 80%;
          -ms-flex-preferred-size: 80%;
              flex-basis: 80%;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -webkit-flex-direction: column;
          -ms-flex-direction: column;
              flex-direction: column; } }
  #main-content p,
  #main-content blockquote {
    margin-left: 0;
    margin-right: 0; }
    #main-content p span,
    #main-content blockquote span {
      float: left;
      padding-right: 2%; }
    #main-content p img,
    #main-content blockquote img {
      max-width: 100%; }

#comic-image {
  text-align: center;
  z-index: 1;
  position: relative; }
  #comic-image img {
	  box-sizing:border-box;
    max-width: 830px;
    width: 100%;
    border: 15px solid #000; }

.top, .bottom {
  max-width: 820px;
  position: relative;
  z-index: 10;
  display: block;
margin:1vh;  }



.cc-nav{
		width:450px;
		height:61px;
	margin: 0 auto;
	justify-content: left;
}
.cc-nav a{
		width:100px;
		height:61px;
	background-size:100% 200%;
	display:block;

	float:left;
}
.cc-nav a:hover{
	background-position:0% -100%;
}
.cc-first{
	background-image:url('../img/first.png');
}
.cc-prev{
	background-image:url('../img/leftarrow.png');
}
.cc-next{
	background-image:url('../img/rightarrow.png');
	margin-left:50px;
}
.cc-last{
	background-image:url('../img/last.png');
}
@media screen and (max-width:1100px){
	.cc-nav{
		width:600px;
		height:92px;
	}
	.cc-nav a{
		width:150px;
		height:92px;
	}
	.cc-next{
		margin-left:0px;
	}
}
@media screen and (max-width:650px){
		.cc-nav{
			width:500px;
			height:77px;
		}
		.cc-nav a{
			width:125px;
			height:77px;
		}
}
@media screen and (max-width:560px){
	.cc-nav{
		width:400px;
		height:61px;
	}
	.cc-nav a{
		width:100px;
		height:61px;
	}
}
@media screen and (max-width:460px){
	.cc-nav{
		width:360px;
		height:55px;
	}
	.cc-nav a{
		width:90px;
		height:55px;
	}
}

#sidebar {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-basis: 25%;
      -ms-flex-preferred-size: 25%;
          flex-basis: 25%;
  min-width: 190px; }
  @media screen and (min-width: 1000px) {
    #sidebar {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -webkit-flex-direction: column;
          -ms-flex-direction: column;
              flex-direction: column; } }
  #sidebar ul {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
        -ms-flex-align: flex-start;
            align-items: flex-start;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    padding: 0;
    margin: 7.5vh 0 0 0; }
    @media screen and (min-width: 920px) {
      #sidebar ul {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
            -ms-flex-direction: column;
                flex-direction: column; } }

#sidebar ul li {
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding-top: 3vh;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 0 auto;
  max-width: 190px; }
  #sidebar ul li.skyscraper {
    display: none; }
    @media screen and (min-width: 920px) {
      #sidebar ul li.skyscraper {
        display: block; } }
    #sidebar ul li.skyscraper div {
      border: 15px solid #000;
      background-color: #000; }

.update-bat {
  max-width: 156px; }

.patreon-coin {
  max-width: 125px; }

.social-icons {
  -webkit-box-ordinal-group: 11;
  -webkit-order: 10;
      -ms-flex-order: 10;
          order: 10;
  width: 80%; }
  .social-icons img {
    width: 100%; }
  @media screen and (min-width: 900px) {
    .social-icons {
      -webkit-box-ordinal-group: 1;
      -webkit-order: 0;
          -ms-flex-order: 0;
              order: 0;
      width: 75%; } }

#ibar {
  background-color: #000;
  width: 100%;
  max-width:1080px;
  margin: 0 auto;
  padding: 0.75% 0.25% 0.25%; }
  #ibar #pixiestripbutton {
    text-align: center; }

footer .oozeborder {
  background-image: url("../img/ooze.svg");
  background-repeat: repeat-x;
  background-size: 60% auto;
  height: 30vh;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%; }

footer {
  z-index: 70;
  padding-bottom: 5vh;
  position: relative; }
  footer article {
    background-color: #dfdfe4;
    width: 90%;
    margin: 0 auto;
    padding: 10vh 0;
    border-bottom-right-radius: 30px;
    border-bottom-left-radius: 30px; }
    @media screen and (min-width: 1100px) {
	#headercontain{
		width:1100px;
	}
	#midcontentcontain{
		width:1100px;
	}
      footer article {
		max-width: 1200px; } }
  footer section {
	  padding:3vh;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column; }
    @media screen and (min-width: 10px) {
      footer section > div {
        padding: 0; } }
    @media screen and (min-width: 1100px) {
      footer section {
		  position:relative;
		  z-index:10;
        padding-top: 2vh;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-direction: row;
            -ms-flex-direction: row;
                flex-direction: row; } }

#footer-right {
  -webkit-box-ordinal-group: 2;
  -webkit-order: 1;
      -ms-flex-order: 1;
          order: 1;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column; }
  @media screen and (min-width: 1px) and (max-width: 400px) {
    #footer-right {
      overflow: hidden; } }
  @media screen and (min-width: 700px) {
    #footer-right {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      -webkit-flex-direction: row;
          -ms-flex-direction: row;
              flex-direction: row;
      padding-top: 3vh; } }
  @media screen and (min-width: 1100px) {
    #footer-right {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -webkit-flex-direction: column;
          -ms-flex-direction: column;
              flex-direction: column;
      -webkit-box-ordinal-group: 2;
      -webkit-order: 1;
          -ms-flex-order: 1;
              order: 1;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex; } }

@media screen and (min-width: 375px) and (max-width: 700px) {
  #footer-right div {
    margin-top: 3vh; } }
@media screen and (min-width: 1100px) {
  #footer-right div {
    margin-top: 3vh; } }

#footer-left img{
	max-width:100%;
	height:auto;
}
#footer-left {
  -webkit-box-ordinal-group: 3;
  -webkit-order: 2;
      -ms-flex-order: 2;
          order: 2;
  padding: 0 0 0 2vw; }
  @media screen and (min-width: 1100px) {

    #footer-left {
		
	width:75%;
      -webkit-box-ordinal-group: 1;
      -webkit-order: 0;
          -ms-flex-order: 0;
              order: 0; } }
  #footer-left h1 {
    font-size: 1.777rem; }
  #footer-left h2 {
    font-size: 1.333rem; }
  #footer-left h3 {
    font-size: 0.75rem; }
	  @media screen and (max-width:1100px) {
		  #footer-left{
		  padding-top:2vh;}
	  }

.chapters {
	box-sizing:border-box;
  max-width: 480px;
  text-align: center;
  width: 100%;
  padding: 0 3vw;
  -webkit-align-self: center;
      -ms-flex-item-align: center;
          align-self: center; }
  .chapters ul {
    padding-left: 2vw;
    text-align: center;
    margin: 0; }
    @media screen and (min-width: 1000px) {
      .chapters ul {
        text-align: left;
        padding-left: 3vw; } }
		.chapters li:before {
      color: #7FAB80;
  content: "\2605";
  margin-right:10px;
}
  .chapters li {
    font-size: 1.333rem;
    font-weight: bold; }
    @media screen and (min-width: 400px) {
      .chapters li {
        font-size: 1.777rem; } }
    @media screen and (min-width: 700px) {
      .chapters li {
        font-size: 2.25vw; } }
    @media screen and (min-width: 1100px) {
      .chapters li {
        font-size: 1.1em; } }

.rectangle {
	box-sizing:border-box;
  min-width: 330px;
  margin: 0 auto;
  text-align:center;
  border: 15px solid black;
  display: block; }
  @media screen and (min-width: 700px) {
    .rectangle {
      margin-left: 2vw;
    min-width: 330px;
    height: 280px;
    width: 330px; } }

#jumptocomicprev::before {
  content: '&#x2660';
  color: red; }

  #hw-privacy{
    text-align:center;
    padding: 15px;
  }
  #hw-privacy a{
    color:#dfdfe4;
  }
  #hw-jumpbar{
    position:relative;
    z-index:70
  }