body, html {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-size: 18px;
  font-family: "Poppins", sans-serif;
}

.maincontent {
  max-width: 100%;
  padding: 0;
  margin: 0;
}
.manicontent_wrapper{
  padding-top:0;
}
img{
  width:100%;
}
h1{
  font-size:48px;
}
h2{
  margin-top:0;
}
.r-container{
  max-width:1400px;
  padding:3%;
  margin:0 auto;
}
.thin{
  font-weight:200;
  font-style:italic;
}
.heavy{
  font-weight:700;
}
.cta{
  margin-top:20px;
  display: inline-block;
  border-radius:2px;
  padding:10px 22px;
  background:#fff;
  color:#000;
  filter:drop-shadow(5px 5px 5px rgba(0,0,0,0.5));
}
.cta:hover{
  background:#00692E;
  color:#fff;
  cursor:pointer;
  filter:drop-shadow(3px 3px 3px rgba(0,0,0,0.5));
}
.my-shadow{
  filter:drop-shadow(5px 5px 5px rgba(0,0,0,0.5));
}
.nowrap{
  white-space: nowrap;
}
#hero-cert{
  max-width:350px;
}

.hero {
  background: linear-gradient(to right, rgba(0,0,0, .6)0%, rgba(0, 0, 0, 0)100%), url('/imageserver/Reusable/true-solar/hero2.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment:local, fixed;
background-position: center;
  padding: 3%;
  clip-path: polygon(0% 0%, 100% 0%, 100% 95%, 0% 100%);
}

.hero-text{
  margin-left:20px;
}
  
  .hero-content {
  min-height:400px;
  /* max-width: 900px; */
  display:flex;
  color: #fff;
  align-self: center;
}
#hero-logo{
  max-height:200px;
}
.logo-path{
  stroke-width:1px;
  stroke:#fff;
  fill:transparent;
}
.logo-fill{
  fill:transparent;
}
.section2 {
  padding: 3% 5%;
  /* margin-bottom: 5%; */
  display: grid;
  grid-template-columns: 40% 60%;
  gap: 20px;
}
.sec2-left{
  align-self:center;
}
.img-grid{
  display:grid;
  gap:30px;
}
#grid_img1{
  grid-column:1/3;
  grid-row:1/3;
}
#grid_img2{
  grid-column:2/4;
  grid-row:2/4;
}
.img-grid img{
  max-width:400px;
}
.section3 {
  padding-top: 4%;
  text-align: center;
}
.sec3-flex-item{
  position: relative;
}

.levels {
  margin: 50px auto;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  flex-wrap: wrap;
  text-align: center;
}

.levels img {
  max-width: 100px;
}

.sec3-flex-item {
  max-width: 300px;
}
.sec3-flex-item h3{
  font-weight:700;
}
.img-box{
  height:100px;
  /* width:125px; */
  text-align: center;
  margin:0 auto;
}
.divider-content{
  padding:4% 0;
  color:#000;
  background-size:400%;
  background-repeat: no-repeat;
}
.divider{
  position: relative;
  /* margin-top:-250px; */
  text-align: center;
  background:#00692E;
  color:#fff;
  background-image:  linear-gradient(to bottom, rgba(255, 255, 255, .7)0%,  rgba(255, 255, 255, .7)100%),url('/imageserver/Reusable/true-solar/divider.jpg');
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size:cover;
}
#clip-top{
  /* margin-top:-5px; */
}
#clip-btm{
  margin-bottom:-5px;
}
.solar-type{
  margin-block:30px;
}
.type-img{
  max-width:600px;
  grid-column:1/4;
  grid-row:1/2;
}
.type-grid{
  display:grid;
  align-items:center;
}
.type-content{
  grid-column:3/6;
  grid-row:1/2;
  max-width:800px;
  background-color:#F4F0EC;
  padding:5% 6%;
  border:1px solid #000;
  position: relative;
}
.type-img-r{
  max-width:600px;
  grid-column:3/6;
  grid-row:1/2;
}
.type-grid-r{
  display:grid;
  align-items:center;
  /* justify-content: center; */
}
.type-content-r{
  grid-column:1/4;
  grid-row:1/2;
  max-width:800px;
  background-color:#F4F0EC;
  padding:5% 6%;
  border:1px solid #000;
  position: relative;
}

.gallery img{
  max-width:330px;

}
.gallery{
  display:flex;
  flex-direction:row;
  justify-content:space-evenly;
  flex-wrap:wrap;
  align-items:center;
  padding:3% 2%;
}
.gallery-item{
  border: 10px ridge #dadfef;
  margin-bottom:15px;
  opacity:0;
  transform:translateY(100px)
}




@media only screen and (max-width: 992px) {
  .section2 {
      display: block;
      text-align: center;
  }
  .section3 {
      margin-block:100px;
  }
  .solar-type{
    margin-block:0;
  }
  .type-grid{
    display:block;
    text-align: center;
  }
  .type-content{
    margin:0 auto;
  }
  .type-img{
    margin:0 auto;
  }
  .type-grid-r{
    display:block;
    text-align: center;
  }
  .type-content-r{
    margin:0 auto;
  }
  .type-img-r{
    margin:0 auto;
  }
 
  #clip-top{
      margin-top:-10px;
  }
  /* .divider{
      margin-top:-400px;
  } */
}

@media only screen and (max-width: 800px) {
  
  
  .section3 {
      background-position: top, -200px 350px;
          padding: 3% 2% 0%;
  }
 
  
}

@media only screen and (max-width: 600px) {
 
  
  #clip-top{
      margin-top:-15px;
  }
  #clip-btm{
      margin-bottom:-15px;
  }
}
@media only screen and (max-width: 500px) {
 
  #clip-top{
      margin-top:-20px;
  }
  .hero{
      text-align: center;
      padding:3% 3% 15%;
  }
  .hero-content h3{
      display:none;
  }
}
@media only screen and (max-width: 400px) {
 
}
@media only screen and (max-width: 300px) {
  
  #clip-top{
      margin-top:-25px;
  }
}