.img-pdct {
    display: none;
    max-width: 100%;
    margin: auto;
    background-repeat: no-repeat;
    background-size: 2100%;
    background-position: 0% 0;
    animation: 5s steps(20) infinite sprite-img-anim
}

.img-pdct.mini {
    width: 310px;
    height: 250px
}

.img-pdct.Up {
    width: 340px;
    height: 280px
}

.img-pdct.NAV {
    width: 550px;
    height: 350px
}

.img-pdct.App {
    width: 165px;
    height: 320px
}

@media (min-width: 1200px) {
    .img-pdct {
        display:block
    }

    .img-pdct+img {
        display: none
    }
}

@keyframes sprite-img-test {
    0% {
        background-position: 0% 0px
    }

    50% {
        background-position: 100% 0px
    }

    100% {
        background-position: 0% 0px
    }
}

@keyframes sprite-img-anim {
    0% {
        background-position: 0% 0%
    }

    4.9999999999% {
        background-position: 100% 0%
    }

    5% {
        background-position: 0% 11.11111111%
    }

    9.9999999999% {
        background-position: 100% 11.11111111%
    }

    10% {
        background-position: 0% 22.22222222%
    }

    14.9999999999% {
        background-position: 100% 22.22222222%
    }

    15% {
        background-position: 0% 33.33333333%
    }

    19.9999999999% {
        background-position: 100% 33.33333333%
    }

    20% {
        background-position: 0% 44.444444444%
    }

    24.9999999999% {
        background-position: 100% 44.444444444%
    }

    25% {
        background-position: 0% 55.555555555%
    }

    29.9999999999% {
        background-position: 100% 55.555555555%
    }

    30% {
        background-position: 0% 66.66666666%
    }

    34.9999999999% {
        background-position: 100% 66.66666666%
    }

    35% {
        background-position: 0% 77.77777777%
    }

    39.9999999999% {
        background-position: 100% 77.77777777%
    }

    40% {
        background-position: 0% 88.88888888%
    }

    44.9999999999% {
        background-position: 100% 88.88888888%
    }

    45% {
        background-position: 0% 100%
    }

    49.9999999999% {
        background-position: 100% 100%
    }

    50% {
        background-position: 100% 100%
    }

    54.9999999999% {
        background-position: 0% 100%
    }

    55% {
        background-position: 100% 88.88888888%
    }

    59.9999999999% {
        background-position: 0% 88.88888888%
    }

    60% {
        background-position: 100% 77.77777777%
    }

    64.9999999999% {
        background-position: 0% 77.777777777%
    }

    65% {
        background-position: 100% 66.666666666%
    }

    69.9999999999% {
        background-position: 0% 66.666666666%
    }

    70% {
        background-position: 100% 55.5555555555%
    }

    74.9999999999% {
        background-position: 0% 55.5555555555%
    }

    75% {
        background-position: 100% 44.444444444%
    }

    79.9999999999% {
        background-position: 0% 44.444444444%
    }

    80% {
        background-position: 100% 33.333333333%
    }

    84.9999999999% {
        background-position: 0% 33.333333333%
    }

    85% {
        background-position: 100% 22.2222222222%
    }

    89.9999999999% {
        background-position: 0% 22.2222222222%
    }

    90% {
        background-position: 100% 11.1111111111%
    }

    94.9999999999% {
        background-position: 0% 11.1111111111%
    }

    95% {
        background-position: 100% 0%
    }

    100% {
        background-position: 0% 0%
    }
}

#pdct-nav .nav-link:not(.active) {
    display: none
}

@media (min-width: 1200px) {
    #pdct-nav .nav-link {
        display:block !important
    }

    .trans-spec {
        margin-left: -10%
    }
}

#openM {
    display: none
}

@media (max-width: 991px) {
    #s01 {
        margin-top:-46px;
        margin-bottom: 46px
    }

    .nav-pills .nav-link.active {
        display: block
    }
}

.tabs .tab-pane {
    max-width: 1000px;
    margin: auto
}

.max-1000 {
    max-width: 1000px;
    margin-right: auto;
    margin-left: auto
}

@keyframes spinner-border {
    to {
        transform: rotate(360deg)
    }
}

:root {
    --time1: 10000ms;
    --delay: 0ms
}

.trck-slides {
    overflow: hidden
}

.trck-slide img {
    max-height: 400px
}

.trck-slide .container {
    position: relative;
    height: 100%
}

.trck-slide .wrapper {
    position: absolute;
    top: 0;
    z-index: 0;
    display: none;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: contain
}

.trck-slide .row {
    position: relative;
    z-index: 1
}

.trck-slide svg {
    width: 100%
}

@media (min-width: 992px) {
    .trck-slide .wrapper {
        display:block
    }
}

.obj {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    width: 2.5rem;
    height: 4.5rem;
    background: url(https://www.moncoyote.com/CMS/uploads/fp/car.svg);
    background-color: var(--color);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 0%;
    opacity: 0;
    transform: rotate(-90deg)
}

.csgn {
    position: absolute
}

.sgn {
    position: absolute;
    width: 34px;
    height: 34px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 0%
}

@media (min-width: 992px) {
    .trck-slide1 .obj {
        --path: "M706.66,0c-16.22,23.23-34.4,57.86-30.87,98.12,2.5,28.45,14.19,40.9,20.95,69.45,3,12.7,14.89,78.16-15.43,122.37-6.55,9.5-31.4,41.9-131.2,52.92-85.49,9.45-114.68-9.1-230.41-22.05-192-21.47-244.72,14.65-260.18,26.46C49.16,355.19,14.85,382.11,0,427.75"
    }

    .trck-slide1 .wrapper {
        top: 58.9113px;
        left: 106.9131px
    }

    .trck-slide {
        height: 480.018px
    }

    .wrapper .obj {
        width: 29.092px;
        height: 52.3656px
    }

    .trck-slide2 .obj {
        --path: "M5.66,0c-15.62,48,5.81,69,7.72,148.83C15.47,236.4-9.45,247.28,6.76,286.64c28,67.82,123.68,87.46,143.32,91.5,75.17,15.43,97.13-12.13,212.76-26.46,74.31-9.21,234.19-29.01,295.46,50.71,8.64,11.24,16.79,33.22,33.07,77.17"
    }

    .trck-slide2 .wrapper {
        top: 3.6365px;
        left: 101.822px
    }

    .trck-slide3 .obj {
        --path: "M704.86,0c3.98,10.73,27.8,75.64,39.69,137.8,18.5,96.8,38.87,203.27-11.03,251.35-58.62,56.51-197.68,16.41-361.59-30.87-74.82-21.58-96.73-34.57-147.73-33.07C125.86,328.1,9.08,382.28.40,454.2c-0.96,8-.37,13.96,3.3,32.93"
    }

    .trck-slide3 .wrapper {
        left: 87.276px
    }

    .trck-slide3.trck-slide3-end .wrapper {
        left: 87.276px
    }

    .trck-slide4 .obj {
        --path: "M0,0C18.43,94.83,44.23,157.31,52.92,187.55c25.8,89.87-62.7,131.912-33.1,208.36a134.07,134.07,0,0,0,24.25,39.69"
    }

    .trck-slide4 .wrapper {
        top: -2.9092px;
        left: 88.7306px
    }

    .sgn--1 {
        top: 75.6392px;
        left: 666.9341px
    }

    .sgn--2 {
        top: 162.1879px;
        left: 690.2077px
    }

    .sgn--3 {
        top: 261.828px;
        left: 682.9347px
    }

    .sgn--5 {
        top: 72.73px;
        left: 0px
    }

    .sgn--6 {
        top: 345.4675px;
        left: 316.3755px
    }

    .sgn--7 {
        top: 236.3725px;
        left: -3.6365px
    }

    .sgn--8 {
        top: 163.6425px;
        left: 745.4825px
    }

    .sgn--9 {
        top: 378.196px;
        left: 727.3px
    }

    .sgn--10 {
        top: 376.7414px;
        left: 472.0177px
    }

    .sgn--11 {
        top: 349.8313px;
        left: 378.9233px
    }

    .sgn--12 {
        top: 317.1028px;
        left: 178.1885px
    }

    .sgn--13 {
        top: 363.65px;
        left: 50.1837px
    }

    .sgn--14 {
        top: 262.5553px;
        left: -66.9116px
    }

    .sgn--15 {
        top: 266.1918px;
        left: 117.0953px
    }

    .sgn--16 {
        top: 436.38px;
        left: 45.0926px
    }

    .sgn--161 {
        top: 477.1088px;
        left: 6.5457px
    }

    .csng--4 {
        top: 267.647px;
        left: 375.2868px
    }
}

@media (min-width: 1200px) {
    .trck-slide1 .obj {
        --path: "M838.58,0c-19.25,27.58-40.84,68.7-36.65,116.51,2.96,33.78,16.85,48.56,24.87,82.47,3.56,15.04,17.68,92.81-18.33,145.3-7.77,11.28-37.26,49.76-155.78,62.84-101.51,11.23-136.18-10.81-273.6-26.18-228-25.49-290.6,17.4-308.95,31.42C58.37,421.77,17.64,453.73,0,507.93"
    }

    .trck-slide1 .wrapper {
        top: 69.9516px;
        left: 126.9492px
    }

    .trck-slide {
        height: 569.976px
    }

    .wrapper .obj {
        width: 34.544px;
        height: 62.1792px
    }

    .trck-slide2 .obj {
        --path: "M6.73,0c-18.55,57,6.9,81.93,9.16,176.72C18.37,280.71-11.23,293.62,8.03,340.35c33.25,80.53,146.86,103.87,170.18,108.65,89.25,18.33,115.33-14.4,252.64-31.42,88.24-10.94,278.08-34.46,350.83,60.21,10.26,13.35,19.93,39.45,39.26,91.64"
    }

    .trck-slide2 .wrapper {
        top: 4.318px;
        left: 120.904px
    }

    .trck-slide3 .obj {
        --path: "M836.96,0c4.72,12.75,33.01,89.81,47.13,163.63,21.98,114.95,46.15,241.37-13.09,298.46-69.6,67.1-234.73,19.48-429.36-36.65-88.85-25.62-114.86-41.05-175.41-39.27C149.44,389.59,10.78,453.93.48,539.32c-1.14,9.49-.44,16.58,3.93,39.1"
    }

    .trck-slide3 .wrapper {
        left: 103.632px
    }

    .trck-slide3.trck-slide3-end .wrapper {
        left: 103.632px
    }

    .trck-slide4 .obj {
        --path: "M0,0C21.88,112.6,52.52,186.78,62.83,222.67c30.64,106.7-74.45,156.64-39.28,247.41a159.2,159.2,0,0,0,28.8,47.13"
    }

    .trck-slide4 .wrapper {
        top: -3.4544px;
        left: 105.3592px
    }

    .sgn--1 {
        top: 89.8144px;
        left: 791.9212px
    }

    .sgn--2 {
        top: 192.5828px;
        left: 819.5564px
    }

    .sgn--3 {
        top: 310.896px;
        left: 810.9204px
    }

    .sgn--5 {
        top: 86.36px;
        left: 0px
    }

    .sgn--6 {
        top: 410.21px;
        left: 375.666px
    }

    .sgn--7 {
        top: 280.67px;
        left: -4.318px
    }

    .sgn--8 {
        top: 194.31px;
        left: 885.19px
    }

    .sgn--9 {
        top: 449.072px;
        left: 863.6px
    }

    .sgn--10 {
        top: 447.3448px;
        left: 560.4764px
    }

    .sgn--11 {
        top: 415.3916px;
        left: 449.9356px
    }

    .sgn--12 {
        top: 376.5296px;
        left: 211.582px
    }

    .sgn--13 {
        top: 431.8px;
        left: 59.5884px
    }

    .sgn--14 {
        top: 311.7596px;
        left: -79.4512px
    }

    .sgn--15 {
        top: 316.0776px;
        left: 139.0396px
    }

    .sgn--16 {
        top: 518.16px;
        left: 53.5432px
    }

    .sgn--161 {
        top: 566.5216px;
        left: 7.7724px
    }

    .csng--4 {
        top: 326.804px;
        left: 445.6176px
    }
}

@media (min-width: 1400px) {
    .trck-slide1 .obj {
        --path: "M971.62,0c-22.3,31.94-47.3,79.55-42.44,134.91,3.43,39.12,19.51,56.23,28.8,95.49,4.12,17.42,20.47,107.46-21.22,168.25-9,13.06-43.14,57.62-180.38,72.76-117.54,13-157.68-12.52-316.8-30.32-264-29.52-336.48,20.15-357.73,36.38C67.59,488.37,20.42,525.38,0,588.13"
    }

    .trck-slide1 .wrapper {
        top: 81px;
        left: 147px
    }

    .trck-slide {
        height: 660px
    }

    .wrapper .obj {
        width: 40px;
        height: 72px
    }

    .trck-slide2 .obj {
        --path: "M7.79,0c-21.48,66,8,94.87,10.61,204.63C21.27,325.05-13,340,9.3,394.11c38.5,93.25,170.06,120.26,197.06,125.81,103.35,21.22,133.55-16.68,292.54-36.38,102.18-12.67,322-39.9,406.24,69.72,11.88,15.46,23.08,45.68,45.47,106.11"
    }

    .trck-slide2 .wrapper {
        top: 5px;
        left: 140px
    }

    .trck-slide3 .obj {
        --path: "M969.15,0c5.47,14.76,38.23,104,54.57,189.47,25.45,133.11,53.44,279.49-15.16,345.6-80.6,77.7-271.8,22.56-497.17-42.44-102.88-29.67-133-47.53-203.12-45.47C173.05,451.12,12.48,525.62.56,624.51c-1.32,11-.52,19.2,4.55,45.28"
    }

    .trck-slide3 .wrapper {
        left: 120px
    }

    .trck-slide3.trck-slide3-end .wrapper {
        left: 120px
    }

    .trck-slide4 .obj {
        --path: "M0,0C25.34,130.39,60.82,216.3,72.76,257.87c35.48,123.56-86.21,181.38-45.48,286.49a184.35,184.35,0,0,0,33.35,54.57"
    }

    .trck-slide4 .wrapper {
        top: -4px;
        left: 122px
    }

    .sgn--1 {
        top: 104px;
        left: 917px
    }

    .sgn--2 {
        top: 223px;
        left: 949px
    }

    .sgn--3 {
        top: 360px;
        left: 939px
    }

    .sgn--5 {
        top: 100px;
        left: 0px
    }

    .sgn--6 {
        top: 475px;
        left: 435px
    }

    .sgn--7 {
        top: 325px;
        left: -5px
    }

    .sgn--8 {
        top: 225px;
        left: 1025px
    }

    .sgn--9 {
        top: 520px;
        left: 1000px
    }

    .sgn--10 {
        top: 518px;
        left: 649px
    }

    .sgn--11 {
        top: 481px;
        left: 521px
    }

    .sgn--12 {
        top: 436px;
        left: 245px
    }

    .sgn--13 {
        top: 500px;
        left: 69px
    }

    .sgn--14 {
        top: 361px;
        left: -92px
    }

    .sgn--15 {
        top: 366px;
        left: 161px
    }

    .sgn--16 {
        top: 600px;
        left: 62px
    }

    .sgn--161 {
        top: 656px;
        left: 9px
    }

    .csng--4 {
        top: 390px;
        left: 516px
    }
}

.trck-slide1 {
    z-index: 4
}

.trck-slide1 .obj {
    offset-path: path(var(--path));
    animation: move1 var(--time1) infinite ease-in-out var(--delay)
}

.trck-slide1 .wrapper {
    background-image: url("https://www.moncoyote.com/CMS/uploads/fp/trackslide1.svg")
}

.trck-slide2 {
    z-index: 3
}

.trck-slide2 .obj,.trck-slide2 .obj.alt {
    offset-path: path(var(--path));
    animation: move2 5s infinite cubic-bezier(0.42, 0, 0.54, 0.82) 0s
}

.trck-slide2 .obj.alt {
    animation: move22 5s infinite cubic-bezier(0.37, 0.24, 0.58, 1) 5s
}

.trck-slide2 .obj--2 {
    animation: move2 5s infinite cubic-bezier(0.42, 0, 0.54, 0.82) 1.6s
}

.trck-slide2 .alt.obj--2 {
    animation: move22 5s infinite cubic-bezier(0.37, 0.24, 0.58, 1) 6.6s
}

.trck-slide2 .wrapper {
    background-image: url("https://www.moncoyote.com/CMS/uploads/fp/trackslide2.svg")
}

.trck-slide3 {
    z-index: 2
}

.trck-slide3 .obj {
    offset-path: path(var(--path));
    animation: move3 var(--time1) infinite ease-in-out var(--delay)
}

.trck-slide3 .wrapper {
    background-image: url("https://www.moncoyote.com/CMS/uploads/fp/trackslide3.svg")
}

.trck-slide3.trck-slide3-end .wrapper {
    background-image: url("https://www.moncoyote.com/CMS/uploads/fp/trackslide3-e.svg")
}

.trck-slide4 {
    z-index: 1
}

.trck-slide4 .obj {
    offset-path: path(var(--path));
    animation: move4 5s infinite ease-in-out var(--delay)
}

.trck-slide4 .wrapper {
    background-image: url("https://www.moncoyote.com/CMS/uploads/fp/trackslide4.svg")
}

.obj--2 {
    --delay: 1600ms
}

.obj--3 {
    --delay: 3200ms
}

.sgn--1 {
    background-image: url(https://www.moncoyote.com/CMS/uploads/_refonte/FR/pages/service/icons2025/Pictos_Alerte_RVB_ICON_CONTROLE_PERMANENT.svg)
}

.sgn--1.sgn-befr {
    background-image: url(https://www.moncoyote.com/CMS/uploads/_refonte/FR/pages/service/icons2025/Pictos_Alerte_RVB_ICON_RADAR_FIXE.svg)
}

.sgn--2 {
    background-image: url(https://www.moncoyote.com/CMS/uploads/_refonte/FR/pages/service/icons2025/Pictos_Alerte_RVB_ICON_CONTROLE_TEMPORAIRE.svg)
}

.sgn--2.sgn-befr {
    background-image: url(https://www.moncoyote.com/CMS/uploads/_refonte/FR/pages/service/icons2025/Pictos_Alerte_RVB_ICON_RADAR_MOBILE.svg)
}

.sgn--3 {
    background-image: url(https://www.moncoyote.com/CMS/uploads/fp/pan3.svg)
}

.sgn--4 {
    background-image: url(https://www.moncoyote.com/CMS/uploads/_refonte/FR/pages/service/icons2025/Pictos_Alerte_RVB_ICON_ALERTE_OBJET_VOIE.svg)
}

.sgn--5 {
    background-image: url(https://www.moncoyote.com/CMS/uploads/_refonte/FR/pages/service/icons2025/Pictos_Alerte_RVB_ICON_ALERTE_VISIBILITE_REDUITE.svg)
}

.sgn--5.sgn-befr {
    background-image: url(https://www.moncoyote.com/CMS/uploads/_refonte/FR/pages/service/icons2025/Pictos_Alerte_RVB_ICON_ALERTE_VISIBILITE_REDUITE.svg)
}

.sgn--6 {
    background-image: url(https://www.moncoyote.com/CMS/uploads/_refonte/FR/pages/service/icons2025/Pictos_Alerte_RVB_ICON_ALERTE_ACCIDENT.svg)
}

.sgn--6.sgn-befr {
    background-image: url(https://www.moncoyote.com/CMS/uploads/_refonte/FR/pages/service/icons2025/Pictos_Alerte_RVB_ICON_ALERTE_ACCIDENT.svg)
}

.sgn--7 {
    background-image: url(https://www.moncoyote.com/CMS/uploads/_refonte/FR/pages/service/icons2025/Pictos_Alerte_RVB_ICON_ALERTE_VIRAGE_DANGEREUX-23.svg)
}

.sgn--8 {
    background-image: url(https://www.moncoyote.com/CMS/uploads/_refonte/FR/pages/service/icons2025/Pictos_Alerte_RVB_ICON_ALERTE_MOTORWAY.svg)
}

.sgn--9 {
    background-image: url(https://www.moncoyote.com/CMS/uploads/_refonte/FR/pages/service/icons2025/Pictos_Alerte_RVB_ICON_ALERTE_TRANSPORTS.svg)
}

.sgn--10 {
    background-image: url(https://www.moncoyote.com/CMS/uploads/_refonte/FR/pages/service/icons2025/Pictos_Alerte_RVB_ICON_ALERTE_TRAVAUX.svg)
}

.sgn--11 {
    background-image: url(https://www.moncoyote.com/CMS/uploads/_refonte/FR/pages/service/icons2025/Pictos_Alerte_RVB_ICON_ALERTE_CONDITIONS_DANGEREUSES.svg)
}

.sgn--12 {
    background-image: url(https://www.moncoyote.com/CMS/uploads/_refonte/FR/pages/service/icons2025/Pictos_Alerte_RVB_ICON_ALERTE_CHAUSSEE_DEGRADEE.svg)
}

.sgn--13 {
    background-image: url(https://www.moncoyote.com/CMS/uploads/_refonte/FR/pages/service/icons2025/Pictos_Alerte_RVB_ICON_ALERTE_PERSONNE_VOIE.svg)
}

.sgn--14 {
    background-image: url(https://www.moncoyote.com/CMS/uploads/_refonte/FR/pages/service/icons2025/Pictos_Alerte_RVB_ICON_ALERTE_ROUTE_GLISSANTE.svg);
    opacity: 0.6
}

.sgn--15 {
    background-image: url(https://www.moncoyote.com/CMS/uploads/_refonte/FR/pages/service/icons2025/Pictos_Alerte_RVB_ICON_ALERTE_VOITURE_MAL_GAREE.svg);
    opacity: 0.6
}

.sgn--16,.sgn--161 {
    background-image: url(https://www.moncoyote.com/CMS/uploads/fp/pan16.svg);
    transform: translate(-50%, -100%)
}

.csng--4 {
    opacity: 1;
    animation: ssgn4 var(--time1) ease infinite
}

.csng--4 .fa-phone::before {
    position: relative;
    top: 12px;
    left: 18px;
    color: #fff;
    font-size: 58px
}

.csng--4 #kmacb {
    position: absolute;
    inset: 64px 0 0 -18px;
    z-index: 200000 !important;
    width: 70px;
    height: 70px;
    margin: auto;
    transition: visibility 0.5s ease 0s;
    transform: perspective(300px) rotatex(45deg)
}

.csng--4 #kmacb a {
    text-decoration: none
}

.csng--4 #kmacb .kmacb-img-circle {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 30px;
    height: 30px;
    border: 2px solid #5ed71d;
    border-radius: 100%;
    background-color: #64e61e;
    opacity: 0.8;
    transform-origin: 50% 50% 0;
    animation: 1s ease-in-out 0s normal none infinite running kmacb-circle-img-anim
}

.csng--4 #kmacb .kmacb-circle-fill {
    position: absolute;
    top: 15px;
    left: 15px;
    width: 40px;
    height: 40px;
    border: 2px solid transparent;
    border-radius: 100%;
    background: #5ed71d none repeat scroll 0 0;
    background-color: #64e61e;
    opacity: 0.24;
    animation: 2.3s ease-in-out 0s normal none infinite running kmacb-circle-fill-anim !important
}

.csng--4 #kmacb .kmacb-circle {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 2px solid #64e61e;
    border-radius: 100%;
    background-color: transparent;
    opacity: 0.35;
    animation: 2.2s ease-in-out 0s normal none infinite running kmacb-circle-anim !important
}

.csng--4 #kmacb:hover .kmacb-img-circle {
    animation: 1s ease-in-out 0s normal none infinite running kmacb-circle-img-anim-hover
}

.csng--4 .check {
    position: absolute;
    top: 0;
    left: 40px;
    width: 0;
    height: 20px;
    background: url("https://www.moncoyote.com/CMS/uploads/fp/check.svg");
    background-repeat: no-repeat;
    background-size: 20px;
    animation: acheck 10000ms ease infinite
}

@keyframes acheck {
    0%,85% {
        width: 0
    }

    95%,100% {
        width: 20px
    }
}

@keyframes kmacb-circle-anim {
    0% {
        opacity: 0.1;
        transform: rotate(0deg) scale(0.5) skew(1deg)
    }

    30% {
        opacity: 0.5;
        transform: rotate(0deg) scale(0.7) skew(1deg)
    }

    100% {
        opacity: 0.1;
        transform: rotate(0deg) scale(1) skew(1deg)
    }
}

@keyframes kmacb-circle-fill-anim {
    0% {
        opacity: 0.2;
        transform: rotate(0deg) scale(0.7) skew(1deg)
    }

    50% {
        opacity: 0.2;
        transform: rotate(0deg) scale(1) skew(1deg)
    }

    100% {
        opacity: 0.2;
        transform: rotate(0deg) scale(0.7) skew(1deg)
    }
}

@keyframes kmacb-circle-img-anim {
    0%,50%,100% {
        transform: rotate(0deg) scale(1) skew(1deg)
    }

    10%,30% {
        transform: rotate(-25deg) scale(1) skew(1deg)
    }

    20%,40% {
        transform: rotate(25deg) scale(1) skew(1deg)
    }
}

@keyframes kmacb-circle-img-anim-hover {
    0%,50%,100% {
        transform: rotate(0deg) scale(1) skew(1deg)
    }

    10%,30% {
        transform: rotate(-35deg) scale(1) skew(1deg)
    }

    20%,40% {
        transform: rotate(35deg) scale(1) skew(1deg)
    }
}

@keyframes ssgn4 {
    0%,60%,100% {
        opacity: 0
    }

    65%,97% {
        opacity: 1
    }
}

@keyframes appear {
    100% {
        opacity: 1
    }
}

@keyframes move1 {
    0% {
        opacity: 0;
        offset-distance: 0%
    }

    10% {
        opacity: 1;
        offset-distance: 2%
    }

    20% {
        offset-distance: 5%
    }

    90% {
        opacity: 1
    }

    100% {
        opacity: 0;
        offset-distance: 97%
    }
}

@keyframes move2 {
    0% {
        opacity: 0;
        offset-distance: 0%
    }

    10% {
        opacity: 1
    }

    100% {
        opacity: 1;
        offset-distance: 60%
    }
}

@keyframes move22 {
    0% {
        opacity: 1;
        offset-distance: 60%
    }

    90% {
        opacity: 1
    }

    100% {
        opacity: 0;
        offset-distance: 97%
    }
}

@keyframes move3 {
    0% {
        opacity: 0;
        offset-distance: 0%
    }

    10% {
        opacity: 1
    }

    30% {
        offset-distance: 30%
    }

    50% {
        offset-distance: 50%
    }

    75% {
        offset-distance: 75%
    }

    90% {
        opacity: 1
    }

    100% {
        opacity: 0;
        offset-distance: 97%
    }
}

@keyframes move4 {
    0% {
        opacity: 0;
        offset-distance: 0%
    }

    10% {
        opacity: 1
    }

    90% {
        opacity: 1
    }

    100% {
        opacity: 0;
        offset-distance: 97%
    }
}

.bounce2 {
    animation: bounce2 2s ease infinite
}

@keyframes bounce2 {
    0%,20%,50%,80%,100% {
        transform: translateY(0)
    }

    40% {
        transform: translateY(-30px)
    }

    60% {
        transform: translateY(-15px)
    }
}

.pulse {
    animation: pulse 1s infinite ease-in-out alternate
}

@keyframes pulse {
    from {
        transform: scale(0.97)
    }

    to {
        transform: scale(1.07)
    }
}

#st01 {
    opacity: 0;
    transition: opacity 0.5s ease, transform 0.5s ease;
    transform: translateY(100%)
}

#st01 .product-sticky {
    border: 1px solid #fff;
    border-radius: 8px 8px 0 0;
    box-shadow: 0 0 50px 5px rgba(0, 0, 0, 0.02), 0 0 0 1px rgba(0, 0, 0, 0.02)
}

#st01.show {
    opacity: 1;
    transform: translateY(0)
}

#st01.show.md-hide {
    opacity: 0;
    transform: translateY(100%)
}

@media (min-width: 768px) {
    .card-plus::after {
        content:"+";
        position: absolute;
        bottom: -22px;
        left: 50%;
        color: #23D63E;
        font-family: bootstrap-icons !important;
        font-size: 26px;
        font-weight: bolder;
        line-height: 1;
        transform: translateX(-50%);
        text-shadow: -1px 0 0 #23D63E, 0 -1px 0 #23D63E, 0 1px 0 #23D63E, 1px 0 0 #23D63E
    }
}

.img-screen {
    position: relative;
    text-align: center;
    --screen-d: 0px
}

.img-screen:not(.img-screen-app) {
    border: 12px solid black;
    --screen-d: -12px
}

.img-screen::after {
    content: "";
    position: absolute;
    top: var(--screen-d);
    right: var(--screen-d);
    bottom: var(--screen-d);
    left: var(--screen-d);
    display: block;
    opacity: 0.1;
    background: linear-gradient(20deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.0508578431) 47%, rgba(255, 255, 255, 0.9332107843) 49%, white 100%)
}

.timeline+.timeline::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    width: 1px;
    height: 50%;
    background-color: #46C815;
    transform: translateX(-50%)
}

@media (min-width: 992px) {
    .timeline+.timeline::after {
        top:50%;
        bottom: unset;
        left: 0;
        width: 50%;
        height: 1px;
        transform: translate(-50%, -50%)
    }
}

.product-gallery .product-main-media {
    position: relative
}

.product-gallery .carousel-inner {
    position: relative;
    overflow: hidden
}

.product-gallery .carousel-inner::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    box-shadow: inset 0 0 5px 5px #fff
}

@media (min-width: 768px) {
    .product-gallery .carousel-item {
        transition:none !important
    }
}

.product-gallery .img-max-res {
    display: block;
    width: auto;
    width: 400px;
    margin: auto
}

.product-gallery .product-thumbs {
    align-items: stretch
}

.product-gallery .thumb-btn {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer
}

.product-gallery .thumb-btn img,.product-gallery .thumb-btn video {
    display: block;
    width: auto;
    max-height: 65px;
    margin: auto;
    border-radius: 10px;
    object-fit: cover;
    opacity: 0.8;
    transition: opacity 0.2s ease
}

.product-gallery .thumb-btn::after {
    content: "";
    position: absolute;
    right: 10%;
    bottom: -8px;
    left: 10%;
    height: 2px;
    border-radius: 999px;
    background: #23D63E;
    opacity: 0;
    transform: scaleX(0.6);
    transition: opacity 0.2s ease, transform 0.2s ease
}

.product-gallery .thumb-btn.active img,.product-gallery .thumb-btn.active video {
    opacity: 1
}

.product-gallery .thumb-btn.active::after {
    opacity: 1;
    transform: scaleX(1)
}

.product-gallery .img-app-res {
    max-height: 280px
}

@media (min-width: 768px) {
    .product-gallery .img-app-res {
        max-height:400px
    }
}

.product-gallery .thumb-video-icon,.product-gallery .video-slide-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    pointer-events: none
}

.product-gallery .thumb-video-icon::before,.product-gallery .video-slide-icon::before {
    content: "";
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55)
}

.product-gallery .thumb-video-icon i,.product-gallery .video-slide-icon i {
    position: relative;
    z-index: 1
}

.product-gallery .thumb-video-icon::before {
    width: 52px;
    height: 52px
}

.product-gallery .video-slide-icon::before {
    width: 72px;
    height: 72px
}

.product-gallery .video-slide-icon i {
    font-size: 2.4rem
}

.product-gallery .product-video-slide-trigger {
    position: relative;
    display: block;
    width: fit-content;
    max-width: 100%;
    margin: auto;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer
}

@media (max-width: 767.98px) {
    .product-gallery .product-thumbs {
        flex-direction:row !important;
        gap: 8px !important;
        overflow-x: visible;
        padding-bottom: 0;
        margin-top: 12px;
        align-items: center !important;
        justify-content: center !important
    }

    .product-gallery .thumb-btn {
        flex: 0 0 auto;
        width: 34px;
        height: 4px;
        border-radius: 999px;
        background: rgba(0, 0, 0, 0.16);
        opacity: 1
    }

    .product-gallery .thumb-btn.active {
        background: rgba(0, 0, 0, 0.65)
    }

    .product-gallery .thumb-btn img,.product-gallery .thumb-btn video,.product-gallery .thumb-btn .thumb-video-icon {
        display: none
    }

    .product-gallery .thumb-btn::after {
        display: none
    }
}