/* Right rail navigation layout. */

.syder-nav-menu {
	--syder-menu-rail-item-height: 90px;
	--syder-menu-rail-item-width: 180px;
	--syder-menu-social-item-size: 90px;
	--syder-menu-trigger-line: 4px;
}

.syder-nav-menu.syder-nav-menu--open {
	border-width: 30px var(--syder-menu-rail-item-width) 90px 30px;
}

.syder-nav-menu__trigger {
	right: 20px;
	bottom: 20px;
}

.syder-nav-menu--open .syder-nav-menu__trigger span {
	background-color: transparent;
}

.syder-nav-menu--open .syder-nav-menu__trigger span::before {
	transform: translateY(0) rotate(45deg);
}

.syder-nav-menu--open .syder-nav-menu__trigger span::after {
	transform: translateY(0) rotate(-45deg);
}

.syder-nav-menu ul:first-of-type {
	right: 0;
	bottom: 75px;
}

.syder-nav-menu ul:nth-of-type(2) {
	right: var(--syder-menu-rail-item-width);
	bottom: 0;
}

.syder-nav-menu ul:first-of-type li,
.syder-nav-menu ul li a {
	display: block;
}

.syder-nav-menu ul:first-of-type li {
	width: var(--syder-menu-rail-item-width);
	height: var(--syder-menu-rail-item-height);
	line-height: var(--syder-menu-rail-item-height);
}

.syder-nav-menu ul:nth-of-type(2) li {
	display: inline-block;
	width: var(--syder-menu-social-item-size);
	height: var(--syder-menu-rail-item-height);
	line-height: var(--syder-menu-rail-item-height);
	font-size: 0;
}

.syder-nav-menu ul:first-of-type li:first-child {
	transform: translate3d(0, 500%, 0);
}

.syder-nav-menu ul:first-of-type li:nth-child(2) {
	transform: translate3d(0, 400%, 0);
}

.syder-nav-menu ul:first-of-type li:nth-child(3) {
	transform: translate3d(0, 300%, 0);
}

.syder-nav-menu ul:first-of-type li:nth-child(4) {
	transform: translate3d(0, 200%, 0);
}

.syder-nav-menu ul:first-of-type li:nth-child(5) {
	transform: translate3d(0, 100%, 0);
}

.syder-nav-menu ul:nth-of-type(2) li:first-child {
	transform: translate3d(300%, 0, 0);
}

.syder-nav-menu ul:nth-of-type(2) li:nth-child(2) {
	transform: translate3d(200%, 0, 0);
}

.syder-nav-menu ul:nth-of-type(2) li:nth-child(3) {
	transform: translate3d(100%, 0, 0);
}

.syder-nav-menu.syder-nav-menu--open ul:first-of-type li,
.syder-nav-menu.syder-nav-menu--open ul:nth-of-type(2) li {
	transform: translate3d(0, 0, 0);
}

.syder-nav-menu ul:first-of-type li a {
	padding-right: 30px;
	color: var(--syder-menu-link-color);
	font-size: 0.85em;
	font-weight: 700;
	letter-spacing: 2px;
	text-align: right;
	text-transform: uppercase;
}

.syder-nav-menu ul:nth-of-type(2) li a {
	color: transparent;
	font-size: 0;
	text-align: center;
}

@media screen and (max-height: 31.125em) {
	.syder-nav-menu {
		--syder-menu-rail-item-height: 60px;
		--syder-menu-social-item-size: 60px;
	}
}