/*******
Desc
********/
ul{list-style: none;}
.menu-page{width: 100%;background-color: #333;}
.navig{width:70%;margin:0 auto;background-color: #333;overflow: hidden;transition: 0.3s;}
.menu-page ul li {float: left;}
.menu-page ul li a {display: block;color: white;text-align: center;padding: 14px 16px;text-decoration: none;}
.menu-page ul li a:hover:not(.active) {background-color: #111;}
.menu-page .active {background-color: #69c91e;}
.menu-page.menu-icon{display: none;}
.menu-page.left-side {position: relative;display: table-cell;vertical-align: middle;font-size: 0;padding: .7rem;}
.menu-page.right-side{position: relative;display: table-cell;vertical-align: middle;font-size: 0;padding: .7rem;text-align: right;}
.nav-open{background-color: #333;border-radius: 5px;margin: 1px;border: none;cursor: pointer;display: none;}
.nav-open div{width: 35px;height: 5px;background-color: white;margin: 6px 0;}
.nav-close{font-size: 30px;color: white;font-weight: 700;cursor: pointer;display: none;}
/*******
mobile options
******/
@media screen and (max-width: 1024px) {
    .nav-open,.nav-close{display: block}
    .navig{width:0px;position:absolute;height: 100%;left:0;top:0px;padding:0px;}
    .menu-page ul li {float: none;margin: 10px}
}
@media (min-width: 680px) and (max-width: 1024px){
    html {font-size: 14px;}
}
@media (max-width: 680px){
    html {font-size: 12px;}
}