@media (max-width: 375px) {
  .wrapper .main {
    padding-top: 58px
  }

  .container {
    max-width: 100%;
    padding: 0 10px
  }

  textarea.custom::placeholder,
  input.custom::placeholder {
    font-size: 14px
  }

  .askPopup .modal-dialog {
    min-width: 330px;
    max-width: 330px
  }

  .modal-dialog {
    min-width: 330px;
    max-width: 330px
  }

  .wrapper .mainHeader {
    padding: 5px 10px
  }

  .wrapper .mainHeader .headLinks {
    display: none;
  }

  .wrapper .mainHeader .sidebar-toggler {
    display: block;
  }

  .wrapper .main .header h3 {
    font-size: 18px
  }

  .wrapper .main .subHeader h5 {
    font-size: 18px
  }

  .wrapper .mainHeader .userData {
    margin-right: 5px
  }

  .wrapper .mainHeader .menu {
    width: 220px;
    top: 45px!important
  }

  .wrapper .mainHeader .messages .menu {
    width: 250px
  }

  .wrapper .mainHeader .userAccount .menu {
    right: auto!important;
    left: 0!important
  }

  .wrapper .mainHeader .userAccount .menu::before {
    left: 12px;
    right: auto;
  }

  .wrapper .mainHeader .userAccount .userInfo .userName,
  .wrapper .mainHeader .userAccount .userInfo .downIcon {
    display: none;
  }

  .wrapper .main .loginForm {
    width: 92%
  }

  .wrapper .main .content .tableList table {
    display: block;
    overflow-x: auto;
    width: 100%
  }

  /* Sidebar */
  .wrapper .sidebar .logo h5 {
    font-size: 20px
  }

  .wrapper .sidebar .activeUser .userName {
    font-size: 18px
  }

  .wrapper .sidebar {
    width: 300px
  }

  .wrapper .sidebar .links li h5 {
    font-size: 16px
  }

  .wrapper .sidebar .links .subLinks a {
    font-size: 14px
  }

  .progressChart > div,
  .wrapper .main .content .transactions .states > div {
    flex: 0 50%;
  }

  .wrapper .main .content .transactions .moreStates .state {
    flex: 0 100%;
  }

  .wrapper .main .content .transactions .states .state .det .nums {
    font-size: 20px
  }

  .wrapper .main .content .transactions .state .moreDet .more {
    font-size: 16px
  }

  /* Welcome page */
  .welcome .details {
    width: 300px;
    height: 400px;
    border-radius: 20px
  }

  .welcome .details .logo {
    width: 200px;
    margin-bottom: 0
  }

  .welcome .details header h1 {
    font-size: 18px;
    padding-top: 10px
  }

  .welcome .details .links {
    padding: 0 5px
  }

  .welcome .details .links .link {
    font-size: 14px;
    margin: 3px 5px
  }

  /* Map view */
  .mapView .map-block {
    height: 300px
  }

  .table thead th {
    font-size: 14px
  }

  /*About Website*/
  .about-website .intro {
    padding: 0 15px;
    display: block;
  }

    .about-website .intro .desc {
      flex: none;
      display: block;
    }

      .about-website .intro .desc .det {
        font-size: 14px;
        line-height: normal;
      }

      .about-website .intro .desc header {
        padding-top: 15px
      }

        .about-website .intro .desc header h1 {
          font-size: 60px
        }

        .about-website .intro .desc header p {
          font-size: 16px
        }

    .about-website .intro .infoImg {
      display: none;
    }

  .about-website .header {
    display: block;
  }

  .about-website .header.divider {
    padding-top: 0;
    padding-bottom: 10px
  }

  .about-website .header h3 {
    font-size: 40px;
    margin-bottom: 15px
  }

  .about-website .header p {
    font-size: 14px
  }

  .about-website .products .product .pro-img {
    width: 180px;
    height: 180px
  }

  .about-website .products .product h5 {
    font-size: 18px
  }

  .about-website .partitions .part {
    display: block;
  }

    .about-website .partitions .part .part-img {
      flex: none;
      width: 100%;
      height: 180px
    }

    .about-website .partitions .part .part-det h5 {
      margin-top: 10px
    }

    .about-website .partitions .part .part-det .det {
      font-size: 14px
    }

  .about-website .whyUs .details ul li {
    flex: 0 0 100%
  }

    .about-website .whyUs .details ul li p {
      font-size: 14px
    }

  .about-website .products,
  .about-website .valuation,
  .about-website .marketing,
  .about-website .whyUs {
    padding: 15px 0
  }

  /*Chat Page*/
  .messages .all-chats ul li .name {
    font-size: 14px
  }

  .messages .history .message .txt {
    max-width: 90%
  }
}


@media (min-width: 376px) and (max-width: 575px) {
  .wrapper .main {
    padding-top: 58px
  }

  .container {
    max-width: 100%;
    padding: 0 15px
  }

  .askPopup .modal-dialog {
    min-width: 360px;
    max-width: 360px
  }

  .modal-dialog {
    min-width: 360px;
    max-width: 360px
  }

  .wrapper .mainHeader .headLinks {
    display: none;
  }

  .wrapper .mainHeader {
    padding: 5px 15px
  }

  .wrapper .mainHeader .userAccount {
    margin-left: 0
  }

  .wrapper .mainHeader .userAccount .menu {
    right: auto !important;
    left: 0 !important
  }

  .wrapper .mainHeader .sidebar-toggler {
    display: block;
  }

  .wrapper .main .header h3 {
    font-size: 18px
  }

  .wrapper .main .subHeader h5 {
    font-size: 18px
  }

  .wrapper .mainHeader .userData {
    margin-right: 5px
  }

  .wrapper .mainHeader .menu {
    width: 220px;
    top: 45px !important
  }

  .wrapper .mainHeader .messages .menu {
    width: 250px
  }

  .wrapper .mainHeader .userAccount .menu::before {
    left: 12px;
    right: auto;
  }


  .wrapper .mainHeader .userAccount .userInfo .userName,
  .wrapper .mainHeader .userAccount .userInfo .downIcon {
    display: none;
  }

  .wrapper .main .loginForm {
    width: 92%
  }

  .wrapper .main .content .tableList table {
    display: block;
    overflow-x: auto;
    width: 100%
  }


  /* Sidebar */
  .wrapper .sidebar .logo h5 {
    font-size: 22px
  }

  .wrapper .sidebar .activeUser .userName {
    font-size: 18px
  }

  .wrapper .sidebar {
    width: 300px
  }

  .wrapper .sidebar .links li h5 {
    font-size: 16px
  }

  .wrapper .sidebar .links .subLinks a {
    font-size: 14px
  }

  .progressChart > div,
  .wrapper .main .content .transactions .states > div {
    flex: 0 50%;
  }

  .wrapper .main .content .transactions .moreStates .state {
    flex: 0 100%;
  }

  /* Welcome page */
  .welcome .details {
    width: 350px;
    height: 450px;
  }

  .welcome .details .logo {
    width: 250px;
    margin-bottom: 0
  }

  .welcome .details header h1 {
    font-size: 22px;
    padding-top: 10px
  }

  .welcome .details .links {
    padding: 0 10px
  }

  .welcome .details .links .link {
    font-size: 16px;
    margin: 3px 5px
  }
      
  /* Map view */
  .mapView .map-block {
    height: 300px
  }

  .table thead th {
    font-size: 15px
  }

  /* About website */
  .about-website .intro {
    padding: 0 15px;
    display: block;
  }

    .about-website .intro .desc {
      flex: none;
      display: block;
    }

      .about-website .intro .desc .det {
        font-size: 14px;
        line-height: normal;
      }

      .about-website .intro .desc header {
        padding-top: 15px
      }

    .about-website .intro .infoImg {
      display: none;
    }

  .about-website .header {
    display: block;
  }

  .about-website .header.divider {
    padding-top: 0;
    padding-bottom: 10px
  }

  .about-website .header h3 {
    font-size: 40px;
    margin-bottom: 15px
  }

  .about-website .header p {
    font-size: 14px
  }

  .about-website .products .product .pro-img {
    width: 180px;
    height: 180px
  }

  .about-website .products .product h5 {
    font-size: 18px
  }

  .about-website .partitions .part {
    display: block;
  }

    .about-website .partitions .part .part-img {
      flex: none;
      width: 100%;
      height: 180px
    }

    .about-website .partitions .part .part-det h5 {
      margin-top: 10px
    }

    .about-website .partitions .part .part-det .det {
      font-size: 14px
    }

  .about-website .whyUs .details ul li p {
    font-size: 14px
  }

  .about-website .products,
  .about-website .valuation,
  .about-website .marketing,
  .about-website .whyUs {
    padding: 15px 0
  }

  /*Chat Page*/
  .messages .all-chats ul li .name {
    font-size: 14px
  }

  .messages .history .message .txt {
    max-width: 90%
  }
}


@media (min-width: 576px) and (max-width: 767px) {
  .container {
    max-width: 100%;
    padding: 0 15px
  }

  .modal-dialog {
    min-width: 560px;
    max-width: 560px
  }

  .wrapper .main .header h3 {
    font-size: 20px;
  }

  .wrapper .mainHeader .headLinks {
    display: none;
  }

  .wrapper .mainHeader .sidebar-toggler {
    display: block;
  }

  .progressChart > div,
  .wrapper .main .content .transactions .states > div {
    flex: 0 33.33%;
  }

  .wrapper .main .content .transactions .moreStates .state {
    flex: 0 50%;
  }

  /* Welcome page */
  .welcome .details {
    width: 550px;
    height: 550px;
  }

  .welcome .details .logo {
    width: 280px;
    margin-bottom: 0
  }

  .welcome .details header h1 {
    font-size: 24px;
    padding-top: 10px
  }

  .welcome .details .links {
    padding: 0 50px
  }

  .welcome .details .links .link {
    font-size: 16px;
    margin: 3px 5px
  }


  /* Map view */
  .mapView .map-block {
    height: 400px
  }

  .wrapper .main .content .tableList table {
    display: block;
    overflow-x: auto;
    width: 100%
  }

  .table thead th {
    font-size: 15px
  }

  /* About website */
  .about-website .intro {
    padding: 0 30px;
    display: block;
  }

  .about-website .intro .desc {
    flex: none;
    display: block;
  }

  .about-website .intro .desc .det {
    font-size: 15px;
    line-height: 25px
  }

  .about-website .intro .desc header {
    padding-top: 15px
  }

  .about-website .intro .infoImg {
    flex: none;
    display: block;
    width: 100%;
    height: 250px
  }

  .about-website .header h3 {
    font-size: 40px
  }

  .about-website .header p {
    font-size: 14px
  }

  .about-website .products .product .pro-img {
    width: 180px;
    height: 180px
  }

  .about-website .products .product h5 {
    font-size: 18px
  }

  .about-website .partitions .part {
    display: block;
  }

  .about-website .partitions .part .part-img {
    flex: none;
    width: 100%;
    height: 220px
  }

  .about-website .partitions .part .part-det h5 {
    margin-top: 10px
  }

  .about-website .whyUs .details ul li p {
    font-size: 14px
  }

  /*Chat Page*/
  .messages .all-chats ul li .name {
    font-size: 14px
  }

  .messages .history .message .txt {
    max-width: 80%
  }


}


@media (min-width: 768px) and (max-width: 991px) {

  .modal-dialog {
    min-width: 700px;
    max-width: 700px
  }

  .wrapper .mainHeader .headLinks {
    display: none;
  }

  .wrapper .mainHeader .sidebar-toggler {
    display: block;
  }

  .progressChart > div,
  .wrapper .main .content .transactions .states > div {
    flex: 0 33.33%;
  }


  /* Welcome page */
  .welcome .details {
    width: 650px;
    height: 750px;
  }

  /*About website*/
  .about-website .intro {
    padding: 0 30px;
    display: block;
  }

  .about-website .intro .desc {
    flex: none;
    display: block;
  }

  .about-website .intro .desc header {
    padding-top: 15px
  }

  .about-website .intro .infoImg {
    flex: none;
    display: block;
    width: 100%;
    height: 350px
  }

  .about-website .products .product .pro-img {
    width: 180px;
    height: 180px
  }

  .about-website .products .product h5 {
    font-size: 18px
  }

  .about-website .partitions .part {
    display: block;
  }

  .about-website .partitions .part .part-img {
    flex: none;
    width: 100%;
    height: 250px
  }

  .about-website .partitions .part .part-det h5 {
    margin-top: 8px
  }

  /*Chat Page*/
  .messages .all-chats ul li .name {
    font-size: 16px
  }

  .messages .history .message .txt {
    max-width: 80%
  }

}


@media (min-width: 992px) and (max-width: 1199px) {
  .wrapper .mainHeader .headLinks {
    display: none;
  }

  .wrapper .sidebar {
    right: 0!important;
  }

  .wrapper .main {
    padding-right: 320px!important;
  }


  .progressChart > div,
  .wrapper .main .content .transactions .states > div {
    flex: 0 25%;
  }

.wrapper .main .content .transactions .moreStates .state-block {
    flex: 0 0 48%;
}

  /*Chat Page*/
  .messages .all-chats ul li .name {
    font-size: 16px
  }

  .messages .history .message .txt {
    max-width: 80%
  }

}


@media (min-width: 1200px) {
  .wrapper .sidebar {
    right: -320px!important;
  }

  .wrapper .main {
    padding-right: 0!important;
  }

}