/* Header Styles
-------------------------------------------------------------------------------*/

#header .nav { float: none; margin:5px 0 0 0; position:relative; list-style:none outside none; margin-right: 0 !important; }
#header .nav.first { margin: 5px 20px 0 0 !important; }
#header .nav li.navtext { margin-left:30px; }

#header .facebook, #header .twitter, #header .linkedin {
  opacity            : 0.4;
  transition         : 0.5s opacity !important;
  -moz-transition    : 0.5s opacity !important;
  -webkit-transition : 0.5s opacity !important;
}
#header .facebook:hover, #header .twitter:hover, #header .linkedin:hover {
  opacity: 1.0;
}

#header .white { display: none; position:fixed; z-index:9999999; top:0; width:100%; margin:0; padding:12px 0; background-color:#FFF; }
#header .white #logo { position:absolute; margin:0 0 0 20px; height:24px; width:145px; background-image:url(../img/sprites.png); background-position:0 32px; }
#header .white #logo img { height:24px; width:145px; }
#header .white .nav li, #header .white .nav li a { float:left; position:relative; font-size:16px; font-weight:bold; font-family:proxima_nova_rgregular, museo_sans500, helvetica, arial, sans-serif; color:rgba(128,128,128,0.5); text-decoration:none; text-transform:uppercase; transition:0.5s color; -moz-transition:0.5s color; -webkit-transition:0.5s color; }
#header .white .nav li:hover, #header .white .nav li a:hover, #header .white .nav li.active a { color:#333 !important; cursor:pointer; }
#header .white .facebook { margin-left:30px; height:18px; width:10px; background-image:url(../img/sprites.png); background-position:-145px -18px; background-repeat:no-repeat; }
#header .white .facebook img { height:18px; width:10px; }
#header .white .twitter { margin-left:15px; height:18px; width:18px; background-image:url(../img/sprites.png); background-position:-157px -18px; background-repeat:no-repeat; }
#header .white .twitter img { height:18px; width:18px; }
#header .white .linkedin { margin-left:13px; height:18px; width:18px; background-image:url(../img/sprites.png); background-position:-177px -18px; background-repeat:no-repeat; }
#header .white .linkedin img { height:18px; width:18px; }

#header .transparent-on-light { display: none; position:fixed; z-index:9999998; top:0; width:100%; margin:0; padding:12px 0; background-color: transparent; }
#header .transparent-on-light #logo { position:absolute; margin:0 0 0 20px; height:24px; width:145px; background-image:url(../img/sprites.png); background-position:0 32px; }
#header .transparent-on-light #logo img { height:24px; width:145px; }
#header .transparent-on-light .nav { float:right; margin:5px 20px 0 0; position:relative; list-style:none outside none; }
#header .transparent-on-light .nav li, #header .transparent-on-light .nav li a { float:left; position:relative; font-size:16px; font-weight:bold; font-family:proxima_nova_rgregular, museo_sans500, helvetica, arial, sans-serif; color:rgba(128,128,128,0.5); text-decoration:none; text-transform:uppercase; transition:0.5s color; -moz-transition:0.5s color; -webkit-transition:0.5s color; }
#header .transparent-on-light .nav li:hover, #header .transparent-on-light .nav li a:hover, #header .transparent-on-light .nav .active { color: #333 !important; cursor:pointer; }
#header .transparent-on-light .facebook { margin-left:30px; height:18px; width:10px; background-image:url(../img/sprites.png); background-position:-145px -18px; background-repeat:no-repeat; }
#header .transparent-on-light .facebook img { height:18px; width:10px; }
#header .transparent-on-light .twitter { margin-left:15px; height:18px; width:18px; background-image:url(../img/sprites.png); background-position:-157px -18px; background-repeat:no-repeat; }
#header .transparent-on-light .twitter img { height:18px; width:18px; }
#header .transparent-on-light .linkedin { margin-left:13px; height:18px; width:18px; background-image:url(../img/sprites.png); background-position:-177px -18px; background-repeat:no-repeat; }
#header .transparent-on-light .linkedin img { height:18px; width:18px; }

#header .transparent-on-dark { display: block; position:fixed; z-index:9999997; top:0; width:100%; margin:0; padding:12px 0; background-color: transparent; }
#header .transparent-on-dark #logo { position:absolute; margin:0 0 0 20px; height:24px; width:145px; background-image:url(../img/sprites.png); background-position:0 0; }
#header .transparent-on-dark #logo img { height:24px; width:145px; }
#header .transparent-on-dark .nav { float:right; margin:5px 20px 0 0; position:relative; list-style:none outside none; }
#header .transparent-on-dark .nav li, #header .transparent-on-dark .nav li a { float:left; position:relative; font-size:16px; font-weight:bold; font-family:proxima_nova_rgregular, museo_sans500, helvetica, arial, sans-serif; color:rgba(255,255,255,0.5); text-decoration:none; text-transform:uppercase; transition:0.5s color; -moz-transition:0.5s color; -webkit-transition:0.5s color; }
#header .transparent-on-dark .nav li:hover, #header .transparent-on-dark .nav li a:hover, #header .transparent-on-dark .nav .active a { color: #FFF !important; cursor:pointer; }
#header .transparent-on-dark .facebook { margin-left:30px; height:18px; width:10px; background-image:url(../img/sprites.png); background-position:-145px 0; background-repeat:no-repeat; }
#header .transparent-on-dark .facebook img { height:18px; width:10px; }
#header .transparent-on-dark .twitter { margin-left:15px; height:18px; width:18px; background-image:url(../img/sprites.png); background-position:-157px 0; background-repeat:no-repeat; }
#header .transparent-on-dark .twitter img { height:18px; width:18px; }
#header .transparent-on-dark .linkedin { margin-left:13px; height:18px; width:18px; background-image:url(../img/sprites.png); background-position:-177px 0; background-repeat:no-repeat; }
#header .transparent-on-dark .linkedin img { height:18px; width:18px; }

#header .dark { display: block; position:fixed; z-index:9999996; top:0; width:100%; margin:0; padding:12px 0; background-color: rgba(20,20,20,0.9); }
#header .dark #logo { position:absolute; margin:0 0 0 20px; height:24px; width:145px; background-image:url(../img/sprites.png); background-position:0 0; }
#header .dark #logo img { height:24px; width:145px; }
#header .dark .nav { float:right; margin:5px 20px 0 0; position:relative; list-style:none outside none; }
#header .dark .nav li, #header .dark .nav li a { float:left; position:relative; font-size:16px; font-weight:bold; font-family:proxima_nova_rgregular, museo_sans500, helvetica, arial, sans-serif; color:rgba(255,255,255,0.5); text-decoration:none; text-transform:uppercase; transition:0.5s color; -moz-transition:0.5s color; -webkit-transition:0.5s color; }
#header .dark .nav li:hover, #header .dark .nav li a:hover, #header .dark .nav .active a { color: #FFF !important; cursor:pointer; }
#header .dark .facebook { margin-left:30px; height:18px; width:10px; background-image:url(../img/sprites.png); background-position:-145px 0; background-repeat:no-repeat; }
#header .dark .facebook img { height:18px; width:10px; }
#header .dark .twitter { margin-left:15px; height:18px; width:18px; background-image:url(../img/sprites.png); background-position:-157px 0; background-repeat:no-repeat; }
#header .dark .twitter img { height:18px; width:18px; }
#header .dark .linkedin { margin-left:13px; height:18px; width:18px; background-image:url(../img/sprites.png); background-position:-177px 0; background-repeat:no-repeat; }
#header .dark .linkedin img { height:18px; width:18px; }

.nav.collapsible li {
  float: none;
  width: 100%;
  clear: both;
  display: none;
}

.adaptive.expanded .nav.collapsible li {
  display: list-item;
}

li.navtext {
  cursor: pointer;
}

li.menu-open {
  display: list-item;
}

li.menu-open i {
  margin-left: 10px;
}

li.menu-close {
  display: none;
}

.adaptive.expanded li.menu-open {
  display: none !important;
}

.adaptive.expanded li.menu-close {
  display: list-item !important;
}

.adaptive.expanded .nav.collapsible {
  position: relative;
  top: 15px;
}

.adaptive.expanded.white .nav.collapsible li,
.adaptive.expanded.transparent-on-light .nav.collapsible li {
  background-color: rgba(255,255,255,0.8);
  border-top: 2px solid rgba(0,0,0,0.3);
  border-left: 2px solid rgba(0,0,0,0.3);
  padding: 10px;
}

.adaptive.expanded.white .nav.collapsible li.last,
.adaptive.expanded.transparent-on-light .nav.collapsible li.last {
  border-bottom: 2px solid rgba(0,0,0,0.3);
}

.adaptive.expanded.dark .nav.collapsible li,
.adaptive.expanded.transparent-on-dark .nav.collapsible li {
  background-color: rgba(0,0,0,0.8);
  border-top: 2px solid rgba(255,255,255,0.3);
  border-left: 2px solid rgba(255,255,255,0.3);
  padding: 10px;
}

.adaptive.expanded.dark .nav.collapsible li.last,
.adaptive.expanded.transparent-on-dark .nav.collapsible li.last {
  border-bottom: 2px solid rgba(255,255,255,0.3);
}

.nav { float: right !important; }
.nav.collapsible { float: none !important; }

/* overrides for screens that can handle more than 800% width */
/* styles before this are "mobile-first", these fix them for desktops. */
@media only screen and (min-width: 760px) {
  .nav.collapsible { float: right !important; }

  .nav.collapsible li {
    float: left !important;
    width: auto;
    clear: none;
    display: list-item !important;
  }

  .nav li.menu-open, .nav li.menu-close { display: none !important; }

}