/* Contains only the CSS for the burger menu */

.burgermenu{
	float: right;
	margin-right: 25px;
	cursor: pointer;
}

.burgermenuframe{
	position: absolute;
	display: none;
	width: 200px;
	background-color: var(--lowlight-color);
	z-index: 999;
	margin-left: -165px; /*Allows for the 35px width of the burger and 200px width of the menu*/
	margin-top: 10px;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 5px;
	padding-right: 5px;
}

.burgermenuframe a{
	width: 100%;
	height: 30px;
	background-color: var(--main-bg-color);
	color: #fff;
	font-size: medium;
	float: left;
	padding-left: 10px;
	padding-top: 5px;
	margin-bottom: 2px;
	text-decoration: none;
}

.burgermenuframe a:hover{
	background-color: var(--highlight-color);
	color: #fff;
	text-decoration: none;
}

.burgerbar1{
	width: 35px;
	height: 4px;
	margin-top: 20px;
	margin-bottom: auto;
	background-color: #000;
	transition-duration: 1s;
	border-radius: 2px;
}

.burgerbar2{
	width: 35px;
	height: 4px;
	margin-top: 6px;
	margin-bottom: auto;
	background-color: #000;
	transform: rotate(-720deg);
	transition-duration: 1s;
	border-radius: 2px;
}

.burgerbar3{
	width: 35px;
	height: 4px;
	margin-top: 6px;
	margin-bottom: auto;
	background-color: #000;
	transition-duration: 1s;
	border-radius: 2px;
}

.burgermenu.change .burgerbar1{
	transform: translateX(60px);
	transition-duration: 1s;
	opacity: 0%;
}

.burgermenu.change .burgerbar2{
	transform: rotate(720deg);
	transition-duration: 1s;
}

.burgermenu.change .burgerbar3{
	transform: translateX(-60px);
	transition-duration: 1s;
	opacity: 0%;
}