stylere.css

	body {
		font-family: Source Sans Pro, -apple-system, sans-serif;
		font-size: 12px;
		font-size: 1em;
		margin: 0;
		padding: 0;
		z-index: 1;
		-webkit-font-smoothing: antialiased;
		-moz-font-smoothing: antialiased;
		-o-font-smoothing: antialiased;
		font-smoothing: antialiased;
		
	}
	
	*, *:before, *:after {
		-webkit-box-sizing: border-box; 
		-moz-box-sizing: border-box; 
		-o-box-sizing: border-box;
		box-sizing: border-box;
	}
	
	h1, h2, h3, h4, h5, p, em, a, em {
		margin: 0;
		padding: 0;
	}
	
	strong {
		font-size: 1.5em;
	}
	
	strong h1 {
		padding-top: 3em;
		padding-bottom: 0.25em;
	}
	
	h1 {
		font-size: 2em;
		font-weight: 600;
		padding-bottom: 0.5em;
	}
	
	h2 {
		font-size: 1.5em;
		font-weight: 100;
	}
	
	h3 {
		font-size: 1.25em;
		font-weight: 600;
	}
	
	h4 {
		font-size: 1.25em;
		font-weight: 600;
	}
	
	h5 {
		color: #4A90E2;
		font-size: 0.8em;
		text-transform: uppercase;
		letter-spacing: 1px;
		font-weight: 600;
	}
	
	p {
		font-size: 1em;
	}
	
	a {
		font-weight: bold;
		text-decoration: none;
	}
	
	header {
		display: block;
		position: relative;
		color: white;
		overflow: hidden;
	}
	
	header .container {
		position: relative;
		z-index: 2;
		color: #ffffff;
		padding-bottom: 3em;
		min-height: 400px;
	}
	
	header:before {
		content:"";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;  
		background: url(resources/bkg4.jpg);
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
		transform: translate3d(0,0,0) scale(1.1);
		filter: blur(6px);
		z-index: 1;
	}
	
	header h2 {
		max-width: 640px;
	}
	
	button {
		font-family: Source Sans Pro, sans-serif;
		font-weight: 600;
		border: none;
		border-radius: 8px;
		color: white;
		font-size: 1em;
		padding: 0.75em 2em;
		text-align: center;
		text-decoration: none;
		display: inline-block;
		margin-top: 1.5em;
		margin-bottom: 1em;
		margin-right: 16px;
		
	}
	
	header button {
		background-color: rgba(37,27,37,0.5);
		-webkit-backdrop-filter: saturate(300%) brightness(100%) blur(20px);
	}
	
	
	footer {
		color: white;
		width: 100%;
		height: 100%;
		background-color: #252525;
		padding-top: 3em;
		padding-bottom: 3em;
	}
	
	footer hr {
		border: 1px solid rgba(255, 255, 255, 0.25);
	}
	
	footer a {
		color: white;
	}

	input {
		border: none;
		border-bottom: solid 2px #D8D8D8;
		width: 70%;
		color: #6B7A8A;
		font-size: 1em;
		font-weight: 100;
		padding: 0.75em 2em;
		text-align: left;
		text-decoration: none;
		display: inline-block;
		margin-top: 2em;
		margin-right: 8px;
		outline: none;
		transition: 0.2s ease-in-out;
	}
	
	input:focus {
		border-bottom: solid 2px rgba(22,126,251,1);
		background-color: rgba(22,126,251,0.2);
		transition: 0.2s ease-in-out;
	}

	
	/* navigation styling below. */
	
	#navbar {
		position: absolute;
		font-family: 'MuseoSansRounded';
		background-color: none;
		height: 60px;
		margin: 0;
		padding: 0;
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		z-index: 2;
	}
	
	#navbar button, #navbar label, #navbar a {
		 margin: 1em;
		 color: white;
	}
	
	#navbar label {
		font-size: 1.4em;
		font-weight: 700;
		margin-left: 16px;
	}
	
	#navbar label em {
		font-size: 0.6em;
		font-style: normal;
		font-weight: 900;
		text-transform: uppercase;
		background-color: #FF3B30;
		color: white;
		padding: 4px;
		padding-left: 12px;
		padding-right: 12px;
		margin-left: 8px;
		border-radius: 100px;
	}
	
	#navbar button {
		background-color: rgba(200,200,210,0.2);
		padding-top: 8px;
		padding-bottom: 8px;
		margin-right: 16px;
		-webkit-backdrop-filter: saturate(300%) brightness(75%) blur(20px);
	}
	
	/* White page template below. */
	
	.page {
		display: block;
		position: relative;
		background-color: white;
		width: 100%;
		padding-top: 3em;
		padding-bottom: 3em;
/* 		border-top: 2px solid #D8D8D8; */
	}
	
	.page:last-of-type, .page:first-of-type, .page.blue {
		border-top: none;
	}
	
	.page button {
		background-color: #167EFB;
		color: white;
	}
	
	.page h3, .page h1 {
		color: #252525;
	}
	
	.page h2 {
		color: #6B7A8A;
	}

	/* Blue page template below. */
	
	.page.blue {
		background-color: #167EFB;
		color: white;
	}
	
	.page.blue button {
		background-color: white;
		color: #167EFB;
	}
	
	.page.blue h3, .page.blue h1 {
		color: white;
	}
	
	.page.blue h2 {
		color: white;
	}
	
	/* Grid behaviour and styling below. */
	
	.container {
		background-color: none;
		padding: 0em 2em 0em 2em;
		margin: auto;
		max-width: 1000px;
	}
	
	.container p {
		color: #6B7A8A;
	}
	
	hr {
		border: none;
		border: 1px solid #D8D8D8;
		max-width: 1000px;
	}
	
	.container hr {
		padding: none;
		margin-bottom: 2em;
		margin-top: 2em;
	}
	
	.container.line hr {
		padding: 0em 2em 0em 2em;
		margin: auto;
		margin-bottom: none;
	}
	
	.feature, .profile {
		text-align: center;
		flex: 1;
		width: auto;
		padding: 16px;
	}
	
	.feature p, .profile p {
		color: #6B7A8A;
		min-width: 200px;
	}
	
	.feature h3, .profile h3 {
		font-size: 1.5em;
		padding-top: 8px
	}
	
	.profile img {
		border-radius: 1000px;
	}
	
	.profile h3 img {
		padding-left: 8px
	}
	
	.profile hr {
		max-width: 200px;
		padding: none;
		margin-top: 1em;
		margin-bottom: 1em;
	}
	
	.profile h3, .profile h5, .profile p {
		min-width: 250px;
	}
	
	.feature.mini p {
		min-width: 250px;
	}
	
	.feature.mini h3 {
		font-size: 1.25em;
	}
	
	.grid {
		background-color: none;
		padding: 0em 2em 0em 2em;
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-around;
		flex-wrap: wrap;
	}
	
	.grid_column {
		background-color: red;
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-around;
		flex-wrap: wrap;
	}