/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/

:root {
  --cnvs-header-height: 135px;
  --cnvs-header-height-sm: 60px;
  --cnvs-header-height-md: 80px;
  --cnvs-header-height-lg: 120px;
  --cnvs-header-height-shrink: 120px;
  --cnvs-side-header-width: 260px;
}

.content-wrap {
  padding: 20px 0;
}

.lot-container img,
.lot-picture-small {
  border-radius: 5px;
}

.button.button-rounded.button-reveal.button-sm {
  margin: 0;
}

.portfolio-desc {
  padding: var(--cnvs-portfolio-desc-padding-y) 0;
  text-align: left !important;
}

/* Lots styles */
.lot-wrapper {
  padding: 0 0 10px;
}
.lot-container {
  position: relative;
  display: inline-block;
}
.lot-container img {
  display: block;
  width: 100%;
}
.lot-container svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transition: 0.5s;
}
body:not(.adding-lot-polygon) .lot-container:not(.creating):hover svg {
  opacity: 0;
}


/* Keep proportions */
.portfolio-item .portfolio-image.thumbnail,
.portfolio-item .portfolio-image.thumbnail img,
.lot-wrapper.thumbnail-wrapper img {
	height: auto;
	aspect-ratio: 4/3;
}

.lot-wrapper.thumbnail-wrapper {
	padding: 0;
}
.lot-wrapper.thumbnail-wrapper .lot-container {
	display: block;
}

/* Contact page */
.contact-container {
	display: grid;
	gap: 50px;
	grid-template-columns: 250px auto;
}

.contact-container iframe {
	height: 700px;
}

@media (max-width: 960px) {
	.contact-container {
		grid-template-columns: auto;
	}
}

/* Slider layout shift fix */
.fslider {
    aspect-ratio: 100 / 51;
}

/* Chat */
#hubspot-messages-iframe-container.widget-align-right {
	right: 25px !important; /* cannot click o nthe cookie message close btn without this */
}

/* Layout shift fix; always show 1st slide, even before script loads */
.flexslider .slider-wrap>.slide:first-child {
	display: block;
}

@media (min-width: 992px) {
    .header-row.justify-content-lg-between {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 992px) {
    #header {
        position: static;
    }
}

.weather-container {
	/*display: none !important;*/
}
#header-wrap #logo img {
	max-height: 100px;
}

/* Header Nav refactor */
#nav {
  display: grid;
  gap: 10px;
  padding: 20px 0;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas: 
    "item1 item2 item3";
}

.nav-item {
  padding: 10px;
  text-align: center;
}

#nav-weather {
  grid-area: item1;
}

#nav-logo {
  grid-area: item2;
  text-align: center;
}

#nav-contact {
  grid-area: item3;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

#nav-menu-trigger {
  grid-area: item4;
  justify-content: flex-end;
  display: flex;
}

.primary-menu-trigger {
  padding: 30px;
  width: 96px;
}

@media (max-width: 993px) {
  #nav {
    grid-template-columns: 324px auto auto;
    grid-template-areas: "item2 item1 item4" "item3 item3 item3";
  }

  #nav-weather {
    justify-content: center;
  }

  
  #nav-contact {
    justify-content: flex-start;
  }
}

@media (min-width: 768px) and (max-width: 993px) {
  #nav-contact > div {
    display: flex;
    gap: 15px;
  }
  
  #nav-contact > div > div {
    border-left: 1px solid #CCC;
    padding-left: 15px;
  }
}

#slider {
  padding-top: 20px;
}

@media (max-width: 768px) {
  #nav {
    padding: 15px 0;
    grid-template-columns: 5fr 2fr;
    grid-template-areas: "item2 item4" "item3 item1";
  }
  #nav-contact {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  #nav {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "item2 item2" "item3 item4";
  }
  #nav-weather {
    display: none !important;
  }
}

/* Footer */
#footer {
  padding: 30px 0;
  background: white;
}
#copyrights {
  border-top: 1px solid #CCC;
  padding-top: 30px;
}
.copyright-links a {
  border-bottom: 0;
}

/* Sale page */
.mfp-gallery img {
  height: 98vh;
  max-width: none;
  max-height: none;
}
@media (max-width: 1000px) {
  .mfp-gallery img {
    height: auto;
    width: 90vw;
  }
}
@media (max-width: 800px) {
  .mfp-gallery img {
    height: auto;
    width: 95vw;
  }
}

/* Lot page */
@media (max-width: 768px) {
  .lot-details-wrapper {
    gap: 20px;
  }
}
.tab-content ul {
  padding-left: 20px;
}