/* https://components.skinsforpano.com/hotspots/assets/css/skinsforpano.css */


/* insert next code in Canvas Embedded Styilesheet */


/* .ggskin {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
} */

 :root {
    --white: rgb(255, 255, 255);
    --red: rgb(217, 4, 41);
    --yellow: rgb(255, 183, 3);
    --green: rgb(64, 145, 108);
    --blue: rgb(1, 164, 233);
    --orange: rgb(255, 104, 4);
    --custom-color-1: #02418dff;
    --custom-color-2: #000;
    --custom-color-3: #000;
    --custom-color-4: #000;
    --custom-color-5: #000;
    --pulse-size: 30px;
    --pulsating-background: white;
    /* Size of PULSE HOTSPOT */
    --pulsating-size: 30px;
    --pulsating-size-oval-h: 30px;
    --pulsating-size-oval-v: 9px;
    /* Size of PULSATING CIRCLE HOTSPOT */
    --faded-size: 35px;
    --faded-size-oval-h: 35px;
    --faded-size-oval-v: 10px;
    /* Size of FADED HOTSPOT */
    --pulse-scale-size: 30px;
    --pulse-scale-oval-size-h: 30px;
    --pulse-scale-oval-size-v: 9px;
    /* Size of PULSE-SCALE HOTSPOT */
    --tooltip-text-color: #fff;
    --tooltip-pulse-background: #fff;
    --tooltip-pulse-border-50: rgba(225, 255, 255, .5);
    --tooltip-pulse-border-100: rgba(225, 255, 255, 1);
    /* Size of BOUNCING ARROW  */
    --bounce-arrow-size: 30px;
}


/* Colors definition */

.white {
    color: var(--white);
    background: #fff;
}

.red {
    background: var(--red);
}

.yellow {
    background: var(--yellow);
}

.green {
    background: var(--green);
}

.blue {
    background: var(--blue);
}

.orange {
    background: var(--orange);
}

.custom-color-1 {
    background: var(--custom-color-1);
}

.custom-color-2 {
    background: var(--custom-color-2);
}

.custom-color-3 {
    background: var(--custom-color-3);
}

.custom-color-4 {
    background: var(--custom-color-4);
}

.custom-color-5 {
    background: var(--custom-color-5);
}


/* PULSE Hotspot */

.pulse {
    width: var(--pulse-size);
    height: var(--pulse-size);
    font-size: 20px;
    color: white;
}

.pulse.white {
    color: #000;
}


/* PULSATING Hotspot */

.pulsating-oval {
    width: var(--pulsating-size-oval-h);
    height: var(--pulsating-size-oval-v);
    background: var(--pulsating-background);
}

.pulsating-circle {
    width: var(--pulsating-size);
    height: var(--pulsating-size);
    background: var(--pulsating-background);
}

.pulsating-bkgnd {
    width: var(--pulsating-size);
    height: var(--pulsating-size);
    background: var(--pulsating-background);
}

.pulsating-circle.white,
.pulsating-circle.red,
.pulsating-circle.yellow,
.pulsating-circle.green,
.pulsating-circle.blue,
.pulsating-circle.orange,
.pulsating-circle.custom-color-1,
.pulsating-circle.custom-color-2,
.pulsating-circle.custom-color-3,
.pulsating-circle.custom-color-4,
.pulsating-circle.custom-color-5,
.pulsating-oval.white,
.pulsating-oval.red,
.pulsating-oval.yellow,
.pulsating-oval.green,
.pulsating-oval.blue,
.pulsating-oval.orange,
.pulsating-oval.custom-color-1,
.pulsating-oval.custom-color-2,
.pulsating-oval.custom-color-3,
.pulsating-oval.custom-color-4,
.pulsating-oval.custom-color-5,
.pulsating-bkgnd.white,
.pulsating-bkgnd.red,
.pulsating-bkgnd.yellow,
.pulsating-bkgnd.green,
.pulsating-bkgnd.blue,
.pulsating-bkgnd.orange,
.pulsating-bkgnd.custom-color-1,
.pulsating-bkgnd.custom-color-2,
.pulsating-bkgnd.custom-color-3,
.pulsating-bkgnd.custom-color-4,
.pulsating-bkgnd.custom-color-5 {
    background: transparent;
}

.pulsating-circle.white:before {
    background-color: var(--white);
}

.pulsating-circle.white i {
    color: #000;
}

.pulsating-circle.red:before {
    background-color: var(--red);
}

.pulsating-circle.red i {
    color: var(--red);
}

.pulsating-circle.yellow:before {
    background-color: var(--yellow);
}

.pulsating-circle.yellow i {
    color: var(--yellow);
}

.pulsating-circle.green:before {
    background-color: var(--green);
}

.pulsating-circle.green i {
    color: var(--green);
}

.pulsating-circle.blue:before {
    background-color: var(--blue);
}

.pulsating-circle.orange:before {
    background-color: var(--orange);
}

.pulsating-circle.blue i {
    color: var(--blue);
}

.pulsating-circle.orange i {
    color: var(--orange);
}

.pulsating-circle.custom-color-1:before {
    background-color: var(--custom-color-1);
}

.pulsating-circle.custom-color-1 i {
    color: var(--custom-color-1);
}

.pulsating-circle.custom-color-2:before {
    background-color: var(--custom-color-2);
}

.pulsating-circle.custom-color-2 i {
    color: var(--custom-color-2);
}

.pulsating-circle.custom-color-3:before {
    background-color: var(--custom-color-3);
}

.pulsating-circle.custom-color-3 i {
    color: var(--custom-color-3);
}

.pulsating-circle.custom-color-4:before {
    background-color: var(--custom-color-4);
}

.pulsating-circle.custom-color-4 i {
    color: var(--custom-color-4);
}

.pulsating-circle.custom-color-5:before {
    background-color: var(--custom-color-5);
}

.pulsating-circle.custom-color-5 i {
    color: var(--custom-color-5);
}

.pulsating-oval.white:before {
    background-color: var(--white);
}

.pulsating-oval.white i {
    color: #000;
}

.pulsating-oval.red:before {
    background-color: var(--red);
}

.pulsating-oval.red i {
    color: var(--red);
}

.pulsating-oval.yellow:before {
    background-color: var(--yellow);
}

.pulsating-oval.yellow i {
    color: var(--yellow);
}

.pulsating-oval.green:before {
    background-color: var(--green);
}

.pulsating-oval.green i {
    color: var(--green);
}

.pulsating-oval.blue:before {
    background-color: var(--blue);
}

.pulsating-oval.blue i {
    color: var(--blue);
}

.pulsating-oval.orange:before {
    background-color: var(--orange);
}

.pulsating-oval.orange i {
    color: var(--orange);
}

.pulsating-oval.custom-color-1:before {
    background-color: var(--custom-color-1);
}

.pulsating-oval.custom-color-1 i {
    color: var(--custom-color-1);
}

.pulsating-oval.custom-color-2:before {
    background-color: var(--custom-color-2);
}

.pulsating-oval.custom-color-2 i {
    color: var(--custom-color-2);
}

.pulsating-oval.custom-color-3:before {
    background-color: var(--custom-color-3);
}

.pulsating-oval.custom-color-3 i {
    color: var(--custom-color-3);
}

.pulsating-oval.custom-color-4:before {
    background-color: var(--custom-color-4);
}

.pulsating-oval.custom-color-4 i {
    color: var(--custom-color-4);
}

.pulsating-oval.custom-color-5:before {
    background-color: var(--custom-color-5);
}

.pulsating-oval.custom-color-5 i {
    color: var(--custom-color-5);
}


/* -- */

.pulsating-bkgnd.white i {
    color: #000;
}

.pulsating-bkgnd.red:before {
    background-color: var(--red);
}

.pulsating-bkgnd.red i {
    color: var(--red);
}

.pulsating-bkgnd.yellow:before {
    background-color: var(--yellow);
}

.pulsating-bkgnd.yellow i {
    color: var(--yellow);
}

.pulsating-bkgnd.green:before {
    background-color: var(--green);
}

.pulsating-bkgnd.green i {
    color: var(--green);
}

.pulsating-bkgnd.blue:before {
    background-color: var(--blue);
}

.pulsating-bkgnd.blue i {
    color: var(--blue);
}

.pulsating-bkgnd.orange:before {
    background-color: var(--orange);
}

.pulsating-bkgnd.orange i {
    color: var(--orange);
}

.pulsating-bkgnd.custom-color-1:before {
    background-color: var(--custom-color-1);
}

.pulsating-bkgnd.custom-color-1 i {
    color: var(--custom-color-1);
}

.pulsating-bkgnd.custom-color-2:before {
    background-color: var(--custom-color-2);
}

.pulsating-bkgnd.custom-color-2 i {
    color: var(--custom-color-2);
}

.pulsating-bkgnd.custom-color-3:before {
    background-color: var(--custom-color-3);
}

.pulsating-bkgnd.custom-color-3 i {
    color: var(--custom-color-3);
}

.pulsating-bkgnd.custom-color-4:before {
    background-color: var(--custom-color-4);
}

.pulsating-bkgnd.custom-color-4 i {
    color: var(--custom-color-4);
}

.pulsating-bkgnd.custom-color-5:before {
    background-color: var(--custom-color-5);
}

.pulsating-bkgnd.custom-color-5 i {
    color: var(--custom-color-5);
}


/* FADED Hotspots */

.faded {
    width: var(--faded-size);
    height: var(--faded-size);
    background-color: #FFF;
}

.faded a {
    color: white;
}

.faded.white a {
    color: #000;
}

.faded.red {
    background: var(--red);
}

.faded.yellow {
    background: var(--yellow);
}

.faded.green {
    background: var(--green);
}

.faded.blue {
    background: var(--blue);
}

.faded.orange {
    background: var(--orange);
}

.faded.custom-color-1 {
    background: var(--custom-color-1);
}

.faded.custom-color-2 {
    background: var(--custom-color-2);
}

.faded.custom-color-3 {
    background: var(--custom-color-3);
}

.faded.custom-color-4 {
    background: var(--custom-color-4);
}

.faded.custom-color-5 {
    background: var(--custom-color-5);
}


/* FADED OVAL Hotspots */

.fadedoval {
    width: var(--faded-size-oval-h);
    height: var(--faded-size-oval-v);
    background-color: #FFF;
}

.fadedoval a {
    color: white;
}

.fadedoval.white a {
    color: #000;
}

.fadedoval.red {
    background: var(--red);
}

.fadedoval.yellow {
    background: var(--yellow);
}

.fadedoval.green {
    background: var(--green);
}

.fadedoval.blue {
    background: var(--blue);
}

.fadedoval.orange {
    background: var(--orange);
}

.fadedoval.custom-color-1 {
    background: var(--custom-color-1);
}

.fadedoval.custom-color-2 {
    background: var(--custom-color-2);
}

.fadedoval.custom-color-3 {
    background: var(--custom-color-3);
}

.fadedoval.custom-color-4 {
    background: var(--custom-color-4);
}

.fadedoval.custom-color-5 {
    background: var(--custom-color-5);
}


/* TOOLTIP Hotspots*/

.white.item-hints,
.red.item-hints,
.yellow.item-hints,
.green.item-hints,
.blue.item-hints,
.orange.item-hints,
.custom-color-1.item-hints,
.custom-color-2.item-hints,
.custom-color-2.item-hints,
.custom-color-3.item-hints,
.custom-color-4.item-hints,
.custom-color-5.item-hints {
    background: transparent;
}

.item-hints .hint-content {
    color: var(--tooltip-text-color);
}

.white.item-hints>.hint:before {
    background: var(--white);
}

.white.item-hints .hint-content:before {
    background: var(--white);
}

.white.item-hints .hint-content:after {
    background: var(--white);
}

.red.item-hints>.hint:before {
    background: var(--red);
}

.red.item-hints .hint-content:before {
    background: var(--red);
}

.red.item-hints .hint-content:after {
    background: var(--red);
}

.yellow.item-hints>.hint:before {
    background: var(--yellow);
}

.yellow.item-hints .hint-content:before {
    background: var(--yellow);
}

.yellow.item-hints .hint-content:after {
    background: var(--yellow);
}

.green.item-hints>.hint:before {
    background: var(--green);
}

.green.item-hints .hint-content:before {
    background: var(--green);
}

.green.item-hints .hint-content:after {
    background: var(--green);
}

.blue.item-hints>.hint:before {
    background: var(--blue);
}

.blue.item-hints .hint-content:before {
    background: var(--blue);
}

.blue.item-hints .hint-content:after {
    background: var(--blue);
}

.orange.item-hints>.hint:before {
    background: var(--orange);
}

.orange.item-hints .hint-content:before {
    background: var(--orange);
}

.orange.item-hints .hint-content:after {
    background: var(--orange);
}

.custom-color-1.item-hints>.hint:before {
    background: var(--custom-color-1);
}

.custom-color-1.item-hints .hint-content:before {
    background: var(--custom-color-1);
}

.custom-color-1.item-hints .hint-content:after {
    background: var(--custom-color-1);
}

.custom-color-2.item-hints>.hint:before {
    background: var(--custom-color-2);
}

.custom-color-2.item-hints .hint-content:before {
    background: var(--custom-color-2);
}

.custom-color-2.item-hints .hint-content:after {
    background: var(--custom-color-2);
}

.custom-color-3.item-hints>.hint:before {
    background: var(--custom-color-3);
}

.custom-color-3.item-hints .hint-content:before {
    background: var(--custom-color-3);
}

.custom-color-3.item-hints .hint-content:after {
    background: var(--custom-color-3);
}

.custom-color-4.item-hints>.hint:before {
    background: var(--custom-color-4);
}

.custom-color-4.item-hints .hint-content:before {
    background: var(--custom-color-4);
}

.custom-color-4.item-hints .hint-content:after {
    background: var(--custom-color-4);
}

.custom-color-5.item-hints>.hint:before {
    background: var(--custom-color-5);
}

.custom-color-5.item-hints .hint-content:before {
    background: var(--custom-color-5);
}

.custom-color-5.item-hints .hint-content:after {
    background: var(--custom-color-5);
}

@-webkit-keyframes home_hero_item_hints_glow {
    0% {
        -webkit-box-shadow: 0 0 30px 5px var(--tooltip-pulse-background);
        box-shadow: 0 0 30px 5px var(--tooltip-pulse-background);
    }
    70% {
        -webkit-box-shadow: 0 0 70px 50px rgba(72, 170, 72, 0);
        box-shadow: 0 0 70px 50px rgba(72, 170, 72, 0)
    }
    100% {
        -webkit-box-shadow: 0 0 0 50px rgba(72, 170, 72, 0);
        box-shadow: 0 0 0 50px rgba(72, 170, 72, 0)
    }
}

@keyframes home_hero_item_hints_glow {
    0% {
        -webkit-box-shadow: 0 0 30px 5px var(--tooltip-pulse-background);
        box-shadow: 0 0 30px 5px var(--tooltip-pulse-background);
    }
    70% {
        -webkit-box-shadow: 0 0 70px 50px rgba(72, 170, 72, 0);
        box-shadow: 0 0 70px 50px rgba(72, 170, 72, 0)
    }
    100% {
        -webkit-box-shadow: 0 0 0 50px rgba(72, 170, 72, 0);
        box-shadow: 0 0 0 50px rgba(72, 170, 72, 0)
    }
}

@-webkit-keyframes home_hero_item_hints_border {
    0%,
    100% {
        border-color: var(--tooltip-pulse-border-100);
        -webkit-transform: translate(-50%, -50%) scale(.95);
        transform: translate(-0%, -0%) scale(.95)
    }
    50% {
        border-color: var(--tooltip-pulse-border-50);
        -webkit-transform: translate(-50%, -50%) scale(1);
        transform: translate(-0%, -0%) scale(1)
    }
}

@keyframes home_hero_item_hints_border {
    0%,
    100% {
        border-color: var(--tooltip-pulse-border-100);
        -webkit-transform: translate(-50%, -50%) scale(.95);
        transform: translate(-0%, -0%) scale(.95)
    }
    50% {
        border-color: var(--tooltip-pulse-border-50);
        -webkit-transform: translate(-50%, -50%) scale(1);
        transform: translate(-0%, -0%) scale(1)
    }
}


/* PULSE-SCALE hotspots */

.pulse-scale:before {
    width: var(--pulse-scale-size);
    height: var(--pulse-scale-size);
    background: transparent;
}

.pulse-scale.white,
.pulse-scale.red,
.pulse-scale.yellow,
.pulse-scale.green,
.pulse-scale.blue,
.pulse-scale.orange,
.pulse-scale.custom-color-1,
.pulse-scale.custom-color-2,
.pulse-scale.custom-color-3,
.pulse-scale.custom-color-4,
.pulse-scale.custom-color-5 {
    background: transparent;
}

.white.pulse-scale:before {
    border: 5px solid var(--white);
    background: transparent;
}

.white.pulse-scale:after {
    background: var(--white);
}

.red.pulse-scale:before {
    border: 5px solid var(--red);
    background: transparent;
}

.red.pulse-scale:after {
    background: var(--red);
}

.yellow.pulse-scale:before {
    border: 5px solid var(--yellow);
    background: transparent;
}

.yellow.pulse-scale:after {
    background: var(--yellow);
}

.green.pulse-scale:before {
    border: 5px solid var(--green);
    background: transparent;
}

.green.pulse-scale:after {
    background: var(--green);
}

.blue.pulse-scale:before {
    border: 5px solid var(--blue);
    background: transparent;
}

.blue.pulse-scale:after {
    background: var(--blue);
}

.orange.pulse-scale:before {
    border: 5px solid var(--orange);
    background: transparent;
}

.orange.pulse-scale:after {
    background: var(--orange);
}

.custom-color-1.pulse-scale:before {
    border: 5px solid var(--custom-color-1);
    background: transparent;
}

.custom-color-1.pulse-scale:after {
    background: var(--custom-color-1);
}

.custom-color-2.pulse-scale:before {
    border: 5px solid var(--custom-color-2);
    background: transparent;
}

.custom-color-2.pulse-scale:after {
    background: var(--custom-color-2);
}

.custom-color-3.pulse-scale:before {
    border: 5px solid var(--custom-color-3);
    background: transparent;
}

.custom-color-3.pulse-scale:after {
    background: var(--custom-color-3);
}

.custom-color-4.pulse-scale:before {
    border: 5px solid var(--custom-color-4);
    background: transparent;
}

.custom-color-4.pulse-scale:after {
    background: var(--custom-color-4);
}

.custom-color-5.pulse-scale:before {
    border: 5px solid var(--custom-color-5);
    background: transparent;
}

.custom-color-5.pulse-scale:after {
    background: var(--custom-color-5);
}


/* PULSE-SCALE-OVAL hotspots */

.pulse-scale-oval:before {
    width: var(--pulse-scale-oval-size-h);
    height: var(--pulse-scale-oval-size-v);
    background: transparent;
}

.pulse-scale-oval.white,
.pulse-scale-oval.red,
.pulse-scale-oval.yellow,
.pulse-scale-oval.green,
.pulse-scale-oval.blue,
.pulse-scale-oval.orange,
.pulse-scale-oval.custom-color-1,
.pulse-scale-oval.custom-color-2,
.pulse-scale-oval.custom-color-3,
.pulse-scale-oval.custom-color-4,
.pulse-scale-oval.custom-color-5 {
    background: transparent;
}

.white.pulse-scale-oval:before {
    border: 5px solid var(--white);
    background: transparent;
}

.white.pulse-scale-oval:after {
    background: var(--white);
}

.red.pulse-scale-oval:before {
    border: 5px solid var(--red);
    background: transparent;
}

.red.pulse-scale-oval:after {
    background: var(--red);
}

.yellow.pulse-scale-oval:before {
    border: 5px solid var(--yellow);
    background: transparent;
}

.yellow.pulse-scale-oval:after {
    background: var(--yellow);
}

.green.pulse-scale-oval:before {
    border: 5px solid var(--green);
    background: transparent;
}

.green.pulse-scale-oval:after {
    background: var(--green);
}

.blue.pulse-scale-oval:before {
    border: 5px solid var(--blue);
    background: transparent;
}

.blue.pulse-scale-oval:after {
    background: var(--blue);
}

.orange.pulse-scale-oval:before {
    border: 5px solid var(--orange);
    background: transparent;
}

.orange.pulse-scale-oval:after {
    background: var(--orange);
}

.custom-color-1.pulse-scale-oval:before {
    border: 5px solid var(--custom-color-1);
    background: transparent;
}

.custom-color-1.pulse-scale-oval:after {
    background: var(--custom-color-1);
}

.custom-color-2.pulse-scale-oval:before {
    border: 5px solid var(--custom-color-2);
    background: transparent;
}

.custom-color-2.pulse-scale-oval:after {
    background: var(--custom-color-2);
}

.custom-color-3.pulse-scale-oval:before {
    border: 5px solid var(--custom-color-3);
    background: transparent;
}

.custom-color-3.pulse-scale-oval:after {
    background: var(--custom-color-3);
}

.custom-color-4.pulse-scale-oval:before {
    border: 5px solid var(--custom-color-4);
    background: transparent;
}

.custom-color-4.pulse-scale-oval:after {
    background: var(--custom-color-4);
}

.custom-color-5.pulse-scale-oval:before {
    border: 5px solid var(--custom-color-5);
    background: transparent;
}

.custom-color-5.pulse-scale-oval:after {
    background: var(--custom-color-5);
}


/* bouncing arrow  */

@-moz-keyframes bounce {
    0%,
    20%,
    50%,
    80%,
    100% {
        -moz-transform: translateY(0);
        transform: translateY(0);
    }
    40% {
        -moz-transform: translateY(-30px);
        transform: translateY(-30px);
    }
    60% {
        -moz-transform: translateY(-15px);
        transform: translateY(-15px);
    }
}

@-webkit-keyframes bounce {
    0%,
    20%,
    50%,
    80%,
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    40% {
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px);
    }
    60% {
        -webkit-transform: translateY(-15px);
        transform: translateY(-15px);
    }
}

@keyframes bounce {
    0%,
    20%,
    50%,
    80%,
    100% {
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    40% {
        -moz-transform: translateY(-30px);
        -ms-transform: translateY(-30px);
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px);
    }
    60% {
        -moz-transform: translateY(-15px);
        -ms-transform: translateY(-15px);
        -webkit-transform: translateY(-15px);
        transform: translateY(-15px);
    }
}

.arrow {
    position: fixed;
    bottom: 0;
    left: 50%;
    margin-left: 0px;
    width: var(--bounce-arrow-size);
    height: var(--bounce-arrow-size);
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yOTMuNzUxLDQ1NS44NjhjLTIwLjE4MSwyMC4xNzktNTMuMTY1LDE5LjkxMy03My42NzMtMC41OTVsMCwwYy0yMC41MDgtMjAuNTA4LTIwLjc3My01My40OTMtMC41OTQtNzMuNjcyICBsMTg5Ljk5OS0xOTBjMjAuMTc4LTIwLjE3OCw1My4xNjQtMTkuOTEzLDczLjY3MiwwLjU5NWwwLDBjMjAuNTA4LDIwLjUwOSwyMC43NzIsNTMuNDkyLDAuNTk1LDczLjY3MUwyOTMuNzUxLDQ1NS44Njh6Ii8+DQo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjIwLjI0OSw0NTUuODY4YzIwLjE4LDIwLjE3OSw1My4xNjQsMTkuOTEzLDczLjY3Mi0wLjU5NWwwLDBjMjAuNTA5LTIwLjUwOCwyMC43NzQtNTMuNDkzLDAuNTk2LTczLjY3MiAgbC0xOTAtMTkwYy0yMC4xNzgtMjAuMTc4LTUzLjE2NC0xOS45MTMtNzMuNjcxLDAuNTk1bDAsMGMtMjAuNTA4LDIwLjUwOS0yMC43NzIsNTMuNDkyLTAuNTk1LDczLjY3MUwyMjAuMjQ5LDQ1NS44Njh6Ii8+DQo8L3N2Zz4=);
    background-size: contain;
}

.bounce {
    -moz-animation: bounce 2s infinite;
    -webkit-animation: bounce 2s infinite;
    animation: bounce 2s infinite;
}


/* Arrow flashing colo --------------- */

.flashing-arrow {
    position: absolute;
    top: -12px;
    left: -8px;
}

.arrow-dot {
    position: absolute;
    height: 8px;
    width: 8px;
    border-radius: 18px;
    background-color: #ee5721;
    animation: flashing-arrow-animate linear 2s infinite;
}

.arrow-dot:nth-child(1) {
    animation-delay: 0.9s;
}

.arrow-dot:nth-child(2) {
    animation-delay: 1.1s;
    transform: translate(9px, 7px);
}

.arrow-dot:nth-child(3) {
    animation-delay: 1.3s;
    transform: translate(18px, 13px);
}

.arrow-dot:nth-child(4) {
    animation-delay: 1.1s;
    transform: translate(9px, 18px);
}

.arrow-dot:nth-child(5) {
    animation-delay: 0.9s;
    transform: translate(0px, 25px);
}

.arrow-dot:nth-child(6) {
    animation-delay: 0.9s;
    transform: translate(0, 13px);
}

.arrow-dot:nth-child(7) {
    animation-delay: 0.7s;
    transform: translate(-10px, 13px);
}

.arrow-dot:nth-child(8) {
    animation-delay: 0.5s;
    transform: translate(-20px, 13px);
}

.arrow-dot:nth-child(9) {
    animation-delay: 0.3s;
    transform: translate(-30px, 13px);
}

.arrow-dot:nth-child(10) {
    animation-delay: 0.1s;
    transform: translate(-40px, 13px);
}

@keyframes flashing-arrow-animate {
    0%,
    100% {
        background-color: #ee5721;
        ;
    }
    50% {
        background-color: #02418d;
    }
}