body, html{
  box-sizing: border-box;
  margin:0;
  padding:0;
}
.maincontent{
  max-width:100%;
  padding:0;
  margin:0;
  font-size:18px;
}
.maincontent_wrapper{
  padding-top:0;
}
#main-wrapper{
overflow:hidden;
}
img{
width:100%;
}
h1{
font-size:2.5em;
}
p{
font-weight:300;
}
.bold{
font-weight:600;
color:#78685D;
}
.highlight{
color:var(--accent-color);
font-weight:600;
}
.accent-color {
  color: var(--accent-color);
font-weight:600;
white-space: nowrap;
}
.title{
position: relative;
padding:20px 0;
}
.title::after{
content:"";
bottom:-10px;
left:-5%;
position: absolute;
height:100%;
width:100%;
background-image:url('/imageserver/Reusable/pole-barns-general/db-bg-blue.png');
background-size:80%;
background-repeat: no-repeat;
}
.my-white-space{
  white-space: none;
}
#hero{
background-image: url('/imageserver/Reusable/pole-barns-general/hero_bg.webp');
background-size:cover;
background-repeat:no-repeat;
background-position:right;
}
#hero-grid{
display:grid;
padding:0 5%;
grid-template-columns: 1fr 1fr;
}
#hero-img{
  display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#hero-img-desktop{
 max-width:900px;
}
#hero-img-mobile{
  display:none;
}
#hero-content{
 justify-self:center;
 padding:8% 0;
 display: flex;
    flex-direction: column;
    justify-content: center;
}
.sec1-container{
 padding:3%;
 max-width:1800px;
 margin:0 auto;
}
.grid-6040{
 display:grid;
 grid-template-columns: 1fr .8fr;
 gap:30px;
}
.grid-40{
  place-self: center;
  position: relative;
  z-index:10;
}
#meeting{
 filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.3));
}
.sec2-container{
 padding:5% 8%;
 
}
.grid-5050{
 display:grid;
 grid-template-columns: 1fr 1fr;
}
#average{
 grid-row:1/2;
 grid-column: 2/3;
 align-self:center;
 position: relative;
 text-align: center;
}
#diagram{
grid-row:1/2;
grid-column: 1/2;
position: relative;
max-width:800px;
place-self:center;
filter:drop-shadow(3px 3px 3px rgba(0,0,0,0.3));
z-index:10;
}
#average h2{
 position: relative;
 max-width:600px;
 z-index:5;
}
#average ul{
  text-align:left;
 line-height:4em;
 position: relative;
 max-width:600px;
 z-index:5;
}
#average ul li{
 font-size:20px;
}
#average::after{
content:"";
position: absolute;
background-color:#f0f0f0;
height:115%;
width:115%;
top:-15%;
left:-20%;
transform:rotate(35deg) skew(-5deg);
}
#average::before{
content:"";
position: absolute;
border:1px solid #6395AD;
height:115%;
width:115%;
top:-15%;
left:-20%;
z-index:5;
transform:rotate(25deg) skew(-5deg);
}
.section3{
  background-size:50%;
  background-position:80% 50%;
  background-repeat: no-repeat;
}
.shape-playground-1 {
	float: right;
	max-width: 700px;
	height:auto;
	margin: 2px 2px 0 0;
}
.shape-playground-2 {
	float: left;
	max-width: 600px;
	height: auto;
	margin-right: 15px;
  margin-bottom:40px;
}
.sec3-container{
  padding:5% 8%;
}
.step-link{
  color:#6395AD;
  font-weight:400;
  margin-left:10px;
  cursor:pointer;
}
.section4{
  background-image:linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0.7) 49%, rgba(255,255,255,1) 100%), url('/imageserver/Reusable/pole-barns-general/benefits-bg.jpeg');
  min-height:40vw;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.sec4-container{
  padding:1% 8%;
  margin-bottom:50px;
}
.benefits-grid{
  display:grid;
  background-size:cover;
  gap:20px;
  margin-top:50px;
}
.benefit-item{
  max-width:600px;
  position: relative;
}
.benefit-item::before{
  content:"";
  position: absolute;
  top:0;
  left:-5%;
  background-color:#fdfdfd;
  height:150px;
  width:150px;
  transform:rotate(-35deg);
  z-index:1;
}
.benefit-item::after{
  content:"";
  position: absolute;
  border:1px solid #6395AD;
  height:150px;
  width:150px;
  top:-5%;
  left:-5%;
  transform:rotate(25deg) skew(-5deg);
 }
.benefit-item p{
  font-weight:400;
  position: relative;
  z-index:2;
}
.benefit-item h3{
  font-weight:500;
  position: relative;
  z-index:2;
}
#benefit1{
  grid-row:1/1;
  grid-column:2/5;
  max-width:700px;
}
#benefit2{
  grid-row:2/2;
  grid-column:5/7;
  /* margin-top:25px; */
}
#benefit3{
  grid-row:4/4;
  grid-column:6/8;
  justify-self: center;
  /* margin-top:35px; */
}
#benefit4{
  grid-row:3/3;
  grid-column: 1/4;
  /* margin-top:50px; */
  justify-self:flex-end;
}
#benefit5{
  grid-row:5/5;
  grid-column:3/6;
  /* margin-top:60px; */
}
#benefit6{
  grid-row:7/10;
  grid-column:3/7;
  /* margin-top:50px; */
}

@media screen and (max-width:1600px) {
  #benefit2{
    grid-column:4/9;
  }
  #benefit5{
    grid-column:3/7;
  }
}

@media screen and (max-width:992px) {
#hero{
background-position:-100px 0;
}
  #hero-grid{
    display:block;
    text-align: center;
  }
  .grid-6040{
    display:block;
  }
  .section1{
    text-align: center;
  }
  .sec2-container{
    padding:0 3%;
  }
  #average h2{
    max-width:100%;
  }
  #average{
    margin-top:75px;
    padding:3% 5%;
  }
#average ul li{
     text-align:center;
     padding:0;
}
  #average::before{
    transform:rotate(0deg);
    left:0;
    width:100%;
    top:-5%;
  }
  #average::after{
    transform:rotate(0deg);
    left:0;
    width:100%;
    top:-5%;
  }
  #average ul li{
    list-style-type:none;
    text-align: center;
  }
  #diagram{
    max-width:100%;
    z-index:10;
   }
   .benefits-grid{
     display:block;
   }
   #benefit2, #benefit4, #benefit6{
     margin:50px 0 0 100px;
   }
   #benefit1, #benefit3, #benefit5{
     margin:50px 0 0 0;
   }
   .benefit-item::before{
    height:75px;
    width:75px;
  }
  .benefit-item::after{
    height:75px;
    width:75px;
   }
   #hero-img-desktop{
    display:none;
  }
   #hero-img-mobile{
    display:block;
    position: absolute;
    top:0;
    left:0;
    max-width:40vw;
  }
}