@import "bootstrap"

$activegreen: #00f0ac
$black: #000
$lightblue: #eff9fc

.hp-offwhite
  background: $lightblue

header.banner
  max-width: 750px
  margin: 0 auto
  padding: 1rem 0

  h1, h2, h3, h4, h5
    display: inline-block
    line-height: 53px

.hp-feature-icons
  width: 80px
  height: 80px
  @extend .mb-3
.hp-step-globes
  width: 120px
  @extend .mb-4

.hp-how-shake-works
  background-color: #fff9e8

.hp-cta-btn
  display: block
  font-size: 1.3rem
  color: #000000
  border-radius: 4px
  padding: 1.2rem 2rem
  margin: 2rem 0
  background: $activegreen image-url(icons/arrow) 0 0 no-repeat
  background-position: calc(100% - 20px) calc(100% - -1px)
  &:hover
    background-color: darken($activegreen, 5%)
    text-decoration: none
    color: $black
  &:active
    background-color: darken($activegreen, 9%)

.hp-cta-btn-blue-sm
  display: block
  font-size: 0.9rem
  color: #fff
  border-radius: 4px
  padding: 0.9rem 2rem
  background: #007bff image-url(icons/arrow-white) 0 0 no-repeat
  background-position: calc(100% - 20px) calc(100% - -1px)
  &:hover
    background-color: darken(#007bff, 5%)
    text-decoration: none
    color: #fff
  &:active
    background-color: darken(#007bff, 9%)

.hp-count-wants
  background-color: #f3fafc

.hp-sm-arrow
  background: transparent image-url(icons/arrow) 0 0 no-repeat
  background-position: center 15%

.img-iterate
  .pc
    position: absolute
    left: 10px
    top: 10px
    text-transform: uppercase
    background-color: #eff9fc
    padding: 0 10px
    border-radius: 2px
    margin: 0
    span
      font-size: 0.6rem
  .linedbox
    box-shadow: 0px 0 2px #e0e9eb
    margin: 10px 0
    border-radius: 2px
    position: relative
  img
    width: 50%