.animation-container {
	width: 100%;
	height: 500px;
	position: relative;
	overflow: hidden;
}

.inner-box {
	position: absolute;
	z-index: 2;
	top: 0;
	left: 16px;
	width: 355px;
	height: 471px;
	overflow: hidden;
	/* minus 16px from top and left in all child element to adjust the position*/
}

.yellow-box {
	position: absolute;
	z-index: 3;
	background: #ff8873 0 0 no-repeat padding-box;
	width: 262px;
	height: 323px;
	transform: translate(0, 148px);
	border-radius: 70px 0 0 0;
}

.blue-box {
	position: absolute;
	z-index: 2;
	background: #6BB6C2 0 0 no-repeat padding-box;
	border-radius: 70px 0;
	width: 267px;
	height: 451px;
	transform: translate(98px, 0);
}

.girl-box {
	width: 365px;
	height: 471px;
	position: absolute;
	z-index: 4;
	border-radius: 0 0 70px 0;
	transform: translate(0, 0);
	overflow: hidden;
}


.girl-box-resume-img {
	position: absolute;
	z-index: 5;
	transform: translate(0, 500px);
	width: 323px;
	height: 457px;
	background-color: #fff;
}


/* state -1 */
.state-1 {
	animation-name: fake-animation-state-1;
	animation-duration: 7s;
}

.state-1 .yellow-box,
.state-1 .blue-box,
.state-1 .girl-box{
	animation-delay: 5s;
	animation-fill-mode: forwards;
	animation-timing-function: cubic-bezier(.29, -.38, .84, 1);
}

.state-1 .girl-box-resume-img {
	animation-delay: 6s;
	animation-fill-mode: forwards;
	animation-timing-function: cubic-bezier(.21, .55, .44, 1.29);
}

.state-1 .girl-box {
	animation-name: girl-move-left-state-1;
	animation-duration: 0.6s;
}

.state-1 .yellow-box {
	animation-name: yellow-box-turn-circle-to-rectangle-state-1;
	animation-duration: 1s;
}

.state-1 .blue-box {
	animation-name: blue-box-turn-small-to-hide-state-1;
	animation-duration: 1s;
}

.state-1 .girl-box-resume-img {
	animation-name: resume-image-show-state-1;
	animation-duration: 0.6s;
}
.nl .girl-box{ width:358px}
.nl .girl-box img{position: absolute;bottom: 0px;right: 4px;}

@keyframes fake-animation-state-1 {
	0% {}

	100% {}
}

@keyframes girl-move-left-state-1 {
	0% {
		transform: translateX(0px);
	}

	50% {
		transform: translateX(-15px);
	}

	100% {
		transform: translateX(400px);
	}
}

@keyframes yellow-box-turn-circle-to-rectangle-state-1 {
	0% {}

	40% {
		width: 182px;
		height: 184px;
		transform: translate(0, 100px);
		border-radius: 101px;
	}

	60% {
		width: 182px;
		height: 184px;
		transform: translate(0, 100px);
		border-radius: 101px;
	}

	100% {
		width: 322px;
		height: 456px;
		transform: translate(15px, 15px);
		border-radius: 0;
	}
}

@keyframes blue-box-turn-small-to-hide-state-1 {
	0% {}

	40% {
		width: 193px;
		height: 279px;
		transform: translate(98px, 194px);
	}

	60% {
		width: 193px;
		height: 279px;
		transform: translate(98px, 194px);
	}

	100% {
		width: 193px;
		height: 0;
		transform: translate(98px, 460px);
	}
}

@keyframes resume-image-show-state-1 {
	0% {}

	100% {
		transform: translate(0px, 0px);
	}
}

/* state -2 */

.show-img-2 .yellow-box {
	width: 322px;
	height: 456px;
	transform: translate(15px, 15px);
	border-radius: 0;
}

.show-img-2 .blue-box {
	width: 193px;
	height: 0;
	transform: translate(98px, 460px);
}

.show-img-2 .girl-box {
	transform: translateX(400px);
}

.show-img-2 .girl-box-resume-img {
	transform: translate(0px, 0px);
}

.state-2 .yellow-box {
	width: 322px;
	height: 456px;
	transform: translate(15px, 15px);
	border-radius: 0;
}

.state-2 .blue-box {
	width: 193px;
	height: 0;
	transform: translate(98px, 460px);
}

.state-2 .girl-box {
	transform: translateX(400px);
}

.state-2 .girl-box-resume-img {
	transform: translate(0px, 0px);
}

.state-2 {
	animation-name: fake-animation-state-2;
	animation-duration: 7s;
}

.state-2 .yellow-box,
.state-2 .blue-box,
.state-2 .girl-box,
.state-2 .girl-box-resume-img {
	animation-delay: 5s;
	animation-fill-mode: forwards;
	animation-timing-function: cubic-bezier(.12, 1.56, .72, .9);
}

.state-2 .girl-box-resume-img {
	animation-delay: 4.7s;
}

.state-2 .girl-box {
	animation-delay: 6s;
}

.state-2 .girl-box {
	animation-name: girl-move-right-state-2;
	animation-duration: 0.6s;
}

.state-2 .yellow-box {
	animation-name: yellow-box-turn-rectangle-to-circle-state-2;
	animation-duration: 1s;
}

.state-2 .blue-box {
	animation-name: blue-box-turn-hide-to-small-state-2;
	animation-duration: 1s;
}

.state-2 .girl-box-resume-img {
	animation-name: resume-image-hide-state-2;
	animation-duration: 0.6s;
}

@keyframes fake-animation-state-2 {
	0% {}

	100% {}
}

@keyframes girl-move-right-state-2 {
	0% {}

	100% {
		transform: translateX(0);
	}
}

@keyframes yellow-box-turn-rectangle-to-circle-state-2 {
	0% {
		width: 322px;
		height: 456px;
		transform: translate(15px, 15px);
		border-radius: 0;
	}

	40% {
		width: 182px;
		height: 184px;
		transform: translate(0, 100px);
		border-radius: 101px;
	}

	60% {
		width: 182px;
		height: 184px;
		transform: translate(0, 100px);
		border-radius: 101px;
	}

	100% {
		width: 262px;
		height: 323px;
		transform: translate(0, 148px);
		border-radius: 70px 0 0 0;
	}
}

@keyframes blue-box-turn-hide-to-small-state-2 {
	0% {
		width: 193px;
		height: 0;
		transform: translate(98px, 460px);
	}

	40% {
		width: 193px;
		height: 279px;
		transform: translate(98px, 154px);
	}

	60% {
		width: 193px;
		height: 279px;
		transform: translate(98px, 154px);
	}

	100% {
		width: 260px;
		height: 471px;
		transform: translate(98px, 0);
	}
}

@keyframes resume-image-hide-state-2 {
	0% {}

	100% {
		transform: translate(0px, 500px);
	}
}

@media only screen and (max-width: 992px) {
	.girl-box-resume-img {
		left: 0;
	}
	.nl .girl-box img{right: 13px;}

	.box-doted-bg {
		transform: translate(30px, 80px);
	}

	.animation-container {
		width: 361px;
		margin: 0 auto;
        height: 471px;
	}

	.girl-box {
		width:355px;
	}
}

@media only screen and (max-width: 767px) {
	.inner-box {
		left: 0;
	}
	.nl .girl-box img{right: 4px;}
}