@keyframes rotate-pinkey {
    0% {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
    }
    /* Adding a step in the middle */
    10% {
        transform: rotate(164deg);
        -webkit-transform: rotate(164deg);
        -ms-transform: rotate(164deg);
        background: url('../images/pinkey-zonder-licht.png');
    }
    15% {
        background: url('../images/pinkey-met-licht.png');
    }
    20% {
        transform: rotate(164deg);
        -webkit-transform: rotate(164deg);
        -ms-transform: rotate(164deg);
        background: url('../images/pinkey-zonder-licht.png');

    }
    30% {
        transform: rotate(67deg);
        -webkit-transform: rotate(67deg);
        -ms-transform: rotate(67deg);
        background: url('../images/pinkey-zonder-licht.png');
    }
    35% {
        background: url('../images/pinkey-met-licht.png');
    }
    40% {
        transform: rotate(67deg);
        -webkit-transform: rotate(67deg);
        -ms-transform: rotate(67deg);
        background: url('../images/pinkey-zonder-licht.png');
    }
    50% {
        transform: rotate(-131deg);
        -webkit-transform: rotate(-131deg);
        -ms-transform: rotate(-131deg);
        background: url('../images/pinkey-zonder-licht.png');
    }
    55% {
        background: url('../images/pinkey-met-licht.png');
    }
    60% {
        transform: rotate(-131deg);
        -webkit-transform: rotate(-131deg);
        -ms-transform: rotate(-131deg);
        background: url('../images/pinkey-zonder-licht.png');
    }
    70% {
        transform: rotate(-164deg);
        -webkit-transform: rotate(-164deg);
        -ms-transform: rotate(-164deg);
        background: url('../images/pinkey-zonder-licht.png');
    }
    75% {
        background: url('../images/pinkey-met-licht.png');
    }
    80% {
        transform: rotate(-164deg);
        -webkit-transform: rotate(-164deg);
        -ms-transform: rotate(-164deg);
        background: url('../images/pinkey-zonder-licht.png');
    }
    100% {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        background: url('../images/pinkey-zonder-licht.png');
    }
}

.about__pinkey__animation__container {
    position: relative;
    width: 296px;
    height: 100%;
}

.about__pinkey__animation__background {
    width: 474px;
    height: 394px;
    background-image: url('../images/pinkey-bottom.png');
    background-repeat: no-repeat;
    position: absolute;
    left: -112px;
    top: 37px;
    margin: auto;
}
.about__pinkey__animation__selector {
    position: absolute;
    left: 0px;
    right: 0;
    top: -13px;
    margin: auto;
    border: 1px solid #000000;
    width: 41px;
    height: 41px;
    -webkit-border-radius: 21px 20px 20px 21px/21px 21px 20px 20px;
    -moz-border-radius: 21px 20px 20px 21px/21px 21px 20px;
    border-radius: 21px 20px 20px 21px/21px 21px 20px 20px;
}

.about__pinkey-top {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    animation: rotate-pinkey 13s steps(300, end) 0s infinite;
    background: url('../images/pinkey-zonder-licht.png');
    width: 296px;
    height: 296px;

}

@media screen and (min-width: 768px) {
    .about__pinkey__animation__container {
        margin: 0 auto;
    }
}