.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  border: 1px solid silver;
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  gap: 16px;
}


.wrap2    { 
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}  
.wrap2 li {
  background: #F5F5F5;
}

.wrap2 img { height: 220px; width: 170px; }


.flex-item1 {
  background: tomato;
  padding: 10px;
  flex: 1 1 200px;
  font-size: 1.25rem;

}
	
.flex-container2 {
  padding: 0;
	max-width: 800px;
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
}
	
.wrap    { 
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}  
	
.wrap li {
  background: #E6F3FF;
}
	
/*centerimage*/
	img {
  display: block;
  margin-left: auto;
  margin-right: auto;
	margin-top: auto;
	margin-bottom: auto;
 
}
	
.card1 {
  display: flex;
  flex-direction: column;
  margin: 10px 5px 5px 5px;
    box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.2);
    transition: 0.3s;

		border-radius: 5px;
		background: #CCE6FF;
    border: 1px solid #bee5eb;
		width: 150px;  
    height:150px;  
				
    }
	
 .card1 img { width:75px !important; height:auto !important; }

	/*card*/
    .cardbox {        
    display:inline-block;
    } 
    .card {
    display: inline-block;
    margin: 5px;
    box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.2);
    transition: 0.3s;
    border-radius: 5px;
    border: 1px solid black;
	width: 30%;
    }
    .cardTop {
    padding: 5px 5px 0 5px;
    font-size: 100%;
	width: 30%;
}