/********** - ANIMACIONES - **********/
.fade-out-in{
    animation-name: FadeOutIn;
    animation-fill-mode: forwards;
    animation-duration: 1.2s;
}
.showing{
    display: block !important;    
    animation-name: Showing;
    animation-fill-mode: forwards;
    animation-duration: 0s;    
}

.hidding{   
    animation-name: Hidding;
    animation-fill-mode: forwards;
    animation-duration: 0s;    
}

.loader1 {
    width: 50px;
    padding: 8px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #CCCCCC;
    --_m: 
      conic-gradient(#0000 10%,#000),
      linear-gradient(#000 0 0) content-box;
    -webkit-mask: var(--_m);
            mask: var(--_m);
    -webkit-mask-composite: source-out;
            mask-composite: subtract;
    animation: loader1 1s infinite linear;
}


.move-left-slide{
    animation-name: MoveLeftSlide;
    animation-fill-mode: both;
    animation-duration: .5s;   
}

.postick-detail-expand{   
    animation-name: PostickDetailExpand;
    animation-fill-mode: forwards;
    animation-duration: .35s;   
}

.traslate-l-r-20{
    animation-name: TraslateLR20;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-duration: 1s;      
}

@keyframes FadeOutIn {
    0%{
        opacity: 1;
    }
    50%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

@keyframes Showing {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

@keyframes Hidding {
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        display: none;
    }
}

@keyframes loader1 {to{transform: rotate(1turn)}}

@keyframes MoveLeftSlide {
    0%{
        margin-left: 0;
    }
    100%{
        margin-left: -50vh;
    }
}

@keyframes PostickDetailExpand {
    0%{
        opacity: 0;
        width: 50vh;
        height: 80vh;
    }

    100%{
        height: 100%;
        width: 100%;        
        opacity: 1;
    }    
}

@keyframes TraslateLR20 {
    0%{
        opacity: 1;
        transform: scale(1);
        right: 0;
    }

    100%{
        opacity: 0;
        transform: scale(.8);
        right: -25px;
    }    
}