/* Start - Reset styles */
@import "resetStyles";
@import "mixins.less";
//@import "https://fast.fonts.net/cssapi/519715d9-b0d3-465a-aad1-bb812cc6c1ab.css";

@font-face {
	font-family: "Frutiger LT W01_45 Ligh1475730";
	src: url('/styles/fonts/frutiger_w01_45_light.woff2');
}

@font-face {
	font-family: "Frutiger LT W01_65 Bold1475746";
	src: url('/styles/fonts/frutiger_w01_65_bold.woff2');
}

/* End - Reset styles */

/* Start - Global styles */
/* Start - Fonts */
/* TODO: define your global fonts  */

/*
font-family:'Frutiger LT W01_45 Ligh1475730';
font-family:'Frutiger LT W01_46 Ligh1475734';
font-family:'Frutiger LT W01_55 Roma1475738';
font-family:'Frutiger LT W01_56 Italic';
font-family:'Frutiger LT W01_65 Bold1475746';
font-family:'Frutiger LT W01_66 Bold Italic';
font-family:'Frutiger LT W01_75 Black';
font-family:'Frutiger LT W01_76 Blac1475758';
font-family:'Frutiger LT W01_95 Ultra Black';
font-family:'Frutiger LT W01_47 Light Cond';
font-family:'Frutiger LT W01_48 Light Cn It';
font-family:'Frutiger LT W01_57 Condensed';
font-family:'Frutiger LT W01_58 Cond1475774';
font-family:'Frutiger LT W01_67 Bold Cond';
font-family:'Frutiger LT W01_68 Bold Cn It';
font-family:'Frutiger LT W01_77 Black Cond';
font-family:'Frutiger LT W01_78 Black Cn It';
font-family:'Frutiger LT W01_87 X Black Cn';
font-family:'Frutiger LT W01_88 X Blk Cn It';
*/

@fontStandard: 'Frutiger LT W01_45 Ligh1475730';
@fontBold: 'Frutiger LT W01_65 Bold1475746';

@colorBlack: #0b0b0b;
@colorGrey: #e5e5e5;
@colorDarkGrey: #333333;


*  {
	/* With this definition you're able to give the body-tag a font-family and it's inherited downwards */
	font-size: inherit;
	font-family: inherit;
	font-weight: inherit;
	line-height: inherit;
}


body {
	font-family: @fontStandard;
	font-size: 18px;
	color: @colorBlack;
	line-height: 1.3;

}

html, body {
	height: 100%;
}
/* End - Fonts */
/* End - Global styles */

/* Start - Page layout */
/* TODO: define the base HTML-structure (like the wrapper, header, article and footer) */

header.desktop {
	position: fixed;
	z-index: 1000;
	width: 100%;
	height: 150px;
	top: 0;
	left: 0;


	.header-background {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background-color: rgba(229,229,229,1);
		border-bottom: 1px solid rgb(207, 207, 207);
		opacity: 0;
		transition: all .5s;
		&.scroll-state {
			opacity: 1;
			transition: all .1s;
		}
	}




	.menu-right {
		position: absolute;
		right: 0;
		padding-right: 20px;
		padding-top: 20px;
		text-align: center;
		color: #9c9e9f;


		.logo-svg {
			display: inline-block;
			margin-bottom: 20px;

			polygon, rect, path {
				fill: #9D9D9C;
				transition: all .5s;
			}


			&.scroll-state {
				polygon, rect, path {
					fill: #8c8e8f;
					transition: all .5s;
				}
			}
		}

		.slogan {
			color: #9D9D9C;
			font-family: 'Frutiger LT W01_65 Bold1475746';
			transition: all .5s;

			&.scroll-state {
				transition: all .5s;
				color: #8c8e8f;
			}
		}

		.slogan2.scroll-state {
			color: #8c8e8f;
		}
	}

	.menu-items {
		padding-top: 95px;

		& > nav {
			width: 100%;

			& > nav {
				display: none;
			}

			& > a {
				display: inline-block;
				padding: 5px 20px;
				text-align: center;

				&.active {
					background-color: white;
					border: 1px solid #747474;
					font-family: @fontBold;
				}

				&:after {
					display:block;
					content:attr(title);
					font-family:@fontBold;
					height:1px;
					color:transparent;
					overflow:hidden;
					visibility:hidden;
				}
			}

			& .submenu {
				-webkit-transform: translate3d(0, 0, 0);
				transform: translate3d(0,0,0);
				display: none;
				color: white;
				position: fixed;
				left: 0;
				top: 150px;
				width: 100%;
				padding-bottom: 20px;
				padding-top: 20px;
				z-index: 10;

				nav {
					.container;
					padding: 0 85px;
					text-align: left;
				}

				a, a:link, a:visited {
					display: none;
					color: white;
					display: block;
					width: 33%;
					float: left;
					font-size: 14px;
					padding: 10px 0;
					transform: translate3d(0,0,0);

					&.active {
						font-family: @fontBold;
					}
				}
			}
		}
	}

	.submenu-placeholder {
		position: fixed;
		top: 150px;
		width: 100%;
		background-color: #333333;
		-webkit-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0);
	}

	.language-switch {
		position: absolute;
		z-index: 2;
		left: 20px;
		top: 20px;
		a {
			display: inline-block;
			margin: 0 5px;
			width: 29.5px;
			text-align: center;

			&:last-child {
				margin-right:  0;
			}

			&:after {
				display:block;
				content:attr(title);
				font-family:@fontBold;
				height:1px;
				color:transparent;
				overflow:hidden;
				visibility:hidden;
			}
		}

		a.active {
			font-family: @fontBold;
		}

		.spacer {
			position: relative;
			top: 2px;
			display: inline-block;
			height: 30px;
			width: 1px;
			background-color: #9d9fa0;
		}
	}


}

header.mobile {
	height: 100px;
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background-color: @colorGrey;
	z-index:99999;
	border-bottom: 1px solid rgb(207, 207, 207);
	line-height: 1;

	.button-expand {
		position: absolute;
		right: 15px;
		top: 12px;
		width: 35px;
		height: 25px;
		padding: 13px 0;
		cursor: pointer;

		span {
			position: absolute;
			background-color:#9d9d9c;
			width: 100%;
			height: 5px;
			display: block;
			margin-bottom: 5px;
			-webkit-transition: -webkit-transform 0.2s, top 0.4s 0.2s;
			-moz-transition: transform 0.2s, top 0.4s 0.2s;
			-o-transition: transform 0.2s, top 0.4s 0.2s;
			transition: transform 0.2s, top 0.4s 0.2s;
			left: 0;
			opacity: 1;

			&:nth-child(1){
				top: 0px;
			}
			&:nth-child(2){
				top: 10px;
			}
			&:nth-child(3){
				top: 20px;
			}
		}

		&.active {
			span {
				background-color: black;
				top: 10px;
				-webkit-transition: top 0.2s, -webkit-transform 0.3s 0.2s;
				-moz-transition: top 0.2s, transform 0.3s 0.2s;
				-o-transition: top 0.2s, transform 0.3s 0.2s;
				transition: top 0.2s, transform 0.3s 0.2s;

				&:nth-child(1),
				&:nth-child(2){
					-ms-transform: rotate(135deg); /* IE 9 */
					-webkit-transform: rotate(135deg); /* Chrome, Safari, Opera */
					transform: rotate(135deg);
					position: absolute;

				}

				&:nth-child(3),
				&:nth-child(4){
					-ms-transform: rotate(-135deg); /* IE 9 */
					-webkit-transform: rotate(-135deg); /* Chrome, Safari, Opera */
					transform: rotate(-135deg);
				}
			}
		}
	}

	.menu-items {
		position: fixed;
		top: 100px;
		width: 100%;
		background-color: white;
		padding: 0 30px;
		max-height: calc(~"100% - 100px");
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
		border-bottom: 1px solid @colorGrey;

		& > nav {
			& > a {
				display: block;
				padding: 10px 0;
				border-top: 1px solid @colorGrey;

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

				&.has-child {
					background: rgba(0, 0, 0, 0) url("/images/arrow_down.png") no-repeat scroll right center;
				}
			}

			.submenu > nav > a {
				display: block;
				padding: 5px 0;
				.transform(translateX(15px));

				&.active {
					font-family: @fontBold;
				}
			}
		}
	}

	.logo-svg {
		margin-top: 10px;
		margin-left: 15px;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 140px;
		//margin-bottom: 20px;
		img{
		margin-bottom:10px;
		}

		polygon, rect, path {
			fill: #8c8e8f;
		}
	}


	.language-switch {
		position: absolute;
		right: 15px;
		bottom: 15px;

		a {
			display: inline-block;
			width: 20px;
			margin: 0 5px;
			text-align: center;
			&.active {
				font-family: @fontBold;
			}

			&:last-child {
				margin-right: 0;
			}
		}

		.spacer {
			position: relative;
			top: 10px;
			display: inline-block;
			height: 30px;
			width: 1px;
			background-color: #9d9fa0;
		}
	}

	.slogan {
		color: #9D9D9C;
		font-family: 'Frutiger LT W01_65 Bold1475746';
		font-size: 11px;
		display: inline-block;
	}




}

.page-wrapper {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
	&.offset-1 {
		padding-top: 150px;
	}
}




footer {
	font-size: 14px;
	text-align: right;
	background-color: #e5e5e5;
	border-top: 1px solid #cfcfcf;
	position:relative;
	z-index:1000;
	padding: 20px 0 !important;
	width: 100%;
	&.container {
		max-width: 870px;

	}

	span {
		display: inline-block;
	}
}



/* End - Page layout */

/* Start - Across entrytypes */
/* TODO: define class styles of recurring elements (e.g. you have styled buttons with the class .arrow in multiple templates) */


.container {
	width: 1000px;
	max-width: 100%;
	padding: 0 65px;
	margin: 0 auto;
	position: relative;
}

a, a:link, a:hover {
	text-decoration: none;
	color: @colorDarkGrey;

	&:hover {
		font-family: @fontBold;
	}
}

b {
	font-weight: normal;
	font-family: @fontBold;
}

.fulljustify {
	text-align: justify;
}
.fulljustify:after {
	
	display: inline-block;
	width: 100%;
}

.button {
	background-color: white;
	height: 35px;
	display: inline-block;
	border: 1px solid #808080;
	transition: all .5s;
	line-height: 35px;
	color: black !important;
	font-family: @fontBold;
	padding-left: 10px;
	padding-right: 10px;

	&:hover {
		background-color: #cccccc;
		transition: all .5s;
	}

	&.button-xing {
		background-image: url('/images/icon_xing.png');
		background-size: cover;
		width: 40px;
	}

	&.button-linkedin {
		background-image: url('/images/icon_linkedin.png');
		background-size: cover;
		width: 40px;
	}
}


h1 {
	font-size: 36px;
	background-color: white;
	display: block;
	font-family: @fontBold;
	border: 1px solid #5e5e5e;
	padding: 12px 20px 12px 20px;
	.transform(translateY(-50%));
}

.fpmain,
.fpmainen,
.fpmainfr{
	width: 100% !important;
}

ul {
	padding-top: 5px;
	list-style-type: square;
}

ul li {
	margin-left: 18px;
	margin-bottom: 5px;
}


.hyphen {
	-webkit-hyphens: manual;
	hyphenate-limit-chars: 14 4 4;
	-webkit-hyphenate-limit-lines: 2;
}

.capital {
	font-variant: small-caps;
}

/* End - Across entrytypes */

/* Start - Entrytype styles */
/* TODO: define the style of each entrytype separate; don't mix these style (if you have it's to define in the "Across entrytype"-sector) */
.entry-slideshow {
	.slideshow {
		width: 100%;
		position: relative;
		z-index: 1;

		&:after {
			padding-top: calc(~"45% - 450px");
			min-height: 450px;
			display: block;
			content: '';
		}

		.slideshow-content {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;

			.cycle-slideshow {
				width: 100%;
				height: 100%;

				.cycle-slide {
					width: 100%;
					height: 100%;
					overflow-y: hidden;

					.image {
						width: 80%;
						height: 100%;
						background-size: cover;
						background-position: top;
						float: left;
					}

					.description {
						width: 20%;
						background-color: @colorDarkGrey;
						height: calc(~"100% - 150px");
						margin-top: 150px;
						float: right;
						color: white;
						padding: 60px 20px 20px 20px;
						position: relative;
						line-height: 130%;
						font-size: 24px;
						
						.subtitle {
							margin-bottom: 20%;
						}

						.title {
							margin-bottom: 10%;
							font-family: @fontBold;
							color: #afb1b2;
							line-height:110%;
							font-size: 36px;
						}

						.cycle-pager {
							position: absolute;
							bottom: 10%;
							left: 20px;

							span {
								svg {
									margin-right: 5px;
									transition: all .4s;
									fill: #999999;
								}

								&:hover {
									cursor: pointer;
									svg {
										fill: white;
									}
								}
							}

							span.cycle-pager-active {
								svg {
									transition: all .4s;
									fill: white;
								}
							}

						}
					}
				}

				.cycle-prev,
				.cycle-next {
					position: absolute;
					top: 80%;
					.transform(translateY(-50%));
					z-index: 150;

					.arrow {
						width: 15px;
						polyline {
							transition: all .4s;
							stroke: white;
							stroke-width: 3px;
						}

						&:hover {
							cursor: pointer;
							polyline {
								transition: all .4s;
								opacity: .5;
							}
						}
					}
				}

				.cycle-prev {
					left: 20px;

					.arrow {
						.transform(rotate(180deg));
					}
				}

				.cycle-next {
					right: 20px;
				}
			}
		}
	}
	.slideshow-pusher {
		position: relative;
		z-index: -1;
		width: 100%;
		display: none;

		&:after {
			//padding-top:  calc(~"50% - 450px");
			padding-top:  calc(~"45% - 450px");
			min-height: 450px;
			display: block;
			content: '';
		}
	}
}

.entry-box-raster {
	position: relative;
	top: -30px;
	z-index: 99;
	width: 59%;
	max-width: 870px;
	margin: 0 auto;

	.box {
		display: inline-block;
		width: 32%;
		background-color: @colorGrey;
		margin-bottom: 4%;
		padding: 15px;
		height: 320px;
		
		float: left;
		position: relative;
		border: 1px solid #dadada;

		&:after {
			padding-top: 20%;
			display: block;
			content: '';
			overflow: hidden;
		}

		&:nth-child(3n+2){
			margin-left: 2%;
			margin-right: 2%;
		}

		.box-title-wrapper {
			position: relative;
			margin-bottom: 8%;
			background-color: white;
			border: 1px solid #828282;
			

			&:after {
				padding-top: 70px;
				display: block;
				content: '';
				overflow: hidden;
			}

			.box-title {
				line-height: 1.2;
				position: absolute;
				padding:0 15px;
				font-size: 24px;
				top: 50%;
				left: 50%;
				width: 100%;
				.transform(translateX(-50%) translateY(-50%));
				text-align: left;
				font-family: @fontBold;
				font-size: 24px;
			}
		}

		.box-content {
			line-height:1.4;
			padding: 0 15px;
			padding-right: 0;
		}

		.more-button {
			position: absolute;
			bottom: 4%;
			right: 4%;
			background-color: white;
			border: 1px solid #8e8e8e;
			box-shadow: inset 0 0 0 1px #dfdfdf;
			text-align: center;
			padding: 0% 6%;
			line-height:1.5;

			&:after {
				display:block;
				content:attr(title);
				font-family:@fontBold;
				height:1px;
				color:transparent;
				overflow:hidden;
				visibility:hidden;
			}
		}

	}
}


.entry-parralax-bild {
	width: 100%;
	position: relative;
	z-index: -1;
	&:after {
		padding-top: 40%;
		display: block;
		content: '';
		overflow: hidden;
	}

	.perspective {
		perspective: 1000px;
		overflow: hidden;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		-webkit-transform: translate3d(0, 0, 0);

		.parralax-image {
			width: 100%;
			height:  130%;
			background-size: cover;
			background-position: top;
			-webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0,0,0);
			-webkit-backface-visibility: hidden;
			-webkit-perspective: 1000;
			.transform(translateY(-23.2689%));
			&:after {
				padding-top: 33%;
				display: block;
				content: '';
			}
		}
	}
}

.entry-standard {
	border-bottom: 1px solid #e2e2e2;
	border-top: 1px solid #e2e2e2;
	background-color: white;
	position: relative;
	z-index: 99;

	&:last-child {
		border-bottom: none;
	}
	.subtitle,
	.subtitleen,
	.subtitlefr{
		width: 100% !important;
		font-size: 24px;
		color: #9c9e9f;
		padding-left: 20px;
		padding-right: 20px;
		padding-bottom: 20px;

		.small {
			font-size: 18px;
			color: black;
		}
	}

	.fpmain,
	.fpmainen,
	.fpmainfr{
		width: 100% !important;
		margin-bottom: 20px;
		padding-left: 20px;

		-webkit-column-count: 2; /* Chrome, Safari, Opera */
		-moz-column-count: 2; /* Firefox */
		column-count: 2;
		-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
		-moz-column-gap: 40px; /* Firefox */
		column-gap: 40px;
		
	}

	.aufklapptext-wrapper {
		padding: 20px 0;
		padding-bottom: 80px;
		background-color: white;
		border-top: 1px solid white;
		transition: all .4s;


		&.open {
			border-top: 1px solid #cfcfcf;
			background-color:#e5e5e5;
			transition: all .4s;
		}

		.aufklapptext {
			width: 50%;
			float: left;
			padding-left: 20px;

			&:nth-child(2n){
				padding-left: 30px;
			}

			button {
				border: 1px solid black;
				background-color: white;
				padding: 5px 10px;
				text-align: center;
				cursor: pointer;

				.arrow {
					transition: all .4s;
					display: inline-block;
					float: right;
					margin-left: 15px;
				}

				&.open .arrow {
					transform: rotate(90deg);
					transition: all .4s;
				}

				&:hover, &.active {
					font-family: @fontBold;
				}

				&:after {
					display:block;
					content:attr(title);
					font-family:@fontBold;
					height:1px;
					margin-right: 15px;
					color:transparent;
					overflow:hidden;
					visibility:hidden;
				}
			}

			.aufklapptext-content {
				padding-top: 20px;
				display: none;
				font-size: 16px;

				.description {
					width: 100% !important;
				}
			}
		}
	}
}


.entry-team {
	margin-bottom: 50px;
	.left {
		width: 33%;
		float: left;
		position: relative;
	}
	.right {
		width: 66%;
		float: right;
		position: relative;
		padding-left: 20px;
		padding-top: 40px;
	}
	h1 {
		font-size: 24px;
		padding-top: 11px;
	}

	.picture {
		width: 100%;
		padding-top: 100%;
		display: block;
		background-size: cover;
		background-position: center;
		position: relative;
		top: -20px;
	}

	.description,
	.descriptionfr,
	.descriptionen {
		width: 100% !important;
		margin-bottom: 20px;
	}

	.aufklapptext {
		margin-bottom: 40px;
		button {
			border: 1px solid black;
			background-color: white;
			padding: 5px 10px;
			text-align: center;
			cursor: pointer;

			.arrow {
				transition: all .4s;
				display: inline-block;
				float: right;
				margin-left: 15px;
			}

			&.open .arrow {
				transform: rotate(90deg);
				transition: all .4s;
			}

			&:hover, &.active {
				font-family: @fontBold;
			}

			&:after {
				display:block;
				content:attr(title);
				font-family:@fontBold;
				height:1px;
				color:transparent;
				overflow:hidden;
				visibility:hidden;
				margin-right: 15px;
			}
		}

		.aufklapptext-content {
			padding-top: 20px;
			display: none;
			font-size: 16px;

			.moreen,
			.morefr,
			.more {
				width: 100% !important;

				table {
					margin-top: 5px;
					width: 100% !important;
					height: auto !important;
					margin-bottom: 5px;

					td {
						padding-bottom: 5px;
					}
				}
			}

		}



	}

	.contact {
		width: 200px;
		float: left;
		position: relative;
		z-index: 99;
	}

	.buttons {
		position: relative;
		.button {
			height: 40px;

			&.button-vCard {
				line-height: 40px;
				position: relative;
				top: 3px;
			}
		}
	}
}


/*
.entry-team {
	position: relative;
	top: -35px;
	.ribbon {
		background-color: #333333;
		color: white;
	}

	.team-member {
		width: 32%;
		float: left;

		&:nth-child(2){
			margin-left: 2%;
			margin-right: 2%;
		}


		&:hover {
			.picture {
				opacity: 0.5;
				transition: opacity .5s;
			}
		}

		.name-wrapper {
			font-family: @fontBold;
			background-color: white;
			border: 1px solid @colorBlack;
			margin-bottom: 10px;
			padding: 10px 20px;
			font-size: 24px;
		}


		.picture {
			width: 100%;
			background-size: cover;
			opacity: 1;
			transition: opacity .5s;
			display: block;


			&:after {
				padding-top: 100%;
				display: block;
				content: '';
			}
		}

		.description {
			padding: 20px;
			height: 250px;
		}
	}

	.team-member-ribbon {
		width: 32%;
		float: left;
		color: white;
		padding: 20px;
		padding-right: 0;

		&:nth-child(2){
			margin-left: 2%;
			margin-right: 2%;
		}

		a, a:link, a:visited, a:hover {
			color: white
		}

		.buttons {
			padding-top: 40px;
			.button-cv,
			.button-vCard {
				float: right;
				margin-right: 5px;
			}

			.button-vCard {
				margin-right: 0;
			}
		}
	}
}
*/

.entry-kontakt {
	margin-bottom: 20px;
	.map {
		width: 60%;
		float: left;
		position: relative;
		margin-right: 5%;
		margin-bottom: 5%;
		&:after {
			padding-top: 100%;
			display: block;
			content: '';
		}

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

	.image {
		width: 60%;
		float: left;
		margin-right: 5%;
		margin-bottom: 5%;

		img {
			width: 100%;
		}
	}

	i {
		font-weight: normal;
		font-style: normal;
		display: inline-block;
		padding: 5px 10px;
		border: 1px solid #8f8f8f;
		text-align: center;
		display: inline-block;

		&:after {
			display:block;
			content:"Lageplan (PDF)";
			font-family:@fontBold;
			height:1px;
			color:transparent;
			overflow:hidden;
			visibility:hidden;
		}
	}
}

div.zusatz,
div.zusatzen,
div.zusatzfr {
	padding-left: 20px;
	width:100%;
}


/* End - Entrytype styles */

/* Start - Freshpage elements (these classes are defined in Freshpage and setable) */
.small {
	font-size: 10px
}
font[size="4"],
.big {
	font-size: 24px;
	font-family: @fontBold;
}

.tbltype-emphheader tr td {
	background-color: #f8f8f8;
	vertical-align:top !important;
}
.tbltype-emphheader tr:first-child td {
	background-color: #e0e0e0;
}

.tbltype-fairplan {
	border-spacing: 1px;
}
.tbltype-fairplan tr td {
	background-color: #f8f8f8;
	vertical-align:top !important;
}

.tbltype-headline {
	border-spacing: 1px;
}
.tbltype-headline tr td {
	padding:8px;
	background-color: #f8f8f8;
	border:1px solid #ccc;
	vertical-align:top;
}

#oContentTable tr td {

}
#editor b, #editor strong{
	font-weight:bold !important;
	/* font-family: 'DaxComp' !important;  */
}
#editor i, #editor em{
	font-style:italic !important;
	/* font-family: 'DaxComp' !important; */
}

#editor {
	font-size: 18px !important;
}
/* End -
 Freshpage elements  */



@import "webstyles_responsive";