.eri {
	margin:0;
	padding:0;
	overflow-y:scroll;
	overflow-x:hidden;
	background-color:#000;
}

.eri-arrow {
	position:fixed;
	font-size:35px;
	color:#FFFF00;
	 bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
}

#main-piece-eri {
	width:100%;
	height:100%;
	padding:0;
	font-family: 'Average Sans', sans-serif;
	margin:0;
	padding:0;
	font-size:12px;
}


#patterns-intro-1 {
	border-radius: 50%;
	width:200px;
	height:200px;
	background-color:#e0dcd5;
	color:#686868;
	margin-left:750px;
	margin-top:300px;
	
}

#intro-text {
	position:absolute;
	margin-left:20px;
	text-align: justify;
	font-size:15px;
}

.intro-text {
	width:320px;
}



#patterns {
	position:absolute;
	margin-top:-12%;
	margin-left:-620px;
	width:25%;
	height:35%;
}



#machinery-intro {
	margin-top:820px;
	display:block;
	width:100%;
	height:130%;
	z-index:1;
	background-color:#646464;
}

.intro-machinery {
	color:#000;
	width:70%;
	margin:0 auto;
	line-height:16px;
}

#machinery {
	float:right;
	margin-top:65px;
}

#overlay {
	width:470px;
	background-image: url(background.jpg);
	padding-left:10px;
	padding-top:10px;
	padding-bottom:10px;
	padding-right:20px;
}



#perpetuum-mobile-intro {
	width:100%;
	height:100%;
	margin-top:900px;
	padding-top:20px;
	background-color:#000;
}

#perpetuum-intro {
	position:absolute;
	margin-top:380px;
	margin-left:350px;
	animation: moving 40s infinite;	
	color:#d3d3d3;
}

.perpetuum-intro {
	width:400px;
	margin-left:40%;
	padding-bottom:10px;
	text-align: justify;
	
}

#perpetuum {
	margin-left:50px;
	margin-top:20px;
}
.perpetuum {
	width:100%;
	height:100%;
}

@keyframes moving {
    from {transform: translateX(200px);}
    to {transform: translateX(0px);}
}

@media screen and (min-width: 1920px) and (max-width: 2875px) { 
	#patterns {
    position: absolute;
    margin-top: -10%;
    margin-left: -620px;
    width: 15%;
    height: 25%;
	}
}

@media screen and (min-width: 2879px) { 
	#patterns {
    position: absolute;
    margin-top: -10%;
    margin-left: -620px;
    width: 10%;
    height: 20%;
	}
	#machinery {
		    margin-right: 555px;
	}
}

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

	#patterns-intro-1 {
		border-radius: 50%;
width: 200px;
height: 200px;
background-color: #e0dcd5;
color: #686868;
margin-left: 650px;
margin-top: 300px;
	}

}

@media screen and (max-width: 768px) {
	#perpetuum-intro {
		position: absolute;
margin-top: 380px;
margin-left: 200px;
animation: moving 40s infinite; 
color: #d3d3d3;
	}
	#patterns-intro-1 {
		border-radius: 50%;
width: 200px;
height: 200px;
background-color: #e0dcd5;
color: #686868;
margin-left: 350px;
margin-top: 500px;
	}
	#patterns {
		position: absolute;
margin-top: -40%;
margin-left: -320px;
width: 25%;
height: 35%;
	}

}

@media screen and (max-width: 640px) {
	#machinery-intro {
		    width:300%;
		    height:200%;
	}
}