/*
	Repulsor by Happy Indra Wijaya
    https:github.com/hiwijaya/repulsor
	Free for personal and commercial use under the MIT license
*/
@media screen and (max-width: 800px) {

    body {
        font-size: 0.9em;
    }
    h1 {
        font-size: 2.1em;
    }
    h2 {
        font-size: 1.7em;
    }
    h3 {
        font-size: 1.3em;
    }
    h4 {
        font-size: 1.1em;
    }
    h5 {
        font-size: 0.9em;
    }
    h6 {
        font-size: 0.7em;
    }
    p {
        line-height: 1.3em;
    }






    /* index */
    #index .header {
        height: 70px;
    }
    #index .header a {
        margin-right: 20px;
    }
    #index .body {
        margin: 0 20px;
    }
    #index .body .heading {
        font-size: 1.4em;
    }
    #index .footer {
        margin: 0 20px;
    }
    #index .line {
        width: 70px;
        margin-right: 20px;
    }
    #index .account-box {
        width: 150px;
    }
    /* index */

    /* about */
    #index .body .about h1 {
        font-family: 'Orbitron', sans-serif;
        font-weight: 900;
        margin-bottom: 10px;
    }
    #index .body .about p {
        max-width: 800px;
    }
    /* about */

    #container {
        flex-direction: column;
        height: auto;
    }

    /* sidebar */
    #sidebar {
        width: 100%;
    }
    #sidebar-mobile {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        width: 100%;
        height: 50px;
        padding: 0 20px;
    }
    .menu-title {
        font-family: 'Orbitron', sans-serif;
        font-size: 0.8em;
        flex: 1;
        color: #FFF;
    }
    .menu-title a {
        color: #FFF;
    }
    .menu-icon {
        display: inline-block;
        cursor: pointer;
    }
    .menu-icon .bar1, .bar2, .bar3 {
        width: 25px;
        height: 2px;
        background-color: #FFF;
        margin: 6px 0;
        transition: 0.4s;
        -webkit-transition: 0.4s;
        -moz-transition: 0.4s;
        -ms-transition: 0.4s;
        -o-transition: 0.4s;
    }
    .change .bar1 {
        transform: rotate(-45deg) translate(-6px, 5px);
        -webkit-transform: rotate(-45deg) translate(-6px, 5px);
        -moz-transform: rotate(-45deg) translate(-6px, 5px);
        -ms-transform: rotate(-45deg) translate(-6px, 5px);
        -o-transform: rotate(-45deg) translate(-6px, 5px);
    }
    .change .bar2 {
        opacity: 0;
    }
    .change .bar3 {
        transform: rotate(45deg) translate(-6px, -5px);
        -webkit-transform: rotate(45deg) translate(-5px, -5px);
        -moz-transform: rotate(45deg) translate(-5px, -5px);
        -ms-transform: rotate(45deg) translate(-5px, -5px);
        -o-transform: rotate(45deg) translate(-5px, -5px);
    }
    .sidebar-desktop {
        visibility: hidden;
        height: 0;
        padding: 0 0 0 0;
        margin: 0 20px 0 20px;
        text-align: center;
        transition: height 0.7s, visibility 0.2s;
        -webkit-transition: height 0.7s, visibility 0.2s;
        -moz-transition: height 0.7s, visibility 0.2s;
        -ms-transition: height 0.7s, visibility 0.2s;
        -o-transition: height 0.7s, visibility 0.2s;
    }
    .sidebar-responsive {
        visibility: visible;
        height: 120px;
        padding: 0 0 10px 0;
    }
    .sidebar-header {
        justify-content: center;
        align-items: center
    }
    .sidebar-title, .sidebar-subtitle, .sidebar-menu .separator,
    .sidebar-footer .credit-box {
        display: none;
    }
    .sidebar-menu {
        flex-direction: column;
    }
    .sidebar-menu a{
        padding-bottom: 10px;
    }
    .sidebar-footer .account-box {
        justify-content: center;
        margin-bottom: 0;
    }
    /* sidebar */


    /* content */
    #content {
        max-height: none;
    }
    /* content */

    /* 404 */
    #page404 .title {
        font-size: 3em;
    }
    /* 404 */


}