html, body
  padding: 0
  margin: 0

  //Use this to smooth some font styles
  -webkit-font-smoothing: antialiased
  -moz-osx-font-smoothing: grayscale
  text-rendering: optimizeLegibility

/*
  * Set up the base font size for using rem
  */
html
  font-size: $baseFontSize

  +respond-to-width(1080)
    font-size: 17px

body
  +metropolis
  line-height: 1.6
  letter-spacing: 0.4px

*
  box-sizing: border-box
  ::selection
    background: $lightBlue
    color: white

img
  border: none
  display: block

h1, h2, h3, h4, h5, figure
  margin: 0

img
  border: none

input, textarea
  +placeholder
    opacity: 1
    +translate3d(0, 0, 0)
    transition: all 0.3s




/* Default content styling
   ===============================*/
.content
  color: $blue
  font-size: 0.9rem


  h1, h2, h3
    font-size: 2rem
    line-height: 1.2
    color: $brown
    margin: 0 0 20px
    +phenomena

  p
    margin: 1rem 0

  ul, ol
    padding-left: 20px
    list-style: none

    li
      position: relative
      padding-left: 20px
      //font-size: 0.8rem
      &:before
        //content: '•'
        position: absolute
        color: $darkBlue
        font-size: 1.2rem
        line-height: 1
        left: -20px

  ol
    // Custom List styling for '1.'
    counter-reset: ol-counter
    li
      &:before
        counter-increment: ol-counter
        content: counter(ol-counter)'.'
        font-size: 1rem
        top: 2px

  strong
    color: $blue

  a
    color: $blue
    text-decoration: none
    transition: color 0.3s
    &:hover
      color: $darkBlue

.button
  display: inline-block
  padding: 14px 15px
  background-color: transparent
  border: 1px solid rgba($blue, 0.5)
  border-radius: 5px
  +metropolisSemiBold
  font-size: 0.75rem
  line-height: 1.2
  color: $blue
  text-decoration: none
  text-transform: uppercase
  cursor: pointer

  &:after
    content: ''
    margin-left: 45px
    +translate3d(0,0,0)
    transition: transform 0.3s
    +arrowBlue

  &.white
    &:after
      +arrowWhite

  &.down
    &:after
      +arrowBlueDown

    &.white
      &:after
        +arrowWhiteDown



  &:hover
    &:after
      +translate3d(3px,0,0)

    &.down
      &:after
        +translate3d(0,3px,0)

.arrow-button
  position: relative
  +flex(center, center)
  width: 31px
  height: 31px
  border: 1px solid rgba($brown, 0.8)
  border-radius: 100%
  transition: border 0.4s

  &.centered
    margin-left: auto
    margin-right: auto 

  &:before
    content: ''
    position: absolute
    left: 0
    top: 0
    width: 100%
    height: 100%
    background-color: $brown
    border-radius: 100%
    opacity: 0
    transform: scale3d(0,0,1)
    transition: opacity 0.4s, transform 0.4s

  &:after
    position: relative
    z-index: 2
    content: ''
    +arrowBlue

  &.down
    &:after
      top: 1px
      +arrowBlueDown

  &:hover
    border-color: rgba($brown, 0)
    transition-delay: 0.2s

    &:before
      opacity: 1
      transform: scale3d(1,1,1)

    &:after
      +arrowWhite

    &.down
      &:after
        +arrowWhiteDown