#store-locator-container {
	float      : left;
	margin-left: 20px;
	width      : 875px;
	font       : normal 12px Arial, Helvetica, sans-serif;
	color      : #333;
}

#page-header {
	float: left;
}

#form-container {
	clear     : left;
	float     : left;
	margin-top: 15px;
	width     : 100%;
}

#map-container {
	clear      : left;
	float      : left;
	margin-top : 27px;
	margin-left: 20px;
	height     : 530px;
	width      : 1031px;
}

#map-container a {
	color          : #e76737;
	text-decoration: none;
}

#map-container a:hover,
#map-container a:active {
	text-decoration: underline;
}

#map-container .custom-marker {
	width     : 32px;
	height    : 37px;
	color     : #fff;
	background: url(/Kickstrap/img/custom-marker.png) no-repeat;
	padding   : 3px;
	cursor    : pointer;
}

#loc-list {
	float   : left;
	width   : 275px;
	height  : 530px;
	overflow: auto;
}

#loc-list ul {
	display   : block;
	clear     : left;
	float     : left;
	list-style: none;
	margin    : 0;
	padding   : 0;
}

#loc-list .list-label {
	float      : left;
	margin     : 10px 0 0 6px;
	padding    : 2px 3px;
	width      : 17px;
	text-align : center;
	background : #451400;
	color      : #fff;
	font-weight: bold;
}

#loc-list .list-details {
	float      : left;
	margin-left: 6px;
	width      : 165px;
}

#loc-list .list-content {
	padding: 10px;
}

#loc-list .loc-dist {
	font-weight: bold;
	font-style : italic;
	color      : #8e8e8e;
}

#loc-list li {
	display: block;
	clear  : left;
	float  : left;
	margin : 6px 0px;
	cursor : pointer;
	width  : 200px;
	border : 1px solid #fff;
	/* Adding this to prevent moving li elements when adding the list-focus class*/
}

#loc-list .list-focus {
	border            : 1px solid rgba(82, 168, 236, 0.9);
	-moz-box-shadow   : 0 0 8px rgba(82, 168, 236, 0.7);
	-webkit-box-shadow: 0 0 8px rgba(82, 168, 236, 0.7);
	box-shadow        : 0 0 8px rgba(82, 168, 236, 0.7);
	transition        : border 0.2s linear 0s, box-shadow 0.2s linear 0s;
}


#loc-listFuel {
	float   : left;
	width   : 275px;
	height  : 530px;
	overflow: auto;
}

#loc-listFuel ul {
	display   : block;
	clear     : left;
	float     : left;
	list-style: none;
	margin    : 0;
	padding   : 0;
}

#loc-listFuel .list-label {
	float      : left;
	margin     : 10px 0 0 6px;
	padding    : 2px 3px;
	width      : 17px;
	text-align : center;
	background : #451400;
	color      : #fff;
	font-weight: bold;
}

#loc-listFuel .list-details {
	float      : left;
	margin-left: 6px;
	width      : 165px;
}

#loc-listFuel .list-content {
	padding: 10px;
}

#loc-listFuel .loc-dist {
	font-weight: bold;
	font-style : italic;
	color      : #8e8e8e;
}

#loc-listFuel li {
	display: block;
	clear  : left;
	float  : left;
	margin : 6px 0px;
	cursor : pointer;
	width  : 200px;
	border : 1px solid #fff;
	/* Adding this to prevent moving li elements when adding the list-focus class*/
}

#loc-listFuel .list-focus {
	border            : 1px solid rgba(82, 168, 236, 0.9);
	-moz-box-shadow   : 0 0 8px rgba(82, 168, 236, 0.7);
	-webkit-box-shadow: 0 0 8px rgba(82, 168, 236, 0.7);
	box-shadow        : 0 0 8px rgba(82, 168, 236, 0.7);
	transition        : border 0.2s linear 0s, box-shadow 0.2s linear 0s;
}

#map-container .loc-name {
	color      : #AD2118;
	font-weight: bold;
}

#search-form {
	clear : left;
	float : left;
	height: 60px;
}

#form-input {
	float     : left;
	margin-top: 3px;
}

#form-input label {
	font-weight: bold;
}

#form-input input {
	padding    : 4px;
	line-height: 16px;
	border     : 1px solid #ccc;
}

#address {
	margin: 0 0 0 10px;
}

#submit {
	float                : left;
	cursor               : pointer;
	margin               : 3px 0 0 10px;
	padding              : 3px 6px;
	background           : #ae2118;
	border               : 1px solid #961f17;
	color                : #fff;
	-webkit-border-radius: 4px;
	border-radius        : 4px;
}

#loading-map {
	float     : left;
	margin    : 4px 0 0 10px;
	width     : 16px;
	height    : 16px;
	background: url(/Kickstrap/img/ajax-loader.gif) no-repeat;
}

#map {
	float : left;
	width : 70%;
	height: 530px;
}

/* Infowindow Roboto font override */
.gm-style div,
.gm-style span,
.gm-style label,
.gm-style a {
	font-family: Arial, Helvetica, sans-serif;
}

/* Modal window */

#overlay {
	position  : fixed;
	left      : 0px;
	top       : 0px;
	width     : 100%;
	height    : 100%;
	z-index   : 10000;
	background: url(/Kickstrap/img/overlay-bg.png) repeat;
}

#modal-window {
	position   : absolute;
	left       : 50%;
	margin-left: -460px;
	/* width divided by 2 */
	margin-top   : 60px;
	width        : 920px;
	height       : 590px;
	z-index      : 10010;
	background   : #fff;
	border-radius: 10px;
	box-shadow   : 0 0 10px #656565;
}

#modal-content {
	float  : left;
	padding: 0 22px;
	/* there's already a margin on the top of the map-container div */
}

#close-icon {
	position     : absolute;
	top          : -6px;
	right        : -6px;
	width        : 18px;
	height       : 18px;
	cursor       : pointer;
	background   : #2c2c2c url(/Kickstrap/img/close-icon.png) 3px 3px no-repeat;
	border       : 1px solid #000;
	border-radius: 3px;
	box-shadow   : 0 0 3px #656565;
}


/* The following is for the geocode page and not the store locator */

#geocode-result {
	clear     : left;
	float     : left;
	margin-top: 30px;
	width     : 100%;
}

#map-container {
	display       : flex;
	flex-direction: row;
}

.flexRetailer {
	order: 1;
}

.flexMap {
	order: 2;
}

.flexFuel {
	order: 3;
}

#addressInput {
	height     : 20px;
	margin-left: 5px;
}

#searchButton {
	height    : 28px;
	margin-top: -12px;
}

.labels {
	color           : white;
	background-color: red;
	font-family     : "Lucida Grande", "Arial", sans-serif;
	font-size       : 10px;
	text-align      : center;
	width           : 30px;
	white-space     : nowrap;
}

.hdrImage {
	width : 97%;
	margin: 5px;
}

.flexHeader {
	display        : flex;
	flex-direction : column;
	justify-content: start;
	width          : 100%;
}

@media (max-width: 360px) {
	#map {
		/* float : left; */
		width    : 98%;
		height   : 320px !important;
	}

}

@media (max-width: 995px) {
	#map {
		/* float : left; */
		width    : 98%;
		height   : 320px !important;
	}

}

@media (max-width: 780px) {}

@media (max-width: 580px) {
	body {
		font-size: 11px;
	}

	h6 {
		line-height: 0px;
		margin     : 7.5px 0;
	}

	li {
		line-height: 15px;
	}

	#map {
		/* float : left; */
		width    : 98%;
		height   : 320px !important;
	}

	#map-container {
		display          : flex;
		/* flex-direction: column; */
		flex-wrap        : wrap;
		margin-top       : 3px;
		margin-left      : 11px;
		width            : 97%;
	}

	.listTitles1 {
		order: 1;
		width: 48%;
	}

	.listTitles2 {
		order: 2;
		width: 48%;
	}

	.flexRetailer {
		order: 3;
	}

	.flexMap {
		order: 5;
	}

	.flexFuel {
		order: 4;
	}

	#addressInput {
		margin-left: 5px;
		font-size: 16px;
	}

	#searchButton {
		margin-top: -12px;
	}

	#loc-list {
		width: 48%;
	}

	#loc-list ul {
		width: 100%;
	}

	#loc-list li {
		width: 92%;
	}

	#loc-listFuel ul {
		width: 100%;
	}

	#loc-listFuel {
		float: right;
		width: 48%;
	}

	#loc-listFuel li {
		width: 92%;
	}

	#loc-list .list-content {
		padding: 4px;
	}

	#loc-listFuel .list-content {
		padding: 4px;
	}

	.showMapImage {
		width       : 32px;
		float       : right;
		margin-right: 15px;
	}
}