/* html h2 {
  font-family: "SF Display"; } */

html .section-subtitle {
  /* font-family: "SF Text"; */
  letter-spacing: -0.5px; }

/* html .takeaway-title {
  font-family: "SF Display"; }

html .is-content p {
  font-family: "SF Display"; }

html .is-content span {
  font-family: "SF Display"; } */

.contact {
  margin-top: 0; }

.sharing-area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center; }

.is-content p {
  margin-bottom: 5px; }

.img-wrapper {
  background: #fff; }
  .img-wrapper img {
    max-width: 640px;
    cursor: pointer; }

.txtext {
  text-decoration: none;
  color: #1769ff !important;
  position: relative; }

.card {
  border: 0; }
  .card .content {
    margin-top: 10px; }

.about .cover {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }

.about img {
  width: 100%;
  border-radius: 10px; }

@media (min-width: 768px) {
  .navbar-left {
    float: left !important; }
  .navbar-collapse {
    -ms-flex-preferred-size: auto !important;
    flex-basis: auto !important; }
  .index-page .navbar-transparent {
    padding-bottom: 20px; }
  .navbar-right {
    float: right !important;
    margin-right: -15px;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row; }
    .navbar-right li {
      margin-right: 20px; }
  .navbar-right ~ .navbar-right {
    margin-right: 0; }
  .collapse:not(.show) {
    display: block; } }

.padded {
  padding: 70px; }

h2 {
  font-weight: 500; }

img {
  width: 100%; }

section.challenge {
  background: #2B178A;
  color: #fff;
  text-align: left; }
  section.challenge h2 {
    font-size: 32px;
    margin-bottom: 30px;
    font-weight: 400; }
  section.challenge .section-subtitle {
    font-size: 34px;
    line-height: 1.2;
    max-width: 900px;
    font-weight: 500; }

section.challenge.padded {
  padding-top: 120px;
  padding-bottom: 120px; }

section.process {
  padding: 100px; }
  section.process h2 {
    font-size: 32px;
    margin-bottom: 60px; }

section.users {
  color: #fff;
  background: #3783DB;
  padding-bottom: 100px; }

section.items {
  padding: 100px;
  background: #F5F5F7; }
  section.items .section-subtitle {
    margin-top: 5px; }
  section.items h2 {
    font-size: 27px;
    font-weight: 500;
    letter-spacing: -0.5px; }
  section.items img {
    border: 15px solid #fff; }

section.takeaways {
  color: #fff;
  background: #12171e;
  padding-bottom: 90px; }
  section.takeaways h2 {
    margin-bottom: 50px;
    font-size: 32px; }
  section.takeaways .takeaway-title {
    max-width: 170px;
    text-align: center;
    line-height: 1.3;
    margin-top: 20px;
    font-size: 18px; }

section.design-system {
  color: #fff;
  background: #12171e;
  padding-top: 120px;
  padding-bottom: 120px; }
  section.design-system h2 {
    font-size: 32px;
    line-height: 1.1;
    margin-bottom: 20px; }

section.conclusion {
  color: #fff;
  background: #12171e;
  padding-top: 60px;
  padding-bottom: 60px; }
  section.conclusion h2 {
    font-size: 32px;
    line-height: 1.1;
    margin-bottom: 20px; }

section.old-products {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  text-align: center; }
  section.old-products h2 {
    font-size: 24px; }

.section-subtitle {
  max-width: 600px;
  font-size: 16px; }

.video-engine .section-hero {
  background-image: url("../img/videolibrary/hero_video_library.jpg");
  width: 100%;
  height: 850px;
  background-size: cover;
  background-position: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: start;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center; }
  .video-engine .section-hero .hero-copy {
    text-align: center; }
    .video-engine .section-hero .hero-copy h1 {
      margin-top: 100px;
      font-weight: 500;
      font-size: 40px;
      letter-spacing: -0.5px; }
    .video-engine .section-hero .hero-copy .hero-subtitle {
      font-size: 18px;
      font-weight: 300; }

.video-engine .section-summary {
  padding-top: 100px;
  padding-bottom: 100px;
  margin-bottom: 0;
  background-color: #12171e; }

.video-engine section.hero-2 {
  background: #F5F5F7;
  padding: 70px; }
  .video-engine section.hero-2 .container {
    max-width: 100%; }
  .video-engine section.hero-2 img {
    width: 100%; }

.video-engine section.syndication {
  padding: 100px; }
  .video-engine section.syndication h2 {
    font-size: 30px; }

.video-engine section.interactions {
  background: #F4F5F7; }
  .video-engine section.interactions h2 {
    text-align: left;
    font-size: 28px; }
  .video-engine section.interactions .divider {
    background: none;
    height: 1px;
    width: 100%;
    margin-top: 5px;
    margin-bottom: 15px; }
  .video-engine section.interactions .interaction-spacer {
    margin-top: 50px; }

.video-engine section.wireframes {
  background: #FFF;
  padding-top: 100px;
  padding-bottom: 100px; }
  .video-engine section.wireframes image {
    cursor: pointer; }
  .video-engine section.wireframes h2 {
    text-align: left;
    font-size: 28px; }
  .video-engine section.wireframes .divider {
    background: none;
    height: 1px;
    width: 100%;
    margin-top: 5px;
    margin-bottom: 15px; }
  .video-engine section.wireframes .interaction-spacer {
    margin-top: 50px; }

@font-face {
  font-family: 'SF';
  src: url("SFProDisplay-Medium.woff2") format("woff2"), url("SFProDisplay-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal; }

@font-face {
  font-family: 'SF';
  src: url("SFProDisplay-Regular.woff2") format("woff2"), url("SFProDisplay-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'SF';
  src: url("SFProDisplay-Light.woff2") format("woff2"), url("SFProDisplay-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal; }

/* .section.contact {
  margin-top:0;
} */
.navbar .navbar-nav.navbar-white > li > a {
  color: #fff; }

.navbar .navbar-brand.logo-white {
  color: #fff; }

.hero h1 {
  font-family: "SF";
  font-weight: 300; }

.hero .txtext {
  font-weight: 400; }

.portfolio-image {
  display: block;
  margin-left: auto;
  margin-right: auto; }

@media (max-width: 414px) {
  .portfolio-image {
    width: 100%; } }

@media (min-width: 1200px) {
  .hero h1 {
    font-size: 50px;
    letter-spacing: 1.4px; }
  .hero {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%; } }

@media (min-width: 1200px) {
  .hero h1 span {
    display: block; } }

.card-nav-tabs p {
  font-size: 22px; }

body,
html {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%; }

#wrapper {
  display: table;
  width: 100%;
  height: 100%; }

#wrapper-inner {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
  height: 100%; }

#scroll-down {
  display: block;
  /* position: relative; */
  padding-top: 79px;
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 30px;
  margin-left: auto;
  margin-right: auto; }

.arrow-down {
  display: block;
  margin: 0 auto;
  width: 10px;
  height: 15px; }

.arrow-down:after {
  content: '';
  display: block;
  margin: 0;
  padding: 0;
  width: 8px;
  height: 8px;
  border-top: 2px solid #333333;
  border-right: 2px solid #333333;
  behavior: url("-ms-transform.htc");
  -moz-transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  transform: rotate(135deg); }

#scroll-down::before {
  -webkit-animation: elasticus 1.5s cubic-bezier(1, 0, 0, 1) infinite;
  /* Safari 4+ */
  -moz-animation: elasticus 1.5s cubic-bezier(1, 0, 0, 1) infinite;
  /* Fx 5+ */
  -o-animation: elasticus 1.5s cubic-bezier(1, 0, 0, 1) infinite;
  /* Opera 12+ */
  animation: elasticus 1.5s cubic-bezier(1, 0, 0, 1) infinite;
  /* IE 10+, Fx 29+ */
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -2px;
  width: 2px;
  height: 88px;
  background: #333333;
  content: ' '; }

@-webkit-keyframes elasticus {
  0% {
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scale(1, 0);
    -ms-transform: scale(1, 0);
    -moz-transform: scale(1, 0);
    -o-transform: scale(1, 0);
    transform: scale(1, 0); }
  50% {
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1); }
  50.1% {
    -webkit-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -o-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1); }
  100% {
    -webkit-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -o-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: scale(1, 0);
    -ms-transform: scale(1, 0);
    -moz-transform: scale(1, 0);
    -o-transform: scale(1, 0);
    transform: scale(1, 0); } }

@-moz-keyframes elasticus {
  0% {
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scale(1, 0);
    -ms-transform: scale(1, 0);
    -moz-transform: scale(1, 0);
    -o-transform: scale(1, 0);
    transform: scale(1, 0); }
  50% {
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1); }
  50.1% {
    -webkit-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -o-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1); }
  100% {
    -webkit-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -o-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: scale(1, 0);
    -ms-transform: scale(1, 0);
    -moz-transform: scale(1, 0);
    -o-transform: scale(1, 0);
    transform: scale(1, 0); } }

@-o-keyframes elasticus {
  0% {
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scale(1, 0);
    -ms-transform: scale(1, 0);
    -moz-transform: scale(1, 0);
    -o-transform: scale(1, 0);
    transform: scale(1, 0); }
  50% {
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1); }
  50.1% {
    -webkit-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -o-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1); }
  100% {
    -webkit-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -o-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: scale(1, 0);
    -ms-transform: scale(1, 0);
    -moz-transform: scale(1, 0);
    -o-transform: scale(1, 0);
    transform: scale(1, 0); } }

@keyframes elasticus {
  0% {
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scale(1, 0);
    -ms-transform: scale(1, 0);
    -moz-transform: scale(1, 0);
    -o-transform: scale(1, 0);
    transform: scale(1, 0); }
  50% {
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1); }
  50.1% {
    -webkit-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -o-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1); }
  100% {
    -webkit-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -o-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: scale(1, 0);
    -ms-transform: scale(1, 0);
    -moz-transform: scale(1, 0);
    -o-transform: scale(1, 0);
    transform: scale(1, 0); } }

/** WARNING - USE AT OWN RISK */
/** IT IS AGAINST APPLE'S POLICY TO USE SF PRO FOR ANYTHING OTHER THAN iOS/tvOS/macOS/watchOS DESIGN & DEVELOPMENT */
/** fonts/font.css */
/** fonts/LICENSE.pdf */
/** 1. Copy/import this file into your main css/scss file */
/** 2. Change css font-family: to "SF Text", "SF Display" or "SF Mono" */
/** 3. Apply font-weight or italic to html elements */
/** THANK YOU */
/** I host these fonts on Cloudfront with SSL in all AWS regions for the best performance and reliability */
/** If you'd like to help offset costs, I'd very much appreciate a donation via Lisk https://lisk.io */
/** Address: 14987768355736502769L */
/** Delegate: andrew */
/*---------------------------------------------------------------------------*
 * SF UI Display
 *---------------------------------------------------------------------------*/
/** Black */
@font-face {
  font-family: "SF Display";
  font-weight: 900;
  src: url("fonts/SF-UI-Display-Black.otf"); }

/** Bold */
@font-face {
  font-family: "SF Display";
  font-weight: 700;
  src: url("fonts/SF-UI-Display-Bold.otf"); }

/** Heavy */
@font-face {
  font-family: "SF Display";
  font-weight: 800;
  src: url("fonts/SF-UI-Display-Heavy.otf"); }

/** Light */
@font-face {
  font-family: "SF Display";
  font-weight: 200;
  src: url("fonts/SF-UI-Display-Light.otf"); }

/** Medium */
@font-face {
  font-family: "SF Display";
  font-weight: 500;
  src: url("fonts/SF-UI-Display-Medium.otf"); }

/** Regular */
@font-face {
  font-family: "SF Display";
  font-weight: 400;
  src: url("fonts/SF-UI-Display-Regular.otf"); }

/** Semibold */
@font-face {
  font-family: "SF Display";
  font-weight: 600;
  src: url("fonts/SF-UI-Display-Semibold.otf"); }

/** Thin */
@font-face {
  font-family: "SF Display";
  font-weight: 300;
  src: url("fonts/SF-UI-Display-Thin.otf"); }

/** Ultralight */
@font-face {
  font-family: "SF Display";
  font-weight: 100;
  src: url("fonts/SF-UI-Display-Ultralight.otf"); }

/*---------------------------------------------------------------------------*
 * SF UI Text
 *---------------------------------------------------------------------------*/
/** Bold */
@font-face {
  font-family: "SF Text";
  font-weight: 700;
  src: url("fonts/SF-UI-Text-Bold.otf"); }

/** Bold Italic */
@font-face {
  font-family: "SF Text";
  font-weight: 700;
  font-style: italic;
  src: url("fonts/SF-UI-Text-BoldItalic.otf"); }

/** Heavy */
@font-face {
  font-family: "SF Text";
  font-weight: 800;
  src: url("fonts/SF-UI-Text-Heavy.otf"); }

/** Heavy Italic */
@font-face {
  font-family: "SF Text";
  font-weight: 800;
  font-style: italic;
  src: url("fonts/SF-UI-Text-HeavyItalic.otf"); }

/** Light */
@font-face {
  font-family: "SF Text";
  font-weight: 200;
  src: url("fonts/SF-UI-Text-Light.otf"); }

/** Light Italic */
@font-face {
  font-family: "SF Text";
  font-weight: 200;
  font-style: italic;
  src: url("fonts/SF-UI-Text-LightItalic.otf"); }

/** Medium */
@font-face {
  font-family: "SF Text";
  font-weight: 500;
  src: url("http://kylefoleydesign.com/assets/fonts/SF-UI-Text-Medium.otf"); }

/** Medium Italic */
@font-face {
  font-family: "SF Text";
  font-weight: 500;
  font-style: italic;
  src: url("fonts/SF-UI-Text-MediumItalic.otf"); }

/** Regular */
@font-face {
  font-family: "SF Text";
  font-weight: 400;
  src: url("fonts/SF-UI-Text-Regular.otf"); }

/** Regular Italic */
@font-face {
  font-family: "SF Text";
  font-weight: 400;
  font-style: italic;
  src: url("fonts/SF-UI-Text-RegularItalic.otf"); }

/** Semibold */
@font-face {
  font-family: "SF Text";
  font-weight: 600;
  src: url("fonts/SF-UI-Text-Semibold.otf"); }

/** Semibold Italic */
@font-face {
  font-family: "SF Text";
  font-weight: 600;
  font-style: italic;
  src: url("fonts/SF-UI-Text-SemiboldItalic.otf"); }

/** Ultrathin */
@font-face {
  font-family: "SF Text";
  font-weight: 100;
  src: url("fonts/SF-UI-Text-Ultrathin.otf"); }

/** Ultrathin Italic */
@font-face {
  font-family: "SF Text";
  font-weight: 100;
  font-style: italic;
  src: url("fonts/SF-UI-Text-UltrathinItalic.otf"); }

/*---------------------------------------------------------------------------*
 * SF Mono
 *---------------------------------------------------------------------------*/
/** Bold */
@font-face {
  font-family: "SF Mono";
  font-weight: 700;
  src: url("fonts/SFMono-Bold.otf"); }

/** Bold Italic */
@font-face {
  font-family: "SF Mono";
  font-weight: 700;
  font-style: italic;
  src: url("fonts/SFMono-BoldItalic.otf"); }

/** Heavy */
@font-face {
  font-family: "SF Mono";
  font-weight: 800;
  src: url("fonts/SFMono-Heavy.otf"); }

/** Heavy Italic */
@font-face {
  font-family: "SF Mono";
  font-weight: 800;
  font-style: italic;
  src: url("fonts/SFMono-HeavyItalic.otf"); }

/** Light */
@font-face {
  font-family: "SF Mono";
  font-weight: 200;
  src: url("fonts/SFMono-Light.otf"); }

/** Light Italic */
@font-face {
  font-family: "SF Mono";
  font-weight: 200;
  font-style: italic;
  src: url("fonts/SFMono-LightItalic.otf"); }

/** Medium */
@font-face {
  font-family: "SF Mono";
  font-weight: 500;
  src: url("fonts/SFMono-Medium.otf"); }

/** Medium Italic */
@font-face {
  font-family: "SF Mono";
  font-weight: 500;
  font-style: italic;
  src: url("fonts/SFMono-MediumItalic.otf"); }

/** Regular */
@font-face {
  font-family: "SF Mono";
  font-weight: 400;
  src: url("fonts/SFMono-Regular.otf"); }

/** Regular Italic */
@font-face {
  font-family: "SF Mono";
  font-weight: 400;
  font-style: italic;
  src: url("fonts/SFMono-RegularItalic.otf"); }

/** Semibold */
@font-face {
  font-family: "SF Mono";
  font-weight: 600;
  src: url("fonts/SFMono-Semibold.otf"); }

/** Semibold Italic */
@font-face {
  font-family: "SF Mono";
  font-weight: 600;
  font-style: italic;
  src: url("fonts/SFMono-SemiboldItalic.otf"); }