/*
 * Panel Overlay
 */
.aside:focus,
.aside:focus-visible {
	outline: none;
	box-shadow: none;
}

.aside__panel {
	position: fixed;
	display: block;
	top: 0;
	right: 0;
	width: 640px;
	height: 100%;
	padding: 60px 40px 20px 50px;
	margin: 0;
	z-index: 110;
    overflow-x: hidden;
    overflow-y: auto;
	border: 0;
	color: var(--color-text);
	box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
	background-color: var(--color-dark);
	transition: transform .6s var(--ease-expo-in-out);
	transition-delay: .1s;
	transform: translate3d(100%, 0, 0);
}


.aside__panel.active {
	transform: translate3d(0, 0, 0);
	box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.07);
}

.aside__mask {
	position: fixed;
	display: block;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	z-index: 109;
	opacity: 0;
	visibility: hidden;
	background-color: var(--color-black-50);
	transition: all .6s ease;
}

.aside__mask.active {
	visibility: visible;
	opacity: 1;
}

@media screen and (max-width: 980px) {
	.aside__panel,
	.aside__mask {
		display: block;
	}
	
	.aside__panel {
		width: 100%;
	}	
}

.aside__close {
	position: absolute;
	top: 30px;
	right: 30px;
	padding: 5px;
	color: var(--color-white);
	transform: rotate(0deg);
	border-radius: 60px;
	border: 2px solid var(--color-link);
}

.aside__close:hover {
	color: var(--color-link);
	border-color: var(--color-link);
}

@media screen and (max-width: 980px) {
	.aside__close {
		width: 50px;
		height: 50px;
	}
}

.aside__close svg {
	vertical-align: middle;
	transform: rotate(0deg);
	transition: transform var(--ease-base);
}

.aside__close:hover svg,
.aside__close:focus svg {
	transform: rotate(90deg);	
}

.aside__content {
	display: grid;
	height: 100%;
}

.aside__top {
	align-self: start;	
	padding-top: var(--spacing-20);
}

.aside__links a {
	display: block;
	color: var(--color-white);
	text-decoration-line: underline;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--color-white-0);
	text-underline-offset: 4px;	
}

.aside__links a:hover,
.aside__links a:focus {
	color: var(--color-link);
	text-decoration-color: var(--color-link);
}

.aside__links {
	margin-top: var(--spacing-30);
}

.aside__bottom {
	align-self: end;
	padding-top: var(--spacing-50);
	line-height: 1.5;
}

.aside-items-center {
	padding-top: var(--spacing-50);
}

.aside-items-center .aside__top {
	align-self: end;
}

.aside-items-center .aside__bottom {
	align-self: start;
}

.aside-phone {
	display: block;
	margin-bottom: 25px;
	font-family: var(--heading-font);
	font-weight: var(--heading-font-weight);
	text-transform: var(--heading-text-transform);
	letter-spacing: var(--heading-letter-spacing-small);
}

.aside-address {
	margin-bottom: 15px;
	white-space: pre-line;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: var(--tiny-font);
}

.aside-address::after {
	content: "";
	display: block;
	margin-top: 15px;
	width: 50px;
	height: 1px;
	background-color: var(--color-white-10);
}

.aside-copyrights {
	font-size: 14px;
}

.aside__panel .child-animate > * {
	position: relative;
	opacity: 0;
	transition: all var(--ease-base), outline 0s;
	transform: translateX(100px);
}

.aside__panel .child-animate > *.slide-in {
	opacity: 1;
	transform: translateX(0px);
}

.aside__panel .aside__menu > .menu > li a {
	opacity: 0;
	transition: all var(--ease-base), outline 0s;
	transform: translateX(100px);
}

.aside__panel .aside__menu > .menu > li.slide-in a {
	opacity: 1;
	transform: translateX(0);	
}

.aside-panel-left {
	right: auto;
	left: 0;
	transform: translate3d(-100%, 0, 0);
}

.aside-panel-left .child-animate > * {
	transform: translateX(-100px);
}

.aside-panel-left .child-animate > *.slide-in {
	transform: translateX(0px);
}

.aside-panel-left .aside__menu > .menu > li a {
	transform: translateX(-100px);
}

.aside-panel-left .aside__menu > .menu > li.slide-in a {
	opacity: 1;
	transform: translateX(0);	
}

@media (prefers-reduced-motion: reduce) {
	.aside__panel .aside__menu > .menu > li a,
	.aside__panel .child-animate > * {
		opacity: 1 ! important;	
		transform: translateX(0) ! important;
	}
}