.un {
    display: inline-block;
    cursor:pointer;

        &::after {
            content: '';
            width: 0px;
            height: 1px;
            display: block;
            background: #FFDF00;
            
        }

        &:hover::after {
            width: 100%;
            transition: all 300ms ease-in;
        }
    }

.font_color:hover{
    color:#FFDF00;
    transition: color 300ms ease-in;
}

.pointer{
    cursor: pointer;
}

.gold_hover:hover{
    box-shadow: 0px 0px 0px 2px #FFDF00;
    transition: box-shadow ease-in 250ms;
}

.gold_background:hover{
    background-color: #FFDF00;
    transition: background-color 300ms ease-in;
    cursor: pointer;
}

.size:hover{
    transform: scale(1.05);
    transition: transform 300ms ease-in;
}
.size2:hover{
    transform: scale(1.025);
    transition: transform 300ms ease-in;
}

.bold:hover{
    font-weight:bold;
    transition: font-weight 300ms ease-in;
}

.pulse:hover{
    box-shadow: 0 0 0 0 rgba(255, 177, 66, 1);
    animation: pulse-yellow 2s infinite;
}

@keyframes pulse-yellow {
    0% {
        transform: scale(1.05);
        box-shadow: 0 0 0 0 rgba(255,223,0, .7);
        border: 2px solid #FFDF00;
    }
    
    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(255,223,0, 0);
        border: 2px solid #FFDF00;
    }
    
    100% {
        transform: scale(1.05);
        box-shadow: 0 0 0 0 rgba(255,223,0, 0);
        border: 2px solid #FFDF00;
    }
}


.pulse2{
    border: 2px solid #191919;
}

.pulse2:hover{
    box-shadow: 0 0 0 0 rgba(255, 177, 66, 1);
    animation: pulse-no-size 2s infinite;
}

@keyframes pulse-no-size{
    0% {
        box-shadow: 0 0 0 0 rgba(255,223,0, .7);
        border: 2px solid #FFDF00;
    }
    
    70% {
        box-shadow: 0 0 0 10px rgba(255,223,0, 0);
        border: 2px solid #FFDF00;
    }
    
    100% {
        box-shadow: 0 0 0 0 rgba(255,223,0, 0);
        border: 2px solid #FFDF00;
    }    
}

.fade_in{
    animation: opacity 300ms linear;
}
@keyframes opacity{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}


.slide_in_animation{
    -webkit-animation: moveInLeft .3s ease-out;
    animation: moveInLeft .3s ease-out;
}
@keyframes moveInLeft {
    0% {
    opacity: 0;
    transform: translateX(30px);
    }
    100% {
    opacity: 1;
    transform: translateX(0px);
    }
}

.popin {
    animation: popin .55s ease-out;
    -webkit-animation: popin .55s ease-out;
}

@keyframes popin {
    from{
        transform:translateY(100px) scale(0);
    }
    80%{
        transform:translateY(00px) scale(1);
    }
    to{
        transform:translateY(00px) scale(1);
    }
}

@-webkit-keyframes popin {
    from{
        transform:translateY(100px) scale(0);
    }
    80%{
        transform:translateY(00px) scale(1);
    }
    to{
        transform:translateY(00px) scale(1);
    }
}