/* coming soon page css */
/*----------------------*/

#overlay-proses {
	position: fixed;
	display: none;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0.5);
	z-index: 9999;
	cursor: pointer;
}

#text-overlay{
	position: absolute;
	top: 50%;
	left: 50%;
	font-size: 50px;
	color: white;
	transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
}

.cs-btn-notify {
  right: 7px;
  top: 6px;
}

.coming-soon {
  /* For counter - font size and color css */
  font-size: 3rem;
  color: #324356;
}

.cs-effect {
  -webkit-animation-duration: 4s;
          animation-duration: 4s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

.cs-effect.cs-effect-bounce {
  -webkit-animation-name: cs-effect-bounce;
          animation-name: cs-effect-bounce;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

@-webkit-keyframes cs-effect-bounce {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(30px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes cs-effect-bounce {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(30px);
  }
  100% {
    transform: translateY(0);
  }
}
@media only screen and (max-width: 575px) {
  .coming-soon {
    flex-wrap: wrap;
  }

  .coming-soon .clockCard {
    padding: 0 0.5rem !important;
  }
}