#flash-messages
  position: fixed
  top: 0
  right: 0
  z-index: 1000

  -webkit-animation-duration: 1s
  animation-duration: 1s
  -webkit-animation-name: fadeInDown
  animation-name: fadeInDown

  ul
    list-style: none
    margin: 0
    padding: 0

    li.flash-message
      display: inline-block
      min-width: 200px
      margin: grid-row(.5)
      padding: grid-row(.5) grid-row(1)
      line-height: grid-row(1)
      background-color: rgba(#c2c5c6, .9)
      border: 1px solid #c2c5c6
      border-radius: 4px
      color: $white
      font-weight: bold
      box-shadow: 0px 0px 5px 2px rgba(0,0,0,.1)
      &.success
        background-color: rgba(#59db81, .9)
        border: 1px solid #8ce196

@-webkit-keyframes fadeInDown
  0%
    opacity: 0
    -webkit-transform: translate3d(0, -100%, 0)
    transform: translate3d(0, -100%, 0)
  100%
    opacity: 1
    -webkit-transform: none
    transform: none

@keyframes fadeInDown
  0%
    opacity: 0
    -webkit-transform: translate3d(0, -100%, 0)
    -ms-transform: translate3d(0, -100%, 0)
    transform: translate3d(0, -100%, 0)
  100%
    opacity: 1
    -webkit-transform: none
    -ms-transform: none
    transform: none