.use-headline {
  font-size: 1.4em;
  font-weight: 200;
  text-shadow: 1px 1px 1px $black-transparent-50;
  span {
    font-weight: 500;
  }
  letter-spacing: 1px;
  margin-top: -20px;
  margin-bottom: 10px;
}
.flex-boxes {
  $base-border-radius: 3px !default;
  $base-background-color: white !default;
  $dark-gray: #333 !default;
  $light-gray: #DDD !default;
  $base-font-color: $dark-gray !default;
  $flex-box-border-color: $light-gray;
  $flex-box-border: 1px solid $flex-box-border-color;
  $flex-box-background: lighten($light-gray, 10%);
  $flex-box-gutter: 0.4em;
  $flex-box-width: 18em;
  $flex-box-color: transparentize($base-font-color, 0.3);
  $flex-box-top-colors:
  #E36B6B,
  #5a85b1,
  #9772AA,
  #e8e77f,
  #a6c771,
  #C46AA4;
  @include clearfix;
  @include display(flex);
  @include justify-content(center);
  @include align-items(stretch);
  @include flex-wrap(wrap);
  clear: both;
  text-align: left;

  .flex-box {
    @include transition (all 0.2s ease-in-out);
    @include flex(2 2 15em);
    @include align-self(stretch);
    background: $flex-box-background;
    border-radius: $base-border-radius;
    //box-shadow: inset 0 0 1px $flex-box-border-color, 0 2px 0px darken($base-background-color, 10%);
    display: block;
    position: relative;
    margin: $flex-box-gutter;
    padding: 3em 2em 2em 2em;
    @include transition (all 0.2s ease-in-out);
    text-decoration: none;
    @for $i from 1 to 7 { // assign colors from $flex-box-top-colors list
      &:nth-child(#{$i}) {
        $color-from-list: nth($flex-box-top-colors, $i);
        border-top: 6px solid $color-from-list;
        border-bottom: 1px $light-gray solid;
        border-left: 1px $light-gray solid;
        border-right: 1px $light-gray solid;
        //background: $color-from-list;
        &:focus,
        &:hover {
          //background-color: transparentize($color-from-list, 0.9);
          background-color: $white;
        }
      }
    }
    table, table tr, table td {
      margin: 0;
      padding: 0;
      border: 0;
    }
    img {
      display: block;
      height: 3em;
      margin-bottom: 2em;
      margin: auto;
      opacity: 0.4;
    }
    .flex-title {
      color: $flex-box-color;
      font-size: 1.2em;
      font-weight: 800;
      margin-bottom: 0.5em;
    }
    p {
      color: transparentize($flex-box-color, 0.1);
      line-height: 1.5em;
      margin: auto;
    }
  }

  .flex-box-big {
    @include flex(1 1 40em);
  }
}
ul.headline-word-density {
  li {
    font-size: 0.7em;
    text-align: left;
    text-transform: uppercase;
    float: left;
    clear: left;
    margin: 0.25em 0em;
    line-height: 1.7em;
    span {
float: left;
      color: $dark-gray;
      font-weight: 900;
      letter-spacing: 1px;
    }
    b {
      margin-right: 0.5em !important;
      font-size: 0.9em;
      font-weight: 900;
      height: 1.7em;
      width: 1.7em;
      display: block;
      float: left;
      line-height: 1.7em;
      text-align: center;
      color: $white;
      border-radius: 100%;
    }
    &.common {
      b {
        background: $salescrowd-green;
      }
    }
    &.uncommon {
      b {
        background: $salescrowd-facebook;
      }
    }
    &.power {
      b {
        background: $salescrowd-purple;
      }
    }
    &.emotion {
      b {
        background: $salescrowd-pink;
      }
    }
    &.superlatives {
      b {
        background: $salescrowd-light-orange;
      }
    }
    &.misc{
      b {
        color: $black;
      background: $salescrowd-snapchat;
    }
    }
  }
  float: left;
  clear: left;
  padding: 0;
  margin: 0;
}
.headline-type {
  background: $salescrowd-warm-gray;
  padding: 0.25em 0.5em;
  border-radius: $base-border-radius;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-align: center;
  font-weight: 900;
}
.headline-counts {
  font-size: 0.8em;
  margin-top: 1.5em;
  strong {
    text-transform: uppercase;
  }
  p {
    margin-bottom: 1em;
  }
  i {
    &.positive {
      color: $salescrowd-green;
    }
    &.neutral {
      color: $salescrowd-light-orange;
    }
    &.negative {
      color: $salescrowd-red;
    }
  }
}

.count-roundall {
  height: 55px;
  width: 55px;
  border-radius: 100%;
  color: $white;
  h4 {
    font-weight: 900 !important;
    font-size: 1.2em !important;
    line-height: 1em;
    margin: 0;
  }
  p {
    font-weight: 700 !important;
    font-size: 0.4em !important;
    margin: 0;
    color: $white;
    text-transform: uppercase;
  }
  padding-top: 12px;
  text-align: center;
  margin: 0px auto;
  background: $salescrowd-warm-gray;
  &.positive {
    background: $salescrowd-green;
  }
  &.neutral {
    background: $salescrowd-light-orange;
  }
  &.negative {
    background: $salescrowd-red;
  }
}

.red-headline {
  color: $salescrowd-red;
 }
.green-headline {
  color: $salescrowd-green;
}
.nochange-headline {
  color: $salescrowd-earth;
}

.score-history {
 // height: 140px;
  //overflow-y: scroll;
  li {
    list-style: decimal;
    font-size: 0.8em;
    font-weight: 900;
  }
  .pagination {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    ul li a {
      padding: .175em .4em;
    }

  }
}

.button-flex {
  position: absolute;
  @include transition (all .3s ease-in-out);
  margin-bottom: 1em;
  text-transform: uppercase;
  letter-spacing: 2px;
  background: $salescrowd-warm-gray !important;
  color: $dark-gray !important;
  font-size: 0.8em !important;
  outline: none;
  font-weight: 900;
  top: -12px;
  left: 0;
  border-radius: 3px 3px 0 0;
  padding-top: 0em;
  padding-bottom: 0.1em;
  line-height: 0.9em;
  display: none;
  @include MQ(M) {
    display: block;
  }
}

.f1 {
  .button-flex {
    background: $salescrowd-red !important;
    color: $white !important;
    &:hover, &:focus {
      background: darken($salescrowd-red, 10%) !important;
      color: $white !important;
    }
  }
}

.f2 {
  .button-flex {
    background: $salescrowd-facebook !important;
    color: $white !important;
    &:hover, &:focus {
      background: darken($salescrowd-facebook, 10%) !important;
      color: $white !important;
    }
  }
}

.f3 {
  .button-flex {
    background: $salescrowd-purple !important;
    color: $white !important;
    &:hover, &:focus {
      background: darken($salescrowd-purple, 10%)  !important;
      color: $white !important;
    }
  }
}

.f4 {
  .button-flex {
    background: $salescrowd-snapchat !important;
    color: $black !important;
    &:hover, &:focus {
      background: darken($salescrowd-snapchat, 10%) !important;
      color: $black !important;
    }
  }
}

//The Best Thing You'll Ever Need Is A Loving Toothbrush
.blackboard {
  width: 100%;
  @include MQ(L) {
    width: 85%;
    max-width: 997px;
  }
  height: auto;
  min-height: 400px;
  margin: 0 ;
  background: $black url("../images/cb.jpg");
  background-size: cover;
 // background: $black;
  display: block;
  position: relative;
  z-index: 300;
  border: 4px $dark-gray solid;
  margin: 0 auto -7em auto;
  padding: 1em 0em 17em 0em;
  .grade-wrapper {
    position: absolute;
    right: 10px;
    top: 10px;
    text-align: center;
    p {
      font-size: 0.8em;
      margin: 0 0 0.25em 0;
      text-transform: uppercase;
      font-weight: 900;
      letter-spacing: 1px;
    }
    h4 {
      font-size: 1.3em;
      margin: 0;
      font-weight: 900;
      font-family: 'Schoolbell', $sans-serif;
    }
    h5 {
      margin: 0.25em 0 0 0;
      font-size: 1em;
      font-family: 'Schoolbell', $sans-serif;
    }
  }
  @include MQ(M) {
    margin: 0 auto -9em auto;
    padding: 1em 2em 8em 2em;
  }
  .fixer-blackboard {
    clear: both;
    width: 100%;
    display: table;
  }
  .blackboard-advice {
    color: $white;
    clear: both;
    display: table;

    margin-left: auto;
    @include clearfix;
    margin-right: auto;

    width: 100%;
    top: 1em;
    @include MQ(S) {
      top: 1em;
    }
    @include MQ(M) {
      max-width: 90%;
      margin-top: 5em;
      top: 0em;
    }
    @include MQ(L) {
      top: 0em;
    }
    display: block;
    position: relative;
    //padding: 1em;
    background: $salescrowd-warm-light-gray;
    border-radius: $base-border-radius;
    @include transition (all 0.2s ease-in-out);
    p {
      font-size: 0.9em;
      line-height: 1.2em;
      font-weight: 600;
      text-align: left;
      margin-bottom: 10px;
      padding: 0 1em;
      &:first-child {
        padding-top: 1em;
      }
      &:last-child {
        padding-bottom: 1em;
      }
      color: $dark-gray;
      strong {
        font-weight: 900;
        text-transform: uppercase;
        //color: $gray;
        color: $dark-gray;
      }
    }
  }
  .input {
    position: relative;
    z-index: 1;
    display: block;
    margin:  0 1em 1em 1em;
    max-width: 100%;
    width: calc(100% - 2em);
    vertical-align: top;
  }
  //How To Get More Likes On Your Facebook Page
  .input__field {
    position: relative;
    display: block;
    float: right;
    padding: 0.8em;
    width: 85%;
    word-wrap: break-word;
    overflow: auto;
    border: none;
    border-radius: 0;
    min-height: 110px;
    resize: none;
    background: #f0f0f0;
    color: $white;
    font-family: 'Schoolbell', $sans-serif;
    font-size: 1.1em;
    @include MQ(M) {
        font-size: 1.5em;
    }
    @include MQ(L) {
      font-size: 1.9em;
    }
    font-weight: 900;
    -webkit-appearance: none;
  }

  .input__field:focus {
    outline: none;
  }

  .input__label {
    display: inline-block;
    float: right;
    padding: 0 1em;
    width: 40%;
    color: #6a7989;
    font-weight: bold;
    font-size: 90%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  .input__label-content {
    position: relative;
    display: block;
    padding: 1.6em 0;
    width: 100%;
  }

  .graphic {
    position: absolute;
    top: 0;
    left: 0;
    fill: none;
  }

  .icon {
    color: #ddd;
    font-size: 150%;
  }
  .input--akira {
    margin-top: 2em;
  }

  .input__field--akira {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    display: block;
    padding: 0 1em;
    width: 100%;
    height: 100%;
    background: transparent;
    text-align: center;
  }

  .input__label--akira {
    padding: 0;
    width: 100%;
    //background: #696a6e;
    color: $white;
    cursor: text;
    opacity: 0;
    @include transition (all 0.2s ease-in-out);
  }

  .input__label--akira::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    //background: $black;
    -webkit-transform: scale3d(0.97, 0.85, 1);
    transform: scale3d(0.97, 0.85, 1);
    -webkit-transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
  }

  .input__label-content--akira {
    -webkit-transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
  }

  .input__field--akira:focus + .input__label--akira::before,
  .input--filled .input__label--akira::before {
    -webkit-transform: scale3d(0.99, 0.95, 1);
    transform: scale3d(0.99, 0.95, 1);
  }

  .input__field--akira:focus + .input__label--akira,
  .input--filled .input__label--akira {
    cursor: default;
    pointer-events: none;
    opacity: 1;
  }

  .input__field--akira:focus + .input__label--akira .input__label-content--akira,
  .input--filled .input__label-content--akira {
    -webkit-transform: translate3d(0, -3.5em, 0);
    transform: translate3d(0, -3.5em, 0);
    //background: $black;
  }

}

.headline-tool-page {
  //.sales-crowd-promo {
  //  @include MQ(S) {
  //    padding: 0;
  //  }
  //
  //}
  .sales-crowd-promo.text-promo-center {
    padding: 0;
    @include MQ(M) {
      padding-top: 2em;
      padding-left: 2em;
      padding-right: 2em;
        padding-bottom: 140px;
       }
  }
  .content.overlap {
    @include MQ(M) {
      margin-top: -100px;
    }
    margin-top: -2em;
  }
  .content, article, main {
    background: transparent;
    padding: 0 0 0.5em 0;
  }
  main {
    padding-top: 2em;
  }
  .magnet-signup {
    padding-top: 2em;
  }
  .headline-extra {
    padding-bottom: 1em;
    padding-left: 0.4em;
    padding-right: 0.4em;
    .content {
      padding-bottom: 3em;
    }
  }
}

img.headline-header-img {
  position: absolute;
  top: 40px;
  z-index: 7000;
  width: 0px;
  height: 30px;
  left: 0;
  margin-left: -205px;
  opacity: 0;
  @include MQ(L) {
    opacity: 1;
    height: 300px;
    width: 252px;
  }
}

.headline-total-score {
  width: 100px;
  margin: auto;
  height: 100px;
  position: relative;
  display: block;
  font-size: 1.5em;
  text-align: center;
  font-weight: 900;
  margin-top: 0em;
  color: $salescrowd-green;
  line-height: 100px;
  //left: 0px;
}

.headline-button-wrapper {
  width: 100%;
  position: relative;
  text-align: center;
  z-index: 1000;
  @include MQ(M) {
    top: 4em;
  }
}

.button-headline {
  //background: none;
  background: $white;
  color: $black;
  padding: 0.75em 1em;
  border: 0;
  outline: none;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 900;
  font-size: 0.8em;
  position: relative;
margin-left: auto;
  margin-right: auto;
  width: 70%;
  @include MQ(M) {
    width: auto !important;
  }


  z-index: 1000;
  //margin-bottom: 3em;
  &:hover, &:focus {
    //background: none;
    background: $salescrowd-snapchat;
    color: $black;
    outline: none;
    border: 0;
  }
}

.ng-hide {
  display: none;
}

.tool-hidden {
  opacity: 0;
  height: 0px;
  @include transition(all .25s ease-in-out);
  &.toolvisible {
    opacity: 1;
    height: auto;
    @include transition(all .25s ease-in-out);
  }
}

.opacityhidden {
  opacity: 0;
  @include transition(all .25s ease-in-out);
  &.opacityvisible {
    opacity: 1;
    @include transition(all .25s ease-in-out);
  }
}

.scoretotal {
  width: 100%;
  height: 100px;
  position: absolute;
  font-size: 0.7em;
  font-weight: 900;
  color: $salescrowd-green;
  line-height: 100px;
  left: 0px;
}
.keywords-wrapper {
  display: block;
  width: 100%;
  padding-bottom: 2em;
}
.headline-keywords {
  width: 100%;
  //overflow: hidden;
  text-overflow: ellipsis;
  span.keyword {
    background: $salescrowd-orange;
    text-overflow: ellipsis;
    padding: 4px 8px;
    margin: 3px;
    display: inline;
    float: left;
    width: auto;
    font-size: 0.8em;
    font-weight: 900;
    color: $white;
    word-wrap: break-word;
    border-radius: $base-border-radius;
  }
}
.headline-panel {
  font-size: 0.8em;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 900;
  margin-bottom: 20px;
}
.sentiment-positive {
  color: $salescrowd-green;
  font-weight: 900;
  font-size: 5em;
  margin: 0;
  line-height: 1em;
  text-align: center;
}

.sentiment-neutral {
  color: $salescrowd-light-orange;
  font-weight: 900;
  font-size: 5em;
  margin: 0;
  line-height: 1em;
  text-align: center;
}

.sentiment-negative {
  color: $salescrowd-red;
  font-weight: 900;
  font-size: 5em;
  margin: 0;
  line-height: 1em;
  text-align: center;
}

.headline-sentiment {
  font-size: 1em;
  font-weight: 900;
  margin-top: -8px;
  text-align: center;
  p {
    font-size: 0.8em;
    text-align: left;
  }
}

.headline-bg {
  background: rgb(227,165,107);
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNlM2E1NmIiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZTQ4NjQ4IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -moz-radial-gradient(center, ellipse cover,  rgba(227,165,107,1) 0%, rgba(228,134,72,1) 100%);
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(227,165,107,1)), color-stop(100%,rgba(228,134,72,1)));
  background: -webkit-radial-gradient(center, ellipse cover,  rgba(227,165,107,1) 0%,rgba(228,134,72,1) 100%);
  background: -o-radial-gradient(center, ellipse cover,  rgba(227,165,107,1) 0%,rgba(228,134,72,1) 100%);
  background: -ms-radial-gradient(center, ellipse cover,  rgba(227,165,107,1) 0%,rgba(228,134,72,1) 100%);
  background: radial-gradient(ellipse at center,  rgba(227,165,107,1) 0%,rgba(228,134,72,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e3a56b', endColorstr='#e48648',GradientType=1 );
}

#chartjs-tooltip {
  opacity: 1;
  position: absolute;
  background: rgba(0, 0, 0, .7);
  color: white;
  padding: 3px;
  border-radius: 3px;
  -webkit-transition: all .1s ease;
  transition: all .1s ease;
  pointer-events: none;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}
#chartjs-tooltip.below {
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}
#chartjs-tooltip.below:before {
  border: solid;
  border-color: #111 transparent;
  border-color: rgba(0, 0, 0, .8) transparent;
  border-width: 0 8px 8px 8px;
  bottom: 1em;
  content: "";
  display: block;
  left: 50%;
  position: absolute;
  z-index: 99;
  -webkit-transform: translate(-50%, -100%);
  transform: translate(-50%, -100%);
}
#chartjs-tooltip.above {
  -webkit-transform: translate(-50%, -100%);
  transform: translate(-50%, -100%);
}
#chartjs-tooltip.above:before {
  border: solid;
  border-color: #111 transparent;
  border-color: rgba(0, 0, 0, .8) transparent;
  border-width: 8px 8px 0 8px;
  bottom: 1em;
  content: "";
  display: block;
  left: 50%;
  top: 100%;
  position: absolute;
  z-index: 99;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}

.score-total {
  width: 100px;
  height: 100px;
  text-align: center;
  position: relative;
  float: left;
  margin-right: 30px;
  h4 {
    text-transform: uppercase;
    font-size: 0.6em;
    font-weight: 900;
    margin-bottom: 10px;
  }
}


.word-breakdown {
  margin-bottom: 20px;
  p {
    margin: 0;
    font-weight: 500;
    span {
      font-size: 1em;
      text-transform: none;
      font-weight: 900;
    }
    &.note {
      margin: 5px 0;
      padding: 3px 10px;
      color: $white;
      border-radius: $base-border-radius;
      background: $salescrowd-red;
    }
  }
}

#rating {
  width: 180px;
  height: 180px;
  position: absolute;
  top: 60px;
  z-index: -1;
  background: $salescrowd-warm-gray;
  border-radius: 100%;
  left: 160px;
  text-align: center;
  padding: 20px;
  .rating-score {
    font-weight: 900;
    font-size: 3em;
    margin-bottom: 0px;
  }
  .rating-summary {
    font-size: 0.7em;
    font-weight: 500;
  }
}
.stats {


  ul {
    padding: 0;
  }

  li {
    border-right: 1px solid transparentize($base-font-color, 0.8);
    color: $salescrowd-orange;
    display: inline;
    float: left;
    font-family: $sans-serif;
    font-size: 1.2em;
    font-weight: 900;
    line-height: 1.1em;
    padding: 0 0.7em;

    &:first-child {
      padding-left: 0;
    }

    &:last-child {
      border-right: 0;
    }

  }

  span {
    color: $dark-gray;
    display: block;
    font-weight: 200;
    font-size: 0.7em;
    font-style: italic;
    margin-top: 0.5em;
    font-weight: normal;
  }
}




canvas {
  @include transition(all .25s ease-in-out);
}


//How To Get More Likes On Your Facebook Page

// Overlay

.overlay-chart {
  width: 30%;
  float: right;
  margin-left: 1em;
}

.overlay-headline-info {
  text-align: left;
  font-size: 1.4em;
  padding: 1em 4em;
  .word-breakdown p, .word-breakdown p span, .stats ul li span, .stats ul li, .sentiment {
    color: $white;
    border-color: $white;
    b {
      &.headline-common {
        color: $salescrowd-green !important;
      }

      &.headline-uncommon {
        color: $salescrowd-facebook !important;
      }

      &.headline-power {
        color: $salescrowd-purple !important;
      }

      &.headline-emotion {
        color: $salescrowd-pink !important;
      }

      &.headline-misc {
        color: $salescrowd-snapchat !important;
      }

      &.headline-superlative {
        color: $salescrowd-light-orange !important;
      }
    }
  }
  .onwhite {
    color: $white;
  }
  .keyword {
    background: $salescrowd-orange;
    padding: 20px;
    margin: 8px;
    font-size: 1.5em;
    color: $white;
    border-radius: $base-border-radius;
  }
  h1 {
    font-weight: 300;
    color: $white;
    text-transform: uppercase;
    letter-spacing: 4px;
  }
}

span.headline-type-result {
  background: $salescrowd-green;
  padding: 10px;
  color: $white;
  border-radius: $base-border-radius;
}

/* Overlay style */
.overlay {
  position: fixed;
  z-index: 2000;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  top: 0;
  left: 0;
  background: rgba($salescrowd-earth,0.95);
  h1 {
    margin-top: 0em;
  }
  .headline-current {
    font-size: 1.8em;
    font-weight: 400;
    text-align: left;
    color: $white;
    span {
      font-size: 1em;
      font-weight: 400;
      text-transform: capitalize;
      padding: 0 5px;
      margin: 0;
      @include transition(all .25s ease-in-out);
      &.space {
        margin: 0 -5px;
      }
      &:hover {
        cursor: pointer;
      }
      &.word-com {
        border-bottom: 5px $salescrowd-green solid;
      }
      &.word-uncom {
        border-bottom: 5px $salescrowd-facebook solid;
      }
      &.word-pow {
          border-bottom: 5px $salescrowd-purple solid;
        }
      &.word-emo {
        border-bottom: 5px $salescrowd-pink solid;
      }
      &.word-sup {
        border-bottom: 5px $salescrowd-light-orange solid;
      }
      &.word-unk {
        border-bottom: 5px $salescrowd-snapchat solid;
      }
    }
  }
  //The Best Thing You'll Ever Need Is A Loving Toothbrush
  .headline-sent {
    font-size: 1.8em;
    font-weight: 400;
    text-align: left;
    color: $white;
    span {
      font-size: 1em;
      font-weight: 400;
      text-transform: capitalize;
      padding: 0 5px;
      margin: 0;
      @include transition(all .25s ease-in-out);
      &.space {
        margin: 0 -5px;
      }
      &:hover {
        cursor: pointer;
      }
      &.word-pos {
        border-bottom: 5px $salescrowd-green solid;
      }
      &.word-neg {
        border-bottom: 5px $salescrowd-red solid;
      }
      &.word-neu {
        border-bottom: 5px $salescrowd-light-orange solid;
      }
    }
  }
}

//img.clickstart {
//  position: absolute;
//  display: block;
//  z-index: 200;
//  top: 145px;
//  left: auto;
//  width:250px;
//  left:50%;
//  margin-left:-125px;
//  @include transition(all .25s ease-in-out);
//  &:hover {
//    cursor: pointer;
//  }
//  &.remove {
//    opacity: 0;
//    height: 0;
//  }
//  @include MQ(M) {
//    width:500px;
//    margin-left:-250px;
//  }
//}

/* Overlay closing cross */
.overlay .overlay-close {
  width: 80px;
  height: 80px;
  position: absolute;
  right: 20px;
  top: 20px;
  overflow: hidden;
  border: none;
  background: url(../images/cross.png) no-repeat center center;
  text-indent: 200%;
  color: transparent;
  outline: none;
  z-index: 2001;
}
.overlay-tips {
  p {
    color: $white !important;
    margin-bottom: 0.5em;
  }
  i {
    color: $white !important;
  }
}

.holding {
  margin-top: -11em;
  @include transition(all .25s ease-in-out);
  &.ng-hide {
    opacity: 0;
  }
}

/* Menu style */
.overlay nav, .overlay .container {
  //text-align: center;
  position: relative;
  top: 50%;
  height: 60%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.overlay ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: inline-block;
  height: 100%;
  position: relative;
}

.overlay ul li {
  display: block;
  height: 20%;
  height: calc(100% / 5);
  min-height: 54px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.overlay ul li a {
  font-size: 54px;
  font-weight: 300;
  display: block;
  color: #fff;
  -webkit-transition: color 0.2s;
  transition: color 0.2s;
}

.overlay ul li a:hover,
.overlay ul li a:focus {
  color: #f0f0f0;
}

/* Effects */
.overlay-scale {
  visibility: hidden;
  opacity: 0;
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
  -webkit-transition: -webkit-transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
  transition: transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
}

.overlay-scale.open {
  visibility: visible;
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
  transition: transform 0.4s, opacity 0.4s;
}
@media screen and (max-height: 30.5em) {
  .overlay nav {
    height: 70%;
    font-size: 34px;
  }
  .overlay ul li {
    min-height: 34px;
  }
}

p.experiment {
  padding-top: 2em;
}

.beaker {
  position: relative;
  margin: 0 auto;
  width: 42px;
  height: 100px;
}

.beaker img {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  opacity: 1 !important;
}

.beaker i {
  z-index: 2;
  position: absolute;
  height: 8px;
  width: 8px;
  border-radius: 16px;
  opacity: 0;
  animation: bubble-one linear 3s infinite;
}

.beaker i:nth-child(1) {
  animation-name: bubble-one;
}

.beaker i:nth-child(2) {
  animation-delay: .7s;
  animation-name: bubble-two;
}

.beaker i:nth-child(3) {
  animation-delay: 1.5s;
  animation-name: bubble-one;
}

.beaker i:nth-child(4) {
  animation-delay: 2.3s;
  animation-name: bubble-two;
}

@keyframes bubble-one {
  0%{bottom:1px; left:21px; transform:scale(.1); opacity:1; background:$white;}
  10%{bottom:5px; left:17px; transform:scale(.2); opacity:1; background:$white; }
  20%{bottom:10px; left:21px; transform:scale(.2); opacity:1; background:$white;}
  30%{bottom:15px; left:15px; transform:scale(.3);opacity:1; background:$white;}
  40%{bottom:19px; left:21px; transform:scale(.4); opacity:1; background:$white; }
  49%{bottom:19px; left:17px; transform:scale(.4); opacity:1; background:$white; }
  50%{bottom:19px; left:17px; transform:scale(.5); opacity:1; background:$salescrowd-green; }
  60%{bottom:55px; left:21x; transform:scale(.6); }
  70%{bottom:60px; left:16px; transform:scale(.7); }
  80%{bottom:65px; left:21px; transform:scale(.8);}
  90%{bottom:70px; left:17px; transform:scale(1); }
  99%{bottom:73px; left:21px; transform:scale(1); opacity:.5;}
  100%{bottom:73px; left:21px; transform:scale(5); opacity:0; background:$salescrowd-green;}
}

@keyframes bubble-two {
  0%{bottom:1px; left:13px; transform:scale(.1); opacity:1; background:$white;}
  10%{bottom:5px; left:18px; transform:scale(.2); opacity:1; background:$white; }
  20%{bottom:10px; left:13px; transform:scale(.2); opacity:1; background:$white;}
  30%{bottom:15px; left:18px; transform:scale(.3);opacity:1; background:$white;}
  40%{bottom:19px; left:13px; transform:scale(.4); opacity:1; background:$white; }
  49%{bottom:19px; left:18px; transform:scale(.4); opacity:1; background:$white;}
  50%{bottom:19px; left:18px; transform:scale(.5); opacity:1; background:$salescrowd-facebook;}
  60%{bottom:55px; left:13px; transform:scale(.6); }
  70%{bottom:60px; left:18px; transform:scale(.7); }
  80%{bottom:65px; left:13px; transform:scale(.8);}
  90%{bottom:70px; left:18px; transform:scale(1); }
  99%{bottom:73px; left:13px; transform:scale(1); opacity:.5; }
  100%{bottom:73px; left:13px; transform:scale(5); opacity:0; background:$salescrowd-facebook;}
}