/* Libpynav v.1.0
 * Responsive off-canvas navigation menu using CSS transforms & transitions.
 * by Mr.Chalermchai Waiprib
 */

/* Menu Appearance */
.libpynav-overflow{
	overflow: hidden;
}
.libpynav{
	position: fixed;
	width: 280px;
	height: 100%;
	top: 0;
	z-index: 9999;
	background: #191918;
	/*overflow: auto;*/
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	/* enables momentum scrolling in iOS overflow elements */
}
	.libpynav a{
		display: block;
		position: relative;
		color: #ffffffd4;
		padding: 15px 30px;
		text-decoration: none;
	}
		.libpynav a:hover {
			background-color: #00202a;
			color: #fff;
		}
	.libpynav ul{
		list-style: none;
		padding: 0;
		height: 100%;
		margin-bottom: 0;
	}
		.libpynav ul li{
			padding: 0;
		}
			.libpynav ul li:after{
				content: '';
				/*border-color: inherit;*/
				/*border-bottom-width: 1px;*/
				/*border-bottom-style: solid;*/
				display: block;
				position: absolute;
				left: 20px;
				right: 0;
				bottom: 0;
			}
		.libpynav ul:first-child {
			/*margin-top: 10px;*/
		}
	.libpynav .nav-sronly {
		border: 0!important;
		clip: rect(1px,1px,1px,1px)!important;
		-webkit-clip-path: inset(50%)!important;
		clip-path: inset(50%)!important;
		white-space: nowrap!important;
		width: 1px!important;
		min-width: 1px!important;
		height: 1px!important;
		min-height: 1px!important;
		padding: 0!important;
		overflow: hidden!important;
		position: absolute!important;
	}
.libpynav.nav-left {
	left: 0;
}
.libpynav.nav-right {
	right: 0;
}
	.libpynav .nav-content {
		overflow-x: hidden;
		visibility: hidden;
		height: 100%;
	}
	.libpynav .nav-brand {
		padding: 0;
		height: 32px;
	}
		.libpynav .nav-brand img{
			height: 100%;
		}

/* Menu Toggler */
.libpynav-toggler-wrapper{
	display: block;
	position: sticky;
	position: -webkit-sticky;
	left: 0;
	z-index: 14;
	width: 60px;
	height: 60px;
}
	.libpynav-toggler-wrapper .libpynav-toggler{
		display: inline-block;
		margin: 0;
		padding: 18px 20px 15px;
		/*height: 46px;*/
		overflow: visible;
		border: 0;
		background-color: transparent;
		cursor: pointer;
		transition-property: opacity,-webkit-filter;
		transition-property: opacity,filter;
		transition-property: opacity,filter,-webkit-filter;
		transition-duration: .15s;
		transition-timing-function: linear;
		font: inherit;
		color: inherit;
		text-transform: none;
	}
		.libpynav-toggler-wrapper .libpynav-toggler > span{
			display: inline-block;
			position: relative;
			width: 30px;
			height: 22px;
		}
			.libpynav-toggler-wrapper .libpynav-toggler > span > span,
			.libpynav-toggler-wrapper .libpynav-toggler > span > span:after,
			.libpynav-toggler-wrapper .libpynav-toggler > span > span:before{
				position: absolute;
				width: 30px;
				height: 2px;
				border-radius: 2px;
				background-color: #fff;
				transition-property: transform;
				transition-duration: .15s;
				transition-timing-function: ease;
			}
			.libpynav-toggler-wrapper .libpynav-toggler > span > span{
				top: auto;
				bottom: 0;
				transition-duration: .15s;
				transition-delay: .15s;
				transition-timing-function: cubic-bezier(.55,.055,.675,.19);
			}
			.libpynav-toggler-wrapper .libpynav-toggler > span > span:after,
			.libpynav-toggler-wrapper .libpynav-toggler > span > span:before{
				content: "";
				display: block;
			}
			.libpynav-toggler-wrapper .libpynav-toggler > span > span:before{
				top: -10px;
				transition: top .12s .3s cubic-bezier(.33333,.66667,.66667,1),transform .15s cubic-bezier(.55,.055,.675,.19);
			}
			.libpynav-toggler-wrapper .libpynav-toggler > span > span:after{
				top: -20px;
				transition: top .3s .3s cubic-bezier(.33333,.66667,.66667,1),opacity .1s linear;
			}
			.libpynav-open-left .libpynav-toggler-wrapper .libpynav-toggler > span > span{
				bottom: -2px;
				transform: translate3d(0,-10px,0) rotate(-45deg);
				transition-delay: .32s;
				transition-timing-function: cubic-bezier(.215,.61,.355,1);
			}
				.libpynav-open-left .libpynav-toggler-wrapper .libpynav-toggler > span > span:before{
					top: 0;
					-ms-transform: rotate(-90deg);
					transform: rotate(-90deg);
					transition: top .12s .18s cubic-bezier(.33333,0,.66667,.33333),transform .15s .42s cubic-bezier(.215,.61,.355,1);
				}
				.libpynav-open-left .libpynav-toggler-wrapper .libpynav-toggler > span > span:after{
					top: 0;
					opacity: 0;
					transition: top .3s cubic-bezier(.33333,0,.66667,.33333),opacity .1s .27s linear;
				}
/*
.libpynav .nav-close {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-block;
    color: inherit;
}
	.libpynav .nav-close:after,
	.libpynav .nav-close:before{
		content: '';
		-webkit-box-sizing: content-box;
		box-sizing: content-box;
		display: block;
		width: 5px;
		height: 5px;
		margin: auto;
		position: absolute;
		top: 0;
		bottom: 0;
		-webkit-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		transform: rotate(-45deg);
		border-color: rgba(0,0,0,.1);
		border-color: #fff;
		border-width: 2px;
		border-style: solid;
	}
		.libpynav .nav-close:before {
			border-right: none;
			border-bottom: none;
			right: 18px;
		}
		.libpynav .nav-close:after {
			border-left: none;
			border-top: none;
			right: 25px;
		}
*/

/* Menu Movement */
.libpynav-open-left,
.libpynav-open-right{
	overflow-x: hidden;
}
.libpynav.nav-left {
	-webkit-transform: translate3d(-280px, 0, 0);
	-ms-transform: translate3d(-280px, 0, 0);
	transform: translate3d(-280px, 0, 0);
}

.libpynav-open-left .content-wrapper,
.libpynav-open-left .push-wrapper {
	-webkit-transform: translate3d(280px, 0, 0);
	-ms-transform: translate3d(280px, 0, 0);
	transform: translate3d(280px, 0, 0);
}

.libpynav.nav-right {
	-webkit-transform: translate3d(200px, 0, 0);
	-ms-transform: translate3d(200px, 0, 0);
	transform: translate3d(200px, 0, 0);
}

.libpynav-open-right .content-wrapper,
.libpynav-open-right .push-wrapper {
	-webkit-transform: translate3d(-200px, 0, 0);
	-ms-transform: translate3d(-200px, 0, 0);
	transform: translate3d(-200px, 0, 0);
}

.libpynav-open-left .libpynav,
.libpynav-open-right .libpynav {
	-webkit-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
.libpynav-open-left .nav-content,
.libpynav-open-right .nav-content {
	visibility: visible;
}

/* Menu Transitions */
.libpynav,
.content-wrapper,
.push-wrapper{
	transition: transform 0.2s cubic-bezier(0.16, 0.68, 0.43, 0.99);
}

.libpynav .nav-content {
	transition: visibility 0.2s cubic-bezier(0.16, 0.68, 0.43, 0.99);
}

/* Site Overlay */
.libpynav-overlay {
	display: none;
}
	.libpynav-open-left .libpynav-overlay,
	.libpynav-open-right .libpynav-overlay {
		display: block;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 9998;
		background-color: rgba(0, 0, 0, 0.5);
		-webkit-animation: fade 500ms;
		animation: fade 500ms;
	}
@keyframes fade {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@-webkit-keyframes fade {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

/* Submenu Appearance */
.nav-submenu {}
	.nav-submenu:after{}
	.nav-submenu > a {
		position: relative;
		width: 100%;
		padding: 15px 30px;
		background: transparent;
		text-align: left;
		/*color: #ffffffd4;*/

		/*-webkit-tap-highlight-color: rgba(255,255,255,.4);*/
		/*tap-highlight-color: rgba(255,255,255,.4);*/
		/*-webkit-tap-highlight-color: var(--mm-color-background-emphasis);*/
		/*tap-highlight-color: var(--mm-color-background-emphasis);*/
		/*background: rgba(3,2,1,0);*/
		/*border-color: inherit;*/
	}
		.nav-submenu > a:hover {
			color: #fff;
		}
	.nav-submenu ul {
		position: absolute;
		top: 0;
		right: -280px;
		z-index: 2;
		width: 280px;
		height: 100%;
		background-color: #002834;
	}
		.nav-submenu ul .nav-link{}

/* Submenu Movement */
.nav-submenu-closed > ul {
	/*height: 0;*/
	/*max-height: 0;*/
	overflow-y: auto;
	overflow-x: hidden;
	visibility: hidden;
	-webkit-animation: slideOutToRight 0.5s forwards;
    /*-webkit-animation-delay: 2s;*/
    animation: slideOutToRight 0.5s forwards;
    /*animation-delay: 2s;*/
}
.nav-submenu-opened > ul {
	/*max-height: 1000px;*/
	visibility: visible;
	-webkit-animation: slideInFromRight 0.5s forwards;
    /*-webkit-animation-delay: 2s;*/
    animation: slideInFromRight 0.5s forwards;
    /*animation-delay: 2s;*/
}
@keyframes slideInFromRight {
	100% {
		right: 0;
	}
}
@-webkit-keyframes slideInFromRight {
	100% {
		right: 0;
	}
}
@keyframes slideOutToRight {
	100% {
		right: 0;
		left: 280px;
	}
}
@-webkit-keyframes slideOutToRight {
	100% {
		right: 0;
		left: 280px;
	}
}

/* Submenu Icon */
.nav-submenu-opened > ul > li:first-child > a:before,
.nav-submenu > a:after{
	content: '';
	display: block;
	-webkit-box-sizing: content-box;
	box-sizing: content-box;
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 8px;
	height: 8px;
    border: 2px solid #fff;
	border-bottom: none;
	border-right: none;
}
/*.nav-submenu-closed > a:after{*/
.nav-submenu > a:after{
	-webkit-transform: rotate(135deg);
	-ms-transform: rotate(135deg);
	transform: rotate(135deg);
	right: 23px;
	left: auto;
}
.nav-submenu-opened > ul > li a{
	padding-left: 45px;
}
.nav-submenu-opened > ul > li:first-child > a:before {
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
	left: 23px;
	right: auto;
}