/*  **  pic.css  **  */

body {
	/*overflow:hidden; */
}

.pic {
	border-image: url('../images/metalbkg2.png') 69 69 69 69 round round; 
	border-style: inset;
	border-width: 69px;
}

#band-1 {
	position:absolute;
	top:40vh;
	left:60vw;
	z-index:350;
	opacity:0;
	width:500px;
	height:333px;	
	transform-style : preserve-3d;	
	background-image:url(../images/band-1.jpg);
    background-repeat:no-repeat;
    background-size:contain;
  -webkit-animation: FLIGHT 20s ease-in 1s 1 forwards;
     -moz-animation: FLIGHT 20s ease-in 1s 1 forwards;
       -o-animation: FLIGHT 20s ease-in 1s 1 forwards;
          animation: FLIGHT 20s ease-in 39s 1 forwards;	
}

#band-2 {
	position:absolute;
	top:40vh;
	left:20vw;
	z-index:350;
	opacity:0;
	width:500px;
	height:333px;	
	transform-style : preserve-3d;	
	background-image:url(../images/band-2.jpg);
    background-repeat:no-repeat;
    background-size:contain;
  -webkit-animation: FLIGHT2 20s ease-in 20s 1 forwards;
     -moz-animation: FLIGHT2 20s ease-in 20s 1 forwards;
       -o-animation: FLIGHT2 20s ease-in 20s 1 forwards;
          animation: FLIGHT2 20s ease-in 58s 1 forwards;	
}


#band-3 {
	position:absolute;
	top:40vh;
	left:60vw;
	z-index:350;
	opacity:0;
	width:640px;
	height:960px;	
	transform-style : preserve-3d;	
	background-image:url(../images/band-3.jpg);
    background-repeat:no-repeat;
    background-size:contain;
  -webkit-animation: FLIGHT 20s ease-in 40s 1 forwards;
     -moz-animation: FLIGHT 20s ease-in 40s 1 forwards;
       -o-animation: FLIGHT 20s ease-in 40s 1 forwards;
          animation: FLIGHT 20s ease-in 77s 1 forwards;	
}

#band-4 {
	position:absolute;
	top:40vh;
	left:20vw;
	z-index:350;
	opacity:0;
	width:500px;
	height:333px;	
	transform-style : preserve-3d;	
	background-image:url(../images/band-4.jpg);
    background-repeat:no-repeat;
    background-size:contain;
  -webkit-animation: FLIGHT 20s ease 60s 1 forwards;
     -moz-animation: FLIGHT 20s ease 60s 1 forwards;
       -o-animation: FLIGHT 20s ease 60s 1 forwards;
          animation: FLIGHT 20s ease 96s 1 forwards;	
}

#band-10 {
	position:absolute;
	top:40vh;
	left:60vw;
	z-index:350;
	opacity:0;
	width:960px;
	height:723px;	
	transform-style : preserve-3d;	
	background-image:url(../images/band-10.jpg);
    background-repeat:no-repeat;
    background-size:contain;
  -webkit-animation: FLIGHT3 20s ease-in 80s 1 forwards;
     -moz-animation: FLIGHT3 20s ease-in 80s 1 forwards;
       -o-animation: FLIGHT3 20s ease-in 80s 1 forwards;
          animation: FLIGHT3 20s ease-in 114s 1 forwards;	
}


@-webkit-keyframes FLIGHT { 
0%		{opacity:0; transform:scale(.1,.1); }
15%		{opacity:.5;}
90%		{opacity:1;}
100%	{opacity:0; left:20vw; top:20vh; z-index:450; transform:scale(5,5);}
}
   @-moz-keyframes FLIGHT { 
0%		{opacity:0; transform:scale(.1,.1); }
15%		{opacity:.5;}
90%		{opacity:1;}
100%	{opacity:0; left:20vw; top:20vh; z-index:450; transform:scale(5,5);}
}
     @-o-keyframes FLIGHT {
0%		{opacity:0; transform:scale(.1,.1); }
15%		{opacity:.5;}
90%		{opacity:1;}
100%	{opacity:0; left:20vw; top:20vh; z-index:450; transform:scale(5,5);}
}
        @keyframes FLIGHT { 
0%		{opacity:0; transform:scale(.1,.1) rotateY(0deg); }
15%		{opacity:.5;}
90%		{opacity:1;}
100%	{opacity:0; left:20vw; top:20vh; z-index:450; transform:scale(5,5) rotateY(360deg) ;}
}


@-webkit-keyframes FLIGHT2 { 
0%		{opacity:0; transform:scale(.1,.1); }
15%		{opacity:.5;}
90%		{opacity:1;}
100%	{opacity:0; left:60vw; top:30vh; z-index:450; transform:scale(5,5);}
}
   @-moz-keyframes FLIGHT2 { 
0%		{opacity:0; transform:scale(.1,.1); }
15%		{opacity:.5;}
90%		{opacity:1;}
100%	{opacity:0; left:60vw; top:30vh; z-index:450; transform:scale(5,5);}
}
     @-o-keyframes FLIGHT2 {
0%		{opacity:0; transform:scale(.1,.1); }
15%		{opacity:.5;}
90%		{opacity:1;}
100%	{opacity:0; left:60vw; top:30vh; z-index:450; transform:scale(5,5);}
}
        @keyframes FLIGHT2 { 
0%		{opacity:0; transform:scale(.1,.1) rotateY(0deg); }
15%		{opacity:.5;}
90%		{opacity:1;}
100%	{opacity:0; left:60vw; top:30vh; z-index:450; transform:scale(5,5) rotateY(360deg);}
}

@-webkit-keyframes FLIGHT3 { 
0%		{opacity:0; transform:scale(.1,.1); }
15%		{opacity:.5;}
90%		{opacity:1;}
100%	{opacity:0; left:20vw; top:20vh; z-index:450; transform:scale(5,5);}
}
   @-moz-keyframes FLIGHT3 { 
0%		{opacity:0; transform:scale(.1,.1); }
15%		{opacity:.5;}
90%		{opacity:1;}
100%	{opacity:0; left:20vw; top:20vh; z-index:450; transform:scale(5,5);}
}
     @-o-keyframes FLIGHT3 {
0%		{opacity:0; transform:scale(.1,.1); }
15%		{opacity:.5;}
90%		{opacity:1;}
100%	{opacity:0; left:20vw; top:20vh; z-index:450; transform:scale(5,5);}
}
        @keyframes FLIGHT3 { 
0%		{opacity:0; transform:scale(.1,.1) rotateY(0deg); }
15%		{opacity:.5;}
90%		{opacity:1;}
100%	{opacity:0; left:20vw; top:-150vh; z-index:450; transform:scale(5,5) rotateY(360deg);}
}