.clearfix:before,
.clearfix:after {content: "";display: table;} 
.clearfix:after {clear: both;}
.clearfix {zoom: 1;}

#navigation-style {  direction: rtl;  text-align: right;  width: 100%;  }

.dp-navigation-menu {margin: 0;padding: 0; display: block !important; width: 100%; direction: rtl; float: right;}
.dp-navigation-menu  li {float: right; padding: 0; margin: 0;white-space: nowrap;width: auto; position: relative !important; list-style: none;}
.dp-navigation-menu ul
{background-color:#115589; display: none;margin: 0;padding: 5px; border-radius: 0 0 10px 10px;
    position: absolute !important;height: auto;width: auto;z-index: 9999999 !important;
    -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.75);
    -moz-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.75);
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.75);  }

* html .dp-navigation-menu ul li {width: 223px !important; position: relative; z-index: 99999 !important;}

.dp-navigation-menu li a:link, 
.dp-navigation-menu li a:visited, 
.dp-navigation-menu li a:hover {display: block;white-space: nowrap; color: #fff;}
.dp-navigation-menu li a {  font: normal 13px/18px BYekan, regular, sans-serif;  color: #ffffff;  cursor: pointer;  margin-top: -6px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.dp-navigation-menu > li > a{
    height:56px;
    padding: 16px 15px;
    position: relative;
    -webkit-border-radius:0 0 10px 10px !important;
    -moz-border-radius:0 0 10px 10px !important;
    border-radius:0 0 10px 10px !important;
}
.dp-navigation-menu > li > a:before,
.dp-navigation-menu > li > a:after ,
.dp-navigation-menu > li > .parent-link.active:before ,
.dp-navigation-menu > li > .parent-link.active:after{
    content: '';
    display: none;
    width: 0;
    height:0;
    border-bottom: solid 6px #000;
    position: absolute;
    top:0;
}
.dp-navigation-menu > li > a:before , .dp-navigation-menu > li > .parent-link.active:before{
    right:-6px;
    border-right:solid 6px transparent;
}
.dp-navigation-menu > li > a:after , .dp-navigation-menu > li > .parent-link.active:after{
    left:-6px;
    border-left:solid 6px transparent;
}
.dp-navigation-menu > li > a:hover , .dp-navigation-menu > li > .parent-link.active{
    background-color: #0cb708 !important;
}
.dp-navigation-menu > li > a:hover:before, .dp-navigation-menu > li > a:hover:after{
    display: block;
}
.dp-navigation-menu > li > .parent-link.active:before ,.dp-navigation-menu > li > .parent-link.active:after{
    display: block;
}


.dp-navigation-menu ul li {float: none;margin: 0;padding: 0; white-space: nowrap; min-width: 150px; z-index: 99999 !important;}
.dp-navigation-menu ul li a { color: #000000;}

.dp-navigation-menu ul li {}
.dp-navigation-menu ul li:last-child {border-bottom: none !important;}
.dp-navigation-menu li.parent  > a {background: url(images/arrow-down.png) no-repeat 5% 55% ;}
.dp-navigation-menu li.parent   a.parent-link {background: url(images/arrow-down.png) no-repeat 3% 51% ;}
.dp-navigation-menu ul li.parent > a {background: url(images/arrow-right.png) no-repeat 5% 55% #74C2E1;}
.dp-navigation-menu ul li.parent  a.parent-link{background: url(images/arrow-right.png) no-repeat 5% 55%;}

/*.dp-navigation-menu li.parent:hover > a {  background: url(images/arrow-down.png) no-repeat 5% 55% #336699; border-radius: 15px;  }*/

.dp-navigation-menu ul li.parent:hover  > a {  background: url(images/arrow-right.png) no-repeat 5% 55% #0cb708;}

.dp-navigation-menu li a:hover, 
.dp-navigation-menu li a.active {color: #ffffff; background-color: #0cb708; }

.dp-navigation-menu ul li a {  font: normal 12px/18px byekan;  color: #ffffff;  cursor: pointer;  margin: 4px;  padding: 7px 10px;  }
.dp-navigation-menu ul li a:link,
.dp-navigation-menu ul li a:visited,
.dp-navigation-menu ul li a:hover {margin: 0;}

ul.dp-navigation-menu > li.has-sub:active > ul.sub,
ul.dp-navigation-menu > li.has-sub:hover > ul.sub {
    display: block;
/*    animation-duration: 0.5s;
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipInX;
    animation-name: flipInX;*/}

@-webkit-keyframes flipInX {
    from {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
    }

    40% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    60% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1;
    }

    80% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    }

    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
}

@keyframes flipInX {
    from {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
    }

    40% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    60% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1;
    }

    80% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    }

    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
}