.sidebar-menu {
    width: 100%;
    margin: 0px auto;
    position: relative;
    left: 0px;
    z-index: 100;
    font-size: 12px;
    padding-bottom: 40px;
}

.sidebar-menu ul {
    width: 100%;
    margin: 0px;
    padding: 0px;
}


.sidebar-menu ul li {
    list-style-type: none;
    -webkit-perspective: 500px;
    -moz-perspective: 500px;
    -o-perspective: 500px;
    perspective: 500px;
    display: table;
    width: 100%;
}


.sidebar-menu ul li a strong {
    font-weight: bold !important;
}

.sidebar-menu ul li a {
/*    white-space:nowrap;*/
    font-family: arial,helvetica,verdana,sans;
    background-color: #fff;
    background-image: none;
    box-shadow: inset 0 0 .25em hsla(0,0%,0%,.1),
                inset 0 0 1.5em hsla(0,0%,0%,.25);
    color: #333;
    font: bold 1em/3 sans-serif;
    padding: 10px 1.5em;
    display: block;

    line-height: 150%;
    font-size: 11px;
    width: 100%;
/*    min-height: 66px;*/
    display: table-cell;
    vertical-align: middle;
    padding-right: 30px;

    position: relative;
    text-align: left;
    text-decoration: none;
    text-shadow: 0 1px 1px hsla(0,0%,100%,.25);
    transition: .5s;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    text-transform:uppercase;
    position: relative;
}

.sidebar-menu ul li a:after {
    background-color: inherit;
    color: #fff;
    background-image: url('/img/design/robcaa/icon_active.png'),
                      linear-gradient(#77c6f3, #6184ad),
                      linear-gradient(-72deg, #77c6f3 50%, transparent 50%);
    box-shadow: inset 0 0 .25em hsla(0,0%,0%,.2),
                inset 0 0 1.5em hsla(0,0%,0%,.3);
    bottom: 0;
    content: attr(data-title);
    left: 0px;
    position: absolute;
    padding: 10px 1.5em;

    line-height: 150%;
    font-size: 11px;
    width: 100%;
    display: table-cell;
    vertical-align: middle;
    padding-right: 30px;

    top: 0;
    -webkit-transform: rotateY(-90deg) translateX(-100%);
    transform: rotateY(-90deg) translateX(-100%);
    -moz-transform: rotateY(-90deg) translateX(-100%);
    -o-transform: rotateY(-90deg) translateX(-100%);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;

    background-repeat: no-repeat;
    background-position: right 50%;
}



.sidebar-menu ul li:hover a, .sidebar-menu ul li a.active {
    -webkit-transform: translateX(100%) rotateY(90deg);
    transform: translateX(100%) rotateY(90deg);
    -moz-transform: translateX(100%) rotateY(90deg);
    -o-transform: translateX(100%) rotateY(90deg);
    text-shadow: 0px 0px 10px #fff;
}








/* Extra small devices (phones, less than 768px) */
@media(max-width:767px) {
    .sidebar-menu {
        width: 94% !important;
    }
    .sidebar-menu ul {
        width: 100%;
        display: block;
        height: auto;
    }
    .sidebar-menu ul li.sidebar-menu-separator {
        display: none;
    }
    .sidebar-menu ul li:nth-child(even) {
/*        left: 4%;*/
    }
    .sidebar-menu ul li {
        width: 50%;
        float: left;
        position: relative;
        display: inline-block;
    }
    .sidebar-menu ul li a {
        text-align: center;
        width: 100%;
        display: inline-block;
    }
    .sidebar-menu ul li a strong {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        display: inline-block;
        width: 100%;
    }

    .sidebar-menu ul li a:after {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        display: inline-block;
        width: 100%;
    }
}


.si:before {
    content: "";
    width: 32px;
    height: 32px;
    display: inline-block;
    position: absolute;
    top: 50%;
    margin-top: -16px;
    right: 3px;

    background-image: url('/img/design/robcaa/icons.png');
    background-repeat: no-repeat;
}

.sidebar-menu-separator {
    margin: 10px;
}

.si1:before { background-position: right -32px; }
.si2:before { background-position: right -64px; }
.si3:before { background-position: right -96px; }
.si4:before { background-position: right -128px; }
.si5:before { background-position: right -160px; }
.si6:before { background-position: right -192px; }
.si7:before { background-position: right -224px; }
.si8:before { background-position: right -256px; }
.si9:before { background-position: right -288px; }
.si10:before { background-position: right -320px; }
.si11:before { background-position: right -352px; }
.si12:before { background-position: right -384px; }
.si13:before { background-position: right -416px; }
.si14:before { background-position: right -448px; }
.si15:before { background-position: right -480px; }
.si16:before { background-position: right -512px; }
.si17:before { background-position: right -544px; }
.si18:before { background-position: right -576px; }
.si19:before { background-position: right -608px; }
.si20:before { background-position: right -640px; }
.si21:before { background-position: right -672px; }
.si22:before { background-position: right -704px; }





.mobile .sidebar-menu ul li a:after, .mobile .sidebar-menu ul li a:before,
.ie .sidebar-menu ul li a:after, .ie .sidebar-menu ul li a:before {
    display: none;
}
.mobile .sidebar-menu ul li a,
.ie .sidebar-menu ul li a {
    background-color: #fff;
    color: #333;
}
.mobile .sidebar-menu ul li:hover a, .mobile .sidebar-menu ul li a.active,
.ie .sidebar-menu ul li:hover a, .ie .sidebar-menu ul li a.active {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);

    background-image: linear-gradient(#77c6f3, #6184ad), linear-gradient(-72deg, #77c6f3 50%, transparent 50%);
    background-color: #6fb3de;
    color: #fff;
}