/*---- Nouvelle Fiche produit Skiffo ----*/
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&display=swap');

#product {
    overflow: hidden;
    color: #133D4F;
    font-family: 'Josefin Sans', sans-serif !important;
}

    #product.mt-2 {
        margin-top: 0 !important;
    }

    #product #path-product {
        background-color: #0093ED;
        box-shadow: 0 5px 5px rgb(0 0 0 / 10%);
    }


    #product #description {
        background-size: cover;
        background-position: center;
        padding: 80px 80px 80px 0;
        overflow: hidden;
        /*        .graph {
            position: absolute;
            top: 50%;
            left: 65%;
            max-width: 40%;
        }*/
    }

        #product #description .img {
            align-self: center;
        }

            #product #description .img .product-img {
                width: 90%;
            }

        #product #description .text {
            z-index: 1;
        }

            #product #description .text h1 {
                text-transform: uppercase;
                font-size: 4rem;
                margin-bottom: -5px;
            }

            #product #description .text h4 {
                text-transform: uppercase;
                font-size: 1.25rem;
                padding-top: 15px;
            }

            #product #description .text table tr:nth-child(even) {
                background-color: rgba(255, 255, 255, 0.5);
            }

            #product #description .text .table {
                color: #133d4f;
                border-top: 2px solid;
                border-bottom: 2px solid;
                margin: 20px 0;
                border-collapse: separate;
                border-spacing: 0 10px;
            }

                #product #description .text .table th,
                #product #description .text .table td {
                    border-top: 0;
                    padding: 0;
                }

                #product #description .text .table th {
                    text-transform: uppercase;
                }

                #product #description .text .table .icon-tab {
                    padding: 0 20px 0 10px;
                }

            #product #description .text .description {
                padding-bottom: 20px;
                font-size: 14px;
            }

                #product #description .text .description .fas {
                    transition-duration: 0.5s;
                    vertical-align: middle;
                    padding-left: 10px;
                }

                #product #description .text .description .collapsed .fas {
                    transform: rotate(0.25turn);
                    padding-bottom: 20px;
                    padding-left: 0;
                }

                #product #description .text .description .collapse.show {
                    padding-bottom: 20px;
                }

                #product #description .text .description a {
                    text-decoration: none;
                    color: #212529;
                }

            #product #description .text .exp img {
                width: 25px;
            }

    #product #features-desktop {
        display: none;
        width: 100%;
        height: 100%;
        -webkit-perspective: 1000;
        perspective: 1000;
        overflow: hidden;
        background-color: #F5F5F5;
    }

        #product #features-desktop #line {
            height: 6px;
            width: 74%;
            background: #1FD5CB;
            border-radius: 5px;
            margin: auto;
            top: 94%;
            left: 1%;
            position: relative;
        }

            #product #features-desktop #line .circle {
                width: 20px;
                height: 20px;
                background: #f5f5f5;
                border-radius: 15px;
                position: absolute;
                top: -7px;
                border: 3px solid #1fd5cb;
            }

                #product #features-desktop #line .circle:before {
                    content: '';
                    width: 10px;
                    height: 10px;
                    background: #1fd5cb;
                    position: absolute;
                    border-radius: 100%;
                    top: 2px;
                    left: 2px;
                    display: block;
                }

                #product #features-desktop #line .circle .popupSpan {
                    width: auto;
                    height: auto;
                    padding: 10px;
                    white-space: nowrap;
                    display: block;
                    color: #133d4f;
                    position: absolute;
                    top: 20px;
                    left: -45px;
                    top: -40px;
                    transition: all 0.1s ease-out;
                }

        #product #features-desktop .leaf1 {
            position: absolute;
            top: 30%;
            left: 80%;
            pointer-events: none;
            z-index: -1;
        }

        #product #features-desktop .leaf2 {
            position: absolute;
            top: 10%;
            left: -10%;
            width: 35%;
            opacity: 0.1;
            pointer-events: none;
            z-index: -1;
        }

        #product #features-desktop #slideContainer {
            width: 400%;
            /* to contain 4 panels, each with 100% of window width */
            height: 100%;
        }

        #product #features-desktop .panel {
            height: 100%;
            width: 25%;
            /* relative to parent -> 25% of 400% = 100% of window width */
            float: left;
            padding-top: 200px;
        }

        #product #features-desktop h1 {
            font-family: 'Caveat', sans-serif !important;
            font-weight: bold;
        }

        #product #features-desktop .discover {
            padding-right: 80px;
            padding-left: 80px;
        }

            #product #features-desktop .discover .image {
                display: block;
                margin: auto;
            }

            #product #features-desktop .discover .size {
                margin-top: 15px;
            }

                #product #features-desktop .discover .size [class*='col'] h5 {
                    text-align: center;
                    font-weight: bold;
                }

                #product #features-desktop .discover .size [class*='col'] p {
                    font-size: 13px;
                }

            #product #features-desktop .discover h1 {
                padding-bottom: 50px;
            }

        #product #features-desktop .tech {
            padding-right: 80px;
            padding-left: 80px;
        }

            #product #features-desktop .tech .icons {
                text-align: center;
            }

                #product #features-desktop .tech .icons [class*='col'] img {
                    width: 50px;
                }

                #product #features-desktop .tech .icons [class*='col'] p {
                    margin-top: 1rem;
                    margin-bottom: 2rem;
                }

            #product #features-desktop .tech h1 {
                padding-bottom: 25px;
                padding-top: 25px;
            }

            #product #features-desktop .tech .container-tech {
                text-align: center;
                /* Custom style for Tootlip-1 */
                /* Custom style for Tootlip-2 */
                /* Custom style for Tootlip-3 */
            }

                #product #features-desktop .tech .container-tech img {
                    width: 80%;
                    display: block;
                    margin-left: auto;
                }

                #product #features-desktop .tech .container-tech .content p {
                    color: #454545;
                    margin: 0;
                }

                #product #features-desktop .tech .container-tech .content h5 {
                    color: #0093ED;
                }

                #product #features-desktop .tech .container-tech .all-tooltips {
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    left: 0;
                    top: 0;
                }

                #product #features-desktop .tech .container-tech .tooltip-content {
                    position: absolute;
                    background-color: white;
                    box-shadow: 0px 0px 20px #00000020;
                    padding: 30px;
                    border-radius: 8px;
                    width: 90vw;
                    max-width: 300px;
                    opacity: 0;
                    pointer-events: none;
                    z-index: 3;
                }

                    #product #features-desktop .tech .container-tech .tooltip-content .arrow {
                        position: absolute;
                        border: 10px solid transparent;
                        border-bottom-color: #ffffff;
                        top: 0px;
                        left: 50%;
                        transform: translate(-50%, -100%);
                    }

                #product #features-desktop .tech .container-tech .pin {
                    position: absolute;
                    top: 100%;
                    left: 100%;
                    background-color: white;
                    height: 25px;
                    width: 25px;
                    border-radius: 50%;
                    cursor: pointer;
                }

                    #product #features-desktop .tech .container-tech .pin::after {
                        content: '';
                        position: absolute;
                        top: 0;
                        left: 0;
                        height: 100%;
                        width: 100%;
                        background-color: white;
                        border-radius: 50%;
                        animation: puls-effect 1s ease-in-out infinite;
                    }

                #product #features-desktop .tech .container-tech .tooltip-tech.active .tooltip-content {
                    opacity: 1;
                    pointer-events: all;
                }

                #product #features-desktop .tech .container-tech .tooltip-tech1 .pin {
                    left: 35%;
                    top: 58%;
                }

                #product #features-desktop .tech .container-tech .tooltip-tech2 .pin {
                    left: 75%;
                    top: 59%;
                }

                #product #features-desktop .tech .container-tech .tooltip-tech3 .pin {
                    left: 60%;
                    top: 30%;
                }

        #product #features-desktop .key-points img {
            width: 50%;
            padding: 20px;
            border-radius: 35px;
            float: right;
        }

        #product #features-desktop .key-points .pb-3 {
            margin-left: -50px;
        }

        #product #features-desktop .social.container-fluid {
            position: relative;
        }

        #product #features-desktop .social .row {
            height: 85%;
        }

            #product #features-desktop .social .row a {
                display: flex;
                justify-content: center;
                align-items: center;
            }

                #product #features-desktop .social .row a:after {
                    content: "";
                    display: block;
                    padding-bottom: 100%;
                }

                #product #features-desktop .social .row a img {
                    position: absolute;
                    width: 90%;
                    height: 100%;
                    object-fit: cover;
                }

        #product #features-desktop .footer {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            padding-top: 30px;
        }

            #product #features-desktop .footer span {
                cursor: pointer;
                font-size: 1.25rem;
                text-transform: uppercase;
                padding: 10px 20px 6px;
                border-radius: 6px;
                color: white;
                box-shadow: 0 0 20px #eee;
                text-align: center;
                transition: 0.5s;
                background-size: 200% auto;
            }

                #product #features-desktop .footer span:hover {
                    background-position: right center;
                }

            #product #features-desktop .footer.lui span {
                background-image: linear-gradient(to right, #0093ED 0%, #1fd5cb 51%, #0093ED 100%);
            }

            #product #features-desktop .footer.elle span {
                background-image: linear-gradient(to right, #FD4DA8 0%, #1fd5cb 51%, #FD4DA8 100%);
            }

    #product #features-mobile {
        display: block;
        background-color: #F5F5F5;
        padding-bottom: 100px;
        overflow: hidden;
        position: relative;
    }

        #product #features-mobile .leaf1 {
            position: absolute;
            top: 30%;
            left: 80%;
            pointer-events: none;
        }

        #product #features-mobile .leaf2 {
            position: absolute;
            top: 10%;
            left: -10%;
            width: 35%;
            opacity: 0.1;
            pointer-events: none;
        }

        #product #features-mobile .leaf3 {
            position: absolute;
            bottom: -21%;
            left: -10%;
            pointer-events: none;
        }

        #product #features-mobile h1 {
            font-family: 'Caveat', sans-serif !important;
            font-weight: bold;
        }

        #product #features-mobile .nav-tabs {
            display: flex;
            justify-content: space-evenly;
            text-transform: uppercase;
            border: 0;
            padding: 20px;
            position: relative;
            z-index: 1;
        }

            #product #features-mobile .nav-tabs.lui {
                background-color: #0093ED;
            }

                #product #features-mobile .nav-tabs.lui .nav-link.active {
                    color: #0093ED;
                }

            #product #features-mobile .nav-tabs.elle {
                background-color: #FD4DA8;
            }

                #product #features-mobile .nav-tabs.elle .nav-link.active {
                    color: #FD4DA8;
                }

            #product #features-mobile .nav-tabs .nav-link {
                color: white;
                border: 0;
                border-radius: 0.5rem;
            }

                #product #features-mobile .nav-tabs .nav-link.active {
                    background-color: white;
                }

        #product #features-mobile .tab-content {
            position: relative;
            z-index: 1;
        }

            #product #features-mobile .tab-content section.slideRight {
                animation: 0.5s ease-in 0s 1 slideInFromRight;
            }

            #product #features-mobile .tab-content section.slideLeft {
                animation: 0.5s ease-in 0s 1 slideInFromLeft;
            }

            #product #features-mobile .tab-content section .footer {
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;
                padding-top: 30px;
            }

                #product #features-mobile .tab-content section .footer span {
                    cursor: pointer;
                    font-size: 1.25rem;
                    text-transform: uppercase;
                    padding: 10px 20px 6px;
                    border-radius: 6px;
                    color: white;
                    box-shadow: 0 0 20px #eee;
                    text-align: center;
                    transition: 0.5s;
                    background-size: 200% auto;
                }

                    #product #features-mobile .tab-content section .footer span:hover {
                        background-position: right center;
                    }

                #product #features-mobile .tab-content section .footer.lui span {
                    background-image: linear-gradient(to right, #0093ED 0%, #1fd5cb 51%, #0093ED 100%);
                }

                #product #features-mobile .tab-content section .footer.elle span {
                    background-image: linear-gradient(to right, #FD4DA8 0%, #1fd5cb 51%, #FD4DA8 100%);
                }

        #product #features-mobile .tab-pane {
            padding: 80px;
        }

        #product #features-mobile #discover .size {
            margin-top: 15px;
        }

            #product #features-mobile #discover .size [class*='col'] h5 {
                text-align: center;
                font-weight: bold;
            }

            #product #features-mobile #discover .size [class*='col'] p {
                font-size: 13px;
            }

        #product #features-mobile #discover h1 {
            padding-bottom: 50px;
        }

        #product #features-mobile #tech .icons {
            text-align: center;
        }

            #product #features-mobile #tech .icons [class*='col'] img {
                width: 50px;
            }

            #product #features-mobile #tech .icons [class*='col'] p {
                margin-top: 1rem;
                margin-bottom: 2rem;
            }

        #product #features-mobile #tech h1 {
            padding-bottom: 25px;
            padding-top: 25px;
        }

        #product #features-mobile #tech .container-tech {
            text-align: center;
            /* Custom style for Tootlip-1 */
            /* Custom style for Tootlip-2 */
            /* Custom style for Tootlip-3 */
        }

            #product #features-mobile #tech .container-tech img {
                width: 80%;
                display: block;
                margin-left: auto;
            }

            #product #features-mobile #tech .container-tech .content p {
                color: #454545;
                margin: 0;
            }

            #product #features-mobile #tech .container-tech .content h5 {
                color: #0093ED;
            }

            #product #features-mobile #tech .container-tech .all-tooltips {
                position: absolute;
                width: 100%;
                height: 100%;
                left: 0;
                top: 0;
            }

            #product #features-mobile #tech .container-tech .tooltip-content {
                position: absolute;
                background-color: white;
                box-shadow: 0px 0px 20px #00000020;
                padding: 30px;
                border-radius: 8px;
                width: 90vw;
                max-width: 300px;
                opacity: 0;
                pointer-events: none;
                z-index: 3;
            }

                #product #features-mobile #tech .container-tech .tooltip-content .arrow {
                    position: absolute;
                    border: 10px solid transparent;
                    border-bottom-color: #ffffff;
                    top: 0px;
                    left: 50%;
                    transform: translate(-50%, -100%);
                }

            #product #features-mobile #tech .container-tech .pin {
                position: absolute;
                top: 100%;
                left: 100%;
                background-color: white;
                height: 25px;
                width: 25px;
                border-radius: 50%;
                cursor: pointer;
            }

                #product #features-mobile #tech .container-tech .pin::after {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    height: 100%;
                    width: 100%;
                    background-color: white;
                    border-radius: 50%;
                    animation: puls-effect 1s ease-in-out infinite;
                }

            #product #features-mobile #tech .container-tech .tooltip-tech.active .tooltip-content {
                opacity: 1;
                pointer-events: all;
            }

            #product #features-mobile #tech .container-tech .tooltip-tech1 .pin {
                left: 35%;
                top: 58%;
            }

            #product #features-mobile #tech .container-tech .tooltip-tech2 .pin {
                left: 75%;
                top: 59%;
            }

            #product #features-mobile #tech .container-tech .tooltip-tech3 .pin {
                left: 60%;
                top: 30%;
            }

        #product #features-mobile #key-points img {
            width: 70%;
            padding: 20px;
            border-radius: 35px;
            float: right;
        }

        #product #features-mobile #social.container-fluid {
            position: relative;
        }

        #product #features-mobile #social .row a {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0;
        }

            #product #features-mobile #social .row a:after {
                content: "";
                display: block;
                padding-bottom: 100%;
            }

            #product #features-mobile #social .row a img {
                position: absolute;
                width: 90%;
                height: 90%;
                object-fit: cover;
            }

    #product #accessories .all-accessories {
        background-color: #9EE6E3;
        text-align: center;
    }

        #product #accessories .all-accessories .all img {
            position: absolute;
            right: 10%;
            top: -15%;
        }

        #product #accessories .all-accessories .included {
            padding-top: 25px;
            padding-bottom: 25px;
            margin-left: -2%;
        }

            #product #accessories .all-accessories .included h1 {
                font-family: 'Caveat', sans-serif !important;
                font-weight: bold;
            }

            #product #accessories .all-accessories .included .line {
                width: 25%;
                border: solid white 2px;
                margin-bottom: 40px;
            }

            #product #accessories .all-accessories .included [class*='col-'] {
                padding-bottom: 25px;
                font-size: 12px;
            }

                #product #accessories .all-accessories .included [class*='col-'] img {
                    width: 70px;
                }

    #product #accessories .list-accessories {
        padding: 200px 160px;
        padding-bottom: 100px;
    }

        #product #accessories .list-accessories [class*='col-'] {
            padding-bottom: 50px;
        }

        #product #accessories .list-accessories h5 {
            font-weight: bold;
            margin: 25px 0px 15px 0px;
        }

    #product #specifications {
        background-color: #F5F5F5;
        padding-bottom: 80px;
        padding-top: 80px;
        position: relative;
    }

        #product #specifications .leaf4 {
            position: absolute;
            top: -15%;
            left: -10%;
            width: 25%;
            pointer-events: none;
        }

        #product #specifications .container {
            background-color: white;
            padding: 40px 80px;
        }

            #product #specifications .container h1 {
                padding-bottom: 20px;
                font-family: 'Caveat', sans-serif !important;
                font-weight: bold;
                font-size: 3rem;
            }

            #product #specifications .container .table {
                margin-bottom: 0;
                color: #133D4F !important;
            }

                #product #specifications .container .table th,
                #product #specifications .container .table td {
                    border-top: 0;
                    border-bottom: 1px solid #dee2e6;
                }

                #product #specifications .container .table th {
                    text-transform: uppercase;
                }

    #product #video {
        position: relative;
        padding-top: 56.25%;
    }

        #product #video .video-h {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

    #product #related_products #carousel_products_mobile {
        display: none;
    }

    #product #related_products h1 {
        font-family: 'Caveat', sans-serif !important;
        padding: 20px;
        text-align: center;
        background-color: #1FD5CB;
        color: white;
    }

    #product #related_products .container {
        padding: 80px 0;
    }

    #product #related_products .carousel {
        padding-bottom: 80px;
    }

        #product #related_products .carousel .carousel-indicators {
            align-items: center;
        }

            #product #related_products .carousel .carousel-indicators li {
                width: 12px;
                height: 12px;
                border-radius: 100%;
                background-color: #1FD5CB;
                margin-right: 10px;
            }

                #product #related_products .carousel .carousel-indicators li.active {
                    width: 25px;
                    height: 25px;
                }

    #product #related_products img {
        background: linear-gradient(transparent 30%, #f7f7f7 0%);
    }

    #product #related_products .fas {
        color: #194051;
    }

    #product #related_products .title {
        height: 15%;
        text-align: center;
    }

        #product #related_products .title h3,
        #product #related_products .title h4 {
            color: #106EAB;
            text-align: center;
            text-transform: uppercase;
            letter-spacing: 3px;
        }

        #product #related_products .title h3 {
            font-size: 1.4rem;
            padding-top: 20px;
        }

        #product #related_products .title h4 {
            font-size: 1.1rem;
            padding-bottom: 30px;
        }

@media (max-width: 1200px) {
    #product #description {
        padding: 80px 0;
        /*            .graph {
                top: 65%;
                left: 63%;
            }*/
    }

    #product #accessories {
        margin-top: 0;
    }

        #product #accessories .all-accessories .all img {
            top: -10%;
        }

        #product #accessories .list-accessories {
            padding: 80px;
        }

    #product #features-mobile .leaf1 {
        left: 70%;
    }

    #product #features-mobile #discover .size img {
        display: block;
        margin: auto;
    }

    #product #features-mobile #key-points img {
        float: none;
        display: block;
        margin: auto;
    }

    #product #specifications .leaf4 {
        top: -10%;
        left: -10%;
    }

    #product #related_products .title {
        height: 18%;
    }
}

@media (max-width: 991px) {
    #product #description {
        background: #F5F5F5 !important;
        padding-top: 0;
        /*            .graph {
                top: 0%;
                left: 0%;
                z-index: 1;
            }*/
    }

        #product #description .img {
            display: flex;
            justify-content: end;
            padding: 50px 0px 50px 150px;
        }

            #product #description .img .bg {
                position: absolute;
                left: 0;
                top: 0;
                height: 100%;
                width: 100%;
                z-index: 1;
            }

            #product #description .img .product-img {
                margin-left: auto;
                margin-right: 0;
                width: 65%;
                z-index: 2;
            }

        #product #description .text {
            padding: 50px 50px 0 50px;
        }

    #product #accessories {
        margin-top: 0 !important;
    }

        #product #accessories .all-accessories .all img {
            position: relative;
            right: 0%;
        }

        #product #accessories .all-accessories .included {
            margin-left: 0;
            padding-top: 0;
        }

    #product #features-mobile .leaf1 {
        top: 60%;
    }

    #product #features-mobile .leaf3 {
        bottom: -13%;
        left: -15%;
    }

    #product #features-mobile .tab-pane {
        padding: 80px 50px;
    }

    #product #features-mobile #discover .size [class*='col'] h5 {
        text-align: center;
    }

    #product #features-mobile #tech .container-tech {
        /* Custom style for Tootlip-1 */
        /* Custom style for Tootlip-2 */
        /* Custom style for Tootlip-3 */
    }

        #product #features-mobile #tech .container-tech img {
            margin: auto;
        }

        #product #features-mobile #tech .container-tech .tooltip-tech1 .pin {
            left: 25%;
            top: 55%;
        }

        #product #features-mobile #tech .container-tech .tooltip-tech2 .pin {
            left: 65%;
            top: 59%;
        }

        #product #features-mobile #tech .container-tech .tooltip-tech3 .pin {
            left: 50%;
            top: 30%;
        }

    #product #specifications .leaf4 {
        top: -10%;
        left: -15%;
        width: 35%;
    }

    #product #related_products .title {
        height: 23%;
    }
}

@media (max-width: 767px) {
    #product #features-mobile .leaf1 {
        left: 60%;
    }

    #product #features-mobile .leaf3 {
        left: -20%;
    }

    #product #features-mobile .tab-pane {
        padding: 80px 25px;
    }

    #product #features-mobile #tech .container-tech .tooltip-content {
        padding: 10px;
        width: 180px;
    }

    #product #features-mobile #tech .container-tech .pin {
        height: 20px;
        width: 20px;
    }

    #product #specifications .leaf4 {
        top: -12%;
        left: -20%;
        width: 50%;
    }

    #product #related_products #carousel_products_mobile {
        display: block;
    }

        #product #related_products #carousel_products_mobile .carousel-item {
            text-align: center;
        }

    #product #related_products #carousel_products_desktop {
        display: none;
    }
}

@media (max-width: 576px) {
    #product #description .img {
        padding: 25px 0px 25px 150px;
    }

        #product #description .img .product-img {
            width: 90%;
        }

    #product #description .text {
        padding: 50px 25px 0 25px;
    }

    #product #description .table th {
        width: 55%;
        vertical-align: middle;
    }

    #product #features-mobile .leaf3 {
        left: -30%;
    }

    #product #features-mobile #discover h1 {
        padding-bottom: 25px;
    }

    #product #features-mobile #tech .container-tech .tooltip-content {
        text-align: center;
        padding: 10px;
        width: 180px;
    }

    #product #features-mobile #tech .container-tech .pin {
        height: 20px;
        width: 20px;
    }

    #product #accessories .list-accessories {
        padding: 80px 25px;
        padding-bottom: 50px;
    }

    #product #specifications {
        padding-bottom: 80px;
    }

        #product #specifications .container {
            padding: 20px 40px;
        }
}

@media (min-width: 1200px) and (min-height: 850px) {
    #product #features-desktop {
        display: block;
    }

        #product #features-desktop .key-points p {
            width: 120%;
        }

    #product #features-mobile {
        display: none;
    }

    #product #accessories {
        border-top: 100px solid #f5f5f5;
    }
}

@media (min-width: 1200px) and (max-height: 1000px) {
    #product #features-desktop .discover .image {
        width: 75%;
    }

    #product #features-desktop .discover h1 {
        padding-bottom: 20px;
    }

    #product #features-desktop .discover p {
        font-size: 0.95rem;
    }

    #product #features-desktop .tech .container-tech {
        display: flex;
        justify-content: center;
        /* Custom style for Tootlip-1 */
        /* Custom style for Tootlip-2 */
        /* Custom style for Tootlip-3 */
    }

        #product #features-desktop .tech .container-tech img {
            width: 50%;
            margin-left: initial;
        }

        #product #features-desktop .tech .container-tech .pin {
            height: 20px;
            width: 20px;
        }

        #product #features-desktop .tech .container-tech .tooltip-tech1 .pin {
            left: 35%;
            top: 58%;
        }

        #product #features-desktop .tech .container-tech .tooltip-tech2 .pin {
            left: 58%;
            top: 59%;
        }

        #product #features-desktop .tech .container-tech .tooltip-tech3 .pin {
            left: 50%;
            top: 30%;
        }

    #product #features-desktop .tech h1 {
        margin-top: 0;
        padding-bottom: 15px;
    }

    #product #features-desktop .tech p {
        font-size: 0.95rem;
    }

    #product #features-desktop .key-points img {
        width: 40%;
    }

    #product #features-desktop .key-points .pb-3 {
        padding: 0 !important;
        margin-left: -100px;
    }

    #product #features-desktop .key-points h1 {
        font-size: 1.8rem;
    }

    #product #features-desktop .key-points p {
        font-size: 0.95rem;
    }

    #product #features-desktop .social {
        padding-top: 150px;
    }

        #product #features-desktop .social .row a img {
            height: 90%;
        }
}

@keyframes progress {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

@keyframes slideInFromRight {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes slideInFromLeft {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(0);
    }
}

#menu_product {
    background-color: #1FD5CB;
    display: none;
}

    #menu_product .navbar {
        border: 0;
        padding: 10px;
        background-color: transparent;
    }

        #menu_product .navbar a {
            text-transform: uppercase;
            border-radius: 0.25em;
            padding: 10px;
            transition: background-color 1s ease;
        }

            #menu_product .navbar a.active {
                background-color: #0ec4ba;
                transition: background-color 0.5s ease;
            }

            #menu_product .navbar a,
            #menu_product .navbar a:hover {
                color: #fff;
            }

    #menu_product.menu_fixed {
        display: block;
        position: fixed !important;
        top: 74px;
        width: 100%;
        z-index: 19000;
        box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.1);
    }

@media (max-width: 992px) {
    #menu_product {
        display: none !important;
    }
}

@media (max-width: 1350px) {
    #features-desktop .key-points h1 {
        font-size: 2rem;
    }

    #features-desktop .key-points .footer {
        padding-top: 0 !important;
    }
}


/*------------------------------------------------- SUP -------------------------------------------*/

/* The switch - the box around the slider */
#product .switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

@media (min-width: 576px) {
    #product .switch {
        margin: 0;
    }
}
/* Hide default HTML checkbox */
#product .switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
/* The slider */
#product .slider {
    /*position: absolute;*/
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

    #product .slider:before {
        position: absolute;
        content: "";
        height: 26px;
        width: 26px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

#product input:checked + .slider {
    background-color: #2196F3;
}

#product input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

#product input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    transform: translateX(26px);
}
/* Rounded sliders */
#product .slider.round {
    border-radius: 34px;
}

    #product .slider.round:before {
        border-radius: 50%;
    }

#product .switch-wrap {
    text-align: center;
    background-color: #b1fbc1;
    padding: 30px;
    border-radius: 3px;
    margin: 30px 0 0;
}

@media (min-width: 576px) {
    #product .switch-wrap {
        position: fixed;
        bottom: 0;
        display: -webkit-box;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
        flex-direction: row-reverse;
        -webkit-box-align: center;
        align-items: center;
        width: 100%;
        -webkit-box-pack: center;
        justify-content: center;
        padding: 10px;
    }
}

#product .switch-text {
    display: block;
    margin: 0.5em;
}

@media (min-width: 576px) {
    #product .switch-text {
        margin: 0 1em 0 0;
    }
}

.sup strong, .sup b, .sup p, .sup li {
    color: #606060;
    font-family: raleway;
}

.sup .vcenter, .sup .vcenterrow, .sup .vcentermob {
    display: flex;
    align-items: center;
}


.sup .background-blanc {
    background-color: white;
}

.sup .en-tete {
    margin-top: 30px;
}

.sup h1 {
    font-size: 30px;
    line-height: 30px;
    font-family: raleway !important;
    font-weight: bolder !important;
    color: white !important;
    letter-spacing: 1.5px;
}

.sup h2 {
    font-size: 50px;
    line-height: 70px;
    font-family: raleway !important;
    font-weight: 300 !important;
    color: white !important;
    margin: 30px 0px 30px 0px;
}

h2 b {
    color: white !important;
    font-weight: bold !important;
    font-family: raleway !important;
}

.sup .en-tete p {
    color: white;
    font-weight: 500 !important;
    font-size: 20px;
}

.sup .en-tete img {
    max-width: 80%;
}

.sup .sup-parallax {
    background-image: url("https://www.poolstar.fr/Upload/Image/produit/zray/x1/parallaxe-1.jpg");
    background-repeat: no-repeat;
    background-position: center top;
    height: 600px;
}

.sup .kayak-parallax {
    background-image: url("https://www.poolstar.fr/Upload/Image/produit/zray/x1/parallaxe-1.jpg");
    background-repeat: no-repeat;
    background-position: center top;
    height: 500px;
}

.carbone-parallax {
    background-image: url("https://www.poolstar.fr/Upload/Image/produit/skiffo/apia/parallaxe-1.jpg");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    height: 345px;
    /*margin-top:100px;*/
}

.alu-parallax {
    background-image: url("https://www.poolstar.fr/Upload/Image/produit/skiffo/fidji/parallaxe-1.jpg");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    height: 345px;
    /*margin-top:100px;*/
}


.sac-parallax {
    background-image: url("https://www.poolstar.fr/Upload/Image/produit/zray/x1/parallaxe-1.jpg");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    height: 345px;
    /*margin-top:100px;*/
}

.sup .produit {
    position: absolute;
    z-index: 1;
    left: 0px;
    max-width: 100%;
}

.produit-pagaie {
    position: absolute;
    z-index: 1;
    left: 0px;
    max-width: 100%;
    /*top:-90px;*/
}

.produit-sac {
    position: absolute;
    z-index: 1;
    left: 0px;
    max-width: 100%;
    top: -50px;
}

.produit-leash {
    position: absolute;
    z-index: 1;
    left: 0px;
    max-width: 100%;
    top: -250px;
}

.produit-gourde {
    position: absolute;
    z-index: 1;
    left: 0px;
    right: 0px;
    max-width: 100%;
    top: 20px;
}

.sup h3 {
    font-family: raleway;
    font-weight: 300;
    color: #606060;
    font-size: 32px;
    padding-bottom: 20px;
    line-height: 32px;
}


.sup .accessoires h3 {
    font-family: raleway;
    font-weight: 500;
    color: #606060;
    font-size: 28px;
    padding-bottom: 20px;
    line-height: 32px;
}

.sup h4 {
    font-family: raleway;
    font-weight: 500;
    color: #606060;
}

.sup .transition, .sup .transition2 {
    background-color: white;
}

.sup .transition2-kayak {
    background-color: #f4f5f6;
}

.sup .transition, .sup .transition2, .sup .transition2-kayak {
    transform: skew(0deg,-2deg);
    height: 100px;
    position: relative;
    margin-top: -3%;
}

.sup .accessoires:nth-child(3), .sup .mensurations {
    margin-bottom: 50px;
}

.sup .accessoires p {
    font-family: raleway;
    font-weight: bold;
}





/* Pour les  pages pagaies*/
.picto p {
    color: #12b5c6;
    font-size: 12px;
    margin-top: 10px;
    font-family: raleway;
    font-weight: bold;
    line-height: 14px;
}

.picto h3 {
    font-family: raleway;
    font-weight: bold;
    font-size: 24px;
    padding-bottom: 0px;
}

.picto .texte {
    color: #363636;
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    margin-bottom: 50px;
}

.close-up {
    margin: 50px 0px;
}

    .close-up h3 {
        font-family: raleway;
        font-weight: bold;
        font-size: 20px;
        padding-bottom: 0px;
    }

    .close-up p {
        font-family: raleway;
        color: #363636;
        font-weight: 500;
        font-size: 14px;
        line-height: 24px;
    }

.filtre-noir {
    position: absolute;
    width: 50%;
    background: rgba(0, 0, 0, 0.50);
    height: 600px;
}

.sup .x1-parallax-2 {
    background-image: url("https://www.poolstar.fr/Upload/Image/produit/zray/x1/parallaxe-2.jpg");
    background-repeat: no-repeat;
    background-position: center top;
    height: 600px;
}

.sup .x2-parallax-2 {
    background-image: url("https://www.poolstar.fr/Upload/Image/produit/zray/x2/parallaxe-2.jpg");
    background-repeat: no-repeat;
    background-position: center top;
    height: 600px;
}

.sup .k9-parallax-2 {
    background-image: url("https://www.poolstar.fr/Upload/Image/produit/zray/k9/parallaxe-2.jpg");
    background-repeat: no-repeat;
    background-position: center top;
    height: 600px;
}

.sup .a1-parallax-2 {
    background-image: url("https://www.poolstar.fr/Upload/Image/produit/zray/a1/parallaxe-2.jpg");
    background-repeat: no-repeat;
    background-position: center top;
    height: 600px;
}

.sup .a2-parallax-2 {
    background-image: url("https://www.poolstar.fr/Upload/Image/produit/zray/a2/parallaxe-2.jpg");
    background-repeat: no-repeat;
    background-position: center top;
    height: 600px;
}

.sup .a4-parallax-2 {
    background-image: url("https://www.poolstar.fr/Upload/Image/produit/zray/a4/parallaxe-2.jpg");
    background-repeat: no-repeat;
    background-position: center top;
    height: 600px;
}

.sup .r1-parallax-2 {
    background-image: url("https://www.poolstar.fr/Upload/Image/produit/zray/r1/parallaxe-2.jpg");
    background-repeat: no-repeat;
    background-position: center top;
    height: 600px;
}

.sup .w1-parallax-2 {
    background-image: url("https://www.poolstar.fr/Upload/Image/produit/zray/w1/parallaxe-2.jpg");
    background-repeat: no-repeat;
    background-position: center top;
    height: 600px;
}

.sup .w2-parallax-2 {
    background-image: url("https://www.poolstar.fr/Upload/Image/produit/zray/w2/parallaxe-2.jpg");
    background-repeat: no-repeat;
    background-position: center top;
    height: 600px;
}

.sup .s-222-parallax-2 {
    background-image: url("https://www.poolstar.fr/Upload/Image/produit/skiffo/s-222/parallaxe-2.jpg");
    background-repeat: no-repeat;
    background-position: center top;
    height: 600px;
}

.sup .sun-cruise-10-parallax-2 {
    background-image: url("https://www.poolstar.fr/Upload/Image/produit/skiffo/sun-cruise-10/parallaxe-2.jpg");
    background-repeat: no-repeat;
    background-position: center top;
    height: 600px;
}

.sup .sun-cruise-10-10-parallax-2 {
    background-image: url("https://www.poolstar.fr/Upload/Image/produit/skiffo/sun-cruise-10-10/parallaxe-2.jpg");
    background-repeat: no-repeat;
    background-position: center top;
    height: 600px;
}

.sup .sun-cruise-12-parallax-2 {
    background-image: url("https://www.poolstar.fr/Upload/Image/produit/skiffo/sun-cruise-12/parallaxe-2.jpg");
    background-repeat: no-repeat;
    background-position: center bottom;
    height: 600px;
}

.sup .koast-parallax-2 {
    background-image: url("https://www.poolstar.fr/Upload/Image/produit/skiffo/koast/parallaxe-2.jpg");
    background-repeat: no-repeat;
    background-position: center top;
    height: 600px;
}

.sup .skiffo-10-parallax-2 {
    background-image: url("https://www.poolstar.fr/Upload/Image/produit/skiffo/10/parallaxe-2.jpg");
    background-repeat: no-repeat;
    background-position: center top;
    height: 600px;
}

.sup .skiffo-10-6-parallax-2 {
    background-image: url("https://www.poolstar.fr/Upload/Image/produit/skiffo/10-6/parallaxe-2.jpg");
    background-repeat: no-repeat;
    background-position: center top;
    height: 600px;
}

.sup .r2-parallax-2 {
    background-image: url("https://www.poolstar.fr/Upload/Image/produit/zray/r2/parallaxe-2.jpg");
    background-repeat: no-repeat;
    background-position: center top;
    height: 600px;
}

.sup .k8-parallax-2 {
    background-image: url("https://www.poolstar.fr/Upload/Image/produit/zray/k8/parallaxe-2.jpg");
    background-repeat: no-repeat;
    background-position: center top;
    height: 600px;
}

.sup .atoll-9-10-parallax-2 {
    background-image: url("https://www.poolstar.fr/Upload/Image/produit/zray/atoll-9-10/parallaxe-2.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    height: 600px;
}

.sup .atoll-10-6-parallax-2 {
    background-image: url("https://www.poolstar.fr/Upload/Image/produit/zray/atoll-10-6/parallaxe-2.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    height: 600px;
}

.sup .atoll-11-6-parallax-2 {
    background-image: url("https://www.poolstar.fr/Upload/Image/produit/zray/atoll-11-6/parallaxe-2.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    height: 600px;
}

.sup .fury-10-parallax-2 {
    background-image: url("https://www.poolstar.fr/Upload/Image/produit/zray/fury-10/parallaxe-2.jpg");
    background-repeat: no-repeat;
    background-position: center 45%;
    height: 600px;
}

.sup .fury-10-6-parallax-2 {
    background-image: url("https://www.poolstar.fr/Upload/Image/produit/zray/fury-10-6/parallaxe-2.jpg");
    background-repeat: no-repeat;
    background-position: center 45%;
    height: 600px;
}

.sup .gaby-parallax-2 {
    background-image: url("https://www.poolstar.fr/Upload/Image/produit/skiffo/gaby/parallaxe-2.png");
    background-repeat: no-repeat;
    background-position: center top;
    height: 600px;
}

.sup .x-rider-9-9-parallax-2 {
    background-image: url("https://www.poolstar.fr/Upload/Image/produit/zray/x-rider-9-9/parallaxe-2.jpg");
    background-repeat: no-repeat;
    background-position: center 45%;
    height: 600px;
}

.sup .x-rider-10-10-parallax-2 {
    background-image: url("https://www.poolstar.fr/Upload/Image/produit/zray/x-rider-10-10/parallaxe-2.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    height: 600px;
}

.sup .x-rider-9-parallax-2 {
    background-image: url("https://www.poolstar.fr/Upload/Image/produit/zray/x-rider-9/parallaxe-2.jpg");
    background-repeat: no-repeat;
    background-position: center 45%;
    height: 600px;
}

.sup .x-rider-13-parallax-2 {
    background-image: url("https://www.poolstar.fr/Upload/Image/produit/zray/x-rider-13/parallaxe-2.jpg");
    background-repeat: no-repeat;
    background-position: center 45%;
    height: 600px;
}

.sup .snapper-9-6-parallax-2 {
    background-image: url("https://www.poolstar.fr/Upload/Image/produit/zray/snapper-9-6/parallaxe-2.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    height: 600px;
}

.sup .snapper-pro-11-parallax-2 {
    background-image: url("https://www.poolstar.fr/Upload/Image/produit/zray/snapper-pro-11/parallaxe-2.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    height: 600px;
}

.sup .rapid-14-parallax-2 {
    background-image: url("https://www.poolstar.fr/Upload/Image/produit/zray/rapid-14/parallaxe-2.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    height: 600px;
}

.sup .s17-parallax-2 {
    background-image: url("https://www.poolstar.fr/Upload/Image/produit/zray/s17/parallaxe-2.jpg");
    background-repeat: no-repeat;
    background-position: center top;
    height: 600px;
}

.sup .drift-parallax-2 {
    background-image: url("https://www.poolstar.fr/Upload/Image/produit/zray/drift/parallaxe-2.jpg");
    background-repeat: no-repeat;
    background-position: center top;
    height: 600px;
}

.sup .nassau-parallax-2 {
    background-image: url("https://www.poolstar.fr/Upload/Image/produit/zray/nassau/parallaxe-2.jpg");
    background-repeat: no-repeat;
    background-position: center top;
    height: 600px;
}

.sup .st-croix-parallax-2 {
    background-image: url("https://www.poolstar.fr/Upload/Image/produit/zray/st-croix/parallaxe-2.jpg");
    background-repeat: no-repeat;
    background-position: center top;
    height: 600px;
}

.sup .roatan-parallax-2 {
    background-image: url("https://www.poolstar.fr/Upload/Image/produit/zray/roatan/parallaxe-2.jpg");
    background-repeat: no-repeat;
    background-position: center top;
    height: 600px;
}

.sup .tortuga-parallax-2 {
    background-image: url("https://www.poolstar.fr/Upload/Image/produit/zray/tortuga/parallaxe-2.jpg");
    background-repeat: no-repeat;
    background-position: center top;
    height: 600px;
}

.sup .tahiti-parallax-2 {
    background-image: url("https://www.poolstar.fr/Upload/Image/produit/zray/tahiti/parallaxe-2.jpg");
    background-repeat: no-repeat;
    background-position: center top;
    height: 600px;
}

.x-rider #kick_pad,
.kick-pad {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#33302e+0,4c4845+50,33302e+100 */
    background: rgb(51,48,46); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(51,48,46,1) 0%, rgba(76,72,69,1) 50%, rgba(51,48,46,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(51,48,46,1) 0%,rgba(76,72,69,1) 50%,rgba(51,48,46,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(51,48,46,1) 0%,rgba(76,72,69,1) 50%,rgba(51,48,46,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33302e', endColorstr='#33302e',GradientType=0 ); /* IE6-9 */
}

    .x-rider #kick_pad h3, .x-rider #kick_pad p,
    .kick-pad h3, .kick-pad p {
        color: white;
    }

    .x-rider #kick_pad img {
        opacity: 0.9;
    }

.sup .empty-bloc {
    height: 600px;
}

.sup .description {
    padding: 20px;
}

    .sup .description h3, .sup .description p {
        color: white;
    }

.sup .point-cle img {
    display: inline;
    max-width: 50%;
}

.sup .padding50 {
    padding: 50px 0 !important;
}

.sup .padding50-15 {
    padding: 50px 15px !important;
}

.sup .carousel-inner {
    width: 70%;
    margin: 0 15%;
}

.sup .carousel-control.left, .sup .carousel-control.right {
    background: transparent;
}

.sup .chevron {
    width: 25%;
}

.sup .slide-title {
    font-size: 3vw;
    line-height: 4vw;
}

.sup .slide-texte {
    line-height: 20px !important;
}


.carousel-inner .slide-photo, .slide-photo {
    width: 100% !important;
    margin: 0px !important;
}

/*** Résolution de + de 1200 px *****/
@media screen and (min-width: 1200px) {
    .sup .produit {
        max-width: 80% !important;
    }

    .sup .sup-parallax, .sup .kayak-parallax, .sup .x1-parallax-2, .sup .k9-parallax-2, .sup .a1-parallax-2, .sup .a2-parallax-2, .sup .a4-parallax-2, .sup .r1-parallax-2, .sup .r2-parallax-2, .sup .k8-parallax-2, .sup .s17-parallax-2, .sup .drift-parallax-2, .sup .nassau-parallax-2, .sup .st-croix-parallax-2, .sup .roatan-parallax-2, .sup .tortuga-parallax-2, .sup .tahiti-parallax-2, .sup .x-rider-9-parallax-2, .sup .x-rider-9-9-parallax-2, .sup .x-rider-10-10-parallax-2, .sup .x-rider-13-parallax-2, .sup .fury-10-parallax-2, .sup .fury-10-6-parallax-2, .sup .atoll-9-10-parallax-2, .sup .atoll-10-6-parallax-2, .sup .atoll-11-6-parallax-2, .snapper-9-6-parallax-2, .snapper-pro-11-parallax-2, .rapid-14-parallax-2 {
        background-size: cover;
    }
}

/*********Ipad************************/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
}
/*** Résolution de - de 992 px (col-md) *****/
@media screen and (max-width: 991px) {
    .filtre-noir {
        width: 100%;
        height: 750px;
    }

    .sup .sup-parallax, .sup .kayak-parallax, .sup .x1-parallax-2, .sup .k9-parallax-2, .sup .a1-parallax-2, .sup .a2-parallax-2, .sup .a4-parallax-2, .sup .r1-parallax-2, .sup .r2-parallax-2, .sup .k8-parallax-2, .sup .s17-parallax-2, .sup .drift-parallax-2, .sup .nassau-parallax-2, .sup .st-croix-parallax-2, .sup .roatan-parallax-2, .sup .tortuga-parallax-2, .sup .tahiti-parallax-2, .sup .empty-bloc {
        height: 750px;
    }

    .carbone-parallax, .alu-parallax {
        height: 450px;
    }

    .sup .produit {
        position: absolute;
        z-index: 1;
        left: 25%;
        max-width: 50%;
    }

    .produit-pagaie {
        position: absolute;
        z-index: 1;
        left: 25%;
        max-width: 50%;
        top: -50px;
    }

    .produit-sac {
        position: absolute;
        z-index: 1;
        left: 25%;
        max-width: 50%;
        /*top:0px;*/
    }

    .produit-gourde {
        top: -30px;
        width: 75vw;
    }


    .sup .transition {
        margin-bottom: 45%;
    }

    .sup .point-cle img {
        display: block;
        min-width: 100%;
    }
}

/*** Résolution portrait mobile *****/
@media screen and (max-width: 480px) {

    .sup h1 {
        font-size: 20px;
        line-height: 20px;
    }

    .sup h2 {
        font-size: 40px;
        line-height: 50px;
    }

    .sup .en-tete p {
        font-size: 15px;
    }

    .sup .en-tete img {
        max-width: 100%;
    }

    .filtre-noir {
        width: 100%;
        height: 550px;
    }

    .sup .sup-parallax, .sup .kayak-parallax, .sup .x1-parallax-2, .sup .k9-parallax-2, .sup .a1-parallax-2, .sup .a2-parallax-2, .sup .a4-parallax-2, .sup .r1-parallax-2, .sup .r2-parallax-2, .sup .k8-parallax-2, .sup .s17-parallax-2, .sup .drift-parallax-2, .sup .nassau-parallax-2, .sup .st-croix-parallax-2, .sup .roatan-parallax-2, .sup .tortuga-parallax-2, .sup .tahiti-parallax-2, .sup .empty-bloc {
        height: 550px;
    }

    .sup .produit {
        position: absolute;
        z-index: 1;
        left: 25%;
        max-width: 50%;
    }



    .sup .transition {
        margin-bottom: 12%;
    }
}





/*** Résolution de + de 1200 px *****/
@media screen and (min-width: 1200px) {
}

/*** Résolution de - de  740px (portait tablette) *****/
@media screen and (max-width: 739px) {
}

/*** Résolution de - de 992 px (col-md) *****/
@media screen and (max-width: 991px) {
}

/*** Résolution de - de 480 px (mobile-portrait) *****/
@media screen and (max-width: 480px) {
}