/* Reset */

body, img, p, h1, h2, h3, ul, li, input, textarea, button {
	margin: 0;
	padding: 0;
	border: none;
}

h1, h2, h3, address, input, textarea, button {
	font-size: 100%;
	font-style: normal;
	font-weight: normal;
}

input,
textarea,
button {
	font-family: inherit;
}

/* Typography */

body {
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	font-size: 85%;
	line-height: 1.3;
}

body,
input {
	color: #444;
}

/* Links */

a {
	text-decoration: none;
	color: #3B5998;
}

a:hover {
	text-decoration: underline;
}

/* Browser warning */

div.browser-warning {
	background-color: #EEAA44;
	text-align: center;
	padding: 1em;
	font-weight: bold;
}

/* Forms */

input[type=text],
input[type=email],
input[type=password],
input[type=submit],
textarea {
	padding: 0.4em;
}

input[type=text],
input[type=email],
input[type=password],
textarea {
	border: 1px solid #ccc;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus {
	border: 1px solid #886;
}

input, textarea, button, .button {
	border-radius: 3px;
}

input[type=submit],
.button {
	color: white;
	background: #0084BD;
	cursor: pointer;
	padding: 0.5em 1em;
}

input[type=submit]:hover,
.button:hover {
	background: #00518A;
}

a.button {
	text-decoration: none;
}

/* Contact form */

#contact {
	padding-left: 9em;
}

#contact label,
#contact input,
#contact textarea {
	margin-bottom: 1em;
}

#contact label,
#contact input,
#contact textarea {
	float: left;
}

#contact label {
	padding-top: 0.4em;
	text-align: right;
	width: 8em;
	margin-left: -9em;
}

#contact input,
#contact textarea {
	width: 100%;
	box-sizing: border-box;
}

#contact label,
#contact button {
	clear: both;
}

/* Header */

#header {
    background: #353535 url(../images/bg/low_contrast_linen.png);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    box-shadow: 0 0px 2px rgba(0,0,0,0.5);
}

#brand {
	float: left;
}

#brand img {
	width: 125px;
	height: 25px;
	vertical-align: middle;
	margin: 15px 0;
}

#brand li {
	display: inline;
	margin-right: 2em;
}

#brand li,
#brand li a {
	color: #979EA3;
	text-decoration: none;
	transition: color 0.3s;
}

#brand li a:hover {
	color: white;
}

/* Login */

#nav {
	float: right;
}

#spacer,
#login {
	display: inline-block;
	vertical-align: middle;
}

#spacer {
	height: 55px;
}

#login {
	position: relative;
	z-index: 1000;
}

#login-button {
	color: #666;
	padding: 5px 20px 5px 10px;
	background: #DDD url("../images/signin-arrow.png") 95% 55% no-repeat;
}

#login-button:hover,
#login.open #login-button {
	background-color: #EEE;
}

#login.open #login-button {
	border-radius: 3px 3px 0 0;
}

#login form {
	position: absolute;
	right: 0;
	display: none;
	background-color: #FFF;
	padding: 0em 1em;
	border: 5px solid #EEE;
	border-radius: 3px 0 3px 3px;
	box-shadow: 0 5px 5px #333;
}

#login.open form {
	display: block;
}

#login form div {
	margin: 1em 0;
}

#login form label,
#login form input {
	display: block;
}

#login form label {
	margin-bottom: 0.2em;
}

#login form input.text-input {
	width: 22em;
}

#reset_password {
	font-size: 0.85em;
	text-decoration: none;
	color: #0084BD;
}

#reset_password:hover {
	text-decoration: underline;
}

/* Navigation */

.toc {
	visibility: hidden;
	padding-top: 130px;
	margin-top: -130px;
	display: inline-block;
    width: 0;
}

/* Main content */

#title {
	text-align: center;
	color: #192832;
	overflow: hidden;
	font-weight: 300;
	margin-top: 55px;
    /* Original photo by Beather on Unsplah at https://unsplash.com/photos/So17IWm7i3o */
    /* Optimized with `convert breather-168754-retouched.jpg -sampling-factor 4:2:0 -strip -quality 85 -interlace JPEG -colorspace sRGB breather-168754-retouched-optimized.jpg` */
    background: #eeeeee url(../images/breather-168754-retouched-optimized.jpg);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;
}

#title .row {
	max-width: 100%;
}

#title h1 {
	margin-top: 1.5em;
	font-size: 3em;
	font-weight: bold;
	text-shadow: 0 0.1em 0.1em rgba(255,255,255,0.5);
}

#title p {
	margin-bottom: 1em;
	font-size: 1.3em;
}

.jumbotron-text {
	margin: 3em auto 4em;
	max-width: 50em;
	line-height: 1.4;
}

#screenshot {
	display: block;
	width: 100%;
	max-width: 450px;
	margin: 0 auto;
	box-shadow: 0 0 1em rgba(0,0,0,0.5);
}

.section {
	padding: 4em 0;
}

#title,
.section {
    border-bottom: 1px solid #e5e5e5;
}

.section-grey {
    background: #f6f6f6 url(../images/bg/furley.png);
}

#goto-signup a {
	color: white;
	background: #e85c41;
	text-shadow: 0 0.1em 0.1em rgba(0,0,0,0.3);
	display: inline-block;
}

#goto-signup a:hover {
	background: #db3a1b;
}

h1,
.section h2,
.section h3,
.price {
	color: #0084BD;
}

.section h2,
.section h3 {
	margin-bottom: 2em;
}

.section h2 {
	font-size: 2em;
	text-align: center;
}

.section li {
	margin: 0.5em 0 0.5em 1.2em;
}

.section p {
	margin-bottom: 1em;
}

.price {
	text-align: center;
}

.amount {
	font-size: 5em;
}

.customers {
	text-align: center;
}

.customers a {
	display: inline-block;
	margin: 0 1em 1em;
}

.customers img {
	vertical-align: middle;
	max-width: 7em;
	max-height: 4em;
	-webkit-filter: grayscale(1);
	filter: gray;
	filter: grayscale(1);
}

.customers a:hover img {
	-webkit-filter: none;
	filter: none;
}

img.team {
	width: 90%;
	max-width: 15em;
	display: block;
	margin: 0 auto;
	-webkit-transform: rotate(-2deg);
	-moz-transform: rotate(-2deg);
	transform: rotate(-2deg);
	padding: 4px;
	border: 1px solid #ccc;
}

/* Footer */

#footer {
	background: #082940;
	padding-top: 2em;
}

#footer,
#footer a {
	color: #aaa;
}

#footer .footer-block,
#footer .column {
	font-size: 0.85em;
}

#footer .column {
	margin-top: 2em;
}

.footer-block {
	float: left;
	margin-left: 1em;
	margin-right: 3em;
	margin-bottom: 2em;
}

.locales {
	list-style: none;
}

/* Grid framework */

.row {
	max-width: 50em;
	margin: 0 auto;
}

.column {
	padding: 0 1em;
	box-sizing: border-box;
}

.column + .column {
	margin-top: 2em;
}

.row:after,
.column:after {
	content: "";
	display: table;
	clear: both;
}

@media (min-width: 62em) {
	/* https://zellwk.com/blog/media-query-units/ */

	.row {
		max-width: 72em;
	}

	.column {
		float: left;
	}

	.column + .column {
		margin-top: 0;
	}

	.grid_1 { width: 11.111%; }
	.grid_2 { width: 22.222%; }
	.grid_3 { width: 33.333%; }
	.grid_4 { width: 44.444%; }
	.grid_5 { width: 55.556%; }
	.grid_6 { width: 66.667%; }
	.grid_7 { width: 77.778%; }
	.grid_8 { width: 88.889%; }
	.grid_9 { width: 100%; }
}

@media not all and (min-width: 62em) {
	#brand li + li {
		display: none;
	}
}