/**
 * Flag
 */

section.flag {
  z-index: 10;
  position: relative;
  margin: 0;
}

.flag .front {
  z-index: 2;
}

.flag .top > * {
  flex: 1;
}

.flag svg {
  width: 20px;
  height: 20px;
  cursor: pointer;
  vertical-align: middle;
}

.flag .market-logo {
  flex: 2;
  padding: 0 15px;
}

.flag .market-logo img {
  display: block;
  height: 30px;
  max-width: 100%;
  margin: 0 auto;
}

.flag.homepage .market-logo img {
  height: 38px;
}

.flag .signin {
  justify-content: flex-end;
  padding: 0 15px;
}

.flag .bottom {
  text-align: center;
}

.flag .bottom a,
.flag .submenu a {
  display: inline-block;
  font-weight: 400;
  color: #757575;
  border-bottom: 3px solid transparent;
  padding-bottom: 12px;
}

.flag .bottom a:hover,
.flag .submenu a:hover {
  color: #222;
}

.flag .bottom a.active {
  color: #222;
  border-color: #222;
}

/**
 * Search form
 */

.flag .search,
.flag .submenu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100vw;
  padding: 15px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  opacity: 0;
  transform: translateY(-100%);
  transition: opacity .6s, transform .6s ease;
  z-index: 1;
}

.flag.searching .front,
.flag.submenu-out .front {
  box-shadow: none;
}

.flag.searching .search,
.flag.submenu-out .submenu {
  opacity: 1;
  transform: translateY(0);
}

.search input {
  flex: 1;
  max-width: 660px;
  margin-right: 15px;
}

/**
 * Account popout
 */

.flag .account {
  align-self: stretch;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
}

.flag .expander {
  padding: 15px;
}

.flag .popout {
  position: absolute;
  top: 100%;
  right: 0;
  box-shadow: 
    0 1px 2px 0 rgba(0, 0, 0, .2), 
    0 1px 5px 0 rgba(0, 0, 0, .13);
}

.flag .popout a {
  display: block;
  padding: 15px;
  font-weight: 400;
}

.flag .popout a:hover {
  background-color: #ddd;
}

/**
 * Submenu for Sub Pubs
 */

.flag .submenu {
  padding: 0;
  justify-content: center;
}