/* -webkit-box; */     /* OLD - iOS 6-, Safari 3.1-6 */
  /* display: -moz-box; */         /* OLD - Firefox 19- (buggy but mostly works) */
  /* display: -ms-flexbox; */     /* TWEENER - IE 10 */
  /* display: -webkit-flex; */     /* NEW - Chrome */
  /* display: flex; */             /* NEW, Spec - Opera 12.1, Firefox 20+ */

/*--------------------------------------*/
.hinten {background: #8c7a5c;
background-image: url("zenbg-1.png"), url("zenbg-2.png");
background-repeat: repeat-x, repeat;
}
/*--------------------------------------*/


* {margin:0; padding:0;
	/* damit das box modell funktioniert*/
	
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	/* */
	box-sizing: border-box;
	*behavior: url(h5/box-size/boxsizing.htc);
} 

@font-face {
    font-family: 'amaranthregular';
    src: url('amaranth-regular-webfont.eot');
    src: url('amaranth-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('amaranth-regular-webfont.woff') format('woff'),
         url('amaranth-regular-webfont.ttf') format('truetype'),
         url('amaranth-regular-webfont.svg#amaranthregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'amaranthbold';
    src: url('amaranth-bold-webfont.eot');
    src: url('amaranth-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('amaranth-bold-webfont.woff') format('woff'),
         url('amaranth-bold-webfont.ttf') format('truetype'),
         url('amaranth-bold-webfont.svg#amaranthbold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'perspective_sansregular';
    src: url('persans-webfont.eot');
    src: url('persans-webfont.eot?#iefix') format('embedded-opentype'),
         url('persans-webfont.woff') format('woff'),
         url('persans-webfont.ttf') format('truetype'),
         url('persans-webfont.svg#perspective_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'perspective_sansbold';
    src: url('persansb-webfont.eot');
    src: url('persansb-webfont.eot?#iefix') format('embedded-opentype'),
         url('persansb-webfont.woff') format('woff'),
         url('persansb-webfont.ttf') format('truetype'),
         url('persansb-webfont.svg#perspective_sansbold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'open_sanscondensed_light';
    src: url('OpenSans-CondLight-webfont.eot');
    src: url('OpenSans-CondLight-webfont.eot?#iefix') format('embedded-opentype'),
         url('OpenSans-CondLight-webfont.woff') format('woff'),
         url('OpenSans-CondLight-webfont.ttf') format('truetype'),
         url('OpenSans-CondLight-webfont.svg#open_sanscondensed_light') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'm_1cregular';
    src: url('mplus-1c-regular-webfont.eot');
    src: url('mplus-1c-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('mplus-1c-regular-webfont.woff') format('woff'),
         url('mplus-1c-regular-webfont.ttf') format('truetype'),
         url('mplus-1c-regular-webfont.svg#m_1cregular') format('svg');
    font-weight: normal;
    font-style: normal;

}



html {height: 100%;} /* im body WICHTIG!!! STRECKT ANZEIGENBEREICH AUF 100% */

body {
	font-family: "perspective_sansregular", "Calibri", sans-serif;
	/*font-size: 1.1em;*/
	color: #8c7a5c;
	margin:0;
	padding:0;
	height: 100%;
	line-height: 120%;
	text-align: justify;
}	

.bo {
	font-family: "perspective_sansbold", "Calibri", sans-serif;
	color: #8c7a5c;
	}

h1 {font-family: "amaranthbold", "Calibri", sans-serif;}

#back {
	/*
	
	*/
	height:100%; /* Mindesthöhe für den IE */
	min-height: 100%; /* Mindesthöhe für moderne Browser */
	height:auto !important; /* Important Regel für moderne Browser */
	overflow: hidden !important; /* FF Scroll-leiste */
	
	width:100%;
	min-width: 100%;
	
	
	}
	


#wrap {
	margin: 0px auto;
	/*
	height: 100%;
	min-height: 100%; */ /* Mindesthöhe für moderne Browser */
	/*margin: 0px 0px 100px 0px; *//* unten für den Fussbereich abziehen */
	padding: 0px 0px 100px 0px;
	max-width: 1000px;
	
	display: -webkit-box;      
  display: -moz-box;      
  display: -ms-flexbox;      
  display: -webkit-flex;    
  display: flex;

		
	-webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
	
	/* designelemente am ende des dokuments*/	
	/* -webkit-box-shadow: 0px 0px 5px 0px rgba(128, 127, 135, 1); */  /* WebKit */
	/* -moz-box-shadow: 0px 0px 5px 0px rgba(128, 127, 135, 1); */ /* Firefox */
	/* box-shadow: 0px 0px 5px 0px rgba(128, 127, 135, 1); */ /* Standard */
}

/*----für IE <10 man muesste alles ueberarbeiten (zurueckbauen)!!! ---------------------------------*/
/* besser die alte seite lassen und zu dieser umleiten wenn alter IE*/
.lt-ie10 #NaviOben {float: left; position: relative;}

.lt-ie10 #NaviOben ul li {
	display: inline;
	padding: 2em 3%;
	width: 14%;
	/*
	
	clear: both;
	*/
}
/*-------------------------------------*/


#NaviOben ul{
	font-family: "amaranthbold", "Calibri", sans-serif;
	line-height: 30px;
	
	display: -webkit-box;      
  	display: -moz-box;      
  	display: -ms-flexbox;      
  	display: -webkit-flex;    
  	display: flex;
	
	/* -webkit-flex-direction: row; */
	/* flex-direction: row; */ /* nicht notwendig, weil Standard-Einstellung? */
	
	/* mehrzeilig */
	-webkit-box-lines: multiple;
	-moz-box-lines: multiple;
    -webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
    -flex-wrap: wrap;
	
	-webkit-box-pack: justify;
	-moz-box-pack: justify;
	-ms-flex-pack: justify; 
	-webkit-justify-content: space-between;
	justify-content: space-between;
	
	/* */
	margin-top: 30px;
	list-style-type: square;
    list-style-position:inside;
	
}

#NaviOben li {
 border-left: 1px solid #252525; /* */
    min-width: 150px;
    /*
    border-right-width: thin;
	border-right-style: solid;
	border-right-color: #666;
    */
    
    text-align: center;/* */
	cursor: pointer;
	}	

#NaviOben li a {
	text-decoration: none;
	color: #28789f;
}

#NaviOben li a:hover {
	text-decoration: none;
	font-size: 1.08rem;	/*color: #d6a306;*/
}
	
/*-------------------------------------------------*/ 


header {
	
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
		
	-webkit-box-pack: center;
	-moz-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	
	/*background-color: #03F;*/	/*
	-webkit-box-align: center;
	-moz-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
		*/
	padding-top: 20px;
	padding-right: 0;
	padding-bottom: 20px;
	padding-left: 0;
}

header img {width: 100%;
			height: 100%
		}


.rab {
	position: absolute;
	top: 430px;
	width: 70%;
	/*text-align: right;*/
	
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	
	-webkit-box-pack: end;
	-moz-box-pack: end;
	-ms-flex-pack: end;
	-webkit-justify-content: flex-end;
	justify-content: flex-end;
	/*
	background-color: #0C3;	
	*/
	/*
	-webkit-box-align: end;
	-moz-box-align: end;
	-ms-flex-align: end;
	-webkit-align-items: flex-end;
	align-items: flex-end;
	*/
}


.line {
	width: 100%;
	color: #73685c;
	background-color: #73685c;
	height: 2px;
	}

#main {
	display: -webkit-box;      
  	display: -moz-box;      
  	display: -ms-flexbox;      
  	display: -webkit-flex;    
  	display: flex;
	
	/* ... innliegende divs rechts und links bündig - innen abstand */
	-webkit-box-pack: justify;
	-moz-box-pack: justify;
	-ms-flex-pack: justify; 
	-webkit-justify-content: space-between;
	justify-content: space-between;
	
}

#main section {
	width: 70%;
	font-size: 0.9rem;
	/*background-color: #FC3;*/
}

article {
	/*height: 300px;*/
    min-height: 100px;
	margin: 20px;
	padding: 20px;
	border-left-width: thin;
	border-left-style: solid;
	border-left-color: #666;
}


article h3 {line-height:30px;}

article a {text-decoration: none;}

.FL {float:  left; margin-right: 15px; marging-bottom:15px;}

.FR {float:  right; margin-left: 15px; marging-bottom:15px;}


 #emailsenden {
	padding:5px 10px;
	background: #e4dfd2;
	
	-webkit-border-radius: 5px;
	-moz-border-radius:  5px;
	border-radius:  5px;
	
	color: #8c7a5c;
	
	/*border: 1px solid #8c7a5c;*/
	
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	/*
	-webkit-box-shadow: 0px 0px 0px 0px #999;
	-moz-box-shadow: 0px 0px 0px 0px #999;
	box-shadow: 0px 0px 0px 0px #999;
	*/
	}

#emailsenden:hover {font-family: "perspective_sansbold", "Calibri", sans-serif;
	font-size: 0.9rem;
	padding:6px 10px;
}

.T105 {font-size: 1.05rem;}
.T103 {font-size: 1.03rem;}


.bm {line-height: 15px;
	vertical-align: middle;
	}


th {font-size: 0.8rem; }

td {line-height: 22px;}

/*
article img:hover{
	transform: rotate(20deg);
}
*/

#colR {
	width: 25%;
	margin-right: 20px;
	margin-top: 20px;
	padding-left: 20px;
	border-left-width: thin;
	border-left-style: solid;
	border-left-color: #666;
	/*background-color: #0FF;	*/
	
	
	display: -webkit-box;      
  display: -moz-box;      
  display: -ms-flexbox;      
  display: -webkit-flex;    
  display: flex;
  
  -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
	
	-webkit-box-pack: justify;
	-moz-box-pack: justify;
	-ms-flex-pack: justify; 
	-webkit-justify-content: space-between;
	justify-content: space-between;
	/*
	-webkit-box-pack: center;
	-moz-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	*/
}



/* ---für div oben und unten von navi - damit dort eine dezente linie gezeigt wird--- */

#li1 {
	height: 5px;
	padding-top: 5px;
	
    border-top-width: 2px;
	border-top-style: solid;
	border-top-color: #069;
}

#li2 {
	height: 5px;
	padding-bottom: 5px;
	
    border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #069;
}
/* */

#NaviR {
	font-family: "amaranthbold", "Calibri", sans-serif;
	/*width: 25%;*/
    max-width: 250px;
	
    /*
    border-left-width: thin;
	border-left-style: solid;
	border-left-color: #666;
   */
}  

#NaviR ul{ 
    padding-top: 15px;
	padding-right: 15px;
	padding-bottom: 15px;
	padding-left: 25px;
	list-style-type: square;
    list-style-position:inside;
}

#NaviR li a {
	text-decoration: none;
	color: #28789f;
}

#NaviR li a:hover {
	text-decoration: none;
	font-size: 1.08rem; 
}


aside {
	margin-bottom: 20px;
}

#it {text-align:center;}

#pu {padding-left: 3px;}

.colRU {
	/*
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	
	-webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
	
	-webkit-box-pack: end;
	-moz-box-pack: end;
	-ms-flex-pack: end;
	-webkit-justify-content: flex-end;
	justify-content: flex-end;
	*/
	/*background-color: white;*/
	}

footer {
	background-color: #3CF;
	/*position:absolute;
	bottom: 0; */
	width: 100%;
	height: 100px;
	margin-top:-100px;
    padding-top: 20px;
    font-size: 0.9rem;
	
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	
	/* ... innliegende divs rechts und links bündig - innen abstand */
	-webkit-box-pack: justify;
	-moz-box-pack: justify;
	-ms-flex-pack: distribute; 
	-webkit-justify-content: space-around;
	justify-content: space-around;
}

footer a {
	text-decoration: none;
	color: #bacbd9; 
}

footer a:hover {
	text-decoration: none;
	font-size: 1.03rem; /* color: #d6a306;*/
}

.clear {
	clear: both;
	}

/* basic styles ------------------------------------------------------------------ */

#back {
	
	background-image: -webkit-linear-gradient(#e4dfd2 35%, #73685c 100%); 
	background-image: -moz-linear-gradient(#e4dfd2 35%, #73685c 300%); 
	background-image: -o-linear-gradient(#e4dfd2 35%, #73685c 100%); 
	background-image: linear-gradient(#e4dfd2 35%, #73685c 100%);
	
}

#bildS1 {
	
	background-repeat: repeat-x;
	background-image: url(../Bilder/casahintenS1s.jpg);
	}

#bildSff {
	background-repeat: repeat-x;
	background-image: url(../Bilder/casahintenSff2.jpg);
	/*background-color:#00CCCC;*/
}

#wrap{
	/*background-color: #e4dfd2;*/
}

#main {
	padding: 10px;
	background-color: #e4dfd2;
	/*
	background-image: url(../Bilder/sand.jpg);
	background-repeat: repeat;
	border-top-width: 2px;
	border-top-style: solid;
	border-top-color: #666;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #666;
	*/
}

article {
    background-color: #f4efe1; /*  $bgcolor_weiss; */
	}


#colR {
	/*width: 25%;*/
	/*background-color: #dad5c9;*/
	/*background-color: rgba(218, 213, 201, 0.6);*/
}

#ibg {
	background-color: #e4dfd2;
    }


    
#NaviR {
	background-color: #bacbd9;
    }    

#bottom {background-color: #e4dfd2;}	

footer {
	background-color: #28789f;
    color: #bacbd9; 
    }
	
	

/* dynamic styles ------------------------------------------------------------------ */


@media screen and (max-width:768px) {
		body {
        font-size: 0.90rem;
        }
    
		h1 {font-size: 1.3rem;}
    	        
        <?php //
		if ($ergbro == 1) { ?>
		 #NaviOben ul {
							<?php //echo $dispfb; ?>
                            <?php echo $flexdir_col; ?>
                        }
        <?php }                
		?>

		article, h1 p {font-size: 0.80rem;}
		
		header img {width: 90%;
			height: 90%
		}

}


@media screen and (max-width:580px) { /* war 480px*/
	
    	body {
        font-size: 0.80rem;
        }
		
		h1 {font-size: 1.0rem;}
    
		h3, th, h1 p {font-size: 0.70rem;}
        
        #main {
            display: -webkit-box;
			display: -moz-box;
			display: -ms-flexbox;
			display: -webkit-flex;
			display: flex;
			
        	-webkit-box-direction: normal;
			-moz-box-direction: normal;
			-webkit-box-orient: vertical;
			-moz-box-orient: vertical;
			-webkit-flex-direction: column;
			-ms-flex-direction: column;
			flex-direction: column;
        }
        
        section {
        	min-width: 100%;
            width:100%;
        }
        
        article {font-size: 0.70rem;}
        
		article .FL {width: 40%;
            height: 40%; }
			
		article .FR {width: 40%;
            height: 40%; }			
		
        article img {
			/*
        	width: 40%;
            height: 40%;
			
        	max-width: 150px;
            max-height: 150px;
			*/
        }
	 
	}