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; }
}










img {
width:100%;
}




















/*HEADLINES
ABSATZ */



#content {

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

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



#content h1 {
font-size:48px;
font-weight:100;
line-height:54px;
margin:0px 0px 30px 0px;
}

#content h2 {
font-size:40px;
font-weight:300;
line-height:48px;
margin:0px 0px 30px 0px;
}

#content h3 {
font-size:36px;
font-weight:300;
line-height:42px;
margin:0px 0px 20px 0px;
}

#content h4 {
font-size:30px;
font-weight:400;
line-height:36px;
margin:0px 0px 20px 0px;
}

#content h5 {
font-size:24px;
font-weight:400;
line-height:30px;
margin:0px 0px 20px 0px;
}

#content h6 {
font-size:20px;
font-weight:400;
line-height:24px;
margin:0px 0px 20px 0px;
}

#content h7 {
font-size:18px;
font-weight:400;
line-height:24px;
margin:0px 0px 20px 0px;
}

#content p {
font-size:18px;
line-height:28px;
margin:0px 0px 20px 0px;
}



#content a {
color:#000;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}

#content a:hover{
color:grey;          
}























/*ID's */








#header {
clear:both;
margin:0;
padding:0;
width:100%;
}



#p1-001,
#p1-002,
#p1-003,
#p1-004,
#p1-005,
#p1-006,
#p1-007,
#p1-008,
#p1-009,
#p1-010, 

#p2-001,
#p2-002,
#p2-003,
#p2-004,
#p2-005,
#p2-006,
#p2-007,
#p2-008,
#p2-009,
#p2-010,

#p3-001,
#p3-002,
#p3-003,
#p3-004,
#p3-005,
#p3-006,
#p3-007,
#p3-008,
#p3-009,
#p3-010, 

#p4-001,
#p4-002,
#p4-003,
#p4-004,
#p4-005,
#p4-006,
#p4-007,
#p4-008,
#p4-009,
#p4-010,

#p5-001,
#p5-002,
#p5-003,
#p5-004,
#p5-005,
#p5-006,
#p5-007,
#p5-008,
#p5-009,
#p5-010,

#p6-001,
#p6-002,
#p6-003,
#p6-004,
#p6-005,
#p6-006,
#p6-007,
#p6-008,
#p6-009,
#p6-010,

#p7-001,
#p7-002,
#p7-003,
#p7-004,
#p7-005,
#p7-006,
#p7-007,
#p7-008,
#p7-009,
#p7-010,

#p8-001,
#p8-002,
#p8-003,
#p8-004,
#p8-005,
#p8-006,
#p8-007,
#p8-008,
#p8-009,
#p8-010,

#p9-001,
#p9-002,
#p9-003,
#p9-004,
#p9-005,
#p9-006,
#p9-007,
#p9-008,
#p9-009,
#p9-010,

#p10-001,
#p10-002,
#p10-003,
#p10-004,
#p10-005,
#p10-006,
#p10-007,
#p10-008,
#p10-009,
#p10-010
{
overflow:hidden;
margin:0;
padding:0;
width:100%;
}













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



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










/*Farbig hinterlegte DIVS, die einmalig auf jeder Unterseite vorkommen */



#coloured-div1 {
clear:both;
margin:0;
padding:0;
width:100%;
background-color:#324a5f;
color:#fff;
}


#coloured-div2 {
clear:both;
margin:0;
padding:0;
width:100%;
background-color:#727c58;
}


#coloured-div3 {
clear:both;
margin:0;
padding:0;
width:100%;
background-color:#323232;
color:#fff;
}























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










/*LOGO */



.logo {
position:relative;
}

.logo img {
width:auto;
}








/*ALLGEMEINES PADDING */


.padd {
padding:1%;
}




/*PADDING INNERHALB EINZELNER MODULE, DA GLEICHBLEIBENDER ABSTAND IN PIXEL */

.padd-pixel {
padding:20px;
}




/*ZENTRIERUNG UND CONTENT-BREITE */

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





/*GROBE EINTEILUNG IN RECHTS ODER LINKS */

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

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





/*PLATZIERUNG RECHTS ODER LINKS MIT INTEGRIERTEM ABSTAND ZUR NEBENSTEHENDEN SPALTE */

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

.content-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 */


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



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

-webkit-animation: fadeIn 1s;

background-color:none;
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% 2%;
padding:0;

-webkit-animation: fadeIn 1s;

background-color:none;
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 {
background-color:none;

}






















/*MODUL 2-spaltig 1:3 */
/*2 Spalten a, b */


.mod2-3col-1 {
overflow:hidden;
margin:0;
padding:0;
width:100%;
}



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

-webkit-animation: fadeIn 1s;

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

.mod2-3col-1-b {
position:relative;
float:right;
display:block;
width:66.1%;
margin:1% 0% 1% 0%;
padding:0;
clear:right;

-webkit-animation: fadeIn 1s;

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


.mod2-3col-1-a:hover, .mod2-3col-1-b:hover {
background-color:none;

}



















/*MODUL 2-spaltig 3:1 */
/*2 Spalten a, b */


.mod2-3col-2 {
overflow:hidden;
margin:0;
padding:0;
width:100%;
}



.mod2-3col-2-a {
position:relative;
float:left;
display:block;
width:66.1%;
margin:1% 0% 1% 0%;
padding:0;

-webkit-animation: fadeIn 1s;

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

.mod2-3col-2-b {
position:relative;
float:right;
display:block;
width:32.3%;
margin:1% 0% 1% 1%;
padding:0;
clear:right;

-webkit-animation: fadeIn 1s;

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


.mod2-3col-2-a:hover, 
.mod2-3col-2-b:hover {
background-color:none;

}



















/*MODUL 2-spaltig 1:4 */
/*2 Spalten a, b */


.mod2-4col-1 {
overflow:hidden;
margin:0;
padding:0;
width:100%;
}



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

-webkit-animation: fadeIn 1s;

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

.mod2-4col-1-b {
position:relative;
float:right;
display:block;
width:74.55%;
margin:1% 0% 1% 0%;
padding:0;
clear:right;

-webkit-animation: fadeIn 1s;

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


.mod2-4col-1-a:hover, .mod2-4col-1-b:hover {
background-color:none;

}



















/*MODUL 2-spaltig 4:1 */
/*2 Spalten a, b */


.mod2-4col-2 {
overflow:hidden;
margin:0;
padding:0;
width:100%;
}



.mod2-4col-2-a {
position:relative;
float:left;
display:block;
width:74.55%;
margin:1% 0% 1% 0%;
padding:0;

-webkit-animation: fadeIn 1s;

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

.mod2-4col-2-b {
position:relative;
float:right;
display:block;
width:23.75%;
margin:1% 0% 1% 1%;
padding:0;
clear:right;

-webkit-animation: fadeIn 1s;

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


.mod2-4col-2-a:hover, 
.mod2-4col-2-b:hover {
background-color:none;

}


















/*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;

background-color:none;
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;

background-color:none;
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;

background-color:none;
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 {
background-color:none;

}











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


.mod4 {
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:none;
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:none;
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:none;
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:right;
display:block;
width:23.75%;
margin:1% 0% 1% 0%;
padding:0;
clear:right;


-webkit-animation: fadeIn 1s;

background-color:none;
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:none;

}































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




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



.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) {  
			    





#content h1,
#content h2,
#content h3,
#content h4,
#content h5,
#content h6,
#content h7,
#content p,
li {

text-align:center;
}



#content h1 {
font-size:48px;
line-height:60px;
}


#content h2 {
font-size:28px;
line-height:42px;
}

#content h3,
#content h4,
#content h5,
#content h6,
#content h7,
#content h8, {
font-size:24px;
line-height:36px;
}

#content p {
font-size:24px;
line-height:36px;
}




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

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



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

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














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


.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% 1% 1%;
padding:0px;
clear:both;
}















/*MODUL 2-spaltig 1:3 */
/*2 Spalten a, b */


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

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













/*MODUL 2-spaltig 3:1 */
/*2 Spalten a, b */


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

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














/*MODUL 2-spaltig 1:4 */
/*2 Spalten a, b */


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

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













/*MODUL 2-spaltig 4:1 */
/*2 Spalten a, b */


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

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












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


.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;
}















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


.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;
}










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





			
}