.story-banner
{
	background-image: url('../img/story/bedtimestoryfull.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top center;
	min-height: 100vh;
}

.story-banner .banner-title
{
	margin-top: 40vh;
    font-family: montserrat;
    font-weight: bold;
    font-size: 2.5rem;
    color: white;
	text-align: right;
	margin-bottom: 33vh;
}

.story-banner .banner-title img
{
	width: 35vw;
}

.i02{
	position: relative;
	height: 100vh;
	margin-bottom: -38vh;
	z-index: 30;
	margin-top: 36vh;
}

#i02_flower {
	z-index: 30;
    position: absolute;
    width: 100%;
    bottom: 0;
}

#i02_lolo {
	position: absolute;
    bottom: 42vh;
    right: 26vw;
    width: 22vw;
    z-index: 9;
}

#i02_midgroundflower {
	position: absolute;
    bottom: 6vh;
    right: 0;
    width: 80vw;
    z-index: 0;
}

#i02_rockforeground {
	width: 42vw;
	position: absolute;
	bottom: 10vh;
	z-index: 9;
}

#i02_rockbackground {
	position: absolute;
    bottom: 23vh;
    right: 3vw;
    width: 68vw;
}

#i02_rockmidground {
	width: 100%;
	position: absolute;
	bottom: 18vh;
}

.i03{
	position: relative;
	height: 200vh;
}

#i03_backgroundcave {
	width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

#i03_foregroundleftcave {
	width: 71vw;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

#i03_foregroundrightcave {
	width: 50vw;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 3;
}

#i03_floatingrock {
	width: 28vw;
    position: absolute;
    bottom: 7vh;
    left: 20vw;
    z-index: 4;
}

#i03 {
	width: 76vw;
    position: absolute;
    bottom: 38vh;
    left: 15vw;
    z-index: 6;
}

.i04{
	position: relative;
	height: 309vh;
}

#i04_cottoncandy1layer {
	z-index: 4;
    position: absolute;
    width: 80vw;
	top: 0;
	right: 0;
}

#i04_cottoncandy2layer {
	z-index: 3;
    position: absolute;
    width: 80vw;
	top: 0;
	right: 0;
}

#i04_cottoncandy3layer {
	z-index: 2;
    position: absolute;
    width: 80vw;
	top: 0;
	right: 0;
}

#i04_beanstalk_full {
	z-index: 2;
    position: absolute;
    width: 90vw;
	bottom: 0;
	right: 0;
}

#i04_beanstalk {
	z-index: 2;
    position: absolute;
    width: 37vw;
    bottom: 88vh;
    right: 20vw;
}

#i04_foregroundbeanstalk {
	z-index: 4;
    position: absolute;
    width: 90vw;
	bottom: 0;
	right: 0;
}

#i04_lolo {
	width: 55vw;
    position: absolute;
    bottom: 33vh;
    left: 8vw;
    z-index: 3;
}

#i04_vovo {
	width: 23vw;
    position: absolute;
    top: 118vh;
    right: 5vw;
    z-index: 6;
}

.i05 {
	position: relative;
	height: 150vh;
}


#i05_frontleftcloud {
	width: 55vw;
    position: absolute;
    top: -60vh;
    left: 0;
    z-index: 5;
}

#i06_midcloud{
	width: 100%;
    position: absolute;
    top: -80vh;
    left: 0;
    z-index: 4;
}

#i05_frontrightcloud{
	width: 55vw;
    position: absolute;
    top: -67vh;
    right: 2vw;
    z-index: 7;
}

#i05_ribbonback{
	width: 59vw;
    position: absolute;
	bottom: -11.5vh;
    top: auto;
    z-index: 0;
    right: 0;
}

#i05_ribbonfront{
	width: 90vw;
    position: absolute;
    top: -56.2vh;
    right: 0;
    z-index: 4;
}

#i05_ribbonfrontdustt{
	position: absolute;
    top: 34vh;
    right: 3.5vw;
    width: 80vw;
    z-index: 10;
}

#i05_lolovovo{
    right: 10vw;
    top: 23vh;
    position: absolute;
    z-index: 9;
    width: 62vw;
}

#i05_aurora{
	left: 0;
    bottom: -1.1vh;
    position: absolute;
    z-index: 1;
    width: 100%;
}

.text {
	color: white;
	text-align: center;
    position: absolute;
}


.i01-text-1 {
    top: 78vh;
    right: 3vw;
}

.i01-text-2 {
	top: 97vh;
	left: 0;
}

.i02-text-1 {
	left: 0;
	right: 0;
	top: 0;
}

.i03-text-2 {
	top: 7vw;
    left: 0;
    right: 0;
    z-index: 31;
}

.i03-text-3 {
	bottom: 25vh;
    right: 23vw;
}

.i04-text-1 {
	top: -35vh;
    left: 12vw;
    z-index: 8;
    padding: 15vh 5vw 7vh 0;
    background-image: url(../img/story/cloud-new.png);
    background-size: cover;
    width: 40vw;
    height: 39vh;
}

.i04-text-2 {
	right: 0;
    top: 90vh;
    z-index: 9;
    background-image: url(../img/story/cloud-new-2.png);
    background-size: cover;
    padding: 20vh 6vw 7vh 0;
    width: 55vw;
    height: 52vh;
}

.i04-text-3 {
	left: 36vw;
    bottom: 40vh;
    z-index: 9;
}

.i05-text-1 {
	top: 25vh;
    left: 25vw;
    z-index: 9;
}

.story-content,
.container-fluid.story-content
{
	background-image: url('../img/story/content_bg.png');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top center;
	padding: 7.5rem 0 0 0;
}
.container-fluid.story-content .container
{
}

.graphic1
{
	max-width: 100%;
}

.story-cloud
{
	position: relative;
	margin-bottom: 32.5%;
	
}
.story-cloud img
{
	display: block;
	max-width: 100%;
}
.story-cloud .cloud
{
	position: relative;
}
.story-cloud .cloud .info
{
	position: absolute;
	width: 70%;
	height: 100%;
	top: 47.5%;
	left: 18%;
	font-family: montserrat;
	font-weight: 500;
	/* font-size: 1.5rem; */
	font-size: 1.4rem;
	color: #022f4b;
	text-align: center;
}
.story-cloud .path
{
	display: block;
	position: absolute;
	top: 80%;
	left: 20%;
}

.story-cloud.cloud2
{
	margin-bottom: 0%;
}
.story-cloud.cloud2 .path
{
	position: absolute;
	top: 35%;
	left: -35%;
}

.story-cloud.cloud3
{
	margin-bottom: -12.5%;
}
.story-cloud.cloud3 .path
{
	position: absolute;
	top: 70%;
	left: 65%;
}
.story-cloud.cloud3 .info
{
	width: 65%;
	top: 38.5%;
	left: 13%;
	font-size: 1.5rem;
	text-align: left;
}

.story-cloud.cloud4
{
	margin-bottom: 0%;
}
.story-cloud.cloud4 .info
{
	width: 65%;
	top: 40%;
	left: 25%;
	font-size: 1.5rem;
	text-align: left;
}

.graphic2
{
	position: relative;
	width: 100%;
	text-align: center;
}

.graphic2_bed
{
	position: relative;
	width: 50%;
	margin-top: -7.5%;
	z-index: 2;
}

.graphic2_cloud
{
	position: relative;
	width: 100%;
	margin-top: -11%;
	margin-bottom: -6%;
}

/* Small Desktop Style */
@media (max-width: 1200px)
{
	.story-cloud .cloud .info
	{
		font-size: 1.2rem;
	}
	
}

/* Non-desktop Style */
@media (max-width: 992px)
{
	.story-cloud,
	.story-cloud.cloud1,
	.story-cloud.cloud2,
	.story-cloud.cloud3,
	.story-cloud.cloud4
	{
		margin: 2rem auto;
	}
	
	.story-cloud .path
	{
		display: none;
	}
	
	.graphic2_bed
	{
		width: 70%;
		margin-top: 0%;
	}
}

/* Mobile Style */
@media (max-width: 768px)
{
	.story-banner
	{
		min-height: 40vh;
		margin-top: 85px;
		background-position: -100vw;
	}

	.story-banner .banner-title
	{
		margin-top: 16vh;
		font-size: 1.5rem;
		text-align: center;
		margin-bottom: 65vh;
	}

	.story-banner .banner-title img {
		width: 80vw;
	}
	
	.story-cloud .cloud .info
	{
		width: 70%;
		height: 100%;
		top: 45%;
		left: 18%;
		font-size: .9rem;
	}
	.story-cloud.cloud3 .info
	{
		width: 70%;
		top: 38.5%;
		left: 10%;
		font-size: .95rem;
	}
	.story-cloud.cloud4 .info
	{
		width: 70%;
		top: 40%;
		left: 20%;
		font-size: .95rem;
	}

	.i02 {
		height: 86vh;
	}

	#i02_lolo {
		bottom: 37vh;
	}

	#i02_flower {
		bottom: 30vh;
	}

	#i02_midgroundflower {
		top: 40vh;
		bottom: auto;
	}

	#i02_rockbackground {
		top: 38vh !important;
	}

	.i03 {
		height: 90vh;
	}

	#i03_floatingrock {
		z-index: 0;
	}

	.i01-text-1 {
		top: 78vh;
		right: 0;
		left: 0;
	}
	
	.i01-text-2 {
		top: auto;
		bottom: -20vh;
		right: 0;
		left: 0;
	}
	
	.i02-text-1 {
		left: 0;
		right: 0;
		top: 0;
	}
	
	.i03-text-2 {
		top: 12vw;
		left: 0;
		right: 0;
	}
	
	.i03-text-3 {
		bottom: 6vh;
		right: 0;
		left: 0;
	}
	
	.i04-text-1 {
		top: -10vh;
		right: 0;
		left: 0;
		width: 100%;
	}
	
	.i04-text-2 {
		right: 0;
		left: 0;
		top: 85vh;
		width: 100%;
	}
	
	.i04-text-3 {
		right: 0;
		left: 0;
		bottom: 45vh;
	}
	
	.i05-text-1 {
		top: 8vh;
		left: 0;
		right: 0;
		padding: 15px;
	}

	.i05 {
		height: 70vh;
	}

	#i04_cottoncandy1layer {
		transform: translateY(5vh);
	}

	#i04_cottoncandy3layer {
		transform: translateY(-5vh);
	}

	#i04_beanstalk {
		top: 39vh;
	}

	#i04_foregroundbeanstalk {
		top: 55vh;
		bottom: auto;
	}

	#i04_lolo {
		bottom: auto;
		top: 45vh;
	}

	#i04_vovo {
		top: 43vh;
	}

	.i04 {
		height: 189vh;
	}

	#i06_midcloud {
		top: -60vh;
	}

	#i05_frontleftcloud {
		top: -50vh;
	}

	#i05_frontrightcloud {
		top: -54vh;
		right: 0;
	}

	#i05_ribbonfront {
		top: -49.2vh;
		width: 100%;
	}

	#i05_ribbonback {
		bottom: 29vh;
	}

	#i05_ribbonfrontdustt {
		top: -24vh;
		width: 90vw;
	}

	#i05_lolovovo {
		top: -27vh;
		width: 70vw;
	}

	#i03_floatingrock {
		top: 46vh;
		bottom: auto;
	}
}

/* Small Mobile Style */
@media (max-width: 330px)
{
	.story-cloud .cloud .info
	{
		width: 70%;
		height: 100%;
		top: 45%;
		left: 18%;
		font-size: .8rem;
	}
	.story-cloud.cloud3 .info
	{
		width: 70%;
		top: 38.5%;
		left: 13%;
		font-size: .85rem;
	}
	.story-cloud.cloud4 .info
	{
		width: 70%;
		top: 40%;
		left: 20%;
		font-size: .85rem;
	}
}