/* Mobile first grid design - from https://w3c.github.io/wcag/techniques/css/C32*/
 /* Reflow Styling */
		  nav[role="navigation"]       { grid-area: nav; }
        main[role="main"]           { grid-area: main; }
        aside[role="complementary"] { grid-area: aside; }
        footer[role="contentinfo"]  { grid-area: footer; }
		
		  nav{ background-color: #890000; }
        main{background-color: Silver; }
        aside{background-color: Orange; }
        footer{ background-color: Green; }
				
        .grid,
        .subgrid {
          display: grid;
          grid-template-columns: minmax(0, 1fr);
        }
/*mobile one column first design*/
        .grid {
          grid-template-areas:
		    'nav'
          'main'
          'aside'
          'footer';
          width: 100%;
        }

		.grid{
			grid-template-rows: auto 1fr auto;
		}


        .subgrid {
          width: calc(100% + 2rem);
          margin: 0 -1rem;
        }

        .grid-item,
        .subgrid-item {
          padding: 1rem;
        }

        @media all and (min-width: 576px) {
          .subgrid {
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
            margin-bottom: 1rem;
          }
          .subgrid-item {
            padding-bottom: 0.25rem;
          }
        }

        @media all and (min-width: 992px) { 
          .grid {
            grid-template-areas:
			   'nav nav nav'
            'main main aside'
            'footer footer footer';
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
          }
        }



/* product link-cards definiton - derived from subgrid and customized for more columns */

.products {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
			grid-gap: 8px 8px;
        }

.products {
          width: calc(100% + 2rem);
          margin: 0 -1rem;
          padding: 0 0.5rem;
        }

.products-item {
          padding: 1rem;
          background-color:#ffffcc;
          border: 5px solid rgba(114,132,168,1);
  			border-radius: .5em;
        }

@media all and (min-width: 576px) {
          .products {
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            margin-bottom: 0.5rem;
          }
          .products-item {
            padding-bottom: 0.25rem;
          }
        }
  /* end of products definition */    
  
/* product pages definition*/
.pr_pg_top {grid-area: pptop;}
.pr_pg_middle-1 {grid-area: pp_middle-1;}
.pr_pg_middle-2 {grid-area: pp_middle-2;}
.pr_pg_bottom {grid-area: pp_bottom;}
  
.product_page {
			display: grid;
			grid-template-columns: minmax(50, 1fr);
			grid-gap: 0 1rem;
        }

.product_page {
          width: calc(100% + 2rem);
          margin: 0 -1rem;
          padding: 0 1rem;
        }
              
.product_page{
		grid-template-areas:
		'pptop'
      'pp_middle-2'
      'pp_bottom'
      'pp_middle-1';
        } 
                   
@media all and (min-width: 576px) { 
	.product_page{
		grid-template-areas:
		'pptop pptop pptop pptop'
      'pp_middle-1 pp_middle-2 pp_middle-2 pp_middle-2'
      'pp_bottom pp_bottom pp_bottom pp_bottom';
        }
      }
     
.cell {
        background-color: lightblue;
        border: solid 1px blue;
        }

  /* footer definiton - derived from subgrid and customized for more columns */

.footer {
			display: grid;
			grid-template-columns: 1fr;
			grid-gap: 1rem;
        }
        
.footer {
          width: calc(100% + 2rem);
          margin: 0 -1rem;
          padding: 0 1rem;
        }        

.footer-item {
          padding: 1rem;
          background-color: Black;
          border: 5px solid rgba(114,132,168,1);
  			border-radius: .5em;
  			font-size: 1rem;
  			color: White;
        }

@media all and (min-width: 992px) {
          .footer {
            grid-template-columns: 1fr 1fr;
            margin-bottom: 0.5rem;
          }
          .footer-item {
            padding-bottom: 0.25rem;
          }
        }
        
/*grid definition for pictures and galleries*/

.pict {
	display: grid;
   grid-template-columns: 1fr;
   grid-gap: 10px;
   }
 /* for this is neccesary to be set for img display:block */
.pict-item-right{
	margin: 0 0 0 auto;
   }  
   .pict-item-center{
	margin: auto;
   }  
   
 /* grid based navigation styling */	
/* mobile first - viewport width < 600px */	
.h_nav_grid {
  margin-top: 0;
  font-size: 2rem;
}

.h_nav_grid ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
}
.h_nav_grid a {
  font-size: 1rem;
  color: White;
  text-decoration: none;
}

.h_nav_grid a:hover{color:Yellow;}

@media (min-width: 992px) {
  .h_nav_grid a {
    font-size: 2rem;
  }
}

.h_nav_grid ul {
  display: grid;
  grid-template-columns: repeat(4, fit-content(50px));
	  grid-gap: 0 16px;
  justify-content: center;
  justify-items: center;
  align-items: center;
}
@media (min-width: 600px) {
  .h_nav_grid ul {
    grid-template-columns: 1fr repeat(4, fit-content(50px));
    grid-gap: 0 25px;
    justify-items: end;
  }
}

.h_nav_grid .fullwidth {
  grid-column: 1 / 5;
  text-align: center;
}
@media (min-width: 600px) {
  .h_nav_grid .fullwidth {
    grid-column: 1 / 2;
    justify-self: start;
    text-align: left;
  }
}
 
  
/*dropdown CSS+js button based*/
.dropbtn {
  background-color: #890000;
  color: white;
  font-size: 1rem;
  border: none;
  cursor: pointer;
  padding: 0;
}

.dropbtn:hover, .dropbtn:focus {
  color: Yellow;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 210px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  font-size: 1rem;
  display: block;
}

.dropdown a:hover {color:Black; background-color: #ddd;}

.show {display: block;}

@media (min-width: 992px) {
  .dropbtn {
    font-size: 2rem;
  }
}

/* sticky class for menu nav */
.sticky_nav {
	position: sticky; 
	top: 0px;
}

.rounded{border-radius: 5px;}