.sidebar-nav {

height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: $sidebar-background;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;

}

.sidebar-nav a {

padding: 8px;
text-decoration: none;
color: $sidebar-text-color;
font-size: 25px;
display: block;
transition: 0.3s;

}

.sidebar-table {

padding: 0 26px;

}

.sidebar-tr {

white-space: nowrap;
padding: 8px 8px 8px 32px;
text-decoration: none;
color: $primary;
font-size: 25px;
transition: 0.3s;

}

.sidebar-icon {

color: $sidebar-text-color;

}

.sidebar-td {

padding: 7px 0;

}

@media screen and (max-height: 450px) {

.sidebar-nav {
  padding-top: 15px;
}

.sidebar-nav a {
  font-size: 18px;
}

}

nav-btn {

width: 60px;
height: 35px;
position: fixed;
right: 25px;
top: 25px;
margin: 0;
z-index: 2;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
cursor: pointer;

}

nav-btn span {

display: block;
position: absolute;
height: 5px;
width: 100%;
background-color: $primary;
border-radius: 5px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: 0.25s ease-in-out;
-moz-transition: 0.25s ease-in-out;
-o-transition: 0.25s ease-in-out;
transition: 0.25s ease-in-out;

}

nav-btn span:nth-child(1) {

top: 0px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;

}

nav-btn span:nth-child(2) {

top: 15px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;

}

nav-btn span:nth-child(3) {

top: 30px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;

}

nav-btn.open span {

background-color: $primary;

}

nav-btn.open span:nth-child(1) {

-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
top: -3px;
left: 8px;

}

nav-btn.open span:nth-child(2) {

width: 0%;
opacity: 0;

}

nav-btn.open span:nth-child(3) {

-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 39px;
left: 8px;

}

@media (prefers-reduced-motion: reduce) {

#nav-btn, #nav-btn span, .sidebar-nav {
  -webkit-transition: 0;
  -moz-transition: 0;
  -o-transition: 0;
  transition: 0;
}

}