html, body { 
background-color: #ffffff;
margin: 0;
padding: 0;
height: 100%; /* WICHTIG!!! STRECKT ANZEIGENBEREICH AUF 100% */


bbb-webkit-animation: fadeIn 5s;

}



@-webkit-keyframes fadeIn {
        0% { opacity: 0; }
        100% { opacity: 1; }
}




p, h1, h2 {
padding:0% 0% 0% 0%;
margin:2% 0% 1% 0%;
}


img {
width:100%;
}













#main {

margin:0px;
padding:0px;
width:100%;

font-family: 'Lato', sans-serif, verdana;
}



#main h1 {
font-size:3em;
font-weight:100;
line-height:1.2em;
margin-bottom:0.6em;
}
#main h2 {
font-size:2em;
font-weight:400;
line-height:1.2em;
margin-bottom:0.5em;

}
#main p {
font-size:1.0em;
line-height:1.5em;
}




















/*ID's */








#header {
overflow:hidden;
margin:0;
padding:0;
width:100%;
background-color:white;
}



#p1-001 {
overflow:hidden;
margin:0;
padding:0;
width:100%;
background-color:white;
}


#p1-002 {
overflow:hidden;
margin:0;
padding:0;
width:100%;
background-color:white;
}


#p1-003 {
overflow:hidden;
margin:0;
padding:0;
width:100%;
background-color:white;
}


#p1-004 {
overflow:hidden;
margin:0;
padding:0;
width:100%;
background-color:white;
}



#p1-005 {
overflow:hidden;
margin:0;
padding:0;
width:100%;
background-color:white;
}



#p1-006 {
overflow:hidden;
margin:0;
padding:0;
width:100%;
background-color:white;
}











#p2-001 {
overflow:hidden;
margin:0;
padding:0;
width:100%;
background-color:white;
}


#p2-002 {
overflow:hidden;
margin:0;
padding:0;
width:100%;
background-color:white;
}


#p2-003 {
overflow:hidden;
margin:0;
padding:0;
width:100%;
background-color:white;
}


#p2-004 {
overflow:hidden;
margin:0;
padding:0;
width:100%;
background-color:white;
}



#p2-005 {
overflow:hidden;
margin:0;
padding:0;
width:100%;
background-color:white;
}



#p2-006 {
overflow:hidden;
margin:0;
padding:0;
width:100%;
background-color:white;
}










#p3-001 {
overflow:hidden;
margin:0;
padding:0;
width:100%;
background-color:white;
}


#p3-002 {
overflow:hidden;
margin:0;
padding:0;
width:100%;
background-color:white;
}


#p3-003 {
overflow:hidden;
margin:0;
padding:0;
width:100%;
background-color:white;
}


#p3-004 {
overflow:hidden;
margin:0;
padding:0;
width:100%;
background-color:white;
}



#p3-005 {
overflow:hidden;
margin:0;
padding:0;
width:100%;
background-color:white;
}



#p3-006 {
overflow:hidden;
margin:0;
padding:0;
width:100%;
background-color:white;
}












#p4-001 {
overflow:hidden;
margin:0;
padding:0;
width:100%;
background-color:white;
}


#p4-002 {
overflow:hidden;
margin:0;
padding:0;
width:100%;
background-color:white;
}


#p4-003 {
overflow:hidden;
margin:0;
padding:0;
width:100%;
background-color:white;
}


#p4-004 {
overflow:hidden;
margin:0;
padding:0;
width:100%;
background-color:white;
}



#p4-005 {
overflow:hidden;
margin:0;
padding:0;
width:100%;
background-color:white;
}



#p4-006 {
overflow:hidden;
margin:0;
padding:0;
width:100%;
background-color:white;
}












#p5-001 {
overflow:hidden;
margin:0;
padding:0;
width:100%;
background-color:white;
}


#p5-002 {
overflow:hidden;
margin:0;
padding:0;
width:100%;
background-color:white;
}


#p5-003 {
overflow:hidden;
margin:0;
padding:0;
width:100%;
background-color:white;
}


#p5-004 {
overflow:hidden;
margin:0;
padding:0;
width:100%;
background-color:white;
}



#p5-005 {
overflow:hidden;
margin:0;
padding:0;
width:100%;
background-color:white;
}



#p5-006 {
overflow:hidden;
margin:0;
padding:0;
width:100%;
background-color:white;
}












#p6-001 {
overflow:hidden;
margin:0;
padding:0;
width:100%;
background-color:white;
}


#p6-002 {
overflow:hidden;
margin:0;
padding:0;
width:100%;
background-color:white;
}


#p6-003 {
overflow:hidden;
margin:0;
padding:0;
width:100%;
background-color:white;
}


#p6-004 {
overflow:hidden;
margin:0;
padding:0;
width:100%;
background-color:white;
}



#p6-005 {
overflow:hidden;
margin:0;
padding:0;
width:100%;
background-color:white;
}



#p6-006 {
overflow:hidden;
margin:0;
padding:0;
width:100%;
background-color:white;
}













#p7-001 {
overflow:hidden;
margin:0;
padding:0;
width:100%;
background-color:white;
}


#p7-002 {
overflow:hidden;
margin:0;
padding:0;
width:100%;
background-color:white;
}


#p7-003 {
overflow:hidden;
margin:0;
padding:0;
width:100%;
background-color:white;
}


#p7-004 {
overflow:hidden;
margin:0;
padding:0;
width:100%;
background-color:white;
}



#p7-005 {
overflow:hidden;
margin:0;
padding:0;
width:100%;
background-color:white;
}



#p7-006 {
overflow:hidden;
margin:0;
padding:0;
width:100%;
background-color:white;
}














#p8-001 {
overflow:hidden;
margin:0;
padding:0;
width:100%;
background-color:white;
}


#p8-002 {
overflow:hidden;
margin:0;
padding:0;
width:100%;
background-color:white;
}


#p8-003 {
overflow:hidden;
margin:0;
padding:0;
width:100%;
background-color:white;
}


#p8-004 {
overflow:hidden;
margin:0;
padding:0;
width:100%;
background-color:white;
}



#p8-005 {
overflow:hidden;
margin:0;
padding:0;
width:100%;
background-color:white;
}



#p8-006 {
overflow:hidden;
margin:0;
padding:0;
width:100%;
background-color:white;
}














#p9-001 {
overflow:hidden;
margin:0;
padding:0;
width:100%;
background-color:white;
}


#p9-002 {
overflow:hidden;
margin:0;
padding:0;
width:100%;
background-color:white;
}


#p9-003 {
overflow:hidden;
margin:0;
padding:0;
width:100%;
background-color:white;
}


#p9-004 {
overflow:hidden;
margin:0;
padding:0;
width:100%;
background-color:white;
}



#p9-005 {
overflow:hidden;
margin:0;
padding:0;
width:100%;
background-color:white;
}



#p9-006 {
overflow:hidden;
margin:0;
padding:0;
width:100%;
background-color:white;
}








#footer {
overflow:hidden;
margin:0;
padding:0;
width:100%;
background-color:white;
}




#form {
overflow:hidden;
margin:0;
padding:0;
width:100%;
background-color:white;
}


















/*Optionale DIVS, die nach Bedarf verwendet werden können */





.padd {
padding:1%;
}


.centered-box {
width:80%;
margin:0 auto;
}


.content {
padding:20px;
}



.leftside {
width:50%;
margin:0;
padding:0%;
}

.rightside {
float:right;
width:50%;
margin:0;
right:0;
padding:0%;
}






.content-image-left {
width:45%;
margin:0% 2% 2% 0%;
padding:0;
}

.content-image-right {
width:45%;
margin:0% 0% 2% 2%;
padding:0;
}




















/*MODULE */










/*MODUL 1-spaltig */


.mod1 {
margin:0;
padding:0;
width:100%;
}













/*MODUL 2-spaltig */
/*2 gleich grosse Spalten a, b, c, d */


.mod2-001 {
overflow:hidden;
margin:0;
padding:0;
width:100%;
}



.mod2-a {
position:relative;
float:left;
display:block;
width:49%;
margin:1% 0% 1% 1%;
padding:0;

-webkit-animation: fadeIn 1s;


transition:all 0.3s linear; 
-o-transition:all 0.3s linear; 
-moz-transition:all 0.3s linear; 
-webkit-transition:all 0.3s linear;
}

.mod2-b {
position:relative;
float:right;
display:block;
width:49%;
margin:1% 0% 1% 1%;
padding:0;

-webkit-animation: fadeIn 1s;


transition:all 0.3s linear; 
-o-transition:all 0.3s linear; 
-moz-transition:all 0.3s linear; 
-webkit-transition:all 0.3s linear;
}


.mod2-a:hover, .mod2-b:hover {


}













/*MODUL 3-spaltig */
/*3 gleich grosse Spalten a, b, c */


.mod3-001 {
overflow:hidden;
margin:0;
padding:0;
width:100%;
}



.mod3-a {
position:relative;
float:left;
display:block;
width:32.3%;
margin:1% 0% 1% 0%;
padding:0;

-webkit-animation: fadeIn 1s;


transition:all 0.3s linear; 
-o-transition:all 0.3s linear; 
-moz-transition:all 0.3s linear; 
-webkit-transition:all 0.3s linear;
}

.mod3-b {
position:relative;
float:left;
display:block;
width:32.3%;
margin:1% 0% 1% 1.5%;
padding:0;

-webkit-animation: fadeIn 1s;


transition:all 0.3s linear; 
-o-transition:all 0.3s linear; 
-moz-transition:all 0.3s linear; 
-webkit-transition:all 0.3s linear;
}

.mod3-c {
position:relative;
float:right;
display:block;
width:32.3%;
margin:1% 0% 1% 0%;
padding:0;
clear:right;

-webkit-animation: fadeIn 1s;


transition:all 0.3s linear; 
-o-transition:all 0.3s linear; 
-moz-transition:all 0.3s linear; 
-webkit-transition:all 0.3s linear;
}




.mod3-a:hover, .mod3-b:hover, .mod3-c:hover {


}











/*MODUL 4-spaltig */
/*4 gleich grosse Spalten a, b, c, d */


.mod4-001 {
overflow:hidden;
margin:0;
padding:0;
width:100%;
}



.mod4-a {
position:relative;
float:left;
display:block;
width:23.75%;
margin:1% 0% 1% 0%;
padding:0;

-webkit-animation: fadeIn 1s;

background-color:#eaeaea;
transition:all 0.3s linear; 
-o-transition:all 0.3s linear; 
-moz-transition:all 0.3s linear; 
-webkit-transition:all 0.3s linear;
}

.mod4-b {
position:relative;
float:left;
display:block;
width:23.75%;
margin:1% 0% 1% 1.6%;
padding:0;

-webkit-animation: fadeIn 1s;

background-color:#eaeaea;
transition:all 0.3s linear; 
-o-transition:all 0.3s linear; 
-moz-transition:all 0.3s linear; 
-webkit-transition:all 0.3s linear;
}

.mod4-c {
position:relative;
float:left;
display:block;
width:23.75%;
margin:1% 0% 1% 1.6%;
padding:0;

-webkit-animation: fadeIn 1s;

background-color:#eaeaea;
transition:all 0.3s linear; 
-o-transition:all 0.3s linear; 
-moz-transition:all 0.3s linear; 
-webkit-transition:all 0.3s linear;
}

.mod4-d {
position:relative;
float:left;
display:block;
width:23.75%;
margin:1% 0% 1% 1.6%;
padding:0;
clear:right;


-webkit-animation: fadeIn 1s;

background-color:#eaeaea;
transition:all 0.3s linear; 
-o-transition:all 0.3s linear; 
-moz-transition:all 0.3s linear; 
-webkit-transition:all 0.3s linear;
}


.mod4-a:hover, .mod4-b:hover, .mod4-c:hover, .mod4-d:hover {
background-color:#dcdbdb;

}




















/*Navigation inline */





.navi {
		
font-size:24px;
font-weight:300;
line-height:30px;	
color:black;
letter-spacing:0;
text-align:left;
margin-bottom:2%;				
}


.navi li a{
margin:0;

color:black;
text-decoration:none;
padding:2% 2% 2% 2%;
background-color:none;
 

-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;         
}



.navi li a:hover{
margin:0%;

padding:2% 2% 2% 2%;
color:#ababab
;
text-decoration:none;
background-color:none;            
}



.navi ul {
list-style-type: none;
padding:0%;
margin:0%; 
width:100%;

}
.navi li {
width:auto;
height:auto;
list-style-type: none;
padding:0%;
margin:0%;
display:inline;
}


.navi a#current{
color:#ababab;

}

















/*Sub-Navigation */





.navi-sub {
		
font-size:1em;
font-weight:300;
line-height:2em;	
color:black;
letter-spacing:0;
text-align:left;
margin-bottom:2%;
margin-top:2%;				
}


.navi-sub li a{
margin:0;

color:black;
text-decoration:none;
padding:0% 2% 0% 2%;
background-color:none;
 

-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;         
}



.navi-sub li a:hover{
margin:0%;

padding:0% 2% 0% 2%;
color:grey
;
text-decoration:none;
background-color:none;            
}



.navi-sub ul {
list-style-type: none;
padding:0%;
margin:0%; 
width:100%;

}
.navi-sub li {
width:auto;
height:auto;
list-style-type: none;
padding:0%;
margin:0%;
display:inline;
}


.navi-sub a#current{
color:grey;

}










.logo {
position:relative;
float:right;
}

.logo img {
width:auto;
}



















@media screen and (max-width:1000px) { 
		 



.mod4-a {
position:relative;
float:left;
display:block;
width:48.5%;
margin:1% 0% 1% 0%;
padding:0;
}

.mod4-b {
position:relative;
float:left;
display:block;
width:48.5%;
margin:1% 0% 1% 3%;
padding:0;
clear:right;
}

.mod4-c {
position:relative;
float:left;
display:block;
width:48.5%;
margin:1% 0% 1% 0%;
padding:0;
}

.mod4-d {
position:relative;
float:right;
display:block;
width:48.5%;
margin:1% 0% 1% 3%;
padding:0;
clear:right;
}


}
			
































@media screen and (max-width:1000px) and (orientation:portrait) {  
			    





#main h1,
#main h2,
#main p,
li {
text-align:center;
}



#main h1 {
font-size:5em;
}


#main h2 {
font-size:3em;

}
#main p {
font-size:2.5em;

}




.leftside {
width:100%;
padding:0%;
}

.rightside {
width:100%;
padding:0%;
}



.content-image-left {
width:100%;
padding:0%;
margin:0% 0% 2% 0%;
}

.content-image-right {
width:100%;
padding:0%;
margin:0% 0% 2% 0%;
}








.mod4-a {
position:relative;
float:left;
display:block;
width:98%;
margin:1% 1% 0% 1%;
padding:0px;
}

.mod4-b {
position:relative;
float:left;
display:block;
width:98%;
margin:1% 1% 0% 1%;
padding:0px;
}

.mod4-c {
position:relative;
float:right;
display:block;
width:98%;
margin:1% 1% 0% 1%;
padding:0px;
}

.mod4-d {
position:relative;
float:right;
display:block;
width:98%;
margin:1% 1% 1% 1%;
clear:both;
}












.mod2-a {
position:relative;
float:left;
display:block;
width:98%;
margin:1% 1% 0% 1%;
padding:0px;
}

.mod2-b {
position:relative;
float:left;
display:block;
width:98%;
margin:1% 1% 0% 1%;
padding:0px;
clear:both;
}












.mod3-a {
position:relative;
float:left;
display:block;
width:98%;
margin:1% 1% 0% 1%;
padding:0px;
}

.mod3-b {
position:relative;
float:left;
display:block;
width:98%;
margin:1% 1% 0% 1%;
padding:0px;
}

.mod3-c {
position:relative;
float:right;
display:block;
width:98%;
margin:1% 1% 1% 1%;
clear:both;
}










.logo {
margin-left: auto!important;
margin-right: auto!important;
float:none!important;
text-align:center;
}




.navi {
		
text-align:center;
font-size:3em;
font-weight:300;					
}

.navi-sub {
		
text-align:center;				
}

.navi li {
width:100%;
display:block;
}





			
}