/*doctype css*/

	/*------------ Variabels ------------*/
	:root {
		--colorHighlight: 	#580063;
	}
	/*-----------------------------------*/
	
	@-ms-viewport{
		width: 				device-width;
	}	
	
	* {
		box-sizing: 		border-box;
	}
	
	body {
		height: 			auto;
		width: 				auto;
		margin: 			0 0 0 0;
		padding:			0 0 0 0;
		border: 			none;		
		background-color: 	lightgrey;
		/*Text defaults:*/
		text-align: 		left;
		font-family:		Roboto, sans-serif;
		font-style:			normal;
		font-weight:		400;
		font-size:			1em;
		line-height:		1.1;
		color: 				black;
	}
	
	h1 {
		margin:				0;
		font-size:			1.5em;
		font-weight:		400;
		color: 				white;
	}
	
	h2 {
		margin:				0;
		font-size:			1.6em;
		font-weight: 		400;
	}
	
	h3 {
		margin:				0;
		font-size:			1.3em;
	}
	
	a {
		margin:				0;
		color: 				#73f;
	}
	
	p {
		margin: 			0.5em;
		font-size: 			1.2em;
	}
	
	/*-------- Text modificator ---------*/
	.bold {
		font-weight:		bolder;
	}
		
	.light {
		font-weight:		lighter;
	}
		
	.italic {
		font-style:			italic;
	}
	/*-----------------------------------*/
	
	.flexContainer {
		display: 			flex;
		flex-direction: 	row;
		flex-wrap: 			wrap;
		justify-content: 	center;
		align-items: 		center;
	}
	
/*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/	
	
	/*----------------------------------*/
	/*-------------- Menu --------------*/
	/*----------------------------------*/
	#menu{
		width: 				100%;
		border-top: 		solid 5px var(--colorHighlight);
		background-color: 	white;
		position: 			fixed;
		top: 				0;
		z-index:			100;
		box-shadow:			0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	}
	
	#innerMenu{
		width:				100%;
		max-width: 			1000px;
		margin:				0 auto 0 auto;
		padding:			0 10px 0 10px;
		justify-content:	space-between;
		align-items:		center;
	}
	
	@media screen and (max-width: 532px) {
	  #innerMenu{
		justify-content:	center;
	  }
	}
	
	#menuLogo {
		height: 			64px;
		margin: 			3px 7px 3px 7px;
	}
	
	@media screen and (max-width: 532px) and (min-width: 400px) {
      #menuLogo { 
		height:             64px;
      }
    }
	
	@media screen and (max-width: 400px) {
      #menuLogo { 
		height:             50px;
		margin: 			3px 0;
      }
    }
	
	.menuButton {
		width:				100px;
		height: 			40px;
		border:				none;
		border-radius: 		8px;
		margin:				0;
		padding:			0;
		background-color:	white;
		font-size:			1.3em;
	}
	
	.menuButton:hover {
		background-color:	#eee;
		font-size:			1.4em;
	}

	.menuButton:active {
		font-size:			1.3em;
	}
	
	.menuButton:focus {
		background-color:	#eee;
		outline: 			none;
	}
	
	/*----------------------------------*/
	/*-------------- Video -------------*/
	/*----------------------------------*/
	
	#videoSection {
		background-color: 	var(--colorHighlight);
		margin-top: 		75px;
		padding: 			20px 0 20px 0;
		width: 				100%;
		height: 			100%;
	}
	
	.v1 {
		width: 				calc((100vh - 75px - 40px)*1.7777);
		height: 			calc(100vh - 75px - 40px);
		margin: 			0 auto 0 auto;
		padding: 			0;
	}
	
	.v2 {
		width: 				100%;
		margin: 			0;
		padding:			0;
	}
	
	/*----------------------------------*/
	/*------------ Content -------------*/
	/*----------------------------------*/
	
	.contentSection {
		width: 				100%;
		margin: 			0;
		padding: 			25px 0 25px 0;
		border-bottom: 		solid 1px var(--colorHighlight);
		background-color:	white;
		flex-direction:		column;
		flex-wrap:			nowrap;
	}

	.sectionHeadline {
		padding: 			25px 0 25px 0;
		text-align:			center;
		color: 				var(--colorHighlight);
	}
	
	.content {
		width:				90%;
		max-width:			1000px;
		margin:				25px;
		padding:			0;
		box-shadow: 		0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	}
	
	.contentImg {
		width: 				100%;
		height: 			350px;
		margin: 			0;
		padding: 			0;
		background-position:center;
		background-repeat:  no-repeat;
		background-size:	cover;
	}
	
	@media screen and (min-width: 750px) {
	  .contentImg {
		height:				450px;
	  }
	}
	
	.contentHeadline {
		width: 				100%;
		height: 			60px;
		margin: 			0;
		padding: 			0;
		background-color: 	var(--colorHighlight);
		text-align: 		center;
	}
	
	.contentText {			
		width: 				100%;
		margin: 			0;
		text-align: 		justify;
	}
	
    /*
	@media screen and (min-width: 800px) {
	  .contentText {
		column-count: 		2;
		column-gap:			25px;
		column-rule-style: 	solid;
		column-rule-width:  1px;
	  }
	}
    */
	
	.centerText {
		column-count: 		1;
		text-align:			center;
	}
	
	#contentImg01 { 
		background-image: 	url(data/contentImg01.jpg); 
	}
	
	#contentImg02 { 
		background-image: 	url(data/contentImg02.jpg); 
	}
	
	#contentImg03 { 
		background-image: 	url(data/contentImg03.jpg); 
	}
	
	#contentImg04 { 
		background-image: 	url(data/contentImg04.jpg); 
	}
	
	#contentImg05 { 
		background-image: 	url(data/contentImg05.jpg); 
		background-position:0 5px;
		max-width: 			750px;
		margin: 			0 auto 0 auto;
	}
	
	#contentImg06 {
		background-image: 	url(data/contentImg06_1.jpg); 
		position: 			relative;
	}
	
	#Logo {
		position: 			absolute;
		top:				10px;
		right:				5px;
		height:				15%;
	}
	
	/*----------------------------------*/
	/*------------ Bottom --------------*/
	/*----------------------------------*/
	
	#bottomSection {
		width:				100%;
		height:				75px;
		background-color:	var(--colorHighlight);
		color: 				white;
	}