body {
  margin-top: 0px; 
}

.navbar {
  box-shadow: 2px 2px 5px #cc5642;
  opacity: 0.9;
  background: #fff; }
  .navbar .nav-item {
    font-size: 1.4rem;
    padding-right: 1.4rem; }

#showcase {
  position: relative;
  background: url("/static/phrancko_knits_aran.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  /* background-attachment: fixed; */
  min-height: 600px; }
  #showcase .primary-overlay {
    background: rgba(204, 86, 66, 0.4);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
  #showcase .success-overlay {
    background: rgba(153, 66, 83, 0.5);
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    border-radius: 0.5rem; }

.info-header {
  width: 50%;
  margin: auto;
  border-bottom: 1px #ddd solid; }

.text-shadow {
  text-shadow: 2px 3px 5px rgba(0, 0, 0, 0.5); }

#authors img {
  margin-top: -50px; }
#authors .card:hover {
  background: #cc5642;
  color: #fff; }
#authors .fab {
  color: #fff; }

  @media (min-width: 0px) and (max-width: 575px) {
    /* div { background: rgba(255,255,0,10%); } yellow */
    .promo-text { margin-top: 200px; }
    #showcase {
      min-height: 800px;
      background-position-x: -275px; }
      .mb-resp {
      margin-bottom: 1rem; } 
      #showcase h1 {
        font-size: 2rem;  }
      #showcase h2 {
        font-size: 4rem; } 
  }

  @media (min-width: 576px) and (max-width: 767px) {
    /* if width is 576 or greater */
    /* div { background: rgba(0,0,0,10%); } gray */
    .promo-text { margin-top: 200px; }
    #showcase {
      min-height: 800px;
      background-position-x: -250px; }
      .mb-resp {
      margin-bottom: 1rem; } 
      #showcase h1 {
        font-size: 2rem;  }
      #showcase h2 {
        font-size: 4rem; }
    }

  @media (min-width: 768px) and (max-width: 991px) {
    /* div { background: rgba(0,255,0,10%); } green */
    .promo-text { margin-top: 150px; }
    #showcase h1 {
      font-size: 2rem;  }
    #showcase h2 {
      font-size: 4rem; }
  }

  @media (min-width: 992px) and (max-width: 1199px) {
    /* div { background: rgba(255,255,0,10%); } yellow */
    .promo-text { margin-top: -20px; } 
  }
  @media (min-width: 1200px) {
    /* div { background: rgba(0,0,255,10%); } blue */
     
  }