@font-face {
  font-family: "SourceCodePro";
  src: url("/static/fonts/SourceCodePro-Medium.eot");
  src: url("/static/fonts/SourceCodePro-Medium.eot?#iefix") format("embedded-opentype"), url("/static/fonts/SourceCodePro-Medium.otf.woff2") format("woff2"), url("/static/fonts/SourceCodePro-Medium.otf.woff") format("woff");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "SourceCodePro";
  font-weight: 600;
  src: url("/static/fonts/SourceCodePro-Semibold.eot");
  src: url("/static/fonts/SourceCodePro-Semibold.eot?#iefix") format("embedded-opentype"), url("/static/fonts/SourceCodePro-Semibold.otf.woff2") format("woff2"), url("/static/fonts/SourceCodePro-Semibold.otf.woff") format("woff");
}
@font-face {
  font-family: "SourceCodePro";
  font-weight: 500;
  font-style: italic;
  src: url("/static/fonts/SourceCodePro-MediumIt.eot");
  src: url("/static/fonts/SourceCodePro-MediumIt.eot?#iefix") format("embedded-opentype"), url("/static/fonts/SourceCodePro-MediumIt.otf.woff2") format("woff2"), url("/static/fonts/SourceCodePro-MediumIt.otf.woff") format("woff");
}
@font-face {
  font-family: "SourceCodePro";
  font-weight: 600;
  font-style: italic;
  src: url("/static/fonts/SourceCodePro-SemiboldIt.eot");
  src: url("/static/fonts/SourceCodePro-SemiboldIt.eot?#iefix") format("embedded-opentype"), url("/static/fonts/SourceCodePro-SemiboldIt.otf.woff2") format("woff2"), url("/static/fonts/SourceCodePro-SemiboldIt.otf.woff") format("woff");
}
html,
body {
  font-family: "SourceCodePro", monospaced;
  font-size: 25px;
  line-height: 1.47em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -moz-font-feature-settings: "ss04" 1;
  -ms-font-feature-settings: "ss04" 1;
  -o-font-feature-settings: "ss04" 1;
  -webkit-font-feature-settings: "ss04" 1;
  font-feature-settings: "ss04" 1;
  color: #222;
  font-weight: normal;
  font-style: normal;
}

* {
  font-size: 0.64rem;
  line-height: 1rem;
}

.header__nav__item, h1,
h2,
h3,
h4 {
  text-transform: uppercase;
  letter-spacing: 0.0625em;
  font-weight: normal;
}

::-moz-selection {
  background: #ff4719;
  color: #fff;
  opacity: 1;
}

::selection {
  background: #ff4719;
  color: #fff;
  opacity: 1;
}

html,
body {
  padding: 0;
  border: 0;
  margin: 0;
}
@media all and (max-width: 900px) {
  html,
body {
    font-size: 22.5px;
  }
}
@media all and (max-width: 600px) {
  html,
body {
    font-size: 22.5px;
  }
}

* {
  box-sizing: border-box;
}

h1,
h2,
h3,
h4,
p {
  margin: 0 0 1rem 0;
}
h1:last-child,
h2:last-child,
h3:last-child,
h4:last-child,
p:last-child {
  margin: 0;
}
@media all and (max-width: 600px) {
  h1,
h2,
h3,
h4,
p {
    margin-bottom: 0.5rem;
  }
}

h1 {
  color: #ff4719;
}

a {
  color: inherit;
  text-decoration: none;
  transition: border-color 100ms;
}

p a {
  color: #ff4719;
  border-bottom: 1px solid rgba(255, 71, 25, 0);
}

p a:hover {
  color: #ff4719;
  border-bottom: 1px solid rgba(255, 71, 25, 0.8);
}

p b,
p strong {
  font-weight: 600;
}

p i,
p em {
  font-style: italic;
}

.col {
  width: 8.33%;
  padding: 1rem;
  float: left;
}
.col.col--two {
  width: 16.66%;
}
@media all and (max-width: 600px) {
  .col.col--two {
    width: 50%;
  }
}
.col.col--two-half {
  width: 20.83%;
}
@media all and (max-width: 600px) {
  .col.col--two-half {
    width: 50%;
  }
}
.col.col--three {
  width: 25%;
}
@media all and (max-width: 600px) {
  .col.col--three {
    width: 50%;
  }
}
.col.col--four {
  width: 33.33%;
}
@media all and (max-width: 600px) {
  .col.col--four {
    width: 50%;
  }
}
.col.col--five {
  width: 41.66%;
}
@media all and (max-width: 600px) {
  .col.col--five {
    width: 100%;
  }
}
.col.col--five--half {
  width: 45.83%;
}
@media all and (max-width: 600px) {
  .col.col--five--half {
    width: 100%;
  }
}
.col.col--six {
  width: 50%;
}
@media all and (max-width: 600px) {
  .col.col--six {
    width: 100%;
  }
}
.col.col--seven {
  width: 58.33%;
}
@media all and (max-width: 600px) {
  .col.col--seven {
    width: 100%;
  }
}
.col.col--eight {
  width: 66.66%;
}
@media all and (max-width: 600px) {
  .col.col--eight {
    width: 100%;
  }
}
.col.col--nine {
  width: 75%;
}
@media all and (max-width: 600px) {
  .col.col--nine {
    width: 100%;
  }
}
.col.col--ten {
  width: 83.33%;
}
@media all and (max-width: 600px) {
  .col.col--ten {
    width: 100%;
  }
}
.col.col--eleven {
  width: 91.66%;
}
@media all and (max-width: 600px) {
  .col.col--eleven {
    width: 100%;
  }
}
.col.col--twelve {
  width: 100%;
}
@media all and (max-width: 600px) {
  .col.col--twelve {
    width: 100%;
  }
}
.col.col--first {
  clear: both;
}
.col.col--centered {
  margin: 0 auto;
  float: none;
  overflow: hidden;
}
.col.col--indent-one {
  margin-left: 8.33%;
}
@media all and (max-width: 600px) {
  .col.col--indent-one {
    margin-left: 0;
  }
}
.col.col--indent-two {
  margin-left: 16.66%;
}
@media all and (max-width: 600px) {
  .col.col--indent-two {
    margin-left: 0;
  }
}
.col.col--indent-three {
  margin-left: 25%;
}
@media all and (max-width: 600px) {
  .col.col--indent-three {
    margin-left: 0;
  }
}

.col.box {
  margin-bottom: 2rem;
  text-align: center;
  padding: 1rem;
}
.col.box h3,
.col.box .more {
  text-align: center;
}

.box--grey {
  background: #e8e8e8;
}
.box--grey h3 {
  color: #ff4719;
}

.box--orange {
  background: #ff4719;
}
.box--orange p,
.box--orange h3,
.box--orange h3 span,
.box--orange p a {
  color: #fff;
}

.orange {
  color: #ff4719;
}

.grey {
  color: #8a8a8a;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2rem;
  background: #fff;
  z-index: 998;
  box-shadow: 0px 0 5px rgba(0, 0, 0, 0.1);
}
header.noshadow {
  box-shadow: none;
}

.header__title {
  padding: 0.5rem 1rem;
  width: auto;
  float: left;
  color: #ff4719;
}

.header__nav {
  padding: 0 1rem;
  float: right;
  text-align: center;
}

.header__nav--social {
  width: 25%;
  float: right;
  text-align: right;
}

.header__nav__item {
  display: inline-block;
  padding: 0.5rem 0;
  margin: 1px 0 0 0.75rem;
  color: #8a8a8a;
}

.header__nav__item:first-child {
  margin-left: 0;
}

.header__nav__item.active,
.header__nav__item:hover {
  color: #ff4719;
}

.contact-icon,
.header__nav__item--twitter,
.header__nav__item--instagram {
  background: url("/static/img/bkd-icons.svg") 0 0 no-repeat;
  display: inline-block;
  text-indent: -9999em;
  width: 20px;
  height: 20px;
  vertical-align: middle;
}

.contact-icon {
  zoom: 1.25;
  margin: 0 0.5rem;
}

.contact-icon,
.contact-icon:hover {
  text-decoration: none;
  border: 0;
  background-color: none;
}

.contact-twitter:hover,
.header__nav__item--twitter:hover {
  background-position: 0 -50px;
}

.contact-instagram,
.header__nav__item--instagram {
  background-position: -100px 0;
}

.contact-instagram:hover,
.header__nav__item--instagram:hover {
  background-position: -100px -50px;
}

footer .contact-instagram {
  display: block;
  float: left;
  background-position: -100px -100px;
  margin-top: 1px;
}
footer .contact-instagram:hover {
  background-position: -100px -100px;
}

.contact-linkedin {
  background-position: -200px 0;
}

.contact-linkedin:hover {
  background-position: -200px -50px;
}

.inner {
  width: 100%;
  max-width: 52rem;
  padding: 0 1rem;
  margin: 0 auto;
  text-align: left;
  clear: both;
  overflow: hidden;
}
@media all and (max-width: 600px) {
  .inner {
    padding: 0;
  }
}

main {
  width: 100%;
  text-align: center;
  margin: 2rem 0 300px 0;
  padding: 0 0 2.5rem 0;
  overflow: hidden;
  z-index: 2;
  position: relative;
  background: #fff;
}

.main--with-header {
  margin-top: 2rem;
}

@media all and (max-width: 600px) {
  .element__image--header {
    display: none;
  }
}
.page-title {
  width: 100%;
  padding: 1.5rem 0;
  color: #fff;
  background: #ff4719;
  margin-bottom: 1rem;
  position: relative;
  overflow: hidden;
}
.page-title .title {
  border-bottom: 1px solid;
}
.page-title .subtitle {
  white-space: nowrap;
}
.page-title .inner {
  padding-top: 0;
  padding-bottom: 0;
  text-align: center;
}
@media all and (max-width: 600px) {
  .page-title .inner {
    padding: 0 1rem;
  }
}
.page-title .col {
  padding-top: 0;
  padding-bottom: 0;
}
.page-title .col.date {
  text-align: left;
}
.page-title h2 {
  margin: 0;
  letter-spacing: 0.125em;
}
.page-title .next,
.page-title .prev {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  width: auto;
  overflow: hidden;
  transition: none;
}
@media all and (max-width: 600px) {
  .page-title .next,
.page-title .prev {
    display: none;
  }
}
.page-title .next::before,
.page-title .prev::before {
  content: "";
  display: block;
  position: absolute;
  margin-top: -2rem;
  height: 8rem;
  width: 4rem;
  background: url("/static/img/bkd-arrows.svg") 0 0 no-repeat;
  background-size: 200px 800px;
  background-size: 8rem 32rem;
  background-position: right 1.2rem top 0;
  z-index: 1;
}
.page-title .next span,
.page-title .prev span {
  display: none;
  border: 0;
  padding: 1.5rem 0;
  color: #ff4719;
  text-transform: uppercase;
}
.page-title .next:hover span,
.page-title .prev:hover span {
  display: inline-block;
}
.page-title .next:hover,
.page-title .prev:hover {
  background-color: #fff;
}
.page-title .next {
  right: 0;
  padding-right: 3.5rem;
}
.page-title .next::before {
  right: 0;
}
.page-title .next:hover::before {
  background-position: right 1.2rem top -8rem;
}
.page-title .next span {
  padding-left: 1.2rem;
}
.page-title .prev {
  left: 0;
  padding-left: 3.5rem;
}
.page-title .prev::before {
  left: 0;
  background-position: left 1.2rem top -16rem;
}
.page-title .prev:hover::before {
  background-position: left 1.2rem top -24rem;
}
.page-title .prev span {
  padding-right: 1.2rem;
  text-align: right;
}

.subnav {
  margin-top: -1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid #e8e8e8;
  background: #fff;
}
.subnav.attached {
  position: fixed;
  top: 2rem;
  margin-top: 0;
  left: 0;
  right: 0;
  z-index: 99999;
  border: 0;
  box-shadow: 0px 0 5px rgba(0, 0, 0, 0.1);
}
.subnav a {
  display: inline-block;
  margin: 0 1em;
  letter-spacing: 0.125em;
  text-transform: uppercase;
  opacity: 0.5;
  white-space: nowrap;
}
@media all and (max-width: 600px) {
  .subnav a {
    margin: 0 0.25em;
  }
}
.subnav a.active,
.subnav a:hover {
  opacity: 1;
  color: #ff4719;
}

@media all and (max-width: 600px) {
  .subnav--tall {
    margin-top: 0;
    padding: 0.5rem;
    line-height: 20px;
  }
}
.subpage {
  padding-bottom: 6rem;
}
nav + .subpage {
  border-top: none;
}
.subpage:last-child {
  min-height: 80vh;
}

.col.subpage__image img {
  margin-top: 3px;
  width: 100%;
  height: auto;
}
@media all and (max-width: 600px) {
  .col.subpage__image {
    width: 100%;
    margin: 0;
    padding-bottom: 0;
  }
}

.subpage__title {
  text-align: center;
  color: #ff4719;
  letter-spacing: 0.125em;
  text-transform: uppercase;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.client-logo {
  text-align: center;
  background-clip: content-box;
  min-height: 6rem;
  position: relative;
}
.client-logo div {
  position: absolute;
  left: 1rem;
  right: 1rem;
  top: 50%;
  transform: translate(0, -50%);
  text-align: center;
}
.client-logo img {
  opacity: 0.8;
}
.client-logo img.landscape {
  max-width: 80%;
  max-height: 2rem;
}
.client-logo img.portrait {
  max-width: 60%;
  max-height: 4rem;
}
.client-logo img.square {
  max-height: 4rem;
  max-width: 4rem;
}
.client-logo span {
  width: 100%;
}

.element {
  width: 100%;
  overflow: hidden;
  display: block;
  position: relative;
  margin-bottom: 2rem;
}
@media all and (max-width: 600px) {
  .element {
    margin-bottom: 0;
  }
}

.element__long-caption {
  margin-top: 0.5em;
  margin-bottom: -0.25em;
}
.element__long-caption span {
  text-transform: uppercase;
  letter-spacing: 0.0625em;
  color: #ff4719;
}

.element--first {
  margin-top: 2rem;
  margin-bottom: 3rem;
  padding-bottom: 40%;
  position: relative;
}
.element--first .element__image {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  overflow: hidden;
}

.element__image {
  width: 100%;
  position: relative;
}

.element__image--portrait {
  padding: 0;
}
@media all and (max-width: 600px) {
  .element__image--portrait {
    width: 100%;
  }
}

.element__image img {
  width: 100%;
  display: block;
  position: relative;
  z-index: 2;
  transition: opacity 200ms;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  transform-style: preserve-3d;
}

.element__image iframe {
  display: block;
  position: relative;
  z-index: 2;
  transition: opacity 200ms;
}

.element:hover img {
  opacity: 0.4;
  transition: opacity 200ms;
  mix-blend-mode: multiply;
}

.element h3 {
  position: absolute;
  top: 50%;
  height: 1.5rem;
  margin-top: -0.75rem;
  width: 100%;
  z-index: 4;
  text-align: center;
  color: #fff;
  opacity: 0;
  transition: opacity 200ms;
}

.element:hover h3 {
  opacity: 1;
  transition: opacity 200ms;
}

.element__image__overlay {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  background: #fff;
  transition: background-color 200ms;
}
.element:hover .element__image__overlay {
  background: #ff4719;
}

@media all and (max-width: 600px) {
  .element__caption {
    padding-left: 4rem;
    padding-right: 4rem;
  }
}

h3 span {
  border-bottom: 1px solid #fff;
}

.related {
  clear: both;
  margin-top: 1rem;
  border-top: 1px solid #e8e8e8;
  padding-top: 1rem;
  background: #ff4719;
  margin-bottom: -10em;
  padding-bottom: 3em;
}
.related h2 {
  margin-bottom: 0;
  color: #fff;
}
.related .element__long-caption * {
  color: #fff;
}
.related .element__image__overlay {
  background: #ff4719;
}

.related--news a {
  display: block;
  padding-bottom: 66.66%;
  background: #ff4719;
  color: #fff;
  border: 1px solid #ff4719;
  text-align: center;
  position: relative;
}
.related--news a h3 {
  position: absolute;
  top: 50%;
  width: 100%;
  transform: translate(0, -50%);
}
.related--news a:hover {
  border: 1px solid #ff4719;
  background: #fff;
  color: #ff4719;
}

.overlay {
  position: fixed;
  background: rgba(255, 71, 25, 0.95);
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  cursor: pointer;
  background-image: url("/static/img/chocolate_grinder.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto 40vh;
}
@media (max-aspect-ratio: 1/1) {
  .overlay {
    background-size: 40vw auto;
  }
}

.overlay__title {
  position: absolute;
  top: 48%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 10rem;
  letter-spacing: 0.0625em;
  color: #fff;
}
@media all and (max-width: 600px) {
  .overlay__title {
    font-size: 8rem;
  }
}

.main--home.main--with-header {
  margin-top: 0;
}

.banner {
  width: 100%;
  background: #ff4719;
  color: #fff;
  overflow: hidden;
  padding: 0.5rem 0;
  margin: 1rem 0 4rem 0;
}

.banner .col {
  text-align: center;
}

.banner p a {
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.8);
}

.banner p a:hover {
  border: none;
  border-bottom: 1px solid rgba(255, 71, 25, 0.8);
}

.main--work .page-title {
  margin-bottom: 1rem;
}
@media all and (max-width: 600px) {
  .main--work .page-title {
    margin-bottom: 0;
  }
}

.main--work .element {
  margin-bottom: 0;
}

.main--work .inner .col {
  padding-bottom: 0;
}

@media all and (max-width: 600px) {
  .main--work .inner .col {
    padding-left: 0.5rem;
  }

  .main--work .inner .col:nth-child(2n+1) {
    clear: left;
    padding-right: 0.5rem;
    padding-left: 1rem;
  }
}
@media all and (min-width: 600px) {
  .main--work .inner .col:nth-child(3n+1) {
    clear: left;
  }
}
.main--project .page-title {
  margin-bottom: 0;
}

.project__text {
  padding-top: 1rem;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  background: #f6f6f6;
  overflow: hidden;
}

.project__text--more {
  display: none;
}

@media all and (max-width: 600px) {
  .project__text {
    display: none;
  }
  .project__text .inner .col {
    padding-top: 0;
    padding-bottom: 0;
  }

  .project__text--more {
    display: block;
  }
  .project__text--more a {
    display: block;
  }

  .body--show-text .project__text {
    display: block;
  }
  .body--show-text .project__text--more {
    display: none;
  }
}
.main--project .element--first {
  margin-bottom: 0;
}

.project__images .element:hover .element__caption,
.project__images .element:hover .element__image__overlay {
  display: none;
}
.project__images .element:hover img {
  opacity: 1;
}

.factbox {
  padding: 0;
  padding-top: 1rem;
}
@media all and (max-width: 600px) {
  .factbox {
    padding: 0 1rem;
    width: 100% !important;
    margin-top: 1rem;
  }
}

.factbox table {
  table-layout: fixed;
}
.factbox table td {
  padding: 0;
  vertical-align: top;
}
.factbox table td:first-child {
  padding-right: 20px;
  text-align: right;
}
.factbox table td.label,
.factbox table td:first-child:not(:last-child) {
  opacity: 0.5;
}

hr {
  height: 1px;
  width: 100%;
  padding: 0;
  margin: 1rem 0;
  border: 0;
  background: #e8e8e8;
}

.main--page--contact {
  padding-bottom: 0;
}

.map {
  width: 100%;
  background: #9999a0;
  margin-top: 1rem;
}

#theMap {
  width: 100%;
  min-height: 600px;
}

footer {
  position: fixed;
  bottom: 0;
  z-index: 1;
  width: 100%;
  height: 300px;
  padding: 0;
  margin: 0;
  background-color: #ff4719;
  background-image: url("/static/img/hac_1200.png");
  background-position: top 50% center 0;
  background-repeat: repeat-x;
  background-size: 1012px 300px;
  /*
  .chocolate-grinder {
      position: absolute;
      left: 50%;
      top: 23%; // vertically center inside top half
      transform: translate(-50%, -50%);
      width: 72px;
      height: 100px;
      background: url("/static/img/chocolate_grinder.png") 0 0 no-repeat;
      background-size: 72px 100px;
  }
  */
}
footer .inner {
  display: flex;
  flex-wrap: wrap;
}
footer div {
  flex: 0 0 33.33%;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media all and (max-width: 600px) {
  footer div {
    flex: 0 0 100%;
    height: auto;
  }
  footer div > * {
    padding: 0.5em 0;
  }
}
footer div a {
  color: #fff;
}
footer .chocolate-grinder {
  height: 120px;
  background: url("/static/img/chocolate_grinder.png") center center no-repeat;
  background-size: 72px 100px;
}

/*# sourceMappingURL=app.css.map */