/* rufina-regular - latin */
@font-face {
	font-family: 'Rufina';
	font-style: normal;
	font-weight: 400;
	font-display:swap; 
	src: local(''),
			 url('https://static.immoserver.ch/fonts/google/rufina-v13-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
			 url('https://static.immoserver.ch/fonts/google/rufina-v13-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* rufina-700 - latin */
@font-face {
	font-family: 'Rufina';
	font-style: normal;
	font-display:swap;
	font-weight: 700;
	src: local(''),
			 url('https://static.immoserver.ch/fonts/google/rufina-v13-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
			 url('https://static.immoserver.ch/fonts/google/rufina-v13-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* lato-300 - latin */
@font-face {
	font-family: 'Lato';
	font-style: normal;
	font-weight: 300;
	font-display:swap;
	src: local(''),
		url('https://static.immoserver.ch/fonts/google/lato-v23-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
		url('https://static.immoserver.ch/fonts/google/lato-v23-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* lato-regular - latin */
@font-face {
	font-family: 'Lato';
	font-style: normal;
	font-weight: 400;
	font-display:swap;
	src: local(''),
		url('https://static.immoserver.ch/fonts/google/lato-v23-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
		url('https://static.immoserver.ch/fonts/google/lato-v23-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* lato-700 - latin */
@font-face {
	font-family: 'Lato';
	font-style: normal;
	font-weight: 700;
	font-display:swap;
	src: local(''),
		url('https://static.immoserver.ch/fonts/google/lato-v23-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
		url('https://static.immoserver.ch/fonts/google/lato-v23-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}


:root
{
	--content-width: 80rem;
	--content-padding: 2rem;
	--content-padding-vertical: calc(var(--content-padding) / 2);
	--content-padding-horizontal: var(--content-padding);
}


html, body 
{
	font-family: 'Lato', sans-serif;
	font-weight: 400;
	font-size: 17px;
	
	padding: 0px;
	margin: 0px;
	color: #030304;
	text-align: center;
}

.clearfix:before,
.clearfix:after {
    content:"";
    display:table;
}
.clearfix:after {
    clear:both;
}
.clearfix 
{
    zoom:1; /* For IE 6/7 (trigger hasLayout) */
}

a
{
	color: #030304;
	text-decoration: none;
}

header
{
	position: fixed;
	top: 0px;
	left: 0px;
	right: 0px;
	z-index: 1000;
	background: #FFF;
}

header.big
{
	background: transparent;
	-moz-transition: all .5s ease-in;
	-webkit-transition: all .5s ease-in;
    -o-transition: all .5s ease-in;
    transition: all .5s ease-in;
}

.scrolled header.big
{
	background: #FFF;
}

header .logo
{
	float: left;
	display: block;
	width: 220px;
}

header .logo img
{
	width: 100%;
}

header nav
{
	float: right;
	margin-right: 100px;
}

header.big nav
{
	float: none;
	margin: 0 auto;
}

header nav a
{
	display: inline-block;
	padding: 0px 30px;
	font-size: 24px;
	text-transform: uppercase;
	line-height: 92px;
}

header.big nav a
{
	color: #FFF;
	-moz-transition: all .5s ease-in;
	-webkit-transition: all .5s ease-in;
    -o-transition: all .5s ease-in;
    transition: all .5s ease-in;
}

.scrolled header.big nav a
{
	color: #000;
}

header nav a.on,
header nav a:hover
{
	text-decoration: underline;
}

main
{
	margin-top: 92px;
}


main.big
{
	margin-top: 0px;
}

h2
{
	font-family: 'Rufina', serif;
	font-weight: 400;
	font-size: 55px;	
}

h3
{
	font-family: 'Rufina', serif;
	font-weight: 400;
	font-size: 35px;	
}


.typo
{
	max-width: 800px;
}

.intro 
{
	position: relative;
	height: 90vh;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: cover;
	overflow: hidden;
}


.intro .overlay
{
	position: absolute;
	top: 10%;
	left: 0px;
	right: 0px;
	text-align: center;
}

main.big .intro .overlay
{
	top: 20%;
}

.intro h1
{
	font-size: 140px;
	padding: 0px;
	margin: 0px;
	font-weight: 300;
	color: #fff;
	text-shadow: 1px 1px 3px #000;
}

.intro .logo
{
	width: 332px;
	margin: 20px 0px 20px 0px;
}

.intro nav a
{
	display: inline-block;
	padding: 0px 30px;
	font-size: 50px;
	color: #d1c7c8;
	font-weight: 300;
	text-transform: uppercase;
	line-height: 92px;
	width: 270px;
	box-sizing: boder-box;
	text-align: center;
	text-shadow: 1px 1px 3px #000;
}

.intro nav a.on,
.intro nav a:hover
{
	text-decoration: underline;
	color: #fff;
}

.intro .down
{
	display: inline-block;
	width: 40px;
	height: 30px;
	background: url('../images/down.png') no-repeat center center;
	background-size: cover;
	margin-top: 50px;
}

.title_text,
.title_text_5050
{
	padding: 40px 20px 80px 20px;
	margin: 0 auto;
	max-width: 1000px;
	box-sizing: boder-box;
}

.title_text h2
{
	margin: 0px;
	text-align: center;
	box-sizing: border-box;
	padding: 0px 10px;
}

.title_text p
{
	display: block;
	text-align: center;
	margin: 0px;
	box-sizing: border-box;
	padding: 10px 10px;
	line-height: 1.6em;
}

.title_text_5050 p
{
	display: block;
	width: 50%;
	float: left;
	text-align: left;
	margin: 0px;
	box-sizing: border-box;
	padding: 10px 10px;
	line-height: 1.6em;
}

.title_text_5050 h2
{
	float: left;
	width: 50%;
	margin: 0px;
	text-align: right;
	box-sizing: border-box;
	padding: 0px 10px;
}


.title_text_fotos .center
{
	padding: 40px 20px 40px 20px;
	margin: 0 auto;
	max-width: 1000px;
	box-sizing: boder-box;	
}


.title_text_fotos p
{
	display: block;
	width: 50%;
	float: left;
	text-align: left;
	margin: 0px;
	box-sizing: border-box;
	padding: 10px 10px;
	line-height: 1.6em;
}

.title_text_fotos .images
{
	float: left;
	width: 50%;
	margin: 0px;
	text-align: right;
	box-sizing: border-box;
	padding: 0px 10px;
}

.title_text_fotos .images .slide
{
	width: 100%;
	display: block;
	height: 480px;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

.title_text_fotos .images .ctrl,
.gallery .images .ctrl
{
	position: absolute;
	top: 50%;
	width: 40px;
	height: 40px;
	z-index: 500;
	background-size: contain;
	background-repeat:no-repeat;
	background-position:center center;
	margin-top: -20px;
	cursor: pointer;
}

.title_text_fotos .images .cycle-prev,
.gallery .images .cycle-prev

{
	left: 20px;
	background-image: url('../images/prev.png?v1');
}

.title_text_fotos .images .cycle-next,
.gallery .images .cycle-next
{
	right: 20px;
	background-image: url('../images/next.png?v1');
}



.title_text_fotos .pager span,
.gallery .pager span
{
	display: inline-block;
	width: 15px;
	height: 15px;
	line-height: 14px;
	background: #9d9d9c;
	color: #9d9d9c;
	margin: 10px 5px;
	border-radius: 50%;
	border: 4px solid #9d9d9c;
	cursor: pointer;
}

.title_text_fotos .pager span.cycle-pager-active,
.gallery .pager span.cycle-pager-active
{
	background: #1d1d1b;
	color: #1d1d1b;
}

.stimmung
{
	padding-top: 40%;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: cover;
}

.gallery .slide
{
	width:100%;
	padding-top:40%;
	background-repeat: no-repeat;
	background-size: cover;
	background-position:center center;
}

.lagekarten img
{
	width: 50%;
	float: left;
}

.downloads
{
	padding: 20px 20px 100px 20px;
}

.downloads .center
{
	padding: 40px 20px 40px 20px;
	margin: 0 auto;
	max-width: 1400px;
	box-sizing: boder-box;	
}

.downloads .files a
{
	display: inline-block;
	margin: 25px 30px 50px 30px;
}

.downloads .files span
{
	display: block;
	max-width: 220px;
	padding: 4px 10px;
	border: 2px solid #000;
	border-radius: 4px;
	margin: 0px auto 40px auto;
}

.downloads .files img
{
	width: 100%;
	max-width: 280px;
}

.popup 
{
	max-width: 1000px;
	width: 100%;
}
.popup video{
	display: block;
	width: 100%;
}

.news-popup.fancybox__content
{
	padding:0;

	
}



.fancybox__content
{
	width:50em;
	max-width:100%;
}




table.pricelist
{
	width: 100%;
	text-align: left;
	margin: 20px 0px;
}

table.pricelist thead th
{
	color: #FFFFFF;		
	padding: 8px 8px;
	font-weight: normal;
	border-bottom: 1px solid #000;
}


table.pricelist tbody tr:hover,
table.pricelist tbody tr:hover a
{
	color: #FFFFFF;		
	cursor: pointer;
}

table.pricelist tbody td
{
	padding: 12px 8px;
	border-bottom: 1px solid #000;
}


.contact
{
	padding: 20px 20px 100px 20px;
}

.contact .center
{
	padding: 40px 20px 40px 20px;
	margin: 0 auto;
	max-width: 1000px;
	box-sizing: boder-box;	
}

.contact h2
{
	float: left;
	width: 50%;
	margin: 0px;
	text-align: right;
	box-sizing: border-box;
	padding: 0px 10px;
}

.contact p
{
	display: block;
	width: 50%;
	float: left;
	text-align: left;
	margin: 0px;
	box-sizing: border-box;
	padding: 10px 10px;
}

.contact .form
{
	float: left;
	width: 50%;
	margin: 0px;
	text-align: left;
	box-sizing: border-box;
	padding: 0px 10px;	
}

.contact .address
{
	display: block;
	width: 50%;
	float: right;
	text-align: left;
	margin: 0px;
	box-sizing: border-box;
	padding: 10px 10px;
}

.contact .address address
{
	font-style: normal;
	float: left;
	margin-bottom: 20px;
}

.contact .address .company
{
	width: 177px;
	margin: 8px 0px;
}


.contact .address .person
{
	float: right;
	border-radius: 50%;
	width: 220px;
}


.field
{
	width: 100%;
	border: 1px solid #000;
	margin: 5px 0px;
	padding: 2px 4px;
	background: transparent;
	border-radius: 4px;
	box-sizing: border-box;
}

input[name=Email_Address]{display:none !important;}

.error
{
	color: red;
}

.contact button
{
	border: 2px solid #000;
	border-radius: 4px;
	text-transform: uppercase;
	letter-spacing: 2px;
	padding: 5px 20px;
	background: transparent;
	font-weight: bold;
	margin: 5px 0px;
}

#contact button i
{
	display: none;
}


#contact.loading button i
{
	display: inline-block;
}

.cd-handle 
{
  	height: 100px;
	width: 100px;
 	margin-left: -45px;
	margin-top: -50px; 
 } 

.cd-handle.draggable 
{
  background-color: #000;
}

footer
{
	background: white url('../images/privera_logo.svg') no-repeat 40px center;
	background-size: 180px;
	padding: 25px 40px 25px 300px;
	text-align: left;
}

footer a
{
	display: inline-block;
	margin-right: 50px;
}

footer a.impressum
{
	margin: 0px;
	float: right;
}







.group > .wrapper > :first-child,
.group > .wrapper > .title:first-child > .wrapper > h1,
.group > .wrapper > .subtitle:first-child > .wrapper > h2
{
	margin-top:0;
}

.group > .wrapper > :last-child,
.group > .wrapper > .title:last-child > .wrapper > h1,
.group > .wrapper > .subtitle:last-child > .wrapper > h2
{
	margin-bottom:0;
}

.group .element
{
	margin:1.5em 0;
}





.consent-cover
{
	position:absolute;
	width:100%;
	height:100%;
	background:rgba(0,0,0,.2);
	display:flex;
	justify-content: center;
	align-items:center;
}

.consent-cover .consent-message
{
	text-align:center;
}

.consent-cover-info
{
	display:flex;
	flex-direction:column;
	align-items: center;
	gap:.5em;
	padding:2em;
}

.consent-dialog
{
	position:sticky;
	bottom:0;
	background:white;
	z-index:100;
	box-shadow: 3px 3px 10px 0px rgb(50 50 50);
	color: #000000;

}

.consent-dialog a,
.consent-settings a
{
	color: #000000;
}

.consent-dialog .wrapper
{
	display:flex;
	flex-direction:column;
	gap:.5em;
	margin:auto;
	max-width:var(--content-width);
	padding:var(--content-padding-vertical) var(--content-padding-horizontal);
}

.toggle-button
{
	font-size:1.4em;
	position:relative;
	width:2em;
	height:1em;
	background:gray;
	box-sizing:border-box;
	border-radius:.5em;
	transition:background .5s;
	cursor:pointer;
}

.toggle-button::after
{
	content:"";
	position:absolute;
	left:0;
	top:0;
	width:calc(1em - 4px);
	height:calc(1em - 4px);
	margin:2px;
	background:white;
	border-radius:.4em;
}

.toggle-button.active
{
	background:green;
}

.toggle-button.active::after
{
	right:0;
	left:auto;
}

a[consent-settings]
{
	cursor: pointer;
}

.consent-settings
{
	text-align: left;
}

.consent-settings .tab
{
	border-top:1px solid black;
}

.consent-settings .consent-preferences
{
	border-bottom: 1px solid black;
}

.consent-settings .tab .header
{
	display:flex;
	justify-content: space-between;
	align-items:center;
	gap:.5em;
}

.consent-links
{
	gap:.5em;
	display:inline-flex;
	text-decoration: underline;
	flex-wrap: wrap;
}

.consent-settings .tab [data-toggle]
{
	cursor:pointer;
}

.consent-settings .tab [data-toggle] h2
{
	display: flex;
	gap:.5em;
	align-items: center;
	font-size: 1.2em;
}

.consent-settings .tab [data-toggle] h2::before
{
	display: grid;
	width:1em;
	height:1em;
	place-items:center;
	font: var(--fa-font-regular);
	content:"\f054"
}

.consent-settings .tab [data-toggle].active h2::before
{
	content:"\f078";
}


.consent-settings .tab .body
{
	padding-bottom: 1em;
}

.tab .body.toggled
{
	display:block;
}

.links.consent-buttons .items,
.consent-settings .links .items
{
	display: flex;
	gap: .5em;
	flex-wrap: wrap;
	justify-content: center;
}


.consent-buttons button.secondary,
.consent-settings button.secondary
{
	padding:.5em 1em;
	white-space: nowrap;
	display: inline-block;
	cursor:pointer;
	border:none;
	font-weight:normal;
	border-radius: 4px;
	border: 1px solid #ccccce;
}

.consent-buttons button.primary,
.consent-settings button.primary
{
	padding:.5em 1em;
	white-space: nowrap;
	display: inline-block;
	cursor:pointer;
	border:none;
	border-radius: 4px;

	font-weight: bold;
	color: #FFFFFF;
	background: #000000;
	border: 1px solid #000000;
	
}



.consent-buttons button:hover,
.consent-settings button:hover
{
	color: #000000;
	background: #FFFFFF;
}


.hidden
{
	display:none;
}









@media (max-width: 1024px)
{

	.intro h1 
	{
	    font-size: 100px;
	}
	
	.intro .logo 
	{
	    width: 220px;
	}
	
	.intro,
	.stimmung
	{
		background-attachment:  scroll;
	}
	
	header nav a
	{

		padding: 0px 10px;
		font-size: 20px;
		line-height: 92px;
	}
		
	.intro nav a {
	    padding: 0px 15px;
	    font-size: 40px;
	    line-height: 60px;
	    width: 200px;
	}
	
	
	.downloads .files img
	{
		max-width: 220px;
	}
		
	
	.contact .center {
	    max-width: 600px;
	}
	
	.contact .address,
	.contact .form {
	    width: 100%;
	    float: none;
	    text-align: left;
	}
	
	.contact .address .person 
	{
	    width: 180px;

	}
		
	.title_text_fotos p,
	.title_text_fotos .images
	{
		float: none;
		width: 100%;		
	}
}

@media (max-width: 800px)
{
	header nav
	{
		margin-right: 0px;
	}
	
	header nav a {
	    padding: 0px 10px;
	    font-size: 18px;
	    line-height: 92px;
	}
	
	h2 {
	    font-size: 40px;
	}
	
	
	.lagekarten img
	{
		width: 100%;
		float: none;
	}


	footer 
	{
		background: white url('../images/privera_logo.svg') no-repeat 20px 20px;
	    background-size: 180px;
	    padding: 80px 20px 20px 20px;
	}

	
	footer a 
	{
    	display: block;
    	margin-right: 0px;
    	padding: 4px 0px;
	}
		
	footer a.impressum 
	{
	    margin: 0px;
	    float: none;
	}
	
}



@media (max-width: 650px)
{
	
	html, body 
	{
		font-size: 15px;
	}
	
	header .logo {
	    float: none;
	    width: 170px;
	    margin: 0 auto;
	}
	
	header nav
	{
		display: none;
	}
	
	main {
	    margin-top: 72px;
	}
	
	.intro .overlay 
	{
	    top: 5%;
	}
	
	.intro h1 {
	    font-size: 60px;
	}
	
	.intro .logo {
	    width: 160px;
	}
	
	.intro nav a {
	    padding: 0px 15px;
	    font-size: 28px;
	    line-height: 40px;
	    width: 200px;
	}
	
	.intro .down {
	    margin-top: 30px;
	}
	
	
	h2 {
	    font-size: 30px;
	}
	
	.cd-handle 
	{
	  	height: 50px;
		width: 50px;
	 	margin-left: -21px;
		margin-top: -25px; 
	 } 
	
	.cd-handle.draggable 
	{
	  background-color: #000;
	}
	
	
	table.pricelist
	{
		font-size: 13px;
	}
	
	table.pricelist tbody td,
	table.pricelist thead th
	{
		padding: 6px 3px;
	}
	
	

	
	
	.title_text_5050 h2,
	.title_text_5050 p,
	.contact h2,
	.contact p{
	
	    float: none;
	    width: 100%;
	    text-align: center;
	}	
	
	.title_text_fotos .images .slide
	{
		height: 240px;
	}
	
	.contact .center {
	    padding: 30px 0px 30px 0px;
	}
	
	.contact .address address {
	    float: none;
	    width: 100%;
	    text-align: center;
	}
	
	.contact .address .person 
	{
	    width: 120px;
	    float: none;
	    display: block;
	    margin: 0 auto;
	}
	
	
}