.elementor-665 .elementor-element.elementor-element-561782f{--display:flex;--min-height:400px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--overlay-opacity:0.79;}.elementor-665 .elementor-element.elementor-element-561782f:not(.elementor-motion-effects-element-type-background), .elementor-665 .elementor-element.elementor-element-561782f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://eapools.com/wp-content/uploads/2025/07/Pool-Construction-1.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-665 .elementor-element.elementor-element-561782f::before, .elementor-665 .elementor-element.elementor-element-561782f > .elementor-background-video-container::before, .elementor-665 .elementor-element.elementor-element-561782f > .e-con-inner > .elementor-background-video-container::before, .elementor-665 .elementor-element.elementor-element-561782f > .elementor-background-slideshow::before, .elementor-665 .elementor-element.elementor-element-561782f > .e-con-inner > .elementor-background-slideshow::before, .elementor-665 .elementor-element.elementor-element-561782f > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#001A34;--background-overlay:'';}.elementor-665 .elementor-element.elementor-element-561782f > .elementor-shape-bottom svg, .elementor-665 .elementor-element.elementor-element-561782f > .e-con-inner > .elementor-shape-bottom svg{height:77px;}.elementor-widget-theme-page-title .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-665 .elementor-element.elementor-element-22c6e0c{text-align:center;}.elementor-665 .elementor-element.elementor-element-22c6e0c .elementor-heading-title{color:var( --e-global-color-secondary );}.elementor-widget-divider{--divider-color:var( --e-global-color-secondary );}.elementor-widget-divider .elementor-divider__text{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-divider.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon{color:var( --e-global-color-secondary );border-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-secondary );}.elementor-665 .elementor-element.elementor-element-f0bfff0{--divider-border-style:solid;--divider-color:var( --e-global-color-ca33651 );--divider-border-width:3px;}.elementor-665 .elementor-element.elementor-element-f0bfff0 .elementor-divider-separator{width:60px;margin:0 auto;margin-center:0;}.elementor-665 .elementor-element.elementor-element-f0bfff0 .elementor-divider{text-align:center;padding-block-start:3px;padding-block-end:3px;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-665 .elementor-element.elementor-element-790f2e3 > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-665 .elementor-element.elementor-element-790f2e3{text-align:center;font-family:"Montserrat", Sans-serif;font-size:20px;font-weight:700;color:var( --e-global-color-7043bf7 );}.elementor-665 .elementor-element.elementor-element-571cab0{text-align:center;font-family:"Montserrat", Sans-serif;font-size:18px;font-weight:400;color:var( --e-global-color-7043bf7 );}.elementor-665 .elementor-element.elementor-element-a46d18f{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:20px 20px;--row-gap:20px;--column-gap:20px;--flex-wrap:wrap;}.elementor-665 .elementor-element.elementor-element-738bc74{--display:flex;--min-height:130px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--gap:20px 20px;--row-gap:20px;--column-gap:20px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-665 .elementor-element.elementor-element-098aa5b{text-align:center;}.elementor-665 .elementor-element.elementor-element-5299285{--display:flex;--min-height:350px;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--padding-top:3%;--padding-bottom:3%;--padding-left:3%;--padding-right:3%;}.elementor-665 .elementor-element.elementor-element-5299285:not(.elementor-motion-effects-element-type-background), .elementor-665 .elementor-element.elementor-element-5299285 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#08ABD71F;}.elementor-665 .elementor-element.elementor-element-5299285.e-con{--align-self:center;}.elementor-665 .elementor-element.elementor-element-d527ff1 .elementor-heading-title{font-family:"Playfair Display", Sans-serif;font-size:40px;font-weight:900;color:var( --e-global-color-ca33651 );}.elementor-665 .elementor-element.elementor-element-ae622a5{text-align:center;}.elementor-665 .elementor-element.elementor-element-ae622a5 .elementor-heading-title{font-family:"Playfair Display", Sans-serif;font-weight:900;color:#004A94;}.elementor-665 .elementor-element.elementor-element-a68ffdb{text-align:center;}.elementor-665 .elementor-element.elementor-element-20ecaa5{--display:flex;--min-height:350px;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--padding-top:3%;--padding-bottom:3%;--padding-left:3%;--padding-right:3%;}.elementor-665 .elementor-element.elementor-element-20ecaa5:not(.elementor-motion-effects-element-type-background), .elementor-665 .elementor-element.elementor-element-20ecaa5 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#08ABD71F;}.elementor-665 .elementor-element.elementor-element-20ecaa5.e-con{--align-self:center;}.elementor-665 .elementor-element.elementor-element-43a5d98 .elementor-heading-title{font-family:"Playfair Display", Sans-serif;font-size:40px;font-weight:900;color:var( --e-global-color-ca33651 );}.elementor-665 .elementor-element.elementor-element-6b90d61 .elementor-heading-title{font-family:"Playfair Display", Sans-serif;font-weight:900;color:#004A94;}.elementor-665 .elementor-element.elementor-element-5d03fee{text-align:center;font-family:"Montserrat", Sans-serif;font-weight:400;}.elementor-665 .elementor-element.elementor-element-2d68943{--display:flex;--min-height:350px;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--padding-top:3%;--padding-bottom:3%;--padding-left:3%;--padding-right:3%;}.elementor-665 .elementor-element.elementor-element-2d68943:not(.elementor-motion-effects-element-type-background), .elementor-665 .elementor-element.elementor-element-2d68943 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#08ABD71F;}.elementor-665 .elementor-element.elementor-element-2d68943.e-con{--align-self:center;}.elementor-665 .elementor-element.elementor-element-5efffa5 .elementor-heading-title{font-family:"Playfair Display", Sans-serif;font-size:40px;font-weight:900;color:var( --e-global-color-ca33651 );}.elementor-665 .elementor-element.elementor-element-423f8a6 .elementor-heading-title{font-family:"Playfair Display", Sans-serif;font-weight:900;color:#004A94;}.elementor-665 .elementor-element.elementor-element-f17929d{text-align:center;}.elementor-665 .elementor-element.elementor-element-1ae06b7{--display:flex;--min-height:350px;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--padding-top:3%;--padding-bottom:3%;--padding-left:3%;--padding-right:3%;}.elementor-665 .elementor-element.elementor-element-1ae06b7:not(.elementor-motion-effects-element-type-background), .elementor-665 .elementor-element.elementor-element-1ae06b7 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#08ABD71F;}.elementor-665 .elementor-element.elementor-element-1ae06b7.e-con{--align-self:center;}.elementor-665 .elementor-element.elementor-element-6451c0a .elementor-heading-title{font-family:"Playfair Display", Sans-serif;font-size:40px;font-weight:900;color:var( --e-global-color-ca33651 );}.elementor-665 .elementor-element.elementor-element-849b6df{text-align:center;}.elementor-665 .elementor-element.elementor-element-849b6df .elementor-heading-title{font-family:"Playfair Display", Sans-serif;font-weight:900;color:#004A94;}.elementor-665 .elementor-element.elementor-element-530fd96{text-align:center;}.elementor-665 .elementor-element.elementor-element-b958c82{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-665 .elementor-element.elementor-element-acdd161{--display:flex;}.elementor-665 .elementor-element.elementor-element-311f2c4{text-align:center;}.elementor-665 .elementor-element.elementor-element-e4f758f{--divider-border-style:solid;--divider-color:#F5A623;--divider-border-width:3px;}.elementor-665 .elementor-element.elementor-element-e4f758f .elementor-divider-separator{width:100px;margin:0 auto;margin-center:0;}.elementor-665 .elementor-element.elementor-element-e4f758f .elementor-divider{text-align:center;padding-block-start:3px;padding-block-end:3px;}.elementor-665 .elementor-element.elementor-element-c762fc2{font-family:"Montserrat", Sans-serif;font-weight:400;}@media(min-width:768px){.elementor-665 .elementor-element.elementor-element-738bc74{--width:100%;}.elementor-665 .elementor-element.elementor-element-5299285{--width:350px;}.elementor-665 .elementor-element.elementor-element-20ecaa5{--width:350px;}.elementor-665 .elementor-element.elementor-element-2d68943{--width:350px;}.elementor-665 .elementor-element.elementor-element-1ae06b7{--width:350px;}}@media(max-width:1200px) and (min-width:768px){.elementor-665 .elementor-element.elementor-element-5299285{--width:300px;}.elementor-665 .elementor-element.elementor-element-20ecaa5{--width:300px;}.elementor-665 .elementor-element.elementor-element-2d68943{--width:300px;}.elementor-665 .elementor-element.elementor-element-1ae06b7{--width:300px;}}@media(min-width:1367px){.elementor-665 .elementor-element.elementor-element-561782f:not(.elementor-motion-effects-element-type-background), .elementor-665 .elementor-element.elementor-element-561782f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-attachment:scroll;}}@media(min-width:2400px){.elementor-665 .elementor-element.elementor-element-b958c82{--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-665 .elementor-element.elementor-element-acdd161{--gap:15px 15px;--row-gap:15px;--column-gap:15px;}.elementor-665 .elementor-element.elementor-element-e4f758f .elementor-divider-separator{width:50px;}.elementor-665 .elementor-element.elementor-element-c762fc2{text-align:center;}}@media(max-width:1200px){.elementor-665 .elementor-element.elementor-element-a46d18f{--justify-content:space-evenly;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-665 .elementor-element.elementor-element-5299285{--min-height:300px;}.elementor-665 .elementor-element.elementor-element-20ecaa5{--min-height:300px;}.elementor-665 .elementor-element.elementor-element-2d68943{--min-height:300px;}.elementor-665 .elementor-element.elementor-element-1ae06b7{--min-height:300px;}}@media(max-width:1024px){.elementor-665 .elementor-element.elementor-element-561782f > .elementor-shape-bottom svg, .elementor-665 .elementor-element.elementor-element-561782f > .e-con-inner > .elementor-shape-bottom svg{width:calc(100% + 1.3px);height:50px;}.elementor-665 .elementor-element.elementor-element-790f2e3{font-size:16px;}.elementor-665 .elementor-element.elementor-element-571cab0{font-size:16px;}}/* Start custom CSS for container, class: .elementor-element-5299285 */.elementor-665 .elementor-element.elementor-element-5299285{
    --card-shape: 48% 52% 58% 42% / 48% 25% 75% 52%;
    --card-hover-shape: 50%;
    --h1-shape: 50%;
    --h1-hover-shape: 61% 39% 38% 62% / 67% 49% 51% 33%;
    --h1-background: #eff0f4;
    --img-circle-size: 80px;
    --bubble-color: #ffffff;
}


.elementor-665 .elementor-element.elementor-element-5299285{
    box-shadow: inset 20px 20px 20px rgba(0,0,0,0.05), 25px 35px 20px rgba(0,0,0,0.05), 25px 30px 30px rgba(0,0,0,0.05), inset -20px -20px 25px rgba(255,255,255,0.9);
    transition: 0.5s ease-in-out;
    border-radius: var(--card-shape);
}
.elementor-665 .elementor-element.elementor-element-5299285:hover{
    border-radius: var(--card-hover-shape);
}
.elementor-665 .elementor-element.elementor-element-5299285::before{
    content: '';
    position: absolute;
    top: 50px;
    left: 85px;
    width: 35px;
    height: 35px;
    background: var(--bubble-color);
    border-radius: 50%;
    opacity: 0.9;
}
.elementor-665 .elementor-element.elementor-element-5299285::after{
    content: '';
    position: absolute;
    top: 90px;
    left: 110px;
    width: 15px;
    height: 15px;
    background: var(--bubble-color);
    border-radius: 50%;
    opacity: 0.9;
}
.elementor-665 .elementor-element.elementor-element-5299285 h1{
    padding: 12px;
    position: relative;
    width: var(--h1-circle-size);
    height: var(--h1-circle-size);
    background: var(--h1-background);
    border-radius: var(--h1-shape);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.5s ease-in-out;
    box-shadow: inset 2px 5px 10px rgba(0,0,0,0.1), inset -2px -5px 10px rgba(255,255,255,1), 15px 15px 10px rgba(0,0,0,0.05), 15px 10px 15px rgba(0,0,0,0.025);
}
.elementor-665 .elementor-element.elementor-element-5299285:hover h1{
    border-radius: var(--h1-hover-shape);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-20ecaa5 */.elementor-665 .elementor-element.elementor-element-20ecaa5{
 --card-shape: 64% 36% 76% 24% / 58% 55% 45% 42%;
    --card-hover-shape: 50%;
    --h1-shape: 50%;
    --h1-hover-shape: 61% 39% 38% 62% / 67% 49% 51% 33%;
    --h1-background: #eff0f4;
    --h1-circle-size: 80px;
    --bubble-color: #ffffff;
}


.elementor-665 .elementor-element.elementor-element-20ecaa5{
    box-shadow: inset 20px 20px 20px rgba(0,0,0,0.05), 25px 35px 20px rgba(0,0,0,0.05), 25px 30px 30px rgba(0,0,0,0.05), inset -20px -20px 25px rgba(255,255,255,0.9);
    transition: 0.5s ease-in-out;
    border-radius: var(--card-shape);
}
.elementor-665 .elementor-element.elementor-element-20ecaa5:hover{
    border-radius: var(--card-hover-shape);
}
.elementor-665 .elementor-element.elementor-element-20ecaa5::before{
    content: '';
    position: absolute;
    top: 50px;
    left: 85px;
    width: 35px;
    height: 35px;
    background: var(--bubble-color);
    border-radius: 50%;
    opacity: 0.9;
}
.elementor-665 .elementor-element.elementor-element-20ecaa5::after{
    content: '';
    position: absolute;
    top: 90px;
    left: 110px;
    width: 15px;
    height: 15px;
    background: var(--bubble-color);
    border-radius: 50%;
    opacity: 0.9;
}
.elementor-665 .elementor-element.elementor-element-20ecaa5 h1{
    padding: 12px;
    position: relative;
    width: var(--h1-circle-size);
    height: var(--h1-circle-size);
    background: var(--h1-background);
    border-radius: var(--h1-shape);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.5s ease-in-out;
    box-shadow: inset 2px 5px 10px rgba(0,0,0,0.1), inset -2px -5px 10px rgba(255,255,255,1), 15px 15px 10px rgba(0,0,0,0.05), 15px 10px 15px rgba(0,0,0,0.025);
}
.elementor-665 .elementor-element.elementor-element-20ecaa5:hover h1{
    border-radius: var(--h1-hover-shape);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2d68943 */.elementor-665 .elementor-element.elementor-element-2d68943{
    --card-shape: 48% 52% 58% 42% / 48% 25% 75% 52%;
    --card-hover-shape: 50%;
    --h1-shape: 50%;
    --h1-hover-shape: 61% 39% 38% 62% / 67% 49% 51% 33%;
    --h1-background: #eff0f4;
    --img-circle-size: 80px;
    --bubble-color: #ffffff;
}


.elementor-665 .elementor-element.elementor-element-2d68943{
    box-shadow: inset 20px 20px 20px rgba(0,0,0,0.05), 25px 35px 20px rgba(0,0,0,0.05), 25px 30px 30px rgba(0,0,0,0.05), inset -20px -20px 25px rgba(255,255,255,0.9);
    transition: 0.5s ease-in-out;
    border-radius: var(--card-shape);
}
.elementor-665 .elementor-element.elementor-element-2d68943:hover{
    border-radius: var(--card-hover-shape);
}
.elementor-665 .elementor-element.elementor-element-2d68943::before{
    content: '';
    position: absolute;
    top: 50px;
    left: 85px;
    width: 35px;
    height: 35px;
    background: var(--bubble-color);
    border-radius: 50%;
    opacity: 0.9;
}
.elementor-665 .elementor-element.elementor-element-2d68943::after{
    content: '';
    position: absolute;
    top: 90px;
    left: 110px;
    width: 15px;
    height: 15px;
    background: var(--bubble-color);
    border-radius: 50%;
    opacity: 0.9;
}
.elementor-665 .elementor-element.elementor-element-2d68943 h1{
    padding: 12px;
    position: relative;
    width: var(--h1-circle-size);
    height: var(--h1-circle-size);
    background: var(--h1-background);
    border-radius: var(--h1-shape);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.5s ease-in-out;
    box-shadow: inset 2px 5px 10px rgba(0,0,0,0.1), inset -2px -5px 10px rgba(255,255,255,1), 15px 15px 10px rgba(0,0,0,0.05), 15px 10px 15px rgba(0,0,0,0.025);
}
.elementor-665 .elementor-element.elementor-element-2d68943:hover h1{
    border-radius: var(--h1-hover-shape);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1ae06b7 */.elementor-665 .elementor-element.elementor-element-1ae06b7{
    --card-shape: 48% 52% 58% 42% / 48% 25% 75% 52%;
    --card-hover-shape: 50%;
    --h1-shape: 50%;
    --h1-hover-shape: 61% 39% 38% 62% / 67% 49% 51% 33%;
    --h1-background: #eff0f4;
    --img-circle-size: 80px;
    --bubble-color: #ffffff;
}


.elementor-665 .elementor-element.elementor-element-1ae06b7{
    box-shadow: inset 20px 20px 20px rgba(0,0,0,0.05), 25px 35px 20px rgba(0,0,0,0.05), 25px 30px 30px rgba(0,0,0,0.05), inset -20px -20px 25px rgba(255,255,255,0.9);
    transition: 0.5s ease-in-out;
    border-radius: var(--card-shape);
}
.elementor-665 .elementor-element.elementor-element-1ae06b7:hover{
    border-radius: var(--card-hover-shape);
}
.elementor-665 .elementor-element.elementor-element-1ae06b7::before{
    content: '';
    position: absolute;
    top: 50px;
    left: 85px;
    width: 35px;
    height: 35px;
    background: var(--bubble-color);
    border-radius: 50%;
    opacity: 0.9;
}
.elementor-665 .elementor-element.elementor-element-1ae06b7::after{
    content: '';
    position: absolute;
    top: 90px;
    left: 110px;
    width: 15px;
    height: 15px;
    background: var(--bubble-color);
    border-radius: 50%;
    opacity: 0.9;
}
.elementor-665 .elementor-element.elementor-element-1ae06b7 h1{
    padding: 12px;
    position: relative;
    width: var(--h1-circle-size);
    height: var(--h1-circle-size);
    background: var(--h1-background);
    border-radius: var(--h1-shape);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.5s ease-in-out;
    box-shadow: inset 2px 5px 10px rgba(0,0,0,0.1), inset -2px -5px 10px rgba(255,255,255,1), 15px 15px 10px rgba(0,0,0,0.05), 15px 10px 15px rgba(0,0,0,0.025);
}
.elementor-665 .elementor-element.elementor-element-1ae06b7:hover h1{
    border-radius: var(--h1-hover-shape);
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-f558afa */* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root{
    --index: calc(1vw + 1vh);
    --transition: cubic-bezier(.1, .7, 0, 1);
}

.wrapper{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50vh;
}

.items{
    display: flex;
    gap: 0.4rem;
    perspective: calc(var(--index) * 35);
}

.item{
    width: calc(var(--index) * 3);
    height: calc(var(--index) * 12);
    background-color: #222;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    filter: grayscale(1) brightness(.5);
    transition: transform 1.25s var(--transition), filter 3s var(--transition), width 1.25s var(--transition);
    will-change: transform, filter, rotateY, width;
}

.item::before, .item::after{
    content: '';
    position: absolute;
    height: 100%;
    width: 20px;
    right: calc(var(--index) * -1);
}

.item::after{
    left: calc(var(--index) * -1);
}

.items .item:hover{
    filter: inherit;
    transform: translateZ(calc(var(--index) * 10));
}

/*Right*/

.items .item:hover + *{
    filter: inherit;
    transform: translateZ(calc(var(--index) * 8.5)) rotateY(35deg);
    z-index: -1;
}

.items .item:hover + * + *{
    filter: inherit;
    transform: translateZ(calc(var(--index) * 5.6)) rotateY(40deg);
    z-index: -2;
}

.items .item:hover + * + * + *{
    filter: inherit;
    transform: translateZ(calc(var(--index) * 2.5)) rotateY(30deg);
    z-index: -3;
}

.items .item:hover + * + * + * + *{
    filter: inherit;
    transform: translateZ(calc(var(--index) * .6)) rotateY(15deg);
    z-index: -4;
}


/*Left*/

.items .item:has( + :hover){
    filter: inherit;
    transform: translateZ(calc(var(--index) * 8.5)) rotateY(-35deg);
}

.items .item:has( + * + :hover){
    filter: inherit;
    transform: translateZ(calc(var(--index) * 5.6)) rotateY(-40deg);
}

.items .item:has( + * + * + :hover){
    filter: inherit;
    transform: translateZ(calc(var(--index) * 2.5)) rotateY(-30deg);
}

.items .item:has( + * + * + * + :hover){
    filter: inherit;
    transform: translateZ(calc(var(--index) * .6)) rotateY(-15deg);
}

.items .item:active, .items .item:focus {
	width: 28vw;
	filter: inherit;
	z-index: 100;
	transform: translateZ(calc(var(--index) * 10));
    margin: 0 .45vw;
}/* End custom CSS */