/*
File: home.css
Home page overrides
*/

#rf-body .rf-home--slider .et_pb_container {
}

#et-main-area .room-card {
  background-color: var(--color-5);
  border-radius: 10px;
  padding: 3rem 3rem;
  box-shadow: rgba(41, 41, 41, 0.3) 3px 3px 0 0;
}
.room-card .mphb-room-type-details-title {
  font-size: 28px !important;
}
.mphb-reserve-btn {
  border: 2px solid #01555b !important;
}

/*
File: home.css (converted from _home.scss)
This should contain overrides for home page

Note: SCSS variables have been converted to CSS custom properties (variables).
Define these CSS variables in your root or appropriate scope:
- --color-font-inverse
- --color-3
- --color-1
- --color-ui-1
- --color-font-1
- --transition-standard
- --breakpoint-tablet (used as 768px in media queries)
- --breakpoint-smartphone (used as 480px in media queries)
*/

#et-main-area .room-card {
  border-radius: 10px;
  padding-bottom: 3rem;
}

@media only screen and (min-width: 768px) {
  #et-main-area .room-card {
    padding: 3rem 3rem;
  }
}

#et-main-area .room-card .mphb-room-type-details-title {
  font-size: 20px !important;
}

#et-main-area .room-card .mphb-book-button {
  font-size: 28px !important;
  text-decoration: underline #c7932d;
  border: solid #c7932d 2px;
}

#rf-body .mphb-room-number {
  font-size: 24px !important;
}

#rf-body .mphb-recommendation-reserve-button {
  padding: 0.5rem 2rem;
  font-size: 24px !important;
  border: solid #c7932d 2px;
}

#rf-body .mphb_sc_checkout-form section {
  box-shadow: 0 2px 8px 0 rgba(26, 26, 26, 0.17);
  padding: 1rem;
}

#rf-body .mphb-reserve-room-section {
  align-items: center;
  display: flex;
  flex-direction: column;
}

#rf-body .datepick-month {
  width: 20rem !important;
  font-size: 100%;
}

#rf-body .datepick {
  width: 40.2rem !important;
}

@media only screen and (max-width: 480px) {
  #rf-body .datepick {
    width: 20.1rem !important;
  }
}

#rf-body .mphb-calendar {
  display: flex !important;
  justify-content: center;
}

#rf-body .mphb-room-type {
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  padding: 3rem 3rem;
  box-shadow: 0 2px 8px 0 rgba(25, 25, 25, 0.17);
  align-items: center;
}

#rf-body .mphb-room-type .mphb-room-type-details-title {
  font-size: 20px !important;
}

#rf-body .mphb-room-type .mphb-book-button {
  font-size: 28px !important;
  text-decoration: underline #c7932d;
  border: solid #c7932d 2px;
}

#rf-body .rf-home-slider .et_pb_container {
  margin: 0 !important;
}

#rf-body .rf-home-slider .et_pb_slide_description {
  height: 640px;
  padding: 16% 6%;
}

#rf-body .rf-home-slider .et_pb_slide_description .et_pb_slide_title {
  text-align: left !important;
  float: left;
  text-decoration: none !important;
  display: flex;
  height: 70%;
  align-items: center;
  line-height: 5.5rem;
  color: white;
}

@media screen and (min-width: 768px) {
  #rf-body .rf-home-slider .et_pb_slide_description .et_pb_slide_title {
    font-size: 90px;
  }
}

#rf-body .rf-home-slider .et-pb-controllers {
  display: none;
}

#rf-body .rf-check-availability-section {
  padding-bottom: 0 !important;
}

#rf-body .rf-check-availability-section .rf-check-availability-row {
  position: relative;
  bottom: 15rem;
}

#rf-body
  .rf-check-availability-section
  .rf-check-availability-row
  .rf-check-availability {
  background-color: var(--color-font-inverse);
  border: 1px solid var(--color-3);
  height: auto;
  margin-bottom: -175px;
}

#rf-body
  .rf-check-availability-section
  .rf-check-availability-row
  .rf-check-availability
  .et_pb_code_inner {
  padding: 4rem;
}

#rf-body .mphb-recommendation-title {
  display: none;
}

#rf-body .mphb-recommendation {
  display: none;
}

#rf-body .mphb-booking-form {
  display: flex;
  flex-direction: column;
  align-items: start;
}

#rf-body {
  padding-bottom: 0 !important;
}

#rf-body {
  padding: 0;
}

#rf-body .rf-fullwidth-collage {
  height: 660px;
  color: white !important;
}

#rf-body .rf-fullwidth-collage .et_pb_text_inner {
  height: 100%;
  width: 100%;
  display: flex;
  padding: 5rem 7rem;
}

#rf-body .rf-fullwidth-collage .et_pb_text_inner h2 {
  text-decoration: none;
}

#rf-body .rf-fullwidth-collage .et_pb_text_inner h2::after {
  content: url("https://www.jtsonthekeys.com/wp-content/uploads/2020/10/Grid-Icon.svg");
  display: inline-block;
  width: 58px;
  height: auto;
  margin-left: 1rem;
}

#rf-body .rf-fullwidth-collage.rooms .et_pb_text_inner,
#rf-body .rf-fullwidth-collage.docks .et_pb_text_inner {
  align-items: flex-start;
}

@media screen and (max-width: 768px) {
  #rf-body .rf-fullwidth-collage.rooms .et_pb_text_inner,
  #rf-body .rf-fullwidth-collage.docks .et_pb_text_inner {
    justify-content: center !important;
  }
}

#rf-body .rf-fullwidth-collage.activities .et_pb_text_inner,
#rf-body .rf-fullwidth-collage.specials .et_pb_text_inner {
  align-items: flex-end;
}

@media screen and (max-width: 768px) {
  #rf-body .rf-fullwidth-collage.activities .et_pb_text_inner,
  #rf-body .rf-fullwidth-collage.specials .et_pb_text_inner {
    justify-content: center !important;
  }
}

#rf-body .rf-fullwidth-collage.rooms .et_pb_text_inner,
#rf-body .rf-fullwidth-collage.activities .et_pb_text_inner {
  justify-content: flex-start;
}

@media screen and (max-width: 768px) {
  #rf-body .rf-fullwidth-collage.rooms .et_pb_text_inner,
  #rf-body .rf-fullwidth-collage.activities .et_pb_text_inner {
    justify-content: center !important;
  }
}

#rf-body .rf-fullwidth-collage.docks .et_pb_text_inner,
#rf-body .rf-fullwidth-collage.specials .et_pb_text_inner {
  justify-content: flex-end;
}

@media screen and (max-width: 768px) {
  #rf-body .rf-fullwidth-collage.docks .et_pb_text_inner,
  #rf-body .rf-fullwidth-collage.specials .et_pb_text_inner {
    justify-content: center !important;
  }
}

#rf-body #rf-events-section .et_pb_column:first-of-type {
  order: 1;
}

#rf-body #rf-events-section .et_pb_column:last-of-type {
  order: 3;
}

#rf-body #rf-events-section .et_pb_row::before {
  content: "";
  display: block;
  width: 1px;
  background-color: var(--color-1);
  margin: initial;
  z-index: 99;
  position: relative;
  left: -6%;
  order: 2;
}

#rf-body #rf-events-section .rf-events-blog .entry-title {
  text-decoration: none;
  text-align: left;
  line-height: normal;
}

#rf-body #rf-events-section .rf-events-blog .tag-offroad .entry-title::before {
  content: "";
  background-image: url("https://www.jtsonthekeys.com/wp-content/uploads/2020/11/truck.svg");
  width: 66px;
  height: 66px;
  position: relative;
  left: -5rem;
  top: 0;
  display: inline-block;
}

#rf-body #rf-events-section .rf-events-blog .tag-boating .entry-title::before {
  content: "";
  background-image: url("https://www.jtsonthekeys.com/wp-content/uploads/2020/11/boat.svg");
  width: 66px;
  height: 66px;
  position: relative;
  left: -5rem;
  top: 0;
  display: inline-block;
}

#rf-body #rf-events-section .rf-events-blog .tag-drinking .entry-title::before {
  content: "";
  background-image: url("https://www.jtsonthekeys.com/wp-content/uploads/2020/11/drink.svg");
  width: 66px;
  height: 66px;
  position: relative;
  left: -5rem;
  top: 0;
  display: inline-block;
}

#rf-body .rf-activities-row .rf-activities-image {
  height: 330px;
}

#rf-body .rf-activities-row .rf-activities-image .et_pb_text_inner {
  transition: var(--transition-standard);
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(
    --color-ui-1
  ); /* Original SCSS: rgba($color-ui-1, 0.8) - adjust opacity in your variable definition */
}

#rf-body .rf-activities-row .rf-activities-image .et_pb_text_inner p:before {
  content: url("https://www.jtsonthekeys.com/wp-content/uploads/2020/10/Asset-1.svg");
}

#rf-body .rf-activities-row .rf-activities-image .et_pb_text_inner:not(:hover) {
  opacity: 0;
}

#rf-body
  .rf-activities-row
  .rf-activities-image
  .et_pb_text_inner
  .et_pb_button::before {
  content: "";
  background-image: url("https://www.jtsonthekeys.com/wp-content/uploads/2020/11/boat.svg");
  width: 50%;
  height: 50%;
  position: relative;
  left: -30%;
  top: 0%;
  display: inline-block;
}

#rf-body
  .rf-activities-row
  .rf-activities-image
  .et_pb_text_inner
  .cards-icon-button::before {
  content: "";
  background-image: url("https://www.jtsonthekeys.com/wp-content/uploads/2020/11/cards.svg");
  width: 50%;
  height: 50%;
  position: relative;
  left: -15%;
  top: 0%;
  display: inline-block;
}

#rf-body
  .rf-activities-row
  .rf-activities-image
  .et_pb_text_inner
  .canoe-icon-button::before {
  content: "";
  background-image: url("https://www.jtsonthekeys.com/wp-content/uploads/2020/11/canoe.svg");
  width: 50%;
  height: 50%;
  position: relative;
  left: -30%;
  top: 0%;
  display: inline-block;
}

#rf-body
  .rf-activities-row
  .rf-activities-image
  .et_pb_text_inner
  .drink-icon-button::before {
  content: "";
  background-image: url("https://www.jtsonthekeys.com/wp-content/uploads/2020/11/drink.svg");
  width: 50%;
  height: 50%;
  position: relative;
  left: -15%;
  top: 0%;
  display: inline-block;
}

#rf-body
  .rf-activities-row
  .rf-activities-image
  .et_pb_text_inner
  .dirtbike-icon-button::before {
  content: "";
  background-image: url("https://www.jtsonthekeys.com/wp-content/uploads/2020/11/dirtbike.svg");
  width: 50%;
  height: 50%;
  position: relative;
  left: -30%;
  top: 0%;
  display: inline-block;
}

#rf-body
  .rf-activities-row
  .rf-activities-image
  .et_pb_text_inner
  .jetski-icon-button::before {
  content: "";
  background-image: url("https://www.jtsonthekeys.com/wp-content/uploads/2020/11/jetski.svg");
  width: 50%;
  height: 50%;
  position: relative;
  left: -30%;
  top: 0%;
  display: inline-block;
}
.difl_imagehover,
.df_ihb_container,
.df_ihb_image_wrap {
  height: 100%;
}

#rf-body
  .rf-activities-row
  .rf-activities-image
  .et_pb_text_inner
  .offroad-icon-button::before {
  content: "";
  background-image: url("https://www.jtsonthekeys.com/wp-content/uploads/2020/11/truck.svg");
  width: 50%;
  height: 50%;
  position: relative;
  left: -30%;
  top: 0%;
  display: inline-block;
}

#rf-body .rf-home-cta {
  text-align: center;
}

#rf-body .rf-home-map .gm-style-cc,
#rf-body .rf-home-map .gmnoscreen,
#rf-body .rf-home-map .gmnoprint,
#rf-body .rf-home-map .gm-control-active,
#rf-body .rf-home-map .gm-fullscreen-control {
  display: none;
}

#rf-body .rf-home-map div a div img {
  display: none;
}

#rf-body .rf-instagram-feed #sb_instagram {
  position: relative;
  bottom: 7rem;
}

#rf-body .rf-instagram-feed #sbi_load {
  display: none;
}

#rf-body .rf-instagram-feed .sbi_header_link {
  margin: 0 0 0 0.55rem;
  position: relative;
  bottom: -2rem;
  padding: 0.5rem;
  border: 1px solid var(--color-3);
  background-color: var(--color-font-inverse);
  z-index: 9999;
}

#rf-body .rf-instagram-feed .sbi_header_link::before {
  content: "Follow us";
  width: 100%;
  display: inline-flex;
  justify-content: center;
  color: var(--color-font-1);
}

#rf-body .rf-instagram-feed .sbi_header_link .sbi_header_text,
#rf-body .rf-instagram-feed .sbi_header_link .sbi_header_img {
  display: inline-flex;
  justify-content: center;
}

#rf-body .rf-instagram-feed .sbi_header_link .sbi_header_text h3,
#rf-body .rf-instagram-feed .sbi_header_link .sbi_header_img h3 {
  margin: 0 !important;
}

#rf-body .rf-instagram-feed .sbi_header_img {
  background: transparent;
}

#rf-body .rf-instagram-feed .sbi_header_hashtag_icon,
#rf-body .rf-instagram-feed h3 {
  color: var(--color-1);
}

#rf-body .rf-instagram-feed h3::before {
  content: "@";
}

#rf-body .rf-instagram-feed #sbi_images {
  margin-bottom: -7rem;
}

#rf-body .rf-instagram-feed #sbi_images .sbi_photo_wrap .sbi_photo {
  height: 330px !important;
}

@media screen and (max-width: 768px) {
  #rf-body .fullwidth-header-rf .header-content {
    padding: 0 !important;
  }
}

#rf-body #et-main-area .room-card {
  background-color: var(--color-5);
  border-radius: 10px;
  padding: 3rem 3rem;
  box-shadow: rgba(41, 41, 41, 0.3) 3px 3px 0 0;
}
#rf-body .mphb-room-type-details-title {
  font-size: 28px !important;
}
#rf-body .mphb-reserve-btn {
  border: 2px solid #01555b !important;
}

.mphb_sc_search-form {
  display: flex;
  gap: 2rem;
  justify-content: center;
}

.mphb_sc_search-wrapper {
  padding: 3rem;
  border: var(--color-3) 1px solid;
  box-shadow: 1px 1px 1px 1px gray;
}