@media screen 
{
/* fonts 
font-family: 'Droid Sans', sans-serif;
font-family: 'Josefin Sans', sans-serif;
font-family: 'Josefin Slab', serif;
font-family: 'Dancing Script', cursive;
*/

html { overflow-y:scroll;}
body { font:400 17px/24px Josefin Sans, Arial, sans-serif;}

a {	color:#6e171f; outline:none!important; transition:all 0.3s;}
a:hover { text-decoration:none; transition:all 0.3s;}

#topBar { height:215px; background:url(../images/bg-texture-stripes-header.png); padding-top:9px; position:absolute; z-index:99; width:100%;}
.index #topBar { position:absolute; top:0px; left:0px; height:325px;}
.nojs  #topBar  { top:25px;}
#topBar .container { border-top:solid 1px rgba(87,87,87,0.40); position:relative;}
#branding { position:absolute; left:50%; margin-left:-196px; top:-25px; transform:scale(0.55);}
.index #branding { position:absolute; left:50%; margin-left:-196px; top:38px; transform:scale(1);}
.iexplore.ie-8 #branding { top:-188px;}

#header { height:340px; position:relative; background:url(../images/bg-header.jpg) center -126px no-repeat; color:#373f40; font-size:19px; -webkit-box-shadow:inset 0 -5px 10px rgba(0,0,0,.45); -moz-box-shadow:inset 0 -5px 10px rgba(0,0,0,.45); box-shadow:inset 0 -5px 10px rgba(0,0,0,.45);}
.index #header:before { content:''; display:block; width:395px; height:524px; background:url(../images/header-image.png) no-repeat; position:absolute; bottom:0px; left:50%; margin-left:-415px;}
.index #header { height:580px; padding-top:325px; box-sizing:content-box; background-position:bottom center;}
.headerBox { float:right; padding-top:250px; text-align:right; position:relative;}
.index .headerBox { padding-top:31px;}
.headerBox a, .headerBox p { display:inline-block; margin-left:52px;}
.headerBox .fa { font-size:26px; margin-right:10px; color:#50504e;}
.headerBox .fa-phone { transform:rotate(40deg); font-size:19px; margin-right:0px;}
.headerBox .claim { margin-top:50px; font:300 38px/50px Josefin Slab, Arial, sans-serif; color:#373f40; width:60%; float:right;}
.headerBox .claim strong { color:#434a4c;}
.headerBox .claim span { font-size:44px; text-transform:uppercase;}
.headerBox .claim span span { font-family:Dancing Script; text-transform:none; font-weight:normal;}
.headerBox .claim span span { font-family:Dancing Script; text-transform:none; font-weight:normal;}
.headerBox .badgeBox { position:absolute; left:220px; top:296px; transform:scale(0.9);}
.index .headerBox .badgeBox {  transform:scale(1); right:0px; top:420px; display:block; float:right;}
.headerBox .badgeBox .geprueft { display:block; float:right; margin-top:27px;}

.teaserBar { height:80px; padding-top:30px; background:url(../images/bg-wood.jpg); -webkit-box-shadow:inset 0 -10px 10px rgba(0,0,0,.45); -moz-box-shadow:inset 0 -10px 10px rgba(0,0,0,.45); box-shadow:inset 0 -10px 10px rgba(0,0,0,.45);}
.index .teaserBar { height:310px;}
.teaserBar a { text-align:center; display:block; padding:5px; background:url(../images/bg-texture-squares.png); font:26px/50px Josefin Slab, Arial, sans-serif; color:#565656; text-decoration:none;}
.teaserBar a:before { content:''; display: block; width: 282px; height: 167px; background:url(../images/teaser.jpg) }
.teaserBar a.teaser02:before {background-position: -282px 0;}
.teaserBar a.teaser03:before {background-position: -564px 0;}

.teaserBar a img { display:none;}
.index .teaserBar a img { display:block;}
.teaserBar a span { padding-top:10px; transition:all 0.3s;}
.index .teaserBar a span { border-top:solid 1px #a6a6a6;}
.teaserBar a:hover { color:#6e171f;}
.teaserBar a:hover span { border-top:solid 1px #6e171f; padding-top:5px; transition:all 0.3s;}

.container { width:932px; margin:0 auto;}

/* ALL NAVIGATIONS */
nav ul,	.navi { list-style:none;}
.navi a { display:block;}

/*=NAVIGATION MAIN */
nav { text-align:center; width:100%; margin-top:130px; padding-top:22px; border-top:solid 1px rgba(87,87,87,0.40); position:relative;}
.index nav { margin-top:242px;}
	#navi { display:inline-block;}
		#navi > li { position:relative; float:left; margin:0 0 0 38px;}
		#navi > li:first-child { margin-left:0px;}
			#navi > li > a, #navi > li > span { font:19px/24px Josefin Slab, Arial, sans-serif; color:#242222; display:inline-block; text-decoration:none;}
			#navi > li > a:hover, #navi > li:hover > span, #navi > li:hover > a,
			#navi > li > a.active,#navi > li.active > a /*#navi > li.active > span*/  { color:#6e171f;}
						
			#navi > li:hover { cursor:default;}
			#navi > li > ul { /* >>> */ top:25px; left:-15px; position:absolute; padding:27px 0px 10px 0; text-align:left; height:0px; overflow:hidden; opacity:0;}
			.ie8 #navi > li > ul { position:absolute; top:-999px;}
			#navi > li:hover > ul { /* >>> */ top:25px; left:-15px; opacity:1; z-index:99; transition:1s; height:auto;}
				#navi > li > ul > li { border-bottom:dotted 1px rgba(0,0,0,0.8);}
				#navi > li > ul > li:last-child { border-bottom:none;}
				#navi > li > ul > li > a { display:block; background:#fff url(../images/bg-texture-stripes.png); width:150px; padding:5px 15px;  font:17px/24px Josefin Slab, Arial, sans-serif; color:#242222; display:inline-block; text-decoration:none; white-space:nowrap;}
				#navi > li > ul > li span { background:url(../images/bg-texture-stripes-top.png); display:block; padding:5px 15px;}
				#navi > li > ul > li:first-child > a { padding-top:15px;}
				#navi > li > ul > li:last-child > a { padding-bottom:15px;}
				#navi > li > ul > li > a:hover,
				#navi > li > ul > li > a.active { color:#6e171f;}
				
		#navi > li > ul > li.schur { display:none;}

/*=NAVIGATION ADDITIONAL */
#naviAdd { position:absolute; right:0px; top:22px;}
	#naviAdd > li { float:left; margin-left:17px;}
	#naviAdd > li:first-child { margin-left:0px;}
		#naviAdd > li > a { font:19px/24px Josefin Slab, Arial, sans-serif; color:#575757; text-decoration:none;}
		#naviAdd > li > a:hover,
		#naviAdd > li > a.active { color:#6e171f;}

/*=main */
.main { background:url(../images/bg-texture-stripes-top.png) top repeat-x, url(../images/bg-texture-stripes-bottom.png) bottom repeat-x, url(../images/bg-texture-stripes.png); padding-top:11px;}
.main .container { border-top:solid 1px rgba(87,87,87,0.40); padding-top:10px;}

/*=sliderBox*/
.sliderBox { background:url(../images/bg-greenfield.jpg) top center no-repeat; height:85px; padding-top:60px;}
.index .sliderBox { height:385px; padding-top:60px;}

/*=CONTENT */
.content p, .content ul, .content ol, .content dl, .content table, .floatList { -webkit-hyphens: auto; -ms-hyphens: auto; -moz-hyphens: auto; hyphens: auto;}

.content { color:#555; padding-bottom:75px; font:15px/24px Droid Sans, Arial, sans-serif;}
.content p { margin-bottom:20px;}
.content ul { margin-bottom:20px;}
.content ul li { list-style-type:none; padding:6px 0 6px 50px; background:url(../images/li.png) no-repeat 13px 8px;}
.content ul li:nth-child(odd) { background:url(../images/li.png) no-repeat 0 0, rgba(50,112,13,0.15); background-position:13px 8px;}
.content ul.floatList li { width:48%; margin-right:10px; display:inline-block;}

.videobox { text-align:center; padding:10px 0 20px;}

.nojs .videobox { display: none; }
.nojs #googlemaps-address {display: none;}

/*=breadcrumb */
ul.breadcrumb { margin-bottom:40px; padding-left:10px; text-align:center; display:inline-block;}
ul.breadcrumb li { list-style-type:none; padding-left:0px; border:none; background:none!important; font-family:Josefin Sans; font-size:17px;}

footer {}

/*sitemapBox*/
.sitemapBox { min-height:397px; background:url(../images/bg-texture-squares.png); padding:27px 0 30px 0;}
.sitemapBox .container { border-top:solid 1px rgba(87,87,87,0.40); padding-top:15px;}
.sitemapBox .headline { font:30px/40px Josefin Slab, Arial, sans-serif; color:#6e171f; margin:0 0 10px 1px;}
.sitemapBox .navi { position:relative;}
.sitemapBox .navi span { padding:5px 0 5px 30px; position:relative; border-bottom:solid 1px rgba(87,87,87,0.40); display:block; margin-left:-30px;}
.sitemapBox .navi li { color:#868686; list-style-type:none; padding:5px 0 5px 30px; position:relative; border-bottom:solid 1px rgba(87,87,87,0.40);}
.sitemapBox .navi li:last-child { border:none;}
.sitemapBox .navi li li { margin-left:-30px; padding-left:50px;}
.sitemapBox .navi li a { font:15px/18px Droid Sans, Arial, sans-serif; color:#555; text-decoration:none; display:inline-block;}
.sitemapBox .navi li a:hover, .sitemapBox .navi li a.active { color:#6e171f;}
.sitemapBox .navi li a:before { content:'»'; position:absolute; left:10px; font-size:18px; transition:all 0.3s;}
.sitemapBox .navi li a:hover:before, .sitemapBox .navi li a.active:before { left:17px; transition:all 0.3s;}
.sitemapBox .navi li.jungtiere span { border:none;}
.sitemapBox .navi li.startseite { margin-top:16px;}

.endBox { text-align:center; background:#5c0313; padding:15px 0 18px; font:17px/26px Josefin Sans, Arial, sans-serif; color:#fff; color:rgba(255,255,255,0.8); }
.index .endBox { padding:25px 0 38px;}
.endBox p { border-top:solid 1px #7d3542; padding:30px 0; margin-top:14px;}
.endBox img { transform:scale(0.7)}
.index .endBox img { transform:scale(1)}
.endBox a {  color:#fff; color:rgba(255,255,255,0.8);}


.route { margin:-60px 0 30px;}
.searchRoute { padding:1% 5% 1% 5%;}
.searchRoute .btn { margin-top:10px;}

/*= =============== =*/ /*= =============== =*/ /*= =============== =*/
/*= =============== =*/ /*= =============== =*/ /*= =============== =*/

.image, .map { border:solid 5px #fff; box-shadow:0 0 5px rgba(0,0,0,.35), inset 0 0 0 4px #fff;}
a .image:hover { opacity:0.7; cursor:zoom-in; cursor:-webkit-zoom-in; cursor:-moz-zoom-in;}
.imageLeft { float:left; margin:0 20px 20px 0;}
.imageRight { float:right; margin:0 0 20px 20px;}

.imageBox { margin:0 0 0 0px; text-align:center;}
.imageBox .col_3 { margin-bottom:30px; min-height:310px;}
.imageBox img { }

.imageRes { width:100%; height:auto;}

.map { margin-top:40px; margin-bottom:10px; width:100%; height:400px;}

.pdf { display:block; line-height:32px; border-bottom:dashed 1px #ccc;}
.pdf:before { content:'PDF'; background:#dc2715; padding:0px 5px; display:inline-block; color:#fff; border-radius:4px; font-size:11px; line-height:17px; margin-right:7px;}

.backToTop { background:#544e43; color:#fff;}
.backToTop:hover { background:#3b3c3e;}

.spacingTop { margin-top:70px;}
.spacingBottom { margin-bottom:70px;}
.spacingBottomGalary { margin-bottom:20px;}
.spacingBottomNone { margin-bottom:0px;}
.center { text-align:center; margin:0 auto;}

/*= TYPO =*/
h1, h2, h3, h4, h5, h6 { margin-bottom:0.5em; text-rendering: optimizeLegibility;/* optimize text kerning */ font-weight:normal; margin-top:30px;}
.h1, h1 {font:40px/40px Josefin Slab, Arial, sans-serif; color:#575757; margin-bottom:40px; text-align:center; text-transform:uppercase;}
.h1 span, h1 span { font-size:20px; line-height:20px; color:#565656; display:block;}
.h1 span:before, h1 span:before { content:''; display:inline-block; width:52px; height:10px; background:url(../images/bg-h1-span.png) no-repeat; margin-right:5px;}
.h1 span:after, h1 span:after { content:''; display:inline-block; width:52px; height:10px; background:url(../images/bg-h1-span.png) no-repeat; margin-left:5px;}
.h2, h2 {font:30px/40px Dancing Script, Arial, sans-serif; color:#575757; margin-bottom:20px; text-transform:none;}
.h3, h3, p.h3 {font:18px/25px Droid Sans, Arial, sans-serif; color:#0f502e; margin-bottom:10px; text-transform:uppercase;}
.h4, h4, p.h4 {font:18px/25px Droid Sans, Arial, sans-serif; color:#0f502e; margin-bottom:10px; text-transform:uppercase;}
.h5, h5, p.h5 {font:16px/22px Droid Sans, Arial, sans-serif; margin-bottom:10px; text-transform:uppercase;}
.h6, h6, p.h6 {font:15px/20px Droid Sans, Arial, sans-serif; margin-bottom:10px; text-transform:uppercase;}



body.zucht h3 { margin-top: 0px;}

.highlight-01 { color:#6e171f!important;} /* red */
.highlight-02 { color:#0f502e!important;} /* green */
.highlight-03 { color:#575757!important;} /* gray */

.bordered { border-bottom:solid 1px #b3c9d0; border-top:solid 1px #b3c9d0; padding:20px 0;}
.border, hr { width:100%; height:1px; border-bottom:solid 1px #b6b3ab; margin:20px 0 20px 0;}

.declaration { padding:20px; border:solid 2px #ccc; background:#fdfefe;	min-height:525px; border-radius:5px;}
.margin-bottom {margin-bottom: 55px;}

/*---------- Zucht Unterseiten (Stammbaum) ----------*/

body.zucht img.image, body.suri-alpaka-verkaufstiere-php img.image {
	margin-top: 40px;
}

div.treeWrap {
	position: relative;
	width: 100%;
	text-align: center;
}
div.treeWrap:before {
	position: absolute;
	content: '';
	background: #575757;
	width: 95%;
	height: 1px;
	left: 2.5%;
	top: -11px;
}
div.treeWrap:first-of-type:before {
	display: none;
}
div.treeWrap p.tree {
	display: inline-block;
	padding: 5px;
	border: 1px solid #575757;
	margin-bottom: 35px !important;
}
div.treeWrap p.tree.head {
	width: 99%;
}
div.treeWrap p.tree.head, div.treeWrap p.tree.sub {
	position: relative;
}
div.treeWrap p.tree.head:after , div.treeWrap p.tree.sub:after {
	position: absolute;
	content: '';
	background: #575757;
	width: 1px;
	height: 15px;
	bottom: -25px;
	left: 50%;
}
div.treeWrap p.tree.last, div.treeWrap p.tree.sub {
	position: relative;
	margin: 0.3%;
} 
div.treeWrap p.tree.sub {
	width: 49%;
}
div.treeWrap p.tree.last {
	width: 23.9%;
}
div.dataContainer {
	width: 50%;
	display: inline-block;
	float: left;
	text-align: left;
}
div.dataContainer p span {
	float: right;
	margin-right: 35px;
}
div.dataContainer p span.special {
	float: right;
	margin-right: 0px;
}

/*---------- End of Zucht Unterseiten (Stammbaum) ----------*/

}
/*---------- Mobile Link ----------*/

#mobile-link {
	background: #6e171f;
	clear: both;
	display:none;
	position:relative;
	z-index:9999;
}

#mobile-link .btn-mobile {
	background:url(../images/mobile/icon-mobile.png) no-repeat 5% center;
	font: bold 16px/normal Arial, Helvetica, sans-serif;
	color: #fff;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	display: block;
	margin: 0 auto;
	padding: 50px 10px;
}