/*********************************************/
/***** Menu Toggle Switches BEGIN*****/
/*********************************************/
.cmn-toggle-switch{position:relative;display:block;width:32px;height:22px;margin:0;padding:0;cursor:pointer;appearance:none;box-shadow:none;border-radius:none;border:none;cursor:pointer;-webkit-transition:background 0.5s;transition:background 0.5s;}
.cmn-toggle-switch:focus{outline:none;}
.cmn-toggle-switch span{display:block;position:absolute;top:10px;left:0;width:24px;height:2px;background-color:#FF5100;}
.cmn-toggle-switch span:before,.cmn-toggle-switch span:after{content:"";position:absolute;display:block;left:0;width:32px;height:2px;background-color:#0057B8;}
.cmn-toggle-switch span:before{top:-10px;}
.cmn-toggle-switch span:after{bottom:-10px;}
.cmn-toggle-switch em{display:block;margin-top:30px;color:#AF9670;}
/*Hamburger to "x" (htx). Takes on a hamburger shape, bars slide down to center and transform into an "x"*/
.cmn-toggle-switch__htx{background-color:transparent;}
.cmn-toggle-switch__htx span{-webkit-transition:background 0 0.5s;transition:background 0 0.5s;}
.cmn-toggle-switch__htx span:before,.cmn-toggle-switch__htx span:after{-webkit-transition-duration:0.5s, 0.5s;transition-duration:0.5s, 0.5s;-webkit-transition-delay:0.5s, 0;transition-delay:0.5s, 0;}
.cmn-toggle-switch__htx span:before{-webkit-transition-property:top, -webkit-transform;transition-property:top, transform;}
.cmn-toggle-switch__htx span:after{-webkit-transition-property:bottom, -webkit-transform;transition-property:bottom, transform;}
/* active state, i.e. menu open */
.cmn-toggle-switch__htx.active{background-color:transparent;}
.cmn-toggle-switch__htx.active span{background:none;}
.cmn-toggle-switch__htx.active span:before{top:0;-webkit-transform:rotate(45deg);transform:rotate(45deg);}
.cmn-toggle-switch__htx.active span:after{bottom:0;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);}
.cmn-toggle-switch__htx.active span:before,
.cmn-toggle-switch__htx.active span:after{-webkit-transition-delay:0, 0.5s;transition-delay:0, 0.5s;background-color:#FFD700;}
.cmn-toggle-switch__htx.x-active span:before{ top:0;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);}
.cmn-toggle-switch__htx.x-active span:after{bottom:0;-webkit-transform:rotate(45deg);transform:rotate(45deg);}
.cmn-toggle-switch__htx.x-active span:before,.cmn-toggle-switch__htx.x-active span:after{-webkit-transition-delay:0, 0.5s;transition-delay:0, 0.5s;}
/*********************************************/
/***** END Menu Toggle Switches *****/
/*********************************************/

/*********************************************/
/***** AnimateObserver BEGIN*****/
/*********************************************/
[data-observe]{opacity:0;transition:opacity 0.5s ease, transform 0.5s ease;}
/* Початкові стани */
.anim-fade{opacity:0;}
.anim-slide-up{transform:translateY(50%);}
.anim-slide-down{transform:translateY(-50%);}
.anim-slide-left{transform:translateX(50%);}
.anim-slide-right{transform:translateX(-50%);}
/* При появі */
.in-view.fade-in{opacity:1;}
.in-view.slide-up{opacity:1;transform:translateY(0);}
.in-view.slide-down{opacity:1;transform:translateY(0);}
.in-view.slide-left{opacity:1;transform:translateX(0);}
.in-view.slide-right{opacity:1;transform:translateX(0);}
/*********************************************/
/***** END AnimateObserver *****/
/*********************************************/

/*********************************************/
/***** Zoom In & Out BEGIN *****/
/*********************************************/
.zoom-in{-webkit-transform:scale(1.1);transform:scale(1.1);-webkit-transition:all 0.5s linear 0s;transition:all 0.5s linear 0s;}
.zoom-in:hover{-webkit-transform:scale(1);transform:scale(1);}
.zoom-out{-webkit-transform:scale(1);transform:scale(1);-webkit-transition:all 0.5s linear 0s;transition:all 0.5s linear 0s;}
.zoom-out:hover{-webkit-transform:scale(1.1);transform:scale(1.1);}
/*********************************************/
/***** END Zoom In & Out *****/
/*********************************************/

/*********************************************/
/***** Scrolling Logos BEGIN *****/
/*********************************************/
.scrolling-logos-container{overflow:hidden;padding:20px 0;}
.scrolling-row{display:flex;mask-image:linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);overflow:hidden;padding:0px;white-space:nowrap;align-items:center;}
.scrolling-row:last-child{margin-top:-1px;}
.logos-track{display:flex;align-items:center;animation-timing-function:linear;animation-iteration-count:infinite;}
.scrolling-row.left .logos-track{animation-name:scroll-left;}
.scrolling-row.right .logos-track{animation-name:scroll-right;}
.logo-item{flex:0 0 300px;border-width:1px 1px 1px 0;border-style:solid;border-color:#DFDFDF;padding:30px;}
.logo-item img{display:block;width:100%;max-width:200px;height:auto;}
/* Анімації без стрибка */
@keyframes scroll-left{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@keyframes scroll-right{from{transform:translateX(-50%);}to{transform:translateX(0);}}
/*********************************************/
/***** END Scrolling Logos *****/
/*********************************************/

/*********************************************/
/***** Anima BEGIN*****/
/*********************************************/
.anima{position:absolute;top:80px;right:0;width:18%;}
@media(max-width:1680px){.anima{width:17.5%;}}
@media(max-width:1600px){.anima{width:17%;}}
@media(max-width:1536px){.anima{width:16.5%;}}
@media(max-width:1440px){.anima{width:16%;}}
@media(max-width:1366px){.anima{width:15.5%;}}
@media(max-width:1280px){.anima{width:15%;}}
@media(max-width:1200px){.anima{}}
@media(max-width:1152px){.anima{}}
@media(max-width:1024px){.anima{}}
@media(max-width:960px){.anima{display:none;}}
/*********************************************/
/***** END Anima *****/
/*********************************************/

/*********************************************/
/***** Pulse & Tossing BEGIN *****/
/*********************************************/
.pulse{width: 100px;height: 100px;border-radius: 100px;padding: 10px;-webkit-animation: pulse 2s infinite !important;animation: pulse 2s infinite !important;}
.tossing{-webkit-animation: tossing 2s infinite;animation: tossing 2s infinite;}
@-webkit-keyframes pulse{0%{-webkit-box-shadow: 0 0 0 0 rgba(255 ,255, 255, 0.4);}70%{-webkit-box-shadow: 0 0 0 20px rgba(255 ,255, 255, 0);}100%{-webkit-box-shadow: 0 0 0 0 rgba(255 ,255, 255, 0);}}
@keyframes pulse{0%{box-shadow: 0 0 0 0 rgba(255 ,255, 255, 0.4);}70%{box-shadow: 0 0 0 20px rgba(255 ,255, 255, 0);}100%{box-shadow: 0 0 0 0 rgba(255 ,255, 255, 0);}}
@-webkit-keyframes tossing{0%{-webkit-transform: rotate(-4deg);}50%{-webkit-transform: rotate(4deg);}100%{-webkit-transform: rotate(-4deg);}}
@keyframes tossing{0%{transform: rotate(-4deg);}50%{transform: rotate(4deg);}100%{transform: rotate(-4deg);}}
/*********************************************/
/***** END Pulse & Tossing *****/
/*********************************************/

/*********************************************/
/***** Scale animate BEGIN*****/
/*********************************************/
.scale{-webkit-animation: scale 2s infinite;animation: scale 2s infinite;}
@-webkit-keyframes scale{0%{-webkit-transform:scale(0.75, 0.75);transform: scale(0.75, 0.75);}50%{-webkit-transform: scale(1.0, 1.0);transform: scale(1.0, 1.0);}100%{-webkit-transform: scale(0.75, 0.75);transform: scale(0.75, 0.75);}}
@keyframes scale{0%{-webkit-transform: scale(0.75, 0.75);transform: scale(0.75, 0.75);}50%{-webkit-transform: scale(1.0, 1.0);transform: scale(1.0, 1.0);}100%{-webkit-transform: scale(0.75, 0.75);transform: scale(0.75, 0.75);}}
/*********************************************/
/***** END Scale animate *****/
/*********************************************/

/*********************************************/
/***** Move animate BEGIN*****/
/*********************************************/
.move,.movie{width: 85px;-webkit-animation: alternate move 10s infinite;animation: alternate move 10s infinite;animation-timing-function: linear;}
@-webkit-keyframes move{from{left: 0;}to{left: 97.5%;}}
@keyframes move{from{left: 0;}to{left: 97.5%;}}
.movie{width: 85px;-webkit-animation: alternate movie 10s infinite;animation: alternate movie 10s infinite;animation-timing-function: linear;}
@-webkit-keyframes movie{from{right: 0;}to{right: 97.5%;}}
@keyframes movie{from{right: 0;}to{right: 97.5%;}}
/*********************************************/
/***** END Move animate *****/
/*********************************************/

/*********************************************/
/***** Loader animate BEGIN*****/
/*********************************************/
.preloader{position: absolute;top: 50%;left: 50%;-webkit-transform: translate(-50%,-50%);transform: translate(-50%,-50%);text-align: center;}
.loader{position: relative;width: 128px;height: 128px;margin: 0 auto;-webkit-animation: loader 2s infinite linear;animation: loader 2s infinite linear;text-align: center;}
.loader span{position: absolute;left: 0;top: 0;width: 128px;height: 128px;border: 16px solid rgba(0, 175, 235, 1);-webkit-border-radius: 128px;border-radius: 128px;}
.loader span:nth-child(1){z-index: 1;-webkit-animation: span-1 2s ease-in-out infinite;animation: span-1 2s ease-in-out infinite;}
.loader span:nth-child(2){z-index: 3;-webkit-animation: span-2 2s ease-in-out infinite;animation: span-2 2s ease-in-out infinite;}
.loader span:nth-child(3){z-index: 2;-webkit-animation: span-3 2s ease-in-out infinite;animation: span-3 2s ease-in-out infinite;}
.loader span:nth-child(4){z-index: 4;-webkit-animation: span-4 2s ease-in-out infinite;animation: span-4 2s ease-in-out infinite;}
@keyframes loader{0%{transform:rotate(45deg)}50%{transform:rotate(135deg)}100%{transform:rotate(225deg)}}
@keyframes span-1{0% {transform:translate(0);}50%{transform:translate(-50px, 0);border-color:rgba(230, 0, 105, 1)}100%{transform:translate(0);}}
@keyframes span-2{0%{transform:translate(0);}50%{transform:translate(50px, 0);border-color:rgba(230, 0, 105, 0.75)}100%{transform:translate(0);}}
@keyframes span-3{0%{transform:translate(0);}50%{transform:translate(0, -50px);border-color:rgba(0, 175, 235, 1)}100%{transform:translate(0);}}
@keyframes span-4{0%{transform:translate(0);}50%{transform:translate(0, 50px);border-color:rgba(0, 175, 235, 0.75)}100%{transform:translate(0);}}
/*********************************************/
/***** END Loader animate *****/
/*********************************************/

/*********************************************/
/***** Rotate animate BEGIN*****/
/*********************************************/
.rotate{-webkit-animation: rotate 4s infinite;animation: rotate 4s infinite;}
@-webkit-keyframes rotate{0%{transform: rotate(0deg);}100%{transform: rotate(360deg);}}
@keyframes rotate{0%{transform: rotate(0deg);}100%{-webkit-transform: rotate(360deg);transform: rotate(360deg);}}
/*********************************************/
/***** END Rotate animate *****/
/*********************************************/

/*********************************************/
/***** Other animate BEGIN*****/
/*********************************************/
.shape{
    animation:spin 6s linear infinite;
}

@keyframes spin{
    0%{transform:rotate(0deg);} 
    75%{transform:rotate(360deg);}
    100%{transform:rotate(0deg);}
}

/* Анімація shake (рух у всі сторони) */
.shake{
    animation:shake 3s ease-in-out infinite;
}
@keyframes shake{
    0%, 100%{transform:translate(0, 0);}
    20%{transform:translate(-5px, -5px);}
    40%{transform:translate(5px, 5px);}
    60%{transform:translate(-3px, 4px);}
    80%{transform:translate(3px, -4px);}
}

/* Анімація shakeX (тремтіння по горизонталі) */
.shakeX{
    animation:shakeX 3s ease-in-out infinite;
}
@keyframes shakeX{
    0%, 100%{transform:translateX(0);}
    25%{transform:translateX(-5px);}
    50%{transform:translateX(5px);}
    75%{transform:translateX(-3px);}
}

/* Анімація shakeY (тремтіння по вертикалі) */
.shakeY{
    animation:shakeY 3s ease-in-out infinite;
}
@keyframes shakeY{
    0%, 100%{transform:translateY(0);}
    25%{transform:translateY(-5px);}
    50%{transform:translateY(5px);}
    75%{transform:translateY(-3px);}
}

/* Анімація bounce (підстрибування) */
.bounce{
    animation:bounce 2s ease-in-out infinite;
}
@keyframes bounce {
    0%, 100%{transform:translateY(0);}
    30%{transform:translateY(-30px);}/* Підстрибує */
    50%{transform:translateY(0);}/* Повертається */
    70%{transform:translateY(-15px);}/* Маленький додатковий стрибок */
    90%{transform:translateY(0);}/* Остаточне повернення */
}

.rotate-scale-up{
    -webkit-animation:rotate-scale-up 1s linear both;
    animation:rotate-scale-up 1s linear both;
}
@-webkit-keyframes rotate-scale-up{
  0%{
    -webkit-transform:scale(1) rotateZ(0);
    transform:scale(1) rotateZ(0);
  }
  50%{
    -webkit-transform:scale(2) rotateZ(180deg);
    transform:scale(2) rotateZ(180deg);
  }
  100%{
    -webkit-transform:scale(1) rotateZ(360deg);
    transform:scale(1) rotateZ(360deg);
  }
}
@keyframes rotate-scale-up{
    0%{
        -webkit-transform:scale(1) rotateZ(0);
        transform:scale(1) rotateZ(0);
    }
    50%{
        -webkit-transform:scale(2) rotateZ(180deg);
        transform:scale(2) rotateZ(180deg);
    }
    100%{
        -webkit-transform:scale(1) rotateZ(360deg);
        transform:scale(1) rotateZ(360deg);
    }
}

.vibrate{
    -webkit-animation:vibrate 3s linear infinite both;
    animation:vibrate 3s linear infinite both;
}
@-webkit-keyframes vibrate {
  0% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  20% {
    -webkit-transform: translate(-2px, 2px);
            transform: translate(-2px, 2px);
  }
  40% {
    -webkit-transform: translate(-2px, -2px);
            transform: translate(-2px, -2px);
  }
  60% {
    -webkit-transform: translate(2px, 2px);
            transform: translate(2px, 2px);
  }
  80% {
    -webkit-transform: translate(2px, -2px);
            transform: translate(2px, -2px);
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}
@keyframes vibrate {
  0% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  20% {
    -webkit-transform: translate(-2px, 2px);
            transform: translate(-2px, 2px);
  }
  40% {
    -webkit-transform: translate(-2px, -2px);
            transform: translate(-2px, -2px);
  }
  60% {
    -webkit-transform: translate(2px, 2px);
            transform: translate(2px, 2px);
  }
  80% {
    -webkit-transform: translate(2px, -2px);
            transform: translate(2px, -2px);
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}
/*********************************************/
/***** END Other animate *****/
/*********************************************/