/* RESET - http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 */
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
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;}

/* WEBSITE-STYLE */
subnavigation div.container,
div#logo div.container,
nav div.container,
section div.container,
div.content div.container,
footer div.container {  
	max-width: 1024px;
	margin: 0 auto;
	height: 100%;
 	}

body {background-color: #3B3B3A; padding: 50px;}

/* Bild Höhe automatisch anpassen */
img#img_imagefoto {width: 100%; height: auto;}
img#imglogo {width: 100%; max-width: 650px; height: auto;}
img#imglogokl {width: 100%; max-width: 250px; height: auto;}


/* Logo zentrieren */
div.logo img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 650px;
	}

/* SPALTEN */
.zweispaltiger_inhalt,
.zweispaltiger_inhalt_1,
.zweispaltiger_inhalt_2
 { 
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	}
.zweispaltiger_inhalt {
	width: 100%; 
	}
.zweispaltiger_inhalt_1,
.zweispaltiger_inhalt_2 {
	display: inline-block;
	vertical-align: top;
	width: 100%;
	text-align: left;
	}	
.zweispaltiger_inhalt_1 {width: 45%; margin-right:3%;}
.zweispaltiger_inhalt_2 {width: 45%;}

.dreispaltiger_inhalt,
.dreispaltiger_inhalt_1,
.dreispaltiger_inhalt_2,
.dreispaltiger_inhalt_3
 { 
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	}
.dreispaltiger_inhalt {
	width: 100%; 
	}
.dreispaltiger_inhalt_1,
.dreispaltiger_inhalt_2,
.dreispaltiger_inhalt_3 {
	display: inline-block;
	vertical-align: top;
	width: 100%;
	text-align: left;
	}	
.dreispaltiger_inhalt_1 {width: 30%; margin-right:3%;}
.dreispaltiger_inhalt_2 {width: 30%; margin-right:3%;}
.dreispaltiger_inhalt_3 {width: 30%;}

.abstandvor5 {margin-top: 5px;}
.abstandvor7 {margin-top: 7px;}
.abstandvor10 {margin-top: 10px;}
.abstandvor15 {margin-top: 15px;}
.abstandvor20 {margin-top: 20px;}
.abstandvor25 {margin-top: 25px;}
.abstandvor30 {margin-top: 30px;}
.abstandvor35 {margin-top: 35px;}
.abstandvor40 {margin-top: 40px;}
.abstandvor45 {margin-top: 45px;}
.abstandvor50 {margin-top: 50px;}
.abstandvor55 {margin-top: 55px;}
.abstandvor60 {margin-top: 60px;}
.abstandvor70 {margin-top: 70px;}
.abstandvor80 {margin-top: 80px;}
.abstandvor90 {margin-top: 90px;}
.abstandvor100 {margin-top: 100px;}
.abstand0 {margin-bottom: 0px;}
.abstand5 {margin-bottom: 5px;}
.abstand7 {margin-bottom: 7px;}
.abstand10 {margin-bottom: 10px;}
.abstand15 {margin-bottom: 15px;}
.abstand20 {margin-bottom: 20px;}
.abstand25 {margin-bottom: 25px;}
.abstand30 {margin-bottom: 30px;}
.abstand35 {margin-bottom: 35px;}
.abstand40 {margin-bottom: 40px;}
.abstand35 {margin-bottom: 35px;}
.abstand40 {margin-bottom: 40px;}
.abstand45 {margin-bottom: 45px;}
.abstand50 {margin-bottom: 50px;}
.abstand55 {margin-bottom: 55px;}
.abstand60 {margin-bottom: 60px;}
.abstand70 {margin-bottom: 70px;}
.abstand80 {margin-bottom: 80px;}
.abstand90 {margin-bottom: 90px;}
.abstand100 {margin-bottom: 100px;}


/* MEDIAQUERIES */	
@media only screen and (max-width: xxxxxxx) {        }


@media only screen and (max-width: 1025px) {
	header, nav, div.breadcrumb, div#content_wrapper, footer div.container {padding-left: 25px; padding-right: 25px;}
}

@media only screen and (max-width: 340px) {
	header, nav, div.breadcrumb, div#content_wrapper, footer div.container {padding-left: 10px; padding-right: 10px;}
}


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

.logo,
.subnavigation {
	display: block;
	vertical-align: middle;
	width: 100%;
	}
	
div.logo img, div.slogan img {
	width: 85%;
    display: block;
    margin-left: auto;
    margin-right: auto;
	}
    
div.logo img {max-width: 200px;}
    
.subnavigation {text-align: center;	}	
.subnavigation li {margin-bottom: 10px;}

.zweispaltiger_inhalt_1,
.zweispaltiger_inhalt_2 {display: block; vertical-align: middle; width: 100%;}

.dreispaltiger_inhalt_1,
.dreispaltiger_inhalt_2,
.dreispaltiger_inhalt_3 {display: block; width: 100%; background: none;}