/* @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap'); */

.ac-counter-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  text-align: center;
  background: #202b39 url('../images/bg-counter.webp') no-repeat center;
  background-size: cover;
  color: #fff;
  font-size: 10vw;
  font-family: "montSemiBold", sans-serif;
  /* font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-style: normal; */
}

.ac-container {
  display: flex;
  flex-flow: column nowrap;
  gap: 40px;
  width: 90%;
  position: relative;
}

.top-counter {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  text-align: left;
  align-items: center;
  padding: 25px 0 0;
}

.btm-counter {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  text-align: left;
  align-items: center;
  padding: 0 0 25px;
}

h2 {
  font-size: 2vw;
  margin: 0;
  white-space: nowrap;
}
h2.title {
  color:#fff;
}

p.subtitle {
  color: #86c2eb;
  font-size: 1.2vw;
  margin: 0;
  font-family: "montLight", sans-serif;
}

.top-counter .logo {
  flex: 0 1 40%;
  display: flex;
}

.top-counter .logo img { max-width: 100%; }

.ac-counter-number {
	display: flex;
	justify-content: flex-start;
	font-family: 'montSemiBold', sans-serif;
	gap: 15px;
	width: 100%;
}

.ac-counter-number .ac-digit:nth-child(3n) {
  margin-left: 15px;
}

.ac-digit {
	--c: #e0193b;
	--w: 0.5ch;
	--g: 15px;
	background-color: var(--c);
	color: #fff;
	/* font-variant-numeric: tabular-nums; */
	font-family: "montSemiBold", sans-serif;
	flex: 1 1 calc(100% / 8);
	display: flex;
	justify-content: center;
	align-self: center;
  overflow: hidden;
  height: 1em;
}

.ac-digit-inner {
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease-in-out;
}

.ac-digit span {
  line-height: 1em;
  font-size: 1em;
}

/* EDITOR PREVIEW */
.ac-counter-number.special-editor {
  --c: #e0193b; /* control the colors */
  --w: 0.5ch;   /* control the width for each number */
  --g: 15px;    /* control the gap between numbers */

  letter-spacing: var(--w);
  color: #fff;
  background: var(--c);
  mask: 
    repeating-linear-gradient(90deg, #fff 0 calc(1ch + var(--w) - var(--g)), transparent 0 calc(1ch + var(--w)))
    0/calc(100% - var(--w)/2) 100% no-repeat;
/* 
  mask: repeating-linear-gradient(90deg, #fff 0 calc(1ch + var(--w) - var(--g)), transparent 0 calc(1ch + var(--w))) 0/calc(100% - var(--w)/2) 100% no-repeat; */

  padding-left: calc((var(--w) - var(--g))/2);
  margin-right: calc(var(--w)/-2);
  font-variant-numeric: tabular-nums;
  font-family: "montSemiBold", sans-serif;
  max-width: 100%;  
  font-size: 103%;
  margin-top: 0;
}

.mid-counter {
  display: flex;
  justify-content: space-between;
  gap: 5px;
}

.mid-counter .ac-unit {
  font-size: 3vw;
  align-self: end;
  white-space: nowrap;
}

.mid-counter .ac-unit sub { font-size: 1.8vw; }

.ac-counter-meta {
  font-size: 2vw;
  color: #aaa;
  margin-top: 20px;
}

.ac-pause-btn {
  margin: 20px auto 0;
  padding: 10px 20px;
  background: #0f0;
  color: #000;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.sub-btm-counter {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  text-align: left;
  padding-top: 40px;
  align-items: center;
}

.sub-btm-counter p {
  margin:0;
  font-size: .85vw;
  font-family: "montLight", sans-serif;
}

.sub-btm-counter .logo-mg {
  flex: 0 1 5%;
  display: flex;
  align-items: flex-start;
}

.sub-btm-counter .logo-mg img { max-width:100%; }

@media only screen and (max-width: 650px) {
  .ac-counter-number {
    gap: 5px;
  }
  .ac-counter-number .ac-digit:nth-child(3n) {
    margin-left: 10px;
  }
}