/*loading*/
.loading-overlay {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    bottom: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.5);
    z-index: 100;
}

.loading-overlay i {
    font-size: 60px;
    color: #007a82;
}

/*Real animations*************************************************************/

/*fade in*/
.fade-in {
    -webkit-animation: scale-in 0.5s ease-in 1;
    animation: fade-in 0.5s ease-in 1;
    animation-fill-mode: forwards;
    opacity: 0;
}

.fade-in-fast {
    -webkit-animation: scale-in 0.25s ease-in 1;
    animation: fade-in 0.25s ease-in 1;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


.slide-left-in {
    -webkit-animation: slide-left-in 0.3s ease-out 1;
    animation: slide-left-in 0.3s ease-out 1;
    animation-fill-mode: forwards;
    left:100%;
    opacity:0;
}

@keyframes slide-left-in {
    0% {
        opacity: 0;
        left:100%;
    }

    100% {
        opacity: 1;
        left:0;
    }
}

@-webkit-keyframes slide-left-in {
    0% {
        opacity: 0;
        left: 100%;
    }

    100% {
        opacity: 1;
        left: 0;
    }
}

.slide-right-in {
    -webkit-animation: slide-right-in 0.3s ease-out 1;
    animation: slide-right-in 0.3s ease-out 1;
    animation-fill-mode: forwards;
    left: -100%;
    opacity: 0;
}

@keyframes slide-right-in {
    0% {
        opacity: 0;
        left: -100%;
    }

    100% {
        opacity: 1;
        left: 0;
    }
}

@-webkit-keyframes slide-right-in {
    0% {
        opacity: 0;
        left: -100%;
    }

    100% {
        opacity: 1;
        left: 0;
    }
}


.slide-down {
    -webkit-animation: slide-down 0.3s ease-in 1;
    animation: slide-downn 0.3s ease-in 1;
    animation-fill-mode: forwards;
    top: -100%;
    opacity: 0;
}

@keyframes slide-down {
    0% {
        opacity: 0;
        top: -100%;
    }

    100% {
        opacity: 1;
        top: 0;
    }
}

@-webkit-keyframes slide-down {
    0% {
        opacity: 0;
        top: -100%;
    }

    100% {
        opacity: 1;
        top: 0;
    }
}

.pop{
    -webkit-animation: pop 0.25s ease-in 1;
    animation: pop 0.25s ease-in 1;
    animation-fill-mode: forwards;
    transform:scale(0);
    opacity: 0;
}

@keyframes pop {
    0% {
        opacity: 0;
        transform: scale(0);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@-webkit-keyframes pop {
    0% {
        opacity: 0;
        transform: scale(0);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}




.fade-translate-logo-tooltip{
    -webkit-animation: fade-translate-logo-tooltip 0.3s ease-out 1;
    animation: fade-translate-logo-tooltip 0.3s ease-out 1;
    animation-fill-mode: forwards;
    transform:translateX(20px);
    opacity: 0;
}

@keyframes fade-translate-logo-tooltip {
    0% {
        opacity:0;
        transform:translate(60px, -50%);
        box-shadow: none;
    }

    100% {
        opacity:1;
        transform:translate(40px, -50%);
    }
}

@-webkit-keyframes fade-translate-logo-tooltip {
    0% {
        opacity:0;
        transform:translate(60px, -50%);
        box-shadow: none;
    }

    100% {
        opacity:1;
        transform:translate(40px, -50%);
    }
}



.search-slide-down {
    -webkit-animation: search-slide-down 0.3s;
    animation: search-slide-down 0.3s;
    animation-fill-mode: forwards;
    transform: translate(-225px, -20px);
    opacity: 0;
}

@keyframes search-slide-down {
    0% {
        opacity: 0;
        transform: translate(-226px, -20px);
    }

    100% {
        opacity: 1;
        transform: translate(-226px, 0);
    }
}

@-webkit-keyframes search-slide-down {
    0% {
        opacity: 0;
        transform: translate(-226px, -20px);
    }

    100% {
        opacity: 1;
        transform: translate(-226px, 0);
    }
}