:root{
	--f-progress-color         : #55A2D5;
	--kolter-brand             : #036;
	--template-primary         : #f5f5f5;
	--template-secondary       : #707070;
	--template-secondary-light : #999;
	--template-overlay         : #DAEBF7;
	--template-terniary        : #55A2D5;
	--template-primary-dark    : color-mix(in srgb, var(--template-primary), black 10%);
	--template-terniary-dark   : color-mix(in srgb, var(--template-terniary), black 10%);
	--menu-height              : 7.5rem;
	--menu-inner-height        : 4.7rem;
	--max-slideshow-width      : 100vw;
	--max-viewport             : 1920px;
}

body, body.full-width, .main{
	background-color: #fff;
	color: var(--template-secondary);
}

main:has(.bg-light-full) {
	&, #content {
		background-color: var(--template-primary);
	}
}

#body-container {
	&.in-community {
		padding-top: var(--menu-height);
	}

	& > header.in-community {
		height: var(--menu-height);
		background-color:#036;
		background-image:none;
	}
}

#body-container header.in-community{

	background-color: #fff;

	#mobile-nav-toggle,
	#com-nav-toggle {
		color: var(--template-secondary);
	}

	.logo {
		color: var(--template-secondary);
	}

	.community-logo {
		top:50%;
		transform: translateY(-50%);
	}

	#main-nav {
		height: var(--menu-height);
		background-color: #fff;
		align-items: center;
		gap: 1rem;
	}

	nav:last-child ul {
		gap: 1rem;
	}

	nav:last-child ul:not(.level1) li > a,
	a.schedule-your-tour {
		border:none;
		border-radius: 0;
		padding: 1.75rem 1.5rem;
		line-height: 1;
		margin: 0;
		align-self: unset;
	}

	nav:last-child ul:not(.level1) li > a{
		background-color: var(--template-primary) !important;
		color: var(--template-secondary);

		&:hover {
			background-color:var(--template-primary-dark) !important;
			color: var(--template-secondary);
		}

	}

	nav:last-child ul:not(.level1) li.active > a {
		background-color: var(--template-overlay) !important;
		color: var(--kolter-brand);

	}

	a.schedule-your-tour {
		background-color:var(--template-terniary);
		color: #fff;

		&:hover {
			background-color:var(--template-terniary-dark);
			color: #fff;
		}
	}
}

#mobile-menu {
	background-color: var(--template-secondary);
}

header nav #account_nav {
	display: flex;
	height: auto;

	&,
	& > li {
		width: auto;
		min-width:5.2rem;
	}

 	& > li#account-links {
		padding: 0;
		height: var(--menu-inner-height);
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;

		& > a,
		& > a:hover {
			box-sizing: border-box;
			color: #707070;
			align-content: center;
			line-height: 1;
			padding: 0 1rem;
		}
		ul.level2 {
			top: var(--menu-inner-height);
			background-color: var(--template-primary);
			border-radius: .5rem;
			box-shadow: 0 0 .5rem rgba(0,0,0,.3);

			a {
				padding: 1.5rem 1rem;
			}
		}
	}
}

footer {
	background-color: var(--template-secondary);
}

#slideshow {
	background-color: #fff;
	margin:0 auto;
	max-width: var(--max-slideshow-width);
	height: calc( 100vh - var(--menu-height) );
	max-height: calc( var(--max-slideshow-width) * .5625 );

	.image {
		background-size: cover;
	}

	&::before {
		display: none;
	}
}

body.model-view #model-container .schedule-your-tour,
a.schedule-your-tour,
a.btn-orange {
	background-color:var(--template-terniary);
	color: #fff;
	padding:2.2rem 4rem;
	text-transform: uppercase;

	&:hover {
		background-color:var(--template-terniary-dark);
		color: #fff;
	}
}

.btn {
	border: none;
	padding: 2.2rem 4rem;
	text-transform: uppercase;
	font-weight: 400;

	&.btn-primary,
	&.btn-info,
	&.btn-default,
	&.btn-request-info {
		background-color:var(--template-terniary);
		color: #fff;
		border-radius: 0;
		margin: 0 auto;
		width:auto;

		&:hover {
			background-color:var(--template-terniary-dark);
			color: #fff;
		}
	}

	&.btn-request-info {
		margin-bottom: 1.5rem !important;
	}
}

.form-inline {
	display:flex;
	flex-wrap: wrap;
	gap:.5rem;
	& > label:first-child{
		width:100%;
		margin:0;
	}
	.btn {
		padding: .7rem 2rem;
	}
}

#community_btns {
	.btn-group {
		margin-bottom: 1.5rem !important;
	}
	.btn {
		background-color:var(--template-terniary);
		color: #fff;
		border-radius: 0;
		width:auto;
		padding: 2.2rem 4rem;
		text-transform: uppercase;
		font-weight: 400;

		&:hover {
			background-color:var(--template-terniary-dark);
			color: #fff;
		}

	}
}

h1,h2,h3,h4,h5 {
	text-transform: uppercase;
	color: var(--template-secondary);
	font-weight: 300;
	font-family: montserrat, sans-serif;
	line-height: 1;
}

.community-header {
	color: var(--template-terniary);
	font-weight: 300;
}

.more-information-form-holder {
	h4 {
		color: var(--template-secondary);
		font-size: 3rem;
		margin-bottom: 3rem;
		font-weight: 300;
	}
}

.form-control,
.btn, .btn:is(:hover,:active,:focus) {
	border-radius: 0;
	background-image: none;
}

.contact-line-entry {
	transform: none;
	font-weight: 600;
	font-size: inherit;

	&, a {
		color: inherit;
	}
}

.main {

	a.btn {
		background-color:var(--template-terniary);
		color: #fff;
		border-radius: 0;
		margin: 0 !important;
		width:auto !important;
		padding: 2.2rem 4rem;

		&:hover {
			background-color:var(--template-terniary-dark);
			color: #fff;
		}
	}

	.tiles {
		flex-direction: column;
		max-width: var(--max-viewport);
		margin:0 auto;

		h3 {
			font-weight:300;
			font-size: 2.8rem;
		}

		& > div,
		& > div:nth-child(2) {
			width:100%;
			height: calc( 50vw * .75 );
			min-height : 300px;
			margin: 0;
			flex-direction: row;
			position: relative;

			img {
				width:50%;
				height: 100%;
				object-fit: cover;
			}

			& > div {
				width : 50%;
				justify-content: center;
				z-index:1;
			}

			& > div > div {
				padding: 3rem 1rem;
			}

			&.location  {
				& > div {
					&, h3 { color: #fff; }
					background-color: rgba(85,162,213,.7);
				}

				img {
					position: absolute;
					width: 100%;
					filter: grayscale(1);
				}

				a {
					background-color: #fff;
					color: var(--template-terniary);

					&:hover {
						background-color: var(--template-primary);
					}
				}
			}
		}
	}
}

.favorite-heart.community {
	background-color: #fff;
	height: 4rem;
	align-items: flex-end;

	a {
		line-height: 1;
	}
}

#model-home-nav {
	background: transparent;
	margin: 1.5rem 0 1px;
	gap:1px;
	padding: 0;
	border-radius: 0;

	li {

		&, a {
			color: var(--template-secondary-light);
			letter-spacing: unset;
			border-radius: 0;
			font-weight: 400;
		}

		&.active a {
			color: #fff;
			background-color: var(--template-terniary);
		}
	}
	& + #search_bar {
		margin-top:0;
	}

	@media ( max-width:640px ) {
		li a {
			padding-top: 22px;
			padding-bottom: 22px;
		}
		li.active a {
			color: white;
			background-color: var(--template-terniary);
		}
	}
}

#models-list {
	.home-of-the-month,
	.home-pending,
	.home-sold,
	.home-virtual-tour {
		background-color: #222;
		color: #fff;
		margin: 0;
		font-size:1.4rem;
		line-height: 1;
		box-shadow: none;
		padding:1rem 1.7rem;

		&:after {
			display:none;
		}
	}

	.home-pending {
		background-color: #f2c029;
	}

	.home-sold{
		background-color: #c00;
	}

	.home-pending,.home-sold {
		text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
	}

	.items {
		gap:1rem;
		margin:0;
	}

	.item {
		margin:0;
		position: relative;
		background-color: #fff;
	}

	a {
		margin: 0;
	}

	.item:not(.sp-full-row) {
		box-shadow: 0 0 .25rem rgba(0, 0, 0, 0.3);

		& > a:first-child {
			background-color: #fff;
			text-align: center;

			.f-carousel {
				aspect-ratio : 16/9;
				overflow: hidden;

				/*
				--f-button-bg: transparent;
				--f-button-hover-bg: transparent;
				--f-button-active-bg: transparent;
				--f-button-border-radius: none;
				--f-button-shadow: none;
				*/

				--f-button-color: #fff;
				--f-button-hover-color: #fff;

				--f-button-prev-pos: -.5rem;
				--f-button-next-pos: -.5rem;
				--f-button-width: 2rem;
				--f-button-height: 2rem;

				--f-button-svg-height: 2rem;
				--f-button-svg-width: 2rem;

				.f-carousel__viewport,
				.f-carousel__track{
					height:100%;
					position: relative;
				}

				svg {
					filter: drop-shadow(1px 1px 2px rgba(0,0,0,.5));
				}

				img {
					position: relative;
					left:unset;
					top:unset;
					height: 100%;
					aspect-ratio : 16/9;
				}
			}

			.image {
				aspect-ratio : 16/9;

				&::before{
					display: none;
				}
			}

			& > div {
				border: none;

				.sq-ft {
					justify-content: center;
					margin: 0;
				}

				p {
					font-size:1.4rem;
					margin: 1rem 0;
				}

				&.price {
					color: var(--kolter-brand );
					line-height: 1.2;
					margin: .5rem 0 1.5rem;
				}
			}
		}

		.btn-view-record {
			background-color:var(--template-terniary) !important;
			height:4.4rem;
		}

		a:hover .btn-view-record,
		.btn-view-record:hover {
			background-color:var(--template-terniary-dark) !important;
		}

		a.interactive,
		.btn-inventory {
			margin:0 1.5rem 1rem;
			line-height: 1.42;
			width: auto;
		}

		.btn-inventory {
			background-color: #333;
			color:#fff;
			text-transform: none;

			&:hover {
				background-color: #222;
			}
		}
	}

	.item.sp-full-row {
		background-color:var(--template-primary);
		background-image:url('/includes/themes/elegant/contact-bg.jpg');
		background-repeat: no-repeat;
		background-size: cover;
		color: var(--template-secondary);
		text-align: center;
		border: none;

		.image { display: none; }
		.description {
			width: 100%;
			padding: 5rem 2rem;
		}

		a {
			color: inherit;
		}

		form {
			margin: 0 auto;
			padding:1rem 0;
			gap: 1rem;
			flex-wrap: wrap;
			justify-content: center;

			.submit-btn {
				display: flex;
				justify-content: center;
				flex-grow: 1;
				flex-basis: 100%;
				text-align: center;

				.btn {
					width : auto;
					padding:2.2rem 4rem;
					line-height: 1;
					text-transform: uppercase;

					&:not(:disabled) i { display:none; }
				}
			}

			.g-recaptcha {
				display: none;
			}

			& + div {
				color: var(--kolter-brand);
				font-size:1.8rem;
				font-weight: 600;
				text-shadow: 1px 1px 4px rgba(255,255,255,.8);
			}
		}

		h3 {
			text-transform: uppercase;
			font-weight: 300;
		}
	}
}

.model-view  {
	#model-container {

		.home-of-the-month,
		.home-pending,
		.home-sold,
		.home-virtual-tour {
			background-color: #222;
			color: #fff;
			margin: 0;
			font-size:1.4rem;
			line-height: 1;
			box-shadow: none;
			padding:1rem 1.7rem;

			&:after {
				display:none;
			}

			&.bottom-left {
				box-shadow:none;
				margin:0;
				left:0;
				bottom:0;
				font-size:1.8rem;
				font-weight:600;
			}

		}

		.home-pending {
			background-color: #f2c029;
		}

		.home-sold{
			background-color: #c00;
		}

		.home-pending,.home-sold {
			text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
		}

		.btn {
			background-color:var(--template-terniary);
			&:hover {
				background-color:var(--template-terniary-dark);
			}
		}

		#model-links .btn{
			background-color:var(--template-terniary) !important;
			&:hover {
				background-color:var(--template-terniary-dark) !important;
			}
		}

		#model-floorplans {
			.nav {
				background-color: transparent;
				gap:1rem ;
				justify-content: center;

				li {
					width: auto;
					padding:0 0 0 1rem;
				}
				a {
					font-size:2rem;
					font-weight: 400 !important;
					padding: 0 !important;
					letter-spacing: unset !important;
					background-color: transparent;
					color: var(--template-secondary-light);
				}
				li.active a {
					color: var(--template-terniary);
				}
				li + li {
					border-left: .55px solid var(--template-secondary);
					padding: 0 1rem;
				}
			}
			.mobile-tab-bordered {
				background-color: transparent;
				margin: 0;
			}
			.mobile-tab {
				color: var(--template-terniary);
				border: none;
			}
			.floorplan-container,
			.elevation-container {
				border:none;
				margin-bottom:0 !important;
			}
			.static-fp-item a {
				font-size: 1.6rem !important;
			}
		}

		#model-details{
			top:7.5rem;
			padding-top: 0;
			.heading, .price {
				font-weight: 400 !important;
			}
		}

		#model-properties{
			padding:3rem 0;
			line-height: 1.2;

			li { gap:.5rem; }

			img { display: none; }

			.value {
				order:1;
				font-weight: 100;
				font-size: 3rem !important;
				margin-bottom: 1.2rem;
				color:var(--template-terniary) !important;
			}
			.title {
				color:var(--template-secondary) !important;
				font-weight: 100;
				order:2;
				padding:0 !important;
				margin:0 !important;
				height: auto !important;
			}
			.value + small {
				order:3;
				margin: 0 !important;
				color:var(--template-secondary) !important;
				font-weight: 100;
			}
		}

		#model-content-wrapper {
			background-color: #fff;
			padding-bottom: 1rem;
		}

		#header-button-holder {
			align-items: center;
			bottom: unset;
			display: flex;
			flex-direction: row;
			font-size: 1.4rem;
			gap: 1.5rem;
			justify-content: flex-end;
			left: unset;
			line-height: 1;
			margin:0 auto;
			max-width: 122rem;
			position: relative;
			padding:1rem 1.5rem;

			i[class*="fa"]{
				color:var(--template-terniary);
			}

			a {
				color: #707070 !important;
				text-transform: uppercase;
			}

			#download-floorplan-link,
			#virtual-tour-link,
			#total-image-count {
				align-items: center;
				border-radius: 0;
				color: #707070;
				font-size: 1.4rem;
				font-weight: 400;
				height: 2.8rem;
				justify-content: center;
				line-height: 1;
				padding: 0;
				position: unset;
				width:auto;

				&,
				&:hover {
					background-color: transparent;
				}
			}

			#virtual-tour-link {

				&.video {
					width: unset;
				}

				.circle-wrap {
					filter: invert(41%) sepia(53%) saturate(435%) hue-rotate(160deg) brightness(90%) contrast(92%);
					left:unset;
					margin:0;
					position: relative;
					top:unset;
				}
				.label {
					color: #707070;
					font-size: 1.4rem;
					font-weight: 400;
					line-height: 1;
				}
			}
		}

		#model-related-mir {
			&,
			section {
				padding: 0;

				.item {
					margin: 0;

					a {
						padding-bottom:2rem;
					}

					.description {
						* { text-align: center !important; }
						.heading { margin:0 0 .5rem !important; }
						p { margin:.5rem 0 !important; }
					}
					.price {
						margin-top:0;
					}
				}
			}
		}

		#model-forms {
			padding-bottom: 0;
			.nav {
				padding-top:3rem;
				li a {
					text-transform: uppercase;
					color: var(--template-secondary);
					font-weight: 300;
					font-family: montserrat, sans-serif;
					height:auto;
					font-size: 3rem;
					margin-bottom: 1rem;
					line-height: 1;
				}
			}
			#register {
				padding-top:0;

				textarea {
					min-height: 100%;
				}
			}
			h2 {
				margin:0 0 3rem;
				small {
					text-transform: none;
				}
			}
			a, #register {
				background-color: transparent !important;
			}
			.container {
				max-width: 77rem;
				background-color: var(--template-primary );
			}
		}
	}

	&:has(#manager_bar){
		#model-container #model-details{
			top:11.4rem;
		}
	}
}

#communities #search_bar {
	box-shadow: none;
	border-radius: 0;
	border:none;
	background-color: var(--template-terniary);
	color: #fff;

	.btn,.btn:hover {
		background-color: var(--kolter-brand);
		color: #fff;
	}
}

#search_bar .btn {
	background-color: var(--kolter-brand) !important;
	border-color: var(--kolter-brand) !important;
	color: #fff !important;
	padding: 6px 12px;
}

.gallery-holder .gallery-items a {
	text-transform: uppercase;
	font-weight: 300;
	&:hover  {
		color:var(--template-terniary-dark);
		img {
			border-color:var(--template-terniary);
		}
	}
}

@media ( min-width:1920px ){
	#slideshow {
		max-width: var(--max-viewport);
		height: calc( var(--max-viewport) * .5625 );
	}
}

@media ( min-width:1220px ){
	.main .tiles > div {
		max-height: 50rem;
	}
}

@media (max-width: 880px) {
	#models-list .items > div.item.sp-full-row .description form {
		flex-direction: row;
		& > div {
			width: calc(50% - .5rem);
		}
	}
}

@media(max-width:770px){
	.main .tiles > div,
	.main .tiles > div:nth-child(2) {
		width:100%;
		max-width:100%;
		margin:0;
	}
}

@media (max-width: 767px){
	:root {
		--menu-height : 5rem;
	}
	main #content .tiles .location img {
		height: 100% !important;
	}
	.model-view {

		#model-container #model-details{
			top:5rem;
		}

		&:has(#manager_bar) #model-container #model-details{
			top:9rem;
		}
	}
}

@media (max-width: 640px) {
	.main .tiles > div,
	.main .tiles > div:nth-child(2) {
		flex-direction: column;
		max-height: unset;
		height: unset;

		div,img { width: 100%; }

		& > div {
			padding:0;
			align-items: center;
			justify-content: center;
		}

		img { order:1; }
		div { order:2 }

		img {
			aspect-ratio: 4/3;
		}

		&.location {
			min-height:100vw;
		}
	}

	#models-list .items > div.item.sp-full-row .description form {
		flex-direction: column;
		flex-wrap: nowrap;
		width: 100%;

		& > div {
			width: 100%;
		}

		.submit-btn {
			flex-basis: unset;
		}
	}
}