:root {
  /* Animation Timing Function */
  --primary-timing-func: cubic-bezier(0.86, 0, 0.07, 1);
  /* Button Variables */
  --button-radius: 60px; 
  --button-inner-ring-radius: 120px;
  --button-outer-ring-radius: 100px;
  --button-gradient: 135deg, rgba(0,168,89,1) 0%, rgba(0,168,89,1) 100%;
  --main-background-color: #00a859;
  /* Menu Variables */
  --menu-radius: calc(var(--button-radius) - 2px);
  --menu-height: 255px;
  --menu-width: 255px;
  --menu-border-radius: 10px;
  --menu-bg-color: #141622;
  --menu-timing-function: var(--primary-timing-func);
  --menu-icon-size: 20px;
/*   Close Icon */
  --close-icon-timing-function: var(--primary-timing-func);
}

svg{
  fill: #FFFFFF;
}

*{
  box-sizing: border-box;
}

.sticky-menu-container{
  position: fixed;
  right: calc(var(--button-radius));
  bottom: calc(var(--button-radius));
  display: flex;
  align-items: center;
  justify-content: center;
	z-index: 100;
}

.sticky-menu-container .outer-button{
  position: absolute;
  height: var(--button-radius, 70px);
  width: var(--button-radius, 70px);
  border-radius: 50%;
  background: rgb(0,168,89);
  background: -moz-linear-gradient(var(--button-gradient));
  background: -webkit-linear-gradient(var(--button-gradient));
  background: linear-gradient(var(--button-gradient));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 10px 10px 18px 5px rgba(0,0,0,0.2);
  cursor: pointer;
}
.sticky-menu-container .outer-button .icon-container{
  height: inherit;
  width: inherit;
  border-radius: inherit;
  display: inherit;
  align-items: inherit;
  justify-content: inherit;
  overflow: hidden;
  position: relative;
  cursor: inherit;
}
.sticky-menu-container .outer-button .close-icon{
  transform: scale(0) rotate(-270deg);
  opacity: 0;
  height: 25px;
  width: 25px;
  position: absolute;
  fill: #FFFFFF;
}

.sticky-menu-container .outer-button .arrow-icon{
  height: 25px;
  width: 25px;
  position: absolute;
  fill: #FFFFFF;
}

.sticky-menu-container .outer-button .arrow-icon.hiding-spot{
transform: translateX(calc(var(--button-radius) / -2)) translateY(calc(var(--button-radius) / 2));
  opacity: 0;
}

.sticky-menu-container .outer-button .close-icon.show{
  animation-duration: 1000ms;
  animation-name: close-in;
  animation-fill-mode: forwards;
  animation-timing-function: var(--close-icon-timing-function); 
}

.sticky-menu-container .outer-button .close-icon.hide{
  animation-duration: 1000ms;
  animation-name: close-out;
  animation-timing-function: var(--close-icon-timing-function); 
}

.sticky-menu-container .outer-button .arrow-icon.show{
  opacity: 0;
  animation-duration: 1000ms;
  animation-name: arrow-in;
  animation-fill-mode: forwards;
  animation-timing-function: var(--close-icon-timing-function); 
/*   animation-delay: 250ms; */
}

.sticky-menu-container .outer-button .arrow-icon.hide{
  animation-duration: 1000ms;
  animation-name: arrow-out;
  animation-fill-mode: forwards;
  animation-timing-function: var(--close-icon-timing-function); 
}

.sticky-menu-container .outer-button::after, sticky-menu-container.outer-button::before{
  position: absolute;
  display: inline-block;
  content: "";
  height: var(--button-inner-ring-radius);
  width: var(--button-inner-ring-radius);
  border-radius: 50%;
  background-color:transparent;
  border: 0px solid rgba(255,255,255,0.5);
  opcacity: 0;
  cursor: pointer;
}

.sticky-menu-container .outer-button.clicked::after{
  animation-duration: 500ms;
  animation-name: touch-click-inner;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.sticky-menu-container .outer-button::before{
  height: var(--button-outer-ring-radius);
  width: var(--button-outer-ring-radius);
}

.sticky-menu-container .outer-button.clicked::before{
  animation-name: touch-click-outer;
  animation-duration: 500ms;
  animation-iteration-count: 1;
  animation-delay: 250ms;
}

.sticky-menu-container .inner-menu{
  position: absolute;
  height: var(--menu-height);
  width: var(--menu-width);
  border-radius: var(--menu-border-radius);
  background-color: var(--menu-bg-color); 
/*   transform: translate(calc(-50% + var(--button-radius) / 2), calc(-55% - var(--button-radius) / 2)); */
  transform: translateX(-91px) translateY(-169px);
  transition: all 1000ms cubic-bezier(0.86, 0, 0.07, 1);
/*   transition-delay: 500ms; */
  padding: 30px;
  overflow: hidden;
  box-shadow: 10px 10px 18px 5px rgba(0,0,0,0.4);
}

.sticky-menu-container .inner-menu > ul{
  height: 100%;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  margin: 0;
  padding: 0;
}

.sticky-menu-container .inner-menu > .menu-list > .menu-itemjudul{
  color: #FFFFFF;
  text-transform: uppercase;
  letter-spacing: 3px;
  width: 100%;
  display: flex;
  align-items: center;
}

.sticky-menu-container .inner-menu > .menu-list > .menu-item{
  color: #FFFFFF;
  text-transform: uppercase;
  letter-spacing: 3px;
  width: 100%;
  display: flex;
  align-items: center;
}

.sticky-menu-container .inner-menu > .menu-list > .menu-item{
  overflow: hidden;
}

.sticky-menu-container .inner-menu > .menu-list > .menu-item > .item-icon{
  margin-right: 20px; 
  display: flex;
  align-items: center;
  justify-content: center;
}

.sticky-menu-container .inner-menu > .menu-list > .menu-item > .item-icon > svg{
  height: var(--menu-icon-size);
  width: var(--menu-icon-size);
}

.sticky-menu-container .inner-menu.closed{
  height: var(--menu-radius);
  width: var(--menu-radius);
  border-radius: 50%;
  padding:0;
  transform: unset;
}

.sticky-menu-container .inner-menu > .menu-list > .menu-item > .item-text{
  opacity: 0;  
}

.sticky-menu-container .inner-menu > .menu-list > .menu-item > .item-text.text-in{
  animation-duration: 1500ms;
  animation-name: text-in;
  animation-fill-mode: forwards;
  animation-timing-function: var(--close-icon-timing-function);
}

.sticky-menu-container .inner-menu > .menu-list > .menu-item.text-hides{
  animation-duration: 200ms;
  animation-name: text-hides;
  animation-fill-mode: forwards;
  animation-timing-function: var(--close-icon-timing-function);
}

@keyframes touch-click-inner {
  50%{ 
      transform: scale(0.375);
      border-width: 30px;
      opacity: 1;
  }
  100%{ 
      transform: scale(1);
      border-width: 1px;
      opacity: 0;
  }
}

@keyframes touch-click-outer {
  0%{
    border-width: 10px;
    opacity: 0;
  }
  50%{
    opacity: 0.2;
  }
  100%{ 
      transform: scale(1.1);
      opacity: 0;
  }
}

@keyframes close-in{
  0%{
    transform: transform: scale(0) rotate(270deg);
    opacity: 0;
  }
  100% {
    transform: scale(1.1) rotate(0deg);
    opacity: 1;
  }
}

@keyframes close-out{
  0%{
    transform: scale(1.1) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: scale(0) rotate(270deg);
    opacity: 0;
  }
}

@keyframes arrow-out{
  0%{
    transform: translateX(0) translateY(0);
  }
  100%{
    transform: translateX(calc(var(--button-radius) / 1.5)) translateY(calc(var(--button-radius) / -1.5));
  }
}

@keyframes arrow-in{
  0%{
    transform: translateX(calc( -1 * var(--button-radius))) translateY(calc(var(--button-radius)));
    opacity: 0;
  }
  100%{
    transform: translateX(0) translateY(0);
    opacity: 1;
  }
}

@keyframes text-in{
  0%{
    opcaity: 1;
    transform: translateY(50px);
  }
  100%{
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes text-hides{
  0%{
    opacity: 1;
  }
  100%{
    opacity: 0;
  }
}

.item-textwa{
	font-size: 12px;
	color: #ffffff;
}

.item-judulwa{
	font: "Arial Black";
	font-size: 14px;
	color: #ffffff;
	font: bold;
}

/* 
https://www.instagram.com/p/ByuNUGkAVHk/ 
*/

*/