html {
	font-family: sans-serif;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

*, *:before, *:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
  }

@font-face {
	font-family: '5yearsoldfont';
	src: url(../fonts/5yearsoldfont.eot);
	src: url(../fonts/5yearsoldfont.eot?#iefix) format('embedded-opentype'),
		url(../fonts/5yearsoldfont.woff2) format('woff2'),
		url(../fonts/5yearsoldfont.woff) format('woff'),
		url(../fonts/5yearsoldfont.ttf) format('truetype');
	font-weight: 500;
	font-style: normal;
}


body {
	font-family: "5yearsoldfont", Helvetica, Arial, sans-serif!important;
	font-size: 15.5px;
	letter-spacing: -0.5px;
	word-spacing: 1.5px;
	line-height: 1.2;
	font-weight: 500;
	text-align: left;
	background: url(../img/wiese.jpg) repeat #ddea76 ;
	margin: 0;
	color: #000;
}

a {
	color: #000;
	text-decoration: none;

}

a:hover, a:focus {
	color: #000;
}

h4 {
	font-weight: 200;
	margin-top: 5px;
	margin-bottom: 5px;
	font-size: 22px;
	}


h3 {
	font-weight: 600;
	margin-top: 20px;
	margin-bottom: 15px;
	}


div {
	background-repeat: no-repeat;
	margin: auto;
	scrollbar-color: #e5cea8 #efe7da;
}

ul {
	margin: 0;
}

img {
	overflow: visible;
}

th {
	padding: 6px 0;
}

td {
	padding: 4px 3px;
	line-height: 1;
}

.link, .link:visited {
	color: #044eb2;
}

.link:hover {
	color: #000;
}

.mailto {
	color: #044eb2;
}

.mantle {
	width : 100%;
	min-height: 840px;
	background: url(../img/hintergrund.jpg) repeat-x #ddffff;
}

.container {
  width: 1176px;
	padding:0;
}

.navbar {
	height: 80px;
	padding: 0;
}

.nav {
	padding-left: 0;
	list-style: none;
	font-weight: 800;
	font-size: 22px;
}

.nav > li {
	float: left;
	padding: 20px 46px 40px;
	line-height: 20px;
}

.active > a {
	color: #222;
}

.nav-item > a {
	color: #888;
}

.nav-item > a:hover {
	color: #222;
}

.zaunOben {
	position: absolute;
	top: 55px;
	width: 1176px;
	height: 25px;
	background: url(../img/zaun_oben.png) no-repeat top left;
}


.zaunObenStart {
	height: 60px;
	background: url(../img/zaunOben.png) no-repeat bottom left;
}

.zaunMitte {
		height: 596px;
		background: url(../img/zaun.jpg) no-repeat #f6deb2;
	}

.zaunUnten {
		height: 134px;
		background: url(../img/zaunUnten.png) no-repeat top left;
	}


#button_back {
	margin: 40px 0 0 -89px;
	position: relative;
}

#zaun_start {

	position: absolute;
	top: 50px;
	height: 790px;
	right: 0;
	width: calc(( 100% - 1176px) / 2 + 126px);
}

#inhalt_start {
	margin-left: 294px;
	margin-top: 30px;
	height: 100px;
}

#zaun {
	width: 1180px;
}

#zaunLinks {
	height: 760px;
	width: 15px;
	background: url(../img/zLinks.png) repeat-y;
	float: left;
}

#zaunRechts {
	height: 760px;
	width: 20px;
	background: url(../img/zRechts.png) repeat-y;
	float: left;
}

.inhalt {
	width: 1145px;
	height: 760px;
	float: left;
}

.inhalt div {
	float: left;
}

.fullWidth {
	min-width: 900px;
}

#zaun_buecher {
	background: url(../img/020_kinderbuecher.jpg) repeat-y #f6deb2;
}

#zaun_firlefanzgrete {
	background: url(../img/030_firlefanzGrete.jpg) repeat-y #f6deb2;
}

#zaun_lesungen {
	background: url(../img/040_mitmachlesungen.jpg) repeat-y #f6deb2;
}

#zaun_kontakt {
	background: url(../img/050_kontakt.jpg) repeat-y #f6deb2;
}

#zaun_leinwand {
	background: url(../img/0x1_leinwand.jpg) repeat-y #f6deb2;
	padding: 35px 90px 130px 110px;
}

#zaun_leinwand_galerie{
	background: url(../img/0x1_leinwand.jpg) repeat-y #f6deb2;
	padding: 30px 73px 130px 85px;
}

#galerie_button_zurueck{
	width: 85px;
	height: 600px;
}

#button_zurueck{
	background: url(../img/button_links.png) no-repeat 0 0;
	width: 20px;
	height: 46px;
	margin: 280px 10px 0 0;
}

#galerie_bildVideo{
	height: 610px;
	width: 850px;
}

#galerie_button_X{
	width: 50px;
	height: 100px;
}

#button_X{
	background: url(../img/button_X.png) no-repeat 0 0;
	width: 50px;
	height: 50px;
	margin: 15px 0 0 0;
}

#galerie_button_vor{
	width: 50px;
	height: 500px;
}

#button_vor{
	background: url(../img/button_rechts.png) no-repeat 0 0;
	width: 20px;
	height: 46px;
	margin: 180px 15px 0 15px;
}



.wolkeStart {
	background: url(../img/wolkeStart.png) no-repeat 9px 0;
	}

.wolkeBuecher {
	background: url(../img/wolkeBuecher.png) no-repeat 12px 0;
	}

.wolkeFirlefanz {
		background: url(../img/wolkeFirlefanz.png) no-repeat 9px 0;
		}

.wolkeLesungen {
		background: url(../img/wolkeLesungen.png) no-repeat 12px 0;
		}

.wolkeKontakt {
	background: url(../img/wolkeKontakt.png) no-repeat 18px 0;
	}


._0xx_header {
	margin: 16px 0 8px 0;
	}



#_020_img-aktuell {
	width: 300px;
	text-align: center;
	}

#_020_txt-aktuell {
	width: 270px;
	}

#_021_kurzPortrait {
	width: 460px;
	padding: 300px 60px 100px 95px;
	}

#_022_aktuelles {
	width: 340px;
	margin: 25px 20px 10px 46px;
	padding: 3px 60px 20px 28px;
	height: 350px;
	overflow: hidden;
}

._022_img {
	padding: 5px 0;
	min-width: 230px;
}

._022_txt {
	padding-top: 10PX;
	width: 700px;
}

#_022_header {
	margin: 2px 0;
}

#_022_scroll {
	height: 540px;
	overflow: auto;
}

#_023_lob {
	width: 148px;
	margin: 180px 80px 20px 46px;
	padding: 160px 60px 20px 25px;
}

#_024_veroeffentlichungen {
	width: 250px;
	margin: 15px 40px 70px 80px;
	padding: 180px 60px 0 25px;
}

._024_cursor {
	cursor: pointer;
}

#_024_scroll {
	height: 480px;
	overflow: auto;
	padding-right: 30px;
}

#_024_veroeffentlichungen h4 {
	margin: 7px 0 0 5px;
}

#_025_videoIllustration {
	color: white;
	width: 220px;
	height: 150px;
	margin: 50px 60px 0 30px;
	padding: 6px 0px 0 40px;
}

#_025_videoIllustration h3 {
	margin-top: -27px;
	line-height: 90px;
}

#_03_bookingLink {
	width: 120px;
	margin: 358px 200px 20px 115px;
	padding: 0px 0px 0px 40px;
}

#_030_booking {
	width: 100%;
}

._030_bookingPreview {
	width: 200px;
}

#_031_headLine {
	width: 300px;
	margin: 32px 180px 10px 0;
}

#_031_headLine h2 {
	line-height: 24px;
}

#_032_konzertTermine{
	width: 240px;
	margin: 20px 50px 0px 65px;
	padding: 5px 20px 0px 43px;
}

#_0321_konzertVorschau{
	font-size: 14px;
	line-height: 1.2;
}

#_033_fotosVideos {
	text-align: center;
	width: 235px;
	margin: 60px 80px 90px 40px;
	padding: 30px 50px 40px 50px;
	line-height: 1.1;
}

#_033_scroll_foto {
	height: 280px;
	width: 930px;
	overflow: auto;
}

#_033_videos {
	margin: 5px 0 10px;
	width: 930px;
}

#_033_scroll_video {
	height: 210px;
	overflow: auto;
	min-width: 930px;
}

._033_fotosVideosThumbnail {
	margin-right: 10px;
	min-height: 140px;
}

._0330_fotosVideos {
	margin: 4px 0 6px 0;
}

._0330_fotosVideosImg {
	min-width: 840px;
}


#_034_CD {
	width: 160px;
	margin: 80px 50px 0px 30px;
	padding: 50px 50px 110px 50px;
}

._034_CD_album {
	width: 33%;
}

._034_CD_aktuelle_alben {
	width: 100%;
	margin-bottom: 15px;
}

._034_comp_preview {
	margin: 0 20px 20px 0;
}

#_034_scroll {
	height: 470px;
	overflow: auto;
	padding-right: 30px;
}

#_035_firle {
	width: 175px;
	padding: 153px 0px 10px 13px;
	font-size: 14px;
	line-height: 15px;
	background: url(../img/03_firlefanzGrete/Firle_Overlay.gif) no-repeat 16px 29px;
}

#_035_firle:hover {
	background: url(../img/03_firlefanzGrete/Firle_klein.gif) no-repeat 16px 29px;
}

#_036_fanz {
	width: 175px;
	padding: 158px 0px 10px 18px;
	font-size: 14px;
	line-height: 15px;
	background: url(../img/03_firlefanzGrete/Fanz_Overlay.gif) no-repeat 23px 34px;
}

#_036_fanz:hover {
	background: url(../img/03_firlefanzGrete/Fanz_klein.gif) no-repeat 23px 34px;
}

#_037_herrUnd {
	width: 180px;
	padding: 161px 0px 10px 25px;
	font-size: 14px;
	line-height: 15px;
	background: url(../img/03_firlefanzGrete/Herr_Und_Overlay.gif) no-repeat 22px 39px;
}

#_037_herrUnd:hover {
	background: url(../img/03_firlefanzGrete/Herr_Und_klein.gif) no-repeat 22px 39px;
}

#_038_grete {
	width: 185px;
	padding: 158px 0px 10px 32px;
	font-size: 14px;
	line-height: 15px;
	background: url(../img/03_firlefanzGrete/Grete_Overlay.gif) no-repeat 20px 38px;
}

#_038_grete:hover {
	background: url(../img/03_firlefanzGrete/Grete_klein.gif) no-repeat 20px 38px;
}

#_039_profDrBumm {
	width: 185px;
	padding: 146px 0px 10px 25px;
	line-height: 13px;
	font-size: 14px;
	background: url(../img/03_firlefanzGrete/Dr_Bum_Overlay.gif) no-repeat 23px 27px;
}

#_039_profDrBumm:hover {
	background: url(../img/03_firlefanzGrete/Dr-Bum-klein.gif) no-repeat 23px 27px;
}

#_039_profDrBumm:after{
   position:absolute; width:0; height:0; overflow:hidden; z-index:-1; // hide images
   content:url(../img/03_firlefanzGrete/Firle_klein.gif) url(../img/03_firlefanzGrete/Fanz_klein.gif) url(../img/03_firlefanzGrete/Herr_Und_klein.gif) url(../img/03_firlefanzGrete/Grete_klein.gif) url(../img/03_firlefanzGrete/Dr-Bum-klein.gif);   // load images
}

#_040_mitmachlesung1 {
	width: 330px;
	margin: 40px 50px 10px 760px;
	padding: 5px 5px 20px 20px;
	line-height: 1;
}

#_040_mitmachlesung2 {
	width: 330px;
	margin: 5px 50px 30px 760px;
	padding: 0px 5px 15px 20px;
	line-height: 1;
}

#_040_scroll {
	height: 530px;
	overflow: auto;
	margin-top: 30px;
	padding-right: 30px;
}


#_041_buchung {
	width: 200px;
	margin: 20px 100px 0px 780px;
	padding: 20px 50px 20px 60px;
	color: #fff;
}

#_0410_kontakt {
	font-size: 21px;
}

#_0410_foto {
	margin-right: 20px;
}

#_050_portrait_hans {
	width: 420px;
	padding: 288px 60px 35px 65px;
	font-size: 18px;
}

#_051_portrait_andreas {
	width: 420px;
	padding: 288px 60px 35px 55px;
	font-size: 18px;
}

#_052_presse {
	width: 180px;
	margin: 60px 90px 95px 30px;
	padding: 180px 50px 70px 60px;
}

#_053_kontakt {
	font-size: 21px;
	width: 600px;
	padding: 20px 120px 120px 140px;
}

#_054_impressum {
	width: 220px;
	margin: 55px 180px 0px 125px;
}

#_055_datenschutz {
	width: 220px;
	margin: 0px 180px 80px 125px;
}

#_05X_scroll {
	height: 480px;
	width: 950px;
	overflow: auto;
	padding-right: 30px;
}


/* Scrollable table with fixed header*/
/* define height and width of scrollable area. Add 16px to width for scrollbar          */
div.tableContainer {
	clear: both;
	overflow: auto;
	width: 926px
}

/* Reset overflow value to hidden for all non-IE browsers. */
html>body div.tableContainer {
	overflow: hidden;
	width: 926px;
}

/* define width of table. IE browsers only                 */
div.tableContainer table {
	float: left;
	width: 910px
}

/* define width of table. Add 16px to width for scrollbar.           */
/* All other non-IE browsers.                                        */
html>body div.tableContainer table {
	width: 926px
}

/* set table header to a fixed position. WinIE 6.x only                                       */
/* In WinIE 6.x, any element with a position property set to relative and is a child of       */
/* an element that has an overflow property set, the relative value translates into fixed.    */
/* Ex: parent element DIV with a class of tableContainer has an overflow property set to auto */
thead.fixedHeader tr {
	position: relative;
	cursor: pointer;
}

/* set THEAD element to have block level attributes. All other non-IE browsers            */
/* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */
html>body thead.fixedHeader tr {
	display: block
}

/* make the TH elements pretty */
thead.fixedHeader th {
	text-align: left
}

/* make the A elements pretty. makes for nice clickable headers                */
thead.fixedHeader a, thead.fixedHeader a:link, thead.fixedHeader a:visited {
	display: block;
	text-decoration: none;
	width: 100%
}

/* make the A elements pretty. makes for nice clickable headers                */
/* WARNING: swapping the background on hover may cause problems in WinIE 6.x   */
thead.fixedHeader a:hover {
	display: block;
	text-decoration: underline;
	width: 100%
}

/* define the table content to be scrollable                                              */
/* set TBODY element to have block level attributes. All other non-IE browsers            */
/* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */
/* induced side effect is that child TDs no longer accept width: auto                     */
html>body tbody.scrollContent {
	display: block;
	height: 480px;
	overflow: auto;
	width: 100%
}

/* make TD elements pretty. Provide alternating classes for striping the table */
/* http://www.alistapart.com/articles/zebratables/                             */
tbody.scrollContent td, tbody.scrollContent tr.normalRow td {
	border: none;
}

tbody.scrollContent tr.alternateRow td {
	border: none;
}

/* define width of TH elements: 1st, 2nd, and 3rd respectively.          */
/* Add 16px to last TH for scrollbar padding. All other non-IE browsers. */
/* http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors        */
html>body thead.fixedHeader th {
	width: 106px
}

html>body thead.fixedHeader th + th {
	width: 470px
}

html>body thead.fixedHeader th + th + th{
	width: 160px
}

html>body thead.fixedHeader th + th + th + th{
	width: 146px
}

html>body thead.fixedHeader th + th + th + th + th{
	width: 86px
}

/* define width of TD elements: 1st, 2nd, and 3rd respectively.          */
/* All other non-IE browsers.                                            */
/* http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors        */
html>body tbody.scrollContent td {
	width: 100px
}

html>body tbody.scrollContent td + td {
	width: 450px
}

html>body tbody.scrollContent td + td + td {
	width: 160px
}

html>body tbody.scrollContent td + td + td + td {
	width: 140px
}

html>body tbody.scrollContent td + td + td + td + td {
	width: 70px
}





/* Scrollable table with fixed header2*/
/* define height and width of scrollable area. Add 16px to width for scrollbar          */
div.tableContainer2 {
	clear: both;
	overflow: auto;
	width: 926px
}

/* Reset overflow value to hidden for all non-IE browsers. */
html>body div.tableContainer2 {
	overflow: hidden;
	width: 926px
}

/* define width of table. IE browsers only                 */
div.tableContainer2 table {
	float: left;
	width: 910px
}

/* define width of table. Add 16px to width for scrollbar.           */
/* All other non-IE browsers.                                        */
html>body div.tableContainer2 table {
	width: 926px
}

/* set table header to a fixed position. WinIE 6.x only                                       */
/* In WinIE 6.x, any element with a position property set to relative and is a child of       */
/* an element that has an overflow property set, the relative value translates into fixed.    */
/* Ex: parent element DIV with a class of tableContainer has an overflow property set to auto */
thead.fixedHeader2 tr {
	position: relative
}

/* set THEAD element to have block level attributes. All other non-IE browsers            */
/* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */
html>body thead.fixedHeader2 tr {
	display: block
}

/* make the TH elements pretty */
thead.fixedHeader2 th {
	text-align: left
}

/* make the A elements pretty. makes for nice clickable headers                */
thead.fixedHeader2 a, thead.fixedHeader2 a:link, thead.fixedHeader2 a:visited {
	display: block;
	text-decoration: none;
	width: 100%
}

/* make the A elements pretty. makes for nice clickable headers                */
/* WARNING: swapping the background on hover may cause problems in WinIE 6.x   */
thead.fixedHeader2 a:hover {
	display: block;
	text-decoration: underline;
	width: 100%
}

/* define the table content to be scrollable                                              */
/* set TBODY element to have block level attributes. All other non-IE browsers            */
/* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */
/* induced side effect is that child TDs no longer accept width: auto                     */
html>body tbody.scrollContent2 {
	display: block;
	height: 500px;
	overflow: auto;
	width: 100%
}

/* make TD elements pretty. Provide alternating classes for striping the table */
/* http://www.alistapart.com/articles/zebratables/                             */
tbody.scrollContent2 td, tbody.scrollContent2 tr.normalRow2 td {
	width: 90px;
	border: none;
}

tbody.scrollContent2 tr.alternateRow2 td {
	border: none;
}

/* define width of TH elements: 1st, 2nd, and 3rd respectively.          */
/* Add 16px to last TH for scrollbar padding. All other non-IE browsers. */
/* http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors        */
html>body thead.fixedHeader2 th {
	width: 90px
}

html>body thead.fixedHeader2 th + th {
	width: 90px
}

html>body thead.fixedHeader2 th + th + th{
	width: 90px
}

html>body thead.fixedHeader2 th + th + th + th{
	width: 566px
}

}

/* define width of TD elements: 1st, 2nd, and 3rd respectively.          */
/* All other non-IE browsers.                                            */
/* http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors        */
html>body tbody.scrollContent2 td {
	width: 90px
}

html>body tbody.scrollContent2 td + td {
	width: 90px
}

html>body tbody.scrollContent2 td + td + td {
	width: 90px
}

html>body tbody.scrollContent2 td + td + td + td {
	width: 550px
}



@media(max-device-width: 1200px) {

	.mantle {
		width : 1182px;
	}
}