/*
	STYLESHEET FOR CEDAR CREEK
	
	
*/
/* == MIXIN == */
/* == COLORS == */
button.fixed {
  position: fixed;
  top: 10px;
  left: 10px;
  background: blue;
  color: #fff;
  padding: 20px;
  z-index: 100; }

.spacer {
	padding: 50px 0px;
}
.headshot-container {
	position: relative;
}

.fun-photo {
	display: block;
	opacity: 0;
	position: absolute;
		top: 0px;
		left: 0px;
		
	-webkit-transition: opacity 300ms ease;
		 -moz-transition: opacity 300ms ease;
		 	-ms-transition: opacity 300ms ease;
		 			transition: opacity 300ms ease;
}

	.fun-photo:hover {
		opacity: 1;
	}

.bx-wrapper {
	margin-bottom: 25px;
}

.active-category {
	text-decoration: underline;
}

.project-title {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.65+100 */
background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */

	color: #fff;
	padding: 40px 15px 15px 15px;
	position: absolute;
		left: 0px;
		bottom: 0px;
	width: 100%;
}

	.project-title h6 {
		margin: 0px;
	}

.slider > div, .slider > a {
	display: block;
	position: relative;
	width: 100%; height: 500px;
	-webkit-background-size: cover !important;
		 -moz-background-size: cover !important;
		 	-ms-background-size: cover !important;
		 			background-size: cover !important;
}
.our-beer img {
	max-height: 200px; width: auto; height: 100%; max-width: none;
}
/* == GENERAL == */
.no-margin {
	margin: 0px;
}
.no-padding-bottom {
	padding-bottom: 0px !important;
}
.open-h1 {
	font-size: 1.7em !important;
}
.dropdown {
	position: relative;
	display: inline-block;
	margin-bottom: 14px; }
	.dropdown .dropdown-header {
		position: relative;
		display: inline-block;
		padding: 0px 25px;
		background: #506841;
		cursor: pointer;
		color: #fff; }
		.dropdown .dropdown-header p {
			margin-right: 15px;
			display: inline-block; }
	.dropdown .dropdown-info {
		height: 0px;
		position: absolute;
		width: 100%;
		background: #506841;
		z-index: 1;
		overflow: hidden;
		transition: all .2s ease-in-out; }
	.dropdown .dropdown-info .item {
		width: 100%;
		padding: 5px 15px;
		background: #506841; 
		display: block;
		color: #fff;
		cursor: pointer; }
	.dropdown .dropdown-info .item p {
		line-height: 1.3em;
		margin: 0px; }
	.dropdown .dropdown-info .item:hover {
		background: #889c7c; }
	.dropdown .dropdown-info .item:first-of-type {
		padding-top: 10px; }
	.dropdown .dropdown-info .item:last-of-type {
		padding-bottom: 10px; }
	
.fallback {
  display: none; }
.underlined {
	margin-bottom: 15px;
	min-height: 39px;
}
.page-nav {
	margin-top: 50px;
}
.padding-small {
	padding: 50px;
}
section {
  padding: 100px 0px; }
  section h1 {
    padding-bottom: 70px; }
  section.grey {
    background: #b7b4b0; }
  section.green {
    background: #506841; }
  section.blue {
	  background: #d9e6ed; }
div {}
	div.blue {
		background: #d9e6ed; }

@media screen and (max-width: 40em) {
  section {
    padding: 25px 0px; } }

/* == BUTTON == */
.button, button {
  cursor: pointer;
  position: relative;
  display: inline-block;
  background: none;
  border-radius: none;
  font: normal 400 1em/1em "Roboto", sans-serif;
  color: #262626;
  text-transform: uppercase; }
  .button:after, button:after {
    content: "";
    display: block;
    position: absolute;
    text-align: center;
    width: 100%;
    height: 2px;
    background: #262626;
    bottom: -5px;
    left: 0px;
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1);
    transform-origin: left;
    -webkit-transition: transform 0.3s ease-in-out;
    -ms-transition: transform 0.3s ease-in-out;
    -o-transition: transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out;
    transition-delay: .3s; }
  .button:before, button:before {
    content: "";
    display: block;
    position: absolute;
    text-align: center;
    width: 100%;
    height: 2px;
    background: #262626;
    bottom: -5px;
    left: 0px;
    -webkit-transform: scale(0, 1);
    -ms-transform: scale(0, 1);
    -o-transform: scale(0, 1);
    transform: scale(0, 1);
    transform-origin: right;
    -webkit-transition: transform 0.3s ease-in-out;
    -ms-transition: transform 0.3s ease-in-out;
    -o-transition: transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out; }
  .button:hover, button:hover {
    background: none;
    color: #000; }
    .button:hover:after, button:hover:after {
      -webkit-transform: scale(0, 1);
      -ms-transform: scale(0, 1);
      -o-transform: scale(0, 1);
      transform: scale(0, 1);
      transform-origin: right;
      transition-delay: 0s; }
    .button:hover:before, button:hover:before {
      -webkit-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      -o-transform: scale(1, 1);
      transform: scale(1, 1);
      transform-origin: left;
      transition-delay: .3s; }
  .button:focus, button:focus {
    outline: none;
    box-shadow: none; }
  .button.white, button.white {
    color: #fff; }
    .button.white:after, button.white:after {
      background: #fff; }
    .button.white:before, button.white:before {
      background: #fff; }

/* == INPUT == */
.input-div {
  position: relative;
  margin-right: 30px;
  margin-bottom: 20px; }
  .input-div input {
    position: relative;
    z-index: 1;
    background: none;
    width: 100%;
    border: none;
    color: #fff;
    padding: 10px 0px;
    -webkit-transition: padding 0.4s 0.2s ease-in-out, color 0s 0.2s ease-in-out;
    -ms-transition: padding 0.4s 0.2s ease-in-out, color 0s 0.3s ease-in-out;
    -o-transition: padding 0.4s 0.2s ease-in-out, color 0s 0.2s ease-in-out;
    transition: padding 0.4s 0.2s ease-in-out, color 0s 0.2s ease-in-out; }
    .input-div input::placeholder {
      font: normal 400 1em/1em "Roboto", sans-serif;
      color: #fff;
      text-transform: uppercase;
      -webkit-transition: all 0.2s ease-in-out;
      -ms-transition: all 0.2s ease-in-out;
      -o-transition: all 0.2s ease-in-out;
      transition: all 0.2s ease-in-out; }
    .input-div input::-webkit-input-placeholder {
      font: normal 400 1em/1em "Roboto", sans-serif;
      color: #fff;
      text-transform: uppercase;
      -webkit-transition: all 0.2s ease-in-out;
      -ms-transition: all 0.2s ease-in-out;
      -o-transition: all 0.2s ease-in-out;
      transition: all 0.2s ease-in-out; }
    .input-div input:-moz-input-placeholder {
      font: normal 400 1em/1em "Roboto", sans-serif;
      color: #fff;
      text-transform: uppercase;
      -webkit-transition: all 0.2s ease-in-out;
      -ms-transition: all 0.2s ease-in-out;
      -o-transition: all 0.2s ease-in-out;
      transition: all 0.2s ease-in-out; }
    .input-div input::-moz-input-placeholder {
      font: normal 400 1em/1em "Roboto", sans-serif;
      color: #fff;
      text-transform: uppercase;
      -webkit-transition: all 0.2s ease-in-out;
      -ms-transition: all 0.2s ease-in-out;
      -o-transition: all 0.2s ease-in-out;
      transition: all 0.2s ease-in-out; }
    .input-div input:-ms-input-placeholder {
      font: normal 400 1em/1em "Roboto", sans-serif;
      color: #fff;
      text-transform: uppercase;
      -webkit-transition: all 0.2s ease-in-out;
      -ms-transition: all 0.2s ease-in-out;
      -o-transition: all 0.2s ease-in-out;
      transition: all 0.2s ease-in-out; }
  .input-div:before {
    content: "";
    display: block;
    position: absolute;
    width: 0%;
    height: 100%;
    background: #fff;
    top: 0;
    left: 0;
    -webkit-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out; }
  .input-div:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background: none;
    border: 1px solid #fff;
    -webkit-transition: height 0.2s 0.2s ease-in-out, border 0s 0.35s;
    -ms-transition: height 0.2s 0.2s ease-in-out, border 0s 0.35s;
    -o-transition: height 0.2s 0.2s ease-in-out, border 0s 0.35s;
    transition: height 0.2s 0.2s ease-in-out, border 0s 0.35s; }
  .input-div:hover:after, .input-div:focus:after, .input-div.focused:after {
    border: 2px solid #fff;
    background: none;
    z-index: 0;
    height: 100%;
    bottom: 0;
    left: 0;
    -webkit-transition: height 0.2s ease-in-out, border 0.05s 0s;
    -ms-transition: height 0.2s ease-in-out, border 0.05s 0s;
    -o-transition: height 0.2s ease-in-out, border 0.05s 0s;
    transition: height 0.2s ease-in-out, border 0.05s 0s; }
  .input-div:hover input, .input-div:focus input, .input-div.focused input {
    border: none;
    outline: none;
    padding-left: 10px;
    transition-delay: 0s; }
  .input-div:focus:before, .input-div.focused:before {
    width: 100%;
    z-index: 0; }
  .input-div:focus input, .input-div.focused input {
    color: #506841; }
    .input-div:focus input::-webkit-input-placeholder, .input-div.focused input::-webkit-input-placeholder {
      color: #506841 !important; }
    .input-div:focus input:-moz-input-placeholder, .input-div.focused input:-moz-input-placeholder {
      color: #506841 !important; }
    .input-div:focus input::-moz-input-placeholder, .input-div.focused input::-moz-input-placeholder {
      color: #506841 !important; }
    .input-div:focus input:-ms-input-placeholder, .input-div.focused input:-ms-input-placeholder {
      color: #506841 !important; }

/* == TEXT AREA == */
.textarea-div {
  overflow: hidden;
  position: relative;
  height: auto; }
  .textarea-div textarea {
    color: #fff;
    padding: 20px;
    position: relative;
    border-radius: 0px;
    z-index: 1;
    background: none;
    border: 2px solid #fff;
    width: 100%; }
    .textarea-div textarea:focus {
      outline: none; }
  .textarea-div:after {
    content: "";
    display: block;
    position: absolute;
    z-index: 0;
    height: 100%;
    width: 0;
    bottom: 5px;
    left: 0;
    background: #fff;
    -webkit-transition: width 0.3s ease-in-out;
    -ms-transition: width 0.3s ease-in-out;
    -o-transition: width 0.3s ease-in-out;
    transition: width 0.3s ease-in-out; }
  .textarea-div.focused textarea {
    color: #506841; }
  .textarea-div.focused:after {
    width: 100%; }

/* == TYPOGRAPHY == */
h1 {
  font: normal 400 2.5em/1.2em "Georgia", serif; }
  h1.white {
    color: #fff; }
  h1.green {
    color: #506841; }
  h1.center {
    text-align: center; }
  h1.upper {
    text-transform: uppercase;
    white-space: nowrap; }

h2 {
  font: normal 400 1.6em/1em "Roboto", sans-serif; }
  h2.medium {
    font-weight: 500; }
  h2.green {
    color: #506841; }
  h2.white {
    color: #fff; }

h3 {
  font: 1.2em/1em "Roboto", sans-serif;
  text-transform: uppercase; }
  h3.center {
    text-align: center; }
  h3.medium {
    font-weight: 500; }
  h3.green {
    color: #506841; }
  h3.white {
    color: #fff; }

h6 {
  font: normal 400 1em/1em "Roboto", sans-serif;
  color: #fff;
  text-transform: uppercase; }
  h6.white {
    color: #fff; }
  h6.green {
    color: #506841; }
  h6.black {
    color: #262626; }
  h6.inline-block {
	  display: inline-block; }

p {
  font: normal 400 1em/2em "Roboto", sans-serif; }
  p.white {
    color: #fff; }
  p.green {
    color: #506841; }
  p.right {
    text-align: right; }

/* == OPENINGS == */
    
.test {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 5; }

.opening {
  width: 100%;
  background: none;
  z-index: 6;
  height: 100vh;
  position: fixed;
  opacity: 1;
  top: 0;
  left: 0;
  -webkit-transition: all 2.5s ease-out;
  -ms-transition: all 2.5s ease-out;
  -o-transition: all 2.5s ease-out;
  transition: all 2.5s ease-out; }
  .opening .open-logo {
    opacity: 0;
    position: absolute;
    overflow: hidden;
    left: 50%;
    top: 35%;
    width: 230px;
    height: auto;
    z-index: 5;
    -webkit-transform: translate(-50%, 0%);
    -ms-transform: translate(-50%, 0%);
    -o-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);
    -webkit-transition: all 1s ease-out;
    -ms-transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
    transition: all 1s ease-out; }
    .opening .open-logo img {
      position: relative;
      width: 100%;
      height: auto;
      z-index: 5;
      opacity: 0;
      -webkit-transition: all 2.5s ease-out;
      -ms-transition: all 2.5s ease-out;
      -o-transition: all 2.5s ease-out;
      transition: all 2.5s ease-out; }
  .opening.activate {
    opacity: 1; }
    .opening.activate .open-logo {
      opacity: 1; }
      .opening.activate .open-logo h1 {
        opacity: 1; }
      .opening.activate .open-logo img {
        opacity: 1; }

@media screen and (max-width: 640px) {
  .opening .open-logo {
    top: 20%; } }

.open {
  opacity: 1;
  -webkit-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out; }
  .open.animate {
    opacity: 1; }

.banner.open .header {
  opacity: 0;
  -webkit-transform: translate(-20px, 0px);
  -ms-transform: translate(-20px, 0px);
  -o-transform: translate(-20px, 0px);
  transform: translate(-20px, 0px);
  -webkit-transition: all 0s ease-in-out;
  -ms-transition: all 0s ease-in-out;
  -o-transition: all 0s ease-in-out;
  transition: all 0s ease-in-out; }

.banner.open .copy {
  opacity: 0;
  -webkit-transform: translate(-20px, 0px);
  -ms-transform: translate(-20px, 0px);
  -o-transform: translate(-20px, 0px);
  transform: translate(-20px, 0px);
  -webkit-transition: all 0s ease-in-out;
  -ms-transition: all 0s ease-in-out;
  -o-transition: all 0s ease-in-out;
  transition: all 0s ease-in-out; }

.banner.open .button {
  opacity: 0;
  -webkit-transform: translate(-20px, 0px);
  -ms-transform: translate(-20px, 0px);
  -o-transform: translate(-20px, 0px);
  transform: translate(-20px, 0px);
  -webkit-transition: all 0s ease-in-out;
  -ms-transition: all 0s ease-in-out;
  -o-transition: all 0s ease-in-out;
  transition: all 0s ease-in-out; }

header.open {
  -webkit-transition: all 0s ease-in-out;
  -ms-transition: all 0s ease-in-out;
  -o-transition: all 0s ease-in-out;
  transition: all 0s ease-in-out; }
  header.open .logo {
    -webkit-transform: translate(0, -100%);
    -ms-transform: translate(0, -100%);
    -o-transform: translate(0, -100%);
    transform: translate(0, -100%);
    -webkit-transition: all 0s ease-in-out;
    -ms-transition: all 0s ease-in-out;
    -o-transition: all 0s ease-in-out;
    transition: all 0s ease-in-out; }
  header.open .menu {
    opacity: 0;
    -webkit-transform: translate(0, -100%);
    -ms-transform: translate(0, -100%);
    -o-transform: translate(0, -100%);
    transform: translate(0, -100%);
    -webkit-transition: all 0s ease-in-out;
    -ms-transition: all 0s ease-in-out;
    -o-transition: all 0s ease-in-out;
    transition: all 0s ease-in-out; }

.side-bar.open {
  opacity: 0;
  -webkit-transform: translate(20px, 0px);
  -ms-transform: translate(20px, 0px);
  -o-transform: translate(20px, 0px);
  transform: translate(20px, 0px);
  -webkit-transition: all 0s ease-in-out;
  -ms-transition: all 0s ease-in-out;
  -o-transition: all 0s ease-in-out;
  transition: all 0s ease-in-out; }

/* == SIDE MENU == */
.side-bar {
  z-index: 2;
  position: fixed;
  top: 0;
  left: 50px;
  height: 100%;
  width: auto;
  transform: translateX(0px);
  -webkit-transition: all 1s ease-in-out;
  -ms-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out; }
  .side-bar nav {
    display: none;
    position: absolute;
    top: 12%; }
    .side-bar nav h6 {
      padding-bottom: 20px;
      -webkit-transition: all 0.1s ease-in-out;
      -ms-transition: all 0.1s ease-in-out;
      -o-transition: all 0.1s ease-in-out;
      transition: all 0.1s ease-in-out; }
      .side-bar nav h6.light {
        color: #fff; }
      .side-bar nav h6.dark {
        color: #000; }
  .side-bar .social-media {
    position: absolute;
    top: 18%;
    width: 100px; }
    .side-bar .social-media .scroll .image {
      display: inline-block;
      width: 30px;
      margin-left: 10px; }
      .side-bar .social-media .scroll .image.no-margin {
        margin-left: 0px; }
    .side-bar .social-media .scroll .image {
      position: relative;
      margin-left: 10px;
      padding: 3px;
      width: 35px;
      height: 35px; }
      .side-bar .social-media .scroll .image:before {
        position: absolute;
        display: block;
        content: "";
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: #506841;
        z-index: 2;
        -webkit-transition: all 0.2s ease-in-out;
        -ms-transition: all 0.2s ease-in-out;
        -o-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
        -webkit-transform: scale(0, 1);
        -ms-transform: scale(0, 1);
        -o-transform: scale(0, 1);
        transform: scale(0, 1);
        transform-origin: left; }
      .side-bar .social-media .scroll .image:hover:before {
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1); }
      .side-bar .social-media .scroll .image img {
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 3;
        width: 80%;
        height: 80%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%); }
    .side-bar .social-media .scroll.dark .image {
      border: 3px solid #262626; }
    .side-bar .social-media .scroll.dark .path {
      fill: #262626; }
    .side-bar .social-media .scroll.dark .white {
      display: none; }
    .side-bar .social-media .scroll.dark .black {
      display: inline-block; }
    .side-bar .social-media .scroll.light .image {
      border: 3px solid #fff; }
    .side-bar .social-media .scroll.light .path {
      fill: #fff; }
    .side-bar .social-media .scroll.light .white {
      display: inline-block; }
    .side-bar .social-media .scroll.light .black {
      display: none; }
  .side-bar .bars {
    position: absolute;
    top: 31%;
    left: 0;
    width: 120px; }
    .side-bar .bars .bar {
      width: 120px;
      cursor: pointer; }
      .side-bar .bars .bar.dark div {
        background: #000; }
      .side-bar .bars .bar.light div {
        background: #fff; }
      .side-bar .bars .bar div {
        width: 20px;
        height: 3px;
        margin-bottom: 20px;
        -webkit-transition: all 0.1s ease-in-out;
        -ms-transition: all 0.1s ease-in-out;
        -o-transition: all 0.1s ease-in-out;
        transition: all 0.1s ease-in-out; }
      .side-bar .bars .bar.active-bar div {
        width: 60px; }
      .side-bar .bars .bar.active-hover div {
        width: 60px; }

/* == MENU == */
menu {
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
  -webkit-padding-start: 0;
  position: fixed;
  margin: 0px;
  width: 100%;
  height: 100%;
  z-index: 3;
  top: 0;
  left: 0;
  -webkit-transform: translate(0%, -100%);
  -ms-transform: translate(0%, -100%);
  -o-transform: translate(0%, -100%);
  transform: translate(0%, -100%);
  -webkit-transition: all 0.5s ease-out;
  -ms-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out; }
  menu > .cell {
    max-width: 100%;
    padding: 0px 20px; }
  menu h1 {
    padding-right: 20px; }
  menu h6 {
	  -webkit-transition: all .3s ease-in-out;
	  -moz-transition: all .3s ease-in-out;
	  -ms-transition: all .3s ease-in-out;
	  -o-transition: all .3s ease-in-out;
	  transition: all .3s ease-in-out;
		max-width: 150px; }
  menu.active {
    -webkit-transform: translate(0%, 0%);
    -ms-transform: translate(0%, 0%);
    -o-transform: translate(0%, 0%);
    transform: translate(0%, 0%); }
  menu.desktop .cell {
    padding: 0px 10px; }
.menu.active h6 {
	color: #fff; }
.menu.active .green {
	display: none; }
.menu.active .white {
	display: inline-block; }
@media screen and (max-width: 1024px) {
  h1 {
    font-size: 1.7em; } }

@media screen and (max-width: 640px) {
  menu > .cell {
    margin-top: 50px; }
  menu h1 {
    font-size: 1.7em; } }

/* == HEADER == */
header {
  -webkit-transition: all 0.7s ease-in-out;
  -ms-transition: all 0.7s ease-in-out;
  -o-transition: all 0.7s ease-in-out;
  transition: all 0.7s ease-in-out;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 4; }
  header .logo {
    padding: 10px;
    height: 100%;
    max-width: 180px;
    -webkit-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    -o-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
    -webkit-transition: all 0.7s ease-in-out;
    -ms-transition: all 0.7s ease-in-out;
    -o-transition: all 0.7s ease-in-out;
    transition: all 0.7s ease-in-out; }
    header .logo .green-logo {
      display: none; }
    header .logo a {
	    display: inline-block;
    }
    
    header.green-logo .logo .green-logo {
	    display: inline-block;
    }
    
    header.green-logo .logo .white-logo {
	    display: none;
    }
    header .logo img {
      padding: 10px;
      width: 100%; height: auto;
      backface-visibility: hidden;
      -webkit-transform: translateZ(0) scale(1, 1);
      -moz-transform: translateZ(0) scale(1, 1);
      -ms-transform: translateZ(0) scale(1, 1);
      transform: translateZ(0) scale(1, 1);
      -webkit-transition: all 0.7s ease-in-out;
      -ms-transition: all 0.7s ease-in-out;
      -o-transition: all 0.7s ease-in-out;
      transition: all 0.7s ease-in-out; }
    header .logo.contact {
      background: #f9f1e5; }
      header .logo.contact .white {
        display: none; }
      header .logo.contact .green {
        display: block; }
  header .menu {
    -webkit-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    -o-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
    -webkit-transition: all 0.7s ease-in-out;
    -ms-transition: all 0.7s ease-in-out;
    -o-transition: all 0.7s ease-in-out;
    transition: all 0.7s ease-in-out; }
    header .menu .white {
	    display: none;
    }
    header .menu img {
      height: 25px; }
    header .menu h6 {
	    	color: #000;
        display: inline-block;
        font-size: 1em;
        margin-right: 15px;
        margin-bottom: 0px;
        vertical-align: middle; }
    header .menu.white h6 {
	    color: #fff;
    }
    header .menu.white .white {
	    display: inline-block;
    }
    header .menu.white .green {
	    display: none;
    }
  header .grid-container {
	  max-width: 75rem;
  }
	header.solid {
	  background: #fff;
	  border-bottom: 1px solid #ccc;
	  -webkit-transition: all 0.2s ease-in-out;
	  -ms-transition: all 0.2s ease-in-out;
	  -o-transition: all 0.2s ease-in-out;
	  transition: all 0.2s ease-in-out; }
  header.solid .menu {
	  -webkit-transition: all 0.2s ease-in-out;
	  -ms-transition: all 0.2s ease-in-out;
	  -o-transition: all 0.2s ease-in-out;
	  transition: all 0.2s ease-in-out; }
	  header.solid .menu {
		  color: #000;
	  }
	  header.solid .menu .white {
		  display: none;
	  }
	  header.solid .menu .green {
		  display: inline-block;
	  }
	  header.solid .menu h6 {
		  color: #000;
	  }
  header.solid .logo {
	  background: none;
	  padding: 5px;
	  max-width: 180px;
	  -webkit-transition: all 0.2s ease-in-out;
	  -ms-transition: all 0.2s ease-in-out;
	  -o-transition: all 0.2s ease-in-out;
	  transition: all 0.2s ease-in-out; }
	  header.solid .logo .green-logo {
		  display: inline-block;
	  }
	  header.solid .logo .white-logo {
		  display: none;
	  }
  header.solid .logo img {
	  -webkit-transition: all 0.2s ease-in-out;
	  -ms-transition: all 0.2s ease-in-out;
	  -o-transition: all 0.2s ease-in-out;
	  transition: all 0.2s ease-in-out; }
	header.solid .logo .green {
		display: block; }
	header.solid .logo .white {
		display: none; }
@media screen and (max-width: 640px) {
  header .logo {
    left: 8.333335%; }
  header .menu {
    right: 8.333335%; } }

/* == FOOTER == */
footer {
  background: #262626;
  color: #fff;
  padding: 70px 0px; }
  footer .logo {
    width: 215px;
    font-size: 12px; }
    footer .logo p {
      line-height: 1.2em;
      padding-top: 10px;
      margin: 0px; }
  footer .nav {
    margin-left: 10%; }
    footer .nav h6 {
      line-height: 1.2em;
      margin-bottom: 20px; }
  footer .contact {
    margin-left: 10%; }
    footer .contact h6 {
      line-height: 1.2em; }
    footer .contact p {
      line-height: 1.2em; }

@media screen and (max-width: 1024px) {
  footer .contact {
    margin-top: 20px;
    margin-left: 0; } }

@media screen and (max-width: 640px) {
  footer .logo {
    max-width: 300px; }
  footer .nav {
    margin-top: 20px;
    margin-left: 0px; }
    footer .nav h6 {
      margin: 0px; } }

/* == TEAM BANNER == */
.team-banner {
  width: 100%;
  min-height: 900px;
  padding-top: 180px;
  padding-bottom: 60px;
  background: #506841; }
  .team-banner .headshot {
    padding-right: 30px;
    width: 100%;
    position: relative;
    margin-bottom: 1rem; }
    .team-banner .headshot .header {
      position: absolute;
      bottom: 20px;
      left: 20px; }
  .team-banner .copy h1 {
    line-height: 1.2em;
    margin: 2px; }
  .team-banner .copy h6 {
    margin-bottom: 15px; }
  .team-banner .copy p {
    color: #fff;
    display: block; }

@media screen and (max-width: 1024px) {
  .team-banner {
    padding-left: 8.33333%; } }

@media screen and (max-width: 640px) {
  .team-banner {
    padding-left: 0px; }
    .team-banner .headshot {
      padding: 0px; } }

/* == BANNER == */
.banner {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 750px;
  max-height: 900px;
  background-position: center center;
  background-size: cover;
  overflow: hidden;
  z-index: 1; }
  .banner h1 {
	  max-width: 600px; width: 100%;
  }
  .banner.projects {
	  padding-top: 100px;
	  height: 20vh;
	  min-height: 0px;
	  overflow: visible;
  }
  .banner .banner-bg {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 750px;
    max-height: 1080px;
    top: 0;
    left: 0;
    background: #506841; }
    .banner .banner-bg.clear {
      opacity: .5; }
    .banner .banner-bg.half-clear {
      opacity: .8; }
    .banner .banner-bg.blue {
      background: #005a84; }
    .banner .banner-bg.beige {
      background: #f9f1e5; }
    .banner .banner-bg.green {
      background: #506841; }
    .banner .banner-bg.brown {
      background: #b8a999; }
  .banner .header {
    position: absolute;
    top: 50%;
    left: 16.666665%;
    width: 30%;
    z-index: 2;
    -webkit-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    -o-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
    -webkit-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out; }
    .banner.projects .header {
	    top: auto;
	    bottom: 0px;
    }
    .banner.projects .header h1 {
	    display: inline-block;
	    margin-right: 30px;
    }
  .banner .copy {
    position: absolute;
    bottom: 70px;
    left: 16.666665%;
    width: 50%;
    z-index: 2;
    -webkit-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    -o-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
    -webkit-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out; }
    .banner .copy h1 {
	    margin-bottom: 25px;
    }
    .banner .copy.white p {
      color: #fff; }
  .banner .button {
    position: absolute;
    right: 16.666665%;
    bottom: 70px;
    z-index: 2;
    -webkit-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    -o-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
    -webkit-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out; }

@media screen and (max-width: 640px) {
  .banner .header {
    top: 20%;
    left: 8.333335%; }
  .banner .copy {
    left: 8.333335%;
    width: 91.66667%; } }

/* == HOME == */
#home-project {
  background: #f1ede9;
  overflow: hidden; }
  #home-project .info {
    position: relative;
    padding-top: 40px; }
    #home-project .info .slide-nav {
      cursor: pointer;
      position: absolute;
      top: 40px;
      left: 50%;
      -webkit-transform: translate(-50%, 0%);
      -ms-transform: translate(-50%, 0%);
      -o-transform: translate(-50%, 0%);
      transform: translate(-50%, 0%); }
    #home-project .info .slide-number {
      padding: 0px 10px; }
      #home-project .info .slide-number p {
        margin-bottom: 5px; }
  #home-project div[data-title-entry] {
    overflow: hidden;
    width: 200px;
    -webkit-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out; }
    #home-project div[data-title-entry].transitioning {
      width: 0px; }
  #home-project .slides {
    position: relative;
    width: 100%;
    height: 330px; }
    #home-project .slides .slide {
      display: none;
      top: 0;
      left: 0;
      position: absolute;
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center center;
      transform: scale(1, 1); }
      #home-project .slides .slide.active {
        display: block;
        transition: transform 0.1s ease-in-out, left 0.3s ease-in-out; }
      #home-project .slides .slide.prev-slide {
        display: block;
        left: -110%;
        transition: transform 0.1s ease-in-out, left 0.3s ease-in-out; }
        #home-project .slides .slide.prev-slide:hover {
          transform: scale(1.05, 1.05); }
      #home-project .slides .slide.next-slide {
        display: block;
        left: 110%;
        transition: transform 0.1s ease-in-out, left 0.3s ease-in-out; }
        #home-project .slides .slide.next-slide:hover {
          transform: scale(1.05, 1.05); }

@media screen and (max-width: 640px) {
  #home-project .info div[data-url-entry] {
    position: absolute;
    right: 0;
    top: 40px; }
  #home-project .info div[data-title-entry] {
    height: 80px;
    padding-bottom: 60px; }
  #home-project .info .slide-nav {
    top: 80px; }
  #home-project .info .slide-number {
    padding: 0px;
    padding-right: 20px; }
  #home-project .slides {
    height: 150px; }
    #home-project .slides .slide.prev-slide {
      display: none; }
    #home-project .slides .slide.next-slide {
      display: none; } }

#home-services .serviceItem {
  padding-right: 20px; }
#home-project .bx-next, #home-project .bx-prev,
#project-index .bx-next, #project-index .bx-prev {
	font: normal 400 1em/1em "Roboto", sans-serif;
	color: #262626;
	text-transform: uppercase;
	margin-right: 20px;
	padding-top: 20px; }
#home-project .bx-controls,
#project-index .bx-controls {
	padding-top: 20px;
	display: inline-block;}	
#home-services p {
  padding-right: 20px; }

@media screen and (max-width: 640px) {
  #home-services h6 {
    padding-top: 20px; } }

/* == PROJECT == */
.banner.blue {
  background: #005a84; }

main.ProjectPage {
  background: #f1ede9; }

.project {
  padding: 0px 20px 40px 20px; }
  .project .project-bg {
    width: 100%;
    padding-bottom: 50%;
    background-size: cover;
    background-position: center center; }
  .project .project-info {
    padding-top: 40px; }
    .project .project-info h2 {
      padding-bottom: 20px; }
.category {
	background: #506841; 
	padding: 15px;
 }
	.category .item p {
		margin-bottom: 15px;
		line-height: 1em;}
	.category .item:last-of-type p {
		margin-bottom: 0px;}
#project-images .image {
  width: 100%;
  padding-bottom: 40px; }
  #project-images .image.half {
    width: 50%; }
  #project-images .image.left {
    padding-right: 20px; }
  #project-images .image.right {
    padding-left: 20px; }

@media screen and (max-width: 640px) {
  #project-images .image.half {
    width: 100%; }
  #project-images .image.right {
    padding: 0px; }
  #project-images .image.left {
    padding: 0px; } }

/* == ABOUT == */
.no{
	fill-rule:evenodd;
	clip-rule:evenodd;
	fill:#F9F1E5;
	stroke:#444;
	stroke-width: .25;
	stroke-miterlimit:10; }
	.oregon, .south_x002D_dakota, .minnesota, .idaho, .ohio {
		fill-rule:evenodd;
		clip-rule:evenodd;
		fill:#005A84;
		stroke:#444;
		stroke-width: .25;
		stroke-miterlimit:10;
		transition: all .1s ease-in-out;
		}
	.california, .colorado, .new_x002D_mexico, .nebraska, .kansas, .oklahoma, .texas, .missouri, .arkansas, .louisiana, .mississippi, .tennessee, .south_x002D_carolina, .illinois, .michigan {
		fill-rule:evenodd;
		clip-rule:evenodd;
		fill:#506841;
		stroke: #444;
		stroke-width: .25;
		stroke-miterlimit:10;
		transition: all .1s ease-in-out;
	}
.map-key {
	margin-top: 20px;
}
.map-key .green, .map-key .blue-box {
	height: 20px;
	width: 20px;
	background: #506841;
	display: inline-block;
	margin-right: 20px;
	margin-bottom: 10px;
}
.map-key .blue-box {
	background: #005A84;
}
.map-key h3 {
	display: inline-block;
	margin: 0px;
	margin-bottom: 10px;
}

#about-story .left {
  padding-right: 20px; }

#about-story .right {
  padding-left: 20px; }

#about-team .team-member {
  padding: 0px 20px; }
#about-team .team-member h1 {
	margin: 0px;
	padding: 0px;
}
#about-team .team-member h6 {
	margin: 0px 0px 15px 0px;
}
#about-team .team-member .button h6 {
	margin: 0px 0px 2px 0px;
}
#about-team .headshot {
  width: 100%;
  background: #262626;
  margin-bottom: 5px;
  background-size: cover;
  background-position: center center; }

#about-team h6 {
  margin-top: 5px;
  margin-bottom: 0px; }

#about-team p {
  text-align: right;
  line-height: 1em;
  margin-top: 5px;
  margin-bottom: 5px; }

#about-team .button {
  margin-bottom: 2.3em; }

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  svg {
    padding-bottom: 45%; } }

/* == Services == */
#services {
  -webkit-transition: height 3s ease-in-out;
  -ms-transition: height 3s ease-in-out;
  -o-transition: height 3s ease-in-out;
  transition: height 3s ease-in-out; }

.service {
  min-height: 600px;
  margin-bottom: 40px;
  -webkit-transition: height 0.3s ease-in-out;
  -ms-transition: height 0.3s ease-in-out;
  -o-transition: height 0.3s ease-in-out;
  transition: height 0.3s ease-in-out; }
  .service .header > .cell {
    cursor: pointer;
    position: relative;
    border: 2px solid #506841;
    border-left: none;
    border-bottom: none;
    padding: 20px;
    height: auto;
    overflow: hidden; }
    .service .header > .cell:first-of-type {
      border-left: 2px solid #506841; }
    .service .header > .cell:before {
      display: block;
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      height: 0%;
      width: 100%;
      background: #506841;
      -webkit-transition: all 0.3s ease-in-out;
      -ms-transition: all 0.3s ease-in-out;
      -o-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out; }
    .service .header > .cell:after {
      display: block;
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      height: 0%;
      width: 100%;
      background: #f9f1e5;
      -webkit-transition: all 0.3s ease-in-out;
      -ms-transition: all 0.3s ease-in-out;
      -o-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out; }
    .service .header > .cell.active h3 {
      color: #fff; }
    .service .header > .cell.active:before {
      height: 100%;
      z-index: 2; }
    .service .header > .cell:hover:after {
      height: 100%;
      z-index: 1; }
  .service .header h3 {
    position: relative;
    z-index: 4;
    font-size: 1em;
    margin: 0px;
    -webkit-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out; }
  .service .statement {
    position: relative;
    padding: 0px;
    height: 0px;
    -webkit-transition: padding 0s linear 0.6s;
    -ms-transition: padding 0s linear 0.6s;
    -o-transition: padding 0s linear 0.6s;
    transition: padding 0s linear 0.6s; }
    .service .statement:after {
      position: absolute;
      display: block;
      content: "";
      height: 0px;
      width: 100%;
      border: 2px solid transparent;
      top: 0;
      left: 0;
      -webkit-transition: height 0.3s ease-in-out 0.3s, border 0s linear 0.6s;
      -ms-transition: height 0.3s ease-in-out 0.3s, border 0s linear 0.6s;
      -o-transition: height 0.3s ease-in-out 0.3s, border 0s linear 0.6s;
      transition: height 0.3s ease-in-out 0.3s, border 0s linear 0.6s; }
    .service .statement p {
      margin: 0px;
      opacity: 0;
      -webkit-transform: translate(0px, -20px);
      -ms-transform: translate(0px, -20px);
      -o-transform: translate(0px, -20px);
      transform: translate(0px, -20px);
      -webkit-transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
      -ms-transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
      -o-transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
      transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
      transition-delay: 0s; }
    .service .statement.active {
      padding: 20px;
      height: auto;
      transition-delay: 0s; }
      .service .statement.active:after {
        height: 100%;
        transition-delay: 0s;
        border-color: #506841; }
      .service .statement.active p {
        -webkit-transform: translate(0px, 0px);
        -ms-transform: translate(0px, 0px);
        -o-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
        opacity: 1;
        transition-delay: .3s; }
  .service .bullet-item {
    position: relative;
    opacity: 1;
    width: 100%;
    -webkit-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    -o-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
    -webkit-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out; }
    .service .bullet-item:after {
      content: "";
      display: block;
      position: absolute;
      width: 100%;
      height: 2px;
      background: #506841;
      bottom: -5px; }
  .service .cover {
    position: relative;
    opacity: 0;
    width: 100%;
    height: 0px;
    padding: 0px;
    background: none;
    top: 0;
    left: 0;
    -webkit-transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    -ms-transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    -o-transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    -webkit-transform: translate(0px, 20px);
    -ms-transform: translate(0px, 20px);
    -o-transform: translate(0px, 20px);
    transform: translate(0px, 20px); }
    .service .cover:after {
      position: absolute;
      display: block;
      content: "";
      background: #506841;
      height: 100%;
      width: 0%;
      top: 0;
      left: 0;
      -webkit-transition: width 0.3s ease-in-out;
      -ms-transition: width 0.3s ease-in-out;
      -o-transition: width 0.3s ease-in-out;
      transition: width 0.3s ease-in-out;
      transition-delay: 0s; }
    .service .cover p {
      position: relative;
      z-index: 2;
      color: #fff;
      -webkit-transform: translate(0%, 10px);
      -ms-transform: translate(0%, 10px);
      -o-transform: translate(0%, 10px);
      transform: translate(0%, 10px);
      -webkit-transition: all 0.3s ease-in-out;
      -ms-transition: all 0.3s ease-in-out;
      -o-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out; }
    .service .cover ul {
      position: relative;
      z-index: 2;
      color: #fff;
      -webkit-column-count: 2;
      -webkit-column-gap: 35px;
      -moz-column-count: 2;
      -moz-column-gap: 35px;
      -ms-column-count: 2;
      -ms-column-gap: 35px;
      -o-column-count: 2;
      -o-column-gap: 35px;
      column-count: 2;
      column-gap: 35px;
      -webkit-transform: translate(0%, 10px);
      -ms-transform: translate(0%, 10px);
      -o-transform: translate(0%, 10px);
      transform: translate(0%, 10px);
      -webkit-transition: all 0.3s ease-in-out;
      -ms-transition: all 0.3s ease-in-out;
      -o-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out; }
    .service .cover.active {
      opacity: 1;
      -webkit-transform: translate(0px, 0px);
      -ms-transform: translate(0px, 0px);
      -o-transform: translate(0px, 0px);
      transform: translate(0px, 0px);
      padding: 20px;
      height: auto; }
      .service .cover.active:after {
        width: 100%;
        transition-delay: .6s; }
      .service .cover .button {
	      z-index: 4;
	      margin-top: 40px;
      }

@media screen and (max-width: 640px) {
  .item-section .item-section-head {
    background: #506841;
    padding: 20px;
    border-bottom: 2px solid #fff; }
    .item-section .item-section-head h3 {
      margin: 0px; }
  .item-section .item-section-items {
    max-height: 0px;
    overflow: hidden; }
    .item-section.open .item-section-items {
	    max-height: 100000px; }
    .item-section .item-section-items .cell {
      padding: 20px; }
      .item-section .item-section-items .cell p {
        margin: 0px; } }

/* == CONTACT == */
#contact-form .message {
  margin-top: 10px;
  margin-bottom: 70px; }

/* == FONTS == */
@font-face {
  font-family: "Georgia";
  src: url("assets/fonts/Georgia.ttf"); }

/* == ANIMATION == */

@keyframes open1-head {
  0% {
    transform: translateY(50px);
    opacity: 0; }
  20% {
    transform: translateY(50px);
    opacity: 0; }
  100% {
    transform: translateY(0px);
    opacity: 1; } }

@keyframes open2 {
  0% {
    transform: translateY(20px);
    opacity: 0; }
  100% {
    transform: translateY(0px);
    opacity: 1; } }

@keyframes slideTransition {
  0% {
    width: 100%; }
  50% {
    width: 0%; }
  100% {
    width: 100%; } }