.maincontent{
  max-width:100%;

}
*{
  margin:0;
  padding:0;
  box-sizing: border-box;
}
h1, h2, h3, h4{
font-family: 'Open Sans', sans-serif;
}
h5, h6, p{
font-family: 'Poppins', sans-serif;
}
.row{
  margin:0 !important;
}
img{
  width:100%;
}

.myButton {
  /* margin-top:20px; */
background-color:#fff;
border-radius:28px;
border:1px solid #402c1a;
display:block;
cursor:pointer;
color:#402c1a;
  font-family: 'Acme', sans-serif;
font-size:1.2rem;
  letter-spacing:1.2px; 
padding:12px 16px;
  max-width:175px;
text-decoration:none;
  /* transition:.1s; */
text-shadow:0px 1px 0px #fff;
  -webkit-box-shadow: 3px 5px 4px -3px #000000; 
box-shadow: 3px 5px 4px -3px #000000;
}
.myButton:hover {
  background-color:#c7b299;
  text-shadow:0px 0px 0px #fff;
  color:#fff;
  -webkit-box-shadow: 3px 2px 1px -3px #000000; 
box-shadow: 3px 2px 1px -3px #000000;
transform:scale(0.98);
}
.myButton:active {
position:relative;
top:1px;
}

.hero-grid{
  display:grid;
  background: linear-gradient(to top,rgba(51, 51, 51, .9) 0%, rgba(51, 51, 51, .9) 100%), url('/imageserver/Reusable/acoustic-ceiling21/ceiling2.jpg');
  background-size:100% 85%, 100% 85%;
  background-repeat: no-repeat;
}
.hero-header {    
  grid-row: 1/3;    
  grid-column: 7 / span 3;  
  align-self: center;
  }
.hero-business-name {  
  grid-row: 2/4;
  grid-column: 7/ span 3;
  color: #fefff7;   
  padding: 3% 0;    
  align-self:flex-end;
  }
         
.hero-cta{
  grid-area:4/2/5/5;
  margin-left:10%;
} 
.hero-main-img {     
  grid-area: 1/1/5/ span 6; 
  justify-self: normal;
  }  
.hero-second-img {     
  grid-area: 4/6/6/ span 5;     
  justify-self: baseline;     
  border: 10px solid #FEFFF7;    
  border-bottom: 0;     
  margin-bottom: -7%;    
  align-self: end;
}
.main-header{
  margin:8% 12%;
}
/* ======================= Hover Overlay Collage ======================= */
.rButton {
  box-shadow: 0px 10px 7px -7px #276873;
  background: linear-gradient(to bottom, #599bb3 5%, #408c99 100%);
  background-color: #599bb3;
  border-radius: 8px;
  display: inline;
  cursor: pointer;
  color: #ffffff;
  font-family: Arial;
  font-size: 18px;
  font-weight: bold;
  padding: 13px 32px;
  text-decoration: none;
  text-shadow: 0px 1px 0px #3d768a;
  max-width:40%;
  margin:20px auto 0;
  z-index:4;
  white-space:nowrap;
}
.rButton:hover {
  box-shadow: 0px 10px 14px -7px #276873;
  background: linear-gradient(to bottom, #408c99 5%, #599bb3 100%);
  background-color: #408c99;
  color: #F3EFE6;
  transform:scale(0.99);
}
.rButton:active {
  position: relative;
  top: 1px;
}
.section1 {
  margin: 5% 0 0;
}
.section1-grid {
  display: grid;
  max-width:1200px;
  margin: 0 auto;
  padding:0 4%;
  grid-template-columns: auto;
  grid-template-rows: auto;
}
.section1-item {
  display: flex;
  align-items: stretch;
  /* justify-content: center; */
  overflow:hidden;
  position: relative;
}

.collage-content {
  position: absolute;
  width: 100%;
  max-width:700px;
  height: 100%;
  top: 0;
  left: 0;
  /* transform: translate(-50%, -50%); */
  background: rgba(255, 252, 237, 0.7);
  z-index: 3;
  opacity: 0;
  padding: 7%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.collage-content::after {
  content: "";
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  width:0%;
  transform:translate(-50%, -50%);
  border-top: 0.2em solid #000;
  border-bottom: 0.2em solid #000;
}
.collage-content::before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  height: 0%;
  transform:translate(-50%, -50%);
  border-left: 0.2em solid #000;
  border-right: 0.2em solid #000;
}
.collage-content:hover::before{
  transition:.7s linear;
  height:90%;
  width:90%;
}
.collage-content:hover::after {
  transition:.7s linear;
  height:90%;
  width:90%;
}
.section1-item:hover {
  z-index: 3;
}
.section1-item:hover .collage-content {
  opacity: 1;
  transition: .7s;
}
.sec1-img-horizontal {
  grid-column: 1/5;
  grid-row: 1/5;
  /* position: relative;   */
}
.sec1-img-vertical {
  grid-column: 4/9;
  grid-row: 2/7;
  /* position: relative; */
}
.sec1-logo {
  grid-column: 2/6;
  grid-row: 3/7;
  position: relative;
  margin: 100px 0 0 0;
}


/* ========================= Parallax Divider ========================= */

.parallax-div {
  background-image: linear-gradient(to left, rgba(0, 0, 0, .4) 0%, rgba(0, 0, 0, .4) 100%), url("/imageserver/Reusable/acoustic-ceiling21/ceiling-bg-min.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment:fixed;
  margin: 5% 0 2%;
  padding: 5%;
  text-align: center;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.parallax-div p {
  max-width: 1100px;
  font-weight: 500;
  line-height: 28px;
  font-size:1.3rem;
}

.parallax-div-header {
  margin: 1% 0;
}
.products-grid{
  display:grid;
  grid-template-columns: 50% 50%;
  gap:20px;
}
.grid-left{
grid-column: 1/2;
}
.grid-left-list{
grid-column: 1/2;
}
.grid-right{
grid-column: 2/3;
grid-row:1/3;
}
.products{
  padding:4% 8%;
}
.products ul{
  margin-left:30px;
}

.divider{
  background-color:#5d648c;
  color:#fff;
  padding:1% 0;
}
.right{
  text-align: right;
  padding:5% 0;
}
.left{
  text-align: left;
  padding:6% 4%;
}
.vert-line{
  height:100%;
  width:5px;
  transform:scaleY(.8);
  margin:0 auto;
  background-color:#fff;
}
@media screen and (max-width:1250px){
  .grid-left{
    grid-column: 1/-1;
    }
}
@media screen and (max-width:1150px){
  .divider{
    text-align:center;
  }
  .right{
    text-align: center;
    padding:4% 0 1%;
  }
  .left{
    text-align: center;
    padding:4% 4%;
  }
}
@media screen and (max-width:992px){
 html{
   font-size:14px;
 }
 .hero-main-img { 
  display:none;
 }
 .hero-second-img { 
  grid-column: 1/-1;
  grid-row:5/7;
  max-width:100vw;
  justify-self: center;
 }
 .hero-header {    
   justify-self: center;
   text-align: center;
  grid-column: 1/-1;  
  }
.hero-business-name {  
  grid-row:3/5;
  grid-column: 1/-1;
  justify-self: center;
   text-align: center;
  align-self:flex-start;
  }
  .main-header{
    margin:10% 5%;
    text-align: center;
  }
  .sec1-img-vertical{
    display:none;

  }
}
@media screen and (max-width:768px){
  .section1-grid{
    display:block;
      margin: 0 auto;
      padding:0 4%;
      grid-template-columns: auto;
      grid-template-rows: auto;
    }
    .products-grid{
      display:block;
    }
  }