/*!
Theme Name: TunnelsNL
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: LICENSE 
Text Domain: tunnelsnl
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

/*--------------------------------------------------------------
## Custom post type 'Tunnel'
--------------------------------------------------------------*/
#renovatiefasen{
	height:40px;
	display:none;
}
.renovatiefase-icon{
	float:left;
}
.renovatiefase-text{
	float: left;
}
.legenda .slider{
	background: white;
	border: 1px solid #ccc;
}
.legenda .slider.aanbouw{
	border:  1px solid #9bbe32;
}
.legenda .slider.renovatie-gepland{
	border:  1px solid rgb(248, 160, 26);
}
.legenda .slider:before{
	left: 1px !important;
	bottom: 1px !important;
}

.legenda input:checked + .slider.bestaand{
	background-color: #eee;
}
.legenda input:checked + .slider.aanbouw{
	background-color:  rgba(155, 189, 50, 0.3);
}
.legenda input:checked + .slider.renovatie-gepland{
	background-color:  rgba(248, 160, 26,0.3);
}


.tunnelBox{
	width:100%;
	table-layout: fixed; 
	height:30px;
	padding-right:10px;
}

.tunnelHeaderBox{
	width:270px;
	vertical-align: middle;
	position: relative;
	z-index:10;
}

.renovatiestatus{
	padding:0px;
	margin:-13px 0px 0px 0px;
	height: 20px;
	vertical-align: middle;
	width:90%;
	float:right;
	clear:both;
	position: relative;
	z-index:1;
}
.renovatieFasenLegenda{
	position: fixed;
	right:430px;
	top:170px;
	left:359px;
	height:30px;
	line-height: 30px;
	font-weight: bold;
/*	background-image: linear-gradient(to right, white, white, rgba(248, 160, 26,0.5), rgba(248, 160, 26,0.9), rgba(248, 160, 26,0.5), rgba(155, 189, 50, 0.5), white);
*/
	background-image: linear-gradient(to right, white, rgba(155, 189, 50,0.3), white);
}
.renovatieFasenLegendaHeader{
	width:90%;
	float:right;
	text-align:center;
	clear:both;


}
.renovatieFasenLegendaItemBox{
	width:90%;
	float:right;
	height: 30px;
	line-height: 30px;
	background:white;
}
.renovatieFasenLegendaItem{
	text-align:right;
	width:24%;
	float:left;
}

#tunnelgrid{
    margin: 7px 0px 0px 0px !important;	
}

.tunnelHeaderBox .fas{
	float:left;
	margin-top:0px;
	font-size: 16px;
}

.renovatiestatus .renovatiestatusfase{
	height:5px;
	float:left;
	width:24%;
	padding:0px;
	margin:0px;
}
.renovatiestatusfaseEnd{
	height:5px;
	float:left;
	width:4%;
	padding:0px;
	margin:0px;
	background-image: linear-gradient(to right, #ccc, white);
}
.renovatie-gepland .renovatiestatusfaseEnd{
	background-image: linear-gradient(to right, rgb(248, 160, 26), white);
}
.aanbouw .renovatiestatusfaseEnd{
	background-image: linear-gradient(to right, rgba(155, 189, 50), white);
}

.legenditem .fas {
	font-size: 20px;
	margin: 0px 0px 0px 0px;
}
.legenditem .legendbox{
}
.hide{
	display: none;
}
.tunnelwebsite-filter .fas, .tunnelwebsite-filter .fab,  .tunnelwebsite-filter .far{
	font-size: 20px;
	margin: 2px 5px 0px 0px;
    line-height: 20px;
    vertical-align: middle;
	width:25px;
	text-align: center;
}
 .tunnelwebsite-filter img{
	font-size: 20px;
	margin: 2px 5px 0px 0px;
    line-height: 20px;
    vertical-align: middle;
	width:15px;
	text-align: center;
}
.legenditem .bestaand{
	color: #9bbd32 !important;
}
.legenditem .gepland{
	color: #00c1f4 !important;
}
.legenditem .renovatie-bezig{
	color: #f8a01a !important;
}
.legenditem .renovatie-afgerond{
	color: #ee529c !important;
}

/*
.tunnelwebsite-filter .bestaand{
	color: #ccc;
}
.tunnelwebsite-filter .aanbouw{
	color: #9bbe32;
}
.tunnelwebsite-filter .renovatie-gepland{
	color: rgb(248, 160, 26);
}
*/

.renovatiestatus-circle{
    min-width: 29px;
    height: 29px;
color:white;
    border-radius: 18px;
    margin-top:-13px;
    font-size: 17px;
    float:right;
}
.renovatiestatus-circle i{
    margin: 6px 0px 0px 6px;
    color:#fff;
}
.renovatieDate{
	font-size:14px;
}
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
	visibility: hidden;
  width: 80px;
  color: #000;
  text-align: center;
  border-radius: 6px;
  padding: 2px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -40px;
  font-size:12px;
}
.renovatiestatus-circle .jaartal{
	float:right;
	line-height: 27px;
	font-size: 14px;
	margin:0px 8px 0px 7px;
    text-align: center;
}
.inactive .renovatiestatus-circle{
	margin-right:11px;
}
.inactive .renovatiestatus-circle .jaartal{
    margin: 0px 11px 0px 5px !important;
}

.startontwerp{
}
.startrealisatie{
}
.opleveringrenovatie{
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
#tunnelwebsite-wrapper{
/*	max-width:1600px;
*/	background-color: white;
	margin: 0px auto;
	position: relative;
	z-index:10;
	position: fixed;
	bottom:0px;
	right:0px;
	left:0px;
	top:0px;
	-webkit-box-shadow: 3px 3px 5px 6px #ccc;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
	-moz-box-shadow:    3px 3px 5px 6px #ccc;  /* Firefox 3.5 - 3.6 */
	box-shadow:         0px 0px 15px 0px #ccc;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}
#footer-container{
	position:fixed;
	right:0px;
	left:0px;
	bottom:0px;
}
#footer{
	width:770px !important;
}
#tunnelwebsite-header{
	background-color: #000000;
	height:50px;
	width:100%;
}
#tunnelwebsite-header h1{
	line-height:50px;
	margin-left: 20px;
	color: #ffffff;
	font-family: "Georgia", serif;
	font-weight: bold;
}
.green-line{
	height:3px;
	background-color: #9bbe32;
	width:100%;
}
#tunnelwebsite-logo-container{
	width:100%;
}
#tunnelwebsite-logo-container img{
	float:right;
	margin-top: -34px;
	margin-right:15px;
}
.tunnelwebsite-disclaimer{
	margin:20px 227px 0px 20px;
	overflow:hidden;
}
.tunnelwebsite-disclaimer p{
	margin-bottom:15px !important;
}

.tunnelwebsite-content-wrapper{
	width:100%;
	display: table;
}

.filter-icon-sub{
	display: none;
}


.filterbox{
	float: left;
	margin: 0px 20px 0px 0px;
}

.filterbox .filterlabel{
	font-weight: bold;
	margin: 0px 0px 2px 0px;
}

.filterbox .checkbox{
}

.filterbox .checkbox input{
}
.tunnelwebsite-filter{
	overflow:hidden;
	margin:0px 0px 3px 0px;
	cursor: pointer;
}
.filter-activate{
	display: none;
}
/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
	min-height:20px;
	height: auto;
  padding: 1px 0px 0px 37px;
  cursor: pointer;
}


/* Hide default HTML checkbox */
.switch input {display:none;}

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

.slider:before {
  position: absolute;
  content: "";
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}
.tunnelwebsite-filters .bestaand:before{
	background-color:  #d9dadc;
}
.tunnelwebsite-filters .aanbouw:before{
	background-color:  #9bbe32;
}
.tunnelwebsite-filters .renovatie-gepland:before{
	background-color:  rgb(248, 160, 26);
}

.slider.bestaand:before{
	background-color:  #d9dadc;
}
.slider.aanbouw:before{
	background-color:  #9bbe32;
}
.slider.renovatie-gepland:before{
	background-color:  rgb(248, 160, 26);
}
input:checked + .slider {
  background-color: #9bbe32;
}

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

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

/* Rounded sliders */
.slider.round {
  border-radius: 20px;
	height:20px;
	width: 32px !important;
}

.slider.round:before {
  border-radius: 50%;
}


#infobox, #infobox a{
}

.above-tunnel-grid{
	margin: 0px 0px 0px 0px;
    width: 100%;
    clear: both;
    overflow: hidden;
}
.resetfilters{
	float:left;
	margin: 0px 0px 10px 20px;
}
.resetfilters button{
	margin: -3px 0px 0px 0px;
  background-color: #9bbe32;
  border-radius: 15px;
  color: #ffffff;
  padding: 5px 10px 5px 10px;
  font-weight: bold;
}
#tunnelcounter{
	margin-left:20px;
	margin-bottom:2px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	font-weight: bold;
	color: #333;
	font-size:150%;	
	float:left;
}
#legend{
	margin: 0px 0px 10px 20px;
	overflow: hidden;
	float:left;
}


#legend .legenditem{
	float: left;
	margin-right:20px;
	margin-bottom:5px;
}

#legend .legendbox{
	background-color: #000000;
	color: #000;
	width:20px;
	height: 20px;
	margin-top:0px;
	font-weight:bold;
	font-size:100%;
	float:left;
	margin-right:5px;
	border-radius: 50%;
	

}

#legend .legendlabel{
	color:#000000;
	font-size:100%;
	display:inline-block;
}

#tunnelmap{
			
	border: #9bbe32 solid 1px;
    margin: 0px 0px 16px 18px;
	border-radius: 15px;
	
}

/* fixes potential theme css conflict */
#tunnelmap img {
   max-width: inherit !important;
}

#scrollwindow{
	float:left;
	overflow:hidden;
}

#tunnelgrid{
	margin: 0px 0px 0px 0px;
	width:100%;
	/*left: 30%;*/
	
	/*temp
	margin: 0px 10px 0px 20px;*/
}
.tunnel-inner, .tunnel-inner * {
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.tunnel-inner{
	margin: 0px 10px 0px 0px;
	border-radius: 15px;
/*	border: 1px solid #9bbe32;
*/	padding: 2px 5px 2px 2px;
}

.tunnel{
	width:33.333%;
	margin: 0px 0px 0px 0px;
	border: none !important;
	cursor: pointer;
/*	background-color: rgba(155, 190, 50, 0.05);
*/}

.voorbereiding .far{
	margin-left:7px;
}
.tunnel-country-flag{
	float:left;
	width:19px;
	height:19px;
	margin: 0px 0px 0px 0px;
}

.bestaand .tunnel-country-flag{
	border: 3px solid #d9dadc;
	border-radius: 50%;
}

.renovatieFasenLegendaItem .fas{
	margin-left: 5px;
}
.jaartal{
	font-weight:  bold;
	font-size:  13px !important;
	margin-top: 1px !important;
}
.startvoorbereiding, .startontwerp, .startrealisatie, .opleveringrenovatie{
	cursor: pointer;
}

.renovatie-gepland .tunnel-country-flag, .renovatie-bezig .tunnel-country-flag{
	border: 3px solid rgb(248, 160, 26) !important;
	border-radius: 50%;
}

.aanbouw .tunnel-country-flag{
	border: 3px solid rgb(155, 189, 50) !important;
	border-radius: 50%;
}

.tunnel.bestaand .tunnel-inner:hover{
/*	background-color: rgba(187, 187, 187, 0.2);	
*/}
.tunnel.gepland .tunnel-inner:hover, .tunnel.aanbouw .tunnel-inner:hover, .tunnel.aanbesteding .tunnel-inner:hover{
/*	background-color: rgba(155, 190, 50, 0.2);	
*/}
.tunnel.renovatie-gepland .tunnel-inner:hover, .tunnel.renovatie-bezig .tunnel-inner:hover{
/*	background-color: rgba(255, 116, 55, 0.2);
*/}

.tunnel.bestaand.open .tunnel-inner{
/*	background-color: rgba(187, 187, 187, 0.1);	
*/}
.tunnel.gepland.open .tunnel-inner, .tunnel.aanbouw.open .tunnel-inner, .tunnel.aanbesteding.open .tunnel-inner, {
/*	background-color: rgba(155, 190, 50, 0.1);	
*/}
.tunnel.renovatie-gepland.open .tunnel-inner, .tunnel.renovatie-bezig.open .tunnel-inner{
	/*background-color: rgba(255, 116, 55, 0.1);*/
}
.filterStatus{
	display: none;
}
.tunnel-title{
    float: left;
    margin: -2px 0px 0px 6px;
    font-size: 110%;
	text-shadow: -2px 0 white, 0 2px white, 2px 0 white, 0 -2px white;
}
.tunnel.open .filterStatus{
}
.tunnel.open h1{
	font-weight:bold;
}
.tunnel .filterStatus{
	margin: 0px;
	width:20px;
	height: 20px;
	float:left;
	border-radius: 50%;
}
.tunnel.bestaand .filterStatus, #legend .legendbox.bestaand{
	background-color: #d9dadc;
}

.tunnel.gepland .filterStatus, .tunnel.aanbouw .filterStatus, .tunnel.aanbesteding .filterStatus, #legend .legendbox.gepland {
	background-color: #9bbe32;
}

.tunnel.renovatie-gepland .filterStatus, .tunnel.renovatie-bezig .filterStatus, #legend .legendbox.renovatie-bezig{
	background-color: #f8a01a;
}

.tunnel.bestaand .tunnel-inner, #legend .legendbox.bestaand{
/*	background-color: #d9dadc;
*/
	color: #000000;
/*	border: 1px solid #bbbbbb;
*/}

.tunnel.gepland .tunnel-inner, .tunnel.aanbouw .tunnel-inner, .tunnel.aanbesteding .tunnel-inner, #legend .legendbox.gepland{
/*	background-color: #9bbe32;
*/
	color: #000000;
/*	border: 1px solid #9bbe32;
*/}

.tunnel.renovatie-gepland .tunnel-inner, .tunnel.renovatie-bezig .tunnel-inner, #legend .legendbox.renovatie-bezig{
/*	background-color: #ff7437;
*/
	color: #000000;
/*	border: 1px solid #ff7437;
*/}

.tunnel .type{
	padding: 2px 5px 0px 5px;
	margin-right:10px;
	margin-bottom: 5px;
	display:inline-block;
	font-weight: bold;
	font-size:80%;
	float: left;
}

.tunnel .type#rijks{
	background-color: #fff;
}

.tunnel .type#niet-rijks{
	background-color: #fff;
}

.tunnel h1{
	margin: 1px 0px 0px 24px;
	padding: 0px;
	font-size:110%;
	font-weight:normal;
	clear: none;
}

.tunnel .tunneldata{
	display: none;
	margin: -2px 0px 15px 15px;;
	padding: 0px;
}

.tunnel .tunneldata td{
	font-size:80%;
	text-align: left;
	vertical-align: top;
	padding: 5px 0px;
	/*border-bottom: solid thin #000;*/
}

.tunnel .tunneldata td.label{
	font-weight:bold;
	padding-right:10px;
}

.tunnel .marker h2.infobox{
	display:none;
}
.tunnel.open .tunnel-title{
	font-weight: bold;
}

/* iPads (portrait) ----------- */
    
*, *::before, *::after {
}
html {
    width:100%;
    height: auto;
}
body {
    width:100%;
    height: auto;
}
.tunnelwebsite-disclaimer{
    margin: 15px 20px 10px 20px;
    overflow: initial; 
    width: auto !important;
}
.above-tunnel-grid{
	width:100%;
	overflow: hidden;
}
#tunnelcounter{
	clear:both;
	width:100%;
	margin: 5px 0px 10px 20px;
}
#legend .legenditem{
	padding-left:3px;
}
.tunnelwebsite-filters{
	margin: 10px 0px 0px -2px;
}
.filterbox{
	width:100%;
}
.filterlabel{
	margin: 0px 0px 0px 0px;
	color:#000000;
}
.resetfilters{
	margin: 5px 0px 10px 20px;
}
.legenditem{
	width:100%;
}
.tunnel{
	width:100%;
}
#tunnelmap{
    width: 400px;
    position: absolute;
    bottom: 16px;
    top: 170px;
    right: 15px;
    overflow: hidden !important;
}

#arrow-down {
  opacity: 1;
  -webkit-transition: all .5s ease-in 3s;
  transition: all .5s ease-in 3s;
}

#arrow-down {
  position: fixed;
  z-index:2;
  cursor: pointer;
  bottom: 50px;
  left: 50%;
  margin-left: -37px;
  display: block;
  width: 32px;
  height: 32px;
  border: 2px solid #a2bc4c;
  background:white;
  background-size: 14px auto;
  border-radius: 50%;
  z-index: 2;
  -webkit-animation: bounce 2s infinite 2s;
  animation: bounce 2s infinite 2s;
  -webkit-transition: all .2s ease-in;
  transition: all .2s ease-in;
}
#arrow-down.filters{
	left:10%;
}

#arrow-down:before {
    position: absolute;
    top: calc(50% - 8px);
    left: calc(50% - 6px);
    transform: rotate(-45deg);
    display: block;
    width: 12px;
    height: 12px;
    content: "";
    border: 2px solid #a2bc4c;
    border-width: 0px 0 2px 2px;
}

#arrow-up {
  opacity: 1;
  -webkit-transition: all .5s ease-in 3s;
  transition: all .5s ease-in 3s;
}

#arrow-up {
  position: fixed;
  z-index:2;
  top: 50px;
  left: 50%;
  margin-left: -37px;
  display: block;
  width: 32px;
  height: 32px;
  border: 2px solid #a2bc4c;
  background:white;
  background-size: 14px auto;
  border-radius: 50%;
  z-index: 2;
  -webkit-animation: bounce 2s infinite 2s;
  animation: bounce 2s infinite 2s;
  -webkit-transition: all .2s ease-in;
  transition: all .2s ease-in;
}
#arrow-up.filters{
	left:10%;
}
.scroll-arrows{
	display:none;
}

#arrow-up:before {
    position: absolute;
    cursor: pointer;
    top: calc(50% - 8px);
    left: calc(50% - 6px);
    transform: rotate(135deg);
    display: block;
    width: 12px;
    height: 12px;
    content: "";
    border: 2px solid #a2bc4c;
    border-width: 0px 0 2px 2px;
}
#gradient {
	display:none;
    position:fixed;
    z-index:1;
    right:0; bottom:0; left:0;
    height:200px;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjcwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
    background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 70%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(70%,rgba(255,255,255,1)));
    background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 70%);
    background: -o-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 70%);
    background: -ms-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 70%);
    background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 70%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );

}

@keyframes bounce {
  0%,
  100%,
  20%,
  50%,
  80% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  60% {
    -webkit-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    transform: translateY(-5px);
  }
}

.filter-icon-sub{
	display: block;
	margin: 3px 5px 0px 0px;
	float:left;
}
.filter-activate{
	display: none;
	margin: 0px 0px 0px 0px;
	overflow:hidden;
	padding: 10px 0px 10px 20px;	
	background-color: rgba(155, 190, 50, 0.2);
}
.filter-icon{
	float:left;
	margin: 0px 8px 0px 0px;
	max-width: 20px;
}
.filter-activate-text{
	font-weight:bold;
	font-size:120%;
}
/*#filtercontainer{
	margin: 0px 0px 10px 0px !important;
	width:300px; 
	display: table-cell;
	vertical-align: top;
}*/
#filtercontainer{
	position: fixed;
	top: 210px;
	left: 0px;
	bottom: 35px;
    width: 350px;
    overflow-y: scroll;
    overflow-x: hidden;
}
.filterbox{
/*	background-color: rgba(155, 190, 50, 0.2);
*/	padding: 10px 0px 0px 20px;	
}
.filterbox:first-child{
	padding: 0px 0px 0px 20px;	
}
.filterbox:last-child{
	padding: 10px 0px 10px 20px;	
}
.slider{
	width: 32px !important;
}
.slider:before{
	background-color:#fff;
}
input:checked + .slider{
	background-color:#9bbe32;
}
.filterbox-wrapper{
}
/*#results{
	padding: 0px 20px 0px 20px;
	display: table-cell;
	vertical-align: top;
}*/
#results{
	position: fixed;
	right:430px;
	bottom:35px;
	top:230px;
	left:359px;
    overflow-y: scroll;
    overflow-x: hidden;
}
/*#tunnelmap-container{
	margin: 0px;
	padding: 5px 20px 20px 20px;
	width:400px;
	height:500px;
	display: table-cell;
	vertical-align: top;
}*/
#tunnelmap-container{
	margin: 0px;
	padding: 5px 20px 20px 20px;
	width:400px;
	top: 170px;
	bottom:0px;
	right: 0px;
	position: fixed;
}
.tunnel-inner{
	margin: 0px 0px 0px 0px;
/*	overflow: hidden;
*/}
.tunnel-inner #tunnelmap-container{
	padding: 5px 10px 10px 10px;
}

.startvoorbereiding{
	margin-right: -10px;
}

@media only screen and (min-device-width : 1px) and (max-device-width : 767px) {
	#tunnelmap{
		position: relative;
		top:  initial;
		right:  initial;
		left:  initial;
		bottom:  initial;
		width: 100%;
		height: 450px;
		margin: 10px 0px 0px 0px;
	}
	#filtercontainer{
		position: relative;
		top: initial;
		bottom:  initial;
	}
	#tunnelwebsite-wrapper{
		position:  relative;
	}
	#results{
		position: relative;
		top:  initial;
		right:  initial;
		bottom:  initial;
		left:  initial;
		width: 100%;
	}
	.renovatiestatus{
		width: 100%;
		margin:  14px 0px 0px -10px;
		float: left;
	}
	.tunnelBox{
		height:  50px;
	}
	.tunnel{
		margin:  0px 10px 0px 10px;
	}
	.renovatieFasenLegenda{
		position: relative;
		width: 100%;
		top:  initial;
		left:  initial;
		right:  initial;
		bottom:  initial;
	}
	.renovatieFasenLegendaHeader{
		width: 100%;
	}
	.renovatieFasenLegendaItemBox{
		width: 100%;
	}
	.startvoorbereiding{
		margin-right: -20px;
	}
	#footer{
		width: 100% !important;
	}
	#footer div{
		width: 16% !important;
	}
	#footer-container{
		position: relative;
	}
	.filter-activate{
		display: block;
	}
	#filtercontainer{
		width: 100%;
	}
	.filterbox-wrapper{
		display: none;
	}
	.resetfilters{
		margin: 15px 0px 10px 15px;
	}
	.tunnelwebsite-filters{
		display: none;
	}
	.filterbox{
		background-color: rgba(155, 190, 50, 0.2);
	}
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
    #search-main{
        width:150px !important;
    }
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
	#tunnelmap{
	    width: 320px;
	    position: fixed !important;
	    bottom: 16px;
	    left: 0px;
	    top: initial !important;
	    height: 328px;
	    right: 15px;
	    overflow: hidden !important;
	}
	#filtercontainer{
		position: fixed;
	    top: 210px;
	    left: 0px;
	    bottom: 360px;
	    width: 330px;
	}
	.renovatieFasenLegenda{
		right: initial !important;
	}
	#results{
		right: 0px !important;
	}
	.tunnelBox{
		height:  50px;
	}
	.renovatiestatus{
		width: 100%;
		margin:  14px 0px 0px -10px;
		float: left;
	}
	.renovatieFasenLegendaHeader{
		float: left;
		width: 100% !important;
	}
	.renovatieFasenLegendaItemBox{
		width: 100%;

	}
	.startontwerp{
	}
	.startrealisatie{
	}
	.opleveringrenovatie{
	}
	.startvoorbereiding{
	}
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
	#filtercontainer{
		width: 300px;
	}
	.renovatieFasenLegenda{
		right: 320px;
		left: 300px;
	}
	#results{
		right: 320px;
		left: 300px;
	}
	#tunnelmap{
		width: 300px;
	}
	.tunnelBox{
		height:  50px;
	}
	.renovatiestatus{
		width: 100%;
		margin:  14px 0px 0px -10px;
		float: left;
	}
	.renovatieFasenLegendaHeader{
		float: left;
		width: 100% !important;
	}
	.renovatieFasenLegendaItemBox{
		width: 100%;

	}
	.startvoorbereiding{
	}
	.startontwerp{
	}
	.startrealisatie{
	}
	.opleveringrenovatie{
	}

}

.search-breadcrumbs {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;
}

.search-breadcrumb__links {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;
}

.search-breadcrumbs a {
	font-style: italic;
	font-size: 11px;
	line-height: 1.5em;
	font-weight: 400;
	display: flex;
}

.search-breadcrumbs a::after {
	content: ' > ';
	text-decoration: none !important;
	display: block;
	margin: 0 6px;
}