/* -------------------------------------

REALTYNINJA KATANA WEBSITE CUSTOMIZATION 2022: KAGOME

Questions? Email info@realtyninja.com 
Date Created: 28/09/2022 by Rommel
Last Updated: 03/28/2025 by Rommel

--------------------------

0. Global Edits
1. Typography
2. Buttons
3. Header
4. Footer
5. Big / Small Contact Form Section
6. MLS Page / Listings / Search Forms
7. Homepage
7a. Tall Header Widget
7b. Quick search
7c. Intro Section
7d. Featured boxes
7e. Featured Neighbourhood section
8. Subpages
9.Third-Parties

--------------------------------------- */

/* 
-------------------------------------------------- 
0. Global Edits 
-------------------------------------------------- 
*/

:root {
  --primary-color: #c28563;
  --dark-color: #19130b;
  --secondary-color: #1b1a1b;
  --grey-color: #f3ede6;
  --grey-dark-color: #f3ede6;
  --white-color: #ffffff;
  --accent-hover: #AE8553;
  --accent-color: #c3a361;
  --body-fonts: 'Heebo', sans-serif;
  --btn-fonts: 'Heebo', sans-serif;
  --title-fonts: 'Nunito Sans', sans-serif;
  --sub-title-fonts: 'Heebo', sans-serif;
  --hover: #220217;
  --btn: #c3a361;
  --banner-height: 735px;
  --video-banner-overlay: rgba(0, 0, 0, 0.3);
  --transition-duration: 15000ms;
}

/* 
-------------------------------------------------- 
1. Typography
-------------------------------------------------- 
*/

.header1,
.header2,
.header3,
.header4,
.header5,
h1,
h2,
h3,
h4,
h5,
.recent-blog-entry-date,
.hero-carousel .carousel-caption h1,
.section-heading h3,
.listing-main-info h1,
.blog-header-title-section .blog-entry-info,
.blog-header-title-section h1,
.blog-overview-wrapper,
.blog-overview-wrapper h2 {
  font-family: var(--title-fonts);
}

.header1,
.header2,
.header3,
.header4,
.header5,
h1,
h2,
h3,
h4,
h5 {
  font-weight: 700;
}

body,
.header-contact-details,
.navbar-default .navbar-nav>li>a,
.big-contact-form-wrapper,
.small-contact-info-wrapper,
.hero-carousel .carousel-caption .btn,
.building-main-info-listings-count,
.listing-detail-info-list-container,
.listing-grid,
.listing-list,
.listing-main-info-price,
.listing-secondary-info,
#footer-disclaimer,
.recent-blog-entry-text,
.blog-post-content .header1,
.blog-post-content .header2,
.blog-post-content .header3,
.blog-post-content .header4,
.blog-post-content .header5,
.blog-post-content h1,
.blog-post-content h2,
.blog-post-content h3,
.blog-post-content h4,
.blog-post-content h5,
.blog-header-title-section .blog-entry-info,
.blog-post-content,
.blog-overview-wrapper,
.blog-overview-wrapper h2,
.mls-search-controls-wrapper .form-control {
  font-family: var(--sub-title-fonts);
}

a {
  transition: all .2s ease-in;
  -webkit-transition: all .2s ease-in;
  -moz-transition: all .2s ease-in;
  -ms-transition: all .2s ease-in;
  color: var(--primary);
}

a:hover {
  color: var(--secondary);
}

a:focus {
  text-decoration: none
}

/* 
-------------------------------------------------- 
2. Buttons
-------------------------------------------------- 
*/

.btn {
  transition: all .2s ease-in;
  font-family: var(--btn-fonts);
}

.btn-primary,
.rn-invert-colors .btn-primary,
.hero-carousel .carousel-caption .btn-primary {
  background-color: var(--btn);
  border-color: var(--btn);
  color: #fff;
}

.btn-primary:hover,
.rn-invert-colors .btn-primary:hover,
.hero-carousel .carousel-caption .btn-primary:hover {
  background-color: var(--accent-hover);
  border-color: var(--accent-hover);
}

.blog-overview-wrapper .btn-outline {
  color: var(--accent-color);
  border-color: var(--accent-color);
}

/* 
-------------------------------------------------- 
3. Header 
-------------------------------------------------- 
*/

.dropdown-menu a {
  transition: none;
  font-family: var(--sub-title-fonts);
  color: var(--secondary-color) !important;
}

.dropdown-menu>li>a:focus,
.dropdown-menu>li>a:hover {
  color: var(--white-color) !important;
  background-color: var(--accent-color) !important;
}

.navbar-nav>li>.dropdown-menu {
  border-radius: 0;
  margin-top: 0px;
  padding-top: 0px;
  border: none;
  box-shadow: none;
  background-color: var(--grey-color);
}

.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.open>a:focus,
.navbar-default .navbar-nav>.open>a:hover,
.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav>li>a:hover {
  color: var(--primary);
}

.navbar-default .navbar-nav .open .dropdown-menu>.active>a,
.navbar-default .navbar-nav .open .dropdown-menu>.active>a:focus,
.navbar-default .navbar-nav .open .dropdown-menu>.active>a:hover {
  background-color: var(--grey-dark-color);
}

.dropdown-menu>li>a:focus,
.dropdown-menu>li>a:hover {
  color: var(--primary);
  background-color: var(--secondary);
}

.navbar-brand img {
  max-width: 200px;
}

#navbar {
  background-color: var(--white-color);
  z-index: 999;
}

.navbar-toggle {
  position: relative;
  width: 44px;
  height: 36px;
}

.navbar-toggle .icon-bar+.icon-bar {
  margin: 0px;
}

.navbar-toggle .icon-bar {
  position: absolute;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}

.navbar-toggle span:nth-child(2) {
  top: 10px;
}

.navbar-toggle span:nth-child(3) {
  top: 16px;
}

.navbar-toggle span:nth-child(4) {
  opacity: 1;
  top: 22px;
}

.navbar-toggle.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.navbar-toggle.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.navbar-toggle.open span:nth-child(2) {
  top: 16px;
}

.navbar-toggle.open span:nth-child(4) {
  top: 16px;
  opacity: 0;
}

.navbar-default .navbar-toggle.collapsed[aria-expanded="false"]:hover {
  background: var(--btn);
  transition: all .2s ease-in;
}

.navbar-default .navbar-toggle.collapsed[aria-expanded="false"] .icon-bar {
  background:
    /* mobile menu button lines */
  ;
  transition: all .2s ease-in;
}

.navbar-default .navbar-toggle,
.rn-invert-colors .navbar-default .navbar-toggle {
  border-color: transparent;
}

.navbar-default .navbar-toggle:focus,
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle[aria-expanded="true"] {
  background: var(--dark-color);
}

.navbar-default .navbar-toggle:focus .icon-bar,
.navbar-default .navbar-toggle[aria-expanded="true"] .icon-bar {
  background: #fff;
}

.dropdown span {
  background: transparent !important;
}

.navbar-nav.sm-collapsible .caret:before {
  content: '\f078';
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.navbar-nav.sm-collapsible .open>a>.caret:before {
  content: '\f077';
}

.navbar-default .navbar-nav>li>a {
  color: var(--dark-color);
  font-family: var(--sub-title-fonts);
  font-weight: 500;
  font-size: 13px;
  line-height: 22px;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  border: none !important;
}

.navbar {
  margin-bottom: 0px;
}

.navbar-header-centered {
  margin-top: 0px;
}

#header-contact {
  margin-top: 0px;
  background-color: var(--dark-color);
}

#header-contact a {
  color: var(--white-color);
}

.header-account,
.header-contact-details,
.header-contact-social {
  margin-bottom: 0px;
}

#header-contact .header-contact-social .fa-circle {
  color: transparent;
}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
  .navbar-brand img {
    max-width: 250px;
  }

  .navbar-nav>li>.dropdown-menu {
    background-color: var(--white-color);
    margin-top: 15px !important;
    padding-top: 10px;
    border: none;
    box-shadow: 0px 7px 5px 0px rgba(0, 0, 0, 0.15);
    -webkit-box-shadow: 0px 7px 5px 0px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0px 7px 5px 0px rgba(0, 0, 0, 0.15);
  }
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 1200px) {
  #navbar {
    margin-left: auto;
  }

  .navbar>.container-fluid,
  .navbar>.container,
  #header-contact {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 0.5rem 1rem;
  }

  .navbar-brand {
    padding: 10px 15px;
  }
}

@media screen and (max-width: 767px) {
  #header-contact {
    display: none;
  }

  .navbar {
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    justify-content: space-between;
  }

  .navbar-toggle {
    padding: 0px;
    float: none;
    background-color: var(--accent-color);
    border-radius: 0px;
    padding: 10px;
    margin: 0px 15px;
    margin-left: auto;
  }

  .navbar-default .navbar-toggle .icon-bar {
    background-color: var(--white-color);
  }

  .navbar-collapse {
    margin-top: 70px;
  }

  .navbar .container-fluid {
    margin: 0px;
  }

  .navbar-default .navbar-nav>.active>a,
  .navbar-default .navbar-nav>.active>a:focus,
  .navbar-default .navbar-nav>.active>a:hover {
    color: var(--accent-color);
    background-color: transparent;
  }

  .nav>li {
    border-bottom: 1px solid var(--grey-dark-color);
  }

  .nav>li:last-child {
    border: none;
  }

  .navbar-default .navbar-nav>.open>a,
  .navbar-default .navbar-nav>.open>a:focus,
  .navbar-default .navbar-nav>.open>a:hover {
    color: var(--accent-color);
    background-color: var(--grey-color);
  }
}

/* 
-------------------------------------------------- 
4. Footer 
-------------------------------------------------- 
*/

.footer-section {
  /* whole footer section */
}

.section-custom-footer {
  /* empty editable section above disclaimer - usually padding is decreased */
  padding: 0px 0;
}

#footer-disclaimer {
  /* disclaimer section in footer - usually padding is decreased */
  padding: 0px 0 80px;
}

/* 
-------------------------------------------------- 
5. Big Contact Form / Quick Contact 
-------------------------------------------------- 
*/
.big-contact-form-container .contact-info-name,
.big-contact-form-container .contact-info-brokerage {
  display: none;
}

.section-quick-contact {
  background-color: #fff;
  background-size: contain;
  background-position: right bottom;
  background-repeat: no-repeat;
}

.big-contact-form-container .contact-info-social .fa-circle,
.small-contact-info-wrapper .contact-info-social .fa-circle,
.contact-info-address .fa,
.contact-info-email .fa,
.contact-info-fax .fa,
.contact-info-mobile .fa,
.contact-info-phone .fa,
.contact-info-toll-free .fa {
  color: var(--accent-color);
  margin-right: 5px;
}

.contact-info-social a:hover .fa-circle {
  color: var(--dark-color) !important;
}

.formContent .form-control {
  background: var(--secondary-color);
  border-color: var(--dark-color);
  color: #fff;
}

.custom-form .big-contact-form-wrapper {
  padding: 0px;
  position: relative;
}

.custom-form .big-contact-form-wrapper:before {
  content: "";
  background: rgb(255, 255, 255);
  background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 10%, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0) 90%, rgba(195, 163, 97, 1) 90%, rgba(195, 163, 97, 1) 100%); 
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

.custom-form .contact-info-container,
.custom-form .small-divider,
.custom-form p,
.custom-form .contact-info-social {
  display: none;
}

.big-contact-form-wrapper .col-lg-6 {
  background-color: var(--dark-color);
  padding: 60px;
  background-image: url(https://s.realtyninja.com/static/media/med/11083_7e13805d_old-black-background-grunge-texture-dark-wallpaper-blackboard-chalkboard-room-wall_1.jpg);
  background-size: cover;
}

.big-contact-form-wrapper .col-lg-6 h3 {
  font-weight: 700;
  font-size: 42px;
  line-height: 54px;
  margin-bottom: 20px;
  color: var(--accent-color);
  text-transform: uppercase;
}

.form-control {
  box-shadow: none;
  border-radius: 0;
  transition: all .2s ease-in;
}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {

  .formContent>div[class^="form-group"]:nth-child(2),
  .formContent>div[class^="form-group"]:nth-child(3) {
    width: 50%;
    display: inline-block;
  }

  .formContent>div[class^="form-group"]:nth-child(2) {
    margin-right: 20px;
    width: calc(50% - 25px);
  }
}

@media screen and (max-width: 991px) {
  .big-contact-form-wrapper .col-lg-6 {
    width: 80%;
  }
}

@media screen and (max-width: 767px) {
  .big-contact-form-wrapper .col-lg-6 {
    width: 100%;
  }

  .contact-info-contact-image {
    margin-top: 20px;
  }
}

.contact-info-contact-image {
  max-width: 200px;
  /* makes sure the image in the contact sections isn't too big */
}

/* 
-------------------------------------------------- 
6. MLS Page / Listings / Forms
-------------------------------------------------- 
*/

/* Featured Properties */
.featured-listings-wrapper .small-divider {
  display: none;
}

.featured-listings-wrapper .section-heading {
  margin-bottom: 60px;
}

.featured-listings-wrapper {
  font-size: 1em;
  background: rgb(255, 255, 255);
  background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 60%, rgba(255, 255, 255, 0) 60%);
}

.featured-listings-wrapper .container-fluid {
  width: 90vw;
}

.featured-listing-preview {
  height: 500px;
  position: relative;
  border: 10px solid var(--grey-color);
  box-shadow: 0 0 10px 0 rgb(0 0 0 / 30%);
  -webkit-box-shadow: 0 0 10px 0 rgb(0 0 0 / 30%);
  -moz-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
  overflow: hidden;
  transition: all .2s ease-in;
}

.featured-listing-preview:hover {
  border-width: 0px;
}

.img-listing-showcase,
.img-listing-showcase img {
  height: 500px;
  border-radius: 0px;
  position: relative;
}

.img-listing-showcase:before {
  content: "";
  background-color: var(--dark-color);
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  z-index: 1;
  opacity: .2;
  transition: all .2s ease-in;
}

.featured-listing-preview:hover .img-listing-showcase:before {
  background-color: var(--accent-hover);
  opacity: .5;
}

.featured-listing-info-container {
  position: absolute;
  bottom: 0;
  text-align: left;
  color: var(--white-color);
  width: 100%;
  padding: 0px 25px;
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .65) 51%, rgba(0, 0, 0, .65) 100%);
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .65) 51%, rgba(0, 0, 0, .65) 100%);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .65) 51%, rgba(0, 0, 0, .65) 100%);
}

.featured-listings-wrapper h4,
.featured-listing-desc-price,
.featured-listing-desc-primary,
.featured-listings-wrapper p {
  color: var(--white-color) !important;
  max-width: 300px;
}

.featured-listing-info-container h4 a {
  font-family: var(--sub-title-fonts);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 2px;
}

.slick-prev,
.slick-next {
  width: 64px !important;
  height: 64px !important;
  background: var(--accent-color) !important;
  z-index: 1 !important;
  transition: all .2s ease-in;
  opacity: 0;
}

.listing-slider:hover .slick-prev,
.listing-slider:hover .slick-next {
  opacity: 1;
}

.slick-prev:hover,
.slick-next:hover {
  background: var(--dark-color) !important;
}

.slick-next:before,
.slick-prev:before {
  transition: 0.5s;
  font-family: 'Material Symbols Outlined' !important;
  font-weight: 100;
  font-style: normal;
  font-size: 64px !important;
  color: var(--white-color) !important;
  position: absolute;
  left: 0;
  top: 0;
  display: block;
}

.slick-next:before {
  content: "\e5cc" !important;
}

.slick-prev:before {
  content: "\e5cb" !important;
}

.slick-dots li {
  background-color: var(--grey-dark-color) !important;
}

.slick-dots li.slick-active {
  background-color: var(--accent-color) !important;
}

.slick-dots li button:before {
  color: transparent !important;
}

/* Small Devices, Tablets */
@media only screen and (min-width : 992px) {
  .featured-listing-info-container {
    padding: 40px 25px;
  }
}

.featured-listing-desc-price {
  font-size: 16px;
}

.featured-listing-desc-primary,
/* listing address */
.featured-listing-desc-secondary

/* listing property type/area details */
  {
  font-size: 13px;
}

/* Quick Search Form */
.quick-mls-search-controls-wrapper {
  /* the container for our Quick MLS Search */
  padding-top: 0 !important;
}

/* Listing Search */
.section-mls-search    .mls-search-controls-wrapper {
    background-color: var(--grey-color);
}

.mls-search-controls-wrapper .ui-slider .ui-slider-range {
  /* change colours for the sliders in our MLS Search */
}

/* Single Property Listings */
.listing-ctas-main .btn-primary,
.listing-ctas-main .btn-secondary {
  /* buttons on the listing detail pages */
}

.listing-ctas-main .btn-secondary {
  background: var(--dark-color);
  color: #fff;
}

.listing-ctas-main .btn-secondary:hover {
  background: var(--accent-color);
  color: #fff;
}

.listing-lead-form-container {
  background: var(--dark-color);
}

@media only screen and (min-width: 992px) {
  .featured-listing-info-container h4 a {
    color: var(--primary);
    /* adds link colour to listing addresses */
  }
}

/* 
-------------------------------------------------- 
7. Homepage
-------------------------------------------------- 
*/

.section-agents .agents-form-wrapper {
  display: none; 
}

.agents-wrapper .container {
  padding-left: 0; 
  padding-right: 0;
}

.agents-wrapper .agent-container {
  position: relative;
  border-radius: 0; 
  border: 0; 
}

@media only screen and (min-width : 992px) {
  /* Medium Devices, Desktops */
  .agents-wrapper .agent-container {
    height: 442px;
  }
}

.agents-wrapper .agent-headshot {
  position: relative;
  height: 100%;
  border-radius: 0; 
  z-index: 1; 
}

.agent-headshot img {
  height: 100%; 
  object-position: top center;
}

.agent-content h4, 
.agent-content .agent-title {
  color: var(--white-color);
}

.agent-content .agent-title {
  text-transform: uppercase;
  letter-spacing: 0.0765rem; 
  font-size: 18px;
}

.agents-wrapper .agent-content {
  position: absolute;
  bottom: 0; 
  left: 0; 
  width: 100%; 
  text-align: center;
  z-index: 2; 
}

.agent-content .agent-email, 
.agent-content .agent-phone {
  float: none; 
  color: var(--white-color);
  margin: 0; 
  line-height: 1.7; 
}


.agent-content .agent-lang {
  display: none;
}

/* Listings Showcase */

.section-listings-showcase {
  position: relative; 
}

.section-listings-showcase::before {
  content: ''; 
  position: absolute; 
  top: 0; 
  left: 0; 
  height: 350px; 
  width: 100%; 
  background: url(https://s.realtyninja.com/static/media/med/11083_7e13805d_old-black-background-grunge-texture-dark-wallpaper-blackboard-chalkboard-room-wall_1.jpg);
  background-position: center center; 
  background-size: cover; 
  background-repeat: no-repeat; 
  z-index: -1; 
}

body.ddf .img-listing-showcase img {
  object-fit: cover; 
}

/* 
-------------------------------------------------- 
7a. Tall header Widget
-------------------------------------------------- 
*/
.hero-carousel .slide {
  margin: auto;
  height: 500px;
  width: 100%;
}

.hero-carousel .slide::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: inherit !important;
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-animation: kenburns var(--transition-duration) linear 0s infinite alternate;
  animation: kenburns var(--transition-duration) linear 0s infinite alternate;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -ms-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

@-webkit-keyframes kenburns {
  0% {
    -webkit-transform: scale(1);
    -webkit-transition: -webkit-transform var(--transition-duration) linear 0s
  }

  100% {
    -webkit-transform: scale(1.1);
    -webkit-transition: -webkit-transform var(--transition-duration) linear 0s
  }

}

@-moz-keyframes kenburns {
  0% {
    -moz-transform: scale(1);
    -moz-transition: -moz-transform var(--transition-duration) linear 0s
  }

  100% {
    -moz-transform: scale(1.1);
    -moz-transition: -moz-transform var(--transition-duration) linear 0s
  }

}

@-ms-keyframes kenburns {
  0% {
    -ms-transform: scale(1);
    -ms-transition: -ms-transform var(--transition-duration) linear 0s
  }

  100% {
    -ms-transform: scale(1.1);
    -ms-transition: -ms-transform var(--transition-duration) linear 0s
  }

}

@-o-keyframes kenburns {
  0% {
    -o-transform: scale(1);
    -o-transition: -o-transform var(--transition-duration) linear 0s
  }

  100% {
    -o-transform: scale(1.1);
    -o-transition: -o-transform var(--transition-duration) linear 0s
  }

}

@keyframes kenburns {
  0% {
    transform: scale(1);
    transition: transform var(--transition-duration) linear 0s
  }

  100% {
    transform: scale(1.1);
    transition: transform var(--transition-duration) linear 0s
  }

}

.hero-carousel .carousel-caption h1 {
  font-size: 14px;
  letter-spacing: 5px;
  font-weight: 200;
  line-height: 24px;
  font-family: var(--sub-title-fonts);
}

.hero-carousel .carousel-caption h4 {
  font-family: var(--title-fonts);
  font-size: 32px;
  font-weight: 700;
  color: var(--accent-color);
  text-transform: uppercase;
}

body.index .carousel-indicators {
  bottom: 75px;
}

.blog-overview-wrapper .btn-outline, .hero-carousel .carousel-inner .rn-invert-colors .btn,
.big-contact-form-container .btn,
#listingleadform .btn {
  color: #fff;
  border: none;
  border-radius: 3px;
  padding: 20px 35px;
  font-family: var(--sub-title-fonts);
  font-weight: 200;
  letter-spacing: 5px;
  font-size: 14px;
  background-color: var(--btn);
  text-transform: uppercase;
}

.icon-button {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.icon-button:after {
  content: '\eac9';
  position: absolute;
  opacity: 0;
  top: -3px;
  right: -25px;
  transition: 0.5s;
  font-family: 'Material Symbols Outlined';
  font-weight: 100;
  font-style: normal;
  font-size: 24px;
  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

.search-button:after {
  top: -2px;
}

.btn:hover span {
  padding-right: 15px;
}

.btn:hover span:after {
  opacity: 1;
  right: -5px;
}

.glyphicon-chevron-right:before {
  content: "\e5cc";
}

.glyphicon-chevron-left:before {
  content: "\e5cb";
}

.glyphicon-chevron-right:before,
.glyphicon-chevron-left:before {
  font-family: 'Material Symbols Outlined';
  font-weight: 100;
  font-size: 60px;
}

.carousel-indicators li {
  border-radius: 0px;
  border-color: var(--accent-color);
  background-color: var(--grey-dark-color);
}

.carousel-indicators .active {
  background-color: var(--accent-color);
}

/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {

  .navbar-default .navbar-nav>.active>a,
  .navbar-default .navbar-nav>.active>a:focus,
  .navbar-default .navbar-nav>.active>a:hover,
  .navbar-default .navbar-nav>.open>a,
  .navbar-default .navbar-nav>.open>a:focus,
  .navbar-default .navbar-nav>.open>a:hover,
  .navbar-default .navbar-nav>li>a:focus,
  .navbar-default .navbar-nav>li>a:hover {
    color: var(--accent-color);
  }

  .hero-carousel .carousel-caption h1 {
    font-size: 20px;
    letter-spacing: 10px;
    font-weight: 200;
  }

  .hero-carousel .carousel-caption h4 {
    font-size: 64px;
  }
}

@media screen and (max-width: 1058px) {
  .hero-carousel .carousel-caption {
    top: 15%;
  }
}

@media screen and (max-width: 767px) {
  .hero-carousel .carousel-caption {
    top: 25%;
  }
}

@media screen and (max-width: 479px) {
  .hero-carousel .carousel-caption {
    top: 10%;
  }
}

/* 
-------------------------------------------------- 
7b. Quick Search Section
-------------------------------------------------- 
*/
.section-quick-mls-search {
  margin-top: -60px;
  position: relative;
  z-index: 99;
}

.quick-mls-search-controls-wrapper .container {
  background-image: url(https://s.realtyninja.com/static/media/med/11083_7e13805d_old-black-background-grunge-texture-dark-wallpaper-blackboard-chalkboard-room-wall_1.jpg);
  padding: 40px 40px 20px;
  background-size: cover;
  border: 10px solid var(--grey-color);
  box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 25%);
  -webkit-box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 25%);
  -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
}

.select2-container--bootstrap .select2-selection--multiple .select2-search--inline .select2-search__field {
  display: flex;
  align-items: center;

}

.quick-mls-search-controls-wrapper .btn {
  width: 100%;
  margin-bottom: 10px;
  border-radius: 3px;
  letter-spacing: 5px;
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
  .quick-mls-search-controls-wrapper .col-md-5 {
    width: 40%;
  }

  .quick-mls-search-controls-wrapper .col-md-2 {
    width: 20%;
  }
}

/* 
-------------------------------------------------- 
7c, Intro Section
-------------------------------------------------- 
*/

.intro-section .rn-content-block {
  text-align: center;
  font-size: 16px;
  letter-spacing: 1px;
  color: var(--hover);
}

.intro-section .tiny {
  font-size: 18px;
  color: var(--accent-color);
  letter-spacing: 5px;
  font-weight: 400;
  line-height: 24px;
  text-transform: uppercase;
}

.intro-section .bold {
  font-weight: 400;
}

.intro-section h1 {
  margin-top: 0px;
  text-transform: uppercase;
}

/* 
-------------------------------------------------- 
7d. Featured-boxes
-------------------------------------------------- 
*/

.featured-boxes .rn-col-1-3-content:hover {
  background-image: url(https://s.realtyninja.com/static/media/med/10761_5944cf4d_1.jpg);
}

.featured-boxes .rn-col-2-3-content:hover {
  background-image: url(https://s.realtyninja.com/static/media/med/10761_e6fa1041_2.jpg);
}

.featured-boxes .rn-col-3-3-content:hover {
  background-image: url(https://s.realtyninja.com/static/media/med/10761_42df8763_3.jpg);
}

.featured-boxes .row>div>div {
  position: relative;
  background-size: cover;
  background-position: center right;
  height: 300px;
  background-color: var(--grey-color);
  border-radius: 3px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-family: var(--title-fonts);
  color: var(--dark-color);
  font-weight: 700;
  margin-bottom: 10px;
  transition: all .2s ease-in;
  -webkit-box-shadow: 0px 0px 5px 0px rgba(25, 19, 11, 0.1);
  -moz-box-shadow: 0px 0px 5px 0px rgba(25, 19, 11, 0.1);
  box-shadow: 0px 0px 5px 0px rgba(25, 19, 11, 0.1);
  border: 3px solid var(--grey-color);
}

.featured-boxes .row>div>div:hover {
  color: var(--white-color);
  background-color: var(--dark-color);
  -webkit-box-shadow: 0 0 5px 0 rgb(25 19 11 / 0%);
  -moz-box-shadow: 0 0 5px 0 rgba(25, 19, 11, 0);
  box-shadow: 0 0 5px 0 rgb(25 19 11 / 0%);
  border-color: var(--grey-dark-color);
  cursor: pointer;
  background-position: center center;
}

.featured-boxes img {
  max-width: 100px;
  margin-bottom: -25px;
  transition: all .2s ease-in;
}

.featured-boxes .row>div:hover img {
  filter: brightness(0) invert(1);
  margin-bottom: 25px; 
}

@media screen and (max-width: 767px) {
  .featured-boxes .row>div {
    margin-bottom: 20px;
  }
}

.featured-boxes .tiny {
  text-transform: uppercase;
  pointer-events: none; 
  transition: all .3s ease-in-out; 
  transform: scale(0);
  color: var(--white-color);
}

.featured-boxes .row>div:hover .tiny {
  display: block; 
  transform: scale(1);
}


/* 
-------------------------------------------------- 
7d. Featured neighbourhoods Section
-------------------------------------------------- 
*/

.featured-nh-section .row>div {
  padding: 10px !important;
}

.featured-nh-section .row>div>div {
  overflow: hidden;
}

.featured-nh-section img {
  position: relative;
  width: 100%;
  height: 300px;
  object-fit: cover;
  object-position: center;
  transition: all .2s ease-in;
}

.featured-nh-section img:hover {
  transform: scale(1.05);

}

/* this CSS targets the containers that uploads the content to the slider using the editor*/

/* text overlay on images */

.bg-image .content-section .row>div>div {
  position: relative;
  overflow: hidden;
}

.col-1-bg-image .rn-col-1-1-content div,
.col-1-bg-image .rn-col-1-2-content div,
.col-1-bg-image .rn-col-1-3-content div,
.col-1-bg-image .rn-col-1-4-content div,
.col-2-bg-image .rn-col-2-2-content div,
.col-2-bg-image .rn-col-2-3-content div,
.col-2-bg-image .rn-col-2-4-content div,
.col-3-bg-image .rn-col-3-3-content div,
.col-3-bg-image .rn-col-3-4-content div,
.col-4-bg-image .rn-col-4-4-content div,
.all-col-bg-image .row>div>div>div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
}

.col-1-bg-image .rn-col-1-1-content img,
.col-1-bg-image .rn-col-1-2-content img,
.col-1-bg-image .rn-col-1-3-content img,
.col-1-bg-image .rn-col-1-4-content img,
.col-2-bg-image .rn-col-2-2-content img,
.col-2-bg-image .rn-col-2-3-content img,
.col-2-bg-image .rn-col-2-4-content img,
.col-3-bg-image .rn-col-3-3-content img,
.col-3-bg-image .rn-col-3-4-content img,
.col-4-bg-image .rn-col-4-4-content img,
.all-col-bg-image .row>div img {
  object-fit: cover;
  object-position: center center;
  width: 100%;
  pointer-events: initial;
  cursor: pointer;
  filter: brightness(.6);
}

.header-text-overlay h1,
.header-text-overlay h2,
.header-text-overlay h3,
.header-text-overlay h4 {
  position: absolute;
  margin: 0 !important;
  z-index: 1;
  top: 50%;
  left: 50%;
  pointer-events: none; 
  transform: translate(-50%, -50%);
}

.editmode .header-text-overlay h1,
.editmode .header-text-overlay h2,
.editmode .header-text-overlay h3,
.editmode .header-text-overlay h4 {
  position: relative;
  margin: initial !important;
  top: unset;
  left: unset;
  transform: none;
  color: #333 !important;
  pointer-events: initial; 
}

.editable-section .row>div {
  min-height: 250px;
}

.editmode .editable-section .row>div {
  min-height: unset;
  height: auto;
}

.editmode .editable-section .row>div>div>div {
  border: 3px dashed red;
  position: relative;
  top: unset;
  left: unset;
  height: initial;
  width: initial;
  pointer-events: initial;
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
  .featured-nh-section .row>div {
    padding: 0px !important;
  }

  .featured-nh-section .row {
    display: grid;
    grid-template-columns: 0.8fr 0.8fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 20px;
    grid-template-areas:
      "rn-col-1-4 rn-col-2-4 rn-col-4-4"
      "rn-col-3-4 rn-col-3-4 rn-col-4-4";
  }

  .featured-nh-section .row>div {
    width: 100%;
  }

  .featured-nh-section .rn-col-1-4 {
    grid-area: rn-col-1-4;
  }

  .featured-nh-section .rn-col-2-4 {
    grid-area: rn-col-2-4;
  }

  .featured-nh-section .rn-col-3-4 {
    grid-area: rn-col-3-4;
  }

  .featured-nh-section .rn-col-4-4 {
    grid-area: rn-col-4-4;
  }

  .featured-nh-section .rn-col-4-4 img {
    height: 620px;
  }
}

/* 
-------------------------------------------------- 
8. Subpages
-------------------------------------------------- 
*/
.custom-section-heading .rn-content-block {
  padding-bottom: 0; 
}

.custom-section-heading h3,
.section-heading h3 {
  position: relative;
  font-size: 32px;
  text-transform: uppercase;
  font-weight: 700;
  text-shadow: none !important;
  z-index: 2; 
  color: var(--accent-color);
}

.blog-header-title-section,
.page-title .rn-content-block {
  background-color: var(--grey-dark-color) !important;
}

.blog-overview-wrapper h2 a {
  font-size: 18px;
  line-height: 20px;
  text-transform: uppercase;
  font-family: var(--title-fonts);
  color: var(--dark-color);
}

/* 
-------------------------------------------------- 
9. Third-party ie. Mailchimp
-------------------------------------------------- 
*/

/* Media Queries Helper */
@media only screen and (min-width : 480px) {
  /* Extra Small Devices, Phones */
}

@media only screen and (min-width : 768px) {
  /* Small Devices, Tablets */
}

@media only screen and (min-width : 992px) {
  /* Medium Devices, Desktops */
}

@media only screen and (min-width : 1200px) {
  /* Large Devices, Wide Screens */

}
.select2-container--bootstrap {
  width: 100% !important; /* added this to override the inline width of the bootstrap container */
}

.modal {
  z-index: 99999999999;
  width: 100%;
  height: 100%;
  background: url(https://s.realtyninja.com/static/media/med/11083_7e13805d_old-black-background-grunge-texture-dark-wallpaper-blackboard-chalkboard-room-wall_1.jpg) top center / cover no-repeat;
  align-items: center;
  justify-content: center;
  display: flex;
}
.modal::before {
  content: '';
  position: absolute; 
  top: 0; 
  left: 0; 
  height: 100%; 
  width: 100%; 
  background: rgba(0,0,0,.8);
}
.quote {
    border-left: 15px solid var(--accent-color);
}
.quote::before {
    color: var(--primary);
}
.alert-info {
    color: var(--white-color);
    background-color: var(--accent-color);
    border-color: var(--dark-color);
}
.subscribe-to-alerts-link:hover {
    color: var(--dark-color);
    background-color: var(--grey-dark-color);
    border-color: var(--btn);
}
#no_results {
    position: relative;
    font-size: 24px;
}
/* #no_results:before {
    content: "";
    background-image: url(https://s.realtyninja.com/static/media/med/10761_13dbf71c_41mkQr4L9qL._AC_.jpg?width=200&optimize=medium&dpr=1);
    width: 200px;
    height: 300px;
    display: block;
    background-position: center;
    background-repeat: no-repeat;
    margin: 20px auto;
}