/* Mobile / tablet slide-out menu (<= 1024px). Dark brand panel, large serif links, orange accents. */
.ci-nav-panel-cta { display: none; }

@media (max-width: 1024px) {
	.ci-burger { color: #fff; }
	.ci-nav .ci-nav-panel {
		width: 88vw; max-width: 380px; background: var(--c-dark); color: #fff;
		display: flex; flex-direction: column; padding: 0; border-right: 3px solid var(--c-accent);
	}
	.ci-nav .ci-nav-panel.is-open { box-shadow: 8px 0 40px rgba(0, 0, 0, 0.45); }
	.ci-nav .ci-nav-panel-head {
		display: flex; align-items: center; justify-content: space-between; flex: none;
		padding: 18px 20px 18px 24px; margin: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); overflow: visible;
	}
	.ci-nav .ci-nav-panel-head img { float: none; width: auto; height: 64px; max-width: none; margin: 0; padding: 0; background: none; }
	.ci-nav .ci-nav-close {
		float: none; display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0;
		background: transparent; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 50%; cursor: pointer; transition: all 0.25s;
	}
	.ci-nav .ci-nav-close:hover { background: var(--c-accent); border-color: var(--c-accent); }
	.ci-nav .ci-nav-close .ci-icon { width: 16px; height: 16px; fill: #fff; }

	.ci-nav .menu { display: block; flex: 1; overflow-y: auto; margin: 0; padding: 8px 24px 16px; height: auto; }
	.ci-nav .menu li { display: block; position: relative; border-bottom: 1px solid rgba(255, 255, 255, 0.09); }
	.ci-nav .menu > li > a {
		display: flex; align-items: center; justify-content: space-between; padding: 18px 0;
		font: 600 22px/1.2 var(--f-head); letter-spacing: 0; text-transform: none; color: #fff;
	}
	.ci-nav .menu > li:hover > a, .ci-nav .menu > li.current-menu-item > a, .ci-nav .menu > li.is-open > a { color: var(--c-accent); }
	.ci-nav .menu > li > a .menu-chevron {
		float: none; margin: 0; padding: 0; border: 0; border-radius: 0; color: var(--c-accent); display: grid; place-items: center;
		width: 34px; height: 34px; transition: transform 0.3s;
	}
	.ci-nav .menu > li > a .menu-chevron .ci-icon { width: 15px; height: 15px; fill: currentColor; }
	.ci-nav .menu > li.is-open > a .menu-chevron { transform: rotate(180deg); }

	.ci-nav .sub-menu { padding: 0 0 14px 4px; margin: 0 0 0 2px; border-left: 2px solid rgba(225, 113, 65, 0.55); background: none; }
	.ci-nav .sub-menu li { border: 0; }
	.ci-nav .sub-menu a { display: block; padding: 10px 0 10px 16px; font: 400 16px/1.35 var(--f-body); letter-spacing: 0; text-transform: none; color: rgba(255, 255, 255, 0.82); }
	.ci-nav .sub-menu a:hover, .ci-nav .sub-menu .current-menu-item > a { color: var(--c-accent); background: none; }

	.ci-nav .ci-nav-panel-cta { display: block; flex: none; padding: 18px 24px 26px; border-top: 1px solid rgba(255, 255, 255, 0.1); }
	.ci-nav .ci-nav-panel-cta .btn { display: block; width: 100%; padding: 17px 30px; background: var(--c-accent); color: #fff; }
	.ci-nav .ci-nav-panel-cta .btn:hover { background: #fff; color: var(--c-dark); }

	.ci-nav-overlay.is-open { background: rgba(0, 10, 9, 0.6); }
}