#wrapper{
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;

}

.wp{
	position: relative;
	width: 100%;
	height: 100%;
}

.half_screen{
	position: relative;
	height: 50%;
	animation: appear 1s;
}

.ballon{
	height: 85%;
	background-color: #d7ca55; /* #E7E890 */
}

.beack_wp{
	position: relative;
	width: 13%;
	left: 37%;
}

.teacher_wp{
	position: absolute;
	bottom: 0%;
	width: 33%;
	left: 5%;
	top: auto;
	right: auto;
	transition: width 300ms ease-in;
	-webkit-transition: width 300ms ease-in;
	
}

/* ballon top */
.ballon.top{
	position: absolute;
	width: 100%;
	bottom: 0%;
	z-index: 10;
}
.beack_wp.top{
	top: 6%;
}
.teacher_wp.top{
	position: absolute;
	top: 0%;
	right: 0%;
	bottom: auto;
	left: auto;
	width: 33%;
	bottom: auto;
	z-index: 11;
}


@media screen and (min-aspect-ratio: 320/500){
	.teacher_wp{
		width: 28%;
		transition: width 300ms ease-in;
		-webkit-transition: width 300ms ease-in;
	}

}

/* 2/3 */
@media screen and (min-aspect-ratio: 320/480){
	.teacher_wp.top{
		width: 28%;
	}

}