*!------------------------------------*\
    Base
\*!------------------------------------*/
.spnavi a { color:#fff !important; }
.spnavi a:visited { color:#fff !important; }

.drawer-open{
	overflow:hidden!important;
}
.drawer-nav{
	position:fixed;
	top:20px;
	overflow:hidden;
	width:240px;
	height:100%;
	color:#fff;
	padding-top: 100px;
	z-index: 300000;
}

.drawer-brand{
	font-weight:700;
	line-height:60px;
	line-height:3.75rem;
	display:block;
	padding-right:9pt;
	padding-right:.75rem;
	padding-left:9pt;
	padding-left:.75rem;
	text-decoration:none;
	color:#222;
}
.drawer-menu{
	margin:20px 0 0 0;
	padding:0;
	list-style:none
}
.drawer-menu-item{
	display:block;
    text-align: center;
    font-size: 18px;
	padding:11px 0 10px 0 !important;
	text-decoration:none;
	color:#fff
}
.drawer-menu-item:hover{
	color:#fff;background-color: #4CA9EC;
}

/*! overlay */
.drawer-overlay{
	position:fixed;
	z-index:200;
	top:0;
	left:0;
	display:none;
	width:100%;
	height:100%;
	background-color:transparent;
}
.drawer-open .drawer-overlay{
	display:block;
}

/*!------------------------------------*\
    Top
\*!------------------------------------*/
.drawer--top .drawer-nav{
	top:-100%;
	left:0;
	width:100%;
	height:auto;
	max-height:100%;
	-webkit-transition:top .6s cubic-bezier(0.190,1.000,0.220,1.000);transition:top .6s cubic-bezier(0.190,1.000,0.220,1.000)
}
.drawer--top.drawer-open .drawer-nav{
	top:0
}
.drawer--top .drawer-hamburger,.drawer--top.drawer-open .drawer-hamburger{
	right:0
}

/*!------------------------------------*\
    Left
\*!------------------------------------*/
.drawer--left .drawer-nav{
	left:-240px;
	-webkit-transition:left .6s cubic-bezier(0.190,1.000,0.220,1.000);
	transition:left .6s cubic-bezier(0.190,1.000,0.220,1.000)
}
.drawer--left .drawer-hamburger,.drawer--left.drawer-open .drawer-nav,.drawer--left.drawer-open .drawer-navbar .drawer-hamburger{
	left:0
}
.drawer--left.drawer-open .drawer-hamburger{
	left:100%;
}
/*!------------------------------------*\
    Right
\*!------------------------------------*/
.drawer--right .drawer-nav{
	background-image: url("../images/navi_bg.png");
    background-size: 100% 100%;
	margin-top: 0;
	right:-240px;
	-webkit-transition:right .6s cubic-bezier(0.190,1.000,0.220,1.000);
	transition:right .6s cubic-bezier(0.190,1.000,0.220,1.000)
}
.drawer--right .drawer-hamburger,.drawer--right.drawer-open .drawer-nav,.drawer--right.drawer-open .drawer-navbar .drawer-hamburger{
	right:0
}
.drawer--right.drawer-open .drawer-hamburger{
	right:100%;
}
/*!------------------------------------*\
    Hamburger
\*!------------------------------------*/

.drawer-hamburger{
	position:fixed;
	z-index:400000;
	top:20px !important;
	display:block;
	box-sizing:content-box;
	width:33px;
	padding:10px 5px 20px 7px;
	right: 0 !important;
	-webkit-transition:all .6s cubic-bezier(0.190,1.000,0.220,1.000);
	transition:all .6s cubic-bezier(0.190,1.000,0.220,1.000);
	-webkit-transform:translate3d(0,0,0);
	transform:translate3d(0,0,0);
	border:0;
	outline:0;
    margin-right: 10px;
	margin-top: 23px;
    background-color: #40BEB6;
    border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
}

@media screen and ( max-width: 768px ) {
	.drawer-menu{
		margin:-8px 0 0 0 !important;
	}
.drawer-hamburger{
		top:0 !important;
	}
	.drawer-nav{
		top:0 !important;
	}
	.drawer-menu-item{
		display:block;
        text-align: center;
        font-size: 15px !important;
	    padding:11px 0 10px 0 !important;
	    text-decoration:none;
	    color:#fff
	}
}


.drawer-hamburger:active{
	cursor:pointer;
	background-color:#ccc;
}
	
.drawer-hamburger-icon{
	position:relative;
	display:block;
	margin-top:10px
}
	
.drawer-hamburger-icon,.drawer-hamburger-icon:after,.drawer-hamburger-icon:before{
	width:100%;
	height:3px;
	-webkit-transition:all .6s cubic-bezier(0.190,1.000,0.220,1.000);
	transition:all .6s cubic-bezier(0.190,1.000,0.220,1.000);
    background-color: #fff;
}

.drawer-hamburger-icon:after,.drawer-hamburger-icon:before{
	position:absolute;
	top:-10px;
	left:0;content:' '
}
	
.drawer-hamburger-icon:after{
	top:10px
}
.drawer-open .drawer-hamburger-icon{
	background-color:transparent;
}
.drawer-open .drawer-hamburger{
	color: #fff !important;
}
.drawer-open .drawer-hamburger-icon:after,.drawer-open .drawer-hamburger-icon:before{
	top:0
}
.drawer-open .drawer-hamburger-icon:before{
	-webkit-transform:rotate(45deg);
	transform:rotate(45deg);
    background-color: #fff;
}
.drawer-open .drawer-hamburger-icon:after{
	-webkit-transform:rotate(-45deg);
	transform:rotate(-45deg);
    background-color: #fff;
}

/*!------------------------------------*\
    accessibility
\*!------------------------------------*/

/*!
 * Only display content to screen readers
 * See: http://a11yproject.com/posts/how-to-hide-content
 */.sr-only{position:absolute;overflow:hidden;clip:rect(0,0,0,0);width:1px;height:1px;margin:-1px;padding:0;border:0}

/*!
 * Use in conjunction with .sr-only to only display content when it's focused.
 * Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
 * Credit: HTML5 Boilerplate
 */.sr-only-focusable:active,.sr-only-focusable:focus{
 	position:static;
	overflow:visible;
	clip:auto;
	width:auto;
	height:auto;
	margin:0
}