*, *::before, *::after {
    box-sizing: border-box
}

@-webkit-keyframes pulse {
    to {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 transparent
    }
}

@keyframes pulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, .7)
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px transparent
    }

    to {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 transparent
    }
}

.ba {
    color: var(--ba-color);
    opacity: var(--ba-opacity)
}

.button {
    background: var(--button-background-color);
    border: none;
    border-radius: var(--global-radius);
    box-shadow: var(--button-shadow);
    color: var(--button-text-color);
    display: block;
    font-family: "Roboto", sans-serif;
    font-size: 1.875rem;
    font-weight: bold;
    padding: 1rem;
    text-align: center;
    width: 100%
}

.button-answer {
    margin-top: 1rem;
    text-transform: uppercase
}

.button-success {
    background-color: var(--success-color)
}

.button-answer-yes {
    background-color: var(--success-color)
}

.button-answer-no {
    background-color: var(--error-color)
}

.button.valid-modifier {
    animation: pulse 2s infinite;
    background: var(--button-background-color-active);
    color: var(--button-text-color-active);
    cursor: pointer
}

.button-answer-success {
    font-size: 12px;
    background-color: var(--success-color)
}

.button-answer-error {
    animation: button-shake .82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
    background-color: red;
    outline: none
}

.button-answer-error :focus {
    outline: none
}

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

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

    30%, 50%, 70% {
        transform: translate3d(-4px, 0, 0)
    }

    40%, 60% {
        transform: translate3d(4px, 0, 0)
    }
}

.keyword-shortcode {
    font-size: 1.875rem;
    line-height: 1.2
}

.keyword-shortcode--highlight {
    color: var(--keyword-shortcode-highlight)
}

.cta {
    background-color: var(--cta-background-color);
    border: solid 2px var(--cta-border-color);
    border-radius: var(--global-radius);
    box-shadow: var(--global-shadow);
    margin-top: var(--cta-top);
    padding: .5rem;
    position: relative;
    z-index: 25
}

.cta__label {
    display: block;
    font-weight: 700;
    font-size: 1.125rem;
    text-align: center;
    text-shadow: var(--global-shadow)
}

.cta__extratext {
    color: var(--extratext-text-color);
    text-align: center;
    font-weight: 700;
    font-size: .875rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
    text-shadow: var(--global-shadow)
}

.cta__validation {
    display: none;
    font-size: .875rem;
    padding: 2px;
    text-align: center;
    text-shadow: var(--global-shadow)
}

.cta__validation.invalid-modifier {
    background: var(--error-color);
    color: var(--white);
    display: block
}

html[data-ba="1"] .hm-container, html[data-ba="2"] .hm-container {
    min-height: 100vh
}

.footer {
    font-size: .625rem;
    font-weight: 100;
    letter-spacing: -0.4px;
    line-height: 12.5px;
    margin: var(--footer-top) var(--footer-margin) 0;
    text-align: justify;
    text-align-last: center
}

.footer p {
    margin-top: 0
}

.footer div[class*=disclaimer] {
    color: var(--footer-disclaimer-color)
}

.footer div[class*=links] {
    text-align: center
}

.footer div[class*=links] a {
    color: var(--footer-links-color)
}

.footer__disclaimer {
    color: var(--footer-disclaimer-color)
}

.footer__links {
    text-align: center
}

.footer__links a {
    color: var(--footer-links-color)
}

html[data-ba="1"] .footer {
    display: none
}

header img {
    width: 100%
}

.hero img {
    animation: var(--hero-animation);
    display: block;
    height: auto;
    max-width: var(--hero-width);
    margin: var(--hero-top) auto auto
}

.icons-input i {
    position: absolute
}

.icon-input {
    margin: 22px 13px;
    padding: 12px;
    background-color: var(--button-color);
    --svg: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M0 64C0 28.7 28.7 0 64 0H288c35.3 0 64 28.7 64 64V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V64zM128 448c0 8.8 7.2 16 16 16h64c8.8 0 16-7.2 16-16s-7.2-16-16-16H144c-8.8 0-16 7.2-16 16zM288 64H64V384H288V64z"/></svg>');
    -webkit-mask: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask: var(--svg);
    mask-repeat: no-repeat
}

.instructions {
    display: flex;
    flex-direction: column;
    font-size: 1rem;
    gap: .5rem;
    margin: 0;
    padding: 0
}

.instructions__instruction {
    align-items: center;
    display: flex;
    gap: 1rem;
    list-style: none
}

.instructions__counter {
    align-items: center;
    aspect-ratio: 1/1;
    background: var(--button-background-color-active);
    border-radius: 100%;
    color: var(--button-text-color-active);
    display: flex;
    font-weight: bold;
    justify-content: center;
    width: 1.875rem
}

.instructions__message {
    text-align: left
}

label.cta__label {
    display: none
}

.loader {
    aspect-ratio: 1;
    display: inline-block;
    position: relative;
    width: 128px
}

.loader div {
    background-color: #0bb3ce;
    animation: foo 1.25s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    transform-origin: 64px 64px
}

.loader div:after {
    aspect-ratio: 1;
    background: var(--white);
    border-radius: 50%;
    content: "";
    display: block;
    margin: -3px 0 0 -3px;
    position: absolute;
    width: 14px
}

.loader div:nth-child(1) {
    animation-delay: -0.036s
}

.loader div:nth-child(1):after {
    left: 100px;
    top: 100px
}

.loader div:nth-child(2) {
    animation-delay: -0.072s
}

.loader div:nth-child(2):after {
    left: 90px;
    top: 108px
}

.loader div:nth-child(3) {
    animation-delay: -0.108s
}

.loader div:nth-child(3):after {
    left: 78px;
    top: 114px
}

.loader div:nth-child(4) {
    animation-delay: -0.144s
}

.loader div:nth-child(4):after {
    left: 64px;
    top: 116px
}

.loader div:nth-child(5) {
    animation-delay: -0.18s
}

.loader div:nth-child(5):after {
    left: 50px;
    top: 114px
}

.loader div:nth-child(6) {
    animation-delay: -0.216s
}

.loader div:nth-child(6):after {
    left: 38px;
    top: 108px
}

.loader div:nth-child(7) {
    animation-delay: -0.252s
}

.loader div:nth-child(7):after {
    left: 28px;
    top: 100px
}

.loader div:nth-child(8) {
    animation-delay: -0.288s
}

.loader div:nth-child(8):after {
    left: 20px;
    top: 90px
}

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

    100% {
        transform: rotate(360deg)
    }
}

.wait {
    transition: all 300ms ease-in-out
}

.waiting-elements-hide {
    opacity: 0;
    transform: translateY(-6rem)
}

.lds-roller {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px
}

.lds-roller div {
    animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    transform-origin: 40px 40px
}

.lds-roller div:after {
    background: #fff;
    border-radius: 50%;
    content: " ";
    display: block;
    height: 7px;
    margin: -4px 0 0 -4px;
    position: absolute;
    width: 7px
}

.lds-roller div:nth-child(1) {
    animation-delay: -0.036s
}

.lds-roller div:nth-child(1):after {
    left: 63px;
    top: 63px
}

.lds-roller div:nth-child(2) {
    animation-delay: -0.072s
}

.lds-roller div:nth-child(2):after {
    left: 56px;
    top: 68px
}

.lds-roller div:nth-child(3) {
    animation-delay: -0.108s
}

.lds-roller div:nth-child(3):after {
    left: 48px;
    top: 71px
}

.lds-roller div:nth-child(4) {
    animation-delay: -0.144s
}

.lds-roller div:nth-child(4):after {
    left: 40px;
    top: 72px
}

.lds-roller div:nth-child(5) {
    animation-delay: -0.18s
}

.lds-roller div:nth-child(5):after {
    left: 32px;
    top: 71px
}

.lds-roller div:nth-child(6) {
    animation-delay: -0.216s
}

.lds-roller div:nth-child(6):after {
    left: 24px;
    top: 68px
}

.lds-roller div:nth-child(7) {
    animation-delay: -0.252s
}

.lds-roller div:nth-child(7):after {
    left: 17px;
    top: 63px
}

.lds-roller div:nth-child(8) {
    animation-delay: -0.288s
}

.lds-roller div:nth-child(8):after {
    left: 12px;
    top: 56px
}

@keyframes lds-roller {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

.spc-loader {
    background: var(--cta-background-color);
    bottom: 0;
    height: 100%;
    left: 0;
    opacity: .8;
    position: absolute;
    right: 0;
    top: 0;
    transition: visibility .6s, opacity .3s ease-in-out;
    z-index: 1
}

.spc-loader__hidden {
    opacity: 0;
    visibility: hidden
}

.spc-loader .lds-roller {
    top: 50%;
    transform: translateY(-50%)
}

.spc-loader .lds-roller div:after {
    background: var(--text-color)
}

.skeleton-container .skeleton-instructions {
    display: grid;
    grid-template-columns: 1.875rem 1fr;
    grid-template-rows: repeat(2, 1.875rem);
    grid-gap: .5rem 1rem
}

.skeleton-container .skeleton-instructions .counter {
    border-radius: 100%
}

.skeleton-container .message {
    border-radius: .5rem
}

.skeleton-container .skeleton-button {
    border-radius: 1rem;
    height: 4rem;
    margin-top: 3rem
}

.skeleton {
    background: #ccc;
    overflow: hidden;
    position: relative
}

.skeleton::after {
    animation: progress 1s ease-in-out infinite;
    background: linear-gradient(90deg, #ccc, #dedede, #ccc);
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

@keyframes progress {
    0% {
        transform: translate3d(-100%, 0, 0)
    }

    100% {
        transform: translate3d(100%, 0, 0)
    }
}

.logo {
    display: var(--logo-display);
    height: 2rem;
    margin: var(--logo-top) auto auto
}

.main {
    padding: var(--main-padding);
    text-align: center
}

.main__inner {
    display: flex;
    flex-direction: column;
    gap: 1rem
}

.main__inner div {
    flex: 1
}

@media screen and (orientation: landscape)and (min-width: 640px) {
    .main__inner {
        align-items: center;
        flex-direction: row
    }
}

.checkbox-wrapper {
    font-size: .6rem;
    width: 100%
}

.checkbox-wrapper input {
    height: 13px;
    margin: 0;
    width: 13px
}

.main-input {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    border: .25rem solid var(--cta-input-color);
    border-radius: var(--global-radius);
    color: var(--black);
    font-family: "Roboto", sans-serif;
    font-size: 2rem;
    font-weight: 900;
    outline: none;
    padding: .75rem 2rem;
    width: 100%
}

.main-input:focus {
    animation: none
}

.main-input.valid-modifier {
    animation: none;
    border-color: var(--success-color);
    color: var(--success-color)
}

.main-input.invalid-modifier {
    border-color: var(--error-color);
    color: var(--error-color)
}

::placeholder {
    color: var(--light-gray)
}

.overlay {
    align-items: flex-start;
    display: flex;
    height: 100vh;
    justify-content: center;
    padding: .5rem;
    position: absolute;
    top: 0;
    width: 100vw;
    z-index: 25
}

.overlay-adult .button-answer-yes {
    background-color: #4cb051
}

.overlay-adult .button-answer-no {
    background-color: #3b3838
}

.overlay .cta {
    width: 100%
}

.overlay-flex {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-start
}

@media screen and (orientation: landscape)and (min-width: 640px) {
    .overlay {
        align-items: center;
        padding: 1.5rem
    }

    .overlay-flex {
        flex-direction: row-reverse;
        gap: .5rem
    }

    .overlay-flex__image {
        text-align: center
    }

    .overlay-flex__image--adult {
        flex: 0 1 auto;
        height: 250px;
        width: 250px
    }

    .overlay-flex__image--adult img {
        height: 100%;
        width: 100%
    }

    .overlay-flex__image--question {
        flex: 1
    }

    .overlay-flex .cta {
        flex: 1;
        margin: 0
    }
}

.container {
    min-height: 100vh;
    height: 100%;
    opacity: var(--popup-opacity);
    background-color: var(--popup-background-color);
    -webkit-filter: blur(var(--popup-blur-content));
    -moz-filter: blur(var(--popup-blur-content));
    -o-filter: blur(var(--popup-blur-content));
    -ms-filter: blur(var(--popup-blur-content));
    filter: blur(var(--popup-blur-content))
}

img.popup {
    padding: 1rem 0
}

@media screen and (orientation: landscape)and (min-width: 640px) {
    .overlay-adult-2 .overlay-flex {
        flex-direction: column
    }

    .overlay-adult-2 .overlay-flex__image--adult {
        height: auto
    }

    .overlay-adult-2 .overlay-flex__image--adult img {
        width: auto
    }
}

.overlay-adult-2 .overlay-flex {
    margin: auto;
    background-color: var(--background-color-adult, var(--white));
    color: var(--text-color-adult, var(--black))
}

.overlay-adult-2 .overlay-flex__image {
    width: 100%;
    background-color: var(--background-color-adult-image, var(--background-color, var(--black)))
}

.overlay-adult-2 .overlay-flex__image img {
    margin: 0 auto;
    display: block;
    height: auto
}

.overlay-adult-2 .overlay-flex .cta {
    padding: 1rem
}

.overlay-adult-2 .overlay-flex .cta .cta__label {
    margin: 1rem
}

.overlay-adult-2 .overlay-flex .cta .deprecated-button {
    border-radius: 1rem;
    text-transform: none;
    font-size: 1.3rem
}

.overlay-checkmo {
    align-items: center;
    background-color: var(--overlay-background-color, rgba(26, 26, 26, 0.9));
    color: var(--overlay-text-color, #ffffff);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 100%;
    justify-content: center;
    padding: 2rem;
    position: fixed;
    top: -100%;
    transition: all 600ms ease-in-out;
    width: 100%;
    z-index: 1
}

.overlay-checkmo .keyword-shortcode {
    font-size: 1.25rem;
    opacity: 0;
    text-align: center;
    transform: translateY(3rem);
    transition: all 300ms ease-in-out
}

.overlay-checkmo .keyword-shortcode--visible {
    opacity: 1;
    transform: translateY(0)
}

.overlay-checkmo--visible {
    transform: translateY(100%)
}

.overlay-checkmo .keyword-shortcode--highlight {
    color: var(--overlay-highlight-text-color, #7ac141)
}

.pin-disclaimer {
    font-size: .625rem;
    font-weight: 100;
    letter-spacing: -0.4px;
    line-height: 12.5px
}

.service {
    color: var(--service-text-color);
    font-size: .625rem;
    font-weight: 100
}

.exit {
    position: absolute;
    right: .5rem;
    top: .5rem
}

.exit-button {
    display: block;
    position: sticky;
    width: 18px;
    height: 18px;
    opacity: 1;
    background: gray;
    border-radius: var(--global-radius);
    box-shadow: var(--global-shadow);
    color: #fff
}

.exit-button:hover {
    opacity: .7
}

.exit-button:before, .exit-button:after {
    position: absolute;
    left: 8px;
    content: " ";
    height: 16px;
    width: 2px;
    background-color: var(--link-color)
}

.exit-button:before {
    transform: rotate(45deg)
}

.exit-button:after {
    transform: rotate(-45deg)
}

.languages {
    position: absolute;
    top: 6px;
    right: 5px
}

.languages .lang {
    border: 1px solid #fff;
    color: #fff;
    display: block;
    width: 25px;
    height: 25px;
    margin-left: 5px;
    line-height: 25px;
    float: right;
    position: relative;
    font-size: 13px;
    font-weight: bold;
    text-align: center;
    text-decoration: none
}

.languages .selected_lang {
    background-color: #fff;
    color: #000
}

.qrcode {
    background: #fff;
    display: inline-block;
    z-index: 200;
    position: relative
}

.qrcode svg {
    margin: .5rem
}

.quiz-success-name-color {
    color: var(--quiz-success-name-color)
}

.ivr-button {
    background: #fff;
    color: #000;
    font-size: .575rem;
    width: 64px;
    border-radius: .6rem;
    box-shadow: var(--button-shadow);
    padding: 0;
    -webkit-box-shadow: 0 6px 4px -4px #000;
    -moz-box-shadow: 0 6px 4px -4px #000;
    box-shadow: 0 6px 4px -4px #000
}

.ivr-providers {
    justify-content: space-between;
    flex-flow: row wrap;
    display: flex
}

.ivr-certified {
    position: absolute;
    right: 0;
    top: 0;
    transform: translate(30%, -30%) rotate(45deg)
}

.ivr-block {
    display: block;
    width: 80vw;
    position: absolute;
    top: 50%;
    background: #fefefe;
    left: 50%;
    transform: translate(-50%, -50%);
    border: solid 1px #000;
    border-radius: 5px;
    padding: 0 1rem;
    text-align: center
}

.ivr-list {
    text-align: left
}

.ivr-text {
    color: #615843
}

.ivr-call-now {
    color: #fff
}

.ivr-text-countdown {
    color: red;
    padding: 1rem 0
}

:root {
    --popup-opacity: 0.925;
    --popup-background-color: var(--black);
    --popup-blur-content: 5px
}

select.mccmnc-select {
    display: inline !important
}

select.mccmnc-select {
    margin: 0;
    width: 100%;
    font-family: inherit;
    outline: none;
    border: 1px solid #777;
    border-radius: .25em;
    cursor: pointer;
    line-height: 1.1;
    background-color: #fff;
    background-image: linear-gradient(to top, #f9f9f9, #fff 33%);
    grid-template-areas: "select";
    padding: .75rem 1rem;
    font-size: 1.125rem
}

.sample-content__samples {
    display: flex;
    gap: .5rem;
    margin-right: -1rem;
    padding-right: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    width: auto;
    white-space: nowrap
}

.sample-content a {
    display: block;
    flex-shrink: 0;
    width: 45%
}

.sample-content__thumbnail {
    border-radius: .25rem;
    display: block;
    height: auto;
    width: 100%
}

html[dir=rtl] .sample-content {
    margin-left: -1rem;
    margin-right: 0;
    padding-left: 1rem;
    padding-right: 0
}

@font-face {
    font-display: swap;
    font-family: "Roboto";
    font-style: normal;
    font-weight: 100;
    src: url(/campaignbuilder/build/fonts/roboto-v30-greek_latin-100.9be09d.woff2) format("woff2")
}

@font-face {
    font-display: swap;
    font-family: "Roboto";
    font-style: normal;
    font-weight: 400;
    src: url(/campaignbuilder/build/fonts/roboto-v30-greek_latin-regular.8765d3.woff2) format("woff2")
}

@font-face {
    font-display: swap;
    font-family: "Roboto";
    font-style: normal;
    font-weight: 700;
    src: url(/campaignbuilder/build/fonts/roboto-v30-greek_latin-700.674431.woff2) format("woff2")
}

.display-none {
    display: none
}

.padding-top {
    padding-top: 50px
}

.mt-1 {
    margin-top: .25rem
}

.mt-2 {
    margin-top: .5rem
}

.mt-4 {
    margin-top: 1rem
}

.mt-6 {
    margin-top: 1.5rem
}

.mt-8 {
    margin-top: 2rem
}

.mt-16 {
    margin-top: 4rem
}

.order-1 {
    order: 1
}

.order-2 {
    order: 2
}

.order-3 {
    order: 3
}

.order-4 {
    order: 4
}

.order-5 {
    order: 5
}

.order-6 {
    order: 6
}

.order-7 {
    order: 7
}

.order-8 {
    order: 8
}

.order-9 {
    order: 9
}

.order-10 {
    order: 10
}

.order-11 {
    order: 11
}

.order-12 {
    order: 12
}

@keyframes blink-1 {
    0%, 50%, 100% {
        opacity: 1
    }

    25%, 75% {
        opacity: 0
    }
}

@keyframes blink-2 {
    0% {
        opacity: 1
    }

    50% {
        opacity: .2
    }

    100% {
        opacity: 1
    }
}

:root {
    --animation-blink-1: blink-1 .6s both;
    --animation-blink-2: blink-2 .9s both
}

@keyframes bounce-top {
    0% {
        transform: translateY(-45px);
        animation-timing-function: ease-in;
        opacity: 1
    }

    24% {
        opacity: 1
    }

    40% {
        transform: translateY(-24px);
        animation-timing-function: ease-in
    }

    65% {
        transform: translateY(-12px);
        animation-timing-function: ease-in
    }

    82% {
        transform: translateY(-6px);
        animation-timing-function: ease-in
    }

    93% {
        transform: translateY(-4px);
        animation-timing-function: ease-in
    }

    25%, 55%, 75%, 87% {
        transform: translateY(0);
        animation-timing-function: ease-out
    }

    100% {
        transform: translateY(0);
        animation-timing-function: ease-out;
        opacity: 1
    }
}

@keyframes bounce-bottom {
    0% {
        transform: translateY(45px);
        animation-timing-function: ease-in;
        opacity: 1
    }

    24% {
        opacity: 1
    }

    40% {
        transform: translateY(24px);
        animation-timing-function: ease-in
    }

    65% {
        transform: translateY(12px);
        animation-timing-function: ease-in
    }

    82% {
        transform: translateY(6px);
        animation-timing-function: ease-in
    }

    93% {
        transform: translateY(4px);
        animation-timing-function: ease-in
    }

    25%, 55%, 75%, 87% {
        transform: translateY(0);
        animation-timing-function: ease-out
    }

    100% {
        transform: translateY(0);
        animation-timing-function: ease-out;
        opacity: 1
    }
}

@keyframes bounce-left {
    0% {
        transform: translateX(-48px);
        animation-timing-function: ease-in;
        opacity: 1
    }

    24% {
        opacity: 1
    }

    40% {
        transform: translateX(-26px);
        animation-timing-function: ease-in
    }

    65% {
        transform: translateX(-13px);
        animation-timing-function: ease-in
    }

    82% {
        transform: translateX(-6.5px);
        animation-timing-function: ease-in
    }

    93% {
        transform: translateX(-4px);
        animation-timing-function: ease-in
    }

    25%, 55%, 75%, 87%, 98% {
        transform: translateX(0);
        animation-timing-function: ease-out
    }

    100% {
        transform: translateX(0);
        animation-timing-function: ease-out;
        opacity: 1
    }
}

@keyframes bounce-right {
    0% {
        transform: translateX(48px);
        animation-timing-function: ease-in;
        opacity: 1
    }

    24% {
        opacity: 1
    }

    40% {
        transform: translateX(26px);
        animation-timing-function: ease-in
    }

    65% {
        transform: translateX(13px);
        animation-timing-function: ease-in
    }

    82% {
        transform: translateX(6.5px);
        animation-timing-function: ease-in
    }

    93% {
        transform: translateX(4px);
        animation-timing-function: ease-in
    }

    25%, 55%, 75%, 87%, 98% {
        transform: translateX(0);
        animation-timing-function: ease-out
    }

    100% {
        transform: translateX(0);
        animation-timing-function: ease-out;
        opacity: 1
    }
}

:root {
    --animation-bounce-top: bounce-top .9s both;
    --animation-bounce-bottom: bounce-bottom .9s both;
    --animation-bounce-left: bounce-left .8s both;
    --animation-bounce-right: bounce-right .8s both
}

@-webkit-keyframes flicker-1 {
    0%, 100% {
        opacity: 1
    }

    41.99% {
        opacity: 1
    }

    42% {
        opacity: 0
    }

    43% {
        opacity: 0
    }

    43.01% {
        opacity: 1
    }

    47.99% {
        opacity: 1
    }

    48% {
        opacity: 0
    }

    49% {
        opacity: 0
    }

    49.01% {
        opacity: 1
    }
}

@keyframes flicker-1 {
    0%, 100% {
        opacity: 1
    }

    41.99% {
        opacity: 1
    }

    42% {
        opacity: 0
    }

    43% {
        opacity: 0
    }

    43.01% {
        opacity: 1
    }

    47.99% {
        opacity: 1
    }

    48% {
        opacity: 0
    }

    49% {
        opacity: 0
    }

    49.01% {
        opacity: 1
    }
}

@-webkit-keyframes flicker-2 {
    0%, 100% {
        opacity: 1
    }

    41.99% {
        opacity: 1
    }

    42% {
        opacity: 0
    }

    43% {
        opacity: 0
    }

    43.01% {
        opacity: 1
    }

    45.99% {
        opacity: 1
    }

    46% {
        opacity: 0
    }

    46.9% {
        opacity: 0
    }

    46.91% {
        opacity: 1
    }

    51.99% {
        opacity: 1
    }

    52% {
        opacity: 0
    }

    52.8% {
        opacity: 0
    }

    52.81% {
        opacity: 1
    }
}

@keyframes flicker-2 {
    0%, 100% {
        opacity: 1
    }

    41.99% {
        opacity: 1
    }

    42% {
        opacity: 0
    }

    43% {
        opacity: 0
    }

    43.01% {
        opacity: 1
    }

    45.99% {
        opacity: 1
    }

    46% {
        opacity: 0
    }

    46.9% {
        opacity: 0
    }

    46.91% {
        opacity: 1
    }

    51.99% {
        opacity: 1
    }

    52% {
        opacity: 0
    }

    52.8% {
        opacity: 0
    }

    52.81% {
        opacity: 1
    }
}

@-webkit-keyframes flicker-3 {
    0%, 100% {
        opacity: 1
    }

    32.98% {
        opacity: 1
    }

    33% {
        opacity: 0
    }

    34% {
        opacity: 0
    }

    34.02% {
        opacity: 1
    }

    34.98% {
        opacity: 1
    }

    35% {
        opacity: 0
    }

    35.9% {
        opacity: 0
    }

    35.92% {
        opacity: 1
    }

    38.98% {
        opacity: 1
    }

    39% {
        opacity: 0
    }

    39.8% {
        opacity: 0
    }

    39.82% {
        opacity: 1
    }

    83.98% {
        opacity: 1
    }

    84% {
        opacity: 0
    }

    84.9% {
        opacity: 0
    }

    84.92% {
        opacity: 1
    }
}

@keyframes flicker-3 {
    0%, 100% {
        opacity: 1
    }

    32.98% {
        opacity: 1
    }

    33% {
        opacity: 0
    }

    34% {
        opacity: 0
    }

    34.02% {
        opacity: 1
    }

    34.98% {
        opacity: 1
    }

    35% {
        opacity: 0
    }

    35.9% {
        opacity: 0
    }

    35.92% {
        opacity: 1
    }

    38.98% {
        opacity: 1
    }

    39% {
        opacity: 0
    }

    39.8% {
        opacity: 0
    }

    39.82% {
        opacity: 1
    }

    83.98% {
        opacity: 1
    }

    84% {
        opacity: 0
    }

    84.9% {
        opacity: 0
    }

    84.92% {
        opacity: 1
    }
}

@-webkit-keyframes flicker-4 {
    0%, 100% {
        opacity: 1
    }

    31.98% {
        opacity: 1
    }

    32% {
        opacity: 0
    }

    32.8% {
        opacity: 0
    }

    32.82% {
        opacity: 1
    }

    34.98% {
        opacity: 1
    }

    35% {
        opacity: 0
    }

    35.7% {
        opacity: 0
    }

    35.72% {
        opacity: 1
    }

    36.98% {
        opacity: 1
    }

    37% {
        opacity: 0
    }

    37.6% {
        opacity: 0
    }

    37.62% {
        opacity: 1
    }

    67.98% {
        opacity: 1
    }

    68% {
        opacity: 0
    }

    68.4% {
        opacity: 0
    }

    68.42% {
        opacity: 1
    }

    95.98% {
        opacity: 1
    }

    96% {
        opacity: 0
    }

    96.7% {
        opacity: 0
    }

    96.72% {
        opacity: 1
    }

    98.98% {
        opacity: 1
    }

    99% {
        opacity: 0
    }

    99.6% {
        opacity: 0
    }

    99.62% {
        opacity: 1
    }
}

@keyframes flicker-4 {
    0%, 100% {
        opacity: 1
    }

    31.98% {
        opacity: 1
    }

    32% {
        opacity: 0
    }

    32.8% {
        opacity: 0
    }

    32.82% {
        opacity: 1
    }

    34.98% {
        opacity: 1
    }

    35% {
        opacity: 0
    }

    35.7% {
        opacity: 0
    }

    35.72% {
        opacity: 1
    }

    36.98% {
        opacity: 1
    }

    37% {
        opacity: 0
    }

    37.6% {
        opacity: 0
    }

    37.62% {
        opacity: 1
    }

    67.98% {
        opacity: 1
    }

    68% {
        opacity: 0
    }

    68.4% {
        opacity: 0
    }

    68.42% {
        opacity: 1
    }

    95.98% {
        opacity: 1
    }

    96% {
        opacity: 0
    }

    96.7% {
        opacity: 0
    }

    96.72% {
        opacity: 1
    }

    98.98% {
        opacity: 1
    }

    99% {
        opacity: 0
    }

    99.6% {
        opacity: 0
    }

    99.62% {
        opacity: 1
    }
}

:root {
    --animation-flicker-1: flicker-1 2s linear infinite both;
    --animation-flicker-2: flicker-2 2s linear infinite both;
    --animation-flicker-3: flicker-3 2.5s linear infinite both;
    --animation-flicker-4: flicker-4 4s linear infinite both
}

@keyframes jello-horizontal {
    0% {
        transform: scale3d(1, 1, 1)
    }

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

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

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

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

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

    100% {
        transform: scale3d(1, 1, 1)
    }
}

@keyframes jello-vertical {
    0% {
        transform: scale3d(1, 1, 1)
    }

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

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

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

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

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

    100% {
        transform: scale3d(1, 1, 1)
    }
}

@keyframes jello-diagonal-1 {
    0% {
        transform: skew(0deg 0deg)
    }

    30% {
        transform: skew(25deg 25deg)
    }

    40% {
        transform: skew(-15deg, -15deg)
    }

    50% {
        transform: skew(15deg, 15deg)
    }

    65% {
        transform: skew(-5deg, -5deg)
    }

    75% {
        transform: skew(5deg, 5deg)
    }

    100% {
        transform: skew(0deg 0deg)
    }
}

@keyframes jello-diagonal-2 {
    0% {
        transform: skew(0deg 0deg)
    }

    30% {
        transform: skew(-25deg -25deg)
    }

    40% {
        transform: skew(15deg, 15deg)
    }

    50% {
        transform: skew(-15deg, -15deg)
    }

    65% {
        transform: skew(5deg, 5deg)
    }

    75% {
        transform: skew(-5deg, -5deg)
    }

    100% {
        transform: skew(0deg 0deg)
    }
}

:root {
    --animation-jello-horizontal: jello-horizontal .9s both;
    --animation-jello-vertical: jello-vertical .9s both;
    --animation-jello-diagonal-1: jello-diagonal-1 .8s both;
    --animation-jello-diagonal-2: jello-diagonal-2 .8s both
}

@keyframes heartbeat {
    from {
        transform: scale(1);
        transform-origin: center center;
        animation-timing-function: ease-out
    }

    10% {
        transform: scale(0.91);
        animation-timing-function: ease-in
    }

    17% {
        transform: scale(0.98);
        animation-timing-function: ease-out
    }

    33% {
        transform: scale(0.87);
        animation-timing-function: ease-in
    }

    45% {
        transform: scale(1);
        animation-timing-function: ease-out
    }
}

@keyframes pulsate-bck {
    0% {
        transform: scale(1)
    }

    50% {
        transform: scale(0.9)
    }

    100% {
        transform: scale(1)
    }
}

@keyframes pulsate-fwd {
    0% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.1)
    }

    100% {
        transform: scale(1)
    }
}

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

    80% {
        transform: scale(1.2);
        opacity: 0
    }

    100% {
        transform: scale(2.2);
        opacity: 0
    }
}

:root {
    --animation-heartbeat: heartbeat 1.5s ease-in-out infinite both;
    --animation-pulsate-bck: pulsate-bck 2s ease-in-out infinite both;
    --animation-pulsate-fwd: pulsate-fwd 2s ease-in-out infinite both;
    --animation-ping: ping .8s ease-in-out infinite both
}

@-webkit-keyframes shake-horizontal {
    0%, 100% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    10%, 30%, 50%, 70% {
        -webkit-transform: translateX(-10px);
        transform: translateX(-10px)
    }

    20%, 40%, 60% {
        -webkit-transform: translateX(10px);
        transform: translateX(10px)
    }

    80% {
        -webkit-transform: translateX(8px);
        transform: translateX(8px)
    }

    90% {
        -webkit-transform: translateX(-8px);
        transform: translateX(-8px)
    }
}

@keyframes shake-horizontal {
    0%, 100% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    10%, 30%, 50%, 70% {
        -webkit-transform: translateX(-10px);
        transform: translateX(-10px)
    }

    20%, 40%, 60% {
        -webkit-transform: translateX(10px);
        transform: translateX(10px)
    }

    80% {
        -webkit-transform: translateX(8px);
        transform: translateX(8px)
    }

    90% {
        -webkit-transform: translateX(-8px);
        transform: translateX(-8px)
    }
}

@-webkit-keyframes shake-vertical {
    0%, 100% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    10%, 30%, 50%, 70% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px)
    }

    20%, 40%, 60% {
        -webkit-transform: translateY(8px);
        transform: translateY(8px)
    }

    80% {
        -webkit-transform: translateY(6.4px);
        transform: translateY(6.4px)
    }

    90% {
        -webkit-transform: translateY(-6.4px);
        transform: translateY(-6.4px)
    }
}

@keyframes shake-vertical {
    0%, 100% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    10%, 30%, 50%, 70% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px)
    }

    20%, 40%, 60% {
        -webkit-transform: translateY(8px);
        transform: translateY(8px)
    }

    80% {
        -webkit-transform: translateY(6.4px);
        transform: translateY(6.4px)
    }

    90% {
        -webkit-transform: translateY(-6.4px);
        transform: translateY(-6.4px)
    }
}

@-webkit-keyframes shake-lr {
    0%, 100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%
    }

    10% {
        -webkit-transform: rotate(8deg);
        transform: rotate(8deg)
    }

    20%, 40%, 60% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg)
    }

    30%, 50%, 70% {
        -webkit-transform: rotate(10deg);
        transform: rotate(10deg)
    }

    80% {
        -webkit-transform: rotate(-8deg);
        transform: rotate(-8deg)
    }

    90% {
        -webkit-transform: rotate(8deg);
        transform: rotate(8deg)
    }
}

@keyframes shake-lr {
    0%, 100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%
    }

    10% {
        -webkit-transform: rotate(8deg);
        transform: rotate(8deg)
    }

    20%, 40%, 60% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg)
    }

    30%, 50%, 70% {
        -webkit-transform: rotate(10deg);
        transform: rotate(10deg)
    }

    80% {
        -webkit-transform: rotate(-8deg);
        transform: rotate(-8deg)
    }

    90% {
        -webkit-transform: rotate(8deg);
        transform: rotate(8deg)
    }
}

@-webkit-keyframes shake-top {
    0%, 100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transform-origin: 50% 0;
        transform-origin: 50% 0
    }

    10% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg)
    }

    20%, 40%, 60% {
        -webkit-transform: rotate(-4deg);
        transform: rotate(-4deg)
    }

    30%, 50%, 70% {
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg)
    }

    80% {
        -webkit-transform: rotate(-2deg);
        transform: rotate(-2deg)
    }

    90% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg)
    }
}

@keyframes shake-top {
    0%, 100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transform-origin: 50% 0;
        transform-origin: 50% 0
    }

    10% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg)
    }

    20%, 40%, 60% {
        -webkit-transform: rotate(-4deg);
        transform: rotate(-4deg)
    }

    30%, 50%, 70% {
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg)
    }

    80% {
        -webkit-transform: rotate(-2deg);
        transform: rotate(-2deg)
    }

    90% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg)
    }
}

@-webkit-keyframes shake-tr {
    0%, 100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transform-origin: 100% 0;
        transform-origin: 100% 0
    }

    10% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg)
    }

    20%, 40%, 60% {
        -webkit-transform: rotate(-4deg);
        transform: rotate(-4deg)
    }

    30%, 50%, 70% {
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg)
    }

    80% {
        -webkit-transform: rotate(-2deg);
        transform: rotate(-2deg)
    }

    90% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg)
    }
}

@keyframes shake-tr {
    0%, 100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transform-origin: 100% 0;
        transform-origin: 100% 0
    }

    10% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg)
    }

    20%, 40%, 60% {
        -webkit-transform: rotate(-4deg);
        transform: rotate(-4deg)
    }

    30%, 50%, 70% {
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg)
    }

    80% {
        -webkit-transform: rotate(-2deg);
        transform: rotate(-2deg)
    }

    90% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg)
    }
}

@-webkit-keyframes shake-right {
    0%, 100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transform-origin: 100% 50%;
        transform-origin: 100% 50%
    }

    10% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg)
    }

    20%, 40%, 60% {
        -webkit-transform: rotate(-4deg);
        transform: rotate(-4deg)
    }

    30%, 50%, 70% {
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg)
    }

    80% {
        -webkit-transform: rotate(-2deg);
        transform: rotate(-2deg)
    }

    90% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg)
    }
}

@keyframes shake-right {
    0%, 100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transform-origin: 100% 50%;
        transform-origin: 100% 50%
    }

    10% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg)
    }

    20%, 40%, 60% {
        -webkit-transform: rotate(-4deg);
        transform: rotate(-4deg)
    }

    30%, 50%, 70% {
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg)
    }

    80% {
        -webkit-transform: rotate(-2deg);
        transform: rotate(-2deg)
    }

    90% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg)
    }
}

@-webkit-keyframes shake-br {
    0%, 100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transform-origin: 100% 100%;
        transform-origin: 100% 100%
    }

    10% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg)
    }

    20%, 40%, 60% {
        -webkit-transform: rotate(-4deg);
        transform: rotate(-4deg)
    }

    30%, 50%, 70% {
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg)
    }

    80% {
        -webkit-transform: rotate(-2deg);
        transform: rotate(-2deg)
    }

    90% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg)
    }
}

@keyframes shake-br {
    0%, 100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transform-origin: 100% 100%;
        transform-origin: 100% 100%
    }

    10% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg)
    }

    20%, 40%, 60% {
        -webkit-transform: rotate(-4deg);
        transform: rotate(-4deg)
    }

    30%, 50%, 70% {
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg)
    }

    80% {
        -webkit-transform: rotate(-2deg);
        transform: rotate(-2deg)
    }

    90% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg)
    }
}

@-webkit-keyframes shake-bottom {
    0%, 100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transform-origin: 50% 100%;
        transform-origin: 50% 100%
    }

    10% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg)
    }

    20%, 40%, 60% {
        -webkit-transform: rotate(-4deg);
        transform: rotate(-4deg)
    }

    30%, 50%, 70% {
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg)
    }

    80% {
        -webkit-transform: rotate(-2deg);
        transform: rotate(-2deg)
    }

    90% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg)
    }
}

@keyframes shake-bottom {
    0%, 100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transform-origin: 50% 100%;
        transform-origin: 50% 100%
    }

    10% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg)
    }

    20%, 40%, 60% {
        -webkit-transform: rotate(-4deg);
        transform: rotate(-4deg)
    }

    30%, 50%, 70% {
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg)
    }

    80% {
        -webkit-transform: rotate(-2deg);
        transform: rotate(-2deg)
    }

    90% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg)
    }
}

@-webkit-keyframes shake-bl {
    0%, 100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transform-origin: 0 100%;
        transform-origin: 0 100%
    }

    10% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg)
    }

    20%, 40%, 60% {
        -webkit-transform: rotate(-4deg);
        transform: rotate(-4deg)
    }

    30%, 50%, 70% {
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg)
    }

    80% {
        -webkit-transform: rotate(-2deg);
        transform: rotate(-2deg)
    }

    90% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg)
    }
}

@keyframes shake-bl {
    0%, 100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transform-origin: 0 100%;
        transform-origin: 0 100%
    }

    10% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg)
    }

    20%, 40%, 60% {
        -webkit-transform: rotate(-4deg);
        transform: rotate(-4deg)
    }

    30%, 50%, 70% {
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg)
    }

    80% {
        -webkit-transform: rotate(-2deg);
        transform: rotate(-2deg)
    }

    90% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg)
    }
}

@-webkit-keyframes shake-left {
    0%, 100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transform-origin: 0 50%;
        transform-origin: 0 50%
    }

    10% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg)
    }

    20%, 40%, 60% {
        -webkit-transform: rotate(-4deg);
        transform: rotate(-4deg)
    }

    30%, 50%, 70% {
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg)
    }

    80% {
        -webkit-transform: rotate(-2deg);
        transform: rotate(-2deg)
    }

    90% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg)
    }
}

@keyframes shake-left {
    0%, 100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transform-origin: 0 50%;
        transform-origin: 0 50%
    }

    10% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg)
    }

    20%, 40%, 60% {
        -webkit-transform: rotate(-4deg);
        transform: rotate(-4deg)
    }

    30%, 50%, 70% {
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg)
    }

    80% {
        -webkit-transform: rotate(-2deg);
        transform: rotate(-2deg)
    }

    90% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg)
    }
}

@-webkit-keyframes shake-tl {
    0%, 100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0
    }

    10% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg)
    }

    20%, 40%, 60% {
        -webkit-transform: rotate(-4deg);
        transform: rotate(-4deg)
    }

    30%, 50%, 70% {
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg)
    }

    80% {
        -webkit-transform: rotate(-2deg);
        transform: rotate(-2deg)
    }

    90% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg)
    }
}

@keyframes shake-tl {
    0%, 100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0
    }

    10% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg)
    }

    20%, 40%, 60% {
        -webkit-transform: rotate(-4deg);
        transform: rotate(-4deg)
    }

    30%, 50%, 70% {
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg)
    }

    80% {
        -webkit-transform: rotate(-2deg);
        transform: rotate(-2deg)
    }

    90% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg)
    }
}

:root {
    --animation-shake-horizontal: shake-horizontal .8s cubic-bezier(.455, .03, .515, .955) both;
    --animation-shake-vertical: shake-vertical .8s cubic-bezier(.455, .03, .515, .955) both;
    --animation-shake-lr: shake-lr .7s cubic-bezier(.455, .03, .515, .955) both;
    --animation-shake-top: shake-top .8s cubic-bezier(.455, .03, .515, .955) both;
    --animation-shake-tr: shake-tr .8s cubic-bezier(.455, .03, .515, .955) both;
    --animation-shake-right: shake-right .7s cubic-bezier(.455, .03, .515, .955) both;
    --animation-shake-br: shake-br .8s cubic-bezier(.455, .03, .515, .955) both;
    --animation-shake-bottom: shake-bottom .8s cubic-bezier(.455, .03, .515, .955) both;
    --animation-shake-bl: shake-bl .8s cubic-bezier(.455, .03, .515, .955) both;
    --animation-shake-left: shake-left .7s cubic-bezier(.455, .03, .515, .955) both;
    --animation-shake-tl: shake-tl .8s cubic-bezier(.455, .03, .515, .955) both
}

@-webkit-keyframes vibrate-1 {
    0% {
        -webkit-transform: translate(0);
        transform: translate(0)
    }

    20% {
        -webkit-transform: translate(-2px, 2px);
        transform: translate(-2px, 2px)
    }

    40% {
        -webkit-transform: translate(-2px, -2px);
        transform: translate(-2px, -2px)
    }

    60% {
        -webkit-transform: translate(2px, 2px);
        transform: translate(2px, 2px)
    }

    80% {
        -webkit-transform: translate(2px, -2px);
        transform: translate(2px, -2px)
    }

    100% {
        -webkit-transform: translate(0);
        transform: translate(0)
    }
}

@keyframes vibrate-1 {
    0% {
        -webkit-transform: translate(0);
        transform: translate(0)
    }

    20% {
        -webkit-transform: translate(-2px, 2px);
        transform: translate(-2px, 2px)
    }

    40% {
        -webkit-transform: translate(-2px, -2px);
        transform: translate(-2px, -2px)
    }

    60% {
        -webkit-transform: translate(2px, 2px);
        transform: translate(2px, 2px)
    }

    80% {
        -webkit-transform: translate(2px, -2px);
        transform: translate(2px, -2px)
    }

    100% {
        -webkit-transform: translate(0);
        transform: translate(0)
    }
}

@-webkit-keyframes vibrate-2 {
    0% {
        -webkit-transform: translate(0);
        transform: translate(0)
    }

    20% {
        -webkit-transform: translate(2px, -2px);
        transform: translate(2px, -2px)
    }

    40% {
        -webkit-transform: translate(2px, 2px);
        transform: translate(2px, 2px)
    }

    60% {
        -webkit-transform: translate(-2px, 2px);
        transform: translate(-2px, 2px)
    }

    80% {
        -webkit-transform: translate(-2px, -2px);
        transform: translate(-2px, -2px)
    }

    100% {
        -webkit-transform: translate(0);
        transform: translate(0)
    }
}

@keyframes vibrate-2 {
    0% {
        -webkit-transform: translate(0);
        transform: translate(0)
    }

    20% {
        -webkit-transform: translate(2px, -2px);
        transform: translate(2px, -2px)
    }

    40% {
        -webkit-transform: translate(2px, 2px);
        transform: translate(2px, 2px)
    }

    60% {
        -webkit-transform: translate(-2px, 2px);
        transform: translate(-2px, 2px)
    }

    80% {
        -webkit-transform: translate(-2px, -2px);
        transform: translate(-2px, -2px)
    }

    100% {
        -webkit-transform: translate(0);
        transform: translate(0)
    }
}

@-webkit-keyframes vibrate-3 {
    0% {
        -webkit-transform: translate(0);
        transform: translate(0)
    }

    10% {
        -webkit-transform: translate(-2px, -2px);
        transform: translate(-2px, -2px)
    }

    20% {
        -webkit-transform: translate(2px, -2px);
        transform: translate(2px, -2px)
    }

    30% {
        -webkit-transform: translate(-2px, 2px);
        transform: translate(-2px, 2px)
    }

    40% {
        -webkit-transform: translate(2px, 2px);
        transform: translate(2px, 2px)
    }

    50% {
        -webkit-transform: translate(-2px, -2px);
        transform: translate(-2px, -2px)
    }

    60% {
        -webkit-transform: translate(2px, -2px);
        transform: translate(2px, -2px)
    }

    70% {
        -webkit-transform: translate(-2px, 2px);
        transform: translate(-2px, 2px)
    }

    80% {
        -webkit-transform: translate(-2px, -2px);
        transform: translate(-2px, -2px)
    }

    90% {
        -webkit-transform: translate(2px, -2px);
        transform: translate(2px, -2px)
    }

    100% {
        -webkit-transform: translate(0);
        transform: translate(0)
    }
}

@keyframes vibrate-3 {
    0% {
        -webkit-transform: translate(0);
        transform: translate(0)
    }

    10% {
        -webkit-transform: translate(-2px, -2px);
        transform: translate(-2px, -2px)
    }

    20% {
        -webkit-transform: translate(2px, -2px);
        transform: translate(2px, -2px)
    }

    30% {
        -webkit-transform: translate(-2px, 2px);
        transform: translate(-2px, 2px)
    }

    40% {
        -webkit-transform: translate(2px, 2px);
        transform: translate(2px, 2px)
    }

    50% {
        -webkit-transform: translate(-2px, -2px);
        transform: translate(-2px, -2px)
    }

    60% {
        -webkit-transform: translate(2px, -2px);
        transform: translate(2px, -2px)
    }

    70% {
        -webkit-transform: translate(-2px, 2px);
        transform: translate(-2px, 2px)
    }

    80% {
        -webkit-transform: translate(-2px, -2px);
        transform: translate(-2px, -2px)
    }

    90% {
        -webkit-transform: translate(2px, -2px);
        transform: translate(2px, -2px)
    }

    100% {
        -webkit-transform: translate(0);
        transform: translate(0)
    }
}

:root {
    --animation-vibrate-1: vibrate-1 .3s linear infinite both;
    --animation-vibrate-2: vibrate-2 .3s linear infinite both;
    --animation-vibrate-3: vibrate-3 .5s linear infinite both
}

@keyframes wobble-hor-bottom {
    0%, 100% {
        transform: translateX(0);
        transform-origin: 50% 50%
    }

    15% {
        transform: translateX(-30px) rotate(-6deg)
    }

    30% {
        transform: translateX(15px) rotate(6deg)
    }

    45% {
        transform: translateX(-15px) rotate(-3.6deg)
    }

    60% {
        transform: translateX(9px) rotate(2.4deg)
    }

    75% {
        transform: translateX(-6px) rotate(-1.2deg)
    }
}

@keyframes wobble-hor-top {
    0%, 100% {
        transform: translateX(0);
        transform-origin: 50% 50%
    }

    15% {
        transform: translateX(-30px) rotate(6deg)
    }

    30% {
        transform: translateX(15px) rotate(-6deg)
    }

    45% {
        transform: translateX(-15px) rotate(3.6deg)
    }

    60% {
        transform: translateX(9px) rotate(-2.4deg)
    }

    75% {
        transform: translateX(-6px) rotate(1.2deg)
    }
}

@keyframes wobble-ver-left {
    0%, 100% {
        transform: translateY(0) rotate(0);
        transform-origin: 50% 50%
    }

    15% {
        transform: translateY(-30px) rotate(-6deg)
    }

    30% {
        transform: translateY(15px) rotate(6deg)
    }

    45% {
        transform: translateY(-15px) rotate(-3.6deg)
    }

    60% {
        transform: translateY(9px) rotate(2.4deg)
    }

    75% {
        transform: translateY(-6px) rotate(-1.2deg)
    }
}

@keyframes wobble-ver-right {
    0%, 100% {
        transform: translateY(0) rotate(0);
        transform-origin: 50% 50%
    }

    15% {
        transform: translateY(-30px) rotate(6deg)
    }

    30% {
        transform: translateY(15px) rotate(-6deg)
    }

    45% {
        transform: translateY(-15px) rotate(3.6deg)
    }

    60% {
        transform: translateY(9px) rotate(-2.4deg)
    }

    75% {
        transform: translateY(-6px) rotate(1.2deg)
    }
}

:root {
    --animation-wobble-hor-bottom: wobble-hor-bottom .8s both;
    --animation-wobble-hor-top: wobble-hor-top .8s both;
    --animation-wobble-ver-left: wobble-ver-left .8s both;
    --animation-wobble-ver-right: wobble-ver-right .8s both
}

body {
    background: var(--background-color);
    color: var(--text-color);
    font-family: "Roboto", sans-serif;
    margin: 0
}

.container {
    background: var(--background-color);
    background-attachment: scroll;
    background-position: top center;
    background-repeat: var(--background-repeat);
    background-size: var(--background-size)
}

@media only screen and (min-width: 800px) {
    .hide-on-desktop {
        display: none
    }
}

a {
    color: var(--link-color);
    text-decoration: none
}

.grid {
    display: grid;
    grid-gap: .5rem
}

.max-w-screen-md {
    max-width: 768px
}

.max-w-screen-lg {
    max-width: 1024px
}