.circle-ripple {
    background-color: transparent;
    width: 17em;
    height: 17em;
    border-radius: 50%;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 50%;
    animation: ripple 3s linear infinite;
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-fill-mode: none;
    animation-play-state: running;
    animation-name: ripple;
    position: absolute;
    box-shadow: inset 0 0 30px 5px rgb(200 202 227 / 20%), 0 0 30px 5px rgb(200 202 227 / 20%);
    left: 0;
    display: table;
    margin: -10em auto 0;
    margin-top: -10em;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    right: 0;
    top: 50%;
}

@keyframes ripple {
    0% {
        transform: scale(1);
        opacity: 0;
        box-shadow: inset 0 0 30px 5px rgba(200 202 227 / 20%), 0 0 30px 5px rgba(200 202 227 / 20%);
    }
    60% {
        transform: scale(2);
        opacity: 1;
        box-shadow: inset 0 0 50px 5px rgba(200 202 227 / 20%), 0 0 50px 5px rgba(200 202 227 / 20%);
    }
    100% {
        transform: scale(3);
        opacity: 0;
        box-shadow: inset 0 0 80px 5px rgba(200 202 227 / 30%), 0 0 80px 5px rgba(200 202 227 / 30%);
    }
}

svg {
    fill: transparent;
    stroke: #B8883C;
    stroke-width: 4px;
    width: 100%;
}

.dg {
    display: inline-block;
    background: linear-gradient(to right, #3C98F4, #3C98F4);
    background-clip: border-box;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.floatImg {
    top: -210px;
    left: 10px;
    /*position: absolute;*/
    -webkit-animation: rotating 20s linear infinite;
    -moz-animation: rotating 20s linear infinite;
    -ms-animation: rotating 20s linear infinite;
    -o-animation: rotating 20s linear infinite;
    animation: rotating 20s linear infinite;
}

@keyframes rotating {
    from {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.work-box-bg {
    background: url(img/work-petern.png);
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    animation: ripple 5s infinite;
    transition: all 400ms ease;
}

.work-box img {
    position: relative;
}