/*MK - Defaul CSS*/
#mk-locator {width:100%; text-indent: 0; position: relative;}
#mk-locator ul { 
	padding: 5px;
	text-align: right;
	position: absolute;
	bottom: 0;
	right: 0;
	background-color: #f4f4f4;
	margin: 0;
}
#mk-locator ul li {list-style: none; padding: 4px; line-height: 1;}
.description #mk-locator  ul li {text-indent:0}

#mk-locator .fleft p{ font-size: 18px; color:#fff; }

#mk-locator .mk-dropdown ul{ background: none; }


/* MAP */
#map_wrapper {
	width: 100% ;
	height: 300px ;	
}
#map_canvas {
		width: 100%;
		min-height: 100%;
}
#map_menu {
		width:18%;
		float:left;
		margin-left:2%;
		list-style:none;
		color: #fff;
		
}
.divider{
		border-top:1px dashed #696969;
		margin-bottom: 5px;
	}
#map_details{
		margin-top: 8px;
		border-top: 1px solid #dcdcdc;
		width:100%;
		height: 200px;
		background-color: #efefef;
}
#map_details .image{
	
}

/* --- INFOWINDOW*/
#mk-locator ul li:before {
	font-family: 'Fontawesome';
	content: '\f067';
	margin-right: 4px;
}

#mk-locator .mk-directions a {
	display: inline-block;
	padding: 4px;
}

/* fix info win size */
.gm-style-iw {
min-height: 140px;
}

.fixwin{ 
	content: ''; 
	color: #fff; min-width: 300px;
	display: block;
    height: 0;}

/*** --- FILTER AREA */

#mk-locator .mk-filter	{ 
	margin:0 auto; 
	text-align:center; 
	background: #222A32; color: #fff; 
	padding: 10px
}

#mk-locator .mk-inptext { 
	display: inline-block; 
	border: 0;
	margin: 2px;
	box-shadow: none;
}

#mk-locator .mk-btn {
	padding: 6px 16px 7px;
    background-color: #06B0D8;
    border: 0;
	margin: 2px;
}

/*** --- CONTACTS AREA */
#mk-locator .name{ 
	font-size: 1em;
	text-align: left;
	color: #ccc;
	margin-bottom: 25px;
}

#mk-locator .mk-content { width:100%; margin: 2px 0 0 0; }

#mk-locator .mk-content .wrapper{ padding: 12px 18px 18px 18px; background-color: #2D2B2E; color: #dcdcdc;}

#mk-locator .mk-content img{ width:100%; margin: 0; cursor:pointer; }

#mk-locator .mkoverlay {position: relative; }
#mk-locator .mkoverlay span {
	display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
	opacity: 0;
	background-color: rgba(0,0,0,0.6);
	-moz-transition: opacity 0.3s;
	-webkit-transition: opacity 0.3s;
	transition: opacity 0.3s;
	cursor: pointer;
}
#mk-locator .mkoverlay .material-icons{ 
	font-size: 48px; 
	color: #fff;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
#mk-locator .mkoverlay:hover span{
	opacity: 1;
}
#mk-locator .mk-contact	{ 
	float: left;
	min-height: 120px;
	padding: 0;
	border: rgb(230, 230, 230) solid 2px;
	background-color: #2d2b2e;
	position: relative;
	margin-bottom: 20px;
}

#mk-locator .mk-contact h3 {
	margin: 0;
	padding: 0 0 2px;
	font-size: 1.7em;
	font-weight: normal;
	color: #fff;
}

#mk-locator p { margin: 0; padding: 0;}

#mk-locator .mk-list-group > span {
    display: block;
	text-align: right;
	background-color: #c20e1a;
	width: 120px;
	padding: 10px;
	margin: 0 0 0 auto;
	position: absolute;
	bottom: -12px;
	left: 50%;
	margin-left: -60px;
}
#mk-locator .mk-list-group > span a{
    color: #fff;
}
#mk-locator .mk-list-group{
	margin-top: 10px;
}
#mk-locator .mk-info.compass { margin-top: 16px; }

#mk-locator .mk-contact .fa 
{ margin: 0; }
#mk-locator .fa-stack 
{ margin: 0 3px 0 0; float: left}
#mk-locator .fa-circle 
{ color: #06B0D8;}
#mk-locator .mk-info .fa { 
	margin-right: 4px;
	color: #000;
}

#mksl_filter{
	/*position: absolute;*/
	top: 10%;
	left: 10%;
	text-align: center;
	min-width: 15%;
	padding: 10px 20px 10px 10px;
	background-color: #c20e1a;
	z-index: 3;
}
#mksl_filter h3 { 
	color: #fff;
	margin: 0px 10px 0;
	display: inline-block;
	vertical-align: middle;
}
#mkfiltermenu{
	display: inline-block;
}

/* extra large and up --------------- */
#mk-locator .mk-contact	{
	/*width: 24%;*/
	width: 20%	
}

@media screen and (max-width: 1824px) {

}

/* large desktops ----------------- */
@media screen and (max-width: 1424px) {
	#mk-locator .mk-contact	{
		/*width: 24%;*/
		width: 20%	
	}
}

/* Laptops/desktops and up -------- */
@media screen and (max-width: 1200px) {
	#mk-locator .mk-contact	{
		/*width: 24%;*/
		width: 20%	
	}
}

/* Small devices (tablets, 768px and up) */
@media screen and (max-width: 992px) {
	#mk-locator .mk-contact	{
		/*width: 24%;*/
		width: 25%	
	}
}

/* Tablet portrait --------------- */
@media screen and (max-width: 768px) {
	#mk-locator .mk-contact	{
		/*width: 24%;*/
		width: 33.32%	
	}
}


/* Extra small devices (phones, up to 480px) */
@media screen and (max-width: 480px) {
	#mk-locator .mk-contact	{
		/*width: 24%;*/
		width: 100%	
	}

	#mksl_filter{
		position: absolute;
		top: 45px;
		left: 10px;
		padding: 10px 20px;
		background-color: rgba(0,0,0,0.8);
		z-index: 3;
		max-width: 90%;
		width: 80%;
	}
	#mksl_filter h3 { color: #fff; margin: 0 0 10px; font-size: 20px;}
}

/* MixItUp */
#mk-locator .mix{
	display: none;
}

/* Algolia */
/* Main input wrapper */
#mksl_filter.algo{
	background-color: transparent;
	left: 80px;
    top: 80px;
	width: 40%;
	padding: 0;
}
#mksl_filter.algo form {
	border: 6px solid #fff;
	border-color: rgba(51,51,51,0.15);
}

.algolia-places {}

/* The algolia-places input */
#mksl_filter.algo .ap-input, #mksl_filter.algo .ap-hint {
	width: 100%;
	line-height: 20px;
	padding: 28px;
	border-radius: 0;
}

/* The style of the svg icons when the input is on hover */
.ap-input:hover ~ .ap-input-icon svg,
.ap-input:focus ~ .ap-input-icon svg,
.ap-input-icon:hover svg {}

#mksl_filter .ap-input:hover,
#mksl_filter .ap-input:active,
#mksl_filter .ap-input:focus {
	border: 1px solid #ccc;
}
/* The dropdown style */
.ap-dropdown-menu {}

/* The suggestions style */
.ap-suggestion {}

/* The highlighted names style */
.ap-suggestion em {}

/* The addresses style */
.ap-address {}

/* The icons of each suggestions ( can be a building or a pin ) */
.ap-suggestion-icon {}

/* The style of the svg inside the .ap-suggestion-icon */
.ap-suggestion-icon svg {}

/* The icons inside the input ( can be a pin or a cross ) */
.ap-input-icon {}

/* The style of the svg inside the .ap-input-icon */
.ap-input-icon svg {}

/* .a-cursor is the class a suggestion go on hover */
.ap-cursor {}

/* The style of the svg icon, when the .ap-suggestion is on hover */
.ap-cursor .ap-suggestion-icon svg {}

/* The styles of the Algolia Places input footer */
.ap-footer {}

/* The styles of the Algolia Places input footer links */
.ap-footer a {}

/* The styles of the Algolia Places input footer svg icons */
.ap-footer a svg {}

/* The styles of the Algolia Places input footer on hover */
.ap-footer:hover {}

/* //\\//\\ Response box */
#mksl_filter .response{
    border: 6px solid #fff;
    border-color: rgba(50,50,50,0.26);
    border-top: 0;
    display: none;
    overflow-y: auto;
    max-height: 300px;
}

#mksl_filter .response h3 {color:#333;}

/*#mksl_filter .response h4:hover {color:#66fcf1;}*/

#mksl_filter .r-wrapper {
	padding: 30px;
	color: #333;
	background-color: #fff;
}

#mksl_filter .r-wrapper .r_item{
	padding: 8px 6px 8px 0;
	width: 49%;
	float: left;
}

#mksl_filter .r-wrapper .r_item p{
	margin: 0;
	padding: 0 0 0 20px;
}

#mksl_filter .r-wrapper .r_item p span { display: block; }

.clearfix {clear: both;}