/* layoutstyles.css */

/* Universal style rule */
*{
/* Block all browser default margins and padding */
  margin:0;
  padding:0;
  

  /* Temporary borders */
 /*  border:dashed 1px #f00;  */


}

body {
 background: #000 url("sfpix/newdaynight3.jpg"); 
      width: 100%;
      background-size:cover; 
      color:#ff0;
}

/*
body {
 background-image: url("sfpix/newdaynight3.jpg"); 
 width: 100%; 
  background-size:cover; 
   color:#ff0;
} */

 .top-bar {
     background-color:#e6e6fa;    /* lavender */ /* 000; */
     display: flex;
      width: 100%;
      height: auto;
         /* to top visible while scrolling */
      position:fixed;
      top:0;
      z-index:1;

    }
 
 .logo {
     background-color: #e6e6fa; /* lavender */  /* 000; */
      color: #000;  /* fff; */
     flex: 1 1 auto;  /* does not seem to have any effect when removed? */
     font-size: 40px;
    font-family: Times, Times New Roman, sans-serif; 
     padding:18px;
     text-transform: uppercase;
    }

  .menu {
    flex: 3 1 auto;
    }
   
  .menu ul{
    display: flex;
    list-style: none;
    margin-top: 30px;
    flex-flow: row wrap;
     }

  .menu ul li {
     flex:1 1 auto;
     text-align: center;
  }

   .menu ul li a{
     color: #fff;
     font-size: 20px;
     text-decoration: none;
   }



/* ==== Links and link states in article section */
/* Unvisited links */
.menu a:link {
 color: #000;  /* fff; */
}
/* Visited links */
.menu a:visited {
 color: purple;
}
/* Mouse pointer on link */
.menu a:hover {
 background-color: #fcc;
 color: #030; 
}
/* Mouse pointer on link and left button down */
.menu a:active {
 background-color: #fcc;
 color: #bc9f81;
}

 
.banner {
    background: #000; url("sfpix/webpic_friendsflx6c.jpg"); 
 width: 100%; 
   
background-size:cover; 
/* margin-top:108px;  so banner will not hide behind fixed logo. equal to total padding */
/* text-align: center;*/
      }

  .banner {
    background: #000 url("sfpix/webpic_friendsflx6c.jpg"); 
      width: 100%;
      
    background-size:cover; 
      }

  .banner-text {
        display: flex;
      padding: 10% 0 20% 0;  /* top/bottom left/right */
   }
   .banner-text-items {
       color: #fff;
       margin: auto;
        text-align: center;
       width: 50%;
            }

       .banner-text-items h2{
          font-size:3em;
          margin-bottom: 20px;
          
          text-transform: uppercase;
      }

          .banner-text-items p{
            font-size: 18px;
            font-weight: bold;
            color: #fff;
         }

/*   img {
    float: left;   has to be defined outside of parent to work, if going to wrap some text
    } */

      .main-content {
         display: flex;
          flex-flow: row wrap;  /* shorthand for f direction and f wrap */
         padding: 5% 0;
       
     }

      
       .mainproduct {
          flex:1 15%;
           padding: 3%;
          text-align: center;

}

         .mainproduct h2 {
          font-size: 18px;
          font-weight: bold;
           color: #4b0082;          /* 306 */
}
   /* I moved the comments out of the mainproduct container */
   h2 {
          font-size: 18px;
          font-weight: bold;
           color: #4b0082;          /* 306 */
}

    /*     .mainproduct 
     .main1 img {
        box-shadow: 0 2px 0px 4px #ccc;
       } */
           
 .prod-image {
  width:134px;
  height:188px;
    transform: translateX(23%);
  overflow:hidden;

}

.prod-image img:hover {
 
   transform: translate3D(0px,-188px,0px);
}

/*  options to buy */
       .prod-buy img{
          border: inset 4px #4b0082;   /* 303 */
          border-radius: 15px;
       /*    box-shadow: 0 0 2px 4px #ff6;  306; */
          width:15%;
          margin: 5px;
         }
      

 .prod-buy img:hover {
    background-color: #fff;
      }

  .footer {
          width: 100%;
font-size: 18px;
          font-weight: bold;
      height: 5em;
   text-align: center;
          background-color: #000;
     color: #fff;
  }

/* Use class="centerall" in p or div to center
 all text and images inside the element */
.centerall {
 text-align: center; /* Clear any floating elements */

}
.centerall ul {
  list-style-type: none;
    }
.centerall li{
 float: left; 
 margin-right: 1px;
}
  @media all and (max-width:500px) {
       .top-bar{
       flex-flow: column wrap;
       text-align:center;
       }
    }