/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Mar 20 2026 | 12:50:20 */
.project-slider .swiper-button-next,.project-slider .swiper-button-prev {
	color: #ffffff !important;
	background-color: #232323;
}
.project-slider .swiper-button-prev:before, .project-slider .swiper-button-next:before {
    color: #ffffff !important;
}
.project-slider picture {
    width: 100%;
}

.objectfit-cover img{
	object-fit:cover;
}
.dif-color{
	color:#008C95;
}
.two-columns{
	display:flex;
	flex-wrap:wrap;
	gap:30px;
}
.two-columns .before-after-image-slider{
	width:calc(50% - 15px);
}
.before-after-image-slider .twentytwenty-horizontal .twentytwenty-before-label,
.before-after-image-slider .twentytwenty-horizontal .twentytwenty-after-label{
	opacity:1;
}
.before-after-image-slider .twentytwenty-horizontal .twentytwenty-before-label:before,
.before-after-image-slider .twentytwenty-horizontal .twentytwenty-after-label:before{
	background:#008C95;
	font-family: 'Raleway', Helvetica, Arial, Lucida, sans-serif;
	color:#fff;
	font-size:20px;
	font-weight:700;
	letter-spacing:0;
	line-height:1;
	padding:10px 20px;
	bottom:15px;
	top:auto;
	margin-top:0;
}
.before-after-image-slider .twentytwenty-horizontal .twentytwenty-before-label:before{
	left:15px;
}
.before-after-image-slider .twentytwenty-horizontal .twentytwenty-after-label:before{
	right:15px;
}
.before-after-image-slider .twentytwenty-horizontal .twentytwenty-handle:after, 
.before-after-image-slider .twentytwenty-horizontal .twentytwenty-handle:before{
	width:1px;
	margin-left:-0.5px;
}
.before-after-image-slider .twentytwenty-handle{
	border-radius:0;
	border:none;
	background:#008C95;
	width:42px;
	height:42px;
}
.before-after-image-slider .twentytwenty-left-arrow{
	width:20px;
	height:25px;
	display:inline-block;
	transform:translatey(-50%);
	margin-top:0;
	border:none;
	margin-right:-20px;
}
.before-after-image-slider .twentytwenty-left-arrow:before{
	content:'4';
	position:absolute;
	right:0;
	line-height: 1;
    -webkit-font-smoothing: antialiased;
    font-family: ETmodules !important;
	color:#fff;
	font-size:25px;
}
.before-after-image-slider .twentytwenty-right-arrow{
	width:20px;
	height:25px;
	display:inline-block;
	transform:translatey(-50%);
	margin-top:0;
	border:none;
	margin-left:-20px;
}
.before-after-image-slider .twentytwenty-right-arrow:before{
	content:'5';
	position:absolute;
	left:0;
	line-height: 1;
    -webkit-font-smoothing: antialiased;
    font-family: ETmodules !important;
	color:#fff;
	font-size:25px;
}
.before-after-image-slider .twentytwenty-horizontal .twentytwenty-handle:before{
	margin-bottom:24px;
}
.before-after-image-slider .twentytwenty-horizontal .twentytwenty-handle:after{
	margin-top:24px;
}
@media (min-width:992px){
	.project-slider .swiper-button-prev {
		left: auto !important;
		right: 80px !important;
	}
	.project-slider .swiper-button-next,.project-slider .swiper-button-prev {
		top: -100px;
	}
	.project-slider .swiper-button-next {
		right: 0;
	}
}


/* Homepage Hero Section */
@media only screen and (max-width: 980px) {
    .page-id-7 #hero-section {
        position: relative !important;
        border-bottom: none !important; 
    }

    .page-id-7 #hero-section::after {
        content: "" !important;
        position: absolute !important;
        bottom: -2px !important; 
        left: 0 !important;
        width: 100% !important;
        height: 155px !important; 
        background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #ffffff 90%) !important;        
        pointer-events: none !important;
    }
	
	.page-id-7 #hero-section .et_pb_row {
        position: relative !important;
        z-index: 10 !important;
    }
}

@media only screen and (max-width: 767px) {
    body.page-id-7 #hero-section {
        background-image: url('https://restorationcontractorsllc.com/wp-content/uploads/2024/12/restoration-contractors-reroof-rebuild-remodel.jpg') !important;
        background-size: 160% auto !important;
        background-repeat: no-repeat !important;
        background-position: top center !important;
        background-attachment: scroll !important;
        width: 100% !important;
        min-height: 450px !important;
        position: relative !important;
    }

    body.page-id-7 #hero-section::after {
        content: "" !important;
        position: absolute !important;
        top: 80px !important;
        left: 0 !important;
        width: 100% !important;
        height: 350px !important;
        background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #ffffff 70%) !important;
        pointer-events: none !important;
        z-index: 1 !important;
    }

    body.page-id-7 #hero-section .et_pb_row {
        position: relative !important;
        z-index: 10 !important;
    }

}
@media(max-width:767px){
		.two-columns .before-after-image-slider{
	width:100%;
}
	.before-after-image-slider .twentytwenty-horizontal .twentytwenty-before-label:before,
.before-after-image-slider .twentytwenty-horizontal .twentytwenty-after-label:before{
	font-size:14px;
	}
}
/* Homepage Hero Section */