* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    width: 95%;
    margin: auto;
    background-color: white;
}

.adjes-class {
    margin: auto;
    align-self: center;
    margin-top: 10em;
}

.container {
    position: relative;
    width: 14.5em;
    height: 14.5em;
}

.frame {
    border-radius: 50%;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
}

.img-border {
    position: relative;
    border: solid rgb(30, 156, 230) 0.75em;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    padding: 0.5em;
    margin: 0.75em;
    width: 13.25em;
    height: 13.25em;
    top: 0.6em;
}

.image {
    width: 100%;
    height: 100%;
}

.quarter-ring {
    position: absolute;
    width: 7.25em;
    height: 7.25em;
    border: solid rgba(0, 185, 255, 0.5);
}

.ring-top-left {
    border-width: 0.75em 0 0 0.75em;
    left: 0;
    top: 0;
    border-top-left-radius: 200px;
}

.ring-top-right {
    border-width: 0.75em 0.75em 0 0px;
    right: 0;
    top: 0;
    border-top-right-radius: 200px;
}

.ring-bottom-left {
    border-width: 0px 0 0.75em 0.75em;
    left: 0;
    bottom: 0;
    border-bottom-left-radius: 200px;
}

.ring-bottom-right {
    right: 0;
    bottom: 0;
    border-width: 0px 0.75em 0.75em 0px;
    border-bottom-right-radius: 200px;
}

.img-animation {
    animation: linear forwards;
    animation-name: img-animation;
    animation-duration: 20s;
    animation-delay: 0s;
    animation-iteration-count: 1;
}

@keyframes img-animation {
    0% {
        transform: none;
        width: 1em;
        height: 1em;
        top: 6.2em;
        left: 5.6em;
        border-width: 0.75em
    }
    5% {
        transform: none;
        width: 13.25em;
        height: 13.25em;
        top: 0.6em;
        left: 0;
        border-width: 6em
    }
    10% {
        transform: none;
        border-width: 0.75em
    }
    20% {
        transform: none
    }
    25% {
        transform: rotateY(0)
    }
    32.5% {
        transform: rotateY(180deg)
    }
    40% {
        transform: rotateY(0)
    }
    100% {
        transform: none
    }
}

.frame-animation {
    animation: linear;
    animation-name: frame-animation;
    animation-duration: 20s;
    animation-delay: 0s;
    animation-iteration-count: 1;
}

@keyframes frame-animation {
    0% {
        transform: none;
        opacity: 0;
        width: 14.5em;
        height: 14.5em;
        margin-left: 0;
        margin-top: 0
    }
    12% {
        transform: none;
        opacity: 0;
        width: 16em;
        height: 16em;
        margin-left: -0.75em;
        margin-top: -0.75em
    }
    13% {
        transform: none;
        opacity: 1;
        width: 16em;
        height: 16em;
        margin-left: -0.75em;
        margin-top: -0.75em
    }
    17% {
        transform: none;
        opacity: 1;
        width: 14.5em;
        height: 14.5em;
        margin-left: 0;
        margin-top: 0
    }
    25% {
        transform: rotateY(0)
    }
    27% {
        transform: rotateY(0)
    }
    31% {
        transform: rotateY(180deg)
    }
    34% {
        transform: rotateY(180deg)
    }
    40% {
        transform: rotateY(0)
    }
    45% {
        transform: rotateY(0)
    }
    70% {
        transform: none;
        width: 100%;
        height: 100%;
        top: 0em
    }
    70.5% {
        transform: none;
        height: 100%;
        top: 0em;
        margin-left: 0;
        margin-top: 0
    }
    73.5% {
        transform: none;
        width: 16em;
        height: 16em;
        margin-left: -0.75em;
        margin-top: -0.75em
    }
    78.5% {
        transform: rotate(360deg);
        width: 16em;
        height: 16em;
        margin-left: -0.75em;
        margin-top: -0.75em
    }
    80.5% {
        transform: rotate(360deg);
        width: 16em;
        height: 16em;
        margin-left: -0.75em;
        margin-top: -0.75em
    }
    84.5% {
        transform: rotate(720deg);
        width: 16em;
        height: 16em;
        margin-left: -0.75em;
        margin-top: -0.75em
    }
    86.5% {
        transform: rotate(720deg);
        width: 16em;
        height: 16em;
        margin-left: -0.75em;
        margin-top: -0.75em
    }
    90.5% {
        transform: rotate(0deg);
        width: 100%;
        height: 100%;
        margin-left: 0;
        margin-top: 0
    }
    100% {
        transform: none;
        ;
        width: 100%;
        height: 100%;
        margin-left: 0;
        margin-top: 0
    }
}

.jump-animation {
    animation: linear;
    animation-name: jump-animation;
    animation-duration: 20s;
    animation-delay: 0s;
    animation-iteration-count: 1;
}

@keyframes jump-animation {
    0% {
        transform: none;
        height: 14.5em;
        top: 0em
    }
    50% {
        transform: none;
        height: 14.5em;
        top: 0em
    }
    50.5% {
        transform: none;
        height: 13.5em;
        top: 1em
    }
    51% {
        transform: none;
        height: 14.5em;
        top: 0em
    }
    53% {
        transform: none;
        height: 14.5em;
        top: -6em
    }
    55.5% {
        transform: none;
        height: 12.5em;
        top: -6em
    }
    56% {
        transform: none;
        height: 14.5em;
        top: 0em
    }
    56.5% {
        transform: none;
        height: 10.5em;
        top: 4em
    }
    57.5% {
        transform: none;
        height: 14.5em;
        top: 0em
    }
    58.5% {
        transform: none;
        height: 14.5em;
        top: -3em
    }
    59% {
        transform: none;
        height: 14.5em;
        top: 0em
    }
    60% {
        transform: none;
        height: 13.5em;
        top: 1em
    }
    61% {
        transform: none;
        height: 14.5em;
        top: 0em
    }
    65% {
        transform: none;
        height: 14.5em;
        top: 0em
    }
    65.5% {
        transform: none;
        height: 13.5em;
        top: 1em
    }
    66% {
        transform: none;
        height: 14.5em;
        top: 0em
    }
    68% {
        transform: none;
        height: 14.5em;
        top: -6em
    }
    69% {
        transform: none;
        height: 14.5em;
        top: -5em
    }
    89% {
        transform: none;
        height: 14.5em;
        top: -5em
    }
    89.5% {
        transform: none;
        height: 14.5em;
        top: 0em
    }
    90% {
        transform: none;
        height: 10.5em;
        top: 4em
    }
    91% {
        transform: none;
        height: 14.5em;
        top: 0em
    }
    92% {
        transform: none;
        height: 14.5em;
        top: -3em
    }
    92.5% {
        transform: none;
        height: 14.5em;
        top: 0em
    }
    93.5% {
        transform: none;
        height: 13.5em;
        top: 1em
    }
    94.5% {
        transform: none;
        height: 14.5em;
        top: 0em
    }
    100% {
        transform: none;
        height: 14.5em;
        top: 0em
    }
}