﻿#widget-campagna-esterna {
    background: #fff url(../images/widget-campagna-esterna-logo.svg) no-repeat 10px 10px;
    border: 0;
    border-bottom-left-radius: 10px;
    box-shadow: #727272 0 -1px 2px;
    color: #006F34;
    font-size: 1.875rem;
    font-weight: 700;
    height: 60px;
    /* Per rendere il widget accessibile viene commentata la seguente in quanto "Il testo viene ritagliato quando viene ridimensionato" */
    /* overflow: hidden; */
    padding: 10px 10px 10px 56px;
    position: absolute;
    right: 0;
    top: 126px;
    transition: height .3s, width .3s;
    width: 160px; /* 150px;*/
    z-index: 1;
}
#widget-campagna-esterna:focus {
    box-shadow: 0 0 0 3px #264d7a;
    outline: 0;
}
#widget-campagna-esterna.is-open {
    _background: url(../images/widget-campagna-esterna-bg.png) no-repeat 0 0;
    background: url(../images/widget-campagna-esterna-bg-2024-430x155.png) no-repeat 0 0;
    height: 155px;
    width: 430px;
}

#widget-campagna-esterna #testo-uniti,
#widget-campagna-esterna #testo-unici {
    left: 56px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

#testo-uniti span.horizontal-spacer {
    color: transparent;
    font-size: .7rem;
    position: static;
}

@keyframes morphing1 {
    0% {filter: blur(0); opacity:1;}
    40% {filter: blur(0); opacity:1;}
    50% {filter: blur(.5rem); opacity:0;}
    90% {filter: blur(.5rem); opacity:0;}
    100% {filter: blur(0); opacity:1;}
}
@keyframes morphing2 {
    0% {filter: blur(.5rem); opacity:0;}
    40% {filter: blur(.5rem); opacity:0;}
    50% {filter: blur(0); opacity:1;}
    90% {filter: blur(0); opacity:1;}
    100% {filter: blur(.5rem); opacity:0;}
}
@keyframes claim-is-visible {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

#testo-uniti.is-animated {
    animation-duration: 10s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: morphing1;
}
#testo-unici.is-animated {
    animation-duration: 10s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: morphing2;
}

#widget-campagna-esterna.is-open #testo-uniti,
#widget-campagna-esterna.is-open #testo-unici {
    display: none;
}

#widget-campagna-esterna #contenuti-hover {
    display: none;
}
#widget-campagna-esterna.is-open #contenuti-hover,
#widget-campagna-esterna #contenuti-hover span {
    display: block;
}

#widget-campagna-esterna #contenuti-hover #claim {
    color: #fff;
    font-size: 1.875rem;
    font-weight: 700;
    margin-bottom: 10px;
    opacity: 0;
    text-align: left;
}

#widget-campagna-esterna .cta.testuale.bianca {
    background-image: url(../images/cta-testuale-white-arrow.svg);
    color: #fff !important; 
    margin-right: 10px;
    opacity: 0;
}
#widget-campagna-esterna .cta.testuale.bianca:focus,
#widget-campagna-esterna .cta.testuale.bianca:hover {
    text-decoration: underline;
}

#widget-campagna-esterna.is-open #contenuti-hover #claim,
#widget-campagna-esterna.is-open .cta.testuale.bianca {
    animation-delay: .1s;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-name: claim-is-visible;
}

@media (max-width: 1199px) {
    #widget-campagna-esterna {
        top: 96px;
    }
}

@media (max-width: 767px) {
    #widget-campagna-esterna {
        display: none;
    }
}