@media (max-width: 1239px){
    header, .box-wrapper header{
        /* width: calc(100% - var(--sidebar-l)); */
    }

    .contents, .box-wrapper .contents{
        /* margin-left: var(--sidebar-l); */
    }
}

@media (max-width: 1110px){
    .p-user .two-col{
        flex-direction: column;
    }

    .p-user .two-col > div:nth-child(1){
        max-width: 100%;
        flex-direction: row;
        flex-wrap: nowrap;
        margin-top: 0px;
        overflow: visible;
        align-items: center;
        padding: 0px 15px;
        box-shadow: var(--shadow-0);
        position: relative;
        top: 0;
    }

    .p-user .two-col > div:nth-child(1) .item-images.user{
        width: 180px;
        height: 180px;
        margin: -45px 0px 0px 0px;
        z-index: 1;
    }

    .p-user .user-info > div:nth-child(1){
        margin-bottom: -5px;
    }

    .p-user .user-info > div:nth-child(2){
        flex-direction: row;
        order: 3;
    }

    .p-user .user-info{
        gap: 10px;
        flex: 1;
        width: 100%;
        min-width: 55%;
        align-items: self-start;
    }

    .p-user .user-info .item-name{
        width: max-content;
        text-align: left;
        display: flex
;
    flex-direction: column;
    }

    .p-user .user-metrics{
        flex-direction: row;
        align-items: center;
    }

    .p-user .user-metrics .item-top{
        flex-direction: row;
        width: auto;
    }

    .p-user .user-metrics .item-group i{
        font-size: inherit;
    }

    .p-user .user-metrics .anim-arrow{
        line-height: 0;
    }

    .p-user .user-metrics .item-group{
        flex-direction: row;
        padding: 0;
        box-shadow: var(--shadow-0);
        flex: none;
    }

    .user-info .full button{
        width: fit-content;
    }

    .user-metrics .item-top span{
        width: max-content;
        display: flex;
    }

    .user-metrics .item-descr{
        display: none;
    }

    .p-user .all-gift{
        justify-content: center;
        align-items: end;
        display: none;
    }

    .p-user .last-book{
        display: none
    }

    .p-user .social-btn{
        display: none;
    }

}

/* mobile */
@media (max-width: 1024px){
    .r-sidebar{
        display: none !important;
        background-color: var(--main-div);
    }

    .box-wrapper .b-coockie form{
        max-width: 100%;
    }
}

@media only screen 
and (min-device-width: 871px) 
and (max-device-width: 2000px) 
/*and (orientation: portrait) */
{
    .tablet-only{
        display: none !important;
    }
}

@media (max-width: 870px){
    :root { 
        --sidebar-l: 70px;
        --sidebar-l-full: 210px;
    }

    .div-item{
        box-shadow: var(--shadow-0);
        padding: 20px 0px 10px;
    }

    .x2col{
        flex-direction: column;
    }

    .x2col > div{
        width: 100% !important;
    }

    form.sticky{
        position: relative;
        top: 0;
    }

    .header-container {
        flex-wrap: wrap;
        padding-bottom: 0;
    }
    
    .header-left {
        flex: 1;
        margin-bottom: 0;
    }
    
    .search-form {
        order: 3;
        flex: 0 0 100%;
        margin: 0px 0 0;
        max-width: 100%;
        display: none;
    }

    .search-open .header-left, .search-open .header-right{
        display: none;
    }    

    .search-form.active {
       display: flex;
    }
    
    .mobile-menu-toggle,
    .mobile-search-toggle {
        display: block;
    }
    
    .catalog-btn{
        width: 44px;
    }

    .catalog-btn span{
        display: none;
    }
    
    .catalog-menu {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        margin: 0;
        width: 80%;
        max-width: 380px;
        min-width: 320px;
        height: calc(100vh - 64px);
        border-radius: 0;
        transition: left 0.3s ease;
    }
    
    .catalog-menu.active {

    }


    .catalog-menu-list{
        background-color: var(--main-div);
    }

    .catalog-menu-link{
        color: inherit;
    }
    
    .catalog-menu-item {
        position: inherit;
    }
    
    body.menu-open,
    body.search-open,
    body.drop-open {
        overflow: hidden;
    }


    body.menu-open .overlay,
    body.search-open .overlay,
    body.drop-open .overlay,
    body.mtab-open .overlay,
    body.user-panel-open .overlay{
        opacity: 1;
        display: flex;
    }

    body.menu-open .header,
    body.search-open .header,
    body.drop-open .header,
    body.mtab-open .header{
        box-shadow: none;
        z-index: 1;
    }

    body.user-panel-open .header{
        z-index: 2;
    }

    body.user-panel-open .header:after{
        content: '';
        left: 0;
        right: 0;
        width: 100%;
        position: absolute;
        height: 100%;
        background-color: #00000075;
    }


    .header-drop.open .header-drop-menu{
        display: flex !important;
    }

    body.search-open .header {
        z-index: 2;
    }

    .drop-open .d-flex.i0, .mtab-open .d-flex.i0{
        z-index: auto;
    }

    .drop-open .item .item-menu{
        z-index: auto;
    }

    .catalog-menu-item:hover .submenu{
        display: none;
    }


    .drop-open #form_sort_books{
        z-index: auto;
    }

    .item-menu-body{
        z-index: 2;
        position: fixed;
        left: 0;
        overflow: auto;
        width: 100%;
        max-height: 70vh;
        height: fit-content;
        bottom: 0;
    }

    .book-filter{
        flex-wrap: nowrap;
        gap: 10px;
        overflow: auto;
        padding-bottom: 8px;
    }

    .filters-view{
        display: none;
    }

    .submenu{
        position: absolute;
        height: 100vh;
        width: 100%;
        flex-direction: column;
        overflow: auto;
        background-color: white;
        z-index: 3;
        flex-wrap: nowrap;
        padding: 0px;
        top: 0px;
        left: 0;
        bottom: 0;
    }

    .submenu > div.elements{
        padding: 15px;
    }

    .catalog-menu-head{
        display: flex;
        position: sticky;
        top: 0;
    }

    .catalog-menu-list{
        width: 100%;
    }

    .elements.max > ul > li{
        min-width: 100%;
        max-width: 100%;
    }

    .sidebar-l{
        display: none;
    }

    .tablet-only{
        display: flex !important;
    }

    .l-sidebar:hover{
        width: var(--sidebar-l-full);
        position: absolute;
        z-index: 3;
    }

    .l-sidebar:hover .navi{
        width: 100%;
    }

    .l-sidebar:hover .navi span, .l-sidebar:hover .navi .form-check {
        display: flex;
    }

    .item-pagination{
        overflow: auto;
    }

    .navi{

    }

    .navi-level > li > a{
        height: 40px;
        justify-content: center;
    }

    .navi span, .navi .form-check{
        display: none;
    }

    .nav_one {
        width: 100%;
        overflow: auto;
        flex-wrap: nowrap;
        padding-bottom: 15px;
    }

    .page{
        padding: 15px;
        gap: 15px;
    }

    .p-book .page-body{
        flex-direction: column;
        margin-top: -240px;
        z-index: 1;
    }

    .p-book .page-background{
        display: flex;
        min-height: calc(100vh / 2.5);
        max-height: 400px;
        display: none;
        width: 100%;
    }

    .box-wrapper .b-coockie {
        padding-left: calc(70px + 15px);
        padding-right: 15px;
    }

    .tab-menu > li > a{
        padding: 15px;
        height: auto;
    }

    .contents, .box-wrapper .contents{
        margin-right: 0;
        max-width: calc(100% - 70px);
        width: 100%;
    }

    .h-logo{
        padding: 0px;
        align-items: center;
        justify-content: flex-start;
    }

    .h-user .header-drop .item-user-notification{
        right: 7px !important;
    }

    .h-search > form {
        max-width: 100%;
    }

    .h-search-result .content_tab .sticky{
        min-height: fit-content;
    }

    .search-open .h-search-result{
        width: calc(100% - 30px);  
        flex-direction: column;
    }

    .mega-menu{
        display: none;
    }

    .mega-menu.activated {
        position: fixed;
        left: 0;
        display: flex;
        flex-direction: column;
        background-color: #ffffff;
        width: 320px;
        height: 100vh;
        z-index: 10;
        overflow: auto;
        bottom: 0;
        left: 0;
        right: 0;
        top: 0;
        padding: 15px;
    }

    .in-mask:before .mega-menu.activated{
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
        z-index: 1;
    }

    .mega-menu li, .mega-menu li > a{
        width: 100%;
    }

    .h-user{

    }

    .header-drop{
        position: unset;
    }

    .header-drop > a{
        padding: 0;
    }

    .header-drop > a > span{
        display: none;
    }

    .header-drop > a > img{
        width: 36px;
        height: 36px;
        border-radius: 7px;
    }

    .header-drop-menu{
        min-width: 320px;
        left: 0;
        top: 0;
        height: 100vh;
        border: 0;
        border-radius: 0px;
        display: none !important;
    }
    
    .header-drop-menu.activated{
        display: flex !important;
    } 

    .p-user .p-user-head-bottom{
        flex-direction: column;
        width: 100%;
        align-items: center;
        margin: 0;
    }

    .p-user .p-user-head-bottom .item-center{
        align-items: center;
        text-align: center;
    }

    .p-user .p-user-head-bottom .item-center .item-name{
        width: 100%;
    }

    .tab-menu {
        flex-direction: row;
    }

    .tab-menu > a{
        padding: 10px;
    }

    .zzzzzzz{
        flex-direction: column;
    }

    .mini .item-images{
        width: 50px !important;
        margin: 0;
    }


    .item-menu.open .item-menu-body, .item-menu-body.activated {
        width: calc(100% - 0px);
        position: fixed;
        right: 0;
        top: auto;
        bottom: 0;
        left: 0;
        max-height: calc(100vh / 1.4);
        z-index: 2;
        border-radius: 15px 15px 0px 0px;
    }

    .item-menu-body button{
        padding: 10px 15px;
    }

    .items, .view-grid{
        flex-wrap: wrap;
        flex-direction: row;
    }

    .view-grid .b-card{
        width: calc((100% / 2) - 15px);
        flex-direction: column;
    }
    
    .view-grid .b-card .item-images {
        max-width: none;
        width: 100%;
        max-height: 200px;
        overflow: hidden;
    }

    .ul-column.three > li{
        width: calc((100% / 2) - 10px);
    }

    .mtab-open .tab-pane.show{
        position: fixed;
        top: 0;
        width: 100%;
        left: 0;
        right: 0;
        z-index: 3;
        background-color: white;
        padding: 0px 15px 15px 15px;
        height: 100%;
        overflow: auto;
        bottom: 0;
        width: inherit;
    }


    .mtab-open .tab-pane.show .page-head{
        height: auto;
        position: sticky;
        padding: 20px 0px;
        right: 0;
        top: 0px;
        z-index: 2;
        align-items: center;
        justify-content: space-between;
        border-radius: inherit;
        width: calc(100% + 0px);
        margin: 0px 0px 0px 0px;
    }

    .mtab-open .tab-pane.show .page-head::before{
        content: '';
        width: calc(100% + 30px);
        height: 100%;
        background: var(--main-bg);
        position: absolute;
        left: -15px;
    }

    .mtab-open .tab-pane.show .page-head .modal-btn-close{
        position: relative;
    }

    .user-content{
        flex-direction: column-reverse;
    }

    .user-content > div{
        max-width: 100% !important;
    }

    .p-user-head-top .swiper{
        display: none !important;
    }

        header, .box-wrapper header{
        padding: 15px;
    }

    .header-right{
        width: auto;
    }

}



















/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width: 668px) 
and (max-device-width: 870px) 
/*and (orientation: portrait) */
{
    .tablet-only{
        display: flex !important;
    }
}




















@media (max-width: 668px){

    body{
        background: var(--main-div);
        font-size: 17px;
        min-height: auto;
    }

    .i0{
        flex-direction: column;
    }

    #wrapper{
        min-height: auto;
    }

    .r-sidebar{
        display: flex !important;
        width: 100%;
    }

    .r-sidebar .item-user-images {
        width: 60px;
        height: 60px;
    }

    .p-main{
        gap: 35px !important;
    }

    .audioplayer{
        border-radius: 15px !important;
        padding: 15px!important;
    }

    .player{
        width: 100%;
    }

    .player .flex-column-reverse{
        width: 100%;
    }

    .player .track-info{

    }

    .player-track{
        width: 100%;
        justify-content: center;
        align-items: center;
    }

    .player .title{
        justify-content: center;
    }

    .item-name > a > h3 {
        opacity: 1;
        font-size: 15px;
        font-weight: 600;
    }

    .item-author{
        font-size: 12px;
    }

    #wrapper{
        flex-direction: column;
    }

    .header{
        background: linear-gradient(125deg, #4c45ab, #7770d6);
    }

    .header-drop > a{
        opacity: 1;
    }

    .header-drop > a > i{
        color: white;
    }

    .item{
        padding: 0px;
        box-shadow: var(--shadow-0);
        align-items: flex-start;
    }

    .card-reklam-slider{
        align-items:center;
    }

    .card-book .item-images {
        width: auto;
    }

    .m-col{
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    .contents, .box-wrapper .contents{
        margin-left: 0;
    }

    .tablet-only{
        display: none !important;
    }

    .c-2 > div > img {
        width: 310px;
    }

    .vk-vidjty{
        width: 100% !important;
    }

    .vk-vidjty iframe{
        width: 100% !important;
    }

    .item-pagination > a{
        display: none;
    }

    .page-background {
        min-height: auto;
        border-radius: 0px;
        top: -25px;
    }

    .h-user {
        padding: 0px;
    }

    .header-drop .item-user-notification{
        right: 15px !important;
        left: auto;
    }

    .box-wrapper .b-coockie, .b-coockie{
        padding: 0 7.5px;
    }

    .add-comment-form{
        width: 100%;
    }

    /* user */


    /* p-book */
    .p-book .page-background{
        display: flex;
        border-radius: 0px;
        left: -15px;
        width: calc(100% + 30px);
        height: 300px;
    }

    .p-book .p-book-head{
        flex-direction: column;
        padding: 0px;
        align-items: center;
        background-color: transparent;
        top: 0px;
    }

    .p-book .page-right .tab-pane .book-btns{
        display: none;
    }

    .p-book .card-book.big .book-buttons .book-btns{
        display: flex;
    }

    .p-book .item.big {
        max-width: 300px;
        min-width: 80%;
        align-items: center;
        background-color: transparent;
        margin-top: -325px;
    }

    .p-book .item.big .item-images {
        z-index: 0;
        width: 85%;
    }

    .p-book .item.big .item-images .item-cover > a{
        border-radius: var(--br-alt);
    }

    .p-book .item.big .item-center .item-top{
        align-items: center;
    }

    .tab-menu {
        flex-direction: column;
    }

    .tab-menu > li {
        width: 100%;
    }

    .tab-menu > li > a{
        border: 0px !important;
        border-radius: var(--br-main);
        height: auto;
    }

    .tab-menu a:hover {
        opacity: 1;
        background-color: #4f48ae;
        color: white;
    }

    .nav-drop > li > a {
        padding: 10px 5px;
        height: auto;
    }

    .modal.show .modal-login{
        align-items: center;
        display: flex;
        margin: auto;
        height: 100%;
    }

    .b-coockie form{
        gap: 7.5px;
        bottom: 70px;
        position: relative;
        text-align: center;
        flex-direction: column;
    }

    .b-coockie form button{
        width: 100%;
    }

    .tab-menu{
        gap: 5px;
    }

    .tab-menu a{
        height: 44px;
        box-shadow: 0px 0px 15px #848484f5;
    }

    .div-head {
        max-width: 100%;
    }

    .c-1, .c-2, .c-3, .c-4{
        flex-direction: column !important;
    }

    .x2 .item, .x3 .item, .x4 .item, .x5 .item, .x6 .item{
        width: 100% !important;
    }

    .v-tab{
        flex-direction: column;
    }

    .v-tab .nav{
        width: 100% !important;
        min-width: 100%;
    }

    .ul-column.three > li{
        width: 100%;
    }

    .l-sidebar, .l-sidebar-fake, .navi{
        display: none;
        gap: 30px;
    }

    .contents, .box-wrapper .contents{
        width: 100%;
        max-width: 100%;
    }

    .mobile-only{
        display: flex !important;
    }
        
    .pc-only{
        display: none !important;
    }

    .offcanvas {
        width: 100%;
    }

    .mobile-bottom{
        display: flex;
    }

/*   */

    /* item list*/

/* item grid*/
    .view-grid .item{
        width: 100% !important;
    }

/* page form */

    .add-form {
        flex-direction: column !important;
    }

    .add-form-blog .block-left {
        width: 100% !important;
    }

    .add-form .block-left {
        width: 100%;
    }

    .my-form{
        flex-direction: column !important;
    }

    .my-form .block-left {
        margin-bottom: 10px;
    }

    .btn-and-text{
        flex-direction: column;
    }

    .page-book-add-f .my-form > label {
        width: 100%;
        margin: 5px 0px 10px 0px;
    }

    .p-audiobook .audiobook-heading .page-title{
        width: 100%;
        padding: 45px 20px 20px;
    }

    .p-audiobook .audiobook-heading{
        background-image: none;
    }

    /* page */

    /* blog */

    /* modal */

    /* filter */

    .sorning-name-list{
        margin-bottom: -100px;
    }

    .sorning-name-list.activated{
        display: block;
        z-index: 44;
        position: fixed;
        width: calc(100% - 20px);
        bottom: 10px;
        left: 10px;
        height: min-content;
        margin-bottom: 0px;
        transition: all 5s;
    }

    /* player */
    .player{
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .player-controls{
        flex-direction: row;
        margin: 10px 0px;
    }

    .player-cover .cover {
        height: 150px;
        width: 150px;
        border-radius: 100px;
    }

    /* form */
    .add-book-form{
        flex-direction: column;
    }

    .add-book-form .block-left{
        width: 100%;
    }

    /* lp */
    .b-card, .view-grid .b-card{
        width: 100%;
        flex-direction: column;
    }

    .card-book{
        flex-direction: row;
    }

    .card-book .item-start{
        width: 25%;
    }

    .b-card .item-images, .view-grid .b-card .item-images {
        max-width: none;
        width: 100%;
        max-height: 200px;
        overflow: hidden;
        margin: 0px;
    }

    .card-reklam-slider .item-images{

    }

    /* p-user*/
    .p-user .two-col > div:nth-child(1){
        flex-direction: column;
        position: relative;
        background-color: transparent;
    }

    .p-user-head .page-background{
        margin-bottom: -40px;
    }

    .p-user .user-info {
        gap: 10px;
        align-items: center;
    }

    .p-user .two-col {
        top: -105px;
        position: relative;
    }

    .p-user .two-col > div:nth-child(1) .item-images {
        margin: 0px;
        top: 0;
        left: 0;
        width: 60%;
        height: auto;
    }

    .p-user .user-metrics {
        flex-direction: column;
        width: auto;
    }

    .p-user .user-metrics .item-group i{
        font-size: 21px;
    }

    .p-user .user-info .item-name {
        text-align: center;
    }

    .all-gift {
        justify-content: center;
        align-items: center;
    }

    .p-user .user-metrics {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        gap: 30px;
        margin-top: 25px;
    }

    .p-user .user-metrics .item-top {
        width: 100%;
    }

    .p-user .user-metrics .item-top .item-group {
        flex-direction: column;
        flex: 1;
        padding: 5px;
        min-width: 32%;
    }

    .p-user .user-metrics .item-top i {
        display: flex;
    }

    .p-user .user-metrics .item-top span {
        display: flex;
        opacity: 0.7;
        font-size: calc(100% - 2px);
    }

    .p-user .two-col > div:nth-child(1){
        z-index: auto;
    }

    .p-user .user-metrics .anim-arrow {
        width: auto;
        justify-content: center;
    }

    .p-user .user-info > div:nth-child(2) {
        order: unset;
        justify-content: center;
        align-items: center;
        width: fit-content;
    }

    .p-user .user-info > div:nth-child(1) {
        margin-bottom: 0px;
        align-items: center;
    }

    .heading-button{
        display: none;
    }

    .p-book .tab-pane .items.in-author{
        flex-direction: column;
    }

    .p-book .tab-pane .items.in-author .item{
        max-width: 100%;
    }

    .p-book .tab-pane .items.in-author .item-tags{
        display: none;
    }

    .b-card{
        margin-bottom: 15px;
    }

    .mtab-open.no-scroll.drop-open .item-menu{

    }

    .mtab-open.no-scroll.drop-open .item-menu.open:after{
        content: '';
        background-color: #0000007d;
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 2;
    }

    .mtab-open.no-scroll.drop-open .item-menu-body{
        z-index: 3;
    }

    .item-breadcrumbs{
        padding: 15px;
    }

    .p-user-head .p-user-head-top{
        margin: 0px 0px 0px -15px;
    }

    .user-panel-open .header-drop-menu .nav-drop{
        overflow: auto;
        padding: 15px 0px;
    }


    .sidebar-open .l-sidebar{
        display: flex;
        position: fixed;
        width: 100%;
        max-width: 320px;
        z-index: 3;
        max-height: 100%;
    }

    .sidebar-open .l-sidebar, 
    .sidebar-open .l-sidebar-fake, 
    .sidebar-open .navi,
    .sidebar-open .navi span, 
    .sidebar-open .navi .form-check {
        display: flex;
    }

    .sidebar-open .navi span{
        flex:1;
    }

    .navi-level{
        padding: 15px 0px 0px;
    }

    .navi-level > li > a.active, 
    .navi-level > li:hover a.active{
        background-color: transparent;
    }

    .navi-level > li > a.active .dot-var .dott, 
    .navi-level > li:hover a.active .dot-var .dott{
        display: flex;
    }

    .navi-level > li > a {
        padding: 15px 0px 15px 5px;
    }

    .p-reader{
        padding: 15px 25px !important;
    }

    .item-pagination.reader{
        flex-direction: column !important;
    }

    .item-pagination.reader > a{
        width: 100%;
    }

    .read-progress-cont{
        top: 0;
        height: 10px;
    }


    .side-site .l-sidebar .item-user{
        display: none !important;
    }

    .side-lk .l-sidebar .logo{
        display: none !important;
    }

    .slider-btn{
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
    }

    .slider-btn > div{
        left: 0px !important;
        right: 0px !important;
    }

    .description_autohide{
        -webkit-line-clamp: unset;
        overflow: visible;
        height: max-content;
        display: flex;
    }

    .descr-toggle-btn{
        display: none;
    }

    .video-element{
        
    }

    .card-book.big > .item-menu{
        right: 30px;
    }

    .item-center{
        min-height: auto;
    }

    .card-user.resize{
        flex-direction: column;
    }

    .card-user.resize .item-user{
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .card-user.resize .item-user-info{
        width: auto;
    }

    .card-user.resize .item-user-info > div{
        text-align: center;
    }

    .card-user.resize .item-end,
    .card-user.resize .item-user-info > div > *{
        width: 100%;
    }

    .card-user.resize .item-bottom,
    .card-user.resize .item-button{
        justify-content: center;
    }
}