:root {
    --animationSlideDistance: 20px;
    --animationDuration: 450ms;
    --animationFunction: ease
}

@keyframes shake {
    10%,90% {
        transform: translate3d(-1px,0,0)
    }

    20%,80% {
        transform: translate3d(2px,0,0)
    }

    30%,60% {
        transform: translate3d(-3px,0,0)
    }

    45% {
        transform: translate3d(3px,0,0)
    }
}

@keyframes slideDown {
    0% {
        transform: translateY(calc(-1 * var(--animationSlideDistance)))
    }

    to {
        transform: translateY(0)
    }
}

@keyframes slideLeft {
    0% {
        transform: translateX(var(--animationSlideDistance))
    }

    to {
        transform: translateX(0)
    }
}

@keyframes slideUp {
    0% {
        transform: translateY(var(--animationSlideDistance))
    }

    to {
        transform: translateY(0)
    }
}

@keyframes slideRight {
    0% {
        transform: translateX(calc(-1 * var(--animationSlideDistance)))
    }

    to {
        transform: translateX(0)
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

@keyframes zoomIn {
    0% {
        transform: scale(.8);
        opacity: 0
    }

    to {
        transform: scale(1);
        opacity: 1
    }
}

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

    to {
        transform: scale(1.15);
        opacity: 0
    }
}

@keyframes scaleBackground {
    0% {
        transform: scale(1.02)
    }

    to {
        transform: translateZ(0)
    }
}

@keyframes sSpin {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(1turn)
    }
}

@keyframes circularLoader {
    0% {
        stroke-dasharray: 1,200;
        stroke-dashoffset: 0
    }

    50% {
        stroke-dasharray: 89,200;
        stroke-dashoffset: -35
    }

    to {
        stroke-dasharray: 89,200;
        stroke-dashoffset: -124
    }
}

@keyframes checkAppearance {
    0% {
        clip-path: inset(0 100% 0 0)
    }

    to {
        clip-path: inset(0 0 0 0)
    }
}

@keyframes placeholderBackground {
    0% {
        background-position: 200% 0;
        opacity: .05
    }

    50% {
        opacity: .15
    }

    to {
        background-position: -200% 0;
        opacity: .05
    }
}

.circle-loader {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 4px;
    transform-origin: center center
}

.circle-loader__bg {
    opacity: .3
}

.circle-loader__path {
    stroke-dasharray: 150,200;
    stroke-dashoffset: 140;
    stroke-linecap: round
}

.circle-loader.infinite .circle-loader__path {
    animation: circularLoader 1.5s ease-in-out infinite reverse
}

.b_block.wait-animation .component-bg .image-holder {
    opacity: .8;
    transform: scale(1.02);
    transition: transform 1s cubic-bezier(.21,.67,.58,1),opacity .5s cubic-bezier(.42,0,.79,.33)
}

.b_block.wait-animation .transition-target {
    opacity: 0;
    transform: translateY(15px,0,0);
    transition: none!important
}

.b_block.wait-animation .layout-type-header {
    transform: translateY(5px)
}

.b_block.wait-animation:not(.was-view) .container-fluid>*,.b_block.wait-animation:not(.was-view)>* {
    opacity: 0
}

.b_block.wait-animation:not(.was-view) .component-bg,.b_block.wait-animation:not(.was-view) .container-fluid {
    opacity: 1!important
}

.b_block.wait-animation:not(.was-view) .transition-target {
    transition: none!important
}

.b_block.wait-animation.was-view .component-bg .image-holder {
    opacity: 1;
    transform: none
}

.b_block.wait-animation.was-view .transition-target {
    transition-property: transform,opacity!important;
    transition-duration: 1s,.5s!important;
    transition-timing-function: cubic-bezier(.21,.67,.58,1)!important;
    transition-delay: var(--transitionDelay,0)!important
}

.b_block.wait-animation.was-view .layout-type-header {
    transition-duration: .4s,.18s!important
}

.b_block.wait-animation.was-view .transition-target {
    transform: none;
    opacity: 1
}

.m_modal.animation-forwards .modal-data {
    animation: fadeIn var(--animationDuration) var(--animationFunction) both
}

.m_modal.animation-forwards .component-bg .image-holder {
    animation: scaleBackground var(--animationDuration) var(--animationFunction) both
}

.m_modal.animation-forwards .modal-content {
    animation: var(--animationName,slideUp) var(--animationDuration) var(--animationFunction) both var(--animationDirection,normal)
}

.m_modal.animation-backwards .modal-data {
    animation: fadeOut var(--animationDuration) var(--animationFunction) both
}

.m_modal.animation-backwards .component-bg .image-holder {
    animation: scaleBackground var(--animationDuration) var(--animationFunction) both reverse
}
