/*-*-*-*- footer -*-*-*-*/
#footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	background-color: white;
	margin: 0;
	padding: 10px 5vw;
}

#footer > div {
	margin-top: 10px;
	margin-bottom: 40px;
}

/*-*-*-*- Contact-info -*-*-*-*/
.contact-info {
	min-width: 400px;
	margin: 0 10px;
}

.contact-info h1 {
	text-align: center;
}

.contact-info ul {
	max-width: 600px;
	padding: 0;

}

.contact-info li {
	border: 1px solid transparent;
	padding: 12px;
	margin: 5px;
	list-style: none;
	cursor: pointer;
	transition: 0.4s ease-out;
}

.contact-info li:hover {
	border: 1px solid rgba(254, 62, 75, 1);
	border-radius: 5px;
}

.contact-info li p {
	display: inline-block;
	padding-left: 3vw;
	font-size: 14px;
	cursor: pointer;
}

.contact-info li img {
	width: 30px;
	height: 30px;
	vertical-align: middle;
	filter: invert(31%) sepia(86%) saturate(2186%) hue-rotate(335deg) brightness(105%) contrast(99%);
	
}

/*-*-*-*- Map -*-*-*-*/
.map {
	min-width: 400px;
	margin: 0 10px;
	text-align: center;
}

#map {
	width: 20vw;
	min-width: 100%;
	max-width: 600px;
	height: 85%;
	min-height: 150px;
	max-height: 315px;

	background-color: rgba(0, 0, 0, 0.3);
	border-radius: 10px;

	margin: 0 auto;
	z-index: 0;
}

/*-*-*-*- Contact-form -*-*-*-*/
.contact-form {
	min-width: 400px;
	margin: 0 10px;
	text-align: center;
}

.contact-form form {
	max-width: 400px;
	margin: 0 auto;
}

.contact-form input,
.contact-form textarea {
	width: 90%;
	height: 30px;

	background: none;
	border: none;
	border-bottom: 1px solid rgba(222,222,222,1);
	border-radius: 0;

	padding-left: 10px;
	margin: 5px;
	color: rgba(122,122,122,1);
	font-size: 12px;
	box-sizing: border-box; 
	outline: none;
}

.contact-form input[type=submit] {
	background-color: rgba(255, 255, 255, 1);
	border: 1px solid rgba(254, 62, 75, 1);
	border-radius: 5px;

	padding: 10px;

	color: rgba(254, 62, 75, 1);
	font-size: 0.7em;
	letter-spacing: 2px;
	text-transform: uppercase;

	cursor: pointer;
	transition: 0.4s ease-out;
	outline: none;
}

.contact-form input[type=submit]:hover {
	border-color: rgba(0, 0, 0, 0.5);
	color: rgba(130, 130, 130, 1);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
	color: rgba(122,122,122,1);
}

.contact-form textarea {
	height: 80px;
	line-height: 30px;
	resize: vertical;
}

/*-*-*-*- Schermen met een maximum van 500px breed -*-*-*-*/
@media screen and (max-width: 1000px) {

	.map,
	.contact-info {
		width: 50vw;
		margin: 0 10px 5vh 10px;
	}

}

/*-*-*-*- Schermen met een maximum van 500px breed -*-*-*-*/
@media screen and (max-width: 600px) {

	#footer {
		display: block;
	}

	.contact-info,
	.map,
	.contact-form {
		display: block;
		width: auto;
		max-width: 100%;
	}
	
	.contact-form {
		padding-bottom: 25px;
	}

}