nav {
display:block;
width:auto;
height:50px;
float:right;
} 

nav ul li {
margin:40px 0px 0px 25px;
float:right;
}

nav ul li:nth-child(1) {
-webkit-animation: fadeInRight 0.1s ease-in-out;
animation: fadeInRight 0.1s ease-in-out;
}

nav ul li:nth-child(2) {
-webkit-animation: fadeInRight 0.2s ease-in-out;
animation: fadeInRight 0.2s ease-in-out;
}

nav ul li:nth-child(3) {
-webkit-animation: fadeInRight 0.3s ease-in-out;
animation: fadeInRight 0.4s ease-in-out;
}

nav ul li:nth-child(4) {
-webkit-animation: fadeInRight 0.4s ease-in-out;
animation: fadeInRight 0.4s ease-in-out;
}

nav ul li:nth-child(5) {
-webkit-animation: fadeInRight 0.5s ease-in-out;
animation: fadeInRight 0.5s ease-in-out;
}

nav ul li:nth-child(6) {
-webkit-animation: fadeInRight 0.6s ease-in-out;
animation: fadeInRight 0.6s ease-in-out;
}

nav ul li:nth-child(7) {
-webkit-animation: fadeInRight 0.7s ease-in-out;
animation: fadeInRight 0.7s ease-in-out;
}

nav li a {
display:inline-block;
font:normal 16px 'NeoSansArabic' !important;
color:rgba(7,57,80,1);
text-decoration:none;
padding:0px 0px 10px 0px;

-webkit-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}

nav li a:hover {
color:rgba(7,57,80,1);
border-bottom:solid 2px rgba(255,194,0,1);

-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);

-webkit-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}

.nav_open {
display:none;
}

.nav_close {
display:none;
}


@media only screen and (max-width: 768px) {

nav {
display:block;
position:fixed;
width:70%;
height:100%;
right:-70%;
background:rgba(255,255,255,1);
box-shadow:0px 0px 10px 2px rgba(0,0,0,0.05);

-webkit-transition:all 0.5s linear;
transition:all 0.5s linear;
} 

.nav_open {
display:block;
position:absolute;
width:24px;
height:24px;
font:normal 24px 'sfctc' !important;
color:rgba(7,57,80,1);
float:right;
right:15px;
top:45px;
cursor:pointer;

-webkit-animation: fadeInRight 0.7s ease-in-out;
animation: fadeInRight 0.7s ease-in-out;

-webkit-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}

.nav_open:hover, .nav_open:active {
color:rgba(0,0,0,1);

-webkit-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}

.nav_open:before {
content:"\e00c";
}

.nav_close {
display:block;
position:absolute;
width:32px;
height:32px;
font:normal 32px 'sfctc' !important;
color:rgba(7,57,80,1);
top:75%;
right:0;
bottom:0;
left:0;
margin:auto;
cursor:pointer;
z-index:9999;

-webkit-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;

-webkit-animation: zoomIn 0.7s ease-in-out;
animation: zoomIn 0.7s ease-in-out;
}

.nav_close:hover {
color:rgba(0,0,0,1);

-webkit-transform: scale(0.8, 0.8);
transform: scale(0.8, 0.8);

-webkit-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}

.nav_close:before {
content:"\e00d";
}

nav ul li {
height:10px;
width:100%;
text-align:center;
line-height:25px;
}

nav li a {
font:normal 18px 'NeoSansArabic' !important;
color:rgba(7,57,80,1);
text-decoration:none;
padding:0px 0px 10px 0px;
}

}

@media only screen and (max-width: 500px) {

.nav_open {
top: 35px;
}

}

/*animations*/
@-webkit-keyframes zoomIn {
0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}

50% {
opacity: 1;
}
}

@keyframes zoomIn {
0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}

50% {
opacity: 1;
}
}

@-webkit-keyframes fadeInRight {
0% {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}

100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}

@keyframes fadeInRight {
0% {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}

100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}