/* demo page styles */
body {
background:red;
margin:0;
padding:0;
}

.example {
position:relative;
/*max-width:1100px;
height:738px;
*/
max-width: 99vw;
height: 99vh;
background: url(background.jpg);
background-size: cover;
margin: 3px auto;
/*
border:1px #000 solid;
margin:0px auto;
padding:5px;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
*/
}

.descript {
position:relative;
color:#ffffff;
background:#8fe879;
width:60%;
height:50%;
overflow: hidden; /*auto scroll*/
border:1px #000 solid;
margin:0px auto;
padding:5px;
border-radius:8px;
z-index: 1;
-moz-border-radius:8px;
-webkit-border-radius:8px;
box-shadow:0 5px 5px rgba(0,0,0, .5);
-moz-box-shadow:0 5px 5px rgba(0,0,0, .5);
-webkit-box-shadow:0 5px 5px rgba(0,0,0, .5);
/*background-color: rgb(255,0,0); /* Fallback color */ 
/*background-color: rgba(161,161,161,0.9); /* Black w/ opacity */
background-color: rgba(0,0,255,0.5); /* Black w/ opacity */
text-align:justify;
text-justify: inter-word;
font-family:IranNastaliqa,bzar,tahoma;
font-size:16px;
font-weight:normal ;
/*dir:rtl;*/
}
.descript2, .descript3 {
position:absolute;
top: 140px;
left:160px;
display: none ; /*block;*/
color:#ffffff;
background:#4C50FF; /*4CAF50   #8fe879; */
width:65%;
height:53%;
overflow:auto; /*scroll;*/
border:1px #000 solid;
margin:auto;
padding: 15px;
border-radius:8px;
z-index: 1;
-moz-border-radius:8px;
-webkit-border-radius:8px;
box-shadow:0 5px 5px rgba(0,0,0, .5);
-moz-box-shadow:0 5px 5px rgba(0,0,0, .5);
-webkit-box-shadow:0 5px 5px rgba(0,0,0, .5);
/*background-color: rgba(0,0,255,1); /* Black w/ opacity */
text-align:justify;
text-justify: inter-word;
font-family:IranNastaliqa,B zar0,tahoma;
font-size:16px;
font-weight:normal;
direction:rtl;
}
.logo_ {
position:relative;
display: block ; /*block;*/
/*background:#8fe879;*/
width:60%;
height:18%;
margin:120px 180px;
z-index: 5;
}
-webkit-animation-name: move;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: right;
-webkit-animation-timing-function: linear;
}
.descript:hover {
	-webkit-animation-play-state: paused;
}
@-webkit-keyframes move {
	0% {
		margin-left: -400px;
	}
	100% {
		margin-left: 800px;
	}
}

/* main menu styles */
#nav {
display:inline-block; 
/*width:100%;  */
font-family:tahoma;verdana: ; 
font-size:13px;
font-weight: bold;
margin:5px 20%;
padding:0px;
position:relative;
z-index: 3;
/*background:#335599 url(bg-menu.png) repeat-x 0 -110px;*/
background:#ffffff url(bg-menu.png) repeat-x 0 0px;
/*background:#99ff33;*/
border-radius:10px; /*some css3*/
-moz-border-radius:10px;
-webkit-border-radius:10px;
box-shadow:0 2px 2px rgba(0,0,0, .5);
-moz-box-shadow:0 2px 2px rgba(0,0,0, .5);
-webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);
opacity: .95;
}
#nav li {
margin:10px;
float:left;
position:relative;
list-style:none;
}
#nav a {
color:#e7e5e5;
text-decoration:none;
display:block;
padding:5px 10px;
border-radius:10px; /*some css3*/
-moz-border-radius:10px;
-webkit-border-radius:10px;
text-shadow:0 2px 2px rgba(0,0,0, .7);
}
/* selected menu element */
#nav .current a, #nav li:hover > a {
background:#ffffff url(bg1-menu.png) repeat-x 0 -10px;
color:#000;
font-weight:bold;
border-top:0px solid #f8f8f8;
box-shadow:0 2px 2px rgba(0,0,0, .7); /*some css3*/
-moz-box-shadow:0 2px 2px rgba(0,0,0, .7);
-webkit-box-shadow:0 2px 2px rgba(0,0,0, .7);
text-shadow:0 2px 2px rgba(255,255,255, 0.7);
}
/* sublevels */
#nav ul li:hover a, #nav li:hover li a {
font-size:13px;
font-weight:normal;
background:none;
border:none;
color:#000000;
text-shadow:0 2px 2px rgba(255,255,255, 0.0);
}
#nav ul li a:hover {
font-weight:normal;
background:#ffffff;
color:#000000;

border-radius:10px; /*some css3*/
-moz-border-radius:10px;
-webkit-border-radius:10px;
/*text-shadow:0 2px 2px rgba(0,0,0, 0.7);*/
}
#nav ul li:first-child > a {
-moz-border-radius-topleft:10px; /*some css3*/
-moz-border-radius-topright:10px;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
}
#nav ul li:last-child > a {
-moz-border-radius-bottomleft:10px; /*some css3*/
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius:10px;
}
/* drop down */
#nav li:hover > ul {
opacity:1;
visibility:visible;
}
#nav ul {
opacity:0;
visibility:hidden;
padding:0px 0px;
width:290px;
top:26px; 
position:absolute;
background:#8fe879 url(bg1-menu.png) repeat-x 0 -10px; /*#8fe879/*
/*color:#ff0000;*/
border:1px solid #7788aa;
border-radius:10px; /*some css3*/
-moz-border-radius:10px;
-webkit-border-radius:10px;
box-shadow:0 2px 2px rgba(0,0,0, .5);
-moz-box-shadow:0 2px 2px rgba(0,0,0, .5);
-webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);
-moz-transition:opacity .25s linear, visibility .1s linear .1s;
-webkit-transition:opacity .25s linear, visibility .1s linear .1s;
-o-transition:opacity .25s linear, visibility .1s linear .1s;
transition:opacity .25s linear, visibility .1s linear .1s;

}
#nav ul li {
float:none;
margin:0;
}
#nav ul a {
font-weight:normal;
/*text-shadow:0 2px 2px rgba(255,255,255, 0.7);*/
}
#nav ul ul {
width:260px;
left:270px;
top:0px;
}