div.navbar{
	position: fixed;
	z-index: 1000;
	top:calc( 100% - 6rem);
	right:2rem;
    height: 4rem;
    width: 4rem;
	transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
	border-radius: 2rem;
	/* overflow: hidden; */
}
div.navbar.open, div.navbar.hover {
	width: calc(100% - 4rem);
}
body.navbarTop .navbar{
	top: 2rem;
}
div.navbar-toggler {
	position: absolute;
	top:0;
	right:0;
    width: 4rem;
    height: 4rem;
    padding: 0.25rem 0.75rem;
    font-size: 1.25rem;
    border: calc(1% / .60) solid transparent;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background-color: var(--highlight);
	box-shadow: 0.3rem 0.3rem 2rem rgba(0,0,0,0.4);
}


div.navbar-toggler .hamburger span {
    position: absolute;
    right: calc(14% / .60);
    width: calc(32% / .60);
    height: calc(3% / .60);
    border-right: calc(5% / .60);
    background-color: #ffffff;
}

div.navbar-toggler .hamburger span:nth-child(1) {
    top: calc(21% / .60);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

div.navbar-toggler .hamburger span:nth-child(2) {
    top: calc(29% / .60);
    width: calc(25% / .60);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

div.navbar-toggler .hamburger span:nth-child(3) {
    width: calc(25% / .60);
    top: calc(29% / .60);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

div.navbar-toggler .hamburger span:nth-child(4) {
    top: calc(37% / .60);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

div.navbar.hover div.navbar-toggler {
	background-color: rgba(255, 115, 0, 0.86);
}

div.navbar.hover div.navbar-toggler .hamburger span:nth-child(1) {
	width: calc(25% / .60);
}

div.navbar.hover div.navbar-toggler .hamburger span:nth-child(2) {
	width: calc(13% / .60);
}

div.navbar.hover div.navbar-toggler .hamburger span:nth-child(3) {
	width: calc(13% / .60);
}

div.navbar.hover div.navbar-toggler .hamburger span:nth-child(4) {
	width: calc(22% / .60);
}

div.navbar.open .hamburger span:nth-child(1),
div.navbar.open .hamburger span:nth-child(4)
{
    opacity: 0;
    transform: rotate(45deg);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
div.navbar.open .hamburger span:nth-child(2) {
    width: calc(32% / .60) !important;
    transform: rotate(45deg);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
div.navbar.open .hamburger span:nth-child(3) {
    width: calc(32% / .60) !important;
    transform: rotate(-45deg);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

ul.navbar-items{
	overflow: hidden;
	padding:0 4rem 0 2rem;
	border-radius: 2rem;
	background: white;
	box-shadow: 0.3rem 0.3rem 2rem rgba(0,0,0,0.4);

	opacity:0;
	list-style-type: none;
	display: flex;
    height: 4rem;
	li {
		display: flex;
	}
	a{
		display: block;
		padding: .3rem 1rem;
		text-decoration: none;
		align-self: center;
		white-space: nowrap;
	}

}
div.navbar.open ul.navbar-items,
div.navbar.hover ul.navbar-items
{
	opacity:1;
}