*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.wrapper{
    position:relative;
    max-width:700px;
    height:67px;
    line-height:70px;
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.wrapper .nav-links{
    display:inline-flex;
    width:auto;
    height:67px;
    float:right;
}
.nav-links li {
    list-style:none;
}
.nav-links li a {/*************************/
    color:#333;
    text-decoration: none;
    letter-spacing:-0.5px;
    font-size:15px;
    font-weight:500;
    padding:5px 10px;
    border-radius:5px;
    transition: all 0.3s ease;
    margin:0 10px;
}
/*.nav-links li a:hover{
  background: #3A3B3C;
}*/
.nav-links .mobile-item{
  display: none;
}
.nav-links li:hover .drop-menu,
.nav-links li:hover .mega-box{
  transition: all 0.3s ease;
  top: 67px;
  opacity: 1;
  visibility: visible;
}
.drop-menu li a {
  width:100%;
  display:block;
  padding:0 0 0 10px;
  font-size:13px;
  font-weight:400;
  border-radius:5px;
}
/*.drop-menu li a:hover {
    padding-left:10px;
}*/
.mega-box{
  position: absolute;
  left: 0;
  width: 100%;
  top: 85px;
  opacity: 0;
  visibility: hidden;
}
.mega-box .content{/********************************/
  background:#eee;
  padding:25px 20px;
  display:flex;
  width:100%;
  justify-content:space-between;
  box-shadow:0 6px 10px rgba(0,0,0,0.15);
}
.mega-box .content .row{
  width: calc(100% - 1px);
  line-height:25px;
}
.content .row .header_nav {
  color:#333;
  font-size:13px;
  text-transform: uppercase;
  margin-left:10px;
  font-weight:700;
}
.content .row .mega-links {
  margin-top:20px;
  margin-right:30px;
}
.row .mega-links li {
  padding:0;
}
.row .mega-links li a {/*************************/
  padding:0;
  color:#555;
  font-size:13px;
  display:block;
}
.row .mega-links li a:hover{/********************/
    background:#d3d3d3;
    color:#333;
    padding-left:10px;
}
.wrapper .btn{
  color:#333;
  font-size:20px;
  cursor:pointer;
  display:none;
}
.wrapper .btn.close-btn{
  position:absolute;
  right:30px;
  top:10px;
}


/**********************/
/****NAV RESPONSIVE****/
/**********************/
@media screen and (max-width: 970px) {
    .wrapper .btn {
        display: block;
    }
    .wrapper .btn.close-btn {
      color:#333;
      width: 30px;
      height: 30px;
      border-radius: 50px;
      background:#ffd500;
      text-align:center;
      line-height:32px;
    }
    .wrapper .nav-links { /*Ventana Nav Responsive*/
        position: fixed;
        height: 100vh;
        width: 100%;
        max-width: 350px;
        top: 0;
        left: -100%;
        background: #eee;
        display:block;
        padding: 50px 10px;
        line-height: 18px;
        overflow-y: auto;
        box-shadow: 0px 15px 15px rgba(0,0,0,0.18);
        transition: all 0.3s ease;
    }
    ::-webkit-scrollbar {
        width: 10px;
    }
    ::-webkit-scrollbar-track {
        background: #333;
    }
    ::-webkit-scrollbar-thumb {
        background: #444;
    }
    #menu-btn:checked ~ .nav-links{
        left: 0%;
    }
    #menu-btn:checked ~ .btn.menu-btn{
        display: none;
    }
    #close-btn:checked ~ .btn.menu-btn{
        display: block;
    }
    .nav-links li{
        margin: 15px 10px;
    }
    .nav-links li a{
        padding: 0 20px;
        display: block;
        font-size: 15px;
        color: #333;
        font-weight:500;
    }
    .nav-links .drop-menu{
        position: static;
        opacity: 1;
        top: 65px;
        visibility: visible;
        padding-left: 20px;
        width: 100%;
        max-height: 0px;
        overflow: hidden;
        box-shadow: none;
        transition: all 0.3s ease;
    }
    #showDrop:checked ~ .drop-menu,
    #showMega:checked ~ .mega-box{
        max-height: 100%;
    }
    .nav-links .desktop-item{
        display: none;
    }
    .nav-links .mobile-item{
        display: block;
        color: #333;
        font-size: 15px;
        font-weight: 500;
        padding-left: 30px;
        cursor: pointer;
        border-radius: 5px;
        transition: all 0.3s ease;
    }
    .drop-menu li{
        margin: 0;
    }
    .drop-menu li a{
        border-radius: 5px;
        font-size: 18px;
    }
    .mega-box{
        background:;/**************************/
        position: static;
        top:30px;
        opacity: 1;
        visibility: visible;
        padding: 0 20px;
        max-height: 0px;
        overflow:hidden;
        transition: all 0.3s ease;
    }
    .mega-box .content{
        background:;
        box-shadow: none;
        flex-direction: column;
        padding: 20px 20px 0 20px;
    }
    .mega-box .content .row{
        width: 100%;
        margin-bottom:15px;
    }
    .mega-box .content .row:nth-child(1),
    .mega-box .content .row:nth-child(2){
        border-top: 0px;
    }
    .content .row .mega-links{
        border-left: 0px;
    }
    .row .mega-links li{
        margin: 0;
    }
    .content .row .header_nav{
        font-size: 19px;
        color: #000;
        font-size: 13px;
        text-transform: uppercase;
        font-weight: 500;
        margin-top: 25px;
        line-height: 1px;
    }
}
nav input{
  display: none;
}