/*
body {
  margin: 0;
  font-family: 'Config Rounded';
    src: local('Config Rounded Light'), local('Config-Rounded-Light'),
        url('fonts/ConfigRoundedLight.woff2') format('woff2'),
        url('fonts/ConfigRoundedLight.woff') format('woff'),
        url('fonts/ConfigRoundedLight.ttf') format('truetype');
     src: local('Config Rounded Semibold'), local('Config-Rounded-Semibold'),
        url('fonts/ConfigRoundedSemibold.woff2') format('woff2'),
        url('fonts/ConfigRoundedSemibold.woff') format('woff'),
        url('fonts/ConfigRoundedSemibold.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
  background-repeat: no-repeat;
 }

h1,h2 {
	color: black;
}
*/

/* Allgemeine Formatierung des Menüs */
/*https://kulturbanause.de/blog/navigation-pattern-responsive-web-design/
Slider-/Toggle-Navigation - css: target
*/
* {
	margin:0;
	padding:0;
	list-style:none;
	box-sizing:border-box;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

body::after {
	content:'Resize Viewport ↘';
	position: fixed;
	bottom:1em;
	right:1em;
	opacity: 0.5;
	font-size: 0.8em;
}

body {
 	margin: 0;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center center;
	background-size: cover;
	height: 100%;
	width: 100%;
  }

header {
	width:100%;
	float:left;
	background: grey;
}

.logo {
	display:block;
	width:100%;
	padding:0.8em; /*default 1*/
	text-decoration:none;
	color:white;
}
.logountermenue {
	float:left;
	padding:0.8em; /*default 1*/
	text-decoration:none;
	color:black;
}
nav {
	width:100%;
	float:left;
	background:grey;
	height:0;
	overflow:hidden;
	transition:height .2s ease-in-out;
}

nav li {
	float:left;
	width:100%;
}

nav a {
	display:block;
	height:100%;
	width:100%;
	padding:0.8em; /*default 1*/
	text-decoration:none;
	color:white;
	border-top: 1px solid rgba(0,0,0,0.2);
}

nav a:hover {
	background:rgba(0,0,0,0.2);
}

.nav-toggle {
	background:rgba(0,0,0,0.2);
	display:block;
	position:absolute;
	right:0;
	top:0;
	padding:0.8em; /*default 1*/
	color:white;
	cursor:pointer;
	text-decoration:none;
}

.nav-toggle:hover {
	background:rgba(0,0,0,0.4);
}

#nav-open:target .nav-closed {
	display:block;
}
#nav-open_arbeitswelt:target .nav-closed {
	display:block;
}
#nav-open_ausstellung:target .nav-closed {
	display:block;
}
.nav-closed,
#navi-closed:target .nav-closed,
#nav-open:target .nav-open {
	display:none;
}
#nav-open_arbeitswelt:target .nav-open_arbeitswelt {
	display:none;
}
#nav-open_ausstellung:target .nav-open_ausstellung {
	display:none;
}


/*smartphone höhe dropdownmenü*/
@media screen and (max-width: 799px) {
	#nav-open:target nav {
		height:280px;
	}
	#nav-open_arbeitswelt:target nav {
		height:240px;
	}
	#nav-open_ausstellung:target nav {
		height:240px;
	}
}

@media screen and (min-width:800px) {
	
	.nav-toggle {display:none !important;}

	
	.logo {
		width:auto;
		float:left;	
	}
	
	nav {
		float:right;
		width:auto;
		display:block !important;
		height:auto;
	}
	
	nav li {
		width:auto;
		padding:0;	
	}
}

/*button für das hochscrollen*/

#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#myBtn:hover {
  background-color: #555;
}       

/*für einkauf untermenü*/
#untermenue1 {
font-size: 16px;
margin-top: 5px;
border: none;
background-color: white;
border-radius: 4px;
padding: 5px;
}
#untermenue2 {
font-size: 16px;
margin-top: 5px;
border: none;
background-color: white;
border-radius: 4px;
padding: 5px;
}
#untermenue3 {
font-size: 16px;
margin-top: 5px;
border: none;
background-color: white;
border-radius: 4px;
padding: 5px;
}
#untermenue4 {
font-size: 16px;
margin-top: 5px;
border: none;
background-color: white;
border-radius: 4px;
padding: 5px;
}
#untermenue5 {
font-size: 16px;
margin-top: 5px;
border: none;
background-color: white;
border-radius: 4px;
padding: 5px;
}
#untermenue1:hover {
  background-color: blue;
}   

#untermenue2:hover {
  background-color: blue;
}   
#untermenue3:hover {
  background-color: blue;
} 
#untermenue4:hover {
  background-color: blue;
} 
#untermenue5:hover {
  background-color: blue;
} 
/*footer angaben */

.footer{
position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
background:#000;
padding:0px 0px;
font-family: 'Play', sans-serif;
text-align:center;
}

.footer {
width:100%;
margin:0% 0%;
padding:0.1% 0%;
color:gray;
font-size:0.8em;
}

.footer  a{
text-decoration:none;
color:gray;
transition:0.5s;
}

.footer a:hover{
color:#fff;
}

.footer .row ul{
width:100%;
}

.footer .row ul li{
display:inline-block;
margin:0px 20px;
}

.footer .row a i{
font-size:2em;
margin:0% 1%;
}

@media (max-width:720px){
.footer{
text-align:left;
padding:1%;
}
.footer .row ul li{
display:block;
margin:10px 0px;
text-align:left;
}
.footer .row a i{
margin:0% 3%;
}
}

/*karte*/
.karte {
  max-width: 95%;
  position: relative;
  top:5px;
  margin: auto;
  border-radius: 4px;
  background-color: white; 
  opacity:0.9;
  overflow: hidden;
  z-index: 1;
  text-align: center;
  padding: 5px;
  font-size: 14px;
}

/*einkauf Fotostrecke und liste betriebe*/

#bannerwhite {
  max-width: 80%;
  position: relative;
  top:10px;
  margin: auto;
  border-radius: 4px;
  background-color: white; 
  opacity:0.9;
  overflow: hidden;
  z-index: 1;
  text-align: center;
  padding: 5px;
  font-size: 14px;
}

.mySlides {display: none}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}


@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}





/* hintergrund für liste betriebe web */
.bgbetriebepdf {
	padding-left: 40px;
	padding-top: 20px;
	padding-bottom: 20px;
 }





/*----------------------*/

/*index intro*/
#banneryellow {
  max-width: 400px;
  position: relative;
  margin: auto;
  border-radius: 4px;
  background-color: yellow; 
  opacity:0.8;
  overflow: hidden;
  top: 50px; 
  z-index: 1;
  text-align: center;
  padding: 15px;
  font-size: 22px;
}
.slideshow-container {
  margin: auto;
  max-width: 100%;
  top: 60px;
  position: relative;
}
#infos {
position: relative;
 top: 25px;
  max-width: 90%;
  border-radius: 4px;
  background-color: white; 
  opacity:0.8;
}



#video {
  /* override other styles to make responsive */
  position: fixed;
  top: 90px;
  width: 100%    !important;
  height: auto   !important;
}


/*textfelder tauchen auf*/

.fade-in-text {
  font-family: Arial;
  font-size: 60px;
  animation: fadeIn 3s;
  -webkit-animation: fadeIn 3s;
  -moz-animation: fadeIn 3s;
  -o-animation: fadeIn 3s;
  -ms-animation: fadeIn 3s;
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-moz-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-webkit-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-o-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-ms-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}


/*-------------------------*/

/*nur innerhalb eines divs verwenden*/
#banner {
  max-width: 1000px;
  position: relative;
  margin: auto;
  border-radius: 4px;
  background-color: #00ff00; 
  opacity:0.8;
  overflow: hidden;
  top: 50px; 
  z-index: 1;
  text-align: center;
  padding: 15px;
  font-size: 22px;
}

#bannerblau {
  max-width: 400px;
  position: relative;
  margin: auto;
  border-radius: 4px;
  background-color: #a2a6fd; 
  opacity:0.8;
  overflow: hidden;
  top: 50px; 
  z-index: 1;
  text-align: center;
  padding: 15px;
  font-size: 22px;
}
#bannergruen {
  max-width: 400px;
  position: relative;
  margin: auto;
  border-radius: 4px;
  background-color: #b0fda2; 
  opacity:0.8;
  overflow: hidden;
  top: 50px; 
  z-index: 1;
  text-align: center;
  padding: 15px;
  font-size: 22px;
}
#bannerred {
  max-width: 400px;
  position: relative;
  margin: auto;
  border-radius: 4px;
  background-color: #fda2bb; 
  opacity:0.8;
  overflow: hidden;
  top: 50px; 
  z-index: 1;
  text-align: center;
  padding: 15px;
  font-size: 22px;
}
#banneryellow {
  max-width: 400px;
  position: relative;
  margin: auto;
  border-radius: 4px;
  background-color: yellow; 
  opacity:0.8;
  overflow: hidden;
  top: 50px; 
  z-index: 1;
  text-align: center;
  padding: 15px;
  font-size: 22px;
}


/*  max-width: 40%;*/
#bannerwhite1 {
  max-width: 40%;
  position: relative;
  margin: auto;
  border-radius: 4px;
  background-color: white; 
  opacity:0.4;
  overflow: hidden;
  z-index: 1;
  text-align: center;
  padding: 5px;
  font-size: 14px;
}

/* @media screen and (max-width: 580px) {} */


/*für Seite geschichte arbeitswelt*/
.g_content {
  margin:20px;
  padding-top:20px;
 }

#g_ausstellung {
  /*position: relative;
  border-radius: 4px;*/
  top:80px;
  position: relative;
   background-color: white; 
  opacity:0.9;
}

.intro2 {
  max-width: 700px;
  position: relative;
  margin: auto;
  top: 40px;
   background-color: white; 
  opacity:0.9;
}


/*für Seite 1 Geschichte */
/** {box-sizing: border-box}*/

.mySlides {display: none}

.geschichte {
  max-width: 700px;
  position: relative;
  margin: auto;
 }

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  /*width: 0; */
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev {
  left: 0;
  border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: black;
  font-size: 20px;
 /* padding: 12px 12px;
  position: absolute;*/
  background-color: white;
  border-radius: 4px;
  bottom: 100px;
  width: 90%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: blue;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size 
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}
*/

/*test timeline*/


.container {
  margin: 0 auto;
  padding: 32px 24px;
  width: 80%;
  height: 100%;
}

.title {
  margin: -12px 0 0 0;
}

.subtitle {
  text-align: left;
  margin: 0;
}

.buttons-wrapper {
  margin: 32px 0;
}

.box {
  width: 450px;
  height: 160px;
  background: #f4a460;
}