/* **************** */
/* MOBILE OVERRIDES */
/* **************** */
@media only screen and (max-device-width: 736px) {
    /* Front Page */
    .home #page { background: none; min-width: unset; width: unset; height: unset; }
    .home #container {
        width: auto;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-orient: vertical;
        -moz-box-orient: vertical;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        /* optional */
        -webkit-box-align: start;
        -moz-box-align: start;
        -ms-flex-align: start;
        -webkit-align-items: flex-start;
        align-items: flex-start;
     }
    .home #header 	{width: auto; height: auto; }

    .home h1 {
        margin: 10px 0;
        height: auto;
        width: auto;
        overflow: unset;
        background: transparent url(mobile_header.png) no-repeat;
        background-size: contain;
    }

    .home h1 a {
        padding: 0;
        width: 100%;
        padding-top: 15.4%;
        line-height: 0;
        font-size: 0;
        color: transparent;
    }

    .home #nav {
        background-color: #240201;
        margin: 0 5px;
        border: 1px solid #c0ad77;
        border-left: 0;
        border-right: 0;
        border-radius: 5px;
    }

    .home #nav li {
        font-size: 16px;
    }
    .home #nav li:first-child {
        margin-left: 0;
    }
    .home #nav li:last-child {
        margin-right: 0;
    }

    .home #footer {
        position: relative;
        top: auto;
        margin-bottom: 30px;
        -webkit-box-ordinal-group: 4;
        -moz-box-ordinal-group: 4;
        -ms-flex-order: 4;
        -webkit-order: 4;
        order: 4;
    }

    /* Special Links */
    #speciallinks { 
        -webkit-box-ordinal-group: 3;
        -moz-box-ordinal-group: 3;
        -ms-flex-order: 3;
        -webkit-order: 3;
        order: 3;
        border-top: 3px ridge #81562e;
        padding-top: 10px;
        position: relative; top: unset; left: unset; width: 320px; margin: auto; }
    #speciallinks ul{ position: relative; margin: 0; padding: 220px 0 0 30px; width: 320px; margin: auto; }
    #speciallinks li{ position: unset; font: normal normal normal 22px/32px anastasia, serif; background: transparent url(nav_next_arrow.png) no-repeat left center; padding-left: 20px; }
    #speciallinks a	{ display: inline; text-indent: 0; overflow: unset; top: unset; left: unset; text-decoration: none; color: #ae9059; }
    #speciallinks a:hover { color: #efcc7f; }

    /* Special Links - Donate Button */
    #speciallinks #donate { position: absolute; top: 230px; left: 150px; width: 141px; height: 227px; padding: 0; overflow: hidden; background: transparent url(donate_button.png) no-repeat; }
    #speciallinks #donate a { position: absolute; width: 100%; height: 100%; text-indent: -9999px; overflow: hidden; }

    /* Special Links - DevLog */
    #speciallinks #devlog { position: relative; top: auto; left: auto; width: auto; height: auto; }
    #speciallinks #devlog a { width: inherit; height: inherit; }

    /* Special Links - Webtoon */
    #speciallinks #webtoon {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        margin: auto;
        padding: 0;
        background: transparent url(mobile_webtoon.png) no-repeat;
        font-size: 0; line-height: 0; color: transparent;
    }
    #speciallinks #webtoon a {
        width: 320px;
        height: 221px;
        display: block;
    }

    /* Comic Preview */
    #comicpreview { 
        -webkit-box-ordinal-group: 1;
        -moz-box-ordinal-group: 1;
        -ms-flex-order: 1;
        -webkit-order: 1;
        order: 1;
        margin: 20px auto;
        transform: none; text-align: center; position: relative; top: unset; left: unset; }

    #comicpreview::before {
        content: 'Latest Comic';
        display: block;
        font: normal normal normal 30px/42px anastasia, serif;
        color: #ae9059;
    }

    #comicpreview .caption { font-weight: normal; }

    #mobile_ks {
        -webkit-box-ordinal-group: 2;
        -moz-box-ordinal-group: 2;
        -ms-flex-order: 2;
        -webkit-order: 2;
        order: 2;
        display: block;
        margin: auto;
        border-top: 3px ridge #81562e;
        padding: 15px 0;
    }
    #mobile_ks img {
        display: block;
        max-width: 340px;
        width: auto;
        height: auto;
    }

    /* Patreon Cartouche override */
    .home #patreon_cartouche	{ position: fixed; top: unset; bottom: 0; right: unset; width:100%; height: 40px; background-image: none; background-color: #000; text-align: center; }
    .home #patreon_cartouche a { 
        display: inline-block; 
        height: unset;
        text-indent:unset;
        white-space: unset;
        overflow: unset;
        color: #cbbb9a; 
        text-decoration: none; 
        background: #000 url(mobile_patreon.png) no-repeat right; 
        background-size: contain;
        line-height: 30px;
        margin-top: 5px;
        padding-right: 40px;
        font-weight: bold;
    }

    /* No news in mobile site */
    #news { display: none; }
    .scrollgeneric { display: none; }
}