#menu-bar {
    display: none;
}



header label{
	float: right;
	font-size: 20px;
   margin: 6px 0;
   cursor: pointer;

}

.menu {
   position: absolute;
   top: 50px;
   left: 0;
   width: 100%;
   height: 100vh;
   background: #10679e;
   transition: all 0.5s;
   transform: translateX(-100%);

}

.menu a {
   display: block;
   color: #fff;
   height: 50px;
   text-decoration: none;
   padding: 15px;
   border-bottom: 1px solid rgba(255,255,255,0.5);
}

.menu ul {
   background: #328CC1;
   display: flex;
   list-style: none;

}

.menu ul ul {
   display: none;
}

.menu a:hover {
   background: rgba(255,255,255,0.3);

}

.menu a span {
   margin-left: 10px;
}

.menu ul li:hover ul {
   display: block;
   position: none;
}

#menu-bar:checked ~ .menu{

   transform: translateX(0%);

}

@media (min-width:1024px) {
   .menu {
        position: static;
        width: auto;
        height: auto;
        transform: translateX(0%);
        float: right;
        display: flex;
   }

.menu a {
        border: none;
}




header label {
        display: none;
   }

   .menu ul li:hover ul {
   display: block;
   position: absolute;
}
}

@media (max-width:768px) {


.menu ul {
   display: block;
}

.menu ul li:hover ul {
   display: none;

}

.menu a span {
   position: absolute;
   right: 5px;

}

.menu ul ul {
   background: rgba(0,0,0,0.4);

}

.menu ul ul a {
	padding: 15px 40px;

}
}