.horizontalaccordion>ul {
    margin: 0;
    padding: 0 15px;
    list-style:none;
    position: relative;
    float: right;
}

.horizontalaccordion>ul>li {
    display:block;
    overflow: hidden;
    float:left;
    margin: 0;
    padding: 0;
    list-style:none;
        width: 45px;
    height: 430px;
}

.horizontalaccordion>ul>li>a {
    display:block;
    float:left;
    margin:00;
    padding-top: 7px;
    padding-left: 35px;
    height: 45px;
    width: 435px;
    text-decoration:none;
    text-transform:uppercase;
    color: #fff;
    font-size: 1.4em;


    /* CSS3 Transform Rotate & Translate */
    white-space:nowrap;
    -moz-transform: rotate(90.0deg) translate(-50px,0px);  /* FF3.5+ */
    -moz-transform-origin: 0 100%;
    -o-transform: rotate(90.0deg) translate(-50px,0px);  /* Opera 10.5 */
    -o-transform-origin: 0 100%;
    -webkit-transform: rotate(90.0deg) translate(-50px,0px);  /* Saf3.1+, Chrome */
    -webkit-transform-origin: 0 100%;
    transform: rotate(90.0deg) translate(-50px,0px);  /* Saf3.1+, Chrome */
    transform-origin: 0 100%;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0)
}


.horizontalaccordion:hover>ul>li:hover>a {
    /* Decorative CSS */
    color:#fff;
    /*background:#000000;*/

    /* CSS3 Gradient Effect */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0)
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=5.0)"
}


/* Custom */
.horizontalaccordion>ul>li>a.bgcolor-1 {
    color: #f5da00;
    background-color: #f2434c;
    background-image: url(../img/rect.png);
    background-repeat: no-repeat;
    background-position: right;
}
.horizontalaccordion>ul>li>a.bgcolor-2 {
    color: #441885;
    background-color: #ff7b00;
    background-image: url(../img/rect.png);
    background-repeat: no-repeat;
    background-position: right;
}
.horizontalaccordion>ul>li>a.bgcolor-3 {
    color: #00b0d3;
    background-color: #f5da00;
    background-image: url(../img/rect.png);
    background-repeat: no-repeat;
    background-position: right;
}

.horizontalaccordion>ul>li>a:hover.bgcolor-1 {
    color: #fff;
    background-image: url(../img/triang.png);
    background-repeat: no-repeat;
    background-position: right;
    cursor:pointer;
}
.horizontalaccordion>ul>li>a:hover.bgcolor-2 {
    color: #fff;
    background-image: url(../img/triang.png);
    background-repeat: no-repeat;
    background-position: right;
    cursor:pointer;
}
.horizontalaccordion>ul>li>a:hover.bgcolor-3 {
    color: #fff;
    background-image: url(../img/triang.png);
    background-repeat: no-repeat;
    background-position: right;
    cursor:pointer;
}

.horizontalaccordion>ul>li>a.active-1 {
    color: #fff;
    background-color: #f2434c;
    background-image: url(../img/triang.png);
    background-repeat: no-repeat;
    background-position: right;
}
.horizontalaccordion>ul>li>a.active-2 {
    color: #fff;
    background-color: #ff7b00;
    background-image: url(../img/triang.png);
    background-repeat: no-repeat;
    background-position: right;
}
.horizontalaccordion>ul>li>a.active-3 {
    color: #fff;
    background-color: #f5da00;
    background-image: url(../img/triang.png);
    background-repeat: no-repeat;
    background-position: right;
}



/* Menu XS */
.horizontal>ul {
    margin: 0;
    padding: 0;
    list-style:none;
    position: relative;
    margin-right: -30px;
}

.horizontal>ul>li {
    display:block;
    overflow: hidden;
    float:left;
    margin: 50;
    padding: 0;
    list-style:none;
    width:100%;
    height: 50px;
}

.horizontal>ul>li>a {
    display:block;
    float:left;
    margin:0px;
    padding-top:10px;
    padding-left: 30px;
    height:50px;
    width:100%;
    text-decoration:none;
    text-transform:uppercase;
    color: #fff;
    font-size: 1.6em;


    /* CSS3 Transform Rotate & Translate */
    white-space:nowrap;

}

.horizontal:hover>ul>li:hover>a {
    /* Decorative CSS */
    color:#fff;
    /*background:#000000;*/

    /* CSS3 Gradient Effect */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0)
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=5.0)"
}


/* Custom */
.horizontal>ul>li>a.bgcolor-1 {
    color: #f5da00;
    background-color: #f2434c;
    background-image: url(../img/rect.png);
    background-repeat: no-repeat;
    background-position: right;
}
.horizontal>ul>li>a.bgcolor-2 {
    color: #441885;
    background-color: #ff7b00;
    background-image: url(../img/rect.png);
    background-repeat: no-repeat;
    background-position: right;
}
.horizontal>ul>li>a.bgcolor-3 {
    color: #00b0d3;
    background-color: #f5da00;
    background-image: url(../img/rect.png);
    background-repeat: no-repeat;
    background-position: right;
}


.horizontal>ul>li>a:hover.bgcolor-1 {
    color: #fff;
    background-image: url(../img/triang.png);
    background-repeat: no-repeat;
    background-position: right;
    cursor:pointer;
}
.horizontal>ul>li>a:hover.bgcolor-2 {
    color: #fff;
    background-image: url(../img/triang.png);
    background-repeat: no-repeat;
    background-position: right;
    cursor:pointer;
}
.horizontal>ul>li>a:hover.bgcolor-3 {
    color: #fff;
    background-image: url(../img/triang.png);
    background-repeat: no-repeat;
    background-position: right;
    cursor:pointer;
}

.horizontal>ul>li>a.active-1 {
    color: #fff;
    background-color: #f2434c;
    background-image: url(../img/triang.png);
    background-repeat: no-repeat;
    background-position: right;
}
.horizontal>ul>li>a.active-2 {
    color: #fff;
    background-color: #ff7b00;
    background-image: url(../img/triang.png);
    background-repeat: no-repeat;
    background-position: right;
}
.horizontal>ul>li>a.active-3 {
    color: #fff;
    background-color: #f5da00;
    background-image: url(../img/triang.png);
    background-repeat: no-repeat;
    background-position: right;
}


/* agregado 04-05-2015*/
.horizontalaccordion>ul>li>a.bgcolor-4 {
    color: #441885;
    background-color: #00b0d3;
    background-image: url(../img/rect.png);
    background-repeat: no-repeat;
    background-position: right;
}
.horizontalaccordion>ul>li>a:hover.bgcolor-4 {
    color: #fff;
    background-image: url(../img/triang.png);
    background-repeat: no-repeat;
    background-position: right;
    cursor:pointer;
}
.horizontalaccordion>ul>li>a.active-4 {
    color: #fff;
    background-color: #00b0d3;
    background-image: url(../img/triang.png);
    background-repeat: no-repeat;
    background-position: right;
}
.horizontalaccordion>ul>li>a.bgcolor-5 {
    color: #f2434c;
    background-color: #00c3b9;
    background-image: url(../img/rect.png);
    background-repeat: no-repeat;
    background-position: right;
}
.horizontalaccordion>ul>li>a:hover.bgcolor-5 {
    color: #fff;
    background-image: url(../img/triang.png);
    background-repeat: no-repeat;
    background-position: right;
    cursor:pointer;
}
.horizontalaccordion>ul>li>a.active-5 {
    color: #fff;
    background-color: #00c3b9;
    background-image: url(../img/triang.png);
    background-repeat: no-repeat;
    background-position: right;
}
.horizontalaccordion>ul>li>a.bgcolor-6 {
    color: #00b0d3;
    background-color: #441885;
    background-image: url(../img/rect.png);
    background-repeat: no-repeat;
    background-position: right;
}
.horizontalaccordion>ul>li>a:hover.bgcolor-6 {
    color: #fff;
    background-image: url(../img/triang.png);
    background-repeat: no-repeat;
    background-position: right;
    cursor:pointer;
}
.horizontalaccordion>ul>li>a.active-6 {
    color: #fff;
    background-color: #441885;
    background-image: url(../img/triang.png);
    background-repeat: no-repeat;
    background-position: right;
}

.horizontal>ul>li>a.bgcolor-4 {
    color: #441885;
    background-color: #00b0d3;
    background-image: url(../img/rect.png);
    background-repeat: no-repeat;
    background-position: right;
}
.horizontal>ul>li>a:hover.bgcolor-4 {
    color: #fff;
    background-image: url(../img/triang.png);
    background-repeat: no-repeat;
    background-position: right;
    cursor:pointer;
}
.horizontal>ul>li>a.active-4 {
    color: #fff;
    background-color: #00b0d3;
    background-image: url(../img/triang.png);
    background-repeat: no-repeat;
    background-position: right;
}
.horizontal>ul>li>a.bgcolor-5 {
    color: #f2434c;
    background-color: #00c3b9;
    background-image: url(../img/rect.png);
    background-repeat: no-repeat;
    background-position: right;
}
.horizontal>ul>li>a:hover.bgcolor-5 {
    color: #fff;
    background-image: url(../img/triang.png);
    background-repeat: no-repeat;
    background-position: right;
    cursor:pointer;
}
.horizontal>ul>li>a.active-5 {
    color: #fff;
    background-color: #00c3b9;
    background-image: url(../img/triang.png);
    background-repeat: no-repeat;
    background-position: right;
}
.horizontal>ul>li>a.bgcolor-6 {
    color: #00b0d3;
    background-color: #441885;
    background-image: url(../img/rect.png);
    background-repeat: no-repeat;
    background-position: right;
}
.horizontal>ul>li>a:hover.bgcolor-6 {
    color: #fff;
    background-image: url(../img/triang.png);
    background-repeat: no-repeat;
    background-position: right;
    cursor:pointer;
}
.horizontal>ul>li>a.active-6 {
    color: #fff;
    background-color: #441885;
    background-image: url(../img/triang.png);
    background-repeat: no-repeat;
    background-position: right;
}


/* agregado 04-05-2015*/
.horizontalaccordion>ul>li>a.bgcolor-6 {
    color: #00b0d3;
    background-color: #441885;
    background-image: url(../img/rect.png);
    background-repeat: no-repeat;
    background-position: right;
}
.horizontalaccordion>ul>li>a:hover.bgcolor-6 {
    color: #fff;
    background-image: url(../img/triang.png);
    background-repeat: no-repeat;
    background-position: right;
    cursor:pointer;
}
.horizontalaccordion>ul>li>a.active-6 {
    color: #fff;
    background-color: #441885;
    background-image: url(../img/triang.png);
    background-repeat: no-repeat;
    background-position: right;
}

.horizontal>ul>li>a.bgcolor-6 {
    color: #a48f2c;
    background-color: #441885;
    background-image: url(../img/rect.png);
    background-repeat: no-repeat;
    background-position: right;
}
.horizontal>ul>li>a:hover.bgcolor-6 {
    color: #fff;
    background-color: #441885;
    background-image: url(../img/triang.png);
    background-repeat: no-repeat;
    background-position: right;
    cursor:pointer;
}
.horizontal>ul>li>a.active-6 {
    color: #fff;
    background-color: #441885;
    background-image: url(../img/triang.png);
    background-repeat: no-repeat;
    background-position: right;
}