body{
  font-family: 'Poppins',  'Montserrat', sans-serif;
 }
 .site_width{
     width:100%;
     max-width:100%;
margin:0 auto;
}
 h1{
   font-family: open-sans,sans-serif;
 font-weight: 800;
 font-style: normal;
 }
 
 .line-break{
    border-top:2px solid black;
    max-width:600px;
    margin:0 auto;
 }
 
 .line-break2{
    border-top:2px solid black;
    max-width:400px;
    margin:0 auto;
 }
 
 .line-break3{
    border-bottom:2px solid white;
    max-width:400px;
    margin:0 auto;
 }
 
 .line-break4{
    border-bottom:2px solid white;
    max-width:100px;
    margin:0 auto;
 }
 
 a.btn.btn-primary {    padding: 16px 40px;    border-radius: 5;    background: #D62A0F;    border: none;   box-shadow: 0 4px 5px -3px #333;    transition: 0.5s;    font-weight: bold;transition: ease-out 0.4s;}
 a.btn.btn-primary:hover {    box-shadow: inset 0 0 0 50px #ED1C24; }
 
 

 .section3{
  position: relative; 
  font-weight:700;
  color:#fff;
  background-image: url("/imageserver/Reusable/atlas/stormmaster-shake-min.png"); 
  min-height: 569px; 
  background-position: 0% 0%; 
  background-repeat: repeat; 
  background-size: cover; 
  margin-top: 30px; 
  padding-top: 42px; 
  padding-bottom: 0px;
  display:grid;
  grid-template-columns: 70% 30%;
  align-items: center;
  justify-items: center;
 }
 .stormmaster-section{
  max-width:750px;
 }
 
 .algae{
    margin-top:-100px;
 }
 
.products{
  max-width:1500px;
  margin:0 auto;
}
 .my-header{
  margin:20px auto;
  text-align: center;
 }
 .my-header p{
  max-width:1000px;
  margin:0 auto;
 }
  .flex-group{
    display:flex;
    flex-direction: row;
    justify-content:space-evenly;
    margin:0 auto;
    width:100%;
    flex-wrap:wrap;
  }
  .card-grid{
    width:300px;
    height:245px;
    display:grid;
    grid-template-columns: 100%;
    grid-template-rows: repeat(2, 50%);
    align-items: center;
    justify-content: center;
    margin:10px 30px;
    text-align: center;
  }
  .product-logo{
    max-width:250px;
    margin:0 auto
  }
 #storm{
  background-image:url('/imageserver/Reusable/atlas/storm-black-min.png');
  background-size: 100%;
  background-repeat: no-repeat;
 }
 #pristine{
  background-image:url('/imageserver/Reusable/atlas/pristine-burnt-hickory-min.png');
  background-size: 100%;
  background-repeat: no-repeat;
 }
 #sun{
  background-image:url('/imageserver/Reusable/atlas/Pinnacle-Sun-Cool-Coral-Canyon.jpg');
  background-size: 100%;
  background-repeat: no-repeat;
 }
 #impact{
  background-image:url('/imageserver/Reusable/atlas/Pinnacle-Impact-Desert-Shake-shingle-min.jpg');
  background-size: 100%;
  background-repeat: no-repeat;
 }
 #briar{
  background-image:url('/imageserver/Reusable/atlas/Briarwood-Pro-Granite-HD-min.png');
  background-size: 100%;
  background-repeat: no-repeat;
 }
 #prolam{
  background-image:url('/imageserver/Reusable/atlas/ProLam-Hearthstone-Gray-min.png');
  background-size: 100%;
  background-repeat: no-repeat;
 }
 #castle{
  background-image:url('/imageserver/Reusable/atlas/Castlebrook-Burnt-Sienna-min.png');
  background-size: 100%;
  background-repeat: no-repeat;
 }
 
 @media only screen and (max-width: 992px) {
   .algae {
     margin-top:-50px;
   }
     .section3{
  grid-template-columns: 1fr;
text-align:center;
 }
 .stormmaster-section{
  max-width:100%;
    padding:0 4%;
 }
 }
 
 @media only screen and (max-width: 768px) {
   .algae{
      margin-top:5px;
    }
 }