.maincontent{
  max-width:100%;
}
img{
    width:100%;
}

  .flex-group{
    display:flex;
    flex-direction: row;
    justify-content: space-evenly;
    flex-wrap: wrap;
  }
  .flex-item{
    max-width:200px;
}
.icon-flex-item{
      max-width:200px;
      text-align: center;
  }
  .icon-image-box img{
    max-width:100px;
  }
 #algae-logo{
    max-width:100px;
 }
 .algae-section{
    margin-top:30px;text-align:center;
 }
 .algae-section h3{
    display:inline-block;
 }
  /* ========================== */
  .rButton-dark {
      background-color:#B4BAB1;
      text-transform: uppercase;
      border-radius:28px;
      display:inline;
      border:1px solid #996E42;
      cursor:pointer;
      color: #996E42;
      font-family: 'Arvo', serif;
      font-size:17px;
      padding:16px 31px;
      text-decoration:none;
      margin:0;
      z-index:10;
      /* max-width:120px; */
  }
  .rButton-dark:hover {
      background-color:#415437;
      color:white;
  }
  .rButton-dark:active {
      position:relative;
  }
.my-container{
    padding:2% 6%;
    margin:0 auto;
  }
 .hero{
    height:clamp(200px, 20vw, 400px);
    background-image: url('/imageserver/Reusable/pabco23/paramount-hero.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: left;
    display:grid;
    /* place-content: center; */
    padding:2%;
    overflow:hidden;
 }
#collage{
    max-width:600px;
    margin:0 auto;
}
/* ============== Color Picker ================== */
.color-picker{
    display:grid;
    grid-template-columns: repeat(2,50%);
    gap:1em;
    justify-content: center;
    /* max-width:1400px; */
    margin:0 auto;
    padding-inline:1em;
  }
  #color-picker-house{
    display:grid;
    grid-row:1/2;
    grid-column:2/3;
  }
  .color-picker-shingle{
    grid-column:1/2;
  }
  #house{
    grid-row:1/2;
    grid-column:1/2;
    z-index:10;
    align-self:flex-start;
  }
  #shingle{
    justify-self:flex-end;
  }
  .box{
    background-color:red;
    height:100px;
    width:100px;
    margin-top:-120px;
  }

 .color-group{
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    max-width:1400px;
    margin:20px auto;
  }
  .color-box{
    display:inline-block;
    /* height:150px; */
    max-width:300px;
    cursor:pointer;
  }
  .shingle-swatch:hover{
    filter: brightness(1.75);
    transition:.3s;
  }
  .shingle-swatch{
    transition:.3s;
  }
  .color-item{
    margin:15px;
    /* opacity:0; */
  }
  .color-item h4{
    margin-top:5px;
  }
 
  #color-name{
    text-align: center;
  }
  
  .color-picker-shingle{
    text-align: center;
    width:100%;
    grid-row:1/2;
    grid-column:1/2;
    display:flex;
    flex-direction: column;
    justify-content: center;
  }
  #panel-desat{
    align-self:flex-start;
    grid-row:1/2;
    grid-column:1/2;
  }
  #panel-overlay{
    align-self:flex-start;
    width:100%;
    height:100%;
    grid-row:1/2;
    grid-column:1/2;
    mix-blend-mode: overlay;
  }

 @media screen and (max-width:992px) {
    .color-picker{
      display:block;
    }
  }