@charset "UTF-8";
/* CSS Document */
<style> 
	<style type="text/css" media="screen">
		
		@font-face { font-family:"Klavika Basic Medium"; src:url(fonts/KlavikaBasic-Medium.otf);  }
		@font-face {font-family:"Klavika Basic Regular"; src:url(fonts/KlavikaBasic-Regular.otf); }
		@font-face {font-family:"Klavika Basic Light"; src:url(fonts/KlavikaBasic-Light.otf);}
			
			html {  -webkit-text-size-adjust: 100%; }
			body, html {  margin: 0 auto;
						  height: 100%;  }
			
			body { margin: 0 auto; min-height: 100%; 
					
			
			
			}
			
		/*background-image: url(../img/01_Projekte/10_KAH_Byzanz/Bundeskunsthalle_Byzanz_najafi-p-06.png);
			background-position: center center;
			background-repeat: no-repeat;
			background-attachment: fixed;
			background-size: cover;
			background-color: #464646;*/
				
			#top {
			position: fixed; 
			height: 45px; 
			margin: 0 auto;
			opacity: 0.9;
			background-color: #FFF; 
						z-index: 3;
			width: 100%;
			box-shadow:0px 3px 6px 0px #666;

			
			
			}    
			
			.topsticky {
			position: fixed; 
			background-color: #FFF;
			opacity: 0.9;
			height: 45px;
			margin: 0 auto;
			z-index: 3;
			width: 100%;
			box-shadow:0px 4px 4px 0px #CCC;

			}    
			
			
			.topstickyUp {
				
			position: fixed; 
			background-color: #FFF;
			
			height: 45px;
			margin: 0 auto;
			z-index: 3;
			width: 100%;
		
			
			}    
			
			div.backgroundtrans{
				
			height: 28px; 
			top: 45px;
			position:  relative; 
			background-color: #FFF;
			width: 100%; 
			margin: 0 auto;
			z-index: 2;


			}
			header {
			position: relative;
    		max-width: 1140px;
			margin: 0 auto;
			
			
			}
			 
			header hgroup {
			position: absolute;
			vertical-align: middle;
			width:1px;
			left: 20px;
			margin: 0 auto;
			top:7px;
			height: 1px;
			float:left;
		

			 }
		
			nav {
  			  float: right;
				}
			nav ul {
    		margin-top: 13px;
    		padding: 0;  
   			list-style: none;
   			position: relative;
    		display: inline-table;
			right: 20px; 
			}
				
			#impressum{
				
		}
		
		#content {
			min-height: calc(100% - 110px);
			position: relative; 
			max-width:  1140px;
			margin:0px auto;
			width: 100%;
			
		
}
			#contentKontakt {
			min-height: calc(100% - 110px);
			position: relative; 
			max-width:  1140px;
			margin:0px auto;
			width: 100%;
			
			-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}

@keyframes fadein{
    0% { opacity:0; }
   30%  { opacity:0; }
    100% { opacity:1; }
}
/* Firefox < 16 */
@-moz-keyframes fadein {
    0% { opacity:0; }
    30% { opacity:0; }
    100% { opacity:1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    0% { opacity:0; }
   30% { opacity:0; }
    100% { opacity:1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    0% { opacity:0; }
    30%  { opacity:0; }
    100% { opacity:1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    0% { opacity:0; }
    30% { opacity:0; }
    100% { opacity:1; }
}	
				
			#projektbeschreibung
			
			{	min-height: calc(100% - 20px);
				position:  relative; 
				max-width: 1140px;
				margin:0px auto;
				width: 100%;
				display: inline-table;
		
			}
				 
				#minheight {
				height: 80px;
				 width: 100%;
				
				}
				 
				#footer {
	position: absolute;
	bottom: 10px;
	height: 20px;
	margin: 0px auto;
	
	padding-left: 20px;
	padding-right: 20px;
	
	vertical-align: middle;
	display: inline-table;
	left: 3px;				
			}
				/* copyright {
				
				position: relative;
    				width: 100%;
				max-width: 1140px;
				vertical-align: middle;
				
				}
				
				copyright hgroup {
				position: relative;	
				float: left;
			 	width: 100%;
				
				
				
				}
				
				impressum {
				float: right; 
				
				}
				impressum ul{
				float: right; 
				position: relative;
				
			 	width: 100%;
				padding-right: 40px;
				
				text-align: right; 
					
				}*/ 
				
				
/* KOpie Footer stand 19.07.2018 - #footer{
				
				position: absolute;
				bottom: 17px;
				height: 20px;
				margin: 0px auto;
				text-align:left;
				padding-left:20px;
				vertical-align:middle;
				
				
				}*/
				
				
			#minheight2 {
				height: 30px;
				width: 100%;
					} 
			
				#minheight3 {
				height: 25x;
					width: 100%;
					} 
			
				
			
			#icons 	{
				height: 17px; position: relative; margin: 0 auto; width: 100%; top:60px; z-index: 2;


			} 	
		
			.img30links { 
			left: 10px; margin: 0 auto;float: left; padding-right: 10px; position: relative; 
			
			}
			
			.img30linksProjekte { 
			left: 10px; margin: 0 auto;float: left; padding-right: 10px; position: relative; 
			
			}
			
			.img30linksProjekte { 
			padding-right: 0px; padding-left: 0px;position: relative; margin: auto;  width: 150px; height: 17px; float: left;
			font-family : "Klavika Basic Regular";font-size:0.7em; line-height:1.6; vertical-align: middle; letter-spacing:1px; text-align: left; overflow: hidden; white-space: nowrap;
			}
			
			.img30rechts { 
			padding-left: 10px; position: relative; margin: auto; right: 16px; width: 30px; height: 17px; float: right;
			
			}
			
			.img30rechtsProjekte { 
			padding-right: 0px; padding-left: 12px;position: relative; margin: auto; width: 100px; height: 17px; float: right;
			font-family : "Klavika Basic Regular";font-size:0.7em; line-height:1.6; text-align: left; vertical-align: middle; letter-spacing:1px;overflow: hidden; white-space: nowrap;
			}
			
			
			

			span.menueleiste { 
			font-family : "Klavika Basic Medium";font-size:0.8em; letter-spacing: 1px; 
			margin-left:17px; text-align:right;  }
			
			span.iconleiste { 
			font-family : "Klavika Basic Regular";font-size:0.6em; letter-spacing:1px; 
			 }
							  
			span.Zwischentitel { font-family: "Klavika Basic Regular"; font-size: 1em;
				text-transform: uppercase   }
			span.bold { font-family: "Klavika Basic Regular"; font-size: 1em;
			 }
				
				
			span.Projekttitel { font-family : "Klavika Basic Regular";font-size: 1.3em;
				text-transform : uppercase;text-align:center; margin:auto;  line-height: 0.1  }
			span.ProjekUntertitel { font-family : "Klavika Basic Light";font-size: 1em;
				text-transform : uppercase;text-align:center;margin:auto;    }
			
			span.Fliesstext {font-family: "Klavika Basic Light";font-size: 1em; margin:auto; webkit-hyphens: auto; -moz-hyphens: auto; 
			hyphens:  auto; -moz-hyphens: auto;  -o-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto;  }
		   
		   span.FliesstextImpressum {font-family: "Klavika Basic Light";font-size: 0.9em; margin:auto; -moz-hyphens: auto;
		   -o-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto;  }
			
			span.footer { font-family: "Klavika Basic Light" ;font-size: 0.8em; color:#777}
			
			span.Titeltext {font-family: "Klavika Basic Medium";font-size: 2em; margin:auto;  color:#FFF; 
			text-transform:uppercase; letter-spacing:0.7px;  line-height: 1;  } /*text-shadow: 1px 1px 3px #888;*/
			
			span.TitelUntertiteltext {font-family: "Klavika Basic Regular";font-size: 1em; margin:auto;-moz-hyphens: auto; text-transform: uppercase;
			letter-spacing: 0.5px; line-height: 0.1; 
			-o-hyphens: auto;  												                  
			-webkit-hyphens: auto; 
			-ms-hyphens: auto;
			hyphens: auto;   
		 color:#333  }
		   
			T3 {  font-family: "Klavika Basic Regular"; font-size: 1em; text-transform : uppercase;  }
			
			span.Spaltentext {font-family: "Klavika Basic Light";font-size: 0.9em; margin:auto;   }
			
			h1 {font-family: "Klavika Basic Light";font-size: 0.9em; margin:auto; line-height: 2.2;  -webkit-column-break-before: always; -moz-column-break-before: always; column-break-before: always; }
			
			p.EinfacherAbsatz {line-height : 1.2;margin: auto; }
		
			div.Einfacher-Textrahmen {
				text-align: left;   margin:auto; ; padding-left:20px; padding-right:20px; vertical-align:middle; max-width: 1100px; 
				}
				
			div.Zweispaltiger-Textrahmen {
			text-align: left;   margin:auto;  padding-left:20px; padding-right:20px; vertical-align:middle; max-width: 1100px;
			
			} 
			
			
			
			div.Projekt-Textrahmen {
				  max-width: 1100px ;text-align:left;  margin:auto; padding-left:20px; padding-right:20px; vertical-align:middle; }
			
			div.Projekt-Factsrahmen {
				  max-width: 1100px ;text-align:left;   margin:auto; padding-left:20px; padding-right:20px; vertical-align:middle; }
			
			a:visited {text-decoration: none; color: #777;}
			a:link {color: #777; text-decoration: none;}
			a:hover { color: #B29E6E;text-decoration: none;}
			a:active {color: #777 ;text-decoration: none;}
			
			/* projekte - gallery grid  */
	
			
			
			div.gallery {
				  display: flex;
				  flex-wrap: wrap;
				  margin: 0 auto;
				  max-width: 1100px;
				  padding: 20px;
				}
			
			
			#container {
				 position: relative;
				 opacity: 1; 
				display: inline-block;	
				  margin-right: 0px;
				  width: 100%;
				  height: auto;
				  color: black;
				  margin-bottom: 40px;
				  overflow: hidden;
			   	text-align: left;
				z-index: 1;
				
				

				} 
				/* containerbox animation
				-webkit-transform: translateY(15px);
					transform: translateY(15px);
					-webkit-animation: moveUp 2s ease forwards;
					animation: moveUp 2s ease forwards;
					
					background-color: rgba(0, 0, 0, 0.3);
					
					linear-gradient(-135deg, hsla(0,30%,40%,0) 10%,
   									hsl(0,10%,40%) 100%)
									
									linear-gradient(15deg, #666 1%,red
				 60%);
				 background: radial-gradient(10em 5em ellipse at 50% -10%, transparent 100px, rgba(255, 0, 0, 1));
					*/
				/**/ 
				div.containerbox { 
				background-color: rgba(255, 255, 255, 0.9);
				
					opacity: inherit;
					width: 100%;
					position: absolute;
					height: 37px;
					display: block;
					bottom: 0px;
					left: 0px;
					z-index: 2;
					transition: height 0.3s;
					text-decoration: none;
					visibility: visible;
					transform-name: moveDown;
					
				}
				 
				#container span {
					text-indent: 1px;
					position: absolute;
					float: left;
					line-height: 1;
					width: 100%;
					text-align: left;
					top: 5px;
					z-index: 3;			  
					text-decoration: none;
					transition: bottom 0.3s;
					-webkit-transition: bottom 0.3s;

					

					}
				
				
					T1{ 
					text-indent: 15px;
					font-family: "Klavika Basic Medium"; font-size: 0.8em;
					letter-spacing: 0.05em;
					text-transform : uppercase;
					
					color: #333;
					text-align: left ;
					float: left;
					font-weight: 550;
					z-index: 3;				  
					text-decoration: none;
					top: 10px;
					

					}
					
					
					
					T2{ 
					text-indent: 15px;
					font-family: "Klavika Basic Regular"; font-size: 0.8em;
					color: #666;
					letter-spacing: 0.04em;
				
					text-align: left ;
					float: left;
					z-index: 3;
			
					}
				
				
				a.gallery {
				  display: block;
					margin-right: 0px;
				  text-decoration: none;
				  color: black;
				  border: none;
				z-index: 1;
			
				
			
				}
				
					
			/* #d7a700 = ocker alt - #AD8A30= ocker neu 
			
				visibility: hidden;
  			opacity: 0;
  				transition: visibility 0.3s, opacity 0.3s linear;
				
				visibility: hidden;
  			opacity: 0;
  			transition: visibility 0.3s, opacity 0.3s ease-in-out  ; */
							

	
			
			a:hover div.containerbox  {  
			webkit-height: 54px;
			height: 54px;
		
				}
			
			
			/* transform: scale(1.02);*/
			
				a.gallery:hover img.gallery {
				  
				  -webkit-filter: grayscale(0%); color:#B29E6E;
				-webkit-user-select: none;
				   }
				
				
				
				
				
				img.gallery {
				  border: none; 
				  max-width: 100%;
				  hight: auto;
				  display: block;
				  background: #ccc;  
				transition: transform 0.3s ease-in-out; 
				-webkit-transition: transform 0.3s ease-in-out; 
				z-index: 1;
				x-webkit-filter: grayscale(40%); 
  				filter: grayscale(40%);
				}
				
				
				
				/* Effect 2: Move Up 
				
				fadeOutDown */
				
				
	/* Effect 2: Move Up */


@-webkit-keyframes moveUp {
	0% { }
	100% { -webkit-transform: translateY(0); }
}

@keyframes moveUp {
	0% { }
	100% { -webkit-transform: translateY(0); transform: translateY(0); }
}



/* Effect end */
	
	
		@media screen and (max-width: 350px) {
			
				
				span.menueleiste { 
				font-family : "Klavika Basic Medium";font-size:0.7em; letter-spacing:1px; 
				margin-left:10px; text-align:right;  }
				span.bold { font-family: "Klavika Basic Regular"; font-size: 1em;
			 }
				

				T1{ 
					text-indent: 8px;
					font-family: "Klavika Basic Medium"; font-size: 0.7em; 
					text-transform : uppercase;
					text-align: left ;
					float: left;
					z-index: 3;
					}
		img.gallery {
		
				-webkit-filter: grayscale(85%); 
  				filter: grayscale(85%);
				}
				
					
				}
				/*640*/
				
				@media screen and (min-width: 640px) {
				
				 body { margin-top: 0px; }
				
			
				#container {
					width: 47.8%;
					margin-right: 20px ;
				  }
				
				 
				#container:nth-of-type(2n) { margin-right: 0;}
				span.Titeltext {font-family: "Klavika Basic Medium";font-size: 2em; margin:auto;  color:#fff; 
			text-transform:uppercase; letter-spacing:0.7px;  line-height: 0.9;  } /*text-shadow: 1px 1px 3px #888;*/
			
			span.TitelUntertiteltext {font-family: "Klavika Basic Regular";font-size: 1.2em; margin:auto;-moz-hyphens: auto; text-transform: uppercase;
			letter-spacing: 0.5px; line-height: 1.2; 
			-o-hyphens: auto;  												                  
			-webkit-hyphens: auto; 
			-ms-hyphens: auto;
			hyphens: auto;   
		 color:#333  }
				img.gallery {
		
				-webkit-filter: grayscale(85%); 
  				filter: grayscale(85%);
				}
				
					
				}
				@media screen and (max-width: 800px) {
				
				table.tableSorter{ 
				width: 100%;
			
				overflow-x: scroll;
				
				}
				
				img.gallery {
		
				-webkit-filter: grayscale(85%); 
  				filter: grayscale(85%);
				}
				
					
				}
				
				@media screen and (min-width: 1025px) {
			
				div.containerbox { 
				background-color: rgba(255, 255, 255, 0.9);
				
					opacity: inherit;
					width: 100%;
					position: absolute;
					height: 37px;
					display: block;
					bottom: 0px;
					left: 0px;
					z-index: 2;
					transition: height 0.3s;
					text-decoration: none;
					visibility: visible;
					transform-name: moveDown;
					
				}
		img.gallery {
		
				-webkit-filter: grayscale(85%); 
  				filter: grayscale(85%);
				}
				
			
				 body { margin-top: 1px; }
				.topsticky {
					position: fixed; 
					background-color: #CCC;
					opacity: 0.9;
					height: 45px;
					margin: 0 auto;
					z-index: 3;
					width: 100%;
					top: 0px;
					-webkit-transform: translateY(10px);
					transform: translateY(10px);
					-webkit-animation: moveUp 0.50s ease forwards;
					animation: moveUp 0.50s ease forwards;}
					
			 	 #container {
					width: 31.9%;
				  margin-right: 20px;
				}
				
				 #container:nth-of-type(2n) {
				  margin-right: 20px;
				}
				
				   #container:nth-of-type(3n) {
				  margin-right: 0px;
				}
				
				
				div.Zweispaltiger-Textrahmen {
					max-width: 720px; 
			 column-count: 1;   -webkit-column-count: 1;-moz-column-count: 1;
			 column-gap: 30px ; -webkit-column-gap: 30px; -moz-column-gap: 30px ;
			
			 
			 }
			
			 	 h1 { -webkit-column-break-before: always; -moz-column-break-before: always; column-break-before: always; }
			 
			 div.Projekt-Textrahmen {
				  max-width:60%; padding-right: 0px; padding-left:20px; vertical-align:middle; float: left;   }
			
			 div.Projekt-Factsrahmen {
				  max-width: 30% ; margin:auto; padding-left:20px; padding-right:20px;float:right;}
				
				 span.Projekttitel { font-family : "Klavika Basic Regular";font-size: 1.5em;
				text-transform : uppercase;text-align:center; margin:auto;  line-height: 0.1  } 
		span.Titeltext {font-family: "Klavika Basic Medium";font-size: 2em; margin:auto;  color:#fff; 
			text-transform:uppercase; letter-spacing:0.7px;  line-height: 1;  } /*text-shadow: 1px 1px 3px #888;*/
			
			span.TitelUntertiteltext {font-family: "Klavika Basic Regular";font-size: 1.2em; margin:auto;-moz-hyphens: auto; text-transform: uppercase;
			letter-spacing: 0.5px; line-height: 0.5; 
			-o-hyphens: auto;  												                  
			-webkit-hyphens: auto; 
			-ms-hyphens: auto;
			hyphens: auto;   
		 color:#333  }
			
				}
			
				
/* gelöscht vorläufig  				
				 @media screen and (min-width: 1400px) {
				 
			 	body { margin-top: 17px; }
				.topsticky {
					position: fixed; 
					background-color: #CCC;
					 opacity: 0.9;
					height: 45px;
					margin: 0 auto;
					z-index: 3;
					width: 100%;
					top: 0px;
					-webkit-transform: translateY(17px);
					transform: translateY(17px);
					-webkit-animation: moveUp 0.65s ease forwards;
					animation: moveUp 0.65s ease forwards;}
				#container {
					width: 24% ;
					margin-right: 10px }
				  
				 #container:nth-of-type(2n) {
				  margin-right: 10px;
				}
				   #container:nth-of-type(3n) {
				  margin-right: 10px;
				}  
				  
					#container:nth-of-type(4n) {
  				  margin-right: 0;
 				
				
				}

				
			 	 h1 { -webkit-column-break-before: always; -moz-column-break-before: always; column-break-before: always; }
			 
			 div.Projekt-Textrahmen {
				  max-width:60%; padding-right: 0px; padding-left:20px; vertical-align:middle; float: left;   }
			
			 div.Projekt-Factsrahmen {
				  max-width: 30% ; margin:auto; padding-left:20px; padding-right:20px;float:right; 
			
			*/
					
				/* ende projekte - gallery grid  */
			
			
				
				/*tablesorter*/
				
		table, thead, tbody, th, td, tr {}
			
			
			tr {  margin: 0 auto;  width: 100%; height : 20px;}
			th { padding:10px; height: 20px; font-family: "Klavika Basic Regular"; text-transform : uppercase; font-size:0.7em; background-color: #eee} 
			td  { padding:10px; font-family: "Klavika Basic Regular"; font-size:0.7em ;  vertical-align:top;
			-moz-hyphens: auto; 
			-o-hyphens: auto;  												                  
			-webkit-hyphens: auto; 
			-ms-hyphens: auto;
			hyphens: auto; 
			html:lang="de"
				 } 
		
			tr.clickable-row{ cursor: pointer; 	}
			tr.clickable-row:hover{ color:#B29E6E; }
			
		 
				table.tableSorter{ table-layout:fixed;
				display: inline-block;
				border-spacing: 0;
				padding-left: 20px;
				text-align: left;
				position: relative;
				width:100%; 
				max-width: 960px;
			
				
			
				
				}
					
				
			T5 { font-family: "Klavika Basic Regular"; font-style:italic; }
			T6 { font-family: "Klavika Basic Regular"; text-transform : uppercase; }
			T7 { font-family: "Klavika Basic Medium"; font-size: 100%; text-transform : uppercase; }
				
				tbody tr:nth-child(even) td {
   				 background-color: #eee;
				}
				
				.tablewrapper{display: flex;
					  flex-wrap: wrap;
					  margin: 0 auto;
					  max-width: 1100px;  
					  margin-left: 0px;	 margin-right: 0px;  width: 100%;
			}
				
				
				th:hover{ color:#B29E6E ; }
				
				table.tableSorter th div.sortArrow {
				width: 11px;	
				height: 6px;
				display: inline-block;	
				margin-left: 5px;
				vertical-align: 2px;
				position: relative;
				}
				
								
				
				table.tableSorter th div.sortArrow div.sortArrowAscending {
					position: absolute;
					display: none;
					width: 11px;
					height: 6px;
				}
				
				
				
				table.tableSorter th div.sortArrow div.sortArrowDescending {
					position: absolute;
					width: 11px;
					height: 6px;
				}
				
				table.tableSorter th div.sortArrow div.sortArrowAscending {
					background: url('../img/arrow_asc.png');
				}
				
				table.tableSorter th div.sortArrow div.sortArrowDescending {
					background: url('../img/arrow_desc.png') no-repeat;
				}
								
			/*end tablesorter*/				
			
			
		 /* jssor slider bullet navigator skin 05 css */
        /*
        .jssorb05 div           (normal)
        .jssorb05 div:hover     (normal mouseover)
        .jssorb05 .av           (active)
        .jssorb05 .av:hover     (active mouseover)
        .jssorb05 .dn           (mousedown)
       /*
		
		
		
		/* versuch slider ins css zu schieben!
		#jssor_1{
			
			
			  max-width: 1100px; 
			  position:relative;
			  margin:0 auto;
			  top:17px;left:0px;
			  width:1100px;
			  height:520px;
			  overflow:hidden;         
			  visibility:hidden; 
			   }
			   */
			   
			   
        .jssorb05 {
            position: absolute;
			
	
		
        }
        .jssorb05 div, .jssorb05 div:hover, .jssorb05 .av {
            position: absolut;
			
            /* size of bullet elment */
            width: 30px;
            height:30px;
            background: url(../img/b05.png) no-repeat;
            overflow: hidden;
            cursor: pointer;
			
        }
        .jssorb05 div { background-position: -30px -28px; }
        .jssorb05 div:hover, .jssorb05 .av:hover { background-position: -160px -28px; }
        .jssorb05 .av { background-position: -300px -28px; }
        .jssorb05 .dn, .jssorb05 .dn:hover { background-position: -400px -28px; }

        /* jssor slider arrow navigator skin 12 css */
        /*
        .jssora12l                  (normal)
        .jssora12r                  (normal)
        .jssora12l:hover            (normal mouseover)
        .jssora12r:hover            (normal mouseover)
        .jssora12l.jssora12ldn      (mousedown)  
        .jssora12r.jssora12rdn      (mousedown)
        */
        .jssora12l, .jssora12r {
            display: block;
            position: absolute;
            /* size of arrow element */
            width: 500px;
            height: 500px;
            cursor: pointer;
            background: url(../img/a12.png) no-repeat; 
            overflow: hidden;
			
        }
        .jssora12l { background-position: -16px -37px; }
        .jssora12r { background-position: -75px -37px; }
        .jssora12l:hover { background-position: -136px -37px; }
        .jssora12r:hover { background-position: -195px -37px; }
        .jssora12l.jssora12ldn { background-position: -256px -37px; }
        .jssora12r.jssora12rdn { background-position: -315px -37px; }
		
		
		
		
		</style>