.pulse {
    border-radius: 50%;
    animation: pulse 2s infinite;
}

.pulseGray {
    border-radius: 50%;
    animation: pulseGray 2s infinite;
}


.pulseRevese {
    border-radius: 50%;
    animation: pulseRevese 2s infinite;
}

.elem {
    width: 200px;
    height: 50px;
}
.elem:hover {
    animation: 1.2s ease-in-out 0s normal none infinite running trambling-animation;
}

@keyframes trambling-animation {
    0%, 50%, 100% {
        transform: rotate(0deg);
    }
    10%, 30% {
        transform: rotate(-5deg);
    }
    20%, 40% {
        transform: rotate(5deg);
    }
}



.trambling-animation { /* Анимация тряски */
    animation: 1.2s ease-in-out 0s normal none running trambling-animation;
}



@keyframes imgInCart {



    from {
        opacity: 0;
        /* transform: scale3d(.85, .85, 1); */
        transform: scale3d(1.1, 1.1, 1);
    }

    to {
  /*      opacity: 1;


*/
        transform: scale3d(.85, .85, 1);
        /*top:  cartOffset.top;
        left: cartOffset.left + 30;*/
        opacity: 0.25;
        width: 50px;
    }




    /*

    0%, 50%, 100% {
        transform: rotate(0deg);
    }
    10%, 30% {
        transform: rotate(-10deg);
    }
    20%, 40% {
        transform: rotate(10deg);

    }

    */
}



@keyframes trambling-animation {

    0%, 50%, 100% {
        transform: rotate(0deg);
    }
    10%, 30% {
        transform: rotate(-5deg);
    }
    20%, 40% {
        transform: rotate(5deg);

    }
}



/*
 Класс пульс используется для пульсации объектов для привлечения внимания. Используется в функции ОткрытьМодульМеню
 */

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 var(--main-color-white);
    }
    70% {
        box-shadow: 0 0 0 .5em rgba(204,169,44, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(204,169,44, 0);
    }
}

@keyframes pulseGray {
    0% {
        box-shadow: 0 0 0 0 var(--main-color-gray);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(204,169,44, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(204,169,44, 0);
    }
}

@keyframes pulseRevese {
    0% {
        box-shadow: 0 0 0 10px rgba(204,204,204, 0.5);
    }
    70% {

    }
    100% {
        box-shadow: 0 0 0 0 rgba(204,204,204, 1);
    }
}


@keyframes zoomIn {

    from{
        opacity: 0;
        transform: scale3d(.85, .85, 1);
        /*transform: scale3d(1.1, 1.1, 1); */
    }

    to {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
}

@keyframes zoomOut {

    from{

        transform: scale3d(1, 1, 1);

    }
    50% {
        transform: scale3d(1.25, 1.25, 1);
    }

    to {

        transform: scale3d(1, 1, 1);
    }
}

@keyframes zoomDown {

    from{

        transform: scale3d(1, 1, 1);

    }

    to {

        transform: scale3d(.85, .85, 1);
    }
}


@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100%  {
        opacity: 1;
    }
}



@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 1em, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}



@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translate3d(0, -1em, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInDownLeft {

    from {
        opacity: 0;
        visibility: hidden;
        transform: translate3d(1em, -1em, 0) scale(0.9);
    }

    to {
        opacity: 1;
        visibility: visible;
        transform: translate3d(0, 0, 0)  scale(1);
    }

}




@keyframes fadeInDownScale {
    from {
        opacity: 0;
        visibility: hidden;
        transform: translate3d(0, -4em, 0) scale3d(1.15,1.15,1.15);
    }

    to {
        opacity: 1;
        visibility: visible;
        transform: translate3d(0, 0, 0)  scale3d(1,1,1);
    }
}


@keyframes fadeInRightDown {
    0% {
        opacity: 0;
        visibility: hidden;
        transform: translate3d(-1em,-1em,0)
    }

    to {
        opacity: 1;
        visibility: visible;
        transform: translate3d(0,0,0)
    }
}


@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translate3d(1em, 0, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}



@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translate3d(-1em, 0, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}



@keyframes fadeOutLeft {

    0% {opacity:1; }
    100% {opacity:0; }


}


@keyframes fadeOutRight {
    from {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

    to {
        opacity: 0;
        transform: translate3d(1em, 0, 0);
    }
}


@keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100%  {
        opacity: 0;
    }
}


@keyframes fadeOutUp {
    0% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

    100%  {
        opacity: 0;
        transform: translate3d(0, -1em, 0);
    }
}

@keyframes fadeOutDown {
    from {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

    to {
        opacity: 0;
        transform: translate3d(0, 1em, 0);
    }
}




.imgInCart {
    animation-name: imgInCart;
}

.zoomIn {
    animation-name: zoomIn;
}

.zoomOut {
    animation-name: zoomOut;
}

.zoomDown {
    animation-name: zoomDown;
}

.fadeIn {
    animation-name: fadeIn;
}


.fadeInUp {
    animation-name: fadeInUp;
}

.fadeInDown {
    animation-name: fadeInDown;
}

.fadeInDownLeft {
    animation-name: fadeInDownLeft;
}

.fadeInDownScale {
    animation-name: fadeInDownScale;
    animation-fill-mode: forwards;
}

.fadeInRightDown {
    animation-name: fadeInRightDown;
}


.fadeInLeft {
    animation-name: fadeInLeft;
}

.fadeInRight {
    animation-name: fadeInRight;
}

.fadeOutLeft {
    animation: fadeOutLeft ease .3s;
}

.fadeOutRight {
    animation-name: fadeOutRight;
}

.fadeOut {
    animation-duration: 3s;
    animation: fadeOut ease 3s;
}

.fadeOutUp {
    animation-duration: 3s;
    animation: fadeOutUp ease 3s;
}

.fadeOutDown {
    animation-name: fadeOutDown;
}

.animated {
    animation-duration: .3s;
    /* animation-fill-mode использовать не рекомендуется, т.к. это ломает позиционирование fixed (блоки не прижимаются к самому краю, например корзина в ЛК клиента)  */
    /* animation-fill-mode: forwards; */
}

.animated.infinite {
    animation-iteration-count: infinite;
}

.animated.delay-1s {
    animation-delay: 1s;
}

.animated.delay-2s {
    animation-delay: 2s;
}

.animated.delay-3s {
    animation-delay: 3s;
}

.animated.delay-4s {
    animation-delay: 4s;
}

.animated.delay-5s {
    animation-delay: 5s;
}

.animated.fast {
    animation-duration: 800ms;
}

.animated.faster {
    animation-duration: 500ms;
}

.animated.veryfast {
    animation-duration: 300ms;
}

.animated.slow {
    animation-duration: 2s;
}

.animated.slower {
    animation-duration: 3s;
}

.spinner {
    width: 100%;
    display: none;
    text-align: center;
    position: absolute;
    top: 45%;
    font-size: 2em;
}

.spinner > div {
    width: .5em;
    margin: .25em;
    height: .5em;
    background-color: var(--main-color-light-gray);
    border-radius: 100%;
    display: inline-block;
    animation: sk-bouncedelay 1s infinite ease-in-out both;
}

.bounce1 {}


.spinner .bounce1 {
    animation-delay: -0.30s;
}

.spinner .bounce2 {
    animation-delay: -0.15s;
}



@keyframes sk-bouncedelay {
    0%, 80%, 100% {
        transform: scale(0);
    } 40% {
          transform: scale(1.0);
      }
}



@keyframes textPreload {
    0% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0 50%;
    }
}

.textPreload {
    color: transparent;
    background: linear-gradient(90deg, var(--main-color-light-gray) 30%, var(--main-color-extra-light-gray) 50%, var(--main-color-light-gray) 70%);
    background-size: 400%;
    animation: textPreload 1.25s ease-in-out infinite;
    border-radius: 1em;
    line-height: 2.5em;
    display: flex;
}


/*
@keyframes  {
    from {}
    to {}
}


 */

/* начальный позиция с которой начинается анимация угол поворота (верхняя точка) по часовой стрелке */
/* конечная точка тоже верхний угол. обернули полный круг */

@keyframes car {
    from { margin-top: -2.75em; }
    50% { margin-top: -3em; }
    to   {  margin-top: -2.75em; }
}

@keyframes earth {
    from {
        transform: rotate(360deg);
    }
    to {
        transform: rotate(0deg);
    }
}

.rotWrap {
    position: relative;
    top: 51%;
    left: 50%;
    right: 50%;width: 5em;height: 5em;}

.rotWrap .earth {
    /* font-size: 3em; */
    animation: earth 10s infinite linear;
    display: flex;
    position: absolute;
}

.rotWrap .car {
    /* margin: -3em; */
    font-size: 1.5em;
    animation: car .5s infinite;
    display: flex;
    position: absolute;/* margin: 2em; */
    margin-top: -.3em;
    margin-left: -.3em;}


.rotWrap .earth svg {
    transform: scale(3);
    box-shadow: 0 0 5px var(--main-color-light-blue);
    border-radius: 50%;
    fill: var(--main-color-white-force);
}

.rotWrap .car svg {
    /* transform: rotate(-90deg);*/
    fill: var(--main-color-white-force);
    height: 36px;
}