html { margin: 0; padding: 0; }
body { font-family: helvetica arial, sans-serif; margin: 0 10px; padding: 0; }
    h1 { font-size: 20px; line-height: 26px; font-weight: normal; text-align: left; }
h1 span { color: #a91b1b; }
    /*h2 { font-size: 28px; font-weight: normal; color: #333; line-height: 36px; text-align: left; }*/
    p { font-size: 14px; font-weight: normal; color: #666; line-height: 17px; text-align: left; }
    img { border: 0; }
#links, li, a, dt, img { transition: all 300ms; -moz-transition: all 300ms; -o-transition: all 300ms;}


a { text-decoration: none; color: #a91b1b; }

.anchorDesktop { display: none; }
.desktop { display: none; }
.anchorMobil { display: inline; }
.mobil { display: inline; }

section { clear: both; text-align: center; margin: 0 0 0 0; padding: 0; }


ul { list-style-type: none;
margin: 0; padding: 0;  text-align: left;}

li { font-weight: normal; }

    
    .trenner { width: 100%; margin: 0; padding: 0; clear: both; }
.trennerDown { margin: 80px auto; padding: 0; }

#wrapper {
  width: 100%;
    height: auto;
    margin: 0 0 0 0;
    padding: 0;
}

header { position: relative; width: 100%; height: auto; z-index: 1000; }
    

#metanavi { width: 100%; height: 60px; margin: 0; padding: 0; background-color: #fff; } 
#metanavi ul { text-align: right; margin-right: 10px; }
#metanavi ul li { display: inline; margin-left:10px; } 
#metanavi ul li a { color:#777; font-size: 12px; font-weight: normal; line-height: 30px; }

    #rechts {
  width: 40%;
    margin: 0;
    padding: 0;
        height: auto;
        text-align: center;
        float: right;

}

    #rechts img {
  width: 100%;
    margin: 0;
    padding: 0;

}
    
        #links {
  width: 150px; 
    margin: 0;
    padding: 0;      
 background-color: #fff;
}

        #links img {
  width: 100%; 
    margin: 0;
    padding: 0;
    float: none;        

}


nav { font-family:'Univers LT W01_39 Thin Ult Cn'; font-weight: lighter; }
nav ul { margin: 0 0 0 0; padding: 0 0 0 0; text-align: left; }
nav ul li { margin: 15px 0; padding: 0; display: block; }
  nav a { font-size: 34px; color: #fff; background: #999; display: block; padding:8px 2px 8px 37px; }
  nav a:hover { background: #a91b1b; }


/* INTRO ********************************/

#intro h1 {
color: #a91b1b;

}


#intro ul {
    font-size: 14px;
color: #a91b1b;
     line-height: 17px;

}

#intro ul li {
    margin: 5px 0;

}

/* PERSON *******************************/

#person h1 {
color: #330000;

}

#person ul {
    font-size: 14px;
color: #a91b1b;
     line-height: 17px;

}

#person ul li {
    margin: 5px 0;

}

/*accordeon css*/
			
			dl {  width: 100%; height: auto; margin-top: 30px; }
			
			dt {
				font-weight:normal;
				color:#fff;
				text-align: left;
				background: #999;
				width:100%;
				font-size: 14px;
                display:block;
				padding:10px 0 10px 0px;
				margin-top:15px;
				margin-bottom:4px;
				cursor:pointer;
			}
			
			dt:hover {
				color:#fff;
				background: #a91b1b;
			}
			
			
			dd {
				display:none;
				text-align: left;
				background:#fff;
				margin:0 0 10px 0;
				float:left;
				width:100%;
				padding:5px 0 22px 0px;
				font-size:14px;
				line-height: 17px;
                color: #666;
			}
            
            dd.first {
				display:block;
			}

dd ul { margin: 5px 0; }
dd ul li { color: #666; }

/* WORK ********************************/

#work h1 { color: #330000; }

/*#projekte ul { padding: 0; margin: 0 auto 0 auto; }

#projekte ul li { width: 100%; margin-bottom: 15px; float: none; text-align: center; }

#projekte img { width: 90% }

#projekte img:hover { transform: scale(1.1);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3);}*/

.branchpic {
float:none;
margin: 0 0 15px 0;
    padding: 0;
font-size:14px;
}

div.description {
			position:absolute; /* absolute position (so we can position it where we want)*/
			bottom:0px; /* position will be on bottom */
			left:0px;
			text-align:left;
					width:100%;

			margin:0;
			display:none; /* hide it */
			/* styling bellow */
			background-color:#a91b1b;
			color:#fff;
    font-size: 12px; line-height: 15px;
			
		}

div.description_content {
				padding:10px;
			}



.branchpic ul {
margin:0;
    padding: 0;
}

.branchpic ul li {
margin:5px 0;
padding: 0;
}

.branchpic img {
	display:block;
		-moz-transition:  opacity .3s linear;
		-webkit-transition:  opacity .3s linear;
		transition:  opacity .3s linear;
        width:100%;
	}

.left { margin: 20px 0 20px 0; } 
.right { margin: 20px 0 20px 0; } 
 
	.branchpic img:hover {
		opacity: 1.0;
	}

			div.branchpic {
			position:relative; /* important(so we can absolutely position the description div */
                padding:0;
		}



/* KONTAKT ********************************/

#kontakt h1 { color: #330000; }

    
            .telefon {
  width: 100%; /* Full width */
    margin: 30px 0;
    padding: 0;
    text-align: center;

}

.telefon a { font-size: 18px; font-weight: normal; color: #fff; background: #999; display: block; padding:30px 10px; }
.telefon a:hover { color: #fff; background: #a91b1b; }
    
                .email {
  width: 100%; /* Full width */
    margin: 30px 0;
    padding: 0;
    text-align: center;

}

.email a { font-size: 18px; font-weight: normal; color: #fff; background: #999; display: block; padding:30px 10px; }
.email a:hover { color: #fff; background: #a91b1b; }


/* MEDIA QUERIES ********************************/

@media only screen and (min-width: 360px) {
    
        #links {
  width: 195px; 
            
}
    
        #rechts img {
  width: 95%;

}
    
      nav a { font-size: 36px; padding:10px 2px 10px 48px; }
		}



@media only screen and (min-width: 400px) {
        h1 { font-size: 22px; line-height: 28px; }
    
        #links {
  width: 215px; 
            
}
    
            #rechts img {
  width: 90%;

}
    
          nav a { font-size: 40px; padding:12px 2px 12px 53px; }
		
		}

@media only screen and (min-width: 440px) {
    
        #links {
  width: 240px; 
            
}
    
                #rechts img {
  width: 85%;

}
              nav a { font-size: 40px; padding:12px 2px 12px 59px; }
		}

@media only screen and (min-width: 480px) {
    
    h1 { font-size: 24px; line-height: 30px; }
    
        #links {
  width: 260px; 
            
}
    
                    #rechts img {
  width: 80%;

}
    
     nav a { font-size: 42px; padding:13px 2px 13px 64px; }
		}

@media only screen and (min-width: 600px) {
    
        #links {
  width: 310px; 
            
}
    
                    #rechts img {
  width: 75%;

}
    
    nav a { font-size: 50px; padding:15px 2px 15px 75px; }
		}

@media only screen and (min-width: 768px) {
    
    body { margin: 0 0px; }
    h1 { font-size: 22px; line-height: 28px; }
    h1.person { padding-top: 280px; margin-top: -280px }
    h1.work { padding-top: 280px; margin-top: -280px }
    
.anchorDesktop { display: inline; }
.desktop { display: inline; }
.anchorMobil { display: none; }
.mobil { display: none; }
    
   section { margin: 0 0 0 20px; } 
    
    #wrapper {
    margin: 0;
    padding: 0;
}
    
    #metanavi ul { margin-right: 30px; }
    
    header { position:fixed; top: 0; margin: 0 0 0 20px; height: 200px; }
    
        #links {
  width: 70%; 
            height: 200px;
}
    
            #links img {
  width: 170px; 
    margin: 0;
    padding: 0;
    float: left;      

}
    
        #rechts {
  width: 30%;
        text-align: center;

}
    
                    #rechts img {
  width: 70%;

}
    
    nav { }
    
    nav ul { width: 100%; margin: 0 0 0 0; padding: 41px 0 0 0; text-align: right; }
    
    nav ul li { display: inline; margin-left: 10px; }
    
      nav a { display: inline; font-size: 40px; padding: 12px 10px 45px 10px; }

    
    
    /* INTRO ********************************/   
    
        #intro { 
            width: 70%;
padding-top: 260px;

}
    
        /* PERSON ********************************/   
    
        #person {
            width: 70%; margin-top: 80px;

}
    
            /* WORK ********************************/   
    
        #work {
            width: 70%; margin-top: 80px;

}
    .branchpic {
float:left; width:48.4%; }
    

    
.left { margin: 8px 8px 8px 0; } 
.right { margin: 8px 0 8px 8px; }  
    
            /* KONTAKT ********************************/   
    
        #kontakt {
            width: 70%; margin-top: 80px;

}


		}

@media only screen and (min-width: 1024px) {
    
    h1 { font-size: 30px; line-height: 36px; }
    /*h2 { font-size: 36px; line-height: 44px; }*/
    p { font-size: 18px; line-height: 22px; }
    
    
    h1.person { padding-top: 320px; margin-top: -320px }
    h1.work { padding-top: 320px; margin-top: -320px }
    
    header { height: 250px; }
    
            #links {
            height: 250px;
            
}
    
            #links img {
  width: 230px;      

}
    
                        #rechts img {
  width: 70%;

}
    
    nav ul { margin: 0 0 0 15px; padding: 60px 0 0 0; }
    
    nav ul li { margin-left: 20px; }
    
      nav a { font-size: 48px; padding: 21px 15px 63px 15px; }
    
        /* INTRO ********************************/   
    
        #intro {
padding-top: 300px;

}
    
    #intro ul {
    font-size: 18px;
     line-height: 22px;

}

#intro ul li {
    margin: 10px 0;

}
    
    /* PERSON ********************************/ 
    
            #person {
margin-top: 100px;

}
    
        #person ul {
    font-size: 18px;
     line-height: 22px;

}
    dt {
					font-size:20px;
					line-height: 25px;
				}
				
				dd {
					font-size: 18px;
					line-height: 22px;
				}
    

    
       /* WORK ********************************/
    
            #work {
            margin-top: 100px;

}
    
        .branchpic {
width:48.8%; }


			}
    
		

@media only screen and (min-width: 1280px) {
    
        h1 { font-size: 34px; line-height: 40px; }
    
    section { margin: 0 0 0 0; } 
    
    #wrapper {
  width: 1240px;
    margin: 0 auto;
}
    
        h1.person { padding-top: 320px; margin-top: -320px }
    h1.work { padding-top: 320px; margin-top: -320px }
    
    header { width: 1240px; margin: 0 0 0 0; }
    
            #links {
  width: 868px; 
   height: 250px;         
}
    
                #links img {
  width: 260px;      

}
    
            #rechts {
  width: 372px;
}
    
                            #rechts img {
  width: 70%;

}
    
    #metanavi { width: 1240px; } 
    
        nav ul { margin: 0 0 0 15px; padding: 63px 0 0 0; }
    
    nav ul li { margin-left: 20px; }
    
      nav a { font-size: 60px; padding: 20px 20px 67px 20px; }
    
        /* INTRO ********************************/   
    
        #intro {
padding-top: 292px;
 margin: 0 0 0 0;
}
    
            /* PERSON ********************************/   
    
        #person {
            margin-top: 120px;

}
   
    
           /* WORK ********************************/
    
            #work {
            margin-top: 120px;

}
    
        .branchpic {
width:49%; }
    
                /* KONTAKT ********************************/   
    
        #kontakt {
            margin-top: 120px;

}
 

}