#cssmenu { width:60%; max-width:700px; margin:0px; min-height:50px; overflow:hidden; padding-top:30px;   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:#FF8000;}

#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:250px; padding: 10px 10px; font-size: 15px; color: #fff; border-bottom: 1px solid #eeeeee; background:#ca1f26;}

#nav ul li a:hover { color: #fff; background: #232331;}



#nav ul ul { position: absolute; display:none; z-index: 1000; left: 250px; 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: #484848; border-bottom: 1px solid #eeeeee; background: #C1C1C1;}

#nav ul ul li a:hover { color:#000;}



#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:#FF8000;}





@media only screen and (max-width: 1280px) {

	#cssmenu { max-width:760px; padding-top:20px;}

#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:15px;}

#nav > li > a { display:block; padding:17px 6px 10px 6px; color:#232331; font-size:14px;    text-decoration:none;}

}

@media only screen and (max-width: 1015px) {

	 #logo{ width:100%; max-width:150px; margin:0px; overflow:hidden; float:left;}

#cssmenu { max-width:650px; padding-top:0px; padding-bottom:20px; height:50px; width:100%}

	#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:650px; padding-top:10px; padding-bottom:0px; height:20px}

	#nav > li > a { font-size:15px; padding:5px 18px;}

	 

}



@media all and (max-width: 650px){

 

	#cssmenu{ max-width:300px; margin:0px auto; min-height:40px; float:right; margin-top:5px; overflow:visible;}

	#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; min-height:40px; float:right; margin-top:-25px; 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); }

}