:root {
	--sidebar-width: 30rem;
}
* {
	box-sizing: border-box;
}

html{
	height: 100%;
	-webkit-font-smoothing: antialiased;
}
body{
	background-color:#eee;
	height: 100vh;
	height: 100vh;
	line-height: 1.2;
	margin: 0;
	min-width: 320px;
	overflow: hidden;
	padding: 0;
}
body, input, .gm-style {
	font-family: Proxima Nova,proxima-nova,Lucida Grande,sans-serif;
}
main{
	display: flex;
	flex-direction: column;
	height:100vh;
	width:100vw;
	max-height:100vh;
}

header#search_bar{
	background-color: #036;
	color:#fff;
	display:flex;
	height:3.75rem;
	justify-content: center;
	padding:0.625rem;
	width: 100%;

	#search_controls{
		align-items: center;
		display: flex;
		gap:.5rem;

		label,.form-group{
			margin:0;
			white-space: nowrap;
		}

		label {
			font-weight: 600;
		}
	}

	a.logo {
		background: url(/includes/images/logo/kolterhomes-logo-white.svg) no-repeat center center transparent;
		background-size: cover;
		cursor: pointer;
		display: block;
		height: 3.25rem;
		margin: 0;
		padding: 0;
		text-decoration: none;
		width: 12.5rem;

		span {
			display: none;
		}
	}
}

section {
	display:flex;
	flex-grow: 1;
	flex-wrap: nowrap;
	width: 100%;
	background-color: #8BB4F9;

	#map_canvas {
		flex-grow:1;
	}

	#main{
		overflow-y:scroll;
		width:var(--sidebar-width);
		flex-shrink: 0;
		height: calc(100vh - 3.75rem);
		background-color: #2f6aa2;
	}

	#recs{
		list-style:none;
		margin:0;
		padding:0;

		li{
			color: #fff;
			cursor: pointer;
			margin: 0 0 1px 0;
			border-bottom: .55px solid rgba(255,255,255,.5);

			&.blue  { background: #2f6aa2; }
			&.gold  { background: #D3BF96; }
			&.green { background: #608e61; }

			a{
				color:inherit;
				text-decoration:none;
				transition: background-color .3s;
				display:flex;
				padding:.5rem;
				gap:.5rem;
				flex-wrap: nowrap;
			}

			&.active a,
			a:hover {
				background-color: rgba(0,0,0,.3);
			}

			img{
				width: 5.625rem;
				height: 5.625rem;
				flex-shrink: 0;
				box-shadow: 0 0 3px rgba(0,0,0,.5);
				object-fit: cover;
				background-size: cover;
				background-repeat: no-repeat;
				background-position: center center;
				border-radius: .25rem;
			}

			h2, p {
				margin:0;
				padding:0;
				font-weight:400;
				text-shadow: 1px 1px 1px rgba(0,0,0,.5);
			}

			h2{
				font-size:1.2rem;
				font-weight: 600;
				margin-bottom:.25em;

				small{ display: block; }
			}

			p{
				font-size:.875em;
			}
		}
	}

	#no-results{
		align-items:center;
		background:#c00;
		color:#fff;
		display: flex;
		font-weight:600;
		height:100%;
		justify-content: center;
		padding:2em;
		text-align: center;

		a{
			color:#fff;
			text-decoration:underline;
		}
	}
}

.bubble {
	min-width:17.5rem;
	max-width:31.25rem;

	a{
		color:inherit;
		text-decoration:none;
		display: flex;
		align-items: flex-start;

		.open{
			color:#c00;
			text-decoration:underline;
		}
	}

	h1{
		font-size:1.2rem;
		white-space: nowrap;
		margin:0;
		padding:0;
		font-weight:500;

		small{
			display:block;
			font-weight: 300;
		}
	}

	img{
		display:block;
		width:5.625rem;
		margin-right:0.625rem;
		flex-shrink: 0;
		border: none;
	}

	p{
		font-size:.9rem;
		margin:.5em 0 0 0;
	}
}

.in-frame {
	#main{
		max-width: 22.5rem;
	}
}

#fullscreen {
	background-color: #fff;
	border: 2px solid #fff;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
	cursor: pointer;
	font-size: 20px;
	height: 40px;
	width: 40px;
	text-align: center;
	margin-left: 10px;
	margin-top: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #666;
	text-decoration: none;
}

@media (max-width: 1100px) {
	:root {
		--sidebar-width: 25rem;
	}
}

@media (max-width: 900px) {
	:root {
		--sidebar-width: 18.75rem;
	}
	#recs{
		li a{
			h2 { font-size:1.1rem; }
			img {
				height: 4.6875rem;
				width: 4.6875rem
			}
		}
	}
}

@media ( max-width: 770px ){
	#recs{
		li a{
			h2 { font-size:1rem; }
			p  { font-size:.825rem };
			img {
				height: 3.75rem;
				width: 3.75rem
			}
		}
	}
}

@media ( max-width: 700px ){
	:root{
		--sidebar-width:30vw;
	}
	main{
		#search_bar{
			a.logo {
				margin:0 auto;
				height:2rem;
				background-size: cover;
			}
		}
		#recs{
			li a {
				img {
					display: none;
				}
			}
		}
	}
}

@media ( max-width: 640px ){
	main{
		#search_bar{
			height:auto;
			padding:.5rem;

			#search_controls{
				width: 100vw;
				label { display: none; }

				.form-group {
					flex-grow: 1;
				}
			}
		}
	}
	/* hide the sidebar list */
	#main { display:none; }
}
@media ( max-width: 640px ){
	main{
		#search_bar{
			a.logo {
				display: none;
			}
		}
	}
}

/* clean bad inserted code */
iframe[src="javascript:false"],
img[src^="https://tag.simpli.fi"],
img[src^="https://rdcdn.com/"],
img[src^="https://trkn.us"],
img[src*="pubads"] {
	position: absolute;
	left:0;
	bottom: 0;
}