/* width100 */
.ani-width100{
    --dur: 1s;
    -webkit-animation: width100 var(--dur) 0s forwards ease;
    -moz-animation: width100 var(--dur) 0s forwards ease;
    -ms-animation: width100 var(--dur) 0s forwards ease;
    -o-animation: width100 var(--dur) 0s forwards ease;
    animation: width100 var(--dur) 0s forwards ease;
}
@keyframes width100{
    from{ width:0%; }
    to{ width:100%;}}
@-webkit-keyframes width100{
    from{ width:0%; }
    to{ width:100%;}}
@-o-keyframes width100{
    from{ width:0%; }
    to{ width:100%;}}
@-ms-keyframes width100{
    from{ width:0%; }
    to{ width:100%;}}
@-moz-keyframes width100{
    from{ width:0%; }
    to{ width:100%;}}
.ani-width100-init{
    width: 0;
}

/* fadeIN */
.ani-fadeIN{
    --dur: .5s;
    -webkit-animation: fadeIN var(--dur) forwards ease;
    -moz-animation: fadeIN var(--dur) forwards ease;
    -ms-animation: fadeIN var(--dur) forwards ease;
    -o-animation: fadeIN var(--dur) forwards ease;
    animation: fadeIN var(--dur) forwards ease;
}
@keyframes fadeIN{
    from{ opacity:0%; }
    to{ opacity:100%;}}
@-webkit-keyframes fadeIN{
    from{ opacity:0%; }
    to{ opacity:100%;}}
@-o-keyframes fadeIN{
    from{ opacity:0%; }
    to{ opacity:100%;}}
@-ms-keyframes fadeIN{
    from{ opacity:0%; }
    to{ opacity:100%;}}
@-moz-keyframes fadeIN{
    from{ opacity:0%; }
    to{ opacity:100%;}}
.ani-fadeIN-init{
    opacity:0%;   
}

    /* width100 */
.ani-height100{
    --dur: 1s;
    -webkit-animation: height100 var(--dur) 0s forwards ease;
    -moz-animation: height100 var(--dur) 0s forwards ease;
    -ms-animation: height100 var(--dur) 0s forwards ease;
    -o-animation: height100 var(--dur) 0s forwards ease;
    animation: height100 var(--dur) 0s forwards ease;
}
@keyframes height100{
    from{ height:0%; }
    to{ height:100%;}}
@-webkit-keyframes height100{
    from{ height:0%; }
    to{ height:100%;}}
@-o-keyframes height100{
    from{ height:0%; }
    to{ height:100%;}}
@-ms-keyframes height100{
    from{ height:0%; }
    to{ height:100%;}}
@-moz-keyframes height100{
    from{ height:0%; }
    to{ height:100%;}}
.ani-height100-init{
    height: 0;    
}


.ani-scale100{
    --dur: 0.5s;
    -webkit-animation: scale100 var(--dur) 0s forwards ease;
    -moz-animation: scale100 var(--dur) 0s forwards ease;
    -ms-animation: scale100 var(--dur) 0s forwards ease;
    -o-animation: scale100 var(--dur) 0s forwards ease;
    animation: scale100 var(--dur) 0s forwards ease;
}
@keyframes scale100{
    from{ transform: scale(0); }
    to{transform: scale(1);}}
@-webkit-keyframes scale100{
    from{ transform: scale(0); }
    to{ transform: scale(1);}}
@-o-keyframes scale100{
    from{ transform: scale(0); }
    to{ transform: scale(1);}}
@-ms-keyframes scale100{
    from{ transform: scale(0); }
    to{ transform: scale(1);}}
@-moz-keyframes scale100{
    from{ transform: scale(0); }
    to{ transform: scale(1);}}

.ani-fadeIN-scale100{
    --dur: .5s;
    -webkit-animation: fadeIN-scale100 var(--dur) forwards ease;
    -moz-animation: fadeIN-scale100 var(--dur) forwards ease;
    -ms-animation: fadeIN-scale100 var(--dur) forwards ease;
    -o-animation: fadeIN-scale100 var(--dur) forwards ease;
    animation: fadeIN-scale100 var(--dur) forwards ease;
}
.ani-fadeIN-scale100-init{
    opacity: 0;
    transform: scale(0);
    -webkit-transform: scale(0);
}

@keyframes fadeIN-scale100{
    from{opacity:0%; transform: scale(0); }
    to{opacity:100%; transform: scale(1);}}
@-webkit-keyframes fadeIN-scale100{
    from{opacity:0%; transform: scale(0); }
    to{opacity:100%; transform: scale(1);}}
@-o-keyframes fadeIN-scale100{
    from{opacity:0%; transform: scale(0); }
    to{opacity:100%; transform: scale(1);}}
@-ms-keyframes fadeIN-scale100{
    from{opacity:0%; transform: scale(0); }
    to{opacity:100%; transform: scale(1);}}
@-moz-keyframes fadeIN-scale100{
    from{opacity:0%; transform: scale(0); }
    to{opacity:100%; transform: scale(1);}}


.ani-fadeIN-scale100-t-init{
    opacity: 0%;
    transform: scale(0);
    -webkit-transform: scale(0);
    will-change: opacity, transform;
}
.ani-fadeIN-scale100-t{
    opacity: 100%;
    transform: scale(1);
    -webkit-transform: scale(1);
    transition: opacity .5s ease, transform .5s ease;
    -webkit-transition: opacity .5s ease, transform .5s ease;
}

/* scalePOP */
.ani-scalePOP{
    --dur: 0.7s;
    -webkit-animation: scalePOP var(--dur) 0s forwards ease;
    -moz-animation: scalePOP var(--dur) 0s forwards ease;
    -ms-animation: scalePOP var(--dur) 0s forwards ease;
    -o-animation: scalePOP var(--dur) 0s forwards ease;
    animation: scalePOP var(--dur) 0s forwards ease;
}
@keyframes scalePOP{
    0%{ scale:0%; opacity: 20%; }
    35%{ scale:150%; opacity: 100%;}
    100%{ scale:100%; opacity: 100%;}
}
    
@-webkit-keyframes scalePOP{
    from{ width:0%; }
    to{ width:100%;}}
@-o-keyframes scalePOP{
    from{ width:0%; }
    to{ width:100%;}}
@-ms-keyframes scalePOP{
    from{ width:0%; }
    to{ width:100%;}}
@-moz-keyframes scalePOP{
    from{ width:0%; }
    to{ width:100%;}}
.ani-scalePOP-init{
    scale: 0;
    opacity: 0;
}

/* scalePOP */
.ani-downIN{
    --dur: 1.5s;
    -webkit-animation: downIN var(--dur) 0s forwards ease;
    -moz-animation: downIN var(--dur) 0s forwards ease;
    -ms-animation: downIN var(--dur) 0s forwards ease;
    -o-animation: downIN var(--dur) 0s forwards ease;
    animation: downIN var(--dur) 0s forwards ease;
}
@keyframes downIN{
    0%{ transform: translate(0px, -8px); opacity: 0%; }
    30%{ transform: translate(0px, 3px); opacity: 100%;}
    50%{ transform: translate(0px, -5px); opacity: 100%;}
    100%{ transform: translate(0px, 0px); opacity: 100%; }
}
@-webkit-keyframes downIN{
    0%{ transform: translate(0px, -10px); opacity: 0%; }
    100%{ transform: translate(0px, 0px); opacity: 100%; }}
@-o-keyframes downIN{
    0%{ transform: translate(0px, -10px); opacity: 0%; }
    100%{ transform: translate(0px, 0px); opacity: 100%; }}
@-ms-keyframes downIN{
    0%{ transform: translate(0px, -10px); opacity: 0%; }
    100%{ transform: translate(0px, 0px); opacity: 100%; }}
@-moz-keyframes downIN{
    0%{ transform: translate(0px, -10px); opacity: 0%; }
    100%{ transform: translate(0px, 0px); opacity: 100%; }}
.ani-downIN-init{
    transform: translate(0px, -10px);
    -webkit-transform: translate(0px, -10px);
    opacity: 0;
}

.ani-shadowIN{
    --dur: 0.6s;
    -webkit-animation: shadowIN var(--dur) 0s forwards ease;
    -moz-animation: shadowIN var(--dur) 0s forwards ease;
    -ms-animation: shadowIN var(--dur) 0s forwards ease;
    -o-animation: shadowIN var(--dur) 0s forwards ease;
    animation: shadowIN var(--dur) 0s forwards ease;
}

.ani-shadowIN-reverse{
    --dur: 0.6s;
    -webkit-animation: shadowIN var(--dur) 0s forwards ease reverse;
    -moz-animation: shadowIN var(--dur) 0s forwards ease reverse;
    -ms-animation: shadowIN var(--dur) 0s forwards ease reverse;
    -o-animation: shadowIN var(--dur) 0s forwards ease reverse;
    animation: shadowIN var(--dur) 0s forwards ease reverse;
}
@keyframes shadowIN{
    from{ transform: scale(0.99); box-shadow: 0px 0px 0px -5px gray; border-color: white;}
    to{ transform: scale(1); box-shadow: 0px 0px 10px -5px gray; border-color: var(--border-color);}}
@-webkit-keyframes shadowIN{
    0%{ transform: scale(0.99); box-shadow: 0px 0px 0px -5px gray; border-color: white;}
    100%{ transform: scale(1);box-shadow: 0px 0px 10px -5px gray; border-color: var(--border-color);}}
@-o-keyframes shadowIN{
    0%{ transform: scale(0.99); box-shadow: 0px 0px 0px -5px gray; border-color: white;}
    100%{ transform: scale(1);box-shadow: 0px 0px 10px -5px gray; border-color: var(--border-color);}}
@-ms-keyframes shadowIN{
    0%{ transform: scale(0.99); box-shadow: 0px 0px 0px -5px gray; border-color: white;}
    100%{ transform: scale(1);box-shadow: 0px 0px 10px -5px gray; border-color: var(--border-color);}}
@-moz-keyframes shadowIN{
    0%{ transform: scale(0.99); box-shadow: 0px 0px 0px -5px gray; border-color: white;}
    100%{ transform: scale(1);box-shadow: 0px 0px 10px -5px gray; border-color: var(--border-color);}}

.ani-shadowIN-init{
    transform: scale(0.99);
    -webkit-transform: scale(0.99);
    box-shadow: 0px 0px 0px -5px gray;
    border-color: white;
    background-color: white;
    will-change: transform, box-shadow, border-color, background-color;
}

.ani-shadowIN-transition{
    transition: transform 0.6s ease, box-shadow 0.6s ease, border-color 0.6s ease, background-color 1.5s ease;
    -webkit-transition: transform 0.6s ease, box-shadow 0.6s ease, border-color 0.6s ease, background-color 1.5s ease;
    transform: scale(1);
    -webkit-transform: scale(1);
    box-shadow: 0px 0px 10px -5px gray;
    border-color: var(--border-color);
    background-color: var(--section-bg-color);
}
.ani-shadowIN-transition-r{
    transition: transform 0.6s ease, box-shadow 0.6s ease, border-color 0.6s ease, background-color 0.6s ease;
    -webkit-transition: transform 0.6s ease, box-shadow 0.6s ease, border-color 0.6s ease, background-color 0.6s ease;
    transform: scale(0.99);
    -webkit-transform: scale(0.99);
    box-shadow: 0px 0px 0px -5px gray;
    border-color: white;
}

/* FOR SHADOW HIGHLIGHT */
.ani-border-highlight{
    border-color: rgb(100, 147, 255);
    box-shadow: 0px 0px 23px -5px rgb(58, 84, 255);
}
.ani-border-highlight-init{
    transition: border-color 1s ease, box-shadow 1s;
    -webkit-transition: border-color 1s ease, box-shadow 1s;
}

/* FOR FIXED BXSLIDER */
.ani-scaleIN-init{
    transform: scale(0.90);
    -webkit-transform: scale(0.90);
    opacity: 0.95;
}
.ani-scaleIN{
    transition: transform 0.2s, opacity 0.2s ease;
    -webkit-transition: transform 0.2s, opacity 0.2s ease;
    transform: scale(1);
    -webkit-transform: scale(0.90);
    opacity: 1;
}
.ani-scaleIN-r{
    transform: scale(0.95);
    opacity: 0.95;
}
/* 
.ani-typing{
    position: absolute;
    top: 3px;
    left: 6px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    animation: typing 5s steps(31) infinite;
  }
  
  @keyframes typing{
    0% {
      width: 0%;
    }
    100% {
      width: 100%;
    }
  } */