@charset "utf-8";
/* CSS Document */

:root{
	--page-width:980px;
	
	--kluetzer-blau:#0076bd;
	--kluetzer-grau:rgba(88,88,88,1);
	
	--background-blue:#78b0e3;
	--background-grey: rgba(247,247,247,1.00);
	
	
}

* {
	box-sizing:border-box;
}

html, body {
	width:100%;
	min-height:100%;
	position:relative;
	
	padding:0;
	margin:0;
	
	font-family:'Muli','Arial',sans-serif; 
	font-style:normal;
	font-size:93.75%;
	color:rgba(88,88,88,1);
	
	background-color:var(--background-blue);
}

html{
	/*	force scrollbars  */
	overflow-y:scroll;  
	scroll-behavior: smooth;
}

	h1, h2, h3, h4, h5, h6, p, td, ul, ol, li, figure, button {
		margin:0;
		padding:0;
		font-weight:normal;
		border:0;
		outline:0;
		background-color:transparent;
	}

strong{
	font-weight:700;
}

a{
	font-weight: 500;
	color:rgba(0,118,189,1.00);
	text-decoration: underline;
}
a:hover, a:active{ text-decoration: none; }

.marginBottom15{ margin-bottom:15px; }
.marginBottom30{ margin-bottom:30px; }

.noMarginTop{ margin-top: 0; }
.noMarginBottom{ margin-bottom: 0; }




/*	-------------------------------------------------------------------------------  CENTRAL FLEX DEFINITIONS  */
.flx{ display:flex; }

.flxRw{ flex-flow:row nowrap; }
.flxCl{ flex-flow:column nowrap; }

.flxJCA{ justify-content: space-around; }
.flxJCB{ justify-content: space-between; }
.flxJCC{ justify-content: center; }
.flxJCE{ justify-content: flex-end; }

.flxAIC{ align-items: center; }
.flxAIE{ align-items: flex-end; }



/*	-------------------------------------------------------------------------  MAIN CONTENT WRAPPER WITH SHADE  */
.khkzt_cntWrp{
	width:100%;
	min-width:320px;
	max-width:var(--page-width);
	height:auto;
	min-height:100vh;
	
	position:relative;
	z-index:500;
	
	display:block;
	margin:0 auto;

	background-color:rgba(255,255,255,1);
	box-shadow: 0px 0px 20px -2px rgba(0,0,0,0.2);
}

@media only screen and (min-width:444px){
	.khkzt_cntWrp{
		width:90%;
		margin:0 auto 50px;
	}
}



/*	-------------------------------------------------------------------------------------------------  HEADER  */
.khkzt_hdrWrp{
	width:100%;
	position:fixed;
	top:0;
	z-index:1000;
}
	.khkzt_hdr{
		width: 100%;
		min-width:320px;
		max-width:var(--page-width);
		height: 80px;	 /*	should correspond with top padding of main content  */

		margin:0 auto;
		padding: 10px 25px;

		background-color:rgba(255,255,255,1);
	}
	@media only screen and (min-width:444px){
		.khkzt_hdr{
			width: 90%;
			height: 115px;	 /*	should correspond with top padding of main content  */
			padding: 20px 25px;
		}
	}


	/*	-------------------------------------------------------------------------------------  LOGO  */
	.khkzt_logo{
		width:220px;
		height:auto;
		
		display:block;
	}
	@media only screen and (min-width:444px){
		.khkzt_logo{
			width:288px;
		}
	}

	/*	--------------------------------------------------------------------------------  MAIN MENU  */
	.khkzt_navMain{
		width:auto;
		
		display:none;
		padding-bottom:2px;
		margin:0;
	}
		@media only screen and (min-width:999px){
			.khkzt_navMain{
				display:flex;
			}
		}

		.khkzt_navMain > li{
			list-style:none;
			padding:0;
			
			font-size:0.90rem;
			text-transform: uppercase;
		}
		@media only screen and  (min-width:1080px){
			.khkzt_navMain > li{
				font-size:1.0rem;
			}
		}

		.khkzt_navMain a { 
			text-decoration: none;
			padding:0 7px;
		}

		@media only screen and  (min-width:1080px){
			.khkzt_navMain a{
				padding:0 10px;
			}
		}

		.khkzt_navMain a:link, 
		.khkzt_navMain a:visited { 
			color:rgba(0,0,0,0.6); 
		}

		.khkzt_navMain a:hover, 
		.khkzt_navMain a:active, 
		.khkzt_navMain a:focus,
		.khkzt_navMain .current_page_ancestor a,
		.khkzt_navMain .current_page_item a{ 
			color:rgba(0,120,190,1); 
		}

		/*	------------------------------------------------------------------  SUB MENUS  */
		.khkzt_navMain .menu-item-has-children{
			position:relative;
			
		/*	background-color:rgba(255,220,100,1);  */
		}
			.khkzt_navMain .menu-item-has-children .khkzt_submenuWrp{
				height:0;
				overflow:hidden;
				
				position:absolute;
				left:50%;
				z-index: -1;
				transform: translateX(-50%);
			
				transition: height 0.5s;
				
				background-color:rgba(255,255,255,1);
				box-shadow: 0 5px 5px 0 rgba(0,0,0,0.1);
			}
				.khkzt_navMain .sub-menu{
					margin:0;
					padding:10px 0;
				}
					.khkzt_navMain .sub-menu li{
						list-style:none;
						padding:8px 20px 8px;
						
						font-size: 0.9rem;
						text-align: center;
					/*	text-transform: none;  */
						white-space: nowrap;
						
					}

					.khkzt_navMain .sub-menu a:link, 
					.khkzt_navMain .sub-menu a:visited { 
						color:rgba(0,0,0,0.6); 
					}

					.khkzt_navMain .sub-menu a:hover, 
					.khkzt_navMain .sub-menu a:active, 
					.khkzt_navMain .sub-menu a:focus,
					.khkzt_navMain .sub-menu li.current_page_item a{ 
						color:rgba(0,120,190,1); 
					}



	
	/*	----------------------------------------------------------------------  MENU ICON  */
		#khkzt_navMblBttn{
			display:block;
		}

		@media only screen and (min-width:999px){
			#khkzt_navMblBttn{
				display:none;
			}
		}
			.khkzt_hdrIcon{
				width:20px;		/*	37 is default	*/
				height:21px;
				margin:0;
				position:relative;
			}
			@media only screen and (min-width:444px){
				.khkzt_hdrIcon{
					width:26px;		/*	37 is default	*/
					height:27px;
				}
			}
			
				.khkzt_hdrIcon:hover{ opacity:1;}

				.khkzt_hdrIcon img,
				.khkzt_hdrIcon a{
					width:100%;
					height:100%;
					display:block;
				}

				.khkzt_menuIconLine{
					width:100%;
					height:3px;
					overflow:hidden;
					
					position:absolute;
					left:0;
					
					background-color: var(--kluetzer-blau);
					
					--rotationUp: 	45deg;
					--rotationDown: -45deg;
					--1stheight: 	0px;
					--2ndheight: 	7px;
					--3rdheight: 	14px;
					--animduration: 0.5s;
					
					transition:color 0.5s, background 0.5s;
				}
				@media only screen and (min-width:444px){
					.khkzt_menuIconLine{
						height:4px;

						--2ndheight: 9px;
						--3rdheight: 18px;
					}
				}

				#khkzt_menuIconLine1{ top: var(--1stheight); }
				#khkzt_menuIconLine2{ top: var(--2ndheight); }
				#khkzt_menuIconLine3{ top: var(--3rdheight); }

				.topslant{
					animation: topslant var(--animduration) forwards;
				}
				.topstraight{
					animation: topstraight var(--animduration) forwards;
				}

				@keyframes topslant {
					0% {	transform: rotate(0);					top: var(--1stheight);	}
					50% {	transform: rotate(0);					top: var(--2ndheight); 	}
					100% {	transform: rotate(var(--rotationUp));	top: var(--2ndheight);	}
				}

				@keyframes topstraight {
					0% {	transform: rotate(var(--rotationUp));	top: var(--2ndheight);	}
					50% {	transform: rotate(0);					top: var(--2ndheight);  }
					100% {	transform: rotate(0);					top: var(--1stheight);	}
				}

				.middlefade{
					animation: middlefade var(--animduration) forwards;
				}
				.middleshow{
					animation: middleshow var(--animduration) forwards;
				}

				@keyframes middlefade {
					0% {	opacity:1; }
					50% {	opacity:1; }
					51% {	opacity:0; }
					100% {	opacity:0; }
				}

				@keyframes middleshow {
					0% {	opacity:0; }
					50% {	opacity:0; }
					51% {	opacity:1; }
					100% {	opacity:1; }
				}

				.bottomslant{
					animation: bottomslant var(--animduration) forwards;
				}
				.bottomstraight{
					animation: bottomstraight var(--animduration) forwards;
				}

				@keyframes bottomslant {
					0% {	transform: rotate(0);					top: var(--3rdheight);	}
					50% {	transform: rotate(0);					top: var(--2ndheight); 	}
					100% {	transform: rotate(var(--rotationDown));	top: var(--2ndheight);	}
				}

				@keyframes bottomstraight {
					0% {	transform: rotate(var(--rotationDown)); top: var(--2ndheight);	}
					50% {	transform: rotate(0deg);				top: var(--2ndheight);	}
					100% {	transform: rotate(0deg);				top: var(--3rdheight);	}
				}



/*	--------------------------------------------------------------------------------------------  MOBILE MENU  */
.khkzt_menuMobileWrp{
	width:100%;
	height:auto;
	
	padding:0;
	margin:0;
	
	position: absolute;
	top:-1000px;
	left:0;
	z-index:900;
}
	.khkzt_navMobile{
		width:100%;
		max-width: var(--page-width);
		margin:0;
		padding:20px 90px;
		
		background-color: var(--background-grey);
	}
		.khkzt_navMobile li{
			padding:0 0 5px;
			
			font-size:1.1rem;
			
			list-style:none;
			text-align:center;
			text-transform: uppercase;
		}
		.khkzt_navMobile a{
			color:var(--kluetzer-grey);
			text-decoration: none;
		}

		.khkzt_navMobile .current_page_ancestor a,
		.khkzt_navMobile .current_page_item a{ 
			color:rgba(0,120,190,1); 
		}

	/*	-----------------------------------------------------------  MOBILE SUB MENUS  */
		.khkzt_navMobile .sub-menu{
			margin:0;
			padding-top:5px;
		}
			.khkzt_navMobile .sub-menu li{
				font-size:1.0rem;

				text-transform: none;
			}

				.khkzt_navMobile .sub-menu a:link, 
				.khkzt_navMobile .sub-menu a:visited { 
					color:rgba(0,0,0,0.6); 
				}

				.khkzt_navMobile .sub-menu li.current_page_item a{ 
					color:rgba(0,120,190,1); 
				}


@media only screen and (min-width:444px){	
	.khkzt_navMobile{
		width:90%;
	}
}

@media only screen and (min-width:999px){	
	.khkzt_menuMobileWrp{
		display:none;
	}
}












/*	-------------------------------------------------------------------------------------------  MAIN CONTENT CONTAINER  */
.khkzt_mainWrp{
	width:100%;
	height:auto;
	min-height:100vh;
	
	padding-top: 80px; 	/*	should correspond with header height  */
}
@media only screen and (min-width:444px){	
	.khkzt_mainWrp{
		padding-top:115px; 	/*	should correspond with header height  */
	}
}

	/*	-------------------------------------------------------------------------------  KEY VISUAL  */
	.khkzt_mainKeyViz{
		width:100%;
		padding-bottom:46%;
		position:relative;
		
		background-color:rgba(0,0,0,0.1);
	}
		.khkzt_keyVizImg{
			width:100%;
			height:auto;

			display:block;

			position:absolute;
			left:0;
			top:0;
		}

	/*	-----------------------------------------------------  KEY VISUAL GALLERY (FRONT PAGE ONLY)  */
	.khkzt_mainKeyVizGal{
		width:100%;
		padding-bottom:46%;
		position:relative;
		
		background-color: var(--kluetzer-blau);
	}
		.khkzt_galleryWrp{
			width:100%;
			height:100%;
			margin:0;
			
			position:absolute;
			top:0;
			left:0;
			
			overflow:hidden;

		/*	background-color:#3f7c06;  */
		}

			.khkzt_galleryStrip{
				width:100%;
				height:100%;
				margin:0;
			}

			.khkzt_galleryImg img{
				width:100%;
				height:auto;
				display:block;
			}



	/*	-----------------------------------------------------------------------------  MAIN CONTENT  */
	.khkzt_main{
		width:100%;
		padding:30px 30px 50px;
	}
	@media only screen and (min-width:444px){	
		.khkzt_main {
			padding:30px 90px 50px;	
		}
		.home .khkzt_main{
			padding: 30px 0 50px;
		}
	}
		h1 {
			color:var(--kluetzer-blau);
			font-size: 25px;
			margin: 5px 0 1.5rem 0;
		}
		h2 {
			color:var(--kluetzer-blau);
			font-size: 18px;
			font-weight: 500;
			margin: 2rem 0 0.5rem;
		}
			img + h2 {
				margin-top:0;
			}
			.leistungen h2 { margin-top:0; }

		h3 {
			color:#585858;
			font-size: 15px;
			margin: 5px 0 10px 0;
			text-transform: uppercase;
		}
		p, ul, ol {
			margin:8px 0;	
		}
		ul, ol {
			margin-left:20px;
		}

		.alignleft{
			display:block;
			margin:0 auto 15px;
			
			float:none;
		}
		@media only screen and (min-width:666px){
			.alignleft{
				float:left;
				margin:0 15px 15px 0;
			}
		}


	/*	---------------------------------------------------------------------------------  SPECIAL CONTENT: START  */
	/*	---------------------------------------------------------------------------------  INFO ICONS  */
	.khkzt_startInfoWrp{

	}
		.khkzt_startInfo{
			text-decoration: none;
		}

			.khkzt_startInfo h2{
				margin:15px 0 30px 0;
				padding:0;
				font-weight:400;
				text-transform: uppercase;
				color: var(--kluetzer-grau);
			}
			.khkzt_startInfo:hover h2{
				color: var(--kluetzer-blau);
			}

	@media only screen and (min-width:666px){
		.khkzt_startInfoWrp{
			flex-flow:row;
			justify-content: space-around;
		}
	}			

	/*	---------------------------------------------------------------------------------  PEOPLE  */
	.khkzt_startPeopleWrp{
		padding: 30px 0 0;
	}
		.khkzt_startPeople{
			width:100%;
			max-width:410px;
			margin:8px;

			background-color: var(--background-grey);
		}
			.khkzt_startPeopleData{
				padding:0 20px 30px 10px;
			}

			.khkzt_startPeopleData{
				text-align:center;
			}

	@media only screen and (min-width:666px){
		.khkzt_startPeople{
			flex-flow:row;
		}
			.khkzt_startPeopleData{
				text-align:left;
			}
	}

	@media only screen and (min-width:999px){
		.khkzt_startPeopleWrp{
			flex-flow:row;	
			justify-content: center;
			align-items:flex-start;
		}
		.khkzt_startPeople{
			width:48%;

		}
	}

	
	/*	-------------------------------------------------------------------------------------  SPECIAL: TECHNIKEN  */	
	.techniken .khkzt_main img{
		width:100%;
		height:auto;
		margin:0 0 15px;
	}

	@media only screen and (min-width:666px){	
		.techniken .khkzt_main img{
			width:48%;
		}
			.techniken .khkzt_main img:first-of-type{
				margin-right:2%;
			}
	}




	/*	---------------------------------------------------------------------------------  SPECIAL CONTENT: LINKS  */
	/*	--------------------------------------------------------------------------  SPECIAL CONTENT: CERTIFICATES  */
	.links h1,
	.zertifizierungen h1{
		padding-left: 0;
		text-align: center;
	}

	.khkzt_linkWrp,
	.khkzt_certificateWrp{
		display:flex;
		flex-flow:column;
		align-items: center;

		margin:0 0 50px;
	}
		.khkzt_linkLogo,
		.khkzt_certificateLogo{
			width:194px;
			height:auto;
			
			flex-grow: 0;
			flex-shrink: 0;

			margin:50px 0 30px;

			display:block;
		}

		.khkzt_linkData,
		.khkzt_certificateData{
			flex-grow:1;
		}
			.khkzt_linkData h2,
			.khkzt_certificateData h2{
				margin:0 0 0.5rem;

				font-size:1.0rem;
				color:#585858;

				text-align: center;
			}
			.khkzt_certificateData h2{
				color: var(--kluetzer-blau);	
			}
			.khkzt_linkData p,
			.khkzt_certificateData p{
				text-align: center;	
			}
			.khkzt_linkData a,
			.khkzt_certificateData a{
				display:block;
				text-align: center;	
			}

	@media only screen and (min-width:777px){	
		.links h1,
		.zertifizierungen h1{
			padding-left: 257px;
			text-align: left;
		}

		.khkzt_linkWrp,
		.khkzt_certificateWrp{
			flex-flow:row;
			align-items: flex-start;
			margin:50px 0 30px;
		}

			.khkzt_linkLogo,
			.khkzt_certificateLogo{
				margin:0 57px 0 0;
			}

			.khkzt_linkData h2,
			.khkzt_linkData p,
			.khkzt_linkData a,
			.khkzt_certificateData h2,
			.khkzt_certificateData p,
			.khkzt_certificateData a{
				text-align: left;	
			}
	}


/*	-------------------------------------------------------------------------------------------------  FOOTER  */
.khkzt_ftrWrp{
	width:100%;
	height:auto;
	min-height:100px;
	
	position:relative;
	padding:25px;
	
	text-align: center;
	
	background-color:rgba(247,247,247,1.00);
}
	.khkzt_ftrWrp p{
		margin:0;	
	}
	.khkzt_contactFon.withIcon{
		padding:10px 0;

		font-size:1.25rem;
	}
		.khkzt_contactFon.withIcon a{
			padding:0 0 0 33px;

			font-weight:300;
			text-decoration: none;

			background-image:url("../media/images/kluetzer-zahntechnik_icon_telefon.jpg");
			background-repeat: no-repeat;
		}

	.khkzt_contactEmail{
		padding:10px 0;

		font-size:1.0rem;
	}
		.khkzt_contactEmail.withIcon a{
			padding:0 0 0 25px;

			font-weight:300;
			text-decoration: underline;

			background-image:url("../media/images/kluetzer-zahntechnik_icon_email.jpg");
			background-repeat: no-repeat;
			background-position: left center;
		}


	/*	----------------------------------------------------------------------------  THEM SIGULS  */
	.khkzt_sigulsWrp{
		width:auto;
		height:150px;

		padding:20px 0;

		position:relative;
		justify-content: center;
	}
	@media only screen and (min-width:999px){
		.khkzt_sigulsWrp{
			position: absolute;
			top:50%;
			right:30px;
			transform: translateY(-50%);
		}
	}
		.khkzt_sigul{
			width:110px;
			display:inline;
		}
			.khkzt_sigulImg{
				width:auto;
				height:100%;
			}



/*	--------------------------------------------------------------------------------------------  POST FOOTER  */
.khkzt_postFtr{
	width:100%;
	height:auto;
	min-height:50px;
	
	position: relative;
	padding:25px;
	margin:0;
}
	.khkzt_postFtr li{	
		list-style: none;
	}
		.khkzt_postFtr li:not(.khkzt_postFtr li:first-of-type)::before{	
			content: '';
			padding:0 8px;
		}
			.khkzt_postFtr a:link, .khkzt_postFtr a:visited{ color: var(--kluetzer-grau); }

@media only screen and (min-width:666px){
	.khkzt_postFtr{
		flex-flow: row;
	}
	.khkzt_postFtr li:not(.khkzt_postFtr li:first-of-type)::before{	
		content: '·';
	}
}



/*	------------------------------------------------------------------------------  THE WHITE LIGHT  */
.khkzt_theWhiteLight{
	width:0;
	height:0;
	
	position: fixed;
	top:0;
	left:0;
	z-index:800;
		
/*	background-color:rgba(255,255,255,1);  */
	background-color:white;
	opacity:0;
	
	transition: opacity 1s;
}