/* Animation Usage

@include keyframes(slide-down) {
  0% { opacity: 1; }
  90% { opacity: 0; }
}

.element {
  width: 100px;
  height: 100px;
  background: black;
  @include animation('slide-down 5s 3');
}

*/
/* line 4, ../partials/_layout.scss */
.clearfix:after, .browser .browser-controls:after, .image-row-2col ul:after, .image-row-5col ul:after {
  content: "";
  display: table;
  clear: both; }

/* --------------------------------

Primary style

-------------------------------- */
/* line 13, ../sass/screen.scss */
html * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

/* line 18, ../sass/screen.scss */
*, *:after, *:before {
  box-sizing: border-box; }

/* line 22, ../sass/screen.scss */
body {
  font-size: 100%;
  font-family: "sofia-pro", sans-serif;
  color: #3D525F;
  background-color: #EFF2F3; }

/* line 31, ../sass/screen.scss */
body, html {
  height: 100%; }

/* line 35, ../sass/screen.scss */
a {
  color: #97BCCC;
  font-weight: 600;
  text-decoration: none; }

/* line 41, ../sass/screen.scss */
a:hover {
  text-decoration: underline; }

/* line 45, ../sass/screen.scss */
img {
  width: 100%;
  vertical-align: middle; }

/* --------------------------------

Typography

-------------------------------- */
/* line 57, ../sass/screen.scss */
.headline1 {
  font-size: 36px;
  font-size: 2.25rem;
  line-height: 48px;
  line-height: 3rem;
  font-weight: 600; }

/* line 63, ../sass/screen.scss */
.headline2 {
  font-size: 24px;
  font-size: 1.5rem;
  line-height: 32px;
  line-height: 2rem;
  font-weight: 600;
  max-width: 610px;
  text-align: left;
  margin: 0 auto;
  margin-bottom: 16px; }

/* line 73, ../sass/screen.scss */
.headline3 {
  font-size: 11px;
  font-size: 0.6875rem;
  line-height: 16px;
  line-height: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .25em; }

/* line 81, ../sass/screen.scss */
.headline4 {
  font-size: 11px;
  font-size: 0.6875rem;
  line-height: 16px;
  line-height: 1rem;
  font-weight: 400; }

/* line 87, ../sass/screen.scss */
.paragraph1 {
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 32px;
  line-height: 2rem;
  max-width: 610px;
  text-align: left;
  margin: 0 auto;
  margin-bottom: 16px; }

/* line 96, ../sass/screen.scss */
.paragraph1:last-child {
  margin-bottom: 0; }

/* line 100, ../sass/screen.scss */
.note {
  max-width: 400px;
  margin: 0 auto;
  margin-top: 40px; }

/* --------------------------------

Intro

-------------------------------- */
/* line 112, ../sass/screen.scss */
#section1 {
  text-align: center; }

/* line 116, ../sass/screen.scss */
#section1 h1 {
  margin-bottom: 24px; }

/* line 120, ../sass/screen.scss */
#profile-img-wrapper {
  width: 100px;
  margin: 0 auto;
  margin-bottom: 24px; }

/* line 126, ../sass/screen.scss */
#section1 p:last-child {
  margin-bottom: 0; }

/* line 130, ../sass/screen.scss */
#contact-list {
  position: absolute;
  top: 48px;
  right: 48px; }

/* line 136, ../sass/screen.scss */
#contact-list li {
  float: left; }

/* line 140, ../sass/screen.scss */
#contact-list li a {
  border-radius: 50%;
  border: 2px solid #BDD8E4;
  width: 30px;
  height: 30px;
  text-align: center;
  display: inline-block;
  padding-top: 4px;
  position: relative;
  margin-left: 16px;
  -webkit-transition: -webkit-transform 0.2s, background-color 0.5s;
  -moz-transition: -moz-transform 0.2s, background-color 0.5s;
  transition: transform 0.2s, background-color 0.5s;
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%; }

/* line 156, ../sass/screen.scss */
#contact-list li a:hover {
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2); }

/* line 160, ../sass/screen.scss */
#contact-list li a img {
  width: 60%;
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%); }

/* --------------------------------

Projects

-------------------------------- */
/* line 172, ../sass/screen.scss */
.project header {
  padding: 48px 0;
  text-align: center; }

/* line 177, ../sass/screen.scss */
.project header h4 {
  margin: 24px 0; }

/* line 181, ../sass/screen.scss */
.project footer {
  margin: 48px 0;
  text-align: center; }

/* line 186, ../sass/screen.scss */
.project footer h5 {
  margin-bottom: 24px; }

/* line 190, ../sass/screen.scss */
.project footer a {
  display: block;
  margin: 0 auto;
  margin-bottom: 24px;
  line-height: 32px;
  line-height: 2rem;
  max-width: 610px; }

/* line 198, ../sass/screen.scss */
.project footer .horizontal-rule {
  margin-top: 32px; }

/* --------------------------------

Scratch Track

-------------------------------- */
/* line 208, ../sass/screen.scss */
.scratch-track header {
  background: #404D54; }

/* line 212, ../sass/screen.scss */
.scratch-track header h3 {
  color: #ffffff; }

/* line 216, ../sass/screen.scss */
.scratch-track header h4 {
  color: #97BCCC; }

/* line 220, ../sass/screen.scss */
.scratch-track header p {
  color: #DADFE1; }

/* line 224, ../sass/screen.scss */
#scratchtrack-main-img, #scratchtrack-web-app {
  background: #BDD8D7; }

/* --------------------------------

Comcast

-------------------------------- */
/* line 234, ../sass/screen.scss */
.comcast header {
  background: #404D54; }

/* line 238, ../sass/screen.scss */
.comcast header h3 {
  color: #ffffff; }

/* line 242, ../sass/screen.scss */
.comcast header h4 {
  color: #97BCCC; }

/* line 246, ../sass/screen.scss */
.comcast header p {
  color: #DADFE1; }

/* --------------------------------

Origin

-------------------------------- */
/* line 256, ../sass/screen.scss */
.origin header {
  background: #404D54; }

/* line 260, ../sass/screen.scss */
.origin header h3 {
  color: #ffffff; }

/* line 264, ../sass/screen.scss */
.origin header h4 {
  color: #97BCCC; }

/* line 268, ../sass/screen.scss */
.origin header p {
  color: #DADFE1; }

/* line 272, ../sass/screen.scss */
.origin header .note {
  color: #97BCCC; }

/* line 276, ../sass/screen.scss */
#origin-main-img {
  background: #0b0c10; }

/* --------------------------------

Design/Illustration

-------------------------------- */
/* line 287, ../sass/screen.scss */
.design-illustration header {
  background: #404D54; }

/* line 291, ../sass/screen.scss */
.design-illustration header h3 {
  color: #ffffff; }

/* line 295, ../sass/screen.scss */
.design-illustration header h4 {
  color: #97BCCC; }

/* line 299, ../sass/screen.scss */
.design-illustration header p {
  color: #DADFE1; }

/* --------------------------------

Footer

-------------------------------- */
/* line 309, ../sass/screen.scss */
footer#main-footer {
  padding: 48px 0;
  text-align: center; }

/* line 314, ../sass/screen.scss */
footer#main-footer a.btn {
  margin-bottom: 24px; }

/* --------------------------------

Modules - reusable parts of our design

-------------------------------- */
/* line 324, ../sass/screen.scss */
a.btn {
  padding: 20px;
  width: 300px;
  color: #DADFE1;
  background: #3D525F;
  display: inline-block;
  text-decoration: none;
  -webkit-transition: -webkit-transform 0.2s;
  -moz-transition: -moz-transform 0.2s;
  transition: transform 0.2s;
  border-radius: 4px; }

/* line 337, ../sass/screen.scss */
a.btn:hover {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1); }

/* line 342, ../sass/screen.scss */
.browser {
  padding: 40px 0 10px 0;
  background: #dcdcdc;
  border-radius: 6px;
  width: 80%;
  margin: 0 auto;
  position: relative; }

/* line 351, ../sass/screen.scss */
.browser .browser-controls {
  position: absolute;
  top: 15px;
  left: 15px;
  display: inline-block; }

/* line 359, ../sass/screen.scss */
.browser .browser-controls li {
  float: left;
  margin-right: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%; }

/* line 367, ../sass/screen.scss */
.browser .browser-controls li.close {
  background: #fc635e; }

/* line 371, ../sass/screen.scss */
.browser .browser-controls li.min {
  background: #fdbc40; }

/* line 375, ../sass/screen.scss */
.browser .browser-controls li.max {
  background: #34c849; }

/* line 379, ../sass/screen.scss */
.browser .browser-window {
  width: 100%; }

/* line 383, ../sass/screen.scss */
.browser .browser-window video {
  width: 100%; }

/* line 387, ../sass/screen.scss */
.cd-img-replace {
  /* replace text with a background-image */
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap; }

/* line 394, ../sass/screen.scss */
.full-width-img {
  width: 100%;
  text-align: center; }

/* line 399, ../sass/screen.scss */
.full-width-img img {
  width: 75%;
  margin: 0 auto; }

/* line 404, ../sass/screen.scss */
.full-width-copy {
  padding: 48px 0; }

/* line 408, ../sass/screen.scss */
.full-width-video {
  padding: 48px 0;
  width: 100%;
  text-align: center; }

/* line 414, ../sass/screen.scss */
.touch .full-width-video {
  display: none; }

/* line 418, ../sass/screen.scss */
.full-width-video video {
  width: 70%;
  margin: 0 auto;
  text-align: center; }

/* line 424, ../sass/screen.scss */
.full-width-poster {
  padding: 48px 0; }

/* line 428, ../sass/screen.scss */
.full-width-poster img {
  width: 50%;
  max-width: 700px;
  margin: 0 auto;
  display: block; }

/* line 435, ../sass/screen.scss */
.horizontal-rule {
  width: 60px;
  height: 2px;
  display: block;
  background: #BDD8E4;
  margin: 24px auto; }

/* line 443, ../sass/screen.scss */
.white-bg {
  background: #ffffff; }

/* line 447, ../sass/screen.scss */
.has-border {
  border: 1px solid #BDD8E4; }

/* line 451, ../sass/screen.scss */
.image-row-2col ul {
  width: 60%;
  margin: 0 auto;
  padding: 24px 0; }

/* line 458, ../sass/screen.scss */
.image-row-2col ul li {
  width: 50%;
  float: left;
  padding: 24px 2.5%; }

/* line 464, ../sass/screen.scss */
.image-row-2col-large ul {
  width: 96%; }

/* line 468, ../sass/screen.scss */
.image-row-5col ul {
  width: 100%;
  margin: 0 auto; }

/* line 474, ../sass/screen.scss */
.image-row-5col ul li {
  width: 20%;
  float: left;
  padding: 0 1%; }

/* line 480, ../sass/screen.scss */
.image-row ul li img {
  width: 100%;
  padding: 0; }

/* line 485, ../sass/screen.scss */
.illustration ul {
  max-width: 1000px; }

/* --------------------------------

Main components

-------------------------------- */
/* line 495, ../sass/screen.scss */
.cd-section {
  min-height: 92%;
  position: relative;
  padding: 48px 0; }

/* line 501, ../sass/screen.scss */
.cd-scroll-down {
  position: absolute;
  left: 50%;
  right: auto;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 200px;
  height: 60px;
  display: block;
  bottom: -40px;
  background: url("../images/down-arrow.svg") no-repeat center center;
  color: #97BCCC;
  -webkit-transition: background 0.2s ease;
  -moz-transition: background 0.2s ease;
  -ms-transition: background 0.2s ease;
  -o-transition: background 0.2s ease;
  transition: background 0.2s ease;
  background-position-y: 24px;
  z-index: 1000; }

/* line 515, ../sass/screen.scss */
.cd-scroll-down:hover {
  background-position-y: 36px;
  text-decoration: none; }

/* No Touch devices */
/* line 522, ../sass/screen.scss */
.cd-nav-trigger {
  display: none; }

/* line 526, ../sass/screen.scss */
.no-touch #cd-vertical-nav {
  position: fixed;
  right: 40px;
  top: 50%;
  bottom: auto;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 1; }
  /* line 532, ../sass/screen.scss */
  .no-touch #cd-vertical-nav li {
    text-align: right; }
  /* line 536, ../sass/screen.scss */
  .no-touch #cd-vertical-nav a {
    display: inline-block;
    /* prevent weird movements on hover when you use a CSS3 transformation - webkit browsers */
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden; }
    /* line 166, ../partials/_mixins.scss */
    .no-touch #cd-vertical-nav a:before, .no-touch #cd-vertical-nav a:after {
      content: "";
      display: table; }
    /* line 171, ../partials/_mixins.scss */
    .no-touch #cd-vertical-nav a:after {
      clear: both; }
    /* line 543, ../sass/screen.scss */
    .no-touch #cd-vertical-nav a span {
      float: right;
      display: inline-block;
      -webkit-transform: scale(0.5);
      -moz-transform: scale(0.5);
      -ms-transform: scale(0.5);
      transform: scale(0.5); }
    /* line 549, ../sass/screen.scss */
    .no-touch #cd-vertical-nav a:hover span {
      -webkit-transform: scale(1);
      -moz-transform: scale(1);
      -ms-transform: scale(1);
      transform: scale(1); }
    /* line 553, ../sass/screen.scss */
    .no-touch #cd-vertical-nav a:hover .cd-label {
      opacity: 1; }
    /* line 557, ../sass/screen.scss */
    .no-touch #cd-vertical-nav a.is-selected .cd-dot {
      background-color: transparent;
      border: 2px solid #97BCCC;
      -webkit-transform: scale(1);
      -moz-transform: scale(1);
      -ms-transform: scale(1);
      transform: scale(1); }
  /* line 564, ../sass/screen.scss */
  .no-touch #cd-vertical-nav .cd-dot {
    position: relative;
    /* we set a top value in order to align the dot with the label. If you change label's font, you may need to change this top value*/
    top: 8px;
    height: 12px;
    width: 12px;
    border-radius: 50%;
    background-color: #97BCCC;
    -webkit-transition: -webkit-transform 0.2s, background-color 0.5s;
    -moz-transition: -moz-transform 0.2s, background-color 0.5s;
    transition: transform 0.2s, background-color 0.5s;
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%; }
  /* line 578, ../sass/screen.scss */
  .no-touch #cd-vertical-nav .cd-label {
    position: relative;
    margin-right: 10px;
    padding: .4em .5em;
    color: #97BCCC;
    font-size: 14px;
    font-size: 0.875rem;
    -webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
    -moz-transition: -moz-transform 0.2s, opacity 0.2s;
    transition: transform 0.2s, opacity 0.2s;
    opacity: 0;
    -webkit-transform-origin: 100% 50%;
    -moz-transform-origin: 100% 50%;
    -ms-transform-origin: 100% 50%;
    transform-origin: 100% 50%; }

/* Touch devices */
/* line 595, ../sass/screen.scss */
.touch .cd-nav-trigger {
  display: block;
  z-index: 2;
  position: fixed;
  bottom: 30px;
  right: 5%;
  height: 44px;
  width: 44px;
  border-radius: 0.25em;
  background: rgba(61, 82, 95, 0.9); }
  /* line 606, ../sass/screen.scss */
  .touch .cd-nav-trigger span {
    position: absolute;
    height: 2px;
    width: 20px;
    background-color: #ffffff;
    left: 50%;
    top: 50%;
    bottom: auto;
    right: auto;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%); }
    /* line 613, ../sass/screen.scss */
    .touch .cd-nav-trigger span::before, .touch .cd-nav-trigger span::after {
      content: '';
      height: 100%;
      width: 100%;
      position: absolute;
      left: 0;
      background-color: inherit;
      border-radius: inherit; }
    /* line 623, ../sass/screen.scss */
    .touch .cd-nav-trigger span::before {
      top: -9px; }
    /* line 627, ../sass/screen.scss */
    .touch .cd-nav-trigger span::after {
      bottom: -9px; }

/* line 633, ../sass/screen.scss */
.touch #cd-vertical-nav {
  position: fixed;
  z-index: 1;
  right: 5%;
  bottom: 30px;
  width: 90%;
  max-width: 400px;
  max-height: 90%;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  -webkit-transform-origin: right bottom;
  -moz-transform-origin: right bottom;
  -ms-transform-origin: right bottom;
  transform-origin: right bottom;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -moz-transition-property: transform;
  -o-transition-property: transform;
  -webkit-transition-property: transform;
  transition-property: transform;
  -moz-transition-property: 0.2s;
  -o-transition-property: 0.2s;
  -webkit-transition-property: 0.2s;
  transition-property: 0.2s;
  border-radius: 0.25em;
  background-color: rgba(64, 77, 84, 0.9); }
  /* line 650, ../sass/screen.scss */
  .touch #cd-vertical-nav a {
    display: block;
    padding: 1em;
    border-bottom: 1px solid rgba(61, 82, 95, 0.1); }
    /* line 655, ../sass/screen.scss */
    .touch #cd-vertical-nav a span:first-child {
      display: none; }
    /* line 659, ../sass/screen.scss */
    .touch #cd-vertical-nav a.is-selected span:last-child {
      color: #97BCCC; }
  /* line 664, ../sass/screen.scss */
  .touch #cd-vertical-nav.open {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1); }
  /* line 668, ../sass/screen.scss */
  .touch #cd-vertical-nav.open + .cd-nav-trigger {
    background-color: transparent; }
    /* line 671, ../sass/screen.scss */
    .touch #cd-vertical-nav.open + .cd-nav-trigger span {
      background-color: rgba(255, 255, 255, 0); }
    /* line 675, ../sass/screen.scss */
    .touch #cd-vertical-nav.open + .cd-nav-trigger span::before, .touch #cd-vertical-nav.open + .cd-nav-trigger span::after {
      background-color: white;
      height: 2px;
      width: 20px;
      border-radius: 0;
      left: -8px; }
    /* line 683, ../sass/screen.scss */
    .touch #cd-vertical-nav.open + .cd-nav-trigger span::before {
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      transform: rotate(45deg);
      top: 0; }
    /* line 688, ../sass/screen.scss */
    .touch #cd-vertical-nav.open + .cd-nav-trigger span::after {
      -webkit-transform: rotate(135deg);
      -moz-transform: rotate(135deg);
      -ms-transform: rotate(135deg);
      transform: rotate(135deg);
      bottom: 0; }
  /* line 694, ../sass/screen.scss */
  .touch #cd-vertical-nav li:last-child a {
    border-bottom: none; }

@media only screen and (max-width: 1170px) {
  /* line 700, ../sass/screen.scss */
  #section3 .image-row-2col ul li {
    width: 80%;
    clear: both;
    margin: 0 auto;
    float: none; } }
@media only screen and (max-width: 768px) {
  /* line 710, ../sass/screen.scss */
  .touch .cd-nav-trigger, .touch #cd-vertical-nav {
    bottom: 40px; }

  /* line 714, ../sass/screen.scss */
  .full-width-copy, .project header, .project footer {
    padding: 48px 24px; }

  /* line 718, ../sass/screen.scss */
  #intro {
    padding: 0 24px; }

  /* line 722, ../sass/screen.scss */
  .no-touch #cd-vertical-nav {
    right: 6px; }

  /* line 726, ../sass/screen.scss */
  .no-touch #cd-vertical-nav .cd-label {
    background: rgba(64, 77, 84, 0.8);
    border-radius: 4px; }

  /* line 731, ../sass/screen.scss */
  #contact-list {
    left: 50%;
    right: auto;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    top: -12px; }

  /* line 736, ../sass/screen.scss */
  #contact-list li a {
    margin: 0 8px; }

  /* line 740, ../sass/screen.scss */
  .touch #contact-list {
    top: -20px; }

  /* line 744, ../sass/screen.scss */
  .touch #contact-list li a {
    width: 44px;
    height: 44px; }

  /* line 749, ../sass/screen.scss */
  #section1 {
    margin-top: 48px; }

  /* line 754, ../sass/screen.scss */
  .image-row-2col ul {
    width: 100%; }

  /* line 758, ../sass/screen.scss */
  .image-row-2col ul li {
    width: 50%;
    clear: both;
    float: none;
    margin: 0 auto;
    margin-bottom: 24px; }

  /* line 766, ../sass/screen.scss */
  #section3 .image-row-2col ul li {
    width: 80%; }

  /* line 770, ../sass/screen.scss */
  .image-row-5col ul li {
    width: 50%;
    clear: both;
    float: none;
    margin: 0 auto;
    margin-bottom: 24px; }

  /* line 778, ../sass/screen.scss */
  .image-row-5col ul li:last-child {
    margin-bottom: none; } }
@media only screen and (max-width: 460px) {
  /* line 784, ../sass/screen.scss */
  #section3 .image-row-2col ul li, .image-row-2col ul li, .image-row-5col ul li {
    width: 85%;
    clear: both;
    margin: 0 auto;
    float: none; }

  /* line 791, ../sass/screen.scss */
  .image-row-5col ul li {
    margin-bottom: 24px; }

  /* line 795, ../sass/screen.scss */
  .image-row-5col ul li:last-child {
    margin-bottom: none; }

  /* line 799, ../sass/screen.scss */
  .full-width-img img {
    width: 95%; } }