@charset "UTF-8";

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


/* CSS Document */
html {
    overflow-y: scroll;
}
body {
	padding:0;
	margin:0;
	font-family: 'Degular', sans-serif;
	font-size:22px;
	line-height:28px;
	font-weight:400;
	background-color: #F7F7F7;
}
.serif {
	font-family: "thermal-variable", serif;
}
.small {
	font-size:14px !important;
	line-height: 1.5 !important;
}
h1, h2, h3, h4 {
	font-weight:300;	
}
h1, h2 {
	font-family: 'Degular', sans-serif;
	font-size:60px;
	font-weight: 700;
	margin-bottom:40px;
	color:#000;
	/*text-transform:uppercase;*/
}
.home h1, .blog h1, .detail h1 {
	font-size: 26px;
}
.home h2, .blog h2, .detail p > b, .blog p > b {
	font-size: 42px !important;
	line-height: 1.25 !important;
	font-weight: 100;
}
.detail .wrapper h1 {
	margin-top: 10rem;
}
.wrapper h1 .light {
	font-weight: 100;
}
.wrapper h2 {
	font-size:24px;
	font-weight: 100;
	line-height: 1.5;
}
button:focus {
	outline:0;
}
a {
	color:#000;
	text-decoration:none;
	outline:0;
}
a.hover {
	border-bottom:dotted 1px #000;	
	padding-bottom:5px;	
}
a:hover {
	color:#000;
	text-decoration:none !important;
	border-bottom:0;
}
.clear {
	clear: both;
}
b, strong {
	font-weight: 800;
}

header {
	padding: 0 0 30px;
	/*background:#FFF;*/
}
.detail header, .post header {
	padding: 0;
}
#menu {
	text-align:center;
	margin: 0;
	padding: .25rem 0;
	background-color: #FFF;
}
.home p, .blog p, .blog li, li {
	font-size:22px;
	line-height:28px;
	font-weight: 100;
}
#menu a {
	font-weight:400;
	font-size:16px;
	letter-spacing:0.1em;
	display: inline-block;
	margin: 0 .5rem;
	color: #000;
}
#menu a:hover, #menu a.active {
	font-weight:600;
	font-family: "thermal-variable", serif;
}
#menu a::after {
    display:block;
    content:attr(title);
    font-weight:bold;
    height:1px;
    color:transparent;
    overflow:hidden;
    visibility:hidden;
    margin-bottom:-1px;
}
#menu .navbar-nav, #menu .navbar-toggler {
	margin: 0 0 0 auto;
}
#menu .navbar-toggler {
	border: none;	
}
#menu.detailcontent {
	text-align: center;
	padding: .95rem;
	height: 52px;
}
#menu.detailcontent a {
	color: #000;
	font-size: 22px;
}
.home #menu.stickylogo {
	margin-bottom: 10rem;
}
.post #menu.detailcontent a {
	color: #FFF;
}
.languages a { 
	color: #999 !important;
}
#works button {
	border:none;
	background-color:transparent;
	margin:0;
	padding:0;	
}
#logo {
	width:130px;
	/*top:70px;*/
	position: relative;
	margin: -2rem 5% 0;
}
#logo img {
	width:130px;
}
#logo.sticky {
	top:0px;
	z-index:100;	
	position:fixed;
	margin: 1rem;
}
#logo.sticky img {
	width:85px;	
}
#logo.sticky, #logo.sticky img {
	-webkit-transition: all 0.5s ease; /* Safari and Chrome */
    -moz-transition: all 0.5s ease; /* Firefox */
    -ms-transition: all 0.5s ease; /* IE 9 */
    -o-transition: all 0.5s ease; /* Opera */
	transition: all 0.5s ease;	
}
#logo.detailcontent {
	position: fixed;
	z-index: 100;
	left: 50%;
	margin-left: -66px;
}

#content {
	width:100%;
	position:relative;
	/*max-width:1800px;*/
	margin: 5rem auto 0;	
	/*background:#FFF;*/
}
/*.row>* {
	padding: calc(var(--bs-gutter-x) * .5);
}*/
.home #content {
	/*background: #111;*/
	/*margin-top: 0;*/
}
body:not(.blog) #content, body:not(.post) #content {
	/*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
}
#works .element-item, .services.element-item {
	overflow: hidden;
	position: relative;
}

#works img, #works button, .element-item .button.is-checked img {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease; 
    -ms-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    transition: all 0.5s ease;
}

#works img:hover, #works button:hover, .element-item .button.is-checked img:hover {
    -webkit-transform:scale(1.05); 
    -moz-transform:scale(1.05);
    -ms-transform:scale(1.05); 
    -o-transform:scale(1.05);
     transform:scale(1.05);
}
#works a {
	display: block;
}

#works .col-sm-3 {
	margin-top: 30rem;
}
#works .col-sm-3:nth-child(odd) {
	margin-top: 20rem;
}
#works .col-sm-6 {
	margin-top: 10rem;
}
#works .col-sm-6:first-child {
	margin-top: 0;
}

.contentLink {
	position:absolute;
	top:10px;
	left:10px;
	filter: alpha(opacity=0);
  	opacity: 0;	
	-webkit-transition: opacity 0.3s ease;
  	-moz-transition: opacity 0.3s ease;
  	-ms-transition: opacity 0.3s ease;
  	-o-transition: opacity 0.3s ease;
  	transition: opacity 0.3s ease;
}
#works .element-item:hover .contentLink {
	zoom: 1;
  	filter: alpha(opacity=100);
  	opacity: 1;
}
.contentLink h3 {
	margin:0;
	padding:2px 7px 3px;
	color:#FFF;
	font-weight:300;
	font-size:16px;
	background-color:#000;
}

.wrapper {
	text-align:left;	
	padding-left:5%;
	padding-right:5%;
	position:relative;
	margin-top: 15rem;
	max-width: 1440px;
}
.wrapper h2 a {
	 border-bottom: dotted #000 1px;
}
.wrapper h2 a:hover {
	border-bottom: solid #000 3px;
}
.jobdescription {
	margin: 2rem 0;
	padding: 3rem 0;
}
.jobdescription p, .jobdescription li {
	text-align:left;	
}
.detail .col-sm-6, .post .col-sm-6 {
	float: left !important;
}
.jobdescription img {
	border: none !important;
}

.navigation {
	position: fixed;
	bottom: 0;
	background-color: #000;
	height: 30px;
	min-width: 15px;
	color: #FFF;
	z-index: 1000;
}
.post .navigation {
	background-color: #FFF;
	color: #000;
}
.navigation i {
	position: absolute;
	top: 5px;
}
.navigation:hover {
	color: #FFF;
}
.post .navigation:hover {
	color: #000 !important;
}
.navigation.previous {
	left: 0;
	padding: 2px 10px 15px 30px;
}
.navigation.previous i {
	left: 5px;
}
.navigation.next {
	right: 0;
	padding: 2px 30px 15px 10px;
}
.navigation.next i {
	right: 5px;
}
.projtitle {
	display: none;
	font-size: 14px;
	color: #FFF;
}
.post .projtitle {
	color: #000;
}

.navigation:hover > .projtitle {
	display: inline-block;
}

/* quote */
.quote {
	font-size: 32px;
	line-height: 40px;
	margin: 0 auto;
	font-weight: 100;
}
.quotemark img {
	max-width: 100px;
	margin: 5rem auto 3rem;
	float: none !important;
}
.profile {
	max-width: 120px;
	border-radius: 75px;
	margin-top: 3rem;
	margin-bottom: 2rem;
	filter: grayscale(100%);
	float: left !important;
}
.quotesignature {
	padding-left: 150px;
	padding-top: 5rem;
}

body:not(.blog,.post) .col-sm-12, body:not(.blog,.post) .col-sm-6, body:not(.blog,.post) .col-sm-3, body:not(.blog,.post) .col-xs-12, body:not(.blog,.post) .col-xs-6 {
	padding:0;	
}
.col-sm-12 img, .col-sm-6 img, .col-sm-3 img, .col-xs-12 img, .col-xs-6 img {
	width:100%;
	float: left;
	border: solid 10px #F7F7F7;
}
.col-xs-12.headerImg img {
	float: none;
	margin-top: -1px;
}

.element-item.about {
	/*background-color:#000;*/
	color:#FFF;	
}
.about #content .fa {
	color:#FFF;
	font-size:30px;
}

.clients .row {
	padding: .8rem;
}
.clients .row h3 {
	font-family: "thermal-variable", serif;
	margin-top: 2rem;
	margin-bottom: 1rem;
}
.clients .row a {
	text-decoration: underline;
	font-weight: 600;
}

.services #content, .diensten #content {
	padding: 7rem 10%;
	background-color: #DDD;
}
.services #content h2, .diensten #content h2 {
	font-weight: 100;
}
.services #content h3, .diensten #content h3 {
	font-weight: 100;
	letter-spacing: .5px;
	font-size: 46px;
	margin-bottom: 30px;
}
.services #content .row, .diensten #content .row {
	margin-bottom: 7rem;
}
.services #content .row:last-of-type, .diensten #content .row:last-of-type {
	margin-bottom: 0;
}
.services #content .centered, .diensten #content .centered {
	width: 100%;
	text-align: center;
}
.services #content .underlined, .diensten #content .underlined {
	/*border-bottom: solid 4px #2098C4;*/
	padding: 0;
    box-shadow: inset 0 -15px 0 0 #2098C4;
}
.services #content .highlighted, .diensten #content .highlighted {
	color: #2098C4;
	font-weight: 600;
}
.services #content .icon, .diensten #content .icon {
	text-align: center;
}
.services #content  h3 .serif {
	border-bottom: solid 2px #F7F7F7;
}

#footer {
	padding: 0 0 3rem;	
	/*background-color:#FFF;*/
	text-align: center;
	margin-right: auto;
	margin-left: auto;
}

.textbox .textWrapper {
	padding:40px;
	text-align:center;
	display: inline-block;
    vertical-align: middle;
    white-space: normal;
	width:100%;
	border: solid 10px #F7F7F7;
	background-color: #DDD;
	height: 100%;
}
.textbox .textWrapper h1 {
	margin-bottom: 25px;	
}
.textbox .textWrapper p {
	font-size:22px;
	line-height:28px;
	color:#000;
	text-align: left;
}
.textbox .textWrapper a {
	color:#000;
	border-bottom:#FFF solid 2px;
}
.DivHelper {
    display: inline-block;
    vertical-align: middle;
    height:100%;
}
h4 a {
	border-bottom: solid 3px #000;
}
h4 a:hover {
	border-bottom: solid 3px #FFF;
}


/* BLOG */
body.blog, .blog header, .blog #content, .blog #footer, body.post, .post header, .post #content, .post #footer {
	background: #222;
	color:#999;
}

.blog h1, .blog h2, .blog h3, .blog a, .post h1, .post h2, .post h3, .post a {
	color:#FFF;
}
.blog p, .blog li {
	color:#AAA;
	font-size: 20px;
}
.blog .thumbnail:hover h3, .blog .thumbnail:hover p {
	text-decoration:none !important;
}
.blog .thumbnail {
	border: none;
	border-radius: 0;
	background: #000;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	color:#FFF;
	padding:0;
	overflow: hidden;
	-webkit-transition: background-color 0.5s ease-out;
    -moz-transition: background-color 0.5s ease-out;
    -o-transition: background-color 0.5s ease-out;
    transition: background-color 0.5s ease-out;
	margin-bottom: 2rem !important;
}
.blog .thumbnail img {
	float: none;
	border: none;
}
.blog .thumbnail:hover {
	background:#FFF;
}
.blog .thumbnail:hover h3 {
	color:#000;
}
.blog .grid-item .thumbnail {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease; 
    -ms-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    transition: all 0.5s ease;
}

.blog .grid-item .thumbnail:hover {
    -webkit-transform:scale(1.05); 
    -moz-transform:scale(1.05); 
    -ms-transform:scale(1.05); 
    -o-transform:scale(1.05); 
     transform:scale(1.05);
}
.blog .grid-item {
	 z-index:0;
}
.blog .grid-item:hover {
	 z-index:10;
}
.blog .caption {
	padding: 2rem;
}
.blog img {
	border: none !important;
}
.blog .tags {
	font-size: 14px;
	line-height: 16px;
}
.blog .wrapper h2 a {
	border-bottom-color: #FFF;
}
.blog .wrapper h2 a:hover {
	border-bottom-color: #FFF;
}
.post #content {
	margin-top: 13rem;
}
.post .jobdescription {
	margin-top: 0 !important;
	padding-top: 3rem;
}







/* Cookie bot */
#CybotCookiebotDialogBodyContentTitle, #CybotCookiebotDialogBodyContentText, #CybotCookiebotDialog a, #CybotCookiebotDialog div, label {
	font-family: 'Degular' !important;
	font-weight: 100 !important;
	word-spacing: 0px !important;
}
a#CybotCookiebotDialogBodyLevelButtonAccept {
	background-color:#000 !important;
	border: #000 !important;
}

@media screen and (max-width: 1500px) {
	.textbox .textWrapper {
		padding: 30px;
	}
	.textbox .textWrapper p {
		font-size:18px !important;	
		line-height: 22px;
		margin-bottom: 0 !important;
	}
}

@media screen and (max-width: 1350px) {
	/*.textbox .textWrapper {
		padding:0 20px;
	}*/
	/*.textbox .textWrapper p {
		font-size:13px;
		line-height:16px;
	}*/
	#works .col-sm-3 {
		margin-top: 15rem;
	}
	#works .col-sm-3:nth-child(odd) {
		margin-top: 10rem;
	}
	#works .col-sm-6 {
		margin-top: 5rem;
	}
}
@media screen and (max-width: 1198px) {
	.textbox .textWrapper {
		padding: 40px;
	}
	.textbox .textWrapper p {
		font-size:22px !important;	
		line-height: 28px;
		margin-bottom: 1rem !important;
	}
}

@media screen and (max-width: 1160px) {
	#logo img {
		width: 110px;
	}
	.wrapper {
		padding-left:10%;
		padding-right:10%;
		margin-top: 5rem;
	}
	.home h2, .blog h2, .detail p > b, .blog p > b {
		font-size: 36px !important;
	}
	.services #content h3, .diensten #content h3 {
		font-size: 32px !important;
	}
	/*#content {
		margin-top: 0;
	}*/
}
@media screen and (max-width: 989px) {
	.services .row .icon {
  		order: 1;
	}
	.services .row div:not(.icon) {
		order: 2;
	}
	.services lord-icon {
		width: 150px !important;
		height: 150px !important;
	}
	.services h3 {
		font-size: 30px !important;
	}
	.services .row:last-child {
		margin-bottom: 3rem;
	}
	#menu a {
		margin: 1rem 0;
	}
	.home h2, .blog h2, .detail p > b, .blog p > b {
		font-size: 30px !important;
	}
	.services #content h3, .diensten #content h3 {
		font-size: 26px !important;
	}
}
@media screen and (max-width: 768px) {
	.services #content, .diensten #content {
		padding-top: 2rem;
		padding-bottom: 4rem;
	}
	#works .col-sm-3 {
		margin-top: 0rem;
	}
	#works .col-sm-3:nth-child(odd) {
		margin-top: 5rem;
	}
	#works .col-sm-6 {
		margin-top: 0rem;
	}
}
@media screen and (max-width: 600px) {
	#menu {
		padding: 0 !important;
	}
	body {
		font-size: 20px;
		line-height: 24px;
	}
	.detail .wrapper h1 {
		margin-top: 4rem;
	}
	h2 {
		font-size:40px;;	
	}
	.headerImg.col-xs-12  {
		overflow:hidden;
		height:150px;
		width:100%;
	}
	.headerImg.col-xs-12 img {
		height:150px;
		width: auto;
	}
	.jobdescription {
		margin: 20px 0 30px !important;
	}
	.jobdescription .wrapper {
		text-align: center;
	}
	#works .col-sm-3, #works .col-sm-3:nth-child(odd), #works .col-sm-6 {
		margin-top: 0rem;
	}
	.home h2, .blog h2, .detail p > b, .blog p > b {
		font-size: 26px !important;
	}
	.services #content .row, .diensten #content .row {
		margin-bottom: 2rem;
	}
	.quote {
		font-size: 24px;
		line-height: 32px;
	}
	img.profile {
		float: none !important;
		margin-left: auto;
		margin-right: auto;
	}
	.quotesignature {
		padding-left: 0;
		padding-top: 0;
		text-align: center !important;
	}
}
@media screen and (max-width: 460px) {
	.aboutPage .about {
		width:100%;	
	}
}

@media screen and (max-height: 900px) {
	.home .wrapper, .blog .wrapper {
		margin-top: 6rem;
	}
	body.works #content {
		margin-top: 0;
	}
	.home h2, .home header {
		margin-bottom: 0;
		padding-bottom: 0;
	}
}