/* Base Styles */
.business_services_banner {
    width: 100%;
    height: 600px;
    position: relative;
    overflow: hidden;
}

.business_service_list .inview {
    opacity: 0;
    position: relative;
    top: 40px;
    transition: all 1.3s cubic-bezier(.165,.84,.44,1) .3s, opacity 1.3s cubic-bezier(.165,.84,.44,1) .3s;
}

/* Typography */
.business_service_item_list .main_title,
.business_service_item_list .sub_title,
.business_service_item_list .desc,
.business_service_item_list .bottom_title {
    color: var(--wp--preset--color--custom-off-white);
    margin: 0 1rem;
    font-weight: 600;
    word-break: break-all;
}

.business_service_item_list .desc {
    line-height: 2.4;
    display: none;
    opacity: 0;
    height: 0;
}

/* Layout */
.business_service_item_list {
    width: 100%;
    position: absolute;
    display: grid;
}

.business_service_item_list .item {
    height: 100%;
    border-right: 1px solid rgba(255, 255, 255, .3);
    flex: 1;
    box-sizing: border-box;
}

.business_service_item_list a {
    color: #fff !important;
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    box-sizing: border-box;
}

.business_service_item_list .content {
    position: absolute;
    left: 0;
    height: 100%;
    display: flex;
    z-index: 2;
    margin: .5rem 1rem;
    flex-flow: column;
    justify-content: center;      
    transition: bottom .7s cubic-bezier(.22,1,.36,1);
}

.business_service_item_list .content .main_title, 
.business_service_item_list .content .sub_title { 
    margin: .5rem 1rem;
}

.business_service_image_list {
    display: grid;
    filter: brightness(.5);
}

/* Tablet Styles */
@media only screen and (min-width: 600px) {
}

/* Small Laptops, Large Tablets */
@media only screen and (min-width: 782px) {
    .business_service_image_list {
        filter: unset;
    }

    .business_service_item_list .item {
        background-color: var(--wp--preset--color--custom-theme-blue-shade-50);
    }

    .business_service_item_list .item:nth-child(1) { grid-area: 1 / 1 / 2 / 2; }
    .business_service_item_list .item:nth-child(2) { grid-area: 2 / 2 / 3 / 3; }
    .business_service_item_list .item:nth-child(3) { grid-area: 3 / 1 / 4 / 2; }
    .business_service_image_list .image:nth-child(1) { grid-area: 1 / 2 / 2 / 3; }
    .business_service_image_list .image:nth-child(2) { grid-area: 2 / 1 / 3 / 2; }
    .business_service_image_list .image:nth-child(3) { grid-area: 3 / 2 / 4 / 3; }
}

/* Desktops */
@media only screen and (min-width: 992px) {
    .business_service_item_list {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        display: flex;
        flex-wrap: wrap;
    }

    .business_service_item_list .item {
        background-color: unset;
    }

    .business_service_image_list .image {
        position: absolute;
        opacity: 0;
        width: 100%;
        transition: all 1s ease-in-out;
    }

    .business_service_image_list .active {
        transform: scale(1.1);
        transition: all 1s ease-in-out;
        opacity: 100%;
    }   

    /* Repeat Base Styles */
    .business_services_banner {
        width: 100%;
        height: 600px;
        position: relative;
        overflow: hidden;
    }

    .business_services_banner:before {
        opacity: 1 !important;
        z-index: 1;
        margin: 0 auto;
        content: '';
        display: block;
        width: 1150px;
        height: 600px;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        box-sizing: border-box;
    }

    .business_service_list .inview.animate {
        opacity: 1;
        top: 0;
    }

    .business_service_list .inview {
        opacity: 0;
        position: relative;
        top: 40px;
        transition: all 1.3s cubic-bezier(.165,.84,.44,1) .3s, opacity 1.3s cubic-bezier(.165,.84,.44,1) .3s;
    }

    /* Repeat Layout */
    .business_service_item_list {
        width: 100%;
        position: absolute;
    }

    .business_service_item_list .item {
        height: 100%;
        border-right: 1px solid rgba(255, 255, 255, .3);
        flex: 1;
        box-sizing: border-box;
    }

    .business_service_item_list a {
        color: #fff !important;
        width: 100%;
        height: 100%;
        position: relative;
        display: flex;
        box-sizing: border-box;
    }

    .business_service_item_list .content {
        position: absolute;
        left: 0;
        height: 100%;
        display: flex;
        z-index: 2;
        margin: .5rem 1rem;
        flex-flow: column;
        justify-content: end;      
        transition: bottom .7s cubic-bezier(.22,1,.36,1);
    }

    .business_service_item_list .main_title, 
    .business_service_item_list .sub_title, 
    .business_service_item_list .desc {
        color: var(--wp--preset--color--custom-off-white);
        margin: 0 1rem;
        line-height: 1.2;
        font-weight: 600;
        word-break: break-all;
    }

    .business_service_item_list .desc {
        line-height: 2.4;
        display: block;
        opacity: 0;
        height: 0;
    }

    .business_service_item_list .bottom_title {
        opacity: 0;
        top: 15px;
        font-weight: 600;
        margin: 38px 0 0;
        line-height: 1;
        position: relative;
        display: inline-block;
        padding: 0 20px 0 0;
    }

    .business_service_image_list {
        display: grid;
        filter: brightness(.5);
    }

    .business_service_item_list article.active {
        background-color: rgba(0,81,170, 0.7);
    }

    .business_service_item_list article.active .desc {
        opacity: 100;
        height: auto;
        transition: all 1s ease-in-out;
        margin: 2rem 1rem;
    }

    .business_service_item_list .content {
        margin: unset;
        padding: 2rem;
    }
}

/* Large Laptops and Desktops */
@media only screen and (min-width: 1200px) {
}

/* Extra Large Screens */
@media only screen and (min-width: 1400px) {
}