html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
 
  font-size: 100%;
  
  vertical-align: baseline;
 
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html { overflow-y: scroll; }
 
 

 
/** page structure **/
 

 

#menu {
  display: block;
  position: relative;
  z-index: 99;
      padding-left: 30%;
}

#menu li {
  display: block;
  float: left;
  font-family: 'Open Sans', sans-serif; 
}
#menu li a {
    display: block;
    position: relative;
    float: left;
    font-family: 'Open Sans', sans-serif; 
    padding: 0 25px;
    font-size: 14px;
    text-transform: uppercase;
    line-height: 70px;
    font-weight: 500;
    text-decoration: none;
    color: #52658c;
}
#menu li a:hover, #menu li a.active {
  background: #fff;
  color: #2c343b;
}

#menu li ul {
  display: none;
  position: absolute;
  top: 70px;
  width: 200px;
  background: #fff;
  z-index: -1;
  -webkit-box-shadow: 0 2px 7px rgba(0,0,0,0.45);
  -moz-box-shadow: 0 2px 7px rgba(0,0,0,0.45);
  box-shadow: 0 2px 7px rgba(0,0,0,0.45);
}
#menu li ul li {
  display: block;
  width: 200px;
}
#menu li ul li a {
  display: block;
  float: none;
  color: #52658c;
  font-size: 14px;
  line-height: 50px;
  padding: 0 15px;
}
#menu li ul li a:hover {
  background: #52658c;
  color: #fff;
}

#menu li ul.expanded {
  width: 400px;
}
#menu li ul.expanded li { margin-right: 200px; }



#menu li ul li ul {
  display: none;
  position: absolute;
  left: 200px;
  top: 0;
  height: 100%;
  background: none;
   font-size: 14px;
   text-transform:none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
    #menu li ul li ul a
    {
        font-size: 13px;
        text-transform: none;
    }



#menu li ul li ul li a { color: #fff; }
#menu li ul li ul li a:hover { text-decoration:none; background:  #000; }

#menu li ul li.purple a:hover, #menu li ul li.purple a.active { background:  #52658c; color: #fff; }
#menu li ul li.purple ul { background: #52658c; height:550px;}
#menu li ul li.purple ul a:hover { background:  #000; color: #fff; }
 

#menu li ul li.green a:hover, #menu li ul li.green a.active { background: #52658c; color: #fff; }
#menu li ul li.green ul { background: #52658c;     height: 360px;}
#menu li ul li.green ul a:hover { background:  #000; color: #fff; }

#menu li ul li.aqua a:hover, #menu li ul li.aqua a.active { background: #52658c; color: #fff; }
#menu li ul li.aqua ul { background: #52658c; color: #fff;     height: 350px;}
#menu li ul li.aqua ul a:hover { background:  #000; color: #fff; }

#menu li ul li.red a:hover, #menu li ul li.red a.active { background: #52658c; color: #fff; }
#menu li ul li.red ul { background:#52658c; }
#menu li ul li.red ul a:hover { background:  #000; color: #fff; }

#menu li ul li.blue a:hover, #menu li ul li.blue a.active { background: #52658c; color: #fff; }
#menu li ul li.blue ul { background:#52658c; }
#menu li ul li.blue ul a:hover { background:  #000; color: #fff; }

#menu li ul li.gold a:hover, #menu li ul li.gold a.active { background: #52658c; color: #fff; }
#menu li ul li.gold ul { background: #52658c; }
#menu li ul li.gold ul a:hover { background:  #000; color: #fff; }


/** clearfix **/
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
 
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }



@media only screen and (max-width:1024px)
{
    #menu
    {
        display: block;
        position: relative;
        z-index: 99;
        padding-left: 10%;
    }
}

@media only screen and (max-width:786px)
{
#menu {
    display: block;
    position: relative;
    z-index: 99;
    padding-left: 10%;
}

}




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

#menu {
    display: none;
    position: relative;
    z-index: 99;
    padding-left: 30%;
}

}