/* COLORS */
.bglite {
  background-color: #E8E5E0;
}

.bgdark {
  background-color: #E1DED8;
}

.bgselect {
  background-color: #E1DED8;
}

.labelColor {
  color: #9C9484;
  fill: #9C9484;
}

.green {
  color: #107358;
  fill: #107358;
}

.teal {
  color: #089576;
  fill: #089576 !important;
}

.gold {
  color: #CE8A00;
  fill: #CE8A00 !important;
}

.textLite {
  color: #9C9484;
  fill: #9C9484;
}

.opac_9 {
  opacity: .9 !important;
}

.card {
  background: #F5F4F0;
  box-shadow: 0 0 8px 0 rgba(199,199,199,0.50);
}

/*
Graphic Details:
Bone Dark
#E1DED8

Text Details (labels):
#9C9484

Text Inactive:
#C2BEB4

Text & Dark Elements:
Dark Brown
#403B2F

Cards and Highlighted buttons:
background: #F5F4F0;
box-shadow: 0 0 8px 0 rgba(199,199,199,0.50);
*/

/* PRELOADER */

.loader {
    border: 3px solid #F5F4F0; /* Light grey */
    border-top: 3px solid #403B2F; /* Blue */
    border-radius: 50%;
    width: 2em;
    height: 2em;
    animation: spin 1.2s linear infinite;
    margin: 0 auto;
    position: relative;
    top: 45%;
}

.loadMessage {
    margin: 0 auto;
    text-align: center;
    position: relative;
    top: 50%;
    font-size: .8em;
    text-transform: uppercase;
    letter-spacing: .5px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* MAIN */
body {
  color: #403B2F;
  background-color: #E8E5E0;
  font-family: 'Chivo', sans-serif;
  font-size: .9em;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

text {
  fill: #403B2F;
  color: #403B2F;
  font-size: 10px;
}

h1 {
  font-family: 'Playfair Display', serif;
  font-weight: normal;
  line-height: 100%;
  letter-spacing: -1px;
  margin: 0;
}

/* SIDEBAR AND TOGGLES */
div#sidebar {
  width: 22%;
  min-width: 200px;
  padding: 1%;
  position: fixed;
  z-index: 400;
  height: 100%;
  left: -100%;
  top: 0;
  box-shadow: 0 0 8px 0 rgba(163,163,163,0.50);
  overflow: hidden; /* CHANGE LATER */
  display: none;
}

.label {
  text-transform: uppercase;
  font-size: .75em;
  letter-spacing: 1px;
  display: block;
  margin: 3em 0 1em 0;
}

#sliderLabel {
  margin-bottom: 1.5em;
}

/* NAV */
div#nav {
  position: relative;
  left: 0;
  top: 0;
}

/* SLIDER */
#sliderBox {
  position: relative;
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 4.5em;
}

.sval {
  font-size: .75em;
  margin: 1.5em 0 .5em 0;
}

span#s0 {
  float: left;
}

span#s1 {
  float: right;
}

/* SEARCH */

#search {
  width: 92%;
  height: 1em;
  padding: 1em 4% 1em 4%;
  border: none;
}

#searchIcon {
  position: absolute;
  right: 3%;
  top: 55%;
  width: 6%;
  cursor: pointer;
}

.searchBox {
  position: relative;
}

/* HOVERS */

.svgHoverImg {
  max-height: 4em;
  max-width: 4em;
}

.imgBox {
  float: left;
  padding: 1em 0 1em 1em;
  display: inline-block;
  position: relative;
}

.nodeDeets {
  padding: 1em 1em -1em 1em;
  width: 240px;
  position: absolute;
  z-index: 550;
  font-size: .8em;
}

.nodeDeets p {
  display: inline-block;
  position: relative;
  margin: 1em 0 1em 1em;
  top: -.1em;
  line-height: 150%;
  width: 70%;
}

.nodeDeets span {
  color: #C2BEB4;
}

/* CHART */

div#chart {
  position: absolute;
  top: 0;
  left: 25%;
}

svg#chartSVG {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
}

#Dada {
  fill: #E84E00;
}

/* PROGRESS BAR */

#progress {
  position: fixed;
  top: 0;
  left: -6px;
  width: 0%;
  height: 2px;
  background: red;
}

#progress:before,
#progress:after {
  content: "";
  position: absolute;
  height: 2px;
  opacity: 0.6;
  box-shadow: red 1px 0 6px 1px;
  border-radius: 100%;
}

#progress:before {
  width: 20px;
  right: 0;
  clip: rect(-6px, 22px, 14px, 10px);
}

#progress:after {
  width: 180px;
  right: -80px;
  clip: rect(-6px, 90px, 14px, -6px);
}

.links line {
  display: none;
  stroke: #999;
  stroke-opacity: 0;
  stroke-width: 1;
}

.links line.clicked {
  display: inline;
  stroke: #222;
  stroke-opacity: .05;
  stroke-width: .5;
}

.links line.pathBack {
  display: inline;
  stroke: #222;
  stroke-opacity: 1;
  stroke-width: 1;
}

.nodes circle {
  fill: black;
  opacity: .8;
}

.nodes circle.off {
  opacity: .2;
}

/* ROUTING */

div#route {
  width: 100%;
  position: absolute;
  left: -100%;
  bottom: 0px;
}

#downArrow {
  position: absolute;
  left: 50%;
  bottom: 6em;
  z-index: 901;
  background-image: url('../images/dowArrow.svg');
  background-size: auto;
  background-repeat: no-repeat;
  background-position: center bottom;
  width: 5%;
  height: 10em; /* 20 em when there's two rows */
}

div.article {
  display: none;
}

img.articleImg {
  max-height: 6.5em;
  max-width: 5em;
}

.article .imgBox {
  float: left;
  padding: 0 1em 0 0;
  display: inline-block;
  position: relative;
  height: 100%;
}

div.article.pathBack {
  display: block;
  width: 70%;
  height: 8em;
  font-size: .8em;
  padding: 5% 5% 0 5%;
  position: absolute;
  top: 10%;
  left: 10%;
  z-index: 950;
}

div.article.selected {
  border-left: 3px solid #CE8A00 !important;
}

.rightSide {
  /*left: 96% !important;*/
}

.leftSide {
  /*left: -76% !important;*/
}

.current {
  z-index: 999;
}

.back {
  cursor: pointer;
  position: relative;
  bottom: 0em;
  left: 10%;
  z-index: 100;
}

div.article p {
  margin: 0;
  padding: 0;
  line-height: 140%;
}

p.articleTitle {
  /*border-bottom: 1px solid #E1DED8;*/
  margin: 0 0 .25em 0 !important;
  padding: 0 0 .25em 0 !important;
}

div.article a.wiki {
  position: absolute;
  right: 5%;
  bottom: 1em;
  color: #2F67A8;
}

div.article a.wiki:hover, a.wiki:visited {
  color: #4E97BA;
}

#row_d2 {
  height: 10em;
  width: 100%;
  position: relative;
  bottom: 8em;
  overflow: hidden;
}

#row_d1 {
  height: 10em;
  width: 100%;
  position: relative;
  bottom: 8em;
  overflow: hidden;
}

#dest_dada {
  height: 1.5em;
  width: 90%;
  background-color: #D4D0C7;
  color: #252525;
  text-transform: uppercase;
  font-size: .75em;
  text-align: center;
  padding: 2em;
  position: absolute;
  bottom: 2em;
}

/* ROUTING NAVIGATION */

.clicker {
  position: absolute;
  width: 5%;
  height: 100%;
  top: 0%;
  cursor: pointer;
  z-index: 999;
}

.r {
  right: 0%;
}

.l {
  left: 0%;
}

/* PAN AND ZOOM */

#panZoomBox {
  position: fixed;
  z-index: 300;
  width: 8%;
  top: 4%;
  right: 2%;
  display: none;
}

div#pan {
  background-image: url('../images/panBack.svg');
  background-repeat: no-repeat;
  background-position: center;
  margin: 0 auto;
  position: relative;
  width: 5em;
  height: 5em;
}

div#zoom {
  width: 2em;
  margin: 1em auto 0 auto;
}

div#zoom div {
  width: 1em;
  margin: 1em;
  position: relative;
}

div#pan div {
  width: 1em;
  height: 1em;
  background-position: center;
  background-size: 1em 1em;
  position: absolute;
}

div#zoom div {
  width: 2em;
  height: 2em;
  background-repeat: no-repeat;
  background-position: center;
  margin: 0 auto;
}

div#pRight {
  border: none;
  background-image: url('../images/panRight.svg');
  top: 2em;
  right: .5em;
}

div#pLeft {
  border: none;
  background-image: url('../images/panLeft.svg');
  top: 2em;
  left: .5em;
}

div#pUp {
  border: none;
  background-image: url('../images/panUp.svg');
  top: .5em;
  left: 2em;
}

div#pDown {
  border: none;
  background-image: url('../images/panDown.svg');
  margin: 0 auto;
  bottom: .5em;
  left: 2em;
}

div#zIn {
  background-image: url('../images/zoomIn.svg');
}

div#zOut {
  background-image: url('../images/zoomOut.svg');
}

#zoomRect {
  display: none;
}

/* SMALL LABELS */

.smallLabel {
  position: absolute;
  z-index: 500;
  font-size: .8em;
  padding: .5em;
  height: auto;
  overflow: hidden;
  white-space: nowrap;
  text-align: left;
  display: inline-block;
}

/* INTRO */

div#intro {
  width: 25%;
  position: relative;
  margin: 10%;
}

div#intro h1 {
  display: block;
  font-size: 4.5em;
  line-height: 106%;
  letter-spacing: -.04em;
}

div#intro p {
  font-size: 1.25em;
  line-height: 135%;
  margin: 2em 0 2em 0;
}

.button {
  height: 1.2em;
  padding: 1em 1.2em;
  font-size: .8em;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 0 8px 0 rgba(199,199,199,0.50);
  border-radius: 2px;
  display: inline-block;
  margin-right: 1em;
  position: relative;
  z-index: 950;
  cursor: pointer;
}


#explore {
  background: #282828;
  color: #E8E5E0;
}

#method {
  background-color: #F5F4F0;
  color: #282828;
}

/* ABOUT */

#about {
  width: 100%;
  height: auto;
  top: -10px;
  left: -10px;
  padding: 0;
  margin: 0;
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  line-height: 150%;
  color: #f2f2f2;
  z-index: 1000;
  display: none;
}

#about .bg {
  background-color: #282828;
  width: 100%;
  height: 100%;
  opacity: .95;
  position: fixed;
  z-index: 1001;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
}

.aboutText {
  width: 50%;
  max-width: 600px;
  min-width: 324px;
  margin: 4em auto;
  position: relative;
  z-index: 1002;
}

.aboutText a {
  text-decoration: underline;
  color: #f2f2f2;
}

.aboutText img {
  width: 100%;
  min-width: 324px;
  margin: 1em 0 1em 0;
  padding: 0 0 0 0;
}

.aboutText span.hilite {
  font-family: 'Chivo', sans-serif;
}

.aboutText p.sub {
  font-family: 'Chivo', sans-serif;
  font-size: 14px;
  color: #f2f2f2;
  line-height: 120%;
  border-top: 1px solid #f2f2f2;
  margin: 0 0 2em 0;
  padding: 1em 0 0 0;
}

img#close {
  position: fixed;
  z-index: 1002;
  top: 30px;
  right: 30px;
  width: 1.5em;
  height: 1.5em;
  cursor: pointer;
}