/* Animated Showcase */
.product-showcase {
    margin-bottom: 111px;
}

.animated-showcase {
    position: relative;
    width: 100%;
    z-index: 1;
    
}

    .animated-showcase .mobile-title {
        display: block !important;
        position: relative;
        margin-bottom: 15px;
        opacity: 0;
        transition: opacity 300ms ease-in-out;
    }

        .animated-showcase .mobile-title h2 {
            width: 100%;
            position: absolute;
            top: 0;
            opacity: 0;
            transition: opacity 300ms ease-in-out;
            font-family: "Roboto", sans-serif;
            font-size: 32px;
            font-weight: 500;
            line-height: 38px;
            text-align: center;
            margin: 0;
        }

            .animated-showcase .mobile-title h2.left {
                position: relative;
            }

        .animated-showcase .mobile-title.active {
            opacity: 1;
        }

            .animated-showcase .mobile-title.active h2.active {
                opacity: 1;
            }

            .animated-showcase .background{
                position: absolute;
                top: 3.43%;
                left: 50%;
                z-index: -1;
            }


@media only screen and (max-width: 767px) {

    .animated-showcase .background {
        position: absolute;
        top: 3.43%;
        z-index: -1;
        left: 0;
    }
}


    .animated-showcase .showcase-wrapper {
        position: relative;
        /*TODO*/
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 46.3px;
        overflow: hidden;
        transition: all 500ms ease-in-out;
        margin-top:60px;

    }

        .animated-showcase .showcase-wrapper .inner-item-wrapper {
            display: flex;
            flex-direction: column;
        }

        .animated-showcase .showcase-wrapper .left-item .inner-item-wrapper {
            flex-direction: column-reverse;
        }

        .animated-showcase .showcase-wrapper .text-container p {
            font-family: "Roboto", sans-serif;
            font-size: 18px;
            line-height: 26px;
            margin-top: -5px;
            text-align: center;
        }

        .animated-showcase .showcase-wrapper .left-item.active .text-container,
        .animated-showcase .showcase-wrapper .right-item.active .text-container {
            display: block;
        }

        .animated-showcase .showcase-wrapper .left-item .text-container,
        .animated-showcase .showcase-wrapper .right-item .text-container {
            opacity: 0;
            transition: opacity 500ms ease-in-out;
        }

        .animated-showcase .showcase-wrapper .left-item.inactive,
        .animated-showcase .showcase-wrapper .right-item.inactive {
            opacity: 0.5;
        }

        .animated-showcase .showcase-wrapper .left-item {
            width: 100%;
            max-width: calc((146.98 / 375) * 100vw);
            cursor: pointer;
            /*transition: all 500ms ease-in-out;*/
        }

            .animated-showcase .showcase-wrapper .left-item .images-container {
                position: relative;
            }

                .animated-showcase .showcase-wrapper .left-item .images-container img.primary {
                    position: relative;
                    width: calc((87 / 375) * 100vw);
                    margin: 0;
                    margin-left: auto;
                    z-index: 1000;
                }

                .animated-showcase .showcase-wrapper .left-item .images-container img.secondary {
                    position: absolute;
                    width: calc((87 / 375) * 100vw);
                    top: 18.5px;
                    z-index: 100;
                }

                .animated-showcase .showcase-wrapper .left-item .images-container img.tertiary {
                    position: absolute;
                    opacity: 0;
                    top: 87.66px;
                    left: 0;
                    width: calc((80 / 375) * 100vw);
                    z-index: 10;
                    transform: translateX(calc((271/375) * 100vw));
                    transition: transform 500ms ease-in-out, opacity 250ms;
                }

        .animated-showcase .showcase-wrapper .right-item {
            width: 100%;
            max-width: calc((175 / 375) * 100vw);
            cursor: pointer;
            padding-left: 9px;
        }

            .animated-showcase .showcase-wrapper .right-item .images-container {
                position: relative;
            }

                .animated-showcase .showcase-wrapper .right-item .images-container img.primary {
                    position: relative;
                    width: calc((112 / 375) * 100vw);
                    margin: 0;
                    margin-right: auto;
                    z-index: 1000;
                }

                .animated-showcase .showcase-wrapper .right-item .images-container img.secondary {
                    position: absolute;
                    width: calc((87 / 375) * 100vw);
                    top: 38.4px;
                    right: 0;
                    z-index: 100;
                    /*transition: left 250ms ease-in-out 250ms;*/
                }

                .animated-showcase .showcase-wrapper .right-item .images-container img.tertiary {
                    position: absolute;
                    left: 0;
                    opacity: 0;
                    width: calc((78 / 375) * 100vw);
                    z-index: 10;
                    /*transition: left 250ms ease-in-out, opacity 500ms;*/
                }

    .animated-showcase p.link {
        display: flex;
        justify-content: center;
    }

        .animated-showcase p.link a {
            font-family: "Roboto", sans-serif;
            font-size: 18px;
            font-weight: bold;
            line-height: 22px;
            color: #242424;
            margin: 0;
            display: flex;
            align-items: center;
        }

            .animated-showcase p.link a:hover {
                text-decoration: none;
            }

        .animated-showcase p.link svg {
            stroke: #242424;
        }

/* LEFT SIDE ACTIVE */
/*.animated-showcase .showcase-wrapper.left {
        margin-left: calc((-52.77 / 375) * 100vw);
        margin-bottom: 21px;
        padding: 0;
        min-width: calc((447 / 375) * 100vw);
    }

        .animated-showcase .showcase-wrapper.left .background {
            left: calc((-27.5 / 375) * 100vw);
            transform: none;
        }

        .animated-showcase .showcase-wrapper.left .left-item.active {
            max-width: calc((322.77 / 375) * 100vw);
        }

            .animated-showcase .showcase-wrapper.left .left-item.active .inner-item-wrapper {
                display: flex;
                flex-direction: column-reverse;
            }

            .animated-showcase .showcase-wrapper.left .left-item.active .text-container {
                min-width: 100vw;
                padding: 0 25px;
                margin-left: calc((52.77 / 375) * 100vw);
            }

            .animated-showcase .showcase-wrapper.left .left-item.active .images-container img.primary {
                width: calc((121.22 / 375) * 100vw);
            }

            .animated-showcase .showcase-wrapper.left .left-item.active .images-container img.secondary {
                top: 22.8px;
                right: calc((83 / 375) * 100vw);
                width: calc((121.22 / 375) * 100vw);
                margin: 0;
            }

            .animated-showcase .showcase-wrapper.left .left-item.active .images-container img.tertiary {
                opacity: 1;
                top: 87.66px;
                left: 0;
                width: calc((105.5 / 375) * 100vw);
                transform: translateX(0);
                transition: transform 500ms ease-in-out, opacity 500ms 250ms;
            }

        .animated-showcase .showcase-wrapper.left .right-item.inactive {
            max-width: calc((117.7 / 375) * 100vw);
            margin-bottom: 143px;
        }

            .animated-showcase .showcase-wrapper.left .right-item.inactive .images-container img.primary {
                width: calc((72.79 / 375) * 100vw);
            }

            .animated-showcase .showcase-wrapper.left .right-item.inactive .images-container img.secondary {
                width: calc((56.79 / 375) * 100vw);
            }*/
/* END of LEFT SIDE ACTIVE */

/* RIGHT SIDE ACTIVE */
/*.animated-showcase .showcase-wrapper.right {
        align-items: center;
        margin-left: calc((-16 / 375) * 100vw);
        margin-bottom: 21px;
        padding: 0;
        min-width: calc((437 / 375) * 100vw);
    }

        .animated-showcase .showcase-wrapper.right .background {
            left: unset;
            right: calc((-46 / 375) * 100vw);
            transform: none;
        }

        .animated-showcase .showcase-wrapper.right .right-item.active {
            max-width: calc((318 / 375) * 100vw);
        }

            .animated-showcase .showcase-wrapper.right .right-item.active .inner-item-wrapper {
                display: flex;
                flex-direction: column;
            }

            .animated-showcase .showcase-wrapper.right .right-item.active .text-container {
                width: 100vw;
                padding: 0 25px;
                margin-left: calc((-103 / 375) * 100vw);
            }

            .animated-showcase .showcase-wrapper.right .right-item.active .images-container img.primary {
                width: calc((134.36 / 375) * 100vw);
            }

            .animated-showcase .showcase-wrapper.right .right-item.active .images-container img.secondary {
                top: 46.1px;
                left: calc((99 / 375) * 100vw);
                width: calc((104.82 / 375) * 100vw);
                margin: 0;
            }

            .animated-showcase .showcase-wrapper.right .right-item.active .images-container img.tertiary {
                opacity: 1;
                top: 67px;
                width: calc((93.29 / 375) * 100vw);
                right: 0;*/
/*transition: left 500ms ease-in-out, opacity 500ms 250ms;*/
/*}

        .animated-showcase .showcase-wrapper.right .left-item.inactive {
            max-width: calc((104.46 / 375) * 100vw);
            margin-bottom: 143px;
        }

            .animated-showcase .showcase-wrapper.right .left-item.inactive .images-container img.primary {
                width: calc((61.92 / 375) * 100vw);
            }

            .animated-showcase .showcase-wrapper.right .left-item.inactive .images-container img.secondary {
                width: calc((61.92 / 375) * 100vw);
            }*/
/* END of RIGHT SIDE ACTIVE */
/* END of Animated Showcase */











.showcase-wrapper {
    overflow: visible !important;
}

    .showcase-wrapper .left-item img.tertiary {
        top: 7.33% !important;
        transform: translateX(0) !important;
        transition: transform 500ms ease-in-out, opacity 500ms ease-in-out 0ms !important;
    }

    .showcase-wrapper .right-item img.tertiary {
        top: 14% !important;
        transform: translateX(0) !important;
        transition: transform 500ms ease-in-out, opacity 250ms ease-in-out 0ms !important;
    }


    .showcase-wrapper .left-item,
    .showcase-wrapper .right-item {
        transition: transform 500ms ease-in-out, opacity 500ms ease-in-out;
    }



.animated-showcase .descriptions {
    position: relative;
    width: 100vw;
    display: block !important;
}

    .descriptions .text-container.left,
    .descriptions .text-container.right {
        top: 0;
        opacity: 0;
        transition: opacity 500ms ease-in-out;
        padding: 0 25px;
    }

    .descriptions .text-container.right {
        position: absolute;
    }

.animated-showcase p.link {
    margin-top: 10px;
    transition: margin-top 250ms ease-in-out;
}

.animated-showcase:not(.left-selected):not(.right-selected) p.link {
    margin-top: -46px;
    transition: margin-top 250ms ease-in-out 350ms;
}

/*LEFT ITEM*/

.animated-showcase.left-selected .showcase-wrapper {
    transform: translateX(15%) !important;
    transition: transform 500ms ease-in-out;
    /*align-items: flex-start;*/
}

    .animated-showcase.left-selected .mobile-title,
    .animated-showcase.left-selected .mobile-title .left {
        opacity: 1 !important;
    }

    .animated-showcase.left-selected .showcase-wrapper .left-item {
        transform: scale(1.3);
    }

        .animated-showcase.left-selected .showcase-wrapper .left-item img.tertiary {
            top: 7.33% !important;
            transform: translateX(calc(-100% - 34px)) !important;
            opacity: 1 !important;
            transition: transform 500ms ease-in-out, opacity 500ms linear !important;
        }

        .animated-showcase.left-selected .showcase-wrapper .left-item .text-container {
            opacity: 1;
            transition: opacity 500ms ease-in-out;
        }

    .animated-showcase.left-selected .showcase-wrapper .right-item {
        transform: scale(0.75);
        opacity: 0.5;
    }

.animated-showcase.left-selected .descriptions .text-container.left {
    opacity: 1;
    transition: opacity 500ms ease-in-out;
}


/* RIGHT ITEM */

.animated-showcase.right-selected .showcase-wrapper {
    transform: translateX(-15%) !important;
    transition: transform 500ms ease-in-out;
}

.animated-showcase.right-selected .mobile-title,
.animated-showcase.right-selected .mobile-title .right {
    opacity: 1 !important;
}

.animated-showcase.right-selected .showcase-wrapper .right-item {
    transform: scale(1.2);
}

    .animated-showcase.right-selected .showcase-wrapper .right-item img.tertiary {
        top: 10% !important;
        transform: translateX(calc(217% + -25px)) !important;
        opacity: 1 !important;
        transition: transform 500ms ease-in-out, opacity 500ms linear !important;
    }

    .animated-showcase.right-selected .showcase-wrapper .right-item .text-container {
        opacity: 1;
        transition: opacity 500ms ease-in-out;
    }


.animated-showcase.right-selected .showcase-wrapper .left-item {
    transform: scale(0.75);
    opacity: 0.5;
}

.animated-showcase.right-selected .descriptions .text-container.right {
    opacity: 1;
    transition: opacity 500ms ease-in-out;
}

/***********************************************************************************************************************************************************/
/******************************************************** D E S K T O P ************************************************************************************/
/***********************************************************************************************************************************************************/

@media (min-width: 768px) {

    .animated-showcase {
        /*max-width: 1000px;*/
        padding: 0 5.13%;
        /*border: 1px solid red;*/
    }

        .animated-showcase .showcase-wrapper {
            /* border: 1px solid green; */
            width: 100%;
            padding: 0;
            max-width: 1113px;
            margin: 0 auto;
            margin-top: 65px;
        }

        .animated-showcase .mobile-only.mobile-title {
            visibility: hidden;
        }
        
        .animated-showcase .background {
            min-width: min(calc((630 / 375) * 100vw), 767px);
            position: absolute;
            z-index: -1;
            transform: translateX(-50%) translateZ(0px) scale(1);
            top: 270px;
        }


        .animated-showcase p.link {
            margin-top: 65px !important;
        }

        .animated-showcase .showcase-wrapper .text-container{
            opacity: 1 !important;
            width: 45%;
            align-self: center;
        }



        .animated-showcase .showcase-wrapper .inner-item-wrapper {
            flex-direction: row !important;
        }


        .animated-showcase .showcase-wrapper .left-item {
            width: 48%;
            max-width: initial;
            left: 0;
            transform: scale(1.08);
            transition: all 500ms ease-in-out;
        }

            .animated-showcase .showcase-wrapper .images-container {
                width: 55% !important;
            }

            .animated-showcase .showcase-wrapper .left-item .text-container, .animated-showcase .showcase-wrapper .left-item .text-container p {
                text-align: right;
            }

            .animated-showcase .showcase-wrapper .left-item .images-container img.primary {
                width: 44%;
            }

        .animated-showcase .showcase-wrapper .left-item .images-container img.secondary {
            width: 43%;
            left: 23%;
        }

        .animated-showcase .showcase-wrapper .left-item .images-container img.tertiary {
            width: 39%;
            left: initial;
            right: 0;
            top: 80px !important;
        }

        .animated-showcase .showcase-wrapper .right-item {
            width: 52%;
            max-width: initial;
            padding-left: 13px;
            transition: all 500ms ease-in-out;
            transform: scale(1.1);
        }

        .animated-showcase .showcase-wrapper .right-item .text-container, .animated-showcase .showcase-wrapper .right-item .text-container p {
            text-align: left;
        }

        .animated-showcase.left-selected .showcase-wrapper .right-item {
            transform: scale(0.6);
            opacity: 0.5;
            margin-left: 230px;
            transition: all 500ms ease-in-out;
        }
        .animated-showcase.left-selected .showcase-wrapper .right-item .text-container {
            opacity: 0 !important;
        }

        .animated-showcase.right-selected .showcase-wrapper {
            transform: translateX(-7%) !important;
        }
        .animated-showcase.left-selected .showcase-wrapper {
            transform: translateX(7%) !important;
        }

        .animated-showcase.right-selected .showcase-wrapper .left-item {
            transform: scale(0.6);
            opacity: 0.5;
            left: -200px;
            transition: all 500ms ease-in-out;
        }


            .animated-showcase.right-selected .showcase-wrapper .left-item .text-container {
                opacity: 0 !important;
            }

                .animated-showcase .showcase-wrapper .right-item .images-container img.primary {
                    width: 53%;
                }



        .animated-showcase .showcase-wrapper .right-item .images-container img.secondary {
            width: 42%;
            left: 23%;
            top: 53px;
            transition: all 500ms ease-in-out;
        }

            .animated-showcase .showcase-wrapper .right-item .images-container img.tertiary {
                width: 40%;
            }

        .animated-showcase.left-selected .showcase-wrapper .left-item img.tertiary {
            transform: translateX(calc(113% - 10px)) !important;
        }

        .animated-showcase.right-selected .showcase-wrapper .right-item img.secondary {
            transform: translateX(20px) !important;
            transition: all 500ms ease-in-out;
        }
        .animated-showcase.right-selected .showcase-wrapper .right-item img.tertiary {
            transform: translateX(calc(-100% - 10px)) !important;
        }

        .animated-showcase .showcase-wrapper+.descriptions {
            width: 40%;
        }

        .animated-showcase .showcase-wrapper+.descriptions.mobile-only {
            display: none !important;
        }

        .animated-showcase .descriptions{
            display:none !important;
        }


}