body.error {

  background: $l-darkbackground url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAKElEQVQIW2NkQAOZxU3GjMhiIIHpvXVn4YIwAZAisCCyAFgQXQAkCAAiqRGXMgseLwAAAABJRU5ErkJggg==) repeat;
  @include font-smoothing(antialiased);

  nav {
    background: none;
    position: static;

  }

  #container {
  	margin-top: 0;
  }

  footer {
    bottom: 0;
    @include left(0);
    position: fixed;
    @include right(0);

    @media all and (max-width: 768px) {
      position: static;
    }

  }

  .bg-frame {

  $default_size: 600px;

    #ring {

      .star-rotate {
        @include animation(spin-right 300s linear infinite);
        @include left(50%);
	    top: 50%;
      }

      #observatory {
      	@include transform(rotate(180deg));
        @include left(8%);
        position: absolute;
        top: -5%;
        width: 100%;
      }

	  h1 {
	  	display: block;
        font-family: $source-sans;
        font-size: $default_size/25;
        font-weight: 300;
        line-height: 1.4;
        position: absolute;
        @include text-align(center);
        top: 10%;
        @include left(25%);
        width: 50%;
	  }
    }

  }
}


@include keyframes(spin-right) {
  100% {
    @include transform(rotate(360deg));
  }
}
