@import url("../fonts/type.css");

body {
	background-color: #f9f9f9;
	font-family: "Akkurat", Helvetica, sans-serif;
	font-weight: 300;
	font-size: 14pt;
}

h1, h2 {
	font-family: "Circular", Helvetica, sans-serif;
	font-weight: 500;
	-moz-font-feature-settings:"ss02=2";
	-moz-font-feature-settings:"ss02";
	-ms-font-feature-settings:"ss02";
	-webkit-font-feature-settings:"ss02";
	font-feature-settings:"ss02";
	margin: 0;
	width: 100%;
	text-align: center;
}

h2 {
	font-size: 1.1em;
}

#logo h1 {
	color: #16e693;
	font-size: 4em;
}

sup {
	font-weight: 900;
	font-size: 55%;
	margin-left: 1px;
}

a {
	color: #333;
}

a h1 sup {
	visibility: hidden;
}

a:hover,
a:active,
a:focus {
	text-decoration: none;
	color: #fff;
}

a:hover .section.vertical-center,
a:active .section.vertical-center,
a:focus .section.vertical-center {
	background-color: #16e693;
}

a:focus .section.vertical-center {
	-moz-box-shadow: inset 0 0 30px rgba(0,0,0,0.25);
	-webkit-box-shadow: inset 0 0 30px rgba(0,0,0,0.25);
	box-shadow: inset 0 0 30px rgba(0,0,0,0.25);
	outline: none;
}

a:hover h1 sup,
a:active h1 sup,
a:focus h1 sup {
	visibility: initial;
}

p a,
ul a {
	color: #777;
}

p a:hover,
p a:active,
p a:focus,
ul a:hover,
ul a:active,
ul a:focus {
	color: #999;
	text-decoration: underline;
}

/**/

.container-fluid {
    height: 100%;
    width: 100%;
    position: absolute;
}

.container-fluid .row,
.container-fluid .row .col-sm-6:nth-child(2) {
	height: 100%;
	padding: 0;
}

.vertical-center {
	min-height: 100%;
	display: flex;
	align-items: center;
}

.menu {
	position: fixed;
	right: 0;
}

.menu a .vertical-center {
	min-height: 33.3%;
	border: solid #e9e9e9;;
	border-width: 0px 0px 1px 1px;
	background-color: #f6f6f6;
}

.menu a:last-child .vertical-center {
	border-bottom: none; 
}

/* About */

#about {
	padding: 100px 50px;
	text-align: left;
}

#about h1, h2 {
	text-align: left;
	width: initial;
}

/* Mobile */

@media (max-width:768px) {

	.container-fluid .row, .container-fluid .row .col-sm-6:nth-child(2) {
		height: 57.7%;
	}

	.menu a,
	.menu a .vertical-center {
		height: initial;
		min-height: 100%;
	}

	#logo h1 {
		font-size: 3em;
	}

	.vertical-center, 
	#about {
		/*min-height: 66.6%;*/
		width: 100%;
		overflow: scroll;
	}

	body#home .menu {
		position: absolute;
    	bottom: 0;
    	height: 33.3%;
	}

	.menu {
		display: inline-flex;
		width: 100%;
		position: initial;
	}

	.menu h1 {
		width: 100%;
		font-size: 1.5em;
	}

	.menu a {
		width: 33.3%;
	}

	.menu a .vertical-center {
		/*min-height: 33.3%;*/
		border-width: 1px 0px 0px 1px;
	}

	.menu a:first-child .vertical-center {
		border-left: none; 
	}
}