html {}
body {color:#555; font-size:18px; font-weight: 400; font-family: 'Muli', sans-serif; -webkit-text-size-adjust: 100%; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
h1, h2, h3, h4, .h1, .h2, .h3, .h4 {word-wrap:break-word; line-height: 1.2em;}
h1, .h1 {font-size: 50px; font-weight: 700; color: #5B7E90; margin-bottom: 15px; letter-spacing: -1px;}
h2, .h2 {font-size: 28px; font-weight: 700; color: #EE9F3F; margin-bottom: 10px; letter-spacing: -1px;}
h3, .h3 {font-size: 24px; font-weight: 400; color: #000; margin-bottom: 10px; letter-spacing: -1px;}
a {}
a:link, a:visited, a:active {}
a:hover {}
strong {font-weight: 700; font-style: inherit; color:#EE9F3F;}
em {font-style: italic; font-weight: inherit; color:#EE9F3F;}
/*************************************************
Fundementals
*************************************************/
header {position: relative;}
.basicContainer {max-width: 1280px; margin: 0px auto; padding: 0px 25px; text-align: center; position: relative;}
.basicContainerSmall {max-width: 820px; text-align: left;}
.basicContainerSmall .partContentFileImageGallery.single, #leftContainer .partContentFileImageGallery.single {margin-bottom: 30px;}
.basicContainerSmall .partButton {margin-right: 10px;}
.basicContainerColumnItems {padding: 0px;}
.introContainer .basicContainer {max-width: 740px; margin:0px auto;}
.introContainer .basicContainer .partContentFileImageGallerySingle img {margin:0px auto;}
.partButton + .partButton {margin-left: 10px;}
/*************************************************
Top menu bars
*************************************************/
#topBar.stickyScroll {width: 100%; background-color: #fff; position: fixed; left: 0; top: 0; z-index: 1003; box-shadow: 4px 4px 10px 0 rgba(0,0,0,.05);}
.stickyScrollGhost {height:130px;}
/* phone, email and socials */
#topBarSmall {background-color: #5B7E90;}
#topBarSmall .basicContainer {height: 30px; font-size: 14px; display: flex; justify-content: flex-end; align-items: center;}
#topBarSmall .basicContainer a {font-weight: 700; color: #fff; display: flex; align-items: center; text-decoration: none; cursor: pointer;}
#topBarSmall .basicContainer a:first-child {margin-left: 0;}
#topBarSmallPhoneEmail {display: flex; align-items: center;}
#topBarSmallPhoneEmail a {margin-left: 20px;}
#topBarSmallPhoneEmail a svg.partSvg {fill:#fff; height:12px; width: 12px; display: flex; justify-content: center; align-items: center; transition: fill ease 0.3s; margin-right: 5px;}
#topBarSmallPhoneEmail a span {transition: color 0.3s;}
#topBarSmallPhoneEmail a:hover span {color: #EE9F3F;}
#topBarSmallPhoneEmail a:hover svg.partSvg {fill:#EE9F3F;}
/* needed for IE */
#topBarSmallPhoneEmail .svgIconPhone {width: 12px;}
#topBarSmallPhoneEmail .svgIconEnvelope {width: 16px;}
#topBarSmall .socialContainer {display: flex; align-items: center; margin-left: 20px;}
#topBarSmall .socialContainer a {margin-left: 10px; display: flex; justify-content: center; align-items: center; height: 12px; width: 12px;}
#topBarSmall .socialContainer a svg.partSvg {fill:#fff; flex: 1 1 auto; max-height:12px; max-width: 12px; transition: fill ease 0.3s;}
#topBarSmall .socialContainer a:hover svg.partSvg {fill:#EE9F3F;}
/*************************************************
Logo & Navigation
*************************************************/
#topBar nav.basicContainer {height: 100px; display: flex; align-items: center; transition: height ease 0.3s; /* fade out */}
#topBar.stickyScroll.scrolled nav.basicContainer {height:70px; transition: height ease 0.5s; /* fade in */}
#logo {margin-right: auto;}
#logo img {display: block; height: 70px; transition: height ease 0.3s; /* fade out */}
#topBar.scrolled #logo img {display: block; height: 50px; transition: height ease 0.5s; /* fade in */}
.partNavigation-hvbvr {}
/***********************************************
Parallax images
***********************************************/
.parallaxContainer {position: relative;}
.parallaxContainer .partContentFileImageGallery figure .imagePlaceholderContainer .simpleParallax {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.parallaxContainer .partContentFileImageGallery figure .imagePlaceholderContainer img {display: none;}
.parallaxContainer .partContentFileImageGallery figure .imagePlaceholderContainer .simpleParallax img {display: block;}
.parallaxContainer.simpleParallaxIE11 .partContentFileImageGallery figure .imagePlaceholderContainer img {display: block;}
.parallaxContainer .headerContainer .h1 {margin-bottom: 0;}
.headerContainer {position: absolute; top:0; left:0; bottom:0; right:0; padding-left: 90px; padding-right: 90px; background-color: rgba(0,0,0,0.25); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;}
.headerContainer .h1 {color: #fff; max-width: 1400px; padding:0px; color: #fff; text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5); font-size: 70px; margin-bottom: 60px;}
/***********************************************
Basic lay-outs
***********************************************/
.whiteContainer, .greyContainer, .colorContainer, footer {padding: 90px 0px 70px 0px;}
.whiteContainer {background-color: #fff;}
.greyContainer {background-color: #EEF2F3;}
.greyContainer .partContentText p {color: #333;}
/*.greyContainer .basicContainerSmall {background-color: #fff; box-shadow: 3px 3px 18px 0 rgba(0,0,0,.2); padding:60px; padding-bottom: 30px; margin-top: -150px;}*/
.colorContainer {background-color: #EE9F3F;}
.colorContainer h1, .colorContainer .h1 {color: #fff;}
.colorContainer .partContentText {color: #fff;}
.basicContainerColumnItems .flexItem .partContentText {padding-bottom: 0px;}
.colorContainer .flexContainer .partContentText {color: #555;}
/* Columns */
.flexContainer {display: flex; justify-content: center; flex-wrap: wrap; padding:30px 0px 0px 0px; width: calc(100% + 30px); margin-left: -15px; margin-right: -15px;}
.flexItem {position: relative; background-color: #fff; margin:0px 15px 30px 15px; text-decoration: none; display: flex; flex-direction: column; max-width: 420px;}
.flexItem:last-child {margin-right: auto;}
.flexItem .partContentFileImageGallery {margin-bottom: 30px;}
.flexItem .partContentText {font-size: 16px;}
#diensten .flexContainer .flexItem .partContentText,
#nieuws .flexContainer .flexItem .partContentText,
#diensten .flexContainer .flexItem h2,
#nieuws .flexContainer .flexItem h2
{
margin-left: 30px; margin-right: 30px;
}
.flexItem .partButton {align-self: center; margin-top: auto;}
.flexItem h2 {color: #5B7E90;}
.flexItem .partContentText p {margin-bottom: 15px;}
a.flexItem {box-shadow: 8px 8px 20px 0 rgba(0,0,0,.05); transition: box-shadow 0.5s;}
a.flexItem:hover {box-shadow: 8px 8px 30px 0 rgba(0,0,0,.15);}
a.flexItem h2 {transition: color 0.3s; color: #5B7E90;}
#nieuws a.flexItem h2 {min-height:66px; margin-bottom: 20px;}
a.flexItem:hover .partButton.underline {color: #EE9F3F; border-color: #EE9F3F;}
.flexContainerColumns2 .flexItem {width: calc(50% - 30px);}
.flexContainerColumns3 .flexItem {width: calc(33.33% - 30px);}
.flexContainerColumns4 .flexItem {width: calc(25% - 30px);}
/*************************************************
USP's / Benefits
*************************************************/
#about + #usp {padding-top: 0;}
#about + #usp .basicContainer:before {content: ''; height:1px; background-color: #CDD8DD; width: 100%; max-width: 75%; margin-left: auto; margin-right: auto; display: block; margin-bottom: 80px;}
#usp {}
#usp .partContentFileImageGallery {margin-bottom: 15px;}
#usp .flexItem {background-color: #fff; padding-top: 30px; padding-bottom: 30px; border-radius: 3px;}
#usp .flexItem h2 {font-size: 22px; font-weight: 700; color: #5B7E90;}
#usp .flexContainer .partContentText p {margin-bottom: 0px;}
/*************************************************
Opdrachtgevers
*************************************************/
#opdrachtgeversLijst {padding-top: 0;}
#opdrachtgeversLijst .basicContainer:before {content: ''; height:1px; background-color: #CDD8DD; width: 100%; max-width: 75%; margin-left: auto; margin-right: auto; display: block; margin-bottom: 80px;}
#opdrachtgeversLijst ul {text-align: left;}
#opdrachtgeversLijst ul { -webkit-columns: auto /* set number of columns or set to auto */ 320px /* minimal width */; columns: auto /* set number of columns or set to auto */ 320px /* minimal width */; -webkit-column-gap: 15px; column-gap: 15px; }
#opdrachtgeversLijst ul li {margin-bottom: 15px; /* padding:15px; padding-left: 40px; border-radius: 3px; border:solid 1px #DEE5E8; */ /* for browser compability/safari it's better to prevent margin, use padding instead if possible */ -webkit-column-break-inside: avoid; break-inside: avoid; }
/* #opdrachtgeversLijst ul li:before {display: none;} */
/*************************************************
News
*************************************************/
#usp + #nieuws {padding-top: 0;}
#usp + #nieuws .basicContainer:before {content: ''; height:1px; background-color: #CDD8DD; width: 100%; max-width: 75%; margin-left: auto; margin-right: auto; display: block; margin-bottom: 80px;}
.newsDate {margin-bottom: 15px; align-self: center; margin-top: 8px; font-size: 14px; padding-left: 17px; display: inline-block; color: #777; background: url('/images/style/icon-clock.svg') left center no-repeat; background-size: 12px 12px; position: relative;}
.newsDate:first-letter {text-transform: uppercase;}
h1 + .newsDate {margin-top: 0; display: block;}
.basicContainerSmall .newsDate {margin-bottom: 30px;}
/*************************************************
About us / Team
*************************************************/
#about .flexContainerColumns3 .flexItem {box-shadow: 8px 8px 20px 0 rgba(0,0,0,.05); padding-left: 20px; padding-right: 20px;}
/* #about .flexContainerColumns3 .flexItem:last-child {margin-right: 0;} */
#about .partContentFileImageGallery {border-radius: 50%; width: 150px; margin:30px auto 0px auto; overflow: hidden; margin-bottom: 30px;}
.teamLinkContainer {display: flex; margin-bottom: 30px; margin-top: auto; justify-content: center;}
.teamLinkContainer a {
display: flex;
justify-content: center;
align-items: center;
background-color: #EEF2F3;
height: 36px;
width: 36px;
margin-bottom: 30px;
border-radius: 3px;
margin:10px 5px 0px 5px;
}
.teamLinkContainer svg.partSvg {
flex: 1 1 auto;
fill: #000;
max-height: 18px;
max-width: 18px;
transition: fill ease 0.3s;
}
.teamLinkContainer a:hover svg.partSvg {
fill: #EE9F3F;
}
/*************************************************
About us / Team
*************************************************/
/* #opdrachtgevers + #footerLogoContainer {border-top:solid 1px #CDD8DD;}
#opdrachtgeversLijst + #footerLogoContainer {border-top:solid 1px #CDD8DD;} */
.whiteContainer + #footerLogoContainer {border-top:solid 1px #CDD8DD;}
#footerLogoContainer {}
#footerLogoContainer .basicContainer {}
#footerLogoContainer .basicContainer:after {content: ''; display: block; margin-left: auto; margin-right: auto; height:120px; width: 120px; background:url('/images/style/batch-quote.svg') no-repeat; background-size: contain; margin-bottom: -130px;}
#logoItemList {display: flex; flex-wrap: wrap; width: calc(100% + 30px); margin-left: -15px; margin-right: -15px;}
.footerLogoItem {display: flex; flex-wrap: wrap; text-align: left; width: calc(50% - 50px); margin:0px 25px 0px 25px;}
.footerLogoItem .partContentFileImageGallery.single {width: 200px; padding-right: 30px; margin-bottom: 30px;}
.footerLogoItem .partContentText {width: calc(100% - 200px);}
#footerLogoContainer .partContentFileImageGallery figure {max-width: 200px;}
#footerLogoContainer .partContentFileImageGallery figure figcaption {font-size: 16px;}
/*************************************************
References
*************************************************/
#references {}
#references .basicContainer {max-width: 910px; margin-left: auto; margin-right: auto;}
#references .flexItem {text-align: left; box-shadow: 4px 4px 10px 0 rgba(0,0,0,.05); border:solid 1px #f0f0f0;}
#references .flexItem .partContentText {padding-left: 70px; margin-left: 0px; margin-right: 0px; margin:30px; position: relative;}
#references .flexItem .partContentText:before {position: absolute; left:0px; top:-5px; content: '\201D'; font-size:100px; font-family: "Trebuchet MS"; color: #EE9F3F;}
#references .flexItem .partContentText p {display: block; overflow: visible; max-height: 500px;}
#references .partContentFileImageGallery.imagesInRow5 .contentFileImage {box-shadow: 4px 4px 10px 0 rgba(0,0,0,.05); border:solid 1px #f0f0f0; border-radius: 3px; padding:15px 15px;}
#references .partContentFileImageGallery.centerAlign .contentFileImageContainer {align-items: stretch;}
/*************************************************
Content page with sidebar
*************************************************/
.basicContainerTwoColumns {display: flex; justify-content: space-between; align-items: flex-start;}
#leftContainer {flex:1 1 auto; width: 100%; max-width: 840px; text-align: left; padding-right: 60px;}
#rightContainer {flex:1 1 auto; width: 100%; max-width: 400px; margin-bottom: 30px; text-align: left; position: -webkit-sticky; position: sticky; top: 160px;}
#callToActionContainer {background-color: #EEF2F3; box-shadow: 0 2px 2px -2px rgba(0,0,0,0.2); padding:30px; padding-bottom: 0px; margin-bottom: 30px;}
#callToActionContainer h2 {font-size: 24px; font-weight: 700; color: #5B7E90; margin-bottom: 10px;}
#callToActionContainer .partContentText {font-size: 16px;}
#callToActionContainer .partContentText p {margin-bottom: 15px;}
#callToActionContainer .partButton {background-color: #EE9F3F;}
#rightContainerNavigation {background-color: #EEF2F3; box-shadow: 0 2px 2px -2px rgba(0,0,0,0.2); margin-bottom: 30px; font-size: 16px;}
#rightContainerNavigation h2 {font-size: 24px; font-weight: 700; color: #5B7E90; padding:15px 30px; margin-bottom: 0;}
/***********************************************
Mobile toggle menu
***********************************************/
body.mobileMenuToggleActive {position: fixed; /* prevents scrolling bug at the bottom of the screen */ }
#mobileMenuToggle {
font-size: 18px;
font-weight:700;
position:relative;
z-index: 1002;
display:none;
align-items:center;
cursor: pointer;
background-color: transparent;
text-decoration: none;
outline: 0;
-webkit-appearance: none;
align-items: center;
white-space: nowrap;
overflow: hidden;
border: none;
padding:0px;
}
#mobileMenuToggle .mobileMenuButtonLabel {margin-left:5px;}
#mobileMenuToggle .mobileMenuButtonHamburger {width: 20px; height:20px; display:flex; flex-direction:column; justify-content:center;}
#mobileMenuToggle .mobileMenuButtonHamburger span {width: 20px; height: 2px; background-color: #5B7E90; margin: 2px 0px; transition: all 0.3s ease-in-out;}
#mobileMenuToggle .mobileMenuButtonHamburger span:nth-child(2) {width: 15px;}
#mobileMenuToggle.active .mobileMenuButtonHamburger span {background-color: #EE9F3F;}
#mobileMenuToggle.active .mobileMenuButtonHamburger span:nth-child(1) {transform: translateY(6px) rotate(45deg);}
#mobileMenuToggle.active .mobileMenuButtonHamburger span:nth-child(2) {opacity: 0;}
#mobileMenuToggle.active .mobileMenuButtonHamburger span:nth-child(3) {transform: translateY(-6px) rotate(-45deg);}
/* Menu overlay */
#mobileMenuToggleContainer {left: 0%; top: 100px; width: 100%; height: 100%; position: fixed; background-color:#fff; z-index: 1002; display: none;}
body.mobileMenuToggleActive #mobileMenuToggleContainer {display: block;}
#mobileMenuToggleContainerScroll {overflow-y: auto; height: calc(100% - 100px);}
@media screen and (min-width: 1023px){
body.mobileMenuToggleActive {position: static;}
body.mobileMenuToggleActive #mobileMenuToggleContainer {display: none;}
}
@media (max-width: 1023px){
#mobileMenuToggleContainerScroll {overflow-y:scroll; -webkit-overflow-scrolling: touch;}
}
/*************************************************
Social share
*************************************************/
.socialShareContainer {display:flex; align-items:center; flex-wrap: wrap; margin-bottom: 30px; border:solid 1px #CDD8DD; padding:30px; padding-bottom: 10px;}
.socialShareLabel {font-weight: 700; color: #000; margin-bottom: 20px; margin-right: 20px;}
.socialShareContainer a {margin-right: 15px; margin-bottom: 20px; display: flex; justify-content: center; align-items: center; height: 16px; width: 16px;}
.socialShareContainer a:last-child {margin-right: 0px;}
.socialShareContainer a svg.partSvg {fill:#5B7E90; flex: 1 1 auto; max-height:16px; max-width: 16px; transition:fill 0.3s ease;}
.socialShareContainer a:hover svg.partSvg {fill:#EE9F3F;}
/*************************************************
Footer
*************************************************/
footer {color: #fff; background-color: #5B7E90;}
footer .basicContainer {display: flex; flex-wrap: wrap; align-items: flex-start;}
.footerColumn {line-height: 1.4em; font-size: 16px; width: 50%;}
.footerColumnLeft {padding-right: 50px;}
.footerColumnRight {text-align: left; padding-left: 50px;}
.footerColumn a {color: #fff; text-decoration: none;}
#mailTelContainer li {margin-bottom: 30px; display: flex; justify-content: flex-end;}
#mailTelContainer li a {font-size: 28px;}
#mailTelContainer li a svg.partSvg {fill:#fff; height: 18px; max-width: 18px; transition: fill 0.3s; margin-right: 6px; flex:0 0 auto;}
#mailTelContainer li a span {transition: color 0.3s; font-weight: 400; flex:0 0 auto;}
#mailTelContainer li a:hover span {color: #EE9F3F;}
#mailTelContainer li a:hover svg {fill:#EE9F3F;}
.footerColumn .socialContainer {display: flex; justify-content: flex-end;}
.footerColumn .socialContainer a {margin-left: 20px; height: 20px; width: 20px; display: flex; justify-content: center; align-items: center;}
.footerColumn .socialContainer a svg.partSvg {fill:#fff; flex: 1 1 auto; max-width: 20px; max-height: 20px; transition: fill 0.3s;}
.footerColumn .socialContainer a:hover svg.partSvg {fill:#EE9F3F;}
.footerColumnRight ul {}
.footerColumnRight ul li {margin-bottom: 10px;}
.footerColumnRight ul li a {text-decoration: underline; font-weight: 400; color: rgba(255,255,255,1); transition: 0.3s;}
.footerColumnRight ul li a:hover {color: #EE9F3F;}
/* Login */
#formLogin {background-color: #fff; padding:30px; padding-bottom: 0; max-width: 400px; margin-left: auto; margin-right: auto; text-align: left;}