:root {
	--font-area: 'area-normal', sans-serif; /* weights: 400-500-700-800-900 -> regular-medium-bold-extrabold-black */
	
	--color-body: #000000;
	--color-brown: #6e6160;
	--color-blue: #f0fbfd;
	
	--rgb-color-body: 0,0,0;
	--rgb-color-brown: 110,97,96;
	--rgb-color-blue: 240,251,253;
}
*, *:before, *:after {
	box-sizing: border-box;
}
body {
	margin: 0;
	padding: 0;
	color: var(--color-body);
	font-size: 100%;
	line-height: 1.4rem;
	font-family: var(--font-area);
	background: #fff;
}
img {
	max-width: 100%;
}
a {
	color: #2F4954;
	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;
}
p {
	font-size: .95rem;
	line-height: 1.7rem;
}
.text-center {
	text-align: center;
}
.text-right {
	text-align: right;
}
.flex-container {
	display: flex;
}

/* !BUTTONS */
.btn {
	color: #000;
	text-decoration: none;
	border: 1px solid #000;
	font-weight: 700;
	cursor: pointer;
	outline: 0;
	
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	
	min-height: 48px;
	padding: .5rem 2rem;
	line-height: 1.4rem;
	text-transform: uppercase;
}
.btn .fa-solid {
	display: inline-block;
	padding: 2px 0 0 5px;
	transition: all 0.25s ease-in-out;
}
.btn:hover .fa-solid {
	padding-left: 10px;
}

/* !HEADER (nu binnen #home) */
header nav.lang ul {
	margin: 2rem 0 0;
	padding: 0;
	list-style: none;
}
header nav.lang ul li {
	display: inline-block;
	margin-left: 1rem;
}
header nav.lang ul li a {
	color: var(--color-brown);
	font-size: 1.2rem;
	font-weight: 400;
	text-decoration: none;
}
header nav.lang ul li a.active {
	font-weight: 900;
	text-decoration: underline;
}

/* !HOME */
#home {
	position: relative;
	height: 80vh;
	background: var(--color-blue) url('../img/bg_home.jpg') no-repeat bottom center;
	background-size: cover;
	color: var(--color-brown);
}
#home .content {
	position: relative;
	z-index: 2;
}
#home .logo-klif {
	max-width: 240px;
	margin: 4rem 0 0 6rem;
}
#home p {
	font-size: 1rem;
	font-weight: 500;
	margin-top: 45%;
}
#home .dots span {
	position: absolute;
	display: block;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	opacity: 0;
	animation: lightOn 0.4s ease-out forwards;
}
#home .dots span:nth-child(1) {animation-delay: 2.1s; background: #0f4496; top: 55%; left: 5%;}
#home .dots span:nth-child(2) {animation-delay: 2.3s; background: #ff5c01; top: 42%; left: 30%;}
#home .dots span:nth-child(3) {animation-delay: 2.5s; background: #cda54e; top: 75%; left: 18%;}
#home .dots span:nth-child(4) {animation-delay: 2.7s; background: #e4dbee; top: 88%; left: 23%;}
#home .dots span:nth-child(5) {animation-delay: 2.9s; background: #fff9c7; top: 85%; left: 28%;}
#home .dots span:nth-child(6) {animation-delay: 3.0s; background: #93d5f6; top: 90%; left: 70%;}
#home .dots span:nth-child(7) {animation-delay: 3.2s; background: #9e703e; top: 70%; left: 80%;}
#home .dots span:nth-child(8) {animation-delay: 3.4s; background: #3a88c8; top: 55%; left: 85%;}

@keyframes lightOn
{
	0%   { opacity: 0; transform: scale(0.5); }
	60%  { opacity: 1; transform: scale(1.3); }
	100% { opacity: 1; transform: scale(1); }
}

/* !INTRO */
#intro {
	margin-top: 4rem;
}
#intro .row.half {
	max-width: 800px;
}

/* !FEATURES */
#features {
	margin-bottom: 4rem;
}
#features .feat {
	padding: 2rem;
	text-align: center;
}
#features .feat svg {
	max-width: 50px;
	margin: 1rem 0;
}
#features .feat .icon.icon-01 {animation-delay: 0.25s;}
#features .feat .icon.icon-02 {animation-delay: 0.5s;}
#features .feat .icon.icon-03 {animation-delay: 0.75s;}
#features .feat h3 {
	text-transform: uppercase;
	font-size: 1.3rem;
	font-weight: 800;
}

/* !PARTNERS */
#partners .partner {
	text-align: center;
	padding: 2rem;
	box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}
#partners .partner div.partner-logo {
	height: 100px;
	background: #fff url('../img/partner-logos/oskard.svg') no-repeat center center;
	background-size: contain;
}
#partners .partner div.partner-logo.threemotion {background-image: url('../img/partner-logos/3motion.svg'); background-size: 55%;}
#partners .partner div.partner-logo.copycat {background-image: url('../img/partner-logos/copycat.svg'); background-size: 50%;}
#partners .partner div.partner-logo.fieldconcept {background-image: url('../img/partner-logos/fieldconcept.svg'); background-size: 23%;}
#partners .partner div.partner-logo.ibizz {background-image: url('../img/partner-logos/ibizz.svg'); background-size: 30%;}
#partners .partner div.partner-logo.lfdc {background-image: url('../img/partner-logos/lfdc.svg'); background-size: 70%;}
#partners .partner div.partner-logo.oskard {background-image: url('../img/partner-logos/oskard.svg'); background-size: 55%;}
#partners .partner div.partner-logo.ziedoes {background-image: url('../img/partner-logos/ziedoes.svg'); background-size: 55%;}

#partners .partner div.text {
	display: flex;
	flex-direction: column;
	text-align: left;
}
#partners .partner div.text p:first-child {
	padding-bottom: 1rem;
}
#partners .partner div.text p.bottom {
	margin-top: auto;
	text-align: center;
}
#partners .partner div.text a.btn {
	width: 90%;
	font-size: .9rem;
}

/* !CLIENTS */
#clients {
	margin: 4rem 0;
}

/* !FOOTER */
footer {
	color: #fff;
	padding: 1.6rem 0;
	margin-top: 4rem;
	background-color: #000;
}
footer p {
	font-size: .85rem;
	line-height: 1.4rem;
}
footer a {
	color: #fff;
}
footer .btn {
	position: relative;
	color: #fff;
	border-color: #fff;
	font-weight: 900;
	margin-top: 1rem;
}
footer .btn::before {
	content: '';
	width: 12px;
	height: 12px;
	background: #fff;
	border-radius: 100%;
	position: absolute;
	left: -24px;
}
footer .doormat {
	margin-top: 4rem;
	padding-top: 1rem;
	border-top: 1px solid #fff;
}
footer .flex-container {
	align-items: flex-end;
}
footer .flex-container > div {
	flex: 1 1 0;
	min-width: 0;
}
footer svg.logo-klif {
	max-width: 70px;
	margin-right: 1rem;
}

/* !PAGE 404 */
#page_404 .logo-klif {
	width: 240px;
	margin-top: 4rem;
}
#page_404 h2 {
	text-transform: uppercase;
	font-weight: 800;
}

/* !MEDIA */

/* Large and up */
@media screen and (min-width: 64em) /* >= 1024 */
{
	/*body,#home {color: blue;}*/
	
	footer .row.half {
		max-width: 40%;
	}
}
/* Medium */
@media screen and (max-width: 63.99em) /* <= 1023 */
{
	/*body,#home {color: red;}*/
	
	p {
		font-size: .9rem;
		line-height: 1.6rem;
	}
	#home {
		height: 70vh;
	}
	#home .logo-klif {
		max-width: 180px;
		margin: 0;
		margin-top: -25px;
	}
	#home p {
		font-size: .95rem;
		line-height: 1.5rem;
		margin-top: 20%;
	}
	#intro {
		margin-top: 2rem;
	}
	#features {
		margin-bottom: 2rem;
	}
	#features .feat {
		padding: 0;
	}
	#features .feat svg {
		max-width: 40px;
		margin: 0;
	}
	#features .feat h3 {
		font-size: 1.1rem;
	}
	#partners .partner {
		padding: 1rem;
	}
	#partners .partner div.partner-logo {
		height: 80px;
	}
	#partners .partner div.text {
		padding: 0 1rem;
		/*text-align: center;*/
	}
	#clients {
		margin: 2rem 0;
	}
	footer {
		margin-top: 2rem;
	}
	footer .row.half {
		max-width: 70%;
	}
	footer {
		text-align: center;
	}
	footer .doormat {
		margin-top: 2rem;
	}
	footer .flex-container {
		flex-direction: column;
	}
	footer .flex-container > div {
		flex: 1 1 auto;
		min-width: 100%;
	}
	footer .text-right {
		text-align: center;
	}
}
/* Small */
@media screen and (max-width: 40em) /* <= 640 */
{
	/*body,#home {color: green;}*/
	
	#home .logo-klif {
		max-width: 80px;
	}
	#home p {
		margin-top: 5%;
	}
	#home .dots span:nth-child(1) {background: #0f4496; top: 75%;}
	#home .dots span:nth-child(2) {background: #ff5c01; top: 62%;}
	
	#features .feat svg {
		max-width: 30px;
	}
	#clients {
		margin: 1rem 0;
	}
}