/*********************************************/
/***** Menu Toggle Switches BEGIN*****/
/*********************************************/
.cmn-toggle-switch{position:relative;display:block;width:60px;height:40px;overflow:hidden;margin:4px 0 0 0;padding:0;-webkit-appearance:none;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{position:absolute;top:16px;left:0;right:0;display:block;width:40px;height:4px;background-color:#000;}
.cmn-toggle-switch span:before,
.cmn-toggle-switch span:after{content:"";position:absolute;left:0;display:block;width:40px;height:4px;background-color:#000;}
.cmn-toggle-switch span:before{top:-10px;}
.cmn-toggle-switch span:after{bottom:-10px;}
/*** 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.3s;transition:background 0 0.3s;}
.cmn-toggle-switch__htx span:before,
.cmn-toggle-switch__htx span:after{-webkit-transition-duration:0.3s, 0.3s;transition-duration:0.3s, 0.3s;transition-delay:0.3s, 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.3s;transition-delay:0, 0.3s;background-color:#44D62C;}
.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.3s;transition-delay:0, 0.3s;}
/*********************************************/
/***** END Menu Toggle Switches *****/
/*********************************************/



/*********************************************/
/***** UniversalInViewObserver BEGIN *****/
/*********************************************/
[data-observe]{opacity:0;transform:none;transition-property:opacity, transform;transition-duration:0.6s;transition-timing-function:ease;will-change:opacity, transform;}
/* Початкові позиції — автоматично за класом data-animation */
[data-animation="slide-up"]{transform:translateY(100%);}
[data-animation="slide-down"]{transform:translateY(-100%);}
[data-animation="slide-left"]{transform:translateX(-100%);}
[data-animation="slide-right"]{transform:translateX(100%);}
[data-animation="scale-up"]{transform:scale(0.8);}
[data-animation="fade-in"]{opacity:0;}
/* Коли в полі видимості */
[data-observe].in-view{opacity:1;transform:none;}
/* Анімаційна затримка */
[data-observe][data-delay]{transition-delay:var(--delay, 0s);}
/*********************************************/
/***** END UniversalInViewObserver *****/
/*********************************************/