section.hero {
  background: 50% 50% no-repeat #2f281f;
  background-size: cover;
  bottom: 0;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 3;
}
section.hero h1 {
  bottom: 60%;
  color: white;
  left: 20px;
  line-height: 1.5;
  position: absolute;
  right: 20px;
  text-align: center;
  text-shadow: 0 0 20px #221409;
}
section.hero p {
  color: #eceadc;
  font-size: 1.75em;
  font-weight: 200;
  left: 20px;
  position: absolute;
  top: 42%;
  right: 20px;
  text-align: center;
  text-shadow: 0 0 10px #221409;
}

section.showcase {
  background: url("/assets/images/home-stripe-bg.png") 50% 100% repeat #f8f8f8;
  padding-top: 90px;
  position: relative;
  z-index: 2;
}
section.showcase:before {
  background: url("/assets/images/home-tab-triangle.png") no-repeat;
  bottom: 100%;
  content: "\f019";
  font-size: 2.5em;
  left: 50%;
  line-height: 100px;
  height: 136px;
  margin: 0 0 -1px -216px;
  position: absolute;
  width: 432px;
}
section.showcase h1 {
  bottom: 100%;
  cursor: pointer;
  font-size: 2.5em;
  left: 50%;
  line-height: 60px;
  margin: 0 0 0 -216px;
  padding-top: 70px;
  position: absolute;
  text-align: center;
  width: 432px;
}
section.showcase:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}
section.showcase .project {
  box-sizing: border-box;
  display: inline-block;
  height: calc(217px + 90px); /* Height of image plus 90px padding */
  line-height: 1.5em;
  margin: 0 60px;
  padding: 50px 0 0 215px;
  position: relative;
  text-align: left;
  vertical-align: top;
  width: 525px;
}
section.showcase .project img {
  max-width: 185px;
  left: 0;
  opacity: 0.99;
  position: absolute;
  top: 0;
  transition: opacity 0.3s linear;
}
section.showcase .project img.hidden {
  opacity: 0;
}
section.showcase .project dfn {
  display: block;
  margin-top: 1em;
}
section.showcase .project dfn a {
  white-space: nowrap;
}

@media screen and (max-width: 1319px) {
  section.showcase .project {
    display: block;
    float: left;
    margin: 0 5%;
    width: 40%;
  }
}
@media screen and (max-width: 1023px) {
  section.showcase .project {
    margin: 0 2%;
    width: 46%;
  }
}
@media screen and (max-width: 830px) {
  section.showcase {
    line-height: 260px;
    padding-bottom: 40px;
  }
  section.showcase .project {
    float: none;
    height: 260px;
    margin: 0 8%;
    width: auto;
  }
  section.showcase .project:nth-child(odd) {
    padding-left: 0;
    padding-right: 215px;
  }
  section.showcase .project:nth-child(odd) img {
    left: auto;
    right: 0;
  }
}

section.quote {
  background: 50% 50% no-repeat;
  background-size: cover;
  height: 515px;
  overflow: hidden;
  position: relative;
}
section.quote blockquote {
  bottom: 45%;
  color: white;
  font-size: 4.5em;
  font-weight: 200;
  left: 20px;
  line-height: 1.5;
  position: absolute;
  right: 20px;
  text-align: center;
  text-shadow: 0 0 20px #221409;
}
section.quote cite {
  color: #eceadc;
  font-size: 1.75em;
  font-weight: 200;
  left: 20px;
  line-height: 1.5;
  position: absolute;
  right: 20px;
  text-align: center;
  text-shadow: 0 0 10px #221409;
  top: 58%;
}

section.technologies {
  background: url("/assets/images/home-stripe-bg.png") 50% 100% repeat #f8f8f8;
}
section.technologies:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}
section.technologies h1 {
  line-height: 1.5;
  padding: 60px 0;
}
section.technologies .specialty {
  box-sizing: border-box;
  display: inline-block;
  height: calc(217px + 90px); /* Height of image plus 90px padding */
  line-height: 1.5;
  margin: 0 60px;
  padding: 20px 0 0 215px;
  position: relative;
  text-align: left;
  vertical-align: top;
  width: 525px;
}
section.technologies .specialty img {
  max-width: 185px;
  left: 0;
  opacity: 0.99;
  position: absolute;
  top: 0;
  transition: opacity 0.3s linear;
}
section.technologies .specialty img.hidden {
  opacity: 0;
}
section.technologies .specialty dfn {
  display: block;
  margin-top: 1em;
}
section.technologies .specialty dfn a {
  white-space: nowrap;
}

@media screen and (max-width: 1319px) {
  section.technologies .specialty {
    display: block;
    float: left;
    margin: 0 5%;
    width: 40%;
  }
}
@media screen and (max-width: 1023px) {
  section.technologies .specialty {
    margin: 0 2%;
    width: 46%;
  }
}
@media screen and (max-width: 830px) {
  section.technologies {
    line-height: 260px;
    padding-bottom: 40px;
  }
  section.technologies h1 {
    padding-left: 8%;
    padding-right: 8%;
  }
  section.technologies .specialty {
    float: none;
    height: 260px;
    margin: 0 8%;
    width: auto;
  }
  section.technologies .specialty:nth-child(odd) {
    padding-left: 0;
    padding-right: 215px;
  }
  section.technologies .specialty:nth-child(odd) img {
    left: auto;
    right: 0;
  }
}

section.team {
  background: url("/assets/images/home-wood-bg.jpg") 50% 0 repeat #120e0a;
  min-height: 608px;
  padding: 71px 0;
}
section.team h1 {
  background: url("/assets/images/home-hex-title-bg.png") 50% 50% no-repeat;
  color: white;
  height: 248px;
  line-height: 248px;
  margin: 0 auto;
  max-width: 842px;
  white-space: nowrap;
}
section.team .members {
  font-size: 0;
  line-height: 180px;
  margin: 0 auto;
  text-align: left;
}
section.team .employee,
section.team .you {
  background: url("/assets/images/hex-brown.png") 0 0 no-repeat;
  color: white;
  display: inline-block;
  font-size: 16px;
  height: 246px;
  line-height: 1.5;
  margin: -69px 0 0;
  position: relative;
  vertical-align: top;
  text-decoration: none;
  transition: background 0.2s linear;
  width: 210px;
}
section.team .employee img,
section.team .you img {
  cursor: pointer;
  height: 242px;
  left: 1px;
  opacity: 0.99;
  position: absolute;
  top: 2px;
  transition: opacity 0.2s linear;
  width: 208px;
}
section.team .employee img.hidden,
section.team .employee img.active,
section.team .you img.hidden,
section.team .you img.active {
  opacity: 0;
}
section.team .employee:hover,
section.team .employee.active,
section.team .you:hover,
section.team .you.active {
  background-image: url("/assets/images/hex-orange.png");
  z-index: 2;
}
section.team .employee .details {
  background: url("/assets/images/hex-orange.png") 0 0 repeat-x;
  display: none;
  height: 246px;
  position: absolute;
  width: 420px;
}
section.team .employee .details h3 {
  bottom: 50%;
  font-size: 2em;
  left: 30px;
  margin-bottom: 5px;
  position: absolute;
}
section.team .employee .details dfn {
  color: #eceadc;
  font-size: 1.15em;
  font-weight: 200;
  left: 30px;
  margin-top: 5px;
  max-width: 240px;
  position: absolute;
  text-align: left;
  top: 50%;
}
section.team .employee .details a {
  color: #eceadc;
  font-size: 1.15em;
  font-weight: 200;
  left: 320px;
  position: absolute;
  text-decoration: none;
  transition: none;
}
section.team .employee .details a:before {
  position: absolute;
  right: 100%;
  text-align: center;
  width: 30px;
}
section.team .employee .details a.contact {
  bottom: 50%;
  margin-bottom: 5px;
}
section.team .employee .details a.contact:before {
  content: "\f003";
}
section.team .employee .details a.bio {
  margin-top: 5px;
  top: 50%;
}
section.team .employee .details a.bio:before {
  content: "\f036";
}
section.team .employee .details a:hover,
section.team .employee .details a:focus {
  color: white;
}
section.team .employee.active img,
section.team .employee:hover img {
  opacity: 0;
}
section.team .employee.active img.active,
section.team .employee:hover img.active {
  opacity: 0.99;
  transition: opacity 0.6s linear;
}
section.team .employee.active .details {
  display: block;
}
section.team .employee.dim img {
  opacity: 0.3;
}

@media screen and (min-width: 1050px) {
  section.team .members {
    max-width: 1050px;
  }
  section.team .employee .details,
  section.team .you .details {
    top: -180px;
  }
  section.team .employee:nth-child(9n + 1) .details,
  section.team .employee:nth-child(9n + 2) .details,
  section.team .you:nth-child(9n + 1) .details,
  section.team .you:nth-child(9n + 2) .details {
    left: 105px;
  }
  section.team .employee:nth-child(9n + 3) .details,
  section.team .you:nth-child(9n + 3) .details {
    left: -105px;
  }
  section.team .employee:nth-child(9n + 4) .details,
  section.team .employee:nth-child(9n + 5) .details,
  section.team .you:nth-child(9n + 4) .details,
  section.team .you:nth-child(9n + 5) .details {
    left: -315px;
  }
  section.team .employee:nth-child(9n + 6),
  section.team .you:nth-child(9n + 6) {
    margin-left: 105px;
  }
  section.team .employee:nth-child(9n + 6) .details,
  section.team .you:nth-child(9n + 6) .details {
    left: 105px;
  }
  section.team .employee:nth-child(9n + 7) .details,
  section.team .employee:nth-child(9n + 8) .details,
  section.team .you:nth-child(9n + 7) .details,
  section.team .you:nth-child(9n + 8) .details {
    left: -105px;
  }
  section.team .employee:nth-child(9n + 9),
  section.team .you:nth-child(9n + 9) {
    margin-right: 105px;
  }
  section.team .employee:nth-child(9n + 9) .details,
  section.team .you:nth-child(9n + 9) .details {
    left: -315px;
  }
  section.team .employee:nth-child(-n + 5) .details,
  section.team .you:nth-child(-n + 5) .details {
    top: 180px;
  }
}
@media screen and (min-width: 840px) and (max-width: 1049px) {
  section.team .members {
    max-width: 840px;
  }
  section.team .employee .details,
  section.team .you .details {
    top: -180px;
  }
  section.team .employee:nth-child(7n + 1),
  section.team .you:nth-child(7n + 1) {
    margin-left: 105px;
  }
  section.team .employee:nth-child(7n + 1) .details,
  section.team .you:nth-child(7n + 1) .details {
    left: 105px;
  }
  section.team .employee:nth-child(7n + 2) .details,
  section.team .you:nth-child(7n + 2) .details {
    left: -105px;
  }
  section.team .employee:nth-child(7n + 3),
  section.team .you:nth-child(7n + 3) {
    margin-right: 105px;
  }
  section.team .employee:nth-child(7n + 3) .details,
  section.team .you:nth-child(7n + 3) .details {
    left: -315px;
  }
  section.team .employee:nth-child(7n + 4) .details,
  section.team .you:nth-child(7n + 4) .details {
    left: 105px;
  }
  section.team .employee:nth-child(7n + 5) .details,
  section.team .you:nth-child(7n + 5) .details {
    left: -105px;
  }
  section.team .employee:nth-child(7n + 6) .details,
  section.team .you:nth-child(7n + 6) .details {
    left: -105px;
  }
  section.team .employee:nth-child(7n + 7) .details,
  section.team .you:nth-child(7n + 7) .details {
    left: -315px;
  }
  section.team .employee:nth-child(-n + 3) .details,
  section.team .you:nth-child(-n + 3) .details {
    top: 180px;
  }
}
@media screen and (min-width: 630px) and (max-width: 839px) {
  section.team .members {
    max-width: 630px;
  }
  section.team .employee .details,
  section.team .you .details {
    top: -180px;
  }
  section.team .employee:nth-child(5n + 1) .details,
  section.team .you:nth-child(5n + 1) .details {
    left: 105px;
  }
  section.team .employee:nth-child(5n + 2) .details,
  section.team .you:nth-child(5n + 2) .details {
    left: -105px;
  }
  section.team .employee:nth-child(5n + 3) .details,
  section.team .you:nth-child(5n + 3) .details {
    left: -315px;
  }
  section.team .employee:nth-child(5n + 4),
  section.team .you:nth-child(5n + 4) {
    margin-left: 105px;
  }
  section.team .employee:nth-child(5n + 4) .details,
  section.team .you:nth-child(5n + 4) .details {
    left: 105px;
  }
  section.team .employee:nth-child(5n + 5),
  section.team .you:nth-child(5n + 5) {
    margin-right: 105px;
  }
  section.team .employee:nth-child(5n + 5) .details,
  section.team .you:nth-child(5n + 5) .details {
    left: -315px;
  }
  section.team .employee:nth-child(-n + 3) .details,
  section.team .you:nth-child(-n + 3) .details {
    top: 180px;
  }
}
@media screen and (max-width: 629px) {
  section.team .members {
    max-width: 420px;
  }
  section.team .employee .details,
  section.team .you .details {
    top: -180px;
  }
  section.team .employee .details a,
  section.team .you .details a {
    height: 1.25em;
    margin-left: -15px;
    overflow: hidden;
    text-indent: -999em;
    width: 30px;
  }
  section.team .employee .details a:before,
  section.team .you .details a:before {
    font-size: 1.25em;
    left: 0;
    line-height: 1.5;
    right: auto;
    text-indent: 0;
  }
  section.team .employee:nth-child(3n + 1),
  section.team .you:nth-child(3n + 1) {
    margin-left: 105px;
    margin-right: 105px;
  }
  section.team .employee:nth-child(3n + 1) .details,
  section.team .you:nth-child(3n + 1) .details {
    left: -105px;
  }
  section.team .employee:nth-child(3n + 2) .details,
  section.team .you:nth-child(3n + 2) .details {
    left: 105px;
  }
  section.team .employee:nth-child(3n + 3) .details,
  section.team .you:nth-child(3n + 3) .details {
    left: -105px;
  }
  section.team .employee:nth-child(-n + 1) .details,
  section.team .you:nth-child(-n + 1) .details {
    top: 180px;
  }
}

section.plan {
  background: url("/assets/images/home-stripe-bg.png") 50% 100% repeat #f8f8f8;
  padding: 90px 0;
}
section.plan h1 {
  padding: 0 0 60px;
}
section.plan button {
  background: #f4f3ea;
  margin-top: 2em;
  padding: 0 3em;
}
section.plan button:hover,
section.plan button:focus {
  background: white;
}

@media screen and (max-width: 1023px) {
  section.quote blockquote {
    font-size: 3.5em;
  }
  section.quote cite {
    font-size: 1.5em;
  }
}
@media screen and (max-width: 830px) {
  section.quote blockquote {
    font-size: 2.75em;
  }
  section.quote cite {
    font-size: 1.25em;
  }

  section.team h1 {
    font-size: 3.5em;
  }
}
@media screen and (max-width: 600px) {
  section.hero p br {
    display: none;
  }

  section.quote blockquote {
    bottom: 35%;
  }
  section.quote cite {
    top: 70%;
  }

  section.team h1 {
    font-size: 3em;
  }
}