%rwd-menu-size{
	font-size: 24px;

	display: inline-block;

	width: 24px;
	height: 24px;
	svg{
		display: block;

		fill: $gray-dark;
		fill: black;
	}
	&.active{
		svg{
			fill: $red;
		}
	}
}

.header-menu{
	padding-top: 10px;

	align-items: center;
	flex: 1;
	justify-content: center;
}

.menu-edit{
	@extend %rwd-menu-size;

	width: 19px;
	height: 20px;
	margin-right: 25px;
	// svg{
	// 	width: 24px;
	// 	height: 25px;
	// 	margin-top: -3px;
	// 	use{
	// 		width: 10px;
	// 		height: 10px;
	// 	}
	// }
	display: none;
	svg{
		margin-top: -3px;
	}
	.icon-pencil{
		display: inline-block;

		width: 1em;
		height: 1em;

		fill: currentColor;
		stroke: currentColor;
		stroke-width: 0;
		margin-top: -3px;
		use{
			font-size: 32px;
		}
	}
}

.menu-search{
	@extend %rwd-menu-size;
	svg{
		width: 20px;
		height: 19px;
		margin-top: 2px;
	}
	&-content{
		position: absolute;

		display: none;

		/*.ms-srch-sb {
			input {
				text-overflow: ellipsis;
				-o-text-overflow: ellipsis;
				-ms-text-overflow: ellipsis;
			}
		}*/
	}
}

.menu-burger{
	@extend %rwd-menu-size;

	// margin-right: 12px;
	margin-left: 17px;

	svg{
		width: 25px;
		height: 25px;
		&.icon-close{
			padding-top: 2px;
		}
	}

	&-content{
		position: absolute;
		z-index: 100;
		top: 65px;
		right: 0;
		left: 0;

		display: none;

		width: 100%;
		padding-bottom: 1em;

		text-align: left;

		color: black !important;
		border: 2px $gray solid;
		border-color: $gray-75 !important;
		border-right: 0;
		border-bottom-width: 5px;
		border-left: 0;
		background-color: white;
		a{
			font-family: $din-medium;
			font-size: 130%;
			font-weight: normal;
			line-height: 120%;

			position: relative;

			display: block;

			margin-bottom: 1px;
			padding: .5em;

			text-decoration: none;

			color: $gray-666;
			border-left: 5px $gray-666 solid;
			&:hover,
			&:focus{
				color: $red-dark;
				border-left-color: $red-dark;
				background-color: transparent;
			}
			&::before,
			&::after{
				position: absolute;
				bottom: -1px;
				left: -5px;

				width: 100%;
				height: 1px;

				content: " ";

				background-color: $gray;
			}
		}
		h1{
			font-family: $din-bold;
			font-size: 1.9em;

			display: block;

			margin-top: .5em;
			margin-bottom: .5em;
			margin-left: 5px;

			color: $red;
			border-bottom: 1px $gray solid;
		}
		h2{
			font-family: $din-bold;

			margin-left: .75em;

			color: $gray-333;
		}
		br{
			display: none;
		}
		&.active{
			display: block;

			background-color: white;
		}
	}
}
.menu-search{
	&-content{
		position: absolute;
		z-index: 100;
		top: 65px;
		right: 0;
		left: 0;

		display: none;

		width: 100%;

		text-align: left;

		&.active{
			display: block;

			background-color: white;
		}

		#SearchBox{
			overflow: hidden;

			max-height: 0;

			transition: all 500ms linear;
			&.active{
				overflow: auto;

				max-height: 65px;
			}
		}
	}
}