.landing {
  .landing-section {
    margin: 80px 0;
    text-align: center;
  }

  h2 {
    font-size: $header-font-size-x-large;
    font-weight: 500;
    margin: 10px;
  }

  h3 {
    color: #777777;
    font-family: "HelveticaNeueThin", "HelveticaNeue-Thin", "Helvetica Neue Thin", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Arial", sans-serif;
    font-size: $header-font-size-large;
    font-weight: 200;
    margin: 10px;
  }

  .icons-header {
    $file: "/assets/images/icons-header";
    @include background-image-retina($file, "png", 810px, 186px);
    height: 186px;
    margin: 40px auto;
    width: 810px;
    @include media($lg-screen) {
      background-position: -175px 0;
      width: 645px;
    }
    @include media($sm-screen) {
      background-position: -330px 0;
      width: 420px;
    }
    @include media($xs-screen) {
      background-position: -450px 0;
      width: 310px;
    }
  }

  .button {
    margin: 0 auto;
  }
}

.demo-categories {
  @include shift(2.4);
  @include span-columns(2.4 * 3);
  @include media($md-screen) {
    @include shift(0);
    @include span-columns(12);
  }

  .category-item {
    @include omega(3n);
    @include span-columns(4);
    @include media($sm-screen) {
      @include span-columns(12 of 12);
    }
  }
}

.demo-skills {
  ul {
    @include media($xs-screen) {
      @include shift(0);
      @include span-columns(12);
    }

    li {
      display: inline;

      &:nth-child(6n) {
        &:after {
          content: "\A";
          white-space: pre;
        }
      }

      button {
        margin-bottom: 5px;
      }
    }
  }
}

.demo-projects {
  @include shift(2);
  @include span-columns(8);
  @include media($md-screen) {
    @include shift(0);
    @include span-columns(12);
  }

  .project-card {
    @include span-columns(6);
    &:before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 50;
      background: white;
      z-index: 2;
    }
    @include media($md-screen) {
      @include span-columns(6 of 12);
    }
    @include media($xs-screen) {
      @include span-columns(12 of 12);
    }
  }
}

.typed-cursor {
  opacity: 1;
  -webkit-animation: blink 0.7s infinite;
  -moz-animation: blink 0.7s infinite;
  animation: blink 0.7s infinite;
}

@keyframes blink {
  0% { opacity:1; }
  50% { opacity:0; }
  100% { opacity:1; }
}

.landing-subsection {
  @include span-columns(12);
  margin-top: 40px;
  margin-bottom: 40px;

  &.displayed {
    .landing-subsection-header, .landing-subsection-content {
      display: block;
    }
  }

  &.animated {
    .landing-subsection-header {
      display: block;
      @include fadeInDown(1s);
    }

    .landing-subsection-content {
      display: block;
      @include fadeInUp(1s);
    }
  }
}

.landing-subsection-header {
  display: none;
  margin-bottom: 30px;

  h4 {
    font-size: $header-font-size-large;
    font-weight: 500;
    margin: 10px;
  }
}

.landing-subsection-content {
  @include clearfix;
  display: none;
}

.page-section {
  @include span-columns(12);

  &__header {
    border-top: 1px solid $gray;
    margin: 20px 0;
    text-align: center;

    h2 {
      font-weight: 500;
    }

    p {
      color: $text--light;
    }
  }
}
