#story {
	padding-bottom: 5rem;
}

#story-pic-box {
	width: 20rem;
}

#story-bgr {
	transform: translateZ(-6px) scale(1.4);
	padding-bottom: 5rem;
}

#story-bgr .img {
	width: 100%;
}

#story-bgr .color {
	background-color: #1a1612;
	width: 100%;
	height: 30rem;
	position: absolute;
}

#story-pan {
	background-color: #1a1612;
	padding-top: 15rem;
}

#story-pan .bgr {
	background-position: top;
	background-size: 100% auto;
	transform: translateZ(-3px) scale(1.2);
}

#story-pic-box {
	transform: translateZ(2px) translateX(2rem) scale(0.8);
}

#story-pic {
	background-color: #ddd;
	background-image: url(/app/assets/images/home/profile/pic.jpg);
	background-position: center;
	background-size: cover;
	border-radius: 100%;
	padding-bottom: 100%;
}

#story-data-box {
	padding-left: 4rem;
}

#story .home-desc {
	max-width: 500px;
}

#story-br {
	background-image: url(/app/assets/images/home/profile/br_dark_bot.png);
	background-size: 100% auto;
	background-position: top;
	width: 100%;
	height: 30rem;
	position: absolute;
	top: calc(100% - 1px);
	left: 0;
	z-index: 10;
	pointer-events: none;
}

/* Responsive */
@media (max-width: 1000px) {
	#story-bgr {
		padding-bottom: 10rem;
	}

	#story-pic-box {
		transform: translateZ(4px) scale(0.8);
	}

	#story-data-box {
		display: block;
		padding: 4rem 4rem 0 4rem;
		text-align: center !important;
	}

	#story .title-box {
		transform: translateZ(6px) scale(0.8);
	}

	#story .line-box {
		transform: translateZ(5px) scale(0.8);
	}
}

@media (max-width: 550px) {
	#story-pan {
		padding-top: 5rem;
	}

	#story-pan .bgr {
		background-size: 600px auto;
	}

	#story-pic-box {
		width: 15rem;
	}

	#story-data-box {
		padding: 4rem 1rem 0 1rem;
	}

	#story-br {
		background-size: 550px auto;
	}
}