/* Very top header */

#topheader-container {
  background-image: none;
  background-color: transparent;
  min-height: 120px;
  margin-bottom: 0;
}
@media screen and (max-width: 960px) {
  #topheader-container {
    margin-bottom: 0;
  }
}
@media screen and (max-width: 640px) {
  #topheader-container {
    min-height: 72px;
  }
}
#topheader-content {
  position: relative;
  max-width: 1080px;
  min-height: 120px;
}
@media screen and (max-width:640px) {
  #topheader-content { min-height: 64px; }
}
#gwlogo-topheader, #gwlogo-topheader img {
  width: 250px;
}
@media screen and (max-width: 640px) {
  #gwlogo-topheader, #gwlogo-topheader img {
    width: 150px;
  }
}
#lai-division {
  position: absolute;
  top: 90px;
  left: 125px;
}
@media screen and (max-width: 960px) {
  #lai-division {
    left: 130px;
  }
}
@media screen and (max-width: 640px) {
  #lai-division {
    display: none;
  }
}

/* Dropdown menus */

#secondary-nav {
  width: 100%;
  /*background-color: #004065;*/
  height: auto;
  margin: 0;
}
#secondary-nav > ul {
  max-width: 1080px;
  margin: auto;
  text-align: right;
}
@media screen and (min-width: 840px) {
  .is-branch #secondary-nav > ul {
    border-right: 1px solid rgb(200,177,139);
  }
  .is-branch #secondary-nav > ul > li {
    border-top: 5px solid rgb(200,177,139) !important;
    margin: -3px 0 0 -4px !important;
  }
}
@media screen and (max-width: 960px) {
  #secondary-nav >  ul {
    width: auto;
  }
}
@media screen and (max-width: 840px) {
  #secondary-nav ul.menu {
    background-color: #004065;
    border-top-width: 0;
  }
}
.nav-item {
  text-align: left;
  background-color: transparent;
  min-height: 3rem;
  line-height: 3em;
  position: relative;
  display: inline-block;
}
#nav-hours {
  display: none;
}
/*
.nav-item > a.open, .nav-item > a:focus {
  background-color: #0096d6;
  border-bottom-color: #0096d6;
  border-bottom-width: 0;
}
*/
.nav-menu li a {
  padding: 0 .75rem;
  color: #fff;
  text-transform: none;
  font-size: 1em;
  font-weight: normal;
  min-height: 3rem;
  line-height: 3em;
}
.nav-menu > li:not(:first-child):before {
  content: "|";
  color: #688A9C;
  text-align: center;
  display: inline-block;
}
@media screen and (max-width: 640px) {
  .nav-menu > li:not(:first-child):before {
    content: "";
    display: none;
  }
  #secondary-nav ul.menu li {
    width: calc(33.333% - .5em);
    background-color: #0096d6;
    display: inline-block;
    float: left;
    min-height: 0;
    line-height: normal;
    margin: 0 .5em .5em 0 !important;
  }
  #secondary-nav ul.menu li a {
    min-height: 0;
    line-height: normal;
    padding: .5em;
  }
}
.sub-nav {
/*
  background-color: #0096d6;
*/
  border-width: 0;
  box-shadow: #333 2px 2px 10px;
  margin-top: 0;
  top: 100%;
  right: 0;
  white-space: nowrap;
}
.nav-item:first-child .sub-nav {
  right: auto;
  left: 0;
}
.sub-nav a {
  display: block;
}
.sub-nav a:not(:only-child),
.sub-nav .leaf-extended a {
  display: inline-block;
}
.sub-nav li:hover{
  background-color: #004065;
}
.sub-menu-group .leaf-section-title:hover {
  background-color: #0096d6;
}
#secondary-nav ul li.expanded {
  border-width: 0;
  margin: 0;
  height: auto;
}

.center-content {
  max-width: 1080px;
}
.page-node-1 .primary-content-363 {
  max-width: 1080px;
  width: auto;
}

/* Hero image */

#hero {
  position: relative;
  max-width: 1080px;
  margin: auto;
  visibility: visible;
}
@media screen and (max-width: 1080px) {
  #hero {
    width: 100%;
  }
}
#hero img {
  width: 100%;
}
@media screen and (max-width: 640px) {
  #hero img {
    display: none;
  }
}
@media screen and (min-width: 840px) {
  .is-branch #hero {
    border-right: 1px solid rgb(200,177,139);
  }
}
#branch-name {
  position: absolute;
  bottom: 0;
  color: #fff;
  font-size: 1.3em;
  text-shadow: 1px 1px 10px rgba(0,0,0,0.5);
  border: 1px solid rgb(200,177,139);
  background-color: rgba(200,177,139,.85);
  right: 0;
  padding: .5em 1em;
  width: 100%;
  box-sizing: border-box;
  text-align: right;
}
@media screen and (max-width: 1080px) {
  #branch-name {
    bottom: 3rem;
    font-size: 1em;
  }
}
@media screen and (max-width: 795px) {
  #branch-name {
    /* bottom: 132px; */
  }
}
@media screen and (max-width: 640px) {
  #branch-name {
    /* bottom: calc(100% + 6em); */
  }
}

/* Search box on home and internal pages */

#primo-container {
  background-color: #fff;
  display: flex;
  border-radius: 3px;
  align-items: center;
  position: relative;
  justify-content: space-between;
  margin: 4em auto auto;
}

#internal-search #primo-container {
  margin: auto;
}

#primo-container fieldset {
  width: 100%;
}
/* Can't use display:flex on fieldset in Chrome (known bug) */
#primo-container #fieldset-inner-wrapper {
  display: flex;
  width: 100%;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: center;  
}

#search-input {
  height: 60px;
  border-radius: 3px;
  padding-left: 1em;
  font-size: 1.2em;
  border-width: 0;
  box-sizing: border-box;
  outline: none;
  flex-grow: 1;
  text-overflow: ellipsis;
}
#search-input:focus {
  background-image: linear-gradient(to left, transparent 0, #fff 30px),
                    linear-gradient(to right, transparent 0, #fff 30px),
                    linear-gradient(to top, rgba(0, 150, 214, .75) 0, transparent 6px);
  background-size: 30px 100%, 30px 100%, 100% 20px;
  background-position: left bottom, right bottom, left bottom;
  background-repeat: no-repeat, no-repeat, no-repeat;
}
#search-input::-ms-clear {
  width: 1.2em;
  height: 1.2em;
}
#internal-search #search-input {
  height: auto;
  padding-left: .5em;
  align-self: stretch;
}

.primo-divider {
  height: 30px;
  -webkit-transform: rotate(15deg);
  -ms-transform-transform: rotate(15deg);
  transform: rotate(15deg);
  border: 1px solid #e1e1e1;
  border-width: 0 1px 0 0;
  width: 1px;
  margin-left: .5em;
  margin-right: 1em;
  z-index: 1;
}
#internal-search .primo-divider {
  height: 20px;
}

#scope-dropdown {
  line-height: 1.5em;
}

#scope-select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border-width: 0;
  height: 40px;
  line-height: 40px;
  /* SVG triangle */
  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpolygon%20points%3D%220%2C0%2012%2C0%206%2C12%22%2F%3E%3C%2Fsvg%3E');
  background-repeat: no-repeat;
  background-size: 12px 12px;
  background-position: calc(100% - .5em) 50%;
  background-color: transparent;
  padding-right: 24px;
}

/* Hide the default arrow in IE 10 and 11 (appearance:none doesn't seem to work here) */
#scope-select::-ms-expand {
  display: none; 
}

/* Prevent the default bright blue */
#scope-select:focus::-ms-value {
  background: transparent;
  color: inherit;
}

/* In FF, put the focus ring around the select and use something of a hack to hide the odder-looking inner one */
#scope-select:focus {
  background-color: transparent;
  outline: 1px dotted #000;
}
#scope-select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #000;
}
#scope-select:-moz-focusring * {
  color: #000;
  text-shadow: none;
}

#primo-dropdown-copy {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,.25);
  display: none;
  box-sizing: border-box;
  z-index: 4;
  text-align: left;
}

#primo-dropdown-copy ul {
  white-space: nowrap;
  color: #53738c;
  font-style: italic;
  box-shadow: 0 1px 3px 0 rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 2px 1px -1px rgba(0,0,0,.12);
  margin: 0;
  padding: 0;
  list-style-type: none;
}
@media screen and (max-width: 400px) {
  #primo-dropdown-copy ul {
    font-size: .9em;
  }
}
#primo-dropdown-copy .search-query {
  color: #545454;
  font-style: normal;
  padding-right: .5em;
}
#primo-dropdown-copy li {
  margin: 0;
  padding: 0;
}
#primo-dropdown-copy button {
  padding: 0 16px;
  background-color: transparent;
  color: #53738c;
  width: 100%;
  height: 36px;
  line-height: 36px;
  text-align: left;
  display: block;
  box-sizing: border-box;
}
#primo-dropdown-copy button:hover, #primo-dropdown-copy button:focus, #primo-dropdown-copy button.highlightedQuery {
  background-color: #f2f2f2;
}

#primo-dropdown-copy button:focus {
  outline: 1px dotted currentColor;
}

@media screen and (max-width: 940px) and (min-width: 641px) {
  #home-search #scope-dropdown {
    position: relative;
    flex-basis: 1em;
    flex-shrink: 1;
    flex-grow: 0;
  }
  #home-search #search-input {
    flex-basis: calc(100% - 2em);
  }
  #home-search #scope-select {
    position: absolute;
    right: 0;
    top: -20px;
    z-index: 5;
  }
  #home-search #scope-select:not(:focus) {
    color: transparent;
  }
  #home-search #scope-select:focus {
    background-color: #eee;
    padding: 0 .5em;
    box-shadow: 0 2px 5px rgba(0,0,0,.25);
  }
  #home-search #scope-select:focus {
    min-width: 300px;
  }
  #home-search #scope-dropdown ::-ms-value {
    display: none;
  }
  #home-search #scope-select:focus::-ms-value {
    display: block;
  }
  #home-search #scope-select option {
    color: #000;
  }
}
@media screen and (max-width: 640px) {
  #primo-container {
    align-items: flex-start;
    background-color: #006798;
  }
  #primo-container fieldset {
    min-width: calc(100% - 2em - 30px); /* Not fully sure why min-width is improving this */
  }
  #primo-container #fieldset-inner-wrapper {
    flex-wrap: wrap;
    justify-content: flex-end;
    text-align: left;
  }
  #search-input {
    border-radius: 3px 0 0 3px;
    flex-basis: calc(100% - 30px - 2em);
  }
  #primo-dropdown-copy {
    top: 60px;
  }
  #internal-search #primo-dropdown-copy {
    top: 50px;
  }
  #scope-dropdown {
    margin-right: -60px; /* to make it appear to be fully right-aligned under the magnifying glass despite being a different flex box */
  }
  #internal-search #scope-dropdown {
    margin-right: -50px;
  }
  .primo-divider {
    display: none;
  }
  #scope-select {
    font-size: 1em;
    line-height: normal;
    height: auto;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #fff;
    /* white version of SVG triangle */
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpolygon%20fill%3D%22%23fff%22%20points%3D%220%2C0%2012%2C0%206%2C12%22%2F%3E%3C%2Fsvg%3E');
  }
  #scope-select:focus {
    min-width: 200px;
    color: #fff;
  }
  #scope-select:focus option {
    color: #000;
  }
}

@media screen and (min-width: 1080px) {
  #internal-search #scope-dropdown {
    position: relative;
    flex-basis: 1em;
    flex-shrink: 1;
    flex-grow: 0;
  }
  #internal-search  #search-input {
    flex-basis: calc(100% - 2em);
    font-size: 1em;
    height: calc(3rem - 1em);
  }
  #internal-search  #scope-select {
    position: absolute;
    right: 0;
    top: -20px;
    z-index: 5;
  }
  #internal-search #scope-select:not(:focus) {
    color: transparent;
    background-color: transparent;
  }
  #internal-search  #scope-select:focus {
    background-color: #eee;
    padding: 0 .5em;
    box-shadow: 0 2px 5px rgba(0,0,0,.25);
  }
  #internal-search  #scope-select:focus {
    min-width: 300px;
  }
  #internal-search  #scope-dropdown ::-ms-value {
    display: none;
  }
  #internal-search  #scope-select:focus::-ms-value {
    display: block;
  }
  #internal-search  #scope-select option {
    color: #000;
  }
}

#primo-go {
  background-color: #fff;
  padding: 15px;
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
  position: relative;
  box-sizing: content-box;
}
#internal-search #primo-go {
  padding: 0 .5em 0 0;
}
#primo-go:focus {
  outline: 1px dotted #0f7d00;
  outline-offset: -5px;
}
#primo-go svg {
  transform:scale(-1,1);
  fill: #0f7d00;
  height: 30px;
}
#primo-dropdown-copy svg {
  transform:scale(-1,1);
  width: 16px;
  height: 16px;
  vertical-align: middle;
  fill: #999;
}

@media screen and (max-width: 640px) {
  #internal-search #search-input {
    height: 50px;
    padding-left: 1em;
    font-size: 1em;
  }
  #primo-go {
    border-radius: 0 3px 3px 0;
    padding: 15px;
  }
  #internal-search #primo-go {
    height: 30px;
    min-height: 30px;
    padding: 10px;
  }
}

#home-search #primo-container legend span, #home-search-explanation {
  text-shadow: 0 0 5px rgba(0,0,0,1);
}
#home-search-explanation {
  margin: 1em auto;
  max-width: 600px;
  min-height: 3.5em; /* 2x the line-height plus .5em for its padding (so that things don't jump around when text is changed to one line instead of two) */
}
#home-search {
  position: absolute;
  text-align: center;
  width: 800px;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
@media screen and (max-width: 1080px) {
  #home-search {
    width: 100%;
  }
  #primo-container, #home-search-explanation {
    width: 750px;
  }
}
@media screen and (max-width: 1000px) {
  #primo-container, #home-search-explanation {
    max-width: 700px;
  }
}
@media screen and (max-width: 940px) {
  #primo-container, #home-search-explanation {
    max-width: 600px;
  }
  #internal-search #primo-container {
    width: 100%;
    max-width: 700px;
  }
}
@media screen and (max-width: 720px) {
  #primo-container {
    margin-top: 1em;
  }
}
@media screen and (max-width: 640px) {
  #home-search {
    position: static;
    transform: none;
    background-color: #004065;
  }
  #primo-search-form {
    padding: .5em;
    box-sizing: border-box;
  }
  #primo-container, #home-search-explanation {
    width: 100%;
    margin-top: 0;
    max-width: 100%;
  }
  #home-search-explanation {
    font-size: .9em;
    padding: 0 .7em .5em;
    box-sizing: border-box;
    text-shadow: none;
    max-width: 640px;
    text-align: right;
  }
  #hero-image {
    display: none;
  }
}

#home-search, #home-search-explanation, #home-search #primo-container legend span, #home-search a {
  color: #fff;
}
#primo-search-form input[type=text]::-webkit-input-placeholder { color: #777; opacity: 1; }
#primo-search-form input[type=text]:-moz-placeholder { color: #777; opacity: 1; } /* FF 4-18 */
#primo-search-form input[type=text]::-moz-placeholder { color: #777; opacity: 1; } /* FF 19+ */
#primo-search-form input[type=text]:-ms-input-placeholder { color: #777; opacity: 1; } /* IE 10+ */
#primo-search-form input[type=text]:focus::-webkit-input-placeholder { opacity: 0.5; }
#primo-search-form input[type=text]:focus:-moz-placeholder { opacity: 0.5; }
#primo-search-form input[type=text]:focus::-moz-placeholder { opacity: 0.5; }
#primo-search-form input[type=text]:focus:-ms-input-placeholder { opacity: 0.5; }

#home-search #primo-container legend span {
  font-size: 1.3em;
  font-weight: bold;
  margin-bottom: 1em;
  display: block;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}
#internal-search #primo-container legend span {
  /* Copy of .sr-only styles */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

@media screen and (max-width: 840px) {
  #home-search #primo-container legend span {
    margin-bottom: .75em;
  }
}
@media screen and (max-width: 720px) {
  #home-search #primo-container legend span {
    /* Copy of .sr-only styles */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
  }
}
#hero-image {
  width: 100%;
}

#internal-search {
  position: absolute;
  top: auto;
  left: 0;
  bottom: 100%;
  min-height: 3rem;
  line-height: 3rem;
  z-index: 50;
  padding: .5em;
  box-sizing: border-box;
}
#internal-search #primo-search-form {
  width: 450px;
}
@media screen and (max-width: 1080px) {
  #internal-search {
    bottom: auto;
    top: 0;
    position: static;
    background-color: #004065;
    z-index: 10;
  }
  #internal-search #primo-search-form {
    width: auto;
  }
}
@media screen and (max-width: 640px) {
  #internal-search {
    line-height: normal;
    padding: 0;
  }
}

/* Row of featured service icons on internal pages */

#internal-featured-services .promo-items-item, #internal-featured-services .promo-title {
  display: inline-block;
  font-size: 1em;
  white-space: nowrap;
  line-height: 30px;
  font-weight: normal;
  position: relative;
  margin: 0;
  color: #2971a7;
  font-family: "AvenirLTStd-Roman", Helvetica, Arial, sans-serif;
}
@media screen and (max-width: 640px) {
  /* Copy of .sr-only styles */
  #internal-featured-services .promo-title {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
  }
}
#internal-featured-services img {
  width: 30px;
  display: inline-block;
}
#internal-featured-services {
  margin: .5em .5em 1em;
  text-align: right;
  max-width: 1080px;
  position: inherit;
  z-index: 1;
}
#internal-featured-services .promo-label > * {
  padding: .25em 1em;
  margin: 0 -.5em;
  border: 1px solid transparent;
  z-index: 3 !important;
  position: relative;
  display: inline-block;
}
#internal-featured-services .promo-label a {
  text-decoration: none;
}
#internal-featured-services .promo-items-item:hover .promo-label > *,
#internal-featured-services .promo-items-item.focus-within .promo-label > * {
  border: 1px solid #ccc;
  background-color: #eee;
}
#internal-featured-services .promo-items-item:not(.has-promo-body):hover .promo-label h4,
#internal-featured-services .promo-items-item.focus-within:not(.has-promo-body) .promo-label h4 {
  text-decoration: underline;
  color: #a75523;
}
#internal-featured-services .promo-items-item.has-promo-body .promo-label > * {
  border-bottom-width: 0;
  cursor: pointer;
}
#internal-featured-services .promo-items-item.has-promo-body .promo-label > *:focus {
  outline: thin dotted;
}
#internal-featured-services .promo-body {
  display: none;
}
#internal-featured-services .promo-items-item:hover .promo-body,
#internal-featured-services .promo-items-item.open .promo-body {
  z-index: 2 !important;
  display: block;
  position: absolute;
  top: 100%;
  margin-top: -2px;
  right: -.5em;
  border: 1px solid #ccc;
  background-color: #eee;
  text-align: left;
  padding: .5em 1em;
  box-shadow: 0px 8px 10px 0px rgba(0, 0, 0, 0.15);
}
#internal-featured-services .has-promo-body .promo-title::after {
  content: "+";
  margin-left: 4px;
  display: inline-block;
  width: 11px;
}
#internal-featured-services .has-promo-body.open .promo-title::after {
  content: "–";
  /* Slightly reposition to line up with + symbol */
  position: relative;
  top: -1px;
  left: -1px;
}
@media screen and (max-width: 500px) {
  #internal-featured-services .promo-items-item {
    white-space: normal;
  }
  #internal-featured-services .promo-label > * {
    padding: .25em .8em;
  }
  #internal-featured-services .promo-body {
    min-width: 300px;
  }
}