$offset: 187
$duration: 1.4s

@-webkit-keyframes slideInRight 
  from 
    left: 100%
    min-width: calc(100% - 340px)
  to
    left: 0%
    min-width: calc(100% - 340px)
@-webkit-keyframes slideOutRight
  from 
    left: 0%
    min-width: calc(100% - 340px)
  to
    left: 100%
    min-width: calc(100% - 340px)


@-webkit-keyframes rotator
  0%
    -webkit-transform: rotate(0deg)
    transform: rotate(0deg)
  100%
    -webkit-transform: rotate(270deg)
    transform: rotate(270deg)
@keyframes rotator
  0%
    -webkit-transform: rotate(0deg)
    transform: rotate(0deg)
  100%
    -webkit-transform: rotate(270deg)
    transform: rotate(270deg)


@-webkit-keyframes dash
  0%
    stroke-dashoffset: $offset
  50%
    stroke-dashoffset: $offset/4
    -webkit-transform: rotate(135deg)
    transform: rotate(135deg)
  100%
    stroke-dashoffset: $offset
    -webkit-transform: rotate(450deg)
    transform: rotate(450deg)
@keyframes dash
  0%
    stroke-dashoffset: $offset
  50%
    stroke-dashoffset: $offset/4
    -webkit-transform: rotate(135deg)
    transform: rotate(135deg)
  100%
    stroke-dashoffset: $offset
    -webkit-transform: rotate(450deg)
    transform: rotate(450deg)


@keyframes slideDown 
  from 
    opacity: 0
    max-height: 0
  to
    opacity: 1
    max-height: 600px

@-webkit-keyframes slideDown 
  from 
    opacity: 0
    max-height: 0
  to
    opacity: 1
    max-height: 600px

@keyframes slideUp 
  from 
    opacity: 1
    max-height: 600px
  to
    opacity: 0
    max-height: 0

@-webkit-keyframes slideUp 
  from 
    opacity: 1
    max-height: 600px
  to
    opacity: 0
    max-height: 0

@-webkit-keyframes fadeIn 
  from 
    opacity: 0
  to
    opacity: 1

@-moz-keyframes fadeIn 
  from 
    opacity: 0
  to
    opacity: 1

@keyframes fadeIn 
  from 
    opacity: 0
  to
    opacity: 1
