header#header {

	#pre-nav {
		background: var(--alto-black);
		background-size: 300% 300%;
    /* background-image: linear-gradient(to bottom right, #444 0%, var(--alto-black) 70%, var(--alto-black) 100%); */
		color: var(--alto-white);
    text-align: center;
    padding: .75rem;
    font-size: .9rem;
		line-height: 1.1rem;
    font-family: var(--font-alt);
		/* box-shadow: rgba(0,0,0,.75) 0px 0px 6px 0px; */
	}

	nav#contacts {

		display: flex;
		padding: 1rem 0;

		#logo_container {

			a#logo {

				display: inline-block;
				height: 3rem;

				svg {
					display: block;
					height: 100%;
					width: auto;
				}

			}

		}

		#contacts-container {

			display: flex;
			flex-grow: 1;
			justify-content: flex-end;
	    gap: 2rem;

			a.contact {

				display: flex;
				align-items: center;
				color: var(--alto-black);
				text-decoration: none;
				transition: color .25s ease-out;

				i {
					font-family: var(--font-awe);
					padding-right: .5rem;
					font-size: 1.2rem;
				}

				ul {

					line-height: 1rem;

					li {
						font-weight: 400;
						font-size: .8rem;
					}

					li:first-child {
						font-family: var(--font-alt);
						text-transform: uppercase;
						font-weight: 600;
					}

					li:last-child {
					}

				}

			}

			a.contact:hover {
				color: var(--alto-red);
			}

		}

	}

	nav#products {

		> div {

			display: flex;
			border-top: 1px solid var(--bg-grey);
			border-bottom: 1px solid var(--bg-grey);
			align-items: center;
			justify-content: center;
			gap: 1.5rem;
			position: relative;

			> ul {

				display: flex;
				align-items: center;
				justify-content: center;
				gap: 1.5rem;

				font-family: var(--font-alt);
				text-transform: uppercase;

				> li {

					padding: 1rem 0;

					> a {
						font-size: .8rem;
						color: var(--alto-black);
						text-decoration-color: transparent;
						transition: all .25s ease-out;
					}

					> a:hover {
						text-decoration-color: var(--alto-black);
					}

					a.cart-items-indicator {

						padding: .5rem;
						border: 1px solid var(--border-grey);
						border-radius: .3rem;

						span.cart-items-indicator-number {
							/* font-size: 1rem; */
						}

						span.cart-items-indicator-number:before {
							content: "\f291  (";
							font-family: var(--font-awe);
							font-weight: 600;
						}

						span.cart-items-indicator-number:after {
							content: ")";
							font-family: var(--font-awe);
							font-weight: 600;
						}

					}

					a.cart-items-indicator:hover {
						text-decoration-color: transparent;
						color: var(--alto-red);
					}

					form#search {

						display: flex;

						fieldset {

							gap: 0;
							flex-direction: row-reverse;
							width: 100%;
							position: relative;

							button {
								font-size: .8rem;
								background-color: var(--bg-grey);
								padding: .5rem .8rem .5rem .5rem;
								border-top-right-radius: 1.3rem;
								border-bottom-right-radius: 1.3rem;
							}

							input {
								font-size: .8rem;
								border: 1px solid var(--bg-grey);
								padding: .5rem .5rem .5rem .8rem;
								border-top-left-radius: 1.3rem;
								border-bottom-left-radius: 1.3rem;
								font-family: var(--font-alt);
								flex: 1;
							}

							ul.inputSuggestions_container {

								position: absolute;
								width: 100%;
								display: block;
								z-index: 100;
                top: calc(2rem + 1px);
								box-shadow: 0 0 .5rem 0 rgba(0, 0, 0, 0.25);
								border-radius: 1rem;

								li:first-child {
									border-top: 1px solid var(--bg-grey);
									border-top-left-radius: 1rem;
									border-top-right-radius: 1rem;
								}

								li:last-child {
									border-bottom-left-radius: 1rem;
									border-bottom-right-radius: 1rem;
								}

								li {

									display: block;
									background-color: var(--alto-white);
									border-bottom: 1px solid var(--bg-grey);
									border-left: 1px solid var(--bg-grey);
									border-right: 1px solid var(--bg-grey);
									overflow: hidden;

									a {

										display: flex;
										justify-content: center;
										align-items: center;
										color: var(--alto-black);
										text-decoration: none;
										background-color: var(--alto-white);
										transition: .15s ease-in-out;

										span.autocomplete_img {

											width: 50px;
											height: 50px;
											position: relative;
											display: flex;
											justify-content: center;
											align-items: center;
											/* flex: 1; */

											img {
												padding: .5rem;
												max-width: 50px;
												max-height: 50px;
											}

										}

										span.autocomplete_title {
											display: inline-block;
											padding: .5rem;
											flex: auto;
											font-size: .8rem;
											line-height: 1rem;
											cursor: pointer;
										}
									}

									a:hover {
										background-color: var(--bg-fake-white);
									}
								}

							}

						}

					}

				}

				li.current-menu-item {

					a {
						text-decoration-color: var(--alto-black);
					}

				}

			}

			> ul:last-of-type {
				position: absolute;
				right: 1.5rem;
			}

		}

	}

	nav#mobile {

		flex-basis: 50%;
		background-color: var(--bg-fake-white);
		display: none;

		button {
			flex: 50%;
			background-color: transparent;
			border: none;
			padding: 1rem;
			font-family: var(--font-alt);
			font-size: 1.2rem;
			text-transform: uppercase;
			color: var(--alto-black);
		}

		button:before {
			margin-right: .5rem;
			font-size: 1.2rem;
			font-family: var(--font-awe);
			font-weight: 600;
		}

		button:first-child:before {
			content: "\f0c9";
		}

		button:last-child:before {
			content: "\f3c5";
		}

		button:last-child {
			border-left: 1px solid var(--border-grey);
		}

	}

}

.page-template-page-demande-soumission header#header nav#contacts #contacts-container .contact-demande-soumission {
	color: var(--alto-red);
}

@media only screen and (min-width: 701px) and (max-width: 1023px)  {

	header#header {

		nav#products {

			> div {

				justify-content: flex-start;
				margin-left: 1rem;

			}

		}

	}

}

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

	header#header {

		nav#mobile {
			display: flex;
		}

		nav#contacts {
			display: block;

			#logo_container a#logo {
				width: 100%;
				text-align: center;

				svg {
					display: inline-block;
				}
			}

			#contacts-container {

				display: block;
				right: -85vw;
				box-shadow: -0.5rem 0 1rem 0 rgba(0, 0, 0, 0);

				a.contact {

			    padding: 1rem;
					border-bottom: 1px solid var(--border-grey);

					i {
						padding-right: 1rem;
					}

				}

			}

		}

		nav#contacts  #contacts-container,
		nav#products {
			position: absolute;
			top: 0;
			background-color: var(--alto-white);
			width: 85vw;
			height: 100%;
			z-index: 100;
			overflow-x: visible;
			overflow-y: auto;
			transition: all .25s ease-out;
			scroll-behavior: smooth;
		}

		nav#products {
			left: -85vw;
	    box-shadow: 0.5rem 0 1rem 0 rgba(0, 0, 0, 0);

			> div {

				flex-direction: column-reverse;
				border: none;
				gap: 0;

				> ul {

					display: block;
					width: 100%;
					font-size: 1.2rem;
					position: relative;
					z-index: 2;

					> li {

						display: block;
						padding: 0 1rem;

						> a {
							padding: 1rem 0;
							display: block;
							border-bottom: 1px solid var(--border-grey);
						}

					}

				}

				> ul:last-of-type {
					position: relative;
					right: unset;

					> li {
						margin-top: 1rem;

						> a.cart-items-indicator {
							border: none;
							display: flex;
							padding: 0;
							margin: 2rem 0;
							justify-content: space-between;
							color: var(--alto-red);
						}

					}

				}

			}

		}

		nav#contacts #contacts-container.expanded {
			right: 0;
	    box-shadow: -0.5rem 0 1rem 0 rgba(0, 0, 0, .5);
		}

		nav#products.expanded {
			left: 0;
	    box-shadow: 0.5rem 0 1rem 0 rgba(0, 0, 0, .5);
		}

	}

}