/* Based on template from csslayoutgenerator.com */

body {
  font: 12px/18px Lucida Sans Unicode, Lucida Grande, sans-serif;
}

strong {
  font-weight: bold;
}

h2,
h3,
h4,
h5,
h6 {
  font-weight: bold;
}

h1 {
  font-size: 1.5em;
  padding: 3% 0 3% 0;
  background-color: #fff;
}

h2 {
  font-size: 1.2em;
  padding: 1% 0 1% 0;
}

p {
  padding: 0.2em 0;
}
span {
  font-size: 3em;
  font-weight: bold;
  white-space: nowrap;
  line-height: 1em;
}
.smaller{
  font-size: 1.5em;
}

ol {
  list-style: decimal;
  padding-left: 2em;
}

img {
  width: 100%;
}

a {
  color: cornflowerblue;
}

a:visited {
  color: cornflowerblue;
}

nav a {
  color: black;
  text-decoration: none;
}

nav a:hover {
  color: black;
  text-decoration: underline;
}

nav a:visited {
  color: black;
}


/* Header
-----------------------------------------------------------------------------*/

header {
  height: auto;
  background-color: white;
  padding: 2%;
}

.header img {
  width: 20%;
  margin-bottom: -20px;
}

nav {
  text-align: right;
}


/* Middle
-----------------------------------------------------------------------------*/

#wrapper {
  max-width: 1300px;
  margin: 0 auto;
}

main {
  padding: 2% 2% 0 2%;
}

section {
  margin-bottom: 1px;
  background-color: #fff;
  border-style: solid;
  border-width: 1px 0 0 0;
}

.bold {
  font-weight: bold;
}

aside {
  margin-bottom: 1px;
  background-color: #fff;
  border-style: solid;
  border-width: 1px 0 0 0;
  background-color: aliceblue;
}


/* Footer
-----------------------------------------------------------------------------*/

footer {
  height: auto;
  background-color: white;
  padding: 2% 2% 2% 2%;
}

@media screen and (min-width:600px) {
  #flexcontainer600 {
    display: flex;
    display: -webkit-flex;
    /* Safari */
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    /* Safari 6.1+ */
  }
  .section {
    flex: 46%;
    -webkit-flex: 46%;
    /* Safari 6.1+ */
    -ms-flex: 46%;
    /* IE 10 */
    padding-right: 2%;
  }
  .header img {
    width: 15%;
  }
  h1 {
    font-size: 2em;
    padding: 2% 0 2% 0;
  }
}

@media screen and (min-width:850px) {
  #flexcontainer850 {
    display: flex;
    display: -webkit-flex;
    /* Safari */
    -webkit-flex-wrap: wrap;
    /* Safari 6.1+ */
  }
  #sectionintro {
    flex: 28%;
    -webkit-flex: 28%;
    /* Safari 6.1+ */
    -ms-flex: 28%;
    /* IE 10 */
    padding-right: 2%;
    order: 2;
    background-color: #fafafa;
    padding: 0 1%;
  }
  #flexcontainer600 {
    flex: 68%;
    -webkit-flex: 68%;
    /* Safari 6.1+ */
    -ms-flex: 68%;
    /* IE 10 */
    padding-right: 2%;
    order: 1;
  }
  .header img {
    width: 10%;
  }
}