@charset "utf-8";
   @media screen and (orientation: landscape)  {
     
 


p, h1, h2, h3, h4 {
font-family: "Titillium Web";
	font-weight:200;
	color:black;
}

h6 {
font-family: "Titillium Web";
	font-weight:600;
	color:black;
	font-size:140%;
}

p {
	font-size:100%;		
}

a {
	display:block;
	/*height:3.5%;*/		
}

h1 {
	font-size:160%;		
}
h2{
	font-size:140%;		
}

h3 {
font-size:120%;		
}



/* Hauptnavigation-----------------------------------------------------------------------------------------------------------*/

#globalnavi2 a {
 color:#959595;
}

#globalnavi2 a:hover {
 color:#ff8c01;
}

#globalnavi2 a:active {
 color:#af9eae;
}

#globalnavi2 ul {
  padding: 0;
  margin: 0;
  width:100%;
  overflow:hidden;
}


#globalnavi2 li{

	  background-color:#666666;
	/*margin:3% 3% 0% 0%;*/
	width:33%;
	height: 4%;
	display: inline-block;
	list-style-type:none;
	margin-right:0.07%;
	margin-bottom:0.5em;

    }

#globalnavi2 li a{
	font-family: "Archivo Black";
	font-size:140%;
	margin-left:3%;
/*	margin-right:3%;	
*/	text-decoration:none;

    }

/* ende Hauptnavigation-----------------------------------------------------------------------------------------------------------*/

hr {
	width:100%;
/*	size: 1;
*/
	}

/* karoussell--css---------------------------------------------------------------------------------------------------------*/
.containerp {
display: none;
}

/* LAYOUT */
.containerq {
	margin:0 auto;
	overflow:hidden;
	width:100%;
	height: 40em;
}

/* CONTENT SLIDER */
#content-slider {
	width:100%;
/*	height:700px;
*/	margin:0;
}
/* SLIDER */
#slider {
	background:#000;
/*	height:700px;*/
	width:100%;
	overflow:visible;
	position:relative;
}

#mask {
	overflow:hidden;
	max-height:55em;
	min-height:45em;
	width:100%;
}

#slider ul {
	margin:0;
	padding:0;
	position:relative;
}
#slider li {
	width:100%;
	position:absolute;
	left:-1340px;
	list-style:none;
}

#slider li img{
	width:100%;
	
}

#slider li.firstanimation {
	-moz-animation:cycle 15s linear infinite;	
	-webkit-animation:cycle 15s linear infinite;		
}
#slider li.secondanimation {
	-moz-animation:cycletwo 15s linear infinite;
	-webkit-animation:cycletwo 15s linear infinite;		
}
#slider li.thirdanimation {
	-moz-animation:cyclethree 15s linear infinite;
	-webkit-animation:cyclethree 15s linear infinite;		
}

#slider .tooltip {
background-color:#fff;
opacity:.8;
   width: 60%;
   height: 12em;
   position: relative;
   bottom: 75px;
   left: 0px;
   	-moz-transition:all 0.3s ease-in-out;
	-webkit-transition:all 0.3s ease-in-out;
}

#slider .tooltip h1 {
   color: #fff;
   font-size: 24px;
   font-weight: 300;
   line-height: 60px;
   padding: 0 0 0 10px;
}

 


#slider li#first:hover .tooltip, 
#slider li#second:hover .tooltip, 
#slider li#third:hover .tooltip {
	left:0px;
}


#slider:hover li,
#slider:hover .progress-bar {
   animation-play-state: paused;
   -moz-animation-play-state:paused;
	-webkit-animation-play-state:paused;
}

/* PROGRESS BAR */
.progress-bar { 
	position:relative;
	top:-5px;
	width:1340px; 
	height:5px;
	background:#000;
	-moz-animation:fullexpand 15s ease-out infinite;
	-webkit-animation:fullexpand 15s ease-out infinite;
}


/* ANIMATION------------------------------------------------------------------------------------------------------------------------------------------------ */
/* RESET */

ol, ul {
	list-style: none;
	
}



blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

@-moz-keyframes cycle {
   0%  {left: 0px; } /* When you start the slide, the first image is already visible */
   6%  {left: 0px; } /* Original Position */
   27% {left: 0px; opacity:1; z-index:0; } /* From 4% to 16 % = for 3 seconds the image is visible */
   33% {left: 1340px; opacity: 0; z-index: 0; } /* From 16% to 20% = for 1 second exit image */
   36% {left: -1340px; opacity: 0; z-index: -1; } /* Return to Original Position */
   91% {left: -1340px; opacity: 0; z-index: 0; }
   93% {left: -1340px; opacity: 0; } /* From 96% to 100% = for 1 second enter image*/
   100%{left: 0px; opacity: 1; }
}

@-moz-keyframes cycletwo {
   0%  {left: -1340px; opacity: 0; } /* Original Position */
   27% {left: -1340px; opacity: 0; }/* Starts moving after 16% to this position */
   33% {left: 0px; opacity: 1; }
   39% {left: 0px; opacity: 1; }  /* From 20% to 24% = for 1 second enter image*/
   60% {left: 0px; opacity: 1; z-index: 0; }   /* From 24% to 36 % = for 3 seconds the image is visible */
   66% {left: 1340px; opacity: 0; z-index: 0; } /* From 36% to 40% = for 1 second exit image */
   69% {left: -1340px; opacity: 0; z-index: -1; }   /* Return to Original Position */
   100%{left: -1340px; opacity: 0; z-index: -1; }
}

@-moz-keyframes cyclethree {
   0%  {left: -1340px; opacity: 0; } /* Original Position */
   60% {left: -1340px; opacity: 0; }/* Starts moving after 16% to this position */
   66% {left: 0px; opacity: 1; }
   72% {left: 0px; opacity: 1; }  /* From 20% to 24% = for 1 second enter image*/
   91% {left: 0px; opacity: 1; z-index: 0; }   /* From 24% to 36 % = for 3 seconds the image is visible */
   93% { left: 1340px; opacity: 0; z-index: 0; } /* From 36% to 40% = for 1 second exit image */
   99% {left: -1340px; opacity: 0; z-index: -1; }   /* Return to Original Position */
   100%{left: -1340px; opacity: 0; z-index: -1; }
}

@-webkit-keyframes cycle {
   0%  {left: 0px; } /* When you start the slide, the first image is already visible */
   6%  {left: 0px; } /* Original Position */
   27% {left: 0px; opacity:1; z-index:0; } /* From 4% to 16 % = for 3 seconds the image is visible */
   33% {left: 1340px; opacity: 0; z-index: 0; } /* From 16% to 20% = for 1 second exit image */
   36% {left: -1340px; opacity: 0; z-index: -1; } /* Return to Original Position */
   91% {left: -1340px; opacity: 0; z-index: 0; }
   93% {left: -1340px; opacity: 0; } /* From 96% to 100% = for 1 second enter image*/
   100%{left: 0px; opacity: 1; }
}

@-webkit-keyframes cycletwo {
   0%  {left: -1340px; opacity: 0; } /* Original Position */
   27% {left: -1340px; opacity: 0; }/* Starts moving after 16% to this position */
   33% {left: 0px; opacity: 1; }
   39% {left: 0px; opacity: 1; }  /* From 20% to 24% = for 1 second enter image*/
   60% {left: 0px; opacity: 1; z-index: 0; }   /* From 24% to 36 % = for 3 seconds the image is visible */
   66% {left: 1340px; opacity: 0; z-index: 0; } /* From 36% to 40% = for 1 second exit image */
   69% {left: -1340px; opacity: 0; z-index: -1; }   /* Return to Original Position */
   100%{left: -1340px; opacity: 0; z-index: -1; }
}

@-webkit-keyframes cyclethree {
   0%  {left: -1340px; opacity: 0; } /* Original Position */
   60% {left: -1340px; opacity: 0; }/* Starts moving after 16% to this position */
   66% {left: 0px; opacity: 1; }
   72% {left: 0px; opacity: 1; }  /* From 20% to 24% = for 1 second enter image*/
   91% {left: 0px; opacity: 1; z-index: 0; }   /* From 24% to 36 % = for 3 seconds the image is visible */
   93% { left: 1340px; opacity: 0; z-index: 0; } /* From 36% to 40% = for 1 second exit image */
   99% {left: -1340px; opacity: 0; z-index: -1; }   /* Return to Original Position */
   100%{left: -1340px; opacity: 0; z-index: -1; }
}

/* ANIMATION BAR */

@-moz-keyframes fullexpand {
    0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
    4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
   16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
   17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
   18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }	
}
@-webkit-keyframes fullexpand {
    0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
    4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
   16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
   17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
   18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }	
}

/* ende-karoussell-----------------------------------------------------------------------------------------------------------*/




/*------------------------------------------------------------------------------------------------------------------------------------*/
#infotexte {
width:100%;
padding:0;
padding-right:0.5em;
margin-right:0px;
margin-left:-0.5em;
}

#text1 {
width:40%;
background-color:white;
padding:1.5em;
padding-left:3em;
margin:1em;
margin-left:-1.5em;
}

#schrankbild1 {
width:60%;
height:auto;
padding:1em;
margin-right:0px;
margin-left:-0.5em;

}

.rechts {
float: right;
margin-left: 1em;
} 

#hausbox {
margin-bottom: 1em;
}  
/* Fussnavigarion---------------------------------------------------------------------------------------------------------*/


#fussnavi ul li {

	height: 4%;
	display: inline-block;
	list-style-type:none;
	margin-right:5%;
	text-decoration:none;
	padding:0em;
	padding-left:0.5em;
}

#fussnavi ul li a {
font-family: "Titillium Web";
	font-weight:200;
	color:black;
	display: inline-block;
	text-decoration:none;
	
}

#fussnavi ul {
margin-bottom:-.5em;
margin-top:-.5em;

}

#fussnavi a:hover {
 color:#ff8c01;
}

#fussnavi a:active {
 color:#af9eae;
}


#logo1 {
  left:0px;
  width:100%;
  margin:0 auto;
  height:auto;

}

#logo1 img{
  width:100%;
}

#globalnavi1 ul {
  padding: 0;
  margin: 0;
}

#globalnavi1 li { 
  background-color:#010101;
  display: inline-block;
  width: 30%;
  height:3em;
  margin:0;
  list-style:none;
}



#logo1 img{
	width:20%;
	}


#kartenbox {
	float:right;
	}

#kontaktformular {
		margin-left:1em;
			float:left;

	}

	#feldzeile {
	width:100%;
		margin-left:1em;
			float:left;
			margin-bottom:2px;
			height:2em;

	}

	#feldzeile2 {
	width:100%;
		margin-left:1em;
			float:left;
			margin-bottom:2px;
			height:12em;

	}

#kontaktfeld {
	width:50%;
		margin-bottom:2%;
		float:left;
			display:inline;
	}


#kontaktfeld input{
	width:50%;
		margin-left:1em;
			float:left;
			border: 1px solid black;
			padding: 3px;
	}

#kontaktfeld textarea{
	width:50%;
		margin-left:1em;
		min-height:12em;
			float:left;
			border: 1px solid black;

	}



	#kontaktfeld p{
font-family: "Titillium Web";
	font-weight:200;
	color:black;
	margin:0;
	padding:0;
float:left;
	}

#gf img {
width:30%;
}
	

 

 #text1w { 
	margin-left:1em;
	width:30%;

}
 #wirbox { 


width:70%;	

}

 #wirtextbox { 

 display: inline;
width:55%;	
float:left;
margin-left:1em;
margin-right:2em;

}

 #wirtextbox h6 { 
 margin-block-end: 0em;
 margin-block-start: 0em;

}

 #wirbox img{ 
 display:inline;
 width:30%;	
 float:left;

}


#wirbild img{ 
 width:100%;	
}

#wirbild { 
 width:100%;
 overflow:hidden;
 height:25em;	
}


.diabox {
 width:100%; 
 height:40em;
 overflow:hidden;
 margin-top:-1em;
}

#hausboxp {
	display:none;
}

#hausbox { 
width:100%;
max-height:55em;
min-height:44em;
/*position:absolute;
*/overflow:hidden;
}

#smarthaus { 
width:1880px;
overflow:hidden;
}

#smarthaus img{ 
position:relative;
margin-left:auto;
margin-right:auto;
overflow-x:scroll;
}

 #smarthaus1 img{ 
width:50%;
text-align:center;
margin-left:auto;
margin-right:auto;
}

 #smarthaus7 img{ 
width:100%;
text-align:center;
margin-left:auto;
margin-right:auto;
}

 #textfeld7 { 
width:50%;
margin-left:1em;
position:absolute;
background-color:lightgray;
opacity:.8;
left:1em;
top:10em;
padding:2em;
z-index:0;
}

#textfeld7 h1,h3{ 
color:#000;
opacity:1;
z-index:100;
}

 #textfeld8 { 
width:50%;
margin-left:1em;
position:absolute;
background-color:#fff;
opacity:.8;
left:1em;
top:10em;
padding:2em;
}

/*#an1 a{ 
text-decoration: underline;
}*/

.tf{
	width:50%;
margin-left:1em;
position:absolute;
background-color:#fff;
opacity:.8;
left:4em;
top:10%;
padding:2em;
}

 #smarthaus9q img{ 
width:100%;
}

 #smarthaus9p{ 
display:none;
}

#bildbox3 {
	margin: 0px;
	padding:0px;
	width:100%;
	left:0;
	top:0;
	min-height:45em;
	max-height:55em;
	overflow:hidden;
	position:relative;
}

#bildbox3 img{
	margin: 0px;
	padding:0px;
	width:100%;
	position:absolute;
}

.linkspfeil {
	margin-top: 12%;
	text-align:left;
	width:60px;
		position:absolute;

}

.rechtspfeil {
	margin-top: 12%;
	text-align:left;
	right:0;
	width:60px;
			position:absolute;

}


#an1 a{
	font-family:"Titillium Web";
	font-weight:200;
	color:black;
/*	text-decoration:none;
*/}

#an1 a:active{

	color:orange;
}

#smarthaus9q {
	height:45em;
	overflow:hidden;
	color:orange;
}

}

@media screen  and (orientation: landscape) and (min-width: 480px) and (max-width: 780px){ 

#globalnavi2 a {
 color:#959595;
}

#globalnavi2 a:hover {
 color:#ff8c01;
}

#globalnavi2 a:active {
 color:#af9eae;
}

#globalnavi2 ul {
  padding: 0;
  margin: 0;
  width:100%;
  overflow:hidden;
}

#globalnavi2 ul {
  padding: 0;
  margin: 0;
  width:100%;
  overflow:hidden;
}


#globalnavi2 li{

	  background-color:#666666;
	width:32%;
	height: 4%;
	display: inline-block;
	list-style-type:none;
	margin-right:0.07%;
	margin-bottom:0.5em;

    }

#globalnavi2 li a{
	font-family: "Archivo Black";
	font-size:100%;
	margin-left:3%;
	text-decoration:none;

    }

#mask {
	overflow:hidden;
	max-height:20em;
	min-height:15em;
	width:100%;
}

.containerq {
	margin:0 auto;
	overflow:hidden;
	width:100%;
	height: 12em;

}

.link3 img{
	margin-left:30px;
}
@media screen  and (orientation: landscape) and (min-width: 1340px) { 

.containerq {
	margin:0 auto;
	overflow:hidden;
	width:100%;
	height: 45em;
}

#mask {
	overflow:hidden;
	max-height:45em;
	min-height:45em;
	width:100%;
}



}