/* -----------------------------------
 * Slidebars
 * Version 0..10
 * http://plugins.adchsm.me/slidebars/
 *
 * Written by Adam Smith
 * http://www.adchsm.me/
 *
 * Released under MIT License
 * http://plugins.adchsm.me/slidebars/license.txt
 *
 * -------------------
 * Slidebars CSS Index
 *
 * 001 - Box Model, Html & Body
 * 002 - Site
 * 003 - Slidebars
 * 004 - Animation
 * 005 - Helper Classes
 *
 * ----------------------------
 * 001 - Box Model, Html & Body
 */
.sb-open-right {
	/*background-color: #f5f5f5;
    background-image: linear-gradient(to bottom, #278bce, #006cb6);
    background-repeat: repeat-x;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) #b3b3b3;
    border-image: none;
    border-radius: 0;
    border-style: solid;
    border-width: 0;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    height:45px;line-height:37px;
    padding: 2px 0;
    text-align: center;
    text-transform: uppercase;*/

}

.sb-open-right2 {
	/*background-color: #f5f5f5;
    background-image: linear-gradient(to bottom, #278bce, #006cb6);
    background-repeat: repeat-x;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) #b3b3b3;
    border-image: none;
    border-radius: 0;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    height:45px;line-height:37px;
    padding: 2px 0;
    text-align: center;
    text-transform: uppercase;*/

}

.sb-open-right:hover {
	/* background: none repeat scroll 0 0 #278bce;*/
}


#sb-site,
.sb-site-container,
.sb-slidebar {
	/* Set box model to prevent any user added margins or paddings from altering the widths or heights. */
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}


html.sb-scroll-lock.sb-active:not(.sb-static) {
	overflow: hidden;
	/* Prevent site from scrolling when a Slidebar is open, except when static Slidebars are only available. */
}

/* ----------
 * 002 - Site


#sb-site, .sb-site-container {
	
	width: 100%;
	position: relative;
	z-index: 1; 
	background-color: #ffffff; 
}

 */
/* ---------------
 * 003 - Slidebars
 */

.sb-slidebar {
	height: 100%;
	overflow-y: auto;
	/* Enable vertical scrolling on Slidebars when needed. */
	position: fixed;
	top: 0;
	z-index: 100;
	/* Slidebars sit behind sb-site. */
	display: none;
	/* Initially hide the Slidebars. Changed from visibility to display to allow -webkit-overflow-scrolling. */
	background-color: #f2f2f2;
	/* Default Slidebars background colour, overwrite this with your own css. */
	-webkit-transform: translate(0px);
	/* Fixes issues with translated and z-indexed elements on iOS 7. */
}

.sb-left {
	left: 0;
	/* Set Slidebar to the left. */
}

.sb-right {
	right: 0;
	/* Set Slidebar to the right. */
}

html.sb-static .sb-slidebar,
.sb-slidebar.sb-static {
	position: absolute;
	/* Makes Slidebars scroll naturally with the site, and unfixes them for Android Browser < 3 and iOS < 5. */
}

.sb-slidebar.sb-active {
	display: block;
	/* Makes Slidebars visibile when open. Changed from visibility to display to allow -webkit-overflow-scrolling. */
}

.sb-style-overlay {
	z-index: 9999;
	/* Set z-index high to ensure it overlays any other site elements. */
}

.sb-momentum-scrolling {
	-webkit-overflow-scrolling: touch;
	/* Adds native momentum scrolling for iOS & Android devices. */
}

/* Slidebar widths for browsers/devices that don't support media queries. */
.sb-slidebar {
	width: 30%;
}

.sb-width-thin {
	width: 15%;
}

.sb-width-wide {
	width: 45%;
}

@media (max-width: 480px) {

	/* Slidebar widths on extra small screens. */
	.sb-slidebar {
		width: 55%;
	}

	.sb-width-thin {
		width: 55%;
	}

	.sb-width-wide {
		width: 85%;
	}
}

@media (min-width: 481px) {

	/* Slidebar widths on small screens. */
	.sb-slidebar {
		width: 55%;
	}

	.sb-width-thin {
		width: 40%;
	}

	.sb-width-wide {
		width: 70%;
	}
}

@media (min-width: 768px) {

	/* Slidebar widths on medium screens. */
	.sb-slidebar {
		width: 40%;
	}

	.sb-width-thin {
		width: 25%;
	}

	.sb-width-wide {
		width: 55%;
	}
}

@media (min-width: 992px) {

	/* Slidebar widths on large screens. */
	.sb-slidebar {
		width: 60%;
		overflow: hidden;
	}

	.sb-width-thin {
		width: 15%;
	}

	.sb-width-wide {
		width: 45%;
	}
}

@media (min-width: 1200px) {

	/* Slidebar widths on extra large screens. */
	.sb-slidebar {
		width: 20%;
	}

	.sb-width-thin {
		width: 5%;
	}

	.sb-width-wide {
		width: 35%;
	}
}

/* ---------------
 * 004 - Animation
 */

.sb-slide,
#sb-site,
.sb-site-container,
.sb-slidebar {
	-webkit-transition: -webkit-transform 400ms ease;
	-moz-transition: -moz-transform 400ms ease;
	-o-transition: -o-transform 400ms ease;
	transition: transform 400ms ease;
	-webkit-transition-property: -webkit-transform, left, right;
	/* Add left/right for Android < 4.4. */
	-webkit-backface-visibility: hidden;
	/* Prevents flickering. This is non essential, and you may remove it if your having problems with fixed background images in Chrome. */
}

/* --------------------
 * 005 - Helper Classes
 */

.sb-hide {
	display: none;
	/* Optionally applied to control classes when Slidebars is disabled over a certain width. */
}

/* -------------- menu css ------------- */




#wrap {
	width: auto;
	margin: 0 auto;
}

/* Disable properties specified in the imported CSS file */
.menu a {
	border: none;
	font-weight: normal;
}

/* Actual menu CSS starts here */
.menu,
.menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 100% !important;
}

.menu {
	width: auto;
}

.menu li {
	background: transparent;
	border-bottom: 1px solid #fff;
	display: block;
	margin: 0 0 1px;
	padding: 5px 2px;
	width: 100%;
	overflow: hidden;
	text-align: left;
}

.menu li:hover {
	/*background: none repeat-x scroll 0 0 #4e4e4e;*/
}

.menu li li {
	display: block;
	margin: 0;
	padding: 0;
	margin-bottom: 1px;
	background: none repeat scroll 0 0 #165dc8;
	border: 0;
}

.menu a {
	display: block;
	padding: 2px 5px;
	color: #fff;
	font-weight: bold;
	text-decoration: none;
	width: 120px;
	text-transform: uppercase;
	font-size: 12px;
}

.menu li li a {
	color: #fff;
	display: block;
	font-weight: normal;
	padding: 10px 5px;
	text-decoration: none;
	width: 100%;
	text-transform: none;
	font-size: 12px;
}

/*.menu a:hover,
	.menu a:focus,
	.menu a:active {background:#d9dcb0;}*/

.menu ul li {
	padding-left: 5px;
}

.menu li li a {
	background: #fff;
	color: #000;
}

.menu li li a:hover {
	background: #ccc;
	color: #000;
}

.menu li ul {
	/* display: none; */
}

.hidden {
	display: none;
	transition: -webkit-transform .15s;
	transition: transform .15s;
	transition: transform .15s, -webkit-transform .15s;

	-webkit-transform: translate(0, 0);
	transform: translate(0, 0)
}

.menu ul.hidden {
	transform: scaleY(1);
	transition: transform 400ms ease 0ms;
}

.side-nav {
	padding-left: 0;
	list-style-type: none
}

.side-nav ul {
	list-style-type: none
}

.side-nav .side-nav-link {
	color: #fff;
	display: block;
	padding: 10px 30px;
	font-size: .9375rem;
	position: relative;
	-webkit-transition: color .3s ease-in-out, background-color .3s ease-in-out, border-color .3s ease-in-out;
	transition: color .3s ease-in-out, background-color .3s ease-in-out, border-color .3s ease-in-out;
	list-style: none
}

.side-nav .side-nav-link:active,
.side-nav .side-nav-link:focus,
.side-nav .side-nav-link:hover {
	color: #fff;
	text-decoration: none
}

.side-nav .side-nav-link span {
	vertical-align: middle
}

.side-nav .side-nav-link i {
	display: inline-block;
	line-height: 1.0625rem;
	margin: 0 10px 0 0;
	font-size: 1.1rem;
	vertical-align: middle;
	width: 20px
}

.side-nav .menu-arrow {
	-webkit-transition: -webkit-transform .15s;
	transition: -webkit-transform .15s;
	transition: transform .15s;
	transition: transform .15s, -webkit-transform .15s;
	position: absolute;
	right: 30px;
	display: inline-block;
	font-family: "Material Design Icons";
	text-rendering: auto;
	line-height: 1.5rem;
	font-size: 1.1rem;
	-webkit-transform: translate(0, 0);
	transform: translate(0, 0)
}

.side-nav .menu-arrow:before {
	content: "f0142"
}

.side-nav .badge {
	margin-top: 3px
}

.side-nav li a[aria-expanded=true]>span.menu-arrow {
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg)
}

.side-nav .menuitem-active>a:not(.collapsed)>span.menu-arrow {
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg)
}

.side-nav .side-nav-title {
	padding: 12px 30px;
	letter-spacing: .05em;
	pointer-events: none;
	cursor: default;
	font-size: .6875rem;
	text-transform: uppercase;
	color: #fff;
	font-weight: 700
}

.side-nav .menuitem-active>a {
	color: #fff !important
}

[dir=ltr] .side-nav .menu-arrow:before {
	content: "f0141" !important
}

.collapse:not(.show) {
	display: none
}


/* menu slide */

.sidenav {
	height: 100%;
	width: 0;
	position: fixed;
	z-index: 1004;
	top: 0;
	right: 0;
	background-color: #165dc8;
	overflow-x: hidden;
	transition: 0.5s;
	padding-top: 60px;
}

.sidenav a {
	padding: 8px 8px 8px 10px;
	text-decoration: none;
	color: #fff;
	display: block;
	transition: 0.3s;
	width: 100%;
}

.sidenav a:hover {
	color: #f1f1f1;
}

.sidenav .closebtn {
	position: absolute;
	top: 0;
	left: 0;
	font-size: 36px;
	font-weight: bold;
}

.sidenav li a {
	font-weight: bold;
}

.sidenav i {
	width: 22px;
}

#main {
	transition: margin-right .5s;
}

@media screen and (max-height: 450px) {
	.sidenav {
		padding-top: 15px;
	}

	.sidenav a {
		font-size: 18px;
	}
}