#site-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
}
#site-canvas{
    -webkit-transform: translateX(0);
    transform: translateX(0);

    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);

    -webkit-transition: 300ms ease all;
    transition: 300ms ease all;

    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
#site-canvas .skins-nav {
    right: 0px;
}

.show-nav .skins-nav, .show-nav .skins-nav:hover{
    right: 328px;
 }

.show-nav #site-canvas  {
    -webkit-transform: translateX(-328px);
    transform: translateX(-328px);

    -webkit-transform: translate3d(-315px, 0, 0);
    transform: translate3d(-328px, 0, 0);
}
#site-menu {
    width: 300px;
    height: 100%;
    position: absolute;
    top: 0;
    right: -328px;
   /* background: rgba(36, 43, 77, .8) none repeat scroll 0 0;*/
    padding: 14px 14px 37px;
    transition: 300ms ease all;
    /*color: #fff;
    border-bottom: 1px solid #dae3e9;*/
}
#site-menu.show-nav {
    right: 0;
}




#site-canvas .skins-fav {
    right: 0px;
}

#site-canvas .skins-fav {
    right: 0px;
}
.show-fav .skins-fav, .show-fav .skins-fav:hover{
    right: 328px;
}

.show-fav #site-canvas  {
    -webkit-transform: translateX(-328px);
    transform: translateX(-328px);

    -webkit-transform: translate3d(-315px, 0, 0);
    transform: translate3d(-328px, 0, 0);
}
#site-favoritos {
    width: 300px;
    height: 100%;
    position: absolute;
    top: 0;
    right: -328px;
    /* background: rgba(36, 43, 77, .8) none repeat scroll 0 0;*/
    padding: 14px 14px 37px;
    transition: 300ms ease all;
    /*color: #fff;
    border-bottom: 1px solid #dae3e9;*/
}
#site-favoritos.show-fav {
    right: 0;
}