body {color:#555; font-size:18px; font-weight: 300; font-family: 'Open Sans', sans-serif; -webkit-text-size-adjust: 100%; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;} html {} h1, h2, h3, .heading1, .heading2, .heading3 {word-wrap:break-word; line-height: 120%; display: block; font-family: 'Roboto', sans-serif;} h1, .heading1 {font-size: 60px; font-weight: 300;color:#031f73; margin-bottom: 35px; text-transform: uppercase;} h2, .heading2 {font-size: 42px; font-weight: 500;margin-bottom: 35px; color: #000;} .blueContainer h2 {color: #fff;} h3, .heading3 {font-size: 26px; font-weight: 400; color: #000;} a {outline:0; cursor: pointer; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent;} a:link, a:visited, a:active {} a:hover {} strong {font-weight: 700; font-style: inherit;} em {font-style: italic; font-weight: inherit;} .partClearBoth {height: 1px; clear: both;} /*CTA Buttons*/ .ctaButton {display: inline-block; padding:0px 0px 10px 0px; font-size: 22px; z-index: 99; position: relative; transition:0.5s; font-weight: 500; margin-bottom: 30px; margin-right:20px; margin-left: 14px; cursor: pointer;border-bottom:5px solid;text-decoration: none; font-family: 'Roboto', sans-serif;} .ctaButton.small {font-size: 18px;padding-left: 0px;padding-right: 0px;} .ctaButton.brown {color:#a69764;} .ctaButton.brown:hover {color:#031f73;} .blueContainer .ctaButton.brown:hover {color:#fff;} .ctaButton.blue {color:#031f73;} .ctaButton.blue:hover {color:#a69764; border-color: #a69764;} .lightBrownContainer .ctaButton.blue:hover {color:#fff; border-color: #fff;} .ctaButton.white {border-color:#fff;color: #fff;} .ctaButton.white:hover {border-color:#a69764;color:#a69764;} /*End*/ /*MainContainers*/ .whiteContainer {position: relative;} .greyContainer {background-color: #ECEDF1; position: relative;text-align: center;margin-bottom: -30px;} .blueContainer {background-color: #031f73;position: relative;} .lightBrownContainer {background-color:#a69764;position: relative;background-repeat: no-repeat;background-position: right center;background-size:45%;margin-bottom: -80px;padding-bottom: 80px; } /*End*/ /*Schuine strepen*/ .diagonalElementGrey:before, .diagonalElementGreyAfter:after, .diagonalElementWhite:before, .diagonalElementWhiteAfter:after, .diagonalElementBlue:before, .diagonalElementLightBrown:before { content: '';height: 100px;left: 0;position: absolute; right: 0;transform: skewY(-2.3deg);transform-origin: 100%;z-index: 10; } .diagonalElementGrey:before {background:#ECEDF1; top: -100px;} .diagonalElementGreyAfter:after {background:#ECEDF1; bottom: 0px;} .diagonalElementWhite:before {background:#fff; top: -100px;} .diagonalElementWhiteAfter:after {background:#fff; bottom: 0px;} .diagonalElementBlue:before {background:#031f73; top: -100px} .diagonalElementLightBrown:before {background:#a69764; top: -100px;} /*BasicContainers*/ .basicContainer {max-width:1440px; min-width: 320px; margin: 0px auto; padding: 90px 40px 60px 40px;text-align: center;} .basicContainer.basicContainerNoPadding {padding-top:0px;padding-bottom: 0px;} .basicContainerSmall {max-width:860px;} .basicContainerSmall .partContentText {position: relative;z-index: 99} .contentContainer {text-align: left; margin-left: 0px; margin-right: 0px; padding-bottom: 60px; max-width: 860px;} .contentContainer .partContentFileImageGallery.single {margin-bottom: 25px;} .contentContainer .partContentText h2 {margin-bottom: 5px;} /*End*/ .smallMargin {margin-bottom: 10px;} /*headerelementen*/ nav {} #topRow {background: #030a50;color:#fff;font-size: 14px;} #topRow .basicContainer {display: flex; justify-content: flex-end; align-content: center; padding-top: 10px; padding-bottom: 10px; font-weight: 400;} .news, .vacature {color:#fff; margin-left:25px;text-decoration: none; display: inline-block; line-height: 20px; transition: ease 0.3s;} .news:hover, .vacature:hover {color:#a69764;} .socialContainer {display: flex;} .socialContainer li {margin-left: 25px; text-align: center;} .socialContainer a {display: block;transition: 0.5s} .socialContainer a svg {fill:#fff; transition: ease 0.3s; height:18px; position: relative;} .socialContainer a:hover svg {fill:#a69764;} /*flags*/ .flag {width: 24px; height: 18px; float: right;position: relative; opacity: 0.5; transition: 0.3s; margin-left: 10px;} .flag:last-child {margin-left: 0px;} .flag:hover {opacity: 1} .nl {background: url(/images/style/flags/nl.svg) no-repeat center left ;background-size: contain;} .de {background: url(/images/style/flags/de.svg) no-repeat center left ;background-size: contain; margin-right: 25px;} .en {background: url(/images/style/flags/en.svg) no-repeat center left ;background-size: contain;} .active {opacity: 1} /*menu*/ #menu {background: #031f73; font-family: 'Roboto', sans-serif; font-weight: 400; letter-spacing: 0.5px;} #menu .basicContainer {height: 90px;} .logo {background: url(/images/style/logo.svg) no-repeat center left; background-size: contain;width: 235px;height: 90px;float: left; position: relative;top: 50%;transform: perspective(1px) translateY(-50%);} #mobileMenuContainer {position: fixed; overflow-x:hidden; background-color:#fff; z-index: 9999; top:0; right:0; margin-right: -30%; width: 30%; height: 100%; transition: 0.5s;} #mobileMenuContainer.mobileMenuContainerActive {margin-right: 0px; transition: 0.5s; min-width: 320px;} #mobileMenuOverlay {transition: 0.2s; background-color: rgba(0,0,0,0.0); position: fixed; top:0; left: 0; height: 100%; width: 100%; z-index: 1000; visibility: hidden; opacity: 0;} #mobileMenuOverlay.mobileMenuContainerActive {background-color: rgba(0,0,0,0.8); visibility: visible; opacity: 1;} .mobileMenuOpen, .mobileMenuClose {cursor: pointer; background-repeat: no-repeat; font-size: 20px;} .mobileMenuOpen {background-image: url('/images/style/icon-bars.svg'); color:#fff;float: right;border-bottom:5px solid transparent;transition: 0.3s; padding:33px 25px 32px 59px; background-size: 26px 26px; background-position: left 24px center; } .mobileMenuOpen:hover {color: #000;border-color:#a69764;background: #fff;background-image: url('/images/style/icon-bars-black.svg'); background-repeat: no-repeat; background-size: 26px 26px; background-position: left 24px center;} .mobileMenuClose {background-image: url('/images/style/icon-cross.svg');background-position: left 20px center; padding-left: 50px;color:#fff;background-color: #a69764; background-size: 20px 20px; display: block; line-height: 90px; font-weight: 400;} .stickyScroll {position: fixed; top:0; left:0; width: 100%; height: 130px; z-index: 9998; -webkit-transform: translateZ(0); transform: translateZ(0); will-change: transform; -webkit-transition: -webkit-transform .5s; transition: -webkit-transform .5s; transition: transform .5s; transition: transform .5s, -webkit-transform .5s; } .stickyScroll::after {clear: both; content: ""; display: block; } .stickyScroll.is-hidden {-webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); } .stickyScrollGhost {height: 130px; background-color: #030a50;} /*Searchicon*/ .searchIcon {width: 66px; height: 26px; transition: 0.3s; float:right; height: 90px; padding:0px 20px; display: block; border-bottom: solid 5px transparent} .searchIcon svg {fill: #fff; margin-top: 32px;} .searchIcon:hover {background-color: #fff; border-color: #a69764;} .searchIcon:hover svg {fill: #000;} /*Big image with text*/ header {overflow: hidden; position: relative;} #topImage {height:400px;background-repeat: no-repeat;background-position: center center;background-size:cover;position: relative; text-align: center; animation: zoom 20s infinite;} #topImage.brownOverlay {height: 250px; } /* #topImage.brownOverlay:before {content: ''; background-color: rgba(166, 151, 100, 0.8); position: absolute; z-index: 1; width: 100%; height: 100%; left: 0; top: 0;} */ header.homepage #topImage {height:calc(100vh - 130px); animation: zoom 20s infinite;} header.homepage #topImage .partContentFileImageGallery.single, header.homepage #topImage .partContentFileImageGallery.single * {height: 100%;} header.homepage h1 {font-size: 100px; color: #fff; text-transform: none; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); font-weight: 400;} header.homepage h1 strong {color: #031f73; font-weight: 500;} header.homepage .ctaButton {font-size: 26px; margin-top: 40px;} header.noImage #topImage {height: 195px;} @keyframes zoom { from { transform: none; } 50% { transform: scale(1.1); } to { transform: none; } } #topTextContainer {position: absolute;left: 50%;top: 50%;transform: translate(-50%,-60%);z-index: 1;width: 100%; padding:0 30px; text-align: center;} #topTextContainer .ctaButton {margin-bottom: 0;} #topTextContainer strong {font-weight:normal;} #topImage h1 {color:#fff; margin-bottom: 0px;text-shadow:0 1px 0 rgba(0, 0, 0, 0.4)} #scrollDownButton span {position: absolute; bottom: 100px; left: 50%; margin-left: -20px; width: 40px; height: 60px; border: 3px solid #fff; border-radius: 50px; box-sizing: border-box; z-index: 1;} #scrollDownButton span::before {position: absolute; top: 10px; left: 50%; content: ''; width: 8px; height: 8px; margin-left: -4px; background-color: #fff; border-radius: 100%; -webkit-animation: sdb10 2s infinite; animation: sdb10 2s infinite; box-sizing: border-box;} @-webkit-keyframes sdb10 {0% {-webkit-transform: translate(0, 0); opacity: 0; } 40% {opacity: 1; } 80% {-webkit-transform: translate(0, 20px); opacity: 0; } 100% {opacity: 0;}} @keyframes sdb10 {0% {transform: translate(0, 0); opacity: 0; } 40% {opacity: 1; } 80% {transform: translate(0, 20px); opacity: 0; } 100% {opacity: 0;}} .disciplines {text-transform: uppercase; background: rgba(166,151,101,1); font-weight: 300; letter-spacing: 1px; font-size: 20px; font-family: 'Roboto', sans-serif; font-weight: 400;} .disciplines .flexContainer {width: 100%;margin:0px; margin:0 auto;} .disciplines a.flexItem {margin: 0px;text-align: center;width: 33.33%;background: none;color:#fff;text-decoration: none;padding:20px 0;transition: 0.3s} .disciplines a.flexItem:hover {box-shadow: none; background-color: #031f73;} .flexItem.right#rightImage {overflow: hidden;} #rightImage .partContentFileImageGallery {height: calc(100% + 100px);} #rightImage .partContentFileImageGallery * {height: 100%;} #rightImage .partContentFileImageGallery {position: absolute; top:0; right:0; bottom: 0; left:0;} #rightImage .partContentFileImageGallery.active {z-index: 10; animation-name: fadeIn; animation-duration: 0.5s; animation-fill-mode: both;} @keyframes fadeIn {from {opacity: 0; } to {opacity: 1;}} /*FlexContainer and items*/ .flexContainer {width: calc(100% + 40px); margin-left: -20px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start;} .flexItem {flex:0 1 auto; align-self: auto; float:left; margin:0px 20px 40px 20px; background-color: #fff;text-align: left;text-decoration: none; position: relative; padding-bottom: 55px;z-index: 9} .flexContainerColumns2 .flexItem {width: calc(50% - 40px);} .flexContainerColumns3 .flexItem {width: calc(33.33% - 40px);} .flexContainerColumns4 .flexItem {width: calc(25% - 40px);} .flexItem .partContentFileImageGallery.single {margin-bottom: 0px;overflow: hidden; background-color: #031f73; position: relative;} .flexItem .partContentFileImageGallery.single img {width: 100%;} .flexItem .partContentFileImageGallery.single:before {content: ''; position: absolute; width: 100%; height: 100%; background-color: rgba(3, 31, 115, 0.6); opacity: 0; transition: 0.5s; z-index: 1;} .flexItem.twoThird .partContentFileImageGallery.single:before {background-color: rgba(174, 153, 98, 0.8);} .flexItem h3 {padding: 25px 25px 5px 25px;text-decoration: none;color:#000;transition: color 0.3s} .flexItem .ctaButton {position: absolute; bottom: 25px; left:25px; margin-left: 0px; margin-bottom: 0px;} .flexItem:hover .ctaButton {border-color: #031f73; color: #031f73;} .category {font-size: 14px;text-transform: uppercase;color: #999; font-weight: 300;display: block;text-decoration: none;transition: color 0.3s; letter-spacing: 1px; line-height: 160%;} .flexItem .category {padding:0px 25px 25px 25px;} .flexContainer .flexItem:not(.contact) .partContentText {padding:5px 25px 20px 25px; color: #555;} .flexContainer .flexItem .partContentText p {margin-bottom: 0;} .flexContainerWithShadow .flexItem {box-shadow: 0 1px 7px rgba(0,0,0,.05);} .flexContainerWithShadow .flexItem:hover {box-shadow: 0 1px 7px rgba(0,0,0,.2);} .flexContainerWithShadow .flexItem:hover .partContentFileImageGallery.single:before {opacity: 1;} .flexContainerNoLink .flexItem {padding-bottom: 0; font-size: 16px; font-weight: 400;} .flexContainerNoLink .flexItem .partContentText p {overflow: visible; height: auto; display: block; margin-bottom: 20px;} .flexContainerNoLink {padding-top: 80px;} .flexItem.twoThird {width: calc(66.66% - 40px);position: relative;background-repeat: no-repeat;background-size: cover; background-position: center; transition: 0.5s} .flexItem.twoThird:before {content: ''; position: absolute; width: 100%; height: 100%; background-color: rgba(174, 153, 98, 0.8); opacity: 0; transition: 0.5s;} .flexItem.twoThird:hover:before {opacity: 1;} .flexItem.twoThird .textOverlay {position: absolute;bottom:0px;width: 100%;color: #fff; padding:25px;transition: 0.5s; z-index: 1;} /* .flexItem.twoThird:hover .textOverlay {background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.3));} */ .flexItem.twoThird .category {color:#fff;} .flexItem.twoThird .textOverlay h3 {padding:0px;transition: 0.5s;color:#fff; font-size: 42px;} .flexItem.twoThird .textOverlay .category {padding:0px;} .flexItem.blue {background-color: #031f73;} .flexItem.blue .partContentText p {color:#fff;} .flexItem.blue .category {color:rgba(255,255,255,0.6);} .flexItem.blue h3 a:hover {color:#a69764;} .flexItem.blue:hover .ctaButton {color:#fff;border-color:#fff;} .flexItem.blue h3 {color:#fff;} .marginBottom100 {margin-bottom: 100px;} /*Productdetail*/ .lightBrownContainer .ctaButton.showMoreButton {position: relative; margin-bottom:100px; font-size: 40px;} .ctaButton.showMoreButton:after {content: ''; position: absolute; bottom:-38px; left: 50%; margin-left: -13px; background: url(/images/style/icon-arrow-down-thick.svg);width: 26px; height: 20px;background-size: contain;background-repeat: no-repeat;transition: 0.5s} .ctaButton.showMoreButton:hover {color:#031f73;border-color:#031f73;} .ctaButton.showMoreButton:hover:after {background: url(/images/style/icon-arrow-down-thick-blue.svg); background-size: contain;background-repeat: no-repeat;} .ctaButton.showMoreButtonOpen:after {transform: scaleY(-1);} .showMoreContainer {display: none;} .showMoreContainerOpen {display: block;} .showMoreContainer .contentContainer {text-align: center; margin-left: auto; margin-right: auto; padding-bottom: 0px;} .showMoreContainer .contentContainer .partContentText {color: rgba(255,255,255,0.7);} /*Slidecontainer*/ .flexContainerColumns2 {margin-bottom: -100px;} .flexContainerColumns2 .left {margin-top: 60px;padding-bottom:160px;z-index: 10} .flexContainerColumns2 .flexItem {background-color: transparent;} .flexContainerColumns2 .flexItem .partContentText {padding:0px;} ul#serviceMenu {font-weight: 300; letter-spacing: 1px; font-size: 20px; font-family: 'Roboto', sans-serif; font-weight: 400;} ul#serviceMenu li {} ul#serviceMenu li a {border-bottom:1px solid #ECEDF1;display: block; line-height: 60px; height: 60px; padding-left: 25px;width: calc(100% + 40px);text-transform: uppercase;text-decoration: none;color:#000;transition: color 0.3s} ul#serviceMenu li a:hover {border:none;background-color: #AE9962;position: relative;z-index: 1;color:#fff;text-decoration: none;} ul#serviceMenu li a:hover:after {content: '';border-style: solid;border-width: 30px 30px 30px 1px;right: -43px;border-color: #AE9962 transparent #AE9962 #AE9962;top: 0;position: absolute;width: 43px;} .flexContainerColumns2 .right {margin-top: -100px;} #introBlock {background-color: #ECEDF1; padding:50px 50px 20px 50px; text-align: left; position: relative; margin-top: -195px; float: left; max-width: 860px;} #introBlock h1 {text-transform: none; font-weight: 500;} #introBlock .partContentText {font-weight: 600; color: #000; font-size: 24px;} .socialShareContainer {float: left; margin-left: 40px; text-align: left;} .socialShareContainer .socialShareIcons {margin-top: 20px;} .socialShareContainer .socialShareIcons li {display: inline-block; vertical-align: middle; margin-right: 14px; text-align: center;} .socialShareContainer .socialShareIcons li:last-child {margin-right: 0px;} .socialShareContainer .socialShareIcons a {background: #a69764;width: 60px;height: 60px;display: block;transition: 0.5s} .socialShareContainer .socialShareIcons a svg {fill:#fff; transition: 0.3s; height:18px; top: 50%;transform: perspective(1px) translateY(-50%);position: relative;} .socialShareContainer .socialShareIcons a:hover {background:#031f73;} .svgIconFacebook {width: 9px;} .svgIconTwitter {width: 19px;} .svgIconLinkedIn {width: 22px;} .svgIconEnvelope {width: 22px;} .filterCategory {margin-bottom: 92px;} .filterCategory a {font-size: 25px; font-weight: 700;background-color: #fff;margin-bottom: 40px;color:#000;text-decoration: none;margin-bottom: 40px;display: inline-block;padding: 20px 20px 20px 20px;border:1px solid #fff;border-radius: 5px;transition: 0.3s;margin:0 20px;} .filterCategory a:hover, .filterCategory a.selected{background-color:#031f73;color:#fff;} .lightBrownContainer h2 {color:#fff;} .lightBrownContainer .ctaButton {margin-right: 20px; left: 0; bottom: 0; margin-bottom: 20px; position: relative;} .lightBrownContainer .category, #introBlock .category {font-size: 16px;} .lightBrownContainer .category {color: #fff; padding:0px;} .contactPage {padding-top: 180px;} .flexItem .flexItemContent { padding: 10px 25px 0px 25px;} /* .flexItem .flexItemContent .partContentFileAdmin, .flexItem .flexItemContent .partContentFileAdmin ul, .flexItem .flexItemContent .partContentFileAdmin ul li:last-child{ margin-bottom: 0; } */ .partGoogleMaps {width: 100%; height: 600px;margin-bottom: -50px;} .partGoogleMaps iframe {width: 100%; height: 100%;} /*Blue stuff*/ .blueContainer {background-image: url(/images/style/blue-background-image.png);background-size: cover; color: #fff; margin-top: 50px;} .blueContainer .partContentText {color: rgba(255,255,255,0.7);} .blueContainer .partContentText p {margin-bottom: 40px;} .lessMargin {margin-top: 10px;} footer {background: #252525; color:rgba(255,255,255,0.3); font-size: 14px; } footer .basicContainer {padding: 20px; display: flex; justify-content: space-between;} footer span {} footer ul {} footer ul li {display: inline-block;} footer ul li a {color:#fff;margin-left: 20px;text-decoration: none; display: block; color:rgba(255,255,255,0.4); transition: 0.3s; margin-bottom: 20px;} footer ul li a:hover {text-decoration: none; color: #fff;} /* vacatures */ ul.vacancyList {margin-bottom: 30px; font-size: 20px; font-family: 'Roboto', sans-serif; font-weight: 400;} ul.vacancyList li {border-bottom: 1px solid #ECEDF1;} ul.vacancyList li a {padding: 20px 20px 20px 63px; display: block; color: #000; background: url(/images/style/icon-vacancies.svg) left 20px center no-repeat; background-size: 23px 30px; text-decoration: none;} ul.vacancyList li a:hover {color: #fff; background:#AE9962 url(/images/style/icon-vacancies-hover.svg) left 20px center no-repeat; background-size: 23px 30px;} .vacatureIframe {width: 100%; height: 1400px; border:none;} /* ViewSearch */ #searchContainer .partSearchBar {margin-bottom: 30px;} #searchContainer:after {background: none;} #searchContainer .searchResultItem .partContentText, #searchContainer .searchResultItem h2 { text-align: left; } form { text-align:left;}