body {
	background-color: #fff;

	&.full-width{
		background-color: #f5f5f5;

		section#content{
			width:100%;
			max-width:100%;
			padding:0;
			margin:0;
		}
	}
}

#body-container {
	&.in-community {
		padding-top:50px;
	}

	& > header.in-community {
		height: 50px;
		background-color:#036;
		background-image:none;
	}
}

header {

	#main-nav{
		display:flex;

		ul {
			margin:0;

			&,
			ul li:first-child a {
				border-left:none;
			}
		}

		a:is(.schedule-your-tour,.btn-orange){
			justify-self: center;
			align-self: stretch;
			align-items: center;
			margin:.75rem;
			padding: 0 2rem;
			display: flex;
			line-height: 1;
		}
	}

}

footer {
	background-color:#036;
	min-height:160px;
	font-weight: 300;

	section {
		display: flex;
		flex-wrap: wrap;
		padding:3em 1.5em;
		justify-content: space-around;

		&.in-community{
			padding:1.5em;
		}
	}

	section > div {
		width:50%;
		text-align: center;
		padding:0 1em;

		.logo-title{
			font-size:1.125em;
			line-height: 1;
			font-style: italic;
			margin:0;
		}

		.logo{
			margin:0 auto 10px;
			padding:0;
			background:url('/includes/images/logo/kolterhomes-logo-white.svg') no-repeat center center transparent;
			background-size: auto 4.75em;
			height:3.5em;
			width:100%;
			display: block;

			h4 {
				display:none;
			}
		}
	}

	section > nav {
		display: flex;
		font-style: italic;
		text-align: left;
		width:25%;
		line-height:1.6;
		justify-content: space-around;
	}

	section.in-community > nav {
		padding-top:5.3571428571em;
	}

	section > nav > div {
		display: flex;
		flex-direction: column;
	}
}

blockquote {
	border:none;
	margin:0;
	padding:.5em;

	p {
		color:#036;
		font-weight:bold;
		margin:0;
	}
	cite{
		font-style:normal;
		font-size:.875em;
	}
	footer {
		background-color: transparent;
		min-height: 0;

		&::before{
			content: '- '
		}
	}
}

#mobile-nav-control .logo {
	margin:0 50px;
	width:100%;
	background-image: none;
	display: flex;
	justify-content: center;
	align-items: center;
	color:#fff;
	font-size:1.2em;
	line-height: 1;
	text-transform: uppercase;
	overflow: hidden;
	white-space: nowrap;
	font-weight:500;
	flex-shrink: 1;
}

ul[data-account="mobile-append"] a {
	line-height:1.42 !important;
	padding:7.5px 14px!important;
}

main .btn {
	white-space: normal;
}

.model-view #model-container .schedule-your-tour,
a.schedule-your-tour,
a.btn-orange {
	background-color: #FF960E;
	background-image: none;
	color: #fff;
	text-transform: uppercase;
	border: none;
	padding-left:40px;
	padding-right:40px;

	&:hover {
		background-color: #FF9014;
		background-image: none;
		color: #fff;

	}
}

#model-nav-mobile .schedule-your-tour {
	margin: 20px 20px 0;
}

#slideshow {
	max-width:1220px;
	margin:0 auto;
	height: calc( 1220px * .5625);
	max-height: calc( 1220px * .5625);

	&::before {
		display: none;
	}
}

.btn-default {
	background-color: #036;
	border:none;
	color:#fff;
	padding-left:40px;
	padding-right:40px;

	&:hover,
	&:active{
		color:#fff;
		background-color: rgb(1, 39, 77);
		border:none;
	}
}

.more-information-form-holder {
	border:none;
	background-color:#f5f5f5;
	box-shadow: none;
	margin:0;
	padding:40px;
	width:100%;
	border-radius: 0;

	form{
		max-width:50em;
		margin:0 auto;
	}
	h4 {
		text-align: center;
		font-weight: bold;
		color:#036;
	}
	p {
		margin:0;
	}
}

.responsive-container {
	max-width:48em;
	margin:0 auto;
	padding:0 !important;
}

.responsive-container._3-4::after {
	padding-top: 75%;
}

.light_gray_bg {
	background-color:#f5f5f5;
}

.large_padding {
	padding-top:60px;
	padding-bottom:60px;
}

.large_padding_sides{
	padding:0 60px;
}

.schedule-your-tour-button-holder {
	margin:20px 0;
	text-align: center;
}

.schedule-your-tour-button-holder + .responsive-container {
	margin-top:20px;
}

.text-left .schedule-your-tour-button-holder {
	text-align: left;
}

.large_padding .schedule-your-tour-button-holder {
	margin-bottom:0;
}

.community-header + .tiles {
	margin-bottom: 25px;
}

.main {
	text-align: center;
	color:#333;

	h1,
	h2,
	h3,
	h4{
		text-transform:uppercase;
	}

	h1 {
		font-size:32px;
	}
	h2 {
		font-size:28px;
	}

	.tiles h2,
	h3 {
		font-size:24px;
	}
	h4 {
		font-size:20px;
	}

	.tiles{
		display:flex;
		justify-content: center;
	}

	.tiles > div {
		background-color:#F5F5F5;
		display:flex;
		flex-direction:column;
		width:33%;

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

		&:nth-child(2){
			margin:0 40px;
		}

		& > div {
			padding:20px 40px;
			text-align:center;
			flex-grow:1;
			display: flex;
			flex-direction: column;

			.btn {
				margin-top:auto;
			}
		}
	}

	.flex-container {
		display:flex;
		margin:0 80px;

		& > div + div {
			margin-left:40px;
		}
	}

	#partners p {
		font-size:24px;
		font-weight:bold;
	}

	& + .facebook-link{
		margin:0 !important;
		padding-bottom:40px;
	}
}

.favorite-heart.community{
	height:5rem;
	max-width:1220px;
	padding:0;
	margin:0 auto;
	text-align: center;
	justify-content: center;
	align-items: center;
	display: flex;
}

#communities .community_btns{
	max-width:1220px;
	padding:0;
	margin:1.5rem auto;

	.btn {
		border-radius: 0;
	}
}

.main > .container:first-child,
.community_btns + .main > .container:first-child {
	padding-top: 3rem;
}

#thropy-case {
	border:1px solid #333;
	position:relative;
	padding:30px 40px;

	h4 {
		position:absolute;
		left:50%;
		transform: translate(-50%,-50%);
		background-color: #fff;
		white-space: nowrap;
		line-height: 1;
		margin:0;
		top:0;
		padding:0 10px;
	}

	&  + div {
		margin-top:40px;
	}
}

.flex-logos{
	display:flex;
	align-items: center;
	justify-content: center;
	margin:40px 0;
	flex-wrap: wrap;

	img {
		margin:10px 20px;
		width:auto;
	}
}

#header-overlay{
	position: absolute;
	z-index:10;
	background-color:rgba(0,0,0,.2);
	padding:4rem 6rem;
	color:#fff;
	max-width: 45%;

	p {
		margin:0;
	}

	.h1 {
		font-size:32px;
		margin:0 0 1.2rem;
		line-height: 1.2;
		display: block;
	}

	.schedule-your-tour-button-holder{
		margin-bottom: 0;
		text-align:inherit;
	}

	&:is(.top-left,.middle-left,.bottom-left) {
		text-align:left;
	}

	&:is(.top-center,.middle-center,.bottom-center) {
		text-align:center;
	}

	&:is(top-right,.middle-right,.bottom-right) {
		text-align:right;
	}

	&.top-left {
		top: 20px;
		left:20px;
	}
	&.top-center {
		top: 20px;
		left:50%;
		transform: translateX(-50%);
	}
	&.top-right {
		top: 20px;
		right:20px;
	}

	&.middle-left {
		top: 50%;
		left:20px;
		transform: translateY(-50%);
	}
	&.middle-center {
		top: 50%;
		left:50%;
		transform: translate(-50%,-50%);
	}
	&.middle-right {
		top: 50%;
		right:20px;
		transform: translateY(-50%);
	}
	&.bottom-left {
		bottom: 20px;
		left:20px;
	}
	&.bottom-center {
		bottom: 20px;
		left:50%;
		transform: translateX(-50%);
	}
	&.bottom-right {
		bottom: 20px;
		right:20px;
	}

}

.directions + .community-header {
	margin-top:40px;
}

body:not(.menu-v-1) .with-aside.directions{
	margin-bottom: 20px;

	& > aside {
		width: 50%;

		#map_holder,
		#map_canvas{
			height:100%;
			min-height:300px;
		}

		& + div {
			width:50%;
		}
	}
}

.home-virtual-tour{
	background-color: #222;

	&::after {
		border: 5px solid #000;
		border-color: transparent transparent #000 #000;
	}
}

.item .btn-request-info {
	background-color: #036;
	background-image:none;
	border:none;
}

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

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

.hidden-md{ display:none; }

.contact-line-entry {
	font-size: 2rem;
	font-weight: 600;
	transform: translateY( -3rem );

	&, a {
		color: #036;
	}

	br { display: none; }
}


#flex-community-header {
	display: flex;
	justify-content: space-between;
	margin-bottom: 1.2rem;

	.community-header {
		margin-bottom: 0;
	}

	#community-header-nav {
		display: flex;
		margin: 0;

		.section-navigation {
			display: flex;
			flex-direction: row;
			width: 100%;
			align-items: center;
			gap: 1rem;

			.pagination {
				display: flex;
				gap: 1rem;
				font-size: 1.6rem;

				a {
					border: none;
					padding: 1rem 0;
					line-height: 1;
					margin: 0;
					border-radius: 0;
					color : #aaa;

					&:hover {
						background-color: transparent;
						color : #054474;
					}
				}

				.active a {
					background-color: transparent;
					color : #054474;
				}
			}

		}
	}

}

.carousel-widget {
	display:flex;
	flex-direction: column;
	gap: 1.5rem;
	margin: 1.5rem 0;

	&.content-bottom {
		flex-direction: column-reverse;
	}

	.f-thumbs.is-horizontal .f-thumbs__track {
		padding-bottom: 0;
	}
}

/* ==========================================================================
RESPONSIVE RULES
========================================================================== */
@media (max-width: 1260px) {
	#slideshow { height: calc( 100vw * .5625); }
}

@media (max-width:1220px) {
	.favorite-heart.community { background-color: #f5f5f5; }
}

@media(min-width:1024px){
	.hidden-md{ display:inline; }
}

@media(max-width:970px){
	header.in-community #main-nav a { font-size:12px; }

	#header-overlay {
		max-width:50%;
		.h1 {
			font-size:26px;
		}
	}

	#flex-community-header {
		align-items:center;
		gap: 1.5rem;
		flex-direction: column;
		margin-bottom: 1.5rem;

		#community-header-nav {
			order: 1;
		}
		.community-header {
			order: 2;
			margin: 0;
		}
	}
}

@media(max-width:860px){
	#tile-nav-select {
		padding-right: 0;
	}
	.with-aside.directions{
		flex-direction: column-reverse;
		gap:20px;

		& > aside,
		& > aside + div {
			width: 100% !important;
			border:0;
			padding:0;
			margin:0;
		}
		& > aside #map_holder {
			aspect-ratio: 16/9;
			height: 100% !important;
			#map_canvas {
				display: flex;
			}
		}
	}
}

@media(max-width:770px){
	#communities .community_btns{
		margin-top:0;
		padding: 0;
	}

	.contact-line-entry { transform: translateY( -2rem ); }

	.main .tiles,
	.flex-container {
		flex-direction: column;
	}
	.main .tiles > div,
	.main .tiles > div:nth-child(2) {
		width:100%;
		max-width:400px;
		margin:20px auto 0;
	}
	.main .flex-container {
		margin:0;
	}
	.main .flex-container > div + div {
		margin:20px 0 0;
	}
	.main .flex-container > div + div,
	.text-left .schedule-your-tour-button-holder{
		text-align: center;
	}
	.main .tiles > div:first-child{
		margin-top:0;
	}
	footer section > nav{
		order:2;
		flex-direction: row;
		text-align: center;
		width:100%;
		margin-top:10px;
	}
	footer section.in-community > nav{
		padding-top:0;
	}
	footer section > nav > div{
		display: block;
	}
	footer section > nav a {
		margin:0 .25em;
	}
	footer section > div{
		width:100%;
		order:1;
	}
	main{ margin:0; }

	main #content .flex-logos {
		#moen                     { height:40px !important; }
		#mohawk                   { height:50px !important; }
		#carrier                  { height:60px !important; }
		#ge                       { height:70px !important; }
		#shaw-builder-multifamily,
		#sherwin-williams,
		#schlage                  { height:80px !important; }
	}

	#header-overlay{
		top:auto !important;
		left:0 !important;
		right:0 !important;
		bottom:0 !important;
		max-width:100%;
		padding:20px;
		text-align: center;

		.h1{
			font-size:1.8rem;
			margin-bottom: .6rem;
		}

		.schedule-your-tour-button-holder{
			display:none;
		}
	}

	.main h2 { font-size:24px; }
	a.schedule-your-tour { padding:6px 1em; }
	.large_padding_sides { padding:0; }

	.large_padding{
		padding-top:40px;
		padding-bottom:40px;
	}
	.btn-default{
		padding-left: 1em;
		padding-right: 1em;
	}
}

@media (max-width: 767px){
	#slideshow { margin:0; }
	#slideshow + main { margin-top:0; }
	#mobile-nav-control .logo div{
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

@media(min-width:768px){
	#mobile-nav-control { display:none; }
}

@media (max-width: 640px) {
	.contact-line-entry br { display: unset; }
}

@media(max-width:400px){
	#mobile-nav-control .logo{
		font-size: .925em;
	}
}

@media (max-width: 500px), (max-width: 860px) and (orientation: landscape){
	#header-overlay { display:none; }
}