@import url("https://fonts.googleapis.com/css?family=Raleway:900&display=swap"); 

:root {
  --accent-color: #c9aa62;
  --base-color: #000000;
}

.hamburg {
  position: relative;
  width: 55px;
  height: 55px;
  padding: 0;
  display: block;
  background-color: var(--base-color);
  border-radius: 10px;
  z-index: 100;
  box-shadow: 0 0 12px 1px #c9aa629e;
  cursor: pointer;
}

.hamburg .bar1,
.hamburg .bar2,
.hamburg .bar3 {
  display: none !important;
}

.hamburg::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 50%;
  width: 30px;
  height: 4px;
  background-color: var(--accent-color);
  border-radius: 5px;
  transform: translateX(-50%);
  box-shadow:
    0 11px 0 var(--accent-color),
    0 22px 0 var(--accent-color);
  transition:
    top .35s ease,
    transform .35s ease,
    box-shadow .2s ease;
}

.hamburg::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 4px;
  background-color: var(--accent-color);
  border-radius: 5px;
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-45deg);
  transition:
    opacity .2s ease,
    transform .35s ease;
}

.card-sosmed.open .hamburg::before {
  top: 50%;
  box-shadow: none;
  transform: translate(-50%, -50%) rotate(45deg);
}

.card-sosmed.open .hamburg::after {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(-45deg);
}
  
.card-sosmed { 
  position: fixed; 
  bottom: 9em; 
  left: 14px; 
  z-index: 99; 
  } 
  
/* Titik pusat seluruh ikon berada di tengah tombol */ 

.card-sosmed ul { 
  position: absolute; 
  left: 0; 
  bottom: 0; 
  width: 55px; 
  height: 55px; 
  margin: 0; 
  padding: 0; 
  } 
  
.card-sosmed ul li { 
  position: absolute; 
  left: 0; 
  bottom: 0; 
  width: 55px; 
  height: 55px; 
  margin: 0; 
  padding: 0; 
  list-style: none; 
  
/* Kondisi tertutup: masuk ke dalam tombol X */ 
  transform: translateY(0) scale(0); 
  transform-origin: center center; 
  opacity: 0; 
  visibility: hidden; 
  pointer-events: none; 

  transition: 
    transform .45s ease, 
    opacity .25s ease, 
    visibility 0s linear .45s; 
  }
  
/* Kondisi terbuka */ 
.card-sosmed.open ul li { 
  opacity: 1; 
  visibility: visible; 
  pointer-events: auto; 

  transition: transform .45s ease, 
  opacity .25s ease, 
  visibility 0s; 
  } 
  
/* Jarak antarikon */ 
.card-sosmed.open ul li:nth-child(1) {
  transform: translateY(-70px) scale(1);
}

.card-sosmed.open ul li:nth-child(2) {
  transform: translateY(-140px) scale(1);
}

.card-sosmed.open ul li:nth-child(3) {
  transform: translateY(-210px) scale(1);
}

.card-sosmed.open ul li:nth-child(4) {
  transform: translateY(-280px) scale(1);
}

.card-sosmed.open ul li:nth-child(5) {
  transform: translateY(-350px) scale(1);
}

.card-sosmed.open ul li:nth-child(6) {
  transform: translateY(-420px) scale(1);
}
  
.card-sosmed ul li a img { 
  display: block; 
  width: 48px; 
  height: 48px; 
  object-fit: contain; 
  }
  
.card-sosmed ul li a { 
  display: flex; 
  width: 55px; 
  height: 55px; 
  box-sizing: border-box; 
  border: 2px solid var(--accent-color); 
  border-radius: 10px; 
  justify-content: center; 
  align-items: center; 
  overflow: hidden; 
  background-color: #000; 
  } 
  
.card-sosmed ul li div { 
  position: absolute; 
  transition: all .3s ease; 
  opacity: 0; 
  scale: .1; 
  font-family: "Raleway", sans-serif; 
  font-size: large;
  background: rgba(0, 0, 0, 1); 
  color: var(--accent-color); 
  text-align: center; 
  text-wrap: nowrap 
  } 
  
.card-sosmed ul li:hover div { 
  opacity: 1; 
  scale: 1 
  } 
  
.card-sosmed ul li:nth-child(1) div { 
  transform: translateY(-240px) 
  } 
  
.card-sosmed ul li:nth-child(1):hover div { 
  transform: translateY(-95px) 
  } 
  
.card-sosmed ul li:nth-child(2) div { 
  transform: translateY(-175px) 
  } 
  
.card-sosmed ul li:nth-child(2):hover div { 
  transform: translate(30px, -95px) 
  } 
  
.card-sosmed ul li:nth-child(3) div { 
  transform: translateY(-150px) 
  } 
  
.card-sosmed ul li:nth-child(3):hover div { 
  transform: translate(50px, -90px) 
  } 
  
.card-sosmed ul li:nth-child(4) div { 
  transform: translateX(160px) 
  } 
  
.card-sosmed ul li:nth-child(4):hover div { 
  transform: translate(50px, -90px) 
  } 
  
.card-sosmed ul li:nth-child(5) div { 
  transform: translate(110px, 70px) 
  } 
  
.card-sosmed ul li:nth-child(5):hover div { 
  transform: translate(62px, -80px) 
  } 
  
.card-sosmed ul li:nth-child(6) div { 
  transform: translate(55px, 135px) 
  } 
  
.card-sosmed ul li:nth-child(6):hover div { 
  transform: translate(65px, -65px) 
  } 
  
.attention { 
  position: relative; 
  -webkit-clip-path: polygon(0% 0, 100% 0, 100% 75%, 49% 75%, 22% 100%, 22% 75%, 0% 75%); 
  clip-path: polygon(0% 0, 100% 0, 100% 75%, 49% 75%, 22% 100%, 22% 75%, 0% 75%); 
  width: 80px; 
  text-wrap: nowrap; 
  height: 30px; 
  margin-bottom: 5px; 
  left: 15px; 
  background-color: var(--base-color); 
  cursor: default; 
  color: var(--accent-color); 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  padding-bottom: 10px; 
  opacity: 0 
  } 
  
.whore { 
  animation: flicker .6s infinite; 
  } 
  
.whore:hover { 
  animation-duration: 10s; 
  } 
  
@keyframes flicker { 
  0% { 
    opacity: 1 
    } 
  50% { 
    opacity: 0 
    } 
  100% { 
    opacity: 1 
    } 
  } 
  
@media screen and (max-width:600px) { 
  .card-sosmed { 
    bottom: 9em; 
    left: 10px; 
    } 
  } 
  
.menu-bottom .footericon-single, .menu-bottom .footericon-single a{ 
    font-weight: bolder; 
    } 
    
.info-centre .content-box li .btn-link{ 
    color: #fff !important; 
    font-weight: bolder; 
    } 
    
.menu-bottom .navbar-inverse{ 
    background: linear-gradient(to bottom, #02945c 0, #111b22 100%) 
    !important; 
    } 
    
.footer-content { 
    text-align: center!important; 
    }