@import 'palette.css';
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700');

* {
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;
}

body {
	height: 100%;
	padding: 0;
	margin: 0;
	font-size: 16px;
	font-family: 'Roboto', sans-serif;
	background-color: var(--white);
	-webkit-font-smoothing: antialiased;
}

h1 {
	letter-spacing: 0;
	font-size: 1.25rem;
	font-weight: 500;
	color: var(--primary);
	flex: 1 1 0%;
	line-height: 1.5rem;
	margin: 1rem 0 0 0;
	padding: 0;
}

h2 {
	color: var(--action1);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.5625rem;
}

p,
li {
	font-size: .875rem;
	line-height: 1.5em;
	margin-top: .5em;
	padding-bottom: .5em;
}

.app {
	color: var(--primary);
	background-color: var(--white);
	border-radius: 0;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 1100;
	width: 100%;
	display: flex;
	padding: 0 1.3125rem;
	height: 3.5rem;
	box-shadow: 0 1px 0 0 rgba(20, 27, 44, .2);
}

.cancelButton {
	cursor: pointer;
	margin: .9375rem 1.5rem 0 0;
}

.content {
	padding: 3.4rem 0 0 0;
	max-width: 40rem;
	margin: 0 auto;
}

.section {
	margin-top: 1em;
	padding-bottom: 1em;
}

ol[type="breadcrumb"] {
	counter-reset: section;
	list-style-type: none;
}

ol[type="breadcrumb"] > li:before {
	counter-increment: section;
	content: counters(section, ".") ".  ";
}


@media all and (max-width: 768px) {

	p,
	li {
		font-size: .8125rem;
		line-height: 1.25rem;
	}

	.content {
		padding: 3.4rem 1.3125rem 0 1.3125rem;
	}
}