/* BASIC STYLINGS
============================================================================= */
.mainArea.container-fluid{overflow:hidden}
pre{ margin-bottom:20px; }
.button-green{background-color:#007041;}
body{background-color:#fff;}
.footer{background-color:#fff;}
/* form styling */
#form-container                { margin-bottom:20px;
    border-radius:5px; }
#form-container .page-header   { margin:0; padding:30px;
    border-top-left-radius:5px; border-top-right-radius:5px; }
#hw-calculator{width:100%;}
/* numbered buttons */
#status-buttons                 {  }
#status-buttons a               { color:#FFF; display:inline-block; font-size:12px; margin-right:10px; text-align:center; text-transform:uppercase; }
#status-buttons a:hover         { text-decoration:none; }
#status-buttons span            { background:#080808; display:block; height:30px; margin:0 auto 10px; padding-top:5px; width:30px;
    border-radius:50%; }
#hw-calculator p{color:gray;}
/* active buttons */
#status-buttons a.active span   { background:#00BC8C; }
.hw-calc-container{margin-left:15px;margin-right:15px;min-height:600px;}
a.button.button-green{color:#fff;}
a.button.button-green:hover{filter: brightness(.85);}
a.back-button, a.back-button:link, a.back-button:visited, a.back-button:hover, a.back-button:active {
  font-size:20px;
  line-height:48px;
  font-weight:700;
  color:#666;
  text-decoration:none;
  display:inline-block;
  cursor:pointer;
}
#form-views a.button{cursor:pointer;font-size:20px;}
button.button{color:white;border:none;font-size:16px;padding-bottom:8px;}
.step{width:100%;}

.step-8-styling .radiolabel span, .step-8-styling .checkboxes span{
  min-width:526px;
}
.step-8-styling .inputs {
  margin: 12px 0;
}
.article-page #hw-calculator h2{
    font-size:36px;
    border:none;
}

label.question{font-size:22px;color:#666;}
.article-page #hw-calculator p{font-size:20px;}
.article-page #hw-calculator h2 sup{
    top:-0.7em;
    font-size:52%;
}
.inputs{margin:15px 0;}
#gaugeWrapper{
    height:400px;
}
#upper-landing{
    position:relative;
    z-index:10;
    margin-bottom:38%;
}

.hsa-core-breadcrumb{
  position:relative;
  z-index:25;
}

.upper-angle{
    position:absolute;
    align-items:stretch;
    width:3000px;
    height:1920px;
    transform:skew(287deg);
    opacity:1;
    top:-107%;
    left:-620px;
    background-color:#fff;
}

.container.pagemain.article-page .row div.col-xs-12{
    position:relative;
}

#progress-gauge > svg > path{
    stroke-dasharray:2,3;
}
.countup{
    position:absolute;
    text-align:center;
    top:63%;
    left:50%;
    transform:translateX(-50%) translateY(-50%);
}
.countup label{
    color:#2A5657;
    text-transform:uppercase;
    font-size:30px;
    position:relative;
    bottom:0px;
}
.article-page p.resultsAstText{
    font-size:12px;
    top:40px;
    position:relative;
    max-width:750px;
    margin-left:auto;
    margin-right:auto;
    line-height:1.2;
}
.inner-circle{
    position:absolute;
    width:94%;
}
.inner-circle img{
    width:80%;
    left:50%;
    top:50%;
    transform:translateX(-50%) translateY(13%);
    position:relative;
}
#hw-calculator .countup p{
    font-size:8em;
    color:#2A5657;
    font-weight:bold;
}
.guage-key {margin-top:45px;padding-left:35px;}
.key-color-box{
    height:50px;
    width:50px;
}

.animated-line-outer{
    position:absolute;
    width:17px;
    height:60px;
    /*background-color:white;*/
	background-color:none;
    bottom: -103px;
    left: 213px;
    transform: rotate(9deg);
    z-index:3;
}
.animated-line-inner{
    width:5px;
    height:0px;
    /*background-color:#D4D2D3;*/
	background-color:none;
    text-align:center;
    margin-left:auto;
    margin-right:auto;
}
.animated-line-text{
    position:absolute;
    bottom:-165px;
    left:110px;
    text-align:right;
    text-transform:uppercase;
    display:inline-flex;
    overflow:hidden;
    opacity:0;
}
#hw-calculator .animated-line-text p{
    margin-right:5px!important;
    font-weight:bold;
    line-height:1;
}
#hw-calculator p.avUscore{
    margin:0;
    font-size:43px;
}

#progress-gauge > svg > circle::after{
    content: " ";
    display:block;
    background-color:red;
    height:30px;
    width:100%;
    position:absolute;
    bottom:0;
}
#progress-gauge svg path::before{
    content: " ";
    display:block;
    background-color:red;
    height:30px;
    width:100%;
    position:absolute;
    bottom:0;
}

.landingChart {
  position: absolute;
  height: 300px;
  width: 300px;
  top: -35px;
  left: 105px;
}
#reviewChart svg{
    transform:rotate(-45deg);
    width:380px;
    height:444px;
    padding:20px;
}
#reviewChart svg#svgIcons{
    transform:rotate(-45deg);
}
/*
.shadow {
    /* Use -webkit- only if supporting: Chrome < 54, iOS < 9.3, Android < 4.4.4 *//*
    -webkit-filter: drop-shadow( -5px -5px 5px #000 );
            filter: drop-shadow( -5px -5px 5px #000 );
}
*/
#centerLandingIcons{
    height:150px;
    width:220px;
    position:absolute;
    opacity:1!important;
    background-repeat:no-repeat;
    text-align:center;
    margin-left:auto;
    margin-right:auto;
    transform:translateX(-50%) translateY(-50%);
    background-position:center;
    background-size:contain;
    top:63%;
    left:63%;
    -webkit-transition: all 0.5s ease;
                transition: all 0.5s ease;

}

#centerLandingIcons.landingSection::after{
    position:relative;
    bottom:-150px;
    text-align:center;
    font-size:25px;
    font-weight:bold;
    text-transform:uppercase;
    color:#94C947;
    line-height:1;
    -webkit-transition: all 0.5s ease;
            transition: all 0.5s ease;
}
#centerLandingIcons.landingSection.minimal{
    background-image:url('/.resources/features/webresources/components/calculators/hwIndexCalc/img/icon1.png');
}
#centerLandingIcons.landingSection.minimal::after{
    content:"Minimally Engaged";
    color:#d0eb8a;
}
#centerLandingIcons.landingSection.moderate{
    background-image:url('/.resources/features/webresources/components/calculators/hwIndexCalc/img/icon2.png');
}
#centerLandingIcons.landingSection.moderate::after{
    content:"Moderately Engaged";
    color:#61c24f;
}
#centerLandingIcons.landingSection.high{
    background-image:url('/.resources/features/webresources/components/calculators/hwIndexCalc/img/icon3.png');
}
#centerLandingIcons.landingSection.high::after{
    content:"Highly Engaged";
    color:#009b48;
}
#centerLandingIcons.landingSection.optimal{
    background-image:url('/.resources/features/webresources/components/calculators/hwIndexCalc/img/icon4.png');
}
#centerLandingIcons.landingSection.optimal::after{
    content:"Optimally Engaged";
    color:#007040;
}

.results-info{display:none;}
.key-item{
    margin-bottom:50px;
    width:100%;
    display:inline-flex;
    opacity:1;
    max-height:50px;
}
.key-item .col-xs-12.col-sm-9 {padding-left:0;padding-right:0;}
.key-item img{width:auto;max-width:75px;position:relative;}
.key-item h3{
    color:#656565;
    margin:10px 0;
    font-size:27px;
    text-transform:uppercase;
}
.key-item h3 em{
    font-style:normal;
    font-size:25px;
}
.key-item:nth-child(1) img{
    bottom: 0px;
    left:-10px;
}
.key-item:nth-child(2) img{
    bottom: 6px;
    left:-10px;
}
.key-item:nth-child(3) img{
    left:-18px;
}
.key-item:nth-child(4) img{
    bottom: 10px;
    left:-10px;
}
.minimally-engaged .key-color-box{background-color:#d0eb8a;}
.moderately-engaged .key-color-box{background-color:#61c24f;}
.highly-engaged .key-color-box{background-color:#009b48;}
.optimally-engaged .key-color-box{background-color:#007040;}


.results-info{margin:14% 0px 0}


body{
    background-color:#fff;
    overflow-x:hidden;
    background-repeat:no-repeat;
    background-position:center 418px;
}
footer{
    background-color:#fff;
}
.upper-footer, .lower-footer{background-color:#fff;}

/* Checkmark & Radio style starts */
@-moz-keyframes dothabottomcheck {
  0% {
    height: 0;
  }

  100% {
    height: 5px;
  }
}

@-webkit-keyframes dothabottomcheck {
  0% {
    height: 0;
  }

  100% {
    height: 10px;
  }
}

@keyframes dothabottomcheck {
  0% {
    height: 0;
  }

  100% {
    height: 10px;
  }
}

@keyframes dothatopcheck {
  0% {
    height: 0;
  }

  50% {
    height: 0;
  }

  100% {
    height: 25px;
  }
}

@-webkit-keyframes dothatopcheck {
  0% {
    height: 0;
  }

  50% {
    height: 0;
  }

  100% {
    height: 25px;
  }
}

@-moz-keyframes dothatopcheck {
  0% {
    height: 0;
  }

  50% {
    height: 0;
  }

  100% {
    height: 25px;
  }
}

input[type=radio], input[type=checkbox] {
  display: none;
}

.radiolabel, .checkboxes {
  height: 25px;
  width: 25px;
  background-color: transparent;
  border: 3px solid #c2c2c2;
  position: relative;
  display: inline-block;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -moz-transition: border-color ease 0.2s;
  -o-transition: border-color ease 0.2s;
  -webkit-transition: border-color ease 0.2s;
  transition: border-color ease 0.2s;
  cursor: pointer;
}

.radiolabel span, .checkboxes span{
    position:relative;
    left:20px;
    min-width:425px;
    display:block;
    float:left;
    font-size:0.95em;
    line-height:1;
}

.radiolabel::before, .radiolabel::after, .checkboxes::before, .checkboxes::after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: absolute;
  height: 0;
  width: 3px;
  background-color: #01a860;
  display: inline-block;
  -moz-transform-origin: left top;
  -ms-transform-origin: left top;
  -o-transform-origin: left top;
  -webkit-transform-origin: left top;
  transform-origin: left top;
  content: ' ';
  -webkit-transition: opacity ease .5;
  -moz-transition: opacity ease .5;
  transition: opacity ease .5;
}

.radiolabel::before, .checkboxes::before {
  top: 16px;
  left: 10px;
  box-shadow: 0 0 0 2px #fff;
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

.radiolabel::after, .checkboxes::after {
  top: 10px;
  left: 2px;
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

input[type=radio]:checked + .radiolabel, input[type=checkbox]:checked + .checkboxes,
.radiolabel.checked, .checkboxes.checked {
  border-color: #01a860;
}

input[type=radio]:checked + .radiolabel::after, input[type=checkbox]:checked + .checkboxes::after,
  .radiolabel.checked::after, .checkboxes.checked::after {
  height: 50px;
  -moz-animation: dothabottomcheck 0.2s ease 0s forwards;
  -o-animation: dothabottomcheck 0.2s ease 0s forwards;
  -webkit-animation: dothabottomcheck 0.2s ease 0s forwards;
  animation: dothabottomcheck 0.2s ease 0s forwards;
}

input[type=radio]:checked + .radiolabel::before, input[type=checkbox]:checked + .checkboxes::before,
  .radiolabel.checked::before, .checkboxes.checked::before {
  height: 120px;
  -moz-animation: dothatopcheck 0.4s ease 0s forwards;
  -o-animation: dothatopcheck 0.4s ease 0s forwards;
  -webkit-animation: dothatopcheck 0.4s ease 0s forwards;
  animation: dothatopcheck 0.4s ease 0s forwards;
}
/* ANIMATION STYLINGS
============================================================================= */
#signup-form{ position:relative; min-height:300px; overflow:visible; padding:30px; padding-right:0;padding-top:5px;}
.right-pad-0{padding-right:0;}
.button-row{margin-top:20px;}
/* basic styling for entering and leaving */
/* left and right added to ensure full width */
#form-views.ng-enter,
#form-views.ng-leave      { position:relative; left:30px; right:30px;
    transition:0.5s all ease; -moz-transition:0.5s all ease; -webkit-transition:0.5s all ease;
}

/* enter animation */
#form-views.ng-enter            {
    -webkit-animation:slideInRight 0.5s both ease;
  -moz-animation:slideInRight 0.5s both ease;
  animation:slideInRight 0.5s both ease;
}

/* leave animation */
#form-views.ng-leave            {
    -webkit-animation:slideOutLeft 0.5s both ease;
  -moz-animation:slideOutLeft 0.5s both ease;
  animation:slideOutLeft 0.5s both ease;
}
/*Tooltips*/
i.tooltips{
    height:20px;
    width:20px;
    color:#fff;
    background-color:#bebebe;
    font-style:unset;
    text-align:center;
    line-height:0;
    padding:4px 7px;
    margin-left:15px;
    position:relative;
    z-index:2;
}

/* Tooltip text */
i.tooltips .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #01a862;
    color: #fff;
    text-align: center;
    padding: 5px;
    line-height:1em;

    /* Position the tooltip text */
    position: absolute;
    z-index: 1;
    bottom: -70%;
    left: 50%;
    margin-left: -60px;

    /* Fade in tooltip */
    opacity: 0;
    transition: opacity 0.3s;
}

/* Tooltip arrow */
i.tooltips .tooltiptext::after {
    content: "";
    position: absolute;
    top: -100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #007139 transparent;
}
.onTop{opacity:1;z-index:9999999;position:relative;}
.tooltip > .tooltip-inner{opacity:1;border:none;z-index:100;}

.tooltip-inner{font-size:12px;max-width:500px;width:350px;background-color:#007041;}
.tooltip-arrow{border-bottom-color:#007041!important;}
.tooltip.in{
    filter: alpha(opacity=100);
    opacity:1;
}

.article-page #hw-calculator .tooltip-inner p{font-size:12px!important;}
/* Show the tooltip text when you mouse over the tooltip container */
i.tooltips:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}


.popover-content{color:#fff;padding:9px;}
.popover{
    border-radius:0;
    border:none;
    box-shadow:none;
    background-color:#01a862;
}

.arrow{border-top-color:#01a862;}
.popover.top>.arrow:after{border-top-color:#01a862;}


md-checkbox.md-default-theme.md-checked .md-icon, md-checkbox.md-checked .md-icon{
    background-color:#01a860;
}
.results-info h2{margin:0;margin-left:30px;display:inline-flex;top:-40px;position:relative;}
.results-info p{display:inline-flex;position:relative;left:158px;top:-83px;max-width:80%;}

.calc-title{
    padding-top:20px;
}
.progress {
  height: 1.5em;
  border-radius:0;
  width:65%;
  float:right;
}
i { line-height: 3.5em; }
.progress-bar {
  transition: width 1s ease-in-out;
}
.progress-bar-success{
    background-color:#039c5b;
}
.progress-bar-striped, .progress-striped .progress-bar{
    background-size:23px 23px;
}
.article-page #hw-calculator p{margin:0;}
.checkbox-grid li {
    display: block;
    float: left;
    width: 25%;
}
.h1-divider{
    margin-bottom:15px;
}
.check {
  display:inline-block;
  padding: 12px 16px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #fff;
  color: #eee;
  font-size: 18px;
  margin: 5px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;

  &.active {
    background: #00A3E0;
    transition: all 0.3s ease-in-out;
  }
}

/* Start page animations */
.flip-styles{display:inline-flex;margin: 0px;margin-bottom:-50px;}
.flip-container {
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -o-perspective: 1000;
  perspective: 1000;
}

.flip-container:hover .flipper,
.flip-container.hover .flipper {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
    transform: rotateX(0deg);
}

.flip-container, .front {
  width: 480px;
  height: 275px;
}

.back{height:auto;}

.flip-container{
    height:500px;
}

.flipper {
  -webkit-transition: 0.6s;
  -webkit-transform-style: preserve-3d;
  -moz-transition: 0.6s;
  -moz-transform-style: preserve-3d;
  -o-transition: 0.6s;
  -o-transform-style: preserve-3d;
  transition: 0.6s;
  transform-style: preserve-3d;
  position: relative;
}

.front, .back {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  border:3px solid #e2e2e2;
}

.article-page #hw-calculator .flip-container p{font-size:14px;}


.card-header{
    padding:20px;
    text-align:center;
    background-color:#e2e2e2;
}
.front {
  background-color:#fff;
  z-index: 2;
}

.back {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
  background: #f8f8f8;
  background-color:#f8f8f8;
  z-index:2;
  height:auto;
}

.front .name {
  font-size: 2em;
  display: inline-block;
  background: rgba(33, 33, 33, 0.9);
  color: #f8f8f8;
  font-family: Courier;
  padding: 5px 10px;
  border-radius: 5px;
  bottom: 60px;
  left: 25%;
  position: absolute;
  text-shadow: 0.1em 0.1em 0.05em #333;
  -webkit-transform: rotate(-20deg);
  -moz-transform: rotate(-20deg);
  -o-transform: rotate(-20deg);
  transform: rotate(-20deg);
}

.back-logo {
  position: absolute;
  top: 40px;
  left: 90px;
  width: 160px;
  height: 117px;
  background-color:green;
}

.back-title {
  font-weight: bold;
  color: #00304a;
  position: absolute;
  top: 180px;
  left: 0;
  right: 0;
  text-align: center;
  text-shadow: 0.1em 0.1em 0.05em #acd7e5;
  font-family: Courier;
  font-size: 2em;
}

.back p {
  color:#fff;
}
.back{
    background-color:#2a5655;
    border:none;
    padding:10px;
}
.back h3 b{
    font-size:51px;
    bottom:-5px;
    position:relative;
}
.back h3{
    font-size:34px;
    color:#ccdd03;
    text-transform:uppercase;
}
#results-banner{
    margin-top:60px;
}
.flipped-side{
    display:none;
}

/* entire container, keeps perspective */
.flip-container {
  perspective: 1000px;
  transform-style: preserve-3d;
}
  /*  UPDATED! flip the pane when hovered */
  .flip-container:hover .back {
    transform: rotateY(0deg);
  }
  .flip-container:hover .front {
      transform: rotateY(180deg);
  }



/* flip speed goes here */
.flipper {
  transition: 0.6s;
  transform-style: preserve-3d;

  position: relative;
}

/* hide back of pane during swap */
.front, .back {
  backface-visibility: hidden;
  transition: 0.6s;
  transform-style: preserve-3d;

  position: absolute;
  top: 0;
  left: 0;
}

/*  UPDATED! front pane, placed above back */
.front {
  z-index: 2;
  transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
  transform: rotateY(-180deg);
}

/*
  Some vertical flip updates
*/
.vertical.flip-container {
  position: relative;
}

  .vertical .back {
    transform: rotateX(180deg);
  }

  .vertical.flip-container:hover .back {
      transform: rotateX(0deg);
  }

  .vertical.flip-container:hover .front {
      transform: rotateX(180deg);
  }


/*End Flip Card*/


#gauge-wrapper{
    width:100%;
    max-width:425px;
    margin-left:auto;
    margin-right:auto;
    margin-top:25px;
}

.circular-chart {
  display: block;
  margin: 10px auto;
  max-width: 80%;
  max-height: 250px;
}

.rings.inner-low{
    stroke: #cfe4ab;
      fill: none;
      stroke-width: 2.5;
      z-index:5;
}
.rings.inner-fair{
    stroke: #66be6a;
      fill: none;
      stroke-width: 2.5;
      z-index:4;
}
.rings.inner-good{
    stroke: #01a860;
      fill: none;
      stroke-width: 2.5;
      z-index:3;
}

.circle {
  stroke: #01a860;
  fill: none;
  stroke-width: 2.5;
  animation: progress 1s ease-out forwards;
}
#signup-form{min-height:500px;}
.rings{
    position:absolute;
    max-width:325px;
}
.rings{stroke-width:2.5;}
.rings.inner{
}

.rings.outer{
    top:15px;
    left:305px;
}

@keyframes progress {
  0% {
    stroke-dasharray: 0 100;
  }
}


/* ANIMATIONS
============================================================================= */
/* slide out to the left */
@keyframes slideOutLeft {
  to    { transform: translateX(-200%); opacity:0; }
}
@-moz-keyframes slideOutLeft {
  to    { -moz-transform: translateX(-200%);opacity:0; }
}
@-webkit-keyframes slideOutLeft {
  to    { -webkit-transform: translateX(-200%);opacity:0; }
}

/* slide in from the right */
@keyframes slideInRight {
  from  { transform:translateX(200%); }
  to    { transform: translateX(0); }
}
@-moz-keyframes slideInRight {
  from  { -moz-transform:translateX(200%); }
  to    { -moz-transform: translateX(0); }
}
@-webkit-keyframes slideInRight {
  from  { -webkit-transform:translateX(200%); }
  to    { -webkit-transform: translateX(0); }
}



/*Responsive*/


/*anything above 1080 resolution, remove image*/
@media only screen and (min-width: 1921px) {
  body{
    background-image:none!important;
  }
}


@media only screen and (max-width: 1400px) {

    .upper-angle{top:-120%;}
    .key-item{width:100%;}


}

@media only screen and (max-width: 1200px){

    .results-info{margin:0;}
    
    .flip-container, .front, .back{width:100%;}
    .guage-key{padding:10px;}
    body{background-position:center 276px;}
    .round-progress{top:3px!important;left:2px!important;}
    .key-item .col-xs-12.col-sm-9{padding-left:10px;}
    .key-item h3{font-size:22px;margin:13px 0;}
    .key-item h3 em{font-size:20px;}

}

@media only screen and (min-width:992px) and (max-width: 1199px) {

    .flip-styles{margin:0;}
    .countup{top:40%;left:51%;}
    .countup p{
        bottom:-50px;
        position:relative;
    }
    .countup label{
          bottom:-68px;
          font-size:26px;
          line-height:1;
        }
    .animated-line-outer{
        bottom:-18px;
        left: 174px;
        transform: rotate(9deg);
    }
    .upper-angle{
      top:-171%;
    }

    body{background-position: center 282px;}

    .animated-line-inner{height:44px!important;}
    
    .animated-line-text{
      bottom: -36px;
      left: 95px;
      z-index:99;
    }
    #hw-calculator .animated-line-text p{font-size:14px;}
    #hw-calculator p.avUscore{font-size:30px;}
    .results-info{margin-top:50px;}

    .article-page #hw-calculator .flip-container p{line-height:1.4;}
    .key-item{margin-bottom:25px;}

}

@media only screen and (max-width:992px){
    .flip-container{margin-right:15px!important;height:525px}

    .round-progress{top:6px!important;left:7px!important;}


    body{background-position: center 246px;}

    .animated-line-inner{height:44px!important;}
    .animated-line-outer{
      bottom:86px;
      left:70px;
      transform:rotate(31deg);
    }
    .animated-line-text{
      bottom:60px;
      left:-48px;
      z-index:99;
    }
    .countup{
      top:37%;
      left:53%;
    }

    .countup label{
      bottom:-20px;
      font-size:26px;
      line-height:1;
    }
    .article-page #hw-calculator .flip-container p{line-height:1.4;}
    .key-item{margin-bottom:25px;}
    .flip-styles{margin:0;}


}



@media only screen and (min-width:768px) and (max-width: 991px) {

  .upper-angle{
    top:-241%;
  }
  .countup{
    top:37%;
    left:52%;
  }
  .countup label{
    font-size:19px;
    bottom:-11px;
  }
  #hw-calculator .countup p{
    font-size:5em;
  }
  .animated-line-outer{
    transform: rotate(13deg);
    left: 131px;
    bottom: 54px;
  }
  #signup-form{padding-left:1px;}
  #form-views{padding-left:0;}
  .radiolabel span, .checkboxes span{
    font-size:14px;
  }
  #hw-calculator .animated-line-text p{font-size:16px;}
  #hw-calculator p.avUscore{
      font-size:32px;
    }
  .animated-line-text{
    left: 47px;
    bottom: 34px;
  }

  .right-pad-0{padding-left:0;padding-right:0;}
  i.tooltips{margin-left:0;}
  .flip-container{height:540px;}

  .key-item{
        margin-bottom:19px;
      }
  .key-color-box{height:40px;width:40px;}
  .key-item img{max-width:55px;}
  .key-item h3{font-size:18px;margin:9px 0;}
  .key-item h3 em{font-size:17px;}
}



@media only screen and (max-width: 767px) {
    .back-button{
        border:2px solid lightgray;
        width:50%;
        text-align:center;
    }
    #results-banner a img{
      width:140%!important;
      position:relative;
      left:-26%;
    }
    .average-score{display:none;}
    .average-score-mobile{
      position:relative;
      float:left;
      display:block;
      width:100%;
      margin: 15px 0 20px;
    }
    .animated-line-text-mobile{
      display:block;
      position:relative;
      width:50%;
      text-align:center;
      margin:0 auto;
      text-transform:uppercase;
      font-weight:bold;
    }
    .animated-line-text-mobile h4, .animated-line-text-mobile h3 {
      color:gray;
      text-transform: uppercase;
      margin-bottom:0;
    }
    .upper-angle{display:none;}
    .results-info p{padding-top:20px;}
    .results-info img{
        max-width: 62px;
    }
    .article-page #hw-calculator .results-info h2{
        top:6px;
        font-size:30px;
    }
    .col-top-margin-remove{
        margin-top:-15px;
    }
    .results-info{margin-top:5%;margin-bottom:5%;}
    .results-info p{
        display:block;
        left:0;
        top:0;
        max-width:unset;
    }
    .article-page p.resultsAstText{
      max-width:100%;
      padding-left:6%;
      padding-right:6%;
    }

    .back-button{border:2px solid lightgray;width:50%;}
    .calc-title .right-pad-0 .text-right{
        position:relative;
        top:-28px;
    }
    .progress{width:100%;}
    a.button-green{border:3px solid #007041;width:50%;}
    a.button-green:hover{
        border-color:#003d23;
        transition:all 0.1s ease-in;
    }
    #signup-form{min-height:670px;}

    .upper-angle{
      top:-214%;
    }
    #form-views{
      min-height:570px;
    }

    .round-progress{
      top:-2px!important;
      left:-3px!important;
    }

    .inner-circle{
      width:68%;
    }
    #gaugeWrapper{
      padding-left:15%;
      padding-right:15%;
      height:auto;
    }
    .countup{
      top:51%;
      left:50%;
    }

    .animated-line-outer{
    left: 43%;
    bottom: -5%;
    height: 70px;
    transform: rotate(10deg);
    }
    .animated-line-inner{
      height: 62px!important;
    }
    .animated-line-text{
      bottom:-16px;
      left:10px;

    }
    .calc-title{padding-top:0;top:28px;}


  
    .article-page #hw-calculator .flip-container p{
      line-height:1.4;
    }
    body{background-position:-811px 276px;}

    .button-row{padding-left:0;padding-right:0;}
    #signup-form{padding-left:1px;}
    .article-page h1{font-size:27px;}
    #results-page > div.results-upper.col-xs-12.row > div.guage-key.col-xs-12.col-sm-6{padding-top:0%;padding-left:15px;padding-right:15px;}
    .sec1nxtbtn a.button-green{width:100%;}
    div.button-row.sec1nxtbtn{padding-left:15px!important;padding-right:15px!important;}
 
   
    .flip-styles{display:none;}

    .health-container,.wealth-container{
        border:2px solid #E2E2E2;
        padding-left:0;
        padding-right:0;
        margin-bottom:25px!important;
    }
    .flipped-side{
        padding:15px;
    }
    .container.pagemain.article-page .row div .health-container,.wealth-container{margin-bottom:25px!important;}
    .article-page #hw-calculator h2{
        font-size:28px;
        margin: 5px 0;
    }
    .breadcrumb{margin-bottom:10px;}

}

@media only screen and (max-width: 710px) {

  .animated-line-outer{
    bottom:9px;
    left:140px;
  }
  .animated-line-text{
    bottom:-25px;
    left:10px;
  }
  .guage-key{margin-top:0;}

}
@media only screen and (max-width: 660px) {

  .animated-line-outer{
    height:61px;
  }
  .animated-line-text{
    bottom:-33px;
  }
  .animated-line-inner{
    height:55px!important;
  }

}

@media only screen and (max-width: 630px){

  .animated-line-outer{
    bottom:2px;
    left:135px;
  }
  #hw-calculator .animated-line-text p{
    font-size:17px;
  }
  #hw-calculator .animated-line-text p.avUscore{font-size:36px;}

}


@media only screen and (max-width: 600px){

  #hw-calculator .countup p{
    font-size:5em;
  }
  body{background-position:-872px 253px;}
  .countup label{font-size:16px;}
  #gaugeWrapper{margin-bottom:0;}
  .animated-line-outer{width:9px;left:124px;bottom:8px;transform:rotate(39deg);}
  .animated-line-inner{width:4px;height:47px!important;}
  .key-item img{height:56px;}
  .article-page #hw-calculator h2{font-size:24px;margin:0;}
  .upper-angle{top:-221%;}
  .article-page #hw-calculator h2{font-size:25px;}
  .article-page h1{font-size:25px;margin-bottom:20px;}
  .h1-divider{margin-bottom:0;}
  .upper-angle{top:-220%;}
  #form-views{padding-left:0;}
  .right-pad-0{padding-left:0;}
  #results-page > div.col-xs-12.row.flip-styles > div:nth-child(2){margin-right:0!important;}
  .results-info{padding:30px 0;}

  .tooltip-inner{max-width:250px;}
  .tooltip.bottom{left:25% !important;}
  .tooltip-arrow{display:none;}
}


@media only screen and (max-width: 550px){

  .animated-line-outer{
    width:9px;
    left:115px;
    bottom:0px;
  }

}

@media only screen and (max-width: 520px){

  .animated-line-outer{left:100px;}
  .radiolabel span, .checkboxes span{min-width:335px;}

}

@media only screen and (max-width: 480px) {
    .hw-calc-container{
        padding-left:0;
        padding-right:0;
    }
    .checkbox label, .radio label{
      padding-left:10px;
    }
    .col-top-margin-remove{
      margin-top:-25px;
    }
    #form-views > div > div > div:nth-child(3) > label > i{}
    .right-pad-0{
      padding-left:0;
    }
    .container.pagemain.article-page .row div.col-xs-12.results-info{padding:5px 15px;}
    .container.pagemain.article-page .guage-key .key-item h3{padding-left:10px;}
    #form-views{padding-left:0;padding-right:0;}

    h1.squeeze{font-size:20px;}
    .article-page h1{margin-bottom:20px;}
    .breadcrumb{margin-bottom:10px;font-size:12px;}
    #upper-landing > div:nth-child(1) > h2{
      margin:15px 0;
    }
    .article-page #hw-calculator p{font-size:16px;}
    .article-page #hw-calculator h2{font-size:20px;}
    .upper-angle{top:-233%;}
    #upper-landing > div:nth-child(1) > button{font-size:15px;}
    #upper-landing > div:nth-child(1) > p{margin-bottom:15px!important;}
    #form-views > div:nth-child(2) > div > div{padding-left:0;}
    .radiolabel span, .checkboxes span{font-size:14px;}
    body{background-position:-981px 236px;}
    #upper-landing > div:nth-child(1) > h2{
        margin:5px 0;
    }
    .container.pagemain.article-page .row div.col-xs-12{margin-bottom:10px;padding-right:0;padding-left:0;}
    .container.pagemain.article-page .row div.col-xs-12:nth-child(1){padding-left:10px;padding-right:10px;}

    .calc-title{top:37px;padding-left:0;padding-top:0;margin-top:-10px;}
    label.question{font-size:16px;}
    .article-page p.resultsAstText{
        left:5px;
        font-size:10px;
    }
    #results-page .health-container, #results-page .wealth-container{
      padding-left:0;
      padding-right:0;
    }
    .results-info img{display:none;}
    .key-item div:nth-child(2){display:none;}
    .key-item div:nth-child(3){margin-left:0;margin-right:0;}
    .key-item .key-color-box{height:25px;width:25px;}
    .key-item h3{font-size:17px;margin:0;}

    .tooltip-inner{max-width:190px;}
    .tooltip.bottom{left:40% !important;}
    .tooltip-arrow{display:none;}

    .article-page #hw-calculator .countup p{

      font-size:5em;

    }
    .animated-line-text{
      left:-11px;
      bottom:-25px;
    }
    .animated-line-outer{
      left:99px;
      bottom:1px;
    }



}

@media only screen and (max-width: 450px) {
  .animated-line-outer{
    left:92px;
    bottom:-7px;
  }
  .tooltip.bottom{left:30% !important;}
  #hw-calculator .animated-line-text p.avUscore{font-size:30px;}
  #hw-calculator .animated-line-text p{font-size:15px;}
  #form-views > div > div > div:nth-child(2) > label > i{
    top:10px;
    margin-left:0;
  }

}

@media only screen and (max-width: 420px) {

  .animated-line-inner{
    height:30px!important;
  }
  .animated-line-outer{
    left:80px;
    bottom:-11px;
  }
  .radiolabel span, .checkboxes span{
    min-width:300px;
  }
  .animated-line-text-mobile{
    width:100%;
  }

}

@media only screen and (max-width: 400px) {

  .animated-line-outer{left:75px;bottom:-12px;}

}


@media only screen and (max-width: 380px) {
  .upper-angle{top:-218%;}
  .radiolabel span, .checkboxes span{font-size:11px;}
  body{background-position:-1048px 205px;}
  .animated-line-outer{left:67px;}
  .animated-line-text{bottom:-30px;}
  .tooltip.bottom{left:30% !important;}
  .radiolabel span, .checkboxes span{
    min-width:235px;
  }
  #results-banner a img{
    width:192%!important;
    position:relative;
    left:-37%;
  }

}

@media only screen and (max-width: 350px) and (min-width: 341px) {

  .animated-line-outer{
    left:61px;
    bottom:-17px;
  }
  .countup{
    top:62%;
  }
  .article-page #hw-calculator .countup p{
    font-size:4em;
    bottom:20px;
    position:relative;
  }
  .tooltip.bottom{left:20% !important;}
}

@media only screen and (max-width: 340px) {

  .radiolabel span, .checkboxes span{
    min-width:242px;
  }
  i.tooltips{margin-left:8px;}
  .animated-line-outer{
    left:54px;
    bottom:-19px;
  }
  #form-views > div > div > div:nth-child(3) > label > i{top:9px;margin-left:0;}
  .hw-calc-container{margin-top:-25px;}
  .hw-calc-container #form-views #upper-landing{margin:25px 0;}
  .article-page #hw-calculator p{
    font-size:13px;
  }
  .inputs{margin:12px 0;}
  #hw-calculator .animated-line-text p.avUscore{font-size:20px;}
  .countup{
    top:66%;
  }
  .article-page #hw-calculator .countup p{font-size:3em;bottom:20px;position:relative;}
  .countup label{font-size:13px;}
  .animated-line-text{bottom:-18px;left:-4px;}
  .article-page #hw-calculator p{font-size:11px;}
  .key-item h3{font-size:14px;}
  .key-item h3 em{font-size:14px;}
  .key-item{margin-bottom:7px;}
  .guage-key{margin-top:0px;}
  .results-info{padding: 15px 0;}
  .tooltip.bottom{left:8% !important;}
}