/*
Theme Name: Divi Child
Theme URI: https://diviextended.com/
Version: 1.0
Description: Child Theme of Divi
Author: Divi Extended
Template: Divi
*/
@import url("../Divi/style.css");




div#home-banner .et_pb_column:after {
    content: "";
    background: rgba(255,255,255,0.5);
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    top: 0;
    border-radius: 24px;
}
div#home-banner .et_pb_column:hover {background:#1ebe90;}
div#home-banner .et_pb_column:hover .arrow-top { display: none;}
div#home-banner .blue-box.et_pb_column:hover {background:#1d5d73;}
div#home-banner .et_pb_column:hover:after {display:none;}
.onhover, .learnmore-btn  {visibility:hidden;}
div#home-banner .et_pb_column:hover .onhover,  div#home-banner .et_pb_column:hover .learnmore-btn {visibility:visible;}
.learnmore-btn {position: relative; padding-right: 65px;}
.learnmore-btn:after {  content: "";  background: url(https://fourpoint.digital/wightlifehomes/wp-content/uploads/2024/09/right-arrow-1.png); display: inline-block; width: 100px;
    height: 200px;  background-repeat: no-repeat; background-size: 56%; position: absolute; right: -50px;  top: 0px;}
.arrow-top { position: absolute; top: 38%;left: 43%;     z-index: 15;}
.arrow-top img { max-width: 100%; height: 70px; width: inherit; }
.container {padding-top:0px !important;}
.box-inner-main { -ms-flex: 0 0 47%; flex: 0 0 47%; }
/*--------------single project css----------*/
.project-template-default #main-content .container:before {display:none;}
.section1_template {
    background: #1ebe90;
    padding: 70px 50px 80px;
    overflow: hidden;
    width: 100%;
    z-index: 99;
    position: absolute;
    left: 0;
    top: 14vh;
    height: 86vh;
}
.portfolio-list {
    display: visible !important;
}
.home-section>.container {
    position: inherit;
}
.flex-height {
    height: 100%;
	-ms-flex-align: start !important;
    align-items: flex-start !important;
	-ms-flex-direction: column !important;
    flex-direction: column !important;
	display: -ms-flexbox !important;
    display: flex !important;
}
.gallery-sidebar.relative {
    height: 100%;
}
.gallery-sidebar {
    margin-left: 0px;
    text-align: left;
    padding-left: 15px;
    position: relative;
    width: 100%;
}
.gallery-sidebar {
        margin-left: 20px;
        padding-left: 85px;
    }
    .gallery-sidebar h2 {
        font-size: 40px;
        line-height: 45px;
        -webkit-transform: rotate(-90deg);
        -webkit-transform-origin: right top;
        -moz-transform: rotate(-90deg);
        -moz-transform-origin: right top;
        -ms-transform: rotate(-90deg);
        -ms-transform-origin: right top;
        -o-transform: rotate(-90deg);
        -o-transform-origin: right top;
        transform: rotate(-90deg);
        transform-origin: right top;
        position: absolute;
        top: 0;
        right: 100%;
        white-space: nowrap;
        text-transform: uppercase;
		font-weight: bold;
		color:#fff;
    }
.gallery-sidebar.relative p {
    color: #fff;
}

.project-template-default .gallery-sidebar table, .project-template-default table {
    color: #fff;
    margin-bottom: 30px;
}
.slider-left {
    -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
}
.project-details {
    -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
}
.section1-inner {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;   
}
.section1-inner table td {
    padding: 5px 15px;
    border: 1px solid #fff;
    font-size: 14px;
    color: #fff;
}


.slider .slick-prev:before, .slider-vertical .slick-next:before {
	display: none;
}
.slider .slick-prev, .slider .slick-next {
    width: 28px;
    height: 28px;
    border-style: solid;
    margin: 10px;
    display: inline-block;
    margin: auto;
    left: 0;
    right: 0;
		top: 0;
		bottom: 0;
    z-index: 10;
    cursor: pointer;
}
.slider .slick-prev:before, .slider .slick-next:before {
	display: none;
}
.slider .slick-prev {
    border-width: 14px 14px 14px 0px;
    border-color: transparent #ffffff;
    left: 0px;
		right: auto;
}
.slider .slick-next {
    border-width: 14px 0px 14px 14px;
    border-color: transparent #ffffff;
    right: 0px;
    left: auto;
}	
.slider .slick-prev:hover, .slider .slick-next:hover {
    border-color: transparent #1ebe90;
}
.slider .slick-prev.slick-disabled, .slider .slick-next.slick-disabled, .slider .slick-prev.slick-disabled:hover, .slider .slick-next.slick-disabled:hover {
    cursor: default;
    border-color: transparent #ffffff;
	opacity:0.6;
}

.slick-slide img {width:100%;}
.slider-content img {
    width: 100%;
    max-width: 100%;
     height: 535px; 
}
.slider-thumb .slick-slide {
    margin: 0 5px;
}
.slider-thumb .slick-slide {
    background-image: url("https://fourpoint.digital/wightlifehomes/wp-content/uploads/2024/09/icon-slide.png");
    background-repeat: no-repeat;
    background-position: top center;
    width: 20px !important;
    height: 20px;
    padding: 0;
	cursor:pointer;
}
.slider-thumb .slick-slide img {display:none;}

.slider-left button.slick-prev.slick-arrow {
    position: absolute;
    right: 40px;
    left: inherit;
    bottom: 0 !important;
    top: inherit;
}
.slider-left button.slick-next.slick-arrow {
    position: absolute;
    right: 0 !important;
    bottom: 0 !important;
    left: inherit !important;
    top: inherit;
}
.slider-left .slider .slick-prev, .slider-left .slider .slick-next {
    font-size: 0;
    background: transparent;
}
.slider.slider-thumb.slick-initialized.slick-slider {
    margin-top: 20px;
}
.back_btn {
    text-align: right;
    margin-bottom: 50px;
}
.back_btn  a {
    padding-top: 0;
    padding-bottom: 0;
    color: #000;
    font-size: 17px;
    line-height: 30px;
    padding-bottom: 5px;
    text-transform: uppercase;
    border: solid 1px transparent;
    border-bottom: solid 1px #000;
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
    -ms-transition: 0.5s all;
    font-weight: bold;
}
.back_btn:hover a {
    padding: 10px;
    border: solid 1px #000;
    background: #000;
    color: #fff;
}
.image.background-image.floating--image.swipe {
    background-position: center;
    background-size: cover;
}
.project-listing {
    float: left;
    width: 100%;
    background: #383838;
}   
.portfolio-box {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 48px;
}

.inspiration-box-item {
    position: relative;
}
.inspiration-box-item.bg-image.before-mask h2 {
    position: absolute;
    top: 30px;
    margin-left: 29px;
    font-weight: bold;
    font-size: 36px;
    text-transform: uppercase;
	color:#fff;
	visibility:hidden;
}


.background-image {
    height: 310px;
    overflow: hidden;
	border-radius: 25px;
	position:relative;
}
.before-image {
	background: #1ebe90;
	border-radius: 25px;
}
.image.background-image:after {
    content: "";
    background: rgba(255,255,255,0.6);
    position: absolute;
    left: 0;
    width: 100%;
    top: 0;
    height: 100%;
}
.before-image:hover .image.background-image:after {display:none;}
.before-image:hover h2, .before-image:hover a.learnmore {
    visibility: visible !important;
}
.before-image:hover .image {
    background-image: none !important;
}
a.learnmore {
    text-transform: uppercase;
    font-size: 20px;
    padding-bottom: 0px !important;
    margin-bottom: 15px !important;
    color: #fff;
    position: absolute;
    right: 110px;
    bottom: 20px;
    visibility: hidden;
}
a.learnmore:after {
    content: "";
    background: url(https://fourpoint.digital/wightlifehomes/wp-content/uploads/2024/09/right-arrow-1.png);
    display: inline-block;
    width: 100px;
    height: 200px;
    background-repeat: no-repeat;
    background-size: 56%;
    position: absolute;
    right: -113px;
    top: 0px;
}
.arrow-image {
    position: absolute;
    top: 40%;
    left: 40%;
    z-index: 5;
}
.arrow-image img {
    max-width: 100%;
    height: 70px;
}
.section1_template {
    visibility:hidden; /* Hide by default */
}
.box-visible .section1_template {
    visibility:visible; /* Hide by default */
}
.gallery-sidebar h2 {
        top: auto;
        bottom: -70px;
        font-size: 40px;
        left: 0;
    }
.slick-track {
    float: left;
}
.box1-active .portfolio-box .box-inner-main:first-child .section1_template {
    visibility: visible;
}
.box2-active .portfolio-box .box-inner-main:nth-child(2) .section1_template {
    visibility: visible;
}
.box3-active .portfolio-box .box-inner-main:nth-child(3) .section1_template {
    visibility: visible;
}
.box4-active .portfolio-box .box-inner-main:nth-child(4) .section1_template {
    visibility: visible;
}
@media (max-width:1024px){
    .portfolio-box {   
    gap: 6%;
}
.box-inner-main {
    -ms-flex: 0 0 47%;
    flex: 0 0 47%;
    margin-bottom: 45px;
}

}


@media (max-width:980px){
    #header-main {display: flex;}
    #header-main .et_pb_menu--style-centered .et_pb_menu__wrap {    
    justify-content: right;
}
}
@media (max-width:767px){
    .portfolio-box {
    display: block;
}
.box-inner-main {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}
.box-inner-main {
    margin: 25px 0;
}
}