html, main, .hero-wrapper{
	height: 100%;
}

body{
	font-family: -apple-system, BlinkMacSystemFont, Helvetica, sans-serif;
	margin: .5rem;
	height: calc(100% - 1rem);
	width: calc(100% - 1rem);
}

a{
	color: #4ba6f7;
}

p{
	margin: .5rem 0;
}

main{
	width: 100%;
}

.subtle{
	color: #52545a;
}

.hero-carousel{
	width: 100%;
	height: 100%;
}

.hero-carousel img{
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
}

.hero-overlay{
	position: absolute;
	z-index: 100;
	background-color: white;
	padding: .5rem 1rem .5rem .5rem;
	max-width: 70%;
}

.hero-overlay h1{
	font-size: 1.5rem;
	letter-spacing: -.5px;
	margin-bottom: .5rem;
}

.hero-overlay h2{
	font-size: 1rem;
	margin: .75rem 0;
}

@media (min-width: 768px){
	.hero-overlay{
		padding: .5rem 3.5rem 1rem 1.5rem;
	}

	.hero-overlay h1{
		font-size: 2.5rem;
		letter-spacing: -.75px;
	}

	.hero-overlay h2{
		margin: 1rem 0;
	}
}

ul.social-links-list{
	padding: 0;
	list-style: none;
}

li.social-link-item{
	display: inline-block;
	width: 1.5rem;
	height: 1.5rem;
	background-size: contain;
}

li.social-link-item a{
	width: 100%;
	height: 100%;
	display: inline-block;
	text-indent: -9999rem;
}

li.instagram{
	background-image: url('../img/instagram.png');
	margin-right: .5rem;
}

li.facebook{
	background-image: url('../img/facebook.png');
}

#unsupported{
	padding: 3rem 6%;
	background-color: #1a1b1c;
	color: white;
}