/*Don't need to worry too much about this stuff, 
most was taken from the docs to make sure stuff stays responsive on mobile,
 as well as all the positions are laid out properly on the page*/

body {
  background-image: url(MEDIA/layers/sabinalayer1.png);
  font-family: monospace;
  font-size: 18px;
  margin: 0; }


img {
  display: fill;
  left:0px;
  right:0px;
  width: 180%; }

input[type=checkbox] {
  display: none; }

label {
  cursor: pointer;
  display: inline-block;
  margin-right: 0em;
  padding: 0em 0; }

input[type=checkbox] + label:before {
  background: #555;
  content: '';
  display: inline-block;
  height: 16px;
  margin-right: 0px;
  margin-left: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  position: relative;
  top: 0px;
  width: 16px; }

input[type=checkbox]:checked + label:before {
  background-image: url(MEDIA/layer/sabinalayer1.png) }

.container {
  margin: 0 auto;
  position: relative;
  opacity:100%; }

.container--offset {
  margin-left: 0; }

button {
  background: #555;
  border: 10px solid #00ffaa;
  cursor: pointer;
  display: block;
  font-family: monospace;
  font-size: 24px;
  height: 200px;
  line-height: 60px;
  margin: 0;
  outline: none;
  padding: 0 1.2em;
  text-align: right; }
  button:hover {
    background: #00ffaa; }
  button#deleteme {
    margin: 2rem; }

.scene {
  margin: 0;
  padding: 0;
  height:150%; }
  .scene button {
    left: 0px;
    top: 260px;
    width: 100%;
    position: absolute; }

.fill {
  bottom: 0px;
  left: 0px;
  position: absolute;
  right: 0px;
  top: 0px; }

.expand-width {
  width: 100%; }

.border {
  border: 2px dashed #00ffaa; }

.aspect {
  opacity: 0.2; }

}
.top
{
  position:fixed;
  bottom:-2px;
  left:-2px;
  right:0px;
  width:100%;

}


/**
CSS Animations, you're probably better than me at this stuff, but basically what actually is supposed to happen when you move around, how each layer is supposed to animate
**/
.scene > *:nth-child(1) {
  opacity: 100%; }
  .scene > *:nth-child(1) button {
    -webkit-transform: rotate(150deg);
        -ms-transform: rotate(150deg);
            transform: rotate(150deg); }

.scene > *:nth-child(2) {
  opacity: 100%; }
  .scene > *:nth-child(2) button {
    -webkit-transform: rotate(120deg);
        -ms-transform: rotate(120deg);
            transform: rotate(120deg); }

.scene > *:nth-child(3) {
  opacity: 100%; }
  .scene > *:nth-child(3) button {
    -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
            transform: rotate(90deg); }

.scene > *:nth-child(4) {
  opacity: 100%; }
  .scene > *:nth-child(4) button {
    -webkit-transform: rotate(60deg);
        -ms-transform: rotate(60deg);
            transform: rotate(60deg); }

.scene > *:nth-child(5) {
  opacity: 100%; }
  .scene > *:nth-child(5) button {
    -webkit-transform: rotate(30deg);
        -ms-transform: rotate(30deg);
            transform: rotate(30deg); }

.scene > *:nth-child(6) {
  opacity: 100%; }
  .scene > *:nth-child(6) button {
    -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
            transform: rotate(0deg); }


/**
Sab Styles
**/
.picture2 {
content:url(MEDIA/sabskywebsitelayer2.png);
position: absolute;
top: 5px;
width: 200%;
height:150%;
 /* ie8 */
}
.picture3 {
content:url(MEDIA/sabskywebsitelayer3.png);
position: absolute;
top: 5px;
width: 200%;
height:150%;



}