@import "client/common.scss";
// landing_page is a a/b testing landing page

// #ed3618   - orange
$headerText: white;

body.web.landing_page {
  #profile {
    display:none;
  }

  &.kick {

    h1 {

    }
    p {
      margin-bottom:15px;
      line-height:120%;
    }
    .signup-wrapper {
      width:75%;
      text-align:center;
    }
    .landing-tag {
      left: 50%;
    }

    .cta-container {
      width:100%;
      text-align:left;
      margin-left:0% !important;
      h1 {
        margin: 0 0 10px 0;
      }
      a {margin-bottom:0 !important}
    }

    .column:nth-child(1) {
      width:50% !important;

      .cta-container {
        margin-top:20px;
      }
    }

    .column:nth-child(2) {
      width:50% !important;

      h2 {
        margin-bottom:30px;
      }

      .cta-container a {

        margin-bottom:8px;
      }
    }

  }

  &.kick_4 {

    h1 {

    }

    .column h2 {
      position:absolute;
      font-size:12px;
      margin-left:45px;
      top:45px;
    }
    p {
      margin-bottom:15px;
      line-height:120%;
    }
    .signup-wrapper {
      width:75%;
      text-align:center;
    }
    .landing-tag {
      left: 50%;
    }

    .cta-container {
      width:100%;
      text-align:left;
      margin-left:0% !important;
      h1 {
        margin: 0 0 10px 0;
      }
      a {margin-bottom:0 !important}
    }

    .column:nth-child(1) {
      width:50% !important;

      .cta-container {
        margin-top:20px;
      }
    }

    .column:nth-child(2) {
      width:50% !important;

      h2 {
        margin-bottom:30px;
      }

      .cta-container {

        width:80%;

        a {
          width:90%;
          text-align:center;

          img {
            width:65%;
            margin-top:20px;
          }
        }
      }
    }

  }


  &.kick_2 {

    .linker {
      -webkit-border-radius:6px;
      -moz-border-radius:6px;
      border-radius:6px;
      border-width:1px;
      border-style:solid;
      border-color:$ColorScreenPrimary;
      position:absolute;
      width:92%;
      left:-1%;
      top:60px;
      height:270px;
    }
    h1 {
      //padding-left:20px;
    }

    .youtube-time-tip {
      font-style:italic;
    }

    p {
      line-height:120%;
    }
    .signup-wrapper {
      width:75%;
      text-align:center;
    }
    .landing-tag {
      left: 50%;
    }

    .cta-container {
      width:85%;
      text-align:left;
      margin-left:0% !important;
      h1 {
        margin: 0 0 10px 0;
      }
      a {margin-bottom:0 !important}
    }

    .back-us {
      margin-top:15px;
      width:75%;
      margin-left:30px;
      img {
        width:100%;
      }
    }
    .column.one {
      width:50% !important;

      .cta-container {
        margin-top:20px;
      }
    }

    .column.two {
      width:45% !important;

      h2 {
        margin-bottom:30px;
      }

      .cta-container a {

        margin-bottom:8px;
      }
    }

    .testimonial {
      margin-top:70px;
      p {
        font-size:18px !important;
      }
    }

    .signature {
      margin-top:15px;
      margin-left:30%;
      font-size:18px;
      position:relative;

      .dash {
        position:absolute;
        width:20px;
        left:-10px;
        top:0;
      }
    }

    .signature-details {
      margin-top:5px;
      font-style:italic;
      margin-left:30%;
    }

    .signup-holder {
      position:absolute;
      top:350px;
      width:45%;
    }
    .signup-info {

    }

    .signup-wrapper {
      width:90%;
    }

  }

  &.kick_3 {

    .linker {
      -webkit-border-radius:6px;
      -moz-border-radius:6px;
      border-radius:6px;
      border-width:1px;
      border-style:solid;
      border-color:$ColorScreenPrimary;
      position:absolute;
      width:92%;
      left:-1%;
      top:56px;
      height:270px;
    }

    .column h1 {
      font-size:16px !important;
    }

    .youtube-time-tip {
      font-style:italic;
    }

    p {
      line-height:120%;
    }
    .signup-wrapper {
      width:75%;
      text-align:center;
    }
    .landing-tag {
      left: 50%;
    }

    .cta-container {
      width:85%;
      text-align:left;
      margin-left:0% !important;
      h1 {
        margin: 0 0 10px 0;
      }
      a {margin-bottom:0 !important}
    }

    .back-us {
      margin-top:15px;
      width:75%;
      margin-left:30px;

      img {
        width:100%;
      }
    }
    .column.one {
      width:50% !important;

      .cta-container {
        margin-top:20px;
      }
    }

    .column.two {
      width:45% !important;

      h2 {
        margin-bottom:30px;
      }

      .cta-container a {

        margin-bottom:8px;
      }
    }

    .testimonial {
      margin-top:70px;
      p {
        font-size:18px !important;
      }
    }

    .signature {
      margin-top:15px;
      margin-left:30%;
      font-size:18px;
      position:relative;

      .dash {
        position:absolute;
        width:20px;
        left:-10px;
        top:0;
      }
    }

    .signature-details {
      margin-top:5px;
      font-style:italic;
      margin-left:30%;
    }

    .signup-holder {
      position:absolute;
      top:350px;
      width:45%;
    }
    .signup-info {

    }

    .signup-wrapper {
      width:90%;
    }

  }


  &.wo_1 {

    .landing-tag {
      left: 50%;
    }

    .cta-container {
      width:75%;
      text-align:center;
      margin-left:0% !important;

      h2 {
        margin-left:0px !important;
      }
    }

    .column:nth-child(1) {
      width:50% !important;
    }

    .column:nth-child(2) {
      width:50% !important;
      h1 {

      }

      h2 {
        margin-bottom:30px;
      }

      .cta-container a {

        margin-bottom:8px;
      }
    }


  }
  &.wo_3 {
    .landing-content h1 {
      margin-left:55px;
    }
  }
  &.wb_2 {
    .landing-content h1 {
      margin-left:120px;
    }
  }
  &.wb_3 {
    .landing-content h1 {
      margin-left:130px;
    }
  }

  .landing-tag {
    font-size:14px;
    position: absolute;
    left: 60%;
    top: 25px;
    margin: 0;

    h1 {
      color: $ColorScreenPrimary !important;
    }
  }

  .landing-content {

    h1 {
      color: $headerText !important;
      font-size:20px;
      font-weight:normal;
    }

    .buzz {
      margin-top:55px;
      height:268px;
      overflow:hidden;
      border-color: $color2;
      border-style:solid;
      border-width:1px;
      background-color:$ColorUIBackground;
      padding:10px;

      h2 {
        color: $ColorScreenPrimary !important;
        font-size:20px;
      }
    }

    .video-container {
      width:75%;
      margin:20px 0 30px 0;
      position: relative;
      padding-bottom: 40.00%;
      padding-top: 30px; height: 0; overflow: hidden;
    }

    .video-container iframe,
    .video-container object,
    .video-container embed {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    #signup {
      margin:10px 0 0 0;
    }

    .cta-container {
      margin-left:11%;

      h2 {
        margin-left:45px;
      }
    }

    .more-container {
      margin-top:35px;

      a {
        margin-top:40px;
      }

      .follow-links {
        margin-top:40px;
        line-height: 10px; // centers all 3 buttons vertically on the same line
        margin-left:28px;
      }
    }
  }


  &.full {
    .column {
      float:left;
      @include border_box_sizing;

      &:nth-child(1) {
        width:60%;
      }

      &:nth-child(2) {
        width:40%;
      }
    }
  }

  &.tight {

    .wrapper {
      text-align:center;
    }

    .video-wrapper {
      margin:auto;
    }

    .landing-content h1 {
      text-align:center;
      margin:0;
    }

    .landing-tag {
      left:68%;
      display:none;
    }

    .video-container {
      width:55%;
      margin:20px auto 30px;
      position: relative;
      padding-bottom: 25.00%;
      padding-top: 30px; height: 0; overflow: hidden;
    }

    .cta-container {

      h2 {
        margin-left:0;
      }
    }

    .column {
      float:left;
      @include border_box_sizing;

      &:nth-child(1) {
        width:50%;
        padding-left:19%;
      }

      &:nth-child(2) {
        width:28%;
        padding-left:9%;
      }
    }

    .more-container {
      margin-top:0;

      h2 {
        text-align:center;
      }

      .follow-links {
        margin-top:10px;
        text-align:center;
        margin-left:0;

        .social-follow-btn {
          display:block;
          margin-top:5px;
        }
      }
    }
  }
}
