@media (min-width: 1000px) {
	.header-home-link, #location-list-tab, #filter-blank, #filter-toggle {
		display: none;
	}

	.responsive-form {
		display: none !important;
	}

	#filter-bar #certificates-filter {
		position: absolute;
		top: -5000px;
		left: -5000px;
	}
}

@media (max-width: 1000px) {
	.text-map-overview-intro, .user-info {
		display: none;
	}

	#header-container {
		position: absolute;
		overflow: hidden;
		width: 100%;
		top: 0px;
	}

	#header {
		background: white;
		height: 50px;
	}

	.header-home-link {
		display: block;
		height: 100%;
		width:275px;
		padding-left: 35px;
		margin: 0 auto;

		background-image: url('/images/vignet-responsive-logo.png');
		background-position-y: 10px;
		background-repeat: no-repeat;
		background-size: 28px;

		font-size: 22px;
		line-height: 50px;
		color: #737373 !important;
		text-decoration: none !important;
		text-align: center;
	}

	#page-container {
		margin: 0;
		padding: 0;
		width: 100%;
		background: none;
	}

	#page-body {
		border: 0;
		padding: 0;
		height: calc(100% - 50px);
		width: 100%;
		top: 50px;
		position: absolute;
	}

	#filter-blank {
		position: absolute;
		top: 0px;
		width: 100%;
		height: 50px;

		background-color: #eee;
	}

	#filter-bar {
		padding: 0 !important;
		padding-top: 50px !important;
		background: none !important;
		z-index: 1;
		height: calc(100% - 88px);
		margin-top: -50px;
		margin-bottom: 38px;
		transition: margin-top .5s ease-out, height .5s ease-out !important;
		overflow-y: scroll !important;
	}

	#filter-bar.closed {
		margin-bottom: 0;
		margin-top: 0px;
		overflow: hidden !important;
		height: 0px !important;
	}

	#filter-bar .form-field {
		display: block !important;
		margin: 10px 0 0 10px !important;
	}

	#filter-bar .id-search {
		position: absolute;
		top: 0px;
		width: calc(100% - 8px);
		margin: 6px 0 0 8px !important;
	}

	#filter-bar.closed .form-field {
		display: none !important;
	}

	#filter-bar.closed .id-search {
		display: inherit !important;
	}

	#filter-bar .id-search input {
		width: calc(100% - 100px) !important;
	}

	#filter-bar .default-form {
		display: none !important;
	}

	#filter-bar .type-html {
		font-weight: bold;
		color: #777;
	}

	#filter-bar .field-label {
		display: none;
	}

	#filter-bar .id-education-type, #filter-bar .id-so {
		display: inline-block !important;
	}

	#filter-bar .id-so {
		margin-left: 5px !important;
	}

	#filter-bar select {
		width: calc(100% - 10px) !important;
	}

	#filter-bar .id-so label {
		padding: 10px !important;
	}

	#reset-top {
		display:none;
	}

	#export-top {
		display: none;
	}

	#filter-toggle {
		display: block;
		left: auto;
		top: auto;

		position: absolute;
		top: 12px;
		right: 26px;
		width: 26px;
		height: 26px;

		background-image: url('/images/filter.png');

		cursor: pointer;
	}

	#location-list {
		border: 0;
		height: 50% !important;
		width: 100% !important;
		top: calc(50% - 150px) !important;
		left: 0px !important;
		transition: top .5s ease-out !important;
		font-size: 1em !important;
	}

	#location-list.closed {
		top: 90% !important;
	}

	#location-list .odd {
		background-color: #f2f2f2;
	}

	#location-list tr > th:nth-child(1) {
		width: 65% !important;
	}

	#location-list tr > td:nth-child(1) {
		width: 65% !important;
	}

	#location-list .location td {
		border: 0;
	}

	#location-list .locations {
		height: calc(100% - 70px) !important;
	}

	#location-list-tab {
		background-color: #f2f2f2;
		border-top: 1px solid darkgray;
		position: absolute;
		width: 100%;
		padding: 10px;
		height: 30px;
		bottom: 100px;
	}

	#toggle-location-list {
		display: block;
		padding: 0 20px;
		font-size: 1.7em;
		color: #737373 !important;
		text-decoration: none !important;
		text-align: center;
		line-height: 30px;
	}

	#reset-bottom {
		float: left;
		width: 26px;
		height: 26px;
		margin: 2px 0 0 2px;

		cursor: pointer;

		background-image: url('/images/reset.png');
		background-repeat: no-repeat;
	}

	#map-block {
		margin: 0;
	}

	#map-container {
		border: 0 !important;
	}

	#main-content, #main-content-top, #map-block,
	#map-container, #google-map {
		height: 100% !important;
	}

	.block-content {
		height: calc(100% + 50px) !important
	}
	#top-header, #main-menu, #main-header-container,
	#site-id, #reset-container, #education-type-counts,
	#footer-container, #certificates-filter, #certificates-filter .info  {
		display: none;
	}

	#certificates-filter {
		display: block;
		margin: 10px 0 0 10px !important;
	}

	#certificates-filter .education-type-title {
		margin-bottom: 10px;
	}

	#certificates-filter .certificate {
		width: 80% !important;
	}

	#certificates-filter .certificate input {
		visibility: visible !important;
	 	position: inherit !important;
 		top: auto !important;
	 	left: auto !important;
	}

	#certificates-filter .options {
		margin: 5px 0 !important;
	}

	.button.responsive-form {
		display: block;
		position: absolute;
		bottom: 0px;
		background: #f2f2f2;
		padding: 10px 0;
		width: 100%;
		text-align: center;
		font-size: 16px;
		cursor: pointer;
	}

	.button.responsive-form.closed {
		display: none;
	}

	.block-content > #certificates-filter {
		position: absolute;
		top: -5000px;
		left: -5000px;
	}

	#so-info.responsive-form {
		padding: 0 15px;
	}
}

#page-body {
	background-image: none;
}

#main-content {
	float: none;
}


/* Filter bar */

#filter-bar {
	overflow: hidden;
	padding: 15px;
	background-color: #EEE;
	position: relative;
}
#filter-bar .form-field {
	display: inline-block;
	margin: 0 10px 0 0;
}
#filter-bar .id-so {
	display: block;
	margin: 10px 0 0 564px;
}
#filter-bar input[type=text] {
	width: 235px;
	padding: 10px;
}
#filter-bar select {
	width: 200px;
	padding: 10px;
}
#filter-bar .id-education-type ul {
	display: inline-block;
}
#filter-bar .id-education-type li {
	display: inline-block;
	margin: 0 0 0 5px;
	padding: 0;
}
#filter-bar .id-or,
#filter-bar .id-education-type > label {
	font-weight: bold;
	color: #777;
}
#filter-bar .id-education-type li label,
#filter-bar .id-so label {
	display: inline-block;
	padding: 10px 20px;
	color: #fff;
	font-size: 15px;
	border-radius: 5px;
	cursor: pointer;
	background: #999999;
	transition: background-color .5s;
}
#filter-bar .id-education-type .checked label[for="radio-education-type-3"] { /* PO */
	background: #AD6E9C;
}
#filter-bar .id-education-type .checked label[for="radio-education-type-2"] { /* MBO */
	background: #81C237;
}
#filter-bar .id-education-type .checked label[for="radio-education-type-4"] { /* VO */
	background: #52ACDC;
}
#filter-bar .id-so.checked label {
	background: #F1C162;
}
#filter-bar input[type=radio],
#filter-bar input[type=checkbox] {
	visibility: hidden;
	position: absolute;
	top: -5000px;
	left: -5000px;
}


/* Map */

#map-container {
	position: relative;
	overflow: hidden;
	border: 1px solid #ccc;
}

#google-map {
	height: 648px;
}


/* Reset */

#reset-container {
	margin: 10px 0;
}

#reset-top {
	position: absolute;
	bottom: 15px;
	left: 15px;
}

#export-top {
	position: absolute;
	bottom: 15px;
	left: 80px;
}


/* Location list */

#location-list {
	position: absolute;
	top: 0;
	left: 0;
	background-color: #fff;
	border: 1px solid #eee;
	border-right: 18px solid #aaa;
	width: 330px;
	height: calc(100% - 2px);
	transition: left .5s ease-out, border-right-color .5s;
}
#location-list.po {
	border-right-color: #B375A1;
}
#location-list.vo {
	border-right-color: #52ACDC;
}
#location-list.mbo {
	border-right-color: #81C237
}
#location-list.so {
	border-right-color: #F1C162;
}
#location-list .arrow {
	position: absolute;
	top: 0;
	right: -18px;
	background: url('arrow-left.png') no-repeat center center;
	width: 18px;
	height: 100%;
	cursor: pointer;
	transition: background .25s;
}
#location-list .arrow:hover {
	background-color: #ccc;
}
#location-list.closed {
	left: -265px;
}
#location-list.closed .arrow {
	background-image: url('arrow-right.png');
}
#location-list .no-items {
	display: none;
}
#location-list #results {
	font-size: 12px;
	margin: 0;
	text-align: center;
	padding: 10px;
	border-bottom: 1px solid #eee;
}

#location-list tr > th:nth-child(1) {
	width: 181px;
}
#location-list tr > td:nth-child(1) {
	width: 210px;
}

#location-list th {
	padding: 10px;
	text-align: left;
	color: #777;
	border-bottom: 1px solid #eee;
}
#location-list table {
	border-spacing: 0;
	border-collapse: collapse;
	width: 100%;
}
#location-list .locations {
	overflow-x: hidden;
	overflow-y: auto;
	height: 578px;
}
#location-list .location {
	display: none;
	padding: 10px;
}
#location-list .location td {
	padding: 10px;
	border-bottom: 1px solid #eee;
	cursor: pointer;
	vertical-align: top;
}
#location-list .location.selected td {
	background-color: #f2f2f2;
}
#location-list .location.po:hover td {
	background: #B375A1;
}
#location-list .location.vo:hover td {
	background: #52ACDC;
}
#location-list .location.mbo:hover td {
	background: #81C237
}
#location-list .location.so:hover td {
	background: #F1C162;
}
#location-list .location .school-name {
	font-size: 13px;
	font-weight: normal;
}
#location-list .location .location-name {
	margin-top: 1px;
	font-size: 11px;
}


/* GM info window */

.gm-infowindow {
	display: block;
	width: 200px;
	font-family: Arial, sans-serif !important;
}
.gm-infowindow h3 {
	font-size: 16px !important;
	margin-bottom: 5px;
}
.gm-infowindow h4 {
	font-size: 12px !important;
	margin: 15px 0 5px;
	font-weight: normal;
	color: #777;
}
.gm-infowindow.po .school-name,
.gm-infowindow.po .education-type {
	color: #AD6E9C;
}
.gm-infowindow.vo .school-name,
.gm-infowindow.vo .education-type {
	color: #52ACDC;
}
.gm-infowindow.mbo .school-name,
.gm-infowindow.mbo .education-type {
	color: #81C237;
}
.gm-infowindow.so .school-name,
.gm-infowindow.so .education-type {
	color: #F1C162;
}
.gm-infowindow .website {
	margin: 10px 0;
	font-size: 14px;
}
.gm-infowindow .website a {
	text-decoration: underline;
}
.gm-infowindow .certificates ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.gm-infowindow .certificates li {
	margin: 0 0 10px;
	overflow: hidden;
}
.gm-infowindow .certificates li.with-icon {
	padding-left: 42px;
}
.gm-infowindow .certificates li .icon {
	float: left;
	margin-left: -42px;
}
.gm-infowindow .certificates .title {
	font-size: 14px;
}
.gm-infowindow .certificates .till {
	font-size: 11px;
}


/* Map mask */

#map-mask {
	position: absolute;
	width: 915px;
	height: 648px;
	bottom: 0;
	background-color: rgba(255, 255, 255, 0.8);
	line-height: 648px;
	display: none;
}
#map-mask .no-items {
	width: 400px;
	float: right;
	font-size: 14px;
	background-color: rgba(179, 117, 161, 0.7);
	margin-top: 410px !important;
	margin-right: 99px !important;
	border-radius: 5px;
	height: 28px;
	line-height: 28px;
	color: white;
}


/* SO info */

#so-info {
	display: none;
	margin: 15px 0 0;
}

/* Education type counts */

#education-type-counts {
	margin: 20px 0;
}
#education-type-counts h3 {
	color: #666;
}
#education-type-counts ul{
	list-style: none;
	margin: 0;
	padding: 0;
}
#education-type-counts li {
	margin: 0 0 10px;
	width: 250px;
	overflow: hidden;
	font-size: 18px;
}
#education-type-counts .title {
	float: left;
}
#education-type-counts .count {
	float: right;
	width: 55px;
	font-weight: bold;
}
#education-type-counts .education-type.po {
	color: #B375A1;
}
#education-type-counts .education-type.vo {
	color: #52ACDC;
}
#education-type-counts .education-type.mbo {
	color: #81C237
}


/* Certificates filter */

#certificates-filter {
	margin-top: 20px;
	position: relative;
}
#certificates-filter .info {
	margin: 0 0 15px;
}
#certificates-filter .options {
	margin: 15px 0;
}
#certificates-filter .options span {
	text-decoration: underline;
	cursor: pointer;
	font-size: 11px;
	margin-right: 10px;
}

#certificates-filter h2 {
	margin: 0 0 20px;
	font-size: 18px;
	width: 250px;
	overflow: hidden;
}
#certificates-filter h2 .title {
	font-weight: normal;
	float: left;
}
#certificates-filter h2 .count {
	float: right;
	width: 55px;
}
#certificates-filter.po h2,
#certificates-filter.po .count {
	color: #B375A1;
}
#certificates-filter.vo h2,
#certificates-filter.vo .count {
	color: #52ACDC;
}
#certificates-filter.mbo h2,
#certificates-filter.mbo .count {
	color: #81C237
}

#certificates-filter h3 {
	color: #666;
	margin: 0 0 10px;
	font-size: 13px;
}

#certificates-filter ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
#certificates-filter ul::after {
	content: " ";
	display: block;
	clear: both;
}
#certificates-filter li {
	box-sizing: border-box;
	width: 33.3333%;
	padding: 5px 0 5px 0;
}
#certificates-filter li * {
	vertical-align: middle;
}
#certificates-filter li input {
	margin: 0 5px 0 0;
}
#certificates-filter li .count {
	font-weight: bold;
	float: right;
	display: inline-block;
	width: 30px;
	font-size: 14px;
}
#certificates-filter .button {
	color: #fff;
	background: #555;
	padding: 10px 0;
	border-radius: 3px;
	margin: 20px 0 0;
	width: 200px;
	text-align: center;
	font-size: 16px;
	cursor: pointer;
}