@font-face {
	font-family: "Metropolis";
	src: url("./fonts/metropolis/Metropolis-Thin.otf");
	font-weight: 100;
	font-style: normal;
}
@font-face {
	font-family: "Metropolis";
	src: url("./fonts/metropolis/Metropolis-ThinItalic.otf");
	font-weight: 100;
	font-style: italic;
}
@font-face {
	font-family: "Metropolis";
	src: url("./fonts/metropolis/Metropolis-ExtraLight.otf");
	font-weight: 200;
	font-style: normal;
}
@font-face {
	font-family: "Metropolis";
	src: url("./fonts/metropolis/Metropolis-ExtraLightItalic.otf");
	font-weight: 200;
	font-style: italic;
}
@font-face {
	font-family: "Metropolis";
	src: url("./fonts/metropolis/Metropolis-Light.otf");
	font-weight: 300;
	font-style: normal;
}
@font-face {
	font-family: "Metropolis";
	src: url("./fonts/metropolis/Metropolis-LightItalic.otf");
	font-weight: 300;
	font-style: italic;
}
@font-face {
	font-family: "Metropolis";
	src: url("./fonts/metropolis/Metropolis-Regular.otf");
	font-weight: 400;
	font-style: normal;
}
@font-face {
	font-family: "Metropolis";
	src: url("./fonts/metropolis/Metropolis-RegularItalic.otf");
	font-weight: 400;
	font-style: italic;
}
@font-face {
	font-family: "Metropolis";
	src: url("./fonts/metropolis/Metropolis-Medium.otf");
	font-weight: 500;
	font-style: normal;
}
@font-face {
	font-family: "Metropolis";
	src: url("./fonts/metropolis/Metropolis-MediumItalic.otf");
	font-weight: 500;
	font-style: italic;
}
@font-face {
	font-family: "Metropolis";
	src: url("./fonts/metropolis/Metropolis-SemiBold.otf");
	font-weight: 600;
	font-style: normal;
}
@font-face {
	font-family: "Metropolis";
	src: url("./fonts/metropolis/Metropolis-SemiBoldItalic.otf");
	font-weight: 600;
	font-style: italic;
}
@font-face {
	font-family: "Metropolis";
	src: url("./fonts/metropolis/Metropolis-Bold.otf");
	font-weight: 700;
	font-style: normal;
}
@font-face {
	font-family: "Metropolis";
	src: url("./fonts/metropolis/Metropolis-BoldItalic.otf");
	font-weight: 700;
	font-style: italic;
}
@font-face {
	font-family: "Metropolis";
	src: url("./fonts/metropolis/Metropolis-ExtraBold.otf");
	font-weight: 800;
	font-style: normal;
}
@font-face {
	font-family: "Metropolis";
	src: url("./fonts/metropolis/Metropolis-ExtraBoldItalic.otf");
	font-weight: 800;
	font-style: italic;
}
@font-face {
	font-family: "Metropolis";
	src: url("./fonts/metropolis/Metropolis-Black.otf");
	font-weight: 800;
	font-style: normal;
}
@font-face {
	font-family: "Metropolis";
	src: url("./fonts/metropolis/Metropolis-BlackItalic.otf");
	font-weight: 800;
	font-style: italic;
}

@font-face {
	font-family: 'infopolitie';
	src:  url('./fonts/infopolitie.eot?z7sd1e');
	src:  url('./fonts/infopolitie.eot?z7sd1e#iefix') format('embedded-opentype'),
		url('./fonts/infopolitie.ttf?z7sd1e') format('truetype'),
		url('./fonts/infopolitie.woff?z7sd1e') format('woff'),
		url('./fonts/infopolitie.svg?z7sd1e#infopolitie') format('svg');
	font-weight: normal;
	font-style: normal;
}

[class^="ipol-"], [class*=" ipol-"] {
	/* use !important to prevent issues with browser extensions that change fonts */
	font-family: 'infopolitie' !important;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.ipol-infopolitie:before {
	content: "\e903";
}
.ipol-politie:before {
	content: "\e900";
}
.ipol-boa:before {
	content: "\e902";
}
.ipol-cop:before {
	content: "\e904";
}
.ipol-cop2:before {
	content: "\e901";
}



/* Set height to 100% for body and html to enable the background image to cover the whole page: */
body, html {
	height: 100%;
	margin: 0px;
	padding: 0px;
	font-family: "Metropolis", Verdana, Geneva, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 1,3rem;
}



a {
	color: #FFF;
}

a:hover{
	color: #00a4aa;

}

h2 {
	font-weight: 400;
}

.mainlogo {
	font-size: 6rem;

}

.bgimg {
	/* Background image */
	background-image: url('background.jpg');
	/* Full-screen */
	height: 100%;
	/* Center the background image */
	background-position: center;
	/* Scale and zoom in the image */
	background-size: cover;
	/* Add position: relative to enable absolutely positioned elements inside the image (place text) */
	position: relative;
	/* Add a white text color to all elements inside the .bgimg container */
	color: white;
	/* Add a font */
	/*font-family: "Courier New", Courier, monospace;
	font-family: "Courier New", Courier, monospace;*/
	/* Set the font-size to 25 pixels */
	font-size: 25px;
}

.overlay {
	border-width: 10px;
	border-style: solid;
	border-image-source: linear-gradient(hsla(0, 0%, 23%, 0.7), hsla(0, 0%, 0%, 0.8));
	border-image-slice: fill 1;
}

/* Position text in the top-left corner */
.topleft {
	position: absolute;
	top: 0;
	left: 12px;
}

/* Position text in the bottom-left corner */
.bottomleft {
	position: absolute;
	bottom: 0;
	left: 16px;
}

/* Position text in the middle */
.middle {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
}

/* Style the <hr> element */
hr {
	margin: auto;
	width: 40%;
}

.almeda_huiskleur {
	color: #00A4AA;
}

.small {
	font-size: .8rem;
	color: #c0c0c0;
		line-height: 1.2rem;

}

.timer div {
	display: inline-block;
}

#timer {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;

	margin: 20px 0;
}

.dagen, .uren, .minuten, .seconden {

	color: #00A4AA;
	display: inline;
	/*background: rgba(255,255,255, 0.2);
	border: 1px solid #FFF;*/
	padding: 5px;
	margin: 5px;

}
.subdagen, .suburen, .submin, .subsec {
	font-size: 0.6rem;
	color: #006699;
}