@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-custom.eot');
  src: url('../fonts/fontawesome-custom.eot') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.0.1') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.0.1') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.0.1#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}


@import "bourbon";

$experimental-support-for-svg: true;
@import "variables.scss";
@import "mixins.scss";
.left {
  float: left;
}

.right {
  float: right;
}

.clear {
  clear: both;
}

a {
  text-decoration: none;
}

.upp {
  text-transform: uppercase;
}

.wrp {
  margin: 0 auto;
  padding: 0px 10px;
  width: 1060px;
}
.fullWidth .in, .fullWidth .cck {
  margin: 0 auto;
  width: 1040px;
}
.bpd .in, .bpd .cck {
  margin: 0 auto;
  width: 807px;
}
.bpd .in.pddbg, .fullWidth .in.pddbg {
  width: auto;
}
.oab {
  border-radius: 9px;
  color: #fff;
  text-align: center;
  padding: 40px 18px 25px 18px;
  &.light_cta {
    color: $gray;
  }
  h3 {
    font-family: 'Roboto Slab';
    font-size: $normalSize * 1.769;
    font-weight: 700;
    margin: 0;
  }
  p {
    .cnt & {
      color: #fff;
      font-size: $normalSize;
    }
  }
  .ctaLink {
      padding-top: 15px;
  }
  button[type="submit"], .ctaLink, input[type="submit"] {
    @include linear-gradient(#ffffff 0%, #f6f6f6 100%);
    border-radius: 4px;
    border: none;
    cursor: pointer;
    font-weight: 700;
    font-size: $normalSize * 1.538;
    font-family: 'Open Sans', sans-serif;
    line-height: 25px;
    min-height: 43px;
    margin-top: 20px;
    text-transform: uppercase;
    width: 70%;
    word-wrap: break-word;
    text-overflow: hidden;
    text-shadow: 1px 1px 1px 1px #fff;
    &.bbt {
      margin-top: 30px;
      width: 100%;
    }
    &:hover {
      @include linear-gradient(#f6f6f6 0%, #ffffff 100%);
    }
  }
  .ctaLink {
    display: block;
    word-wrap: break-all;
  }
  input[type="text"] {
    border-radius: 4px;
    border: none;
    color: #9f9f9f;
    font-size: $normalSize * 1.308;
    font-weight: 700;
    font-family: 'Open Sans', sans-serif;
    height: 42px;
    margin-bottom: 7px;
    padding: 0 7%;
    width: 86%;
  }
  input[type="text"]::-webkit-input-placeholder {
    color: #9f9f9f;
  }
}

@each $color in $widgetColors {
  .oab {
    &.#{nth($color, 1)}_cta {
      background: nth($color, 2);
      .ofr button[type='submit'], .ctaLink {
        box-shadow: 0px 1px 0px 0px nth($color, 3);
        color: nth($color, 2);
      }
    }
    &.light_cta {
      .ofr button[type="submit"], .ctaLink {
        color: $gray;
      }
    }
  }
}

section {
  .ttl + .oab {
    margin-top: 20px;
  }
}

.oab {
  img {
    margin: 0px 0px 25px 0px;
  }
  &.opt {
    img {
      margin-top: 10px;
    }
  }
  p, h3 {
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.frm {
  input[type="text"], .op-r {
    margin-bottom: 10px;
  }
  input[type="text"] {
    box-sizing: border-box;
    box-shadow: 4px 4px 3px -3px #e4e4e4 inset;
    font-size: $normalSize * 0.83;
    padding: 4% 0% 4% 7%;
    width: 100%;
  }
  input[type='submit'], button {
    cursor: pointer;
  }
}

//ribbon focus areas
.rbn {
  @include transition(all, 200ms, linear);
  padding: 8px 0px;
  .rbin {
    display: table;
    font-size: $normalSize * 1.154;
    margin: 0 auto;
    .awe {
      font-family: FontAwesome;
      font-size: $normalSize;
      line-height: $normalSize;
    }
  }
  &:hover {
    padding: 10px 0px;
  }
}

@each $color in $ribbonFocus {
  .rbn.#{nth($color, 1)} {
    @include linear-gradient(nth($color, 2) 0%, nth($color, 3) 49%, nth($color, 4) 50%, nth($color, 5) 100%);
    border-bottom: 1px solid nth($color, 7);
    color: nth($color, 8);
    a, .awe {
      color: nth($color, 8);
      text-shadow: 1px 1px 0px nth($color, 6);
    }
  }
}

@each $color in $ribbonFocusHover {
  .rbn.#{nth($color, 1)}:hover {
    @include linear-gradient(nth($color, 2) 0%, nth($color, 3) 49%, nth($color, 4) 50%, nth($color, 5) 100%);
    border-bottom: 1px solid nth($color, 7);
    color: nth($color, 8);
    a, .awe {
      color: nth($color, 8);
      text-shadow: 1px 1px 0px nth($color, 6);
    }
  }
}

//regular focus areas
.far {
  .lfa {
    h1, h2, h3, h4, h5, h6, a {
      color: #fff;
    }
    &.light {
      h1, h2, h3, h4, h5, h6, a {
        color: #3a3a3a;
      }
    }
  }
}

.far {
  color: #fff;;
  font-size: 18px;
  padding: 50px 0px;
  h2 {
    font-size: $normalSize * 1.667;
    line-height: $normalSize;
    margin-top: 0px;
    margin-bottom: 10px;
  }
  h1, h2, h3, h4, h5, h6, a {
    color: #fff;
  }
  &.light {
    h1, h2, h3, h4, h5, h6, a {
      color: #3a3a3a;
    }
  }
  p, ul, a {
    .cnt & {
      color: #fff;
      line-height: $normalSize * 1.5;
    }
  }
  &.light {
    .cnt & {
      h2, p {
        color: #3a3a3a !important;
      }
    }
  }
  ul {
    font-style: italic;
    letter-spacing: 1px;
    margin: 20px auto 0px auto;
    width: 80%;
  }
  hr {
    border: none;
    margin: 20px -19px 20px -19px;
  }
  &.farb {
    hr {
      margin: 20px 0px;
    }
  }
  ul {
    li {
      list-style-image: url('../images/green_arrow.png');
    }
  }
}

@each $color in $focusAreaColor {
  .far.#{nth($color, 1)} {
    background: nth($color, 2);
  }
}

.far {
  &.blue {
    hr {
      background: #2980b9;
    }
  }
  &.dark {
    hr {
      background: #000;
    }
  }
  &.green {
    hr {
      background: #20a850;
    }
  }
  &.light {
    color: #3a3a3a;
    hr {
      background: #808080;
    }
  }
  &.purple {
    hr {
      background: #8e44ad;
    }
  }
  &.red {
    hr {
      background: #c0392b;
    }
  }
  &.orange {
    hr {
      background: #e67e22;
    }
  }
 &.mid{

    &.f1{
      margin-bottom: 20px;
      .wrp{
        width: 100%;
        padding: 0;
      }
    }
    &.f2,&.f4,&.f5{
      margin-bottom: 20px;
      .wrp{
        width: 96%;
        hr{
          margin: 20px 0px 20px 0px;
        }
      }
    }
  }
}

#container-focus-preview {
  hr {
    height: 1px;
  }
}

.f1 {
  .wrp {
    padding: 0px 20px;
    text-align: center;
  }
  img {
    margin: 30px 0px;
  }
}

.bSe {
  .f2 {
    .wrp {
      width: auto;
    }
  }
}

.f2 {
  &.farb {
    .wrp {
      box-sizing: border-box;
      padding: 0px 5%;
    }
  }
  .wrp {
    box-sizing: border-box;
    padding: 0px 10px;
  }
  .left {
    width: 65%;
  }
  .right {
    width: 35%;
  }
  .f2l {
    display: block;
    max-width: 32%;
    padding-right: 2%;
    width: auto;
  }
  .f2r {
    width: 60%;
  }
}

.f3 {
  .left {
    width: 65%;
  }
  .right {
    width: 33%;
  }
}

.f4 {
  p, ul {
    font-size: $normalSize * 0.875;
  }
  .left {
    padding-right: 1%;
    width: 71.2%;
  }
  .right {
    width: 27.8%;
    p {
      color: #fff;
      font-size: $normalSize * 0.667;
      margin-top: 10px;
      text-align: center;
    }
  }
  &.light {
    p {
      color: #3a3a3a;
    }
  }
}

.f5 {
  .f5l {
    max-width: 20%;
    padding-right: 5%;
    width: auto;
  }
  .f5r {
    width: 75%;
  }
  .frm {
    padding-left: 60px;
    input[type="text"] {
      padding: 17px 20px 18px 20px;
    }
    .input_for_2_fields {
      margin-right: 2%;
      width: 27%;
    }
    .submit_with_2_fields {
      width: 33%;
    }
    .input_for_1_fields {
      margin-left: 16%;
      width: 30%;
    }
    .submit_with_1_fields {
      margin-right: 16%;
      width: 28%;
    }
    .btn {
      button[type='submit'], input[type="submit"] {
        padding: 0.40em 0em;
      }
    }
  }
}

.f1, .f5 {
  .lfa {
    box-sizing: border-box;
  }
}

.f3, .f4 {
  .lfa {
    box-sizing: border-box;
    padding: 0% 2%;
  }
}

.f5 .lfa {
  hr {
    border-color: $gray;
  }
  .dwr {
    padding-left: 0px;
  }
}
.bSeCont .lfa {
  width: 100%;
}
//buttons

.btn, .btn > span, .btn button[type="submit"], .btn input[type="submit"] {
  display: inline-block;
}

.btn {
  cursor: pointer;
  line-height: 1em;
  margin-bottom: 15px;
  position: relative;
  outline: none;
  overflow: visible; /* removes extra side padding in IE */
  -moz-user-select: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  user-select: none;
  white-space: normal;
  &.small {
    border-radius: 4px;
  }
  &.medium {
    border-radius: 4px;
  }
  &.big {
    border-radius: 4px;
  }
  &:active {
    position: relative;
    top: 1px;
  }
}

button::-moz-focus-inner {
  border: none;
}

button.button {
  margin: 0;
  padding: 0;
}

a.button, a.button:hover {
  text-decoration: none;
}

.btn > span, .btn button[type="submit"], .btn input[type="submit"] {
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  line-height: 1em;
  position: relative;
  padding: .6em 1.3em;
  text-align: center;
  text-decoration: none;
  white-space: normal;
}

.btn {
  text-transform: uppercase;
  &.small > span, &.small button[type="submit"], &.small input[type="submit"] {
    font-size: $normalSize * 0.846;
    padding: 10px 15px;
  }
  &.medium > span, &.medium button[type="submit"], &.medium input[type="submit"] {
    font-size: $normalSize;
    padding: 18px 15px;
  }
  &.big > span, &.big button[type="submit"], &.big input[type="submit"] {
    font-size: $normalSize * 1.5;
    padding: 18px 15px;
  }
  &.aligncenter {
    display: table;
    margin: 0 auto 15px auto;
  }
}

@each $color in $buttonColors {
  .btn.#{nth($color, 1)} {
    @include linear-gradient(nth($color, 4) 0%, nth($color, 5) 50%, nth($color, 6) 100%);
    box-shadow: 0px 1px 0px nth($color, 3) inset;
    border: 1px solid nth($color, 2);
    color: #fff !important;
    button[type="submit"], input[type="submit"] {
      color: #fff !important;
    }
  }
}

@each $color in $buttonHover {
  .btn.#{nth($color, 1)}:hover {
    @include linear-gradient(nth($color, 4) 0%, nth($color, 5) 50%, nth($color, 6) 100%);
    box-shadow: 0px 1px 0px nth($color, 3) inset;
    border: 1px solid nth($color, 2);
  }
}

@each $color in $buttonActive {
  .btn.#{nth($color, 1)}:active {
    @include linear-gradient(nth($color, 4) 0%, nth($color, 5) 50%, nth($color, 6) 100%);
    box-shadow: 0px 1px 0px nth($color, 3) inset;
    border: 1px solid nth($color, 2);
  }
}

.btn.light {
  color: #4e4e4e !important;
  button[type="submit"], input[type="submit"] {
    color: #4e4e4e !important;
  }
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  button.btn > span {
    margin-top: -1px;
    margin-right: -2px;
    margin-left: -2px;
  }
}

.btn.full {
  width: 100%;
  text-align: center;
}

.far {
  .btn {
    font-weight: bold;
  }
  .btn span, .btn button[type="submit"], .btn input[type="submit"] {
    border: none;
    text-shadow: none;
  }
}

.f1, .f2 {
  .btn {
    font-size: $normalSize;
    span {
      font-size: $normalSize;
    }
  }
}

.f4, .f5 {
  .btn input {
    font-size: 24px;
    min-height: 55px;
  }
}

.f1 {
  .btn {
    span {
      padding: 20px 95px;
    }
  }
}

.f2 {
  .right {
    text-align: right;
  }
  .btn {
    margin-top: 10%;
    width: 90%;
    span {
      padding: 10%;
      width: 80%;
    }
  }
}

.f4 {
  .btn {
    width: 100%;
    span {
      padding: 1em 0em;
      width: 100%;
    }
  }
}

.focus_submit {
  background: none;
  border-left: none;
  border-right: none;
  border-bottom: none;
  width: 100%;
}

#poststuff #thrive_focus_options #container-focus-preview {
  h1 {
    font-size: $normalSize * 2.250;
    margin: 33px 0px 16px 0px;
  }

  h2 {
    color: #fff;
    font-size: $normalSize * 1.875;
    font-weight: bold;
    margin: 25px 0px 12px 0px;
  }
  .light {
    h2, h3, a {
      color: #3A3A3A;
    }
  }
  h3 {
    border: none;
    color: #fff;
    font-size: $normalSize * 1.625;
    margin: 22px 0px 11px 0px;
    padding: 0px;
  }

  h4 {
    font-size: $normalSize * 1.375;
    margin: 18px 0px 9px 0px;
  }

  h5 {
    font-size: $normalSize * 1.125;
    margin: 16px 0px 8px 0px;
  }

  h6 {
    font-size: $normalSize * 0.875;
    margin: 14px 0px 7px 0px;
  }
  a {
    color: #fff;
    text-decoration: underline;
    &.gBt {
      color: #5b5b5b;
      text-decoration: none;
    }
  }
}

