:root {
  --primary-color: #003366;
  --secondary-color: #CCCC33;
}

#homeLink > a:link, #homeLink > a:visited {
	text-decoration: none;
	color: white;
}

#homeLink > a:hover {
	text-decoration: underline;
}

#label {
    white-space: nowrap;
    padding: 10px 25px 0px 0px;
}

.star {
  position: relative;
  
  display: inline-block;
  width: 0;
  height: 0;
  
  margin-left: .9em;
  margin-right: .9em;
  margin-bottom: 1.2em;
  
  border-right:  .3em solid transparent;
  border-bottom: .7em  solid  #CCCC33;
  border-bottom: .7em  solid var(--secondary-color);
  border-left:   .3em solid transparent;

  /* Controlls the size of the stars. */
  font-size: 10px;
}
.star:before, .star:after {
    content: '';
    
    display: block;
    width: 0;
    height: 0;
    
    position: absolute;
    top: .6em;
    left: -1em;
  
    border-right:  1em solid transparent;
  border-bottom: .7em  solid  #CCCC33;
    border-bottom: .7em  solid var(--secondary-color);
    border-left:   1em solid transparent;
  
    transform: rotate(-35deg);
  }
  
.star:after {  
    transform: rotate(35deg);
  }
.sup {
  font-size: 7px;

  /* Zero out the line-height so that it doesn't
     interfere with the positioning that follows */
  line-height: 0;

  /* Where the magic happens: makes all browsers position
     the sup/sup properly, relative to the surrounding text */
  position: relative;

  /* Move the superscripted text up */
  top: -12px;
  
  letter-spacing:0px;
}
#header {
  width: 100%;
  background: #003366;
  background: var(--primary-color);
  color:white;
  height: 40px;
  display:flex;
  flex-wrap: nowrap;
}
.holder {
  background: #003366;
  background: var(--primary-color);
  color:white;
  font-size:24px;
  font-family:'Cormorant Unicase', serif;
  letter-spacing: 3px;
  padding-left: 25px;
  padding-top: 15px;
}
#title {
  font-size:24px;
  font-family:'Cormorant Unicase', serif;
  letter-spacing: 3px;
}
#logo {
  padding:5px 25px;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}
/*------------ menu -----------------*/
nav {
  display: block;
}
nav ul {
  margin: 0;
  padding:0;
  list-style: none;
}
.nav a, .nav span {
  display:block; 
  background: #003366;
  background: var(--primary-color);
  color:white; 
  text-decoration: none;
  padding: .8em 1.8em;
  font-size: 80%;
  letter-spacing: 2px;
  text-shadow: 0 -1px 0 #000;
  position: relative;
  white-space: nowrap;
}
.nav{  
  display: flex;
  flex-wrap: nowrap;
  vertical-align: top; 
  box-shadow: 1px -1px -1px 1px #000, -1px 1px -1px 1px #fff, 0 0 6px 3px #fff;
  border-radius:6px;
}
.nav li{position: relative;}
.nav > li { 
  border-bottom: 4px #aaa solid; 
  margin-right: 1px; 
} 
.nav > li > a, .nav > li > span { 
  margin-bottom:1px;
  color:white;
  text-decoration:none;
  /*box-shadow:inset 0 2em .33em -.5em #336699; */
}
.nav > li:hover , .nav > li:hover > a, .nav > li:hover > span {
	border-bottom-color:#CCCC33;
	border-bottom-color:var(--secondary-color);
}
.nav li:hover > a, .nav li:hover > span {
	color:#CCCC33;
	color:var(--secondary-color);
}
.nav > li:first-child  {border-radius: 4px 0 0 4px;} 
.nav > li:first-child>a, .nav > li:first-child > span {border-radius: 4px 0 0 0;}
.nav > li:last-child  { 
  border-radius: 0 0 4px 0; 
  margin-right: 0;
} 
.nav > li:last-child > a, .nav > li:last-child > span {border-radius: 0 4px 0 0; }
.nav li li a, .nav li li span {
  margin-top:1px;
  color:white;
  text-decoration:none;
}
.nav li a:first-child:nth-last-child(2):before, .nav li span:first-child:nth-last-child(2):before { 
  content:""; 
  position: absolute; 
  height:0; 
  width: 0; 
  border: 5px solid transparent; 
  top: 50% ;
  right:5px;  
}
 
/* submenu positioning*/
.nav ul {
  position: absolute;
  white-space: nowrap;
  border-bottom: 5px solid #CCCC33;
  border-bottom: 5px solid var(--secondary-color);
  z-index: 10;
  left: -99999em;
  background: #CCCC33;
  background: var(--secondary-color);
  box-shadow: 0 10px 10px #333;
}
.nav > li:hover > ul {
  left: auto;
  padding-top: 5px  ;
  min-width: 100%;
}
.nav > li li ul {  border-left:1px solid #fff;}

.menuItem {
  color:white;
}

.nav > li li:hover > ul { 
  left: 100%;
  top: -1px;
}
/* arrow hover styling */
.nav > li > a:first-child:nth-last-child(2):before, .nav > li > span:first-child:nth-last-child(2):before { 
  border-top-color: #aaa; 
}
.nav > li:hover > a:first-child:nth-last-child(2):before, .nav > li:hover > span:first-child:nth-last-child(2):before {
  border: 5px solid transparent; 
  border-bottom-color: #CCCC33;
  border-bottom-color: var(--secondary-color);
  margin-top:-5px
}
.nav li li > a:first-child:nth-last-child(2):before, .nav li li > span:first-child:nth-last-child(2):before {  
  border-left-color: #aaa; 
  margin-top: -5px
}
.nav li li:hover > a:first-child:nth-last-child(2):before, .nav li li:hover > span:first-child:nth-last-child(2):before {
  border: 5px solid transparent; 
  border-right-color: #CCCC33;
  border-right-color: var(--secondary-color);
  right: 10px; 
}

.menuHolder {
  margin-right: 5%;
}