/* NOTE
html is set to 62.5% so that all the REM measurements throughout
are based on 10px sizing. So basically 1.5rem = 15px :) */
html {
  font-size: 62.5%;
  overflow-y: scroll; 
}
  
body {
  font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
  line-height: 1.2;
  font-weight: 400;
  font-family: Verdana, Arial, sans-serif;
  color: #000; 
  background-color: #661D10; 
  padding: 2em; 
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 2rem;
  font-weight: 400; }
h1 { font-size: 4.0rem; line-height: 1.2;  letter-spacing: -.1rem;}
h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; }
h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
h6 { font-size: 1.6rem; line-height: 1.6;  letter-spacing: 0; }

/* Larger than phablet */
@media (min-width: 550px) {
  h1 { font-size: 5.0rem; }
  h2 { font-size: 4.2rem; }
  h3 { font-size: 3.6rem; }
  h4 { font-size: 3.0rem; }
  h5 { font-size: 2.4rem; }
  h6 { font-size: 1.8rem; }
}

p {
  margin-top: 0; }

img {
	max-width: 100%;
}

.centre {
	text-align:center;
}

a {
	color: #fff;
	text-decoration: none;
}

a:hover {
	color: #fff;
	text-decoration: underline;
}
dt {
 font-weight: bold;
 margin-top: .5rem;
}

.wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  
  font-weight:normal;
  text-align: center;
	margin: 0 auto;
	width: 100%;
	max-width: 980px;
	border: 1px solid #000;
}
.wrapper,  .wrapper > * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.wrapper > * {
  -webkit-box-flex: 1;
  -ms-flex: 1 100%;
  flex: 1 100%;
}

.fire {
/*	float:left; */
	background-color: #C66815;
}
.fire > *  {
	margin:0;
	padding:0;
}

.fire img {
	text-align:center;
}
.header {
	background-color: #C66815;
  padding-left:0;
}
.header h1, h4, h5 {
	font-weight:bold;
}
.header h4 {
	font-style:italic;
}
.header h5 {
	font-style:italic;
}
.nav {
	margin: 0 auto;
	background-color: #C66815;
	color: #F9E9E6;
	font-weight:bold;
	font-size: small;
}
.whitelarge {
	font-size:large;
	font-weight:bold;
    text-align:center;
    color:#FFFFFF;
}
.tagline {
	font-size: 40%;	
	font-style: italic;
}
.tagline2 {
	font-size: 30%;	
	font-style: italic;
}
.article {
	background-color: #C66815;
  text-align: left;
  border-top: 1px solid #000;
  padding-left: 2rem;
	min-width:0;
}
.article p, .article dd {
  padding-right: 2rem;
}
.article img {
  padding-left: 1rem;
}
.thumbs {
	display: -webkit-box;
	display: -ms-flexbox;
	display:flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-flow: row wrap;
	flex-flow: row wrap;
}
.thumb {
	margin: auto;
	text-align:center;
	-moz-flex: 1 0% auto;
	-ms-flex: 1 0% auto;
	-webkit-box-flex: 1;
	flex: 1 0% auto;
}
.thumb img {
	display:block;
	width:100%;
}

.top-pic {
	width:100%;
	max-width:50%;
}
.aside {
	background-color: #C66815;
}
.section {
  background: gold;
}
.aside-2 {
  background: hotpink;
}
.footer {
	text-align:center;
	background-color: #000000;
	color: #FBE8D7;
	font-size: .7em;
}
.footer a {
	color: #FBE8D7;
}
.footer p {
	margin: 0;
	padding: .5em 1em;
}

@media all and (max-width: 767px) {
	body { padding: 2rem 0 2rem 0; }
	.wrapper { 	padding: 0; }
	.header { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column; flex-flow: column; }
	.nav { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column; flex-flow: column; }
	.article { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column; flex-flow: column; }
	.aside { border-bottom: 1px solid #CDC; }
	.footer { border-bottom: 1px solid #fff; }
	.top-pic { width:100%; max-width:100%; }
}

@media all and (min-width: 768px) {
  .fire	{ -webkit-box-ordinal-group:2; -ms-flex-order:1; order:1; -webkit-box-flex:1; -ms-flex:1 20%; flex:1 20%; }
  .fire img { float:left; }
  .header { -webkit-box-ordinal-group:3; -ms-flex-order:2; order:2; -webkit-box-flex: 4; -ms-flex: 4 70%; flex: 4 70%; }
  .nav { -webkit-box-ordinal-group:4; -ms-flex-order:3; order:3; -webkit-box-flex: 5; -ms-flex: 5 80%; flex: 5 80%; }
  .aside { -webkit-box-ordinal-group:5; -ms-flex-order:4; order:4; -webkit-box-flex: 1; -ms-flex: 1 15%; flex: 1 15%; }
  .article    { -webkit-box-ordinal-group:6; -ms-flex-order:5; order:5; -webkit-box-flex: 3; -ms-flex: 3 90%; flex: 3 90%; }
  .section { -webkit-box-ordinal-group:7; -ms-flex-order:6; order:6; -webkit-box-flex: 1; -ms-flex: 1 100%; flex: 1 100%; }
  .aside-2 { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; }
  .footer  { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; }
}