/* Стили анимации кручения */
@keyframes rotateInstallment {
    0% {
        transform: rotate(0);
    }
    50% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
/* Стили анимации кручения */
@keyframes rotateInstallmentBack {
    0% {
        transform: rotate(0);
    }
    50% {
        transform: rotate(-180deg);
    }
    100% {
        transform: rotate(-360deg);
    }
}
/* Стили анимации линии */
@keyframes line {
    0% {
        height: 0;
    }
    50% {
        height: 235px;
    }
    100% {
        height: 235px;
    }
}
/* Стили анимации пульсации кругов */
@keyframes pulse {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }
    50% {
        opacity: 0.7;
    }
    100% {
        transform: scale(0.9);
        opacity: 0;
    }
}
/* Стили кроссбраузерной анимации пульсации кругов */
@-webkit-keyframes pulse {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }
    50% {
        opacity: 0.7;
    }
    100% {
        transform: scale(0.9);
        opacity: 0;
    }
}

/* Стили анимации блика для кнопок */
@keyframes sheens {
    0%,79% {
        opacity: 0;
        filter: alpha(opacity=0);
        -webkit-transform: rotateZ(60deg) translate(-5em,7.5em);
        transform: rotateZ(60deg) translate(-5em,7.5em)
    }

    80% {
        opacity: 1;
        filter: alpha(opacity=100);
        -webkit-transform: rotateZ(60deg) translate(-5em,7.5em);
        transform: rotateZ(60deg) translate(-5em,7.5em)
    }

    95% {
        opacity: 1;
        filter: alpha(opacity=100);
        -webkit-transform: rotateZ(60deg) translate(1em,-11em);
        transform: rotateZ(60deg) translate(1em,-11em)
    }

    to {
        opacity: 0;
        filter: alpha(opacity=0);
        -webkit-transform: rotateZ(60deg) translate(1em,-9em);
        transform: rotateZ(60deg) translate(1em,-9em)
    }
}
/* Стили кроссбраузерной анимации блика для кнопок */
@-webkit-keyframes sheens {
    0%,79% {
        opacity: 0;
        filter: alpha(opacity=0);
        -webkit-transform: rotateZ(60deg) translate(-5em,7.5em);
        transform: rotateZ(60deg) translate(-5em,7.5em)
    }

    80% {
        opacity: 1;
        filter: alpha(opacity=100);
        -webkit-transform: rotateZ(60deg) translate(-5em,7.5em);
        transform: rotateZ(60deg) translate(-5em,7.5em)
    }

    95% {
        opacity: 1;
        filter: alpha(opacity=100);
        -webkit-transform: rotateZ(60deg) translate(1em,-11em);
        transform: rotateZ(60deg) translate(1em,-11em)
    }

    to {
        opacity: 0;
        filter: alpha(opacity=0);
        -webkit-transform: rotateZ(60deg) translate(1em,-9em);
        transform: rotateZ(60deg) translate(1em,-9em)
    }
}


/* Стили анимации полоски в квизе */
@keyframes moveIt{
    from{
        background-position: 0 center
    }
        
    to{
        background-position: 37px center
    }
}

/* Стили кроссбраузерной анимации полоски в квизе */
@-webkit-keyframes moveIt{
    from{
        background-position: 0 center
    }
        
    to{
        background-position: 48px center
    }
}
@keyframes xxx {
    0% {
        clip-path: polygon(50% 0%, 50% 0, 50% 0, 50% 0, 50% 0, 50% 0, 50% 0, 50% 50%, 50% 50%);
      
    }
    12.5% {
        clip-path: polygon(50% 0%, 100% 0, 100% 0, 100% 0, 100% 0, 100% 0, 100% 0, 50% 50%, 50% 50%);
    }
    25% {
        clip-path: polygon(50% 0%, 100% 0, 100% 50%, 100% 50%, 100% 50%, 100% 50%, 100% 50%, 50% 50%, 50% 50%);
    }
    37.5% {
      
      clip-path: polygon(50% 0%, 100% 0, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 50% 50%, 50% 50%);
    }
    50% {
        clip-path: polygon(50% 0%, 100% 0, 100% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 50%, 50% 50%);
    }
    62.5% {
      
      clip-path: polygon(50% 0%, 100% 0, 100% 100%, 0 100%, 0 100%, 0 100%, 0 100%, 50% 50%, 50% 50%);
    }
    75% {
      
      clip-path: polygon(50% 0%, 100% 0, 100% 100%, 0 100%, 0 100%, 0 50%, 0 50%, 50% 50%, 50% 50%);
    }
    87.5% {
        clip-path: polygon(50% 0%, 100% 0, 100% 100%, 0 100%, 0 100%, 0 0, 0 0, 50% 50%, 50% 50%);
    }
    100% {
        clip-path: polygon(50% 0%, 100% 0, 100% 100%, 0 100%, 0 100%, 0 0, 50% 0, 50% 50%, 50% 50%);
    }
  }
@media(min-width: 1200px) {
    
    @keyframes moveIt{
        from{
            background-position: 0 center
        }
            
        to{
            background-position: 1.9270833333333335VW center
        }
    }
    @keyframes line {
        0% {
            height: 0;
        }
        50% {
            height: 6.1395833333vw;
        }
        100% {
            height: 12.2395833333vw;
        }
    }
}