﻿@media screen and (min-width: 1680px){
	#homeHeader .partContentFileImageGallery figure .imagePlaceholderContainer .imagePlaceholder {padding-bottom: 700px!important;}
	#basicHeader .partContentFileImageGallery figure .imagePlaceholderContainer .imagePlaceholder {padding-bottom: 300px!important;}
}

@media screen and (max-width: 1366px){
	.basicContainer {padding-left: 40px; padding-right: 40px;}
	#footerContactBlock {padding: 40px; padding-bottom: 20px; margin-top: -40px;}

	.projects .sliderButton.prev {left: 25px;}
	.projects .sliderButton.next {right:25px;}
	.projects .captionContainer {left: 96px;}

	#homeProjects .partSlider {max-width: none;}
}

@media screen and (max-width: 1297px){
	#stickyTopBar #logo svg {height:30px}
	#stickyTopBar .partNavigation.horizontal ul.level-0 > li > a {font-size: 16px;}
	#stickyTopBar .partNavigation.horizontal #products ul.level-1 > li > a {font-size: 146x;}

	#homeHeader .partContentFileImageGallery figure .imagePlaceholderContainer .imagePlaceholder {padding-bottom: 500px!important;}
}

@media screen and (max-width: 1200px){
	.teamItem 	{width: calc(25% - 30px);}

	#overLappingText {margin-bottom: -120px;}

	#footerMenu {flex-wrap: wrap;}

	#stickyTopBar .partNavigation.horizontal ul.level-0 > li > a {padding: 0 15px; height:36px;}
}	

@media screen and (max-width: 1100px){
	#overLappingContainer .basicContainer {margin-bottom: -214px;}
	#overLappingImage {width: 100%;}
	#overLappingText {width: 100%; margin-bottom: 0; margin-left: 40px; margin-right: 40px; margin-top: -80px; padding:30px; padding-bottom: 20px;}
	#overLappingText ul li .number {font-size: 28px;}
	#overLappingText ul li .label {font-size: 16px;}
}

@media screen and (max-width: 1024px){
	h1, .h1 {font-size: 50px;}
	h2, .h2 {font-size: 34px;}
	h3, .h3 {font-size: 20px;}

	.serviceSupportText 	{width: calc(100% - 300px)}
	.serviceSupportImage 	{width: 300px;}

	.serviceSupportContainer:nth-child(odd) .serviceSupportText 	{padding-right: 15px;}
	.serviceSupportContainer:nth-child(odd) .serviceSupportImage 	{padding-left: 15px;}
	.serviceSupportContainer:nth-child(even) .serviceSupportText 	{padding-left: 15px;}
	.serviceSupportContainer:nth-child(even) .serviceSupportImage 	{padding-right: 15px;}

	#headerOverlay .basicContainer {padding-bottom: 40px;}
}

@media screen and (max-width: 1023px){
	#stickyTopBar .partNavigation.horizontal {display: none;}
	#mobileMenuToggle  {display:flex;}    
	
	#stickyTopBar .basicContainer, #stickyTopBar.scrolled .basicContainer, .mobileMenuToggleActive #stickyTopBar .basicContainer {padding-top: 10px; padding-bottom:10px;}
	
	.basicContainer {padding-top:60px; padding-bottom: 30px;}
	
	#basicHeader .partContentFileImageGallery figure .imagePlaceholderContainer .imagePlaceholder {padding-bottom: 270px!important;}

	.productItem, .accessoryItem		{width: calc(33.3333333333% - 30px);}

	#mainFooter .basicContainer {flex-wrap: wrap;}
		
		#footerContactBlock 		{width: 100%;}	
		#footerMenu 				{flex-wrap: nowrap;}
		.footerMenuColumn  			{flex: 1 1 auto;}
		.footerMenuColumn:first-child {margin-left: 0;}

	.greyContainer .applicationItem   {width: calc(50% - 30px);}

	.projectItem {width: calc(50% - 30px);}

	#stickyTopBar #logo svg {height:20px;}
	#mobileMenuToggle .mobileMenuButtonLabel, .partNavigationLanguage > ul > li {font-size: 16px;}
	.partNavigationLanguage > ul > li > a {padding-left: 10px; padding-right: 10px;}

	#homeArticlesContainer .featuredList .featuredItem:last-child {display: none;}

	#homeExhibitionsContainer, #homeArticlesContainer {width: 50%;}
	#homeArticlesContainer .featuredList .featuredItem {width: 100%;}

	#subMenu .partNavigation.horizontal ul.level-0 {justify-content: flex-start; white-space: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar;}
	#subMenu .partNavigation.horizontal ul.level-0 > li > a {font-size: 16px; margin:0; margin-right: 20px;}
	#subMenu .partNavigation.horizontal ul.level-0 > li > a .navigationLabel {white-space: nowrap;}

	/* who we are */
	#whoWeAreIntroText {width: 100%; padding-right: 0; order:2;}
	#whoWeAreIntro .partContentFileImageGallery.single {order:1; width: 180px;}

	/* product detail */
	#productMediaContainer, #productSummaryContainer {width: 100%; margin:0 0 25px 0;}

	#uspList .partContentText {width: 50%;}
	#uspList .partContentText:nth-child(odd) {border-left: none;}

	.contactItem    {width: calc(50% - 30px);}

	#footerContactBlock {margin-top: 25px; padding:25px; padding-bottom: 0;}
}

@media screen and (max-width: 900px){
	.applicationItem   		{width: calc(50% - 30px);}
	.industryItem 			{width: calc(33.3333333333% - 30px);}
	.teamItem 				{width: calc(33.3333333333% - 30px);}
}

@media screen and (max-width: 767px){
	#homeExhibitionsArticles h2 {font-size: 24px;}
	
	.projects .slideContainerViewport {padding-top: 0;}
	.projects .captionContainer {position: relative; top:0; left:25px; right:25px; max-width: none; width: calc(100% - 50px); margin-top: -60px; margin-bottom: 15px;}
	#homeProjects {padding-bottom: 25px;}
	.projects .captionContainer .partContentText {display: none;}
	.projects .slide .captionContainer {visibility: visible; opacity: 1;}
	
	.productItem, .accessoryItem 			{width: calc(50% - 30px);}
	.valueItem   			{width: calc(50% - 30px);}
	#historyList 			{font-size: 16px;}
	#historyList .historyItem:after {top:5px;}

	#footerMenu 			{flex-wrap: wrap;}
		.footerMenuColumn 			{margin-left: 0; width: 100%;}
			.footerMenuColumn ul 				{columns: auto /* set number of columns or set to auto */ 200px /* minimal width */;}

	.serviceSupportText 	{width: 100%; order:2}
	.serviceSupportImage 	{width: 100%; max-width: 300px; order: 1;}
	.serviceSupportContainer {padding-bottom: 60px;}
	.serviceSupportContainer:after {order: 3; margin-top: 30px;}

	.serviceSupportContainer:nth-child(odd) .serviceSupportText 	{padding-right: 0px;}
	.serviceSupportContainer:nth-child(odd) .serviceSupportImage 	{padding-left: 0px;}
	.serviceSupportContainer:nth-child(even) .serviceSupportText 	{padding-left: 0px;}
	.serviceSupportContainer:nth-child(even) .serviceSupportImage 	{padding-right: 0px;}

	#socialShare {padding-top: 0;}
	#socialShareLabel {font-size: 18px; width: 100%; margin-bottom: 10px;}
	#socialShareContainer a {height: 36px; width: 36px; margin-left: 0; margin-right: 10px;}
	#socialShareContainer a svg {height:14px;}

	#blokkeerPositiesContainer .formItemContainerLabel, #blokkeerPositiesContainer .formItemContainerContent, #verjongingenContainer .formItemContainerLabel, #verjongingenContainer .formItemContainerContent  {width: 100%;}
}

@media screen and (max-width: 667px){
	.basicContainer {padding-left: 25px; padding-right: 25px;}
	.basicContainer.smallPaddingTop {padding-top: 25px;}

	#headerOverlay .basicContainer {padding-bottom: 25px; padding-top: 0;}

	.greyContainer .applicationList {width: calc(100% + 15px); margin-left: -7.5px; margin-right: -7.5px; padding-bottom: 15px;}
		.greyContainer .applicationItem {width: calc(50% - 15px); margin: 0 7.5px 15px 7.5px; flex-direction: row; padding:15px 15px;}
		.greyContainer .applicationItem .partContentFileImageGallery.single  {margin-top: 0; min-width: 40px; /*flex fix */ max-width: 40px; margin-right: 10px; margin-bottom: 0;}
		.greyContainer .applicationItem h3 {margin-bottom: 0; font-size: 16px;}
	
	.basicContainer {padding-top: 30px; padding-bottom: 1px;}
	#introContainer .basicContainer {padding-bottom: 1px;}


	.applicationList 	{width: calc(100% + 15px); margin-left: -7.5px; margin-right: -7.5px;}
		.applicationItem 	{width: calc(50% - 15px); margin: 0 7.5px 30px 7.5px;}
		.applicationItem .partContentFileImageGallery.single {max-width: 100px; margin-top: -15px;}

	.industryList 	{width: calc(100% + 15px); margin-left: -7.5px; margin-right: -7.5px;}
		.industryItem 	{width: calc(50% - 15px); margin: 0 7.5px 15px 7.5px;}
			.industryItemText {padding:0 15px;}
			.industryItemText .partButton {margin-bottom: 15px;}

	.accessoriesList 	{width: calc(100% + 15px); margin-left: -7.5px; margin-right: -7.5px;}
		.accessoryItem 	{width: calc(50% - 15px); margin: 0 7.5px 30px 7.5px; padding:0 15px;}
		.accessoryItem .partButton {margin-bottom: 15px;}

	.productList 	{width: calc(100% + 15px); margin-left: -7.5px; margin-right: -7.5px;}
		.productItem 	{width: calc(50% - 15px); margin: 0 7.5px 30px 7.5px; padding:0 15px;}
		.productItem .partButton {margin-bottom: 15px;}

	.contactList 	{width: calc(100% + 15px); margin-left: -7.5px; margin-right: -7.5px;}
		.contactItem  {width: calc(100% - 15px);  margin: 0 7.5px 30px 7.5px; }
	
	h1, .h1 {font-size: 40px;}
	h2, .h2 {font-size: 26px;}
	h3, .h3 {font-size: 18px;}
	.productItem h3 {font-size: 16px;}


	.partContentText {font-size: 16px;}

	#headerOverlay h1 {font-size: 32px;}
	#whoWeAreIntro .partContentText h2, #detailPage .partContentText h2, #introContainer .partContentText h2 {font-size: 20px;}


	#applicationsHome h2, #applications h2 {margin-bottom: 30px;}

	.teamItem 				{width: calc(50% - 30px);}



	.projectItem {width: calc(100% - 30px);}
	.careerItem {width: calc(100% - 30px);}

	#smallFooter ul li {margin-left: 10px; margin-right: 10px;}

	#homeExhibitionsContainer, #homeArticlesContainer {width: 100%; padding-left: 0; padding-right: 0;}

	#overLappingText {margin-top: 25px; margin-left: 0; margin-right: 0;}

	.valueItem {width: calc(100% - 30px);}

	#historyList {margin-left: 70px;}
	#historyList .historyItem .eventDate {width: 70px; left: -100px;}

	.popupCustomContainer {width: 100%;}

	#imageSliderSyncSecondary .slide.selected .partContentFileImageGallery.single:after {border-width: 3px;}

	.partAccordionMenuNavigation ul li a, .partAccordionMenuNavigation ul li span.linkTrigger {padding:17px 25px;}
	.partAccordionMenuNavigation ul li span.linkTrigger		                            {padding-left: 25px;}
  	.partAccordionMenuNavigation ul ul li a                                             {padding-left: 19px;}
	.partAccordionMenuNavigation ul ul ul li a                                        	{padding-left: 19px;}
	  
	.partBreadcrumb {font-size: 12px;}

	/* home */
	#headerOverlay .basicContainer {align-items: flex-start;}
	ul#headerApplicationList {justify-content: flex-start; font-size: 16px;}
	ul#headerApplicationList li {margin-left: 0;}
	#homeHeader #headerOverlay h1 {text-align: left;}
	.partButtonContentContainer {justify-content: flex-start;}
	ul#headerApplicationList {margin-bottom: 10px;}


	#homeHeader .partContentFileImageGallery figure .imagePlaceholderContainer .imagePlaceholder {padding-bottom: 380px!important;}

	.projects .captionContainer {padding:30px 30px 1px 30px;}

	

	#homeIndustries .basicContainer {padding-top: 250px;}

	/* various */
	.partBreadcrumb li:last-child {display: none;}
	#footerLogo {height:30px;}
	#companyQuote {font-size: 16px;}
	
	#footerMenu {padding-top: 10px;}
	#mainFooter .basicContainer {padding-bottom: 25px;}
	.footerMenuColumn {margin-top: 15px;}

	.footerMenuColumn:first-child, .footerMenuColumn .heading {font-size: 18px;}

	#uspList .partContentText {width: 100%; border-bottom: solid 1px rgba(255,255,255,0.2);}
	#uspList .partContentText:last-child {border-bottom:none;}

	.darkGreyContainer h2 {text-align: left;}

	.partAccordionMenuContent > ul > li {padding:15px 15px 15px 25px;}
	.partAccordionMenuContent ul li span.buttonTrigger {height:36px; width: 36px;}
	.partAccordionMenuContent ul li span.linkTrigger {font-size: 18px;}

	#socialFooterBar a .icon {height:36px; width: 36px;;}
	#socialFooterBar a svg {height:12px;}
	#socialFooterBar a .label {font-size: 16px;}
}

@media screen and (max-width: 480px){
	.slideIndustryContainer h3 {font-size: 16px;}

	#footerText {flex-wrap: wrap;}
	#footerText .partContentText:first-child {margin-right: 0;}
}

@media screen and (max-width: 350px){
	.productItem {width: calc(100% - 15px);}
}

@media screen and (max-width: 679px){
	.configuratorContainerLeft {width: 100%;}
	.configuratorContainerRight {width: 100%; padding-left: 0; margin-top: 0;}
		.configuratorContainerRight .partContentFileImageGallery.single {max-width: 200px;}
}

