/*
Structure for the top menu/navigation and how it should behave when resized.
Please keep all the colors and font definitions out of here and put them into ourfirsthome.less instead where the branding is already defined.
*/
.nav {
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}
.nav > li {
  position: relative;
  display: block;
  text-align: left;
  /*
    @media (min-width: 768px) {
      width: percentage(1/8);
    }
    */

}
.nav > li > a {
  position: relative;
  display: block;
  padding: 30px 10px;
  text-transform: uppercase;
}
.nav > li.social {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
.nav > li.social a {
  width: 54px;
  background: url("../css/socsprites.png") top center no-repeat;
}
.nav > li.social a.facebook {
  background-position: 10px 30px;
}
.nav > li.social a.twitter {
  background-position: -54px 30px;
}
.nav > li.social a.instagram {
  background-position: -118px 30px;
}
.nav > li.social a.pinterest {
  background-position: -182px 30px;
}
#navi {
  padding-left: 0;
  padding-right: 0;
}
#navi .navbar {
  margin-bottom: 0;
}
#navi .navbar-nav > li > a {
  padding: 30px 15px 26px 15px;
  line-height: 20px;
}
.container > .navbar-header,
.container-fluid > .navbar-header,
.container > .navbar-collapse,
.container-fluid > .navbar-collapse {
  margin-right: 0px;
  margin-left: 0px;
}
.navbar-brand {
  float: left;
  height: 50px;
  padding: 15px 15px;
  font-size: 18px;
  line-height: 20px;
}
.navbar-brand:hover,
.navbar-brand:focus {
  text-decoration: none;
}
.navbar-brand > img {
  display: block;
}
/* mobile */
@media (max-width: 991px) {
  #navi .navbar-nav {
    margin: 0;
  }
  #navi .navbar-nav > li > a {
    padding: 10px 15px;
  }
  #navi .navbar-nav li.social {
    display: inline-block;
  }
  #navi .navbar-nav li.social a {
    width: 48px;
  }
  #navi .navbar-nav li.social a.facebook {
    background-position: 15px 10px;
  }
  #navi .navbar-nav li.social a.twitter {
    background-position: -48px 10px;
  }
  #navi .navbar-nav li.social a.instagram {
    background-position: -114px 10px;
  }
  #navi .navbar-nav li.social a.pinterest {
    background-position: -178px 10px;
  }
  #navi .navbar-toggle {
    cursor: pointer;
    padding: 10px 30px 10px 0px;
    margin: 15px 14px;
  }
  #navi .navbar-toggle span,
  #navi .navbar-toggle span:before,
  #navi .navbar-toggle span:after {
    cursor: pointer;
    height: 3px;
    width: 100%;
    background: white;
    position: absolute;
    display: block;
    content: '';
  }
  #navi .navbar-toggle span:before {
    top: -10px;
  }
  #navi .navbar-toggle span:after {
    bottom: -10px;
  }
  #navi .navbar-toggle span,
  #navi .navbar-toggle span:before,
  #navi .navbar-toggle span:after {
    transition: all 250ms ease-in-out;
  }
  #navi .navbar-toggle.active span {
    background-color: transparent;
  }
  #navi .navbar-toggle.active span:before,
  #navi .navbar-toggle.active span:after {
    top: 0;
  }
  #navi .navbar-toggle.active span:before {
    transform: rotate(45deg);
  }
  #navi .navbar-toggle.active span:after {
    transform: rotate(-45deg);
  }
  .navbar-nav .open .dropdown-menu {
    position: static;
    float: none;
    width: auto;
    margin-top: 0;
    background-color: transparent;
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
  }
  .navbar-nav .open .dropdown-menu > li > a,
  .navbar-nav .open .dropdown-menu .dropdown-header {
    padding: 5px 15px 5px 25px;
  }
  .navbar-nav .open .dropdown-menu > li > a {
    line-height: 20px;
  }
  .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-nav .open .dropdown-menu > li > a:focus {
    background-image: none;
  }
  .navbar-wrapper .container {
    padding-right: 0;
    padding-left: 0;
  }
}
/* tablet */
/*@media (min-width: 768px) and (max-width: 959px) {
  #navi {
    padding-left: 0;
    padding-right: 0;
  }
  #navi .navbar-brand img {
    display: none;
  }
  #navi .navbar {
    //margin-bottom: 10px;
    margin-bottom: 0;
  }
  #navi .navbar-nav > li > a {
    padding: 30px 9px 26px 9px;
    line-height: 20px;
    text-align: center;
  }
  #navi .navbar-nav {
    float: left;
    margin: 0;
  }
  #navi .navbar-nav > li {
    float: left;
    width: 105px;

  }
  #navi .navbar-nav > li.social a {
    width: 40px;
    background: url("../css/socsprites.png") top center no-repeat;
  }
  #navi .navbar-nav > li.social a.facebook {
    background-position: 15px 30px;
  }
  #navi .navbar-nav > li.social a.twitter {
    background-position: -49px 30px;
  }
  #navi .navbar-nav > li.social a.instagram {
    background-position: -113px 30px;
  }
  #navi .navbar-nav > li.social a.pinterest {
    background-position: -177px 30px;
  }

  // Navbar positioning foo
  .navbar-wrapper {
    margin-top: 0px;
  }
  .navbar-wrapper .container {
    padding-right: 0;
    padding-left: 0;
  }
  .navbar-wrapper > .container {
    padding-right: 5px;
    padding-left: 5px;
  }
  .navbar-wrapper .navbar {
    padding-right: 0;
    padding-left: 0;
  }
  // Bump up size of carousel content
  .carousel-caption p {
    margin-bottom: 20px;
    font-size: 21px;
    line-height: 1.4;
  }
  .navbar > .container .navbar-brand,
  .navbar > .container-fluid .navbar-brand {
    margin-left: 0;
  }
}
*/
/* styles for screens larger 960; (desktop) */
@media (min-width: 992px) {
  #navi .navbar-nav > li > a {
    padding: 30px 17px 26px 17px;
    line-height: 20px;
    text-align: center;
  }
  #navi .navbar-brand img {
    display: none;
  }
  .navbar-nav {
    float: left;
    margin: 0;
  }
  .navbar-nav > li {
    float: left;
  }
  .navbar-nav > li.social a {
    width: 38px;
    background: url("../css/socsprites.png") top center no-repeat;
  }
  .navbar-nav > li.social a.facebook {
    background-position: 10px 30px;
  }
  .navbar-nav > li.social a.twitter {
    background-position: -54px 30px;
  }
  .navbar-nav > li.social a.instagram {
    background-position: -118px 30px;
  }
  .navbar-nav > li.social a.pinterest {
    background-position: -182px 30px;
  }
}