.elementor-3513130 .elementor-element.elementor-element-5528d6aa{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;--gap:4px 4px;--row-gap:4px;--column-gap:4px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3513130 .elementor-element.elementor-element-4fb56f59 .elementor-heading-title{font-family:var( --e-global-typography-4d2ecc5-font-family ), Helvetica, Sans-serif;font-size:var( --e-global-typography-4d2ecc5-font-size );line-height:var( --e-global-typography-4d2ecc5-line-height );letter-spacing:var( --e-global-typography-4d2ecc5-letter-spacing );word-spacing:var( --e-global-typography-4d2ecc5-word-spacing );color:var( --e-global-color-text );}.elementor-3513130 .elementor-element.elementor-element-49ce9657 img{width:25px;height:25px;}.elementor-3513130 .elementor-element.elementor-element-49ce9657 > .elementor-widget-container{margin:0px 0px 0px 0px;}@media(max-width:1023px){.elementor-3513130 .elementor-element.elementor-element-4fb56f59 .elementor-heading-title{font-size:var( --e-global-typography-4d2ecc5-font-size );line-height:var( --e-global-typography-4d2ecc5-line-height );letter-spacing:var( --e-global-typography-4d2ecc5-letter-spacing );word-spacing:var( --e-global-typography-4d2ecc5-word-spacing );}}@media(max-width:767px){.elementor-3513130 .elementor-element.elementor-element-4fb56f59 .elementor-heading-title{font-size:var( --e-global-typography-4d2ecc5-font-size );line-height:var( --e-global-typography-4d2ecc5-line-height );letter-spacing:var( --e-global-typography-4d2ecc5-letter-spacing );word-spacing:var( --e-global-typography-4d2ecc5-word-spacing );}}/* Start custom CSS for container, class: .elementor-element-5528d6aa */.af-review-count {
    width: max-content;
}

.af-review-count--light .af-review-count .elementor-heading-title {
    color: var(--e-global-color-secondary) !important;
}/* End custom CSS */
/* Start custom CSS */.twentytwenty-container {
    border-radius: 8px;
    box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
}


.twentytwenty-before-label,  .twentytwenty-after-label {
    opacity: 1 !important;
}

.twentytwenty-container.active .twentytwenty-before-label,
.twentytwenty-container.active .twentytwenty-after-label
{
    opacity: 0 !important;
}

 .twentytwenty-before-label:before,  .twentytwenty-after-label:before {
    top: 1rem !important;
    margin: 0 !important;
    
}

.twentytwenty-before-label:before {
    left: 1rem;
    color: var(--e-global-color-text) !important;
    background: #ffffff !important;
}

.twentytwenty-after-label:before {
    right: 1rem !important;
    color: #ffffff !important;
    background: var(--e-global-color-primary) !important;
}

.twentytwenty-horizontal #container-afterbefore .twentytwenty-overlay .twentytwenty-after-label {
    color: #ffffff !important;
}

@media only screen and (max-width: 767px) {
    
    .twentytwenty-container {
    border-radius: 0;
    min-height: calc((100vw - 2rem) * .66666666);
}

.twentytwenty-container > img {
    min-height: calc((100vw - 2rem) * .66666666);
}
    
    .twentytwenty-before-label:before,  .twentytwenty-after-label:before {
    font-size: 0.8rem !important;
    top: 0.5rem !important;
    
}

.twentytwenty-before-label:before {
    left: 0.5rem !important;
}

 .twentytwenty-after-label:before {
    right: 0.5rem !important;
}


}



/* Removing content shift from Hero section before after*/

.af-hero-beforeafter .twentytwenty-container {
    --beforeafter-hero-min-height: calc((1400px - 4rem) * 0.55 * 0.66666666);
    /* This variable is used to adjust the min-height of the before/after widget.The calculation is the section container max-width minus left/right padding and column gap. Multiplied by 55% which is the columns width to get the width of the widget. The images are 3:2 aspect ratio so we multiply the width by 0.6666666 to get the height.
    */
}

.af-hero-beforeafter .twentytwenty-container {
    min-height: var(--beforeafter-hero-min-height);
}

.af-hero-beforeafter .twentytwenty-container > img {
    min-height: var(--beforeafter-hero-min-height);
}

@media only screen and (max-width: 1400px) {
    .af-hero-beforeafter .twentytwenty-container{
    --beforeafter-hero-min-heightt: calc((100vw - 10rem) * 0.55 * 0.66666666);
    }
}


@media only screen and (max-width: 1200px) {
    .af-hero-beforeafter .twentytwenty-container{
    --beforeafter-hero-min-height: calc((100vw - 8rem) * 0.55 * 0.66666666);
}
}

@media only screen and (max-width: 1023px) {
    .af-hero-beforeafter .twentytwenty-container {
    --beforeafter-hero-min-height: calc((100vw - 4rem) * .66666666);
}
}

@media only screen and (max-width: 767px) {
    .af-hero-beforeafter .twentytwenty-container 
}

/* Removing content shift from other before/after widgets. See notes above */
.twentytwenty-container {
    --beforeafter-min-height: calc((1400px - 4rem) * 0.55 * 0.66666666);

}

.twentytwenty-container {
    min-height: var(--beforeafter-min-height);
}

.twentytwenty-container > img {
    min-height: var(--beforeafter-min-height);
}

@media only screen and (max-width: 1400px) {
.twentytwenty-container{
    --beforeafter-min-height: calc((100vw - 8rem) * 0.55 * 0.66666666);
    }
}


@media only screen and (max-width: 1200px) {
.twentytwenty-container{
    --beforeafter-min-height: calc((100vw - 8rem) * 0.55 * 0.66666666);
}
}

@media only screen and (max-width: 1023px) {
.twentytwenty-container {
    --beforeafter-min-height: calc((100vw - 6rem) * .66666666);
}
}

@media only screen and (max-width: 767px) {
.twentytwenty-container {
    --beforeafter-min-height: calc((100vw - 2rem) * .66666666);
}/* End custom CSS */