sass 3.1.21 bug demo

landscape.sass

/* from https://developer.mozilla.org/media/uploads/demos/m/i/minase8888/2550eea731b01e0eb8f4997b1af4ef05/orientation-indicato_1327269188_demo_package/instructions.txt
/* LANDSCAPE CSS

#orientation-message
  /* this is to hide the message from browsers that don't recognise orientation
  display: none

@media screen and (orientation:portrait)
  #orientation-message
    /* this is the black base of the message itself, containing all other elements of the message
    width: 100%
    height: 115px
    background-color: black
    position: fixed
    top: 40%
    display: block
    opacity: 0
    animation: portrait 4s linear 2s  alternate
    /* Firefox:
    -moz-animation: portrait 4s linear 0s  alternate
    /* Safari and Chrome:
    -webkit-animation: portrait 4s linear 0s  alternate
  #orientation-elements
    /* includes the device and the text message
    position: relative
    margin: auto
    width: 80px
    height: 70px
    background-color: none
    margin-top: 10px
    width: 400px
  #device
    /* this is a css3-drawn mobile device
    width: 40px
    height: 60px
    position: relative
    margin: auto
    margin-bottom: 10px
    background-color: transparent
    border-left: 3px solid white
    border-right: 3px solid white
    border-bottom: 3px solid white
    border-top: 3px solid white
    border-radius: 5px
    -moz-border-radius: 5px
    -webkit-border-radius: 5px
    animation: device 4s 1 ease-in-out 2s
    /* Firefox:
    -moz-animation: device 4s 1 ease-in-out 0s
    /* Safari and Chrome:
    -webkit-animation: device 4s 1 ease-in-out 0s
  #orientation-text
    text-align: center
    color: white
    font-size: 120%
    margin: 0
    padding: 0
    font-family: "Arial"
    p
      margin: 0
      padding: 0
  #orientation-message
    opacity: 0
    animation: portrait 4s linear 0s  alternate
    /* Firefox:
    -moz-animation: portrait 4s linear 0s  alternate
    /* Safari and Chrome:
    -webkit-animation: portrait 4s linear 0s  alternate
  @keyframes portrait
    0%
      opacity: 0
    40%, 60%
      opacity: 1.0
    100%
      opacity: 0

  @-moz-keyframes portrait
    0%
      opacity: 0
    40%, 60%
      opacity: 1.0
    100%
      opacity: 0

  @-webkit-keyframes portrait
    0%
      opacity: 0
    40%, 60%
      opacity: 1.0
    100%
      opacity: 0

/* this is the animation that controls the mobile-looking square

@-webkit-keyframes device
  from
    -webkit-transform: rotate(0deg)
  to
    -webkit-transform: rotate(90deg)


@-moz-keyframes device
  0%
    -moz-transform: rotate(0deg)
  100%
    -moz-transform: rotate(90deg)


@media screen and (orientation:landscape)
  #orientation-message
    /* this is to hide the message when orientation is correct
    display: none

/* END OF LANDSCAPE CSS