nav.principal{
  background-color: #e7244c;
  float: left;
  height: 40px;
  margin: 33px 0 0;
  padding: 0 10px;
  position: relative;
  width: 1024px;
}
  nav.principal:before{
    background-image: url("images/nav-principal_before-after.png");
    background-position: left top;
    content: '';
    height: 52px;
    left: -10px;
    position: absolute;
    top: 0;
    width: 10px;
  }
  nav.principal:after{
    background-image: url("images/nav-principal_before-after.png");
    background-position: right top;
    content: '';
    height: 52px;
    right: -10px;
    position: absolute;
    top: 0;
    width: 10px;
  }
  nav.principal .menu-movil{display: none;}
  nav.principal > ul{background-color: orange;}
    nav.principal > ul > li{float: left;}
      nav.principal > ul > li a{
        background-color: transparent;
        color: #fff;
        float: left;
        font-family: "Open Sans Condensed",sans-serif;
        font-size: .9em;
        font-weight: 700;
        line-height: 1.48em;
        padding: 10px 27px 9px;
        position: relative;
        text-shadow: 1px 1px 0px transparent;
        text-transform: uppercase;
      }
        nav.principal > ul > li a:before{
          background-color: #fff;
          bottom: 0;
          content: '';
          height: 2px;
          left: 50%;
          position: absolute;
          transition: .15s ease all ; -moz-transition: .15s ease all; -webkit-transition: .15s ease all; -o-transition: .15s ease all;
          width: 0%;
        }
        nav.principal > ul > li a:hover{background-color: #d3153b; }
          nav.principal > ul > li a:hover:before{left: 0%; width: 100%;}
        
        /* active */
        nav.principal > ul > li.active a{color: #fff; text-shadow: none;}
          nav.principal > ul > li.active a:before{left: 0%; width: 100%;}
  
        /* Menu cascada */   
		nav.principal ul ul{
		    background: #e7244c;
		    border: 1px solid #d3153b;
		    border-top: none;
		    display: none; overflow: hidden; /* OPCIONAL */
		    margin: 40px 0 0 -1px !important;
		    padding: 0 0 0;
		    position:absolute;
		  	border-bottom-left-radius:4px; border-bottom-right-radius:4px;
		  	-moz-border-radius-bottomleft:4px; -moz-border-radius-bottomright:4px;
		  	-webkit-border-bottom-left-radius:4px; -webkit-border-bottom-right-radius:4px;
		  	z-index: 9999999 !important;
		  	min-width: 181px;
		  }
		  
		  nav.principal ul ul li a{
		    border-bottom: 1px solid #d3153b;
		    color: #FFFFFF;
		    display: block;
		    /* float: left;  OPCIONAL */
		    height: 100%;
		    opacity: 1;
		    margin: 0 0 0;
		    padding: 8px 30px 8px;
		    text-align: left;
		    text-decoration: none;
		    text-shadow: none;
		    min-width: 100%; /* OPCIONAL 180px */
		    max-width: 270px;
		  }
		  
		    nav.principal ul ul a:hover { 
		      background: #d3153b;
		    }
		    nav.principal ul ul li:last-child a{
		      border-bottom: none;
		    }
  
/* menu-movil */
.menu-movil{
  float: right;
  height: 40px;
}
  .menu-movil .btn-menu{
    border: 2px solid #fff;
    border-radius: 4px;
    float: left;
    height: 29px;
    margin: 5px 0 0 10px;
    padding: 2px 0 0;
    width: 40px;
  }
    .menu-movil .btn-menu span{
      background-color: #fff;
      border-radius: 1px;
      float: left;
      height: 3px;
      margin: 3px 4px 0;
      width: 28px;
    }
  .menu-movil .text-menu{
    color: #fff;
    float: left;
    font-family: "Open Sans Condensed",sans-serif;
    font-size: .9em;
    font-weight: 700;
    line-height: 1.48em;
    margin: 10px 0 0;
    text-transform: uppercase;
  }