/*
 * Global Ignite Variables
 *
 * 1. Ignite custom typography settings for prose (See _prose.scss for explanation).
 *
 * 2. Establish custom spacing variables based on line height to
 *    facilitate vertical rhythm
 *
 * 3. Black/white colour variables
 *
 * 4. Brand visited & focused styles
 *
 * 5. Brand border
 *
 */
/* [1] */
/* [2] */
/* [3] */
/* [4] */
/* [5] */
/*
 * Mixins
 *
 * 1. Intrinsic ratios (eg: Used by _responsive-ratio)
 *
 * 2. Cross browser opacity
 *
 * 3. Font smoothing
 *
 * 4. Px to Em https://web-design-weekly.com/snippets/converts-pixels-to-ems-with-sass/
 *
 * 5. WebKit-style focus
 */
/*
 * Breakpoints
 *
 * Map Bootstrap breakpoints to nice mixins
 */
/*  =========================
    ==== COST OF SMOKING ====
    ========================= */
/* line 4, ../scss/component/_cost.scss */
.tool--cost-calculator {
  margin-bottom: 1.5em;
}
@media (min-width: 992px) {
  /* line 4, ../scss/component/_cost.scss */
  .tool--cost-calculator {
    margin-top: 1.5em;
    max-width: 70%;
    margin: 3em auto;
  }
}
/* line 13, ../scss/component/_cost.scss */
.tool--cost-calculator .tool__section, .tool--cost-calculator.js-calculated .tool__section + .tool__result {
  position: relative;
  top: 0;
  z-index: 1;
  opacity: 1;
  -moz-transition: opacity 0.3s linear;
  -o-transition: opacity 0.3s linear;
  -webkit-transition: opacity 0.3s linear;
  transition: opacity 0.3s linear;
}
/* line 22, ../scss/component/_cost.scss */
.tool--cost-calculator .tool__result, .tool--cost-calculator.js-calculated .tool__section {
  position: absolute;
  z-index: -400;
  opacity: 0;
}
/* line 29, ../scss/component/_cost.scss */
.tool--cost-calculator .tool__section:before {
  content: '';
  height: 100%;
  width: 1px;
  background-color: #4e9d2d;
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 0;
}
/* line 40, ../scss/component/_cost.scss */
.no-borderimage .tool--cost-calculator .tool__section:before {
  height: 95%;
}
/* line 45, ../scss/component/_cost.scss */
.tool--cost-calculator .tool__result:before {
  height: 85%;
}
/* line 49, ../scss/component/_cost.scss */
.tool--cost-calculator .rangeslider {
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  margin-bottom: 15px;
  border: 2px solid #b2c7d2;
}
/* line 56, ../scss/component/_cost.scss */
.tool--cost-calculator .rangeslider__fill {
  background-color: #0033a0;
}
/* line 60, ../scss/component/_cost.scss */
.tool--cost-calculator .rangeslider__handle {
  background-color: #4e9d2d;
  border-color: #4e9d2d;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  z-index: 50;
}
/* line 65, ../scss/component/_cost.scss */
.tool--cost-calculator .rangeslider__handle:after {
  background: #ffffff;
  width: 20px;
  height: 20px;
}
/* line 72, ../scss/component/_cost.scss */
.tool--cost-calculator .tool__lit-cigarette {
  position: absolute;
  border: 1px red solid;
  display: none;
}

/* line 79, ../scss/component/_cost.scss */
.tool__question-axis {
  list-style: none;
  padding: 0;
  margin: 0;
  font-weight: 700;
  font-size: .9em;
  position: relative;
}
/* line 89, ../scss/component/_cost.scss */
.tool__question-axis > li {
  display: inline-block;
  width: 20%;
  text-align: right;
}
/* line 95, ../scss/component/_cost.scss */
.tool__question-axis > li > span {
  display: inline-block;
  -moz-transform: translateX(75%);
  -ms-transform: translateX(75%);
  -webkit-transform: translateX(75%);
  transform: translateX(75%);
}
/* line 100, ../scss/component/_cost.scss */
.tool__question-axis > li:nth-child(1) > span {
  -moz-transform: translateX(38%);
  -ms-transform: translateX(38%);
  -webkit-transform: translateX(38%);
  transform: translateX(38%);
}
/* line 101, ../scss/component/_cost.scss */
.tool__question-axis > li:nth-child(2) > span {
  -moz-transform: translateX(106%);
  -ms-transform: translateX(106%);
  -webkit-transform: translateX(106%);
  transform: translateX(106%);
}
/* line 103, ../scss/component/_cost.scss */
.tool__question-axis > li:nth-child(4) > span {
  -moz-transform: translateX(36%);
  -ms-transform: translateX(36%);
  -webkit-transform: translateX(36%);
  transform: translateX(36%);
}
/* line 104, ../scss/component/_cost.scss */
.tool__question-axis > li:nth-child(5) > span {
  -moz-transform: translateX(10%);
  -ms-transform: translateX(10%);
  -webkit-transform: translateX(10%);
  transform: translateX(10%);
}
/* line 105, ../scss/component/_cost.scss */
.tool__question-axis > li:nth-child(6) > span {
  -moz-transform: translateX(-15%);
  -ms-transform: translateX(-15%);
  -webkit-transform: translateX(-15%);
  transform: translateX(-15%);
}
/* line 108, ../scss/component/_cost.scss */
.tool__question-axis > li:first-child {
  width: auto;
  position: absolute;
}

/* line 114, ../scss/component/_cost.scss */
.tool__question-axis > li ~ li span:after {
  content: '';
  position: absolute;
  width: 2px;
  background-color: #b2c7d2;
  height: 20px;
  top: -35px;
  left: 50%;
}

/* line 124, ../scss/component/_cost.scss */
.tool__question-axis > li:last-child span:after {
  content: none;
}

/* line 129, ../scss/component/_cost.scss */
.tool__question-value {
  display: block;
  text-align: center;
  line-height: 1;
  font-size: 1.8em;
  padding: 10px 0 0 0;
  margin-bottom: 20px;
  z-index: 10;
  background-color: #ffffff;
  position: relative;
}
@media (min-width: 768px) {
  /* line 129, ../scss/component/_cost.scss */
  .tool__question-value {
    font-size: 2.2em;
  }
}

/* line 145, ../scss/component/_cost.scss */
.tool__calculate,
.tool__result .btn {
  margin-left: auto;
  margin-right: auto;
  display: block;
  z-index: 10;
  position: relative;
}

/* line 154, ../scss/component/_cost.scss */
.tool__calculate {
  font-size: 1.2em;
  padding-top: 18px;
}

/* line 159, ../scss/component/_cost.scss */
.tool__result .btn:after {
  content: '';
  width: 20px;
  height: 16px;
  background: url('../images/refresh.svg?1498701117') no-repeat center;
  background-size: cover;
  display: inline-block;
  margin-left: 8px;
  margin-top: -2px;
  vertical-align: middle;
}

/* line 171, ../scss/component/_cost.scss */
.tool__question > h3,
.tool__result > h3 {
  color: #4e9d2d;
  font-style: italic;
  background-color: #ffffff;
  border: 1px solid #4e9d2d;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  display: inline-block;
  text-align: center;
  padding: .6em .8em .5em .8em;
  line-height: 1.3;
  font-size: 18px;
  position: relative;
  left: 50%;
  margin: 0 0 20px 0;
  z-index: 10;
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
@media (min-width: 768px) {
  /* line 171, ../scss/component/_cost.scss */
  .tool__question > h3,
  .tool__result > h3 {
    line-height: 1;
    font-size: 1.2em;
  }
}

/* line 195, ../scss/component/_cost.scss */
.tool__resultset + h3 {
  margin-bottom: 0;
}

/* line 199, ../scss/component/_cost.scss */
.tool__result strong {
  display: block;
  font-size: 42px;
  text-align: center;
  width: 100%;
  margin: 0 auto 0 auto;
  position: absolute;
  z-index: 10;
  top: 50px;
}
@media (min-width: 768px) {
  /* line 199, ../scss/component/_cost.scss */
  .tool__result strong {
    font-size: 64px;
    top: 60px;
  }
}
@media (min-width: 992px) {
  /* line 199, ../scss/component/_cost.scss */
  .tool__result strong {
    top: 56px;
  }
}
@media (min-width: 1200px) {
  /* line 199, ../scss/component/_cost.scss */
  .tool__result strong {
    top: 70px;
  }
}

/* line 224, ../scss/component/_cost.scss */
.tool__result-container {
  position: relative;
  z-index: 10;
  border: 1px transparent solid;
}
/* line 229, ../scss/component/_cost.scss */
.tool__result-container:after {
  content: '';
  width: 290px;
  height: 40px;
  position: absolute;
  -moz-box-shadow: 0 0 80px rgba(31, 44, 51, 0.8);
  -webkit-box-shadow: 0 0 80px rgba(31, 44, 51, 0.8);
  box-shadow: 0 0 80px rgba(31, 44, 51, 0.8);
  left: 50%;
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  top: 65px;
  z-index: -2;
}
@media (min-width: 768px) {
  /* line 229, ../scss/component/_cost.scss */
  .tool__result-container:after {
    height: 80px;
    width: 70%;
    -moz-box-shadow: 0 0 140px rgba(31, 44, 51, 0.8);
    -webkit-box-shadow: 0 0 140px rgba(31, 44, 51, 0.8);
    box-shadow: 0 0 140px rgba(31, 44, 51, 0.8);
  }
}
@media (min-width: 1200px) {
  /* line 229, ../scss/component/_cost.scss */
  .tool__result-container:after {
    width: 62%;
  }
}

/* line 252, ../scss/component/_cost.scss */
.tool__resultset {
  background: url('../images/tool__resultset.svg?1498701117') no-repeat top center;
  background-size: cover;
  margin-left: auto;
  margin-right: auto;
  padding: 26px 20px;
  position: relative;
  z-index: 10;
  width: 99%;
  height: 266px;
}
@media (min-width: 480px) {
  /* line 252, ../scss/component/_cost.scss */
  .tool__resultset {
    width: 370px;
    height: 280px;
    padding: 40px 30px;
  }
}
@media (min-width: 992px) {
  /* line 252, ../scss/component/_cost.scss */
  .tool__resultset {
    width: 406px;
    height: 286px;
  }
}
@media (min-width: 1200px) {
  /* line 252, ../scss/component/_cost.scss */
  .tool__resultset {
    width: 566px;
    height: 400px;
    font-size: 3rem;
  }
}
/* line 280, ../scss/component/_cost.scss */
.tool__resultset dt, .tool__resultset dd {
  display: inline-block;
  border-bottom: 2px dotted #b2c7d2;
  margin-bottom: 8px;
}
@media (min-width: 1200px) {
  /* line 280, ../scss/component/_cost.scss */
  .tool__resultset dt, .tool__resultset dd {
    line-height: 1.7;
  }
}
/* line 290, ../scss/component/_cost.scss */
.tool__resultset dt {
  width: 65%;
  font-style: italic;
  font-weight: 200;
}
/* line 296, ../scss/component/_cost.scss */
.tool__resultset dd {
  width: 33%;
  text-align: right;
  font-weight: bold;
  color: #1f2c33;
  margin-left: -4px;
}