body {
	margin: 0;
	height: 100%; 
}

body:after, body:before {
	content: "";
	display: table;
	clear: both;
}

#chooseflavor {
	display: none;
}

.page1 #chooseflavor {
 	display: block;
 }

 #choosetoppings {
	display: none;
}

.page2 #choosetoppings {
	display: block;
}

#eat {
	display: none;
}

.page3 #eat {
	display: block;
}

.container {
	    padding: 1em;
	    position: absolute;
        top: 10%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        max-width: 60%;
        min-width: 20%;
        margin-top: 1px;
	}


p {
		color: black;
		font-family: 'Quicksand', sans-serif;
		text-align: left;
		text-transform: translate(-50%, -50%);
		font-size: 3vw;
	}


#page1,
#page2,
#page3 {
	width: 100%;
	height: 100%;
	top: 0px;
	position: absolute;
	display: none;
	font-family: sans-serif;
	font-size: 48px;
	color: white;
}

#page1 {
	background-color: #F4E67F;
}

#page2 {
	background-color: #F281E2;
}

#page3 {
	background-color: #7FC1F7;
}

nav {
	position: absolute;
	text-align: center;
	bottom: 10px;
	width: 100%;
}

#icecreamcone {
	/*border: 1px solid red;*/
	display: block;
	top: 3%;
	margin-right: auto;
	margin-left: auto;
	width: 80%;
	height: 70%;
	max-width: 1110px;
	position: relative;

}

#cone {
	/*border: 1px solid blue;*/
	background-image: url(../cone.png);
	background-position: center center;
	background-repeat: no-repeat;
	width: 100%;
	height: 65%;
	background-size: contain;
	position: absolute;
	bottom: 0;
}


#vanilla {
	/*border: 1px solid green;*/
	background-image: url(../vanilla.png);
	background-position: center center;
	background-repeat: no-repeat;
	width: 100%;
	height: 36%;
	background-size: contain;
	position: absolute;
	bottom: 42%;
		display: none;

	

}

#chocolate {
	/*border: 1px solid green;*/
	background-image: url(../chocolate.png);
	background-position: center center;
	background-repeat: no-repeat;
	width: 100%;
	height: 36%;
	background-size: contain;
	position: absolute;
	bottom: 42%;
		display: none;


}

#strawberry {
	/*border: 1px solid green;*/
	background-image: url(../strawberry.png);
	background-position: center center;
	background-repeat: no-repeat;
	width: 100%;
	height: 36%;
	background-size: contain;
	position: absolute;
	bottom: 42%;
	display: none;

}


#vanilla.selected {
	display: block;
}

#chocolate.selected {
	display: block;
}

#strawberry.selected {
	display: block;
}


#flavors {
	/*border: 1px solid green;*/
	bottom: 0px;
	width: 40%;
	height: 25%;
	max-width: 1110px;
	position: absolute;
	left: 30%;
	display: none;

}

.page1 #flavors {
	display: block;
}

@media (max-width: 600px) {
	#flavors {
		width: 50%;
		left: 25%;
		height: 25%;
		position: relative;
		bottom: 0px;
	}

}


#vanillaflavor {
	width: 28%;
	position: relative;
	display: inline-block;
	padding: 2%;
}

@media (max-width: 600px) {
	#vanillaflavor {
	width: 20%;
	position: relative;
	display: inline-block;
	padding: 5.6%;
	}

}

#chocolateflavor {
	width: 28%;
	position: relative;
	display: inline-block;	
	padding: 2%;
}

@media (max-width: 600px) {
	#chocolateflavor {
	width: 20%;
	position: relative;
	display: inline-block;
	padding: 5.6%;
	}

}

#strawberryflavor {
	width: 28%;
	position: relative;
	display: inline-block;
	padding: 2%;

}

@media (max-width: 600px) {
	#strawberryflavor {
	width: 20%;
	position: relative;
	display: inline-block;
	padding: 5.6%;
	}

}




#syrup {
	/*border: 1px solid green;*/
	background-image: url(../syrup.png);
	background-position: center center;
	background-repeat: no-repeat;
	width: 100%;
	height: 21.5%;
	background-size: contain;
	position: absolute;
	bottom: 57.5%;
	display: none;

	

}

#sprinkles {
	/*border: 1px solid green;*/
	background-image: url(../sprinkles.png);
	background-position: center center;
	background-repeat: no-repeat;
	width: 100%;
	height: 30%;
	background-size: contain;
	position: absolute;
	bottom: 46%;
	display: none;


}

#cherry {
	/*border: 1px solid green;*/
	background-image: url(../cherry.png);
	background-position: center center;
	background-repeat: no-repeat;
	width: 103%;
	height: 16%;
	background-size: contain;
	position: absolute;
	bottom: 66%;
	display: none;

}


#syrup.selected {
	display: block;
}

#sprinkles.selected {
	display: block;
}

#cherry.selected {
	display: block;
}


#toppings {
	/*border: 1px solid green;*/
	bottom: 0px;
	width: 40%;
	height: 25%;
	max-width: 1110px;
	position: absolute;
	left: 30%;
	display: none;

}

.page2 #toppings {
	display: block;
}



@media (max-width: 600px) {
	#toppings {
		width: 50%;
		left: 25%;
		height: 25%;
		position: relative;
		bottom: 0px;
	}

}


#syruptopping {
	width: 28%;
	position: relative;
	display: inline-block;
	padding: 2%;
}

@media (max-width: 600px) {
	#syruptopping {
	width: 20%;
	position: relative;
	display: inline-block;
	padding: 5.6%;
	}

}

#sprinklestopping {
	width: 28%;
	position: relative;
	display: inline-block;
	padding: 2%;
}

@media (max-width: 600px) {
	#sprinklestopping {
	width: 20%;
	position: relative;
	display: inline-block;
	padding: 5.6%;
	}

}

#cherrytopping {
	width: 28%;
	position: relative;
	display: inline-block;
	padding: 2%;
}

@media (max-width: 600px) {
	#cherrytopping {
	width: 20%;
	position: relative;
	display: inline-block;
	padding: 5.6%;
	}

}


.page3 #bites

#bite1 {
	/*border: 1px solid green;*/
	background-image: url(../bluedot.png);
	background-position: center center;
	background-repeat: no-repeat;
	width: 100%;
	height: 20%;
	background-size: contain;
	position: absolute;
	bottom: 61%;
	display: none;
}

#bite2 {
	/*border: 1px solid green;*/
	background-image: url(../bluedot.png);
	background-position: center center;
	background-repeat: no-repeat;
	width: 102%;
	height: 20%;
	background-size: contain;
	position: absolute;
	bottom: 69%;
	display: none;
}

#bite3 {
	/*border: 1px solid green;*/
	background-image: url(../bluedot.png);
	background-position: center center;
	background-repeat: no-repeat;
	width: 108%;
	height: 23%;
	background-size: contain;
	position: absolute;
	bottom: 58%;
	display: none;
}

#bite1.selected {
	display: block;
}

#bite2.selected {
	display: block;
}

#bite3.selected {
	display: block;
}


#spoons {
	/*border: 1px solid green;*/
	bottom: 0px;
	width: 40%;
	height: 25%;
	max-width: 1110px;
	position: absolute;
	left: 30%;
	display: none;

}

.page3 #spoons {
	display: block;
}



@media (max-width: 600px) {
	#spoons {
		width: 50%;
		left: 25%;
		height: 25%;
		position: relative;
		bottom: 0px;
	}

}


#spoon1 {
	width: 6%;
	position: relative;
	display: inline-block;
	padding: 13%;
}

@media (max-width: 600px) {
	#spoon1 {
	width: 6%;
	position: relative;
	display: inline-block;
	padding: 5.6%;
	}

}

#spoon2 {
	width: 6%;
	position: relative;
	display: inline-block;
	padding: 13%;
}

@media (max-width: 600px) {
	#spoon2 {
	width: 6%;
	position: relative;
	display: inline-block;
	padding: 5.6%;
	}

}

#spoon3 {
	width: 6%;
	position: relative;
	display: inline-block;
	padding: 13%;
}

@media (max-width: 600px) {
	#spoon3 {
	width: 6%;
	position: relative;
	display: inline-block;
	padding: 5.6%;
	}

}





nav{
	bottom: 50%;
}

button {
	position: absolute;
	width: 40px;
	height: 40px;
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	background-color: transparent;
	border: none;
	outline: none;
}


button#previous {
	left: 3%;
	background-image: url(../previousarrow.png);
}

button#next {
	right: 3%;
	background-image: url(../nextarrow.png);
}


button#vanilla {
	background: url(vanilla.jpeg) center center no-repeat;
}

	}