body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  width: 100%;
  max-width: 943px;
  margin: 0 auto;
}
.interactiveContainer {
  float: left;
  width: 98%;
  margin: 20px 1% 0;
  margin-top: 20px;
  position: relative;
}
.introScreen {
  position: absolute;
  left: 0;
  top: 0;
  width: 80%;
  height: 600px;
  background: #233A4D;
  color: #eee;
  padding: 0 10%;
  z-index: 20;
}
.introText {
  margin-top: 50px;
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
}
.byline {
  font-weight: 400;
  color: #DBBE6E;
  margin: 10px 0;
  font-size: 15px;
}
.topArea {
  float: left;
  width: 100%;
  margin-bottom: 20px;
}
.theChart {
  float: left;
  width: 100%;
  height: 500px;
  position: relative;
}
.chartArea {
  float: left;
  width: 100%;
  height: 100%;
  position: relative;
}
form {
  position: absolute;
  right: 10px;
  top: 10px;
}

rect.node {
  float: left;
  border: solid 1px #fff;
  font: 10px sans-serif;
  line-height: 12px;
  overflow: hidden;
  position: absolute;
}
rect {
  stroke: white;
  stroke-width: 2;
  opacity: 0.8;
}
rect:hover {
  stroke: black;
  stroke-width: 1;
  opacity: 1 !important;
  scale: 1.4;
}
#lost {
  fill: black;
}
.words {
  fill: black;
}
.bigTip {
  float: left;
  width: 100%;
  text-align: center;
  font-size: 21px;
  font-weight: 300;
}
.tooltip {
  display: none;
  pointer-events: none;
  position: absolute;
  background: #fff;
  z-index: 10;
  padding: 8px;
  font-size: 13px;
  width: 230px;
  -webkit-transition: all 100ms linear;
  -moz-transition: all 100ms linear;
  -o-transition: all 100ms linear;
  -ms-transition: all 100ms linear;
  transition: all 100ms linear;
  box-shadow: 2px 2px 12px 1px #aaa;
  -moz-box-shadow: 2px 2px 12px 1px #aaa;
  opacity: 0.95;
}
.tiptitle {
  width: 100%;
  text-align: center;
  float: left;
  margin-bottom: 10px;
  font-size: 17px;
  font-weight: 100;
}
.tiplabel {
  float: left;
  width: 45%;
  margin-right: 4%;
  font-size: 12px;
  text-transform: uppercase;
  text-align: right;
}
.tipMetric {
  float: left;
  width: 45%;
  margin-left: 4%;
  font-size: 13px;
  font-weight: bold;
  text-align: left;
  margin-bottom: 4px;
}
.annnotation {
  display: none;
  position: absolute;
  background: #fff;
  z-index: 10;
  padding: 2%;
  width: 91%;
  margin: 2.5%;
  height: 80px;
  left: 0;
  bottom: 0;
  -webkit-transition: all 100ms linear;
  -moz-transition: all 100ms linear;
  -o-transition: all 100ms linear;
  -ms-transition: all 100ms linear;
  transition: all 100ms linear;
  box-shadow: 2px 2px 12px 1px #aaa;
  -moz-box-shadow: 2px 2px 12px 1px #aaa;
  opacity: 0.8;
}
/*
.publishing {
  stroke-width: 2;
  stroke: rgb(255,0,85);
  fill: rgba(255,0,85,0.1)
}
.automation {
  stroke-width: 2;
  stroke: rgb(0,47,255);
  fill: rgba(0,47,255,0.1)
}
.computer {
  stroke-width: 2;
  stroke: rgb(255,205,3);
  fill: rgba(255,205,3,0.1)
}
.creatives {
  stroke-width: 2;
  stroke: rgb(117,27,9);
  fill: rgba(117,27,9,0.1)
}
.telecom {
  stroke-width: 2;
  stroke: rgb(44,232,44);
  fill: rgba(44,232,44,0.1)
  }*/
  .highlighted {
    opacity: 1;
  }
  .chapterTitle {
    float: left;
    width: 100%;
    margin-right: 20px;
    font-weight: 100;
    letter-spacing: 2px;
    font-size: 20px;
    text-align: center;
  }
  .aHead {
    text-transform: uppercase;
    color: #b20022;
    font-weight: bold;
    font-size: 11px;
    margin-bottom: 8px;
  }
  .annotation {
    float: left;
    position: fixed;
    left: 0px;
    bottom: 0%;
    top: auto;
    width: 96%;
    font-size: 12px;
    padding: 2%;
    background: white;
    z-index: 10;
    font-weight: 300;
    box-shadow: 2px 2px 8px 2px #777;
    -moz-box-shadow: 2px 2px 8px 2px #777;
    display: none;
  }
  .stepperContainer {
    float: right;
    width: 100%;
    margin-right: 13px;
  }
  .stepper, .stepperIntro {
    float: right;
    position: relative;
    width: 110px;
    text-align: center;
    cursor: pointer;
    background: #353333;
    padding: 10px 0;
    font-family: "Helvetica", Arial, sans-serif;
    text-transform: uppercase;
    color: #ddd;
    font-size: 12px;
    height: 12px;
    margin-left: 5px;
    margin-top: 5px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  .lStepper { float: left; margin-left: 20px; opacity: 0.1;}
  .stepperIntro { background: #ccc; color: black; margin-top: 20px;}
  .stepper:hover {
    color: #aaa;
  }
  .triangleR {
    position: absolute;
    right: -10px;
    top: 0;
    width: 0; 
    height: 0; 
    border-top: 16px solid transparent;
    border-bottom: 16px solid transparent;
    border-left: 10px solid #353333;
  }
  .triangleL {
    position: absolute;
    left: -10px;
    top: 0;
    width: 0; 
    height: 0; 
    border-top: 16px solid transparent;
    border-bottom: 16px solid transparent; 
    border-right:10px solid #353333;
  }
  .stepperIntro .triangleR {
    border-left:10px solid #ccc;
  }
  .colorbar {
    float: left;
    width: 100%;
    margin-top: 10px;
    display: none;
  }
  .colorButton {
    float: left;
    padding: 4px 10px;
    background: #eee;
    font-size: 11px;
    text-transform: uppercase;
    margin-bottom: -19px;
    color: #aaa;
    cursor: pointer;
  }
  .colorButton:hover {
    color: #b20022;
  }
  .colorButton.selected {
    background: #bbb;
    color: #000;
  }
  .colorImage {
    float: right;
    margin-bottom: -20px;
  }
  @media screen and (min-width: 650px) {
    .colorbar {
      display: block;
    }
    .chapterTitle {
      float: left;
      width: auto;
      max-width: 55%;
      margin-right: 3%;
      font-weight: 100;
      letter-spacing: 2px;
      font-size: 22px;
      margin-top: 8px;
      text-align: left;
    }
    .stepperContainer {
      float: right;
      width: auto;
      max-width: 50%;
    }
    .lStepper { float: right; margin-left: 0;}
    .annotation {
      float: left;
      position: absolute;
      left: 55%;
      top: 30%;
      bottom: auto;
      width: 40%;
      font-size: 13px;
    }
    .introText {
      margin-top: 50px;
      font-weight: 300;
      font-size: 22px;
      line-height: 30px;
    }
    .byline { 
      font-size: 22px;
    }
  }
  .colorBlock {
    float: left; 
    width: 33.3333333%;
    padding: 3px 10px;
    color: white;
    font-weight: 100;
    text-shadow: 0px 0px 7px #000;
    opacity: 0.3;
    font-size: 13px;
    text-align: center;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 100ms linear;
    -moz-transition: all 100ms linear;
    -o-transition: all 100ms linear;
    -ms-transition: all 100ms linear;
    transition: all 100ms linear;

  }
  .colorBlock.unselected {
    opacity: 0.1;
  }
  .colorBlock.selected {
    opacity: 1;
  }
  @media screen and (max-width: 400px) {
    .colorBlock {
      width: 50%;
    }
    .colorBlock:last-child {
      width: 100%;
    }
  }