
.Menu2 ::-webkit-scrollbar {
    width: 5px;
}

.Menu2 ::-webkit-scrollbar-track {
    background: #f1f1f1;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
}

.Menu2 ::-webkit-scrollbar-thumb {
    background: #5D6A87;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
}

    .Menu2 ::-webkit-scrollbar-thumb:hover {
        background: #555;
    }

.mdi-menu {
    position: absolute;
    top: 10px;
    right: 15px;
    line-height: 1;
    font-size: 30pt;
    color: #f5535e;
    display: none;
    cursor: pointer;
}
/*---------------------------- menuResize ---------------------------------------*/
.Menu2 {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: 300px;
    background: #fff;
    z-index: 101;
    transform: translateX(100%);
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
    opacity: 0;
    visibility: hidden;
}

    .Menu2 .mdi-close {
        font-size: 18pt;
        line-height: 2;
        position: absolute;
        left: 0;
        top: 0;
        cursor: pointer;
        -webkit-transition: 0.5s;
        -moz-transition: 0.5s;
        -ms-transition: 0.5s;
        -o-transition: 0.5s;
        transition: 0.5s;
        background: #f5535e;
        color: #fff;
        width: 40px;
        display: inline-block;
        text-align: -moz-center;
        text-align: -webkit-center;
        text-align: center;
    }

        .Menu2 .mdi-close:before {
            -webkit-transition: 0.5s;
            -moz-transition: 0.5s;
            -ms-transition: 0.5s;
            -o-transition: 0.5s;
            transition: 0.5s;
        }

        .Menu2 .mdi-close:hover {
            background: #263a41;
            color: #f5535e;
        }

            .Menu2 .mdi-close:hover:before {
                transform: rotate(180deg);
                -webkit-transform: rotate(180deg);
                -moz-transform: rotate(180deg);
                -ms-transform: rotate(180deg);
                -o-transform: rotate(180deg);
            }

    .Menu2 > a {
        display: block;
        margin: 30px auto;
    }

        .Menu2 > a img {
            width: 100px;
        }

    .Menu2 .phone {
        position: relative;
        margin: 15px auto;
    }

        .Menu2 .phone > * {
            display: block;
            color: #2c2c2c;
            text-align: -moz-center;
            text-align: -webkit-center;
            text-align: center;
            padding: 0 15px;
            font-size: 12pt;
        }

            .Menu2 .phone > *:hover {
                color: #f5535e;
            }

    .Menu2 > ul {
        height: 80%;
        overflow: auto;
    }

    .Menu2 ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

        .Menu2 ul li a {
            padding: 10px 15px;
            color: #666;
            display: block;
            overflow: hidden;
            position: relative;
            z-index: 1;
            border-top: 1px solid rgba(0, 0, 0, 0.05);
        }

            .Menu2 ul li a:before {
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                margin: auto;
                content: '';
                background: #f5535e;
                -webkit-transition: 0.5s;
                -moz-transition: 0.5s;
                -ms-transition: 0.5s;
                -o-transition: 0.5s;
                transition: 0.5s;
                transform: translateX(100%);
                -webkit-transform: translateX(100%);
                -moz-transform: translateX(100%);
                -ms-transform: translateX(100%);
                -o-transform: translateX(100%);
                z-index: -1;
            }

            .Menu2 ul li a:hover {
                color: #fff;
            }

                .Menu2 ul li a:hover::before {
                    transform: translateX(0);
                    -webkit-transform: translateX(0);
                    -moz-transform: translateX(0);
                    -ms-transform: translateX(0);
                    -o-transform: translateX(0);
                }

        .Menu2 ul li.haschild {
            position: relative;
        }

            .Menu2 ul li.haschild > p {
                display: flex;
                flex-direction: row;
                margin: 0;
            }

                .Menu2 ul li.haschild > p a {
                    width: 85%;
                }

                .Menu2 ul li.haschild > p i {
                    width: 15%;
                    font-size: 16pt;
                    cursor: pointer;
                    position: relative;
                    z-index: 1;
                    overflow: hidden;
                    color: #f5535e;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    -webkit-transition: 0.5s;
                    -moz-transition: 0.5s;
                    -ms-transition: 0.5s;
                    -o-transition: 0.5s;
                    transition: 0.5s;
                    border-right: 1px solid rgba(0, 0, 0, 0.05);
                    border-top: 1px solid rgba(0, 0, 0, 0.05);
                    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
                }

                    .Menu2 ul li.haschild > p i:after {
                        content: '';
                        position: absolute;
                        left: 0;
                        right: 0;
                        top: 0;
                        bottom: 0;
                        margin: auto;
                        background: #f5535e;
                        -webkit-transition: 0.5s;
                        -moz-transition: 0.5s;
                        -ms-transition: 0.5s;
                        -o-transition: 0.5s;
                        transition: 0.5s;
                        transform: translateX(100%);
                        -webkit-transform: translateX(100%);
                        -moz-transform: translateX(100%);
                        -ms-transform: translateX(100%);
                        -o-transform: translateX(100%);
                        z-index: -1;
                    }

                    .Menu2 ul li.haschild > p i:hover {
                        color: #fff;
                    }

                        .Menu2 ul li.haschild > p i:hover:after {
                            transform: translateX(0);
                            -webkit-transform: translateX(0);
                            -moz-transform: translateX(0);
                            -ms-transform: translateX(0);
                            -o-transform: translateX(0);
                        }

            .Menu2 ul li.haschild > ul {
                display: none;
                background: rgba(0, 0, 0, 0.05);
            }

            .Menu2 ul li.haschild.open > p i:before {
                content: '\f143' !important;
            }

    .Menu2.open {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        -moz-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
        visibility: visible;
    }

        .Menu2.open .mdi-close {
            left: -40px;
        }


.screen {
    position: fixed;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    z-index: 100;
    visibility: hidden;
    opacity: 0;
}

    .screen:before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        background: rgba(0, 0, 0, 0.8);
        opacity: 0;
        visibility: hidden;
        -webkit-transition: 0.5s;
        -moz-transition: 0.5s;
        -ms-transition: 0.5s;
        -o-transition: 0.5s;
        transition: 0.5s;
    }

body.off .screen {
    visibility: visible;
    opacity: 1;
}

    body.off .screen:before {
        opacity: 1;
        visibility: visible;
    }

@media only screen and (max-width: 992px) {
    .mnubar .mdi-menu {
        display: block;
        z-index: 100;
    }
}
