*
{
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
		-moz-box-sizing: border-box; /* Firefox, other Gecko */
			  box-sizing: border-box; /* Opera/IE 8+ */
}

html
{
	font-size: 100%;
}

@media (max-height: 24em), (max-width: 20em)
{
	html { font-size: 90%; }
}

@media (max-height: 18em)
{
	html { font-size: 80%; }
}

body
{
	max-width: 62rem;
	width: 100%;
	margin: 0 auto;
	padding: 0 1rem;
	font-size: 1rem;
}

@media (max-width: 30em)
{
	body
	{
		padding: 0 .7rem;
	}
}


#top-wrapper
{
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
}

#top
{
	max-width: 62rem;
	width: 100%;
	margin: 0 auto;
	
	padding: 0 1em;
	padding: 0 1rem;
	
	height: 6.5em;
	height: 6.5rem;
}


#logo
{
	height: 6.5em;
	height: 6.5rem;
	
	padding: 2em 0;
	padding: 2rem 0;
}


#logo img
{
	height: 2.5em;
	height: 2.5rem;
	
	width: 11.9rem; /** Thanks iOS! */
}


#content
{
	margin: 6.5em 0 5em 0;
	margin: 6.5rem 0 5rem 0;
}

#footer-wrapper
{
	width: 100%;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: -1;
}

#footer
{
	max-width: 62rem;
	width: 100%;
		
	margin: 0 auto;
		
	padding-bottom: 1em;
	padding-bottom: 1rem;
	
	padding-left: 1em;
	padding-left: 1rem;
	
	padding-right: 1em;
	padding-right: 1rem;
	
	font-size: .7em;
	font-size: .7rem;
}

#footer table
{
	width: 100%;
}

#footer td.right
{
	text-align: right;
}


/********************
 *
 *   Responsive layout stuff
 *
 ********************/
.row .large-1,
.row .large-2,
.row .large-3,
.row .large-4,
.row .large-5,
.row .large-6
{
	float: left;
}

/** Mobile first approach: S40 that don't understand media stuff do display correctly */

.row .small-6 { width: 100.00%; }
.row .small-4 { width:  66.66%; }
.row .small-3 { width:  50.00%; }
.row .small-2 { width:  33.33%; }
.row .small-1 { width:  16.66%; }

.row .medium-left   { padding-right: 0; }
.row .medium-middle { padding-left:  0; padding-right: 0; }
.row .medium-right  { padding-left:  0; }

.row .small-left   { padding-right: 1rem; }
.row .small-middle { padding-left:  1rem; padding-right: 1rem; }
.row .small-right  { padding-left:  1rem; }

.row .small-6.left   { padding-right: 0; }
.row .small-6.middle { padding-left:  0; padding-right: 0; }
.row .small-6.right  { padding-left:  0; }

@media (min-width: 30em)
{
	.row .medium-6 { width: 100.00%; }
	.row .medium-4 { width:  66.66%; }
	.row .medium-3 { width:  50.00%; }
	.row .medium-2 { width:  33.33%; }
	.row .medium-1 { width:  16.66%; }
	
	.row .large-left   { padding-right: 0; }
	.row .large-middle { padding-left:  0; padding-right: 0; }
	.row .large-right  { padding-left:  0; }

	.row .medium-left   { padding-right: 1rem; }
	.row .medium-middle { padding-left:  1rem; padding-right: 1rem; }
	.row .medium-right  { padding-left:  1rem; }
	
	.row .medium-6.left   { padding-right: 0; }
	.row .medium-6.middle { padding-left:  0; padding-right: 0; }
	.row .medium-6.right  { padding-left:  0; }
	
}

@media (min-width: 50em)
{
	.row .large-6 { width: 100.00%; }
	.row .large-5 { width:  83.33%; }
	.row .large-4 { width:  66.66%; }
	.row .large-3 { width:  50.00%; }
	.row .large-2 { width:  33.33%; }
	.row .large-1 { width:  16.66%; }

	.row .large-left   { padding-right: 1rem; }
	.row .large-middle { padding-left:  1rem; padding-right: 1rem; }
	.row .large-right  { padding-left:  1rem; }

	.row .large-6.left   { padding-right: 0; }
	.row .large-6.middle { padding-left:  0; padding-right: 0; }
	.row .large-6.right  { padding-left:  0; }
}

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


.button
{
	display: inline-block;
	padding: .5em 1em;
	margin: 1em;
}


.card
{
	display: block;
	width: 100%;
	
	padding: 1em 1em .5em 1em;
	padding: 1rem 1rem .5rem 1rem;
	
	margin-bottom: 1.5em;
	margin-bottom: 1.5rem;	
}

@media (min-width: 30em)
{
	.card
	{
		padding: 1rem 1.5rem .5rem 1.5rem;
		margin-bottom: 2.5rem;
	}
}

						
.card h1
{
	margin: 0 0 .5rem 0;
	padding: 0 0 .5rem 0;
}


.chapter
{
	width: 100%;
	vertical-align: top;
	
	margin-top: 1em;
	margin-top: 1rem;
	float: left;	
	position: relative;
}

.chapter h2
{
	margin: 0;
}

.chapter h3
{
	margin: 0;
	color: #1F4A99;
}

.chapter p
{
	line-height: 1.6em;
	margin-top: 1rem;
	width: 100%;
}

.chapter > p:first-child
{
	margin: 0;
}

.chapter img
{
	width: 100%;
}


.equalHeightWrapper
{
	display: block;
	
	display: -webkit-flex;
	display: flex;
	
	flex-direction: row;
	
	-webkit-flex-flow: row wrap;
	flex-wrap: wrap;
}