/*--------------------------------------------------------
 * NOTE: We use LESS syntax in this project for our CSS.
 * "LESS extends CSS with: variables, mixins, operations,
 * and nested rules."
 * -http://lesscss.org/
 *--------------------------------------------------------*/
/* MIXINS   
----------------------------------------------------------*/
/*--------------------------------------------------------
 * NOTE: We use LESS syntax in this project for our CSS.
 * "LESS extends CSS with: variables, mixins, operations,
 * and nested rules."
 * -http://lesscss.org/
 *--------------------------------------------------------*/
/* COLORS   
----------------------------------------------------------*/
/* WIDTHS   
----------------------------------------------------------*/
/* HEADER
----------------------------------------------------------*/
#header #logo {
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
}
#header #logo img.housters {
  border: 0;
  width: 228px;
  height: 60px;
}
#header #logo .get-mobile-app {
  display: block;
  color: #bcbcbc;
  margin-left: 125px;
  width: 85px;
  font-size: 11px;
}
#header .branding {
  text-align: center;
  max-width: 228px;
}
#header .branding img {
  max-width: 228px;
  max-height: 60px;
}
#header .branding h4 {
  font-size: 16px;
}
#header .branding h5 {
  font-size: 12px;
}
#header #top-right-links {
  padding-top: 10px;
  padding-left: 10px;
}
#header #top-right-links .link {
  display: inline-block;
  cursor: pointer;
  color: #000;
  margin-right: 20px;
}
#header #top-right-links .link .fas,
#header #top-right-links .link .glyphicon {
  display: inline-block;
  font-size: 20px;
  margin-right: 4px;
}
#header #top-right-links .link .title-container {
  display: inline-block;
  margin-left: 2px;
}
#header #top-right-links .link .title-container .title {
  font-size: 10px;
  font-weight: bold;
}
#header #top-right-links .link .title-container .subtitle {
  color: #717171;
  font-size: 10px;
}
#header #top-right-links .link:hover {
  color: #004ccc;
}
#header #menu-links {
  display: inline-block;
  margin-top: 15px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 2px;
}
#header #menu-links .link {
  display: inline-block;
  padding: 5px 10px 5px 10px;
  border-radius: 5px;
  border: 1px solid #fff;
  cursor: pointer;
}
#header #menu-links .link a {
  color: #004ccc;
}
#header #menu-links .link button {
  color: #004ccc;
  background: none;
  border: none;
  padding: 0px;
}
#header #menu-links .link:hover {
  border-radius: 5px;
  border: 1px solid #bcbcbc;
}
#header .dropdown {
  position: absolute;
  z-index: 2;
  display: inline-block;
  margin-top: 0px;
  margin-left: 40px;
  padding: 2px;
  padding-left: 20px;
  background-color: #fff;
  font-size: 14px;
  -webkit-border-bottom-left-radius: 4px;
  -webkit-border-bottom-right-radius: 4px;
  -moz-border-radius-bottomleft: 4px;
  -moz-border-radius-bottomright: 4px;
  border: 1px solid #E3E3E3;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05) inset;
  -webkit-box-shadow: 1px 3px 8px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 1px 3px 8px rgba(0, 0, 0, 0.2);
  box-shadow: 1px 3px 8px rgba(0, 0, 0, 0.2);
}
#header .dropdown ul {
  padding-left: 0px;
  margin-bottom: 0px;
}
#header .dropdown ul li {
  text-align: left;
  font-weight: bold;
  display: block;
  padding-top: 8px;
  padding-bottom: 8px;
}
#header .dropdown ul li h6 {
  margin-top: 0px;
  margin-bottom: 0px;
  font-size: 12px;
  color: #717171;
}
#header .dropdown ul li a {
  color: #717171;
}
#header .dropdown ul li a:hover {
  text-decoration: underline;
  color: #004ccc;
}
#header .dropdown ul li.dropdown-divider {
  margin: 0px;
  padding: 0px;
}
#header .dropdown ul a.active {
  color: #004ccc;
}
#header .dropdown ul a.active:after {
  content: url('/Images/icons/glyphicons_halflings_079_thin_right_arrow.png');
  width: 8px;
  height: 12px;
  display: inline-block;
  margin-left: 5px;
  position: relative;
  bottom: -2px;
}
#header .dropdown ul li.divider {
  height: 1px;
  padding: 0px;
  background-color: #e5e5e5;
}
#header .dropdown .left {
  vertical-align: top;
  display: inline-block;
  width: 225px;
  max-height: 300px;
  overflow-y: auto;
  padding-right: 25px;
}
#header .dropdown .right {
  padding-left: 25px;
  vertical-align: top;
  display: inline-block;
  width: 120px;
  border-left: 1px dashed #b2b1b1;
}
#header .submenu {
  padding-left: 0px;
  margin-bottom: 0px;
  background-color: #000;
  font-size: 85%;
}
#header .submenu li {
  display: inline-block;
  padding: 5px 10px 5px 10px;
  border-top: 2px solid #000;
  border-bottom: 2px solid #000;
  cursor: pointer;
  color: #717171;
}
#header .submenu li a {
  color: #fff;
}
#header .submenu li button {
  color: #fff;
  background: none;
  border: none;
  padding: 0px;
}
#header .submenu li button .caret {
  border-top-color: #fff;
}
#header .submenu li:hover {
  border-top: 2px solid #004ccc;
  border-bottom: 2px solid #004ccc;
}
#header .submenu li.label {
  cursor: default;
  font-size: 100%;
}
#header .submenu li.label:hover {
  border-top: 2px solid #000;
  border-bottom: 2px solid #000;
}
#header .submenu-second {
  background-color: #404040;
}
#header .submenu-second li {
  border-top: 2px solid #404040;
  border-bottom: 2px solid #404040;
}
#header .submenu-second li.label:hover {
  border-top: 2px solid #404040;
  border-bottom: 2px solid #404040;
}
#header .submenu-third {
  background-color: #717171;
}
#header .submenu-third li {
  border-top: 2px solid #717171;
  border-bottom: 2px solid #717171;
  color: #fff;
}
#header .submenu-third li.label:hover {
  border-top: 2px solid #717171;
  border-bottom: 2px solid #717171;
}
#header .divider {
  box-shadow: inset rgba(255, 255, 255, 0.33) 0 1px 2px, rgba(0, 0, 0, 0.33) 0 3px 10px;
  -moz-box-shadow: inset rgba(255, 255, 255, 0.33) 0 1px 2px, rgba(0, 0, 0, 0.33) 0 3px 10px;
  -webkit-box-shadow: inset rgba(255, 255, 255, 0.33) 0 1px 2px, rgba(0, 0, 0, 0.33) 0 3px 10px;
  height: 1px;
  margin: 0px;
}
/* VERTICAL MENU
----------------------------------------------------------*/
#vertical-menu {
  margin-top: 20px;
}
#vertical-menu .title {
  font-weight: bold;
  font-size: 16px;
}
#vertical-menu .title a {
  color: #000;
}
#vertical-menu .child {
  list-style: none;
  margin-bottom: 10px;
}
/* RESIZE FOR SMALL SCREENS
----------------------------------------------------------*/
@media (max-width: 1216px) {
  #header #logo img.housters {
    width: 208px;
    height: 55px;
  }
  #header #logo .get-mobile-app {
    margin-left: 105px;
  }
  #header #menu-links .link a,
  #header #menu-links .link span.caret {
    font-size: 13px;
  }
}
@media (max-width: 992px) {
  #header #logo img.housters {
    width: 115px;
    height: 30px;
  }
  #header #logo .get-mobile-app {
    margin-left: 12px;
  }
  #header #menu-links .link a,
  #header #menu-links .link span.caret {
    font-size: 12px;
  }
}