@import url(https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0);
.serif{font-family: Georgia,Times,Times New Roman,serif; 
}
    .text-shadow {
        text-shadow: 3px 3px 5px #2b2b2b;
    }

    .gold {
        color: #bd9b60;
        border-color: #bd9b60 !important;
        background-color: #fff;
    }
     .gold_bg {
        background-color: #bd9b60;
     }

     .mocha{
        color:#f7f6f4; border-color: #f7f6f4;
     }
.mocha_bg{background-color:#f7f6f4;}
.gallery-image-size {
    width: 100% !important;
    height: auto !important;
    min-height: 100%;
    object-fit: cover !important;
    margin: 0 auto;
}
    #above-collection {
        background: url('https://cdn.trailfinders.com/above-collection-bkg.webp') no-repeat;
        background-size: cover;
        position: relative;
        min-height: 40vw;
    }

    #above-collection:before {
        content: "";
        position: absolute;
        display: block;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, .5);
        z-index: 2;
        background: linear-gradient(to right, rgba(0, 0, 0, 0.4) 40%, rgba(0, 0, 0, 0) 80%);
    }

    #above-collection:after {
        content: '';
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 33vw 33vw 0;
        border-color: transparent #5c2946 transparent transparent;
        right: 0;
        top: 0;
        position: absolute;
    }

    #above-logo {
        width: 21vw;
        height: auto;
    }
    .accordion-button:not(.collapsed) {
        color: #2b2b2b;
        background-color: #fff;
        box-shadow: none;
      }
    .accordion-button:not(.collapsed)::after {
        font-size:1.3rem;
        line-height:normal;
        background-image:none;
        font-family: 'Material Icons';
        content:"\e644";
        color: #bd9b60;
      }
      .accordion-button.collapsed::after {
        font-size:1.3rem;
       line-height:normal;
        background-image:none;
        font-family: 'Material Icons';
        content:"\e147";
        color: #bd9b60;
      }
      .accordion-button:focus {
        z-index: 3;
        border-color: none;
        outline: 0;
        box-shadow: none;
      }

/*Bedroom Range Slider*/
.min-max-slider {position: relative; width: 100%; text-align: left;}
.min-max-slider > label {display: none;}
span.value {height: 1.7em; font-weight: bold; display: inline-block;}
span.value.lower::before {content: ""; display: inline-block;}
span.value.upper::before {content: "-"; display: inline-block; margin:0 0.4em;}
span.value.upper::after {content: "Bedrooms"; display: inline-block; margin-left: 0.4em;}
.min-max-slider > .legend {display: flex; justify-content: space-between;}
.min-max-slider > .legend > * {font-size: small; opacity: 0.25;}
.min-max-slider > input {cursor: pointer; position: absolute;}
.min-max-slider > .legend div {color:#434343;}
.min-max-slider > .legend > div:first-child::before {font-family: 'Material Icons'; content: "\ea48"; display: inline-block; margin-right:0.2em; vertical-align: middle; font-size:1.3rem;} 
.min-max-slider > .legend > div:last-child::before { font-family: 'Material Icons'; content: "\ea48"; display: inline-block; margin-right:0.2em; vertical-align: middle; font-size:1.3rem;} 
.min-max-slider > .legend > div:last-child::after {  content: "+"; display: inline-block; margin:0 0.4em;} 
/* webkit specific styling */
.min-max-slider > input {
  -webkit-appearance: none;
  outline: none!important;
  background: transparent;
  background: linear-gradient(to bottom, transparent 0%, transparent 30%, #bd9b60 30%, silver 60%, transparent 60%, transparent 100%);
}
.min-max-slider > input::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 14px; /* Set a specific slider handle width */
  height: 14px; /* Slider handle height */
  background: #eee; /* Green background */
  cursor: pointer; /* Cursor on hover */
  border: 1px solid #bd9b60;
  border-radius: 100%;
}
.min-max-slider > input::-webkit-slider-runnable-track {cursor: pointer;}

.btn-gallery {
    top: -110px;  
  }
@media (min-width: 768px) {
.btn-gallery {
    top: -135px;
}
}
.villa-infobar{
    background-color:rgba(55,73,83,0.7);
    color:#fff;
    width:100%; 
    position:absolute;
    z-index: 1020;
    bottom:0;
  }
  .villa-title{
    display: inline-block;
  }
  .villa-title::after{ 
  content: ""; /* So that it will show */
  display: block; /* So it can have width */
  width: 3rem; /* Make sure position on these elements is relative (or something besides default) */
  height: 1px;
  border-bottom: 1px solid #434343;
  left:3rem;
  margin:1rem auto;
  }
.app-hero-img .hero-img-caption .caption-inner {
    padding-left: 30px;
    padding-right: 30px;
}
@media (min-width: 576px) { 
}
@media (min-width: 768px) {
    .app-hero-img .hero-img-caption .caption-inner {
        padding-left: 10%;
        padding-right: 10%;
      }
}
@media (min-width: 992px) { 

}
@media (min-width: 1200px) { 
.app-hero-img .hero-img-caption .caption-inner {
        padding-left: 20%;
        padding-right: 20%;
      }
}
@media (min-width: 1400px) { 

}


.absolute-centered{right:50%;
    translate: 50%;
   }
   
   .above-villa-tile:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.8) 100%);
  }
  .above-villa-dark-grad:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.4) 100%);
  }
  .h-33rem{height:33rem;}

  #villa-container .carousel-inner .carousel-item {
    max-height:23.33rem;
  }
  .above-villa-tile{width:30rem;}
  .villa-infobar{font-size:0.8rem;}
  .villa-infobar i{font-size:1.1rem;}

  .villa-info-strip{font-size:0.7rem;}
  .villa-info-strip a,.villa-info-strip div{padding:4px!important;}
  .villa-info-strip i{font-size:1.0rem;}
  #villas-container .carousel{
    height:18rem!important;
   }
  @media (min-width: 576px) {  
    .above-villa-tile{width:14rem;}
    .villa-infobar{font-size:1rem;}
    .villa-infobar i{font-size:24px;}
    .villa-info-strip{font-size:1rem;}
  .villa-info-strip i{font-size:24px;}
  }
  @media (min-width: 768px) { 
    #villas-container .carousel{
      height:100%!important;
     }
    .above-villa-tile{width:18rem;}
  }            
  @media (min-width: 992px) {
    .above-villa-tile{width:18.5rem;}
  }                                                            
  @media (min-width: 1200px) { 
    
    .above-villa-tile{width:19.5rem;}
   }                   
  @media (min-width: 1400px) { 
    .above-villa-tile{width:26rem;}
  }
  .above-title{color:#5c2946;}
  .above-hr:after{
    content: "";
    display: block;
    width: 30px;
    height: auto;
    transform: none;
    position: static;
    border: none;
    border-top: 1px solid #223845;
    margin-top: 20px;
}
.bg-villa-above-concierge{background-image:url('https://cdn.trailfinders.com/hero_concierge.jpg')}
.bg-villa-above-private-chef{background-image:url('https://cdn.trailfinders.com/hero_private-chef.webp')}
.bg-villa-above-child-care{background-image:url('https://cdn.trailfinders.com/hero_child-care.webp')}
#villa-destination .carousel-item{
  width: 100%; 
  height: 380px!important; 
  overflow: hidden;
}
#villa-destination .carousel-item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.m-auto {
  margin: 0 auto !important;
}
.spinner-border {
  -moz-animation: cssAnimation 0s ease-in 2s forwards;
  /* Firefox */
  -webkit-animation: cssAnimation 0s ease-in 2s forwards;
  /* Safari and Chrome */
  -o-animation: cssAnimation 0s ease-in 2s forwards;
  /* Opera */
  animation: cssAnimation 0s ease-in 2s forwards;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
@keyframes cssAnimation {
  to {
      width:0;
      height:0;
      overflow:hidden;
  }
}
@-webkit-keyframes cssAnimation {
  to {
      width:0;
      height:0;
      visibility:hidden;
  }
}