html {}
body {color:#000; font-size:16px; font-weight: 400; font-family: 'Libre Franklin'; -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; font-weight: 700; text-transform: uppercase;}
h1, .h1 {font-size: 26px; margin-bottom: 20px;}
h2, .h2 {font-size: 22px; margin-bottom: 15px;}
h3, .h3 {font-size: 18px; margin-bottom: 20px;}
h2 + h3 {margin-top: -20px;}
a {}
a:link, a:visited, a:active {}
a:hover {}
strong {font-weight: 700; font-style: inherit;}
em {font-style: italic; font-weight: inherit;}
.buttonContainer {display: flex; flex-wrap: wrap; padding-bottom: 15px;}
.buttonContainer .partButton {margin-right: 15px; margin-bottom: 15px;}
.buttonContainer .partButton:last-child {margin-right: 0px;}
.basicContainer {max-width: 980px; margin:0px auto; padding:35px 40px; padding-bottom: 20px;}
.basicContainer.centered {text-align: center;}
.whiteContainer {}
.greyContainer {background-color: #e0e1e2;}
.redContainer {background-color: #a71930; color: #fff;}
.redContainer .partContentText a {color: #fff; font-weight: 400; border-bottom: solid 1px #fff; transition: border-color 0.3s;}
.redContainer .partContentText a:link, .redContainer .partContentText a:visited, .redContainer .partContentText a:active {color: #fff; text-decoration:none;}
.redContainer .partContentText a:hover {color: #fff; text-decoration:none; border-color: #000;}
.anchor {
top: -80px; /* padding + fixed element height */
position:relative;
}
#searchIcon {width:80px; margin-bottom: 20px;}
/**********************************************
Fundementals
**********************************************/
#stickyTopBar {width: 100%; position: fixed; left: 0; top: 0; z-index: 1003; transition:ease 0.3s; /* fade out */}
#stickyTopBar, #stickyTopBarGhost {height: 125px; background: #a71930;}
#stickyTopBar .basicContainer {height:100%; display:flex; padding-bottom: 35px; align-items:flex-end; max-width: 1280px; text-transform: uppercase; font-size: 16px;}
#stickyTopBar #logo {margin-right: auto;}
#stickyTopBar #logo img {display:block; height:55px; transition: height ease 0.5s;}
#stickyTopBar.scrolled {height:80px; transition: ease 0.5s; /* fade in */}
#stickyTopBar.scrolled .basicContainer {padding-top: 25px; padding-bottom: 25px;}
#stickyTopBar.scrolled #logo img {height:30px;}
.partNavigation {margin-bottom: -5px;}
nav#scrollMenu {margin-bottom: -5px;}
nav#scrollMenu ul {display: flex;}
nav#scrollMenu ul li {margin-left: 20px;}
nav#scrollMenu ul li a {color: #fff; text-decoration: none; padding:5px 10px; transition: 0.3s; border-radius: 5px; display: block;}
nav#scrollMenu ul li a:hover, nav#scrollMenu ul li.active a {background-color: #fff; color: #a71930;}
header {}
#videoContainer { width: 100%; padding-top: 24.3055555556%; background-color: #000; overflow: hidden; position: relative }
#videoContainer video { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100% }
/* vacancies */
#vacanciesContainer {}
#vacanciesContainer .basicContainer {padding:0; overflow: hidden; max-width: 1440px;}
#vacancyList {display: flex; flex-wrap: wrap; width: calc(100% + 20px); margin-left:-5px; margin-right: -5px;}
.vacancyItem {flex: 0 0 calc(33.3333333333% - 10px); background-color: #e0e1e2; transition: background-color ease 0.3s; padding:60px 40px 40px 40px; display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 10px; margin-left: 5px; min-height: 160px; margin-right: 5px; color: inherit; text-decoration: none;}
.vacancyItem:last-child {flex-grow: 1;}
.vacancyItem h2 {margin-bottom: 15px; max-width: 430px; text-transform: uppercase; line-height: 1.2em; word-break: break-word;}
.vacancyItem svg {height:9px; fill: #4c4d4f; margin-top: auto;}
.vacancyItem:hover {background-color: #a71930;}
.vacancyItem:hover h2 {color: #fff;}
.vacancyItem:hover svg {fill: #fff;}
/* contact person */
#contactPersonContainer {}
#contactPersonContainer .partContentFileImageGallery.single {max-width: 200px; margin-left: auto; margin-right: auto; margin-bottom: 20px;}
#contactPersonContainer .partContentFileImageGallery.single figure img {border-radius: 50%;}
/* werk ervaringen */
#workExperinces {}
#workExperinces .basicContainer {}
#experienceList {}
.experienceItem {display: flex; flex-wrap: wrap; border-bottom: solid 1px #8c8c8c; margin-bottom: 20px;}
.experienceItem:last-child {border-bottom: none; margin-bottom: 0;}
.experienceItem .partContentFileImageGallery.single {flex: 1 1 200px; margin-bottom: 20px;}
.experienceItem .partContentFileImageGallery.single figure img {border-radius: 50%;}
.experienceText {flex: 1 1 calc(100% - 200px); padding-left: 20px;}
/* about us */
.twoColumnContainer {}
#vacanciesContainer + .twoColumnContainer .basicContainer {margin-top: -10px;}
.twoColumnContainer .basicContainer {padding:0; overflow: hidden; max-width: 1440px;}
.aboutusContent {display: flex; flex-wrap: wrap; width: calc(100% + 20px); margin-left:-5px; margin-right: -5px;}
.aboutusLeft {width: calc(66.6666666666% - 10px); margin-left: 5px; margin-right: 5px;}
.aboutusLeftText {width: 100%; max-width: 730px; margin-left: auto; padding:35px 40px; padding-bottom: 20px;}
.aboutusLeftImage {width: 100%; max-width: 740px; margin-left: auto; padding:0px 0px 0px 40px; margin-right: -10px;}
.aboutusRight {width: calc(33.3333333333% - 10px); margin-left: 5px; margin-right: 5px;}
.aboutusRight .partContentFileImageGallery, .aboutusRight .partContentFileImageGallery .contentFileImageContainer, .aboutusRight .partContentFileImageGallery figure, .aboutusRight .partContentFileImageGallery figure .imagePlaceholderContainer {height: 100%;}
.aboutusRight .partContentFileImageGallery .contentFileImageContainer .contentFileImage {height:50%;}
.aboutusRight .partContentFileImageGallery figure .imagePlaceholderContainer .imagePlaceholder {display: none;}
/* footer */
#companyQuote {background-color: #000;}
#companyQuote .basicContainer {padding-top: 10px; padding-bottom: 10px; color: #fff; text-align: right; font-size: 14px;}
footer {background-color: #8c8c8c; color: #fff; position: relative;}
footer .basicContainer {padding-left: 20px; padding-right: 20px;}
#companyName {display: block; font-weight: 700; line-height: 1.5em; padding-left: 20px; padding-right: 20px; text-align: left;}
#contactContainer {display: flex; flex-wrap: wrap; justify-content: space-between; text-align: left;}
#contactContainer .partContentText {padding-left: 20px; padding-right: 20px;}
#contactContainer .partContentText a {color: #fff; font-weight: 400; border-bottom: solid 1px #fff; transition: border-color 0.3s;}
#contactContainer .partContentText a:link, #contactContainer .partContentText a:visited, #contactContainer .partContentText a:active {color: #fff; text-decoration:none;}
#contactContainer .partContentText a:hover {color: #fff; text-decoration:none; border-color: #000;}
#socialIconContainer {position: absolute; right:20px; top: 20px; display: flex; flex-direction: column;}
#socialIconContainer a { display: flex; justify-content: center; align-items: center; background-color: #fff; height: 34px; width: 34px; margin-bottom: 10px; transition: background-color 0.3s; }
#socialIconContainer a:hover { background-color: #a71930; }
#socialIconContainer svg.partSvg { flex: 1 1 auto; fill: #8c8c8c; max-height: 18px; max-width: 18px; transition: fill ease 0.3s; }
#socialIconContainer a:hover svg.partSvg { fill: #fff; }