html {font-size: 62.5%; height: 100%;}

@font-face {
  font-family: "Lato";
  src: url("Lato-Regular.ttf");
  }

body,input {margin-top: -1em;margin-left: 1em; background:FDFDFD; font-size: 1em; height: 100%; font-family: 'Lato'}

a:link    { color: #dd8800 }  /* unvisited links */
a:visited { color: #744500 }  /* visited links   */
a:hover   { color: #ffdae0 }  /* user hovers     */
a:active  { color: #090f0f }  /* active links    */

.h1 { 
    font-family: ‘Lato’, Arial, serif; font-weight: 400;
}

.section {
    position:relative;
    margin-left:29%;
    width:69%;
    max-width:100%;
    top:3.9em;
    background:#fdfdfd;
    margin-bottom:4em;
}
.text {
    margin-top:-.3em;
    margin-bottom:3.3em;
    padding:1em;
    background-color:rgba(192,192,192,0.5);
    font-size: .7em;
    
}
.content {
    max-width:100%;min-width:18em;height:auto;top:4.3em; margin-left:29%;margin-right:2em;margin-bottom:4em;padding:1em;position:relative; background-color:rgba(192,192,192,0.5);
}

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.grid {
  background:#fdfdfd;
  margin: -1 0 0.2em 0;
}
.grid:after {
  /* Or @extend clearfix */
  content: "";
  display: table;
  clear: both;
}

[class*='col-'] {
  float: left;
  padding-right: 0.2em;
}
.grid [class*='col-']:last-of-type {
  padding-right: 0;
}
.col-2-3 {width: 66.66%;}
.col-1-3 {width: 33.33%;}
.col-1-2 {width: 50%;}
.col-1-4 {width: 25%;}
.col-1-5 {width: 20%;}
.col-1-8 {width: 12.5%;}

.module {padding: 0.2em;background:#fdfdfd;}

/* Opt-in outside padding */
.grid-pad { padding: 0.2em 0 0 0.2em;
}
.grid-pad [class*='col-']:last-of-type {
  padding-right: 0.2em;
}

.title {    
    position:relative;
    top:3.95em;
    margin-top:-.2em;
    margin-left:29%;
    margin-bottom:.5em;
    width:69.5%;
    max-width:100%;
    min-width:18em;
    padding:.5em;
    background-color:rgba(192,192,192,0.5);
    text-align: center;
    
}

.links {    
    line-height: .2em;
    font-size: .8em;
    position:relative;
    top:3.95em;
    margin-top:-.2em;
    margin-left:29%;
    margin-bottom:.5em;
    width:69.5%;
    max-width:100%;
    min-width:18em;
    padding:.5em;
    background-color:rgba(192,192,192,0.2);
    text-align: left;
    
}

#link1:link { font-size: .9em; color: midnightblue; text-decoration:none; !important}
#link1:hover { color: mediumvioletred; text-decoration: underline !important; background: midnightblue !important}
#link1:visited { font-size: .9em; color: midnightblue; text-decoration:underline; !important}
#link2:link { font-size: .9;color: mediumturquoise; text-decoration:none !important}
#link2:hover { color: mediumspringgreen; text-decoration: underline !important; background: mediumturquoise !important}
#link2:visited { font-size: .9;color: mediumturquoise; text-decoration:underline !important}
#link3:link { font-size: .9;color: tomato; text-decoration:none !important}
#link3:hover { color: lightsalmon; text-decoration: underline !important; background: tomato; !important}
#link3:visited { font-size: .9;color: tomato; text-decoration:underline !important}
#link4:link { font-size: .9;color: goldenrod; text-decoration: none !important}
#link4:hover { color: olive; text-decoration: underline; background: goldenrod; !important}
#link4:visited { font-size: .9;color: goldenrod; text-decoration: underline !important}

@media (max-width: 300px) {
    html { font-size: 70%; }
}

@media (min-width: 500px) {
    html { font-size: 80%; }
}

@media (min-width: 700px) {
    html { font-size: 120%; }
}

@media (min-width: 1200px) {
    html { font-size: 200%; }
}

#accordion {
	position: fixed;
    top: 3.2em;
    left: 1em;
    list-style: none;
	padding: 0 0 0 0;
	width: 27%;
}
    
#accordion li{
	display: block;
	font-weight: bold;
    font-size: 1em;
	margin: 1px;
	cursor: pointer;
	padding: 6 6 6 8px;
	list-style: circle;
    padding: 10px;
    border-top: 1px solid lightgrey;
    border-left: 1px solid lightgrey;
}

#accordion li:hover {
    font-weight:normal;
}

#accordion ul {
	list-style: none;
	padding: 0 0 0 0;
	display: none;
}
#accordion ul li{
	font-weight: normal;
    font-size: 1em;
	cursor: auto;
	background-color: #fdfdfd;
	padding: 0 0 0 8px;
    border-top: 0px solid lightgrey;
    border-left: 1px solid lightgrey;
}
#accordion a {
	text-decoration: none;
}
#accordion a:hover {
	text-decoration: underline;
    font-weight:bold;
    background:#fdfdfd;
}
#wrapper {
	min-height:100%;
	position:relative;
}
#header {
	padding:10px;
	background:#5ee;
}

#footer {
    display:inline;
    width:95%;
    padding:10px;
    font-size: 75%;
	height:4em;
	position:bottom;
    margin:1em  auto 0;
    bottom:auto;
	background:#fdfdfd;
}
.fb-like {
    display:inline;
    float:right;
    width:460px;
	text-align:right; 
}
.clearfix {
  clear: both;
}
clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
    
.note {
    display:inline;
    float:left;
	margin:0;
	width:380px;
    margin-bottom:1em;
}
.copy {
    display:inline;
    float:right;
	width:460px;
	text-align:right; 
}