.popUpMenu {
    position: relative;
}



    .popUpMenu .menuContent {
        position: absolute;
        -webkit-box-shadow: 0 10px 20px -12px rgba(0, 0, 0, 0.42), 0 3px 20px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
        -ms-box-shadow: 0 10px 20px -12px rgba(0, 0, 0, 0.42), 0 3px 20px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
        box-shadow: 0 10px 20px -12px rgba(0, 0, 0, 0.42), 0 3px 20px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
        width: 0px;
        height: 0px;
        min-width: 0px !important;
        min-height: 0px !important;
        max-height: 600px;
        top: 20px;
        left: 40px;
        z-index: 716;
        background-color: white;
        -webkit-transition: width 300ms cubic-bezier(0, 0, 0.2, 1), height 300ms cubic-bezier(0, 0, 0.2, 1) 50ms, min-height 300ms cubic-bezier(0, 0, 0.2, 1) 50ms, opacity 300ms;
        -moz-transition: width 300ms cubic-bezier(0, 0, 0.2, 1), height 300ms cubic-bezier(0, 0, 0.2, 1) 50ms, min-height 300ms cubic-bezier(0, 0, 0.2, 1) 50ms, opacity 300ms;
        -ms-transition: width 300ms cubic-bezier(0, 0, 0.2, 1), height 300ms cubic-bezier(0, 0, 0.2, 1) 50ms, min-height 300ms cubic-bezier(0, 0, 0.2, 1) 50ms, opacity 300ms;
        -o-transition: width 300ms cubic-bezier(0, 0, 0.2, 1), height 300ms cubic-bezier(0, 0, 0.2, 1) 50ms, min-height 300ms cubic-bezier(0, 0, 0.2, 1) 50ms, opacity 300ms;
        transition: width 300ms cubic-bezier(0, 0, 0.2, 1), height 300ms cubic-bezier(0, 0, 0.2, 1) 50ms, min-height 300ms cubic-bezier(0, 0, 0.2, 1) 50ms, opacity 300ms;
        -ms-opacity: 0;
        opacity: 0;
        -ms-border-top-right-radius: 4px;
        border-top-right-radius: 4px;
        -ms-border-bottom-right-radius: 4px;
        border-bottom-right-radius: 4px;
        -ms-border-bottom-left-radius: 4px;
        border-bottom-left-radius: 4px;
        font-size: 13px;
        overflow: hidden;
    }

        .popUpMenu .menuContent * {
            direction: rtl;
            color: inherit;
            list-style: none;
        }

    .popUpMenu.open .menuContent {
        opacity: 1;
        width: 200px;
        height: 300px;
        min-height: 350px;
        overflow: visible;
    }

    .popUpMenu .menuContent:before {
        content: '';
        position: absolute;
        top: -13px;
        left: 12px;
        display: inline-block;
        /*triangle*/
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 15px 15px 15px;
        border-color: transparent transparent white transparent;
        line-height: 0px;
        _border-color: #000000 #000000 white #000000;
        _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
    }

    .popUpMenu .menuButton {
        display: block;
        cursor: pointer;
        float: left;
        color: white;
        opacity: 0.9;
    }

        .popUpMenu .menuButton * {
            font-size: 20px;
            line-height: 32px;
        }

    .popUpMenu.open .menuButton.open {
        display: block;
    }

    .popUpMenu .menuButton.open {
        display: none;
    }


    .popUpMenu.open .menuButton.close {
        display: none;
    }

    .popUpMenu .menuButton.close {
        display: block;
    }

@media (max-width: 992px) {
    .popUpMenu.popUpMenu-responsive .menuContent {
        -webkit-transition: width 300ms cubic-bezier(0.46, 0.03, 0.52, 0.96), opacity 300ms !important;
        -moz-transition: width 300ms cubic-bezier(0.46, 0.03, 0.52, 0.96), opacity 300ms !important;
        -ms-transition: width 300ms cubic-bezier(0.46, 0.03, 0.52, 0.96), opacity 300ms !important;
        -o-transition: width 300ms cubic-bezier(0.46, 0.03, 0.52, 0.96), opacity 300ms !important;
        transition: width 300ms cubic-bezier(0.46, 0.03, 0.52, 0.96), opacity 300ms !important;
    }

    .popUpMenu.popUpMenu-responsive.open .menuContent {
        position: fixed !important;
        top: 0px !important;
        left: 0px !important;
        width: 300px !important;
        height: 100% !important;
        max-height: 300000px !important;
        overflow-y: auto;
        z-index:1000;
    }

    .popupLayout {
        z-index:899;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #808080;
        background-color: rgba(128, 128, 128, 0.50);
        display: none;
    }

    .popupLayout.popupLayout-open {
        display: block;
    }
}