@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: 95%;
			float: left;
			margin-left: 0;
			margin-right: auto;
			border-bottom-width: 0;
			padding-left: 0;
			padding-top: 0;
			padding-right: 0;
			padding-bottom: 0;
		}

		/* Style the Logo and Navigation Container */		

		.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%;
		}

/*		.pagetop_column_login {
			display: -webkit-flex;
			display: flex;
			float: left;
  			justify-content: flex-end;
  			align-items: flex-end;
			width: 60%;
			padding-bottom: 0.1%;
		}

		.pagetop_column_login a {
  			color: #024A94;
  			text-decoration: none;
			font-size: 1.2vw;
			font-weight: bold;
			margin-top: 0;
			margin-right: 0;
			margin-bottom: 0;
		}   */

		/* Change color on hover */

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


		/* 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;
		}


		/* Main content of the site */

		#content {
			clear: both;
			overflow: auto;
			margin: 0;
		}

		/* Sidebar */

		#content .sidebar {
			font-family: "Arial, Verdana, sans-serif";
			width: 180px;
			float: left;
			padding-left: 0.5%;
			text-align: center;
		}

		/* main content of the site */

		#content .mainContent {
			text-align: center;
			padding-left: 1%;
		}

		/*menubar's properties for menus in sidebar */

		#content .sidebar #menubar {
			text-decoration: none;
			text-align: left;
			position: relative;
			left: 0;
		}

		#menubar nav .menu_headline {
			font-size: 14px; 
			font-weight: 800;
		}

		#menubar nav .menu_items {
			font-weight: 700;
		}

		/* search field in sidebar */

/*		#content .sidebar #search {
			width: 100%;
			border-radius: 0px;
			height: 42px;
			text-align: center;
			color: #7A7A7A;
			font-size: 14px;
			margin-bottom: 21px;
		}  */


		/* menu elements */

		/* links under menus in sidebar */

		.sidebar #menubar .menu ul li {
			list-style-type: none;	
			text-decoration: none;
			position: relative;
			font-size: 11px;
			left: -35px;
		}

		.sidebar #menubar .menu ul li a:link {
			color: #024A94;
			text-decoration: none;
		}

		.sidebar #menubar .menu ul li a:visited {
			color: #FF0000;
		} 

		.sidebar #menubar .menu ul li a:hover {
			background-color: white;
			transition: all 0.3s linear;
			color: #95C11E;
  			border-color: #024A94;
			border-style: none none solid none; 
  			border-width: medium;
			text-decoration: none;
		}

		 /*Properties for Hamburger*/ 

/*				 .ham {  
					  display:none;  
					  padding:5px;  
					  cursor:pointer;  
				 }  
				 .bar1,.bar2,.bar3{  
					  display:block;  
					  width:35px;  
					  height:3px;  
					  margin:5px auto;  
					  background-color:#101010;  
					  transition: 0.4s;  
				 }   */

		/* Product rows for catalog */

		#content .productRow {
			color: #000000;
			display: -webkit-flex;
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;
			padding-left: 1%;
		}

		/* Each product Information in the catalog */

		.productRow .productInfo {
			width: 150px;
			padding-left: 1%;
			padding-right: 1%;
		}

		/* Product's images in catalog */
		
		.productInfo img {
			position: relative;			
			width: 130px;
			height: 130px;
		}

		/* Content holder for products in catalog*/

		.productInfo .productContent {
			position: relative;
			font-family: "Arial, Verdana, sans-serif";
			font-size: 11px;
			font-style: normal;
			font-weight: 200;
			color:  #000000;
			white-space: pre-wrap;
			height: 20px;
		}

		/* Buy button for products in catalog */

		.productInfo .quoteButton {
			position: relative;
			width: 100%;
			background-color: #024A94;
			height: 15px;			
			color: #ffffff;
			border-style: none;
			font-size: 10px;
			text-transform: uppercase;
			margin-bottom: 10%;
		}

		.quoteButton:hover {
			background-color: #95C11E;
			color: #024A94;
			cursor: pointer;
		}


		/*Links in sidebar */


/* Buttons for product overview subpages */		

		#subpages {
			clear: both;
			overflow: auto;
		}

		#subpages .linkssubpages {
			height: 10%;
			display: -webkit-flex;		
			display: flex;
			align-items: center;
			margin-top: 2%;
			margin-bottom: 5%;
		}

		#subpages .subpagesleft {
			float: left;
			width: 20%;
			text-align: end;
			padding: 2%;
		}

		#subpages .subpagescenter {
			float: left;
			width: 60%;
			text-align: center;
		}

		#subpages .subpagesright {
			float: left;
			width: 20%;
			text-align: start;
			padding: 2%;
		}

	
	.overviewbutton {
		width: 40px;
  		height: 40px;		
		background-color: #95C11E;
		border: none;
		color: #ffffff;	
 		display: inline-block;
		text-align: center;
		padding: 12px;
		vertical-align: middle;		
		transition: all 0.5s linear;
		text-decoration: none;
  		font-size: 16px;
  		margin: 4px 3px;
  		cursor: pointer;
	}

	.overviewbutton-2 {
		width: 40px;
  		height: 40px;		
		background-color: #024A94;
		border: none;
		color: #ffffff;	
 		display: inline-block;
		text-align: center;
		padding: 12px;
		vertical-align: middle;		
		transition: all 0.5s linear;
		text-decoration: none;
  		font-size: 16px;
  		margin: 4px 3% 4px 3px;
  		cursor: pointer;
	}

	.overviewbutton-4 {
		width: 40px;
  		height: 40px;		
		background-color: #95C11E;
		border: none;
		color: #ffffff;	
 		display: inline-block;
		text-align: center;
		padding: 12px;
		vertical-align: middle;		
		transition: all 0.5s linear;
		text-decoration: none;
  		font-size: 16px;
  		margin: 4px 3% 4px 3px;
  		cursor: pointer;
	}

	.overviewbutton:hover {
		background-color:  #024A94;
		cursor: pointer;
	}

	.overviewbutton-2:hover {
		background-color:  #95C11E;
		cursor: pointer;
	}

	.overviewbutton-4:hover {
		background-color:  #024A94;
		cursor: pointer;
	}

		/* Newsletter Imprint Section */

		/* Style Newsletter Imprint Continaner */

		.container_newsletter_imprint {
			background-color: #024A94;
			width: 100%;
			float: center;
			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.2vmax;
		}
		.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.2vmax;
		}
		.button:hover {
			background-color: #95C11E;
			cursor: pointer;
		}

		/* Back to Top Section */

		.backtotop_arrow {
			background-color: #FFFFFF;
			color: #024A94;
			font-size:  1.7vmax;
			font-weight: bold;
			text-decoration: none;
			margin-top: 0;
			margin-bottom: 0;
		}
		.backtotop_arrow {
			background-color: #FFFFFF;
			color: #024A94;
			font-size:  1.7vmax;
			font-weight: bold;
		}
		.backtotop_arrow a {
			font-size:  1.7vmax;
			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.2vw;
			margin-top: 0;
			margin-bottom: 0;
		}

		/* Style Copyright Section */
		.copyright {
			width: 100%;
			height: auto;
			text-align: center;
			background-color: #024A94;
			color: #FFFFFF;
			font-size: 1vw;
			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%;
		}

		


@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;
				}	
	
				/* 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;
				}
		
				.sidebar #menubar .menu ul li {
					font-size: 11px;
					}	
		
			/* 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%;
			 } 
		}


	/* Media Query for Small Displays */
	/*media query for small screen devices */

	@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;
				}
		
			/* Newsletter Section */

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

					.copyright {
					font-size: 2vw
				}


			/* Cookie Banner */

			.cookie-banner {
			  left: 30%; 
			  width: 65%;
			  height: 40%;
			 } 	
		
		
			/* 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%;
			 } 	
		}
		
		
	/* Media Query for Tablets: */
	
	@media only screen and (min-width: 481px) and (max-width: 768px) {
		
			.container {
				width: 100%;
				padding-right: 2%;
				}
		
			 .nav-sub{  
				 position:absolute;   
				 top:10vh;  
				 right:0px;  
				 flex-direction:column;  
				 background-color:rgb(0,0,0,0.75);  
				 border-radius:0px 0px 0px 20px;  
				 transition:transform 0.3s ease-in;  
				 transform:translate(100%);  
			  }  
			 .nav-change{  
			 	transform:translate(0%);  
			  }  
			 .ham{  
			  	display:block;  
			  }  
			 .change .bar1 {  
			 	transform: rotate(45deg) translate(8px,3px);  
			 }  
			 .change .bar2 {  
			 	opacity: 0;  
			 }  
			 .change .bar3 {  
			 	transform: rotate(-45deg) translate(8px,-3px);  
			 } 	
		
		
			/* Style the navigation bar links */

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

				.jump_address {
					position: absolute;
					top: -9.5vh;
				}
		
			/* Buttons for product overview subpages */	
		
			#subpages .subpagesleft {
					font-size: 3vw;
			}

			#subpages .subpagesright {
					font-size: 3vw;
			}

			.overviewbutton {
					width: 30px;
					height: 30px;
					padding: 8px;
			}
		
			.overviewbutton-2 {
					width: 30px;
					height: 30px;
					padding: 8px;				
			}

			.overviewbutton-4 {
					width: 30px;
					height: 30px;
					padding: 8px;		
			}			
		
			/* Each product Information in the catalog */

  				.productRow .productInfo {
					width: 180px;
			}		

			/* Product's images in catalog */

			.productInfo img {	
					width: 160px;
					height: 160px;
			}	
		
			/* 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 {
				width: 100%;
				padding-right: 2%;
			}


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

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

			/* Buttons for product overview subpages */	
		
			#subpages .subpagesleft {
					font-size: 3vw;
			}

			#subpages .subpagesright {
					font-size: 3vw;
			}

			.overviewbutton {
					width: 30px;
					height: 30px;
					padding: 8px;
					font-size: 12px;
		  			margin: 1px 0px;		
			}
		
			.overviewbutton-2 {
					width: 30px;
					height: 30px;
					padding: 8px;
					font-size: 12px;
				  	margin: 1px 2.8% 1px 0px;
			}

			.overviewbutton-4 {
					width: 30px;
					height: 30px;
					padding: 8px;
					font-size: 12px;
				  	margin: 1px 2.8% 1px 0px;
			}	
		
		
			/* Each product Information in the catalog */

  				.productRow .productInfo {
					width: 180px;
			}		

			/* Product's images in catalog */

			.productInfo img {	
					width: 160px;
					height: 160px;
			}
		
			/* Newsletter Imprint Section */

			/* Style Newsletter Imprint Continaner */

			.container_newsletter_imprint {
				width: 100%;
				   }

				/* Newsletter Section */

					.newsletter {
						font-size: 2vw;	
					}

				/* Button */

					.button {
						width: 20%;
						font-size: 2.2vw;
					}
		
				.backtotop {
					font-size:  2vw;
				}			

				/* Style Copyright Section */

					.copyright {
						font-size: 2.5vw;
					}


				/* Cookie Banner */

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