.creamBg{
	background: #FEF4E8;
}
.bg{
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
}
.qntxt{
	position: absolute;
	top: 0%;
	background: #6E6560;
	color: #fff;
	left: 0%;
	width: 100%;
	padding: 1%;
	font-size: 2vw;
	font-family: sniglet;
}
.diytxt{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	font-family: sniglet;
	font-size: 5vw;
}
.container{
	position: absolute;
	top: 20%;
	width: 40%;
	height: 46%;
	background: #fff;
	border-radius: 1em;
	display: flex;
	flex-wrap: wrap;
}
.leftCont{
	left: 5%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}
.rightCont{
	right: 5%;
}
.rightFstImg{
	position: absolute;
	top: 0%;
	left: 16%;
	width: 67%;
	padding: 1%;
}
.leftFstImg{
	position: relative;
	width: 8%;
	height: 46%;
}
.btmeqncontainerclass{
	position: absolute;
	top: 71%;
	left: 10%;
	width: 80%;
	height: 28%;
	/*background: #f00;*/
}
.eqn{
	position: absolute;
	top: 35%;
	font-size: 7vh;
	font-family: sniglet;
	left: 18%;
}
.numBox{
	position: absolute;
	top: 34%;
	left: 49%;
	width: 13%;
	height: 38%;
	background: #fff;
	border: 2px solid #000;
	border-radius: .5em;
	padding: .5%;
	font-size: 3vw;
}
.arrow{
	position: absolute;
	width: 7%;
	left: 52%;
}
.uparw{
	top: 3%;
}
.downarw{
	bottom: -2%;
}
.check{
	position: absolute;
	top: 36%;
	right: 10%;
	width: 15%;
	color: #fff;
	font-family: sniglet;
	background: #2E4FE1;
	border: 2px solid #152467;
	border-radius: .5em;
	padding: 1%;
}
.check:hover{
	cursor: pointer;
	background: #80a0f0;
	border: 4px solid #b7d4ff;
}
.optionsdiv {
  top: 77%;
  display: flex;
  left: 80%;
  flex-direction: row;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: flex-start;
  text-align: left;
  position: absolute;
  height: 45%;
  width: 75%;
  flex-wrap: wrap;
  transform: translateX(-82%);
}

.optionscontainer {
  width: 50%;
}

.imagestartpos {
  position: absolute;
  width: 13%;
  margin-left: 1%;
  display: none;
  margin-top: 12%;
  left: 72%;
  bottom: 16%;
}

.ispforimage{
	position: absolute;
    width: 21%;
    left: 38%;
    top: 490%;
    display: none;
}

.optionsdiv p {
  padding: 2%;
  background: #926EED;
  border-radius: 15px;
  margin: 1%;
  font-size: 2vw;
  border: 5px solid #926EED;
  font-family: Abeezee;
  width: 75%;
  text-align: center;
  color: #fff;
}

.optimg {
    display: inline;
    border-radius: 15px;
    color: white;
    margin: 0% 1%;
    font-size: 4vmin;
    border: 5px solid #ADAEDB;
    cursor: pointer;
    width: 21%;
}

.forhover:hover {
		background: #ffe599;
    border: 5px solid #ffd966;
    cursor: pointer;
		color: #000;
}
.secRgtImg{
	top: 6%;
	width: 84%;
}
.ben{
	width: 48%;
}
.h34{
	height: 34%;
}
.leftImg{
	position: relative;
	width: 64%;
	top: 2%;
	left: 2%;
	padding: 2%;
	height:93%;
}
.leftImg1{
	position: relative;
	width: 70%;
	top: 12%;
	left: 2%;
	padding: 2%;
	height: 68%;
}
.brds{
	position: relative;
	height: 29%;
	width: 13%;
}
.nb2{
	left: 15%;
}
.nb3{
	left: 70%;
}
.arfst{
	left: 18%;
}
.btmSgn{
	position: absolute;
	font-size: 6vh;
}
.dvSgn{
	left: 34%;
	top: 33%;
}
.eqSgn{
	left: 64%;
	top: 33%;
}
.instrn{
	position: absolute;
	bottom: 100%;
	width: 100%;
	font-size: 3.5vh;
	padding: 1%;
	background: #FFD6A4;
	font-family: sniglet;
}
.rght2{
	right: -2%;
}
.rghtArw{
	left: 73%;
}
.boxnames{
	position: absolute;
	top: 100%;
	left: 0%;
	width: 100%;
}
.smallerCont{
	width: 30%;
}
.instSec{
	bottom:121%;
}

.dragdiv{
	position: absolute;
	top: 65%;
	left: 15%;
	width: 70%;
	height: 12%;
	display: flex;
	flex-flow: row;
	justify-content: space-around;
}
 .dropable{
	 position: absolute;
	 top: 20%;
	 width: 25%;
	 background: #fff;
	 height: 43%;
	 left: 2%;
	 border: 2px solid #000;
	 border-radius: .5em;
}
.dragable{
	position: relative;
	top: 20%;
	width: 25%;
	background: #fff;
	height: 63%;
	border: 2px solid #000;
	border-radius: .5em;
}
.dropName{
  position: absolute;
  top: 100%;
  left: 0%;
  width: 100%;
}
.drop2{
  left: 32%;
}
 .drop3{
  left: 60%;
}
.dragOpn{
  position: relative;
  font-size: 2.5vw;
}

 .drop2{
  left: 38%;
}
 .drop3{
  left: 74%;
}
.dropdiv, .midtxt{
	position: absolute;
	top: 83%;
	left: 15%;
	width: 70%;
	height: 15%;
	background: #fff;
}
.signs{
  position: absolute;
  font-size: 3vw;
}
.sgn1{
  left: 31%;
  top: 17%;
}
.sgn2{
  left: 66%;
  top: 17%;
}
 .arrow:hover{
	cursor: pointer;
}
.dragable:hover{
	cursor: pointer;
	background: #cfe2f3;
	border:4px solid #6fa8dc;
}
.hovered{
	border: 2px dashed #000;
}
.balls{
	position: relative;
	width: 17%;
	height:28%;
}
.drgbOpn, .drgans{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
.drgans{
	color: #fff;
}
@media (min-aspect-ratio: 4/3){
	.mid{
		font-size: 4vw;
	}
	.top_text{
		font-size: 3vw;
	}
	
}
@media (max-aspect-ratio: 4/3){
	.eqn{
		font-size: 5vw;
	}
}