/*
###########################################################################
Main styles for Schiffner Consult, schiffner-gefahrgut.de 2013

FileName:   main5.css
Author:		Barbara Völk, www.voelkwerbung.de
Version:    2013.07.22
###########################################################################
*/


/***********************************************/
/* COLOURS */

/*
Type:
Page Headline: Belwe
Menu: Futura reg
Body: font-family: Futura, AvantGarde, Helvetica, Arial, sans-serif;
*/

/*COLOURS:  schiffner
Logo 4c:
dGray: #353c3c
red: #ca1525

green #c0c300
orange #eb800b AI macht #EA7F0A

lGreen #e7e89e = 40% of #c0c300
E7E89E

dLila #4c1367
lila #9b80ac

dGray #333
dd-gray: #393a3b
gray # 4f4e4e
l-gray: f2f2f2
gray2: #5b5b5b

ll-gray: ccc for testing
*/

/***********************************************/


/***********************************************/
/* MAIN SETUP RESET */
/***********************************************/

html, body, div, a, p, img, ul, li, h1, h2, h3, h4, span, time, hr, hgroup, a img, footer, header, section, aside, nav, form, input, article, label, textarea, small {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
  	text-decoration:none;
}
footer, section, article, header, aside, nav {
    display:block;
}
:focus {
    outline:none;
}
::-moz-selection, ::selection {
   color:#ffffff; color: #333333;
   background: #e7e89e;
}

h1, h2, h3, h4 {
    font-weight:normal;
}

ul {
    /*list-style:none; list-style-type: square;*/list-style-type: none;
}


/* Set up for stiles for links + hover effects for desktop + mobile (which don't use :hover) */
a:link {
	color: #333333;
	text-decoration: underline;
}
a:visited {
	color: #333333;
	text-decoration: none;
}
a:hover, a:active, a:focus {
	color: #ca1525;  /*#ca1525 schiffner red */
	text-decoration: underline;
}

.red { color: #ca1525;  /*#ca1525 schiffner red */}

/********************************************************************/
/* MAIN SETUP BASIC ELEMENTS */
/********************************************************************/

html {
   height:101%; /* make scrollbar visible all the time */
   /* border-top:solid 2px #353c3c;*//*border-bottom:solid 2px #353c3c;*/
   /*background: transparent url("../images/bottom.png") center bottom no-repeat fixed;background: transparent url("../images/bottom.png") center bottom repeat-x fixed;*/
   /*background: #ffffff url("../images/bg.png") left top repeat-x; */
}

body {
	font-size:20px; font-size: 12px; font-size: 0.750rem; /*letter-spacing: 1px;*/
	color: #333333;
	font-family: Futura, AvantGarde, Helvetica, Arial, sans-serif;
   -webkit-text-size-adjust:100%; /* Specifies a size adjustment for displaying text content in Safari on iPhone. */
   line-height:1.3em; line-height:1.1rem;
   background: #ffffff url("../images/bg.png") left top repeat-x;
   /* background: url("../images/indexMen.png") left center no-repeat;*/
}

::-webkit-scrollbar {
	width: 8px;
}
::-webkit-scrollbar-button {
	width: 8px;
	height:5px;
}
::-webkit-scrollbar-track {
	background: /*#c0c300; green*/ #f2f2f2;
	border: skinny plain lightgray;
	box-shadow: 0px 0px 3px #dfdfdf inset;
	border-radius:10px;
}
::-webkit-scrollbar-thumb {
	background: /*#eb800b; orange #c0c300; */#353c3c;
	border: skinny plain gray;
	border-radius:10px;
}
::-webkit-scrollbar-thumb:hover {
	background: /*#e7e89e; l-green */#5b5b5b;
}

/********************************************************************/
/* MAIN WRAPPERS + MAIN LAYOUT ELEMENT + TAG SELECTORS */
/********************************************************************/

#outerWrap { /* height: 101%; make scrollbar visible all the time overflow: scroll;*/
    width:100%;
   /*
	background: url("../images/indexMen.png") center 70px no-repeat;
	background: url("../images/indexMen-vers1.png") 20% 70px no-repeat;
	background: url("../images/indexMen.png") 20% 62px no-repeat; */
	background: transparent;
}

.innerWrap {
  width:96%; width: 100%;width: 98%;
  max-width:1200px;max-width:1000px;
  margin:0 auto; background: transparent; /*  background: #906; #906 tester lila */
 /*  background: url("../images/indexMen.png") center center no-repeat fixed;
 height: 500px;*//*position: relative;*/
}


/* settings within #stoerer  */
#stoerer1 { /*  transparent tester grey background: #CCC ;*/width:215px;width: 340px; width: 300px; height: 178px; float:left; margin-left: 50px; }
#stoerer {/*position: relative; top: 70px; top: 76px;top: 340px;top: 420px;left: 300px;*//*background: url(../images/stellenangebot4.png) no-repeat top left;*/background: transparent; /*  transparenttester grey background: #CCC ;*/width:215px;width: 340px; width: 400px; height: 278px; float:left;}


#stoerer h5 {float:left; margin: 20px 0px 0 0; padding: 0px 0px 0 0;text-align: right;font-size: 14px;/*width:215px; */height: 76px;/*background:#eee;*/  height: 106px;}
#stoerer a {text-decoration: none; color: #333333;/*color: #ca1525;red*/height:180px;width:215px;}
#stoerer a:hover, #stoerer a:active, #stoerer a:focus {text-decoration: none; color: #ca1525;}


.angebot, .stellenangebot {margin: 20px 0px 0 60px;margin:60px 0px 0 140px;margin: 0; }
.angebot a img, .angebot a:visited img {width:215px; height: 96px;background:url(../images/rabattRed20.png ) no-repeat left top;}
.angebot a:hover img, .angebot a:active img, .angebot a:focus img { background:url(../images/rabattRed20_o.png ) no-repeat left top; }
/*.angebot { display:none;}*/ /* as of 01.Jan.2015 */

.stellenangebot a img, .stellenangebot a:visited img {background:url(../images/stellenangebot3_o.png ) no-repeat left top; margin-top: 30px;}
.stellenangebot a:hover img,  .stellenangebot a:active img, .stellenangebot a:focus img { background:url(../images/stellenangebot3_o.png ) no-repeat left top; }

#karte {/* background: #ddd;*/ background: transparent;/*background:transparent url(../images/karte.gif) no-repeat left top;*/background:transparent url(../images/karte.png) no-repeat left top; min-width:215px; width:100%;float:left;margin: 80px 0px 0 70px; margin: 320px 0 0 170px;margin: 280px 0 0 170px;margin: 260px 0 0 170px;}
#karte img{/*can't use this, because of hover effects!!! */ /*background: transparent; width:auto; max-width:215px;height: auto;float:right;margin: 0 0 0 0px;*/}

/* NOTE: #fragen for normal page (hide when when #stellenangebot visible + vice versa
#fragen1 for index -> need spacer fragen always, but fide p when not needed
#fragen2 is for stellenangebot + anmeldeformulare (have "Haben Sie Fragen" alway visible */
#fragen, #fragen2, #fragen1 {/*position: relative; top: 10px; left: 0px;*/background: url(../nav/fragen.gif) no-repeat top left;width:215px; height: 76px;margin: 10px 0 0 0;}
#fragen p, #fragen2 p , #fragen1 p  {float:right; margin: 44px 16px 0 0; margin: 48px 16px 0 0;padding: 0;text-align: right;font-size: 11px;  font-size: 0.750rem;line-height:0.9rem; background:#ffffff;}
#fragen a, #fragen2 a , #fragen1 a {/*text-decoration: underline; */ text-decoration: none;color: #333333;/*color: #ca1525;red*/}
#fragen a:visited, #fragen2 a:visited, #fragen1 a:visited {color: #ca1525;}
#fragen a:hover, #fragen a:active, #fragen a:focus, #fragen2 a:hover, #fragen2 a:active, #fragen2 a:focus, #fragen1 a:hover, #fragen1 a:active, #fragen1 a:focus {text-decoration: underline; color: #ca1525;}


/* for index/home activate/deactivate when stoerer like job offer is needed */
/*#fragen1 p { display: none;}
#fragen1 { background: transparent;}  */

#stellenangebot {width:215px; height: 66px;margin: 20px 0 0 0; padding: 0;}
#stellenangebot p {float:right; margin: 16px 0px 0 0;padding: 0;}
#stellenangebot a img, #stellenangebot a:visited img {background:url(../images/stellenangebot3.png ) no-repeat left top;padding: 0; margin: 0;}
#stellenangebot a:hover img, #stellenangebot a:active img, #stellenangebot a:focus img {background:url(../images/stellenangebot3_o.png ) no-repeat left top;}
#stellenangebot { display: none;} /* set up eye-catcher by mistake!!!  */

.mainContent {max-width:400px; width:auto;margin-right:0; margin-bottom: 0;margin: 0;padding: 0; /* background: #FF0;#FF0 yellow tester */ overflow: visible;float: right; postion: relative; top: 0; height: auto;height: auto;}



#first, #first2 {
  /*padding:30px 0 30px 0;padding:20px 0 20px 0;
  max-width:580px;*/
  position: relative; top: -330px; top: -340px;top: -320px;/*background: #666;*/
  width:100%;overflow: hidden;overflow: visible;
}


/* #second used in section */
#second, #second2 {
  /*padding:30px 0 30px 0;padding:20px 0 20px 0;
  max-width:580px;*/
  position: relative; top: -160px; top: -170px; top: -150px;/*background: #999;*/
  width:100%;
}

/* #second used in section with menuPath! (Breadcrumbs) */
#second2 {
  position: relative; top: -170px; top: -116px; /* top: -150px;background: #999;*/
  width:100%;
}


.innerWrapOverflow {
  width:96%;
  max-width:1200px;
  margin:0 auto;
  overflow:auto;
  padding: 0;
  /*background: #999;  grey tester  #CFF  background:#CFF;*/ overflow: hidden;
}

#navWrap {
  width:100%;padding: 0 0 0 0; margin: 0 0 0 0;
    background: transparent url("../nav/logo.png") 720px 30px no-repeat;
  position: relative; top:0;height:100%;height: 140px;
   }


/***********************************************/
/* HEADER */
/***********************************************/


header/*, #topWrap*/ {
    width:100%;
	/*border-top: 1px solid #393a3b;*/
}

/*header small {
  width:100%;width:80%;width:85%;
  text-align:center;text-align: right;
  margin: 0;
  padding:10px 20px 20px 0px;
  display:block;border-bottom: 1px solid #393a3b;
   }*/

/*#date p, #dateIndex p, #footer p, #footerTermine p, #footerLehrgang p {float:right; margin: 0px 20px 0 0;margin: 0px 6px 0 0; padding: 0;text-align: right;}*/
/*.topNav {
  width:100%;width:80%;width:85%;
  text-align:center;text-align: right;text-align: left;
  margin: 0;
  padding:10px 20px 20px 0px;
  display:block;border-bottom: 1px solid #393a3b;
   }*/

.topNav {width:100%;
	margin: 0;
	padding: 0;
	/*background: #ddd;*/	overflow: hidden;
 }

.topNav small {
  width:100%;/*width:80%;width:85%;width: 90%;*/
  text-align:center;text-align: right;text-align: left;
  margin: 0;margin:0px 0 0 0;
  padding:10px 20px 20px 0px;padding:10px 20px 10px 0px;padding:10px 20px 0px 0px;
  display:block;border-bottom: 1px solid #393a3b;
   }


.topNav a, .topNav a:visited {color: #393a3b; /* dd-grey */font-size:inherit;text-decoration: none;}
footer a, footer a:visited, .innerWrapOverflow a, .innerWrapOverflow a:visited {color: #393a3b; /* dd-grey */font-size:inherit;text-decoration: none;}

/* Hiermit wird der Hintergrund und die Textfarbe bei der Navigation mit der Maus und der Tastatur geändert. */
.topNav a:hover, .topNav a:active, .topNav a:focus {color: #ca1525; /* voelk-lime  #e4e129 */ font-size:inherit;text-decoration: underline; }
footer a:hover, footer a:active, footer a:focus, .innerWrapOverflow a:hover, .innerWrapOverflow a:active, .innerWrapOverflow a:focus {color: #ca1525; /* voelk-lime  #e4e129 */ font-size:inherit;text-decoration: underline; }

.date {/*float: right;*/text-align: right;/* background: #eee;*/display:inline;display: block;padding: 0 20px 0 0px; }
.menueTop {/*float: left;/*padding: 0 10px 0 20px;*//**/text-align: left;float: left;padding: 0 10px 0 20px; }

.date {/*float: right;*/text-align: right;/* background: #eee;*/display:inline;display: block;padding: 0 10px 0 0px; }
.menueTop {/*float: left;/*padding: 0 10px 0 20px;*//**/text-align: left;float: left;padding: 0 10px 0 20px; }



/* #outerWrap {
    width:100%;
    padding:145px 0;
	background: url("../images/bg.png") left top no-repeat;
	background: url("../images/indexMen.png") center 70px no-repeat;
} */

#topLeft {
  width: 360px; width:400px;
  /*height: 300px;*/
  margin: 0;
 /*background: #933; tester d-red*/
 /*background: url("../images/indexMen.png") center 70px no-repeat;
  height: 500px; height: 600px;*/
}



/* new for 20. birthday offer */
/*#fragen {background: transparent;width:215px; height: 76px;margin: 10px 0 0 0;}
#fragen .angebot {margin: 20px 0px 0 60px;} */


.title {/*float: left; float: right;*//*position: absolute;top: 131px; */margin: 60px 0 0 0;margin: 68px 0 0 0;padding: 0px 0px 0px 0; font-size: 1em; line-height: 1.4em;/*1.6em;*/width: 270px;width: 360px;text-align:right;/*background: #ffffff;*/}


#logo {float: right;margin: 0  10px 0 0; display: none;/*background: #eee;*/}
#logo img {width: 132px; height: 106px;}

#home {float: right;margin: 0  0px 0 0; display:inline; width: 130px;height: 100px;width:100%; height:100%;position: relative; top:0;/*background: #666; d-grey*/}
#home img {width: 100%; height: 100%;}

/* NOTE header = .topWrap */
.topWrap h1 {
  width: 132px;height: 106px;/*width:100%;*/
  text-align:center;text-align:left;text-align: right;
  /*font-family: Futura, AvantGarde, Helvetica, Arial, sans-serif;*/
  font-size:2.2em;
  line-height:1em;
  letter-spacing:1px;text-decoration: none!important; /* NOTE: still has underline from link settings */overflow:hidden;
  float:right;display:inline;
  margin: 0;
}

/* header id="topWrap"  */
/* NOT used here jet!! h1 span + h1 img */
#topWrap h1 {
  width: 132px;height: 106px;/*width:100%;*/
  text-align:center;text-align:left;text-align: right;
  font-size:2.2em;
  line-height:1em;
  letter-spacing:1px;text-decoration: none!important; /* NOTE: still has underline from link settings */overflow:hidden;
  float:right;display:inline;
  margin: 0;
}

h1 span {
    margin:0 0 0 0px;color: #ffffff;text-decoration: none!important;overflow:hidden;display:none;
}
h1 img {
    margin:0 0 0 0px;width: 132px; height: 106px;/*background: url("../images/logo.png") left top no-repeat;*/
}

header a, .subnav a, .subnav p a:hover, .subMenu a, article a:hover, footer a {
  color:#434d52;
}
header a:hover, .subnav a:hover, article a, .subnav p a, .subMenu a:hover, footer a:hover {
    color:#ca1525;
}


/* nav div class="menue" */
nav { margin: 0 0 0 0;
  padding: 0px 0px 0px 0px;
  position: relative; top:0;position: absolute; top:2px;}
nav a.active, a.active { background: #c0c300; /* green bgTitle */background: url("../images/bgTitle.png") 0 0 repeat;}

.menue { width: 100%;/*position: absolute;top: 165px; */float:left; margin: 0px 0 0 30px;  margin: 0px 0 0 0px; padding: 0 0 0 0px;height: 98px; height: 106px; width: 700px;width: 740px;width: 720px;/*display:inline;background: #eee;*/ height: 130px;
position: relative; top:0;position: absolute; top:2px;/*background:#999; d-grey tester */ }

/* Breadcrumbs menu */
/* first version in .maincontent section#second */
#menuPath {margin:0 20px 0 -200px; margin:0 20px 0 -260px;padding:0; width: 100%;min-width: 400px;width:660px!important; height: auto;min-height: 60px;/*position: relative; left:-160px;background: #ddd;*/float: left; clear: both;}
/* second version in #navWrap nav .menue; in this combination need to set section#second again + for smartphones section#first (set up #second2 + #first2 ??? */
#menuPath {margin:0 20px 0 -200px; margin:0 20px 0 -260px;margin:26px 0px 0 0px;padding:0; width: 100%;min-width: 400px;width:910px!important; height: auto;min-height: 60px;/*position: relative; left:-160px;background: #ddd;*/float: left; clear: both;}


.imprint {/*position: absolute; top: 10px;*/ width: 720px; margin: 0px 20px 0 0px; margin:0 auto; padding: 0; /*color: #333;  font-size: 0.7em;*/ z-index: 300;/*border-bottom: 1px solid #393a3b;*/}


/*
.menu {
  text-align:center;
  display:block;
  width:100%;
  padding:5px 0 0 0;
  font-size:0.9em; font-size:0.9rem;
}
.menu li {
  display:inline;
  padding:0 9px;
}
.menu a {
  display:inline-block;
}
  */

.blockWrap {
  width:100%;width:90%; /*background:#999;*/margin:0;margin: 0 10px 0 0;
}

.wrapStyle {
 /* background:url(../images/texture.jpg) center top fixed;*/
}

/********************************************************************/
/* MAIN NAVIGATION */
/********************************************************************/

.menueFirst { padding: 6px 0 0 6px;float:left; width: 160px; min-height: 90px; height:auto !important; height: 90px; margin: 0; /*background: #c0c300;*/ /*background: #999 url("../nav/menueBg.png") left 26px repeat-x; */height: 116px!important; }
.menueMiddle { padding: 38px 0 0 6px;float:left; width: 160px;width: 190px; min-height: 90px; height:auto !important; height: 90px; margin: 33px 0 0 0;margin: 0;  /*background: #c0c300;*/  /*background: url("../nav/menueBg.png") left 26px repeat-x;*/}
.menueMiddle2 { padding: 38px 0 0 6px;float:left; width: 160px; min-height: 90px; height:auto !important; height: 90px; margin: 0; /*background: #c0c300;*/ /*background: url("../nav/menueBg.png") left 26px repeat-x;*/}
.menueLast  { padding: 38px 0 0 0px;float:left; width: 180px; min-height: 90px; height:auto !important; height: 90px;margin:0; /*background: #c0c300;*/ /*background: url("../nav/menueBg.png") left 26px repeat-x;*/}

.menueMobile {display: none;width: 100%;min-width:380px;/* background: #0FC;*/margin:0; margin: 33px 0 0 0;}
.menueMobile a {/*font-family: Futura, AvantGarde, Helvetica, Arial, sans-serif!important; font-family: AvantGarde, Helvetica, Arial, sans-serif!important; */font-family: Helvetica, Arial, sans-serif!important; /*letter-spacing: 3px!important;*/ font-stretch: expanded!important; font-weight:300!important;line-height:1.03rem!important;}

.mobileFirst {width: 200px;float: left;/*background: #96C;*/}
.mobileLast {width: 160px;float: right; float: left;margin: 0 0 0 20px;/*background: #990;*/}


div.trigger a, div.trigger a:visited, div.triggerActive a, div.triggerActive a:visited { display: block; margin-top: 0; text-decoration: none; padding: 0px 0 0px 0px; color: #4E4D4D ; font-size: 1em; font-size: 0.9em;  line-height: 0.9em;}

div.trigger a:hover, div.trigger a:active, div.trigger a:focus, div.triggerHead a:hover, div.triggerHead a:active, div.triggerHead a:focus  {
	padding: 0px 0 0px 0px; text-decoration: none; color: #9C9DA1; /*font-size: 1em;line-height: 0.9em;*/font-size: 16px; font-size:1.0rem; line-height:1.05rem;font-size: 1em; font-size: 0.9em; line-height: 0.9em;background:url("../nav/mArrow.gif") left center no-repeat;
}


div.trigger a, div.triggerActive a, div.triggerActive a:visited { display: block; margin-top: 0; text-decoration: none; padding: 0px 0 0px 0px; color: #333; font-size: 1em; font-size: 0.9em; line-height: 0.9em; }

div.trigger a:visited { display: block; margin-top: 0; text-decoration: none; padding: 0px 0 0px 0px; color: #ccc ; font-size: 1em; font-size: 0.9em; line-height: 0.9em;}

div.trigger a:hover, div.trigger a:active, div.trigger a:focus, div.triggerHead a:hover, div.triggerHead a:active, div.triggerHead a:focus  {
	padding: 0px 0 0px 0px; text-decoration: none; color: #9C9DA1; font-size: 1em; font-size: 0.9em; line-height: 0.9em;background:url("../nav/mArrow.gif") left center no-repeat;
}



/***********************************************/
/* MAIN CONTENT */
/***********************************************/


/* .fax, .phone2, .fax2 not needed jet*/

.phone, .fax {display:none;}
.copyright, .phone2, .fax2 { display: inline;}

/* settings for #fragen */
.phone2 {display:inline;display: none;/*background: #ddd;*/}
.address2 {display:inline;/*background: #999;*/}


section {max-width:700px; width: 100%; /*background: #0FF; l-green */}

article  {
  /*width:90%;*/
  max-width:600px;max-width:690px;
  margin:0 10px 20px 0;margin:0 10px 0px 0;margin:0 0px 0px 0;
  overflow:auto;
  padding:0 0 20px 0;padding:0 0 10px 0;/*background: #999; grey tester*/
  clear: both;
  }

article small { font-size:0.8em;
  width:100%;width:96%;
  text-align:center;text-align: right;margin: 0;
  /*padding:120px 0;padding:20px 0;padding:20px 20px 10px 0px;*/ padding-right: 40px;padding:8px 0px 8px 0px;
  display:block; /*overflow:hidden; background: #ddd;*/
   }


article p, .mainContent p {
  margin:0 0 10px 0;
  clear:both;
  line-height:1.5em;
  font-size:1.1em;
  word-spacing:1px;
  }

article p.large {
  font-size:1.26em;font-size:1.26em;max-width:540px;
}
article ul {
  font-size:1.1rem;
  margin: 0 0 10px 0;padding: 0;
  line-height:1.5em;
  list-style-type: square; list-style-position:outside; /*list-style-image: url(../images/square.png);*/
  font-size: 13px; font-size: 0.86rem;line-height: 1.0rem; margin: 10px 0px 10px 0; padding-left: 20px; list-style-type: square; list-style-position: outside; /*letter-spacing: 1px;*/color: #333333;
}



/********************************************************************/
/* Heading Rules */
/********************************************************************/


h1 {margin: 0;
	text-align: right;
 /* font-family: Futura, AvantGarde, Helvetica, Arial, sans-serif;font-weight: bold; */
  font-size:2.2em;font-size:1.2rem;
  font-size:1.8em;font-size: 15px; font-size:1.0rem;
   font-size: 17px; font-size:1.2rem;
  line-height:1em; line-height:1.0rem;
  /*letter-spacing:1px;*/
  padding: 4px 0 0 0;
 /* margin: 24px 20px 20px 0; */
  }



h2 {text-decoration: none; font-size: 1em;font-size: 1rem;
	font-size:1.6em;font-size: 13px; font-size: 0.9rem;  font-size: 16px; font-size:1.0rem;
	line-height:1.0rem; display: block;margin: 20px 0px 0px 0; }

h2 a{text-decoration: none;font-size: 0.9em; line-height: 1.1em; line-height:1.0rem; font-weight: bold; color: #333333; margin: 10px 0 0 100px; padding: 5px 0 0 80px; border-bottom: 1px solid #9C9DA1; background:url("../images/arrow.gif") left bottom no-repeat;/* width:280px;*/display: block;}


h2 a:hover, h2 a:active, h2 a:focus {text-decoration: none; font-size: 0.9em; line-height: 1.1em; line-height:1.0rem; font-weight: bold; color: #333; margin: 10px 0 0 100px; padding: 5px 0 0 80px; border-bottom: 1px solid #CA1525; background:url("../images/arrowRed.gif") left bottom no-repeat; /*width:280px;*/ display: block;}

h3 {font-size: 1.1em; line-height: 1.6em; font-weight: 500; margin: 24px 20px 10px 0; padding: 0; text-align: right;clear: both;}


h4 {font-size: 14px;font-size: 0.9rem;font-size: 14px;font-size: 0.875rem!important; line-height: 1.4rem; line-height: 1.2rem; line-height: 1.1rem!important; font-weight: bold; color: #333; margin: 0px 0 0 0; padding: 10px 0 0 40px; border-bottom: 1px solid #9C9DA1; background:url("../images/arrow.gif") left bottom no-repeat;  letter-spacing: 1px;}

h4 a{text-decoration: none;color: #333!important;font-weight: bold;}
h4 a:hover{text-decoration: none; color: #ca1525!important;}


ul { font-size: 10px;font-size: 0.93em; line-height: 1.0rem; margin: 0px 0px 10px 0; padding-left: 20px; list-style-type: square; list-style-position: outside; }
ul ul {font-size: 10px; margin: 0px 0px 0 40px; padding: 6px 8px 0px 0px; position: relative;list-style-type: square; list-style-position: outside;}


/* for #dropdown lists*/
li { padding-bottom: 1px; }


/*.mainContent ul li a { color: #333333; display: block; margin: 0 0 0 0; padding: 0 0px 0 0px;  text-decoration: none;display:block;}
.mainContent ul  a:hover, .mainContent ul a:active { margin: 0 0 0 0; padding: 0 0px 0 0px;  color: #ca1525; background-color: #e8e8e8; display:block;}*/

/*
.mainContent  p { margin: 0px 0 0px 40px; padding: 12px 20px 0 0;height: 1.4em; width:370px;}
.mainContent a:link, .mainContentLong a:link {color: #000000;text-decoration: underline;font-weight:400;}
.mainContent a:visited {color: #000000;font-weight: 400;text-decoration: underline;}*/
.mainContent ul li { margin: 0px 0px 1px 40px; padding: 0 0px 1px 0; }


#second h1, #second2 h1 {
	text-align: right;text-align: left;
  font-size:2.2em;font-size:1.2rem;
  font-size:1.8em;font-size: 15px; font-size:1.0rem;
  font-size: 16px; font-size:1.0rem;
  line-height:1em; line-height:1.0rem;
  letter-spacing:1px;
  padding: 4px 0 0 0;padding: 0px 0 0 40px;
 margin: 0px 0px 10px 0px;font-weight: bold;
  }

#second h2, #second2 h2 {text-decoration: none;  font-size: 16px; font-size:1.0rem;
	line-height:1.05rem; display: block;margin: 20px 0px 20px 0; }

#second h5, #second2 h5 {font-size: 14px;font-size: 0.9em; line-height: 1.6em; font-weight: bold; margin: 10px 0px 0px 20px; padding: 0px 0px 0px 20px; background-image:none;}
#second h5, #second2 h5 {font-size: 14px;font-size: 0.9rem; line-height: 1.4rem; line-height: 1.2rem; font-weight: bold; color: #333333; margin: 10px 0px 0px 20px; padding: 0px 0px 0px 20px; background-image:none; /*border-bottom: 1px solid #9C9DA1;*/  letter-spacing: 1px;}
/*
h5 a{text-decoration: none;color: #333!important;font-weight: bold;}
h5 a:hover{text-decoration: none; color: #ca1525!important;}*/

#second ul, #second2 ul {font-size: 12px;font-size: 14px;font-size: 0.9rem; line-height: 1.4rem;color: #333333; margin: 10px 0px 10px 0px; padding-left: 0px; list-style-type: none; list-style-position: outside;/*background: url(../navNeu/triangle.gif) no-repeat top left;*/}
#second ul li, #second2 ul li { color: #333333; line-height: 1.4em;padding-left: 14px; padding-bottom: 1px;list-style-position: outside;background: url(../nav/triangle.gif) no-repeat top left; list-style-type: none;}
#second ul ul, #second2 ul ul {font-size: 12px; font-size: 14px;font-size: 0.9rem; line-height: 1.4rem;margin: 6px 0px 2px 20px; /*margin: 6px 0px 2px 0px;*/  padding: 0px 8px 6px 0px; position: relative;list-style-type: square!important; list-style-position: outside;background:none; }
#second ul ul li, #second2 ul ul li { color: #333333; margin: 0 0 0 48px;/* margin: 0 0 0 0px;*/ padding: 0 7px 0 12px;padding: 0 7px 0 0px;list-style-type: square!important; background: none;}

#second2 ul {width: 100%;}
#second2 ul ul {width: 90%;}

article .left {clear:both;text-align: left;padding: 0px 30px 0px 0px; }
article .middle {text-align: center;padding: 0px 10px 0px 20px;}
article .right {text-align:right;float:right; padding: 0px 10px 0px 20px;/*clear:both;*/display: inline;}
article .clear {/*display: none; */ clear: both; max-height: 6px; height: 6px!important;display: block;}

.block {display: inline-block!important;}

.clearForm { display: block; height:1px; clear: both; margin-bottom: 20px;}

article ul li .middle {text-align: center;min-width: 220px!important;}

.icon {/*float:left;clear:left; position: relative;float:left;clear:both;*//*width: 180px;height: 17px;*/ float: right;display: inline; padding: 0px 0px 0px 20px!important;font-weight: normal!important; background: transparent url("../nav/pdficon_small.gif") no-repeat left top; line-height: 1.4em;}
.marginLeft {font-size: 14px;font-size: 0.9rem; margin: -10px 0 10px 0px;/**/padding: 0px 0px 0px 40px;}

#second2 ul ul.marginLeft2 {margin: 6px 0px 2px -44px;padding: 0px 0px 0px 10px;}


#second h3, #second h4, #second2 h3, #second2 h4 {/*font-size: 14px;font-size: 0.9rem; line-height: 1.2rem;*/ font-size: 16px;font-size: 1rem; line-height: 1.4rem; font-weight: bold; color: #333; margin: 0px 0 0 0; padding: 10px 0 0 40px; padding: 2px 0 0 40px;border-bottom: 1px solid #9C9DA1; background:url("../images/arrow.gif") left top no-repeat; letter-spacing: 1px;/*height: 22px;*/}
#second h3, #second2 h3 {margin: 16px 0 2px 0; padding: 2px 0 0 40px;background: url("../images/arrowRed.gif") left top no-repeat;text-align: left;}
/*#second2 h3 {margin: 16px 0 2px 0;margin: 24px 2px 0px 0; } */

#second h4 a{text-decoration: none;}

#second  p, #second2 p { margin: 0px 0 0px 20px; padding: 16px 0px 0 0; line-height: 1.4em; font-size: 14px;font-size: 0.9rem;line-height: 1.2rem;}

#second .floatRight, #second2 .floatRight {text-align: right;padding: 0px 0px 0 0;}
.important {font-size: 15px; font-size:1.0rem;font-size: 16px; font-size:1.1rem;}
.floatPrice {text-align: right;padding: 0px 0px 0 0; float: right;}

#menuPath {border-bottom: 1px solid #9C9DA1;min-height: 40px;min-height: 30px;clear: both;}
#menuPath ul  {font-size: 14px;font-size: 0.8rem; font-size: 12px;font-size: 0.75rem!important;line-height: 1.4rem; line-height: 1.0rem; font-weight: bold;font-weight: 500;letter-spacing: 1px;  color: #c0c300;/* green try */color: #ca1525; /* red try */color: #333; margin: 0px 0 0 0; padding: 0px 0 0 0px;padding: 0px 0 10px 0px;/* border-bottom: 1px solid #9C9DA1;*//*clear: both;position: relative; left:0px;top:0;*/ flaot: left;}
#menuPath ul li {/*float: left;font-size: 14px;font-size: 0.9rem; line-height: 1.4rem; line-height: 1.2rem; font-weight: bold; color: #333;*/ margin: 0px 0 0 0; padding: 10px 0 0 40px;/* border-bottom: 1px solid #9C9DA1; */background:url("../images/arrow.gif") left bottom no-repeat; /*letter-spacing: 1px;*/float: left; display:inline; }

#menuPath ul li a, #menuPath ul li a:visited {display:inline; float: left; text-decoration: none;color: #333!important;font-weight: bold;font-weight: 500;display:inline!important;}
#menuPath ul li a:hover, #menuPath ul li a:active, #menuPath ul li a:focus {text-decoration: none; color: #ca1525!important;}
#menuPath a/*, #menuPath a:visited */{display:inline!important; float: left; /*background:#999;*/}
#menuPath ul li.active {background:url("../images/arrowRed.gif") left bottom no-repeat;display:block!important;margin: 0px 0 10px 0;}

/* NOTE: margin settings for image are set in .mainImage now!!!! */
/* .mainContent img{ margin: 0px 10px 0 70px; margin: 6px 0px 0 70px;padding: 0px 0px 0px 0px;}*/

.mainTitle {
  width:100%;
  max-width: 240px;
  height:auto;
}

/* for index */
.mainTitle2 {
  width:100%;
  max-width: 340px;
  height: auto;
  min-width: 240px;
  /*height:auto; height:300px;*/
}

.mainImage, .mainImage2 {
  width:100%;
  max-width: 360px;
  height: auto;
   margin: 6px 0px 0 70px;padding: 0px 0px 0px 0px; float: right;
}




/***********************************************/
/* FOOTER */
/***********************************************/

footer { /*position: relative; top: -100px;*/
  width:100%;
  /*border-top:solid 1px #393a3b;
  border-bottom: 1px solid #393a3b;*/
  clear:both;
  /*margin: -340px 0 0 0; NO GO */
  /*position: fixed; bottom: 20px;overflow: hidden;background: #ddd;*/
   }
 footer { /*position: relative; top: -100px;*/
  width:100%;
  /*border-top:solid 1px #393a3b;
  border-bottom: 1px solid #393a3b;*/
  clear:both!important;
  /*margin: -340px 0 0 0; NO GO */
  position: relative; top: -140px;overflow: hidden;
  position: relative; top: -100px;overflow: hidden;

   }

footer small {
  width:100%;/*width:80%;width:85%;width:90%;*/
  text-align:center;text-align: right;
  margin: 0;
  padding:10px 20px 20px 0px;
  display:block; /*overflow:hidden; background: #ddd;*/border-top: 1px solid #393a3b; background: #ddd url("../images/eniso9001.png") 98% 10px no-repeat; background: transparent url("../images/ISO-9001-2015.png") 98% 5px no-repeat;
   }

.menueBottom {float: left;padding: 0 10px 0 20px;}
.address {display: block;padding: 0 40px 0 0px;padding: 0 70px 0 0px;}



/********************************************************************/
/* FORM ELEMENTS */
/********************************************************************/


:invalid {
  border-color: #333333;border-color: none;
  -webkit-box-shadow: 0 0 5px rgba(255, 0, 0, .8);
  -moz-box-shadow: 0 0 5px rbba(255, 0, 0, .8);
  -o-box-shadow: 0 0 5px rbba(255, 0, 0, .8);
  -ms-box-shadow: 0 0 5px rbba(255, 0, 0, .8);
  box-shadow:0 0 5px rgba(255, 0, 0, .8);

  -webkit-box-shadow: 0 0 0px rgba(0, 0, 0, .0);
  -moz-box-shadow: 0 0 0px rgba(0, 0, 0, .0);
  -o-box-shadow: 0 0 0px rgba(0, 0, 0, .0);
  -ms-box-shadow: 0 0 0px rgba(0, 0, 0, .0);
}


:required {
  border-color: #333333;border-color: none;
  -webkit-box-shadow: 0 0 0px rgba(0, 0, 0, .5);
  -moz-box-shadow: 0 0 0px rgba(0, 0, 0, .5);
  -o-box-shadow: 0 0 0px rgba(0, 0, 0, .5);
  -ms-box-shadow: 0 0 0px rgba(0, 0, 0, .5);
  box-shadow: 0 0 0px rgba(0, 0, 0, .5);

   -webkit-box-shadow: 0 0 0px rgba(0, 0, 0, .0);
  -moz-box-shadow: 0 0 0px rgba(0, 0, 0, .0);
  -o-box-shadow: 0 0 0px rgba(0, 0, 0, .0);
  -ms-box-shadow: 0 0 0px rgba(0, 0, 0, .0);
}


/*following 3 rules needed for FF, else red box-shadow */
/* need to place it directly in application, else red frame */
input:-moz-placeholder {
    box-shadow:none!important;
}

fieldset:invalid {
     box-shadow:none;
}

form:invalid {
    box-shadow:none;
}


fieldset { background: #ffffff;}


form {
  width:300px; width: 100%;
  margin: 20px auto;

  border-color: none;
   -webkit-box-shadow: 0 0 0px rgba(0, 0, 0, .0);
  -moz-box-shadow: 0 0 0px rgba(0, 0, 0, .0);
  -o-box-shadow: 0 0 0px rgba(0, 0, 0, .0);
  -ms-box-shadow: 0 0 0px rgba(0, 0, 0, .0);
}


 form {
  width:300px; width: 100%;
  margin: 20px auto;

  box-shadow:none;
   -moz-mox-shadow: none!important;
}

fieldset {margin: 18px 0 8px 0;
 -webkit-border-radius:5px;
  -moz-border-radius:5px;
  -o-border-radius:5px;
  -ms-border-radius:5px;
  border-radius:5px;

   border-color: #333333; border-color: #9C9DA1;
 }
fieldset { background: #ffffff;}


input, #print {
  /*font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;*/
  font-family: Futura, AvantGarde, Helvetica, Arial, sans-serif; color: #333333;
  border:1px solid #ccc;
  font-size: 14px;font-size: 0.8rem; float: right; clear: none;
  width:300px; width: 50%;
  height: 10px;
  min-height:30px;
  display:block;
  margin-bottom:15px;
  margin-top:5px; margin-top: 0px;
  outline: none;
  padding: 5px;

  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  -o-border-radius:5px;
  -ms-border-radius:5px;
  border-radius:5px;

   border-color: #333333;
  -webkit-box-shadow: 0 0 0px rgba(0, 0, 0, .5);
  -moz-box-shadow: 0 0 0px rgba(0, 0, 0, .5);
  -o-box-shadow: 0 0 0px rgba(0, 0, 0, .5);
  -ms-box-shadow: 0 0 0px rgba(0, 0, 0, .5);
  box-shadow: 0 0 0px rgba(0, 0, 0, .5);
}

/*input, #print {
	padding: 0px 10px 0px 10px;
} */

#print {
	 font-size: 0.8rem; text-align: center;

}

legend {
   font-family: Futura, AvantGarde, Helvetica, Arial, sans-serif; color: #333333;font-size: 14px;font-size: 1rem;
}



label{
   font-family: Futura, AvantGarde, Helvetica, Arial, sans-serif; color: #333333;font-size: 14px;font-size: 0.875rem; float: left; clear: both; margin-top:5px;
}


input[type=radio], input[type=checkbox] {
    float: left; width: 100%;width: 40px;clear: none; padding: 0 0 0 0;width:22px;height:22px;
}

label.radio, label.checkbox { width: 150px; cursor: pointer; clear: none;  float: left; /*margin-top: 0; would need that for Safari*/ }
label.checkbox { width: 90%;}

label.radio, label.checkbox { width: 150px; cursor: pointer; clear: none;  float: left;  margin: 3px 0px 5px 5px;  margin: 5px 0px 5px 5px; padding:0; width: 140px; /*background: #909; tester purple */ }
label.checkbox { width: 90%; /* background: #666; tester grey */ }


.floatradio, .floatcheckbox {float: left; width: 300px;width: 100%;clear: none;}
.floatcheckbox {float: left; width: 100%;}

.radiomargin {
        margin-top: 0.5rem!important;
    }

  /* salutauion for 3rd gender */
.radiosalutation {
    display: inline!important;
    float:left;
    width: 60px;
    margin-bottom: 1rem;
}
  .radiosalutation label {
    margin-top: 0; padding-top: 0;
  }
  .radiosalutation input {
      margin-bottom: 0; padding-bottom: 0;
  }

textarea {
	font-size: 14px;font-size: 0.8rem;
	border:1px solid #333333;
	width:300px;
	margin-bottom:15px;
  margin-top:5px;
	-webkit-border-radius:5px;
  -moz-border-radius:5px;
  -o-border-radius:5px;
  -ms-border-radius:5px;
  border-radius:5px;
  float: right;

 	width:280px; width:220px;
	min-height: 40px; min-height: 60px;
 	padding: 10px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
 }

input[type=submit] {
  background:none;
  padding:10px;padding:15px 10px 15px 10px; padding: 10px 10px 15px 10px;
  height: 44px;width: 53%; min-width: 180px;
}


input[type=checkbox]:before, input[type=radio]:before {
content:"";
display:inline-block;
width:18px; height:18px;
background-color:#F6FFCF; background: #f2f2f2;
border:1px solid #ccc;
margin-right:10px;
top:12px; top:0px;
left:0;
position:absolute;

display: none;}

input[type=checkbox]:checked:before, input[type=radio]:checked:before {
content:"✓";
background-color:#fff;
border:1px solid #ccc;
color:#8EB120;color:#c0c300;
font-size:18px;
position:absolute;
top:13px; top:0px;
left:0;

display: none;}


/* following won't work on mobile (still shows desktop field!!?) */
.desktop, .desk {display: inline;}
.mobile {display: none;}


#left {/*postion: absolute; left: -200px!important;*/  /* background: #C99; tester dark pink */}
#right {/*postion: absolute; left: -200px!important;*//*  background: #090;  tester green */ float: right;width: 100%;}

#formDesk, .formDesk {display: inline;}
#formMobile, .formMobile {display: none;}

.verkehrstraeger {/*background:#069;*/ width: 24%!important;}

 /***********************************************/
/* iPad SETTINGS */
/***********************************************/


@media (max-width: 1140px){

/*#menuPath {width:865px!important;}*/

.innerWrap {
  width:96%;  width:100%;
  max-width:1200px;max-width:900px;
}

#fragen p, #fragen2 p, #fragen1 p {float:right; margin: 44px 16px 0 0; margin: 48px 16px 0 10px;padding: 0;text-align: right;font-size: 11px;  font-size: 0.750rem;line-height:0.9rem; background:#ffffff;}
#stellenangebot p {float:right; margin: 10px 0px 0 0; padding: 0;}


/*.mainContent img{ margin: 6px 0px 0 70px;margin: 0px 10px 0 0px; padding: 0px 0px 0px 0px; }*/

article  {
  max-width:560px;max-width: 500px; max-width:420px;/* background: #eee; ll-grey tester */
  }

.mainImage, .mainImage2 {
   margin: 6px 0px 0 0px;padding: 0px 0px 0px 0px;float:right;
}


}

@media (max-width: 1024px){

/*#menuPath {width:855px!important;}	*/


.blockWrap {
  width:100%;width:90%; /*background:#999;margin: 0 10px 0 0;*/margin:0;
}


.innerWrap {
  max-width:1200px;max-width:900px;
}


/*.mainContent {max-width:420px; }*/
#karte {/* when using hover effects problem with Chrome mobile, so hide display: none;*/ }

/*.mainContent img{ margin: 6px 0px 0 70px;margin: 0px 10px 0 0px; padding: 0px 0px 0px 0px; }*/

article  {
  max-width:420px; /* background: #96C;#eee ll-grey tester */
  }


article .middle {padding: 0px 0px 0px 10px;}
article .right {padding: 0px 10px 0px 0px;}

.desktop {display: none!important;}
.mobile {display: inline;}

footer small {
   background-position: 97% 5px;
   }


}


@media (max-width: 936px){

#menuPath {width:834px!important;}
.menuPathClear {height: 30px;display: block;clear: both;}

.menue { /*width: 100%;float:left; margin: 0px 0 0 30px;  margin: 0px 0 0 0px; padding: 0 0 0 0px;height: 98px; height: 106px;width: 720px; width: 700px;height: 130px;
position: relative; top:0;position: absolute; top:2px;*//*background:#999; d-grey tester */ }



.mainContent {/*max-width:390px;*/ /* background: #ddd; l-grey tester */}


article  {
  max-width:400px; /*background: #eee; ll-grey tester green soft #9C9 background:#9C9; */
  }

}

@media (max-width: 890px){


#topLeft {
  width:400px;width:260px;width: 100%;height: 100%;/*height: 30px;*/
  /*height: 300px;*/
  margin: 0;
  /* tester d-blue #33c background: #33c; */
 /*background: url("../images/indexMen.png") center 70px no-repeat;
  height: 500px; height: 600px;*/
}

.blockWrap {
  width:100%;width:90%;width:98%;/* background:#999;*/margin:0;/*margin: 0 10px 0 0;padding: 0 20px 0 0; no go margin or padding setttings??!!! */
}

#stoerer {background: transparent; /* tester grey background: #CCC ;*/width:215px;width: 340px; width: 400px; height: 278px; float:left;}
#stoerer {background: transparent; /* tester grey  background: #CCC;*/width:215px;width: 340px; width: 400px;width:300px; height: 278px; width:215px;float:left;}
#stoerer {background: transparent; /* tester grey background: #CCC;*/ width:215px;width: 340px; width: 400px;width:300px; height: 278px; width:215px;float:left;}
#stoerer {background: transparent; /* tester brown #960 background: #960; */ width:215px;width: 340px; width: 400px;width: 200px; height: 278px;width:100%;width: 50%;  height: 78px; float:left; }



.menue { /*width: 100%;float:left; margin: 0px 0 0 30px;  margin: 0px 0 0 0px; padding: 0 0 0 0px;height: 98px; height: 106px;width: 720px; width: 700px;height: 130px;
position: relative; top:0;position: absolute; top:2px;*//*background:#999; d-grey tester */ }


/*.mainContent {max-width:390px;}*/
/*.mainContent img{ margin: 6px 0px 0 70px;margin: 0px 10px 0 0px; padding: 0px 0px 0px 0px;}*/

article  {
  max-width:400px;max-width:390px; /*background: #eee; ll-grey tester bright blue # #33Fbackground: #33F;  */
  }

}


@media (max-width: 820px){

/*#menuPath {width:774px!important;}	*/
.menuPathClear {height: 0px;}
.menuPathClearH1, .menuPathClearH14, .menuPathClearH12 {height: 40px;height: 50px;display: block;clear: both;}
.menuPathClearH2 {height: 30px; }

#topLeft {
  width:400px;width:260px;width: 100%;height: 100%;/*height: 30px;*/
  /*height: 300px;*/
  margin: 0;
  /* tester d-blue #33c background: #33c;*/
 /*background: url("../images/indexMen.png") center 70px no-repeat;
  height: 500px; height: 600px;*/
}

#fragen p, fragen2 p, fragen1 p {float:right; margin: 44px 16px 0 0; margin: 54px 16px 0 0;padding: 0;text-align: right;font-size: 11px;  font-size: 0.750rem;line-height:0.9rem; background:#ffffff;}

#stoerer {background: transparent; /* tester brown #960 background: #960; */ width:215px;width: 340px; width: 400px;width: 200px; height: 278px;width: 40%;/*width: auto!important; doesn't work!!?? */  height: 78px; float:left; }

#logo {float: right;margin: 0  10px 0 0; display: inline;/*background: #eee;*/}
#logo img {width: 132px; height: 106px;}

#home {float: right;margin: 0  80px 0 0; display: none!important; width: 130px; height: 100px;/* background: #666; *//* d-grau */}

#navWrap {
  width:100%;padding: 0 0 0 0; margin: 0 0 0 0;
  /*border-top:solid 1px #393a3b;
  border-bottom: 1px solid #393a3b;*/
  /* background: #900; tester red */
   background: #eee url("../nav/logo.png") right 30px no-repeat;
    background: transparent;
  position: relative; top:0;height:100%;height: 140px;
   }

.menue { width: 100%;/*position: absolute;top: 165px; */float:left; margin: 0px 0 0 30px;  margin: 0px 0 0 0px; padding: 0 0 0 0px;height: 98px; height: 106px; width: 700px;width: 740px;/*display:inline;background: #eee;*/ height: 130px;
position: relative; top:0;position: absolute; top:2px;/*background:#999; d-grey tester */ }
.menueFirst { padding: 6px 0 0 26px;float:left; width: 160px; margin: 0; /*background: #c0c300;*/ /*background: #999 url("../nav/menueBg.png") left 26px repeat-x; */height: 116px!important; }

.mainContent {/*max-width:390px; */}

#karte {margin: 320px 0 0 0px;margin: 550px 0 0 80px;}
#karte {margin: 320px 0 0 0px;margin: 350px 0 0 50px;}

#first, #first2 {
  /*padding:30px 0 30px 0;padding:20px 0 20px 0;
  max-width:580px;*/
  position: relative; top: -340px;top: -320px;top: 30px; /*background: #666;*/
  width:100%;overflow: hidden;overflow: visible;
}

#first2 {top: 30px; top: 70px;/*background: #666;*/
}

/* #second used in section */
#second, #second2 {
  /*padding:30px 0 30px 0;padding:20px 0 20px 0;
  max-width:580px;*/
  position: relative;top: -170px; top: -150px; top: 0px;top: 40px; /*background: #999;*/
  width:100%;
}

#second2 {top: 40px;top: 90px;}


article  {
  max-width:400px;max-width:390px; /*background: #eee; ll-grey tester background: #33F;  */
  }

  footer {
   position: relative; top: 40px;
   position: relative; top: 60px;

   position: relative; top: 100px;
   }

.desk  {display: none; background: #ccc;}

}


@media (max-width: 768px){

#menuPath {width:752px!important;}


#topLeft {
  width:400px;width:260px;width: 100%;height: 100%;/*height: 30px;*/
  /*height: 300px;*/
  margin: 0;
  /* tester d-red background: #933; */
 /*background: url("../images/indexMen.png") center 70px no-repeat;
  height: 500px; height: 600px;*/
}

#stoerer1 { width:215px;width: 340px; width: 400px;width: 200px; height: 278px;width: 25%;/*width: auto!important; doesn't work!!?? */  height: 78px; float:left;}
#stoerer {background: transparent; /* tester brown #960 background: #960; */ width:215px;width: 340px; width: 400px;width: 200px; height: 278px;width: 25%;/*width: auto!important; doesn't work!!?? */  height: 78px; float:left;}

.angebot {margin: 20px 0px 0 20px; position: relative; top: -320px; left: -36px; }
.stellenangebot {margin: 0px 0px 0 0px; position: relative; top: -340px; left: -56px; }

#fragen .angebot {margin: 20px 0px 0 60px;position: relative; top: 20px;}
#stellenangebot {}
#stellenangebot {margin: 20px 0 0 0; height: 76px;}
#stellenangebot p {float:right; margin: 0px 16px 0 0px;padding: 0;}

#logo {float: right;margin: 0  10px 0 0; display: inline;/*background: #eee;*/}
#logo img {width: 132px; height: 106px;}

#home {float: right;margin: 0  80px 0 0; display: none!important; width: 130px; height: 100px;/* background: #666; *//* d-grau */}


.menue { width: 100%;/*position: absolute;top: 165px; */float:left; margin: 0px 0 0 30px;  margin: 0px 0 0 0px; padding: 0 0 0 0px;height: 98px; height: 106px; width: 700px;width: 740px;width: 700px;/*display:inline;background: #eee;*/ height: 130px;
position: relative; top:0;position: absolute; top:2px;/*background:#999; d-grey tester */ }
.menueFirst { padding: 6px 0 0 6px;float:left; width: 160px; width: 120px!important;margin: 0; /*background: #c0c300;*/ /*background: #999 url("../nav/menueBg.png") left 26px repeat-x; */height: 116px!important; }


article  {
  max-width:500px; /*  background: #eee; ll-grey tester */
  }


.mainImage, .mainImage2 {
  width:100%;width:98%;
  max-width: 360px;
  max-width: 260px;
  height: auto;
}

.mainImage2 {
  display: none;
}

.important, .first {
  padding:20px 0 20px 0;
}
.subMenu li {
    width:50%;
    }

 footer { /*position: relative; top: -100px;*/
  width:100%;
  /*border-top:solid 1px #393a3b;
  border-bottom: 1px solid #393a3b;*/
  clear:both!important;
  /*margin: -340px 0 0 0; NO GO */
  /*position: relative; top: -140px;overflow: hidden;
  position: relative; top: -100px;*/overflow: hidden;
   position: relative; top: 40px;

   position: relative; top: 100px;

   }



footer small {
	/**/width: 98%;
  padding:20px 10px 20px 0px;
   padding:10px 20px 20px 0px;
  display:block; /*overflow:hidden; background: #ddd;*/border-top: 1px solid #393a3b; background: transparent;
   }

   .address {display: block;padding: 0 40px 0 0px;padding: 0 0px 0 0px;}


}

@media (max-width: 700px){

#menuPath {width:602px!important;}
.menuPathClearH1, .menuPathClearH14, .menuPathClearH12 {height: 20px;height: 40px;}
.menuPathClearH12 {height: 60px; height: 70px; }
.menuPathClearH2 {height: 0px;margin-top: -10px;}
.menuPathClearH14 { height: 80px; }

#stoerer {background: transparent; /* tester brown #960 background: #960;*/ width:215px;width: 340px; width: 400px;width: 200px; height: 278px;width:100%; height: 78px; float:left;}


.menue { width: 100%;/*position: absolute;top: 165px; */float:left; margin: 0px 0 0 30px;  margin: 0px 0 0 0px; padding: 0 0 0 0px;height: 98px; height: 106px; width: 740px;width: 700px;width: 600px;/*display:inline;background: #eee;*/ height: 130px;
position: relative; top:0;position: absolute; top:2px;/*background:#999; d-grey tester */ }

.menueFirst {display: none;}
.menueMiddle { padding: 38px 0 0 6px;float:left; width: 160px;width: 190px; min-height: 90px; height:auto !important; height: 90px; margin: 0;margin: 0 0 0 13px; margin: 0 0 0 58px; /*background: #c0c300;*/  /*background: url("../nav/menueBg.png") left 26px repeat-x;*/}

 footer { /*position: relative; top: -100px;*/
  width:100%;
  /*border-top:solid 1px #393a3b;
  border-bottom: 1px solid #393a3b;*/
  clear:both;
  /*margin: -340px 0 0 0; NO GO */
  position: relative; top: 0px;overflow: hidden;
 }

#menuPath {border-bottom: 1px solid #9C9DA1;}
#menuPath ul{border-bottom: none;}


#karte {margin: 320px 0 0 0px;margin: 350px 0 0 20px;}

#first2 {top: 30px; top: 70px;top: 80px;top: 90px;/*background: #666;*/top: 40px;}
#second2 {top: 40px;top: 60px;/*top: 80px;top: 100px;*/}


article h1 {
  padding:40px 0;padding: 0px 0 0 0;line-height:1.05rem; line-height:1.2rem;
 }
 article h1 {
  padding:40px 0;padding: 0px 0 0 0;line-height:1.05rem; line-height:1.1rem;line-height:1.4em; padding: 40px 0 0 0;
 }

  footer {
   position: relative; top: 40px;
   position: relative; top: 60px;

   position: relative; top: 80px;
   }

.phone {display:inline; display:block;}
.address {display: none;}


}


 /***********************************************/
/* iPhone SETTINGS */
/***********************************************/

@media (max-width: 600px) {
 body {
   font-size:18px;
 }


#topLeft {
 /* width:400px; width:200px;
   background: #666; *//* d-grau */
 }

.menuPathClearH1 {height: 20px; height: 0px;}
.menuPathClearH1, .menuPathClearH12 {height: 20px; height: 30px; height: 60px;}
.menuPathClearH12 {height: 20px; height: 40px;height: 50px;height: 90px;}
/* as of 31.10.2014 */
.menuPathClearH1, .menuPathClearH12 {height: 0px;}
.menuPathClearH1 {height: 20px; /*height: 70px;*/}

.menuPathClearH12 {height: 0px; height: 100px; }
/* as of 28.09.2015 */
.menuPathClearH14 {  height: 70px; height: 100px; }

#logo img {width: 100%;  height: auto;}
#logo h1 a img {
    width:100%; height: auto;background: transparent;
  }


.topNav a, .topNav a:visited {color: #393a3b; /* dd-grey */text-decoration: none;font-size: 13px; font-size:0.82rem; font-weight: normal;line-height:1.0rem;}
footer a, footer a:visited, .innerWrapOverflow a, .innerWrapOverflow a:visited {color: #393a3b; /* dd-grey */text-decoration: none;font-size: 13px; font-size:0.82rem; font-weight: normal;line-height:1.0rem;}

/* Hiermit wird der Hintergrund und die Textfarbe bei der Navigation mit der Maus und der Tastatur geändert. */
.topNav a:hover, .topNav a:active, .topNav a:focus {color: #ca1525; /* voelk-lime  #e4e129 */ text-decoration: underline;font-size: 13px; font-size:0.82rem; font-weight: normal;line-height:1.0rem; }
footer a:hover, footer a:active, footer a:focus, .innerWrapOverflow a:hover, .innerWrapOverflow a:active, .innerWrapOverflow a:focus {color: #ca1525; /* voelk-lime  #e4e129 */ text-decoration: underline;font-size: 13px; font-size:0.82rem; font-weight: normal;line-height:1.0rem; }

.date {font-size: 13px; font-size:0.82rem; font-weight: normal;line-height:1.0rem;}

.title {margin: 60px 0 0 0;margin: 68px 0 0 0;padding: 0px 0px 0px 0; font-size: 1em; line-height: 1.4em;/*1.6em;*/width: 360px;width: 200px;text-align:right;/*background: #ffffff;*/height:34px;}

.menue { height: 130px;
position: relative; top:0;position: absolute; top:2px;/*background:#999; d-grey tester */ width: 570px;}

nav a.active, a.active { background: #c0c300; /* green bgTitle */background: url("../images/bgTitle.png") 0 0 repeat;}

#menuPath {width:542px!important;}
#menuPath {border-bottom: 1px solid #9C9DA1;}
#menuPath ul{border-bottom: none;}


.menueFirst {display: none;}
.menueMiddle { padding: 38px 0 0 6px;float:left; width: 160px;width: 190px; min-height: 90px; height:auto !important; height: 90px; margin: 0;margin: 0 0 0 13px;  /*background: #c0c300;*/  /*background: url("../nav/menueBg.png") left 26px repeat-x;*/}


#stoerer1 { width: 100%; height: 178px; position: absolute; top: 10px;margin-left: -20px; }
#stoerer {background: transparent; /* tester brown #960 background: #960; */ width:215px;width: 340px; width: 400px;width: 200px; height: 278px;width:100%; height: 78px; float:left;}

.angebot {margin: 20px 0px 0 20px; position: relative; top: 10px;left: -30; }
.stellenangebot {margin: 0px 0px 0 0px; position: relative; top: 0px; left: 0px; }


/*#stoerer #stellenangebot a:hover {background: url(../images/stellenangebot4.png) 70px 36px no-repeat;}*/


.mainContent {width:auto;margin: 0;margin: 0 10px 0 10px;}

#karte {margin: 700px 0 0 40px;margin: 660px 0 0 0px;}
#karte {display: none;}


/* deactivated for 20th birthday
#stoerer { display: none;} */



article  {
  padding:0 0 0px 0;
  }
.important {
  padding:10px 0 10px 0;
 }
article p.large {
  font-size:1.3em;
 }
article p {
  /*font-size:1.3em;
  line-height:1.4em;
  margin:0 0 20px 0;*/
  }

article  {
  padding:0 0 10px 0;
  }
article h3 {
  line-height:1.4em;
  margin:10px 0 10px 0;
  }
.subMenu {
    padding:0 0 40px 0;
 }
.subMenu li {
    width:100%;
 }
article h1 {
  padding:40px 0;padding: 0px 0 0 0;line-height:1.05rem; line-height:1.1rem;line-height:1.4em; padding: 40px 0 0 0;
 }


#first article h2, #first2 article h2 {
	margin: 20px 0px 0px 0; margin: 5px 0px 0px 0;margin: 20px 0px 10px 0;line-height:1.08rem; }


#second h2, #second2 h2 {text-decoration: none;  font-size: 16px; font-size:1.0rem;
	line-height:1.05rem; display: block;margin: 20px 0px 20px 0;height: auto;/* tester l-pink #FCF background: #FCF;*/ }

article .left {padding: 0px 30px 0px 0px; padding: 0px 10px 0px 0px; clear: both;}
article .middle {padding: 0px 0px 0px 0px;}
article .right {padding: 0px 0px 0px 0px;}

article .clear {/* useless!!! clear: both; max-height: 2px; height: 2px!important;overflow: hidden;line-height: 1px; */ clear: both; max-height: 10px; height: 10px!important;display: block;}


span.phone {display:inline;}
.copyright, .phone2, .fax2 {display: none;}
.fax {display:block;color:#434d52!important;}
article .fax {color:#434d52!important;}
article .fax a {color:#434d52!important;}


footer { /*position: relative; top: -100px;*/
  width:100%;
  /*border-top:solid 1px #393a3b;
  border-bottom: 1px solid #393a3b;*/
  clear:both!important;
  /*margin: -340px 0 0 0; NO GO */
  position: relative; top: -140px;overflow: hidden;
  position: relative; top: 35px;
  position: relative; top: 0px;
   }
  footer {
   position: relative; top: 40px;

   top: 70px;

   }


footer small {
   /*overflow:hidden; background: #ddd;*/border-top: 1px solid #393a3b; background: #ddd;background: transparent;
   }


textarea {
	border:1px solid #333333;
	width:300px;width: auto; width: 90%; /*width:auto!important;max-width:140px!important; max-width:148px!important;*/width: 100%;
}
form article p {
  padding-top:20px;
  clear:both;
  line-height:1.5em;
  font-size:1.1em; font-size: 0.813em;/* background: #ccc;*/
}


}

@media (max-width: 500px) {
 body {
   font-size:18px;
 }


#topLeft {
 /* width:400px; width:200px;
   background: #666; *//* d-grau */
 }


/* new for 20. birthday OFFER */
#fragen {/*position: relative; top: 10px; left: 0px;background: url(../nav/fragen.gif) -30px top no-repeat;background: transparent;width:215px; height: 76px;margin: 20px 0 0 0;*/ }
/* #fragen p.angebot {float:right; margin: 0px 0px 0 0;}
#fragen .angebot a img, #fragen .angebot a:visited img {background:url(../images/rabattRed20.png ) no-repeat -50px 0;}
#fragen .angebot {margin: 20px 0px 0 60px;position: absolute; top: 50px; left: -40px;}
*/



#logo img {width: 100%;  height: auto;}
#logo h1 a img {
    width:100%; height: auto;background: transparent;
  }


.title {margin: 60px 0 0 0;margin: 68px 0 0 0;padding: 0px 0px 0px 0; font-size: 1em; line-height: 1.4em;/*1.6em;*/width: 360px;width: 200px;text-align:right;/*background: #ffffff;*/ }

.menue { height: 130px;position: relative; top:0;position: absolute; top: 0px;left: 2px;/*background:#999; d-grey tester */ width: 450px;/*margin: 0 auto 0 auto;*/}


.menueFirst, .menueMiddle, .menueMiddle2, .menueLast {display: none;}
.menueMobile {display: block; width: 100%;min-width:380px;/* background: #0FC;*/margin:0;margin: 20px 0 0 30px;margin: 33px 0 0 30px;}

div.trigger a, div.trigger a:visited { display: block; margin-top: 0; text-decoration: none; padding: 0px 0 0px 0px; color: #4E4D4D!important; font-size: 16px; font-size:1.0rem;font-size: 13px; font-size:0.82rem; font-weight: normal;line-height:1.09rem; letter-spacing: 1px; }

div.triggerActive a, div.triggerActive a:visited { display: block; margin-top: 0; text-decoration: none; padding: 0px 0 0px 0px; color: #000000!important; font-size: 16px; font-size:1.0rem;font-size: 13px; font-size:0.82rem; font-weight: normal;line-height:1.09rem; letter-spacing: 1px; }


/*div.trigger a:visited { display: block; margin-top: 0; text-decoration: none; padding: 0px 0 0px 0px; color: #4E4D4D ; font-size: 1em;  line-height: 0.9em;}*/

div.trigger a:hover, div.trigger a:active, div.trigger a:focus, div.triggerHead a:hover, div.triggerHead a:active, div.triggerHead a:focus  {
	padding: 0px 0 0px 0px; text-decoration: none; color: #9C9DA1; /*font-size: 1em;line-height: 0.9em;*/font-size: 16px; font-size:1.0rem; font-size: 13px; font-size:0.82rem;font-weight: normal;line-height:1.05rem;background: #E7E89E;
}

#menuPath {margin:26px 0px 0 0px;width:382px!important;border-bottom: 1px solid #9C9DA1;}
#menuPath ul{border-bottom: none;}


.menuPathClear {height: 30px;display: block;clear: both;height: 10px;}


#first2 {top: 30px; top: 70px;top: 90px;/*background: #666;*/top:50px;}

#second2  {margin: 0px 0px 90px 0;}

  footer {
   position: relative; top: 40px;

   position: relative; top: 20px;

   }

}


 /***********************************************/
/* MOBILE SETTINGS */
/***********************************************/

@media (max-width: 320px) {

#outerWrap { /* height: 101%; make scrollbar visible all the time overflow: scroll;*/
    width:100%;
	/* background: url("../images/indexMen2.png") 20% 32px no-repeat;
	background: url("../images/indexMen2.png") 15px 32px no-repeat;
	background: url("../images/indexMen2.png") -70px 32px no-repeat;*/
	background: transparent;
}

#fragen, #fragen2, #fragen1 {/*position: relative; top: 10px; left: 0px;background: url(../nav/fragen.gif) left top no-repeat;*/background: url(../nav/fragen.gif) -30px top no-repeat;width:215px; height: 76px;margin: 20px 0 0 0; }
#fragen p, #fragen2 p, #fragen1 p  {float:right; margin: 44px 16px 0 0; margin: 54px 16px 0 0;padding: 0;text-align: right;font-size: 11px;  font-size: 0.750rem;line-height:0.9rem; background:#ffffff;}
.phone2 {display:inline;float:right;}
.address2 {display: none;float:right;}

#stellenangebot {margin: 20px 0 0 0; height: 76px;}
#stellenangebot p {float:right; margin: -116px 60px 0 0px;padding: 0;}


#stoerer1 { height: 100px;  width: 200px; float:left; position: absolute; top: 0;margin-left: -20px; }

.angebot {margin: 20px 0px 0 0px; position: relative; top: 20px;left: 16px; }
.stellenangebot {top: 14px;left: -36px; }

/* new for 20. birthday OFFER */
/*#fragen {background: transparent;width:215px; height: 76px;margin: 20px 0 0 0; }
#fragen p.angebot {float:right; margin: 0px 0px 0 0;}
#fragen .angebot a img, #fragen .angebot a:visited img {background:url(../images/rabattRed20.png ) no-repeat -50px 0;}
#fragen .angebot {margin: 20px 0px 0 60px;position: absolute; top: 50px; left: -40px;}*/


.menue { height: 130px;position: relative; top:0;position: absolute; top:10px;left: 4px;/*background:#999; d-grey tester */ width: 320px;/*margin: 0 auto 0 auto;*/}
.menueMobile {display: block; width: 100%;min-width:300px;/* background: #0FC;*/margin:0; margin: 10px 0 0 0px; margin: 14px 0 0 0px!important;}

.menueMobile a {/*font-family: Futura, AvantGarde, Helvetica, Arial, sans-serif!important; font-family: AvantGarde, Helvetica, Arial, sans-serif!important; */font-family: Helvetica, Arial, sans-serif!important; /*letter-spacing: 3px!important;*/ font-stretch: expanded!important; font-weight:300!important;line-height:1.03rem!important;}


.mobileFirst {width: 170px;float: left;margin: 0 0 0 8px;/*background: #96C;*/}
.mobileLast {width: 120px;float: right; float: left;margin: 0 0 0 14px;/*background: #990;*/}

div.trigger a, div.trigger a:visited { display: block; margin-top: 0; text-decoration: none; padding: 0px 0 0px 0px; color: #4E4D4D; font-size: 14px; font-size:0.9rem;	font-weight: normal;line-height:1.09rem; line-height:1.03rem;letter-spacing: normal; }
div.triggerActive a, div.triggerActive a:visited { display: block; margin-top: 0; text-decoration: none; padding: 0px 0 0px 0px; color: #000000; font-size: 14px; font-size:0.9rem;	font-weight: normal;line-height:1.09rem; line-height:1.03rem;letter-spacing: normal; }

div.trigger a:hover, div.trigger a:active, div.trigger a:focus, div.triggerHead a:hover, div.triggerHead a:active, div.triggerHead a:focus  {
	padding: 0px 0 0px 0px; text-decoration: none; color: #9C9DA1; /*font-size: 1em;line-height: 0.9em;*/font-size: 14px; font-size:0.9rem;font-weight: normal; line-height:1.05rem;line-height:1.03rem;background: #E7E89E;
}

#menuPath {min-width: 200px;width:302px!important; /*background: #999;*/}
/*#menuPath ul li a {background: #933;}*/

#menuPath a { /*display:inline!important; float: left;width: 260px; width: 260px;width:50%!important;display: inline!important;*//* background: #333;*/}
#menuPath ul li {letter-spacing: normal;}

.menuPathClearH1 {height: 20px; /*height: 50px;*/}
.menuPathClearH12 {height: 20px; height: 40px;height: 50px;height: 90px;height: 110px;}
.menuPathClearH14 {height: 20px; height: 50px;}

/*.menuPathClearH1 {height: 30px; }
.menuPathClearH12 {height: 0px;}*/
.menuPathClearH12 {height: 100px; }
.menuPathClearH1 { height: 60px;}

#first2 {top: 30px; top: 70px;top: 90px; top: 110px;/*background: #666;*/top:70px;}
#second2 {top: 40px;top: 60px;top: 90px; top: 100px;}

#karte {display: none;}

h1 span {
    display: none;
  }
h1 img {
    width:100%; height: auto;background: transparent;
  }
article  {
  padding:0 0 0px 0;
  }
article h3 {
  line-height:1.4em;
  margin:10px 0 10px 0;
  }

article p, .mainContent p {
  margin:0 0 20px 0;
  }

/* article ul li{margin: 0;padding:0 0 0 20px;
  list-style-type: square; list-style-position:outside;background: transparent;
} */
.phone {display:inline; display:block;}
span.phone {display:inline;}

.phone2 {display:inline;float:right;}
.address2 {display: none;float:right;}
}

@media (-webkit-min-device-pixel-ratio : 1.5) {
  h1 span {
    display: none;
  }
}