@font-face {
  font-family: "custom-icon";
  src:url("fonts/untitled-font-2.eot");
  src:url("fonts/untitled-font-2.eot?#iefix") format("embedded-opentype"),
    url("fonts/untitled-font-2.woff") format("woff"),
    url("fonts/untitled-font-2.ttf") format("truetype"),
    url("fonts/untitled-font-2.svg#untitled-font-2") format("svg");
  font-weight: normal;
  font-style: normal;

}


*{
	margin: 0;
	padding: 0;
}
html, body{
	height: 100%;
	font-family: "Open Sans",Verdana;
	overflow: hidden;
	position: relative;
}
a, a:visited{
	color: #0092c5;
}
a:hover{
	color: #00688a;
}
input{
	font-family: "Open Sans",Verdana;
	outline: 0	
}
#container{
	height: 100%;
	width: 100%;
}
#header{
	top:10px;
	left: 10px;
	height: 70px;
	z-index: 5;
	padding: 10px;
	-webkit-box-shadow: 0px 2px 1px 0px rgba(0,0,0,0.25);
	-moz-box-shadow: 0px 2px 1px 0px rgba(0,0,0,0.25);
	box-shadow: 0px 2px 1px 0px rgba(0,0,0,0.25);
	width:66px;
	transition: all .2s ease-in-out;
}
#logop{
	position: absolute;
	width: 65px;
}
#logo{
	margin-top: -14px;
	margin-left: 85px;
max-width: 212px;
}
#nav{
	left: 10px;
	z-index: 3;
	top: 120px;
	overflow: hidden;
	width:200px;
	opacity: 1;
	transition: all 0.7s ease-in-out;
	visibility: visible;

}
#nav .toggle{
	padding: 10px;
}
#nav ul{
	display: block;
	width: auto;
	z-index: 3;
}
#nav ul li{
	list-style-type: none;
	vertical-align: middle;
	font-size: 12px;
	cursor: pointer;
	padding: 5px 25px 5px 25px;
	transition: all 0.2s ease-in;
	border-left: 0;
}
#nav ul li:hover{
	background: #0092c5;
	padding-right: 20px;
	/* border-left: 5px solid #0092c5; */
	transition: all 0.1s ease-in;

}
#nav ul li a{
color: #000;
}
#nav ul li:hover a{
transition: all 0.1s ease-in;
color:#fff;

}
#nav:hover ul{
	display: block;
}
#map {
	width: 100%;
	height: 100%;
	z-index: 1;
}
#legend{
	left: 10px;
	bottom: 10px;
	z-index: 6;
	padding: 15px;
	font-size: 12px;
	opacity: 1;
	transition: all 0.7s ease-in-out;
		visibility: visible;

}
#legend li{
	list-style-type: none;
	vertical-align: middle;
	
}

#legend li img{
	vertical-align: middle;
	width: 25px;
}
#footer{
	height: 25px;
	position: absolute;
	bottom:0;
	left: 10px;
	right: 10px;
	padding:10px;
	width: calc( 100% - 40px );
	z-index: 6;
	display: none;
}
#search{
	z-index: 3;	
	left:0;
	right:0;
	margin-left:auto;
	margin-right:auto;
	width: 30%;
	top: 10px;
	opacity: 1;
	visibility: visible;
	transition: all .2s ease-in-out;
}
#search-input, .mapboxgl-ctrl-geocoder input{
	padding: 15px;
	display: block;
	width: calc(100% - 60px);
	border: 0;
	border-radius: 5px;
	background: #fff url(../../images/search-ico.png) left center no-repeat;
	padding-left: 35px;
	margin-left: 10px !important;
	background-size: 23px 35px;
}
#search-input:focus, #search-input:active, .mapboxgl-ctrl-geocoder input:active{
	background: #fff url(../../images/search-ico-active.png) left center no-repeat;
	background-size: 23px 35px;
}
#search-input:active, .mapboxgl-ctrl-geocoder input:active{
	border: 0;

}
.mapboxgl-ctrl-geocoder .geocoder-icon-search{
	display:none;
}
.mapboxgl-ctrl-geocoder {
    font: 15px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
    width: 100% !important;
    max-width: 100% !important;
}
.standort-suche, .pr-suche{
	padding: 5px;
	background: #fff url(../../images/search-ico.png) left center no-repeat;
	background-size: 15px 23px;
	padding-left: 25px;
    border: 1px solid #0092c5;
	border-top: 4px solid #0092c5;
    background-position-x: 5px;
	border-radius: 4px;
	width: 60%;
}
.standort-suche:focus, .standort-suche:active, .pr-suche:focus, .pr-suche:active{
	background: #fff url(../../images/search-ico-active.png) left center no-repeat;	
	background-size: 15px 23px;
    background-position-x: 5px;

}
.standortliste ul{margin-bottom: 10px;}
#language{
	z-index: 3;
	width: 200px;
	position: relative;	
}
#language img{
	vertical-align: middle;
}
#language-list li.active, #language-list li:hover{
	font-weight: bold;
}
#language .header img{
	padding: 5px 5px 5px 10px;
}
#language .filter-container{
	display:none;
}
#filter{
	margin-top: 20px;
	z-index: 3;
	width: 200px;
	position: relative;
}
#filter .toggle, #states .toggle, #language .toggle{
	padding: 10px;
}
#filter .header, #states .header, #nav .header, #language .header{
	cursor: pointer;
	font-size: 14px;
	font-weight: 900;
}
#states{
	margin-top: 20px;
	z-index: 3;
	width: 200px;
	position: relative;
}
#float-container{
	top: 10px;
	right: 10px;
	position: absolute;
	width: 201px;
	opacity: 1;
	visibility: visible;
	transition: all 0.7s ease-in-out;

}
.control{	
	background: #fff;		
	position: absolute;
	-webkit-box-shadow: 0px 2px 1px 0px rgba(0,0,0,0.25);
	-moz-box-shadow: 0px 2px 1px 0px rgba(0,0,0,0.25);
	box-shadow: 0px 2px 1px 0px rgba(0,0,0,0.25);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	border-top: 4px solid #0092c5;

}
/*
 * 
 * LOADING
 */
 .loading #nav,.loading #search, .loading #legend, .loading #float-container{
	 opacity: 0;
	 visibility: hidden;
 }
 #loadingStrip{
	 height: 3px;
	 width: 0vw;
	 position: absolute;
	 background: #0092c5;
	 top: 0;
	 left: 0;
	 z-index: 999;
	 transition: all .2s ease-in-out;
 }
/*
 * 
 * FILTER
 */
.filter-container{
	padding: 15px 0;
	font-size: 12px;
	border-top: 1px solid #efefef;
}
.filter-container li{
	list-style-type: none;	
	transition: all .2s ease-in;

}

.filter-container li:hover, .filter-container li:active{
	background: #0092c5;
	color: #fff;
	transition: all .1s ease-in;

}
.filter-container li:hover label, .filter-container li:active label{
	color: #fff !important;
}
.filter-container label{
	cursor: pointer;	
	display:block;
	padding: 4px 15px;
}
.filter-container li input{
    vertical-align: middle;
    margin-top: 0px;
}
.filter-container li span{
	padding-right: 5px;
}
.menu-container{
	padding: 15px 0;
}
#zone-list{
	margin-top: 10px;
	padding-top:10px;
	border-top: 1px solid #efefef;
}
.filter-container li label input {
  display: none;/* <-- hide the default checkbox */
}
.filter-container li label span {/* <-- style the artificial checkbox */
  height: 10px;
  width: 10px;
  border: 1px solid grey;
  display: inline-block;
  position: relative;
}
.filter-container li [type=checkbox]:checked + span:before {/* <-- style its checked state..with a ticked icon */
  content: '\2714';
  position: absolute;
  top: -5px;
  left: 0;
}
/*
 * 
 * MARKER CONTAINTER
 */
.marker-container{
	min-width: 250px;
	min-height: 110px;
	position: relative;
}
.marker-container .title{
	font-weight: bold;
	font-size: 18px;
	cursor: pointer;
	margin-bottom: 5px;
}
.marker-container .address{
	margin-bottom: 10px;
}
.marker-container .address, .marker-container{
	font-size: 12px;
}
.marker-container .details{
	text-decoration: none;
	color: #0092c5;
	display: block;
	position: absolute;
	bottom: 0;
}
#overlay{
	width: 30%;
	height: calc( 100% - 160px );
	left: 10px; 
	top: 115px;
	z-index: 9999;
	padding: 15px 0;
	transition: all 0.8s ease-in-out;
	font-size: 14px;
}
#overlay.overlay-page{
	width:50%;
	left: 12,5%;
	
}
#overlay-scroll{
	height: 100%;
	padding: 0 30px ;
	overflow-y: auto;
}
#overlay .mCSB_container{

}
#overlay h1{
	margin-bottom: 15px;
}
#overlay .garage-container h1{
	margin-bottom: 0px;
}
#overlay.hidden{
	left: -80vw !important;
	transition: all 0.8s ease-in-out;

}
#overlay-close{
	position: absolute;
	top: 10px;
	right: 10px;
	cursor: pointer;
	padding: 10px;
	font-size: 20px;
}
#overlay-header{
    height: 70px;
    z-index: 5;
    padding: 10px;
    -webkit-box-shadow: 0px 2px 1px 0px rgba(0,0,0,0.25);
    -moz-box-shadow: 0px 2px 1px 0px rgba(0,0,0,0.25);
    box-shadow: 0px 2px 1px 0px rgba(0,0,0,0.25);
    width: 66px;
	position: relative;
}
#overlay ul{
	margin-left: 25px;
}
#overlay ul.traffic-list{
	margin-left: 0px;
}
#overlay ul.traffic-list span{
	/* display:none; */
}
#overlay ul li{
	margin-bottom: 5px;
}

/*
 * 
 * MARKER CONTAINTER
 */
.garage-container{
	
}
.garage-container h3, .page-container h3{
	margin: 15px 0 5px 0;
    color: #0092c5;
}
.garage-container h4, .page-container h4{
	margin: 15px 0 5px 0;
}
.garage-container .traffic-list li{
	list-style-type: none;
}
.garage-container .traffic-list li .custom-icon{
	padding-right: 5px;
	color: #0092c5;
}
.tab-indent{
	display: inline-block;
	width: 125px;
}
/*
 * 
 * ICONS
 */
.icon-payment:before {
    content: "\f283";
}
.icon-credit_card:before {
    content: "\f283";
}
.icon-maestro:before {
    content: "\f1f1";
}
.icon-cash:before {
    content: "\f0d6";
}
.icon-subway:before {
    content: "\f239";
}
.icon-tram:before {
    content: "\f238";
}
.icon-bus:before {
    content: "\f207";
}
.icon-train:before {
    content: "\f238";
}
.icon-woman:before {
    content: "\f182";
}
.icon-motorcycle:before {
    content: "\f21c";
}
.icon-disabled:before {
    content: "\f193";
}
.icon-battery:before {
    content: "\f243";
}
.icon-parkride {
	background: transparent url(/images/park_ride.png) no-repeat;
	background-size: contain;
	border: 0 !important;
    height: 15px !important;
    width: 10px;
    vertical-align: middle;
}
.icon-clock:before {
    content: "\f017";
}
.icon-credit_card, .icon-clock,.icon-bus, .icon-tram, .icon-subway, .icon-cash, .icon-maestro, .icon-w, .icon-b, .icon-k, .icon-noe, .icon-ooe, .icon-sa, 
.icon-st, .icon-t, .icon-v, .icon-motorcycle,.icon-disabled, .icon-woman, .icon-train, .icon-battery{
	border: 0 !important;
}
.custom-icon{
	display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}
#states .custom-icon{
	font-family: "custom-icon" !important;
	padding-right: 5px;
    position: relative;
    display: inline-block;
    vertical-align: middle;
	height: 100%;
	max-height: 100%;
}
#states .custom-icon:before{
	max-height: 20px;
	display:block;
	width: 13px;
	height: 20px;
	vertical-align: middle;

}#states label{
	transition: all 0.2s ease-in-out;
}
#states label:hover{
	color: #0092c5;
}
.icon-w:before{
	/* content: '\6a'; */
	content: ' ';
	background: transparent url('../../images/wappen/wien.png') no-repeat top left;
	background-size:contain;
}
.icon-b:before{
	/* content: '\62'; */
	content: ' ';
	background: transparent url('../../images/wappen/burgenland.png') no-repeat top left;
	background-size:contain;
}
.icon-k:before{
	/* content: '\63'; */
	content: ' ';
	background: transparent url('../../images/wappen/kaernten.png') no-repeat top left;
	background-size:contain;
}
.icon-noe:before{
	/* content: '\64'; */
	content: ' ';
	background: transparent url('../../images/wappen/noe.png') no-repeat top left;
	background-size:contain;
}
.icon-ooe:before{
	/* content: '\65'; */
	content: ' ';
	background: transparent url('../../images/wappen/ooe.png') no-repeat top left;
	background-size:contain;
}
.icon-sa:before{
	/* content: '\66'; */
	content: ' ';
	background: transparent url('../../images/wappen/sbg.png') no-repeat top left;
	background-size:contain;
}
.icon-st:before{
	/* content: '\67'; */
	content: ' ';
	background: transparent url('../../images/wappen/stmk.png') no-repeat top left;
	background-size:contain;
}
.icon-t:before{
	/* content: '\68'; */
	content: ' ';
	background: transparent url('../../images/wappen/tirol.png') no-repeat top left;
	background-size:contain;
}
.icon-v:before{
	/* content: '\69'; */
	content: ' ';
	background: transparent url('../../images/wappen/vbg.png') no-repeat top left;
	background-size:contain;
}
.mobile{
	display: none;
}
.mobile-state-toggle.fa-filter{
	width: 35px;
	font-size: 6px;
	padding: 10px 10px 10px 10px !important;
	height: 13px;
	vertical-align: middle;
}
.mobile-state-toggle.fa-filter:before{
	content: '\61';
	font-family: "custom-icon" !important;
}
#showError{
    z-index: 999;
    top: 50%;
    padding: 20px;
    border-color: #db0303;
    font-size: 12px;
left: 0;
    right: 0;
    width: 50%;
    margin-left: auto;
    margin-right: auto;
line-height: 30px;
}
#showError i {
color: #db0303;
font-size: 30px;
display: block;
float: left;
padding-right: 20px;
}

#first-overlay{
	background: #0092c5;
	position: absolute;
	width: 100vw;
	height: 100vh;
	z-index: 999;
	transition: all .2s ease-in-out;
	top: 0;
	background: #0092c5 url('../../images/parken_at_startseite.jpg') no-repeat bottom left;
	/*background: #0092c5;*/
	background-size: cover;
}
#first-overlay .wkologo{
	position: absolute;
	bottom: 50px;
	left: 50px;
}
#first-overlay .infofolder{
	position: absolute;
	bottom: 50px;
	right: 50px;
	max-width: 250px;
}
#first-overlay .infofolder img{
width: 100%;
height: auto;
}

#search.first-load{
	/* top: 200px; */
	z-index: 99999;
	transition: all .2s ease-in-out;
	
}
#header.first-load{
	z-index: 999999;
	/* margin: auto;
	left: 0;
	right: 0; */
	transition: all .2s ease-in-out;
}
#header.first-load #logo{
	transition: all .2s ease-in-out;
	/* margin-top: 106px;
    margin-left: -100%;
    position: relative; */
}	
#float-container.first-load{
	top: 100px;
	left: 0;
	right: 0;
	margin: auto;
}
#float-container.first-load #states{
	top: 0;
    z-index: 9999;
    margin: auto;
    left: 0;
    right: 0;
	position: absolute;
}
.pac-container{
	z-index: 99999;
}
#appstores{
	z-index: 4;
    right: 50px;
	position: absolute;
    bottom: 10px;
	max-width:150px;
}
#appstores img{
	max-width: 100%;
}
#appstores .apple-itunes{
	text-align: center;
	width: 100%;
    	display: inline-block;
}
#appstores .apple-itunes img{
	width: 89%;
}
@media only screen and (min-device-width : 480px) and (max-device-height : 800px){
		.filter-container{
			display: none;
		}
}
/*
*                                  SMARTPHONES
*******************************************************/
@media only screen and (min-device-width : 320px) and (max-device-width : 830px){
	#appstores{
		z-index: 4;
		right: auto;
		left: 10px;
		position: absolute;
		bottom: 0px;
		max-width:100px;
	}
	.mobile{
		display: block;
	}
	body{
		height: 100vh;
		overflow: hidden:
	}
	#map{
		top: 85px;
		height: calc( 100vh - 85px );
	}
	#header{
		width: calc( 100vw - 10px );
		top: 0;
		left:0;
		box-shadow: none;
		border-radius: 0;
		padding: 0 0 0 10px;
	}
	#logop{
		max-height: 30px;
		width: auto;
		padding-top: 10px;
	}
	#logo{
		margin-left: 35px;
		max-height: 30px;
		margin-top: 0;
		padding-top: 10px;
	}
	#search{
		z-index: 999;
	}
	.mobile-nav{
		display: inline-block;
		padding: 0 5px;
		float: right;
		font-size: 24px;
	}
	.mobile-nav i{
		display: inline-block;
		padding: 10px 10px;
		cursor: pointer;
	}
	.mobile-nav i.active{
		color: #0092c5;
	}
	.mobile-nav-toggle{
	}
	.mobile-filter-toggle{
	}
	.mobile-state-toggle.fa-filter{
		font-size: xx-small;
		padding: 0 20px 0 0;
		height: 23px;
		vertical-align: middle;
	}
	.mobile-state-toggle.fa-filter:before{
		content: '\61';
		font-family: "custom-icon";
	}
	.custom-icon input{
		display: none;
	}
	#search{
		top: 50px;
		width: calc( 100vw - 20px );
		padding: 5px 10px;
		border-radius:0;
		border-top: 0;
		background: #0092c5;
		
	}
	#search-input, .mapboxgl-ctrl-geocoder input{
		padding:5px;
		padding-left: 35px;
		margin-left: 0;
		max-width: 60vw;
		background-position: 10px;
		display: inline-block;
	}
	#search-input,#search-input:focus, #search-input:active, #search-input:focus, .mapboxgl-ctrl-geocoder input:focus{
		background-size: contain;
		border: 3px solid #fff;
		background-position: 10px;
	}

	.btn-location{
		width: 25px;
		height: 23px;
		background: transparent url(/images/icon-location.png) no-repeat center center;
		background-size: contain;
		/*display: inline-block;*/
		display:none;
		padding: 4px;
		float: right;
		vertical-align: middle;
		margin-right: 10px;
	}
.mapboxgl-ctrl-geocoder{
   /* max-width: calc( 100% - 60px ) !important;*/
}
.mapboxgl-ctrl-geocoder--input{
height:40px;
}
#search-input-div {
    min-height: 40px;
    display: inline-block;
}
#float-container.first-load #states{
	top: auto;
    z-index: 9999;
    margin: auto;
    left: auto;
    right: 0;
	position: static;
}
	.header, #legend{
		display: none !important;
	}
	#nav, #states, #filter, #float-container{
		box-shadow: none;
		border-top: 0;
		overflow: hidden;
		position: static;
		margin-top: 0;
		z-index: 2;
	}
	.first-load_ #filter, .first-load_ #states{
		z-index: 9999;
	}
	.filter-container{
		top: 85px;
		right: -110vw;
		left: auto;
		transition: all 0.2s ease-in-out;
		position: absolute;
		z-index: 3;
		background: #fff;
		-webkit-box-shadow: 0px 2px 1px 0px rgba(0,0,0,0.25);
		-moz-box-shadow: 0px 2px 1px 0px rgba(0,0,0,0.25);
		box-shadow: 0px 2px 1px 0px rgba(0,0,0,0.25);
		-webkit-border-radius: 0px;
		-moz-border-radius: 0px;
		border-radius: 0px;
		font-size: 14px;
		height: calc( 100vh - 85px );
	}
	.filter-container li label{
		padding: 5px 0;
	}
	#nav .filter-container{
		z-index: 999999999;
		width: 60vw;
		left: -110vw;
		top: 0;
		border-radius: 0;
		height: 100vh;
	}#nav .filter-container.active{
		left: 0;
	}
	.sidebar-header{
		padding: 7px 15px;
		background: #0092c5;
		color: #fff;
		font-weight: bold;
	}
	.menu-container{
		padding: 0;
	}
	.filter-container li, #nav .filter-container li{
		font-size: 16px;	
		border-bottom: 1px solid #efefef;
		padding: 5px 15px;

	}
	#nav .filter-container li{
		padding: 10px 25px;

	}
	.filter-container li span {
		padding-right: 15px;
	}
	#nav .filter-container i,  .filter-container i{
		font-size: 16px;
	}
	.filter-container.active{
		visibility:visible;
		opacity: 1;
		right: 0;
		display: block;
		z-index: 9999999;	
	}
	 .loading #search{
	 opacity: 1;
	 visibility: visible;
 }
	/* OVERLAY */
	#overlay{
		transition: all 0.2s ease-in-out;
	}
	#overlay.overlay-page, #overlay.overlay-garage{
		top: 60px;
		width: calc( 100vw - 20px );
		left: 0;
		right: 0;
		height: calc( 100vh - 75px );
		padding: 10px;
		-webkit-border-radius: 0px;
		-moz-border-radius: 0px;
		border-radius: 0px;
		border-top: 1px solid #0092c5;
	}
	#overlay-close{
		font-size: 20px;
	}
	#overlay.hidden{
		left: -110vw !important;
		transition: all 0.2s ease-in-out;

	}
	#myloc img{
		max-width: 100%;
	}
	#search.first-load{
		top: 50px;
		z-index: 99999999;
		transition: all .2s ease-in-out;
		
	}
	#header.first-load{
		z-index: 999999;
		margin: auto;
		left: 0;
		right: auto;
		transition: all .2s ease-in-out;
	}
	#header.first-load #logo{
		transition: all .2s ease-in-out;
		margin-top: 0;
		margin-left: 35px;
		position: relative;
	}
.garagenfolder-slogan{
    margin-top: 45px !important;
}
}
.pac-container:after{
display: none !important;
}
.marker {
  background: url(../../images/marker-default.png) center center no-repeat;
  background-size: contain;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
}
.mapboxgl-popup-close-button{
top:5px !important;
right:5px !important;
font-weight:bold;
font-size:15px;
}
#search-input-div{
min-height:40px;
width:100%;
}
.mapboxgl-ctrl-geocoder--icon-search{
display:none !important;
}
.garagenfolder-slogan{
    position: absolute;
    left: 0;
    right: 0;
    width: 200px;
    display: inline-block;
    margin: auto;
padding-top: 10px;
}
.garagenfolder-slogan a{
	text-decoration: none;
	font-weight: bold;
	text-shadow: 1px 1px 1px #fff;
	transition: color .5s ease, text-shadow .5s ease;
}
.overlay .garagenfolder-slogan a{
color: #fff;
    	text-shadow: 1px 1px 1px #404040;
	transition: color .5s ease, text-shadow .5s ease;
}