.menu-toggle {
display:none;
}

@media screen and (max-width: 767px) {

.main-navigation {
display: block;
}

.main-navigation ul {
display: none;
list-style: none;
margin: 0 auto;
padding-left: 0;
position: relative;
}

.menu-toggle,
.main-navigation.toggled ul {
display:block;
}

button.menu-toggle {
background-color: #000;
color: #fff;
border: 1px solid #000;
text-transform: uppercase;
padding: 5px 10px;
margin: 0;
width: 40px;
font-size: 1.2rem;
overflow: hidden;
position: absolute;
top: 20px;
right: 20px;
}

/*.menu-toggle:before {
content:"\2630";
margin-right:20px;
}*/


#menu-principal a {
text-decoration:none;
font-size: 1rem;
padding: 10px 5px 10px 0;
display: block;
color: var(--bodytext);
border-bottom: 1px solid #dedcd3;
}

#menu-principal a:hover {
background-color: var(--bgpage);
}

#menu-principal > li > a {
font-weight: 700;
text-transform: uppercase;
}

#menu-principal li li a, #menu-principal li li a:visited {
font-weight: 400;
}

#menu-principal li li a:before {
content: "- ";
}

#menu-principal li li li a:before {
content: "-- ";
}

#menu-principal li {
font-size: 1.0625rem;
line-height:1.3;
position: relative;
}

.open {
position: absolute;
right: 10px;
top: 11px;
color: #fff;
font-weight: 500;
border-radius: 50%;
width: 24px;
height: 24px;
text-align: center;
line-height: 24px;
}

.search-menu {
padding: 10px 5px 30px 30px;
}

}


/* PPP - HAMBURGUER MENU */

.menu-toggle {
display:none;
}   


@media screen and (max-width: 768px) {

.main-navigation,
.menu-toggle,
.main-navigation.toggled ul {
display:block;
}

.main-navigation ul {
display:none;
list-style:none;
margin:0 auto;
padding-left:0;
position:relative;
}

button.menu-toggle {

background-color:var(--bodytext);
color:#fff;
border:none;
text-transform:uppercase;
padding:10px;
margin:0;
width:100%;
font-size:1rem;
text-indent:-20px;
border-radius:0;

font-family: sans-serif;
background-color: #000;
color: #fff;
border: 1px solid #000;
text-transform: uppercase;
padding: 5px 10px;
margin: 0;
width: 40px;
font-size: 1.2rem;
overflow: hidden;
position: absolute;
top: 20px;
right: 20px;

}

/*.menu-toggle:before {
content:"\2630";
margin-right:20px;
}*/

#menu-principal a {
text-decoration:none;
font-size:1rem;
padding:10px 5px 10px 30px;
display:block;
color:var(--bodytext);
border-bottom:1px solid #dedcd3;
}


#menu-principal a:hover {
background-color:var(--bgpage);
}

#menu-principal > li > a {
font-weight:700;
text-transform:uppercase;
}

#menu-principal li li a,#menu-principal li li a:visited {
font-weight:400;
}

#menu-principal li li a:before {
content:"- ";
}

#menu-principal li li li a:before {
content:"-- ";
}

#menu-principal li {
font-size:1.0625rem;
line-height:1.3;
position:relative;
}

.open {
position:absolute;
right:10px;
top:11px;
color:#fff;
font-weight:500;
border-radius:50%;
width:24px;
height:24px;
text-align:center;
line-height:24px;
}

.search-menu {
padding:10px 5px 30px 30px;
}
}

/* VERSIONS GRANS */

@media screen and (min-width: 768px) {

.menu-toggle,
.main-navigation li.mobil,
.main-navigation li.search-menu  {
display:none;
}

#menu-principal {
display:flex;
justify-content:space-between;
position:relative;
margin:0;
padding-left:0;
}

.main-navigation li {
margin:0 0 0 1.4em;
padding-top:0;
list-style-type:none;
line-height:1;
}

.main-navigation li:first-of-type {
margin-left:0;
}

.main-navigation a {
text-decoration:none;
color:var(--bodytext);
}

.main-navigation a:hover {
color:var(--textmarro);
}

.main-navigation ul li a {
display:block;
font-size:1rem;
padding:5px 0;
}

.main-navigation ul ul {
float:left;
position:absolute;
top:27px;
left:-999em;
z-index:99999;
text-transform:none;
background-color:var(--bgpage);
box-shadow:0 5px 6px rgba(0,0,0,0.2);
text-align:left;
margin-left:-15px;
padding-left:0;
}

.main-navigation ul ul ul {
left:-999em;
top:0;
}

.main-navigation ul ul ul a {
border-left:1px solid var(--textmarro);
}

.main-navigation ul li ul a {
padding:1em;
}

.main-navigation ul li ul a:hover {
color: var(--textmarro);
background-color: var(--bgbeige);
}

.main-navigation .sub-menu .menu-item-has-children>a {
padding-right:30px;
}

.main-navigation ul ul li {
display:block;
padding-left:0;
margin-left:0;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
left:auto;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus>ul {
left:100%;
}

#menu-principal > .current_page_item > a,
#menu-principal > .current-menu-item > a,
#menu-principal > .current_page_ancestor > a,
#menu-principal > .current-menu-ancestor > a {
color:var(--verd);
}
}