.navigation {
	width: 50%;
	height: 100%;
	position: fixed;
	z-index: 3;
	top: 0;
	right: 0;
	background: $main-color;
	transition: all 0.3s;
	-webkit-transform: translateX(100%);
			transform: translateX(100%);
	&--open {
		-webkit-transform: translateX(0%);
				transform: translateX(0%);
	}
	.navigation__content {
		display: table;
		width: 100%;
		margin-top: 80px;
		height: calc(100% - 120px);
		.menu__active, .menu__items {
			display: table-cell;
			vertical-align: middle;
		}
		.menu__active {
			text-align: left;
			position: relative;
			width: 50%;
			color: inherit;
			overflow: hidden;
			.content {
				width: 70%;
				margin: 0 auto;
				color: inherit;
				transition: all 0.3s ease;
				position: relative;
				-webkit-transform: translateX(-200%);
						transform: translateX(-200%);
				header {
					text-transform: uppercase;
					font-size: 26pt;
					position: absolute;
					top: -82px;
					white-space: nowrap;
					a {
						color: inherit;
						border-bottom: 2px solid #fff;
					}
				}
				.menu__submenus {
					margin-top: 20px;
					font-family: $AksidenzGroteskStd-Light;
					position: absolute;
					top: -30px;
					width: 100%;
					a {
						width: 100%;
						display: inline-block;
						color: inherit;
						white-space: nowrap;
						&:after {
							content: '';
							display: block;
							background: #fff;
							width: 0;
							height: 1px;
							transition: width 0.3s ease;
						}
						&:hover {
							&:after {
								width: 100%;
							}
						}
					}
					a.active {
						&:after {
							width: 100%;
						}
					}
				}
				&--hovered {
					-webkit-transform: translateX(0%);
							transform: translateX(0%);
				}
			}	
		}
		.menu__items {
			text-align: left;
			text-transform: uppercase;
			position: relative;
			width: 50%;
			font-size: 16px;
			a {
				color: inherit;
				padding: 10px 0px;
				width: 70%;
				float: right;
				display: inline-block;
				&:after {
					content: '';
					display: block;
					background: #fff;
					width: 0;
					height: 1px;
					transition: width 0.3s ease;
				}
				&:hover {
					&:after {
						width: 100%;
					}
				}
				&.active {
					&:after {
						content: '';
						display: block;
						background: #fff;
						width: 100%;
						height: 1px;
						transition: width 0.3s ease;
					}
				}
			}
		}
	}
	.navigation__footer {
		height: 40px;
		color: inherit;
		display: table;
		width: 100%;
		.navigation__language {
			text-align: left;
			width: 50%;
			padding: 0 8%;
			display: table-cell;
			vertical-align: middle;
			a {
				color: inherit;
			}
			a.active {
				border-bottom: 2px solid #fff;
			}
		}
		.navigation__social {
			text-align: left;
			vertical-align: middle;
			display: table-cell;
			width: 50%;
			div {
				color: inherit;
				width: 70%;
				float: right;
				display: block;
			}
			img {
				width: 25px;
				height: auto;
			}
			a:nth-child(2) {
				margin-left: 10px;
			}
		}
	}

}

@media all and(max-width: $desktop-sm) {
	.navigation {
		width: 70%;
		.navigation__content {
			.menu__active {
				header {
				}
			}
			.menu__items {
				a {
					width: 85%;
				}
			}
		}
	}
}

@media all and(max-width: $tablet) {
	.navigation {
		width: 90%;
	}
}

@media all and(max-width: 500px) {
	.navigation {
		width: 100%;
		.navigation__content {
			.menu__active {
				width: 100%;
				.content {
					-webkit-transform: translateX(-300%);
							transform: translateX(-300%);
					header {
						top: -98px;
					}
					.menu__submenus {
						top: -45px;
					}
					&--hovered {
						-webkit-transform: translateX(0%);
							transform: translateX(0%);
					}
				}	
			}
			.menu__items {
				white-space: nowrap;
				a {
					font-size: 23px;
					transform: translateX(72%);
				}
			}
		}
		&--open {
			.navigation__content {
				.menu__active {
					overflow: visible;
				}
			}
		}
	}
}