.background{
	position: absolute;
	top: 0%;
	left: 0%;
	height: 100%;
	width: 100%;
}
.creamBg{
	background: #fdead4;
}
.sp-1{
	padding: 2% 4% 1% 2%;
	top: 30%;
	left: 39%;
}
.sp-2{
	padding: 3% 9% 3% 2%;
	top: 24%;
	left: 19%;
	height: 26%;
	width: 46%;
}
.sp-3{
	padding: 3% 9% 3% 2%;
	top: 16%;
	left: 10%;
	height: 38%;
	width: 53%;
}
.cupContainer{
	position: absolute;
	top: 64%;
	left: 53%;
	width: 45%;
	height: 27%;
	/*background: #f00;*/
	display: flex;
	flex-wrap: wrap;
}
.cups, .cupIntray{
	position: relative;
	width: 15%;
	z-index: 20;
	align-self: center;
}
.traycupcontainer{
	position: absolute;
	top: 61%;
	left: 1%;
	width: 50%;
	height: 38%;
	/*background: #f00;*/
	display: flex;
	flex-wrap: wrap;
}
.trays{
	position: relative;
	width: 50%;
	/*align-self: center;*/
}
.trayImg{
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	align-self: center;
}
.cupsInTray{
	position: absolute;
	left: 8%;
	top: 3%;
	width: 85%;
	height: 82%;
	z-index: 10;
}
.cIt{
	position: relative;
	width: 27%;
}
.textInContainer{
	position: absolute;
	top: 30%;
	left: 30%;
	width: 40%;
	background: #fff;
	opacity: 0.7;
	z-index: 20;
	font-size: 4vh;
	padding: 1%;
	border-radius: .4em;
	text-decoration: #000;
}
.btmeqn1{
	position: absolute;
	top: 68%;
	left: 67%;
	width: 72%;
	color: #fff;
	font-family: AbeeZee;
	font-size: 6vh;
	text-align: left;
	transform: translate(-67%);
}
.top80{
	top: 80%;
	font-size: 2vw;
}
.textBoard{
	position: absolute;
	top: 20%;
	left: 75%;
	width: 76%;
	transform: translateX(-80%);
}
.top2{
	top: 2%;
	color: #000;
}
.top12{
	top: 12%;
	color: #000;
}
.brdTxt{
	position: absolute;
	top: 57%;
	left: 51%;
	width: 68%;
	color: #fff;
	height: 68%;
	transform: translate(-50%,-50%);
	font-size: 3.5vh;
	text-align: left;
	font-family: sniglet;
}
ol{
	position: absolute !important;
	top: 56%;
	left: 54%;
	font-family: sniglet;
	color: #fff;
	text-align: left;
	font-size: 3.5vh;
	width: 69%;
	transform: translate(-50%, -50%);
}
.btmEqnConatiner{
	position: absolute;
	top: 70%;
	height: 23%;
	left: 50%;
	width: 63%;
	display: flex;
	flex-flow: row;
	justify-content: space-evenly;
	/*background: #ff0;*/
	transform: translateX(-50%);
}
.eqnContent{
	position: relative;
	height: 100%;
	width: 19%;
	border:4px solid transparent;
	border-radius: 1em;
	/*background: #f00;*/
}
.topEqnTxt{
	position: absolute;
	font-size: 3vw;
	color: #fff;
	font-family: AbeeZee;
	top: 10%;
	left: 50%;
	transform: translateX(-50%);
}
.btmEqnTxt{
	font-size: 2vw;
	color: #fff;
	font-family: AbeeZee;
	top: 40%;
	left: 50%;
	transform: translateX(-50%);
	opacity: 0;
}
.borderclass{
	border:4px solid #6d9eeb;
	border-radius: 1em;
}
.covertxt{
	position: absolute;
	left: 47%;
	transform: translateX(-50%);
	font-family: sniglet;
	font-size: 4vw;
	top: 5%;
}
.belwTxt{
	position: absolute;
	top: 74%;
	left: 0%;
	font-size: 3vh;
}
.eqTxt{
	width: 100%;
}
@media (min-aspect-ratio: 4/3){
	.mid{
		font-size: 4vw;
	}
	.topEqnTxt{
		font-size: 5vh;
	}
	ol, .btmEqnTxt{
		font-size: 3.5vh;
	}
	.btmeqn1, .eqTxt{
		font-size: 6vh;
	}
	.eqTxt1{
		font-size: 3.8vh;
	}
}
@media (max-aspect-ratio: 4/3){
	ol, .eqTxt1{
		font-size: 1.9vw;
	}
	.eqTxt, .topEqnTxt{
		font-size: 3vw;
	}
	.btmEqnTxt{
		font-size: 2vw;
	 }
}