.no-gutter > [class*='col-'] {
  padding-right: 0;
  padding-left: 0; }

a.yellow {
  color: #f1c400; }
a:hover {
  opacity: .8; }

@media only screen and (min-width: 1200px) {
  .container {
    width: 1024px; } }

.banner-block {
  padding: 0px !important; }

.banner-block .text-block {
  text-align: left; }

.top-visual {
  color: #fff; }
  .top-visual .text-block {
    padding: 107px 0 90px 0;
    background-color: #000; }
    @media only screen and (min-width: 990px) {
      .top-visual .text-block {
        background-color: transparent; } }
  .top-visual .container {
    position: relative; }
  .top-visual .customproductimage {
    position: absolute;
    right: 0px;
    z-index: 2;
    display: none; }
    .top-visual .customproductimage img {
      max-width: 100%;
      height: auto; }
    @media only screen and (min-width: 768px) {
      .top-visual .customproductimage {
        display: block;
        width: 60%;
        bottom: 0px; } }
    @media only screen and (min-width: 990px) {
      .top-visual .customproductimage {
        width: auto;
        bottom: -230px; } }
  .top-visual .pi-product-category-img img {
    width: 80%; }
  .top-visual p {
    margin: 20px 0px;
    width: 100%; }
    @media only screen and (min-width: 768px) {
      .top-visual p {
        margin: 40px 0 0 0;
        width: 50%; } }
  .top-visual h1 {
    font-size: 30px;
    line-height: 1.2;
    float: none; }
    .top-visual h1 span {
      color: #fff;
      font-family: "Roboto", Helvetica, sans-serif;
      font-size: 21px;
      font-weight: 300;
      display: block;
      padding-top: 20px; }
    @media only screen and (min-width: 768px) {
      .top-visual h1 {
        width: 75%; }
        .top-visual h1 span {
          margin-top: 0px; } }
  .top-visual .bg-stretch {
    display: none; }
    @media only screen and (min-width: 990px) {
      .top-visual .bg-stretch {
        display: block; } }

.main-holder {
  padding-top: 0px;
  padding-bottom: 0px; }

#stickynav-sticky-wrapper {
  z-index: 10;
  position: relative; }

#stickynav {
  background-color: #b7a99a;
  position: relative;
  z-index: 999; }
  #stickynav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
    display: table;
    width: 100%; }
    #stickynav ul li {
      display: table-cell;
      border-right: 1px solid #fff; }
      #stickynav ul li:last-child {
        border-right: none; }
      #stickynav ul li a {
        line-height: 1.2;
        display: block;
        text-align: center;
        color: #fff;
        text-decoration: none;
        padding: 15px 0px;
        font-size: 14px;
        font-weight: 400; }
        #stickynav ul li a:hover {
          text-decoration: none;
          opacity: .8; }
      #stickynav ul li:last-child {
        background-color: #8b0f04; }

.contentsection {
  position: relative; }
  .contentsection h1 {
    font-family: "Roboto", helvetica, sans-serif;
    font-size: 35px;
    font-weight: 300;
    text-transform: none;
    color: inherit;
    line-height: 1.2;
    margin: 0 0 30px 0; }
  .contentsection p {
    font-family: "Roboto", helvetica, sans-serif;
    font-weight: 300;
    line-height: 1.5; }

.section1 {
  background: url(https://media.ruud.com/site/ruuddotcom/_WP/css/morehotwater/images/blackback.jpg) no-repeat center center;
  background-size: cover;
  color: #fff; }
  .section1 .contentsection {
    padding: 40px; }
  .section1 .rebatefinder {
    margin-top: 50px;
    width: 50%; }
    .section1 .rebatefinder h3 {
      font-family: "a_love_of_thunder", Arial, Helvetica, sans-serif;
      color: #3bc8e8;
      font-size: 28px;
      text-shadow: -3px 2px 3px rgba(38, 36, 36, 0.5);
      line-height: 1.2; }
  .section1 .callout {
    position: absolute;
    bottom: 0px;
    right: 0px; }
    @media only screen and (min-width: 990px) {
      .section1 .callout {
        bottom: -40px;
        right: 20px; } }
  .section1 .imageholder {
    background: url(https://media.ruud.com/site/ruuddotcom/_WP/css/morehotwater/images/section1-image.jpg) no-repeat top center;
    background-size: cover; }

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

.section2 {
  background: url(https://media.ruud.com/site/ruuddotcom/_WP/css/morehotwater/images/section2-tile.jpg);
  padding: 20px 20px 0 20px;
  color: #fff; }
  .section2 .advantage {
    margin-bottom: 30px;
    display: block; }
    .section2 .advantage h1 {
      padding-top: 40px;
      font-size: 32px; }
    .section2 .advantage .rebatefindertop {
      position: relative;
      padding-bottom: 20px; }
      @media only screen and (min-width: 990px) {
        .section2 .advantage .rebatefindertop {
          position: absolute;
          top: 0px;
          right: 0px; } }
      .section2 .advantage .rebatefindertop img {
        max-width: 100%;
        height: auto; }
    .section2 .advantage .intro {
      width: 65%; }
  .section2 .tableholder {
    height: 680px;
    display: none;
    margin-bottom: 50px;
    text-align: center; }
    @media only screen and (min-width: 990px) {
      .section2 .tableholder {
        display: block; } }
    .section2 .tableholder > div {
      display: inline-block;
      vertical-align: bottom; }
      .section2 .tableholder > div.tableleft {
        margin-right: -5px;
        width: 600px;
        position: relative; }
        .section2 .tableholder > div.tableleft span {
          position: absolute;
          bottom: -30px;
          display: block;
          left: 0px;
          color: #fff;
          font-size: 14px; }
      .section2 .tableholder > div.tableright {
        position: relative;
        height: 100%;
        width: 300px; }
        .section2 .tableholder > div.tableright img {
          max-width: 100%;
          height: auto; }
        .section2 .tableholder > div.tableright .switch1 {
          position: absolute;
          top: 0px;
          right: 0px;
          background: transparent;
          cursor: pointer;
          display: block;
          width: 300px;
          height: 60px;
          z-index: 10; }
        .section2 .tableholder > div.tableright .high, .section2 .tableholder > div.tableright .mid {
          position: absolute;
          top: 0px;
          left: 0px; }
          .section2 .tableholder > div.tableright .high .productdetailbtn, .section2 .tableholder > div.tableright .mid .productdetailbtn {
            position: absolute;
            bottom: -80px;
            right: 0px; }
        .section2 .tableholder > div.tableright .high {
          z-index: 2; }
        .section2 .tableholder > div.tableright .mid {
          z-index: 1;
          position: relative; }
          .section2 .tableholder > div.tableright .mid .switch2 {
            position: absolute;
            top: 264px;
            left: 0px;
            background: transparent;
            cursor: pointer;
            display: block;
            width: 300px;
            height: 25px;
            z-index: 10; }
          .section2 .tableholder > div.tableright .mid .indoor {
            position: absolute;
            top: 264px;
            left: 0px;
            width: 300px; }
          .section2 .tableholder > div.tableright .mid .productdetailbtn {
            bottom: -80px; }
  .section2 .mobiletables {
    margin-bottom: 50px; }
    .section2 .mobiletables img {
      max-width: 100%;
      height: auto; }
    .section2 .mobiletables span {
      font-size: 14px;
      color: #fff;
      display: block;
      margin-top: 20px; }
  .section2 .howitworkscontent {
    padding-top: 80px;
    padding-bottom: 20px; }
    .section2 .howitworkscontent h1 {
      margin-bottom: 20px;
      margin-top: 20px; }
    .section2 .howitworkscontent img {
      max-width: 100%;
      height: auto; }
    .section2 .howitworkscontent .vidbtn {
      display: inline-block;
      width: 32%;
      padding: 10px 5px;
      vertical-align: top;
      text-align: center;
      font-size: 11px;
      color: #fff;
      box-sizing: border-box; }
      .section2 .howitworkscontent .vidbtn span {
        display: block;
        text-align: center;
        padding: 0 0px; }
      .section2 .howitworkscontent .vidbtn img {
        max-width: 100%;
        height: auto;
        display: block;
        margin: 10px auto; }
      @media only screen and (min-width: 990px) {
        .section2 .howitworkscontent .vidbtn {
          padding: 20px 10px; }
          .section2 .howitworkscontent .vidbtn span {
            padding: 0 20px; } }

.section3 {
  background: url(https://media.ruud.com/site/ruuddotcom/_WP/css/morehotwater/images/tan-back.jpg) top center;
  padding: 50px 20px 10px 20px; }
  .section3 .kwikcomfortflag {
    margin-left: -20px;
    margin-bottom: 50px;
    display: block; }
    .section3 .kwikcomfortflag img {
      max-width: 100%;
      height: auto; }
  .section3 h1 {
    color: #827a04;
    margin-bottom: 0px; }
  .section3 .bulletsection {
    display: block;
    margin-bottom: 40px;
    font-family: "Roboto", helvetica, sans-serif;
    font-weight: 300;
    line-height: 1.5; }
    .section3 .bulletsection .title {
      display: block;
      color: #6e4c1e;
      font-weight: bold; }
  .section3 .callout {
    margin-top: -80px;
    padding-bottom: 40px;
    display: none; }
    @media only screen and (min-width: 990px) {
      .section3 .callout {
        display: block; } }
  .section3 .tabholder {
    margin-top: 25px; }
    .section3 .tabholder .tabblocks {
      list-style: none;
      margin: 0;
      padding: 0;
      width: 100%;
      display: table; }
      .section3 .tabholder .tabblocks li {
        display: block;
        text-align: center;
        vertical-align: middle;
        color: #fff;
        font-size: 15px;
        cursor: pointer;
        position: relative;
        background-color: #7e7b7c; }
        .section3 .tabholder .tabblocks li:last-child {
          width: 100%;
          display: block; }
        @media only screen and (min-width: 990px) {
          .section3 .tabholder .tabblocks li {
            display: table-cell;
            width: 20%; } }
        .section3 .tabholder .tabblocks li .wrapper {
          padding: 10px 0;
          margin: 0px 0;
          border-right: 1px solid #b1b3b6; }
        .section3 .tabholder .tabblocks li .icon {
          display: none;
          height: 42px;
          vertical-align: middle;
          margin-bottom: 16px; }
          @media only screen and (min-width: 990px) {
            .section3 .tabholder .tabblocks li .icon {
              display: block; } }
        .section3 .tabholder .tabblocks li:hover, .section3 .tabholder .tabblocks li.active {
          background-color: #3bc8e8;
          color: #fff;
          border-color: #3bc8e8; }
        .section3 .tabholder .tabblocks li.active:after {
          content: '';
          background: url(https://media.ruud.com/site/ruuddotcom/_WP/css/morehotwater/images/bluearrowdown.png) no-repeat center top;
          width: 55px;
          height: 27px;
          position: absolute;
          left: 50%;
          margin-left: -27.5px;
          bottom: -27px;
          display: none; }
          @media only screen and (min-width: 990px) {
            .section3 .tabholder .tabblocks li.active:after {
              display: block; } }
    .section3 .tabholder .tabtables {
      margin-top: 50px; }
      .section3 .tabholder .tabtables table {
        display: none; }
        .section3 .tabholder .tabtables table.active {
          display: table; }
        .section3 .tabholder .tabtables table td {
          padding-right: 30px;
          vertical-align: top;
          padding-bottom: 38px;
          width: 50%;
          box-sizing: border-box;
          border: none !important; }
          .section3 .tabholder .tabtables table td span {
            color: #6e4c1e;
            display: block;
            text-transform: uppercase;
            font-weight: bold; }
          .section3 .tabholder .tabtables table td a {
            color: inherit;
            text-decoration: none; }

.legal {
  font-size: 10px;
  font-style: italic;
  padding: 50px;
  color: #505759; }
  .legal sup {
    font-style: normal; }

/*# sourceMappingURL=tankless.css.map */