* { box-sizing: border-box; }
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
html, body { min-height: 100vh; position: relative; }
a img { border: none; }
button { margin: 0; }
blockquote { quotes: none; }
blockquote:before, blockquote:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; }
button, select { cursor: pointer; }
main {display: block;}
/* @todo: replace this old school approach with the auto reset */
:root {
  /* FONTS */

  /* COLORS */

  /* COLORS IN CONTEXT */
}
/* BREAKPOINTS */
@font-face {
    font-family: 'rubik';
    src: url('../fonts/rubik-medium-webfont.eot');
    src: url('../fonts/rubik-medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/rubik-medium-webfont.woff2') format('woff2'),
         url('../fonts/rubik-medium-webfont.woff') format('woff'),
         url('../fonts/rubik-medium-webfont.ttf') format('truetype'),
         url('../fonts/rubik-medium-webfont.svg#rubikregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'arbutus';
    src: url('../fonts/arbutusslab-regular-webfont.eot');
    src: url('../fonts/arbutusslab-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/arbutusslab-regular-webfont.woff2') format('woff2'),
         url('../fonts/arbutusslab-regular-webfont.woff') format('woff'),
         url('../fonts/arbutusslab-regular-webfont.ttf') format('truetype'),
         url('../fonts/arbutusslab-regular-webfont.svg#arbutus_slabregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
/* HELPER CLASSES */
.font-primary {
  font-family: ;;
  font-family: 'rubik', sans-serif
}
.font-secondary {
  font-family: ;;
  font-family: 'arbutus', serif
}
.hwf-logo {
  background: url('../images/logo.png');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
  height: 28px;
  height: 3.5rem;
  text-indent: -9999px;
  width: 144px;
  width: 18rem
}
.hwf-logo--lg { height: 48px; height: 6rem; width: 240px; width: 30rem; }
@media (min-width: 768px) {
  .hwf-logo {
    height: 6rem;
    width: 30rem
  }
  .hwf-logo--lg { height: 14rem; width: 72rem; }
}
html {
  font-size: 8px;
  font-size-adjust: 100%;
}
body {
  color: #134f49;
  font-family: 'rubik', sans-serif;
  font-size: 16px;
  font-size: 2rem;
}
em {
  font-family: 'rubik', sans-serif;
  letter-spacing: 2.666px;
  letter-spacing: .333333333rem;
  text-transform: uppercase;
}
.site-footer {
  background: #ffffff;
}
.site-footer .wrapper { padding: 24px; padding: 3rem; text-align: center; }
.site-footer .site-nav { font-size: 16px; font-size: 2rem; margin: 24px 0 12px 0; margin: 3rem 0 1.5rem 0 }
.site-footer .site-nav__items { text-align: center; }
.site-footer .site-nav__item a { padding: 12px 20px; padding: 1.5rem 2.5rem; }
.site-footer__copyright { font-size: 12px; font-size: 1.5rem; line-height: 16px; line-height: 2rem; margin-top: 28px; margin-top: 3.5rem; text-align: center; }

.random-projects {
}




.random-projects__items { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; display: -webkit-box; display: -ms-flexbox; display: flex; list-style-type: none; margin: 0 auto; width: 100%; }
.random-projects__item { max-width: 64px; max-width: 8rem; padding: 8px; padding: 1rem; width: 25%; }
.random-projects__item-link { background-size: cover; background-position: center center; border-radius: 50%; display: block; -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; overflow: hidden; width: 100%; }
.random-projects__item-link span { display: none; }
.random-projects__item-link::before { content: ''; display: block; padding-top: 100%; }
@media (min-width: 768px) {
  .site-footer {
    bottom: 0;
    height: 70rem;
    left: 0;
    position: fixed;
    width: 100%;
    z-index: 0;
  }
  .site-footer .wrapper { padding: 96px; padding: 12rem; }
  .site-footer .site-nav {width:100%; margin: 48px 0 36px 0; margin: 6rem 0 2rem 0; }
  .site-footer__copyright { font-size: 2rem; }

  .random-projects {
  }

  .random-projects__item { max-width: 15rem; padding: 2rem; margin: 0 1rem;}
  .mobile-only {display: none;}
  .desktop-only {display: block;}
}
@media (min-width: 1200px) {
  .random-projects {
  }
  .random-projects__item { position: relative; }
  .random-projects__item .random-projects__item-link { position: relative; z-index: 5; }
  .random-projects__item::after, 
  .random-projects__item::before { border-radius: 50%; content: ''; opacity: 0; position: absolute; -webkit-transition: opacity 100ms linear; transition: opacity 100ms linear; z-index: 0; }
  .random-projects__item::before {
  background-image: -webkit-linear-gradient(left, rgba(0,0,0,0.5), rgba(0,0,0,0.5));
  background-image: -o-linear-gradient(left, rgba(0,0,0,0.5), rgba(0,0,0,0.5));
  background-image: linear-gradient(to right, rgba(0,0,0,0.5), rgba(0,0,0,0.5)); 
   height: calc(100% - 2rem); left: 1rem; top: 1rem; width: calc(100% - 2rem);
    }

    .random-projects__item:hover::before {
background-image: -webkit-linear-gradient(left, #cad525, #53aa83); 
   background-image: linear-gradient(to right, #cad525, #53aa83); 

    }

  .random-projects__item::after { background: #ffffff; height: calc(100% - 2.75rem); left: 1.375rem; top: 1.375rem; width: calc(100% - 2.75rem); }
  .random-projects__item:hover {
}
  .random-projects__item:hover::before, 
  .random-projects__item:hover::after { opacity: .9; }

  .random-projects__item--completed .random-projects__item-link, 
  .random-projects__item--under-consideration .random-projects__item-link, 
  .random-projects__item--in-progress .random-projects__item-link { overflow: hidden; }

  .random-projects__item--completed .random-projects__item-link span, 
  .random-projects__item--under-consideration .random-projects__item-link span, 
  .random-projects__item--in-progress .random-projects__item-link span { color: #ffffff; display: block; left: 0; letter-spacing: 2px; line-height: 1.5rem; position: absolute; text-align: center; text-transform: uppercase; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 100%; z-index: 20; }
  
  .random-projects__item--completed .random-projects__item-link::after, 
  .random-projects__item--under-consideration .random-projects__item-link::after, 
  .random-projects__item--in-progress .random-projects__item-link::after { 
     background-image: -webkit-linear-gradient(left, rgba(0,0,0,0.5), rgba(0,0,0,0.5));
     background-image: -o-linear-gradient(left, rgba(0,0,0,0.5), rgba(0,0,0,0.5));
     background-image: linear-gradient(to right, rgba(0,0,0,0.5), rgba(0,0,0,0.5)); 
     content: ''; 
     height: 100%; left: 0; opacity: .9; position: absolute; top: 0; width: 100%; z-index: 5; 
   }
  
  .random-projects__item--completed .random-projects__item-link:hover::after, 
  .random-projects__item--under-consideration .random-projects__item-link:hover::after, 
  .random-projects__item--in-progress .random-projects__item-link:hover::after { 
 background-image: -webkit-linear-gradient(left, #cad525, #53aa83);
   background-image: linear-gradient(to right, #cad525, #53aa83); 
  }

  .random-projects__item--under-consideration::after, 
  .random-projects__item--under-consideration::before, 
  .random-projects__item--in-progress::after, 
  .random-projects__item--in-progress::before { border-radius: 20rem 0 0 20rem; width: calc(50% - 1rem); }

  .random-projects__item-link span { font-size: 10px; font-size: 1.25rem; letter-spacing: 0 !important; line-height: 10px; line-height: 1.25rem; }
  
  .random-projects__item--under-consideration::after, 
  .random-projects__item--under-consideration::before { height: 0; width: 0; }
}

.site-header {background-color: #ffffff;position: fixed;-webkit-transition: background 100ms;transition: background 100ms;width: 100%;z-index: 100;}
.site-header .wrapper { height: 72px; height: 9rem; margin: 0 auto; position: relative; width: 100%; }
.site-header .hwf-logo { left: 20px; left: 2.5rem; -webkit-transition: background 100ms; transition: background 100ms; }
.site-header .site-nav { right: 20px; right: 2.5rem; }
.site-header .site-nav a { -webkit-transition: color 100ms; transition: color 100ms; }
.site-header .hwf-logo, .site-header .site-nav { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); }
body.full-page-bg .site-header:not([data-affixed="true"]) { background-color: transparent; }
body.full-page-bg .site-header:not([data-affixed="true"]) .hwf-logo { background-image: url('../images/logo-white.png'); }
body.full-page-bg .site-header:not([data-affixed="true"]) .site-nav__item a { color: #ffffff;}
.site-header:not([data-affixed="true"]) { position: absolute; }
.site-header[data-affixed].has-boundary { -webkit-animation: slideIn 750ms cubic-bezier(0.860, 0.000, 0.070, 1.000) 1; animation: slideIn 750ms cubic-bezier(0.860, 0.000, 0.070, 1.000) 1; }
.site-header[data-affixed].has-boundary[data-affixed="false"] { -webkit-animation: slideOut 750ms cubic-bezier(0.860, 0.000, 0.070, 1.000) 1; animation: slideOut 750ms cubic-bezier(0.860, 0.000, 0.070, 1.000) 1; }
.site-header.no-animate { -webkit-animation: none !important; animation: none !important; }
.site-nav {
  font-size: 14px;
  font-size: 1.75rem;
  text-transform: uppercase
}
.site-nav__items { display: block; list-style-type: none; text-align: left; }
.site-nav__item { display: inline-block; }
.site-nav__item a { color: #134f49; padding: 8px 0 8px 12px; padding: 1rem 0 1rem 1.5rem; text-decoration: none; }

 /* Dropdown stuff */
.dropdown { position: relative; display: inline-block; }
.dropdown-content {display: none;position: absolute;background-color: #134f49; min-width: 200px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; font-size:0.7em; left:30px;}
.dropdown-content li{list-style:none;}
.dropdown-content a {color: #fff;padding: 12px 16px;text-decoration: none;display: block;}
.dropdown-content a:hover {background-color: #ccc;color: #134f49;}
.dropdown:hover .dropdown-content {display: block;}
.site-footer .dropdown:hover .dropdown-content {display: none;}
/* END drop down */

@media (min-width: 768px) {
  .site-header .wrapper { height: 120px; height: 15rem; }
  .site-header .hwf-logo { left: 32px; left: 4rem; }
  .site-header .site-nav { right: 32px; right: 4rem; }
  .site-header:not([data-affixed="true"]) { background-color: transparent; }

  .site-nav {
    font-size: 3rem
  }

  .site-nav__item a { padding: 32px 0 4px 0px; padding: 4rem 0 0.5rem 0rem; margin-left: 32px; margin-left: 4rem;  }
  .footer-nav .site-nav__item a { margin: 0 0.75em; font-size: 20px;}
  .footer-nav ul.secondary-nav { margin-top: 6rem; }
}
@-webkit-keyframes slideIn {
  0% {
    background-color: #ffffff;
    position: absolute;
    -webkit-transform: translateY(-200%);
            transform: translateY(-200%);
  }
  100% {
    background-color: #ffffff;
    position: fixed;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes slideIn {
  0% {
    background-color: #ffffff;
    position: absolute;
    -webkit-transform: translateY(-200%);
            transform: translateY(-200%);
  }
  100% {
    background-color: #ffffff;
    position: fixed;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@-webkit-keyframes slideOut {
  0% {
    background-color: #ffffff;
    position: fixed;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    background-color: #ffffff;
    position: absolute;
    -webkit-transform: translateY(-200%);
            transform: translateY(-200%);
  }
}
@keyframes slideOut {
  0% {
    background-color: #ffffff;
    position: fixed;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    background-color: #ffffff;
    position: absolute;
    -webkit-transform: translateY(-200%);
            transform: translateY(-200%);
  }
}
.site-content {
  padding-top: 72px;
  padding-top: 9rem;
  position: relative;
}
@media (min-width: 768px) {
  .site-content {
    margin-bottom: 70rem;
    padding-top: 17rem;
    position: relative;
    z-index: 10;
  }
}
.projects {
}
.projects__featured { background-repeat: no-repeat; background-size: cover; position: relative; width: 100%; }
.projects__featured h2 { font-size: 12px; font-size: 1.5rem; letter-spacing: 2px; letter-spacing: .25rem; text-transform: uppercase; }
.projects__featured h2::after { border-right: 2px solid #ffffff; border-top: 2px solid #ffffff; content: ''; display: inline-block; height: .4em; margin-left: .4em; position: relative; top: -.125em; -webkit-transform: rotate(45deg); transform: rotate(45deg); width: .425em; }
.projects__featured h3 { font-size: 36px; font-size: 4.5rem; line-height: 48px; line-height: 6rem; }
.projects__featured::before { content: ''; display: block; padding-top: calc(100% - 8rem); }
.projects__featured-link { color: #ffffff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 100%; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; left: 0; padding: 36px 20px; padding: 4.5rem 2.5rem; position: absolute; text-decoration: none; top: 0; width: 100%; z-index: 5; }
.projects__list { padding-bottom: 104px; padding-bottom: 13rem; position: relative;
 /* TODO: Bark background graphic */ }
.projects__list::after { background: url('../images/bark.jpg'); background-position: center top; background-size: cover; bottom: 0; content: ''; display: block; height: 72px; height: 9rem; left: 0; position: absolute; width: 100%; }
.projects__items { padding: 8px 0; padding: 1rem 0; list-style-type: none; }
.projects__item h3 span { white-space: nowrap; }
.projects__item h3 span::after { border-right: 2px solid #134f49; border-top: 2px solid #134f49; content: ''; display: inline-block; height: .4em; position: relative; top: -.1em; -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: 100ms border linear; transition: 100ms border linear; width: .425em; }
.projects__item:nth-child(1) { -webkit-transition-delay: 100ms; transition-delay: 100ms; }
.projects__item:nth-child(2) { -webkit-transition-delay: 200ms; transition-delay: 200ms; }
.projects__item:nth-child(3) { -webkit-transition-delay: 300ms; transition-delay: 300ms; }
.projects__item--in-progress .projects__item-image span, .projects__item:hover .projects__item-image span { opacity: 1; }
.projects__item--in-progress .projects__item-image::after, .projects__item:hover .projects__item-image::after { opacity: .9; }
.projects__item:hover .projects__item-link { color: #cad525; }
.projects__item:hover h3 span::after { border-right-color: #cad525; border-top-color: #cad525; }
.projects__item-link { -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: #134f49; display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 16px; font-size: 2rem; line-height: 24px; line-height: 3rem; padding: 20px; padding: 2.5rem; text-decoration: none; -webkit-transition: 100ms color linear; transition: 100ms color linear; }
.projects__item-image { background-size: cover; border-radius: 50%; display: inline-block; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; margin-right: 20px; margin-right: 2.5rem; overflow: hidden; position: relative; width: 144px; width: 18rem; }
.projects__item-image span { color: #ffffff; font-size: 12px; font-size: 1.5rem; left: 0; letter-spacing: 2px; letter-spacing: .25rem; line-height: 12px; line-height: 1.5rem; opacity: 0; position: absolute; text-align: center; text-transform: uppercase; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: 100ms opacity linear; transition: 100ms opacity linear; width: 100%; z-index: 20; }
.projects__item-image::after { background-image: -webkit-linear-gradient(left, #cad525, #53aa83); background-image: linear-gradient(to right, #cad525, #53aa83); border-radius: 50%; content: ''; height: 100%; left: 0; opacity: 0; position: absolute; top: 0; -webkit-transition: 100ms opacity linear; transition: 100ms opacity linear; width: 100%; z-index: 5; }
.projects__item-image::before { content: ''; display: block; padding-top: 100%; }
@media (min-width: 768px) {
  .projects {
  }
  .projects__featured .wrapper { margin-bottom: 5%; padding-left: 32px; padding-left: 4rem; padding-right: 32px; padding-right: 4rem; }
  .projects__featured h2 { font-size: 24px; font-size: 3rem; letter-spacing: 4px; letter-spacing: .5rem; }
  .projects__featured h3 { font-size: 96px; font-size: 11rem; line-height: 80px; line-height: 9rem;}
  .projects__featured .h3-wrap {position: absolute; top: 3em; right: 1.125em; max-width:75%; text-align:right;}
  .projects__featured::before { background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(19, 79, 73, 0.75)); background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(19, 79, 73, 0.75)); opacity: 0; padding-bottom: 10%; padding-top: 50%; position: relative; -webkit-transition: opacity 100ms linear; transition: opacity 100ms linear; z-index: 10; }
  .projects__featured-link { padding-left: 0; padding-right: 0; z-index: 15; }
  .projects__featured:hover {
}
  .projects__featured:hover::before { opacity: 1; }
  .projects__list { margin-top: -7%; padding-bottom: 26rem; position: relative; z-index: 15; }
  .projects__list::after { height: 20rem; }
  .projects__items { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0 auto; max-width: 1400px; }
  .projects__item { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; width: 33.33333333%; }
  .projects__item--in-progress .projects__item-image span { font-size: 24px; font-size: 3rem; letter-spacing: 4px; letter-spacing: .5rem; line-height: 24px; line-height: 3rem; }
  .projects__item-link { display: block; font-size: 4rem; line-height: 4.5rem; text-align: center; }
  .projects__item-link h3 {
}
  .projects__item-link h3::after { height: .25em; width: .25em; }
  .projects__item-image { margin: 0 5%; margin-bottom: 7.5%; width: 90%; }
}
@media (min-width: 1200px) {
  .projects {
  }
  .projects__list { padding-bottom: 34rem; }
  .projects__list::after { height: 26rem; }
}
.home {
  background-color: #ffffff
}
.home__content { margin: 0 auto; max-width: 950px; position: relative; z-index: 5; }
.home__masthead { font-size: 20px; font-size: 2.5rem; margin-top: -72px; margin-top: -9rem; padding: 144px 32px 64px; padding: 18rem 4rem 8rem; position: relative; text-align: center; }
.home__masthead h1 { margin-bottom: 36px; margin-bottom: 4.5rem; -webkit-transition-delay: 250ms; transition-delay: 250ms; }
.home__masthead p { -webkit-transition-delay: 450ms; transition-delay: 450ms; }
.home__masthead p:not(:last-child) { margin-bottom: 32px; margin-bottom: 4rem; -webkit-transition-delay: 350ms; transition-delay: 350ms; }
.home__masthead .btn--primary { display: block; margin: 0 auto; max-width: 320px; max-width: 40rem; }
.home__video { overflow: hidden; position: relative; }
.home__video iframe, .home__video img { height: 100%; max-width: 100%; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 100%; }
.home__video img { height: auto; }
.home__video::before { content: ''; display: block; padding-top: 56.25%; }
@media (min-width: 768px) {
  .home {
  }
  .home__masthead { font-size: 6rem; margin-top: -17rem; padding: 37rem 4rem 14rem; }
  .home__masthead h1 { margin-bottom: 72px; margin-bottom: 9rem; }
  .home__masthead p:not(:last-child) { margin-bottom: 64px; margin-bottom: 8rem; }
}
.interior {
  color: #ffffff;
  padding: 36px 20px 160px;
  padding: 4.5rem 2.5rem 20rem;
  position: relative;
  z-index: 5;
}
.interior > h1, .interior > h2, .interior > p, .interior > hr, .interior > ul, .interior > hr { opacity: 0; -webkit-transform: translateY(100%); transform: translateY(100%); -webkit-transition-property: opacity, -webkit-transform; transition-property: opacity, -webkit-transform; transition-property: transform, opacity; transition-property: transform, opacity, -webkit-transform; -webkit-transition-duration: 250ms; transition-duration: 250ms }
.interior > h1.visible, .interior > h2.visible, .interior > p.visible, .interior > hr.visible, .interior > ul.visible, .interior > hr.visible { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
.interior a { color: inherit; text-decoration: none }
.interior a:hover, .interior a:focus { text-decoration: underline; }
.interior a[href*="mailto:"] { font-family: 'rubik', sans-serif; letter-spacing: 2.666px; letter-spacing: .333333333rem; text-transform: uppercase; }
.interior h1 { font-size: 42px; font-size: 5.25rem; line-height: 48px; line-height: 6rem; margin-bottom: 32px; margin-bottom: 4rem; }
.interior h2 { font-size: 12px; font-size: 1.5rem; margin-bottom: 16px; margin-bottom: 2rem; text-transform: uppercase; }
.interior p, .interior ul, .interior ol { font-family: 'arbutus', serif; font-size: 12px; font-size: 1.5rem; line-height: 18px; line-height: 2.25rem; margin-bottom: 16px; margin-bottom: 2rem; }
.interior ul, .interior ol { padding-left: 16px; padding-left: 2rem; }
.interior p + ul, .interior p + ol { margin-top: -16px; margin-top: -2rem; }
.interior hr { border: none; background-color: #ffffff; height: 3px; margin: 32px 0; margin: 4rem 0; text-align: left; width: 12px; width: 1.5rem; }
@media (min-width: 500px) {
  .interior h1 { font-size: 80px; font-size: 10rem; line-height: 80px; line-height: 10rem; margin-bottom: 48px; margin-bottom: 6rem; }
  .interior h2 { font-size: 16px; font-size: 2rem; letter-spacing: 2px; letter-spacing: .25rem; line-height: 20px; line-height: 2.5rem; margin-bottom: 24px; margin-bottom: 3rem; }
  .interior p, .interior ul, .interior ol { font-size: 16px; font-size: 2rem; line-height: 24px; line-height: 3rem; margin-bottom: 24px; margin-bottom: 3rem; }
  .interior ul, .interior ol { padding-left: 16px; padding-left: 2rem; }
  .interior p + ul, .interior p + ol { margin-top: -24px; margin-top: -3rem; }
  .interior hr { margin: 48px 0; margin: 6rem 0; width: 16px; width: 2rem; }
}
@media (min-width: 768px) {
  .interior {
    margin: 0 auto;
    max-width: 950px;
    padding: 24rem 4rem 50rem;
  }
  .interior h1 { font-size: 120px; font-size: 9rem; line-height: 120px; line-height: 15rem; margin-bottom: 80px; margin-bottom: 10rem; }
  .interior h2 { font-size: 20px; font-size: 2.5rem; letter-spacing: 4px; letter-spacing: .5rem; line-height: 24px; line-height: 3rem; margin-bottom: 40px; margin-bottom: 5rem; }
  .interior p, .interior ul, .interior ol { font-size: 24px; font-size: 3rem; line-height: 36px; line-height: 4.5rem; margin-bottom: 40px; margin-bottom: 5rem; }
  .interior ul, .interior ol { padding-left: 24px; padding-left: 3rem; }
  .interior p + ul, .interior p + ol { margin-top: -40px; margin-top: -5rem; }
  .interior hr { margin: 96px 0; margin: 12rem 0; width: 24px; width: 3rem; }
}
[data-page="apply"] {
  background-color: #0278d2;
}
[data-page="apply"] .full-size-bg { background-size: contain; }
.about {
  
}
.project {
  color: #ffffff;
  margin-top: -72px;
  margin-top: -9rem
}
.project__header { padding: 104px 0 64px; padding: 13rem 0 8rem; position: relative; }
.project__header-content h1 { font-size: 24px; font-size: 3rem; line-height: 24px; line-height: 3rem; margin-bottom: 24px; margin-bottom: 3rem; }
.project__header-content p { font-family: 'arbutus', serif; font-size: 12px; font-size: 1.5rem; line-height: 18px; line-height: 2.25rem; }
.project__header-content p:not(:last-child) { margin-bottom: 16px; margin-bottom: 2rem; }
.project__contents { padding: 48px 0 112px; padding: 6rem 0 14rem; position: relative; text-align: center; }
.project__header-content, .project__recognition, .project__content { margin: 0 auto; max-width: 1200px; padding: 0 32px; padding: 0 4rem; position: relative; z-index: 5; }
.project__learn-more { display: inline-block; margin: 0 auto 64px; margin: 0 auto 8rem; position: relative; width: calc(100% - 8rem); z-index: 5; }
.project__recognition { text-align: left; }
.project__recognition h2 { font-size: 12px; font-size: 1.5rem; letter-spacing: 2px; letter-spacing: .25rem; line-height: 16px; line-height: 2rem; margin-bottom: 16px; margin-bottom: 2rem; text-transform: uppercase; }
.project__recognition p { font-family: 'arbutus', serif; font-size: 12px; font-size: 1.5rem; line-height: 18px; line-height: 2.25rem; }
.project__content { margin-bottom: 64px; margin-bottom: 8rem; text-align: left; }
.project__content-image { background-position: center center; background-repeat: no-repeat; background-size: cover; border-radius: 50%; height: 100%; margin: 0 auto 32px; margin: 0 auto 4rem; overflow: hidden; width: calc(100% - 4rem); }
.project__content-image::before { content: ''; display: block; padding-top: 100%; }
.project__content-copy { -webkit-transition-delay: 100ms; transition-delay: 100ms; }
.project__content-copy h2 { color: rgba(255, 255, 255, .5); font-size: 15.2px; font-size: 1.9rem; line-height: 23.2px; line-height: 2.9rem; margin-bottom: 18px; margin-bottom: 2.25rem; }
.project__content-copy p { font-family: 'arbutus', serif; font-size: 12px; font-size: 1.5rem; line-height: 18px; line-height: 2.25rem; }
.project__content-copy p:not(:last-child) { margin-bottom: 20px; margin-bottom: 2.5rem; }
@media (min-width: 768px) {
  .project {
    margin-top: -17rem
  }
  .project__header { padding: 30rem 0 20rem; }
  .project__header-content h1 { font-size: 104px; font-size: 13rem; line-height: 128px; line-height: 16rem; margin-bottom: 72px; margin-bottom: 9rem; margin-left: -8px; margin-left: -1rem; }
  .project__header-content p { font-size: 24px; font-size: 3rem; line-height: 40px; line-height: 5rem; margin-bottom: 32px; margin-bottom: 4rem; }
  .project__contents { padding-bottom: 16rem; padding-top: 16rem; }
  .project__learn-more { margin: 4rem auto 18rem; max-width: 57rem; width: 100%; }
  .project__recognition h2 { font-size: 24px; font-size: 3rem; letter-spacing: 4px; letter-spacing: .5rem; line-height: 36px; line-height: 4.5rem; margin-bottom: 8px; margin-bottom: 1rem; }
  .project__recognition p { font-size: 24px; font-size: 3rem; line-height: 32px; line-height: 4rem; }
  .project__content { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; }
  .project__content:nth-child(odd) .project__content-image { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; }
  .project__content:nth-child(odd) .project__content-copy { margin-left: 0; margin-right: 96px; margin-right: 12rem; -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; }
  .project__content:not(:last-child) { margin-bottom: 14rem; }
  .project__content-image { -webkit-box-flex: 1; -ms-flex: 1 2 auto; flex: 1 2 auto; max-width: 70rem; width: 50%; }
  .project__content-copy { -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; margin-left: 12rem; width: 50%; }
  .project__content-copy h2 { font-size: 36px; font-size: 4.5rem; line-height: 36px; line-height: 4.5rem; margin-bottom: 40px; margin-bottom: 5rem; margin-left: -3px; }
  .project__content-copy p { font-size: 20px; font-size: 2.5rem; line-height: 36px; line-height: 4.5rem; }
  .project__content-copy p:not(:last-child) { margin-bottom: 24px; margin-bottom: 3rem; }
}
.btn {
  display: inline-block;
  text-decoration: none;
  text-transform: uppercase
}
.btn--primary { background-image: -webkit-linear-gradient(left, #cad525, #53aa83); background-image: linear-gradient(to right, #cad525, #53aa83); color: #ffffff; font-size: 18px; font-size: 2.25rem; letter-spacing: 2px; letter-spacing: .25rem; padding: 16px; padding: 2rem; }
.btn--primary:hover { background: #134f49; }
@media (min-width: 768px) {
  .btn {
  }
  .btn--primary { font-size: 2.75rem; min-width: 30rem; padding: 3rem; }
}
[data-bg]:not(.loaded) {
}
.full-size-bg {
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 0;
}
.masthead {
  background-repeat: no-repeat;
  background-size: cover;
}
.slide-up {
  opacity: 0;
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: transform, opacity;
  transition-property: transform, opacity, -webkit-transform;
  -webkit-transition-duration: 250ms;
          transition-duration: 250ms;
}
.visible-children .slide-up, .slide-up.visible { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
.wrapper {
  margin: 0 auto;
  position: relative;
  width: 100%;
}
@media (min-width: 768px) {
  .wrapper {
    max-width: 1200px;
  }
}

.blog-right-side {min-height:300px; max-height:500px;display: flex;align-items: center;}
.blog-right-side p {font-size:18px;line-height: 28px;}
.blog-right-side img {width:200px; height: 200px}
.blog-date {text-transform: uppercase;margin-top:60px;margin-bottom:30px;}


/** list styles for awards **/
.award-list li {list-style:none;display: flex;align-items:center;}
.award-list img { margin:15px;border-radius:50%; }

/** list styles for project phases  **/
.project-state-flex-grid-thirds {  display: -ms-flexbox;
  display: flexbox;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  padding: 0;
  list-style: none;
  width: auto;
  -webkit-flex-flow: row wrap;
  justify-content: flex-start;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-align-items: stretch;
  align-items: stretch;
  box-sizing: border-box;
  font-size: 1.8em;
}
@media (min-width: 1100px) {
.project-state-flex-grid-thirds { width: 130%; left: -15%; position: relative; }
}

.project-state-flex-grid-thirds img {border-radius:50%; max-width:80%;margin:0 auto;}
.project-state-flex-grid-thirds .col {
  text-align:center;
  margin: 10px 2.50%;
  width: 30%;
  }

  .project-state-flex-grid-thirds a {font-size: 25px; color: white; text-decoration: none; }
  .project-state-flex-grid-thirds a:hover {color: #cad525; text-decoration: none; }

.project-state-flex-grid-thirds .col:nth-child(3n+1) {
  margin-left: 0;
}
.project-state-flex-grid-thirds .col:nth-child(3n) {
  margin-right: 0;
}


/* category list  and ajax filters */
.cat_list_item {display:inline-flex; padding: ; }
.cat_list_item input { display: none; }
.cat_list_item label {cursor:pointer; padding:0 20px; position: relative;}
.cat_list_item label:hover {color: #53aa83;}
.cat_list_item label.active {color: #53aa83;}

.cat_list_item .rotate{
    -moz-transition: all 0.5s linear !important;
    -webkit-transition: all 0.5s linear !important;
    transition: all 0.5s linear !important;
    position: absolute;
    top: 0px;
    left: 0px;
}
.cat_list_item .rotate.down{
    -moz-transform: rotate(45deg) !important;
    -webkit-transform: rotate(45deg) !important;
    transform: rotate(45deg) !important;
    position: absolute;
    top: 0px;
    left: 0px;
    font-size: 28px;
}


@media (min-width: 768px) and (max-width: 830px) {
  .site-nav__item a {margin-left: 2rem; }

}
@media (min-width: 550px) and (max-width: 970px) {
  .project-state-flex-grid-thirds .col {
    margin: 10px 5%;
    width: 40%;
  }
  .project-state-flex-grid-thirds .col:nth-child(3n+1) {
  margin-left: 5%;
}
.project-state-flex-grid-thirds .col:nth-child(3n) {
  margin-right: 5%;
}

}

@media (max-width: 549px) {
  .project-state-flex-grid-thirds .col {
    margin: 10px 0;
    width: 100%;
  }
  .project-state-flex-grid-thirds .col:nth-child(3n+1) {
   margin: 10px 0;
  }
  .project-state-flex-grid-thirds .col:nth-child(3n) {
     margin: 10px 0;
  }
  .blog-right-side {text-align: center; margin-bottom: 40px; display: block;}
}

main[data-page="projects"] .projects__featured {display: none;}
main[data-page="projects"] .projects__list::after {background: none !important; display: none !important;}
main[data-page="projects"] .projects__item h3 span.last-word::after{ border-right: 2px solid #ffffff; border-top: 2px solid #ffffff; content: ''; display: inline-block; height: .4em; margin-left: .4em; position: relative; top: -.125em; -webkit-transform: rotate(45deg); transform: rotate(45deg); width: .425em; }
main[data-page="projects"] .projects__item:hover h3 span.last-word::after{ border-right: 2px solid #cad525; border-top: 2px solid #cad525;  }
main[data-page="projects"] .projects__item h3{ font-size: 22px;  }

.record-list .col h3 span.last-word{display: inline-block;}
.record-list .col h3 span.last-word::after{ border-right: 2px solid #ffffff; border-top: 2px solid #ffffff; content: ''; display: inline-block; height: .4em; margin-left: .4em; position: relative; top: -.125em; -webkit-transform: rotate(45deg); transform: rotate(45deg); width: .425em; }
.record-list .col a:hover h3{ color: #cad525;}
.record-list .col a:hover h3 span.last-word::after{ border-right: 2px solid #cad525; border-top: 2px solid #cad525; }
.record-list .col p{margin-top: 5px;line-height: 25px; border: none; font-size: 18px; text-decoration: none !important;}
.record-list .col a:hover p{ color: white; text-decoration: none;}

.large-wrapper { width: 130%; left: -15%; position: relative;}
.large-wrapper .row { margin-bottom: 100px}
.flex {display: flex}
.row {display: flex}
.row .col-6{max-width: 50%; flex-basis: 50%}
.align-center{align-items: center}

.thank-yous h3 { font-size: 30px; line-height: 48px; font-weight: 200; margin-bottom: 50px}


@media (max-width: 768px) {
    .row .col-6{max-width: 100%; flex-basis: 100%}
.large-wrapper: { width: 100%; left: 0}
  .site-footer .site-nav__items {margin-top: 30px;}
  .mobile-only {display: block;}
  .desktop-only {display: none;}
  .mobile-hamburger{background:none;position:absolute;top:0;right:0;line-height:45px;padding:15px 15px 0px 15px;color:#134f49;border:0;font-size: 2em;cursor:pointer;outline:none;z-index:99;}
  body.full-page-bg .site-header:not([data-affixed="true"]) .mobile-hamburger {color: #fff;}
  .mobile-cross{background:none;position:absolute;top:0px;right:0;padding: 5px 18px 0px 15px;color:#134f49;border:0;font-size:3.4em;line-height:65px;cursor:pointer;outline:none;z-index:99;}
  .mobile-menu{z-index:98; font-weight:bold; font-size:0.8em; width:100%; background:#f1f1f1;  position:absolute; text-align:center; font-size:12px;}
  .mobile-menu ul {margin: 0; padding: 0; list-style-type: none; list-style-image: none;}
  .mobile-menu li {display: block; padding:10px 0 10px 0; border-bottom:#dddddd 1px solid;}
  .mobile-menu li:hover{display: block; background:#ffffff; padding:10px 0 10px 0; border-bottom:#dddddd 1px solid;}
  .mobile-menu ul li a {font-size: 1.5em; text-decoration:none;  margin: 0px; color:#134f49;}
  .mobile-menu ul li a:hover {font-size: 1.5em;  color: #134f49; text-decoration:none;}
  .mobile-menu a{font-size: 1.5em;text-decoration:none; color:#134f49;}
  .mobile-menu a:hover{font-size: 1.5em; text-decoration:none; color:#134f49;}
  @-moz-document url-prefix() {
    .mobile-cross{ padding-top: 0px; }
  }

}


/*  lightbox zoom */

/* [IMAGE] */
.zoomD {
  width: 90%;
  max-width: 90%;
  height: auto;
  cursor: pointer;
}

html.freeze {
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
}

/* [LIGHTBOX BACKGROUND] */
#lb-back {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  visibility: hidden;
  opacity: 0;
  transition: all ease 0.4s;
}
#lb-back.show {
  visibility: visible;
  opacity: 1;
  overflow: auto;
  max-height: 100vh;
}

/* [LIGHTBOX IMAGE] */
#lb-img {
  position: relative;
  top: 2vh;
  text-align: center;
}
#lb-img img {
  /* You might want to play around with 
     width, height, max-width, max-height
     to fit portrait / landscape pictures properly. */
  width: 80vw;
  height: auto;
 
  /* ALTERNATE EXAMPLE
  width: 100%;
  max-width: 1200px;
  height: auto;
  margin: 0 auto; */
}

.pagination{
    list-style: none;
    display: flex;
}
.pagination li{
    padding: 5px;