
nav ul,nav li,{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
ul{list-style:none;margin:0;padding:0;}
b
nav.vertical ul li{	display:block;}/* vertical menu */
nav.horizontal ul li{	display: inline-block;}/* horizontal menu */
img{max-width:100%;}
/*end reset*/

/** Navigation **/
.navigation{
	background:#fff;
	padding:30px 0 1px 0px;
	position:relative;
}
.navigation span.left-ribbon{
	position: absolute;
	left: -40px;
	top: 8px;
	width: 40px;
	height:60px;
	}
.navigation span.right-ribbon{
	position: absolute;
	right: -40px;
	top: 8px;
	width: 40px;
	height:60px;
}
.toggleMenu {
    display:  none;
    padding:16px 15px;
	
    color: #000;
    width:95%;
     border-top:1px solid #DB3C15;
     border-bottom:1px solid #DB3C15;
     background:url("../images/nav-icon.png") no-repeat 98% center;
}
.nav {
    list-style: none;
     *zoom: 1;
     background:#fff;
	 
	
     
}
.nav:before,
.nav:after {
    content: " "; 
    display: table; 
}
.nav:after {
    clear: both;
}
.nav ul {
    list-style: none;
    width:11em;

	
}
.nav a {
    padding:16px 33px;
    color:#000;
  
    -webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.nav a:hover {
	color:#000;
}
.nav li {
    position: relative;
	
	
}
.nav > li {
    float: left;
}
.nav > li:first-child,.nav > li:last-child {
	background-image:none;
}
.nav > li {
    background-image: url("../images/line-divider.png");
    background-repeat: no-repeat;
    background-position:left;
	 display: block;
}
.nav > li > a {
    display: block;
}
.nav li  ul {
    position: absolute;
    left: -9999px;
}
.nav > li.hover > ul {
    left: 0;
}
.nav li li.hover ul {
    left: 100%;
    top: 0;
}
.nav li li a {
    display: block ;

    background:#99CC00;
	color:#FFFFFF;

    position: relative;
    z-index:200;
    border-top:1px solid #EF7A5D;
    padding:10px;
    font-size:15px;
}
.nav li li a:hover {
	  background:#698A06;
}
.nav li li li a {
    background:#ED6A4A;
	
    z-index:200;
    border-top:1px solid #EF7A5D;
}

@media screen and (max-width: 768px) {
    .active {
        display: block;
    }
    .nav > li {
        float: none;
    }
    .nav > li > .parent {
        background-position: 95% 50%;
    }
    .nav li li .parent {
        background-image: url("images/downArrow.png");
        background-repeat: no-repeat;
        background-position: 95% 50%;
    }
    .nav ul {
        display: block;
        width: 100%;
    }
   .nav > li.hover > ul , .nav li li.hover ul {
        position: static;
    }
    .nav > li {
    	 background-image: url("../images/nav-arrow.png");
    	 background-position:96% 55%;
    }
    .nav > li > .parent{
    	background-position:96% 55%;
   }

}



@media only screen and (max-width: 1280px) {
   
}
@media only screen and (max-width: 1024px) {
.wrap {
		width: 95%;
	}
	.nav a{
	  padding:16px 20px;
	}
	.navigation{
		margin:0 30px;
	}
	.nav li li a{
		font-size:14px;
	}
	.nav ul{
		width:9em;
	}
	.nav > li > a{
		font-size:14px;
	}
	
}
@media only screen and (max-width: 800px) {

	.nav {
		border-bottom:none;
		border-top:none;
	}
	.nav ul{
		width:100%;
	}
	.header_bottom{
		padding:6% 0 0% 0; 
	}
	
   .nav > li > a{
   	padding:10px;
   }
   
}

@media only screen and (max-width: 640px) {
	
	.header_top_right{
		padding-top:0;
	}
	.header{
		padding:8px 0;
	}
	.toggleMenu{
	  width:94%;
	}
	
}
@media only screen and (max-width: 480px) {
  
	.toggleMenu {
       width:92%;
       padding:8px 15px;
    }
   
	
}
@media only screen and (max-width: 320px) {
	
	.navigation{
		margin:0 10%;
	}
   .toggleMenu{
   	 width:88%;
   }
  
}
