#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/*#cssmenu .ar{
display:-webkit-box;
}*/

    #cssmenu .en {
        display:-webkit-box;
    }


#cssmenu:after,
#cssmenu > ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
#cssmenu #menu-button {
  display: none;
}
#cssmenu {
    width: auto;
    font-family: 'Times New Roman';
    line-height: 1;
    background-color: #303030;
}
    #cssmenu > ul {
        background-color: #303030;
    }
        #cssmenu > ul > li {
            float: right;
            -webkit-perspective: 1000px;
            -moz-perspective: 1000px;
            perspective: 1000px;
            /*border-radius: 15px;*/
            border-style: groove;
        }
#cssmenu.align-center > ul {
  font-size: 0;
  text-align: center;
}
    #cssmenu.align-center > ul > li {
        display: inline-block;
        float: none;
        /*border-radius: 15px;*/
        border-style: groove;
    }
    #cssmenu.align-right > ul > li {
        float: right;
        /*border-radius: 15px;*/
        border-style: groove;
    }
    #cssmenu > .ar > li > a {
        padding: 16px 10px;
        font-size: 16px;
        color: #ffffff;
        letter-spacing: 1px;
        text-decoration: none;
        background-color: #303030;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        -o-transition: all .3s;
        transition: all .3s;
        -webkit-transform-origin: 50% 0;
        -moz-transform-origin: 50% 0;
        transform-origin: 50% 0;
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        transform-style: preserve-3d;
        font-weight: bold;
        text-align: center;
    }
    #cssmenu > .en > li > a {
        padding: 16px 10px;
        font-size: 16px;
        color: #ffffff;
        letter-spacing: 1px;
        text-decoration: none;
        background-color: #303030;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        -o-transition: all .3s;
        transition: all .3s;
        -webkit-transform-origin: 50% 0;
        -moz-transform-origin: 50% 0;
        transform-origin: 50% 0;
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        transform-style: preserve-3d;
        font-weight: bold;
        text-align: center;
    }
#cssmenu > ul > li.active > a {
  color: #dff2fa;
}
    #cssmenu > ul > li:hover > a,
    #cssmenu > ul > li > a:hover {
        color: #ffffff;
        /*background: #cc9900;*/
        /*-webkit-transform: rotateX(90deg) translateY(-23px);*/
        /*-moz-transform: rotateX(90deg) translateY(-23px);*/
        /*transform: rotateX(90deg) translateY(-23px);*/
        -ms-transform: none;
    }
    #cssmenu > ul > li > a::before {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: -1;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        padding: 16px 10px;
        color: #dff2fa;
        background-color: #303030;
        content: attr(data-title);
        -webkit-transition: background 0.3s;
        -moz-transition: background 0.3s;
        transition: background 0.3s;
        -webkit-transform: rotateX(-90deg);
        -moz-transform: rotateX(-90deg);
        transform: rotateX(-90deg);
        -webkit-transform-origin: 50% 0;
        -moz-transform-origin: 50% 0;
        transform-origin: 50% 0;
        -ms-transform: translateY(- -18px);
        /*border-radius: 15px;*/
    }
    #cssmenu > ul > li:hover > a::before,
    #cssmenu > ul > li > a:hover::before {
        background: #ffffff;
    }
#cssmenu.small-screen {
  width: 100%;
}
    #cssmenu.small-screen > ul,
    #cssmenu.small-screen.align-center > ul {
        width: 10%;
        text-align: -webkit-center;
    }
    #cssmenu.small-screen > ul > li,
    #cssmenu.small-screen.align-center {
        float:none;
        display: inline;
        border-top: 1px solid rgba(100, 100, 100, 0.1);
        /*border-radius: 15px;*/
    }
#cssmenu.small-screen > ul > li:hover > a,
#cssmenu.small-screen > ul > li > a:hover {
  color: #dff2fa;
  -webkit-transform: none;
  -moz-transform: none;
  transform: none;
  -ms-transform: none;
}
#cssmenu.small-screen > ul > li > a::before {
  display: none;
}
    #cssmenu.small-screen #menu-button {
        display: block;
        padding: 16px 10px;
        cursor: pointer;
        font-size: 14px;
        text-decoration: none;
        color: #ffffff;
        text-transform: uppercase;
        letter-spacing: 1px;
        background-color: #303030;
    }
#cssmenu.small-screen #menu-button:after {
  content: "";
  position: absolute;
  right: 20px;
  top: 17px;
  display: block;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  border-top: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  width: 22px;
  height: 3px;
}
#cssmenu.small-screen #menu-button.menu-opened:after {
  border-top: 2px solid #dff2fa;
  border-bottom: 2px solid #dff2fa;
}
#cssmenu.small-screen #menu-button:before {
  content: "";
  position: absolute;
  right: 20px;
  top: 27px;
  display: block;
  width: 22px;
  height: 2px;
  background: #ffffff;
}
#cssmenu.small-screen #menu-button.menu-opened:before {
  background: #dff2fa;
}