/*
Theme Name: 	it3.ch
Theme URI: 		http://it3.ch
Version: 		1.0
Author: 		migagentur
Author URI: 	http://migagentur.ch
*/



/*** Sensible Defaults ***/

@import "css/reset.css";
@import "css/flickity.css";
@import "typo.css?v=4";
@import "blocks.css?v=5";



div,
article,
section,
header,
footer,
nav,
li					{ position:relative; /* For absolutely positioning elements within containers (add more to the list if need be) */ }

::-moz-selection 	{ background:#5b6670; color:#fff; }
::selection 		{ background:#5b6670; color:#fff; }

* {
	box-sizing: border-box;
}

/* 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: 'DIN Pro', sans-serif;
	font-weight: 400;
	font-size: 13px;
	line-height: 120%;
	color: #1277B2;
	overflow-x: hidden;
	background: #fff;
	font-variant-numeric: lining-nums;
}

@media (min-width: 450px) {
	html, body {
		font-size: 15px;
		line-height: 120%;
	}
}

@media (min-width: 1200px) {
	html, body {
		font-size: 16px;
		line-height: 120%;
	}
}

/* @media (min-width: 1400px) {
	html, body {
		font-size: 18px;
		line-height: 120%;
	}
} */

/* @media (min-width: 1600px) {
	html, body {
		font-size: 20px;
		line-height: 120%;
	}
} */

body {
	padding-top: 4.5rem;
}

	@media (min-width: 750px) {
		body {
			padding-top: 6rem;
		}
	}

.page-wrap {
	width: 100%;
	/* max-width: 2000px; */
	margin: 0 auto;
	background: #fff;
	/* box-shadow: 0 0 2rem rgba(0,0,0,0.2); */
	overflow: hidden;

}

header {
	height: 4.5rem;
	background: #fff;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 9999;
	border-bottom: 1px solid #ddd;
}

	@media (min-width: 750px) {
		header {
			height: 6rem;
		}
	}

	header .wrap {
		width: 100%;
		max-width: 1280px;
	    margin: 0 auto;
	    padding: 0 2rem;
		display: flex;
		flex-flow: row wrap;
		align-items: center;
		height: 100%;
	}

		@media (min-width: 1400px) {
			header .wrap {
				padding: 0 1rem;
			}
		}

		header .wrap a.logo {
			margin-right: auto;
			width: 7rem;
			height: 3.3rem;
			text-indent: -1000px;
			overflow: hidden;
			background: url(css/img/logo.svg) no-repeat center left;
			background-size: contain;
		}

			@media (min-width: 750px) {
				header .wrap a.logo {
					width: 9rem;
					height: 3.3rem;
				}
			}

		header nav {
			display: none;
		}

			@media (min-width: 750px) {
				header nav {
					display: block;
				}
			}

			header nav ul {
				display: flex;
				flex-flow: row wrap;
				font-weight: bold;
				color: #18364B;
			}

				header nav ul li {
					margin-left: 1.5rem;
				}

					@media (min-width: 900px) {
						header nav ul li {
							margin-left: 3rem;
						}
					}

					header nav ul li a {
						text-decoration: none;
						display: block;
						padding: 1.5rem 0;
					}

				header nav ul ul {
					display: block;
					opacity: 0;
					width: 14rem;
					background: #18364B;
					color: #fff;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translateX(-50%) translateY(3rem) scaleX(1.02) scaleY(1.3);
					transform-origin: center top;
					height: auto;
					font-weight: 400;
					padding: 2rem 0;
					pointer-events: none;
					font-size: 1.1rem;
					z-index: 99999;
				}

				.has-loaded header nav ul ul {
					transition: all 0.2s ease-in-out;
				}

					header nav ul li:hover ul {
						opacity: 1;
						transform: translateX(-50%) translateY(1.8rem) scaleX(1) scaleY(1) ;
						pointer-events: all;
						font-size: 1rem;
					}

					header nav ul ul li {
						height: auto;
						margin: 0;
					}

					header nav ul ul li a {
						display: block;
						height: auto;
						text-align: center;
						padding: 0.25rem 1rem;
						width: 100%;
					}

		header .mieterservice {
			position: absolute;
			top: 100%;
			right: 2rem;
			background: #FF7D23;
			color: #fff;
			padding: 0.5rem 6rem 0.5rem 1rem;
			text-decoration: none;
			line-height: 90%;
			margin-top: 1px;
			transition: background-color 0.2s ease-in-out;
			display: none;
		}

			.home header .mieterservice {
				display: block;
			}

			@media (min-width: 1400px) {
				header .mieterservice {
					right: 1rem;
				}
			}

			header .mieterservice:hover {
				background-color: #FF7D23
			}

			header .mieterservice::after {
				content: "";
				display: block;
				background: url(css/img/wrench.svg) no-repeat center ;
				background-size: contain;
				width: 2rem;
				height: 2rem;
				position: absolute;
				right: 1rem;
				top: 50%;
				transform: translateY(-50%) rotate(225deg);

			}

	.nav-toggle {
		cursor: pointer;
		display: block;
		width: 50px;
		height: 50px;
		display: none;
		padding-top: 8px
	}

		.nav-toggle span {
			display: block;
			width: 30px;
			height: 3px;
			background: #18364B;
			margin: 6px 0 6px auto;
		}

		@media (max-width: 749px) {
			.nav-toggle {
				display: block;
			}

			.nav-open header nav {
				display: block;
			}

			header nav {
				padding: 1.5rem 0;
				display: none;
				background: #fff;
				z-index: 999;
				position: absolute;
				top: 4.5rem;
				left: 0;
				width: 100%;
				box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.3);
			}

				header nav ul {
					display: block;
					font-size: 1.4rem;
					line-height: 120%;
				}

					header nav ul li a {
						padding: 0.75rem 0;
					}

				header nav ul ul {
					display: none;
					position: relative;
					opacity: 1;
					transform: none !important;
					left: -2rem;
					width: calc(100% + 4rem);
					padding: 1rem 2rem;
					text-align: left;
					background: #eee;
					color: #1277B2;
					margin-bottom: 1rem;
				}

						header nav ul li:hover ul {
							transform: none !important;
						}

					header nav ul .active ul {
						display: block;
					}

					header nav ul ul li {
						text-align: left;
					}

					header nav ul ul li a {
						text-align: left;
						padding: 0.25rem 0;
						font-weight: bold;
					}
		}

.footer-end {
	color: #fff;
	background-color: #1277B2;
}

.wrap {
	display: flex;
	flex-flow: row wrap;
	align-items: flex-end;
	max-width: 1280px;
	padding: 0 2rem;
	margin: 0 auto;
}

	@media (min-width: 1400px) {
		.wrap {
			padding: 0 1rem;
		}
	}

	footer .part {
			width: 33.33%;
			font-size: 0.7rem;
			line-height: 130%;
			align-self: flex-end;
			padding: 10px 12px;
			text-align: center;
		}

			@media (max-width: 750px) {
				footer .part:nth-child(0),
				footer .part:nth-child(1),
				footer .part:nth-child(2) {
					display: none;
				}

				footer .part:nth-child(5) {
					text-align: center;
					display: block;
					width: 100% !important;
					margin: 12px 0;
				}
			}

			@media (min-width: 600px) {
				footer .part {
					width: 16.6%;
					font-size: 0.7rem;
					line-height: 130%;
					align-self: flex-end;
					text-align: left;
				}
			}

			@media (min-width: 750px) {
				footer .part {
					width: 12.5%;
					font-size: 0.7rem;
					line-height: 130%;
					align-self: flex-end
				}
			}

		footer .part img {
			width:auto;
			height: 100%;
			max-height: 30px;
		}

.footer-logo {
	width: 100%;
	height: 45px;
	background: url(css/img/logo-white.svg) no-repeat center left;
	background-size: contain;
}





.tabs {
	display: flex;
	flex-flow: row wrap;
}

.tabs.is-hidden {
	display: none;
}

	.tabs .tab {
		padding: 0;
		width: 100%;
		cursor: pointer;
		margin-bottom: 1rem;
		font-size: 1.5rem;
		font-weight: bold;
		text-transform: uppercase;
	}

	/* .tabs .tab.active {
		background: #e4e4e4;
	} */


	.tabs .tab .inner,
	.tabs .tab .inner-mobile {
		background: #67b1e3;
		padding: 2em 1em;
		text-align: center;
		color: #fff;
		text-transform: uppercase;
		letter-spacing: 0.1em;
		display: block;
	}

	.tabs .tab.tab-sh .inner { background: #aaa; }
	.tabs .tab.tab-sg .inner { background: #187bb2; }



	.tab-content {
		background: #e4e4e4;
		padding: 3rem 2rem;
		display: none;
	}

	.tab-content.is-visible {
		display: block;
	}

	.tab-content .inner {
		width: 100%;
		max-width: 600px;
		margin: 0 auto;
		display: flex;
		flex-flow: row wrap;
	}

		.tab-content .service-area {
			width: calc(100% - 1rem);
			margin: 0.5rem;
		}

		.service-area img {
			max-width: 100%;
			width: auto;
			height: auto;
		}

		@media (min-width: 500px) {
			.tab-content .service-area {
				width: calc(50% - 1rem);
				margin: 0.5rem;
			}
		}

		.tab-content .service-area .tile {
			background: #1277b2;
			color: #fff;
			text-align: center;
			padding: 2rem 2rem;
			text-transform: uppercase;
			font-weight: bold;
			letter-spacing: 0.1em;
			height: 100%;
			cursor: pointer;
		}

			.tab-content .service-area .tile:hover {
				background: #0b5e8f;
			}

			.tab-content .service-area .tile .icon {
				width: 5rem;
				height: 5rem;
				background-position: center;
				background-repeat: no-repeat;
				background-size: contain;
				margin: 0 auto 1rem auto;
			}

				.tab-content .service-area .tile .icon.mitteilung { background-image: url(css/img/message.svg); }
				.tab-content .service-area .tile .icon.stoerung { background-image: url(css/img/stoerung.svg); }
				.tab-content .service-area .tile .icon.anmeldung { background-image: url(css/img/anmeldung.svg); }
				.tab-content .service-area .tile .icon.einzahlungsschein { background-image: url(css/img/einzahlungsschein.svg); }
				.tab-content .service-area .tile .icon.namensschild { background-image: url(css/img/namensschild.svg); }
				.tab-content .service-area .tile .icon.zivilstand { background-image: url(css/img/zivilstand.svg); }
				.tab-content .service-area .tile .icon.schluessel { background-image: url(css/img/schluessel.svg); }
				.tab-content .service-area .tile .icon.diverseformulare { background-image: url(css/img/diverseformulare.svg); }

		.tab-content .service-area.active {
			width: 100%;
		}

		.tab-content .service-area.active .tile {
			display: none;
		}


.service-content {
	color: #666;
	display: none;
	padding-top: 3rem;
}

.service-area.active .service-content {
	display: block;
}

.service-content h3 {
	color: #1277b2;
	font-weight: normal;
	text-align: left;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 1.5rem;
	line-height: 120%;
	margin-bottom: 2em;
}

.service-content h4 {
	color: #1277b2;
	font-weight: bold;
	font-size: 1.2rem;
	margin: 1.5em 0 0.5em 0;
}

.service-content ol {
	list-style-type: decimal;
	padding-left: 1.5em;
	margin: 1.2em 0;
}

	.service-content ol li {
		margin-bottom: 0.25em;
	}


.service-content p {
	margin-bottom: 1.2em;
}

.service-content p.red {
	color: #c31919
}


.service-content form {
	margin: 2rem 0;
}


.service-content form .form-row {
	margin-bottom: 1rem;
}


.service-content form label {
	font-weight: bold;
}

.service-content form label .wpcf7-list-item-label {
	font-weight: normal;
}

span.wpcf7-list-item {
	margin: 0 1em 0 0;
}

.service-content form select,
.service-content form input[type='text'],
.service-content form input[type='email'],
.service-content form input[type='submit'],
.service-content form textarea {
	border: 1px solid #1277b2;
	padding: 0.7rem 1rem;
	width: 100%;
	outline: none;
	border-radius: 0;
	appearance: none;
	-webkit-appearance: none;
	font: inherit;
	color: #1277b2;
	margin: 0.5rem 0;
}

.service-content form input[type='submit'] {
	font-weight: bold;
	width: auto;
	background: #1277b2;
	color: #fff;
	font-size: 1.25rem;
	line-height: 120%;
}

.service-content .area-specific {
	display: none;
}

.service-content .area-specific.active {
	display: block;
}

.service-content a.area-specific.active {
	display: inline;
}

.service-content .checkboxes {
	margin-bottom: 2rem;
}

.service-content .checkboxes .wpcf7-checkbox {
	display: flex;
	flex-flow: row wrap;
}

	.service-content .checkboxes .wpcf7-checkbox .wpcf7-list-item {
		width: 100%;
		margin: 0;
		padding-right: 1rem;
	}

.service-content .flex {
	display: flex;
	flex-flow: row wrap;
}

	.service-content .flex .half {
		width: 100%;
		padding: 0;
	}

	@media (min-width: 500px) {
		.service-content .flex .half {
			width: 50%;
		}
	}

.hidden {
	display: none !important;
}

.js-back,
.js-back-location {
	position: absolute;
	left: 0;
	border: 2px solid #999;
	color: #777;
	font-weight: bold;

	top: 0;
	cursor: pointer;
	padding: 0.5rem;
	margin-top: -1rem;
}

.js-back-location {
	margin: 0 auto;
	position: relative;
	margin-bottom: 1rem;
	display: none;
}

	.js-back-location.is-visible {
		display: inline-block;
	}

.icon-machine {
	width: 10rem;
	height: 10rem;
	background: url(css/img/machine.svg) no-repeat center;
	background-size: contain;
	margin-left: auto;
}

form .success-message {
	display: none;
	background: #f8f8f8;
	border: 2px solid #ccc;
	font-weight: bold;
	color: #666;
	padding: 1rem;
}

form.sent .success-message {
	display: block;
}

form.sent .wpcf7-response-output {
	/*display: none !important*/
}


.projectpage-area .wrap {
	display: block;
}

	.projectpage-area h1 {
		text-align: center;
	}

	.projectpage-area {
		padding: 1rem 0;
	}

		@media (min-width: 500px) {
			.projectpage-area {
				padding: 2rem 0;
			}
		}

		@media (min-width: 800px) {
			.projectpage-area {
				padding: 3rem 0;
			}
		}

		.area-white {
			background: #fff;
		}

		.area-gray {
			background: #eee;
			color: #111;
		}

		.area-lightblue {
			background: rgba(89, 173, 224, 0.15);
			background: rgba(16,40,65,0.8);
			color: #59aee1;
			color: #fff;
		}


	.projektlogo {
		width: 50%;
		max-width: 240px !important;
		margin: 2rem auto 0 auto;
		height: auto;
		display: block;
	}


	.projectpage-area h1 {
		margin: 2em 0 1em 0;
	}

		.projectpage-area h1:first-child {
			margin-top: 0;
		}

	.projectpage-area .address {
		text-align: center;
		margin: 1rem 0;
	}

	.projectpage-area img {
		max-width: 100%;
		height: auto;
		margin: 0 auto;
	}


	.projectpage-area .text {
		max-width: 600px;
		margin:  0 auto;
	}


	.projectpage-area .bigger {
		font-size: 1.25rem;
		line-height: 140%;
		font-weight: 600;
	}


	.properties {
		border-radius: 0.2rem;
		overflow: hidden;
		overflow: auto;
	}
	.property-row {
		display: flex;
		flex-flow: row wrap;
		padding: 1rem 0;
		border-bottom: 1px solid #ccc;
		transition: all 0.3s ease-in-out;
		min-width: 550px;
	}

		.property-row:hover {
			background: #f8f8f8;
		}

		.property-row.header-row {
			background: #fff;
			color: #59aee1;
			font-weight: bold;
		}

		.property-row > div {
			flex: 2;
			padding: 0 0.5rem;
		}

		.property-row .num {
			font-weight: bold;
		}

		.property-row .sqm,
		.property-row .rooms,
		.property-row .pdf {
			flex: 1;
		}

		.property-row .pdf {
			text-align: right;
		}


	.projectpage-area .gallery {
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
		margin-left: -0.5rem;
		width: calc(100% + 1rem)
	}

		.projectpage-area .gallery-item {
			width: 100%;
			width: calc(100% - 1rem);
			margin: 0.5rem;
			background-size: cover;
			background-position: center;
		}

			@media (min-width: 450px) {
				.projectpage-area .gallery-item {
					width: 50%;
					width: calc(50% - 1rem);
				}
			}

			.projectpage-area .gallery-item::before {
				content: "";
				display: block;
				padding-bottom: 60%;
			}


	.projectpage-area .contact {
		display: flex;
		flex-flow: row wrap;
	}

		@media (min-width: 800px) {
			.projectpage-area .contact {
				padding: 3rem 0;
			}
		}


		.projectpage-area .contact .image img {
			width: 80%;
			height: auto;
			margin: 0 auto;
			display: block;
		}

	@media (min-width: 700px) {
		.projectpage-area .contact .text {
			width: 50%;
		}

		.projectpage-area .contact .image {
			width: 50%;
		}

		.projectpage-area .contact .image img {
			width: 100%;
			height: auto;
		}
	}