* {
	box-sizing: border-box
}

body,
html {
	--rowMaxWidth: 80vw;
	--spacing: calc(1% + 1rem);
	--padding: calc(var(--spacing) * 1.5) var(--spacing);
	margin: 0;
	padding: 0;
	font-family: "Zilla Slab", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	font-weight: 300;
	font-size: 18px;
	width: 100%;
	scroll-behavior: smooth;
	overflow: scroll;
	-webkit-overflow-scrolling: touch
}

p {
	margin: 0
}

a {
	text-decoration: none;
	color: rgba(0, 0, 0, 1);
	font-weight: 600;
	font-size: 1.1rem
}

a:hover {
	text-decoration: underline
}

nav a {
	margin-left: 2rem
}

.row {
	width: 100%;
	max-width: var(--rowMaxWidth);
	margin: auto
}

header {
	min-height: 80px;
	max-height: 160px;
	padding: calc(var(--spacing) * .65)
}

.logo-nav-wrap {
	align-items: center;
	justify-content: space-between;
	flex-direction: row
}

.moz-logo {
	background-image: url(/surf_2019/dist/img/moz-logo-bw-rgb.svg);
	background-position: left center;
	display: inline-block;
	width: 10rem;
	height: 4rem
}

.speakers,
main {
	width: 100%;
	padding: var(--padding);
	min-height: 70vh
}

main {
	background-image: url(/surf_2019/dist/img/background_surf.jpeg);
	background-size: cover;
	background-position: center center
}

h1 {
	font-size: 3.3rem;
	font-weight: 700;
	margin: 0 0 calc(1% + 1rem) 0;
	display: inline-block;
	line-height: 100%;
	max-width: 80%
}

h2 {
	font-size: 2rem;
	padding: 1%;
	font-weight: 500
}

a.speaker-name-link,
h4 {
	margin-bottom: .25rem;
	font-size: 1.5rem;
	font-weight: 600
}

h5,
h6 {
	margin: 0 0 .25rem 0;
	font-weight: 500;
	font-size: 1.1rem
}

p {
	line-height: 160%
}

.callout {
	font-weight: 500;
	font-size: 1.1rem
}

p.par-space {
	padding-top: .5vh
}

.bg-white {
	background-color: rgba(255, 255, 255, 1)
}

.flx-cntr {
	display: flex;
	align-items: center;
	flex-direction: row
}

.two-up {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between
}

.bg-white,
.summits-headline,
ul {
	padding: 1%
}

.bg-img {
	background-repeat: no-repeat;
	content: ""
}

.bg-light {
	background-color: #f9f9fa;
	padding: var(--padding)
}

.links-headline,
.summits-headline {
	margin: 0
}

li {
	list-style-type: none;
	margin-bottom: 1rem
}

.speaker {
	width: 45%;
	padding: 1%;
	margin-bottom: calc(var(--spacing) * 2)
}

.speaker-bio {
	margin-top: .5rem;
	font-weight: 400;
	padding-right: 10%;
	line-height: 170%
}

a.speaker-contact {
	background-color: #000;
	border: 2px solid rgba(0, 0, 0, 1);
	color: #fff;
	border-radius: 4rem;
	padding: .5rem 2rem;
	display: inline-block;
	margin-top: .75rem;
	font-weight: 400;
	font-size: 1.1rem;
	letter-spacing: .01em
}

a.speaker-contact:hover {
	text-decoration: none;
	background-color: rgba(0, 0, 0, 0);
	color: rgba(0, 0, 0, 1);
	transition: all .2s ease-in-out
}

a.speaker-contact:active {
	border: 2px solid transparent;
	background-color: rgba(0, 0, 0, .1);
	transition: all .2s ease-in-out
}

footer {
	padding: var(--padding);
	background-color: rgba(0, 0, 0, 1)
}

.footer-moz-logo {
	background-image: url(/surf_2019/dist/img/moz-logo-white.svg);
	min-height: 2rem;
	min-width: 6rem;
	display: block
}

footer .row {
	padding: 1%;
	display: flex
}

.footer-link {
	color: #fff
}

.three-up {
	flex: 1 1 33.3333%;
	margin-top: 0
}

.speaker-image {
	height: 20rem;
	background-size: contain;
	background-position: bottom left
}

.engle {
	background-image: url(/surf_2019/dist/img/steve.jpeg)
}

.kersch {
	background-image: url(/surf_2019/dist/img/chris.jpeg)
}

.kief {
	background-image: url(/surf_2019/dist/img/franziskus.jpeg)
}

.merw {
	background-image: url(/surf_2019/dist/img/thyla.jpeg)
}

@media screen and (max-width:850px) {
	h1 {
		font-size: 2.7rem
	}
	.callout {
		width: 100%
	}
	.speaker {
		flex: 1 1 100%;
		margin: 5vh auto 2.5vh auto
	}
}

@media screen and (max-width:650px) {
	body {
		--rowMaxWidth: 88vw
	}
	h1 {
		max-width: 100%;
		font-size: 2.5rem
	}
	header {
		padding: 1.5rem 0 1rem 0
	}
	.logo-nav-wrap {
		flex-direction: column;
		align-items: flex-start
	}
	.nav-link {
		margin-left: 0;
		margin-right: 1rem;
		font-size: 1rem
	}
	p {
		font-size: .9rem
	}
	footer .row {
		flex-wrap: wrap;
		flex-direction: column
	}
	.moz-logo-wrap {
		margin-bottom: 2rem;
		max-height: 50px
	}
}

@media screen and (max-width:500px) {
	h1 {
		font-size: 2rem
	}
	span {
		font-size: 1.25rem
	}
}