@CHARSET "ISO-8859-1";

.storyDiv {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 1000px;
    font-family: 'Roboto', sans-serif;
    padding-right: 40px;
    padding-left: 40px;
    margin-top: 10px;
    margin-right: auto;
    margin-left: auto;
	margin-bottom: 40px;

}

.storyHeadings {
	font-size: 28px;
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    width: fit-content;
    border-radius: 8px;
    height: auto;
    padding: 10px;
    text-align: center;
    margin-bottom: 40px;
	margin-top: 20px;
	color: blue;
	margin-right: auto;
    margin-left: auto;
}

.imgStory1 {
	background: url(../images/story1.png) center no-repeat;
}

.imgStory2 {
	background: url(../images/story2.png) center no-repeat;
}

#story-mid{

    width: fit-content;
    border-radius: 18px;
    height: auto;
	margin-top:20px;
	margin-bottom:20px;
	padding:20px;
	text-align: left;
	background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
}


.story-end-text,
.story-start-text{
	background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
	padding:20px;
    border-radius: 18px;
	width: 100%;
	height: 100%;
}


#story-start,
#story-end{
	display: flex;
    gap: 40px;
    width: 100%;
    border-radius: 18px;
    height: auto;
	text-align: left;
}

.storyDiv p {
	text-align: left;
	font-size: 18px;
}

.storyDiv a {
	display: block;
}

.firstParagraph {
	min-height: 250px;
	width: 100%;
}



.imgStory {
	background-size: contain;
}

@media ( max-width : 1280px) {

}

@media ( max-width : 1024px) {

}

@media ( max-width : 800px) {

}

@media ( max-width : 480px) {

	.storyDiv{
		padding-right: 20px;
    	padding-left: 20px;
	}

	.storyDiv p{
		font-size: 22px;
	}

	.col-md-12{
		padding-right: 0px;
		padding-left: 0px;
	}

	.imgStory {
		height: 300px;
	}

	.firstParagraph p {
		position: relative;
		bottom: 0px;

	}

	.storyHeadings{
		border-radius: 12px;
	}

	.firstParagraph{
		padding-right: 0px;
		padding-left: 0px;
	}

	
#story-start,
#story-end{
	flex-direction: column-reverse;
}
}