.jomsocial-wrapper {
    position:relative;
    overflow:hidden;
    width:100%;
    height: 100%;

    &.show-menu .jomsocial {
        @if ($scss-direction==rtl) {
            -webkit-transform: translateX(-($sidebar-menu-width));
            -ms-transform: translateX(-($sidebar-menu-width));
            transform: translateX(-($sidebar-menu-width));
        } @else {
            -webkit-transform: translateX($sidebar-menu-width);
            -ms-transform: translateX($sidebar-menu-width);
            transform: translateX($sidebar-menu-width);
        }
    }

    &.show-menu--user .jomsocial {
        @if ($scss-direction==rtl) {
            -webkit-transform: translateX($sidebar-menu-width);
            -ms-transform: translateX($sidebar-menu-width);
            transform: translateX($sidebar-menu-width);
        } @else {
            -webkit-transform: translateX(-($sidebar-menu-width));
            -ms-transform: translateX(-($sidebar-menu-width));
            transform: translateX(-($sidebar-menu-width));
        }
    }
    @include media('large') {
        overflow:visible;
    }
}


.jomsocial-wrapper .jomsocial {

    background:$scss-color-background;
    padding:ms();
    height: 100%;
    min-height: 480px;
    position:relative;

    *, *:before, *:after {
        /* apply a natural box layout model to all elements */
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    a {
        text-decoration: none;
    }

    @extend %row;
    @extend %clearfix;

    @if $scss-direction == rtl {
        text-align: right !important;
    }

}

.joms-body {
    @extend %clearfix;
}

.joms-main {
    @extend %column;
    width:100%;
    @include media('large') {

        @if ($scss-stream-position == left) {
            float: left;
            padding-right: $ms-base;
            padding-left: 0;
        }

        @else {
            padding-left: $ms-base;
        }

        width: $primary-width;

    }
}

.joms-main--full {
    width: 100%;
    margin:0;
    padding:0;
}

.joms-sidebar {
    @extend %column;
    width:100%;
    @include media('large') {

        @if ($scss-stream-position == left) {
            float: right;
            padding-right: 0;
        }


        width:$secondary-width;
    }
}