.stockists{

	.map-container{
		padding: 30px;

		@include responsive('>', 'phones', (
			padding: 0
		));

		#map-canvas, #panel { height: 500px; }
		#panel{
			float: none;
			width: 100%;
			height: 300px;
			margin-bottom: $globalMargin;
			padding: $globalPadding;
			font-size: 15px;
			background-color: $colorYellow;
			overflow: hidden;

			@include responsive('>', 'tablets', (
				float: left,
				width: 385px,
				height: 500px,
				margin-bottom: 0
			));

			h4 {
				margin-bottom: $globalPadding;
				font-size: 1.3em;
				line-height: 1em;
			}

			

			.location-search{
				input{
					width: 100%;
					height: 40px;
					height: 40px;
    				padding: 0 10px 0 10px;
				}
			}
			

			.store-list{
				overflow-y: auto;
				height: 140px;
				margin: 0;
				padding-right: $globalPadding;

				@include responsive('>', 'tablets', (
					height: 370px
				))
		    	
		    	li{
				    display: inline-block;
				    width: 50%;
				    vertical-align: top;
		    		margin-top: $globalPadding;

		    		@include responsive('>', 'tablets', (
					    display: list-item,
		    			width: auto,
		    		));

		    		&.no-stores{
					    width: 100%;

		    			@include responsive('>', 'tablets', (
							width: auto
			    		))
		    		}

		    		&:first-child{
		    			margin-top: 0;
		    		}

		    		.title{
		    			font-weight: 700;
    					text-transform: uppercase;
    					cursor: pointer;
		    		}
		    	}		    	
			}

			.feature-filter label { 
				width: 130px; 
			}

		}

		#map-canvas {
			.gm-style-iw {
				.features{
					display: none
				}
				a{
					display: none;
				}
			}			
		}

		.gm-style-iw-d {
			padding-right: 10px;

			.title {
				font-weight: bold;
				text-transform: uppercase;
			}

			.address {
				margin: 5px 0;
			}

		}

	}

	.cta{
		margin: 30px;
		width: auto;
		@include responsive('>', 'phones', (
			width: 100%,
			margin: $globalMargin 0 $globalMargin 0
		));		
	}
		

	p.attribution, p.attribution a { color: #666; }
	

}