/**********************
Big Red Rooster

RHEEM WEBSITE REDESIGN

AUTHOR: Sabrina Azad
***********************/
/**********************
Variables & Mixins
AUTHOR: Bobby Donathan - BigRedRooster
_variables.scss
***********************/
/*GENERAL COLORS*/
/*RIBBON BANNERS*/
/*FONT WEIGHT*/
/*PANELS & CARDS*/
/*MIXINS*/
.orange {
  color: #ed8b00; }

#countUp .left {
  padding: 50px 0;
  text-align: center; }
#countUp .right {
  text-align: left;
  padding: 50px 0; }
  #countUp .right .red {
    color: #e70033; }
  #countUp .right h1 {
    font-size: 70px;
    padding-top: 25px; }

.res-water .hide {
  opacity: 0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -ms-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out; }
.res-water .first-section {
  background-image: none; }
  @media only screen and (min-width: 768px) {
    .res-water .first-section {
      background-image: url("https://media.ruud.com/site/ruuddotcom/_WP/css/images/innovations/feature-img.png");
      background-size: contain;
      background-repeat: no-repeat;
      background-position: right; } }
  .res-water .first-section .left-side .header .orange-lite {
    color: #ed8b00;
    display: block; }
  .res-water .first-section .left-side .block {
    text-align: center; }
    .res-water .first-section .left-side .block .img-block {
      height: 70px; }
  .res-water .first-section .left-side .button {
    text-align: center; }
  .res-water .first-section .right-side {
    text-align: center;
    padding-bottom: 25px; }
    .res-water .first-section .right-side .mobile-feature {
      text-align: center; }
      @media only screen and (min-width: 768px) {
        .res-water .first-section .right-side .mobile-feature {
          display: none; } }
.res-water .second-section {
  background-image: url("https://media.ruud.com/site/ruuddotcom/_WP/css/images/innovations/row2bg.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center; }
  .res-water .second-section .header {
    padding: 75px 0 25px 0;
    margin: 0 auto; }
  .res-water .second-section .text {
    padding: 50px;
    text-align: center; }
    @media only screen and (min-width: 992px) {
      .res-water .second-section .text {
        padding: 0 100px 50px 100px; } }
  .res-water .second-section img {
    width: 100%; }
  .res-water .second-section .feat-video {
    padding: 50px 0;
    margin: 0 auto;
    position: relative; }
    .res-water .second-section .feat-video .video-container {
      position: absolute;
      width: 100%; }
      .res-water .second-section .feat-video .video-container iframe {
        width: 100%;
        height: 100%; }
    .res-water .second-section .feat-video .layover img {
      width: 100%;
      z-index: 999;
      position: relative;
      box-shadow: 5px 10px 50px #888888; }
    .res-water .second-section .feat-video .layover .style-for-big-ribbon {
      position: absolute;
      z-index: 9999;
      width: 45%;
      box-shadow: none;
      top: 95px;
      left: -15px; }
      @media only screen and (min-width: 576px) {
        .res-water .second-section .feat-video .layover .style-for-big-ribbon {
          left: -10px; } }
      @media only screen and (min-width: 992px) {
        .res-water .second-section .feat-video .layover .style-for-big-ribbon {
          left: -15px; } }
.res-water .third-section {
  background-image: url("https://media.ruud.com/site/ruuddotcom/_WP/css/images/innovations/row3bg.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center; }
  .res-water .third-section .header {
    padding: 75px 0 25px 0;
    margin: 0 auto; }
  .res-water .third-section .three-panels {
    width: 100%;
    margin: 0 auto; }
    .res-water .third-section .three-panels .white-card {
      margin: 15px 0; }
      .res-water .third-section .three-panels .white-card .white-card-block .table-display {
        display: table;
        width: 100%; }
        .res-water .third-section .three-panels .white-card .white-card-block .table-display .left-side {
          display: table-cell;
          width: 15%;
          margin: 5%;
          vertical-align: middle;
          padding-left: 5%; }
        .res-water .third-section .three-panels .white-card .white-card-block .table-display .right-side {
          display: table-cell;
          vertical-align: middle;
          width: 90%;
          padding: 0 8%; }
          .res-water .third-section .three-panels .white-card .white-card-block .table-display .right-side p {
            margin: 0; }
  .res-water .third-section .two-panels {
    width: 100%;
    padding-top: 15px;
    margin: 0 auto; }
    .res-water .third-section .two-panels .white-card {
      margin: 15px 0; }
    .res-water .third-section .two-panels img {
      max-width: 100%; }
  .res-water .third-section .feat-video {
    padding: 50px 0;
    margin: 0 auto;
    position: relative; }
    .res-water .third-section .feat-video .video-container-2 {
      position: absolute;
      width: 100%; }
      .res-water .third-section .feat-video .video-container-2 iframe {
        width: 100%;
        height: 100%; }
    .res-water .third-section .feat-video .layover-2 img {
      width: 100%;
      z-index: 999;
      position: relative;
      box-shadow: 5px 10px 50px #888888; }
    .res-water .third-section .feat-video .layover-2 .style-for-big-ribbon {
      position: absolute;
      z-index: 9999;
      width: 45%;
      box-shadow: none;
      top: 95px;
      left: -15px; }
      @media only screen and (min-width: 576px) {
        .res-water .third-section .feat-video .layover-2 .style-for-big-ribbon {
          left: -10px; } }
      @media only screen and (min-width: 992px) {
        .res-water .third-section .feat-video .layover-2 .style-for-big-ribbon {
          left: -15px; } }
  .res-water .third-section .bottom-row {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    padding-bottom: 100px; }
    .res-water .third-section .bottom-row button {
      margin: 15px; }
.res-water .fourth-section {
  background-image: url("https://media.ruud.com/site/ruuddotcom/_WP/css/images/innovations/row4bg.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top; }
  .res-water .fourth-section .header {
    padding: 75px 0 25px 0;
    margin: 0 auto; }
  .res-water .fourth-section .white-card {
    padding: 10px;
    margin: 15px 0; }
    .res-water .fourth-section .white-card .white-card-block .table-display {
      display: table;
      width: 100%; }
      .res-water .fourth-section .white-card .white-card-block .table-display .left-side {
        display: table-cell;
        width: 15%;
        margin: 5%;
        vertical-align: middle;
        padding-left: 5%; }
      .res-water .fourth-section .white-card .white-card-block .table-display .right-side {
        display: table-cell;
        vertical-align: middle;
        width: 90%;
        padding-left: 5%; }
        .res-water .fourth-section .white-card .white-card-block .table-display .right-side p {
          margin: 0; }
  .res-water .fourth-section .right-side table {
    border-collapse: collapse;
    width: 100%; }
  .res-water .fourth-section .right-side td,
  .res-water .fourth-section .right-side th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 15px; }
  .res-water .fourth-section .right-side th {
    background-color: white; }
  .res-water .fourth-section .right-side td {
    background-color: #f1be48;
    color: white; }
.res-water .fifth-section {
  background-color: #63666a;
  color: white;
  padding: 100px 125px;
  margin-bottom: -88px; }
  .res-water .fifth-section .header {
    margin: 0 auto; }
    .res-water .fifth-section .header h2 {
      color: white; }
  .res-water .fifth-section button {
    color: white;
    border-color: white; }

.res-gallery .hide {
  opacity: 0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -ms-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out; }
.res-gallery .second-section .two-panels .block-image {
  text-align: center;
  padding: 15px 0; }
.res-gallery .second-section .two-panels .gray-card {
  margin: 15px 0; }
.res-gallery .second-section .two-panels .ribbon-container {
  left: 5px; }
.res-gallery .second-section #air-inno-row button.btn-primary {
  color: #7a99ac;
  border: 2px solid #7a99ac; }
.res-gallery .second-section #water-inno-row-1 button.btn-primary, .res-gallery .second-section #water-inno-row-2 button.btn-primary {
  color: #ed8b00;
  border: 2px solid #ed8b00; }
.res-gallery .second-section #integ-inno-row button.btn-primary {
  color: #6bbbae;
  border: 2px solid #6bbbae; }

.res-hybrid .hide {
  opacity: 0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -ms-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out; }
.res-hybrid .first-section {
  background-image: url("https://media.ruud.com/site/ruuddotcom/_WP/css/images/innovations/hy-bg-1.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right; }
  .res-hybrid .first-section .left-side .header {
    display: none; }
    @media only screen and (min-width: 768px) {
      .res-hybrid .first-section .left-side .header {
        display: block; } }
    .res-hybrid .first-section .left-side .header .orange-lite {
      color: #ed8b00;
      display: block; }
  .res-hybrid .first-section .left-side .block {
    text-align: center; }
    .res-hybrid .first-section .left-side .block .img-block {
      height: 50px; }
      .res-hybrid .first-section .left-side .block .img-block img {
        max-height: 50px; }
  .res-hybrid .first-section .left-side .button {
    text-align: center;
    display: none; }
    @media only screen and (min-width: 768px) {
      .res-hybrid .first-section .left-side .button {
        display: block; } }
  .res-hybrid .first-section .header {
    display: block; }
    @media only screen and (min-width: 768px) {
      .res-hybrid .first-section .header {
        display: none; } }
    .res-hybrid .first-section .header .orange-lite {
      color: #ed8b00;
      display: block; }
  .res-hybrid .first-section .right-side {
    text-align: center;
    padding-bottom: 25px; }
    .res-hybrid .first-section .right-side .feature {
      text-align: center;
      width: 100%; }
  .res-hybrid .first-section .mobile-header {
    display: block;
    text-align: center;
    padding: 25px 0; }
    .res-hybrid .first-section .mobile-header img {
      width: 100%; }
    @media only screen and (min-width: 768px) {
      .res-hybrid .first-section .mobile-header {
        display: none; } }
.res-hybrid .second-section {
  background-image: url("https://media.ruud.com/site/ruuddotcom/_WP/css/images/innovations/hy-sec-2-bg.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center; }
  .res-hybrid .second-section .header {
    padding: 75px 0 25px 0;
    margin: 0 auto; }
  .res-hybrid .second-section img {
    width: 100%; }
  .res-hybrid .second-section .feat-video {
    padding: 50px 0;
    margin: 0 auto;
    position: relative; }
    .res-hybrid .second-section .feat-video .video-container {
      position: absolute;
      width: 100%; }
      .res-hybrid .second-section .feat-video .video-container iframe {
        width: 100%;
        height: 100%; }
    .res-hybrid .second-section .feat-video .layover img {
      width: 100%;
      z-index: 999;
      position: relative;
      box-shadow: 5px 10px 50px #888888; }
.res-hybrid .third-section {
  background-image: url("https://media.ruud.com/site/ruuddotcom/_WP/css/images/innovations/hy-HybridTank.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right; }
  @media only screen and (min-width: 992px) {
    .res-hybrid .third-section {
      background-image: url("https://media.ruud.com/site/ruuddotcom/_WP/css/images/innovations/hy-HybridTank-desktop.png");
      background-size: contain;
      background-repeat: no-repeat;
      background-position: right; } }
  .res-hybrid .third-section .header {
    padding: 75px 0 25px 0; }
  .res-hybrid .third-section .ribbon-container {
    position: absolute;
    overflow: hidden;
    width: 250px;
    height: 60px;
    top: -35px;
    left: -10px; }
  .res-hybrid .third-section .rel-pos {
    position: relative; }
  .res-hybrid .third-section #second-one {
    padding-top: 30px; }
    .res-hybrid .third-section #second-one .ribbon-container {
      top: 10px; }
  .res-hybrid .third-section .white-card {
    padding: 10px;
    margin: 15px 0; }
    .res-hybrid .third-section .white-card .white-card-block .table-display {
      display: table;
      width: 100%; }
      .res-hybrid .third-section .white-card .white-card-block .table-display .left-side {
        display: table-cell;
        width: 15%;
        margin: 5%;
        vertical-align: middle;
        padding-left: 5%; }
      .res-hybrid .third-section .white-card .white-card-block .table-display .right-side {
        display: table-cell;
        vertical-align: middle;
        width: 90%;
        padding-left: 5%; }
        .res-hybrid .third-section .white-card .white-card-block .table-display .right-side p {
          margin: 0; }
  .res-hybrid .third-section .logo-icons {
    display: block; }
    @media only screen and (min-width: 992px) {
      .res-hybrid .third-section .logo-icons {
        display: none; } }
    .res-hybrid .third-section .logo-icons img {
      width: 100%; }
  .res-hybrid .third-section .desktop-logos {
    display: none; }
    @media only screen and (min-width: 992px) {
      .res-hybrid .third-section .desktop-logos {
        display: block; } }
.res-hybrid .fourth-section {
  background-image: url("https://media.ruud.com/site/ruuddotcom/_WP/css/images/innovations/row2bg.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top; }
  .res-hybrid .fourth-section .header {
    padding: 75px 25px; }
  .res-hybrid .fourth-section .desktop {
    width: 100%;
    max-width: 1140px;
    display: none; }
    @media only screen and (min-width: 768px) {
      .res-hybrid .fourth-section .desktop {
        display: block;
        margin: 0 auto;
        padding: 100px; }
        .res-hybrid .fourth-section .desktop img {
          width: 100%; } }
  .res-hybrid .fourth-section .inno-hy-slider {
    display: block; }
    @media only screen and (min-width: 768px) {
      .res-hybrid .fourth-section .inno-hy-slider {
        display: none; } }
  .res-hybrid .fourth-section .bx-wrapper {
    max-width: 100%;
    border: 0px solid #fff;
    box-shadow: none;
    background: transparent; }
    .res-hybrid .fourth-section .bx-wrapper li img {
      margin: auto; }
    .res-hybrid .fourth-section .bx-wrapper .bx-pager,
    .res-hybrid .fourth-section .bx-wrapper .bx-default-pager {
      display: none; }
.res-hybrid .fifth-section {
  background-image: url("https://media.ruud.com/site/ruuddotcom/_WP/css/images/innovations/row3bg.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center; }
  .res-hybrid .fifth-section .header {
    padding: 50px 0;
    text-align: center; }
  .res-hybrid .fifth-section img {
    width: 100%;
    padding-top: 50px; }
  .res-hybrid .fifth-section .legal p {
    font-size: 11px;
    padding-bottom: 50px; }
  .res-hybrid .fifth-section .rheemtabcontentpane {
    border: none; }
  .res-hybrid .fifth-section .right-side {
    display: none; }
    @media only screen and (min-width: 768px) {
      .res-hybrid .fifth-section .right-side {
        display: block; } }
.res-hybrid .sixth-section .header {
  padding: 50px 0;
  text-align: center; }
.res-hybrid .sixth-section .video-row {
  padding-bottom: 50px; }
  .res-hybrid .sixth-section .video-row img {
    width: 100%; }
  .res-hybrid .sixth-section .video-row span {
    color: #e70033; }
  .res-hybrid .sixth-section .video-row a:active, .res-hybrid .sixth-section .video-row a:focus {
    outline: none;
    border: none; }
.res-hybrid .seventh-section {
  background-color: #f7f7f5;
  background-image: url("https://media.ruud.com/site/ruuddotcom/_WP/css/images/innovations/hy-sec-7-corner.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: right bottom; }
  @media only screen and (min-width: 768px) {
    .res-hybrid .seventh-section {
      background-image: url("https://media.ruud.com/site/ruuddotcom/_WP/css/images/innovations/hy-sec-7-corner-2.png");
      background-size: cover;
      background-position: top right; } }
  .res-hybrid .seventh-section img {
    width: 100%;
    max-height: 75px;
    max-width: 75px; }
  .res-hybrid .seventh-section .header {
    padding: 50px 0;
    text-align: left; }
  .res-hybrid .seventh-section .button {
    padding-bottom: 50px; }
.res-hybrid .eight-section {
  background-color: #f7f7f5;
  background-image: url("https://media.ruud.com/site/ruuddotcom/_WP/css/images/innovations/gal-sec1-bg.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top; }
  .res-hybrid .eight-section .header {
    padding: 50px 0;
    text-align: left; }
  .res-hybrid .eight-section .bottom {
    width: 100%; }
    @media only screen and (min-width: 768px) {
      .res-hybrid .eight-section .bottom .little-pad {
        padding: 50px 0; } }
    .res-hybrid .eight-section .bottom img {
      width: 100%; }
    .res-hybrid .eight-section .bottom h2 {
      text-align: center; }
    .res-hybrid .eight-section .bottom div {
      text-align: center; }
    .res-hybrid .eight-section .bottom .button {
      padding: 10px 0; }
      @media only screen and (min-width: 768px) {
        .res-hybrid .eight-section .bottom .button {
          padding: 50px 0; } }
.res-hybrid .nine-section {
  background-color: #e70033;
  color: white;
  padding: 100px 125px;
  margin-bottom: -88px; }
  .res-hybrid .nine-section .header {
    margin: 0 auto; }
    .res-hybrid .nine-section .header h2 {
      color: white; }
  .res-hybrid .nine-section button {
    color: white;
    border-color: white; }

.res-minisplit .hide {
  opacity: 0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -ms-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out; }
.res-minisplit .first-section {
  background-image: none; }
  @media only screen and (min-width: 768px) {
    .res-minisplit .first-section {
      background-image: url("https://media.ruud.com/site/ruuddotcom/_WP/css/images/innovations/ms-feat.png");
      background-size: contain;
      background-repeat: no-repeat;
      background-position: right; } }
  .res-minisplit .first-section .left-side .header .blue-lite {
    color: #7a99ac;
    display: block; }
  .res-minisplit .first-section .left-side .block {
    text-align: center; }
    .res-minisplit .first-section .left-side .block .img-block {
      height: 50px; }
  .res-minisplit .first-section .left-side .button {
    text-align: center; }
  .res-minisplit .first-section .right-side {
    text-align: center;
    padding-bottom: 25px; }
    .res-minisplit .first-section .right-side .mobile-feature {
      text-align: center; }
      @media only screen and (min-width: 768px) {
        .res-minisplit .first-section .right-side .mobile-feature {
          display: none; } }
.res-minisplit .second-section {
  background-image: url("https://media.ruud.com/site/ruuddotcom/_WP/css/images/innovations/ms-feat-bg.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center; }
  .res-minisplit .second-section img {
    width: 100%; }
.res-minisplit .third-section .header {
  padding: 75px 0 25px 0;
  margin: 0 auto; }
.res-minisplit .third-section .left-side-1 {
  background-color: #6cc5be;
  height: 100%;
  padding-top: 25%; }
  .res-minisplit .third-section .left-side-1 img {
    width: 100%; }
.res-minisplit .third-section .ribbon-container {
  position: absolute;
  overflow: hidden;
  width: 250px;
  height: 60px;
  top: -35px;
  left: -10px; }
.res-minisplit .third-section .rel-pos {
  position: relative; }
.res-minisplit .third-section .white-card,
.res-minisplit .third-section .gray-card {
  margin: 15px 0; }
  .res-minisplit .third-section .white-card .white-card-block .table-display,
  .res-minisplit .third-section .white-card .gray-card-block .table-display,
  .res-minisplit .third-section .gray-card .white-card-block .table-display,
  .res-minisplit .third-section .gray-card .gray-card-block .table-display {
    display: table;
    width: 100%; }
    .res-minisplit .third-section .white-card .white-card-block .table-display .left-side,
    .res-minisplit .third-section .white-card .gray-card-block .table-display .left-side,
    .res-minisplit .third-section .gray-card .white-card-block .table-display .left-side,
    .res-minisplit .third-section .gray-card .gray-card-block .table-display .left-side {
      display: table-cell;
      width: 15%;
      margin: 5%;
      vertical-align: middle;
      padding-left: 5%; }
    .res-minisplit .third-section .white-card .white-card-block .table-display .right-side,
    .res-minisplit .third-section .white-card .gray-card-block .table-display .right-side,
    .res-minisplit .third-section .gray-card .white-card-block .table-display .right-side,
    .res-minisplit .third-section .gray-card .gray-card-block .table-display .right-side {
      display: table-cell;
      vertical-align: middle;
      width: 90%;
      padding: 0 8%; }
      .res-minisplit .third-section .white-card .white-card-block .table-display .right-side h4,
      .res-minisplit .third-section .white-card .gray-card-block .table-display .right-side h4,
      .res-minisplit .third-section .gray-card .white-card-block .table-display .right-side h4,
      .res-minisplit .third-section .gray-card .gray-card-block .table-display .right-side h4 {
        color: #e4002b; }
      .res-minisplit .third-section .white-card .white-card-block .table-display .right-side p,
      .res-minisplit .third-section .white-card .gray-card-block .table-display .right-side p,
      .res-minisplit .third-section .gray-card .white-card-block .table-display .right-side p,
      .res-minisplit .third-section .gray-card .gray-card-block .table-display .right-side p {
        margin: 0; }
.res-minisplit .fourth-section {
  background-image: url("https://media.ruud.com/site/ruuddotcom/_WP/css/images/innovations/ms-feat-bg-2.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top; }
  .res-minisplit .fourth-section .header {
    padding: 75px 0 25px 0; }
  .res-minisplit .fourth-section .single span {
    display: block;
    color: #7a99ac; }
  .res-minisplit .fourth-section .double span {
    display: block;
    color: #a9c47f; }
  .res-minisplit .fourth-section .right-side {
    width: 100%; }
    .res-minisplit .fourth-section .right-side table {
      border-collapse: collapse;
      width: 100%; }
      .res-minisplit .fourth-section .right-side table tr:nth-child(even) {
        background-color: #f2f5f7; }
      .res-minisplit .fourth-section .right-side table tr:nth-child(odd) {
        background-color: #fff; }
      .res-minisplit .fourth-section .right-side table th,
      .res-minisplit .fourth-section .right-side table td {
        padding: 15px 0; }
      .res-minisplit .fourth-section .right-side table th {
        width: 25%; }
  .res-minisplit .fourth-section .red {
    color: #e70033; }
.res-minisplit .fifth-section {
  background-image: url("https://media.ruud.com/site/ruuddotcom/_WP/css/images/innovations/ms-sec5-bg.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom; }
  .res-minisplit .fifth-section img {
    width: 100%;
    padding: 50px 0; }
  .res-minisplit .fifth-section .bottom {
    width: 100%; }
    .res-minisplit .fifth-section .bottom img {
      width: 100%; }
    .res-minisplit .fifth-section .bottom h2 {
      text-align: center; }
    .res-minisplit .fifth-section .bottom div {
      text-align: center; }
    .res-minisplit .fifth-section .bottom .button {
      padding: 10px 0; }
      @media only screen and (min-width: 768px) {
        .res-minisplit .fifth-section .bottom .button {
          padding: 50px 0; } }
  .res-minisplit .fifth-section .header {
    padding: 75px 0 25px 0; }
.res-minisplit .sixth-section {
  background-color: #63666a;
  color: white;
  padding: 100px 125px;
  margin-bottom: -88px; }
  .res-minisplit .sixth-section .header {
    margin: 0 auto; }
    .res-minisplit .sixth-section .header h2 {
      color: white; }
  .res-minisplit .sixth-section button {
    color: white;
    border-color: white; }

.res-marathon .hide {
  opacity: 0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -ms-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out; }
.res-marathon .first-section {
  background-image: url("https://media.ruud.com/site/ruuddotcom/_WP/css/images/innovations/hy-bg-1.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right; }
  .res-marathon .first-section .left-side .header {
    display: none; }
    @media only screen and (min-width: 768px) {
      .res-marathon .first-section .left-side .header {
        display: block; } }
    .res-marathon .first-section .left-side .header .orange-lite {
      color: #ed8b00;
      display: block; }
  .res-marathon .first-section .left-side .block {
    text-align: center; }
    .res-marathon .first-section .left-side .block .img-block {
      height: 50px; }
      .res-marathon .first-section .left-side .block .img-block img {
        max-height: 50px; }
  .res-marathon .first-section .left-side .button {
    text-align: center;
    display: none; }
    @media only screen and (min-width: 768px) {
      .res-marathon .first-section .left-side .button {
        display: block; } }
  .res-marathon .first-section .header {
    display: block; }
    @media only screen and (min-width: 768px) {
      .res-marathon .first-section .header {
        display: none; } }
    .res-marathon .first-section .header .orange-lite {
      color: #ed8b00;
      display: block; }
  .res-marathon .first-section .right-side {
    text-align: center;
    padding-bottom: 25px; }
    .res-marathon .first-section .right-side .feature {
      text-align: center;
      width: 100%; }
.res-marathon .second-section {
  background-image: url("https://media.ruud.com/site/ruuddotcom/_WP/css/images/innovations/row2bg.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom; }
  .res-marathon .second-section .header {
    text-align: center;
    margin: 0 auto;
    padding: 50px 0; }
  .res-marathon .second-section img {
    width: 100%; }
.res-marathon .third-section {
  background-image: url("https://media.ruud.com/site/ruuddotcom/_WP/css/images/innovations/hy-sec-2-bg.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center; }
  .res-marathon .third-section .header {
    padding: 75px 0 25px 0;
    margin: 0 auto; }
  .res-marathon .third-section .button a {
    text-decoration: none; }
    .res-marathon .third-section .button a img {
      vertical-align: middle; }
    .res-marathon .third-section .button a span {
      color: #e70033; }
.res-marathon .fourth-section .header {
  padding: 75px 0 0 0; }
.res-marathon .fourth-section .white-card {
  padding: 10px;
  margin: 15px 0; }
  .res-marathon .fourth-section .white-card .white-card-block .table-display {
    display: table;
    width: 100%; }
    .res-marathon .fourth-section .white-card .white-card-block .table-display .left-side {
      display: table-cell;
      width: 15%;
      margin: 5%;
      vertical-align: middle;
      padding-left: 5%; }
    .res-marathon .fourth-section .white-card .white-card-block .table-display .right-side {
      display: table-cell;
      vertical-align: middle;
      width: 90%;
      padding-left: 5%; }
      .res-marathon .fourth-section .white-card .white-card-block .table-display .right-side h4 {
        color: #ed8b00; }
      .res-marathon .fourth-section .white-card .white-card-block .table-display .right-side p {
        margin: 0; }
  .res-marathon .fourth-section .white-card:hover, .res-marathon .fourth-section .white-card:active {
    border: 1px solid #ed8b00; }
    .res-marathon .fourth-section .white-card:hover .white-card-block .table-display .right-side h4, .res-marathon .fourth-section .white-card:active .white-card-block .table-display .right-side h4 {
      color: #63666a; }
.res-marathon .fourth-section .video-row {
  padding: 25px; }
  .res-marathon .fourth-section .video-row img {
    width: 100%; }
  .res-marathon .fourth-section .video-row a:active, .res-marathon .fourth-section .video-row a:focus {
    outline: none;
    border: none; }
.res-marathon .fifth-section {
  background-image: url("https://media.ruud.com/site/ruuddotcom/_WP/css/images/innovations/mar-bg-2.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center; }
  .res-marathon .fifth-section .header {
    padding: 50px 0;
    text-align: center; }
  .res-marathon .fifth-section img {
    padding-top: 50px; }
  .res-marathon .fifth-section .rheemtabcontentpane {
    border: none;
    text-align: center; }
.res-marathon .sixth-section {
  padding: 50px 0; }
  .res-marathon .sixth-section .header {
    width: 100%; }
  .res-marathon .sixth-section .row {
    width: 100%; }
  .res-marathon .sixth-section h2 {
    text-align: center; }
  .res-marathon .sixth-section div {
    margin: 0 auto; }
  .res-marathon .sixth-section .button {
    padding: 10px 0; }
    @media only screen and (min-width: 768px) {
      .res-marathon .sixth-section .button {
        padding: 50px 0; } }
.res-marathon .seventh-section {
  background-color: #e70033;
  color: white;
  padding: 50px;
  margin-bottom: -88px; }
  @media only screen and (min-width: 768px) {
    .res-marathon .seventh-section {
      padding: 100px 125px; } }
  .res-marathon .seventh-section .header {
    margin: 0 auto; }
    .res-marathon .seventh-section .header h2 {
      color: white; }
  .res-marathon .seventh-section button {
    color: white;
    border-color: white; }