.toggle{
	position: fixed;
   display: flex;
   align-items: center;
   justify-content: center;
	height: 40px;
	width: 40px;
   right: 10px;
   top: 10px;
	z-index: 55;
}

.toggle span{
	position: absolute;
	height: 4px;
	width: 30px;
	border-radius: 50px;
	background: var(--secondary);
	transition: .2s;
	/* box-shadow: 0 2px 2px rgba(0,0,0,0.2) */
}

/* HB knop animation */
.toggle span:nth-child(1){
	transform: translateY(-10px); 
	opacity: 1;
	transition: .2s;
}
.toggle span:nth-child(4){
	transform: translateY(10px); 
	transition: .2s;
}
.toggle.active span:nth-child(1){
	/* transform: translateY(-35px);  */
	opacity: 0;
}
.toggle.active span:nth-child(4){
	/* transform: translateY(35px); */
	opacity: 0;
}
.toggle.active span:nth-child(2){
	transform: rotate(45deg);
	transition-delay: .2s;
}
.toggle.active span:nth-child(3){
	transform: rotate(-45deg); 
	transition-delay: .2s;
}

/* panel animation */
.menupanel{
   background: var(--light-grad);
   width: 12rem;
   height: 25rem;
   padding: 4rem 1rem;
	position: fixed;
	transition: 0.5s;
	transform: scaleY(0);
	transition-delay: .2s;
   z-index: 9;
}

.menupanel{
	top: 0px;
	right: 10px;
   display: flex;
   flex-direction: column;
   align-items: flex-end;
}

.menupanel a{
   font-weight: 600;
}
.menupanel a:hover{
   color: var(--secondary);
}

.open{
	opacity: 1;
	transform: scale(1);
}