/* ----    CSS Flex Grid ----------20220123--------------------  */
/* ----   https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_responsive ---  */
/* CSS code for the center of the landing page - the product catagories  */

/* 
The "flex-direction: row;" stacks the flex items horizontally (from left to right).
The "flex-direction: column;" stacks the flex items vertically (from top to bottom).
Resize the browser window to see that the direction changes when the 
screen size is 800px wide or smaller.
----- 3 columns -----
*/
.imageflex 
{
  display: block;
   margin-left: auto;
  margin-right: auto;
  max-width: 333px;
  max-height: 333px;
}

.pflex {padding: 5px;}


* {box-sizing: border-box;}

.land-flex-container {
  display: flex;
  flex-direction: row;
  font-size: 20px;
  text-align: center;
 background-color: #d1b790; 
}

.land-flex-left {
border-top: 5px solid grey;
padding: 10px;
flex: 33%;
}

.land-flex-middle {
border-top: 5px solid grey;
padding: 10px;
flex: 33%;
}

.land-flex-right {
border-top: 5px solid grey;
padding: 10px;
flex: 33%;
}

/* Responsive layout - makes a one column-layout instead of two-column layout */
@media (max-width: 1200px) { .land-flex-container {flex-direction: column;}}

/* ---- CSS Flex Grid -----------------------------------------*/

.image 
{
  display: block;
   margin-left: auto;
  margin-right: auto;
  max-width: 333px;
  max-height: 333px;
}


/* ------- Hoover ------------------------------------------------------------------------------- */
.hover-container {
        position: relative;
		margin-left: auto;
		margin-right: auto;
		max-width: 333px;
		max-height: 333px;
}
.overlay
{
  position: absolute; 
  bottom: 0; 
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5); /* Black see-through */
  color: #f1f1f1; 
  width:333px;
  transition: .5s ease;
  opacity:0;
  color: white;
  font-size: 20px;
  padding: 20px;
  text-align: center;
}
.hover-container:hover .overlay {opacity: 1;} 

/* ------- Ehtos Hoover ------------------------------------------------------------------------------- */

/* -------list format under each catagory ---------------------------------------------------------  */

ul.giffy {
			list-style-image: url('sqpurple.gif');
			list-style-position: outside;
}

ul.square  /* --- prefered ----  */
{
			list-style-type: square;
			list-style-position: outside;
			margin: 3;
			padding: 3;
			text-align: left;
			font-family: Tahoma, Arial;
			font-size: .9em;
}

ul.no-bullets    {  list-style-type: none; margin: 3; padding: 3;}