Template:Homepage/styles.css

.homepage-bar {
	margin-top: 1em;
	height: 4px;
}
.homepage-bar > div {
	width: 25%;
	height: 100%;
}
.homepage[dir="ltr"] .homepage-bar > div {
	/* @noflip */
	float: left;
}
.homepage[dir="rtl"] .homepage-bar > div {
	/* @noflip */
	float: right;
}
.homepage-bar-1 {
	background-color: #990000;
}
.homepage-bar-2 {
	background-color: #339966;
}
.homepage-bar-3 {
	background-color: #0063bf;
}
.homepage-bar-4 {
	background-color: #54595d;
}

.homepage-basic {
	padding-top: 2em;
}
.homepage-basic:after {
	display: block;
	content: "";
	clear: both;
}
.homepage-fullname {
	font-size: 2.6em;
	line-height: 1.2;
}
.homepage-jobtitle {
	font-size: 1.8em;
	line-height: 1.2;
	padding-top: .5em;
}
.homepage-quote {
	padding-top: 16px;
}

.homepage-detailed {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin-top: 1em;
}
.homepage-detailed > div {
	flex-basis: 250px;
	flex-grow: 1;
	flex-shrink: 1;
}
.homepage[dir="ltr"] .homepage-detailed-column {
	/* @noflip */
	margin-right: 2em;
}
.homepage[dir="rtl"] .homepage-detailed-column {
	/* @noflip */
	margin-left: 2em;
}
.homepage-detailed > div > h2 {
	border-bottom: 0;
}
.homepage-disclaimer {
	color: #555;
	font-size: smaller;
	margin: 1em 0;
}
.homepage-contact {
	padding: 0 1em 1em 1em;
	background: #F0F0F0;
}
.homepage-detailed-column h2,
.homepage-contact h2 {
	border-bottom:0;
}
.image img {
	max-width: 100%;
	height: auto;
}

@media screen and (max-width: 700px) {
	.image img {
		width: 100% !important;
		max-height: 60vh;
		object-fit: cover;
	}
	.homepage-basic .floatright,
	.homepage-basic .floatleft {
		margin-left: 0;
		margin-right: 0;
		width: 100%;
	}
}