body {
    margin-right:0;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
}

.vf-sidebar-container {

    overflow-y:auto;
    position: fixed;
    background: #333333;
    height:100%;
    top:0;
    width:320px;
    z-index: 5;
    -webkit-box-shadow:  0px 0px 4px 3px rgba(30, 30, 30, 0.85);
    -moz-box-shadow:  0px 0px 4px 3px rgba(30, 30, 30, 0.85);
    box-shadow:  0px 0px 4px 3px rgba(30, 30, 30, 0.85);
    /*border:1px solid rgba()*/
    -webkit-animation-duration: 1s;
    animation-duration: 1s;

}

.vf-sidebar-container.right {
    right: -320px;
}

.vf-sidebar-container.open-right-add {

    -webkit-animation-name: SidebarRightRollOut;
    animation-name: SidebarRightRollOut;
}

.vf-sidebar-container.open-right-remove {
    -webkit-animation-name: SidebarRightRollIn;
    animation-name: SidebarRightRollIn;
}
.vf-sidebar-container.open-right {
    right: 0;
}


@keyframes SidebarRightRollOut {
    0% {
        right:-320px;
    }

    100% {
        right:0
    }
}

@keyframes SidebarRightRollIn {
    0% {
        right:0
    }

    100% {
        right:-320px;
    }
}



body.vfBody-open-right-add {
    -webkit-animation-name: BodyRightRollOut;
    animation-name: BodyRightRollOut;
}
body.vfBody-open-right-remove {
    -webkit-animation-name: BodyRightRollIn;
    animation-name: BodyRightRollIn;
}
body.vfBody-open-right {
    margin-right:320px;
}

@keyframes BodyRightRollOut {
    0% {
        margin-right:0;
    }

    100% {
        margin-right:320px;
    }
}

@keyframes BodyRightRollIn {
    0% {
        margin-right:320px;
    }

    100% {
        margin-right:0;
    }
}

.vf-sidebar-container.left {
    left: -320px;
}

.vf-sidebar-container.open-left-add {

    -webkit-animation-name: SidebarLeftRollOut;
    animation-name: SidebarLeftRollOut;
}

.vf-sidebar-container.open-left-remove {
    -webkit-animation-name: SidebarLeftRollIn;
    animation-name: SidebarLeftRollIn;
}
.vf-sidebar-container.open-left {
    left: 0;
}


@keyframes SidebarLeftRollOut {
    0% {
        left:-320px;
    }

    100% {
        left:0
    }
}

@keyframes SidebarLeftRollIn {
    0% {
        left:0
    }

    100% {
        left:-320px;
    }
}



body.vfBody-open-left-add {
    -webkit-animation-name: BodyLeftRollOut;
    animation-name: BodyLeftRollOut;
}
body.vfBody-open-left-remove {
    -webkit-animation-name: BodyLeftRollIn;
    animation-name: BodyLeftRollIn;
}
body.vfBody-open-left {
    margin-left:320px;
}


@keyframes BodyLeftRollOut {
    0% {
        margin-left:0;
    }

    100% {
        margin-left:320px;
    }
}

@keyframes BodyLeftRollIn {
    0% {
        margin-left:320px;
    }

    100% {
        margin-left:0;
    }
}