
		body {
			color:#000;
			margin:0;
			padding:0;
			-webkit-font-smoothing:antialiased;
			font-size: 12px;
			line-height: 18px;
			font-weight: 500;
  			letter-spacing: 0.6px;
  			font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
		}

		@font-face {
				font-family: Greycliffcf;
				src: url(https://storage.googleapis.com/beaming_magnet/blockcities/static/GreycliffCF-ExtraBold.ttf);
			}
			
		@font-face {
			font-family: Greycliffcf;
			src: url(https://storage.googleapis.com/beaming_magnet/blockcities/static/GreycliffCF-DemiBold.ttf);
			font-weight: 600;
		}

		* {
		  -webkit-box-sizing:border-box;
		  -moz-box-sizing:border-box;
		  box-sizing:border-box;
		}

		.blockcities {
			position: absolute;
			top: 12px;
			right: 18px;
			height: 48px;
			width: 72px;
			background-color: white;
			border-radius: 24px;
			box-shadow: -2px 2px 4px 2px rgba(0, 0, 0, 0.15);
			z-index:999;
		}

		#blockcities-logo {
			display: inline-block;
			height: 36px;
			width: 36px;
			margin: 6px 9px;
			border-radius: 15px;
			background-image: url('../images/blockcities-logo.png');
			background-size: contain;
			background-repeat: no-repeat;
		}

		#chevron {
			display: inline-block;
			height: 30px;
			width: 7px;
			margin: 9px 0px 9px 0px;
			background-image: url('../images/right-arrow.svg');
			background-size: contain;
			background-repeat: no-repeat;
			background-position: center;
		}

		#search {
			margin-bottom: 18px;
		}

		.notification-bar {
		  position: relative;
		  /* display: flex; */
		  display: none; /* turn off for explore more */
		  align-items: center;
		  overflow: hidden;
		  margin: 0 auto;
		  width: 244px;
		  top: 12px;
		  height: 48px;
		  background-color: #fff;
		  border-radius: 24px;
		  font-family: Greycliffcf,sans-serif;
		  color: #000;
		  text-transform: uppercase;
		  z-index:999;
		}

		#notification-for-next-hunt {
			width: 375px;
			background-color: #FAEEBE;
		}

		.notification-bar p {
			display: inline-block;
			flex-grow: 1;
			margin: 0 8px;
			top: -2px;
			position: relative;
		}

		.red-dot {
			color: #FF7878;
			font-size: 24px;
			position: relative;
    		top: 2px;
		}

		.blink-me {
			-webkit-animation-name: blinker;
			-webkit-animation-duration: 3s;
			-webkit-animation-timing-function: linear;
			-webkit-animation-iteration-count: infinite;
		
			-moz-animation-name: blinker;
			-moz-animation-duration: 3s;
			-moz-animation-timing-function: linear;
			-moz-animation-iteration-count: infinite;
		
			animation-name: blinker;
			animation-duration: 3s;
			animation-timing-function: linear;
			animation-iteration-count: infinite;
		  }

		@-moz-keyframes blinker {  
			0% { opacity: 1.0; }
			15% { opacity: 0.0; }
			30% { opacity: 1.0; }
		}
		
		@-webkit-keyframes blinker {
			0% { opacity: 1.0; }
			15% { opacity: 0.0; }
			30% { opacity: 1.0; }
		}
		
		@keyframes blinker {
			0% { opacity: 1.0; }
			15% { opacity: 0.0; }
			30% { opacity: 1.0; }
		}

		#left-message {
			text-align: right;
			color: #C39122;
		}

		#hunt-logo-1 {
			display: inline-block;
			height: 48px;
			width: 72px;
			margin-top: 4px;
			background-image: url("../images/blockcities-hunt-logo.png");
			background-size: cover;
			background-repeat: no-repeat;
			background-position-y: top;
		}

		#hunt-logo-2 {
			display: inline-block;
			height: 36px;
			width: 36px;
			margin: 6px;
			border-radius: 999px;
			background-image: url("../images/blockcities-hunt-logo.png");
			background-size: 24px 24px;
			background-position: center;
			background-repeat: no-repeat;
			background-color: #FAEEBE;
		}

		.pad2 {
		  padding:20px;
		}

		.map {
		  position:absolute;
		  width:100%;
		  top:0;bottom:0;
		}

		h1 {
			letter-spacing: 0.6px;
			margin: 0;
			padding: 0;
			font-size: 27px;
			line-height: 30px;
			font-weight: 900;
		}

		a {
		  color:#404040;
		  text-decoration:none;
		}

		a:hover {
		  color:#101010;
		}

		.sidebar {
		  display: flex;
		  flex-direction: column;
		  position:absolute;
		  width: 350px;
		  height: 100%;
		  top: 0px;
		  left: 0px;
		  background-color: rgba(224, 224, 224, 0.9);
		  border-radius: 0px 18px 18px 0px;
		  box-shadow: -2px 2px 4px 2px rgba(0, 0, 0, 0.15);
		  font-family: Greycliffcf,sans-serif;
		  color: #000;
		  overflow:hidden;
		  padding: 18px;
		  z-index:999;
		}

		.sidebar-section {
			margin-bottom: 18px;
			padding: 0;
		}

		.sidebar-section-header {
			border-radius: 12px 12px 0px 0px;
			border: 2px solid #eaeaea;
			color: #818181;
			background-color: #f5f5f5;
			padding: 0px 12px;
			text-transform: uppercase;
			height: 36px;
			line-height: 32px; /* leave space for border */
		}

		.sidebar-section-header p {
			padding: 0;
			margin: 0;
		}

		.sidebar-section-content {
			background-color: #fff;
			margin-top: -2px;
			padding: 4px 12px;
			border-radius: 0px 0px 12px 12px;
			border: 2px solid #eaeaea;
			height: calc(100% - 36px);
			overflow-x: hidden;
			overflow-y: scroll;
			-ms-overflow-style: none;
		}

		.sidebar-section-footer {
			border: 2px solid #eaeaea;
			border-radius: 0px 0px 12px 12px;
			background-color: #fff;
			margin-top: -2px;
			text-align: center;
		}

		/* instructions overrides */
		#instructions .sidebar-section-content {
			border-radius: 24px;
			height: auto;
			font-size: 16px;
			padding: 4px 10px;
		}

		#instructions .sidebar-section-content ol {
			border-radius: 24px;
			list-style-position: inside;
			padding: 0;
			margin: 12px 0;
		}

		#instructions .sidebar-section-content li {
			background: #F5F5F5;
			border-radius: 18px;
			color: #8D8D8D;
			padding: 0px 18px;
			height: 48px;
			line-height: 48px;
			margin-bottom: 12px;
		}

		#instructions .sidebar-section-content li.isActive {
			background: #231F20;
			color: #fff;
		}

		/* featured-buildings overrides */
		#featured-buildings {
			height: 44%;
		}

		#featured-buildings .sidebar-section-content {
			padding: 4px 6px; /* make space for listing */
		}

		/* twitter overrides */
		#twitter {
			overflow-y: hidden;
			margin-bottom: 0;
		}

		#twitter .sidebar-section-content {
			padding: 0;
		}

		/* info-box overrides */
		#info-box {
			height: calc(56% - 36px - 66px);
		}

		#info-box .sidebar-section-content {
			border-radius: 12px 12px 0px 0px;
			padding-top: 12px;
			padding-bottom: 24px; /* space for button */
		}

		#info-box .sidebar-section-footer {
			height: 66px;
		}

		#info-box .sidebar-section-footer a { 
			text-decoration: none;
			text-align: center;
			width: 200px;
		  	background-color: white;
			color: #4d92ff;
			padding: 14px;
			display: inline-block;
			border-radius: 12px; 
			font-size: 14px;
			line-height: 14px;
			font-family: Greycliffcf,sans-serif;
			font-weight: 600;
			letter-spacing: 0.6px;
		}
		#info-box .sidebar-section-footer a:hover {
			background-color: #f0f2f3;
		}

		#info-box .sidebar-section-content h1 { 
			letter-spacing: 0.6px;
			margin: 0;
			padding: 0;
			font-size: 27px;
			line-height: 30px;
			font-weight: 900;
		}

		#info-box .sidebar-section-content h6 {
			margin: 24px 0px 4px 0px;
			font-size: 18px;
			line-height: 20px;
		  font-weight: 900;
		  letter-spacing: 0.6px;
		}

		#info-box .sidebar-section-content p {
			margin: 0;
			font-size: 12px;
			line-height: 18px;
			font-weight: 500;
		  letter-spacing: 0.6px;
		  font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
		}
		
		#info-box .sidebar-section-content p.tags {
			margin-top: 8px !important;
		}

		#info-box .sidebar-section-content span.tag {
			font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
			background-color: #f0f2f3;
			color: #858585;
			font-size: 12px;
			line-height: 12px;
			font-weight: 500;
			letter-spacing: 0.6px;
			padding: 4px 8px;
			margin: 8px 4px 8px 0px;
			border-radius: 999px;
		}

		/* hide scrollbar */

		::-webkit-scrollbar {
			display: none;
		}

		.listings .item {
		  display:inline-block;
		  border-radius: 6px;
		  width: 91px;
		  height: 91px;
		  margin: 4px;
		  padding: 6px;
		  text-decoration:none;
		}

		.listings .item:hover {
			padding: 2px;
		}

		.item-image {
			display: block;
			width: 100%;
			height: 100%;
			background-size: contain;
			background-repeat: no-repeat;
			background-position: center;
		}

		/* .listings .item:last-child { border-bottom:none; }
		.listings .item .title {
		  display:block;
		  color:#4d92ff;
		  font-weight:900;
		} */

		/* .listings .item .title small { font-weight:400; } */
		/* .listings .item.active .title,
		.listings .item .title:hover { color:#f0f2f3; } */
		/* .listings .item:hover { background-color: #f0f2f3; }
		.listings .item.active {
		  background-color:#f0f2f3;
		} */

		.marker {
		  border: none;
		  cursor: pointer;
		  /* -webkit-filter: drop-shadow(1px 1px 0 white) 
						  drop-shadow(-1px -1px 0 white);
			  filter:drop-shadow(1px 1px 0 white) 
					 drop-shadow(-1px -1px 0 white); */
		}

		.clearfix { display:block; }
		.clearfix:after {
		  content:'.';
		  display:block;
		  height:0;
		  clear:both;
		  visibility:hidden;
		}

		/* Marker tweaks */
		.mapboxgl-popup {
		  padding-bottom: 50px;
		  border-radius: 999px;
		}

		.mapboxgl-popup-close-button {
		  display:none;
		}

		.mapboxgl-popup-content {
		  padding:0;
		  width:250px;
		  background:#fff;
		  border-radius: 24px;
		  padding:10px;
		  box-shadow: -4px 4px 10px 5px rgba(0, 0, 0, 0.2);
		}

		.mapboxgl-popup-content-wrapper {
		  padding:1%;
		}

		.mapboxgl-popup-content a {
			text-align: center;
			background-color: #5E92F8;
			color: #fff;
			display: block;
			border-radius: 999px;
			height: 48px;
			line-height: 48px;
			margin: 12px 12px;
			font-family: Greycliffcf,sans-serif;
			text-transform: uppercase;
		}

		.mapboxgl-popup-content h3 {
		  text-align: center;
		  color:#000;
		  margin:0;
		  display:block;
		  font-weight:700;
		}

		.mapboxgl-ctrl-logo {display: none !important;}  /*Blocks the display of the logo*/
		.mapboxgl-ctrl-bottom-right .mapboxgl-ctrl { margin: 12px 18px; border-radius: 18px; }

		/* Search bar */

		.mapboxgl-ctrl-geocoder {
		  /* font-size: 18px; */
		  /* line-height: 24px; */
		  /* font-family: Roboto, "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif; */
		  /* position: relative; */
		  /* background-color: #ffffff; */
		  width: 100%;
		  height: 48px;
		  min-width: 240px;
		  z-index: 1;
		  border-radius: 999px;
		  padding: 0;
		  border: 2px solid #eaeaea;
		  /* margin-bottom: 12px; */
		}

		.mapboxgl-ctrl-geocoder:focus {
			outline: none;
		}

		.mapboxgl-ctrl-geocoder--icon-search {
		  display: none;
		}

		.mapboxgl-ctrl-geocoder--input {
			height: 100%;
			padding: 0px 48px 0px 24px;
			border-radius: 999px;
		}

		.mapboxgl-ctrl-geocoder--icon-close {
		  width: 20px;
		  height: 20px;
		  margin-top: 5px;
		  margin-right: 8px;
		}
		
		.mapboxgl-ctrl-geocoder--icon-loading {
			display: hidden;
		}

		.mapboxgl-ctrl-geocoder .suggestions {
		  background-color: #fff;
		  border-radius: 12px;
		  left: 0;
		  list-style: none;
		  margin: 0;
		  padding: 0;
		  position: absolute;
		  width: 100%;
		  top: 110%; /* fallback */
		  top: calc(100% + 6px);
		  z-index: 1000;
		  overflow: hidden;
		  font-size: 15px;
		}

		/* Mobile handling */
		@media only screen and (max-width: 600px) {

			.sidebar {
				top: unset;
				bottom: 0px;
				height: 160px;
				width: 100%;
				padding: 8px;
				border-radius: 12px 12px 0 0;
			}

			#featured-buildings .sidebar-section-content {
				height: 110px;
				overflow-x: scroll;
				overflow-y: hidden;
			}

			.listings {
				height: 100px;
				width: 3770px; /* Wide enough for ~42 buildings */
			}

			.hide-on-mobile,
			#search,
			#instructions,
			.blockcities,
			.mapboxgl-ctrl,
			#info-box { 
				display: none;
			}

		  }