/* CSS Document */
.swap1{
	height:467px;
	width: 700px;
	color:#FFFFFF;
	padding: 20px;
	position: absolute;
	top: 10px;
	left: 10px;
	overflow: hidden;
	z-index:2;
	}
				
.container	 {
	background-color:#000000;
	height: 447px;
	width: 680px;
	color:#FFFFFF;
	padding: 20px;
	position: absolute;
	top: 200px;
	left: 260px;
	z-index: 2;
	border: solid 2px rgba(240, 240, 240, 0.7);
	visibility: visible;
	opacity: 1.0;
	transition: visibility 2s, opacity 2s;
   -webkit-transition: visibility 2s, opacity 2s;
					}

@keyframes swap
{
0% {z-index:1; opacity:0; background:no-repeat; transform:rotateY(0deg); background-image:url(portfolio/39.jpg)}
1% {z-index:1; opacity:1; background:no-repeat; transform:rotateY(0deg); background-image:url(portfolio/39.jpg)}
8%{z-index:1; opacity:1; background:no-repeat; transform:rotateY(0deg); background-image:url(portfolio/39.jpg)}
9%{z-index:1; opacity:0; background:no-repeat; transform:rotateY(90deg); background-image:url(portfolio/39.jpg)}

10% {z-index:1; opacity:1; background:no-repeat; transform:rotateY(90deg); background-image:url(portfolio/1.jpg)}
11% {z-index:1; opacity:1; background:no-repeat; transform:rotateY(0deg); background-image:url(portfolio/1.jpg)}
19% {z-index:1; opacity:1; background:no-repeat; transform:rotateY(0deg); background-image:url(portfolio/1.jpg)}
20% {z-index:1; opacity:0; background:no-repeat; transform:rotateY(90deg); background-image:url(portfolio/1.jpg)}

21% {z-index:1; opacity:1; background:no-repeat; transform:rotateY(90deg); background-image:url(portfolio/2.jpg)}
22% {z-index:1; opacity:1; background:no-repeat; transform:rotateY(0deg); background-image:url(portfolio/2.jpg)}
28% {z-index:1; opacity:1; background:no-repeat; transform:rotateY(0deg); background-image:url(portfolio/2.jpg)}
29% {z-index:1; opacity:0; background:no-repeat; transform:rotateY(90deg); background-image:url(portfolio/2.jpg)}

30%{z-index:1; opacity:1;  background:no-repeat; transform:rotateY(90deg); background-image:url(portfolio/3.jpg)}
31% {z-index:1; opacity:1;  background:no-repeat; transform:rotateY(0deg); background-image:url(portfolio/3.jpg)}
37% {z-index:1; opacity:1;   background:no-repeat; transform:rotateY(0deg); background-image:url(portfolio/3.jpg)}
38%{z-index:1; opacity:0;   background:no-repeat; transform:rotateY(90deg); background-image:url(portfolio/3.jpg)}

39%{z-index:1; opacity:1; background:no-repeat; transform:rotateY(90deg); background-image:url(portfolio/4.jpg)}
40%{z-index:1; opacity:1; background:no-repeat; transform:rotateY(0deg); background-image:url(portfolio/4.jpg)}
47% {z-index:1; opacity:1; background:no-repeat; transform:rotateY(0deg); background-image:url(portfolio/4.jpg)}
48%{z-index:1; opacity:0; background:no-repeat; transform:rotateY(90deg); background-image:url(portfolio/4.jpg)}

49%{z-index:1; opacity:1; background:no-repeat; transform:rotateY(90deg); background-image:url(portfolio/5.jpg)}
50%{z-index:1; opacity:1; background:no-repeat; transform:rotateY(0deg); background-image:url(portfolio/5.jpg)}
57% {z-index:1; opacity:1; background:no-repeat; transform:rotateY(0deg); background-image:url(portfolio/5.jpg)}
58%{z-index:1; opacity:0; background:no-repeat; transform:rotateY(90deg); background-image:url(portfolio/5.jpg)}

59%{z-index:1; opacity:1; background:no-repeat; transform:rotateY(90deg); background-image:url(portfolio/11.jpg)}
60%{z-index:1; opacity:1; background:no-repeat; transform:rotateY(0deg); background-image:url(portfolio/11.jpg)}
67% {z-index:1; opacity:1; background:no-repeat; transform:rotateY(0deg); background-image:url(portfolio/11.jpg)}
68%{z-index:1; opacity:0; background:no-repeat; transform:rotateY(90deg); background-image:url(portfolio/11.jpg)}

69%{z-index:1; opacity:1; background:no-repeat; transform:rotateY(90deg); background-image:url(portfolio/24.jpg)}
70%{z-index:1; opacity:1; background:no-repeat; transform:rotateY(0deg); background-image:url(portfolio/24.jpg)}
77% {z-index:1; opacity:1; background:no-repeat; transform:rotateY(0deg); background-image:url(portfolio/24.jpg)}
78%{z-index:1; opacity:0; background:no-repeat; transform:rotateY(90deg); background-image:url(portfolio/24.jpg)}

79%{z-index:1; opacity:1; background:no-repeat; transform:rotateY(90deg); background-image:url(portfolio/8.jpg)}
80%{z-index:1; opacity:1; background:no-repeat; transform:rotateY(0deg); background-image:url(portfolio/8.jpg)}
88% {z-index:1; opacity:1; background:no-repeat; transform:rotateY(0deg); background-image:url(portfolio/8.jpg)}
89%{z-index:1; opacity:0; background:no-repeat; transform:rotateY(90deg); background-image:url(portfolio/8.jpg)}

90%{z-index:1; opacity:1; background:no-repeat; transform:rotateY(90deg); background-image:url(portfolio/9.jpg)}
91%{z-index:1; opacity:1; background:no-repeat; transform:rotateY(0deg); background-image:url(portfolio/9.jpg)}
99%{z-index:1; opacity:1; background:no-repeat; transform:rotateY(0deg); background-image:url(portfolio/9.jpg)}
100%{z-index:1; opacity:0; background:no-repeat; transform:rotateY(90deg); background-image:url(portfolio/9.jpg)}
}