@charset "UTF-8";
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,
q:before, q:after {
  content: "";
  content: none;
}

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

* {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-repeat: no-repeat;
  background-position: 0 0;
}

html, body {
  height: 100%;
}

html {
  font-size: 18px;
}
@media only screen and (min-width: 701px) and (min-height: 721px) {
  html {
    font-size: 24px;
  }
}

body {
  font-family: mixta-pro, Helvetica, serif;
  line-height: 1.5;
  background: url(/img/bright_squares.jpg) repeat center center;
  color: #333;
}

a {
  color: #7D6144;
}

a:hover {
  color: rgb(93.75, 72.75, 51);
}

p, ul {
  margin-bottom: 1.2rem;
}

img {
  max-width: 100%;
}

@media only screen and (min-width: 701px) {
  .connect, .sasquatch {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
  }
}
.sasquatch {
  height: 100%;
  background: url(/img/sasquatch_sm.jpg) center 0 no-repeat;
  background-size: cover;
}
@media only screen and (min-width: 701px) {
  .sasquatch {
    background: url(/img/sasquatch.jpg) center center no-repeat;
    background-size: cover;
  }
}

.subhead, .talk-balloon {
  position: relative;
  width: 100%;
  display: block;
  padding: 0.3em 0.2em;
}
@media only screen and (min-width: 701px) {
  .subhead, .talk-balloon {
    position: absolute;
    left: 0;
    top: 30%;
    left: 50%;
    max-width: 272px;
    margin: -150px 0 0 -260px;
  }
}
@media only screen and (min-width: 701px) and (min-height: 721px) {
  .subhead, .talk-balloon {
    top: 27%;
    max-width: 340px;
    margin-left: -300px;
  }
}

@media only screen and (min-width: 701px) {
  .talk-balloon-wrap {
    height: 130%;
  }
}

.talk-balloon {
  background: white;
  box-shadow: 0 0 20px rgba(20, 10, 5, 0.2);
  color: #3B362A;
  line-height: 1.1;
  font-size: 33px;
  text-align: center;
  z-index: 2000;
}
.talk-balloon:after {
  content: "";
  position: absolute;
  height: 0;
  width: 0;
  border-color: white transparent transparent transparent;
  border-style: solid;
  border-width: 20px;
  top: 100%;
  left: 50%;
  margin: -8px 0 0 -20px;
}
.talk-balloon small {
  font-size: 0.6em;
  display: block;
}
.talk-balloon a {
  text-decoration: none;
  display: block;
}
.talk-balloon a img {
  display: block;
  margin: 0 auto;
  width: 150px;
  height: 150px;
}
@media only screen and (min-width: 701px) {
  .talk-balloon a img {
    width: 220px;
    height: 220px;
  }
}
@media only screen and (min-width: 701px) {
  .talk-balloon {
    font-size: 50px;
    border-radius: 25px;
    transition: top 300ms ease;
  }
  .talk-balloon:after {
    border-color: transparent transparent transparent white;
    left: 100%;
    top: 50%;
    margin: 0;
  }
}
@media only screen and (min-width: 701px) and (min-height: 721px) {
  .talk-balloon {
    font-size: 62px;
    border-radius: 25px;
  }
}

.subhead {
  line-height: 1.3;
  font-size: 1.3rem;
  background: #251F13;
  font-style: italic;
  text-align: center;
  color: #fff;
}
.subhead .tml {
  font-family: "silver-northern", Helvetica, serif;
  font-style: normal;
  letter-spacing: 1px;
}
.subhead .forhire {
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  color: white;
  text-decoration: none;
}
body[data-secret-behavior=show] .subhead i {
  color: rgb(255, 174, 25.5);
  transition: color 300ms linear;
}
@media only screen and (min-width: 701px) {
  body[data-secret-behavior=show] .subhead i {
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
  }
}
@media only screen and (max-width: 700px) {
  .subhead {
    padding: 1.8em 1em 2em;
  }
}
@media only screen and (min-width: 701px) {
  .subhead {
    border-radius: 20px;
    font-size: 1rem;
    line-height: 1.2;
    position: fixed;
    z-index: 1000;
    bottom: auto;
    background: none;
    width: auto;
    text-shadow: 0 0 20px black;
  }
}
@media only screen and (min-width: 701px) and (min-height: 721px) {
  .subhead {
    font-size: 0.9rem;
  }
}

.tipform, .contactform, .navbar, .slide-content {
  margin: 0 auto;
  max-width: 680px;
  padding: 0 20px;
}

.slide-content p:last-child {
  margin-bottom: 0;
}

.all-projects .slide-content, .clients .slide-content, .projects-slide .slide-content {
  max-width: 800px;
}
@media only screen and (max-width: 450px) {
  .all-projects .slide-content, .clients .slide-content, .projects-slide .slide-content {
    padding-left: 0px;
    padding-right: 0px;
  }
}
.all-projects .narrow, .clients .narrow, .projects-slide .narrow {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

.index .nav {
  position: relative;
  height: 0;
}

.navbar-wrap {
  position: relative;
  z-index: 9000;
  width: 100%;
  background: white;
  border-bottom: 1px solid rgba(42, 22, 21, 0.3);
  -webkit-transform: translate3d(0, 0, 0);
}
.index .navbar-wrap {
  position: absolute;
}

body[data-nav-behavior=sticky] {
  background: #E9E9E9;
}
body[data-nav-behavior=sticky] .navbar-wrap {
  position: fixed;
  top: 0;
  left: 0;
}

.navbar {
  font-size: 0;
  text-align: center;
}
.navbar li {
  display: inline-block;
  position: relative;
}
.navbar li[data-state=active]:after, .navbar li[data-state=active] a:after {
  content: "";
  position: absolute;
  height: 0;
  width: 0;
  border-color: white transparent transparent transparent;
  border-style: solid;
  border-width: 8px;
  left: 50%;
  top: 100%;
  margin-left: -8px;
}
.navbar li[data-state=active] a {
  color: black;
}
.navbar li[data-state=active] a:after {
  border-top-color: rgba(42, 22, 21, 0.3);
  margin-top: 1px;
}
.navbar a {
  font-family: "silver-northern", Helvetica, serif;
  text-decoration: none;
  padding: 0.3em 8px;
  font-size: 1.15rem;
  display: inline-block;
}
@media only screen and (max-width: 450px) {
  .navbar a {
    font-size: 1.1rem;
    padding-left: 5px;
    padding-right: 5px;
  }
}
@media only screen and (max-width: 700px) {
  .navbar {
    padding: 0;
  }
}
@media only screen and (min-width: 701px) {
  .navbar li:first-child {
    margin-left: -14px;
  }
  .navbar a {
    padding: 0.25em 14px;
  }
}
@media only screen and (max-width: 400px) {
  .navbar .nav-remote {
    display: none;
  }
}
@media only screen and (max-width: 320px) {
  .navbar .nav-custom {
    display: none;
  }
}

.quotes, .tpms-puzzles, .pdf-puzzles, .testimonials, .thanks, .creatures-slide, .trivia-slide, .full-example, .return-to-home, .links, .who, .events, .clients, .puzzles, .raddle, .custom, .remote, .destination, .tabletop, .faq, .about, .how, .why, .all-projects, .projects-slide {
  font-size: 1rem;
  position: relative;
  z-index: 5000;
}

.tpms-puzzles, .pdf-puzzles, .testimonials, .thanks, .creatures-slide, .trivia-slide, .full-example, .return-to-home, .links, .who, .events, .clients, .puzzles, .raddle, .custom, .remote, .destination, .tabletop, .faq, .about, .how, .why, .all-projects, .projects-slide {
  background: #EDEDED url(/img/bright_squares.jpg) repeat center center;
  padding: 0 0 2em;
  -webkit-transform: translate3d(0, 0, 0);
}
.tpms-puzzles h2, .pdf-puzzles h2, .testimonials h2, .thanks h2, .creatures-slide h2, .trivia-slide h2, .full-example h2, .return-to-home h2, .links h2, .who h2, .events h2, .clients h2, .puzzles h2, .raddle h2, .custom h2, .remote h2, .destination h2, .tabletop h2, .faq h2, .about h2, .how h2, .why h2, .all-projects h2, .projects-slide h2 {
  color: #3B362A;
}
.tpms-puzzles h3, .pdf-puzzles h3, .testimonials h3, .thanks h3, .creatures-slide h3, .trivia-slide h3, .full-example h3, .return-to-home h3, .links h3, .who h3, .events h3, .clients h3, .puzzles h3, .raddle h3, .custom h3, .remote h3, .destination h3, .tabletop h3, .faq h3, .about h3, .how h3, .why h3, .all-projects h3, .projects-slide h3 {
  color: #3B362A;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
  .tpms-puzzles, .pdf-puzzles, .testimonials, .thanks, .creatures-slide, .trivia-slide, .full-example, .return-to-home, .links, .who, .events, .clients, .puzzles, .raddle, .custom, .remote, .destination, .tabletop, .faq, .about, .how, .why, .all-projects, .projects-slide {
    background-size: 148px 148px;
  }
}

.quotes {
  background: url(/img/6ghgesn.jpg) repeat 0 0;
  color: white;
}

.projects h1, .proposal h2, .intern h1, .trivia h1, .example h1, .return-to-home a, .tpms-puzzles h2, .pdf-puzzles h2, .testimonials h2, .thanks h2, .creatures-slide h2, .trivia-slide h2, .full-example h2, .return-to-home h2, .links h2, .who h2, .events h2, .clients h2, .puzzles h2, .raddle h2, .custom h2, .remote h2, .destination h2, .tabletop h2, .faq h2, .about h2, .how h2, .why h2, .all-projects h2, .projects-slide h2 {
  font-family: "silver-northern", Helvetica, serif;
  font-size: 3rem;
  line-height: 1.3;
  margin-bottom: 0.5em;
  border-bottom: 1px solid #d4d4d4;
  background: #333 url(/img/blue-tile.jpg) repeat center center;
  padding: 1em 0;
  text-align: center;
  line-height: 1em;
  box-shadow: inset 0 0 2px #999;
  text-shadow: 1px 1px white, -1px -1px #444;
  letter-spacing: 1px;
}
@media only screen and (max-width: 450px) {
  .projects h1, .proposal h2, .intern h1, .trivia h1, .example h1, .return-to-home a, .tpms-puzzles h2, .pdf-puzzles h2, .testimonials h2, .thanks h2, .creatures-slide h2, .trivia-slide h2, .full-example h2, .return-to-home h2, .links h2, .who h2, .events h2, .clients h2, .puzzles h2, .raddle h2, .custom h2, .remote h2, .destination h2, .tabletop h2, .faq h2, .about h2, .how h2, .why h2, .all-projects h2, .projects-slide h2 {
    font-size: 2rem;
  }
}
.projects h1 .subtitle, .proposal h2 .subtitle, .intern h1 .subtitle, .trivia h1 .subtitle, .example h1 .subtitle, .return-to-home a .subtitle, .tpms-puzzles h2 .subtitle, .pdf-puzzles h2 .subtitle, .testimonials h2 .subtitle, .thanks h2 .subtitle, .creatures-slide h2 .subtitle, .trivia-slide h2 .subtitle, .full-example h2 .subtitle, .return-to-home h2 .subtitle, .links h2 .subtitle, .who h2 .subtitle, .events h2 .subtitle, .clients h2 .subtitle, .puzzles h2 .subtitle, .raddle h2 .subtitle, .custom h2 .subtitle, .remote h2 .subtitle, .destination h2 .subtitle, .tabletop h2 .subtitle, .faq h2 .subtitle, .about h2 .subtitle, .how h2 .subtitle, .why h2 .subtitle, .all-projects h2 .subtitle, .projects-slide h2 .subtitle {
  display: block;
  font-size: 0.4em;
  line-height: 1.2;
  color: rgba(0, 0, 0, 0.3);
  text-shadow: 1px 1px rgba(255, 255, 255, 0.4), -1px -1px #444;
}

h2 {
  font-family: "silver-northern", Helvetica, serif;
  font-size: 2.5rem;
  margin-bottom: 0.2em;
}

h3 {
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1.3;
  margin-bottom: 0.5em;
}
h3:not(:first-child) {
  padding-top: 1em;
}

.about, .how, .why {
  font-size: 1.1rem;
}
.about strong, .about .strong, .how strong, .how .strong, .why strong, .why .strong {
  font-weight: 800;
  font-style: italic;
}
.about .strong, .how .strong, .why .strong {
  font-size: 1.3rem;
  line-height: 1.3;
}

.quotes {
  padding: 3rem 0;
  line-height: 1.3;
}
.quotes q {
  font-size: 1.3rem;
  margin-bottom: 1rem;
  display: block;
  font-style: italic;
}
.quotes cite {
  font-weight: 800;
  font-size: 1rem;
  display: block;
  text-align: right;
}
.quotes cite a {
  font-weight: normal;
}
.quotes a {
  color: #999;
}

.faq .where-staged li, .faq .clients li, .faq .who-for li, .bulleted li {
  padding-left: 1em;
  position: relative;
  margin-bottom: 0.3em;
}
.faq .where-staged li:before, .faq .clients li:before, .faq .who-for li:before, .bulleted li:before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: black;
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0.6em;
}

.faq .price {
  font-weight: 800;
  font-size: 0.9em;
}
.first-section {
  padding-top: 2.3rem;
}
.first-section h2 {
  padding-right: 0.3em;
  padding-left: 0.3em;
}
@media only screen and (max-width: 450px) {
  .first-section {
    padding-top: 2rem;
  }
}

.event p, .desc {
  width: 100%;
  background: white;
  padding: 0.8em 1em;
  border-radius: 0 0 10px 10px;
}
@media only screen and (min-width: 701px) {
  .event p, .desc {
    font-size: 0.8rem;
  }
}

.all-projects .card, .tpms-card, .proposal .card, .pp-card, .testimonials blockquote, .trivia .card, .example .card, .projects-slide .card, .raddle-list .raddle, .dispatch-list .dispatch, .twitter-list .twitter, .example-list .jet, .example-list .susanne-evan, .example-list .elaine, .example-list .async, .example-list .trivia, .example-list .vampires-event, .example-list .museum, .example-list .fauna, .example-list .stacks, .example-list .ttmyac, .example-list .creatures, .example-list .islands, .example-list .galleries, .example-list .galleries-event, .example-list .islands-event, .example-list .superheroes {
  border-radius: 10px;
  font-size: 0.9rem;
  position: relative;
  margin-bottom: 1.5em;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
  background: white;
  background-position: center 0;
}
@media only screen and (min-width: 701px) {
  .all-projects .card, .tpms-card, .proposal .card, .pp-card, .testimonials blockquote, .trivia .card, .example .card, .projects-slide .card, .raddle-list .raddle, .dispatch-list .dispatch, .twitter-list .twitter, .example-list .jet, .example-list .susanne-evan, .example-list .elaine, .example-list .async, .example-list .trivia, .example-list .vampires-event, .example-list .museum, .example-list .fauna, .example-list .stacks, .example-list .ttmyac, .example-list .creatures, .example-list .islands, .example-list .galleries, .example-list .galleries-event, .example-list .islands-event, .example-list .superheroes {
    background-position: center 0;
  }
}

.desc a {
  font-weight: bold;
}
.desc i {
  font-style: italic;
}

.event p {
  border-radius: 0;
  margin-bottom: 0;
}
.event p:last-child {
  border-radius: 0 0 10px 10px;
}

.event-link {
  text-indent: -0.75em;
  font-style: italic;
  font-size: 1.1em;
}

.raddle-list, .dispatch-list, .twitter-list, .example-list {
  margin-bottom: 3em;
}
.raddle-list:last-child, .dispatch-list:last-child, .twitter-list:last-child, .example-list:last-child {
  margin-bottom: 0;
}
.raddle-list li, .dispatch-list li, .twitter-list li, .example-list li {
  padding: 0 0 0 0;
  margin-bottom: 2em;
  padding-top: 200px;
  background-position: center 0;
}
@media only screen and (min-width: 701px) {
  .raddle-list li, .dispatch-list li, .twitter-list li, .example-list li {
    padding-top: 280px;
  }
}
.raddle-list h3, .dispatch-list h3, .twitter-list h3, .example-list h3 {
  width: 100%;
  background: #fff;
  font-family: "silver-northern", Helvetica, serif;
  font-weight: normal;
  padding: 0.6em 0.7em 0;
  margin: 0;
  font-size: 1.6rem;
  line-height: 1;
}
.raddle-list h3 a, .dispatch-list h3 a, .twitter-list h3 a, .example-list h3 a {
  text-decoration: underline;
}
@media only screen and (min-width: 701px) {
  .raddle-list h3, .dispatch-list h3, .twitter-list h3, .example-list h3 {
    top: 0.8em;
    left: -1rem;
    width: auto;
    border-radius: 0;
    padding: 0.4em 0.5em 0;
  }
}
.raddle-list .desc, .dispatch-list .desc, .twitter-list .desc, .example-list .desc {
  padding-top: 0.6em;
}
.raddle-list .specs, .dispatch-list .specs, .twitter-list .specs, .example-list .specs {
  display: block;
  text-transform: uppercase;
  font-size: 0.8em;
  padding-top: 0.8em;
  color: #666;
}

.example-list .superheroes {
  background-image: url(/img/superheroes/1.jpg);
  background-position-y: -90px;
}
@media only screen and (min-width: 701px) {
  .example-list .superheroes {
    background-position-y: -25px;
  }
}
.example-list .islands-event {
  background-image: url(/img/islands.jpg);
  background-position-y: -210px;
}
.example-list .galleries-event {
  background-image: url(/img/galleries.jpg);
  background-position-y: -25px;
}
.example-list .galleries {
  background-image: url(/img/galleries.jpg);
  background-position-y: -90px;
}
@media only screen and (min-width: 701px) {
  .example-list .galleries {
    background-position-y: -25px;
  }
}
.example-list .islands {
  background-image: url(/img/islands.jpg);
  background-position-y: bottom;
}
@media only screen and (min-width: 701px) {
  .example-list .islands {
    background-position-y: -210px;
  }
}
.example-list .creatures {
  background-image: url(/img/creatures.jpg);
}
.example-list .ttmyac {
  background-image: url(/img/money.jpg);
}
.example-list .stacks {
  background-position: right 0;
  background-image: url(/img/darwin.jpg);
}
.example-list .fauna {
  background-image: url(/img/wolpertinger.jpg);
}
.example-list .museum {
  background-image: url(/img/seurat.jpg);
}
.example-list .vampires-event {
  background-image: url(/img/vampires/header.png);
  background-size: 100% auto;
  padding-top: 130px;
}
@media only screen and (min-width: 701px) {
  .example-list .vampires-event {
    padding-top: 220px;
  }
}
.example-list .trivia {
  background-image: url(/img/trivia/trivianight.jpg);
  background-size: 100% auto;
}
@media only screen and (min-width: 701px) {
  .example-list .trivia {
    background-position-y: -40px;
  }
}
.example-list .async {
  background-image: url(/img/async.jpg);
  background-size: 100% auto;
  background-position-y: -20px;
}
.example-list .elaine {
  background-image: url(/img/elaine.jpg);
  background-size: 100% auto;
  padding-top: 330px;
}
@media only screen and (min-width: 701px) {
  .example-list .elaine {
    background-position-y: -55px;
  }
}
.example-list .susanne-evan {
  background-image: url(/img/susanne-evan.jpg);
  background-size: 100% auto;
  background-position-y: -40px;
}
.example-list .jet {
  background-image: url(/img/jet.jpg);
  background-size: 100% auto;
  background-position-y: -30px;
}
@media only screen and (min-width: 701px) {
  .example-list .jet {
    background-position-y: -70px;
  }
}

.twitter-list .twitter {
  background: #0DA3F3 url(/img/twitter.jpg) center 10px;
  background-size: auto 140px;
  background-repeat: no-repeat;
  padding-top: 160px;
}
@media only screen and (min-width: 701px) {
  .twitter-list .twitter {
    background-size: auto 200px;
    padding-top: 220px;
  }
}
.twitter-list strong {
  font-weight: 800;
}

.dispatch-list .dispatch {
  background: white url(/img/mermaid.jpg) center -50px;
  background-size: 100% auto;
  background-repeat: no-repeat;
  padding-top: 160px;
}
@media only screen and (min-width: 701px) {
  .dispatch-list .dispatch {
    padding-top: 320px;
  }
}

.raddle-list .raddle {
  background: white url(/img/raddle.png) center top;
  background-size: 100% auto;
  background-repeat: no-repeat;
  padding-top: 160px;
}
@media only screen and (min-width: 701px) {
  .raddle-list .raddle {
    padding-top: 320px;
  }
}

.press-desc {
  border-left: 3px solid rgba(0, 0, 0, 0.2);
  padding-left: 1em;
  font-size: 1rem;
}
.press-desc .headline {
  font-size: 1.1rem;
  font-style: italic;
  display: block;
}
.press-desc .author {
  display: block;
  font-size: 0.8em;
  margin-bottom: 1em;
}

.projects-slide {
  text-align: center;
}
.projects-slide .card {
  padding: 0.5em 0;
}

.proj-graf {
  text-align: center;
  font-size: 1.15rem;
  line-height: 1.65;
}
@media only screen and (max-width: 450px) {
  .proj-graf {
    padding-left: 10px;
    padding-right: 10px;
    font-size: 1rem;
  }
}
.proj-graf li {
  display: inline;
}
.proj-graf li:not(:first-child):before {
  content: "• ";
  font-size: 1.2em;
  position: relative;
  top: 0.1em;
  padding-left: 0.1em;
  line-height: 0.1;
}
.proj-graf a {
  color: #333;
  font-weight: 800;
  background: linear-gradient(180deg, transparent 73%, rgba(50, 181, 251, 0.3) 0);
  text-decoration: none;
}
.proj-graf a:hover {
  color: black;
  background: linear-gradient(180deg, transparent 73%, rgba(50, 181, 251, 0.6) 0);
}

.who {
  padding-bottom: 0;
}
.who .bio {
  padding-bottom: 1em;
}
.who strong {
  font-weight: 800;
}
.who .me {
  float: right;
  margin-left: 20px;
  border: 1px solid #666;
  width: 100px;
  height: 100px;
  background: white url(/img/sandy.jpg) -12px -10px no-repeat;
  border-radius: 50%;
  background-size: 120% auto;
  display: block;
}
@media only screen and (min-width: 701px) {
  .who {
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
  }
}
@media only screen and (min-width: 701px) and (min-height: 721px) {
  .who {
    font-size: 0.9rem;
  }
  .who .bio {
    background: url(/img/sandy.jpg) right -20px no-repeat;
    background-size: 180px auto;
    padding-right: 220px;
  }
  .who .me {
    display: none;
  }
}

.links {
  font-size: 0.8rem;
  line-height: 1.6;
}
.links .links-content {
  border-top: 1px solid #D4D4D4;
  padding-top: 1em;
}

.credits {
  padding-top: 0.5em;
  font-size: 0.6rem;
}

.return-to-home {
  padding: 0;
}
.return-to-home a {
  margin: 0;
  display: block;
  font-size: 1.2rem;
  text-shadow: none;
}

.clients .intro {
  max-width: 680px;
  text-align: center;
  margin: 0 auto 1.2em;
}

.logos {
  margin-bottom: 1em;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.logos img {
  margin: 0 0.8em 1.3em;
  max-height: 43px;
}
@media only screen and (max-width: 450px) {
  .logos img {
    max-height: 30px;
  }
}

@media only screen and (min-width: 701px) {
  body[data-connect-behavior=show] .sasquatch, body[data-connect-behavior=show] .subhead {
    display: none;
  }
  body[data-connect-behavior=show] .connect {
    display: block;
  }
}

@media only screen and (min-width: 701px) {
  .connect-spacer {
    position: relative;
    z-index: 100;
    height: 100%;
  }
}

.connect {
  font-size: 1rem;
  background: rgb(212.7344827586, 205.275862069, 189.1155172414);
  border-top: 1px solid #aaa;
  padding: 0.8rem 0;
}
@media only screen and (min-width: 701px) {
  .connect {
    padding: 0;
    background-image: url(/img/leaves.jpg);
    background-size: cover;
    border: none;
    z-index: 500;
  }
  .index .connect {
    display: none;
  }
}

.contactform {
  padding-top: 1em;
  padding-bottom: 1em;
}
.contactform h2 {
  border: none;
}
.contactform .tipform input[type=number], .tipform .contactform input[type=number], .contactform textarea, .contactform input[type=text], .contactform input[type=email] {
  padding: 0.5em 0.6em;
  width: 100%;
  font-size: 0.9rem;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid #bbb;
  border-top-color: #aaa;
  border-left-color: #aaa;
  font-family: mixta-pro, Helvetica, serif;
  margin-bottom: 0.5em;
  display: block;
}
.contactform .tipform input[type=number]:focus, .tipform .contactform input[type=number]:focus, .contactform textarea:focus, .contactform input[type=text]:focus, .contactform input[type=email]:focus {
  background: white;
  outline: none;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.contactform p {
  margin-bottom: 1em;
}
.contactform label {
  position: relative;
}
.contactform label strong {
  position: absolute;
  top: 0.6em;
  left: 0.6em;
  font-size: 0.9rem;
  z-index: 4000;
  color: #aaa;
}
.contactform input[type=text], .contactform input[type=email] {
  line-height: 1.3;
}
.contactform textarea {
  height: 6rem;
}
.contactform .buttons {
  text-align: center;
}
.contactform input[type=submit], .contactform button[type=button], .contactform button[type=submit] {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0.4em 2em;
  font-weight: 800;
  border-radius: 5px;
  background: #2D1C1B;
  color: #fff;
  border: none;
  display: inline-block;
  cursor: pointer;
  font-family: mixta-pro, Helvetica, serif;
}
.contactform .mce-responses .response {
  font-size: 0.8em;
  margin-bottom: 1em;
  font-style: italic;
  background: #F2F8AD;
  padding: 0.5em;
}
@media only screen and (min-width: 701px) {
  .contactform {
    font-size: 0.9rem;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 20px;
    position: relative;
    top: 5rem;
    margin: 0 auto;
  }
  .contactform label strong {
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
  }
}

.tipform {
  padding-top: 1em;
  padding-bottom: 1em;
}
.tipform h2 {
  border: none;
}
.tipform input[type=text], .tipform input[type=number], .tipform .contactform input[type=email], .contactform .tipform input[type=email], .tipform .contactform textarea, .contactform .tipform textarea {
  padding: 0.5em 0.6em;
  width: 100%;
  font-size: 0.9rem;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid #bbb;
  border-top-color: #aaa;
  border-left-color: #aaa;
  font-family: mixta-pro, Helvetica, serif;
  margin-bottom: 0.5em;
  display: block;
}
.tipform input[type=text]:focus, .tipform input[type=number]:focus, .tipform .contactform input[type=email]:focus, .contactform .tipform input[type=email]:focus, .tipform .contactform textarea:focus, .contactform .tipform textarea:focus {
  background: white;
  outline: none;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.tipform p {
  margin-bottom: 1em;
}
.tipform label {
  position: relative;
}
.tipform label strong {
  position: absolute;
  top: 0.6em;
  left: 0.6em;
  font-size: 0.9rem;
  font-weight: 800;
  z-index: 4000;
  color: #aaa;
}
.tipform input[type=text], .tipform input[type=number] {
  line-height: 1.3;
}
.tipform .buttons {
  text-align: center;
}
.tipform .tip-button {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0.4em 2em;
  font-weight: 800;
  border-radius: 5px;
  background: #2D1C1B;
  color: #fff;
  border: none;
  display: inline-block;
  cursor: pointer;
}
@media only screen and (min-width: 701px) {
  .tipform {
    font-size: 0.9rem;
    background: rgba(255, 255, 255, 0.75);
    border-radius: 20px;
    position: relative;
    top: 5rem;
    margin: 0 auto;
  }
}

.breadcrumb {
  margin-bottom: 0.5rem;
}
.breadcrumb a {
  font-size: 0.6rem;
  text-decoration: none;
  color: #666;
  text-transform: uppercase;
}

.full-example i {
  font-style: italic;
}

.trivia .card img, .example .card img {
  border-radius: 10px 10px 0 0;
  display: block;
}
.trivia .card .desc, .example .card .desc {
  font-style: italic;
  color: #666;
  font-size: 0.75rem;
}

.example .bulleted strong {
  font-weight: 800;
}

.trivia-banner {
  background: white url(/img/trivia/trivianight.jpg) center center no-repeat;
  background-size: cover;
  height: 600px;
  z-index: 1000;
  position: relative;
}

.trivia .navbar-wrap {
  background: black;
}
.trivia .navbar-wrap a {
  color: rgba(255, 255, 255, 0.8);
}
.trivia .navbar-wrap a:hover {
  color: white;
}
.trivia .bulleted strong {
  font-weight: 800;
}
.trivia .first-trivia-slide {
  padding-top: 1.5em;
}
.trivia h4 {
  font-size: 1.4em;
  line-height: 1.4;
}

.trivia-slide strong {
  font-weight: 800;
}

.calendy-button {
  margin: 0;
  font-size: 1.3rem;
  line-height: 1.5;
  padding: 0.4em 1.5em;
  font-family: "silver-northern", Helvetica, serif;
  border-radius: 5px;
  background: #cd6139;
  color: #fff;
  border: none;
  display: inline-block;
  cursor: pointer;
  text-decoration: none;
  letter-spacing: 1px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.calendy-button:hover {
  color: rgba(255, 255, 255, 0.8);
}

.youtube-container {
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  position: relative;
}

.youtube {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.testimonials {
  padding-top: 0rem;
}
.testimonials blockquote {
  font-style: italic;
  padding: 1rem;
  border-radius: 0 0 10px 10px;
}
.testimonials i {
  font-style: normal;
}
.testimonials cite {
  font-style: normal;
  font-weight: 800;
  display: block;
  text-align: right;
  font-size: 1rem;
}
.testimonials .logo {
  border-radius: 10px 10px 0 0;
  height: 80px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: auto 60%;
}
.testimonials .accenture {
  background-color: #992322;
  background-image: url(/img/logos/accenture.png);
}
.testimonials .ad-hoc {
  background-color: #31B67B;
  background-image: url(/img/logos/ad-hoc.png);
}
.testimonials .automattic {
  background-color: #3858e9;
  background-image: url(/img/logos/automattic.png);
  background-size: 50% auto;
}
.testimonials .bcg {
  background-color: #0d744c;
  background-image: url(/img/logos/bcg2.png);
}
.testimonials .field {
  background-color: #0045FE;
  background-image: url(/img/logos/field.png);
}
.testimonials .frwd {
  background-color: #000;
  background-image: url(/img/logos/frwd.png);
}
.testimonials .gensler {
  background-color: #EE3324;
  background-image: url(/img/logos/gensler.png);
}
.testimonials .glowforge {
  background-color: #fff;
  background-image: url(/img/logos/glowforge.jpg);
}
.testimonials .ideo {
  background-color: #000;
  background-image: url(/img/logos/ideo.png);
}
.testimonials .imc {
  background-color: #eee;
  background-image: url(/img/logos/imc.png);
}
.testimonials .meta {
  background-color: #000040;
  background-image: url(/img/logos/meta2.png);
}
.testimonials .oppl {
  background-color: #fff;
  background-image: url(/img/logos/oppl.png);
}
.testimonials .salesforce {
  background-color: #00A1E0;
  background-image: url(/img/logos/salesforce.png);
}
.testimonials .shure {
  background-color: #b4ff39;
  background-image: url(/img/logos/shure.png);
}
.testimonials .uptake {
  background-color: #8C8C8C;
  background-image: url(/img/logos/uptake.png);
}
.testimonials .yt {
  background-color: #000000;
  background-image: url(/img/logos/youtube.png);
}
.testimonials .ynab {
  background-color: #5860fe;
  background-image: url(/img/logos/ynab.png);
}
.testimonials .nu {
  background-color: #ddd;
  background-image: url(/img/logos/nuknight.png);
}
.testimonials .uc {
  background-color: #800000;
  background-image: url(/img/logos/uc.png);
}
.testimonials .cah {
  background-color: #000;
  background-image: url(/img/logos/cah.jpg);
}
.testimonials .caf {
  background-color: #fff;
  background-image: url(/img/logos/caf.jpg);
}
.testimonials .individual {
  height: 50px;
  background-color: #000;
}

.pdf-puzzles h3 {
  border-bottom: 1px solid #ccc;
  margin-bottom: 0.5em;
}
.pdf-puzzles .npr a {
  font-weight: bold;
  display: block;
}

.pp-month {
  border-bottom: 1px solid #ccc;
  margin-bottom: 0.5em;
  font-style: italic;
  color: #666;
}

.puzzle-list {
  margin-bottom: 1.5em;
}

.madhatter .connect {
  background-image: url(/img/madhatter.jpg);
  background-position: center top;
  background-repeat: no-repeat;
  min-height: 100%;
}
.madhatter .contactform {
  background: rgba(255, 255, 255, 0.9);
}

.proposal .slide-content {
  padding-top: 1.5em;
}
.proposal .slide-content strong {
  font-weight: 800;
}
.proposal .slide-content i {
  font-style: italic;
}
.proposal .card {
  padding: 1em;
}

.tpms-puzzles {
  padding-top: 2rem;
}

.sonya .qr {
  height: 150px;
}

.all-projects .card {
  padding: 0.5em 0;
  text-align: center;
}

.projects-list {
  margin-bottom: 0;
}
.projects-list li {
  border-radius: 10px;
  font-size: 0.9rem;
  margin-bottom: 1.5em;
  background: white;
  display: flex;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
@media only screen and (max-width: 450px) {
  .projects-list li {
    border-radius: 0;
  }
}
.projects-list .img {
  border-radius: 10px 0 0 10px;
  background-size: cover;
  background-position: center center;
  flex: 1;
}
@media only screen and (max-width: 450px) {
  .projects-list .img {
    max-height: 100px;
    flex: 0.75;
    border-radius: 0;
  }
}
.projects-list .desc {
  flex: 2;
  border-radius: 0 10px 10px 0;
}
.projects-list .desc a {
  font-weight: normal;
}
@media only screen and (max-width: 450px) {
  .projects-list .desc {
    padding: 0.8em;
  }
}
.projects-list .specs a {
  font-weight: 800;
}
.projects-list strong {
  font-weight: 800;
}
.projects-list .specs {
  display: block;
  text-transform: uppercase;
  font-size: 0.8em;
  padding-top: 0.8em;
  color: #666;
}

#accenture .img {
  background-image: url(/img/projects/accenture.jpg);
}

#airbnb .img {
  background-image: url(/img/projects/airbnb.jpg);
}

#alinea .img {
  background-image: url(/img/projects/pilcrow.jpg);
}

#ams .img {
  background-image: url(/img/projects/ams.jpg);
}

#bat-mitzvah .img {
  background-image: url(/img/projects/slitherlink.jpg);
}

#birthday .img {
  background-image: url(/img/projects/elaine.jpg);
  background-position: center top;
}

#cah .img {
  background-image: url(/img/projects/menorah.jpg);
}

#chicago-tonight .img {
  background-image: url(/img/projects/chicagotonight.jpg);
}

#catalpa-health .img {
  background-image: url(/img/projects/pop.jpg);
}

#dmoc .img {
  background-image: url(/img/projects/dmoc.jpg);
}

#f5 .img {
  background-image: url(/img/projects/f5.jpg);
  background-position: center top;
}

#fat-rice .img {
  background-image: url(/img/projects/fatrice.jpg);
}

#field-museum .img {
  background-image: url(/img/projects/mummies.jpg);
}

#field-notes .img {
  background-image: url(/img/projects/clandestine.jpg);
}

#hrr .img {
  background-image: url(/img/projects/hrr.jpg);
}

#jet .img {
  background-image: url(/img/projects/tshirt.jpg);
}

#last-defender .img {
  background-image: url(/img/projects/tld.jpg);
  background-position: left center;
}

#mit .img {
  background-image: url(/img/projects/bookspace.jpg);
}

#msi .img {
  background-image: url(/img/projects/msi.jpg);
}

#npr .img {
  background-image: url(/img/projects/npr.jpg);
}

#proposal .img {
  background-image: url(/img/projects/proposal.jpg);
}

#shotdeck .img {
  background-image: url(/img/projects/shotdeck.jpg);
}

#this-bright-river .img {
  background-image: url(/img/projects/tbr.jpg);
}

#tmpd .img {
  background-image: url(/img/projects/tmpd.jpg);
}

#uchicago-world .img {
  background-image: url(/img/projects/ticket.jpg);
}

#vamonde .img {
  background-image: url(/img/projects/pegleg.jpg);
  background-position: center bottom;
}

#watsky .img {
  background-image: url(/img/projects/watsky.jpg);
  background-position: center bottom;
}

.showcase .tld-video {
  margin-bottom: 1em;
}
.showcase .the-last-defender p {
  font-size: 0.9rem;
}

.page404 {
  text-align: center;
}