section.product .menu {
    list-style: none;
    padding: 5px 0 0 5px;
}

    section.product .menu li {
    }

        section.product .menu li a {
            color: #636363;
            font-size: 12px;
        }

        section.product .menu li:hover {
        }

            section.product .menu li:hover > a, section.product .menu li:focus > a {
                color: #222222;
            }

    section.product .menu i {
        float: right;
        padding: 5px;
        font-size: 10px;
        cursor: pointer;
    }

        section.product .menu i:hover {
            background-color: #f79a44;
            color: white;
        }

    section.product .menu li ul {
        display: none;
        padding: 11px 0 0 0;
    }

        section.product .menu li ul li {
            border: none;
            padding: 0 0 0 14px;
        }



.IndexMenu {
}

    .IndexMenu h1 {
        text-align: center;
        background-color: #222222;
        color: white;
        padding: 6px 0;
        cursor: pointer;
        font-size: 23px;
    }

    .IndexMenu > ul {
        padding: 0;
        margin: 0;
        list-style: none;
    }
    .IndexMenu ul  > li {
       
    }
    .IndexMenu ul li {
        padding: 0px 6px;
        /*border-left: 5px solid white;*/
        margin: 10px 7px;
        font-weight: bold;
    }

        .IndexMenu ul li:hover {
            /*border-left: 5px solid #222222;*/
        }

            .IndexMenu ul li:hover > a {
                color: #222222;
            }

        .IndexMenu ul li a {
        }
        .IndexMenu ul li ul li {
            font-weight: normal;
        }
    .IndexMenu .closebt {
        position: absolute;
        right: 0;
        display: block;
        background-color: #222222;
        color: white;
        border-radius: 33%;
        padding: 5px;
        margin: -7px 0 0;
        cursor: pointer;
    }
.bgIn {
    background-color: rgba(189, 178, 178, 0.6);
    height: 100%;
    width: 100%;
    top: 0;
    bottom: 0;
    position: fixed;
    z-index: 9999;
    display:none;
}


@media(min-width:900px) {
    .IndexMenu {
    }

        .IndexMenu h1, .IndexMenu .closebt {
            display: none;
        }
}

@media(max-width:900px) {
    .IndexMenu {
    }

        .IndexMenu > ul {
            position: fixed;
            z-index: 011111;
            background-color: white;
            top: 0;
            left: 0;
            bottom: 0;
            width: 82%;
            overflow-y: auto;
            transform: translateX(-100%);
            transition: transform 0.3s ease-in-out;
        }

            .IndexMenu > ul.active {
                transform: translateX(0%);
            }
}