
/* The side navigation menu */
.sidenav {
 height: 100%; /* 100% Full-height */
 width: 0; /* 0 width - change this with JavaScript */
 position: fixed; /* Stay in place */
 z-index: 106; /* Stay on top */
 top: 0;
 left: 0;
 background-color: #fff;
 overflow-x: hidden; /* Disable horizontal scroll */
 transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}


.sidenav nav {
 position: absolute;
 top: 50px;
 width: 320px;
}

.sidenav nav li ul li {
 padding:5px 20px;
}

.sidenav nav li {
 position:relative;
 list-style: none;
 padding-bottom: 15px;
}

.sidenav nav li a {
 font-size: 24px;
 color: #3B454C;
 font-weight: 500;
 -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

/* When you mouse over the navigation links, change their color */
.sidenav nav ul li a:hover, .offcanvas a:focus {
	text-decoration: none;
	padding-left: 10px;
	display: block;
	color: #7F93A1;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
 position: absolute;
 top: 20px;
 right: 0;
 font-size: 13px;
 color: #3B454C;
}

.sidenav .closebtn:hover {
 color: #3B454C;
 text-decoration: none;
 opacity: 0.7;
}
.sidenav .closebtn img {
	margin-top: -2px;
}
.sidenav:before {
 content:"";
 position:fixed;
 left:0px;
 top:0;
 width:0%;
 height:100%;
 background-color:rgba(256, 256, 256, .3);
 -webkit-transition:.5s;
 -moz-transition: .5s;
 -o-transition:.5s;
 transition:.5s;
}

.sidenav.open:before {
 left:320px;
 width:100%;
}
.sidenav nav li ul li a {
 font-weight:normal;
 font-size:16px;
}

.sidenav nav li.igpeople-link ul li a, .sidenav nav li.igpeople-link a {
 color:#ef3d6d;
}
.sidenav nav li ul li a {
 font-weight:normal;
 font-size:16px;
}

.sidenav nav li ul {
 display:none;
 padding:15px 0 0;
 margin:0px;
}

.sidenav nav li.active ul {
 display:block;
}

.sidenav nav li.active span a .fa-caret-down:before {
 content: "\f0d8";
}

.sidenav nav li span {
 float:right;
}


/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
 .sidenav {
padding-top: 15px;
}
 .sidenav a {
font-size: 18px;
}
}
