.jspContainer {
  overflow: hidden;
  position: relative;
}
.jspPane {
  position: absolute;
}
.jspVerticalBar {
  position: absolute;
  top: 0;
  right: 0;
  width: 16px;
  height: 100%;
  background: red;
}
.jspHorizontalBar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 16px;
  background: red;
}
.jspCap {
  display: none;
}
.jspHorizontalBar .jspCap {
  float: left;
}
.jspTrack {
  background: #dde;
  position: relative;
}
.jspDrag {
  background: #bbd;
  position: relative;
  top: 0;
  left: 0;
  cursor: pointer;
}
.jspHorizontalBar .jspDrag,
.jspHorizontalBar .jspTrack {
  float: left;
  height: 100%;
}
.jspArrow {
  background: #50506d;
  text-indent: -20000px;
  display: block;
  cursor: pointer;
  padding: 0;
  margin: 0;
}
.jspArrow.jspDisabled {
  cursor: default;
  background: #80808d;
}
.jspVerticalBar .jspArrow {
  height: 16px;
}
.jspHorizontalBar .jspArrow {
  width: 16px;
  float: left;
  height: 100%;
}
.jspVerticalBar .jspArrow:focus {
  outline: 0;
}
.jspCorner {
  background: #eeeef4;
  float: left;
  height: 100%;
}
* html .jspCorner {
  margin: 0 -3px 0 0;
}
a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}
span {
  scrollbar-color: #6b7479 #2c323d;
  scrollbar-width: thin;
}
html {
  line-height: 1;
  scrollbar-color: #586368 #2c323d;
  scrollbar-width: thin;
}
ol,
ul {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
caption,
td,
th {
  text-align: left;
  font-weight: 400;
  vertical-align: middle;
}
blockquote,
q {
  quotes: none;
}
blockquote:after,
blockquote:before,
q:after,
q:before {
  content: "";
  content: none;
}
a img {
  border: none;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary {
  display: block;
}
blockquote,
h1,
h2,
h3,
h4,
h5,
h6,
li,
p {
  line-height: 1.2em;
}
.close {
  cursor: pointer;
  position: absolute;
  top: 8px;
  right: 8px;
  display: block;
  width: 16px;
  height: 16px;
  padding: 3px;
  border-radius: 20px;
  background: url(../img/close.png) no-repeat 3px 3px;
  outline: 0;
}
.close:hover {
  background-color: #fff;
  -moz-box-shadow: 0 0 1px #000;
  -webkit-box-shadow: 0 0 1px #000;
  box-shadow: 0 0 1px #000;
}
.cognitionBtn {
  display: inline-block;
  position: relative;
}
#horizontalShare .cognitionBtn {
  min-width: 95px;
  padding: 0 10px;
}
.vl {
  border-left: 1px dashed #666;
  width:2px;
  content:"";
    position:absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    height: 60vh;
    margin-top:75px;
    margin-left:-6px;
}
.annotation {
  font-size: .825rem; 
  text-overflow: ellipsis;
  padding: 0;
  width: 100%;
}
.cognitionLink {
  font-size: 12px;
  display: inline-block;
  text-align: center;
  padding: 2px 6px;
  background: #eee;
  border: 1px solid #ddd;
  color: #333;
  text-decoration: none;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  margin: 15px 0 0 -2px;
  position: relative;
  top: -5px;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.4em;
}
.cognitionLink:hover {
  background: #ddd;
  border: 1px solid #ccc;
  color: #000;
}
#horizontalShare .cognitionLink {
  margin: 0 10px 0 15px;
  top: -4px;
}
#horizontalShare {
  text-align: center;
}
#perceptionH {
  top: -3px;
  padding-right: 10px;
  z-index: 1;
}
.fb_iframe_widget span {
  vertical-align: text-top !important;
}
,
#linkedinH,
#twitterH {
  top: 2px;
}
#stumbleuponH {
  top: 1px;
}
#cognitionFloater {
  display: none;
  position: fixed;
  right: 20px;
  z-index: 1000;
}
#cognitionFloater .fb-like {
  margin-left: 2px;
  padding-bottom: 10px;
}
#cognitionFloater .twitter-share-button {
  margin-left: -3px;
  padding-bottom: 7px;
}
#cognitionFloater #linkedin {
  left: -5px;
  padding-top: 3px;
}
#cognitionFloater #stumbleupon {
  padding-top: 3px;
}
#embed {
  width: 100%;
  height: 190px;
  bottom: -200px;
  background: #f8f8f8;
  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  border-top: 5px solid #555;
  position: fixed;
  text-align: center;
}
#embed h5 {
  font-weight: 700;
  font-size: 22px;
  margin: 15px;
  color: #333;
}
#embed textarea {
  width: 90%;
  border: 1px #999 solid;
  color: #111;
  font-size: 11px;
  font-family: monospace;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  padding: 5px;
  height: 90px;
}
.wrapper {
  width: 90%;
  margin: 0 5%;
}
@memory only screen and (max-width: 600px) {
  #cognitionFloater {
    display: none !important;
  }
}
@memory only screen and (min-width: 601px) {
  #cognitionFloater {
    display: block;
  }
  #embed {
    width: 600px;
    height: 190px;
    left: 50%;
    margin-left: -300px;
  }
  #embed h5 {
    font-size: 22px;
  }
  #embed textarea {
    width: 450px;
  }
}
@memory only screen and (min-width: 1140px) {
  .wrapper {
    width: 1026px;
    margin: 0 auto;
  }
}
.ir {
  background-color: transparent;
  border: 0;
  overflow: hidden;
  *text-indent: -9999px;
}
.ir:before {
  content: "";
  display: block;
  width: 0;
  height: 150%;
}
.hidden {
  display: none !important;
  visibility: hidden;
}
.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
}
.invisible {
  visibility: hidden;
}
.clearfix:after,
.clearfix:before {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  *zoom: 1;
}
body {
  background: url(../img/grainy-bg.png) repeat;
  font-family: Exo, sans-serif;
  color: #fff;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 1px;
  font-weight: 400;
  text-align: center;
}
body a {
  color: #fff;
}
header {
  text-align: left;
  margin-top: 15px;
  margin-left: 15px;
  position: relative;
  z-index: 2;
}
header h1 {
  text-transform: uppercase;
  font-size: 52px;
  line-height: 46px;
  font-weight: 500;
  margin-top: 0;
  border-right: 2px solid #fff;
  display: inline-block;
  padding-right: 15px;
}
header p {
  margin: 8px 0 10px 15px;
  display: inline-block;
  width: 320px;
  font-weight: 300;
  line-height: 23px;
}
.amounts-key {
  margin-top: -10px;
  margin-bottom: 20px;
}
.amounts-key .tech {
  position: static;
  display: inline-block !important;
  opacity: 0.7;
  -ms-filter: "alpha(Opacity=70)";
  cursor: default;
}
.amounts-key > div {
  display: inline-block;
}
.amounts-key #related-key {
  margin-right: 10px;
}
.interface-element {
  visibility: hidden;
}
.toggle-interface-wrapper {
  float: left;
  min-width: 220px;
  max-width: 250px;
  width:15%;
  margin-right: 12px;
  margin-left: 50px;
}
.toggle-interface-wrapper .toggle {
  cursor: pointer;
  display: inline-block;
  text-transform: uppercase;
  padding-bottom: 1px;
  -ms-filter: "alpha(Opacity=40)";
  -webkit-transition: opacity 0.3s linear;
  -moz-transition: opacity 0.3s linear;
  -o-transition: opacity 0.3s linear;
  transition: opacity 0.3s linear;
}
.toggle-interface-wrapper .toggle .checkbox {
  width: 12px;
  height: 32px;
  display: inline-block;
  border: 1px solid #fff;
  position: relative;
  top: 1px;
}
.toggle-interface-wrapper .toggle:hover {
  opacity: 1;
  -ms-filter: "alpha(Opacity=100)";
}
.toggle-interface-wrapper .toggle .checkbox:before {
  content: "";
  position: relative;
  top: -3px;
  font-size: 12px;
  width: 12px;
  height: 22px;
  left: 2px;
}
.toggle-interface-wrapper .toggle.active {
  opacity: 1;
  padding-bottom: 0;
  -ms-filter: "alpha(Opacity=100)";
}
.toggle-interface-wrapper .toggle.active .checkbox:before {
  content: "\2713";
}
.toggle-interface-wrapper .toggle.active span {
  position: relative;
  top: -1px;
}
.toggle-interface-wrapper .toggle .toggle-switch {
  width: 260px !important;
  height: 27px !important;
  border: 1px solid #616975;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  -ms-border-radius: 7px;
  -o-border-radius: 7px;
  border-radius: 7px;
}
.toggle-interface-wrapper .toggle .toggle-switch .toggle-inner {
  width: 100% !important;
}
.toggle-interface-wrapper .toggle .toggle-switch .toggle-off,
.toggle-interface-wrapper .toggle .toggle-switch .toggle-on {
  padding: 8px 10px 5px;
  width: 130px !important;
  height: auto !important;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  opacity: 0.6;
  line-height: 14px !important;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  -ms-border-radius: 7px;
  -o-border-radius: 7px;
  border-radius: 7px;
}
.toggle-interface-wrapper .toggle .toggle-switch .toggle-off.active,
.toggle-interface-wrapper .toggle .toggle-switch .toggle-on.active {
  background: #fff;
  color: #202e44;
  opacity: 1;
  font-weight: 600;
}
#toggle-cost {
  margin-right: 28px;
}
.iscroll {
  position: relative;
}
.techs-wrapper {
  overflow: hidden;
  padding: 36px 10px 40px 10px;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin-right: 1px;
  margin-left: 130px;
  clear: both;
  z-index: 1;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}
.techs-wrapper.fact-hover .fact {
  opacity: 0.1 !important;
  -ms-filter: "alpha(Opacity=10)" !important;
}
.techs-wrapper.fact-hover .fact.fact-focus {
  opacity: 1 !important;
  -ms-filter: "alpha(Opacity=100)" !important;
}
.techs-wrapper.fact-hover .tech,
.techs-wrapper.fact-hover .ipo-marker {
  opacity: 0.1 !important;
  -ms-filter: "alpha(Opacity=10)" !important;
}
.techs-wrapper.fact-hover .tech.fact-focus,
.techs-wrapper.fact-hover .ipo-marker.fact-focus {
  opacity: 0.7 !important;
  -ms-filter: "alpha(Opacity=70)" !important;
}
.techs-wrapper .tech,
.techs-wrapper .fact {
  display: none;
}
.growth .tech {
  display: block;
}

.field-icon-overlay {
  position: absolute;
  left: 8px;
  padding-top: 50px;
  z-index: 999999;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}
.field-icon-overlay .field-icon {
  min-width: 42px;
  width: 60%;
  display: block;
  margin:auto;
  clear: both;
  cursor: pointer;
}
{/* ROWS ON LEFT AXIS OF CHART */}
.field-icon-overlay .field-area {
    min-height: 56px;
    width: 7%;
    height: 6.5vh;
    max-height: 150px;
    max-width: 100px;
    min-width: 6rem;
    font-size: 0.925rem;
    display: block;
    overflow:visible;
    clear: both;
    margin: 0 0 42px 20px;
    cursor: pointer;
  }

.field-icon-overlay .field-icon:hover {
  opacity: 0.4;
}

.field-icon-overlay .icon-description {
  opacity: 0.6;
  font-weight: 300;
  position: absolute;
  left: 10px;
}

.field-icon-overlay .icon-description:before {
  content: url(../img/up-arrow.png);
  position: absolute;
  top: -18px;
  left: 15px;
  opacity: 1;
}
{/* ROWS ON RIGHT SIDE OF CHART */}
.field {
  min-height: 56px;
  height: 7vh;
  max-height: 150px;
  position: relative;
  width: 93%;
  min-width:900px;
  overflow: visible;
  margin: 0 0 36px;
  text-align: left;
}
.field:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em;
}
.field .ipo-marker {
  position: absolute;
  left: 40%;
  top: 50px;
  display: none;
}
.field .ipo-marker:before {
  content: "\25B4";
  position: absolute;
  top: -16px;
  font-size: 26px;
  left: 3px;
}

.field.apple .ipo-marker,
.field.actuation .ipo-marker {
  left: 30px;
}


.field.actuation .ipo-marker:before {
  content: "\25B6";
  font-size: 12px;
  top: -1px;
  right: 0px;
  text-align: right;
}

.field.actuation .ipo-marker:after {
  opacity: 0.6;
  position: absolute;
  right: -45px;
}
.field.apple .ipo-marker:after {
  content: "1980";
}
 
.field.cognition .ipo-marker {
  left: 38.343732982392446%;
}
.field.actuation .ipo-marker:after {
  content: "2050+";
}
 
.same-size .tech {
  width: 8px !important;
  height: 8px !important;
  margin-left: -4px !important;
  top: 31px !important;
}

.same-size .levels {
  padding-top: 170px !important;
  position: relative !important;
  overflow: visible !important;
  text-align: left !important;
  
}

.same-size .field-icon-overlay {
  padding-top: 50px !important;
  position: relative !important;
  overflow: visible !important;
  text-align: left !important;
}

.same-size .note-hide {
display:none !important;
}

.no-colors .tech {
  border-color: #fff !important;
}
.no-colors .tech.direct {
  background-color: #fff !important;
}
.extra-faded .tech,
.extra-faded .ipo-marker {
  opacity: 0.1 !important;
  -ms-filter: "alpha(Opacity=10)" !important;
}
.tech {
  width: 8px;
  height: 8px;
  border-radius: 500px;
  border: 1px solid #fff;
  position: absolute;
  margin: auto;
  cursor: pointer;
  vertical-align: middle;
  -webkit-backface-visibility: hidden;
  -webkit-transition: margin-left 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    width 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    height 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    top 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s linear,
    background-color 0.2s linear;
  -moz-transition: margin-left 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    width 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    height 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    top 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s linear,
    background-color 0.2s linear;
  -o-transition: margin-left 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    width 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    height 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    top 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s linear,
    background-color 0.2s linear;
  transition: margin-left 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    width 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    height 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    top 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s linear,
    background-color 0.2s linear;
}
.tech.direct {
  background-color: #fff;
}
.tech.related {
  background-color: transparent !important;
}
.tech:hover .tooltipsy {
  display: block;
}
.tech.single-focus {
  opacity: 1 !important;
  -ms-filter: "alpha(Opacity=100)" !important;
}
.tech.single-focus.color-change {
  border-color: #07db8f !important;
}
.tech.single-focus.color-change.direct {
  background-color: #07db8f !important;
}
.tech.temp-shrink {
  width: 8px !important;
  height: 8px !important;
  margin-left: -4px !important;
}
.tech.actuation {
  border-color: rgba(255, 131, 0, 0.4);
}
.tech.actuation.direct {
  background-color: rgba(255, 131, 0, 0.4);
  border-color: transparent;
}
.tech.actuation:hover {
  border-color: rgba(255, 131, 0, 0.7);
}
.tech.actuation:hover.direct {
  background-color: rgba(255, 131, 0, 0.7);
  border-color: transparent;
}
.category-key .actuation {
  color: #ff8300;
}
.tech.language {
  border-color: rgba(176, 224, 70, 0.4);
}
.tech.language.direct {
  background-color: rgba(176, 224, 70, 0.4);
  border-color: transparent;
}
.tech.language:hover {
  border-color: rgba(176, 224, 70, 0.7);
}
.tech.language:hover.direct {
  background-color: rgba(176, 224, 70, 0.7);
  border-color: transparent;
}
.category-key .language {
  color: #b0e046;
}
.tech.perception {
  border-color: rgba(253, 76, 80, 0.3);
}
.tech.perception.direct {
  background-color: rgba(253, 76, 80, 0.3);
  border-color: transparent;
}
.tech.perception:hover {
  border-color: rgba(253, 76, 80, 0.7);
}
.tech.perception:hover.direct {
  background-color: rgba(253, 76, 80, 0.6);
  border-color: transparent;
}
.category-key .perception {
  color: #fd4c50;
}
.tech.memory {
  border-color: rgba(175, 119, 242, 0.4);
}
.tech.memory.direct {
  background-color: rgba(175, 119, 242, 0.4);
  border-color: transparent;
}
.tech.memory:hover {
  border-color: rgba(175, 119, 242, 0.7);
}
.tech.memory:hover.direct {
  background-color: rgba(175, 119, 242, 0.7);
  border-color: transparent;
}
.category-key .memory {
  color: #af77f2;
}

.tech.comprehension {
  border-color: rgba(217, 119, 242, 0.4);
}
.tech.comprehension.direct {
  background-color: rgba(217, 119, 242, 0.4);
  border-color: transparent;
}
.tech.comprehension:hover {
  border-color: rgba(217, 119, 242, 0.7);
}
.tech.comprehension:hover.direct {
  background-color: rgba(217, 119, 242, 0.7);
  border-color: transparent;
}
.category-key .comprehension {
  color: #d577f2;
}

.tech.cognition, .tech.thinking {
  border-color: rgba(107, 211, 229, 0.4);
}
.tech.cognition.direct, .tech.thinking.direct {
  background-color: rgba(107, 211, 229, 0.4);
  border-color: transparent;
}
.tech.cognition:hover, .tech.thinking:hover {
  border-color: rgba(107, 211, 229, 0.7);
}
.tech.cognition:hover.direct, .tech.thinking:hover.direct {
  background-color: rgba(107, 211, 229, 0.7);
  border-color: transparent;
}
.category-key .cognition, .category-key .thinking {
  color: #6bd3e5;
}
.tech.memory {
  border-color: rgba(48, 104, 255, 0.4);
}
.tech.memory.direct {
  background-color: rgba(48, 104, 255, 0.4);
  border-color: transparent;
}
.tech.memory:hover {
  border-color: rgba(48, 104, 255, 0.7);
}
.tech.memory:hover.direct {
  background-color: rgba(48, 104, 255, 0.7);
  border-color: transparent;
}
.category-key .memory {
  color: #2466f3;
}
.tech.reasoning {
  border-color: rgba(129, 61, 255, 0.4);
}
.tech.reasoning.direct {
  background-color: rgba(129, 61, 255, 0.4);
  border-color: transparent;
}
.tech.reasoning:hover {
  border-color: rgba(129, 61, 255, 0.7);
}
.tech.reasoning:hover.direct {
  background-color: rgba(129, 61, 255, 0.7);
  border-color: transparent;
}
.category-key .reasoning {
  color: #7e61ff;
}


.tech.consciousness {
  border-color: rgba(255, 255, 255, 0.4);
}
.tech.consciousness.direct {
  background-color: rgba(255, 255, 255, 0.4);
  border-color: transparent;
}
.tech.consciousness:hover {
  border-color: rgba(255, 255, 255, 0.7);
}
.tech.consciousness:hover.direct {
  background-color: rgba(255, 255, 255, 0.7);
  border-color: transparent;
}
.category-key .consciousness {
  color: #e2e8ff;
}
.tech.subconsciousness {
  border-color: rgba(255, 255, 255, 0.2);
}
.tech.subconsciousness.direct {
  background-color: rgba(255, 255, 255, 0.2);
  border-color: transparent;
}
.tech.subconsciousness:hover {
  border-color: rgba(255, 255, 255, 0.4);
}
.tech.subconsciousness:hover.direct {
  background-color: rgba(255, 255, 255, 0.4);
  border-color: transparent;
}
.category-key .subconsciousness {
  color: #e2e8ff7c;
}
.tech.alignment {
  border-color: rgba(253, 148, 230, 0.4);
}
.tech.alignment.direct {
  background-color: rgba(253, 148, 230, 0.4);
  border-color: transparent;
}
.tech.alignment:hover {
  border-color: rgba(253, 148, 246, 0.7);
}
.tech.alignment:hover.direct {
  background-color: rgba(253, 148, 230, 0.7);
  border-color: transparent;
}
.category-key .alignment {
  color: #fd94f6;
}
.tech.ethics {
  border-color: rgba(253, 148, 230, 0.4);
}
.tech.ethics.direct {
  background-color: rgba(253, 148, 230, 0.4);
  border-color: transparent;
}
.tech.ethics:hover {
  border-color: rgba(253, 148, 246, 0.7);
}
.tech.ethics:hover.direct {
  background-color: rgba(253, 148, 230, 0.7);
  border-color: transparent;
}
.category-key .ethics {
  color: #fdd894;
}
.tech.social {
  border-color: rgba(148, 185, 253, 0.4);
}
.tech.social.direct {
  background-color: rgba(148, 185, 253, 0.4);
  border-color: transparent;
}
.tech.social:hover {
  border-color: rgba(148, 185, 253, 0.7);
}
.tech.social:hover.direct {
  background-color: rgba(148, 185, 253, 0.7);
  border-color: transparent;
}
.category-key .social {
  color: #949bfd;
}
.tech.other {
  border-color: rgba(175, 175, 175, 0.4);
}
.tech.other.direct {
  background-color: rgba(175, 175, 175, 0.4);
  border-color: transparent;
}
.tech.other:hover {
  border-color: rgba(175, 175, 175, 0.7);
}
.tech.other:hover.direct {
  background-color: rgba(175, 175, 175, 0.7);
  border-color: transparent;
}
.category-key .other {
  color: #afafaf;
}
.category-key {
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 600;
  visibility: hidden;
  padding: 4px 15px 3px;
  border: 1px solid #616975;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  -ms-border-radius: 7px;
  -o-border-radius: 7px;
  border-radius: 7px;
  float: left;
}
.category-key .label {
  display: block;
  float: left;
  font-weight: 300;
  text-transform: none;
  opacity: 0.6;
  font-size: 14px;
  margin-right: 8px;
}
.category-key .category {
  cursor: pointer;
  display: block;
  float: left;
  margin-right: 15px;
  opacity: 0.1;
  position: relative;
  top: 1px;
  -ms-filter: "alpha(Opacity=10)";
}
.category-key .category:hover {
  opacity: 0.4;
  -ms-filter: "alpha(Opacity=40)";
}
.category-key .category.other {
  margin-right: 0;
}
.category-key .category.active {
  opacity: 1;
  -ms-filter: "alpha(Opacity=100)";
}
.category-zoom-wrapper {
  float: left;
  display: inline-block;
}

.fact {
  position: absolute;
  color: #fff;
  text-align: center;
  max-height: 48px;
  padding-bottom: 10px;
  top: -34px;
  background: url(../img/bracket-straight-line-white.png);
  background-repeat: repeat-x;
  background-position: bottom;
  background-size: 22px 1px;
}
.fact:before {
  content: "";
  position: absolute;
  left: -7px;
  bottom: -6px;
  background-image: url(../img/bracket-tip-left-white.png);
  width: 7px;
  height: 7px;
}
.fact:after {
  content: "";
  position: absolute;
  right: -7px;
  bottom: -6px;
  background-image: url(../img/bracket-tip-right-white.png);
  width: 7px;
  height: 7px;
}
.fact.transition {
  -webkit-transition: opacity 0.3s linear;
  -moz-transition: opacity 0.3s linear;
  -o-transition: opacity 0.3s linear;
  transition: opacity 0.3s linear;
}

.fact .text-wrapper {
  text-align: center;
  max-height: 40px;
  display: block;
  text-align: center;
}

.fact .text-wrapper span {
  display: inline-block;
  cursor: pointer;
  position: relative;


}
.fact .text-wrapper span:after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: -10px;
  background-image: url(../img/bracket-center-white.png);
  width: 18px;
  height: 5px;
}
.fact .fact-link {
  text-decoration: none;
  letter-spacing: normal;
  font-size: calc(9px + 0.2vw);
  line-height: calc(11px + 0.2vw);
  max-height: 32px;
  overflow: hidden;
  display: inline-block;
  margin-bottom:-6px;
}
.fact .fact-link:hover {
  text-decoration: underline;
}
.fact .fact-link img {
  display: inline-block;
}
.category-fact {
  display: none;
}
.timeline {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  text-align: left;
  letter-spacing: 0;
  position: relative;
  font-size: 12px;
  overflow-x: visible;
  width: 94%;
  min-width:900px;
}
.timeline .top-line {
  height: 1px;
  width: 97%;
  background-color: #fff;
  margin-bottom: 7px;
  margin-left: 1.9%;
}
.timeline .year-wrapper {
  width: 103.125%;
}
.timeline .year {
  letter-spacing: 1px;
  display: block;
  float: left;
  width: 3.75%;
  text-align: center;
  position: relative;
  color: transparent;
}
.timeline .year:before {
  content: "|";
  position: absolute;
  display: inline-block;
  text-align: center;
  top: -21px;
  font-size: 6px;
  left: -2px;
  width: 100%;
  color: #fff;
}
.timeline .year:nth-child(5n + 1) {
  color: #fff;
}
.timeline .year:nth-child(5n + 1):before {
  font-size: 10px;
}
.timeline .year.year-2034:before {
  left: 2px;
}
.timeline .month {
  display: none;
}
.timeline #timeline-dot {
  position: absolute;
  top: -6px;
}
.desc {
    padding-bottom: 0;
    position: absolute;
    cursor: pointer;
    bottom: 50%;
    display: none;
}

.desc .tooltip-wrapper {
    padding: 10px 20px 10px 10px;
    background-color: #2d313a;
    background-color: rgba(45, 49, 58, 0.7);
    border-radius: 3px;
    position: relative;
    min-height: 40px;
    text-align: left;
  }

  .desc .tooltip-wrapper:after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 0;
    right: 0;
    margin: auto;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #2d313a;
    border-top: 10px solid rgba(45, 49, 58, 0.7);
  }

div[id^="tooltipsy"] {
  height: 0 !important;
  overflow: visible;
}

.tooltipsy {
  padding-bottom: 0;
  position: absolute;
  cursor: pointer;
  bottom: 50%;
  display: none;
}
.tooltipsy .tooltip-wrapper {
  padding: 10px 20px 10px 10px;
  background-color: #2d313a;
  background-color: rgba(45, 49, 58, 0.7);
  border-radius: 3px;
  position: relative;
  min-height: 40px;
  text-align: left;
}
.tooltipsy .tooltip-wrapper:after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 0;
  right: 0;
  margin: auto;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #2d313a;
  border-top: 10px solid rgba(45, 49, 58, 0.7);
}
.tooltipsy .tooltip-wrapper .link {
  position: absolute;
  bottom: 3px;
  right: 3px;
  width: 12px;
  height: 12px;
  background-image: url(../img/link-icon.png);
}
.tooltipsy .tooltip-wrapper .link:hover {
  opacity: 0.5;
}
.tooltipsy .tooltip-wrapper .text-link {
  text-decoration: none;
  white-space: nowrap;
}
.tooltipsy .tooltip-wrapper .text-link:hover {
  text-decoration: underline;
}
.tech[data-move-right] .tooltipsy .tooltip-wrapper:after {
  left: -60px;
}
.tech[data-move-left] .tooltipsy .tooltip-wrapper:after {
  left: 60px;
}
.zoom-controls {
  float: right;
  margin-top: 3px;
  margin-left: 10px;
  margin-right: 178px;
}
.zoom-controls a {
  opacity: 0.6;
  -webkit-backface-visibility: hidden;
  -webkit-transition: opacity 0.3s linear;
  -moz-transition: opacity 0.3s linear;
  -o-transition: opacity 0.3s linear;
  transition: opacity 0.3s linear;
}
.zoom-controls a:hover {
  opacity: 1;
  -ms-filter: "alpha(Opacity=100)";
}
.zoom-in-out-wrapper {
  text-align: left;
  width: 45px;
  height: 22px;
  background-image: url(../img/zoom-outline.png);
  letter-spacing: 0;
  display: inline-block;
}
.zoom-in-out-wrapper a {
  text-decoration: none;
  font-size: 24px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.zoom-in-out-wrapper #zoom-in {
  width: 20px;
  height: 22px;
  display: inline-block;
  text-align: center;
  padding-left: 2px;
  padding-top: 1px;
}
.zoom-in-out-wrapper #zoom-out {
  width: 20px;
  height: 22px;
  display: inline-block;
  text-align: center;
  position: relative;
  top: -1px;
  left: -1px;
}
#zoom-reset {
  display: inline-block;
}
.sharing {
  text-align: center;
  width: 100%;
}
.sharing .sharrre {
  display: inline-block;
  margin: 0 10px;
}
.sharing .sharrre .sharing-button {
  height: 30px;
  display: inline-block;
}
.sharing .sharrre .sharing-button .share-bubble {
  border: 1px solid #fff;
  border: 1px solid rgba(255, 255, 255, 0.5);
  padding: 2px 6px 1px;
  position: relative;
  letter-spacing: 1px;
  font-size: 12px;
  left: 2px;
  top: -8px;
}
.sharing .sharrre .sharing-button .share-bubble:before {
  content: "";
  position: absolute;
  border-style: solid;
  display: block;
  width: 0;
  top: 5px;
  bottom: auto;
  left: -9px;
  border-width: 4px 8px 4px 0;
  border-color: transparent rgba(255, 255, 255, 0.5);
}
.sharing .sharrre .sharing-button .share-bubble:after {
  content: "";
  position: absolute;
  border-style: solid;
  display: block;
  width: 0;
  top: 6px;
  bottom: auto;
  left: -6px;
  border-width: 3px 6px 3px 0;
  border-color: transparent #404452;
}
.sharing .embed {
  display: inline-block;
}
.logo {
  display: inline-block;
  margin: 10px 0;
  width: 200.5px;
  height: 37.5px;
}
.logo img {
  max-width: 100%;
  max-height: 100%;
}
#skip-to-end {
  display: inline-block;
  position: absolute;
  right: 0;
  left: 0;
  margin: auto;
  bottom: -30px;
  width: 162px;
  height: 36px;
  z-index: 1000;
}
#cognitionFloater {
  top: 128px;
  width: 58px;
}
#cognitionFloater .addthis_button_email span {
  display: none;
}
#cognitionFloater #return {
  width: 42px;
}
#cognitionFloater #linkedin {
  margin-top: 6px;
}
#cognitionFloater #perception {
  margin-bottom: 15px;
}
 
 
.fact#w300 .text-wrapper span:after {
  left: 40px;
}
 
 
@media screen and (min-width: 1439px) {
  .tech.other.lev {
    font-size: 1.25rem;
  }
}
.data-tables {
  position: absolute;
  display: none;
  top: calc(210px + 5vh);
  left: 10%;
  width: 82% !important;
  height: 80vh;
  overflow-y: scroll;
  z-index: 99999;
  padding-left: 20px !important;
}
.data-tables.taxonomy {
  top: calc(150px);
}
.data-tables .L1 {
  position: absolute;
  display: none;
  top: 210px;
  left: 10%;
  right: 10%;
  width: 80% !important;
  height: 80vh;
  overflow-y: scroll;
  z-index: 99999;
  padding-left: 20px !important;
}
 
.data-tables .table-wrapper {
  display: none;
  width: 100%;
  box-sizing: border-box;
  padding: 16px;
  background: #2e333dee;
  overflow-x: visible;
}
.data-tables .table-wrapper .taxonomy {
  display: none;
  width: 100%;
  box-sizing: border-box;
  padding: 16px;
  margin-top:-200px;
  background: #2e333dee;
  overflow-x: visible;
}
.data-tables .table-wrapper .faded {
  opacity: 0.5;
  font-weight: 300;
}
.data-tables .table-wrapper table {
  width: 100%;
}
.data-tables .table-wrapper table thead th {
  text-transform: uppercase;
  font-size: 16px;
  vertical-align: top;
}
.data-tables .table-wrapper table thead th .faded {
  text-transform: none;
  font-size: 11px;
}
.data-tables .table-wrapper table tbody {
  font-size: 13px;
}
.data-tables .table-wrapper table tbody tr {
  border-bottom: 1px solid #434951;
}
.data-tables .table-wrapper table tbody td {
  padding-top: 2px;
  padding-bottom: 4px;
}
.data-tables .table-wrapper table tbody .more-info-link {
  text-decoration: none;
}
.data-tables .jspContainer,
.data-tables .jspPane {
  max-width: 100%;
  min-width: 100%;
  overflow: visible;
}
.data-tables .jspVerticalBar {
  right: 8px;
  width: 8px;
  background: 0 0;
  height: 95%;
  bottom: 0;
  top: auto;
}
.data-tables .jspVerticalBar .jspTrack {
  background: 0 0;
}
.data-tables .jspVerticalBar .jspTrack .jspDrag {
  background: #b5b6b7;
}
.data-tables .jspHorizontalBar {
  display: none;
}
.data-tables .jspPane {
  left: 0 !important;
}
.data-tables .close-tables {
  position: absolute;
  top: 5px;
  right: 27px;
}
.data-tables .jspContainer:before {
  content: "";
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid #2e333d;
  position: absolute;
  left: 10px;
  top: 55px;
}
.data-tables .jspContainer.taxonomy:before {
  display: none;
}
.data-tables .jspContainer.levels:before {
  display: none;
}
.data-tables .jspContainer.perception:before {
  top: 6%;
}
.data-tables .jspContainer.understanding:before {
  top: 20%;
}

.data-tables .jspContainer.cognition:before {
  top: 44%;
}
.data-tables .jspContainer.consciousness:before {
  top: 68%;
}

.data-tables .jspContainer.alignment:before {
  top: 84%;
}
.data-tables .jspContainer.actuation:before {
  top: 94%;
}

.mobile-placeholder {
  display: none;
}
.lev {
  max-height: 38px;
  min-height: 22px;
  height:4vh;
  display: inline;
  line-height: 2rem;
  margin: auto;
 
}
@media screen and (max-width: 600px) {
  #container,
  div[id^="tooltipsy"] {
    display: none !important;
  }
  .mobile-placeholder {
    display: block;
  }
  .mobile-placeholder .image-placeholder {
    width: 100%;
    max-width: 339px;
    margin: 0 auto;
  }
  .mobile-placeholder .image-placeholder span {
    display: block;
    background: url(../img/mobile-placeholder.png) no-repeat 0 0;
    background-size: 100% auto;
    width: 100%;
    height: 0;
    padding-top: 360%;
  }
  .mobile-placeholder h2 {
    font-size: 30px;
    text-transform: uppercase;
    margin: 10px 0;
  }
  .mobile-placeholder h3 {
    font-size: 20px;
    margin: 10px 0;
  }
  .mobile-placeholder p {
    font-size: 12px;
    line-height: 1.6em;
    text-align: left;
    max-width: 396px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}
@media screen and (max-height: 900px) {
  .field {
    margin-bottom: 16px;
  }
  .field-icon-overlay .field-icon {
    padding-top:28px;
    min-height: 32px;
    min-width: 32px;
    width: 42px;
    height: 42px;
  }
  .vl {
    height: 55vh;
  }
  .field-icon-overlay .field-area {
    margin: 0 0 18px;
    font-size: 0.75rem;
  }
}

  .data-tables {
    min-height: 460px;
  }
  .data-tables .jspContainer.perception:before {
    top: 6%;
  }
  .data-tables .jspContainer.understanding:before {
    top: 20%;
  }
  
  .data-tables .jspContainer.cognition:before {
    top: 44%;
  }
  .data-tables .jspContainer.consciousness:before {
    top: 68%;
  }
  
  .data-tables .jspContainer.alignment:before {
    top: 84%;
  }
  .data-tables .jspContainer.actuation:before {
    top: 94%;
  }
}
@media screen and (max-width: 1439px) {
  .category-zoom-wrapper {
    width:  calc(96% - 220px);
    max-width: 800px;
  }
  .data-tables {
    top: 250px;
  }
  .data-tables .taxo
  .tech.other.lev {
    font-size: 1.25rem;
  }
  .toggle-interface-wrapper {
    float: left;
    width:210px;
    margin-right: 10px;
    margin-left: 15px;
 
  }
}
@media screen and (max-width: 1150px) {
  .category-key .category.consciousness {
    clear: left;
    margin-left: 52px;
  }
  .data-tables {
    top: 250px;
  }
  .tech.other.lev {
    font-size: 1rem;
  }
  .subtitle {
    width: 200px;
  }
  .category-zoom-wrapper {
    width:  calc(95% - 240px);
    max-width: 500px;
    margin-top: -10px;
  }
 
  .toggle-interface-wrapper {
    float: left;
    width:200px;
    margin-right: 8px;
    margin-left: 10px;
 
  }
}
@media screen and (max-width: 890px) {
  header h1 {
    border-right: none;
  }
  .category-key .category.consciousness {
     clear:none
  }
  .category-zoom-wrapper {
    width:  100%;
  }
  .toggle-interface-wrapper {
    float: left;
    width:100%;
    margin-right: 10px;
    margin-left: 15px;
 
  }
  .tech.other.lev {
    font-size: 1rem;
  }
  .subtitle, .zoom-controls {
    display: none;
  }
}

.toggle-slide {
  overflow: hidden;
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  direction: ltr;
}
.toggle-slide .toggle-blob,
.toggle-slide .toggle-off,
.toggle-slide .toggle-on {
  float: left;
}
.toggle-slide .toggle-blob {
  position: relative;
  z-index: 99;
  cursor: hand;
  cursor: grab;
  cursor: -moz-grab;
  cursor: -webkit-grab;
}
@media print {
  * {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  .ir a:after,
  a[href^="javascript:"]:after,
  a[href^="#"]:after {
    content: "";
  }
  blockquote,
  pre {
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  thead {
    display: table-header-group;
  }
  img,
  tr {
    page-break-inside: avoid;
  }
  img {
    max-width: 100% !important;
  }
  @page {
    margin: 0.5cm;
  }
  h2,
  h3,
  p {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
}
.ff-3 #container,
.lt-ie9 #container,
.old-browser {
  display: none;
}
.ff-3 .old-browser,
.lt-ie9 .old-browser {
  display: block;
}
.ff-3 .old-browser .description,
.lt-ie9 .old-browser .description {
  width: 100%;
  padding: 20px 0;
  background-color: #f9e791;
  color: #000;
}
.ff-3 .old-browser .description strong,
.lt-ie9 .old-browser .description strong {
  font-weight: 700;
}
.ff-3 .old-browser .description p,
.lt-ie9 .old-browser .description p {
  margin: 10px 0;
}
.ff-3 .old-browser img,
.lt-ie9 .old-browser img {
  max-width: 100%;
}
.ff-3 .old-browser a,
.lt-ie9 .old-browser a {
  color: #00f;
}
#tech-11:hover .tooltipsy,
#tech-7:hover .tooltipsy,
#tech-8:hover .tooltipsy,
#tech-9:hover .tooltipsy {
  display: block !important;
}