@media only screen and (min-width : 300px) and (max-width : 480px){

    body, html {
        overflow-x: hidden;
    }

    .header-holder:before,
    .header-holder:after,
    header .title:before,
    header .title:after {
        display: none;
    }

    .header-holder {
        height: 90px;
    }

    .header-holder img.logo {
        margin-top: -5px;
        height: 100px;
    }

    header .title {
        margin-left: 32px;
        padding-left: 10px;
        padding-right: 10px;
    }

    header .title h2 {
        font-size: 25px;
    }

    section.address .main .form-holder,
    section.reply .form-holder {
        margin: 0 auto;
        width: 85%;
    }

    section.latest-added .item {
        display: block;
        padding-top: 6px;
    }

    section.latest-added .item .checked {
        margin-right: 0;
        float: left;
        text-align: left;
    }

    section.latest-added .item .added {
        display: inline;
    }

    .item-top {
        text-align: center;
    }

    section.about-us .item-top span.pull-left,
    section.user-chat .item-top span.pull-left,
    section.reply .item-top span.pull-left,
    section.about-us .item-top span.pull-right,
    section.user-chat .item-top span.pull-right,
    section.reply .item-top span.pull-right{
        float: none !important;
        display: block;
    }

    section.user-chat .item,
    section.reply .item {
        padding: 10px;
    }

    .popup .modal-body {
        text-align: center;
    }

    .popup .modal-body span.pull-left,
    .popup .modal-body span.pull-right {
        float: none !important;
        display: block;
    }

    .popup .modal-footer button {
        width: 90%;
        margin-bottom: 10px;
    }

    .modal {
        top: 0;
    }

    .progress-bg {
        text-align: left;
    }


}

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

    section.address .main .form-holder,
    section.reply .form-holder {
        width: 95%;
        margin: 0 auto;
    }

    body, html {
        overflow-x: hidden;
    }

}

@media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : portrait) {

    body, html {
        overflow-x: hidden;
    }

    header .title {
        margin-left: 71px;
    }

    section.address .main .form-holder,
    section.reply .form-holder {
        width: 85%;
    }

    .modal {
        top: 0;
    }

}

@media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : landscape) {

    body, html {
        overflow-x: hidden;
    }

    header .title {
        margin-left: 47px;
    }

    section.address .main .form-holder,
    section.reply .form-holder {
        width: 85%;
    }

}