/** GENERAL *
$background: #444
$text: #EEE
$mainColor: #E47E30
$sndColor: #CCC

// @import url(http://fonts.googleapis.com/css?family=Vollkorn:400italic,700italic,400,700)

body
  font-family: 'Futura', sans-serif
  font-size: 4em
  line-height: 4em
  min-height: 740px
  background-color: $background
  background-image: url('back.png')
  margin: 0
  border: 0
  padding: 0
  color: $text
  box-shadow: 0 0 50px #000 inset
  -webkit-font-smoothing: antialiased

/** STEP STYLES *

a
  color: $sndColor
  &:hover
    color: $mainColor

b
  color: $sndColor

h1
  margin-top: 0

.hi
  color: $mainColor
.hi2
  color: $sndColor

ul
  li
    height: 1.5em

.step
  width: 1960px
  height: 1080px
  font-size: 1.2em
  line-height: 2em
  min-height: 500px
  display: block
  padding: 40px 60px
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.1)
  letter-spacing: -1px
  -webkit-box-sizing: border-box
  -moz-box-sizing: border-box
  -ms-box-sizing: border-box
  -o-box-sizing: border-box
  box-sizing: border-box
  -webkit-transition: opacity 1s
  -moz-transition: opacity 1s
  -ms-transition: opacity 1s
  -o-transition: opacity 1s
  transition: opacity 1s
  &:not(.active)
    opacity: 1

/* fade out inactive slides

/* hint on the first slide

.hint
  position: fixed
  left: 0
  right: 0
  bottom: 0px
  background: #333
  color: #fff
  text-align: right
  padding: 10px
  z-index: 100
  opacity: 0
  -webkit-transform: translateY(400px)
  -moz-transform: translateY(400px)
  -ms-transform: translateY(400px)
  -o-transform: translateY(400px)
  transform: translateY(400px)
  -webkit-transition: opacity 1s, -webkit-transform 0.5s 1s
  -moz-transition: opacity 1s,    -moz-transform 0.5s 1s
  -ms-transition: opacity 1s,     -ms-transform 0.5s 1s
  -o-transition: opacity 1s,      -o-transform 0.5s 1s
  transition: opacity 1s,         transform 0.5s 1s

.step-home + .hint
  opacity: 1
  -webkit-transition: opacity 1s 5s, -webkit-transform 0.5s
  -moz-transition: opacity 1s 5s,    -moz-transform 0.5s
  -ms-transition: opacity 1s 5s,     -ms-transform 0.5s
  -o-transition: opacity 1s 5s,      -o-transform 0.5s
  transition: opacity 1s 5s,         transform 0.5s
  -webkit-transform: translateY(0px)
  -moz-transform: translateY(0px)
  -ms-transform: translateY(0px)
  -o-transform: translateY(0px)
  transform: translateY(0px)

/** NOT SUPPORTED STYLES *

.not-supported .step
  position: relative
  opacity: 1
  margin: 20px auto

/** PRINT STYLE *
@media print
  body
    background: white
  .hint
    display: none
  #simple
    width: auto
    margin: 0 5%
    padding: 0
    border: 0
    float: none !important
    color: black
    background: transparent
  .step
    page-break-after: always
    opacity: 1
    clear: both
    display: block
    float: none !important
    position: relative
    margin: 20px auto
    -webkit-transition: rotate(0deg)
    -moz-transition: rotate(0deg)
    -ms-transition: rotate(0deg)
    -o-transition: rotate(0deg)
    transition: rotate(0deg)
    &:not(.active)
      opacity: 1

/* ---- */
#title
  text-align: center
  h1
    font-size: 3em
    font-weight: bold
  h2
    font-size: 1em
    color: $mainColor
  author
    color: $sndColor
    font-style: italic

.background
  color: #FFF
  font-family: Impact, sans-serif
  font-size: 1.5em
  width: 100%
  height: 100%
  padding: 1em
  background: no-repeat
  background-size: 100% auto

.right
  float: right

.darktext
  color: #000
  p
    background: rgba(255,255,255,0.8)

.cleartext
  color: #FFF
  p
    background: rgba(0,0,0,0.8)