@import "client/common";

$row-width: 600px;

body.web.product_jamblaster {

  $copy-color-on-dark: #b9b9b9;
  $copy-color-on-white: #575757;
  $cta-color: #e03d04;
  $chunkyBorderWidth: 6px;

  ul, li {
    font-size:16px;
    line-height:125%;
    color:$ColorTextTypical;
  }
  ul {
    list-style-type: disc;
  }
  li {
    margin-left:20px;
    margin-bottom: 10px;
  }
  .full-row {
    width: 100%;
  }

  .row {
    width: $row-width;
  }

  .name-and-artist {
    padding-top: 60px;
    margin-bottom:20px;
  }

  .summary-text {

    p {
      color: $copy-color-on-dark;
      clear: both;
      font-size: 20px;
      line-height: 175%;
      margin-bottom:20px;
    }
  }

  .row.awesome {
    h2 {
      color: $copy-color-on-white;
      font-size: 30px;
      margin-bottom: 20px;
    }
    p {
      color: $copy-color-on-white;
      font-size: 18px;
      line-height: 175%;
    }
    padding: 40px 0;
  }

  .awesome-thing {
    color: $copy-color-on-white;
    margin-bottom: 20px;

    &:nth-child(1){
      padding-top:40px;
    }

    .awesome-item {
      //background-color: #dedede;
      //border-radius: 12px;
      @include border_box_sizing;
      width: 670px;
    }

    .video-wrapper {
      margin-bottom:40px;

      .cta-text {
        margin-left: 10px;
        text-align:center;
        margin-top:20px;
      }
      &.left {
        float: left;
        margin-left: 0;
        margin-right: 10px;

        .cta-text {
          margin-left: 0;
          margin-right: 10px;
        }
      }
    }

    .video-container {
      width: 100%;
      padding-bottom: 60%;

    }
    .awesome-image {
      float: right;
      margin-left: 10px;

      &.left {
        float: left;
        margin-left: 0;
        margin-right: 10px;
      }
    }

    .awesome-number {
      height: 44px;
      width: 44px;
      display: inline-block;
      background-color: $cta-color;
      color: white;
      font-size: 24px;
      font-family: Arial, Helvetica, sans-serif;
      font-weight: 400;
      text-align: center;
      padding-top: 8px;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      border-radius: 50%;
      border-width: 2px;
      border-color: white;
      border-style: solid;
      margin-right: 10px;
      @include border_box_sizing;
    }

    h3 {
      padding-top:0px;
      font-size: 24px;
      margin-bottom: 20px;
    }

    h4 {
      font-size: 20px;
      margin-bottom: 20px;
    }

    img {
      margin-bottom:20px;
    }

    figure {
      img {
        margin-bottom:5px;
      }
      margin-bottom:30px;
      figcaption {
        text-align:center;
      }
    }

    .list-header {
      font-weight:bold;
    }

    a {
      color:blue;
      display:inline;
    }

    p, ul {
      color:$copy-color-on-white;
      font-size: 16px;
      line-height: 150%;
      margin-bottom:20px;
    }

    li {
      color:$copy-color-on-white;
    }
    ul {
      margin-bottom:20px;
    }
  }

  p {
    font-size: 16px;
  }

  .cta-row {
    padding: 40px 0;
    background-color: #262626;

    h2 {
      font-size: 30px;
      margin-bottom: 10px;
    }

    p {
      color: $copy-color-on-dark;
      overflow:visible;
      width:130% !important;
    }
  }

  .white-bar {
    p {
      color: $copy-color-on-white;
    }

    .top-container {
      padding-bottom: 20px;
    }
  }

  .white-bordered-button {
    margin-top: -5px;
    margin-left: 82px;
    text-align:center;
    cursor:pointer;
  }

  .red-bar {
    font-size: 30px;
    font-weight: bold;
    color: white;
    background-color: #e03c02;
    padding: 40px 0;
    text-align: center;
  }

  .tiny-note {
    margin-top:6px;
    font-size:12px;
    text-align:center;
  }

  img.app-preview {
    width: 340px;
    float: left;
    margin-left: -15px; // because image has black on the left, which you can't see on back background
    margin-right: 20px;
    margin-bottom: 30px;
  }
  h1.jam-track-name {
    color: white;
    font-size: 30px !important;
    padding-top: 0;
    display:inline;
  }

  h2.original-artist {
    margin-top: 10px;
    color: #8d8d8d;
    font-size: 24px;
    margin-left: 35px;
    display:inline;
  }

  .preview-text {
    color: #fefefe;
  }

  a.jamblaster-pre-order {
    color:white;
  }

  .cta-button {
    cursor:pointer;
    background-color: $cta-color;
    margin-top: 182px;
  }

  .cta-text {
    color: $cta-color !important;
  }

  p {
    line-height: 150%;
    width: 100% !important;
  }

  .bottom-banner {
    background-color: #e03c02;
  }

  .arrow1 {
    position:absolute;
    left: -371px;
    top: -80px;
  }

  .arrow2 {
    position: absolute;
    left: -51px;
    top: 392px;
  }
  .testimonials {
    background-color:white;
    position:absolute;
    width:350px;
    right:55px;
    top:287px;
    @include border_box_sizing;
    z-index:1;

    .jamtrack-overview-video {

      h3 {
        font-size:21px;
        width:400px;
      }
      .video-wrapper {

        .video-container {
          width: 400px;
          padding-bottom: 53.33%;

        }
      }
    }

    h3 {
      color:$copy-color-on-white;
      text-align:center;
      margin-bottom:20px;
      font-size:24px;
      line-height:125%;
    }

    h4 {
      position:absolute;
      top: 161px;
      left: 173px;
      font-size:14px;
      color:$copy-color-on-white;
      strong {
        font-weight:bold;
      }
      white-space:nowrap;
    }
    .testimonial {
      position:relative;
      width:350px;
      margin-bottom:40px;
    }
    .testimonial-speech-bubble {
      width:350px;
    }
    .testimonial-avatar {
      width:60px;
      position:relative;
      top:5px;
      left:92px;
    }
    .testimonial-youtube {
      width:143px;
      position:relative;
      left:112px;
      top:0;
    }
  }
  .preview-and-action-box {
    background-color: transparent;
    position: absolute;
    right: 55px;
    width: 460px;
    top: 59px;
    @include border_box_sizing;
    z-index: 1;

    h2 {
     overflow:visible;
      white-space: nowrap;
      margin-bottom:20px;
    }

    p {
      font-size:16px;
      line-height:125%;
      color:$ColorTextTypical;
      margin-bottom:20px;
    }

    .video-container {
      width:100%;
      padding-bottom:60%;
    }
  }

  .know-more-about-latency {
    p {

    }
  }
}