@media screen and (max-width: 320px) {

}
@media screen and (min-width: 320px) and (max-width: 479px) {

}
@media screen and (min-width: 480px) and (max-width: 639px) {

}
@media screen and (min-width: 640px) and (max-width: 767px) {

}
@media screen and (min-width: 768px) and (max-width: 1003px) {

}
@media screen and (min-width: 1004px) and (max-width: 1259px) {

}
@media screen and (min-width: 1260px) and (max-width: 1279px) {

}
@media screen and (min-width: 1280px) and (max-width: 1365px) {

}
@media screen and (min-width: 1366px) and (max-width: 1599px) {

}
@media screen and (min-width: 1600px) and (max-width: 1679px) {

}
@media screen and (min-width: 1680px) {

}





/* open bootstrap 3 menu on hover instead of click */

@media (min-width: 768px) {
  /* Use this if you wish to hide the caret
  .navbar-nav .caret {
    display: none;
  } 
  */
  .navbar-nav .open ul {
    display: none
  }
  .navbar-default .navbar-nav > .open > a,
  .navbar-default .navbar-nav > .open > a:hover,
  .navbar-default .navbar-nav > .open > a:focus {
    color: #555;
    background: none
  }
  .navbar-default .navbar-nav > li:hover {
    background: #e7e7e7
  }
  .navbar-inverse .navbar-nav > .open > a,
  .navbar-inverse .navbar-nav > .open > a:hover,
  .navbar-inverse .navbar-nav > .open > a:focus {
    color: #969696;
    background: none
  }
  .navbar-inverse .navbar-nav > li:hover {
    background: #080808
  }
  .navbar-nav .hovernav:hover > .dropdown-menu {
    display: block;
  }
}