/* ================ */
/* HOME PAGE CONTENT WIDTH */
/* ================ */

:root {
  --home-page-width: 100%;
  --section-max-width: 1440px;
}

/* ================ */
/* COLORS */
/* ================ */

:root {
  --primary-rgb: 31, 194, 49;
  --secondary-rgb: 29, 131, 255;
  --alt-color: #6e6e6e;

  /* --site-bg-color: #EFEBE7; */
  /*--site-hr-color: #7F7770;*/
  /*1px solid color*/
}

/* ================ */
/* FONTS */
/* ================ */

:root {
  --header-font: "Poppins", sans-serif;
  --paragraph-font: "Figtree", sans-serif;
  --paragraph-font-weight: 400;
  --site-font-size-base: 1rem;
  --site-font-size-mobile-base: 0.75rem;
  --h1: normal normal 400 2.5em/1 var(--header-font, "lato");
  --h2: normal normal 400 2em/1 var(--header-font, "lato");
  --h3: normal normal 400 1.75em/1 var(--header-font, "lato");
  --h1-pages: normal normal 400 2.25em/1 var(--header-font, "lato");
  --h2-pages: normal normal 400 2em/1 var(--header-font, "lato");
  --h3-pages: normal normal 400 1.75em/1 var(--header-font, "lato");
  --sidebar-header-font: var(--header-font);
  --sidebar-header-weight: 400;
  --footer-strong-weight: 400;
  --header-letter-spacing: 2px;
  --header-case: capitalize;
}

/* ================ */
/* MAIN BANNER */
/* ================ */

:root {
  --main-banner-height: 100vh;
  /*calc(100vh - (var(--nav-height)))*/
  --main-banner-height-medium: 100vh;
  /* --miranda-banner-height: 75vh; */
  --main-banner-height-pages-medium: 100vh;
  --main-banner-image: url(https://u.realgeeks.media/whatsmyhouseworth/Banner-Main-001.jpg);
  --main-banner-overlay: inset 0 1px 1px 1000px rgba(0, 0, 0, 0.1);
  --mobile-main-banner-image: url(https://u.realgeeks.media/whatsmyhouseworth/Banner-Main-001.jpg);
  --mobile-banner-height: auto;
  --mobile-main-banner-overlay: inset 0 1px 1px 1000px rgba(0, 0, 0, 0.25);
  --video-banner-overlay: rgba(0, 0, 0, 0.1);
  /* --banner-margin-top: 0; */
  --hoz-inside-width-full: 50%;
  --hoz-inside-width-medium: 100%;
  /* --search-box-spacing: 5rem; */
}

/* ================ */
/* SEARCH BOX */
/* ================ */

:root {
  --search-box-width: 100%;
  --search-box-position: center;
  --search-section-padding-bottom: 2.5vw;
  --mobile-search-area-width: 100%;
  --search-box-bg: rgba(255, 255, 255, 0.9);
  --search-box-label-color: #6e6e6e;
  --field-option-color: #6e6e6e;
  --field-option-bg: rgba(255, 255, 255, 0.9);
  --search-box-label-font: 500 0.75rem/1.5 var(--paragraph-font);
  --search-border-radius: 0px;
  --search-box-mobile-width: 100%;
  --search-field-height: 30px;
  --search-field-margin: 0 0 3px 0;
  --search-field-font-size: 14px;
  --search-box-field-border: 1px solid var(--secondary-color);
  --search-field-mobile-border: 1px solid #fff;
  --search-field-border: 1px solid var(--secondary-color);
  --price-max-field-margin: 1.2em;
  --extra-property-types-display: inline-block;
  --search-field-arrow: url(https://u.realgeeks.media/whatsmyhouseworth/search-box-arrow-down-slim.png);
  --search-field-arrow-wht: url(https://u.realgeeks.media/whatsmyhouseworth/search-box-arrow-down-slim-wht.png);
  --search-box-field-arrow: var(--search-field-arrow);

  /* mobile */
  --mobile-box-bg: rgba(0, 0, 0, 0.25);
  --mobile-label-color: #fff;

  /* typeahead width */
  --typeahead-section-width-large: 50%;
  --typeahead-section-width-medium: 75%;
  --typeahead-section-width-small: 100%;

  /* search button */
  --search-button-font: 400 20px/1.75 var(--paragraph-font);
  --search-button-bg: var(--primary-color);
  --search-button-txt-color: #fff;
  --search-button-border: 1px solid transparent;
  --search-button-border-radius: 0;
  --search-button-hover-bg-color: var(--secondary-color);
  --search-button-hover-txt-color: #fff;
  --search-button-hover-border: 1px solid transparent;
  --search-button-margin-top: 0;

  /* adv search link */
  --adv-search-link-font: 400 12px/2 var(--paragraph-font);
  --adv-search-link-color: var(--secondary-color);
  --adv-search-link-border: 2px solid var(--secondary-color);
  --adv-search-link-hover-color: var(--primary-color);
  --adv-search-link-border-hover: 2px solid var(--primary-color);
  --adv-search-link-color-mobile: #fff;
  --adv-search-link-border-mobile: 2px solid #fff;
  --adv-search-link-hover-color-mobile: var(--primary-color);
  --adv-search-link-border-hover-mobile: 2px solid var(--primary-color);
}

/* ================ */
/* SEARCH HEADER */
/* ================ */

:root {
  --search-header-display: block;
  --search-header-font: 400 3em/1 var(--header-font);
  --search-header-caps: var(--header-case);
  --search-header-color: #fff;
  --search-header-shadow: 0px 2px 5px rgba(0, 0, 0, 0.7);
  --search-header-margin: 0.5rem;
  --search-header-main-font: var(--header-font);
  --search-header-sub-font: var(--paragraph-font);

  /* bottom */
  --search-header-bottom-display: block;
  --search-header-bottom-font: 500 2.5em/1 var(--header-font);
  --search-header-bottom-caps: capitalize;
  --search-header-bottom-color: #fff;
  --search-header-bottom-shadow: 0px 2px 5px rgba(0, 0, 0, 0.7);
  --search-header-bottom-margin: 0.5rem;
  --mobile-search-header-bottom-size: 2em;

  /* mobile */
  --search-header-mobile-display: block;
  --mobile-search-header-color: #fff;
  --mobile-search-header-size: 2.5em;
  --mobile-search-header-shadow: 0px 2px 5px rgba(0, 0, 0, 0.4);
}

/* ================ */
/* BANNER BUTTONS */
/* ================ */

:root {
  --search-button-container-width: 100%;
  /* var(--search-box-width) */
  --search-button-container-margin-bottom: 0.8rem;
  --search-button-container-bottom-margin-top: 0.8rem;
  --banner-button-font: 500 14px/0.5 var(--paragraph-font);
  --banner-button-width: 31%;
  --banner-button-bottom-width: 43%;
  /* 2 buttons - 48%, 3 buttons - 31.3%, 4 buttons - 23% */
  --banner-button-background: rgba(var(--secondary-rgb), 0.75);
  --banner-button-border: 1px solid #fff;
  --banner-button-margin: 0;
  --banner-button-caps: uppercase;
  --banner-button-hover-background: var(--secondary-color);
  --banner-button-hover-border: 1px solid var(--banner-button-hover-background);
  --banner-button-hover-txt: #fff;

  /* mobile */
  --banner-button-mobile-background: rgba(var(--secondary-rgb), 0.95);
  --banner-button-mobile-txt-color: #fff;
  --banner-button-mobile-hover-background: var(--secondary-color);
  --banner-button-mobile-hover-txt-color: #fff;
  --banner-button-mobile-hover-border: 1px solid
    var(--banner-button-mobile-hover-background);
  --banner-button-mobile-margin: 2% 1%;
  --banner-button-mobile-width: 100%;
}

/* ================ */
/* BANNER LOGO */
/* ================ */

:root {
  --banner-logo-min-width: 200px;
  --banner-logo-max-width: 50%;
  --banner-logo-mobile-max-width: 100%;
}

/* ================ */
/* NAVIGATION */
/* ================ */

:root {
  --nav-height: 6rem;
  --nav-link-placement: 25%;
  /* 25% centered, default 154px */
  --nav-icon-display-top: block;
  --nav-icon-display-scrolled: block;
  --nav-pages-height: var(--miranda-nav-height);
  --nav-bg: rgba(255, 255, 255, 0);
  /* rgba(255,255,255,1) */
  --pages-nav-bg: #fff;
  --nav-mobile-bg: #fff;
  --nav-link-font-size: 0.9em;
  --nav-link-case: uppercase;
  --nav-link-color: #fff;
  --nav-link-hover-color: #e6e6e6;
  --nav-icon-color: #fff;
  --nav-icon-hover-color: #e6e6e6;
  --nav-logo-size: auto calc(0.35rem + 2vw);
  --nav-logo-position: 1% center;
  /* --miranda-logo-size: 60%; */
  --nav-logo-pages-position: 1% center;
  --header-logo-max-width: 250px;
  --nav-shadow: 0px 4px 3px rgb(0 0 0 / 15%);
  --nav-border: none;

  /* nav scrolled */
  --nav-scrolled-bg: #fff;
  /* --miranda-nav-height: 80px; */
  /* --nav-scrolled-height: ; */
  --nav-scrolled-border: 1px solid rgba(0, 0, 0, 0.15);
  --nav-scrolled-link-color: var(--alt-color);
  --nav-scrolled-link-hover-color: var(--primary-color);
  --nav-scrolled-icon-color: var(--primary-color);
  --nav-scrolled-icon-hover-color: var(--secondary-color);
  /* --nav-scrolled-logo-size: auto 60%; */
  --nav-scrolled-logo-position: 1% center;

  /* low nav settings */
  --low-nav-logo-scale: scale(9);

  /* Contact|Login settings */
  --noicons-height: 50%;
  --noicons-scrolled-height: 75%;
  --noicons-pages-height: 75%;
  --scrolled-noicons-top: 5%;
  --scrolled-noicons-font-size: 1em;
  --pages-noicons-top: 5%;
  --pages-noicons-font-size: 1em;

  /* large centered nav settings */

  --large-centered-nav-height: 20vh;
  --large-centered-logo-size: auto 35%;
  --large-centered-logo-position: center 25%;

  /* images */
  --nav-logo: url(https://u.realgeeks.media/whatsmyhouseworth/logo-full-wht1.png);
  /* --miranda-nav-logo: url(https://u.realgeeks.media/topnaplesrealtor/custom/logo-horiz-wht.png); */
  --nav-secondary-logo: url(https://u.realgeeks.media/johnfioresold/custom/logo-agent-1.png);
}

/* ================ */
/* LAUNCH MENU */
/* ================ */

:root {
  --launch-menu-bg: rgba(0, 0, 0, 0.9);
  --launch-menu-txt-color: #fff;
  --launch-menu-link-color: #fff;
  --launch-menu-link-hvr-color: var(--primary-color);
}

/* ================ */
/* BANNER SEARCH NOW BUTTONS */
/* ================ */
:root {
  --banner-search-button-background: transparent;
  --banner-search-button-border: 1px solid #fff;
  --banner-search-button-color: #fff;

  --banner-search-button-hvr-background: var(--primary-color);
  --banner-search-button-hvr-border: 1px solid transparent;
  --banner-search-button-hvr-color: #fff;
}

/* ================ */
/* BUTTONS */
/* ================ */

:root {
  --button-bg-color: var(--primary-color);
  --button-hvr-bg-color: var(--secondary-color);
  --button-txt-color: #fff;
  --button-hvr-txt-color: #fff;
  --button-letter-spacing: 1px;
  --button-border: 0px solid transparent;
  --button-hvr-border: 0px solid transparent;
  --button-border-radius: 0;
  --button-padding: 1rem 1.5rem;
  --button-caps: uppercase;
  /* --button-hover-shift: 0; */
  --button-hover-shadow: 0 0.45rem 1rem rgb(0 0 0 / 25%);

  /* img background */
  --img-bg-button-color: var(--primary-color);
  --img-bg-button-txt: #fff;
  --img-bg-button-border: 2px solid transparent;
  --img-bg-button-hvr-color: var(--secondary-color);
  --img-bg-button-hvr-txt: #fff;
  --img-bg-button-hvr-border: 2px solid transparent;
}

/* ================ */
/* FOOTER */
/* ================ */

:root {
  --footer-bg: var(--secondary-color);
  /* --footer-bg-image: url("https://u.realgeeks.media/theislandrealestate/custom/marble-bg.jpg"); */
  --footer-p-color: #fff;
  --footer-header-color: #fff;
  --footer-link-color:  #fff;
  --footer-link-hvr-color: var(--primary-color);
  --footer-social-icon-size: 2em;
  --footer-section-width: 0 1 33.33%;
  --footer-font-size-base: 16px;
  --footer-nav-bottom-border: none;
  /* default: inset 0 1px rgb(0 0 0 / 10%), inset 0 -1px rgb(0 0 0 / 10%) */
  --footer-padding: 1.4rem 0;
}

/* ================ */
/* HEADER LINES */
/* ================ */

:root {
  --header-line-border: 1px solid var(--primary-color);
  --header-line-height: 1px;
  --header-line-padding: 0 1rem;
  --header-line-img-bg-color: var(--alt-color);
  /* --header-line-gradient: linear-gradient(to right, #8e4734, #fae2b6, #8e4734); */
}

/* ================ */
/* SECTION PADDING */
/* ================ */

:root {
  --custom-section-padding: 7.5rem;
  --custom-section-padding-mobile: 3.75rem;
  --large-community-tiles-padding: 0;

  --home-content-padding-large: 10rem;
  --home-content-padding-medium: 3rem;
  --home-content-padding-small: 1rem;
  --custom-section-spacing: 7.5rem;
  --full-page-padding: 10rem;
}

/* ================ */
/* COMMUNITY TILE SECTION */
/* ================ */

:root {
  --community-section-max-width: var(--section-max-width);
  --community-tile-spacing: center;
  --community-tile-border: 0px solid transparent;
  --community-tile-padding: 0.25rem;
  --community-img-overlay-clr: #000;
  --community-img-overlay: 0.3;
  --community-img-hover-overlay-clr: #000;
  --community-img-hover-overlay: 0.6;
  --community-title-font: var(--paragraph-font);
  --community-title-font-size: 1.5em;
  --community-title-font-weight: 600;
  --community-title-large-font-size: 1.5em;
  --community-title-small-font-size: 20px;
  --community-title-hover-distance: 30%;
  --community-button-position: 45%;
  --large-tile-community-title-hover-distance: 30%;
  --community-btn-clr: var(--primary-color);
  --community-btn-txt-clr: #fff;
  --large-tile-outline-color: #fff;
}

/* ================ */
/* LARGE COMMUNITY SECTION */
/* ================ */

:root {
  --large-community-colored-bg: var(--primary-color);
  --large-community-txt-color: #fff;
  --large-community-color-bg-txt-color: #fff;
  --large-community-hr-color: #fff;
  --large-community-color-bg-hr-color: #fff;
}

/* ================ */
/* 3  TILE SECTION */
/* ================ */

:root {
  --custom-tile-width: 30%;
  --custom-tile-txt-color: #fff;
  --custom-tile-txt-bg: var(--primary-color);
  --custom-txt-font: 500 24px/1 var(--header-font);
  --standard-tile-section-width: var(--section-max-width);
}

/* ================ */
/* ABOUT SECTION */
/* ================ */

:root {
  --about-section-max-width: var(--section-max-width);
  --about-section-padding: var(--custom-section-padding) 0 0 0;
  --about-section-col-padding: 1rem;
  --about-col-1-width: 60%;
  --about-col-1-align: flex-start;
  --about-col-2-width: 30%;
  --about-col-2-align: center;
  --about-headshot-border: 1px solid transparent;
}

/* ================ */
/* HOME VALUE SECTION */
/* ================ */

:root {
  --home-value-background: url(https://u.realgeeks.media/whatsmyhouseworth/Banner-03.jpg);
  --home-value-overlay: linear-gradient(
    rgba(0, 0, 0, 0.35),
    rgba(0, 0, 0, 0.35)
  );
  --mobile-home-value-bg: url(https://u.realgeeks.media/whatsmyhouseworth/Banner-03.jpg);
  --home-value-content-max-width: var(--section-max-width);
  --home-value-content-width: 75%;
  --home-value-content-padding: 4rem;
  --home-value-section-header: 300 2.75em/1 var(--header-font);
}

/* ================ */
/* STANDARD MAP SECTION */
/* ================ */

:root {
  --standard-map-search-max-width: var(--section-max-width);
}

/* ================ */
/* MAP SEARCH BACKGROUND SECTION */
/* ================ */

:root {
  --map-search-bg: url(https://u.realgeeks.media/realtywon/custom/map-search-large.png);
  --map-search-overlay: linear-gradient(
    rgba(var(--secondary-rgb), 0.9),
    rgba(var(--secondary-rgb), 0.9)
  );
}

/* ================ */
/* CUSTOM BUYING/SELLING SECTION */
/* ================ */

:root {
  --sell-buy-col-1-img: url("https://u.realgeeks.media/guamhomesearch/sell-new.jpg");
  --sell-buy-col-1-bg: linear-gradient(
      rgba(var(--secondary-rgb), 0.65),
      rgba(var(--secondary-rgb), 0.65)
    ),
    var(--sell-buy-col-1-img) no-repeat center center;
  --sell-buy-col-2-img: url("https://u.realgeeks.media/guamhomesearch/buy-new.jpg");
  --sell-buy-col-2-bg: linear-gradient(
      rgba(var(--primary-rgb), 0.65),
      rgba(var(--primary-rgb), 0.65)
    ),
    var(--sell-buy-col-2-img) no-repeat center center;
}

/* ================ */
/* CUSTOM WIDGET SECTION */
/* ================ */

:root {
  --widget-bg: #fff;
  --widget-border: 0 0 0 1px var(--secondary-color);
  --widget-txt-clr: #000;
  --widget-border-radius: 4px;
}

/* ================ */
/*SIGN IN BAR */
/* ================ */

:root {
  --sign-in-bar-bg: var(--secondary-color);
  --sign-in-bar-btn-bg: rgba(255, 255, 255, 0);
  --sign-in-bar-btn-border: 1px solid #fff;
  --sign-in-bar-btn-txt: #fff;
  --sign-in-bar-hvr-btn-bg: var(--primary-color);
  --sign-in-bar-hvr-btn-border: 1px solid var(--sign-in-bar-hvr-btn-bg);
  --sign-in-bar-hvr-btn-txt: #fff;
}

/* ================ */
/* BODY SOCIAL MEDIA ICONS */
/* ================ */

:root {
  --social-body-box-color: #fff;
  --social-body-icon-color: #fff;
  --social-body-hover-bg: var(--primary-color);
  --social-body-dark-box-color: #e8e8e8;
  --social-body-dark-icon-color: #e8e8e8;
  --social-body-icon-hover-color: #fff;
}

/* ================ */
/* LISTINGS */
/* ================ */

:root {
  --listings-container-width: var(--section-max-width);
  --property-border-color: transparent;
  --property-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  --property-hvr-box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2);
  --property-bg-color: #fff;
  --property-content-line: var(--primary-color);
  --listing-address-color: var(--secondary-color);
  --listing-address-hover-color: var(--primary-color);
  --listing-price-color: var(--secondary-color);
  --listing-price-hover-color: var(--primary-color);
  --mobile-listing-price-bg: rgba(0, 0, 0, 0.8);
  --mobile-listing-price-color: #fff;
  --listing-details-color: #000000;
  /* if no slider */
  --listing-width: 325px;
  /* if slider */
  --property-slide-width: 90%;

  /* listings button */
  --listings-btn-padding: calc(var(--custom-section-padding) / 2) 0 0 0;

  /* page listings */
  --pages-listings-max-width: 1200px;
  --pages-listings-listing-width: 300px;
  --page-property-border-color: transparent;
  --page-property-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  --page-property-bg-color: #fff;
  --page-property-content-line: var(--primary-color);
  --search-header-border-bottom: #313131;
}

/* ================ */
/* DARK THEME SETTINGS */
/* ================ */

:root {
  --dark-theme-bg-color: #dd1c2f;
  --dark-theme-header-color: #fff;
  --dark-theme-txt-color: #fff;
  --dark-theme-hr-color: var(--primary-color);
  --dark-theme-sign-in-bar-bg: var(--primary-color);
  --dark-theme-sign-in-bar-button: #fff;
  --dark-theme-sign-in-bar-txt: #fff;
  --dark-theme-sign-in-bar-hvr-txt: var(--primary-color);
}

/* ================ */
/* PATTERN BG */
/* ================ */

:root {
  --pattern-bg: url(https://u.realgeeks.media/lyoncreek/custom/tree-pattern-xl.png);
  --pattern-bg-overlay: linear-gradient(
    rgba(14, 42, 44, 0.3),
    rgba(14, 42, 44, 0.3)
  );
  --pattern-bg-color: #fcfcfc;
}

/* ================ */
/* SLICK SLIDER */
/* ================ */

:root {
  --slider-arrow-color: var(--primary-color);
  --slider-arrow-img-bg-color: #fff;
  --slider-dots-color: var(--primary-color);
}

/* ================ */
/* ACCORDION */
/* ================ */
/* :root {
	--accordion-bg-color: var(--primary-color);
	--accordion-hover-bg-color: var(--secondary-color);
	--accordion-tile-color: #fff;
	--accordion-icon-color: #fff;
	--accordion-icon-hover-color: var(--primary-color);
	--accordion-link-bg-color: #f7f7f7;

} */

/* ================ */
/* FANCY TILES */
/* ================ */

:root {
  --fancy-tile-color: #000000;
  --fancy-tile-hvr-color: var(--secondary-color);
  --fancy-tile-header-color: #000;
  --fancy-tile-header-hvr-color: #fff;
  --fancy-tile-header-size: 2em;
  --fancy-tile-underline-width: 2px;
  --fancy-tile-underline-color: var(--primary-color);
  --fancy-tile-underline-hvr-color: var(--primary-color);
}
