/* MENU */
#nav { font-weight: 700; position: absolute; top: 25%; left: 50%; margin: 15px 0px 0px 128px; }
#nav > a { display: none; }
#nav li { position: relative; }
#nav li a { color: #134679; display: block; }
#nav li a:active { background-color: #1499d7 !important; }

/* first level */
#nav > ul { height: 50px; background-color: #fff; list-style: none; margin: 0; padding: 0; }
#nav:target > ul { display: block; }
#nav > ul > li { width: 25%; height: 100%; float: left; }
#nav > ul > li > a { height: 100%; font-size: 14px; line-height: 50px; text-align: center; text-transform: uppercase; }
#nav > ul > li > a:hover { text-decoration: none; }
#nav > ul > li:hover > a, #nav > ul:not( :hover ) > li.active > a { background-image: none !important; background-color: #1499d7 !important; text-decoration: none; color: #fff; }

/* second level */
#nav li ul { background-color: #1499d7; display: none; position: absolute; top: 100%; list-style: none; margin: 0; padding: 0; }
#nav li:hover ul { display: block; left: 0; right: 0; }
#nav li:not( :first-child ):hover ul { left: -1px; }
#nav li ul a { padding: 0; text-transform: uppercase; color: #fff; }
#nav li ul li a:hover, #nav li ul:not( :hover ) li.active a { background-color: #1499d7; text-decoration: none; }
#nav li ul.level2 li a:hover, #nav li ul.level2:not( :hover ) li.active a { background-color: #0567a9 !important; }
#nav li:hover ul.level3 { display: none; }
#nav li ul.level2 li:hover ul.level3 { display: block; }
#nav li ul a.selected { background-color: #0567A9 !important;}

#nav li ul a.dobletext{ line-height: 12px; padding: 13px 10px; }

@media ( min-width: 767px ) {
    #nav { max-width: 765px; width: 100%; font-weight: 700; position: relative; top: 0; left: 0; float: left; }
    #nav li a.round-leftTop { border-radius: 10px 0 0; }
    #nav > ul { height: 50px; border-radius: 10px 0 0; }
    #nav li ul { width: 643%; height: 50px; }
    #nav li ul a { font-size: 10px;}
    #nav > ul > li { width: 16.66%; height: 100%; float: left; }
    #nav li ul.level2 li { float: left; width: 8.6%; }
    #nav li ul.level2 li.medium { width: 9.6%; }
    #nav li ul.level2 li.large { width: 11%; }
    #nav li .level2.level-hosteleria li { width: 16.66666666666667%; }
    #nav li ul.level2.level-hosteleria { left: -200%; }
    #nav li .level2.level-heladeria li { width: 33.33333333333333%; }
    #nav li ul.level2.level-heladeria { left: -300%; }
    #nav li .level2.level-kiosco li { width: 50%; }
    #nav li ul.level2.level-kiosco { left: -400%; }
    #nav li ul a { line-height: 50px; text-align: center; }
    #nav li ul.level2 li ul { background-color: #0567a9; position: absolute; top: 100%; padding: 0; width: 1162%; height: 50px; }
    #nav li ul.level2 li.medium ul { width: 1040%; }
    #nav li ul.level2 li.large ul { width: 908%; }
    #nav li ul.level2 li ul.level-llevar { left: -90%; }
    #nav li ul.level2 li ul.level-nescafe { left: -77.5%; }
    #nav li ul.level2 li ul.level-yogures { left: -255%; }
    #nav li ul.level2 li ul.level-postresh { left: -204%; }
    #nav li ul.level2 li ul.level-lalechera { left: -339%; }
    #nav li ul.level2 li ul.level-agdc {left: -393%;}
    #nav li ul.level2 li ul.level-pasteleria { left: -551%; }
    #nav li ul.level2 li ul.level-toppings { left: -651%; }
    #nav li ul.level2 li ul.level-postresm { left: -672%; }
    #nav li ul.level2 li ul.level-bolleria { left: -862%; }
    #nav li ul.level2 li ul.level-cocina { left: -962%; }
    #nav li ul.level2 li ul li { float: left; height: 100%; width: 25%; }
    #nav li ul.level2 li ul li.three-tabs { width: 33.33333333333333%; }
    #nav li ul.level2 li ul li.two-tabs { width: 50%; }
    #nav li ul.level2 li ul li.one-tab { width: 100%; }
    #nav > ul > li:not( :last-child ) > a { background: url('../images/separador-menu.gif') no-repeat right center; }
    #nav li ul.level2 li:not( :last-child ) > a, #nav li ul.level2 li ul li:not( :last-child ) > a { background: url('../images/separador-submenu.gif') no-repeat right center; }
    #nav li ul.level2 li a:hover { background-image: none; }
    #nav li ul.level2 li:not( :last-child ) > a.dobletext { background-position: right 20px; }
}
@media (min-width: 992px) {
    #nav li ul { width: 640%; }
    #nav li ul a { font-size: 12px;font-size: 11px\9;}
}
@media ( min-width: 1280px ) {
    #nav { max-width: 875px !important; }
    #nav li ul a.dobletext-cocina { padding: 19px 0!important;}
    #nav li ul { width: 635%; }    
}
@media (min-width: 768px) and (max-width: 992px) {
    #nav li ul a { font-size: 10px; }
}
@media (max-width: 992px ) {
    #nav { width: 75%; position: static; }
    #nav > ul > li > a { font-size: 12px; }
}

@media only screen and (max-width : 1281px) 
{
#nav li ul a.dobletext-md{ line-height: 12px; padding: 13px 0; }
#nav li ul a.tripletext-md{ line-height: 12px; padding: 7px 0; }
}

@media only screen and (max-width : 993px) 
{
#nav li ul a.singletext-sm{ line-height: 12px; padding: 19px 0; }
#nav li ul a.dobletext-sm{ line-height: 12px; padding: 13px 0; }
#nav li ul a.tripletext-sm{ line-height: 12px; padding: 7px 0; }
}

@media only screen and (max-width : 881px) 
{
#nav li a.dobletext-ssm{ line-height: 12px; padding: 13px 0; }
#nav li ul a.dobletext-ssm{ line-height: 12px !important; padding: 13px 0 !important; }
}

@media ( max-width: 767px ) /* 640 */ {
    html { font-size: 75%; /* 12 */ }
    #nav { position: relative; top: -65px; left: auto; width: 100%; margin: 15px 0px 0px; }
    #nav > a { width: 3.125em; /* 50 */ height: 3.125em; /* 50 */ text-align: left; text-indent: -9999px; background-color: #0366A9; position: relative; }
    #nav > a:before, #nav > a:after { position: absolute; border: 2px solid #fff; border-radius: 2px; top: 35%; left: 0; right: 25%; content: ''; }
    #nav > a:after { top: 60%; }
    #nav:not( :target ) > a:first-of-type, #nav:target > a:last-of-type { display: block; }
    /* first level */
    #nav > ul { height: auto; display: none; position: absolute; left: 0; right: 0; }
    #nav:target > ul { display: block; }
    #nav > ul > li { width: 100%; float: none; }
    #nav > ul > li > a { height: auto; text-align: left; padding: 0 0.833em; /* 20 (24) */ }
    #nav li ul a { line-height: 50px!important; }
    #nav li ul.level2 a{border-bottom:1px solid white;}
    #nav li .level2 a, #nav li ul .dobletext.tripletext, #nav li ul a.dobletext { height: auto; padding: 0 0.833em; /* 20 (24) */ line-height: 35px; }
    #nav li ul.level2 li ul { width: auto; background-color: #0567a9; padding: 0; }
    #nav ul.level3{list-style:disc;padding: 0 0 0 50px!important;color:white}
    #nav ul.level3 li a, #nav ul.level3 li a:active { border: 0 none;}
    #nav > ul > li:not( :last-child ) > a { border-right: none; border-bottom: 1px solid #1499d7; }
    #nav > ul > li:not( :last-child ) > a:hover{background-color:White!important; color: #134679;}
    #nav li ul.level2 li a:hover, #nav li ul.level2:not( :hover ) li.active a { border: 0 none !important; }
    /* second level */
    #nav li ul { position: static; padding: 0; /* 20 */ padding-top: 0; }
    #nav li ul.level2 a:hover{border-bottom:1px solid red;}
    #nav li ul a.selected {border:0 none;}
    #nav li ul a.dobletext-md, #nav li ul a.tripletext-md, #nav li ul a.singletext-sm, #nav li ul a.dobletext-sm, #nav li ul a.tripletext-sm, #nav li ul a.dobletext-ssm, #nav li a.dobletext-ssm { height: auto; padding: 0 0.833em; /* 20 (24) */ line-height: 35px; }
}