﻿
.t2 {
    transition: all cubic-bezier(.6,.18,.85,.94) .2s;
    -moz-transition: all cubic-bezier(.6,.18,.85,.94) .2s;
    -webkit-transition: all cubic-bezier(.6,.18,.85,.94) .2s;
    -o-transition: all cubic-bezier(.6,.18,.85,.94) .2s;
}

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.flex-center-y {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.flex-center-x {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}



.overlay {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.69);
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all cubic-bezier(.6,.18,.85,.94) .2s;
}

    .overlay.open {
        opacity: 1;
        visibility: visible;
    }

    .overlay.loading .overlay-loading {
        display: block;
    }

    .overlay.disableClick {
        /* pointer-events: none !important; */
    }

.overlay-loading {
    width: 150px;
    height: 150px;
    background-color: #fff;
    border-radius: 50%;
    border: 9px solid #dce0f1;
    position: relative;
    display: none;
}

    .overlay-loading::after {
        content: "";
        position: absolute;
        left: -3px;
        top: -3px;
        height: calc(50% + 3px);
        right: -3px;
        border-top-left-radius: 200px;
        border-top-right-radius: 200px;
        border: 5px solid #03a9f4;
        border-bottom: 0;
        animation: 1.5s linear infinite rotate;
        transform-origin: 50% 100%;
    }

    .overlay-loading svg {
        width: auto;
        height: auto;
        position: absolute;
        left: 17%;
        top: 16%;
        margin-left: -20px;
        margin-top: -18px;
        animation: 1.5s ease-in-out infinite logoChange;
    }

@keyframes rotate {
    from {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(360deg)
    }
}

@keyframes logoChange {
    0% {
        transform: scale(.8)
    }

    50% {
        transform: scale(1)
    }

    100% {
        transform: scale(.8)
    }
}

