header{
  position: sticky;
  top:0;
  left:0;
  width: 100%;
  z-index:900;
}

.top-announcer {
    padding-top: .5em;
    padding-bottom: .5em;
    font-weight: 300;
    position: relative;
    z-index: 901;
}

.top-announcer p{
  margin-bottom: 0px;
  line-height: 15px;
}

.top-announcer a {
  text-decoration:none;
}
.top-announcer a:hover {
  opacity:0.8;
}

header nav a {
  padding-bottom: 10px;
}

header .logo {
  width: 250px;
  z-index: 950;
  fill: var(--color-yellow);
}

header .logoMobile {
  display: none;
}

header .socialIcon #New_Symbol{
  fill: var(--color-yellow);
}



footer {
  background:var(--color-gray);
  color:var(--color-white);
}
footer .nav a {

}


footer .logo {
  width:180px;
}

.footer {
  bottom: 0px;
}

#expandableMenu {
	position: fixed;
	top: 0;
  left:0;
	height: 100vh;
	width: 100vw;
	background-color: var(--color-gray);
	z-index: 900;
  transition: transform 0.3s ease-in-out;
  transform: translate(-100vw);
}
#expandableMenu h4 {
  margin-bottom:12px;
}
#expandableMenu.active {
  transform: translate(0vw);
}
#expandableMenu > .flex {
  height:100%;
}
#expandableMenu .flex.center {
  width:100%;
}
#expandableMenu .grid {
  width:100%;
}
#expandableMenu .menu-group {
  margin-bottom:32px;
}
#expandableMenu .social {
  margin-top:auto;
}
#expandableMenu .social a {
  margin-left:6px;
}
#expandableMenu .span-6 {
  display:flex;
  flex-direction:column;
}
#expandableMenu .span-6:first-child {
  border-right: 2px solid #888;
  margin-right: 5%;
}

#expandableMenu .span-6 a {
  padding-bottom: 12px;
}
#expandableMenu .span-6 a:hover {
  color:#e5e5e5;
}
#menuButton {
  cursor: pointer;
  z-index: 950;
  display: block;
  align-items: center;
  width: 38px;
}
.header #rect1, .header #rect2, .header #rect3 {
  transition: transform 0.2s ease, opacity 0.2s ease-out;
  fill:var(--color-yellow);
}
.header.menu-open #rect1 {
  transform: translateX(6px) translateY(-1px) rotate(45deg);
}
.header.menu-open #rect2 {
  opacity:0;
}
.header.menu-open #rect3 {
  transform:translateX(-5px) translateY(6px) rotate(-45deg)
}
.scrolly-header {
  position:fixed;
  transform:translateY(-100%);
  transition: transform 0.2s ease;
  top:0;
  left:0;
  width:100%;
  background:var(--color-gray);
  z-index:901;
  color:var(--color-yellow);
}
.scrolly-header.scrolled {
  transform:translateY(0%);
}
.scrolly-header #menuButton {
  margin-left:6px;
}
.scrolly-header .logo {
  height: 32px;
}
.scrolly-header .logo svg {
  height: auto;
  width: 50px;
}
.scrolly-header .logo * {
  fill:var(--color-yellow);
}
.scrolly-header .social a {
  margin-right:6px;
}
.scrolly-header > .pad {
  padding-left: 60px;
  padding-right: 60px;
  padding-top: 16px;
  padding-bottom: 16px;
}

#headerRight{
  height: 30px;
  z-index: 950;
  fill: white;
}

header .social {
  margin-right:6px;
}
header .social a {
  color:var(--color-yellow);
  margin-right:6px;
}

#outerFootContainer{
  padding-top: 50px;
  width: 100%;
  border-bottom: 1px solid var(--color-lt-gray);
  padding-bottom: 50px;
}

#footLinkGrid{
  width: 100%;
  flex-wrap:wrap;
}
#footLinkGrid a {
  margin-right:22px;
  margin-bottom:12px;
}

.footBelowLine{
  margin-top: 20px;
}

.belowLineLeft{
}

.belowLineRight{
  margin-left: auto;
}

.footerSocialLink{
  font-size: 10px;
  text-transform: uppercase;
}

#searchBar {
  width: 60%;
  padding-left: 0;
  border-bottom: 3px solid var(--color-lt-gray);
  -webkit-appearance:none;
  border-radius:0;
  padding-top:0;
  color:white;
  background-color:transparent;
}
footer .logo * {
  fill:var(--color-yellow);
}

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

  footer .logo {
    max-width:100%;
  }

  .top-announcer {
  padding-top:0.3em;
  position:relative;
  z-index:2000;
}

  header .logo {
    width: 250px;
    z-index: 950;
    fill: var(--color-yellow);
    display: none;
  }

  header .social a {
    color:var(--color-yellow);
    margin-right:6px;
    font-size: 15px;
  }
  .scrolly-header > .pad {
    padding-left:10%;
    padding-right:10%;
  }

  header .logoMobile{
    z-index: 950;
    width: 100px;
    display: block;
    fill: var(--color-yellow);
  }

  header .logoMobile #merge_vert_LOGO{
    max-width: 100%;
  }

  footer {
    background:var(--color-gray);
    color:var(--color-white);
  }
  footer .nav a {

  }
  .scrolly-header .logo svg {
    width:30px;
  }
  .scrolly-header .logo {
    height:18px;
  }
  .footer {
    bottom: 0px;
  }


  #expandableMenu {
    padding-bottom: 120px;
    overflow-y: scroll;
    padding-top: 90px;
  }
  #expandableMenu .span-6 {
    grid-column: span 12;
  }
  .expandableMenuOffScreen{
  	transform: translate(-100vw);
  }

  #expandableNav{
    padding-top: 40%;
  }

  #menuButton {
    cursor: pointer;
    z-index: 950;
    align-items:center;
    width: 30px;
  }

  #headerRight{
    height: 25px;
    z-index: 950;
    fill: white;
    align-items: flex-end;
    flex-direction: column;
    justify-content: center;
    margin-right: 10%;
  }

  .socialIcon{
    width: 25px;
    height: 25px;
  }

  #outerFootContainer{
    padding-top: 0px;
    width: 100%;
    border-bottom: 1px solid var(--color-lt-gray);
    padding-bottom: 50px;
    margin-right:0;
  }

  #footLinkGrid{
    grid-template-columns: auto auto;
    width: 100%;
  }

  #expandableMenu .span-6:first-child {
    border-right:none;
  }

  .header .pad {
    padding-top:12px;
    padding-bottom:12px;
  }

  #expandableMenu .span-6 form {
    margin-top:20px;
  }
}