@font-face {font-family:'corbel'; src:url('../Fonts/corbel.ttf') format('trueype');}

#cssmenu { margin:0px; padding-left:50px; float:left;  font-family:'corbel'; src:url('../Fonts/corbel.ttf') format('trueype');}
#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: #010101; font-size: 20px; line-height: 22px; padding: 24px 10px; font-family:'corbel';}
#nav > li > a:hover { background:#d91f26; color:#FFFFFF; }
#nav li:hover > ul { }

#nav ul { position: absolute; display:none; z-index: 1000; left: auto; top:auto; width:400px; 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: 5px 14px; font-size: 16px; color: #484848; border-bottom: 1px solid #eeeeee; background: deepskyblue; font-family:'corbel';}
#nav ul li a:hover { color: #1A1A1A; background: floralwhite;}

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

#nav li:hover > ul {
    display: block;
    -webkit-animation-name: showSubMenu;
    -webkit-animation-duration: .4s;
}


.p1 #p1,.p2 #p2,.p3 #p3,.p4 #p4,.p5 #p5,.p6 #p6,.p7 #p7{ background:#d91f26; color:#FFFFFF; border-bottom:4px solid #ac191e;}

@media only screen and (max-width: 1300px) {
	#nav > li > a {font-size: 20px; line-height:28px; padding:24px  14px;}
}


@media only screen and (max-width: 1150px) {
	#nav > li > a { font-size: 13px; line-height: 50px; }
	#cssmenu { width: 60%;  padding-left:0px;}
	 
}

@media only screen and (max-width: 1015px) {
	#nav > li > a { font-size: 23px; line-height:28px; padding:24px  12px;}
}

@media only screen and (max-width: 980px) {
	#nav > li > a { font-size: 23px; line-height:28px; padding:16px  12px;}
	#quick{ margin-right:0px;}
	#cssmenu ,#lmenu{ width: 100%; float:left;}
	#nmfloat{ float:left; padding-top:5px;}
	#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 only screen and (max-width: 800px) {
	#nav > li > a { font-size: 20px; line-height:28px; padding:16px  12px;}
	
}

@media only screen and (max-width: 780px) {
	#nav > li > a {  font-size: 17px; line-height: 28px; padding: 16px 10px; }
}

@media all and (max-width: 650px){
	#cssmenu{ width:100%; margin:0px; float:left; min-height:35px; background: #d91f26;}
	#cssmenu #menu-button { display: block; cursor: pointer; border:none; float:left; width:100%;}
	#cssmenu #menu-button > a { padding:0px; border:none; background:none; float:right; margin-top:-35px; margin-left:15px; width:100%;}
	#cssmenu #menu-button #menubarwd{ float:left; padding-left:15px; padding-top:5px; font-size:28px; color:#FFFFFF; }
	#cssmenu #menu-button img{float: right;padding-right: 20px;}
    #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 { display: block; margin:40px 0px 0px 0px; }
	#nav li, #nav > ul > li { display: none; width:100%; margin:0px; padding:0px; border-bottom:1px solid #fff; }
	
	#nav > li > a{ color:#F2F2F2; margin:0px; padding: 12px 15px; text-align:center; border:none; font-size:20px; background:#ac191e; -webkit-animation-name: showSubMenu; -webkit-animation-duration: .5s;
	-webkit-border-radius:0px;-moz-border-radius:0px;border-radius:0px;}
	#nav > li > a:hover{ color:#ffffff; background:#f02830; border-bottom:none;}
	#col2{ width:100%; float:left;}
	#nav .lev { position: relative;}
	.p1 #p1,.p2 #p2,.p3 #p3,.p4 #p4,.p5 #p5,.p6 #p6,.p7 #p7{ background:#f02830; color:#FFFFFF; border-bottom:none; }

}

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