:root {
		--ves-color: #451f63;
		--ves_color-neutral: #999999;

		--ves_color-text: #202020;
		--ves_color-text_main: #ff00c8;
		--ves_color-text_ref: var(--ves_color-text);
		

		--ves-color-02: var(--ves-color);
		--ves-color-04: #482066;
		--ves-color-06: #502473;
		--ves-color-08: #592880;
		--ves-color-10: #622b8c;
		--ves-color-12: #6b2f99;
		--ves-color-14: #784d99;
		--ves-color-16: #7b5499;
		--ves-color-18: #7e5c99;
		--ves-color-20: #856b99;
		--ves-color-22: #8c7a99;
		--ves-color-24: #928a99;
		
		--ves-color-26: var(--ves_color-neutral);


}

body, html {

	background-color: white;
		
	/* height: 100%; */
	margin: 0;
	
	color: white;
	font-family: Garamond, serif;
	font-style: normal;
	font-weight: lighter;

	text-decoration: none;

}


.bg {
	/* The image used */
	/* background-image: url("../_resources/00.jpg"); */

	/* Full height */
	height: 100%; 

	/* Center and scale the image nicely */
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.header {
	
	min-height: 100px;
	
	position: sticky;
	position: -webkit-sticky;

	
	border: 0px solid white;

}

.footer {
	
	min-height:30px;
	width: 100%;

	/* background-color: green; */
	border: 0px solid white;

}

.footerImg {

	position: absolute;
	bottom: 10%;
	right: 20px;
	min-height: 17px;
	font-style: normal;
	font-size: 0.75;
	text-align: right;
	
	background-color: rgba(150, 150, 150, 0.4);
	
	padding-left: 10px;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;

}

.logo {
	
	float: left;
	
	margin-top: 30px;
	margin-left: 30px;


	width: 15%;
	min-height: 50px;
	
	/* background-image: url("../_resources/logo.svg"); */
	background-repeat: no-repeat;
	background-size: 100%, 100%;
	
	border: 0px solid black;
}

	
.page {	
	float: right;
	margin-top: 30px;
	margin-right: 30px;
		
	color: var(--ves-color);
	font-size: 1.25em;
	
	border: 0px solid white;
}

.page a:link {
	text-decoration: none;
	font-weight: larger;
	color: var(--ves-color);
}

.page a:visited {
	text-decoration: none;
	font-weight: larger;
	color: var(--ves-color);
}

div.content {

/*
	padding-top: 2%;
	padding-left: 20%;
	padding-right: 20%;
	padding-bottom: 20px
*/

	position: relative;

	/* height:100%; */
	width: 100%; 
	/* padding: 0px; */

	/* background-color: red ; */
	border: 0px solid black;

}


div.motiv_text {
	position: absolute;
	top: 20%;
	left: 20%; /* Adjust these coordinates as needed */
	bottom: 20%;
	right: 20%;
	
	background-color: #f0f0f0;
	padding-top: 7.5%;
	padding-left: 10%;
	padding-right: 10%;
	padding-bottom: 5%;

	border: 0px solid #ccc;
	
	opacity : 0;
	visibility : 1;
	transition:opacity 0.5s, visibility 1s;
	
	z-index: 1; /* Ensure the div is above the image */
}


div.motiv_text_main {

	color: var(--ves_color-text_main);
	text-decoration: none;
	font-style: normal;
	font-size: calc(0.9rem + 0.5vw);
	text-align: left;
	line-height: calc(1.5rem + 0.5vw);
	
	max-height: 75%;
	overflow-y: scroll;
	overflow-y: auto;
	scrollbar-gutter: stable;


	
	border: 0px solid green;
}

div.motiv_text_ref {

	margin-top: 4%;

	color: var(--ves_color-text_ref);
	text-decoration: none;
	font-style: normal;
	font-size: calc(0.25rem + 0.5vw);
	text-align: left;
	line-height: calc(0.6rem + 0.5vw);;
	
	max-height: 15%;
	overflow-y: scroll;
	overflow-y: auto;
	scrollbar-gutter: stable;

	
	border: 0px solid green;
}

div.motiv_text_ref_first {

	margin-top: 8%;

	border: 0px solid green;
}



div.motiv_text_ref a:link, div.motiv_text_ref_first a:link {
	text-decoration: none;
	font-weight: larger;
	color: var(--ves-color);
}

div.motiv_text_ref a:visited, div.motiv_text_ref_first a:visited {
	text-decoration: none;
	font-weight: larger;
	color: var(--ves-color);
}

div.content_img_wrap{
	/* height: 90%; */
	width: 80%;
	position: relative;
	margin-left: 10%;

	border: 0px solid blue;
}

img.content_img {
	/* height: 90%; */
	width: 100%;

	border: 0px solid cyan;
}

div.content_img_wrap:hover .motiv_text {

	opacity: 0.95;
	visibility: visible;
	
	border: 0px solid red;
}

div.content_caption
{
	position: absolute;
	bottom: 7%;
	right: 5%;
	/* width: 90%; */
	
	border: 0px solid green;	
}


div.bgeref {

	position: block;
	font-style: normal;
	font-size: 0.75;
	text-align: right;
	margin-top: 20px;
	margin-bottom: 20px;
}

h1 {
	font-weight: lighter;
	font-size: 1.75em;
}

h2 {
	font-weight: lighter;
	font-size: 1.5em;
}

h3 {
	font-weight: lighter;
	font-size: 1.25em;
}

p {
	font-size: 1.25em;
}

p.para {
	margin-bottom: -1em;
}

span.small {
	font-size: 0.75em;
}

a:link {
	text-decoration: none;
	font-weight: normal;
	color: #BBBBBB;
}

a:visited {
	text-decoration: none;
	font-weight: normal;
	color: #BBBBBB;
}