/*
Extra Small :: None :: < 576px
Small :: sm :: ≥ 576px
Medium :: md :: ≥ 768px
Large :: lg :: ≥ 992px
Extra Large :: xl :: ≥ 1200px
Extra Extra Large :: xxl :: ≥ 1400px

Max is 1400px

Mobile is < 576px

VW - 390px or 1400px

*/
html {
  scroll-behavior: smooth;
}

* {
  box-sizing: border-box;
}

.form-control:focus {
    outline: none !important;
    box-shadow: none !important;
}

body {
	font-family: "Montserrat", sans-serif;
  	font-optical-sizing: auto;
  	font-weight: 400;
  	font-style: normal;
}

#main {
	padding-left: 0;
	padding-right: 0;
}

.innerShadow {
    -webkit-box-shadow: inset 0 20px 20px -20px #776b5f;
    -moz-box-shadow: inset 0 20px 20px -20px #776b5f;
    box-shadow: inset 0 20px 20px -20px #776b5f;
    margin: 0px auto;
    padding: 0px 0px;
    font-size: 16px;
    /*color: #ffffff;*/
    text-align: center;
    color: #D0D2D3;
    line-height: 28px;
    font-family: 'Montserrat', sans-serif;
}

.innerShadowSub {
    
        text-align: left;
        display: inline-block;
        padding: 0px;
}

.blackBox {
	margin: 0 auto;
	background-color: #000000;
}

.blackBoxTable {
	margin: 0 auto;
	width: 875px;
}

.carousel-control-next, .carousel-control-prev {
    align-items: end;
	opacity: .75;
	top: 40px;
	z-index: 99999;
}

.carousel-control-prev {
	/*justify-content: end;*/
}

.carousel-control-next {
	/*justify-content: start;*/
}

.carousel-item {
	text-align: center;
}

.carousel-indicators [data-bs-target] {
    border-bottom: 3px solid transparent;
	background-color: #cccccc;
}

.carousel-controls-contailer {
	width: 100%;
}

.carousel-controls-contailer-inner {
	position: relative;
    /*border: 1px solid red;*/
    width: 100%;
    margin: 0 auto;
    max-width: 1315px;
}

.carousel-inner {
	z-index: -1;
}

.carouselPadding {
	padding: 0px 0px 40px 0px;
}

.propertySlider {
	max-width: 1315px;
	margin: 0 auto;
}


details {
	&[open] summary {
		-webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.75);
    	-moz-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.75);
    	box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.75);
	}
}

details {
	user-select: none;
  	-webkit-user-select: none;
  	-moz-user-select: none;
  	-ms-user-select: none;

	max-width: 100%;
  
	&[open] summary::after {
		rotate: -180deg;
	}
  
  	summary {
    /* Override default "display: list-item" and position the summary text as well as the custom arrow icon */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    
    /* General styling */
    background-color: #bbbdbf;
    cursor: pointer;
    font-weight: 500;
    /*margin-block-end: 0.5rem;*/
    padding: 0.75rem;
	position: relative;
    
		/* Fallback code to hide standard marker, especially on Safari */
		&::marker,
		&::-webkit-details-marker {
			display: none;
		}
    
    &::after {
      /* CSS for chevron shape from https://css-shape.com/chevron/ */
      --shape-chevron-width: 1rem;
      --s: calc(var(--shape-chevron-width) / 4);

      /* Styling */
      content: "";
	  position: absolute;
	  right: 20px;
      aspect-ratio: 7/5;
      background: currentColor;
      clip-path: polygon(0 0, 0 var(--s), 50% 100%, 100% var(--s), 100% 0, 50% calc(100% - var(--s)));
      flex-shrink: 0;
      width: var(--shape-chevron-width);
      
      /* Animation */
			rotate: 0deg;
			transition: rotate 0.35s ease;
    }
  }
}

/*************/
.bcLogo {
	padding: 7.14vw 0px;
	width: 100%;
	max-width: 64.1vw;
	height: auto;
	margin: 0px auto;
	display: block;
}

#bcVideo {
	/*max-width: 39.74vw;*/
	height: auto;
	width: 100%;
	max-width: 64.1vw;
}

.propImage {
	width: 100%;
	height: auto;
	max-width: 30.77vw;
	margin: 4.1vw 2.82vw;
}

.propName {
	font-size: 3.33vw; /*2.31vw is 9px*/
	color: #faaf40;
	text-transform: uppercase;
}
	
.propDesc {
	font-size: 2.56vw; /**/
	color: #bbbdbf;
}
	
.propFinePrint {
	padding-top: 1.75vw;
	font-size: 2.05vw;
	color: #808184;
	display: none;
}

.row {
   	--bs-gutter-x: 0;
}
	
.blackBoxTable {
	margin: 0 auto;
	width: 85vw;
}

summary {
	font-size: 3.2vw;
	text-transform: uppercase;
}

p {
    margin-top: 0;
    margin-bottom: 0;
}

.desktopOnly {
	display: none;
}
	
.mobileOnly {
	display: block;
}

.cellLeft {
	width: 43%;
}

.cellRight {
	width: 57%;
	line-height: 5vw;
}

.footer {
	background-color: #0f0708;
	color: #908375;
	text-align: center;
	letter-spacing: 1px;
	font-size: 3vw;
	padding: 11.5vw;
}

.footer a {
	color: #908375;
	text-decoration: none;
}

.footerTitle {
	color: #f6921e;
	text-transform: uppercase;
	font-size: 3vw;
}

.brownBoxM {
	width: 100%;
	text-align: center;
	padding: 7vw 7vw;
	background-color: #8f8275;
}

.bioTextIntroMobile {
	font-size: 3.2vw;
	line-height: 4.6vw;
}


#brownBox, #brownBoxBio {
	text-align: center;
	background-color: #8f8275;
	padding: 6.25vw 0px;
}
	
#readMoreMobile h2 {
		font-size: 4vw;
		text-transform: uppercase;
		color: #404041;
	}
	
	#readMoreMobile {
		font-size: 3.2vw;
		color: #cccccb;
		line-height: 4.6vw;
		margin-bottom: 4vw;
	}
	
	#readMoreMobile p {
		padding-bottom: 4.6vw;
	}	
	
.readMore {
	color: #c1b49a;
	cursor: pointer;
}

.bioImage {
	width: 100%;
	display: inline-block;
	height: auto;
	margin: 15px 0px;
}
/*************/

/* bottom bar layout */
.js-grouped-carousel .carousel-nav-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:10px 6px 0;
}

.js-grouped-carousel .carousel-nav-center{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  max-width: 500px;
}

/* IMPORTANT: turn off Bootstrap’s overlay positioning for controls */
.js-grouped-carousel .carousel-control-prev,
.js-grouped-carousel .carousel-control-next{
  position: static;
  width:auto;
  margin-left: auto;
	margin-right: auto;
}

.carousel-control-prev {
	/*background-color: red;*/
	padding-left: 0px;
	margin-right: 0px;
}

.carousel-control-next {
	/*background-color: blue;*/
	padding-left: 5px;
	margin-left: -16px;
}

/* arrows bigger */
.js-grouped-carousel .carousel-arrow-svg{
  width:44px;
  height:44px;
  fill:#cfcfcf;
}

/* circles (replaces default indicator dashes) */
.js-grouped-carousel .carousel-indicators--circles{
  position: static;       /* stop Bootstrap from placing it absolute */
  margin:0;
}

.js-grouped-carousel .carousel-indicators--circles [data-bs-target]{
  width:12px;
  height:12px;
  border-radius:999px;
  margin:0 5px;
  border:0;
  opacity:1;
  background:#cfcfcf;
}

.js-grouped-carousel .carousel-indicators--circles .active{
  background:#b51f1f; /* red active circle */
}

/* group dashes under circles */
.js-grouped-carousel .carousel-group-indicators{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:8px;
  padding-bottom:6px;
}

.js-grouped-carousel .carousel-group-indicators button{
  width:38px;
  height:6px;
  border-radius:999px;
  border:0;
  background:#cfcfcf;
  opacity:1;
  padding:0;
  cursor:pointer;
}

.js-grouped-carousel .carousel-group-indicators button.active{
  background:#b51f1f; /* red active group dash */
}

.js-grouped-carousel .carousel-indicators--circles [data-bs-slide-to].is-hidden{
  display: none;
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
	.contain {
		max-width: 100%;
		/*background-color: green;*/
		margin: 0 auto;
	}
	
	 .innerShadow {
        -webkit-box-shadow: inset 0 20px 20px -20px #776b5f;
        -moz-box-shadow: inset 0 20px 20px -20px #776b5f;
        box-shadow: inset 0 20px 20px -20px #776b5f;
        margin: 0px auto;
        padding: 30px 0px !important;
        font-size: 14px;
        color: #ffffff;
        text-align: center;
        color: #ffffff;
        line-height: 20px;
        letter-spacing: .5px;
        font-family: 'Montserrat', sans-serif;
    }
    
    .innerShadowSub {
        max-width: 873px;
    text-align: left;
    display: inline-block;
    letter-spacing: .5px;
    }
	
	.bcLogo {
		padding: 7.14vw 0px;
		width: 100%;
		max-width: 39.74;
		height: auto;
		margin: 0px auto;
		display: block;
	}
	
	.carouselPadding {
		padding: 0px 40px 40px 40px;
	}
	
	.desktopOnly {
		display: none;
	}
	
	.mobileOnly {
		display: block;
	}
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
	.bcLogo {
		padding: 7.14vw 0px;
		width: 100%;
		max-width: 31.71vw;
		height: auto;
		margin: 0px auto;
		display: block;
	}
	
	.cellLeft {
		width: 47%;
	}

	.cellRight {
		width: 53%;
	}
	
	.propImage {
		width: 100%;
		height: auto;
		max-width: 24.65vw;
		margin: 3.6vw 2.15vw;
	}
	
	.propName {
		font-size: 2vw;
		color: #faaf40;
		text-transform: uppercase;
	}
	
	.propDesc {
		font-size: 1.5vw; /**/
		color: #bbbdbf;
	}
	
	.propFinePrint {
		padding-top: 1vw;
		font-size: .85vw;
		color: #808184;
	}
	
	summary {
		font-size: 1.6vw;
		text-transform: uppercase;
	}
	
	.row {
    	--bs-gutter-x: 0;
	}
	
	.blackBoxTable {
		margin: 0 auto;
		width: 62.5vw;
	}
	
	.carouselPadding {
		padding: 0px 40px 40px 40px;
	}
	
	.desktopOnly {
		display: block;
	}
	
	.mobileOnly {
		display: none;
	}
	
	.orangeBarD {
		width: 100%; 
		height: auto; 
		max-width: 989px; 
		margin: 1vw auto 2vw auto;
	}
	
	#brownBox, #brownBoxBio {
		text-align: center;
		background-color: #8f8275;
		padding: 7.85vw 0px;
	}
	
	.brownBoxD {
		width: 100%;
		text-align: center;
		background-color: #8f8275;
		max-width: 62.5vw;
		margin: 0px auto;
	}
	
	.footer {
		padding: 7.86vw 1.79vw;
		font-size: 1.5vw;
	}

	.footerTitle {
		font-size: 1.57vw;
	}
	
	.innerShadow {
    -webkit-box-shadow: inset 0 20px 20px -20px #776b5f;
    -moz-box-shadow: inset 0 20px 20px -20px #776b5f;
    box-shadow: inset 0 20px 20px -20px #776b5f;
    margin: 0px auto;
    padding: 50px 0px !important;
    font-size: 16px;
    /*color: #ffffff;*/
    text-align: center;
    color: #D0D2D3;
    line-height: 28px;
    font-family: 'Montserrat', sans-serif;
}


	
	.bioText {
		font-size: 1.5vw;
		color: #cccccb;
		user-select: none;
  		/* Vendor prefixes for broader compatibility */
  		-webkit-user-select: none; /* Safari */
  		-moz-user-select: none;    /* Firefox */
  		-ms-user-select: none;     /* Internet Explorer/Edge */
		line-height: 2.29vw;
		margin-bottom: 1.79vw;
		margin-top: 1.79vw;
	}
	
	.bioImage {
		width: 19.64vw; 
		height: auto;
		padding-right: 1.79vw; 
		float: left;
	}
	
	#readMoreDesktop h2 {
		font-size: 1.43vw;
		text-transform: uppercase;
		color: #404041;
	}
	
	#readMoreDesktop {
		font-size: 1vw;
		color: #cccccb;
		line-height: 1.71vw;
		margin-bottom: 1.79vw;
	}
	
	#readMoreDesktop p {
		padding-bottom: 1.43vw;
	}
	
	.readMore {
		color: #c1b49a;
		cursor: pointer;
	}
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {

}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
	.contain {
		/*max-width: 1400px;*/
		max-width: 100%;
		/*background-color: green;*/
		margin: 0 auto;
	}
	
	.bioText {
		font-size: 21px;
		color: #cccccb;
		user-select: none;
  		/* Vendor prefixes for broader compatibility */
  		-webkit-user-select: none; /* Safari */
  		-moz-user-select: none;    /* Firefox */
  		-ms-user-select: none;     /* Internet Explorer/Edge */
		line-height: 32px;
		margin-bottom: 25px;
		margin-top: 25px;
	}
	
	.bioImage {
		width: 275px; 
		height: auto;
		padding-right: 25px; 
		float: left;
	}
	
	#readMoreDesktop h2 {
		font-size: 20px;
		text-transform: uppercase;
		color: #404041;
	}
	
	#readMoreDesktop {
		font-size: 16px;
		color: #cccccb;
		line-height: 24px;		
		margin-bottom: 25px;
	}
	
	#readMoreDesktop p {
		padding-bottom: 20px;
	}
	
	.bcLogo {
		padding: 100px 0px;
		width: 100%;
		max-width: 444px;
		height: auto;
		margin: 0px auto;
		display: block;
	}
	
	.propImage {
		width: 100%;
		height: auto;
		max-width: 345px;
		margin: 50px 30px;
	}
	
	.propName {
		font-size: 28px; /*2vw*/
		color: #faaf40;
		text-transform: uppercase;
	}
	
	.propDesc {
		font-size: 21px; /*.85vw*/
		color: #bbbdbf;
	}
	
	.propFinePrint {
		padding-top: 15px;
		font-size: 12px; /*.85vw*/
		color: #808184;
	}
	
	summary {
		font-size: 22px; /*1.6vw*/
		text-transform: uppercase;
	}
	
	.row {
    	--bs-gutter-x: 0;
	}
	
	.blackBoxTable {
		margin: 0 auto;
		width: 875px;
	}
	
	.orangeBarD {
		width: 100%; 
		height: auto; 
		max-width: 989px; 
		margin: 14px auto 28px auto;
	}
	
	#brownBox, #brownBoxBio {
		text-align: center;
		background-color: #8f8275;
		padding: 110px 0px;
	}
	
	.brownBoxD {
		width: 100%;
		text-align: center;
		background-color: #8f8275;
		max-width: 875px;
		margin: 0px auto;
	}
	
	.footer {
		padding: 110px 25px;
		font-size: 21px;
	}

	.footerTitle {
		font-size: 22px;
	}
}