/*******************************************************************************
 *
 * Basics
 *
 */



html, body {
  width: 100%;
  min-height: 100%;
}



/*******************************************************************************
 *
 * Slidebars Plugin
 *
 */



[off-canvas] {
	display: none;
	position: fixed;
	overflow: hidden;
	/* background-color: #fff;
	box-shadow: 0 0 10px rgba(0,0,0,.3); */
}

[off-canvas*=right] {
	width: 100vw;
	height: 100%;
	height: calc(var(--vh, 1vh) * 100);
	top: 0;
	right: 0;
}

[off-canvas*=left] {
	width: 100vw;
	height: 100%;
	height: calc(var(--vh, 1vh) * 100);
	top: 60px;
	left: 0;
}

[off-canvas*=reveal] {
	z-index: 0;
}

[off-canvas*=push] {
	z-index: 1;
}

[off-canvas*=overlay] {
	z-index: 1040;
}

[off-canvas*=shift] {
	z-index: 0;
}

[canvas], [off-canvas] {
	-webkit-transform: translate( 0px, 0px );
	    -ms-transform: translate( 0px, 0px );
	        transform: translate( 0px, 0px );
	-webkit-transition: -webkit-transform 300ms;
	        transition:         transform 300ms;
	-webkit-backface-visibility: hidden;
}

[off-canvas*=shift][off-canvas*=top] {
	-webkit-transform: translate( 0px, 50% );
	        transform: translate( 0px, 50% );
}

[off-canvas*=shift][off-canvas*=right] {
	-webkit-transform: translate( -50%, 0px );
	        transform: translate( -50%, 0px );
}

[off-canvas*=shift][off-canvas*=bottom] {
	-webkit-transform: translate( 0px, -50% );
	        transform: translate( 0px, -50% );
}

[off-canvas*=shift][off-canvas*=left] {
	-webkit-transform: translate( 50%, 0px );
	        transform: translate( 50%, 0px );
}

@media print {
	[canvas] {
		-webkit-transform: translate( 0px, 0px ) !important;
		    -ms-transform: translate( 0px, 0px ) !important;
		        transform: translate( 0px, 0px ) !important;
	}

	[off-canvas] {
		display: none !important;
	}
}



/*******************************************************************************
 *
 * Codrops Plugin
 *
 */



.menu {
	position: relative;
	width: 100%;
	height: calc((var(--vh, 1vh) * 100) - (60px + 45px));
	border-bottom: 1px solid rgba(0,0,0,.1);


  box-shadow: inset 0 17px 10px -20px rgba(0,0,0,.3);
}

.menu__wrap {
	position: absolute;
	top: 39px;
	bottom: 0;
	overflow: hidden;
	width: 100%;
}

.menu__level {
	position: absolute;
	top: 0;
	left: 0;
	visibility: hidden;
	overflow: hidden;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	list-style-type: none;
}

.menu__level--current {
	visibility: visible;
}

.menu__item {
	display: block;
}

.menu__link {
	position: relative;
	display: block;
	padding: 5px 20px;
	/* border-top: 1px solid rgba(0,0,0,.1); */
	-webkit-transition: color 0.1s;
	transition: color 0.1s;
}

.menu__link[data-submenu]::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 28px;
	display: inline-block;
	width: 20px;
	height: 20px;
	background: url(../img/icon-arrow-left.svg);
	transform: translateY(-50%) rotate(180deg);
  filter: invert(100%);
}

.menu__link--current {
	color: red;
}

.menu__breadcrumbs a {
	display: block;
	padding: 10px 20px 5px 50px;
	transition: all .3s;
}

.menu__back.menu__back--hidden + .menu__breadcrumbs a:only-child {
	padding-left: 20px;
}

.menu__breadcrumbs a:not(:last-child) {
	display: none;
}

.menu__back {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	display: inline-block;
	width: 100%;
	height: 48px;
	background: url(../img/icon-arrow-left.svg) 16px 12px no-repeat;
	background-size: 20px 20px;
  filter: invert(100%);
	cursor: pointer;
}

.menu__back--hidden {
	pointer-events: none;
	opacity: 0;
}

.menu__back:not(.menu__back--hidden) + .menu__breadcrumbs {
  font-weight: 700;
  text-transform: uppercase;
}

[class^='animate-'],
[class*=' animate-'] {
	visibility: visible;
}

.animate-outToRight .menu__item {
	-webkit-animation: outToRight 0.6s both cubic-bezier(0.7, 0, 0.3, 1);
	animation: outToRight 0.6s both cubic-bezier(0.7, 0, 0.3, 1);
}

@-webkit-keyframes outToRight {
	to {
		opacity: 0;
		-webkit-transform: translate3d(100%, 0, 0);
		transform: translate3d(100%, 0, 0);
	}
}

@keyframes outToRight {
	to {
		opacity: 0;
		-webkit-transform: translate3d(100%, 0, 0);
		transform: translate3d(100%, 0, 0);
	}
}

.animate-outToLeft .menu__item {
	-webkit-animation: outToLeft 0.6s both cubic-bezier(0.7, 0, 0.3, 1);
	animation: outToLeft 0.6s both cubic-bezier(0.7, 0, 0.3, 1);
}

@-webkit-keyframes outToLeft {
	to {
		opacity: 0;
		-webkit-transform: translate3d(-100%, 0, 0);
		transform: translate3d(-100%, 0, 0);
	}
}

@keyframes outToLeft {
	to {
		opacity: 0;
		-webkit-transform: translate3d(-100%, 0, 0);
		transform: translate3d(-100%, 0, 0);
	}
}

.animate-inFromLeft .menu__item {
	-webkit-animation: inFromLeft 0.6s both cubic-bezier(0.7, 0, 0.3, 1);
	animation: inFromLeft 0.6s both cubic-bezier(0.7, 0, 0.3, 1);
}

@-webkit-keyframes inFromLeft {
	from {
		opacity: 0;
		-webkit-transform: translate3d(-100%, 0, 0);
		transform: translate3d(-100%, 0, 0);
	}
	to {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

@keyframes inFromLeft {
	from {
		opacity: 0;
		-webkit-transform: translate3d(-100%, 0, 0);
		transform: translate3d(-100%, 0, 0);
	}
	to {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

.animate-inFromRight .menu__item {
	-webkit-animation: inFromRight 0.6s both cubic-bezier(0.7, 0, 0.3, 1);
	animation: inFromRight 0.6s both cubic-bezier(0.7, 0, 0.3, 1);
}

@-webkit-keyframes inFromRight {
	from {
		opacity: 0;
		-webkit-transform: translate3d(100%, 0, 0);
		transform: translate3d(100%, 0, 0);
	}
	to {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

@keyframes inFromRight {
	from {
		opacity: 0;
		-webkit-transform: translate3d(100%, 0, 0);
		transform: translate3d(100%, 0, 0);
	}
	to {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

[data-menu^="sub"] li a {
  padding-left: 3.1rem;
}