#listingWrapper {
	position: fixed;
	box-sizing: border-box;
	top: 0;
	bottom: 0;
	/* NOTE: on iPad 100vh != 100% */
	width: calc( 100% + var(--scrollbarWidth) );
 	overflow-y: scroll;
	overflow-x: hidden;
 	z-index: 900;
}

/********** #headerContainer **************/

.mainHeaderContainer {
	 position: absolute;
	will-change: transform;
	top: 0; left: 0;
	width: 100%;
	height: 72px;
	border-bottom: 3px solid #c90000;
	background-color: white;
 	z-index: 200;
}

.logo {
	height: 54px;
	width: auto;
	position: absolute;
	display: block;
	box-shadow: 3px 3px 4px 1px #cdcdcd;
	margin-top: 8px;
	margin-left: 48px;
	margin-right: 12px;

}

.liveScapes {
	font-family: "oldStandard";
	position: absolute;
	margin-left: 120px;
	width: 100%;
	margin-top: 14px;
	font-size: 40px;
}


#listingContact, #mapContact {
	display: inline-block;
	font-family: "roboto";
	position: absolute;
	top: 14px;
	right: 14px;
	color: var(--darkGray);
}

#listingContact div, #mapContact div {
	display: inline-block;
}

#listingContact img, #mapContact img {
	display: inline-block;
	height: 1.25em;
	vertical-align: bottom;
}


/************** listingContainer ***************/

 #listingContainer {
	position: relative;
	top: 72px;
	background-color: #e8e8e8;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: var(--d48) var(--d48);
	padding: var(--d48);
	padding-bottom: calc( 2 * var(--d48) );
	/* ensures momentum scrolling in IOs: */
/* 	-webkit-overflow-scrolling: touch; */
	z-index: 4;
}


.tourBox {
	box-sizing: border-box;
/* Required because of bug in Safari: */
	position: relative;
	content-visibility: auto; /* seems to work, but I would need many more boxes */
	background-color: var(--white);
	border: 1px solid var(--containerBorder);
	border-radius: 4px;
/* Required because of redraw quirk in Safari: */
  	width: calc( 100vw/3 - var(--d48)*4/3 );
	box-shadow: 5px 6px 9px 1px #bbbbbb;
}

.tourBoxImg {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 3px 3px 0px 0px;
}

.tourBoxCaption {
	display: block;
	padding: 20px 26px 20px 26px;
	height: 10rem;
}

.tourBoxHd {
	float: left;
	width: 100%;
 	margin-bottom: 10px;
 	padding-bottom: 6px;
	border-bottom: 1px solid #4a4a4a;
}

.tourBoxTitle {
	float: left;
	font-size: 1.3rem;
/* 	width: calc( 100% - 1.6rem*1.68 ); */
	font-weight: 800;
	line-height: 1.9rem;
	font-family: 'oldStandard';
	color: black;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.tourBoxToPanoramaIcon {
	box-sizing: border-box;
	float: right;
	height: 1.6rem;
 	margin-top: 0.1rem;
}

.tourBoxToPanoramaIcon img {
	display: block;
	height: 100%;
}

.tourBoxContainer {
	position: relative;
	width: 100%;
	overflow: hidden;
	height: 5rem;
}

.tourBoxFrame {
	box-sizing: border-box;
	position: relative;
	font-family: "sourceSerifPro";
	height: inherit;
	overflow-y: scroll;
	scroll-behavior: smooth !important;
	width: calc(100% + var(--scrollbarWidth) + 4px);
	/* + 4px because on iPad for some reason the OS scrollbars remain visible... */
	padding-right: 26px;
	text-align: justify;
	color: #6f6f6f;
	font-size: 1.05rem;
	line-height: 1.65rem;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
/* 	text-wrap: balance -> very little support as of Juli 20 2023 */
}

.tourBoxToOverview {
	display: block;
	font-family: 'acuminPro';
	font-size: 1rem;
	font-weight: 800;
	margin-top: 4px;
	color: black;
	z-index: 100000;
}

 .tourBoxToOverview img{
	width: 0.95rem;
	height: auto;
	margin-bottom: -0.3125rem;
}


/******************************* Control Panel **********************************/

#listingCpContainer{
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 48px;
	z-index: 400;
}

#showMap span {
	font-family: "oldStandard";
	float: left;
	line-height: 52px;
	font-size: 1.2rem;
}

#showMap img {
	float: left
}


#showListingChrome, #hideListingChrome {
	position: fixed;
}