.head-nav{ width:100%; max-width:1100px; min-height:48px; margin:0px auto; background:#303030;}

#quick{ width:180px; margin:0px; overflow:hidden; border:1px solid #303030; float:right; margin-top:12px; margin-right:10px;}
#quick #search{ width:140px; margin:0px; float:left; border:none; background:#303030; color:#868686; padding:3px 5px 4px 5px; font-size:15px; font-family:'PT-Sans';}
#quick #search:focus{ outline:none; border:none;}
#quick #submit{ width:30px; height:24px; margin:0px; float:left; border:none; background:#303030 url(../images/search.png) center no-repeat; cursor:pointer;}
#quick #submit:focus{ outline:none; border:none;}

#cssmenu { width: 75%; min-height:48px; margin:0px; float:left;}
#cssmenu #menu-button { display: none;}

#nav { display: block; width:100%;  list-style: none; padding:0px; margin: 0 auto; z-index:99999;}
#nav li { display: inline-block; float:left; margin: 0; padding: 0;}
#nav > li > a { position:relative; display:block; color: #fefefe; font-size: 17px; line-height:20px; padding:14px 32px;}
#nav > li > a:hover { background:#72b626;}
#nav li:hover > ul { display:block; -webkit-animation-name:showAnimation; -webkit-animation-duration: .5s;}

#nav ul { position: absolute; display:none; z-index: 1000; left: auto; top:auto; width:200px; padding: 0; margin: 0;}
#nav ul li { display:block; float:left; position: relative; margin: 0; padding: 0;}
#nav ul li a { display:block; width:180px; padding: 5px 10px; font-size: 15px; color: #484848; border-bottom: 1px solid #eeeeee; background: #CCE6FF;}
#nav ul li a:hover { color: #1A1A1A; background: #f2f2f2;}

#nav ul ul { position: absolute; display:none; z-index: 1000; left: 200px; top:0; width:200px; padding: 0; margin: 0;}
#nav ul ul li { display:block; float:left; position: relative; margin: 0; padding: 0;}
#nav ul ul li a { display:block; width: 180px; padding: 5px 10px; font-size: 15px; color: #484848; border-bottom: 1px solid #eeeeee; background: #C1C1C1;}
#nav ul ul li a:hover { color: #1A1A1A; background: #f2f2f2;}

#cssmenu li a.has-sub::after { display: block; content: ""; position:absolute; width: 0; height: 0; top: 23px; right:0px; border: 5px solid transparent; border-top-color: #ffffff;}
#cssmenu > ul > li:hover::after { border-top-color: #ffffff;}


.p1 #p1,.p2 #p2,.p3 #p3,.p4 #p4,.p5 #p5{ background:#72b626;}

@media only screen and (max-width: 1120px) {
	#nav > li > a { font-size: 17px; padding:14px 25px;}
}

@media only screen and (max-width: 1015px) {
	#nav > li > a { font-size: 16px; padding:14px 20px;}
}

@media only screen and (max-width: 930px) {
	#nav > li > a { font-size: 16px; padding:14px 10px;}
	#quick{ margin-right:0px;}
	#cssmenu { width: 72%;}
	#cssmenu li a.has-sub::after { display: block; content: ""; position:absolute; width: 0; height: 0; top: 23px; margin-left:67px; border: 5px solid transparent; border-top-color: #ffffff;}
}

@media all and (max-width: 785px){
	#quick{ margin:10px 0px;}
	#cssmenu{ width:50px; margin:0px; float:left; min-height:35px;}
	#cssmenu #menu-button { display: block; cursor: pointer; border:none;}
	#cssmenu #menu-button > a { padding:0px; border:none; background:none; float:left; margin-top:-35px; margin-left:15px;}
    #cssmenu ul.open li, #cssmenu > ul.open > li { display: block; }
    #cssmenu ul ul::after { display: none; }
	
	#cssmenu li a.has-sub::after{ right:35%;}
	
	#nav { position:absolute; display: block; width:95%; height:45px; margin:38px 0px 0px 0px; }
	#nav li, #nav > ul > li { display: none; width:95%; margin:0px; padding:0px; border-bottom:1px solid #fff; }
	
	#nav > li > a{ color:#F2F2F2; margin:0px; padding: 12px 20px; text-align:center; border:none; background:#3e724e; -webkit-animation-name: showSubMenu; -webkit-animation-duration: .5s;}
	#nav > li > a:hover{ color:#ffffff; background:#f1c741;}
	#col2{ width:100%; float:left;}
	#nav .lev { position: relative;}
}

@media only screen and (max-width: 600px) {
	#nav li, #nav > ul > li { display: none; width:100%;}
}

@media only screen and (max-width: 450px) {
	#col1{ width:100%;}
	#cssmenu li a.has-sub::after{ right:29%;}
}

@media only screen and (max-width: 300px) {
	#cssmenu{ width:45px; margin:0px; float:left; min-height:35px;}
	#quick{ width:150px; margin:10px 0px; overflow:hidden;}
	#quick #search{ width:110px; margin:0px;}
}

.lev { -webkit-animation-name:showAnimation; -webkit-animation-duration: .6s; }
  
@-webkit-keyframes showAnimation {
	0% { transform:scaleY(0.1); }
	40% { transform:scaleY(1.04); }
	60% { transform:scaleY(0.90); }
	80% { transform:scaleY(1.08); }
	100% { transform:scaleY(0.98); }				
	80% { transform:scaleY(1.04); }
	100% { transform:scaleY(1); }
}

@-webkit-keyframes showSubMenu {
    0% { transform: scale(0,0); }
  100% { transform: scale(1,1); }
}

@-webkit-keyframes hideSubMenu {
  0% { transform: scale(1,1); }
  100% { transform: scale(0,0); }
 
}