/*
Theme Name: 	TM Immoswiss
Theme URI: 		http://odoson.com
Version: 		1.0
Author: 		Robert Baumgartner
Author URI: 	http://odoson.com
*/



/*** Sensible Defaults ***/

@import "css/reset.css";
@import "css/animation.css";
@import "css/flickity.css";
@import "js/lightbox/css/lightbox.min.css";

div,
article,
section,
header,
footer,
nav,
li					{ position:relative; /* For absolutely positioning elements within containers (add more to the list if need be) */ }
body 				{ background:#fff; /* Don't forget to style your body to avoid user overrides */ }
/*::-moz-selection 	{ background:#ff0; color:#333; }
::selection 		{ background:#ff0; color:#333; } */

* {
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
	   -moz-font-smoothing: antialiased;
	        font-smoothing: antialiased;
}



/* Helper Classes */

.clear { clear: both; }
strong { font-weight: bold; }
em { font-style: italic; }
a, a:link, a:visited, a:hover, a:focus { color: inherit; }


html, body {
	font-family: 'PT Sans', sans-serif;
	font-size: 13px;
	line-height: 125%;
	color: #395775;
	height: 100%;
}

.pagewrap {
	min-height: 100%;
}

	.wrap {
		width: 100%;
		max-width: 770px;
		display: flex;
		flex-flow: row wrap;
		flex: 1;
		margin: 0 auto;
		padding: 0 15px;
	}
	
	.wrap.large {
		max-width: 1060px;
	}
	

header {
	height: 90px;
	position: fixed;
	z-index: 999;
	top: 0;
	left: 0;
	width: 100%;
	background: #fff;
	box-shadow: 0 0 4em rgba(0,0,0,0.2);
}
	
	header .wrap {
		height: 100%;
		position: relative;
	}
	
	header a.logo {
		width: 80px;
		height: 50px;
		background: url(css/img/logo.png) no-repeat center left;
		background-size: contain;
		display: block;
		text-indent: -1000px;
		overflow: hidden;
		top: 50%;
		transform: translateY(-50%);
		position: absolute;
	}
	
	header nav {
		position: absolute;
		right: 15px;
		top: 50%;
		transform: translateY(-50%);
		text-align: right;
		display: none;
	}
	
	.navToggle {
		display: none;
	}
		
		@media (max-width: 699px) {
			
			.navToggle {
				display: block;
				position: absolute;
				top: 25px;
				right: 30px;
				height: 40px;
				width: 40px;
				padding-top: 6px;
				cursor: pointer;
			}
			
				.navToggle span {
					height: 3px;
					background: #395775;
					width: 35px;
					margin: 5px 0;
					margin-left: 5px;
					display: block;
				}
			
			header nav.open {
				display: block;
			}
			
			header nav {
				text-align: left;
				top: 90px;
				background: #f8f8f8;
				transform: translateY(0);
				left: -15px;
				width: 100%;
				width: calc(100% + 30px);
				padding: 15px 30px;
				border-bottom: 2px solid #8A9AB1;
			}
			
			
			header nav ul li a {
				display: block;
				text-decoration: none;
			}
			
			header nav ul li {
				font-family: 'Open Sans Condensed', sans-serif;
				font-size: 1.5rem;
				font-weight: bold;
				line-height: 130%;
				text-transform: uppercase;
				letter-spacing: 0.05em;
			}
			
			header nav ul li ul {
				margin: 7px 0;
				padding: 0 10px;
				border-left: 2px solid #8A9AB1;
			}
			
			header nav ul li ul li {
				font-size: 1.3rem;
				font-weight: normal;
				letter-spacing: 0;
				color: #8A9AB1;
			}
			
		}
		
	
		@media (min-width: 700px) {
			header nav {
				display: block;
			}
		
	
			header nav ul {
				display: flex;
				flex-flow: row wrap;
				font-family: 'Open Sans Condensed', sans-serif;
				font-size: 1rem;
				font-weight: bold;
				line-height: 130%;
				text-transform: uppercase;
				letter-spacing: 0.05em;
			}
			
				header nav ul li a {
					display: block;
					padding: 1em 0.5em;
					text-decoration: none;
				}
				
				header nav ul ul {
					display: none;
					background: #fff;
					position: absolute;
					width: 200px;
					padding: 2em 1em 1em 1em;
					text-align: center;
					left: 50%;
					margin-left: -100px;
				}
				
					header nav ul ul li a {
						padding: 0.5em 0;
					}
					
					header nav ul li:hover ul {
						display: block;
					}
	
		}
	
	.full,
	.half,
	.third,
	.quarter {
		width: 100%;
		padding: 15px;
		
	}
	
	.half,
	.third,
	.quarter {
		display: flex;
		flex-flow: row wrap;
	}
	
	.quarter.referenz {
		width: 100%;
		padding: 5px;
	}
	
	.nav-left,
	.nav-right {
		text-align: center;
	}
	
	@media (min-width: 400px) {
		.quarter.referenz {
			width: 50%;
		}
	}
	
	@media (min-width: 500px) {
		.half,
		.quarter {
			width: 50%;
		}
		
		.third {
			width: 33.33%;
		}
		
		.nav-left {
			text-align: left;
		}
		
		.nav-right {
			text-align: right;
		}
	}
	
	@media (min-width: 700px) {
		.quarter {
			width: 25%;
		}
		
		.quarter.referenz {
			width: 50%;
		}
	}
	
	@media (min-width: 900px) {
		.quarter.referenz {
			width: 25%;
		}
	}
	
	.hero {
		height: 100vh;
		padding: 3rem 0;
		padding-top: 90px;
		position: relative;
		color: #fff;
		text-align: center;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}
	
		.hero.img-hero {
			height: auto;
			padding: 0;
			width: 100%;
			overflow: hidden;
		}
		
		.hero.img-hero img {
			width: 130%;
			max-width: 130%;
			height: auto;
			padding: 0;
			margin: 0;
			margin-left: -15%;
			display: block;
		}
		
		.hero.img-hero .wrap {
			position: absolute;
			top: 0;
			left: 50%;
			transform: translateX(-50%);
		}
	
	.hero#kontakt {
		padding-top: 10rem;
		min-height: 100vh;
		min-height: calc(100vh - 117px);
		height: auto;
	}
	
	.hero-slides {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
		width: 100%;
		height: 100%;
	}
	
		.hero-slides .slide {
			height: 100%;
			width: 100%;
			background-position: center;
			background-size: cover;
			background-repeat: no-repeat;
		}
	
	.hero-overlay {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 10;
		width: 100%;
		height: 100%;
		background: #25394e;
		opacity: 0.45;
	}
	
	.hero .wrap {
		z-index: 11;
		position: relative;
		height: 100%;
	}
	
	.hero.first .hero-overlay,
	.hero.first .wrap,
	.hero.first .full {
		pointer-events: none;
	}
	
	.area {
		padding: 3rem 0;
	}
	
	.area + .area {
		padding-top: 0;
		margin-top: -2em;
	}
	
	.area.first {
		padding-top: 120px;
	}
	

h1, h2 {
	font-family: 'Droid Serif', serif;
	font-size: 1.8rem;
	line-height: 120%;
	font-weight: bold;
	left: 0.025em;
	text-transform: uppercase;
}

	@media (min-width: 600px) {
		h1, h2 {
			font-size: 2.3rem;
			line-height: 120%;
		}
	}

h3 {
	font-family: 'Droid Serif', serif;
	font-size: 1.3rem;
	line-height: 120%;
	font-weight: bold;
	left: 0.025em;
	text-transform: uppercase;
	margin-bottom: 1.2em;
	position: relative;
}

	h3::after {
		content: "";
		position: absolute;
		bottom: -0.5em;
		width: 4rem;
		height: 1px;
		background: #395775;
		left: 50%;
		transform: translateX(-50%);
	}
	
	h3.no-line::after {
		display: none;
	}

p+h3 {
	margin-top: 2em;
}

h4 {
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 1.2rem;
	font-weight: bold;
	line-height: 130%;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

	@media (min-width: 600px) {
		h1, h2 {
			font-size: 3.3rem;
			line-height: 120%;
		}
		
		h3 {
			font-size: 1.5rem;
			line-height: 120%;
		}
		
		h4 {
			font-size: 1.5rem;
			line-height: 130%;
		}
	}

p {
	margin-bottom: 1.3em;
}

hr {
	height: 1px;
	border: 0;
	background: #fff;
	width: 80%;
	margin: 2rem auto;
}

	hr.blue {
		background: #395775;	
	}

.deadcenter {
	position: absolute;
	top: 50%;
	width: 100%;
	left: 0;
	transform: translateY(-50%);
}

.thumbnail {
	width: 100%;
	position: relative;
	height: 156px;
	margin-bottom: 1.4rem;
}
	
	.thumbnail::before {
		content: "";
		padding-top: 65%;
		position: relative;
	}

	.thumbnail .image {
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	
	.thumbnail .image.contain {
		background-size: contain;
	}

.text-block {
	margin: 0 auto;
	max-width: 450px;
}

	.text-block h2+h3,
	.text-block h1+h3 {
		margin-top: 1em;
	}

img {
	max-width: 100%;
	height: auto;
	margin: 1em 0;
}
	
.block_unternehmen {
	color: #fff;
	padding: 1rem;
	background: #8A9AB1;
	display: flex;
	flex: 1;
	flex-flow: column wrap;
}
	
	.block_unternehmen h3 {
		color: #fff;
	}
	
		.block_unternehmen h3::after {
			background-color: #fff;
		}

.team.inner {
	display: flex;
	flex: 1;
	flex-flow: column wrap;
}

.text {
	width: 100%;
}

.referenz {
	height: 200px;
}

	
	.referenz .inner {
		display: flex;
		flex-flow: column wrap;
		top:0;
		left: 0;
		width: 100%;
	}

	.referenz .reference {
		background-color: #eee;
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	
	.referenz .reference .text {
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 10;
		width: 100%;
		background: rgba(38,58,80,0.45);
		padding: 0.5rem;
		font-family: 'Open Sans Condensed', sans-serif;
		font-weight: bold;
		line-height: 150%;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		color: #fff;
		font-size: 1.4rem;
		overflow: hidden;
		opacity: 0;
		-webkit-transition: all 0.25s ease-in-out;
		-moz-transition: all 0.25s ease-in-out;
		-o-transition: all 0.25s ease-in-out;
		transition: all 0.25s ease-in-out;
	}
	
	.referenz:hover .reference .text {
		opacity: 1;
	}
	
		.referenz .reference .text p {
			margin-bottom: 0;
		}
		

.block_kompetenz {
	color: #fff;
	padding: 0;
	background: #8A9AB1;
	display: flex;
	flex: 1;
	flex-flow: column wrap;
}
	
	.block_kompetenz.even {
		background: #395775;
	}
	
	.block_kompetenz .text {
		padding: 0 1rem 1rem 1rem;
	}
	
	.block_kompetenz h3 {
		color: #fff;
	}
	
		.block_kompetenz h3::after {
			background-color: #fff;
		}

img.person-large {
	max-height: 80vh;
	max-height: calc(100vh - 350px);
	width: auto;
	max-width: 100%;
	margin: 0 auto;
	margin-bottom: -5px;
	display: block;
}

footer {
	background: #395775;
	color: #fff;
	padding: 1.5rem;
}

	footer a {
		text-decoration: none;
	}
	
	footer p {
		margin-bottom: 0;
	}
	
	footer a.logo {
		width: 80px;
		height: 50px;
		background: url(css/img/logo-white.png) no-repeat center left;
		background-size: contain;
		display: block;
		text-indent: -1000px;
		overflow: hidden;
		top: 50%;
		transform: translateY(-50%);
		position: absolute;
	}
	
	@media (max-width: 499px) {
		footer .wrap {
			display: block;
			text-align: center;
		}
		
		footer .quarter {
			display: block;
			text-align: center;
		}
		
		footer a.logo {
			transform: translateY(0);
			position: static;
			margin: 0 auto;
		}
	}

.flickity-prev-next-button,
.flickity-prev-next-button:hover {
	background: transparent;
}

.flickity-prev-next-button .arrow {
    fill: #fff;
}

.scroll-down-arrow,
.scroll-up-arrow {
	cursor: pointer;
	z-index: 99;
	-webkit-transition: all 0.25s ease-in-out;
	-moz-transition: all 0.25s ease-in-out;
	-o-transition: all 0.25s ease-in-out;
	transition: all 0.25s ease-in-out;
	width: 3em;
	height: 3em;
	position: absolute;
	left: 50%;
	transform: translateX(-50%) translateY(-200%);
}

.scroll-down-arrow span,
.scroll-up-arrow span {
	border-left: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(-45deg);
	width: 70%;
	height: 70%;
	display: block;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%) rotate(-45deg);
}

.scroll-up-arrow span {
	transform: translateX(-50%) translateY(-50%) rotate(135deg);
}

.scroll-down-arrow:hover {
	transform: translateX(-50%) translateY(-180%) scale(1.1);
}

.scroll-up-arrow:hover {
	transform: translateX(-50%) translateY(-220%) scale(1.1);
}