/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
@import url("https://use.typekit.net/jju5hiq.css");
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; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after {
  content: '';
  content: none; }

a:any-link {
  text-decoration: none; }

q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

*:focus {
  outline: thin dashed #d0271a; }

/* Setup */
html {
  /* Change default typefaces here */
  color: #282828;
  font-family: "futura-pt", sans-serif;
  font-size: 150%;
  font-weight: 500;
  -webkit-font-smoothing: antialiased; }

/* Copy & Lists */
p {
  font-family: "futura-pt", sans-serif;
  font-weight: 300;
  hyphens: auto;
  line-height: 1.5rem;
  margin-bottom: 0;
  margin-top: 1.5rem; }

ul, ol {
  font-family: "futura-pt", sans-serif;
  font-weight: 300;
  margin-bottom: 1.5rem;
  margin-top: 1.5rem; }
  ul li, ol li {
    line-height: 1.5rem; }

ol {
  list-style: decimal;
  margin-left: 1em;
  font-weight: 300; }

blockquote {
  font-family: "futura-pt", sans-serif;
  line-height: 1.5rem;
  margin-bottom: 1.5rem;
  margin-top: 1.5rem; }

figcaption {
  font-family: "futura-pt", sans-serif;
  font-size: 0.85em;
  font-weight: 300;
  margin-left: 2.5em;
  margin-top: 1em; }

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: "futura-pt", sans-serif;
  font-weight: 700;
  line-height: 1.5rem;
  margin-bottom: 0;
  margin-top: 1.5rem; }

h1 {
  font-size: 4.242rem;
  line-height: 4.5rem;
  margin-top: 3rem; }

h2 {
  font-size: 2.828rem;
  line-height: 3rem;
  margin-top: 3rem; }

h3 {
  font-size: 1.414rem; }

h4 {
  font-size: 0.707rem; }

h5 {
  font-size: 0.47133rem; }

h6 {
  font-size: 0.3535rem; }

/* Tables */
table {
  border-collapse: collapse;
  border-spacing: 0px;
  margin-top: 1.5rem; }
  table td, table th {
    padding: 0;
    line-height: 36px; }

/* Code blocks */
code {
  vertical-align: bottom; }

/* Leading paragraph text */
.lead {
  font-size: 1.414rem; }

/* Hug a the block above you */
.hug {
  margin-top: 0; }

a, a:active, a:hover, a:visited {
  color: #d0271a;
  text-decoration: none; }

a:active, a:hover {
  border-bottom: 1px dashed #d0271a; }

.hr {
  border-bottom: 1px solid #d0271a;
  height: 10px;
  margin: 1em auto 0 auto;
  width: 60%; }

strong {
  font-weight: 500; }

em {
  font-style: italic; }

blockquote {
  border-left: 2px solid #d0271a;
  padding-left: 1em; }

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

.font-weight-light {
  font-weight: 300; }

.font-weight-heavy {
  font-weight: 700; }

.red {
  color: #d0271a; }

main {
  width: 90%;
  max-width: 1000px;
  margin: 0 auto; }

section {
  margin: 10em auto; }
  @media (max-width: 560px) {
    section {
      margin: 3em auto; } }

.blog-header {
  margin: 10em auto;
  max-width: 800px; }
  .blog-header h1 {
    text-align: center; }

.blog-container {
  align-items: end;
  display: grid;
  grid-gap: 4em 2em;
  grid-template-columns: repeat(3, 1fr);
  margin: 10em auto;
  max-width: 1000px; }
  @media (max-width: 900px) {
    .blog-container {
      display: flex;
      flex-direction: column;
      flex-wrap: wrap; } }

.blog-card h3 {
  margin-top: 0; }

.blog-card p {
  margin-top: 0.5em; }

.blog-card__image {
  max-width: 300px; }
  .blog-card__image img {
    max-width: 300px; }

.blog-card:first-of-type {
  grid-column: span 2; }
  .blog-card:first-of-type__image {
    max-width: 630px; }
  .blog-card:first-of-type img {
    max-width: 630px; }

.blog-card:nth-child(4n) {
  grid-column: span 2; }
  .blog-card:nth-child(4n)__image {
    max-width: 630px; }
  .blog-card:nth-child(4n) img {
    max-width: 630px; }

.date {
  color: #07819d;
  font-size: 0.8em;
  font-weight: 500;
  text-transform: uppercase; }

@media (max-width: 900px) {
  .blog-card {
    margin: 1.5em auto; }
  .blog-card__image img {
    max-width: 300px !important; } }

.blog-content {
  margin: 5em auto;
  max-width: 800px; }

.blog__header-img {
  margin: 2em auto; }

.blog-content img {
  max-width: 100%; }

.who-header {
  width: 80%;
  max-width: 800px;
  margin: 8em auto; }

.team-pics {
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around; }

.who__section {
  width: 80%;
  max-width: 800px;
  margin: 8em auto; }
  .who__section h2 {
    text-align: center;
    text-transform: uppercase; }
  .who__section h3 {
    font-weight: 300;
    margin-top: 0.25em;
    text-align: center;
    text-transform: lowercase; }

.who__bio {
  width: 80%;
  margin: 8em auto;
  max-width: 800px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end; }
  .who__bio .bio-title {
    margin-top: 0; }
  .who__bio .bio-img, .who__bio .bio-txt {
    margin-right: 1em; }

.work-container {
  display: grid;
  grid-template-columns: repeat(2, minmax(max-content, 1fr));
  grid-gap: 1em;
  margin: 3em auto; }
  .work-container figure {
    text-align: center; }
  .work-container__header {
    margin-bottom: 3em;
    text-align: center;
    grid-column: span 2; }
    .work-container__header h2 {
      text-transform: uppercase; }
  .work-container__item {
    padding: 3em 0; }
    .work-container__item--wide {
      grid-column: span 2; }

@media (max-width: 1000px) {
  .work-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; }
  .work-container img {
    max-width: 420px; } }

@media (max-width: 460px) {
  .work-container__item {
    padding: 1em 0; }
  .work-container img {
    max-width: 300px; } }

.res-btn {
  font-weight: 300;
  border: 1px solid #d0271a;
  display: inline-block;
  margin-top: 2em;
  padding: 10px 20px; }

footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 5em auto;
  max-width: 1000px;
  padding: 0 1em; }
  footer p {
    margin-top: 0.5em; }

.footer__follow img {
  margin-right: 0.25em;
  margin-top: 0.5em;
  width: 20px; }

.footer__copyright {
  font-size: 0.85em;
  margin-bottom: 2em;
  text-align: center; }

@media (max-width: 700px) {
  .footer__follow, .footer__connect, .footer__about, .footer__resources {
    flex-basis: 40%;
    margin-bottom: 2em; } }

@media (max-width: 500px) {
  .footer__follow, .footer__connect, .footer__about, .footer__resources {
    flex-basis: 100%;
    text-align: center;
    margin-bottom: 2em; } }

.home__kvp {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  max-width: 85%;
  margin: 1em auto; }
  @media (max-width: 800px) {
    .home__kvp {
      display: none; } }

.home__kvp--item {
  text-align: center;
  width: 20vw;
  margin: 10px; }

.home__what-we-do {
  display: grid;
  grid-template-columns: repeat(2, minmax(400px, 1fr));
  grid-template-areas: "header header" "strategy strategy" "identity web" "cta cta";
  grid-gap: 2em; }

.home__what-we-do--card-container {
  display: grid;
  grid-template-columns: repeat(2, minmax(400px, 1fr));
  grid-gap: 2em;
  margin: 5em auto;
  transition: all 1s; }
  .home__what-we-do--card-container .res-btn {
    grid-column: span 2;
    max-width: 35%;
    justify-self: center; }
  .home__what-we-do--card-container .what-we-do__card {
    text-align: left; }
    @media (max-width: 1050px) {
      .home__what-we-do--card-container .what-we-do__card {
        text-align: center;
        max-width: 100%; } }

@media (max-width: 1000px) {
  .home__what-we-do--card-container {
    display: flex;
    flex-direction: column;
    align-items: center; }
  .home__what-we-do {
    display: flex;
    flex-direction: column;
    align-items: center; } }

.what-we-do--header {
  grid-area: header;
  align-items: center;
  text-align: center; }

.what-we-do--section {
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 1fr));
  grid-gap: 1em;
  align-items: center;
  justify-items: center; }
  .what-we-do--section h3 {
    grid-column: span 2; }
  .what-we-do--section img {
    display: block;
    max-width: 150px; }

.what-we-do--strategy {
  grid-area: strategy; }

.what-we-do--cta {
  text-align: center;
  grid-area: cta; }

main {
  padding-left: 1em;
  padding-right: 1em;
  overflow: hidden; }

.home__who-we-are {
  width: 1000px;
  margin: 10em auto;
  display: grid;
  grid-template-columns: repeat(20, 50px);
  grid-template-rows: repeat(16, 50px); }
  @media (max-width: 1050px) {
    .home__who-we-are {
      display: flex;
      max-width: 98%;
      flex-direction: column;
      align-items: center; } }

.home__who-we-are--image1 {
  grid-column: 14;
  grid-row: 2; }
  @media (max-width: 1050px) {
    .home__who-we-are--image1 {
      max-width: 300px;
      margin-bottom: 3em; } }

.home__who-we-are--image2 {
  grid-column: 10;
  grid-row: 8; }
  @media (max-width: 1050px) {
    .home__who-we-are--image2 {
      max-width: 300px;
      margin-bottom: 3em; } }

.home__who-we-are--text {
  grid-column: 1 / 11;
  grid-row: 2 / 13;
  z-index: 50; }
  @media (max-width: 1050px) {
    .home__who-we-are--text {
      max-width: 100%;
      margin-bottom: 3em;
      text-align: center; } }

.bg-white {
  padding: 2em;
  border: 1px solid #eee;
  box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.2);
  background: rgba(255, 255, 255, 0.95); }
  .bg-white h2 {
    margin-top: 0; }
  @media (max-width: 1050px) {
    .bg-white {
      padding: 1em 0.5em 2em 0.5em;
      box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.2); } }

.home__why-it-matters {
  text-align: center; }

.jumbotron {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 10vh auto;
  max-width: 1000px;
  padding: 0 1em;
  text-align: center; }
  .jumbotron h1 {
    margin-top: 0; }

#res-logo {
  margin: 0 1em; }

.testimonial {
  margin: 2em auto;
  text-align: center; }

.top-nav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  max-width: 1000px;
  margin: 1em auto;
  padding: 1em; }
  @media (max-width: 500px) {
    .top-nav {
      padding: 1em; } }
  .top-nav__logo {
    width: 40px; }
  .top-nav__menu ul {
    margin: 0; }
  .top-nav__menu li {
    display: inline-block;
    margin-right: 1.25em; }
  .top-nav__menu a {
    font-size: 0.9em;
    color: #d0271a; }
  .top-nav__menu button {
    display: none; }

.mobile-menu {
  background: #fff;
  display: none;
  height: 100vh;
  position: fixed;
  text-align: center;
  width: 100vw;
  z-index: 99; }
  .mobile-menu ul {
    margin: 0 auto; }

.visible {
  display: flex; }

.hamburger:focus {
  outline: thin dashed #d0271a; }

@media (max-width: 700px) {
  .top-nav__menu ul {
    display: none; }
  .top-nav__menu button {
    display: block; } }

/*!
 * Hamburgers
 * @description Tasty CSS-animated hamburgers
 * @author Jonathan Suh @jonsuh
 * @site https://jonsuh.com/hamburgers
 * @link https://github.com/jonsuh/hamburgers
 */
.hamburger {
  padding: 15px 15px;
  display: inline-block;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible; }
  .hamburger:hover {
    opacity: 0.7; }

.hamburger-box {
  width: 40px;
  height: 24px;
  display: inline-block;
  position: relative; }

.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -2px; }
  .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    width: 40px;
    height: 4px;
    background-color: #d0271a;
    border-radius: 4px;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease; }
  .hamburger-inner::before, .hamburger-inner::after {
    content: "";
    display: block; }
  .hamburger-inner::before {
    top: -10px; }
  .hamburger-inner::after {
    bottom: -10px; }

/*
   * 3DX
   */
.hamburger--3dx .hamburger-box {
  perspective: 80px; }

.hamburger--3dx .hamburger-inner {
  transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }
  .hamburger--3dx .hamburger-inner::before, .hamburger--3dx .hamburger-inner::after {
    transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }

.hamburger--3dx.is-active .hamburger-inner {
  background-color: transparent;
  transform: rotateY(180deg); }
  .hamburger--3dx.is-active .hamburger-inner::before {
    transform: translate3d(0, 10px, 0) rotate(45deg); }
  .hamburger--3dx.is-active .hamburger-inner::after {
    transform: translate3d(0, -10px, 0) rotate(-45deg); }