.side-bar-menu {

        border: 1px solid hsla(0, 0%, 59.2%, .29);

        background-color: #fff;

        width: 65px;

        padding: 10px 0 0;

        position: fixed;

        z-index: 30;

        right: 0;

        bottom: 17vh;

        box-shadow: -7px 0 20px 1px rgba(0, 0, 0, .19)

    }



	.side-bar-menu, .side-bar-menu a

	{

		color: #000000;

		line-height: 1.2;

	}



    .side-bar-menu i

    {

        padding-right: 0px;

    }



    .side-bar-menu .sidebar-item {

        margin-bottom: 0;

        text-align: center;

        border: 1px solid #fff

    }



    .side-bar-menu .sidebar-item img {

        margin-top: 8px;

        width: 15px

    }



    .side-bar-menu .sidebar-item p {

        margin-top: 3px;

        color: #262522;

        font-family: DINPro-Regular, Helvetica, Arial, "sans-serif";

        font-size: 9px;

        font-weight: 400;

        text-transform: uppercase

    }



    .side-bar-menu .sidebar-item:hover {

        opacity: .6;

        cursor: pointer

    }



    .side-bar-menu .phone-sidebar:hover {

        opacity: 1

    }



    .side-bar-menu .phone-container {

        width: 100%;

        height: 100%;

        position: relative

    }



    .side-bar-menu .side-phone {

        height: 100%

    }



    .side-bar-menu .side-phone-slide {

        position: absolute;

        background-color: #262522;

        display: flex;

        justify-content: space-between;

        align-items: center;

        right: 10px;

        top: 0;

        height: 100%;

        overflow: hidden;

        width: 100%;

        opacity: 0;

        padding: 0 15px;

        transition: .5s ease

    }



    .side-bar-menu .side-phone-slide p {

        color: #fff;

        white-space: nowrap;

        font-size: 12px!important;

        direction: ltr;

        padding-top: 5px

    }



    .side-bar-menu .side-phone-slide-icon {

        width: 20px!important;

        margin: 0!important;

        padding: 0

    }



    .side-bar-menu .side-phone-slide img {

        -webkit-filter: brightness(0) invert(1);

        filter: brightness(0) invert(1)

    }



    .side-bar-menu .phone-container:hover .side-phone-slide {

        width: 140px;

        opacity: 1

    }

 .side-bar-menu {
        border: 1px solid hsla(0, 0%, 59.2%, .29);
        background-color: #fff;
        width: 65px;
        padding: 10px 0 0;
        position: fixed;
        z-index: 30;
        right: 0;
        bottom: 17vh;
        box-shadow: -7px 0 20px 1px rgba(0, 0, 0, .19)
    }

	.side-bar-menu, .side-bar-menu a
	{
		color: #b1b0b0;
		line-height: 1.2;
	}

    .side-bar-menu i
    {
        padding-right: 0px;
    }

    .side-bar-menu .sidebar-item {
        margin-bottom: 0;
        text-align: center;
        border: 1px solid #fff
    }

    .side-bar-menu .sidebar-item img {
        margin-top: 8px;
        width: 15px
    }

    .side-bar-menu .sidebar-item p {
        margin-top: 3px;
        color: #262522;
        font-family: DINPro-Regular, Helvetica, Arial, "sans-serif";
        font-size: 9px;
        font-weight: 400;
        text-transform: uppercase
    }

    .side-bar-menu .sidebar-item:hover {
        opacity: .6;
        cursor: pointer
    }

    .side-bar-menu .phone-sidebar:hover {
        opacity: 1
    }

    .side-bar-menu .phone-container {
        width: 100%;
        height: 100%;
        position: relative
    }

    .side-bar-menu .side-phone {
        height: 100%
    }

    .side-bar-menu .side-phone-slide {
        position: absolute;
        background-color: #262522;
        display: flex;
        justify-content: space-between;
        align-items: center;
        right: 10px;
        top: 0;
        height: 100%;
        overflow: hidden;
        width: 100%;
        opacity: 0;
        padding: 0 15px;
        transition: .5s ease
    }

    .side-bar-menu .side-phone-slide p {
        color: #fff;
        white-space: nowrap;
        font-size: 12px!important;
        direction: ltr;
        padding-top: 5px
    }

    .side-bar-menu .side-phone-slide-icon {
        width: 20px!important;
        margin: 0!important;
        padding: 0
    }

    .side-bar-menu .side-phone-slide img {
        -webkit-filter: brightness(0) invert(1);
        filter: brightness(0) invert(1)
    }

    .side-bar-menu .phone-container:hover .side-phone-slide {
        width: 140px;
        opacity: 1
    }

    @media only screen and (max-width:768px) {
        .side-bar-menu {
            width: 100%;
            border-top: 2px solid #d7d7d7;
            background-color: #fff;
            padding: 5px 4px;
            display: flex;
            bottom: 0;
            justify-content: space-around;
            transform: translateY(150%);
            transition: transform .5s ease-out
        }
        .side-bar-menu-visible {
            transform: translateY(0)!important;
            transition: transform .5s ease-out
        }
        .side-bar-menu .sidebar-item {
            text-align: center;
            margin-bottom: 0;
            width: 100px
        }
        .side-bar-menu .sidebar-item .sidebar-img-container {
            padding-top: 3px;
            height: 24px;
            position: relative;
            line-height: 29px
        }
        .side-bar-menu .sidebar-item img {
            width: 21px;
            margin: auto;
            vertical-align: middle
        }
        .side-bar-menu .sidebar-item p {
            color: #262522;
            font-family: DINPro-Regular, Helvetica, Arial, "sans-serif";
            font-size: 11px;
            font-weight: 400;
            text-transform: uppercase;
            margin: 11px 0 0
        }
        .side-bar-menu .side-phone-slide {
            display: none
        }
    }

    @media only screen and (min-width:768px) {
        .side-bar-menu {
            transform: translateX(150%);
            transition: transform .5s ease-out
        }
        .side-bar-menu-visible {
            transform: translateX(0)!important;
            transition: transform .5s ease-out
        }
    }

    @media only screen and (max-width:480px) {
        .side-bar-menu {
            padding: 10px 4px 13px
        }
    }

    @media only screen and (max-width:768px) {
        .sidebar-bottom {
            position: absolute;
            bottom: 58px
        }
    }

    .side-bar-menu.ar {
        direction: rtl;
        text-align: right;
        left: 0;
        box-shadow: 7px 0 20px 1px rgba(0, 0, 0, .19)
    }

    .side-bar-menu.ar .sidebar-item p {
        font-family: Noto-Kufi-Regular, Helvetica, Arial, "sans-serif";
        font-size: 9px
    }

    .side-bar-menu.ar .side-phone-slide {
        left: 10px;
        right: auto;
        direction: ltr
    }

    @media only screen and (max-width:768px) {
        .side-bar-menu.ar .sidebar-item p {
            font-family: Noto-Kufi-Regular, Helvetica, Arial, "sans-serif";
            font-size: 10px
        }
    }

    @media only screen and (min-width:768px) {
        .side-bar-menu.ar {
            transform: translateX(-150%)
        }
    }

    @media only screen and (max-width:768px) {

        .side-bar-menu {

            width: 100%;

            border-top: 2px solid #d7d7d7;

            background-color: #fff;

            padding: 5px 4px;

            display: flex;

            bottom: 0;

            justify-content: space-around;

            transform: translateY(150%);

            transition: transform .5s ease-out

        }

        .side-bar-menu-visible {

            transform: translateY(0)!important;

            transition: transform .5s ease-out

        }

        .side-bar-menu .sidebar-item {

            text-align: center;

            margin-bottom: 0;

            width: 100px

        }

        .side-bar-menu .sidebar-item .sidebar-img-container {

            padding-top: 3px;

            height: 24px;

            position: relative;

            line-height: 29px

        }

        .side-bar-menu .sidebar-item img {

            width: 21px;

            margin: auto;

            vertical-align: middle

        }

        .side-bar-menu .sidebar-item p {

            color: #262522;

            font-family: DINPro-Regular, Helvetica, Arial, "sans-serif";

            font-size: 11px;

            font-weight: 400;

            text-transform: uppercase;

            margin: 11px 0 0

        }

        .side-bar-menu .side-phone-slide {

            display: none

        }

    }



    @media only screen and (min-width:768px) {

        .side-bar-menu {

            transform: translateX(150%);

            transition: transform .5s ease-out

        }

        .side-bar-menu-visible {

            transform: translateX(0)!important;

            transition: transform .5s ease-out

        }

    }



    @media only screen and (max-width:480px) {

        .side-bar-menu {

            padding: 10px 4px 13px

        }

    }



    @media only screen and (max-width:768px) {

        .sidebar-bottom {

            position: absolute;

            bottom: 58px

        }

    }



    .side-bar-menu.ar {

        direction: rtl;

        text-align: right;

        left: 0;

        box-shadow: 7px 0 20px 1px rgba(0, 0, 0, .19)

    }



    .side-bar-menu.ar .sidebar-item p {

        font-family: Noto-Kufi-Regular, Helvetica, Arial, "sans-serif";

        font-size: 9px

    }



    .side-bar-menu.ar .side-phone-slide {

        left: 10px;

        right: auto;

        direction: ltr

    }



    @media only screen and (max-width:768px) {

        .side-bar-menu.ar .sidebar-item p {

            font-family: Noto-Kufi-Regular, Helvetica, Arial, "sans-serif";

            font-size: 10px

        }

    }



    @media only screen and (min-width:768px) {

        .side-bar-menu.ar {

            transform: translateX(-150%)

        }

    }

* {

	margin:0px;

	padding:0px;

	border:none;

	outline:none;

}