@charset "UTF-8";
html, body, div, span, object, iframe, h1, h2, .blog article h1:not(.title), h3, h4, h5, h6, h6, p, blockquote, pre, a, abbr, address, big, cite, code, em, img, q, s, small, strike, strong, sub, sup, tt, var, b, u, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, details, embed, figure, figcaption, footer, header, nav, output, section, summary, time, mark, audio, video {
  border: 0;
  font: inherit;
  vertical-align: baseline; }

article, aside, details, figcaption, figure, footer, header, 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: none; }

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

* {
  box-sizing: border-box; }

* {
  padding: 0;
  margin: 0; }
  *, *:after, *:before {
    box-sizing: inherit; }

html {
  box-sizing: border-box;
  overflow-y: scroll;
  width: 100%;
  height: 100%;
  min-height: 100%; }

img, embed, object, video {
  max-width: 100%; }

::-moz-selection {
  background: rgba(0, 0, 0, 0.1);
  text-shadow: none; }

::selection {
  background: rgba(0, 0, 0, 0.1);
  text-shadow: none; }

.noselect {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

svg:not(:root) {
  overflow: hidden; }

body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  background: white; }

.overflow-hidden {
  /* when primary navigation is visible, the content in the background won't scroll */
  overflow: hidden; }

.no-margin {
  margin: 0; }

.margin-top {
  margin-top: 4rem; }
  @media screen and (min-width: 768px) {
    .margin-top {
      margin-top: 6rem; } }

.fl-left {
  float: left;
  clear: none; }

.fl-right {
  float: right;
  clear: none; }

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

.hide {
  display: none; }

.reveal {
  -webkit-animation: reveal 500ms ease-in;
          animation: reveal 500ms ease-in; }

.error {
  color: #cc181e;
  font-size: 0.75rem; }

.bg-blue {
  background: rgba(62, 141, 221, 0.7) !important; }

.bg-red {
  background: rgba(253, 79, 87, 0.7) !important; }

.bg-green {
  background: rgba(0, 192, 129, 0.7) !important; }

.bg-purple {
  background: rgba(111, 97, 138, 0.7) !important; }

html {
  font: 300 110%/1.6 "petala-pro", Avenir, Helvetica;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  color: #666666; }

h1, h2, .blog article h1:not(.title), h3, h4, h5, h6, h6 {
  margin: 1rem 0;
  font-style: normal;
  line-height: 1.3; }
  h1 b, h1 span, h2 b, .blog article h1:not(.title) b, h2 span, .blog article h1:not(.title) span, h3 b, h3 span, h4 b, h4 span, h5 b, h6 b, h5 span, h6 span, h6 b, h6 span {
    font-weight: inherit;
    font-style: inherit; }

h1 {
  color: black;
  font-size: 1.5rem; }

h2, .blog article h1:not(.title) {
  color: #222222;
  text-transform: uppercase;
  letter-spacing: .05rem;
  font-size: 1.5rem; }

h3 {
  color: #222222;
  font-size: 1.7rem;
  letter-spacing: 0;
  margin: 2rem 0 1rem 0; }

h4 {
  color: #222222;
  text-transform: uppercase;
  font-weight: 500; }

h5, h6 {
  color: #666666;
  font-weight: 500;
  margin: 1rem 0 0.25rem 0; }

h6 {
  color: #999999; }

a {
  outline: none;
  text-decoration: none;
  word-wrap: break-word;
  transition: color 375ms linear;
  color: #3e8ddd; }
  a:hover, a:focus {
    color: #69a7e5; }
  a:active {
    color: #4e7999; }

b {
  font-weight: bold; }

em {
  font-style: italic; }

ul, ol {
  margin: 0 0 2rem 0; }
  ul li, ol li {
    color: #222222;
    line-height: 1.5;
    margin-bottom: 0.5rem; }

ol {
  display: block;
  list-style-type: decimal;
  color: #222222; }

p {
  margin: 0 0 2rem 0;
  font-size: 1rem;
  line-height: 1.7; }

pre, code {
  font-size: 0.75rem;
  font-family: 'source-code-pro', Monaco, monospace; }

pre {
  overflow: scroll;
  margin-bottom: 2rem;
  padding: 1rem;
  background-color: #222222;
  color: white;
  line-height: 1.5; }

code {
  padding: 0 .25rem;
  background-color: white;
  color: #222222; }

.caps {
  text-transform: uppercase; }

.lower {
  text-transform: lowercase; }

.lt-5 {
  letter-spacing: 5px; }

.lt-2 {
  letter-spacing: 2px; }

.strong {
  font-weight: 400; }

.center {
  text-align: center; }

.left {
  text-align: left; }

.right {
  text-align: right; }

.justify {
  text-align: justify; }

.headline--title {
  font-size: 2.5rem;
  margin-bottom: .5rem; }

.headline--teaser {
  font-size: 1.6rem;
  line-height: 1.15; }
  @media only screen and (min-width: 32.25rem) {
    .headline--teaser {
      font-size: 2.2rem; } }
  .headline--teaser_sm {
    font-size: 1.3rem;
    line-height: 1.15; }
    @media screen and (min-width: \$tablet) {
      .headline--teaser_sm {
        font-size: 1.8rem; } }

.headline--sub {
  font-size: 1rem; }
  .headline--sub span {
    padding: 0 0.25rem; }

.topic {
  display: block;
  font-size: 1.8rem;
  text-transform: uppercase;
  width: 90%;
  margin: 0 5% 3.0rem 5%; }
  @media screen and (min-width: 768px) {
    .topic {
      font-size: 2rem;
      width: 80%;
      margin: 0 10% 4.5rem 10%; } }

.btn {
  padding: 0.5rem 1.5rem;
  font-size: 1rem;
  color: #222222;
  border: 1px solid rgba(0, 0, 0, 0.2);
  letter-spacing: 0.1rem;
  display: inline-block;
  text-transform: uppercase; }
  .btn:hover, .btn:focus {
    text-decoration: none;
    color: #fff;
    background: #222222;
    border: 1px solid #222222; }
  @media only screen and (min-width: 32.25rem) {
    .btn {
      font-size: 1rem;
      padding: 0.65rem 2rem 0.75rem 2rem;
      letter-spacing: 0.2rem; } }

.btn.small {
  font-size: 0.85rem;
  padding: 0.35rem 1rem 0.5rem 1rem; }

.btn.reversed {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2); }

.btn.reversed:hover {
  color: #222222;
  background: #fff; }

.svg-icon {
  width: 1.25rem;
  height: 1.25rem; }
  @media screen and (min-width: 768px) {
    .svg-icon {
      width: 1.15rem;
      height: 1.15rem; } }

.form {
  margin-bottom: 3rem; }
  .form h3 {
    text-align: center;
    margin: 5rem 0; }
  .form p {
    margin-bottom: 1rem; }
  @media screen and (min-width: 768px) {
    .form p {
      margin-left: 0;
      width: 100%; } }
  .form .req {
    color: #999999;
    text-transform: uppercase;
    font-size: 0.85rem; }
  .form form {
    clear: both; }

.container {
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
  overflow: visible;
  padding: 0 1rem; }
  .container:before {
    content: "";
    clear: both;
    display: table; }
  .container:after {
    content: "";
    clear: both;
    display: table; }
  @media screen and (min-width: 1025px) {
    .container {
      padding: 0 2rem; } }
  .container--none {
    max-width: 68rem;
    margin: 0 auto; }
    .container--none:before {
      content: "";
      clear: both;
      display: table; }
    .container--none:after {
      content: "";
      clear: both;
      display: table; }
  .container--full {
    max-width: 68rem;
    width: 95%;
    margin: 0 auto;
    overflow: visible;
    padding: 0 1rem; }
    @media only screen and (min-width: 49rem) {
      .container--full {
        padding: 0 2rem; } }
    .container--full:before {
      content: "";
      clear: both;
      display: table; }
    .container--full:after {
      content: "";
      clear: both;
      display: table; }
  .container--sm {
    max-width: 51rem;
    width: 95%;
    margin: 0 auto; }
    .container--sm:after {
      content: "";
      clear: both;
      display: table; }
  .container--narrow {
    max-width: 34rem;
    width: 95%;
    margin: 0 auto; }
    .container--narrow:after {
      content: "";
      clear: both;
      display: table; }

.v-center {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center; }
  .v-center_offset {
    margin-top: 25%; }
    .v-center_offset-lg {
      margin-top: 75%; }

.content {
  margin-top: 3.5rem; }

.row {
  width: 100%;
  padding: 2.5rem 0; }
  @media screen and (min-width: 768px) {
    .row {
      padding: 5rem 0; } }
  .row h4, .row h5, .row h6 {
    font-size: 2.0rem;
    letter-spacing: 1px;
    color: #999;
    margin: 0 0 2rem 0;
    font-weight: 300; }
  .row h5, .row h6 {
    font-size: 1.2rem;
    letter-spacing: 1px; }
  .row p {
    font-size: 1.1rem; }

.vhflex {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  min-height: 100vh;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between; }
  .vhflex footer {
    width: 100%;
    min-height: 400px; }
    @media screen and (min-width: 768px) {
      .vhflex footer {
        min-height: 100px; } }

.thanks {
  width: 100%;
  min-height: 300px; }
  .thanks p {
    margin-bottom: 0; }
  .thanks .container {
    padding-top: 140px; }

.flex {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center; }

.span-1-12 {
  float: none;
  width: 100%; }
  @media only screen and (min-width: 32.25rem) {
    .span-1-12 {
      float: left;
      width: 6.5%;
      margin-right: 2%; }
      .span-1-12:last-child {
        margin-right: 0; } }

.span-2-12 {
  float: none;
  width: 100%; }
  @media only screen and (min-width: 32.25rem) {
    .span-2-12 {
      float: left;
      width: 15%;
      margin-right: 2%; }
      .span-2-12:last-child {
        margin-right: 0; } }

.span-3-12 {
  float: none;
  width: 100%; }
  @media only screen and (min-width: 32.25rem) {
    .span-3-12 {
      float: left;
      width: 23.5%;
      margin-right: 2%; }
      .span-3-12:last-child {
        margin-right: 0; } }

.span-4-12 {
  float: none;
  width: 100%; }
  @media only screen and (min-width: 32.25rem) {
    .span-4-12 {
      float: left;
      width: 32%;
      margin-right: 2%; }
      .span-4-12:last-child {
        margin-right: 0; } }

.span-5-12 {
  float: none;
  width: 100%; }
  @media only screen and (min-width: 32.25rem) {
    .span-5-12 {
      float: left;
      width: 40.5%;
      margin-right: 2%; }
      .span-5-12:last-child {
        margin-right: 0; } }

.span-6-12 {
  float: none;
  width: 100%; }
  @media only screen and (min-width: 32.25rem) {
    .span-6-12 {
      float: left;
      width: 49%;
      margin-right: 2%; }
      .span-6-12:last-child {
        margin-right: 0; } }

.span-7-12 {
  float: none;
  width: 100%; }
  @media only screen and (min-width: 32.25rem) {
    .span-7-12 {
      float: left;
      width: 57.5%;
      margin-right: 2%; }
      .span-7-12:last-child {
        margin-right: 0; } }

.span-8-12 {
  float: none;
  width: 100%; }
  @media only screen and (min-width: 32.25rem) {
    .span-8-12 {
      float: left;
      width: 66%;
      margin-right: 2%; }
      .span-8-12:last-child {
        margin-right: 0; } }

.span-9-12 {
  float: none;
  width: 100%; }
  @media only screen and (min-width: 32.25rem) {
    .span-9-12 {
      float: left;
      width: 74.5%;
      margin-right: 2%; }
      .span-9-12:last-child {
        margin-right: 0; } }

.span-10-12 {
  float: none;
  width: 100%; }
  @media only screen and (min-width: 32.25rem) {
    .span-10-12 {
      float: left;
      width: 83%;
      margin-right: 2%; }
      .span-10-12:last-child {
        margin-right: 0; } }

.span-11-12 {
  float: none;
  width: 100%; }
  @media only screen and (min-width: 32.25rem) {
    .span-11-12 {
      float: left;
      width: 91.5%;
      margin-right: 2%; }
      .span-11-12:last-child {
        margin-right: 0; } }

.span-12-12 {
  float: none;
  width: 100%; }
  @media only screen and (min-width: 32.25rem) {
    .span-12-12 {
      float: left;
      width: 100%; } }

.columns-2 {
  -webkit-columns: 2 13rem;
     -moz-columns: 2 13rem;
          columns: 2 13rem;
  -webkit-column-gap: 2rem;
     -moz-column-gap: 2rem;
          column-gap: 2rem; }

.columns-3 {
  -webkit-columns: 3 13rem;
     -moz-columns: 3 13rem;
          columns: 3 13rem;
  -webkit-column-gap: 2rem;
     -moz-column-gap: 2rem;
          column-gap: 2rem; }

.animated {
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both; }

.infinite {
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite; }

@-webkit-keyframes flyInToLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, -50%, 0);
            transform: translate3d(100%, -50%, 0); }
  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none; } }

@keyframes flyInToLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, -50%, 0);
            transform: translate3d(100%, -50%, 0); }
  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none; } }

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0); }
  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none; } }

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0); }
  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none; } }

@-webkit-keyframes fadeOutUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0); }
  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none; } }

@keyframes fadeOutUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0); }
  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none; } }

@keyframes fadeOutUp {
  0% {
    opacity: 1;
    -webkit-transform: translate3d(0, 50%, 0);
            transform: translate3d(0, 50%, 0); }
  100% {
    opacity: 0;
    -webkit-transform: none;
            transform: none; } }

@-webkit-keyframes fadeFromRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(85%, 0, 0);
            transform: translate3d(85%, 0, 0); }
  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none; } }

@keyframes fadeFromRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(85%, 0, 0);
            transform: translate3d(85%, 0, 0); }
  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none; } }

@-webkit-keyframes fadeFromLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-85%, 0, 0);
            transform: translate3d(-85%, 0, 0); }
  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none; } }

@keyframes fadeFromLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-85%, 0, 0);
            transform: translate3d(-85%, 0, 0); }
  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none; } }

@-webkit-keyframes fly {
  0% { }
  50% {
    opacity: 0.8; }
  99% {
    -webkit-transform: translateX(350px) translateY(-220px) rotate(12deg) scaleY(0.4) scaleX(0.6);
            transform: translateX(350px) translateY(-220px) rotate(12deg) scaleY(0.4) scaleX(0.6);
    opacity: 0; } }

@keyframes fly {
  0% { }
  50% {
    opacity: 0.8; }
  99% {
    -webkit-transform: translateX(350px) translateY(-220px) rotate(12deg) scaleY(0.4) scaleX(0.6);
            transform: translateX(350px) translateY(-220px) rotate(12deg) scaleY(0.4) scaleX(0.6);
    opacity: 0; } }

@-webkit-keyframes reveal {
  0% {
    opacity: 0; }
  1% {
    opacity: 0;
    -webkit-transform: scale(0.98);
            transform: scale(0.98); }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1); } }

@keyframes reveal {
  0% {
    opacity: 0; }
  1% {
    opacity: 0;
    -webkit-transform: scale(0.98);
            transform: scale(0.98); }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1); } }

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 20%, 0);
            transform: translate3d(0, 20%, 0); }
  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none; } }

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 20%, 0);
            transform: translate3d(0, 20%, 0); }
  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none; } }

.flyInToLeft {
  -webkit-animation-name: flyInToLeft;
          animation-name: flyInToLeft; }

.fadeInDown {
  -webkit-animation-name: fadeInDown;
          animation-name: fadeInDown; }

.fadeFromRight {
  -webkit-animation-name: fadeFromRight;
          animation-name: fadeFromRight; }

.fadeFromLeft {
  -webkit-animation-name: fadeFromLeft;
          animation-name: fadeFromLeft; }

.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
          animation-name: fadeOutUp; }

.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
          animation-name: fadeOutUp; }

.fadeIn {
  -webkit-animation-name: fadeIn;
          animation-name: fadeIn; }

.fadeInUp {
  -webkit-animation-name: fadeInUp;
          animation-name: fadeInUp; }

.mobile {
  display: inline; }
  @media screen and (min-width: 768px) {
    .mobile {
      display: none; } }

.tablet {
  display: none; }
  @media screen and (min-width: 768px) {
    .tablet {
      display: inline; } }
  @media screen and (min-width: 1025px) {
    .tablet {
      display: none; } }

.tablet-desktop {
  display: none; }
  @media screen and (min-width: 768px) {
    .tablet-desktop {
      display: inline; } }

.desktop {
  display: none; }
  @media screen and (min-width: 1025px) {
    .desktop {
      display: inline; } }

#contact .container {
  background: white;
  margin-top: 3rem;
  padding-bottom: 2rem; }

.field-style {
  display: block;
  width: 100%;
  outline: none;
  border: none;
  background-color: #ececec;
  padding: 1rem 1.35rem;
  font: 300 1rem "petala-pro", Avenir, Helvetica;
  margin-bottom: 0.75rem;
  color: #222222;
  border-radius: none;
  transition: 0.2s;
  border: 1px solid transparent;
  -webkit-appearance: none; }
  @media screen and (min-width: 768px) {
    .field-style {
      margin-bottom: 1rem; } }
  .field-style:focus {
    border: 1px solid #3e8ddd; }

.trigger {
  cursor: pointer;
  position: relative;
  margin-bottom: 0; }
  .trigger.is-active {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0; }

.trigger-arrow {
  position: absolute;
  top: 0;
  right: .25rem;
  width: 2.5rem;
  height: 2.5rem; }
  .trigger-arrow svg {
    position: absolute;
    top: 50%;
    display: block;
    margin-top: -.25rem;
    width: 100%;
    height: .5rem; }

.inquiry-options {
  transition: all 0.25s ease;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  margin: 0;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
  -webkit-transform: scale(0.95);
          transform: scale(0.95);
  -webkit-transform-origin: top;
          transform-origin: top;
  pointer-events: none; }
  .inquiry-options.is-open {
    pointer-events: auto;
    -webkit-transform: none;
            transform: none;
    max-height: 100rem;
    opacity: 1;
    margin-bottom: 1rem; }
  .inquiry-options li {
    margin: 0 0 0.5rem 0; }

.inquiry-options__item {
  color: white;
  cursor: pointer;
  text-transform: uppercase; }
  .inquiry-options__item input {
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none; }
  .inquiry-options__item input:checked + span {
    color: #4e7999; }

.inquiry-options__item:hover {
  color: #3e8ddd; }

textarea {
  height: 7rem;
  resize: vertical; }

.submit {
  position: relative;
  margin: 0;
  padding: 1.25rem;
  width: 100%;
  margin: 3rem 0;
  outline: none;
  border: none;
  border: 1px solid transparent;
  border-radius: none;
  background: #3e8ddd;
  cursor: pointer;
  transition: .2s;
  font-family: "petala-pro", Avenir, Helvetica;
  font-weight: 300;
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.5); }
  .submit:hover, .submit:active, .submit:focus {
    color: white;
    background: #3e8ddd;
    border: 1px solid #3e8ddd; }
    .submit:hover svg path, .submit:active svg path, .submit:focus svg path {
      stroke: #3e8ddd; }

.fly-away {
  transition: 0.5s;
  border: 1px solid transparent !important; }
  .fly-away svg {
    -webkit-animation: fly 1.75s;
            animation: fly 1.75s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out; }

::-webkit-input-placeholder,
.replace {
  color: #b3b3b3; }

::-moz-placeholder,
.replace {
  color: #b3b3b3; }

:-ms-input-placeholder,
.replace {
  color: #b3b3b3; }

::placeholder,
.replace {
  color: #b3b3b3; }

.darken {
  color: #222222; }

.selected {
  color: white !important; }

.trigger-arrow.selected {
  display: none; }

.scroll-down {
  display: block;
  position: absolute;
  z-index: 10;
  bottom: 2.0rem;
  left: 50%;
  margin-left: -15px; }
  .scroll-down:hover {
    opacity: 1.0;
    filter: alpha(opacity=100); }
  @media screen and (min-width: 768px) {
    .scroll-down {
      margin-left: -19px; } }
  .scroll-down a {
    display: block;
    clear: both;
    margin: 0 auto;
    width: 28px;
    color: #999; }
    @media screen and (min-width: 768px) {
      .scroll-down a {
        width: 32px; } }
    .scroll-down a svg {
      opacity: 0.5; }
    .scroll-down a svg:hover {
      opacity: 1.0; }

.first-scroll {
  margin-top: 10rem;
  margin-bottom: -10rem; }

p.sub {
  font-size: 1.2rem; }
  p.sub span {
    padding: 0 0.5rem; }

.gradient {
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC43Ii8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
  /* FF3.6+ */
  /* Chrome,Safari4+ */
  /* Chrome10+,Safari5.1+ */
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, transparent 0%, transparent 0%, rgba(0, 0, 0, 0.85) 100%);
  /* IE10+ */
  background: linear, to bottom, transparent 0%, transparent 70%, rgba(0, 0, 0, 0.85) 100%;
  /* W3C */ }

.brb img {
  width: 13rem;
  height: auto; }
  @media screen and (min-width: 768px) {
    .brb img {
      width: 16rem; } }

.brb h3 {
  color: #222222 !important;
  font-size: 1.3rem;
  line-height: 1.3;
  letter-spacing: 2px; }
  @media screen and (min-width: 768px) {
    .brb h3 {
      font-size: 1.5rem;
      line-height: 1.4; } }

.product {
  position: relative; }
  .product--wrapper {
    background: none;
    height: auto;
    position: absolute;
    bottom: 0;
    padding: 0 1rem; }
  .product--figure {
    background: none;
    width: auto;
    height: auto; }
    .product--figure img {
      width: auto;
      height: 100%;
      overflow: hidden; }
  .product--title {
    color: #fff;
    font-size: 1.6rem;
    font-weight: 300; }
    @media screen and (min-width: 1025px) {
      .product--title {
        font-size: 2.0rem; } }
  .product--cat {
    color: rgba(245, 245, 245, 0.7); }
    @media screen and (min-width: 768px) {
      .product--cat {
        font-size: 0.9rem; } }
    @media screen and (min-width: 1025px) {
      .product--cat {
        font-size: 1.0rem; } }
  .product--description {
    text-align: left;
    line-height: 1.5;
    font-size: .875rem;
    color: rgba(245, 245, 245, 0.7); }
    @media screen and (min-width: 768px) {
      .product--description {
        font-size: 1.0rem; } }
    @media screen and (min-width: 1025px) {
      .product--description {
        font-size: 1.1rem; } }

.card {
  display: inline-block;
  background: #fff;
  position: relative;
  float: left;
  clear: none;
  padding: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.075);
  margin-bottom: 1.375rem;
  width: 100%; }
  @media screen and (min-width: 768px) {
    .card {
      margin: 1rem 1.5%;
      width: 30%; } }
  .card--ib {
    margin: 1rem auto; }
    @media screen and (min-width: 480px) and (orientation: landscape) {
      .card--ib {
        margin: 1rem 1.5%;
        max-width: 20rem; } }
  .card figure {
    background: #fff;
    width: 100%;
    height: 9rem;
    overflow: hidden; }
    @media screen and (min-width: 480px) and (orientation: landscape) {
      .card figure {
        height: 14rem; } }
    @media screen and (min-width: 768px) {
      .card figure {
        height: 11rem; } }
    @media screen and (min-width: 1025px) {
      .card figure {
        height: 14rem; } }
    .card figure img {
      width: 100%;
      height: auto;
      overflow: hidden;
      min-width: 100%;
      max-width: 200%; }
      @media screen and (min-width: 768px) {
        .card figure img {
          width: auto;
          height: 100%; } }
  .card article {
    text-align: left;
    width: 100% !important;
    line-height: 1.6;
    height: 7.5rem;
    padding: 1rem;
    overflow: hidden; }
    @media screen and (min-width: 1025px) {
      .card article {
        padding: 1rem 1.5rem; } }
  .card a .slug {
    margin: 0;
    font-size: 0.9rem;
    color: #999; }
    @media screen and (min-width: 1025px) {
      .card a .slug {
        font-size: 1.0rem; } }
  .card a .sub {
    font-size: 0.9rem;
    color: #5B5B5B;
    font-weight: 400; }
  .card a .link {
    font-size: 0.9rem;
    color: #aaa;
    margin-top: 0.4rem;
    display: block; }
    @media screen and (min-width: 768px) {
      .card a .link {
        display: none; } }
    @media screen and (min-width: 1025px) {
      .card a .link {
        display: block; } }
  .card a h4 {
    font-weight: 300;
    font-size: 1.2rem;
    line-height: 1.15;
    letter-spacing: 0.025rem;
    margin: 0;
    color: #5B5B5B;
    text-align: left; }
    @media screen and (min-width: 1025px) {
      .card a h4 {
        font-size: 1.4rem; } }
  .card a:hover h4, .card a:hover .link {
    color: #3e8ddd; }
  .card:hover {
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1); }

.panes {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
  color: white;
  z-index: 0; }
  .panes--overlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7); }
  .panes--content {
    padding: 1rem;
    display: inline-block;
    max-width: 51rem;
    margin-left: auto;
    margin-right: auto;
    z-index: 2; }
  .panes--title {
    margin-bottom: 1rem; }
  .panes--tint {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6); }
  .panes h3 {
    color: inherit; }
  .panes .btn {
    color: white;
    border-color: rgba(255, 255, 255, 0.7); }

.three-col {
  display: inline-block;
  width: 100%;
  position: relative;
  float: left;
  clear: both;
  margin: 1rem auto;
  padding: 0; }
  @media screen and (min-width: 480px) and (orientation: landscape) {
    .three-col {
      width: 80%;
      margin: 0 10% 1rem 10%;
      clear: none; } }
  @media screen and (min-width: 768px) {
    .three-col {
      width: 80%;
      margin: 0 10% 1rem 10%; } }
  @media screen and (min-width: 1025px) {
    .three-col {
      width: 29%;
      margin: 1rem 2%; } }
  .three-col p {
    font-size: 1.1rem;
    text-align: left; }

.two-up {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  min-height: 220px;
  padding: 6% 8%;
  text-align: center; }
  @media screen and (min-width: 768px) {
    .two-up {
      width: 50%;
      height: 26rem;
      padding: 6% 8% 0 8%;
      text-align: left; } }
  @media screen and (min-width: 1025px) {
    .two-up {
      height: 50vh; } }
  .two-up .wrapper {
    position: relative; }
  .two-up h3 {
    margin-bottom: 2rem;
    font-size: 1.3rem;
    line-height: 1.3; }
    @media screen and (min-width: 768px) {
      .two-up h3 {
        font-size: 1.7rem; } }

.promo-writing {
  background: url("../images/bg-notebook.jpg") center center no-repeat;
  background-size: cover; }
  .promo-writing h3 {
    color: #fff; }
  .promo-writing .tint {
    background: rgba(0, 0, 0, 0.7); }

.promo-contact {
  background: url("../images/fpo/bg-stylus.jpg") center center no-repeat;
  background-size: cover; }
  .promo-contact h3 {
    color: #fff; }
  .promo-contact .tint {
    background: rgba(0, 0, 0, 0.7); }

.hero {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover; }

.tint {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6); }

.hero-feature {
  width: 100%;
  height: 90%;
  position: relative; }
  @media screen and (min-width: 768px) {
    .hero-feature {
      height: 80%; } }
  .hero-feature .container {
    z-index: 100;
    position: relative;
    width: 100%;
    height: 100%; }
  .hero-feature .container.slide {
    z-index: 100;
    position: relative;
    top: 45%;
    -webkit-transform: translateY(-45%);
    transform: translateY(-45%); }
    .hero-feature .container.slide p {
      color: #fff;
      font-size: 1.7rem;
      padding-top: 60%;
      line-height: 1.2; }
      @media screen and (min-width: 768px) {
        .hero-feature .container.slide p {
          font-size: 2.0rem;
          padding-top: 30%;
          width: 80%;
          margin: 0 10%; } }
      @media screen and (min-width: 1025px) {
        .hero-feature .container.slide p {
          width: 100%;
          margin: 0;
          padding-top: 25%; } }

.tint {
  background: rgba(0, 0, 0, 0.5); }

.company .hero-feature, .labs .hero-feature {
  overflow: hidden; }

.company .hero-feature .tint, .labs .hero-feature .tint {
  background: rgba(0, 0, 0, 0.5); }

.panes {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
  color: white;
  z-index: 0; }
  .panes--overlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7); }
  .panes--content {
    padding: 1rem;
    display: inline-block;
    max-width: 51rem;
    margin-left: auto;
    margin-right: auto;
    z-index: 2; }
  .panes--title {
    margin-bottom: 1rem; }
  .panes--tint {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6); }
  .panes h3 {
    color: inherit; }
  .panes .btn {
    color: white;
    border-color: rgba(255, 255, 255, 0.7); }

.fw-map {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%; }
  .fw-map .btn {
    cursor: pointer;
    border-color: rgba(255, 255, 255, 0.5); }
    .fw-map .btn:hover {
      background: #3e8ddd; }
  .fw-map h2, .fw-map .blog article h1:not(.title), .blog article .fw-map h1:not(.title), .fw-map p, .fw-map .btn {
    color: #fff; }

.client-logos ul {
  margin: 0;
  padding: 0; }
  .client-logos ul li {
    display: inline-block;
    width: 40%;
    height: 1rem;
    margin: 1rem 4% 2rem 4%;
    padding: 0;
    background: none;
    opacity: 0.5; }
    @media screen and (min-width: 768px) {
      .client-logos ul li {
        width: 16%;
        height: 3rem;
        margin: 3rem 4% 3rem 4%; } }

.client-logos hr {
  border: none; }
  @media screen and (min-width: 768px) {
    .client-logos hr {
      border-bottom: 1px solid #ddd; } }

.site--header {
  display: block;
  position: absolute;
  top: 0;
  bottom: auto;
  z-index: 100;
  width: 100%;
  height: 3.5rem;
  background: white; }
  @media screen and (min-width: 768px) {
    .site--header {
      position: relative;
      height: 5rem; } }
  @media screen and (min-width: 1025px) {
    .site--header {
      top: 0;
      height: 7rem; } }
  .site--header_logo {
    display: block;
    margin: 0.25rem 0 0 0;
    float: left;
    clear: none;
    position: absolute;
    left: 0;
    width: 13rem;
    background-position: center center;
    background-repeat: no-repeat;
    background-image: url("../images/bpxl-logo-wordmark.svg");
    -webkit-animation: none;
    animation: none; }
    .site--header_logo:before {
      display: block;
      padding-top: 16.957%;
      content: ''; }
    @media screen and (min-width: 768px) {
      .site--header_logo {
        left: auto;
        width: 13rem;
        margin: 1.25rem 0 0 -3.0rem;
        background-image: url("../images/bpxl-logo-vertical.svg"); } }
    @media screen and (min-width: 1025px) {
      .site--header_logo {
        width: 14rem;
        margin: 2.3rem 0 0 -3rem; } }
  .site--header .mobile-menu {
    background: rgba(34, 34, 34, 0.98);
    position: fixed;
    z-index: 800;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: scroll;
    /* this fixes the buggy scrolling on webkit browsers - mobile devices only - when overflow property is applied */
    -webkit-overflow-scrolling: touch;
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
    transition-duration: 0.4s; }
    @media screen and (min-width: 768px) {
      .site--header .mobile-menu {
        display: none !important; } }
    .site--header .mobile-menu nav.mobile-nav {
      margin: 0;
      text-align: left;
      padding-top: 0; }
      .site--header .mobile-menu nav.mobile-nav ul {
        list-style: none;
        margin: 4rem 0 0 0;
        padding: 0; }
        @media screen and (min-width: 480px) and (orientation: landscape) {
          .site--header .mobile-menu nav.mobile-nav ul {
            margin: 1.0rem 0 0 0; } }
        @media screen and (min-width: 768px) {
          .site--header .mobile-menu nav.mobile-nav ul {
            margin: 0.85rem 0 0 0; } }
        @media screen and (min-width: 1025px) {
          .site--header .mobile-menu nav.mobile-nav ul {
            margin: 1.2rem 0 0 0; } }
        .site--header .mobile-menu nav.mobile-nav ul li {
          display: block;
          text-transform: uppercase;
          font-size: 1.3rem;
          margin: 0 0 1.0rem 1.2rem;
          padding: 0;
          letter-spacing: 0.1rem; }
          @media screen and (min-width: 480px) and (orientation: landscape) {
            .site--header .mobile-menu nav.mobile-nav ul li {
              margin: 0 0 0.5rem 1.2rem; } }
          @media screen and (min-width: 768px) {
            .site--header .mobile-menu nav.mobile-nav ul li {
              display: inline-block;
              font-size: 0.85rem;
              margin: 0rem 0 0 1.2rem; } }
          @media screen and (min-width: 1025px) {
            .site--header .mobile-menu nav.mobile-nav ul li {
              font-size: 0.9rem;
              margin: 0rem 0 0 1.5rem; } }
          .site--header .mobile-menu nav.mobile-nav ul li a, .site--header .mobile-menu nav.mobile-nav ul li a:visited {
            display: block;
            text-decoration: none;
            border-bottom: none;
            padding: 0;
            color: #fff; }
            @media screen and (min-width: 768px) {
              .site--header .mobile-menu nav.mobile-nav ul li a, .site--header .mobile-menu nav.mobile-nav ul li a:visited {
                color: #000; } }
          .site--header .mobile-menu nav.mobile-nav ul li a:hover {
            text-decoration: none; }
        .site--header .mobile-menu nav.mobile-nav ul li.current a, .site--header .mobile-menu nav.mobile-nav ul li.current a:visited {
          font-weight: 400; }
        .site--header .mobile-menu nav.mobile-nav ul li select {
          padding: 0 10px; }
    .site--header .mobile-menu nav.social-nav {
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      display: block;
      width: 100%;
      margin-top: 1.0rem;
      position: absolute;
      bottom: 0; }
      @media screen and (min-width: 480px) and (orientation: landscape) {
        .site--header .mobile-menu nav.social-nav {
          margin-top: 0; } }
      @media screen and (min-width: 768px) {
        .site--header .mobile-menu nav.social-nav {
          display: none; } }
      .site--header .mobile-menu nav.social-nav ul {
        margin: 0.7rem 0 0 0; }
        @media screen and (min-width: 480px) and (orientation: landscape) {
          .site--header .mobile-menu nav.social-nav ul {
            margin: 0.75rem 0 0 0; } }
        .site--header .mobile-menu nav.social-nav ul li {
          display: inline-block;
          font-size: 1.0rem;
          opacity: 0.3;
          margin: 0 0 0.7rem 1.2rem; }
          .site--header .mobile-menu nav.social-nav ul li a {
            color: white;
            fill: currentColor; }
        .site--header .mobile-menu nav.social-nav ul li:hover {
          opacity: 1.0; }

.mobile-menu.is-visible {
  -webkit-transform: translateY(0);
          transform: translateY(0); }

.cd-header.is-fixed {
  /* when the user scrolls down, we hide the header right above the viewport */
  position: fixed;
  top: -3.0rem;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s; }

.cd-header.is-visible {
  /* if the user changes the scrolling direction, we show the header */
  -webkit-transform: translate3d(0, 100%, 0);
          transform: translate3d(0, 100%, 0); }

.cd-primary-nav-trigger {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1000;
  height: 100%;
  width: 50px; }
  @media screen and (min-width: 768px) {
    .cd-primary-nav-trigger {
      display: none; } }

.cd-primary-nav-trigger .cd-menu-icon {
  /* this span is the central line of the menu icon */
  display: inline-block;
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  width: 22px;
  height: 2px;
  background-color: black;
  transition: background-color 0.3s;
  /* these are the upper and lower lines in the menu icon */ }

.cd-primary-nav-trigger .cd-menu-icon::before, .cd-primary-nav-trigger .cd-menu-icon:after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: black;
  right: 0;
  transition: top .3s, background-color 0s, -webkit-transform .3s;
  transition: transform .3s, top .3s, background-color 0s;
  transition: transform .3s, top .3s, background-color 0s, -webkit-transform .3s; }

.cd-primary-nav-trigger .cd-menu-icon::before {
  top: -7px; }

.cd-primary-nav-trigger .cd-menu-icon::after {
  top: 7px; }

.cd-primary-nav-trigger .cd-menu-icon.is-clicked {
  background-color: rgba(255, 255, 255, 0); }

.cd-primary-nav-trigger .cd-menu-icon.is-clicked::before, .cd-primary-nav-trigger .cd-menu-icon.is-clicked::after {
  background-color: white; }

.cd-primary-nav-trigger .cd-menu-icon.is-clicked::before {
  top: 0;
  -webkit-transform: rotate(135deg);
          transform: rotate(135deg); }

.cd-primary-nav-trigger .cd-menu-icon.is-clicked::after {
  top: 0;
  -webkit-transform: rotate(225deg);
          transform: rotate(225deg); }

.main-nav {
  display: none; }
  @media screen and (min-width: 768px) {
    .main-nav {
      display: block;
      position: relative;
      top: auto;
      left: auto;
      z-index: 110;
      text-align: left;
      padding: 0;
      margin: 0;
      float: none;
      clear: both;
      background: none;
      width: auto;
      height: auto;
      float: right;
      clear: none;
      border: none;
      -webkit-animation: none;
              animation: none; } }
  .main-nav ul {
    list-style: none;
    margin: 2.2rem 0 0 0;
    padding: 0; }
    @media screen and (min-width: 768px) {
      .main-nav ul {
        margin: 1.8rem 0 0 0; } }
    @media screen and (min-width: 1025px) {
      .main-nav ul {
        margin: 2.7rem 0 0 0; } }
    .main-nav ul li {
      display: block;
      font-size: 1.4rem;
      letter-spacing: 0.075rem;
      margin: 0 0 1.0rem 1.2rem;
      padding: 0;
      letter-spacing: 0.05rem; }
      @media screen and (min-width: 768px) {
        .main-nav ul li {
          display: inline-block;
          font-size: 0.75rem;
          font-weight: 400;
          margin: 0rem 0 0 1.2rem; } }
      @media screen and (min-width: 1025px) {
        .main-nav ul li {
          font-size: 0.75rem;
          margin: 0rem 0 0 1.5rem; } }
      .main-nav ul li a, .main-nav ul li a:visited {
        display: block;
        text-decoration: none;
        border-bottom: none;
        padding: 0;
        color: #fff; }
        @media screen and (min-width: 768px) {
          .main-nav ul li a, .main-nav ul li a:visited {
            color: #000; } }
      .main-nav ul li a:hover {
        text-decoration: none;
        color: #3e8ddd; }
    .main-nav ul li.current a, .main-nav ul li.current a:visited {
      font-weight: 600; }
    .main-nav ul li select {
      padding: 0 10px; }

.new--logo {
  display: block;
  margin: 0 auto;
  width: 14rem;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url("../images/bpxl-logo-vertical.svg");
  -webkit-animation: reveal 1s ease-in;
  animation: reveal 1s ease-in; }
  .new--logo:before {
    display: block;
    padding-top: 61.957%;
    content: ''; }
  @media screen and (min-width: 768px) {
    .new--logo {
      width: 24rem;
      background-image: url("../images/bpxl-logo-vertical.svg"); }
      .new--logo:before {
        padding-top: 32.358%; } }
  @media screen and (min-width: 1025px) {
    .new--logo {
      width: 52rem;
      background-image: url("../images/bpxl-logo.svg"); }
      .new--logo:before {
        padding-top: 6.234%; } }

footer {
  padding: 2rem 0 0 0;
  background: #222222;
  color: white;
  font-weight: 400;
  font-size: 0.75rem;
  margin-top: 2rem; }
  @media screen and (min-width: 768px) {
    footer {
      margin-top: 4rem; } }
  @media screen and (min-width: 1025px) {
    footer {
      padding: 3rem 0 1rem 0; } }
  footer .container {
    position: relative; }
  footer .logo {
    display: block;
    margin: -1.0rem auto 1.0rem;
    clear: both;
    width: 10rem;
    height: 2rem;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 10rem;
    background-image: url("../images/bpxl-logo-wordmark-footer.svg");
    -webkit-animation: none;
            animation: none; }
    @media screen and (min-width: 768px) {
      footer .logo {
        margin: -0.75rem 0 0 0;
        float: left;
        clear: none; } }
    @media screen and (min-width: 1025px) {
      footer .logo {
        position: absolute;
        top: 0; } }
  footer nav {
    margin-bottom: 2rem; }
  footer nav li {
    margin: 0 .5rem .4rem .5rem;
    text-align: center;
    display: inline; }
    footer nav li a {
      color: white;
      fill: currentColor;
      opacity: 0.3; }
      footer nav li a:hover {
        color: #3e8ddd;
        opacity: 1.0; }
      footer nav li a:active {
        color: white;
        opacity: 1.0; }
    @media screen and (min-width: 768px) {
      footer nav li {
        text-align: left;
        margin: 0 0.75rem 0.4rem 0; } }
  footer .footer-nav {
    display: inline-block;
    float: none;
    text-align: center;
    margin: 0 auto; }
    @media screen and (min-width: 768px) {
      footer .footer-nav {
        float: right; } }
    @media screen and (min-width: 1025px) {
      footer .footer-nav {
        float: none; } }
    footer .footer-nav li {
      margin: 0 0.5rem 0.5rem 0.5rem;
      line-height: 2.0rem;
      letter-spacing: 0.075rem; }
      @media screen and (min-width: 768px) {
        footer .footer-nav li {
          margin: 0 0 0.4rem 1rem;
          line-height: 1.0rem; } }
      @media screen and (min-width: 1025px) {
        footer .footer-nav li {
          margin: 0 1.0rem 0.4rem 1.0rem; } }
  footer .social-nav {
    clear: both;
    margin-top: -1.0rem; }
    @media screen and (min-width: 768px) {
      footer .social-nav {
        float: right !important;
        margin-bottom: 0; } }
    @media screen and (min-width: 1025px) {
      footer .social-nav {
        clear: none;
        position: absolute;
        top: 0;
        right: 0;
        margin-top: 0rem;
        margin-right: 2rem; } }
    @media screen and (min-width: 768px) {
      footer .social-nav ul {
        float: right; } }
    footer .social-nav ul li {
      font-size: 0.9rem;
      margin: 0 0.5rem 0.5rem 0.5rem; }
      @media screen and (min-width: 768px) {
        footer .social-nav ul li {
          margin: 0 0 0.4rem 1.0rem; } }

video {
  display: none; }
  @media screen and (min-width: 1025px) {
    video {
      display: block;
      max-width: none; } }

video#bgvid {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100; }

.accordion .desc, .accordion ol li i:before, .accordion ol li i:after {
  transition: all 0.25s ease-in-out; }

.accordion .no-select {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

.accordion .desc {
  text-align: left;
  position: relative;
  overflow: hidden;
  opacity: 1;
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
  z-index: 2; }

.accordion ol.reqs {
  list-style: none;
  -webkit-perspective: 900;
          perspective: 900;
  padding: 0;
  margin: 0; }

.accordion ol li {
  position: relative;
  margin: 0 0 0 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid #dddddd;
  -webkit-animation: flipdown 0.5s ease both;
          animation: flipdown 0.5s ease both; }

.accordion ol li:nth-of-type(1) {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s; }

.accordion ol li:nth-of-type(2) {
  -webkit-animation-delay: 0.75s;
          animation-delay: 0.75s; }

.accordion ol li:nth-of-type(3) {
  -webkit-animation-delay: 1s;
          animation-delay: 1s; }

.accordion ol li:last-of-type {
  border-bottom: none; }

.accordion ol li i {
  position: absolute;
  -webkit-transform: translate(-6px, 0);
          transform: translate(-6px, 0);
  margin: 0.75rem 0 0 0;
  left: -0.5rem; }
  @media screen and (min-width: 768px) {
    .accordion ol li i {
      left: -1rem; } }

.accordion ol li i:before, .accordion ol li i:after {
  content: "";
  position: absolute;
  background-color: #3e8ddd;
  width: 1px;
  height: 10px; }

.accordion ol li i:before {
  -webkit-transform: translate(-2px, 0) rotate(45deg);
          transform: translate(-2px, 0) rotate(45deg); }

.accordion ol li i:after {
  -webkit-transform: translate(5px, 0) rotate(-45deg);
          transform: translate(5px, 0) rotate(-45deg); }

.accordion ol li input[type=checkbox] {
  position: absolute;
  cursor: pointer;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0; }

.accordion ol li input[type=checkbox]:checked ~ .desc {
  margin-top: 0;
  max-height: 0;
  opacity: 0;
  -webkit-transform: translate(0, 50%);
          transform: translate(0, 50%); }

.accordion ol li input[type=checkbox]:checked ~ i:before {
  -webkit-transform: translate(5px, 0) rotate(45deg);
          transform: translate(5px, 0) rotate(45deg); }

.accordion ol li input[type=checkbox]:checked ~ i:after {
  -webkit-transform: translate(-2px, 0) rotate(-45deg);
          transform: translate(-2px, 0) rotate(-45deg); }

.accordion ul.list {
  list-style: disc; }

.accordion ol ul li {
  padding: 0 0 0.5rem 0;
  border: none;
  margin-left: 1.25rem; }

.post__link {
  color: #222222; }
  .post__link:hover {
    color: #3e8ddd; }

.blog header nav ul li a.blog {
  font-weight: 600; }

.blog footer nav ul li a.blog {
  opacity: 1.0; }

.blog .standard-article {
  margin-top: 5rem; }
  @media screen and (min-width: 1025px) {
    .blog .standard-article {
      margin-top: 6rem; } }

.blog article {
  width: 100%;
  margin: 0 auto;
  max-width: 44rem; }
  @media screen and (min-width: 768px) {
    .blog article {
      width: 88%; } }
  @media screen and (min-width: 1025px) {
    .blog article {
      width: 72%; } }

.blog article ul li {
  position: relative;
  margin-left: 0;
  padding-left: 1.5rem; }
  .blog article ul li:before {
    position: absolute;
    left: 0;
    display: block;
    color: black;
    content: '▪';
    -webkit-font-smoothing: none; }

.blog article ol li {
  margin-left: 0; }

.blog .title {
  font-size: 1.75rem;
  line-height: 1.2;
  letter-spacing: 0.05rem;
  max-width: 90%;
  margin: -1.5rem 5% 1.5rem 5%; }
  @media screen and (min-width: 768px) {
    .blog .title {
      font-size: 2.25rem; } }
  @media screen and (min-width: 1025px) {
    .blog .title {
      font-size: 2.5rem; } }

.blog blockquote {
  margin: 0;
  padding: 0 1rem;
  border-left: 0.3rem solid #eee; }
  @media screen and (min-width: 768px) {
    .blog blockquote {
      margin: 0 1rem; } }

.blog .meta {
  margin: 0 0 3rem 0;
  text-align: center;
  letter-spacing: 2px;
  text-transform: uppercase; }
  .blog .meta span {
    font-weight: 400;
    padding: 0 0.5rem; }
    .blog .meta span a {
      color: #3e8ddd; }
  .blog .meta a,
  .blog .meta a:hover {
    color: inherit;
    cursor: default; }

.blog .meta.top {
  margin-top: 5rem; }

.blog .deck {
  text-align: center;
  font-size: 1.0rem;
  margin-bottom: 3rem;
  padding: 0 0 2rem 0;
  border-bottom: 1px solid #ddd;
  color: #888; }
  @media screen and (min-width: 768px) {
    .blog .deck {
      font-size: 1.15rem;
      padding: 0 2.5rem 2rem 2.5rem; } }

.blog h2, .blog article h1:not(.title) {
  font-size: 1.25rem; }
  @media screen and (min-width: 768px) {
    .blog h2, .blog article h1:not(.title) {
      font-size: 1.5rem; } }

.blog h3 {
  font-size: 1.25rem; }

.blog p {
  text-align: left;
  float: none;
  margin: 0 0 1.5rem 0;
  font-size: 1rem;
  line-height: 1.5;
  width: 100%;
  color: #363640; }

.blog figure.right {
  clear: both;
  margin: 0 0 1rem 0;
  width: 100%;
  height: auto; }
  @media screen and (min-width: 480px) and (orientation: landscape) {
    .blog figure.right {
      float: right;
      clear: none;
      margin: 0 0 2rem 2rem;
      width: 40%; } }

.blog figure.left {
  clear: both;
  margin: 0 0 1rem 0;
  width: 100%;
  height: auto; }
  @media screen and (min-width: 480px) and (orientation: landscape) {
    .blog figure.left {
      float: left;
      clear: none;
      margin: 0 2rem 2rem 0;
      width: 40%; } }

.blog figure.biggest {
  float: left;
  clear: both;
  margin: 2rem 0% 3rem 0%;
  width: 100%;
  max-width: 100%; }
  @media screen and (min-width: 1025px) {
    .blog figure.biggest {
      margin: 2rem -10% 3rem -10%;
      width: 120%;
      max-width: 120%; } }

.blog figure.full {
  float: left;
  clear: both;
  margin: 2rem 0 3rem 0;
  width: 100%;
  max-width: 100%; }
  @media screen and (min-width: 1025px) {
    .blog figure.full {
      margin: 1rem 0 2rem 0;
      width: 100%;
      max-width: 100%; } }

.blog figure.avatar {
  float: none;
  clear: both;
  width: 30%;
  height: 30%;
  margin: 0 auto 1.5rem auto; }
  @media screen and (min-width: 768px) {
    .blog figure.avatar {
      float: left;
      clear: none;
      width: 15%;
      height: 15%;
      margin: 0 1.5rem 2.5rem 0; } }
  @media screen and (min-width: 1025px) {
    .blog figure.avatar {
      width: 10%;
      height: 10%; } }
  .blog figure.avatar img {
    width: 100%;
    height: auto;
    border-radius: 100%; }

.blog figure img {
  width: 100%;
  height: auto; }

.blog figure .caption {
  float: left;
  clear: both;
  padding: 0.5rem 0 0 0;
  font-size: 0.9rem;
  line-height: 1.3;
  text-align: left;
  font-style: italic;
  width: 100%;
  margin: 0 0 1.5rem 0; }

.blog .feature {
  display: block;
  width: 100%;
  position: relative;
  height: 32rem;
  overflow: hidden;
  background: #222222;
  margin: -6rem 0 2rem 0; }
  @media screen and (min-width: 768px) {
    .blog .feature {
      height: 40rem; } }
  @media screen and (min-width: 1025px) {
    .blog .feature {
      height: 75vh;
      margin-bottom: 3.25rem; } }
  .blog .feature img {
    width: auto;
    height: 100%;
    max-width: none;
    min-width: 100%;
    min-height: 100%; }
    @media screen and (min-width: 1025px) {
      .blog .feature img {
        width: 100%;
        height: auto; } }
  .blog .feature .meta {
    margin: 0 0 1.5rem 0;
    text-transform: uppercase; }
    .blog .feature .meta span {
      padding: 0 0.35rem; }
      @media screen and (min-width: 768px) {
        .blog .feature .meta span {
          padding: 0 0.75rem; } }
  .blog .feature .wrapper {
    position: absolute;
    z-index: 3;
    bottom: 0;
    margin: 0;
    width: 92%;
    margin-left: -46%;
    left: 50%;
    top: 50%; }
    @media screen and (min-width: 768px) {
      .blog .feature .wrapper {
        width: 88%;
        margin-left: -44%;
        left: 50%;
        bottom: 1.5rem; } }
    @media screen and (min-width: 1025px) {
      .blog .feature .wrapper {
        width: 72%;
        margin-left: -36%; } }
    .blog .feature .wrapper .deck {
      margin-bottom: 0;
      border-bottom: none; }
    .blog .feature .wrapper .title, .blog .feature .wrapper .meta, .blog .feature .wrapper .deck {
      color: white; }
    .blog .feature .wrapper .title {
      margin-top: 1.5rem; }
    .blog .feature .wrapper .meta span a {
      color: white; }

.blog .author-info {
  display: block;
  border-top: 1px solid #dddddd;
  width: 100%;
  float: left;
  clear: both;
  margin: 2rem 0;
  padding-top: 2rem; }
  .blog .author-info h4 {
    color: #222222;
    font-size: 1.1rem;
    margin: 0 0 0.35rem 0; }
    .blog .author-info h4 .job-title {
      font-weight: 300;
      font-size: 1.1rem;
      color: #777;
      padding: 0 0.25rem; }
  .blog .author-info p {
    font-size: 0.85rem;
    line-height: 1.4; }
    @media screen and (min-width: 480px) and (orientation: landscape) {
      .blog .author-info p {
        font-size: 0.9rem;
        line-height: 1.5; } }

.blog form {
  margin: 2rem 0 0 0;
  padding-top: 2rem;
  border-top: 1px solid #eaeaea; }
  @media screen and (min-width: 768px) {
    .blog form {
      margin: 3rem 0 5rem 0; } }

.blog .blog-index {
  margin: 2.0rem 0 5rem 0; }
  .blog .blog-index h2, .blog .blog-index article h1:not(.title), .blog article .blog-index h1:not(.title) {
    font-size: 1.2rem;
    letter-spacing: 0.035rem;
    text-align: left;
    text-transform: none;
    margin: 0 0 0.25rem 0; }
    @media screen and (min-width: 768px) {
      .blog .blog-index h2, .blog .blog-index article h1:not(.title), .blog article .blog-index h1:not(.title) {
        font-size: 1.5rem; } }
  .blog .blog-index .post {
    display: block;
    position: relative;
    width: 100%;
    height: 10rem;
    margin: 0 0 3.0rem 0;
    float: left;
    clear: none;
    border-bottom: 1px solid #dddddd; }
    @media screen and (min-width: 768px) {
      .blog .blog-index .post {
        width: 46%;
        margin: 0 2% 4.0rem 2%; } }
  .blog .blog-index h2 a, .blog .blog-index article h1:not(.title) a, .blog article .blog-index h1:not(.title) a {
    color: #222222; }
  .blog .blog-index h2 a:hover, .blog .blog-index article h1:not(.title) a:hover, .blog article .blog-index h1:not(.title) a:hover {
    color: #3e8ddd; }
  .blog .blog-index .meta {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0.5rem 0;
    text-align: left; }
    @media screen and (min-width: 768px) {
      .blog .blog-index .meta {
        font-size: 0.9rem;
        margin: 0.5rem 0; } }
    .blog .blog-index .meta span {
      padding: 0 0.75rem 0 0;
      font-weight: 400; }
    .blog .blog-index .meta span a {
      color: #3e8ddd; }
  .blog .blog-index .byline {
    position: absolute;
    bottom: 1rem; }
  .blog .blog-index .top-story {
    display: block;
    position: relative;
    width: 100%;
    height: 24rem;
    margin: -2rem 0 3rem 0;
    overflow: hidden;
    background: #222222; }
    @media screen and (min-width: 768px) {
      .blog .blog-index .top-story {
        height: 30rem; } }
    .blog .blog-index .top-story figure img {
      width: auto;
      height: 100%;
      max-width: none;
      min-height: 100%;
      min-width: 100%; }
      @media screen and (min-width: 768px) {
        .blog .blog-index .top-story figure img {
          width: 100%;
          height: auto; } }
    .blog .blog-index .top-story .container {
      position: absolute;
      z-index: 10;
      top: 40%;
      width: 90%;
      margin: 0 5%;
      max-width: none; }
    .blog .blog-index .top-story .title {
      float: none;
      width: 100%; }
      .blog .blog-index .top-story .title h2, .blog .blog-index .top-story .title article h1:not(.title), .blog article .blog-index .top-story .title h1:not(.title), .blog .blog-index .top-story .title .meta {
        text-align: center; }
    .blog .blog-index .top-story .post {
      width: 100%;
      border-bottom: none;
      margin: 0; }
      .blog .blog-index .top-story .post h2, .blog .blog-index .top-story .post article h1:not(.title), .blog article .blog-index .top-story .post h1:not(.title) {
        font-size: 1.7rem;
        text-align: center;
        margin: 1.5rem 0; }
        @media screen and (min-width: 768px) {
          .blog .blog-index .top-story .post h2, .blog .blog-index .top-story .post article h1:not(.title), .blog article .blog-index .top-story .post h1:not(.title) {
            font-size: 2.5rem;
            text-align: center; } }
        .blog .blog-index .top-story .post h2 a, .blog .blog-index .top-story .post article h1:not(.title) a, .blog article .blog-index .top-story .post h1:not(.title) a {
          color: white; }
        .blog .blog-index .top-story .post h2 a:hover, .blog .blog-index .top-story .post article h1:not(.title) a:hover, .blog article .blog-index .top-story .post h1:not(.title) a:hover {
          color: rgba(255, 255, 255, 0.5); }
      .blog .blog-index .top-story .post .excerpt {
        display: none; }
        @media screen and (min-width: 768px) {
          .blog .blog-index .top-story .post .excerpt {
            display: block; } }
      .blog .blog-index .top-story .post .excerpt, .blog .blog-index .top-story .post .meta {
        color: white; }
      .blog .blog-index .top-story .post .meta {
        margin: 0;
        text-align: center; }
      .blog .blog-index .top-story .post .meta span a {
        color: white; }
      .blog .blog-index .top-story .post .byline {
        position: relative;
        margin-top: 2.75rem; }

.blog nav.page ul {
  text-align: center;
  margin: 3rem 0 3rem 0; }

.blog nav.page ul li {
  display: inline;
  margin: 0 4px 0 0;
  color: #999999; }

.blog nav.page ul li a {
  padding: 0.3rem 0.3rem;
  color: #222222;
  font-size: 0.9rem;
  border-radius: 4px; }
  @media screen and (min-width: 768px) {
    .blog nav.page ul li a {
      padding: 0.3rem 0.5rem;
      font-size: 1.0rem; } }

.blog nav.page ul li a.btn {
  border: none; }

.blog nav.page ul li a:hover,
.blog nav.page ul li a:focus {
  background: #fff;
  color: #3e8ddd; }

.blog nav.page ul li a:active {
  background: #fff;
  color: #3e8ddd; }

.blog nav.page ul li.current a {
  color: #3e8ddd; }

.blog nav.prev-next-buttons {
  display: none; }
  @media screen and (min-width: 768px) {
    .blog nav.prev-next-buttons {
      display: block;
      position: fixed;
      top: 44%;
      width: 100%;
      z-index: 20; } }

.blog nav.prev-next-buttons > a {
  text-decoration: none;
  color: white;
  background: #222222;
  min-width: 115px;
  padding: 1.25rem 1.5rem;
  text-transform: uppercase;
  opacity: 0.5; }

.blog a.prev-button {
  transition: left 0.3s;
  -webkit-transition: left 0.3s;
  -moz-transition: left 0.3s;
  left: -68px;
  position: absolute;
  text-align: left; }

.blog a.prev-button:hover {
  left: 0px;
  opacity: 1.0; }

.blog a.prev-button:after {
  font-family: "petala-pro", Avenir, Helvetica;
  position: absolute;
  right: 0.75rem;
  content: '<';
  font-size: 2.5rem;
  top: 0.25rem; }

.blog a.next-button {
  transition: right 0.3s;
  -webkit-transition: right 0.3s;
  -moz-transition: right 0.3s;
  right: -68px;
  position: absolute;
  text-align: right; }

.blog a.next-button:hover {
  right: 0px;
  opacity: 1.0; }

.blog a.next-button:before {
  font-family: "petala-pro", Avenir, Helvetica;
  position: absolute;
  left: 0.75rem;
  content: '>';
  font-size: 2.5rem;
  top: 0.25rem;
  margin-right: 1rem; }

.blog .share {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 0.9rem;
  margin: 1rem 0 0 0;
  padding: 1.5rem 0 0 0;
  letter-spacing: 0.1rem;
  color: #222222;
  border-top: 1px solid #dddddd;
  display: inline-block;
  text-transform: uppercase; }
  @media screen and (min-width: 768px) {
    .blog .share {
      font-size: 1rem;
      padding: 1.5rem 2rem 0rem 2rem; } }
  .blog .share span {
    font-weight: 400;
    padding-right: 0.5rem; }
    @media screen and (min-width: 768px) {
      .blog .share span {
        padding-right: 1rem; } }
  .blog .share .svg-icon {
    width: 1.15rem;
    height: 1.15rem;
    margin: 0.15rem 0.15rem 0 0.15rem; }
    @media screen and (min-width: 768px) {
      .blog .share .svg-icon {
        width: 1.25rem;
        height: 1.25rem;
        margin: 0.15rem 0.5rem 0 0.5rem; } }
  .blog .share a {
    color: #222222;
    fill: currentColor; }
  .blog .share a:hover {
    color: #3e8ddd;
    fill: currentColor; }

.intrinsic {
  overflow: hidden;
  position: relative;
  margin-bottom: 1.5rem; }

.intrinsic::before {
  content: "";
  display: block;
  padding-top: 100%; }

.intrinsic--16by9::before {
  padding-top: 56.25%; }

.intrinsic iframe {
  bottom: 0;
  height: 100% !important;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 100% !important; }

.loading {
  -webkit-animation-duration: 1200ms;
          animation-duration: 1200ms;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-name: pulse;
          animation-name: pulse;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  border-color: green;
  border-radius: 50%;
  border-style: solid;
  border-width: 2px;
  height: 4rem;
  left: 50%;
  margin-top: 4rem;
  margin-bottom: 4rem;
  margin-left: -2rem;
  position: relative;
  top: 50%;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  width: 4rem; }
  .loading:before {
    -webkit-animation-duration: 600ms;
            animation-duration: 600ms;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    -webkit-animation-name: spin;
            animation-name: spin;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
    border-color: transparent;
    border-left-color: #3e8ddd;
    border-radius: 50%;
    border-style: solid;
    border-width: 2px;
    content: "";
    height: calc(100% + 4px);
    left: -2px;
    position: absolute;
    top: -2px;
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    width: calc(100% + 4px); }

@-webkit-keyframes pulse {
  0% {
    border-color: rgba(221, 221, 221, 0.4); }
  50% {
    border-color: rgba(221, 221, 221, 0.8); }
  100% {
    border-color: rgba(221, 221, 221, 0.4); } }

@keyframes pulse {
  0% {
    border-color: rgba(221, 221, 221, 0.4); }
  50% {
    border-color: rgba(221, 221, 221, 0.8); }
  100% {
    border-color: rgba(221, 221, 221, 0.4); } }

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); } }

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); } }

.home .container.slide {
  position: relative; }

.home video#bgvid {
  background: url("../images/video/video-home.jpg") no-repeat;
  background-size: cover; }

@media screen and (min-width: 768px) {
  .home .site--header {
    position: absolute;
    background: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2); } }

@media screen and (min-width: 768px) {
  .home .site--header_logo {
    left: auto;
    width: 26rem;
    margin: 0.25rem 0 0 -9.5rem;
    background-image: url("../images/bpxl-logo-vertical-white.svg");
    background-size: 200px 80px;
    background-repeat: none; } }

@media screen and (min-width: 1025px) {
  .home .site--header_logo {
    width: 27rem;
    margin-top: 1rem;
    margin-left: -10rem; } }

.home nav.main-nav ul li a, .home nav.main-nav ul li a:visited {
  color: #fff; }

.home nav.main-nav ul li a:hover {
  color: #3e8ddd; }

.home #intro {
  height: 101%; }
  @media screen and (min-width: 1025px) {
    .home #intro {
      margin-top: 0;
      position: relative; } }
  .home #intro p {
    text-transform: none; }

.home #more {
  background: #fff;
  position: relative; }

.home #intro h2, .home #intro .blog article h1:not(.title), .blog article .home #intro h1:not(.title) {
  color: white;
  display: block;
  width: 100%;
  margin: 0;
  font-size: 1.7rem;
  text-align: center;
  text-transform: none; }
  @media screen and (min-width: 768px) {
    .home #intro h2, .home #intro .blog article h1:not(.title), .blog article .home #intro h1:not(.title) {
      font-size: 2.0rem; } }
  .home #intro h2 span, .home #intro .blog article h1:not(.title) span, .blog article .home #intro h1:not(.title) span {
    color: white; }

.home .home-hero-video {
  background: url("../images/video/video-home.jpg") no-repeat center center;
  background-size: cover;
  -webkit-animation: fadeIn 600ms ease-in;
          animation: fadeIn 600ms ease-in; }
  @media screen and (min-width: 1025px) {
    .home .home-hero-video {
      background: none; } }
  .home .home-hero-video .container {
    max-width: none; }

.home .desk {
  background: url("../images/bg-desk-mbp.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover; }

.home .sketching {
  background: url("../images/bg-sketching.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover; }

.home .home-contact {
  position: relative;
  width: 100%;
  height: auto;
  padding: 3rem 0;
  background: url("../images/bg-logs.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover; }
  @media screen and (min-width: 768px) {
    .home .home-contact {
      height: 20rem;
      padding: 0; } }
  @media screen and (min-width: 1025px) {
    .home .home-contact {
      height: 50%; } }
  .home .home-contact .tint {
    background: rgba(0, 0, 0, 0.7); }
  .home .home-contact .container {
    position: relative;
    z-index: 10; }
  .home .home-contact h3 {
    color: #fff;
    width: 100%;
    margin: 0 auto 2rem auto;
    font-size: 1.3rem;
    line-height: 1.3; }
    @media screen and (min-width: 768px) {
      .home .home-contact h3 {
        font-size: 1.7rem;
        line-height: 1.5; } }
  .home .home-contact p {
    margin: 0; }

.home footer {
  margin-top: 0; }

.company header nav ul li a.company {
  font-weight: 600; }

.company footer nav ul li a.company {
  opacity: 1.0; }

.company video#bgvid {
  background: url("../images/video/video-company.jpg") no-repeat;
  background-size: cover; }

.company .company-intro {
  position: relative;
  width: 100%;
  height: 80%;
  background: #ddd;
  margin-top: 0;
  overflow: hidden;
  background: url("../images/video/video-company.jpg") center center no-repeat;
  background-size: cover;
  -webkit-animation: fadeIn 600ms ease-in;
          animation: fadeIn 600ms ease-in; }
  @media screen and (min-width: 1025px) {
    .company .company-intro {
      height: 80vh;
      background: none; } }
  .company .company-intro .container {
    position: relative;
    z-index: 10; }
  .company .company-intro h2, .company .company-intro .blog article h1:not(.title), .blog article .company .company-intro h1:not(.title) {
    text-transform: none;
    font-size: 1.85rem;
    color: #fff; }
    @media screen and (min-width: 768px) {
      .company .company-intro h2, .company .company-intro .blog article h1:not(.title), .blog article .company .company-intro h1:not(.title) {
        font-size: 2rem; } }

.company .container.slide {
  position: relative;
  top: 45%;
  -webkit-transform: translateY(-45%);
          transform: translateY(-45%); }

.company .hero-feature {
  background: url("../images/video/video-company.jpg") center center no-repeat;
  background-size: cover; }
  @media screen and (min-width: 1025px) {
    .company .hero-feature {
      background: none; } }

.company .sketching {
  background: url("../images/hero-sketching.jpg") center center no-repeat;
  background-size: cover;
  height: 50%;
  position: relative; }
  @media screen and (min-width: 768px) {
    .company .sketching {
      height: 60%; } }
  @media screen and (min-width: 1025px) {
    .company .sketching {
      height: 60vh; } }
  .company .sketching h4 {
    text-transform: none;
    font-size: 1.85rem;
    color: #fff;
    font-weight: 300; }
    @media screen and (min-width: 768px) {
      .company .sketching h4 {
        font-size: 2rem; } }

.company #services h2, .company #services .blog article h1:not(.title), .blog article .company #services h1:not(.title), .company #products h2, .company #products .blog article h1:not(.title), .blog article .company #products h1:not(.title) {
  font-size: 1.7rem; }
  @media screen and (min-width: 768px) {
    .company #services h2, .company #services .blog article h1:not(.title), .blog article .company #services h1:not(.title), .company #products h2, .company #products .blog article h1:not(.title), .blog article .company #products h1:not(.title) {
      font-size: 2.0rem; } }

.company .service, .company .products {
  padding: 2rem 0 4rem 0; }
  @media screen and (min-width: 768px) {
    .company .service, .company .products {
      padding: 0 0 4rem 0; } }
  @media screen and (min-width: 1025px) {
    .company .service, .company .products {
      padding: 4rem 0 8rem 0; } }
  .company .service h2, .company .service .blog article h1:not(.title), .blog article .company .service h1:not(.title), .company .products h2, .company .products .blog article h1:not(.title), .blog article .company .products h1:not(.title) {
    font-size: 1.7rem;
    width: 100%;
    margin: 0 0 3rem 0;
    text-transform: none;
    text-align: center; }
    @media screen and (min-width: 768px) {
      .company .service h2, .company .service .blog article h1:not(.title), .blog article .company .service h1:not(.title), .company .products h2, .company .products .blog article h1:not(.title), .blog article .company .products h1:not(.title) {
        width: 70%;
        margin: 0 15% 3rem 15%;
        font-size: 2.0rem; } }
    @media screen and (min-width: 1025px) {
      .company .service h2, .company .service .blog article h1:not(.title), .blog article .company .service h1:not(.title), .company .products h2, .company .products .blog article h1:not(.title), .blog article .company .products h1:not(.title) {
        width: 100%;
        margin: 0 0 3rem 0; } }

@media screen and (min-width: 1025px) {
  .company .products {
    padding: 4rem 0; } }

.company .service-col, .company .product-col {
  padding-left: 4rem; }
  .company .service-col h4, .company .product-col h4 {
    font-size: 1.3rem;
    text-align: left;
    margin-top: -36px;
    color: #000;
    margin-bottom: 1.0rem; }
  .company .service-col p, .company .product-col p {
    font-size: 1.0rem;
    line-height: 1.5; }

.company .product-col {
  margin-top: 1rem;
  padding-left: 0; }
  .company .product-col h4, .company .product-col p {
    text-align: center; }
  .company .product-col a h4 {
    color: #222222; }
  .company .product-col a:hover h4 {
    color: #3e8ddd; }
  .company .product-col a p {
    color: #666666; }
  .company .product-col img {
    width: 80%;
    height: auto;
    margin: 0 10% 0.25rem 10%;
    text-align: center;
    opacity: 0.4; }
    @media screen and (min-width: 768px) {
      .company .product-col img {
        width: 60%;
        margin: 0 20% 0.25rem 20%; } }
    @media screen and (min-width: 1025px) {
      .company .product-col img {
        width: 100%;
        margin: 0 0 0.25rem 0; } }

.company .service-icon {
  width: 40px;
  height: 40px;
  margin-left: -3.25rem; }

.company .icon-strategy {
  background: url("../images/icon-strategy.png") no-repeat;
  background-size: 40px 40px; }

.company .icon-design {
  background: url("../images/icon-design.png") no-repeat;
  background-size: 40px 40px; }

.company .icon-engineering {
  background: url("../images/icon-engineering.png") no-repeat;
  background-size: 40px 40px; }

.work header nav ul li a.work {
  font-weight: 600; }

.work footer nav ul li a.work {
  opacity: 1.0; }

.work footer {
  margin-top: 0;
  display: block;
  float: left;
  clear: both;
  width: 100%; }

.work .container.slide {
  position: relative;
  top: 45%;
  -webkit-transform: translateY(-45%);
          transform: translateY(-45%); }

.featured-projects {
  margin-top: 3.5rem; }
  @media screen and (min-width: 768px) {
    .featured-projects {
      margin-top: 0; } }

.project {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  width: 100%;
  background: #666;
  height: 12rem;
  overflow: hidden; }
  @media screen and (min-width: 480px) and (orientation: landscape) {
    .project {
      height: 20rem; } }
  @media screen and (min-width: 1025px) {
    .project {
      height: 60vh; } }
  .project figure img {
    width: 100%;
    height: auto; }
  .project .logo {
    position: relative;
    z-index: 20;
    display: inline-block;
    margin: auto;
    width: 80%;
    height: auto;
    min-width: 11rem; }
    @media screen and (min-width: 768px) {
      .project .logo {
        width: 50%; } }
  .project .wrapper {
    position: absolute;
    bottom: 0;
    z-index: 2;
    width: 90%;
    margin: 0;
    padding: 0 0 0.75rem 0; }
    @media screen and (min-width: 768px) {
      .project .wrapper {
        padding: 0 1rem; } }
    @media screen and (min-width: 1025px) {
      .project .wrapper {
        padding: 0 2rem; } }
  .project .title {
    color: #ffffff;
    font-weight: 300;
    margin: 0;
    font-size: 1.5rem;
    text-transform: none; }
    @media screen and (min-width: 768px) {
      .project .title {
        font-size: 1.7rem; } }
    @media screen and (min-width: 1025px) {
      .project .title {
        font-size: 2.2rem; } }
  .project p, .project .slug {
    display: none;
    color: #ffffff;
    line-height: 1.4; }
    @media screen and (min-width: 768px) {
      .project p, .project .slug {
        display: block;
        font-size: 1.0rem; } }
    @media screen and (min-width: 1025px) {
      .project p, .project .slug {
        font-size: 1.1rem; } }
  .project .tint {
    opacity: 0; }

@media screen and (min-width: 768px) {
  .project .tint {
    transition: all 300ms ease-in-out; } }

.project:hover .tint, .project:active .tint {
  opacity: 1;
  transition: all 10ms ease-in; }
  @media screen and (min-width: 768px) {
    .project:hover .tint, .project:active .tint {
      transition: all 300ms ease-in; } }

.work-inspirato {
  background: url("../images/work/inspirato-bw-bg.jpg") center center no-repeat;
  background-size: cover;
  -webkit-animation: fadeIn 1400ms ease-in;
          animation: fadeIn 1400ms ease-in; }

.foundation-capital {
  background: url("../images/work/foundationcapital-bw-bg.jpg") center center no-repeat;
  background-size: cover;
  -webkit-animation: fadeIn 1400ms ease-in;
          animation: fadeIn 1400ms ease-in; }

.baltimore-ravens {
  background: url("../images/work/baltimoreravens-bw-bg.jpg") top center no-repeat;
  background-size: cover;
  -webkit-animation: fadeIn 600ms ease-in;
          animation: fadeIn 600ms ease-in; }

.funny-or-die {
  background: url("../images/work/funnyordie-bw-bg.jpg") top center no-repeat;
  background-size: cover;
  -webkit-animation: fadeIn 1000ms ease-in;
          animation: fadeIn 1000ms ease-in; }

.more {
  margin-top: 4rem; }

.promo-block {
  position: relative;
  width: 100%;
  height: auto;
  padding: 3rem 0; }
  @media screen and (min-width: 768px) {
    .promo-block {
      min-height: 40%; } }
  @media screen and (min-width: 1025px) {
    .promo-block {
      height: 50%;
      padding: 0; } }
  .promo-block .tint {
    background: rgba(0, 0, 0, 0.7); }
  .promo-block .container {
    position: relative;
    z-index: 10; }

.row {
  padding: 2.5rem 0; }
  @media screen and (min-width: 768px) {
    .row {
      padding: 5rem 0 0 0; } }
  .row h4 {
    font-size: 1.25rem; }
    @media screen and (min-width: 768px) {
      .row h4 {
        font-size: 1.7rem; } }

.labs header nav ul li a.labs {
  font-weight: 600; }

.labs footer nav ul li a.labs {
  opacity: 1.0; }

.labs--grid {
  margin-top: 3rem; }

.labs video#bgvid {
  background: url("../images/video/video-labs.jpg") no-repeat center center;
  background-size: cover; }

.labs .hero-feature {
  background: url("../images/video/video-labs.jpg") no-repeat center center;
  background-size: cover; }
  @media screen and (min-width: 1025px) {
    .labs .hero-feature {
      background: none; } }

.feature {
  background: #fff;
  min-height: 90%;
  min-height: 50%;
  height: auto; }
  @media screen and (min-width: 768px) {
    .feature {
      min-height: 90%; } }
  .feature--title {
    color: #666;
    font-size: 2.5rem;
    margin: 0 0 0.5rem 0; }
  .feature--wrapper {
    color: #666;
    text-align: left; }
    .feature--wrapper .btn {
      color: #666;
      border: 1px solid rgba(0, 0, 0, 0.3); }
      .feature--wrapper .btn:hover {
        color: #fff; }
  .feature .container {
    position: relative;
    padding-top: 10%;
    padding-bottom: 2.0rem; }
  .feature .wrapper {
    position: relative;
    width: auto; }
    @media screen and (min-width: 768px) {
      .feature .wrapper {
        width: 90%;
        margin: 1.0rem 5%; } }
    @media screen and (min-width: 1025px) {
      .feature .wrapper {
        position: absolute;
        width: 40%;
        bottom: 15%; } }
  .feature h3.title {
    text-transform: uppercase;
    font-size: 1.75rem;
    line-height: 1.1;
    text-align: left; }
    @media screen and (min-width: 768px) {
      .feature h3.title {
        font-size: 2.0rem; } }
  .feature p {
    font-size: 1.1rem;
    line-height: 1.3;
    padding: 1.0rem 0 0 0; }
  .feature p.tablet-desktop {
    float: left;
    clear: both;
    margin: 0 0 2rem 0; }
  .feature figure {
    width: 80%;
    height: auto;
    margin: 0 10% 1rem 10%; }
    @media screen and (min-width: 768px) {
      .feature figure {
        width: 70%;
        margin: 0 15% 1rem 15%; } }
    @media screen and (min-width: 1025px) {
      .feature figure {
        float: right;
        clear: none;
        width: 50%;
        margin: 0; } }

.wide {
  /* margin-bottom: 1.375rem; */
  margin: 1rem auto;
  width: 100%;
  height: 21.5rem;
  min-height: 21.5rem; }
  .wide:last-of-type {
    margin-bottom: 0; }
  @media screen and (min-width: 480px) and (orientation: landscape) {
    .wide {
      margin: 1rem 1.5%;
      width: 63%;
      height: 18rem;
      float: left;
      clear: none; } }
  @media screen and (min-width: 768px) {
    .wide {
      height: 21.5rem; } }
  @media screen and (min-width: 1025px) {
    .wide article {
      width: 50%; } }

.tall {
  width: 100%;
  height: 24rem;
  /* margin-bottom: 1.375rem; */ }
  .tall:last-of-type {
    margin-bottom: 0; }
  @media screen and (min-width: 480px) and (orientation: landscape) {
    .tall {
      width: 30%;
      height: 38rem;
      float: left;
      clear: none; } }
  @media screen and (min-width: 768px) {
    .tall {
      height: 45rem; } }

.kaleidoscope {
  background: url("../images/labs/kaleidoscope-bg.jpg") center center no-repeat;
  background-size: cover; }

.nnw {
  background: url("../images/labs/nnw-bg.jpg") center center no-repeat;
  background-size: cover; }

.versions {
  background: url("../images/labs/versions-bg.jpg") center right no-repeat;
  background-size: cover; }
  @media screen and (min-width: 768px) {
    .versions {
      background: url("../images/labs/versions-bg.jpg") center center no-repeat; } }

.product figure {
  background: none; }

.product a h4 {
  text-transform: uppercase;
  color: #fff;
  font-size: 1.6rem; }
  @media screen and (min-width: 1025px) {
    .product a h4 {
      font-size: 2.0rem; } }

.product a .slug {
  color: rgba(245, 245, 245, 0.7); }
  @media screen and (min-width: 768px) {
    .product a .slug {
      font-size: 0.9rem; } }
  @media screen and (min-width: 1025px) {
    .product a .slug {
      font-size: 1.0rem; } }

.product a p {
  text-align: left;
  color: rgba(245, 245, 245, 0.7); }
  @media screen and (min-width: 768px) {
    .product a p {
      font-size: 1.0rem; } }
  @media screen and (min-width: 1025px) {
    .product a p {
      font-size: 1.1rem; } }

.product a:hover figure img {
  opacity: 1.0; }

.product article {
  padding: 1rem 1.5rem;
  position: absolute;
  bottom: 0;
  margin-bottom: 2rem; }
  .product article p {
    font-size: 1.0rem;
    line-height: 1.3;
    margin-bottom: 1.25rem; }
    @media screen and (min-width: 1025px) {
      .product article p {
        font-size: 1.1rem;
        margin-bottom: 2.0rem; } }

.wide article {
  width: 100% !important; }
  @media screen and (min-width: 1025px) {
    .wide article {
      width: 60% !important; } }

.nnw figure img {
  width: 80%;
  height: auto;
  margin: 0 10%;
  position: absolute;
  top: 2.0rem; }
  @media screen and (min-width: 768px) {
    .nnw figure img {
      top: 30%; } }

.kaleidoscope figure {
  width: 80%;
  height: auto;
  margin: 1rem 10%; }
  @media screen and (min-width: 768px) {
    .kaleidoscope figure {
      height: 90%;
      width: auto;
      float: right;
      margin: 3% 3% 0 0; } }
  .kaleidoscope figure img {
    height: auto;
    width: 100%; }
    @media screen and (min-width: 768px) {
      .kaleidoscope figure img {
        width: auto;
        height: 100%; } }

.versions figure {
  width: 80%;
  height: auto;
  margin: 1.0rem 10%; }
  @media screen and (min-width: 768px) {
    .versions figure {
      height: 80%;
      width: auto;
      float: right;
      margin: 3% 5% 0 0; } }
  .versions figure img {
    height: auto;
    width: 100%; }
    @media screen and (min-width: 768px) {
      .versions figure img {
        width: auto;
        height: 100%; } }

.contact header nav ul li a.contact {
  font-weight: 600; }

.contact footer nav ul li a.contact {
  opacity: 1.0; }

.contact .contact-intro {
  width: 100%;
  height: 60%;
  background: #fff;
  margin-top: 0; }
  @media screen and (min-width: 768px) {
    .contact .contact-intro {
      margin-top: -6rem;
      height: 60%; } }
  .contact .contact-intro h2, .contact .contact-intro .blog article h1:not(.title), .blog article .contact .contact-intro h1:not(.title) {
    text-transform: none;
    font-size: 1.4rem;
    -webkit-animation: fadeIn 600ms ease-in;
            animation: fadeIn 600ms ease-in; }
    @media screen and (min-width: 768px) {
      .contact .contact-intro h2, .contact .contact-intro .blog article h1:not(.title), .blog article .contact .contact-intro h1:not(.title) {
        font-size: 2rem; } }

.contact .thank-you, .contact .four-oh-four {
  width: 100%;
  min-height: 60%;
  margin-top: 6rem; }

.contact .four-oh-four h3 {
  font-size: 1.3rem; }
  @media screen and (min-width: 768px) {
    .contact .four-oh-four h3 {
      font-size: 1.7rem; } }
  @media screen and (min-width: 1025px) {
    .contact .four-oh-four h3 {
      width: 70%;
      margin: 1rem 15% 0; } }

.contact .four-oh-four span {
  font-size: 1.2rem; }

.contact .four-oh-four p {
  margin: 2rem 0 0 0; }

.contact .contact-details {
  background: #222222;
  width: 100%;
  height: auto;
  padding: 3rem 0 2rem 0;
  -webkit-animation: fadeIn 900ms ease-in;
          animation: fadeIn 900ms ease-in; }
  @media screen and (min-width: 768px) {
    .contact .contact-details {
      min-height: 50%;
      padding: 6rem 0 3rem 0; } }
  .contact .contact-details .container {
    width: 90%; }
    @media screen and (min-width: 1025px) {
      .contact .contact-details .container {
        width: 80%; } }
  .contact .contact-details .form-trigger {
    font-weight: 400;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #ffffff;
    text-align: left;
    width: 100%;
    padding: 1rem;
    margin: 0;
    border-bottom: 2px solid #666666; }
  .contact .contact-details .form-trigger.open {
    color: #ffffff;
    border-bottom: 2px solid #ffffff; }
  .contact .contact-details ol li {
    padding: 0;
    margin: 0 0 0.5rem 0; }
  .contact .contact-details ol li i {
    position: relative;
    -webkit-transform: translate(-6px, 0);
            transform: translate(-6px, 0);
    margin: 1.7rem 1rem 0 0;
    left: 0;
    right: 0;
    float: right; }
  .contact .contact-details ol li i:before, .contact .contact-details ol li i:after {
    content: "";
    position: absolute;
    background-color: #ffffff;
    width: 1px;
    height: 10px; }
  .contact .contact-details ol li input[type=checkbox] {
    width: 60%; }
    @media screen and (min-width: 768px) {
      .contact .contact-details ol li input[type=checkbox] {
        width: 100%; } }
  .contact .contact-details .form {
    margin: 0; }
    @media screen and (min-width: 768px) {
      .contact .contact-details .form {
        width: 100%; } }
    .contact .contact-details .form .field-style {
      margin-bottom: 0;
      background: none;
      padding: 1rem;
      font-weight: 300;
      color: #ffffff;
      letter-spacing: 2px;
      border: none;
      border-bottom: 1px solid #666666; }
      .contact .contact-details .form .field-style:focus {
        border: none;
        border-bottom: 1px solid #fff; }
    .contact .contact-details .form ::-webkit-input-placeholder,
    .contact .contact-details .form .replace {
      text-transform: uppercase;
      color: #666666; }
    .contact .contact-details .form ::-moz-placeholder,
    .contact .contact-details .form .replace {
      text-transform: uppercase;
      color: #666666; }
    .contact .contact-details .form :-ms-input-placeholder,
    .contact .contact-details .form .replace {
      text-transform: uppercase;
      color: #666666; }
    .contact .contact-details .form ::placeholder,
    .contact .contact-details .form .replace {
      text-transform: uppercase;
      color: #666666; }
    .contact .contact-details .form textarea {
      margin-top: -2rem; }
    .contact .contact-details .form .is-open {
      background: #222222;
      position: relative; }
    .contact .contact-details .form .trigger-arrow img {
      position: absolute;
      top: 1.1rem;
      right: 0.5rem;
      opacity: 0.35;
      width: 39%; }
    .contact .contact-details .form .submit {
      background: none;
      border: 1px solid rgba(255, 255, 255, 0.2);
      width: auto;
      padding: 0.5rem 1.5rem;
      font-size: 1rem;
      margin: 1.75rem 0;
      float: right; }
      .contact .contact-details .form .submit:hover, .contact .contact-details .form .submit:active, .contact .contact-details .form .submit:focus {
        color: #222222;
        background: #fff; }
      @media screen and (min-width: tablet) {
        .contact .contact-details .form .submit {
          font-size: 1rem;
          padding: 0.65rem 2rem 0.75rem 2rem;
          letter-spacing: 0.2rem; } }
  .contact .contact-details .left {
    text-align: center;
    margin-bottom: 5rem; }
    @media screen and (min-width: 768px) {
      .contact .contact-details .left {
        text-align: left;
        float: left;
        clear: none;
        width: 50%;
        margin-bottom: 0; } }
  .contact .contact-details .right {
    text-align: center; }
    @media screen and (min-width: 768px) {
      .contact .contact-details .right {
        text-align: right;
        float: right;
        clear: none;
        width: 46%; } }
  .contact .contact-details h3 {
    margin: 0 0 2rem 0;
    font-size: 1.5rem; }
    @media screen and (min-width: 768px) {
      .contact .contact-details h3 {
        margin: 0 0 4rem 0;
        font-size: 1.7rem; } }
  .contact .contact-details h4 {
    font-size: 1.1rem;
    margin-top: 0; }
  .contact .contact-details h3, .contact .contact-details h4, .contact .contact-details p, .contact .contact-details a {
    color: #fff;
    line-height: 1.3; }

.contact .contact-careers {
  position: relative;
  width: 100%;
  height: auto;
  padding: 3rem 0;
  background: url("../images/bg-stylus.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover; }
  @media screen and (min-width: 768px) {
    .contact .contact-careers {
      height: 20rem;
      padding: 0; } }
  @media screen and (min-width: 1025px) {
    .contact .contact-careers {
      height: 50vh; } }
  .contact .contact-careers .tint {
    background: rgba(0, 0, 0, 0.8); }
  .contact .contact-careers .container {
    position: relative;
    z-index: 10; }
  .contact .contact-careers h3 {
    color: #fff;
    width: 100%;
    margin: 0 auto 2rem auto;
    font-size: 1.3rem;
    line-height: 1.3; }
    @media screen and (min-width: 768px) {
      .contact .contact-careers h3 {
        width: 80%;
        font-size: 1.7rem;
        line-height: 1.5; } }
  .contact .contact-careers p {
    margin: 0; }

.contact .fw-map {
  overflow: hidden;
  position: relative; }

.contact .map {
  display: block;
  width: 100%;
  height: 300px;
  position: relative; }
  @media screen and (min-width: 768px) {
    .contact .map {
      height: 450px; } }
  @media screen and (min-width: 1025px) {
    .contact .map {
      height: 550px; } }
  .contact .map .leaflet-popup-content {
    font-family: "petala-pro", Avenir, Helvetica;
    font-weight: 300;
    font-size: 0.8rem; }
    .contact .map .leaflet-popup-content .marker-title {
      font-weight: 400;
      text-transform: uppercase; }

.contact footer {
  margin-top: 0; }

.contact .slab {
  margin-bottom: 3rem; }

.careers header nav ul li a.careers {
  font-weight: 600; }

.careers footer nav ul li a.careers {
  opacity: 1.0; }

.careers .careers-intro {
  height: 32rem;
  padding: 5rem 0 0 0;
  -webkit-animation: fadeIn 600ms ease-in;
          animation: fadeIn 600ms ease-in; }
  @media screen and (min-width: 768px) {
    .careers .careers-intro {
      height: 50%; } }
  .careers .careers-intro .container {
    width: 100%; }
    @media screen and (min-width: 768px) {
      .careers .careers-intro .container {
        width: 80%;
        margin-top: -5rem; } }
    @media screen and (min-width: 1025px) {
      .careers .careers-intro .container {
        width: 70%;
        margin-top: -7rem; } }
  .careers .careers-intro h2, .careers .careers-intro .blog article h1:not(.title), .blog article .careers .careers-intro h1:not(.title) {
    text-transform: none;
    margin-bottom: 1rem;
    font-size: 1.3rem; }
    @media screen and (min-width: 768px) {
      .careers .careers-intro h2, .careers .careers-intro .blog article h1:not(.title), .blog article .careers .careers-intro h1:not(.title) {
        font-size: 2.0rem;
        margin-bottom: 2rem; } }
  .careers .careers-intro p {
    font-size: 0.85rem;
    line-height: 1.6; }
    @media screen and (min-width: 768px) {
      .careers .careers-intro p {
        font-size: 1rem;
        line-height: 1.7; } }

.careers .careers-hero {
  position: relative;
  width: auto;
  height: 350px;
  overflow: hidden;
  background: url("../images/bg-mouse.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-animation: fadeIn 900ms ease-in;
          animation: fadeIn 900ms ease-in; }
  @media screen and (min-width: 768px) {
    .careers .careers-hero {
      height: 70%;
      padding: 0; } }

.careers .jobvite .container {
  padding: 2rem 0;
  width: 92%;
  margin: 0 4%; }
  @media screen and (min-width: 768px) {
    .careers .jobvite .container {
      width: 80%;
      padding: 6rem 0 0 0;
      margin: 0 auto; } }

.careers .jobvite h2, .careers .jobvite .blog article h1:not(.title), .blog article .careers .jobvite h1:not(.title) {
  text-transform: none; }

.careers .future-needs .container {
  padding: 0; }

.careers .future-needs .intro {
  margin: 0;
  width: 100%;
  text-align: left; }
  @media screen and (min-width: 768px) {
    .careers .future-needs .intro {
      width: 100%;
      margin: 3rem 0 0 0; } }
  @media screen and (min-width: 1025px) {
    .careers .future-needs .intro {
      width: 70%;
      margin: 3rem 15% 0 15%; } }

.careers .jobs {
  display: block;
  margin: 0;
  width: 100%;
  text-align: left; }
  @media screen and (min-width: 768px) {
    .careers .jobs {
      width: 100%;
      margin: 3rem 0 8rem 0; } }
  @media screen and (min-width: 1025px) {
    .careers .jobs {
      width: 70%;
      margin: 3rem 15% 8rem 15%; } }
  .careers .jobs h1 {
    margin-top: 2.5rem;
    margin-bottom: .75rem;
    font-size: 1.25rem;
    text-transform: uppercase;
    color: #666666; }
  .careers .jobs h3 {
    display: block;
    font-size: 1.25rem;
    line-height: 1.5;
    color: #3e8ddd;
    margin: 0; }
  .careers .jobs p {
    margin: 1.5rem 0 0.5rem 0; }
  .careers .jobs .btn {
    margin-bottom: 2rem; }

.careers .accordion ol li.is-closed .desc {
  margin-top: 0;
  max-height: 0;
  opacity: 0;
  -webkit-transform: translate(0, 50%);
          transform: translate(0, 50%); }

.careers .accordion ol li.is-closed i:before {
  -webkit-transform: translate(5px, 0) rotate(45deg);
          transform: translate(5px, 0) rotate(45deg); }

.careers .accordion ol li.is-closed i:after {
  -webkit-transform: translate(-2px, 0) rotate(-45deg);
          transform: translate(-2px, 0) rotate(-45deg); }

.accordion.jobs ul {
  list-style: disc; }

.casestudy header nav ul li a.work {
  font-weight: 600; }

.casestudy footer nav ul li a.work {
  opacity: 1.0; }

.casestudy .v-center {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%); }

.casestudy footer {
  margin-top: 0; }

.casestudy .sj-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden; }

.casestudy .sj-content {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  transition: top 800ms cubic-bezier(0.645, 0.045, 0.355, 1); }
  .casestudy .sj-content.move-instantly {
    transition: top 0ms linear; }

.casestudy .full-height {
  height: 100%;
  width: 100%; }
  .casestudy .full-height .container {
    height: 100%;
    text-align: center; }

.casestudy .fixed-panel-holder {
  position: relative; }
  .casestudy .fixed-panel-holder .fixed-panel {
    position: absolute;
    top: 0;
    left: 0; }

.casestudy .hide-overflow {
  overflow: hidden; }

.casestudy .progress-indicator {
  position: absolute;
  width: 6px;
  top: 50%;
  right: .5rem;
  opacity: 0;
  transition: opacity 400ms ease-in; }
  .casestudy .progress-indicator.visible {
    opacity: 1;
    transition: opacity 1000ms ease-in; }
  .casestudy .progress-indicator i {
    display: block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.36);
    margin: 1rem auto;
    transition: width 500ms ease-in, height 500ms ease-in, background-color 150ms ease-in; }
    .casestudy .progress-indicator i.over-hero {
      background-color: rgba(255, 255, 255, 0.72); }
    .casestudy .progress-indicator i.active {
      width: 6px;
      height: 6px; }
  @media only screen and (min-height: 400px) {
    .casestudy .progress-indicator i {
      margin: 1.5rem auto; } }
  @media only screen and (min-height: 700px) {
    .casestudy .progress-indicator {
      width: 8px; }
      .casestudy .progress-indicator i {
        margin: 2.5rem auto;
        width: 5px;
        height: 5px; }
        .casestudy .progress-indicator i.active {
          width: 8px;
          height: 8px; } }
  @media only screen and (min-width: 400px) {
    .casestudy .progress-indicator {
      right: .8rem; } }
  @media only screen and (min-width: 500px) {
    .casestudy .progress-indicator {
      right: 1rem; } }
  @media only screen and (min-width: 700px) {
    .casestudy .progress-indicator {
      right: 1.3rem; } }
  @media only screen and (min-width: 900px) {
    .casestudy .progress-indicator {
      right: 2rem; } }
  @media only screen and (min-width: 1440px) {
    .casestudy .progress-indicator {
      right: 3rem; } }

.casestudy .hero {
  background-size: cover;
  background-position: 50% 50%;
  height: 100%;
  -webkit-animation: fadeIn 600ms ease-in;
          animation: fadeIn 600ms ease-in; }
  .casestudy .hero .container {
    position: relative;
    height: 100%; }
  .casestudy .hero .logo {
    position: absolute;
    bottom: 2rem;
    right: 1rem;
    width: 22%;
    min-width: 7rem;
    height: auto;
    -webkit-animation: reveal 1100ms ease-in 1200ms both;
            animation: reveal 1100ms ease-in 1200ms both; }
    @media screen and (min-width: 1025px) {
      .casestudy .hero .logo {
        bottom: 4rem;
        right: 2rem;
        width: 20%; } }

.casestudy .carousel-holder {
  position: relative;
  width: 100%;
  margin: 1rem 0; }
  @media only screen and (min-height: 360px) {
    .casestudy .carousel-holder {
      margin: 1.5rem 0 1rem 0; } }
  .casestudy .carousel-holder .arrow-left,
  .casestudy .carousel-holder .arrow-right {
    display: none;
    width: 1rem;
    height: auto;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    z-index: 2;
    opacity: .75;
    transition: opacity 100ms ease-in;
    cursor: pointer; }
    .casestudy .carousel-holder .arrow-left:hover, .casestudy .carousel-holder .arrow-left:focus,
    .casestudy .carousel-holder .arrow-right:hover,
    .casestudy .carousel-holder .arrow-right:focus {
      opacity: 1; }
    .casestudy .carousel-holder .arrow-left.arrow-left,
    .casestudy .carousel-holder .arrow-right.arrow-left {
      left: 0; }
    .casestudy .carousel-holder .arrow-left.arrow-right,
    .casestudy .carousel-holder .arrow-right.arrow-right {
      right: 0; }
  .casestudy .carousel-holder .carousel {
    overflow: hidden;
    visibility: hidden;
    position: relative;
    width: 100%; }
  .casestudy .carousel-holder .slide {
    width: 80%;
    margin: 0 auto;
    max-width: 16rem; }
    @media only screen and (min-height: 360px) {
      .casestudy .carousel-holder .slide {
        max-width: 20rem; } }
    @media only screen and (min-height: 440px) {
      .casestudy .carousel-holder .slide {
        max-width: 26rem; } }
    @media only screen and (min-height: 550px) {
      .casestudy .carousel-holder .slide {
        max-width: 34rem; } }
    @media only screen and (min-height: 660px) {
      .casestudy .carousel-holder .slide {
        max-width: 40rem; } }
    @media only screen and (min-height: 720px) {
      .casestudy .carousel-holder .slide {
        max-width: 46rem; } }
    @media only screen and (min-height: 840px) {
      .casestudy .carousel-holder .slide {
        max-width: 48rem; } }
    @media only screen and (min-height: 920px) {
      .casestudy .carousel-holder .slide {
        max-width: 56rem; } }
  @media only screen and (min-width: 500px) and (min-height: 500px) {
    .casestudy .carousel-holder .arrow-left, .casestudy .carousel-holder .arrow-right {
      display: block; }
    .casestudy .carousel-holder .slide {
      width: 68%; } }

.casestudy .swipe-wrap {
  overflow: hidden;
  position: relative; }

.casestudy .swipe-wrap > div {
  float: left;
  width: 100%;
  position: relative; }

.casestudy .carousel-nav {
  text-align: center; }
  .casestudy .carousel-nav a {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: solid 2px #6a6a6a;
    background-color: transparent;
    margin: 0 5px;
    transition: background-color 150ms ease-in; }
    .casestudy .carousel-nav a:hover, .casestudy .carousel-nav a:focus, .casestudy .carousel-nav a.active {
      background-color: #6a6a6a; }

.casestudy .buttons {
  text-align: center;
  padding-top: 3.5rem;
  padding-bottom: 3.5rem; }
  .casestudy .buttons .btn {
    margin: .6em; }

.casestudy .ipad {
  position: relative;
  background-repeat: no-repeat;
  background-position: 0% 0%;
  background-size: 100%; }
  .casestudy .ipad::before {
    content: "";
    display: block; }
  .casestudy .ipad img {
    position: absolute;
    height: auto; }
  .casestudy .ipad.vertical {
    background-image: url("../images/ipad-vertical.svg"); }
    .casestudy .ipad.vertical::before {
      padding-top: 140.76%; }
    .casestudy .ipad.vertical img {
      top: 9%;
      left: 6.5%;
      width: 87%; }
  .casestudy .ipad.horizontal::before, .casestudy .ipad.horizontal-flipped::before {
    padding-top: 71.04%; }
  .casestudy .ipad.horizontal img, .casestudy .ipad.horizontal-flipped img {
    top: 6.5%;
    left: 9%;
    width: 82%; }
  .casestudy .ipad.horizontal {
    background-image: url("../images/ipad-horizontal.svg"); }
  .casestudy .ipad.horizontal-flipped {
    background-image: url("../images/ipad-horizontal-flipped.svg"); }

.casestudy .iphone {
  position: relative;
  background-repeat: no-repeat;
  background-position: 0% 0%;
  background-size: 100%;
  background-image: url("../images/iphone-vertical.svg"); }
  .casestudy .iphone::before {
    content: "";
    display: block;
    padding-top: 205.116%; }
  .casestudy .iphone img {
    position: absolute;
    height: auto;
    top: 12.75%;
    left: 7%;
    width: 86%; }

.casestudy h3 {
  text-transform: uppercase;
  color: #888;
  letter-spacing: .2em; }

.casestudy.fc .hero {
  background-image: url("../images/fc-hero.jpg"); }

.casestudy.fc .responsive-demo-1 .container,
.casestudy.fc .responsive-demo-2 .container,
.casestudy.fc .responsive-demo-3 .container,
.casestudy.fc .carousel-panel {
  font-size: .9rem; }
  @media only screen and (min-width: 570px) {
    .casestudy.fc .responsive-demo-1 .container,
    .casestudy.fc .responsive-demo-2 .container,
    .casestudy.fc .responsive-demo-3 .container,
    .casestudy.fc .carousel-panel {
      font-size: 1rem; } }
  @media only screen and (min-width: 640px) and (min-height: 550px) {
    .casestudy.fc .responsive-demo-1 .container,
    .casestudy.fc .responsive-demo-2 .container,
    .casestudy.fc .responsive-demo-3 .container,
    .casestudy.fc .carousel-panel {
      font-size: 1.2rem; } }
  @media only screen and (min-width: 1000px) and (min-height: 600px) {
    .casestudy.fc .responsive-demo-1 .container,
    .casestudy.fc .responsive-demo-2 .container,
    .casestudy.fc .responsive-demo-3 .container,
    .casestudy.fc .carousel-panel {
      font-size: 1.4rem; } }

.casestudy.fc .responsive-demo-1 .container,
.casestudy.fc .responsive-demo-2 .container,
.casestudy.fc .responsive-demo-3 .container {
  height: auto; }

.casestudy.fc .responsive-demo-1 .animation,
.casestudy.fc .responsive-demo-2 .animation,
.casestudy.fc .responsive-demo-3 .animation {
  position: relative;
  width: 50%;
  max-width: 8rem;
  margin: -5% auto;
  background-image: none;
  background-size: contain; }
  @media only screen and (min-height: 480px) {
    .casestudy.fc .responsive-demo-1 .animation,
    .casestudy.fc .responsive-demo-2 .animation,
    .casestudy.fc .responsive-demo-3 .animation {
      max-width: 12rem; } }
  @media only screen and (min-height: 570px) {
    .casestudy.fc .responsive-demo-1 .animation,
    .casestudy.fc .responsive-demo-2 .animation,
    .casestudy.fc .responsive-demo-3 .animation {
      max-width: 14rem; } }
  @media only screen and (min-height: 600px) {
    .casestudy.fc .responsive-demo-1 .animation,
    .casestudy.fc .responsive-demo-2 .animation,
    .casestudy.fc .responsive-demo-3 .animation {
      max-width: 20rem; } }
  @media only screen and (min-height: 800px) {
    .casestudy.fc .responsive-demo-1 .animation,
    .casestudy.fc .responsive-demo-2 .animation,
    .casestudy.fc .responsive-demo-3 .animation {
      max-width: 30rem; } }
  @media only screen and (min-height: 1000px) {
    .casestudy.fc .responsive-demo-1 .animation,
    .casestudy.fc .responsive-demo-2 .animation,
    .casestudy.fc .responsive-demo-3 .animation {
      max-width: none; } }
  .casestudy.fc .responsive-demo-1 .animation::before,
  .casestudy.fc .responsive-demo-2 .animation::before,
  .casestudy.fc .responsive-demo-3 .animation::before {
    content: "";
    display: block;
    padding-top: 100%; }
  .casestudy.fc .responsive-demo-1 .animation img,
  .casestudy.fc .responsive-demo-2 .animation img,
  .casestudy.fc .responsive-demo-3 .animation img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0; }
    .casestudy.fc .responsive-demo-1 .animation img.visible,
    .casestudy.fc .responsive-demo-2 .animation img.visible,
    .casestudy.fc .responsive-demo-3 .animation img.visible {
      opacity: 1; }

.casestudy.fc .responsive-demo-1 h3, .casestudy.fc .responsive-demo-1 p,
.casestudy.fc .responsive-demo-2 h3,
.casestudy.fc .responsive-demo-2 p,
.casestudy.fc .responsive-demo-3 h3,
.casestudy.fc .responsive-demo-3 p {
  width: 90%;
  max-width: 40em;
  margin: .6em auto 0 auto;
  opacity: 0; }
  @media only screen and (min-width: 520px) {
    .casestudy.fc .responsive-demo-1 h3, .casestudy.fc .responsive-demo-1 p,
    .casestudy.fc .responsive-demo-2 h3,
    .casestudy.fc .responsive-demo-2 p,
    .casestudy.fc .responsive-demo-3 h3,
    .casestudy.fc .responsive-demo-3 p {
      width: 80%; } }
  @media only screen and (min-width: 520px) {
    .casestudy.fc .responsive-demo-1 h3, .casestudy.fc .responsive-demo-1 p,
    .casestudy.fc .responsive-demo-2 h3,
    .casestudy.fc .responsive-demo-2 p,
    .casestudy.fc .responsive-demo-3 h3,
    .casestudy.fc .responsive-demo-3 p {
      margin: 1em auto 0 auto; } }

.casestudy.fc .responsive-demo-1 h3,
.casestudy.fc .responsive-demo-2 h3,
.casestudy.fc .responsive-demo-3 h3 {
  font-size: 120%; }

.casestudy.fc .responsive-demo-1 p,
.casestudy.fc .responsive-demo-2 p,
.casestudy.fc .responsive-demo-3 p {
  font-size: 80%;
  line-height: 1.6; }
  @media only screen and (min-width: 560px) {
    .casestudy.fc .responsive-demo-1 p,
    .casestudy.fc .responsive-demo-2 p,
    .casestudy.fc .responsive-demo-3 p {
      line-height: 1.8; } }

.casestudy.fc .responsive-demo-1 .caption,
.casestudy.fc .responsive-demo-2 .caption,
.casestudy.fc .responsive-demo-3 .caption {
  font-size: 70%;
  font-style: italic;
  max-width: 30em;
  margin: 1.25em auto 2em auto;
  opacity: 0;
  display: none; }
  @media only screen and (min-height: 520px) {
    .casestudy.fc .responsive-demo-1 .caption,
    .casestudy.fc .responsive-demo-2 .caption,
    .casestudy.fc .responsive-demo-3 .caption {
      display: block;
      margin: 1.5em auto 3em auto; } }

.casestudy.fc .responsive-demo-1.in-down h3, .casestudy.fc .responsive-demo-1.in-up h3,
.casestudy.fc .responsive-demo-2.in-down h3,
.casestudy.fc .responsive-demo-2.in-up h3,
.casestudy.fc .responsive-demo-3.in-down h3,
.casestudy.fc .responsive-demo-3.in-up h3 {
  -webkit-animation: csFadeInUp 900ms ease-out 600ms both;
          animation: csFadeInUp 900ms ease-out 600ms both; }

.casestudy.fc .responsive-demo-1.in-down p, .casestudy.fc .responsive-demo-1.in-up p,
.casestudy.fc .responsive-demo-2.in-down p,
.casestudy.fc .responsive-demo-2.in-up p,
.casestudy.fc .responsive-demo-3.in-down p,
.casestudy.fc .responsive-demo-3.in-up p {
  -webkit-animation: csFadeInUp 900ms ease-out 800ms both;
          animation: csFadeInUp 900ms ease-out 800ms both; }

.casestudy.fc .responsive-demo-1.in-down .caption, .casestudy.fc .responsive-demo-1.in-up .caption,
.casestudy.fc .responsive-demo-2.in-down .caption,
.casestudy.fc .responsive-demo-2.in-up .caption,
.casestudy.fc .responsive-demo-3.in-down .caption,
.casestudy.fc .responsive-demo-3.in-up .caption {
  -webkit-animation: csFadeInStatic 900ms ease-in 1000ms both;
          animation: csFadeInStatic 900ms ease-in 1000ms both; }

.casestudy.fc .responsive-demo-1.out-down h3, .casestudy.fc .responsive-demo-1.out-down p, .casestudy.fc .responsive-demo-1.out-up h3, .casestudy.fc .responsive-demo-1.out-up p,
.casestudy.fc .responsive-demo-2.out-down h3,
.casestudy.fc .responsive-demo-2.out-down p,
.casestudy.fc .responsive-demo-2.out-up h3,
.casestudy.fc .responsive-demo-2.out-up p,
.casestudy.fc .responsive-demo-3.out-down h3,
.casestudy.fc .responsive-demo-3.out-down p,
.casestudy.fc .responsive-demo-3.out-up h3,
.casestudy.fc .responsive-demo-3.out-up p {
  -webkit-animation: csFadeOutDown 300ms ease-in 0ms both;
          animation: csFadeOutDown 300ms ease-in 0ms both; }

.casestudy.fc .responsive-demo-1.out-down .caption, .casestudy.fc .responsive-demo-1.out-up .caption,
.casestudy.fc .responsive-demo-2.out-down .caption,
.casestudy.fc .responsive-demo-2.out-up .caption,
.casestudy.fc .responsive-demo-3.out-down .caption,
.casestudy.fc .responsive-demo-3.out-up .caption {
  -webkit-animation: csFadeOutStatic 400ms ease-out 0ms both;
          animation: csFadeOutStatic 400ms ease-out 0ms both; }

.casestudy.fc .responsive-demo-1.out-up h3, .casestudy.fc .responsive-demo-1.out-up p, .casestudy.fc .responsive-demo-1.out-up .caption,
.casestudy.fc .responsive-demo-3.out-down h3,
.casestudy.fc .responsive-demo-3.out-down p,
.casestudy.fc .responsive-demo-3.out-down .caption,
.casestudy.fc .responsive-demo-3.in-up h3,
.casestudy.fc .responsive-demo-3.in-up p,
.casestudy.fc .responsive-demo-3.in-up .caption {
  opacity: 1;
  -webkit-animation: none;
          animation: none; }

.casestudy.fc .carousel-panel p {
  font-size: 80%;
  text-align: center;
  width: 90%;
  max-width: 40em;
  margin: 0 auto 1.5em auto;
  padding: 0 1rem;
  line-height: 1.8; }
  @media only screen and (min-width: 520px) {
    .casestudy.fc .carousel-panel p {
      width: 80%; } }
  @media screen and (min-width: 1025px) {
    .casestudy.fc .carousel-panel p {
      padding: 0 2rem; } }

.casestudy.fc .carousel .slide {
  max-width: 9rem; }
  @media only screen and (min-height: 360px) {
    .casestudy.fc .carousel .slide {
      max-width: 13rem; } }
  @media only screen and (min-height: 440px) {
    .casestudy.fc .carousel .slide {
      max-width: 18rem; } }
  @media only screen and (min-height: 550px) {
    .casestudy.fc .carousel .slide {
      max-width: 27rem; } }
  @media only screen and (min-height: 660px) {
    .casestudy.fc .carousel .slide {
      max-width: 33rem; } }
  @media only screen and (min-height: 720px) {
    .casestudy.fc .carousel .slide {
      max-width: 38rem; } }
  @media only screen and (min-height: 840px) {
    .casestudy.fc .carousel .slide {
      max-width: 42rem; } }
  @media only screen and (min-height: 920px) {
    .casestudy.fc .carousel .slide {
      max-width: 54rem; } }

.casestudy.fc .carousel .in-browser img {
  display: block;
  width: 100%;
  height: auto; }

.casestudy.fc .carousel .in-ipad .ipad {
  width: 83.5%;
  margin: 0 auto; }

.casestudy.fc .carousel .in-iphone .iphone {
  float: left;
  width: 29%;
  margin-right: 6.5%; }
  .casestudy.fc .carousel .in-iphone .iphone:last-child {
    float: right;
    margin-right: 0; }

.casestudy.ravens .hero {
  background-image: url("../images/ravens-hero.jpg");
  background-position: 35% 15%; }
  .casestudy.ravens .hero .logo {
    position: absolute;
    width: 28%;
    min-width: 10rem; }
    @media screen and (min-width: 1025px) {
      .casestudy.ravens .hero .logo {
        width: 23%; } }

.casestudy.ravens .introduction,
.casestudy.ravens .design-concept {
  font-size: .9rem;
  text-align: center;
  padding: 2em; }
  .casestudy.ravens .introduction h3,
  .casestudy.ravens .design-concept h3 {
    font-size: inherit;
    line-height: 1.5;
    margin-top: 0; }
  .casestudy.ravens .introduction p,
  .casestudy.ravens .design-concept p {
    font-size: 70%;
    line-height: 1.8;
    max-width: 45em;
    margin: 1em auto 0 auto; }
  @media only screen and (min-width: 600px) {
    .casestudy.ravens .introduction,
    .casestudy.ravens .design-concept {
      font-size: 1rem; } }
  @media only screen and (min-width: 640px) {
    .casestudy.ravens .introduction,
    .casestudy.ravens .design-concept {
      font-size: 1.1rem;
      padding: 3em 2.5em; } }
  @media only screen and (min-width: 740px) {
    .casestudy.ravens .introduction,
    .casestudy.ravens .design-concept {
      font-size: 1.2rem;
      padding: 4em 3em; } }
  @media only screen and (min-width: 850px) {
    .casestudy.ravens .introduction,
    .casestudy.ravens .design-concept {
      font-size: 1.5rem;
      padding: 5em 4em; } }
  @media only screen and (min-width: 1000px) {
    .casestudy.ravens .introduction,
    .casestudy.ravens .design-concept {
      padding: 6.5em 4em; } }
  .casestudy.ravens .introduction.post-appear h3,
  .casestudy.ravens .design-concept.post-appear h3 {
    -webkit-animation: csFadeInUp 600ms ease-out 700ms both;
            animation: csFadeInUp 600ms ease-out 700ms both; }
  .casestudy.ravens .introduction.post-appear p,
  .casestudy.ravens .design-concept.post-appear p {
    -webkit-animation: csFadeInUp 600ms ease-out 1000ms both;
            animation: csFadeInUp 600ms ease-out 1000ms both; }

.casestudy.ravens .ipads {
  padding-bottom: 2rem; }
  .casestudy.ravens .ipads .container {
    overflow: hidden;
    position: relative;
    padding: 0; }
    .casestudy.ravens .ipads .container .ipad {
      position: absolute; }
    .casestudy.ravens .ipads .container .horizontal {
      width: 61.93%;
      bottom: -16%;
      left: 7%; }
    .casestudy.ravens .ipads .container .vertical {
      width: 44%;
      bottom: -22%;
      left: 49%; }
    .casestudy.ravens .ipads .container::before {
      content: "";
      display: block;
      padding-top: 55%; }
    .casestudy.ravens .ipads .container::after {
      content: "";
      display: block;
      position: absolute;
      bottom: 0;
      left: 3%;
      right: 3%;
      height: 10%;
      background-image: url("../images/ravens-ipad-shadow.png");
      background-size: contain;
      background-repeat: no-repeat;
      background-position: 50% 100%; }
      @media only screen and (min-width: 1400px) {
        .casestudy.ravens .ipads .container::after {
          left: 2%;
          right: 2%; } }

.casestudy.ravens .wireframe-panel .slide img {
  display: block;
  width: 100%;
  height: auto; }

.casestudy.ravens .carousel-panel .slide {
  position: relative;
  background-image: url("../images/ipad-horizontal-flipped.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 50% 50%; }
  .casestudy.ravens .carousel-panel .slide::before {
    content: '';
    display: block;
    padding-top: 71.04%; }
  .casestudy.ravens .carousel-panel .slide img {
    position: absolute;
    display: block;
    top: 6.5%;
    left: 9%;
    width: 82%;
    height: auto; }

.casestudy.fod .hero {
  background-image: url("../images/fod-hero-bg.jpg");
  background-position: 50% 0%;
  text-align: center; }
  .casestudy.fod .hero .logo {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    display: inline-block;
    bottom: auto;
    right: auto;
    width: 35%;
    min-width: 11rem;
    max-width: 40rem;
    -webkit-animation: csFodLogoReveal 1100ms ease-in 1200ms both;
            animation: csFodLogoReveal 1100ms ease-in 1200ms both; }

.casestudy.fod .icons,
.casestudy.fod .phone-section,
.casestudy.fod .closing-paragraph {
  font-size: 1.1rem;
  text-align: center; }
  @media only screen and (min-width: 500px) {
    .casestudy.fod .icons,
    .casestudy.fod .phone-section,
    .casestudy.fod .closing-paragraph {
      font-size: 1.2rem; } }
  @media only screen and (min-width: 740px) {
    .casestudy.fod .icons,
    .casestudy.fod .phone-section,
    .casestudy.fod .closing-paragraph {
      font-size: 1.3rem; } }
  @media only screen and (min-width: 850px) {
    .casestudy.fod .icons,
    .casestudy.fod .phone-section,
    .casestudy.fod .closing-paragraph {
      font-size: 1.5rem; } }
  .casestudy.fod .icons h3,
  .casestudy.fod .phone-section h3,
  .casestudy.fod .closing-paragraph h3 {
    font-size: 100%;
    line-height: 1.5;
    width: 90%;
    max-width: 30em;
    margin: 1em auto; }
  .casestudy.fod .icons p,
  .casestudy.fod .phone-section p,
  .casestudy.fod .closing-paragraph p {
    font-size: 70%;
    line-height: 1.8;
    width: 90%;
    max-width: 46em;
    margin: 1em auto; }

.casestudy.fod .icons {
  padding-top: 2em;
  padding-bottom: 2em; }
  @media only screen and (min-width: 740px) {
    .casestudy.fod .icons {
      padding-top: 3em;
      padding-bottom: 3em; } }
  @media only screen and (min-width: 900px) {
    .casestudy.fod .icons {
      padding-top: 4em;
      padding-bottom: 4em; } }

.casestudy.fod .icons .intro-text.pre-appear h3, .casestudy.fod .icons .intro-text.pre-appear p, .casestudy.fod .icons .intro-text.disappear h3, .casestudy.fod .icons .intro-text.disappear p {
  opacity: 0; }

.casestudy.fod .icons .intro-text.appear h3 {
  -webkit-animation: csFadeInUp 900ms ease-out 0ms both;
          animation: csFadeInUp 900ms ease-out 0ms both; }

.casestudy.fod .icons .intro-text.appear p {
  -webkit-animation: csFadeInUp 900ms ease-out 200ms both;
          animation: csFadeInUp 900ms ease-out 200ms both; }

.casestudy.fod .icon-image {
  width: 80%;
  margin: 3em auto; }
  .casestudy.fod .icon-image img {
    display: block;
    width: 100%;
    height: auto; }
  .casestudy.fod .icon-image .medium, .casestudy.fod .icon-image .large {
    display: none; }
  @media only screen and (min-width: 520px) {
    .casestudy.fod .icon-image {
      margin: 4em auto; } }
  @media only screen and (min-width: 720px) {
    .casestudy.fod .icon-image {
      margin: 4.5em auto; }
      .casestudy.fod .icon-image .small {
        display: none; }
      .casestudy.fod .icon-image .medium {
        display: block; } }
  @media only screen and (min-width: 1100px) {
    .casestudy.fod .icon-image {
      width: 70%; }
      .casestudy.fod .icon-image .medium {
        display: none; }
      .casestudy.fod .icon-image .large {
        display: block; } }
  .casestudy.fod .icon-image.pre-appear, .casestudy.fod .icon-image.disappear {
    opacity: 0; }
  .casestudy.fod .icon-image.appear {
    -webkit-animation: reveal 1500ms ease-out 0ms both;
            animation: reveal 1500ms ease-out 0ms both; }

.casestudy.fod .after-icons-text.pre-appear, .casestudy.fod .after-icons-text.disappear,
.casestudy.fod .outro-text.pre-appear,
.casestudy.fod .outro-text.disappear {
  opacity: 0; }

.casestudy.fod .after-icons-text.appear,
.casestudy.fod .outro-text.appear {
  -webkit-animation: csFadeInUp 900ms ease-out 0ms both;
          animation: csFadeInUp 900ms ease-out 0ms both; }

.casestudy.fod .carousel-holder {
  width: 100%; }
  .casestudy.fod .carousel-holder::before {
    content: "";
    display: block;
    padding-top: 50%; }
    @media only screen and (min-width: 900px) {
      .casestudy.fod .carousel-holder::before {
        padding-top: 40%; } }
    @media only screen and (min-width: 1200px) {
      .casestudy.fod .carousel-holder::before {
        padding-top: 35%; } }
    @media only screen and (min-width: 1400px) {
      .casestudy.fod .carousel-holder::before {
        padding-top: 30%; } }
  .casestudy.fod .carousel-holder .arrow-left {
    left: 1rem; }
    @media only screen and (min-width: 800px) {
      .casestudy.fod .carousel-holder .arrow-left {
        left: 2rem; } }
  .casestudy.fod .carousel-holder .arrow-right {
    right: 1rem; }
    @media only screen and (min-width: 800px) {
      .casestudy.fod .carousel-holder .arrow-right {
        right: 2rem; } }

.casestudy.fod .carousel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0; }
  .casestudy.fod .carousel .swipe-wrap div {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%; }
    .casestudy.fod .carousel .swipe-wrap div:nth-child(1) {
      background-image: url("../images/fod-carousel-1.jpg"); }
    .casestudy.fod .carousel .swipe-wrap div:nth-child(2) {
      background-image: url("../images/fod-carousel-2.jpg"); }
    .casestudy.fod .carousel .swipe-wrap div:nth-child(3) {
      background-image: url("../images/fod-carousel-3.jpg"); }

.casestudy.fod .carousel-nav {
  position: absolute;
  bottom: 1rem;
  right: 1rem; }
  .casestudy.fod .carousel-nav a {
    border-color: #fff; }
    .casestudy.fod .carousel-nav a:hover, .casestudy.fod .carousel-nav a:focus, .casestudy.fod .carousel-nav a.active {
      background-color: #fff; }
  @media only screen and (min-width: 800px) {
    .casestudy.fod .carousel-nav {
      bottom: 2rem;
      right: 2rem; } }

.casestudy.fod .hide-overflow {
  overflow: hidden; }

.casestudy.fod .phone-section {
  position: relative;
  width: 100%;
  margin: 4em auto; }
  .casestudy.fod .phone-section::before {
    content: "";
    display: block;
    padding-top: 120%; }
  .casestudy.fod .phone-section .text {
    position: absolute;
    top: 0;
    width: 60%;
    height: 100%;
    text-align: left; }
    .casestudy.fod .phone-section .text h3, .casestudy.fod .phone-section .text p {
      width: 100%; }
  .casestudy.fod .phone-section .iphone {
    position: absolute;
    top: 0;
    width: 58.5036%; }
  .casestudy.fod .phone-section.phone-section-1 .text {
    right: 30%;
    transition: right 900ms cubic-bezier(0.075, 0.82, 0.165, 1) 0ms; }
  .casestudy.fod .phone-section.phone-section-1 .iphone {
    left: 80%;
    transition: left 900ms cubic-bezier(0.075, 0.82, 0.165, 1) 0ms; }
  .casestudy.fod .phone-section.phone-section-2 .text {
    left: 30%;
    transition: left 900ms cubic-bezier(0.075, 0.82, 0.165, 1) 0ms; }
  .casestudy.fod .phone-section.phone-section-2 .iphone {
    right: 80%;
    transition: right 900ms cubic-bezier(0.075, 0.82, 0.165, 1) 0ms; }
  @media only screen and (min-width: 440px) {
    .casestudy.fod .phone-section::before {
      padding-top: 90%; }
    .casestudy.fod .phone-section .iphone {
      width: 43.8777%; }
    .casestudy.fod .phone-section .text {
      width: 40%; }
    .casestudy.fod .phone-section.phone-section-1 .text {
      right: 45%; }
    .casestudy.fod .phone-section.phone-section-1 .iphone {
      left: 70%; }
    .casestudy.fod .phone-section.phone-section-2 .text {
      left: 45%; }
    .casestudy.fod .phone-section.phone-section-2 .iphone {
      right: 70%; } }
  @media only screen and (min-width: 640px) {
    .casestudy.fod .phone-section::before {
      padding-top: 70%; }
    .casestudy.fod .phone-section .iphone {
      width: 34.1271%; }
    .casestudy.fod .phone-section .text {
      width: 45%; } }
  @media only screen and (min-width: 800px) {
    .casestudy.fod .phone-section {
      max-width: 700px; }
      .casestudy.fod .phone-section::before {
        padding-top: 70%; }
      .casestudy.fod .phone-section .iphone {
        width: 34.1271%; }
      .casestudy.fod .phone-section .text {
        width: 50.8729%; }
      .casestudy.fod .phone-section.phone-section-1 .text {
        right: 49.1271%; }
      .casestudy.fod .phone-section.phone-section-1 .iphone {
        left: 65.8729%; }
      .casestudy.fod .phone-section.phone-section-2 .text {
        left: 49.1271%; }
      .casestudy.fod .phone-section.phone-section-2 .iphone {
        right: 65.8729%; } }
  @media only screen and (min-width: 1000px) {
    .casestudy.fod .phone-section {
      max-width: 860px; }
      .casestudy.fod .phone-section::before {
        padding-top: 60%; }
      .casestudy.fod .phone-section .iphone {
        width: 29.2518%; }
      .casestudy.fod .phone-section .text {
        width: 54.7482%; }
      .casestudy.fod .phone-section.phone-section-1 .text {
        right: 45.2518%; }
      .casestudy.fod .phone-section.phone-section-1 .iphone {
        left: 70.7482%; }
      .casestudy.fod .phone-section.phone-section-2 .text {
        left: 45.2518%; }
      .casestudy.fod .phone-section.phone-section-2 .iphone {
        right: 70.7482%; } }
  @media only screen and (min-width: 1200px) {
    .casestudy.fod .phone-section {
      margin: 5em auto;
      max-width: 1000px; }
      .casestudy.fod .phone-section::before {
        padding-top: 50%; }
      .casestudy.fod .phone-section .iphone {
        width: 24.3765%; }
      .casestudy.fod .phone-section .text {
        width: 58.6235%; }
      .casestudy.fod .phone-section.phone-section-1 .text {
        right: 41.3765%; }
      .casestudy.fod .phone-section.phone-section-1 .iphone {
        left: 75.6235%; }
      .casestudy.fod .phone-section.phone-section-2 .text {
        left: 41.3765%; }
      .casestudy.fod .phone-section.phone-section-2 .iphone {
        right: 75.6235%; } }
  .casestudy.fod .phone-section.pre-appear.phone-section-1 .text, .casestudy.fod .phone-section.disappear.phone-section-1 .text {
    right: 200%; }
  .casestudy.fod .phone-section.pre-appear.phone-section-1 .iphone, .casestudy.fod .phone-section.disappear.phone-section-1 .iphone {
    left: 200%; }
  .casestudy.fod .phone-section.pre-appear.phone-section-2 .text, .casestudy.fod .phone-section.disappear.phone-section-2 .text {
    left: 200%; }
  .casestudy.fod .phone-section.pre-appear.phone-section-2 .iphone, .casestudy.fod .phone-section.disappear.phone-section-2 .iphone {
    right: 200%; }

.casestudy.fod .closing-paragraph {
  padding-top: 0;
  padding-bottom: 0; }
  .casestudy.fod .closing-paragraph p:last-child {
    margin-bottom: 0; }

.casestudy.inspirato .hero {
  background-image: url("../images/inspirato-hero.jpg");
  background-position: 30% 50%; }
  .casestudy.inspirato .hero .content {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 2rem 1rem;
    width: 100%;
    text-align: left;
    -webkit-animation: reveal 1100ms ease-in 800ms both;
            animation: reveal 1100ms ease-in 800ms both; }
    @media screen and (min-width: 1025px) {
      .casestudy.inspirato .hero .content {
        padding: 4rem 2rem;
        bottom: 20%; } }
    .casestudy.inspirato .hero .content .logo {
      position: relative;
      bottom: auto;
      left: auto;
      right: auto;
      -webkit-animation: none;
              animation: none;
      width: 32%;
      min-width: 10rem; }
    .casestudy.inspirato .hero .content h2, .casestudy.inspirato .hero .content .blog article h1:not(.title), .blog article .casestudy.inspirato .hero .content h1:not(.title) {
      color: #fff;
      text-transform: none;
      margin: 1em 0 0 0;
      line-height: 1.2;
      font-size: 105%; }
      @media only screen and (min-width: 600px) {
        .casestudy.inspirato .hero .content h2, .casestudy.inspirato .hero .content .blog article h1:not(.title), .blog article .casestudy.inspirato .hero .content h1:not(.title) {
          font-size: 110%; } }
      @media only screen and (min-width: 1100px) {
        .casestudy.inspirato .hero .content h2, .casestudy.inspirato .hero .content .blog article h1:not(.title), .blog article .casestudy.inspirato .hero .content h1:not(.title) {
          font-size: 120%; } }

.casestudy.inspirato .ipad-1 {
  position: absolute;
  width: 8rem;
  bottom: 100%;
  right: 50%;
  margin-right: -4rem;
  opacity: 0;
  transition: all 0ms linear 900ms; }
  @media only screen and (min-height: 400px) {
    .casestudy.inspirato .ipad-1 {
      width: 10rem;
      margin-right: -5rem; } }
  @media only screen and (min-height: 500px) {
    .casestudy.inspirato .ipad-1 {
      width: 12rem;
      margin-right: -6rem; } }
  @media only screen and (min-width: 400px) and (min-height: 400px) {
    .casestudy.inspirato .ipad-1 {
      width: 10rem;
      margin-right: -5rem; } }
  @media only screen and (min-width: 500px) and (min-height: 500px) {
    .casestudy.inspirato .ipad-1 {
      width: 15rem;
      margin-right: -7.5rem; } }
  @media only screen and (min-width: 600px) and (min-height: 600px) {
    .casestudy.inspirato .ipad-1 {
      width: 22rem;
      margin-right: -11rem; } }
  @media only screen and (min-width: 700px) and (min-height: 700px) {
    .casestudy.inspirato .ipad-1 {
      width: 28rem;
      margin-right: -14rem; } }
  @media only screen and (min-width: 800px) and (min-height: 800px) {
    .casestudy.inspirato .ipad-1 {
      width: 34rem;
      margin-right: -17rem; } }
  @media only screen and (min-width: 920px) and (min-height: 920px) {
    .casestudy.inspirato .ipad-1 {
      width: 38rem;
      margin-right: -19rem; } }
  @media only screen and (min-width: 1200px) and (min-height: 1050px) {
    .casestudy.inspirato .ipad-1 {
      width: 46rem;
      margin-right: -23rem; } }
  .casestudy.inspirato .ipad-1 img {
    transition: opacity 400ms linear 500ms; }
  .casestudy.inspirato .ipad-1 .screen-2 {
    opacity: 0; }

.casestudy.inspirato .phone-and-ipad-container {
  position: absolute;
  bottom: 8%;
  left: 50%;
  width: 80%;
  margin-left: -40%;
  opacity: 0;
  transition: opacity 400ms ease-in 0ms, bottom 0ms linear 2000ms;
  -webkit-perspective: 120vw;
          perspective: 120vw;
  -webkit-perspective-origin: 10% 50%;
          perspective-origin: 10% 50%; }
  @media only screen and (min-aspect-ratio: 5 / 4) {
    .casestudy.inspirato .phone-and-ipad-container {
      width: 70%;
      margin-left: -35%; } }
  @media only screen and (min-aspect-ratio: 7 / 4) {
    .casestudy.inspirato .phone-and-ipad-container {
      width: 60%;
      margin-left: -30%; } }
  @media only screen and (min-aspect-ratio: 8 / 4) {
    .casestudy.inspirato .phone-and-ipad-container {
      width: 50%;
      margin-left: -25%; } }
  @media only screen and (min-aspect-ratio: 10 / 4) {
    .casestudy.inspirato .phone-and-ipad-container {
      width: 40%;
      margin-left: -20%; } }
  @media only screen and (min-aspect-ratio: 12 / 4) {
    .casestudy.inspirato .phone-and-ipad-container {
      width: 30%;
      margin-left: -15%; } }
  @media only screen and (min-aspect-ratio: 18 / 4) {
    .casestudy.inspirato .phone-and-ipad-container {
      width: 20%;
      margin-left: -10%; } }

.casestudy.inspirato .iphone {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 21%; }

.casestudy.inspirato .ipad-2 {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 74%; }

.casestudy.inspirato .fly-out {
  position: absolute;
  bottom: 0;
  left: 32.7%;
  margin-bottom: 3.35%;
  width: 60.55%;
  opacity: 0;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d; }
  .casestudy.inspirato .fly-out .shadow {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.05);
    opacity: 0; }
  .casestudy.inspirato .fly-out .bg {
    width: 100%;
    height: auto; }
  .casestudy.inspirato .fly-out .copy-1, .casestudy.inspirato .fly-out .copy-2, .casestudy.inspirato .fly-out .copy-1-shadow, .casestudy.inspirato .fly-out .copy-2-shadow {
    position: absolute;
    height: auto;
    -webkit-transform: translateZ(1px);
            transform: translateZ(1px); }
  .casestudy.inspirato .fly-out .copy-1, .casestudy.inspirato .fly-out .copy-1-shadow {
    top: 1.3%;
    left: 1.4%;
    width: 85.8%;
    background-color: rgba(255, 255, 255, 0); }
  .casestudy.inspirato .fly-out .copy-1-shadow {
    opacity: 0; }
  .casestudy.inspirato .fly-out .copy-2-shadow {
    opacity: 0; }
  .casestudy.inspirato .fly-out .copy-2, .casestudy.inspirato .fly-out .copy-2-shadow {
    top: 57.1%;
    left: 27.30%;
    width: 12.9%;
    opacity: 0; }

.casestudy.inspirato .annotations {
  position: absolute;
  width: 100%;
  height: auto;
  bottom: 0;
  left: 1.5%;
  margin-bottom: 20%;
  z-index: 2;
  opacity: 0; }

.casestudy.inspirato .content {
  font-size: .9rem;
  padding: 0 1rem;
  margin: 0; }
  @media only screen and (min-width: 500px) and (min-height: 500px) {
    .casestudy.inspirato .content {
      font-size: 1rem; } }
  @media only screen and (min-width: 700px) and (min-height: 700px) {
    .casestudy.inspirato .content {
      font-size: 1.2rem; } }
  @media only screen and (min-width: 920px) and (min-height: 920px) {
    .casestudy.inspirato .content {
      font-size: 1.4rem; } }
  .casestudy.inspirato .content h3, .casestudy.inspirato .content p {
    width: 90%;
    margin: 1em auto;
    line-height: 1.5; }
  .casestudy.inspirato .content h3 {
    font-size: 120%;
    margin-top: -.4em;
    margin-bottom: 0; }
  .casestudy.inspirato .content p {
    max-width: 46em;
    font-size: 80%;
    margin-bottom: 0;
    line-height: 1.8; }

.casestudy.inspirato .travel-well .content,
.casestudy.inspirato .more-vacations .content {
  position: absolute;
  width: 100%;
  left: 0;
  top: 50%;
  text-align: center; }
  .casestudy.inspirato .travel-well .content h3, .casestudy.inspirato .travel-well .content p,
  .casestudy.inspirato .more-vacations .content h3,
  .casestudy.inspirato .more-vacations .content p {
    opacity: 0;
    -webkit-transform: translateY(5rem);
            transform: translateY(5rem);
    transition: all 300ms ease-in;
    transition-delay: 0ms; }

.casestudy.inspirato .travel-well.in-down .content h3, .casestudy.inspirato .travel-well.in-down .content p, .casestudy.inspirato .travel-well.in-up .content h3, .casestudy.inspirato .travel-well.in-up .content p,
.casestudy.inspirato .more-vacations.in-down .content h3,
.casestudy.inspirato .more-vacations.in-down .content p,
.casestudy.inspirato .more-vacations.in-up .content h3,
.casestudy.inspirato .more-vacations.in-up .content p {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  transition: all 900ms ease-out;
  transition-delay: 600ms; }

.casestudy.inspirato .travel-well.in-down .content p, .casestudy.inspirato .travel-well.in-up .content p,
.casestudy.inspirato .more-vacations.in-down .content p,
.casestudy.inspirato .more-vacations.in-up .content p {
  transition-delay: 800ms; }

.casestudy.inspirato .travel-well.out-down .content h3, .casestudy.inspirato .travel-well.out-down .content p, .casestudy.inspirato .travel-well.out-up .content h3, .casestudy.inspirato .travel-well.out-up .content p,
.casestudy.inspirato .more-vacations.out-down .content h3,
.casestudy.inspirato .more-vacations.out-down .content p,
.casestudy.inspirato .more-vacations.out-up .content h3,
.casestudy.inspirato .more-vacations.out-up .content p {
  opacity: 0;
  -webkit-transform: translateY(5rem);
          transform: translateY(5rem);
  transition: all 600ms ease-out;
  transition-delay: 0ms; }

.casestudy.inspirato .activeclass-travel-well .ipad-1 {
  opacity: 1;
  bottom: 50%;
  transition: opacity 0ms linear 0ms, all 800ms cubic-bezier(0.645, 0.045, 0.355, 1) 100ms; }

.casestudy.inspirato .activeclass-more-vacations .ipad-1 {
  opacity: 1;
  bottom: 50%;
  transition: all 800ms cubic-bezier(0.645, 0.045, 0.355, 1) 0ms; }
  .casestudy.inspirato .activeclass-more-vacations .ipad-1 .screen-1 {
    opacity: 0; }
  .casestudy.inspirato .activeclass-more-vacations .ipad-1 .screen-2 {
    opacity: 1; }

.casestudy.inspirato .activeclass-travel-well .ipad-1,
.casestudy.inspirato .activeclass-more-vacations .ipad-1 {
  bottom: 65%; }

.casestudy.inspirato .travel-well .content,
.casestudy.inspirato .more-vacations .content {
  top: 42%; }

@media only screen and (min-width: 400px) and (min-height: 400px) {
  .casestudy.inspirato .activeclass-travel-well .ipad-1,
  .casestudy.inspirato .activeclass-more-vacations .ipad-1 {
    bottom: 62%; }
  .casestudy.inspirato .travel-well .content,
  .casestudy.inspirato .more-vacations .content {
    top: 45%; } }

@media only screen and (min-width: 500px) and (min-height: 500px) {
  .casestudy.inspirato .activeclass-travel-well .ipad-1,
  .casestudy.inspirato .activeclass-more-vacations .ipad-1 {
    bottom: 45%; }
  .casestudy.inspirato .travel-well .content,
  .casestudy.inspirato .more-vacations .content {
    top: 62%; } }

@media only screen and (min-width: 600px) and (min-height: 600px) {
  .casestudy.inspirato .activeclass-travel-well .ipad-1,
  .casestudy.inspirato .activeclass-more-vacations .ipad-1 {
    bottom: 40%; }
  .casestudy.inspirato .travel-well .content,
  .casestudy.inspirato .more-vacations .content {
    top: 67%; } }

@media only screen and (min-width: 500px) and (min-height: 500px) {
  .casestudy.inspirato .activeclass-more-vacations .ipad-1,
  .casestudy.inspirato .activeclass-discover-your-story .ipad-1 {
    transition: all 800ms cubic-bezier(0.645, 0.045, 0.355, 1) 100ms;
    margin-right: 0;
    right: 66%;
    bottom: 50%;
    width: 32rem;
    margin-bottom: -11.3664rem; }
  .casestudy.inspirato .more-vacations .content {
    width: 54%;
    margin: 0;
    top: 50%;
    left: auto;
    right: 6%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    text-align: left; }
    .casestudy.inspirato .more-vacations .content h3, .casestudy.inspirato .more-vacations .content p {
      width: 100%;
      opacity: 0;
      -webkit-transform: translateX(5rem);
              transform: translateX(5rem);
      transition: all 300ms ease-in;
      transition-delay: 0ms; }
    .casestudy.inspirato .more-vacations .content p {
      margin: 1em 0 0 0; }
  .casestudy.inspirato .more-vacations.in-down .content, .casestudy.inspirato .more-vacations.in-up .content {
    transition: all 800ms cubic-bezier(0.645, 0.045, 0.355, 1) 0ms; }
    .casestudy.inspirato .more-vacations.in-down .content h3, .casestudy.inspirato .more-vacations.in-down .content p, .casestudy.inspirato .more-vacations.in-up .content h3, .casestudy.inspirato .more-vacations.in-up .content p {
      opacity: 1;
      -webkit-transform: translateX(0);
              transform: translateX(0);
      transition: all 900ms ease-out;
      transition-delay: 600ms; }
  .casestudy.inspirato .more-vacations.out-down .content {
    right: -150%;
    transition: all 800ms cubic-bezier(0.645, 0.045, 0.355, 1) 0ms; }
    .casestudy.inspirato .more-vacations.out-down .content h3, .casestudy.inspirato .more-vacations.out-down .content p {
      opacity: 0;
      -webkit-transform: translateX(0);
              transform: translateX(0);
      transition: all 900ms ease-out;
      transition-delay: 600ms; }
  .casestudy.inspirato .more-vacations.out-up .content {
    transition: all 800ms cubic-bezier(0.645, 0.045, 0.355, 1) 0ms; }
    .casestudy.inspirato .more-vacations.out-up .content h3, .casestudy.inspirato .more-vacations.out-up .content p {
      opacity: 0;
      -webkit-transform: translateX(5rem);
              transform: translateX(5rem);
      transition: all 400ms ease-out;
      transition-delay: 0ms; } }

@media only screen and (min-width: 600px) and (min-height: 600px) {
  .casestudy.inspirato .activeclass-more-vacations .ipad-1,
  .casestudy.inspirato .activeclass-discover-your-story .ipad-1 {
    right: 60%;
    width: 38rem;
    margin-bottom: -13.4976rem; }
  .casestudy.inspirato .more-vacations .content {
    width: 48%; } }

@media only screen and (min-width: 700px) and (min-height: 700px) {
  .casestudy.inspirato .activeclass-more-vacations .ipad-1,
  .casestudy.inspirato .activeclass-discover-your-story .ipad-1 {
    right: 53%;
    width: 48rem;
    margin-bottom: -17.0496rem; }
  .casestudy.inspirato .more-vacations .content {
    width: 41%; } }

@media only screen and (min-width: 800px) and (min-height: 800px) {
  .casestudy.inspirato .activeclass-more-vacations .ipad-1,
  .casestudy.inspirato .activeclass-discover-your-story .ipad-1 {
    width: 56rem;
    margin-bottom: -19.8912rem; } }

@media only screen and (min-width: 920px) and (min-height: 920px) {
  .casestudy.inspirato .activeclass-more-vacations .ipad-1,
  .casestudy.inspirato .activeclass-discover-your-story .ipad-1 {
    width: 64rem;
    margin-bottom: -22.7328rem; } }

@media only screen and (min-width: 1200px) and (min-height: 1050px) {
  .casestudy.inspirato .activeclass-more-vacations .ipad-1,
  .casestudy.inspirato .activeclass-discover-your-story .ipad-1 {
    width: 74rem;
    margin-bottom: -26.2848rem; } }

.casestudy.inspirato .activeclass-discover-your-story .ipad-1 {
  opacity: 1;
  bottom: 100%;
  transition: opacity 0ms linear 0ms, all 800ms cubic-bezier(0.645, 0.045, 0.355, 1) 0ms; }
  .casestudy.inspirato .activeclass-discover-your-story .ipad-1 .screen-1 {
    opacity: 0; }
  .casestudy.inspirato .activeclass-discover-your-story .ipad-1 .screen-2 {
    opacity: 1; }

@media only screen and (min-width: 500px) and (min-height: 500px) {
  .casestudy.inspirato .activeclass-discover-your-story .ipad-1 {
    bottom: 50%;
    right: 150%; }
    .casestudy.inspirato .activeclass-discover-your-story .ipad-1 .screen-1 {
      opacity: 0; }
    .casestudy.inspirato .activeclass-discover-your-story .ipad-1 .screen-2 {
      opacity: 1; } }

.casestudy.inspirato .discover-your-story .content {
  position: absolute;
  width: 100%;
  left: 0;
  top: 4%;
  text-align: center; }

.casestudy.inspirato .discover-your-story h3, .casestudy.inspirato .discover-your-story p {
  opacity: 0; }

.casestudy.inspirato .discover-your-story p {
  max-width: 52em;
  display: none; }
  @media only screen and (min-height: 480px) {
    .casestudy.inspirato .discover-your-story p {
      display: block; } }

.casestudy.inspirato .discover-your-story.in-down h3 {
  -webkit-animation: csFadeInUp 900ms ease-out 600ms both;
          animation: csFadeInUp 900ms ease-out 600ms both; }

.casestudy.inspirato .discover-your-story.in-down p {
  -webkit-animation: csFadeInUp 900ms ease-out 800ms both;
          animation: csFadeInUp 900ms ease-out 800ms both; }

.casestudy.inspirato .discover-your-story.in-up h3, .casestudy.inspirato .discover-your-story.in-up p {
  -webkit-animation: csFadeInStatic 900ms ease-out 600ms both;
          animation: csFadeInStatic 900ms ease-out 600ms both; }

.casestudy.inspirato .discover-your-story.out-down h3, .casestudy.inspirato .discover-your-story.out-down p {
  -webkit-animation: csFadeOutStatic 600ms ease-out 0ms both;
          animation: csFadeOutStatic 600ms ease-out 0ms both; }

.casestudy.inspirato .discover-your-story.out-up h3, .casestudy.inspirato .discover-your-story.out-up p {
  -webkit-animation: csFadeOutUp 600ms ease-out 0ms both;
          animation: csFadeOutUp 600ms ease-out 0ms both; }

.casestudy.inspirato .activeclass-discover-your-story .ipad-1 {
  opacity: 0; }

.casestudy.inspirato .activeclass-discover-your-story .phone-and-ipad-container {
  opacity: 1;
  transition: opacity 400ms ease-in 0ms, bottom 0ms linear 0ms; }

.casestudy.inspirato .activeclass-discover-your-story .iphone {
  -webkit-animation: csDiscoverPhoneIn 600ms ease-out 600ms both;
          animation: csDiscoverPhoneIn 600ms ease-out 600ms both; }

.casestudy.inspirato .activeclass-discover-your-story .ipad-2 {
  -webkit-animation: csDiscoverPadIn 600ms ease-out 600ms both;
          animation: csDiscoverPadIn 600ms ease-out 600ms both; }

.casestudy.inspirato .activeclass-discover-your-story.up .phone-and-ipad-container {
  transition: bottom 800ms ease-out 500ms, width 800ms ease-out 500ms, margin-left 800ms ease-out 500ms; }

.casestudy.inspirato .activeclass-discover-your-story.up .fly-out {
  opacity: 0;
  transition: opacity 300ms linear 1800ms;
  -webkit-animation: csFlyInMain 800ms ease-in 500ms both;
          animation: csFlyInMain 800ms ease-in 500ms both; }
  .casestudy.inspirato .activeclass-discover-your-story.up .fly-out .shadow {
    -webkit-animation: csFlyInShadow 800ms ease-in 500ms both;
            animation: csFlyInShadow 800ms ease-in 500ms both; }
  .casestudy.inspirato .activeclass-discover-your-story.up .fly-out .copy-1 {
    -webkit-animation: csFlyInCopy1 800ms ease-in 300ms both;
            animation: csFlyInCopy1 800ms ease-in 300ms both; }
  .casestudy.inspirato .activeclass-discover-your-story.up .fly-out .copy-1-shadow {
    -webkit-animation: csFlyInCopy1Shadow 800ms ease-in 300ms both;
            animation: csFlyInCopy1Shadow 800ms ease-in 300ms both; }
  .casestudy.inspirato .activeclass-discover-your-story.up .fly-out .copy-2 {
    -webkit-animation: csFlyInCopy2 700ms ease-in 0ms both;
            animation: csFlyInCopy2 700ms ease-in 0ms both; }
  .casestudy.inspirato .activeclass-discover-your-story.up .fly-out .copy-2-shadow {
    -webkit-animation: csFlyInCopy2Shadow 800ms ease-in 300ms both;
            animation: csFlyInCopy2Shadow 800ms ease-in 300ms both; }

.casestudy.inspirato .activeclass-discover-your-story.up .iphone, .casestudy.inspirato .activeclass-discover-your-story.up .ipad-2 {
  -webkit-animation: csFadeInStatic 600ms ease-in 1200ms both;
          animation: csFadeInStatic 600ms ease-in 1200ms both; }

.casestudy.inspirato .activeclass-discover-your-story.up .annotations {
  -webkit-animation: csFadeOutStatic 700ms ease-in 0ms both;
          animation: csFadeOutStatic 700ms ease-in 0ms both; }

.casestudy.inspirato .activeclass-design-elements .phone-and-ipad-container {
  opacity: 1;
  width: 80%;
  margin-left: -40%;
  transition: bottom 800ms ease-out 800ms, width 800ms ease-out 800ms, margin-left 800ms ease-out 800ms; }

.casestudy.inspirato .activeclass-design-elements .iphone, .casestudy.inspirato .activeclass-design-elements .ipad-2 {
  -webkit-animation: csFadeOutStatic 900ms ease-out 0ms both;
          animation: csFadeOutStatic 900ms ease-out 0ms both; }

.casestudy.inspirato .activeclass-design-elements .fly-out {
  opacity: 1;
  transition: opacity 300ms linear 0ms;
  -webkit-animation: csFlyOutMain 800ms ease-out 800ms both;
          animation: csFlyOutMain 800ms ease-out 800ms both; }
  .casestudy.inspirato .activeclass-design-elements .fly-out .shadow {
    -webkit-animation: csFlyOutShadow 800ms ease-out 800ms both;
            animation: csFlyOutShadow 800ms ease-out 800ms both; }
  .casestudy.inspirato .activeclass-design-elements .fly-out .copy-1 {
    -webkit-animation: csFlyOutCopy1 800ms ease-out 1500ms both;
            animation: csFlyOutCopy1 800ms ease-out 1500ms both; }
  .casestudy.inspirato .activeclass-design-elements .fly-out .copy-1-shadow {
    -webkit-animation: csFlyOutCopy1Shadow 800ms ease-out 1500ms both;
            animation: csFlyOutCopy1Shadow 800ms ease-out 1500ms both; }
  .casestudy.inspirato .activeclass-design-elements .fly-out .copy-2 {
    -webkit-animation: csFlyOutCopy2 700ms ease-out 1900ms both;
            animation: csFlyOutCopy2 700ms ease-out 1900ms both; }
  .casestudy.inspirato .activeclass-design-elements .fly-out .copy-2-shadow {
    -webkit-animation: csFlyOutCopy2Shadow 800ms ease-out 1500ms both;
            animation: csFlyOutCopy2Shadow 800ms ease-out 1500ms both; }

.casestudy.inspirato .activeclass-design-elements .annotations {
  -webkit-animation: csFadeInStatic 400ms ease-in 2600ms both;
          animation: csFadeInStatic 400ms ease-in 2600ms both; }
  .casestudy.inspirato .activeclass-design-elements .annotations .svglinegrow {
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    -webkit-animation: csGrowLine 800ms linear 2800ms both;
            animation: csGrowLine 800ms linear 2800ms both; }

@-webkit-keyframes csFadeInStatic {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes csFadeInStatic {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@-webkit-keyframes csFadeOutStatic {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@keyframes csFadeOutStatic {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@-webkit-keyframes csFadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(3rem);
            transform: translateY(3rem); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0); } }

@keyframes csFadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(3rem);
            transform: translateY(3rem); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0); } }

@-webkit-keyframes csFadeOutDown {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(3rem);
            transform: translateY(3rem); } }

@keyframes csFadeOutDown {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(3rem);
            transform: translateY(3rem); } }

@-webkit-keyframes csFadeOutUp {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-3rem);
            transform: translateY(-3rem); } }

@keyframes csFadeOutUp {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-3rem);
            transform: translateY(-3rem); } }

@-webkit-keyframes csFodLogoReveal {
  0% {
    opacity: 0; }
  1% {
    opacity: 0;
    -webkit-transform: translateY(-50%) scale(0.98);
            transform: translateY(-50%) scale(0.98); }
  100% {
    opacity: 1.0;
    -webkit-transform: translateY(-50%) scale(1);
            transform: translateY(-50%) scale(1); } }

@keyframes csFodLogoReveal {
  0% {
    opacity: 0; }
  1% {
    opacity: 0;
    -webkit-transform: translateY(-50%) scale(0.98);
            transform: translateY(-50%) scale(0.98); }
  100% {
    opacity: 1.0;
    -webkit-transform: translateY(-50%) scale(1);
            transform: translateY(-50%) scale(1); } }

@-webkit-keyframes csDiscoverPhoneIn {
  0% {
    opacity: 0;
    left: 2%; }
  100% {
    opacity: 1;
    left: 0; } }

@keyframes csDiscoverPhoneIn {
  0% {
    opacity: 0;
    left: 2%; }
  100% {
    opacity: 1;
    left: 0; } }

@-webkit-keyframes csDiscoverPadIn {
  0% {
    opacity: 0;
    right: 2%; }
  100% {
    opacity: 1;
    right: 0; } }

@keyframes csDiscoverPadIn {
  0% {
    opacity: 0;
    right: 2%; }
  100% {
    opacity: 1;
    right: 0; } }

@-webkit-keyframes csFlyOutMain {
  0% {
    -webkit-transform: rotateX(0deg) rotateZ(0deg) scale(1);
            transform: rotateX(0deg) rotateZ(0deg) scale(1);
    left: 32.7%;
    margin-bottom: 3.35%; }
  100% {
    -webkit-transform: rotateX(35deg) rotateZ(-8deg) scale(0.675);
            transform: rotateX(35deg) rotateZ(-8deg) scale(0.675);
    left: 15.9%;
    margin-bottom: 5.7%; } }

@keyframes csFlyOutMain {
  0% {
    -webkit-transform: rotateX(0deg) rotateZ(0deg) scale(1);
            transform: rotateX(0deg) rotateZ(0deg) scale(1);
    left: 32.7%;
    margin-bottom: 3.35%; }
  100% {
    -webkit-transform: rotateX(35deg) rotateZ(-8deg) scale(0.675);
            transform: rotateX(35deg) rotateZ(-8deg) scale(0.675);
    left: 15.9%;
    margin-bottom: 5.7%; } }

@-webkit-keyframes csFlyOutShadow {
  0% {
    opacity: 0;
    -webkit-transform: translateZ(0) scale(1);
            transform: translateZ(0) scale(1); }
  100% {
    opacity: 1;
    -webkit-transform: translateZ(-5vw) scale(1.05);
            transform: translateZ(-5vw) scale(1.05); } }

@keyframes csFlyOutShadow {
  0% {
    opacity: 0;
    -webkit-transform: translateZ(0) scale(1);
            transform: translateZ(0) scale(1); }
  100% {
    opacity: 1;
    -webkit-transform: translateZ(-5vw) scale(1.05);
            transform: translateZ(-5vw) scale(1.05); } }

@-webkit-keyframes csFlyOutCopy1 {
  0% {
    -webkit-transform: translateZ(1px);
            transform: translateZ(1px); }
  100% {
    -webkit-transform: translateZ(2vw);
            transform: translateZ(2vw); } }

@keyframes csFlyOutCopy1 {
  0% {
    -webkit-transform: translateZ(1px);
            transform: translateZ(1px); }
  100% {
    -webkit-transform: translateZ(2vw);
            transform: translateZ(2vw); } }

@-webkit-keyframes csFlyOutCopy1Shadow {
  0% {
    opacity: 0;
    -webkit-filter: blur(0);
            filter: blur(0); }
  100% {
    opacity: .5;
    -webkit-filter: blur(0.1vw);
            filter: blur(0.1vw); } }

@keyframes csFlyOutCopy1Shadow {
  0% {
    opacity: 0;
    -webkit-filter: blur(0);
            filter: blur(0); }
  100% {
    opacity: .5;
    -webkit-filter: blur(0.1vw);
            filter: blur(0.1vw); } }

@-webkit-keyframes csFlyOutCopy2Shadow {
  0% {
    opacity: 0;
    -webkit-filter: blur(0);
            filter: blur(0); }
  50% {
    opacity: 0;
    -webkit-filter: blur(0);
            filter: blur(0); }
  100% {
    opacity: .5;
    -webkit-filter: blur(0.1vw);
            filter: blur(0.1vw); } }

@keyframes csFlyOutCopy2Shadow {
  0% {
    opacity: 0;
    -webkit-filter: blur(0);
            filter: blur(0); }
  50% {
    opacity: 0;
    -webkit-filter: blur(0);
            filter: blur(0); }
  100% {
    opacity: .5;
    -webkit-filter: blur(0.1vw);
            filter: blur(0.1vw); } }

@-webkit-keyframes csFlyOutCopy2 {
  0% {
    opacity: 0;
    -webkit-transform: translateZ(1px);
            transform: translateZ(1px); }
  100% {
    opacity: 1;
    -webkit-transform: translateZ(1.8vw);
            transform: translateZ(1.8vw); } }

@keyframes csFlyOutCopy2 {
  0% {
    opacity: 0;
    -webkit-transform: translateZ(1px);
            transform: translateZ(1px); }
  100% {
    opacity: 1;
    -webkit-transform: translateZ(1.8vw);
            transform: translateZ(1.8vw); } }

@-webkit-keyframes csGrowLine {
  100% {
    stroke-dashoffset: 0; } }

@keyframes csGrowLine {
  100% {
    stroke-dashoffset: 0; } }

@-webkit-keyframes csFlyInMain {
  0% {
    -webkit-transform: rotateX(35deg) rotateZ(-8deg) scale(0.675);
            transform: rotateX(35deg) rotateZ(-8deg) scale(0.675);
    left: 15.9%;
    margin-bottom: 5.7%; }
  100% {
    -webkit-transform: rotateX(0deg) rotateZ(0deg) scale(1);
            transform: rotateX(0deg) rotateZ(0deg) scale(1);
    left: 32.7%;
    margin-bottom: 3.35%; } }

@keyframes csFlyInMain {
  0% {
    -webkit-transform: rotateX(35deg) rotateZ(-8deg) scale(0.675);
            transform: rotateX(35deg) rotateZ(-8deg) scale(0.675);
    left: 15.9%;
    margin-bottom: 5.7%; }
  100% {
    -webkit-transform: rotateX(0deg) rotateZ(0deg) scale(1);
            transform: rotateX(0deg) rotateZ(0deg) scale(1);
    left: 32.7%;
    margin-bottom: 3.35%; } }

@-webkit-keyframes csFlyInShadow {
  0% {
    opacity: 1;
    -webkit-transform: translateZ(-5vw) scale(1.05);
            transform: translateZ(-5vw) scale(1.05); }
  100% {
    opacity: 0;
    -webkit-transform: translateZ(0) scale(1);
            transform: translateZ(0) scale(1); } }

@keyframes csFlyInShadow {
  0% {
    opacity: 1;
    -webkit-transform: translateZ(-5vw) scale(1.05);
            transform: translateZ(-5vw) scale(1.05); }
  100% {
    opacity: 0;
    -webkit-transform: translateZ(0) scale(1);
            transform: translateZ(0) scale(1); } }

@-webkit-keyframes csFlyInCopy1 {
  0% {
    -webkit-transform: translateZ(2vw);
            transform: translateZ(2vw); }
  100% {
    -webkit-transform: translateZ(1px);
            transform: translateZ(1px); } }

@keyframes csFlyInCopy1 {
  0% {
    -webkit-transform: translateZ(2vw);
            transform: translateZ(2vw); }
  100% {
    -webkit-transform: translateZ(1px);
            transform: translateZ(1px); } }

@-webkit-keyframes csFlyInCopy1Shadow {
  0% {
    opacity: .67;
    -webkit-filter: blur(0.1vw);
            filter: blur(0.1vw); }
  100% {
    opacity: 0;
    -webkit-filter: blur(0);
            filter: blur(0); } }

@keyframes csFlyInCopy1Shadow {
  0% {
    opacity: .67;
    -webkit-filter: blur(0.1vw);
            filter: blur(0.1vw); }
  100% {
    opacity: 0;
    -webkit-filter: blur(0);
            filter: blur(0); } }

@-webkit-keyframes csFlyInCopy2 {
  0% {
    opacity: 1;
    -webkit-transform: translateZ(1.8vw);
            transform: translateZ(1.8vw); }
  100% {
    opacity: 1;
    -webkit-transform: translateZ(1px);
            transform: translateZ(1px); } }

@keyframes csFlyInCopy2 {
  0% {
    opacity: 1;
    -webkit-transform: translateZ(1.8vw);
            transform: translateZ(1.8vw); }
  100% {
    opacity: 1;
    -webkit-transform: translateZ(1px);
            transform: translateZ(1px); } }

.invite {
  text-align: center; }
  .invite .logo {
    display: block;
    margin: 0 auto;
    width: 2.5rem;
    background-position: center center;
    background-repeat: no-repeat;
    background-image: url("../images/bpxl-logo-tribar.svg");
    /* -webkit-animation: reveal 1s ease-in;
    animation: reveal 1s ease-in; */ }
    @media screen and (min-width: 768px) {
      .invite .logo {
        width: 5rem; } }
    @media screen and (min-width: 1025px) {
      .invite .logo {
        width: 26rem; } }
  .invite section {
    padding: 0; }
  .invite section:first-of-type {
    padding: 3rem 0 2rem 0; }
    @media screen and (min-width: 768px) {
      .invite section:first-of-type {
        padding: 3rem 0; } }
    @media screen and (min-width: 1025px) {
      .invite section:first-of-type {
        padding: 5rem 0 3rem 0; } }
  .invite article {
    width: 100%;
    margin: 0 auto;
    padding-bottom: 5rem;
    /* -webkit-animation: reveal 1s ease-in;
    animation: reveal 1s ease-in; */ }
    @media screen and (min-width: 768px) {
      .invite article {
        width: 88%; } }
  .invite .hero {
    display: block;
    width: 100%; }
    .invite .hero ul li {
      display: inline-block;
      height: 300px;
      width: 10px;
      margin: 0 1.3rem;
      position: relative; }
      @media screen and (min-width: 768px) {
        .invite .hero ul li {
          margin: 0 2rem; } }
      .invite .hero ul li .lightsaber {
        margin: 0 auto;
        display: block;
        width: 10px;
        height: 56px;
        border-radius: 6px;
        border: 2px solid #999;
        position: absolute;
        bottom: 0;
        left: 0; }
      .invite .hero ul li .blade {
        width: 10px;
        height: 240px;
        border-radius: 6px;
        background: #eee;
        position: absolute;
        top: 0;
        left: 0; }
      .invite .hero ul li .darth {
        background-color: #fd4f57; }
      .invite .hero ul li .darth:hover, .invite .hero ul li .darth:active {
        box-shadow: 0 0 7px #fd4f57; }
      .invite .hero ul li .luke {
        background-color: #00c182; }
      .invite .hero ul li .luke:hover, .invite .hero ul li .luke:active {
        box-shadow: 0 0 7px #00c182; }
      .invite .hero ul li .mace {
        background-color: #6f618a; }
      .invite .hero ul li .mace:hover, .invite .hero ul li .mace:active {
        box-shadow: 0 0 7px #6f618a; }
      .invite .hero ul li .obi-wan {
        background-color: #3f8ddd; }
      .invite .hero ul li .obi-wan:hover, .invite .hero ul li .obi-wan:active {
        box-shadow: 0 0 7px #3f8ddd; }
  .invite h1 {
    text-transform: uppercase;
    font-size: 1.6rem;
    letter-spacing: 0.2rem;
    line-height: 1;
    margin: 1.0rem 0 3.0rem 0; }
    @media screen and (min-width: 768px) {
      .invite h1 {
        font-size: 2.0rem;
        letter-spacing: 0.25rem;
        margin: 2.0rem 0 3.5rem 0; } }
  .invite h2, .invite .blog article h1:not(.title), .blog article .invite h1:not(.title) {
    font-size: 1.1rem;
    letter-spacing: 0.2rem;
    margin: 3.0rem 0; }
    @media screen and (min-width: 768px) {
      .invite h2, .invite .blog article h1:not(.title), .blog article .invite h1:not(.title) {
        font-size: 1.25rem; } }
  .invite p {
    float: none;
    text-transform: uppercase;
    margin: 0 0 1.5rem 0;
    font-size: 0.95rem;
    line-height: 1.6;
    width: 100%;
    color: #363640; }
    .invite p span {
      padding: 0 0.5rem;
      font-weight: 700; }
  .invite .red {
    color: #fd4f57; }
  .invite .green {
    color: #00c182; }