body{	
	margin:0;
	text-align: center;
	overflow:hidden;
}


.label{
	position:fixed;
	width:100%;
	bottom:20px;
	text-align: center;
	font-family:'raleway', sans-serif;
	font-size:11px;
	font-weight:700;
	color:white;
	letter-spacing:2pt;

}

.pageone,
.pagetwo,
.pagethree
{
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	display:none;
}

.pageone{
	background-color:#4cbfa8;
}

.pagetwo{
	background-color:#ccab66;
}

.pagethree{
	background-color:#758d8d;
}

.title{
    position:absolute;
    top:42px;
	width:100%;
	font-family:'raleway', sans-serif;
	font-size:12px;
	font-weight:700;
	color:white;
	letter-spacing:3px;
	opacity:0.5;
}

.step{
	position:absolute;
	top:50px;
	width:100%;
	font-family:'raleway', sans-serif;
	font-size:14px;
	font-weight:700;
	letter-spacing:5px;
	color:white;
	margin-bottom:10px;
}

.circle{
	width:9px;
	height:9px;
	border-radius:10px;
	color:white;
	background:white;
	display:inline-block;
	opacity:0.5;
	margin:5px;	
}


nav{
	position:absolute;
	width:100%;
	margin-top:70px;
}


#cupleft{
	position:absolute;
	width:500px;
	margin-top:87px;
	left:100px;
	opacity:0.2;
}

#cupright{
	position:absolute;
	width:500px;
	margin-top:87px;
	right:100px;
	opacity:0.35;
}

#ingredient1 {
	position:absolute;
	margin-top:92px;
	margin-left:-253px;
	width:500px;
}

#ingredient2 {
	position:absolute;
	margin-top:34px;
	margin-left:-301px;
}

#ingredient3 {
	position:absolute;
	margin-top:67px;
	margin-left:-253px;
	width:500px;
}







#ingredient21{
	position:absolute;
	margin-top:68px;
	margin-left:-294px;
	width:588px;
}

#ingredient22{
	position:absolute;
	margin-top:126px;
	margin-left:-212px;
	width:420px;	
}

#ingredient23{
	position:absolute;
	margin-top:71px;
	margin-left:-308px;
	width: 600px;	
}

#ingredient31{
	position:absolute;
	margin-top:100px;
	margin-left:-288px;
	width:576px;	

}

#ingredient32{
	position:absolute;
	margin-top:131px;
	margin-left:-253px;
	width:510px;	
}

#ingredient33{
	position:absolute;
	margin-top:8px;
	margin-left:-330px;	
}

.circle:hover{
	opacity:1;
}

.p1 .circle.one, .p2 .circle.two, .p3 .circle.three {
	opacity:1;
}

.image-container{
	margin-top:150px;
}








hr.lineone{
	position:absolute;
	top:617px;
	left:598px;
	border:0;
	height:1px;
	background: white;
	width:90px;
}

#basil{
	position:absolute;
	top:619px;
	left:700px;
	font-family:'raleway', sans-serif;
	font-size:11px;
	font-weight:500;
	color:white;
	letter-spacing:2pt;
}

hr.linetwo{
	position:absolute;
	top:358px;
	left:445px;
	border:0;
	height:1px;
	background: white;
	width:90px;	
}

#syrup{
	position:absolute;
	top:360px;
	left:305px;
	font-family:'raleway', sans-serif;
	font-size:11px;
	font-weight:500;
	color:white;
	letter-spacing:2pt;
}

hr.linethree{
	position:absolute;
	top:357px;
	left:550px;
	border:0;
	height:1px;
	background: white;
	width:90px;	
}

#liquor{
	position:absolute;
	top:359px;
	left:652px;
	font-family:'raleway', sans-serif;
	font-size:11px;
	font-weight:500;
	color:white;
	letter-spacing:2pt;
}

@media (max-width: 500px) {
	#ingredient3 {
	position:absolute;
	margin-top:73px;
	margin-left:-214px;
	width:400px;
	}

	#ingredient23{
	position:absolute;
	margin-top:125px;
	margin-left:-208px;
	width:390px;
	}

	#ingredient22{
	position:absolute;
	margin-top:149px;
	margin-left:-185px;
	width:366px;
	}

}







.bigcontainer{
	position:absolute;
	display:block;
	width:700px;
	height:630px;
	top:50%;
	left:50%;
	transform: translate (-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-mox-transform:translate(-50%, -50%);
	color:white;
}