#deis-home {
  .billboard-home {
    display: block;
    position: relative;
    text-align: center;
    @include tablet {
      border-bottom: 3em solid $light2;
    }
    overflow: hidden;
    background:
      url(../images/hero-bg-building-left.png) no-repeat 0 78%,
      url(../images/hero-bg-building-right.png) no-repeat 100% 75%;
    background-attachment: fixed;
    min-height: 720px !important;
    @include mobile {
      min-height: 610px !important;
    }
    @include landscape {
      min-height: 820px !important;
    }
    height: 100%;

    section {
      @include centerer;
      @include mobile {
        top: 45%;
      }
      @include landscape {
        top: 40%;
      }
      margin-top: -6.67%;
    }

    .button-group {
      @include mobile {
        margin-top: $gutter;
      }
      .button {
        margin: 0.25em;
        // BEGIN Safari fix
        // https://github.com/engineyard/deis.com/issues/67
        +.button {
          @include tablet {
            display: inline;
          }
          @include landscape {
            display: block;
          }
        }
        // END Safari fix
        @include landscape {
          display: block;
          min-width: 50%;
          margin: 0.25em 15%;
        }
      }
    }

    @include keyframes(cliSlide) {
      0% { bottom: -25%; }
      100% { bottom: -0.5em; }
    }

    .cli-wrapper {
      position: absolute;
      bottom: -0.5em;
      max-width: 100%;
      @include transition;
      @include animation(0.2s, 0.6s, cliSlide);
    }

    .deiscli {
      background-color: $dark2;
      z-index: 750;
      min-height: 195px;
      height: 50%;
      max-height: 250px;
      display: inline-block;
      width: 100%;
      position: relative;
      text-align: left;
      color: $light1;
      font-family: $font-family-monospace;

      .deiscli-line-wrap {
        height: 230px;
        overflow-x: auto;
        overflow-y: scroll;
        top: 0;
        left: 0;
        right: 0;
        position: absolute;

        .deiscli-line-inner-wrap {
          position:absolute;
          left: 0;
          right: 0;
          top: 0;
          overflow: hidden;
          max-height: 100%;
          padding: 1em 2.25em;

          // js hacks to align cli to bottom
          &.align-bottom {
            bottom: 2em !important;
            top: auto !important;
            vertical-align: bottom;
          }
        }
      }

      .deiscli-line {
        strong {
          color: $pink;
          margin-left: -1.2em;
        }
      }

      .response-one,
      .response-two,
      .response-three {
        color: darken($light2, 12.5%);
      }

      .window {
        background: $light2;
        border-radius: 0.4em 0.4em 0 0;
        width: 100%;
        height: 2em;
        position: absolute;
        top: -2em;
        left: 0;

        em {
          display: inline-block;
          width: 1em;
          height: 1em;
          border-radius: 0.5em;
          background: darken($light1, 2.5%);
          position: absolute;
          left: 0.5em;
          top: 0.5em;

          &:nth-child(2) {
            left: 2em;
          }
          &:nth-child(3) {
            left: 3.5em;
          }
        }
      }

      span::-moz-selection,
      span::selection {
        color: $pink;
        background: black;
      }
    }

    .typed-cursor{
      opacity: 1;
      @include transition;
      @include animation(0, 0.7s, blinkCursor);
      animation-iteration-count: infinite;
    }
  }

  // blinking cli cursor
  @include keyframes(blinkCursor) {
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
  }


  $mobileHeadingFontSize: 1.8rem;
  $mobileHeadingLetterSpacing: 0.02rem;

  .panel.panel--diagram{
    text-align: center;
    padding-top: 3em;
    padding-bottom: 4.5em;
    @include mobile {
      padding: 1em 0;
    }
    background-image:
        url(../images/home-logos.png),
        url(../images/tiles/cubes.png);
    @include mobile {
      background-image: url(../images/tiles/cubes.png);
      background-repeat: repeat;
      background-position: 0 0;
    }
    background-repeat:
        no-repeat,
        repeat;
    background-position:
        90% 0,
        0 0;

    .columns {
      @include tablet {
        text-align: left;
      }
    }
    h2 {
      display: inline-block;
      text-align: center;
      @include mobile {
        margin: 0;
        font-size: $mobileHeadingFontSize;
        letter-spacing: $mobileHeadingLetterSpacing;
      }
      &:after {
        content: "";
        display: block;
        height: 5px;
        margin-top: 5px;
        background-color: #FF7791;
        width: 0;
      }
    }
    p {
      text-align: left;
      font-size: 1.1rem;
      font-weight: 500;
      line-height: 1.8rem;
      margin: {
        right: auto;
        left: auto;
      }
      @include tablet {
        letter-spacing: 0.03rem;
      }
    }

    .diagram {
      margin-top: ($gutter / 2);
      max-width: 900px;
      width: 100%;
      @include mobile {
        display: none;
      }
    }
    $buttonNudge: 25px;

    .button {
      line-height: 20px;
      @extend .button.-fill, .button.-border;
      @include bottomer;
      width: 18em;
      height: 3.725em;
      margin-left: -9em;
      @include mobile {
        position: initial;
        margin: initial;
      }

      @include tablet {
        top: -$buttonNudge;
      }
    }
  }

  .panel--why {
    padding-top: $gutter;
    @include mobile {
      padding-top: ($gutter / 2);
    }
    h2 {
      margin-top: 0;
      margin-bottom: $gutter;
      @include mobile {
        margin-bottom: 0;
      }
      @include mobile {
        font-size: $mobileHeadingFontSize;
        letter-spacing: $mobileHeadingLetterSpacing;
      }
    }
    h3 {
      @include mobile {
        font-size: 1.6rem;
        letter-spacing: initial;
      }
      &:after {
        content: "";
        display: block;
        height: 3px;
        position: absolute;
        left: 50%;
      }
    }
    h4 {
      @include mobile {
        font-size: 1.2rem;
      }
    }
    .features.row div:nth-child(1) h3:after {
      background-color: #82CCEE;
    }
    .features.row div:nth-child(2) h3:after {
      background-color: #6CD37C;
    }
    .features.row div:nth-child(3) h3:after {
      background-color: #FF7791;
    }
  }

  .features__item {
    padding: 0 ($gutter / 3);
    .icon {
      font-size: 60px;
      color: $pink;
      display: inline-block;
      text-align: center;
      width: 100%;
    }
    h3 {
      margin-bottom: ($gutter / 2);
      text-align: center;
      @include mobile {
        margin-bottom: ($gutter / 3);
      }
    }
    p {
      font-size: 0.9rem;
      font-weight: 500;
      line-height: 1.7rem;
      @include mobile {
        font-size: 1.1rem;
      }
    }
  }

  .panel--quotes {
    background-color: #f2f2f2;
    .author-quotes {
      @include mobile {
        display: none;
      }
    }
    .quote {
      margin: ($gutter / 3) 0 ($gutter / 2) 0;
      padding-left: 130px;
      position: relative;
    }
    h2 {
      &.users {
        @include mobile {
          display: none;
        }
      }
      &.trusted {
        @include tablet {
          display: none;
        }
        @include mobile {
          font-size: 1.4rem;
        }
      }
    }

    $quotePadding: ($gutter / 3);
    .quote__text {
      background-color: #fff;
      border: 1px solid #eee;
      -webkit-border-radius: $skosh;
      -moz-border-radius: $skosh;
      -ms-border-radius: $skosh;
      -o-border-radius: $skosh;
      border-radius: $skosh;
      margin: 0;
      padding: $quotePadding;
      position: relative;
      @include tablet {
        min-height: 250px;
        .author {
          position: absolute;
          bottom: $quotePadding;
          font-size: 16px;
          font-weight: 600;
          color: darken($black, 20);
        }
      }
      @include mobile {
        .author {
          line-height: 1em;
        }
        .author-org {
          display: block;
          line-height: 2em;
        }
      }

      p, strong {
        font-size: 18px;
        @include mobile {
          line-height: 1.3;
        }
      }

      // Arrow
      &:before, &:after {
        content: "";
        display: block;
        height: 0;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 0;
      }
      // Arrow border
      &:before {
        border: {
          top: ($gutter / 4) solid transparent;
          right: ($gutter / 4) solid #eee;
          bottom: ($gutter / 4) solid transparent;
        }
        left: -($gutter / 4);
      }
      // Arrow fill
      &:after {
        border: {
          top: ($gutter / 4) solid transparent;
          right: ($gutter / 4) solid #fff;
          bottom: ($gutter / 4) solid transparent;
        }
        left: -($gutter / 4);
      }
    }

    .quote__author {
      left: 0;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 100px;

      img {
        -webkit-border-radius: 100px;
        -moz-border-radius: 100px;
        -ms-border-radius: 100px;
        -o-border-radius: 100px;
        border-radius: 100px;
        width: 100%;
      }
    }
  }

  .user-logos {
    text-align: center;
    @include mobile {
      margin: 0;
    }
    &:first-child {
      margin-top: ($gutter / 2);
    }
    img {
      max-width: 100px;
    }
  }

  .panel.recent {
    display: none;
    @include tablet {
      display: block;
    }
    h2.title {
      &:after {
        content: "";
        display: block;
        height: 5px;
        position: absolute;
        left: 50%;
        background-color: rgba(55, 176, 231, 0.2);
      }
    }
    button {
      display: block;
      background-color: initial;
      color: #ccc;
      i {
        font-size: 2em;
      }
      .next {
        text-align: right;
      }
    }
    p {
      font-weight: 400;
    }
  }

  .recent {
    h2 {
      margin: 0;
    }
  }

  .orbit-container {
    height: 240px;

    .orbit-next>span {
      border-left-color: $light2;
    }

    .orbit-prev>span {
      border-right-color: $light2;
    }

    li {
      padding: 0 12.5%;

      span.date {
        font-size: 0.75em;
        color: $dark1;
        display: block;
        text-align: center;
        margin-bottom: 1.25em;
      }

      h2:not(:first-child),
      h3 {
        text-align: left;
        font-size: 1em;
        @include helvetica;
      }

      h2 {
        text-align: center;

        a:hover {
          text-decoration: underline;
        }
      }
    }
  }

  .billboard, .panel {
    h1 {
      @include klinicBold;
    }
  }

  @include mobile {
    .button.try-deis {
      display: none;
    }
  }
  + .panel--signoff {
    @include mobile {
      min-height: 250px;
    }
    .shape-position.shape-position-bottom {
      @include mobile {
        bottom: 0;
      }
      @include landscape {
        display: none;
      }
    }
    .text-center{
      @include mobile {
        width: 75%;
        top: 40%;
      }
    }
  }
  .shapes-animate {
    @include smallLandscape {
      display: none;
    }
  }
}