body,
html {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-size:18px;
}

.maincontent {
    max-width: 100%;
    padding: 0;
    margin: 0;
}

.maincontent_wrapper {
    padding-top: 0;
}

img {
    width: 100%;
}
.my-header{
  text-align: center;
  margin:2% ;
}
.divider-line{
  height:5px;
  width:30%;
  background-color:#D71921;
  clip-path: polygon(15% 0%, 100% 0%, 85% 100%, 0% 100%);
margin:0 auto;
}
.my-hr{
    border: 0; 
    height: 1px; 
    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); 
    max-width:70%;
    margin:2% auto;
}
.shingles{
  padding:2%;
  margin:0 auto;
}
.shingle-color-image img{
  height:150px;
  width:150px;
}
.flex-group{
  display:flex;
  flex-direction: row;
  text-align: center;
  flex-wrap:wrap;
}
.shingle-color-box{
  margin:5px;
}
.shingle-type-description{
  max-width:600px;
margin:20px auto 0;
}
.card-image{
  max-width:500px;
}
.shingle-type{
  margin:0 auto;
text-align:center;
}
.my-btn{
  border:1px solid #000;
  padding:10px 18px;
  margin-top:5px;
  color:#fff;
  background-color:blue;
  display:inline-block;
  filter:drop-shadow(3px 3px 3px rgba(0,0,0,0.3));
  transition:.3s;
}
.my-btn:hover{
  color:#fff;
  filter:drop-shadow(1px 1px 1px rgba(0,0,0,0.3));
  transform:scale(.99);
  transition:.3s;
}