@keyframes jelloAnim {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    30% {
        -webkit-transform: scale3d(0.75, 1.25, 1);
        transform: scale3d(0.75, 1.25, 1);
    }

    40% {
        -webkit-transform: scale3d(1.25, 0.75, 1);
        transform: scale3d(1, 0.75, 1);
    }

    50% {
        -webkit-transform: scale3d(0.85, 1.15, 1);
        transform: scale3d(0.85, 1.15, 1);
    }

    65% {
        -webkit-transform: scale3d(1.05, 0.95, 1);
        transform: scale3d(1.05, 0.95, 1);
    }

    75% {
        -webkit-transform: scale3d(0.95, 1.05, 1);
        transform: scale3d(0.95, 1.05, 1);
    }

    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

.jello {
    animation: jelloAnim 2s ease 0s infinite normal forwards;
}

@keyframes shine {
    0% {
        transform: translateX(-30px) rotate(-25deg);
    }

    100% {
        transform: translateX(250px) rotate(-25deg);
    }
}

@keyframes mobileShine {
    0% {
        transform: translateX(-30px) rotate(-25deg);
    }

    100% {
        transform: translateX(550px) rotate(-25deg);
    }
}

.shine {
    overflow: hidden;
}

.shine:after {
    content: '';
    display: block;
    width: 20px;
    height: 175%;
    background: rgb(255,255,255);
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 25%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 75%, rgba(255,255,255,0) 100%);
    opacity: 0.5;
    position: absolute;
    top: -20px;
    left: 0;
    animation: shine 5s infinite;
}

.mobile .shine:after {
    animation: mobileShine 5s infinite;
}

@-webkit-keyframes waves {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(4);
        opacity: 0;
    }
}

.delay1 {
    -webkit-animation: waves 3s linear infinite;
    animation: waves 3s linear infinite;
    /*-webkit-animation-delay: 0.1s;*/
    /*animation-delay: 0.1s;*/
}

@keyframes pulse-red {
    0% {
        /*transform: scale(0.90);*/
        -webkit-box-shadow: 0 0 0 0 rgba(255, 82, 82, 0.7);
        box-shadow: 0 0 0 0 rgba(255, 82, 82, 0.7);
    }

    70% {
        /*transform: scale(1);*/
        -webkit-box-shadow: 0 0 0 10px rgba(255, 82, 82, 0);
        box-shadow: 0 0 0 10px rgba(255, 82, 82, 0);
    }

    100% {
        /*transform: scale(0.90);*/
        -webkit-box-shadow: 0 0 0 0 rgba(255, 82, 82, 0);
        box-shadow: 0 0 0 0 rgba(255, 82, 82, 0);
    }
}

.pulseRed {
    animation: pulse-red 2s infinite;
}

@keyframes fade {
    0% {
        opacity: 0;
        visibility: hidden;

    }

    100% {
        opacity: 1;
        visibility: visible;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
        visibility: visible;
    }

    100% {
        visibility: hidden;
        opacity: 0;
    }
}

.fadeIn {
    animation: fade 0.8s;
}

.fadeOut {
    animation: fadeOut 0.8s;
}

@keyframes slideIn {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes slideOut {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}

.slide-in {
    animation: slideIn 0.5s ease-in-out forwards;
    transition: transform 0.5s ease-in-out;
}

.slide-out {
    animation: slideOut 0.5s ease-in-out forwards;
    transition: transform 0.5s ease-in-out;
}

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

    100% {
        transform: scale(1.0);
    }
}

.popupAnim {
    animation-name: popup;
    animation-duration: 0.5s;
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation-fill-mode: forwards;
}

@keyframes topFade {
    from {
        opacity: 1;
        top: 0;
    }

    to {
        opacity: 0;
        top: -100%;
    }
}

.topFadeAnimation {
    animation-name: topFade;
    animation-duration: 5s;
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation-fill-mode: forwards;
    transition: top 5s, opacity 5s;
}

@keyframes botFade {
    from {
        opacity: 0;
        top: -100%;
    }

    to {
        opacity: 1;
        top: 0;
    }
}

.botFadeAnimation {
    animation-name: botFade;
    animation-duration: 2s;
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation-fill-mode: forwards;
    transition: top 2s, opacity 2s;
}

@-webkit-keyframes marked {
    0% {
        box-shadow: 0px 0px 0px 0px #fe4500;
    }
    100% {
        box-shadow: 0px 0px 0px 20px rgba(0, 0, 0, 0);
    }
}
@keyframes marked {
    0% {
        box-shadow: 0px 0px 0px 0px #fe4500;
    }
    100% {
        box-shadow: 0px 0px 0px 20px rgba(0, 0, 0, 0);
    }
}

.focusOnElement {
    animation-name: marked;
    animation-iteration-count: infinite;
    animation-duration: 2s;
}

@keyframes textclip {
    to {
        background-position: 200% center;
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.watch_for_documents_end {
    height: 10px;
    margin: auto;
}

.watch_for_documents_end.show {
    transform: translate(-50%, -50%);
    width: 5rem;
    height: 5rem;
    border: 5px solid #f3f3f3;
    border-top: 5px solid #07503f;
    border-radius: 100%;
    animation: spin 1s infinite linear;
}

@keyframes starAnimation {
    0% {
        transform: rotate(0deg) scale(0.6);
        opacity: 0.1;
    }

    50% {
        transform: rotate(180deg) scale(1);
        opacity: 0.9;
    }

    100% {
        transform: rotate(360deg) scale(0.6);
        opacity: 0.1;
    }
}

@-webkit-keyframes pulse {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(89, 92, 92, 0.4);
    }
    70% {
        -webkit-box-shadow: 0 0 0 5vh rgba(89, 92, 92, 0);
    }
    100% {
        -webkit-box-shadow: 0 0 0 0 rgba(89, 92, 92, 0);
    }
}

@keyframes pulse {
    0% {
        -moz-box-shadow: 0 0 0 0 rgba(89, 92, 92, 0.4);
        box-shadow: 0 0 0 0 rgba(89, 92, 92, 0.4);
    }
    70% {
        -moz-box-shadow: 0 0 0 5vh rgba(89, 92, 92, 0);
        box-shadow: 0 0 0 5vh rgba(89, 92, 92, 0);
    }
    100% {
        -moz-box-shadow: 0 0 0 0 rgba(89, 92, 92, 0);
        box-shadow: 0 0 0 0 rgba(89, 92, 92, 0);
    }
}

.shake {
    animation: shake-animation 1.72s ease infinite;
}

@keyframes shake-animation {
    0% { transform:rotate(0) }
    1.78571% { transform: rotate(5deg)}
    10.57143% { transform: rotate(-6deg) }
    15.35714% {  transform: rotate(5deg) }
    20.14286% { transform: rotate(-6deg) }
    25.92857% { transform: rotate(5deg) }
    30.71429% { transform:rotate(0) }
    100% { transform:rotate(0) }
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes appear {
    0% {
        opacity: 0;
        transform: scale(1.5);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.blinking-animation {
    animation: blink 2s infinite;
}

@keyframes blink {
    0%, 20% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    80%, 100% {
        opacity: 1;
    }
}


@keyframes pulseBlink {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

@-webkit-keyframes focus-in-contract {
    0% {
        letter-spacing: 0.25em;
        -webkit-filter: blur(12px);
        filter: blur(12px);
        opacity: 0;
    }
    100% {
        -webkit-filter: blur(0px);
        filter: blur(0px);
        opacity: 1;
    }
}

@keyframes focus-in-contract {
    0% {
        letter-spacing: 0.25em;
        -webkit-filter: blur(12px);
        filter: blur(12px);
        opacity: 0;
    }
    100% {
        -webkit-filter: blur(0px);
        filter: blur(0px);
        opacity: 1;
    }
}

.dig {
    top: 0 !important;
    left: 0 !important;
    z-index: 2;
    animation: dig 2s linear infinite;
}

.dirt {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) rotate(-20deg);
    height: 20px;
    width: 20px;
    background-color: #704214;
    background-image: linear-gradient(to bottom, #704214, #99692c);
    background-size: 100% 60%;
    background-position: center bottom;
    border-radius: 50%;
    animation: dirt 2s ease-in-out infinite;
    box-shadow: 0 2px 2px rgba(0,0,0,0.5), inset 0 2px 2px rgba(255,255,255,0.5);
    opacity: 0.6;
}

.dirt:nth-child(1) {
    height: 12px;
    width: 12px;
    bottom: 5px;
    left: calc(90% + 6px);
    border-radius: 50% 0 50% 50%;
    opacity: 0.8;
    box-shadow: 0 1px 1px rgba(0,0,0,0.3), inset 0 1px 1px rgba(255,255,255,0.5);
}

.dirt:nth-child(2) {
    height: 10px;
    width: 10px;
    bottom: 0;
    left: calc(80% - 20px);
    border-radius: 50% 0 50% 50%;
    opacity: 0.5;
    box-shadow: 0 2px 2px rgba(0,0,0,0.3), inset 0 2px 2px rgba(255,255,255,0.5);
}

.dirt:nth-child(3) {
    height: 7px;
    width: 7px;
    bottom: 0;
    left: calc(70% + 9px);
    border-radius: 50% 50% 0 0;
    opacity: 0.7;
    box-shadow: 0 3px 3px rgba(0,0,0,0.3), inset 0 3px 3px rgba(255,255,255,0.5);
}

.dirt:nth-child(4) {
    height: 5px;
    width: 5px;
    bottom: 10px;
    left: calc(50% + 10px);
}

@keyframes dig {
    0% {
        transform: translateY(0) translateX(0) rotate(0);
    }
    25% {
        transform: translateY(10px) translateX(10px) rotate(-10deg);
    }
    50% {
        transform: translateY(15px) translateX(20px) rotate(-20deg);
    }
    75% {
        transform: translateY(10px) translateX(10px) rotate(-30deg);
    }
    100% {
        transform: translateY(0) translateX(0) rotate(0);
    }
}

@keyframes dirt {
    0% {
        opacity: 1;
        transform: translateX(-50%) rotate(-20deg) translateY(0px);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) rotate(-20deg) translateY(-60px);
    }
}

.hammering {
    animation: hammering 1s infinite !important;
    offset-rotate: none !important;
    offset-path: none !important;
    transform-origin: bottom center;
    z-index: 2;
}

@keyframes hammering {
    0% {
        transform: rotateZ(0deg);
    }
    20% {
        transform: rotateZ(-10deg);
    }
    40% {
        transform: rotateZ(5deg);
    }
    60% {
        transform: rotateZ(-5deg);
    }
    80% {
        transform: rotateZ(3deg);
    }
    100% {
        transform: rotateZ(0deg);
    }
}

.log_animation {
    animation: log-animation 2s ease-in-out infinite;
}
@keyframes log-animation {
    0% {
        transform: translateY(-5px);
    }
    50% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-5px);
    }
}

.idle-bounce {
    animation: idleBounce 2s infinite ease-in-out;
}

@keyframes idleBounce {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    25% {
        transform: translateY(-5px) rotate(-1deg);
    }
    50% {
        transform: translateY(0px) rotate(1deg);
    }
    75% {
        transform: translateY(-3px) rotate(0deg);
    }
}

.pointer-animation {
    animation: pointerAnimation 1.25s ease-in-out infinite;
}
@keyframes pointerAnimation {
    0% {
        transform: translateY(-1em);
    }
    50% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-1em);
    }
}


.disabledBtn {
    filter: grayscale(1);
    cursor: default;
    pointer-events: none;
}

.spinnerLoader {
    top: 20%;
    left: 4%;
    transform: translate(-50%, -50%);
    position: absolute;
    width: 2rem;
    height: 2rem;
    border: 6px solid #f3f3f3;
    border-top: 6px solid #07503f;
    border-radius: 100%;
    margin: auto;
    visibility: hidden;
    animation: spin 1s infinite linear;
}
.spinnerLoader.show {
    visibility: visible;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.mobile .spinnerLoader {
    top: 12%;
    left: 1%;
    width: 6rem;
    height: 6rem;
    border: 11px solid #f3f3f3;
    border-top: 11px solid #07503f;
}

.beatLoader {
    position: relative;
    width: 85px;
    height: 50px;
    background-repeat: no-repeat;
    background-image: linear-gradient(#FFF 50px, transparent 0),
    linear-gradient(#FFF 50px, transparent 0),
    linear-gradient(#FFF 50px, transparent 0),
    linear-gradient(#FFF 50px, transparent 0),
    linear-gradient(#FFF 50px, transparent 0),
    linear-gradient(#FFF 50px, transparent 0);
    background-position: 0px center, 15px center, 30px center, 45px center, 60px center, 75px center, 90px center;
    animation: rikSpikeRoll 0.65s linear infinite alternate;
}

.beatLoader.center, .loader.center {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.loaderProgressBox {
	background: #ccc;
	border: 0.25em solid black;
	border-radius: 1em;
	box-shadow: 0 0 0.5em #fff8, 0 0 0.25em #0008 inset;
	box-sizing: content-box !important;
	height: 2.5em;
	padding: 0.25em;
}

.foundation-style .no-style .loaderProgressBox>div.loaderProgressBar {
	box-sizing: border-box !important;
}

.loaderProgressBar {
	background: linear-gradient(60deg, #c41e3a 15%, #900 85%); 
	border: 0.25em solid black;
	border-radius: 1em;
	box-shadow: 0 0.25em 0.25em #fff8 inset, 0 -0.25em 0.25em #0008 inset;
	content: "";
	height: 2.5em;
	margin: 0;
	min-width: 2.5em;
	transition: width 0.2s ease-in-out;
	width: 0%;
}
.loader.size-xl {
    zoom: 2;
}

@keyframes rikSpikeRoll {
    0% { background-size: 10px 3px;}
    16% { background-size: 10px 50px, 10px 3px, 10px 3px, 10px 3px, 10px 3px, 10px 3px}
    33% { background-size: 10px 30px, 10px 50px, 10px 3px, 10px 3px, 10px 3px, 10px 3px}
    50% { background-size: 10px 10px, 10px 30px, 10px 50px, 10px 3px, 10px 3px, 10px 3px}
    66% { background-size: 10px 3px, 10px 10px, 10px 30px, 10px 50px, 10px 3px, 10px 3px}
    83% { background-size: 10px 3px, 10px 3px,  10px 10px, 10px 30px, 10px 50px, 10px 3px}
    100% { background-size: 10px 3px, 10px 3px, 10px 3px,  10px 10px, 10px 30px, 10px 50px}
}

.flaskLoader {
    width: 24px;
    height: 80px;
    display: block;
    border: 1px solid #FFF;
    border-radius: 0 0 50px 50px;
    position: relative;
    box-shadow: 0px 0px #FF3D00 inset;
    background-image: linear-gradient(#FF3D00 100px, transparent 0);
    background-position: 0px 0px;
    background-size: 26px 80px;
    background-repeat: no-repeat;
    box-sizing: border-box;
    animation: animloader 6s linear infinite;
}
.flaskLoader::after {
    content: '';
    box-sizing: border-box;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    border: 1px solid #FFF;
    border-radius: 50%;
    width: 28px;
    height: 6px;
}
.flaskLoader::before {
    content: '';
    box-sizing: border-box;
    left: 0;
    bottom: -4px;
    border-radius: 50%;
    position: absolute;
    width: 6px;
    height: 6px;
    animation: animloader1 6s linear infinite;
}

@keyframes animloader {
    0% {
        background-position: 0px 80px;
    }
    100% {
        background-position: 0px 0px;
    }
}

@keyframes animloader1 {
    0% {
        box-shadow: 4px -10px rgba(255, 255, 255, 0), 6px 0px rgba(255, 255, 255, 0), 8px -15px rgba(255, 255, 255, 0), 12px 0px rgba(255, 255, 255, 0);
    }
    20% {
        box-shadow: 4px -20px rgba(255, 255, 255, 0), 8px -10px rgba(255, 255, 255, 0), 10px -30px rgba(255, 255, 255, 0.5), 15px -5px rgba(255, 255, 255, 0);
    }
    40% {
        box-shadow: 2px -40px rgba(255, 255, 255, 0.5), 8px -30px rgba(255, 255, 255, 0.4), 8px -60px rgba(255, 255, 255, 0.5), 12px -15px rgba(255, 255, 255, 0.5);
    }
    60% {
        box-shadow: 4px -60px rgba(255, 255, 255, 0.5), 6px -50px rgba(255, 255, 255, 0.4), 10px -90px rgba(255, 255, 255, 0.5), 15px -25px rgba(255, 255, 255, 0.5);
    }
    80% {
        box-shadow: 2px -80px rgba(255, 255, 255, 0.5), 4px -70px rgba(255, 255, 255, 0.4), 8px -120px rgba(255, 255, 255, 0), 12px -35px rgba(255, 255, 255, 0.5);
    }
    100% {
        box-shadow: 4px -100px rgba(255, 255, 255, 0), 8px -90px rgba(255, 255, 255, 0), 10px -120px rgba(255, 255, 255, 0), 15px -45px rgba(255, 255, 255, 0);
    }
}