/* switch to local version of Google fonts: pt-sans-regular - latin */
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/pt-sans-v17-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../static/fonts/pt-sans-v17-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../static/fonts/pt-sans-v17-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../static/fonts/pt-sans-v17-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../static/fonts/pt-sans-v17-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../static/fonts/pt-sans-v17-latin-regular.svg#PTSans') format('svg'); /* Legacy iOS */
}
/* pt-sans-700 - latin */
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 700;
  src: url('./fonts/pt-sans-v17-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../static/fonts/pt-sans-v17-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../static/fonts/pt-sans-v17-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../static/fonts/pt-sans-v17-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../static/fonts/pt-sans-v17-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../static/fonts/pt-sans-v17-latin-700.svg#PTSans') format('svg'); /* Legacy iOS */
}


@font-face {
	font-family: NiveauGrotesk;
	font-weight: normal;
	font-style: normal;
	src: url( ../documents/fonts/NiveauGroteskRegular.woff );
}

@font-face {
	font-family: NiveauGrotesk;
	font-weight: bold;
	font-style: normal;
	src: url( ../documents/fonts/NiveauGroteskBold.woff );
}

@font-face {
	font-family: NiveauGrotesk;
	font-weight: normal;
	font-style: italic;
	src: url( ../documents/fonts/NiveauGroteskRegular-Italic.woff );
}

@font-face {
	font-family: NiveauGrotesk;
	font-weight: bold;
	font-style: italic;
	src: url( ../documents/fonts/NiveauGroteskBold-Italic.woff );
}

#center_content {
	width: 980px;
	height: 789.233px;
	margin: 0 auto; position:relative;
	padding-right: 30px;
	padding-left: 30px;
}



.ifg_footer_background { background: #95bee1; }

.ifg_validation_background { background: rgba(159, 200, 235, .5);}

.ifg_main_menu_background { background: #283853;}

.ifg_red_text { color: #c60011;}

.ifg_red_background { background: #c60011;}



#consumer_form {

    width: 95%;
    margin: auto;
}

.tou_link {
	color:#C60011;
}

.tou_link:hover {
	cursor:pointer;
	text-decoration: underline;
	color:#C60011;
}

a:hover {
	cursor:pointer;
}



.footer {
	background:#95bee1;
	padding-left:0;
	clear:both;
	height: 37px;
	border-bottom: 3px solid #e10f05;
	position:relative;
}
.footer_wrapper {
	width: 980px;
	margin: 0 auto;
	position:relative;
	padding-right: 30px;
	padding-left: 30px;
}
.menu_footer li {
	float:left;
	margin-right: 8px;
	/* font-size: 140%; */
	margin-top: 0px;
	list-style-type: none; /* added */
	font-size: 1em; /* added */
}
.menu_footer li.first {
	padding-right: 10px;
}
.menu_footer li a {
	display: inline-block;
	color: #283853;
	padding: 9px 15px 5px;
	border-right: 1px solid #283853;
	line-height: 50%;
}
.menu_footer li a.current {
	color: #fff;
}
.menu_footer li.last a {
	border-right-style: none;
}


.wrapper {
	margin: 0 auto;
}

* {
		font-family: NiveauGrotesk,PT Sans, Verdana;
		font-size: 1em;
}

h1 {
	font: 20px/34px NiveauGrotesk,'PT Sans', sans-serif;
	font-style: normal;
	margin-bottom: 15px;
	letter-spacing: -0.5px;
}

h1 .mobile {
	font: 20px/34px NiveauGrotesk,'PT Sans', sans-serif;
	font-style: normal;
	margin-bottom: 15px;
	letter-spacing: -0.5px;
	font-size: 30px;
}

h1 strong {
	font-family: NiveauGrotesk, 'PT Sans', sans-serif;
}

h2 {
	font-weight: 700;
	color: #283853;
	font-size: 16px;
	margin-top: 10px;
	margin-bottom: 10px;
}
h3 {
	font-weight: 700;
	margin-top: 10px;
	font-size: 14px;
}

label { font-weight: normal; }

table#logintable td {
	padding: 6px;
	background: rgba(159, 200, 235, .5);
}

.login_button {
	border: 0;
	width: 34px;
	height: 34px;
	background: url(../images/navigate_check.png) 0 0 no-repeat;
	background-size: 33px;
	cursor:pointer;
/*
	float: right;
	margin-right: 20px;
	margin-top: 19px;
*/
}

table {
	background: rgba( 255, 255, 255, .9);
}

.pdf_link {
	background: url(../static/ifg/images/pdficon_large.png) left top no-repeat;
	width: 31px;
	height: 32px;
	display: inline-block;
}

.pdf_linkmobile {
	background: url(../static/ifg/images/pdficon_large.png) left top no-repeat;
	width: 50px;
	height: 50px;
	display: inline-block;
}


/****************************************************************************************************************************************************************************************
 * new styles with responsive design support 
 *****************************************************************************************************************************************************************************************/

	#privacy { font: NiveauGrotesk; font-size: 1.0em; }
	#privacy h1 { font: NiveauGrotesk; font-size: 1.7em; color: #c60011; line-height: 1.25;}
	#privacy h2 { font: NiveauGrotesk; font-size: 1.5em; color: black; font-weight: normal;}
	#privacy h3 { font: NiveauGrotesk; font-size: 1.0em; color: black; font-weight: bold;}



.desktop { display: block}
.mobile { display: none}

	#vorgarea {
		margin-left: 20px;
		width: calc(100% - 20px);
	}


#markers { 
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
	 }

#page_area {
/*	width: 100%;
	float: clear;
	padding: 0px;
	background: url( ../static/ifg/images/map_login.jpg) no-repeat right top;
	background-size: 100%; 
overflow:hidden;
position: relative;
*/
	background: url(../static/ifg/images/map_login.jpg) no-repeat;
/*	position: relative;*/
	/*overflow: hidden;*/
	/*height: 6px;*/
/*	min-height: 608px;*/
	margin-top: -2px;

}

/* the area on the start page with blue boxes for login and notifications */
#title_page_main_area_container {
	height: auto;
	width: 40%;
	padding: 0px;
}

#title_page_main_area {
	width: 100%;
	padding-left: 30px;
	padding-right: 30px;
	padding-top: 5px;
	font-size: 1.2em;
}

.title_page_h1 {
	margin-top: 0px;
	padding-top: 0px;
}

#mobile_spacecount {
	display: none;
}

#mobile_footer {
	display: none;
}

#invoices {
	width: calc( 100% - 20px );
	margin-left: auto;
	margin-right: auto;
}

/* the blue boxes */
.roundboxed {
	background: rgba(159, 200, 235, .5);
	border: none;
	border-radius: 3px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.box_content {
	padding: 5px;
}

.mobile_spacecount_table {
	background-color:rgba(0, 0, 0, 0);
}

.parker_table {
	background-color:rgba(0, 0, 0, 0);
	padding-left: 5px;
	padding-right: 5px;
	width: 100%;
}

.parker_label {
	color: gray;
	width: 36%;
}

.parker_data {
	color: black;
	width: 64%;
}

.parker_title {
	font-size: 1.2em;
	font-weight: bold;
}
.parker_subtitle {
	font-size: 1.0em;
	color: gray;
	padding-bottom: 10px;
}

.header_image_ifg {
	float: left;
	width: 20%;
	padding-top: 20px;
}

.header_image_parkin {
	float: right;
	width: 15%;
	padding-top: 25px;
	
}


#temp {
	background-color: yellow;
}

	#map {
		background: url( ./static/ifg/images/map_login.jpg) no-repeat center;
		min-height: 600px;
		max-width: 100%;
	}


@media only screen and (max-device-width: 800px) and (orientation: landscape) {
	#temp { background-color: lightgreen;}
}


#portraitmode { display:none; }
#landscapemode { display:none; }

#header_logos {

	margin-left: 20px;
	margin-right: 20px;
}

#header_logos::after {
	clear:both;
	display:table;
	content:"";
}


#csszero { visibility: hidden;}
#css1 { visibility: hidden;}
#css2 { visibility: hidden;}
#css3 { visibility: hidden;}
#css4 { visibility: hidden;}
#css5 { visibility: hidden;}


#fullpage {

 height:100%;
 width: 100%; 
}

/*
 *  MOBILE DEVICE IN LANDSCAPE MODE
 */
 
@media only screen  and (max-device-aspect-ratio: 1/1)  and (orientation: landscape) {

	/* #1 */
	#css1 { visibility: visible;}
	#temp { background-color: green; }
}


@media only screen and (orientation: portrait) {

	/* #4 */
	#css4 { visibility: visible;}
	#temp { background-color: red; }
	#markers { display: none }
	
}

@media only screen and (orientation: landscape) {
	#desktop_footer { display: block; width:100%; position:relative; }
	#mobile_footer { display: none; }
	
	.invoice_accordion {
		margin-left: 90px; 
		margin-right: 90px;
	}
	
	.parkflyer_note {
		width: 40%;
	}
	
	#contract_form {

	    width: 75%;
	    margin: auto;
	}


}


/*
 *  MOBILE DEVICE IN PORTRAIT MODE
 */
@media only screen and (max-device-aspect-ratio: 1/1) and (orientation: portrait) {

	/* #2 */
	#css2 { visibility: visible;}
	#temp { background-color: orange; }
	
		#title_page_main_area_container {
		height: auto;
		width: 100%;
		min-width: 100%;
		padding: 0px;
	}
	
	#title_page_main_area {
		padding-left: 10px;
		padding-right: 10px;
		padding-top: 5px;
		min-width: 100%;
		
	}
	
	#mobile_spacecount {
		display: block;
		font-size: 0.8em;
	}
	
	#mobile_footer {
		position: relative;
		display: inherit;
		padding-left:10px;
		padding-right:10px;
		width: 100%;
	}
	
	#desktop_footer {
		display: none;
	}
	
	#portraitmode { display: block; }
	
	
	.roundboxed {
	}
	
	.header_image_ifg {
		float: left;
		width: 50%;
		padding-top: 20px;
		padding-left: 10px;
	}	

	.header_image_parkin {
		float: right;
		width: 35%;
		padding-top: 25px;
		padding-right: 10px;
	}
	
	#leftcontent {
		left: 5px;
		position: absolute;
		top: 20%;
		z-index: -1;
		background: url( ../static/ifg/images/map_login.jpg) no-repeat center;
		background-clip: content-box;
		max-width: 100%;
	}
	
	#vorgarea {
	        margin-left: 0px;
		left: 5px;
		top: 14%;
		position: absolute;
		width: calc(100% - 5px);
	}
	
	.invoice_accordion {
		margin-left: 10px; 
		margin-right: 10px;
	}
	
	.parkflyer_note {
		width: calc( 100% - 20px );
		margin-left: auto;
		margin-right: auto;
	}

	#contract_form {

	    width: calc( 100% - 20px);
	    margin: auto;
	}
	
	#markers {
		display:none;
	}

}


/*
 * IPAD PORTRAIT 
 */
@media only screen 
  and (min-device-aspect-ratio: 3/4)
  and (max-device-aspect-ratio: 1/1)
  and (orientation: portrait)
  and (-webkit-min-device-pixel-ratio: 2.0) {
  
  /* #5 */
  #css5 { visibility: visible;}
  #temp { background-color: blue }
  #markers { display: none }
  	.desktop { display: none}
	.mobile { display: block}

}

/*
 * IPAD LANDSCAPE 
 */
@media only screen 
  and (min-width: 1024px) 
  and (max-height: 1366px) 
  and (orientation: landscape)
  and (-webkit-min-device-pixel-ratio: 2) {
  
  /* #3 */
  #css3 { visibility: visible;}  
  #temp { background-color: gray }
}


@media only screen and (orientation: portrait) {

	#leftcontent {
		left: 10px;
		position: absolute;
		top: 20%;
		z-index: -1;
		background: url( ../static/ifg/images/map_login.jpg) no-repeat center;
		background-clip: content-box;
		max-width: 100%;
	}

	#markers { display: none }
	#header_logos {
		padding-left:0px;
		padding-right:0px;
		margin-left: 5px;
		margin-right: 5px;

	}
	#center_content {
		width: 100%;
		padding-right:0px;
		padding-left:0px;
		position: absolute;
		left:0;
		top:20%;
	}
	.desktop { display: none}
	.mobile { display: block}

	#privacy { font: NiveauGrotesk; font-size: 2.0em; }
	#privacy h1 { font: NiveauGrotesk; font-size: 1.7em; color: #c60011; line-height: 1.25;}
	#privacy h2 { font: NiveauGrotesk; font-size: 1.5em; color: black; font-weight: normal;}
	#privacy h3 { font: NiveauGrotesk; font-size: 1.0em; color: black; font-weight: normal;}
}


#menuplaceholder {
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: #95bee1;
	height: 45px;
}

#markers div.parking0{ position:absolute; background:url(../static/ifg/images/parkings-01.png) left top no-repeat; background-size: 70px; width:70px; height:42px; z-index:20;}
#markers div.parking1{ position:absolute; background:url(../static/ifg/images/parkings-02.png) left top no-repeat; background-size: 70px; width:70px; height:42px; z-index:20;}
#markers div.parking2{ position:absolute; background:url(../static/ifg/images/parkings-03.png) left top no-repeat; background-size: 70px; width:70px; height:42px; z-index:20;}
#markers div.parking3{ position:absolute; background:url(../static/ifg/images/parkings-04.png) left top no-repeat; background-size: 70px; width:70px; height:42px; z-index:20;}
#markers div.parking4{ position:absolute; background:url(../static/ifg/images/parkings-05.png) left top no-repeat; background-size: 70px; width:70px; height:42px; z-index:20;}
#markers div.parking5{ position:absolute; background:url(../static/ifg/images/parkings-06.png) left top no-repeat; background-size: 70px; width:70px; height:41px; z-index:20;}

.contentelmeMap{ display:none; padding: 8px 125px 5px 10px;}
.contentelmeMap p{ color:#000; font-size:0.9em/*140%*/; line-height:1.3;
	margin-top: 0;
	margin-bottom: 0;
}
.contentelmeMap p span{ color:#c60011; }

#markers div.parking0hover{ position:absolute; background:url(../static/ifg/images/parkings-07.png) left top no-repeat; background-size: 360px; width:360px; height:80px; z-index:21; margin-right: -30px;}
#markers div.parking1hover{ position:absolute; background:url(../static/ifg/images/parkings-08.png) left top no-repeat; background-size: 360px; width:360px; height:80px; z-index:21; margin-right: -30px;}
#markers div.parking2hover{ position:absolute; background:url(../static/ifg/images/parkings-09.png) left top no-repeat; background-size: 360px; width:360px; height:80px; z-index:21; margin-right: -30px;}
#markers div.parking3hover{ position:absolute; background:url(../static/ifg/images/parkings-10.png) left top no-repeat; background-size: 360px; width:360px; height:80px; z-index:21; margin-right: -30px;}
#markers div.parking4hover{ position:absolute; background:url(../static/ifg/images/parkings-11.png) left top no-repeat; background-size: 360px; width:360px; height:80px; z-index:21; margin-right: -30px;}
#markers div.parking5hover{ position:absolute; background:url(../static/ifg/images/parkings-12.png) left top no-repeat; background-size: 360px; width:360px; height:80px; z-index:21; margin-right: -30px;}

#markers div.parking0:hover{ position:absolute; background:url(../static/ifg/images/parkings-07.png) left top no-repeat; background-size: 360px; width:360px; height:80px; z-index:21; margin-right: -30px;}
#markers div.parking1:hover{ position:absolute; background:url(../static/ifg/images/parkings-08.png) left top no-repeat; background-size: 360px; width:360px; height:80px; z-index:21; margin-right: -30px;}
#markers div.parking2:hover{ position:absolute; background:url(../static/ifg/images/parkings-09.png) left top no-repeat; background-size: 360px; width:360px; height:80px; z-index:21; margin-right: -30px;}
#markers div.parking3:hover{ position:absolute; background:url(../static/ifg/images/parkings-10.png) left top no-repeat; background-size: 360px; width:360px; height:80px; z-index:21; margin-right: -30px;}
#markers div.parking4:hover{ position:absolute; background:url(../static/ifg/images/parkings-11.png) left top no-repeat; background-size: 360px; width:360px; height:80px; z-index:21; margin-right: -30px;}
#markers div.parking5:hover{ position:absolute; background:url(../static/ifg/images/parkings-12.png) left top no-repeat; background-size: 360px; width:360px; height:80px; z-index:21; margin-right: -30px;}

#welcome {
	padding-left:10px;
	padding-right:10px;
}

#mobile_footer a { font-size: 1.3em; }
.moblink { font: NiveauGrotesk; font-size: 1.1em; }

#desktop_notifications {
	width: 35%;
	padding-left:10px;
	padding-right:10px;

}

#mobile_notifications {
	font: NiveauGrotesk; font-size: 1.5em;
}