@media screen and (max-width:1199px) {
    #userDetailBox .userLinks a {
        font-size: 16px;
    }
    #userDetailBox .userLinks a + a {
        margin-left: 18px;
    }
}
@media screen and (max-width:991px) {
    .profileMenuBtnDiv {
        margin-left: 10px;
    }
    #profileMenu, #profileMenu.active {
        display: none !important;
    }
    .askButton {
        width: 79px;
    }
    #sidebar {
        display: none;
    }
    #mobileSidebar {
        display: block;
        overflow: hidden;
    }
    .footerLogo img {
        margin:0 auto
    }
    .footerLinks {
        margin:0 auto;
        padding-top: 25px;
        display: inline-block;
        text-align: center;
    }
    .footerLinks li { display: inline-block; }
    .questionsButtons {
        flex-wrap: wrap;
        padding:0 0 7px;
    }
    #mobileMenuBG.active,
    #mobileMenu.active {
        display: block;
    }
    #askQuestionPopupForm .formFooter {
        flex-wrap: wrap;
    }
    #askQuestionPopupForm .formFooter .formFooterText {
        order: 1;
        width: calc( 100% + 60px );
        background: #ededed;
        margin-left:-30px;
        margin-right:-30px;
        padding: 7px 19px;
        margin-bottom: 19px;
        font-size: 12px;
        text-align: center;
    }
    #askQuestionPopupForm .formFooter .formAttach {
        order:2;
    }
    #askQuestionPopupForm .formFooter .formSubmit {
        margin-left: auto;
    }
    .modalCloseBtn {
        font-size: 14px;
        line-height: 14px;
        top:14px;
        right:14px;
        width: 14px;
        height: 14px;
    }
    .modalCloseBtn span:before {
        color: #707070;
    }
    .contactForm {
        padding-bottom: 23px;
        border-bottom: 1px solid #d2d5db;
        margin-bottom: 67px;
    }
    #blogMostPopular .blogItem .img {
        height: 100px;
    }
}
@media screen and (max-width:767px) {
    body.loginPage {
        align-items: flex-start;
        padding-top: 57px;
    }
    #loginPageWrapper {
        padding:0 21px;
    }
    #loginPageWrapper .logo img {
        max-width: 250px;
    }
    #loginPageWrapper .loginBox {
        max-width: 333px;
        padding:27px 21px 125px;
        margin:0 auto;
    }
    #loginPageWrapper .loginBox .title {
        font-size: 24px;
        text-align: center;
    }
    #loginPageWrapper .loginBox .subTitle {
        font-size: 14px;
        line-height: 16px;
        margin-bottom: 26px,;
        text-align: center;
    }
    #loginPageWrapper #loginForm .formFooter {
        flex-direction: column;
        align-items: flex-start;
    }
    #loginPageWrapper #loginForm .formFooter a {
        margin-bottom: 15px;
    }
    #loginPageWrapper #loginForm .formFooter button {
        margin-left: 0;
        width: 100%;
    }
    .questionList .titleRow {
        flex-direction: column;
        align-items: flex-start;
    }
    .questionList .titleRow .question, .questionList .titleRow .question a {
        order:2;
    }
    .questionList .titleRow .tags {
        justify-content: flex-start;
        margin-left: unset;
        margin-bottom: 5px;
    }
    .questionList .footerRow .comments em, .questionList .footerRow .followings em {
        display: none;
    }
    .questionList .footerRow .comments {
        margin-left: auto;
    }
    .questionList .footerRow .followings {
        margin-left: 15px;
    }
    .questionList .blogBox {
        flex-direction: column;
    }
    .questionList .blogImg {
        width: calc( 100% + 50px );
        margin-left: -20px;
        margin-right: -30px;
        height: 112px;
        overflow: hidden;
    }
    .questionList .blogImg img {
        width: 100%;
        max-width: unset;
    }
    .questionList .blogText .date {
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .searchTitle {
        font-size: 24px;
    }
    #questionDetail .questionList .questionBox {
        padding-left:0;
        padding-right:0;
    }
    #questionDetail .questionList .star {
        order:3;
    }
    .editorFooter {
        flex-wrap: wrap;
    }
    .editorFooter .text {
        order: 1;
        width: calc( 100% + 60px );
        background: #ededed;
        margin-left:-30px;
        margin-right:-30px;
        padding: 7px 19px;
        margin-bottom: 19px;
        font-size: 12px;
        text-align: center;
    }
    .editorFooter .editorAttach {
        order:2;
    }
    .editorFooter .submitButton {
        margin-left: auto;
    }
    #contactUs {
        padding: 21px 21px 0;
        margin-left: -15px;
        margin-right: -15px;
        border-radius: 0;
        background: #fff !important;
    }
    .mapBox {
        margin-left: -21px;
        margin-right: -21px;
    }
    #userDetail {
        padding:23px 20px;
    }
    #userDetail .userIcon {
        position: absolute;
        width: 44px;
        height: 44px;
    }
    #userDetail .userIcon > div {
        width: 44px;
        height: 44px;
        line-height: 44px;
        font-size: 22px; 
    }
    #userDetail .userText .userName {
        padding-left: 56px;
        min-height: 44px;
        margin-bottom: 24px;
    }
    #userDetail .userText .userDesc {
        height: 85px;
        font-size: 14px;
        margin-bottom: 20px;
    }
    #userDetail .userText .followButton a {
        margin-left: auto;
        margin-bottom: 0;
    }
    #userDetailBox .userLinks select {
        display: block;
    }
    #userDetailBox .userLinks a {
        display: none;
    }
    .questionList .statusRow {
        font-size: 12px;
        line-height: 18px;
        padding-bottom: 10px;
    }
    .contentHeader {
        flex-direction: column;
    }
    .welcomeTitle {
        margin-bottom: 10px;
        text-align: center;
    }
    .searchForm {
        margin:0 auto;
    }
    .questionList .footerRow .postCommentBtn {
        display: none;
    }
    #blogMostPopular .sectionTitle {
        font-size: 24px;
    }
    #blogMostPopular .blogItem .img {
        height: 112px;
        border-radius: 0;
    }
    .blogDetailTitle {
        font-size: 20px;
        line-height: 26px;
    }
    .blogDetailUserInfo .user {
        font-size: 14px;
    }
    .blogDetailUserInfo .user span {
        width: 24px;
        height: 24px;
        line-height: 24px;
        font-size: 10.76px;
        margin-right: 8px;
    }
    .blogDetailUserInfo .likes {
        margin-right: 5px;
    }
    .blogDetailText {
        margin-bottom: 37px;
    }
    .blogDetailComments .commentUserImg {
        display: none;
    }
    .blogDetailComments .commentMeta .user span {
        display: block;
    }
    .blogDetailComments .comment.replyComment {
        margin-left: 40px;
    }
    .blogDetailComments .comment.replyComment2 {
        margin-left: 80px;
    }
    .surveyRow {
        padding-right: 20px;
        flex-wrap: wrap;
    }
    .surveyRow .surveyName {
        padding-left: 20px;
        width: 100%;
    }
    .surveyRow .surveyStatus {
        margin-left: 20px;
        padding-top: 0;
    }
    .surveyRow .surveyButtons {
        padding-top: 0;
        margin-left: auto;
    }
    .surveyQuestions {
        padding-right: 15px;
    }
    #footer {
        padding:35px 0 10px 0;
    }
    .footerLinks {
        padding-bottom: 0;
    }
    .copyrightLinks {
        text-align: center;
        margin:0 auto 20px;
        padding:0;
    }
    .copyrightText {
        text-align: center;
    }
}
@media screen and (max-width:575px) {
    #blogDetail {
        padding-left: 21px;
        padding-right: 21px;
    }
    .blogDetailMeta {
        flex-direction: column;
        align-items: flex-start;
    }
    .blogDetailMeta .date {
        margin-bottom: 5px;
    }
    .blogDetailMeta .tags {
        margin-left: -11px;
    }
    .blogNav {
        padding-left: 0;
        padding-right: 0;
    }
}
@media screen and (max-width:479px) {
    #commentList .commentBox .commentDate,
    #commentList .commentBox .comment {
        padding-left: 0;
    }
    #commentList .commentBox .commentMeta {
        padding-left: 0;
        padding-right: 0;
    }
    #commentList .commentBox .commentMeta .replyBtn {
        margin-left: 8px;
    }
    #commentList .commentBox .commentMeta .replyBtn a {
        width: 80px;
    }
    #commentList .commentBox .commentMeta .comments a em {
        display: none;
    }
    .surveyButtons {
        padding-right: 15px;
    }
    .surveyButtons .btn {
        display: block;
        width: 100%;
    }
    .surveyButtons .btn-outline-primary {
        margin-left: 0;
        margin-top: 16px;
    }
}
@media screen and (max-width:414px) {
    .searchForm button {
        flex-shrink: 0;
        flex-grow: 0;
    }
    .searchForm input {
        flex-grow: 1;
        width: 100%;
    }
}