.account-menu-wrapper {
	background-color: white;
	cursor: pointer;
	height: 100%;
	position: relative;
	transform: translateX(-100%);
	transition: transform 0.5s ease;
	width: 100%;
}

.account-menu-wrapper .account-menu-mobile-title {
	color: #131719;
	font-family: 'Lato';
	font-size: 12px;
	font-weight: 800;
	left: 50%;
	line-height: 16px;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
}

@media (max-width: 991.98px) {
	.account-menu-wrapper::before,
	.account-menu-wrapper::after {
		content: "";
		height: 12px;
		width: 2px;
		background: #131719;
		position: absolute;
		right: 24px;
		top: 50%;
		transform-origin: bottom;
		transition: transform 0.3s ease, background-color 0.3s ease;
	}

	.account-menu-wrapper::before {transform: translateY(-50%) rotate(30deg);}
	.account-menu-wrapper::after {transform: translateY(-50%) rotate(-30deg);}

	.account-menu-wrapper.active::before {transform: translateY(-50%) translateX(-6px) rotate(30deg);}
	.account-menu-wrapper.active::after {transform: translateY(-50%) translateX(6px) rotate(-30deg);}
}

.menu-is-expanded .account-menu-wrapper {
	transform: none;
}

@media (min-width: 992px) {
	.account-menu-wrapper {
		background-image: url('../img/user_icon.svg');
		background-position: center;
		background-repeat: no-repeat;
		background-size: 18px;
		transform: none;
		width: 70px;
	}

	.account-menu-wrapper:before {
		background-image: url('../img/loggedout.svg');
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
		content: '';
		height: 13px;
		left: 40px;
		position: absolute;
		top: 38px;
		width: 13px;
	}

	body.loggedin .account-menu-wrapper:before {
		background-image: url('../img/loggedin.svg');
	}

	.account-menu-wrapper:after {
		display: none;
	}
}

.account-menu-wrapper .account-menu {
	background-color: white;
	left: auto;
	margin: 0;
	opacity: 0;
	padding: 0 0 10px;
	pointer-events: none;
	position: absolute;
	right: 0;
	top: 100%;
	transition: all .3s ease-in-out;
	width: 100%;
}

@media (min-width: 992px) {
	.account-menu-wrapper .account-menu {
		width: 280px;
	}
}

.account-menu-wrapper.active .account-menu {
	opacity: 1;
	pointer-events: auto;
	transition: all .3s ease-in-out;
}

.account-menu-wrapper .account-menu a {
	color: #525252;
	display: block;
	font-family: 'Roboto Slab';
	font-size: 13px;
	font-weight: 400;
	letter-spacing: .35px;
	line-height: 20px;
	padding: 5px 0 5px 35px;
	position: relative;
	text-decoration: none;
	transition: all .3s ease-in-out;
}

@media (min-width: 992px) {
	.account-menu-wrapper .account-menu {
		padding: 0;
	}

	.account-menu-wrapper .account-menu a {
		font-size: 14px;
		font-weight: 700;
		padding: 10px 0 10px 60px;
	}

	.account-menu-wrapper .account-menu a:before {
		background-image: url('../img/notice.png');
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
		content: '';
		height: 11px;
		left: 34px;
		opacity: 0;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		transition: all .3s ease-in-out;
		width: 11px;
	}

	.account-menu-wrapper .account-menu a:hover {
		color: #131719;
		transition: all .3s ease-in-out;
	}

	.account-menu-wrapper .account-menu a:hover:before {
		opacity: 1;
		transition: all .3s ease-in-out;
	}
}

.account-menu-wrapper .account-menu .ajax-progress {
	display: none !important;
}