#tout {
	height:100%;
	width:100%;
}
#featured-projects {
	height:100%;
	width:100%;
	position: absolute;
	top:0;
	left:0;
	z-index: 1;
}

#featured-projects li {
	list-style: none;
	position: absolute;
	visibility: hidden;
	width:100%;
	height:80%;
	top:5%;
	margin:0;
	-webkit-perspective: 1200px;
}
#featured-projects .project-details {
	position: absolute;
	z-index: 10;
	bottom:-70px;
	text-align: left;
	opacity: 0;
}
#featured-projects .project-details article{
	max-width: 300px;
}

.shadow {
	background:#F2F2F2;
    box-shadow:0px 0px 75px #E5E5E5;
    position: absolute;
}
.bar {
	background:#000;
	position: absolute;
}
#featured-projects .background {
	width:105%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
}
#featured-projects .middleground {
	width:110%;
	height: 100%;
	position: absolute;
	top:0;
	left:0;
}
#featured-projects .foreground {
	width:115%;
	height: 100%;
	position: absolute;
	top:0;
	left:0;
}
	/* Welp - this pretty much defeats this entire CSS file */
	#featured-projects .bar {
		display: none !important;
	}
	#featured-projects .project-1 .foreground {
		background:url(../images/tout-foreground-bg.png) center center no-repeat;
		background-size:contain;
	}
	#featured-projects .project-2 .foreground {
		background:url(../images/tout-foreground2-bg.png) center center no-repeat;
		background-size:contain;
	}
	#featured-projects .project-3 .foreground {
		background:url(../images/tout-foreground3-bg.png) center center no-repeat;
		background-size:contain;
	}
	#featured-projects .middleground {
		background:url(../images/tout-middleground-bg.png) center center no-repeat;
		background-size:contain;
	}
	#featured-projects .background {
		background:url(../images/tout-background-bg.png) center center no-repeat;
		background-size:contain;
	}
	/* End of the destruction. Will refactor this when I have more time */
	
#featured-projects .object-1 {
	-webkit-animation: float-two 3s ease-in-out infinite;
	-moz-animation: float-two 3s ease-in-out infinite;
	-ms-animation: float-two 3s ease-in-out infinite;
	animation: float-two 3s ease-in-out infinite;
}
#featured-projects .object-2 {
	-webkit-animation: float-one 3.3s ease-in-out infinite;
	-moz-animation: float-one 3.3s ease-in-out infinite;
	-ms-animation: float-one 3.3s ease-in-out infinite;
	animation: float-one 3.3s ease-in-out infinite;
}
.background .bar {
	background:#EAEAEA;
	border-radius: 6px;
	-webkit-filter: blur(5px);
  	-moz-filter: blur(5px);
  	-o-filter: blur(5px);
  	-ms-filter: blur(5px);
  	filter: blur(5px);
}
.middleground .bar {
	background:#999;
	-webkit-filter: blur(3px);
  	-moz-filter: blur(3px);
  	-o-filter: blur(3px);
  	-ms-filter: blur(3px);
  	filter: blur(3px);
}
#featured-projects .ipad {
	width:50%;
	left:25%;
	top:15%;
	position: absolute;
	z-index: 10;
}

.project-1 .foreground .bar2 {
	height:30px;
	width:25%;
	top:30%;
	z-index: 6;
	left:15%;
	-webkit-transform: rotateY(30deg) rotateX(50deg) rotateZ(-30deg);
	-webkit-animation: float-three 3s ease-in-out infinite;
	-moz-transform: rotateY(30deg) rotateX(50deg) rotateZ(-30deg);
	-moz-animation: float-three 3s ease-in-out infinite;
	-ms-transform: rotateY(30deg) rotateX(50deg) rotateZ(-30deg);
	-ms-animation: float-three 3s ease-in-out infinite;
	transform: rotateY(30deg) rotateX(50deg) rotateZ(-30deg);
	animation: float-three 3s ease-in-out infinite;
}
.project-1 .foreground .bar6 {
	height:4px;
	width:25%;
	top:40%;
	left:60%;
	-webkit-transform: rotateY(33deg) rotateX(10deg) rotateZ(30deg);
	-webkit-animation: float-one 2s ease-in-out infinite;
	-moz-transform: rotateY(33deg) rotateX(10deg) rotateZ(30deg);
	-moz-animation: float-one 2s ease-in-out infinite;
	-ms-transform: rotateY(33deg) rotateX(10deg) rotateZ(30deg);
	-ms-animation: float-one 2s ease-in-out infinite;
	transform: rotateY(33deg) rotateX(10deg) rotateZ(30deg);
	animation: float-one 2s ease-in-out infinite;
	z-index: 30;
}
.project-1 .foreground .bar3 {
	height:4px;
	width:24%;
	top:63%;
	left:23%;
	-webkit-transform: rotateY(5deg) rotateX(30deg) rotateZ(35deg);
	-webkit-animation: float-three 2s ease-in-out infinite;
	-moz-transform: rotateY(5deg) rotateX(30deg) rotateZ(35deg);
	-moz-animation: float-three 2s ease-in-out infinite;
	-ms-transform: rotateY(5deg) rotateX(30deg) rotateZ(35deg);
	-ms-animation: float-three 2s ease-in-out infinite;
	transform: rotateY(5deg) rotateX(30deg) rotateZ(35deg);
	animation: float-three 2s ease-in-out infinite;
	z-index:4;
}
.project-1 .foreground .bar5 {
	height:20px;
	width:30%;
	top:63%;
	left:60%;
	-webkit-transform: rotateY(45deg) rotateX(30deg) rotateZ(-15deg);
	-webkit-animation: float-one 2s ease-in-out infinite;
	-moz-transform: rotateY(45deg) rotateX(30deg) rotateZ(-15deg);
	-moz-animation: float-one 2s ease-in-out infinite;
	-ms-transform: rotateY(45deg) rotateX(30deg) rotateZ(-15deg);
	-ms-animation: float-one 2s ease-in-out infinite;
	transform: rotateY(45deg) rotateX(30deg) rotateZ(-15deg);
	animation: float-one 2s ease-in-out infinite;
	z-index:40;
}
.project-1 .foreground .bar4 {
	height:10px;
	width:25%;
	top:50%;
	left:65%;
	-webkit-transform: rotateY(35deg) rotateX(30deg) rotateZ(5deg);
	-webkit-animation: float-two 3.2s ease-in-out infinite;
	-moz-transform: rotateY(35deg) rotateX(30deg) rotateZ(5deg);
	-moz-animation: float-two 3.2s ease-in-out infinite;
	-ms-transform: rotateY(35deg) rotateX(30deg) rotateZ(5deg);
	-ms-animation: float-two 3.2s ease-in-out infinite;
	transform: rotateY(35deg) rotateX(30deg) rotateZ(5deg);
	animation: float-two 3.2s ease-in-out infinite;
	z-index:20;
}
.project-1 .foreground .bar1 {
	height:8px;
	width:16%;
	top:55%;
	left:20%;
	-webkit-transform: rotateY(55deg) rotateX(-34deg) rotateZ(15deg);
	-webkit-animation: float-one 3s ease-in-out infinite;
	-moz-transform: rotateY(55deg) rotateX(-34deg) rotateZ(15deg);
	-moz-animation: float-one 3s ease-in-out infinite;
	-ms-transform: rotateY(55deg) rotateX(-34deg) rotateZ(15deg);
	-ms-animation: float-one 3s ease-in-out infinite;
	transform: rotateY(55deg) rotateX(-34deg) rotateZ(15deg);
	animation: float-one 3s ease-in-out infinite;
	z-index:3;
	
}
.project-2 .foreground .bar2 {
	height:23px;
	width:30%;
	top:30%;
	z-index: 6;
	left:25%;
	-webkit-transform: rotateY(0deg) rotateX(60deg) rotateZ(60deg);
	-webkit-animation: float-three 3s ease-in-out infinite;
	-moz-transform: rotateY(0deg) rotateX(60deg) rotateZ(60deg);
	-moz-animation: float-three 3s ease-in-out infinite;
	-ms-transform: rotateY(0deg) rotateX(60deg) rotateZ(60deg);
	-ms-animation: float-three 3s ease-in-out infinite;
	transform: rotateY(0deg) rotateX(60deg) rotateZ(60deg);
	animation: float-three 3s ease-in-out infinite;
}
.project-2 .foreground .bar6 {
	height:4px;
	width:25%;
	top:40%;
	left:55%;
	-webkit-transform: rotateY(33deg) rotateX(10deg) rotateZ(30deg);
	-webkit-animation: float-three 2s ease-in-out infinite;
	-moz-transform: rotateY(33deg) rotateX(10deg) rotateZ(30deg);
	-moz-animation: float-three 2s ease-in-out infinite;
	-ms-transform: rotateY(33deg) rotateX(10deg) rotateZ(30deg);
	-ms-animation: float-three 2s ease-in-out infinite;
	transform: rotateY(33deg) rotateX(10deg) rotateZ(30deg);
	animation: float-three 2s ease-in-out infinite;
	z-index: 30;
}
.project-2 .foreground .bar3 {
	height:4px;
	width:24%;
	top:53%;
	left:15%;
	-webkit-transform: rotateY(5deg) rotateX(30deg) rotateZ(35deg);
	-webkit-animation: float-three 2s ease-in-out infinite;
	-moz-transform: rotateY(5deg) rotateX(30deg) rotateZ(35deg);
	-moz-animation: float-three 2s ease-in-out infinite;
	-ms-transform: rotateY(5deg) rotateX(30deg) rotateZ(35deg);
	-ms-animation: float-three 2s ease-in-out infinite;
	transform: rotateY(5deg) rotateX(30deg) rotateZ(35deg);
	animation: float-three 2s ease-in-out infinite;
	z-index:4;
}
.project-2 .foreground .bar5 {
	height:2px;
	width:30%;
	top:55%;
	left:50%;
	-webkit-transform: rotateY(45deg) rotateX(30deg) rotateZ(15deg);
	-webkit-animation: float-one 2s ease-in-out infinite;
	-moz-transform: rotateY(45deg) rotateX(30deg) rotateZ(15deg);
	-moz-animation: float-one 2s ease-in-out infinite;
	-ms-transform: rotateY(45deg) rotateX(30deg) rotateZ(15deg);
	-ms-animation: float-one 2s ease-in-out infinite;
	transform: rotateY(45deg) rotateX(30deg) rotateZ(15deg);
	animation: float-one 2s ease-in-out infinite;
	z-index:40;
}
.project-2 .foreground .bar4 {
	height:10px;
	width:25%;
	top:50%;
	left:50%;
	-webkit-transform: rotateY(35deg) rotateX(30deg) rotateZ(-5deg);
	-webkit-animation: float-two 3.2s ease-in-out infinite;
	-moz-transform: rotateY(35deg) rotateX(30deg) rotateZ(-5deg);
	-moz-animation: float-two 3.2s ease-in-out infinite;
	-ms-transform: rotateY(35deg) rotateX(30deg) rotateZ(-5deg);
	-ms-animation: float-two 3.2s ease-in-out infinite;
	transform: rotateY(35deg) rotateX(30deg) rotateZ(-5deg);
	animation: float-two 3.2s ease-in-out infinite;
	z-index:20;
}
.project-2 .foreground .bar1 {
	height:8px;
	width:16%;
	top:55%;
	left:20%;
	-webkit-transform: rotateY(55deg) rotateX(-34deg) rotateZ(15deg);
	-webkit-animation: float-one 3s ease-in-out infinite;
	-moz-transform: rotateY(55deg) rotateX(-34deg) rotateZ(15deg);
	-moz-animation: float-one 3s ease-in-out infinite;
	-ms-transform: rotateY(55deg) rotateX(-34deg) rotateZ(15deg);
	-ms-animation: float-one 3s ease-in-out infinite;
	transform: rotateY(55deg) rotateX(-34deg) rotateZ(15deg);
	animation: float-one 3s ease-in-out infinite;
	z-index:3;
	
}

.project-3 .foreground .bar2 {
	height:5px;
	width:30%;
	top:30%;
	z-index: 6;
	left:25%;
	-webkit-transform: rotateY(0deg) rotateX(60deg) rotateZ(-20deg);
	-webkit-animation: float-three 3s ease-in-out infinite;
	-moz-transform: rotateY(0deg) rotateX(60deg) rotateZ(-20deg);
	-moz-animation: float-three 3s ease-in-out infinite;
	-ms-transform: rotateY(0deg) rotateX(60deg) rotateZ(-20deg);
	-ms-animation: float-three 3s ease-in-out infinite;
	transform: rotateY(0deg) rotateX(60deg) rotateZ(-20deg);
	animation: float-three 3s ease-in-out infinite;
}
.project-3 .foreground .bar6 {
	height:4px;
	width:25%;
	top:25%;
	left:55%;
	-webkit-transform: rotateY(33deg) rotateX(10deg) rotateZ(30deg);
	-webkit-animation: float-three 2s ease-in-out infinite;
	-moz-transform: rotateY(33deg) rotateX(10deg) rotateZ(30deg);
	-moz-animation: float-three 2s ease-in-out infinite;
	-ms-transform: rotateY(33deg) rotateX(10deg) rotateZ(30deg);
	-ms-animation: float-three 2s ease-in-out infinite;
	transform: rotateY(33deg) rotateX(10deg) rotateZ(30deg);
	animation: float-three 2s ease-in-out infinite;
	z-index: 30;
}
.project-3 .foreground .bar3 {
	height:4px;
	width:24%;
	top:53%;
	left:15%;
	-webkit-transform: rotateY(5deg) rotateX(30deg) rotateZ(35deg);
	-webkit-animation: float-three 2s ease-in-out infinite;
	-moz-transform: rotateY(5deg) rotateX(30deg) rotateZ(35deg);
	-moz-animation: float-three 2s ease-in-out infinite;
	-ms-transform: rotateY(5deg) rotateX(30deg) rotateZ(35deg);
	-ms-animation: float-three 2s ease-in-out infinite;
	transform: rotateY(5deg) rotateX(30deg) rotateZ(35deg);
	animation: float-three 2s ease-in-out infinite;
	z-index:4;
}
.project-3 .foreground .bar5 {
	height:2px;
	width:30%;
	top:55%;
	left:60%;
	-webkit-transform: rotateY(45deg) rotateX(30deg) rotateZ(-5deg);
	-webkit-animation: float-one 2s ease-in-out infinite;
	-moz-transform: rotateY(45deg) rotateX(30deg) rotateZ(-5deg);
	-moz-animation: float-one 2s ease-in-out infinite;
	-ms-transform: rotateY(45deg) rotateX(30deg) rotateZ(-5deg);
	-ms-animation: float-one 2s ease-in-out infinite;
	transform: rotateY(45deg) rotateX(30deg) rotateZ(-5deg);
	animation: float-one 2s ease-in-out infinite;
	z-index:40;
}
.project-3 .foreground .bar4 {
	height:12px;
	width:25%;
	top:50%;
	left:60%;
	-webkit-transform: rotateY(35deg) rotateX(30deg) rotateZ(-5deg);
	-webkit-animation: float-two 3.2s ease-in-out infinite;
	-moz-transform: rotateY(35deg) rotateX(30deg) rotateZ(-5deg);
	-moz-animation: float-two 3.2s ease-in-out infinite;
	-ms-transform: rotateY(35deg) rotateX(30deg) rotateZ(-5deg);
	-ms-animation: float-two 3.2s ease-in-out infinite;
	transform: rotateY(35deg) rotateX(30deg) rotateZ(-5deg);
	animation: float-two 3.2s ease-in-out infinite;
	z-index:20;
}
.project-3 .foreground .bar1 {
	height:28px;
	width:16%;
	top:50%;
	left:20%;
	-webkit-transform: rotateY(55deg) rotateX(-34deg) rotateZ(-25deg);
	-webkit-animation: float-one 3s ease-in-out infinite;
	-moz-transform: rotateY(55deg) rotateX(-34deg) rotateZ(-25deg);
	-moz-animation: float-one 3s ease-in-out infinite;
	-ms-transform: rotateY(55deg) rotateX(-34deg) rotateZ(-25deg);
	-ms-animation: float-one 3s ease-in-out infinite;
	transform: rotateY(55deg) rotateX(-34deg) rotateZ(-25deg);
	animation: float-one 3s ease-in-out infinite;
	z-index:3;
	
}
.background .bar1 {
	width:10%;
	height:2%;
	top:40%;
	left:20%;
	-webkit-animation: float-three 3s ease-in-out infinite;
	-webkit-transform: rotateY(5deg) rotateX(0deg) rotateZ(15deg);
	-moz-animation: float-three 3s ease-in-out infinite;
	-moz-transform: rotateY(5deg) rotateX(0deg) rotateZ(15deg);
	-ms-animation: float-three 3s ease-in-out infinite;
	-ms-transform: rotateY(5deg) rotateX(0deg) rotateZ(15deg);
	animation: float-three 3s ease-in-out infinite;
	transform: rotateY(5deg) rotateX(0deg) rotateZ(15deg);
}
.background .bar2 {
	width:7%;
	height:1%;
	top:45%;
	right:20%;
	-webkit-animation: float-two 3s ease-in-out infinite;
	-webkit-transform: rotateY(15deg) rotateX(10deg) rotateZ(30deg);
	-moz-animation: float-two 3s ease-in-out infinite;
	-moz-transform: rotateY(15deg) rotateX(10deg) rotateZ(30deg);
	-ms-animation: float-two 3s ease-in-out infinite;
	-ms-transform: rotateY(15deg) rotateX(10deg) rotateZ(30deg);
	animation: float-two 3s ease-in-out infinite;
	transform: rotateY(15deg) rotateX(10deg) rotateZ(30deg);
}
.background .bar3 {
	width:8%;
	height:.5%;
	top:55%;
	left:5%;
	-webkit-animation: float-two 3s ease-in-out infinite;
	-webkit-transform: rotateY(25deg) rotateX(5deg) rotateZ(3deg);
	-moz-animation: float-two 3s ease-in-out infinite;
	-moz-transform: rotateY(25deg) rotateX(5deg) rotateZ(3deg);
	-ms-animation: float-two 3s ease-in-out infinite;
	-ms-transform: rotateY(25deg) rotateX(5deg) rotateZ(3deg);
	animation: float-two 3s ease-in-out infinite;
	transform: rotateY(25deg) rotateX(5deg) rotateZ(3deg);
}
.background .bar4 {
	width:10%;
	height:.5%;
	top:50%;
	left:50%;
	-webkit-animation: float-two 3s ease-in-out infinite;
	-webkit-transform: rotateY(5deg) rotateX(5deg) rotateZ(-25deg);
	-moz-animation: float-two 3s ease-in-out infinite;
	-moz-transform: rotateY(5deg) rotateX(5deg) rotateZ(-25deg);
	-ms-animation: float-two 3s ease-in-out infinite;
	-ms-transform: rotateY(5deg) rotateX(5deg) rotateZ(-25deg);
	animation: float-two 3s ease-in-out infinite;
	transform: rotateY(5deg) rotateX(5deg) rotateZ(-25deg);
}
.background .bar5 {
	width:8%;
	height:.3%;
	top:48%;
	left:45%;
	-webkit-animation: float-three 3s ease-in-out infinite;
	-webkit-transform: rotateY(3deg) rotateX(14deg) rotateZ(-10deg);
	-moz-animation: float-three 3s ease-in-out infinite;
	-moz-transform: rotateY(3deg) rotateX(14deg) rotateZ(-10deg);
	-ms-animation: float-three 3s ease-in-out infinite;
	-ms-transform: rotateY(3deg) rotateX(14deg) rotateZ(-10deg);
	animation: float-three 3s ease-in-out infinite;
	transform: rotateY(3deg) rotateX(14deg) rotateZ(-10deg);
}
.background .bar6 {
	width:12%;
	height:.5%;
	top:55%;
	right:5%;
	-webkit-animation: float-one 3s ease-in-out infinite;
	-webkit-transform: rotateY(15deg) rotateX(15deg) rotateZ(6deg);
	-moz-animation: float-one 3s ease-in-out infinite;
	-moz-transform: rotateY(15deg) rotateX(15deg) rotateZ(6deg);
	-ms-animation: float-one 3s ease-in-out infinite;
	-ms-transform: rotateY(15deg) rotateX(15deg) rotateZ(6deg);
	animation: float-one 3s ease-in-out infinite;
	transform: rotateY(15deg) rotateX(15deg) rotateZ(6deg);
}
.background .bar7 {
	width:12%;
	height:.2%;
	top:50%;
	right:1%;
	-webkit-animation: float-three 3s ease-in-out infinite;
	-webkit-transform: rotateY(5deg) rotateX(20deg) rotateZ(16deg);
	-moz-animation: float-three 3s ease-in-out infinite;
	-moz-transform: rotateY(5deg) rotateX(20deg) rotateZ(16deg);
	-ms-animation: float-three 3s ease-in-out infinite;
	-ms-transform: rotateY(5deg) rotateX(20deg) rotateZ(16deg);
	animation: float-three 3s ease-in-out infinite;
	transform: rotateY(5deg) rotateX(20deg) rotateZ(16deg);
}
.background .bar8 {
	width:20%;
	height:.3%;
	top:55%;
	left:2%;
	-webkit-animation: float-two 3s ease-in-out infinite;
	-webkit-transform: rotateY(15deg) rotateX(5deg) rotateZ(-16deg);
	-moz-animation: float-two 3s ease-in-out infinite;
	-moz-transform: rotateY(15deg) rotateX(5deg) rotateZ(-16deg);
	-ms-animation: float-two 3s ease-in-out infinite;
	-ms-transform: rotateY(15deg) rotateX(5deg) rotateZ(-16deg);
	animation: float-two 3s ease-in-out infinite;
	transform: rotateY(15deg) rotateX(5deg) rotateZ(-16deg);
}
.background .bar9 {
	width:8%;
	height:1%;
	top:55%;
	right:45%;
	-webkit-animation: float-one 3s ease-in-out infinite;
	-webkit-transform: rotateY(0deg) rotateX(35deg) rotateZ(6deg);
	-moz-animation: float-one 3s ease-in-out infinite;
	-moz-transform: rotateY(0deg) rotateX(35deg) rotateZ(6deg);
	-ms-animation: float-one 3s ease-in-out infinite;
	-ms-transform: rotateY(0deg) rotateX(35deg) rotateZ(6deg);
	animation: float-one 3s ease-in-out infinite;
	transform: rotateY(0deg) rotateX(35deg) rotateZ(6deg);
}
.background .bar10 {
	width:8%;
	height:.5%;
	top:55%;
	left:35%;
	-webkit-animation: float-two 3s ease-in-out infinite;
	-webkit-transform: rotateY(0deg) rotateX(35deg) rotateZ(36deg);
	-moz-animation: float-two 3s ease-in-out infinite;
	-moz-transform: rotateY(0deg) rotateX(35deg) rotateZ(36deg);
	-ms-animation: float-two 3s ease-in-out infinite;
	-ms-transform: rotateY(0deg) rotateX(35deg) rotateZ(36deg);
	animation: float-two 3s ease-in-out infinite;
	transform: rotateY(0deg) rotateX(35deg) rotateZ(36deg);
}
.background .bar11 {
	width:8%;
	height:1%;
	top:50%;
	right:55%;
	-webkit-animation: float-three 3s ease-in-out infinite;
	-webkit-transform: rotateY(30deg) rotateX(15deg) rotateZ(10deg);
	-moz-animation: float-three 3s ease-in-out infinite;
	-moz-transform: rotateY(30deg) rotateX(15deg) rotateZ(10deg);
	-ms-animation: float-three 3s ease-in-out infinite;
	-ms-transform: rotateY(30deg) rotateX(15deg) rotateZ(10deg);
	animation: float-three 3s ease-in-out infinite;
	transform: rotateY(30deg) rotateX(15deg) rotateZ(10deg);
}
.background .bar12 {
	width:8%;
	height:.5%;
	top:50%;
	left:25%;
	-webkit-animation: float-three 3s ease-in-out infinite;
	-webkit-transform: rotateY(20deg) rotateX(55deg) rotateZ(-36deg);
	-moz-animation: float-three 3s ease-in-out infinite;
	-moz-transform: rotateY(20deg) rotateX(55deg) rotateZ(-36deg);
	-ms-animation: float-three 3s ease-in-out infinite;
	-ms-transform: rotateY(20deg) rotateX(55deg) rotateZ(-36deg);
	animation: float-three 3s ease-in-out infinite;
	transform: rotateY(20deg) rotateX(55deg) rotateZ(-36deg);
}
.middleground .bar1 {
	width:15%;
	height:1.5%;
	top:60%;
	left:25%;
	-webkit-animation: float-three 3s ease-in-out infinite;
	-webkit-transform: rotateY(20deg) rotateX(55deg) rotateZ(-36deg);
	-moz-animation: float-three 3s ease-in-out infinite;
	-moz-transform: rotateY(20deg) rotateX(55deg) rotateZ(-36deg);
	-ms-animation: float-three 3s ease-in-out infinite;
	-ms-transform: rotateY(20deg) rotateX(55deg) rotateZ(-36deg);
	animation: float-three 3s ease-in-out infinite;
	transform: rotateY(20deg) rotateX(55deg) rotateZ(-36deg);
}
.middleground .bar2 {
	width:12%;
	height:0.5%;
	top:40%;
	right:25%;
	-webkit-animation: float-one 3s ease-in-out infinite;
	-webkit-transform: rotateY(20deg) rotateX(0deg) rotateZ(-30deg);
	-moz-animation: float-one 3s ease-in-out infinite;
	-moz-transform: rotateY(20deg) rotateX(0deg) rotateZ(-30deg);
	-ms-animation: float-one 3s ease-in-out infinite;
	-ms-transform: rotateY(20deg) rotateX(0deg) rotateZ(-30deg);
	animation: float-one 3s ease-in-out infinite;
	transform: rotateY(20deg) rotateX(0deg) rotateZ(-30deg);
}
.middleground .bar3 {
	width:12%;
	height:.2%;
	top:45%;
	right:1%;
	-webkit-animation: float-one 3s ease-in-out infinite;
	-webkit-transform: rotateY(50deg) rotateX(50deg) rotateZ(20deg);
	-moz-animation: float-one 3s ease-in-out infinite;
	-moz-transform: rotateY(50deg) rotateX(50deg) rotateZ(20deg);
	-ms-animation: float-one 3s ease-in-out infinite;
	-ms-transform: rotateY(50deg) rotateX(50deg) rotateZ(20deg);
	animation: float-one 3s ease-in-out infinite;
	transform: rotateY(50deg) rotateX(50deg) rotateZ(20deg);
}
.middleground .bar4 {
	width:25%;
	height:.3%;
	top:45%;
	left:2%;
	-webkit-animation: float-two 3s ease-in-out infinite;
	-webkit-transform: rotateY(30deg) rotateX(30deg) rotateZ(20deg);
	-moz-animation: float-two 3s ease-in-out infinite;
	-moz-transform: rotateY(30deg) rotateX(30deg) rotateZ(20deg);
	-ms-animation: float-two 3s ease-in-out infinite;
	-ms-transform: rotateY(30deg) rotateX(30deg) rotateZ(20deg);
	animation: float-two 3s ease-in-out infinite;
	transform: rotateY(30deg) rotateX(30deg) rotateZ(20deg);
}
.middleground .bar5 {
	width:12%;
	height:.5%;
	top:55%;
	left:32%;
	-webkit-animation: float-three 3s ease-in-out infinite;
	-webkit-transform: rotateY(30deg) rotateX(30deg) rotateZ(-10deg);
	-moz-animation: float-three 3s ease-in-out infinite;
	-moz-transform: rotateY(30deg) rotateX(30deg) rotateZ(-10deg);
	-ms-animation: float-three 3s ease-in-out infinite;
	-ms-transform: rotateY(30deg) rotateX(30deg) rotateZ(-10deg);
	animation: float-three 3s ease-in-out infinite;
	transform: rotateY(30deg) rotateX(30deg) rotateZ(-10deg);
}
.middleground .bar6 {
	width:30%;
	height:.2%;
	top:55%;
	right:5%;
	-webkit-animation: float-two 3s ease-in-out infinite;
	-webkit-transform: rotateY(30deg) rotateX(30deg) rotateZ(0deg);
	-moz-animation: float-two 3s ease-in-out infinite;
	-moz-transform: rotateY(30deg) rotateX(30deg) rotateZ(0deg);
	-ms-animation: float-two 3s ease-in-out infinite;
	-ms-transform: rotateY(30deg) rotateX(30deg) rotateZ(0deg);
	animation: float-two 3s ease-in-out infinite;
	transform: rotateY(30deg) rotateX(30deg) rotateZ(0deg);
}
.middleground .bar7 {
	width:23%;
	height:.3%;
	top:55%;
	left:1%;
	-webkit-animation: float-two 3s ease-in-out infinite;
	-webkit-transform: rotateY(50deg) rotateX(50deg) rotateZ(-5deg);
	-moz-animation: float-two 3s ease-in-out infinite;
	-moz-transform: rotateY(50deg) rotateX(50deg) rotateZ(-5deg);
	-ms-animation: float-two 3s ease-in-out infinite;
	-ms-transform: rotateY(50deg) rotateX(50deg) rotateZ(-5deg);
	animation: float-two 3s ease-in-out infinite;
	transform: rotateY(50deg) rotateX(50deg) rotateZ(-5deg);
}
.middleground .bar8 {
	width:15%;
	height:.5%;
	top:55%;
	right:1%;
	-webkit-animation: float-three 3s ease-in-out infinite;
	-webkit-transform: rotateY(30deg) rotateX(50deg) rotateZ(-10deg);
	-moz-animation: float-three 3s ease-in-out infinite;
	-moz-transform: rotateY(30deg) rotateX(50deg) rotateZ(-10deg);
	-ms-animation: float-three 3s ease-in-out infinite;
	-ms-transform: rotateY(30deg) rotateX(50deg) rotateZ(-10deg);
	animation: float-three 3s ease-in-out infinite;
	transform: rotateY(30deg) rotateX(50deg) rotateZ(-10deg);
}
.middleground .bar9 {
	width:5%;
	height:.6%;
	top:55%;
	right:1%;
	-webkit-animation: float-three 3s ease-in-out infinite;
	-webkit-transform: rotateY(60deg) rotateX(30deg) rotateZ(-20deg);
	-moz-animation: float-three 3s ease-in-out infinite;
	-moz-transform: rotateY(60deg) rotateX(30deg) rotateZ(-20deg);
	-ms-animation: float-three 3s ease-in-out infinite;
	-ms-transform: rotateY(60deg) rotateX(30deg) rotateZ(-20deg);
	animation: float-three 3s ease-in-out infinite;
	transform: rotateY(60deg) rotateX(30deg) rotateZ(-20deg);
}


@-webkit-keyframes float-one {
    0%   {
        margin-top:0px;
    }
    50%  {
        margin-top:10px;
    }
    100% {
        margin-top:0px;
    }
}
@-webkit-keyframes float-two {
    0%   {
        margin-top:0px;
    }
    50%  {
        margin-top:12px;
    }
    100% {
        margin-top:0px;
    }
}
@-webkit-keyframes float-three {
    0%   {
        margin-top:0px;
    }
    50%  {
        margin-top:5px;
    }
    100% {
        margin-top:0px;
    }
}


@-moz-keyframes float-one {
    0%   {
        margin-top:0px;
    }
    50%  {
        margin-top:10px;
    }
    100% {
        margin-top:0px;
    }
}
@-moz-keyframes float-two {
    0%   {
        margin-top:0px;
    }
    50%  {
        margin-top:12px;
    }
    100% {
        margin-top:0px;
    }
}
@-moz-keyframes float-three {
    0%   {
        margin-top:0px;
    }
    50%  {
        margin-top:8px;
    }
    100% {
        margin-top:0px;
    }
}


@-ms-keyframes float-one {
    0%   {
        margin-top:0px;
    }
    50%  {
        margin-top:10px;
    }
    100% {
        margin-top:0px;
    }
}
@-ms-keyframes float-two {
    0%   {
        margin-top:0px;
    }
    50%  {
        margin-top:12px;
    }
    100% {
        margin-top:0px;
    }
}
@-ms-keyframes float-three {
    0%   {
        margin-top:0px;
    }
    50%  {
        margin-top:5px;
    }
    100% {
        margin-top:0px;
    }
}


@keyframes float-one {
    0%   {
        margin-top:0px;
    }
    50%  {
        margin-top:10px;
    }
    100% {
        margin-top:0px;
    }
}
@keyframes float-two {
    0%   {
        margin-top:0px;
    }
    50%  {
        margin-top:12px;
    }
    100% {
        margin-top:0px;
    }
}
@keyframes float-three {
    0%   {
        margin-top:0px;
    }
    50%  {
        margin-top:5px;
    }
    100% {
        margin-top:0px;
    }
}

/*--------------- iPAD PORTRAIT --------------*/

@media screen and (max-width: 768px) {

	#featured-projects .ipad {
		left:5%;
		width:90%;
		top:5%;
	}
	#featured-projects .bar {
		display:none !important;
	}
	#featured-projects .project-1 .foreground {
		background:url(../images/tout-foreground-bg.png) center center no-repeat;
		background-size:contain;
	}
	#featured-projects .project-2 .foreground {
		background:url(../images/tout-foreground2-bg.png) center center no-repeat;
		background-size:contain;
	}
	#featured-projects .project-3 .foreground {
		background:url(../images/tout-foreground3-bg.png) center center no-repeat;
		background-size:contain;
	}
	#featured-projects .middleground {
		background:url(../images/tout-middleground-bg.png) center center no-repeat;
		background-size:contain;
	}
	#featured-projects .background {
		background:url(../images/tout-background-bg.png) center center no-repeat;
		background-size:contain;
	}
}
@media screen and (max-width: 508px) {
	.home .foreground .bar {
		display:none;
	}
	#featured-projects .ipad {
		left:5%;
		width:90%;
		top:5%;
	}
	#featured-projects li {
		height: 93%;
		top:0;
	}
}