#mobile-top-navigation {
	display: none;
	padding-left: 0;
	height: 48px;
	width: 100%;
	position: fixed;
	background: #181c25;
	transition: padding 0.5s cubic-bezier(0.77,0.2,0.05,1.0);

	&.mobile-side-nav-open {
		padding-left: 250px;

		.logo {
			width: calc(100% - 250px);
		}
	}

	.logo {
		position: fixed;
		width: 100%;
		height: 48px;
		display: flex;
		justify-content: center;
		transition: width 0.5s cubic-bezier(0.77,0.2,0.05,1.0);

		a {
			border: 0;
			display: block;
			height: 32px;
			margin: 8px 0;
		}

		img {
			height: 100%;
		}
	}

	.mobile-menu-toggle {
		display: block;
		position: relative;
		z-index: 1;
		-webkit-user-select: none;
		user-select: none;
		margin: 12px 0 0 12px;
	}

	.mobile-menu-toggle a {
		text-decoration: none;
		transition: color 0.3s ease;
	}

	.mobile-menu-toggle input {
		display: block;
		width: 40px;
		height: 32px;
		position: absolute;
		top: -7px;
		left: -5px;
		cursor: pointer;
		opacity: 0; /* hide this */
		z-index: 2; /* and place it over the hamburger */
		-webkit-touch-callout: none;
	}

	.mobile-menu-toggle span {
		display: block;
		width: 34px;
		height: 4px;
		margin-bottom: 5px;
		position: relative;
		background: #ffffff;
		border-radius: 3px;
		z-index: 1;
		transform-origin: 4px 0px;
		transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
		background 0.6s cubic-bezier(0.16, 1, 0.3, 1),
		opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
	}

	.mobile-menu-toggle span:last-child {
		margin-bottom: 0;
	}

	.mobile-menu-toggle span:first-child {
		transform-origin: 0% 0%;
	}

	.mobile-menu-toggle span:nth-last-child(1) {
		transform-origin: 0% 100%;
	}

	.mobile-menu-toggle input:checked ~ span {
		opacity: 1;
		transform: rotate(45deg) translate(4px, -2px);
	}

	.mobile-menu-toggle input:checked ~ span:nth-last-child(2) {
		opacity: 0;
		transform: rotate(0deg) scale(0.0, 0.0);
		transition: transform cubic-bezier(0.16, 1, 0.3, 1)
	}

	.mobile-menu-toggle input:checked ~ span:nth-last-child(1) {
		transform: rotate(-45deg) translate(2px, 6px);
	}

}
@media only screen and (max-width: 980px) {
	#mobile-top-navigation {
		display: flex;
	}
}
@media only screen and (max-width: 550px) {
	#mobile-top-navigation {
		&.mobile-side-nav-open .logo {
			width: 500%;
		}
	}
}
