

	#nav {
		width: 100%;
	}

		#nav .contentblock {
		}

			#sec-header {
				min-height: 40px;
				background-color: var(--grey);
				font-size: .8em;
				display: flex;
				align-items: center;
			}
				#checklogin ul {
					list-style-type: none;
					padding-left: 0;
					display: flex;
				}
				.login {
					height: 40px;
					float: right;
				}
				.clientmenu,
				.login form {
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					justify-content: flex-end;
				}
				
				.client_menu_login,
				.clientmenu a {
					color: #585A6F;
					padding: 10px 11px;
					display: inline-block;
				}
				.clientmenu a {
					text-decoration: underline;
				}
				
				.client_menu_login {
					padding-left:50px;	
					opacity: .65;
				}

			.header_client_menu {
				float:right;	
			}
@media(max-width:1100px) {
	.client_menu_login {
		padding-left: 25px;
	}

}
@media(max-width: 991px) {
	.header_client_menu {
		float: none;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}
	.client_menu_login {
		float: none;
		padding-left: 11px;
	}
}
#sec-header input[type="checkbox"].checkbox-toggle,
#sec-header input[type="checkbox"].checkbox-toggle + label {
	display: none;
}
@media(max-width: 650px) {
	#sec-header,
	.login {
		height: auto;
		float: none;
	}
	#sec-header {
		text-align: right;
		position: relative;
	}
	
	#sec-header input[type="checkbox"].checkbox-toggle + label {
		display: inline-flex;
		align-items: center;
		padding: 6px 12px;
	}
	#sec-header input[type="checkbox"].checkbox-toggle + label + .menu {
		position: absolute;
		left: 0;
		right: 0;
		display: none;
		flex-direction: column-reverse;
		z-index: 999999;
		background: white;
		padding: 1rem;
		transition: 0.2s ease all;
		flex-grow: 1;
		flex-basis: 0;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		box-shadow: 0 0 8px rgba(0,0,0,.1);
		display: none;
	}
	#sec-header input[type="checkbox"].checkbox-toggle:checked + label + .menu {
		display: flex;
		top: 100%;
	}	

		#sec-header .menu  {
			display: flex;
			flex-direction: column;
		}
			#sec-header .menu .login {
				width: 100%;
			}
			#sec-header .menu .header_client_menu,
			#sec-header .menu form ul,
			#sec-header .menu .login-nav,
			#sec-header .menu form {
				display: flex;
				flex-direction: column;
				width: 100%;
				justify-content: center;
				text-align: center;
				margin-right: 0;
				margin-left: 0;
			}
			#sec-header .menu .header_client_menu {
				flex-direction: column-reverse;
			}
				#sec-header .menu form input {
					width: 100%;
					margin-bottom: 5px;
				}
			#sec-header .menu a {
					width: 100%;
					display: block;
			}
	#sec-header .toggle span {
		background-color: var(--primary);
	}
}
	
/* FORM STYLES */

#login-title {
	float: left;
	color: #9f9f9f;
	padding: 10px 0;
}

.login-input {
	float: left;
	margin:	5px 3px;
	border: 0;
	width: 132px;
	padding: 5px 10px;
	border-radius: 0;
	border: 1px solid var(--border-color)
}
					
input[type="submit"].login-bttn {
	margin: 5px 2px;
	border-radius: 0;
	background-color: var(--secondary);
	color: #fff;
	bordeR: 0;
	padding: 8px 15px 8px 15px;
}

ul.login-nav {
	list-style: none;
	margin: 0;
	margin-right: -11px;
	margin-left: 11px;
}
	ul.login-nav li {
		float: left;
		padding: 10px 11px;
	}

	ul.login-nav li a {
		color: #585A6F;
	}

/* END FORM STYLES */

#prim-header {
	height: 90px;
	position: relative;
}
#prim-header .middle {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}
	#prim-header .menu {
		flex-grow: 1;
		flex-basis: 0;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}
	#prim-header .search {
		display: flex;
		flex-grow: 1;
		flex-basis: 0;
		overflow: hidden;
		position: relative;
		margin: 0 30px;
	}
		#prim-header .search input[type="text"] {
			border: 1px solid var(--border-color);
			padding: 0 12px;
			height: 50px;
			flex-grow: 1;
			width: 100%;
		}
		#prim-header .search input[type="submit"] {
			appearance: none;
			-webkit-appearance: none;
			border: 0;
			background: url('../images/search.svg') no-repeat center / 20px auto;
			height: 50px;
			width: 60px;
			position: absolute;
			right: 0;
			top: 0;
			bottom: 0;
		}


	#prim-header ul#main-nav {
		position: relative;
		float: right;
		/* height: 41px; */
		list-style: none;
		margin-right: -8px;
	}

		#prim-header ul#main-nav li {
			display: block;
			padding: 12px 8px;
			float: left;
		}

			#prim-header ul#main-nav li a {
				color: var(--default);
				text-decoration: none;
			}
@media(max-width: 991px) {
	#prim-header {
		height: auto;
	}
		#prim-header #main-nav {
			flex: 0 0 100%
		}
			h1#logo {
				margin: 16px 0 0 0;
				max-width: 100%;
			}
			#prim-header .search {
				margin-right: 0;
			}
			#prim-header ul#main-nav li {
				float: right;
			}
			
}
@media(max-width: 480px) {
	#prim-header > .contentblock  > a {
		flex-grow: 1;
		display: flex;
		align-items: center;
		flex-basis: 0;
		overflow: hidden;
	}
	#prim-header h1#logo {
		width: 100%;
		height: 40px;
		background-position: left center;
	}

}


label[for="main-nav-toggler"],
input#main-nav-toggler {
	display: none;
	align-items: center;
}

@media(max-width: 820px) {
	/* TOGGLER */
	label[for="main-nav-toggler"],
	input#main-nav-toggler {
		display: inline-flex;
	}
	label[for="main-nav-toggler"] {
		padding: 6px 12px;
	}
	input#main-nav-toggler {
		appearance: none;
		-webkit-appearance: none;
		border: 0;
		background-color: transparent;
		box-shadow: none;
		margin-left: auto;
		width: 0;
	}
	#prim-header .toggle span {
		background-color: var(--primary);
	}
	/* MAIN */
	
	input#main-nav-toggler:checked + label[for="main-nav-toggler"] +  .menu { 
		display: flex;
		top: 100%;
	}
	#prim-header .menu {
		position: absolute;
		left: 0;
		right: 0;
		display: none;
		flex-direction: column-reverse;
		z-index: 99999;
		background: white;
		padding: 1rem;
		transition: 0.2s ease all;
	}
		#prim-header ul#main-nav  {
			display: flex;
			flex-direction: column;
			text-align: left;
			width: 100%;
		}
		#prim-header .search {
			width: 100%;
			margin: 0;
			flex: 0 0 100%;
		}
}
		

#tert-header {
    background: var(--primary);
    position: relative;
}

#tert-header .triangles {
    content: "";
    position: absolute;
	overflow: hidden;
    right: 0;
    top: 0;
    bottom: 0;
	z-index: 0;
}
#tert-header .triangles img {
    transform: translate(12.5%, 0);
}

    #tert-header ul { 
		list-style-type: none;
    }
                #tert-header ul li a { 
                    color: #fff;
                    text-decoration: none;
                    white-space: nowrap;
                    padding: 10px 16px;
                    display: block;
                    transition: 0.2s ease all;
                }

				#tert-header ul li a.active {
					font-weight: bold;
				}
					#tert-header ul li a.active,
					#tert-header ul li:hover a {
					}
					.dropdown-menu .dropdown-toggle {
						background: url('../images/right.svg') no-repeat center right 16px / auto 12px;
					}

			/* niveau 1 */
			
			#tert-header ul.nav {
				display: flex;
				align-items: center;
				margin-left: -16px;
				position: relative;
				z-index: 999;
			}
			#tert-header ul.nav > li { 
				display: flex;
				flex-direction: column;
				position: relative;
			}
			#tert-header ul.nav > li > a.active,
			#tert-header ul.nav > li:hover > a { 
				background-color: var(--primary-dark);
			}

			/* niveau 2 */
            #tert-header ul.nav > li > .dropdown-menu {
                position: absolute;
                top: 100%;
                left: 0;
                width: 100%;
                flex-direction: column;
                justify-content: flex-start;
                background: var(--primary-dark);
                padding: 8px 0;
                margin-left: 0;
                display: none;
                z-index: 9;
				width: 300px;
            }
                #tert-header ul.nav > li.active > .dropdown-menu {
                    display: block;
                    z-index: 99;
                }
					#tert-header ul.nav > li > .dropdown-menu > ul {
						
						display: block;
						padding-left: 0!important;
						padding-right: 0!important;
					}
						#tert-header ul.nav > li > .dropdown-menu > ul > li{ 
							width: 100%;
							position: relative;
							border-right: 1px solid rgba(255,255,255,0.2);
    						display: inline-block;
							
						}
							#tert-header ul.nav > li > .dropdown-menu > ul > li > a { 
								padding: 8px 16px;
								white-space: normal;
								line-height: 1.3;
							}

							#tert-header ul.nav > li > .dropdown-menu > ul > li > a.active,
							#tert-header ul.nav > li > .dropdown-menu > ul > li:hover > a {
								background-color: var(--primary-darker);
							}
							/* niveau 3 */
							#tert-header ul.nav > li > .dropdown-menu > ul > li > .dropdown-menu {
								display: none;
								background-color: var(--primary-darker);
								position: absolute;
								left: 100%;
								width: 100%;
								top: 0;
								flex-direction: column;
								z-index: 10;
							}
							
							#tert-header ul.nav > li.reverse-submenu-direction > .dropdown-menu {
								left: auto;
								right: 0;
							}
							#tert-header ul.nav > li.reverse-submenu-direction > .dropdown-menu > ul > li > .dropdown-menu {
								left: auto;
								right: 100%;
							}
							#tert-header ul.nav > li > .dropdown-menu > ul > li:hover > .dropdown-menu {
								display: flex;
							}
								#tert-header ul.nav > li > .dropdown-menu > ul > li > .dropdown-menu > ul > li > a.active,
								#tert-header ul.nav > li > .dropdown-menu > ul > li > .dropdown-menu > ul > li > a:hover {
									background-color: var(--primary-darkest);
								}

label[for="category-nav"],
input#category-nav {
	display: none;
	align-items: center;
}
								
@media (max-width: 1800px) {
	#tert-header ul li a {
		font-size: 90%;
		padding: 10px 12px;
	}
}

@media (max-width: 1300px) {
	
	/*TOGGLE*/
	.toggle {
		width: 22px;
		height: 22px;
		z-index: 9;
		position: relative;
		margin-left: .375em;
	}
	
	.toggle span {
		width: 17px;
		height: 1px;
		background-color: #fff;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		transition: 0.2s ease all;
	}
	.toggle span:first-child {
		transform: translateY(-6px)
	}
	.toggle span:last-child {
		transform: translateY(6px)
	}
		input[type="checkbox"].checkbox-toggle {
			appearance: none;
			-webkit-appearance: none;
			border: 0;
			background-color: transparent;
			box-shadow: none;
			margin-left: auto;
			width: 0;
		}
		input[type="checkbox"].checkbox-toggle:checked + label .toggle span {
			opacity: 0;
		}
		input[type="checkbox"].checkbox-toggle:checked + label .toggle span:first-child {
			transform: translateY(0) rotate(-45deg);
			opacity: 1;
		}
		input[type="checkbox"].checkbox-toggle:checked + label .toggle span:last-child {
			transform: translateY(0) rotate(45deg);
			opacity: 1;
		}

	/*CATEOGRY NAV*/
	label[for="category-nav"],
	input#category-nav {
		display: inline-flex;
		background-color: var(--primary-dark);
		color: #fff;
	}
	#tert-header .triangles {
		display: none;
	}
	#tert-header {
		text-align: right;
	}
		input#category-nav {
			appearance: none;
			-webkit-appearance: none;
			border: 0;
			background-color: transparent;
			box-shadow: none;
		}
		label[for="category-nav"] {
			padding: 6px 12px;
			margin: 5px 0;
		}
		input#category-nav:checked + label[for="category-nav"] {

		}
		input#category-nav:checked + label[for="category-nav"] + ul.nav {
			display: block;
			text-align: left;
		}
			#tert-header ul.nav li .dropdown-menu {
				padding-left: 1rem;
				padding-right: 1rem;
			}
				#tert-header ul li a {
					padding-top: 6px;
					padding-bottom: 6px;
				}
	/*niveau 1*/
	#tert-header ul.nav {
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		display: none;
		margin: 0;
		background-color: var(--primary);
	}
	#tert-header ul.nav > li.active > a {
		background-color: var(--primary-dark);
	}
	.dropdown-menu .dropdown-toggle,
	#tert-header ul.nav > li > a {
		background: url('../images/down.svg') no-repeat center right 16px / auto 12px;
	}
	/*niveau 2*/
	#tert-header ul.nav > li > .dropdown-menu {
		width: 100%;
		position: static;
	}
	/*niveau 3*/
	
	#tert-header ul.nav > li > .dropdown-menu > ul > li > a {
		background-color: var(--primary-darker);
	}
	#tert-header ul.nav > li > .dropdown-menu > ul > li > .dropdown-menu {
		display: block!important;
		position: static!important;

	}
	#tert-header ul.nav > li > .dropdown-menu > ul > li > .dropdown-menu a {

		background-color: var(--primary-darkest);

	}
	#tert-header ul.nav > li > .dropdown-menu > ul > li > .dropdown-menu > li > a {
		background-color: var(--primary-darker);
	}
}