@import "settings.less";
.clearfix() {
  &:before,
  &:after {
    content: " "; // 1
    display: table; // 2
  }
  &:after {
    clear: both;
  }
}

body .container {
  @media (min-width: 768px) and (max-width: 1023px) {
    width: 736px;
  }

  .visible-md {
    @media (min-width: 768px) and (max-width: 1023px) {
      display: none !important;
    }
  }
  .visible-sm {
    @media (min-width: 768px) and (max-width: 1023px) {
      display: inline-block !important;
    }
  }
  .hidden-sm {
    @media (min-width: 768px) and (max-width: 1023px) {
      display: none !important;
    }
  }
}

.valign-center{
  position: relative;
  &:before {
    content: "";
    display: inline-block;
    height: 100%;
    width: 1%;
    vertical-align: middle;
  }
  .valign-content{
    display: inline-block;
    vertical-align: middle;
  }
}

.vertical-page{
  .fontNeueHelveticaMedium;
  .banner-base{
      position: relative;
      background-repeat: no-repeat;
      background-position: center;
      background-size: auto 100%;
      width: 100%;
  }
  .bullet{
    padding: 0 0 0 8px;
    font-style: normal;
    margin: 0 9px;
    &:before{
      content: "|";
      margin-left: -8px;
    }
  }
  .section-bullet-list{
      .fontNeueHelveticaLight;
      font-size: 14px;
      color: #666666;
      text-align: center;
      margin-bottom: 36px;
      .lh(25, 14);
      background-color:#f4f5f6;
      padding:15px 0;
      @media(min-width:768px){
        margin-bottom: 44px;
        font-size: 16px;
        .lh(25, 16);
      }
      @media(min-width:1024px){
        // text-align: left;
        // padding-left: 128px;
        margin-bottom: 50px;
      }
  }
  .section-title{
    .fontOpenSansSemiBold;
    margin-top: 0;
    margin-bottom: 12px;
    line-height: 34px;
    &.primary-text{
      color: #41b2e8;
    }
    &.size-xs{
      font-size: 28px;
    }
    @media(min-width:768px){
      &,&.size-xs{
        font-size: 36px;
        line-height: 40px;
        // margin-bottom: 20px;
        margin-bottom: 28px;
      }
    }
    @media(min-width:1024px){
      &,&.size-xs{
        margin-bottom: 25px;
      }
    }
  }
  .section-text{
    .fontNeueHelveticaRegular;
    color: #666666;
    font-size: 16px;
    font-weight: 400;
    line-height: 25px;
    margin-bottom: 55px;
    @media(min-width:768px){
      margin-bottom: 52px;
      font-size: 21px;
      line-height: 32px;
    }
  }

  .section-media{
    .clearfix();
    .media-object{
      background: url("/sites/default/themes/booker_new/images/verticals/slider-laptop-bg.png") no-repeat left top;
      // max-width: 100%;
      background-size: auto 182px;
      margin-bottom: 20px;
      width: 305px;
      margin-left: -11px;
      margin-top: 2px;
      height: 174px;

      img {
        width: 212px;
        padding-left: 5px;
        padding-top: 7px;
        margin: 0 auto;
        display: block;
      }
    }
    .media-body{
      .fontNeueHelveticaDefault;
      color: #666666;
      font-weight: 400;
      // line-height: 31px;
      overflow: visible;
      margin-top: 30px;
      text-align: center;
    }
    .section-text{
      font-size: 16px;
      line-height: 25px;
      margin-bottom: 0;

    }
    .section-title{
      .fontOpenSansSemiBold;
      font-size: 36px;
      line-height: 1;
      margin-bottom: 24px;
    }
    @media(min-width:768px){
      .media-right{
        width: 250px;
        float: right;
      }
      .media-object{
        margin-left: -169px;
        margin-bottom: 0;
        position: relative;
        height: 255px;
        width: 470px;
        background-size: auto 268px;

        img {
          width: 316px;
          padding-left: 0;
          padding-right: 12px;
          padding-top: 12px;
        }
      }
      .media-body{
        display: table;
        text-align: left;
        margin-top: 0;
      }
      .section-title{
        margin-top: -3px;
        padding: 0;
        margin-bottom: 22px;
      }
      .section-text{
        padding-right: 150px;
      }
    }
    @media(min-width:1024px){
      .media-right{
        width: 250px;
      }
      .media-object{
        left: -143px;
        top: 2px;
        width: 470px;

        background-size: auto 267px;
        margin-left: -7px;

        img {
          width: 316px;
          margin: 0 auto;
          padding-top: 12px;
          padding-right: 14px;
          display: block;
        }
      }
      .section-text{
        padding-right: 240px;
      }
    }
  }
  .nav{
    &.section-tabs{
      border-radius: 3px;
      border: 1px solid #e6e7e8;
      background-color: #ffffff;
      margin-bottom: 95px;
      height: 40px;
      .fontOpenSansRegular;
      >li{
        &:first-child{
          >a{
            &:after{
              display: none;
            }
          }
        }
        >a{
          position: relative;
          font-size: 14px;
          color: #a7a9ac;
          padding: 9px 15px;
          .fontOpenSansSemiBold;
          &:after{
            content: "";
            position: absolute;
            top: 8px;
            bottom: 8px;
            left: 0;
            background: #cccccc;
            width: 1px;
          }
        }
        &,&.active{
          >a{
            &, &:hover, &:active, &:focus{
              background: none;
            }
          }
        }
        &.active{
          >a{
            &,&:hover,&:active, &:focus{
              color: #00aef0;
            }
          }
        }
      }
    }
  }
  .section-tab-content{
      >.tab-pane{
        @media(max-width:767px){
          margin-top: 41px;
          // margin-top: 50px;
          display: block !important;
        }
      }
  }
  .section-video{
    padding-bottom: 51px;
    padding-top: 42px;
    @media(min-width:768px){
      padding-bottom: 61px;
      padding-top: 53px;
    }
    @media(min-width:1024px){
      padding-bottom: 60px;
      padding-top: 53px;
    }
    .section-title{
      color: #404040;
      font-weight: 400;
      margin-bottom: 15px;
      line-height: 40px;
      @media(min-width:768px){
        margin-bottom: 18px;
      }
      @media(min-width:1024px){
        margin-bottom: 19px;
      }
    }
    .section-text{
      .fontNeueHelveticaLight;
      color: #666666;
      line-height: 26px;
      margin-bottom: 29px;
      @media(min-width:768px){
      margin-bottom: 27px;
      line-height: 35px;
      }
    }
    .video-placeholder{
      width: 281px;
      height: 159px;
    }
    @media(min-width:768px){
      .video-placeholder{
        width: 481px;
        height: 274px;
      }
    }
  }
  .video-placeholder{
    position: relative;
    margin: 0 auto;
    img{
      max-width: 100%;
    }
    .video-btn {
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 1;
      background: url("../images/verticals/spa-page/btn-video.png") no-repeat 0 0;
      background-size: cover;
      margin-top: -33px;
      margin-left: -28px;
      width: 55px;
      height: 55px;
      @media(min-width:768px){
        margin-top: -35px;
        margin-left: -35px;
        width: 70px;
        height: 70px;
      }
    }
  }

  @media(max-width:767px){
    .container{
      width: 300px;
    }
  }
  .banner{
    &-value{
      padding: 50px 0;
      height: 272.5px;
      background-size: auto 272.5px;
      background-repeat: no-repeat;
      background-position: 67% center;
      @media(min-width:768px){
        margin-top:0;
        height:599px;
        background-size: auto 599px;
      }
    }
    &-salon-value{

      @media(min-width:1024px){
        background-position: center;
        background-position: 49% 50%;
        background-image: url("/sites/default/files/basic-pages/salonsoftware-page/salon-page-value-big.jpg");
      }
    }
  }
  .banner-value{
    &-text{
      .fontOpenSansRegular;
      display: block;
      width: 300px;
      text-align: center;
      margin: 0 auto;
      margin-bottom: 42px;
      margin-top: 28px;
      @media(min-width:768px){
        width: auto;
        text-align: left;
        margin-top: 0;
        top: 99px;
        left: 14px;
        position: relative;
      }
      @media(min-width:1024px){
        left: -8px;
        top: 100px; //102
      }
      h2{
        margin: 0;
        .fontOpenSansSemiBold;
        color: #666666;
        font-size: 21px;
        line-height: 30px;
        @media(min-width:768px){
          .fontOpenSansRegular;
          color: #ffffff;
          font-size: 36px;
          line-height: 42px;
        }
      }
      p{
        .fontNeueHelveticaRegular;
        color: #666666;
        font-size: 16px;
        line-height: 25px;
        margin-top: 26px;
        margin-bottom: 30px;
        @media(min-width:768px){
          margin-top: 29px;
          .fontOpenSansRegular;
          color:#fff;
        }
      }
      a{
        .fontOpenSansBold;
        color: #ebd80a;
        font-size: 16px;
        text-decoration: none;
        &:hover{
          text-decoration: underline;
        }
        &:active{
          text-decoration: underline;
          color: #e0ce09;
        }
        @media(min-width:768px){
          font-size: 18px;
        }
      }
    }
  }

  @media(min-width:768px) and (max-width: 1023px){
    .banner-value{
      position: relative;
      .banner-value-text{
        position: absolute;
        left: 40px;
      }
    }
  }
  .section-block{
    &.each{
      background: #f4f5f6;
    }


    &.app-reviews{
      padding-top: 51px;
      padding-bottom: 54px;
      h2{
        .fontOpenSansRegular;
        color: #41b2e8;
        text-align: center;
        margin: 0 0 21px;
        font-size: 28px;
        @media(min-width:768px){
          font-size: 36px;
        }
      }
      p{
        .fontNeueHelveticaRegular;
        font-size: 14px;
        line-height: 21px;
        color: #666666;
        margin: 0;
        @media(min-width:768px){
          line-height: 18px;
        }
      }
      .review-source{
        font-size: 16px;
        text-align: center;
        margin-top: -4px;
        @media(min-width:1024px){
          margin-top: 32px;
        }
      }
      @media(min-width:1024px){
        .container{
          width: 950px;
          padding: 0;
        }
      }
      .review-box{
        border:1px solid #d3d3d2;
        border-radius: 4px;
        background: #ffffff;
        min-height: 206px;
        padding: 18px 0 20px 0;
        margin-top: 23px;
        margin-bottom: 37px;
        text-align: center;
        &:last-child {
          .rating-box{
            margin-top: 14px;
            @media(min-width:768px){
              margin-top: 9px;
            }
          }
        }
        .title-box{
          position: relative;
          text-align: center;
        }
        .title-logo{
          .fontNeueHelveticaBold;
          color: #ffffff;
          border-radius: 20px;
          display: block;
          text-align: center;
          margin-left: auto;
          margin-right: auto;
          font-size: 17px;
          margin-top: -5px;
          margin-bottom: 3px;
          width: 40px;
          height: 40px;
          line-height: 40px;
        }
        .title{
          .fontNeueHelveticaRegular;
          color: #666666;
          line-height: 24px;
          font-size: 16px;
          display: inline-block;
          vertical-align: middle;
          margin-top: -5px;
        }
        @media(min-width:768px){
          padding: 18px 10px 16px 24px;
          margin: 30px auto 50px auto;
          width: 449px;
          text-align: left;
          .title-box{
            text-align: left;
            height: 42px;
          }
          .title{
            padding-left: 10px;
            font-size: 21px;
          }
          .title-logo{
            line-height: 42px;
            height: 42px;
            width: 42px;
            display: inline-block;
            margin-top: 1px;
            margin-bottom: 0;
            border-radius: 21px;
            margin-left: -2px;
          }
        }

        @media(min-width:1024px){
          float: left;
          clear: left;
          margin: 32px 0 15px;
          padding-left: 21px;
          &:nth-child(even){
            margin-right: 0;
            float: right;
            clear: right;
          }
          .title-box {
            .title-logo {
              margin-left: -1px;
            }
          }
        }
        .rating-box{
          font-size: 0;
          margin: 3px 0 15px 0;
          .star{
            display: inline-block;
            margin-right: 2.5px;
            width: 17px;
            height: 16px;
            background-size: contain;
            background-image: url("../images/verticals/spa-page/spa-page-icon-star.png");
          }
          @media(min-width:768px){
            margin: 9px 0 9px 0;
            .star{
              width: 21px;
              height: 20px;
            }
          }
        }
      }
    }

    &.cta{
      padding-top: 41px;
      padding-bottom: 44px;
      text-align: center;
      letter-spacing: 0.01em;

      .container {
        @media(min-width:1024px) and (max-width: 1199px){
          width: 1006px;
        }

        @media (min-width: 1024px) and (max-width: 1199px)  {
          .hidden-md {
            display: none !important;
          }
        }

        @media (min-width: 768px) and (max-width: 1023px)  {
          .hidden-md {
            display: block !important;
          }
        }
      }



      @media(min-width:768px){
        padding-bottom: 53px;
        padding-top: 58px;
      }
      .text-block{
        @media(min-width: 1024px){
          // width: 798px;
          width: 790px;
          float: left;
        }
      }
      .image-block {
        img{
          // margin-top: 2px;
          // margin-left: 9px;
          margin-bottom: 36px;
          width: 165px;
        }
        @media(min-width: 768px){
          img{
            // margin-top: 4px;
            // margin-left: 15px;
          }
        }
        @media(min-width: 1024px){
          float: right;
          width: 200px;
          img{
            width: 183px;
            margin-top: 3px;
            margin-left: -106px;
          }
        }
      }
      h2{
        .fontOpenSansRegular;
        color: #41b2e8;
        font-size: 28px;
        line-height: 32px;
        margin-top: 0;
        // margin-bottom: 13px;
        margin-bottom: 18px;
        @media(min-width: 768px){
          margin-bottom: 30px;
        }
        @media(min-width: 1024px){
          margin-bottom: 13px;
        }
      }
      p{
        .fontNeueHelveticaRegular;
        color: #666666;
        font-size: 16px;
        line-height: 25px;
        margin-bottom: 32px;
        @media(min-width:768px){
          margin-bottom: 43px;
        }
      }
      .button-learn{
        .fontOpenSansSemiBold;
        color: #ffffff;
        background-color: #ebd80a;
        border-radius: 4px;
        display: block;
        font-size: 12px;
        margin: 0 auto 19px;
        line-height: 25px;
        padding: 12px 8px 9px;
        max-width: 392px;
        text-decoration: none !important;
        &:hover{
          background-color: #f2df13;
        }
        &:active{
          background-color: #e6d305;
        }
        @media(min-width: 768px){
          padding: 12px 11px 9px;
          font-size: 16px;
          margin-bottom: 20px;
        }
        @media(min-width: 1200px){
          // margin-left: 201px;
        }
      }
      .cta-bottom-text{
        font-size: 16px;
        margin: 0;
        a{
          color: #41b2e8;
          text-decoration: none;
          &:hover{
            text-decoration: underline;
          }
          &:active{
            color: #34a3d8;
            text-decoration: underline;
          }
        }
        @media(min-width: 768px){
          font-size: 16px;
        }
      }
    }

  }
  .section-description{
    //padding-top: 55px;
    padding-bottom: 40px;
    @media(min-width:768px){
      // padding-top: 49px;
      //padding-top: 55px;
    }
    .section-title{
      &.size-xs{
        @media(min-width:768px){
          // margin-bottom: 27px;
        }
        @media(min-width:1024px){
          // text-align: left;
          // padding-left: 268px;
        }
      }
    }
    .section-text{
      @media(min-width:1024px){
        // margin-bottom: 50px;
        // line-height: 32px;
      }
    }
    .tabs-container{
      @media(min-width:768px){
        padding: 0 17px;
      }
      @media(min-width:1024px){
        padding: 0 89px;
      }
    }
  }
}

.flexbox{
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -ms-flex;
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}


.display-flex{
  display: -webkit-flex;
  display: -ms-flexbox;
  display: -ms-flex;
  display: flex;
}

.justify-content-center{
  justify-content: center;
  -moz-justify-content: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
}

.flex-direction-column{
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}


.vertical-page{

  .banner-hero{

    display: -webkit-flex;
    display: -ms-flexbox;
    display: -ms-flex;
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;

    text-align:center;
    padding: 0;
    height: 253px;
    background-size: auto 253px;
    background-repeat: no-repeat;
    background-position:center top;

    @media @tablet{
      height:400px;
      background-size: auto 400px;
    }
    h1{
      .fontOpenSansBold();
      font-size:32px;
      margin-top:0;
      color:#ffffff;
      .ls(10);
      @media @tablet{
        font-size:42px;
      }
    }

  }
}

.vertical-page.generic-page{
  .banner-hero{
    background-image:url(../images/verticals/generic-page/generic-page-hero-small-3.jpg);
    @media @tablet{
      background-image:url(../images/verticals/generic-page/generic-page-hero-big-3.jpg);
    }
  }
}

.vertical-page.spa-page{
  .banner-hero{
    background-image:url(../images/verticals/spa-page/spa2-page-hero-small.jpg);
    @media @tablet{
      background-image:url(../images/verticals/spa-page/spa2-page-hero-big.jpg);
    }
  }
}

.vertical-page.salon-page{
  .banner-hero{
    background-image:url(../images/verticals/salon-page/salon-page-hero-xs-2.jpg);
    @media @tablet{
      background-image:url(../images/verticals/salon-page/salon-page-hero-big-2.jpg);
    }
  }
}

.vertical-page.float-page{
  .banner-hero{
    background-image:url(../images/verticals/float-page/float_hero_mobile.jpg);
    @media @tablet{
      background-image:url(../images/verticals/float-page/float_hero_desktop.jpg);
      background-position: ~'calc(50% + 146px) top';
    }
    @media @desktop{
      background-position: center top;
    }

    h1{
      @media @mobile{
        font-size:24px;

      }
      margin-bottom:0;

      font-size:24px;
      @media @tablet{
        font-size:38px;
      }

    }
  }
  .banner-value{
    background-image:url(../images/verticals/float-page/value_box_img_mobile.jpg);
    @media @tablet{
      background-image:url(../images/verticals/float-page/value_box_img_tablet.jpg);
    }
    @media @desktop{
      background-image:url(../images/verticals/float-page/value_box_img_desktop.jpg);
    }
  }
}

.vertical-page.cryo-page{
  .banner-hero{
    background-image:url(../images/verticals/cryo-page/cryo_hero_mobile.jpg);
    @media @tablet{
      background-image:url(../images/verticals/cryo-page/cryo_hero_desktop.jpg);
    }
    h1{
      font-size:24px;
      @media @tablet{
        font-size:38px;
      }
    }
  }
  .banner-value{
    background-image: url("../images/verticals/salon-page/salon-page-value-small2.jpg");
    @media(min-width:768px){
      background-position: 51% center;
      background-image: url("../images/verticals/salon-page/salon-page-value-big.jpg");

    }
    @media(min-width:1024px){
      // background: url("../images/verticals/salon-page/salon-page-value-big.jpg") top center no-repeat;
      // height:600px;
      // background-size: auto 600px;
      background-position: center;
    }
  }
}

.vertical-page.blowdry-page{
  .banner-hero{
    background-image:url(../images/verticals/blowdry-page/blowdry_hero_mobile.jpg);
    @media @tablet{
      background-image:url(../images/verticals/blowdry-page/blowdry_hero_desktop.jpg);
    }
  }

  .banner-value{
    background-image:url(../images/verticals/blowdry-page/value_box_img_mobile.jpg);
    @media @tablet{
      background-image:url(../images/verticals/blowdry-page/value_box_img_tablet.jpg);
    }
    @media @desktop{
      background-image:url(../images/verticals/blowdry-page/value_box_img_desktop.jpg);
    }
  }
  .banner-hero{
    h1{
      @media @mobile{
        font-size:24px;
      }
      @media @tablet{
       // font-size:38px;
      }
    }
  }
}

.vertical-page.lash-page{
  .banner-hero{
    background-image:url(../images/verticals/lash-page/lash_hero_mobile.jpg);
    @media @tablet{
      background-image:url(../images/verticals/lash-page/lash_hero_desktop.jpg);
      background-position: ~'calc(50% - 39px) 0';
    }
    @media @desktop{
      background-position: 50% 0;
    }

  }
  .banner-value{
    background-image:url(../images/verticals/float-page/value_box_img_mobile.jpg);
    @media @tablet{
      background-image:url(../images/verticals/float-page/value_box_img_tablet.jpg);
    }
    @media @desktop{
      background-image:url(../images/verticals/float-page/value_box_img_desktop.jpg);
    }
  }
  .banner-hero{
    h1{
      .fontOpenSansBold();
      font-size:24px;
      margin-top:0;
      margin-bottom:0;
      color:#ffffff;
      .ls(10);
      @media @tablet{
        font-size:38px;
      }
    }
  }
  @media @mobile{
    #sell .section-text{
      padding:0 8px;
    }
  }
}

.vertical-page.float-page, .vertical-page.cryo-page, .vertical-page.blowdry-page, .vertical-page.lash-page{
  .section-description {
    padding-top: 43px;
    @media @tablet{
      padding-top: 55px;
      overflow:hidden;
    }
    @media @desktop{
      overflow:auto;
    }
    @media @desktop{
      .section-text.text-center{
        width: 720px;
        margin-left: auto;
        margin-right: auto;
      }
    }
  }

  .section-video{
    padding-top: 39px;

    @media @tablet{
      padding-top: 55px;
    }

    h2.section-title{
      font-size:26px;
      margin-bottom: 0px;
      @media @tablet{
        font-size:36px;
      }
    }

    h3.section-title{
      .fontOpenSansRegular;
      font-size:26px;
      .lh(36, 26);
      color:#41b2e8;
      margin-bottom: 15px;
      @media @tablet{
        line-height:normal;
        font-size:36px;
        margin-bottom: 20px;
      }
    }
    p.section-text{
      .fontNeueHelveticaLight;
      font-size:16px;
      line-height:normal;
      padding: 0px 16px;
      @media @tablet{
        font-size:21px;
        margin-bottom: 36px;
      }
    }
    @media @mobile{
      .video-placeholder .video-btn{
        background-size: contain;
        margin-top: -22px;
        margin-left: -22px;
        width: 46px;
        height: 46px;
      }
    }
  }

  .banner-value {
    padding: 50px 0;
    height: 271px;
    background-size: auto 271px;
    background-repeat: no-repeat;
    background-position: 50% center;
    .flexbox();
    @media @tablet{
      height: 600px;
      background-size: auto 600px;
    }
    @media @mobile{
      .col-sm-5{
        padding:0;
      }
    }
    .banner-value-text{
      position:relative;
      top:0;
      left:0;
      margin-bottom:0;
      @media @mobile{
        margin-top:0;
      }
      h2{
        .fontOpenSansSemiBold;
        font-size:26px;
        .lh(36, 26);
        color:#fff;
        @media @tablet{
          .fontOpenSansRegular;
          font-size:36px;
          line-height: 119%;
          padding-right: 0px;
        }
        @media @desktop{
          padding-right: 50px;
        }
      }
      p{
        @media @tablet{
          .fontNeueHelveticaMedium;
          font-size:16px;
          .lh(25, 16);
          padding-right: 16px;
        }
        @media @desktop{
          padding-right: 30px;
        }
      }
      a{
        margin-bottom:0;
        @media @tablet{
          .fontOpenSansBold;

        }
      }
    }
  }
  .section-block{
    .banner-value-text{
      p{
        padding: 3px 10px 0;
        margin-top: 0px;
        margin-bottom:15px;
      }
      a{
        color:#41b2e8;
      }
    }
  }

  .section-block.cta{
    padding-bottom: 15px;
    @media @tablet{
      padding-top: 49px;
      padding-bottom: 23px;
    }
    @media @desktop{

      padding-top: 55px;
      padding-bottom: 23px;

      .row{
        .display-flex();
        .col-lg-4{
          .display-flex();
          .justify-content-center();
          .flex-direction-column();
        }
      }

      .col-lg-push-6 {
        left: 71%;
      }

      .col-lg-4 {
        width: 28%;
        float: left;
      }

      .col-lg-pull-4 {
        right: 19%;
      }

      .col-lg-6 {

        width: 60%;
      }
    }
    .col-lg-6 {
      @media @desktop and (max-width:1199px){
        width: 63%;
      }
    }


    .text-block {
      width:auto;

      h2{
        .fontOpenSansSemiBold;
        font-size:28px;
        color:#41b2e8;
        .ls(10);
        line-height: 1.2em;
        margin-bottom: 37px;
        @media @tablet{
          .fontOpenSansRegular;
          padding-top: 41px;
          margin-bottom: 11px;
        }
        @media @desktop{
          padding-top: 0px;
          margin-bottom:20px;
        }
      }

      img{
        width: 268px;
        margin-bottom: 25px;
      }

      p{
        .fontNeueHelveticaRegular;
        font-size:16px;
        .lh(25, 16);
        .ls(10);
        color:#666666;
        margin-bottom: 22px;
        @media @tablet-only{
          //.lh(34, 16);
          width: 542px;
          margin: 0px auto 22px;
        }
      }

      a.button-learn{
        background-color:#ebd80a;
        .fontOpenSansSemiBold;
        font-size:15px;
        color:white;
        .ls(10);
        padding: 11px 16px;
        max-width: none;
        display:inline-block;
        margin: 0 auto 16px;
        @media @tablet{
          padding: 11px 28px;
          margin: 0 auto 11px;
        }
      }

      p.cta-bottom-text{
        .fontNeueHelveticaRegular;
        font-size:12px;
        .lh(34, 12);
        .ls(10);
        @media @tablet{
          font-size:14px;

        }
        a{
          color:#4091c8;
        }
      }

    }
    img{
      margin: 0 auto;
    }
    .image-block{
      width:auto;
      float:none;
      img{
        width:270px;
        margin: 0 auto;
        @media @desktop{
          width:216px;
          margin-bottom: 25px;
        }
      }
    }
  }
}

.spa-page{

  .banner-value{
    @media(min-width:1024px){
      background-image: url("/sites/default/files/basic-pages/spasoftware-page/spa-page-value-big-sm.jpg");
      background-position: center;
    }
  }
  @media(min-width:768px) and (max-width:1024px) {
    .banner-value-text {
      top: 148px;
    }
  }
}

.salon-page{

  @media (max-width: 767px){
    .section-video{
      padding-top: 45px;
      padding-bottom: 51px;
      .section-title{
        margin-bottom: 15px;
        line-height: 33px;
        font-size: 28px;
      }
      .section-text{
        line-height: 20px;
        margin-bottom: 33px;
      }
    }
    .section-block.cta{
      h2{
        margin-bottom: 21px;
      }
    }
  }
  @media (min-width: 768px){
    .section-video{
      padding-top: 50px;
    }
    .banner-value-text{
      top: 139px;
    }
    .section-block.cta{
      padding-top: 61px;
      h2{
        margin-bottom: 39px;
      }
    }
  }
  @media (min-width: 1024px){
    .banner-value-text{
      top: 80px;
    }
    .section-video{
      padding-top: 53px;
    }
   // .section-bullet-list {
      // padding-left: 157px;
    // }
    // .section-description .section-title.size-xs{
      // padding-left: 254px;
    // }
    .section-block.cta{
      padding-top: 58px;
      padding-bottom: 13px;
      h2{
        margin-bottom: 14px;
      }
    }
  }
}

.generic-page{

    @media(max-width:767px){
      .section-description{
        .section-title.size-xs{
          margin-bottom: 38px;
        }
      }
      .section-video{
        .section-title{
          line-height: 34px;
        }
        .section-text{
          line-height: 19px;
          margin-top: 20px;
          margin-bottom: 32px;
        }
      }
    }
    @media(min-width:768px){
      .section-description{
        padding-top: 92px;
        .section-title.size-xs{
          margin-bottom: 45px;
        }
      }
      .section-video{
        .section-title{
          margin-bottom: 24px;
        }
        .section-text{
          line-height: 26px;
          margin-bottom: 31px;
        }
      }
    }
    .section-description{
      padding-top: 55px;
    }
    @media(min-width:1024px){

      .section-video{
        .section-text{
          line-height: 25px;
          margin-bottom: 31px;
        }
      }
    }
  .banner-value{
    background-image: url("../images/verticals/generic-page/generic-page-value-xs.jpg");
    background-position: center;
    @media(min-width:768px){
      background-image: url("../images/verticals/generic-page/generic-page-value-small.jpg");
      .banner-value-text {
        top: 128px;
      }
    }
    @media(min-width:1024px){
      background-position:center;
      background-image: url("../images/verticals/generic-page/generic-page-value-big.jpg");

      .banner-value-text {
        left: -11px;
        top: 79px;
      }
    }
  }
}


#blog-links{
  margin-top: 6px;
  h2.title{
    .fontOpenSansRegular;
    color:#00aeef;
    font-size:26px;
    .lh(36, 26);
    text-align:center;
    margin-top: 40px;
    padding: 0 20px;
    margin-bottom:19px;
    @media(min-width:768px){
      font-size:30px;
      line-height:36px;
      width: 520px;
      margin: 53px auto;
    }
    @media(min-width:1108px){
      width: auto;
      margin: 56px auto 53px;
    }
  }

  .container{
    .row{
      margin:0;

      @media(min-width:1246px){
        margin-left: -13px;
        margin-right: -13px;

      }

    }
    @media(min-width:1248px){
      width:1232px;
      overflow:hidden;
    }
  }

  .col-md-4{
    text-align:center;
    width:100%;
    float:none;
    @media(min-width:768px){
      margin-bottom:51px;
    }
    @media(min-width:1108px){
      width:33.33%;
      float:left;
      text-align:left;
      padding-left:13px;
      padding-right:13px;
      margin-bottom:16px;
    }

    h2{
      .fontOpenSansRegular;
      color:#00aeef;
      font-size:26px;
      .lh(36, 26);
      @media(min-width:768px){
        font-size:30px;
        line-height:auto;
      }
    }

    h3{
      .fontOpenSansRegular;
      color:#666666;
      font-size:18px;
      margin-top:17px;
      margin-bottom:11px;
      @media(min-width:768px){
        font-size:24px;
        margin-top:25px;
      }
    }

    p{
      .fontNeueHelveticaRegular;
      color:#666666;
      font-size:14px;
      //.lh(36, 14);
      margin-top:16px;
      margin-bottom:0;
      // padding: 0 10px;
      @media(min-width:768px){
        font-size:16px;
        .lh(20.1, 16);
        width: 400px;
        margin: 17px auto 0;
      }
      @media(min-width:1108px){
        width:auto;
        padding: 0 14px 0 0;
      }
      &.link{
        margin-top:7px;
        margin-bottom:42px;
        padding: 0px;
        @media(min-width:768px){
          margin-top: 20px;
        }
      }
    }

    a{
      .fontOpenSansSemiBold;
      color:#00aeef;
      font-size:16px;
      .lh(36, 16);
      text-decoration:none;
      @media(min-width:768px){
        font-size:18px;
        .lh(20.1, 18);
      }
      &:hover{
        border-bottom:1px #00aeef solid;
      }
      &:active{
        color:#039bd3;
        border-bottom:1px #039bd3 solid;
      }
    }
    img{
      width:280px;
      @media(min-width:768px){
        width:393px;
      }
      @media(min-width:1108px){
        width:100%;
      }
    }

    &.item-2, &.item-3{
      p.link{
        @media(max-width:767px){
          margin-top:1px;
        }
      }
    }

  }
}


  .banner-value.banner-salon-value, .spa-page .banner-value{
    display:none;
    @media(min-width:1024px){
      display:block;
    }
  }

  .banner-salon-value-mobile, .banner-spa-value-mobile{


    @media(min-width:1024px){
      display:none;
    }

    .banner-value-text{
      margin-top: 38px;
      top:0;
      left:0;
      text-align:center;
      width:290px;


      h2 {
        margin: 0;
        font-family: 'Open Sans', sans-serif;
        font-weight: 600;
        color: #666666;
        font-size: 21px;
        line-height: 30px;
      }

       p {
         font-family: "Helvetica Neue", 'Helvetica Neue LT W06_55 Roman', sans-serif;
         font-weight: normal;
         color: #666666;
         font-size: 16px;
         line-height: 25px;
         margin-top: 26px;
         margin-bottom: 30px;
       }

       a{
         font-size:16px;
       }


    }

  }