@import "https://fonts.googleapis.com/css?family=Roboto:100,300,400,700,900";
.menu-container .holder {
  background: url(//media.ruud.com/blobazrheem/site/rheemdotcom/resources/hybridsavings/img/bg-menu-container.png) no-repeat !important; }

.menu-container {
  margin-top: -40px;
  z-index: 200;
  position: relative;
  background: none !important; }

@media (min-width: 1200px) {
  .container {
    width: 1024px; } }
.main-holder {
  padding-bottom: 0px; }

body {
  margin: 0; }

.road-to-recovery-main img {
  display: block;
  max-width: 100%;
  height: auto; }

.section {
  padding-left: 20px;
  padding-right: 20px;
  background-color: #fff;
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-size: 16px;
  color: #616265;
  line-height: 1.5;
  font-weight: 300; }
  @media only screen and (min-width: 990px) {
    .section {
      padding-left: 70px;
      padding-right: 70px; } }

h2 {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 100;
  color: #616265;
  font-size: 24px;
  margin-bottom: 29px; }

.btn {
  line-height: 1;
  -moz-border-radius: 9px;
  -webkit-border-radius: 9px;
  border-radius: 9px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  background-color: #76232f;
  font-weight: bold;
  font-size: 12px;
  text-transform: uppercase;
  display: inline-block;
  color: #fff;
  padding: 16px;
  font-family: Helvetica, Arial, sans-serif;
  text-decoration: none; }
  .btn:hover {
    text-decoration: none;
    opacity: .8;
    color: #fff; }

#hero img {
  width: 100%;
  height: auto;
  max-width: none; }

#section1 {
  padding-top: 10px; }
  #section1 #intro {
    padding-left: 18px;
    border-left: 4px solid #67baaf;
    padding-right: 20px; }
    #section1 #intro .teal {
      color: #007681;
      font-weight: bold;
      margin-bottom: 34px; }
  #section1 .productrow {
    position: relative;
    margin-top: 90px; }
    #section1 .productrow .copy {
      width: 100%;
      text-align: left;
      padding-left: 0px;
      box-sizing: border-box;
      font-size: 14px; }
      #section1 .productrow .copy .btn {
        margin-top: 30px; }
    #section1 .productrow .productimage {
      position: relative;
      margin-bottom: 20px; }
  @media only screen and (min-width: 990px) {
    #section1 {
      padding-top: 80px;
      background: url(https://media.ruud.com/site/ruuddotcom/_WP/img/road-to-recovery/section1-back.jpg) no-repeat top center; }
      #section1 #intro {
        padding-left: 18px;
        padding-right: 200px; }
        #section1 #intro .teal {
          margin-bottom: 34px; }
      #section1 .productrow .copy {
        width: 550px;
        text-align: right;
        padding-left: 50px;
        box-sizing: border-box;
        font-size: 14px; }
      #section1 .productrow .productimage {
        position: absolute;
        bottom: -50px;
        right: 0px;
        margin-bottom: 0px; } }
  @media only screen and (min-width: 1200px) {
    #section1 .productrow .copy {
      width: 600px; } }

.turn {
  display: none; }
  @media only screen and (min-width: 990px) {
    .turn {
      display: block; } }
  .turn img {
    display: block;
    max-width: 100%;
    height: auto; }

#section2 .productrow {
  position: relative; }
  #section2 .productrow .copy {
    text-align: left;
    padding-right: 0px;
    box-sizing: border-box;
    font-size: 14px;
    padding-left: 0px; }
    #section2 .productrow .copy .btn {
      margin-top: 30px; }
  #section2 .productrow .productimage {
    position: relative;
    margin: 60px 0px 20px 0px; }
@media only screen and (min-width: 990px) {
  #section2 {
    background: url(https://media.ruud.com/site/ruuddotcom/_WP/img/road-to-recovery/section2-back.jpg) repeat-y top center; }
    #section2 .productrow {
      position: relative; }
      #section2 .productrow .copy {
        padding-right: 30px;
        padding-left: 300px; }
      #section2 .productrow .productimage {
        position: absolute;
        bottom: -20px;
        left: 0px;
        margin: 0px 0px; } }

#section3 .productrow {
  position: relative; }
  #section3 .productrow .copy {
    width: 100%;
    text-align: left;
    padding-left: 0px;
    box-sizing: border-box;
    font-size: 14px; }
    #section3 .productrow .copy .btn {
      margin-top: 30px; }
  #section3 .productrow .productimage {
    position: relative;
    margin: 60px 0px 20px 0px; }
@media only screen and (min-width: 990px) {
  #section3 {
    background: url(https://media.ruud.com/site/ruuddotcom/_WP/img/road-to-recovery/section3-back.jpg) repeat-y top center; }
    #section3 .productrow {
      position: relative; }
      #section3 .productrow .copy {
        width: 470px;
        text-align: right;
        padding-left: 50px; }
      #section3 .productrow .productimage {
        position: absolute;
        bottom: -20px;
        right: 0px; } }
@media only screen and (min-width: 1200px) {
  #section3 .productrow .copy {
    width: 550px; } }

#section4 {
  padding-bottom: 100px; }
  #section4 .productrow {
    position: relative; }
    #section4 .productrow .copy {
      text-align: left;
      padding-right: 0px;
      box-sizing: border-box;
      font-size: 14px;
      padding-left: 0px; }
      #section4 .productrow .copy .btn {
        margin-top: 30px; }
    #section4 .productrow .productimage {
      position: relative;
      margin: 60px 0px 20px 0px; }
  @media only screen and (min-width: 990px) {
    #section4 {
      background: url(https://media.ruud.com/site/ruuddotcom/_WP/img/road-to-recovery/section4-back.jpg) repeat-y top center; }
      #section4 .productrow .copy {
        padding-right: 30px;
        padding-left: 300px; }
      #section4 .productrow .productimage {
        position: absolute;
        bottom: -60px;
        left: 0px; } }

#sectionfooter {
  background: url(https://media.ruud.com/site/ruuddotcom/_WP/img/road-to-recovery/blackback.jpg) top center;
  padding-top: 60px;
  color: #fff;
  font-size: 14px; }
  #sectionfooter h2 {
    color: #fff;
    text-transform: uppercase;
    font-size: 30px;
    padding-bottom: 0px;
    font-family: "Roboto", Helvetica, Arial, sans-serif;
    font-weight: 100; }
  #sectionfooter h3 {
    color: #fff;
    text-transform: uppercase;
    font-size: 20px;
    padding-bottom: 0px;
    font-family: "Roboto", Helvetica, Arial, sans-serif;
    font-weight: 100; }
  #sectionfooter .footertop {
    display: table;
    margin-bottom: 40px; }
  #sectionfooter .leftside {
    width: 100%;
    display: block;
    box-sizing: border-box;
    padding-right: 0px;
    line-height: 1.5;
    padding-bottom: 40px; }
    #sectionfooter .leftside a {
      font-weight: bold;
      color: inherit;
      text-decoration: underline; }
    #sectionfooter .leftside img {
      max-width: 100%;
      height: auto;
      display: block;
      margin-top: 40px;
      margin-bottom: 18px; }
    @media only screen and (min-width: 990px) {
      #sectionfooter .leftside {
        width: 590px;
        display: table-cell;
        padding-right: 60px;
        padding-bottom: 0px; } }
  #sectionfooter .rightside h2 {
    font-size: 18px;
    display: block;
    line-height: 1.2; }
  #sectionfooter .rightside ul {
    margin: 0;
    padding: 0;
    list-style: none; }
    #sectionfooter .rightside ul li {
      display: inline-block;
      width: 45px;
      height: 45px;
      margin-right: 15px; }
      #sectionfooter .rightside ul li a {
        display: block;
        height: 100%;
        overflow: hidden;
        text-indent: 9999px;
        background: url(https://media.ruud.com/site/ruuddotcom/_WP/img/road-to-recovery/socialsprite.png) no-repeat; }
        #sectionfooter .rightside ul li a.linkedin {
          background-position: 0px 0px; }
        #sectionfooter .rightside ul li a.twitter {
          background-position: -55px 0px; }
        #sectionfooter .rightside ul li a.instagram {
          background-position: -110px 0px; }
        #sectionfooter .rightside ul li a:hover {
          opacity: .8; }

.disclaimer {
  font-size: 11px;
  width: 100%;
  display: block;
  padding-bottom: 100px;
  color: #fff; }
  .disclaimer p {
    padding: 0 50px 0px 0; }
    .disclaimer p img {
      padding-top: 10px; }