@charset "UTF-8";
body {
  margin: 0 auto;
  width: 100%;
}

.bleed {
  margin: auto;
  width: 100%;
  background-size: 100%;
  background-size: cover;
}

.bleed.image {
  background-repeat: no-repeat;
  background-size: cover;
}

.flex.container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  border: 0;
}

.flex.container.v-center {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  border: 0;
  align-items: center;
}

.flex.container.column {
  -webkit-flex-direction: column;
  flex-direction: column;
  flex-wrap: wrap;
}

.spaceje {
  height: 20px;
}

.spacer {
  height: 40px;
}

img {
  width: 100%;
  margin-bottom: -4px;
}

.grid-4.container, .grid-3.container, .grid-2.container {
  display: grid;
}
.grid-4.container .card, .grid-3.container .card, .grid-2.container .card {
  margin: 8px;
}

@media screen and (min-width: 320px) {
  .container {
    margin-left: 20px;
    margin-right: 20px;
  }
  .grid-4.container, .grid-3.container {
    grid-template-columns: 1, 100%;
  }
  .flex.container .col-1, .flex.container .col-2, .flex.container .col-3, .flex.container .col-4, .flex.container .col-5, .flex.container .col-6, .flex.container .col-7, .flex.container .col-8, .flex.container .col-9, .flex.container .col-10, .flex.container .col-11, .flex.container .col-12 {
    width: 100%;
  }
  .flex.container .left-1, .flex.container .left-2, .flex.container .left-3, .flex.container .left-4, .flex.container .left-5, .flex.container .left-6, .flex.container .left-7, .flex.container .left-8, .flex.container .left-9, .flex.container .left-10, .flex.container .left-11 {
    margin-left: 0;
  }
  .flex.container .right-1, .flex.container .right-2, .flex.container .right-3, .flex.container .right-4, .flex.container .right-5, .flex.container .right-6, .flex.container .right-7, .flex.container .right-8, .flex.container .right-9, .flex.container .right-10, .flex.container .right-11 {
    margin-right: 0;
  }
  .card .flex.container {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }
  a.card {
    display: block;
  }
  a.card .flex.container {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }
  .padded {
    padding: 8px;
  }
  .kinda-padded {
    padding: 60px 8px 60px 8px;
  }
  .super-padded.bleed {
    padding: 60px 0;
  }
  .super-padded {
    padding: 60px 8px 60px 8px;
  }
  .small-padded {
    padding-bottom: 24px;
  }
  .extra-links {
    margin-top: 120px;
    padding-top: 120px;
  }
  .extra-padded {
    padding-top: 48px;
    padding-bottom: 40px;
  }
  .top-padded {
    padding: 72px 24px 32px 24px;
  }
  .background-padded {
    padding: 128px 24px;
  }
}
@media screen and (min-width: 900px) {
  .container {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
  .grid-4.container {
    grid-template-columns: repeat(4, 25%);
  }
  .grid-3.container {
    grid-template-columns: repeat(3, 33%);
  }
  .grid-2.container {
    grid-template-columns: repeat(2, 50%);
  }
  .flex.container {
    width: 90%;
  }
  .flex.container .col-1 {
    width: 8.33%;
  }
  .flex.container .col-2, .flex.container .col-2.nav-grid {
    width: 16.66%;
  }
  .flex.container .col-3, .flex.container .col-3.gridded {
    width: 24.99%;
  }
  .flex.container .col-4 {
    width: 33.32%;
  }
  .flex.container .col-5 {
    width: 41.65%;
  }
  .flex.container .col-6 {
    width: 49.98%;
  }
  .flex.container .col-7 {
    width: 58.31%;
  }
  .flex.container .col-8 {
    width: 66.64%;
  }
  .flex.container .col-9 {
    width: 74.97%;
  }
  .flex.container .col-10 {
    width: 83.3%;
  }
  .flex.container .col-11 {
    width: 91.63%;
  }
  .flex.container .col-12 {
    width: 99.96%;
  }
  .flex.container .left-1 {
    margin-left: 8.33%;
  }
  .flex.container .left-2 {
    margin-left: 16.66%;
  }
  .flex.container .left-3 {
    margin-left: 24.99%;
  }
  .flex.container .left-4 {
    margin-left: 33.32%;
  }
  .flex.container .left-5 {
    margin-left: 41.65%;
  }
  .flex.container .left-6 {
    margin-left: 49.98%;
  }
  .flex.container .left-7 {
    margin-left: 58.31%;
  }
  .flex.container .left-8 {
    margin-left: 66.64%;
  }
  .flex.container .left-9 {
    margin-left: 74.97%;
  }
  .flex.container .left-10 {
    margin-left: 83.3%;
  }
  .flex.container .left-11 {
    margin-left: 91.63%;
  }
  .flex.container .right-1 {
    margin-right: 8.33%;
  }
  .flex.container .right-2 {
    margin-right: 16.66%;
  }
  .flex.container .right-3 {
    margin-right: 24.99%;
  }
  .flex.container .right-4 {
    margin-right: 33.32%;
  }
  .flex.container .right-5 {
    margin-right: 41.65%;
  }
  .flex.container .right-6 {
    margin-right: 49.98%;
  }
  .flex.container .right-7 {
    margin-right: 58.31%;
  }
  .flex.container .right-8 {
    margin-right: 66.64%;
  }
  .flex.container .right-9 {
    margin-right: 74.97%;
  }
  .flex.container .right-10 {
    margin-right: 83.3%;
  }
  .flex.container .right-11 {
    margin-right: 91.63%;
  }
  .super-padded.bleed {
    padding: 120px 0;
  }
  .super-padded {
    padding: 120px 8px 120px 8px;
  }
  .small-padded {
    padding-bottom: 0;
  }
  .flex.container.v-center {
    margin-left: auto;
    margin-right: auto;
  }
}
html, body {
  height: 100%;
}

#footer {
  padding: 40px 0;
  background-color: #000014;
}
#footer p, #footer a {
  color: #FFFFFF;
}
#footer a:hover {
  color: #FFCFC0;
}

p, ul, li, h1, h2, h3, h4, body, .name, .title, .chapter-title, .subtitle, .breadcrumb, .nav-link, .subnav-link, a.arrow-text, a.arrow, .site-intro, .description, figcaption {
  margin: 0;
  margin-bottom: 10px;
  padding: 0;
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.serif {
  margin: 0;
  margin-bottom: 10px;
  padding: 0;
  font-family: Georgia, Times, serif;
}

.extra-large, .large, .description, .caption, .case-intro, .summary, .first-line, .second-line, .super-large {
  font-weight: 300;
}

.nav-link, .bold {
  font-weight: 700;
}

p {
  font-size: 16px;
  line-height: 30px;
}

ul, li {
  list-style-type: none;
}

a {
  text-decoration: none;
}

a.underline {
  text-decoration: underline;
}

.italic {
  font-style: italic;
}

.nav-link, .nav-button {
  font-style: normal;
  font-size: 0.9em;
}

h1, h2, h3, h4, p {
  margin-top: 0;
}

.small {
  font-size: 14px;
  line-height: 20px;
}

.large {
  font-size: 18px;
  line-height: 30px;
}

.extra-large {
  font-size: 28px;
  line-height: 36px;
}

.super-large {
  font-size: 46px;
}

.center {
  text-align: center;
}

.tight {
  padding-bottom: 0;
  margin-bottom: -10px;
}

.quote {
  font-size: 36px;
  line-height: 42px;
}

.author {
  padding-top: 12px;
}

.small-title {
  padding-bottom: 20px;
}

a {
  color: #000014;
}

a.primary, .primary {
  color: #D34F05;
}

a.primary:hover {
  color: #EA611C;
}

p.gray {
  color: #595966;
}

a.social-link {
  padding-right: 24px;
}

body {
  background-color: #000014;
}

.card {
  background-color: #FFFFFF;
  padding: 24px;
  color: #000014;
  border-radius: 4px;
  box-shadow: 0px 3px 12px rgba(31, 31, 58, 0.15);
  transition-duration: 0.25s;
}

.thumb {
  box-shadow: 0px 3px 12px rgba(31, 31, 58, 0.15);
  border-radius: 4px;
  transition-duration: 0.25s;
}

.bleed.offset {
  margin-top: -240px;
  padding-top: 240px;
  padding-bottom: 300px;
}

.container.small-offset {
  margin-top: -100px;
}

.container.offset {
  margin-top: -200px;
}

.line {
  border-bottom: 1px solid #A3A4B1;
}

.leave::after {
  content: url("/img/icon_leave.svg");
  width: 14px;
  height: 16px;
  padding-left: 20px;
}

.download::after {
  content: url("/img/icon_download.svg");
  width: 14px;
  height: 16px;
  float: right;
}

@media screen and (min-width: 320px) {
  #content {
    position: relative;
  }
  #site-nav {
    padding-top: 0;
    padding-bottom: 12px;
    text-align: left;
  }
  #site-nav .padded.nav {
    padding-top: 16px;
  }
  .cta {
    text-align: left;
  }
  .logo {
    padding-top: 24px;
    padding-bottom: 0;
  }
  .disappearing {
    height: 640px;
  }
}
@media screen and (min-width: 900px) {
  #content {
    position: relative;
  }
  #site-nav {
    padding-top: 12px;
    padding-bottom: 0;
  }
  .cta {
    text-align: right;
  }
  .logo {
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .disappearing {
    background-image: url("/img/bleed_book.jpg");
    background-position: center top;
    height: 640px;
  }
}
.home #site-nav, .example #site-nav {
  background-color: #D34F05;
}
.home #site-nav a, .example #site-nav a {
  color: #FFFFFF;
}
.home #site-nav a:hover, .example #site-nav a:hover {
  color: #FFCFC0;
}
.home #site-nav a.nav-button, .example #site-nav a.nav-button {
  background-color: #FFFFFF;
  color: #D34F05;
  transition-duration: 0.5s;
}
.home #site-nav a.nav-button:hover, .example #site-nav a.nav-button:hover {
  background-color: #FFCFC0;
  transition-duration: 0.5s;
}

.home #site-nav .logo {
  display: none;
}

.examples #site-nav {
  background-color: #D2F7FF;
}

.example #site-nav .svg-black {
  fill: #FFFFFF;
}

.logo {
  text-align: left;
}

.sidebox {
  background-color: #000014;
  margin-top: 10px;
  height: 60px;
  width: 15px;
  float: left;
  margin-right: -15px;
}

.sidebox.white {
  background-color: #FFFFFF;
}

a.nav-button {
  padding: 8px 16px;
  font-size: 14px;
  font-weight: bold;
  border-radius: 20px;
  background-color: #EA611C;
  color: #FFFFFF;
  transition-duration: 0.5s;
}

a.nav-button:hover {
  background-color: #D34F05;
  transition-duration: 0.5s;
}

p.primary {
  color: #EA611C;
}

p.primary-dark {
  color: #D34F05;
}

a .card:hover, a.card:hover, .thumb:hover {
  box-shadow: 0px 1px 4px rgba(31, 31, 58, 0.3);
  transition-duration: 0.25s;
}

a.card.primary {
  background-color: #D34F05;
  color: #FFFFFF;
}

.logo {
  text-align: left;
  height: 36px;
}

.nav-link {
  padding-right: 16px;
}

.main {
  background-color: #FFFFFF;
  color: #000014;
}

.image-padding {
  margin: 4px;
}

.extra-top {
  padding-top: 60px;
}

.extra-bottom {
  padding-bottom: 120px;
}

.large a, .bottom-links a {
  color: #000014;
}
.large a:hover, .bottom-links a:hover {
  color: #28323A;
}
.large, .bottom-links {
  padding-bottom: 4px;
}

.description {
  padding-top: 24px;
}

.negative-top {
  z-index: 200;
  position: relative;
}

.svg-white {
  fill: #FFFFFF;
}

.svg-black {
  fill: #000014;
}

.svg-primary {
  fill: #EA611C;
}

.icon {
  width: 32px;
  padding-right: 16px;
  float: left;
}

#content {
  position: relative;
}

.timeline {
  margin-top: 40px;
  margin-bottom: 60px;
}

.breadcrumb {
  padding-top: 40px;
}

.call-to-action::before {
  content: "❯ ";
}

#mc_embed_signup {
  clear: left;
}
#mc_embed_signup input.signup {
  border-radius: 4px;
  border: none;
  padding: 16px;
  font-size: 16px;
  width: 92%;
}
#mc_embed_signup input.submit {
  padding: 16px;
  border-radius: 16px;
  border: none;
  background-color: #D34F05;
}
#mc_embed_signup #mc_embed_signup div.mce_inline_error {
  border-radius: 4px;
}

.linkbox {
  margin-top: 16px;
  border-top: 2px solid #000014;
}

a.arrow, a.nav-link, a.name {
  color: #000014;
}

.bleed.primary-dark {
  background-color: #D34F05;
  color: #FFFFFF;
}
.bleed.primary-dark a {
  color: #FFFFFF;
}
.bleed.primary-dark a:hover {
  color: #FFCFC0;
}

.bleed.primary-pale {
  background-color: #FFCFC0;
}

.bleed.secondary-pale {
  background-color: #D2F7FF;
}

.bleed.gray {
  background-color: #A3A4B1;
}

.bleed.black {
  background-color: #000014;
  color: #FFFFFF;
}
.bleed.black a {
  color: #FFFFFF;
}
.bleed.black a:hover {
  color: #FFCFC0;
}

.white {
  background-color: #FFFFFF;
}