/*  **  stage.css for sulo bin - ZAPPO November 2015 **  */

body {
	background-color:#000;
	overflow:hidden;
}

.backdrop {
	position:absolute;
	top:0;
	left:0;
	width:100vw;
	height:70vh;
	box-shadow: inset 0 -100px 100px -50px #222;
	z-index:-1;
}

.floor {
	position:absolute;
	top:71vh;
	left:0;
	width:100vw;
	height:30vh;
	z-index:-1;
}



/*  **  big-screen  **  */

.big-screen{
	position:relative;
	top:10vh;
	width:450px;
	margin:auto;
	height:450px;
	border-radius:50%;
	opacity:.3;
	z-index:-1;
}

.slider {
	position:absolute;
	top:0;
	left:0;
	width:450px;
	border-radius:50%;
	opacity:0;
	z-index:-2;
}

.big-screen-end{
	position:absolute;
	top:10vh;
	left:50%;
	width:450px;
	margin-left:-225px;
	height:450px;
	
	opacity:.3;
	z-index:-1;
	
}

.endSlider {
	position:absolute;
	top:0;
	left:0;
	width:450px;
	
	z-index:-2;
	animation: END-DISPLAY-1 2s ease 0s 1 forwards, END-DISPLAY-2 2s ease 244s 1 forwards;
}

/* END-DISPLAY-1 */

@keyframes END-DISPLAY-1 { 
0%   	{opacity:1; z-index:1;}
50%   	{opacity:1; z-index:1;}	
100% 	{opacity:0; z-index:-3;}
}

@keyframes END-DISPLAY-2 { 
0%   	{opacity:0; z-index:-3;}
100%   	{opacity:.5; z-index:1;}	
}


#one {
	  -webkit-animation: DISPLAY1 123s ease 0s 2 forwards;
		 -moz-animation: DISPLAY1 123s ease 0s 2 forwards;
		   -o-animation: DISPLAY1 123s ease 0s 2 forwards;
			  animation: DISPLAY1 123s ease 0s 2 forwards;
}

#two {
	  -webkit-animation: DISPLAY2 123s ease 0s 2 forwards;
		 -moz-animation: DISPLAY2 123s ease 0s 2 forwards;
		   -o-animation: DISPLAY2 123s ease 0s 2 forwards;
			  animation: DISPLAY2 123s ease 0s 2 forwards;
}

#three {
	  -webkit-animation: DISPLAY3 123s ease 0s 2 forwards;
		 -moz-animation: DISPLAY3 123s ease 0s 2 forwards;
		   -o-animation: DISPLAY3 123s ease 0s 2 forwards;
			  animation: DISPLAY3 123s ease 0s 2 forwards;
}

#four {
	  -webkit-animation: DISPLAY4 123s ease 0s 2 forwards;
		 -moz-animation: DISPLAY4 123s ease 0s 2 forwards;
		   -o-animation: DISPLAY4 123s ease 0s 2 forwards;
			  animation: DISPLAY4 123s ease 0s 2 forwards;
}

#five {
	  -webkit-animation: DISPLAY5 123s ease 0s 2 forwards;
		 -moz-animation: DISPLAY5 123s ease 0s 2 forwards;
		   -o-animation: DISPLAY5 123s ease 0s 2 forwards;
			  animation: DISPLAY5 123s ease 0s 2 forwards;
}


#six {
	  -webkit-animation: DISPLAY6 123s ease 0s 2 forwards;
		 -moz-animation: DISPLAY6 123s ease 0s 2 forwards;
		   -o-animation: DISPLAY6 123s ease 0s 2 forwards;
			  animation: DISPLAY6 123s ease 0s 2 forwards;
}


#seven {
	  -webkit-animation: DISPLAY7 123s ease 0s 2 forwards;
		 -moz-animation: DISPLAY7 123s ease 0s 2 forwards;
		   -o-animation: DISPLAY7 123s ease 0s 2 forwards;
			  animation: DISPLAY7 123s ease 0s 2 forwards;
}

#eight {
	  -webkit-animation: DISPLAY8 123s ease 0s 2 forwards;
		 -moz-animation: DISPLAY8 123s ease 0s 2 forwards;
		   -o-animation: DISPLAY8 123s ease 0s 2 forwards;
			  animation: DISPLAY8 123s ease 0s 2 forwards;
}

#nine {
	  -webkit-animation: DISPLAY9 123s ease 0s 2 forwards;
		 -moz-animation: DISPLAY9 123s ease 0s 2 forwards;
		   -o-animation: DISPLAY9 123s ease 0s 2 forwards;
			  animation: DISPLAY9 123s ease 0s 2 forwards;
}

#ten{
	  -webkit-animation: DISPLAY10 123s ease 0s 2 forwards;
		 -moz-animation: DISPLAY10 123s ease 0s 2 forwards;
		   -o-animation: DISPLAY10 123s ease 0s 2 forwards;
			  animation: DISPLAY10 123s ease 0s 2 forwards;
}



.linkHolder {
	position:absolute;
	top:90vh;
	left:90vw;
	z-index:100;
	color:#fff;
	font-weight:bold;
	font-size:20px;
	animation: showLink 1s ease 246s 1 forwards; 
	opacity:0;
}

/*  **  reveal back to menu link  **  */

@keyframes showLink {
0%   	{opacity:0; z-index:-100;}
100% 	{opacity:1; z-index:100;}
}


.linkHolder a {
	color:#fff;
	font-weight:bold;
	font-size:20px;
}





/*  **  keyframes  **  */

/* DISPLAY1 */
@-webkit-keyframes DISPLAY1 { 
0%   	{opacity:0; z-index:-2;}
2%		{opacity:1; z-index:-1;}
10%		{opacity:1; z-index:-1;}
12% 		{opacity:0; z-index:-2;}
100% 	{opacity:0; z-index:-2;}
}
   @-moz-keyframes DISPLAY1 { 
0%   	{opacity:0; z-index:-2;}
2%		{opacity:1; z-index:-1;}
10%		{opacity:1; z-index:-1;}
12% 		{opacity:0; z-index:-2;}
100% 	{opacity:0; z-index:-2;}
}
     @-o-keyframes DISPLAY1 { 
0%   	{opacity:0; z-index:-2;}
2%		{opacity:1; z-index:-1;}
10%		{opacity:1; z-index:-1;}
12% 		{opacity:0; z-index:-2;}
100% 	{opacity:0; z-index:-2;}
}
        @keyframes DISPLAY1 {
0%   	{opacity:0; z-index:-2;}
2%		{opacity:1; z-index:-1;}
10%		{opacity:1; z-index:-1;}
12% 		{opacity:0; z-index:-2;}
100% 	{opacity:0; z-index:-2;}
}		

/* DISPLAY2 */
@-webkit-keyframes DISPLAY2 { 
0%   	{opacity:0; z-index:-2;}
11%   	{opacity:0; z-index:-2;}
12%		{opacity:1; z-index:-1;}
20%		{opacity:1; z-index:-1;}
22% 		{opacity:0; z-index:-2;}
100% 	{opacity:0; z-index:-2;}
}
   @-moz-keyframes DISPLAY2 { 
0%   	{opacity:0; z-index:-2;}
11%   	{opacity:0; z-index:-2;}
12%		{opacity:1; z-index:-1;}
20%		{opacity:1; z-index:-1;}
22% 		{opacity:0; z-index:-2;}
100% 	{opacity:0; z-index:-2;}
}
     @-o-keyframes DISPLAY2 { 
0%   	{opacity:0; z-index:-2;}
11%   	{opacity:0; z-index:-2;}
12%		{opacity:1; z-index:-1;}
20%		{opacity:1; z-index:-1;}
22% 		{opacity:0; z-index:-2;}
100% 	{opacity:0; z-index:-2;}
}
        @keyframes DISPLAY2 {
0%   	{opacity:0; z-index:-2;}
11%   	{opacity:0; z-index:-2;}
12%		{opacity:1; z-index:-1;}
20%		{opacity:1; z-index:-1;}
22% 		{opacity:0; z-index:-2;}
100% 	{opacity:0; z-index:-2;}
}		

/* DISPLAY3 */
@-webkit-keyframes DISPLAY3 { 
0%   	{opacity:0; z-index:-2;}
21%   	{opacity:0; z-index:-2;}
22%		{opacity:1; z-index:-1;}
30%		{opacity:1; z-index:-1;}
32% 		{opacity:0; z-index:-2;}
100% 	{opacity:0; z-index:-2;}
}
   @-moz-keyframes DISPLAY3 { 
0%   	{opacity:0; z-index:-2;}
21%   	{opacity:0; z-index:-2;}
22%		{opacity:1; z-index:-1;}
30%		{opacity:1; z-index:-1;}
32% 		{opacity:0; z-index:-2;}
100% 	{opacity:0; z-index:-2;}
}
     @-o-keyframes DISPLAY3 { 
0%   	{opacity:0; z-index:-2;}
21%   	{opacity:0; z-index:-2;}
22%		{opacity:1; z-index:-1;}
30%		{opacity:1; z-index:-1;}
32% 		{opacity:0; z-index:-2;}
100% 	{opacity:0; z-index:-2;}
}
        @keyframes DISPLAY3 {
0%   	{opacity:0; z-index:-2;}
21%   	{opacity:0; z-index:-2;}
22%		{opacity:1; z-index:-1;}
30%		{opacity:1; z-index:-1;}
32% 		{opacity:0; z-index:-2;}
100% 	{opacity:0; z-index:-2;}
}


/* DISPLAY4 */
@-webkit-keyframes DISPLAY4 { 
0%   	{opacity:0; z-index:-2;}
31%   	{opacity:0; z-index:-2;}
32%		{opacity:1; z-index:-1;}
40%		{opacity:1; z-index:-1;}
42% 		{opacity:0; z-index:-2;}
100% 	{opacity:0; z-index:-2;}
}
   @-moz-keyframes DISPLAY4 { 
0%   	{opacity:0; z-index:-2;}
31%   	{opacity:0; z-index:-2;}
32%		{opacity:1; z-index:-1;}
40%		{opacity:1; z-index:-1;}
42% 		{opacity:0; z-index:-2;}
100% 	{opacity:0; z-index:-2;}
}
     @-o-keyframes DISPLAY4 { 
0%   	{opacity:0; z-index:-2;}
31%   	{opacity:0; z-index:-2;}
32%		{opacity:1; z-index:-1;}
40%		{opacity:1; z-index:-1;}
42% 		{opacity:0; z-index:-2;}
100% 	{opacity:0; z-index:-2;}
}
        @keyframes DISPLAY4 {
0%   	{opacity:0; z-index:-2;}
31%   	{opacity:0; z-index:-2;}
32%		{opacity:1; z-index:-1;}
40%		{opacity:1; z-index:-1;}
42% 		{opacity:0; z-index:-2;}
100% 	{opacity:0; z-index:-2;}
}

/* DISPLAY5 */
@-webkit-keyframes DISPLAY5 { 
0%   	{opacity:0; z-index:-2;}
41%   	{opacity:0; z-index:-2;}
42%		{opacity:1; z-index:-1;}
45%		{opacity:1; z-index:-1;}
46% 		{opacity:0; z-index:-2;}
100% 	{opacity:0; z-index:-2;}
}
   @-moz-keyframes DISPLAY5 { 
0%   	{opacity:0; z-index:-2;}
41%   	{opacity:0; z-index:-2;}
42%		{opacity:1; z-index:-1;}
45%		{opacity:1; z-index:-1;}
46% 		{opacity:0; z-index:-2;}
100% 	{opacity:0; z-index:-2;}
100% 	{opacity:0; z-index:-2;}
}
     @-o-keyframes DISPLAY5 { 
0%   	{opacity:0; z-index:-2;}
41%   	{opacity:0; z-index:-2;}
42%		{opacity:1; z-index:-1;}
45%		{opacity:1; z-index:-1;}
46% 		{opacity:0; z-index:-2;}
100% 	{opacity:0; z-index:-2;}
}
        @keyframes DISPLAY5 {
0%   	{opacity:0; z-index:-2;}
41%   	{opacity:0; z-index:-2;}
42%		{opacity:1; z-index:-1;}
45%		{opacity:1; z-index:-1;}
46% 		{opacity:0; z-index:-2;}
100% 	{opacity:0; z-index:-2;}
}

/* DISPLAY6 */
@-webkit-keyframes DISPLAY6 { 
0%   	{opacity:0; z-index:-2;}
45%   	{opacity:0; z-index:-2;}
46%		{opacity:1; z-index:-1;}
54%		{opacity:1; z-index:-1;}
56% 		{opacity:0; z-index:-2;}
100% 	{opacity:0; z-index:-2;}
}
   @-moz-keyframes DISPLAY6 { 
0%   	{opacity:0; z-index:-2;}
45%   	{opacity:0; z-index:-2;}
46%		{opacity:1; z-index:-1;}
54%		{opacity:1; z-index:-1;}
56% 		{opacity:0; z-index:-2;}
100% 	{opacity:0; z-index:-2;}
}
     @-o-keyframes DISPLAY6 { 
0%   	{opacity:0; z-index:-2;}
45%   	{opacity:0; z-index:-2;}
46%		{opacity:1; z-index:-1;}
54%		{opacity:1; z-index:-1;}
56% 		{opacity:0; z-index:-2;}
100% 	{opacity:0; z-index:-2;}
}
        @keyframes DISPLAY6 {
0%   	{opacity:0; z-index:-2;}
45%   	{opacity:0; z-index:-2;}
46%		{opacity:1; z-index:-1;}
54%		{opacity:1; z-index:-1;}
56% 		{opacity:0; z-index:-2;}
100% 	{opacity:0; z-index:-2;}
}

/* DISPLAY7 */
@-webkit-keyframes DISPLAY7 { 
0%   	{opacity:0; z-index:-2;}
54%   	{opacity:0; z-index:-2;}
56%		{opacity:1; z-index:-1;}
64%		{opacity:1; z-index:-1;}
66% 		{opacity:0; z-index:-2;}
100% 	{opacity:0; z-index:-2;}
}
   @-moz-keyframes DISPLAY7 { 
0%   	{opacity:0; z-index:-2;}
54%   	{opacity:0; z-index:-2;}
56%		{opacity:1; z-index:-1;}
64%		{opacity:1; z-index:-1;}
66% 		{opacity:0; z-index:-2;}
100% 	{opacity:0; z-index:-2;}
}
     @-o-keyframes DISPLAY7 { 
0%   	{opacity:0; z-index:-2;}
54%   	{opacity:0; z-index:-2;}
56%		{opacity:1; z-index:-1;}
64%		{opacity:1; z-index:-1;}
66% 		{opacity:0; z-index:-2;}
100% 	{opacity:0; z-index:-2;}
}
        @keyframes DISPLAY7 {
0%   	{opacity:0; z-index:-2;}
54%   	{opacity:0; z-index:-2;}
56%		{opacity:1; z-index:-1;}
64%		{opacity:1; z-index:-1;}
66% 		{opacity:0; z-index:-2;}
100% 	{opacity:0; z-index:-2;}
}

/* DISPLAY8 */
@-webkit-keyframes DISPLAY8 { 
0%   	{opacity:0; z-index:-2;}
64%   	{opacity:0; z-index:-2;}
66%		{opacity:1; z-index:-1;}
76%		{opacity:1; z-index:-1;}
78% 		{opacity:0; z-index:-2;}
100% 	{opacity:0; z-index:-2;}
}
   @-moz-keyframes DISPLAY8 { 
0%   	{opacity:0; z-index:-2;}
64%   	{opacity:0; z-index:-2;}
66%		{opacity:1; z-index:-1;}
76%		{opacity:1; z-index:-1;}
78% 		{opacity:0; z-index:-2;}
100% 	{opacity:0; z-index:-2;}
}
     @-o-keyframes DISPLAY8 { 
0%   	{opacity:0; z-index:-2;}
64%   	{opacity:0; z-index:-2;}
66%		{opacity:1; z-index:-1;}
76%		{opacity:1; z-index:-1;}
78% 		{opacity:0; z-index:-2;}
100% 	{opacity:0; z-index:-2;}
}
        @keyframes DISPLAY8 {
0%   	{opacity:0; z-index:-2;}
64%   	{opacity:0; z-index:-2;}
66%		{opacity:1; z-index:-1;}
76%		{opacity:1; z-index:-1;}
78% 		{opacity:0; z-index:-2;}
100% 	{opacity:0; z-index:-2;}
}

/* DISPLAY9 */
@-webkit-keyframes DISPLAY9 { 
0%   	{opacity:0; z-index:-2;}
76%   	{opacity:0; z-index:-2;}
78%		{opacity:1; z-index:-1;}
88%		{opacity:1; z-index:-1;}
90% 		{opacity:0; z-index:-2;}
100% 	{opacity:0; z-index:-2;}
}
   @-moz-keyframes DISPLAY9 { 
@-webkit-keyframes DISPLAY9 { 
0%   	{opacity:0; z-index:-2;}
76%   	{opacity:0; z-index:-2;}
78%		{opacity:1; z-index:-1;}
88%		{opacity:1; z-index:-1;}
90% 		{opacity:0; z-index:-2;}
100% 	{opacity:0; z-index:-2;}
}
     @-o-keyframes DISPLAY9 { 
@-webkit-keyframes DISPLAY9 { 
0%   	{opacity:0; z-index:-2;}
76%   	{opacity:0; z-index:-2;}
78%		{opacity:1; z-index:-1;}
88%		{opacity:1; z-index:-1;}
90% 		{opacity:0; z-index:-2;}
100% 	{opacity:0; z-index:-2;}
}
        @keyframes DISPLAY9 {
@-webkit-keyframes DISPLAY9 { 
0%   	{opacity:0; z-index:-2;}
76%   	{opacity:0; z-index:-2;}
78%		{opacity:1; z-index:-1;}
88%		{opacity:1; z-index:-1;}
90% 		{opacity:0; z-index:-2;}
100% 	{opacity:0; z-index:-2;}
}

/* DISPLAY10 */
@-webkit-keyframes DISPLAY10 { 
0%   	{opacity:0; z-index:-2;}
88%   	{opacity:0; z-index:-2;}
90%		{opacity:1; z-index:-1;}
98%		{opacity:1; z-index:-1;}
100% 	{opacity:0; z-index:-2;}
}
   @-moz-keyframes DISPLAY10 { 
0%   	{opacity:0; z-index:-2;}
88%   	{opacity:0; z-index:-2;}
90%		{opacity:1; z-index:-1;}
98%		{opacity:1; z-index:-1;}
100% 	{opacity:0; z-index:-2;}
}
     @-o-keyframes DISPLAY10 { 
0%   	{opacity:0; z-index:-2;}
88%   	{opacity:0; z-index:-2;}
90%		{opacity:1; z-index:-1;}
98%		{opacity:1; z-index:-1;}
100% 	{opacity:0; z-index:-2;}
}
        @keyframes DISPLAY10 {
0%   	{opacity:0; z-index:-2;}
0%   	{opacity:0; z-index:-2;}
88%   	{opacity:0; z-index:-2;}
90%		{opacity:1; z-index:-1;}
98%		{opacity:1; z-index:-1;}
100% 	{opacity:0; z-index:-2;}
}