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

// #ed3618   - orange
$headerText: white;

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

  &.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;
        }
      }
    }
  }
}