@media screen and (max-width: 1920px) {
    header aside {width: 23.5%}
    header form:not(.search-form) {width: 43.3%}
    header .user-nav, header .logged-user {width: 33.2%}
}

@media screen and (max-width: 1600px) {
    header aside {width: 18.2%}
    header form:not(.search-form) {width: 52%}
    header .user-nav, header .logged-user {width: 29.8%}
}

@media screen and (max-width: 1440px) {
    .sidebar {min-height: calc(100vh - 66px); margin: 66px 0 0}
    main {margin-top: 66px}
    header aside {width: 19.6%}
    header form:not(.search-form) {width: 51.3%}
    header .user-nav, header .logged-user {width: 29.1%}
}

@media screen and (max-width: 1366px) {
    .sidebar {width: 235px}
    main {width: calc(100% - 235px)}
    main .latest-news .news-slider .slick-track > li .news-image h3 {font-size: 14px; line-height: 20px}
    main .latest-news .news-slider .slick-track>li .news-image {height: 150px}
    .sidebar ul.sidebar-nav {margin-bottom: 70px}
    .mfp-container {padding: 0}
    header aside {width: 18%}
    header form:not(.search-form) {width: 52.3%}
    header .user-nav, header .logged-user {width: 29.7%}
    main .posts .post-item .post-content aside:not(.post-image-wrapper) .main-image, main .posts .post-item .post-content aside .thumbnail-wrapper, main .posts .post-item .post-content aside:not(.post-image-wrapper) .image-grid { height: 350px}
    header .logged-user > li { width: 20px; height: 20px}
    header .logged-user > li:nth-child(3),
    header .logged-user > li:nth-child(4) { width: 16px; height: 16px}
    header .logged-user > li:nth-child(5) { width: 34px; height: 34px}
    main .heading-filter .category-heading img { width: 27px; height: 27px}
    .user-tab ul li a { font-size: 13px}
    
    .ql-video {height: 400px;}
}

@media screen and (max-width: 1280px) {
    header aside {width: 19%}
    header form:not(.search-form) {width: 51.6%}
    header .user-nav,
    header .logged-user {width: 29.4%}
    main .posts .post-item .post-content aside:not(.post-image-wrapper) .main-image,
    main .posts .post-item .post-content aside .thumbnail-wrapper,
    main .posts .post-item .post-content aside:not(.post-image-wrapper) .image-grid {height: 300px}
    main .posts .post-item .post-content article p,
    main .mainwrapper>aside .announcements .announcement-content p,
    main .mainwrapper>aside .community-posts .posts-list li a .post-content p,
    .comments-wrapper .comment-list-wrapper>ul>li .comment-main article p,
    .notice p,
    .user-comments>ul.user-comments-list>li .comment-main article p {font-size: 15px;line-height: 1.5}
    .notifications-page .notifications-list>li>a article p {font-size: 15px;line-height: 1.3}
    .notifications-page .notifications-list>li>a {width: calc(100% - 50px)}
    main .posts .post-item .post-content aside .image-grid .last-image .more-count {font-size: 20px}
    .user-comments>ul.user-comments-list>li .comment-main .comment-author {margin-bottom: 15px}
    .user-tab ul li {width: calc(100% / 2 - 10px)}
    .user-tab ul {gap: 20px 0}
    .user-tab ul li a {font-size: 14px}
}

@media screen and (max-width: 1180px) {
    .sidebar {display: none}
    header .logod {display: none}
    header aside .mobnav,
    header .user-nav button,
    header .logged-user>li:first-child button {display: block}
    main {width: 100%}
    header {padding: 14.5px 15px}
    header form:not(.search-form) {display: none}
    header .pagewrapper {justify-content: space-between }
    main .posts .post-item .post-content aside:not(.post-image-wrapper) .main-image,
    main .posts .post-item .post-content aside .thumbnail-wrapper,
    main .posts .post-item .post-content aside:not(.post-image-wrapper) .image-grid {height: 350px}
    header aside {align-items: center;gap: 10px}
    header .user-nav,
    header .logged-user {width: 50%}
    header aside {width: 50%}
    main .mainwrapper>aside .announcements {display: none !important}
    header aside .logo {display: block !important}
}

@media only screen and (max-width: 850px) {
    main .mainwrapper>aside {width: 100%;order: 1}
    main .mainwrapper>article {width: 100%;order: 2}
    main .mainwrapper {gap: 20px;display: flex}
    .mobilenav ul.mobilemenu li,
    .mobilenav ul.mobilesub li {width: calc(100% / 2 - 10px)}
    .mobilenav {padding: 50px 20px}
    header .user-nav,
    header .logged-user {width: 70%}
    header aside {width: 30%}
    main .heading-filter .category-heading img {width: 25px;height: 25px;margin-right: 15px}
    .user-liked-posts li .post-content h3 {font-size: 22px}
}

@media only screen and (max-width: 768px) {
    main .latest-news .news-slider .slick-track>li .news-image {height: 200px}
    .slick-dots {margin: 15px 0 0 !important}
    .user-tab ul li {width: calc(100% / 2 - 15px)}
    .user-tab ul {gap: 20px 0}
    .user-tab {margin-top: 0}
    .user-info {margin-bottom: 20px; margin-top: 0;}
    .user-info .user-details-wrapper {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;}
    .user-info .user-details-wrapper .default-avatar {margin: 0}
    .user-info .user-details-wrapper .user-details {width: calc(100% - 135px)}
    .user-info .user-details-wrapper .user-details h3,
    .user-info .user-details-wrapper .user-details p {text-align: left;margin: 0}
    .user-info .profile-actions {margin-top: 30px}
    .user-info .user-details-wrapper .mob-arrow {display: block}
    .user-info .user-details-wrapper .default-avatar {width: 60px;height: 60px}
    .user-info .user-details-wrapper .user-details h3 {font-size: 22px}
    .user-info .user-details-wrapper .user-details p {font-size: 15px;margin-top: 3px}
}

@media only screen and (max-width: 640px) {
    .user-liked-posts li .post-image {width: 100%;height: 200px}
    .user-liked-posts li .post-content {width: 100%;flex: auto}

    .ql-video {height: 250px;}

    header aside .logo {max-width: 130px;}
    header .logged-user {gap: 15px;}
}

@media only screen and (max-width: 480px) {
    header {justify-content: space-between;}
    header aside {width: auto}
    header .user-nav,
    header .logged-user {width: auto}
    #login-popup, #signup-popup, #change-nickname-popup {padding: 0;}
    .mobilenav ul.mobilemenu li a,
    .mobilenav ul.mobilesub li a {padding: 10px}
    .mobilenav ul.mobilesub li {width: 100%}
    main .mainwrapper>aside .community-posts .community-header {margin-bottom: 0}
    main .posts .post-item .post-content article h1,
    main .posts .post-item .post-content article h2,
    main .posts .post-item .post-content article h3,
    main .posts .post-item .post-content article h4,
    main .posts .post-item .post-content article h5,
    main .posts .post-item .post-content article h6,
    main .posts .post-item .post-content article p,
    main .posts .post-item .post-content article ul,
    main .posts .post-item .post-content article ol,
    main .posts .post-item .post-content article img {margin-bottom: 10px}
    main .posts .post-item .post-content aside:not(.post-image-wrapper) .main-image,
    main .posts .post-item .post-content aside .thumbnail-wrapper,
    main .posts .post-item .post-content aside:not(.post-image-wrapper) .image-grid {height: 200px}
    main .posts .post-item .post-content aside:not(.post-image-wrapper) {gap: 15px}
    main .posts .post-item .post-content aside:not(.post-image-wrapper) .image-grid>a,
    main .posts .post-item .post-content aside:not(.post-image-wrapper) .image-grid .last-image {height: calc(50% - 7.5px)}
    main .posts .post-item .post-content aside,
    main .posts .post-item .post-content aside .image-grid {gap: 10px}
    main .posts .post-item .post-content aside .image-grid .last-image .more-count {font-size: 15px}
    main .posts .post-item .post-content aside .thumbnail-wrapper .play-button {width: 40px}
    header .logged-user>li .notifications {width: 90vw;min-width: 90vw;right: -45px}
    main .heading-filter .post-filter {margin: 0;padding: 0;width: 100% !important}
    main .heading-filter .category-heading {padding: 0}
    main .heading-filter {margin: 10px 0 30px;gap: 20px}
    .comments-wrapper .comment-list-wrapper>ul>li .comment-main .comment-author {margin-bottom: 13px}
    .comments-wrapper .comment-list-wrapper>ul>li .comment-main .comment-actions {margin-top: 15px}
    .comment-field input:not([type=submit]),
    .comment-field textarea {width: calc(100% - 60px)}
    .comment-field input[type=submit] {width: 100%}
    main .posts .post-item .post-content .post-image-wrapper .edit-images-grid li {width: 100%}
    main .posts .post-item .post-content .post-image-wrapper .edit-images-grid li a {width: 30px;height: 30px;padding: 9px;top: -13px;right: -13px}
    .comment-field {justify-content: flex-end;gap: 20px}
    .user-info .user-details-wrapper .mob-arrow {width: 20px; height: auto; margin-left: 13px; display: flex; justify-content: center; align-items: center;}
    .user-info .user-details-wrapper .user-details h3 {font-size: 20px}
    .user-tab {margin-top: 0}
    .user-tab ul li {width: 100%}
    #edit-profile-popup form > ul li:nth-child(2), #edit-profile-popup form > ul li:nth-child(3), #edit-profile-popup form > ul li:nth-child(4), #edit-profile-popup form > ul li:nth-child(5), #change-password-popup form > ul li:nth-child(2), #change-password-popup form > ul li:nth-child(3), #change-password-popup form > ul li:nth-child(4), #change-password-popup form > ul li:nth-child(5), #customer-service-popup form > ul li:nth-child(2), #customer-service-popup form > ul li:nth-child(3), #customer-service-popup form > ul li:nth-child(4), #customer-service-popup form > ul li:nth-child(5), #customer-service-popup form > ul li:first-child {width: 100%;}
    .create-post .create-post-heading {margin: 10px 0 20px}
    main .mainwrapper {gap: 0 20px}
    .create-post .editor-wrapper {padding: 15px}
    .create-post .select-category select {padding: 4px 0 4px 5px}
    main .mainwrapper>aside .community-posts {margin-bottom: 20px}

    .upload-wrapper {width: 100%;}
    .upload-wrapper aside {padding: 0 20px;}
    .create-post .cp-button .publish-post {width: 100%; margin-bottom: 20px;}
    .create-post .cp-button .save-draft {width: 100%;}
}