body																{color:#000; font-size:1em; font-family: 'Source Sans Pro', sans-serif; font-weight: 300; -webkit-text-size-adjust: 100%;}
html																{}

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  															{color: #000; font-weight: 700;}
em 																	{font-style: italic;}

h1, h2, h3															{}
h1, #introText														{font-size: 76px; font-weight: 400; font-family: 'tomica'; line-height: 1em; margin-bottom: 55px;}
h2																	{font-size: 62px; font-weight: 400; font-family: 'tomica'; line-height: 1em; margin-bottom: 55px;}
h2 + .ctaButtonUnderline 											{margin-top: 25px;}
h3, .heading3														{font-size: 40px; font-weight: 400; font-family: 'tomica'; line-height: 1em; margin-bottom: 55px;}
.heading3 															{margin-bottom: 30px;}
h3 a, h2 a															{color: #000; text-decoration: none; display: block; transition: 0.3s;}
h3 a:hover, h2 a:hover												{color: #000; transform: translateY(5px);}
h4, .heading4														{font-size: 18px; font-weight: 400; font-family: 'tomica'; line-height: 1em; margin-bottom: 0px;}

.heading3, .heading4 												{display: block;}
.heading4 															{margin-bottom: 10px;}

.themeGreen 														{}
.themeGreen .partContentText h2										{color: #6BB64A;}
.bigReturn .ctaButtonUnderline:after								{background-color: #6BB64A;}

.pageNotFound 														{text-align: center;}

/************************************
General functions
************************************/

.ctaButton 							{background: #f0f0f0; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.20); border-radius: 30px; font-size: 18px; font-weight: 400; font-family: 'tomica'; padding:18px 40px; display: inline-block; margin-bottom: 30px; transition: 0.3s;}
.ctaButton:link,
.ctaButton:visited,
.ctaButton:active					{color: #000; text-decoration:none;}
.ctaButton:hover					{color: #000; text-decoration:none; box-shadow: 0 2px 3px 0 rgba(0,0,0,0.30);}

	.ctaButtonContainer 				{padding-bottom: 20px;}
	.ctaButtonUnderline:last-child 		{margin-right: 0px;}

		.ctaButtonUnderline 				{font-size: 18px; font-weight: 400; font-family: 'tomica'; display: inline-block; padding-bottom: 10px; margin-right: 26px; margin-bottom: 30px; position: relative;}
		.ctaButtonUnderline:after 			{content: ""; position: absolute; width: 100%; height: 4px; bottom: 0; left: 0; visibility: visible; transition: all 0.3s ease-in-out 0s; background-color: #000;}
		.ctaButtonUnderline:link,
		.ctaButtonUnderline:visited,
		.ctaButtonUnderline:active			{color: #000; text-decoration:none;}
		.ctaButtonUnderline:hover:after 	{width: 80%; left: 10%;}

		.ctaButtonUnderline.signUpNow			{position: relative; margin-left: 28px;}
		.ctaButtonUnderline.signUpNow:before	{background: url('/images/style/icon-paper-plane-black.svg') no-repeat; background-size: 18px 18px; content: ''; position: absolute; left: 0; margin-left: -28px; width: 18px; height: 18px;}
		.ctaButtonUnderline.googleMaps			{position: relative; margin-left: 28px;}
		.ctaButtonUnderline.googleMaps:before	{background-size: 14px 18px;  content: ''; position: absolute; left: 0; margin-left: -24px; width: 14px; height: 18px;}

footer .ctaButtonUnderline 				{margin-bottom: 0px; padding-bottom: 10px; font-family: 'Source Sans Pro', sans-serif; margin-top: 21px;}
footer .ctaButtonUnderline:after 		{background-color: #fff;}
footer .ctaButtonUnderline:link,
footer .ctaButtonUnderline:visited,
footer .ctaButtonUnderline:active		{color: #fff; text-decoration:none;}
footer .ctaButtonUnderline:hover		{color: #fff; text-decoration:none;}
footer .ctaButtonUnderline:last-child 	{margin-bottom: 0px;}

footer .ctaButtonUnderline.signUpNow:before	{background: url('/images/style/icon-paper-plane-white.svg') no-repeat;}
footer .ctaButtonUnderline.googleMaps:before{background: url('/images/style/icon-location-pointer-white.svg') no-repeat;}

#breadCrumb					{font-size: 30px; text-align: center; margin-top: 200px; margin-bottom: 20px;}
#breadCrumb li 				{display: inline-block;}
#breadCrumb li:after  		{background: url('/images/style/icon-arrow-right-grey.svg') no-repeat; background-size: contain; width: 12px; height: 20px; display: inline-block; content: ''; margin-left: 30px; margin-right: 20px;}
#breadCrumb li:last-child:after  {display: none;}
#breadCrumb li a 			{display: inline-block; color: #bbb; text-decoration: none; border-bottom: solid 4px transparent; padding-bottom: 13px; transition: 0.3s;}
#breadCrumb li a:hover		{border-color: #bbb;}

.phoneNumber, .emailAddress {font-size: 24px; font-weight: 400; font-family: 'tomica'; color: #000; text-decoration: none; display: inline-block; line-height: 1.6em; border-bottom: solid 4px transparent; transition: 0.3s; padding-bottom: 6px; display: block;}
.phoneNumber 				{}
.emailAddress 				{margin-bottom: 30px;}
.phoneNumber:hover, .emailAddress:hover {border-color: #000;}

.socialButton 				{display: inline-block; border:solid 4px #000; width: 42px; height: 42px; vertical-align: middle; margin-left: 16px; background-repeat: no-repeat; background-position: center;}
.socialButton.facebook 		{background-image: url('/images/style/icon-facebook.svg'); background-size: 9px 20px;}
.socialButton.linkedin 		{background-image: url('/images/style/icon-linkedin.svg'); background-size: 20.42px 24px;}


.partClearBoth														{height: 1px; clear: both;}

.whiteContainer 													{}
.basicContainer													{max-width:1680px; min-width: 320px; margin: 0px auto; padding:0px 40px 200px 40px;}

.basicContainerContent 											{padding-bottom: 150px;}
.basicContainerContent > *  									{max-width:1024px; margin-left: auto; margin-right: auto;}
.basicContainerContent > .partContentFileImageGallery 			{max-width:1680px;}
.basicContainerContent > .partContentVideo  					{max-width: 760px;}
.basicContainerContent h2										{margin-bottom: 10px; line-height: 1.1em; font-size: 30px;}
.basicContainerContent .ctaButtonContainer  					{padding-bottom: 10px;}

.basicContainer.introContainer 									{padding-bottom: 0px; text-align: center; max-width: 1320px;}
.introContainer img#bigImpactLogo								{max-width: 480px; margin:0px auto; display: block; margin-bottom: 55px; width:90%;}

.imageContainer 												{padding-top: 15px; animation-name: fadeIn; animation-duration: 1s; animation-fill-mode: both;}
	.imageContainer img 											{width: 100%;}

/************************************
Top bar
************************************/
header.stickyScroll  										{position:fixed;top:0; left:0; width: 100%; z-index: 999; transition: 0.5s; height: 180px; padding:0px 100px; display: flex; justify-content:space-between; align-items: center;}
header.stickyScroll.scrolled 								{box-shadow: 0 1px 3px 0 rgba(0,0,0,0.10); height: 90px; background-color: #fff;}
header.stickyScroll.scrolled svg#logoText  					{opacity: 0; height: 70px;}

	#logo 										{position: relative;}
		svg#logoPlus  								{width:69px; height:70px; position: absolute; left: 0; top:0;}
		svg#logoText  								{width:179px; height:100px; transition: 0.3s;}

	#menu 										{font-family: 'tomica'; font-weight: 400; font-size: 20px; display: flex; justify-content: flex-end;}
	#menu li 									{margin-left: 60px;}
	#menu li:first-child 						{margin-left: 0px;}
	#menu li a 									{color:#000; text-decoration: none; display: inline-block; padding-bottom: 10px; transition: 0.3s; padding-top: 9px; position: relative;}
	#menu li a:after 							{content: ""; position: absolute; width: 100%; height: 4px; bottom: 0; left: 0; visibility: hidden; opacity: 0; transition: all 0.3s ease-in-out 0s; background-color: #000;}
/*	#menu li a.loginBeta 						{color: #eb2b43;}
	#menu li a.loginBeta:after 					{background-color: #eb2b43;}*/

	#menu li a#ajaxPopupFullscreenMenu 			{background: url('/images/style/icon-menu-bars.svg') no-repeat; background-size: 30px 19px; background-position: center; width: 30px; height: 39px;}
	#menu li a#ajaxPopupFullscreenMenu:after 	{display: none;}

	#menu li.selected a, #menu li a:hover:after		{visibility: visible; opacity: 1;}

/************************************
Home - Intro quote and text
************************************/
.fullScreen 										{height: 100vh; display: flex; justify-content:center; align-items: center; position: relative; }
	#pageIntroQuote 								{}
	#pageIntroQuote #introText						{margin-bottom: 0px; margin-top: 50px; margin-left: auto; margin-right: auto;}
	#pageIntroText 									{text-align: center; opacity: 0;}
	#pageIntroText .partContentText 				{max-width: 700px;}
	#pageIntroText .basicContainer 					{padding-bottom: 0px; margin:0px;}
	#pageIntroText .ctaButton 						{margin-bottom: 0px;}

	.scrollDown    	 		{position: absolute; bottom:80px;left:50%; margin-left: -22.5px; width: 45px; height: 38px; background: url('/images/style/icon-arrow-down-black.svg') no-repeat center; background-size: 25px 18px;}

/************************************
Video
************************************/
#pageVideo 											{margin-bottom: 200px; padding-top: 90px;}
	#videoItemContainer 								{position: relative; height: 100%; width: 100%; background-color: #000;}
		.videoItem 											{position: absolute; overflow:hidden;}
		.videoItem:nth-child(1)								{width: 25%; height: 33.33%; left: 0; top:0;}
		.videoItem:nth-child(2)								{width: 50%; height: 66.67%; left: 25%; top:0;}
		.videoItem:nth-child(3)								{width: 25%; height: 50%; right: 0; top:0;}
		.videoItem:nth-child(4)								{width: 25%; height: 33.33%; left: 0; bottom:33.33%;}
		.videoItem:nth-child(5)								{width: 25%; height: 33.33%; left: 0; bottom:0;}
		.videoItem:nth-child(6)								{width: 25%; height: 33.33%; left: 25%; bottom:0; background-color: #f0f0f0;}
		.videoItem:nth-child(7)								{width: 25%; height: 33.33%; left: 50%; bottom:0;}
		.videoItem:nth-child(8)								{width: 25%; height: 50%; right: 0; bottom:0;}

			.videoItem:nth-child(1) h2 					{color: #fff;}
			.videoItem:nth-child(1) .ctaButtonUnderline {color: #fff;}
			.videoItem:nth-child(1) .ctaButtonUnderline:after {background-color: #fff;}

			.squareTextBlock 							{position: absolute; top: 50%; transform: translateY(-50%); padding:0px 60px; width: 100%;}
			.squareTextBlock .ctaButtonContainer 		{padding-bottom: 0px;}
			.squareTextBlock .ctaButtonUnderline 		{margin-bottom: 0px; margin-top:55px;}
			.squareTextBlock h2							{font-size: 3.1vw; margin-bottom: 0px;}

			.videoItem video 							{filter:grayscale(100%); width: 101%; height: 101%; object-fit: cover; transition: ease 0.5s;} 

			/* IE 10 + 11 hack */
			@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
				.videoItem video {min-width: 100%; min-height: 100%; width: auto; height: auto;position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
			}

			/* Edge hack */
			@supports (-ms-ime-align:auto) {
			  	.videoItem video {min-width: 100%; min-height: 100%; width: auto; height: auto;position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
			}

			.videoItem video:hover         				{filter:grayscale(0%);}

/************************************
Blocks
************************************/
.flexContainer 														{display: flex;}
	.flexItem 															{}
	.flexItem img 														{width: 100%;}

	.flexContainerColumns2 .flexItem									{width: 50%;}

	.flexContainerColumns3 												{background-color: #000;}
		.flexContainerColumns3 .flexItem									{width: 33.3333333333%;}

.contentBlockContainer {display: flex; align-items: flex-start; justify-content: flex-end; max-width: 1280px; margin-left: auto; margin-right: auto;}
.contentBlockContainer.contentBlockContainerCenter {justify-content: center;}

	.textBlockWithBorder 			{background: #fff; border: 7px solid #000000; padding:90px 60px 40px 60px; position: relative;}
	.textBlockWithBorder.right 		{width: calc(50% + 200px); margin-left: -200px; padding-left: 250px;}
	.textBlockWithBorder.left 		{width: calc(50% + 200px); margin-right: -200px; padding-right: 250px;}

	.imageBlock 			{width: 50%; position: relative; z-index: 1;}

	.imageBlock .partContentFileImageGallery 			{background-color: #fff;}
	.imageBlock .partContentFileImageGallery a img, .inspirationItem .partContentFileImageGallery a img, #latestInspiration .partContentFileImageGallery a img, #allJobs .partContentFileImageGallery a img	{transition: ease 0.3s;}
	.imageBlock .partContentFileImageGallery a:hover img, .inspirationItem .partContentFileImageGallery a:hover img, #latestInspiration .partContentFileImageGallery a:hover img, #allJobs .partContentFileImageGallery a:hover img	{opacity: 0.8;}

	.videoBlock 			{width: 50%; padding-top: 50%; position: relative; z-index: 1; overflow: hidden; background: #000;}
		.videoBlock video 		{height: 100%; left: 50%; top:0; transform: translateX(-50%); position: absolute; transition: 0.5s;}

	.marginTop100 			{margin-top: 100px;}

.imageContainer .textBlockWithBorder {margin-top: -222px; padding-left: 60px; width: calc(50% + 200px); margin-left: 0px;}
.imageContainer .textBlockWithBorder h2 {max-width: 420px;}

	/* home big return */
	.bigReturn 	{}
	.bigReturn .textBlockWithBorder.right 		{width: calc(70% + 200px); margin-left: -200px; padding-left: 250px;}


	.bigReturn .imageBlock 						{width: 70%;}
		.bigReturn img#bigImpactLogo				{max-width: 310px; width: calc(100% - 260px); display: block; margin-bottom: 60px; margin-top: -9px; margin-left: 260px;}

	/* home news + jobs */
	#latestInspiration 								{width: 50%; padding-right: 30px;}
		#latestInspiration .partContentFileImageGallery 	{margin-left: 70px; position: relative; z-index: 1; background-color: #fff;}
		#latestInspiration .textBlockWithBorder 			{margin-right: 60px; margin-top: -105px; padding-top: 150px;}

	#allJobs 										{width: 50%; padding-left: 30px; margin-top: 100px;}
		#allJobs .partContentFileImageGallery 			{margin-left: 70px; position: relative; z-index: 1; background-color: #fff;}
		#allJobs .textBlockWithBorder 					{margin-right: 60px; margin-top: -105px; padding-top: 150px;}
		#allJobs .partContentText p 					{margin-bottom: 20px;}

	/* home your work */
	.yourwork 										{}
		.yourwork .contentFileImageContainer  		{width: auto; margin-left: 0px;}
		.yourwork .partContentFileImageGallery .contentFileImageContainer img {margin:0px;}
		#yourWorkBlock 							    {width: 100%; position: relative; background-color: #f0f0f0; padding-bottom: 46.875%}

img#bigImpactLogo				{display: block; margin-bottom: 30px; max-width: 310px; width: 100%;}

/************************************
Inspiration
************************************/

.contentBlockContainerInspiration 				{flex-wrap: wrap; margin-top: 100px; position: relative; padding-bottom: 114px; justify-content: flex-start;}

	.inspirationItem 								{width: calc(50% - 30px);}
		.inspirationItem .partContentFileImageGallery 	{margin-right: 60px; margin-bottom: -100px; z-index: 1;  position: relative; background-color: #fff;}
		.inspirationItem .textBlockWithBorder 			{margin-left: 60px; padding-top: 150px;}

		.contentBlockContainerInspiration .inspirationItem.even {margin-top: 100px; margin-left: 60px;}
		.contentBlockContainerInspiration > span {display: none;}

	#loadMoreContainer				{text-align: center; left: 50%; transform: translateX(-50%); position: absolute; bottom: 0;}

/************************************
Footer
************************************/
footer 							{background: #000; color:#fff;}
footer .basicContainer 			{padding-top: 150px; padding-bottom: 150px; max-width: 1360px;}

.flexContainerColumns5  			{justify-content:space-between;}
.flexContainerColumns5 .flexItem	{}

footer h3 						{}
footer ul 						{color: #f0f0f0; font-size: 18px;}
footer ul li 					{margin-top: 10px;}
footer ul li a					{color: #bbb; text-decoration: none; transition: 0.3s;}
footer ul li a:hover 			{color: #fff; text-decoration: underline;}

#bottomFooter 					{background-color: #000; border-top: solid 1px rgba(255,255,255,0.2);}
	#bottomFooter .basicContainer 	{padding-top: 20px; padding-bottom: 20px; max-width: 1360px;}
		#bottomFooter ul				{display: flex; justify-content: flex-end; flex-wrap: wrap; gap:20px clamp(1.25rem, 2.6vw + 0.4rem, 2.5rem); /* 40 - 20 https://modern-fluid-typography.vercel.app?rootFontSize=16&minSize=20&fluidSize=2.6&relativeSize=0.4&maxSize=40 */; font-size: 14px;}
			#bottomFooter ul li				{}
				#bottomFooter ul li a			{color: #bbb; text-decoration: none; display: block;}
				#bottomFooter ul li a:hover		{color: #fff;}

/************************************
Pop-up menu
************************************/

.fullScreenMenu .popupOverlay  		{background-color: #fff;}
	.fullScreenMenu .popupContent 		{position: static;}
		.fullScreenMenu .basicContainer 	{padding:40px;}

			.fullScreenMenu svg#logoPlus  					{left: 100px; top:39px;}
			body.scrolled .fullScreenMenu svg#logoPlus  	{top:8px;}

			#popupMenuContainer 							{display: flex; padding-bottom:10px;}
				.fullScreenMenu .partNavigation-v  				{}
				.fullScreenMenu .partNavigation-v:first-child 	{margin-right: 200px;}

			#popupBottomContainer 					{text-align: right; border-top:solid 1px #000; padding-top: 40px;}
			#popupBottomContainer li				{display: inline-block; vertical-align: middle; margin-left: 60px;}
			#popupBottomContainer li a 				{display: block; font-size: 24px; font-weight: 400; font-family: 'tomica'; border-bottom: solid 4px transparent; display: inline-block; padding-bottom: 6px; padding-top: 6px; color: #000; text-decoration: none;}
			#popupBottomContainer li a:hover 		{border-color: #000;}

			#popupBottomContainer li:first-child 	{float: left; margin-left: 0px;}

/************************************
Animations
************************************/

.bounceAnimation	{animation: bounceAnimation; animation-duration: 3s; animation-delay: 2.5s; animation-iteration-count: infinite;}

@keyframes bounceAnimation {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-20px);
  }
  60% {
    transform: translateY(-10px);
  }
}

.fadeIn 				{animation-name: fadeIn; animation-duration: 2s; animation-fill-mode: both;}
.fadeInUp 				{animation-name: fadeInUp; animation-duration: 2s; animation-fill-mode: both;}

@keyframes fadeIn 		{from {opacity: 0; } to {opacity: 1; } }
@keyframes fadeInUp {	from {opacity: 0; transform: translate3d(0, 100%, 0); } to {opacity: 1; transform: none;}}