body#portada ul.menu li:nth-child(1) a {
  background: white;
  color: #37270e;
}

body#portada ul.menu li:nth-child(1) a,
body#armarios ul.menu li:nth-child(2) a,
body#cocinas ul.menu li:nth-child(3) a,
body#escaleras ul.menu li:nth-child(4) a,
body#espacios ul.menu li:nth-child(5) a,
body#librerias ul.menu li:nth-child(6) a,
body#muebles ul.menu li:nth-child(7) a,
body#puertas ul.menu li:nth-child(8) a,
body#contacto ul.menu li:nth-child(9) a {
  background: white;
  color: #37270e;
}

body,
html {
height: 100% ;

/* correct bug for chrome display on codepen ? */
}
/* colors mixins and all the good stuff */
nav {
display: block;

}


.right {
float: right;
margin-left: 1em;
}
/* ----------------------------- */
/* == Menu */
/* ----------------------------- */

.menu{
text-align:left; color:#FFFFFF;

}
.menu-wrapper {
position: relative;
z-index: 10;
font: 11px/16px 'glacial_indifferenceregular',serif;
-webkit-font-smoothing:antialiased;
-moz-font-feature-settings:"kern=1";
-ms-font-feature-settings:"kern" 1;
-webkit-text-size-adjust:100%;
padding-top: 2px;
padding-bottom: 2px;
background: #592a20;
color: #fff;
width:100%;
margin:0 auto;
text-align:left;
margin:  2% 0;
/* the hidden link for RWD nav */
/* the rest of the menu lvl 1 */
/* current links */
/* submenu ! */
/* unhide the 2nd level */
}
.menu-wrapper .menu {
margin: 0;
padding-left: 0;
list-style: none;
text-align: center;

}
.menu-wrapper .menu > li {
position: relative;
padding: 0.2em  0;
display: inline-block;

}
.menu-wrapper ul.menu,
.menu-wrapper a.menu-link {

margin-top:0.5%;

}
.menu-wrapper a.menu-link {
display: none;
padding: 0.7em  0;
background: #592a20;
color:#FFFFFF;
}
.menu-wrapper a {
display: block;
position: relative;
padding: 0 0.2em;
margin: 0 0.2em;
color: #fff;
text-decoration: none;
border-bottom: 1px solid transparent;
font: 13px/18px 'glacial_indifferenceregular',serif;
-webkit-font-smoothing:antialiased;
-moz-font-feature-settings:"kern=1";
-ms-font-feature-settings:"kern" 1;
-webkit-text-size-adjust:100%;

}

.menu-wrapper a:active {
 
background-color: #fff;
 
}
@media all and (max-width: 500px){
.menu-wrapper .menu {
margin: 0;
padding-left: 0;
list-style: none;
text-align: center;
}
.menu-wrapper a {
display: block;
position: relative;
padding: 0 0.5em;
margin: 0 0.2em;
color: #0c2543;
text-decoration: none;
border-bottom: 1px solid transparent;
font: 16px/28px 'glacial_indifferenceregular',serif;
-webkit-font-smoothing:antialiased;
-moz-font-feature-settings:"kern=1";
-ms-font-feature-settings:"kern" 1;
-webkit-text-size-adjust:100%;
background: #592a20;
color: #fff;
 
}}
.menu-wrapper a:hover {
border-bottom: 1px solid rgba(255, 255, 255, 0.9);
transition: all 0.5s;
background-color: white;
color:red;
 
}
.menu-wrapper .menu > .current-menu-item > a,
.menu-wrapper .menu > .current-menu-ancestor > a {
position: relative;
z-index: 12;
background: #f5d4d4;
color: #b92120;
border-bottom: 1px solid transparent;
}
.menu-wrapper .menu > .current-menu-item > a:hover,
.menu-wrapper .menu > .current-menu-ancestor > a:hover {
background: #fffdfd;
}
.menu-wrapper .menu > .current-menu-item > a:hover:after,
.menu-wrapper .menu > .current-menu-ancestor > a:hover:after {
border-top-color: #fffdfd;
}
.menu-wrapper .menu > .current-menu-item > a:after,
.menu-wrapper .menu > .current-menu-ancestor > a:after {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-top-color: #f5d4d4;
border-width: 5px;
left: 50%;
margin-left: -5px;
}
.menu-wrapper li + li a:before {
content: "|";
position: absolute;
left: -0.5em;
color: #FFF;
opacity: 0.8;
font-family: Arial, Verdana, sans-serif;
}
.menu-wrapper .sub-menu {
box-sizing: border-box;
-moz-box-sizing: border-box;
margin: 3px 0 0 -0.5em;
padding: 0px 0 0 0;
position: absolute;
max-height: 0em;
overflow: hidden;
list-style: none outside none;
text-align: left;
text-transform: none;
}
.menu-wrapper .sub-menu li {
display: block;
background: #331d10;
margin-left: 0.7em;
margin-right: 0.7em;
color:#FFFFFF
}
.menu-wrapper .sub-menu a {
margin: 0;
white-space: nowrap;
line-height: 1.8em;
border-bottom: 1px solid #a6d0f4;
color:#fff;
}
.menu-wrapper .sub-menu a:hover {
background: #55889f;
color:black;
}
.menu-wrapper .sub-menu li:last-child {
padding-bottom: 0.26em;
}
.menu-wrapper .sub-menu li:last-child a {
border-bottom: 1px dotted #fff;
}
.menu-wrapper li:hover .sub-menu {
max-height: 30em;
transition: max-height 0.5s;
background-color:#331d10;
}
/* Responsive Menu */
@media screen and (max-width: 500px) {
.js .menu-wrapper div[role=navigation] {
overflow: hidden;
max-height: 0em;
}
.js .menu-wrapper div[role=navigation].active {
max-height: 1130em;
transition: max-height 0.5s ease-out;
}
.menu-wrapper {
/* unhide the 2nd level */
/* styling the toggle menu */
/* arrow to indicate that we have subnav*/
}
.menu-wrapper a {
display: block;
position: relative;
padding: 0 0.5em;
margin: 0 0.2em;
color: #0c2543;
text-decoration: none;
border-bottom: 1px solid transparent;
font: 16px/28px 'glacial_indifferenceregular',serif;
-webkit-font-smoothing:antialiased;
-moz-font-feature-settings:"kern=1";
-ms-font-feature-settings:"kern" 1;
-webkit-text-size-adjust:100%;
background: #a6a6a6;
color: #FFF;
}
.menu-wrapper a.menu-link {
display: block;
width: auto;
padding-right: 10px;
padding-left: 10px;
border: none;
margin: 0;
background: #331d10 no-repeat right url("../img/menu.png");
}
.menu-wrapper a.menu-link:hover {
background: #331d10 no-repeat right url("../img/menu.png");
}
.menu-wrapper a.menu-link.active {
background: #331d10 no-repeat right url("../img/menu-on.png");
}
.menu-wrapper .menu .menu {
padding-bottom: 5px;
}
.menu-wrapper .menu li {
display: block;
border: 1px solid pink;
border: none;
border-bottom: 1px solid transparent;
font: 16px/28px 'glacial_indifferenceregular',serif;
-webkit-font-smoothing:antialiased;
-moz-font-feature-settings:"kern=1";
-ms-font-feature-settings:"kern" 1;
-webkit-text-size-adjust:100%;
background: #a6a6a6;
color: #331d10;
}
.menu-wrapper .menu > li {
padding: 0px;
border: none;
}
.menu-wrapper .menu > li + li {
border-top: 1px dotted #fff;
}
.menu-wrapper .menu a {
padding: 0.5em 0;
margin: 0px;
border: none;
}
.menu-wrapper .menu a:hover {
background: #331d10;
}
.menu-wrapper .menu .rightalign {
float: none;
}
.menu-wrapper li + li a:before {
content: "";
}
.menu-wrapper li:hover .sub-menu {
max-height: 0em;
transition: none;
}
.menu-wrapper .sub-menu {
background: none;
margin-left: 0px;
margin-top: 1px;
display: block;
width: 100%;
}
.menu-wrapper .sub-menu li,
.menu-wrapper .sub-menu li a {
margin: 0;
display: block;
width: 100%;
background-color:#c0dff9;
color:#331d10;
 
}
.menu-wrapper .sub-menu a {
padding-left: 0.8em;
background: #d6ebfc;
}
.menu-wrapper .sub-menu a:hover {
background: #5ea3dd;
}
.menu-wrapper .sub-menu li {
border-bottom: 1px dashed #fff;
color:#fff
}
.menu-wrapper .sub-menu li:last-child {
padding: 0;
}
.menu-wrapper .sub-menu li:last-child a {
border: none;
}
.menu-wrapper .menu .has-subnav {
position: relative;
background-color:#331d10;
color:#FFFFFF;
}
.menu-wrapper li .sub-menu.active {
max-height: 30em;
overflow: visible;
position: relative;
z-index: 9;
transition: max-height 0.5s ease-out;
}
.menu-wrapper .toggle-link {
height: 35px;
width:  130px;
display: block;
position: absolute;
right: 0px;
z-index: 200;
font-size: 0em;
cursor: pointer;
line-height: 2;
-webkit-font-smoothing: antialiased;
background:url("../img/menubottom.png") no-repeat right transparent;

}
.menu-wrapper .toggle-link:hover {
transition: all 0.2s;
background:url("../img/menubottom.png") no-repeat right transparent;
opacity: 0.8;
height: 35px;
width:  130px;
}
.menu-wrapper .menu .has-subnav > .toggle-link:after {
position: absolute;
width: 50px;
top: 50%;
right: 0px;
}
.menu-wrapper .menu .has-subnav > .toggle-link.active:after {
content: "\f0d8";
height:auto;
}
#menu  .menu-wrapper .menu .has-subnav > .submenu  {
height:1000px;
}
}