.instruction-1 {
	color: #ffffff;
	background-color: #3d85c6;
	font-family: poppins;
	position: absolute;
	left: 0%;
	top: 0%;
	width: 100%;
	z-index: 15;
	height: 15%;
	font-size: 3.4vw;
}
@media(min-aspect-ratio:4/3){
	.instruction-1{
		font-size: 4.5vh;
	}
}
.drag-drop-container{
	position: absolute;
	top: 17.5%;
	width: 80%;
	left: 10%;
	height: 8%;
}
.drag-item{
	position: absolute;
	width: 15%;
	height: 100%;
	border-radius: 2vmin;
	background-color: #707ed0;
	color: white;
	font-size: 2.8vw;
	font-family: abeezee;
	cursor: pointer;
}
@media (min-aspect-ratio:4/3){
	.drag-item{
		font-size: 3vh;
	}
}
@media (max-aspect-ratio:4/3){
	.drag-item{
		font-size: 1.7vw;
	}
}
.drag-item:hover{
	background-color: #f6b26b;
	border: 0.6vmin solid #e69138;
	color: #434343;
}
.drag-item>p{
	position: absolute;
	left: 5%;
	top: 50%;
	transform: translateY(-50%);
	width: 90%;
	text-align: center;
}
.drag-pos-1{
	left: 5%;
}
.drag-pos-2{
	left: 30%;
}
.drag-pos-3{
	left: 55%;
}
.drag-pos-4{
	left: 80%;
}
.dd-wrapper{
	position: absolute;
	top: 30%;
	left: 10%;
	width: 80%;
	height: 67.5%;
}
.dd-num-container{
	position: absolute;
	width: 48%;
	height: 48%;
	border: 0.5vmin solid #434343;
}

.container-1{
	top: 0%;
	left: 0%;
}
.container-2{
	top: 0%;
	right: 0%;
}
.container-3{
	bottom: 0%;
	left: 0%;
}
.container-4{
	bottom: 0%;
	right: 0%;
}


.dd-numline-block{
	position: absolute;
	bottom: 5%;
	left: 2.5%;
	width: 95%;
	height: 20%;
}
#line-svg{
	width: 100%;
	height: 100%;
	/*z-index: 2;*/
}
.dd-main-line{
	position: absolute;
	top: 45%;
	left: 2%;
	width: 96%;
	height: 2.5%;
	transform: translateY(-50%);
	background-color: black;
	min-height: 2px;
}
.dd-mark-container{
	position: absolute;
	top: 45%;
	left: 2.5%;
	width: 95%;
	height: 50%;
	transform: translateY(-50%);
}

.dd-label-container{
	position: absolute;
	top: 60%;
	left: 2.5%;
	width: 95%;
	height: 20%;
	transform: translateY(-50%);
}
.mark-element{
	position: absolute;
	width: 4.5%;
	height: 100%;
	top: 0%;
	transform: translateX(-50%);
}
.mark-line{
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 0%;
	height: 100%;
	width: 0.1vw;
	background-color: black;
}
.dd-numline-block .mark-element>p{
	position: absolute;
	text-align: center;
	left: 0%;
	top: 110%;
	width: 100%;
	font-size: 1vw;
}

@media(min-aspect-ratio:4/3){
	.dd-numline-block .mark-element>p{
		font-size: 1.6vh;
	}
}

.mark-hollow-circle, .mark-filled-circle{
	position: absolute;
	left: 50%;
	top: 50%;
	width: 80%;
	height: 70%;
	border: 0.3vmin solid #44546a;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	z-index: 5;
}
.mark-filled-circle{
	background-color: #000000;
}
.slanted-line{
	position: absolute;
	width: 0.2vw;
	bottom: 50%;
	left: 50%;
	background-color: #44546a;
	transform-origin: 50% 100%;
}
.straight-line{
	position: absolute;
	width: 0.2vw;
	bottom: 50%;
	left: 50%;
	height: 250%;
	transform: translateX(-50%);
	background-color: #44546a;
}
.roof-1{
	position: absolute;
	transform: translateY(50%);
	height: 200%;
	width: 500%;
	bottom: 300%;
}
.roof-1>p{
	position: absolute;
	bottom: 50%;
	width: 100%;
	text-align: center;
	font-size: 2vw;
	font-weight: normal;
}
.roof-1>img, .roof-1>svg{
	position: absolute;
	top: 50%;
	height: 25%;
	transform: translateY(-50%);
	width: 100%;
	left: 0%;
}
@media(min-aspect-ratio:4/3){
	.small-text{
		font-size: 2.8vh;
	}
}
.mark-container-2{
	overflow: visible;
}

.droppable-container{
	position: absolute;
	bottom: 50%;
	width: 25%;
	border-radius: 2vmin;
	border: 0.4vmin solid #666666;
	height: 25%;
}


.solution-box{
	position: absolute;
	background-color: #89d457;
	border: 0.5vmin solid #cdeb58;
	color: white;
	font-size: 2.3vw;
	font-family: abeezee;
}
@media(min-aspect-ratio:4/3){
	.solution-box{
		font-size: 3.1vh;
	}
}
.solution-box>p{
	position: absolute;
	left: 5%;
	top: 50%;
	transform: translateY(-50%);
	width: 90%;
	text-align: center;
}
.wrapper-2{
	top: 15%;
}
.instruction-small{
	height: 10%;
	padding: 1%;
}
.practice-more{
	position: absolute;
	bottom: 2%;
	padding: 1% 3%;
	left: 50%;
	transform: translateX(-50%);
	background-color: #5b9bd5;
	border: 0.5vmin solid #1f4e79;
	font-size: 2.5vw;
	font-family: poppins;
	cursor: pointer;
}
@media(min-aspect-ratio:4/3){
	.practice-more{
		font-size: 3.3vh;
	}
}
.practice-more:hover{
	filter: brightness(150%);
	-webkit-filter: brightness(150%);
}
.cor-incor {
	display: none;
	position: absolute;
	width: 50%;
	left: 25%;
	bottom: 105%;
}