/*-----------*/
/*** EFFETTI ***/

/*** transizioni ***/
.transition100 {transition: all 100ms ease-in-out;}
.transition250 {transition: all 100ms ease-in-out;}
.transition500 {transition: all 100ms ease-in-out;}

/*** underline ***/
.underline {
    /* I don't know why this is needed, I just added it and it worked in IE Edge. If we remove this width, the gradient breaks in IE Edge */
    width: calc(100%);
    background-image: linear-gradient(transparent calc(100% + 1px), black 1px);
    background-repeat: no-repeat;
    background-size: 0% 100%;
    transition: background-size 250ms;
    padding-bottom:3px;
    background-position: left bottom;
}

    .underline.white,
    .c_bianco .underline {
        background-image: linear-gradient(transparent calc(100% - 1px), white 1px);
    }
    
    li.active a .underline,
    a.active .underline {
        background-size: 50% 100%;
    }

    a:hover .underline,
    .underline.noEffect {
        background-size: 100% 100%;
        color: lime;
    }



.underline_reverse {
    /* I don't know why this is needed, I just added it and it worked in IE Edge. If we remove this width, the gradient breaks in IE Edge */
    width: calc(100%);
    background-image: linear-gradient(transparent calc(100% - 2px), black 2px);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    transition: all .5s;
    padding-bottom:0px;
    background-position: right bottom;
}

    .c_bianco .underline_reverse {
        background-image: linear-gradient(transparent calc(100% - 2px), white 2px);
    }

    a:hover.button .underline,
    a:hover.button .underline_reverse {
        background-size: 50% 100%;
        color:#004AFF;
        background-image: linear-gradient(transparent calc(100% - 2px), #004AFF 2px);
    } 

    a:hover.c_bianco .underline,
    a:hover.c_bianco .underline_reverse {
        color: #ffffff;
        background-image: linear-gradient(transparent calc(100% - 2px), #ffffff 2px);
    }

/*** zoom ***/
.self-hover-zoom {
	transition: transform 350ms ease-in-out;
}

a.active .self-hover-zoom,
.self-hover-zoom:hover, 
a:hover .self-hover-zoom {
	transform: scale(1.05);
    /*transition: transform 300ms ease-in;*/

}