#social { position:fixed; z-index:999; left:var(--left,inherit); right:var(--right,inherit); bottom:var(--bottom,inherit); display:none; } 
#social .btn-frame { position:relative; margin:30px 0px; } 
#social .btn-frame i { background-color:var(--background); } 
/* #social .btn-frame img { border-radius:50%; } */
#social .btn-frame .kenit-alo-circle { border:2px solid var(--background); border-color:var(--background); } 
#social .btn-frame .kenit-alo-circle-fill { background-color:var(--background); } 
/* TODO:Toolbar */
/* .toolbar { background:var(--background); width:100%; padding:10px; bottom:0px; position:fixed; z-index:500; height:auto; left:0px; max-height:65px; display:none; } 
.toolbar ul { list-style:none; display:-webkit-box; display:-webkit-flex; display:-moz-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -webkit-align-items:center; -moz-box-align:center; -ms-flex-align:center; align-items:center; -webkit-box-pack:justify; -webkit-justify-content:space-between; -moz-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between; padding:0px; margin:0px; } 
.toolbar ul li { text-align:center; width:25%; } 
.toolbar ul li a { display:block; width:100%; cursor:pointer; } 
.toolbar ul li a img { height:20px; width:20px; -webkit-animation:tada 1.2s infinite; -moz-animation:tada 1.2s infinite; -o-animation:tada 1.2s infinite; animation:tada 1.2s infinite; } 
.toolbar ul li a span { color:var(--color); font-size:10px; } */


.btn_animation--style:before { content: ""; position: absolute; margin: 0 auto; inset: 0; width: 100%; background-image: linear-gradient(180deg, rgb(0, 183, 255), rgb(255, 48, 255)); height: 60px; animation: rotate360 4s linear infinite; transition: all 0.2s linear; z-index: 0; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -ms-transition: all 0.2s linear; -o-transition: all 0.2s linear; pointer-events: none; -webkit-animation: rotate360 4s linear infinite; } 
 
 .btn_animation--style:after { content: ""; position: absolute; background: #fff; inset: 4px; border-radius: 4px; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; } 
 
 @keyframes rotate360 { 
 0% { transform: rotate(0deg); } 
 
 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); } 
 }

.toolbar { width: 100%; bottom: 0px; position: fixed; z-index: 500; left: 0px; display: none; -webkit-filter: drop-shadow(1px 1px 4px rgba(0, 0, 0, 0.75)); -moz-filter: drop-shadow(1px 1px 4px rgba(0, 0, 0, 0.75)); -ms-filter: drop-shadow(1px 1px 4px rgba(0, 0, 0, 0.75)); -o-filter: drop-shadow(1px 1px 4px rgba(0, 0, 0, 0.75)); } 
.toolbar.is-active .list-phone { display: block; -webkit-animation: quickShow .2s cubic-bezier(0.66, 0.45, 0.76, 1.53) forwards; animation: quickShow .2s cubic-bezier(0.66, 0.45, 0.76, 1.53) forwards; } 
.toolbar .list-phone { position: absolute; bottom: 100%; left: 30px; opacity: 0; transform: scale(0); transform-origin: 50% 100%; display: none; } 
.toolbar .list-phone a { display: flex; flex-wrap: wrap; align-items: center; justify-content: start; background: var(--background); max-width: 240px; padding: 5px 10px; margin: 10px 0; border-radius: 50px; padding-right: 30px; } 
.toolbar .list-phone svg { max-width: 26px; max-height: 26px; } 
.toolbar .list-phone span { display: block; width: calc(100% - 40px); color: var(--color); font-weight: 700; } 
.toolbar .phone { position: relative; width: 50px; height: 50px; z-index: 99; display: flex; align-items: center; justify-content: center; background: var(--background); border-radius: 50%; margin: 0 0px -25px 30px; transition: transform .2s ease-in-out; } 
.toolbar .phone a { color: var(--color); display: block; position: relative; } 
.toolbar .phone a:before,
.toolbar .phone a:after { position: absolute; content: ''; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(135deg); width: 30px; height: 3px; border-radius: 2rem; background-color: var(--main-color); opacity: 0; transition: opacity .2s ease-in-out; } 
.toolbar .phone a:after { transform: translate(-50%, -50%) rotate(45deg); } 
.toolbar .phone svg { max-width: 27px; max-height: 27px; display: block; position: relative; fill: var(--main-color); } 
.toolbar.is-active .phone { transform: rotate(-180deg); } 
.toolbar.is-active .phone img { opacity: 0; } 
.toolbar.is-active .phone a:before,
.toolbar.is-active .phone a:after { opacity: 1; } 
.toolbar ul { list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 0px; margin: 0px; --size: 33px; -webkit-mask: radial-gradient(var(--size) at 55px 0px, #0000 99%, #fff 101%) 100%; background: var(--background); padding: 5px 0; padding-left: 90px; border-radius: 10px 10px 0px 0px; } 
.toolbar ul li { text-align: center; width: 25%; line-height: 1; } 
.toolbar ul li a { display: block; width: 100%; color:var(--color); } 
.toolbar ul li .icon { position: relative; margin: 0 auto; text-align: center; } 
.toolbar ul li a span { display: inline-block; font-weight: 400; font-size: 9px; margin-top: 5px; color: var(--color); text-transform: capitalize; } 
.toolbar ul li a img,
.toolbar ul li svg { max-height: 22px; fill: var(--main-color); } 
.toolbar .phone img { animation: tada 1.2s infinite; fill: var(--main-color); } 
.tada { animation: tada 1.2s infinite; } 
.lang-toolbar { display: flex; justify-content: center; align-items: center; } 
.toolbar ul li.lang-toolbar a { display: inline-block; width: unset; margin: 0px 2px; font-size: unset; } 
.toolbar ul li.lang-toolbar a img { height: 10% !important; } 
.ex6 path { fill: transparent; stroke: var(--main-color); stroke-width: 0.5; stroke-dasharray: 1500; stroke-dashoffset: 1500; -webkit-animation: dash 5s ease forwards; animation: dash 5s ease forwards; } 
@-webkit-keyframes dash { to { fill: var(--main-color); stroke-dashoffset: 0; } 
 }
@keyframes dash { to { fill: var(--main-color); stroke-dashoffset: 0; } 
 }
@keyframes tada { 
 0% { transform: scaleX(1) } 10%,20% { transform: scale3d(.9, .9, .9) rotate(-3deg) } 30%,50%,70%,90% { transform: scale3d(1.1, 1.1, 1.1) rotate(3deg); } 40%,60%,80% { transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg); } 
 to { transform: scaleX(1) } 
 }
@keyframes quickShow { 
 0% { opacity: 0; transform: scale(0); } 100% { opacity: 1; transform: scale(1); } 
 }