@keyframes ginger-pulse
{
    0% {
        box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);
    }
    30% {
        box-shadow: 0 0 0 15px rgba(0, 0, 0, 0);
    }
    100% {
        box-shadow: 0 0 0 15px rgba(0, 0, 0, 0);
    }
}
.ginger-btn-pulse {
    animation: ginger-pulse 5s infinite;
}

@keyframes ginger-spin
{
    0% {
        transform: rotate(0deg);
    }
    5% {
        transform: rotate(-20deg);
    }
    25% {
        transform: rotate(360deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
.ginger-btn-spin {
    animation: ginger-spin 5s infinite;
}

@keyframes ginger-zoom
{
    0% {
        transform: scale(1);
        opacity: 1;
    }
    5% {
        transform: scale(0.8);
        opacity: 0.75;
    }
    20% {
        transform: scale(1.25);
        opacity: 1;
    }
    30% {
        transform: scale(1);
    }
    100% {
        transform: scale(1);
    }
}
.ginger-btn-zoom {
    animation: ginger-zoom 5s infinite;
}

@keyframes ginger-bounce
{
    0% {
        transform: translate(0px, 0px);
    }
    5% {
        transform: translate(0px, 5px);
    }
    10% {
        transform: translate(0px, -25px);
    }
    15% {
        transform: translate(0px, 5px);
    }
    20% {
        transform: translate(0px, 0px);
    }
    100% {
        transform: translate(0px, 0px);
    }
}
.ginger-btn-bounce {
    animation: ginger-bounce 5s infinite;
}

@keyframes ginger-fade
{
    0% {
        opacity: 1;
    }
    5% {
        opacity:0;
    }
    25% {
        opacity:1;
    }
    100% {
        opacity:1;
    }
}
.ginger-btn-fade {
    animation: ginger-fade 5s infinite;
}

@keyframes ginger-glowing {
    0% { box-shadow: 0 0 -10px #00008B; }
    20% { box-shadow: 0 0 20px #00008B; }
    30% { box-shadow: 0 0 -10px #00008B; }
    100% { box-shadow: 0 0 -10px #00008B; }
}
.ginger-btn-glowing {
    animation: ginger-glowing 5s infinite;
}


/*Menu Animation CSS*/
.ginger-menu-slide.button-list .channel-btn {
    display: block;
    opacity: 0;
    transform: translate(0px, 50px);
}
.ginger-menu-slide.button-list .channel-btn.active {
    transform: translate(0px, 0px);
    opacity: 1;
}
.ginger-menu-none.button-list .channel-btn {
    display: block;
    opacity: 1;
}
.ginger-menu-none.button-list .channel-btn.active {
    opacity: 1;
}

.ginger-menu-fade.button-list .channel-btn {
    display: block;
    opacity: 0;
}
.ginger-menu-fade.button-list .channel-btn.active {
    opacity: 1;
}
.ginger-menu-spin.button-list .channel-btn {
    display: block;
    opacity: 0;
    transform: rotate(270deg);
}
.ginger-menu-spin.button-list .channel-btn.active {
    opacity: 1;
    transform: rotate(360deg);
}
.ginger-menu-pop.button-list .channel-btn {
    display: block;
    opacity: 0;
    transform: scale(0);
}
.ginger-menu-pop.button-list .channel-btn.active {
    opacity: 1;
    transform: scale(1);
}

/* tooltip CSS*/
[data-ginger-tooltip] {
    position: relative;
    z-index: 10;
}
/* Positioning and visibility settings of the tooltip */
[data-ginger-tooltip]:before,
[data-ginger-tooltip]:after {
    position: absolute;
    visibility: hidden;
    opacity: 0;
    left: 50%;
    bottom: calc(100% + 5px);
    pointer-events: none;
    transition: 0.2s;
    will-change: transform;
    white-space: nowrap;
    text-decoration: none;
}
/* The actual tooltip with a dynamic width */
[data-ginger-tooltip]:before {
    content: attr(data-ginger-tooltip);
    padding: 4px 10px;
    min-width: 50px;
    max-width: 210px;
    border-radius: 6px;
    font-size: 14px;
    width: auto;
    background-color: #000000;
    box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.2);
    color: #fff;
    text-align: center;
    transform: translate(-50%, -5px) scale(0.5);
    line-height: initial;
    white-space: nowrap;
    text-decoration: none;
}
.ginger-inner-box [data-ginger-tooltip]:before {
    white-space: pre-wrap;
    width: max-content;
}
/* Tooltip arrow */
[data-ginger-tooltip]:after {
    content: '';
    border-style: solid;
    border-width: 5px 5px 0px 5px;
    border-color: #000000 transparent transparent transparent;
    transition-duration: 0s;
    transform-origin: top;
    transform: translateX(-50%) scaleY(0);
    text-decoration: none;
}
/* Tooltip becomes visible at hover */
[data-ginger-tooltip]:hover:before,
[data-ginger-tooltip]:hover:after,
.active-tooltip[data-ginger-tooltip]:before,
.active-tooltip[data-ginger-tooltip]:after{
    visibility: visible;
    opacity: 1;
}
/* Scales from 0.5 to 1 -> grow effect */
[data-ginger-tooltip]:hover:before, .active-tooltip[data-ginger-tooltip]:before {
    transition-delay: 0s;
    transform: translate(-50%, -5px) scale(1);
}
/* Slide down effect only on mouseenter (NOT on mouseleave) */
[data-ginger-tooltip]:hover:after, .active-tooltip[data-ginger-tooltip]:after {
    transition-delay: 0.2s; /* Starting after the grow effect */
    transition-duration: 0.1s;
    transform: translateX(-50%) scaleY(1);
}
/* Tooltip + arrow */
[data-ginger-tooltip-location="left"]:before,
[data-ginger-tooltip-location="left"]:after {
    left: auto;
    right: calc(100% + 5px);
    bottom: 50%;
}
.preview-layout .button-list span:not(.has-image)[data-ginger-tooltip-location="left"]:before, .preview-layout .button-list span:not(.has-image)[data-ginger-tooltip-location="left"]:after,
.preview-layout .main-button .single-btn span:not(.has-image)[data-ginger-tooltip-location="left"]:before, .preview-layout .main-button .single-btn span:not(.has-image)[data-ginger-tooltip-location="left"]:after {
    right: calc(100% + 15px);
}
/* Tooltip */
[data-ginger-tooltip-location="left"]:before {
    transform: translate(-5px, 50%) scale(0.5);
}
[data-ginger-tooltip-location="left"]:hover:before, .active-tooltip[data-ginger-tooltip-location="left"]:before {
    transform: translate(-5px, 50%) scale(1);
}
/* Arrow */
[data-ginger-tooltip-location="left"]:after {
    border-width: 5px 0px 5px 5px;
    border-color: transparent transparent transparent rgba(55, 64, 70, 0.9);
    transform-origin: left;
    transform: translateY(50%) scaleX(0);
}
[data-ginger-tooltip-location="left"]:hover:after, .active-tooltip[data-ginger-tooltip-location="left"]:after {
    transform: translateY(50%) scaleX(1);
}
/* RIGHT */
[data-ginger-tooltip-location="right"]:before,
[data-ginger-tooltip-location="right"]:after {
    left: calc(100% + 5px);
    bottom: 50%;
}
.preview-layout .button-list span:not(.has-image)[data-ginger-tooltip-location="right"]:before,
.preview-layout .button-list span:not(.has-image)[data-ginger-tooltip-location="right"]:after,
.preview-layout .main-button .single-btn span:not(.has-image)[data-ginger-tooltip-location="right"]:before,
.preview-layout .main-button .single-btn span:not(.has-image)[data-ginger-tooltip-location="right"]:after{
    left: calc(100% + 15px);
    bottom: 50%;
}
[data-ginger-tooltip-location="right"]:before {
    transform: translate(5px, 50%) scale(0.5);
}
[data-ginger-tooltip-location="right"]:hover:before, .active-tooltip[data-ginger-tooltip-location="right"]:before {
    transform: translate(5px, 50%) scale(1);
}
[data-ginger-tooltip-location="right"]:after {
    border-width: 5px 5px 5px 0px;
    border-color: transparent rgba(55, 64, 70, 0.9) transparent transparent;
    transform-origin: right;
    transform: translateY(50%) scaleX(0);
}
[data-ginger-tooltip-location="right"]:hover:after, .active-tooltip[data-ginger-tooltip-location="right"]:after {
    transform: translateY(50%) scaleX(1);
}


/* Widget CSS */
.ginger-sticky-buttons.has-shadow .button-list .channel-btn a, .ginger-sticky-buttons.has-shadow .single-btn a, .ginger-sticky-buttons.has-shadow .main-button > a  {
    box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
    -webkit-box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
}
.ginger-sticky-buttons.has-shadow .button-list .channel-btn a:hover, .ginger-sticky-buttons.has-shadow .single-btn a:hover, .ginger-sticky-buttons.has-shadow .main-button > a:hover  {
    box-shadow: 2px 2px 8px rgba(0,0,0,0.6);
    -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.6);
}
.button-list .channel-btn {
    opacity: 0;
    display: none;
}
.button-list .channel-btn a {
    display: block;
    vertical-align: middle;
    text-align: center;
}
.ginger-sticky-buttons {
    position: absolute;
    bottom: 20px;
    right: 20px;
    top: auto;
    z-index: 1001;
}
.main-button .single-btn a {
    padding: 10px;
}
.ginger-sticky-buttons.left-position {
    right: auto;
    left: 25px;
}
.main-button {
    width: 25px;
    height: 25px;
}
.main-button a {
    display: inline-block;
    width: 25px;
    height: 25px;
    text-decoration: none;
    text-align: center;
    line-height: 25px;
    vertical-align: middle;
}
.main-button  .cta-button {
    padding: 12px;
    box-sizing: border-box;
}
.main-button a svg {
    display: inline-block;
    vertical-align: top;
    width: 100%;
    height: 100%;
}
.channel-btn {
    transition: all 0.15s linear;
    margin: 5px 0 0 0;
}
.main-button .close-gsb-button {
    /*position: absolute;
    left: 0;
    top: 0;
    transition: all 0.25s linear;*/
    padding: 12px;
    line-height: 1 !important;
}
.ginger-sticky-buttons .channel-btn span {
    display: block;
    vertical-align: middle;
    text-align: center;
}
.main-button .close-gsb-button {
    opacity: 0;
    pointer-events: none;
    transform: rotate(270deg);
    vertical-align: middle;
}
.ginger-sticky-buttons.menu-open .main-button .close-gsb-button {
    opacity: 1;
    pointer-events: inherit;
    transform: rotate(360deg);
    display: inline-block;
    vertical-align: middle;
}
.ginger-sticky-buttons.menu-open .main-button a.cta-button {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}
.hide-tooltip:after, .hide-tooltip:before {
    display: none;
}
.ginger-sticky-buttons .single-btn {
    display: none;
}
.ginger-sticky-buttons.one-channel .main-button .cta-button, .ginger-sticky-buttons.one-channel .main-button .close-gsb-button {
    display: none;
}
.ginger-sticky-buttons.one-channel  .single-btn {
    display: block;
}
span.ginger-button-icon {
    transition: all 0.20s linear;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    line-height: 1 !important;
}
.ginger-sticky-buttons span.ginger-button-icon {
    padding: 0 !important;
    background: transparent !important;
}
.ginger-front-buttons svg {
    width: 100%;
    height: 100%;
    fill: #ffffff;
}
.exit-intent {
    position: fixed;
    right: 45px;
    bottom: 45px;
    border-radius: 50%;
    background: #000000;
    transition: all 0.5s linear;
    width: 0;
    height: 0;
}

/* for front end */
.ginger-front-buttons *, .ginger-front-buttons *:after, .ginger-front-buttons *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.ginger-front-buttons {
    display: none;
}
.ginger-front-buttons.active {
    display: block;
}
.ginger-front-buttons .ginger-sticky-buttons {
    position: fixed;
    bottom: 20px;
    right: 20px;
    top: auto;
}
.ginger-front-buttons .ginger-sticky-buttons.left-position {
    right: auto;
    left: 25px;
}
.ginger-sticky-buttons .channel-btn a{
    outline: none;
    vertical-align: middle;
}
.ginger-sticky-buttons .button-list .channel-btn a {
    display: block;
    padding: 10px;
    text-decoration: none;
}
.ginger-sticky-buttons .channel-btn a.has-no-padding {
    padding: 0 !important;
}
.ginger-sticky-buttons.has-shadow .single-btn a span {
    line-height: 1 !important;
}
.ginger-sticky-buttons .cta-button.has-image svg {
    display: none;
}
.ginger-sticky-buttons .cta-button.has-image {
    padding: 0 !important;
}
.ginger-sticky-buttons .cta-button.has-image img {
    display: block;
    object-fit: cover;
}
.ginger-sticky-buttons  img {
    object-fit: cover;
}
.ginger-sticky-buttons svg {
    width: 100%;
    height: 100%;
}
.sticky-button-list .button-list.has-grid-layout {
    position: absolute;
}
.sticky-button-list .button-list.has-grid-layout .channel-btn {
    margin: 0 5px 5px 0;
}
.sticky-button-list .button-list.has-grid-layout.menu-align-left {
    right: 0;
    text-align: right;
}
.sticky-button-list .button-list.has-grid-layout.menu-align-left .channel-btn {
    margin: 0 0 5px 5px;
    float: right;
}
.sticky-button-list .button-list.has-grid-layout.menu-align-right {
    left: 0;
    text-align: left;
}
.sticky-button-list .button-list.has-grid-layout.menu-align-right .channel-btn {
    margin: 0 5px 5px 0;
    float: left;
}
.ginger-sticky-buttons.menu-open .button-list {
    pointer-events: none;
}
.ginger-sticky-buttons.menu-open .button-list {
    pointer-events: auto;
}
/* Exit intent CSS */
.ginger-front-buttons .exit-intent:before {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    content: '';
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.8);
    visibility: hidden;
    z-index: 100;
    transition: all 0.75s ease-in-out;
    -webkit-transition: all 0.75s ease-in-out;
    -moz-transition: all 0.75s ease-in-out;
}
.ginger-front-buttons .exit-intent.left-position:before {
    clip-path: circle(0px at 0px calc(100% - 0px))
}
.ginger-front-buttons .exit-intent.right-position:before {
    clip-path: circle(0px at calc(100% - 0px) calc(100% - 0px));
}
.ginger-front-buttons .exit-intent.active:before {
    visibility: visible;
    clip-path: circle(100%);
}
.ginger-social-channel.instagram-social-button {
    background: rgb(254,217,117);
    background: -moz-linear-gradient(45deg, rgb(254,217,117) 0%, rgb(250,126,30) 26%, rgb(214,41,119) 50%, rgb(150,47,191) 75%, rgb(79,90,213) 100%);
    background: -webkit-gradient(left bottom, right top, color-stop(0%, rgb(254,217,117)), color-stop(26%, rgb(250,126,30)), color-stop(50%, rgb(214,41,119)), color-stop(75%, rgb(150,47,191)), color-stop(100%, rgb(79,90,213)));
    background: -webkit-linear-gradient(45deg, rgb(254,217,117) 0%, rgb(250,126,30) 26%, rgb(214,41,119) 50%, rgb(150,47,191) 75%, rgb(79,90,213) 100%);
    background: -o-linear-gradient(45deg, rgb(254,217,117) 0%, rgb(250,126,30) 26%, rgb(214,41,119) 50%, rgb(150,47,191) 75%, rgb(79,90,213) 100%);
    background: -ms-linear-gradient(45deg, rgb(254,217,117) 0%, rgb(250,126,30) 26%, rgb(214,41,119) 50%, rgb(150,47,191) 75%, rgb(79,90,213) 100%);
    background: linear-gradient(45deg, rgb(254,217,117) 0%, rgb(250,126,30) 26%, rgb(214,41,119) 50%, rgb(150,47,191) 75%, rgb(79,90,213) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fed975', endColorstr='#4f5ad5', GradientType=1 );
}
.main-action-button {
    position: relative;
}
.close-gsb-action-button, .gsb-main-action-button {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    bottom: 0;
    z-index: 1001;
}
.gsb-main-action-button {
    z-index: 1111;
}
.main-button.hide-tooltip .gsb-main-action-button {
    z-index: 999;
}
.main-button a {
    transition: all linear 0.20s;
    -webkit-transition: all linear 0.20s;
    -moz-transition: all linear 0.20s;
}

.ginger-sticky-buttons.has-no-close-button:not(.one-channel) .main-button {
    display: none !important;
}
.ginger-sticky-buttons.horizontal-menu:not(.one-channel) .button-list, .ginger-sticky-buttons.horizontal-menu:not(.one-channel) .main-button {
    display: flex;
}
.ginger-sticky-buttons.horizontal-menu:not(.one-channel) .main-button, .ginger-sticky-buttons.horizontal-menu:not(.one-channel) .button-list .channel-btn {
    margin: 0 0 0 5px;
}
.ginger-sticky-buttons.horizontal-menu:not(.one-channel) .button-list .channel-btn, .ginger-sticky-buttons.horizontal-menu.left-position:not(.one-channel) .main-button {
    margin: 0 5px 0 0 ;
}
.ginger-sticky-buttons.horizontal-menu:not(.one-channel) .sticky-button-list {
    display: flex;
}
.ginger-sticky-buttons.horizontal-menu.left-position:not(.one-channel) .main-button {
    order: 1;
}
.ginger-sticky-buttons.horizontal-menu {
    width: auto !important;
}
.ginger-sticky-buttons.horizontal-menu.left-position:not(.one-channel) .button-list {
    order: 2;
    flex-direction: row-reverse;
}
.preview-layout .ginger-sticky-buttons .button-list [data-ginger-tooltip][data-ginger-tooltip-location="top"]:hover:before {
    transition-delay: 0s;
    transform: translate(-50%, -15px) scale(1);
}
.preview-layout .ginger-sticky-buttons .button-list [data-ginger-tooltip][data-ginger-tooltip-location="top"]:hover:after {
    transform: translate(-50%, -10px) scale(1);
}