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;} html {} h1, h2, h3, h4, .h1, .h2, .h3, .h4 {word-wrap:break-word; line-height: 1.2em;} h1, .h1 {font-size: 50px; font-weight: 300; color: #000; margin-bottom: 30px;} h2, .h2 {font-size: 25px; font-weight: 400; color: #0073A1; margin-bottom: 10px;} 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 {} /* bold & italic */ strong {font-weight: 700; font-style: inherit; color: #000;} em {font-style: italic; font-weight: inherit;} /************************************************* Fundementals *************************************************/ .basicContainer {max-width: 1280px; margin: 0px auto; padding: 0px 20px; text-align: center; min-width: 280px; position: relative;} .basicContainerSmall {max-width: 940px; text-align: left;} .basicContainerSmall .partButton {margin-right: 10px;} .basicContainerColumnItems {padding: 0px;} .introContainer .basicContainer {max-width: 740px; margin:0px auto;} .introContainer .basicContainer .partContentFileImageGallery.single img {margin:0px auto;} /************************************************* Top menu bars *************************************************/ .stickyScroll {height: 130px; position: fixed; top:0; left:0; width: 100%; background: #fff; z-index: 1003; box-shadow: 4px 4px 10px 0 rgba(0,0,0,.05);} .stickyScrollGhost {height: 130px;} /* phone, email and socials */ #topBarSmall {background-color: #f5f5f5; box-shadow: 0 2px 2px -2px rgba(0,0,0,0.2);} #topBarSmall .basicContainer {text-align: right; height: 30px; font-size: 14px; display: flex; justify-content: flex-end; align-items: center; } #topBarSmall .basicContainer a {font-weight: 500; color: #555; display: flex; align-items: center; text-decoration: none;} #topBarSmallPhoneEmail {display: flex; align-items: center;} #topBarSmallPhoneEmail a {margin-left: 20px;} #topBarSmallPhoneEmail a svg {fill:#555; height:12px; transition: fill 0.3s; margin-right: 5px;} #topBarSmallPhoneEmail a span {transition: color 0.3s;} #topBarSmallPhoneEmail a:hover span {color: #0073A1;} #topBarSmallPhoneEmail a:hover svg {fill:#0073A1;} /* 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;} #topBarSmall .socialContainer a svg {fill:#555; height:12px; transition: fill 0.3s;} #topBarSmall .socialContainer a:hover svg {fill:#0073A1;} /* needed for IE */ #topBarSmall .socialContainer .svgIconLinkedIn {width: 12.55px;} #topBarSmall .socialContainer .svgIconFacebook {width: 5.59px;} #topBarSmall .socialContainer .svgIconInstagram {width: 12px;} #topBarSmall .socialContainer .svgIconTwitter {width: 14.75px;} /************************************************* Logo & Navigation *************************************************/ .navigation.basicContainer {height: 100px; display: flex; justify-content: flex-end; align-items: center;} #logo {width: 220px; height: 100%; background: url('/images/style/logo.svg') no-repeat left center; background-size: contain; margin-right: auto;} .partNavigation-hvbvr {} .navigation.basicContainer .partButton {margin-bottom: 0px;} /*********************************************** 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: #000; margin: 2px 0px; transition: all 0.3s ease-in-out;} #mobileMenuToggle .mobileMenuButtonHamburger span:nth-child(2) {width: 15px;} #mobileMenuToggle.active .mobileMenuButtonHamburger span {background-color: #FF404F;} #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%; opacity: 0; visibility: hidden; position: fixed; background-color:#fff; z-index: 1002; transition:0.3s;} body.mobileMenuToggleActive #mobileMenuToggleContainer {opacity: 1; visibility: visible;} #mobileMenuToggleContainerScroll {overflow-y: auto; height: calc(100% - 100px);} @media (max-width: 667px){ #mobileMenuToggleContainerScroll {overflow-y:scroll; -webkit-overflow-scrolling: touch;} } /*********************************************** Parallax images ***********************************************/ .headerContainer {position: absolute; top:0; left:50%; transform: translateX(-50%); height :100%; width: 100%; max-width: 1280px; padding-left: 20px; padding-right: 20px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; text-align: left;} .headerContainer .h1 {color: #fff; text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5); margin-bottom: 0px; font-weight: 500;} .headerContainer .titleContainer {} .partSlider .headerContainer .h1 {border-bottom: solid 6px #fff; display: inline; padding-bottom: 5px; line-height: 1.4em;} .headerContainer .partButton {margin-bottom: 0px; margin-top: 30px;} .parallaxContainer {background-repeat: no-repeat; position: relative; background-attachment: fixed;} .parallaxContainerTop {background-position: top 130px center; background-size: contain; padding-top: 26%;} .parallaxContainerMiddle {background-position: center; background-size: cover; padding-top: 26%;} .parallaxContainerTop .headerContainer .h1 {border-bottom: solid 6px #fff; display: inline; padding-bottom: 5px; line-height: 1.4em;} /*********************************************** Basic lay-outs ***********************************************/ .whiteContainer, .greyContainer, .colorContainer, footer {padding: 100px 0px 75px 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: linear-gradient(to right, #89B5CE 0%, #0073A1 100%);} .colorContainer h1 {color: #fff;} .colorContainer .partContentText {color: #fff;} .basicContainerColumnItems .flexItem .partContentText {padding-bottom: 0px;} .colorContainer .flexContainer .partContentText {color: #555;} /* Columns */ .flexContainer {display: flex; flex-direction:row; flex-wrap: wrap; justify-content: center; 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; align-items: center; max-width: 420px;} .flexItem .partContentFileImageGallery {width: 100%; margin-bottom: 30px;} .flexItem .partContentText {font-size: 16px;} #diensten .flexContainer .flexItem .partContentText, #blogs .flexContainer .flexItem .partContentText, #homeBlogs .flexContainer .flexItem .partContentText, #diensten .flexContainer .flexItem h2, #blogs .flexContainer .flexItem h2, #homeBlogs .flexContainer .flexItem h2 { margin-left: 30px; margin-right: 30px; } .flexItem .partButton {align-self: center; margin-top: auto;} .flexItem h2 {color: #000;} 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;} #blogs a.flexItem h2 {min-height:72px;} a.flexItem:hover h2 {color: #0073A1;} .flexContainerColumns2 .flexItem {width: calc(50% - 30px);} .flexContainerColumns3 .flexItem {width: calc(33.33% - 30px);} .flexContainerColumns4 .flexItem {width: calc(25% - 30px);} /************************************************* Home *************************************************/ /* USP's / Benefits */ #usp {padding-top: 80px;} #usp .partContentFileImageGallery.single {nargin-bottom: 15px; display: flex; justify-content: center; align-items: center;} #usp .partContentFileImageGallery.single img {margin-bottom: 0px;} #usp .flexContainer .partContentText p {margin-bottom: 0px;} /************************************************* News *************************************************/ .newsDate {margin-bottom: 30px; 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: -20px; display: block;} #blogs, #homeBlogs {padding-top: 70px;} #blogs .basicContainer {display: flex;} .blogListLeftContainer {width: calc(100% - 393px);} .blogListLeftContainer .flexContainer {justify-content: flex-start;} .blogListRightContainer {width: 393px; padding-left: 30px; margin-top: 30px;} #tagList {display: flex; flex-wrap: wrap; font-size: 14px; font-weight: 400; margin-bottom: 20px;} #tagList li {margin:0px 10px 10px 0px;} #tagList li a {display: block; text-transform: capitalize; color: #777; text-decoration: none; border:solid 1px #bbb; padding:6px 10px; border-radius: 14px; transition: 0.3s; background-color: #fff;} #tagList li.selected a, #tagList li a:hover {background-color: #0073A1; border-color: #0073A1; color: #fff;} /************************************************* About us / Team *************************************************/ #overons {} #overons .flexContainerColumns4 .flexItem {box-shadow: 8px 8px 20px 0 rgba(0,0,0,.05); padding-left: 20px; padding-right: 20px;} #overons .partContentFileImageGallery.single img {border-radius: 50%; width: 150px; margin:30px auto;} .teamLinkContainer {display: flex; margin:30px; margin-top: auto; justify-content: center;} .teamLinkContainer a {text-decoration: none; margin:0px 10px;} .teamLinkContainer .svgIcon {height: 16px; fill: #555; transition: fill 0.3s;} .teamLinkContainer .svgIcon:hover {fill: #0073A1;} .teamLinkContainer .svgIconPhone {width: 16px;} .teamLinkContainer .svgIconEnvelope {width: 18px;} .teamLinkContainer .svgIconLinkedIn {width: 17px;} .teamLinkContainer .svgIconFacebook {width: 8px;} .teamLinkContainer .svgIconInstagram {width: 16px;} .teamLinkContainer .svgIconTwitter {width: 18px;} /************************************************* References *************************************************/ #references {} #references .basicContainer {max-width: 840px; margin-left: auto; margin-right: auto;} #references .flexContainer {justify-content: flex-start;} #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:30px; content: '\201D'; font-size:100px; font-family: "Trebuchet MS"; color: #0073A1;} #references .flexItem .partContentText p {display: block; overflow: visible; max-height: 500px;} /************************************************* Side menu *************************************************/ .whiteContainer.sideMenuContainer {padding:0px;} .sideMenuContainer #sideMenuContainer {display: table; text-align: left; width: 100%;} #sideMenuLeft, #sideMenuContent {display: table-cell; vertical-align: top;} #sideMenuLeft {padding-top: 68px; padding-bottom: 40px; padding-right: 20px; width: 28%; max-width: 700px; background-image: linear-gradient(to right, #fff, #f4f4f4);} #sideMenuLeft h2 {margin-bottom: 20px;} #sideMenuLeft h2 a {color: #000; text-decoration: none;} #sideMenuContent {padding:60px 0px 30px 60px; max-width: 760px;} #sideMenuContent .partContentText {max-width: 100%;} /************************************************* Call to action popup *************************************************/ #callToActionPopupContainer {display: flex; flex-wrap: wrap; justify-content: flex-start; width: 647px; background-color: #fff;} #callToActionPopupContainer h2 {margin-bottom: 15px;} #callToActionPopupContainerColumnLeft {flex:0 1 auto; align-self: auto; float: left; width: 60%; padding:40px;} #callToActionPopupContainerColumnRight {flex:0 1 auto; align-self: auto; float: left; width: 40%; background: url('/images/style/callToActionPopup.jpg') no-repeat center; background-size: cover;} @media screen and (max-width: 667px){ #callToActionPopupContainer {display: block; width: auto;} #callToActionPopupContainerColumnLeft {float: none; width: 100%; padding:20px;} #callToActionPopupContainerColumnRight {display: none;} } /************************************************* Social share *************************************************/ .socialShareContainer {display:flex; align-items:center; flex-wrap: wrap; margin-bottom: 30px; background-color: #f0f0f0; box-shadow: 0 2px 2px -2px rgba(0,0,0,0.2); padding:30px;} .socialShareLabel {font-weight: 500; color: #000;} .socialShareContainer a {margin-left: 20px; display:flex; align-items:center; justify-content:center;} .socialShareContainer a svg {fill:#000; height:16px; transition:0.3s ease;} .socialShareContainer a:hover svg {fill:#0073A1;} .socialShareContainer .svgIconPhone {width: 16px;} .socialShareContainer .svgIconEnvelope {width: 18px;} .socialShareContainer .svgIconLinkedIn {width: 17px;} .socialShareContainer .svgIconFacebook {width: 8px;} .socialShareContainer .svgIconInstagram {width: 16px;} .socialShareContainer .svgIconTwitter {width: 18px;} /************************************************* Footer *************************************************/ footer {color: #fff; background-color: #222222;} footer .basicContainer {display: flex; flex-wrap: wrap; justify-content: center;} .footerColumn {line-height: 1.4em; font-size: 16px; width: 50%;} .footerColumnLeft {text-align: right; padding-right: 50px;} .footerColumnRight {text-align: left; padding-left: 50px;} .footerColumn a {color: #fff; text-decoration: none;} #mailTelContainer li {margin-bottom: 30px; display: block;} #mailTelContainer li a {font-size: 28px; display: inline-flex; justify-content: flex-end; align-items: center;} #mailTelContainer li a svg {fill:#fff; width: 18px; transition: fill 0.3s; margin-right: 10px;} #mailTelContainer li a span {transition: color 0.3s;} #mailTelContainer li a:hover span {color: #0073A1;} #mailTelContainer li a:hover svg {fill:#0073A1;} #mailTelContainer .svgIconPhone {height: 18px;} #mailTelContainer .svgIconEnvelope {height: 13.16px;} .footerColumn .socialContainer {display: flex; justify-content: flex-end; align-items: center;} .footerColumn .socialContainer a {margin-left: 30px;} .footerColumn .socialContainer a svg {fill:#ccc; height:18px; transition: fill 0.3s;} .footerColumn .socialContainer a:hover svg {fill:#0073A1;} /* needed for IE */ .footerColumn .socialContainer .svgIconLinkedIn {width: 17.99px;} .footerColumn .socialContainer .svgIconFacebook {width: 8.39px;} .footerColumn .socialContainer .svgIconInstagram {width: 18px;} .footerColumn .socialContainer .svgIconTwitter {width: 22.13px;} .footerColumnRight ul {} .footerColumnRight ul li {margin-bottom: 10px;} .footerColumnRight ul li a {text-decoration: underline; font-weight: 400; color: #ccc; transition: 0.3s;} .footerColumnRight ul li a:hover {color: #0073A1;} /* Full width footer list */ #footerFullWidthList {width: 100%; margin-top: 30px; padding-top: 30px; border-top: solid 1px rgba(255, 255, 255, 0.2);} #footerFullWidthList ul {font-size: 14px; line-height: 1.3em;} #footerFullWidthList ul li {margin-bottom: 5px; display: inline-block;} #footerFullWidthList ul li a {text-decoration: none; color: #fff;} #footerFullWidthList ul li a:hover {color: #A69016; text-decoration: underline;} #footerFullWidthList ul li a::after {content: ", ";} #footerFullWidthList ul li:last-child {margin-right: 0;} #footerFullWidthList ul li:last-child a::after {content: '';} /************************************************* Animation *************************************************/ .hidden {opacity:0;} .animated.visible {opacity:1;} .animated {-webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated.infinite {-webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } /************************************************* Develop *************************************************/ #bottomBar {background: #0073A1; position: fixed; bottom:0; left:0; width: 100%; text-align: center; color: #fff; padding: 10px 0px;}