a {
  color: #bbcee0;
}
a:focus, a:hover {
  color: white;
}

.btn-circle:focus, .btn-circle:hover {
  color: #8dcdda;
  background: rgba(255, 255, 255, 0.25);
}

.highlight {
  color: #d2e8fc;
}


#mainNav a {
  color: white;
  text-shadow: 1px 1px 2px gray;
  transition: color 0.3s ease-out;
  will-change: color;
}

.masthead {
  background: url("../../img/projects/hdq/intro.jpg") no-repeat center scroll;
  background-position: 36% 66%;
  background-color: black;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.breaker-a {
  background: url("../../img/projects/hdq/break_a.jpg") no-repeat center scroll ;
  background-color: black;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.breaker-b {
  background: url("../../img/projects/hdq/break_b.jpg") no-repeat right scroll ;
  background-color: black;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.breaker-c {
  background: url("../../img/projects/hdq/break_c.jpg") no-repeat left scroll ;
  background-position: 0% 30%;
  background-color: black;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.breaker-d {
  background: url("../../img/projects/hdq/break_d.jpg") no-repeat center scroll ;
  background-color: black;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}