/* CSS Document */
body { margin:0; padding:0;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;  } 
body,td,div { font-family:Verdana; font-size:12px; color:#030303; }

@font-face { 
	font-family: HundeAG;
	src: url('https://www.hunde-ag.de/inc/curlz.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
    advancedAntiAliasing: true; }


#main { 	width:1100px; margin:0 auto; background-color:#FFF; background-image:url("/images/imgV2/mainbg.gif"); background-repeat:repeat-y  } 

#header { height:155px;  z-index:2; background:#fff; background-image:url("/images/head/hunde-1.jpg"); background-repeat:no-repeat; background-position:right 30px; position:relative } 
#lineader { top:-10px; position:relative; border-bottom:1px solid #ccc; height:10px; width:688px; margin-left:auto; margin-right:auto; z-index:4;}

#subhead {
			position:relative; width:1098px; 
			height:50px;
			top:104px;
			left:0px;
			z-index:3; 
			background-color:#EEE5D4;
			border-top:1px solid #ccc;
			border-left:1px solid #ccc;
			border-right:1px solid #ccc;
		}
#logoH { position:relative;z-index:5; margin:-30px 0 0 0; }
.headerhome{ text-decoration:none; font-size:18px; color:#993300; font-weight:bold; font-family:HundeAG; position:absolute; top:3px; right:0}

/* LEFT und RIGHT rand ************************************************************************************************/
/* ********************************************************************************************************************/

	#left,#right {padding:20px 15px; }
	#left b,#right b { font-size:15px; margin:0 0 10px 0; color:#993300; }
	#left { width:175px; background-color:#EEE5D4; border-left:1px solid #ccc; border-right:1px solid #ccc; }
	#right{ width:175px; background-color:#EEE5D4; border-right:1px solid #ccc; border-left:1px solid #ccc; }
	#left li { margin:5px 0 2px 0 ;}
	#left li,#right li	
					{ 	background-image:url('https://www.hunde-ag.de/images/imgV2/pata-menu2.gif'); background-position:0 0; 
						background-repeat:no-repeat; padding-left:20px; list-style:none; 
						color:#000;
					}
	#left li:hover,	#right li:hover 
					{ 	background-image:url('https://www.hunde-ag.de/images/imgV2/pata-menu2.gif'); background-position:0 -45px; background-repeat:no-repeat; }
					
	#left a,#right a 
					{ color:#000; text-decoration:none; }
	#left a:hover, #right a:hover
					{ color:#990000; text-decoration:underline; }
	
	hr { size:1px; color:#CC6600; margin:25px 0 20px 0; }
	hr.lastcom { border: 0; height: 0; border-top: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.3); }

/* ********************************************************************************************************************/
/* LEFT und RIGHT rand ************************************************************************************************/



#center { 	padding:10px 18px; 
			width:650px;
			text-align:justify; }
#center a{color:#1967D2}
#center a:hover{color:#092656}

#center h1 { font-family:HundeAG; font-size:28px; margin:2px 0 10px 0; padding-left:37px; color:#993300;
			 background-image:url('https://www.hunde-ag.de/images/imgV2/li.gif'); background-position:0 5px; background-repeat:no-repeat;
			 }
#center h2 { font-family:HundeAG; font-size:28px; margin:3px 0 20px 0;  color:#000; }
#center h2 a { text-decoration:none; color:#993300; font-size:28px }

#center h3 { font-family:HundeAG; font-size:20px; margin:30px 0 10px 0;  color:#000; }
#center h3 a { text-decoration:none; color:#993300; font-size:20px }

#center h4 { font-family:HundeAG; font-size:18px; margin:20px 0 9px 0;  color:#000; }




div#left  { float:left; }
div#right { float:right; }
div#center {float:left;}
.clear { clear: both; }

#footer{clear:both;font-size:12px;margin:200px 0 0px 0;text-align:center; padding:10px 0}


.alignright { float:right; margin:0 0 15px 15px;}
.alignleft { float:left; margin:0 15px 15px 0; }
img.alignright{float:right; margin:0 0 15px 15px; border:1px solid #000}
img.alignleft{float:left; margin:0 15px 15px 0; border:1px solid #000}
img.bild{border:1px solid #000}

.fotogalerie {box-sizing:border-box; border:8px double #666666; max-width:100%; height:auto}
.linknum
{font-size: 18px; font-family:Georgia; color:#0000FF;border:1px dotted #000000;padding:3px 3px 3px 3px; display:block; text-align:center}

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


div .sociable { margin: 16px 0 !important; }

span.sociable_tagline { position: relative; }
span.sociable_tagline span { display: none; width: 14em; }
span.sociable_tagline:hover span {
	position: absolute;
	display: block;
	top: -5em;
	background: #ffe;
	border: 1px solid #ccc;
	color: black;
	line-height: 1em;
}

.sociable span {
	display: block;
}
.sociable ul {
	display: inline;
	margin: 0 !important;
	padding: 0 !important;
}
.sociable li {
	background: none;
	display: inline;
	list-style-type: none;
	margin: 0;
	padding: 2px;
}
.sociable ul li:before { content: ""; }
.sociable img {
	float: none;
	width: 16px;
	height: 16px;
	border: 0;
	margin: 0;
	padding: 0;
}

.sociable-hovers {
	opacity: .6;
	-moz-opacity: .6;
	filter: alpha(opacity=60);
}
.sociable-hovers:hover {
	opacity: 1;
	-moz-opacity: 1;
	filter: alpha(opacity=100);
}

.sociable a:hover img {
	margin: 0;
	padding: 0;
	border: none;
}

.sociable a[href^="http:"] {
	padding-right: 0px;
	background: transparent;
	text-decoration: transparent;
}

#comment { width:640px; }

.menu {margin:0; padding:0}
.menu ul { border:0px solid red; padding:0; margin:0;}
.menu ul li{ border:0px solid green;height:auto; margin-bottom:15px;}


#sidebar li { margin-top:5px; }
.cat-item { margin-top:5px; }

.box{clear: both; border: 1px dotted #000; padding: 5px; width: 200px; float: left; margin: 3px 15px 10px 0px; background: #F7F1E8; text-align:left}
.box img{ margin-bottom:3px; }
.box p{margin:0 0 5px 0; padding:0px; text-align:left}

.gallery{ margin-bottom:30px; font-size:0; line-height:0;}
.gallery::after{ content: ".";clear: both;display: block;visibility: hidden;height: 0px;}

.navigation::after{ content: ".";clear: both;display: block;visibility: hidden;height: 0px;}

.gallery img{ float:left; margin:8px; border:1px solid #000; box-sizing:border-box; width:200px; height:auto}

.admid{ clear:both; text-align:center; margin:20px 0px;}
.adleft{float:left; margin:0 15px 15px 0}
.adright{float: right; margin:0 0 15px 15px}

.border{border:1px solid #000}




/* IMAGE LIGHTBOX SELECTOR */

		#imagelightbox
		{
			cursor: pointer;
			position: fixed;
			z-index: 10020;

			/*-ms-touch-action: none;
			touch-action: none;*/

			-webkit-box-shadow: 0 0 3.125em rgba( 0, 0, 0, .75 ); /* 50 */
			box-shadow: 0 0 3.125em rgba( 0, 0, 0, .75 ); /* 50 */
			
			border:5px solid #FFF;
			box-sizing:border-box;
		}


		/* ACTIVITY INDICATION */

		#imagelightbox-loading,
		#imagelightbox-loading div
		{
			border-radius: 50%;box-sizing:border-box;
		}
		#imagelightbox-loading
		{
			width: 2.5em; /* 40 */
			height: 2.5em; /* 40 */
			background-color: #444;
			background-color: rgba( 0, 0, 0, .5 );
			position: fixed;
			z-index: 10023;
			top: 50%;
			left: 50%;
			padding: 0.625em; /* 10 */
			margin: -1.25em 0 0 -1.25em; /* 20 */

			-webkit-box-shadow: 0 0 2.5em rgba( 0, 0, 0, .75 ); /* 40 */
			box-shadow: 0 0 2.5em rgba( 0, 0, 0, .75 ); /* 40 */
			box-sizing:border-box;
		}
			#imagelightbox-loading div
			{
				width: 1.25em; /* 20 */
				height: 1.25em; /* 20 */
				background-color: #fff;

				-webkit-animation: imagelightbox-loading .5s ease infinite;
				animation: imagelightbox-loading .5s ease infinite;
			}

			@-webkit-keyframes imagelightbox-loading
			{
				from { opacity: .5;	-webkit-transform: scale( .75 ); }
				50%	 { opacity: 1;	-webkit-transform: scale( 1 ); }
				to	 { opacity: .5;	-webkit-transform: scale( .75 ); }
			}
			@keyframes imagelightbox-loading
			{
				from { opacity: .5;	transform: scale( .75 ); }
				50%	 { opacity: 1;	transform: scale( 1 ); }
				to	 { opacity: .5;	transform: scale( .75 ); }
			}


		/* OVERLAY */

		#imagelightbox-overlay
		{
			background-color: #333;
			background-color: rgba( 50, 50, 50, .9 );
			position: fixed;
			z-index: 10018;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			box-sizing:border-box;
			
		}


		/* "CLOSE" BUTTON */

		#imagelightbox-close
		{
			width: 2.5em; /* 40 */
			height: 2.5em; /* 40 */
			text-align: left;
			background-color: #666;
			border-radius: 50%;
			position: fixed;
			z-index: 10022;
			top: 2.5em; /* 40 */
			right: 2.5em; /* 40 */
			box-sizing:border-box;

			-webkit-transition: color .3s ease;
			transition: color .3s ease;
		}
			#imagelightbox-close:hover,
			#imagelightbox-close:focus
			{
				background-color: #111;
			}
			#imagelightbox-close:before,
			#imagelightbox-close:after
			{
				width: 2px;
				background-color: #fff;
				content: '';
				position: absolute;
				top: 20%;
				bottom: 20%;
				left: 50%;
				margin-left: -1px;
			}
			#imagelightbox-close:before
			{
				-webkit-transform: rotate( 45deg );
				-ms-transform: rotate( 45deg );
				transform: rotate( 45deg );
			}
			#imagelightbox-close:after
			{
				-webkit-transform: rotate( -45deg );
				-ms-transform: rotate( -45deg );
				transform: rotate( -45deg );
			}


		/* CAPTION */

		#imagelightbox-caption
		{
			text-align: center;
			color: #fff;
			background-color: #666;
			position: fixed;
			z-index: 10021;
			left: 0;
			right: 0;
			bottom: 0;
			padding: 0.625em; /* 10 */
		}


		/* NAVIGATION */

		#imagelightbox-nav
		{
			background-color: #444;
			background-color: rgba( 0, 0, 0, .5 );
			border-radius: 20px;
			position: fixed;
			z-index: 10021;
			left: 50%;
			bottom: 2em; /* 40 */
			padding: 0.313em; /* 5 */
			
			line-height:1em;
			text-align:center;

			-webkit-transform: translateX( -50% );
			-ms-transform: translateX( -50% );
			transform: translateX( -50% );
			
			
		}
			#imagelightbox-nav button
			{

				width: 1em; /* 20 */
				height: 1em; /* 20 */
				background-color: transparent;
				border: 1px solid #fff;
				border-radius: 50%;
				display: inline-block;
				margin: 0 2px; /* 5 */
				box-sizing:border-box;
			}
			#imagelightbox-nav button.active
			{
				background-color: #fff;
			}


		/* ARROWS */

		.imagelightbox-arrow
		{
			width: 3.75em; /* 60 */
			height: 7.5em; /* 120 */
			background-color: #444;
			background-color: rgba( 0, 0, 0, .5 );
			vertical-align: middle;
			display: none;
			position: fixed;
			z-index: 10021;

			top: 50%;
			margin-top: -3.75em; /* 60 */
		}
		.imagelightbox-arrow:hover,
		.imagelightbox-arrow:focus
		{
			background-color: #666;
			background-color: rgba( 0, 0, 0, .75 );
		}
		.imagelightbox-arrow:active
		{
			background-color: #111;
		}
			.imagelightbox-arrow-left
			{
				left: 2.5em; /* 40 */
			}
			.imagelightbox-arrow-right
			{
				right: 2.5em; /* 40 */
			}
			.imagelightbox-arrow:before
			{
				width: 0;
				height: 0;
				border: 1em solid transparent;
				content: '';
				display: inline-block;
				margin-bottom: -0.125em; /* 2 */
			}
				.imagelightbox-arrow-left:before
				{
					border-left: none;
					border-right-color: #fff;
					margin-left: -0.313em; /* 5 */
				}
				.imagelightbox-arrow-right:before
				{
					border-right: none;
					border-left-color: #fff;
					margin-right: -0.313em; /* 5 */
				}

		#imagelightbox-loading,
		#imagelightbox-overlay,
		#imagelightbox-close,
		#imagelightbox-caption,
		#imagelightbox-nav,
		.imagelightbox-arrow
		{	box-sizing:border-box;
			-webkit-animation: fade-in .25s linear;
			animation: fade-in .25s linear;
		}
			@-webkit-keyframes fade-in
			{
				from	{ opacity: 0; }
				to		{ opacity: 1; }
			}
			@keyframes fade-in
			{
				from	{ opacity: 0; }
				to		{ opacity: 1; }
			}

		@media only screen and (max-width: 41.250em) /* 660 */
		{
			#container
			{
				width: 100%; box-sizing:border-box;
			}
			#imagelightbox-close
			{
				top: 1.25em; /* 20 */
				right: 1.25em; /* 20 */
			}
			#imagelightbox-nav
			{
				bottom: 1.25em; /* 20 */
			}

			.imagelightbox-arrow
			{
				width: 2.5em; /* 40 */
				height: 3.75em; /* 60 */
				margin-top: -2.75em; /* 30 */
			}
			.imagelightbox-arrow-left
			{
				left: 1.25em; /* 20 */
			}
			.imagelightbox-arrow-right
			{
				right: 1.25em; /* 20 */
			}
		}

		@media only screen and (max-width: 20em) /* 320 */
		{
			.imagelightbox-arrow-left
			{
				left: 0;
			}
			.imagelightbox-arrow-right
			{
				right: 0;
			}
		}
		
		
#center h3.verdana{font-family: Verdana, Arial, Helvetica, sans-serif; margin:0 0 10px 0; font-size:15px }


#titleBar{display:none}
.only-mobile{display:none}

@media (max-width: 800px) {
/*allgemein*/
.not-mobile{display: none}
.only-mobile{display:block}

section {padding-bottom: 2em;}
.row{padding:0px 0px 80px 0px; margin:0}
.content{ margin-top:40px}

.row > * {
padding: 0px 0 15px 0 !important;
float: none !important;
width: 100% !important;
margin-left: 0 !important;
}

/*divers*/
body{background:none}
#header {padding-top: 14.09%;
margin-top: 45px;
height: auto;
background-size: contain;
background-position: right 0px;}
#subhead, #lineader, .headerhome{display: none;}
#logoH{max-width: 90%; margin-top:-50px;}
#main{max-width:100%; background:none}
#center{max-width:100%; border:none; margin-top:30px; padding:0 10px 60px; box-sizing:border-box; text-align: left; }
#footer{clear:both; width:100%; padding:10px; border-top: 1px solid #ccc; box-sizing:border-box }
#comment {
    width: 100%; max-width:100%
}
.adleft, .adright{float:none; width:300px; margin:0px auto 15px; display:block}

img{max-width:100%; height:auto}

.title a{color:#993300; text-decoration:none; font-weight:bold; font-family: HundeAG;font-size: 24px;}


/*titlebar*/
#titleBar {
display:block;
text-align: center;
color: #fff;
font-size: 1.25em;
background-color: #EEE5D4; /*background*/
backface-visibility: hidden;
transition: transform 0.25s ease-in-out 0s;
z-index: 10000;
position: fixed;
width: 100%;
height: 44px;
top: 0px;
left: 0px;
transform: translate(0px, 0px);
}

#titleBar .title {
line-height: 44px;
}

#titleBar .toggle {
position: absolute;
top: 0;
left: 0;
width: 80px;
height: 60px;
cursor:pointer;
}

#titleBar .toggle:after {
content: '';
position: absolute;
left: 4px;
top: 4px;
color: #fff;
text-align: center;
line-height: 31px;
font-size: 0.8em;
width: 50px;
height: 35px;
border-radius: 5px;
box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,0.25), inset 0px 1px 2px 0px rgba(0,0,0,0.5), inset 0px 6px 13px 0px rgba(255,255,255,0.2), 0px 2px 2px 0px rgba(255,255,255,0.1);
}

#titleBar .toggle:before {
content: '';
position: absolute;
width: 20px;
height: 30px;
background: url(/mobile/css/images/mobileUI-site-nav-opener-bg.svg);
top: 16px;
left: 19px;
}

#titleBar .toggle:active:after {
background: rgba(0,0,0,0.2);
}

#titleBar .toggle2 {position: absolute;	top: 4px; right: 4px; width: 50px; height: 35px; border-radius: 5px;
				box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,0.25), inset 0px 1px 2px 0px rgba(0,0,0,0.5), inset 0px 6px 13px 0px rgba(255,255,255,0.2), 0px 2px 2px 0px rgba(255,255,255,0.1);
				cursor:pointer;	}
		
#titleBar .toggle2:before {	content: ' '; position: relative; color: #fff; text-align: center; line-height: 31px; font-size: 0.8em; display:inline-block; width: 20px; height: 30px; background: url(/mobile/css/images/mobileUI-site-nav-opener-bg.svg); top: 12px; left: 0px;}

#titleBar .toggle2:active {	background: rgba(0,0,0,0.2);}
/*menu*/			
#left {background: #EEE5D4; color:#993300; padding: 0px; margin:0; border:none; width:270px; float:none; position:fixed; z-index:4000; height:calc(100% - 45px); top:45px; left:-270px; font-size:12px; overflow-y: auto;}
#left.show{ left:0px;-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
position:fixed;}
#left.hide{ left:-270px;-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
position:fixed;}

#right {background: #EEE5D4; color:#993300; padding: 0px; margin:0; border:none; width:270px; float:none; position:fixed; z-index:4000; height:calc(100% - 45px); top:45px; right:-270px; font-size:12px; overflow-y: auto;}
#right.show{ right:0px;-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
	position:fixed;
	}
#right.hide{ right:-270px;-webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;	position:fixed;}


#left ul{list-style: none; margin:0; padding:0; background:none}
#left li {padding:0px; margin:0; border: none; background:none	}
#left a, #left a:hover{display: block; box-sizing:border-box; background:none; width:100%; font-size:13px;
			color: #993300;
			border-top: solid 1px rgba(255,255,255,0.1);
			border-bottom: solid 1px rgba(0,0,0,0.2);
			height: 55px;
			line-height: 55px;
			padding: 0 15px 0 15px;
			text-decoration: none;
			margin:0px}

/* Menu2 */
#right ul{list-style: none; margin:0; padding:0; background:none}
#right li {padding:0px; margin:0; border: none; background:none	}
#right a, #right a:hover{display: block; box-sizing:border-box; background:none; width:100%; font-size:13px;
			color: #993300;
			border-top: solid 1px rgba(255,255,255,0.1);
			border-bottom: solid 1px rgba(0,0,0,0.2);
			height: 55px;
			line-height: 55px;
			padding: 0 15px 0 15px;
			text-decoration: none;
			margin:0px}
			
#right hr, #left hr{display:none}

#right b, #left b{ margin:0; display: block; text-align:center; border-bottom:solid 1px rgba(0,0,0,0.2); font-weight:normal; color:#fff; background:#993300}

#left li, #right li, #left li:hover,	#right li:hover { background: none;}


}