/* fonts */
@font-face {
  font-family: "Metropolis";
  src: url("fonts/Metropolis-Black.eot?#iefix") format("embedded-opentype"),
    url("fonts/Metropolis-Black.otf") format("opentype"),
    url("fonts/Metropolis-Black.woff") format("woff"),
    url("fonts/Metropolis-Black.ttf") format("truetype"),
    url("fonts/Metropolis-Black.svg#Metropolis-Black") format("svg");
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: "Metropolis";
  src: url("fonts/Metropolis-BlackItalic.eot?#iefix")
      format("embedded-opentype"),
    url("fonts/Metropolis-BlackItalic.otf") format("opentype"),
    url("fonts/Metropolis-BlackItalic.woff") format("woff"),
    url("fonts/Metropolis-BlackItalic.ttf") format("truetype"),
    url("fonts/Metropolis-BlackItalic.svg#Metropolis-BlackItalic") format("svg");
  font-weight: 900;
  font-style: italic;
}

@font-face {
  font-family: "Metropolis";
  src: url("fonts/Metropolis-Bold.eot?#iefix") format("embedded-opentype"),
    url("fonts/Metropolis-Bold.otf") format("opentype"),
    url("fonts/Metropolis-Bold.woff") format("woff"),
    url("fonts/Metropolis-Bold.ttf") format("truetype"),
    url("fonts/Metropolis-Bold.svg#Metropolis-Bold") format("svg");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "Metropolis";
  src: url("fonts/Metropolis-BoldItalic.eot?#iefix") format("embedded-opentype"),
    url("fonts/Metropolis-BoldItalic.otf") format("opentype"),
    url("fonts/Metropolis-BoldItalic.woff") format("woff"),
    url("fonts/Metropolis-BoldItalic.ttf") format("truetype"),
    url("fonts/Metropolis-BoldItalic.svg#Metropolis-BoldItalic") format("svg");
  font-weight: bold;
  font-style: italic;
}

@font-face {
  font-family: "Metropolis";
  src: url("fonts/Metropolis-Regular.eot?#iefix") format("embedded-opentype"),
    url("fonts/Metropolis-Regular.otf") format("opentype"),
    url("fonts/Metropolis-Regular.woff") format("woff"),
    url("fonts/Metropolis-Regular.ttf") format("truetype"),
    url("fonts/Metropolis-Regular.svg#Metropolis-Regular") format("svg");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Metropolis";
  src: url("fonts/Metropolis-RegularItalic.eot?#iefix")
      format("embedded-opentype"),
    url("fonts/Metropolis-RegularItalic.otf") format("opentype"),
    url("fonts/Metropolis-RegularItalic.woff") format("woff"),
    url("fonts/Metropolis-RegularItalic.ttf") format("truetype"),
    url("fonts/Metropolis-RegularItalic.svg#Metropolis-RegularItalic")
      format("svg");
  font-weight: normal;
  font-style: italic;
}

/* page-specific */
/* Small admin pill, fixed to the bottom-right corner: it replaces the
   old full-width preview bar. Shows the view state (Admin view,
   Public view, or Preview with the scheduled date) and the toggle
   link, so the admin can switch views without logging out. */
.cc-adminpill {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #1b3b57;
  color: white;
  font-size: 13px;
  line-height: 1.4;
  padding: 6px 12px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.cc-adminpill a {
  color: #c6e5a3;
  text-decoration: underline;
  white-space: nowrap;
}

/* Multi-image comics: all panels sit in the DOM, stacked in a single
   grid cell, so the browser loads them all up front. Panels rest off
   to the right until seen, and off to the left once passed; the active
   panel sits in place. Switching slides the new panel in from the
   side it comes from (right going forward, left going back) and the
   old one out the other side. The grid sizes to the tallest panel, so
   switching never moves the page. overflow: hidden keeps the sliding
   panels inside the comic box. (Panels are full container width via
   the site's #comic img rule, so a 100% slide clears them fully.) */
.cc-panels {
  display: grid;
  overflow: hidden;
}

.cc-panel {
  grid-area: 1 / 1;
  transform: translateX(100%);
  transition: transform 0.45s ease;
  z-index: 1;
}

.cc-panel.active {
  transform: translateX(0);
  z-index: 2;
}

.cc-panel.before {
  transform: translateX(-100%);
}

.cc-carousel-nav {
  text-align: center;
  padding-top: 10px;
}

/* No looping: at the first panel there is no Prev, at the last panel
   there is no Next. */
.cc-carousel-nav.at-start #carousel-prev,
.cc-carousel-nav.at-end #carousel-next {
  display: none;
}

.cc-fullscreen-overlay {
  display: none;
  background: rgba(0, 0, 0, 0.8);
  text-align: center;
  position: fixed;
  height: 100%;
  width: 100%;
  z-index: 1000;
  top: 0;
  cursor: pointer;
}

.cc-fullscreen-center {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: distribute;
  justify-content: space-around;
}

.cc-fullscreen-overlay img {
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

#cc-comic {
  margin: 0 auto;
  margin-top: 0px;
}

#cc-comicbody {
  position: relative;
}

#cc-transcriptclick {
  padding: 10px;
  border: 1px dashed black;
  text-align: center;
}

.cc-storyline-contain {
  clear: both;
  margin-bottom: 10px;
}

.cc-storyline-thumb {
  float: left;
  margin-bottom: 10px;
}

.cc-storyline-text {
  float: left;
  margin-left: 10px;
  margin-bottom: 10px;
}

.cc-storyline-header {
  font-size: 1.5em;
  font-weight: bold;
  padding-bottom: 10px;
  border-bottom: 1px solid #999;
}

.cc-storyline-caption {
  font-style: italic;
  font-size: 0.9em;
  padding: 10px 0;
}

.cc-thumbcontain {
  float: left;
}

.cc-newsheader {
  font-size: 2em;
  font-weight: bold;
}

.cc-publishtime {
  padding-bottom: 5px;
  font-size: 0.8em;
  padding-top:10px;
}

.cc-newsbody {
  padding: 10px 0px;
}

.cc-transcript {
  padding: 10px 0px;
}

.cc-tagline {
  padding: 5px 0px;
}

.cc-commentlink {
  padding-top: 10px;
}

.cc-commentheader {
  padding-top: 10px;
  font-weight: bold;
  font-size: 2em;
}

.cc-chapterrow {
  font-size: 1.5em;
  font-weight: bold;
  padding: 10px 0px;
  border-bottom: 1px solid #000;
}

.cc-chapterrow a {
  text-decoration: none;
}

.cc-searchheader {
  font-size: 2em;
  padding-bottom: 10px;
  font-weight: bold;
}

.cc-searchbox {
  width: 200px;
  padding: 10px;
  float: left;
}

.cc-searchbox a {
  text-decoration: none;
}

.cc-searchcomicname {
  text-align: center;
  font-weight: bold;
  padding-bottom: 5px;
}

.cc-searchcomicimgbox {
  text-align: center;
  height: 200px;
}

.cc-searchcomicimgbox img {
  max-width: 200px;
  max-height: 200px;
  width: auto;
  height: auto;
}

.cc-searchprevnext {
  padding: 5px 0px;
  text-align: center;
  width: 100%;
  font-size: 16px;
}

.cc-searchpages {
  padding: 5px 0px;
  text-align: center;
  width: 100%;
  font-size: 16px;
}

.cc-blogtitle {
  font-size: 2em;
  font-weight: bold;
}

.cc-blogpublishtime {
  padding-bottom: 5px;
  font-size: 0.8em;
}

.cc-blogcontent {
  padding: 10px 0px;
}

.cc-transcript {
  padding: 10px 0px;
}

.cc-tagline {
  padding: 5px 0px;
}

.cc-blogcommentlink {
  padding-top: 10px;
}

.cc-blogcommentheader {
  padding-top: 10px;
  font-weight: bold;
  font-size: 2em;
}

.cc-postdivider {
  clear: both;
  height: 20px;
}

.cc-blogprevnext {
  padding: 5px 0px;
  text-align: center;
  width: 100%;
  font-size: 1.5em;
}

.cc-blogpages {
  padding: 5px 0px;
  text-align: center;
  width: 100%;
  font-size: 1.5em;
}

.cc-searchblogtitle {
  padding: 10px;
  border-bottom: 1px solid #000;
}

#contentwarningimg {
  background: #fff;
  top: 10px;
  left: 160px;
  position: absolute;
  width: 400px;
  padding: 15px;
  font-weight: bold;
  font-size: 1.5em;
  text-align: center;
}

#cc-comicbody {
  position: relative;
}

#cc-hoverdiv {
  position: absolute;
  width: 74%;
  padding: 3%;
  background: #fff;
  color: #000;
  z-index: 1001;
  font-size: 1.5em;
  border-radius: 10px;
}

.cc-storyline-pagetitles {
  margin-top: 10px;
  clear: both;
}

.cc-gallery,
.cc-storyline-thumbwrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  clear: both;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.cc-gallery a,
.cc-storyline-pagethumb {
  margin: 10px;
  padding: 5px;
}

.cc-gallery a img,
.cc-storyline-pagethumb a img {
  width: 120px;
  max-height: 200px;
  -o-object-fit: contain;
  object-fit: contain;
}

.customHtml {
  font-size: 1em;
}

.customHtml a {
  color: #fff;
}

.cc-showbig {
  list-style: none outside none;
  padding: 0;
  margin: 0;
}

.cc-showbig li {
  display: block;
}

.cc-showbig li a {
  cursor: pointer;
}

.cc-blur {
  -webkit-filter: blur(20px);
  -moz-filter: blur(20px);
  -o-filter: blur(20px);
  -ms-filter: blur(20px);
  filter: blur(20px);
}

.cc-contentwarning {
  position: absolute;
  width: 70%;
  padding: 15px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
  left: 15%;
  font-weight: bold;
  background: white;
  z-index: 20;
  top: 50px;
}