/*   
Theme Name: Black Tea
Theme URI: http://blackteacomics.com
Description: Comics theme
Author: Rembrand Le Compte
Author URI: http://rembo.me
Version: 1
*/
/*==========================================================

    imports for all mixins + global project variables

==========================================================*/
/* fonts
==========================================================*/
/* colors
==========================================================*/
/* usefull snippets
==========================================================*/
/* typgraphy
==========================================================*/
/* animations
==========================================================*/
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg); } }
@-moz-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg); } }
@-ms-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg); } }
@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg); } }
/* set breakpoints
==========================================================*/
@media screen {
  /*==========================================================
  
    Basic reset of html-elements & and styling typography
  
  ==========================================================*/
  /*! normalize.css 2011-11-04T15:38 UTC - http://github.com/necolas/normalize.css */
  /* HTML5 display definitions
  ========================================================== */
  /*
   * Corrects block display not defined in IE6/7/8/9 & FF3
   */
  article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
    display: block; }

  /*
   * Corrects inline-block display not defined in IE6/7/8/9 & FF3
   */
  audio, canvas, video {
    display: inline-block;
    *display: inline;
    *zoom: 1; }

  /*
   * Prevents modern browsers from displaying 'audio' without controls
   */
  audio:not([controls]) {
    display: none; }

  /*
   * Addresses styling for 'hidden' attribute not present in IE7/8/9, FF3, S4
   * Known issue: no IE6 support
   */
  [hidden] {
    display: none; }

  /* Base
  ========================================================== */
  /*
   * 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units
   *    http://clagnut.com/blog/348/#c790
   * 2. Keeps page centered in all browsers regardless of content height
   * 3. Prevents iOS text size adjust after orientation change, without disabling user zoom
   *    www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/
   */
  html {
    overflow-y: scroll;
    /* 2 */
    height: 100%;
    font-size: 62.5%;
    /* Sets up Base 10 font sizing */
    font-family: "Ubuntu", sans-serif;
    font-weight: 400;
    -webkit-text-size-adjust: 100%;
    /* 3 */
    -ms-text-size-adjust: 100%;
    /* 3 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility; }

  /*
   * Addresses margins handled incorrectly in IE6/7
   */
  body {
    margin: 0;
    height: 100%;
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 1.3125;
    color: #000; }

  /* 
   * Addresses font-family inconsistency between 'textarea' and other form elements.
   */
  form,
  button,
  input,
  select,
  textarea {
    font-family: inherit;
    font-size: inherit; }

  /* Sprites
  ========================================================== */
  .icon,
  .has-icon:before,
  .has-icon:after,
  nav.primary a:after,
  nav.comics a,
  nav.comics span {
    background: url("/wp-content/themes/blacktea/img/sprite.png") 0 0 no-repeat; }

  /* Pixel ratio of 2. */ }
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
  .icon,
  .has-icon:before,
  .has-icon:after,
  nav.primary a:after,
  nav.comics a,
  nav.comics span {
    background-image: url("/wp-content/themes/blacktea/img/sprite@2x.png");
    background-size: 380px 370px; } }
@media screen {
  .icon,
  .has-icon:before,
  .has-icon:after {
    display: block; }

  .icon {
    text-align: left;
    text-indent: -9999px;
    direction: ltr;
    overflow: hidden; }

  header.primary,
  .main:after,
  footer.primary {
    background: url("/wp-content/themes/blacktea/img/bg.png") 0 0 no-repeat; }

  /* Pixel ratio of 2. */ }
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
  header.primary,
  .main:after,
  footer.primary {
    background-image: url("/wp-content/themes/blacktea/img/bg@2x.png");
    background-size: 1200px 1074px;
    background-repeat: repeat-x; } }
@media screen {
  /* Common
  ========================================================== */
  .hide {
    position: absolute;
    display: block;
    padding: 0 !important;
    left: -9999px !important;
    height: 0px !important;
    line-height: 0px !important;
    background: none !important; }

  .hidden {
    text-align: left;
    text-indent: -9999px;
    direction: ltr;
    overflow: hidden; }

  /* Clearfix updated to prevent margin-collapsing on child elements << j.mp/bestclearfix */
  .group:before,
  .group:after {
    content: ".";
    display: block;
    height: 0;
    overflow: hidden; }

  .group:after {
    clear: both; }

  .group {
    zoom: 1; }

  /* IE < 8 */
  .clear {
    clear: both; }

  /* Links
  ========================================================== */
  a, a:visited {
    font-weight: 700;
    text-decoration: none;
    color: #cc0000;
    -webkit-transition: color 0.2s;
    -moz-transition: color 0.2s;
    -ms-transition: color 0.2s;
    -o-transition: color 0.2s;
    transition: color 0.2s; }

  /*
   * Addresses outline displayed oddly in Chrome
   */
  a:focus,
  .button input:focus {
    overflow: hidden;
    /* outline only the clickable part */
    outline: thin dotted;
    overflow: visible; }

  /*
   * Improves readability when focused and also mouse hovered in all browsers
   * people.opera.com/patrickl/experiments/keyboard/test
   */
  a:hover, a:active {
    color: #990000;
    outline: 0;
    -moz-outline-style: none; }

  a img {
    border: none; }

  /* Typography
  ========================================================== */
  h1, h2, h3, h4 {
    margin: 0;
    padding: 0; }

  h1, h2 {
    line-height: 1.2;
    font-weight: 700;
    font-style: italic;
    color: #000; }

  h2 {
    margin-bottom: 15px;
    font-size: 24px; }

  h3 {
    margin-bottom: 10px;
    font-size: 21px; }

  h4 {
    margin-bottom: 0;
    font-size: 16px; }

  p {
    margin: 0 0 20px 0; }

  hr {
    display: none; }

  ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
    display: block; }
    ul li, ol li {
      display: block;
      margin: 0;
      padding: 0; }

  dd {
    margin: 0; }

  strong {
    font-weight: 700; }

  /* embedded content
  ========================================================== */
  img {
    border: 0;
    /* 1 */
    -ms-interpolation-mode: bicubic;
    /* 2 */ }

  figure {
    margin: 0; }

  /* RTE
  ========================================================== */
  .intro {
    font-size: 21px;
    font-size: 2.1rem;
    color: #666; }

  .page-title {
    margin-bottom: -36px;
    top: -62px;
    position: relative;
    font-size: 30px;
    font-style: italic;
    font-weight: 700;
    color: #fff; }

  .rte h2 {
    margin-bottom: 15px;
    font-size: 24px;
    font-style: italic;
    font-weight: 700; }
  .rte h3 {
    margin-bottom: 10px;
    font-size: 21px;
    font-style: italic;
    font-weight: 700; }
  .rte h4 {
    margin-bottom: 0;
    font-size: 16px;
    font-weight: 700; }
  .rte img {
    display: block;
    margin-bottom: 10px;
    max-width: 100%;
    height: auto; } }
  @media screen and (min-width: 768px) {
    .rte img.alignleft {
      float: left;
      margin: 0 10px 10px 0; }
    .rte img.alignright {
      float: right;
      margin: 0 0 10px 10px; }
    .rte img.aligncenter {
      display: block;
      margin: 0 auto 10px auto; } }

@media screen {
  /*==========================================================
  
    Forms
  
  ==========================================================*/
  form {
    margin: 0; }

  fieldset {
    border: 0;
    margin: 0;
    padding: 0; }

  button, select, input, textarea {
    font-size: 100%;
    margin: 0;
    vertical-align: baseline;
    *vertical-align: middle; }

  button {
    width: auto; }

  button,
  input[type="button"],
  input[type="reset"],
  input[type="submit"] {
    cursor: pointer;
    -webkit-appearance: none;
    *overflow: visible; }

  input[type="checkbox"],
  input[type="radio"] {
    box-sizing: border-box;
    padding: 0;
    *height: 13px;
    *width: 13px; }

  input[type="radio"] {
    vertical-align: text-bottom; }

  input[type="checkbox"] {
    vertical-align: bottom; }

  button::-moz-focus-inner,
  input::-moz-focus-inner {
    border: 0;
    padding: 0; }

  input:active {
    outline: none;
    -moz-outline-style: none; }

  textarea {
    overflow: auto;
    vertical-align: top; }

  form input[type='number']::-webkit-outer-spin-button,
  form input[type='number']::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0; }

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

  input[type="search"]::-webkit-search-decoration,
  input[type="search"]::-webkit-search-cancel-button,
  input[type="search"]::-webkit-search-results-button,
  input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none; }

  /* buttons & actions
  ---------------------------------------------------------- */
  .btn {
    display: inline-block;
    margin: 0;
    padding: 0 10px;
    height: 40px;
    line-height: 40px;
    font-weight: 700;
    font-size: 21px;
    border: 0 none;
    overflow: visible;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease; }

  .btn-primary, .btn-primary:visited {
    color: #fff;
    background-color: #cc0000; }
  .btn-primary:hover, .btn-primary:active {
    color: #fff;
    background-color: #990000; }

  .btn-secondary, .btn-secondary:visited {
    color: #fff;
    background-color: #999; }
  .btn-secondary:hover, .btn-secondary:active {
    color: #fff;
    background-color: gray; }

  .btn-sm {
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    font-size: 1.6rem;
    font-style: normal; }

  .actions {
    margin-left: -10px; }
    .actions .btn {
      margin-left: 10px; }

  /* Form structure & fields
  ---------------------------------------------------------- */
  label {
    font-weight: 700;
    display: block;
    color: #999; }

  .form-item {
    margin-bottom: 10px; }

  .wpcf7-textarea,
  .wpcf7-text {
    height: 30px;
    width: 100%;
    line-height: 1.2;
    padding: 5px 10px;
    border: 1px solid #999;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box; }

  .wpcf7-textarea {
    height: auto;
    min-height: 150px; }

  .wpcf7-submit {
    display: inline-block;
    margin: 0;
    padding: 0 10px;
    height: 40px;
    line-height: 40px;
    font-weight: 700;
    font-size: 21px;
    border: 0 none;
    overflow: visible;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease; }
    .wpcf7-submit, .wpcf7-submit:visited {
      color: #fff;
      background-color: #cc0000; }
    .wpcf7-submit:hover, .wpcf7-submit:active {
      color: #fff;
      background-color: #990000; }

  .wpcf7-form .actions {
    margin-left: 0; }

  /* Form -> focus
  ---------------------------------------------------------- */
  input[type="text"]:focus,
  input[type="email"]:focus,
  textarea:focus {
    outline: 0 none;
    background-color: #ffffcc; }

  /* Form -> other messages
  ---------------------------------------------------------- */
  form div.wpcf7-response-output {
    margin: 0;
    padding: 10px;
    font-style: italic;
    border: 0 none;
    background-color: #efefef; }
  form div.wpcf7-mail-sent-ok {
    color: #fff;
    background-color: #398f14; }

  /* Form -> errors
  ---------------------------------------------------------- */
  .wpcf7-not-valid {
    background-color: #ff3333; }

  form div.wpcf7-validation-errors {
    color: #fff;
    background-color: #cc0000; }

  /*==========================================================
  
      Grid setup
  
  ==========================================================*/
  .container {
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box; }

  /* GRID
  ========================================================== */
  .row {
    position: relative;
    clear: both; }

  .col {
    float: left;
    min-height: 1px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box; }

  .responsive-img img,
  img.responsive {
    display: block;
    max-width: 100%;
    height: auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box; }

  .pull-left {
    float: left; }

  .pull-right {
    float: right; }

  /* ==========================================================
      Media Queries
  ========================================================== */
  /* BREAKPOINT 1 - smaller than tablet */ }
@media screen and (max-width: 767px) {
  /* show/hide on these devices
  ========================================================== */
  .hidden-xsMax {
    display: none !important; }

  .visible-xsMax {
    display: block !important; }

  .visible-sm {
    display: none !important; }

  .visible-md {
    display: none !important; }

  .visible-lg {
    display: none !important; }

  /* GRID
  ========================================================== */
  .container {
    padding: 0 20px;
    min-width: 320px; }

  .row {
    margin: 0 -10px; }

  .col {
    width: 100%;
    padding: 0 10px; }

  .col-xs-prepend-0 {
    width: auto;
    margin: 0; }

  .col-xs-append-0 {
    width: auto;
    margin: 0; }

  .col-xs-12 {
    width: 100%;
    padding: 0 10px; }

  .col-xs-prepend-12 {
    margin: 0 100%; }

  .col-xs-append-12 {
    margin: 0 100%; }

  .col-xs-11 {
    width: 91.66667%;
    padding: 0 10px; }

  .col-xs-prepend-11 {
    margin: 0 91.66667%; }

  .col-xs-append-11 {
    margin: 0 91.66667%; }

  .col-xs-10 {
    width: 83.33333%;
    padding: 0 10px; }

  .col-xs-prepend-10 {
    margin: 0 83.33333%; }

  .col-xs-append-10 {
    margin: 0 83.33333%; }

  .col-xs-9 {
    width: 75%;
    padding: 0 10px; }

  .col-xs-prepend-9 {
    margin: 0 75%; }

  .col-xs-append-9 {
    margin: 0 75%; }

  .col-xs-8 {
    width: 66.66667%;
    padding: 0 10px; }

  .col-xs-prepend-8 {
    margin: 0 66.66667%; }

  .col-xs-append-8 {
    margin: 0 66.66667%; }

  .col-xs-7 {
    width: 58.33333%;
    padding: 0 10px; }

  .col-xs-prepend-7 {
    margin: 0 58.33333%; }

  .col-xs-append-7 {
    margin: 0 58.33333%; }

  .col-xs-6 {
    width: 50%;
    padding: 0 10px; }

  .col-xs-prepend-6 {
    margin: 0 50%; }

  .col-xs-append-6 {
    margin: 0 50%; }

  .col-xs-5 {
    width: 41.66667%;
    padding: 0 10px; }

  .col-xs-prepend-5 {
    margin: 0 41.66667%; }

  .col-xs-append-5 {
    margin: 0 41.66667%; }

  .col-xs-4 {
    width: 33.33333%;
    padding: 0 10px; }

  .col-xs-prepend-4 {
    margin: 0 33.33333%; }

  .col-xs-append-4 {
    margin: 0 33.33333%; }

  .col-xs-3 {
    width: 25%;
    padding: 0 10px; }

  .col-xs-prepend-3 {
    margin: 0 25%; }

  .col-xs-append-3 {
    margin: 0 25%; }

  .col-xs-2 {
    width: 16.66667%;
    padding: 0 10px; }

  .col-xs-prepend-2 {
    margin: 0 16.66667%; }

  .col-xs-append-2 {
    margin: 0 16.66667%; }

  .col-xs-1 {
    width: 8.33333%;
    padding: 0 10px; }

  .col-xs-prepend-1 {
    margin: 0 8.33333%; }

  .col-xs-append-1 {
    margin: 0 8.33333%; } }
@media screen {
  /* BREAKPOINT 3 - TABLET */ }
@media screen and (min-width: 768px) {
  /* GRID
  ========================================================== */
  .container {
    padding: 0 10px; }

  .row {
    margin: 0 -10px; }

  .col {
    padding: 0 10px; }

  .col-sm-12 {
    width: 100%; }

  .prepend-sm-12 {
    margin-left: 100%; }

  .append-sm-12 {
    margin-right: 100%; }

  .pull-left-12 {
    margin-left: -100%; }

  .pull-right-12 {
    margin-right: -100%; }

  .col-sm-11 {
    width: 91.66667%; }

  .prepend-sm-11 {
    margin-left: 91.66667%; }

  .append-sm-11 {
    margin-right: 91.66667%; }

  .pull-left-11 {
    margin-left: -91.66667%; }

  .pull-right-11 {
    margin-right: -91.66667%; }

  .col-sm-10 {
    width: 83.33333%; }

  .prepend-sm-10 {
    margin-left: 83.33333%; }

  .append-sm-10 {
    margin-right: 83.33333%; }

  .pull-left-10 {
    margin-left: -83.33333%; }

  .pull-right-10 {
    margin-right: -83.33333%; }

  .col-sm-9 {
    width: 75%; }

  .prepend-sm-9 {
    margin-left: 75%; }

  .append-sm-9 {
    margin-right: 75%; }

  .pull-left-9 {
    margin-left: -75%; }

  .pull-right-9 {
    margin-right: -75%; }

  .col-sm-8 {
    width: 66.66667%; }

  .prepend-sm-8 {
    margin-left: 66.66667%; }

  .append-sm-8 {
    margin-right: 66.66667%; }

  .pull-left-8 {
    margin-left: -66.66667%; }

  .pull-right-8 {
    margin-right: -66.66667%; }

  .col-sm-7 {
    width: 58.33333%; }

  .prepend-sm-7 {
    margin-left: 58.33333%; }

  .append-sm-7 {
    margin-right: 58.33333%; }

  .pull-left-7 {
    margin-left: -58.33333%; }

  .pull-right-7 {
    margin-right: -58.33333%; }

  .col-sm-6 {
    width: 50%; }

  .prepend-sm-6 {
    margin-left: 50%; }

  .append-sm-6 {
    margin-right: 50%; }

  .pull-left-6 {
    margin-left: -50%; }

  .pull-right-6 {
    margin-right: -50%; }

  .col-sm-5 {
    width: 41.66667%; }

  .prepend-sm-5 {
    margin-left: 41.66667%; }

  .append-sm-5 {
    margin-right: 41.66667%; }

  .pull-left-5 {
    margin-left: -41.66667%; }

  .pull-right-5 {
    margin-right: -41.66667%; }

  .col-sm-4 {
    width: 33.33333%; }

  .prepend-sm-4 {
    margin-left: 33.33333%; }

  .append-sm-4 {
    margin-right: 33.33333%; }

  .pull-left-4 {
    margin-left: -33.33333%; }

  .pull-right-4 {
    margin-right: -33.33333%; }

  .col-sm-3 {
    width: 25%; }

  .prepend-sm-3 {
    margin-left: 25%; }

  .append-sm-3 {
    margin-right: 25%; }

  .pull-left-3 {
    margin-left: -25%; }

  .pull-right-3 {
    margin-right: -25%; }

  .col-sm-2 {
    width: 16.66667%; }

  .prepend-sm-2 {
    margin-left: 16.66667%; }

  .append-sm-2 {
    margin-right: 16.66667%; }

  .pull-left-2 {
    margin-left: -16.66667%; }

  .pull-right-2 {
    margin-right: -16.66667%; }

  .col-sm-1 {
    width: 8.33333%; }

  .prepend-sm-1 {
    margin-left: 8.33333%; }

  .append-sm-1 {
    margin-right: 8.33333%; }

  .pull-left-1 {
    margin-left: -8.33333%; }

  .pull-right-1 {
    margin-right: -8.33333%; } }
@media screen {
  /* BREAKPOINT 4 - TABLET SPECIFIC GRID */ }
@media screen and (min-width: 768px) and (max-width: 939px) {
  /* show/hide only on these devices
  ========================================================== */
  .visible-xsMax {
    display: none !important; }

  .hidden-sm {
    display: none !important; }

  .visible-sm {
    display: block !important; }

  .visible-md {
    display: none !important; }

  .visible-lg {
    display: none !important; } }
@media screen {
  /* BREAKPOINT 5 - DESKTOP (NORMAL) */ }
@media screen and (min-width: 940px) {
  /* show/hide for these devices
  ========================================================== */
  .visible-xsMax {
    display: none !important; }

  .visible-sm {
    display: none !important; }

  .hidden-md {
    display: none  !important; }

  .visible-md {
    display: block  !important; }

  .visible-lg {
    display: none  !important; }

  .container {
    position: relative;
    margin: 0 auto;
    padding: 0 20px;
    max-width: 940px; }

  .col-md-12 {
    width: 100%; }

  .prepend-md-12 {
    margin-left: 100%; }

  .append-md-12 {
    margin-right: 100%; }

  .pull-left-12 {
    margin-left: -100%; }

  .pull-right-12 {
    margin-right: -100%; }

  .col-md-11 {
    width: 91.66667%; }

  .prepend-md-11 {
    margin-left: 91.66667%; }

  .append-md-11 {
    margin-right: 91.66667%; }

  .pull-left-11 {
    margin-left: -91.66667%; }

  .pull-right-11 {
    margin-right: -91.66667%; }

  .col-md-10 {
    width: 83.33333%; }

  .prepend-md-10 {
    margin-left: 83.33333%; }

  .append-md-10 {
    margin-right: 83.33333%; }

  .pull-left-10 {
    margin-left: -83.33333%; }

  .pull-right-10 {
    margin-right: -83.33333%; }

  .col-md-9 {
    width: 75%; }

  .prepend-md-9 {
    margin-left: 75%; }

  .append-md-9 {
    margin-right: 75%; }

  .pull-left-9 {
    margin-left: -75%; }

  .pull-right-9 {
    margin-right: -75%; }

  .col-md-8 {
    width: 66.66667%; }

  .prepend-md-8 {
    margin-left: 66.66667%; }

  .append-md-8 {
    margin-right: 66.66667%; }

  .pull-left-8 {
    margin-left: -66.66667%; }

  .pull-right-8 {
    margin-right: -66.66667%; }

  .col-md-7 {
    width: 58.33333%; }

  .prepend-md-7 {
    margin-left: 58.33333%; }

  .append-md-7 {
    margin-right: 58.33333%; }

  .pull-left-7 {
    margin-left: -58.33333%; }

  .pull-right-7 {
    margin-right: -58.33333%; }

  .col-md-6 {
    width: 50%; }

  .prepend-md-6 {
    margin-left: 50%; }

  .append-md-6 {
    margin-right: 50%; }

  .pull-left-6 {
    margin-left: -50%; }

  .pull-right-6 {
    margin-right: -50%; }

  .col-md-5 {
    width: 41.66667%; }

  .prepend-md-5 {
    margin-left: 41.66667%; }

  .append-md-5 {
    margin-right: 41.66667%; }

  .pull-left-5 {
    margin-left: -41.66667%; }

  .pull-right-5 {
    margin-right: -41.66667%; }

  .col-md-4 {
    width: 33.33333%; }

  .prepend-md-4 {
    margin-left: 33.33333%; }

  .append-md-4 {
    margin-right: 33.33333%; }

  .pull-left-4 {
    margin-left: -33.33333%; }

  .pull-right-4 {
    margin-right: -33.33333%; }

  .col-md-3 {
    width: 25%; }

  .prepend-md-3 {
    margin-left: 25%; }

  .append-md-3 {
    margin-right: 25%; }

  .pull-left-3 {
    margin-left: -25%; }

  .pull-right-3 {
    margin-right: -25%; }

  .col-md-2 {
    width: 16.66667%; }

  .prepend-md-2 {
    margin-left: 16.66667%; }

  .append-md-2 {
    margin-right: 16.66667%; }

  .pull-left-2 {
    margin-left: -16.66667%; }

  .pull-right-2 {
    margin-right: -16.66667%; }

  .col-md-1 {
    width: 8.33333%; }

  .prepend-md-1 {
    margin-left: 8.33333%; }

  .append-md-1 {
    margin-right: 8.33333%; }

  .pull-left-1 {
    margin-left: -8.33333%; }

  .pull-right-1 {
    margin-right: -8.33333%; } }
@media screen {
  /* BREAKPOINT 6 - DESKTOP SPECIFIC (NORMAL) */ }
@media screen and (min-width: 940px) and (max-width: 1199px) {
  .col-md-prepend-0 {
    width: auto;
    margin-left: 0; }

  .col-md-append-0 {
    width: auto;
    margin-right: 0; } }
@media screen {
  /* BREAKPOINT 7 - DESKTOP (WIDE) */ }
@media screen and (min-width: 1200px) {
  .visible-xsMax {
    display: none !important; }

  .visible-sm {
    display: none !important; }

  .visible-md {
    display: none  !important; }

  .hidden-lg {
    display: block  !important; }

  .visible-lg {
    display: none  !important; }

  /* GRID
  ========================================================== */
  /* flexible width columns */
  .col-lg-prepend-0 {
    width: auto;
    margin-left: 0; }

  .col-lg-append-0 {
    width: auto;
    margin-right: 0; }

  .col-lg-12 {
    width: 100%;
    padding-left: 10px; }

  .col-lg-prepend-12 {
    margin-left: 100%; }

  .col-lg-append-12 {
    margin-right: 100%; }

  .col-lg-pull-left-12 {
    margin-left: -100%; }

  .col-lg-pull-right-12 {
    margin-right: -100%; }

  .col-lg-11 {
    width: 91.66667%;
    padding-left: 10px; }

  .col-lg-prepend-11 {
    margin-left: 91.66667%; }

  .col-lg-append-11 {
    margin-right: 91.66667%; }

  .col-lg-pull-left-11 {
    margin-left: -91.66667%; }

  .col-lg-pull-right-11 {
    margin-right: -91.66667%; }

  .col-lg-10 {
    width: 83.33333%;
    padding-left: 10px; }

  .col-lg-prepend-10 {
    margin-left: 83.33333%; }

  .col-lg-append-10 {
    margin-right: 83.33333%; }

  .col-lg-pull-left-10 {
    margin-left: -83.33333%; }

  .col-lg-pull-right-10 {
    margin-right: -83.33333%; }

  .col-lg-9 {
    width: 75%;
    padding-left: 10px; }

  .col-lg-prepend-9 {
    margin-left: 75%; }

  .col-lg-append-9 {
    margin-right: 75%; }

  .col-lg-pull-left-9 {
    margin-left: -75%; }

  .col-lg-pull-right-9 {
    margin-right: -75%; }

  .col-lg-8 {
    width: 66.66667%;
    padding-left: 10px; }

  .col-lg-prepend-8 {
    margin-left: 66.66667%; }

  .col-lg-append-8 {
    margin-right: 66.66667%; }

  .col-lg-pull-left-8 {
    margin-left: -66.66667%; }

  .col-lg-pull-right-8 {
    margin-right: -66.66667%; }

  .col-lg-7 {
    width: 58.33333%;
    padding-left: 10px; }

  .col-lg-prepend-7 {
    margin-left: 58.33333%; }

  .col-lg-append-7 {
    margin-right: 58.33333%; }

  .col-lg-pull-left-7 {
    margin-left: -58.33333%; }

  .col-lg-pull-right-7 {
    margin-right: -58.33333%; }

  .col-lg-6 {
    width: 50%;
    padding-left: 10px; }

  .col-lg-prepend-6 {
    margin-left: 50%; }

  .col-lg-append-6 {
    margin-right: 50%; }

  .col-lg-pull-left-6 {
    margin-left: -50%; }

  .col-lg-pull-right-6 {
    margin-right: -50%; }

  .col-lg-5 {
    width: 41.66667%;
    padding-left: 10px; }

  .col-lg-prepend-5 {
    margin-left: 41.66667%; }

  .col-lg-append-5 {
    margin-right: 41.66667%; }

  .col-lg-pull-left-5 {
    margin-left: -41.66667%; }

  .col-lg-pull-right-5 {
    margin-right: -41.66667%; }

  .col-lg-4 {
    width: 33.33333%;
    padding-left: 10px; }

  .col-lg-prepend-4 {
    margin-left: 33.33333%; }

  .col-lg-append-4 {
    margin-right: 33.33333%; }

  .col-lg-pull-left-4 {
    margin-left: -33.33333%; }

  .col-lg-pull-right-4 {
    margin-right: -33.33333%; }

  .col-lg-3 {
    width: 25%;
    padding-left: 10px; }

  .col-lg-prepend-3 {
    margin-left: 25%; }

  .col-lg-append-3 {
    margin-right: 25%; }

  .col-lg-pull-left-3 {
    margin-left: -25%; }

  .col-lg-pull-right-3 {
    margin-right: -25%; }

  .col-lg-2 {
    width: 16.66667%;
    padding-left: 10px; }

  .col-lg-prepend-2 {
    margin-left: 16.66667%; }

  .col-lg-append-2 {
    margin-right: 16.66667%; }

  .col-lg-pull-left-2 {
    margin-left: -16.66667%; }

  .col-lg-pull-right-2 {
    margin-right: -16.66667%; }

  .col-lg-1 {
    width: 8.33333%;
    padding-left: 10px; }

  .col-lg-prepend-1 {
    margin-left: 8.33333%; }

  .col-lg-append-1 {
    margin-right: 8.33333%; }

  .col-lg-pull-left-1 {
    margin-left: -8.33333%; }

  .col-lg-pull-right-1 {
    margin-right: -8.33333%; } }
@media screen {
  /*==========================================================
  
      Layout
  
  ==========================================================*/
  html {
    background: #000; }

  /* Header
  ========================================================== */
  header.primary {
    position: relative;
    background-position: center -20px;
    background-size: 600px 537px;
    background-repeat: repeat-x; }
    header.primary .container {
      position: relative;
      z-index: 1;
      min-height: 127px; }
    header.primary .logo {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%; }
      header.primary .logo img {
        position: absolute;
        display: block;
        padding: 0 !important;
        left: -9999px !important;
        height: 0px !important;
        line-height: 0px !important;
        background: none !important; }
    header.primary h1 {
      position: absolute;
      display: block;
      padding: 0 !important;
      left: -9999px !important;
      height: 0px !important;
      line-height: 0px !important;
      background: none !important; }
    header.primary .description {
      display: none; } }
  @media screen and (min-width: 768px) {
    header.primary {
      background-position: center -50px;
      background-size: 1200px 1074px; }
      header.primary .container {
        min-height: 240px; }
      header.primary .description {
        position: absolute;
        color: #999;
        font-weight: 700;
        font-style: italic;
        display: block;
        top: 81px;
        left: 50%;
        font-size: 18px;
        font-size: 1.8rem;
        margin-left: 24px; } }

@media screen {
  nav.primary {
    position: relative;
    z-index: 1;
    text-align: center;
    font-size: 0;
    margin-top: -10px;
    font-size: 0;
    background-color: #fff; }
    nav.primary ul {
      display: block; }
    nav.primary li {
      display: inline; }
    nav.primary a {
      position: relative;
      display: inline-block;
      margin: 10px 0 0 0;
      padding: 9px 10px 5px 10px;
      font-size: 14px;
      font-size: 1.4rem;
      font-weight: 700;
      line-height: 1.2;
      -webkit-transition: all 0.2s ease;
      -moz-transition: all 0.2s ease;
      -ms-transition: all 0.2s ease;
      -o-transition: all 0.2s ease;
      transition: all 0.2s ease; }
      nav.primary a:after {
        opacity: 0;
        display: block;
        content: "";
        position: absolute;
        left: 0;
        bottom: -10px;
        width: 100%;
        height: 10px;
        background-position: 0 -300px;
        background-color: #fff;
        -webkit-transition: all 0.2s ease;
        -moz-transition: all 0.2s ease;
        -ms-transition: all 0.2s ease;
        -o-transition: all 0.2s ease;
        transition: all 0.2s ease; }
      nav.primary a, nav.primary a:visited {
        text-decoration: none;
        color: #cc0000; }
      nav.primary a:hover, nav.primary a:active {
        color: #fff;
        background-color: #b00101; }
        nav.primary a:hover:after, nav.primary a:active:after {
          opacity: 1; }
    nav.primary .active a {
      color: #fff;
      background-color: #b00101; }
      nav.primary .active a:after {
        opacity: 1; } }
  @media screen and (min-width: 768px) {
    nav.primary li {
      margin: 0 5px; }
    nav.primary a {
      padding: 12px 10px 7px 10px;
      font-size: 18px; } }

@media screen {
  /* Comic
  ========================================================== */
  nav.comics {
    position: relative;
    z-index: 1;
    height: 40px;
    margin-bottom: 20px; }
    nav.comics ul {
      display: block; }
    nav.comics li {
      display: block;
      position: absolute;
      top: 50%;
      margin-top: -20px;
      height: 40px; }
    nav.comics .first {
      left: 0;
      width: 54px; }
      nav.comics .first a, nav.comics .first span {
        background-position: -190px -130px; }
    nav.comics .prev {
      left: 80px;
      width: 31px; }
      nav.comics .prev a, nav.comics .prev span {
        background-position: -260px -130px; }
    nav.comics .next {
      right: 80px;
      width: 31px; }
      nav.comics .next a, nav.comics .next span {
        background-position: -260px -180px; }
    nav.comics .last {
      right: 0;
      width: 54px; }
      nav.comics .last a, nav.comics .last span {
        background-position: -190px -180px; }
    nav.comics a, nav.comics span {
      text-indent: -9999px;
      display: block;
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0; }
    nav.comics span {
      opacity: .3; }
    nav.comics.last {
      position: relative;
      margin: 30px 0 20px 0; } }
  @media screen and (min-width: 768px) {
    nav.comics {
      position: absolute;
      left: 0;
      top: 30px;
      width: 100%; }
      nav.comics.last {
        display: block;
        margin-top: -35px;
        margin-left: -20px;
        margin-right: -20px;
        margin-bottom: 0;
        position: static;
        height: auto;
        margin-bottom: 0;
        background-color: #b00101;
        border-radius: 3px;
        min-height: 90px;
        padding: 0 50px;
        width: auto; }
        nav.comics.last:after {
          display: block;
          position: absolute;
          left: 0;
          bottom: 0;
          content: "";
          width: 100%;
          height: 10px;
          background-position: 0 -310px;
          background-repeat: repeat-x;
          background-color: #000; }
        nav.comics.last li {
          margin-top: -10px; }
      nav.comics .first {
        left: 65px;
        width: 54px; }
      nav.comics .prev {
        left: 165px; }
      nav.comics .next {
        right: 165px; }
      nav.comics .last {
        right: 65px; } }

@media screen {
  .comic-visuals {
    position: relative;
    z-index: 1;
    text-align: center;
    background-color: #000;
    overflow: hidden; }
    .comic-visuals header {
      position: relative;
      padding: 10px 0 0 0;
      text-align: center; }
      .comic-visuals header .title-collection {
        font-style: italic;
        font-size: 24px;
        color: #fff;
        padding: 10px 0; }
        .comic-visuals header .title-collection a, .comic-visuals header .title-collection a:visited {
          font-weight: 700;
          color: #fff;
          text-decoration: none; }
    .comic-visuals footer {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      text-align: center; }
    .comic-visuals .share {
      display: block;
      margin-top: -30px;
      font-size: 0; }
      .comic-visuals .share li {
        display: inline;
        margin: 0 10px; }
      .comic-visuals .share a {
        display: inline-block;
        font-size: 16px;
        font-size: 1.6rem; }
    .comic-visuals .comic {
      display: inline-block;
      clear: both;
      position: relative;
      z-index: 1;
      padding: 0 10px;
      padding-bottom: 0;
      margin-top: 0; }
      .comic-visuals .comic:after {
        display: block;
        clear: both;
        content: "";
        margin: -10px -10px 0 -10px;
        height: 20px;
        background-position: 0 -335px;
        background-repeat: repeat-x; }
      .comic-visuals .comic:first-child {
        margin-top: 0; }
      .comic-visuals .comic img {
        display: block;
        max-width: 100%;
        height: auto;
        margin: 0 auto; } }
  @media screen and (min-width: 768px) {
    .comic-visuals header .title-collection {
      padding: 25px 0; }
    .comic-visuals footer {
      left: 50%;
      width: 480px;
      margin-left: -240px; }
    .comic-visuals .share {
      margin-top: 0;
      padding: 45px 0 0 0; }
    .comic-visuals .comic {
      padding: 0 40px;
      padding-bottom: 10px;
      margin-top: 10px; } }

@media screen {
  /* Main
  ========================================================== */
  .main {
    position: relative;
    padding-top: 90px;
    padding-bottom: 20px;
    background-color: #fff; }
    .main:before, .main:after {
      content: "";
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 90px;
      background-color: #000; }
    .main:after {
      top: 90px;
      height: 180px;
      background-position: center -714px;
      background-repeat: repeat-x; }
    .main .container {
      z-index: 1;
      background-color: rgba(255, 255, 255, 0.95); } }
  @media screen and (min-width: 768px) {
    .main {
      padding-bottom: 40px; } }

@media screen {
  .home .main,
  .single-comics .main {
    padding-top: 0; }
    .home .main:before,
    .single-comics .main:before {
      display: none; }
    .home .main:after,
    .single-comics .main:after {
      top: 0;
      height: 354px;
      background-position: center -360px; }
    .home .main .container:before,
    .single-comics .main .container:before {
      display: block;
      content: "";
      height: 15px;
      width: 100%;
      padding: 0 20px;
      margin-left: -20px;
      background-position: 0 -345px;
      background-repeat: repeat-x; }

  /* Sidebars
  ========================================================== */ }
@media screen and (min-width: 768px) {
  aside.secondary {
    padding-left: 50px; } }

@media screen {
  .widget {
    margin-top: 15px;
    margin-bottom: 20px; }
    .widget h3 {
      margin-bottom: 7px;
      font-size: 18px;
      font-weight: 700;
      font-style: italic;
      color: #999; }
    .widget ul a {
      font-weight: 700;
      text-decoration: none; }
    .widget .list-items.has-icon {
      position: relative;
      width: 180px;
      min-height: 126px;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
      -o-box-sizing: border-box;
      box-sizing: border-box; }
      .widget .list-items.has-icon:before, .widget .list-items.has-icon:after {
        position: absolute;
        left: 0;
        width: 100%;
        height: 126px;
        content: ""; }
      .widget .list-items.has-icon:before {
        top: 0; }
      .widget .list-items.has-icon:after {
        bottom: 0; }

  .widget--collections .list-items {
    padding: 16px 15px 8px 17px; }
    .widget--collections .list-items li {
      position: relative;
      z-index: 1;
      margin: 0 0 8px 0; }
      .widget--collections .list-items li:before {
        position: absolute;
        left: 0;
        top: 5px;
        display: block;
        content: "";
        background-position: -300px -225px;
        width: 17px;
        height: 15px; }
      .widget--collections .list-items li a {
        padding: 0 0 0 23px;
        font-size: 20px;
        font-weight: 700;
        font-style: italic; }
        .widget--collections .list-items li a, .widget--collections .list-items li a:visited {
          text-decoration: none;
          color: #fff; }
        .widget--collections .list-items li a:hover, .widget--collections .list-items li a:active {
          text-decoration: underline; }

  .widget--follow .list-items {
    padding: 14px 0 0 10px; }
    .widget--follow .list-items li {
      float: left;
      margin: 0 5px 8px 0; }
    .widget--follow .list-items .icon {
      float: left;
      position: relative;
      z-index: 1;
      width: 50px;
      height: 44px;
      text-align: left;
      text-indent: -9999px;
      direction: ltr;
      overflow: hidden; }
    .widget--follow .list-items .twitter .icon {
      background-position: -200px -14px; }
    .widget--follow .list-items .instagram .icon {
      background-position: -254px -14px; }
    .widget--follow .list-items .mail .icon {
      background-position: -311px -14px; }
    .widget--follow .list-items .facebook .icon {
      background-position: -200px -67px; }
    .widget--follow .list-items .tumblr .icon {
      background-position: -254px -67px; }
    .widget--follow .list-items .rss .icon {
      background-position: -311px -67px; }

  .widget--patreon {
    width: 100%;
    height: auto; }
    .widget--patreon .icon {
      display: block;
      width: 158px;
      height: 160px;
      background-position: 0 -130px; } }
@media screen and (max-width: 767px) {
  aside.primary,
  aside.secondary {
    margin-left: -15px; }
    aside.primary .widget,
    aside.secondary .widget {
      float: left;
      width: 180px;
      margin-left: 15px; }
      aside.primary .widget:nth-child(2n),
      aside.secondary .widget:nth-child(2n) {
        clear: left; } }
@media screen {
  /* Footer
  ========================================================== */
  footer.primary {
    position: relative;
    padding-top: 190px;
    min-height: 45px;
    font-size: 14px;
    font-size: 1.4rem;
    text-align: center;
    color: #fff;
    background-position: center -894px;
    background-repeat: repeat-x;
    background-color: #000; }
    footer.primary .container {
      z-index: 1; }
    footer.primary ul, footer.primary li {
      display: inline; }
    footer.primary li:before {
      content: "|";
      margin: 0 4px; }
    footer.primary a {
      font-weight: 700; }
      footer.primary a, footer.primary a:visited {
        text-decoration: none; }
    footer.primary .cc img {
      vertical-align: middle; }

  /* Content
  ========================================================== */
  .content {
    padding: 15px 0 0 0; }

  /* Comic post
  ---------------------------------------------------------- */
  .post--comic .breadcrumb {
    font-style: italic; }
    .post--comic .breadcrumb ul {
      display: inline; }
      .post--comic .breadcrumb ul li {
        display: inline; }
  .post--comic .title {
    padding-right: 60px;
    font-size: 24px;
    font-size: 2.4rem;
    font-style: italic;
    font-weight: 700;
    margin-bottom: 12px; }
    .post--comic .title:after {
      display: block;
      content: "";
      margin-top: 8px;
      height: 4px;
      background-position: 0 -360px; }
  .post--comic time {
    margin-top: -20px;
    position: relative;
    float: right;
    width: 50px;
    font-weight: 700;
    font-style: italic; }
    .post--comic time:before {
      display: block;
      height: 46px;
      content: "";
      background-position: -300px -130px; }
    .post--comic time span {
      display: block;
      position: absolute;
      left: 0;
      width: 100%;
      text-align: center; }
    .post--comic time .day {
      top: 0;
      color: #fff; }
    .post--comic time .month {
      top: 20px; }
  .post--comic .entry:after {
    content: "";
    display: block;
    width: 58px;
    height: 24px;
    margin: 20px auto 0 auto;
    background-position: -300px -180px; }
  .post--comic .tags {
    font-size: 14px;
    font-size: 1.4rem; }
    .post--comic .tags strong {
      margin-right: 4px;
      font-size: 16px;
      font-size: 1.6rem;
      font-style: italic; }
    .post--comic .tags a {
      text-decoration: underline; }

  @-webkit-keyframes turn {
    0% {
      -webkit-transform: rotate(0deg) translate3d(0, 0, 0);
      -moz-transform: rotate(0deg) translate3d(0, 0, 0);
      -ms-transform: rotate(0deg) translate3d(0, 0, 0);
      -o-transform: rotate(0deg) translate3d(0, 0, 0);
      transform: rotate(0deg) translate3d(0, 0, 0); }
    100% {
      -webkit-transform: rotate(180deg) translate3d(0, 6px, 0);
      -moz-transform: rotate(180deg) translate3d(0, 6px, 0);
      -ms-transform: rotate(180deg) translate3d(0, 6px, 0);
      -o-transform: rotate(180deg) translate3d(0, 6px, 0);
      transform: rotate(180deg) translate3d(0, 6px, 0); } }
  @-moz-keyframes turn {
    0% {
      -webkit-transform: rotate(0deg) translate3d(0, 0, 0);
      -moz-transform: rotate(0deg) translate3d(0, 0, 0);
      -ms-transform: rotate(0deg) translate3d(0, 0, 0);
      -o-transform: rotate(0deg) translate3d(0, 0, 0);
      transform: rotate(0deg) translate3d(0, 0, 0); }
    100% {
      -webkit-transform: rotate(180deg) translate3d(0, 6px, 0);
      -moz-transform: rotate(180deg) translate3d(0, 6px, 0);
      -ms-transform: rotate(180deg) translate3d(0, 6px, 0);
      -o-transform: rotate(180deg) translate3d(0, 6px, 0);
      transform: rotate(180deg) translate3d(0, 6px, 0); } }
  @-ms-keyframes turn {
    0% {
      -webkit-transform: rotate(0deg) translate3d(0, 0, 0);
      -moz-transform: rotate(0deg) translate3d(0, 0, 0);
      -ms-transform: rotate(0deg) translate3d(0, 0, 0);
      -o-transform: rotate(0deg) translate3d(0, 0, 0);
      transform: rotate(0deg) translate3d(0, 0, 0); }
    100% {
      -webkit-transform: rotate(180deg) translate3d(0, 6px, 0);
      -moz-transform: rotate(180deg) translate3d(0, 6px, 0);
      -ms-transform: rotate(180deg) translate3d(0, 6px, 0);
      -o-transform: rotate(180deg) translate3d(0, 6px, 0);
      transform: rotate(180deg) translate3d(0, 6px, 0); } }
  @keyframes turn {
    0% {
      -webkit-transform: rotate(0deg) translate3d(0, 0, 0);
      -moz-transform: rotate(0deg) translate3d(0, 0, 0);
      -ms-transform: rotate(0deg) translate3d(0, 0, 0);
      -o-transform: rotate(0deg) translate3d(0, 0, 0);
      transform: rotate(0deg) translate3d(0, 0, 0); }
    100% {
      -webkit-transform: rotate(180deg) translate3d(0, 6px, 0);
      -moz-transform: rotate(180deg) translate3d(0, 6px, 0);
      -ms-transform: rotate(180deg) translate3d(0, 6px, 0);
      -o-transform: rotate(180deg) translate3d(0, 6px, 0);
      transform: rotate(180deg) translate3d(0, 6px, 0); } }
  .comments {
    margin-top: 20px; }
    .comments h3 {
      cursor: pointer;
      margin-bottom: 20px; }
      .comments h3 i {
        display: inline-block;
        float: left;
        margin-right: 10px;
        margin-top: 13px;
        border-left: 6px solid transparent;
        border-top: 6px solid #fff;
        border-right: 6px solid transparent;
        border-bottom: 6px solid transparent;
        -webkit-transform: rotate(0deg) translate3d(0, 0, 0);
        -moz-transform: rotate(0deg) translate3d(0, 0, 0);
        -ms-transform: rotate(0deg) translate3d(0, 0, 0);
        -o-transform: rotate(0deg) translate3d(0, 0, 0);
        transform: rotate(0deg) translate3d(0, 0, 0); }
    .comments.animating h3 i {
      -webkit-animation: turn 0.2s forwards ease;
      -moz-animation: turn 0.2s forwards ease;
      -ms-animation: turn 0.2s forwards ease;
      -o-animation: turn 0.2s forwards ease;
      animation: turn 0.2s forwards ease; }
    .comments.open h3 i {
      -webkit-transform: rotate(180deg) translate3d(0, 6px, 0);
      -moz-transform: rotate(180deg) translate3d(0, 6px, 0);
      -ms-transform: rotate(180deg) translate3d(0, 6px, 0);
      -o-transform: rotate(180deg) translate3d(0, 6px, 0);
      transform: rotate(180deg) translate3d(0, 6px, 0); }
    .comments.open.animating h3 i {
      -webkit-animation: turn 0.2s forwards ease;
      -moz-animation: turn 0.2s forwards ease;
      -ms-animation: turn 0.2s forwards ease;
      -o-animation: turn 0.2s forwards ease;
      animation: turn 0.2s forwards ease;
      -webkit-animation-direction: reverse;
      -moz-animation-direction: reverse;
      -ms-animation-direction: reverse;
      -o-animation-direction: reverse;
      animation-direction: reverse; }

  /* Archive: all comics
  ---------------------------------------------------------- */
  nav.pagination .nav-links > span, nav.pagination .nav-links > a {
    display: inline-block;
    margin: 0 10px;
    padding: 5px 10px;
    color: #fff;
    background-color: #cc0000; }
    nav.pagination .nav-links > span, nav.pagination .nav-links > span:visited, nav.pagination .nav-links > a, nav.pagination .nav-links > a:visited {
      color: white; }
  nav.pagination .nav-links .current {
    background-color: #999; }

  nav.archive {
    margin-bottom: 20px; }
    nav.archive ul, nav.archive li {
      display: inline; }
    nav.archive li:before {
      content: "|";
      margin-right: 4px; }
    nav.archive li:first-child:before {
      display: none; }
    nav.archive a {
      display: inline-block;
      font-style: italic; }

  .chapter-title {
    margin-bottom: 15px;
    font-size: 24px;
    font-style: italic;
    font-weight: 700; }

  .table-row {
    margin-bottom: 20px;
    padding-left: 1px; }
    .table-row:before, .table-row:after {
      content: ".";
      display: block;
      height: 0;
      overflow: hidden; }
    .table-row:after {
      clear: both; }
    .table-row {
      zoom: 1;
      /* IE < 8 */ }

  .table-col {
    position: relative;
    float: left;
    width: 50%;
    border-bottom: 1px solid #000;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box; }
    .table-col:before, .table-col:after {
      content: "";
      height: 100%;
      width: 1px;
      position: absolute;
      top: 0;
      background-color: #000; }
    .table-col:before {
      left: -1px; }
    .table-col:after {
      right: 0; }
    .table-col h4 {
      padding: 4px 15px 5px 15px;
      font-style: italic;
      color: #fff;
      background-color: #000;
      border-left: 1px solid #fff; }
    .table-col ul {
      padding: 10px 15px; }
      .table-col ul li {
        margin: 0 20px 8px 20px;
        display: list-item;
        list-style-type: disc; }
      .table-col ul a {
        font-weight: 400; }
      .table-col ul time {
        font-style: italic;
        font-weight: 700; }
    .table-col:first-child {
      display: none; }
    .table-col:nth-child(2n+4) {
      clear: left; }
    .table-col:nth-child(2n+2) h4 {
      border-left: 0 none; } }
  @media screen and (min-width: 768px) {
    .table-col {
      width: 25%; }
      .table-col:nth-child(2n+4) {
        clear: none; }
      .table-col:nth-child(2n+2) h4 {
        border-left: 1px solid #fff; }
      .table-col:nth-child(4n+6) {
        clear: left; }
      .table-col:nth-child(4n+2) h4 {
        border-left: 0 none; } }

@media screen {
  .archive-collections:before, .archive-collections:after {
    content: ".";
    display: block;
    height: 0;
    overflow: hidden; }
  .archive-collections:after {
    clear: both; }
  .archive-collections {
    zoom: 1;
    /* IE < 8 */ }
  .archive-collections article {
    margin-bottom: 20px; }
    .archive-collections article .inner {
      position: relative;
      border: 1px solid #000;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
      -o-box-sizing: border-box;
      box-sizing: border-box; }
    .archive-collections article h2 {
      margin-bottom: 10px; }
    .archive-collections article .visual {
      position: absolute;
      left: 0;
      top: 0;
      width: 150px;
      height: 150px;
      overflow: hidden;
      border-right: 1px solid #000; }
      .archive-collections article .visual a, .archive-collections article .visual img {
        display: block; }
      .archive-collections article .visual img {
        width: 100%;
        height: auto; }
    .archive-collections article .entry {
      position: relative;
      padding: 10px 15px 0 165px;
      min-height: 150px;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
      -o-box-sizing: border-box;
      box-sizing: border-box; }
    .archive-collections article .actions {
      text-align: right; }
    .archive-collections article .chapter {
      padding: 5px 15px;
      border-top: 1px solid #000; }
      .archive-collections article .chapter:before, .archive-collections article .chapter:after {
        content: ".";
        display: block;
        height: 0;
        overflow: hidden; }
      .archive-collections article .chapter:after {
        clear: both; }
      .archive-collections article .chapter {
        zoom: 1;
        /* IE < 8 */ }
      .archive-collections article .chapter h3 {
        font-size: 18px;
        margin: 0; }
      .archive-collections article .chapter .link {
        display: block; }
        .archive-collections article .chapter .link a {
          font-style: italic; } }
@media screen and (max-width: 767px) {
  .archive-collections article .visual {
    position: static;
    width: auto;
    border: 0 none;
    margin-bottom: 10px; }
  .archive-collections article .entry {
    padding-left: 15px;
    padding-bottom: 15px; }
  .archive-collections article .actions {
    text-align: left; } }
@media screen and (min-width: 768px) {
  .archive-collections article:nth-child(2n+1) {
    clear: left; }
  .archive-collections .chapter h3 {
    float: left; }
  .archive-collections .chapter .link {
    float: right; } }

@media screen {
  /* Archive: collections
  ---------------------------------------------------------- */
  .archive-chapters .chapter {
    margin-bottom: 30px; }

  .archive-post {
    position: relative;
    margin-bottom: 20px;
    padding-left: 165px;
    min-height: 150px; }
    .archive-post time {
      color: #999;
      font-style: italic;
      display: block;
      margin-top: -10px;
      margin-bottom: 10px;
      font-size: 14px;
      font-size: 1.4rem; }
    .archive-post .visual {
      position: absolute;
      left: 0;
      top: 0;
      width: 150px;
      height: 150px;
      border: 1px solid #000;
      overflow: hidden; }
      .archive-post .visual img {
        width: 100%;
        height: auto; }
    .archive-post .description a {
      font-weight: 400;
      font-style: normal; }
      .archive-post .description a, .archive-post .description a:visited {
        color: #000; }
    .archive-post .tags {
      font-size: 14px;
      font-size: 1.4rem; }
      .archive-post .tags strong {
        margin-right: 4px;
        font-size: 16px;
        font-size: 1.6rem;
        font-style: italic; }
      .archive-post .tags a {
        text-decoration: underline; }

  .archive-title {
    margin-bottom: 15px;
    font-size: 24px;
    font-style: italic;
    font-weight: 700; }

  /* 404
  ========================================================== */
  .error404 .entry {
    text-align: center; } }
/* end screen */

/*# sourceMappingURL=style.css.map */