/* CSS Document */

@media(min-width:1px){
	body {font:400 12px/18px 'Open Sans', sans-serif;}
	.heading h1 {font-size:16px;padding: 5px 2px;}
	.sidebar {width:100%;height: 350px;display: block;}
	.header-container {height: 110px;}
	.header-container h1 {width: 100%;font-size: 30px;padding-top: 10px;display: block;}
	.header-logo {width: 100px;margin-left: 10px;margin-top: 0px;float:left;padding-top: 10px;}
	.header-container p {width: 200px;float: right;margin-top: 6px;font-size: 11px;}
	.reset-btn {width: 150px;margin: 5px auto;}
	.header {height: 80px;border-top: 1px solid rgba(0,0,0,0.25);}
	.nav-btn {display: inline-block;}
	.map-container {display: block;width: 100%;height: 400px;margin-left: 0px;}
	.footer-container {height: 40px;}
	.footer-container p {width: 300px;text-align: left;float: right;}
	.clearer {display: block;clear: both;}

}
@media(max-width:768px){
.reset-btn{
	margin-top: 20px !important;
    margin-left: 0 !important;
    margin-bottom: 20px !important;
}
.sidebar {
    margin-bottom: 30px;
}
.main-container {
    padding: 20px 0 0 !important;
    height: auto !important;
}	
}
@media(min-width:768px){
	body {font:400 12px/18px 'Open Sans', sans-serif;}
	.heading h1 {font-size:22px;padding: 20px 2px;}
	.sidebar {width:200px;height: calc(100% - 107px);display: inline-block;}
	.header-container {height: 60px;}
	.header-container h1 {width: 400px;font-size: 32px;padding-top: 15px;display: inline-block;}
	.header-logo {width: 100px;margin-left: 20px;margin-top: 10px;float:left;padding-top: 0px;}
	.header-container p {width: 200px;float: right;margin-top: 6px;font-size: 11px;}
	.reset-btn {width: 150px;margin: 15px;}
	.header {height: 60px;border-top: none;}
	.nav-btn {display: inline-block;}
	.map-container {display: inline-block;width: calc(100% - 201px);height: calc(100% - 175px);margin-left: -3px;}
	.footer-container {height: 40px;}
	.footer-container p {width: 300px;text-align: left;float: right;}
	.clearer {display: none;clear: both;}

}
@media(min-width:1260px){
	body {font:400 15px/22px 'Open Sans', sans-serif;}
	.heading h1 {font-size:22px;padding: 20px 2px;}
	.sidebar {width:300px;height: 100%;display: inline-block;}
	.header-container {height: 100px;}
	.header-container h1 {width: 720px;font-size: 60px;padding-top: 35px;display: inline-block;}
	.header-logo {width: 220px;margin-left: 20px;margin-top: 10px;float:left;padding-top: 0px;}
	.header-container p {width: 300px;float: right;margin-top: 25px;font-size: 14px;}
	.reset-btn {width: 200px;}
	.header {height: 80px;border-top: none;}
	.nav-btn {display: inline-block;}
	.map-container {display: inline-block;width: calc(100% - 300px);height: 100%;margin-left: 0px;}
	.footer-container {height: 56px;}
	.footer-container p {width: 300px;text-align: left;float: right;}
	.clearer {display: none;clear: both;}
}




body {
	color:#404040;
	margin:0;
	padding:0;
	-webkit-font-smoothing:antialiased;
}

* {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}

.sidebar {
	top:0px;left:0;
	overflow: hidden;
	border-right:1px solid rgba(0,0,0,0.25);
    padding: 30px 0 0;
}
.pad2 {
	padding:20px;
}

.map {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	top:0;bottom:0;
}







.heading h1 {
	margin:0;
	font-weight: 700;
	line-height: 20px;
	color: #053038;
	font-family: 'Inter', sans-serif;
}

a {
	color:#404040;
	text-decoration:none;
}

a:hover { 
	color:#101010; 
}

.heading {
	background:#fff;
	border-bottom:1px solid #eee;
	min-height:60px;
	line-height:60px;
	padding:0 10px;
}

.listings {
	height:100%;
	overflow:auto;
	padding-bottom:150px;
}

.listings .item {
	display:block;
	border-bottom:1px solid #eee;
	padding:10px;
	text-decoration:none;
	font-family: 'Inter', sans-serif;
	color: #212121
}

.listings .item:last-child {
	border-bottom:none;
	/* padding-bottom:150px; */
}
.listings .item .title {
    display: block;
    color: #008C99;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
}

.listings .item .title small {
	font-weight:400;
}
.listings .item.active .title,
.listings .item .title:hover {
	color:#073539;
}
.listings .item.active {
 	background-color:#f8f8f8;
}
::-webkit-scrollbar {
	width:3px;
	height:3px;
	border-left:0;
	background:rgba(0,0,0,0.1);
}
::-webkit-scrollbar-track {
	background:none;
}
::-webkit-scrollbar-thumb {
	background:#008C99;
	border-radius:0;
}

.marker {
	border: none;
	cursor: pointer;
	height: 56px;
	width: 56px;
	background-image: url(../images/marker.png);
	background-color: rgba(0, 0, 0, 0);
	transform: translate(28px, 56px, 0);
}

.clearfix {
	display:block;
}
.clearfix:after {
	content:'.';
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}

/* Marker tweaks */
.mapboxgl-popup {
	padding-bottom: 50px;
}

.mapboxgl-popup-close-button {
	  display:none;
}
.mapboxgl-popup-content {
	font:400 15px/22px 'Open Sans', sans-serif;
	padding:0;
	width:250px;
}
.mapboxgl-popup-content-wrapper {
	  padding:1%;
}
.mapboxgl-popup-content h3 {
	background:#008C99;
	color:#fff;
	margin:0;
	display:block;
	padding:10px;
	border-radius:3px 3px 0 0;
	font-weight:700;
	margin-top:-15px;
}

.mapboxgl-popup-content h4 {
	margin:0;
	display:block;
	padding: 10px 10px 10px 10px;
	font-weight:400;
	font-family: 'Inter', sans-serif;
	color: #212121;
}

.mapboxgl-popup-content div {
	padding:10px;
}

.mapboxgl-container .leaflet-marker-icon { 
	cursor:pointer; 
}

.mapboxgl-popup-anchor-top > .mapboxgl-popup-content {
	margin-top: 15px;
}

.mapboxgl-popup-anchor-top > .mapboxgl-popup-tip {
	border-bottom-color: #D3CAB7;
}

/* -------- ADDITIONS -------- */
html, body {
	width: 100%;
	height: 100%;
}
.img-responsive {
	display:block;
	max-width:100%;
	height:auto;
}
.main-container {
    width: 100%;
    height: 652px;
    /* padding: 50px 0 0; */
    display: flex;
    flex-wrap: wrap;
}
.header-container {
	width: 100%;
	color: #898989;
	background-color: #d7d7d7;
	border-bottom: 5px solid #898989;
	text-align: center;
	vertical-align: middle;
	display: block;
}
.header-container h1 {
	font-family: "futura-pt",sans-serif;
	font-weight: 700;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	margin-bottom: 0px;
}
.header-logo {
	vertical-align: middle;
}
.header-container p {
	color: #251a06;
	vertical-align: middle;
	text-align: left;
	font-weight: 700;
}
.reset-btn {
    background: #0C8599;
    color: #fff;
    border-radius: 30px;
    letter-spacing: 0;
    text-transform: capitalize;
    padding: 12px 24px !important;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    border: 1px solid #0C8599;
    display: block;
    margin-left: 0;
    text-align: center;
    margin-top: 7px;
    margin-bottom: 20px;
}
.reset-btn:hover, .reset-btn:active {
    background: transparent;
    color: #0C8599 !important;
	text-decoration: none;
}
.reset-btn:visited{
	color: #fff;
}
.header {
	width:100%;
	background-color: #ffffff;
	color: #bfbfbf;
	z-index: 10;
	text-align: center;
	border-bottom:1px solid rgba(0,0,0,0.25);
	top: 0;
	right: 0;
	display: block;
}
.nav-title {
	text-transform: uppercase;
	font-size: 12px;
	font-weight: 700;
	margin-top: 8px;
	margin-bottom: 0px;
}
.nav-btn {
	width: 150px;
	border:1px solid rgba(0,0,0,0.25);
	padding-top: 6px;
	padding-bottom: 6px;
	color: #999999;
}
.nav-btn:hover {
	background-color: #eeeeee;
}
.map-container {
	position: relative;
	vertical-align: top;
}
.footer-container {
	border-top:1px solid rgba(0,0,0,0.25);
	font-size: 12px;
	color: #09090b;
	margin-top: -5px;
	width: 100%;
	display: block;
}

.nav-active {
	background-color: #eeeeee;
}
.consignor-active {
	background-color: #eeeeee;
}
.mapboxgl-popup-content {
    padding: 10px 0px 15px;
}
.inventory-link {
	color: #898989;
	text-transform: uppercase;
	font-size: 11px;
	font-weight: 700;
	text-decoration: none;
	display: block;
	margin-top: -20px;
}
.inventory-link:hover {
	color: #09090b;
}
.inventory-link:visited, .inventory-link:active {
	color: #898989;
}
.more-info-btn {
	margin-left: 12px;
	text-decoration: underline;
}