#cssmenu { width:50%; max-width:600px; margin:0px; min-height:50px; overflow:hidden; padding-top:20px;   float:right;  font-family:'Roboto', sans-serif;  }
#cssmenu #menu-button { display: none;}

#nav { position:absolute; display: block; list-style: none; padding: 0; margin: 0; z-index: 500; }
#nav li { display:block; position: relative; float:left; margin: 0; padding: 0; background:url(../images/sline.png) center right no-repeat;}
#nav #lilast{ background:none;}
#nav > li > a { display:block; padding:14px 20px 16px 20px; color:#232331; font-size:16px;    text-decoration:none;}
#nav > li > a:hover {color:#3f3f3e;}
#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:160px; 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: 10px 10px; font-size: 15px; color: #fff; border-bottom: 1px solid #eeeeee; background:#3f3f3e;}
#nav ul li a:hover { color: #fff; background: #5a5a59;}

#nav ul ul { position: absolute; display:none; z-index: 1000; left:200px; top:0; width:160px; 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: 200px; padding: 10px 10px; font-size: 15px; color: #fff; border-bottom: 1px solid #eeeeee; background: #3f3f3e;}
#nav ul ul li a:hover { color:#fff;}

#cssmenu li.has-sub::after { display: block; content: ""; position:absolute; width: 0; height: 0; margin-left: 75px; top: 25px; border: 5px solid transparent; border-top-color: #7a8189;}

#cssmenu > ul > li:hover::after { border-top-color: #fda703;}

ul#left::after { display: block; content: ""; position: absolute; width: 0; height: 0; top: 10px; left:-20px; border: 6px solid transparent; border-right-color: #000;}

.p1 #p1,.p2 #p2,.p3 #p3,.p4 #p4,.p5 #p5,.p6 #p6,.p7 #p7,.p8 #p8,.p9 #p9,.p10 #p10,.p11 #p11{ color:#e21a36;}


@media only screen and (max-width: 1280px) {
#cssmenu { max-width:760px; padding-top:30px; width:63%}
#nav > li > a { display:block; padding:17px 20px 19px 20px; color:#232331; font-size:15px;    text-decoration:none;}
}
@media only screen and (max-width: 1100px) {
	#cssmenu { max-width:760px; padding-top:30px;}
#nav > li > a { display:block; padding:17px 22px 10px 22px; color:#232331; font-size:15px;    text-decoration:none;}
}
@media only screen and (max-width: 1015px) {
	 
#cssmenu { max-width:650px; padding-top:0px; padding-bottom:20px; height:50px}
	#nav > li > a { font-size:15px; padding:5px 18px;}
	#nav li { display:block; position: relative; float:left; margin: 0; padding: 0; background:none}
}
@media only screen and (max-width: 835px) {
#cssmenu { max-width:700px; padding-top:10px; width:100%;padding-bottom:5px;}
	#nav > li > a { font-size:15px; padding:5px 20px;}
	 
}

@media all and (max-width: 650px){
 
	#cssmenu{ max-width:500px; margin:0px auto;   float:right;    height:35px; margin-top:5px; padding-top:2px; padding-bottom:0px; overflow:visible; background:#2c4b82}
	#cssmenu #menu-button { display: block; cursor: pointer; border:none;}
	#cssmenu #menu-button > a { padding:0px; border:none; background:none;}
	#cssmenu #menu-button > a span{ display:block; float:left; color:#ffffff; font-size:15px; padding:9px 10px;}
	#cssmenu #menu-button > a img{ float:right; margin-right:10px;}
    #cssmenu ul.open li, #cssmenu > ul.open > li { display: block; }
    #cssmenu ul ul::after { display: none; }
	
	#cssmenu li.has-sub1::after,#cssmenu li.has-sub2::after{ display:none;}
	
	#nav { position:absolute; display: block; width:90%; max-width:300px; height:45px; margin:0px 20px 0px 0px; float:right; overflow:visible; }
	#nav li, #nav > ul > li { display: none; width:100%; margin:0px; padding:0px; }
	
	#nav > li > a{ color:#292929; font-size:17px; padding: 10px 20px; text-align:center; border:none; background:#c7cfd2; -webkit-animation-name: showSubMenu; -webkit-animation-duration: .4s; border-bottom:1px solid #fff;}
	#nav > li > a:hover{  border-top:none; background:#4c9ed0;}
	#nav ul{ position: relative; left: auto; top: auto; padding-left: 0;  padding-right: 0; right: auto; width:100%;}
	#nav ul li a { border: 0; background:#e39960; width: 100%; margin:0 auto; padding: 8px 0px; text-align:center;}
	#nav ul li:hover a{ border:none;}
	#nav ul ul{ position:absolute; left: auto; top: auto; padding-left: 0;  padding-right: 0; right: auto; width:100%;}
	#nav ul ul li a{ width: 100%; margin:0 auto; padding: 8px 0px; text-align:center;}
	
}

@media all and (max-width: 400px){
	 
	#cssmenu{ max-width:300px; margin:0px auto;  float:right; margin-top:15px; overflow:visible;}
	 
	
	# 
	
}
.anishow{ -webkit-animation-name: showSubMenu; -webkit-animation-duration: .4s;}
.anihide{ -webkit-animation-name: hideSubMenu; -webkit-animation-duration: .4s;}

@-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); }
 
}

.show { -webkit-animation-name:showAnimation; -webkit-animation-duration: .5s; }
.hide { -webkit-animation-name:hideAnimation; -webkit-animation-duration: .5s; }
 
  
@-webkit-keyframes showAnimation {
	0% { transform:scaleY(0.1); }
	40% { transform:scaleY(1.04); }
	60% { transform:scaleY(0.98); }
	80% { transform:scaleY(1.04); }
	100% { transform:scaleY(0.98); }				
	80% { transform:scaleY(1.02); }
	100% { transform:scaleY(1); }
}

@-webkit-keyframes hideAnimation {
  0% { transform:scaleY(1); }
  60% { transform:scaleY(0.98); }
  80% { transform:scaleY(1.02); }
  100% { transform:scaleY(0); }
}