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: 18px

body
  font-family: 'Open Sans', sans-serif
  line-height: 1.6
  +respond-to-width(840)
    padding-top: 60px

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

img
  border: none
  display: block

h1, h2, h3, h4, h5
  font-family: roboto()

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
   ===============================*/
.color-wrapper
  background: $agrimacGreen

.content
  color: $agrimacBlue
  font-size: 0.9rem


  h1, h2
    font-size: 2rem
    line-height: 1.2

  p
    margin: 1rem 0

    >strong
      font-weight: semi-bold()
      color: $agrimacDarkBlue

  ul, ol
    padding-left: 20px

    li
      position: relative
      padding-left: 20px
      font-weight: semi-bold()

  ul
    margin: 1rem 0

    li
      margin-bottom: 5px
      padding-left: 10px
      color: $agrimacBlue

      &:last-of-type
        margin-bottom: 0

  ol
    // Custom List styling for '1.'
    counter-reset: ol-counter
    list-style: none
    li
      &:before
        position: absolute
        counter-increment: ol-counter
        content: counter(ol-counter)'.'
        font-size: 1rem
        line-height: 1
        top: 2px
        left: -20px

/* Default button styling */
.button
  position: relative
  display: inline-block
  padding: 15px 25px
  border-radius: 25px
  background: $agrimacBlue
  cursor: pointer
  font-size: 0.7rem
  line-height: 1.2
  font-weight: bold()
  text-decoration: none
  text-transform: uppercase
  color: white

  &:after
    content: ''
    position: absolute
    display: block
    left: 0
    top: 0
    width: 100%
    height: 100%
    border-radius: 25px
    box-shadow: 4px 4px 10px 0 rgba(0,0,0,1)
    opacity: 0.1
    transform: translate3d(0,0,0)
    transition: transform 0.3s, opacity 0.3s

  .arrow
    position: relative
    top: 2px
    display: inline-block
    width: 9px
    margin-left: 45px
    transform: translate3d(0,0,0)
    transition: transform 0.3s

    svg
      width: 100%
      transform: rotate(-90deg)
      max-height: 15px
      &.arrow-icon
        .st0
          fill: white

  &:hover
    &:after
      opacity: 0

    .arrow
      transform: translate3d(5px,0,0)

// Return to overview
.return-to-overview
  background-color: $agrimacBlue
  padding: 15px column(1, 12)
  text-decoration: none
  display: none

  +respond-to-width(840)
    +flex(flex-start, center)

  .arrow
    position: relative
    left: 4px
    bottom: -4px
    display: block
    width: 12px
    margin-right: 25px
    transform: translate3d(0,0,0)
    transition: transform 0.3s

    svg
      max-height: 15px

    .arrow-icon
      width: 100%
      transform: rotate(90deg)
      transform-origin: center
      .st0
        fill: white

  p
    font-size: 0.8rem
    color: white
    margin: 0
    font-weight: semi-bold()

  &:hover
    .arrow
      transform: translate3d(-5px,0,0)