/*Startseite STYLE*/
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {	
	#header_title {
		margin-top: 20px;
	}
	
	#header_title h4 {
		display: none;
	}
	
	body 
	{
		overflow: hidden; /* Hide scrollbars */
		overflow-y: auto;
		font-size: 2.3vw;
		background-color: #487cb5;
		color: white;
	}

	h1, h2, h3, h4, h5 {
		color: white;
	}

	button {
		width: 100%;
		height: 70px;
		background-color: #487cb5;
		color: white;
		font-size: 3vw;
		border: none;
	}

	a:link, a:visited
	{
		color:white;
		text-decoration: none;
		font-family: 'Montserrat', sans-serif;
	}

	#header_menu
	{
		padding: 5px;
	}

	#header_menu a, a:link, a:visited
	{
		color:white;
		text-decoration: none;
		font-family: 'Montserrat', sans-serif;
	}
	
	#header_menu b
	{
		font-family: 'Montserrat', sans-serif;
	}

	#header_menu img 
	{
		width: 33%;
	}

	#header_title_s
	{
		margin-top: 0px;
		margin-left: 5px;
		font-family: 'Montserrat', sans-serif;
	}

	#header_title h1
	{
		font-family: 'Montserrat', sans-serif;
	}

	/* Info Buttons über Header */
	.info_buttons
	{		
		position: relative;
		width: 100%;
	}

	.info_buttons img
	{
		width:100%; 
		max-width: 1920px;
	}

	.info_buttons .info_button_mobile1
	{
		display: none;
		position: absolute;
		top: 50%;
		left: 25%;
		transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		background-color: #487cb5;
		color: white;
		font-size: 16px;
		padding: 12px 24px;
		border: none;
		cursor: pointer;
		border-radius: 5px;
		font-family: 'Montserrat', sans-serif;
	}

	.info_buttons .info_button_mobile2
	{
		display: none;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		background-color: #487cb5;
		color: white;
		font-size: 16px;
		padding: 12px 24px;
		border: none;
		cursor: pointer;
		border-radius: 5px;
		font-family: 'Montserrat', sans-serif;
	}

	.info_buttons .info_button_mobile3
	{
		display: none;
		position: absolute;
		top: 50%;
		left: 75%;
		transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		background-color: #487cb5;
		color: white;
		font-size: 16px;
		padding: 12px 24px;
		border: none;
		cursor: pointer;
		border-radius: 5px;
		font-family: 'Montserrat', sans-serif;
	}


	.info_buttons .info_button1
	{
		display: none;
		position: absolute;
		top: 50%;
		left: 25%;
		transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		background-color: #487cb5;
		color: white;
		font-size: 16px;
		padding: 12px 24px;
		border: none;
		cursor: pointer;
		border-radius: 5px;
		font-family: 'Montserrat', sans-serif;
	}

	.info_buttons .info_button2
	{
		display: none;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		background-color: #487cb5;
		color: white;
		font-size: 16px;
		padding: 12px 24px;
		border: none;
		cursor: pointer;
		border-radius: 5px;
		font-family: 'Montserrat', sans-serif;
	}

	.info_buttons .info_button3
	{
		display: none;
		position: absolute;
		top: 50%;
		left: 75%;
		transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		background-color: #487cb5;
		color: white;
		font-size: 16px;
		padding: 12px 24px;
		border: none;
		cursor: pointer;
		border-radius: 5px;
		font-family: 'Montserrat', sans-serif;
	}

	.info_buttons .info_button1:hover, .info_button2:hover, .info_button3:hover 
	{
		background-color: #487bb5;
	}

	.content 
	{
		display: none;
		justify-content: center;
		align-items: center;
		font-family: 'Montserrat', sans-serif;
	}

	.content_mobile
	{
		justify-content: center;
		align-items: center;
		font-family: 'Montserrat', sans-serif;
	}

	video
	{
		max-width: 1020px;
	}

	iframe
	{
		width: 1020px;
		height: 520;
	}

	#overlay1, #overlay2, #overlay3 , #overlay4, #overlay5
	{
		position: fixed; /* Sit on top of the page content */
		display: none; /* Hidden by default */
		width: 100%; /* Full width (cover the whole page) */
		height: 100%; /* Full height (cover the whole page) */
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0,0,0,0.7); /* Black background with opacity */
		backdrop-filter: blur(6px);
		z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
	}

	#overlay_text
	{
		position: absolute;
		top: 50%;
		left: 50%;
		font-size: 50px;
		color: white;
		transform: translate(-50%,-50%);
		-ms-transform: translate(-50%,-50%);
	}

	.table
	{
		max-width:100%;
	}

	/*Bild von Person*/
	#pic_class4
	{
		max-width: 100%;
	}

	#pic_parents
	{
		max-width: 40%;
	}

	#pic_alevels
	{
		max-width: 70%;
	}

	/* Sprechblasen */
	.bubble_left1
	{
		position: relative;
		width: auto;
		height: 50px;
		padding: 0px;
		background: #487cb5;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		border-radius: 10px;
		border: #00007F solid 2px;
	}
	
	.bubble_left1:after
	{
		content: '';
		position: absolute;
		border-style: solid;
		border-width: 12px 27px 12px 0;
		border-color: transparent #487cb5;
		display: block;
		width: 0;
		z-index: 1;
		left: -27px;
		top: 13px;	
	}

	.bubble_left1:before
	{
		content: '';
		position: absolute;
		border-style: solid;
		border-width: 13px 28px 13px 0;
		border-color: transparent #00007F;
		display: block;
		width: 0;
		z-index: 0;
		left: -30px;
		top: 12px;
	}
	.bubble_content
	{
		display: inline;
		position: center;
		justify-content: center;
		align-items: center;
		padding: 5px;
	}

	.bubble_content
	{
		color: white;
	}

	.bubble_content a:link, a:visited
	{
		color: white;
		font-family: 'Montserrat', sans-serif;
	}

	.grid-container {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 1fr 1fr 1fr;
		gap: 0px 0px;
		grid-template-areas:
			"pic bubble1"
			"pic bubble2"
			"pic bubble3"
			"pic bubble4";
	}
	.pic { grid-area: pic; }
	.bubble1 { grid-area: bubble1; }
	.bubble2 { grid-area: bubble2; }
	.bubble3 { grid-area: bubble3; }
	.bubble4 { grid-area: bubble4; }

}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {	
	#header_title {
		margin-top: 20px;
	}
	
	#header_title h4 {
		display: none;
	}
	
	body 
	{
		overflow: hidden; /* Hide scrollbars */
		overflow-y: auto;
		font-size: 2.2vw;
		background-color: #487cb5;
		color: white;
	}

	button {
		width: 100%;
		height: 100px;
		background-color: #487cb5;
		color: white;
		font-size: 3vw;
		border: none;
	}


	h1, h2, h3, h4, h5 {
		color: white;
		font-family: 'Montserrat', sans-serif;
	}

	a:link, a:visited
	{
		color:white;
		text-decoration: none;
		font-family: 'Montserrat', sans-serif;
	}

	#header_menu
	{
		padding: 5px;
	}

	#header_menu a, a:link:, a:visited
	{
		color:white;
		text-decoration: none;
	}

	#header_menu img 
	{
		width: 33%;
	}

	#header_title_s
	{
		margin-top: 0px;
		margin-left: 5px;
		font-family: 'Montserrat', sans-serif;
	}

	/* Info Buttons über Header */
	.info_buttons
	{		

		position: relative;
		width: 100%;
	}

	.info_buttons img
	{
		width:100%; 
		max-width: 1920px;
	}

	.info_buttons .info_button_mobile1
	{
		display: none;
		position: absolute;
		top: 50%;
		left: 25%;
		transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		background-color: #487cb5;
		color: white;
		font-size: 16px;
		padding: 12px 24px;
		border: none;
		cursor: pointer;
		border-radius: 5px;
		font-family: 'Montserrat', sans-serif;
	}

	.info_buttons .info_button_mobile2
	{
		display: none;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		background-color: #487cb5;
		color: white;
		font-size: 16px;
		padding: 12px 24px;
		border: none;
		cursor: pointer;
		border-radius: 5px;
		font-family: 'Montserrat', sans-serif;
	}

	.info_buttons .info_button_mobile3
	{
		display: none;
		position: absolute;
		top: 50%;
		left: 75%;
		transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		background-color: #487cb5;
		color: white;
		font-size: 16px;
		padding: 12px 24px;
		border: none;
		cursor: pointer;
		border-radius: 5px;
		font-family: 'Montserrat', sans-serif;
	}


	.info_buttons .info_button1
	{
		display: none;
		position: absolute;
		top: 50%;
		left: 25%;
		transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		background-color: #487cb5;
		color: white;
		font-size: 16px;
		padding: 12px 24px;
		border: none;
		cursor: pointer;
		border-radius: 5px;
		font-family: 'Montserrat', sans-serif;
	}

	.info_buttons .info_button2
	{
		display: none;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		background-color: #487cb5;
		color: white;
		font-size: 16px;
		padding: 12px 24px;
		border: none;
		cursor: pointer;
		border-radius: 5px;
		font-family: 'Montserrat', sans-serif;
	}

	.info_buttons .info_button3
	{
		display: none;
		position: absolute;
		top: 50%;
		left: 75%;
		transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		background-color: #487cb5;
		color: white;
		font-size: 16px;
		padding: 12px 24px;
		border: none;
		cursor: pointer;
		border-radius: 5px;
		font-family: 'Montserrat', sans-serif;
	}

	.info_buttons .info_button1:hover, .info_button2:hover, .info_button3:hover 
	{
	  background-color: #487bb5;
	}

	.content 
	{
		display: none;
		justify-content: center;
		align-items: center;
		font-family: 'Montserrat', sans-serif;
	}

	.content_mobile
	{
		justify-content: center;
		align-items: center;
		font-family: 'Montserrat', sans-serif;
	}

	video
	{
		max-width: 1020px;
	}

	iframe
	{
		width: 1020px;
		height: 520;
	}

	#overlay1, #overlay2, #overlay3 , #overlay4, #overlay5
	{
		position: fixed; /* Sit on top of the page content */
		display: none; /* Hidden by default */
		width: 100%; /* Full width (cover the whole page) */
		height: 100%; /* Full height (cover the whole page) */
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0,0,0,0.7); /* Black background with opacity */
		backdrop-filter: blur(6px);
		z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
	}

	#overlay_text
	{
		position: absolute;
		top: 50%;
		left: 50%;
		font-size: 50px;
		color: white;
		transform: translate(-50%,-50%);
		-ms-transform: translate(-50%,-50%);
	}

	.table
	{
		max-width:100%;
	}

	/*Bild von Person*/
	#pic_class4
	{
		max-width: 100%;
	}

	#pic_parents
	{
		max-width: 40%;
	}

	#pic_alevels
	{
		max-width: 70%;
	}

	/* Sprechblasen */
	.bubble_left1
	{
		position: relative;
		width: auto;
		height: 125px;
		padding: 0px;
		background: #487cb5;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		border-radius: 10px;
		border: #00007F solid 2px;
	}
	
	.bubble_left1:after
	{
		content: '';
		position: absolute;
		border-style: solid;
		border-width: 12px 27px 12px 0;
		border-color: transparent #487cb5;
		display: block;
		width: 0;
		z-index: 1;
		left: -27px;
		top: 13px;	
	}

	.bubble_left1:before
	{
		content: '';
		position: absolute;
		border-style: solid;
		border-width: 13px 28px 13px 0;
		border-color: transparent #00007F;
		display: block;
		width: 0;
		z-index: 0;
		left: -30px;
		top: 12px;
	}
	.bubble_content
	{
		display: inline;
		position: center;
		justify-content: center;
		align-items: center;
		padding: 5px;
	}

	.bubble_content
	{
		color: white;
	}

	.bubble_content a:link, a:visited
	{
		color: white;
		font-family: 'Montserrat', sans-serif;
	}

	.grid-container {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 1fr 1fr;
		gap: 0px 0px;
		grid-template-areas:
			"pic bubble1"
			"pic bubble2"
			"pic bubble3";
	}
	.pic { grid-area: pic; }
	.bubble1 { grid-area: bubble1; }
	.bubble2 { grid-area: bubble2; }
	.bubble3 { grid-area: bubble3; }
}


/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 768px) {

	body 
	{
		overflow: hidden; /* Hide scrollbars */
		overflow-y: auto;
		font-size: 1vw;
		background-color: #487cb5;
		color: white;
	}

	h1, h2, h3, h4, h5 {
		color: white;
	}	#header_title h4 {
		display: grid;
	}


	button {
		height: auto;
		width: auto;
	}

	#header_title h4 {
		display: grid;
	}

	.info_buttons_mobile
	{ display: none; }

	.content_mobile { display: none; }

	a:link, a:visited
	{
		color:white;
		text-decoration: none;
		font-family: 'Montserrat', sans-serif;
	}

	#header_menu
	{
		padding: 5px;
	}

	#header_menu a, a:link, a:visited
	{
		color:white;
		text-decoration: none;
		font-family: 'Montserrat', sans-serif;
	}

	#header_menu img 
	{
		width: 15%;
	}

	#header_title_s
	{
		margin-top: -55px;
		margin-left: 200px;
		font-family: 'Montserrat', sans-serif;
	}

	#header_title
	{
		margin-top: -50px;
		margin-left: 200px;
		font-family: 'Montserrat', sans-serif;
	}

	/* Info Buttons über Header */
	.info_buttons
	{
		margin-top: 5px;
		position: relative;
		width: 100%;
	}

	.info_buttons img
	{
		width:100%; 
		max-width: 1920px;
	}

	.info_buttons .info_button1
	{
		display: grid;
		position: absolute;
		top: 50%;
		left: 25%;
		max-width: 20%;
		transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		background-color: #487cb5;
		color: white;
		font-size: 14px;
		padding: 12px 24px;
		border: none;
		cursor: pointer;
		border-radius: 5px;
		font-family: 'Montserrat', sans-serif;
	}

	.info_buttons .info_button2
	{
		display: grid;
		position: absolute;
		top: 50%;
		left: 50%;
		max-width: 20%;
		transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		background-color: #487cb5;
		color: white;
		font-size: 14px;
		padding: 12px 24px;
		border: none;
		cursor: pointer;
		border-radius: 5px;
		font-family: 'Montserrat', sans-serif;
	}

	.info_buttons .info_button3
	{
		display: grid;
		position: absolute;
		top: 50%;
		left: 75%;
		max-width: 20%;
		transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		background-color: #487cb5;
		color: white;
		font-size: 14px;
		padding: 12px 24px;
		border: none;
		cursor: pointer;
		border-radius: 5px;
		font-family: 'Montserrat', sans-serif;
	}

	.info_buttons .info_button1:hover, .info_button2:hover, .info_button3:hover 
	{
	  background-color: #487bb5;
	}

	.content 
	{
		display: grid;
		justify-content: center;
		align-items: center;
		font-family: 'Montserrat', sans-serif;
	}

	video
	{
		max-width: 990px;
	}

	iframe
	{
		width: 800px;
		height: 520px;
	}

	#overlay1, #overlay2, #overlay3 , #overlay4, #overlay5
	{
		position: fixed; /* Sit on top of the page content */
		display: none; /* Hidden by default */
		width: 100%; /* Full width (cover the whole page) */
		height: 100%; /* Full height (cover the whole page) */
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0,0,0,0.7); /* Black background with opacity */
		backdrop-filter: blur(6px);
		z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
	}

	#overlay_text
	{
		position: absolute;
		top: 50%;
		left: 50%;
		font-size: 50px;
		color: white;
		transform: translate(-50%,-50%);
		-ms-transform: translate(-50%,-50%);
	}

	.table
	{
		max-width:100%;
	}

	/*Bild von Person*/
	#pic_class4
	{
		max-width: 100%;
	}

	#pic_parents
	{
		max-width: 40%;
	}

	#pic_alevels
	{
		max-width: 50%;
	}

	/* Sprechblasen */
	.bubble_top
	{
		position: relative;
		width: 305px;
		height: 95px;
		padding: 0px;
		background: #487cb5;
		-webkit-border-radius: 18px;
		-moz-border-radius: 18px;
		border-radius: 18px;
		border: #00007F solid 3px;
	}

	.bubble_top:after
	{
		content: '';
		position: absolute;
		border-style: solid;
		border-width: 0 24px 25px;
		border-color: #487cb5 transparent;
		display: block;
		width: 0;
		z-index: 1;
		top: -25px;
		left: 148px;
	}

	.bubble_top:before
	{
		content: '';
		position: absolute;
		border-style: solid;
		border-width: 0 26px 27px;
		border-color: #00007F transparent;
		display: block;
		width: 0;
		z-index: 0;
		top: -30px;
		left: 146px;
	}

	/*Bubble Bottom*/
	.bubble_bottom
	{
		position: relative;
		width: 305px;
		height: 95px;
		padding: 0px;
		background: #487cb5;
		-webkit-border-radius: 18px;
		-moz-border-radius: 18px;
		border-radius: 18px;
		border: #00007F solid 3px;
	}

	.bubble_bottom:after
	{
		content: '';
		position: absolute;
		border-style: solid;
		border-width: 25px 24px 0;
		border-color: #487cb5 transparent;
		display: block;
		width: 0;
		z-index: 1;
		bottom: -25px;
		left: 152px;
	}

	.bubble_bottom:before
	{
		content: '';
		position: absolute;
		border-style: solid;
		border-width: 27px 26px 0;
		border-color: #00007F transparent;
		display: block;
		width: 0;
		z-index: 0;
		bottom: -30px;
		left: 150px;
	}

	/*Bubble Right*/
	.bubble_right
	{
		position: relative;	
		width: 305px;
		height: 105px;
		padding: 0px;
		background: #487cb5;
		-webkit-border-radius: 18px;
		-moz-border-radius: 18px;
		border-radius: 18px;
		border: #00007F solid 3px;
	}

	.bubble_right:after
	{
		content: '';
		position: absolute;
		border-style: solid;
		border-width: 24px 0 24px 25px;
		border-color: transparent #487cb5;
		display: block;
		width: 0;
		z-index: 1;
		right: -25px;
		top: 23px;
	}

	.bubble_right:before
	{
		content: '';
		position: absolute;
		border-style: solid;
		border-width: 26px 0 26px 27px;
		border-color: transparent #00007F;
		display: block;
		width: 0;
		z-index: 0;
		right: -30px;
		top: 21px;
	}

	/*Bubble Left*/
	.bubble_left
	{
		position: relative;
		width: 305px;
		height: 95px;
		padding: 0px;
		background: #487cb5;
		-webkit-border-radius: 18px;
		-moz-border-radius: 18px;
		border-radius: 18px;
		border: #00007F solid 3px;
	}

	.bubble_left:after
	{
		content: '';
		position: absolute;
		border-style: solid;
		border-width: 24px 25px 24px 0;
		border-color: transparent #487cb5;
		display: block;
		width: 0;
		z-index: 1;
		left: -25px;
		top: 23px;
	}

	.bubble_left:before
	{
		content: '';
		position: absolute;
		border-style: solid;
		border-width: 26px 27px 26px 0;
		border-color: transparent #00007F;
		display: block;
		width: 0;
		z-index: 0;
		left: -30px;
		top: 21px;
	}

	.bubble_content
	{
		display: inline;
		position: center;
		justify-content: center;
		align-items: center;
		padding: 5px;
	}

	.bubble_content
	{
		color: white;
	}

}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
	body 
	{
		overflow: hidden; /* Hide scrollbars */
		overflow-y: auto;
		font-size: 1vw;
		background-color: #487cb5;
		color: white;
	}

	h1, h2, h3, h4, h5 {
		color: white;
	}

	button {
		height: auto;
		width: auto;
	}

	a:link, a:visited
	{
		color:white;
		text-decoration: none;
		font-family: 'Montserrat', sans-serif;
	}

	#header_menu
	{
		padding: 5px;
	}

	#header_menu a, a:link, a:visited
	{
		color:white;
		text-decoration: none;
	}

	#header_menu img 
	{
		width: 12.5%;
	}

	#header_title_s
	{
		margin-top: -95px;
		margin-left: 300px;
		font-family: 'Montserrat', sans-serif;
	}

	#header_title
	{
		margin-top: -80px;
		margin-left: 300px;
		font-family: 'Montserrat', sans-serif;
	}

	#header_title h1
	{
		margin-top: 5px;
	}

	/* Info Buttons über Header */
	.info_buttons
	{
		display: grid;
		position: relative;
		width: 100%;
	}

	.info_buttons img
	{
		width:100%; 
		max-width: 1920px;
	}

	.info_buttons .info_button1
	{
		display: grid;
		position: absolute;
		top: 50%;
		left: 25%;
		transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		background-color: #487cb5;
		color: white;
		font-size: 16px;
		padding: 12px 24px;
		border: none;
		cursor: pointer;
		border-radius: 5px;
		font-family: 'Montserrat', sans-serif;
	}

	.info_buttons .info_button2
	{		
		display: grid;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		background-color: #487cb5;
		color: white;
		font-size: 16px;
		padding: 12px 24px;
		border: none;
		cursor: pointer;
		border-radius: 5px;
		font-family: 'Montserrat', sans-serif;
	}

	.info_buttons .info_button3
	{
		display: grid;
		position: absolute;
		top: 50%;
		left: 75%;
		transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		background-color: #487cb5;
		color: white;
		font-size: 16px;
		padding: 12px 24px;
		border: none;
		cursor: pointer;
		border-radius: 5px;
		font-family: 'Montserrat', sans-serif;
	}

	.info_buttons_mobile { display: none; }

	.info_buttons .info_button1:hover, .info_button2:hover, .info_button3:hover 
	{
		background-color: #487bb5;
	}

	.content 
	{
		display: grid;
		justify-content: center;
		align-items: center;
		font-family: 'Montserrat', sans-serif;
	}

	video
	{
		max-width: 1020px;
	}

	iframe
	{
		width: 1020px;
		height: 520;
	}

	#overlay1, #overlay2, #overlay3 , #overlay4, #overlay5
	{
		position: fixed; /* Sit on top of the page content */
		display: none; /* Hidden by default */
		width: 100%; /* Full width (cover the whole page) */
		height: 100%; /* Full height (cover the whole page) */
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0,0,0,0.7); /* Black background with opacity */
		backdrop-filter: blur(6px);
		z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
	}

	#overlay_text
	{
		position: absolute;
		top: 50%;
		left: 50%;
		font-size: 50px;
		color: white;
		transform: translate(-50%,-50%);
		-ms-transform: translate(-50%,-50%);
	}

	.table
	{
		max-width:100%;
	}

	/*Bild von Person*/
	#pic_class4
	{
		max-width: 100%;
	}

	#pic_parents
	{
		max-width: 40%;
	}

	#pic_alevels
	{
		max-width: 50%;
	}

	/* Sprechblasen */
	.bubble_top
	{
		position: relative;
		width: 345px;
		height: 95px;
		padding: 0px;
		background: #487cb5;
		-webkit-border-radius: 18px;
		-moz-border-radius: 18px;
		border-radius: 18px;
		border: #00007F solid 3px;
	}

	.bubble_top:after
	{
		content: '';
		position: absolute;
		border-style: solid;
		border-width: 0 24px 25px;
		border-color: #487cb5 transparent;
		display: block;
		width: 0;
		z-index: 1;
		top: -25px;
		left: 148px;
	}

	.bubble_top:before
	{
		content: '';
		position: absolute;
		border-style: solid;
		border-width: 0 26px 27px;
		border-color: #00007F transparent;
		display: block;
		width: 0;
		z-index: 0;
		top: -30px;
		left: 146px;
	}

	/*Bubble Bottom*/
	.bubble_bottom
	{
		position: relative;
		width: 345px;
		height: 95px;
		padding: 0px;
		background: #487cb5;
		-webkit-border-radius: 18px;
		-moz-border-radius: 18px;
		border-radius: 18px;
		border: #00007F solid 3px;
	}

	.bubble_bottom:after
	{
		content: '';
		position: absolute;
		border-style: solid;
		border-width: 25px 24px 0;
		border-color: #487cb5 transparent;
		display: block;
		width: 0;
		z-index: 1;
		bottom: -25px;
		left: 148px;
	}

	.bubble_bottom:before
	{
		content: '';
		position: absolute;
		border-style: solid;
		border-width: 27px 26px 0;
		border-color: #00007F transparent;
		display: block;
		width: 0;
		z-index: 0;
		bottom: -30px;
		left: 146px;
	}

	/*Bubble Right*/
	.bubble_right
	{
		position: relative;	
		width: 345px;
		height: 95px;
		padding: 0px;
		background: #487cb5;
		-webkit-border-radius: 18px;
		-moz-border-radius: 18px;
		border-radius: 18px;
		border: #00007F solid 3px;
	}

	.bubble_right:after
	{
		content: '';
		position: absolute;
		border-style: solid;
		border-width: 24px 0 24px 25px;
		border-color: transparent #487cb5;
		display: block;
		width: 0;
		z-index: 1;
		right: -25px;
		top: 23px;
	}

	.bubble_right:before
	{
		content: '';
		position: absolute;
		border-style: solid;
		border-width: 26px 0 26px 27px;
		border-color: transparent #00007F;
		display: block;
		width: 0;
		z-index: 0;
		right: -30px;
		top: 21px;
	}

	/*Bubble Left*/
	.bubble_left
	{
		position: relative;
		width: 345px;
		height: 95px;
		padding: 0px;
		background: #487cb5;
		-webkit-border-radius: 18px;
		-moz-border-radius: 18px;
		border-radius: 18px;
		border: #00007F solid 3px;
	}

	.bubble_left:after
	{
		content: '';
		position: absolute;
		border-style: solid;
		border-width: 24px 25px 24px 0;
		border-color: transparent #487cb5;
		display: block;
		width: 0;
		z-index: 1;
		left: -25px;
		top: 23px;
	}

	.bubble_left:before
	{
		content: '';
		position: absolute;
		border-style: solid;
		border-width: 26px 27px 26px 0;
		border-color: transparent #00007F;
		display: block;
		width: 0;
		z-index: 0;
		left: -30px;
		top: 21px;
	}

	.bubble_content
	{
		display: inline;
		position: center;
		justify-content: center;
		align-items: center;
		padding: 5px;
	}

	.bubble_content
	{
		color: white;
	}
}