/*https: //codepen.io/TKS31/pen/gOaKaxx*/

.field {
    display: flex;
    justify-content: center;
    align-items: center; 
}

@keyframes wheel {
    to {
        opacity: 0;
        top: 60px;
    }
}
@-webkit-keyframes wheel {
    to {
        opacity: 0;
        top: 60px;
    }
}

.scroll {
    width: 60px;
    height: 60px;
    border: 2px solid #333;
    border-radius: 50%;
    position: relative;
    animation: down 1.5s infinite;
    -webkit-animation: down 1.5s infinite;

    &::before {
        content: '';
        position: absolute;
        top: 15px;
        left: 18px;
        width: 18px;
        height: 18px;
        border-left: 2px solid #333;
        border-bottom: 2px solid #333;
        transform: rotate(-45deg);
    }
}

@keyframes down {
    0% { transform: translate(0); }
    20% { transform: translateY(15px); }
    40% { transform: translate(0); }
}

@-webkit-keyframes down {
    0% { transform: translate(0); }
    20% { transform: translateY(15px); }
    40% { transform: translate(0); }
}

@keyframes scroll {
    0% { height: 40px; }
    30% { height: 70px; }
    60% { height: 40px; }
}

@-webkit-keyframes scroll {
    0% { height: 40px; }
    30% { height: 70px; }
    60% { height: 40px; }
}