/* CSS CSS for Hamburger without Checkbox and with Javascript */
/* ---------------------------------------------------------- */
#sideMenu, #toggle-menu {/*{font-size:1.60rem;}*/font-size:2.0rem;}
#top nav li.side a { display:block; }
#top nav li:hover { background:rgba(255,255,255,0.40); color:#fff; }
#top nav, #toggle-menu { position: fixed; }
#top nav ul {padding:5.0rem 0 0 0;height:100%;/*overflow-y:scroll;*/}

/*sideMenu and Hamburger*/
#divider {border-top: 1px solid #aaa;/* height: 1px; *//* overflow: hidden; */}
#top nav li.dividerTop {border-top: 1px solid #aaa;/* height: 1px; *//* overflow: hidden; */}
#top nav li.dividerBottom {border-bottom: 1px solid #aaa;/* height: 1px; *//* overflow: hidden; */}
.read-but-invisible{position:absolute;clip:rect(1px, 1px, 1px, 1px);padding:0;border:0;height:1px;width:1px;overflow:hidden;}

/* begin: side menu scroll bar*/
.force-overflow {min-height: 50px;}
#sideMenuList::-webkit-scrollbar-track {
	box-shadow: inset 0px 0 4px rgb(0, 0, 0);
	border-radius: 10px;
	/* background-color: rgba(160,160,160,0.8); */
}
/*#panoramaList::-webkit-scrollbar {width: 12px;background-color: #F5F5F5;}*/
#sideMenuList::-webkit-scrollbar {border-radius: 0 10px 10px 0;width: 1.2rem;background-color: rgba(97, 97, 97, 0.26);}
#sideMenuList::-webkit-scrollbar-thumb {border-radius: 10px;box-shadow: inset 0 0 5px #fafafafa;/* background-color: rgba(158, 158, 158, 0.07); */}
/* end: side menu scroll bar*/

#top nav {
	/*padding-left: 1.5rem;*/
	max-width: 80%;
	height: 100%;
	top: 0;
	left: -100%;
	bottom: 0;
	transition: all 0.3s ease-in-out;
	color: #eee;
	background-color: rgba(0, 0, 0, 0.65);
	/*box-shadow: 0.5rem 0.5rem 1.8rem #000;*/
	border-radius: 0 5px 5px 0;
	z-index:101;
}

#top nav li.side {
	padding: 0.6rem 0.5rem;
	font-weight: 400;
	font-size: 1.4rem;
	width: 100%;
	text-align: center;
	cursor: pointer;
	text-decoration: none;
}
/*---Position the Hamburger---*/
#toggle-menu {
	top: 0;
	left: 0;
	padding: 2.0rem 4.0rem 2.8rem 1.5rem;
	cursor: pointer;
	z-index: 110;
}

#toggle-menu span {display: inline-block;}

/*---The Hamburger---*/
#toggle-menu span, 
#toggle-menu span:before, 
#toggle-menu span:after {
	width: 3.0rem;
	height: 0.5rem;
	border-radius: 2.5rem;
	background: #db0606;
	position: absolute;
	display: block;
	content: '';
	transition: all 0.1s 0.2s ease, transform 0.2s ease;
}

#toggle-menu span:before {top: -0.9rem; }
#toggle-menu span:after {bottom: -0.9rem; }

#top nav.revealed {left: 0%;}

/*---transforming the Hamburger---------*/
#top nav.revealed ~ #toggle-menu span, 
#top nav.revealed ~ #toggle-menu span:before, 
#top nav.revealed ~ #toggle-menu span:after {
	background-color: #ccc;
	margin:2.0rem 0;
	width: 2.0rem;	/*xx*/
	height: 0.35rem;
	border-radius: 2.5rem;
}

#top nav.revealed ~ #toggle-menu span {
	transition:all 0.1s 0s ease;
	background-color: transparent !important;
}

#top nav.revealed ~ #toggle-menu span:before ,
#top nav.revealed ~ #toggle-menu span:after {
	transition:all 0.1s ease, transform 0.1s 0.2s ease; 
	background-color: #eee; /*#db0606;*/ /*#ccc;*/
	width: 3.6rem;
	height: 0.35rem;
	border-radius: 2.5rem;
}

#top nav.revealed ~ #toggle-menu span:before {
	margin:-0.8rem 0;
	transform: rotate3d(0,0,1,45deg);
}

#top nav.revealed ~ #toggle-menu span:after {
	margin:2.6rem 0;
	transform: rotate3d(0,0,1,-45deg);
}
/*---end: Hamburger----*/