.cream_bg{
	background: #FAD270;
}
.textblock{
	height: 100%;
	width: 100%;
}
.chaptertitle {
    position: absolute;
    font-size: 6vw;
    font-family: pangolin;
    color: #0B5394;
    top: 38%;
    left: 52%;
}
.bg_full {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.basket1 {
    position: absolute;
    z-index: 1;
    width: 20%;
    top: 73.9%;
    left: 9%;
}
.basket2{
    position: absolute;
    z-index: 1;
    width: 20%;
    top: 73.9%;
    left: 37%;
}
.basket3 {
    position: absolute;
    z-index: 1;
    width: 20%;
    top: 73.9%;
    left: 68%;
}
.top_text {
    position: absolute;
    top: 0;
    width: 100%;
    background: #674EA7;
    left: 0;
    z-index: 2;
    color: #F5E567;
    font-family: abeezee;
    font-size: 2.5vw;
    padding: 1%;
}
.zoomin{
	z-index: 5;
	animation: zoomin1 1s ease-in-out backwards;
}
@keyframes zoomin1 {
	to{transform: scale(1.2);}
}
.line1, .line2, .line3 {
    z-index: 999;
    width: 0%;
    top: 18%;
    left: 10%;
    position: absolute;
    height: 30%;
}
.line2{
	top:32%;
}
.line3{
	top:46%;
}

.pot{
	position: absolute;
	top: 63%;
	height: 35% !important;
	width: 20%;
}
.p_1{
	left: 9%;
}
.p_2{
	left: 37%;
}
.p_3{
	left: 68%;
}
.numbers{
	font-size: 4vw;
	font-family: sniglet;
	color: #45818E;
}
.pot1{
	position: absolute;
	width: 100%;
	left: 0%;
	top: 31%;
	z-index: 10;
}
.numberContainer{
	position: absolute;
	top: 38%;
	left: 4%;
	width: 90%;
	height: 10%;
}
.midtxt{
	position: absolute;
	top: 35%;
	transform: translateY(-35%);
	left: 23%;
	font-family: sniglet;
	font-size: 7vw;
	color: #45818E;
}
.midboxclass{
	position: absolute;
	top: 15%;
	left: 5%;
	background: #fff;
	width: 90%;
	height: 38%;
	border-radius: 2em;
}
.boxtxt_1{
	position: absolute;
	left: 34%;
	font-family: sniglet;
	color: #45818E;
	font-size: 3vw;
}
.boxtxt_2{
	position: absolute;
	font-size: 5vh;
	left: 50%;
	font-family: AbeeZee;
	top: 50%;
	transform: translate(-50%,-50%);
}
.boxtxt_2_sec {
	position: absolute;
	font-size: 3.5vh;
	left: 50%;
	font-family: AbeeZee;
	top: 50%;
	transform: translate(-50%,-50%);
}
.green{
	color: #45818E;
}
.two, .four, .six {
    position: absolute;
    font-family: sniglet;
    font-size: 4vw;
    top: 43%;
    left: 18.5%;
    z-index: 22;
    color: #2397C4;
}
.four{
	top:28%;
	left: 32.5%;
}
.six{
	top:13%;
	left: 48.5%;
}
.eqntxt{
	position: absolute;
	top: 35%;
	transform: translateY(-35%);
	left: 23%;
	font-family: sniglet;
	font-size: 7vw;
	color: #45818E;
	opacity: 0;
}
.fadeIn0{
	animation: fadein 1s linear 0s forwards;
}
.fadeIn1{
	left: 28%;
	animation: fadein 1s linear 1s forwards;
}
.fadeIn2{
	left: 40%;
	animation: fadein 1s linear 2s forwards;
}
.fadeIn3{
	left: 52%;
	animation: fadein 1s linear 3s forwards;
}
@keyframes fadein{
	100%{opacity: 1;}
}

@media screen and (min-aspect-ratio: 4/3) {
	.chaptertitle{
		font-size: 10vmin;
	}
	.numbers{
		font-size: 4vw;
	}
	.top_text{
		font-size: 5.5vmin;
	}
	.midtxt{
		font-size: 7vw;
	}
	.boxtxt_1{
		font-size: 4vw;
	}
	.boxtxt_2 {
    font-size:5vh;
	}
	.boxtxt_2_sec{
		font-size: 3.3vh;
	}
	.eqntxt{
		font-size: 12vh;
	}
}
@media screen and (max-aspect-ratio: 4/3) {
	.chaptertitle{
		font-size: 10vmin;
	}
	.numbers{
		font-size: 4vw;
	}
	.top_text{
		font-size: 5.5vmin;
	}
	.midtxt{
		font-size: 7vw;
	}
	.boxtxt_1{
		font-size: 4vw;
	}
	.boxtxt_2 {
    font-size:2.5vw;
	}
	.boxtxt_2_sec{
		font-size: 1.6vw;
	}
	.eqntxt{
		font-size: 6vw;		
	}
}