@media screen and (max-width: 1000px){
    .container{
        width: 98%;
        overflow: hidden;
    }
    .nav li{
        padding: 0 7px;
    }
    .header .container.book:after {
        right: -29%;
        top: 23%;
        width: 89%;
        height: 100%;
        background-size: contain;
    }
    .info{
        width: 54%;
    }
    .subject ul{
        width: 98%;
        margin: auto;
    }
    .reader ul{
        width: 25%;
    }
    .reader .img_block{
        width: 45%;
    }
    .reader .img_block img{
        background-size: contain;
        width: 100%;
    }
    .reader ul.left{
        padding-left: 30px;
    }
}

@media screen and (max-width: 900px){
    .header .container.book:after {
        top: 15%;
    }
    .info{
        padding-top: 60px;
        padding-bottom: 100px;
    }
    .info h1{
        font-size: 35px;
    }
    .therapy p{
        width: 95%;
        margin: auto;
    }
    .therapy.bottom li:last-child p {
        width: 60%;
    }
    .therapy.bottom li:first-child p {
        width: 60%;
    }
    .order .text_bottom h3 {
        font-size: 24px;
    }
    .footer p{
        text-align: center;
    }
}
@media screen and (max-width: 850px){
    .top-header{
        position: relative;
    }
    .menu-button{
        display: block;
        position: fixed;
        top: 11px;
        background: rgba(3,123,205, 0.5);
    }
    .nav{
        display: none;
    }
    .top-header{
        border-bottom: none;
    }
    .reader li {
        position: relative;
        padding: 0 0 30px 25px;
        line-height: 27px;
    }
    .footer ul li {
        display: block;
        width: 30%;
        margin: 20px auto;
    }
    .footer p{
        padding-top: 20px;
    }
}
@media screen and (max-width: 800px){
    .therapy.bottom li:last-child p, .therapy.bottom li:first-child p {
        width: 55%;
    }
    .info h1{
        font-size: 30px;
    }
    .info p{
        font-size: 28px;
    }
    .order .img_bottom, .order .text_bottom{
        float: none;
        width: 80%;
        margin: auto;
        text-align: center;
    }
    .order .img_bottom img{
        background-size: contain;
        width: 100%;
    }
}
@media screen and (max-width: 700px){
    .reader ul {
        width: 70%;
        float: none;
        margin: auto;
    }
    .reader .img_block{
        width: 60%;
        float: none;
        margin: auto;
    }
    .reader li:before{
        top: 0;
    }
    .therapy.bottom li:last-child p, .therapy.bottom li:first-child p {
        width: 80%;
        margin: auto;
        float: none;
    }
    .therapy.bottom li:first-child, .therapy.bottom li:last-child {
        float: none;
        padding-top: 10px;
        margin: auto;
        display: block;
        padding-bottom: 10px;
        background-size: contain;
        width: 100%;
    }
    .therapy.bottom li:first-child figure, .therapy.bottom li:last-child figure{
        float: none;
        display: block;
        margin: auto;
    }
}
@media screen and (max-width: 650px){
    .info {
        padding-top: 50px;
        padding-bottom: 100px;
        width: 98%;
        margin: auto;
    }
    .header .container.book:after {
        right: -20%;
        width: 70%;
        top: 46%;
        height: 56%;
    }
    .mobile-menu-wrapper{
        width: 95%;
    }
}
@media screen and (max-width: 550px){
    .mobile-menu-wrapper {
        width: 111%;
    }
    .header .container.book:after {
        top: 56%;
    }
    .footer ul li {
        width: 74%;
    }
    .footer p{
        width: 80%;
        margin: auto;
    }
}
@media screen and (max-width: 450px){
    .info p {
        font-size: 23px;
        line-height: 30px;
    }
    .btn {
        width: 56%;
        padding: 11px 0;
        font-size: 18px;
    }
    .order .btn{
        width: 74%;
    }
    .mobile-menu-wrapper {
        width: 140%;
    }
    .mobile-menu-wrapper .mobile-menu-container ul.menu1 > li > a {
        padding: 10px 30px 10px 10px;
        font-size: 14px;
    }
}
@media screen and (max-width: 380px){
    .info h1 {
        font-size: 25px;
    }
    .info p{
        font-size: 20px;
    }
    .footer ul li {
        width: 65%;
    }
    .order .img_bottom, .order .text_bottom {
        width: 90%;
    }
    .reader ul {
        width: 83%;
    }
    .reader .img_block {
        width: 80%;
    }
    .therapy p{
        width: 100%;
    }

}
@media screen and (max-width: 340px){
    .mobile-menu-wrapper .mobile-menu-container ul.menu1 > li > a {
        padding: 10px 30px 10px 7px;
        font-size: 13px;
    }
    .btn{
        font-size: 16px;
    }
    .header .container.book:after {
        width: 79%;
        top: 61%;
    }
    .therapy.bottom li:last-child p, .therapy.bottom li:first-child p {
        width: 90%;
    }
}