@import url(http://fonts.googleapis.com/css?family=Open+Sans);@import url(http://fonts.googleapis.com/css?family=Bree+Serif);
.menu {width:100%; box-shadow: 0 4px 10px 1px #aaa}
#cssmenu{margin:auto;max-width:1400px;  }
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button{margin:0;padding:0;border:0;list-style:none;line-height:1;display:block;position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;
 color: #0000cc}
#cssmenu:after,
#cssmenu > ul:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0;}
#cssmenu #menu-button{display:none;}
#cssmenu > ul{box-shadow:inset 0 -3px 0 rgba(0, 0, 0, 0.05);}
#cssmenu.align-right > ul > li{float:right;}
#cssmenu > ul > li{float:left;display:inline-block;}
#cssmenu.align-center > ul{float:none;text-align:center;}
#cssmenu.align-center > ul > li{float:none;}
#cssmenu.align-center ul ul{text-align:left;}
#cssmenu > ul > li > a{padding:18px 25px 21px 25px;border-right:1px solid rgba(80, 80, 80, 0.12);text-decoration:none;font-size:20px;font-weight:200;color: color: #0000cc;font-family:Verdana, Geneva, sans-serif;}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li > a:hover,
#cssmenu > ul > li.active > a{color:#ffffff;background:red;background:rgba(0, 0, 0, 0.1);}
#cssmenu > ul > li.has-sub > a{padding-right:45px;}
#cssmenu > ul > li.has-sub > a::after{content:"";position:absolute;width:0;height:0;border:6px solid transparent;border-top-color:#d3eced;right:17px;top:22px;}
#cssmenu > ul > li.has-sub.active > a::after,
#cssmenu > ul > li.has-sub:hover > a{border-top-color:#ffffff;}
#cssmenu ul ul{position:absolute;left:-9999px;top:60px;padding-top:16px;font-size:14px;}
#cssmenu.align-right ul ul{text-align:right;}
#cssmenu > ul > li > ul::after{content:"";position:absolute;width:0;height:0;border:5px solid transparent;border-bottom-color:#ffffff;top:-4px;left:20px;}
#cssmenu.align-right > ul > li > ul::after{left:auto;right:20px;}
#cssmenu ul ul ul::after{content:"";position:absolute;width:0;height:0;border:5px solid transparent;border-right-color:#ffffff;top:11px;left:-4px;}
#cssmenu.align-right ul ul ul::after{border-right-color:transparent;border-left-color:#ffffff;left:auto;right:-4px;}
#cssmenu > ul > li > ul{top:120px;}
#cssmenu > ul > li:hover > ul{top:52px;left:0;opacity:1;}
#cssmenu.align-right > ul > li:hover > ul{left:auto;right:0;}
#cssmenu ul ul ul{padding-top:0;padding-left:6px;}
#cssmenu.align-right ul ul ul{padding-right:6px;}
#cssmenu ul ul > li:hover > ul{left:180px;top:0;opacity:1;}
#cssmenu.align-right ul ul > li:hover > ul{left:auto;right:100%;opacity:1;}
#cssmenu ul ul li a{text-decoration:none;font-weight:500;padding:11px 25px;width:220px;color:#FFF;font-size:14px;background:#2f588e;box-shadow:0 2px 2px rgba(0, 0, 0, 0.1), 1px 1px 1px rgba(0, 0, 0, 0.1), -1px 1px 1px rgba(0, 0, 0, 0.1);}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li.active > a{color:#333333;background-color:#FC3;}
#cssmenu ul ul li:first-child > a{border-top-left-radius:3px;border-top-right-radius:3px;}
#cssmenu ul ul li:last-child > a{border-bottom-left-radius:3px;border-bottom-right-radius:3px;}
#cssmenu > ul > li > ul::after{position:absolute;display:block;}
#cssmenu ul ul li.has-sub > a::after{content:"";position:absolute;width:0;height:0;border:4px solid transparent;border-left-color:#777777;right:17px;top:14px;}
#cssmenu.align-right ul ul li.has-sub > a::after{border-left-color:transparent;border-right-color:#777777;right:auto;left:17px;}
#cssmenu ul ul li.has-sub.active > a::after,
#cssmenu ul ul li.has-sub:hover > a::after{border-left-color:#333333;}
#cssmenu.align-right ul ul li.has-sub.active > a::after,
#cssmenu.align-right ul ul li.has-sub:hover > a::after{border-right-color:#333333;border-left-color:transparent;}
@media all and (max-width:800px), only screen and (-webkit-min-device-pixel-ratio:2) and (max-width:1024px), only screen and (min--moz-device-pixel-ratio:2) and (max-width:1024px), only screen and (-o-min-device-pixel-ratio:2/1) and (max-width:1024px), only screen and (min-device-pixel-ratio:2) and (max-width:1024px), only screen and (min-resolution:192dpi) and (max-width:1024px), only screen and (min-resolution:2dppx) and (max-width:1024px){#cssmenu{box-shadow: 0 4px 10px 1px #aaa}
#cssmenu > ul{display:none;}
#cssmenu > ul.open{display:block;border-top:1px solid rgba(0, 0, 0, 0.1);}
#cssmenu.align-right > ul{float:none;}
#cssmenu.align-center > ul{text-align:left;}
#cssmenu > ul > li,
#cssmenu.align-right > ul > li{float:none;display:block;}
#cssmenu > ul > li > a{padding:18px 25px 18px 25px;border-right:0;}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li.active > a{background:rgba(0, 0, 0, 0.1);}
#cssmenu #menu-button{display:block;text-decoration:none;font-size:18px;font-weight:700;color: #00F;padding:18px 25px 18px 25px;text-transform:uppercase;letter-spacing:1px;cursor:pointer;}
#cssmenu ul ul,
#cssmenu ul li:hover > ul,
#cssmenu > ul > li > ul,
#cssmenu ul ul ul,
#cssmenu ul ul li:hover > ul,
#cssmenu.align-right ul ul,
#cssmenu.align-right ul li:hover > ul,
#cssmenu.align-right > ul > li > ul,
#cssmenu.align-right ul ul ul,
#cssmenu.align-right ul ul li:hover > ul{left:0;right:auto;top:auto;opacity:1;width:100%;padding:0;position:relative;text-align:left;}
#cssmenu ul ul li{width:100%;}
#cssmenu ul ul li a{width:100%;box-shadow:none;padding-left:35px;}
#cssmenu ul ul ul li a{padding-left:45px;}
#cssmenu ul ul li:first-child > a,
#cssmenu ul ul li:last-child > a{border-radius:0;}
#cssmenu #menu-button::after{display:block;content:'';position:absolute;height:3px;width:22px;border-top:2px solid #00F;border-bottom:2px solid #00F;right:25px;top:18px;}
#cssmenu #menu-button::before{display:block;content:'';position:absolute;height:3px;width:22px;border-top:5px solid #00F;right:25px;top:28px;}
#cssmenu > ul > li.has-sub > a::after,
#cssmenu ul ul li.has-sub > a::after{display:none;}
}