html {
  width: 100%;
}

body {
  background-color: white;
  padding: 0;
  margin: 0;
  font-family: Oswald;
  color: #868686;
  text-align: center;
  width: 100%;
  /* Olswald font is kinda tiny in the default size. Bump it up a tad. */
  font-size: 1.25em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
  color: dimgray;
}

a {
  text-decoration: none;
  color: #868686;
}

a.inside-page {
  text-decoration: underline;
}

h1.gal-label {
  padding: 0;
  margin: 0;
  text-align: left;
}

#main-container {
  margin: 10px;
}

#header {
  top: 0px;
  left: 0px;
  background-color: white;
  text-align: left;
  padding: 0;
  margin: 0;
  opacity: 0.95;
  height: 4.25em; /* Adjust top of #about & #contact to be -1 multiplied by this */
  width: 100%;
  transition: visibility 1s, opacity 1s;
}
/* logo to left inside of nav bar */
#logo_div {
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px 0 0 10px;
}
.logo {
  height: 3.5em;
}
/* nav element to right inside of nav bar */
nav {
  position: fixed;
  top: 0;
  right: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  opacity: 0.95;
}
/* No bullets in the list of links */
nav ul {
  position: relative; /* so that nav can be positioned absolutely within this box and ul containter will span width */
  list-style-type: none;
  margin: 0;
  padding: 10px 10px 10px 0;
  text-align: right;
}
/* List with links and a hamburger */
nav li {
  display: inline;
  margin: 0;
  padding: 0;
}
/* links can be visible */
.navon {
  display: inherit;
  background-color: white;
  text-decoration: underline;
}
/* links can be hidden */
.navoff {
  display: none;
  background-color: transparent;
}

.fat-bottom {
  padding-bottom: 1em;
}

/* So div heading won't be obscured by header. Set top = height of header */
#about,
#contact {
  position: relative;
  visibility: hidden;
  top: -5px;
}

/* So div will be at top of page when navigating to it */
#galleries-content,
#about-content {
  padding-bottom: 1em;
}

/*
Use padding-top, rather than margin-top, to get page to scroll all the way
to the top upon click of #home anchor. If margin-top is used, the page will
not scroll all the way to the top, and the title of the first gallery will be
partially hidden behind the nav bar.
*/
#galleries-content {
  clear: left;
}

/* Align contact section to the left */
#about-content,
#contact-content {
  text-align: left;
}

.about-photo {
  width: 100%;
  height: auto;
}

.gal-cell-left {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.gal-cell-left img {
  width: 100%;
}
.left-side {
  margin-right: 0;
}
.gal-table {
}
.gal-row {
}

/* Hide this by default */
#submit_result_container {
  display: none;
}

/* Prevent page zoom when touch input element on mobile Safari */
input,
select,
textarea {
  font-size: 16px;
}

/* Hide contact form by default */
#contact_us {
  display: none;
}

footer {
  background: white;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  padding: 10px;
  font-size: small;
  transition: visibility 2s, opacity 2s;
}

.my-em {
  font-weight: bold;
}

#mailing-address {
  padding-bottom: 0.5em;
}

/* Wide config below here */
@media screen and (orientation: portrait) and (min-width: 600px),
  screen and (orientation: landscape) and (min-height: 600px) {
  .turn-on-js {
    color: green;
    font-size: larger;
  }

  /* Hide contact form by default */
  #contact_us {
    display: none;
  }

  .about-photo {
    float: left;
    margin: 0 1em 1em 0;
    width: 20%;
    height: auto;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-weight: normal;
    color: dimgray;
  }
  /* So div heading won't be obscured by header. Set top = height of header */
  #about,
  #contact {
    position: relative;
    visibility: hidden;
    top: -6em;
  }
  .fat-bottom {
    padding-bottom: 1em;
  }
  #main-container {
    margin: 1em;
  }
  #header {
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 1;
    background: white;
    opacity: 0.95;
    height: 6em; /* Adjust top of #about & #contact to be -1 multiplied by this */
    width: 100%;
    padding: 0;
    margin: 0;
  }
  #header nav,
  #header div {
    display: inline-block;
  }
  .logo {
    height: 4.5em;
  } /* same as #header.height */
  #logo_div {
    float: left;
    padding: 10px 0 0 10px;
    height: 5em;
  }
  nav {
    position: fixed;
    top: 0;
    right: 0;
    padding: 10px 10px 0;
    z-index: 1;
  }
  nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
  .nav-item {
    display: inline;
    padding-right: 0.5em;
  }
  /*
    Use padding-top, rather than margin-top, to get page to scroll all the way
    to the top upon click of #home anchor. If margin-top is used, the page will
    not scroll all the way to the top, and the title of the first gallery will be
    partially hidden behind the nav bar.
    */
  #galleries-content {
    clear: left;
    padding-top: 3.75em;
  }
  .gal-table {
    display: table;
    width: 100%;
  }
  .gal-row {
    display: table-row;
    width: 100%;
  }
  .gal-cell-left {
    list-style: none;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  .gal-cell-left li {
    display: block;
    float: left;
    width: 49%;
  }
  .gal-cell-left img {
    width: 100%;
  }
  .left-side {
    margin-right: 1%;
  }

  .gal-label {
    padding: 0;
    margin: 0;
    font-size: 1.75em;
  }

  img {
  }

  footer {
    background: white;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    border: 0;
    margin: 0;
    padding: 0.5em 1em 0em 0.5em;
    font-size: small;
  }
  .gs-copy {
    float: left;
  }
  .gs-fb {
    float: right;
  }

  body {
    background-color: white;
    padding: 0;
    font-family: Oswald;
    width: 100%;
    padding: 0;
    margin: 0;
    color: #868686;
  }

  img {
    padding: 0;
    margin: 0;
  }

  a {
    text-decoration: none;
    color: #868686;
  }

  a:hover {
    text-decoration: underline;
    color: black;
  }

  /* Don't need the hamburger in wide mode */
  #burger {
    display: none;
    visibility: hidden;
  }
  .hamon {
    display: none;
    visibility: hidden;
  }
  .hamoff {
    display: none;
    visibility: hidden;
  }

  .my-em {
    font-weight: bold;
  }
}