/* colors: 

Logo blau: #009fe0  

Schrift blau etwas dunkler: 009fe3  ok für AA: 007DB3  ok für AAA: 005D8A
blau hover: 1e4f63

orange hell:  e37a00
orange dunkel:    965100


Hintergrund helgrau: #f1f1f1

*/

/*
* {
	 border: none!important; 
}
*/


@font-face {
  font-family:"avenir-black";
  src: url("../fonts/avenir-black.ttf"); 
}
@font-face {
  font-family:"avenir-black-IE";
  src: url("../fonts/avenir-black.eot"); 
}
@font-face {
  font-family: "avenir-medium"; 
   src: url("../fonts/avenir-medium.ttf"); 
}
@font-face {
  font-family: "avenir-medium-IE"; 
    src: url("../fonts/avenir-medium.eot"); 
}


header, footer, section, aside, nav, article {
	display: block;
}
html, body {
	height: 100%;
	font-family: 'Open Sans', Helvetica, Arial, sans-serif;
	font-weight: 400;
	font-size: 16px;
	background-color: #f1f1f1;
}


body p,
body header a {
	font-family: 'Open Sans', Helvetica, Arial, sans-serif;
	color: black;
}

pre, code {
	font-size: 1.0em;
}
a, a:visited {
	text-decoration: none;
}


#logo a p span.vbn {
	color: #009fe0;  /*logofarbe*/
}


#content a,
#languagenav nav ul li.link_active a,
#languagenav nav ul li:hover a,
#headernav ul li:hover a,
#headernav ul li a.current,
div.module p a,
address p a:hover,
#footernav ul li a:hover,
address p a:hover span.icon-tel,
#legalnav ul li a:hover,
#slider li .slidertext .slider_text p a,
.kacheln a.icon-mail,
#breadcrumbs a,
.medien .pdf a {
	color: #007DB3;  /*logofarbe dunkler*/
	/* border-bottom: 4px solid #007DB3!important; */
}



 div.module p a:hover,
 #slider li .slidertext .slider_text p a:hover,
 .kacheln a:hover.icon-mail,
 #breadcrumbs a:hover,
 .medien .pdf a:hover   {
	color: #1e4f63; /*dunkelblau */
}

.kacheln div.col-1-4:hover p.primary,
div.primary p a:hover {
	background-color: #1e4f63; 
}

div.module div.primary p a:hover  {
	color: #fff; 
}

/*

button:focus,
a:focus,
input:focus,
input[type="radio"]:focus + label {
  outline: 2px dotted red;
  outline-offset: 2px;
}
*/

h1 {				/* alle titel oben */	
	font-size: 1.5em;
	font-weight: 600;
		color: #007DB3;
	/* text-transform: uppercase; */
    padding: 20px 0 20px 0;
}
address h1,
#twint h1 {      
	 padding: 0 0 10px 0;
	 color: #fff;
}
address h2 {
	color: #fff;
	padding: 10px 0;
}
h2 {			  
	font-size:1.125em;
	font-weight: 600;
	color: #965100;   /*dunkelorange*/
	padding: 20px 0 20px 0;
}
.kacheln h2 {
	padding: 4px 0 14px 0;
	hyphens: auto;
}

.mitgliedschaften h2 {
	padding: 10px 0 26px 0;
}
.galerie h2 {
	padding: 60px 0 20px 0;
}

h3 {			
	font-size:1.125em;
	font-weight: 400;
	color: #007DB3;
	padding: 0;
}
img {
	border:0 none;
}
/* ------------------------------------------  classes  ---------------------- */
.noshow {
	visibility: hidden;
}
.clearboth,
.artikel-links:after,
.clearfix:after {
    visibility: hidden;
    display: block;
    content: ".";
    clear: both;
    height: 0;
}
.white {
	background-color: white;
	margin-top: 20px;
}


/*  LANGUAGENAV
    ------------------------ */
    header {

    	background-color: white;
    }

#languagenav {
    position: absolute;
    right:0;
    z-index: 99;
}
#languagenav nav {
    text-transform: uppercase;
    padding-right: 20px;
  /*  display: none; */
}
#languagenav nav ul {
    list-style-type:none;
}
#languagenav nav ul li {
    padding: 0 6px;
    float:left;
}
#languagenav nav ul li:last-child {   
	 padding: 0 0 0 6px;
}

/*  LOGO
    ------------------------ */
#logo {
	position: absolute;
	top: 10px;
    z-index: 10;
}
.logonoshow {
	display:none;
}
#logo #logoimg img[src*=".svg"],
#logo #logoimg img[src*=".png"]  {
	position: absolute;
	top: 8px;
	left: 0;
	z-index: 99;
	height: 100px;
/* 	padding: 6px;
   background: white;
    box-shadow: rgba(149, 157, 165, 0.5) 0px 8px 24px;
    */
}
#logo a p {
   font-family: avenir-medium-IE, avenir-medium, Arial, sans-serif;
   		  font-size: 20px;
		  padding-left: 0;
		  padding-top: 120px;
		  line-height: 1em;
		 /* width: 100vw; */
		  display: block;
		  padding-right: 30px;
}
#logo a p span{
  	font-family: avenir-black-IE, avenir-black, Arial, sans-serif;
}

/* 40 Jahre */
div#jubilaeum {
  position: absolute;
  top: 70px;
  right: 20px;
}

div#jubilaeum img {
	width: 100px;
}

/*  HEADERNAV
    ------------------------ */
  
#headernav {
	margin-top: 220px;
	width: 100%;
	height: auto;
	text-transform: uppercase;
	background-color: black;
}
#headernav ul {
	list-style-type:none;
	padding: 10px 20px 10px 0;
}
#headernav ul li {
	 margin: 0;
	 padding: 6px 20px;
	/* background: rgba(255,255,255,0.6); */
}

/*
#headernav ul li:first-child a {
	padding: 0 0 10px 47px ;
}

*/
#headernav ul li:hover a,
#headernav ul li a.current {

/*	 background: rgba(255,255,255,1);  */
/*	 	  -moz-box-shadow:  0 0 10px 0 #ccc;  /* horizontal, vertical, blut, spread,  color */
/*      -webkit-box-shadow: 	0 0 10px 0 #ccc;
  	  box-shadow:         	0 0 10px 0 #ccc; */
}
#headernav ul li a {
	color: white;
	padding: 10px 0 0 0 ;
	font-weight: 500;
	z-index: 100;
  position: relative;
	  		transition: all 0.5s ease;
       -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
         -o-transition: all 0.5s ease; 

}

/* Spendenherz */

#servicenav {
	position: absolute;
	right: 20px;
	top: 160px;
	z-index: 99;
}
  .spenden {
    display: inline-block;
    width: 105px; 
  }

  .logo-hover {
    display: none;
  }

  .spenden:hover .logo-default {
    display: none;
  }

  .spenden:hover .logo-hover {
    display: inline;
  }

  .header-logo img {
    width: 100%;
    height: auto;
  }




#breadcrumbs {
	font-size: 0.8em;
}
#wrapbreadcrumbs.col-1,
#wrapbreadcrumbs.col-1 div.module {
	padding-bottom: 0;
}

/*  CONTENT
    ------------------------------------------------------------------------ */






/*  Bild / Video
    ------------------------ */
.gridfull {  
 /* height: calc(100vh - 100px);
  overflow: hidden;  */  /* taken out for full hight images */
  z-index: 0;
  position: relative;
  padding-top: 0;
  padding-bottom: 0;
}
.gridfull>video,
.gridfull>img {
 width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

/*  slider volle breite
    ------------------------ */
.slider {  


  z-index: 0;
  position: relative;
  padding-top: 0;
  padding-bottom: 0;
  margin:0;
  width: 100%;
}

html body#html-body div.gridfull div.bx-wrapper {
	max-width: 100%;
}


/*
html body#html-body div.gridfull div.bx-wrapper div.bx-controls.bx-has-pager.bx-has-controls-direction {
  margin: 0 auto;
  max-width: 1200px;
  border: 4px red dotted !important;
  z-index: 100;
  position: relative;
  padding-top: calc(100vh - 40px);
} 
html body#html-body div.gridfull div.bx-wrapper {
	max-width: 100%;
}
 
/*  end slider volle breite
    ------------------------ */


html body#html-body div.unsere-hunde-detail div.gridxx div.bx-wrapper {
	max-width: 100%!important;
}

.gridxx div.bx-wrapper div.bx-viewport ul#slider li div.slidertext {
	z-index: 100;
}


/*  Kacheln und primary link, kacheln shop
    ------------------------ */
.kacheln.team {
	/* display: inline-block; */
}



/*
.kacheln div.col-1-4:nth-child(2n+1) {
	clear: both;
}


.kacheln div.col-1-4:nth-child(4n+1),
.kacheln.team div.col-1-4:nth-child(4n+1) {
	clear: both;
}
*/

.kacheln div.col-1-4 .module {
	box-shadow: 0px 7px 12px #00000015;
	background-color: white;
}
.kacheln .image {
	line-height: 0;
}
.kacheln .image img {
	width: 100%;
	height: auto;
	padding-top: 0;
}
.kacheln .bodytext p {
	padding: 0 0 10px 0;
	font-size: 14px;
}
.kacheln p.titel {
	font-weight: 600;
	hyphens: auto;
}
.kacheln div.bodytext {
	hyphens: auto;
}
.kacheln p.text_team_kachel {
	line-height: 1.6em;
	font-size: 0.9em;
	hyphens: auto;
}


/* primary link */

.kacheln p.primary {
	background-color: #007DB3;
	color: white;
    padding: 10px 10px 10px 20px;
    margin-top: 10px;
}
div.primary p a,
div.primary a {
	background-color: #007DB3;
	color: white;
    padding: 10px 26px 10px 20px;
    margin-top: 10px;
}

/* ------------------------------------------  shop kacheln  ---------------------- */

html body#html-body div.grid.grid-pad.kacheln div.col-3-4 div.module div.col-1-3 div.image div.bx-wrapper div.bx-viewport ul#slider {
	list-style-type: none;
	padding:0;
}

/* ------------------------------------------  shop slider  ---------------------- */
#slider_home {
	width: 66%;
	padding: 20px 2.5% 40px;
	margin: 0 0 0 34%;
}
#slider li figcaption {
	font-size: 13px;
    position: relative;
    top: 5px;
     line-height: normal;
}
#slider img { width:100%; height:auto; }

#slider_home div.bx-wrapper div.bx-controls.bx-has-pager.bx-has-controls-direction {
	display: none;
}

/*  Aktuell Repeater
    ------------------------ */

.aktuelles div.white {
	margin: 10px 0;
}
.aktuelles div.when {
	width: 100%;
	float: left;
}
.aktuelles div.when p.day {
	font-size: 2em;
	font-weight: 600;
	color: #e37a00;
  	padding-bottom: 0;
  	padding-top: 0;
}
.aktuelles div.when p.date,
.aktuelles div.when p.time {
	font-size: 1.125em;
	font-weight: 600;
	line-height: 1em;
}

.aktuelles div.bodytext {
	width: 100%;
	float: left;
	padding-left: 0;
	padding-right: 0;
}
.aktuelles div.bodytext h2.titel {
	font-size: 1.125em;
	padding-top: 20px;
}
.aktuelles div.image {
	width: 100%;
	float: left;
	max-width: 300px;
}

/*  img_texts_repeater
    ------------------------ */

.module div.image_small {
	padding-top: 0;
}
.module div.image_small img {
	width: 100%;
	height: auto;
}
	
/*  medien
    ------------------------ */
.medien .white {
	margin: 20px 0;
	background-color: white;
}

.medien .wann p {
	font-size: 0.85em;
}
.medien .module p {
	padding: 4px 0;
}
.medien .image img {
	width: 160px;
	height: auto;
}
.medien .pdf {
	padding: 10px 20px 10px 0;
	float: left;
}
.medien a div.pdf_titel.icon-pdf {
	float: left;
}
.medien div.audio {
	padding-top: 20px;
}


/* magazin */
.magazin.medien h2.titel {
	padding: 0;
}
.magazin.medien div.white {
	margin:0 0 40px 0
}
.magazin.medien .bodytext h2.titel p {
   color: #965100;
   padding: 0 0 10px 0;
}

.magazin.medien .module div.pdf:hover a img {
	box-shadow: 0px 0px 12px #00000030;

}






/*  CONTENT ALLG
    ------------------------ */


.zitat {
   padding: 20px 10% 20px 8%;
   font-size: 1.25em;
	font-weight: 700;
	text-align: center;
}
.zitat p {
	position: relative;
	line-height: 1.6em;
	font-family: 'Gentium Basic', Arial, Helvetica, sans-serif;
	font-size: 1em;
	padding: 20px;
}
.zitat p::before {
    color: #e37a00;
    content: "“";
    font-size: 120px;
    position: absolute;
    top: 10px;
     left: -40px;
}
/*
.zitat p::after {
    color: #e37a00;
	content: "”";
	font-size: 90px;
	line-height: 0;
	position: relative;
	top: 18px;
}
*/
.zitat span {
padding: 10px 0;
font-size: 0.7em;
text-align: right;
display: block;
color: gray;
}

.module ul {
	list-style-type: none;
	padding-left: 24px;
	padding-right: 5px;
	padding-bottom: 10px;
}
.module ul li {
	padding: 4px 0;
}
.module ul li::before {
  content: "\2022";  
  color: #965100; 
  font-weight: bold; 
  display: inline-block; 
  width: 1em; 
  margin-left: -1em; 
  font-size: 1.4em;
  position: relative;
  top: 2px;

}



/* map*/
/*
.googlemap div#map {
	height: 500px;
}
*/

/*  footer
    ------------------------ */
#dog {
	position: relative;
	margin-top: 100px;
}

#dog:hover .move-right{

	transform: translate(200%,0);

	-webkit-transform: translate(200%,0); /** Chrome & Safari **/

	-o-transform: translate(200%,0); /** Opera **/

	-moz-transform: translate(200%,0); /** Firefox **/

}


#dog img.dog {
	position: absolute;
	top: -90px;
	left: 10%;
width: 300px;
height: auto;
z-index: -1;




	transition: all 2s ease-in-out;

	-webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/

	-moz-transition: all 2s ease-in-out; /** Firefox **/

	-o-transition: all 2s ease-in-out; /** Opera **/

}



/*

-webkit-transition: all 1s ease-in-out;
            -moz-transition: all 1s ease-in-out;
            -o-transition: all 1s ease-in-out;
            -ms-transition: all 1s ease-in-out;
position:absolute;
}
div:hover
{
-webkit-transform: translate(3em,0);
            -moz-transform: translate(3em,0);
            -o-transform: translate(3em,0);
            -ms-transform: translate(3em,0);
}
*/

/*
 -webkit-transition: padding-left 20s ease-out;
  -moz-transition: padding-left 20s ease-out;
  -o-transition: padding-left 20s ease-out;
  transition: padding-left 20s ease-out;
}
*/
#dog {
  transition: padding-left 0.2s ease;
} 

.mitgliedschaften .image img {
  width: 70%;
  max-width: 200px;
  height: auto;
  padding-top: 0;
}


footer {
  background: black;
  margin-top: 40px;
}
footer #logoimg img[src*=".svg"] {
	width: 62%;
	height: auto;
}
address,
footer address,
address p,
footer address p a,
footer address p a span.icon-tel,
footer ul li a {
	font-size: 1em;
	color: #fff;
	font-style: normal;
}
footer div#logoimg {
	margin-top: 120px;
}
#socialmedia {
	padding-top: 26px;
}

#socialmedia div {
	display: inline-block;
}

#socialmedia a {
	padding: 0 20px 0 0;
}
#facebook a {
	display: inline-block;
	margin: 20px 0 0 0;
	width: 64px;
	height: 50px;
	background-repeat: no-repeat;
	background-image: url(../img/facebook.svg);
}
#facebook a:hover {
	background-image: url(../img/facebook_hover.svg);
}
#instagram a {
	display: inline-block;
	margin: 20px 0 0 0;
	width: 64px;
	height: 50px;
	background-repeat: no-repeat;
	background-image: url(../img/instagram.svg);
}
#instagram a:hover {
	background-image: url(../img/instagram_hover.svg);
}

#footernav {
	padding-top: 124px;
}

#footernav  ul {
list-style-type:none;
}

#footernav  ul li {
 padding: 0 0 10px 0;
}
#footernav  a {
	text-transform: uppercase;
	color:#fff;
}
#twint img {
	width: 90%;
}

#legalwrap {
	font-size: 0.75em;
	padding: 0 20px 0 0;
}
#copyright {
	float: left;	
}
#copyright p {
	color: #fff;

	padding: 10px 0;
}
#legalnav {
	float: right;
	padding-top: 12px;
}
#legalnav ul li {
	float: left;
	padding: 0 0 0 40px;
	list-style: none;
}


@media screen and (min-width:410px) {  
	/* 40 Jahre */
	#headernav {
		 margin-top: 190px;
	}

}

	@media screen and (min-width:510px) {  
		/* 40 Jahre */
		div#jubilaeum {
		  top: 105px;
    	  left: 400px;
		}

		div#jubilaeum img {
			width: 120px;
		}

		#servicenav {
		    right: 20px;
		    top: 200px;
		}

		#headernav {
			 margin-top: 160px;
		}

	}



			@media screen and (min-width:700px) {  /* navi noch vertical aber weiter rechts, Logo etwas grööser */

			/*  Aktuell Repeater
	    		------------------------ */

			.aktuelles div.when {
				width: 25%;
			}
			.aktuelles div.when p.day {
			    font-size: 4em;
				padding-bottom: 12px;
				line-height: 0.8em;
			}
			.aktuelles div.bodytext {
				width: 75%;
				padding-left: 20px;
			}
			.aktuelles div.bodytext h2.titel {
				padding-top: 30px;
			}
			.aktuelles div.white div.module {
				float: left;
				width: 75%;
			}
			.aktuelles div.image {
				width: 25%;
				float: left;
			}


			}

				@media screen and (min-width:800px) {   /* 1-8 are shown 1-4  */  
				/* 40 Jahre */
				div#jubilaeum {
				  top: 55px;
		    	  left: 506px;
				}
				div#jubilaeum img {
					width: 120px;
				}


				#logo a p {
				  padding-top: 70px;
				  	  text-align: left;
				  padding-left: 120px;
				  
				}
				#servicenav {
				    right: 20px;
				    top: 100px;
				}

				#headernav {
				 margin-top: 98px;
				}






				/*  img_texts_repeater
					    ------------------------ */

					.module div.image_small {
						padding-top: 80px;
					}

				}

						@media screen and (min-width:990px) {  /* navi horizontal, Logo grösser */
						/* 40 Jahre */
						div#jubilaeum {
						  top: 45px;
				    	  left: 710px;
						}
						div#jubilaeum img {
							width: 140px;
						}

						#logo a p {
							 font-size: 30px;
						   padding-left: 140px;
						   padding-top: 54px;
						}
							#logo #logoimg img[src*=".svg"],
							#logo #logoimg img[src*=".png"]  {
								top: 12px;
						 		left: 0px;
						  		height: 120px;
							}
						/*  HEADERNAV
						    ------------------------ */
						#headernav {
							margin-top: 120px;
							width: 100%;
							height: 36px;
						}
						#headernav ul {
							list-style-type:none;
							text-align: center;
							float: right; 
							padding: 12px 20px 0 0;
						}
						#headernav ul li {
							float: left;
							 margin: 0;
							 padding: 0 20px;
							/* background: rgba(255,255,255,0.6); */
						}
						#headernav ul li:last-child {
							 padding: 0 0 0 20px;
						}
						h1 {
						  padding: 20px 0 20px 0;
						}

						/* Spendenherz */

						#servicenav {
							right: 20px;
		  					top: 50px;
						}
						.spenden {	
						  width: 120px;
						}

						.zitat p {
							line-height: 2em;
							font-size: 1.125em;
						}


						}	


			
			

								@media screen and (min-width:1340px) {  /* slider home und Detailseite Bild vertikal kleiner */	
				  
								.gridxx div.bx-wrapper div.bx-viewport ul#slider li div.wrapper-image-slider-hunde-detail {  
								  height: calc(100vh - 120px);
								  overflow: hidden;
								  z-index: 0;
								  position: relative;
								  padding-top: 0;
								  padding-bottom: 0;
								}
								}