@font-face {

  font-family: "Jost";

  src: url("fonts/Jost-Bold.eot?#iefix") format("embedded-opentype"),

    url("fonts/Jost-Bold.otf") format("opentype"),

    url("fonts/Jost-Bold.woff") format("woff"),

    url("fonts/Jost-Bold.ttf") format("truetype"),

    url("fonts/Jost-Bold.svg#Jost-Bold") format("svg");

  font-weight: bold;

  font-style: normal;

}

@font-face {

  font-family: "Jost";

  src: url("fonts/Jost-BoldItalic.eot?#iefix") format("embedded-opentype"),

    url("fonts/Jost-BoldItalic.otf") format("opentype"),

    url("fonts/Jost-BoldItalic.woff") format("woff"),

    url("fonts/Jost-BoldItalic.ttf") format("truetype"),

    url("fonts/Jost-BoldItalic.svg#Jost-BoldItalic") format("svg");

  font-weight: bold;

  font-style: italic;

}

@font-face {

  font-family: "Jost";

  src: url("fonts/Jost-Book.eot?#iefix") format("embedded-opentype"),

    url("fonts/Jost-Book.otf") format("opentype"),

    url("fonts/Jost-Book.woff") format("woff"),

    url("fonts/Jost-Book.ttf") format("truetype"),

    url("fonts/Jost-Book.svg#Jost-Book") format("svg");

  font-weight: normal;

  font-style: normal;

}

@font-face {

  font-family: "Jost";

  src: url("fonts/Jost-BookItalic.eot?#iefix") format("embedded-opentype"),

    url("fonts/Jost-BookItalic.otf") format("opentype"),

    url("fonts/Jost-BookItalic.woff") format("woff"),

    url("fonts/Jost-BookItalic.ttf") format("truetype"),

    url("fonts/Jost-BookItalic.svg#Jost-BookItalic") format("svg");

  font-weight: normal;

  font-style: italic;

}



body,

html {

  margin: 0;

  padding: 0;

}

body {

  font-family: "Jost", sans-serif;

}

#wrapper {

  max-width: 1100px;

  margin: 0 auto;

  width: 100%;

  padding: 30px 20px;

  box-sizing: border-box;

}

img {

  max-width: 100%;

}



.pt {

  background: url("images/bg-pixietrix.png");

}

.sdb {

  background-color: #163e4f;

  background-image: url("images/bg-stickydillybuns-gradient.png");

  background-repeat: repeat-x;

}

.sdb #bg-repeat {

  background-image: url("images/bg-stickydillybuns-repeat.png");

  background-position: 0 170px;

  background-repeat: repeat-x;

}

.sotr {

  background-color: #5db6f1;

  background-image: url("images/bg-sandraontherocks-tile.png");

  background-repeat: repeat-x;

}

.sotr #bg-repeat {

  background-image: url("images/bg-sandraontherocks-repeat.png");

  background-position: 0 900px;

  background-repeat: repeat-x;

}

.ma3 {

  background-image: url("images/bg-menagea3-gradient.png");

  background-repeat: repeat-x;

  background-color: #7e141e;

}

.ma3 #bg-repeat {

  background-image: url("images/bg-menagea3-repeat.png");

}

.pa {

  background: url("images/bg-pennyandaggie.png") #78a5a4;

}

.mc {

  background: url("images/bg-magickchicks-gradient.png") repeat-x #f2abe7;

}

.mc #bg-repeat {

  background-image: url("images/bg-magickchicks-repeat.png");

}

.ec {

  background: url("images/bg-eeriecuties-repeat.png") repeat-x #010a0d;

}

.dc {

  background: url("images/bg-dangerouslychloe.png");

}

.ccs {

  background: url("images/bg-coolcatstudio.png") #39407a;

}



#top-wrap {

  padding: 30px;

}

.pt #top-wrap {

  background: #2d2d34;

}

.pt a {

  color: #2d2d34;

}

.sdb #top-wrap {

  background: #102f3b;

}

.sdb a {

  color: #102f3b;

}

.sotr #top-wrap {

  background: #3c759c;

}

.sotr a {

  color: #3c759c;

}

.pa #top-wrap {

  background: #537d7d;

}

.pa a {

  color: #537d7d;

}

.ma3 #top-wrap {

  background: #7e141e;

}

.ma3 a {

  color: #7e141e;

}

.mc #top-wrap {

  background: #c05f8c;

}

.mc a {

  color: #c05f8c;

}

.ec #top-wrap {

  background: #064247;

}

.ec a {

  color: #064247;

}

.dc #top-wrap {

  background: #7d0005;

}

.dc a {

  color: #7d0005;

}

.ccs #top-wrap {

  background: #2f3565;

}

.ccs a {

  color: #2f3565;

}



#header {

  display: flex;

  align-items: center;

}

#top-space {

  width: 728px;

  height: 90px;

  background: #ccc;

  flex-shrink: 0;

  flex-grow: 0;

}

#logo {

  width: 45%;

  box-sizing: border-box;

  padding-right: 20px;

  border-right: 1px solid #fff;

  max-width: 200px;

}

#top-links {

  width: 55%;

  padding: 0 20px;

  box-sizing: border-box;

  text-align: center;

  max-width: 200px;

}

#top-links a {

  color: #fff;

  text-decoration: none;

  font-size: 1.3em;

  text-transform: uppercase;

}

#top-links #social a {

  font-size: 3em;

  margin-right: 15px;

}

#top-links #social a:last-child {

  margin: 0;

}



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

  #header {

    flex-wrap: wrap;

    justify-content: center;

  }

  #top-space {

    margin-top: 20px;

  }

  #top-links {

    padding-right: 0;

  }

}

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

  #wrapper {

    padding: 0;

  }

}

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

  #header {

    padding: 20px 20px 0 20px;

  }

  #top-wrap {

    padding: 0;

  }

  #top-space {

    width: 300px;

    height: 50px;

    margin-top: 0;

  }

}

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

  #top-space {

    margin-top: 20px;

  }

}



#comic-changer {

  padding: 20px 0;

  display: flex;

}

.comic-dropdown {

  display: none;

  position: absolute;

  background: #fff;

  text-transform: uppercase;

  width: 100%;

  border-bottom: 10px solid #d5de23;

  z-index: 10;

}

.comic-option img {

  vertical-align: bottom;

  opacity: 0.7;

  cursor: pointer;

}

.comic-option {

  display: block;

  position: relative;

}

.comic-option:hover img {

  opacity: 1;

}

.comic-dropdown a {

  color: #333333;

  text-decoration: none;

  display: block;

  padding: 10px;

  font-size: 1.2em;

}

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

  .comic-option {

    width: 25%;

  }

  #comic-changer {

    flex-wrap: wrap;

  }

}

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

  .comic-dropdown a {

    font-size: 1em;

  }

}



#middle {

  display: flex;

  justify-content: space-between;

}

#middle-right {

  order: 1;

  width: 160px;

  flex-shrink: 0;

  flex-grow: 0;

  margin-left: 20px;

}

#right-space {

  width: 160px;

  height: 600px;

  background: #ccc;

}

#store {

  display: block;

  padding: 20px 0;

}

#store-mobile {

  display: none;

}

#hiveworks {

  display: block;

}

.cc-nav {

  display: flex;

  max-width: 600px;

  margin: 0 auto;

  justify-content: space-evenly;

  padding: 20px;

}

.cc-nav a,

.cc-nav div {

  color: #fff;

  text-decoration: none;

  font-size: 1.5em;

}

.cc-nav div {

  opacity: 0.6;

}

#middle-left {

  width: 100%;

  text-align: center;

}

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

  #hiveworks {

    padding-top: 20px;

  }

}

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

  #middle {

    flex-wrap: wrap;

    padding-bottom: 0;

  }

  #middle-right {

    width: 100%;

    margin: 0;

    text-align: center;

    padding: 0;

  }

  #right-space {

    display: none;

  }

  #hiveworks {

    display: none;

  }

  #store {

    padding: 0;

  }

  #store-desktop {

    display: none;

  }

  #store-mobile {

    display: block;

  }

}

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

  .cc-nav a,

  .cc-nav div {

    font-size: 1.2em;

  }

}

#team-wrap {

  padding: 20px;

  color: #fff;

}

#team-top {

  text-align: center;

}

#team-top:before,

#team-top:after {

  display: inline-block;

  content: "";

  border-top: 1px solid #fff;

  width: calc((100% - 200px) / 2);

  margin: 0;

  height: 5px;

}

#team-members {

  display: flex;

  justify-content: center;

  flex-wrap: wrap;

}

.member {

  width: 200px;

  margin: 10px;

}

.member-info {

  display: flex;

}

.member-info a {

  color: #fff;

  margin-right: 10px;

}

#ibar {

  padding: 0 20px 20px 20px;

}

.pa #team-wrap,

.pa #ibar {

  background: #537d7d;

}

.pt #team-wrap {

  color: #000;

}

.pt .member-info a {

  color: #000;

}

.sdb #team-top:before,

.sdb #team-top:after {

  border-top: 1px solid #000;

}



#bottom-wrap,

#textarea {

  background: #fff;

  padding: 30px;

}

.cc-newsheader {

  font-weight: bold;

  font-size: 2em;

}

#bottom-flex {

  width: 620px;

  margin: 0 auto;

  display: flex;

  justify-content: space-between;

}

#tweets,

#bottom-right {

  width: 300px;

}

#bottom-space {

  width: 300px;

  height: 250px;

  background: #ccc;

}

#recommended h1 {

  font-size: 1.5em;

}

#recommended a {

  color: #000;

  text-decoration: none;

}
#privacy{
  padding:0 0 20px 0;
  text-align:center;
}

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

  #bottom-flex {

    width: 300px;

    margin: 0 auto;

    flex-wrap: wrap;

    justify-content: center;

  }

}