.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;
    padding-top: 5px;
    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:#fff;
    display: none;
    margin: 0;
    padding:0; 
    position: absolute !important;
    height: auto;
    width: auto;
    z-index: 99999 !important;
    border : solid 1px #dbdbdb;
}

.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:hover {
    display: block;
    white-space: nowrap;
    color: #666b6e;
    border-bottom-color: #f5c408;
}
.dp-navigation-menu li a {
    display : block;
    font: normal 14px/18px IranSansNum,regular, semibold,sans-serif;
    color: #666b6e;
    cursor: pointer;
    margin: 0;
    padding: 8px 15px;
    border-bottom:solid 3px transparent;
}

.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: #666b6e; 
}

.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-gray.png) no-repeat 5% 55% ;
}
/*.dp-navigation-menu li.parent  > a::after{
    font-family : "Font Awesome 5 Brands";
    content:"\f063";
}*/
.dp-navigation-menu li.parent   a.parent-link {background: url(images/arrow-down-gray.png) no-repeat 5% 55% ;}
.dp-navigation-menu ul li.parent > a {background: url(images/arrow-right-gray.png) no-repeat 5% 55%;}
.dp-navigation-menu ul li.parent  a.parent-link{background: url(images/arrow-right-gray.png) no-repeat 5% 55%;}


.dp-navigation-menu li.parent:hover > a {  background: url(images/arrow-down-gray.png) no-repeat 5% 55%; }

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

.dp-navigation-menu li a:hover,
.dp-navigation-menu li a.active {
    color: #666b6e;
    border-bottom-color : #f5c408;
}

.dp-navigation-menu ul li.parent  a.parent-link:hover , 
.dp-navigation-menu ul li.parent  a.parent-link.active{
    background-color : #f5c408;
    color : #fff;
}


.dp-navigation-menu ul li a { 
    font: normal 12px/18px IranSansNum,regular,sans-serif;  
    color: #666b6e;  
    cursor: pointer;  
    margin: 4px;  
    padding : 5px 10px;
}
.dp-navigation-menu ul li a:link,
.dp-navigation-menu ul li a:visited,
.dp-navigation-menu ul li a:hover {
    margin: 0;
}
.dp-navigation-menu ul li a:hover{
    background-color : #fec907;
    color : #fff;
}

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);
    }
}