#menu{
  width: 1098px;
  height: 135px;
  z-index: 200;
  margin: 0;
  padding: 0;
  border-left: 1px solid #E1E3EB;
  border-right: 1px solid #E1E3EB;
}


#menu li {
*line-height: 220px;
position: relative;
display: block;
z-index: 200;
float: right;
width: 183px;
height: 135px;
}




.Home {
background: url('Home.png') no-repeat;
}


.Policy{
background:url('Policy.png') no-repeat; 
}

.Compare{
background:url('Compare.png') no-repeat;
}

.Consultation{
background:url('Consultation.png') no-repeat;
}

.Polling{
background:url('Polling.png') no-repeat; 
}

.Contact{
background:url('Contact.png') no-repeat;
}




#menu ul{
position: absolute;
z-index: 200;
margin: 0;
padding: 0;
border: 0;
}


#menu ul:after{
content: "";
display: block;
z-index: 200;
margin: 0;
padding: 0;
border: 0;
}

#menu .texteffect {
width: 100%;
position: absolute;
margin-top: 100px;
font-family: 'IranSans-Light' , 'Yekan';
Text-align: center;
color: #fbae09;
font-size: 13px;
text-shadow: 0 -1px 0 #000;
z-index: 200;
}



.currenting{
  position: absolute;
  top: -13px;
  left: 25.5%;
  margin-left: -50px;
  width: 90px;
  height: 165px;
  -webkit-transition: all 400ms cubic-bezier(.45,1.92,.9,1.54);
  -moz-transition: all 400ms cubic-bezier(.45,1.92,.9,1.54);
  -o-transition: all 400ms cubic-bezier(.45,1.92,.9,1.54);
  -ms-transition: all 400ms cubic-bezier(.45,1.92,.9,1.54);
  transition: all 400ms cubic-bezier(.16,1.23,.87,1.18);
}



.current-back{
  top: 4px;
  width: 100%;
  height: 90%;
  position: absolute;
  border-radius: 5px;
  border-bottom: 2px solid rgba(0, 0, 0, 0.09);
  border-top: 2px solid rgba(255,255,255,0.1);
  box-shadow: 0px 0px 15px 5px black;
  background: rgba(255,175,75,1);
  background: -moz-linear-gradient(-45deg, rgba(255,175,75,1) 0%, rgba(255,146,10,1) 100%);
  background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(255,175,75,1)), color-stop(100%, rgba(255,146,10,1)));
  background: -webkit-linear-gradient(-45deg, rgba(255,175,75,1) 0%, rgba(255,146,10,1) 100%);
  background: -o-linear-gradient(-45deg, rgba(255,175,75,1) 0%, rgba(255,146,10,1) 100%);
  background: -ms-linear-gradient(-45deg, rgba(255,175,75,1) 0%, rgba(255,146,10,1) 100%);
  background: linear-gradient(135deg, rgba(255,175,75,1) 0%, rgba(255,146,10,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffaf4b', endColorstr='#ff920a', GradientType=1 );
}


/************* RAIL-MENU HIDDEN URL **************/

.URL-Rail-1{
position: absolute;
width: 50px;
height: 50px;
cursor: pointer;
border: 20px solid green;
opacity: 0;
z-index: 9999;
margin: 10px 48px 0px 0px;
padding: 0px 0px 0px 0px;
}

.URL-Rail-2{
position: absolute;
width: 50px;
height: 50px;
cursor: pointer;
border: 20px solid white;
opacity: 0;
z-index: 9999;
margin: 10px 230px 0px 0px;
padding: 0px 0px 0px 0px;
}

.URL-Rail-3{
position: absolute;
width: 50px;
height: 50px;
cursor: pointer;
border: 20px solid pink;
opacity: 0;
z-index: 9999;
margin: 10px 414px 0px 0px;
padding: 0px 0px 0px 0px;
}

.URL-Rail-4{
position: absolute;
width: 50px;
height: 50px;
cursor: pointer;
border: 20px solid yellow;
opacity: 0;
z-index: 9999;
margin: 10px 597px 0px 0px;
padding: 0px 0px 0px 0px;
}

.URL-Rail-5{
position: absolute;
width: 50px;
height: 50px;
cursor: pointer;
border: 20px solid lightgreen;
opacity: 0;
z-index: 9999;
margin: 10px 779px 0px 0px;
padding: 0px 0px 0px 0px;
}

.URL-Rail-6{
position: absolute;
width: 50px;
height: 50px;
cursor: pointer;
border: 20px solid lightblue;
opacity: 0;
z-index: 9999;
margin: 10px 963px 0px 0px;
padding: 0px 0px 0px 0px;
}

/************* RAIL-MENU HIDDEN URL **************/






.URL-Rail-1:hover ~ .currenting{
  left: 92%;
}
.Home:hover ~ .currenting{
  left: 92%;
}

.URL-Rail-2:hover ~ .currenting{
  left: 75.5%;
}
.Policy:hover ~ .currenting{
  left: 75.5%;
}

.URL-Rail-3:hover ~ .currenting{
 left: 58.8%;
}
.Compare:hover ~ .currenting{
 left: 58.8%;
}

.URL-Rail-4:hover ~ .currenting{  
   left: 42%;
}
.Consultation:hover ~ .currenting{  
   left: 42%;
}

.URL-Rail-5:hover ~ .currenting{
  left: 25.5%;  
}
.Polling:hover ~ .currenting{
  left: 25.5%;  
}

.URL-Rail-6:hover ~ .currenting{
  left: 8.7%; 
}
.Contact:hover ~ .currenting{
  left: 8.7%; 
}



.bottom-arrow{
  position:absolute;
  overflow:hidden;
  width:100%;
  height:12px;
  bottom:17px;
  left:0;
  z-index:201;
  opacity: 1;
  
}
.bottom-arrow:before{
  content:"";
  position:absolute;
  width:80%;
  height:10px;
  bottom:-10px;
  left:10%;
  border-radius:20%;
  box-shadow:0 0 10px black;
  z-index:201;
}
.bottom-arrow:after{
  content:"";
  position:absolute;
  width:0;
  height:0;
  bottom:0;
  border-bottom:12px solid rgba(255,175,75,1);
  border-left:8px solid transparent;
  border-right:8px solid transparent;
  margin-left:-8px;
  left:50%;
  z-index:201;
}



.top-arrow{
  position:absolute;
  overflow:hidden;
  width:100%;
  height:12px;
  top:13px;
  left:0;
  z-index:201;
}
.top-arrow:before{
  content:"";
  position:absolute;
  width:80%;
  height:10px;
  top:-10px;
  left:10%;
  border-radius:20%;
  box-shadow:0 0 10px black;
  z-index:201;
}
.top-arrow:after{
  content:"";
  position:absolute;
  width:0;
  height:0;
  top:0px;
  border-top:8px solid rgba(255,175,75,1);
  border-left:6px solid transparent;
  border-right:6px solid transparent;
  margin-left:-6px;
  left:50%;
  z-index:201;
}