@charset "utf-8";

@import "../css/utility-classes.css";
@import "../css/all.min.css";
@import "../css/bootstrap-checkbox.css";

/* open-sans-300 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/open-sans-v34-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/open-sans-v34-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v34-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v34-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v34-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v34-latin-300.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans-v34-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/open-sans-v34-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v34-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v34-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v34-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v34-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* open-sans-500 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/open-sans-v34-latin-500.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/open-sans-v34-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v34-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v34-latin-500.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v34-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v34-latin-500.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* open-sans-600 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/open-sans-v34-latin-600.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/open-sans-v34-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v34-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v34-latin-600.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v34-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v34-latin-600.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* open-sans-700 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/open-sans-v34-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/open-sans-v34-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v34-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v34-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v34-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v34-latin-700.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* open-sans-800 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/open-sans-v34-latin-800.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/open-sans-v34-latin-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v34-latin-800.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v34-latin-800.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v34-latin-800.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v34-latin-800.svg#OpenSans') format('svg'); /* Legacy iOS */
}



html {
  font-size: 100%;
  height:100%;margin:0;padding:0
}

body {
  line-height: 1.7;
  color: #000;
  font-size: 16px;
  font-family: 'Open Sans', sans-serif;
  background-color: #fff;
  background: url(../images/bg2.jpg);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;   
  
  background-color: #cccccc; /* Used if the image is unavailable */
  height: 500px; /* You must set a specified height */
  background-position: top; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */ 
}

#footer{
  position: fixed;
  bottom: 0;
} 

#infobox0 {
  z-index: 999;
  position: fixed; 
  bottom: 130px;
}

#infobox1{
   position: fixed; 
   bottom: 0px; 
   background-color: #EEE4D3; 
   opacity: 0.85; 
   height: 160px;   /*120*/
   width: 100%; 
   z-index:998; 
   padding-top: 40px;
   padding-bottom: 40px;
   margin: 0;
}

#infobox1 .img-fluid, .img-fluid{
  max-width: 4.5em ; 
  display: block;
  height: auto;
  padding: 0 15px;
}

.rechtlicheangaben a {
  color: #616161;
  text-decoration: none;
}

.border-top-white {
  border-top : 1px solid #9F9F9F;
  padding-right: 10px;
  padding-left: 10px;
}

.text-blue {
  color: #145AB6 !important;
}




.animated-list li {
  margin: 0;
	padding: 0  20px 0 50px;
	list-style: none;
	background-image: url("../images/dog-food.png");
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 1.5em;
}

.animated-list .no-li{
  list-style: none;
  background-image: url("../images/no-li.png");
}


.center img {        
  display:block;
  margin-left:auto;
  margin-right:auto;
}

.scroll-img-fluid{
  max-width: 5em ;  
  height: auto;
  padding: 5px 15px;       
}

.reg:after {
   content: "*";
   color: #C60000;
   margin-left: 2px;
}

.form-control-feedback {
  padding-top: 10px;
}

.bild {
  float: left;
  margin-right: 15px; /* Fügt etwas Platz zwischen Bild und Text hinzu */
}

.infobox1_container p {
  clear: both;
}

.infobox1_container a{
  text-decoration: none;
  font-size: 1.35em;
  font-weight: 600;
  color: #000;
}



@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.bouncing-icon {
  animation: bounce 1s infinite;
  display: inline-block;
  transform: rotate(90deg);
}

.text-vertical {
  vertical-align: middle;
}

.section-content-height {
  height: 0;    /*545px*/
  overflow: auto;
}

.none {display: none}

.panel-footer {
  height: 60px !important;
}

.navbar {
  margin: 20px 20px;
  /*border-bottom: 2px solid #ff8000 !important;*/
}

.flex-link {
  display: flex;
  align-items: center; /* vertikal mittig */
  gap: 10px;            /* Abstand zwischen Bild und Text */
  text-decoration: none;
}


#social-sidebar {
	right: 0;
	position: fixed;
	top: 30%;
}
#social-sidebar li:first-child a { border-top-left-radius: 5px; }
#social-sidebar li:last-child a { border-bottom-left-radius: 5px; }

#social-sidebar li {
  list-style: none;
}

#social-sidebar a {
	background: #EEE4D3;
	color: #fff !important;
  text-decoration: none;
	display: block;
	height: 50px;
	width: 50px;
	font-size: 24px;
	line-height: 50px;
	position: relative;
	text-align: center;
  cursor: pointer;
}
#social-sidebar a:hover span {
	right: 120%;
	opacity: 1;
}
#social-sidebar a span {
  font: 12px "Open Sans", sans-serif;
  text-transform: uppercase;
	border-radius: 3px;
	line-height: 24px;
	right: -100%;
	margin-top: -16px;
	opacity: 0;
	padding: 4px 8px;
	position: absolute;
	transition: opacity .3s, left .4s;
	top: 50%;
	z-index: -1;
	min-width: 120px;
	max-width: 220px;
  color: #000000;
}


#social-sidebar a span:before {
	content: "";
	display: block;
	height: 8px;
  width: 8px;
	right: -4px;
	margin-top: -4px;
	position: absolute;
	top: 50%;
	transform: rotate(45deg);
}


#social-sidebar a:hover,
#social-sidebar a span,
#social-sidebar a span:before {background: #EEE4D3;}
#social-sidebar a:visited { text-decoration: none; color: #000;}

#social-sidebar li img {
  width: 1.25em;
  height: auto;
}


@media only screen and (min-width: 482px) {
  .navbar-default {
    display: none;
    /*background-color: rgba(255, 255, 255, 0) !important; */
  }
  #infobox1 .img-fluid{
    max-width: 4.5em;
  }
}

@media (min-width: 1200px) {
  #text-ta::after {
    content: "Tierärztlicher Notdienst";
  }
  
  #text-home::after{
    content: "zur Hundehütte";
  }
  
  #text-beitritt::after{
    content: "Zutritt";
  }
  
  #btn-call::after {
    content: "Anrufen";
    padding-left: 5px;
  }
  
  #btn-route::after {
    content: "Route";
    padding-left: 5px;
  }
  
  #btn-internet::after{
    content: "Zur Webseite";
    padding-left: 5px;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  #text-ta::after { 
    content: "TA Notdienst"; 
  }
  
  #text-home::after{
    content: "Hundehütte";
  }
  
  #text-beitritt::after{
    content: "Zutritt";
  }
}

.opacity-9 {
  opacity: 0.9;
}

.animated-list li {
  opacity: 0;
  transform: translateY(120px);
  animation: oben 2s ease-out forwards;  
  /*transform: translateX(-30px);
  animation: slideInLeft 0.6s ease-out forwards; */
}

/* Verzögerung pro Element */
.animated-list li:nth-child(1) { animation-delay: 0.2s; }
.animated-list li:nth-child(2) { animation-delay: 0.4s; }
.animated-list li:nth-child(3) { animation-delay: 0.6s; }
.animated-list li:nth-child(4) { animation-delay: 0.8s; }
.animated-list li:nth-child(5) { animation-delay: 1.0s; }
.animated-list li:nth-child(6) { animation-delay: 2.0s; }

@keyframes oben {
/*@keyframes slideInLeft { */
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animation {
  animation: myAnim 1s linear 0s 1 reverse backwards;
  background-color: #FFFFFF;
}

@keyframes myAnim {
	0% {
		opacity: 1;
	}

	50% {
		opacity: 0.2;
	}

	100% {
		opacity: 0.4;
	}
}

.font-20 {
  font-size: 1.7em !important;
}

.font-24 {
  font-size: 1em !important;
}

.font-30 {
  font-size: 2.25em !important;
}

.font-40 {
  font-size: 3em !important;
}

.navbar ul li a {
  font-size: 2vh;
}

.text-center {
  text-align: center !important;
}

.thumbnail {
  min-height: 300px;
}

@media only screen and (min-width: 1200px) {   
  .thumbnail .bottom-down {
    position: absolute;
    bottom: 30px;
  }
}

.xfont-18 {font-size: 18px !important}

@media only screen and (max-width: 481px) {
  
  .font-20 {font-size: 1.15em !important;}
  
}