@media (min-width: 992px) {
}


@media (max-width: 991px) {
  /* Navigation */
    .navbar-network { font-size: 0.75em; }

    .navbar-network .navbar-brand,
    .navbar-network .navbar-nav > li > a { padding-left: 8px; padding-right: 8px; }
}


@media (min-width: 768px) {
  body { background: #231f20; color: #f2f2f2; }

  /* Navigation */
    .navbar-network .navbar-brand { padding-bottom: 0; padding-top: 0; }
    .navbar-network .navbar-nav > li > a { padding-top: 2px; padding-bottom: 2px; padding-left: 10px; padding-right: 10px; }

  /* Header */
    .header-logo img { margin: 20px 0; }

  /* Content */
    .main-site { background: transparent url('../img/img-site-main-bg.png') bottom center repeat-x; }
    .content-body { background-color: #231f20; background-color: rgba(35,31,32,0.75); border-radius: 5px; margin-bottom: 20px; padding-bottom: 15px; }
    .content-comic { margin-top: 20px; padding-top: 15px; }

  /* Sidebar */
    .content-sidebar {}
    .content-sidebar h1 { font-size: 27px; }

    .content-authors {}
    .content-author {}

  /* Footer */
    .footer { background: #231f20 url('../img/img-site-footer-bg.png') top center repeat-x; }

  /* Comic: Single */
    .comic-navigation { margin-top: 20px; }
    .comic-navigation a { color: #f2f2f2; }

    .comic-transcript-toggle,
    .comic-transcript-toggle:hover { color: #fff; }

  /* Comic: Storyline */
    .content-storylines .webcomic-term-name { font-size: 27px; margin-left: 250px; }

  /* Page: Home */
    .home-description-text {
      background: rgba(0,0,0,0.625);
      margin-top: 10px;
      padding: 10px;
    }

  /* Page: Author */
    .author-list { margin-bottom: 15px; }

    .author-body {
      -webkit-column-count: 2; -webkit-column-gap: 5px;
      column-count: 2; column-gap: 5px;
    }

    .author-contact { margin: 0; overflow-x: hidden; white-space: nowrap; }

    .author-contact dt,
    .author-contact dd { display: inline-block; vertical-align: middle; }
    .author-contact dt { color: #9a9a9a; font-size: 0.75em; min-width: 67px; text-align: right; text-transform: uppercase; }
    .author-contact dd { font-size: 0.8em; margin-left: 5px; }
}


@media (max-width: 767px) {
  html,
  body { overflow-x: hidden; }

  body { background: #e5e5e5; color: #aaa; padding-top: 50px; }

  a { text-decoration: none; }

  h1,
  h2 { color: #9a9a9a; font-style: italic; }
  h1 { font-size: 27px; }
  h2 { font-size: 21px; }
  h2 small { float: right; }

  /* Layout */
    .row { margin: 0; padding: 0; }
    *[class*='col-'] { padding-right: 0; padding-left: 0; }

    .content-sidebar { padding-top: 15px; }


  /* Navigation */
    .navbar-site .container { padding-left: 0; padding-right: 0; }

    .navbar-fixed-mobile {
      /* based on navbar-fixed-top */
      top: 0;
      position: fixed;
      right: 0;
      left: 0;
      z-index: 1030;
      border-radius: 0;
    }

    .navbar-toggle {
      border: none;
      border-radius: 0;
      position: absolute;
      left: -20px;
    }

    .navbar-brand { overflow-x: hidden; padding: 8px 15px 8px 25px; white-space: nowrap; max-width: 320px; max-width: calc(100% - 10px); }

    .navbar-mobile-form {
      border-bottom: none;
      border-top: none;
      padding: 0 15px 0 25px;
      width: calc(100% - 52px);

      -webkit-box-shadow: none;
      box-shadow: none;
    }

    .navbar-mobile-form .form-group {
      display: inline-block;
      margin-bottom: 0;
      width: 190px; /* Fallback width for iOS */
      width: calc(100% - 36px);
    }

    .navbar-mobile-form .form-control {
      background: transparent;
      border: none;
      border-bottom: solid 1px #fff;
      border-radius: 0;
      color: #f2f2f2;
      font-size: 16px;
      height: 35px;
      line-height: 35px;
      margin: 6px 5px;
      padding: 0 5px;
      -webkit-appearance: none; /* Disable Safari's Rounded Fields */
    }

    .navbar-search-mobile-form input:focus {
      box-shadow: 0 0 5px -5px rgba(0, 0, 255, 1);
      -webkit-box-shadow: 0 0 5px -5px rgba(0, 0, 255, 1);
      -moz-box-shadow: 0 0 5px -5px rgba(0, 0, 255, 1);
    }

    .navbar-nav {
      margin: 0;
    }

    .navbar-nav > li > a,
    .navbar-nav .open .dropdown-menu > li > a,
    .navbar-nav .open .dropdown-menu .dropdown-header { border-radius: 0; font-size: 21px; padding-top: 15px; padding-bottom: 15px; }

    .nav .open > a,
    .nav .open > a:hover,
    .nav .open > a:focus { border: none; }

    .navbar-site .navbar-nav > li > a { text-shadow: none; }
    .navbar-search-mobile > li > a { padding-top: 9px; padding-bottom: 9px; }

    .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus { color: #505050; }

    .navbar-nav > .active > a,
    .navbar-nav > .active > a:focus,
    .navbar-inverse .navbar-nav > .active > a,
    .navbar-inverse .navbar-nav > .active > a:focus,
    .navbar-nav > .open > a,
    .navbar-nav > .open > a:focus,
    .navbar-inverse .navbar-nav > .open > a,
    .navbar-inverse .navbar-nav > .open > a:focus,
    .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus
    {
      color: #505050;
      background-color: #d6d6d6;
      background-image: none;
    }

    .navbar-nav > li > a:hover,
    .navbar-inverse .navbar-nav > li > a:hover,
    .navbar-inverse .navbar-nav > .active > a:hover,
    .navbar-inverse .navbar-nav > .open > a:hover,
    .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a,
    .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:hover
    {
      color: #505050;
      background-color: #eaeaea;
      background-image: none;
    }

    .navbar-inverse .navbar-toggle {
      border-color: transparent;
    }

    .navbar-inverse .navbar-toggle:focus {
      background-color: transparent;
    }

    .navbar-social {
      float: none!important;
    }

    .navbar-social > li {
      display: inline-block;
    }

    .navbar-social > li > a {
      margin: 5px 2px 5px 0;
      padding: 6px;
    }

    .navbar-social > li:first-child > a {
      margin-left: 10px;
    }


    .dropdown-menu {
      background-color: #fafafa;
      border-radius: 0;
      -webkit-box-shadow: none;
      box-shadow: none;
      font-size: 21px;
      float: none;
      position: relative;
      top: auto;
      left: auto;
    }


    .navbar-search {
      position: absolute;
      top: 9px;
      right: 10px;
      width: 48px;
      height: 32px;
      padding: 8px 12px;
    }


    /* Slide-in Menu */
    .cbp-spmenu {
      background: #fafafa;
      position: fixed;
      margin-top: 50px;
      -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .75);
      box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .75);

      -webkit-overflow-scrolling: touch; /* this makes the div (or nav) element scrollable for iOS5+ */
      overflow-y: scroll;
  }

    .cbp-spmenu h3 {
      color: #afdefa;
      font-size: 1.9em;
      padding: 20px;
      margin: 0;
      font-weight: 300;
    }

    /* Orientation-dependent styles for the content of the menu */
    .cbp-spmenu-vertical {
      width: 240px;
      height: 100%;
      height: -moz-calc(100% - 50px);
      height: calc(100% - 50px);

      top: 0;
      z-index: 1050;
    }

    .cbp-spmenu-vertical a {
      border-bottom: 1px solid #d9d9d9;
      padding: 1em;
    }

    .cbp-spmenu-left {
      left: -245px;
    }

    .cbp-spmenu-left.cbp-spmenu-open {
      left: 0px;
    }

    /* Transitions */
    .cbp-spmenu {
      -webkit-transition: all 0.3s ease;
      -moz-transition: all 0.3s ease;
      transition: all 0.3s ease;
    }

  /* Sidebar */
    .sidebar-network .network-title { padding: 10px 15px 15px; }

  /* Footer */
    .footer { background-color: #404244; }
    .footer-nav { margin-top: 10px; margin-bottom: 10px; }
    .footer-nav .list-inline > li { display: block; }

  /* Shared */

  /* Social */

  /* Card Styles */
    /* Main Box Style */
    .mobile-card,
    .content-list .media,
    .sidebar-list .media,
    .sidebar-network .network,
    .social-list .fb-like-box {
      background: #fff;
      -webkit-box-shadow: 0px 3px 3px 0px rgba(212, 212, 212, 1);
      box-shadow: 0px 3px 3px 0px rgba(212, 212, 212, 1);
      line-height: 1.1;
    }

    .mobile-section { border-top: solid 1px #c9c9c9; margin: 0 -15px 15px; padding: 0 15px; }

    .sidebar-network .network { margin: 0 15px 15px 15px; }

    .sidebar-network .network-image a { background-position: center; background-size: cover; }

    .sidebar-network .network .network-image { background: #fff ;}
    .sidebar-network .network .network-image a { color: #aaa; }
    .sidebar-network .network .network-image h1 { color: #2f2f2f; }

    .sidebar-network .network .network-site { position: absolute; top: 0; left: 0; }

    .sidebar-network .network .network-image-mobile {
      border-top-style: solid;
      border-top-width: 3px;
      width: 100%;
      height: 120px;
    }

    *[class*='site-'] .network-title { background-color: #fff }


    .content-list,
    .sidebar-list,
    .social-list { margin: 15px; }

    .sidebar-list .media { position: relative; }

    .content-list .media,
    .sidebar-list .media,
    .sidebar-network .network,
    .social-list .fb-like-box {
      background: #fff;
      -webkit-box-shadow: 0px 3px 3px 0px rgba(212, 212, 212, 1);
      box-shadow: 0px 3px 3px 0px rgba(212, 212, 212, 1);
      line-height: 1.1;
    }

    .content-list .media,
    .sidebar-list .media {
      max-height: 140px;
    }

    .content-list .media article > .pull-left,
    .sidebar-list .media > .pull-left {
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      width: 140px;
      height: 140px;
    }

    .content-list .media-category,
    .topics-list .media-category,
    .sidebar-list .media-category,
    .sidebar-network .network-site { font-size: 13px; padding: 5px 5px; }

    .content-list .media-object,
    .sidebar-list .media-object { }

    .content-list .media-object.media-default,
    .sidebar-list .media-object.media-default { margin-left: 0; }

    .content-list .media-body,
    .sidebar-list .media-body { font-size: 14px; }

    .content-list .media-body:not(h2),
    .sidebar-list .media-body:not(h2) { color: #aaa; padding: 10px; }

    .content-list .media-title,
    .sidebar-list .media-title { font-size: 16px; margin-bottom: 4px; }


    .content-list .media article > .pull-left,
    .sidebar-list .media article > .pull-left,{
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }

  /* Sidebar */
  .content-sidebar { border-top: solid 1px #c9c9c9; margin-left: -15px; margin-right: -15px; padding: 10px 15px 0; }

  /* Comic: Single */
  .comic-image { margin-top: 15px; }
  .comic-navigation { padding-bottom: 10px; }

  /* Comic: Single */
  .content-storylines .webcomic-term-name { font-size: 21px; margin-left: 135px; }
  .content-storylines .webcomic-term-image img { max-width: 120px; height: auto; }

  /* Page */

  /* Page: Home */
  .content-home{ max-height: none; }

  .content-home .home-image { }
  .content-home .home-description { }

  /* Page: Author */
    .author-details { display: block; float: none !important; }
    .author-image img { width: 80px; height: 80px; }
}


@media (min-width: 401px) {
}


@media (max-width: 400px) {
}