/*  **  bin.css  **  */

.wrap {
	perspective: 2800px;
	perspective-origin: 0% 15vh;
		  
	-webkit-animation: PERS-SWAY 2s ease 3s 120 forwards;
		-moz-animation: PERS-SWAY 2s ease 3s 120 forwards;
		   -o-animation: PERS-SWAY 2s ease 3s 120 forwards;
			  animation: PERS-SWAY 2s ease 3s 120 forwards;		
	
	
}

.cube {
	position: relative;
	width: 200px;
	transform-style: preserve-3d;
	top:60vh;
	left:40%;
	transform:scale(.5,.5) translateZ(-300px);
	opacity:.9;
 
-webkit-animation: SHUFFLE-1 30s ease 0s 1 forwards;
     -moz-animation: SHUFFLE-1 30s ease 0s 1 forwards;
       -o-animation: SHUFFLE-1 30s ease 0s 1 forwards;
          animation: SHUFFLE-1 26s ease 0s 1 forwards, WANDER-1 47s ease 51s 1 forwards;	
}

.cube div {
	position: absolute;
}

.back {
	border-top: 390px solid #000; /*  #444  */
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
	height: 0;
	width: 155px;
	transform: translateZ(-80px) rotateY(180deg) rotateX(-10deg) translateX(-10px);
-webkit-animation: COLOR-BACK 30s ease 0s 1 forwards;
     -moz-animation: COLOR-BACK 30s ease 0s 1 forwards;
       -o-animation: COLOR-BACK 30s ease 0s 1 forwards;
          animation: COLOR-BACK 1s ease 20s 1 forwards;
	
}

.back::after {
	position:relative;
	top:-380px;
	left:-20px;
	content:"wow";
	padding-top:20px;
	padding-bottom:50px;
	padding-left:78px;
	padding-right:70px;
	border:8px solid #000;   /*  #446753   */ 
	box-shadow:inset -1px 0px 3px 3px #000;  /*  #446753   */ 
	z-index:-1;	
-webkit-animation: COLOR-BACK-AFTER 30s ease 0s 1 forwards;
     -moz-animation: COLOR-BACK-AFTER 30s ease 0s 1 forwards;
       -o-animation: COLOR-BACK-AFTER 30s ease 0s 1 forwards;
          animation: COLOR-BACK-AFTER 1s ease 20s 1 forwards;	
	
}

.right {
	border-top: 400px solid #000;  /*  #446753   */
	border-left: 60px solid transparent;
	border-right: 30px solid transparent;
	height: 0;
	width: 160px;
	transform: rotateY(-270deg) translateX(120px) rotateX(-2deg) translateZ(-50px);
	transform-origin: top right;
	border-bottom-right-radius:0px;
	border-bottom-left-radius:110px;
-webkit-animation: COLOR-RIGHT 30s ease 0s 1 forwards;
     -moz-animation: COLOR-RIGHT 30s ease 0s 1 forwards;
       -o-animation: COLOR-RIGHT 30s ease 0s 1 forwards;
          animation: COLOR-RIGHT 1s ease 20s 1 forwards;
	
}

.right::after {
	position:relative;
	left:90%;
	content:" ";
	padding:25px;
	border-radius:50%;
	background-color:#000; /* #444  */
-webkit-animation: COLOR-RIGHT-AFTER 1s ease 20s 1 forwards;
     -moz-animation: COLOR-RIGHT-AFTER 1s ease 20s 1 forwards;
       -o-animation: COLOR-RIGHT-AFTER 1s ease 20s 1 forwards;
          animation: COLOR-RIGHT-AFTER 1s ease 20s 1 forwards;	
	
}

.left {
	border-top: 400px solid #000;   /*  #446753  */
	border-left: 60px solid transparent;
	border-right: 30px solid transparent;
	height: 0;
	width: 110px;
	transform: rotateY(270deg) translateX(-100px) rotateX(-2deg) translateY(0px) translateZ(-20px);
	transform-origin: center left;
	border-bottom-right-radius:80px;
	border-bottom-left-radius:80px;	
	-webkit-animation: COLOR-LEFT 1s ease 20s 1 forwards;
		 -moz-animation: COLOR-LEFT 1s ease 20s 1 forwards;
		   -o-animation: COLOR-LEFT 1s ease 20s 1 forwards;
			  animation: COLOR-LEFT 1s ease 20s 1 forwards;	
}

.left::after {
	position:relative;
	left:-20%;
	top:-20px;
	content:" ";
	padding:25px;
	border-radius:50%;
	background-color:#000;  /*  #444  */
		-webkit-animation: COLOR-LEFT-AFTER 1s ease 20s 1 forwards;
		 -moz-animation: COLOR-LEFT-AFTER 1s ease 20s 1 forwards;
		   -o-animation: COLOR-LEFT-AFTER 1s ease 20s 1 forwards;
			  animation: COLOR-LEFT-AFTER 1s ease 20s 1 forwards;	
}

.top {
	width: 200px;
	height: 220px;
	transform: rotateX(-90deg) translateY(80px) translateX(0) translateZ(-221px);
	transform-origin: 100% 100%;
	background-color: #000;   /*  #f6cc00  */
	border-top-right-radius:10px;
	border-top-left-radius:10px;
	transform-style: preserve-3d;	
    	animation: COLOR-TOP 1s ease 20s 1 forwards, SING-1 20s linear 32s 1 forwards, SING-2 28.3s linear 101s 1 forwards, SING-3 27s linear 139s 1 forwards, SING-4 28s linear 206s 1 forwards;	
}

.top::after {
	content:'';
	position:relative;
	left:50px;
	top:130px;
	height:20px;
	padding-left:50px;
	padding-right:50px;
	padding-top:50px;
	background-color: #000;    /*   #f6cc00  */
	box-shadow:10px 0px 10px #333;
	  -webkit-animation: COLOR-TOP 1s ease 20s 1 forwards;
		 -moz-animation: COLOR-TOP 1s ease 20s 1 forwards;
		   -o-animation: COLOR-TOP 1s ease 20s 1 forwards;
			  animation: COLOR-TOP 1s ease 20s 1 forwards;	
	
}

.bottom {
	width: 100px;
	height: 100px;
	top:400px;
	transform: rotateX(90deg) translateY(-130px);
	transform-origin: bottom center;
}

.front {
	border-top: 400px solid #000;  /* #446753  */ 
	border-left: 14px solid transparent;
	border-right: 14px solid transparent;
	height: 0;
	width: 170px;
	transform: translateZ(80px) rotateX(-5deg);
	box-shadow:inset 0px 0px 10px 10px #446753;
	border-bottom-right-radius:30px;
	border-bottom-left-radius:50px;
	  -webkit-animation: COLOR-LEFT 1s ease 20s 1 forwards;
		 -moz-animation: COLOR-LEFT 1s ease 20s 1 forwards;
		   -o-animation: COLOR-LEFT 1s ease 20s 1 forwards;
			  animation: COLOR-LEFT 1s ease 20s 1 forwards;		
	
}

.logo {
	position:relative;
	top:-340px;
	left:37%;
	padding-left:3px;
	padding-right:3px;
	font-family:Arial;
	font-weight:bold;
	color:#000;
	background-color:#000;
	font-size:150%;
	  -webkit-animation: COLOR-LOGO 1s ease 20s 1 forwards;
		 -moz-animation: COLOR-LOGO 1s ease 20s 1 forwards;
		   -o-animation: COLOR-LOGO 1s ease 20s 1 forwards;
			  animation: COLOR-LOGO 1s ease 20s 1 forwards;		
}


/*  **  keyframes  **  */

/* SING-1 */
@-webkit-keyframes SING-1 { 
0%   	{opacity:1;z-index:1;}
90%	{opacity:0;z-index:1;}
100% 	{opacity:0; z-index:-1;}
}
   @-moz-keyframes SING-1 { 
0%   	{opacity:1;z-index:1;}
90%	{opacity:0;z-index:1;}
100% 	{opacity:0; z-index:-1;}
}
     @-o-keyframes SING-1 { 
0%   	{opacity:1;z-index:1;}
90%	{opacity:0;z-index:1;}
100% 	{opacity:0; z-index:-1;}
}
        @keyframes SING-1 { 
0%   	{transform: rotateX(-90deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}
2%  		{transform: rotateX(-60deg) translateY(0px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}		
4%		{transform: rotateX(-80deg) translateY(0px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}
6%   	{transform: rotateX(-90deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}
8%	{transform: rotateX(-70deg) translateY(0px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}
10%   	{transform: rotateX(-90deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}
12%	{transform: rotateX(-60deg) translateY(0px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}
14%  	{transform: rotateX(-90deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}		
16%  	{transform: rotateX(-60deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}		
18%	{transform: rotateX(-80deg) translateY(0px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}
20%   	{transform: rotateX(-90deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}
22%	{transform: rotateX(-70deg) translateY(0px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}
24%   	{transform: rotateX(-90deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}
26%	{transform: rotateX(-60deg) translateY(0px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}
28%  	{transform: rotateX(-90deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}				
30%	{transform: rotateX(-80deg) translateY(0px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}
32%   	{transform: rotateX(-90deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}
34%	{transform: rotateX(-70deg) translateY(0px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}
36%   	{transform: rotateX(-90deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}
38%	{transform: rotateX(-60deg) translateY(0px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}
40%  	{transform: rotateX(-90deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}		
42%  	{transform: rotateX(-60deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}		
44%		{transform: rotateX(-70deg) translateY(0px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}
46% 		{transform: rotateX(-90deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}
48%		{transform: rotateX(-60deg) translateY(-60px) translateX(0px) translateZ(-240px);
		transform-origin: 100% 100%;
		}
50% 		{transform: rotateX(-90deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}	
51%  	{transform: rotateX(-60deg) translateY(0px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}		
54%		{transform: rotateX(-80deg) translateY(0px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}
56%   	{transform: rotateX(-90deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}
58%	{transform: rotateX(-70deg) translateY(0px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}
60%   	{transform: rotateX(-90deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}
62%	{transform: rotateX(-60deg) translateY(0px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}
64%  	{transform: rotateX(-90deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}		
66%  	{transform: rotateX(-60deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}		
68%	{transform: rotateX(-80deg) translateY(0px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}
70%   	{transform: rotateX(-90deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}
72%	{transform: rotateX(-70deg) translateY(0px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}
74%   	{transform: rotateX(-90deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}
76%	{transform: rotateX(-60deg) translateY(0px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}
78%  	{transform: rotateX(-90deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}				
81%	{transform: rotateX(-80deg) translateY(0px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}
82%   	{transform: rotateX(-90deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}
84%	{transform: rotateX(-70deg) translateY(0px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}
86%   	{transform: rotateX(-90deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}
88%	{transform: rotateX(-80deg) translateY(0px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}
91%  	{transform: rotateX(-90deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}		
92%  	{transform: rotateX(-70deg) translateY(80px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}		
94%		{transform: rotateX(-85deg) translateY(20px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}
96% 		{transform: rotateX(-90deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}
98%		{transform: rotateX(-85deg) translateY(0px) translateX(0px) translateZ(-240px);
		transform-origin: 100% 100%;
		}
100% 	{transform: rotateX(-90deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}
}


/* SING-2 */
@-webkit-keyframes SING-2 { 
0%   	{opacity:1;z-index:1;}
90%	{opacity:0;z-index:1;}
100% 	{opacity:0; z-index:-1;}
}
   @-moz-keyframes SING-2 { 
0%   	{opacity:1;z-index:1;}
90%	{opacity:0;z-index:1;}
100% 	{opacity:0; z-index:-1;}
}
     @-o-keyframes SING-2 { 
0%   	{opacity:1;z-index:1;}
90%	{opacity:0;z-index:1;}
100% 	{opacity:0; z-index:-1;}
}
        @keyframes SING-2 { 
0%   	{transform: rotateX(-90deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}
2%  		{transform: rotateX(-60deg) translateY(0px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}		
4%		{transform: rotateX(-80deg) translateY(0px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}
6%   	{transform: rotateX(-90deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}
8%	{transform: rotateX(-70deg) translateY(0px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}
10%   	{transform: rotateX(-90deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}
12%	{transform: rotateX(-60deg) translateY(0px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}
14%  	{transform: rotateX(-90deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}		
16%  	{transform: rotateX(-60deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}		
18%	{transform: rotateX(-80deg) translateY(0px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}
20%   	{transform: rotateX(-90deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}
22%	{transform: rotateX(-70deg) translateY(0px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}
24%   	{transform: rotateX(-90deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}
26%	{transform: rotateX(-60deg) translateY(0px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}
28%  	{transform: rotateX(-90deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}				
30%	{transform: rotateX(-80deg) translateY(0px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}
32%   	{transform: rotateX(-90deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}
34%	{transform: rotateX(-70deg) translateY(0px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}
36%   	{transform: rotateX(-90deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}
38%	{transform: rotateX(-60deg) translateY(0px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}
40%  	{transform: rotateX(-90deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}		
42%  	{transform: rotateX(-60deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}		
44%		{transform: rotateX(-70deg) translateY(0px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}
46% 		{transform: rotateX(-90deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}
48%		{transform: rotateX(-60deg) translateY(-60px) translateX(0px) translateZ(-240px);
		transform-origin: 100% 100%;
		}
50% 		{transform: rotateX(-90deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}	
51%  	{transform: rotateX(-60deg) translateY(0px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}		
54%		{transform: rotateX(-80deg) translateY(0px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}
56%   	{transform: rotateX(-90deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}
58%	{transform: rotateX(-70deg) translateY(0px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}
60%   	{transform: rotateX(-90deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}
62%	{transform: rotateX(-60deg) translateY(0px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}
64%  	{transform: rotateX(-90deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}		
66%  	{transform: rotateX(-60deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}		
68%	{transform: rotateX(-80deg) translateY(0px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}
70%   	{transform: rotateX(-90deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}
72%	{transform: rotateX(-70deg) translateY(0px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}
74%   	{transform: rotateX(-90deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}
76%	{transform: rotateX(-60deg) translateY(0px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}
78%  	{transform: rotateX(-90deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}				
81%	{transform: rotateX(-60deg) translateY(0px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}
86%	{transform: rotateX(-70deg) translateY(0px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}
89%	{transform: rotateX(-60deg) translateY(0px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}		
92%	{transform: rotateX(-70deg) translateY(0px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}		
98%		{transform: rotateX(-60deg) translateY(0px) translateX(0px) translateZ(-240px);
		transform-origin: 100% 100%;
		}  
100% 	{transform: rotateX(-90deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}
}

/* SING-3 */
@-webkit-keyframes SING-3 { 
0%   	{opacity:1;z-index:1;}
90%	{opacity:0;z-index:1;}
100% 	{opacity:0; z-index:-1;}
}
   @-moz-keyframes SING-3 { 
0%   	{opacity:1;z-index:1;}
90%	{opacity:0;z-index:1;}
100% 	{opacity:0; z-index:-1;}
}
     @-o-keyframes SING-3 { 
0%   	{opacity:1;z-index:1;}
90%	{opacity:0;z-index:1;}
100% 	{opacity:0; z-index:-1;}
}
        @keyframes SING-3 { 
0%   	{transform: rotateX(-90deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}
2%  		{transform: rotateX(-60deg) translateY(0px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}		
4%		{transform: rotateX(-80deg) translateY(0px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}
6%   	{transform: rotateX(-90deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}
8%	{transform: rotateX(-70deg) translateY(0px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}
10%   	{transform: rotateX(-90deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}
12%	{transform: rotateX(-60deg) translateY(0px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}
14%  	{transform: rotateX(-90deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}		
16%  	{transform: rotateX(-60deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}		
18%	{transform: rotateX(-80deg) translateY(0px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}
20%   	{transform: rotateX(-90deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}
22%	{transform: rotateX(-70deg) translateY(0px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}
24%   	{transform: rotateX(-90deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}
26%	{transform: rotateX(-60deg) translateY(0px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}
28%  	{transform: rotateX(-90deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}				
30%	{transform: rotateX(-80deg) translateY(0px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}
32%   	{transform: rotateX(-90deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}
34%	{transform: rotateX(-70deg) translateY(0px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}
36%   	{transform: rotateX(-90deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}
38%	{transform: rotateX(-60deg) translateY(0px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}
40%  	{transform: rotateX(-90deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}		
42%  	{transform: rotateX(-60deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}		
44%		{transform: rotateX(-70deg) translateY(0px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}
46% 		{transform: rotateX(-90deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}
48%		{transform: rotateX(-60deg) translateY(-60px) translateX(0px) translateZ(-240px);
		transform-origin: 100% 100%;
		}
50% 		{transform: rotateX(-90deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}	
51%  	{transform: rotateX(-60deg) translateY(0px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}		
54%		{transform: rotateX(-80deg) translateY(0px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}
56%   	{transform: rotateX(-90deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}
58%	{transform: rotateX(-70deg) translateY(0px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}
60%   	{transform: rotateX(-90deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}
62%	{transform: rotateX(-60deg) translateY(0px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}
64%  	{transform: rotateX(-90deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}		
66%  	{transform: rotateX(-60deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}		
68%	{transform: rotateX(-80deg) translateY(0px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}
70%   	{transform: rotateX(-90deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}
72%	{transform: rotateX(-70deg) translateY(0px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}
74%   	{transform: rotateX(-90deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}
76%	{transform: rotateX(-60deg) translateY(0px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}
78%  	{transform: rotateX(-90deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}				
81%	{transform: rotateX(-60deg) translateY(0px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}
86%	{transform: rotateX(-70deg) translateY(0px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}
89%	{transform: rotateX(-60deg) translateY(0px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}		
92%	{transform: rotateX(-70deg) translateY(0px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}		
98%		{transform: rotateX(-60deg) translateY(0px) translateX(0px) translateZ(-240px);
		transform-origin: 100% 100%;
		}  
100% 	{transform: rotateX(-90deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}
}

/* SING-4 */

@keyframes SING-4 { 
0%   	{transform: rotateX(-90deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}
2%  		{transform: rotateX(-60deg) translateY(0px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}		
4%		{transform: rotateX(-80deg) translateY(0px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}
6%   	{transform: rotateX(-90deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}
8%	{transform: rotateX(-70deg) translateY(0px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}
10%   	{transform: rotateX(-90deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}
12%	{transform: rotateX(-60deg) translateY(0px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}
14%  	{transform: rotateX(-90deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}		
16%  	{transform: rotateX(-60deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}		
18%	{transform: rotateX(-80deg) translateY(0px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}
20%   	{transform: rotateX(-90deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}
22%	{transform: rotateX(-70deg) translateY(0px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}
24%   	{transform: rotateX(-90deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}
26%	{transform: rotateX(-60deg) translateY(0px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}
28%  	{transform: rotateX(-90deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}				
30%	{transform: rotateX(-80deg) translateY(0px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}
32%   	{transform: rotateX(-90deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}
34%	{transform: rotateX(-70deg) translateY(0px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}
36%   	{transform: rotateX(-90deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}
38%	{transform: rotateX(-60deg) translateY(0px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}
40%  	{transform: rotateX(-90deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}		
42%  	{transform: rotateX(-60deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}		
44%		{transform: rotateX(-70deg) translateY(0px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}
46% 		{transform: rotateX(-90deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}
48%		{transform: rotateX(-60deg) translateY(-60px) translateX(0px) translateZ(-240px);
		transform-origin: 100% 100%;
		}
50% 		{transform: rotateX(-90deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}	
51%  	{transform: rotateX(-60deg) translateY(0px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}		
54%		{transform: rotateX(-80deg) translateY(0px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}
56%   	{transform: rotateX(-90deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}
58%	{transform: rotateX(-70deg) translateY(0px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}
60%   	{transform: rotateX(-90deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}
62%	{transform: rotateX(-60deg) translateY(0px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}
64%  	{transform: rotateX(-90deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}		
66%  	{transform: rotateX(-60deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}		
68%	{transform: rotateX(-80deg) translateY(0px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}
70%   	{transform: rotateX(-90deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}
72%	{transform: rotateX(-70deg) translateY(0px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}
74%   	{transform: rotateX(-90deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}
76%	{transform: rotateX(-60deg) translateY(0px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}
78%  	{transform: rotateX(-90deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}				
81%	{transform: rotateX(-60deg) translateY(0px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}
86%	{transform: rotateX(-70deg) translateY(0px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}
89%	{transform: rotateX(-60deg) translateY(0px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}		
92%	{transform: rotateX(-70deg) translateY(0px) translateX(0) translateZ(-240px);
		transform-origin: 100% 100%;
		}		
98%		{transform: rotateX(-60deg) translateY(0px) translateX(0px) translateZ(-240px);
		transform-origin: 100% 100%;
		}  
100% 	{transform: rotateX(-90deg) translateY(80px) translateX(0) translateZ(-221px);
		transform-origin: 100% 100%;
		}
}


/* SHUFFLE-1 */
@-webkit-keyframes SHUFFLE-1 { 
0%   	{left:10%;}
50%   	{left:50%;}
100% 	{left:10%}
}
   @-moz-keyframes SHUFFLE-1 { 
0%   	{opacity:1;z-index:1;}

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

100% 	{opacity:0; z-index:-1;}
}
        @keyframes SHUFFLE-1 { 
0%   	{transform:translateZ(-300px) scale(.5,.5);}
50%   	{transform:translateZ(-300px) scale(.5,.5);}
100% 	{transform:translateZ(0px) scale(.5,.5);}
}

/* WANDER-1 */
@-webkit-keyframes WANDER-1 { 
0%   	{left:10%;}
50%   	{left:50%;}
100% 	{left:10%}
}
   @-moz-keyframes WANDER-1 { 
0%   	{opacity:1;z-index:1;}

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

100% 	{opacity:0; z-index:-1;}
}
        @keyframes WANDER-1 { 
0%   	{transform:translateZ(-0px) scale(.5,.5); left:40%; opacity:.9;}
50%   	{transform:translateZ(-300px) scale(.5,.5); left:20%; opacity:.3;}
100% 	{transform:translateZ(0px) scale(.5,.5); left:40%; opacity:.9;}
}

/* PERS-SWAY */
@keyframes PERS-SWAY { 
0%		{perspective: 2800px; perspective-origin: 0% 15vh;}
25%		{perspective: 2800px; perspective-origin: 20% 15vh;}
50%		{perspective: 2800px; perspective-origin: 0% 15vh;}
75%		{perspective: 2800px; perspective-origin: 10% 12vh;}
100%	{perspective: 2800px; perspective-origin: 0% 15vh;}
}


/* COLOR-BACK */
@-webkit-keyframes COLOR-BACK { 
0%   	{left:10%;}
50%   	{left:50%;}
100% 	{left:10%}
}
   @-moz-keyframes COLOR-BACK { 
0%   	{opacity:1;z-index:1;}

100% 	{opacity:0; z-index:-1;}
}
     @-o-keyframes COLOR-BACK { 
0%   	{opacity:1;z-index:1;}

100% 	{opacity:0; z-index:-1;}
}
        @keyframes COLOR-BACK{ 
0%   	{border-top: 390px solid #000;}
100% 	{border-top: 390px solid #444; }
}

/* COLOR-BACK-AFTER */
@-webkit-keyframes COLOR-BACK-AFTER { 
0%   	{left:10%;}
50%   	{left:50%;}
100% 	{left:10%}
}
   @-moz-keyframes COLOR-BACK-AFTER { 
0%   	{opacity:1;z-index:1;}

100% 	{opacity:0; z-index:-1;}
}
     @-o-keyframes COLOR-BACK-AFTER { 
0%   	{opacity:1;z-index:1;}

100% 	{opacity:0; z-index:-1;}
}
        @keyframes COLOR-BACK-AFTER { 
0%   	{border:8px solid #000; box-shadow:inset -1px 0px 3px 3px #000;}
100% 	{border:8px solid #446753; box-shadow:inset -1px 0px 3px 3px #446753;}
}

/* COLOR-RIGHT */
@-webkit-keyframes COLOR-RIGHT { 
0%   	{left:10%;}
50%   	{left:50%;}
100% 	{left:10%}
}
   @-moz-keyframes COLOR-RIGHT { 
0%   	{opacity:1;z-index:1;}

100% 	{opacity:0; z-index:-1;}
}
     @-o-keyframes COLOR-RIGHT { 
0%   	{opacity:1;z-index:1;}

100% 	{opacity:0; z-index:-1;}
}
        @keyframes COLOR-RIGHT { 
0%   	{border-top: 400px solid #000;}
100% 	{border-top: 400px solid #446753;}
}

/* COLOR-RIGHT-AFTER */
@-webkit-keyframes COLOR-RIGHT-AFTER { 
0%   	{left:10%;}
50%   	{left:50%;}
100% 	{left:10%}
}
   @-moz-keyframes COLOR-RIGHT-AFTER { 
0%   	{opacity:1;z-index:1;}

100% 	{opacity:0; z-index:-1;}
}
     @-o-keyframes COLOR-RIGHT-AFTER { 
0%   	{opacity:1;z-index:1;}

100% 	{opacity:0; z-index:-1;}
}
        @keyframes COLOR-RIGHT-AFTER { 
0%   	{background-color:#000;}
100% 	{background-color:#444;}
}

/* COLOR-LEFT */
@-webkit-keyframes COLOR-LEFT { 
0%   	{left:10%;}
50%   	{left:50%;}
100% 	{left:10%}
}
   @-moz-keyframes COLOR-LEFT { 
0%   	{opacity:1;z-index:1;}

100% 	{opacity:0; z-index:-1;}
}
     @-o-keyframes COLOR-LEFT { 
0%   	{opacity:1;z-index:1;}

100% 	{opacity:0; z-index:-1;}
}
        @keyframes COLOR-LEFT { 
0%   	{border-top: 400px solid #000;}
100% 	{border-top: 400px solid #446753;}
}

/* COLOR-LEFT-AFTER */
@-webkit-keyframes COLOR-LEFT-AFTER { 
0%   	{left:10%;}
50%   	{left:50%;}
100% 	{left:10%}
}
   @-moz-keyframes COLOR-LEFT-AFTER { 
0%   	{opacity:1;z-index:1;}

100% 	{opacity:0; z-index:-1;}
}
     @-o-keyframes COLOR-LEFT-AFTER { 
0%   	{opacity:1;z-index:1;}

100% 	{opacity:0; z-index:-1;}
}
        @keyframes COLOR-LEFT-AFTER { 
0%   	{background-color:#000;}
100% 	{background-color:#444;}
}

/* COLOR-TOP */
@-webkit-keyframes COLOR-TOP { 
0%   	{left:10%;}
50%   	{left:50%;}
100% 	{left:10%}
}
   @-moz-keyframes COLOR-TOP { 
0%   	{opacity:1;z-index:1;}

100% 	{opacity:0; z-index:-1;}
}
     @-o-keyframes COLOR-TOP { 
0%   	{opacity:1;z-index:1;}

100% 	{opacity:0; z-index:-1;}
}
        @keyframes COLOR-TOP { 
0%   	{background-color: #000}
100% 	{background-color:#f6cc00 ;}
}
	
/* COLOR-LOGO*/
@-webkit-keyframes COLOR-LOGO { 
0%   	{left:10%;}
50%   	{left:50%;}
100% 	{left:10%}
}
   @-moz-keyframes COLOR-LOGO { 
0%   	{opacity:1;z-index:1;}

100% 	{opacity:0; z-index:-1;}
}
     @-o-keyframes COLOR-LOGO { 
0%   	{opacity:1;z-index:1;}

100% 	{opacity:0; z-index:-1;}
}
        @keyframes COLOR-LOGO { 
0%   	{color:#000; background-color:#000;}
100% 	{color:#fff; background-color:#f00;}
}	

	
	
	
	

	
	
	
	