@charset "utf-8";

/* CSS Document */

		html {
        scroll-behavior: smooth;
		}

		*, *:before, *:after {
  		box-sizing: border-box;
		}
		
		/* Style the body */
		body { 
			font-family: "Arial, Verdana, sans-serif";       /* A font family name and a generic family name */
			color: #000000;
  			background-color: #ffffff; 
			margin: 0;
		}

		/* Style the page container */
		.container {
			background-color: #ffffff;
			width: 90%;
			float: left;
			margin-left: 0;
			margin-right: auto;
			border-bottom-width: 0;
			padding-left: 0;
			padding-top: 0;
			padding-right: 0;
			padding-bottom: 0;
		}

		.flex-row_pagetop {
			display: -webkit-flex;
			display: flex;
			width: 100%;
			height: auto;
			padding-top: 2%;
			padding-bottom: 2%;
			margin-top: 0;
			margin-bottom: 0;
			color: #024A94;
			background-color: #ffffff;
		}

		/* Style the Logo */
		.pagetop_column_img {
			float: left;
			overflow: auto;
			width: 40%;
			margin-bottom: 5%;
		}

		/* Style the Navigation Bar */
		.pagetop_column_nav {
			display: flex;
  			justify-content: flex-end;
  			align-items: flex-end;
			width: 60%;
			padding-bottom: 0.1%;
		}
		
		/* Style the navigation bar links */
		.navbar a {
  			color: #95C11E;
			height: 20%;
  			text-decoration: none;
			font-size: 1.2vw;
			font-weight: bold;
			margin-top: 0;
			margin-right: 0;
			margin-bottom: 0;
		}

		/* Style the navigation bar jump addresses */

		.jump_address {
			position: absolute;
			top: -185px;
		}

		/* Change color on hover */
		.navbar a:hover {
  			background-color: white;
			transition: all 0.3s linear;
			color: #024A94;
  			border-color: #95C11E;
			border-style: none none solid none; 
  			border-width: thick;
		}

		/* Make logo and navigation bar sticky at top */
		div.sticky {
			position: -webkit-sticky; /* Safari */
  			position: sticky;
			z-index: 1;
			top: 0;
		}

		/* Parallax Section Top */

		.top1 {
			color: #FFFFFF;
			text-align: left;
			padding-left: 35%;
			padding-top: 6.2vmax;
			margin-top: 0;
			margin-bottom: 0;
			font-size: 4vmax;
		}
		.top2 {
			color: #000000;
			text-align: left;
			padding-left: 35%;
			padding-top: 7vmax;
			padding-bottom: 0;
			margin-top: 0;
			margin-bottom: 0;
			font-size: 3vmax;
		}
		.top3 {
			color: #000000;
			text-align: left;
			padding-left: 35%;
			padding-top: 0;
			margin-top: 0;
			margin-bottom: 0;
			font-size: 2vmax;
			word-spacing: 1vw;
		}
		.banner-top {
			background-image: url("images/starnberger_see_nordspitze.jpg");
			width: 100%;
			height: 28.5vmax;				
			max-width: 3264px;
			background-position: center;
			background-attachment: fixed;
			background-size: 100%;
			background-repeat: no-repeat;
			padding-top: 0;
			padding-right: 0;
			padding-bottom: 0;
			padding-left: 0;
			margin-top: 0;
			margin-right: 0;
			margin-bottom: 0;
			margin-left: 0;
		}

		/* Style Service Sections */
		.flex-row {
			display: -webkit-flex;
			display: flex;
			flex-flow: row wrap;
			justify-content: flex-end;
			align-content: center;
			width: 100%;
			height: auto;
			float: left;
			margin-top: 0;
			margin-right: 0;
			margin-bottom: 0;
			margin-left: 0;
			padding-top: 0;
			padding-right: 0;
			padding-bottom: 0;
			padding-left: 0;
			background-color: #ffffff;
			background-origin: border-box;
		}
		.flex-columns {
			width: 38vw;
			height: 38vw;
			float: left;
			margin-top: 2.5%;
			margin-right: 0;
			margin-bottom: 2.5%;
			margin-left: 5%;
			padding-top: 3%;
			padding-right: 3.5%;
			padding-bottom: 5%;
			padding-left: 3.5%;
			text-align: justify;
			color: #000000;
		}
		.flex-columns:hover .rotate, .flex-columns.hover .rotate {
			transform: rotateY(180deg);
		}
		.rotate {
			position: relative;
			transition: 1s;
			transform-style: preserve-3d;
		}
		.front, .back {
			position: absolute; top: 0; left: 0;
			-webkit-backface-visibility:hidden;
  			backface-visibility: hidden;
		}
		.front {
			transform: rotateY(0deg);
		}
		.back {
			transform: rotateY(180deg);
		}
		.services-sections {
			font-size: 3vw;
		}
		.services-discription {
			font-size: 1.5vw;
		}
		.services-discription-back {
			font-size: 1.2vw;
		}
		.strong1 {
			font-size: 2vw;
		}
		.strong2 { 
			font-size: 1.5vw;
		}

		/* Parallax Section Middle */
		.middle {
			color: #FFFFFF;
			text-align: right;
			padding-top: 3vmax; 
			padding-right: 5%;
			float: right;
			font-size: 3vmax;
			font-weight: lighter;
			margin-top: 0;
			margin-right: 0;
			margin-bottom: 0;
			margin-left: 0;
		}
		.logo_size {
			width: 20%;	
		}
		.banner-middle {
			background-image: url("images/maisinger_see_wolkenspiegelung.JPG");
			width: 100%;
			height: 28.5vmax;		
			max-width: 4032px;
			background-position: 0 -5vmax;
			background-attachment: fixed;
			background-size: 100%;
			background-repeat: no-repeat;
			margin-top: 0;
			margin-right: 0;
			margin-bottom: 0;
			margin-left: 0;			
		}

	/* Company */

		/* Parallax Section Bottom */
		.bottom {
			color: #FFFFFF;
			text-align: right;
			padding-top: 3vmax; 
			padding-right: 5%;
			float: right;
			font-size: 3vmax;
			font-weight: lighter;
			margin-top: 0;
			margin-right: 0;
			margin-bottom: 2%;
			margin-left: 0;
		}
		.banner-bottom {
			background-image: url("images/starnberger_see_starnberg_fischerhuette.jpg");
			width: 100%;
			height: 28.5vmax;			
			max-width: 2448px;
			background-position: center;
			background-attachment: fixed;
			background-size: 100%;
			background-repeat: no-repeat;
			margin-top: 0;
			margin-right: 0;
			margin-bottom: 0;
			margin-left: 0;
		}

		/* Roadshow Image */
			
		.imgroadshow {
			width: 100%;
			height: auto;
			margin-top: 0;
			margin-right: 0;
			margin-bottom: 0;
			margin-left: 0;
			padding-top: 0;
			padding-right: 0;
			padding-bottom: 0;
			padding-left: 0;
		}
		.imgnews {
			width: 50%;
			height: auto;
			margin-top: 0;
			margin-right: 0;
			margin-bottom: 0;
			margin-left: 0;
			padding-top: 0;
			padding-right: 0;
			padding-bottom: 0;
			padding-left: 0;
		}


		/* Newsletter Imprint Section */

		/* Style Newsletter Imprint Continaner */

		.container_newsletter_imprint {
			background-color: #024A94;
			width: 90%;
			float: left;
			margin-left: auto;
			margin-right: auto;
			border-bottom-width: 0;
			padding-left: 0;
			padding-top: 0;
			padding-right: 0;
			padding-bottom: 0;
		}

		/* Style Newsletter And Imprint Section */

		.footer {
			background-color: #FFFFFF;
			text-align: center;
			padding-top: 1%;
			padding-bottom: 1%;
			margin-top: 0;
			margin-right: 0;
			margin-bottom: 2%;
			margin-left: 0;
		}
		.newsletter {
			color: #024A94;
			padding: 0.5%;
			font-size: 1.5vmax;
		}
		.button {
			width: 15%;
			padding: 0.5%;
			text-align: center;
			vertical-align: middle;
			border-radius: 0;
			text-transform: uppercase;
			font-weight: bold;
			letter-spacing: 0.5%;
			border: 0.2vw solid #024A94;
			color: #024A94;
			transition: all 0.5s linear;
			text-decoration: none;
			font-size: 1.5vmax;
		}
		.button:hover {
			background-color: #95C11E;
			cursor: pointer;
		}

		/* Back to Top Section */

		.backtotop_arrow {
			background-color: #FFFFFF;
			color: #024A94;
			font-size:  2vmax;
			font-weight: bold;
			text-decoration: none;
			margin-top: 0;
			margin-bottom: 0;
		}
		.backtotop_arrow {
			background-color: #FFFFFF;
			color: #024A94;
			font-size:  2vmax;
			font-weight: bold;
		}
		.backtotop_arrow a {
			font-size:  2vmax;
			font-weight: bold;
			text-decoration: none;
			margin-top: 0;
			margin-right: 0;
			margin-bottom: 0;
		}
		.backtotop_arrow a:hover {
			color: #95C11E;
			transition: all 0.3s linear;
  			border-color: #95C11E;
			border-style: none none solid none; 
  			border-width: thick;			
		}
		.backtotop {
			background-color: #FFFFFF;
			color: #024A94;
			font-size:  1.5vw;
			margin-top: 0;
			margin-bottom: 0;
		}

		/* Style Copyright Section */
		.copyright {
			width: 100%;
			height: auto;
			text-align: center;
			background-color: #024A94;
			color: #FFFFFF;
			font-size: 1.3vw;
			margin-top: 0;
			padding-top: 1%;
			padding-bottom: 2%;
		}
		.copyright a {
					color: #FFFFFF;	
					text-decoration: none;
					margin-top: 0;
					margin-right: 0;
					margin-bottom: 0;
		}

		/* Change color on hover */
		.copyright a:hover {
  			color: #95C11E;
			transition: all 0.3s linear;
  			border-color: #95C11E;
			border-style: none none solid none; 
  			border-width: thick;
		}

		.flex-row:before, .flex-row:after {
			content: "";
			display: table;
		}

		.flex-row:after {
			clear: both;
		}


		/* Cookie Banner */

		.cookie-banner, .cookie-banner * {
		  box-sizing: border-box;
		}

		.cookie-banner {
		  display: none;
		  position: fixed;
		  bottom: 2%;
		  left: 65%; 
		  width: 30%;
		  height: 25%;
		  font-size: 100%;
		 } 

	   .cookie-banner  .footer-cookie {
		  width: 100%;
		  height: 70%;	
		  background: #024A94;
		  color: #95C11E;
		  text-align: justify;  
		  text-justify:inter-word;	
		  padding-top: 5%;
		  padding-left: 5%;
		  padding-right: 5%;
		  padding-bottom: 5%;
		}

		.cookie-banner .footer-cookie a {
		  color: #95C11E;
		}

		.cookie-banner .container-accept {
		  width: 100%;
		  height: 25%;	
		  background: #95C11E;
		  color: #024A94;
		  text-align: center;
		  display: flex;
		  justify-content: center;
		  align-items: center;
		  margin: 0;
		  padding-top: 5%;
		  padding-left: 5%;
		  padding-right: 5%;
		  padding-bottom: 5%;
		}

		.cookie-banner .container-accept a {
			border: 1.5px solid #024A94;
			text-decoration: none;
			margin: auto;
			padding: 10%;
		}


	/* Responsive layout - makes the menu and the content (inside the section) sit on top of each other instead of next to each other */

	/* For Medium Displays */

		@media only screen and (min-width: 1025px) and (max-width: 1440px) {	

			/* Style the navigation bar links */

	 			.navbar a {
					font-size: 1.3vw;
				} 
			
			/* Style the navigation bar jump addresses */

				.jump_address {
					position: absolute;
					top: -14vh;
				}

			/* Parallax Section Top */
			
				.top1 {
					font-size: 4.1vw;
					padding-top: 6.2vw;					
					padding-left: 39%;
				}
				.top2 {
					font-size: 3.1vmax;
					padding-top: 7vmax;					
					padding-left: 39%;
				}
				.top3 {
					font-size: 2.1vw;
					padding-left: 39%;
					word-spacing: 2.1vw;
				}	
				.banner-top {
					background-image: url("images/starnberger_see_nordspitze.jpg");
					width: 100%;
					height: 28.5vmax;		
					max-width: 3264px;		
					background-attachment: fixed;
					background-position: 0 -20vh;
					background-size: 100%;
					background-repeat: no-repeat;
				}
			
		/* Style Service Sections */
			/* Parallax Section Middle */
			
				.middle {
					padding-top: 3vmax; 
					padding-right: 3%;					
					font-size: 3.1vmax;
				}
				.banner-middle {
					background-image: url("images/maisinger_see_wolkenspiegelung.JPG");
					width: 100%;
					height: 28.5vmax;
					max-width: 4032px;		
					background-attachment: fixed;					
  					background-position: center;
					background-size: 100%;
					background-repeat: no-repeat;
				}

	/* Company */

			/* Parallax Section Bottom */
			
				.bottom {
					padding-top: 3vmax; 
					padding-right: 3%;					
					font-size: 3.1vmax;
				}
				.banner-bottom {
					background-image: url("images/starnberger_see_starnberg_fischerhuette.jpg");
					width: 100%;
					height: 28.5vmax;			
					max-width: 2448px;
					background-attachment: fixed;
  					background-position: center;
					background-size: 100%;
					background-repeat: no-repeat;
				} 

			/* Newsletter Section */

				.newsletter {
					font-size: 1.5vw;	
				}
				.button {
					font-size: 1.6vw;
				}
			
				.backtotop {
					font-size:  1.5vw;
				}			

			/* Style Copyright Section */

				.copyright {
					font-size: 1.4vw;
				}


			/* Cookie Banner */

			.cookie-banner {
			  left: 55%; 
			  width: 40%;
			  height: 25%;
			 } 
		}


			/* Media Query for  Medium Size Displays*/

		@media only screen and (min-width: 769px) and (max-width: 1024px) {


			/* Style the navigation bar links */

	 			.navbar a {
					font-size: 1.5vw
				} 
			
			/* Style the navigation bar jump addresses */

				.jump_address {
					position: absolute;
					top: -18.5vh;
				}

			/* Parallax Section Top */
			
				.top1 {
					padding-top: 5vmax;
					padding-left: 30%;					
					font-size: 4.2vw;
				}
				.top2 {
					padding-top: 8vmax;
					padding-left: 30%;									
					font-size: 3.2vw;
				}
				.top3 {
					padding-left: 30%;					
					font-size: 2.2vw;
					word-spacing: 2.1vw;
				}	
				.banner-top {
					background-image: url("images/starnberger_see_nordspitze_1600x1200x264.jpg");
					width: 100%;
					height: 28.5vmax;		
					max-width: 1600px;
					background-attachment: scroll;					
					background-position: center;
					background-size: 100%;
					background-repeat: no-repeat;
				}
			
		/* Style Service Sections */
			/* As above Big Screens 1920x1080 */
			

			/* Parallax Section Middle */
			
				.middle {
					padding-top: 3vmax; 
					padding-right: 3%;					
					font-size: 3.2vmax;
				}
				.banner-middle {
					background-image: url("images/maisinger_see_wolkenspiegelung_1600x1200x264.jpg");
					width: 100%;
					height: 28.5vmax;			
					max-width: 1600px;
					background-attachment: scroll;
					background-position: center;
					background-size: 100%;
					background-repeat: no-repeat;
				}

	/* Company */

			/* Parallax Section Bottom */
			
				.bottom {
					padding-top: 15vmax; 
					padding-right: 3%;					
					font-size: 3.2vmax;
				}
				.banner-bottom {
					background-image: url("images/starnberger_see_starnberg_fischerhuette_1600x2133x264.jpg");
					width: 100%;
					height: 28.5vmax;			
					max-width: 1600px;
					background-attachment: scroll;
  					background-position: center;
					background-size: 100%;
					background-repeat: no-repeat;
			} 

			/* Newsletter Section */

				.newsletter {
					font-size: 1.7vw;	
				}
				button {
					font-size: 1.9vw;
				}
			
				.backtotop {
					font-size:  1.7vw;
				}				

			/* Style Copyright Section */

				.copyright {
					font-size: 1.7vw;
				}


			/* Cookie Banner */

			.cookie-banner {
			  left: 45%; 
			  width: 50%;
			  height: 30%;
			 } 
		}

	/* For tablets: */

		@media only screen and (min-width: 481px) and (max-width: 768px) {
			

			/* Style the navigation bar links */

				.navbar a {
					font-size: 1.6vw;
				}
			
			/* Style the navigation bar jump addresses */

				.jump_address {
					position: absolute;
					top: -9.5vh;
				}

			/* Parallax Section Top */
			
				.top1 {
					padding-top: 8vmax;
					padding-left: 27%;					
					font-size: 5vw;
				}
				.top2 {
					padding-top: 12vmax;
					padding-left: 27%;					
					font-size: 4vw;
				}
				.top3 {
					padding-left: 27%;
					font-size: 2.45vw;
					word-spacing: 2.5vw;
				}
			
				.banner-top {
					background-image: url("images/starnberger_see_nordspitze_1600x1200x264.jpg");
					width: 100%;
					height: 38.5vmax;			
					max-width: 1600px;
					background-attachment: scroll;
  					background-position: center;
					background-size: 100%;
					background-repeat: no-repeat;
				}

			/* Style Service Sections */

				.flex-columns {
					width: 75vw;
					padding-top: 3%;
					padding-right: 7%;
					padding-bottom: 5%;
					padding-left: 7%;
				}
				.flex-columns, .front, .back {
					height: 75vw;
				}
				.services-sections {
					font-size: 4.5vw;
				}
				.services-discription {
					font-size: 3vw;
				}
				.services-discription-back {
					font-size: 2.7vw;
				}				
				.strong1 {
					font-size: 3.5vw;
				}
				.strong2 { 
					font-size: 3vw;
				}
				h1.services-sections {
					font-size: 5vw;
				}

			/* Parallax Section Middle */
			
				.middle {
					padding-top: 5vmax;
					padding-right: 3%;					
					font-size: 4vmax;
				}
				.logo_size {
					width: 23vmax;	
				}			
				.banner-middle {
					background-image: url("images/maisinger_see_wolkenspiegelung_1600x1200x264.jpg");
					width: 100%;
					height: 38.5vmax;			
					max-width: 1600px;
					background-attachment: scroll;
  					background-position: center;
					background-size: 100%;
					background-repeat: no-repeat;
				}

		/* Company */

			/* Parallax Section Bottom */

				.bottom {
					padding-top: 18vmax; 
					padding-right: 3%;
					font-size: 4vmax;					
				}
				.banner-bottom {
					background-image: url("images/starnberger_see_starnberg_fischerhuette_1600x2133x264.jpg");
					width: 100%;
					height: 38.5vmax;			
					max-width: 1600px;
					background-attachment: scroll;					
					background-position: center;
					background-size: 100%;
					background-repeat: no-repeat;
				} 

		/* Newsletter Imprint Section */

		/* Style Newsletter Imprint Continaner */

		.container_newsletter_imprint {
			width: 100%;
			background-color: #ffffff;
		}	
			
			/* Newsletter Section */

				.newsletter {
					font-size: 2vw;	
				}
				.button {
					font-size: 2.5vw;
				}
			
				.backtotop {
					font-size:  2vw;
				}				
			
				/* Style Copyright Section */

					.copyright {
					font-size: 2vw
				}


			/* Cookie Banner */

			.cookie-banner {
			  left: 30%; 
			  width: 65%;
			  height: 40%;
			 } 
		}

		/*Media Query for Small Screen Devices */

			@media only screen and (max-width: 480px) {
				
			.container {
				background-color: #ffffff;
				width: 100%;
				}


			/* Style the navigation bar links */
				
				.navbar a {
					font-size: 1.8vw;
				}
				
			/* Style the navigation bar jump addresses */

				.jump_address {
					position: absolute;
					top: -12vh;
				}

			/* Parallax Section Top */
				
				.top1 {
					padding-top: 8vmax;
					padding-left: 25%;
					font-size: 3.5vw;
				}
				.top2 {
					padding-top: 10vmax;
					padding-left: 25%;
					margin-top: 0;
					margin-bottom: 0;
					color: #FFFFFF;
					font-size: 2.5vw;
				}
				.top3 {
					padding-top: 0%;
					padding-left: 25%;
					color: #FFFFFF;				
					font-size: 1.45vmax;
					word-spacing: 1.2vw;
				}
				.banner-top {
					background-image: url("images/starnberger_see_nordspitze_1000x750x264.jpg");
					width: 100%;
					height: 38.5vmax;		
					max-width: 1600px;
					background-position: center;
					background-attachment: scroll;
					background-size: 100%;
					background-repeat: no-repeat;
				}
				
			/* Style Service Sections */
				
				.flex-columns {
					width: 90vw;
					padding-top: 5%;
					padding-right: 10%;
					padding-bottom: 5%;
					padding-left: 10%;
				}
				.flex-columns, .front, .back {
					height:90vw;
				}
				.services-sections {
					font-size: 5vw;
				}
				.services-discription {
					font-size: 3.5vw;
				}
				.services-discription-back {
					font-size: 3.5vw;
				}	
				.strong1 {
					font-size: 4vw;
				}
				.strong2 { 
					font-size: 3.8vw;
				}
				h1.services-sections {
					font-size: 5vw;
				}

			/* Parallax Section Middle */
				
				.middle {
					padding-top: 5vmax; 
					padding-right: 3%;
					font-size: 3vmax;
				}
				.logo_size {
					width: 17vmax;	
				}
				.banner-middle {
					background-image: url("images/maisinger_see_wolkenspiegelung_1000x750x264.jpg");
					width: 100%;
					height: 38.5vmax;			
					max-width: 1600px;
					background-attachment: scroll;
  					background-position: center;
					background-size: 100%;
					background-repeat: no-repeat;
				}

		/* Company */

			/* Parallax Section Bottom */

				.bottom {
					color: #FFFFFF;
					padding-top: 22vmax; 
					padding-right: 3%;
					font-size: 3vmax;
				}
				.banner-bottom {
					background-image: url("images/starnberger_see_starnberg_fischerhuette_1000x1333x264.jpg");
					width: 100%;
					height: 38.5vmax;			
					max-width: 1600px;
					background-attachment: scroll;
					background-position: center;
					background-size: 100%;
					background-repeat: no-repeat;
				} 

		/* Newsletter Imprint Section */

		/* Style Newsletter Imprint Continaner */

		.container_newsletter_imprint {
			width: 100%;
			   }
				
			/* Newsletter Section */

				.newsletter {
					font-size: 2.8vw;	
				}

			/* Button */
				
				.button {
					width: 20%;
					font-size: 3vw;
				}
				
				.backtotop {
					font-size:  2.8vw;
				}					

			/* Style Copyright Section */

				.copyright {
					font-size: 2.5vw;
				}


 			/* Cookie Banner */

				.cookie-banner {
					  left: 20%; 
					  width: 75%;
					  height: 40%;
					 } 
		}