h1{
  font-family: petala-pro, Avenir, Helvetica;
  font-stretch: normal;
  font-style: normal;
  font-variant: normal;
  font-weight: 600;
  height: 30px;
  line-height: 45.76px;
  text-align: center;
}

h2{
  font-family: petala-pro, Avenir, Helvetica;
  font-size: 35.2px;
  font-stretch: normal;
  font-style: normal;
  font-variant: normal;
  font-weight: 300;
  height: 72px;
  letter-spacing: 0.88px;
  line-height: 72px;
}

.service-col p, .product-col p {
    font-family: petala-pro, Avenir, Helvetica;
    font-size: 1.0rem;
    line-height: 1.5;
}
.three-col p {
    font-family: petala-pro, Avenir, Helvetica;
    font-size: 1.1rem;
    text-align: left;
}

.main-navigation a{
  font-family: petala-pro, Avenir, Helvetica;
  font-stretch: normal;
  font-style: normal;
  font-variant: normal;
  font-weight: 100;
  letter-spacing: 0.88px;
}

.three-col {
    display: inline-block;
    padding: 20px;
    position: relative;
    clear: both;
    margin: 1rem auto;
    max-width: 50em;
    text-align: center;

}

.icon-strategy {
    background: url("../images/icon-strategy.png") no-repeat;
    background-size: 40px 40px;
}
.icon-design {
    background: url("../images/icon-design.png") no-repeat;
    background-size: 40px 40px;
}
.icon-engineering {
    background: url("../images/icon-engineering.png") no-repeat;
    background-size: 40px 40px;
}
.service-icon {
    width: 40px;
    height: 40px;
    margin-left: -3.25rem;
}

.service-col h4, .product-col h4 {
    font-family: petala-pro, Avenir, Helvetica;
    font-size: 1.3rem;
    text-align: left;
    margin-top: -36px;
    color: #000;
    margin-bottom: 1.0rem;
}

.sketching {
    background: url("../images/hero-sketching.jpg") center center no-repeat;
    background-size: cover;
    height: 50%;
    position: relative;
}
.hero {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.block2 {
    padding: 4em 0;
    text-align: center;
}

.face--reg{font-family:"aluxion Reg", "nudista-web", "Nudista", "Helvetica Neue", Helvetica, sans-serif}.face--cond{font-family:"aluxion Cond", "nudista-web", "Nudista", "Helvetica Neue", Helvetica, sans-serif}.face--semi{font-family:"aluxion Sans Semi", "aluxion Semi", "aluxion Reg", "nudista-web", "Nudista", "Helvetica Neue", Helvetica, sans-serif}.cs,.cs__content{background:none;position:static}.cs__helper--full-height{min-height:100vh;text-align:center}.cs__helper--full-height:before{content:"";display:inline-block;height:100vh;margin-left:-1px;vertical-align:middle;width:1px}.cs__helper--full-height>*{display:inline-block;vertical-align:middle;width:100%}.single-project.projects_afterlight{padding-top:0}.bg--textures{background:url(../images/afterlight/bg--texture.jpg) fixed center center;background-size:cover}.bg--filters{background:url(../images/afterlight/bg--filter.jpg) fixed center center;background-size:cover}.bg--greyscale{background:url(../images/afterlight/bg--greyscale.jpg) fixed center center;background-size:cover}@media only screen and (max-width: 64em){.touch .bg--normal,.touch .bg--blurred,.touch .bg--textures,.touch .bg--filters,.touch .bg--greyscale{background-attachment:scroll}}@media (min--moz-device-pixel-ratio: 1.3), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx){.bg--normal,.bg--blurred,.bg--textures,.bg--filters,.bg--greyscale{background-attachment:scroll}}.cs__hero--afterlight .wrap{min-height:calc(100vh - 32px);text-align:center}.cs__hero--afterlight .wrap:before{content:"";display:inline-block;height:calc(100vh - 32px);margin-left:-1px;vertical-align:bottom;width:1px}.cs__hero__phones{display:inline-block;margin:0 auto;max-width:47.45rem;padding-top:3em;vertical-align:bottom;width:99%}@media only screen and (max-width: 40em){.cs__hero__phones{width:95%}}.cs__hero__phones__inner{padding-top:87.35511%;position:relative}.cs__hero__phone--front{height:100%;left:43.73024%;position:absolute;top:0;width:56.26976%}.cs__hero__phone--front img{display:block}.cs__hero__phone--greyscale{background:url(../images/afterlight/phone--hero--greyscale.png);background-size:100%;height:85.76598%;left:0;position:absolute;top:14.11339%;width:51.42255%}.cs__hero__phone__greyscale{height:81.85654%;left:4.91803%;position:absolute;top:28.97328%;width:89.7541%}.cs__hero__phone__bg{height:81.85654%;left:4.91803%;opacity:0;position:absolute;top:28.97328%;width:89.7541%}@media only screen and (max-width: 64em){.touch .cs__hero__phone__greyscale,.touch .cs__hero__phone__bg{background-attachment:scroll}}.cs__hero__phone__slider{background:url(../images/afterlight/phone--hero--greyscale-bar.png);background-size:100%;height:9.56399%;left:4.91803%;position:absolute;top:28.97328%;width:89.7541%}.cs__hero__phone__track{height:8.82353%;left:16.66667%;position:absolute;top:44.11765%;width:66.89498%}.cs__hero__phone__marker{background:#2fb6e3;height:100%;left:0;position:absolute;top:0;width:0%}.cs__hero__phone__marker:before,.cs__hero__phone__marker:after{background:#2fb6e3;border-radius:50%;content:"";height:.8em;position:absolute;left:100%;margin:-.4em 0 0 -.4em;top:50%;width:.8em}.cs__hero__phone__marker:after{opacity:.5;height:1.6em;margin:-.8em 0 0 -.8em;width:1.6em}@-webkit-keyframes hue-fernley-whittingstall{0%{-webkit-filter:hue-rotate(0deg);filter:hue-rotate(0deg)}100%{-webkit-filter:hue-rotate(360deg);filter:hue-rotate(360deg)}}@keyframes hue-fernley-whittingstall{0%{-webkit-filter:hue-rotate(0deg);filter:hue-rotate(0deg)}100%{-webkit-filter:hue-rotate(360deg);filter:hue-rotate(360deg)}}.cs__how{box-shadow:0 100px 150px rgba(255,255,255,0.1) inset;overflow:hidden;padding:8em 0 12em;position:relative}@media only screen and (max-width: 30em){.cs__how{padding:4em 0 4.5em}}.cs__how .cs__clip{clip:rect(auto, auto, auto, auto);height:100%;left:0;position:absolute;top:0;width:100%}.cs__how .icon--revolve--large{-webkit-animation:hue-fernley-whittingstall 40s infinite linear;animation:hue-fernley-whittingstall 40s infinite linear;height:133vh;left:75%;max-width:none;position:absolute;top:5%;width:auto}.cs__how .wrap{max-width:36.6rem;position:relative;text-align:center}.cs__how p{font-size:24px;font-size:1.2rem}.cs__shifting{padding-top:8rem;text-align:center;text-shadow:0px 1px 1px rgba(22,22,22,0.3)}.cs__shifting .wrap{max-width:36.6rem;position:relative;z-index:1}.cs__shifting p{font-size:24px;font-size:1.2rem;font-weight:600}.cs__shifting__imgs{margin-top:0;overflow:hidden;padding-top:53.3125%;position:relative}.cs__shifting__imgs .cs__reveal{transition:all 0.6s cubic-bezier(0.625, 0.125, 0.305, 0.875);transition-property:opacity, -webkit-transform;transition-property:opacity, transform}.cs__shifting__iphone{bottom:0;left:4.75%;position:absolute;width:33.8125%}.cs__shifting__android{position:absolute;right:0;top:0;width:40.625%}.cs__shifting__android.cs__reveal{transition-delay:.15s}.js.no-touch .cs__shifting__iphone.js--show,.js.no-touch .cs__shifting__android.js--show{opacity:1;-webkit-transform:translateX(0%);-ms-transform:translateX(0%);transform:translateX(0%)}.js.no-touch .cs__shifting__iphone{opacity:0;-webkit-transform:translateX(-25%);-ms-transform:translateX(-25%);transform:translateX(-25%)}.js.no-touch .cs__shifting__android{opacity:0;-webkit-transform:translateX(25%);-ms-transform:translateX(25%);transform:translateX(25%)}@media only screen and (max-width: 83.125em){.cs__shifting__imgs{padding-top:35.45rem}.cs__shifting__iphone{left:auto;margin-right:10.75rem;right:50%;width:22.5rem}.cs__shifting__android{left:50%;margin-left:7.2rem;right:auto;width:27rem}}@media only screen and (max-width: 64em){.cs__shifting__imgs{margin-top:0;padding-top:53.3125%}.cs__shifting__iphone{left:4.75%;margin-right:0;right:auto;width:33.8125%}.cs__shifting__android{left:auto;margin-left:0;right:0;width:40.625%}}@media only screen and (min-width: 100em){.cs__shifting__imgs{margin-top:-12rem;padding-top:42.65rem}.cs__shifting__iphone{width:27.05rem}.cs__shifting__android{width:32.5rem}}@media only screen and (max-width: 40em){.cs__shifting{padding-top:1.875rem}.cs__shifting__imgs{margin-top:4rem}}.cs__white{background:#fff;color:#161616;overflow:hidden;position:relative}.cs__white+.cs__white{margin-top:.5em}.cs__coding-and-what-we-did .cs__white>.wrap--heading{padding-top:6.3rem}.cs__coding-and-what-we-did .cs__white>.wrap--heading h2{margin-bottom:0;margin-top:0}.cs__section--coding{padding:6.3rem 0 6.3rem;text-align:center}@media only screen and (max-width: 40em){.cs__section--coding{padding:4rem 0}}.cs__coding__images{display:inline-block;max-width:42.5rem;position:relative;width:100%}.cs__coding__images img{display:block}.cs__coding__images .cs__coding__base{max-width:42.23529%}@media only screen and (max-width: 64em){.cs__coding__images{max-width:31.25rem}}.cs__coding__images img+img{height:100%;left:0;position:absolute;top:0;width:100%}.js .cs__coding__base{margin-left:27%}.js .cs__coding__grid{margin-left:8.65%}.js .cs__coding__filter{margin-left:-11.6%}.js .cs__coding__code{margin-left:-32%}.touch .cs__coding__base,.touch .cs__coding__grid,.touch .cs__coding__filter,.touch .cs__coding__code{margin-left:0}.cs__section--what-we-did{padding:6.3rem 0 7.75rem;text-shadow:0px 1px 1px rgba(0,0,0,0.3)}.cs__section--what-we-did h2{margin:0 auto 3.2rem}.cs__section--what-we-did .wrap{max-width:1200px}.cs__section--what-we-did .wrap>p{font-size:1.2rem;margin-left:auto;margin-right:auto;max-width:32.6rem;text-align:center}.cs__section--what-we-did .wrap+.wrap{padding-top:3.2rem}.cs__column--3{display:inline-block;text-align:justify;vertical-align:top;width:28.21429%}.cs__column--3+.cs__column--3{margin-left:7.67857%}.cs__column--3 h3{margin:1.6rem auto;text-align:center}.cs__column--3 p{font-size:18px;font-size:0.9rem}.cs__column--3 p:last-child{margin-bottom:0}@media only screen and (max-width: 48.75em){.cs__column--3{display:block;width:100%}.cs__column--3+.cs__column--3{margin:3.2rem 0 0}.cs__column--3 h3{margin:1.6rem auto}}@media only screen and (min-width: 30.0625em) and (max-width: 48.75em){.cs__column--3 .cs__icon{display:inline-block;margin-right:1.6rem;vertical-align:middle}.cs__column--3 .cs__column__content{display:inline-block;vertical-align:middle;width:calc(100% - 11.6rem)}.cs__column--3 h3{margin-bottom:1.6rem;margin-top:0;text-align:left}}.cs__icon{display:block;height:10rem;margin:0 auto;position:relative;width:10rem}.cs__icon__inner{height:10rem;overflow:hidden;position:relative;width:10rem}@-webkit-keyframes rrr{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rrr{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.icon__bg{-webkit-animation:rrr 120s infinite linear;animation:rrr 120s infinite linear;left:-45%;max-width:none;position:absolute;top:-75%;width:300%}.icon__front{display:block;position:relative;width:100%}.cs__column--3:nth-child(2) .icon__bg{-webkit-animation-delay:-20s;animation-delay:-20s}.cs__column--3:nth-child(3) .icon__bg{-webkit-animation-delay:-40s;animation-delay:-40s}.cs__wipe{padding:9em 0;text-align:center;text-shadow:0px 1px 1px rgba(22,22,22,0.3)}.cs__wipe .wrap{max-width:36.6rem}.cs__wipe p{font-size:24px;font-size:1.2rem;font-weight:600}.cs__wipe .cs__reveal{opacity:0;transition:opacity .6s ease}.cs__wipe .js--show{opacity:1}.cs__frames{overflow:hidden}.cs__frames .wrap{max-width:912px}.cs__frames .wrap p{margin-left:auto;margin-right:auto;max-width:32.6rem}.cs__frames .wrap,.cs__frames .wrap__inner{position:relative}.cs__frames__inner{left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:100%}.cs__frames__inner:after{content:"";display:block;padding-top:100%}.cs__frames__inner__bg{border:100em solid rgba(255,255,255,0.8);box-sizing:content-box;height:100%;left:50%;margin:calc(-50% - 100em) 0 0 calc(-50% - 100em);position:absolute;top:50%;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);width:100%}.cs__footer{position:static}.cs__footer:before{display:none}.cs__footer .wrap-with-phone{margin-top:3.75rem}.cs__footer p{margin:1em auto}.cs__footer p+p{margin-bottom:3em}.cs__footer .cs__footer__img{max-width:385px}@media only screen and (min-width: 75em){.cs__footer__btn--left{right:calc(50% + 260px)}.cs__footer__btn--right{left:calc(50% + 260px)}}@media only screen and (min-width: 85em){.cs__footer__btn--left,.cs__footer__btn--right{width:320px}.cs__footer__btn--left{right:calc(50% + 294px)}.cs__footer__btn--right{left:calc(50% + 294px)}}[class^='cs__footer__btn']{background:#54585a}[class^='cs__footer__btn']:hover,[class^='cs__footer__btn']:focus{background-color:#2fb6e3}[class^='cs__footer__btn']:active{background-color:#2f3132}.wrap--heading{margin:0 auto;max-width:912px;padding:0 40px}@media only screen and (max-width: 64em){.wrap--heading{padding:0 20px}}.text-replace{display:block;margin-left:auto;margin-right:auto;width:100%}.text-replace strong{display:block;overflow:hidden;position:relative;text-indent:100%;white-space:nowrap}.text-replace--how-we-captured{max-width:41.6rem}.text-replace--how-we-captured strong{background-position:center 0%;background-size:100% 1300%;padding-top:7.69231%}.text-replace--shifting-user-interface{max-width:41.6rem}.text-replace--shifting-user-interface strong{background-position:center 8.33333%;background-size:100% 1300%;padding-top:7.69231%}.text-replace--coding-a-new{max-width:41.6rem}.text-replace--coding-a-new strong{background-position:center 16.66667%;background-size:100% 1300%;padding-top:7.69231%}.text-replace--what-we-did{max-width:41.6rem}.text-replace--what-we-did strong{background-position:center 25%;background-size:100% 1300%;padding-top:7.69231%}.text-replace--align{max-width:15.8rem}.text-replace--align strong{background-position:center 33.33333%;background-size:263.29114% 1300%;padding-top:20.25316%}.text-replace--trim{max-width:15.8rem}.text-replace--trim strong{background-position:center 41.66667%;background-size:263.29114% 1300%;padding-top:20.25316%}.text-replace--expose{max-width:15.8rem}.text-replace--expose strong{background-position:center 50%;background-size:263.29114% 1300%;padding-top:20.25316%}.text-replace--unique-filters{max-width:41.6rem}.text-replace--unique-filters strong{background-position:center 58.33333%;background-size:100% 1300%;padding-top:7.69231%}.text-replace--natural-textures{max-width:41.6rem}.text-replace--natural-textures strong{background-position:center 66.66667%;background-size:100% 1300%;padding-top:7.69231%}.text-replace--frames{max-width:41.6rem}.text-replace--frames strong{background-position:center 75%;background-size:100% 1300%;padding-top:7.69231%}.text-replace--all-now-on-android{max-width:41.6rem}.text-replace--all-now-on-android strong{background-position:center 83.33333%;background-size:100% 1300%;padding-top:7.69231%}.text-replace--aft-the-result{max-width:41.6rem}.text-replace--aft-the-result strong{background-position:center 91.66667%;background-size:100% 1300%;padding-top:7.69231%}@media only screen and (max-width: 30em){.text-replace--align,.text-replace--trim,.text-replace--expose{max-width:32rem}.text-replace--align strong,.text-replace--trim strong,.text-replace--expose strong{background-size:130% 1300%;padding-top:10%}}
.block--white {
  background: white;
 }

.page--homepage .content--hero {
  height: 100vh;
  min-height: 0;
  padding: 10em 0 16em;
}
.content--hero {
  background-color: #FFFEFF;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 0;
  position: relative;
  z-index: 5;
}
@media screen and (min-width: 1025px)
.company .company-intro {
    height: 80vh;
    background: none;
}
.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;
}
.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;
}
.center {
    text-align: center;
}
.tint {
    background: rgba(0, 0, 0, 0.5);
}
.tint {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
}
.company .company-intro .container {
    position: relative;
    z-index: 10;
}
.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}
.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@media screen and (min-width: 1025px)
.container {
    padding: 0 2rem;
}
.container {
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
    overflow: visible;
    padding: 0 1rem;
}

video#bgvid {
    background: url("../images/video-company.jpg") no-repeat;
    background-size: cover;
}
video#bgvid {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 70%;
    width: auto;
    height: auto;
    z-index: -100;
}
@media screen and (min-width: 1025px)
video {
    display: block;
    max-width: none;
}

.block--awards .block__bg2 {
    bottom: -200px;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    background-size: cover;
}

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

.home-project__inner--quizup{background:#343d45;background:linear-gradient(to bottom, #24292d 0%, #343d45 100%)}
.home-project__inner--sunnycomb{background:#1e3e96;background:linear-gradient(to bottom, black 0%, #161616 100%)}
.home-project__inner--afterlight{background:#1e3e96;background:linear-gradient(to bottom, white 0%, white 100%)}
.home-project__inner--keyme{background:rgb(250, 73, 84);}
.home-project__inner--keyme2{background:rgb(250, 73, 84);}

.block--collective p {
  display: inline-block;
  margin: 0;
  padding: 10px 10px;
  text-align: left;
  vertical-align: top;
  width: 100%;
}

@media (min-width:500px){
.block--collective p {
  display: inline-block;
  margin: 0;
  padding: 10px 60px;
  text-align: justify;
  vertical-align: top;
  width: 100%;
}

.block--clients .wrap>div {
  padding: 10px 60px;
  display: inline-block;
  width: 50%;
}

.block--clients .wrap>div p{
  text-align: justify;
}
}

.block--awards .block__bg {
  bottom: -200px;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  background-size: cover;
}
.responsive-img img {
position: absolute;
}

.block--grays {
    background: #333333;
    color: white;

}

.faux-img--browser .faux-img__background{
  display: none;
}

.block--what-we-do .media--right {
    margin-top: 3em;
    margin-bottom: 5em;
}

.block--what-we-do .media__copy p {
    font-size: 18px;
    font-size: 1.1rem;
    line-height: 1.666667;
}

.blackpi{
  color: black;
}

.home-project__desc p {
    line-height: 1.6;
    margin: 1em 0 0;
}

.block__copy2 {
  font-size: 1.5rem; 
  line-height: 1.33;
  font-weight: 300;
  max-width: 22em;
  margin: 1em auto 0;
}

.block--clients .wrap>div {
    width: 100%;
}
.site-header .site-header__inner{
    height: 55px;
}

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {

    .main-navigation .nav-menu {
    background: black;
}

}

.content .modules.depth2 .module {
    text-align: center;
}

.content .modules.depth2 .module.image-full-width img {
    width: 100%;
    height: auto;
    vertical-align: middle;
}

.content .modules.depth2 .module.video-animation {
    background-color: black;
    margin: 0 auto;
}

@media screen and (max-width: 1439px) and (min-width: 1400px){
  .content .modules.depth2 .module.video-animation > div {
      margin: 0 10%;
  }
}

.content .modules.depth2 .module.video-animation > div {
    max-width: 1112px;
    margin: auto;
    padding: 0em 0 0em 0;
}

.content .modules.depth2 .module.video-animation > div video {
    height: auto;
    width: 100%;
    vertical-align: middle;
}

.main-navigation a{
  color: white;
}
h1{
  color: #a9a9a2;
}
.page--homepage .page--homepage__scroll svg{
  fill: #c77171;
}


@media (max-width: 650px) {
  .main-navigation a {
      color: white;
  }
  .contact__cta__left h2{
    margin-bottom: 80px;
  }
  .site-title a img {
      padding-top: 10px;
      display: block;
  }
  .mobi{
    display: none;
  }
  .blockx {
    padding: 16em 0;
  }
  .block--awards .image-grid>div img {
    width: 80%;
  }
  .image-grid {
    padding: 0 20px;
  }

}