/*****
  Taken from laurent-perrier - grand siecle
*************/

/*
slide.css
*/
.page-template-template-storelocator {
	padding-bottom: 0;
	#header {
		z-index: 999999999 !important;
	}
}
#footer {
	position: relative !important;
}

.slide {
	/* min-width: 125vw;
  width: 125vw; */
	min-width: 100%;
	width: 100%;
	min-height: 100%;
	height: 100%;
	max-height: 100%;
	position: relative;
	padding: 0 2em;
	/* flex: 1 0 auto; */

	// Add Renaud

	.visuallyhidden {
		display: none;
	}
}

.slide_dark {
	background-color: $color-primaryDark;
	color: $color-primary;

	.separator {
		border-color: #393939;
	}

	blockquote,
	address,
	strong,
	button,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		color: $color-primary;
	}
}

.slide_light {
	background-color: $color-primaryLighter;
	color: $color-primary;

	.title,
	strong,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		color: $color-primaryDark;
	}
}

.pac-container {
	z-index: 10000 !important;
	box-sizing: content-box;
	padding-right: 2px;
}

/*
section_gmap-store-locator.css
*/

.section_gmap-store-locator {
	padding: 0;
	overflow: hidden;

	.cluster {
		background: transparent url(assets/img/pin-cluster.svg) no-repeat;
		background-size: 100% 100%;
		background-position: center;
		width: 32px;
		height: 52px;
		font-size: 14px !important;
		padding-top: 10px;
		font-family: $fontSmallTitle !important;
		text-transform: lowercase;
		color: #ffffff;
		text-align: center;

		@include grid-media-query(not-palm) {
			line-height: 39px;
			padding-top: 0;
		}
	}

	.container {
		display: flex;
		flex-direction: row;
		justify-content: center;
		height: 100%;
		visibility: visible;
		&.hidden {
			visibility: hidden;
		}
		.background-wrapper {
			/* visibility: visible; */
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			video {
				display: none;
			}
			picture {
				opacity: 1;
				transition: opacity 0.5s;
			}
			&.video-playing {
				picture {
					opacity: 1;
				}
			}
		}
		.background-map {
			height: 100%;
			width: 100%;
			//background-position: center;
			//background-size: cover;
			//background-color: #161616;
			background-position: top right;
			background-size: contain;

			background-color: #000;
			background-repeat: no-repeat;
		}
		.background-map-mobile {
			height: 100%;
			width: 100%;
			background-position: top;
			background-size: cover;
			background-repeat: no-repeat;
			background-color: #000;
		}
		.search-box {
			// z-index: 1;
			position: relative;
			// align-self: center;
			margin: 30% auto;
			max-width: calc(100% - 4em);

			.title_big {
				display: flex;
				align-self: flex-start;
				width: 100%;
				margin-top: 60px;
				margin-bottom: 15px;
				font-size: 30px;
				color: #ebebeb;
				text-align: center;
				font-family: 'SackersGothic', 'sans-serif';
				text-transform: uppercase;
			}
			.separator {
				width: 80px;
				margin-bottom: 18px;
			}
			.icon-monogramme {
				display: none;
				font-size: 65px;
				color: #bdbdbd;
			}
			#submitSearchButton,
			.btn-store-external {
				background-color: #333333;
				text-transform: lowercase;
				color: #fff;
				// display: inline-flex;
				padding: 0 22px;
				// font-size: 14px;
				// justify-self: flex-end;
				line-height: 44px;
				height: 44px;
				&:focus {
					outline: none;
				}
				&:hover {
					background-color: white;
					color: #333333;
				}
			}

			.store-search-buttons-container {
				display: flex;
				justify-content: space-between;
			}

			.btn-store-external-container {
				justify-content: flex-end;
			}
			.btn-store-external {
				display: inline-flex;
				justify-self: flex-end;
				align-items: center;
				text-decoration: none;
				&:focus {
					outline: none;
				}
			}

			#submitSearchButton,
			.btn-store-external {
				justify-content: center;
				height: 40px;
				width: 100%;
			}
		}
	}

	.form-group {
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 100%;
		// height: 50px;
		.icon-search {
			position: absolute;
			line-height: 50px;
			right: 19px;
			color: #ae7d3d;
		}
	}

	.search-input {
		appearance: none;
		border-radius: 0;

		display: inline-flex;
		align-self: flex-start;
		vertical-align: center;
		height: 50px;
		padding-left: 24px;
		padding-right: 24px;
		border: 1px solid #e2e4e7;
		font-family: $fontSmallTitle;
		//text-transform: lowercase;
		font-size: 14px;
		line-height: 50px;
		color: #000;
		flex-grow: 2;
		min-width: 100px;
		width: 100%;
		margin-bottom: 4px;

		&::placeholder {
			font-family: $fontSmallTitle;
			text-transform: lowercase;
			color: #1a1919;
			//vertical-align: -2px;
			font-size: 14px;
			line-height: 50px;
		}
		&:focus {
			outline: unset;
		}
	}

	&.country-us {
		.container .search-box {
			#submitSearchButton,
			.btn-store-external {
				justify-content: center;
				height: 40px;
				width: calc(50% - 2px);
				align-items: center;
				display: flex;
			}
		}
	}

	.bloc {
		position: absolute;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		&.dark-bloc {
			background-color: #000;
		}
		&.result-search-bloc {
			width: 100%;
			height: 45%;
			max-height: 680px;
			right: 0;
			top: 55%;
			transform: translateY(0);
			header {
				padding: 20px;
			}
			.content {
				position: relative;
				//padding-left: 1.7rem;
				//padding-right: 1rem;
				//margin-right: 1rem;
				//margin-top: 1rem;

				//margin-bottom: 20px;
				flex: 2;
				overflow: hidden;
				ul {
					border-top: 1px solid #252525;
					position: relative;
					&.list_highlight {
						li:not(.highlight) {
							opacity: 0.7;
						}
					}
				}
				li {
					position: relative;
					padding: 16px 30px;
					list-style-type: none;
					cursor: pointer;
					//opacity: 0.4;
					&.highlight {
						opacity: 1;
						background: #000;
						h3 {
							color: white !important;
						}
					}
					&:not(:last-child) {
						border-bottom: 1px solid rgba(255, 255, 255, 0.15);
					}
				}
				h3 {
					font-family: $fontRegular;
					font-size: 14px;
					letter-spacing: 1px;
					//text-transform: uppercase;
					color: #ae7b3c !important;
					margin: 0 0 5px 0;
				}
				.arrow_right {
					font-size: 30px;
					margin-bottom: -6px;
					bottom: 50%;
					right: 25px;
					position: absolute;
					background: url(assets/img/fleche.png) no-repeat;
					width: 7px;
					height: 11px;
				}

				address {
					font-size: 12px;
				}
				.ps__rail-y {
					background-color: #333333 !important;
					display: none;
				}
				.ps__thumb-y {
					background-color: $color-primaryLight !important;
					display: none;
				}
			}
		}
	}

	.map-container {
		position: absolute;
		width: 100%;
		height: 100%;
		&.show {
			z-index: 3000;
		}
		.close-map-button {
			position: absolute;
			color: #fff;
			background-color: #000;
			padding: 0.5rem;
			width: 37px;
			height: 37px;
			right: 15px;
			top: 15px;
			cursor: pointer;
			a {
				text-decoration: none;
			}
			.icon-cross {
				vertical-align: middle;
			}
		}
	}

	.gmap-container {
		position: absolute;
		width: 100%;
		height: 55%;
	}
}

@media only screen and (max-height: 568px) {
	.section_gmap-store-locator {
		.container {
			.search-box {
				max-width: 280px;
				.title_big {
					margin-top: 30px;
					margin-bottom: 15px;
				}
				.icon-monogramme {
					display: none;
				}
			}
		}
		.form-group {
			height: 40px;
			.icon-search {
				line-height: 40px;
			}
		}
		.search-input {
			font-size: 14px;
		}
	}
}

@media (max-width: 768px) {
	.background-map {
		display: none;
	}
	.background-map-mobile {
		display: block;
	}
	.slide {
		height: calc(100vh - 52px);
		min-height: 500px;
	}
	.section_gmap-store-locator {
		.container {
			.search-box {
				margin: 50% auto;
				.title_big {
					font-size: 26px;
					line-height: 26px;
				}
				#submitSearchButton {
					font-size: 14px;
				}
			}
		}
		.search-input {
			font-size: 12px;
			padding-right: 44px;
			&::placeholder {
				color: #1a1919;
			}
		}
	}
}

@media (min-width: 769px) {
	.section_gmap-store-locator {
		.cluster {
			width: 28px;
			height: 48px;
			font-size: 12px !important;
			padding-top: 13px;
		}
	}
	.background-map {
		display: block;
	}
	.background-map-mobile {
		display: none;
	}
	br.brmobile {
		display: none;
	}
	.slider-container {
		margin-left: 70px;
		overflow-y: hidden;
	}
	.slide {
		// min-width: calc(100vw - 70px);
		// width: calc(100vw - 70px);
		padding: 0;
		overflow: hidden;
		height: calc(100vh - 80px);
		//height: 42vw;
		min-height: 450px;
	}
	.section_gmap-store-locator {
		&.country-us {
			.container .search-box .form-group {
				flex-direction: column;
			}
		}
		.container {
			.background-wrapper {
				video {
					position: absolute;
					display: block;
					top: 0;
					left: 0;
					height: 100%;
					width: 100%;
					object-fit: cover;
				}
				&.video-playing {
					picture {
						opacity: 0;
					}
				}
			}
			justify-content: flex-start;

			.search-box {
				align-self: center;
				margin-top: 0;
				margin-left: 4vw;
				max-width: 42vw;
				position: absolute;
				top: 50%;
				transform: translateY(-50%);

				.title_big {
					margin-top: 0;
					margin-bottom: 30px;
					text-align: left;
					font-size: 30px;
					color: #ebebeb;
				}
				.separator {
					width: 80px;
					margin-bottom: 36px;
				}
				.icon-monogramme {
					display: block;
					font-size: 65px;
					color: #bdbdbd;
				}

				.form-group {
					position: relative;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					width: 100%;
					// height: 50px;
					.icon-search {
						position: absolute;
						line-height: 50px;
						left: 19px;
						color: #b5b5b5;
					}
				}

				.store-search-buttons-container {
					display: flex;
					justify-content: space-between;
				}

				.btn-store-external-container {
					justify-content: flex-end;
				}

				#submitSearchButton,
				.btn-store-external {
					background-color: #000000;
					text-transform: lowercase;
					color: #fff;
					display: inline-flex;
					padding: 0 33px;
					font-size: 18px;
					justify-self: flex-end;
					height: 50px;
					line-height: 50px;
					border: 0;
					&:focus {
						outline: none;
					}
				}
			}
		}
		.bloc {
			&.result-search-bloc {
				width: 300px;
				//height: 66vh;
				//height: 40vw;
				height: calc(92%);
				max-height: 680px;
				left: 3vw;
				//top: 50%;
				top: 5%;
				//transform: translateY(-50%);
				.content {
					position: relative;
					//margin-top: 1rem;
					//margin-right: 31px;
					margin-bottom: 20px;
					flex: 2;
					overflow: hidden;
					ul {
						position: relative;
						&.list_highlight {
							li:not(.highlight) {
								opacity: 0.7;
							}
						}
					}
					li {
						position: relative;
						padding: 20px 50px 20px 30px;
						border-bottom: 1px solid #252525;
						cursor: pointer;
						//opacity: 0.4;
						background: #161616;
						&.highlight {
							opacity: 1;
							background: #000;
							h3 {
								color: white !important;
							}
						}
						&:not(:last-child) {
							border-bottom: 1px solid rgba(255, 255, 255, 0.15);
						}
					}
					h3 {
						font-family: $fontRegular;
						letter-spacing: 1px;

						//text-transform: uppercase;
						color: #ae7d3d;
						margin: 0 0 5px 0;
					}
					.arrow_right {
						font-size: 30px;
						margin-bottom: -6px;
						bottom: 50%;
						right: 25px;
						position: absolute;
						background: url(assets/img/fleche.png) no-repeat;
						width: 7px;
						height: 11px;
					}
					.ps__rail-y {
						background-color: #333333 !important;
						display: none;
					}
					.ps__thumb-y {
						background-color: $color-primaryLight !important;
						display: none;
					}
				}
			}
		}
		.map-container {
			.close-map-button {
				position: absolute;
				color: #fff;
				background-color: #000;
				padding: 0.5rem;
				width: 37px;
				height: 37px;
				right: 15px;
				top: 15px;
				a {
					text-decoration: none;
				}
			}
		}

		.search-input {
			appearance: none;
			border-radius: 0;

			display: inline-flex;
			align-self: flex-start;
			vertical-align: center;
			height: 50px;
			padding-left: 24px;
			border: 1px solid #e2e4e7;
			font-family: $fontSmallTitle;
			//text-transform: lowercase;
			font-size: 14px;
			line-height: 50px;
			color: #1a1919;
			flex-grow: 2;
			min-width: 100px;
			width: 100%;

			&::placeholder {
				font-family: $fontSmallTitle;
				text-transform: lowercase;
				color: #1a1919;
				//vertical-align: -2px;
				font-size: 14px;
				line-height: 46px;
			}
			&:focus {
				outline: unset;
			}
		}

		.gmap-container {
			height: 100%;
		}
	}
}

@media (min-width: 1024px) {
	#footer {
		position: fixed !important;
		bottom: 0;
	}
	.section_gmap-store-locator {
		.search-input {
			font-size: 14px;
			&::placeholder {
				font-size: 14px;
			}
		}
		.container {
			.search-box {
				.title_big {
					font-size: 26px;
					line-height: 32px;
				}

				#submitSearchButton {
					font-size: 16px;
				}
			}
		}
	}
}

@media (min-width: 1440px) {
	.section_gmap-store-locator {
		.search-input {
			font-size: 17px;
			&::placeholder {
				font-size: 17px;
			}
		}
		.container {
			.search-box {
				margin-left: 6vw;
				max-width: 547px;
				width: 100%;
				.title_big {
					font-size: 30px;
					line-height: 36px;
				}

				#submitSearchButton {
					font-size: 18px;
				}
			}
		}
		.bloc {
			&.result-search-bloc {
				width: 400px;
				left: 50px;
				.content {
					ul {
						position: relative;
					}
				}
			}
		}
	}
}

@media (min-width: 1920px) {
	.section_gmap-store-locator {
		.container {
			.search-box {
				max-width: 677px;
				.title_big {
					// font-size: 36px;
					// line-height: 42px;
				}
			}
		}

		.bloc {
			&.result-search-bloc {
				header {
					padding: 25px;
				}
				.content {
					h3 {
						font-size: 16px;
					}

					address {
						font-size: 14px;
					}
				}
			}
		}
	}
}
