@font-face {
	font-family: 'ECF';
	font-weight: 100;
	font-style: normal;
	src: url(https://res.cloudinary.com/brandpad/raw/upload/v1712067986/28737/centrano1-book_9d7dc6db4a2744b0b348e0ea83d360b9.otf) format("opentype");
}

body {
	color: #232038;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	font-family:  'ECF', sans-serif;
	font: 18px;
	background: white;
	overflow: hidden;
	cursor: default;
}

.toggle > body {overflow: hidden;}

h1, h2, h3 {
	color: #232038;
	/* font-weight: 400; */
}

h1 {font-size: 32px;}

h2 {font-size: 30px;}

h3 {font-size: 18px;}

a {
	color: #232038;
	cursor: pointer;
	/* font-weight: 400; */
	text-decoration: underline;
}

a.ecf-link {
	color: #f45446;
	font-size: 14px;
	letter-spacing: 3px;
	margin-bottom: 16px;
	text-transform: uppercase;
	text-underline-offset: 10px;
}

a:focus, a:hover {color: #232038;}

/* Prevent overscroll bouncing on touchscreen */
@media (pointer: coarse) {

  html {overflow: hidden; width:100%;}

	/* Removed 'positon: fixed' as solution to main menu not opening on iPhone */
  body {height: 100%;}

}

/* Hint labels */
#labelTogglePitch,
#labelFlyTo {
	/* REVIEW: Changed from position: absolute to avoid iOS overscroll */
	z-index: 100000;
	position: fixed;
	display: none;
	max-width: 500px;
	height: 30px;
	right: 60px;
	padding: 5px 10px;
	background-color: rgba(255,255,255,1);
	color: black;
	text-align: center;
	border-top-left-radius: 6px;
	border-bottom-left-radius: 6px;
	cursor: default;
}

#labelTogglePitch {top: 150px; width: 99.5px;}
#labelFlyTo {top: 190px; width: 128px;}


#labelTogglePitch::after,
#labelFlyTo::after {
	left: 100%;
	top: 50%;
	content: " ";
	border: solid transparent;
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(255,255,255,0);
	border-left-color: rgba(255,255,255,1);
	border-width: 15px;
	margin-top: -15px;
}

#labelStoryMenu,
#labelMainMenu {
	/* REVIEW: Changed from position: absolute to avoid iOS overscroll */
	z-index: 100000;
	position: fixed;
	display: none;
	max-width: 500px;
	height: 30px;
	padding: 5px 10px;
	background-color: rgba(255,255,255,1);
	color: black;
	text-align: center;
	border-top-right-radius: 6px;
	border-bottom-right-radius: 6px;
	cursor: default;
}

#labelStoryMenu {left: 220px; top: 45px; width: 130px;}
#labelMainMenu {left: 210px; top: 88px; width: 150px;}

#labelStoryMenu::after,
#labelMainMenu::after {
	right: 100%;
	top: 50%;
	content: " ";
	border: solid transparent;
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(255,255,255,0);
	border-right-color: rgba(255,255,255,1);
	border-width: 15px;
	margin-top: -15px;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.zh, .hi {display:none;}

section > a > h3, section > a > h3:link,
section > a > h3:visited, section > a > h3:hover,
section > a > h3:active {
	color: black;
	margin-top: 0;
	font-size: 28px;
	font-weight: 900;
	text-decoration: none;
}

section > a > h5, section > a > h5:link,
section > a > h5:visited, section > a > h5:hover,
section > a > h5:active {
	color: black;
	margin-top: 0;
	font-size: 18px;
	font-weight: 900;
	text-decoration: none;
}

section > a > h1, section > a > h1:link,
section > a > h1:visited, section > a > h1:hover,
section > a > h1:active {
	color: black;
	font-weight: 900;
	text-decoration: none;
}

section > a > p, section > a > p:link,
section > a > p:visited, section > a > p:hover,
section > a > p:active {
	color: black;
	font-weight: 400;
	text-decoration: none;
}

section > a > ul, section > a > ul:link,
section > a > ul:visited, section > a > ul:hover,
section > a > ul:active {
	color: black;
	font-weight: 400;
	text-decoration: none;
}

section > p > a,
section > p > a:link,
section > p > a:visited,
section > p > a:hover,
section > p > a:active {
  text-decoration: none;
	font-weight: 400;
  color: black;
}

section > p > a.section-link {
	 color: #499ffc;
}

section > a, section > a:link,
section > a:visited, section > a:hover,
section > a:active {
  text-decoration: none;
  font-weight: 400;
}

table,
table:link,
table:visited,
table:hover {
  color: black;
  background-color: rgba(0,0,0,0);
  text-decoration: none;
  outline: none;
}

button.threed_rotate::before,
button.labels-button::before,
button.labels-off-button::before,
button.light-style-button::before,
button.dark-style-button::before,
button.satellite-style-button::before {
	font-family: "Material Icons";
	font-feature-settings: 'liga';
	font-size: 20px;
	line-height: 24px;
	vertical-align: middle;
}

button.threed_rotate::before{content: "3d_rotation";}

button.labels-button::before{content: "label";}

button.labels-off-button::before{content: "label_off";}

button.light-style-button::before{content: "brightness_5";}

button.dark-style-button::before{content: "brightness_4";}

button.satellite-style-button::before{content: "satellite";}

button.modal-button {
	background: #ffc24d;
}

button.modal-button:hover {
	background: #ffc24d;
	opacity: 1;
}

button.modal-button img {
	margin: 0;
	padding-bottom: 2px;
	width: 18px;
}

#wrapper, #wrapperFeatures {
	width: 100vw;
	height: 100vh;
}

#features {
  position: absolute;
  width: 500px;
  height: 100%;
  left: -520px;
  max-width: 50%;
  top: 0;
  overflow-x: hidden;
	overflow-y: auto;
	/* scrollingPrompt */
	scroll-behavior: smooth;
  color: #fff;
  background-color: rgba(255, 255, 255, 0.97);
  padding-left: 35px;
  z-index: 10000;
	-webkit-transition: left 0.2s linear;
	transition: left 0.2s linear;
	text-align: justify;
  cursor: default;
	direction: rtl;
}

#wrapperFeatures.switch>#features {
  pointer-events: none;
}

#wrapperFeatures.toggle>#features {
	left: 0px;
}

#startStopPresentationBtn {
	padding: 10px 20px 10px 0;
	z-index: 1000000;
	top: 66px;
	left: -455px;
	width: 56px;
	height: 56px;
	position: fixed;
	cursor: pointer;
	-webkit-transition: left 0.2s linear;
	transition: left 0.2s linear;
	opacity: 0.9;
}

#wrapperFeatures.toggle>#startStopPresentationBtn {
	left: 10px;
}
#wrapperFeatures.toggle>#startStopPresentationBtn:hover,
#wrapperFeatures.toggle>#startStopPresentationBtn:active {
  opacity: 1;
}

#startStopPresentationBtn > i {
	font-size: 36px;
}

/* Hide scroll prompt when not .active */
#scrollingPrompt {display: none;}

#scrollingPrompt.active {
	display: block;
	z-index: 1000000;
	bottom: 54px;
	left: -455px;
	width: 54px;
	height: 54px;
	position: fixed;
	cursor: pointer;
	background-color: #fff;
	border-radius: 43px;
	box-shadow: 0 2px 8px 2px rgba(0,0,0, 0.3);
	-webkit-transition: left 0.2s linear;
	transition: left 0.2s linear;
	opacity: 0.75;
}

#wrapperFeatures.toggle>#scrollingPrompt.active {
	left: 225px;
}
#wrapperFeatures.toggle>#scrollingPrompt.active:hover,
#wrapperFeatures.toggle>#scrollingPrompt.active:active {
  opacity: 1;
}

#scrollingPrompt.active > i {
	position: absolute;
	font-size: 54px;
  top: 2px;
}


#featuresExpand {display: none;}

.story-logo {
	height: 120px;
	margin: 0 0 20px 0;
}

section {
	overflow: hidden;
	padding:  20px 20px 0px 20px;
	margin-bottom: 80px;
	line-height: 25px;
	opacity: 0.25;
	font-size: 14px;
	direction: ltr;
}
section.active {
  opacity: 1;
}
section:last-child {
  border-bottom: none;
  margin-bottom: 1000px;
}

/* Map Keys */
.paddingBetweenCols tr {height: 36px;}
.paddingBetweenCols td {width: 80%; padding-right: 10px;}

.keySquare {width: 24px; height: 24px; margin-left: 20px; text-align: center;}
.keyLine {min-width: 50px; height: 5px; padding: 0; text-align: center;}
.keyLineDashed {min-width: 25px; height: 5px; float: left;}
.keySVG {text-align: center;}

#img {
  width: 100%;
  display: block;
}

/* Close Features Menu */
#menuClose {
  padding: 10px 10px;
	z-index: 1000000;
	top: 10px;
  left: -455px;
	width: 56px;
	height: 56px;
  position: fixed;
  cursor: pointer;
	-webkit-transition: left 0.2s linear;
	transition: left 0.2s linear;
  opacity: 0.7;
}
#wrapperFeatures.toggle>#menuClose {
	left: 10px;
}
#wrapperFeatures.toggle>#menuClose:hover,
#wrapperFeatures.toggle>#menuClose:active {
  opacity: 0;
}

/* ScrollTop DESKTOP */
#scrollTop {
  padding: 10px 10px;
	z-index: 1000000;
	bottom: 20px;
  left: -455px;
	width: 56px;
	height: 56px;
  position: fixed;
  cursor: pointer;
	-webkit-transition: left 0.2s linear;
	transition: left 0.2s linear;
  opacity: 0.95;
}
img#scroll {
	width: 36px;
	height: 36px;
}
#wrapperFeatures.toggle>div#scrollTop {
	left: 10px;
}
#wrapperFeatures.toggle>div#scrollTop:hover,
#wrapperFeatures.toggle>div#scrollTop:active {
  opacity: 1;
}

#sidebar {
	z-index: 100000;
	position: fixed;
	left: -355px; /* extra 5px to ensure it's not rendered */
	width: 350px;
	max-width: 90%;
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	direction: rtl;
	color: #232038;
	background-color: #f5f5f5;
	border-right: 1px solid #ddd;
	box-shadow: 0 -1px 24px rgba(0, 0, 0, 0.4);
	-webkit-transition: left 0.2s linear;
	transition: left 0.2s linear;
}

#sidebar * {
	direction: ltr;
}

#sidebar > .close-sidebar {
	background-color: #ffc24d;
	cursor: pointer;
    direction: rtl;
	height: 28px;
    padding: 2px 0;
}

#sidebar > .close-sidebar:hover {opacity: 0.8;}

#sidebar > .close-sidebar > i {margin: 0 5px;}

#sidebar > .close-sidebar > span {
    color: #232038;
	font-family: 'ECF', sans-serif;
    font-size: 14px;
    font-weight: 700;
	line-height: 24px;
	vertical-align: top;
}
.popup-caption {
	color: white;
	font-size: 16px;
	font-family: 'Roboto', sans-serif;
	padding-top: 5px;
	text-align: center;
	margin-left:calc((100% - 1000px)/2);
	max-width: 1000px;
}
/* Horizontal Scroll Buttons MOBILE */
#nextFeature,
#prevFeature{
  visibility: hidden;
}

.scrollbar-primary::-webkit-scrollbar {
  width: 10px;
  background-color: rgba(0,0,0,0); }

.scrollbar-primary::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: #000;
  }

#wrapper.toggle>#sidebar {
	left: 0;
}

#sidebar label.map-toggle {
	font-size: 14px;
	position: relative;
	display: flex;
	align-items: center;
	height: 34px;
	padding: 10px 20px;
	cursor: pointer;
}

#sidebar i {
	margin: 5px 10px;
	width: 24px;
	height: 24px;
}

#sidebar h3 {padding-left: 20px;}

label.shown {
	color: #919694;
}

body:not(.touch) #sidebar label:hover, #sidebar label.selected {
	opacity: 0.7;
}

#main {
	width: 100%;
	height: 100%;
}

#map {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	/* For full-screen map on iOS Chrome - min-width: 100vw */
	min-width: 100vw;
	height: 100%;
}

.arrow {
	text-align: center;
	cursor: pointer;
}

.narrowArrow {display: none;}

.maintained {
	padding-bottom: 10px;
}

#carouselButtons {
		position: absolute;
		left: 4px;
    bottom: 2px;
		color: white;
		opacity: 0.6;
}

.playpause{
	color: white;
	cursor: pointer;
}

.playpause:hover{
	color: white;
	opacity: 0.9;
	text-decoration: none;
}

.modal-body {
	padding: 20px;
}

.modal-header .close {
	color: #232038;
	opacity: 0.9;
}

.modal-header .close:hover {opacity: 0.5;}

.modal-header {
	padding-top: 20px;
	padding-bottom: 0;
	border-bottom: none;
}

.modal-title {
	display: inline-block;
	font-size: 32px;
	/* font-weight: 700; */
	line-height: 1;
	vertical-align: middle;
}

#modalLogo {
	display: block;
	height: 28px;
	margin: auto;
}

.modal-img {
	max-height: 100px;
	float: right;
	margin: 10px 0 0 10px;
}

a.modal-cta {
	font-family: 'ECF', sans-serif;
	font-size: 16px;
	width: 80%;
	text-align: left;
	color: #232038;
	cursor: pointer;
	padding: 24px 24px 16px 24px;
	margin:30px auto;
	display:block;
	background-color: #ffc24d;
	-webkit-transition: left 0.2s linear;
	transition: left 0.2s linear;
	opacity: 1;
	/* font-weight: 400; */
	text-transform: uppercase;
  	text-decoration: none;
	letter-spacing: 3px;
}

a.modal-cta:hover {
	opacity: 0.85;
}

#flytoButtons {
	text-align: center;
	font-size: 9.5pt;
	font-weight: bold;
}

.btn-r {
		display: inline;
		content: '';
		transform: skewX(-7deg);
		width: 20%;
		height: 40px;
		padding: 0px;
		margin: 0px 5px 10px 5px;
		border: none;
		border-radius: 0px;
		background: #009CA6;
}

.btn-r:hover {
    opacity: 0.8;
}

#blank {cursor: default; opacity: 0;}

/* fly button text */
.fly-r {
		display: inline-block;
		transform: skewX(7deg);
		margin: 0px auto;
		width: 20%;
		height: 40px;
		border: none;
		display: table-cell;
		vertical-align: middle;
		color: #fff;
		z-index: 1000;
}

.btn-l {
		display: inline;
		content: '';
		transform: skewX(7deg);
		width: 20%;
		height: 40px;
		padding: 0px;
		margin: 0px 5px 10px 5px;
		border: none;
		border-radius: 0px;
		background: #009CA6;
}

.btn-l:hover {
    opacity: 0.8;
}

.fly-l {
		display: inline-block;
		transform: skewX(-7deg);
		margin: 0px auto;
		width: 20%;
		height: 40px;
		border: none;
		display: table-cell;
		vertical-align: middle;
		color: #fff;
		z-index: 1000;
}

.btn-label {
		display: inline;
		cursor: default;
		content: '';
		transform: skewX(7deg);
		width: 20%;
		height: 40px;
		padding: 0px;
		margin: 0px 5px 10px 5px;
		border: none;
		border-radius: 0px;
		outline: none;
		background: #000;
}

#deetu {
	opacity: 0.8;
}

#deetu:hover {
	opacity: 1;
}

#explore {
	opacity: 0.8;
	height: 25px;
}

#explore:hover {
	opacity: 1;
}

#sidebarMenu {
	background-color: rgba(255,255,255, 0);
	padding: 0px;
	padding-left: 0px;
	position: fixed;
	z-index: 1000;
	top: 65px;
	left: -9px;
	color: grey;
	text-decoration: none;
}

#sidebarMenu:hover {opacity: 0.85;}

#menu {
	background-color: rgba(255,255,255, 0);
	padding: 0px;
	padding-left: 0px;
	position: absolute;
	z-index: 1000;
	top: 15px;
	color: grey;
	text-decoration: none;
}

img.popup-image {
	/* width: 80vw; */
	max-width: 600px;
	margin: 0;
}

#deetuLogo {float: left; margin: 0 0 0 -10px;}

.deetu-static {
	bottom: 7px;
	display: inline-block;
	position: fixed;
	right: calc(100vw - 108px);
	width: 100px;
	z-index: 10000;
}
.deetu-static > a > img {width: 85px;}

.client-wordmark {
	bottom: 12px;
	height: auto;
	position: fixed;
	right: 5px;
}

.deetu-wordmark {
	height: 40px;
}

#reset {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #232038;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	padding: 5px 20px 5px 15px;
	/* border: 1px solid #ccc; */
	border-radius: 20px;
	background: #ffc24d;
}
img.popup-image {max-width: 90vw;}

#download_btn_desktop {
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 70%;
	margin: auto;
}

#download_btn_desktop:hover {
	opacity: 0.8;
}

#reset>i {
	width: 20px;
	height: 20px;
	font-size: 20px;
	margin: 0;
	margin-right: 3px;
}

label[for="filter__commercial"].shown {
	/* color: #D8B711; */ /*yellow*/
	color: #EC671C; /*orange*/
}

label[for="filter__residential"].shown {
	/* color: #EC671C; */ /*orange*/
	/*color: #799C4B;*/ /*green*/
	color: #D8B711; /*yellow*/
}

label[for="filter__mixeduse"].shown {
	color: #8f45b5; /*purple*/
}

label[for="filter__leisure"].shown {
	/* color: #248DC1; */ /*blue*/
	color: #00956E; /*pine*/
}

label[for="filter__education"].shown {
	/* color: #00956E; */ /*pine*/
	/*color: #707271;*/ /*slate*/
	color: #248DC1; /*blue*/
}

label[for="borders"].shown {
	color: #919694; /*purple*/
}

label[for="greenspaces"].shown {
	color: #799C4B; /*green*/
}

label[for="railway"].shown {
	color: #919694; /*grey*/
}


.footer {
	padding: 10px 0;
	/* Inner flex layout */
	display: flex;
	font-size: 14px;
	justify-content: center;
	flex-direction: row;
	align-items: center;
}

.footer>* {
	color: #777;
	text-decoration: none;
	margin: 0 10px;
}

.centrer {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.client-logo {
	padding: 20px 10px;
}

.client-logo > a > img {
	height: 28px;
}

table {
	width: 100%;
}

th {
	color: #232038;
	text-align: left;
}

ul {
	padding-left: 20px;
}

#sidebar ul {
	padding-left: 0;
}

hr {
	border-color: #ccc transparent transparent transparent;
	border-style: solid;
}

/* #sidebar li {
	display: flex;
	align-items: center;
} */

img {
	margin-right: 10px;
}

svg {
	width: 100%;
	height: 100%;
	stroke: currentColor;
	fill: currentColor;
}

label>span {
	position: relative;
	flex-grow: 1;
}

.mapboxgl-ctrl-group > button.ctrl-button {
  width: 100%;
  padding: 0 5px;
	font-family: 'Arial';
}

.mapboxgl-ctrl-group > button.mapboxgl-ctrl-compass {cursor: pointer;}

#geocoder {z-index: 101;}

.mapboxgl-ctrl-geocoder, .mapboxgl-ctrl-geocoder {
	border-radius: 20px;
	box-shadow: none;
	height: 40px;
}

.mapboxgl-ctrl-geocoder .geocoder-icon-search {
	background-color: #ffc24d;
	background-image: url(../assets/icons/search.svg);
	border: none;
	border-bottom-right-radius: 20px;
	border-top-right-radius: 20px;
	height: 100%;
	left: calc(100% - 45px);
	padding: 6px 12px;
	top: 0;
	width: 45px;
}

#geocoderInput {
	border: #cbcbcb solid 1px;
	border-radius: 20px;
	font-size: 14px;
	height: 40px;
	padding-left: 20px;
}

.geocoder-pin-right {display: none;}

ul.suggestions {
	border-radius: 20px;
	box-shadow: none;
	font-size: 14px;
	top: calc(100% + 10px);
}

ul.suggestions li a {text-decoration: none;}

/* ul.suggestions li.active a {background-color: #ffc24d; color: #232038;} */

/* Map Toggle Pills */

.pill-container {
	position: fixed;
	top: 10px;
	right: 45px;
	z-index: 1;
}

.map-pill {
	background-color: white;
	border: 1px solid #ebebeb;
	border-radius: 20px;
	color: #232038;
	cursor: pointer;
	display: inline-block;
	font-size: 16px;
	/* font-weight: bold; */
	height: 30px;
	line-height: 30px;
	margin-right: 10px;
	padding: 1px 15px 5px 12px; 
}

.map-pill.active {
	background-color: #ffc24d;
	border-color: rgba(0,0,0,0);
	/* font-weight: bold; */
}

.map-pill.disabled-pill,
.map-pill.disabled-pill.active {
	background-color: #c7c8c8;
	cursor: default;
}

.map-pill.home:active {
	background-color: #ffc24d;
	border-color: rgba(0,0,0,0);
	/* font-weight: bold; */
}

.map-pill .material-icons {
	color: #232038;
	font-feature-settings: 'liga';
	font-size: 22px;
	line-height: 24px;
	padding-bottom: 5px;
	padding-right: 2px;
	vertical-align: middle;
}

.map-pill-icons {
	height: 24px;
	line-height: 24px;
	margin: 0;
	padding-right: 2px;
	vertical-align: middle;
}

.map-pill span {vertical-align: middle;}

@keyframes fadein {
    from { opacity: 1; }
    to { opacity: 0; }
}

.disabled-pill-hint {
	display: none;
}

.disabled-pill-hint.live-hint {
	background-color: #ffc24d;
	border-radius: 8px;
	display: block;
	margin: 0 auto;
	opacity: 1;
	padding: 10px 10px 5px 10px;
	position: relative;
	text-align: center;
	top: 20vh;
	width: 130px;
	z-index: 200;
}

.fade-hint {
	-webkit-animation: fadein 1s ease-in;
    -moz-animation: fadein 1s ease-in;
    animation: fadein 1s ease-in;
}

#legend-toggle{
	color: #232038;
	cursor: pointer;
	direction: ltr;
	font-size: 18px;
    /* font-weight: 600; */
    padding: 5px 10px 0 20px;
}

#legend-container {
	background: white;
	border-radius: 0 30px 30px 0;
	direction: rtl;
    font-family: 'ECF', sans-serif;
	max-height: calc(100% - 180px);
	padding: 7px 20px 7px 0;
	position: absolute;
	top: 10px;
	z-index: 10;
}

#legend-container > #legend-table {
	direction: rtl;
	margin: 20px 0;
	max-height: calc(100vh - 250px);
	overflow-x: hidden;
	overflow-y: auto;
	padding-left: 10px;
}

#legend-container > #legend-table > table{
	direction: ltr;
}

#legend-container > table > tbody > tr > td{
	padding-right: 10px;
}

.circle{
	width: 20px;
	height: 20px;
	border-radius: 50%;
	margin: 5px 10px;
}

.square{
	width: 20px;
	height: 20px;
	margin: 5px 10px;
}

.line{
	width: 24px;
	height: 5px;
	margin: 5px 10px;
}

.header{
	font-size: 16px;
	/* font-weight: 600; */
	padding-top: 10px;
	padding-left: 40px;
}

.icon{
	margin: 5px 10px;
}

.icon.pin {
	height: 40px;
	margin-left: 0;
	margin-bottom: 0;
}

.block {
	max-width: 20px;
	margin: 10px 15px 10px 5px;
}

.point {
	width: 30px;
	margin: 5px 0;
}

.route{
	width: 30px;
	margin: 10px 0;
}

/* .mapboxgl-popup-content > table > tbody > tr > td, .mapboxgl-popup-content > table > tbody > tr > th {
	padding: 10px;
} */

.mapboxgl-popup-tip {
	border-top-color: #ffc24d !important;
	border-bottom-color: #ffc24d !important;
}

/* Map key sections */
.masterplan {
	display: none;
}
.transportation {
	display: none;
}
.historical {
	display: none;
}

.home.active{
	border-radius: 20px 20px 0 0;
}

.properties-filter{
	position: absolute;
	right:  0;
	z-index: 10;
	background-color: white;
	display: grid;
	border-radius: 0 0 20px 20px;
	margin: 0 10px 0 0;
	max-height: 600px;
	width: 193px;
	top: 30px;
}

.properties-filter::-webkit-scrollbar {
	border-radius: 20px;
	width: 15px;
}
.properties-filter::-webkit-scrollbar-thumb {
	background-color: #ffc24d;
	border-radius: 20px;
}
.properties-filter::-webkit-scrollbar-track {
	background-color: #f1f1f1;
	border-radius: 20px;
}

.close-button{
    padding: 5px .5rem;
	cursor: pointer;
	pointer-events: all;
	font-weight: 600;
}

.close-button > span{
	margin-right: 7px;
}

.properties-filter > div{
	display: flex;
	align-items: left;
	justify-content: justify;
	height: 30px;
	border-bottom: 1px solid #ffc24d;
}

.properties-filter > div > label{
	cursor: pointer;
	margin: 0;
	padding: 5px;
}

.properties-filter > div > label:only-child{
	margin-left: 32px;
}

.properties-filter > div > input{
	cursor: pointer;
	margin: 0 10px;
}

.mapboxgl-popup.properties-popup {
	max-width: 310px !important;
}

.properties-popup > .mapboxgl-popup-tip{
	/* left: calc(50vw - 150px);
	top: calc(50vh - 120px); */
	border-top-color: rgba(0,0,0,0) !important;
	border-bottom-color: rgba(0,0,0,0) !important;
	border-right-color: #ffc24d;
}

.last, .properties-filter > :last-child:not(.loading-animation) {
	border: none !important;
}

.loading-animation {
	margin: 75px;
	width: 50px;
	height: 50px !important;
	border-radius: 50%;
	animation: spin 2s infinite reverse linear;
	border-top-color: #ffc24d !important;
	border-right-color: #ffc24d !important;
	border: 10px solid transparent;
}

@keyframes spin {
    0% {
        transform: rotate(-45deg);
    }
    100% {
        transform: rotate(315deg);
    }
}

.view-button::before {
	float: left;
	content: "flight_land";
	font-family: "Material Icons";
	line-height: 24px;
	padding-left: 1px;
	padding-right: 6px;
	font-feature-settings: 'liga';
}

.ctrl-icon {
  float: left;
	font-size: 20px;
}

.ctrl-icon-text {
  float: left;
  line-height: 24px;
}

.mapboxgl-ctrl-group {
	border: #cbcbcb solid 1px;
	border-radius: 0;
	box-shadow: none !important;
}

.mapboxgl-popup {
	/* Override inline style - Mapbox V1.0.0 */
  /* max-width: 95% !important; */
  cursor: default;
  z-index: 10;
}

.mapboxgl-popup a {cursor: pointer;}

.mapboxgl-popup.info-popup {
	max-width: 95% !important;
	top: 10px;
}

.mapboxgl-popup-close-button {
	background-color: #ffc24d;
	border-bottom-left-radius: 10px;
	color: #232038;
  	font-size: 30px;
}

.mapboxgl-popup-close-button:hover {background-color: #ffc24d;}

.popup-title {
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	color: #232038;
	padding: 15px 10px;
	font-family: 'ECF', sans-serif;
	font-size: 16px;
	/* font-weight: bold; */
	margin: 0;
	background-color: #ffc24d;
	text-align: center;
	/* text-transform: uppercase; */
}

.popup-title.flat {
	border-radius: 0;
}

.popup-title > span {
	display: block;
	max-width: 90%;
}

.popup-table {
	color: #232038;
	font-size: 14px;
	font-family: 'ECF', sans-serif;
	margin: 5px;
	width: auto;
	/* transform: skewX(7deg); */
}

.popup-para {
	color: #232038;
	font-family: 'ECF', sans-serif;
	margin: 8px;
	margin-right: 0;
	max-height: 150px;
	overflow-y: auto;
	padding-right: 5px;
	text-align: justify;
}

.popup-table td, .popup-table th {
    padding: 3px;
}

.website-icon > a {
	color: #337ab7;
	font-weight: 400;
}

.mapboxgl-popup-content > .btn-info {
	background-color: #ffc24d;
	border: 1px solid #ffc24d;
	border-radius: 20px;
	color: #232038;
	cursor: pointer;
	display: inline-block;
	font-size: 15px;
	font-weight: bold;
	height: 30px;
	line-height: 16px;
	margin: 10px;
	padding: 0 12px;
	pointer-events: auto;
	width: 105px;
}

.mapboxgl-popup-content > .btn-info:focus {
	border-color: rgba(0,0,0,0);
	box-shadow: none;
	outline: none;
}

.mapboxgl-popup-content > .btn-info:active {
	background-color: #ffc24d;
	border-color: rgba(0,0,0,0);
	color: #232038;
}

.mapboxgl-popup-content > .btn-info.btn-selected:active {background-color: #fff;}

.mapboxgl-popup-content > .btn-info.btn-selected {
	background-color: #fff;
	border: 1px solid #cbcbcb;
	pointer-events: none;
}

.popup-img, .popup-img-crop {
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	width: 100%;
}

.popup-img-crop {
	max-height: 200px;
	object-fit: cover;
}

#popup-img {
	object-fit: contain;
	max-height: 75vh;
	height: auto;
	margin-top: 7vh;
	margin-left:calc((100% - 1000px)/2);
	width: 100%;
	max-width: 1000px;
}

#popup-caption {
  	height: auto;
	margin-right: 10px;
	padding-top: 5px;
	position: relative;
	text-align: left;
	max-width: 100vw;
}

#popup-caption span {
  	color: #101820;
	font-size:16px;
}

.embed-popup {
	/* margin-top: 10vh; */
	align-items: center;
	background-color: rgba(0,0,0,0.85);
	position: fixed;
	min-width: 100%;
	height: 100%;
	top:0;
	left:0;
	z-index: 1000001;
}

.mapboxgl-popup-content {
	border: #ffc24d 2px solid;
	padding: 0px;
	border-radius: 10px;
	background: #fff;
	max-width: 300px;
}

.popup-icon {
	font-size: 20px;
	padding-left: 3px;
	vertical-align: bottom;
}

#expand-p > p {
	padding: 10px;
}

.popup-caption{
    color: white;
    font-size: 16px;
    font-family: 'ECF', sans-serif;
    padding-top: 5px;
    text-align: center;
    margin-left: calc((100% - 1000px)/2);
    max-width: 1000px;
}

#popup-caption span {font-size: 14px;}

/* splitview image slider */
.slider {
    position: absolute;
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 100%;
    background-color: white;
	opacity: 0;
    outline: none;
    margin: 0;
    transition: all .2s;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 3;
}

.slider:hover {background-color: rgba(255,255,255, .1);}

.slider-button {
    size: 50px;
    pointer-events: none;
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #232038;
    left: calc(50% - 29px);
    top: calc(50% - 29px);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 3;
	border: solid 5px #ffc24d;
}

.slider-button:after {
	content: '';
	padding: 5px;
	display: inline-block;
	border: solid #ffc24d;
	border-width: 0 4px 4px 0;
	transform: rotate(-45deg);
}
.slider-button:before {
	content: '';
	padding: 5px;
	display: inline-block;
	border: solid #ffc24d;
	border-width: 0 4px 4px 0;
	transform: rotate(135deg);
}

.splitview {
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
}

.panel {
    position: absolute;
    width: 100vw;
    min-height: 100vh;
    overflow: hidden;
}

.panel .content {
	position: absolute;
	width: 100vw;
	min-height: 100vh;
	color: #FFF;
}

.bottom {
	background-color: rgb(44, 44, 44);
	z-index: 1;
}

.top {
	background-color: rgb(99, 99, 99);
	border-right: solid 7px #ffc24d;
	z-index: 2;
	width: 50vw;
}

.popup-close {
	background-color: #ffc24d;
	border-style: none;
	color: #232038;
	font-family: 'Roboto', sans-serif;
 	font-size: 18px;
	font-weight: 700;
	height: 40px;
	line-height: 40px;
	padding: 0 0 0 0;
	position: static;
	width: 100vw;
}

.popup-close:hover {
	opacity: 0.9;
}

.btn-hidden {display:none;}
/* end split view */

button.prev.material-icons,
button.next.material-icons {
	background-color: rgba(0,0,0,0);
	color: #232038;
	font-feature-settings: 'liga';
	font-size: 30px;
	line-height: 24px;
	padding: 3px;
	position: fixed;
	vertical-align: middle;
	width: 40px;
 	z-index: 100;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	button.prev.material-icons,
	button.next.material-icons {
	  position: absolute;
	}
}

button.prev.material-icons  {
	left: 10px;
	/* padding: 0 30px 0 0; */
}

button.next.material-icons {
	/* padding: 0 0 0 30px; */
 	right: 0px;
}

button.next:focus,
button.prev:focus {
  	outline: none;
}

button.next:hover,
button.prev:hover {
	opacity: 0.6;
	cursor: pointer;
}

/* Modal overrides */
/* #intro-modal {overflow: hidden;} */

.modal {z-index: 1050; top: 60px;}

.modal.show {overflow-y: hidden;}

.modal .nav {margin-bottom: 0;}

.modal .nav > li > a {
	background-color: rgba(0,0,0,0);
	border: none;
	color: #f45446;
	padding: 5px 20px 8px 0;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 3px;
	font-size: 12px;
}

.modal-content {
	border: none;
	border-radius: 12px;
	font-size: 18px;
	text-align: justify;
}

.nav-tabs {border: none;}

.modal-content .nav-tabs.header {
	margin-left: -15px;
	padding: 0 15px 10px 15px;
	margin-right: -15px;
	font-weight: bold;
}

.modal .nav > li.active > a,
.modal .nav > li > a:focus,
.modal .nav > li > a:hover{
	/* background-color: #fff !important; */
    color: #000000 !important;
	border: none;
	text-decoration: underline;
	text-underline-offset: 10px;
}

.tab-content {
	overflow-x: hidden;
	overflow-y: auto;
	max-height: calc(100vh - 350px);
	min-height: 80px;
}

.tab-pane {
    overflow: auto;
	padding-right: 10px;
}

button.close {
	position: absolute;
    top: 0px;
    right: 0px;
    width: 60px;
    height: 60px;
    background-size: 20px 20px;
    background-position: center;
    background-repeat: no-repeat;
	opacity: 1;
    cursor: pointer;
}

button.close img {
	float: none;
	margin: 0;
}

.modal-content .contact-footer {
	border-bottom-left-radius: 12px;
	border-bottom-right-radius: 12px;
}

.contact-footer {
	/* align-items: initial; */
	background-color: #232038;
	color: white;
	/* display: flex; */
	font-size: 12px;
	padding: 20px 15px;
	text-align: left;
	width: 100%;
}

.contact-footer img {
	width: 20%;
	margin-left: 5px;
}

#sidebar .contact-footer {
	position: absolute;
	bottom: 0;
}

.contact-footer > table {
	color: white;
	display: inline-block;
	padding-right: 20px; 
	width: auto;
}

.contact-footer > table > tbody > tr {
	padding-bottom: 5px;
}

.contact-footer > table > tbody > tr > td > a {
	color: white;
	font-style: normal;
	font-weight: 400;
	text-decoration: underline;
}

td.footer-icon {width: 32px;}

td.footer-icon > img {width: 18px;}

#deetuLogo {
	height: 50px;
	margin-top: -40px;
	float: right;
}

img#langFlag {
	width: 30px;
	height: 20px;
	border-style: none;
	margin: 0;
}

/* Updated attribution with Mapbox GL JS V1.0.0 */
.mapboxgl-ctrl-attrib.mapboxgl-compact {
	background-color: rgba(255,255,255,0.5);
	border-radius: 3px 12px 12px 3px;
	font-size: 12px;
	height: 15px;
	left: 18px;
	position: fixed;
	bottom: 2px;
	max-width: 330px;
	right: 0;
	top: calc(100% - 80px);
	visibility: hidden;
	z-index: 100;
}
/* Updated attribution with Mapbox GL JS V1.0.0 */
.mapboxgl-ctrl-attrib.mapboxgl-compact:hover {
	padding: 3px 0 0 0;
	visibility: visible;
	margin: 10px;
}
/* Updated attribution with Mapbox GL JS V1.0.0 */
.mapboxgl-ctrl-attrib.mapboxgl-compact::after {
	position: fixed;
	top: -2px;
	left: -23px;
	right: 0px;
	visibility: visible;
}

.mapboxgl-ctrl-attrib.mapboxgl-compact > a {
	
	font-style: normal;
	font-weight: 400;
}

a.mapboxgl-ctrl-logo {
	position: fixed;
	bottom: 2px;
	left: 95px;
}

/* Cookies popup */
.cookie-confirmation {
    display: none;
    z-index: 1060;
    position: fixed;
    right: 0;
    bottom: 50px;
    width: 320px;
	max-width: 90vw;
    margin: 13px;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 8px 0 rgba(29, 29, 27, 0.15);
}

.cookie-confirmation__content p {
	font-size: 14px;
	margin: 0 15px 0 0;
}

.cookie-confirmation__content a {color: #232038; font-weight: 400;}

.cookie-confirmation, .cookie-confirmation__footer {margin-top: 3rem}

.cookie-confirmation__close {
	position: absolute;
	top: 0;
	right: 0;
	margin: 20px;
}

.cookie-confirmation__close svg {
	fill: #616161;
	width: 15px;
	height: 15px;
	cursor: pointer;
}

.cookie-confirmation__close:hover {opacity: 0.7;}

.btn-cookies {
	font-family: 'ECF', sans-serif;
	font-size: 12px;
	width: 80%;
	text-align: left;
	color: #232038;
	cursor: pointer;
	font-weight: 400;
	padding: 14px 0 7px 14px;
	margin:0 auto 5px auto;
	display:block;
	background-color: #ffc24d;
	border: none;
	border-radius: 0px;
	/* box-shadow: 0 2px 8px 2px rgba(0,0,0, 0.6); */
	-webkit-transition: left 0.2s linear;
	transition: left 0.2s linear;
	opacity: 1;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 3px;
}

.btn-cookies:hover {
	color: #232038; 
	opacity: 0.85;
	text-decoration: none;
}

@media only screen and (min-width: 700px) {
	.modal-dialog {
		width: 600px;
		margin: 30px auto;
	}
}

@media only screen and (max-width: 975px) {
	.properties-popup > .mapboxgl-popup-tip{
		/* left: calc(50vw - 150px);
		top: calc(50vh - 120px); */
		border-top-color: rgba(0,0,0,0)  !important;
		border-bottom-color: #ffc24d !important;
		border-right-color: rgba(0,0,0,0) !important;
	}

	.popup-caption{
		font-size: 12px;
		margin:0;
		padding: 5px 40px;
	}

	#popup-caption span {font-size: 12px;}

	#popup-img {
		margin-left: 0;
		margin-top: 20vh;
	}

	.popup-title {
		font-size: 12px;
	}

	.deetu-static > a > img {
		width: 50px;
	}

	.client-wordmark {
		bottom: 5px;
	}

	.deetu-wordmark { 
		height: unset;
	}

	a.mapboxgl-ctrl-logo {
		width: 70px;
		bottom: -5px;
	}

	#legend-toggle {font-size: 16px;}

	#legend-container {
		max-height: 100%;
		/* overflow-y: scroll; */
		overflow-x: hidden;
	}

	.map-pill {
		font-size: 14px;
		overflow: hidden;
		margin: 2px 0;
		max-width: 90vw;
		min-width: 50px;
		margin-right: 0vw;
		margin-left: 10px;
		pointer-events: all;
		animation: shrink 3s forwards;
		animation-delay: 3s;
		word-wrap: nowrap;
	}

	.map-pill.active {
		animation: shrink 3s backwards;
	}

	.pill-container {
		pointer-events: none;
		z-index: 1;
		top: 65px;		
		/* max-width: 250px; */
		left: 0;
		width: 170px;
	}

	.arrow.narrowArrow{
		top: 90px;
	}

	#sidebar{
		max-width: 100vw;
		width: 100vw;
	}

	.map-pill span{
		margin-left: 10px;
	}

	@keyframes shrink {
		0% {
			max-width: 90%;
			margin-right: 0%;
		}
		100% {
			max-width: 11%;
			margin-right: 80%;
		}
	}

	#sidebarMenu {
		top: 10px;
	}

	#sidebarMenu .narrowArrow {
		display: inline;
		position: absolute;
	}

	.wideArrow {display: none;}

	#sidebar {left: -101vw;}

	/* Modal settings */
	
	.tab-content{
		max-height: calc(100vh - 300px);
	}

	.tab-content p {font-size: 14px;}

	.tab-content table {font-size: 12px;}

	.tab-content h2 {
		font-size: 18px;
		margin-top: 0;
	}

	a.modal-cta {
		font-size: 14px;
		margin: 20px auto;
		padding: 20px 20px 12px 20px;
	}

	.contact-footer{
		max-height: 170px;
	}

	.contact-footer img {width: 15%;}

	#modalLogo{
		height: 20px;
	}

	#deetuLogo {margin-top: 0;}

	/* .modal-body{
		padding-top: 0px;
	} */

	button.modal-button{
		top: 55px;
	}

	#geocoder{
		z-index: 1000;
	}
	/* Map key section */
	.masterplan {display: none;}

	.transportation {display: none;}

	.historical {display: none;}
}


/* @media only screen and (min-width: 975px) and (max-width: 1460px) {
	.map-pill{
		word-wrap: nowrap;
		overflow: hidden;
	}

	.map-pill:not(.active[for="commprops"]) {max-width: 48px;}

	.map-pill:not(.active[for="commprops"]):hover{
		animation: expand 1s forwards;
	}

	@keyframes expand {
		0%{
			max-width: 48px;
		}
		100%{
			max-width: 230px;
		}
	}
} */