html, body
  padding: 0
  margin: 0

img
  border: none
  display: block

h1, h2, h3, h4, h5
  +font-ruf()
  margin: 0
  font-weight: 700

p, span, em, a, div, ul, li
  +font-default()
  text-decoration: none

ul
  padding: 0

img
  border: none

a
  color: #fff

.clear
  clear: both

.center-container
  display: inline-block

.wrapper-overflow
  width: 100%
  overflow: hidden

.gold
  color: $gold

//cta buttons
.button
  padding: 10px 15px
  display: inline-block
  margin: 20px 0 20px 0
  text-transform: uppercase
  font-weight: 600

  &.black
    background-color: $darkGrey
    color: #fff

  &.white
    background-color: #fff
    color: $monthTitle
    a
      color: $darkGrey

  &.gold
    background-color: $gold
    color: $darkGrey

.crown
  +sprite(-5px -155px, 60px, 50px)
  margin: 0 auto

.left
  float: left
  width: 500px

.bottle-middle
  position: relative
  margin: 70px auto 0
  height: 30px
  width: 155px
  background: url(../../images/structure/sprite.png) -10px -10px

.bottom-shadow
  position: relative
  z-index: 10
  height: 30px
  background-image: url("../../images/structure/bottom-shadow.png")

  //header css

div
  header
    text-align: center
    background-image: url(../../images/static/howitworks/graan.png)
    background-color: $darkGrey
    background-size: cover
    background-position: center
    padding-top: 100px
    h2
      +font-ruf(40px)
      color: $gold


  //sprite line in header
.line
  +sprite(-70px -190px, 100px, 5px)
  margin: 0 auto
  width: 100px
  margin-top: 20px

.center-white
  text-align: center

  p
    +font-ruf(37px)
    margin-top: 20

  img
    display: block
    width: 100%
    margin: 0 auto


//top page explanation

.explanation
  text-align: center
  background-color: $darkGrey

  .text-wrapper
    padding: 80px 0 10px
    width: 750px
    p
      padding-top: 20px

  h2
    +font-ruf(20px)
    color: $gold

  p
    text-align: left
    color: #fff
    margin: 0 auto

//white bar between page sections
.whitebar
  width: 100%

//social media buttons
#social-block
  position: fixed
  right: 0
  top: 100px
  width: 60px
  height: 150px
  background-color: $darkGrey
  z-index: 50
  padding-top: 5px
  border: solid 3px $gold

  .social
    float: left
    margin: 7px 13px
    &.facebook
      +sprite(0 -370px, 34px, 34px)
      &:hover
        +sprite(-110px -370px, 34px, 34px)
    &.twitter
      +sprite(-72px -370px, 34px, 34px)
      &:hover
        +sprite(-182px -370px, 34px, 34px)

    &.insta
      +sprite(-35px -370px, 34px, 34px)
      &:hover
        +sprite(-145px -370px, 34px, 34px)

.responsive
  display: initial


+media-query(1019px)
  .responsive
    display: inline-block

+media-query(500px)
  .left
    width: 350px

  #social-block
    display: none

+media-query(350px)
  .left
    width: 300px