.navbar-nav {
  font-size: small;
}

.shifted {
  padding-top: 2em;
}

.padded {
  padding-top: 2em;
  padding-bottom: 2em;
}

/* Footer social icons: inline SVG from partials/icon_sprite.html.
   32px matches the old Font Awesome fa-stack (fa-circle at 2x of 16px). */
.social-icon {
  width: 32px;
  height: 32px;
  color: #444;
  vertical-align: middle;
}

.nav-link:hover .social-icon {
  color: #000;
}

/* "Back to gallery" chevron; 64px is what fa-4x used to give it. */
.back-icon {
  width: 64px;
  height: 64px;
}


.header1 {
  /* font-family: 'Amatic SC'; */
  font-family: 'Marck Script', cursive;
  font-size: 2em;
  /* font-size: 3em; */
  color: #444;
}

.header3 {
  /* font-family: 'Amatic SC'; */
  font-family: 'Marck Script', cursive;
  font-size: 1em;
  /* font-size: 1.5em; */
  color: #444;
}

.lighter {
  color: #777;
  font-weight: 100;
}

.size3 {
  font-size: 3em;
}

.caps {
  text-transform: uppercase;
}

.lows {
  text-transform: lowercase;
}


.squareimg {
  width: 100%;
  height: 23vw;
  object-fit: cover;
}

.card a {
  text-decoration: none;
  color: #333;
}

.card a:hover {
  text-decoration: none;
  color: #000;
}

.nodecor {
  text-decoration: none;
  color: #aaa;
}

.nodecor:hover {
  text-decoration: none;
  color: #000;
}

@media (max-width: 1399.98px) {

  .squareimg {
    width: 100%;
    height: 25vw;
    object-fit: cover;
  }
}

@media (max-width: 1199.98px) {

  .squareimg {
    width: 100%;
    height: 27vw;
    object-fit: cover;
  }
}


@media (max-width: 991.98px) {

  .squareimg {
    width: 100%;
    height: 22vw;
    object-fit: cover;
  }
}

@media (max-width: 767.98px) {

  .squareimg {
    width: 100%;
    height: 20vw;
    object-fit: cover;
  }
}

@media (max-width: 575.98px) {
  .squareimg {
    width: 100%;
    height: 70vw;
    object-fit: cover;
  }
}