/**
* This is the base scss file.
*
* When using a "Mobile First" approach this is where
* you will start the mobile styles.
*
* When using a "Desktop first" approach this is where
* you will start the desktop styles.
*
* Create a file per size like _40em.scss or _60em.scss
* include those in a media query in your screen.css or
* directly in your ie8.css
**/

// HTML & body

// Why yes, I'm using the * selector. Before you go on a rant about how "slow" it is, let me explain. It's not.
// Not convinced? Read this (the "Performance" part): http://www.paulirish.com/2012/box-sizing-border-box-ftw/.

* {
	@include box-sizing(border-box);
}

html, body {
	width: 100%;
	height: 100%;
}

body {
	background-color: $bg-clr-body;
}

body a:focus {
	outline: 0;
}

img {
	max-width: 100%;

	&[class^='wp-image'], &[class*=' wp-image'] {
		width: auto;
		height: auto;
	}
}



// Header

.site-header {
	position: relative;
	border-bottom: 1px solid #dfdfdf;
	min-height: em-calc($header-h);
}

	.site-header-topbar {
		@include static-padding-horizontal;
		@include proper-clearfix; // Collapse the margin on the top H1
		background: $header-bg-clr;
		// @include background-image(linear-gradient($header-bg-clr-top, $header-bg-clr-bottom));
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		min-height: em-calc($header-h);
		z-index: 2;

		.light-bg & {
			@include transition(0.3s background-color $linear);
			background-color: $header-bg-clr-light;
		}

		.light-bg.opened & {
			background-color: $header-bg-clr-light-alt;
		}

		.logo {
			$logo-h: 20px;

			display: block;
			@include replace-text-with-dimensions("logo.png");
			margin-top: em-calc(($header-h - $logo-h) / 2);
		}
	}

.has-header-image {
	.ratio-img {
		display: block;
		width: 100%;
		min-height: em-calc($header-h-with-image);
	}
}

	.parallax-overflow-wrapper {
		overflow: hidden;
		position: relative;
	}

		.site-header-parallax {
			-webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */
			backface-visibility: hidden;
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			background-position: 50% 50%;
			background-repeat: no-repeat;
			@include background-size(cover);
		}


// Top nav collapse & expand

.js .top-nav-container {
	clip: rect(0 0 0 0);
	max-height: 0;
	position: absolute;
	display: block;
	overflow: hidden;
	zoom: 1;
}

	.top-nav-container-inner {
		padding: em-calc(20px) 0
	}

	.top-nav-container.opened {
		max-height: 9999px;
	}

		.top-nav-list {
			@include proper-clearfix;
			@extend .unstyled;
			margin: 0;
		}

html .nav-toggle { // Using an extra class here to override the default link styles
	@include user-select(none);
	position: absolute;
	top: em-calc(($header-h - $nav-btn-h) / 2);
	right: em-calc($default-spacing-static);
	background-color: $nav-btn-bg;

	span {
		display: block;
		text-indent: -9999px;
		width: 17px;
		height: 12px;
		background: image-url("hamburger-icon.gif") no-repeat 50% 0;
		margin: em-calc(($nav-btn-h - 12px) / 2) em-calc(($nav-btn-w - 17px) / 2);
	}

	&:hover span, &:focus span {
		background-position: 50% 100%;
	}
}

// Top nav links

.top-nav-list {
	color: $gray-3;

	li {
		font-size: em-calc($fs-l);
		@include margin-vertical(em-calc(5px, $fs-l));
	}

		a {
			color: $nav-link-clr;

			&:hover, &:focus {
				color: $nav-link-clr-action;
			}
		}

		.current-menu-item a {
			color: $nav-link-clr-action;
		}

	.lang-switcher {
		margin-bottom: em-calc($fs-s, $fs-s);
		font-size: em-calc($fs-s); // So this style is more specific than the <li> style
	}
}

// Language switcher

.lang-switcher {
	text-transform: uppercase;
	font-size: em-calc($fs-s);
	margin-bottom: em-calc($fs-s, $fs-s);

	a {
		font-weight: 500;
	}
}

// Homepage header

.homepage {
	.site-header {
		min-height: em-calc($header-h-homepage-1);
	}
}

.parallax-wrapper-homepage {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

	.site-header-parallax-homepage {
			background-image: image-url('header-image-homepage-1.jpg');
			@include background-size(auto);
			z-index: -1;
		}

.homepage-title {
	@include static-padding-horizontal;
	text-align: center;
	color: #fff;

	.logo-animated {
		width: em-calc(100px);
		height: em-calc(100px);
		margin-top: $header-h;

		.hl-outlines, .hl-fill, .hl-outlines-glow {
			fill: #fff;
		}

		.no-js & {
			.hl-fill, .hl-outlines-glow {
				display: none;
			}
		}
	}

	h1 {
		max-width: em-calc(650px, $fs-xl);
		color: #fff;
		margin: 0 auto 0;
		font-size: em-calc($fs-xl);

		.js & {
			opacity: 0;
			@include translate3d(0, 50px, 0);
			@include transition(all 0.25s $easeOutQuad);

			&.animate-in {
				opacity: 1;
				@include translate3d(0, 0, 0);
			}
		}
	}
}

	.btn-availability {
		$brd-thickness: 2px;
		$fs-button: $fs-s;
		$lh-button: $lh-s;
		$padding-button-vertical: 7px;
		$fs-checklist: 12px;
		$lh-checklist: 17px;
		$margin-checklist-item-vertical: 5px;

		@include font-roboto-bold;
		color: $txt-clr-btn-4;
		background-color: $bg-clr-btn-4;
		border: $brd-thickness solid $brd-clr-btn-4;
		@include border-radius(3px);
		outline: none;
		overflow: hidden;

		position: absolute;
		text-align: left;
		padding: 0;
		z-index: 2;
		@include transition(height 0.2s $easeInOutCubic, text-shadow 0.2s linear, background-color 0.2s linear, color 0.2s linear, border-color 0.2s linear);
		@include text-shadow(0 1px 2px rgba(#000, 0.25));
		height: em-calc($lh-button + (2 * $padding-button-vertical) + (2 * $brd-thickness));
		width: em-calc(280px);
		margin-left: em-calc(-140px);
		left: 50%;

		&:hover, &:focus {
			border-color: rgba(#fff, 0.8);
			background-color: rgba(#000, 0.3);
			// Really complicated calculation using the variables above to make sure the height is correct on hover
			height: em-calc(($lh-button + (2 * $padding-button-vertical)) + (4 * ($lh-checklist + $margin-checklist-item-vertical)) + $margin-checklist-item-vertical + $padding-button-vertical + (2 * $brd-thickness));
			color: $txt-clr-btn-4;
		}

		.btn-availability-text {
			font-size: em-calc($fs-button);
			line-height: lh-calc($lh-button, $fs-button);
			display: block;
			position: relative;
			padding: em-calc($padding-button-vertical, $fs-s) em-calc(45px, $fs-s) em-calc($padding-button-vertical, $fs-s) em-calc(15px, $fs-s);

			&:after {
				@include icon-font('icon-arrow-right');
				position: absolute;
				padding: em-calc($padding-button-vertical, $fs-button) em-calc(15px, $fs-button);
				line-height: lh-calc($lh-button, $fs-button);
				top: 0;
				right: 0;
			}
		}

		.checklist {
			@include proper-clearfix;
			margin: 0;
			padding: 0 em-calc(15px) em-calc(7px);

			li {
				font-size: em-calc($fs-checklist);
				color: #fff;
				line-height: lh-calc($lh-checklist, $fs-checklist);
				@include margin-vertical(em-calc($margin-checklist-item-vertical, $fs-checklist));
			}

				.checkbox, .checkmark {
					width: em-calc($lh-checklist, $fs-checklist);
				}
		}
	}

// Body

.site-body {
	@include proper-clearfix;
	background-color: #fff;
	position: relative;
}

// Blocks of the site

.block {
	@include static-padding-horizontal;
	// To collapse the margins
	@include proper-clearfix;
	&.on-top {
		position: relative;
		z-index: 1;
	}

	.site-body & {
		@include margin-vertical(em-calc($lh-default * 2));
	}
}

	.block-inner {
		max-width: em-calc($site-w);
		@include centered-by-margin;
	}

.block-breakout-s {
	.block-inner {
		max-width: em-calc($site-w-breakout-s);
	}
}

.block-outer {
	&.dark {
		background: $gray-3;
	}
}

// Brown/grayish background color
.block-alt {
	background: $content-clr-alt;
}

// Dark gray/black with noise pattern
.block-alt-2 {
	background: image-url('bg-noise.png') left top repeat $content-clr-alt-3;

	.multiplebgs.cssgradients & {
		@include background-image(
			bg-noise(),
			linear-gradient(128deg, $content-clr-alt-3, $content-clr-alt-2)
		);

		background-position: center;
		background-repeat: repeat, no-repeat;
		@include background-size(auto, 100%);
	}
}

// Lighter background with noise pattern (used on the homepage)
.block-alt-3 {
	background: image-url('bg-grid.png') right top no-repeat $content-clr-alt-4;
}

.multiplebgs .block-alt-3 {
	background-image: image-url('bg-grid.png'), bg-noise();
	background-position: right top, left top;
	background-repeat: no-repeat, repeat;
	background-color: $content-clr-alt-4;
}

// Post loops

.loop-post {
	@include proper-clearfix;
	@include padding-vertical(em-calc($lh-default));
	border-top: 1px dashed $gray-7;

	&:first-child {
		border-top: 0;
	}

	.title {
		@include margin-vertical(0);
		@include font-roboto-thin;
		text-transform: none;
		// line-height: lh-calc($fs-h1-1, $fs-h1-1);
	}

	.datepanel {
		@include font-roboto;
		display: block;
		color: $almost-black;
	}

		.day:after {
			content: "-";
		}
}



// Single post

.single-post-date {
	display: block;
	@include margin-vertical(em-calc($lh-default));
	color: $txt-clr-muted;
}



// Google Maps

.google-maps-container,
.google-maps-container * { @include box-sizing(content-box); }
.google-maps-container img { max-width: none; }

.google-maps-container {
	min-height: 300px;
	margin-bottom: $gutter-w;
}



// Contact & availability brokers

.broker {
	margin-top: em-calc($lh-default * 4);

	&.first {
		margin-top: 0;
	}

	figure {
		@include border-radius(50%);
		overflow: hidden;
		width: em-calc(84px);
		height: em-calc(84px);
		float: left;
		margin-right: $gutter-w * 0.5;
	}
}



// Panels

.panel {
	display: block;
	padding: em-calc($gutter-w);
	background-color: $gray-5;
	background-image: bg-noise();
	color: #fff;
	@include border-radius(3px);

	h1, h2, h3, h4, h5, h6 {
		color: #fff;
		&:first-child {
			@include margin-vertical(0);
		}
	}

	select, input, button {
		display: block;
		@include margin-vertical(em-calc($lh-default / 2));
	}

	select, input[type="text"] {
		@include font-roboto-bold;
		border-color: #fff;
		background-color: #fff;
		color: $gray-6;
		font-size: em-calc($fs-s);
		padding: em-calc(7px, $fs-s);
	}

	button {
		text-align: left;
		width: 100%;
		margin-bottom: 0;
	}
}

.panel-blank {
	#{headings()} {
		color: $green;
		&:first-child {
			@include margin-vertical(0);
		}
	}
}



	// This is also used on the homepage with some tweaks. See homepage section below.

	.checklist {
		@extend .unstyled;
		margin-left: em-calc(5px);

		li {
			font-size: em-calc($fs-s);
			line-height: lh-calc($lh-s, $fs-s);
			color: $gray-6;
			text-transform: uppercase;
			position: relative;
			padding-left: em-calc(35px);
			@include margin-vertical(em-calc(5px, $fs-s));
		}

			.checkmark {
				position: absolute;
				left: 0;
				z-index: 2;
				@include transition(all 0.2s $easeOutCubic);
				@include opacity(1);
				@include transform(translate3d(0, 0, 0));

				&.hidden {
					@include transition(none);
					@include opacity(0);
					@include transform(translate3d(0, -1em, 0));
				}
			}

			.checkbox {
				margin-right: em-calc(5px, $fs-s);
				position: absolute;
				left: 0;
			}
	}

	.bulletpoints {
		@extend .unstyled;

		li {
			border-top: 1px dashed $gray-6;
			position: relative;
			@include padding-vertical(em-calc(10px));
			@include proper-clearfix;

			&:first-child {
				border-top: none;
			}
		}

			$checkbox-w-h: 22px;

			.content {
				display: block;
				padding-left: em-calc($checkbox-w-h + 10px);
			}

			.checkbox {
				display: block;
				float: left;
				background-color: #fff;
				border: 2px solid rgba($gray-3, 0.5);
				position: relative;
				margin-top: em-calc(($lh-default - $checkbox-w-h) / 2);
				width: em-calc($checkbox-w-h);
				height: em-calc($checkbox-w-h);
				@include border-radius(2px);
			}

				.checkmark {
					@include transition(all 0.2s $easeOutCubic);
					@include opacity(1);
					@include transform(translate3d(0, 0, 0));
					position: absolute;
					display: block;
					width: 100%;
					height: 100%;
					background: image-url('checkmark.png') 50% 50% no-repeat;

					&.hidden {
						@include transition(none);
						@include opacity(0);
						@include transform(translate3d(0, -1em, 0));
					}
				}

	}



// Gallery

.gallery {
	@include margin-vertical(em-calc($lh-default));

	%global-column-styles {
		@include padding-horizontal(em-calc($gallery-spacing / 2));
		float: left;
	}

	@for $i from 1 through $cols {
		.col-#{$i} {
			@extend %global-column-styles;
			width: col-calc($i);
		}

		.col-l-#{$i} {
			margin-left: col-calc($i);
		}

		.col-r-#{$i} {
			margin-right: col-calc($i);
		}
	}

	.col-row {
		@include proper-clearfix;
		@include margin-horizontal(-($gallery-spacing / 2));
		margin-top: em-calc($gallery-spacing);

		&:first-child {
			margin-top: 0;
		}
	}

	.gallery-image-container {
		@include proper-clearfix;
	}

		.gallery-image-link, .gallery-image {
			display: block;
			@include centered-by-margin;
		}

		.gallery-image-link {
			max-width: 100%;
			position: relative;

			&:hover {
				.border-overlay {
					border-width: em-calc(4px);
				}
			}
		}

		.gallery-image {
			@include transition(all 0.2s $easeInOutQuad);
		}

		.border-overlay {
			width: 100%;
			height: 100%;
			display: block;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 2;

			border: 0 solid rgba(#fff, 0.4);
			@include transition(border-width 0.2s $easeInOutQuad);
		}
}

// Pagination

.pagination {
	@extend .btn-group;

	a, span {
		@extend .btn;
		float: left;
		padding: em-calc(7px, $fs-s);

		&:after {
			content: none;
		}
	}

	span {
		cursor: default;
		color: $gray-3;
		@include font-roboto;
		&:hover {
			color: $gray-3;
			border-color: $brd-clr-btn-1;
		}
	}
}


// Interactive map

.interactive-map-ratio-wrapper {
	$ratio-w: 16;
	$ratio-h: 9;

	height: 0;
	padding-bottom: ((100 / $ratio-w) * $ratio-h) + 0%;
	position: relative;
	overflow: hidden;
}

	.interactive-map {
		width: 100%;
		height: 100%;
		position: absolute;

		.image-slider, .slides-container {
			width: 100%;
			height: 100%;
		}

		.slide {
			position: absolute;
			top: 0;
			width: 100%;
			height: 100%;

			&:first-child {
				z-index: 10;
			}

			.map {
				width: 100%;
			}
		}

			.slide-inner {
				position: absolute;
				width: 100%;
				top: 50%;
				@include transform-origin(center, center);
				@include transform2d(translateY(-50%));
			}

				.interactive-map-overlay {
					z-index: 9;
					background-color: #fff;
					padding: em-calc(5px) em-calc(10px);
					position: absolute;
					@include border-radius(2px);
					@include box-shadow(0px 1px 5px rgba(0, 0, 0, 0.25));
					@include opacity(0);
					@include transform-origin(left, top);

					h4 {
						@include margin-vertical(0);
						font-size: em-calc($fs-s);
					}
				}

				.icon {
					position: absolute;
					z-index: 10;
					width: 2.3%;
					display: block;
					@include opacity(0);
					@include transform-origin(center, center);
					@include transform2d(translate(-50%, -50%) scale(0.1));
				}

				.icon-dot {
					// @include border-radius(50%);
					width: 2.5%;
					height: auto;
					// padding-bottom: 2.5%;

					@include opacity(1);
					@include transform2d(translate(-50%, -50%));
				}

				.icon-dot-green {
					background-color: $green;
				}

				.icon-dot-orange {
					// background-color: $orange;
				}

				.icon-dot-title {
					position: absolute;
					z-index: 10;
					font-size: em-calc($fs-xs);
					line-height: lh-calc($fs-xs, $fs-xs);
					@include transform-origin(center, bottom);
					@include transform2d(translate(-50%, -100%));
					margin-top: -0.8%;
				}

				.icon-dot-title-small {
					font-size: em-calc($fs-xxs);
					line-height: lh-calc($fs-xxs, $fs-xxs);
					margin-top: -0.8%;
				}

				// Slide Europe

				.slide-europe-inner {
					@include transform2d(translateY(-60%) scale(1.3));
				}

					.icon-dot-title-europe {
						@include transform2d(translate(-50%, -100%) scale((1/2)));
					}

					.interactive-map-overlay-london {
						left: 30%;
						top: 63%;
						@include transform-origin(center, center);
						@include transform2d(translate(-60%, -50%) scale((1/2.2)));
					}

					.interactive-map-overlay-berlin {
						right: 23.8%;
						top: 45.8%;

						@include transform-origin(right, top);
						@include transform2d(scale((1/2)) translateX(-10%));
					}

					.icon-kennedy-europe {
						left: 48.58%;
						top: 51.58%;
						width: 2% !important;
						@include transform-origin(center, bottom);
						@include opacity(1);
						@include transform2d(translate(-50%, -1500%) scale(1));
						z-index: 15;
					}

					.icon-kennedy-europe-shadow {
						left: 48.58%;
						top: 51.58%;
						width: 2% !important;
						height: 0;
						padding-bottom: 0.75%;
						@include transform2d(translate(-50%, -50%) scaleX(3));
						@include background-image(radial-gradient(center, ellipse contain, rgba(#000, 0.5) 0%, rgba(#000, 0) 100%));
					}

					.icon-dot-europe {
						width: 1.2%;
					}

					.icon-dot-europe-small {
						width: 0.8%;
					}

					.icon-dot-amsterdam, .icon-dot-title-amsterdam {
						left: 47%;
						top: 42.8%;
					}

					.icon-dot-rotterdam, .icon-dot-title-rotterdam {
						left: 44.85%;
						top: 47.35%;
					}

					.icon-dot-antwerp, .icon-dot-title-antwerp {
						left: 44.45%;
						top: 53.7%;
					}

					.icon-dot-brussels, .icon-dot-title-brussels {
						left: 44%;
						top: 57.3%;
					}

					.icon-dot-dusseldorf, .icon-dot-title-dusseldorf {
						left: 53.4%;
						top: 54.7%;
					}

					.icon-dot-hamburg, .icon-dot-title-hamburg {
						left: 65.9%;
						top: 33.1%;
					}

					.icon-dot-berlin, .icon-dot-title-berlin {
						left: 78%;
						top: 44.3%;
					}

					.icon-dot-london, .icon-dot-title-london {
						left: 28.1%;
						top: 46.59%;
					}

					.icon-dot-luxemburg, .icon-dot-title-luxemburg {
						left: 50.1%;
						top: 70.3%;
					}

					.icon-dot-paris, .icon-dot-title-paris {
						left: 35.1%;
						top: 75.7%;
					}

				// Slide Eindhoven
				.slide-eindhoven-inner {
					@include transform2d(translateY(-50%) scale(1.3));
				}

					.icon-dot-eindhoven {
						width: 1.2%;
					}

					.icon-dot-eindhoven {
						@include opacity(0);
						@include transform2d(translate(-50%, -50%) scale(0.1));
					}

					.icon-dot-title-eindhoven {
						text-align: center;
						@include opacity(0);
						@include transform2d(translate(-50%, -250%));
					}

					.icon-kennedy-eindhoven {
						left: 50.7%;
						top: 45.8%;
						width: 2% !important;
						@include transform-origin(center, bottom);
						@include opacity(1);
						@include transform2d(translate(-50%, -1000%) scale(1));
						z-index: 15;
					}

					.icon-kennedy-eindhoven-shadow {
						left: 50.7%;
						top: 45.8%;
						width: 2% !important;
						height: 0;
						padding-bottom: 0.75%;
						@include transform2d(translate(-50%, -50%) scaleX(3));
						@include background-image(radial-gradient(center, ellipse contain, rgba(#000, 0.5) 0%, rgba(#000, 0) 100%));
					}

					.interactive-map-overlay-campus {
						left: 48%;
						top: 56%;
						@include transform-origin(center, center);
						@include transform2d(translate(-50%, -70%) scale((1/1.8)));
					}

					.icon-dot-tue, .icon-dot-title-tue {
						left: 52.6%;
						top: 43%;
					}

					.icon-dot-daf, .icon-dot-title-daf {
						left: 60.2%;
						top: 54.8%;
					}

					.icon-dot-vdl, .icon-dot-title-vdl {
						left: 36.8%;
						top: 53.7%;
					}

					.icon-dot-high-tech-campus, .icon-dot-title-high-tech-campus {
						left: 43.87%;
						top: 70.7%;
					}

					.icon-dot-asml, .icon-dot-title-asml {
						left: 31.77%;
						top: 76.5%;
					}

					.icon-dot-eindhoven-airport, .icon-dot-title-eindhoven-airport {
						left: 19.8%;
						top: 38%;
					}

					.icon-dot-philips-healthcare, .icon-dot-title-philips-healthcare {
						left: 21.6%;
						top: 10.5%;
					}

					.icon-dot-automotive-campus, .icon-dot-title-automotive-campus {
						left: 89.9%;
						top: 22.6%;
					}

				// Slide street
				.slide-street-inner {
					@include transform2d(translateY(-50%) scale(1.25));
				}

					.interactive-map-overlay-street-legenda {
						left: 1%;
						bottom: 2%;
						@include opacity(0);
						@include transform2d(translateX(10%));

						font-size: em-calc($fs-s);

						img {
							width: em-calc($fs-s, $fs-s);
						}
					}

					// Kennedy location
					.icon-kennedy-street {
						left: 50.95%;
						top: 33.4%;
						width: 3%;
						@include transform-origin(center, bottom);
						@include opacity(1);
						@include transform2d(translate(-50%, -500%) scale(1));
						z-index: 15;
					}

					.icon-kennedy-street-shadow {
						left: 50.95%;
						top: 33.4%;
						width: 3%;
						height: 0;
						padding-bottom: 0.75%;
						@include transform2d(translate(-50%, -50%) scaleX(3));
						@include background-image(radial-gradient(center, ellipse contain, rgba(#000, 0.5) 0%, rgba(#000, 0) 100%));
					}

					// Station overlay
					.interactive-map-overlay-cs {
						left: 50.7%;
						top: 39.7%;

						@include transform2d(scale((1/4)) translateX(10%));
					}

					.icon-station {
						left: 49.4%;
						top: 39%;

						width: 2.5%;
					}

					// Parking icons
					.icon-parking-1 {
						left: 48.8%;
						top: 31.8%;
					}

					.icon-parking-2 {
						left: 46.4%;
						top: 44%;
					}

					.icon-parking-3 {
						left: 51.8%;
						top: 44.8%;
					}

					.icon-parking-4 {
						left: 39.4%;
						top: 39%;
					}

					.icon-parking-5 {
						left: 58%;
						top: 42.4%;
					}

					.icon-parking-6 {
						left: 63.6%;
						top: 41%;
					}

					.icon-parking-7 {
						left: 36.3%;
						top: 47%;
					}

					.icon-parking-8 {
						left: 56.2%;
						top: 54%;
					}

					.icon-parking-9 {
						left: 39.9%;
						top: 58.2%;
					}

					.icon-parking-10 {
						left: 56.3%;
						top: 61.5%;
					}

					.icon-parking-11 {
						left: 52.2%;
						top: 68.8%;
					}


					// Hotel icons
					.icon-hotel-1 {
						left: 40.1%;
						top: 29.4%;
					}

					.icon-hotel-2 {
						left: 49.9%;
						top: 55.1%;
					}

					.icon-hotel-3 {
						left: 47.5%;
						top: 57%;
					}

					.icon-hotel-4 {
						left: 48.9%;
						top: 58.3%;
					}

					.icon-hotel-5 {
						left: 35.6%;
						top: 53.6%;
					}

					.icon-hotel-6 {
						left: 54.5%;
						top: 63.2%;
					}

					.icon-hotel-7 {
						left: 44.5%;
						top: 70.7%;
					}

					.icon-hotel-8 {
						left: 44.1%;
						top: 74.8%;
					}
	}

	.map-nav {
		text-align: center;

		ul {
			display: inline-block;
			// vertical-align: middle;
			@include border-radius(2px);
			@extend .unstyled;
			@include proper-clearfix;
			background-color: #fff;
			@include box-shadow(0px 1px 5px rgba(0, 0, 0, 0.25));
			padding: em-calc(10px);
			margin: em-calc(10px) 0 0;
		}

			li {
				display: block;
				float: left;
				@include margin-horizontal(em-calc(7px));
			}

				a {
					@include transition(all 0.5s $easeOutCubic);
					@include border-radius(50%);
					background-color: $gray-6;
					display: block;
					width: em-calc(31px);
					height: em-calc(31px);
					border: em-calc(12px) solid #fff;

					&.active {
						background-color: #fff;
						border-color: $green;
					}
				}
	}

.no-animation {
	.interactive-map {
		.slide {
			-webkit-transform: translateZ(0);
			-webkit-perspective: 1000;
			-webkit-backface-visibility: hidden;
		}

		.slide-europe-inner {
			@include transform2d(translateY(-50%) scale(1.1));

			.interactive-map-overlay {
				@include opacity(1);
			}

			.interactive-map-overlay-london {
				@include transform2d(translate(-60%, -50%) scale((1/1.6)));
			}

			.interactive-map-overlay-berlin {
				@include transform2d(scale((1/1.6)));
			}
		}

		.slide-eindhoven-inner {
			@include transform2d(translateY(-50%) scale(1.1));

			.icon {
				@include opacity(1);
			}

			.icon-kennedy-eindhoven {
				@include translate(-50%, -100%);
			}

			.icon-kennedy-eindhoven-shadow {
				@include transform2d(translate(-50%, -50%) scaleX(1));
			}

			.interactive-map-overlay {
				@include opacity(1);
			}

			.icon-dot-eindhoven {
				@include opacity(1);
				@include transform2d(translate(-50%, -50%) scale(1));
			}

			.icon-dot-title {
				@include opacity(1);
				@include transform2d(translate(-50%, -100%));
			}

			.interactive-map-overlay-campus {
				left: 58%;
				top: 81%;
			}
		}

		.slide-street-inner {
			.interactive-map-overlay-cs {
				@include opacity(1);
				@include transform2d(scale((1/1.5)));
				left: 53%;
				top: 20%;
			}

			.icon {
				@include transform2d(translate(-50%, -50%) scale(1));
				@include opacity(1);
			}

			.icon-kennedy-street {
				@include transform2d(translate(-50%, -100%) scale(1));
			}
		}

		.interactive-map-overlay-street-legenda {
			@include opacity(1);
			@include translateX(0);
		}

	}
}

.image-slider {
	.image-container {
		img {
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			@include opacity(0);
			@include transition(opacity 0.5s);
			&.show {
				@include opacity(1);
			}
		}
	}
}



// Footer

.site-footer {
	text-transform: uppercase;
	text-align: center;
	background: bg-noise-dark() left top repeat;
	position: relative;

	a {
		// color: #fff;

		// &:hover, &:focus {
		// 	color: #919191;
		// }
	}
}

	.site-footer-nav-row {
		@include margin-vertical(em-calc($lh-default));

		.right {
			@include margin-vertical(em-calc($lh-default - 10px));
		}

			.btn-rounded {
				font-size: em-calc($fs-xs);
				margin: em-calc(10px, $fs-xs) em-calc(10px, $fs-xs);
			}
	}

		.footer-logo {
			width: 50%;
			height: 100%; // So safari scales it properly
			max-width: em-calc(100px);
			display: block;
			@include centered-by-margin;
			@include margin-vertical(em-calc($lh-default));

			path {
				fill: $gray-3;
			}
		}

		.footer-nav-list {
			@extend .unstyled;
			@include margin-vertical(0);

			li {
				line-height: lh-calc($lh-s, $fs-s);
				font-size: em-calc($fs-s);
			}

				a {
					@include font-roboto-bold;
					color: $gray-3;

					&:hover, &:focus {
						color: #fff;
					}
				}

				.current-menu-item a {
					color: #fff;
				}
		}

	.site-footer-meta {
		border-top: 1px solid rgba(#353535, 0.5);
		text-transform: uppercase;
		color: #5e5e5e;
		@include padding-vertical(em-calc($lh-default, $fs-xs));
		font-size: em-calc($fs-xs);

		a {
			color: #5e5e5e;

			&:hover, &:focus {
				color: #fff;
			}
		}
	}





// Homepage

.header-availability-wrapper {
	@include centered-by-margin;
	max-width: em-calc(300px);
	position: relative;
}

	.bulletpoints-dropdown {
		position: absolute;
		background-color: $gray-7;
		text-align: left;
		margin-top: 0;
		@include opacity(1);
		@include transform(translate3d(0, 0, 0));
		@include transition(all 0.2s $easeOutCubic);
		@include border-radius(3px);
		@include box-shadow(0px 5px 10px rgba(#000, 0.2));
		margin-top: em-calc(10px);
		margin-bottom: 0;

		li {
			color: darken($gray-3, 20%);
			@include font-roboto-bold;
			@include margin-horizontal(em-calc(15px));
		}

		&.hidden {
			@include transition(all 0.2s $easeInCubic);
			@include opacity(0);
			@include transform(translate3d(0, 50px, 0));
		}
	}

.homepage-intro-text {
	text-align: center;
	color: #525252;
	font-size: em-calc(18px);
	margin-bottom: em-calc(60px);
}

	.homepage-gray-header {
		text-align: center;
		text-transform: uppercase;
		@include margin-vertical(0);
		// margin-top: em-calc(70px, $fs-2);
		// margin-bottom: em-calc(20px, $fs-2);
		background: image-url('dotted-border.png') 0 100% repeat-x;

		span {
			@include padding-vertical(em-calc(52px, $fs-2));
			display: block;
			background: image-url('dotted-border.png') 0 0 repeat-x;
		}
	}

	.green-labels {
		@include proper-clearfix;
		text-align: center;
		margin-bottom: em-calc(52px);
		max-width: em-calc(700px);
		@include centered-by-margin;

		.image {
			float: left;
			width: 30%;
			margin-left: 5%;

			&:first-child {
				margin-left: 0;
			}

		}

			.title {
				display: block;
				color: $gray-2;
				// font-weight: normal;
				font-size: em-calc($fs-4);
				@include margin-vertical(0);
				@include transition(0.2s color linear);
			}

		a:hover, a:focus {
			.title {
				color: $txt-clr-link-alt;
			}
		}
	}


// Availability

.contact-block {
	// display: none;
	/* position: fixed;
	top: 100%;
	bottom: auto;
	width: 100%;
	background: #fff;
	z-index: 2;
	@include transition(all 0.5s $easeInOutQuad);
	&.show {
		bottom: 0;
		top: auto;
	} */
}



// Media block

.site-body .block-media { // Extra html class to override the default block class
	margin-bottom: 0;
}

	.block-inner-media {
		@include margin-vertical(em-calc(50px));

		.item {
			display: block;
			position: relative;
			overflow: hidden;
			@include transition(box-shadow 0.2s $easeInOutQuad);

			.item-inner {
				display: block;
				overflow: hidden;
			}

			img {
				display: block;
				@include transform-origin(center);
				@include transition(transform 4s $easeOutQuad);
			}

			.border-overlay {
				display: block;
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 3;
				border: 0 solid rgba(#fff, 0.4);

				@include transition(all 0.2s $easeInOutQuad);
			}

			.btn-play, h3, .link-inner {
				position: absolute;
				z-index: 2;
			}

			.btn-play {
				left: 50%;
				top: 50%;
				margin-left: -40px;
				margin-top: -40px;
			}

			h3 {
				margin: 0;
				width: 90%;
				font-size: em-calc($fs-5);
				color: #fff;
				top: 10%;
				left: 5%;
			}

			.link-inner {
				left: 5%;
				bottom: 10%;
				color: #fff;
				text-transform: uppercase;
				font-size: em-calc(14px);
			}

			&:hover, &:focus {
				img {
					@include transform(scale(1.1));
				}

				.border-overlay {
					border-width: em-calc(4px);
				}
			}
		}

		.item-video {
			@include background-size(cover);
			display: block;
			width: 100%;

			.btn-play path {
				@include transform-origin(center);
				@include transition(transform 0.2s $easeInOutQuad);
			}

			&:hover, &:focus {
				.btn-play path {
					@include transform(scale(1.1));
				}
			}
		}

		.item-city, .item-tower {
			margin-top: em-calc(10px);
		}
	}

	.btn-play {
		width: 80px;
		height: 80px;
	}

	.btn-rounded {
		@include border-radius(27px); // height (54) / 2
		padding: em-calc(13px) em-calc(27px);
		display: inline-block;
		border: 1px solid #353535;
	}


// Sustainable page

.block-sustainable-highlight {
	@include padding-vertical(em-calc($lh-default * 2));

	background: image-url('highlight-tower-1.jpg') 50% 50% no-repeat;
	@include background-size(cover);

	color: #fff;

	#{headings()} {
		color: #fff;
	}
}

.block-sustainable-rows {
	#{headings()} {
		margin-bottom: 0;
	}

	p, ul, ol {
		margin-bottom: 0;
	}

	hr {
		margin-top: em-calc($lh-default);
	}
}



// Video on building page

.timelapse {
	.header-video {
		background: image-url('timelapse-fallback.jpg') 50%;
		background-size: cover;
	}
}


html.video {
	.timelapse {
		.header-video-inner {
			display: none;
		}

		.video-loading {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			width: 100%;
			height: 100%;
			background: $almost-black;
			display: none;

			&:before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				width: 100%;
				height: 100%;
				background-image: bg-noise();
				@include opacity(0.3);
				display: none;
			}

			.graphic {
				width: 60px;
				height: 60px;
				position: absolute;
				left: 50%;
				top: 50%;
				margin-left: -30px;
				margin-top: -30px;
				background: image-url('logo-anim.gif');
				display: none;
			}

			&.show {
				display: block;

				.graphic, &:before {
					display: block;
				}
			}
		}

		video {
			@include opacity(0);
			display: none;
		}

		.buttons {
			z-index: 10;
			display: block;
			position: absolute;
			width: em-calc(52px);
			right: em-calc(40px);
			top: 50%;
			margin-top: em-calc(40px);
			@include transform-origin(center, center);
			@include transform2d(translateY(-50%));
			display: none;

			.locations {
				background: #fff;
				padding: em-calc(12px);
				margin-bottom: em-calc(10px);

				@include border-radius(em-calc(2px));
				@include box-shadow(rgba(0,0,0,0.2) 0 em-calc(1px) em-calc(3px));

				svg {
					display: inline-block;
					position: relative;
					left: -1px;
				}

				.location {
					display: block;
					width: 100%;
					text-align: center;
					@include font-roboto-bold;
					color: $gray-6;
					padding-top: em-calc(8px);
					border-top: 1px solid $gray-7;
					padding-bottom: em-calc(8px);

					&:nth-child(2) {
						padding-top: 0;
						border-top: 0;
					}

					&:last-child {
						padding-bottom: 0;
					}

					&.active {
						color: $green;
					}
				}
			}

			.day-night {
				background: #fff;
				padding: em-calc(18px) em-calc(12px);
				@include border-radius(em-calc(2px));
				@include box-shadow(rgba(0,0,0,0.2) 0 em-calc(1px) em-calc(3px));

				a {
					display: block;
					width: 100%;
					text-align: center;
					path, polygon, svg {
						fill: $gray-6;
						@include transition(fill 0.2s);
					}

					&.day {
						padding-bottom: em-calc(8px);
						border-bottom: 1px solid $gray-7;
					}

					&.night {
						padding-top: em-calc(8px);
						height: em-calc(29px);
					}

					&.active {
						path, polygon, svg {
							fill: $green;
						}
					}
				}
			}
		}
	}
}

.aspect-21-9 {
	position: relative;
	margin-bottom: -1px;
	width: 100%;
	z-index: 1;
	&:before {
		content: "";
		display: block;
		padding-top: 42.85714285714286%;
		overflow: hidden;
	}
	video, iframe, embed {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
	}
}


// Availibility building graphic

.availability-interactive, .building-interactive {
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	background: #222;
	min-height: 1109px;
	overflow: hidden;
	position: relative;
	padding: 0 2em;
	background: image-url('usp-background-small.jpg');
	background-color: #111;
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	z-index: 0;
	&.loaded {
		background-position: center 30%;
	}
	.building {
		-webkit-transform: translate3d(0, 0, 0);
		-moz-transform: translate3d(0, 0, 0);
		-ms-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		top: 4em;
		position: absolute;
		left: 50%;
		width: 900px;
		// @include transform(translateY(200px));
		// @include transition(transform 0.2s $linear);
		// @include transform(translateY(200px));
		/* &.intro {
			@include transform(translateY(0));
		} */
	}
	.building-graphic {
		width: 100%;
		// cursor: ns-resize;
		img {
			width: 100%;
			height: auto;
		}
	}

	&.dusk {
		background-image: image-url('usp-background-dusk-small.jpg');
		background-attachment: scroll;
		background-size: auto;
		min-height: 500px;
		.building {
			// left: auto;
			// right: 50%;
			width: 769px;
			@include transform(translateY(50px));
		}
	}

	.usps {
		position: absolute;
		z-index: -1;
		top: 0;
		left: 0;
		width: 45%;
		height: 100%;
		.usp {
			position: absolute;
			top: 50%;
			right: 0%;
			@include transform(translateY(-50%));
			color: #fff;
			@include font-nudista-thin;
			@include opacity(0);
			@include transition(opacity 0.5s);
			text-align: right;
			&.show {
				@include opacity(1);
			}
			.label {
				font-size: em-calc(26px);
				line-height: 1em;
				letter-spacing: em-calc(-10px, 166px);
				margin-left: em-calc(-10px, 166px);
			}
			.description {
				font-size: em-calc(16px);
				line-height: 1em;
				text-transform: uppercase;
				@include font-nudista;
			}

			&.usp-1 {
				.label {
					font-size: em-calc(58px);
				}
				.description {

				}
			}

			&.usp-2 {
				.label {
					font-size: em-calc(75px);
				}
				.description {
					font-size: em-calc(15px);
				}
			}

			&.usp-3 {
				.label {
					font-size: em-calc(183px);
					margin-left: 0;
				}
				.description {
					font-size: em-calc(18px);
				}
			}

			svg {
				width: 70%;
				path {
					fill: rgba(255,255,255,0.9);
					-webkit-filter: drop-shadow(1px 1px 5px rgba(0,0,0,0.2));
				}
			}
		}
	}

	.usp-nav {
		display: none;
		$usp-nav-btn-size: 40px;
		position: absolute;
		width: $usp-nav-btn-size;
		right: 1em;
		top: 50%;
		@include transform(translateY(-50%));
		&:before {
			display: block;
			position: absolute;
			left: 50%;
			top: $usp-nav-btn-size * 0.5;
			width: 1px;
			margin-left: -1px;
			bottom: $usp-nav-btn-size * 0.5;
			content: '';
			background: #a5967d;
		}
		a {
			position: relative;
			display: block;
			margin-top: 5px;
			width: $usp-nav-btn-size;
			height: $usp-nav-btn-size;
			@include border-radius(50%);
			&:first-child {
				margin-top: 0;
			}

			@include transition(font-size 0.1s $easeInOutQuad);
			cursor: pointer;
			&:before {
				content: '';
				display: block;
				position: absolute;
				width: 4px;
				height: 4px;
				left: 50%;
				top: 50%;
				margin-left: -2px;
				margin-top: -2px;
				background: $orange;
				@include border-radius(50%);
				@include transition(all 0.2s $easeInOutQuad);

			}
			&:after {
				content: '';
				display: block;
				position: absolute;
				width: 6px;
				height: 6px;
				left: 50%;
				top: 50%;
				margin-left: -3px;
				margin-top: -3px;
				background: #736957;
				@include border-radius(50%);
				@include transition(all 0.2s $easeInOutQuad);
			}
			&:hover, &.active {
				&:before {
					width: 30px;
					height: 30px;
					left: 50%;
					top: 50%;
					margin-left: -15px;
					margin-top: -15px;
				}
				&:after {
					background: #fff;
				}
			}
		}
	}

	.anchors {
		list-style: none;
		padding: 0;
		margin: 0;
		position: absolute;
		left: -80px;
		top: 0;
		bottom: 0;
		right: 59.5%;

		li {
			list-style: none;
			margin: 0;
			height: 4.2%;
			width: 100%;
			position: absolute;
			@include transform(translateY(-50%));
			a {
				position: absolute;
				display: block;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				cursor: pointer;
				background: image-url('pix.gif') left top repeat; // I can't beleive I have to add a background to make this work in IE9...

				@include transition(all 0.2s);

				.bullet {
					width: 30px;
					height: 30px;
					position: absolute;
					top: 50%;
					margin-top: -15px;
					left: 20px;
					&:before {
						content: '';
						position: absolute;
						@include border-radius(50%);
						background: $green;
						position: absolute;
						top: 50%;
						left: 50%;
						width: 0;
						height: 0;
						margin-top: 0;
						margin-left: 0;
						@include transition(all 0.2s $easeOutQuad);
					}
					&:after {
						content: '';
						position: absolute;
						background: white;
						width: 6px;
						height: 6px;
						@include border-radius(50%);
						position: absolute;
						top: 50%;
						left: 50%;
						margin-top: -3px;
						margin-left: -3px;
					}
				}

				&.active, &.visited, &:hover, &:focus {
					top: -5px;
					bottom: -5px;
					right: -5px;
					// border: 2px solid #fff;
					border-left: 0;
					@include border-radius(0 5px 5px 0);
					@include background-image(linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255, 0.3)));
					.bullet:before {
						width: 30px;
						height: 30px;
						margin-top: -15px;
						margin-left: -15px;
					}
				}

				&.visited {
					.bullet:before {
						background: $orange;
					}

					&:hover .bullet:before {
						background: $green;
					}
				}

				.floor-number {
					position: absolute;
					line-height: 18px;
					font-size: 18px;
					top: 50%;
					left: -10px;
					@include transform(translateY(-50%));
					@include font-nudista-bold;
					color: white;
					@include text-shadow(rgba(0,0,0,0.2) 0 2px 4px);
				}

				&.inactive {
					.bullet {
						&:before {
							background: $gray-3;
						}
						&:after {
							background: $almost-black;
						}
					}
					.floor-number {
						color: $almost-black;
						@include text-shadow(none);
						@include font-nudista;
					}

					&.active, &.visited, &:hover, &:focus {
						// background: $green;
						@include background-image(linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0, 0.3)));
					}
				}
			}
		}
	}
}

.building-interactive {
	&.no-parallax {
		min-height: em-calc(900px);
		.usps {

			.usp {
				@include opacity(1);

				svg {
					max-width: 100%;
				}
			}

			.usp-1 {
				top: 23%;
				max-width: em-calc(270px);
			}

			.usp-2 {
				top: 50%;
				max-width: em-calc(230px);
			}

			.usp-3 {
				top: 80%;
				max-width: em-calc(180px);


			}
		}
	}
}



.availability-panel {
	.content {
		background: #fff;
		position: fixed;
		z-index: 2;
		top: 50%;
		left: 50%;
		width: 90%;
		max-width: em-calc(600px);
		min-height: 10px;
		@include border-radius(2px);
		@include box-shadow(rgba(0,0,0,0.2) 0 2px 5px);
		display: none;
		@include transition(opacity 0.5s $easeInOutQuad);
		@include transform(translate(-50%, -50%));

		padding: 1em;

		.close {
			position: absolute;
			display: block;
			right: 0;
			top: 0;
			width: 42px;
			height: 42px;
			font-size: 28px;
			font-family: Arial, Baskerville, monospace;
			color: lighten($almost-black, 30);
			line-height: 42px;
			text-align: center;
			&:hover {
				color: $almost-black;
			}
		}

		h4 {
			margin: 0;
			color: $gray-3;
		}
		.h1 {
			margin: 0;
			@include font-nudista-bold;
			text-transform: none;
			color: $almost-black;
			margin-bottom: 0.5em;
		}
	}
	.bg {
		position: fixed;
		background: rgba(0,0,0,0.6);
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: none;
	}
	&.show {
		.content {
			display: block;
		}
		.bg {
			display: block;
		}
	}
}