* {
  box-sizing: border-box;
  padding: 0;
}

:root{
--main-color:#215EB8;
--light-color:#EDE8E0;
--gray:#5B5B5B;
}

body,
html {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
img{
width:100%;
}
.reusable a{color:#000;}
.card{
cursor:pointer;
}
h1{
font-weight: 400;
}
h2{
font-weight: 100;
}
h3{
font-weight: 200;
}
p{
font-weight:300;
}
.my-hr{
border: 0; 
height: 1px; 
width:80%;
background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0); 
}
.site_width{
  max-width:100%;
}
.maincontent{
  max-width:100%;
  padding:0;
  margin:0;
}
.my-container{
  max-width:1600px;
  padding:2%;
  margin:0 auto;
}
.my-header {
  max-width:1100px;
  margin:10px auto;
  text-align: center;
}
.logo-div{
  background-color:var(--main-color);
  padding:1%;
}
#overview-logo{
  max-width:300px;
}
.flex-group{
  display:flex;
  flex-direction: row;
  justify-content: space-evenly;
  flex-wrap:wrap;
  margin-block:1em;
  max-width:1400px;
  margin:0 auto;
}
.flex-item{
  margin-block:10px;
}

.card{
  max-width:400px;
  filter:drop-shadow(3px 3px 4px rgba(0,0,0,0.3));
  min-height:430px;
}
.card h1,h2,h3,p{
  margin:0;
  padding:0;
}
.card-images{
  display:grid;
  justify-content: center;
  align-items: center;
}
.card-front{
  grid-column: 1/2;
  grid-row:1/2;
  transition:1s;
}
.card-hover{
  grid-column: 1/2;
  grid-row:1/2;
  opacity:0;
  transition:1s;
}
.card-label{
  background-color:#F6F4F0;
  padding:5%;
  color:#000;
  min-height:130px;
}
.product-link:hover{
  text-decoration: none;

}
.card-label p{
  margin-top:10px;
}
.card-images:hover .card-front{
  opacity:0;
  transition:1s;
}
.card-images:hover .card-hover{
  opacity:1;
  transition:1s;
}