@media screen and (max-width: 1024px) {

}

@media screen and (max-width: 767px) {

    .main-page {
        background: none;
    }

    .bg-image-mobile {
        display: block;
        position: absolute;
        z-index: 1;
        width: 100%;
        height: 388px;
        overflow: hidden;
    }

    .bg-image-mobile img {
        display: block;
        width: auto;
        height: 100%;
        position: absolute;
    }

    .bg-overlay {
        height: 350px;
    }

    .main-logo {
        position: relative;
        left: unset;
        top: unset;
        width: 200px;
        height: 60px;
        margin: 40px auto;
    }

    .side-info {
        position: relative;
        width: 250px;
        height: 17px;
        right: unset;
        top: unset;
        margin: 0 auto 40px;
    }

    .main-info {
        position: relative;
        top: unset;
        left: unset;
        transform: none;
        width: 290px;
        margin: 0 auto;
        font-size: 20px;
    }

    .main-info .bold {
        font-size: 18px;
    }

    .chapters {
        top: 336px;
        bottom: unset;
    }

    .chapters .chapter {
        width: 100%;
    }

    .chapters .chapter a {
        width: 182px;
        margin: 0 auto;
    }

    .chapter-separator {
        height: 2px;
        width: 100%;
        margin-bottom: 30px;
    }

    .chapter-separator .separator {
        width: 180px;
        height: 2px;
        position: relative;
        margin: 0 auto;
    }

    .bottom-bg {
        display: none;
    }
}

@media screen and (max-width: 374px) {

}