@charset "UTF-8";
@font-face {
  font-family: 'MagallanesCondLight';
  src: url("../fonts/MagallanesCondLight.eot");
  src: local("☺"), url("../fonts/MagallanesCondLight.woff") format("woff"), url("../fonts/MagallanesCondLight.ttf") format("truetype"), url("../fonts/MagallanesCondLight.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'AchilleFYL-Black';
  src: url("../fonts/AchilleFYL-Black.eot");
  src: local("☺"), url("../fonts/AchilleFYL-Black.woff") format("woff"), url("../fonts/AchilleFYL-Black.ttf") format("truetype"), url("../fonts/AchilleFYL-Black.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}


/*! normalize.css v3.0.1 | MIT License | git.io/normalize */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:0 0}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{-moz-box-sizing:border-box;box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}

/* ==========================================================================
   RESET SMR styles
========================================================================== */
.w1{
  max-width: 100%;
}
#header{
  border-bottom: none;
}

#nav ul a::before, #nav ul a::after {
  -webkit-box-sizing:content-box;
  -moz-box-sizing:content-box;
  box-sizing:content-box;
}


/* ==========================================================================
   Demo
========================================================================== */
::-ms-tooltip {
  display: none;
}

body.modal-open {
  overflow: hidden;
}

#overlay {
  display: none;
  position: fixed;
  left: 50%;
  top: 50%;
  width: 700px;
  margin-left: -350px;
  margin-top: -230px;
  height: 460px;
  padding: 5px;
  border: 2px solid black;
  background-color: #ffffff;
  z-index: 1002;
  overflow: hidden;
  -webkit-transform: scale(0.7);
  transform: scale(0.7);
  opacity: 0;
}
#overlay .close {
  display: block;
  position: absolute;
  right: 15px;
  top: 15px;
  color: white;
  z-index: 10;
  font-size: 10px;
  font-size: 1rem;
  padding: 0 10px 5px;
  cursor: pointer;
  background: url(../images/demo/btn-diag-white.png) no-repeat center bottom;
}

#fade {
  display: block;
  position: fixed;
  left: 0%;
  top: 0%;
  background-color: black;
  opacity: 0;
  width: 100%;
  height: 100%;
  z-index: 1001;
}

#overlay, #fade {
  -webkit-transition: all 300ms;
  transition: all 300ms;
}

body.modal-open #fade {
  opacity: .4;
}

body.modal-open #overlay {
  -webkit-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}

.treatment-selector h1, .treatment-selector h2, .treatment-selector h3, .treatment-selector h4, .treatment-selector h5, .treatment-selector h6 {
  color: black;
}
.treatment-selector .steps {
  margin: 0;
  padding: 5px;
  *zoom: 1;
  background: #e95f2b;
  position: relative;
}
.treatment-selector .steps:before, .treatment-selector .steps:after {
  content: "";
  display: table;
}
.treatment-selector .steps:after {
  clear: both;
}
.treatment-selector .steps li {
  padding: 5px 20px;
  font-size: 10px;
  font-size: 1rem;
  display: block;
  float: left;
  width: 250px;
  margin: 0;
  color: white;
  opacity: 0.5;
}
.treatment-selector .steps li:first-child {
  margin-right: 10px;
}
.treatment-selector .steps li.active {
  opacity: 1;
}
.treatment-selector .steps-wrap {
  position: relative;
  height: 406px;
  overflow: hidden;
}
.treatment-selector .step {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: white;
  display: none;
  /* li:not(.selected){
      color:#dfdfdf;
  } */
}
.treatment-selector .step p {
  font-size: 10px;
  font-size: 1rem;
}
.treatment-selector .step ul {
  padding: 0;
  margin: 0;
}
.treatment-selector .step li {
  font-size: 12px;
  font-size: 1.2rem;
  font-family: "AchilleFYL-Black";
  list-style: none;
  cursor: pointer;
}
.treatment-selector .step li .radiobutton {
  border: 4px solid #414141;
  border-radius: 20px;
  height: 21px;
  width: 21px;
  overflow: hidden;
  padding: 2px 0 0 2px;
  display: inline-block;
  margin-right: 10px;
  vertical-align: text-top;
}
.treatment-selector .step li .radiobutton:after {
  content: '';
  background: transparent;
  display: block;
  border-radius: 10px;
  width: 9px;
  height: 9px;
}
.treatment-selector .step li.selected .radiobutton:after {
  background: #25a79b;
}
.treatment-selector .step ul.pristine li {
  color: #414141;
}
.treatment-selector .step .cta {
  color: #25a79b;
}
.treatment-selector .step .col1, .treatment-selector .step .col2 {
  float: left;
  padding: 10px;
}
.treatment-selector .step .col1 {
  width: 38%;
  margin-right: 2%;
}
.treatment-selector .step .col2 {
  width: 60%;
  padding-top: 30px;
}
.treatment-selector .step.active {
  display: block;
}
.treatment-selector .modalTitle {
  color: black;
  margin-bottom: 0;
}
.treatment-selector .message b {
  display: block;
  color: #25a79b;
}
.treatment-selector .message {
  line-height: 1.2;
  margin-top: 50px;
}
.treatment-selector .message h5 {
  color: #25a79b;
  font-size: 10px;
  font-size: 1rem;
  margin-bottom: 10px;
}
.treatment-selector .instructions {
  min-height: 100px;
}
.treatment-selector .cost h4, .treatment-selector .selTreatment h4 {
  margin: 5px 0 0;
  font-size: 14px;
  font-size: 1.4rem;
}
.treatment-selector .cost p, .treatment-selector .selTreatment p {
  color: #a1a1a1;
  margin-bottom: 0;
}
.treatment-selector .cost-and-change {
  position: absolute;
  top: 202px;
}
.treatment-selector .changeTreatment {
  color: #e95f2b;
  background: url(../images/demo/btn-diag-orange.png) no-repeat center 80%;
  height: 34px;
  margin-top: 30px;
  width: 133px;
  cursor: pointer;
}
.treatment-selector .costForTreatment {
  overflow: hidden;
  margin-bottom: 50px;
}
.treatment-selector .costForTreatment > div {
  float: left;
  width: 40%;
}
.treatment-selector .costForTreatment > div:first-child {
  border-right: 1px solid #dfdfdf;
  margin: 0 5% 0 0;
  padding-right: 5%;
}
.treatment-selector .costForTreatment p {
  margin: 0;
  padding: 15px 0 5px 0;
}
.treatment-selector .costForTreatment h4 {
  color: #25a79b;
  font-size: 18px;
  font-size: 1.8rem;
  margin: 0;
}
.treatment-selector footer {
  clear: both;
  background: #f9f2ed;
  text-align: center;
  position: absolute;
  bottom: 0;
  width: 100%;
}
.treatment-selector .next-btn, .treatment-selector .back-btn {
  display: inline-block;
  width: 40%;
  padding: 10px;
  background: white;
  font-family: "AchilleFYL-Black";
  color: #25a79b;
  border: 4px solid #25a79b;
  margin: 10px;
  text-align: center;
  cursor: pointer;
}
.treatment-selector .next-btn[disabled="disabled"], .treatment-selector .back-btn[disabled="disabled"] {
  border-color: #a1a1a1;
  color: #a1a1a1;
}

.share-modal#overlay {
  width: 550px;
  margin-left: -275px;
  margin-top: -175px;
  height: 350px;
}
.share-modal header {
  background: #e95f2b;
  padding: 10px 5px 5px 20px;
}
.share-modal header p {
  color: white;
  text-align: left;
  margin: 0;
  padding: 0;
}
.share-modal h1 {
  color: #25a79b;
  font-size: 18px;
  font-size: 1.8rem;
}
.share-modal h1, .share-modal p {
  text-align: center;
}
.share-modal p {
  font-size: 12px;
  font-size: 1.2rem;
  padding: 0 50px;
}
.share-modal p .close {
  top: 11px !important;
}
.share-modal .icons {
  margin-left: 50px;
}
.share-modal .icon {
  width: 100px;
  display: inline-block;
  margin: 0 20px;
  background: url(../images/demo/btn-diag-gray.png) repeat-x center bottom;
  cursor: pointer;
}
.share-modal .icon a {
  padding: 80px 10px 20px 10px;
  display: block;
  background-size: 60% 60%;
  background-position: center top;
  background-repeat: no-repeat;
  text-align: center;
  color: #414141;
}
.share-modal .icon-facebook a {
  background-image: url(../images/demo/facebook.svg);
}
.share-modal .icon-email a {
  background-image: url(../images/demo/email.svg);
}
.share-modal .icon-linkedin a {
  background-image: url(../images/demo/linkedin.svg);
}

yard-selector {
  position: relative;
  width: 90%;
  height: 58px;
  margin: 40px auto 0 auto;
  display: block;
}
yard-selector .track, yard-selector .progress {
  width: 100%;
  height: 20px;
  border-radius: 10px;
  position: absolute;
  top: 7px;
}
yard-selector .track {
  background: #a1a1a1;
  z-index: 1;
}
yard-selector .progress {
  background: #414141;
  z-index: 2;
}
yard-selector .radio-buttons {
  position: relative;
  z-index: 3;
}
yard-selector radio-button {
  position: absolute;
  font-size: 12px;
  width: 32px;
  margin-left: -16px;
  text-align: center;
}
yard-selector radio-button[disabled] .button {
  border-color: #a1a1a1;
  cursor: default;
}
yard-selector radio-button[disabled] .button:before {
  border-color: #a1a1a1;
}
yard-selector radio-button.selected .button {
  background-color: #25a79b;
}
yard-selector radio-button.selected .button:after {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  background: transparent;
  top: 3px;
  left: 3px;
  border: 3px solid white;
  border-radius: 30px;
}
yard-selector radio-button .label {
  display: block;
  margin-top: 10px;
}
yard-selector radio-button:nth-of-type(1) {
  left: 0;
}
yard-selector radio-button:nth-of-type(2) {
  left: 25%;
}
yard-selector radio-button:nth-of-type(3) {
  left: 50%;
}
yard-selector radio-button:nth-of-type(4) {
  left: 75%;
}
yard-selector radio-button:nth-of-type(5) {
  right: 0;
  margin-right: -16px;
  margin-left: 0;
}
yard-selector .button {
  width: 32px;
  height: 32px;
  border: 2px solid white;
  border-radius: 32px;
  background: white;
  cursor: pointer;
  position: relative;
}
yard-selector .button:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 28px;
  height: 28px;
  border: 4px solid #414141;
  border-radius: 32px;
  cursor: pointer;
  position: relative;
}

.btn {
  display: inline-block;
  vertical-align: top;
  background: #fff;
  border: 2px solid #25a79b;
  padding: 20px 15px 35px;
  color: #25a79b;
  letter-spacing: 1px;
  cursor: pointer;
  font: 16px/20px 'AchilleFYL-Black';
  position: relative;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  overflow: hidden;
  text-align: center;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  box-shadow: 1px 1px rgba(0, 0, 0, 0.01), 2px 2px rgba(0, 0, 0, 0.01), 3px 3px rgba(0, 0, 0, 0.01), 4px 4px rgba(0, 0, 0, 0.01), 5px 5px rgba(0, 0, 0, 0.01), 6px 6px rgba(0, 0, 0, 0.01), 7px 7px rgba(0, 0, 0, 0.01), 8px 8px rgba(0, 0, 0, 0.01), 9px 9px rgba(0, 0, 0, 0.01), 10px 10px rgba(0, 0, 0, 0.01), 11px 11px rgba(0, 0, 0, 0.01), 12px 12px rgba(0, 0, 0, 0.01), 13px 13px rgba(0, 0, 0, 0.01), 14px 14px rgba(0, 0, 0, 0.01), 15px 15px rgba(0, 0, 0, 0.01), 16px 16px rgba(0, 0, 0, 0.01), 17px 17px rgba(0, 0, 0, 0.01), 18px 18px rgba(0, 0, 0, 0.01), 19px 19px rgba(0, 0, 0, 0.01), 20px 20px rgba(0, 0, 0, 0.01), 21px 21px rgba(0, 0, 0, 0.01), 22px 22px rgba(0, 0, 0, 0.01), 23px 23px rgba(0, 0, 0, 0.01), 24px 24px rgba(0, 0, 0, 0.01), 25px 25px rgba(0, 0, 0, 0.01), 26px 26px rgba(0, 0, 0, 0.01), 27px 27px rgba(0, 0, 0, 0.01), 28px 28px rgba(0, 0, 0, 0.01), 29px 29px rgba(0, 0, 0, 0.01), 30px 30px rgba(0, 0, 0, 0.01), 31px 31px rgba(0, 0, 0, 0.01), 32px 32px rgba(0, 0, 0, 0.01), 33px 33px rgba(0, 0, 0, 0.01), 34px 34px rgba(0, 0, 0, 0.01), 35px 35px rgba(0, 0, 0, 0.01), 36px 36px rgba(0, 0, 0, 0.01), 37px 37px rgba(0, 0, 0, 0.01), 38px 38px rgba(0, 0, 0, 0.01), 39px 39px rgba(0, 0, 0, 0.01), 40px 40px rgba(0, 0, 0, 0.01), 41px 41px rgba(0, 0, 0, 0.01), 42px 42px rgba(0, 0, 0, 0.01), 43px 43px rgba(0, 0, 0, 0.01), 44px 44px rgba(0, 0, 0, 0.01), 45px 45px rgba(0, 0, 0, 0.01), 46px 46px rgba(0, 0, 0, 0.01), 47px 47px rgba(0, 0, 0, 0.01), 48px 48px rgba(0, 0, 0, 0.01), 49px 49px rgba(0, 0, 0, 0.01), 50px 50px rgba(0, 0, 0, 0.01);
}

.btn:after {
  content: '/////////////////////////////////////////////////////////';
  position: absolute;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  left: 10%;
  right: 10%;
  overflow: hidden;
  bottom: 16px;
  color: #25a79b;
  line-height: 8px;
  white-space: nowrap;
  font-family: "Times New Roman";
  font-style: italic;
}

.btn:not([disabled]):hover {
  color: #fff;
  border-color: #fff;
  background: #25a79b;
  text-decoration: none;
  box-shadow: 1px 1px rgba(0, 0, 0, 0.02), 2px 2px rgba(0, 0, 0, 0.02), 3px 3px rgba(0, 0, 0, 0.02), 4px 4px rgba(0, 0, 0, 0.02), 5px 5px rgba(0, 0, 0, 0.02), 6px 6px rgba(0, 0, 0, 0.02), 7px 7px rgba(0, 0, 0, 0.02), 8px 8px rgba(0, 0, 0, 0.02), 9px 9px rgba(0, 0, 0, 0.02), 10px 10px rgba(0, 0, 0, 0.02), 11px 11px rgba(0, 0, 0, 0.02), 12px 12px rgba(0, 0, 0, 0.02), 13px 13px rgba(0, 0, 0, 0.02), 14px 14px rgba(0, 0, 0, 0.02), 15px 15px rgba(0, 0, 0, 0.02), 16px 16px rgba(0, 0, 0, 0.02), 17px 17px rgba(0, 0, 0, 0.02), 18px 18px rgba(0, 0, 0, 0.02), 19px 19px rgba(0, 0, 0, 0.02), 20px 20px rgba(0, 0, 0, 0.02), 21px 21px rgba(0, 0, 0, 0.02), 22px 22px rgba(0, 0, 0, 0.02), 23px 23px rgba(0, 0, 0, 0.02), 24px 24px rgba(0, 0, 0, 0.02), 25px 25px rgba(0, 0, 0, 0.02), 26px 26px rgba(0, 0, 0, 0.02), 27px 27px rgba(0, 0, 0, 0.02), 28px 28px rgba(0, 0, 0, 0.02), 29px 29px rgba(0, 0, 0, 0.02), 30px 30px rgba(0, 0, 0, 0.02), 31px 31px rgba(0, 0, 0, 0.02), 32px 32px rgba(0, 0, 0, 0.02), 33px 33px rgba(0, 0, 0, 0.02), 34px 34px rgba(0, 0, 0, 0.02), 35px 35px rgba(0, 0, 0, 0.02), 36px 36px rgba(0, 0, 0, 0.02), 37px 37px rgba(0, 0, 0, 0.02), 38px 38px rgba(0, 0, 0, 0.02), 39px 39px rgba(0, 0, 0, 0.02), 40px 40px rgba(0, 0, 0, 0.02), 41px 41px rgba(0, 0, 0, 0.02), 42px 42px rgba(0, 0, 0, 0.02), 43px 43px rgba(0, 0, 0, 0.02), 44px 44px rgba(0, 0, 0, 0.02), 45px 45px rgba(0, 0, 0, 0.02), 46px 46px rgba(0, 0, 0, 0.02), 47px 47px rgba(0, 0, 0, 0.02), 48px 48px rgba(0, 0, 0, 0.02), 49px 49px rgba(0, 0, 0, 0.02), 50px 50px rgba(0, 0, 0, 0.02);
}

.btn:not([disabled]):hover:after {
  color: #fff;
  left: 27%;
  right: 27%;
}

.btn[disabled] {
  color: #a1a1a1;
  border-color: #a1a1a1;
}

/* ==========================================================================

========================================================================== */
html {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

*, *:before, *:after {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  height: 100%;
  font-size: 100%;
}

body {
  min-height: 100%;
  line-height: 1;
  font-family: "MagallanesCondLight";
  position: relative;
  counter-reset: listItem stickyNavCounter;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "AchilleFYL-Black";
  font-weight: normal;
  color: white;
  margin: 20px 0;
}

h1, h2, h3, h4, h5, h6, p, li {
  line-height: 1.3;
}

h1 {
  font-size: 42px;
  font-size: 4.2rem;
}

h2 {
  font-size: 32px;
  font-size: 3.2rem;
}

h3 {
  font-size: 22px;
  font-size: 2.2rem;
}

h4 {
  font-size: 18px;
  font-size: 1.8rem;
}

p, li {
  font-size: 14px;
  font-size: 1.4rem;
  margin: 0 0 16px 0;
  margin: 0 0 1rem 0;
  font-weight: normal;
}

a {
  text-decoration: none;
}

h3 span {
  border-width: 3px;
  border-style: solid;
  border-color: white;
  border-radius: 40px;
  font-size: 12px;
  font-size: 1.2rem;
  padding: 10px 10px 5px 12px;
  display: inline-block;
}

.red {
  color: red !important;
}

.mobile {
  display: none;
}

.emphasis {
  background: #414141;
  padding: 5px 10px;
}
.emphasis sup {
  font-size: 16px;
  vertical-align: top;
  margin-top: 15px;
  display: inline-block;
}

.em_orange {
  background: #e95f2b;
  color: white !important;
  padding: 5px 10px;
}

.underline {
  border-bottom: 2px solid #e95f2b;
}

.chapter article, .header-asphalt {
  padding: 0 10px;
}

.header-asphalt {
  position: relative;
  background: url(../images/bg-intro.png);
  overflow: hidden;
  text-align: center;
}
.header-asphalt article {
  padding: 30px 0;
}
.header-asphalt h1 {
  width: 100%;
  max-width: 900px;
  line-height: 1.2;
  margin: 0 auto;
  text-align: center;
  padding: 90px 0;
}

/*
.make-a-plan{
    border: 2px solid $green;
    display: inline-block;
    margin: 40px auto;
    position: relative;
    @include font-size(1.4);
    font-family: $headlineFont;
    color: $green !important;
    text-align: center;
    text-decoration: none;
    background:white;
    box-shadow: 0 0 25px rgba(33,33,33,0.6);
    cursor: pointer;

    box-shadow: 1px 1px rgba(0, 0, 0, 0.01),
    2px 2px rgba(0, 0, 0, 0.09),
    3px 3px rgba(0, 0, 0, 0.09),
    4px 4px rgba(0, 0, 0, 0.09),
    5px 5px rgba(0, 0, 0, 0.09),
    6px 6px rgba(0, 0, 0, 0.09),
    7px 7px rgba(0, 0, 0, 0.09),
    8px 8px rgba(0, 0, 0, 0.09),
    9px 9px rgba(0, 0, 0, 0.09),
    10px 10px rgba(0, 0, 0, 0.08),
    11px 11px rgba(0, 0, 0, 0.08),
    12px 12px rgba(0, 0, 0, 0.08),
    13px 13px rgba(0, 0, 0, 0.08),
    14px 14px rgba(0, 0, 0, 0.08),
    15px 15px rgba(0, 0, 0, 0.08),
    16px 16px rgba(0, 0, 0, 0.08),
    17px 17px rgba(0, 0, 0, 0.08),
    18px 18px rgba(0, 0, 0, 0.08),
    19px 19px rgba(0, 0, 0, 0.08),
    20px 20px rgba(0, 0, 0, 0.04),
    21px 21px rgba(0, 0, 0, 0.04),
    22px 22px rgba(0, 0, 0, 0.04),
    23px 23px rgba(0, 0, 0, 0.04),
    24px 24px rgba(0, 0, 0, 0.04),
    25px 25px rgba(0, 0, 0, 0.04),
    26px 26px rgba(0, 0, 0, 0.04),
    27px 27px rgba(0, 0, 0, 0.04),
    28px 28px rgba(0, 0, 0, 0.04),
    29px 29px rgba(0, 0, 0, 0.04),
    30px 30px rgba(0, 0, 0, 0.01),
    31px 31px rgba(0, 0, 0, 0.01),
    32px 32px rgba(0, 0, 0, 0.01),
    33px 33px rgba(0, 0, 0, 0.01),
    34px 34px rgba(0, 0, 0, 0.01),
    35px 35px rgba(0, 0, 0, 0.01),
    36px 36px rgba(0, 0, 0, 0.01),
    37px 37px rgba(0, 0, 0, 0.01),
    38px 38px rgba(0, 0, 0, 0.01),
    39px 39px rgba(0, 0, 0, 0.01),
    40px 40px rgba(0, 0, 0, 0.01),
    41px 41px rgba(0, 0, 0, 0.01),
    42px 42px rgba(0, 0, 0, 0.01),
    43px 43px rgba(0, 0, 0, 0.01),
    44px 44px rgba(0, 0, 0, 0.01),
    45px 45px rgba(0, 0, 0, 0.01),
    46px 46px rgba(0, 0, 0, 0.01),
    47px 47px rgba(0, 0, 0, 0.01),
    48px 48px rgba(0, 0, 0, 0.01),
    49px 49px rgba(0, 0, 0, 0.01),
    50px 50px rgba(0, 0, 0, 0.01);

    &:after{
        background: url(../images/demo/border_green.jpg) repeat-x white;
        content: '';
        height: 10px;
        bottom: 10px;
        display: block;
        margin-top: 15px;
    }
}

.make-a-plan.mobile{
    background-position: center 90px;
} */
.disclaimer {
  color: #333;
  font-size: 10px;
  font-size: 1rem;
}

.browsehappy {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1000000;
  background: #e95f2b;
}
.browsehappy p {
  width: 400px;
  height: 400px;
  margin: 200px auto;
}
.browsehappy p a {
  text-decoration: underline;
}

.align-center {
  text-align: center;
}

.green {
  color: #25a79b !important;
}

.orange {
  color: #e95f2b !important;
}

.orange-bar {
  background: #e95f2b;
  overflow: hidden;
}
.orange-bar h3 {
  display: none;
}

.roadway {
  background: url(../images/demo/roadway.svg) no-repeat center center #25a79b;
  background-size: cover;
}
.roadway h1 {
  text-align: center;
  font-size: 18px;
  font-size: 1.8rem;
  margin: 0 auto;
  line-height: 1.3em;
}

.num-circles {
  padding: 0;
}
.num-circles li {
  list-style: none;
  position: relative;
  padding: 0 20px 0 45px;
}
.num-circles li:before {
  counter-increment: listItem;
  content: counter(listItem);
  top: 0;
  left: -15px;
  background: white;
  position: absolute;
  border: 5px solid #25a79b;
  display: block;
  padding: 7px 6px 5px 8px;
  line-height: 1;
  border-radius: 40px;
  height: 40px;
  width: 40px;
  text-align: center;
  overflow: hidden;
  font-family: "AchilleFYL-Black";
}

.stickyNav {
  background: #e95f2b;
  overflow: hidden;
}
.stickyNav header {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 10px;
}
.stickyNav h4 {
  float: left;
  margin: 0 20px 0 0;
  padding: 0;
}
.stickyNav li {
  display: inline-block;
  color: white;
  font-family: "AchilleFYL-Black";
  padding: 10px 10px 6px 45px;
  margin: 0 10px 0 0;
  line-height: 1;
  letter-spacing: 1px;
  font-size: 10px;
  font-size: 1rem;
}
.stickyNav li:before {
  color: white;
  background: transparent;
  counter-increment: stickyNavCounter;
  content: counter(stickyNavCounter);
  top: 0;
  left: 0;
  position: absolute;
  border: 2px solid white;
  display: block;
  padding: 7px 2px 2px 4px;
  line-height: 1;
  border-radius: 30px;
  height: 30px;
  width: 30px;
  text-align: center;
  overflow: hidden;
  font-family: "AchilleFYL-Black";
}
@media (max-width: 768px) {
  .stickyNav li {
    font-size: 7px;
    font-size: 0.7rem;
  }
  .stickyNav li:before {
    padding: 8px 2px 2px 3px;
  }
}

.sticky {
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 100;
  border-top: 0;
}

.stickyNav.sticky + div {
  padding-top: 60px;
}

#chapter_1, #chapter_2 {
  background: #f9f2ed;
}

.mobile, .chapter .mobile {
  display: none !important;
}

.desktop {
  display: block;
}

.chapter {
  position: relative;
  *zoom: 1;
  /* .col1, .col2{
      margin: 0 1%;
  } */
}
.chapter article {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  position: relative;
  *zoom: 1;
  padding: 60px 0;
  position: relative;
  z-index: 2;
  overflow-x: hidden;
}
.chapter article:before, .chapter article:after {
  content: "";
  display: table;
}
.chapter article:after {
  clear: both;
}
.chapter article h1, .chapter article h2, .chapter article h3, .chapter article h4, .chapter article h5, .chapter article h6 {
  color: #414141;
}
.chapter:before, .chapter:after {
  content: "";
  display: table;
}
.chapter:after {
  clear: both;
}
.chapter .col1, .chapter .col2 {
  /* float: left;
  position: relative;
  width: 48%; */
}
.chapter .col1 img, .chapter .col2 img {
  display: block;
}

.chapter > header {
  height: 175px;
  border-top: 10px solid #414141;
  border-bottom: 10px solid #414141;
  background: #25a79b;
  /*  overflow: hidden; */
}
.chapter > header > div {
  max-width: 960px;
  margin: 0 auto;
  position: relative;
  height: 155px;
  /* overflow: hidden; */
}
.chapter > header h1 {
  font-size: 140px;
  font-size: 14rem;
  margin-top: -20px;
}

/* ==========================================================================

========================================================================== */
#chapter_1 article {
  padding-bottom: 0;
}
#chapter_1 .col1 {
  float: left;
  width: 39.5833333333%;
  max-width: 400px;
  margin: 0 1.0416666667%;
}
#chapter_1 .col1 img {
  display: block;
  width: 80%;
  margin-left: 10%;
}
#chapter_1 .col2 {
  float: left;
  width: 56.25%;
  max-width: 560px;
  margin: 0 1.0416666667%;
}

#chapter_2 .col1, #chapter_2 .col2 {
  padding-top: 40px;
}
#chapter_2 .col1 {
  float: left;
  width: 39.5833333333%;
  max-width: 400px;
  margin: 0 1.0416666667%;
  margin-left: 9.375%;
}
#chapter_2 .col2 {
  float: left;
  width: 47.9166666667%;
  max-width: 480px;
  margin: 0 1.0416666667%;
  *zoom: 1;
  padding-left: 80px;
}
#chapter_2 .col2:before, #chapter_2 .col2:after {
  content: "";
  display: table;
}
#chapter_2 .col2:after {
  clear: both;
}
@media screen and (max-device-width: 961px) {
  #chapter_2 .col2 {
    padding-left: 0;
  }
}
#chapter_2 .row {
  *zoom: 1;
}
#chapter_2 .row:before, #chapter_2 .row:after {
  content: "";
  display: table;
}
#chapter_2 .row:after {
  clear: both;
}
#chapter_2 .row-2 {
  margin-top: 60px;
}

.asphalt {
  background: url(../images/bg-intro.png);
  color: white;
}
.asphalt h1, .asphalt h2, .asphalt h3, .asphalt h4, .asphalt h5, .asphalt h6, .asphalt p, .asphalt a {
  color: inherit;
}
.asphalt a.btn {
  color: #25a79b;
}

/* ==========================================================================
demo app
========================================================================== */
#year-progress {
  position: relative;
  width: 180px;
  height: 30px;
}
#year-progress:before {
  content: '';
  display: block;
  position: absolute;
  height: 5px;
  margin-top: -2px;
  background: #414141;
  width: 100%;
  top: 50%;
}
#year-progress .year-marker {
  background: #f9f2ed;
  width: 30px;
  height: 30px;
  border-radius: 30px;
  border: 5px solid #414141;
  position: absolute;
}
#year-progress .year-marker:before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  border: 2px solid white;
  border-radius: 20px;
}
#year-progress .year-marker:nth-child(2) {
  left: 50%;
  margin-left: -15px;
}
#year-progress .year-marker:nth-child(3) {
  right: 0;
}
#year-progress .year-marker.active {
  background: #25a79b;
}
#year-progress .year-marker.past {
  background: #414141;
}

#demo-app {
  height: 730px;
  width: 100%;
  overflow: hidden;
  position: relative;
  background: #25a79b;
}

#demo-app header.demo-top {
  background: #f9f2ed;
  padding: 30px 10px 0 10px;
  position: relative;
  z-index: 1;
  overflow: hidden;
  height: 175px;
}
#demo-app header.demo-top h2, #demo-app header.demo-top p {
  color: #414141;
}
#demo-app header.demo-top .wrap {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  position: relative;
  *zoom: 1;
  overflow: hidden;
}
#demo-app header.demo-top .wrap:before, #demo-app header.demo-top .wrap:after {
  content: "";
  display: table;
}
#demo-app header.demo-top .wrap:after {
  clear: both;
}
#demo-app header.demo-top .wrap .year-wrap {
  float: left;
  width: 39.5833333333%;
  max-width: 400px;
  margin: 0 1.0416666667%;
  margin-left: 9.375%;
  padding: 18px 0 0 0;
}
#demo-app header.demo-top .wrap .budget-wrap {
  float: left;
  width: 39.5833333333%;
  max-width: 400px;
  margin: 0 1.0416666667%;
  margin-right: 9.375%;
  text-align: right;
}
#demo-app header.demo-top .wrap .budget-wrap svg {
  float: right;
  margin-left: 20px;
}
#demo-app header.demo-top .wrap .budget-wrap p {
  padding-top: 20px;
}
#demo-app header.demo-top .pci-change {
  position: absolute;
  right: 120px;
  bottom: 20px;
  text-align: right;
}
#demo-app header.demo-top .pci-change p {
  margin-bottom: 0;
}
#demo-app header.demo-top .pci-change h2 {
  color: #25a79b;
}
#demo-app header.demo-top .pci-change h2 {
  margin: 0;
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
  #demo-app header.demo-top .pci-change {
    right: 60px;
  }
}

#demo-app #panel-1 {
  height: 560px;
  position: relative;
  z-index: 2;
}
#demo-app #panel-1 article {
  padding: 30px 10px;
  height: 560px;
}
#demo-app #panel-1 h4, #demo-app #panel-1 p {
  color: white;
  text-align: center;
}
#demo-app #panel-1 .sections {
  margin: 60px 0 30px 0;
  *zoom: 1;
}
#demo-app #panel-1 .sections:before, #demo-app #panel-1 .sections:after {
  content: "";
  display: table;
}
#demo-app #panel-1 .sections:after {
  clear: both;
}
#demo-app #panel-1 .section {
  float: left;
  width: 20%;
  padding: 15px;
  border-radius: 5px;
  border: 2px solid transparent;
  cursor: pointer;
}
#demo-app #panel-1 .section.valid header {
  background: black;
}
#demo-app #panel-1 .section header {
  width: 40px;
  height: 40px;
  margin: -35px auto 0 auto;
  border: 3px solid white;
  border-radius: 5px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  background: #25a79b;
}
#demo-app #panel-1 .section header h6 {
  text-transform: uppercase;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  margin: 0;
  padding: 5px 0 0 2px;
  color: white;
  font-size: 14px;
  font-size: 1.4rem;
  text-align: center;
}
#demo-app #panel-1 .section.active header {
  background: black;
}
#demo-app #panel-1 .section p {
  font-size: 7px;
  font-size: 0.7rem;
  margin-bottom: 0;
}
#demo-app #panel-1 .section:hover {
  border: 2px solid white;
}
#demo-app #panel-1 .box {
  width: 100%;
  height: 170px;
  margin: 20px 0 7px 0;
  padding: 30px 0 0 0;
  position: relative;
  overflow: hidden;
  background: black;
}
#demo-app #panel-1 .box h5 {
  color: white;
  text-align: center;
  font-size: 25px;
  font-size: 2.5rem;
  margin: 0;
  position: relative;
  z-index: 2;
  line-height: 1;
}
#demo-app #panel-1 .box h5.pci {
  font-size: 16px;
  font-size: 1.6rem;
  margin-bottom: 10px;
}
#demo-app #panel-1 .box svg {
  width: 37px;
  height: 37px;
  margin: 0 auto;
  display: block;
  z-index: 3;
  position: relative;
}
#demo-app #panel-1 .box .check {
  opacity: 0;
}
#demo-app #panel-1 .box .percentage {
  position: absolute;
  opacity: .5;
  z-index: 1;
  bottom: 0;
  left: 0;
  background: url(../images/demo/diagRepeat.jpg) black;
  width: 100%;
  height: 0%;
}
#demo-app #panel-1 .section.active .box .check {
  opacity: 1;
}

#calculate-average {
  height: 200px;
}
#calculate-average > div {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  position: relative;
  *zoom: 1;
  padding: 30px 26px 30px 20px;
}
#calculate-average > div:before, #calculate-average > div:after {
  content: "";
  display: table;
}
#calculate-average > div:after {
  clear: both;
}
#calculate-average h4, #calculate-average p {
  text-align: left !important;
}
#calculate-average p {
  width: 50%;
  float: left;
}
#calculate-average .make-a-plan {
  float: right;
}

/* ==========================================================================

========================================================================== */
#panels-wrap {
  background: url(../images/demo/offwhite.gif) repeat-x left top;
  padding-top: 40px;
  overflow: hidden;
  position: relative;
  width: 100%;
}
#panels-wrap .panels {
  width: 100%;
}
#panels-wrap .panel {
  height: 560px;
  width: 100%;
  position: absolute;
  top: 23px;
  *zoom: 1;
  z-index: -1;
  opacity: 0;
}
#panels-wrap .panel:before, #panels-wrap .panel:after {
  content: "";
  display: table;
}
#panels-wrap .panel:after {
  clear: both;
}
#panels-wrap .panel.active {
  z-index: 10;
  opacity: 1;
}
#panels-wrap .panel .col1, #panels-wrap .panel .col2 {
  width: 50%;
  float: left;
}
#panels-wrap .panel .col1 {
  padding-right: 30px;
}
#panels-wrap .panel > article {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  position: relative;
  *zoom: 1;
  *zoom: 1;
  padding: 30px 10px;
}
#panels-wrap .panel > article:before, #panels-wrap .panel > article:after {
  content: "";
  display: table;
}
#panels-wrap .panel > article:after {
  clear: both;
}
#panels-wrap .panel > article:before, #panels-wrap .panel > article:after {
  content: "";
  display: table;
}
#panels-wrap .panel > article:after {
  clear: both;
}
#panels-wrap #panel-1 article {
  padding: 0 10px;
}
#panels-wrap #panel-2 {
  -webkit-transition: opacity 1s cubic-bezier(0.77, 0, 0.175, 1);
  transition: opacity 1s cubic-bezier(0.77, 0, 0.175, 1);
}
#panels-wrap #panel-2 .col1 {
  padding-right: 40px;
}

.make-a-plan {
  margin: 0 auto;
  font-size: 12px;
  font-size: 1.2rem;
}

#year-result {
  height: 560px;
}
#year-result .col1 {
  padding-left: 80px;
}
#year-result .revise-plan {
  text-decoration: underline;
  cursor: pointer;
}
#year-result .badge {
  top: -20px;
}
#year-result .make-a-plan {
  position: absolute;
  bottom: 70px;
  left: 50%;
  margin-left: -125px;
}
#year-result .revise-plan {
  display: block;
  width: 125px;
  background: url(../images/demo/btn-diag-white.png) repeat-x left bottom;
  padding-bottom: 10px;
  cursor: pointer;
  text-decoration: none;
}

.treated-pavement-legend {
  text-align: center;
  font-size: 8px;
  font-size: 0.8rem;
}
.treated-pavement-legend span {
  display: inline-block;
  margin: 0 10px;
  height: 26px;
  position: relative;
}
.treated-pavement-legend img {
  position: absolute;
  top: 0;
  left: 0;
}
.treated-pavement-legend span:first-child {
  padding: 8px 0 0 30px;
}
.treated-pavement-legend span:last-child {
  padding: 2px 0 0 50px;
}

#demo-app #final {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
}
#demo-app #final article {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  position: relative;
  *zoom: 1;
  padding: 30px 10px;
}
#demo-app #final article:before, #demo-app #final article:after {
  content: "";
  display: table;
}
#demo-app #final article:after {
  clear: both;
}
#demo-app #final article h4 {
  text-align: center;
  line-height: 1.5;
}
#demo-app #final article p {
  width: 50%;
  float: left;
  margin-right: 10%;
  font-size: 10px;
  font-size: 1rem;
}
#demo-app #final article .make-a-plan {
  max-width: 300px;
  width: 40%;
}
#demo-app #final .demo-social {
  float: right;
}
#demo-app #final .demo-social div {
  margin-bottom: 10px;
  text-align: center;
  background: url(../images/demo/btn-diag-white.png) no-repeat center bottom;
  padding-bottom: 10px;
  cursor: pointer;
}

.badge {
  background: url(../images/demo/badgeBG.svg) no-repeat;
  background-size: 100% auto;
  width: 350px;
  height: 350px;
  position: absolute;
}
.badge.badge-network {
  background: url(../images/demo/networkBadge.svg) no-repeat;
  background-size: 100% auto;
}
.badge span {
  display: block;
  position: absolute;
  text-align: center;
  color: #25a79b;
  width: 100%;
  top: 50%;
  margin-top: -22px;
  font-family: "AchilleFYL-Black";
  font-size: 30px;
  font-size: 3rem;
}
.badge span.year {
  top: 25%;
  color: white;
  font-size: 12px;
  font-size: 1.2rem;
}

.result-badges {
  position: relative;
  margin: 30px 0 30px 40px;
  height: 350px;
}
.result-badges .badge-0 {
  left: -260px;
}
.result-badges .badge-1 {
  left: 0px;
}
.result-badges .badge-2 {
  left: 260px;
}
.result-badges .badge-3 {
  left: 520px;
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
  .result-badges {
    margin: 30px;
    height: 350px;
  }
  .result-badges .badge {
    width: 300px;
    height: 300px;
  }
  .result-badges .badge-0 {
    left: -195px;
  }
  .result-badges .badge-1 {
    left: 0px;
  }
  .result-badges .badge-2 {
    left: 195px;
  }
  .result-badges .badge-3 {
    left: 390px;
  }
}
/* ==========================================================================
   animations
========================================================================== */
#demo-app #panel-1 #topMessage {
  -webkit-transition: opacity 500ms cubic-bezier(0.77, 0, 0.175, 1);
  transition: opacity 500ms cubic-bezier(0.77, 0, 0.175, 1);
}
#demo-app #panel-1 .sections {
  -webkit-transition: margin-top 500ms cubic-bezier(0.77, 0, 0.175, 1);
  transition: margin-top 500ms cubic-bezier(0.77, 0, 0.175, 1);
}
#demo-app #panel-1 article, #demo-app #panel-1 .percentage {
  -webkit-transition: height 500ms cubic-bezier(0.77, 0, 0.175, 1);
  transition: height 500ms cubic-bezier(0.77, 0, 0.175, 1);
}

#demo-app #panel-1.allComplete #topMessage {
  opacity: 0;
}
#demo-app #panel-1.allComplete .sections {
  margin-top: -146px;
}
#demo-app #panel-1.allComplete article {
  height: 320px;
}

.fade-show-hide {
  -webkit-transition: opacity linear 0.5s;
  transition: opacity linear 0.5s;
}

.fade-show-hide.ng-hide {
  opacity: 0;
}

.repeat-animation.ng-enter.badge-0 {
  -webkit-transition: .25s linear opacity, .25s linear -webkit-transform;
  transition: .25s linear opacity, .25s linear transform;
  -webkit-transition-delay: 0ms;
  transition-delay: 0ms;
  transition-origin: 50% 50%;
  opacity: 0;
  -webkit-transform: scale(0.6);
  transform: scale(0.6);
}

.repeat-animation.badge-0, .repeat-animation.ng-enter.ng-enter-active.badge-0 {
  opacity: 0.25;
  -webkit-transform: scale(1);
  transform: scale(1);
}

.repeat-animation.ng-enter.badge-1 {
  -webkit-transition: .25s linear opacity, .25s linear -webkit-transform;
  transition: .25s linear opacity, .25s linear transform;
  -webkit-transition-delay: 50ms;
  transition-delay: 50ms;
  transition-origin: 50% 50%;
  opacity: 0;
  -webkit-transform: scale(0.6);
  transform: scale(0.6);
}

.repeat-animation.badge-1, .repeat-animation.ng-enter.ng-enter-active.badge-1 {
  opacity: 0.5;
  -webkit-transform: scale(1);
  transform: scale(1);
}

.repeat-animation.ng-enter.badge-2 {
  -webkit-transition: .25s linear opacity, .25s linear -webkit-transform;
  transition: .25s linear opacity, .25s linear transform;
  -webkit-transition-delay: 100ms;
  transition-delay: 100ms;
  transition-origin: 50% 50%;
  opacity: 0;
  -webkit-transform: scale(0.6);
  transform: scale(0.6);
}

.repeat-animation.badge-2, .repeat-animation.ng-enter.ng-enter-active.badge-2 {
  opacity: 0.75;
  -webkit-transform: scale(1);
  transform: scale(1);
}

.repeat-animation.ng-enter.badge-3 {
  -webkit-transition: .25s linear opacity, .25s linear -webkit-transform;
  transition: .25s linear opacity, .25s linear transform;
  -webkit-transition-delay: 150ms;
  transition-delay: 150ms;
  transition-origin: 50% 50%;
  opacity: 0;
  -webkit-transform: scale(0.6);
  transform: scale(0.6);
}

.repeat-animation.badge-3, .repeat-animation.ng-enter.ng-enter-active.badge-3 {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}

/* Desktop */
/* Mobile */