body{
    box-sizing: border-box;
    margin:0;
    padding:0;
    font-size:18px;
}
.maincontent{
    max-width:100%;
    padding:0;
    margin:0;
}
.maincontent_wrapper{
    padding-top:0;
}
p {
    font-weight:600;
    line-height:1.8em;
  }
  
  .myButton {
      background-color:#fff;
      position: relative;
      border-radius:5px;
      border:1px solid #1C0B66;
      display:inline-block;
      cursor:pointer;
      color:#1C0B66;
          letter-spacing:1.5px;
          font-weight:300;
      font-size:16px;
      padding:10px 22px;
      text-decoration:none;
      filter:drop-shadow(3px 3px 3px rgba(0,0,0,0.3));
      transform-origin:center;
  }
  .myButton::before{
      content:"";
      position: absolute;
      top:0;
      left:0;
      height:100%;
      width:100%;
      background-color:#1C0B66;
      transition:.3s;
      transform-origin:center;
      transform:scale(0);
  }
  
  .myButton:hover.myButton::before{
      z-index:-1;
      transition:.3s;
      transform-origin:center;
      transform:scale(1);
  }
  .myButton:hover {
      transition:.3s;
      transform: scale(.98);
      color:white;
      text-decoration:none;
      filter:drop-shadow(1px 2px 2px rgba(0,0,0,0.3));
      z-index:5;
  }
  .myButton:active {
      position:relative;
      top:1px;
  }
  .hero {
    
      height: 40vw;
      position: relative;
      color: #fff;
      background-repeat:no-repeat;
      background-size:cover;
  }
  
  .hero-bg {
      -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 50% 100%, 0% 80%);
      clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 50% 100%, 0% 85%);
      height: 100%;
      width: 100%;
      background-color: #ececec;
      position: absolute;
      top: 0;
      left: 0;
  }
  .carousel-inner {
      -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 50% 100%, 0% 80%);
  clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 50% 99%, 0% 80%);
  }
  #hero-tag{
      position: absolute;
      top:20%;
      left:10%;
      text-align:left;
      font-weight:300;
      font-size:2.5rem;
  }
  #hero-tag-text{
      color:#f3f3f3;
      mix-blend-mode:difference;
  }
  #hero1 {
      position: relative;
      background-image: url('/imageserver/UserMedia/kingroofingandsolar/hero.jpg');
      background-size: 100%;
      background-position:center;
      background-repeat: no-repeat;
      top: 0;
      left: 0;
      width: 100vw;
      height: 40vw;
      margin: 0 auto;
  }
  #counter-group{
      display:flex;
      flex-direction:row;
      justify-content: space-evenly;
      flex-wrap:wrap;
      position: relative;
      padding:30px 0;
   
  }
  .counter-item{
      text-align: center;
      position: relative;
      font-size:1.5rem;
      font-weight:600;
  }
  

  .counter-item p{
    font-size:3rem;
  }
  .counter-title{
      
  }
  .main-bg{
      position: absolute;
      background-image:linear-gradient(rgba(255,255,255,0.4)0%, rgba(255,255,255,1)100%), url('/imageserver/UserMedia/kingroofingandsolar/bg_panels.jpg');
      background-size:cover;
      height:25%;
      width:100%;
  }
#hidden{
      position: absolute;
      opacity:0;
  }

  .section3{
    padding:3% 4% 0;
}
.sec3-header{
    text-align: center;
}
.flex-group{
    display:flex;
    flex-direction: row;
    justify-content: space-evenly;
    flex-wrap:wrap;
}

.steps {
 padding:0 8%;
margin-top:75px;
}

.my-card{
    /* border:1px solid #000; */
    max-width:350px;
    padding:4%;
}
.slide img{
    max-width:150px;
}
.my-container .my-card .card-title{
    font-weight:500;
    color: var(--main-color);
    padding:3%;
}

.my-container .my-card .slide.slide1 {
    text-align: center;
}

  
  
  .home {
    border:1px solid black;
    padding:20px 40px;
    margin-top:50px;
    min-height:250px;
  }
  .process-header{
      text-align:center;
  }
  .right img{
     float:left;
     padding:.5em;
  }
  
  .left img{
     float:left;
     padding:.5em;
  }
  
  .durability{
     min-height:150px;
  }
  @media screen and (max-width:800px) {
      #hero-tag{
          font-size:1.5rem;
      }
  }
  @media screen and (max-width:450px) {
      #hero-tag{
          font-size:1rem;
      }
  }