@import url('https://fonts.googleapis.com/css?family=Josefin+Sans');
@import url('https://fonts.googleapis.com/css?family=Niconne&display=swap');
@import url('https://fonts.googleapis.com/css?family=Teko:300,400&display=swap');
@import url('https://fonts.googleapis.com/css?family=Playfair+Display+SC|Roboto:300,400&display=swap');
@import "https://fonts.googleapis.com/css?family=Lato|Open+Sans";
@import url('https://fonts.googleapis.com/css?family=Raleway:800&display=swap');
* {
    margin: 0;
   padding: 0;
    box-sizing: border-box;
}

/*Main reusable - global styles*/

ul {
    list-style: none;
}

a {
    text-decoration: none!important;
    color: #6c757d;
}


/* animation: moveUp 1.5s ease-in; */



.logo-box {
    float: left !important;
    padding-left: 8px;
}

.logo {
    width: 100%;
    height: 100%;
    padding-left: 5px;
    padding-top:3px;
}



section {
    padding: 60px 0;
    width: 100%;
    height: 100%;
}

img {
    /* width: 100%; */
    max-width: 100%;
}

.section-heading h1 {
    font-size: 20px;
    font-weight: normal;
    margin: 0;
}

/* .btn-secondary{
    background-color: #f5f5f5;
}

.btn-secondary:hover{
    color: #eee;
} */

/*End reusable - global*/

/*Header*/

.custom-nav-container {
    color: #eee;
    display: inline block;
    width: 100%;
    height: 100%;
    text-align: right;
    size: 4px;
    position: relative;
    background-color: #000;
    /* box-shadow: 0 0 10px rgba(255, 255, 255, 0.2); */
    /* z-index: 1; */
}

.button {
    text-align: right;
}

.dropdown{
    position: relative;
    display: inline-block;
}

.main-nav .nav-link {
    display: block;
    font-size: 14px;
    text-transform: uppercase;
    text-align: right;
    font-family: "Raleway";
    color: #eee;
}

.phone{
    color: white;
    font-family: "Impact";
    font-size: 20px;
    float: right;
    padding-right: 50px !important;
}


.sub-menu{
    display: none;
    position: absolute;
    background-color: #000;
    min-width: 160px;
    /* box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); */
    z-index: 1;
  }

.sub-menu a{
    color: #eee;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-family: "Raleway";
  }
  
  .sub-menu a:hover {background-color: #000;}
  
  .dropdown:hover .sub-menu{display: block;}

/* .main-nav-outer{
    color: #eee;
    width: 250px;
    height: 100vh;
    background-color: #eee;
    position: fixed;
    top: 0;
    right: -260px;
    border-left: 5px solid #eee;
    z-index: 1500;
	text-decoration: none;
	transition: background 1s ease-in-out;
        -webkit-transition: background 1s ease-in-out;
	cursor: pointer;
}  */

/* .navbar-light .navbar-nav .nav-link{
    color: #eee;
    display: inline block;

} */

.main-nav-outer.open-menu {
    right: 0;
    color: #eee;
    display: inline block;
}

.menu-close-icon {
    position: absolute;
    top: 5px;
    left: 10px;
    color: #eee;
    display: inline block;
    opacity: 1;
}



/* .nav-icon > a{
    position: relative;
} */

.heading-has-bg {
    width: 100%;
    height: 95vh;
    font-family: "Futura";
    background: linear-gradient(rgba(34, 38, 41, 0.8), rgba(34, 38, 41, 0.1)), url("/images/fairmount.jpg") center no-repeat;
    /* background: linear-gradient(to right bottom, rgba(213, 23, 26, 0.6), rgba(180, 3, 0, 0.6)), url("images/fairmount.jpg") center no-repeat; */
    background-size: cover;
    position: relative;
    /* clip-path: polygon(0 0, 100% 0, 100% 80vh, 0 100%); */
}

.heading-has-bg h1 {
    font-family: fantasy;
    font-size: 50px;
    color: #fff;
    text-shadow: 0 0.625rem 1.5rem rgba(0, 0, 0, .4);
}

/*Large devices (desktops, 992px and up)*/

@media (min-width: 992px) {
    .nav-icon .dropdown-menu {
        margin-left: -235px;
    }
    .nav-icon .dropdown-menu::before {
        right: 15px;
    }
    .main-nav-outer {
        width: initial;
        height: initial;
        background-color: initial;
        position: initial;
        border: none;
    }
}

/*End header*/

/*cart*/

.header {
    width: 100%;
    height: 95vh;
    font-family: "Raleway", Arial, sans-serif;
    background: linear-gradient(rgba(10, 23, 38, .81), rgba(10, 23, 38, .81)), url("images/fairmount.jpg") center no-repeat;
    /* background: linear-gradient(to right bottom, rgba(213, 23, 26, 0.6), rgba(180, 3, 0, 0.6)), url("images/fairmount.jpg") center no-repeat; */
    background-size: cover;
    position: relative;
    /* letter-spacing: -3px; */
    /* clip-path: polygon(0 0, 100% 0, 100% 80vh, 0 100%); */
}

.heading-has-bg h1 {
    font-family: Raleway;
    font-size: 50px;
    color: #fff;
    text-shadow: 0 0.625rem 1.5rem rgba(0, 0, 0, .4);
}

.text-box {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
    text-align: center
}

.primary-heading {
    /* position: fixed; */
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 6rem;
}

.heading-main {
    display: block;
    font-size: 4rem;
    font: weight 4;
    letter-spacing: -3px;
    margin-right: -3.5rem;
    animation: moveLeft 1s ease-in;
}

.heading-sub {
    font-family: "Raleway";
    display: block;
    font-size: 2rem;
    padding: 3px;
    font-weight: 15;
    margin-right: -1.75rem;
    animation: moveRight 1s ease-in;
}

/* .btn {

    width: 100px;
    padding: 5px 0;
    border: 1px solid #48b411;
    position: relative;
    overflow: hidden;
} */

.btn {
    padding: 5px 0;
    display: inline-block;
    background-color: #48B411;
    border: 1px solid #48B411;
    position: relative;
    overflow: hidden;
    border-radius: 5rem;
    transition: all 650ms;
}

.btn::before {
    content: "";
    /* overflow: hidden; */
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .3), transparent);
    transition: all 650ms;
}

/*About*/

.about-main {
    padding: 50px;
    text-transform: uppercase;
    font-size: 8.5rem;
    padding-bottom: 2rem;
    opacity: .8;
    color: #151515;
    line-height: 0;
    font-family: 'Raleway';
    font-weight: 300;
    letter-spacing: -8px;
}

.about-sub {
    font-family: 'Raleway';
    font-weight: bold;
    font-size: 3rem;
    color: #48B411;
    text-align: center;
}

.about .btn {
    width: 150px;
    padding: 5px 0!important;
    border: 1px solid #48b411;
    position: relative;
    overflow: hidden;
}

.about .btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .3), transparent);
    transition: all 650ms;
}

.about .btn:hover::before {
    left: 100%;
}

.about .btn:hover {
    color: #fff!important;
    background-color: #48B411;
}

/*Menu*/

.menu {
    background-color: #222629;;
}

.menu-header {
    text-align: center;
}

.menu-header h4 {
    font-family: 'Raleway', sans-serif;
    font-size: 3rem;
    padding-bottom: 3rem;
}

.services-main {
    text-transform: uppercase;
    font-size: 10rem;
    padding-bottom: 8rem;
    opacity: .4;
    color: #fff;
    line-height: 0;
    font-family: 'Raleway', sans-serif;
    font-weight: 300;
    letter-spacing: 1px;

}

.services-sub {
    font-family: 'Oswald';
    font-weight: bold;
    font-size: 6rem;
    color: #fff;
}

.shop-info img {
    max-width: 25%;
    max-height: 25%;
}

.shop-info h1 {
    font-family: "Oswald", sans-serif;
    font-size: 25px;
    font-weight: 300;
    text-transform: uppercase;
}

.shop-info p, .shop-info address {
    color: rgba(255, 255, 255, .5);
}

.point-right, .point-left {
    position: relative;
    background-color: #fff;
    display: flex;
}

/* .point-left::before,
.point-right::before{
    content: "";
    position: absolute;
    width: 25px;
    height: 25px;
    background-color: inherit;
    top: -12px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    z-index: 1;
}
.menu-item-desc{
    padding: 50px 10px;
    color: #212529;
    margin: auto;
}
.menu-item-desc h6{
    color: #48B411;
    font-size: 20px;
}
.menu-item-desc h1{
    color: #101D2C;
    font-size: 30px;
    letter-spacing: 1px;
    font-family: 'Teko', sans-serif;
    font-weight: 300;
} */

/*Gallery*/


.section-heading {
    position: relative;
    display: block;
    margin-bottom: 100px;
}

.section-heading::before {
    content: "";
    position: absolute;
    background-color: rgba(56, 65, 71, 0.5);
    width: 1px;
    height: 50px;
    top: 53px;
    border-radius: 8px;
}

.heading-title {
    font-family: 'Raleway', sans-serif;
    text-transform: uppercase;
    color: #384147;
    font-size: 22px;
}

.lightbox-content {
    position: relative;
    overflow: hidden;
}

.lightbox-content img {
    transition: transform 2s;
}

.lightbox-content:hover img {
    transform: scale(1.2);
}

.lightbox-content a::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    transition: background-color .5s;
}

.lightbox-content a:hover::before {
    background-color: rgba(0, 0, 0, .7);
}

.lightbox-content a::after {
    font-family: 'Font Awesome 5 Free';
    content: "\f00e";
    font-weight: 600;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 25px;
    z-index: 101;
    width: 70px;
    height: 70px;
    border: 3px solid #fff;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .5s;
}

.lightbox-content a:hover::after {
    opacity: .5;
}

/*Testimonial*/

.testimonials{
    background-color: #222629;
}

.testimonial-title{
    font-family: 'Raleway', sans-serif;
    text-transform: uppercase;
    color: #eee;
    font-size: 22px;
}

.carousel {
    padding: 0 20px;
}

.carousel .item {
    color: #eee;
    font-size: 14px;
    text-align: center;
}

.carousel .item .img-box {
    width: 135px;
    height: 135px;
    margin: 0 auto;
    padding: 5px;
    border: 1px solid #48B411;
    border-radius: 100%;
}

.carousel .img-box img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 100%;
}

.carousel .testimonial {
    padding: 25px;
    font-style: italic;
}

.carousel .customer {
    text-transform: uppercase;
    color: #eee;
    font-weight: 300;
}

.carousel .carousel-control {
    width: 25px;
    height: 25px;
    top: 50%;
    transform: translateY(-50%);
    background-color: #48B411;
    border-radius: 100%;
}

.carousel-control i {
    font-size: 20px;
    color: #fff;
}

.carousel-indicators {
    bottom: -40px;
}

.carousel-indicators li, .carousel-indicators li.active {
    width: 10px;
    height: 10px;
    background-color: #48B411;
    border-radius: 100%;
}

footer {
    background-color: #101D2C;
    color: rgba(255, 255, 255, .5);
}

@media (min-width: 576px) {
    .navbar-brand {
        max-width: 150px;
    }
    .hamburger-menu {
        top: 35px;
        right: 25px;
    }
    .point-right::before, .point-left::before {
        display: none;
    }
    .menu-item-desc {
        padding: 50px 20px;
    }
}

@media (min-width: 768px) {
    .btn {
        width: 150px;
    }
        .navbar {
            background-color: transparent;
        }
    
        .navbar-nav{
            padding: 0;
        }
    
        .nav-link{
            color: #384147;
        }
    
        .nav-link:hover{
            color: inherit;
        }
    
        nav:hover .nav-link:not(:hover){
            opacity: .5;
        }
    
        .about-content{
            position: relative;
            display: block;
        }
    
        .about-description{
            position: absolute;
            top: 80%;
            transform: translateY(-50%);
            width: 60%;
            outline-offset: -10px;
        }
    
        .about-image img{
            width: 70%;
            margin-left: auto;
        }
    
        .lightboxOverlay{
            overflow: hidden;
        }
    }


@media (min-width: 992px) {
    header>.container {
        padding: 0 15px;
    }
    .hamburger-menu {
        display: none;
    }
    .navbar-brand {
        position: initial;
        transform: initial;
    }
    .nav-list {
        position: initial;
        width: initial;
        height: initial;
        background-color: initial;
        flex-direction: row;
        opacity: initial;
        transform: initial;
        transition: initial;
        margin: 0;
        padding: 0;
    }
    .nav-item {
        margin: 0 30px;
    }
    .nav-item:last-child {
        margin-right: 0;
    }
    .nav-link {
        position: relative;
        padding: 0;
    }
    .nav-link::before {
        content: "";
        position: absolute;
        left: 0;
        bottom: -3px;
        background-color: #48B411;
        width: 100%;
        height: 2px;
        transform: scaleX(0);
        transform-origin: center;
        transition: transform 650ms;
    }
    .nav-link:hover::before {
        transform: scaleX(1);
    }
}

/*Extra large devices (large desktops, 1200px and up)*/

@media (min-width: 1200px) {
    .point-right::before, .point-left::before {
        display: block;
        top: 50%;
        left: initial;
        transform: translate(0, -50%) rotate(45deg);
    }
    .point-left::before {
        left: -12px;
    }
    .point-right::before {
        right: -12px;
    }
    .menu-item-desc p {
        display: none;
    }
    .menu-item-desc .btn {
        color: #fff !important;
        background-color: #48B411;
    }
    /* .lb-close{
        position: absolute;
        float: none;
        top: -20px;
        right: 30px;
    } */
}


/*Brands*/

/*Featured Brands*/

.featured-brands-img img {
    width: 100%;
    max-width: 100px;
    max-height: 100px;
    opacity: .7;
    transition: opacity 650ms;
}

.featured-brands-img img:hover {
    opacity: 1;
}

/*End featured brands*/

/*Footer*/

footer {
    background-color: #eee;
}

footer h5 {
    color: #fff;
    font-family: 'Playfair Display SC', sans-serif;
}

.text-muted {
    color: rgba(255, 255, 255, .7) !important;
}

.input-group .btn {
    background-color: #384147;
    color: #fff;
    transition: opacity .5s;
}

.input-group .btn:hover {
    opacity: .6;
}

@media screen and (min-width: 768px) {
    .navbar {
        background-color: transparent;
    }
    .navbar-nav {
        padding: 0;
    }
    .nav-link {
        color: #384147;
    }
    .nav-link:hover {
        color: inherit;
    }
    nav:hover .nav-link:not(:hover) {
        opacity: .5;
    }
    .about-content {
        position: relative;
        display: block;
    }
    .about-description {
        position: absolute;
        top: 80%;
        transform: translateY(-50%);
        width: 60%;
        outline-offset: -10px;
    }
    .about-image img {
        width: 70%;
        margin-left: auto;
    }
     .lightboxOverlay {
        overflow: hidden;
    } 
} 

 @media screen and (min-width: 1200px) {
    .about-description {
        top: 50%;
        width: 40%;
        outline: 10px solid rgba(56, 65, 71, .5);
        outline-offset: -20px;
    }
    .about-image img {
        width: 80%;
    }
    .lb-close {
        position: absolute;
        float: none;
        top: -20px;
        right: 30px;
    }
} 

/* Small devices (landscape phones, 576px and up)*/

@media (min-width: 576px) {
    .product-card {
        height: 280px;
    }
}

.header-image img {
    width: 100%;
    height: 50vh;
}

Start Services

.section.services{
      height: 50vh; 
      width: 100%;
      padding: 30px !important;
      background-color: #222629;

} 

   /* .custom-header-container{
    width: 100%;
    height: 80%;
    background: linear-gradient(rgba(10, 23, 38, .81), rgba(10, 23, 38, .81)), url("/images/servicesHeaderImage.jpg") center no-repeat;
    object-fit: cover;   */


/*  
.grid-container {
    display: grid;
    background-color: #222629;
    color: #eee;
    grid-template-columns: 1fr 1fr 1fr 1.5fr .5fr 1fr;
    grid-template-rows: .7fr 1.1fr 1.2fr;
    grid-template-areas: "picture picture picture services services services" "picture picture picture home-repair renovations renovations" "picture picture picture plumbing electrical electrical" ". . . roofing mold mold";
    grid-auto-rows: minmax(300px, auto);
    height: 100%;
    width: 100%;
  }
  
  .picture { grid-area: picture; }
  
  .repair-services { grid-area: services; }
  
  .home-repair { grid-area: home-repair; }
  
  .renovations { grid-area: renovations; }
  
  .plumbing { grid-area: plumbing; }
  
  .electrical { grid-area: electrical; }

  .roofing{ grid-area: roofing;}

  .mold{ grid-area: mold;}


.picture {
    grid-area: picture ;
    height: 100%;
    width: 100%;
    padding-right: .5rem;
    padding-left: .5rem;
}

.repair-services {
    grid-area: services;
    text-align: left;
    word-wrap: break-word;
    padding-left: 10px;

}



.home-repair {
    grid-area: home-repair;
    text-align: left;
    padding-left: 10px;
}

.home-renovations {
    grid-area: renovations;
    text-align: right;
    padding-right: 20px;
}

.plumbing {
    grid-area: plumbing;
    text-align: left;
    padding-left: 10px;
}

.painting {
    grid-area: electrical;
    text-align: right;
    padding-right: 20px;
}

.roofing{
    grid-area: roofing;
    text-align: left;
    padding-left: 10px;
}

.mold{
    grid-area: mold;
    text-align: right;
    padding-right: 20px;
} */



.services-header{
    font-family: "Raleway";
}

.services-h4{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
} 

p.services{
    text-overflow: ellipsis;
}

.home-repair img{
    height: 25%;
    width: 25%;
}

.home-renovations img{
    height: 25%;
    width: 25%;
}
.plumbing img{
    height: 25%;
    width: 25%;
}

.painting img{
    height: 25%;
    width: 25%;
}

.roofing img{
    height: 25%;
    width: 25%;
}

.mold img{
    height: 25%;
    width: 25%;
}


.footer{
    background: #222629;
    color:white;
    flex: content;
}
    
    .links ul{
      list-style-type: none;
    }
      li a{
        color: white;
 
      
    }  
    .about-company i{
      font-size: 25px;}
      a{
        color:white;
       
      
    } 
    .location i{
      font-size: 18px;}
    
    .copyright p{border-top:1px solid rgba(255,255,255,.1);} 


    .carousel-item {
        height: 50vh;
        min-height: 350px;
        font-family: Raleway;
        background: no-repeat center center scroll;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: fill;;
      }

      .fa-facebook-square:hover {
        color: #4267b2;
    }
    .fa-instagram:hover {
        background: linear-gradient(#fd57bf, #ffe838);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    /* Set the size of the div element that contains the map */
#map {
    height: 20rem;
    width: 15rem;
   }

   .header-secondary{
    width: 100%;
    height: 75vh;
    font-family: "Raleway", Arial, sans-serif;
    background: linear-gradient(rgba(10, 23, 38, .81), rgba(10, 23, 38, .81)), url("images/image002-copy.jpg") center no-repeat;
    /* background: linear-gradient(to right bottom, rgba(213, 23, 26, 0.6), rgba(180, 3, 0, 0.6)), url("images/fairmount.jpg") center no-repeat; */
    background-size: cover;
    position: relative;
    /* letter-spacing: -3px; */
    /* clip-path: polygon(0 0, 100% 0, 100% 80vh, 0 100%); */
}

.heading-has-bg h1 {
    font-family: Raleway;
    font-size: 50px;
    color: #fff;
    text-shadow: 0 0.625rem 1.5rem rgba(0, 0, 0, .4);
}

.secondary-text-box {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
    text-align: center
}

.secondary-primary-heading {
    /* position: fixed; */
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 6rem;
}

.secondary-heading-main {
    display: block;
    font-size: 3rem;
    font: weight 4;
    letter-spacing: -3px;
    margin-right: -3.5rem;
    animation: moveLeft 1s ease-in;
}
 .secondary-heading-sub {
    font-family: "Raleway";
    display: block;
    font-size: 2rem;
    padding: 3px;
    font-weight: 15;
    margin-right: -1.75rem;
    animation: moveRight 1s ease-in;
} 

.header-about{
    width: 100%;
    height: 45vh;
    font-family: "Raleway", Arial, sans-serif;
    background: url("images/team-photo.png") center no-repeat;
    /* background: linear-gradient(to right bottom, rgba(213, 23, 26, 0.6), rgba(180, 3, 0, 0.6)), url("images/fairmount.jpg") center no-repeat;  */
     background-size: cover;
    position: relative; 
     letter-spacing: -3px; 
     clip-path: polygon(0 0, 100% 0, 100% 80vh, 0 100%);
 }

/* .about-grid-container {
    display: grid;
    background-color: #222629;
    color: #eee;
    grid-auto-rows: minmax(300px, auto);
    height: 100%;
    width: 100%;
    grid-template-columns: 1fr 1fr 1fr 1fr 1.5fr 1.5fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-template-areas: "Text-area-1 Text-area-1 Text-area-1 Text-area-1 picture-1 picture-1 picture-1" "Text-area-1 Text-area-1 Text-area-1 Text-area-1 picture-2 picture-2 picture-2" "Text-area-1 Text-area-1 Text-area-1 Text-area-1 picture-3 picture-3 picture-3" "Text-area-1 Text-area-1 Text-area-1 Text-area-1 picture-4 picture-4 picture-4";
  }
  
  .Text-area-1 { grid-area: Text-area-1;
    text-align: center;
    
}
  
  .picture-1 { grid-area: picture-1; }
  
  .picture-2 { grid-area: picture-2; }
  
  .picture-3 { grid-area: picture-3; }
  
  .picture-4 { grid-area: picture-4; } */

  p a{
      color: #000;
  } 

  /*Sub Menu Heading*/

  .submenu-heading {
    text-transform: uppercase;
    font-size: 6rem;
    padding-bottom: 1.5rem;
    opacity: .8;
    color: #151515;
    line-height: 0;
    font-family: 'Raleway';
    font-weight: 'bold';
    /* letter-spacing: 1px; */
    text-align:center;
    letter-spacing: -3px;
}


.mrs-sub {
    font-family: 'Raleway';
    font-weight: bold;
    font-size: 3rem;
    color: #48B411;
    text-align: center;
    
}
/* 
.truck-reno img{
    max-width: 80%;
    max-height: 80%;
} */


/*Services Page*/

#portfolio .portfolio-item {
    right: 0;
    margin: 0 0 15px;
  }
  
  #portfolio .portfolio-item .portfolio-link {
    position: relative;
    display: block;
    max-width: 400px;
    margin: 0 auto;
    cursor: pointer;
  }
  
  #portfolio .portfolio-item .portfolio-link .portfolio-hover {
    position: absolute;
    width: 100%;
    height: 100%;
    transition: all ease 0.5s;
    opacity: 0;
    background: #212529;
  }
  
  #portfolio .portfolio-item .portfolio-link .portfolio-hover:hover {
    opacity: .6;
  }
  
  #portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content {
    font-size: 20px;
    position: absolute;
    top: 50%;
    width: 100%;
    height: 20px;
    margin-top: -12px;
    text-align: center;
    color: white;
  }
  
  #portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content i {
    margin-top: -12px;
  }
  
  #portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h3,
  #portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h4 {
    margin: 0;
  }
  
  #portfolio .portfolio-item .portfolio-caption {
    max-width: 400px;
    margin: 0 auto;
    padding: 25px;
    text-align: center;
    background-color: #fff;
  }
  
  #portfolio .portfolio-item .portfolio-caption h4 {
    margin: 0;
    text-transform: none;
  }
  
  #portfolio .portfolio-item .portfolio-caption p {
    font-size: 16px;
    font-style: italic;
    margin: 0;
    font-family: 'Droid Serif', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  }
  
  #portfolio * {
    z-index: 2;
  }
  
  @media (min-width: 767px) {
    #portfolio .portfolio-item {
      margin: 0 0 30px;
    }
  }
  
  .portfolio-modal .modal-dialog {
    margin: 1rem;
    max-width: 100vw;
  }
  
  .portfolio-modal .modal-content {
    padding: 100px 0;
    text-align: center;
  }
  
  .portfolio-modal .modal-content h2 {
    font-size: 3em;
    margin-bottom: 15px;
  }
  
  .portfolio-modal .modal-content p {
    margin-bottom: 30px;
  }
  
  .portfolio-modal .modal-content p.item-intro {
    font-size: 16px;
    font-style: italic;
    margin: 20px 0 30px;
    font-family: 'Droid Serif', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  }
  
  .portfolio-modal .modal-content ul.list-inline {
    margin-top: 0;
    margin-bottom: 30px;
  }
  
  .portfolio-modal .modal-content img {
    margin-bottom: 30px;
  }
  
  .portfolio-modal .modal-content button {
    cursor: pointer;
  }
  
  .portfolio-modal .close-modal {
    position: absolute;
    top: 25px;
    right: 25px;
    width: 75px;
    height: 75px;
    cursor: pointer;
    background-color: transparent;
  }
  
  .portfolio-modal .close-modal:hover {
    opacity: 0.3;
  }
  
  .portfolio-modal .close-modal .lr {
    /* Safari and Chrome */
    z-index: 1051;
    width: 1px;
    height: 75px;
    margin-left: 35px;
    /* IE 9 */
    transform: rotate(45deg);
    background-color: #212529;
  }
  
  .portfolio-modal .close-modal .lr .rl {
    /* Safari and Chrome */
    z-index: 1052;
    width: 1px;
    height: 75px;
    /* IE 9 */
    transform: rotate(90deg);
    background-color: #212529;
  }

  .servicespage-main {
    padding: 50px;
    text-transform: uppercase;
    font-size: 2.5rem;
    padding-bottom: 0rem;
    opacity: .8;
    color: #151515;
    line-height: 0;
    font-family: 'Raleway';
    font-weight: 900;
    letter-spacing: -2px;
}

.grid-container {
    display: grid;
    grid-template-columns: 2.1fr 1fr 1fr;
    grid-template-rows: 1fr .5fr .5fr;
    grid-template-areas: "handyman-services handyman-services handyman-services" "service-area-1 service-area-2 service-area-2" "service-area-1 service-area-2 service-area-2";
  }
  
  .handyman-services { grid-area: handyman-services; }
  
  .service-area-1 { grid-area: service-area-1;}
  
  .service-area-2 { grid-area: service-area-2;}

  .service-area-1 ul{
      list-style-type: inherit;
  }
  .service-area-2 ul{
    list-style-type: inherit;
}

.services-main {
    padding: 30px;
    text-transform: uppercase;
    font-size: 5.5rem;
    padding-bottom: 1rem;
    opacity: .8;
    color: #151515;
    font-family: 'Staatliches', sans-serif;
    font-weight: 1000;
}

.services-sub {
    font-family: 'Raleway';
    font-weight: bold;
    font-size: 3rem;
    color: #48B411;
    letter-spacing: -4px;
    text-align: center;
}

.handymanservices-main {
    padding: 50px;
    text-transform: uppercase;
    font-size: 4.5rem;
    padding-bottom: 1.5rem;
    opacity: .8;
    color: #151515;
    line-height: 0;
    font-family: 'Staatliches', sans-serif;
    font-weight: 300;
    letter-spacing: 1px;
}

.services-bullets{

        columns: 2;
        -webkit-columns: 2;
        -moz-columns: 2;

}