/** container styles */
nav.sp-menu {
	background-color: #fff;
}

/**** slide title ***/
nav.sp-menu .slideTitle {
	position: relative;
	background-color: #474747;
	font-family: 'Open Sans';
	color: #fff;
	font-size: 20px;
	border: 0;
	padding: 14px 50px 14px 20px;
	line-height: 20px;
	font-weight: 500;
	margin: 0px 0px;
}
nav.sp-menu .slideTitle {
	padding-right:48px;
}
nav.sp-menu .menu-close {
    position: absolute;
    background-color: transparent;
    color: #000;
    fill: #000;
    padding: 0px;
    width: 20px;
    height: 20px;
    text-align: center;
    top: 5px;
    right: 5px;
	font-size: 20px;
}
nav.sp-menu .slideTitle .menu-close svg {
	display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
nav.sp-menu .slideTitle img {
	max-width:100%;
	height:auto;
}
    
/* scroll vert */
nav.sp-menu .scroll-vert {
	padding: 30px
}

/**** UL Styles ****/
nav.sp-menu ul {
	list-style-type: none !important;
    padding: 0px;
}
nav.sp-menu a {
	color: #333;
	border:0px !important;
	display: block;
}
nav.sp-menu a:hover,
nav.sp-menu a:focus {
	color: #777;
}
nav.sp-menu li:hover > a,
nav.sp-menu li:focus > a {
	color: #777;
	background-color: transparent;
}

/* first tier */
.sp-menu > .scroll-vert > ul>li>a {
	padding: 7px 7px;
	font-weight: 600;
}
/* second tier */
.sp-menu > .scroll-vert > ul>li>ul>li>a{
	padding: 5px 7px;
	font-weight: 500;
}
/* third tier */
.sp-menu > .scroll-vert > ul>li>ul>li>ul>li>a {
	font-size: 12px;
	padding: 4px 7px;
}
.sp-menu > .scroll-vert > ul>li>ul>li>ul>li>a:before {
	content: '\f105';
	font-family: Fontawesome;
	margin-right: 8px
}

/******** 
** Side Nav Collapse
******/
nav.sp-menu .side-nav-collapse ul {
	display: none;
}
nav.sp-menu .side-nav-collapse li {
	position: relative;
}
nav.sp-menu .side-nav-collapse .btn-collapse {
    position: absolute;
    right: 0;
    top: 0;
    height: 34px;
    width: 34px;
}
nav.sp-menu .side-nav-collapse .btn-collapse i {
	position: absolute;
    right: 0;
    top: 20%;
    width: 60%;
    height: 60%;
    fill: #333;
}
nav.sp-menu .side-nav-collapse .btn-collapse svg {
	width: 100%;
	height: 100%;
}
nav.sp-menu .side-nav-collapse .btn-collapse:focus {
	outline:none !important;
	box-shadow:none !important;
}

/** collapse animation for button **/
nav.sp-menu .side-nav-collapse .btn-collapse .sp-minus {
	-webkit-transform:rotate(90deg);
	   -moz-transform:rotate(90deg);
	    -ms-transform:rotate(90deg);
	     -o-transform:rotate(90deg);
	        transform:rotate(90deg);
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}
nav.sp-menu .side-nav-collapse .btn-collapse.cpOut .sp-minus {
	-webkit-transform:rotate(180deg);
	   -moz-transform:rotate(180deg);
	    -ms-transform:rotate(180deg);
	     -o-transform:rotate(180deg);
	        transform:rotate(180deg);
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}
nav.sp-menu .side-nav-collapse .btn-collapse .sp-plus {
	-webkit-transform:rotate(90deg);
	   -moz-transform:rotate(90deg);
	    -ms-transform:rotate(90deg);
	     -o-transform:rotate(90deg);
	        transform:rotate(90deg);
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}
nav.sp-menu .side-nav-collapse .btn-collapse.cpOut .sp-plus {
	-webkit-transform:rotate(180deg);
	   -moz-transform:rotate(180deg);
	    -ms-transform:rotate(180deg);
	     -o-transform:rotate(180deg);
	        transform:rotate(180deg);
	-webkit-transition: all 0s;
	-moz-transition: all 0s;
	-o-transition: all 0s;
	transition: all 0s;
	visibility: hidden;
}
