html {}
body {color:#444; font-size:18px; font-weight: 300; font-family: 'Roboto', 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: 500; color: #3d6e93; margin-bottom: 15px;}
h2, .h2 {font-size: 28px; font-weight: 400; color: #f28f2b; margin-bottom: 10px;}
h3, .h3 {font-size: 24px; font-weight: 400; color: #000; margin-bottom: 10px;}
a {}
a:link, a:visited, a:active {}
a:hover {}
strong {font-weight: 700; font-style: inherit;}
em {font-style: italic; font-weight: inherit;}
/*************************************************
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: #f28f2b;}
#topBarSmall .basicContainer {height: 30px; font-size: 14px; display: flex; justify-content: flex-end; align-items: center;}
#topBarSmall .basicContainer a {font-weight: 500; color: #fff; display: flex; align-items: center; text-decoration: none;}
#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: #3d6e93;}
#topBarSmallPhoneEmail a:hover svg.partSvg {fill:#3d6e93;}
/* 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:#3d6e93;}
/*************************************************
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: 50px; transition: height ease 0.3s; /* fade out */}
#topBar.scrolled #logo img {display: block; height: 40px; transition: height ease 0.5s; /* fade in */}
.partNavigation-hvbvr {}
#topBar .partButton {margin-bottom: 0; margin-left: 20px;}
/***********************************************
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: #f0f0f0;}
.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: #3d6e93;}
.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: #000;}
.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: #000;}
#nieuws a.flexItem h2 {min-height:66px; margin-bottom: 20px;}
/*a.flexItem:hover h2 {color: #3d6e93;}*/
a.flexItem:hover .partButton.underline {color: #000; border-color: #000;}
.flexContainerColumns2 .flexItem {width: calc(50% - 30px);}
.flexContainerColumns3 .flexItem {width: calc(33.33% - 30px);}
.flexContainerColumns4 .flexItem {width: calc(25% - 30px);}
/*************************************************
Logo's
*************************************************/
#logos {position: relative;}
#logos:before {content: ''; height:3px; background-color: #f0f0f0; width: 75%; max-width: 600px; position: absolute; top:0; left: 50%;transform: translateX(-50%);}
/*************************************************
News
*************************************************/
.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 {}
#about .flexContainerColumns4 .flexItem {box-shadow: 8px 8px 20px 0 rgba(0,0,0,.05); padding-left: 20px; padding-right: 20px;}
#about .flexContainerColumns4 .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: #EBF0F4;
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: #f28f2b;
}
/*************************************************
References
*************************************************/
#references {}
#references .basicContainer {max-width: 910px; margin-left: auto; margin-right: auto;}
#references .flexItem {text-align: left;}
#references .flexItem .partContentText {padding-left: 70px; width: 100%; margin-left: 0px; margin-right: 0px; }
#references .flexItem .partContentText:before {position: absolute; left:0px; top:-5px; content: '\201D'; font-size:100px; font-family: "Trebuchet MS"; color: #3d6e93;}
#references .flexItem .partContentText p {display: block; overflow: visible; max-height: 500px;}
/*************************************************
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: #f5f5f5; 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: 400; color: #000; margin-bottom: 10px;}
#callToActionContainer .partContentText {font-size: 16px;}
#callToActionContainer .partContentText p {margin-bottom: 15px;}
#rightContainerNavigation {background-color: #f5f5f5; 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: 400; color: #000; padding: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;
flex: 0 0 auto;
}
#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: #3d6e93; margin: 2px 0px; transition: all 0.3s ease-in-out;}
#mobileMenuToggle .mobileMenuButtonHamburger span:nth-child(2) {width: 15px;}
#mobileMenuToggle.active .mobileMenuButtonHamburger span {background-color: #f28f2b;}
#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; background-color: #f5f5f5; box-shadow: 0 2px 2px -2px rgba(0,0,0,0.2); padding:30px; padding-bottom: 10px;}
.socialShareLabel {font-weight: 500; 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:#000; flex: 1 1 auto; max-height:16px; max-width: 16px; transition:fill 0.3s ease;}
.socialShareContainer a:hover svg.partSvg {fill:#3d6e93;}
/*************************************************
Footer
*************************************************/
footer {color: #fff; background-color: #3d6e93;}
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: #3d6e93;}
#mailTelContainer li a:hover svg {fill:#3d6e93;}
.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:#3d6e93;}
.footerColumnRight ul {}
.footerColumnRight ul li {margin-bottom: 10px;}
.footerColumnRight ul li a {text-decoration: underline; font-weight: 400; color: #fff; transition: 0.3s;}
.footerColumnRight ul li a:hover {color: #f28f2b;}
/* Scrolldown knop */
#anchor { top: -189px; /* padding + fixed element height */ position:relative; }
#scrollDownMouse { border: 2px solid #fff; border-radius: 50px; display: block; width: 30px; height: 50px; position:absolute; z-index: 555; bottom: 60px; left: 50%; margin-left: -15px; cursor:pointer; }
#scrollDownMouse:before { position: absolute; top: 10px; left: 50%; content: ""; width: 6px; height: 6px; margin-left: -3px; background-color: #fff; border-radius: 100%; animation: animatedDot 2s infinite; box-sizing: border-box; }
@keyframes animatedDot {
0% {
transform: translate(0, 0);
opacity: 0;
}
40% {
opacity: 1;
}
80% {
transform: translate(0, 20px);
opacity: 0;
}
100% {
opacity: 0;
}
}