.front {
  font-size: $rem-base;

  .page-wrapper {
    max-width: 9999px;
  }

  #block-system-main > .content section.main-section {
    .header {
      padding: .5rem 0;
    }

    h2 {
      text-align: center;
      margin: 0 .5em 1em;

      span {
        padding-bottom: .3em;
        line-height: 2em;
      }
    }

    &.hero-unit {
      $hero-bg: #26b6ce;
      background-image: url(../img/plus-intro-bg.jpg);
      background-color: $hero-bg;
      background-repeat: repeat;
      background-position: bottom center;
      text-align: center;
      padding: 2rem 0;
      color: white;
      position: relative;
      @include background-size(cover);

      h1, h2, h3, h4, h5, h6 {
        color: white;
      }

      .header-wrapper {
        background: none;
        display: table;
        width: 100%;

        h2 {
          font-size: 4rem;
          font-weight: bold;
          text-align: center;
          padding: 0;
          margin: .5rem 0 0;
          line-height: .85em;
          color: white;
          background: none;
        }

        h3 {
          background: none;
          padding: 0 10%;
          font-size: 1.1em;
          margin-bottom: 0;
        }
      }

      @media #{$medium-up} {
        h2 {
          font-size: 2.3rem;
        }

        .header-wrapper {
          h3 {
            padding: 0 25%;
            font-size: 1.5em;
          }

          h2 {
            font-size: 8rem;
          }
        }
      }

      .offer {
        display: none;
        position: absolute;
        right: 1rem;
        bottom: 1rem;
        @include animation(nudge .8s 1.5s 1);

        &:hover {
          @include animation(spin-nudge .5s 1);
        }

        @media (min-width: 1500px) {
          display: block;
        }
      }

      .video-slide {
        h3 {
          font-size: $h3-font-size;
          margin-bottom: 2rem;
        }

        @media (min-width: 560px) {
          padding-top: 0;
        }
      }

      .video {
        width: 100%;
        margin: 0 auto;
        position: relative;
        max-width: 540px;
        margin-top: 1rem;

        img {
          width: 100%;
        }

        .video-player {
          position: absolute;
          width: 100%;
          height: 100%;
          max-width: 100%;
          top: 0;

          iframe {
            max-width: 100%;
          }

          .video-controller {
            position: absolute;
            bottom: 3%;
            text-align: center;
            margin: 0 auto;
            width: 100%;

            @media (max-width: 500px) {
              bottom: 1.5%;
            }

            .play-button {
              color: white;
              z-index: 101;
              border-color: white;
              padding: .7rem 4rem;
            }
          }

          .video-view {
            display: none;
            background: black;
            margin: 0 auto;
          }
        }
      }
    }

    &.material {
      .panel-pane {
        padding-bottom: 3rem;

        &.pane-products {
           margin-top: 0;
        }

        &.pane-product-ads {
          padding-bottom: 0;
          padding-top: 0;
        }
      }

      .material-pane {
        $material-bg-image: 'img/varnish-bg-material.jpg';
        @include background-cover($material-bg-image, $theme-url);

        h2 {
          color: white;
        }

        li {
          position: relative;
          padding-left: 2rem;
          padding-right: 2rem;

          h3 {
            font-size: 1.2rem;
            font-weight: 400;

            a {
              color: white;
            }
          }

          .cta {
            color: black;
            background: white;
            padding: 0.5rem 1.5rem;
            font-size: 0.95rem;
            margin-top: .75rem;
            border: none;
            bottom: 0;
            width: 80%;

            &:hover {
              background: $red;
              color: white;
            }
          }
        }

        .material-description {
          color: rgba(#fff, .9);
          font-size: .95rem;
          line-height: 1.5em;
        }
      }
    }

    &.social {
      @include background-cover('img/social-bg.jpg', $theme-url);
      min-height: 400px;
      overflow: visible;
      position: relative;

      .inner {
        width: 100%;
        height: 100%;
        position: absolute;
      }

      h2 {
        color: white;
      }

      #social-feed {
        width: 100%;
        height: 100%;
        position: absolute;
        bottom: 0;
        color: white;

        .panel-pane, .pane-content, .view-social-media-posts {
          position: absolute;
          width: 100%;
          height: 100%;
        }

        .view-content {
          position: relative;
          height: 100%;
          width: 100%;
          bottom: 0;

          .views-row {
            position: absolute !important;
            top: auto !important;
            width: 80%;
            bottom: 60%;
            left: 10% !important;
            padding-bottom: 1rem;

            // Animations for the active slides.
            &.cycle-slide-active {
              img {
                @include animation(bounceIn .5s .5s 1, showForever 7s 1s);
              }

              .message {
                @include animation(bounceIn .5s 1s 1, showForever 6.5s 1.5s);
              }

              &.visible {
                opacity: 1 !important;
              }

              &:after {
                content: "";
                display: block;
                position: absolute;
                right: 0;
                bottom: 0;
                width: 93%;
                height: 1px;
                background: white;
                @include animation(expand-social-left 1s 0s 1);
              }

              &.views-row-even:after {
                left: 0;
              }
            }

            &.views-row-odd {
            }

            &.views-row-even {
              text-align: right;

              img {
                float: right;
                margin-left: 2rem;
              }
            }

            img {
              @include border-radius(50%);
              opacity: 0;
              float: left;
              margin-right: 2rem;
              width: 20%;
              max-width: 100px;
            }

            .message {
              font-size: .9rem;
              overflow: hidden;
              opacity: 0;
              padding-top: .5rem;

              p {
                font-size: .9rem;
                color: white;
              }

              a {
                color: white;
              }

              .username {
                font-style: italic;
                opacity: .8;
              }
            }
          }
        }
      }
    }

    &.trial {
      text-align: center;
      padding-bottom: 4rem;
      overflow: hidden;

      .button {
        margin-top: 0;
      }

      p {
        margin-top: 1.5rem;
        font-size: 1rem;
        text-align: left;
        margin-left: 1rem;
      }

      ul {
        width: 70%;
        margin: 0 auto;

        li {
          text-align: center;
          display: table-cell;
          vertical-align: middle;

          &.plus {
            font-size: 5em;
            color: lighten(black, 25%);
            font-weight: 700;
          }

          img {
            height: 140px;
            display: inline;
            margin-bottom: .5em;
          }
        }
      }
    }

    &.contact {
      border-top: 1px solid #ccc;
      text-align: center;

      .contact-buttons {
        margin-top: 4rem;
        margin-bottom: 2rem;

        .button {
          width: 90%;
        }
      }

      h3 {
        strong {
        }
      }
    }
  }

  #footer {
    margin-top: 0;
  }

  .pane-product-ads {
    background-color: white;
    background-repeat: repeat;
    background-position: bottom center;
    @include background-size(cover);

    .view-product-ads {
      .view-content {
        .views-row {
          text-align: center;

          img {
            padding: 3rem 0;
          }
        }

        @media #{$medium-up} {
          display: table;

          .views-row {
            display: table-cell;
          }
        }
      }
    }
  }
}


@media #{$medium-up} {
  .front {
    #block-system-main > .content section.main-section {
      h2 {
        padding-right: 2em;
        padding-left: 2em;
      }

      &.hero-unit {
        @include transition(height .5s);
        min-height: 510px;

        .video {
          .video-player {
            .video-controller {
              bottom: 9%;
            }
          }
        }
      }

      &.social {
        min-height: 400px;

        #social-feed {
          .view-content {
            .views-row {
              width: 60%;
              bottom: 60%;
              right: auto;

              &.views-row-odd {
                left: 6% !important;
              }

              &.views-row-even {
                right: 6% !important;
                left: auto !important;
              }
            }
          }
        }
      }
    }
  }
}

@media #{$large-up} {
  .front {
    #block-system-main > .content section.main-section {
      &.social {
        min-height: 500px;

        #social-feed {
          .view-content {
            .views-row {
              width: 30%;
              bottom: 65%;
            }
          }
        }
      }

      &.material {
        .material-pane {
          li {
            .cta {
              width: 70%;
            }
          }
        }
      }
    }
  }
}