*, *::before, *::after {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.clearfix::before, 
.clearfix::after {
	content: " ";
	display: table;
}

html {
	height: 100%; /* makes the html take up 100% of the browser window */
	font-size: 100%;
}
body {
	font-family: 'Open Sans'; /* font for the body */
	color: white; /* text color */
	min-height: 100%; /* says the height of the body must be, at min, 100% of window */
}


.navbar {
	position: relative;
	padding: 0.5rem;
	background-color: rgb(101,18,95, .5);
	z-index: 1;
}
.navbar .logo {
	position: relative;
	left: 2rem;
	cursor: pointer;
}
.navbar .links-container {
	display: table;
	position: absolute;
	top: 0;
	right: 0;
	height: 100px;
	color: white;
	text-decoration: none;
}
.links-container .navbar-link {
	display: table-cell;
	position: relative;
	height: 100%;
	padding-left: 1rem;
	padding-right: 1rem;
	vertical-align: middle;
	color: white;
	font-size: 0.625rem;
	letter-spacing: .05rem;
	font-weight: 700;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	
}
.links-container .navbar-link:hover {
	color: rgb(233,50,117);
}
.container {
	margin: auto;
	max-width: 64rem;
}
.container .narrow {
	max-width: 56rem;
}
@media (min-width: 640px){
	html {font-size: 112%;}
	
	.column {
		float: left;
		padding-left: 1rem;
		padding-right: 1rem;
	}
	.column.full { width: 100%;}
	.column.two-thirds { width: 66.7%;}
	.column.half { width: 50%;}
	.column.third { width: 33.3%;}
	.column.fourth { width: 25%;}
	.column.flow-opposite { float: right;}

}
@media (min-width: 1024px) {
	html {font-size: 120%;}
}