[role="navigation"] {
background:#bc2e2d;
width: 100%;
height: 3em;
position: fixed;
bottom: 0;
left: 0;
z-index: 9999;
font-size: 20px;
font-size: 2rem;
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -ms-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  transition: all .3s ease-out;
       -webkit-box-shadow: 0px 10px 29px -6px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 10px 29px -6px rgba(0,0,0,0.75);
box-shadow: 0px 10px 29px -6px rgba(0,0,0,0.75);
}


#flnav
{
    width:100%;
    height:100%;
    position:absolute;
}
[class*="icon-"]:before, .icon:before, .cat-item a:before {
 font-family: 'entypo';
content: '';
speak: none;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
    font-size:1em;
-webkit-font-smoothing: antialiased;
margin: 0 0.3em 0 0.3em;
min-width: 1em;
display: inline-block;
}

.icon-search:before {
    content: "\e01b";
    margin: 0.5em 0.3em 0 0.3em;
}
.icon-mail:before {
  content: "\e004";
}
.icon-lock:before {
  content: "\e070";
}
.icon-flow-cascade:before {
  content: "\e0b5";
}
.icon-arrow-down:before {
  content: "\e0bb";
}
.icon-logout:before {
  content: "\e072";
}
.icon-arrow-left:before {
  content: "\e0ba";
}
.icon-cog-font:before {
  content: "\e015";
}
.icon-heart-2:before {
  content: "\e024";
}
.icon-share:before {
  content: "\e026";
}
.icon-heart:before {
  content: "\e023";
}
.icon-bell:before {
  content: "\e018";
}
.icon-cancel:before { 
    content: "\e075";
} 
.icon-house:before {
  content: "\e01d";
}
.icon-info:before {
  content: "\e080";
}
.icon-checkmark:before {
  content: "\e074";
}
.icon-user:before {
  content: "\e00d";
}
.icon-credit-card:before {
  content: "\e060";
}
.icon-arrow-left-7:before {
  content: "\e0d2";
}

.icon-retweet:before {
  content: "\e08b";
}
.icon-resize-enlarge:before {
  content: "\e0b0";
}

[role="navigation"] > ul {
overflow: hidden;
height: 3em;
position: relative;
display: inline-block;
-webkit-transition-duration: 0.4s;
-moz-transition-duration: 0.4s;
-ms-transition-duration: 0.4s;
-o-transition-duration: 0.4s;
transition-duration: 0.4s;
-webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -ms-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  transition: all .3s ease-out;
-webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
-moz-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
-ms-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
-o-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
margin: 0;
float: left;
z-index: 1;
width: 17em;

}
[role="navigation"] > ul.open {
left: 0;
padding-right: 6em;
}
[role="navigation"] > ul li {
margin: 0;
display: block;
float: left;
}
[role="navigation"] a {

text-decoration: none;
opacity: 0.7;
outline: 0;
text-align: center;
-webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -ms-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  transition: all .3s ease-out;
}
li {
display: list-item;
text-align: -webkit-match-parent;
}
[role="navigation"] > ul a.nav-home {
padding: 0 1em;
background: #ff6666;

}
.icon-mail:before {
content: "\e004";

}
.icon-download:before {
  content: "\e0a0";
}
.icon-archive:before {
  content: "\e09d";
}
.icon-screen:before {
  content: "\e05c";
}
.icon-products:before {
  content: "\e046";
}
.icon-trash:before {
  content: "\e09e";
}
.icon-plus-2:before {
  content: "\e07a";
}
.icon-newspaper:before {
  content: "\e035";
}
.icon-bag:before {
  content: "\e036";
}
.icon-cart:before {
  content: "\e064";
}
.icon-phone:before {
content: "\e000";
}
.icon-twitter:before {
content: "\e0f1";
}
.icon-directions:before {
content: "\e003";
}
#nav-bon {
    position: fixed;
    top: 0;
    left:10em;
    width: 6em;
    height: 5em;
    z-index: 1;
    -webkit-opacity: 1;
    -moz-opacity: 1;
    opacity: 1;
}
#nav-bon .menu-icon {
    width: 6em;
    height: 5em;
    -webkit-opacity: 1;
    -moz-opacity: 1;
    opacity: 1;
}
#nav-bon span {
    position: absolute;
    top: 0.8em;
    margin: 0;
    left: 0;
    width: 8.4em;
    height: 2em;
    padding: 0.2em;
    overflow: hidden;
    text-align: center;
    border: 0;
    opacity: 1;
    color: #000;
    font-size: 1.3rem;
    font-family: 'yekan';
    direction: rtl;
}
#nav-contact {
position: absolute;
right: 1em;
width: 3em;
height: 3em;
z-index: 1;
}
#nav-cart {
position: relative;
left:0;
width: 3em;
height: Calc(100% - 80px);
z-index: 1;
float:left;
clear:none;
}
#nav-cog{
position: relative;
float:left;
clear:none;left:0;
text-align:center;
left: 0;
height: 3em;
z-index: 1;
max-width: 4em;
}
#nav-log{
position: relative;
float:left;
clear:none;left:0;
text-align:center;
left: 0;
width: 3em;
height: 3em;
z-index: 1;
}
#nav-srch{
position: relative;
float:left;
clear:none;left:0;
width: 3.5em;
height: 3em;
z-index: 1;
display:none;
}
#nav-trigger {
float: left;
cursor: pointer;
display:none;
position: relative;
z-index: 2;
background-color: #1E405D;

}
#nav-trigger.active {
opacity: 1;
}


.nav-contact:before {
content: "";
display: block;
 position: absolute;
    float: right;   
    bottom:-1em;
    right:1em;
border-top: 1em solid #bc2e2d;
border-right: 1em solid transparent;
border-left: 1em solid transparent;

}
.nav-contact {
background:#bc2e2d;
max-width: 32em;
margin: 0 20px;
-webkit-box-shadow: 0 0.5em 2em rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 0.5em 2em rgba(0, 0, 0, 0.5);
box-shadow: 0 0.5em 2em rgba(0, 0, 0, 0.5);
position: absolute;
bottom: 4.2em;
right: 0;
direction:rtl;
text-align:right;
padding: 20px;
    border-radius: 20px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
}
.nav-cog:before {
content: "";
display: block;
 position: absolute;
    float: right;   
    top:-1em;
    left:0.5em;
border-bottom: 1em solid #fff;
border-right: 1em solid transparent;
border-left: 1em solid transparent;
}

.nav-cog {
background: #fff;
max-width: 20em;
margin: 0 20px;
-webkit-box-shadow: 0 0.5em 2em rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 0.5em 2em rgba(0, 0, 0, 0.5);
box-shadow: 0 0.5em 2em rgba(0, 0, 0, 0.5);
position: absolute;
 top: 6em;
    left: 0em;
direction:rtl;
text-align:right;
padding: 20px;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}
.inside-src
{
    position:absolute;
    font-size:3rem !important;
    margin-top:1rem;
}
.nav-srch {
    margin: 0;
    -moz-box-shadow: 0 1em 2em rgba(0, 0, 0, 0.5);
    width: 300px;
    direction: ltr;
    text-align: right;
    float: right;
    position: relative;
    margin-right: 20px;
    margin-top:30px;
}
.nav-srch .inner {
    padding: 0;    
    width: 100%;
        display: table;
}
.nav-log:before {
content: "";
display: block;
position: relative;
float: right;
margin: -2.2em 3em 0 0;
border-bottom: 1em solid #2a2a2a;
border-right: 1em solid transparent;
border-left: 1em solid transparent;
}
.nav-log{
background: #2a2a2a;
max-width: 32em;
margin: 0 20px;
-webkit-box-shadow: 0 0.5em 2em rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 0.5em 2em rgba(0, 0, 0, 0.5);
box-shadow: 0 0.5em 2em rgba(0, 0, 0, 0.5);
position: absolute;
top: 3.5em;
right: 0;
direction:rtl;
text-align:right;
}
#contact .icon, #new-contact .icon {

margin-left: 0.5em;
}
.icon {
color:#bc2e2d;
}

.nav-contact .inner {
font-size:0.8em;
}
.nav-contact .inner h4 {
display: none;
}
#contact h4, #new-contact h4 {
font-size: 2em;
}
#contact p, #new-contact p {
color: #bc2e2d;
padding: 5px 0 0 0;
clear:both;
    width: 100%;
}
#new-contact a:hover {
background: #bc2e2d;
padding:0 5px;
}

[role="navigation"] > ul a {
height: 3em;
width: 3em;
line-height: 2.8em;
display: block;
overflow: hidden;
opacity: 0.4;
}
.active .icon-menu {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
transform: rotate(90deg);

}
.icon-menu {
background-position: 0 0;
}
.menu-icon {
display: block;
background: transparent url('img/base/menu-sprite.svg') no-repeat;
background-size: auto 100%;
height: 2.5em;
width: 3em;
    margin: 0 auto;
}
.icon-menu {
transition: transform 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
-moz-transition: -moz-transform 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
-webkit-transition: -webkit-transform 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
-o-transition: -o-transform 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.icon-bag:before {
  content: "\e036";
}
.icon-refa {
background-position: -18em 0;
}

.icon-ethos {
background-position: -12em 0;
}
.icon-work {
background-position: -9em 0;
}
.icon-team {
background-position: -4.7em -0.1rem;
}
.icon-studio {
background-position: -3em 0;
}
.icon-contact {
background-position: -15em 0;
}
.icon-cart {
background-position: -17.4em -0.1rem;
}
.icon-chat:before {
  content: "\e01f";
}
.icon-cog {
background-position: -23.9em -0.1rem;
}
.icon-srch {
background-position:-21.9em -0.1rem;
}
#animCart{
background-position: -21.1em 0;
position:absolute;z-index:10000;top:0px;left:0px;display:none;
height: 3em;
width: 3em;
font-size:15px;
font-size:1.5rem;
}
#nav-contact span {
position: absolute;
margin: -1px;
padding: 0;

overflow: hidden;
border: 0;
clip: rect(0 0 0 0);
}
#nav-cart span,#nav-cog span,#nav-log span,#nav-srch span {
position: relative;
margin: -1px;
padding: 0;
overflow: hidden;
border: 0;
clip: rect(0 0 0 0);
font-family:'yekan';
color:#0e3b4e;
float:right;
width:100%;
text-overflow:ellipsis;
    overflow: hidden;      
    white-space: nowrap; 
}
[role="navigation"] > ul span {
position: absolute;
right: 0;
top: 0;
opacity: 0;
width: 5em;
padding: 0 1em;
height: 3em;
display: none;
font-family:IRANSans;
font-weight:300;
text-align: left;
}

#nav-contact .menu-icon {
-webkit-opacity: 0.6;
-moz-opacity: 0.6;
opacity: 0.6;
}
#nav-cart .menu-icon,#nav-cog .menu-icon,#nav-log .menu-icon  {
/*-webkit-opacity: 0.6;
-moz-opacity: 0.6;
opacity: 0.6;*/
}

#nav-contact:hover .menu-icon {
/*-webkit-opacity: 1;
-moz-opacity: 1;
opacity: 1;*/
}
#nav-cart:hover .menu-icon,#nav-cog:hover .menu-icon,#nav-log:hover .menu-icon {
-webkit-opacity: 1;
-moz-opacity: 1;
opacity: 1;
}
[role="navigation"] a:hover{
color: #ffffff;
text-decoration: none;
-webkit-opacity: 1;
-moz-opacity: 1;
opacity: 1;
}

[role="navigation"] > ul.open span:hover {
color: #fff;
}

 .buttkey
 {
     display:block;
     width:100%;
    padding:0.5em 0;	
    color:white;
    border:0;
    cursor:pointer;
    font-size:2rem;
	font-family: 'yekan';
 }
@media (min-width: 40em) {
    [role=navigation] > ul {
        left: -21.1em;
        padding-right: 9em;
        width: 18em;
    }
    [role=navigation] > ul a {
        padding: 0 5px;
    }
        [role=navigation] > ul a.nav-home {
            padding-right: 0;
            background: none;
        }
        [role=navigation] > ul a:hover span, [role=navigation] > ul:hover .current:hover span {
            opacity: 1;
            display: block;
        }
        #nav-trigger {
display: block;
}
}
.number
{
    direction:rtl;

}
/* Plug and play transitions */
.animated {
  -webkit-animation-duration: 0.5s;
  -moz-animation-duration: 0.5s;
  -o-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
}
@media (min-width: 78.32em) {
    .nav-srch {
        margin:1.5em 3em 0 0;
        width:400px;
    }
        .nav-srch .inner {            
        
        }
       
    #nav-cart span, #nav-cog span, #nav-log span, #nav-srch span {
        font-size: 1.4rem;
    }
}
@media (min-width: 93.98em){
     .nav-srch {       
        width:600px;
    }
}
@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform:  translateY(2.5em);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}
@-moz-keyframes fadeInDown {
  0% {
    opacity: 0;
    -moz-transform:  translateY(2.5em);
  }
  100% {
    opacity: 1;
    -moz-transform: translateY(0);
  }
}
@-o-keyframes fadeInDown {
  0% {
    opacity: 0;
    -o-transform: translateY(2.5em);
  }
  100% {
    opacity: 1;
    -o-transform: translateY(0);
  }
}
@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translateY(2.5em);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.fadeInDown {
  -webkit-animation-name: fadeInDown;
  -moz-animation-name: fadeInDown;
  -o-animation-name: fadeInDown;
  animation-name: fadeInDown;
}
@-webkit-keyframes fadeOutDown {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(2.5em);
  }
}
@-moz-keyframes fadeOutDown {
  0% {
    opacity: 1;
    -moz-transform: translateY(-2.5em);
  }
  100% {
    opacity: 0;
    -moz-transform: translateY(0);
  }
}
@-o-keyframes fadeOutDown {
  0% {
    opacity: 1;
    -o-transform: translateY(-2.5em);
  }
  100% {
    opacity: 0;
    -o-transform: translateY(0);
  }
}
@keyframes fadeOutDown {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(2.5em);
  }
}
.fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  -moz-animation-name: fadeOutDown;
  -o-animation-name: fadeOutDown;
  animation-name: fadeOutDown;
}