html,body {
  font-family: 'Droid Sans', sans-serif;
  height: 100%;
}

.bgimage {
  position: relative;
  background-image: url('../images/headerbackground.jpg');
  background-position: center center;
  background-size: cover;
  height: 20em;
  border-bottom: 5px solid white;
}

.bgimage .container img {
    position:relative;
    bottom: -14.1em;
}

section {
  text-align:center;
}

#wrap {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin-top: 3em;
}

.navbar-default .navbar-brand {
    color: black;
}

.navbar-default {
  font-family: 'Teko', sans-serif;
  letter-spacing: 2px;
  font-size: 1.5em;
  color: white;
  background-color: rgba(0,0,0,0.9);
  border: 0px;
}

.navbar-default .navbar-nav>li>a {
    color: white;
}
.nav>li.active>a:active{
    color: white;
}
.nav>li.active>a:focus{
    color: white;
}

.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover {
    background-color: rgba(0, 0, 0, 0.9);
    color: white;
}

.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {
    color: white;
    text-decoration: underline;
}

.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
    /*background-color: rgba(0,0,0,0.50);*/
    color: white;
    text-decoration: underline;
  }

  .dropdown-menu>li>a {
    color: white;
  }

  ul.dropdown-menu {
      background-color: rgba(0, 0, 0, 0.9);
      color: white;
      font-size: .95em;
  }

  .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover {
      background-color: rgba(0, 0, 0, 0.0);
      color: white;
      text-decoration: underline;
  }

  .dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover {
  background-color: rgba(0,0,0,0.9);
  border-left: 1.05em solid;
  border-color: white;
  }


.breadcrumb {
  background-color: white;
  border-radius: 0px;
  margin-top: 1.5em;
  padding: 0px;
}

.textfield {
  margin-bottom: 1em;
  width: 20em;
}

h1 {
  font-family: 'Slabo 27px', serif;
  font-size: 2.3em;
}

h2 {
  font-family: 'Slabo 27px', serif;
  font-size: 1.75em;
}

h3 {
  font-family: 'Slabo 27px', serif;
  margin-top: 0px;
  font-size: 1.5em;
  font-weight: 700;
}

h4 {
  color: #646464;
  font-size: 1em;
  font-weight: 700;
}

h5 {
  font-size: 1.2em;
  font-weight: 700;
}


/*changes color of hamburger menu border*/
.navbar-default .navbar-toggle {
  border-color: white
}

/*changes color of hamburger menu*/
.navbar-default .navbar-toggle .icon-bar {
  background-color: white;
}

section {
  margin-top: 1em;
  margin-bottom: 1em;
}

.services section {
  text-align: center;
}

.logo-white {
  border: 2px solid black;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 35px;
    height: 0;
    overflow: hidden;
}

.video-container iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}

figure.feature-image {
    margin: 0;
}

/*important for picturefill resp. image code*/
section.portfolio img {
    display: block;
    width: 100%;
    height: auto;
}

/*-------------------------BREAKPOINT: 992px----------------------*/
@media screen and (max-width: 992px) {


  #wrap {
      min-height: 100%;
      height: auto !important;
      height: 100%;
      /* Negative indent footer by it's height */
      margin: 0 auto -1em;
      margin-top: 3em;
        }


  footer {
      position:relative;
      font-size: .75em;
      font-weight: 100;
      height: 10em;
      padding: .75em 0em .75em 0em;
  }

  footer .container img {
      margin-top: 4em;
      display: block;
  }

}

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

  h1 {
    font-size: 2em;
  }

  section {
    margin-top: .5em;
    margin-bottom: .5em;
  }

  .textfield {
    margin-bottom: 1em;
    width: 12em;
  }

  .navbar-default .navbar-nav .open .dropdown-menu>li>a {
      color: white;

    }

  .navbar-default .navbar-nav .open .dropdown-menu>li>a:focus, .navbar-default .navbar-nav .open .dropdown-menu>li>a:hover {
    color: white;
  }

  .navbar-default .navbar-nav .open .dropdown-menu>.active>a, .navbar-default .navbar-nav .open .dropdown-menu>.active>a:focus, .navbar-default .navbar-nav .open .dropdown-menu>.active>a:hover {
        background-color: rgba(0, 0, 0, 0.90);
        color: white;
  }


  .bgimage {
    background-image: url('../images/headerbackground-small.jpg');
      height: 15em;
  }

  .bgimage .container img {
      position:relative;
      bottom: -9.1em;
  }
}