/*
*		    ________      .___   
*	__  _  _\_____  \   __| _/
*	\ \/ \/ / _(__  <  / __ |
*	 \     / /       \/ /_/ |
*	  \/\_/ /______  /\____ |
*	               \/      \/
*
*	@author			Jacques Baars <j@w3d.co.za>
*
*	@notice			This is the property of W3Designs, W3Development, W3D,
*					it is illegal to use this source code without the required permission,
*					contact j@w3d.co.za for further advice or permissions.
*
*	@license		Copyright (c) 2016 W3Designs (PTY) Ltd. (http://www.w3d.co.za)
*/

/* Locator */
#locator{}

	/* Branches */
	#locator.branches{}
	
		#locator.branches .branch{}
		
			#locator.branches .branch h4{
				font-size: var(--fontSize120);
			}
		
				#locator.branches .branch h4 a{
					color: var(--bgColor);
				}
		
			#locator.branches .branch .contact,
			#locator.branches .branch .address,
			#locator.branches .branch .website{
				margin-top: 10px;
			}

	/* Locator / Coverage Map */
	#locator.locator-map,
	#locator.coverage-map{
		background-color: #fff;
	}
		
		#locator.locator-map .results{
			width: 400px;
			height: 600px;
			overflow-y: auto;
			background-color: #fff;
		}
		
		#locator.coverage-map .results{
			width: 400px;
			padding: 30px;
			text-align: center;
			position: relative;
			background-color: #fff;
			max-width: calc(90% - 60px);
			max-height: calc(95% - 60px);
		}
		
			#locator.coverage-map .results .back,
			#locator.coverage-map .results .close{
				top: 0;
				padding: 20px;
				cursor: pointer;
				position: absolute;
			}
		
			#locator.coverage-map .results .back{
				left: 0;
				display: none;
			}
		
			#locator.coverage-map .results .close{
				right: 0;
			}
		
				#locator.coverage-map .results .back svg,
				#locator.coverage-map .results .close svg{
					width: 20px;
					fill: var(--bgColor);
				}
		
			#locator.coverage-map .results .info{}
		
				#locator.coverage-map .results .info .message{
					margin: 10px 0;
				}
				
				#locator.coverage-map .results .info .buttons{}
					
				
					#locator.coverage-map .results .info .buttons .btn{
						width: 100%;
						padding-left: 0;
						padding-right: 0;
						margin: 10px 0 0;
						text-align: center;
					}
				
					#locator.coverage-map .results .info .buttons .btn:first-child{
						margin: 0;
					}
		
			#locator.locator-map .results .title{
				font-size: var(--fontSize240);
			}
			
			#locator.locator-map .results .title,
			#locator.locator-map .results .address,
			#locator.locator-map .results .link{
				padding: 20px;
				text-align: center;
				border-bottom: 1px solid var(--softBorderColor);
			}
			
				#locator.locator-map .results .link .btn{
					width: 100%;
					padding: 11px 0;
				}
			
					#locator.locator-map .results .link .btn:nth-child(1){
						margin-bottom: 5px;
					}
			
			#locator.locator-map .results .directions{
				padding: 20px;
				border-bottom: 1px solid var(--softBorderColor);
			}
			
			#locator.locator-map .results .clear{
				padding: 20px;
				text-align: center;
			}
			
				#locator.locator-map .results .clear .btn{
					width: 100%;
					padding: 11px 0;
				}
		
		#locator.locator-map .map,
		#locator.coverage-map .map{
			width: 100%;
			position: relative;
		}
		
			#locator.locator-map .map .search,
			#locator.coverage-map .map .search{
				top: 10px;
				width: 400px;
				z-index: 101;
				padding: 8px;
				position: absolute;
				left: calc(50% - 200px);
				background-color: #fff;
				border: 1px solid var(--softBorderColor);
				
				-webkit-border-radius: 3px;
				-moz-border-radius: 3px;
				-m-border-radius: 3px;
				-o-border-radius: 3px;
				border-radius: 3px;
			}
		
				#locator.locator-map .map .search .label,
				#locator.coverage-map .map .search .label{
					padding-bottom: 4px;
				}
		
			#locator.coverage-map .map .legend{
				left: 40px;
				bottom: 40px;
				z-index: 101;
				padding: 10px;
				position: absolute;
				background-color: #fff;

				-webkit-box-shadow: rgb(0 0 0 / 30%) 0px 1px 4px -1px;
				-moz-box-shadow: rgb(0 0 0 / 30%) 0px 1px 4px -1px;
				box-shadow: rgb(0 0 0 / 30%) 0px 1px 4px -1px;
			}
		
				#locator.coverage-map .map .legend .label:not(:last-child){
					margin-right: 10px;
				}
		
					#locator.coverage-map .map .legend .label .indicator{
						padding: 9px;
						margin-right: 5px;
						
						border-style: solid;
						border-width: 2px;
					}
		
					#locator.coverage-map .map .legend .label .title{
						padding: 3px 0;
						font-size: var(--fontSize90);
					}
		
			#locator.locator-map .map .container,
			#locator.coverage-map .map .container{
				width: 100%;
				z-index: 100;
				height: 600px;
			}
	
				#locator.locator-map .map .container .map-address,
				#locator.coverage-map .map .container .map-address{}
				
					#locator.locator-map .map .container .map-address span,
					#locator.coverage-map .map .container .map-address span{
						color: #427fed;
					}

	/* Locations */
	#locator.locations{}
	
	#locator.locations.story:not(.has-view){
		width: 800px;
		margin: 0 auto;
		max-width: 100%;
	}
		
		#locator.locations.story:not(.has-view) h3{
			text-align: center;
		}

		#locator.locations .location{
			padding: 10px;
			cursor: pointer;
		}

			#locator.locations .location:hover{
				background-color: var(--softBgColor);
			}

			#locator.locations.dark-mode .location:hover{
				background-color: var(--darkModeHoverBgColor);
			}

			#locator.locations .location .info{}

				#locator.locations .location .info h4{
					margin: 0 0 5px;
					font-size: var(--fontSize120);
				}

				#locator.locations .location .info .contact{}

		/* Grid */
		#locator.locations .location.grid{
			text-align: center;
		}

			#locator.locations .location.grid .image{
				padding-bottom: 10px;
			}

			#locator.locations .location.grid .image.icon{
				padding: 20px 20px 30px;
			}
		
		/* List */
		#locator.locations .location.list{}

			#locator.locations .location.list .image{
				width: 80px;
				float: left;
			}

			#locator.locations .location.list .image.icon{
				width: 80px;
				float: left;
				padding: 10px;
			}

			#locator.locations .location.list .info{
				float: left;
				padding: 10px;
				width: calc(100% - 100px);
			}
				
				#locator.locations .location.list .info .contact{}
				
					#locator.locations .location.list .info .contact > div{
						margin-right: 10px;
						display: inline-block;
					}
		
		/* Story */
		#locator.locations .location.story{}

			#locator.locations .location.story .image{
				width: 180px;
			}

			#locator.locations .location.story .info{
				padding: 10px;
				width: calc(100% - 200px);
			}
				
				#locator.locations .location.story .info .contact{}
				
					#locator.locations .location.story .info .contact > div{
						margin-bottom: 5px;
					}
				
					#locator.locations .location.story .info .contact > div:last-child{
						margin-bottom: 0;
					}
				
						#locator.locations .location.story .info .contact > div span:before{
							width: 20px;
							text-align: center;
						}

	/* Place */
	#locator.place{}

		#locator.place .images{}

			#locator.place .images .image{
				margin: 0 0 10px;
				border: 1px solid var(--softBorderColor);
			}

			#locator.place .images .image:last-child{
				margin: 0;
			}

		#locator.place .info{
			padding: 4px;
		}

/*600px*/
@media screen and (max-width: 600px){
	#locator.locator-map .results{
		width: 90%;
		float: none;
		height: 400px;
	}
	
	#locator.locator-map .map .container,
	#locator.coverage-map .map .container{
		height: 400px;
	}
	
		#locator.locator-map .map .search,
		#locator.coverage-map .map .search{
			top: 10px;
			left: 10px;
			width: 200px;
		}
		
			#locator.locator-map .map .search input,
			#locator.coverage-map .map .search input{
				width: 200px;
			}
			
	#locator.locations .location.story{
		flex-direction: column;
	}

		#locator.locations .location.story .image{
			width: 100%;
		}

		#locator.locations .location.story .info{
			width: calc(100% - 20px);
		}
}