/**
 * #.# Common SCSS
 *
 * Can include things like variables and mixins
 * that are used across the project.
*/
@import url("https://fonts.googleapis.com/css?family=Rubik:300,300i,400,400i,500,500i,700,700i,900,900i&display=swap");
@import url("https://fonts.googleapis.com/css?family=Rubik:300,300i,400,400i,500,500i,700,700i,900,900i&display=swap");
/**
 * #.# Styles
 *
 * CSS for both Frontend+Backend.
 */
.home-hero {
  height: 590px;
  background-size: cover;
  background-position: center center;
  position: relative; }
  .home-hero:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    background: url(/wp-content/themes/sunwater/images/bg_tp.png) no-repeat;
    width: 52%;
    height: 64%;
    z-index: 1;
    background-position: right top; }
    @media only screen and (max-width: 1500px) {
      .home-hero:after {
        width: 60%;
        height: 64%;
        z-index: 1;
        background-position: right center; } }
    @media only screen and (max-width: 1023px) {
      .home-hero:after {
        width: 75%; } }
    @media only screen and (max-width: 767px) {
      .home-hero:after {
        width: 100%; } }
    @media only screen and (max-width: 375px) {
      .home-hero:after {
        width: 100%;
        background-size: 100% 100%;
        height: 50%;
        padding-left: 0; } }
  .home-hero:after {
    background: url(/wp-content/themes/sunwater/images/background-dark.png) no-repeat;
    background-position: right top; }
  .home-hero .hero-detail-home {
    bottom: 55px;
    max-width: 700px;
    padding-right: 100px;
    position: absolute;
    z-index: 5;
    padding-left: 15px; }
    @media only screen and (max-width: 1500px) {
      .home-hero .hero-detail-home {
        padding-left: 15px;
        max-width: 50%;
        padding-right: 0; } }
    @media only screen and (max-width: 767px) {
      .home-hero .hero-detail-home {
        max-width: 63%; } }
    @media only screen and (max-width: 375px) {
      .home-hero .hero-detail-home {
        padding-right: 15px;
        bottom: 5px; } }
    .home-hero .hero-detail-home h4 {
      font-size: 48px;
      margin-bottom: 0;
      line-height: 0.5;
      color: #fff;
      font-weight: 700; }
      @media only screen and (max-width: 1023px) {
        .home-hero .hero-detail-home h4 {
          font-size: 40px; } }
      @media only screen and (max-width: 767px) {
        .home-hero .hero-detail-home h4 {
          line-height: 1; } }
      @media only screen and (max-width: 575px) {
        .home-hero .hero-detail-home h4 {
          font-size: 26px; } }
    .home-hero .hero-detail-home .buttons_style .bg_btn {
      background: #031E2F;
      font-size: 16px;
      color: #fff;
      border: 1px solid #031E2F; }
    .home-hero .hero-detail-home p {
      font-size: 40px;
      color: #fff;
      font-weight: 300;
      line-height: 1.8;
      padding-right: 100px; }
      @media only screen and (max-width: 1023px) {
        .home-hero .hero-detail-home p {
          padding-right: 0; } }
      @media only screen and (max-width: 575px) {
        .home-hero .hero-detail-home p {
          font-size: 12px; } }
    .home-hero .hero-detail-home .form-control {
      display: inline; }
    .home-hero .hero-detail-home select {
      background-color: #00B0CA;
      border: solid 1px #00B0CA; }
      .home-hero .hero-detail-home select option {
        background-color: #fff; }
      .home-hero .hero-detail-home select option:hover {
        background-color: #fff; }
  .home-hero .heroAlert {
    right: 0;
    width: 50%;
    padding: 12px;
    background: #f2f7fb;
    border-bottom-left-radius: 0;
    font-size: 15px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
        justify-content: space-between;
    -ms-flex-align: center;
        align-items: center;
    max-height: 46px; }
    @media only screen and (max-width: 991px) {
      .home-hero .heroAlert {
        width: 100%;
        padding-left: 30px; } }
    .home-hero .heroAlert span.label {
      font-weight: 600;
      text-transform: uppercase;
      color: #00afca;
      padding-right: 10px;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
      /* Forces side columns to stay same width */ }
    .home-hero .heroAlert span.text {
      white-space: nowrap;
      overflow: hidden;
      -o-text-overflow: ellipsis;
         text-overflow: ellipsis;
      text-align: left;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
      /* Lets middle column shrink/grow to available width */ }
    .home-hero .heroAlert a {
      color: #102939;
      font-weight: 600;
      text-transform: uppercase;
      padding-right: 10px;
      white-space: nowrap;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
      /* Forces side columns to stay same width */ }
  .home-hero .heroAlert-before {
    content: "";
    background: url(/wp-content/themes/sunwater/images/weir.png) no-repeat;
    background-position: right top;
    width: 68px;
    height: 46px;
    background-size: cover; }
    @media only screen and (max-width: 991px) {
      .home-hero .heroAlert-before {
        display: none; } }
  .home-hero .alert-container {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    -ms-flex-pack: end;
        justify-content: flex-end;
    -ms-flex-align: start;
        align-items: flex-start; }