.maincontent{
  max-width:100%;
}
*{
    margin:0;
  
    box-sizing: border-box;
}
:root{
   --accent-color:#4A4443;
   --accent-color-light:#FEFFF7;
}
.row{
    margin:0 !important;
}
h1, h2, h3 {
    font-family: 'Poppins', sans-serif; 
 }
 p {
   font-family: 'Source Sans Pro', sans-serif;
}
 .rButton {
   background-color:#FEFFF7;
   border-radius:3px;
   border:1px solid rgba(51,51,51,0.9);;
   display:inline-block;
   cursor:pointer;
   color:rgba(51,51,51,0.9);
   font-family: 'Oxygen', sans-serif; 
   font-size:18px;
   padding:10px 24px;
   text-decoration:none;
   transition:.3s;
}

.rButton:hover {
   background-color:rgba(51,51,51,0.9);
   color:#FEFFF7;
   text-decoration:none;
   box-shadow: 0px 2px 8px -4px #FEFFF7;
   -webkit-box-shadow: 0px 2px 8px -4px rgba(51,51,51,0.9);
   -moz-box-shadow: 0px 2px 8px -4px rgba(51,51,51,0.9);
   transform:scale(.99);
}



 .overlay {
   position: relative;
 }
 .maincontent {
    max-width:100%;
 }
 
 .cropped { 
     max-height: 650px;
     overflow: hidden;
 }
 .hero-grid{
   display:grid;
   background:url('/imageserver/Reusable/painting2021/marble-BG2.jpg');
   background-repeat:no-repeat;
   border-bottom:2px solid black;

   
}
.hero-header{
   grid-area:2/2/3/5;
   margin-left:10%;
   max-width:500px;
}
.hero-business-name{
   grid-area:3/2/4/5;
   margin-left:10%;;
   padding:3% 0;
}           
.hero-cta{
   grid-area:4/2/5/5;
   margin-left:10%;
} 
.hero-main-img{
   grid-area:1/5/7/11;
   justify-self:end;
}   

.hero-text-block {
   position: absolute;
   top: 40%;
   left: 10%;
   font-weight:700;
   border-left:5px solid var(--accent-color);
   padding-left:20px;
 }
 .hero-text-block-mobile {
   display:none;
   color: black;
   font-weight:700;
   border-left:5px solid var(--accent-color);
   padding-left:20px;
 }
 /* =========================== Main ============================= */
 
 .main-wrapper{
   padding:3% 8%;
 }

.main-wrapper hr{
   height: 1px;
   width: 60%;
   margin: 15px 0;
   background: #000;
}
 .main-wrapper img{
   float:right;
   /* order:1; */
   padding:0 20px 20px;
 }
 .list-item-title{
    font-weight:600;
 }
 
 
 /* =========================== Section1 ================================== */
 .section1{
   background:  url('/imageserver/Reusable/painting2021/dining-room-min.jpg');  
    background-attachment: fixed; 
    background-repeat: no-repeat;
    background-position: left; 
    background-size: cover; 
    border-top: 5px solid var(--accent-color); 
    border-bottom: 5px solid var(--accent-color); 
    clear:both;
     }

     .interior {
      background:url('/imageserver/Reusable/painting2021/marble-BG2.jpg');
      background-repeat:no-repeat;
    background-size:cover;
      padding:40px;
   }
   
   .interior-image-mobile {
      display:none;
   }

 /* =========================== Section2 ================================== */
 .section2{
   background-image: url("/imageserver/Reusable/painting2021/house3-min.jpg"); 
   background-attachment: fixed; 
   background-position: right; 
   background-repeat: no-repeat; 
   background-size: cover; 
   border-bottom:5px solid var(--accent-color);
 }
 .exterior {
   background:url('/imageserver/Reusable/painting2021/marble-BG2.jpg');
   background-repeat:no-repeat;
   background-size:cover;
    padding:40px;
 }
 
 .exterior-image-mobile {
    display:none;
 }
 
 /* =========================== Section3 ================================== */
 .section3{
   border-bottom:5px solid var(--accent-color);
   padding:3% 8%;
 }
 .section3-header-mobile{
    display:none;
    background-image: url("/imageserver/Reusable/painting2021/paint-swatchBG2.png"); 
   background-repeat: no-repeat; 
   background-position:right;
   background-size: 50%;
 }
 .section3-header{
   text-align:center;
   margin:0 0 40px;
}
 .section3-header p{
    padding:0 10%;
 }
 #process-hr{
   height: 1px;
   max-width: 50%;
   margin: 15px auto;
   background: #000;
 }
 /* =============================== Section4 ======================= */
 .section-divider{
   background: linear-gradient(to bottom,rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .5) 100%), url(/imageserver/Reusable/painting2021/paint-swatch-min.jpg);  
   background-repeat: no-repeat;
   background-size: cover; 
   padding:4% 0;
   color:#fff;
 }
 .section-divider-wrapper{
    text-align:center;
    margin:0 0 40px;
 }
.section-divider-wrapper h2{
    
font-size:2.2rem;
 } 
 .section-divider-wrapper h5{
    padding:0 10%;
font-size:1.3rem;
 } 
 
 /* ============================= Media ======================== */

 @media only screen and (max-width: 992px) {
    .hero-grid{
       display:block;
       text-align:center;
    }
   .hero-header{
      margin:20px 0 0 0;
      max-width:100%;
   }
   .hero-business-name{
      display:inline-block;
      margin:0 1%;
   }
   .hero-cta{
      display:inline;
      margin:0 1%;
   }
   .main-wrapper-content h2{
      display:none;
   }
   .main-wrapper-content hr{
      display:none;
   }
   .interior  {
     margin-top:-50px;
   }
  .empty-div{
     background-color:#fff;
     display:none;
  }
  .row{
     display:block;
  }
  .col-md-6{
     max-width:100% !important;
  }
   .interior-image-mobile, .exterior-image-mobile{
     display:block;
   }
   .exterior-bottom-div-mobile{
     background-color:white;
   }
   .section3{
      padding: 0;
   }
   .section3-list{
      padding:2% 40px;
   }
   .section3-header{
      display:none;
   }
   .section3-header-mobile{
      display:block;
      padding:2% 40vw 2% 2%;
   }
   #process-hr{
      margin:15px 0;
      max-width:90%; 
   }
   .section-divider-wrapper p{
      padding:0 3%;
   }
 }

 @media only screen and (max-width: 768px) {
   
   .section3-header-mobile{
      background-image:linear-gradient(to bottom,rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .5) 100%), url("/imageserver/Reusable/painting2021/paint-swatchBG2.png"); 
     background-position:center;
     background-size: cover;
     text-align:center;
     color:#fff;
   }
   .section3-header-mobile{
      padding:2%;
   }
   #process-hr{
      margin:15px auto;
      max-width:50%; 
      background-color:#fff;
   }
   .section-divider-wrapper h5{
    padding:0 5%;
 } 
 }
 @media only screen and (max-width: 600px) {
   .hero-text-block-mobile {
     display:block;
     border-left:0px;
  }

   .hero-text-block {
     display:none;
  }
  .main-wrapper h2{
     text-align:center;
     order:1;
  }
  .main-wrapper hr{
   margin:15px auto;
  }
  .main-wrapper p{
     text-align:center;
     order:2;
  }
  
}

@media only screen and (max-width: 400px) {
   .rButton{
      font-size:14px;
      padding:8px 18px;
   }
}