:root {
	--text-color:#333;
	--main-font-size: 18px;
	--page-header-h: 124px;
	--page-header-bg: #393982;
	--footer-h: 160px;
	--m-page-header-h: auto;
	--citat-color: #4fc8fd;
	--citat-icon-color: orange;
}

html, body {
	margin:0;
	padding:0;
	font-size:var( --main-font-size );
	background-color:#fff;
	font-family: sans-serif;
	color:var( --text-color );
	position:relative
}
* {
	position:relative;
}
h1 {
	text-align:center;
}
.page-wrapper {
	width:100%;
	height:100vh;
}
.page-header {
	display:grid;
	grid-template-columns: 1fr 1fr;
	background-color:var( --page-header-bg );
	height:var( --page-header-h );
}
.logo img {
	max-height:60px;
	margin:30px 0 30px 30px;
}
.menu-container {
	display: grid;
	justify-items: end;
	align-items: center;
	padding-right:40px;
}
.menu {
	display:inline-grid;
	grid-template-columns: 1fr 1fr 1fr;
	column-gap: 40px;
	font-size:24px;
}
.menu a {
	color:#fff;
	text-decoration: none;
	transition: color.3s, text-decoration .3s;
}
.menu a:hover {
	text-decoration:underline;
	color:orange;
}

.content-wrapper {
	display:block;
	min-height: calc( 100vh - var( --page-header-h ) - var( --footer-h ) );
	overflow:auto;
	overflow-x:hidden;
}

.content-box {
	display:block;
	width:960px;
	margin: 0 auto;
	margin-bottom:40px;
	border-radius:10px;
}
.content-box.full-width {
	width:100%;
}
.content-box.two-col {
	display:grid;
	grid-template-columns: 1fr 1fr;
	column-gap:40px;
	padding:20px;
	box-sizing:border-box;
}
.content-box a {
	text-decoration:none;
	color: #666;
}
.content-box a:hover {
	text-decoration:underline;
	color: orange;
}
.bg-gray {
	background-color:#eee;
}
.bg-green,
.bg-red {
	background-color:green;
	color:#fff;
	padding:20px;
	box-sizing:border-box;
	text-align:center;
	line-height: 32px;
}
.bg-red {
	background-color:red;
}
.hero {
	display:block;
	width:100%;
	aspect-ratio: 8 / 3;
	background-size:cover;
	background-position:center top;
}
p {
	line-height:26px;
}
.citat-box {
	display:block;
	margin:0 auto;
	text-align:center;
	margin-top:40px;
	margin-bottom:40px;
}
.citat {
	color:var( --citat-color );
	font-size:48px;
	width:auto;
	max-width: 60%;
	display:inline-block;
	font-family: serif;
	padding:0 40px;
	text-align: center;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, .7);
}
.citat-icon-1,
.citat-icon-2 {
	position:absolute;
	display:block;
	top:0;
	left:-56px;
	color:var( --citat-icon-color );
}
.citat-icon-2 {
	top:auto;
	bottom:0;
	left:auto;
	right:-56px;
}

.condo-box {
	width:100%;
	display:grid;
	grid-template-columns: repeat( 4, 1fr);
	column-gap: 20px;
	row-gap: 20px;
}
.condo {
	display:block;
	width:100%;
	aspect-ratio: 1 / 1;
	background-size:cover;
	background-position:center center;
	border-radius:10px;
	transition: transform .2s ease-in-out, box-shadow .2s ease-in-out;
	box-shadow:0 0 0 rgba(0,0,0,0.3);
}
.condo:hover {
	transform: scale(1.05);
	box-shadow:0 3px 5px rgba(0,0,0,0.3);
}

.footer-wrapper {
	width:100%;
	display:block;
	height: var( --footer-h );
	background-color:#000;
	padding-top:40px;
}
.footer-content {
	width:960px;
	display:grid;
	grid-template-columns: 1fr 1fr 20%;
	column-gap: 40px;
	color:#fff;
	margin:0 auto;
}
.footer-content a {
	color:#fff;
	text-decoration:none;
}
.footer-content a:hover {
	color:orange;
	text-decoration:underline;
}
.footer-logo-container {
/*	justify-self: end;*/
/*	align-self: end;*/
}
.footer-logo {
	width:100%;
	display:block;
}
.copyright {
	justify-self: center;
	color:#aaa;
}

.mt {
	margin-top:40px;
}

.contact-form {
	display:grid;
	grid-template-columns: 1fr;
	margin-bottom:40px;
	padding:5% 10%;
	margin:0 auto;
	background-color:#eee;
	border-radius:10px;
}
.contact-form h3 {
	margin:0;
}
.contact-form label {
	margin-top:40px;
	font-size:20px;
	margin-bottom:5px;
}
.contact-form label:first-child {
	margin-top:0;
}
.contact-form input {
	line-height: 40px;
	border:1px solid #888;
	border-radius:10px;
	padding-left:20px;
	font-size:16px;
}
.contact-form textarea {
	border:1px solid #888;
	border-radius:10px;
	font-size:16px;
	padding:20px;
	min-height:150px;
}
.contact-button {
	margin-top:40px;
	width:200px;
	line-height:50px;
	font-size:20px;
	background-color:orange;
	color:#fff;
	border:none;
	border-radius:5px;
	justify-self: center;
	transition:background-color .2s;
}
.contact-button:hover {
	background-color:var(--page-header-bg );
}

@media screen and ( max-width:720px ){

	.page-header {
		display:grid;
		grid-template-columns: 1fr;
		background-color:#4343a3;
		height:var( --m-page-header-h );
	}
	.logo img {
		max-width:calc( 100% - 60px );
		margin:30px 0 30px 30px;
		max-height:none;
	}
	.menu-container {
		padding-right:0;
		justify-items: center;
		line-height:60px;
	}
	.menu {
		column-gap: 20px;
		font-size: 18px;
	}
	.footer-wrapper {
		height: auto;
		padding-bottom:40px;
	}
	.footer-content {
		width:100%;
		grid-template-columns: 1fr;
		padding: 0 20px;
		box-sizing: border-box;
	}
	.footer-logo {
		width:60%;
		margin-top:20px;
		margin-bottom:20px;
		grid-row:2;
	}
	.copyright {
		grid-row:3;
	}
	.content-box {
		width:90%;
	}
	.content-box.two-col {
		grid-template-columns: 1fr;
	}
	.condo-box {
		grid-template-columns: repeat( 2, 1fr);
	}
	.citat {
		font-size:24px;
	}
	.citat-icon-1,
	.citat-icon-2 {
		left:-24px;
	}
	.citat-icon-2 {
		left:auto;
		right:-24px;
	}
	.hero {
		aspect-ratio: 8 / 5;
	}
}