:root {
	--light-grey: #E7E7E7;  
	--mid-grey: #919090;
	--dark-grey: #333333;
	--white: #fff;
	--tr-green: rgba(101, 156, 36,0.85);
	--off-white: #D4E2C5;
	--dark-green: #43732D;
	--oas-green: #609930;
	
	
}

@media screen and (min-width: 640px){
	.mapboxgl-ctrl-geocoder--icon-search {
		display: none;
	}
}

.mapboxgl-canvas {
	width: 100%;
}


/* hide search pin */
[aria-label="Map marker"] {  
    display: none !important;
}
/* hide search pin */



.mapboxgl-popup-content {
	box-shadow: 0 0 5px 1px rgba(0,0,0,0.25) !important;
}

.mapboxgl-popup {
	/*max-width: 345px !important;*/
	max-width: 250px !important;
}

.mapbox h3 {
	width: 100%;
	text-align: left;
	font-size: 16px;
	color: var(--mid-grey);
}
.map-duration {
	width: 100%;
	text-align: left;
	margin-bottom: 5px;
	/* hidden as no content */
	display: none;
	
}


.map-image {
	float: left;
	width: 40%;
	height: auto;
	overflow: hidden;
	margin-right: 5%;
	/* hidden as no content */
	display: none;
}
.map-image img {
	width: 100%;
	height: auto;
	/* hidden as no content */
	display: none;
}

.map-viewbtn {
	float: left;
	/*width: auto;*/
	width: 100%;
	text-align: center;
	/*text-align: left;*/
	background: var(--oas-green);
	border-radius: 3px;
}
.map-viewbtn:hover {
	background: var(--mid-grey);
}
.map-viewbtn a {
	color: var(--white);
	width: 100%;
    float: left;
    padding: 5px 10px;
	
}
.map-viewbtn:hover a{
	color: var(--white);
	text-decoration: none;
}

.map-details {
	float: left;
	/*width: 50%;*/
	width: 100%;
	margin-bottom: 5px;
	text-align: left;
}

.marker {
	background-image: url('../images/map-marker.png');
	background-size: cover;
	width: 26px;
	height: 35px;
	cursor: pointer;
}




.mapboxgl-popup-content {
  text-align: center;
  font-family: 'Open Sans', sans-serif;
}


.filter-header {
	float: left;
	width: 100%;
	background: var(--light-grey);
	padding: 25px 15px;
	color: var(--green);
	letter-spacing: 2px;
	text-transform: uppercase;
	font-size: 15px;
	
	
}
.filter-distance {
	padding: 15px 15px 0 15px;
	margin-bottom: 10px;
	float: left;
	width: 100%;
}
#filter-distance {
	width: 100%;
	float: left;
	margin-bottom: 15px;
	text-align: center;
}


.filter-search {
	 padding: 15px;
	 margin: 0;
	 float: left;
	 font-size: 14px;
	 width: 100%;
}

.filter-geolocate {
	padding: 5px 15px;
	margin: 15px 0 0 0;
	float: left;
	font-size: 14px;
	width: 100%;
	
}
.geolocater {
	display: flex;
	align-items: center;
	letter-spacing: 2px;
    font-size: 15px;
    color: var(--dark-grey);
    text-transform: uppercase;
    font-weight: 500;
}

.filter-geolocate .mapboxgl-ctrl.mapboxgl-ctrl-group {
	width: auto;
    float: none;
    display: inline-block;
    border: 0;
    box-shadow: none;
    margin-left: 10px;
}
.mapboxgl-ctrl-icon.mapboxgl-ctrl-geolocate {
	transition: 0.35s all ease-in-out;
}
.mapboxgl-ctrl-icon.mapboxgl-ctrl-geolocate:hover {
	border: none;
    border-radius: 5px;
    transform: scale(0.9);
    background-color: transparent !important;
    transition: 0.35s all ease-in-out;
}
.search-wrap {
	border-radius: 5px;
    overflow: hidden;
   
}
.search-field {
	padding: 3px 8px 5px 8px;
}

.filter-header .reset-filters {
	color: var(--mid-grey);
	float: right;
	text-transform: capitalize;
	font-size: 15px;
	letter-spacing: normal;
}

.filter-header-icon {
	transform: rotate(90deg);
	margin-left: 8px;
	display: inline-block;
	float: none;
	color: var(--mid-grey);
}
.filter-group {
	position: absolute;
	top: 20px;
	left: 20px;
	z-index: 100;
	border-radius: 3px;
	width: 280px;
	color: var(--mid-grey);
	background: var(--white);
	font-size: 17px;
}

.search-chevron {
	padding: 8px 10px 6px 10px;
    background: var(--oas-green);
    color: var(--white);
    display: block !important;
}

.search-field:focus {
	border-color: var(--oas-green) !important;
}
.form-control:focus{
	box-shadow: none !important;
}
 
.filter-group-bot {
	padding: 15px;
	float: left;
	width: 100%;
}
.filter-group-bot span {
	letter-spacing: 2px;
	font-size: 15px;
	color: var(--dark-grey);
	text-transform: uppercase;
	margin-bottom: 15px;
	font-weight: 500;
	float: left;
	width: 100%;
}

.filter-group input[type=checkbox]:first-child + label {
	border-radius: 3px 3px 0 0;
}

.filter-group label:last-child {
	border-radius: 0 0 3px 3px;
	border: none;
}

.filter-group input[type=checkbox] {
	display: none;
}

.filter-group input[type=checkbox] + label {
	display: block;
	cursor: pointer;
}

.filter-group input[type=checkbox] + label {
	background-color: transparent;
	text-transform: capitalize;
}

.filter-group input[type=checkbox] + label:hover,
.filter-group input[type=checkbox]:checked + label {
	background-color: transparent;
}


.filter-group input[type=checkbox] + label:before {
	float: left;
	margin-top: 1px;
}

.filter-group input[type=checkbox] + label:before {
	/*content: url('../images/map-check.png');*/
	
	background-size: 19px 19px;
    display: inline-block;
    width: 19px; 
    height: 19px;
    content:"";
	margin-top: 4px;
	margin-right: 5px;
}
.filter-group input[type=checkbox]:checked + label:before {
	
	background-size: 19px 19px;
    display: inline-block;
    width: 19px; 
    height: 19px;
    content:"";
    margin-top: 4px;
	
}


.distance-slider {
  -webkit-appearance: none;
  width: 90%;
  margin: 0 5%;
  height: 12px;
  border-radius: 3px;  
  background: var(--light-grey);
  outline: none;
  opacity: 1;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.distance-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%; 
  background: var(--oas-green);
  cursor: pointer;
}

.distance-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--oas-green);
  cursor: pointer;
}


.map-filter-heading {
	  letter-spacing: 2px;
    font-size: 15px;
    color: var(--dark-grey);
    text-transform: uppercase;
    font-weight: 500;
    display: inline-block;
}

.hide-slider {
	margin-top: 5px;
}