/*****************************************************************************
 * NAV BAR
 ****************************************************************************/
.landing {background-color: var(--very-light-blue);}

#login-container button {float: none;}

#logo-container {text-align: center;}

#logo {position: relative; z-index: 101;}

nav.landing { /* See also primary.css */
  display: flex;
  justify-content: flex-end;
  border-bottom: 1px solid var(--green);
  position: sticky;
  position: -webkit-sticky; /* Safari */
  top: 0;
}

/* "About Us" splits to 2 line, so move the tab bottom border down */
a.current-tab.landing:before { /* See also @media and primary.css */
  border: 1px solid #ffffff;
  width: 97%;
  transform: translateY(18px);
}

.error {color: red;}

/* MEDIA QUERIES *************************************************************
   DEVICE          SCREEN SIZE
   Samsung S7 edge 360 x 640
   iPad, 2nd gen   768 x 1024
*/
/* Bottom border is normal; but when "About Us" splits to 1 line, it moves down. */
@media only screen and (min-width: 382px) {
  a.current-tab.landing:before {transform: translateY(-3px);}
}

/* Button floats right; but when narrow, button is to left beside inputs. */
@media only screen and (min-width: 402px) {
  #login-container button {float: right;}
}

/* Login container floats right; but when narrow, it is block-level. */
@media only screen and (min-width: 589px) {
  #login-container {
    display: inline-flex;
    float: right;
    margin: 20px 0 0;
  }
}

/* Bottom border is tab's width; but when narrow, it resizes with tab. */
@media only screen and (min-width: 777px) {
  a.current-tab.landing:before {width: 145.5px;}
}

/* Logo is large and centered in space; but when narrow, is smaller. */
@media only screen and (min-width: 1200px) {
  #logo {transform: scale(2) translate(-70%, 11px);}
}