body{
    box-sizing: border-box;
    margin:0;
    padding:0;
  
}
.maincontent{
    max-width:100%;
    padding:0;
    margin:0;
}
.maincontent_wrapper{
    padding-top:0;
} 
  h1,h2,h3 {
    font-family: 'Poppins', sans-serif;
    font-weight:200;
  }
  
  p {
    font-family: 'Lato', sans-serif;
    font-weight:300;
    font-size:18px;
  }
  .bold{
      font-weight:700;
  }
  .solarButton {
      background-color:#9EC1DB;
      border-radius:20px;
      display:inline-block;
      cursor:pointer;
      color:#ffffff;
      font-size:17px;
      padding:12px 25px;
      text-decoration:none;
  }
  .solarButton:hover {
      background-color:#8CAAC2;
          color:white;
  }
  .solarButton:active {
      position:relative;
      top:1px;
  }
  
  .solar-header {
    margin: 60px 0 30px;
    max-width:1000px;
  }
  
  .main-wrapper1 {
    padding:4%;
    text-align:center;
  }
  
  .main-box {
    margin-top:40px;
    text-align:center;
    background-color:white;
    padding:25px;
  position:relative;
    z-index: 1;
    margin-right:-200px;  
    -webkit-box-shadow: 5px 5px 8px 3px rgba(0,0,0,0.21); 
  box-shadow: 5px 5px 8px 3px rgba(0,0,0,0.21);
  }
  
  .center-wrapper {
      padding:5%;
}

.center-box2 {
    margin:50px 0;
 
  }
  
  .center-box2 h2 {
    max-width:900px;
    padding:30px 0;
  }
  #tline-solar{
      margin:100px auto 50px;
      display:grid;
      align-items: center;
      justify-content: center;
  }
  #tline-main-image{
      grid-row:1/2;
      grid-column:1/2;
      width:100%;
  }
  #tline-main-content{
    grid-row:1/2;
    grid-column:1/2;
    text-align: center;
    background-image:linear-gradient(rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.9) 100%);
    -webkit-box-shadow: 5px 5px 8px 3px rgba(0,0,0,0.21); 
  box-shadow: 5px 5px 8px 3px rgba(0,0,0,0.21);
    max-width:60%;
    margin:0 auto;
    padding:5%;
  }
  .modal-dialog{
      width:80%;
      text-align: center;
  }
  #tline-shingle{
      padding:5%;
  }
  #grid-5050{
      display:grid;
      grid-template-columns: repeat(2, 1fr);
      gap:30px;
  }
  .flex-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
  }
  
  .flex-item {
    margin-bottom:10px;
  }
  
  .flex-item p {
    font-weight:600;
  }
  
  .overlay {
    position: relative;
    width:100%;
  }
  
  .image {
    opacity: 1;
    display: block;
    width: 100%;
    height: auto;
    transition: .5s ease;
    backface-visibility: hidden;
  }
  
  .middle {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
    width:75%;
  }
  
  .overlay:hover .image {
    opacity: 0.2;
  }
  
  .overlay:hover .middle {
    opacity: 1;
    cursor:pointer;
  }
  

  .center-box-text3 {
     margin-top:40px;
    text-align:center;
    background-color:white;
    padding:25px;
    margin-left:-200px;
    position:relative;
    z-index: 1;
    -webkit-box-shadow: 5px 5px 8px 3px rgba(0,0,0,0.21); 
  box-shadow: 5px 5px 8px 3px rgba(0,0,0,0.21);
  }
  
  @media only screen and (max-width: 400px) {
    .middle {
  
      width:100%;
    }
    .middle p {
      font-size:14px;
    }
  }
  
  @media only screen and (max-width: 992px) {
    .main-box {
       margin-top:0;
       margin-right:0;
    }
    .center-box-text3 {
       margin-top:0;
       margin-left:0;
    }
    #tline-main-content{
        max-width:100%;
      }
      #tline-solar{
        display:block;
    }
  }
  
  @media only screen and (max-width: 1200px) {
    .flex-container {
      flex-direction: column;
    }
  }