/* GLOBAL 
============================*/

/* Import (Fonts) */

@import url('https://fonts.googleapis.com/css?family=Oxygen');
*@import url('https://fonts.googleapis.com/css?family=Roboto');
/* @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&family=Roboto&display=swap'); */


/* Variables */
:root {
	--grau1: #A4A4A4;
	--seccolor: pink;
}


/* Box Content Orientation */
* {
	box-sizing: border-box;
}

iframe {
	max-width: 99%;
  }
  


/* Typo
============================*/

p {
	font-family: 'Arial', sans-serif;
	font-size: 0.8em;
	color: rgb(0, 0, 0);
	line-height: 1.5em;
}
@media screen and (min-width: 601px) {
	p {
	font-size: 1.25em;
	}
}
@media screen and (min-width: 801px) {
	p {
	font-size: 1em;
	}
}




ul {
	font-family: 'Arial', sans-serif;
	font-size: 0.8em;
	color: rgb(0, 0, 0);
	line-height: 1.5em;
}
@media screen and (min-width: 601px) {
	ul {
	font-size: 1.25em;
	}
}
@media screen and (min-width: 801px) {
	ul {
	font-size: 1em;
	}
}






.navi {
	font-weight: regular; 



	line-height:2.5em;
	font-size: 1.0em;
	color: rgb(0, 0, 0);
}
@media screen and (min-width: 601px) {
	.navi {
font-size: 1.1em;
	}
}
@media screen and (min-width: 801px) {
	.navi {
font-size: 1.2em;
	}
}
@media screen and (min-width: 1001px) {
	.navi {
font-size: 1.25em;
	}
}








.icons {
	font-family: 'Arial', sans-serif;
	font-size: 6.5vw;
	color: rgb(0, 0, 0);
	line-height: 1.5em;
}
@media screen and (min-width: 601px) {
	.icons {
font-size: 4.5vw;
	}
}
@media screen and (min-width: 801px) {
	.icons {
font-size: 4vw;
	}
}
@media screen and (min-width: 1001px) {
	.icons {
font-size: 2.5vw;
	}
}



.small {
	font-family: 'Arial', sans-serif;
	font-size: 0.6em;
	color: rgba(121, 121, 121, 0.85);
	line-height: 1.5em;
}
@media screen and (min-width: 601px) {
	.small {
	font-size: 0.7em;
	}
}
@media screen and (min-width: 801px) {
	.small {
	font-size: 0.8em;
	}
}


h1 {
	font-family: 'Arial', sans-serif;
	line-height: 1em;
	font-size: 1.5em; 
	color:rgb(63, 63, 63); 
	letter-spacing: 0.0em;
}
@media screen and (max-width: 601px) {
	h1 {
		line-height: 1em;
		font-size: 1.5em; 
		color:rgb(63, 63, 63); 
		letter-spacing: 0.0em;
	}
}





.topfont {
	font-family: 'Arial', sans-serif;
	font-size: 1.3em;
	color: rgba(63, 63, 63, 0.3);
	line-height: 1.2em;
}
@media screen and (min-width: 601px) {
	.topfont {
	font-size: 1.5em;
	}
}
@media screen and (min-width: 801px) {
	.topfont {
	font-size: 1.9em;
	}
}
@media screen and (min-width: 1001px) {
	.topfont {
	font-size: 1.7em;
	}
}
@media screen and (min-width: 1201px) {
	.topfont {
	font-size: 2.0em;
	}
}




.newsstrip {
	font-size:0.7em; 
	color: white;
	text-align: right;
	padding-top: 0.25em;
	padding-bottom: 0.725em;
	margin-right:auto; 
	margin-left: 0em; 
	padding-left: 2em; 
	margin-top:-3em; 
	margin-bottom:0em; 
	background-color: rgb(0, 0, 0);
}
@media screen and (min-width: 601px) {
	.newsstrip {
	font-size: 0.9em;
	text-align: right;
	padding-top: 0.25em;
	padding-bottom: 1.725em;
	padding-left: 0em;
	margin-right:auto; 
	margin-left:auto; 
	margin-top:-3em; 
	margin-bottom:0em; 
	/* background-color: rgb(80, 84, 88); */
	}
}
@media screen and (min-width: 801px) {
	.newsstrip {
	font-size: 1.0em;
	text-align: right;
	padding-left: 0em;
	}
}



a:link, a:visited {
	color: rgb(0, 0, 0);
	/* font-weight: bold; */
	text-decoration: underline;
}

a:hover, a:active {
	color: rgb(255, 0, 0);
	/* text-decoration: underline; */
}



.ltop {
	color: rgb(0, 0, 0);
	font-family: 'Arial', sans-serif;
	font-size: 0.8em;
}


.ltop a:link, a:visited {
	color: rgb(0, 0, 0);
	font-weight: bold;
	text-decoration: underline;
	font-family: 'Arial', sans-serif;
	font-size: 0.8em;
}	
@media screen and (min-width: 601px) {
	.ltop a:link, a:visited {
	font-size: 0.9em;
	}
}
@media screen and (min-width: 801px) {
	.ltop a:link, a:visited {
	font-size: 1.0em;
	}
}


.ltop a:hover, a:active {
	color: rgb(255, 0, 0);
	text-decoration: underline;
}








h1 a:link, a:visited {
	color: rgb(0, 0, 0);
	/* font-weight: bold; */
	text-decoration: none;
}

h1 a:hover, a:active {
	color: rgb(255, 0, 0);
	text-decoration: underline;
}


hr {
	border-top: 1px solid rgb(212, 212, 212);
}





/* Media Elements
============================*/

/* IMG */


img {
	max-width: 100%;
	height: auto;
}


.img_small {
	width: 40%;
	max-width: 15em;
}
@media screen and (max-width: 601px) {
	.img_small {
		width: 40%;
	}
}


.img_verysmall {
	width: 25%;
	max-width: 11em;
}
@media screen and (max-width: 801px) {
	.img_verysmall {
		width: 30%;
		max-width: 12em;
	}
}


.img_medium {
	display: block;
	width: 100%;
	max-width: 100%;
	padding-left: 1%;
	padding-right: 1%;
}
@media screen and (max-width: 401px) {
	.img_medium {
		display: block;
		width: 100%;
		max-width: 100%;
		padding-left: 0%;
		padding-right: 0%;
	}
}

/*
.myimg {
	width: 80%;
	max-width: 25em;
	height: auto;
}
@media screen and (max-width: 601px) {
	.myimg {
		max-width: 30em;
		width: 100%;
	height: auto;
	}
}
*/


/* VIDEO */

.myvid {
	display:block; 
	width: 100%;
	max-width: 30em;
	height: auto;
	margin-left:auto; 
	margin-right: auto;
}
@media screen and (max-width: 601px) {
	.myvid {
		display:block;
		width: 100%;
		max-width: 30em;		
		height: auto;
		margin-left:auto; 
		margin-right: auto;
	}
}



.mutevid {
	/* display:block; */
	width: 30%;
	max-width: 30em;
	height: auto;
	margin-left:auto; 
	margin-right: auto;
}
@media screen and (max-width: 601px) {
	.mutevid {
		/* display:block; */
		width: 40%;
		max-width: 30em;		
		height: auto;
		margin-left:auto; 
		margin-right: auto;
	}
}


.frontvideo {
	/* display:block; */
	width: 100%;
	max-width: 100%;
	height: auto;
	margin-left:auto; 
	margin-right: auto;
	margin-top: 0em;
}
@media screen and (max-width: 601px) {
	.frontvideo {
		/* display:block; */
		width: 100%;
		max-width: 100%;		
		height: auto;
		margin-left:auto; 
		margin-right: auto;
		margin-top: 0em;
	}
}


/* SECTIONS - BODY - HEADER - FOOTER
======================================*/

body {
	font-family: 'Arial', sans-serif;
	text-align: left;
	margin-left: 0em;
	margin-right: 0em;
	margin-bottom: 0em;
	margin-top: 0em;
	background-color:rgba(65, 70, 77, 1);
}



header {
	width: 100%;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0em;
	padding-top: 0em;
	background-color: white;
}
@media screen and (min-width: 1001px) {
	header {
		width: 66%;
		max-width: 66%;
		margin-left: auto;
		margin-right: auto;		
	}
}
.frontheaderimg {
	width: 100%;
	max-width:61em;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0em;
	display: block;	
}
@media screen and (min-width: 1001px) {
	.frontheaderimg {
	width: 100%;
	max-width: 66em; /* 45 */
	margin-top: 0em;
	margin-left: auto;
	margin-bottom: 0em;
	margin-right: auto;	
	display: block;
	}
}

.headerimg {
	width: 100%;
	max-width:45em;
	margin-left: auto;
	margin-bottom: 0em;
	margin-right: auto;
	display: block;	
}
@media screen and (min-width: 1001px) {
	.headerimg {
	width: 100%;
	max-width: 47em;
	margin-top: 0em;
	margin-left: auto;
	margin-bottom: 0em;
	margin-right: auto;	
	display: block;
	}
}



.footerr {
	background-color: rgb(49, 49, 49);
	margin-left: 0em;
	margin-right: 0em;
	margin-top: -2em;
	padding-bottom: 4em;
	padding-top: 2em;
	padding-left: 1em;
	color: var(--grau1);
	font-size: 0.8em;
}
@media screen and (min-width: 1001px) {
	.footerr {
		padding-left: 17%;
	}
}

.ul_footer {
	list-style-type: none;
	margin-left: 0em;
	padding-left: 0em;
	line-height: 1.75em;
	color: rgb(164, 164, 164);
}
@media screen and (max-width: 601px) {
	.ul_footer {
		padding-left: 1em;
	}
}
a.ul_footer:link, a.ul_footer:visited {
	color: rgb(164, 164, 164);
	text-decoration: none;
	padding-left: 0;
}
a.ul_footer:hover, a.ul_footer:active {
	color: rgb(255, 0, 0);
	text-decoration: underline;
	padding-left: 0;
}




/* SECTIONS - DIVS - CONTAINERS
======================================*/

.section_1 {
	/*
	margin-left: 17%;
	margin-right: 17%;
	width: 66%;
	*/
	margin-left: 17%;
	margin-right: 17%;
	width: 66%;

	max-width: 66em;
	
	padding-top: 1.5em;
	padding-left: 8%;
	padding-right: 8%;
	background-color:rgb(255, 255, 255); 
/* background-color:rgb(80, 86, 181); */

}
@media screen and (max-width: 1001px) {
	.section_1 {
		margin-left: 0em;
		margin-right: 0em;
		padding-left: 1em;
		padding-right: 1em;
		width: 100%;
	}
}


.section_2 {
	width: 100%;
	margin-top: 0em;
	margin-left: auto;
	margin-right: auto;
	padding-top: 1em;
	padding-left: 0em;
	padding-right: 0em;
	/* background-color: #888; */
}
@media screen and (min-width: 801px) {
	.section_2 {
	width: 100%;
	margin-top: 0em;
	margin-left: auto;
	margin-right: auto;
	padding-top: 1em;
	padding-left: 0em;
	padding-right: 0em;	
	}
}



@media screen and (max-width: 575px) {
	.section_bignav {display: none;}
	.section_smallnav {display: block;}
	.section_bignav-spacer {display: none;}
	.section_hugenav {display: none;}
}

@media screen and (min-width: 575px) {
	.section_bignav {display: block;}
	.section_smallnav {display: none;}
	.section_bignav-spacer {display: block;}
	.section_hugenav {display: none;}
}

@media screen and (min-width: 1051px) {
	.section_hugenav {display: block;}
	.section_bignav {display: none;}
	.section_smallnav {display: none;}
	.section_bignav-spacer {display: block;}
}


.section_smallnav {
		/*width: 22em;*/
		width: 100%;
		margin-top: 0em;
		margin-left: auto;
		margin-right: auto;
		padding-top: 0em;
		/* background-color: rgb(90, 47, 47); */
	}

.section_bignav {
		width: 100%;
		margin-top: 2em;
		
		margin-left: auto;
		margin-right: auto;
		left: 0;
		right: 0;
		text-align: center;
		
		padding-top: 0em;

		position: absolute;
 /* left: calc(-50vw + 50%); */

	/*	background-color: rgb(90, 47, 47); */
	}

.section_bignav-spacer {
	margin-bottom: 21em;
}



.section_hugenav {
		width: 100%;
		margin-top: 2em;
		
		margin-left: auto;
		margin-right: auto;
		left: 0;
		right: 0;
		text-align: center;
		
		padding-top: 0em;

		position: absolute;
 /* left: calc(-50vw + 50%); */

	/*	background-color: rgb(90, 47, 47); */
	}



.section_text and (min-width: 0px) and (max-width: 575px) {
	width: 100%;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-top: 2em;
	background-color: white;
}
@media screen and (min-width: 575px) and (max-width: 800px) {
	.section_text {
		width: 95%;
		max-width: 95%;
		margin-left: auto;
		margin-right: auto;		
	}
}
@media screen and (min-width: 800px) and (max-width: 1001px) {
	.section_text {
		width: 80%;
		max-width: 80%;
		margin-left: auto;
		margin-right: auto;		
	}
}
@media screen and (min-width: 1001px) {
	.section_text {
		width: 100%;
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;		
	}
}








/* Buttons 
============================*/

a.but_white-black {
	background-color: rgba(0, 0, 0, 0.09);
	color: rgba(0, 0, 0, 1);
	padding: 0.5em 1.5em;
	text-decoration: none;
	font-size:0.7em;
	font-weight: normal;
	border-radius: 2px;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.03), 0 6px 20px 0 rgba(0,0,0,0.04);
	border: 1.25px solid rgba(0, 0, 0, 0.17);
}
a.but_white-black:hover {
	color: white;
	background-color: grey;
	border-radius: 2px;
	border: 1.25px solid rgba(0, 0, 0, 0.20);
}
a.but_white-black:active {
	background-color: rgba(0, 0, 0, 0.09);
	border-radius: 2px;
}



a.but_green-white {
	background-color: rgba(13, 131, 73, 0.8);
	color: rgb(255, 255, 255);
	padding: 0.4em 0.8em;
	text-decoration: none;
	font-size:0.7em;
	font-weight: normal;
	border-radius: 5px;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.03), 0 6px 20px 0 rgba(0,0,0,0.04);
	border: 1.25px solid rgba(0, 0, 0, 0.17); 
}
a.but_green-white:hover {
	background-color: rgba(13, 131, 73, 1);
	color: rgba(255, 255, 255, 1);
	border-radius: 5px;
}
a.but_green-white:active {
	border-radius: 5px;
	background-color: rgba(13, 131, 73, 1);
}



a.but_black-white { 
	background-color: rgba(0,0,0,0.85);
	color: rgb(255, 255, 255);
	padding: 0.5em 1.5em;
	text-decoration: none;
	font-size:0.7em;
	font-weight: normal;
	border-radius: 5px;
  
  }
  a.but_black-white:hover {
	background-color: rgba(0, 0, 0, 0.6);
	color: rgba(255, 255, 255, 1);
	border-radius: 5px;
  }
  a.but_black-white:active {
	background-color: rgba(0, 0, 0, 0.6);
	border-radius: 5px;
  }
 

 .newsstrip {
	font-size:0.7em; 
	color: rgb(255, 255, 255); 
	text-align: left;
	padding-top: 0.25em;
	padding-bottom: 0.25em;
	margin-right:auto; 
	margin-left: 0em; 
	padding-left: 0em; 
	margin-top:0em; 
	margin-bottom:0em; 
	background-color: rgb(80, 84, 88); 
}
@media screen and (min-width: 601px) {
	.newsstrip {
	font-size: 0.8em;
	text-align: left;
	padding-top: 0.25em;
	padding-bottom: 0.25em;
	padding-left: 0em;
	margin-right:auto; 
	margin-left:auto; 
	margin-top:0em; 
	margin-bottom:0em; 
	background-color: rgb(80, 84, 88); 
	}
}
@media screen and (min-width: 801px) {
	.newsstrip {
	font-size: 0.9em;
	text-align: left;
	padding-left: 0em;
	}
}