@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@300;400;500;600;800;900&display=swap');


@media (min-width: 320px){
  .h-58 {
      height: 15rem;}
  }
  
  
  @media (min-width: 640px){
  .sm\:h-68 {
      height: 38rem;}
  }
  
  @media (min-width: 1280px){
  .xl\:h-85 {
      height: 40rem;}
  }
      @media (min-width: 1536px){
  .\32xl\:h-98 {
      height: 55rem;}
  }

  .zindex{z-index: 0 !important;}

.container-flip
{
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;

}

.flip
{
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-center
{
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrap {
  flex-wrap: wrap;
}

.flip-dial 
{
  position: relative;
  width: 10vw;
  height: 14vw;
  margin: 0.5vw;
}

.flip-card 
{
  position: absolute;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  perspective: 40vw;
  z-index: 0;
}

.flip-card.active {
  z-index: 1;
}

.flip-card .card
{
  width: 100%;
  height: 50%;
  border-radius: 15% 15% 0 0;
  border-bottom-width: 0;
  background: transparent;
  transform-origin: center bottom;
  overflow: hidden;
}

.flip-card.active .card {
  background:#F1F2F2;
}

.flip-card.flip .card {
  transition: transform 0.2s ease-in-out;
  transform: rotate3d(1,0,0,-90deg);
  z-index: 2;
}

.flip-card .card.bottom
{
  border-top: 0.2vw solid #bcbec0;
  border-radius: 0 0 15% 15%;
  background: #ffffff;
  transform-origin: center top;
  transform: rotate3d(1,0,0,90deg);
  transition-delay: 0.2s;
}

.flip-card.flip .card.bottom {
  transform: rotate3d(1,0,0,0deg);
}

.flip-card .card i
{
  color: #131212;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12vw;
  font-style:normal;
  font-weight: 800;
  transform: translateY(16%);
}

.flip-card .bottom i
{
  transform: translateY(-23%);
}

.area-garis {
  background: url(/media/file-manager/files/3/image/flipnew.png) no-repeat center center;
  background-size: contain;
}

.jumlah-case{color:#191D88;  font-family: 'Barlow Condensed', sans-serif;}
.text-case{color:#000F9F; font-family: 'Barlow Condensed', sans-serif;}
.font-barlow{font-family: 'Barlow Condensed', sans-serif;}