@import url('http://fonts.googleapis.com/css?family=Lato:300,400,700');
@import url("font-awesome.min.css");
@charset "UTF-8";
/* CSS Document */

html, body {
    height: 100%;
    font-size: 100%;
    font-family:'Lato', sans-serif;
    font-weight:300 !important;
	overflow: hidden;
	margin:0;
	padding:0;
	border:0;
	vertical-align:middle;
	/*color:#666;*/
	}
@media (max-width: 300px) {
    html { font-size: 75%; }
}
@media (min-width: 300px) {
    html { font-size: 80%; }
}
@media (min-width: 500px) {
    html { font-size: 85%; }
}
@media (min-width: 700px) {
    html { font-size: 95%; }
}
@media (min-width: 850px) {
    html { font-size: 100%; }
}
	
svg {
	display: block;
	margin:auto;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    margin-bottom: 0em;
	font-family:'Lato', sans-serif;
	font-weight:300;
	color:#191970;
	opacity:0.8;
}

/* 
iframe {
  margin-top: 40px;
  width: 960px;
  height: 500px;
  border: none;
}
 */

iframe {
/*   margin-top: 1em; */
/*   width: 960px; */
/*   height: 500px; */
	width: 100%;
	height: 500px;
	border: none;
	display: block;
	float:center;
}
a, a:link, a:hover, a:visited {
    color: teal;
    text-decoration: none;
    font-weight:300;
}
/* For text on dark backgrounds */
.reverse h1, .reverse h2, .reverse h3, .reverse h4, .reverse h5, .reverse h6 {color: white;}
.reverse p, .reverse ul {color: #aaa;}

span { 
	display:inline-block; 
	vertical-align:middle ;
}

/* Container for header and main -- excluding footer.*/
#main{
	overflow-y:scroll;
	height: 100%;
	left: 0;
	position: fixed;
	font-size:100%;
	text-align: center;
	top: 0;
	width: 100%;
	z-index: 1;
	}
/* Header */
	@-moz-keyframes nav-icons { 0% { -moz-transform: translate3d(0,1em,0); -webkit-transform: translate3d(0,1em,0); -o-transform: translate3d(0,1em,0); -ms-transform: translate3d(0,1em,0); transform: translate3d(0,1em,0); opacity: 0; } 100% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; } }
	@-webkit-keyframes nav-icons { 0% { -moz-transform: translate3d(0,1em,0); -webkit-transform: translate3d(0,1em,0); -o-transform: translate3d(0,1em,0); -ms-transform: translate3d(0,1em,0); transform: translate3d(0,1em,0); opacity: 0; } 100% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; } }
	@-o-keyframes nav-icons { 0% { -moz-transform: translate3d(0,1em,0); -webkit-transform: translate3d(0,1em,0); -o-transform: translate3d(0,1em,0); -ms-transform: translate3d(0,1em,0); transform: translate3d(0,1em,0); opacity: 0; } 100% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; } }
	@-ms-keyframes nav-icons { 0% { -moz-transform: translate3d(0,1em,0); -webkit-transform: translate3d(0,1em,0); -o-transform: translate3d(0,1em,0); -ms-transform: translate3d(0,1em,0); transform: translate3d(0,1em,0); opacity: 0; } 100% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; } }
	@keyframes nav-icons { 0% { -moz-transform: translate3d(0,1em,0); -webkit-transform: translate3d(0,1em,0); -o-transform: translate3d(0,1em,0); -ms-transform: translate3d(0,1em,0); transform: translate3d(0,1em,0); opacity: 0; } 100% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; } }

#header{
	cursor: default;
	background-color: inherit;
	font-weight: 300;
	font-size: 1em;
	display: block-inline;
	position: relative;
	text-align: center;
	top: 0%;
	vertical-align: middle;
/* 	margin-left: auto; */
/* 	margin-right: auto; */
	width: 100%;
/* 	padding-bottom:20%; */
/* 	height:10%; */
}
	#header nav {
		font-size: 0.688em;
		text-align: center;
		padding-top: 1%;
		padding-bottom:1%;
		margin:0;
	}
	#header nav ul{
		padding:0;
		margin:0;
	}
	#header nav li {
		/*
		-moz-animation: nav-icons 0.5s ease-in-out forwards;
		-webkit-animation: nav-icons 0.5s ease-in-out forwards;
		-o-animation: nav-icons 0.5s ease-in-out forwards;
		-ms-animation: nav-icons 0.5s ease-in-out forwards;
		animation: nav-icons 0.5s ease-in-out forwards;
		*/
		-moz-backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
		-o-backface-visibility: hidden;
		-ms-backface-visibility: hidden;
		backface-visibility: hidden;
		/*
		-moz-transform: translate3d(0,0,0);
		-webkit-transform: translate3d(0,0,0);
		-o-transform: translate3d(0,0,0);
		-ms-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0);
		*/
		display: inline-block;
		height: 5.35em;
		line-height: 5.885em;
		position: relative;
		top: 0;
		width: 5.35em;
	}
	#header nav a {
		-webkit-tap-highlight-color: transparent;
		-webkit-touch-callout: none;
		border: 0;
		display: inline-block;
	}
	#header nav a:before {
		-moz-transition: all 0.2s ease-in-out;
		-webkit-transition: all 0.2s ease-in-out;
		-o-transition: all 0.2s ease-in-out;
		-ms-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
		border-radius: 100%;
		border: solid 1px white;
		color: white;
		display: block;
		font-size: 1.75em;
		height: 2.5em;
		line-height: 2.5em;
		position: relative;
		text-align: center;
		top: 0;
		width: 2.5em;
	}
	#header nav a:hover {
		font-size: 1.1em;
	}
	#header nav a:hover:before {
		background-color: rgba(255, 255, 255, 0.175);
		color: white;
	}
	#header nav a:active {
		font-size: 0.95em;
		background: none;
	}
	#header nav a:active:before {
		background-color: rgba(255, 255, 255, 0.35);
		color: white;
	}
	#header nav a span {
/* 		display: none; */
/* 		text-align:center; */
		left:0;
		right:0;
		margin-left:auto;
		margin-right:auto;
		display: block;
		color:white;
		position:absolute;
/* 
		font-size:5pt;
 */
/* 		padding-bottom:300px; */
	}

/* Header is finished. */

#mainline{
	width:100%;
	font-size:3em;
	margin-top:2em;
}

#explain{ 
	position:relative;
	text-align:center;
	padding:1% 0;
	margin-left:10%;
	margin-right:10%;
	width:100%;
	height: auto;
	margin: 0 auto;
	font-weight:300;
	font-size:1.8em;
	color:#666;
	margin-bottom:6.4em;/* This prevents the footer overlap! */
}
	#explain span{
		display:inline-block;
		background-color:inherit;
		border-radius:4px;
		margin:1em;
		cursor:default;
		font-size:inherit;
	}
	#explain span::before{
		position:absolute;
		top:2em;
		bottom:0;
		left:0;
		width:100%;
		font-weight:300;
		font-size:1em;
		padding-top:1em;
		padding-bottom:3em;
		content:attr(data-title);
		opacity:0;
		/* Animate the transitions */
		-webkit-transition:opacity 0.4s;
		transition:opacity 0.4s;
	}

	#explain span:hover::before{
		opacity:1;
	}
	#explain span::after{
		position:absolute;
		display:inline-block;
	}


#tempoline{
	padding: 0px;
	margin: 0px;
}
#tempoline2{
	padding: 0px;
	margin: 0px;
}
#moodline{
	padding: 0px;
	margin: 0px;
	width: inherit;
}
#keyline{
	padding: 0px;
	margin: 0px;
}
	
#headerDark {
	cursor: default;
	background-color: inherit;
	font-weight: 300;
	font-size: 1em;
	display: inline-block;
	position: relative;
	text-align: center;
	top: 0%;
	vertical-align: middle;
	width: 100%;
}
	#headerDark nav {
		font-size: 0.688em;
		text-align: center;
		padding-top: 1%;
		padding-bottom:1%;
		margin:0;
		}
	#headerDark nav ul{
		padding:0;
		margin:0;
	}
	#headerDark nav li {
			/*
		-moz-animation: nav-icons 0.5s ease-in-out forwards;
		-webkit-animation: nav-icons 0.5s ease-in-out forwards;
		-o-animation: nav-icons 0.5s ease-in-out forwards;
		-ms-animation: nav-icons 0.5s ease-in-out forwards;
		animation: nav-icons 0.5s ease-in-out forwards;
		*/
		-moz-backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
		-o-backface-visibility: hidden;
		-ms-backface-visibility: hidden;
		backface-visibility: hidden;
		/*
		-moz-transform: translate3d(0,0,0);
		-webkit-transform: translate3d(0,0,0);
		-o-transform: translate3d(0,0,0);
		-ms-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0);
		*/
		display: inline-block;
		height: 5.35em;
		line-height: 5.885em;
		position: relative;
		opacity:0.8;
		top: 0;
		width: 5.35em;
	}
	#headerDark nav a {
		-webkit-tap-highlight-color: transparent;
		-webkit-touch-callout: none;
		border: 0;
		display: inline-block;
	}
	#headerDark nav a:before {
		-moz-transition: all 0.2s ease-in-out;
		-webkit-transition: all 0.2s ease-in-out;
		-o-transition: all 0.2s ease-in-out;
		-ms-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
		border-radius: 100%;
		border: solid 1px #191970;
		color: #191970;
		display: block;
		font-size: 1.75em;
		height: 2.5em;
		line-height: 2.5em;
		position: relative;
		text-align: center;
		top: 0;
		width: 2.5em;
	}
	#headerDark nav a:hover {
		font-size: 1.1em;
	}
	#headerDark nav a:hover:before {
		background-color: rgba(25, 25, 112, 0.175);
		color: #191970;
	}
	#headerDark nav a:active {
		font-size: 0.95em;
		background: none;
	}
	#headerDark nav a:active:before {
		background-color: rgba(25, 25, 112, 0.35);
		color: #191970;
	}
	#headerDark nav a span {
		display: none;
/* 		text-align:center; */
/* 		display: block; */
/* 		color:#191970; */
	}

/* Header is finished. */
#readMoreTitle{
	width:80%;
	text-align:left;
	height:auto;
	margin-left:auto;
	margin-right:auto;
}
#readMoreAll{
	width: 80%;
    margin-left:auto;
    margin-right:auto;
}
#readMoreTop{
	/* width: 100%; */
/*     text-align: left; */
    padding:0;
    overflow:hidden;
    height: auto; 
    text-align: justify;
}

small{
   font-size:0.7em;
}

#readMoreBottom{
	clear:both;
	/* width:100%; */
	padding-top:1em;
	height:auto;
	margin-left:auto;
	margin-right:auto;
	text-align:left;
}
#readMoreBottom object{
	height:auto;
	width:auto;
	margin-left: auto;
	margin-right: auto;
	display: block;
	float:center;
/* 	margin-bottom:5.6em; */
}

.logos {
	position: absolute;
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    vertical-align:middle;
    text-align:center;
}
#logoimages{
    text-align:center;
    vertical-align:middle;
    display:inline-block;
	height: 100%;
}

#footer{
	clear: both;
	margin-top:10em;
	background-color: rgba(245,245,245,0.5);
	font-weight:300;
	font-size: 1em;
	overflow: hidden;
	margin-left:0pt;
	top: auto;
	bottom: 0;
	cursor: default;
	max-height:4.5em;
	min-width:100%;
	left: 0;
	line-height: 1.5em;
	position: absolute;
	text-align: center;
	width: 100%;
	z-index: 2;
}

/* Icon */

.icon {
	position: relative;
}

.icon:before {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	font-family: FontAwesome;
	font-style: normal;
	font-weight: normal;
	text-transform: none !important;
}

.icon > .label {
	display: none;
/* 	position:relative; */
/* 
	display: block;
	position: absolute;
	text-align: center;
 */
}
		
.bold{
	font-size: inherit;
	text-align: inherit;
	opacity:0.8;
	vertical-align:inherit;
	font-weight:400;
	color:#191970; 
}
.foot_bold{
	font-size: inherit;
	text-align: inherit;
	vertical-align:inherit;
	opacity:0.8;
	font-weight:400;
	color:#191970;
}