body {
	margin: 0px auto;
	font-family: 'Open Sans', sans-serif;
	font-size:1em;
}
#disabled_background {
	z-index:20;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:#888888;
	opacity: 0.5;
	display:none;
}
.cf4a-container {
	height:70vw;
}

@-webkit-keyframes cf4FadeInOut {
 0% {
	 opacity:1;
 }
 17% {
	 opacity:1;
 }
 25% {
	 opacity:0;
 }
 92% {
	 opacity:0;
 }
 100% {
	 opacity:1;
 }
}

@-moz-keyframes cf4FadeInOut {
 0% {
	 opacity:1;
 }
 17% {
	 opacity:1;
 }
 25% {
	 opacity:0;
 }
 92% {
	 opacity:0;
 }
 100% {
	 opacity:1;
 }
}

@-o-keyframes cf4FadeInOut {
 0% {
	 opacity:1;
 }
 17% {
	 opacity:1;
 }
 25% {
	 opacity:0;
 }
 92% {
	 opacity:0;
 }
 100% {
	 opacity:1;
 }
}

@keyframes cf4FadeInOut {
 0% {
	 opacity:1;
 }
 17% {
	 opacity:1;
 }
 25% {
	 opacity:0;
 }
 92% {
	 opacity:0;
 }
 100% {
	 opacity:1;
 }
}

#cf4a {
	position:relative;
	margin:0 auto;
}
#cf4a img {
	position:absolute;
	left:0;
	width:100%;
	height:auto;
}

#cf4a img {
	-webkit-animation-name: cf4FadeInOut;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-duration: 16s;

	-moz-animation-name: cf4FadeInOut;
	-moz-animation-timing-function: ease-in-out;
	-moz-animation-iteration-count: infinite;
	-moz-animation-duration: 16s;

	-o-animation-name: cf4FadeInOut;
	-o-animation-timing-function: ease-in-out;
	-o-animation-iteration-count: infinite;
	-o-animation-duration: 16s;

	animation-name: cf4FadeInOut;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-duration: 16s;
}
#cf4a img:nth-of-type(1) {
	-webkit-animation-delay: 12s;
	-moz-animation-delay: 12s;
	-o-animation-delay: 12s;
	animation-delay: 12s;
}
#cf4a img:nth-of-type(2) {
	-webkit-animation-delay: 8s;
	-moz-animation-delay: 8s;
	-o-animation-delay: 8s;
	animation-delay: 8s;
}
#cf4a img:nth-of-type(3) {
	-webkit-animation-delay: 4s;
	-moz-animation-delay: 4s;
	-o-animation-delay: 4s;
	animation-delay: 4s;
}
#cf4a img:nth-of-type(4) {
	-webkit-animation-delay: 0;
	-moz-animation-delay: 0;
	-o-animation-delay: 0;
	animation-delay: 0;
}

/* für nur zwei Bilder */
@-webkit-keyframes cf2FadeInOut {
 0% {
	 opacity:1;
 }
 35% {
	 opacity:1;
 }
 50% {
	 opacity:0;
 }
 78% {
	 opacity:0;
 }
 100% {
	 opacity:1;
 }
}

@-moz-keyframes cf2FadeInOut {
 0% {
	 opacity:1;
 }
 35% {
	 opacity:1;
 }
 50% {
	 opacity:0;
 }
 78% {
	 opacity:0;
 }
 100% {
	 opacity:1;
 }
}

@-o-keyframes cf2FadeInOut {
 0% {
	 opacity:1;
 }
 35% {
	 opacity:1;
 }
 50% {
	 opacity:0;
 }
 78% {
	 opacity:0;
 }
 100% {
	 opacity:1;
 }
}

@keyframes cf2FadeInOut {
 0% {
	 opacity:1;
 }
 35% {
	 opacity:1;
 }
 50% {
	 opacity:0;
 }
 78% {
	 opacity:0;
 }
 100% {
	 opacity:1;
 }
}

#cf2a {
	position:relative;
	margin:0 auto;
}
#cf2a img {
	position:absolute;
	left:0;
	width:100%;
	height:auto;
}

#cf2a img {
	-webkit-animation-name: cf2FadeInOut;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-duration: 8s;

	-moz-animation-name: cf2FadeInOut;
	-moz-animation-timing-function: ease-in-out;
	-moz-animation-iteration-count: infinite;
	-moz-animation-duration: 8s;

	-o-animation-name: cf2FadeInOut;
	-o-animation-timing-function: ease-in-out;
	-o-animation-iteration-count: infinite;
	-o-animation-duration: 8s;

	animation-name: cf2FadeInOut;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-duration: 8s;
}
#cf2a img:nth-of-type(1) {
	-webkit-animation-delay: 4s;
	-moz-animation-delay: 4s;
	-o-animation-delay: 4s;
	animation-delay: 4s;
}
#cf2a img:nth-of-type(2) {
	-webkit-animation-delay: 0;
	-moz-animation-delay: 0;
	-o-animation-delay: 0;
	animation-delay: 0;
}
/* für nur zwei Bilder */

/* für nur drei Bilder */
@-webkit-keyframes cf3FadeInOut {
 0% {
	 opacity:1;
 }
 25% {
	 opacity:1;
 }
 33% {
	 opacity:0;
 }
 84% {
	 opacity:0;
 }
 100% {
	 opacity:1;
 }
}

@-moz-keyframes cf3FadeInOut {
 0% {
	 opacity:1;
 }
 25% {
	 opacity:1;
 }
 33% {
	 opacity:0;
 }
 84% {
	 opacity:0;
 }
 100% {
	 opacity:1;
 }
}

@-o-keyframes cf3FadeInOut {
 0% {
	 opacity:1;
 }
 25% {
	 opacity:1;
 }
 33% {
	 opacity:0;
 }
 84% {
	 opacity:0;
 }
 100% {
	 opacity:1;
 }
}

@keyframes cf3FadeInOut {
 0% {
	 opacity:1;
 }
 25% {
	 opacity:1;
 }
 33% {
	 opacity:0;
 }
 84% {
	 opacity:0;
 }
 100% {
	 opacity:1;
 }
}

#cf3a {
	position:relative;
	margin:0 auto;
}
#cf3a img {
	position:absolute;
	left:0;
	width:100%;
	height:auto;
}

#cf3a img {
	-webkit-animation-name: cf3FadeInOut;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-duration: 12s;

	-moz-animation-name: cf3FadeInOut;
	-moz-animation-timing-function: ease-in-out;
	-moz-animation-iteration-count: infinite;
	-moz-animation-duration: 12s;

	-o-animation-name: cf3FadeInOut;
	-o-animation-timing-function: ease-in-out;
	-o-animation-iteration-count: infinite;
	-o-animation-duration: 12s;

	animation-name: cf3FadeInOut;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-duration: 12s;
}
#cf3a img:nth-of-type(1) {
	-webkit-animation-delay: 8s;
	-moz-animation-delay: 8s;
	-o-animation-delay: 8s;
	animation-delay: 8s;
}
#cf3a img:nth-of-type(2) {
	-webkit-animation-delay: 4s;
	-moz-animation-delay: 04s;
	-o-animation-delay: 4s;
	animation-delay: 4s;
}
#cf3a img:nth-of-type(3) {
	-webkit-animation-delay: 0;
	-moz-animation-delay: 0;
	-o-animation-delay: 0;
	animation-delay: 0;
}
/* für nur drei Bilder */


.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 16px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}
.overallcontainer {
	margin: 0px auto;
	width:100vw;
	height:100%;
	max-width: 100%;
	border: 0px solid;
	z-index:10;
	background-color:#FF0000;
}
.videocontainer {
	z-index:4;
}
.mapcontainer {
	background: #C1F3F4;
	border-color: #d5d5d5;
	padding:0px;
}
.mapcontainer_height {
	height: 67vh;
	height: calc(var(--vh, 1vh) * 67);
}
.textcontainer {
	background: #DDDDDD;
	border-color: #8db243;
	overflow:auto;
}
.textcontainer_height {
	height: 33vh;
	height: calc(var(--vh, 1vh) * 33);
}
.mapheader {
	height:1.5em;
	display: flex;                  /* establish flex container */
	flex-direction: row;            /* default value; can be omitted */
	flex-wrap: nowrap;              /* default value; can be omitted */
	justify-content: space-between; /* switched from default (flex-start, see below) */
}
.pointer {
	cursor:pointer;
}
.bg-istercolor1 {
	background-color:#F99121;
}
.bg-istercolor2 {
	background-color:#22693F;
}
.bg-istercolor3 {
	background-color:#218CC1;
}
.bg-error {
	background-color:#DD0000;
}
.bg-white {
	background-color:#FFFFFF;
}
.bg-brightgreen {
	background-color:#77FF88;
}
.bg-green {
	background-color:#22CC22;
}
.bg-orange {
	background-color:#FF9922;
}
.bg-yellow {
	background-color:#FFFF22;
}
.bg-brightred {
	background-color:#FF7788;
}
.bg-grey {
	background-color:#9999A4;
}
.fg-white {
	color:#FFFFFF;
}
.fg-istercolor1 {
	color:#F99121;
}
.fg-istercolor2 {
	color:#22693F;
}
.fg-istercolor3 {
	color:#218CC1;
}
.fg-error {
	color:#DD0000;
}
.mapheader_title {
	color:#FFFFFF;
	font-weight: 600;
	padding-top:0.1em;
}
.mapheader_back {
	width:1.2em;
	margin-top:0.1em;
	margin-bottom:0.1em;
	margin-left:0.1em;
	padding-top:0.1em;
}
.mapheader_icons {
	display: flex;                  /* establish flex container */
	flex-direction: row;            /* default value; can be omitted */
	flex-wrap: nowrap;              /* default value; can be omitted */
	justify-content: space-between; /* switched from default (flex-start, see below) */
	margin-right:0.1em;
}

.mapheader_icon1 {
	width:1.2em;
	margin-top:0.1em;
	margin-bottom:0.1em;
	margin-left:0.1em;
	padding-top:0.1em;
}
.mapheader > div {

}

/* #container{width:100%;}
#mapheader_back{float:left;width:100px;}
#mapheader_icons{float:right;width:100px;}
#mapheader_title{margin:0 auto;width:100px;}
*/
.mapwindow {
	background-color:#55FF55;
	height: calc(100% - (1.5em + 20px));
	padding:10px;
}
.textwindow {
	background-color:#FFFFFF;
	/* height: calc(100% - (1.5em + 20px)); */
	max-height:75vh;
	overflow:auto;
	padding:10px;
}
.buttonwindow {
	height:4em;
	padding-left:0.25em;
	display:flex;
	align-items:center;
	background-color:#FFFFFF;
}
.overlay_cookies {
	z-index:50;
	position:absolute;
	top:0;
	left:0;
	width:calc(100% - 20px);
	height:calc(100% - 20px);
	/* background-color:yellow; */
	margin: 10px 10px 10px 10px;
	display:none;
}
.overlay_container {
	z-index:30;
	position:absolute;
	top:0;
	left:0;
	width:calc(100% - 20px);
	height:calc(100% - 20px);
	/* background-color:yellow; */
	margin: 10px 10px 10px 10px;
	display:none;
}
.overlay_startpage {
	z-index:30;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color: #FFFFFF;
	margin: 0px 0px 0px 0px;
	display:none;
}
.speedbox {
	height:3em;
	display: flex;                  /* establish flex container */
	flex-direction: row;            /* default value; can be omitted */
	flex-wrap: nowrap;              /* default value; can be omitted */
	justify-content: space-between; /* switched from default (flex-start, see below) */
}
.monumentbox {
	min-height:3em;
	max-height:6em;
	display: flex;                  /* establish flex container */
	flex-direction: row;            /* default value; can be omitted */
	flex-wrap: nowrap;              /* default value; can be omitted */
	justify-content: space-between; /* switched from default (flex-start, see below) */
	margin-top:3em;
}
.selectbox {

}

/* CHECKBOX */
.checkboxcontainer {
  display: block;
  position: relative;
  padding-left: 1.5em;
  margin-bottom: 0.5em;
  cursor: pointer;
  font-size: 1em;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
/* Hide the browser's default checkbox */
.checkboxcontainer input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 1.2em;
  width: 1.2em;
  background-color: #eee;
}
/* On mouse-over, add a grey background color */
.checkboxcontainer:hover input ~ .checkmark {
  background-color: #ccc;
}
/* When the checkbox is checked, add a blue background */
.checkboxcontainer input:checked ~ .checkmark {
  background-color: #DD0000;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
/* Show the checkmark when checked */
.checkboxcontainer input:checked ~ .checkmark:after {
  display: block;
}
/* Style the checkmark/indicator */
.checkboxcontainer .checkmark:after {
  left: 0.45em;
  top: 0.2em;
  width: 0.2em;
  height: 0.5em;
  border: solid white;
  border-width: 0 0.2em 0.2em 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
/* CHECKBOX END*/





.isterbutton-red {
	box-shadow:inset 0px 1px 0px 0px #ff6666;
	background:linear-gradient(to bottom, #ff6666 5%, #ff0000 100%);
	background-color:#ff6666;
	border:1px solid #dd0000;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-size:1.5em;
	font-weight:bold;
	padding:0.4em 0.2em;
	text-decoration:none;
	width:calc(100% - 20px);
	text-align:center;
}
.isterbutton-red:hover {
	background:linear-gradient(to bottom, #ff0000 5%, #ff6666 100%);
	background-color:#ff0000;
}
.isterbutton-red:active {
	position:relative;
	top:1px;
}

.isterbutton-istercolor2 {
	box-shadow:inset 0px 1px 0px 0px #9ACC85;
	background:linear-gradient(to bottom, #AABF76 5%, #22693F 100%);
	background-color:#AABF76;
	border:1px solid #3B6E22;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-size:1.5em;
	font-weight:bold;
	padding:0.4em 0.2em;
	text-decoration:none;
	width:calc(100% - 20px);
	text-align:center;
}
.isterbutton-istercolor2:hover {
	background:linear-gradient(to bottom, #22693F 5%, #AABF76 100%);
	background-color:#22693F;
}
.isterbutton-istercolor2:active {
	position:relative;
	top:1px;
}
.isterbutton-istercolor3 {
	box-shadow:inset 0px 1px 0px 0px #5ab1d6;
	background:linear-gradient(to bottom, #8ed6f5 5%, #218CC1 100%);
	background-color:#8ed6f5;
	border:1px solid #1483b3;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-size:1.5em;
	font-weight:bold;
	padding:0.4em 0.2em;
	text-decoration:none;
	width:calc(100% - 20px);
	text-align:center;
}
.isterbutton-istercolor3:hover {
	background:linear-gradient(to bottom, #218CC1 5%, #8ed6f5 100%);
	background-color:#218CC1;
}
.isterbutton-istercolor3:active {
	position:relative;
	top:1px;
}

.isterbutton-istercolor1 {
	box-shadow:inset 0px 1px 0px 0px #f5cd7d;
	background:linear-gradient(to bottom, #f5cd7d 5%, #F99121 100%);
	background-color:#f5cd7d;
	border:1px solid #d49d2f;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-size:1.5em;
	font-weight:bold;
	padding:0.4em 0.2em;
	text-decoration:none;
	width:calc(100% - 20px);
	text-align:center;
}
.isterbutton-istercolor1:hover {
	background:linear-gradient(to bottom, #F99121 5%, #f5cd7d 100%);
	background-color:#F99121;
}
.isterbutton-istercolor1:active {
	position:relative;
	top:1px;
}
.isterbutton-grey {
	box-shadow:inset 0px 1px 0px 0px #dbdbdb;
	background:linear-gradient(to bottom, #c2c2c2 5%, #575757 100%);
	background-color:#c2c2c2;
	border:1px solid #787878;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-size:1.5em;
	font-weight:bold;
	padding:0.4em 0.2em;
	text-decoration:none;
	width:calc(100% - 20px);
	text-align:center;
}
.isterbutton-grey:hover {
	background:linear-gradient(to bottom, #575757 5%, #c2c2c2 100%);
	background-color:#575757;
}
.isterbutton-grey:active {
	position:relative;
	top:1px;
}

#disabled_background {
	z-index:20;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:#888888;
	opacity: 0.5;
	display:none;
}
.img-in-overlay {
    max-width: 100%;
	height:auto;
}
.overlay-main-container {
	max-height:400px;
}
.image-fullscreen {
	z-index:40;
	position:absolute;
	top:0;
	left:0;
	width:calc(100% - 20px);
	height:calc(100% - 20px);
	background-color:#882200;
	margin: 10px 10px 10px 10px;
	display:none;
}
.image-fullscreen-image {
	height:100%;
	max-height:100vh;
}
.startpage_button_smaller {
	width:15vw;
	height:15vw;
	border-radius: 50%;
	color: #fff;
	text-align: center;
	margin-top:4vh;
}
.buttonsize_smaller {
	line-height: 15vw;
	font-size: 9vw;
}
.inputsize {
	font-size: 2.5em;
}
.startpage_button {
	width:20vw;
	height:20vw;
	border-radius: 50%;
	color: #fff;
	text-align: center;
	margin-top:6vh;
}
.buttonsize {
	line-height: 20vw;
	font-size: 12vw;
}
.startpage_buttons {
	display:flex;
	justify-content:space-between;
}
.isterlogo_startpage {
	width: 30vh;
	max-width:80%;
	height: auto;
}
input:focus::placeholder {
	color: transparent;
}
.isterinput-container {
	display:flex;
	flex-direction:row;
	justify-content:center;
	align-items: center;
	margin-top:0.4em;
	margin-bottom:0.4em;
}
.isterinput-istercolor1 {
	font-size: 1.25em;
	width:75vw;
	height:2em;
	border-color: #F99121;
	border-radius: 4px;
	border-style: solid;
	border-width: 1px;
	padding:0.4em;
	box-shadow: 0px 0px 5px 0px rgba(249,193,73,.75);
	margin-left:1em;
}
.isterinput-istercolor1::placeholder {
	color:#D9A139;
}

.isterinput-istercolor1:focus {
	box-shadow: 0px 0px 10px 0px rgba(249,193,73,.25);
}

.isterinput-istercolor2 {
	font-size: 1.25em;
	width:75vw;
	height:2em;
	border-color: #22693F;
	border-radius: 4px;
	border-style: solid;
	border-width: 1px;
	padding:0.4em;
	box-shadow: 0px 0px 5px 0px rgba(34,105,63,.75);
	margin-left:1em;
}
.isterinput-istercolor2::placeholder {
	color:#22693F;
}

.isterinput-istercolor2:focus {
	box-shadow: 0px 0px 10px 0px rgba(34,105,63,.25);
}

.isterselect-istercolor1 {
	font-size: 1.25em;
	width:96vw;
	height:3.25em;
	border-color: #f9c149;
	border-radius: 4px;
	border-style: solid;
	border-width: 1px;
	background-color:rgba(249,193,73,.05);
	padding:0.4em;
	box-shadow: 0px 0px 5px 0px rgba(249,193,73,.75);
	margin-left:0.4em;
}
.isterselect-istercolor3 {
	font-size: 1.25em;
	width:96vw;
	height:3.25em;
	border-color: #23ABE7;
	border-radius: 4px;
	border-style: solid;
	border-width: 1px;
	background-color:rgba(35,171,231,.05);
	padding:0.4em;
	box-shadow: 0px 0px 5px 0px rgba35,171,231,.75);
	margin-left:0.4em;
}

.options-container {
	padding-top:1em;
	max-height:calc(81vh - 1.5em - 6em);
	overflow:auto;
}
.querymap_result {
	display: flex;
	align-items: center;
	cursor:pointer;
}
.nopointer {
	cursor:auto;
}
.font_double_height {
	font-size:1.9em;
}
.hiddenbox {
	z-index:5;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:5vh;
	background-color:#5555FF;
	margin: 0px 0px 0px 0px;
	visibility:hidden;
}

/* SLIDERS */
.switch {
  position: relative;
  display: inline-block;
  width: 4em;
  height: 1.95em;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 1.56em;
  width: 1.56em;
  left: 0.234em;
  bottom: 0.234em;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #218CC1;
}

input:focus + .slider {
  box-shadow: 0 0 1px #218CC1;
}

input:checked + .slider:before {
  -webkit-transform: translateX(1.95em);
  -ms-transform: translateX(1.95em);
  transform: translateX(1.95em);
}

/* Rounded sliders */
.slider.round {
  border-radius: 1em;
}

.slider.round:before {
  border-radius: 50%;
}
.slider-container {
	display:flex;
	justify-content:space-between;
	align-items:center;
	margin-top:0.2em;
	margin-bottom:0.4em;
	margin-left:0.5em;
	margin-right:0.5em;
	border-bottom:1px solid #CCCCCC;
	padding-bottom:0.4em;
}
.slider-container:last-child {
	border-bottom:none;
}
/* END SLIDERS */

/* QRCODE */
#qr-canvas {
	margin: auto;
	/* max-width: calc(100% - 20px); */
	max-width: 400px;
	display: inline-block; 
	padding: 3px;
	padding-top:10px;
	max-height:calc(45vh - 20px);
	width: auto;
	height:auto;
}
#qr-container {
	width:100%;
	height:45vh;
	text-align: center;
}
/* END QRCODE */

/* OPENLAYERS */
.map {
	width:100%;
	height:calc(100% - 1.5em);
}