:root {
	--yellow: #fcb32b;
	--dark-blue: #1a4791;
	--light-blue: #abdfec;
	--green: #048457;
	
	--rgb-yellow: 252, 179, 43;
	--rgb-dark-blue: 26, 71, 145;
	--rgb-light-blue: 171, 223, 236;
	--rgb-green: 4, 132, 87;
}

*, *:before, *:after {
	box-sizing: border-box;
}
html, body {
	height: 100%;
}
body {
	margin: 0;
	padding: 0;
	color: var(--dark-blue);
	font-size: 100%;
	line-height: 1.6em;
	font-family: 'Work Sans', sans-serif;
	background: #fff;
}
img {
	max-width: 100%;
}
a {
	color: var(--dark-blue);
	cursor: pointer;
	outline: none;
	-webkit-transition: all 0.25s ease-in-out;
	-moz-transition: all 0.25s ease-in-out;
	-ms-transition: all 0.25s ease-in-out;
	-o-transition: all 0.25s ease-in-out;
	transition: all 0.25s ease-in-out;
}
h1, h2, h3 {
	font-weight: 600;
}
h1 {font-size: 3rem; line-height: 3rem;}
h2 {font-size: 2rem; line-height: 2.2rem;}
h3 {font-size: 1.8rem; line-height: 2rem;}

.text-center {
	text-align: center;
}
.text-right {
	text-align: right;
}


/* !CONTENT */

header {
	padding-top: 2rem;
}
#logo {
	display: block;
	width: 240px;
	position: absolute;
	top: 2%;
	left: 2%
}

/* !sonar */
.app {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0 0 40px;
	position: relative;
	overflow: hidden;
	max-width: 1140px;
	margin: 0 auto;
}
.sonar {
	width: 40%;
	padding-top: 40%;
	height: 0;
	position: relative;
}
.sonar__container {
	width: calc(100% - 60px);
	height: calc(100% - 60px);
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	position: absolute;
	border-radius: 50%;
}
.matrix {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	/*background: transparent url('fine-logo.png') no-repeat center center;*/
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" viewBox="0 0 400 400"><defs><path id="a" d="M0 0h400v400H0z"/></defs><clipPath id="b"><use xlink:href="%23a" overflow="visible"/></clipPath><g clip-path="url(%23b)"><defs><path id="c" d="M0 0h400v400H0z"/></defs><clipPath id="d"><use xlink:href="%23c" overflow="visible"/></clipPath><path fill="%231A4791" d="M400 200h-20.9c0-98.7-80.3-179.1-179-179.1V0C310.5 0 400 89.6 400 200" clip-path="url(%23d)"/><path fill="%231A4791" d="M354.5 200h-20.9c0-73.7-59.9-133.6-133.5-133.6V45.5c85.3 0 154.4 69.2 154.4 154.5" clip-path="url(%23d)"/><path fill="%231A4791" d="M310 200h-20.9c0-49.1-39.9-89.1-89-89.1V90C260.8 90 310 139.3 310 200" clip-path="url(%23d)"/><path fill="%231A4791" d="M265.7 200h-20.9c0-24.7-20.1-44.8-44.7-44.8v-20.9c36.3 0 65.6 29.4 65.6 65.7" clip-path="url(%23d)"/><path fill="%23FCB32B" d="M0 200h20.9c0-98.7 80.3-179.1 179-179.1V0C89.5 0 0 89.6 0 200" clip-path="url(%23d)"/><path fill="%23FCB32B" d="M45.5 200h20.9c0-73.7 59.9-133.6 133.5-133.6V45.5c-85.3 0-154.4 69.2-154.4 154.5" clip-path="url(%23d)"/><path fill="%23FCB32B" d="M90 200h20.9c0-49.1 39.9-89.1 89-89.1V90C139.2 90 90 139.3 90 200" clip-path="url(%23d)"/><path fill="%23FCB32B" d="M134.3 200h20.9c0-24.7 20.1-44.8 44.7-44.8v-20.9c-36.3 0-65.6 29.4-65.6 65.7" clip-path="url(%23d)"/><path fill="%23048457" d="M0 200h20.9c0 98.7 80.3 179.1 179 179.1V400C89.5 400 0 310.4 0 200" clip-path="url(%23d)"/><path fill="%23048457" d="M45.5 200h20.9c0 73.7 59.9 133.6 133.5 133.6v20.9c-85.3 0-154.4-69.2-154.4-154.5" clip-path="url(%23d)"/><path fill="%23048457" d="M90 200h20.9c0 49.1 39.9 89.1 89 89.1V310C139.2 310 90 260.7 90 200" clip-path="url(%23d)"/><path fill="%23048457" d="M134.3 200h20.9c0 24.7 20.1 44.8 44.7 44.8v20.9c-36.3 0-65.6-29.4-65.6-65.7" clip-path="url(%23d)"/><g clip-path="url(%23d)"><defs><path id="e" d="M183.1 187H417v214H183.1z"/></defs><clipPath id="f"><use xlink:href="%23e" overflow="visible"/></clipPath><path fill="%23ABDFEC" d="M400 200h-20.9c0 98.7-80.3 179.1-179 179.1V400C310.5 400 400 310.4 400 200" clip-path="url(%23f)"/><path fill="%23ABDFEC" d="M354.5 200h-20.9c0 73.7-59.9 133.6-133.5 133.6v20.9c85.3 0 154.4-69.2 154.4-154.5" clip-path="url(%23f)"/><path fill="%23ABDFEC" d="M310 200h-20.9c0 49.1-39.9 89.1-89 89.1V310c60.7 0 109.9-49.3 109.9-110" clip-path="url(%23f)"/><path fill="%23ABDFEC" d="M265.7 200h-20.9c0 24.7-20.1 44.8-44.7 44.8v20.9c36.3 0 65.6-29.4 65.6-65.7" clip-path="url(%23f)"/></g></g></svg>');
	
	background-size: 100%;
	border-radius: 50%;
	border: 1px solid #fff;
}
.rotary {
	position: relative;
	width: 100%;
	height: 100%;
	background: conic-gradient(#fff 5%, rgba(0, 7, 22, 0) 86%, rgba(0,0,0,0.2));
	
	overflow: hidden;
	border-radius: 50%;
	z-index: 1;
	
	-webkit-animation: rotating 5s linear; /* infinite weg, met js timeout > display none na 5 sec */
	animation: rotating 5s linear;
	transform-origin: center center;
	
	/* start -90° */
	transform: rotate(-90deg);
}

/* !texts */
.txt {
	position: absolute;
	width: 100%;
	height: 50%;
}
.txt.top-left,
.txt.top-right {
	top: 0;
}
.txt.bottom-left,
.txt.bottom-right {
	bottom: 0;
}

.txt.top-left,
.txt.top-right {
	display: flex;
	align-items: flex-end;
}
.txt.top-left {
	justify-content: flex-end;
}
.txt.top-right {
	justify-content: flex-start;
}

.txt.top-left {
	left: 0;
	transform: translate(-100%, -30%);
	text-align: right;
	background-color: #f7b331;
}
.txt.top-right {
	right: 0;
	transform: translate(100%, -30%);
	background-color: #194791; color: #fff;
}
.txt.bottom-right {
	right: 0;
	transform: translate(100%, 30%);
	background-color: #acddea;
}
.txt.bottom-left {
	left: 0;
	transform: translate(-100%, 30%);
	text-align: right;
	background-color: #058456;
}

.txt.top-left,
.txt.top-right,
.txt.bottom-right,
.txt.bottom-left {
	background: none;
	color: #194791;
}

.txt h3,
.txt p {
	margin: 0;
}
.txt p {
	margin-top: .5rem;
	font-size: 1.3rem;
}
.mobile-summary {
	display: none;
}


/* !animations */
@-webkit-keyframes rotating {
	from {
		transform: rotate(-90deg);
	}
	to {
		transform: rotate(270deg);
		display: none;
	}
}
@keyframes rotating {
	from {
		transform: rotate(-90deg);
	}
	to {
		transform: rotate(270deg);
		display: none;
	}
}


/* !FOOTER */

/* Sticky (enkel op large) */
@media (min-width: 1024px) {
	section#wrap {
		min-height: 100%;
		height: auto !important;
		height: 100%;
		margin: 0 auto -14rem; /*owv 2rem margin-top*/
	}
	
	footer, .push {
		height: 12rem;
	}
}
@media (min-width: 1300px) {
	section#wrap {
		min-height: 100%;
		height: auto !important;
		height: 100%;
		margin: 0 auto -14rem; /*owv 2rem margin-top*/
	}
	
	footer, .push {
		height: 12rem;
	}
}

footer {
	margin-top: 2rem;
	padding-top: 1rem;
	color: var(--yellow);
	background-color: var(--dark-blue);
}
footer a {
	color: var(--yellow);
	text-decoration: none;
	font-weight: 600;
}
footer a.social {
	display: inline-block;
	margin-top: .5rem;
}
footer h2 {
	font-size: 3rem;
	line-height: 3rem;
	font-weight: 900;
	letter-spacing: 2px;
	margin: 1rem 0;
}
footer p {
	font-size: 1.2rem;
	line-height: 1.8rem;
}
footer svg path {
	fill: var(--yellow);
}
.no-touchevents footer a.social:hover {
	opacity: 0.8;
}

/* !MEDIA */

/* Large and up */
@media screen and (min-width: 64em) /* >= 1024 */
{
	/*body {color: purple;}*/
}
/* Medium */
@media screen and (max-width: 63.99em) /* <= 1023 */
{
	/*body {color: red;}*/
	
	#logo {
		position: static;
		margin: 0 auto;
	}
	
	h1 {
		font-size: 2.4rem;
		line-height: 2.4rem;
		margin: 0;
	}
	.app {
		padding: 0;
	}
	.txt.top-left,
	.txt.top-right,
	.txt.bottom-right,
	.txt.bottom-left {
		display: none;
	}
	.mobile-summary {
		display: block;
	}
	
	footer {
		padding: 2rem 0;
	}
	footer,
	footer .text-right {
		text-align: center;
	}
	footer p,
	footer h2 {
		margin: 1rem 0;
	}
}
/* Small */
@media screen and (max-width: 40em) /* <= 640 */
{
	/*body {color: green;}*/
	
	#wrap h2 {
		font-size: 1.6rem;
		line-height: 2rem;
	}
	#logo {
		padding-bottom: 1rem;
		border-bottom: 1px solid var(--dark-blue);
	}
	h1 {
		font-size: 2rem;
		line-height: 2rem;
	}
	
	.sonar {
		width: 60%;
		padding-top: 60%;
	}
	
}


/* !CUSTOM media */
@media screen and (max-width: 1180px)
{
	#logo {
		width: 175px;
	}
}