body {
	&[class*="ct-offcanvas"] {
		#main-container {
			transition: transform 0.25s ease-in-out;
		}
	}
}

// Off Canvas
.ct-offcanvas-menu {
	position: fixed;
	width: var(--offCanvasWidth);
	top: 0;
	right: 0;
	bottom: 0;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;

	.ct-bag-container {
		box-shadow: inset 10px 0px 30px -10px rgba(0,0,0,0.1);
	}

	.ct-bag-actions {
		display: none;
	}

	.ct-bag-content {
		opacity: 0;
		padding-top: 50px;
		transform: translate3d(5px, 0, 0);
		transition: opacity 0.1s ease 0s,
					transform 0.1s ease 0s;
	}
}

.ct-offcanvas-active {
	overflow: hidden;

	#main-container {
		transform: translate3d(calc(var(--offCanvasWidth) * -1), 0, 0);
	}

	.ct-offcanvas-menu {
		.ct-bag-content {
			opacity: 1;
			transform: translate3d(0, 0, 0);
			transition: opacity 0.5s cubic-bezier(.35,.81,.41,1) 0.25s,
						transform 0.5s cubic-bezier(.35,.81,.41,1) 0.25s;
		}
	}
}


// menu
#mobile-menu.ct-offcanvas-menu {
	.mobile-menu {
		font-weight: bold;
		font-size: 16px;
		padding: 0 30px;
	}

	.menu-item-has-children > ul {
		font-size: 15px;
		font-weight: 600;
	}

	.menu-arrow {
		padding: 8px;
		margin-right: -8px;

		&:before {
			border: none;
		}
		
		svg {
			width: 8px;
			height: 8px;
		}
	}
}