﻿html																{}
body																{color:#444; font-size:18px; font-weight: 400; font-family: 'Lato', 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; font-family: 'Libre Franklin'; color: #000; margin-bottom: 30px; text-transform: capitalize;}
h1, .h1																{font-size: 60px; font-weight: 700;}
h2, .h2																{font-size: 40px; font-weight: 700; }
h3, .h3																{font-size: 24px; font-weight: 700; text-transform: capitalize;}
h4, .h4																{font-size: 18px; font-weight: 700; color: #A71930; margin-bottom: 10px;}

#whoWeAreIntro .partContentText h2, #detailPage .partContentText h2, #introContainer  .partContentText h2 {color: #A71930; font-size: 24px; margin-bottom: 5px;}

a                                                                   {}
a:link, a:visited, a:active                                         {}
a:hover                                                             {}
 
strong                                	                            {font-weight: 700; font-style: inherit;}
em                                    	                            {font-style: italic; font-weight: inherit;}

h3.redUnderline, .h3.redUnderline {text-transform: uppercase;}

.greyContainer 														{background-color: #f5f5f5;}

.basicContainer   													{max-width: 1440px; margin:0px auto; padding:120px 80px 90px 80px; text-align: center;}
.basicContainer.small 												{max-width: 1060px; text-align:left;}
.basicContainer.smallPaddingTop 									{padding-top: 60px;}

.divider:before {content: ''; height:1px; background-color: rgba(0,0,0,.2); display: block; margin:0 80px;}
.darkGreyContainer.divider:before {background-color: rgba(255,255,255,.2);}

.redUnderline {
	position: relative; display: inline-block; padding-bottom: 10px;
}

.redUnderline:after {
	content: ''; position: absolute; bottom: 0; left: 0; width: 50%; height:3px; background-color: #A71930; text-transform: uppercase;
}

/* Icon with material icons */
.buttonIcon, #uspList .partContentText ul li:before, #advantagesImageAndText .advantageText .partContentText ul li:before, .calendar::before, .jobHours:before, .jobLocation:before {
    font-family: 'Material Icons';
    font-weight: 400;
    font-display: swap;
    font-style: normal;
    font-size: 18px;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
}

/***********************************************
Fundementals
***********************************************/

#stickyTopBar {width: 100%; background-color: transparent; position: fixed; left: 0; top: 0; z-index: 1003; transition:ease 0.3s; /* fade out */}

	#stickyTopBar .basicContainer{height:100%; display:flex; align-items:center; padding-top: 40px; padding-bottom: 40px; transition: ease 0.5s; /* fade in */}
	#stickyTopBar .basicContainer *:last-child {margin-right: 0;}
		#stickyTopBar #logo {margin-right: auto;}
			#stickyTopBar #logo svg {display:block; height:40px; fill: #fff;}
			
			#stickyTopBar .partButton {margin-bottom: 0; margin-right: 15px; font-size: 20px;}


#stickyTopBar.scrolled, .mobileMenuToggleActive #stickyTopBar                     {background-color:#A71930; transition: ease 0.5s; /* fade in */  box-shadow: 4px 4px 10px 0 rgba(0,0,0,.05); }
	#stickyTopBar.scrolled .basicContainer, .mobileMenuToggleActive #stickyTopBar .basicContainer 		{padding-top: 20px; padding-bottom: 20px;}
		#stickyTopBar.scrolled .partNavigationLanguage ul > li:hover > a  {background-color:#000;}
		#stickyTopBar.scrolled #stickyTopBar .partNavigation.horizontal ul.level-0 > li > a:hover, #stickyTopBar.scrolled #stickyTopBar .partNavigation.horizontal ul.level-0 > li > a:focus {background-color: #000;}
		#stickyTopBar.scrolled .partButton:hover:after { background-color: #000; }

		#stickyTopBar.scrolled  .partNavigation.horizontal ul.level-0 > li.selected > a { background: #000}

header 			{position: relative; background-color: #000;}

header#basicHeader .basicContainer  {justify-content: flex-end; align-items: flex-start; padding-top: 0;}
header .partContentFileImageGallery.single {opacity: 0.7;}

	#headerOverlay 	{position: absolute; z-index: 10; left: 0; top:0; padding-top: 60px; width: 100%; height: 100%;}
	#headerOverlay .basicContainer 			{color: #fff; height: 100%; padding-top: 0; padding-bottom: 35px; display: flex; flex-direction: column; justify-content: center; align-items: center;}
	#headerOverlay h1 						{color: #fff; margin-bottom: 0; text-align: left;}
	#headerOverlay .partContentText 		{font-size: 22px;}

/********************************************** 
Intro text  
**********************************************/
#introText {}
	#introText .basicContainer {padding-top: 60px; padding-bottom: 30px;text-align: left;}
	#introText .basicContainer > * {max-width: 900px;}

/********************************************** 
Configurator  
**********************************************/
#configurator 						{}
	#configurator .basicContainer 		{text-align: left; padding-top: 30px;}
		#configuratorContainer 				{}
			.formConfiguratorStepContainer 		{background: #fff; box-shadow: 0 10px 50px 0 rgba(0,0,0,0.08); border-radius: 23px; padding:30px; padding-bottom: 1px; margin-bottom: 30px; padding-bottom: 15px;}
			.formConfiguratorStepContainer:empty {display: none;}
				.formConfiguratorStepContainer form {width: 100%;}
				.formConfiguratorCompleted {width: 100%;}

				.formConfiguratorStepContainer h2 {margin-bottom: 15px; display: inline-block;}
				.formButtonContainer {width: 100%; display: flex; margin-bottom: 15px;}
					/* bug fix */
					.formButtonContainer .partButton.grey {margin-right: 15px;}
					.formV2 .formButtonContainer .partButton {margin-bottom: 0;}
					.formV2 .formButtonContainer .formItemContainerContent {width: auto;}

				.formConfiguratorStepContainer form {display: flex; flex-wrap: wrap;}
					.configuratorContainerLeft {width: 60%; margin-bottom: 20px;}
					.configuratorContainerRight {width: 40%; padding-left: 30px; margin-top: 40px;}
						.configuratorContainerRight .partContentFileImageGallery.single {margin-bottom: 25px;}

					#formConfiguratorStepContainer1 .configuratorContainerLeft, #formConfiguratorStepContainer2 .configuratorContainerLeft {width: 100%; max-width: 732px;}

				

	#blokkeerPositiesContainer {border-left: solid 3px #ccc; margin-left: 10px; padding-left: 20px;}
	#blokkeerPositiesContainer .formItemContainerLabel {width: 217px;}
	#blokkeerPositiesContainer .formItemContainerContent  {width: calc(100% - 217px);}

	#verjongingenContainer {border-left: solid 3px #ccc; margin-left: 10px; padding-left: 20px;}
	#verjongingenContainer .formItemContainerLabel {width: 217px;}
	#verjongingenContainer .formItemContainerContent  {width: calc(100% - 217px);}
	.verjongingSectieContainer {border-bottom: solid 1px #ccc; margin-bottom: 15px;}

	.partContentText.info {font-size: 16px; background-color: #F5F5F5; padding:15px; padding-bottom: 1px; margin-bottom: 15px; color: #000;}

	.colorBar {display: block; height:36px; margin-top: 5px; margin-bottom: 10px; max-width: 400px;}

/********************************************** 
Footer 
**********************************************/

#tagline 					{background-color: #333;}
	#tagline .basicContainer 	{text-align: right; padding-top: 30px; padding-bottom: 33px;}
	#tagline span 				{font-family: 'Libre Franklin'; font-weight: 900; color: #fff; font-size: 20px; display: block; letter-spacing: 2px;}

#mainFooter 				{background-color: #a71930;}
	#mainFooter .basicContainer {display: flex; align-items: flex-start; padding-top: 0; padding-bottom: 60px; text-align: left;}

		#footerContactBlock 		{background-color: #fff; width: 100%; max-width: 500px; box-shadow: 0 10px 50px 0 rgba(0,0,0,0.08); border-radius: 23px; padding:60px; padding-bottom: 40px; margin-top: -60px;;}
			#footerLogo 				{height: 40px; margin-bottom: 10px;}	
			#footerText 				{display: flex; font-size: 16px;}
				#footerText strong 			{color: #A71930;}
				#footerText .partContentText:first-child {margin-right: 60px;}

			#socialFooterBar  		{display: flex; flex-wrap: wrap;}
				#socialFooterBar a 		{display: flex; align-items: center; color: inherit; text-decoration: #000; margin-right: 30px; margin-bottom: 20px;}
				#socialFooterBar a:last-child {margin-right: 0;}
				#socialFooterBar a .icon {height: 46px; width: 46px; margin-right: 6px; background-color: #A71930; border-radius: 50%; display: flex; justify-content: center; align-items: center; transition: background-color 0.3s;}
				#socialFooterBar a:hover .icon {background-color: #333;}
					#socialFooterBar a svg 	{width: 16px; max-width: 16px; fill: #fff;}
				#socialFooterBar a .label {font-weight: 700;}
				
		#footerMenu 				{display: flex; width: calc(100% - 500px); padding:30px 0px 0px 0px;}
			.footerMenuColumn 			{margin-left: 60px; margin-top: 30px; color: #fff; line-height: 1.3em; flex: 1 1 auto;}
			.footerMenuColumn .heading 		{font-family: 'Libre Franklin';font-size: 20px; font-weight: 700; margin-bottom: 10px; display: inline-block;}
			.footerMenuColumn:first-child {font-family: 'Libre Franklin';font-size: 20px; font-weight: 700;}
			.footerMenuColumn ul 				{columns: auto /* set number of columns or set to auto */ 170px /* minimal width */; column-gap: 60px;}
			.footerMenuColumn ul li 			{margin-bottom: 10px; break-inside: avoid;}
			.footerMenuColumn ul li a 			{color: #fff; text-decoration: none;}
			.footerMenuColumn ul li a:hover 	{text-decoration: underline;}

#smallFooter 				{background-color: #A71930; color: #fff;}
	#smallFooter .basicContainer 	{padding-top: 0; padding-bottom: 0;}
		#smallFooter ul 				{display: flex; flex-wrap: wrap; justify-content: center; border-top:solid 1px rgba(255,255,255,0.2); font-size: 14px; padding-top: 15px;}
		#smallFooter ul li 				{margin:0 30px 15px 30px;}
		#smallFooter ul li a 			{color: #fff; text-decoration: none;}
		#smallFooter ul li a:hover 		{text-decoration: underline;}