/* ibm-plex-sans-300 - latin */
@font-face 
{
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 300;
    src: url('https://static.immoserver.ch/fonts/google/ibm-plex-sans-v14-latin-300.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
         url('https://static.immoserver.ch/fonts/google/ibm-plex-sans-v14-latin-300.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* ibm-plex-sans-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 400;
    src: url('https://static.immoserver.ch/fonts/google/ibm-plex-sans-v14-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
         url('https://static.immoserver.ch/fonts/google/ibm-plex-sans-v14-latin-regular.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* ibm-plex-sans-600 - latin */
@font-face 
{
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 600;
    src: url('https://static.immoserver.ch/fonts/google/ibm-plex-sans-v14-latin-600.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
         url('https://static.immoserver.ch/fonts/google/ibm-plex-sans-v14-latin-600.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* ibm-plex-sans-700 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 700;
    src: url('https://static.immoserver.ch/fonts/google/ibm-plex-sans-v14-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
         url('https://static.immoserver.ch/fonts/google/ibm-plex-sans-v14-latin-700.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

@font-face 
{
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'IBM Plex Serif';
	font-style: normal;
	font-weight: 400;
	src: url('https://static.immoserver.ch/fonts/google/ibm-plex-serif-v19-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

:root
{
	--text-color: #3A4B5B;
	--fancybox-content-color:var(--text-color);
	--theme-color: var(--text-color);
	--hover-color: green;	
	--odd-color: lightgrey;
	--swiper-navigation-size: 3em;
	--swiper-theme-color: white;
}

body
{
	color:var(--text-color);
	font-family: 'IBM Plex Serif', serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	margin:0;
}

.logo
{
	position: absolute;
	top: 15vw;
	left:50%;
	transform: translateX(-50%);
	width:clamp(8em,35vw,37em);
	opacity: 1;
}



.logo img
{
	display: block;
	width: 100%;
}

.legend
{
	display: none;
}

.intro
{
	background:#3A4B5B;
}

.intro .wrapper
{
	position: relative;
}

.intro .wrapper > img
{
	width: 100%;
	object-fit: cover;
	object-position: right center;
	transform: translateX(0%);	
	animation: introani 60s ease forwards infinite;
	height: 100vh;
	height: 100dvh;	
	max-height: 950px;
}

.introstatic .wrapper > img
{
	width: 100%;
	object-fit: cover;
	object-position: center center;
	height: 100vh;
	height: 100dvh;
	max-height: 950px;
}

@keyframes introani 
{
	0% {
	
		object-position: right center;
	}
  
	40% {
	
		object-position: left center;	
	}
	50%{
		object-position: left center;	
		
	}
	90%{
		object-position: right center;
		
	}
	100%{
		object-position: right center;
	}
}

@media (orientation: portrait){
	.intro .wrapper > img
	{

		object-position: left 40% top 50%;
	}

	@keyframes introani 
	{
		0% {
		
			object-position: right 40% top 50%;
		}
	
		35% {
		
			object-position: left 40% top 50%;	
		}
		50%{
			object-position: left 40% top 50%;	
			
		}
		85%{
			object-position: right 40% top 50%;
			
		}
		100%{
			object-position: right 40% top 50%;
		}
	}
  }

  @media (max-width: 1200px){
	.intro .wrapper > img
	{

		object-position: left 40% top 50%;
	}

	@keyframes introani 
	{
		0% {
		
			object-position: right 40% top 50%;
		}
	
		35% {
		
			object-position: left 40% top 50%;	
		}
		50%{
			object-position: left 40% top 50%;	
			
		}
		85%{
			object-position: right 40% top 50%;
			
		}
		100%{
			object-position: right 40% top 50%;
		}
	}
}

section
{
	display: flex;
	flex-direction: column;
}
main  .text.element + .title-image.element{
	margin-top: 8em;
}
main .title-image.element, main .images.element:not(.intro)
{
	margin:4em 0;
	box-sizing: border-box;
}

main .title-image + .text,
main .title-image + .title,
main .title-image + .subtitle
{
	margin-top:-2rem;
}

.title-image img
{
	object-fit: contain;
	object-position: center;
	max-width: 56rem;
}

.title-image:not(.left) > .wrapper
{
	display: flex;
	justify-content: center;
}


h1,h2
{
	text-align: center;
}


.subtitle.element + .text
{
	margin-top: -1rem;
}

h1
{
	font-size: clamp(22px,3.5vw,33px);
	font-family: 'IBM Plex Sans', sans-serif;
	font-weight: 300;
	letter-spacing: .19em;
	line-height: 1.4em;
}

h2
{
	font-family: 'IBM Plex Sans', sans-serif;
	font-weight: 600;
	font-size: clamp(18px,3vw,26px);
	letter-spacing: .19em;
	text-transform: uppercase;
}

footer
{
	font-family: 'IBM Plex Sans', sans-serif;
	font-weight: 400;
}

footer .address
{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 2em;
	
}

strong, footer nav a
{
	font-family: 'IBM Plex Sans', sans-serif;
	font-weight: 600;	
}
strong{
	font-weight: 700;	

}
footer nav
{
	margin:2em 0 1em 0;
}

footer nav a
{
	text-transform: uppercase;
}

.typo
{
	font-size: clamp(16px,2.2vw,18px);;
	line-height: 1.5;
}

.text .typo
{
	font-size: clamp(18px,2.6vw,22px);
	line-height: 1.55;
	letter-spacing: .01em;
}

main > section:last-child
{
	background: #e4e2e3;
}

a
{
	color:inherit;
	text-decoration: none;
}

.hidden
{
	display:none;
}

footer .wrapper
{
	margin:auto;
	max-width:53rem;
	padding:2em 2em;
	line-height: 1.3em;
}

footer nav
{
	display:flex;
	gap: 1em;
}

main .group > .wrapper
{
	max-width:84em;
	margin:auto;
	padding:4em 2em;
}

main .title > .wrapper
{
	max-width: 56rem;
	margin:0px auto;
}

main  .text > .wrapper, main  .subtitle > .wrapper,main .contact > .wrapper
{
	max-width: 53rem;
	margin:0px auto;
}

main .group > .wrapper > .element:first-child
{
	margin-top:0;
}

main .group > .wrapper > .element:last-child
{
	margin-bottom:0;
}

.group .element
{
	margin:2rem 0;
}

/* elements */

.images img
{
	display:block;
	width:100%;
}

main .gallery.element
{
	margin:4em auto;
	width: 100%;
	max-width: 50em;
}

.gallery .items
{
	display: grid;
	grid-template-columns: 1fr;
	gap: 2em;
	padding: 0 2em;
}





.gallery .items > div
{
	width: 100%;
	box-sizing: border-box;
}

.gallery img
{
	display:block;
	width:100%;
	box-sizing: border-box;
}

input,
select
{
	margin:0;
}

input[type=text],
input[type=email],
input[type=tel],
textarea,
button,
select
{
	box-sizing:border-box;
	font:inherit;
	color:inherit;
}

input[type=text],
input[type=email],
input[type=tel],
textarea,
select
{
	display:block;
	width:100%;
	border:0px solid var(--theme-color);
	padding:.5em;
	border-radius: 0;
}

input[type=checkbox],
input[type=radio]
{
	appearance:none;
	-webkit-appearance:none;
	flex:0 0 auto;
	width:1.25em;
	height: 1.25em;
	background: white;
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	border:0;
	border-radius: 0;
	font-size:inherit;
	font-size:.9em;
	margin-top:.2em;
}

input[type=checkbox]:after,
input[type=radio]:after
{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: 'Font Awesome 5 Pro';
	font-weight: 400;
}

input[type=checkbox]:after{content: "";}
input[type=checkbox]:checked:after{content: "\f00c";}
input[type=radio]:after{content:"";}
input[type=radio]:checked:after{content: "\f00c";}

.button,
button
{
	border:1px solid var(--text-color);
	cursor:pointer;
	padding:.5em 2em;
	white-space: nowrap;
	display: inline-block;
	font-weight:normal;
	font-family: 'IBM Plex Sans', sans-serif;
	font-size: 1em;
	background: transparent;
	text-transform: uppercase;
	letter-spacing: .19em;
	font-weight:600;
	transition: all .2s;
}

.button:hover,
button:hover
{
	background:var(--text-color);
	color:white;
}

select
{
	appearance:none;
	background:white;
}
.contact{
	font-family: 'IBM Plex Sans';
}

.contact .box
{
	background: #e9f2fb;
	padding: 1em 1em 1px 1em;
	margin-bottom: 1.2em;
}

.contact .box .form-label
{
	font-weight:bold;
}

.contact .box .selectables
{
	margin-top: 1.2em;
}

.contact .form-group
{
	margin-bottom:1.2em;
}

.contact .form-split-1-3
{
	display:grid;
	gap:1em;
	grid-template-columns:1fr 3fr;
}

.contact .form-split
{
	display:grid;
	gap:1em;
	grid-template-columns:1fr 1fr;
}

.contact .form-label
{
	display: block;
	padding-bottom: 0.1em;
}

.contact .form-warning
{
	color:red;
	margin-bottom: -.3em;
	margin-top:.25em;
	display:block;
	width:100%;
}

.contact .form-invalid
{
	border-color:red;
}

.contact .form-interest-selection
{
	display:grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 1em;
}

.contact .form-interest-selection [data-interest-type=radio]
{
	grid-column: 1 / span 2;
}

.contact .selectables
{
	display:flex;
	flex-wrap:wrap;
	gap: 0 1em;

}
.selectables a
{
	text-decoration: underline;
}

.contact .selectables > label
{
	display:flex;
	align-items: flex-start;
	gap:.5em;
}

.contact input[name=Email_Address]{display:none;}

.contact .items
{
	display:grid;
	grid-template-columns:1fr;
	gap:4em;
	margin:0;
}

.contact .ajax-loading,
.contact .ajax-error,
.contact .mail.success,
.contact .mail.error
{
	background: green;
	padding:3em 1em;
	text-align:center;
	color:white;
}

.contact .ajax-error,
.contact .mail.error
{
	background:red;
}

.contact .ajax-form .ajax-loading,
.contact .ajax-form .ajax-result,
.contact .ajax-form .ajax-error,
.contact .ajax-form.ajax-state-loading form,
.contact .ajax-form.ajax-state-success form
{
	display:none;
}

.contact .ajax-form.ajax-state-loading .ajax-loading,
.contact .ajax-form.ajax-state-success .ajax-result,
.contact .ajax-form.ajax-state-error .ajax-error
{
	display:block;
}

.responsive
{
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 0px;
	height: 0;
	overflow: hidden;
}

.responsive iframe
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border:0;
}

.video .desktop
{
	display:block;
	width:100%;
}

.video .mobile
{
	display: none;
}

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

.text-center
{
	text-align: center;
}

.text-right
{
	text-align: right;
}

.fancybox__content
{
	padding:1em 2em;
	width:66em;
	max-width:100%;
}

.fancybox__slide.has-image .fancybox__content
{
	width: 100%;
}

footer 
{
	background: #3D3130;
	color:white;
}



@media(max-width:1500px)
{
	main .gallery.element
	{
		margin:2em auto;
	}
	
	.gallery .items
	{
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: center;
		gap: 0;
	}

	.gallery .items > div 
	{
		width: 50%;
		box-sizing: border-box;
		padding: 1em;
	}

}



@media(orientation: portrait)
{

	.introstatic .wrapper > img
	{
		height: 50vh;
		height: 50dvh;
	}

	.logo {
		top: 20vh;
	}


}

@media(max-width:1000px)
{
	.video .desktop{
		display: none;
	}
	.video .mobile{
		display: block;
		width: 100%;
	}
}

@media(max-width:750px)
{

	.gallery .items
	{
		padding: 0 1.5em;
	}

	
	.gallery .items > div {
		width: 100%;
		padding: 1em 0em;
	}
	
	

	.contact .form-split
	{
		grid-template-columns: 1fr;
		gap:0;
	}
}


@media(max-width:550px)
{
	main .group > .wrapper,
	footer .wrapper
	{
		padding: 2em 1.5em;
	}
	
	main .title-image.element, main .images.element:not(.intro)
	{
		margin: 2em 0;
	}
	
	main  .text.element + .title-image.element
	{
		margin-top: 2em;
	}


	main .title-image + .text,
	main .title-image + .title,
	main .title-image + .subtitle
	{
		margin-top: 2rem;
	}
	
	main .gallery.element
	{
		margin:2em auto;
	}
	
}