/* 
Theme Name: VM-Saar
*/

/*@import url("leaflet/leaflet.css");
@import url("https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700");
@import url("css/bootstrap.min.css");
@import url('css/prettyPhoto.css');*/


html, body {
	font-family: "Ubuntu";
	margin: 0;
	padding: 0;
	width: 100vw;
	height: 100vh;
	background-color: #ececec;
	font-size: 14px;
	line-height: 20px;
}
section {
	width: 100%;
	height: auto;
	display: block;
}
section:after {
	content: "";
	width: 80%;
	height: 1px;
	background-color: black;
	display: block;
	margin: 30px 0 0 10%;
} 
section h2 {
	text-align: center;
	margin: 15px 0;
}
img {
	max-width: 100%;
	height: auto;
}
.clear {
	clear: both;
}

a, a:hover, a:visited, a:active, a:link{
	color:inherit;
  	text-decoration: none;
}

.leaflet-popup-content a, #listenview a {
	color:#0078A8;
}


h3 {
	font-size: 20px;
	font-weight: 700;
	margin: 0;
}
h4 {
	font-size: 20px;
	font-weight: 400;
	margin: 0;
}
h5 {
	font-weight: 400;
	font-size: 12px;
}

.d-flex {
	display: flex !important;
}

.selfAlignCenter {
	display: flex;
	flex-direction: column;
	justify-content: center;
}


/* ------------------ */
/* 1.1 HEADER SECTION */
/* ------------------ */
.header {
	width: 100vw;
	height: 100px;
	background-color: #ffffff;
	position: relative;
	box-shadow: 0 6px 8px -6px gray;
	z-index:3000;
}
.header .logo {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}
.header .logo.logo-left {
	left: 25px;
}
.header .logo.logo-right {
	right: 25px;
}
.header .logo.logo-left.mobiportal img {
	max-width: 300px;
}
.header .logo.logo-right.saarland img {
	max-width: 160px;
}



/* ------------------------------ */
/* 1.2 BURGER MENU AND PLUS/MINUS */
/* ------------------------------ */
.burger-container {
	position: relative;
	width: 36px;
	height: 36px;
	background-color: #ffffff;
	cursor: pointer;

	display: inline-block; /* MUSS NICHT ÜBERNOMMEN WERDEN */
}
.burger-container.burger-shadow {
	box-shadow: 4px 4px 8px -4px gray;
}
.burger-container .burger-part-wrapper {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
.burger-container .burger-part-wrapper .burger-part {
	width: 20px;
	height: 2px;
	margin: 6px 0 0 0;
	background-color: #636363;
	border-radius: 2px;
}
.burger-container .burger-part-wrapper .burger-part:first-child {
	margin-top: 0;
}


.burger-container.open .burger-part-wrapper .burger-part.middle {
	display: none;
}
.burger-container.open .burger-part-wrapper .burger-part:first-child {
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
	margin-top: 2px;
}
.burger-container.open .burger-part-wrapper .burger-part:last-child {
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
	margin-top: -2px;
}
.burger-container.plus .burger-part-wrapper .burger-part.middle {
	display: none;
}
.burger-container.plus .burger-part-wrapper .burger-part:first-child {
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	transform: rotate(90deg);
	margin-top: 2px;
}
.burger-container.plus .burger-part-wrapper .burger-part:last-child {
	-webkit-transform: rotate(0);
	-moz-transform: rotate(0);
	-ms-transform: rotate(0);
	-o-transform: rotate(0);
	transform: rotate(0);
	margin-top: -2px;
}
.burger-container.minus .burger-part-wrapper .burger-part.middle {
	margin: 2px 0 0 0;
}
.burger-container.minus .burger-part-wrapper .burger-part:first-child {
	display: none;
}
.burger-container.minus .burger-part-wrapper .burger-part:last-child {
	display: none;
}

/* ---------- */
/* 1.3 FOOTER */
/* ---------- */
.footer {
	font-size: 14px;
	width: 100vw;
	height: 30px;
	background-color: #ffffff;
	box-shadow: 0 -6px 8px -6px gray;
	z-index: 3000;
}
.footer .col {
	/* width: 50%; */
	height: 100%;
}
.footer .col.col-left {
	float: left;
	text-align: left;
}
.footer .col.col-right {
	float: right;
	text-align: right;
}
.footer .col.col-right span {
	margin-left: 20px;
}
.footer .col.col-left span:first-child {
	margin-left: 30px;
}
.footer .col.col-right span:last-child {
	margin-right: 30px;
}



/* --------------- */
/* 1.4 MENU NORMAL */
/* --------------- */
.menu-overlay {
	width: 260px;
	height: calc(100vh - 130px);
	background-color: #ffffff;
	overflow-y: auto;
	overflow-x: hidden;
	box-shadow: 8px 0 12px -8px gray;
	float:left;
	position:absolute;
	z-index:1000;
}
.menu-overlay .menu-header {
	width: 36px;
	height: 36px;
	display: block;
	text-align: right;
	right:0;
	position: absolute;
}
.menu-overlay .menu-body {
	width: 100%;
	height: auto;
	display: block;
}
.menu-overlay .menu-body .icon {
	width: 100%;
	height: 40px;
	padding: 0 0 0 60px !important;
	line-height: 40px;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: 10px;
	-ms-background-position-x: -90px;
	cursor: pointer;
	-webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: none;
}
.menu-overlay.small .menu-body .icon {
	-ms-background-position-x: -7.5px !important;
}
/*für zweites Menü Listenansicht*/
/* .menu-overlay .menu-header .icon { 
	width: 100%; 
	height: 40px;
	line-height: 40px;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: 2vw center;
	cursor: pointer;
	float: left;
	
} */
.menu-overlay .menu-body .icon.active {
	background-color: #f2f2f2;
	border-bottom: 1px solid #ffffff;
}
.pdf {
	background-image: url('img/svg_grau/pdf_grau.svg');
}
.verkehrsmeldungen {
	background-image: url('img/svg_grau/verkehrsmeldungen_grau.svg');
}
.verkehrsmeldungen.active {
	background-image: url('img/verkehrsmeldungen.svg');
}
.veranstaltungen {
	background-image: url('img/svg_grau/veranstaltungen_grau.svg');
}
.veranstaltungen.active {
	background-image: url('img/svg_bunt/veranstaltungen.svg');
}
.stoerungoev {
	background-image: url('img/svg_grau/stoerung_oev_grau.svg');
}
.stoerungoev.active {
	background-image: url('img/svg_bunt/stoerung_oev.svg');
}
.sonstiges {
	background-image: url('img/svg_grau/sonstiges_grau.svg');
}
.sonstiges.active {
	background-image: url('img/svg_bunt/sonstiges.svg');
}
.sperrungen {
	background-image: url('img/svg_grau/sperrungen_grau.svg');
}
.sperrungen.active {
	background-image: url('img/svg_bunt/sperrungen.svg');
}
.baustellen {
	background-image: url('img/svg_grau/baustellen_grau.svg');
}
.baustellen.active {
	background-image: url('img/svg_bunt/baustellen.svg');
}
.wetter {
	background-image: url('img/svg_grau/wetter_grau.svg');
}
.wetter.active{
	background-image: url('img/svg_bunt/wetter.svg');
}
.dynamischer_wegweiser {
	background-image: url('img/svg_grau/dynamischer_wegweiser_grau.svg');
}
.dynamischer_wegweiser.active {
	background-image: url('img/svg_bunt/dynamischer_wegweiser.svg');
}
.streckenbeeinflussungsanlage{
	background-image: url('img/svg_grau/streckenbeeinflussungsanlage_grau.svg');
}
.streckenbeeinflussungsanlage.active {
	background-image: url('img/svg_bunt/streckenbeeinflussungsanlage.svg');
}
.verkehrslage {
	background-image: url('img/svg_grau/verkehrslage_grau.svg');
}
.verkehrslage.active {
	background-image: url('img/svg_bunt/verkehrslage.svg');
}
.saarbahn-haltestellen{
	background-image:url('img/svg_grau/saarbahn_halt_grau.svg');
}
.saarbahn-haltestellen.active{
	background-image:url('img/svg_bunt/saarbahn_halt.svg');
}
.saarbahn-liniennetz{
	background-image:url('img/svg_grau/bus_netz_grau.svg');
}
.saarbahn-liniennetz.active{
	background-image:url('img/svg_bunt/bus_netz_orange.svg');
}
.bus-haltestellen{
	background-image:url('img/svg_grau/bus_halt_grau.svg');
}
.bus-haltestellen.active{
	background-image:url('img/svg_bunt/bus_halt.svg');
}
.regiobus-liniennetz {
	background-image:url('img/svg_grau/bus_netz_grau.svg');
}
.regiobus-liniennetz.active {
	background-image:url('img/svg_bunt/bus_netz_violet.svg');
}
.nachtbus-liniennetz {
	background-image:url('img/svg_grau/bus_netz_grau.svg');
}
.nachtbus-liniennetz.active {
	background-image:url('img/svg_bunt/bus_netz_black.svg');
}
.saarbahn-liniennetz {
	background-image:url('img/svg_grau/bus_netz_grau.svg');
}
.saarbahn-liniennetz.active {
	background-image:url('img/svg_bunt/bus_netz_orange.svg');
}
.bahn-liniennetz {
	background-image:url('img/svg_grau/bus_netz_grau.svg');
}
.bahn-liniennetz.active {
	background-image:url('img/svg_grau/bus_netz_grau.svg');
}
.bus-liniennetz {
	background-image:url('img/svg_grau/bus_netz_grau.svg');
}
.bus-liniennetz.active {
	background-image:url('img/svg_bunt/bus_netz.svg');
}
.bahnhof{
	background-image:url('img/svg_grau/bahnhof_grau.svg');
}
.bahnhof.active{
	background-image:url('img/svg_bunt/bahnhof.svg');
}
.bahn-liniennetz{
	background-image:url('img/svg_grau/bus_netz_grau.svg');
}
.bahn-liniennetz.active{
	background-image:url('img/svg_grau/bus_netz_grau.svg');
}
.mobilitaetsstationen {
	background-image: url('img/svg_grau/mobilitaetsstationen_grau.svg');
}
.mobilitaetsstationen.active {
	background-image: url('img/svg_bunt/mobilitaetsstationen.svg');
}
.lade-schnell{
	background-image: url('img/svg_grau/ladestationen_schnell_grau.svg');
}
.lade-schnell.active{
	background-image: url('img/svg_bunt/ladestationen_schnell.svg');
}
.lade-normal{
	background-image: url('img/svg_grau/ladestationen_normal_grau.svg');
}
.lade-normal.active{
	background-image: url('img/svg_bunt/ladestationen_normal.svg');
}
.lade-pedel{
	background-image: url('img/svg_grau/ladestationen_pedelecs_grau.svg');
}
.lade-pedel.active{
	background-image: url('img/svg_bunt/ladestationen_pedelecs.svg');
}
.flughafen {
	background-image: url('img/svg_grau/flughafen_grau.svg');
}
.flughafen.active {
	background-image: url('img/svg_bunt/flughafen.svg');
}
.radwegenetz-alltag{
	background-image: url('img/svg_grau/radwegenetz_alltag_grau.svg');
}
.radwegenetz-alltag.active{
	background-image: url('img/svg_bunt/radwegenetz_alltag.svg');
}
.radwegenetz-tourismus{
	background-image: url('img/svg_grau/radwegenetz_alltag_grau.svg');
}
.radwegenetz-tourismus.active{
	background-image: url('img/svg_bunt/radwegenetz_alltag_blau.svg');
}
.fahrradabstellanlagen{
	background-image: url('img/svg_grau/fahrradabstellstationen_grau.svg');
}
.fahrradabstellanlagen.active{
	background-image: url('img/svg_bunt/fahrradabstellstationen.svg');
}
.parkplatz{
	background-image: url('img/svg_grau/parkplaetze_grau.svg');
}
.parkplatz.active{
	background-image: url('img/svg_bunt/parkplaetze.svg');
}
.parkhaus{
	background-image: url('img/svg_grau/parkhaeuser_grau.svg');
}
.parkhaus.active{
	background-image: url('img/svg_bunt/parkhaeuser.svg');
}
.parkandride{
	background-image: url('img/svg_grau/park_ride_grau.svg');
}
.parkandride.active{
	background-image: url('img/svg_bunt/park_ride.svg');
}
.parkmit{
	background-image: url('img/svg_grau/mitfahrer_parkplaetze_grau.svg');
}
.parkmit.active{
	background-image: url('img/svg_bunt/mitfahrer_parkplaetze.svg');
}
.parklkw{
	background-image: url('img/svg_grau/lkw_parkplaetze_grau.svg');
}
.parklkw.active{
	background-image: url('img/svg_bunt/lkw_parkplaetze.svg');
}
.anwohner{
	background-image: url('img/svg_grau/anwohnerbereiche_grau.svg');
}
.anwohner.active{
	background-image: url('img/svg_bunt/anwohnerbereiche.svg');
}
.carsharing {
	background-image: url('img/svg_grau/carsharing_grau.svg');
}
.carsharing.active {
	background-image: url('img/svg_bunt/carsharing.svg');
}
.listenansicht {
	background-image: url('img/svg_bunt/listenansicht.svg');
}


.menu-overlay .menu-body .accordeon {
	background-image: url('img/pfeil_geschlossen.svg');
	-webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition:none;
}
.menu-overlay .menu-body .accordeon.open {
	background-image: url('img/pfeil_offen.svg');
	-webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition:none;
}
/* hr {
	background-color: #636363;
} */



/* ---------- */
/* 1.5 SELECT */
/* ---------- */
.styled-select {
	background: url(img/pfeil_dropdown.svg) no-repeat 95% center;
	background-size: 16px;
	height: 29px;
	overflow: hidden;
	width: 240px;
	border-radius: 0;
	border: 1px solid #636363;
}
.styled-select select {
	-webkit-appearance: none;
	-moz-appearance: none;
	-o-appearance: none;
	background: transparent;
	border: none;
	font-size: 14px;
	height: 29px;
	padding: 5px; /* If you add too much padding here, the options won't show in IE */
	width: 240px;
	border-radius: 0;
	text-overflow: '';
	text-indent: 0.01px;
}
.styled-select select::-ms-expand {
    /* IE 8 */
 	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 	/* IE 5-7 */
 	filter: alpha(opacity=0);
 	/* Good browsers :) */
 	opacity:0;
}
.styled-select.slate {
	background: url(img/pfeil_dropdown.svg) no-repeat 95% center;
	background-size: 16px;
	height: 34px;
	width: 240px;
	border-radius: 0;
	border: 1px solid #636363;
	
	
}
.styled-select.slate select {
	font-size: 14px;
	height: 34px;
	width: 260px;
	border-radius: 0;
	-webkit-appearance: none;
}
.styled-select.slate select option {
	background-repeat: no-repeat;
	background-size: contain;
	background-position: left center;
}



/* --------------- */
/* 1.6 SMALL BOXES */
/* --------------- */
.small-box {
	font-size: 14px;
	font-weight: 700;
	display: inline-block;
	padding: 5px 10px;
	margin-bottom: 5px;
	cursor: pointer;
	text-align:center;
	margin-left:2%;
}
.small-box.blue {
	background-color: #215192;
	color: #ffffff;
}
.small-box.yellow {
	background-color: #edd25e;
}
.small-box.white {
	background-color: #ffffff;
	border: 1px solid #636363;
	padding: 3px;
	width:unset;
}



/* ------------------ */
/* 1.7 LIST VIEW ITEM */
/* ------------------ */
.list-view-item {
	display:flex;
	padding: 10px;
	cursor: pointer;
}
.list-view-item .left-col {
	width:80px;
}
.list-view-item .left-col img{
	width: 100%;
	height: auto;
}
.list-view-item .right-col {
	width: calc(100% - 80px);
}
.list-view-item .right-col .headline-wrapper {
	width: 100%;
}
.list-view-item .right-col .headline-wrapper h3 {
	margin-top:5px;
}
.list-view-item .right-col .information span {
	font-size: 14px;
	line-height: 22px;
	display: block;
	margin:7.5% 0 0 0;
}

/* ----------- */
/* 1.8 TRAFFIC */
/* ----------- */
.traffic-information {
	width: 140px;
	height: 40px;
	padding: 5px;
	display: block;
	background-color: #ffffff;
	position: relative
}
.traffic-information .traffic-wrapper {
	display: block;
	width: 100%;
	height: auto;
}
.traffic-information .traffic-wrapper .traffic-color {
	display: block;
	width: 30%;
	height: 6px;
	float: left;
	margin: 4px 0;
	border-radius: 3px;
}
.traffic-information .traffic-wrapper .traffic-color.green {
	background-color: #ccdf52;
}
.traffic-information .traffic-wrapper .traffic-color.yellow {
	background-color: #edd25e;
}
.traffic-information .traffic-wrapper .traffic-color.red {
	background-color: #e58c51;
}
.traffic-information .traffic-wrapper .traffic-color.deep-red {
	background-color: #cc403d;
}
.traffic-information .traffic-wrapper .traffic-description {
	display: block;
	font-size: 12px;
	line-height: 14px;
	width: 60%;
	height: 14px;
	float: left;
	margin: 0 0 0 10%;
}

.traffic-information.inverted {
	color: white;
	background-color: #666666;
}
.traffic-information.inverted .traffic-wrapper .traffic-color.green {
	background-color: #ffffff;
}
.traffic-information.inverted .traffic-wrapper .traffic-color.yellow {
	background-color: #70fbfd;
}
.traffic-information.inverted .traffic-wrapper .traffic-color.red {
	background-color: #ec3323;
}
.traffic-information.inverted .traffic-wrapper .traffic-color.deep-red {
	background-color: #000000;
}



/* ------------ */
/* 1.9 WARNINGS */
/* ------------ */
.warning-container {
	background-color: white;
	width: 25%;
	padding: 20px;
	font-size: 14px;
	line-height: 22px;
}
.warning-container span {
	display: block;
	position: relative;
	padding: 0 0 0 25px;
}
.warning-container .colorspan:before {
	content:"";
	width: 15px;
	height: 15px;
	position: absolute;
	top: 2px;
	left: 1px;
	border: 1px solid #636363;
	background-color: white;
}
.warning-container .colorspan.purple:before {
	background-color: #7d1e4e;
}
.warning-container .colorspan.red:before {
	background-color: #d5483e;
}
.warning-container .colorspan.orange:before {
	background-color: #ee9135;
}
.warning-container .colorspan.yellow:before {
	background-color: #fffe65;
}
.warning-container .colorspan.striped:before {
	background-color: #e39897;
}
.warning-container .colorspan.light-purple:before {
	background-color: #c59df9;
}
.warning-container .colorspan.pink:before {
	background-color: #ee74f8;
}



/* --------------------- */
/* 1.10 STOP INFORMATION */
/* --------------------- */
.stop-information-container {
	width: 25%;
	height: auto;
	background-color: white;
	padding: 20px;
	font-size: 14px;
	line-height: 22px;
}
.stop-information-container .address-data {
	font-size: 12px;
	line-height: 16px;
}


/* neue Objekte */

#map { 
	float: right;
	width: calc(100vw - 260px);
	height: calc(100vh - 130px);
}

.sehschwaeche {
	height: 40px;
	width: 40px;
	margin: 5px;
	padding: 0 0 0 0;
	line-height: 40px;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	cursor: pointer;
	background-image:url('img/svg_bunt/sehschwaeche.svg');
	background-color: #ffffff;
	position: relative;
	float: right;	
	box-shadow: 2px 2px 5px 1px grey;
}
.sehschwaeche.aktiv{
	background-image:url('img/svg_bunt/sehschwaeche_durchgestrichen.svg');
}

#traff1{
	position: relative;
	float:right;
	display: inline-table; 
	margin: 5px;
	box-shadow: 2px 2px 5px 1px grey;
}
#displayverkehr{
	position:relative; 
	z-index: 600; 	
}
#close{
	height: 40px;
	width: 40px;
	margin: 5px;
	padding: 0 0 0 0;
	line-height: 40px;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	cursor: pointer;
	background-image:url('img/svg_bunt/close.svg');
	background-color: #ffffff;
	position: relative;
	float:right;
	box-shadow: 2px 2px 5px 1px grey;
}

#btn2{
	z-index: 1000;
	display: none;
	position:absolute;
}
/* #btn3{
	 float: right;
	 margin-top: 0.5vh; 
	 margin-right: 1vw;
} */
#mhead2{
	height: 40px; 
	width:100%;
	display:none;
	justify-content: space-between;
	padding:10px 0 ;
}
#iconliste2{
	 width:36px;
	 height:36px;
}

#select{
	 width:100%; 
	 float:left;
}
#menu2{
	display:none;
	margin-top:60px;
}
#boxen{
	 position:relative; 
}
#turnoff{
	background-color: darkgray;
	width: calc(100%/3.65);
	color: #ffffff;
	font-size: xx-small;
	text-align: center;
	cursor: pointer;
	margin-left:2%;
}
#wetter{
	position:relative; 
	z-index: 1000; 
	float:right;
	display: none;
	width: 360px;
	margin: 5px;
	box-shadow: 2px 2px 5px 1px grey;
}
.top{
	opacity: 1;
}
#btn4{
	float:right;
	z-index: 1000;
	display: none;
	height: 40px;
    width: 40px;
    cursor: pointer;
	margin: 5px;
	background-repeat: no-repeat;
	background-color: #ffffff;
	position:relative;
	box-shadow: 2px 2px 5px 1px grey;
}
.showweather{
	background-image: url('img/menu_offen.svg');
}
.hideweather{
	background-image: url('img/menu_geschlossen.svg');
}
#menulinks{
	display: none;
	padding: 10px 0 10px 60px;
}
#footerlinks{
	position: relative;
    top: 3.5px;
}
.window{
	position:absolute; 
	z-index: 1200; 
	right:0;
	max-width: 450px;
	height:100%;
	background-color: #ffffff;
	display:none;
	font-size:12px;
	text-align:left;
	overflow-y: auto; 
}

#datenschutz, #impressum, #aktualitaetsHinweis{
	font-size:12px;
	text-align:left; 
	padding: 0 10px 10px 10px;
}
#btn5{
	float:right;
	margin-left:100%;
}
.handylinks{
	display:none;
}


/*ClusterIcons*/
.veranstaltungen2{
	background-image: url('img/svg_marker/marker_veranstaltungen.svg');
	background-repeat: no-repeat;
}
.stoerungoev2{
	background-image: url('img/svg_marker/marker_stoerung_oev.svg');
	background-repeat: no-repeat;
} 
.sonstiges2{
	background-image: url('img/svg_marker/marker_sonstiges.svg');
	background-repeat: no-repeat;
}
.tm2{
	background-image: url('img/svg_marker/marker_verkehrsmeldungen.svg');
	background-repeat: no-repeat;
}
.bau{
	background-image: url('img/svg_marker/marker_baustellen.svg');
	background-repeat: no-repeat;
}
.autobahnrast2{
	background-image: url('img/svg_marker/marker_lkw_parkplaetze.svg');
	background-repeat: no-repeat;
}
.bahnhof2{
	background-image: url('img/svg_marker/marker_bahnhof.svg');
	background-repeat: no-repeat;
}
.carsharing2{
	background-image: url('img/svg_marker/marker_carsharing.svg');
	background-repeat: no-repeat;
}
.dww2{
	background-image: url('img/svg_marker/marker_dynamischer_wegweiser.svg');
	background-repeat: no-repeat;
}
.mobilstation2{
	background-image: url('img/svg_marker/marker_mobilitaetsstationen.svg');
	background-repeat: no-repeat;
}
.ladeschnell2{
	background-image: url('img/svg_marker/marker_ladestationen_schnell.svg');
	background-repeat: no-repeat;
}
.ladenormal2{
	background-image: url('img/svg_marker/marker_ladestationen_normal.svg');
	background-repeat: no-repeat;
}
.flugplatz2{
	background-image: url('img/svg_marker/marker_flughafen.svg');
	background-repeat: no-repeat;
}
.glaettemeldeanlage2{
	background-image: url('img/svg_marker/marker_streckenbeeinflussungsanlage.svg');
	background-repeat: no-repeat;
}
.bahnhaltestelle2{
	background-image: url('img/svg_marker/marker_saarbahn_halt.svg');
	background-repeat: no-repeat;
}
.bushaltestelle2{
	background-image: url('img/svg_marker/marker_bus_halt.svg');
	background-repeat: no-repeat;
}
.fahrradabstellanlagen2{
	background-image: url('img/svg_marker/marker_fahrradabstellstationen.svg');
	background-repeat: no-repeat;
}
.pedalladestation2{
	background-image: url('img/svg_marker/marker_ladestationen_pedelecs.svg');
	background-repeat: no-repeat;
}
.parkplatz2{
	background-image: url('img/svg_marker/marker_parkplaetze.svg');
	background-repeat: no-repeat;
}
.parkhaus2{
	background-image: url('img/svg_marker/marker_parkhaeuser.svg');
	background-repeat: no-repeat;
}
.mitfahr{
	background-image: url('img/svg_marker/marker_mitfahrer_parkplaetze.svg');
	background-repeat: no-repeat;
}
.parkandride2{
	background-image: url('img/svg_marker/marker_park_ride.svg');
	background-repeat: no-repeat;
}
.anwohnerbereich2{
	background-image: url('img/svg_marker/marker_anwohnerbereich.svg');
	background-repeat: no-repeat;
}
.sba2{
	background-image: url('img/svg_marker/marker_streckenbeeinflussungsanlage.svg');
	background-repeat: no-repeat;
}

/*ClusterNummern Platzierung*/
.clusternumber{
	position: absolute;
    text-align: center;
    width: 20px;
    height: 20px;
	margin-left: 25px;
	margin-top:20px;
    font-size: 16px;
    font-weight: bold;
    line-height: 20px;
	color: white;
	border: 1px solid white; 
    border-radius: 10px; 
}
.clusternumber10{
	position: absolute;
    text-align: center;
    width: 24px;
	height: 24px;
	margin-left: 27.5px;
	margin-top:30px;
	font-size: 16px;
    font-weight: bold;
    line-height: 24px;
	color: white;
	border: 1px solid white; 
    border-radius: 12px; 
}
.clusternumber100{
	position: absolute;
	text-align: center;
    width: 30px;
	height: 30px;
	margin-left: 30px;
	margin-top:35px;
    font-size: 16px;
    font-weight: bold;
    line-height: 30px;
	color: white;
	border: 1px solid white; 
    border-radius: 15px; 
}
.clusternumber1000{
	position: absolute;
	text-align: center;
    width: 40px;
	height: 40px;
	margin-left: 40px;
	margin-top:45px;
    font-size: 16px;
    font-weight: bold;
    line-height: 40px;
	color: white;
	border: 1px solid white; 
    border-radius: 20px; 
}

/*///////////////////////////////////
MEDIA QUERIES
///////////////////////////////////*/

/*Handys horizontal*/
@media only screen and (max-width : 767px) and (orientation : portrait) {
	#map{
		width: 100vw;
		height: calc(100vh - 100px);
	}
	.menu-overlay{
		width: 100vw;
		z-index: 1500;
		height: calc(100vh - 100px);
	}
	.menu-overlay .menu-header {
		position:fixed;
	}
	.footer{
		display:none;
	}
	#mhead2{
		position:relative;
	}
	/* #btn3{
		margin-top: 0;
	} */
	
	#wetter{
		margin: 0;		
	}
	#btn4{
		margin:0;
		height: 36px;
		width: 36px;
		box-shadow: -3px 2px 5px 0px grey;
	}
	#menulinks{
		display:block;
	}
	.handylinks{
		display:initial;
	}
	.window{
		z-index:2200;
		max-width:unset;
		width:100vw;
	}
}
/*Handys vertikal*/
@media only screen and (max-width : 767px) and (orientation : landscape) {
	#map{
		width: 100vw;
		height: calc(100vh - 100px);
	}
	.menu-overlay{
		width: 100vw;
		z-index: 1500;
		height: calc(100vh - 100px);
	}

	.menu-overlay .menu-header {
		position:fixed;
	}
	
	.footer{
		display:none
	}
	#mhead2{
		position:relative;
	}
	/* #btn3{
		margin-top: 0;
	} */
	#menulinks{
		display:block;
	}
	.handylinks{
		display:initial;
	}
	.window{
		z-index:2200;
		max-width:unset;
		width:100vw;
	}
}


/*Internet Explorer Icons anzeige*/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	.styled-select.slate {
			background-size: 75%;
        	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
        	src='img/pfeil_dropdown.svg',
        	sizingMethod='scale');
			background-position: 200%;
	}
}

@supports (-ms-accelerator:true) {
	.clusternumber10{
	 	padding-top: 63%;
	 	padding-left: 72%;
  	}
	.clusternumber{
		padding-top: 61%;
	  	padding-left: 79%;
  	}
	.styled-select.slate {
		background-size: 65%;
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
        src='img/pfeil_dropdown.svg',
        sizingMethod='scale');
		background-position: 200%;
	}
}