/* Small devices phone & tablets */
@media (max-width: 437px) {
  -body{ border-top: solid 4px blue;}

  .hide-on-xs{
    display: none;
  }
  .media-comment-field .col-xs-10 {
    width: 74%;
  }
  .picture-holder .col-xs-6{
    width: 100%
  }
  .xs-full-width{
    width: 100%;
  }


}
@media (max-width: 479px) {
  -body{ border-top: solid 4px pink;}

  .hide-on-xs{
    display: none;
  }
  .media-comment-field .col-xs-10 {
    width: 74%;
  }
  .picture-description .inline-block{
        width: 71% !important;
  }
  .comment-field {
    width: 100%;
  }
  .media .media-date{
    float: none;
  }
  .media .media-comment-field .btn-circle {
    margin-left: -5px;
  }
  .spec-pic-fields form{
    margin-left: 15px;
  }
  .order-filters:before {
    left: 34%;
  }
}

@media (min-width: 480px) {
  -body{
    border-top:solid 3px green;
  }
  /*  MAIN NAVIGATION  */
  .main-menu li {
    display: inline-block;
    width: 18%;
  }
  .main-menu .menu-text {
    font-size: 10px;
  }
  h2{
    font-size: 27px !important;
  }
  h2 strong{
    display: inline-block;
  }

  .wbox-login {
    width: 80%;
    margin: 0 auto;
  }
  .wbox-login .login-fields{
    width: 300px;
  }
  .wbox-login .login-fields .btn{
    float: right !important;
    display: inherit;
    clear: none !important;
    margin: 0 !important;
  }
  .media .media-edit{
    margin-left: 10px;
  }
  .spec-pic-fields form{
    margin-left: 15px;
  }
  .error-screen .error-picture img {
    width: 60%;
  }
  .error-message{
    font-size: 17px !important;
  }
  .order-filters:before {
    left: 46%;
  }
  .legend-wrapper div{
    display: inline-block;
    border-left: solid 2px #ebeef2;
    text-align: center;
    width: auto;
    line-height: 34px;
  }

}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
  -body{
    border-top:solid 3px yellow;
  }
  .pull-right-sm {
      float: right;
  }
  .text-left-sm{
    text-align: left;
  }
  .text-right-sm{
    text-align: right;
  }
  header #app-logo img {
    margin-top: 25px;
  }
  .logo.text-center{
    text-align: left;
  }
  .profile-pic {
      width: 50px;
      height: 50px;
      margin-top: 14px;
  }
  .global-search {
    margin-top: 10px;
  }

  /*  MAIN NAVIGATION  */
  .main-menu {
    border-top: none;
    margin-top: -70px;
    padding-top: 10px;
  }
  .main-menu li {
    width: 85px;
    display: inline-block;
  }

  /*  SECONDARY NAVIGATION  */
  .navbar-nav{
    text-align: center;
    float: none;
  }
  .navbar-nav li {
      float: none;
      display: inline-block;
  }
  .navbar-collapse {
    background: #32a8e4;
  }
  nav li{
    margin-top: 5px;
  }
  .nav > li > a {
    padding: 5px 13px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    transition: 0.2s ease;
    margin-top: 5px;
  }
  .nav > li > a:hover {
    color: #fff !important;
    font-weight: 100;
    background: #076fb2 !important;
    border-radius: 15px;
    padding: 5px 13px;
  }
  .nav > li > a.current{
    background: #fff !important;
    color: #27a6e6 !important;
  }
  .text-right-md{
    text-align: right !important;
  }
  .block-md{
    display: block;
  }
  .comment-scroll {
    padding-top: 0;
    height: 227px;

    margin-bottom: 73px;
  }
  .comment-scroll .media .media-date {
    color: #bababa;
    float: left;
    font-size: 11px;
  }
  .comment-field {
    width: 100%;
  }
  .wbox-login .login-fields {
    width: 380px;
  }
  .login-logo {
    margin-top: 35px;
    margin-bottom: 33px;
  }
  .media .media-date {
    float: none;
  }
  /*  PROJECT SELECTOR  */
  .project-selector {
    background: #fff;
    padding: 0;
    margin-left: 0;
    margin-right: 0;
    position: absolute;
    left: 15px;
    top: 50px;
  }
  .project-selector a{
    color: #333333;
    padding: 0;
  }
  .project-selector a strong{
    color: #32a8e4;
  }
  .project-selector .dropdown-menu {
    right: auto;
    left: 0px;
    border: solid 1px #ebebeb;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.175);
    background-color: #fff;
    border-radius: 4px;
    text-align: left;
  }
  .project-selector .dropdown-menu>li>a {
    color: #333;
  }
  .project-selector .dropdown-menu>li>a:hover {
    color: #262626;
    text-decoration: none;
    background-color: #f5f5f5;
  }

  header #app-logo img {
    margin-top: 15px;
    margin-bottom: 25px;
  }

  .container{
    position: relative;;
  }

  .order-filters:before {
    left: auto;
    right: 47px;
  }

  .order-filters:before {
    left: auto;
    right: 11%;
  }
  .profile-box{
    text-align: left;
  }

  .spec-pic-fields form{
    margin-left: 0;
  }
  .error-screen .error-picture img {
    width: 340px;
  }
  .download-btn.btn,
  .btn-trigger.btn{
    padding: 8px 18px;
  }

  .order-filters:before {
    left: auto;
    right: 11.7%;
  }
  .wbox-stats ul li{
    display: inline-block;
    border-left: solid #e8e8e8;
  }
  .sign-wrapper {
    margin: 0 0 70px 0;
  }

}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
  -body{
    border-top:solid 3px orange;
  }
  .global-search{
    text-align: right;
    margin-right: -15px;
  }

  /*  MAIN NAVIGATION  */
  .main-menu .menu-text {
    font-size: 13px;
    font-weight: 200;
  }

  /*  SECONDARY NAVIGATION  */
  .main-menu li {
    width: 115px;
    display: inline-block;
  }
  .nav > li > a {
    padding: 5px 24px;
    margin-top: 5px;
    border-radius: 15px;
    transition: 0.2s ease;
  }
  .nav > li > a:hover {
    color: #fff !important;
    font-weight: 100;
    background: #076fb2 !important;
    border-radius: 15px;
    padding: 5px 24px;
  }
  .nav > li > a.current{
    background: #fff !important;
    color: #27a6e6 !important;
  }

  /*  BTN  */
  .btn{
      padding: 8px 26px;
  }
  .text-right-md{
    text-align: right;
  }
  .text-left-md{
    text-align: left;
  }

  .text-right-lg{
    text-align: right !important;
  }
  .inline-lg{
    display: inline;
  }
  .comment-scroll {
    overflow-y: scroll;
    height: 322px;
    margin-bottom: 73px;
  }
  .comment-scroll .media .media-date {
    float: right;
  }
  .login-logo {
    width: 370px;
    margin-top: 35px;
    margin-bottom: 33px;
  }
  .media .media-date {
    float: right;
  }

  header #app-logo img {
    margin-top: 19px;
    margin-bottom: 21px;
  }
  .project-selector {
    top: 53px;
  }
  .profile-form-holder .form-group {
    float: left;
    width: 47%;
    margin-right: 3%;
  }
  .error-screen{
    width: 70%;
  }
  .order-filters:before {
    left: auto;
    right: 104px;
  }

}


/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  -body{
    border-top:solid 3px purple;
  }
  .navbar-nav a {
    font-size: 16px;
  }
  .text-right-lg{
    text-align: right !important;
  }
  /*  BTN  */
  .btn {
    padding: 8px 26px;
  }
  .comment-scroll {
    height: 407px;
  }
  .wbox-login .login-fields {
    width: 440px;
  }
  /* PROJECT SELECTOR */
  header #app-logo img {
    margin-top: 25px;
    margin-bottom: 15px;
  }
  .project-selector {
    left: 91px;
    top: 31px;
  }

  .profile-form-holder .form-group {
    float: left;
    width: 45% !important;
    margin-left: 31px !important;
  }
  .profile-form-holder .form-group .form-control{
    width: 100% !important;
  }
  .order-filters:before {
    left: auto;
    right: 89px;
  }
 }

 @media (max-width: 1024px) {
   -body{
     border-top: solid 7px red !important
   }
   .picture-edit{
     background-color: red;
   }
   .map-edit, .picture-edit{
     opacity: 0.5 !important;
     top: 20px !important;
     width: 90px;
   }
   tr .table-links-edit a,
   .wbox.is-team:hover .table-links-edit a {
     display: block;
   }
 }