/* CSS Document */

/* colors */
.menu-toggle span{background-color: rgba(255,255,255,1.00);} /* Main Bar color */
.menu-toggle:hover span{background-color: rgba(142,142,142,1.00);} /* Main Bar color on hover */
.mobile-menu{background-color: rgba(51,51,51,1.00); color: rgba(255,255,255,1.00);} /* Main menu background */
.mobile-menu a {color: rgba(223,223,223,1.00);} /* Main main menu links */
.close-menu {color: rgba(255,255,255,1.00);} /* Main menu close button */
.menu_sub{background-color: rgba(88,88,88,1.00);} /* Sub menu background */
.menu_sub a {color: rgba(255,255,255,1.00);} /* Sub menu links */

/* Mobile menu */
.mobile-menu {
position: fixed;
top: 0;
left: 0;
height: 100vh; /* Fix overflow issue */
width: 250px;
transform: translateX(-100%);
transition: transform 0.3s ease;
padding-top: 60px;
z-index: 999;}

.mobile-menu.active {
transform: translateX(0);} /* Slides in */

/* Menu items */
.mobile-menu ul {list-style: none; padding: 0;}
.mobile-menu li {padding: 15px;}
.mobile-menu a {text-decoration: none;}

/* Menu button fixed to the left */
.menu-toggle {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 22px;
background: none;
border: none;
cursor: pointer; /* Pointer cursor */
padding: 0;
position: absolute;  /* Take it out of normal flow */
left: 1rem;          /* Anchor to the left */
top: 50%;            /* Vertically center */
transform: translateY(-50%);}

.menu-toggle span{
display: block;
height: 5px;
border-radius: 2px;}

.menu_sub{
display: none;
list-style: none;
padding-left: 20px;}

.menu_sub li {padding: 10px;}
.menu_sub a {text-decoration: none;}

.menu_sub_arrow {
display: inline-block;
margin-right: 8px;
transition: transform 0.3s ease;}

.menu_sub_arrow.open {
transform: rotate(90deg);} /* Rotate down */


.close-menu {
position: absolute;
top: 15px;
right: 15px;
background: none;
border: none;
font-size: 28px;
cursor: pointer;}