/* Welcome to Compass.
 * In this file you should write your main styles. (or centralize your imports)
 * Import this file using the following HTML or equivalent:
 * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
/* line 5, ../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: baseline;
}

/* line 22, ../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
html {
  line-height: 1;
}

/* line 24, ../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
ol, ul {
  list-style: none;
}

/* line 26, ../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* line 28, ../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

/* line 30, ../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
q, blockquote {
  quotes: none;
}
/* line 103, ../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

/* line 32, ../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
a img {
  border: none;
}

/* line 116, ../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

/* line 17, ../sass/screen.scss */
html {
  font-family: arial, sans-serif;
}

/* line 20, ../sass/screen.scss */
.x.axis {
  font-size: 8px;
}

/* line 23, ../sass/screen.scss */
body {
  background-color: #2C2C2C;
}
/* line 27, ../sass/screen.scss */
body.all .shape.container line, body.all .shape.container path {
  opacity: 0.75;
}
/* line 29, ../sass/screen.scss */
body.all .shape.container line.all, body.all .shape.container path.all {
  opacity: 1;
  fill-opacity: 0.75;
}
/* line 38, ../sass/screen.scss */
body.pvn .shape.container line, body.pvn .shape.container path {
  opacity: 0.25;
}
/* line 40, ../sass/screen.scss */
body.pvn .shape.container line.pvn, body.pvn .shape.container path.pvn {
  opacity: 1;
  fill-opacity: 0.75;
}
/* line 49, ../sass/screen.scss */
body.ltn .shape.container line, body.ltn .shape.container path {
  opacity: 0.25;
}
/* line 51, ../sass/screen.scss */
body.ltn .shape.container line.ltn, body.ltn .shape.container path.ltn {
  opacity: 1;
  fill-opacity: 0.75;
}
/* line 60, ../sass/screen.scss */
body.mbpn .shape.container line, body.mbpn .shape.container path {
  opacity: 0.25;
}
body.heroin .shape.container line, body.heroin .shape.container path {
  opacity: 0.25;
}

/* line 62, ../sass/screen.scss */
body.mbpn .shape.container line.mbpn, body.mbpn .shape.container path.mbpn {
  opacity: 1;
  fill-opacity: 0.75;
}
body.heroin .shape.container line.heroin, body.heroin .shape.container path.heroin {
  opacity: 1;
  fill-opacity: 0.75;
}
/* line 70, ../sass/screen.scss */
* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/* line 73, ../sass/screen.scss */
h3 {
  font-size: 30px;
  padding: 10px 0;
  text-align: center;
  pointer-events: none;
  text-transform: uppercase;
}

/* line 80, ../sass/screen.scss */
.line {
  fill: none;
  stroke-width: 3;
}
/* line 83, ../sass/screen.scss */
.line.all {
  stroke: #FF56F6;
}
.line.heroin {
  stroke: #ffff26;
  opacity:1;

}
.line.other {
  stroke: #FFA64D;
  opacity:1;

}
.line.unknown {
  stroke: #BFFF00;
  opacity:1;

}
.line.opiods {
  stroke: #FF2116;
  opacity:1;
}

.line.totn {
  stroke: #4DD2FF;
  opacity:1;
}

/* line 86, ../sass/screen.scss */
.line.pvn {
  stroke: #f00;
}
/* line 89, ../sass/screen.scss */
.line.ltn {
  stroke: #FF8200;
}
/* line 92, ../sass/screen.scss */
.line.mbpn {
  stroke: #29BECE;
}
/* line 95, ../sass/screen.scss */
.line.upto12 {
  stroke: #EEFF52;
}
/* line 98, ../sass/screen.scss */
.line.upto15 {
  stroke: #FF52AB;
}
/* line 101, ../sass/screen.scss */
.line.over15 {
  stroke: #5DA346;
}

/* line 106, ../sass/screen.scss */
.introduced .intro.slide {
  pointer-events: none;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-name: slideOutUp;
  animation-name: slideOutUp;
  height: 0;
  overflow: hidden;
  -moz-transition: height 0.1s 0.9s;
  -o-transition: height 0.1s 0.9s;
  -webkit-transition: height 0.1s;
  -webkit-transition-delay: 0.9s;
  transition: height 0.1s 0.9s;
}
/* line 123, ../sass/screen.scss */
.introduced #content section {
  height: 100vh !important;
  overflow: visible;
  -moz-transition: height 0.1s 2s;
  -o-transition: height 0.1s 2s;
  -webkit-transition: height 0.1s;
  -webkit-transition-delay: 2s;
  transition: height 0.1s 2s;
}
/* line 128, ../sass/screen.scss */
.introduced #content section:first-child h3 {
  height: 20px;
  -moz-transition: height 0.1s 2s;
  -o-transition: height 0.1s 2s;
  -webkit-transition: height 0.1s;
  -webkit-transition-delay: 2s;
  transition: height 0.1s 2s;
}

/* line 136, ../sass/screen.scss */
.intro.slide {
  background-color: rgba(44, 44, 44, 0.75);
  font-family: 'Lato', sans-serif;
  height: 110vh;
  position: relative;
  text-align: center;
  z-index: 1000;
}
/* line 143, ../sass/screen.scss */
.intro.slide:before {
  content: '';
  display: inline-block;
  height: 90vh;
  vertical-align: middle;
  width: 1%;
}
/* line 150, ../sass/screen.scss */
.intro.slide .contain {
  display: inline-block;
  vertical-align: middle; 
  width: 95%;
}
/* line 155, ../sass/screen.scss */
.intro.slide .icon {
  height: 100px;
  /*margin: 0 auto;*/
  /*width: 100px;*/
  height: 100px;
  margin: 0 auto 50px;
  width: 190px;
  display: block;
}
/* line 159, ../sass/screen.scss */
.intro.slide .icon polygon, .intro.slide .icon line, .intro.slide .icon circle, .intro.slide .icon path {
  fill: none;
  stroke: #fff;
  stroke-width: 2;
}
/* line 166, ../sass/screen.scss */
.intro.slide h1 span {
  display: block;
}
/* line 169, ../sass/screen.scss */
.intro.slide h1 .white {
  color: #fff;
  font-size: 3.5vw;
  font-weight: bold;
  padding-bottom: 10px;
  font-family: 'Lato', arial;
  text-transform: uppercase;
}
/* line 175, ../sass/screen.scss */
.intro.slide h1 .purple {
  color: #F52B2B;
  font-size: 2.4vw;
  font-weight: bold;
  padding-bottom: 10px;
  font-family: 'Lato', arial;
  text-transform: uppercase;
}
/* line 182, ../sass/screen.scss */
.intro.slide h5 {
  color: #fff;
  font-size: 16px;
  font-weight: 700;
}

/* line 188, ../sass/screen.scss */
#removeIntro {
  bottom: 60px;
  cursor: pointer;
  left: 50%;
  margin-left: -50px;
  max-width: 100px;
  position: fixed;
  width: 50%;
}
/* line 196, ../sass/screen.scss */
#removeIntro p {
  color: #ddd;
  line-height: 2;
  -moz-transition: line-height 0.25s;
  -o-transition: line-height 0.25s;
  -webkit-transition: line-height 0.25s;
  transition: line-height 0.25s;
}
/* line 201, ../sass/screen.scss */
#removeIntro polyline {
  fill: none;
  stroke: #ddd;
  stroke-width: 1;
  -moz-transition: stroke-width 0.25s;
  -o-transition: stroke-width 0.25s;
  -webkit-transition: stroke-width 0.25s;
  transition: stroke-width 0.25s;
}
/* line 208, ../sass/screen.scss */
#removeIntro:hover polyline {
  stroke-width: 2;
  -moz-transition: stroke-width 0.25s;
  -o-transition: stroke-width 0.25s;
  -webkit-transition: stroke-width 0.25s;
  transition: stroke-width 0.25s;
}
/* line 212, ../sass/screen.scss */
#removeIntro:hover p {
  line-height: 3;
  -moz-transition: line-height 0.25s;
  -o-transition: line-height 0.25s;
  -webkit-transition: line-height 0.25s;
  transition: line-height 0.25s;
}

/* line 218, ../sass/screen.scss */
footer {
  bottom: 20px;
  color: #ddd;
  font-family: Arial, sans-serif;
  font-size: 14px;
  left: 0;
  position: fixed;
  text-align: center;
  width: 100%;
}
/* line 227, ../sass/screen.scss */
footer a {
  color: #ddd;
}
/* line 229, ../sass/screen.scss */
footer a:hover {
  color: #fff;
}

/* line 234, ../sass/screen.scss */
.area {
  fill-opacity: 0.35;
  stroke-width: 0;
  -moz-transition: fill-opacity 0.5s;
  -o-transition: fill-opacity 0.5s;
  -webkit-transition: fill-opacity 0.5s;
  transition: fill-opacity 0.5s;
}
/* line 239, ../sass/screen.scss */
.area:hover {
  fill-opacity: 0.65;
  -moz-transition: fill-opacity 0.5s;
  -o-transition: fill-opacity 0.5s;
  -webkit-transition: fill-opacity 0.5s;
  transition: fill-opacity 0.5s;
}

/* line 244, ../sass/screen.scss */
.d3-tip {
  opacity: 0 !important;
  -moz-transition: opacity 0.5s;
  -o-transition: opacity 0.5s;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
}

/* line 251, ../sass/screen.scss */
.steps {
  margin-top: -75px;
  position: fixed;
  right: 40px;
  top: 50%;
  z-index: 1;
  cursor: pointer;
}
/* line 258, ../sass/screen.scss */
.steps .step {
  background-color: rgba(200, 200, 200, 0.3);
  position: absolute;
  width: 10px;
  height: 10px;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  border: 5px solid transparent;
  margin: 2px;
  display: block;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
/* line 269, ../sass/screen.scss */
.steps .step.all {
  background-color: rgba(238, 238, 238, 0.3);
}
/* line 271, ../sass/screen.scss */
.steps .step.all.current {
  background-color: rgba(238, 238, 238, 0.85);
}
/* line 275, ../sass/screen.scss */
.steps .step.pvn {
  background-color: rgba(255, 0, 0, 0.3);
}
/* line 277, ../sass/screen.scss */
.steps .step.pvn.current {
  background-color: rgba(255, 0, 0, 0.85);
}
/* line 281, ../sass/screen.scss */
.steps .step.ltn {
  background-color: rgba(255, 130, 0, 0.3);
}
/* line 283, ../sass/screen.scss */
.steps .step.ltn.current {
  background-color: rgba(255, 130, 0, 0.85);
}
/* line 287, ../sass/screen.scss */
.steps .step.mbpn {
  background-color: rgba(41, 190, 206, 0.3);
}
.steps .step.heroin {
  background-color: rgba(255,255,255, 0.3);
}

/* line 289, ../sass/screen.scss */
.steps .step.mbpn.current {
  background-color: rgba(41, 190, 206, 0.85);
}
.steps .step.heroin.current {
  background-color: rgba(255,255,255, 0.85);
}
/* line 293, ../sass/screen.scss */
.steps .step.upto12 {
  background-color: rgba(238, 255, 82, 0.3);
}
/* line 295, ../sass/screen.scss */
.steps .step.upto12.current {
  background-color: rgba(238, 255, 82, 0.85);
}
/* line 299, ../sass/screen.scss */
.steps .step.upto15 {
  background-color: rgba(255, 82, 171, 0.3);
}
/* line 301, ../sass/screen.scss */
.steps .step.upto15.current {
  background-color: rgba(255, 82, 171, 0.85);
}
/* line 305, ../sass/screen.scss */
.steps .step.over15 {
  background-color: rgba(93, 163, 70, 0.3);
}
/* line 307, ../sass/screen.scss */
.steps .step.over15.current {
  background-color: rgba(93, 163, 70, 0.85);
}
/* line 311, ../sass/screen.scss */
.steps .step span {
  color: rgba(200, 200, 200, 0);
  display: block;
  margin-right: 10px;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  right: 100%;
  text-align: right;
  top: -5px;
  -moz-transition: all ease-in-out;
  -o-transition: all ease-in-out;
  -webkit-transition: all ease-in-out;
  transition: all ease-in-out;
  width: 0;
}
/* line 324, ../sass/screen.scss */
.steps .step.current, .steps .step:hover {
  width: 16px;
  height: 16px;
  -webkit-border-radius: 100%;
  border-radius: 100%;
  margin: -1px 0 0 -1px;
}
/* line 330, ../sass/screen.scss */
.steps .step.current span, .steps .step:hover span {
  color: rgba(200, 200, 200, 0.85);
  -moz-transition: all ease-in-out;
  -o-transition: all ease-in-out;
  -webkit-transition: all ease-in-out;
  transition: all ease-in-out;
  width: 150px;
}
/* line 336, ../sass/screen.scss */
.steps .step.current {
  background-color: rgba(200, 200, 200, 0.85);
}

/* line 341, ../sass/screen.scss */
#graph {
  height: 90vh;
  left: 4%;
  position: fixed;
  top: 5vh;
  width: 92%;
}
/* line 347, ../sass/screen.scss */
#graph #patternall rect {
  fill: #eeeeee;
}
/* line 350, ../sass/screen.scss */
#graph #patternpvn rect {
  fill: #d92626;
}
/* line 353, ../sass/screen.scss */
#graph #patternltn rect {
  fill: #d98126;
}
/* line 356, ../sass/screen.scss */
#graph #patternmbpn rect {
  fill: #4ea0a9;
}
#graph #patternheroin rect {
  fill: #4ea0a9;
}
/* line 359, ../sass/screen.scss */
#graph #patternupto12 rect {
  fill: #d9e56c;
}
/* line 362, ../sass/screen.scss */
#graph #patternupto15 rect {
  fill: #e56caa;
}
/* line 365, ../sass/screen.scss */
#graph #patternover15 rect {
  fill: #6f8069;
}

/* line 369, ../sass/screen.scss */
.slidesUp {
  left: 0;
  opacity: 0;
  position: fixed;
  text-align: center;
  top: 35%;
  width: 100%;
  z-index: -1;
}
/* line 377, ../sass/screen.scss */
.slidesUp p {
  color: #ddd;
  display: inline-block;
  font-family: Arial, sans-serif;
  line-height: 1.35;
  max-width: 950px;
  padding: 10px;
  width: 90%;
}

/* line 387, ../sass/screen.scss */
h4 {
  color: #ddd;
  font-family: 'Lato', serif;
  font-size: 35px;
  font-weight: 700;
  letter-spacing: 2px;
  pointer-events: none;
  text-align: center;
  -moz-transition: opacity 0.5s, top 0.5s;
  -o-transition: opacity 0.5s, top 0.5s;
  -webkit-transition: opacity 0.5s, top 0.5s;
  transition: opacity 0.5s, top 0.5s;
  width: 100%;
}

/* line 399, ../sass/screen.scss */
.tipper line {
  stroke: rgba(200, 200, 200, 0.3);
  stroke-width: 1;
  stroke-dasharray: 10,5;
}

/* line 405, ../sass/screen.scss */
#content {
  margin: 25px;
}
/* line 407, ../sass/screen.scss */
#content section {
  height: 0vh;
  overflow: hidden;
}
/* line 410, ../sass/screen.scss */
#content section:first-child {
  height: 1000vh;
  overflow: visible;
}
/* line 413, ../sass/screen.scss */
#content section:first-child h3 {
  height: 1000vh;
}
/* line 418, ../sass/screen.scss */
#content section.allOfThem h3 {
  height: 200vh;
}
/* line 422, ../sass/screen.scss */
#content section:first-child {
  margin-top: 200vh;
}

/* line 428, ../sass/screen.scss */
.animated .slidesUp {
  opacity: 1;
  top: 6%;
  -moz-transition: opacity 0.5s, top 0.5s;
  -o-transition: opacity 0.5s, top 0.5s;
  -webkit-transition: opacity 0.5s, top 0.5s;
  transition: opacity 0.5s, top 0.5s;
}

/* line 434, ../sass/screen.scss */
.tipper {
  opacity: 0;
}
/* line 436, ../sass/screen.scss */
.tipper.active {
  opacity: 1;
}
/* line 440, ../sass/screen.scss */
.tipper .hover.rects rect {
  fill: rgba(255, 255, 255, 0);

}
/* line 444, ../sass/screen.scss */
.tipper .texts {
  fill: #fff;
  font-weight: 700;
  font-family: Arial, sans-serif;
  font-size: 2vw;
  letter-spacing: 0px;
  text-transform: uppercase !important;
  pointer-events: none;
}
/* line 451, ../sass/screen.scss */
.tipper .texts .kil {
  fill: #6c6c6c;
  font-family: arial;
  font-weight: 100;
  font-size: 2vw;
  /***padding:135px !important;***/
}
/* line 458, ../sass/screen.scss */
.tipper .label {
  fill-opacity: 0.95;
}
/* line 460, ../sass/screen.scss */
.tipper .label.all {
  fill: #FF56F6;

}
/* line 463, ../sass/screen.scss */

/* THESE ARE THE LEFT SIDE COLOR BLOCKS ON THE TOOL TIPS */
.tipper .label.heroin {
  fill: none;

}

.tipper .label.other {
  fill: none;

}

.tipper .label.unknown {
  fill: none;

}
/* line 466, ../sass/screen.scss */
.tipper .label.opiods{
  fill: none;

}
.tipper .label.totn{
  fill: none;

}
/* line 469, ../sass/screen.scss */
.tipper .label.mbpn {
  fill: #29BECE;
}
/* line 472, ../sass/screen.scss */
.tipper .label.upto12 {
  fill: #EEFF52;
}
/* line 475, ../sass/screen.scss */
.tipper .label.upto15 {
  fill: #FF52AB;
}
/* line 478, ../sass/screen.scss */
.tipper .label.over15 {
  fill: #5DA346;
}
/* line 482, ../sass/screen.scss */
.tipper rect.filtered {
  fill: none; /* THIS IS THE BACKGROUND OF THE HOVER TOOL TIPS BOXES */
  stroke-width: 1;
  width:125px;
  
}

/* line 529, ../sass/screen.scss */
tspan {
  font-family: 'Arial';
}

/* line 532, ../sass/screen.scss */
tspan.estimate {
  font-size: 12px;
  padding-left:80px;
  text-anchor: middle;
  fill: #fff;
}

/* line 536, ../sass/screen.scss */
tspan.low, tspan.high {
  fill: #777;
  font-size: 8px;
  letter-spacing: 0;
}

/* line 541, ../sass/screen.scss */
tspan.low {
  text-anchor: start;
}

/* line 544, ../sass/screen.scss */
tspan.high {
  text-anchor: end;
}

/* line 547, ../sass/screen.scss */
tspan.est {
  font-size: 12px;
  fill: #fff;
  text-align: left !important;
  
}

/* line 550, ../sass/screen.scss */
line {
  fill: none;
  shape-rendering: crispEdges;
  stroke: #aaa;
  stroke-width: 1;
}

/* line 556, ../sass/screen.scss */
.axis {
  fill: #A7C0B8;
  font-family: 'Arial', sans-serif;
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.5px;
}
/* line 562, ../sass/screen.scss */
.axis path {
  fill: none;
  shape-rendering: crispEdges;
  stroke: #aaa;
  stroke-width: 1;
}

@-webkit-keyframes slideOutUp {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    visibility: hidden;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
}
@keyframes slideOutUp {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    visibility: hidden;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
}