/*** drag and drop ***/
#game-toys,
#game-ingredients,
#game-blossom,
#game-rules,
#community-bingo {
	max-width: 774px; /* 774px; */
	margin: 0 auto;
}

.hidden {
	display: none;
}

.gamearea {
	position: relative;
	width: 100%;
}

#dragdroparea {
	position: relative;
}

.gameimage {
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
}

.dragimage {
	position: absolute;
	cursor: grab !important;
	touch-action: none;
	z-index: 1;
}
#game-toys #bus			{ left: 40%; top: 5%;  }
#game-toys #dinosaurs	{ left: 5%;  top: 8%;  }
#game-toys #doll		{ left: 70%; top: 30%; }
#game-toys #horse		{ left: 6%;  top: 55%; }
#game-toys #kite		{ left: 5%;  top: 32%; }
#game-toys #rabbit		{ left: 47%; top: 56%; }
#game-toys #ship		{ left: 71%; top: 5%;  }
#game-toys #truck		{ left: 38%; top: 38%; }

#game-ingredients #bad1	{ left: 10%; top: 80%; }
#game-ingredients #bad2	{ left: 12%; top: 77%; }
#game-ingredients #bad3	{ left: 7%; top: 65%; }
#game-ingredients #bad4	{ left: 8%; top: 50%; }
#game-ingredients #bad5	{ left: 9%; top: 41%; }
#game-ingredients #bad6	{ left: 10%; top: 30%; }
#game-ingredients #good1	{ left: 70%;  top: 21%; }
#game-ingredients #good2	{ left: 70%; top: 41%; }
#game-ingredients #good3	{ left: 50%;  top: 19%; }
#game-ingredients #good4	{ left: 19%; top: 39%; }
#game-ingredients #good5	{ left: 19%; top: 39%; }

#game-ingredients #bloater	{ left: 8%;  top: 57%; }
#game-ingredients #color	{ left: 38%; top: 29%; }
#game-ingredients #egg		{ left: 75%; top: 62%; }
#game-ingredients #flour	{ left: 70%; top: 18%; }
#game-ingredients #milk		{ left: 6%;  top: 31%; }
#game-ingredients #bloater1	{ left: 40%;  top: 5%; }
#game-ingredients #color1	{ left: 7%; top: 6%; }
#game-ingredients #egg1		{ left: 75%; top: 5%; }
#game-blossom .sprout1 { left: 5%;  top: 48%; }
#game-blossom .sprout2 { left: 38%; top: 48%; }
#game-blossom .sprout3 { left: 70%; top: 48%; }
#game-blossom .sprout4 { left: 23%; top: 65%; }
#game-blossom .sprout5 { left: 55%; top: 65%; }
#game-rules #pig	{ left: 21%; top: 33%; }
#game-rules #cat	{ left: 35%; top: 33%; }
#game-rules #penguin{ left: 46%; top: 33%; }
#game-rules #mouse	{ left: 57%; top: 33%; }
#game-rules #horse	{ left: 70%; top: 30%; }

#dropzone {
	position: absolute;
	display: inline-block;
	transition: .3s ease-in-out;
	border: 4px dashed transparent;
	border-radius: 20px;
	background-color: transparent;
}
#dropzone.dropzoneon {
	border-color: rgb(236, 95, 137);
	background-color: rgba(100, 100, 100, 0.4);
}
#game-toys #dropzone		{ left: 15%; top: 81%; width: 73%; height: 19%; }
#game-ingredients #dropzone { left: 35%; top: 55%; width: 35%; height: 40%; }
#game-rules #dropzone		{ left: 15%; top: 85%; width: 70%; height: 15%; }

.dropimage {
	position: absolute;
}
#game-toys #in-bus		{ left: 28%; bottom: 2%; }
#game-toys #in-dinosaurs{ left: 60%; bottom: 7%; }
#game-toys #in-doll		{ left: 17%; bottom: 2%; }
#game-toys #in-horse	{ left: 24%; bottom: 2%; }
#game-toys #in-kite		{ left: 27%; bottom: 1%; }
#game-toys #in-rabbit	{ left: 60%; bottom: 4%; }
#game-toys #in-ship		{ left: 48%; bottom: 6%; }
#game-toys #in-truck	{ left: 45%; bottom: 2%; }
#game-rules #in-pig		{ left: 21%; top: 76%; }
#game-rules #in-cat		{ left: 35%; top: 76%; }
#game-rules #in-penguin	{ left: 46%; top: 76%; }
#game-rules #in-mouse	{ left: 57%; top: 76%; }
#game-rules #in-horse	{ left: 70%; top: 73%; }

#sharearea {
	position: relative;
}

#game-toys .selectimage {
	position: absolute;
	cursor: pointer !important;
}
#game-toys #sel-bus			{ left: 70%; top: 35%; }
#game-toys #sel-dinosaurs	{ left: 12%; top: 76%; }
#game-toys #sel-doll		{ left: 42%; top: 60%; }
#game-toys #sel-horse		{ left: 5%;  top: 57%; }
#game-toys #sel-kite		{ left: 40%; top: 35%; }
#game-toys #sel-rabbit		{ left: 72%; top: 60%; }
#game-toys #sel-ship		{ left: 5%;  top: 35%; }
#game-toys #sel-truck		{ left: 64%; top: 80%; }

#game-blossom #watertimer {
	position: absolute;
	width: 90%;
	left: 6%;
	top: 95%; 
}
#game-blossom .sprout {
	position: absolute;
	z-index: 1;
}
#game-blossom .sproutclick {
	cursor: pointer !important;
	touch-action: none;
}
#game-blossom #kettle {
	position: absolute;
	transform-origin: -45% -10%;
	z-index: 3;
	animation: tilt 1s infinite linear;
}
@keyframes tilt {
	0%   { transform: rotate(-25deg) translate(-90%, -60%); }
	50%  { transform: rotate(  0deg) translate(-90%, -60%); }
	100% { transform: rotate(-25deg) translate(-90%, -60%); }
}
#game-blossom #watering {
	position: absolute;
	transform: translate(-15%, 10%);
	z-index: 2;
	animation: appear 1s infinite linear;
}
@keyframes appear {
	0%   { opacity: 0; }
	50%	 { opacity: 1; }
	100% { opacity: 0; }
}
 
#game-rules #gamemsg{ position: absolute; left: 7%;   top: 5%;  }
#game-rules #kid	{ position: absolute; left: 5%;   top: 27%; }
#game-rules #light	{ position: absolute; left: 85%;  top: 15%; }
#game-rules #car	{ position: absolute; left: -18%; top: 58%; }
#game-rules #carwrap {
	overflow: hidden;
	width: 97%;
	height: 100%;
	position: absolute;
	top:0;
	left:2%;
}

#endarea, #endarea1 {
	position: relative;
}

#endimage {
	position: absolute;
	left: 35%;
	top: 45%;
	z-index: 10;
}
#playagain, #playagain1 {
	position: absolute; 
	cursor: pointer !important;
}
#game-toys #playagain		{ left: 30%; top: 80%; }
#game-ingredients #playagain{ left: 30%; top: 80%; }
#game-blossom #playagain	{ left: 19%; top: 28%; }
#game-blossom #playagain1	{ left: 10%; top: 45%; }
#game-rules #playagain		{ left: 23%; top: 37%; z-index:1 }

@media only screen and (min-width: 767px) {
	.dragimage:hover,
	.selectimage:hover,
	#endimage,
	#playagain:hover,
	#playagain1:hover {
		filter: drop-shadow(4px 4px 0 white) drop-shadow(-4px -4px 0 white);
		transform: scale(1.05); 
	}
}