body {
	background-image:url(../media/texture-fh.png);
	background-attachment: fixed;
	background-color:#faf8f6;
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	color: #62732d;
	line-height: 24px;
	height: 100%;
	margin: 0;
}

#naviboxbutton {
	position: fixed;
	cursor: pointer;
	top: 68px;
	background-color: rgba(98, 115, 45, 0.8);
	color: #ffffff;
	width: 70px;
	height: 50px;
	margin-bottom: 18px;
	right: 0px;
	text-align: center;
	vertical-align: middle;
	line-height: 50px;
	border-radius: 3px 0px 0px 3px;
	z-index: 9998;

	transition: all 0.5s;
-webkit-transition: all 0.25s;
}

#naviboxbutton:hover + #navibox {
	right: 0px;
	background-color: rgba(98, 115, 45, 1);
	transition:right 0.5s;
}

#naviboxbutton:hover {
	right: 0px;
	background-color: rgba(98, 115, 45, 1);
	transition:right 0.5s;
}

#navibox:hover {
	right: 0px;
	background-color: rgba(98, 115, 45, 1);
	transition:right 0.5s;
}

#navibox {
	position: fixed;
	width: 270px;
	padding: 18px;
	padding-bottom: 32px;
	background-color: rgba(98, 115, 45, 0.4);
	color: #ffffff;
	z-index: 9999;
	font-size: 14px;
	font-weight: normal;
	float: right;
	right: -254px;
	top: 120px;
	border-radius: 3px 0px 0px 3px;
	transition: all 0.5s;
-webkit-transition: all 0.25s;
overflow-x: hidden;
overflow-y: auto;
height: 75%;

}

#navibox a:link {color: #ffffff; font-weight: bold;}
#navibox a:visited {color: #ffffff;}
#navibox a:hover {color: #ffffff;}
#navibox a:active {color: #ffffff;}

#navibox ul {
  list-style-type: none;
	line-height: 180%;
  margin: 0;
  padding: 0;
}

#navibox li li a:link {
  font-weight: normal;
}

#navibox li li a:visited {
  font-weight: normal;
}

#navibox ul li li {
	padding-left: 16px;
	opacity: 0.8;
}

#navibox ul li::before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f152";
	margin-right: 8px;
}

#navibox ul li li::before {
	font-family: "Font Awesome 5 Free";
	font-weight: 400;
	content: "\f152";
	margin-right: 8px;
}

#navibox ul li li li::before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f0da";
	margin-right: 8px;
}

.hamster-breadcrumb {
	color: rgba(98, 115, 45, 1);
}
/* Style the list */
ul.rex-breadcrumb {
 padding: 0px;
 margin: 0px;
 list-style: none;
}

/* Display list items side by side */
ul.rex-breadcrumb li {
 display: inline;
 color: rgba(98, 115, 45, 1);
}

/* Add a slash symbol (/) before/behind each list item */
ul.rex-breadcrumb li+li:before {
 padding-left: 1px;
 padding-right: 3px;
 color: rgba(98, 115, 45, 1);
 font-weight: normal;
 content: "/";
}

/* Add a color to all links inside the list */
ul.rex-breadcrumb li a {
 color: rgba(98, 115, 45, 1);
 font-weight: normal;
 text-decoration: none;
}

/* Add a color on mouse-over */
ul.rex-breadcrumb li a:hover {
 color: rgba(98, 115, 45, 1);
 font-weight: normal;
 text-decoration: underline;
}

.table-kontakt{
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
	color: #62732d;
}

td { vertical-align: top; }

/* unvisited link */
a:link {
 color: #62732d;
 font-weight: bold;
}

/* visited link */
a:visited {
 color: #62732d;
}

/* mouse over link */
a:hover {
 color: #62732d;
}

/* selected link */
a:active {
 color: #62732d;
}

.tooltip-inner {
    max-width: 300px;
    padding: 6px 8px;
    color: #fff;
    text-align: center;
    background-color: #62732d;
    border-radius: .25rem;
}

.tooltip.bs-tooltip-auto[x-placement^=top] .arrow::before, .tooltip.bs-tooltip-top .arrow::before {
    margin-left: -3px;
    content: "";
    border-width: 5px 5px 0;
    border-top-color: #62732d;
}

.tooltip.bs-tooltip-auto[x-placement^=right] .arrow::before, .tooltip.bs-tooltip-right .arrow::before {
    margin-top: -3px;
    content: "";
    border-width: 5px 5px 5px 0;
    border-right-color: #62732d;
}

.tooltip.bs-tooltip-auto[x-placement^=bottom] .arrow::before, .tooltip.bs-tooltip-bottom .arrow::before {
    margin-left: -3px;
    content: "";
    border-width: 0 5px 5px;
    border-bottom-color: #62732d;
}

.tooltip.bs-tooltip-auto[x-placement^=left] .arrow::before, .tooltip.bs-tooltip-left .arrow::before {
    right: 0;
    margin-top: -3px;
    content: "";
    border-width: 5px 0 5px 5px;
    border-left-color: #62732d;
}

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

#top {
	padding-top: 40px;
	padding-bottom: -20px;
	margin-left: 0px;
	margin-right: 0px;
	width: 100%;
}

#footer {
	min-height: 260px;
	padding-top: 20px;
	padding-bottom: 20px;
	background-color: rgba(98, 115, 45, 0.8);
	color: #ffffff;
}

.hideforshow {
    opacity:0.2;
}

.box {
	padding-bottom: 8px;
	padding-top: 16px;
	margin-bottom: 20px;
}

.nohoverbox {
	padding-bottom: 8px;
	padding-top: 16px;
	margin-bottom: 20px;
}

.nohoverbox:hover {
	/* background: rgba(98, 115, 45, 0.3); */
	border-radius: 3px 3px 3px 3px;
	cursor: auto;
}

.boxtext {
	padding-left: 8px;
	padding-right: 8px;
	font-weight: normal;
}

.right-corner {
	border-right: 1px solid rgba(98, 115, 45, 0.6);
	border-bottom: 1px solid rgba(98, 115, 45, 0.6);
	float:right;
	margin-top: -26px;
	width: 80px;
	height: 35px;
	border-radius: 0px 0px 3px 0px;
}

.left-corner {
	border-left: 1px solid rgba(98, 115, 45, 0.6);
	border-bottom: 1px solid rgba(98, 115, 45, 0.6);
	float:left;
	margin-top: -26px;
	width: 80px;
	height: 35px;
	border-radius: 0px 0px 0px 3px;
}

.box:hover {
	background: rgba(98, 115, 45, 0.3);
	border-radius: 3px 3px 3px 3px;
	cursor: pointer;
}

.left-content-img {
	margin-left: -15px;
}

.right-content-img {
	margin-right: -15px;
}

.center-content-img {
	/* margin-left: -15px;
	margin-right: -15px; */
}

.imgbox {
	margin-top: 6px;
	margin-bottom: 0px;
	overflow: hidden;
}

.img-rounded {
	border-radius: 3px 3px 3px 3px;
}

.boximg {
	border-radius: 3px 3px 3px 3px;
	transition: .3s;
}

.box:hover img{
  transform: scale(1.04);
}

.contentimage {
	cursor: zoom-in !important;
}

.bu {
	font-size: 80%;
	line-height: 17px;
	margin-top: 4px;
	margin-bottom: 8px;
}

.backvideodiv {
	width: 100%;
	height: 400px;
	padding-top: -10px;
	overflow: hidden;
}
.backvideo {
	width: 100%;
}

#videoDiv {width: 100%; height: 480px; position: relative; overflow: hidden; z-index: -1; margin-bottom: -430px;}
#video1 { margin: auto; display: block; width: 100%;}
#videoMessage { position: absolute; top: 0; left: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 490px;}

#videoMessage *{padding:0.4em; margin:0}
#videoMessage {text-shadow: 2px 2px 2px #000000; color:white;z-index:99 }
#videoMessage h1{font-size: 2em;color:#ffffff;text-align:center;}
#videoMessage h2{font-size: 1.5em;color:#ffffff;text-align:center;}
#videoMessage h3{font-size: 1.2em;color:#ffffff;text-align:center;}

.logobox {
	max-width: 160px;
	height: 160px;
	padding: 8px;
	margin-top: 6px;
	margin-bottom: 12px;
	text-align: center;
	background-color: #ffffff;
	display: flex;
  justify-content: center;
  align-items: center;
}

h1 {
	font-family: 'Overlock', cursive;
	font-weight: bold;
	font-size: 44px !important;
	margin-top: 0px;
}

h2 {
	font-family: 'Overlock', cursive;
	font-weight: bold;
	font-size: 36px !important;
	margin-top: 8px;
}

h3 {
	font-family: 'Overlock', cursive;
	font-weight: bold;
	font-size: 26px !important;
	margin-top: 8px;
}

hr {
	background-color: rgba(98, 115, 45, 1.0;);
}

.trennlinie {
	background-color: rgba(98, 115, 45, 1.0;);
	margin-top: -2px !important;
	margin-bottom: -4px !important;
}

.headlinebox {
	font-family: 'Overlock', cursive;
	text-align: right;
	width: 33%;
	margin-left: 62%;
	margin-top: 6%;
	z-index: 100;
	position: absolute;
	font-size: 2.3vw;
	font-weight: bold;
	line-height: 2.7vw;
	color: #ffffff;
	text-shadow: 3px 3px 2px #333;
	opacity: 0;
	animation: 4s ease-out 1s 1 fadeheadlinebox;
	animation-fill-mode: forwards;

}

/* +++++++++++++++++++ animationen +++++++++++++++++++ */
@keyframes fadeheadlinebox {
  0% {
opacity: 0;
  }
  100% {
opacity: 1;
  }
}

@keyframes zoomonstart {
  0% {

  }
  100% {
    transform: scale(1.2);
		transform-origin: 90% 40%;
  }
}

.autozoomimage {
	display: inline-block;
	border-radius: 3px 3px 3px 3px;
  overflow: hidden;            /* clip the excess when child gets bigger than parent */
}
.autozoomimage img {
	animation: 11s ease-out 0s 1 zoomonstart;
	animation-fill-mode: forwards;
  display: block;
  transition: transform .1s;   /* smoother zoom */
}

.bg-hamster-top {
    background-color: rgba(98, 115, 45, 0.8) !important;
}

.arrowdown {
        -webkit-animation: action 1s infinite alternate;
        animation: action 1s infinite alternate;
    }
    @-webkit-keyframes action {
        0% { transform: translateY(0); }
        100% { transform: translateY(-10px); }
    }
    @keyframes action {
        0% { transform: translateY(0); }
        100% { transform: translateY(-10px); }
    }


		/* Extra small devices (phones, 600px and down) */
	@media only screen and (max-width: 600px) {
		h1 {
			font-size: 26px !important;
			margin-top: 0px;
		}

		h2 {
			font-size: 22px !important;
			margin-top: 0px;
		}

		h3 {
			font-size: 20px !important;
			margin-top: 8px;
		}
#videoDiv {
	margin-bottom: -480px;
		}

		#naviboxbutton {
			/* display: none; */
			top: 110px;
		}

		#navibox {
			position: fixed;
			top: 40px;
		}

		.left-content-img {
			margin-left: 0px;
		}

		.right-content-img {
			margin-right: 0px;
		}

		.center-content-img {
			margin-left: 0px;
			margin-right: 0px;
		}

		#navibox {
		overflow-x:hidden;
		overflow-y:scroll;
		height: 100%;
		}
	}


	/* Small devices (portrait tablets and large phones, 600px and up) */
	@media only screen and (max-width: 600px) {

.headlinebox {
	margin-top: 8%;
}

	}

	@media only screen and (min-width: 600px) {

#videoDiv {
			margin-bottom: -470px;
				}
 }

	/* Medium devices (landscape tablets, 768px and up) */
	@media only screen and (min-width: 768px) {

	}

	/* Large devices (laptops/desktops, 992px and up) */
	@media only screen and (min-width: 992px) {

	}

	/* Extra large devices (large laptops and desktops, 1200px and up) */
	@media only screen and (min-width: 1200px) {

	}