html {
    margin: 0; 
    min-width: 320px;
    background: #fff;
    min-height: 100%;
}

body {
    min-width: 320px;
    margin: 0;
    font-family: 'Assistant', sans-serif;
    font-size: 16px;
    line-height: 150%;
    font-weight: normal;
    color: #000;
    /*background-color: #1a386a;*/
    min-height: 100%;
}

html,
body {
    height: 100%;
}

a {
  color: #c80f21;
  text-decoration: none;
}

  a:hover {
    color: #2755a2;
  }

  a:focus {
    outline: none;
  }
  
button::-moz-focus-inner {
  border: 0; 
}

input:focus {
  outline: none;
}

input::-moz-focus-inner {
  border: 0; 
}

hr {
  height: 4px;
  color: #e0e0e0;
  background-color: #e0e0e0;
  border: 0px;
}

img {
  border: none;
}

.clear {
  clear: both;
}

.clear-left {
  clear: left;
}

table {
  padding: 0;
  margin: 0;
  border-collapse: collapse;
  border-spacing: 0;
}

tr, td {
  padding: 0;
  margin: 0;
}

iframe {
    max-width: 100% !important;
}

.button {
    padding: 0 5px;
    font-weight: bold;
    font-size: 17px;
    line-height: 17px;
    color: #ffbf01;
    background: #2a5bac;
    cursor: pointer;
}
    .button:hover {
        background: #c80f21;
    }

.loader-img {
    display: none;
    height: 150px;
    background: url('style/loader.gif') center center no-repeat;
    background-size: 40px 40px;
}

/* HEADER */

#header {
    width: 100%;
    height: 76px;
    position: relative;
    border-bottom: 4px solid #ffbf01;
    background: #c80f21 url('style/header-logo.png') no-repeat;
    background-size: auto 76px;
    z-index: 10000;
    overflow: hidden;
}
@media (min-width: 0px) and (max-width: 900px) {
    #header {
        height: 36px;
        border-bottom: 2px solid #ffbf01;
        background-size: auto 36px;
        background-position: 10px 0;
    }
}

#header.header-mini {
    height: 36px;
    border-bottom: 2px solid #ffbf01;
    background-size: auto 36px;
    background-position: 10px 0;
    box-shadow: 0 0 20px 5px #000;
    top: 0;
}

#header.header-full #header-menu-button {
    margin: 12px;
    width: 50px;
    height: 50px;
    border: 2px solid #6ea4fb;
    background: #1a386a url('style/header-menu-button.png');
    background-size: 100px 50px;
    cursor: pointer;
    float: left;
}
@media (min-width: 0px) and (max-width: 900px) {
    #header.header-full #header-menu-button {
        margin: 0;
        width: 36px;
        height: 36px;
        border: none;
        border-right: 2px solid #6ea4fb;
        background: #1a386a url('style/header-menu-button.png');
        background-size: 72px 36px;
        cursor: pointer;
    }
}

    #header.header-full #header-menu-button.menu-on {
        background-position: right top;
    }

    #header.header-full #header-menu-button.menu-off {
        background-position: left top;
    }

    #header.header-full #header-menu-button:hover {
        background-color: #c80f21;    
    }   


#header.header-mini #header-menu-button {
    margin: 0;
    width: 36px;
    height: 36px;
    border-right: 2px solid #6ea4fb;
    background: #1a386a url('style/header-menu-button.png');
    background-size: 72px 36px;
    cursor: pointer;
    float: left;
}

    #header.header-mini #header-menu-button:hover {
        background-color: #c80f21;
    }
    
    #header.header-mini #header-menu-button.menu-on {
        background-position: right top;
    }

    #header.header-mini #header-menu-button.menu-off {
        background-position: left top;
    }

#header-shop {
    width: 265px;
    height: 76px;
    padding: 0 0 0 30px;
    float: right;
    display: block;
    background: #8a0a17 url('style/header-shop.png') no-repeat;
    background-size: 21px 76px;
    line-height: 76px;
    font-family: 'Oswald', sans-serif;
    font-weight: 400px;
    font-size: 30px;
    color: #ffbf01;
}
@media (min-width: 0px) and (max-width: 900px) {
    #header-shop {
        width: 105px;
        height: 36px;
        padding: 0 0 0 25px;
        line-height: 36px;
        font-size: 24px;
    }
}
@media (min-width: 0px) and (max-width: 550px) {
    #header-shop {
        display: none;
    }
}

h1#logo {
    width: 480px;
    height: 76px;
    margin: 0 0 0 76px;
    display: block;
}
    @media (min-width: 0px) and (max-width: 900px) {
        h1#logo {
            width: 240px;
            height: 36px;
            margin: 0 0 0 36px;
        }
    }
    #header.header-mini h1 {
        width: 240px;
        height: 36px;
        margin: 0 0 0 36px;
    }

    h1#logo a {
        width: 490px;
        height: 76px;
        display: block;
        text-indent: -9999px;
    }
        @media (min-width: 0px) and (max-width: 900px) {
            h1#logo a {
                width: 245px;
                height: 36px;
            }
        }
        #header.header-mini h1#logo a {
            width: 245px;
            height: 36px;
        }

#header-shop span {
    color: #fff;
}

#header-shop img {
    width: 140px;
    height: 76px;
    display: block;
    float: right;
}
@media (min-width: 0px) and (max-width: 900px) {
    #header-shop img {
        display: none;
    }
}

#header.header-mini #header-shop {
    width: 105px;
    height: 36px;
    padding: 0 0 0 25px;
    line-height: 36px;
    font-size: 24px;
}

#header.header-mini #header-shop img {
    display: none;
}


/* MENU */

#menu {
    width: 0;
    height: 100%;
    background: #1a386a;
    position: absolute;
    overflow: hidden;
    color: #fff;
    z-index: 3;
}

#menu-scroll {
    width: 210px;
    height: 100%;
    overflow: hidden;
    overflow-y: scroll;
}

#menu-list {
    width: 190px;
}

#menu-head {
    height: 40px;
    padding: 0 10px 0 10px;
    background: #091d3e;
    font-family: 'Oswald', sans-serif;
    font-size: 18px;
    font-weight: 300;
    line-height: 40px;
    color: #366fcf;
}

#menu ul, #menu li {
    margin: 0;
    padding: 0;
    display: block;
}

.menu-item a {
    display: block;
    padding: 0 10px;
    border-bottom: 2px solid #091d3e;
    font-family: 'Oswald', sans-serif;
    font-size: 18px;
    font-weight: 300;
    line-height: 40px;
    color: #fff;
}

    .menu-item a:hover {
        color: #fff;
        background-color: #2755a2;
    }

.menu-footer {
    padding: 0 10px 0 10px;
    font-size: 12px;
    line-height: 15px;
    color: #346fd2;
}

    .menu-footer a {
        color: #346fd2;
    }

        .menu-footer a:hover {
            color: #6396eb;
        }

.menu-footer-title {
    display: none;
}


/* HOME FEATURE */

#home-feature {
    height: 380px;
    background: #0b2249 url('style/feature.jpg');
    background-size: auto 100%;
    /*border-bottom: 4px solid #000;*/
    overflow: hidden;
    width: 100%;
}
@media (min-width: 0px) and (max-width: 1150px) {
    #home-feature {
       height: 240px;
    }
}
@media (min-width: 0px) and (max-width: 500px) {
    #home-feature {
        height: 158px;
    }
}

@media(min-width: 1150px) {
    #home-feature {
        border-bottom: 4px solid #000;
    }
}

#home-menu {
    width: 1100px;
    height: 340px;
    margin: 0 0 0 10px;
    padding: 20px;
    float: right;
}
@media (min-width: 0px) and (max-width: 2000px) {
    #home-menu {
        width: 900px;
    }
}
@media (min-width: 0px) and (max-width: 1800px) {
    #home-menu {
        width: 700px;
    }
}
@media (min-width: 0px) and (max-width: 1600px) {
    #home-menu {
        width: 500px;
    }
}
@media (min-width: 0px) and (max-width: 1400px) {
    #home-menu {
        width: 300px;
    }
}
@media (min-width: 0px) and (max-width: 1150px) {
    #home-menu {
        height: 200px;
    }
}
@media (min-width: 0px) and (max-width: 850px) {
    #home-menu {
        display: none;
    }
}

    #home-menu-buttons-beginnings {
        width: 190px;
        height: 340px;
        margin: 0 10px 0 0;
        float: left;
        overflow: hidden;
        background: #1a386a;
        background-size: 190px 165px;
        overflow: hidden;
        box-shadow: 0 2px 10px 2px #000;
        cursor: pointer;
    }
    @media (min-width: 0px) and (max-width: 1400px) {
        #home-menu-buttons-beginnings {
            display: none;
        }
    }

        #home-menu-buttons-beginnings p {
            display: block;
            margin: 0;
            padding: 0;
        }   
        
        #home-menu-buttons-beginnings-thumb {
            width: 190px;
            height: 129px;
            display: block;
            overflow: hidden;
        }

        #home-menu-buttons-beginnings-thumb img {
            width: 100% !important;
            height: auto !important;
            display: block;
        }

        #home-menu-buttons-beginnings-detail {
            height: 161px;
            padding: 10px;
            display: block;
            color: #ffbf01;
            font-family: 'Oswald', sans-serif;
            font-weight: 300;
            font-size: 17px;
            overflow: hidden;
        }

            #home-menu-buttons-beginnings-title {
                padding: 0 0 10px 0;
                display: block;
                font-weight: 400;
                color: #fff;
                font-size: 19px;
            }  

    #home-menu-buttons-col1 {
        width: 190px;
        height: 340px;
        margin: 0 10px 0 0;
        float: left;
        overflow: hidden;
    }
    @media (min-width: 0px) and (max-width: 1600px) {
        #home-menu-buttons-col1 {
            display: none;
        }
    }

    #home-menu-buttons-col2 {
        width: 190px;
        height: 340px;
        margin: 0 10px 0 0;
        float: left;
        overflow: hidden;
    }
    @media (min-width: 0px) and (max-width: 1800px) {
        #home-menu-buttons-col2 {
            display: none;
        }
    }

    #home-menu-buttons-col3 {
        width: 190px;
        height: 340px;
        margin: 0 10px 0 0;
        float: left;
        overflow: hidden;
    }
    @media (min-width: 0px) and (max-width: 2000px) {
        #home-menu-buttons-col3 {
            display: none;
        }
    }

        .home-menu-button {
            width: 190px;
            height: 165px;
            padding: 0;
            margin: 0 0 10px 0;
            display: block;
            background: #1a386a url('style/menu-bg.jpg');
            background-size: 190px 165px;
            overflow: hidden;
            box-shadow: 0 2px 10px 2px #000;
        }

        .home-menu-button img {
            width: 190px;
            height: 135px;
            display: block;
        }

        .home-menu-button-title {
            height: 30px;
            display: block;
            padding: 0 0 0 10px;
            font-family: 'Oswald', sans-serif;
            font-weight: 300;
            font-size: 20px;
            line-height: 30px;
            color: #fff;
            border-left: 4px solid #ffbf01;
            background: #0b2249;
        }

    #home-event {
        width: 300px;
        height: 130px;
        padding: 0;
        margin: 0 0 10px 0;
        display: block;
        background: #1a386a;
        background-repeat: repeat-x;
        overflow: hidden;
        box-shadow: 0 2px 10px 2px #000;
        cursor: pointer;
        overflow: hidden;
    }
    @media (min-width: 0px) and (max-width: 1150px) {
        #home-event {
           display: none;
        }
    }

    #home-event-header {
        height: 30px;
        display: block;
        padding: 0 0 0 10px;
        font-family: 'Oswald', sans-serif;
        font-weight: 300;
        font-size: 20px;
        line-height: 30px;
        color: #fff;
        border-left: 4px solid #ffbf01;
        background: #0b2249;
    }

    #home-event #vsel {
        width: auto;
        margin: 0 !important;
        padding: 15px 10px 10px 10px !important;
        float: none;
        border: none;
    }

        #home-event #vsel .vsel-content {
            width: auto;
            margin: 0;
            padding: 0;
            border: none;
            float: none;
        }

        #home-event #vsel .vsel-meta {
            width: 200px;
            margin: 0 5px 0 0;
            padding: 0;
            float: left;
        }

        #home-event #vsel .vsel-meta-title {
            height: 20px;
            padding: 0;
            margin: 0 0 5px 0;
            display: block;
            font-family: 'Oswald', sans-serif;
            font-weight: 400px;
            font-size: 18px;
            color: #fff;
            line-height: 20px;
            overflow: hidden;
        }

        #home-event #vsel p.vsel-meta-date {
            height: 16px;
            padding: 0;
            margin: 0 0 10px 0;
            font-family: 'Oswald', sans-serif;
            font-weight: 300;
            font-size: 14px;
            color: #ffbf01;
            line-height: 16px;
            text-transform: uppercase;
            overflow: hidden;
        }

        #home-event #vsel p.vsel-meta-location {
            padding: 0;
            margin: 0 0 50px 0;
            font-family: 'Oswald', sans-serif;
            font-weight: 300;
            font-size: 18px;
            color: #6291e0;
            line-height: 20px;
        }

        #home-event #vsel p.vsel-meta-link {
            display: none;
        }

        #home-event #vsel .vsel-image-info {
            width: 75px;
            height: 75px;
            float: left;
            overflow: hidden;
        }

        #home-event #vsel .vsel-image {
            width: auto;
            height: auto;
            max-width: 75px;
            max-height: 75px;
            padding: 0;
            margin: 0;
            display: block;
            float: none;
            border: none;
        }

        #home-event #vsel .vsel-nav {
            display: none;
        }

    #home-promo {
        width: 300px;
        display: block;
        float: left;
        overflow: hidden;
        box-shadow: 0 2px 10px 2px #000;
    }

#home-thumb {
    width: 560px;
    height: 380px;
    display: block;
    float: left;
    border-right: 4px solid #000;
}
@media (min-width: 0px) and (max-width: 1150px) {
    #home-thumb {
        width: 342px;
        height: 240px;
    }
}
@media (min-width: 0px) and (max-width: 500px) {
    #home-thumb {
        width: 171px;
        height: 120px;
    }
}

#home-thumb p {
    padding: 0;
    margin: 0;
    display: block;
}

#home-thumb img {
    width: 100%;
    height: 100%;
    display: block;
}

#home-calendar {
    width: 116px;
    height: 166px;
    padding: 30px 0 0 0;
    margin: 0 0 0 580px;
    display: block;
}
@media (min-width: 0px) and (max-width: 1150px) {
    #home-calendar {
        height: 75px;
        padding: 20px 0 0 0;
        margin: 0 0 0 360px;
    }
}
@media (min-width: 0px) and (max-width: 500px) {
    #home-calendar {
        margin: 0 0 0 180px;
        padding: 8px 0 0 0;
    }
}

    #home-calendar-frame {
        width: 104px;
        height: 154px;
        padding: 3px;
        background: #fff;
        box-shadow: 6px 6px 0 #142628;
        display: block;
    }   
    @media (min-width: 0px) and (max-width: 1150px) {
        #home-calendar-frame {
            width: 80px;
            height: 70px;
            padding: 0;
            box-shadow: 4px 4px 0 #142628;
        }
    }

    #home-calendar-content {
        width: 104px;
        height: 154px;
        background: #ffbf01;
        display: block;
    }
    @media (min-width: 0px) and (max-width: 1150px) {
        #home-calendar-content {
            width: 80px;
            height: 70px;
        }
    }

    #home-calendar-day {
        height: 23px;
        font-family: 'Oswald', sans-serif;
        font-weight: 400;
        text-transform: uppercase;
        font-size: 13px;
        line-height: 23px;
        letter-spacing: 3px;
        text-align: center;
        color: #fff;
        background: #2755a2;
        display: block;
    }
    @media (min-width: 0px) and (max-width: 1150px) {
        #home-calendar-day {
            height: 13px;
            font-size: 10px;
            line-height: 13px;
        }
    }

    #home-calendar-month {
        height: 40px;
        font-family: 'Oswald', sans-serif;
        font-weight: 300;
        font-size: 30px;
        line-height: 40px;
        color: #8a0a17;
        text-align: center;
        text-transform: uppercase;
        display: block;
    }
    @media (min-width: 0px) and (max-width: 1150px) {
        #home-calendar-month {
            height: 20px;
            font-size: 15px;
            line-height: 20px;
        }
    }

    #home-calendar-date {
        height: 85px;
        font-family: 'Oswald', sans-serif;
        font-weight: 400;
        font-size: 75px;
        line-height: 85px;
        color: #c80f21;
        text-align: center;
        display: block;
    }
    @media (min-width: 0px) and (max-width: 1150px) {
        #home-calendar-date {
            height: 35px;
            font-size: 30px;
            line-height: 35px;
        }
    }

#home-label {
    margin: 0 0 0 580px;
    padding: 10px 0 20px 0;
    display: block;
}
@media (min-width: 0px) and (max-width: 1150px) {
    #home-label {
        margin: 0 0 0 360px;
    }
}
@media (min-width: 0px) and (max-width: 500px) {
    #home-label {
        margin: 0 0 0 180px;
        padding: 0 0 7px 0;
    }
}

    #home-label-content {
        width: 160px;
        height: 40px;
        color: #ffbf01;
        font-family: 'Oswald', sans-serif;
        font-weight: 300;
        font-size: 25px;
        line-height: 40px;
        letter-spacing: 1px;
        text-transform: uppercase;
        text-align: center;
        background: #8a0a17;
        box-shadow: 6px 6px 0 #142628;
        display: block;
    }
    @media (min-width: 0px) and (max-width: 1150px) {
        #home-label-content {
            width: 120px;
            height: 30px;
            font-size: 18px;
            line-height: 30px;
            box-shadow: 4px 4px 0 #142628;
        }
    }

        #latest-comic:hover #home-label-content {
            background: #c80f21;
            box-shadow: 6px 6px 0 #000;
        }
        @media (min-width: 0px) and (max-width: 1150px) {
            #latest-comic:hover #home-label-content {
                box-shadow: 4px 4px 0 #000;
            }
        }

#home-title {
    margin: 0 0 0 580px;
    padding: 0 10px 0 0;
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
    font-size: 30px;
    color: #fff;
    line-height: 35px;
    display: block;
}
 @media (min-width: 0px) and (max-width: 1150px) {
    #home-title {
        margin: 0 0 0 360px;
        font-size: 20px;
        line-height: 25px;
    }
}
@media (min-width: 0px) and (max-width: 850px) {
    #home-title {
        font-size: 30px;
        line-height: 35px;
    }
}
 @media (min-width: 0px) and (max-width: 650px) {
    #home-title {
        font-size: 20px;
        line-height: 25px;
    }
}
@media (min-width: 0px) and (max-width: 500px) {
    #home-title {
        margin: 0;
        padding: 7px 10px 7px 10px;
        background: #142628;
    }
}


/* SIDE NAV */

#sidenav {
    width: 190px;
    height: 100%;
    background: #1a386a;
    position: absolute;
    overflow: hidden;
    color: #fff;
    z-index: 2;
    top: 93px;
}
@media (min-width: 0px) and (max-width: 970px) {
    #sidenav.sidenav-defaultpage {
        display: none;
    }
}
@media (min-width: 0px) and (max-width: 970px) {
    #sidenav.sidenav-page {
        display: none;
    }
}
@media (min-width: 0px) and (max-width: 680px) {
    #sidenav.sidenav-comicpage {
        display: none;
    }
}

.home #sidenav {
    top: auto;
}

#sidenav-scroll {
    width: 210px;
    height: 100%;
    overflow: hidden;
    overflow-y: scroll;
}

#sidenav-menu {
    width: 190px;
}

#sidenav-header {
    width: 180px;
    height: 36px;
    /*padding: 40px 0 0 10px;*/
    padding-left: 10px;
    border-bottom: 4px solid #091d3e;
    font-family: 'Oswald', sans-serif;
    font-weight: 300;
    color: #366fcf;
    text-transform: uppercase;
    font-size: 15px;
    line-height: 36px;
    background: #091d3e;
}

    .home #sidenav-header {
        padding-top: 0;
    }

.sidenav-comic {
    display: block;
    height: 150px;
    border-bottom: 4px solid #091d3e;
    cursor: pointer;
    font-family: 'Oswald', sans-serif;
    font-size: 15px;
    font-weight: 300;
    color: #fff683;
    line-height: 15px;
    overflow: hidden;
}

.sidenav-comic:hover {
    color: #fff683;
}

.sidenav-comic.active {
    background-color: rgb(11, 34, 73);
}

.sidenav-selector {
    width: 10px;
    height: 150px;
    float: left;
    background: #2755a2;;
    position: relative;
}

#sidenav-more-storylines .sidenav-selector {
    background: #c80f21;
}

.beginnings-auto-thumb {
    width: 140px;
    height: 95px;
    margin: 0 0 5px 0;
    background-position: -144px -5px;
    background-size: auto 297px;
}

.sidenav-progress {
    width: 10px;
    height: 0px;
    background: #c80f21;
    position: absolute;
    bottom: 0;
    left: 0;
}

.sidenav-thumb {
    width: 140px;
    height: 130px;
    padding: 20px;
    float: left;
}

.sidenav-thumb p {
    width: 100%;
    display: block;
    margin: 0 0 5px 0;
    padding: 0;
}

.sidenav-thumb img {
    width: 100%;
    height: auto;
    padding: 0 0 5px 0;
    display: block;
}

.sidenav-page {
    height: 150px;
    border-bottom: 4px solid #091d3e;
    cursor: pointer;
    font-family: 'Oswald', sans-serif;
    font-size: 15px;
    font-weight: 300;
    color: #fff683;
    line-height: 15px;
    overflow: hidden;
}

.sidenav-page a {
    width: 190px;
    height: 150px;
    display: block;
    margin: -140px 0 0 0;
    position: relative;
    z-index: 10;
}

.sidenav-page a img {
    width: 140px;
    height: 85px;
    display: block;
    margin: 0 0 0 30px;
    padding: 20px 0 0 0;
}

.sidenav-page-title {
    width: 140px;
    height: 20px;
    margin: 120px 0 0 30px;
    position: relative;
    z-index: 5;
}

.sidenav-blog {
    height: 110px;
    border-bottom: 4px solid #091d3e;
    cursor: pointer;
    font-family: 'Oswald', sans-serif;
    font-size: 16px;
    font-weight: 300;
    color: #fff683;
    line-height: 19px;
    overflow: hidden;
}

.sidenav-blog.active {
    background-color: rgb(11, 34, 73);
}

.sidenav-blog-selector {
    width: 10px;
    height: 110px;
    float: left;
    background: #2755a2;  
}

.sidenav-blog-thumb {
    width: 80px;
    height: 80px;
    padding: 30px 0 0 90px;
    float: left;
    display: block;
    background-position: left bottom;
    background-repeat: no-repeat;
    background-size: 80px 80px;
}

.sidenav-next-page {
    height: 1000px;
}

.sidenav-loader-img {
    display: none;
    height: 150px;
    background: url('style/loader.gif') center center no-repeat;
    background-size: 40px 40px;
}


/* SIDEBAR */

.sidebar-hook {
    position: relative;
}

#sidebar {
    width: 300px;
    padding: 100px 20px 20px 20px;
    height: 100%;
    min-height: 600px;
    margin: 0;
    background: #1a386a;
    position: absolute;
    overflow: hidden;
    color: #fff;
    z-index: 1;
    right: 0;
    top: 0;
}
.home #sidebar {
    top: auto;
    position: absolute;
    padding: 20px;
}
@media (min-width: 0px) and (max-width: 1300px) {
    #sidebar {
        display: none;
    }
}


/* CONTENT */

#content {
    max-width: 1260px;
    padding: 120px 40px 40px 40px;
    margin: 0 auto;
}


/* SEARCH */

#search-results {
    padding: 20px 0 0 0;
    font-family: 'Oswald', sans-serif;
    font-size: 16px;
    line-height: 18px;
    font-weight: 300;
}

.search-thumb {
    width: 190px;
    height: 90px;
    padding: 0 20px 20px 0;
    display: block;
    float: left;
}

.search-thumb span {
    display: block;
    height: 64px;
    overflow: hidden;
}

.search-thumb img {
    width: 190px;
}

.search-next-page {
    font-weight: 400;
}


/* PAGE */

#page {
    /*padding-top: 80px;*/
    /*margin: 0 340px 0 190px;*/
    background-color: #fff;
}
@media (min-width: 0px) and (max-width: 1300px) {
    #page {
        /*margin: 0 0 0 190px;*/
    }
}
@media (min-width: 0px) and (max-width: 970px) {
    #page {
        margin: 0 0 0 0;
    }
}
@media (min-width: 0px) and (max-width: 900px) {
    #page {
        padding-top: 38px;
    }
}

.page-post {
    padding: 20px 40px 40px 40px;
}
@media (min-width: 0px) and (max-width: 500px) {
    .page-post {
        padding: 1px 20px 20px 20px;
    }
}

h2 {
    margin: 20px 0 0 0;
    padding: 0;
    display: block;
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
    font-size: 34px;
    line-height: 40px;
}

    h2 img {
        height: 100px !important;
        width: auto !important;
        float: right;
        display: block;
        margin: -20px 0 0 0;
        padding: 0 0 0 20px;
    }

h3 {
    margin: 20px 0 20px 0;
    padding: 0;
    display: block;
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
    font-size: 28px;
    line-height: 32px;
    color: #919191;
}


/* PAGE - PARAGRAPH BLOCKS */

.paragraph-blocks p {
    width: 20%;
    padding: 10px 2% 10px 2%;
    display: inline-block;
    vertical-align: top;
    overflow: hidden;
    font-size: 14px;
}
@media (min-width: 0px) and (max-width: 1600px) {
    .paragraph-blocks p {
        width: 28%;
        padding: 10px 2% 10px 2%;
    }
}
@media (min-width: 0px) and (max-width: 1000px) {
    .paragraph-blocks p {
        width: 45%;
        padding: 10px 2% 10px 2%;
    }
}
@media (min-width: 0px) and (max-width: 600px) {
    .paragraph-blocks p {
        width: 98%;
        padding: 10px 0 10px 0;
    }
}

    .paragraph-blocks p strong {
        display: inline-block;
        font-size: 20px;
        font-family: 'Oswald', sans-serif;
        font-weight: 400;
        line-height: 25px;
        padding: 0 0 5px 0;
    }

    .paragraph-blocks p em {
        display: inline-block;
        font-size: 18px;
        font-family: 'Oswald', sans-serif;
        font-weight: 300;
        line-height: 22px;
        padding: 0 0 5px 0;
        font-style: normal;
        color: #919191;
    }

    .paragraph-blocks p img {
        max-width: 100%;
        height: auto !important;
        padding: 0 0 5px 0;
    }

    .paragraph-blocks a {
        display: inline-block;
        font-size: 16px;
        font-family: 'Oswald', sans-serif;
        font-weight: 400;
        line-height: 20px;
        padding: 5px 0 0 12px;
        background: url('style/frontpage-event.png') no-repeat;
        background-position: 0 12px;
        background-size: 8px 8px;
    }

    .paragraph-blocks a img {
        margin: 0 0 0 -12px;
    }

.page-description {
    margin: 10px 0 10px 0;
}


/* COMIC ARCHIVE */

#comic-by-date-results {
    margin: 20px 0;
}

#comic-by-date-results a {
    margin: 5px 0 0 0;
    padding: 3px 5px;
    display: inline-block;
    background: #ffbf01;
    border: 2px solid #2755a2;
    text-align: center;
}

.comic-by-date-month {
    width: 25px;
    display: block;
    font-family: 'Oswald', sans-serif;
    font-weight: 300;
    font-size: 10px;
    line-height: 10px;
    text-transform: uppercase;
    color: #fff;
}

.comic-by-date-day {
    width: 25px;
    padding: 3px 0;
    display: block;
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 20px;
    text-transform: uppercase;
}

.comic-by-date-year {
    width: 25px;
    display: block;
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
    font-size: 10px;
    line-height: 10px;
    color: #fff;
}

#storyline-archive-more {
    height: 200px;
    clear: both;
}

.storyline-archive-thumb {
    width: 140px;
    height: 130px;
    padding: 20px;
    display: inline-block;
    font-family: 'Oswald', sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 18px;
    cursor: pointer;
    vertical-align: top;
}

    .storyline-archive-thumb img {
        width: 100%;
        height: auto !important;
        display: block;
    }


/* EVENTS PAGE */

#vsel {
    margin: 20px 0 0 0 !important;
    padding: 20px 0 0 0;
    border-top: #ccc 1px solid;
}

    #vsel h4.vsel-meta-title {
        margin: 20px 0 0 0;
        padding: 0;
        display: block;
        font-family: 'Oswald', sans-serif;
        font-weight: 400;
        font-size: 24px;
        line-height: 32px;
    }

    #vsel p.vsel-meta-date {
        height: 24px;
        margin: 5px 0 5px 0;
        display: inline-block;
        font-family: 'Oswald', sans-serif;
        font-weight: 300;
        font-size: 18px;
        line-height: 18px;
        color: #919191;
        text-transform: uppercase;
    }

    #vsel p.vsel-meta-location {
        height: 24px;
        margin: 5px 0 5px 0;
        display: block;
        font-family: 'Oswald', sans-serif;
        font-weight: 300;
        font-size: 18px;
        line-height: 18px;
    }

    #vsel p.vsel-meta-link {
        font-weight: bold;
    }


/* BLOG */

#blog-wrap {
    background-color: #fff;
}

#blog {
    padding-top: 80px;
    margin: 0 340px 0 190px;
}
@media (min-width: 0px) and (max-width: 1300px) {
    #blog {
        margin: 0 0 0 190px;
    }
}
@media (min-width: 0px) and (max-width: 970px) {
    #blog {
        margin: 0 0 0 0;
    }
}
@media (min-width: 0px) and (max-width: 900px) {
    #blog {
        padding-top: 38px;
    }
}

    .home #blog {
        padding-top: 0;
    }

.blog-post {
    padding: 40px;
    margin: 0 auto;
    padding: 233px;
}

.blog-post img {
    max-width: 100% !important;
    height: auto !important;
}

#blog h2 {
    font-size: 144px;
    height: 288px;
    line-height: 100%;
    font-weight: 300;
    padding: 0 0 30px 0;
    margin: 0;
    display: table-cell;
    vertical-align: bottom;
    text-align: left;
    text-indent: 39px;
}

.post-info {
    font-family: 'Oswald', sans-serif;
    font-size: 36px;
    text-indent: 39px;
    background: #2755a2;
    padding: 2px 8px 2px 0;
    margin: 0;
    color: #fff;
    line-height: 200%;
    font-weight: 400;
    text-transform: uppercase;
    border-right: 8px solid #ffbf01;
}

.avatar {
    width: 453px;
    height: 453px;
    padding: 29px;
    margin: 0 5px 0 0;
    float: left;
    background: #8a0a17;
}

    .avatar img {
        padding: 0;
        margin: 0;
        width: 100%;
        height: 100%;
        background: #c91022;
    }

#blog p {
    font-size: 50px;
    text-indent: 39px;
    line-height: 200%;
}

 @media (min-width: 0px) and (max-width: 3500px) {
        .blog-post {
            padding: 186px;
        }
    }        
        
    @media (min-width: 0px) and (max-width: 3000px) {
        .blog-post {
            max-width: none;
            padding: 150px;
        }
        .avatar {
            width: 362px;
            height: 362px;
            padding: 23px;
        }
        #blog h2 {
            font-size: 115px;
            height: 230px;
            text-indent: 31px;
            padding: 0 0 22px 0;
        }
        .post-info {
            font-size: 29px;
            text-indent: 35px;
        }
        #blog p {
            font-size: 40px;
            text-indent: 35px;
        }
    }    
        
    @media (min-width: 0px) and (max-width: 2700px) {
        .blog-post {
            padding: 130px;
        }
        .avatar {
            width: 315px;
            height: 315px;
            padding: 20px;
        }
        #blog h2 {
            font-size: 100px;
            height: 200px;
            text-indent: 27px;
            padding: 0 0 19px 0;
        }
        .post-info {
            font-size: 25px;
            text-indent: 30px;
            text-transform: uppercase;
        }
        #blog p {
            font-size: 35px;
            text-indent: 30px;
        }
    }

    @media (min-width: 0px) and (max-width: 2400px) {
        .blog-post {
            max-width: none;
            padding: 112px;
        }
        .avatar {
            width: 272px;
            height: 272px;
            padding: 18px;
        }
        #blog h2 {
            font-size: 85px;
            height: 170px;
            text-indent: 23px;
            padding: 0 0 18px 0;
        }
        .post-info {
            font-size: 22px;
            text-indent: 26px;
        }
        #blog p {
            font-size: 30px;
            text-indent: 26px;
        }
    }
        
    @media (min-width: 0px) and (max-width: 2100px) {
        .blog-post {
            padding: 93px;  
        }
        .avatar {
            width: 228px;
            height: 228px;
            padding: 15px;
        }
        #blog h2 {
            font-size: 71px;
            height: 142px;
            text-indent: 19px;
            padding: 0 0 16px 0;
        }
        .post-info {
            font-size: 18px;
            text-indent: 22px;
        }
        #blog p {
            font-size: 25px;
            text-indent: 22px;
        }
    }
        
    @media (min-width: 0px) and (max-width: 1800px) {
        .blog-post {
            padding: 73px;
        }
        .avatar {
            width: 178px;
            height: 178px;
            padding: 12px;
        }
        #blog h2 {
            font-size: 55px;
            height: 110px;
            text-indent: 15px;
            padding: 0 0 12px 0;
        }
        .post-info {
            font-size: 14px;
            text-indent: 17px;
        }
        #blog p {
            font-size: 20px;
            text-indent: 17px;
        }
    }      
        
    @media (min-width: 0px) and (max-width: 1500px) {
        .blog-post {
            padding: 50px;
        }
    }      
        
    @media (min-width: 0px) and (max-width: 1200px) {
        .blog-post {
            padding: 50px;
        }
    }  
        
    @media (min-width: 0px) and (max-width: 900px) {
        .blog-post {
            padding: 20px;
        }
    }  
        
    @media (min-width: 0px) and (max-width: 600px) {
        .blog-post {
            padding: 10px;
        }
    }  
        

/* COMMENTS */

.blog-comments {
    height: 27px;
    height: 40px;
    float: left;
    width: 125px;
}

.blog-footer:after {
    content: '';
    display: table;
    clear: both;
}

.blog-post .blog-comments {
    float: right;
}

.comments-wrap {
    width: 125px;
    height: 40px;
}

.comments-button {
    width: 85px;
    height: 40px;
    padding: 0 0 0 45px;
    display: block;
    font-family: 'Oswald', sans-serif;
    font-weight: 300;
    font-size: 20px;
    color: #777;
    line-height: 40px;
    background: url('style/comic-footer-comment.jpg') left center no-repeat;
    background-size: 40px 40px;
    cursor: pointer;
}

.comments {
    width: 0%;
    max-width: 800px;
    height: 100%;
    position: fixed;
    color: #fff;
    background: #000;
    z-index: 10001;
    top: 0;
    right: 0;
    overflow: hidden;
}

.comments-scroll {
    height: 101%;
    width: 820px;
    /*overflow-x: hidden;*/
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}
@media (min-width: 0px) and (max-width: 820px) {
    .comments-scroll {
        width: 100%;
    }
}

.comments-padding {
    padding: 20px;   
}

.comments-spacer {
    height: 40px;
}

.comments-close {
    width: 30px;
    height: 30px;
    cursor: pointer;
    border: 1px solid #fff;
    box-shadow: #202020 0 0 15px 5px;
    position: absolute;
    background: #c80f21 url('style/header-menu-button.png') no-repeat;
    background-size: auto 30px;
    background-position: center right;
    z-index: 10000;
}

    .comments-close:hover {
        background-color: #8a0a17;
    }


/* COMIC PAGE */

#content-comic {
    background-color: #fff;
    padding-left: 190px;
}
@media (min-width: 0px) and (max-width: 900px) {
    #content-comic {
        padding: 40px 0 0 190px;
    }
}
@media (min-width: 0px) and (max-width: 680px) {
    #content-comic {
        padding: 40px 0 0 0;
    }
}

#content-comic img {
    max-width: 100%;
}

.comic {
    width: 100%;
    display: block;
}
@media (min-width: 0px) and (max-width: 1100px) {
    .comic-responsive .comic {
        display: none;
    }
}

.comic-frames {
    display: none;
}
@media (min-width: 0px) and (max-width: 1100px) {
    .comic-responsive .comic-frames {
       display: block;
    }
}

.comic-frame1 {
    width: 48%;
    background: url('media/licd4300-dec05-16.jpg');
    background-size: 426% auto;
    background-position: 2% 54.5%;
    margin: 1%;
    float: left;
}
@media (min-width: 0px) and (max-width: 400px) {
    .comic-frame1 {
       width: 98%;
    }
}
    .comic-frame1::after {
      padding-top: 120.48%;
      display: block;
      content: '';
    }

.comic-frame2 {
    width: 48%;
    background: url('media/licd4300-dec05-16.jpg');
    background-size: 426% auto;
    background-position: 34% 54.5%;
    margin: 1%;
    float: left;
}
@media (min-width: 0px) and (max-width: 400px) {
    .comic-frame2 {
       width: 98%;
    }
}
    .comic-frame2::after {
      padding-top: 120.48%;
      display: block;
      content: '';
    }

.comic-frame3 {
    width: 48%;
    background: url('media/licd4300-dec05-16.jpg');
    background-size: 426% auto;
    background-position: 66% 54.5%;
    margin: 1%;
    float: left;
}
@media (min-width: 0px) and (max-width: 400px) {
    .comic-frame3 {
       width: 98%;
    }
}
    .comic-frame3::after {
      padding-top: 120.48%;
      display: block;
      content: '';
    }

.comic-frame4 {
    width: 48%;
    background: url('media/licd4300-dec05-16.jpg');
    background-size: 426% auto;
    background-position: 98% 54.5%;
    margin: 1%;
    float: left;
}
@media (min-width: 0px) and (max-width: 400px) {
    .comic-frame4 {
       width: 98%;
    }
}
    .comic-frame4::after {
      padding-top: 120.48%;
      display: block;
      content: '';
    }

.comic-beginnings {
    width: 100%;
    display: block;
}

.comic-footer {
    padding: 10px 1.5% 0 1.5%;
}

.comic-footer-right {
    float: right;    
}
@media (min-width: 0px) and (max-width: 840px) {
    .comic-footer-right {
        float: none;
        margin: 0 auto;
    }
    .comic-footer-left {
        padding: 15px 0 0 0;
        clear: both;
        text-align: center;
    }
}

.comic-footer-next,
.comic-footer-prev {
    height: 40px;
}

    .comic-footer-next a,
    .comic-footer-prev a {
        height: 40px;
        padding: 0 10px 0 45px;
        display: inline-block;
        font-family: 'Oswald', sans-serif;
        font-weight: 300;
        font-size: 20px;
        color: #777;
        line-height: 40px;
        background: url('style/comic-footer-prev.jpg') left center no-repeat;
        background-size: 40px 40px;
    }
    
    .comic-footer-next a {
        background: url('style/comic-footer-next.jpg') left center no-repeat;
        background-size: 40px 40px;
        margin-left: 10px;
    }

.comic-footer-archive {
    height: 40px;
    padding: 0 10px 0 45px;
    display: inline-block;
    font-family: 'Oswald', sans-serif;
    font-weight: 300;
    font-size: 20px;
    color: #777;
    line-height: 40px;
    background: url('style/comic-footer-archive.jpg') left center no-repeat;
    background-size: 40px 40px;
}

.comic-footer-print {
    height: 40px;
    padding: 0 0 0 45px;
    display: inline-block;
    font-family: 'Oswald', sans-serif;
    font-weight: 300;
    font-size: 20px;
    color: #777;
    line-height: 40px;
    background: url('style/comic-footer-print.jpg') left center no-repeat;
    background-size: 40px 40px;
}

.comic-footer-facebook {
    height: 40px;
    width: 50px;
    display: block;
    float: left;
    text-indent: -9999px;
    overflow: hidden;
    background: url('style/comic-footer-facebook.jpg') left center no-repeat;
    background-size: 40px 40px;
}

.comic-footer-twitter {
    height: 40px;
    width: 50px;
    display: block;
    float: left;
    text-indent: -9999px;
    overflow: hidden;
    background: url('style/comic-footer-twitter.jpg') left center no-repeat;
    background-size: 40px 40px;
}

.comic-footer-pinterest {
    height: 40px;
    width: 50px;
    display: block;
    float: left;
    text-indent: -9999px;
    overflow: hidden;
    background: url('style/comic-footer-pinterest.jpg') left center no-repeat;
    background-size: 40px 40px;
}

.xcomic-archive {
    width: 90px;
    height: 27px;
    float: left;
    margin: 0 0 0 4px;
    background: url('style/comic-archive.png');
    background-size: 90px 27px;
    cursor: pointer;
}

.xcomic-footer .xcomments-button {
    float: left;
    margin: 0 0 0 4px;
}


/* ADS */

.blog-ad-leader-wrap {
    padding: 20px;
    background: #cfd8e7;
    text-align: center;
}
@media (min-width: 0px) and (max-width: 767px) {
    .blog-ad-leader-wrap {
        padding: 20px 10px;
    }
}

.comic-ad-leader-wrap {
    padding: 20px;
    margin: 20px 0;
    background: #cfd8e7;
    text-align: center;
}
@media (min-width: 0px) and (max-width: 960px) {
    .comic-ad-leader-wrap {
        padding: 20px 10px;
    }
}

.blog-ad-leader-center {
    /*width: 983px;*/
    /*height: 90px;*/
    /*margin: 0 auto;*/
    overflow: hidden;
    display: inline-block;
}
@media (min-width: 0px) and (max-width: 1570px) {
   .blog-ad-leader-wrap .blog-ad-leader-center {
        /*width: 728px;*/
    }
}
@media (min-width: 0px) and (max-width: 767px) {
   .blog-ad-leader-wrap .blog-ad-leader-center {
         /*width: 300px;*/
         /*height: 250px;*/
    }
}

.comic-ad-leader-center {
    /*width: 983px;*/
    /*height: 90px;*/
    /*margin: 0 auto;*/
    overflow: hidden;
    display: inline-block;
}
@media (min-width: 0px) and (max-width: 1220px) {
    .comic-ad-leader-center {
        /*width: 728px;*/
    }
}
@media (min-width: 0px) and (max-width: 960px) {
    .comic-ad-leader-center {
        /*width: 300px;*/
        /*height: 250px;*/
    }
}

.ad-leader {    
    /*width: 728px;*/
    /*height: 90px;*/
    overflow: hidden;
    float: left;
}
@media (min-width: 0px) and (max-width: 767px) {
    .blog-ad-leader-wrap .ad-leader {
       display: none;
    }
}
@media (min-width: 0px) and (max-width: 960px) {
    .comic-ad-leader-wrap .ad-leader {
        display: none;
    }
}

.ad-house {
    /*width: 235px;*/
    /*height: 90px;*/
    padding: 0 0 0 20px;
    overflow: hidden;
    float: left;
}
@media (min-width: 0px) and (max-width: 1570px) {
    .blog-ad-leader-wrap .ad-house {
        display: none;
    }
}
@media (min-width: 0px) and (max-width: 1220px) {
    .comic-ad-leader-wrap .ad-house {
        display: none;
    }
}

.ad-box {
    /*width: 300px;*/
    /*height: 250px;*/
    overflow: hidden;
    /*float: left;*/
    display: none;
    margin: auto;
}
@media (min-width: 0px) and (max-width: 767px) {
    .blog-ad-leader-wrap .ad-box {
        display: block;
    }
}
@media (min-width: 0px) and (max-width: 960px) {
    .comic-ad-leader-wrap .ad-box {
        display: block;
    }
}


/* BF AD PHONE */

.bfadphone {
    width: 100%;
    height: auto;
}
.bfadphone a {
    width: 100%;
    height: auto;
}
.bfadphone img {
    width: 100%;
    height: auto;
}


/* FACEBOOK COMMENTS */

.fb-comments {
    /*background: #fff url('style/facebook-loader.gif') no-repeat center;*/
    /*min-height: 190px;*/
}

.fb-comments.show{
    background: none;
}

.hide-comments,
.fb-wrapper {
    width: 90%;
    max-width: 1100px;
    margin: 2em auto 0;
    padding: 1em;
}


/* INFINITE SCROLL */

#infscr-loading {
   text-align: center;
}

#content-comic > div:after {
    content: '';
    display: table;
    clear: both;
}

.pagination {
    padding: 0 0 0 20px;
    text-align: center;
}

.pagination:after {
    content: '';
    display: table;
    clear: both;
}

.older a {
  color: #777;  
}


/* 404 */

#four-zero-four {
    padding: 15vh 0 0 0;
    margin: 0 auto;
    width: 1000px;
    max-width: 100%;
    display: block;
}

/* #####                                                              #####
#     #  ####  #      #        ##   #####   ####  ###### #####     #     # #####   ##   ##### ######
#       #    # #      #       #  #  #    # #      #      #    #    #         #    #  #    #   #
#       #    # #      #      #    # #    #  ####  #####  #    #     #####    #   #    #   #   #####
#       #    # #      #      ###### #####       # #      #    #          #   #   ######   #   #
#     # #    # #      #      #    # #      #    # #      #    #    #     #   #   #    #   #   #
 #####   ####  ###### ###### #    # #       ####  ###### #####      #####    #   #    #   #   ######
*/

.collapsed-header #header{
    position: fixed;
}

.collapsed-header #content-comic {
    padding-top: 40px;
}

.collapsed-header #sidebar,
.collapsed-header #sidenav {
    position: fixed;
    top: 0;
}

.collapsed-header #menu {
    position: fixed;
    top: 0;
}

.collapsed-header #menu-head {
    padding-top: 40px;
}

/*#     #                          #####
##   ## ###### #    # #    #    #     # #####   ##   ##### ######
# # # # #      ##   # #    #    #         #    #  #    #   #
#  #  # #####  # #  # #    #     #####    #   #    #   #   #####
#     # #      #  # # #    #          #   #   ######   #   #
#     # #      #   ## #    #    #     #   #   #    #   #   #
#     # ###### #    #  ####      #####    #   #    #   #   ######
*/

#menu-state:checked ~ #menu{
    width: 190px;
}

#menu-state:checked ~ #header #header-menu-button{
    background-position: right top;
}

#menu {
    -webkit-transition: width .3s ease-in-out;
    -moz-transition: width .3s ease-in-out;
    -ms-transition: width .3s ease-in-out;
    transition: width .3s ease-in-out;
}

#content-comic-wrap {
    min-height: 100%;
}

/* #####                                           #####   #####   #####     #######
#     # # #####  ###### #####    ##   #####     #     # #     # #     #    #       # #    #
#       # #    # #      #    #  #  #  #    #    #       #       #          #       #  #  #
 #####  # #    # #####  #####  #    # #    #    #        #####   #####     #####   #   ##
      # # #    # #      #    # ###### #####     #             #       #    #       #   ##
#     # # #    # #      #    # #    # #   #     #     # #     # #     #    #       #  #  #
 #####  # #####  ###### #####  #    # #    #     #####   #####   #####     #       # #    #
*/

.page #sidenav,
.single #sidenav,
.single-comic #sidenav {
    top: 46px;
}

.page #sidenav,
.single #sidenav,
.single-comic.collapsed-header #sidenav {
    top: 0;
}

.single-comic .sidenav-next-page {
    height: auto;
}
/*
.single-comic .sidenav-loader-img {
    display: block;
}*/

/*
   #              ######
  # #   #####     #     # ###### #    #  ####  #    # ######
 #   #  #    #    #     # #      ##  ## #    # #    # #
#     # #    #    ######  #####  # ## # #    # #    # #####
####### #    #    #   #   #      #    # #    # #    # #
#     # #    #    #    #  #      #    # #    #  #  #  #
#     # #####     #     # ###### #    #  ####    ##   ######
*/

.no-ad-reminder {
    padding: .5em 0;
    text-align: center;
}

.no-ad-reminder p,
.no-ad-reminder a {
    color: #1A3A68;
    font-size: 1.5em;
    font-family: 'Oswald', sans-serif;
    font-weight: 100;
}

.no-ad-reminder a:hover {
    text-decoration: underline;
}

.no-ad-reminder a span {
    color: #C60A25;
    font-weight: 400;
}

.pagination .loader {
    min-height: 96px;
    background: transparent url(./style/loader-main.gif) no-repeat center/auto;
    display: none;
}

/*
######
#     #   ##   ##### #####  ######  ####  #    #
#     #  #  #    #   #    # #      #    # ##   #
######  #    #   #   #    # #####  #    # # #  #
#       ######   #   #####  #      #    # #  # #
#       #    #   #   #   #  #      #    # #   ##
#       #    #   #   #    # ######  ####  #    #
*/

.large-ad-wrapper {
    background-color: #cfd8e7;
    padding: 20px 0 0;
    text-align: center;
    margin: 0 340px 0 190px;
    display: none;
}

@media(max-width: 1300px) and (min-width: 0px) {
    .large-ad-wrapper {
        margin: 0 0 0 190px;
    }
}

@media (min-width: 767px) {
    .large-ad-wrapper{
       display: block;
    }
}
@media (min-width: 960px) {
    .large-ad-wrapper {
        display: block;
    }
}

.large-ad-wrapper iframe {
    display: block;
    margin: 0 auto;
}

#header {
    overflow: visible;
}

.patreon-menu,
.header-mini #patreon-header {
    display: none;
}
.header-mini #patreon-header-mini {
    display: inline-block;
}

#patreon-header-mini {
    display: none;
    height: 32px;
}

#patreon-header {
    display: inline-block;
    height: 64px;
}

#patreon-header-mini,
#patreon-header {
    background-color: rgba(255, 191, 1,1);
    float: right;
    font-family: 'Oswald', sans-serif;
    position: relative;
    padding: .5em 2em .5em 1em;
}

#patreon-header-mini:before,
#patreon-header:before {
    content: "";
    display: block;
    height: 0;
    width: 0;

    border-top: 40px solid transparent;
    border-right: 10px solid #ffbf01;
    border-bottom: 40px solid #ffbf01;
    border-left: 10px solid transparent;

    position: absolute;
    right: 100%;
    top: 0;
}

#patreon-header-mini:before {
    border-top: 18px solid transparent;
    border-right: 4px solid #ffbf01;
    border-bottom: 18px solid #ffbf01;
    border-left: 4px solid transparent;
}

#patreon-menu-state:checked ~ #header .patreon-menu
{
    display: block;
}

#patreon-header-mini {
    padding: .2em 2em .2em 1em;
}

#patreon-header-mini label,
#patreon-header label{
    color: #fff;
    text-align: right;
    text-transform: uppercase;
}

#patreon-header-mini label {
    font-size: 24px;
}

#patreon-header-mini label h1,
#patreon-header label h1 {
    font-size: 1.5em;
    margin: 0;
}

#patreon-header-mini label h1:nth-child(2),
#patreon-header label h1:nth-child(2) {
    margin-top: 10px;
    color: #8a0a17;
}

#patreon-header-mini label img {
    margin-bottom: -2px;
    border-radius: 1000px;
    height: 1.2em;
}

#patreon-header label img {
    border-radius: 1000px;
    height: 1.2em;
    margin-bottom: -5px;
}

#patreon-header.logged-in img {
    display: block;
    margin: auto;
    height: 2em;
}

.patreon-menu {
    background-color: rgba(255, 191, 1,.8);
    position: absolute;
    top: 100%;
    right: 0;
    width: 100%;
    margin: 0;

    list-style: none;
    padding: 10px;
}

#patreon-header-mini .patreon-menu {
    margin: 0 -10px;
}

#patreon-header .patreon-menu a,
#patreon-header-mini .patreon-menu a {
    color: #fff;
    text-transform: uppercase;
}

#patreon-header-mini .patreon-menu a:hover,
#patreon-header .patreon-menu a:hover{
    color: #8a0a17;
}

#patreon-header-mini .patreon-menu a {
    font-size: .8em;
}

@media(max-width: 900px) {
    .header-full #patreon-header{
        display: none;
    }
    .header-full #patreon-header-mini {
        display: block;
    }
}

@media(min-width: 900px) {
    #patreon-header-mini:hover .patreon-menu,
    #patreon-header:hover .patreon-menu {
        display: block;
    }
}
/*
#     #                     #####
#     # # #####  ######    #     #  ####  #    # #    # ###### #    # #####  ####
#     # # #    # #         #       #    # ##  ## ##  ## #      ##   #   #   #
####### # #    # #####     #       #    # # ## # # ## # #####  # #  #   #    ####
#     # # #    # #         #       #    # #    # #    # #      #  # #   #        #
#     # # #    # #         #     # #    # #    # #    # #      #   ##   #   #    #
#     # # #####  ######     #####   ####  #    # #    # ###### #    #   #    ####
*/

.hide-comments {
    text-align: center;
}

.hide-comments button {
    background-color: rgba(255, 191, 1,1);
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    color: #fff;
    font-size: 1.5em;
    font-weight: 300;
    outline: 0;
    text-transform: uppercase;

    transition: background-color .2s ease-in-out;
}

.hide-comments button:hover {
    background-color: rgba(200, 150, 1,1);
}

.hide-comments button:active {
    background-color: rgba(175, 130, 1,1);
    box-shadow: inset 0 1px 4px rgba(0,0,0, .5);
}

/*#     #                                   #####
##   ##  ####  #####  # #      ######    #     # #    # #####   ####   ####  #    # #  ####
# # # # #    # #    # # #      #         #       #    # #    # #    # #    # ##  ## # #    #
#  #  # #    # #####  # #      #####      #####  #    # #####  #      #    # # ## # # #
#     # #    # #    # # #      #               # #    # #    # #      #    # #    # # #
#     # #    # #    # # #      #         #     # #    # #    # #    # #    # #    # # #    #
#     #  ####  #####  # ###### ######     #####   ####  #####   ####   ####  #    # #  ####
*/

.mobile-subcomic {
    background-color: #142628;
    float: none;
}

.mobile-subcomic:after {
    content: '';
    display: table;
    clear: both;
}

.mobile-subcomic #home-menu-buttons-beginnings-thumb {
    display: inline-block;
    float: left;
}

.mobile-subcomic #home-menu-buttons-beginnings-detail {
    display: inline-block;
    float: left;
    height: auto;
    max-width: 128px;

    font-size: .8rem;
}

.mobile-subcomic #home-menu-buttons-beginnings-thumb p,
.mobile-subcomic #home-menu-buttons-beginnings-detail p {
    padding: 0;
    margin: 0;
}


.mobile-subcomic #home-menu-buttons-beginnings-thumb {
    width: 171px;
    height: 120px;
    display: inline-block;
}


@media(min-width: 500px) {
    .mobile-subcomic #home-menu-buttons-beginnings-thumb {
        height: 240px;
        width: 342px;
    }

    .mobile-subcomic #home-menu-buttons-beginnings-detail {
        font-size: 1rem;
        max-width: 250px;
    }
}

@media(min-width: 1400px) {
    .mobile-subcomic {
        display: none;
    }
}

@media(max-width: 410px) {
    #header {
        background-image: url('./style/header-logo-mini.png'); 
    }
}

/*
#    #   ##   # #    #       #####  #       ####   ####
##  ##  #  #  # ##   #       #    # #      #    # #    #
# ## # #    # # # #  # ##### #####  #      #    # #
#    # ###### # #  # #       #    # #      #    # #  ###
#    # #    # # #   ##       #    # #      #    # #    #
#    # #    # # #    #       #####  ######  ####   ####
*/

#main-blog {
    width: calc(100% - 340px - 190px);
    margin: 0;
    margin-left: 190px;
    padding: 0;
    position: relative;
}

@media (min-width: 0px) and (max-width: 1300px) {
    #main-blog {
        width: calc(100% - 190px);
    }
}

@media (max-width: 970px) and (min-width: 0px) {
    #main-blog {
        width: 100%;
        margin-left: 0;
    }
}

body > img {
    display: none;
}

.single #sidenav-header {
    padding-top: 10px;
}

.active .sidenav-blog-selector {
    background-color: rgb(200, 15, 33);
}

#main-blog #sidebar {
    height: 100%;
    left: 100%;
    top: 0;
    padding: 0 20px;
}

#main-blog #sidenav {
    right: 100%;
    height: 100%;
}

.blog-ad-wrapper {
    background-color: #cfd8e7;
    padding: 20px 0 0;
    text-align: center;
    display: none;
}

@media (min-width: 767px) {
    .blog-ad-wrapper{
       display: block;
    }
}

.blog-ad-wrapper iframe {
    display: block;
    margin: 0 auto;
}

#footer {
    padding: 20px 0;
    margin: auto;
    text-align: center;
    border-top: 4px solid #ffbf01;
    background-color: #c80f21;
    color: #fff;
}

#footer a {
    color: #fff;
}

#footer a:hover {
    text-decoration: underline;
}

.vsel-content {
    padding: 0 1em;
}

.current-storyline,
.previous-storylines {
    font-family: 'Oswald', sans-serif;
    font-weight: 300;
    padding: 6px 10px;
}

.current-storyline {
    background-color: rgba(255, 191, 1,1);
    color: #fff;
}

.previous-storylines {
    background-color: #091d3e;
    color: #366fcf;
}

/*#######
     #  ###### #####   ####  #    # ###### #####
    #   #      #    # #    # ##   # #        #
   #    #####  #    # #      # #  # #####    #
  #     #      #####  #  ### #  # # #        #
 #      #      #   #  #    # #   ## #        #
####### ###### #    #  ####  #    # ######   #
*/

*[id*="zergnet-widget"] {
    max-width: none !important;
    width: 100% !important;

    box-sizing: border-box;
    padding-top: 10px !important;
}

.zergrow {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

@media (min-width: 1300px) {
    .zergrow {
        flex-wrap: nowrap;
    }
}

*[id*="zergnet-widget"] .zergentity{
    margin-left: 6px !important;
}

*[id*="zergnet-widget"] .zergentity:nth-of-type(3){
    display: block !important;
}

.comic-page__wrapper {
    position: relative;
}