abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:0 0}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:0 0}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:700}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}li,ul{list-style:none}* :focus{outline:0}*,* :after,* :before{-webkit-box-sizing:border-box;box-sizing:border-box}

:root {
	--primary-brand-color: #2563eb;
}


body, html{
	font: 300 20px/1.6 "Space Grotesk", sans-serif, -apple-system, BlinkMacSystemFont, "Lexend", Futura, "Helvetica Neue", "Helvetica", "Arial", "sans-serif";
	background-color: #FFFFFF;
	color: #000;
	min-height: -webkit-fill-available;
	min-height: calc(100% - 80px);
}


a{
	color: #000000;
	text-decoration: none;
	transition: all .1s ease-in-out;
}


/* STANDARDS */

.container{
	max-width: 1500px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	padding: 25px;
}

main h2{
	width: 100%;
}




/* HEAD */

header{
	background-color: var(--primary-brand-color);
}

header a{
	color: #FFFFFF;
}

header .container > *{
	display: flex;
}

header h1{
	font-weight: 400;
	letter-spacing: -.01em;
}

header h1 b{
	border-right: 1px solid rgba(255,255,255,.6);
	padding: 5px 10px 5px 0;
	margin-right: 8px;
	letter-spacing: .1em;
}

header nav{
}

header nav li{
	display: inline-block;
	margin: 0 5px;
}

header nav li a{
	font-size: 14px;
	background-color: rgba(255,255,255,.20);
	color: #FFF;
	border-radius: 25px;
	padding: 9px 16px;
}

header nav li a i{
	padding-right: 5px;
}

header nav li a:hover{
	background-color: rgba(255,255,255,.30);
}



/* GLOBAL NAVIGATION */

aside.navigation{
	background-color: #f0f0f0;
}

aside.navigation nav{
	width: 100%;
	text-align: right;
}

aside.navigation nav li{
	display: inline-block;
	margin: 0 5px;
} 

aside.navigation nav li a{
	font-size: 14px;
	padding: 9px 16px;
	border-radius: 25px;
	color: rgba(0,0,0,.8);
}

aside.navigation nav li a.active{
	font-weight: 700
}

aside.navigation nav li a:not(.active):hover{
	background-color: rgba(255,255,255,1);
}



/* MAIN STUDIO */


main.studio{
}

main.studio .container{
	display: block;
}

main.studio ul{
	display: flex;
	gap: 10px;
	row-gap: 10px;
	padding: 10px;
	flex-wrap: wrap;
	justify-content: strech;
	align-content: stretch;
	width: 100%;
	background-color: #FFF;
}

main.studio ul li{
	display: flex;
	width: 150px;
	height: 75px;
	border: 1px solid rgba(0,0,0,.1);
	text-align: center;
	justify-content: center;
	align-items: center;
	font-size: 14px;
	padding: 0 10px;
}

main.studio ul li.service{
	width: 250px;
	background-color: #eee;
}

main.studio ul li.fokus{
	width: calc(100% / 3 - 20px / 3);
	height: 400px;
	border: 2px solid var(--primary-brand-color);
	background-color: #FFF;
	color: var(--primary-brand-color);
}